/* ═══════════════════════════════════════════════════════════════════════════
   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 im Schnitt ──────────────────────────────────────────────────
   Christopher, 05.10.2026: „innen das Nervensystem muss noch ein bisschen
   besser ausgebaut werden. Ich wuerde auch ein leichtes Rosa verwenden …
   ein leichtes neonblaues Leuchten … das muss noch mal ein bisschen mehr
   Farbe bekommen."

   Vorlage ist seine medizinische Abbildung: Netzhaut und Aderhaut warm,
   Lederhaut weiss mit feinem grauen Rand, Glaskoerper hell, Linse glasig
   geschichtet, Sehnerv cremefarben mit Straengen. Uebersetzt in die
   Hausfarben: gedaempftes Rosa statt Signalrot, Blau fuer die Venen, Gold
   fuer Linse und Sehnerv, ein dezentes Neonblau an der Hornhaut.
   Alles gezeichnet — kein Bild, keine Schriftdatei, kein CDN. */
.scr-auge{
  --scr-rosa:#E8B9B0; --scr-rosa-hell:#F2D2CC; --scr-rosa-tief:#C9897C;
  --scr-arterie:#D4867A; --scr-vene:#3C6FAE;
  --scr-neon:#4FD8FF; --scr-haut:#CFD8E4;
}
.scr-neonschein{ animation:scr-neon-atem 7.5s cubic-bezier(.22,.61,.36,1) infinite }
@keyframes scr-neon-atem{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }

