/* ═══════════════════════════════════════════════════════════════════════════
   teil-zy — Der Augen-Gesundheitscheck auf /gesundheit/
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 05.10.2026: „viel zu viele einzelne Kacheln … Ich möchte eine
   Abbildung, ein Icon von einem Auge, mittig, zentral, sehr groß. Und dann
   sind da so Punkte, die klickbar sind und die öffnen dann sozusagen so
   Messages … unsere Pakete möchte ich für die vier Pakete einzelne Spalten und
   eine fünfte Spalte für die Beschreibung vorne dran … ‚So läuft ein Termin
   ab', so Pfeile, animierte Icons … einen Schritt-für-Schritt-Ablauf."

   Ohne JavaScript steht hier eine Liste: alle sieben Erklärungen untereinander,
   die Punkte unsichtbar. Erst `.scr-bereit` macht daraus das Auge. So kann ein
   fehlendes Skript keinen Satz verschlucken.
   ═══════════════════════════════════════════════════════════════════════════ */

.scr-teil .scr-messen-titel,
.scr-teil .scr-warum-titel{
  margin:0 0 clamp(.8rem,1.6vw,1.2rem);
  font-size:clamp(1.15rem,1.9vw,1.6rem); color:var(--blau);
}
.scr-nur-vorlesen{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── „Warum ein Screening sinnvoll ist" als Treppe ───────────────────────── */
.scr-warum{ margin:clamp(1.4rem,2.6vw,2.4rem) 0 }
.scr-treppe{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(.6rem,1.2vw,1rem) }
.scr-treppe li{
  position:relative;
  padding:clamp(.9rem,1.6vw,1.2rem) clamp(1rem,1.8vw,1.5rem) clamp(.9rem,1.6vw,1.2rem) clamp(1.6rem,2.6vw,2.4rem);
  border-radius:var(--r-m);
  background:var(--weiss); border:1px solid var(--linie);
  margin-left:calc(var(--scr-i, 0) * clamp(0px, 1.4vw, 26px));
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--weich), transform .6s var(--weich), box-shadow .35s var(--weich);
  transition-delay:calc(var(--scr-i, 0) * 110ms);
}
.einblenden.auf .scr-treppe li{ opacity:1; transform:none }
.scr-treppe li:hover{ box-shadow:0 14px 34px rgba(19,55,109,.10) }
.scr-treppe p{ margin:0; line-height:1.65 }
.scr-treppe-strich{
  position:absolute; left:clamp(.7rem,1.1vw,1rem); top:1.5em; bottom:1.5em;
  width:3px; border-radius:2px;
  background:linear-gradient(180deg, var(--gold), rgba(203,176,130,.25));
}

