/* CMD-Klinik — Gestaltung nach dem Muster der Vereins-Website
   (Verein-Website\styles.css), aber mit eigener Farbwelt.

   Farben aus dem Klinik-Logo abgeleitet (gemessen 02.08.2026):
   Graphit #55534e = Logo-Flaeche · Gold #f2b85e = Wortmarke.
   Der Verein fuehrt Petrol/Navy/Terracotta auf Sand — hier Graphit/Gold auf Stein.
   Beide Auftritte sind damit auf den ersten Blick unterscheidbar.

   Grundsatz wie beim Verein: EINE Systemschrift, WENIGE Schriftgrade.
   h1 2.4 · h2 1.7 · h3 1.15 · Fliesstext 1 · lead 1.15 · klein .9 rem. Mehr nicht. */

:root{
  --graphit:#55534e; --graphit-d:#3a3936; --graphit-l:#6e6b64;
  /* --gold-d war #8a6420. Auf dem Sandton --stone-2 ergab das 4.37:1 und lag damit
     unter den geforderten 4.5:1 (WCAG 2.1 AA). Betraf 129 Textstellen. #7d5a1c
     erreicht 5.12 auf Sand, 5.65 auf Stein und 6.27 auf Weiss. Gemessen 06.08.2026. */
  --gold:#b8873a; --gold-d:#7d5a1c; --gold-bright:#f2b85e;
  --stone:#f5f3ef; --stone-2:#ebe8e1; --line:#ddd8ce;
  --ink:#2b2a27; --muted:#6b6862;
  --danger:#a4432f; --ok:#4a7c59;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 3px rgba(0,0,0,.05);
  --shadow-md:0 8px 26px rgba(0,0,0,.10);
  --maxw:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem;line-height:1.65;color:var(--ink);background:var(--stone);
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
/* Verweise im Fliesstext sind UNTERSTRICHEN. Nur die Farbe reicht nicht:
   Wer Farben schlecht unterscheidet, erkennt sie sonst nicht als Verweis
   (WCAG 1.4.1). Navigation, Knoepfe und Karten sind unten ausgenommen,
   dort macht die Form bereits klar, dass es anklickbar ist. */
a{color:var(--gold-d);text-decoration:underline;text-underline-offset:.15em}
a:hover{text-decoration:underline}
.btn,.brand,.nav-links a,.nav-actions a,.header-phone,.nav-login,
.link-card,.chip-link,.pill,.card-arrow,.page-tag,.tag,
.site-footer a,.crumbs a,.pills a{text-decoration:none}
.link-card:hover,.chip-link:hover,.pill:hover{text-decoration:none}

h1,h2,h3,h4{line-height:1.2;color:var(--graphit-d);margin:0 0 .5em;font-weight:700}
h1{font-size:2.4rem}
h2{font-size:1.7rem}
h3{font-size:1.15rem}
h4{font-size:1rem}
p{margin:0 0 1em}
@media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.45rem}}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.container.narrow{max-width:880px}
.lead{font-size:1.15rem;color:var(--muted);line-height:1.6}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.6rem}
.mt-1{margin-top:.6rem}
.mt-2{margin-top:1.2rem}
.mt-3{margin-top:2rem}

/* Kicker ueber Ueberschriften — ersetzt die frueheren Zierschriften */
.eyebrow{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-d);font-weight:700;margin:0 0 8px}
.page-tag,.tag{display:inline-block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--gold-d);background:var(--stone-2);border-radius:20px;padding:3px 10px}

/* ---------- Kopf und Navigation ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(245,243,239,.97);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.header-top{background:var(--graphit-d)}
.header-top-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 20px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:#fff;text-decoration:none;font-size:1.05rem}
.brand:hover{text-decoration:none}
/* Das Logo ist so hoch wie BEIDE Kopfzeilen zusammen (Doc, 08.08.2026).
   Es sitzt im dunklen Streifen und ragt als Schild in die helle Menuezeile
   hinein — moeglich, weil das Logo selbst einen dunklen Grund mitbringt.
   Damit es die Zeilenhoehe nicht aufblaeht, ragt es ueber einen negativen
   Aussenabstand hinaus; die Menueleiste weicht ihm nach rechts aus.
   Die Kopfzeile ist dafuer breiter als die Inhaltsspalte (1400 statt 1080),
   sonst haette das Menue nicht mehr in EINE Zeile gepasst — gemessen:
   Menue 777 + Knoepfe 237 + Einzug 124 = 1138 px, verfuegbar waren 1040. */
.brand-logo{height:44px;width:auto;border-radius:4px}
/* Leitspruch neben dem Logo (Doc, 14.08.2026). Er stand vorher unten im
   Schlussaufruf der Startseite; oben steht er auf jeder Seite und gehoert
   zur Marke statt zur Terminaufforderung. Auf schmalen Geraeten weicht er,
   dort ist der Platz fuer Telefonnummer und Login. */
.header-slogan{color:var(--gold-bright);font-weight:800;font-size:1.05rem;
  letter-spacing:.02em;white-space:nowrap;margin-right:auto;padding-left:14px}
@media(max-width:900px){ .header-slogan{display:none} }

@media(min-width:1240px){
  .site-header .container{max-width:1400px}
  .header-top-inner{align-items:flex-start;padding-top:8px;padding-bottom:8px;min-height:74px}
  .brand{position:relative;z-index:3;align-self:flex-start}
  /* Doppelte Hoehe (Doc, 14.08.2026): Das Logo war 104px und reichte ueber
     beide Kopfzeilen. Jetzt 132px - es bleibt ein Schild ueber beiden Zeilen,
     wirkt aber deutlich groesser. Der negative Aussenabstand haelt die
     Zeilenhoehe unveraendert, sonst waechst der ganze Kopf mit. */
  /* AUF DEN KOPF BESCHRAENKT (15.08.2026). Vorher stand hier `.brand-logo`
     ohne Vorfahren - und dieselbe Klasse traegt das Logo im FUSSBEREICH.
     Die 132px und vor allem der negative Aussenabstand von -58px galten
     dort mit: das Bild zog den Fliesstext unter sich, gemessene
     Ueberdeckung 48px ab 1240px Breite. Wer diese Regeln kuenftig
     anfasst, muss den Vorfahren stehen lassen. */
  .site-header .brand-logo{height:132px;border-radius:6px;margin-bottom:-58px;
    box-shadow:0 6px 18px rgba(43,42,39,.22)}
  .header-slogan{padding-left:22px;font-size:1.25rem;align-self:center}
  .header-top-inner .header-phone,
  .header-top-inner .nav-login{align-self:center}
  /* Zwei Klassen, damit die weiter unten stehende Kurzform padding:8px 20px
     nicht gewinnt — sie kaeme sonst spaeter in der Datei und wuerde den Einzug loeschen. */
  .site-header .nav-public-inner{padding-left:172px}
}
/* Zwischenbereich: breit genug fuer die einzeilige Menueleiste, aber NICHT
   breit genug fuer Logo-Einzug UND Menue. Gemessen bei 1100 px: verfuegbar 1060,
   noetig 1014 + 144 Einzug = 1158. Dort bleibt das Logo im dunklen Streifen. */
