/* ============================================================================
   teil-screening — „Augengesundheitscheck & Screening" (vorlagen/screening.php)

   Wird von functions.php automatisch nach seiten.css geladen (glob auf
   assets/css/teil-*.css). Alles hier steht deshalb LETZTER in der Kaskade und
   gewinnt bei gleicher Spezifitaet — ohne ein einziges !important.

   Eigene Datei, eigenes Namenskuerzel .scr- : vier Sitzungen arbeiten
   gleichzeitig am Theme. Nichts hier greift ausserhalb von .screening.

   Drei Entscheidungen, die man dem Ergebnis nicht ansieht:

   1. DER UMSCHLAG DER PAKETTABELLE LIEGT BEI 820 px.
      Darunter steht je Paket eine Karte, darueber die Tabelle mit klebender
      erster Spalte. Beide Gestalten stehen im HTML; die nicht gezeigte wird
      mit display:none ausgeblendet und verschwindet damit auch aus dem
      Vorlesebaum — sonst hoerte man jede Leistung zweimal.

   2. KEIN .blatt UND KEIN .spur.
      .blatt ist das weisse Seitenblatt (bau.css), .spur das Laufband der
      Partnerlogos (grund.css). Die Textspalte heisst hier .scr-text, das
      Einblenden beim Scrollen .einblenden — die Klasse, auf die wirkung.js
      wirklich hoert.

   3. grund.css gibt JEDEM <section> 105,6 px Innenabstand (Zeile 238).
      .scr-band setzt den Abstand deshalb selbst; verschachtelt wird nicht.

   Keine neuen Farbwerte: nur die Token aus :root (grund.css).
   ========================================================================= */

/* Ruhige Lesebreite. bau.css setzt .bahn auf min(--breite,100%) (0-1-0),
   .screening .bahn ist 0-2-0 und gewinnt ohne !important. */
.screening .bahn{ max-width:1240px }

/* Nur fuer Vorleseprogramme — Tabellenbeschriftung, Preis-Vorsatz. */
.scr-nur-vorlesen{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── (1) Die Buehne ──────────────────────────────────────────── */

.scr-buehne{
  position:relative; overflow:hidden;
  padding-block:clamp(2.4rem,5.5vw,4.6rem) clamp(2rem,4.5vw,3.6rem);
}
.scr-buehne-grund{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(76% 120% at 10% -18%, var(--blau-zart) 0%, transparent 60%),
    radial-gradient(62% 108% at 94% 2%, var(--gold-zart) 0%, transparent 56%),
    linear-gradient(170deg, var(--creme) 0%, var(--grund) 64%);
}
.scr-buehne-innen{
  position:relative; z-index:1;
  display:grid; gap:clamp(1.4rem,3vw,2.6rem); align-items:center;
}
.scr-buehne-text{ min-width:0 }
.scr-titel{
  font-size:clamp(2.05rem,4.6vw,3.9rem); line-height:1.04;
  letter-spacing:-.025em; color:var(--text); margin:0;
}
.scr-leitsatz{
  margin:1rem 0 0; max-width:54ch;
  font-size:clamp(1.02rem,1.5vw,1.26rem); line-height:1.6; color:var(--text-leise);
}
.scr-auge{ width:min(100%,290px); height:auto; display:block; justify-self:center }
.scr-auge-lid{ stroke:var(--blau); stroke-width:2.2; opacity:.9 }
.scr-auge-iris{
  stroke:var(--gold-tief); stroke-width:2.2;
  transform-origin:66px 40px; animation:scr-atmen 7s var(--weich) infinite;
}
.scr-auge-pupille{ fill:var(--blau); stroke:none }
.scr-auge-strahl{ stroke:var(--gold); stroke-width:2; opacity:.75 }

@keyframes scr-atmen{
  0%,100%{ transform:scale(1) }
  50%    { transform:scale(.9) }
}

@media (min-width:900px){
  .scr-buehne-innen{ grid-template-columns:minmax(0,1fr) minmax(0,300px) }
}

/* ── Baender und Textspalte ──────────────────────────────────── */

.screening .scr-band{ padding-block:clamp(2.3rem,5.2vw,4.4rem) }
.screening .scr-band-messen{ background:linear-gradient(180deg, var(--grund), var(--creme)) }
.screening .scr-band-pakete{ background:var(--grund) }

.scr-ueber{
  font-size:clamp(1.55rem,2.9vw,2.45rem); line-height:1.1;
  margin:0 0 clamp(.9rem,1.8vw,1.5rem); color:var(--text);
}
.scr-text{ max-width:68ch; min-width:0; overflow-wrap:break-word }
.scr-text p{ margin:0 0 1.1em; line-height:1.75 }
.scr-text ul, .scr-text ol{ margin:0 0 1.2em; padding-left:1.25em; line-height:1.75 }
.scr-text li{ margin:.3em 0 }
.scr-text a{ color:var(--blau-hell); text-underline-offset:.22em }
.scr-text img{ max-width:100%; height:auto; border-radius:var(--r-m) }
.scr-text > :last-child{ margin-bottom:0 }

/* ── (2) Was wir messen — Kachelraster ───────────────────────── */

.scr-raster{
  display:grid; gap:clamp(.8rem,1.6vw,1.15rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,266px),1fr));
  margin-top:clamp(1.2rem,2.4vw,2rem);
}
.scr-kachel{
  display:flex; flex-direction:column; gap:.55rem; min-width:0;
  padding:clamp(1.05rem,2vw,1.5rem);
  border-radius:var(--r-l); background:rgba(255,255,255,.76);
  border:1px solid var(--linie); box-shadow:var(--glas-schatten);
  transition:transform .35s var(--weich), box-shadow .35s var(--weich),
             border-color .35s var(--weich);
}
.scr-kachel:hover{
  transform:translateY(-5px); border-color:rgba(203,176,130,.55);
  box-shadow:0 18px 40px rgba(19,55,109,.12);
}
.scr-kachel-kopf{ display:flex; align-items:center; justify-content:space-between; gap:.8rem }
.scr-kachel-nr{
  font-family:"Instrument Serif",Georgia,serif; font-style:italic;
  font-size:1.75rem; line-height:1; color:var(--gold-tief);
}
.scr-kachel-zeichen{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:50%;
  background:var(--blau-zart); color:var(--blau);
}
.scr-zeichen{ width:23px; height:23px; display:block }
.scr-kachel-titel{ margin:.15rem 0 0; font-size:1.06rem; line-height:1.25; color:var(--blau) }
.scr-kachel-text{ min-width:0 }
.scr-kachel-text p{ margin:0 0 .6em; font-size:.95rem; line-height:1.65; color:var(--text-leise) }
.scr-kachel-text > :last-child{ margin-bottom:0 }