/* ── Das Auge mit den Messpunkten ────────────────────────────────────────── */
.scr-messen{ margin:clamp(1.8rem,3.4vw,3.2rem) 0 }
.scr-messen-satz{ margin:-.4rem 0 clamp(1rem,2vw,1.6rem); color:var(--text-leise) }
.scr-buehne{
  display:grid; gap:clamp(1rem,2.4vw,2.4rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
}
.scr-auge-feld{ position:relative; min-width:0 }
.scr-auge{ display:block; width:100%; height:auto }

/* ── Das Auge: seine eigene Abbildung ──────────────────────────────────────
   Christopher, 05.10.2026: „Kannst du das Bild, die Abbildung, die ich dir
   geliefert habe, dafür verwenden und das in den Hintergrund einfach setzen,
   freigestellt und irgendwie so ein bisschen Farbe und Licht und 3D animiert
   machen, aber das Auge sollte genauso ausschauen wie auf dem Bild."

   Das Bild bleibt unangetastet — es IST seine Abbildung. Dazu kommt nur, was
   ein Bild nicht mitbringt: Licht, ein kühler Schein und eine kleine Neigung,
   die dem Zeiger folgt. --scr-kx und --scr-ky setzt das Skript; ohne Skript
   stehen sie auf 0 und das Bild liegt einfach da. */
.scr-auge-bild{
  --scr-kx:0; --scr-ky:0;
  position:relative;
  perspective:1400px;
  transform-style:preserve-3d;
}
.scr-auge-bild img{
  display:block; width:100%; height:auto;
  transform:rotateY(calc(var(--scr-kx) * 7deg)) rotateX(calc(var(--scr-ky) * -5deg))
            translateZ(0);
  transition:transform .45s var(--weich), filter .45s var(--weich);
  filter:drop-shadow(0 26px 34px rgba(19,55,109,.18))
         drop-shadow(0 0 26px rgba(79,195,247,.22))
         saturate(1.04);
}
.scr-auge-licht{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
  transform:rotateY(calc(var(--scr-kx) * 7deg)) rotateX(calc(var(--scr-ky) * -5deg))
            translateZ(26px);
  transition:transform .45s var(--weich);
  overflow:visible;
}
.scr-licht path{
  fill:none; stroke:url(#scr-strahl-g); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:scr-strahl 2.6s var(--weich) .3s forwards;
  mix-blend-mode:screen;
}
.scr-licht path:nth-child(2){ animation-delay:.42s }
.scr-licht path:nth-child(3){ animation-delay:.54s }
@keyframes scr-strahl{ to{ stroke-dashoffset:0 } }
.scr-eintritt{ opacity:.0; animation:scr-hof 1.6s var(--weich) .2s forwards }
@keyframes scr-hof{ to{ opacity:.85 } }
.scr-brennpunkt{
  fill:#FFF3D4; opacity:0;
  animation:scr-brennen 2.4s var(--weich) 2.2s infinite;
  transform-box:fill-box; transform-origin:50% 50%;
  filter:drop-shadow(0 0 10px rgba(255,226,164,.95));
}
@keyframes scr-brennen{
  0%,100%{ opacity:.45; transform:scale(.8) }
  50%    { opacity:1;   transform:scale(1.25) }
}

/* Ohne Skript: keine Punkte, dafür alle Karten untereinander. */
.scr-punkt{ display:none }
.scr-bereit .scr-punkt{
  display:grid; place-items:center;
  position:absolute; left:var(--scr-x); top:var(--scr-y);
  transform:translate(-50%,-50%);
  width:clamp(38px, 4.4vw, 54px); height:clamp(38px, 4.4vw, 54px);
  border-radius:50%; cursor:pointer;
  background:var(--weiss); border:2.5px solid var(--gold);
  color:var(--blau); font-weight:800;
  box-shadow:0 8px 22px rgba(19,55,109,.22), 0 0 0 5px rgba(251,247,240,.75),
             0 0 16px rgba(79,195,247,.42);
  transition:transform .3s var(--weich), background .3s var(--weich),
             box-shadow .3s var(--weich), border-color .3s var(--weich);
}
.scr-bereit .scr-punkt::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--gold); opacity:0;
  animation:scr-ring 2.6s var(--weich) infinite;
  animation-delay:calc(var(--scr-i, 0) * .32s);
}
@keyframes scr-ring{
  0%  { opacity:.55; transform:scale(.86) }
  70% { opacity:0;   transform:scale(1.35) }
  100%{ opacity:0;   transform:scale(1.35) }
}
.scr-punkt-zahl{ font-size:clamp(1rem,1.3vw,1.3rem); line-height:1 }
.scr-bereit .scr-punkt:hover,
.scr-bereit .scr-punkt.auf-punkt{
  background:var(--blau); color:var(--weiss); border-color:var(--blau);
  transform:translate(-50%,-50%) scale(1.14);
  box-shadow:0 12px 28px rgba(19,55,109,.3);
}
.scr-bereit .scr-punkt.auf-punkt::after{ animation:none; opacity:0 }
.scr-punkt:focus-visible{ outline:3px solid var(--blau); outline-offset:3px }