@media(min-width:1001px) and (max-width:1239px){
  .site-header .brand-logo{height:72px}
  .header-top-inner{align-items:center}
}
@media(max-width:1000px){
  .site-header .brand-logo{height:56px}
}
.header-phone{color:#fff;font-weight:600;font-size:.98rem;white-space:nowrap;text-decoration:none;font-variant-numeric:tabular-nums}
.header-phone:hover{color:var(--gold-bright);text-decoration:none}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;flex-direction:column;gap:4px}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px}

.header-nav{background:transparent}
.nav-public-inner,.nav-member-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:wrap;padding:8px 20px}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;color:var(--ink);padding:8px 8px;border-radius:8px;font-size:.92rem}
.nav-links a:hover{background:var(--stone-2);text-decoration:none}
.nav-links a.nav-fach{color:var(--gold-d);font-weight:600}
/* Wo bin ich gerade? Die Klasse .active wurde von main.js zwar vergeben,
   hatte im Stylesheet aber keine einzige Regel — die Markierung war unsichtbar.
   Ergaenzt am 06.08.2026. Balken statt nur Farbe, damit es auch erkennt,
   wer Farben schlecht unterscheidet. */
/* 14.08.2026, Beanstandung Doc: "die ausgewaehlte Seite soll markiert werden
   (hinterlegt)". Die Markierung GAB es bereits - aber als weisser Hintergrund
   auf einer fast weissen Kopfleiste (Stein, rgba 245,243,239). Gemessen ist
   das ein Unterschied, den man suchen muss. Jetzt dunkelgraphit mit weisser
   Schrift: derselbe Ton wie der obere Streifen und das Logo, damit die Leiste
   nicht bunt wird, aber unuebersehbar. Der goldene Balken bleibt - Farbe
   allein reicht nicht (WCAG 1.4.1). */
.nav-links a.active{background:var(--graphit-d);color:#fff;font-weight:700;
  box-shadow:inset 0 -3px 0 var(--gold-bright)}