/* ── (3) Die Pakete: bis 819 px Karten, ab 820 px Tabelle ────── */

.scr-tabelle-huelle{ display:none }

.scr-karten{ display:grid; gap:clamp(.9rem,2vw,1.2rem) }
.scr-karten > *{ min-width:0 }
.scr-karte{
  padding:clamp(1.05rem,3.4vw,1.5rem);
  border-radius:var(--r-l); background:var(--weiss);
  border:1px solid var(--linie); box-shadow:0 10px 30px rgba(19,55,109,.07);
}
.scr-karte-name{
  margin:0 0 .8rem; padding-bottom:.7rem; font-size:1.25rem; color:var(--blau);
  border-bottom:1px solid var(--linie);
}
.scr-karte-liste{ list-style:none; margin:0; padding:0 }
.scr-karte-punkt{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.9rem;
  padding:.52rem 0; border-bottom:1px solid rgba(31,42,56,.07);
}
.scr-karte-punkt:last-child{ border-bottom:0 }
.scr-karte-merkmal{ min-width:0; font-size:.93rem; line-height:1.45; overflow-wrap:break-word }
.scr-karte-wert{
  flex:none; max-width:54%; text-align:right;
  display:inline-flex; align-items:center; justify-content:flex-end; gap:.3rem;
  font-size:.88rem; font-weight:700; line-height:1.4; color:var(--blau);
}
.scr-karte-preis{
  margin:1rem 0 0; font-size:.95rem; line-height:1.5; color:var(--text-leise);
}
/* Die Preiszahl steht im Inhalt als <strong>. Gross wird genau sie — der
   Zusatz daneben („statt …") bleibt klein. Erfunden wird dabei nichts. */
.scr-karte-preis strong{
  display:block; font-size:clamp(1.6rem,5.4vw,2.1rem); line-height:1.15;
  font-weight:850; letter-spacing:-.025em; color:var(--blau);
}

.scr-ja{ width:18px; height:18px; color:var(--blau-hell) }
.scr-nein{ width:18px; height:18px; color:var(--text-leise); opacity:.75 }

