/* ═══════════════════════════════════════════════════════════════════════════
   teil-zu — Das Karussell der vergrößernden Sehhilfen
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026: „…dass die irgendwie so aus dem Hintergrund
   rotieren und man so durchläuft und man sieht, welche verschiedenen Geräte
   es gibt oder man kann blättern."

   Darum kein Band, das zur Seite scrollt, sondern eine Bühne: das gewählte
   Gerät steht groß in der Mitte, die Nachbarn stehen kleiner, gedreht und
   gedämpft dahinter und kommen beim Blättern nach vorn. Alle Geräte sind
   freigestellt — der Grund der Seite scheint durch, es gibt keinen Kasten.

   ── Ohne JavaScript ───────────────────────────────────────────────────────
   Dann gibt es keine Bühne, sondern eine schlichte Reihe aller Geräte mit
   Namen. **Kein Gerät verschwindet.** Erst die Klasse `.lv-bereit`, die das
   Skript setzt, macht aus der Reihe das Karussell — die Richtung, in der ein
   fehlendes Skript nichts kaputt machen kann.
   ═══════════════════════════════════════════════════════════════════════════ */

.lv-karussell{
  /* Eine EIGENE Länge, keine Prozentangabe. Gemessen am 04.10.2026: mit
     `max-height:100%` am Bild blieb das aktive Gerät 473 px hoch in einer
     283 px hohen Bühne und ragte 190 px unten heraus — die Prozentangabe
     greift im Rasterfeld nicht zuverlässig. Mit einer festen Länge schon. */
  --lv-hoehe:clamp(260px, 30vw, 380px);
  margin:clamp(1.2rem,2.2vw,2rem) 0 clamp(1.4rem,2.6vw,2.4rem);
}

/* ── Ohne Skript: einfache Reihe ────────────────────────────────────────── */
.lv-buehne{
  display:grid; gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  align-items:end;
}
.lv-stueck{ margin:0; display:flex; flex-direction:column; gap:.6rem; align-items:center }
.lv-stueck img{ width:100%; height:auto; display:block }
.lv-stueck figcaption{ text-align:center; display:grid; gap:.1em }
.lv-stueck figcaption strong{ color:var(--blau); font-weight:800; font-size:.95rem }
.lv-stueck figcaption span{ color:var(--text-leise); font-size:.84rem; line-height:1.45 }

/* Die Leiste hat ohne Skript nichts zu tun. */
.lv-leiste{ display:none }

/* ═══ Mit Skript: die Bühne ═════════════════════════════════════════════ */
.lv-bereit .lv-buehne{
  display:block; position:relative;
  height:var(--lv-hoehe);
  perspective:1200px;
  perspective-origin:50% 55%;
}
.lv-bereit .lv-stueck{
  position:absolute; inset:0; margin:0;
  display:grid; place-items:center;
  transform-style:preserve-3d;
  transition:transform .62s var(--weich), opacity .62s var(--weich),
             filter .62s var(--weich);
  pointer-events:none;
}
.lv-bereit .lv-stueck img{
  width:auto; height:auto;
  max-width:min(58%, 400px); max-height:var(--lv-hoehe);
  object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(19,55,109,.18));
}
/* Der Name steht unten in der Leiste, nicht am Stück — sonst tanzt er mit. */
.lv-bereit .lv-stueck figcaption{ display:none }

/* Die Plätze. Vorzeichen: m = links (minus), p = rechts (plus). */
.lv-bereit .lv-stueck{ opacity:0; transform:translateX(0) scale(.42); z-index:1 }
.lv-bereit .lv-stueck.p0 { opacity:1;   transform:translateX(0)     scale(1)   rotateY(0);      z-index:6 }
.lv-bereit .lv-stueck.pm1{ opacity:.62; transform:translateX(-40%)  scale(.68) rotateY(24deg);  z-index:4; filter:saturate(.75) }
.lv-bereit .lv-stueck.pp1{ opacity:.62; transform:translateX(40%)   scale(.68) rotateY(-24deg); z-index:4; filter:saturate(.75) }
.lv-bereit .lv-stueck.pm2{ opacity:.26; transform:translateX(-66%)  scale(.48) rotateY(32deg);  z-index:2; filter:saturate(.5) }
.lv-bereit .lv-stueck.pp2{ opacity:.26; transform:translateX(66%)   scale(.48) rotateY(-32deg); z-index:2; filter:saturate(.5) }
/* Die Nachbarn sind anklickbar — wer daneben greift, blättert. */
.lv-bereit .lv-stueck.pm1,
.lv-bereit .lv-stueck.pp1,
.lv-bereit .lv-stueck.pm2,
.lv-bereit .lv-stueck.pp2{ pointer-events:auto; cursor:pointer }