.scr-nachricht{ min-width:0; display:grid; gap:clamp(.7rem,1.3vw,1rem) }
.scr-karte{
  position:relative;
  padding:clamp(1.1rem,2vw,1.7rem) clamp(1.2rem,2.2vw,1.9rem);
  border-radius:var(--r-l);
  background:var(--glas); border:1px solid var(--glas-rand);
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:var(--glas-schatten);
}
.scr-karte h4{ margin:0 0 .35rem; color:var(--blau); font-size:clamp(1.02rem,1.3vw,1.2rem) }
.scr-karte p{ margin:0; line-height:1.7; color:var(--text) }
.scr-karte-nr{
  position:absolute; right:clamp(.9rem,1.6vw,1.4rem); top:clamp(.6rem,1.1vw,.9rem);
  font-family:"Instrument Serif", Georgia, serif; font-style:italic;
  font-size:clamp(1.6rem,2.4vw,2.2rem); color:var(--gold); opacity:.5; line-height:1;
}
/* Mit Skript zeigt sich genau eine Karte, die anderen warten. */
.scr-bereit .scr-nachricht{ position:relative; display:block; min-height:clamp(170px, 20vw, 210px) }
.scr-bereit .scr-karte{
  position:absolute; inset:0 0 auto 0;
  opacity:0; transform:translateY(10px) scale(.99); pointer-events:none;
  transition:opacity .4s var(--weich), transform .4s var(--weich);
}
.scr-bereit .scr-karte.auf-karte{ opacity:1; transform:none; pointer-events:auto }

/* ── Die Pakete: fünf Spalten ────────────────────────────────────────────── */
.scr-pakete{ margin:clamp(1.8rem,3.4vw,3.2rem) 0 }
.pk-gitter{
  display:grid; gap:clamp(.5rem,.9vw,.8rem);
  grid-template-columns:minmax(0,1.5fr) repeat(4, minmax(0,1fr));
  align-items:start;
}
.pk-saeule{
  display:grid; gap:0;
  border-radius:var(--r-m);
  border:1px solid transparent;
  transition:transform .35s var(--weich), box-shadow .35s var(--weich),
             border-color .35s var(--weich), background .35s var(--weich);
}
.pk-paket{
  background:var(--weiss); border-color:var(--linie);
  box-shadow:0 4px 14px rgba(19,55,109,.05);
  cursor:default;
}
.pk-paket:hover,
.pk-paket:focus-visible{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 20px 44px rgba(19,55,109,.16);
  outline:none;
}
.pk-kopf{
  display:grid; place-items:center; text-align:center;
  min-height:3.4em; padding:.7em .5em;
  border-bottom:1px solid var(--linie);
}
.pk-merkmale .pk-kopf{ justify-items:start; text-align:left; border-bottom-color:transparent }
.pk-kopf-wort{ color:var(--blau); font-weight:800; font-size:clamp(.92rem,1.1vw,1.06rem); line-height:1.25 }
.pk-zelle{
  display:grid; place-items:center;
  min-height:4.2em; padding:.55em .5em;
  border-top:1px solid var(--linie);
  font-size:.9rem;
}
.pk-merkmal{
  justify-items:start; text-align:left;
  color:var(--text); line-height:1.35; font-size:.87rem;
}
.pk-merkmale .pk-zelle{ border-top-color:rgba(31,42,56,.06) }
.pk-zelle-wort{ display:none }
.pk-ja{ display:grid; place-items:center; width:1.5em; height:1.5em; color:var(--blau) }
.pk-ja svg{ width:100%; height:100% }
.pk-nein{ color:var(--sand); font-weight:700 }
.pk-wort{ color:var(--text-leise); font-size:.85rem; text-align:center; line-height:1.35 }
.pk-fuss{ margin:clamp(.8rem,1.4vw,1.1rem) 0 0; font-size:.86rem; color:var(--text-leise); line-height:1.6 }

@media (max-width:900px){
  .pk-zelle{ min-height:0 }
  /* Auf dem Telefon wird aus der Tabelle ein Stapel Karten — jede Zeile
     trägt dann ihren eigenen Namen, sonst stünde dort ein Haken ohne Frage. */
  .pk-gitter{ grid-template-columns:minmax(0,1fr) }
  .pk-merkmale{ display:none }
  .pk-zelle{ grid-template-columns:1fr auto; justify-items:end; align-items:center; text-align:right }
  .pk-zelle-wort{ display:block; justify-self:start; text-align:left; color:var(--text-leise); font-size:.86rem }
}