@media (min-width:820px){
  .screening .scr-karten{ display:none }
  .screening .scr-tabelle-huelle{
    display:block; overflow-x:auto; overscroll-behavior-x:contain;
    border-radius:var(--r-l); border:1px solid var(--linie);
    background:var(--weiss); box-shadow:0 12px 36px rgba(19,55,109,.07);
  }
  .screening .scr-tabelle-huelle:focus-visible{ outline:2px solid var(--blau-hell); outline-offset:3px }
  .screening .scr-tabelle{
    width:100%; min-width:720px; border-collapse:separate; border-spacing:0;
  }
  .screening .scr-tabelle thead th{
    padding:1rem .9rem; font-size:1.02rem; color:var(--blau); text-align:center;
    background:var(--creme); border-bottom:1px solid var(--linie);
  }
  /* Die erste Spalte klebt beim Querschieben. Dafuer braucht sie einen
     undurchsichtigen Grund — sonst laeuft der Text darunter durch. */
  .screening .scr-tabelle .scr-ecke,
  .screening .scr-tabelle tbody th[scope="row"]{
    position:sticky; left:0; z-index:2;
    min-width:252px; max-width:380px;
    padding:.85rem 1.1rem; text-align:left; font-weight:700; font-size:.95rem;
    background:var(--weiss); box-shadow:1px 0 0 var(--linie);
  }
  .screening .scr-tabelle .scr-ecke{ background:var(--creme); border-bottom:1px solid var(--linie) }
  .screening .scr-tabelle tbody th[scope="row"]{ border-bottom:1px solid rgba(31,42,56,.07) }
  .screening .scr-tabelle tbody td{
    padding:.85rem .9rem; text-align:center; font-size:.95rem; color:var(--text);
    border-bottom:1px solid rgba(31,42,56,.07);
  }
  .screening .scr-tabelle tbody tr:hover td{ background:rgba(232,238,247,.55) }
  .screening .scr-tabelle tbody tr:hover th[scope="row"]{ background:var(--blau-zart) }
  /* Die Preiszeile — nach der Klebe-Regel notiert, damit ihr Grund gilt. */
  .screening .scr-zeile-preis th[scope="row"],
  .screening .scr-zeile-preis td{
    background:var(--gold-zart); border-bottom:0; font-size:1rem; color:var(--text);
  }
  .screening .scr-zeile-preis strong{
    display:block; font-size:1.5rem; line-height:1.2; font-weight:850;
    letter-spacing:-.025em; color:var(--blau);
  }
  .screening .scr-tabelle tbody tr.scr-zeile-preis:hover td,
  .screening .scr-tabelle tbody tr.scr-zeile-preis:hover th[scope="row"]{ background:var(--gold-zart) }
}

.scr-tabelle-rest{ margin-top:clamp(1.1rem,2.2vw,1.7rem) }

/* ── (4) So laeuft Ihr Termin ab ─────────────────────────────── */

.scr-schritte{
  list-style:none; margin:clamp(1.2rem,2.4vw,1.8rem) 0 0; padding:0;
  display:grid; gap:clamp(.9rem,1.8vw,1.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));
}
.scr-schritte > *{ min-width:0 }
.scr-schritt{
  display:flex; flex-direction:column; gap:.5rem;
  padding:clamp(1.1rem,2.2vw,1.6rem);
  border-radius:var(--r-l); background:var(--weiss);
  border:1px solid var(--linie); box-shadow:0 8px 26px rgba(19,55,109,.06);
}
.scr-schritt-nr{
  font-family:"Instrument Serif",Georgia,serif; font-style:italic;
  font-size:2.1rem; line-height:1; color:var(--gold-tief);
}
.scr-schritt-text{ min-width:0; overflow-wrap:break-word }
.scr-schritt-text p{ margin:0 0 .6em; font-size:.97rem; line-height:1.65; color:var(--text-leise) }
.scr-schritt-text strong{ color:var(--blau); font-weight:800 }
.scr-schritt-text > :last-child{ margin-bottom:0 }

/* ── (5) Wichtiger Hinweis ───────────────────────────────────── */
/* Ruhig und deutlich, aber nicht alarmierend: warmes Gold statt Rot.
   Rechtlich wichtig — darum eine eigene Flaeche und nicht nur Fliesstext. */

.scr-hinweis{
  display:flex; align-items:flex-start; gap:clamp(.85rem,2vw,1.25rem);
  padding:clamp(1.1rem,2.6vw,1.8rem) clamp(1.05rem,2.6vw,1.9rem);
  border-radius:var(--r-l);
  background:linear-gradient(135deg, var(--gold-zart) 0%, var(--creme) 72%);
  border:1px solid rgba(203,176,130,.55);
  border-left:4px solid var(--gold);
  box-shadow:0 10px 30px rgba(19,55,109,.06);
}
.scr-hinweis-zeichen{ width:30px; height:30px; flex:none; margin-top:.1rem; color:var(--gold-tief) }
.scr-hinweis-text{ min-width:0; max-width:72ch }
.scr-hinweis-titel{ margin:0 0 .45rem; font-size:1.14rem; line-height:1.25; color:var(--blau) }
.scr-hinweis-text p{ margin:0 0 .7em; font-size:.98rem; line-height:1.7; color:var(--text) }
.scr-hinweis-text ul, .scr-hinweis-text ol{ margin:0 0 .7em; padding-left:1.25em; line-height:1.7 }
.scr-hinweis-text > :last-child{ margin-bottom:0 }

/* ── (6) Der Knopf am Fuss ───────────────────────────────────── */

.screening .scr-aufruf{ padding-bottom:clamp(2.8rem,6vw,5rem) }
.scr-aufruf-innen{
  display:flex; justify-content:center;
  padding:clamp(1.5rem,4vw,2.6rem) clamp(1.1rem,3vw,2rem);
}
.scr-knopfreihe{ justify-content:center }

/* ── Ruhe, wenn der Browser danach fragt ─────────────────────── */

@media (prefers-reduced-motion:reduce){
  .scr-auge-iris{ animation:none }
  .scr-kachel{ transition:none }
  .scr-kachel:hover{ transform:none }
}