/* ==========================================================================
   Seite «Produkte» – ergänzt css/style.css (wird nur von produkte.html geladen).
   Farben, Schriften, Rundungen und Abstände kommen aus den Design-Tokens in style.css.
   Aufbau:
   1. Hilfsklassen und Buttons
   2. Hero (kompakte Variante)
   3. Produktraster: einheitliche, kompakte Karten mit Piktogramm
   ========================================================================== */


/* 1. HILFSKLASSEN UND BUTTONS -------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Zurückhaltender Button für Herstellerlinks (Umriss statt Fläche, damit Pink sparsam bleibt) */
.btn--outline {
  background: transparent;
  background-color: transparent !important;
  border-color: var(--blue-dark);
  color: var(--blue-dark) !important;
  color-scheme: light only;
}
.btn--outline:hover {
  background: var(--blue-dark);
  background-color: #212B5B !important;
  border-color: var(--blue-dark);
  color: var(--white) !important;
}
.btn__arrow { flex: none; margin-left: .65rem; transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }


/* 2. HERO (KOMPAKT) ------------------------------------------------------ */
/* .hero--compact ist jetzt in css/style.css definiert (wird auch von dienstleistungen.css
   verwendet). Hier nichts Seitenspezifisches nötig. */


/* 3. PRODUKTRASTER -------------------------------------------------------- */
.products { padding-block: var(--section); }

/* Ein Feld, drei Spaltenstufen: 1 Spalte (Smartphone) → 2 (Tablet) → 3 (Desktop).
   Alle sechs Hersteller sind gleich aufgebaut, damit das Raster ruhig und übersichtlich wirkt. */
.products__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1180px) {
  .products__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Seite jetzt mit weissem Grundhintergrund (kein seitenweites .section--tint mehr, siehe
   produkte.html) – die Karten selbst tragen die dezente, dem Corporate Design entsprechende
   Hellblau-Tönung, damit sich das Raster weiterhin sichtbar von der weissen Fläche abhebt. */
.product {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  position: relative;
  border: 1px solid rgba(66, 165, 245, .16);
  border-radius: var(--radius-l);
  /* Minimal wärmerer/weicherer Ton (Hue leicht Richtung Indigo, etwas entsättigt) statt
     reinem Eisblau, plus ein sehr dezenter Hauch Pink im Verlauf. */
  background-color: #F8FAFE !important;
  background-image: linear-gradient(165deg, rgba(66, 165, 245, .07), rgba(233, 30, 99, .018) 55%, rgba(66, 165, 245, 0) 80%);
  color-scheme: light only;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
/* Dezenter Akzentstrich oben (Pink → Hellblau, gleiche Formsprache wie die Referenz-
   Beschriftung in der Galerie): verbindet Produkt-, Dienstleistungs- und Teamkarten optisch
   zu einer gemeinsamen Familie, ohne die Karten sonst zu verändern. */
.product::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue-light));
  background-color: var(--blue-light) !important;
  color-scheme: light only;
  opacity: .5;
  pointer-events: none;
}
@media (hover: hover) {
  .product:hover {
    border-color: rgba(33, 43, 91, .3);
    box-shadow: 0 20px 44px -30px rgba(33, 43, 91, .4);
    transform: translateY(-2px);
  }
}

/* Piktogramm-Fläche: fixes Seitenverhältnis, damit ein späteres Produktfoto (object-fit: cover)
   denselben Rahmen ausfüllt, ohne dass sich das Kartenlayout ändert. Das Piktogramm ist bewusst
   gross (rund drei Viertel der Fläche), da es vorerst das Produktfoto vertritt und die Produktart
   auf den ersten Blick erkennbar machen soll. Neutraler, heller Hintergrund, damit die eigenen
   Piktogrammfarben (Dunkelblau/Hellblau/Pink) nicht mit einer Hellblau-Fläche konkurrieren. */
.product__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.5rem;
  padding: 6%;
  border-radius: var(--radius-m);
  /* Solide Fallback-Farbe hinter dem Verlauf: siehe Hinweis zu Dark-Mode-Absicherung
     in css/style.css (.section--tint). */
  background-color: #F0F4FD !important;
  background-image: linear-gradient(155deg, rgba(66, 165, 245, .11), rgba(33, 43, 91, .035));
  border: 1px solid rgba(33, 43, 91, .06);
  color-scheme: light only;
  overflow: hidden;
}
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__icon { width: 74%; height: 74%; max-width: 15rem; }

.product__body { display: flex; flex-direction: column; flex: 1; }

/* Produktart ist die visuell wichtigste Information der Karte: gross, in der Display-Schrift.
   Hersteller folgt kleiner und deutlich dezenter (helle Farbe, kein Fettgewicht), das kurze
   Qualitätsversprechen darunter etwas kräftiger, aber weiterhin ruhig und knapp. */