/* ── Der Ablauf ──────────────────────────────────────────────────────────── */
.scr-ablauf{ margin:clamp(1.8rem,3.4vw,3.2rem) 0 }
.sa-reihe{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.7rem,1.4vw,1.2rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.sa-schritt{
  position:relative;
  padding:clamp(1.1rem,2vw,1.6rem);
  border-radius:var(--r-l);
  background:var(--weiss); border:1px solid var(--linie);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--weich), transform .6s var(--weich), box-shadow .35s var(--weich);
  transition-delay:calc(var(--sa-i, 0) * 130ms);
}
.einblenden.auf .sa-schritt{ opacity:1; transform:none }
.sa-schritt:hover{ box-shadow:0 18px 40px rgba(19,55,109,.12) }
.sa-schritt h4{ margin:.6rem 0 .3rem; color:var(--blau); font-size:clamp(1rem,1.2vw,1.12rem) }
.sa-schritt p{ margin:0; line-height:1.65; color:var(--text-leise); font-size:.93rem }
.sa-zahl{
  position:absolute; right:clamp(.9rem,1.5vw,1.3rem); top:clamp(.7rem,1.2vw,1rem);
  font-family:"Instrument Serif", Georgia, serif; font-style:italic;
  font-size:clamp(1.5rem,2.2vw,2rem); color:var(--gold); opacity:.45; line-height:1;
}
.sa-bild{ display:block; width:clamp(42px,4.4vw,56px); color:var(--blau) }
.sa-bild svg{ width:100%; height:auto; overflow:visible }
/* Das eine bewegte Teil je Zeichen — der Rest steht ruhig. */
.scr-puls{ animation:scr-puls 2.8s var(--weich) infinite; animation-delay:calc(var(--sa-i, 0) * .4s) }
@keyframes scr-puls{
  0%,100%{ opacity:.35; transform:scale(.94) }
  50%    { opacity:1;   transform:scale(1.06) }
}
.sa-bild svg circle.scr-puls,
.sa-bild svg path.scr-puls{ transform-box:fill-box; transform-origin:50% 50% }
.sa-pfeil{
  position:absolute; right:clamp(-22px,-1.4vw,-14px); top:50%;
  width:34px; color:var(--gold); transform:translateY(-50%);
  animation:sa-winken 2.4s var(--weich) infinite;
  animation-delay:calc(var(--sa-i, 0) * .25s);
}
.sa-pfeil svg{ width:100%; height:auto }
@keyframes sa-winken{
  0%,100%{ transform:translate(0,-50%); opacity:.55 }
  50%    { transform:translate(5px,-50%); opacity:1 }
}
.sa-schritt:last-child .sa-pfeil{ display:none }

/* ── Die zwei Hinweise ───────────────────────────────────────────────────── */
.scr-noten{
  display:grid; gap:clamp(.7rem,1.3vw,1rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top:clamp(1.4rem,2.6vw,2.2rem);
}
.scr-note{
  padding:clamp(1rem,1.8vw,1.5rem);
  border-radius:var(--r-m);
  background:var(--creme); border-left:3px solid var(--gold);
}
.scr-note-ernst{ background:var(--blau-zart); border-left-color:var(--blau) }
.scr-note h4{ margin:0 0 .4rem; color:var(--blau); font-size:1rem }
.scr-note p{ margin:0 0 .4rem; line-height:1.65; font-size:.92rem }
.scr-note p:last-child{ margin-bottom:0 }

/* ── Schmale Fenster ─────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .scr-buehne{ grid-template-columns:minmax(0,1fr) }
  .scr-auge-feld{ max-width:520px; margin-inline:auto; width:100% }
}
@media (max-width:620px){
  .sa-pfeil{ display:none }
  .scr-treppe li{ margin-left:0 }
}

/* ── Netze ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .scr-puls, .sa-pfeil, .scr-brennpunkt{ animation:none }
  .scr-auge-bild img, .scr-auge-licht{ transition:none; transform:none }
  .scr-eintritt{ animation:none; opacity:.85 }
  .scr-licht path{ animation:none; stroke-dashoffset:0 }
  .scr-bereit .scr-punkt::after{ animation:none; opacity:0 }
  .scr-treppe li, .sa-schritt{ opacity:1; transform:none; transition:none }
  .pk-paket:hover{ transform:none }
}
@media (scripting: none){
  .scr-treppe li, .sa-schritt{ opacity:1; transform:none }
}