/* ============================================================
   Interaktive Bausteine
   Alles handgebaut in SVG/CSS — kein Video, keine Bibliothek.
   Zusammen unter 8 KB und ohne einen einzigen zusätzlichen
   Netzwerk-Request.
   ============================================================ */

/* ------------------------------------------------------------
   1. Sehsimulator — Regler ziehen, Schärfe verändert sich live
   ------------------------------------------------------------ */
.sim{background:var(--tinte);color:#fff;overflow:hidden}
.sim__grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:1000px){.sim__grid{grid-template-columns:.72fr 1.28fr;align-items:stretch}}
.sim__text{padding:clamp(2.2rem,4.5vw,4rem) clamp(1.15rem,3vw,3rem);
  display:flex;flex-direction:column;justify-content:center}
.sim__text h2{font-size:var(--t-h2);margin-bottom:1rem}
.sim__text p{color:rgba(255,255,255,.78);max-width:44ch;font-size:1.02rem}

.sim__stage{position:relative;min-height:clamp(340px,48vw,560px);overflow:hidden;
  background:#0A0D10;cursor:ew-resize;user-select:none;-webkit-user-select:none;
  /* pan-y statt none: seitliches Ziehen bedient den Regler, vertikales Wischen
     scrollt weiter die Seite. Mit touch-action:none bleibt man hier hängen. */
  touch-action:pan-y}
.sim__layer{position:absolute;inset:0}
.sim__layer img{width:100%;height:100%;object-fit:cover;display:block}
/* Die unscharfe Ebene liegt oben und wird von rechts her aufgedeckt */
.sim__layer--blur{clip-path:inset(0 0 0 var(--split,50%))}
.sim__layer--blur img{filter:blur(var(--unschaerfe,7px)) brightness(.94);transform:scale(1.06)}

.sim__hairline{position:absolute;top:0;bottom:0;left:var(--split,50%);width:2px;background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.sim__knob{position:absolute;top:50%;left:var(--split,50%);transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 3px 14px rgba(0,0,0,.4);pointer-events:none}
.sim__knob::before,.sim__knob::after{content:'';width:0;height:0;border-block:5px solid transparent}
.sim__knob::before{border-right:7px solid var(--tinte);margin-right:3px}
.sim__knob::after{border-left:7px solid var(--tinte);margin-left:3px}
.sim__knob{display:flex;align-items:center;justify-content:center}

.sim__marke{position:absolute;top:1rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.42rem .8rem;pointer-events:none}
.sim__marke--links{left:1rem;background:#fff;color:var(--tinte)}
.sim__marke--rechts{right:1rem;background:var(--rot);color:#fff}

.sim__regler{padding:1.1rem clamp(1.15rem,3vw,3rem) 1.6rem;background:#0A0D10;
  border-top:1px solid rgba(255,255,255,.12)}
.sim__regler label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.6);
  font-weight:700;margin-bottom:.7rem}
.sim__regler output{font-family:var(--serif);font-size:1.15rem;color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
.sim__regler input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:none;height:24px}
.sim__regler input[type=range]::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.22)}
.sim__regler input[type=range]::-moz-range-track{height:3px;background:rgba(255,255,255,.22)}
.sim__regler input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;
  border-radius:50%;background:var(--rot);margin-top:-8px;border:2px solid #fff;cursor:grab}
.sim__regler input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;
  background:var(--rot);border:2px solid #fff;cursor:grab}
.sim__skala{display:flex;justify-content:space-between;font-size:.7rem;color:rgba(255,255,255,.62);
  margin-top:.4rem;font-variant-numeric:tabular-nums}
.sim__hinweis{font-size:.79rem;color:rgba(255,255,255,.5);margin-top:1rem;max-width:52ch}

/* ------------------------------------------------------------
   2. Nachtlinsen — SVG-Animation über drei Phasen
   ------------------------------------------------------------ */
.ortho{border:1px solid var(--linie);background:var(--papier)}
.ortho__buehne{position:relative;background:var(--papier-2);border-bottom:1px solid var(--linie)}
.ortho svg{width:100%;height:auto;display:block}
.ortho__phasen{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linie)}
.ortho__phase{background:var(--papier);border:0;border-top:3px solid transparent;padding:.95rem .8rem;
  text-align:left;cursor:pointer;transition:.2s var(--ease);font:inherit}
.ortho__phase:hover{background:var(--papier-2)}
.ortho__phase[aria-selected="true"]{border-top-color:var(--rot);background:var(--weiss)}
.ortho__phase b{display:block;font-family:var(--serif);font-size:.9rem;font-weight:700;margin-bottom:.15rem}
.ortho__phase span{font-size:.755rem;color:var(--tinte-60);line-height:1.45;display:block}
.ortho__phase[aria-selected="true"] b{color:var(--rot)}

/* Elemente, die je Phase ein- und ausgeblendet werden */
.ortho [data-zeigen]{opacity:0;transition:opacity .5s var(--ease)}
.ortho [data-zeigen].an{opacity:1}
.hornhaut{transition:d .9s var(--ease)}
.strahl{transition:opacity .5s var(--ease),transform .9s var(--ease)}

/* ------------------------------------------------------------
   3. Myopie-Verlauf — Linien zeichnen sich beim Scrollen
   ------------------------------------------------------------ */