/* Sehnerv */
.scr-nerv{ stroke:var(--gold-tief); stroke-width:2.4; stroke-linejoin:round }
.scr-nerv-strang{ fill:none; stroke:#C9A86B; stroke-width:1.5; stroke-linecap:round; opacity:.55 }
.scr-nerv-arterie{ fill:none; stroke:var(--scr-arterie); stroke-width:2.6; stroke-linecap:round; opacity:.85 }
.scr-nerv-vene{ fill:none; stroke:var(--scr-vene); stroke-width:2.2; stroke-linecap:round; opacity:.6 }
.scr-kanal{ fill:#F5EBD6; stroke:var(--gold-tief); stroke-width:1.6 }

/* Haeute */
.scr-leder{ fill:var(--weiss); stroke:var(--scr-haut); stroke-width:3 }
.scr-ader{ stroke:#C98D80; stroke-width:1.2; stroke-opacity:.45 }
.scr-ader-netz{ fill:none; stroke:#B9705F; stroke-width:1.5; stroke-linecap:round; opacity:.4 }
.scr-netz{ fill:#F8E5DF; stroke:#DFAAA0; stroke-width:1.2 }
.scr-koerper{ stroke:rgba(79,216,255,.22); stroke-width:1.2 }
.scr-innenschein{ opacity:.9 }

/* Nervenfasern und Gefaesse */
.scr-faser{ fill:none; stroke:#9AAFC9; stroke-width:.8; stroke-linecap:round; opacity:.3 }
.scr-gefaess{ fill:none; stroke-linecap:round }
.scr-stamm{ stroke-width:2.8 }
.scr-ast{ stroke-width:1.8 }
.scr-fein{ stroke-width:1 }
.scr-arterie{ stroke:var(--scr-arterie); opacity:.85 }
.scr-vene{ stroke:var(--scr-vene); opacity:.6 }

/* Hinterer Pol */
.scr-papille{ fill:#F9F1DE; stroke:#D79C90; stroke-width:1.8 }
.scr-papille-kern{ fill:#EADFC2; opacity:.85 }
.scr-makula{ opacity:1 }
.scr-fovea{ fill:#B0705F; opacity:.5 }

/* Vorderer Abschnitt */
.scr-kammer{ fill:#EEF7FC }
.scr-ziliar{ fill:#D9A79B; stroke:#B9705F; stroke-width:1.2; stroke-linejoin:round; opacity:.95 }
.scr-zonula{ fill:none; stroke:#B89B6F; stroke-width:1.1; opacity:.85 }
.scr-linse{ stroke:var(--gold-tief); stroke-width:2.2 }
.scr-linse-schicht{ fill:none; stroke:var(--gold-tief); stroke-width:1.1; opacity:.45 }
.scr-linse-glanz{ fill:none; stroke:var(--weiss); stroke-width:2.2; stroke-linecap:round; opacity:.75 }
.scr-iris{ stroke:#163F77; stroke-width:1.2; stroke-linejoin:round }
.scr-hornhaut{
  stroke:#7FD6F2; stroke-width:2; stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(79,216,255,.5)) drop-shadow(0 0 16px rgba(79,216,255,.22));
}
.scr-limbus{ fill:none; stroke:var(--scr-haut); stroke-width:3; stroke-linecap:round }

@media (prefers-reduced-motion: reduce){
  .scr-neonschein{ animation:none; opacity:.8 }
}

/* ═══════════════════════════════════════════════════════════════════════
   Strahlengang · neonblaues Leuchten · Führungslinien
   Gehört nach teil-zy-screening.css. Die beiden alten Regeln
   `.scr-licht path` und `@keyframes scr-strahl` werden dabei ersetzt,
   nicht ergänzt — sonst gilt die längere Laufzeit von vorher weiter.
   ═══════════════════════════════════════════════════════════════════════ */

/* Die Farben des Scheins an einer Stelle. Wer ihn kühler oder wärmer
   will, ändert nur diese zwei Zeilen — die Filter lesen sie mit. */
.scr-auge{
  --scr-neon:#4FC3F7;
  --scr-neon-hell:#9BE1FF;
}
.scr-neon-flut{ flood-color:var(--scr-neon) }
.scr-neon-flut-hell{ flood-color:var(--scr-neon-hell) }

/* ── Der Strahlengang ──────────────────────────────────────────────────
   Längster Strahl 440 Einheiten, darum 460 als Strich: bei Versatz 0 ist
   er ganz gezeichnet, bei 460 noch nichts zu sehen. `forwards` lässt ihn
   danach stehen — er zeichnet sich einmal und bleibt. */
.scr-licht path{
  fill:none; stroke:url(#scr-strahl-g);
  stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(203,176,130,.55));
  stroke-dasharray:460; stroke-dashoffset:460;
  animation:scr-strahl 2s var(--weich) forwards;
}
.scr-licht path:nth-child(2){ animation-delay:.1s }
.scr-licht path:nth-child(3){ animation-delay:.2s }
@keyframes scr-strahl{
  0%  { stroke-dashoffset:460; opacity:0 }
  12% { opacity:1 }
  100%{ stroke-dashoffset:0;   opacity:1 }
}

/* Der warme Hof vor der Hornhaut — er macht aus Linien Licht. */
.scr-eintritt{ opacity:.5 }

/* ── Das neonblaue Leuchten ────────────────────────────────────────────
   Sparsam: ein Bogen am hinteren Rand der Netzhaut, ein Saum um die
   Pupille, ein Punkt dort, wo die Strahlen ankommen. Auf dem hellen
   Cremegrund ist das ein Hauch, keine Leuchtreklame. */
.scr-netz-schein{
  fill:none; stroke:var(--scr-neon); stroke-width:1.7; stroke-linecap:round;
  --scr-ruhe:.45; opacity:var(--scr-ruhe);
  filter:url(#scr-neon);
}
.scr-pupille-schein{
  fill:#0E2B4C;
  --scr-ruhe:.9; opacity:var(--scr-ruhe);
  filter:url(#scr-neon-punkt);
}
.scr-brennpunkt{
  fill:var(--scr-neon-hell);
  --scr-ruhe:.8; opacity:0;
  filter:url(#scr-neon-punkt);
  /* erst aufglimmen, wenn das Licht angekommen ist, dann ruhig atmen.
     scr-atmen steht hinten, damit es die Deckkraft danach führt. */
  animation:scr-brennen .8s var(--weich) 1.9s forwards,
            scr-atmen 5.4s var(--weich) 2.7s infinite both;
}
.scr-schein{ animation:scr-atmen 5.4s var(--weich) 1.6s infinite both }
@keyframes scr-atmen{
  0%,100%{ opacity:var(--scr-ruhe,.5) }
  50%    { opacity:1 }
}
@keyframes scr-brennen{
  from{ opacity:0; transform:scale(.4) }
  to  { opacity:var(--scr-ruhe); transform:none }
}
.scr-brennpunkt{ transform-box:fill-box; transform-origin:50% 50% }

/* ── Die Führungslinien ────────────────────────────────────────────────
   Ohne Skript gibt es keine Punkte — dann zeigen auch keine Linien auf
   etwas, das nicht da ist. Dieselbe Richtung wie bei `.scr-punkt`. */
.scr-wege{ display:none }
.scr-bereit .scr-wege{ display:block }

.scr-weg-g{ opacity:.72; transition:opacity .3s var(--weich), filter .3s var(--weich) }
.scr-weg{
  fill:none; stroke:var(--blau); stroke-width:1.35; stroke-linecap:round;
  stroke-dasharray:160; stroke-dashoffset:160;
  animation:scr-weg-zeichnen .75s var(--weich) forwards;
  animation-delay:calc(1.05s + var(--scr-w, 0) * 90ms);
}
@keyframes scr-weg-zeichnen{ to{ stroke-dashoffset:0 } }
.scr-weg-ring{ fill:none; stroke:var(--gold-tief); stroke-width:1.8 }
.scr-weg-punkt{ fill:var(--blau) }
.scr-weg-ring, .scr-weg-punkt{
  opacity:0; animation:scr-ziel-auf .45s var(--weich) forwards;
  animation-delay:calc(1.5s + var(--scr-w, 0) * 90ms);
}
@keyframes scr-ziel-auf{ to{ opacity:1 } }

/* Die Reihenfolge, in der sich die Linien ziehen — über die Stelle
   benannt, nicht über die Nummer: in WordPress darf umsortiert werden. */
[data-weg="hornhaut-oben"]{ --scr-w:0 }
[data-weg="hornhautmitte"]{ --scr-w:1 }
[data-weg="vorderer"]     { --scr-w:2 }
[data-weg="linse"]        { --scr-w:3 }
[data-weg="glaskoerper"]  { --scr-w:4 }
[data-weg="netzhaut"]     { --scr-w:5 }
[data-weg="papille"]      { --scr-w:6 }

/* Der angetippte Punkt hebt seine eigene Linie hervor. Das verlangt
   data-ort am Knopf (siehe Hinweise); fehlt es, bleibt alles ruhig —
   nichts geht kaputt, es leuchtet nur nichts auf. */
.scr-auge-feld:has(.scr-punkt[data-ort="glaskoerper"].auf-punkt)   [data-weg="glaskoerper"],
.scr-auge-feld:has(.scr-punkt[data-ort="hornhautmitte"].auf-punkt) [data-weg="hornhautmitte"],
.scr-auge-feld:has(.scr-punkt[data-ort="papille"].auf-punkt)       [data-weg="papille"],
.scr-auge-feld:has(.scr-punkt[data-ort="linse"].auf-punkt)         [data-weg="linse"],
.scr-auge-feld:has(.scr-punkt[data-ort="hornhaut-oben"].auf-punkt) [data-weg="hornhaut-oben"],
.scr-auge-feld:has(.scr-punkt[data-ort="netzhaut"].auf-punkt)      [data-weg="netzhaut"],
.scr-auge-feld:has(.scr-punkt[data-ort="vorderer"].auf-punkt)      [data-weg="vorderer"]{
  opacity:1;
  filter:drop-shadow(0 0 3px rgba(79,195,247,.6));
}

/* ── Netze ─────────────────────────────────────────────────────────────
   Alles Bewegte bekommt seinen Endzustand von Hand, damit bei
   abgeschalteter Bewegung nichts unsichtbar bleibt. */
@media (prefers-reduced-motion: reduce){
  .scr-licht path{ animation:none; stroke-dashoffset:0; opacity:1 }
  .scr-weg{ animation:none; stroke-dashoffset:0 }
  .scr-weg-ring, .scr-weg-punkt{ animation:none; opacity:1 }
  .scr-schein{ animation:none; opacity:var(--scr-ruhe,.5) }
  .scr-brennpunkt{ animation:none; opacity:var(--scr-ruhe,.8); transform:none }
}

/* 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{ animation:none }
  .scr-licht path{ animation:none; stroke-dashoffset:0; opacity:.9 }
  .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 }
}