.product__category {
  font-family: var(--font-head);
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(1.625rem, 2.8vw, 2.125rem);
  line-height: 1.08;
  letter-spacing: .005em;
}
.product__maker {
  margin-top: .4rem;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
}
.product__text {
  margin-top: .75rem;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}

/* Button sitzt in jeder Karte unten, unabhängig von der Textlänge (gleichmässige Kartenreihe) */
.product__cta { margin-top: auto; padding-top: 1.5rem; }
.product__cta .btn {
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem 1.25rem;
  font-size: .9375rem;
}
@media (min-width: 640px) {
  .product__cta .btn { width: auto; padding-inline: 1.5rem; }
}


/* 4. PIKTOGRAMM-ANIMATIONEN ----------------------------------------------
   Die Piktogramme reagieren fortlaufend auf die Scrollrichtung statt sich einmalig
   auszulösen: js/main.js berechnet für jede Produktkarte, die sich gerade nahe am
   Sichtbereich befindet, laufend einen Fortschrittswert zwischen 0 und 1 (wie weit
   die Karte in ihre "Lesehöhe" hineingescrollt ist) und schreibt ihn als CSS-Variable
   --p auf die Karte. Scrollt man weiter nach unten, steigt --p und das Produkt bewegt
   sich in seine geöffnete/ausgefahrene Stellung; scrollt man wieder nach oben, sinkt
   --p und die Bewegung läuft exakt zurück – es gibt keinen separaten "Rückwärts"-Code,
   die Bewegung folgt einfach unmittelbar dem aktuellen Wert. Die kurze transition
   glättet nur das Nachführen zwischen zwei Bildwiederholungen, ändert aber nichts an
   der Richtung. Ruheposition (--p: 0, auch ohne JavaScript und bei "Bewegung
   reduzieren") ist immer die normal gezeichnete Piktogramm-Geometrie – Texte, Rahmen
   und Buttons besitzen keine --p-Abhängigkeit und bewegen sich nie mit. transform-box:
   fill-box sorgt dafür, dass sich Form/Gruppe um die eigene Mitte/Kante dreht bzw.
   verschiebt statt um die Ecke des gesamten SVG-Rahmens. */
.icon-anim-lamellen,
.icon-anim-rollladen,
.icon-anim-markise,
.icon-anim-screen,
.icon-anim-plissee,
.icon-anim-insect--1,
.icon-anim-insect--2,
.icon-anim-insect--3 {
  transform-box: fill-box;
  transition: transform .12s linear;
}

/* Lamellenstoren: der Lamellen-Streifen liegt in einer auf das Fensterinnere geclippten Gruppe
   (siehe produkte.html, clipPath) und kann darum nie ausserhalb des Rahmens erscheinen. In
   Ruheposition (--p: 1, "geschlossen") sind die Lamellen exakt so gezeichnet, dass sie das
   Fenster komplett ausfüllen; von dort wird der gesamte Streifen um seine eigene Höhe (92px,
   identisch mit der Clip-Höhe) nach oben verschoben, wenn --p sinkt. Der Streifen fährt so von
   oben ins Fenster ein: bei --p ≈ .33 ist das Fenster von oben her zu etwa einem Drittel gefüllt,
   bei --p ≈ .66 zu etwa zwei Dritteln, bei --p = 1 komplett – reine senkrechte Verschiebung ohne
   Rotation/Schräglage, exakt umkehrbar beim Hochscrollen. */
.icon-anim-lamellen {
  transform: translateY(calc((var(--p, 0) - 1) * 92px));
}

/* Rollläden: wie die Lamellenstore liegt der Panzer in einer auf die Führungsschienen geclippten
   Gruppe (produkte.html) und kann daher nie über die Schienen hinausragen. In Ruheposition
   (--p: 1) füllt der Panzer die komplette Schienenlänge (84px); von dort wird er um genau diese
   Höhe nach oben verschoben, wenn --p sinkt, sodass er sichtbar in den Kasten einfährt und
   umgekehrt beim Herunterscrollen wieder heraus- und die Öffnung von oben nach unten füllt. */
.icon-anim-rollladen {
  transform: translateY(calc((var(--p, 0) - 1) * 84px));
}

/* Sonnenstore (Ansicht von vorne): Die Kassette ist der waagrechte Balken oben, das Tuch hängt
   von dort nach unten heraus. Die schrägen Aussenkanten der Tuchfläche stehen für die
   Gelenkarme, die kleinen Gelenkpunkte in ihrer Mitte für die Armgelenke – all das liegt in
   derselben Gruppe und streckt sich gemeinsam nach unten aus der Kassette heraus, wenn --p
   steigt ("von hinten nach vorne"); Breite bleibt gleich, damit es nicht seitlich/schräg wirkt.
   Beim Hochscrollen zieht sich alles wieder in die Kassette ein. */
.icon-anim-markise {
  transform-origin: 50% 0%;
  transform: scaleY(calc(.55 + var(--p, 0) * .45));
}