.nav-links a.active:hover{background:var(--graphit-d);color:#fff}
/* Auch der hervorgehobene Fachpersonen-Verweis wird weiss, wenn er dran ist -
   sonst bliebe er gold auf dunkel und waere schlechter lesbar als vorher. */
.nav-links a.nav-fach.active{color:#fff}

/* Die Startseite hat KEINEN eigenen Menuepunkt - dort fuehrt das Logo nach
   Hause. Ohne Markierung sieht es aus, als funktioniere die Anzeige nicht
   (genau das ist Doc aufgefallen, weil er die Startseite offen hatte).
   Deshalb bekommt das Logo dieselbe goldene Kante, wenn man dort ist. */
.brand.active{box-shadow:inset 0 -3px 0 var(--gold-bright);border-radius:4px}
.nav-member{background:var(--stone-2);border-top:1px solid var(--line)}
.nav-links-member a{font-size:.88rem;color:var(--muted)}
.nav-links-member a.active{background:#fff;color:var(--gold-d);
  box-shadow:inset 0 -3px 0 var(--gold-d)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-contact,.nav-selbsttest{padding:8px 14px;font-size:.9rem}
/* Auch die Knoepfe zeigen, wenn man gerade auf ihrer Seite ist. Beim gefuellten
   Selbsttest-Knopf ein heller Balken, beim Umriss-Knopf Kontakt ein goldener. */
.nav-selbsttest.active{box-shadow:inset 0 -3px 0 rgba(255,255,255,.75)}
.nav-contact.active{box-shadow:inset 0 -3px 0 var(--gold-d)}
/* Der Login sitzt seit 06.08.2026 oben im dunklen Streifen neben der Telefonnummer.
   Er ist eine Nebenfunktion und nahm in der Knopfzeile den Platz weg, den das
   Menue brauchte, um in EINE Zeile zu passen. */
.nav-login{color:#fff;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border:1px solid rgba(255,255,255,.45);border-radius:20px;text-decoration:none;
  white-space:nowrap}
.nav-login:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.header-top-inner{gap:10px}
.header-top-inner .header-phone{margin-left:auto}

@media(max-width:1000px){
  .nav-toggle{display:flex}
  .nav-public-inner .nav-links,.nav-member-inner .nav-links{display:none;flex-direction:column;
    align-items:stretch;width:100%;order:3}
  .header-nav.open .nav-links{display:flex}
  .nav-links a{padding:12px}
  .nav-actions{margin-left:auto}
}

/* ---------- Hero und Seitenkopf ---------- */
.hero{background:linear-gradient(135deg,var(--graphit-d),var(--graphit));color:#fff;padding:64px 0}
.hero h1,.hero h2,.hero p,.hero .lead{color:#fff}
.hero .lead{opacity:.94;max-width:660px}
.hero-slogan{margin:0 0 1.1rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);font-weight:700}
.hero-slogan span{display:block;margin-top:.3rem;font-size:.95rem;letter-spacing:0;
  text-transform:none;font-weight:400;color:rgba(255,255,255,.85)}
.hero-quote{margin:0 0 1.4rem;padding:18px 20px;background:rgba(255,255,255,.08);
  border-left:4px solid var(--gold-bright);border-radius:var(--radius-sm);font-size:1.1rem;color:#fff}
.hero-quote cite{display:block;margin-top:.6rem;font-size:.8rem;font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-bright)}
.hero-quote cite::before{content:"— "}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-note{margin-top:1.1rem;font-size:.8rem;color:rgba(255,255,255,.8);display:flex;gap:.5rem;align-items:center}
.hero-media{margin-top:1.8rem}

.page-hero{background:var(--stone-2);border-bottom:1px solid var(--line);padding:38px 0 30px}
.crumbs{font-size:.8rem;color:var(--muted);margin-bottom:.6rem}
.crumbs a{color:var(--muted)}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:2px solid transparent;border-radius:11px;padding:13px 22px;
  font-size:1rem;font-weight:700;line-height:1.2;cursor:pointer;text-decoration:none;
  background:var(--gold-d);color:#fff;transition:background .15s,border-color .15s}
.btn:hover{background:var(--graphit);color:#fff;text-decoration:none}
.btn-lg{padding:15px 26px;font-size:1.15rem}
.btn-primary,.btn-orange,.btn-teal{background:var(--gold-d);color:#fff;border-color:var(--gold-d)}
.btn-primary:hover,.btn-orange:hover,.btn-teal:hover{background:var(--graphit);border-color:var(--graphit);color:#fff}
.btn-ghost{background:transparent;color:var(--gold-d);border-color:var(--gold)}
.btn-ghost:hover{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.btn-light{background:#fff;color:var(--graphit-d);border-color:#fff}
.btn-light:hover{background:var(--stone-2);color:var(--graphit-d)}
.hero .btn-ghost,.cta-band .btn-ghost,.bg-teal .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn-ghost:hover,.cta-band .btn-ghost:hover,.bg-teal .btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff}

/* ---------- Abschnitte ---------- */
section{padding:52px 0}
section.tight{padding:32px 0}
.bg-soft{background:var(--stone-2)}
.bg-teal{background:linear-gradient(135deg,var(--graphit),var(--graphit-d));color:#fff}
.bg-teal h1,.bg-teal h2,.bg-teal h3,.bg-teal p{color:#fff}

/* ---------- Raster und Karten ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h3{color:var(--graphit-d);margin-top:0}
.card .ic{color:var(--gold-d);margin-bottom:.5rem}
.card .ic svg{width:32px;height:32px}
.link-card{display:block;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.link-card:hover{border-color:var(--gold);box-shadow:var(--shadow-md);text-decoration:none}
.card-arrow{display:inline-block;margin-top:.6rem;color:var(--gold-d);font-weight:700}
.tile,.tile-1,.tile-2,.tile-3,.tile-4{}
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.stack>*+*{margin-top:1rem}

/* Kopf der Buchseite: DREI Zeilen um den Titel, alle in DERSELBEN Groesse.
   Vorher hatten sie .8 / 1.05 / 1.15 rem — mit dem Titel waren das vier
   Schriftgrade auf vier Zeilen, und das wirkte unruhig (Doc, 08.08.2026).
   Unterschieden werden sie jetzt nur ueber Farbe und Gewicht.
   Kontrast auf dem Sandton geprueft: Gold 5.12, Graphit 9.44, Grau 4.54. */
.buch-zeile{line-height:1.55;margin:0 0 .35rem}
.buch-einordnung{color:var(--gold-d);font-weight:700}
.buch-herkunft{color:var(--graphit-d);font-weight:700}
.buch-bedingung{color:var(--muted);font-weight:400}

/* ---------- Schwebender Buch-Stoerer ----------
   Gegenstueck zum Stoerer der Vereins-Website. Beide sitzen unten rechts,
   unterschieden werden sie ueber Farbe und Haltung (Doc, 08.08.2026):
     Verein : Terrakotta, hochkant, rechtwinklig ausgerichtet.
     Klinik : helles GOLD (Farbe der Wortmarke), quer, und bewusst LEICHT
              SCHRAEG — nicht ganz in der rechtwinkligen Welt.
   Kontrast gemessen: Schrift #2b2a27 auf #f2b85e = 8.06:1, Kicker 6.49:1.
   Beim Ueberfahren richtet er sich auf — kleine Belohnung fuers Hinschauen.
   Wer ihn wegklickt, sieht ihn 30 Tage nicht wieder; gespeichert oertlich
   im Browser, kein Cookie, kein Serverkontakt.

   bottom:78px, damit er ueber dem Vorschau-Knopf sitzt. Faellt der
   Vorschau-Block vor dem Go-live weg, kann der Wert auf 18px zurueck. */
/* OBEN RECHTS, nicht unten (Anweisung Doc, 14.08.2026).
   Unten rechts verdeckte der Stoerer auf der Startseite die Tuer fuer
   Aerzte und Fachpersonen - ausgerechnet den Weg, der die Zuweiser bringt.
   Ein Werbehinweis darf nie die Handlung verdecken, fuer die die Seite
   gebaut ist.
   top:150px, weil der Kopfbereich klebend ist und bei 1440px 134px misst -
   darunter beginnt der freie Bereich. Der Wert ist gemessen, nicht geraten. */
.buchstoerer{position:fixed;right:20px;top:150px;bottom:auto;z-index:40;max-width:330px;
  display:flex;align-items:center;gap:14px;
  background:var(--gold-bright);border:1px solid #d8a049;border-radius:var(--radius-sm);
  box-shadow:0 14px 34px rgba(43,42,39,.30);padding:14px 18px;
  transform:rotate(-2.5deg);transform-origin:100% 0;
  transition:transform .18s ease, box-shadow .18s ease}
.buchstoerer:hover{transform:rotate(0deg);box-shadow:0 16px 40px rgba(43,42,39,.34)}
.buchstoerer a{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}
.buchstoerer a:hover{text-decoration:none}
.buchstoerer .bs-symbol{flex:0 0 auto;color:var(--graphit-d)}
.buchstoerer .bs-kicker{display:block;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--graphit-d);font-weight:800}
.buchstoerer .bs-titel{display:block;font-weight:800;font-size:1rem;margin-top:2px;color:var(--ink)}
.buchstoerer .bs-unter{display:block;font-size:.82rem;color:var(--graphit-d);margin-top:2px}
.buchstoerer-zu{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border:1px solid var(--line);
  border-radius:50%;background:#fff;color:var(--graphit-d);font-size:15px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(43,42,39,.22)}
.buchstoerer-zu:hover{background:var(--stone-2)}
/* Der Bewegungsschutz fuer den Stoerer steht jetzt im Sammelblock am Dateiende —
   er muss NACH allen Regeln stehen, die er ausser Kraft setzt. */
@media(max-width:640px){
  /* Auf dem Telefon misst der Kopfbereich 138px (gemessen bei 390px Breite).
     Ein erster Versuch mit 100px legte den Stoerer zu 52 Prozent unter den
     Kopf - er war halb verdeckt. 150px lassen 12px Luft. */
  .buchstoerer{left:12px;right:12px;top:150px;bottom:auto;max-width:none;padding:12px 16px;
    transform:rotate(-1.5deg);transform-origin:50% 0}
  .buchstoerer .bs-unter{display:none}
}

/* ---------- Stoerer im Inhalt: Hinweis auf das kostenlose Buch ----------
   Weist NUR auf Teil I hin, den kostenlosen Teil. Dass es einen zweiten,
   kostenpflichtigen Teil gibt, steht bewusst NICHT hier, sondern erst im
   Bestellvorgang und in der Auslieferung — so wie auf der Vereins-Website.
   (Anweisung Dr. von Gadomski, 06.08.2026.) */
.stoerer{position:relative;background:linear-gradient(135deg,var(--graphit),var(--graphit-d));
  color:#fff;border-radius:var(--radius);padding:26px 28px;margin:0;
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow-md)}
.stoerer .st-text{flex:1 1 300px;min-width:0}
.stoerer h2,.stoerer h3{color:#fff;margin:.2rem 0 .5rem;font-size:1.7rem}
.stoerer p{color:rgba(255,255,255,.92);margin:0 0 1rem}
.stoerer .eyebrow{color:var(--gold-bright)}
.stoerer .st-marke{position:absolute;top:-13px;left:22px;background:var(--gold-bright);
  color:var(--graphit-d);font-weight:800;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 14px;border-radius:20px;transform:rotate(-4deg);
  box-shadow:0 4px 12px rgba(0,0,0,.22)}
.stoerer .st-cover{flex:0 0 148px;background:#fff;border-radius:var(--radius-sm);
  padding:16px 14px;text-align:center;color:var(--ink)}
.stoerer .st-cover .stc-titel{font-weight:800;font-size:1rem;line-height:1.2;color:var(--graphit-d)}
.stoerer .st-cover .stc-unter{font-size:.8rem;color:var(--muted);margin-top:.25rem;font-weight:600}
.stoerer .st-cover .stc-autor{font-size:.8rem;color:var(--muted);margin-top:.6rem;line-height:1.3}
@media(max-width:640px){
  .stoerer{padding:22px 18px;gap:18px}
  .stoerer h2,.stoerer h3{font-size:1.15rem}
  .stoerer .st-cover{flex:1 1 100%}
}

/* ---------- Wahlkacheln Erwachsene / Kinder ----------
   Diese beiden stehen IMMER nebeneinander, auch auf dem Handy — die Entscheidung
   soll auf einen Blick als Entweder-oder erkennbar sein. Die allgemeine Regel
   fuer .grid-2 klappt unter 640 px untereinander; deshalb hier bewusst dagegen.
   Damit das bei rund 165 px Kachelbreite lesbar bleibt, schrumpfen Abstaende und
   Schrift mit, und die beiden langen Absaetze treten unter 480 px zurueck. */
.grid.wahl-paar{grid-template-columns:1fr 1fr}
.wahl-titel{font-size:1.7rem}
.wahl-umfang{margin-bottom:.4rem}
@media(max-width:640px){
  .grid.wahl-paar{grid-template-columns:1fr 1fr;gap:12px}
  .wahl-paar .card{padding:16px 14px}
  .wahl-titel{font-size:1.1rem}
  .wahl-paar .eyebrow{font-size:.68rem;letter-spacing:.08em}
  .wahl-paar .card-arrow{font-size:.84rem;margin-top:.5rem}
  .wahl-paar .wahl-frage,.wahl-paar .wahl-detail{font-size:.88rem}
}
@media(max-width:480px){
  .grid.wahl-paar{gap:10px}
  .wahl-paar .card{padding:14px 12px}
  .wahl-paar .ic svg{width:26px;height:26px}
  .wahl-paar .wahl-frage,.wahl-paar .wahl-detail{display:none}
  .wahl-paar .wahl-umfang{font-size:.9rem;margin-bottom:.2rem}
}

/* ---------- Fachgebiets-Auswahl (Zuweiser) ----------
   Zuerst die Wahl, dann die eigene Strecke. Ohne JavaScript sind ALLE
   Strecken sichtbar — niemand steht vor einer leeren Seite. */
/* KACHELN statt Pillenreihe (Doc, 14.08.2026: "Lege alphabetisch geordnet
   Kacheln fuer die Fachgebiete an"). Die Pillen lasen sich als Filterleiste,
   nicht als Verzeichnis - bei fuenfzehn Eintraegen brach die Reihe ausserdem
   an einer beliebigen Stelle um, und die alphabetische Ordnung war dadurch
   nicht mehr zu sehen. Ein Raster zeigt sie. */
.fach-wahl{display:grid;gap:10px;margin:1.5rem 0 1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.fach-kachel{display:flex;align-items:center;gap:.6rem;background:#fff;text-align:left;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;
  font:inherit;font-size:.98rem;color:var(--ink);cursor:pointer;text-decoration:none;
  transition:border-color .12s,background .12s,color .12s,box-shadow .12s}
.fach-kachel:hover{border-color:var(--gold-d);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.fach-kachel svg{width:19px;height:19px;flex:0 0 auto;color:var(--gold-d)}
.fach-kachel span{flex:1 1 auto}
/* Kachel mit eigener Seite: traegt einen Pfeil, damit der Unterschied zur
   Schalt-Kachel sichtbar ist, bevor jemand klickt. */
.fach-kachel-seite::after{content:"→";color:var(--gold-d);font-weight:700;flex:0 0 auto}
.fach-knopf[aria-pressed="true"]{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.fach-knopf[aria-pressed="true"] svg{color:#fff}
.fach-strecke{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold-d);
  border-radius:var(--radius);padding:24px;margin-top:1.4rem}
.fach-strecke h3{margin:.2rem 0 .8rem}
.fach-weiter{border-top:1px solid var(--line);margin-top:1.2rem;padding-top:1.2rem}
.js-fach .fach-strecke{display:none}
.js-fach .fach-strecke.aktiv{display:block}
/* Rueckmeldung im Ueberweisungsformular: zeigt, welches Fachgebiet mitgeht,
   ohne es ein zweites Mal zur Auswahl zu stellen. */
.fach-rueckmeldung{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 13px;margin:0;font-size:.95rem}
.fach-rueckmeldung .frm-wert{color:var(--muted)}
.fach-rueckmeldung .frm-wert.gewaehlt{color:var(--graphit-d);font-weight:700}
@media(max-width:560px){
  .fach-wahl{grid-template-columns:1fr}
  .fach-kachel{font-size:.94rem;padding:12px 14px}
  .fach-strecke{padding:18px}
}

/* Liste fuer Saetze, die zitiert und NICHT bestaetigt werden (was-ist-cmd:
   "Kennen Sie diese Saetze?"). Ein Haekchen waere dort Zustimmung, und der
   Gedankenstrich davor war Doc zu viel (15.08.2026: "Entferne die
   Gedankenstriche"). Die Anfuehrungszeichen im Text zeigen ohnehin schon,
   dass zitiert wird - ein zweites Zeichen davor sagt dasselbe noch einmal. */
.satzliste{list-style:none;margin:1rem 0;padding:0}
.satzliste li{padding:.32rem 0;color:var(--ink)}

/* ---------- Bildtafeln ---------- */
.bild-tafel{margin:0}
.bild-tafel img{display:block;width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff}
.bild-tafel figcaption{margin-top:.6rem;font-size:.8rem;line-height:1.5;color:var(--muted)}

/* Bildtafel auf DUNKLEM Grund. Gebraucht, seit das Kinder-Schaubild am
   14.08.2026 in den Kopfbereich gewandert ist: Die Bildunterschrift stand
   dort in --muted (#6b6862) auf Graphit und war mit 1.7:1 praktisch nicht
   zu lesen. Hier hell, gemessen 7.14:1. */
.bild-tafel-hell figcaption{color:#cfcbc3}
.bild-tafel-hell img{border-color:rgba(255,255,255,.25)}

/* Kopfbereich mit Bild daneben. Die Textspalte bekommt mehr Gewicht als die
   Bildspalte - das Schaubild ist hochkant (1024x1536) und wuerde bei
   gleicher Teilung den ganzen ersten Bildschirm fuellen. Die Hoehe ist
   zusaetzlich begrenzt, damit die Ueberschrift daneben nicht verlorengeht. */
.hero-mit-bild{grid-template-columns:1.25fr .75fr;align-items:center;gap:34px}
.hero-mit-bild .bild-tafel img{max-height:520px;width:auto;margin:0 auto}
@media(max-width:820px){
  .hero-mit-bild{grid-template-columns:1fr}
  /* Auf dem Telefon zuerst der Text, dann das Bild - eine hochkante Tafel
     ueber der Ueberschrift schoebe alles unter den Bildrand. */
  .hero-mit-bild .bild-tafel img{max-height:none;width:100%}
}

/* ---------- Hinweiskaesten ---------- */
.notice{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 1rem}
.notice>div{flex:1;min-width:0}
.notice p:last-child{margin-bottom:0}
.notice .ic{color:var(--gold-d);flex:none}
.notice.warn{background:#fdf4ef;border-left-color:var(--danger)}
/* margin:0 ist hier am 24.08.2026 entfernt worden. Ein div hat ohnehin
   keinen Aussenabstand - die Angabe bewirkte nichts, ausser dass sie jede
   Abstandsklasse aushebelte: .mt-1 bis .mt-3 stehen weiter oben in dieser
   Datei, bei gleicher Spezifitaet gewinnt die spaetere Regel. Ein <div
   class="callout mt-3"> klebte deshalb an seinem Vorgaenger, und niemand
   sah, warum. Galt fuer jeden Kasten auf jeder Seite. */
.callout{background:#fff;border-left:5px solid var(--gold);border-radius:var(--radius-sm);
  padding:18px 20px;box-shadow:var(--shadow)}
.callout h3{margin-top:0}
.callout.coral{border-left-color:var(--danger)}
.callout.accent{border-left-color:var(--graphit)}
.disclaimer{font-size:.9rem;color:var(--muted)}
.form-note{font-size:.88rem;color:var(--muted)}

/* ---------- Listen ---------- */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.checklist li{padding-left:28px;position:relative}
.checklist li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--gold-d);font-weight:700}
.crosslist li::before{content:"\2715";color:var(--danger)}
.checks{display:grid;gap:.6rem}

/* ---------- Schritte ---------- */
.steps{display:grid;gap:16px;counter-reset:schritt}
.step{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.step .num{counter-increment:schritt;flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--gold-d);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.step .num::before{content:counter(schritt)}
.step h3{margin:0 0 .3em}
.step p{margin:0}

/* ---------- Aufklapper ---------- */
.faq{display:grid;gap:10px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0}
.faq summary{cursor:pointer;padding:15px 18px;font-weight:700;color:var(--graphit-d);list-style:none;
  display:flex;align-items:center;gap:.5rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--gold-d);font-weight:700;font-size:1.2rem}
.faq details[open] summary::after{content:"\2013"}
.faq details>*:not(summary){padding:0 18px;margin-bottom:1em}
.faq details>*:not(summary):last-child{padding-bottom:16px}

/* ---------- Beschwerdebloecke ---------- */
.symptom{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
.symptom h2{margin-top:0}
.symptom .ic{color:var(--gold-d);margin-bottom:.4rem}
.symptom-thumb{float:right;width:200px;margin:0 0 12px 18px;border-radius:var(--radius-sm)}
@media(max-width:560px){.symptom-thumb{float:none;width:100%;margin:0 0 1rem}}

/* ---------- Zitate ---------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.quote blockquote{margin:.4rem 0 .8rem;font-size:1.05rem;color:var(--ink)}
.stars{color:var(--gold);letter-spacing:2px}
.who{font-size:.85rem;color:var(--muted)}

/* ---------- Marken / Chips ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
  border-radius:20px;padding:5px 14px;font-size:.8rem}
/* Auf hellem Grund waren .pill und .hero-note fast unsichtbar: Sie sind fuer den
   dunklen Hero gebaut (weisser Text). In .page-hero standen sie auf Sand —
   gemessen 1.19:1 bzw. 1.17:1, also praktisch unlesbar. Gemessen 06.08.2026. */
.page-hero .pill{background:#fff;border-color:var(--line);color:var(--graphit-d)}
.page-hero .pill:hover{border-color:var(--gold-d);color:var(--gold-d)}
.page-hero .hero-note{color:var(--muted)}
.chain{display:flex;flex-wrap:wrap;gap:10px}
.chip-link{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:9px 16px;font-size:.92rem;color:var(--ink);text-decoration:none}
.chip-link:hover{border-color:var(--gold);text-decoration:none}
.chip-link .arr{color:var(--gold-d);font-weight:700}

/* ---------- CTA-Band ---------- */
.cta-band{background:linear-gradient(135deg,var(--graphit),var(--graphit-d));color:#fff;
  text-align:center;padding:44px 28px;border-radius:var(--radius)}
.cta-band h2,.cta-band p{color:#fff}
.cta-band p{opacity:.92;max-width:640px;margin-left:auto;margin-right:auto}

/* ---------- Formulare ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:5px;color:var(--graphit-d)}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.chk{display:flex;align-items:flex-start;gap:.5rem;font-weight:400;font-size:.95rem;margin-bottom:.4rem}
.chk input{width:auto;margin-top:.25rem}
.upload{border:2px dashed var(--line);border-radius:var(--radius);padding:22px;text-align:center;color:var(--muted)}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.tbl th{background:var(--stone-2);font-weight:700;color:var(--graphit-d)}

/* ---------- Selbsttest ---------- */
.test-shell{max-width:720px;margin:0 auto}
.q-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.q-text{font-size:1.15rem;font-weight:700;color:var(--graphit-d);margin-bottom:1rem}
.q-options{display:grid;gap:10px}
.q-counter{font-size:.88rem;color:var(--muted)}
.progress{height:6px;background:var(--stone-2);border-radius:3px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--gold-d)}
.test-nav{display:flex;justify-content:space-between;gap:10px;margin-top:1rem}
.result-meter{height:10px;background:var(--stone-2);border-radius:5px;overflow:hidden}
.result-meter>span{display:block;height:100%;background:var(--gold-d)}
.age-track{display:flex;gap:8px;flex-wrap:wrap}
.reco{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--radius-sm);padding:16px 18px;margin-bottom:12px}
.cause{background:var(--stone-2);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:10px}
.jump{display:inline-block;margin-top:.5rem}
.more{font-size:.9rem}
.th-suggest{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.th-suggest li{padding:8px 12px;display:flex;gap:10px;cursor:pointer}
.th-suggest li:hover{background:var(--stone-2)}
.th-suggest li .plz{font-weight:700;color:var(--gold-d);min-width:3.4em}
.pat-row{border-bottom:1px solid var(--line);padding:10px 0}
.pat-open{background:var(--stone-2)}
.ta-edit,.ta-del{font-size:.85rem;padding:4px 10px;border-radius:8px;border:1px solid var(--line);
  background:#fff;cursor:pointer;color:var(--ink)}
.ta-del{color:var(--danger)}

/* ---------- Fussbereich ---------- */
.site-footer{background:var(--graphit-d);color:#d8d5cf;padding:42px 0 24px;margin-top:20px}
.site-footer a{color:#fff}
.site-footer h4{color:#fff;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}
.site-footer .brand{color:#fff}
/* Eigene Groesse fuer den Fussbereich (Doc, 15.08.2026: "in der Fusszeile ist
   das Klinik Logo zu gross und ueberdeckt Text"). Das Logo unten ist eine
   Signatur, kein Schild - es muss nicht mitwachsen, wenn das im Kopf groesser
   wird. Ausdruecklich margin-bottom:0, damit ein negativer Aussenabstand aus
   den Kopfregeln hier nie wieder ankommt, auch wenn jemand den Vorfahren
   vergisst. */
.site-footer .brand-logo{height:56px;margin-bottom:0;box-shadow:none}
.site-footer .brand{display:inline-block;margin-bottom:.4rem}
.site-footer .disclaimer{color:#b3afa7}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{display:block;padding:3px 0;font-size:.92rem;color:#c9c5bd}
.site-footer li a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:24px;padding-top:14px;
  font-size:.82rem;color:#a8a49c;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* Offene Angabe in Entwurfsseiten (Impressum/Datenschutz). Bewusst auffaellig:
   Sie soll beim Ueberfliegen ins Auge springen, damit keine Seite mit Luecken live geht. */
.offen{background:#fdf0d5;border:1px dashed var(--gold);border-radius:4px;padding:1px 6px;
  font-size:.92em;color:var(--gold-d);white-space:normal}

/* ---------- Icons in Fliesstext ---------- */
svg.i{vertical-align:-.15em;flex:none}
.hero-note svg.i,.form-note svg.i{margin-right:.3em}

/* Kleine Knopfform. Gebraucht fuer die vier Marken-Verweise unter dem Hero:
   Sie waren runde Etiketten ohne Ziel und sehen jetzt aus wie die uebrigen
   Knoepfe - gleiche Ecken, gleiche Umrisslinie, nur kleiner (Doc, 14.08.2026). */
.btn-sm{padding:7px 14px}
.hero-marken{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Telefon-zuerst-Band auf der Kontaktseite ----------
   Zwei Spalten: links die Erklaerung der beiden Gespraeche, rechts die
   Nummer als Knopf. Auf dem Telefon untereinander, Nummer zuerst - dort
   ist der Anruf ein Fingertipp. */
.kontakt-telefon{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  background:var(--stone-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px}
.kontakt-telefon h2{font-size:1.45rem}
.kt-nummer{text-align:center;white-space:nowrap}
.kt-nummer .btn{font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .kontakt-telefon{grid-template-columns:1fr;padding:20px 22px}
  .kt-nummer{order:-1}
}
/* Beide Knoepfe GLEICH BREIT (Doc, 14.08.2026). Gleiche Farbe und Hoehe
   hatten sie schon - aber "Jetzt 2-Minuten-Selbsttest machen" ist deutlich
   laenger als "Hier erfahren Sie mehr dazu", und Breite liest sich als
   Gewicht. Zwei gleichwertige Wege muessen gleich gross aussehen.
   Umgesetzt ueber ein Raster mit zwei gleichen Spalten statt ueber eine
   feste Breite - so waechst die Zeile mit dem laengeren Text mit. */
.hero-actions-gleich{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  max-width:720px}
.hero-actions-gleich .btn{width:100%;text-align:center}
@media(max-width:640px){ .hero-actions-gleich{grid-template-columns:1fr} }
/* ---------- Die zwei Gespraeche im Schlussaufruf ----------
   Zwei Karten nebeneinander, darunter EIN Knopf: die Telefonnummer.
   Beide Wege beginnen am Telefon, deshalb gibt es auch nur einen Knopf -
   zwei gleich aussehende Anrufknoepfe waeren eine Scheinwahl.
   Die Mailanfrage steht bewusst kleiner darunter (Doc, 14.08.2026:
   "Kontakt immer zuerst telefonisch, dann AUCH per Mail"). */
.gespraech-wahl{display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin:1.6rem 0 1.8rem;text-align:left}
.gw-karte{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius);padding:20px 22px}
.gw-karte h3{color:#fff;font-size:1.15rem;margin:0 0 .4rem}
.gw-karte p{color:rgba(255,255,255,.88);margin:0;line-height:1.55}
.gw-telefon{font-variant-numeric:tabular-nums}
.gw-mail{margin:1rem 0 0;color:rgba(255,255,255,.85)}
.gw-mail a{color:#fff;text-decoration:underline;text-underline-offset:.15em}
@media(max-width:760px){ .gespraech-wahl{grid-template-columns:1fr} }

/* ============================================================
   ZIELGRUPPEN-WEICHE am Eingang der Startseite
   Entscheid Doc, 14.08.2026 (Variante B von zwei gebauten).

   Der Gedanke: Patienten und Zuweiser brauchen voellig Verschiedenes.
   fuer-aerzte.html ist mit 2275 Woertern die groesste Seite der ganzen
   Website und hatte trotzdem nur EINEN Verweis aus dem Fliesstext auf sich.
   Die Weiche macht daraus die Haelfte der Aufmerksamkeit.

   Warum NICHT als eigene Torseite: index.html traegt 1753 Woerter und ist
   mit 33 eingehenden Verweisen die staerkste Seite der Domain. Eine
   vorgeschaltete Torseite haette sie durch einen Satz und zwei Knoepfe
   ersetzt - und wer ueber eine Suche kommt, landet ohnehin auf einer
   Ratgeber- oder Symptomseite und saehe das Tor nie.

   RANGFOLGE (Anweisung Doc, 14.08.2026): Die WAHL faellt zuerst ins Auge,
   nicht die Aussage. Darum steht die Positionierung als schmale Zeile
   darueber, und die beiden Tueren sind helle, gefuellte Flaechen auf dem
   dunklen Band - der staerkste Kontrast, den die Seite hat. Wer hierher
   kommt, soll nicht lesen muessen, um zu wissen, wo er hin muss.
   ============================================================ */
.weiche{background:var(--graphit-d);color:#fff;padding:40px 0 44px}
/* Raeumliche Aufteilung wie in der ersten Fassung (Doc, 14.08.2026):
   grosse Aussage, darunter die Einordnung. Die zwischenzeitliche schmale
   Grossbuchstaben-Zeile hat die Aussage zur Fusszeile gemacht. */
.weiche-satz{font-size:1.7rem;font-weight:800;
  line-height:1.25;margin:0 0 .5rem;max-width:20em}
.weiche-satz em{color:var(--gold-bright);font-style:normal}
.weiche-unter{color:#cfcbc3;margin:0 0 1.8rem}
.weiche-unter strong{color:var(--gold-bright);font-weight:700}
.weiche-tueren{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* Gefuellte helle Karten. Umrandete Karten auf dunklem Grund wirken
   zurueckhaltend - genau das Gegenteil dessen, was hier gebraucht wird. */
.weiche-tuer{display:block;text-decoration:none;border-radius:var(--radius);
  padding:28px 30px 24px;background:var(--stone);color:var(--ink);
  border-top:6px solid var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  transition:transform .15s ease, box-shadow .15s ease}
.weiche-tuer:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.38);
  color:var(--ink);text-decoration:none}
.weiche-tuer.wt-arzt{border-top-color:var(--graphit)}

/* RANGFOLGE IM KARTENKOPF, korrigiert am 14.08.2026 nach Docs Befund.
   Sie stand vorher auf dem Kopf: Gross war "Ich habe Beschwerden", klein die
   Zielgruppe. Damit war die Erklaerung lauter als die Botschaft.

   Die Botschaft dieses Bereichs ist die WAHL: Patient oder Fachperson.
   Also traegt die Zielgruppe die grosse Schrift, und der Satz in der
   Ich-Form erklaert sie - er hilft beim Zuordnen, ist aber nicht die
   Aussage selbst.

   Die Grossbuchstaben sind mitentfallen. Sie waren richtig, solange die
   Zeile klein war; bei dieser Groesse liest sich Versalsatz schwerer und
   wirkt laut. Die Unterscheidung der beiden Karten uebernimmt jetzt die
   farbige Ich-Zeile - Gold beim Patienten, Graphit bei der Fachperson. */
.weiche-tuer .wt-kicker{display:block;font-size:1.7rem;
  font-weight:800;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink)}
/* Nebeneinander muessen beide Ueberschriften gleich hoch sein, sonst stehen
   die Zeilen darunter versetzt: "Fuer Patientinnen und Patienten" passt in
   eine Zeile, "Fuer Aerztinnen, Aerzte und Fachpersonen" braucht zwei.
   Zwei Zeilen Platz fuer beide - das ist billiger als die weibliche Form
   zu streichen, nur damit es passt. Untereinander (Telefon) entfaellt die
   Vorgabe, dort waere es nur eine Luecke. */
@media(min-width:761px){ .weiche-tuer .wt-kicker{min-height:2.4em} }
.wt-titel{display:block;font-weight:700;line-height:1.4;
  margin:.4rem 0 .55rem;color:var(--gold-d)}
.wt-arzt .wt-titel{color:var(--graphit)}
.wt-text{display:block;color:var(--muted);line-height:1.55}
.weiche-tuer .wt-pfeil{display:inline-block;margin-top:1rem;font-weight:800;color:var(--gold-d)}
.wt-arzt .wt-pfeil{color:var(--graphit-d)}

.weiche-weiter{display:block;text-align:center;margin-top:1.7rem;color:#cfcbc3;text-decoration:none}
.weiche-weiter:hover{color:var(--gold-bright)}
@media(max-width:760px){
  .weiche-tueren{grid-template-columns:1fr;gap:16px}
  /* Die grosse Aussage braucht auf dem Telefon drei Zeilen und schob die
     zweite Tuer um 97px unter den Bildrand (gemessen 390x844). Kleiner
     gesetzt bleibt sie die Ueberschrift, ohne die Wahl zu verdraengen. */
  .weiche-satz{font-size:1.5rem;line-height:1.2;margin-bottom:.35rem}
  .weiche-unter{font-size:.98rem}
  /* Enger als am Bildschirm. Grund: Untereinander gestapelt reichte die
     zweite Karte auf dem kleinsten verbreiteten Telefon (390x844) um 33px
     unter den Bildrand - die WAHL war damit keine sichtbare Wahl mehr,
     sondern eine Karte mit einem Rest darunter. Gekuerzt wurde der
     Innenabstand, NICHT der Text: Der Wortlaut ist abgestimmt, der
     Abstand nicht. Ab 896px Fensterhoehe war es ohnehin nie ein Problem. */
  .weiche{padding:20px 0 24px}
  .weiche-unter{margin-bottom:1.2rem}
  .weiche-tuer{padding:20px 22px 18px}
  .weiche-weiter{margin-top:1.2rem}
}

/* KURZE BILDSCHIRME. Gemessen am 14.08.2026: Auf 390x844 (heute verbreitet)
   passen beide Tueren ins erste Bild. Auf kuerzeren Geraeten nicht:
   360x800 fehlten 55px, 375x667 waren es 163px, 320x568 sogar 360px.
   Dort ist die WAHL keine sichtbare Wahl mehr - man sieht eine Karte und
   einen Rest.

   Abgefragt wird die HOEHE ZUSAMMEN MIT DER BREITE. Erst Version zwei:
   Die Hoehe allein war falsch - ein breiter, flacher Bildschirm (1600x720)
   verlor den Text, obwohl die Tueren dort nebeneinander stehen und reichlich
   Platz haben. Eng wird es nur, wenn sie GESTAPELT sind.
   Schwelle 820px statt 780px, weil 360x800 sonst durchfiel (gemessen: 55px
   fehlten). 390x844 behaelt den Text.

   Unter der Schwelle entfaellt der erklaerende Satz; Zielgruppe, Ich-Zeile
   und Pfeil bleiben - genau die Information, die fuer die Entscheidung
   noetig ist. Der Rest steht auf der Zielseite. */
@media(max-width:760px) and (max-height:860px){
  .weiche .wt-text{display:none}
  .weiche{padding:16px 0 20px}
  .weiche-satz{font-size:1.45rem}.weiche-unter{margin-bottom:.9rem}
  .weiche-tuer{padding:16px 20px 14px}
  .weiche-tuer .wt-pfeil{margin-top:.6rem}
  .weiche-weiter{margin-top:1rem}
}

/* ============================================================
   Tastaturbedienung — Sprungmarke und Fokusrahmen
   Eingefuehrt am 10.08.2026, nachdem _pruefe-tastatur.mjs zwei Maengel
   gemessen hat, die axe-core nicht sieht.

   1) SPRUNGMARKE.  Gemessen: 14 Tabulatorschritte durch Kopfzeile, Telefon,
   Login und zwei Menuereihen, bevor der erste Inhalt kommt — auf JEDER Seite
   neu. Mit der Maus faellt das nicht auf, mit der Tastatur ist es die halbe
   Sitzung. WCAG 2.1, Erfolgskriterium 2.4.1 "Bloecke umgehen", Stufe A.
   Die Marke ist unsichtbar, bis sie den Fokus bekommt — wer sie nicht
   braucht, merkt nie, dass es sie gibt.

   2) FOKUSRAHMEN, zweifarbig.  Gemessen: 115 Stellen mit 1.65:1. Chrome
   zeichnet seinen Rahmen fast schwarz (rgb 16,16,16); Kopf- und Fussbereich
   sind dunkelgraphit (rgb 58,57,54). Der Rahmen war da und trotzdem nicht
   zu sehen. Gefordert sind 3:1 (2.4.11).

   Ein einfarbiger Rahmen loest das nicht: Diese Seite hat helle UND dunkle
   Flaechen. Was auf Sand gut steht, verschwindet im Graphit und umgekehrt.
   Darum zwei Ringe ineinander — aussen helles Gold, innen dunkle Tinte.
   Auf dunklem Grund traegt das Gold, auf hellem die Tinte. Einer von beiden
   hat immer Kontrast, egal wo das Element liegt.

   :focus-visible statt :focus — wer klickt, bekommt keinen Rahmen zu sehen.
   Nur wer tatsaechlich mit der Tastatur navigiert. Das ist der Grund, warum
   frueher viele Seiten den Fokusrahmen ganz abgeschaltet haben; mit
   :focus-visible ist das nicht mehr noetig.
   ============================================================ */
.sprungmarke{position:absolute;left:12px;top:-100px;z-index:9999;
  background:var(--ink);color:#fff;font-weight:700;text-decoration:none;
  padding:12px 20px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  box-shadow:0 6px 20px rgba(43,42,39,.4)}
/* Absichtlich OHNE Uebergang: Wer die Marke braucht, soll sie sofort sehen,
   nicht nach einer Zehntelsekunde Einblendung. Ein erster Versuch mit
   transition liess sie messbar erst verspaetet im Bild erscheinen. */
.sprungmarke:focus{top:0;color:#fff}

/* Ziele, die nur fuer den Sprung ansteuerbar gemacht wurden (main tabindex=-1),
   bekommen KEINEN Rahmen: Ein Rahmen um den halben Bildschirm hilft niemandem
   und verwirrt. Diese Elemente stehen nie in der Tabulatorreihenfolge, es geht
   also kein Hinweis verloren. */
[tabindex="-1"]:focus{outline:none;box-shadow:none}

:focus-visible{
  outline:3px solid var(--gold-bright);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--ink);
  border-radius:2px}

/* Formularfelder hatten schon einen eigenen Rahmen. Er bleibt, bekommt aber
   denselben zweifarbigen Aufbau, damit im Formular nichts anders aussieht
   als daneben. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--gold-bright);outline-offset:2px;
  box-shadow:0 0 0 2px var(--ink);border-color:var(--gold)}

/* ============================================================
   Wer keine Bewegung vertraegt, bekommt keine.

   Das Betriebssystem meldet diesen Wunsch, wenn jemand in den
   Systemeinstellungen "Bewegung reduzieren" gesetzt hat. Der Grund ist
   selten Geschmack: bei vestibulaerer Stoerung, Migraene oder nach einer
   Gehirnerschuetterung loesen bewegte Flaechen Schwindel und Uebelkeit aus.
   WCAG 2.1 Erfolgskriterium 2.3.3.

   Das ist bei uns keine Randgruppe. Migraeneartige Kopfschmerzen und
   Schwindel sind zwei der Leitsymptome, wegen derer Menschen ueberhaupt
   auf diese Seite kommen — der Selbsttest fragt beide ab. Eine Seite, die
   genau diesen Menschen beim Lesen schlecht macht, arbeitet gegen sich.

   Bis zum 10.08.2026 deckte der Block nur den Buch-Stoerer ab. Offen
   geblieben waren: das weiche Scrollen der ganzen Seite, die Ruettel-
   Bewegung im Eltern-Check und saemtliche Uebergaenge.

   Der statische Schraeg-Winkel des Stoerers BLEIBT — er ist Gestaltung,
   keine Bewegung, und er ruettelt niemanden.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}

/* ---------- Dachzeile ueber der Startseiten-Ueberschrift ----------
   Doc, 18.08.2026. Sie steht UEBER der H1 und muss deshalb zweierlei
   leisten: gelesen werden, ohne der Ueberschrift den Rang abzulaufen.
   Also groesser als der Fliesstext, aber deutlich kleiner als die H1,
   und in gedeckter Farbe statt in Gold - Gold zoege den Blick von der
   Ueberschrift weg. Der letzte Satz traegt das Gewicht, nicht die Zeile. */
.dachzeile{font-size:1.3rem;line-height:1.45;font-weight:600;color:var(--muted);
  margin:0 0 .5rem;max-width:34em}
.dachzeile strong{color:var(--ink);font-weight:800}
@media(max-width:760px){ .dachzeile{font-size:1.12rem} .dachzeile br{display:none} }
/* Der Hero-Bereich hat dunklen Grund und faerbt seine Absaetze weiss. Das
   `strong` in der Dachzeile behielt aber --ink, also Fast-Schwarz auf
   Dunkel: gemessener Kontrast 1.46 - und das ausgerechnet beim wichtigsten
   Satz ("Haengt das zusammen?"). Auf dunklem Grund traegt Gold, nicht Tinte. */
.hero .dachzeile strong{color:var(--gold-bright)}

/* ---------- Auswahl Erwachsene / Kinder auf selbsttest.html ----------
   Doc, 19.08.2026: "Gestalte die Buttons auffaelliger in netter Farbe."

   Es sind keine Knoepfe, sondern zwei grosse Karten, und sie sind die
   einzige Entscheidung auf der Seite. Bisher waren sie weiss wie jede
   andere Karte der Website und dadurch nicht als Wahl erkennbar.

   ZWEI FARBEN, NICHT EINE: Gleiche Farbe wuerde die Wahl als eine Sache
   zeigen. Verschiedene Farben machen sichtbar, dass hier zwei WEGE
   auseinandergehen - und beugen genau dem Fehler vor, den Doc am
   14.08.2026 beschrieben hat: dass fuer ein Kind der Erwachsenentest
   gewaehlt wird.

   Beide Farben stammen aus der bestehenden Farbwelt: Gold fuer die
   Erwachsenen (die Hausfarbe), ein warmes Gruen fuer die Kinder.
   Kontrast gemessen, nicht geschaetzt: Text bleibt --ink auf hellem
   Grund, ueber 12:1. */
.wahl-paar .link-card{
  position:relative;border-width:2px;padding:26px 22px;
  background:linear-gradient(180deg,#fff 0%,var(--stone-2) 100%);
}
.wahl-paar .link-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;
  border-radius:var(--radius) var(--radius) 0 0;
}
/* Erwachsene: Gold, die Hausfarbe */
.wahl-paar .link-card:nth-child(1){border-color:#e2c78d;background:linear-gradient(180deg,#fffaf0 0%,#f7ecd7 100%)}
.wahl-paar .link-card:nth-child(1)::before{background:var(--gold)}
.wahl-paar .link-card:nth-child(1) .ic{color:var(--gold-d)}
/* Kinder: warmes Gruen, deutlich unterscheidbar */
.wahl-paar .link-card:nth-child(2){border-color:#b8d4bf;background:linear-gradient(180deg,#f4faf5 0%,#e3f0e7 100%)}
.wahl-paar .link-card:nth-child(2)::before{background:#4a7c59}
.wahl-paar .link-card:nth-child(2) .ic{color:#396044}
.wahl-paar .link-card:nth-child(2) .card-arrow{color:#2f5138}

.wahl-paar .link-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.wahl-paar .link-card{transition:border-color .15s,box-shadow .15s,transform .15s}
/* Wer "Bewegung reduzieren" gesetzt hat, bekommt kein Anheben. */
@media(prefers-reduced-motion:reduce){ .wahl-paar .link-card:hover{transform:none} }
.wahl-paar .card-arrow{font-size:1.05rem}

/* --- Typeform-Buehne (24.08.2026) -------------------------------------
   Der Fragebogen laeuft eingebettet und braucht Platz: Ohne Hoehe faellt
   der Einbau auf wenige hundert Pixel zusammen, und die 720 px von
   .test-shell sind fuer 17 Fragen zu eng. Deshalb eine eigene Buehne -
   breiter und hoch genug, dass niemand im Fenster scrollen muss, um die
   Antwortknoepfe zu sehen.
   Am Schalter FEATURES.selbsttestTypeform; laeuft der eigene Test wieder,
   greift wieder .test-shell. --------------------------------------- */
.tf-buehne{max-width:920px;margin:0 auto}
.tf-buehne>[data-tf-live]{height:min(82vh,780px);min-height:560px}
@media (max-width:640px){
  .tf-buehne>[data-tf-live]{height:min(88vh,680px);min-height:520px}
}