/* ── Die Leiste ─────────────────────────────────────────────────────────── */
.lv-bereit .lv-leiste{
  display:flex; align-items:center; gap:clamp(.6rem,1.2vw,1rem);
  margin-top:clamp(.9rem,1.6vw,1.3rem);
  padding:clamp(.4rem,.7vw,.55rem) clamp(.6rem,1vw,.9rem);
  border-radius:var(--r-rund);
  background:var(--glas); border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 8px 26px rgba(19,55,109,.08);
}
.lv-pfeil{
  appearance:none; border:0; cursor:pointer; flex:none;
  display:grid; place-items:center;
  width:2.3em; height:2.3em; border-radius:50%;
  background:var(--blau); color:#fff; font-size:1rem; line-height:1;
  transition:background .3s var(--weich), transform .3s var(--weich);
}
.lv-pfeil:hover{ background:var(--blau-hell); transform:scale(1.07) }
.lv-pfeil:focus-visible{ outline:2px solid var(--blau); outline-offset:3px }

.lv-wort{ flex:1 1 auto; min-width:0; margin:0; display:grid; gap:.1em; text-align:center }
.lv-name{ color:var(--blau); font-weight:800; font-size:clamp(.95rem,1.1vw,1.08rem) }
.lv-satz{ color:var(--text-leise); font-size:.83rem; line-height:1.4 }

.lv-punkte{ display:flex; gap:.35rem; flex:none }
.lv-punkt{
  appearance:none; border:0; padding:0; cursor:pointer;
  width:8px; height:8px; border-radius:50%; background:var(--sand);
  transition:background .3s var(--weich), width .3s var(--weich);
}
.lv-punkt[aria-current="true"]{ background:var(--gold); width:22px; border-radius:999px }
.lv-punkt:focus-visible{ outline:2px solid var(--blau); outline-offset:2px }

.lv-quelle{
  margin:.75rem 0 0; text-align:center;
  font-size:.76rem; line-height:1.5; color:var(--text-leise);
}

/* ── Schmale Fenster ────────────────────────────────────────────────────── */
@media (max-width:620px){
  .lv-karussell{ --lv-hoehe:clamp(200px, 48vw, 260px) }
  .lv-bereit .lv-stueck img{ max-width:70% }
  .lv-bereit .lv-stueck.pm2,
  .lv-bereit .lv-stueck.pp2{ opacity:0 }      /* zwei Nachbarn reichen hier */
  .lv-bereit .lv-leiste{ flex-wrap:wrap; justify-content:center }
  .lv-wort{ order:-1; flex-basis:100% }
}

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .lv-bereit .lv-stueck{ transition:none }
  .lv-pfeil:hover{ transform:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dieselbe Bühne auf dunklem Grund: die Fassungen der Meta-Brillen
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026: „Auf diesem Ordnerpfad findest du Produktbilder zu
   Meta Brillen." Die Banner zeigen, WAS die Brille kann — diese Aufnahmen
   zeigen, WELCHE es gibt. Gleiche Mechanik, nur hell auf dunkel.

   Der weiche weiße Schein, den die Aufnahmen mitbringen, wirkt auf Schwarz wie
   ein Lichtsaum. Darum bekommt das Stück hier KEINEN eigenen Schlagschatten —
   zwei Schatten übereinander sehen nach Fehler aus.
   ═══════════════════════════════════════════════════════════════════════════ */

.lv-dunkel{ --lv-hoehe:clamp(210px, 24vw, 310px) }
.lv-dunkel .lv-stueck figcaption strong{ color:#fff }
.lv-dunkel .lv-stueck figcaption span{ color:var(--meta-leise, #B9ADA8) }
.lv-bereit.lv-dunkel .lv-stueck img{ filter:none }

.lv-dunkel .lv-leiste{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.lv-dunkel .lv-name{ color:#fff }
.lv-dunkel .lv-satz{ color:var(--meta-leise, #B9ADA8) }
.lv-dunkel .lv-punkt{ background:rgba(255,255,255,.22) }
.lv-dunkel .lv-punkt[aria-current="true"]{ background:var(--gold) }
.lv-dunkel .lv-pfeil{ background:rgba(255,255,255,.14); color:#fff }
.lv-dunkel .lv-pfeil:hover{ background:var(--gold); color:#2A2113 }