/* Senkrechtmarkise/ZIP-Screen: die Fläche ist exakt so hoch gezeichnet wie der verfügbare Kanal
   zwischen Kopfschiene und der unteren Führungsschiene (kein Überstand möglich). Statt zu
   verschieben, wächst die Fläche von ihrem oberen, festen Rand aus (transform-origin oben) in
   der Höhe: beim Herunterscrollen fährt der Screen sichtbar von oben nach unten aus dem Kasten
   bis zur unteren Schiene, beim Hochscrollen zieht er sich wieder nach oben ein. */
.icon-anim-screen {
  transform-origin: 50% 0%;
  transform: scaleY(calc(.04 + var(--p, 0) * .96));
}

/* Plissee: rechte Kante (Kopfschiene, an der Fensterkante) bleibt fest, das gefaltete Tuch
   ist im Ruhezustand (--p: 1) vollständig bis zur Mitte ausgezogen gezeichnet – exakt die
   Fensterbreite dieser Fensterhälfte, kein Überstand. Von dort wird es um seine feste rechte
   Kante zusammengestaucht, wenn --p sinkt (Stapel zieht sich zusammen, bleibt aber innerhalb
   des Rahmens), und beim Herunterscrollen wieder bis zur Mitte ausgezogen. */
.icon-anim-plissee {
  transform-origin: 100% 50%;
  transform: scaleX(calc(.28 + var(--p, 0) * .72));
}

/* Insektenschutz: drei winzige, stilisierte Insekten (nur Körper + zwei Flügel, keine
   Comic-Optik) stehen auf unterschiedlicher Höhe knapp vor dem Gitter. Jede Fliege erhält
   eine eigene Flugbahn aus zwei überlagerten Bewegungen: ein linearer "Drift" Richtung Netz
   (driftX/driftY/driftR * --p) plus ein Sinus-Bogen (wobbleX/Y/R * sin(--p * 360deg * n)),
   dessen Frequenz n je Fliege ein Vielfaches von 0.5 ist – dadurch ist der Bogen-Anteil bei
   --p=0 UND --p=1 mathematisch exakt null: jede Fliege startet und endet in einer ruhigen,
   sauberen Position, während sie dazwischen sichtbar seitlich/auf&ab schwenkt, leichte Bögen
   fliegt und die Richtung wechselt – ohne Zittern, da die Kurve stetig/glatt ist. Die
   Amplituden sind pro Fliege unterschiedlich gewählt, damit sich die drei Bahnen klar
   unterscheiden, bleiben aber (numerisch mit einer Python/numpy-Simulation gegen die
   SVG-Geometrie geprüft) stets innerhalb des Piktogramm-Bereichs: sie verlassen nie das
   Fenster nach links (x < 10) und berühren nie die erste Gitterlinie bei x = 27, sodass der
   Eindruck "das Fliegengitter hält sie ab" erhalten bleibt. Rein --p-gesteuert (keine
   @keyframes/Zeit-Animation) und damit automatisch exakt scroll-reversibel: Herunterscrollen
   lässt die Fliegen sichtbar herumfliegen, Hochscrollen kehrt die Bewegung sauber um, ohne
   endlose Loop. */
.icon-anim-insect--1 {
  transform:
    translate(
      calc(var(--p, 0) * 7px + sin(calc(var(--p, 0) * 360deg * 1)) * 6px),
      calc(var(--p, 0) * -3px + sin(calc(var(--p, 0) * 360deg * 2)) * 9px)
    )
    rotate(calc(var(--p, 0) * 6deg + sin(calc(var(--p, 0) * 360deg * 1)) * 28deg));
}
.icon-anim-insect--2 {
  transform:
    translate(
      calc(var(--p, 0) * 5px + sin(calc(var(--p, 0) * 360deg * 1.5)) * 6px),
      calc(var(--p, 0) * 2px + sin(calc(var(--p, 0) * 360deg * 1)) * 7px)
    )
    rotate(calc(var(--p, 0) * -5deg + sin(calc(var(--p, 0) * 360deg * 2)) * 24deg));
}
.icon-anim-insect--3 {
  transform:
    translate(
      calc(var(--p, 0) * 6px + sin(calc(var(--p, 0) * 360deg * 2)) * 4px),
      calc(var(--p, 0) * -2px + sin(calc(var(--p, 0) * 360deg * 1.5)) * 8px)
    )
    rotate(calc(var(--p, 0) * 7deg + sin(calc(var(--p, 0) * 360deg * 1.5)) * 26deg));
}

/* Bewegung reduzieren: keine Übergänge, --p wird von js/main.js gar nicht erst gesetzt
   (siehe dort) – zusätzlich hier zur Sicherheit direkt auf die Ruheposition fixiert. */
@media (prefers-reduced-motion: reduce) {
  .icon-anim-lamellen,
  .icon-anim-rollladen,
  .icon-anim-markise,
  .icon-anim-screen,
  .icon-anim-plissee,
  .icon-anim-insect--1,
  .icon-anim-insect--2,
  .icon-anim-insect--3 {
    transform: none !important;
  }
}