.chart{border:1px solid var(--linie);background:var(--papier);padding:clamp(1.3rem,2.4vw,2rem)}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .achse{stroke:var(--linie);stroke-width:1}
.chart .raster{stroke:var(--linie);stroke-width:1;stroke-dasharray:2 4}
.chart .beschriftung{font-family:'Inter',sans-serif;font-size:12px;fill:var(--tinte-60)}
.chart .linie{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.chart.sichtbar .linie{animation:zeichnen 1.7s var(--ease) forwards}
.chart.sichtbar .linie--zwei{animation-delay:.35s}
@keyframes zeichnen{to{stroke-dashoffset:0}}
.chart .linie--eins{stroke:var(--tinte-60)}
.chart .linie--zwei{stroke:var(--rot)}
.chart .punkt{opacity:0}
.chart.sichtbar .punkt{animation:auftauchen .4s var(--ease) 1.6s forwards}
@keyframes auftauchen{to{opacity:1}}
.chart__legende{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1rem;
  border-top:1px solid var(--linie);font-size:.83rem}
.chart__legende span{display:flex;align-items:center;gap:.5rem;color:var(--tinte-80)}
.chart__legende i{width:16px;height:2.5px;flex:none}
.chart__quelle{font-size:.75rem;color:var(--tinte-60);margin-top:.7rem}
@media (prefers-reduced-motion:reduce){
  .chart .linie{stroke-dashoffset:0;animation:none}
  .chart .punkt{opacity:1;animation:none}
}

/* ------------------------------------------------------------
   4. Gleitsicht-Zonen — Zone wählen, Szene reagiert
   ------------------------------------------------------------ */
.zonen{display:grid;grid-template-columns:1fr;gap:1px;background:var(--linie);border:1px solid var(--linie)}
@media(min-width:820px){.zonen{grid-template-columns:.9fr 1.1fr}}
.zonen__brille{background:var(--papier);padding:clamp(1.4rem,2.6vw,2.2rem);display:grid;place-items:center}
.zonen__brille svg{width:100%;max-width:330px;height:auto}
.zonen__feld{cursor:pointer;transition:fill .3s var(--ease)}
.zonen__szene{background:var(--papier);padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column}
.zonen__buehne{position:relative;background:var(--tinte);overflow:hidden;margin-bottom:1.2rem;
  aspect-ratio:4/3}
/* Drei getrennte Bänder statt drei deckungsgleicher Ebenen — sonst
   liegen Zwischen- und Nahbereich übereinander und man sieht nur einen. */
.zonen__ebene{position:absolute;left:6%;right:6%;display:grid;place-items:center;
  transition:filter .45s var(--ease),opacity .3s var(--ease)}
.zonen__ebene--fern{top:9%}
.zonen__ebene--mittel{top:46%}
.zonen__ebene--nah{bottom:9%}
.zonen__ebene p{font-family:var(--serif);color:#fff;text-align:center;line-height:1.25;letter-spacing:-.02em}
.zonen__ebene--fern p{font-size:clamp(1.5rem,3.4vw,2.3rem)}
.zonen__ebene--mittel p{font-size:clamp(1.05rem,2vw,1.35rem)}
.zonen__ebene--nah p{font-size:clamp(.8rem,1.35vw,.92rem);max-width:34ch;font-family:var(--sans);
  line-height:1.6;color:rgba(255,255,255,.9)}
.zonen__ebene[data-scharf="false"]{filter:blur(5px);opacity:.4}
.zonen__reiter{display:flex;gap:1px;background:var(--linie);margin-bottom:1.1rem}
.zonen__reiter button{flex:1;background:var(--papier-2);border:0;border-bottom:3px solid transparent;
  padding:.7rem .5rem;font:inherit;font-size:.795rem;font-weight:600;cursor:pointer;
  color:var(--tinte-60);transition:.2s}
.zonen__reiter button[aria-selected="true"]{background:var(--weiss);color:var(--rot);border-bottom-color:var(--rot)}
.zonen__info{font-size:.9rem;color:var(--tinte-80);min-height:3.2em}

/* ------------------------------------------------------------
   Filmband — ruhiger Loop über die volle Breite.
   Lädt erst, wenn es in den Blick kommt: preload="none", kein
   autoplay-Attribut, Start per IntersectionObserver. Bis dahin
   liegt nur das Poster (33 KB) da.
   ------------------------------------------------------------ */
.filmband{position:relative;background:var(--tinte);overflow:hidden;
  height:clamp(280px,42vw,520px)}
.filmband video,.filmband img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%}
.filmband video{opacity:0;transition:opacity .8s var(--ease)}
.filmband video[data-laeuft="true"]{opacity:1}
/* Kein Flex für den Text: sonst werden <b> und der Fließtext zu zwei
   Flex-Elementen und brechen jeweils für sich um — es sah aus wie zwei Spalten. */
.filmband__text{position:absolute;left:0;bottom:0;z-index:2;background:var(--tinte);color:#fff;
  padding:.85rem 1.3rem .85rem 2.5rem;font-size:.85rem;
  max-width:min(100%,36rem);line-height:1.55}
.filmband__text::before{content:'';position:absolute;left:1.3rem;top:1.35rem;
  width:8px;height:8px;background:var(--rot)}
.filmband__text b{font-weight:600;color:#fff}
.filmband__text b{font-weight:600}
@media (prefers-reduced-motion:reduce){
  .filmband video{display:none}
}

/* Handy: diese Datei lädt nach main.css, deshalb stehen die Anhebungen
   für die interaktiven Bausteine hier — sonst greifen sie nicht. */
@media (max-width:760px){
  .sim__marke{font-size:.75rem;padding:.45rem .8rem}
  .sim__regler label{font-size:.76rem}
  .sim__skala{font-size:.74rem}
  .sim__hinweis{font-size:.83rem}
  .ortho__phase span{font-size:.79rem}
  .ortho__phase b{font-size:.94rem}
  .zonen__reiter button{font-size:.83rem;padding:.8rem .4rem}
  .zonen__info{font-size:.93rem}
  .chart__legende{font-size:.87rem}
  .filmband__text{font-size:.82rem}
}