/* ==========================================================================
   KWK — Gestaltungsblatt für Behandlungs- und Diagnostikseiten
   --------------------------------------------------------------------------
   DIES IST DIE QUELLE. Von Hand gepflegt, seit 16.09.2026 erklärtermaßen
   (P-1213, Roman-Entscheidung).

   Bis dahin stand hier „ERZEUGTE DATEI — nicht von Hand ändern", mit
   _entwuerfe/vorlagen.html als Quelle und blatt_erzeugen.py als Erzeuger.
   Das galt zuletzt am 27.08.2026. Seither haben fünf Sitzungen am Blatt
   gearbeitet und nichts davon in die Vorlage zurückgetragen: Fokusrahmen
   (P-1031), Tabellenregeln (P-1101), Notausgang (P-1088), Zeilenlänge 66ch
   und das Ratgeber-Design. Ein Neuerzeugen hätte rund 65 KB verworfen —
   und die Fokusrahmen-Regel still halbiert, weil der Erzeuger jeden Selektor
   auf .kwk-seite eingrenzt, diese eine aber absichtlich global ist.
   blatt_erzeugen.py ist deshalb stillgelegt und verweigert den Start.

   Wird zentral über das mu-plugin kwk-seiten geladen, NICHT je Seite. Eine
   Änderung hier wirkt auf JEDER Seite mit der Vorlage — Behandlungsseiten,
   Diagnostik, Lexikon und 46 Ratgeber.

   VOR JEDER ÄNDERUNG AUF LIVE: die Datei FRISCH von der Box holen. Mehrere
   Sitzungen arbeiten daran, und eine lokale Kopie von gestern hat am
   15.09.2026 bereits 590 Zeilen fremder Arbeit überschrieben. Sicherung
   anlegen, ihre Größe ausgeben, danach die ausgelieferte Datei nachlesen.

   STAGING IST ABSICHTLICH ANDERS: Dort hängt zusätzlich der Ratgeber-Block
   aus _entwuerfe/ratgeber-design/ratgeber-design.css (ins_blatt.py), nur für
   Staging freigegeben. Niemals „angleichen".

   Alle Regeln sind auf den Wrapper .kwk-seite eingegrenzt: Oxygens eigenes
   Blatt lädt später und würde sonst Schrift und Farben überschreiben.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════
   TEIL 1 — GEMEINSAMES GESTALTUNGSBLATT
   Kommt später EINMAL zentral (mu-plugin), nicht in jede Seite.
   Eine Farbänderung wirkt dann auf allen 20 Seiten.
   ══════════════════════════════════════════════════════════════════ */
/* Farben. Die Markenfarben --sage (#B4C7B4) und --rosa (#DFAFC9) bleiben
   unverändert; sie tragen Flächen, Linien und Akzente.

   Für Schrift sind sie zu hell. Die Textvarianten sind deshalb so weit
   abgedunkelt, dass sie den Lesbarkeitsgrenzwert von 4,5:1 erreichen —
   nachgerechnet, nicht geschätzt. Vorher lagen sie zwischen 3,3 und 3,9
   und wären auf allen zwanzig Seiten schwer lesbar gewesen. */
:root{
  --sage:#B4C7B4; --sage-pale:#F0F4EA; --sage-dark:#607960; --sage-darker:#4E6650;
  --sage-zahl:#849484;
  --ink:#2A2E2B; --ink-body:#505652; --ink-soft:#6C736E;
  --paper:#FBFCFA; --band:#F3F6F0; --white:#fff; --line:#E4E8E2;
  --rosa:#DFAFC9; --rosa-deep:#AA5F78; --rosa-dark:#8E5566; --rosa-pale:#F8ECF1;
  --pruef:#C9A227; --pruef-bg:#FDF8E7;

  /* Aktionsfarbe: alles Anklickbare, das zum Termin fuehrt - Schaltflaechen,
     Sprungmarke, Zeitkacheln, Rueckruf-Formular. EINE Stelle, damit die Farbe
     nicht wieder ueber acht Regeln verstreut liegt.

     Nachgetragen am 27.08.2026 aus der LIVE ausgelieferten Datei. Diese Vorlage
     BENUTZTE --cta-schrift und --cta-dark bereits an fuenf Stellen, ohne sie je
     zu definieren - auf Staging blieben diese Stellen damit ohne Farbe. Derselbe
     Fall wie TEIL 1a und 1c: direkt an der erzeugten Datei gepflegt.

     Sie ist an --rosa-deep gehaengt und traegt damit dieselbe Farbe wie das
     Abschlussband vor dem Footer. Roman am 25.08.2026, nachdem er es auf
     Staging gesehen hat: "Wollten wir die Buttons nicht in dieser Farbe machen
     wie der untere Teil?" Damit ist Entscheidung A (Terrakotta) vom 24.08.2026
     zurueckgenommen.

     Zum Terrakotta, falls es wieder aufkommt: Der Ton der Markenrichtlinie
     #C8956C erreicht auf Weiss nur 2,63:1 und faellt durch WCAG AA (verlangt
     4,5:1). Verwendbar waere nur eine abgedunkelte Fassung, etwa #96603A mit
     5,21:1. Das Altrosa hier besteht mit 4,55:1. */
  --cta:var(--rosa-deep); --cta-dark:var(--rosa-dark); --cta-pale:var(--rosa-pale);

  /* Als Flaeche traegt --cta genug Kontrast, als Schriftfarbe auf --paper/--band/
     --sage-pale kommt es nur auf 4,42 bis 4,08:1 und faellt durch WCAG AA.
     Deshalb hier der dunklere Ton derselben Familie: 5,17 bis 5,60:1.
     Gemessen am 25.08.2026. */
  --cta-schrift:var(--rosa-dark);
}
.kwk-seite *{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Oxygens Rahmen um unseren Inhalt: Er begrenzt auf 1450px und setzt 100px
   Abstand oben und unten. Beides heben wir auf — aber nur auf Seiten, die
   unseren Wrapper tatsächlich enthalten. Alle übrigen Seiten bleiben, wie
   sie sind. Dadurch beginnt der Inhalt direkt unter der Kopfzeile, und
   farbige Flächen können bis zum Rand laufen. */
/* Der Nachdruck ist nötig: Oxygen setzt den Abstand je Abschnitt über eine
   eigene, spezifischere Regel, die sonst gewinnt.

   Der Selektor greift NUR den Container, der unseren Inhalt tatsächlich
   enthält. Zuvor hieß er `body:has(.kwk-seite) .ct-section-inner-wrap` — das
   prüfte lediglich, ob der Wrapper irgendwo im Dokument vorkommt, und traf
   dann jeden Oxygen-Container, auch den der Fußzeile. Die verlor dadurch
   ihre Breitenbegrenzung und ihre Abstände. */
.ct-section-inner-wrap:has(> .ct-inner-content > .kwk-seite),
.ct-section-inner-wrap:has(> .kwk-seite){max-width:none!important;padding:0!important}
.kwk-seite{margin:0;background:var(--paper);color:var(--ink-body);
  font-family:'Signika','Segoe UI',sans-serif;line-height:1.65;font-size:17px;
  -webkit-font-smoothing:antialiased}
.kwk-seite h1,.kwk-seite h2,.kwk-seite h3{color:var(--ink);margin:0;font-weight:600;line-height:1.1;
  letter-spacing:-.02em;text-wrap:balance}
.kwk-seite p{margin:0 0 1.1em}
.kwk-seite a{color:inherit}
/* Schrift ausdruecklich weiterreichen: Oxygen setzt sie auf Ueberschriften
   und Listen direkt, und eine direkte Regel schlaegt jede Vererbung. Ohne
   diese Zeile stuenden die Ueberschriften in der Serifenschrift des Themes. */
.kwk-seite h1,.kwk-seite h2,.kwk-seite h3,.kwk-seite h4,.kwk-seite summary,.kwk-seite li,.kwk-seite td,.kwk-seite th,.kwk-seite figcaption,.kwk-seite figure,.kwk-seite details,.kwk-seite a,.kwk-seite strong,.kwk-seite span{font-family:inherit}
.kwk-seite .wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.kwk-seite .label{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-darker)}
.kwk-seite .label--rosa{color:var(--cta-schrift)}

/* ---- Bühne ---- */
/* „Kachel im Band" (Entscheidung Roman 17.08.2026): Das Farbfeld läuft
   randlos über die volle Fensterbreite — die Bühne ist damit nie schmaler
   als die Sektionen darunter, der Breitensprung von vorher entfällt. Das
   Foto schwebt als gerundete Kachel mit Luft ringsum darin.
   Der Seitenabstand wird aus der EIGENEN Breite gerechnet
   ((100% - 1240px)/2), nicht aus 100vw — sonst zählte die Bildlaufleiste
   mit und das Raster verspränge gegen .wrap. */
.kwk-seite .buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:min(62vh,560px);background:var(--sage-pale);
  padding:clamp(22px,2.8vw,40px) max(clamp(20px,5vw,56px),calc((100% - 1240px)/2));
  gap:clamp(22px,2.8vw,44px);align-items:center}
.kwk-seite .buehne-text{display:flex;flex-direction:column;justify-content:center;padding:0}
.kwk-seite .brot{font-size:13px;color:var(--ink-body);margin-bottom:24px}
.kwk-seite .brot a{text-decoration:none}
.kwk-seite .brot i{font-style:normal;opacity:.4;margin:0 8px}
.kwk-seite .buehne h1{font-size:clamp(2.6rem,5.4vw,4.2rem);letter-spacing:-.04em;margin:10px 0 0;
  hyphens:auto;-webkit-hyphens:auto}
.kwk-seite .buehne .frage{font-size:clamp(1.05rem,1.7vw,1.32rem);color:var(--sage-darker);
  font-weight:300;margin:14px 0 0;max-width:22ch;line-height:1.3}
.kwk-seite .buehne .antwort{font-size:16.5px;max-width:46ch;margin-top:20px}
.kwk-seite .buehne .antwort strong{color:var(--ink);font-weight:600}
/* Die Kachel: gerundet, weicher Schatten, füllt die Zeilenhöhe. Der
   Rosé-Strich rückt mit den Rundungen ein, damit er nicht in die Ecken läuft. */
.kwk-seite .buehne-bild{position:relative;overflow:hidden;background:var(--sage-pale);
  align-self:stretch;min-height:min(54vh,480px);border-radius:clamp(14px,1.6vw,22px);
  box-shadow:0 26px 54px -30px rgba(42,46,43,.44), 0 4px 12px -7px rgba(42,46,43,.16)}
.kwk-seite .buehne-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kwk-seite .buehne-bild::before{content:"";position:absolute;left:0;top:clamp(14px,1.6vw,22px);
  bottom:clamp(14px,1.6vw,22px);width:4px;border-radius:4px;z-index:2;
  background:linear-gradient(180deg,var(--rosa),transparent 65%)}

/* Eckige Bühne auf den TEAMSEITEN (Roman 16.09.2026: „eckig, nicht mit diesen
   runden Kanten"). Bewusst NUR hier: .buehne-bild steht auf 81 der 99
   Live-Seiten, eine seitenweite Umstellung wäre eine Entscheidung über das
   Aussehen der ganzen Website und ist nicht getroffen.
   Die Regel hängt an der Klasse .kwk-team im Markup, nicht an der
   WordPress-Kennung parent-pageid-218: Die gibt es nur auf Live, wo die Seiten
   unter /team/ hängen. Auf Staging liegen sie als team-<name>-neu an der Wurzel,
   dort wäre die Regel nicht prüfbar gewesen - und eine Gestaltung, die sich vor
   dem Livegang nicht ansehen lässt, ist keine.
   Der rosa Streifen lief innerhalb der Rundung und endete oben und unten mit
   deren Abstand; ohne Rundung trägt er die volle Höhe. Der Schatten fällt weg,
   er war auf die weiche Form abgestimmt und wirkt an einer harten Kante falsch. */
.kwk-seite.kwk-team .buehne-bild{border-radius:0;box-shadow:none}
.kwk-seite.kwk-team .buehne-bild::before{top:0;bottom:0;border-radius:0}

.kwk-seite .aktion{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;align-items:center}
.kwk-seite .btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;
  font-size:15.5px;padding:14px 30px;border-radius:2px;transition:all .25s cubic-bezier(.2,.7,.3,1)}
/* Altrosa ist die Handlungsfarbe der Seite — dieselbe wie im Abschluss.
   Zwei gleichwertige Schaltflächen: gefüllt für den Hauptweg, mit Umriss
   für den zweiten. Beide sind als Schaltfläche erkennbar. */
.kwk-seite .btn--voll{background:var(--cta);color:#fff}
.kwk-seite .btn--voll:hover{background:var(--cta-dark);transform:translateY(-2px)}
.kwk-seite .btn--umriss{color:var(--cta-schrift);background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--cta-schrift)}
.kwk-seite .btn--umriss:hover{background:var(--cta-pale);transform:translateY(-2px)}
.kwk-seite .btn--text{color:var(--ink);padding-left:0;padding-right:0;position:relative}
/* Unterlinie in --sage-dark statt --sage (16.09.2026, gemessen): Salbeigruen auf
   Weiss ergibt 1,7:1, damit war die einzige Auszeichnung des Textlinks praktisch
   unsichtbar - ein Link, der nicht als Link zu erkennen ist. PRUEFKATALOG §5.1
   verlangt fuer grafische Bedienelemente 3:1. SEITENWEITE Wirkung: .btn--text
   steht auf allen Seiten mit kwk-seiten.css. */
.kwk-seite .btn--text::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1.5px;
  background:var(--sage-dark);transform-origin:left;transition:transform .3s}
.kwk-seite .btn--text:hover::after{transform:scaleX(.4)}

/* ---- Kapitelverzeichnis ---- */
.kwk-seite .inhalt{padding:clamp(28px,3.6vw,44px) 0 clamp(6px,1.4vw,14px);border-bottom:1px solid var(--line)}
.kwk-seite .inhalt .label{display:block;margin-bottom:18px}
/* Zwei Spalten, aber spaltenweise gefüllt: links 01–03, rechts 04–06.
   Über Mehrspaltensatz statt Raster — so bleibt die Reihenfolge im
   Quelltext fortlaufend (wichtig fürs Telefon und für Vorlesehilfen),
   und die Aufteilung stimmt auch bei ungerader Anzahl. */
.kwk-seite .inhalt-liste{list-style:none;padding:0;margin:0;columns:2;
  column-gap:clamp(28px,5vw,64px)}
.kwk-seite .inhalt-liste li{break-inside:avoid}
.kwk-seite .inhalt-liste a{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--line);text-decoration:none;
  transition:padding-left .3s cubic-bezier(.2,.7,.3,1)}
.kwk-seite .inhalt-liste a:hover{padding-left:10px}
.kwk-seite .inhalt-liste .nr{font-size:12px;color:var(--sage-darker);font-weight:600;font-variant-numeric:tabular-nums}
.kwk-seite .inhalt-liste .txt{color:var(--ink);font-size:16.5px;font-weight:500}
.kwk-seite .inhalt-liste .pfeil{color:var(--sage-dark);opacity:0;transform:translateX(-6px);
  transition:opacity .3s,transform .3s}
.kwk-seite .inhalt-liste a:hover .pfeil{opacity:1;transform:none}

/* ---- Weg mit Fortschritt ---- */
/* Gleiche Breite wie die Bühne, damit die farbigen Bänder und der Kopf
   bündig übereinander liegen. */
.kwk-seite .weg{position:relative;max-width:1240px;margin-inline:auto}
.kwk-seite .weg .schiene{position:absolute;left:clamp(20px,5vw,56px);top:0;bottom:0;width:2px;
  background:var(--line);z-index:1}
.kwk-seite .weg .fortschritt{position:absolute;left:clamp(20px,5vw,56px);top:0;width:2px;height:0;z-index:1;
  background:linear-gradient(180deg,var(--rosa),var(--sage-dark));transition:height .1s linear}
.kwk-seite .etappe{position:relative;padding:clamp(38px,5.5vw,68px) 0}
/* Jeder zweite Abschnitt sitzt auf einem leicht abgesetzten Grund. Das macht
   die Übergänge sichtbar, ohne Trennlinien zu ziehen.
   Der Grund muss bis zum FENSTERRAND laufen, obwohl .weg auf 1240 px begrenzt
   ist — seit die Bühne randlos ist, fiele eine am Raster endende Fläche als
   Kante auf. Der Schatten malt die Farbe seitlich weiter, der clip-path
   beschneidet ihn oben und unten auf die Abschnittshöhe. */
.kwk-seite .etappe:nth-of-type(even){background:var(--band);
  box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.kwk-seite .etappe:nth-of-type(even)::before{background:var(--band)}
.kwk-seite .etappe .wrap{display:grid;grid-template-columns:clamp(74px,8vw,124px) minmax(0,1fr);
  gap:clamp(18px,3vw,44px)}
.kwk-seite .knoten .zahl{font-size:clamp(2rem,3.2vw,2.9rem);font-weight:300;color:var(--sage-darker);
  line-height:.9;letter-spacing:-.03em;position:sticky;top:32px;
  padding-left:clamp(22px,2.2vw,34px);transition:color .5s cubic-bezier(.2,.7,.3,1)}
.kwk-seite .etappe.aktiv .knoten .zahl{color:var(--sage-darker)}
.kwk-seite .etappe::before{content:"";position:absolute;left:calc(clamp(20px,5vw,56px) - 5px);
  top:clamp(38px,5.5vw,68px);width:12px;height:12px;border-radius:50%;background:var(--paper);z-index:2;
  border:2px solid var(--line);z-index:2;transition:border-color .5s,transform .5s}
.kwk-seite .etappe.aktiv::before{border-color:var(--sage-dark);transform:scale(1.35)}
.kwk-seite .etappe h2{font-size:clamp(1.55rem,2.7vw,2.1rem);max-width:20ch}
.kwk-seite .etappe .unter{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--sage-darker);font-weight:300;margin-top:10px}
.kwk-seite .etappe .lead{max-width:58ch;margin-top:20px;font-size:16.5px}

/* ---- Nummerierte Aufzählung ---- */
.kwk-seite .punkte{list-style:none;padding:0;margin:28px 0 0;max-width:60ch}
.kwk-seite .punkte li{padding:16px 0;border-top:1px solid var(--line);display:grid;
  grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  transition:padding-left .3s cubic-bezier(.2,.7,.3,1)}
.kwk-seite .punkte li:last-child{border-bottom:1px solid var(--line)}
.kwk-seite .punkte li:hover{padding-left:10px}
.kwk-seite .punkte .nr{font-size:12px;color:var(--sage-darker);font-variant-numeric:tabular-nums;font-weight:600}
.kwk-seite .punkte strong{color:var(--ink);font-weight:600}

/* ---- Schrittfolge ---- */
.kwk-seite .schritte{margin-top:32px}
.kwk-seite .schritt{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);
  padding:24px 0;border-top:1px solid var(--line)}
.kwk-seite .schritt:last-child{border-bottom:1px solid var(--line)}
.kwk-seite .schritt .marke{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:300;color:var(--sage-darker);
  line-height:1.15;min-width:2.2ch}
.kwk-seite .schritt h3{font-size:1.08rem;margin-bottom:7px}
.kwk-seite .schritt p{margin:0;max-width:58ch;font-size:15.5px}
/* Hinweise und Risiken: gleiche Anordnung, andere Marke — kein Ablaufschritt */
.kwk-seite .schritte--hinweis .marke{color:var(--rosa-dark)}
.kwk-seite .nachsatz{margin:24px 0 0;max-width:56ch}
/* Kontaktpunkt in der Seitenmitte - zurückhaltend, damit er den Lesefluss
   nicht unterbricht, aber vorhanden. */
.kwk-seite .zwischenruf{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:32px 0 0;padding:18px 22px;background:var(--rosa-pale);
  border-radius:5px;max-width:62ch}
.kwk-seite .zwischenruf p{margin:0;color:var(--ink);font-weight:500}

/* ---- Wertetabelle (v. a. Diagnostik) ---- */
.kwk-seite .werte{width:100%;border-collapse:collapse;margin-top:26px;font-size:15.5px}
.kwk-seite .werte th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;padding:0 18px 10px 0;border-bottom:2px solid var(--line)}
.kwk-seite .werte td{padding:14px 18px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.kwk-seite .werte td:first-child{color:var(--ink);font-weight:600}
.kwk-seite .werte .zahl{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--sage-darker)}

/* ---- Hinweisstellen ---- */
.kwk-seite .merke{border-left:2px solid var(--rosa);padding:4px 0 4px 22px;margin:28px 0;max-width:56ch}
.kwk-seite .merke .label{display:block;margin-bottom:8px}
.kwk-seite .merke p{margin:0;font-size:16px}
.kwk-seite .merke--pruef{border-left-color:var(--pruef);background:var(--pruef-bg);
  padding:16px 20px;border-radius:0 6px 6px 0}
.kwk-seite .merke--pruef .label{color:#8A6D1B}

/* ---- Weiterführende Wege ----
   Bewusst als Karten mit Fläche und Rand: Am Telefon gibt es kein
   Überfahren mit der Maus, deshalb muss schon im Ruhezustand erkennbar
   sein, dass sich hier etwas anklicken lässt. */
.kwk-seite .wege{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.kwk-seite .wege a{padding:20px 22px;text-decoration:none;display:grid;gap:6px;
  background:var(--white);border:1px solid var(--line);border-radius:4px;
  transition:border-color .25s,transform .25s,box-shadow .25s}
.kwk-seite .wege a:hover,.kwk-seite .wege a:focus-visible{border-color:var(--rosa-deep);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(80,86,82,.09)}
.kwk-seite .wege a:active{transform:translateY(0)}
.kwk-seite .wege h3{font-size:1.05rem;color:var(--cta-schrift);display:flex;align-items:center;
  justify-content:space-between;gap:14px}
.kwk-seite .wege p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:34ch}
.kwk-seite .wege .pfeil{width:30px;height:30px;flex:none;border-radius:50%;background:var(--rosa-pale);
  color:var(--rosa-deep);display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;transition:background .25s,color .25s,transform .25s}
.kwk-seite .wege a:hover .pfeil{background:var(--rosa-deep);color:#fff;transform:translateX(3px)}

/* ---- Bilder ---- */
.kwk-seite .bild{overflow:hidden;background:var(--white)}
.kwk-seite .bild img{width:100%;display:block}
.kwk-seite .bild--breit{aspect-ratio:16/10}
.kwk-seite .bild--breit img{height:100%;object-fit:cover}
.kwk-seite .bildzeile{margin-top:38px}
.kwk-seite .bildzeile--schmal{max-width:400px}
.kwk-seite .bildzeile--breit{max-width:720px}
.kwk-seite .bildzeile figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:12px;
  padding-left:14px;border-left:2px solid var(--sage)}

/* ---- Fragen ---- */
.kwk-seite .fragen{margin-top:30px;max-width:74ch}
.kwk-seite .frage-block,.kwk-seite .quellen-block{border-top:1px solid var(--line)}
.kwk-seite .frage-block:last-of-type,.kwk-seite .quellen-block:last-of-type{border-bottom:1px solid var(--line)}
.kwk-seite .frage-block summary,.kwk-seite .quellen-block summary{padding:21px 34px 21px 0;cursor:pointer;list-style:none;
  font-size:1.05rem;font-weight:500;color:var(--ink);position:relative}
.kwk-seite .frage-block summary::-webkit-details-marker,.kwk-seite .quellen-block summary::-webkit-details-marker{display:none}
.kwk-seite .frage-block summary::after,.kwk-seite .quellen-block summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--sage-dark);border-bottom:1.6px solid var(--sage-dark);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.kwk-seite .frage-block[open] summary::after,.kwk-seite .quellen-block[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.kwk-seite .frage-block p{padding:0 40px 22px 0;margin:0;font-size:15.5px;max-width:62ch}

/* Luft zwischen einem Kartenraster und der naechsten Ueberschrift.

   Fast jede h2 auf diesen Seiten beginnt einen eigenen Abschnitt und bekommt
   ihren Abstand von dort. Die Ausnahme ist "Haeufige Fragen": Sie steht im
   selben Container wie die Verweiskarten davor und hatte deshalb null Abstand -
   die Ueberschrift klebte an der letzten Karte. Gemessen am 16.09.2026 auf acht
   der elf Rechtsseiten, Roman hat es an /recht/spende/ gesehen.

   Der Nachbarschaftswaehler trifft nur diesen Fall: ein .wege-Raster,
   unmittelbar gefolgt von einer Ueberschrift. Steht dazwischen etwas anderes
   oder beginnt die h2 einen eigenen Abschnitt, aendert sich nichts. */
.kwk-seite .wege + h2{margin-top:clamp(44px, 5vw, 68px)}

/* Nachtrag 16.09.2026, von Roman auf /anfahrt/ gesehen: Dort folgt auf das
   .wege-Raster keine h2, sondern die naechste Zwischenueberschrift im
   Fliesstext ("Aus Steyr und dem Traunviertel"). Die Regel darueber greift
   deshalb nicht, und die h3 hat aus der Grundregel margin:0 - sie klebte
   unmittelbar am unteren Kartenrand.

   Kleinerer Wert als bei der h2: Eine h3 beginnt keinen neuen Abschnitt,
   sondern gliedert weiter. Der Wert spiegelt den margin-top des Rasters
   selbst (34px), damit die Karte oben wie unten gleich viel Luft hat. */
.kwk-seite .wege + h3{margin-top:clamp(30px, 3.2vw, 40px)}

/* ---- Rechtshinweis auf den Gesetzesseiten ----

   Ein Haftungshinweis ist eine Fussnote, kein Merksatz. Er traegt deshalb die
   Form der Autorenzeile darueber - duenne Linie, kleine Schrift, gedaempfte
   Farbe, gleiche Zeilenlaenge - und nicht die des .merke-Kastens mit seinem
   rosa Streifen.

   Anlass: Am 16.09.2026 stand er als .merke ausserhalb des Inhaltsrasters und
   klebte am linken Seitenrand. Roman: "Das schaut wie links hingeklatscht aus."
   Die Ursache war die Stelle, nicht die Farbe - er sass zwischen den
   Abschnitten statt in einem. Jetzt steht er im selben Container wie die
   Autorenzeile und erbt deren Raster. */
.kwk-seite .rechtshinweis{margin-top:26px;padding-top:20px;
  border-top:1px solid var(--line);max-width:62ch;font-size:14.5px;
  color:var(--ink-soft)}
.kwk-seite .rechtshinweis .label{display:block;margin-bottom:7px}
.kwk-seite .rechtshinweis p{margin:0;font-size:inherit;line-height:1.62}

/* ---- Autorenzeile (E-E-A-T) ---- */
.kwk-seite .autor{display:flex;gap:16px;align-items:center;margin-top:40px;padding-top:22px;
  border-top:1px solid var(--line);max-width:62ch;font-size:14.5px;color:var(--ink-soft)}
.kwk-seite .autor .kreis{width:60px;height:60px;border-radius:50%;background:var(--sage-pale);
  flex:none;display:flex;align-items:center;justify-content:center;color:var(--sage-dark);
  font-weight:600;font-size:15px}
/* Als Bild: Porträt statt Initialen. Ein Gesicht belegt die Urheberschaft
   stärker als ein Kürzel — für Patienten wie für Suchmaschinen. */
.kwk-seite .autor img.kreis{object-fit:cover;object-position:center top;
  box-shadow:0 0 0 1px var(--line)}
.kwk-seite .autor strong{color:var(--ink);display:block;font-size:15.5px}

/* ---- Terminbuchung ----
   Der Grundsatz: Termine zeigen, nicht suchen lassen. Konkrete Zeiten als
   antippbare Flächen, das Monatsraster nur als Zweitweg. Entworfen für das
   Telefon; dort kommen 84 % der Besucher her. */
/* Hell statt Salbei: Seit die Bühne selbst das randlose Salbeiband ist,
   braucht sie darunter einen Abschluss — zwei gleiche Flächen verschwömmen
   zu einer, und genau dieser Sprung hatte die Bühne schmaler wirken lassen. */
.kwk-seite .buchung{background:var(--paper);border-bottom:1px solid var(--line);
  padding:clamp(26px,4vw,38px) 0}
.kwk-seite .buchung .wrap{max-width:840px}
.kwk-seite .buchung .naechster{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-bottom:6px}
.kwk-seite .buchung .naechster b{color:var(--ink);font-size:clamp(1.15rem,2.4vw,1.45rem);
  font-weight:600;letter-spacing:-.01em}
.kwk-seite .buchung .naechster span{font-size:14.5px;color:var(--sage-darker)}
.kwk-seite .buchung .weitere{font-size:14.5px;color:var(--ink-soft);margin:0 0 20px}

/* Fast-Track: bucht den nächsten freien Termin mit einem Tipp — derselbe
   Ablauf wie ein Klick auf die Zeit darunter, nur ohne Suchen. Auf dem
   Telefon lagen sonst drei Bildschirme zwischen Kopfzeile und Formular
   (Mobil-Messung 17.08.). */
.kwk-seite .schnell{border:0;cursor:pointer;font-family:inherit;margin:2px 0 16px}

/* Die Termine selbst */
.kwk-seite .tage{display:grid;gap:12px}
.kwk-seite .tag{display:grid;grid-template-columns:clamp(88px,22vw,124px) 1fr;gap:14px;
  align-items:start;padding:13px 0;border-top:1px solid var(--line)}
.kwk-seite .tag .datum{font-size:14.5px;color:var(--ink);font-weight:600;padding-top:7px}
.kwk-seite .tag .datum em{display:block;font-style:normal;font-size:12.5px;font-weight:400;
  color:var(--ink-soft)}
.kwk-seite .zeiten{display:flex;gap:8px;flex-wrap:wrap}
.kwk-seite .zeit{padding:11px 17px;background:var(--white);border:1.5px solid var(--sage);
  border-radius:4px;color:var(--ink);font:inherit;font-size:15.5px;font-weight:600;
  cursor:pointer;font-variant-numeric:tabular-nums;
  transition:background .2s,border-color .2s,color .2s,transform .15s}
.kwk-seite .zeit:hover,.kwk-seite .zeit:focus-visible{background:var(--cta);border-color:var(--cta);
  color:#fff;transform:translateY(-1px)}
.kwk-seite .zeit.knapp{border-color:var(--pruef)}
.kwk-seite .zeit .rest{display:block;font-size:11px;font-weight:400;color:var(--pruef);
  margin-top:1px}
.kwk-seite .zeit:hover .rest{color:#fff}

.kwk-seite .buchung .mehr{margin-top:18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.kwk-seite .buchung .mehr a{font-size:14.5px;color:var(--cta-schrift);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}

/* Der Ausweg: erscheint erst, wenn kein Termin passt */
.kwk-seite .ausweg{margin-top:20px;padding:16px 20px;background:var(--white);
  border:1px dashed var(--line);border-radius:5px}
.kwk-seite .ausweg summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;
  font-size:15.5px}
.kwk-seite .ausweg summary::-webkit-details-marker{display:none}
.kwk-seite .ausweg summary::before{content:"+ ";color:var(--cta-schrift);font-weight:700}
.kwk-seite .ausweg[open] summary::before{content:"– "}
.kwk-seite .ausweg p{margin:10px 0 0;font-size:15px;max-width:60ch}

/* Vertrauensangaben unter der Buchung */
.kwk-seite .marken{display:flex;gap:20px;flex-wrap:wrap;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
.kwk-seite .marken b{color:var(--ink);font-weight:600}

/* Filter nach Tageszeit. Die Anzahl steht am Knopf, damit sofort sichtbar
   ist, wo es eng wird - ehrlicher als eine leere Liste nach dem Klick. */
.kwk-seite .tageszeit{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.kwk-seite .fenster{padding:8px 15px;background:transparent;border:1px solid var(--line);
  border-radius:20px;font:inherit;font-size:14px;color:var(--ink-body);
  cursor:pointer;transition:all .2s}
.kwk-seite .fenster span{display:inline-block;margin-left:5px;font-size:12.5px;
  color:var(--ink-soft);font-variant-numeric:tabular-nums}
.kwk-seite .fenster:hover{border-color:var(--sage-dark)}
.kwk-seite .fenster[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.kwk-seite .fenster[aria-pressed="true"] span{color:rgba(255,255,255,.75)}
.kwk-seite .buchung .leer{margin:14px 0 0;padding:14px 18px;background:var(--white);
  border-left:2px solid var(--pruef);border-radius:0 4px 4px 0;font-size:15px;
  max-width:58ch}
.kwk-seite .tag[hidden],.kwk-seite .zeit[hidden]{display:none}

/* Steht NACH den Basisregeln von .zeit und .fenster span - bei gleicher
   Spezifität gewinnt sonst die spätere Basisregel und der Block wäre wirkungslos. */
@media(max-width:600px){
  .kwk-seite .tag{grid-template-columns:1fr;gap:7px}
  .kwk-seite .tag .datum{padding-top:0}
  /* Kompakte Chips statt bildschirmbreiter Balken: Der 50%-Flex wuchs bei
     einem Slot je Tag auf volle Breite (350x50 px — Hauptstörer der
     Mobil-Messung vom 17.08.). */
  .kwk-seite .zeit{flex:0 0 auto;min-width:84px;padding:9px 14px;text-align:center}
  .kwk-seite .schnell{width:100%;justify-content:center}
  /* Filterleiste einzeilig: Zähler ausblenden reicht nicht - die vier Chips
     sind zusammen breiter als der Bildschirm. Deshalb eine seitlich
     wischbare Zeile ohne sichtbaren Rollbalken. */
  .kwk-seite .fenster span{display:none}
  .kwk-seite .fenster{flex:0 0 auto}
  .kwk-seite .tageszeit{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .kwk-seite .tageszeit::-webkit-scrollbar{display:none}
}

/* Der Kalender bleibt - als Zweitweg. Wer an einen Zyklustag gebunden ist,
   sucht gezielt ein Datum und ist mit Vorschlägen nicht bedient. */
/* scroll-margin: Die Automatik scrollt den Kalender an - ohne den Abstand
   läge sein Kopf unter der überlagernden Sticky-Kopfzeile der Website. */
.kwk-seite .kalender{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;
  scroll-margin-top:96px}
.kwk-seite .kalender summary{cursor:pointer;list-style:none;font-size:15px;font-weight:600;
  color:var(--rosa-deep)}
.kwk-seite .kalender summary::-webkit-details-marker{display:none}
.kwk-seite .kalender summary::before{content:"+ ";font-weight:700}
.kwk-seite .kalender[open] summary::before{content:"– "}
.kwk-seite .hinweis-klein{margin:9px 0 14px;font-size:14px;color:var(--ink-soft);max-width:56ch}
/* Vorhang während der Klick-Automatik: Das Widget wird zwar bedient, aber
   erst wieder gezeigt, wenn das Formular für den gewählten Slot steht - die
   durchlaufenden Zwischenansichten sahen nach einem technischen Fehler aus.
   opacity statt display/visibility: display:none nähme der Automatik die
   Klickziele (offsetParent-Prüfung), und visibility überstimmen die
   Widget-Kinder mit eigenem visibility:visible. pointer-events sperrt
   Nutzerklicks ins Unsichtbare; die Automatik klickt programmatisch. */
.kwk-seite .kalender.uebernimmt > :not(summary):not(.vorhang){opacity:0;pointer-events:none}
.kwk-seite .kalender .vorhang{display:none;margin:14px 0;padding:14px 16px;background:var(--sage-pale);
  border-left:3px solid var(--sage);border-radius:3px;font-size:14.5px;
  font-weight:600;color:var(--ink)}
.kwk-seite .kalender.uebernimmt .vorhang{display:flex;align-items:center;gap:10px}
.kwk-seite .kalender .vorhang::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid var(--sage);border-top-color:var(--sage-darker);
  animation:kwk-dreh .8s linear infinite}
/* Der Termin war inzwischen vergeben: kein Warte-Kreisel, sondern Hinweis. */
.kwk-seite .kalender .vorhang--hinweis{background:var(--pruef-bg);border-left-color:var(--pruef)}
.kwk-seite .kalender .vorhang--hinweis::before{display:none}
@keyframes kwk-dreh{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.kalender .vorhang::before{animation:none}}
/* Gewählter Termin über dem Widget-Formular - das Widget selbst zeigt ihn
   dort nicht an, die Zeile kommt aus kwk-seiten.js. */
.kwk-seite .termin-merker{margin:0 0 14px;padding:10px 14px;background:var(--sage-pale);
  border-left:3px solid var(--rosa);border-radius:3px;font-size:14.5px;
  font-weight:600;color:var(--ink)}

/* Orientierungsgespräch, zurückgestuft: kein gleichrangiger Umschalter mehr,
   sondern ein aufklappbarer Kasten unter dem Rückruf-Ausweg — für alle, die
   noch unsicher sind, ob ein Erstgespräch das Richtige ist. Er enthält die
   Erklärung (kein ärztliches Gespräch) UND die komplette Terminauswahl. */
.kwk-seite .og-box{margin-top:20px;padding:16px 20px;background:var(--sage-pale);
  border:1px solid var(--line);border-radius:5px}
.kwk-seite .og-box summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;
  font-size:15.5px}
.kwk-seite .og-box summary::-webkit-details-marker{display:none}
.kwk-seite .og-box summary::before{content:"+ ";color:var(--cta-schrift);font-weight:700}
.kwk-seite .og-box[open] summary::before{content:"– "}
.kwk-seite .og-box > p{margin:10px 0 0;font-size:15px;max-width:60ch}
.kwk-seite .og-box .terminbereich{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* Video mit Klick zum Abspielen. Das Vorschaubild liegt auf unserem Server,
   der Videodienst wird erst nach dem Klick kontaktiert - schneller und
   datenschutzfreundlicher als ein dauerhaft eingebetteter Rahmen. */
.kwk-seite .video{margin:26px 0 0;max-width:720px}
.kwk-seite .video-start{display:block;position:relative;width:100%;padding:0;border:0;
  background:var(--sage-pale);border-radius:5px;overflow:hidden;cursor:pointer;
  aspect-ratio:16/9}
.kwk-seite .video-start img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.kwk-seite .video-start:hover img{transform:scale(1.02)}
.kwk-seite .video-taste{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--rosa-deep);font-size:21px;display:flex;align-items:center;
  justify-content:center;padding-left:4px;box-shadow:0 4px 18px rgba(0,0,0,.22);
  transition:transform .25s,background .25s}
.kwk-seite .video-start:hover .video-taste{transform:translate(-50%,-50%) scale(1.08);
  background:#fff}
.kwk-seite .video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:5px;display:block}
.kwk-seite .video figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:11px;
  padding-left:14px;border-left:2px solid var(--sage);max-width:58ch}

/* ---- Video-Variante: Hochformat (Reel 9:16) ----
   Ein Reel in einem 16:9-Rahmen beschneidet das Vorschaubild mitten im
   Gesicht. Stattdessen: schmaler 9:16-Rahmen und als Standbild eine
   GESTALTETE Titelkarte im Stil des Video-Titelframes (Badge, Titel,
   Unterzeile) - kein Bild vom Videodienst, nichts wird vorab geladen. */
.kwk-seite .video--hoch{max-width:380px}
.kwk-seite .video--hoch .video-start,.kwk-seite .video--hoch iframe{aspect-ratio:9/16}
.kwk-seite .video-karte{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-start;gap:14px;text-align:left;
  padding:clamp(22px,7%,34px);
  /* Dunkler Grund, weil die Kachel die Videovorschau UEBERDECKT: heller Text auf
     dunklem Salbei ist auf jedem Standbild lesbar, dunkler Text auf hellem Grund
     nicht. Live steht es seit dem Go-live so, hier nicht - nachgetragen 27.08.2026. */
  background:linear-gradient(160deg,var(--sage-darker) 0%,#3B4F3D 100%)}
.kwk-seite .video-karte .badge{background:#fff;color:var(--sage-darker);font-size:11px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px}
.kwk-seite .video-karte .titel{font-size:clamp(1.35rem,5.6vw,1.7rem);font-weight:600;
  color:#fff;line-height:1.15;letter-spacing:-.02em}
.kwk-seite .video-karte .unterzeile{font-size:14.5px;color:var(--sage-pale)}
.kwk-seite .video--hoch .video-taste{top:auto;bottom:clamp(22px,7%,34px);left:clamp(22px,7%,34px);
  transform:none}
.kwk-seite .video--hoch .video-start:hover .video-taste{transform:scale(1.08)}

/* Rückruf: kurz und an Ort und Stelle. Wer hier landet, hat gerade keinen
   passenden Termin gefunden - ein Seitenwechsel kostet an dieser Stelle
   die meisten. Das Formular kommt aus FluentForms; die Regeln hier ziehen
   dessen Markup auf die Linie des Blatts (Schrift, Rahmen, Knopf). */
.kwk-seite .rueckruf-form{margin-top:16px;max-width:420px}
.kwk-seite .rueckruf-form .frm-fluent-form .ff-el-group{margin-bottom:13px}
.kwk-seite .rueckruf-form .frm-fluent-form .ff-el-input--label label{font-size:14px;color:var(--ink);
  font-weight:500;margin-bottom:5px}
.kwk-seite .rueckruf-form .frm-fluent-form .ff-el-form-control{width:100%;padding:11px 13px;
  border:1px solid var(--line);border-radius:4px;font:inherit;font-size:15.5px;
  background:var(--white);color:var(--ink)}
.kwk-seite .rueckruf-form .frm-fluent-form .ff-el-form-control:focus{outline:2px solid var(--cta);
  outline-offset:1px;border-color:var(--cta);box-shadow:none}
.kwk-seite .rueckruf-form .frm-fluent-form .ff_t_c,.kwk-seite .rueckruf-form .frm-fluent-form .ff-el-tc{
  font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.kwk-seite .rueckruf-form .frm-fluent-form .ff-btn-submit{display:inline-flex;align-items:center;
  justify-content:center;gap:9px;background:var(--cta);color:#fff;border:0;
  border-radius:2px;padding:14px 30px;font:inherit;font-size:15.5px;font-weight:600;
  cursor:pointer;transition:all .25s cubic-bezier(.2,.7,.3,1)}
.kwk-seite .rueckruf-form .frm-fluent-form .ff-btn-submit:hover{background:var(--cta-dark);
  transform:translateY(-2px)}
.kwk-seite .rueckruf-form .ff-message-success{font-size:15px;color:var(--sage-darker);
  border-left:2px solid var(--sage);padding-left:14px}
.kwk-seite .zusage{margin:8px 0 0;font-size:13.5px;color:var(--ink-soft)}

/* Wochen zum Nachladen. Alle Termine stehen im HTML - sichtbar sind die
   Wochen bis zur aktuellen; der Knopf hängt jeweils die nächste an und
   verschwindet am Ende. Kein Zurück-Pfeil, kein „1 von 6"-Zähler: Das war
   Systemsprache, die auf dem Telefon nur Platz kostete. */
.kwk-seite .wochenkopf{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.kwk-seite .wochenkopf span{font-size:13px;font-weight:400;color:var(--ink-soft)}
.kwk-seite .blaettern{display:flex;justify-content:center;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line)}
/* Nötig, weil display:flex sonst das UA-[hidden] schlägt - am Ende der
   Wochen blendet kwk-seiten.js den ganzen Streifen aus. */
.kwk-seite .blaettern[hidden]{display:none}
.kwk-seite .blatt{padding:11px 22px;background:var(--white);border:1px solid var(--line);
  border-radius:4px;font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer;
  transition:border-color .2s,color .2s}
.kwk-seite .blatt:hover{border-color:var(--cta);color:var(--cta-schrift)}

/* ---- Abschluss ---- */
/* Abschluss: freundlich statt wuchtig. Altrosa trägt den Abschnitt wärmer
   als das Anthrazit und nimmt ihm das Schwere. */
.kwk-seite .schluss{background:var(--rosa-deep);color:#fff;padding:clamp(28px,3.2vw,42px) 0}
.kwk-seite .schluss .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
.kwk-seite .schluss .label{color:#fff;opacity:.92}
.kwk-seite .schluss h2{color:#fff;font-size:clamp(1.3rem,2.1vw,1.7rem);max-width:24ch;margin-top:10px}
.kwk-seite .schluss p{color:#fff;max-width:46ch;margin:12px 0 0;font-size:15.5px}
.kwk-seite .schluss .btn--voll{background:#fff;color:var(--cta-schrift);white-space:nowrap}
.kwk-seite .schluss .btn--voll:hover{background:var(--rosa);color:#fff}

/* ---- Abschluss-Variante: Foto ----
   Modifikator NUR für die Erstgespräch-Seite: Das Babyfoto der alten Seite
   wandert ans Ende. Der Einstieg zeigt bewusst das Gespräch — den Moment
   davor —, der Abschluss zeigt, wohin der Weg führt. Ein heller Verlauf von
   links hält den Text lesbar; die Schrift wechselt dafür auf Tinte.
   Das Foto liegt auf der Live-Domain (49 KB WebP) — bewusst, wie bei den
   erzeugten Blättern: funktioniert auf Staging wie live (siehe 0.3). */
.kwk-seite .schluss--foto{position:relative;overflow:hidden;padding:clamp(36px,4.6vw,66px) 0;
  background:#F4EFE9 url('https://kinderwunschklinik.at/wp-content/uploads/2023/12/Baby-Montage-Erstgespraech-iStock-1213703389-2-jpg.webp') right 30%/cover no-repeat}
.kwk-seite .schluss--foto::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,
  rgba(251,252,250,.97) 0,rgba(251,252,250,.9) 42%,rgba(251,252,250,.42) 68%,rgba(251,252,250,.06) 100%)}
/* Einspaltig: Der Knopf steht unter dem Text statt rechts daneben — rechts
   sitzt bei vielen Fensterbreiten das Gesicht des Kindes, und ein Knopf
   mitten darauf wirkt deplatziert. Die rechte Hälfte bleibt dem Foto. */
.kwk-seite .schluss--foto .wrap{position:relative;grid-template-columns:minmax(0,1fr);
  justify-items:start;gap:0}
.kwk-seite .schluss--foto .btn--voll{margin-top:24px}
.kwk-seite .schluss--foto .label{color:var(--cta-schrift);opacity:1}
.kwk-seite .schluss--foto h2{color:var(--ink)}
.kwk-seite .schluss--foto p{color:var(--ink-body)}
.kwk-seite .schluss--foto .btn--voll{background:var(--cta);color:#fff}
.kwk-seite .schluss--foto .btn--voll:hover{background:var(--cta-dark);color:#fff}

/* ---- Punktnavigation ---- */
.kwk-seite .punktnav{position:fixed;right:clamp(14px,2.4vw,30px);top:50%;transform:translateY(-50%);
  z-index:50;display:grid;gap:14px}
.kwk-seite .punktnav a{width:9px;height:9px;border-radius:50%;background:var(--line);display:block;
  position:relative;transition:all .3s}
.kwk-seite .punktnav a:hover{background:var(--sage)}
.kwk-seite .punktnav a.an{background:var(--sage-dark);transform:scale(1.4)}
.kwk-seite .punktnav a span{position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-size:12px;color:var(--ink-soft);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;background:var(--paper);padding:3px 9px}
.kwk-seite .punktnav a:hover span{opacity:1;transform:translateY(-50%) translateX(0)}

.kwk-seite .auf{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),
  transform .7s cubic-bezier(.2,.7,.3,1);
  /* Notausgang (P-1088, Roman 16.09.2026). Der ganze Seiteninhalt steckt in
     .auf. Ohne diese Zeile haengt er daran, dass ein Skript laeuft: Bleibt es
     aus, steht die Seite leer da - an einer oertlichen Vorschau des
     OHSS-Artikels blieben alle sieben Abschnitte leer.
     Die Animation macht nach 2,5 Sekunden sichtbar, was sonst nie sichtbar
     wuerde. Im Normalfall kommt sie nie zum Zug: Das Skript gibt .kwk-seite
     sofort die Klasse 'js' und schaltet sie ab (Regel darunter).
     Bewusst NICHT umgekehrt geloest - sichtbar beginnen und per Skript
     verstecken haette den Inhalt kurz aufblitzen lassen, weil das Skript im
     Fussbereich laedt und erst nach dem ersten Zeichnen laeuft. */
  animation:kwk-notausgang 1ms linear 2.5s forwards}
.kwk-seite.js .auf{animation:none}
.kwk-seite .auf.da{opacity:1;transform:none;animation:none}
@keyframes kwk-notausgang{to{opacity:1;transform:none}}

/* Beim Drucken wird nicht gescrollt. Abschnitte, die nie im Fenster standen,
   tragen kein 'da' und kaemen leer aufs Papier - wer die Preisseite ausdruckt,
   bekommt heute halbe Seiten. Eine Einblendbewegung ist auf Papier ohnehin
   sinnlos. */
@media print{
  .kwk-seite .auf{opacity:1 !important;transform:none !important;
    animation:none !important;transition:none !important}
}
@media(prefers-reduced-motion:reduce){.auf{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* Etappen ohne Knoten (Vorlage C: Timelapse, Blastozystenkultur, ERA-Test, PID,
   Polkoerperdiagnostik). Dort ist .auf das einzige Kind von .wrap und landet
   deshalb in der schmalen ersten Rasterspalte, waehrend rechts fast ein halbes
   Fenster leer bleibt. In die zweite Spalte gesetzt steht die Textspalte an
   derselben Stelle und in derselben Breite wie auf allen Seiten mit Weg.
   Roman, 28.08.2026: "Es wird fast nur linksbuendig geschrieben, und viel Platz
   geht verloren." Gemessen vorher 679px ab 261px, nachher 960px ab 429px.
   Der Zuruecksetzer unter 900px ist noetig: dort wird .wrap einspaltig, eine
   Angabe grid-column:2 wuerde sonst eine leere zweite Spalte erzeugen. */
.kwk-seite .etappe .wrap > .auf:only-child{grid-column:2}
@media(max-width:900px){
  .kwk-seite .etappe .wrap > .auf:only-child{grid-column:auto}
}

@media(max-width:900px){
  .kwk-seite .punktnav{display:none}
  /* Auf dem Telefon steht das Foto ueber dem Text und laeuft randlos ueber
     die volle Breite — die Kachel-Anlage mit Luft ringsum braeuchte hier
     Platz, den es nicht gibt. Rundung und Schatten entfallen deshalb. */
  .kwk-seite .buehne{grid-template-columns:1fr;min-height:0;padding:0;gap:0}
  /* align-self:start + width:100% sind fuer WebKit/Safari PFLICHT: Mit dem
     geerbten align-self:stretch streckt WebKit die HOEHE auf die leere
     Grid-Zeile (0) und leitet per aspect-ratio die Breite ab -> das Bild
     kollabierte auf 0x0 (iPhone, 17.08.). Chromium rechnet andersherum
     und verdeckte den Fehler. */
  .kwk-seite .buehne-bild{aspect-ratio:4/3;min-height:0;order:-1;border-radius:0;box-shadow:none;
    align-self:start;width:100%}
  .kwk-seite .buehne-text{padding:clamp(26px,6vw,40px) clamp(20px,5vw,40px)}
  .kwk-seite .buehne-bild::before{left:0;right:0;top:auto;bottom:0;width:auto;height:3px;
    border-radius:0;background:linear-gradient(90deg,var(--rosa),transparent 65%)}
  .kwk-seite .inhalt-liste{columns:1}
  .kwk-seite .wege,.kwk-seite .schluss .wrap,.kwk-seite .etappe .wrap{grid-template-columns:minmax(0,1fr)}
  /* Ohne rechte Bildhaelfte muss der Schleier gleichmaessig decken. */
  .kwk-seite .schluss--foto{background-position:72% center}
  .kwk-seite .schluss--foto::before{background:rgba(251,252,250,.88)}
  .kwk-seite .knoten .zahl{position:static;font-size:2rem;margin-bottom:4px;padding-left:0}
  .kwk-seite .weg .schiene,.kwk-seite .weg .fortschritt,.kwk-seite .etappe::before{display:none}
  .kwk-seite .werte{font-size:14.5px}
}

/* ══════════════════════════════════════════════════════════════════
   TEIL 1a — BUCHUNG, SPRUNGMARKEN, DANKE-SEITEN
   Nachgetragen am 26.08.2026. Diese Regeln standen nur in der ausgelieferten
   kwk-seiten.css, nicht in dieser Vorlage - offenbar direkt in der erzeugten
   Datei ergaenzt. Beim naechsten blatt_erzeugen.py waeren sie verlorengegangen.
   Wer hier etwas aendert, aendert es ab jetzt an der richtigen Stelle.
   ══════════════════════════════════════════════════════════════════ */

/* Sprungziele nicht unter die feste Kopfzeile laufen lassen. */
.kwk-seite [id]{scroll-margin-top:clamp(104px,15vh,156px)}

/* Buehne ohne Bild: Danke-Seiten und Seiten ohne Foto. */
.kwk-seite .buehne--ohne-bild{grid-template-columns:1fr;min-height:0;
  padding-block:clamp(44px,6vw,84px)}
.kwk-seite .buehne--ohne-bild .antwort{max-width:64ch}

/* Sprungmarke "Termin auswaehlen" in der Buehne von /erstgespraech/. */
.kwk-seite .sprung-buchen{display:inline-flex;align-items:center;gap:7px;
  margin-top:22px;font-size:13.5px;font-weight:600;color:var(--cta-schrift);
  text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color .2s,color .2s}
.kwk-seite .sprung-buchen span{font-size:12px}
.kwk-seite .sprung-buchen:hover,.kwk-seite .sprung-buchen:focus-visible{
  color:var(--cta-dark);border-color:var(--cta-dark)}

/* Vergebene Termine im Kalender: sichtbar, aber nicht waehlbar. */
.kwk-seite .zeit.weg,.kwk-seite .schnell.weg{background:var(--sage-pale);border-color:transparent;
  color:var(--ink-soft);text-decoration:line-through;cursor:not-allowed;opacity:.65}
.kwk-seite .zeit.weg:hover,.kwk-seite .schnell.weg:hover{background:var(--sage-pale);
  border-color:transparent;color:var(--ink-soft)}

/* Hinweis ueber dem Kalender, wenn ein Termin inzwischen vergeben ist. */
.kwk-seite .weg-hinweis{margin:0 0 14px;padding:13px 16px;background:var(--pruef-bg);
  border-left:3px solid var(--pruef);border-radius:3px;font-size:14.5px;
  font-weight:600;color:var(--ink)}
.kwk-seite .weg-hinweis[hidden]{display:none}
.kwk-seite .buchung .naechster[hidden]{display:none}

/* ══════════════════════════════════════════════════════════════════
   TEIL 1c — LINKS IM FLIESSTEXT
   Nachgetragen am 27.08.2026, derselbe Fall wie TEIL 1a: Die Regel stand nur
   in der LIVE ausgelieferten kwk-seiten.css, nicht in dieser Vorlage. Wer die
   Datei neu erzeugt und nach live spielt, loescht sie dort - und der Zustand
   vom 25.08. waere zurueck, auf allen 24 Seiten.

   Bis 25.08.2026 gab es dafuer keine Regel: die Links erbten die Vorgabe des
   Themes und waren im Absatz nicht von normalem Text zu unterscheiden. Roman an
   der Kryokonservierungsseite: "Amh Test ist zum Beispiel hier verlinkt und man
   sieht es nicht." Damit lief die interne Verlinkung aller 24 Seiten ins Leere.

   Unterstreichung ist das tragende Merkmal, nicht die Farbe: nach WCAG 1.4.1
   darf Farbe nicht das einzige Unterscheidungsmittel sein, und die
   Unterstreichung wirkt auch bei Farbfehlsichtigkeit. Der Abstand von 3 px
   haelt sie von den Unterlaengen fern.

   Bewusst eng gefasst auf Links INNERHALB von Absaetzen, Listen und
   Bildunterschriften. Die Kartenlinks (.wege a) enthalten ihr <p> umgekehrt und
   werden davon nicht getroffen, ebenso wenig Schaltflaechen, Brotkrume,
   Punktnavigation und Autorenzeile - die tragen ihre eigene Gestalt.
   ══════════════════════════════════════════════════════════════════ */
.kwk-seite .auf p a,
.kwk-seite .auf li a,
.kwk-seite .auf figcaption a,
.kwk-seite .buehne .antwort a{color:var(--cta-schrift);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .18s,text-decoration-thickness .18s}
.kwk-seite .auf p a:hover,.kwk-seite .auf li a:hover,
.kwk-seite .auf figcaption a:hover,.kwk-seite .buehne .antwort a:hover,
.kwk-seite .auf p a:focus-visible,.kwk-seite .auf li a:focus-visible{
  color:var(--sage-darker);text-decoration-thickness:2px}

/* Auf dem Abschlussband steht weisse Schrift auf Altrosa. Dort traegt die
   Unterstreichung allein, eine zweite Farbe waere nicht lesbar. */
.kwk-seite .schluss p a{color:#fff;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
.kwk-seite .schluss p a:hover{text-decoration-thickness:2px}

/* ══════════════════════════════════════════════════════════════════
   TEIL 1b — RECHNERSEITEN (Vorlage D)
   Uebernommen aus rechner-redesign/2026-08-neu/rechner-neu.css am 26.08.2026.
   Drei neue Bausteine, alles andere kommt unveraendert aus Vorlage B:
     .buehne--werkzeug  Buehne mit dem Rechner statt eines Fotos
     .werkzeug          der Rechner selbst, in der Schrift der Website
     .ausgaenge         die drei Wege NACH dem Ergebnis
   Verwendet ausschliesslich die vorhandenen Farbmarken, keine neue Farbe.
   ══════════════════════════════════════════════════════════════════ */

/* ── Buehne mit Werkzeug ────────────────────────────────────────────────── */
.kwk-seite .buehne--werkzeug{
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  align-items:center;
  background:var(--band);
  padding-block:clamp(28px,4vw,56px);
}
.kwk-seite .buehne--werkzeug .buehne-text{padding-inline:clamp(20px,5vw,56px)}
.kwk-seite .buehne--werkzeug .antwort{max-width:42ch}
.kwk-seite .werkzeug-spalte{padding-inline:clamp(20px,3vw,44px) clamp(20px,5vw,56px)}

/* ── Das Werkzeug ───────────────────────────────────────────────────────── */
.kwk-seite .werkzeug{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(42,46,43,.09);overflow:hidden;
}
.kwk-seite .werkzeug-kopf{
  padding:20px clamp(18px,2.4vw,28px) 0;
}
.kwk-seite .werkzeug-kopf h2{font-size:1.24rem;letter-spacing:-.02em}
.kwk-seite .werkzeug-kopf p{font-size:14px;color:var(--ink-soft);margin:8px 0 0}
.kwk-seite .werkzeug-feld{padding:18px clamp(18px,2.4vw,28px) 0}
.kwk-seite .werkzeug-feld > label{
  display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-dark);margin-bottom:8px;
}
.kwk-seite .werkzeug-eingabe{display:flex;gap:10px;align-items:stretch}
.kwk-seite .werkzeug-eingabe input{
  flex:1;min-width:0;font:inherit;font-size:22px;font-weight:600;color:var(--ink);
  padding:12px 16px;border:1.5px solid var(--line);border-radius:9px;background:var(--paper);
  font-variant-numeric:tabular-nums;
}
.kwk-seite .werkzeug-eingabe input:focus{outline:none;border-color:var(--sage-dark)}
.kwk-seite .einheiten{display:flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.kwk-seite .einheiten button{
  font:inherit;font-size:13.5px;font-weight:600;padding:0 14px;border:0;cursor:pointer;
  background:var(--white);color:var(--ink-soft);
}
.kwk-seite .einheiten button[aria-pressed="true"]{background:var(--sage-pale);color:var(--sage-darker)}
.kwk-seite .werkzeug-hilfe{font-size:12.5px;color:var(--ink-soft);margin:8px 0 0}
.kwk-seite .werkzeug-hilfe a{color:var(--cta-schrift)}
.kwk-seite .werkzeug .btn--voll{width:100%;justify-content:center;margin:20px 0 0;font-size:16px;padding:15px 22px}
.kwk-seite .werkzeug-fuss{
  display:flex;flex-wrap:wrap;gap:6px 18px;padding:14px clamp(18px,2.4vw,28px) 20px;
  font-size:12px;color:var(--ink-soft);
}
.kwk-seite .werkzeug-fuss span::before{content:"·";margin-right:8px;color:var(--sage)}
.kwk-seite .werkzeug-fuss span:first-child::before{content:none}

/* ── Ergebnis ───────────────────────────────────────────────────────────── */
.kwk-seite .ergebnis{border-top:1px solid var(--line);background:var(--sage-pale);padding:22px clamp(18px,2.4vw,28px)}
.kwk-seite .ergebnis .label{display:block;margin-bottom:6px}
.kwk-seite .ergebnis-zeile{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.kwk-seite .ergebnis-zeile strong{font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--ink);font-weight:600;letter-spacing:-.02em}
.kwk-seite .ergebnis-zeile em{font-style:normal;font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.kwk-seite .skala{margin-top:18px}
.kwk-seite .skala-band{position:relative;height:12px;border-radius:6px;overflow:hidden;display:flex}
.kwk-seite .skala-band i{display:block;height:100%}
.kwk-seite .skala-marke{
  position:absolute;top:-7px;width:3px;height:26px;border-radius:2px;background:var(--ink);
}
.kwk-seite .skala-schrift{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft);margin-top:9px}
.kwk-seite .werte-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.kwk-seite .werte-reihe div{background:var(--white);border:1px solid var(--line);border-radius:9px;padding:11px 12px}
.kwk-seite .werte-reihe dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dark)}
.kwk-seite .werte-reihe dd{margin:5px 0 0;font-size:17px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.kwk-seite .werte-reihe small{display:block;font-size:11.5px;font-weight:400;color:var(--ink-soft);margin-top:2px}
.kwk-seite .pflichtsatz{
  margin-top:16px;background:var(--white);border-left:3px solid var(--sage);
  border-radius:0 9px 9px 0;padding:13px 16px;font-size:13.5px;line-height:1.6;color:var(--ink-body);
}
.kwk-seite .pflichtsatz b{color:var(--ink)}

/* ── Die drei Ausgaenge nach dem Ergebnis ───────────────────────────────── */
.kwk-seite .ausgaenge{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:30px;
}
.kwk-seite .ausgaenge > a{
  display:flex;flex-direction:column;gap:9px;text-decoration:none;background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.kwk-seite .ausgaenge > a:hover{transform:translateY(-3px);border-color:var(--sage);box-shadow:0 14px 30px rgba(42,46,43,.08)}
.kwk-seite .ausgaenge h3{font-size:1.12rem;line-height:1.25}
.kwk-seite .ausgaenge p{font-size:14.5px;margin:0}
.kwk-seite .ausgaenge .pfeil{color:var(--cta-schrift);font-weight:600}
.kwk-seite .ausgaenge .wert{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* ── Ausweg fuer alle ohne Wert ─────────────────────────────────────────── */
.kwk-seite .kein-wert{
  display:flex;gap:clamp(16px,2vw,26px);align-items:center;flex-wrap:wrap;
  background:var(--band);border:1px solid var(--line);border-radius:12px;
  padding:20px clamp(18px,2.4vw,26px);margin-top:28px;
}
.kwk-seite .kein-wert p{margin:0;flex:1;min-width:16rem;font-size:15.5px}
.kwk-seite .kein-wert strong{color:var(--ink)}

@media(max-width:900px){
  .kwk-seite .buehne--werkzeug{grid-template-columns:minmax(0,1fr)}
  .kwk-seite .werkzeug-spalte{padding-inline:clamp(20px,5vw,56px);margin-top:28px}
  .kwk-seite .ausgaenge{grid-template-columns:minmax(0,1fr)}
  .kwk-seite .werte-reihe{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .kwk-seite .werte-reihe dd{font-size:15px}
}

/* ── Platzhalter, solange ein Buehnenbild fehlt ─────────────────────────── */
/* Absichtlich auffaellig: Beim Durchsehen der Entwuerfe soll sofort ins Auge
   fallen, wo noch ein Motiv gewaehlt werden muss. Geht nie live. */
.kwk-seite .buehne-bild--platzhalter{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--band),var(--band) 14px,
    var(--sage-pale) 14px,var(--sage-pale) 28px);
  border:2px dashed var(--sage-dark);min-height:clamp(220px,28vw,340px)}
.kwk-seite .buehne-bild--platzhalter span{font-size:15px;color:var(--sage-darker);text-align:center;
  line-height:1.7;padding:20px}
.kwk-seite .buehne-bild--platzhalter b{display:block;margin-top:6px;color:var(--ink);font-size:16.5px}

/* ── Was der Rechner braucht (fuellt die linke Spalte der Buehne) ───────── */
.kwk-seite .mitbringen{list-style:none;padding:0;margin:26px 0 0;max-width:34ch}
.kwk-seite .mitbringen li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line);font-size:15px;
}
.kwk-seite .mitbringen li:last-child{border-bottom:1px solid var(--line)}
.kwk-seite .mitbringen .nr{font-size:12px;font-weight:600;color:var(--sage-dark);font-variant-numeric:tabular-nums}
.kwk-seite .mitbringen strong{color:var(--ink);font-weight:600}

/* ── Variante B: der Rechner in einem eigenen Band unter der Buehne ─────── */
.kwk-seite .werkzeug-abschnitt{background:var(--band);padding-block:clamp(34px,4.4vw,60px);border-bottom:1px solid var(--line)}
.kwk-seite .werkzeug-mitte{max-width:720px;margin:0 auto}

/* ── Befundliste: mehrere Werte gegen ihre Referenz ─────────────────────── */
.kwk-seite .einheit-hinweis{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-soft);margin-left:8px}
.kwk-seite .befundliste{list-style:none;padding:0;margin:16px 0 0}
.kwk-seite .befundliste li{
  display:grid;grid-template-columns:1fr auto auto;gap:8px 16px;align-items:baseline;
  background:var(--white);border:1px solid var(--line);border-left-width:3px;border-radius:0 9px 9px 0;
  padding:11px 14px;margin-bottom:7px;font-size:14.5px;
}
.kwk-seite .befundliste li.drin{border-left-color:var(--sage)}
.kwk-seite .befundliste li.unten{border-left-color:var(--rosa)}
.kwk-seite .befundliste b{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.kwk-seite .befundliste i{font-style:normal;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:8.5rem;text-align:right}


/* ==========================================================================
   RATGEBERARTIKEL: den Rahmen der Beitragsvorlage aufheben
   --------------------------------------------------------------------------
   Stand 31.08.2026, Pilot /vitamin-d-und-kinderwunsch/.

   Die Oxygen-BEITRAGSvorlage (Template 307) baut um jeden Beitrag einen
   Rahmen, den die Seitenvorlage nicht kennt: ein Titelbild in voller Breite
   mit Datum und eigener H1, darunter eine Ruecksprung-Zeile, und den Beitrag
   selbst in einer schmalen Spalte auf grauem Grund. Fuer eine kwk-seite ist
   das dreifach falsch: die H1 kommt doppelt, das Titelbild wiederholt die
   Buehne, und die Spalte schnuert eine Vorlage ein, die auf volle Breite
   gebaut ist.

   Deshalb hier: der Rahmen wird abgeraeumt, nicht die Vorlage angepasst.
   Greift nur, wo BEIDES zutrifft - body.kwk-vorlage (setzt das mu-plugin nur
   bei kwk-seite im Inhalt) und die ID aus der Beitragsvorlage. Behandlungs-
   seiten haben diese IDs nicht und bleiben unberuehrt.

   Die IDs sind Oxygen-Vorlagen-IDs. Wird die Beitragsvorlage im Builder neu
   gebaut, aendern sie sich und dieser Block muss nachgezogen werden.
   ========================================================================== */

/* Titelbild mit Datum und der zweiten H1 */
body.kwk-vorlage #section-2-307 { display: none !important; }

/* Ruecksprung-Zeile - die Brotkrume der Buehne leistet dasselbe */
body.kwk-vorlage #div_block-87-307 { display: none !important; }

/* Die schmale Spalte auf grauem Grund oeffnen */
body.kwk-vorlage #section-286-307,
body.kwk-vorlage #section-286-307 > .ct-section-inner-wrap,
body.kwk-vorlage #text_block-288-307,
body.kwk-vorlage #span-289-307 {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Der graue Grund hinter der Spalte */
body.kwk-vorlage #section-286-307 { background-color: var(--paper, #FBFCFA) !important; }

/* Der Beitragstext erbt in dieser Vorlage Schrift und Zeilenbreite vom Theme.
   Innerhalb von .kwk-seite gilt das Blatt, aussen bleibt alles wie es war. */
body.kwk-vorlage #span-289-307 > .kwk-seite { max-width: none; }

/* Der Termin-Block, den die Beitragsvorlage unter JEDEN Artikel haengt
   ("Jetzt Termin vereinbaren!"). Die Vorlage bringt ihren eigenen
   Schluss-Abschnitt mit, sonst steht die Aufforderung zweimal untereinander.
   Der Abschnitt "Weitere News" darunter (#section-13-307) BLEIBT: er fuehrt zu
   Inhalten statt zu einer Buchung und ist damit genau die Weiterfuehrung, die
   eine Ratgeberseite braucht. */
body.kwk-vorlage #section-291-307 { display: none !important; }


/* ==========================================================================
   RATGEBERARTIKEL: Zeilenlaenge des Fliesstextes
   --------------------------------------------------------------------------
   Stand 31.08.2026. Die Vorlage begrenzt .lead (58ch), .punkte (60ch) und
   .merke (56ch), aber nicht den gewoehnlichen Absatz. Der laeuft dadurch ueber
   die volle Spalte, gemessen rund 113 Zeichen je Zeile bei 1600 px Fenster.
   Empfohlen sind 55 bis 75; darueber verliert das Auge beim Zeilenwechsel den
   Anfang. Auf Behandlungsseiten faellt das kaum auf, weil dort Schritte,
   Listen und Kaesten ueberwiegen, die alle begrenzt sind. Ein Ratgeber ist
   Fliesstext, dort tritt es offen zutage.

   Bewusst nur fuer Ratgeberartikel gesetzt (body.kwk-vorlage plus die
   Beitragsvorlagen-ID im selben Block weiter oben waere zu eng, deshalb hier
   ueber die Kombination mit .etappe). Die zwanzig freigegebenen
   Behandlungsseiten bleiben unveraendert, bis das jemand ausdruecklich will.
   ========================================================================== */

body.kwk-ratgeber .kwk-seite .etappe .auf > p:not(.unter):not(.lead) { max-width: 66ch; }
body.kwk-ratgeber .kwk-seite .etappe .auf > h3 { max-width: 40ch; }

/* Die Kurzantwort unter der Ueberschrift traegt groessere Schrift und lief mit
   rund 104 Zeichen am weitesten. Sie bleibt die breiteste Zeile der Seite,
   aber in lesbarem Rahmen. */
body.kwk-ratgeber .kwk-seite .etappe .unter { max-width: 72ch; }


/* ==========================================================================
   DIESELBE BEGRENZUNG FUER DIE UEBRIGEN SEITEN DER VORLAGE
   --------------------------------------------------------------------------
   Nachgetragen am 15.09.2026 auf Romans ausdrueckliche Entscheidung. Der Block
   darueber endet mit dem Satz "Die zwanzig freigegebenen Behandlungsseiten
   bleiben unveraendert, bis das jemand ausdruecklich will". Das ist jetzt der
   Fall.

   Anlass: Beim Livegang der zwoelf Lexikonseiten am 14.09.2026 hat
   scripts/seite_pruefen.py die Zeilenlaenge als Befund gemeldet. Am gerenderten
   Text nachgemessen, 1440 px Fenster: Der Vorspann jedes Abschnitts liegt bei
   517 px (rund 61 Zeichen und damit richtig), der gewoehnliche Absatz bei
   970 px, also rund 130 bis 140 Zeichen. Derselbe Befund auf der aelteren Seite
   /lexikon/amh-wert/ - es liegt an der Vorlage, nicht an den neuen Seiten.

   Die Werte sind unveraendert aus dem Ratgeber-Block uebernommen, der seit dem
   31.08.2026 in Betrieb ist. Damit gelten sie jetzt einheitlich; die drei
   Regeln oben sind dadurch redundant, bleiben aber stehen, weil sie
   freigegeben sind und dasselbe Ergebnis liefern.

   Der Nachkomme-Selektor ">" ist Absicht: Er trifft nur Absaetze, die direkt
   in .auf stehen. Absaetze in Verweiskarten, Zwischenrufen und Kaesten haben
   ihre eigene Breite und bleiben unberuehrt.
   ========================================================================== */

.kwk-seite .etappe .auf > p:not(.unter):not(.lead) { max-width: 66ch; }
.kwk-seite .etappe .auf > h3 { max-width: 40ch; }
.kwk-seite .etappe .unter { max-width: 72ch; }


/* ==========================================================================
   RATGEBERARTIKEL: Nummer und Ueberschrift eines Schritts auf eine Grundlinie
   --------------------------------------------------------------------------
   Stand 31.08.2026. Der Schritt ist ein Raster aus zwei Spalten, aber ohne
   Ausrichtung: Die Marke ("01") traegt bis 27 px, die Ueberschrift 17 px, und
   die h3 behaelt zusaetzlich ihren Standardabstand nach oben. Dadurch steht
   die Zahl deutlich hoeher als der Text daneben, und es entsteht die Luecke.

   Die nummerierte Aufzaehlung (.punkte) loest das im selben Blatt bereits mit
   align-items:baseline. Hier wurde es vergessen; das ist also keine
   Design-Entscheidung, die hier umgestossen wird, sondern die Angleichung an
   das vorhandene Muster.

   Vorerst nur fuer Ratgeberartikel, damit die zwanzig freigegebenen
   Behandlungsseiten unberuehrt bleiben. Sie tragen denselben Fehler und
   sollten ihn irgendwann mitbekommen.
   ========================================================================== */

body.kwk-ratgeber .kwk-seite .schritt { align-items: baseline; }
body.kwk-ratgeber .kwk-seite .schritt h3 { margin-top: 0; }


/* Quellenblock: dieselbe Aufklapp-Optik wie die Fragen, aber EIGENE Klasse.
   Grund: Das mu-plugin zieht sein FAQPage-Schema aus <details class="frage-block">.
   Die Quellen sind keine Fragen und duerfen dort nicht hineingeraten. */
.kwk-seite .quellen-block .punkte { margin-top: 0; padding-bottom: 20px; }
.kwk-seite .quellen-block .punkte li { font-size: 15px; }


/* Bewertungs-Widget, vom mu-plugin vor den Abschluss geholt. Es soll wie ein
   Teil der Seite wirken, nicht wie ein angeklebter Fremdkoerper: gleiche
   Spaltenbreite, ruhige Trennlinie, kein eigener Hintergrund. */
.kwk-seite .bewertung { margin: 8px 0 0; padding: 20px 0 34px; }
.kwk-seite .bewertung .pld-like-dislike-wrap { display: flex; align-items: center; gap: 10px; margin: 0; }
.kwk-seite .bewertung .pld-like-wrap { display: flex; align-items: center; gap: 8px; }
.kwk-seite .bewertung .pld-like-trigger { color: var(--sage-dark); text-decoration: none; font-size: 18px; }
.kwk-seite .bewertung .pld-like-trigger:hover { color: var(--rosa-deep); }
.kwk-seite .bewertung .pld-count-wrap { color: var(--ink-soft); font-size: 15px; }


/* ==========================================================================
   EVIDENZ-UEBERSICHT (Ratgeberartikel)
   --------------------------------------------------------------------------
   Ein wiederkehrendes Muster bei Studienartikeln: vier bis fuenf Situationen,
   je eine Zeile, und was die Studien dazu hergeben. Steht als Ueberblick VOR
   den ausfuehrlichen Abschnitten, damit wer scannt die Kernaussage mitnimmt.

   BEWUSST KEINE AMPELFARBEN. Gruen und Rot lesen sich als Empfehlung und
   Warnung; hier geht es um Studienlage, nicht um Rat. Unterschieden wird
   allein ueber das Wort und eine zurueckhaltende Markierung.

   Die Zahlen stehen als HTML-Text, nie in einem generierten Bild
   (GRAFIK-STANDARD Abschnitt 3, goldene Regel).
   ========================================================================== */

.kwk-seite .evidenz { margin: 28px 0 8px; max-width: 68ch; }
.kwk-seite .evidenz-zeile { display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 15px 0 15px 16px; border-top: 1px solid var(--line);
  border-left: 2px solid var(--line); }
.kwk-seite .evidenz-zeile:last-child { border-bottom: 1px solid var(--line); }
.kwk-seite .evidenz-zeile--hinweis { border-left-color: var(--sage-dark); }
.kwk-seite .evidenz-zeile--offen { border-left-color: var(--line); }
.kwk-seite .evidenz-zeile b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.kwk-seite .evidenz-zeile span { font-size: 15px; color: var(--ink-body); }
.kwk-seite .evidenz-zeile em { font-style: normal; color: var(--sage-darker); font-weight: 500; }
@media (min-width: 700px) {
  .kwk-seite .evidenz-zeile { grid-template-columns: 15ch 1fr; gap: 18px; align-items: baseline; }
}


/* ==========================================================================
   BILDUNGSWEG MIT SYMBOLEN (Ratgeberartikel)
   --------------------------------------------------------------------------
   Vier Stationen mit Symbol, Nummer und Erklaertext. Loest die erzeugte
   Bilddatei ab: Die Symbole stammen aus derselben Grafik, aber Beschriftung
   und Text sind hier echter Text - durchsuchbar, vorlesbar, korrigierbar,
   und auf dem Telefon rutschen die Stationen untereinander statt zu
   schrumpfen. Der im GRAFIK-STANDARD Abschnitt 3 vorgesehene Hybrid.
   ========================================================================== */

.kwk-seite .weg-icons{list-style:none;padding:0;margin:26px 0 8px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 14px}
.kwk-seite .weg-icons li{position:relative;font-size:15px;color:var(--ink);
  font-weight:600;line-height:1.35}
.kwk-seite .weg-icons .bild{height:92px;display:flex;align-items:flex-end;
  justify-content:center;margin-bottom:14px}
.kwk-seite .weg-icons .bild img{max-height:88px;width:auto;display:block;margin:0}
.kwk-seite .weg-icons li::after{content:"";position:absolute;top:44px;
  left:calc(50% + 58px);right:-14px;height:2px;background:var(--line)}
.kwk-seite .weg-icons li:last-child::after{display:none}
.kwk-seite .weg-icons .nr{display:block;font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--sage-dark);margin-bottom:2px}
.kwk-seite .weg-icons .txt{display:block;font-weight:400;font-size:13px;
  color:var(--ink-soft);margin-top:5px}

/* Jahresverlauf: das SVG bringt alles mit, hier nur Rahmen und Legende. */
.kwk-seite .jahrgrafik{margin:26px 0 8px;max-width:70ch}
.kwk-seite .jahrgrafik svg{width:100%;height:auto;display:block}
.kwk-seite .jahr-legende{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px;
  font-size:13px;color:var(--ink-soft)}
.kwk-seite .jahr-legende span{display:flex;align-items:center;gap:7px}
.kwk-seite .jahr-legende i{width:13px;height:13px;border-radius:3px;display:inline-block}
/* Auf dem Telefon darf die Jahresgrafik NICHT die Seite aufspannen.
   Fehler vom 31.08.2026: Die Mindestbreite von 520 px sass am SVG, das
   Scrollen aber an .jahrgrafik - die umgebende figure.abbildung fing nichts
   ab und wurde mitgedehnt. Ergebnis: Die ganze Seite war 570 statt 390 px
   breit, das Telefon zoomte heraus, und alles wirkte gedraengt. Deshalb
   scrollt jetzt die ABBILDUNG, und das SVG darf schrumpfen. */
@media(max-width:700px){
  /* Die Obergrenze von 660 px greift auf dem Telefon nicht, weil der Bildschirm
     schmaler ist. Ohne 100 Prozent waechst die Box mit ihrem Inhalt und spannt
     die Seite auf. Das !important ist noetig, weil die Grundregel es ebenfalls
     traegt. */
  .kwk-seite figure.abbildung{max-width:100%!important;overflow-x:auto;
    -webkit-overflow-scrolling:touch}
  /* KEINE Mindestbreite. Jeder Versuch, dem SVG auf dem Telefon eine
     Mindestbreite zu geben, hat die Seite aufgespannt: erst 570 px, dann 490,
     dann 470. Das SVG hat eine viewBox und skaliert sauber; die Beschriftung
     wird kleiner, aber die Seite bleibt heil. Lesbarkeit vor Detailtreue. */
  .kwk-seite .jahrgrafik{overflow-x:visible;max-width:100%}
  .kwk-seite .jahrgrafik svg{min-width:0;width:100%}
  /* Zwei Kacheln je Zeile statt drei, sonst wird jede zu schmal fuer ihr Wort. */
  .kwk-seite .weg-icons{grid-template-columns:repeat(2,1fr);gap:20px 10px}
  .kwk-seite .weg-icons li::after{display:none}
}


/* ==========================================================================
   ABBILDUNG (Ratgeberartikel)
   --------------------------------------------------------------------------
   Fassung fuer jede Grafik im Fliesstext. Ohne sie steht eine Grafik
   unvermittelt zwischen zwei Absaetzen und wirkt hineingeworfen; die Musterdatei
   loest das seit jeher mit weissem Kasten und Bildunterschrift.

   Aufbau:  figure.abbildung > .abb-kopf? + .abb-flaeche + figcaption
   Die Bildunterschrift ist PFLICHT und traegt eine inhaltliche Aussage, nicht
   die Wiederholung der Ueberschrift. Sie ist fuer viele Leser der einzige Text,
   den sie an einer Grafik lesen.
   ========================================================================== */

.kwk-seite figure.abbildung{margin:30px 0 8px;max-width:660px;font-size:17px;background:#fff;
  border:1px solid var(--line);border-radius:8px;
  padding:20px clamp(14px,2.5vw,26px) 18px}
.kwk-seite .abbildung .abb-kopf{font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sage-dark);display:block;margin-bottom:14px}
.kwk-seite .abbildung img{display:block;margin:0}
.kwk-seite .abbildung figcaption{font-size:13.5px;color:var(--ink-soft);line-height:1.5;
  margin-top:16px;padding-left:12px;border-left:2px solid var(--sage)}
.kwk-seite .abbildung figcaption b{color:var(--ink);font-weight:600}

/* Die Symbolreihe und der Jahresverlauf sitzen jetzt IN der Abbildung und
   brauchen dort keinen eigenen Aussenabstand mehr. */
.kwk-seite .abbildung .weg-icons{margin:4px 0 0}
.kwk-seite .abbildung .jahrgrafik{margin:0;max-width:none}
.kwk-seite .abbildung > img{width:100%;height:auto;border-radius:4px}


/* Nachtrag 31.08.2026: Die dritte Abbildung bekam trotz gleicher Klasse
   max-width:none. Woher die Ueberschreibung kommt, liess sich nicht zweifelsfrei
   zuordnen (Critical-CSS oder eine Perf-Regel kommen infrage). Statt weiter zu
   suchen hier der harte Wert - er betrifft ausschliesslich Abbildungen in
   Ratgeberartikeln und kann nichts anderes stoeren. */

/* Die Abbildungsbreite wird oben bei .kwk-seite figure.abbildung gesetzt.
   Der Umweg ueber einen entkoppelten Selektor vom 31.08. ist entfallen: Er war
   noetig, weil eine falsch geschachtelte figure die dritte Abbildung aus dem
   Container geloest hatte. Das war ein Fehler im Seitenquelltext, kein
   CSS-Problem, und ist behoben. */


/* ==========================================================================
   RATGEBERARTIKEL: Luft um die Zwischenueberschriften im Fliesstext
   --------------------------------------------------------------------------
   Stand 31.08.2026, Roman: "Nach 'Und nach einer IVF?' finde ich das sehr
   gedraengt. Das ist mir schon bei einigen Artikeln aufgefallen."

   Ursache: h1/h2/h3 tragen margin:0 (Zeile 81), Absaetze nur einen Abstand
   nach UNTEN (1.1em, Zeile 83). Zwischen einer h3 und dem Absatz darunter
   steht damit gar nichts, waehrend darueber 1.1em Luft ist. Die Ueberschrift
   klebt am eigenen Text und sieht aus, als gehoerte sie zum Absatz davor.

   Nur die h3, die direktes Kind von .auf ist, also die Zwischenueberschrift im
   Fliesstext. Die h3 in .schritt und .wege behalten ihre eigenen, engeren
   Abstaende: dort ist die Naehe gewollt, weil Ueberschrift und Text ein Paar
   bilden.

   KORREKTUR 31.08.2026 (Fund von projekte-8a): Der Block hing zuerst an
   body.kwk-vorlage. Diese Klasse setzt das mu-plugin auf JEDER Seite mit
   kwk-seite-Wrapper, also auch auf /kosten/ (4 h3) und /erstgespraech/ (8 h3),
   die live laufen. Der Kommentar "vorerst nur fuer Ratgeberartikel" war damit
   schlicht falsch. Jetzt an body.kwk-ratgeber, das nur bei is_singular('post')
   gesetzt wird. Die Behandlungs- und Kostenseiten tragen denselben Mangel und
   bekommen ihn auf ausdrueckliche Ansage mit, nicht nebenbei.
   ========================================================================== */

body.kwk-ratgeber .kwk-seite .etappe .auf > h3 { margin-top: 2em; margin-bottom: .6em; }
body.kwk-ratgeber .kwk-seite .etappe .auf > h3:first-child { margin-top: 0; }


/* Nachtrag 31.08.2026, nach einem Hinweis aus der Parallelsitzung:
   Die beiden Layoutkorrekturen oben (Zeilenlaenge, Grundlinie im Schritt) hingen
   zuerst an body.kwk-vorlage. Das war zu weit gefasst. kwk-vorlage sitzt auf
   JEDER Seite mit kwk-seite im Inhalt, und das sind live bereits /kosten/ und
   /erstgespraech/ - beide haetten ein veraendertes Schriftbild bekommen, ohne
   dass es jemand beabsichtigt hat. Sie haengen jetzt an kwk-ratgeber, das das
   mu-plugin nur bei is_singular('post') setzt.
   Die Bloecke mit Oxygen-IDs (-307) bleiben an kwk-vorlage: Diese IDs gibt es
   nur in der Beitragsvorlage, dort laufen sie ohnehin ins Leere. */


/* ==========================================================================
   RECHTSSEITEN, VISUELLES FORMAT (Nachtrag 04.09.2026, projekte-0f)
   Konzept: kwk-homepage/KONZEPT-RECHTSSEITEN-VISUELL-2026-09-04.md
   Roman: Gesetzestexte kuerzer, mit Icons, grafisch; Auszuege mit "...",
   Link zum RIS. Sieben Bausteine, alle an .kwk-seite gehaengt, damit sie
   nirgends sonst greifen. Farben nur aus den Tokens oben (Salbei erlaubt,
   Pruefgelb bedingt, Altrosa nicht zulaessig). Icons als Inline-SVG-Sprite
   im Seiteninhalt, kein Nachladen.
   ========================================================================== */

/* Status-Chips in der Buehne */
.kwk-seite .recht-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.kwk-seite .chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:5px 12px;border-radius:999px;background:var(--white);border:1px solid var(--line);color:var(--ink);line-height:1.3}
.kwk-seite .chip svg{width:15px;height:15px;flex:none}
.kwk-seite .chip--ja{background:var(--sage-pale);border-color:var(--sage)}
.kwk-seite .chip--nein{background:var(--rosa-pale);border-color:var(--rosa)}
.kwk-seite .chip--bedingt{background:var(--pruef-bg);border-color:#E7D48E}

/* Auf einen Blick: Kacheln mit Icon */
.kwk-seite .recht-blick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 0}
.kwk-seite .recht-blick>div{display:flex;gap:14px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kwk-seite .recht-blick .ico{flex:none;width:40px;height:40px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--sage-pale);color:var(--sage-darker)}
.kwk-seite .recht-blick .ico svg{width:22px;height:22px}
.kwk-seite .recht-blick .ico--nein{background:var(--rosa-pale);color:var(--rosa-dark)}
.kwk-seite .recht-blick .ico--bedingt{background:var(--pruef-bg);color:#8A6D1B}
.kwk-seite .recht-blick strong{display:block;color:var(--ink);font-size:17px;line-height:1.3}
.kwk-seite .recht-blick span.txt{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:3px}

/* Kennzahl-Kacheln groesser (Variante von .werte-reihe) */
.kwk-seite .werte-reihe--gross dd{font-size:26px;line-height:1.1}
.kwk-seite .werte-reihe--gross small{font-size:12px;margin-top:4px}

/* Stationenreihe mit Icon statt Bild (Variante von .weg-icons) */
.kwk-seite .weg-icons--ico{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.kwk-seite .weg-icons--ico li{background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:12px 10px;font-size:13.5px;line-height:1.35;text-align:center}
.kwk-seite .weg-icons--ico .ico{display:flex;justify-content:center;margin-bottom:8px;color:var(--sage-darker)}
.kwk-seite .weg-icons--ico .ico svg{width:26px;height:26px}
.kwk-seite .weg-icons--ico strong{display:block;font-size:14px;margin-bottom:3px;color:var(--ink)}
.kwk-seite .weg-icons--ico .txt{display:block;color:var(--ink-soft);font-size:12.5px}
.kwk-seite .weg-icons--ico li+li::before{content:"";position:absolute;left:-8px;top:50%;width:8px;height:1px;background:var(--sage)}
.kwk-seite .weg-icons--ico li::after{display:none}

/* Gesetzesauszug mit RIS-Knopf */
.kwk-seite .gesetz-auszug{display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:start;
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--rosa);
  border-radius:0 12px 12px 0;padding:16px 20px;margin:14px 0 0;max-width:none}
.kwk-seite .gesetz-auszug .label{margin-bottom:6px}
.kwk-seite .gesetz-auszug p{margin:0;font-size:16px;color:var(--ink-body)}
.kwk-seite .gesetz-auszug b{color:var(--ink);font-weight:600}
.kwk-seite .ris{grid-row:1/3;align-self:center;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--sage-darker);text-decoration:none;border:1px solid var(--sage);
  border-radius:999px;padding:7px 12px;background:var(--sage-pale)}
.kwk-seite .ris:hover{background:var(--sage);color:var(--ink)}
.kwk-seite .ris svg{width:14px;height:14px}
/* Chip-Leiste der Rechtsseiten: NUR div.punkte. ol.punkte ist die nummerierte
   Liste der Behandlungsseiten - 09.09.2026 lief die Regel dort hinein (13 px,
   Pillenhintergrund auf allen Aufzaehlungen, live gesehen von Roman). */
.kwk-seite div.punkte{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.kwk-seite div.punkte span{font-size:13px;background:var(--band);border-radius:999px;padding:4px 10px;color:var(--ink)}

/* Graubereich-Karten */
.kwk-seite .grau-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 0}
.kwk-seite .grau-karte{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  display:grid;grid-template-columns:34px 1fr;gap:12px}
.kwk-seite .grau-karte .ico{width:34px;height:34px;border-radius:50%;background:var(--pruef-bg);color:#8A6D1B;
  display:inline-flex;align-items:center;justify-content:center}
.kwk-seite .grau-karte .ico svg{width:19px;height:19px}
.kwk-seite .grau-karte strong{display:block;color:var(--ink);font-size:16px;line-height:1.3;margin-bottom:4px}
.kwk-seite .grau-karte p{font-size:14.5px;margin:0 0 8px;color:var(--ink-soft)}
.kwk-seite .badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#8A6D1B;background:var(--pruef-bg);border-radius:999px;padding:3px 9px}

@media (max-width:720px){
  .kwk-seite .recht-blick,.kwk-seite .grau-karten{grid-template-columns:1fr}
  .kwk-seite .weg-icons--ico{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kwk-seite .weg-icons--ico li+li::before{display:none}
  .kwk-seite .gesetz-auszug{grid-template-columns:1fr}
  .kwk-seite .ris{grid-row:auto;justify-self:start}
}

/* --- Team-Hub /team/ ------------------------------------------------------
   Exakte Kopie der Live-Optik, am ausgelieferten Bestand gemessen (11.09.2026):
   drei Spalten, Portraits in ihrer eigenen Form (die PNGs tragen transparente
   Ecken, deshalb KEIN border-radius und KEIN object-fit), darunter eine weisse
   Karte mit 20px Radius und weichem Schatten. Namen in Signika 20px Salbeigruen,
   Rollen 18px Anthrazit, alles zentriert. Additiv, keine bestehende Regel beruehrt. */
.kwk-seite .team-band{background:var(--sage);padding:clamp(30px,4.5vw,58px) 0}
/* Anthrazit statt Weiss (16.09.2026, gemessen): Weiss auf Salbeigruen ergab
   1,78:1, noetig sind 3:1 fuer grosse Schrift. PRUEFKATALOG §5.2 und DESIGN.md
   sagen beide: Salbeigruen traegt keine weisse Schrift, Text darauf in Anthrazit.
   Die Regel stammte aus der Live-Kopie und ist mit ihr in den Nachbau gewandert.
   Betrifft nur team-inhalt.html und team-varianten-inhalt.html. */
.kwk-seite .team-band h1{margin:0;text-align:center;color:var(--ink);font-weight:600;
  font-size:clamp(26px,3vw,38px);letter-spacing:-.005em}

.kwk-seite .team-einleitung{padding:clamp(38px,5vw,70px) 0 clamp(18px,2.5vw,30px)}
.kwk-seite .team-einleitung h2{margin:0 0 20px;text-align:center;font-weight:500;
  color:#898989;font-size:clamp(28px,3.6vw,50px);line-height:1.16}
/* 62ch statt 920px (16.09.2026, gemessen): 920px trugen bei 17px rund 108 Zeichen
   je Zeile, PRUEFKATALOG §4.4 verlangt 65 bis 75. */
.kwk-seite .team-einleitung p{margin:0 auto 12px;max-width:min(920px,62ch);
  text-align:center;color:var(--ink-body);text-wrap:pretty}

/* Abschluss der Team-Seite. Die Klasse wurde am 16.09.2026 im Markup eingefuehrt,
   ohne dass es Regeln dafuer gab - der Absatz lief dadurch ueber die volle
   Seitenbreite und trug 133 Zeichen je Zeile (§4.4). */
.kwk-seite .team-abschluss{padding:clamp(34px,5vw,64px) 0 clamp(44px,6vw,80px)}
.kwk-seite .team-abschluss p{margin:0 auto 22px;max-width:min(920px,62ch);
  text-align:center;color:var(--ink-body);text-wrap:pretty}
.kwk-seite .team-abschluss .aktion{display:flex;flex-wrap:wrap;gap:14px 22px;
  align-items:center;justify-content:center}

.kwk-seite .team-verzeichnis{padding:clamp(16px,2.5vw,28px) 0 clamp(40px,6vw,70px)}
.kwk-seite .team-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,44px);margin:0}
.kwk-seite .team-kachel{display:flex;flex-direction:column}
.kwk-seite .team-kachel img{display:block;width:100%;height:auto;margin:0}
.kwk-seite .team-karte{background:var(--white);border-radius:20px;
  box-shadow:0 20px 40px rgba(0,0,0,.1);padding:20px 26px 22px;text-align:center}
.kwk-seite .team-karte strong{display:block;font-family:Signika,inherit;font-size:20px;
  font-weight:500;color:var(--sage);line-height:1.25;margin:0 0 6px}
.kwk-seite .team-karte span{display:block;font-family:Signika,inherit;font-size:18px;
  color:#3B3C38;line-height:1.4}
.kwk-seite .team-karte span+span{margin-top:6px;font-size:15.5px;color:var(--ink-soft)}
.kwk-seite .team-karte .btn{margin-top:14px}
.kwk-seite .team-verzeichnis .merke{margin-top:clamp(28px,4vw,48px)}

@media (max-width:900px){
  .kwk-seite .team-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:620px){
  .kwk-seite .team-raster{grid-template-columns:1fr;gap:26px;max-width:420px;margin:0 auto}
  .kwk-seite .team-karte{padding:18px 22px 20px}
}

/* --- Team-Hub, Varianten B und C ------------------------------------------
   Modifier auf dem Raster aus Variante A. Nur fuer das Vergleichsblatt und
   fuer die Variante, die Roman waehlt - was nicht gewaehlt wird, fliegt raus. */

/* B: Bild und Text in EINER Karte, nach Bereichen geordnet */
.kwk-seite .team-gruppe{margin:clamp(30px,4vw,52px) 0 16px;text-align:center;
  font-family:Signika,inherit;font-size:clamp(19px,2vw,23px);font-weight:500;
  color:var(--sage-dark)}
.kwk-seite .team-gruppe:first-child{margin-top:0}
.kwk-seite .team-raster--eins .team-kachel{background:var(--white);border-radius:20px;
  overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.07);text-decoration:none;color:inherit;
  transition:box-shadow .2s ease,transform .2s ease}
.kwk-seite a.team-kachel:hover,.kwk-seite a.team-kachel:focus-visible{
  box-shadow:0 16px 34px rgba(0,0,0,.12);transform:translateY(-3px)}
/* Weiss, nicht Salbei: die Portraits haben transparente Ecken, ein farbiger
   Grund zeichnet die Blobform als grueneckigen Rahmen nach. */
.kwk-seite .team-raster--eins .team-kachel img{background:var(--white)}
.kwk-seite .team-raster--eins .team-karte{background:none;border-radius:0;box-shadow:none;
  padding:14px 22px 22px}

/* C: ein Satz je Person, Bild und Text nebeneinander */
.kwk-seite .team-raster--satz{grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px)}
.kwk-seite .team-zeile{display:grid;grid-template-columns:clamp(112px,13vw,168px) minmax(0,1fr);
  gap:clamp(14px,2vw,24px);align-items:center;background:var(--white);border-radius:20px;
  padding:clamp(14px,1.8vw,20px);box-shadow:0 10px 26px rgba(0,0,0,.07);
  text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease}
.kwk-seite a.team-zeile:hover,.kwk-seite a.team-zeile:focus-visible{
  box-shadow:0 16px 34px rgba(0,0,0,.12);transform:translateY(-3px)}
.kwk-seite .team-zeile img{display:block;width:100%;height:auto}
.kwk-seite .team-text strong{display:block;font-family:Signika,inherit;font-size:18px;
  font-weight:500;color:var(--sage-dark);line-height:1.25}
.kwk-seite .team-rolle{display:block;font-size:14.5px;color:var(--ink-soft);margin:2px 0 8px}
.kwk-seite .team-text p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-body)}
.kwk-seite .team-mehr{display:inline-block;margin-top:10px;font-size:14.5px;
  color:var(--cta);border-bottom:1px solid currentColor;padding-bottom:1px}

/* Rahmen des Vergleichsblatts */
.kwk-seite .team-variante{padding:clamp(30px,4.5vw,56px) 0;border-top:1px solid var(--line)}
.kwk-seite .team-variante:first-of-type{border-top:0}
.kwk-seite .team-vkopf{margin:0 0 14px;font-size:clamp(23px,2.6vw,31px);font-weight:500}
.kwk-seite .team-vkopf span{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-right:10px;border-radius:50%;background:var(--sage);
  color:var(--white);font-size:19px;vertical-align:middle}
.kwk-seite .team-variante .merke{margin:0 0 clamp(20px,3vw,32px)}

@media (max-width:900px){
  .kwk-seite .team-raster--satz{grid-template-columns:1fr}
}
@media (max-width:620px){
  .kwk-seite .team-raster--eins{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .kwk-seite .team-zeile{grid-template-columns:96px minmax(0,1fr)}
}

/* --- Team-Hub, Varianten D bis G ------------------------------------------
   Vier weitere Darstellungen fuer das Vergleichsblatt. Was nicht gewaehlt wird,
   fliegt raus - es bleibt EINE Variante im Blatt. */

/* D: redaktionell, Bild im Wechsel links und rechts */
.kwk-seite .team-blaetter{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px)}
.kwk-seite .team-blatt{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:clamp(20px,4vw,52px);align-items:center}
.kwk-seite .team-blatt--rechts .team-blatt-bild{order:2}
.kwk-seite .team-blatt-bild img{display:block;width:100%;height:auto}
.kwk-seite .team-blatt-text h3{margin:4px 0 10px;font-family:Signika,inherit;
  font-size:clamp(21px,2.4vw,29px);font-weight:500;color:var(--ink);line-height:1.2}
.kwk-seite .team-blatt-text p{margin:0;font-size:16.5px;line-height:1.6;
  color:var(--ink-body);max-width:56ch}
.kwk-seite .team-blatt-text .btn{margin-top:14px}

/* E: kompaktes Raster. Name und Rolle stehen IMMER unter dem Portrait, nur der
   Satz klappt beim Ueberfahren auf. Ein Schleier ueber dem ganzen Bild schied aus:
   er ist rechteckig und zeichnet die transparenten Blob-Ecken als Kasten nach. */
.kwk-seite .team-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px)}
.kwk-seite .team-feld{display:block;text-decoration:none;color:inherit;text-align:center}
.kwk-seite .team-feld img{display:block;width:100%;height:auto;background:var(--white);
  transition:transform .22s ease}
.kwk-seite a.team-feld:hover img,.kwk-seite a.team-feld:focus-visible img{
  transform:translateY(-3px)}
.kwk-seite .team-schleier strong{display:block;font-family:Signika,inherit;font-size:16.5px;
  font-weight:500;color:var(--sage-dark);line-height:1.25;margin-top:8px}
.kwk-seite .team-schleier span{display:block;font-size:14px;color:var(--ink-soft);margin-top:1px}
.kwk-seite .team-schleier p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-body);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease,opacity .3s ease,margin .3s ease}
.kwk-seite .team-feld:hover .team-schleier p,
.kwk-seite .team-feld:focus-visible .team-schleier p{max-height:9em;opacity:1;margin-top:7px}
/* Ohne Zeigegeraet, auf Touch und bei Bewegungsempfindlichkeit: dauerhaft offen */
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .kwk-seite .team-schleier p{max-height:none;opacity:1;margin-top:7px;transition:none}
}

/* F: Bento, ungleich grosse Kacheln */
.kwk-seite .team-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px)}
.kwk-seite .team-bento-kachel{display:flex;flex-direction:column;overflow:hidden;
  border-radius:20px;background:var(--white);box-shadow:0 10px 26px rgba(0,0,0,.07);
  text-decoration:none;color:inherit;transition:box-shadow .2s ease,transform .2s ease}
.kwk-seite a.team-bento-kachel:hover,.kwk-seite a.team-bento-kachel:focus-visible{
  box-shadow:0 16px 34px rgba(0,0,0,.12);transform:translateY(-3px)}
.kwk-seite .team-bento-kachel--gross{grid-column:span 2;grid-row:span 2}
.kwk-seite .team-bento-kachel img{display:block;width:100%;height:auto;background:var(--white)}
.kwk-seite .team-bento-text{padding:12px 18px 18px}
.kwk-seite .team-bento-text strong{display:block;font-family:Signika,inherit;
  font-size:17px;font-weight:500;color:var(--sage-dark);line-height:1.25}
.kwk-seite .team-bento-kachel--gross .team-bento-text strong{font-size:22px}
.kwk-seite .team-bento-text span{display:block;font-size:14.5px;color:var(--ink-soft);
  margin-top:2px}
.kwk-seite .team-bento-text p{margin:10px 0 0;font-size:15.5px;line-height:1.55;
  color:var(--ink-body)}

/* G: nach dem Weg durch die Behandlung */
.kwk-seite .team-stationen{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px)}
.kwk-seite .team-station-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:16px;align-items:start;margin:0 0 18px}
.kwk-seite .team-nr{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--sage-pale);
  color:var(--sage-dark);font-family:Signika,inherit;font-size:17px;font-weight:500}
.kwk-seite .team-station-kopf h3{margin:0 0 3px;font-family:Signika,inherit;
  font-size:clamp(19px,2.1vw,24px);font-weight:500;color:var(--ink)}
.kwk-seite .team-station-kopf p{margin:0;font-size:15.5px;color:var(--ink-soft)}
/* Feste Portraitbreite statt vier Spalten: Stationen mit nur einer Person
   reissen sonst drei leere Spalten auf. */
.kwk-seite .team-personen{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,clamp(130px,15vw,200px)));
  justify-content:start;gap:clamp(14px,2vw,28px);padding-left:62px}
.kwk-seite .team-person{display:block;text-decoration:none;color:inherit;text-align:center}
.kwk-seite .team-person img{display:block;width:100%;height:auto;
  transition:transform .22s ease}
.kwk-seite a.team-person:hover img,.kwk-seite a.team-person:focus-visible img{
  transform:translateY(-3px)}
.kwk-seite .team-station-text strong{display:block;font-family:Signika,inherit;
  font-size:16.5px;font-weight:500;color:var(--sage-dark);line-height:1.25;margin-top:6px}
.kwk-seite .team-station-text span{display:block;font-size:14.5px;color:var(--ink-soft)}

@media (max-width:1000px){
  .kwk-seite .team-felder,.kwk-seite .team-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kwk-seite .team-personen{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:0}
}
@media (max-width:700px){
  .kwk-seite .team-blatt{grid-template-columns:1fr;gap:16px}
  .kwk-seite .team-blatt--rechts .team-blatt-bild{order:0}
  .kwk-seite .team-blatt-bild{max-width:300px}
  .kwk-seite .team-felder,.kwk-seite .team-bento,
  .kwk-seite .team-personen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kwk-seite .team-bento-kachel--gross{grid-column:span 2;grid-row:auto}
}

/* --- Team-Hub, Variante H: Fragen statt Kacheln ---------------------------
   Kein Raster, keine Karten, keine Schatten. Die Portraits tragen ihre eigene
   Form (transparente Ecken im PNG), der Text steht daneben. Die erste Person
   einer Station steht groesser: Rhythmus statt elf gleicher Flaechen.
   Geprueft gegen DESIGN.md: keine Uppercase-Eyebrows, keine 01/02/03, keine
   identischen Kartenraster, kein Cream, keine Em-Dashes. */
.kwk-seite .tf-fluss{display:flex;flex-direction:column;gap:clamp(44px,7vw,96px)}

.kwk-seite .tf{display:grid;grid-template-columns:minmax(0,31ch) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:start}
/* h2 mitgefasst (16.09.2026): Im Vergleichsblatt war jede Variante eine Sektion,
   die Fragen lagen deshalb eine Ebene tiefer. Auf der echten Seite ist die Frage
   die Sektionsueberschrift unter der einen H1, also ein h2 - und lief damit an
   dieser Regel vorbei auf die generische Ueberschriftengroesse. */
.kwk-seite .tf-frage h2,.kwk-seite .tf-frage h3{margin:0 0 10px;font-family:Signika,inherit;
  font-weight:600;font-size:clamp(20px,2.1vw,26px);line-height:1.22;letter-spacing:-.015em;
  color:var(--ink);text-wrap:balance}
.kwk-seite .tf-frage p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft);
  text-wrap:pretty}

/* Menschen: fliessend statt gerastert, damit einzelne Stationen nicht
   drei leere Spalten aufreissen. */
.kwk-seite .tf-leute{display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,28px)}
.kwk-seite .tp{flex:0 1 clamp(138px,14.5vw,174px);display:block;text-decoration:none;
  color:inherit}
.kwk-seite .tp--gross,.kwk-seite .tp--paar{flex-basis:clamp(178px,19vw,228px)}

/* Stationen mit nur einer Person (16.09.2026, gemessen): Ein einzelnes schmales
   Portraet liess 78 Prozent der Spalte leer - das las sich als Loch, nicht als
   Ruhe. Hier steht der Text deshalb neben dem Bild statt darunter. */
.kwk-seite .tp--allein{flex-basis:min(100%,560px);display:grid;
  grid-template-columns:clamp(160px,18vw,208px) minmax(0,1fr);
  gap:clamp(16px,2.2vw,26px);align-items:center}
.kwk-seite .tp--allein .tp-text strong{margin-top:0;font-size:20px}
.kwk-seite .tp--allein .tp-text p{max-width:42ch}
.kwk-seite .tp img{display:block;width:100%;height:auto;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.kwk-seite a.tp:hover img,.kwk-seite a.tp:focus-visible img{transform:translateY(-4px)}
/* Groessenskala der Seite, aufgeraeumt am 16.09.2026: 15 / 17 / 20 / 26 / 38.
   Vorher standen acht Werte nebeneinander (14,5 / 15,5 / 16 / 16,5 / 17 / 19 /
   28 / 38), darunter 14,5 und 15,5 mit einem Abstand von 1,07 - zwei Groessen,
   die sich weder unterscheiden noch gleich sind (§4.1). */
.kwk-seite .tp-text strong{display:block;margin-top:10px;font-family:Signika,inherit;
  font-size:17px;font-weight:600;line-height:1.25;color:var(--ink)}
.kwk-seite .tp--gross .tp-text strong{font-size:20px}
.kwk-seite .tp-text span{display:block;margin-top:1px;font-size:15px;
  color:var(--sage-dark)}
.kwk-seite .tp-text p{margin:8px 0 0;font-size:15px;line-height:1.5;
  color:var(--ink-body);max-width:34ch}
.kwk-seite a.tp .tp-text strong{text-decoration:underline;text-decoration-color:transparent;
  text-underline-offset:3px;transition:text-decoration-color .25s ease}
.kwk-seite a.tp:hover .tp-text strong,.kwk-seite a.tp:focus-visible .tp-text strong{
  text-decoration-color:var(--sage-dark)}

@media (prefers-reduced-motion:reduce){
  .kwk-seite .tp img,.kwk-seite a.tp .tp-text strong{transition:none}
  .kwk-seite a.tp:hover img,.kwk-seite a.tp:focus-visible img{transform:none}
}
@media (max-width:820px){
  .kwk-seite .tf{grid-template-columns:1fr;gap:18px}
  .kwk-seite .tf-frage{max-width:34ch}
  .kwk-seite .tp{flex-basis:calc(50% - 12px)}
  .kwk-seite .tp--gross,.kwk-seite .tp--paar{flex-basis:calc(50% - 12px)}
  .kwk-seite .tp--allein{flex-basis:100%;grid-template-columns:minmax(0,44%) minmax(0,1fr)}
  .kwk-seite .tf-leute{gap:20px}
}

/* ── Sichtbarer Fokusrahmen (P-1031, Roman 14.09.2026) ─────────────────────
   Zehn Elemente auf /erstgespraech/ waren per Tastatur erreichbar, ohne zu
   zeigen, wo man steht - darunter der Knopf "Diesen Termin buchen" und die
   Zeitfilter. Wer die Seite mit der Tastatur bedient, tappt im Dunkeln.

   Bewusst NICHT auf .kwk-seite eingegrenzt: Logo und Menuepunkt liegen im
   Oxygen-Kopf ausserhalb. Das Blatt laedt nur auf Seiten mit der Vorlage, die
   Regel wirkt also nur dort - dort aber auf der ganzen Seite.

   :focus-visible statt :focus: sichtbar bei Tastaturbedienung, nicht beim
   Klicken mit der Maus. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #4E6650;
  outline-offset: 2px;
  border-radius: 3px;
  /* Ohne das erscheint der Rahmen erst nach 0,2 bis 0,5 Sekunden: Die Elemente
     tragen transition: all, und die animiert auch die Rahmenbreite von 0 auf 2.
     Ein Fokusrahmen, der einblendet, ist beim schnellen Durchtabben unsichtbar -
     und genau deshalb hat der Wegetest ihn am 14.09.2026 als fehlend gemeldet,
     obwohl er gesetzt war. */
  transition-duration: 0s;
}
/* Auf dunklem Grund waere Salbei-tief kaum zu sehen. */
.kwk-seite .btn--voll:focus-visible,
.kwk-seite .sprung-buchen:focus-visible {
  outline-color: #FFFFFF;
  box-shadow: 0 0 0 4px #4E6650;
}

/* ── Tabellen (P-1101, Roman 15.09.2026) ───────────────────────────────────
   Das Blatt hatte fuer Tabellen keine einzige Regel. Sie kamen in der
   Standarddarstellung des Browsers: keine Zeilentrennung, keine Ruecksicht auf
   die Breite. Auf dem Telefon quetschten sich die Spalten, bis der Text
   mehrfach umbrach - so ist es aufgefallen.

   Betrifft 61 Tabellen im Bestand, darunter die Preistabellen. Eine
   Preistabelle, die auf dem Telefon unlesbar ist, kostet mehr als jeder
   Schoenheitsfehler daneben. */
.kwk-seite table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 15px;
  line-height: 1.5;
}
.kwk-seite table th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sage-darker);
  background: var(--sage-pale);
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.kwk-seite table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
/* Erste Zelle jeder Zeile ist die Zeilenueberschrift. */
.kwk-seite table tbody td:first-child { font-weight: 600; color: var(--ink); }
/* Zahlen sollen untereinander stehen, nicht tanzen. */
.kwk-seite table td.zahl,
.kwk-seite table th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.kwk-seite table tbody tr:last-child td { border-bottom: none; }

/* ── Auf dem Telefon: aus jeder Zeile ein Block ───────────────────────────
   Nebeneinander ist bei vier Spalten und einem Satz je Zelle nicht zu retten.
   Statt zu schrumpfen, wird jede Zeile zu einem Block: oben die
   Zeilenueberschrift, darunter je Zelle die Spaltenbeschriftung aus
   data-label und der Wert. Die Kopfzeile entfaellt, sie steht dann in jeder
   Zelle.

   Tabellen OHNE data-label koennen das nicht - die bleiben nebeneinander und
   duerfen seitlich rollen, statt unleserlich zu schrumpfen. */
@media (max-width: 640px) {
  .kwk-seite table:has(td[data-label]) { display: block; }
  .kwk-seite table:has(td[data-label]) thead { display: none; }
  .kwk-seite table:has(td[data-label]) tbody,
  .kwk-seite table:has(td[data-label]) tr { display: block; }
  .kwk-seite table:has(td[data-label]) tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px 0;
    margin-bottom: 14px;
  }
  .kwk-seite table:has(td[data-label]) td {
    display: block;
    border-bottom: none;
    padding: 7px 14px;
    text-align: left;
  }
  /* Zeilenueberschrift: die Zelle ohne data-label. */
  .kwk-seite table:has(td[data-label]) td:not([data-label]) {
    font-size: 16px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
  }
  .kwk-seite table:has(td[data-label]) td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sage-darker);
    margin-bottom: 2px;
  }
  /* Platzhalterspalten mit leerem data-label tragen nichts bei. */
  .kwk-seite table:has(td[data-label]) td[data-label=""] { display: none; }

  /* Ohne data-label bleibt nur das seitliche Rollen. */
  .kwk-seite table:not(:has(td[data-label])) { display: block; overflow-x: auto; }
}

/* ---- Kontaktseite /kontakt/ (18.09.2026, Roman: kurz, uebersichtlich, mit Symbolen) ----
   Eigener Praefix kontakt-, keine bestehende Klasse umgedeutet. Die Seite ist kein
   Ablauf: kein Kapitelverzeichnis, keine Schiene, keine Etappennummern. Alles, was
   jemand unterwegs sucht (Telefon, E-Mail, Zeiten, Adresse), steht in einer
   Kachelreihe direkt unter der Buehne. Die Abschnitte darunter wechseln wie die
   Etappen zwischen Papier und Band, laufen aber ohne .weg und damit randlos.
   Bewegung: 160 ms ease-out, unter der 300-ms-Grenze aus kwk-design. */
.kwk-seite .kontakt-karte{padding:clamp(22px,3vw,36px) 0 clamp(26px,3.4vw,44px)}
.kwk-seite .kontakt-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  margin:0;padding:0;list-style:none}
.kwk-seite .kontakt-kachel{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;
  align-items:start;height:100%;padding:20px 22px;background:var(--white);border:1px solid var(--line);
  border-radius:12px;text-decoration:none;color:inherit;
  transition:border-color .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1),
  box-shadow .16s cubic-bezier(.23,1,.32,1)}
.kwk-seite a.kontakt-kachel:hover,.kwk-seite a.kontakt-kachel:focus-visible{border-color:var(--sage-dark);
  transform:translateY(-2px);box-shadow:0 8px 22px rgba(80,86,82,.09)}
.kwk-seite a.kontakt-kachel:active{transform:translateY(0)}
.kwk-seite .kontakt-ico{width:52px;height:52px;flex:none;border-radius:50%;background:var(--sage-pale);
  color:var(--sage-darker);display:inline-flex;align-items:center;justify-content:center;
  transition:background .16s cubic-bezier(.23,1,.32,1),color .16s cubic-bezier(.23,1,.32,1)}
.kwk-seite .kontakt-ico svg{width:24px;height:24px;display:block}
.kwk-seite a.kontakt-kachel:hover .kontakt-ico{background:var(--sage-dark);color:#fff}
.kwk-seite .kontakt-text{display:grid;gap:4px;min-width:0}
.kwk-seite .kontakt-text .label{margin-top:4px}
.kwk-seite .kontakt-text strong{display:block;color:var(--ink);font-weight:600;line-height:1.2;
  font-size:clamp(1.1rem,1.5vw,1.3rem);letter-spacing:-.01em;overflow-wrap:anywhere}
.kwk-seite .kontakt-sub{font-size:14.5px;color:var(--ink-soft);line-height:1.45;max-width:40ch}
/* Tagesleiste: Mo bis Fr gefuellt, Sa und So nur umrandet. Die Aussage steht als
   Text daneben, die Leiste ist Zierde und fuer Vorleser ausgeblendet. */
.kwk-seite .kontakt-tage{display:inline-flex;gap:4px;margin-top:6px}
.kwk-seite .kontakt-tage b,.kwk-seite .kontakt-tage i{width:32px;height:26px;border-radius:6px;
  font-size:11.5px;font-weight:600;font-style:normal;display:inline-flex;align-items:center;
  justify-content:center;background:var(--sage-pale);color:var(--sage-darker);border:1px solid transparent}
.kwk-seite .kontakt-tage i{background:transparent;color:var(--ink-soft);border-color:var(--line)}
.kwk-seite .kontakt-nachsatz{margin:16px 0 0;font-size:14.5px;color:var(--ink-soft);max-width:80ch}

/* Abschnitte: gleiche Masse wie eine Etappe, aber ohne Knotenspalte. */
.kwk-seite .kontakt-abschnitt{padding:clamp(40px,5.5vw,72px) 0}
.kwk-seite .kontakt-abschnitt--band{background:var(--band)}
.kwk-seite .kontakt-abschnitt h2{font-size:clamp(1.55rem,2.7vw,2.1rem);max-width:22ch}
.kwk-seite .kontakt-abschnitt .unter{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--sage-darker);
  font-weight:300;margin-top:10px;max-width:58ch}
.kwk-seite .kontakt-abschnitt .lead{max-width:58ch;margin-top:0;font-size:16.5px}
.kwk-seite .kontakt-abschnitt .fragen{margin-top:26px}

/* Drei Wege nebeneinander, mit Symbol; .wege selbst bleibt zweispaltig. */
.kwk-seite .kontakt-wege{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Die Karten werden auf gleiche Hoehe gestreckt; ohne align-content:start verteilt das
   Raster den Rest auf alle Zeilen, und Beschriftung und Titel rutschen je Karte anders. */
.kwk-seite .kontakt-wege a{align-content:start}
.kwk-seite .kontakt-wege .kontakt-ico{width:42px;height:42px;margin-bottom:6px}
.kwk-seite .kontakt-wege .kontakt-ico svg{width:21px;height:21px}
.kwk-seite .kontakt-wege a:hover .kontakt-ico{background:var(--sage-dark);color:#fff}
.kwk-seite .kontakt-wege + .lead{margin-top:26px}

/* Formular links, "So geht es weiter" rechts. Die Spalte rechts bleibt beim
   Blaettern stehen, damit die Zusage neben dem Formular sichtbar bleibt. */
.kwk-seite .kontakt-formular{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);margin-top:30px;align-items:start}
.kwk-seite .kontakt-formular .rueckruf-form{max-width:560px;margin-top:0}
.kwk-seite .kontakt-danach{position:sticky;top:clamp(104px,15vh,140px);padding:22px 24px;
  background:var(--white);border:1px solid var(--line);border-radius:12px}
.kwk-seite .kontakt-schritte{list-style:none;margin:12px 0 0;padding:0;counter-reset:kontakt}
.kwk-seite .kontakt-schritte li{counter-increment:kontakt;display:grid;grid-template-columns:30px minmax(0,1fr);
  gap:12px;align-items:start;padding:9px 0;font-size:15px;color:var(--ink-body);line-height:1.5}
.kwk-seite .kontakt-schritte li::before{content:counter(kontakt);width:30px;height:30px;border-radius:50%;
  background:var(--sage-pale);color:var(--sage-darker);font-weight:700;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.kwk-seite .kontakt-hinweis{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-soft);line-height:1.5}
.kwk-seite .kontakt-hinweis a{color:var(--cta-schrift)}

/* Adresse links, Karte rechts. */
.kwk-seite .kontakt-anfahrt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);margin-top:26px;align-items:start}
.kwk-seite .kontakt-anfahrt .aktion{margin-top:18px}
.kwk-seite .kontakt-links{list-style:none;padding:0;margin:26px 0 0;max-width:52ch}
.kwk-seite .kontakt-links li{border-top:1px solid var(--line)}
.kwk-seite .kontakt-links li:last-child{border-bottom:1px solid var(--line)}
.kwk-seite .auf .kontakt-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:13px 0;text-decoration:none;color:var(--ink);font-weight:500;
  font-size:15.5px;transition:padding-left .16s cubic-bezier(.23,1,.32,1)}
.kwk-seite .auf .kontakt-links a:hover,.kwk-seite .auf .kontakt-links a:focus-visible{padding-left:8px}
.kwk-seite .kontakt-link-text{display:block;min-width:0}
.kwk-seite .kontakt-link-text b{display:block;font-weight:500;color:var(--ink)}
/* --ink-body statt --ink-soft: auf dem Band gemessen 4,46:1, noetig 4,5:1 (Paragraf 5.1). */
.kwk-seite .kontakt-link-text span{display:block;color:var(--ink-body);font-weight:400;font-size:14px;margin-top:2px}
.kwk-seite .kontakt-links .pfeil{font-style:normal;color:var(--cta-schrift);
  transition:transform .16s cubic-bezier(.23,1,.32,1)}
.kwk-seite .kontakt-links a:hover .pfeil{transform:translateX(3px)}
.kwk-seite .kontakt-map{position:relative;border-radius:18px;overflow:hidden;background:var(--sage-pale);
  box-shadow:0 10px 30px rgba(80,80,81,.14)}
.kwk-seite .kontakt-map #dr_gmap{width:100%;height:440px}
.kwk-seite .kontakt-map-karte{position:absolute;left:16px;bottom:16px;max-width:280px;padding:12px 16px;
  background:var(--white);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.16);
  font-size:14.5px;line-height:1.45;color:var(--ink-body)}
.kwk-seite .kontakt-map-karte strong{color:var(--ink)}

@media (max-width:900px){
  .kwk-seite .kontakt-wege,.kwk-seite .kontakt-formular,.kwk-seite .kontakt-anfahrt{
    grid-template-columns:minmax(0,1fr)}
  .kwk-seite .kontakt-danach{position:static}
  .kwk-seite .kontakt-map #dr_gmap{height:340px}
}
@media (max-width:620px){
  .kwk-seite .kontakt-kacheln{grid-template-columns:minmax(0,1fr);gap:10px}
  .kwk-seite .kontakt-kachel{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 18px}
  .kwk-seite .kontakt-ico{width:44px;height:44px}
  .kwk-seite .kontakt-ico svg{width:21px;height:21px}
  .kwk-seite .kontakt-map{border-radius:12px}
  /* Auf dem Telefon nicht ueber der Karte, sondern als Fussleiste darunter: sonst
     deckt die Adresskarte den Zustimmungstext von DataReporter ab. */
  .kwk-seite .kontakt-map-karte{position:static;max-width:none;border-radius:0;box-shadow:none;
    border-top:1px solid var(--line);padding:14px 16px}
}
@media (prefers-reduced-motion:reduce){
  .kwk-seite .kontakt-kachel,.kwk-seite .kontakt-ico,.kwk-seite .kontakt-links a,
  .kwk-seite .kontakt-links .pfeil{transition:none}
  .kwk-seite a.kontakt-kachel:hover{transform:none}
}

/* ---- Kompakte Abschnitte ohne Weg (18.09.2026) ------------------------------
   Gemeinsamer Name fuer Seiten nach Vorlage C, die Abschnitte im Wechsel
   Papier/Band brauchen, aber keine Schiene und keine Etappennummern:
   Kontakt (kontakt-abschnitt, aelterer Name, bleibt) und Erstgespraech v3. */
.kwk-seite .kompakt-abschnitt{padding:clamp(40px,5.5vw,72px) 0}
.kwk-seite .kompakt-abschnitt--band{background:var(--band)}
.kwk-seite .kompakt-abschnitt h2{font-size:clamp(1.55rem,2.7vw,2.1rem);max-width:22ch}
.kwk-seite .kompakt-abschnitt .unter{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--sage-darker);
  font-weight:300;margin-top:10px;max-width:58ch}
.kwk-seite .kompakt-abschnitt .lead{max-width:58ch;margin-top:20px;font-size:16.5px}
.kwk-seite .kompakt-abschnitt .fragen{margin-top:26px}
.kwk-seite .kompakt-abschnitt .schritte{margin-top:26px}
.kwk-seite .kompakt-abschnitt .wege{margin-top:26px}
/* Autorenzeile auf dem Band: --ink-soft erreicht dort nur 4,46:1 (Paragraf 5.1). */
.kwk-seite .kompakt-abschnitt--band .autor{color:var(--ink-body)}

/* ---- Erstgespraech, Fassung 3 (18.09.2026, Praefix eg-) --------------------
   Erzeuger: _buchung/seite_bauen_v3.py, nur Staging /erstgespraech-neu/.
   Der Terminblock selbst (.buchung, .terminbereich ...) ist unveraendert. */
/* H1 traegt den Suchbegriff (Vorgabe L2) und ist deshalb laenger als ein Wort;
   die Buehnen-Groesse von 4,2rem waere drei Zeilen Geschrei. */
.kwk-seite .buehne .eg-h1{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:17ch}
.kwk-seite .eg-fakten{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 10px}
.kwk-seite .eg-fakten li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.2}
.kwk-seite .eg-fakten svg{width:17px;height:17px;color:var(--sage-darker);flex:none}
.kwk-seite .buchung .eg-kopf{margin-bottom:20px}
.kwk-seite .buchung .eg-kopf h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin-top:8px}
/* Vertrauenszeile: drei belegte Aussagen, kein Kartenraster. */
.kwk-seite .eg-vertrauen{padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);background:var(--paper)}
.kwk-seite .eg-vertrauen .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
.kwk-seite .eg-siegel{display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;align-items:center;
  font-size:14px;color:var(--ink-body);line-height:1.4}
.kwk-seite .eg-siegel b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:2px}
.kwk-seite .eg-siegel img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center top;
  box-shadow:0 0 0 1px var(--line);display:block}
.kwk-seite .eg-ico{width:46px;height:46px;border-radius:50%;background:var(--sage-pale);color:var(--sage-darker);
  display:inline-flex;align-items:center;justify-content:center}
.kwk-seite .eg-ico svg{width:22px;height:22px;display:block}
/* "Wie geht es weiter": Schritte links, das Reel daneben statt als eigener Abschnitt. */
.kwk-seite .eg-danach{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:clamp(28px,4vw,56px);align-items:start}
.kwk-seite .eg-danach .schritte{margin-top:26px}
.kwk-seite .eg-danach .video{margin-top:26px;max-width:none}
/* Anfahrt: Absatz links, Routenknoepfe rechts untereinander. */
.kwk-seite .eg-anfahrt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:start}
.kwk-seite .eg-anfahrt .aktion{flex-direction:column;align-items:stretch;margin-top:20px}
.kwk-seite .eg-anfahrt .aktion .btn{justify-content:center}
.kwk-seite .schluss--foto .eg-leicht{margin-top:22px;font-size:15px;max-width:46ch}
.kwk-seite .schluss--foto .eg-leicht a{color:var(--cta-schrift)}
/* Sticky-Leiste am unteren Rand, nur Telefon (Konzept 10.08.2026). Das Skript
   in der Seite schaltet .an, sobald weder Buehne noch Terminblock im Bild sind. */
.kwk-seite .eg-leiste{display:none}
@media (max-width:900px){
  /* z-index 2000: ueber Oxygens Zurueck-nach-oben-Knopf (1500, sitzt sonst auf dem
     Knopf der Leiste), unter dem schwebenden Kontaktmenue (9999, steht 92px hoeher). */
  .kwk-seite .eg-leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:2000;
    align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(251,252,250,.97);border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(80,86,82,.10);
    transform:translateY(110%);transition:transform .25s cubic-bezier(.23,1,.32,1)}
  .kwk-seite .eg-leiste.an{transform:none}
  .kwk-seite .eg-leiste span{font-size:12.5px;color:var(--ink-body);line-height:1.3;min-width:0}
  .kwk-seite .eg-leiste span b{display:block;color:var(--ink);font-size:14px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kwk-seite .eg-leiste .btn{padding:12px 18px;font-size:14.5px;white-space:nowrap;flex:none}
  .kwk-seite .eg-danach,.kwk-seite .eg-anfahrt{grid-template-columns:minmax(0,1fr)}
  .kwk-seite .eg-danach .video{max-width:380px}
  .kwk-seite .eg-anfahrt .aktion{flex-direction:row;align-items:center}
  .kwk-seite .eg-vertrauen .wrap{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (prefers-reduced-motion:reduce){.kwk-seite .eg-leiste{transition:none}}

/* ---- Schmucke Erinnerung (18.09.2026, Praefix se-) ------------------------
   Sensibles Thema: keine Verkaufsflaeche, kein Termin-Knopf. Der Katalog ist
   eine waagrecht blaetterbare Galerie mit Bildunterschrift (Bezeichnung,
   Material, Katalogpreis), nicht mehr drei Bilder ohne Namen. Der Schluss ist
   Salbei statt Beere: leiser Abschluss, der Aufruf ist ein Gespraech. */
.kwk-seite .buehne .se-zitat{margin:18px 0 0;font-size:clamp(1.05rem,1.4vw,1.15rem);
  font-weight:300;color:var(--sage-darker);letter-spacing:.01em}
/* Das Paar steht im rechten Viertel des Panoramas; die Kachel zeigt sonst nur das Fenster. */
.kwk-seite .se-paar img{object-position:76% 40%}
.kwk-seite .se-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,32px);margin-top:26px}
.kwk-seite .se-zwei > div{padding:22px 24px;background:var(--white);border:1px solid var(--line);border-radius:12px}
.kwk-seite .se-zwei h3{font-size:1.1rem;margin-bottom:8px}
.kwk-seite .se-zwei p{margin:0;font-size:15.5px;max-width:48ch;color:var(--ink-body)}
/* Galerie: scroll-snap, Tastatur und Wischen ohne Skript; die Pfeile sind Zugabe. */
.kwk-seite .se-galerie{margin-top:28px}
.kwk-seite .se-spur{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(210px,24vw,260px);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;scroll-padding:4px;
  scrollbar-width:thin;scrollbar-color:var(--sage) transparent}
.kwk-seite .se-spur:focus-visible{outline:2px solid var(--sage-dark);outline-offset:2px;border-radius:12px}
.kwk-seite .se-stueck{margin:0;scroll-snap-align:start;background:var(--white);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .16s cubic-bezier(.23,1,.32,1),box-shadow .16s cubic-bezier(.23,1,.32,1)}
.kwk-seite .se-stueck:hover{border-color:var(--sage);box-shadow:0 8px 22px rgba(80,86,82,.09)}
.kwk-seite .se-stueck img{display:block;width:100%;height:auto;aspect-ratio:900/739;object-fit:contain;
  background:var(--white);padding:10px}
.kwk-seite .se-stueck figcaption{padding:12px 16px 15px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-body);line-height:1.4;margin-top:auto}
.kwk-seite .se-stueck b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:2px}
.kwk-seite .se-leiste{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.kwk-seite .se-hinweis{margin:0;font-size:14.5px;color:var(--ink-body);max-width:62ch}
.kwk-seite .se-pfeile{display:flex;gap:8px}
.kwk-seite .se-pfeil{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  color:var(--ink);cursor:pointer;font:inherit;font-size:18px;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;
  transition:background .16s cubic-bezier(.23,1,.32,1),border-color .16s cubic-bezier(.23,1,.32,1)}
.kwk-seite .se-pfeil:hover{background:var(--sage-pale);border-color:var(--sage-dark)}
.kwk-seite .se-pfeil:active{background:var(--sage)}
.kwk-seite .se-galerie + .aktion{margin-top:22px}
/* Ruhiger Schluss: Salbei statt Beere, Knopf ist die Telefonnummer. */
.kwk-seite .schluss.se-ruhig{background:var(--sage-darker)}
.kwk-seite .schluss.se-ruhig .btn--voll{color:var(--sage-darker)}
.kwk-seite .schluss.se-ruhig .btn--voll:hover{background:var(--sage-pale);color:var(--sage-darker)}
@media (max-width:720px){
  .kwk-seite .se-zwei{grid-template-columns:minmax(0,1fr)}
  .kwk-seite .se-spur{grid-auto-columns:min(78vw,300px)}
}
@media (prefers-reduced-motion:reduce){
  .kwk-seite .se-stueck,.kwk-seite .se-pfeil{transition:none}
}

/* ---- Infoabende (18.09.2026, Praefix ia-) ----------------------------------
   Zwei, drei Termine im Quartal: EINE Liste, jeder Termin ist ein Knopf mit Datum,
   Uhrzeit und Ort (Roman: 'einfacher fuer drei Termine'). Die Knoepfe bleiben .zeit
   im .terminbereich ihres Events (Vertrag mit kwk-seiten.js); die Bereiche sind
   display:contents, die Reihenfolge nach Datum kommt als order aus dem Erzeuger.
   Nutzt die Buehnen-Bausteine der Erstgespraech-Seite (.eg-h1, .eg-fakten, .eg-kopf). */
.kwk-seite .buehne .ia-h1{max-width:22ch;hyphens:manual}
.kwk-seite .buchung .ia-summe{margin:10px 0 0;font-size:15.5px;color:var(--ink-body);max-width:58ch}
.kwk-seite .ia-liste{display:grid;gap:12px;margin-top:22px}
.kwk-seite .ia-liste .terminbereich,.kwk-seite .ia-liste .tage,.kwk-seite .ia-liste .woche{display:contents}
.kwk-seite .ia-liste .tag{display:block;padding:0;border:0}
/* Uhrzeit steht als ERSTES im Knopf: kwk-seiten.js liest den Knopftext als Uhrzeit
   fuer den Tageszeit-Filter ("18:00 ..." liegt zwischen 00:00 und 23:59). */
.kwk-seite .ia-liste [hidden]{display:none!important}
.kwk-seite .ia-liste .zeit.ia-karte{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:4px 18px;align-items:center;text-align:left;padding:16px 20px;border:1.5px solid var(--sage);
  border-radius:10px;background:var(--white);font-weight:500;font-size:15.5px;font-variant-numeric:normal}
.kwk-seite .ia-uhr{font-size:1.08rem;font-weight:600;color:var(--ink);line-height:1.25;font-variant-numeric:tabular-nums;min-width:5.2ch}
.kwk-seite .ia-uhr small{display:block;font-size:13px;font-weight:400;color:var(--ink-body)}
.kwk-seite .ia-datum{font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.25}
.kwk-seite .ia-ort{font-size:13.5px;font-weight:600;color:var(--sage-darker);background:var(--sage-pale);
  padding:6px 12px;border-radius:999px;white-space:nowrap}
.kwk-seite .ia-cta{font-weight:600;color:var(--cta-schrift);white-space:nowrap}
.kwk-seite .ia-liste .zeit.ia-karte:hover,.kwk-seite .ia-liste .zeit.ia-karte:focus-visible{
  background:var(--cta);border-color:var(--cta);color:#fff;transform:translateY(-1px)}
.kwk-seite .ia-karte:hover .ia-uhr,.kwk-seite .ia-karte:hover .ia-uhr small,.kwk-seite .ia-karte:hover .ia-datum,.kwk-seite .ia-karte:hover .ia-cta,
.kwk-seite .ia-karte:focus-visible .ia-uhr,.kwk-seite .ia-karte:focus-visible .ia-uhr small,.kwk-seite .ia-karte:focus-visible .ia-datum,.kwk-seite .ia-karte:focus-visible .ia-cta{color:#fff}
.kwk-seite .ia-karte:hover .ia-ort,.kwk-seite .ia-karte:focus-visible .ia-ort{background:rgba(255,255,255,.18);color:#fff}
.kwk-seite .ia-liste .ia-leer{margin:0;padding:14px 18px;border:1px dashed var(--line);border-radius:10px;font-size:14.5px;color:var(--ink-body)}
.kwk-seite .ia-liste .ia-kalender{margin-top:6px}
.kwk-seite .ia-liste .kalender summary{font-size:14.5px;color:var(--ink-soft)}
@media (max-width:620px){
  .kwk-seite .ia-liste .zeit.ia-karte{grid-template-columns:auto minmax(0,1fr) auto;padding:14px 16px;gap:6px 14px}
  .kwk-seite .ia-karte .ia-ort{grid-column:1 / span 2;justify-self:start}
  .kwk-seite .ia-karte .ia-cta{grid-column:3;grid-row:1 / span 2}
}


/* ==== RATGEBER-DESIGN ANFANG ====
   Angehaengt am 15.09.2026. Alles darin haengt an body.kwk-ratgeber und
   erreicht damit nur Blogbeitraege, keine Behandlungsseite, nicht /kosten/,
   nicht /erstgespraech/.
   Quelle: _entwuerfe/ratgeber-design/ratgeber-design.css
   Auffrischen oder entfernen: ins_blatt.py im selben Ordner. ==== */

/* ============================================================================
   Ratgeber-Design: Leseführung, Hinweiskästen, Tabellen
   Entwurf, 15.09.2026 · Vorlage für Paket E

   ZWECK
   Der Bestand wirkt wie eine Wandzeitung. Gemessen am 15.09.2026:
   290 Hinweiskästen in 48 Artikeln, im Schnitt sechs pro Artikel, bis zu
   sieben unmittelbar hintereinander, mit 226 verschiedenen Beschriftungen
   und EINEM Erscheinungsbild. Eine Warnung sieht aus wie ein Tipp sieht aus
   wie eine Begriffserklärung. Wer über die Seite schaut, sieht nur, dass
   etwas wichtig sein soll, nicht was.

   Dieses Blatt ändert daran drei Dinge:
     1. Das Inhaltsverzeichnis läuft auf dem Desktop rechts mit und zeigt
        lesbare Abschnittstitel statt neun Pixel großer Punkte.
     2. Hinweiskästen bekommen sechs Formen mit eigenem Zeichen und eigener
        Farbe: Kernaussage, Tipp, Achtung, Begriff, Zeitpunkt, Rechtslage.
     3. Tabellen werden formatiert und springen unter 640 Pixel auf Kacheln
        um. Die dafür nötigen data-label stehen im Markup bereits.

   ABGRENZUNG ZU PAKET E
   Jede Regel hängt an body.kwk-ratgeber. Diese Klasse setzt das mu-plugin
   ausschließlich bei is_singular('post'), also nur auf Ratgeberartikeln.
   Behandlungsseiten, /kosten/ und /erstgespraech/ tragen sie nicht und
   bleiben unberührt. Das Blatt ist additiv: Es überschreibt nur Regeln,
   die es ausdrücklich nennt.

   KEIN JAVASCRIPT NÖTIG
   Der Beobachter in kwk-seiten.js setzt .an auf dem passenden Eintrag der
   .punktnav bereits heute (Zeile 50 bis 61). Das mitlaufende Verzeichnis
   ist deshalb reine Gestaltung, keine neue Mechanik.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1 · Zeichen für die Hinweiskästen

   Als Maske, nicht als Bild: So nimmt das Zeichen die Schriftfarbe seines
   Kastens an, und die Umstellung eines Kastens ist ein Klassenwechsel im
   Markup statt einer eingefügten Grafik. 290 Kästen einzeln mit SVG zu
   befüllen wäre 290 Stellen, an denen man es später wieder pflegen muss.
   --------------------------------------------------------------------------- */

body.kwk-ratgeber{
  --zeichen-kern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.4l2.6 2.6L16.2 9.4'/%3E%3C/svg%3E");
  --zeichen-tipp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5a2 2 0 0 1-2 2H8.5L4.5 20.5V6a2 2 0 0 1 2-2h11.5a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --zeichen-acht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8L2.4 20.2h19.2z'/%3E%3Cpath d='M12 9.8v4.4'/%3E%3Cpath d='M12 17.1h.01'/%3E%3C/svg%3E");
  --zeichen-wort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.4h5.6a3.4 3.4 0 0 1 3.4 3.4v10a2.6 2.6 0 0 0-2.6-2.6H3z'/%3E%3Cpath d='M21 5.4h-5.6a3.4 3.4 0 0 0-3.4 3.4v10a2.6 2.6 0 0 1 2.6-2.6H21z'/%3E%3C/svg%3E");
  --zeichen-zeit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8v5.5l3.4 2'/%3E%3C/svg%3E");
  --zeichen-recht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.2v16'/%3E%3Cpath d='M6.5 20.2h11'/%3E%3Cpath d='M3.6 8.2h16.8'/%3E%3Cpath d='M6.4 8.2L3.6 14.4h5.6z'/%3E%3Cpath d='M17.6 8.2L14.8 14.4h5.6z'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   2 · Der Hinweiskasten

   Bisher: border-left 2px rosa, für alle 290 Kästen gleich. Sechs davon
   untereinander ergeben einen gestreiften Block, in dem kein Hinweis mehr
   hervorsticht. Der linke Farbstreifen entfällt deshalb ersatzlos.

   Neu: ein Zeichen links, eine Kopfzeile, der Text. Der häufigste Typ
   (Kernaussage) bekommt einen ruhigen Tonhintergrund ohne Rahmen. Nur
   "Achtung" trägt einen Rahmen, damit es als einziges heraussticht.
   --------------------------------------------------------------------------- */body.kwk-ratgeber .kwk-seite .kasten{
  border-left: none;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 13px;
  row-gap: 3px;
  align-items: start;
  margin: 30px 0;
  padding: 17px 20px 18px 17px;
  max-width: 64ch;
  background: var(--sage-pale);
  border-radius: 7px;
  color: var(--ink-body);
}

/* Das Zeichen. Eine Maske, keine Grafik: Es nimmt die Farbe des Kastens an. */body.kwk-ratgeber .kwk-seite .kasten::before{
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: 22px;
  height: 22px;
  background: var(--sage-darker);
  -webkit-mask: var(--zeichen-kern) center / 22px 22px no-repeat;
  mask: var(--zeichen-kern) center / 22px 22px no-repeat;
  margin-top: 1px;
}

/* Die Kopfzeile. Bisher ein rosa Etikett in Versalien, auf jedem Kasten
   gleich. Jetzt eine Überschrift in der Farbe ihres Typs: Sie sagt, was
   folgt, statt nur "hier ist ein Kasten" zu sagen. */body.kwk-ratgeber .kwk-seite .kasten > .label{
  grid-row: 1;
  grid-column: 2;
  display: block;
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sage-darker);
  align-self: center;
}body.kwk-ratgeber .kwk-seite .kasten > :not(.label){
  grid-column: 2;
}body.kwk-ratgeber .kwk-seite .kasten p{
  margin: 0;
  font-size: 15.8px;
  line-height: 1.58;
  color: var(--ink-body);
}body.kwk-ratgeber .kwk-seite .kasten p + p{ margin-top: 8px; }

/* Ein Kasten ohne Kopfzeile: Das Zeichen rückt auf die Höhe der ersten
   Textzeile, damit es nicht über dem Absatz schwebt. */
body.kwk-ratgeber .kwk-seite .kasten > p:first-child{ grid-row: 1; }


/* --- Kernaussage · Salbei, gefüllt, kein Rahmen ------------------------ */
/* Der Standard. Bleibt bewusst der ruhigste Typ, weil er der häufigste ist. */

body.kwk-ratgeber .kwk-seite .kasten--kern{ background: var(--sage-pale); }


/* --- Tipp aus der Praxis · Rosa ---------------------------------------- */

body.kwk-ratgeber .kwk-seite .kasten--tipp{ background: var(--rosa-pale); }
body.kwk-ratgeber .kwk-seite .kasten--tipp::before{
  background: var(--rosa-dark);
  -webkit-mask-image: var(--zeichen-tipp);
  mask-image: var(--zeichen-tipp);
}
body.kwk-ratgeber .kwk-seite .kasten--tipp > .label{ color: var(--rosa-dark); }


/* --- Achtung · Bernstein, mit Rahmen ----------------------------------- */
/* Der einzige Typ mit Rahmen. Eine Grenze, ein Risiko, eine Nebenwirkung
   soll sich vom Rest der Seite abheben, nicht in ihr aufgehen. */

body.kwk-ratgeber .kwk-seite .kasten--acht{
  background: var(--pruef-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pruef) 55%, transparent);
}
body.kwk-ratgeber .kwk-seite .kasten--acht::before{
  background: #8A6D1B;
  -webkit-mask-image: var(--zeichen-acht);
  mask-image: var(--zeichen-acht);
}
body.kwk-ratgeber .kwk-seite .kasten--acht > .label{ color: #8A6D1B; }


/* --- Zeitpunkt oder Dauer · Salbei, nur Linien ------------------------- */
/* "Tag 7 bis 8: erste Kontrolle" ist keine Botschaft, sondern eine Marke
   auf der Zeitachse. Deshalb offen statt gefüllt: Mehrere hintereinander
   lesen sich dann als Folge und nicht als Stapel Kästen. */

body.kwk-ratgeber .kwk-seite .kasten--zeit{
  background: none;
  border-radius: 0;
  padding: 13px 0 14px 0;
  border-top: 1px solid var(--line);
  margin: 0;
}
body.kwk-ratgeber .kwk-seite .kasten--zeit + .kasten--zeit{ margin-top: 0; }
body.kwk-ratgeber .kwk-seite .kasten--zeit:last-of-type{ border-bottom: 1px solid var(--line); }
body.kwk-ratgeber .kwk-seite .kasten--zeit::before{
  background: var(--sage-dark);
  -webkit-mask-image: var(--zeichen-zeit);
  mask-image: var(--zeichen-zeit);
}
body.kwk-ratgeber .kwk-seite .kasten--zeit > .label{ color: var(--ink); }


/* --- Begriff erklärt · kein Kasten ------------------------------------- */
/* Eine Erklärung ist kein Hinweis, sondern ein Nachschlagewerk mitten im
   Text. Sie bekommt deshalb keinen farbigen Grund, sondern nur den Begriff
   als Marke und den Satz dahinter. Wichtig für die Patientin: Der Begriff
   bleibt stehen, damit sie ihn auf ihrem Befund wiedererkennt. */

body.kwk-ratgeber .kwk-seite .kasten--wort{
  background: none;
  border-radius: 0;
  padding: 3px 0 3px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 15px;
}
body.kwk-ratgeber .kwk-seite .kasten--wort::before{
  background: var(--ink-soft);
  -webkit-mask-image: var(--zeichen-wort);
  mask-image: var(--zeichen-wort);
}
body.kwk-ratgeber .kwk-seite .kasten--wort > .label{ color: var(--ink); }


/* --- Rechtslage, Kosten, Erstattung · Tinte --------------------------- */
/* Was das Gesetz regelt oder die Kasse zahlt, ändert sich. Dieser Typ ist
   der einzige, der ein Stand-Datum tragen darf und soll. */

body.kwk-ratgeber .kwk-seite .kasten--recht{ background: var(--band); }
body.kwk-ratgeber .kwk-seite .kasten--recht::before{
  background: var(--ink);
  -webkit-mask-image: var(--zeichen-recht);
  mask-image: var(--zeichen-recht);
}
body.kwk-ratgeber .kwk-seite .kasten--recht > .label{ color: var(--ink); }
body.kwk-ratgeber .kwk-seite .kasten--recht .stand{
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--ink-soft);
}


/* --- Zwei gleiche Kästen hintereinander ------------------------------- */
/* Rücken näher zusammen, damit sie als Paar lesbar werden statt als zwei
   getrennte Unterbrechungen. */

body.kwk-ratgeber .kwk-seite .kasten + .kasten{ margin-top: 14px; }


/* ---------------------------------------------------------------------------
   3 · Tabellen

   kwk-seiten.css enthält heute keine einzige Tabellenregel; die Tabellen
   laufen in der Voreinstellung des Browsers. Auf dem Handy quetschen sich
   die Spalten, bis in jeder Zelle mehrfach umgebrochen wird.

   Unter 640 Pixel wird jede Zeile eine Kachel. Die Spaltenüberschrift kommt
   aus dem data-label, das in den meisten Zellen bereits steht: Es stammt
   aus der Tailwind-Fassung und ist beim Umbau mitgewandert, nur die Regel
   dazu nicht.
   --------------------------------------------------------------------------- */

body.kwk-ratgeber .kwk-seite .auf table{
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0 4px;
  font-size: 15.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Das Theme setzt word-break: break-word auf alles. In Fliesstext faellt das
   nicht auf, in einer Tabelle schon: Der Browser darf dann jede Spalte beliebig
   schmal machen und das Wort mittendrin zerschneiden. Gemessen am 15.09.2026
   im Artikel ernaehrung-kinderwunsch-was-hilft: Die Spalte "Evidenz" bekam
   52 Pixel, und in der Kopfzeile stand "Nährstof / f" und darunter
   "Modera / t".

   Mit word-break: normal muss der Browser jeder Spalte mindestens die Breite
   ihres laengsten Wortes geben. Wo ein Wort wirklich zu lang ist, trennt
   hyphens: auto an der Silbengrenze statt irgendwo. Die Kopfzeile traegt
   kurze Woerter und wird gar nicht getrennt. */
body.kwk-ratgeber .kwk-seite .auf th,
body.kwk-ratgeber .kwk-seite .auf td{
  word-break: normal;
  overflow-wrap: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

body.kwk-ratgeber .kwk-seite .auf thead th{
  hyphens: none;
  -webkit-hyphens: none;
}

body.kwk-ratgeber .kwk-seite .auf thead th{
  text-align: left;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  padding: 0 16px 10px 0;
  border-bottom: 2px solid var(--sage);
  vertical-align: bottom;
}

body.kwk-ratgeber .kwk-seite .auf tbody td{
  padding: 13px 16px 13px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-body);
}

body.kwk-ratgeber .kwk-seite .auf tbody tr:first-child td{ border-top: none; }
body.kwk-ratgeber .kwk-seite .auf tbody td:last-child,
body.kwk-ratgeber .kwk-seite .auf thead th:last-child{ padding-right: 0; }

/* Die erste Spalte benennt die Zeile und trägt sie. */
body.kwk-ratgeber .kwk-seite .auf tbody td:first-child{
  font-weight: 600;
  color: var(--ink);
}

/* Sehr breite Tabellen dürfen in ihrem eigenen Rahmen scrollen, statt die
   Seite seitlich zu verschieben. */
body.kwk-ratgeber .kwk-seite .auf .tabelle-rahmen{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* --- Unter 640 Pixel: Kacheln ----------------------------------------- */

@media (max-width: 640px){
  body.kwk-ratgeber .kwk-seite .auf table,
  body.kwk-ratgeber .kwk-seite .auf tbody,
  body.kwk-ratgeber .kwk-seite .auf tr,
  body.kwk-ratgeber .kwk-seite .auf td{ display: block; }

  /* Die Kopfzeile verschwindet aus dem Bild, bleibt aber für Vorlese-
     programme stehen. display:none würde sie auch dort entfernen. */
  body.kwk-ratgeber .kwk-seite .auf thead{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.kwk-ratgeber .kwk-seite .auf tbody tr{
    background: var(--white, #fff);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 15px 16px 14px;
    margin-bottom: 11px;
  }

  body.kwk-ratgeber .kwk-seite .auf tbody td{
    border: none;
    padding: 0;
  }

  body.kwk-ratgeber .kwk-seite .auf tbody td + td{
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
  }

  /* Die erste Zelle wird zur Überschrift der Kachel. */
  body.kwk-ratgeber .kwk-seite .auf tbody td:first-child{
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
  }

  body.kwk-ratgeber .kwk-seite .auf tbody td[data-label]::before{
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 3px;
  }

  /* Die erste Zelle braucht keine Spaltenüberschrift: Sie IST der Name. */
  body.kwk-ratgeber .kwk-seite .auf tbody td:first-child[data-label]::before{ display: none; }
}


/* ---------------------------------------------------------------------------
   4 · Das mitlaufende Inhaltsverzeichnis

   Heute stehen dort neun Pixel große Punkte; der Abschnittstitel erscheint
   erst, wenn die Maus darauf zeigt. Auf einem Tablet oder Touchgerät zeigt
   nie jemand mit der Maus darauf. Die Leiste ist damit für einen Teil der
   Leserinnen praktisch unbeschriftet.

   Ab 1180 Pixel läuft sie jetzt als lesbares Verzeichnis rechts mit. Der
   Text rückt um ihre Breite ein, damit nichts überdeckt wird. Die linke
   Kante mit Schiene und Abschnittsnummer bleibt, wo sie ist.
   --------------------------------------------------------------------------- */

@media (min-width: 1180px){

  /* 218 Pixel Leiste, 44 Pixel Abstand zum rechten Rand und 28 Pixel Luft
     zwischen Text und Leiste. Mit 262 lag eine breite Tabelle direkt an
     der Leiste an, ohne jeden Zwischenraum.

     Die Einrückung gilt auch für das Inhaltsverzeichnis oben. Es steht
     zwar über dem Artikelbereich und damit über der Leiste, läuft beim
     Scrollen aber eine Bildschirmhöhe lang neben ihr her: Sobald der erste
     Abschnitt beginnt, klebt die Leiste, während die zweite Spalte des
     Verzeichnisses noch im Bild steht. Ohne dieselbe rechte Kante
     überlappen die beiden genau dort. */
  body.kwk-ratgeber .kwk-seite .weg:has(.navspalte) .wrap,
  body.kwk-ratgeber .kwk-seite .kwk-seite:has(.navspalte) .inhalt .wrap,
  body.kwk-ratgeber .kwk-seite:has(.navspalte) .inhalt .wrap{ padding-right: 290px; }

  /* Die Leiste klebt im Artikelbereich, statt am Bildschirm zu hängen.

     Vorher war sie position:fixed und lief damit über alles, was nicht zum
     Artikel gehört: über das Beitragsbild in der Bühne und über den rosa
     Schlussabschnitt, auf dem ihre Einträge unlesbar wurden. Jetzt spannt
     .navspalte über die Höhe des Artikelbereichs, und die Leiste klebt
     darin. Oberhalb und unterhalb gibt es sie nicht mehr. */
  body.kwk-ratgeber .kwk-seite .weg .navspalte{
    position: absolute;
    top: 0;
    bottom: 0;
    right: clamp(20px, 3vw, 44px);
    width: 218px;
    z-index: 40;
    pointer-events: none;
  }

  body.kwk-ratgeber .kwk-seite .navspalte .punktnav{
    display: block;
    position: sticky;
    /* Die Kopfzeile der Website ist fixiert und 110 Pixel hoch. Darunter
       28 Pixel Luft. */
    top: 138px;
    /* Die alte Regel zog die Leiste mit translateY(-50%) um ihre halbe Höhe
       nach oben, weil sie mittig am Bildschirm hängen sollte. Zusammen mit
       sticky landete sie dadurch hinter der Kopfzeile, und zwar umso tiefer,
       je mehr Einträge sie hat: Bei sieben Abschnitten ging es gerade noch,
       bei acht war sie ganz verdeckt. */
    transform: none;
    width: 218px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 2px 0;
    scrollbar-width: none;
    pointer-events: auto;
  }
  body.kwk-ratgeber .kwk-seite .navspalte .punktnav::-webkit-scrollbar{ display: none; }

  /* Die Überschrift der Leiste steht im Markup nicht, deshalb hier. */
  body.kwk-ratgeber .kwk-seite .navspalte .punktnav::before{
    content: "Auf dieser Seite";
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-left: 15px;
    margin-bottom: 11px;
  }

  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a{
    /* Der Punkt wird zum Eintrag. */
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    display: block;
    position: relative;
    padding: 7px 0 7px 15px;
    font-size: 13.8px;
    line-height: 1.38;
    color: var(--ink-soft);
    text-decoration: none;
    border-left: 2px solid var(--line);
    transition: color .25s, border-color .25s;
  }

  /* Der Titel stand bisher in einem span, das erst beim Zeigen erschien. */
  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a span{
    position: static;
    opacity: 1;
    transform: none;
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    white-space: normal;
    color: inherit;
    font-size: inherit;
    letter-spacing: 0;
    display: block;
    pointer-events: none;
  }

  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a:hover,
  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a:focus-visible{
    color: var(--ink);
    border-left-color: var(--sage);
  }

  /* .an setzt der Beobachter in kwk-seiten.js. */
  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a.an{
    color: var(--ink);
    font-weight: 600;
    border-left-color: var(--sage-dark);
    /* Der Punkt wuchs bisher beim Aktivwerden um 40 Prozent (scale 1.4).
       Bei neun Pixeln faellt das nicht auf, bei einem Eintrag mit Text
       quillt er ueber die Leiste hinaus. */
    transform: none;
  }

  /* Der Titel stand bisher nur beim Zeigen mit der Maus da und schob sich
     dabei um sechs Pixel. Jetzt steht er immer, also auch kein Schieben. */
  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a:hover span,
  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a.an span{
    opacity: 1;
    transform: none;
  }

  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a:focus-visible{
    outline: 2px solid var(--sage-dark);
    outline-offset: 2px;
  }
}

/* Unter 1180 Pixel bleibt es bei der bisherigen Regel: Die Leiste ist
   ausgeblendet. Auf dem Handy führt das Verzeichnis oben auf der Seite. */
@media (max-width: 1179px){
  body.kwk-ratgeber .kwk-seite .punktnav{ display: none; }
}


/* ---------------------------------------------------------------------------
   5 · Abbildungen

   105 Abbildungen sind im Bestand, und sie sind das Beste daran. Sie
   bekommen mehr Luft und einen ruhigen Grund, damit sie als eigene Einheit
   gelesen werden und nicht als weiterer Kasten im Kastenstapel.
   --------------------------------------------------------------------------- */

body.kwk-ratgeber .kwk-seite .auf figure.abbildung{
  margin: 38px 0;
  max-width: none;
}

body.kwk-ratgeber .kwk-seite .auf figure.abbildung .abb-kopf{
  color: var(--sage-darker);
  letter-spacing: .07em;
}


/* ---------------------------------------------------------------------------
   6 · Rhythmus

   Der Wandzeitungs-Eindruck entsteht nicht nur durch die Kästen, sondern
   dadurch, dass jeder Abschnitt dieselbe Abfolge hat: Absatz, Liste,
   Kasten, Absatz, Kasten. Etwas mehr Luft zwischen den Blöcken und eine
   klarere Zwischenüberschrift trennen die Gedanken voneinander.
   --------------------------------------------------------------------------- */

body.kwk-ratgeber .kwk-seite .etappe .auf > h3{
  font-size: 1.22rem;
  color: var(--ink);
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

body.kwk-ratgeber .kwk-seite .etappe .auf > h3:first-child{ border-top: none; padding-top: 0; }

/* Eine Liste nach einem Kasten braucht Abstand, sonst kleben sie. */body.kwk-ratgeber .kwk-seite .kasten + ol.punkte{ margin-top: 26px; }


/* ---------------------------------------------------------------------------
   7 · Bewegung

   Wer Bewegung abbestellt hat, bekommt keine.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  body.kwk-ratgeber .kwk-seite .navspalte .punktnav a{ transition: none; }
}


/* ---------------------------------------------------------------------------
   8 · Groessenskala, Kontrast, Sprungziele
   Angehaengt am 15.09.2026 nach dem Designreview des OHSS-Ratgebers
   (.impeccable/critique/2026-09-15T15-15-46Z__0-d-myrdbx-io-ohss-...md, 25/40).

   Alles hier haengt an body.kwk-ratgeber und erreicht damit nur Blogbeitraege.
   Die korrigierten Regeln stehen im GEMEINSAMEN Teil von kwk-seiten.css und
   gelten dort weiter fuer Behandlungsseiten und Rechner. Das ist Absicht:
   Erst wird an einer Seite gemessen, dann entscheidet Roman, ob die Korrektur
   ins gemeinsame Blatt hochgezogen wird. Die Kontrastwerte unten sind auf
   JEDER Seite ein Verstoss gegen PRUEFKATALOG-SEITEN.md Paragraf 5.2, nicht
   nur hier.
   --------------------------------------------------------------------------- */


/* --- 8.1 Groessenskala ------------------------------------------------------
   Gemessen am 15.09.2026 auf der ausgelieferten Seite: der Artikel trug FUENF
   Fliesstextgroessen (15 / 15,5 / 15,8 / 17 / 18,4 px) und ZWEI H3-Groessen
   (17,28 / 19,52 px). Die 17,28-px-Zwischenueberschrift war damit kleiner als
   die 17-px-Listeneintraege daneben und gliederte nichts mehr.
   Paragraf 4.1: es gibt eine Skala, und alle Groessen stehen darauf.

     Schaugroesse  clamp(2.6rem, 5.4vw, 4.2rem)   50,4 px   unveraendert
     Abschnitt     clamp(1.55rem, 2.7vw, 2.1rem)  33,6 px   unveraendert
     Zwischen      clamp(1.32rem, 1.05rem+.9vw, 1.45rem)  23,2 / 21,1 px
     Vorspann      1.22rem                        19,5 px
     Fliesstext    17.5px                         17,5 px
     Beleg         14.5px                         14,5 px

   H3 skalierte bisher zwischen Desktop und Handy ueberhaupt nicht. Jetzt
   schon.  */

body.kwk-ratgeber .kwk-seite .etappe .auf > h3,
body.kwk-ratgeber .kwk-seite .schritt h3{
  font-size: clamp(1.32rem, 1.05rem + .9vw, 1.45rem);
  line-height: 1.22;
}

body.kwk-ratgeber .kwk-seite .schritt p,
body.kwk-ratgeber .kwk-seite .kasten p,
body.kwk-ratgeber .kwk-seite .punkte li,
body.kwk-ratgeber .kwk-seite .etappe .auf > p:not(.unter):not(.lead),
body.kwk-ratgeber .kwk-seite .frage-block p,
body.kwk-ratgeber .kwk-seite .abbildung ol > li,
body.kwk-ratgeber .kwk-seite .abbildung ul > li{
  font-size: 17.5px;
  line-height: 1.62;
}

/* Abstand zwischen mehreren Absaetzen in einem Schritt.

   .schritt p traegt oben margin:0, und das ist richtig, solange ein Schritt aus
   einer Zeile besteht - der Ablauf soll eng stehen. Traegt ein Schritt einen
   ganzen Abschnitt, laufen die Absaetze ohne diese Regel ineinander: Roman hat
   das am 16.09.2026 am PRP-Ratgeber gesehen, "Seither ist die Datenlage
   gewachsen" begann direkt in der naechsten Zeile.

   Der Nachbarschaftswaehler trifft nur das zweite und jedes weitere Element,
   ein einabsaetziger Schritt bleibt also unveraendert. */
body.kwk-ratgeber .kwk-seite .schritt p + p,
body.kwk-ratgeber .kwk-seite .schritt p + ul,
body.kwk-ratgeber .kwk-seite .schritt ul + p{
  margin-top: 16px;
}

/* Nachgemessen am 15.09.2026 nach dem ersten Durchgang: vier Stellen standen
   noch daneben und sind oben nachgetragen.
     .etappe .auf > p        17    px   4x   Fliesstext der Etappe
     .frage-block p          15,5  px   7x   Antworten im FAQ
     .abbildung ol > li      17    px   9x   nummerierte Schritte in der Grafik
     .abbildung ul > li      15    px   9x   Aufzaehlungen in der Grafik
   Die Quellenliste bleibt bewusst auf 14,5 px: sie ist Beleg, nicht Inhalt. */

/* Der Vorspann jeder Etappe bleibt eine eigene Rolle, keine eigene Stufe:
   Er uebernimmt den Wert, den H3 vorher hatte, und bleibt in --sage-darker
   (6,11:1 auf --paper). */
body.kwk-ratgeber .kwk-seite .etappe .auf > p.unter{ font-size: 1.22rem; }

/* Belegzeilen: Quellenliste und Bildunterschrift auf denselben Wert. */
body.kwk-ratgeber .kwk-seite .quellen-block .punkte li,
body.kwk-ratgeber .kwk-seite .abbildung figcaption{ font-size: 14.5px; }


/* --- 8.2 Zeilenlaenge der Bildunterschriften -------------------------------
   Gemessen: rund 101 Zeichen je Zeile bei 682 px Spaltenbreite. Paragraf 4.4
   verlangt 65 bis 75. Die Unterschrift traegt die Quellenangabe, also die
   Stelle, an der die Seite ihre Glaubwuerdigkeit belegt. */

body.kwk-ratgeber .kwk-seite .abbildung figcaption{ max-width: 72ch; }


/* NACHTRAG 16.09.2026: Dieselben Werte standen bis heute NUR hier, also nur
   fuer Beitraege. Die 35 Seiten auf Staging ohne Live-Adresse tragen
   kwk-vorlage, aber nicht kwk-ratgeber, und blieben deshalb bei 1,64:1 bis
   4,36:1. Gemessen ueber alle 35 Seiten in drei Breiten mit
   site-inventar/scripts/polish_pruefung.py. Die Farbwerte sind jetzt an der
   Quelle gesetzt (Zeilen 110, 126, 180, 206, 225, 233, 238), damit sie jede
   Seite erreichen. Die Regeln unten bleiben stehen: sie sind jetzt
   gleichlautend und schaden nicht, aber ihre Aufhebung gehoerte in einen
   eigenen Durchgang mit eigener Nachmessung. */

/* --- 8.3 Kontrast der Nummerierung -----------------------------------------
   Gemessen am 15.09.2026, effektiver Hintergrund durch Alpha-Blending:

     .schritt .marke     #B4C7B4 auf #F3F6F0   1,64:1   roemische Ziffern
     .inhalt-liste .nr   #B4C7B4 auf #FBFCFA   1,73:1
     .punkte .nr         #B4C7B4 auf #FBFCFA   1,73:1
     .knoten .zahl       #849484 auf #F3F6F0   2,94:1
     .brot               #6C736E auf #F0F4EA   4,36:1

   Paragraf 5.2 sagt es direkt: Salbeigruen traegt keine Schrift, als
   Textfarbe nur in der tiefen Variante. Es werden ausschliesslich schon
   vorhandene Marken-Token gesetzt, kein neuer Farbwert.

   Die roemischen Ziffern I bis VIII verschwinden ganz. Sie waren das dritte
   Nummernsystem der Seite, niemand erklaerte sie, und der Schweregrad steht
   ohnehin im Ueberschriftentext ("Leicht: bis zu 30 von 100"). */

/* Roman hat am 15.09.2026 entschieden (Entscheidungskorb E4): Die roemischen
   Ziffern I, II, III an den OHSS-Schweregraden sind Klassifikation, nicht Schmuck.
   Sie bleiben und werden lesbar gemacht. Mein erster Entwurf hatte .marke pauschal
   ausgeblendet und damit auch sie erwischt - falsch, weil unter .marke zweierlei
   steckt:

     I  II  III        an den Schweregraden        Klassifikation, bleibt
     01 bis 06         an den Vorbeugemassnahmen   Geruest, verschwindet
                       (DESIGN.md schliesst 01/02/03 aus, und dieselbe Aufzaehlung
                        steht darueber schon als Abbildung 4)

   Die Voreinstellung ist bewusst SICHTBAR: Wer eine Marke verbergen will, sagt es
   im Markup mit .schritte--ohne-marke. Andersherum waere gefaehrlich - beim Rollout
   ueber 48 Artikel wuerde eine pauschale Ausblendung in jedem unbekannten Artikel
   still Inhalt verschlucken. Eine Regel, die etwas versteckt, darf nie die
   Voreinstellung sein. */
body.kwk-ratgeber .kwk-seite .schritt .marke{ color: var(--sage-darker); }   /* 5,76:1, vorher 1,64:1 */
body.kwk-ratgeber .kwk-seite .schritte--ohne-marke .marke{ display: none; }
body.kwk-ratgeber .kwk-seite .schritte--ohne-marke .schritt{ grid-template-columns: 1fr; }

body.kwk-ratgeber .kwk-seite .inhalt-liste .nr,
body.kwk-ratgeber .kwk-seite .punkte .nr{ color: var(--sage-darker); }   /* 6,11:1 */

/* Die Etappenziffer trug den aktiven Zustand ueber einen Farbwechsel, den bei
   2,94:1 niemand sah. Jetzt ist sie in beiden Zustaenden lesbar, und der
   aktive Abschnitt zeigt sich am Gewicht. Die mitlaufende Punktnavigation
   rechts und der Punkt auf der Schiene melden ihn ohnehin mit. */
body.kwk-ratgeber .kwk-seite .knoten .zahl{ color: var(--sage-darker); }  /* 5,76:1 */
body.kwk-ratgeber .kwk-seite .etappe.aktiv .knoten .zahl{ font-weight: 400; }

body.kwk-ratgeber .kwk-seite .brot{ color: var(--ink-body); }             /* 6,74:1 */

/* Die Abbildungen sind NICHT ueber dieses Blatt erreichbar: ihr Markup traegt
   die Farben und Groessen als inline-style im Artikel-HTML
   (color:#607960, font-size:15px/16px, direkt am div). Inline schlaegt jeden
   Selektor. Offen bleiben dadurch, gemessen am 15.09.2026:
     Ziffernkreise   #607960 auf #F0F4EA   4,28:1   Soll 4,5   9 Stellen
     Titelzeile      16 px    ausserhalb der Skala             9 Stellen
     Unterzeile      15 px    ausserhalb der Skala             9 Stellen
   Korrektur gehoert ins Markup von
   _blog/entwuerfe/ohss-ueberstimulation-ivf-vorbeugung.html, nicht hierher.
   Mit !important zu erzwingen waere ein Pflaster an der falschen Stelle. */


/* --- 8.4 Sprungziele unter der klebenden Kopfzeile -------------------------
   Gemessen: Die Oxygen-Kopfzeile ist auf dem Handy 122 px hoch, der
   Sprungabstand betrug dort clamp(104px,15vh,156px) = 126,6 px. Bleiben
   4,6 px Luft, die Ueberschrift klebte unter der Leiste.
   Paragraf 3.3: Ankerspruenge landen sichtbar UNTER der Kopfzeile.
   Auf 1440 ist die Leiste 93 px hoch, der Wert schadet dort nicht. */

body.kwk-ratgeber .kwk-seite [id]{ scroll-margin-top: clamp(146px, 15vh, 160px); }


/* --- 8.5 Beitragsbild auf dem Handy ----------------------------------------
   Gemessen bei 390x844: Kopfzeile 122 px, Beitragsbild 293 px (aspect-ratio
   4/3 ueber die volle Breite). Die H1 begann damit unterhalb der Falz, der
   erste Eindruck war Bild ohne Titel. Mit 2/1 bleibt das Bild bei 195 px und
   die Ueberschrift kommt ins Bild. */

@media (max-width: 860px){
  body.kwk-ratgeber .kwk-seite .buehne-bild{ aspect-ratio: 2 / 1; }
}


/* --- 8.6 Bewegung ----------------------------------------------------------
   Der Block in Abschnitt 7 deckte nur die Punktnavigation ab. Gemessen
   tragen 85 Elemente im Artikel Uebergaenge; ungedeckt blieben der
   Fortschrittsbalken, der eine LAYOUT-Eigenschaft animiert (height), die
   24 Listenhover und die Pfeile im Inhaltsverzeichnis.
   Paragraf 6.1. */

@media (prefers-reduced-motion: reduce){
  body.kwk-ratgeber .kwk-seite .fortschritt,
  body.kwk-ratgeber .kwk-seite .punkte li,
  body.kwk-ratgeber .kwk-seite .inhalt-liste a,
  body.kwk-ratgeber .kwk-seite .inhalt-liste .pfeil,
  body.kwk-ratgeber .kwk-seite .knoten .zahl,
  body.kwk-ratgeber .kwk-seite .etappe::before,
  body.kwk-ratgeber .kwk-seite .btn{ transition: none; }

  body.kwk-ratgeber .kwk-seite .punkte li:hover{ padding-left: 0; }
}


/* ---------------------------------------------------------------------------
   9 · Abbildungen
   Angehaengt am 15.09.2026. Bis dahin trugen die Abbildungen ihr Aussehen als
   style-Attribut im Artikel-Markup: 93 Inline-Stile, 25 verschiedene, alle
   innerhalb figure.abbildung. Inline schlaegt jeden Selektor, deshalb kam der
   Durchgang vom selben Tag (Abschnitt 8) nicht heran, und drei Werte standen
   ausserhalb der Groessenskala.

   Die Stile sind jetzt Klassen. Inline blieben genau drei Angaben, weil sie
   DATEN sind und nicht Gestaltung: die Balkenlaengen 95,2 / 15,0 / 5,0 Prozent.
   Der Artikeltext ist dabei unveraendert geblieben, Zeichen fuer Zeichen
   nachgemessen (20.163 Zeichen vorher wie nachher).

   Was sich gegenueber dem Inline-Stand aendert:
     Kartentitel     17   -> 19,5 px   Vorspannstufe
     Zeile           16   -> 17,5 px   Fliesstext
     Unterzeile      15   -> 14,5 px   Belegstufe
     Aufzaehlung     15   -> 17,5 px   Fliesstext
     Wert am Balken  15   -> 17,5 px   Fliesstext
     Kopfband        15   -> 17,5 px   Fliesstext
     Ziffer im Kreis 15   -> 14,5 px   Belegstufe
     Ziffernfarbe    #607960 -> --sage-darker   4,28:1 -> 5,64:1
     Wertfarbe gruen #607960 -> --sage-darker   eine Ziffernfarbe je Seite

   Die weissen Kopfbaender bleiben, wie sie waren: weiss auf #AA5F78 ergibt
   4,55:1, weiss auf #607960 ergibt 4,77:1. Beide halten AA, es gab keinen
   Grund, sie anzufassen.

   Gilt vorerst nur fuer den OHSS-Ratgeber, weil nur dort die Klassen im Markup
   stehen. Die uebrigen Ratgeber tragen ihre Abbildungen weiterhin inline; wer
   sie umstellt, erbt dieses Blatt ohne weitere Arbeit.
   --------------------------------------------------------------------------- */

/* --- Kartentitel --- */
body.kwk-ratgeber .kwk-seite .abbildung .abb-titel{
  font-size: 1.22rem; font-weight: 600; color: var(--ink);
  line-height: 1.35; margin: 0 0 4px;
}

/* --- Nummerierte Schrittfolge --- */
body.kwk-ratgeber .kwk-seite .abbildung .abb-schritte{ list-style: none; padding: 0; margin: 14px 0 0; }
body.kwk-ratgeber .kwk-seite .abbildung .abb-schritt{ position: relative; padding: 0 0 18px 50px; margin: 0; }

body.kwk-ratgeber .kwk-seite .abbildung .abb-linie{
  position: absolute; left: 17px; top: 36px; bottom: -10px;
  width: 2px; background: var(--sage);
}

body.kwk-ratgeber .kwk-seite .abbildung .abb-kreis{
  position: absolute; left: 0; top: 0; width: 34px; height: 34px;
  border-radius: 50%; background: var(--sage-pale);
  border: 1.5px solid var(--sage-darker); color: var(--sage-darker);
  font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

body.kwk-ratgeber .kwk-seite .abbildung .abb-zeile{
  font-size: 17.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35; padding-top: 3px;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-unter{
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px;
}

/* --- Aufzaehlung mit Punktmarke ---
   Die Marke sass auf top:8px, mittig zu einer 15-px-Zeile. Bei 17,5 px liegt
   die Mitte der ersten Zeile tiefer, deshalb 9,5px. */
body.kwk-ratgeber .kwk-seite .abbildung .abb-liste{ list-style: none; padding: 0; margin: 0; }
body.kwk-ratgeber .kwk-seite .abbildung .abb-punkt{
  position: relative; padding: 0 0 9px 18px;
  font-size: 17.5px; color: var(--ink); line-height: 1.45;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-marke{
  position: absolute; left: 0; top: 9.5px;
  width: 7px; height: 7px; border-radius: 50%;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-marke--rosa{ background: var(--rosa-deep); }
body.kwk-ratgeber .kwk-seite .abbildung .abb-marke--gruen{ background: var(--sage-dark); }

/* --- Balkendiagramm ---
   Die Fuellung traegt ihre Breite weiter inline: das ist der Messwert. */
body.kwk-ratgeber .kwk-seite .abbildung .abb-block{ margin: 0 0 16px; }
body.kwk-ratgeber .kwk-seite .abbildung .abb-serie{
  font-size: 14.5px; color: var(--ink); margin-bottom: 5px;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-reihe{ display: flex; align-items: center; gap: 9px; }
body.kwk-ratgeber .kwk-seite .abbildung .abb-balken{
  flex: 1 1 auto; height: 24px; background: var(--sage-pale);
  border-radius: 4px; overflow: hidden;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-fuellung{ height: 100%; border-radius: 4px; }
body.kwk-ratgeber .kwk-seite .abbildung .abb-fuellung--rosa{ background: var(--rosa-deep); }
body.kwk-ratgeber .kwk-seite .abbildung .abb-fuellung--gruen{ background: var(--sage-dark); }

body.kwk-ratgeber .kwk-seite .abbildung .abb-wert{
  flex: 0 0 auto; font-size: 17.5px; font-weight: 600;
  min-width: 76px; text-align: right;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-wert--gruen{ color: var(--sage-darker); }  /* 6,29:1 */
body.kwk-ratgeber .kwk-seite .abbildung .abb-wert--rosa{ color: var(--rosa-deep); }     /* 4,55:1 */

/* --- Zwei Spalten mit Kopfband --- */
body.kwk-ratgeber .kwk-seite .abbildung .abb-spalten{
  display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 14px;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-spalte{ flex: 1 1 230px; min-width: 200px; }
body.kwk-ratgeber .kwk-seite .abbildung .abb-band{
  color: #ffffff; font-size: 17.5px; font-weight: 600;
  padding: 9px 13px; border-radius: 5px; margin-bottom: 12px;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-band--rosa{ background: var(--rosa-deep); }   /* 4,55:1 */
body.kwk-ratgeber .kwk-seite .abbildung .abb-band--gruen{ background: var(--sage-dark); }  /* 4,77:1 */

body.kwk-ratgeber .kwk-seite .abbildung .abb-nachsatz{ margin-top: 12px; }


/* ---------------------------------------------------------------------------
   10 · Punkteraster ("x von 100")
   Angehaengt am 15.09.2026 auf Anfrage der Sitzung, die grafiken.py umstellt.
   Die Form kommt im OHSS-Ratgeber nicht vor; die Klassen greifen hier also
   nirgends. Sie stehen im Blatt, damit der Generator sie bedienen kann, ohne
   dass ungestyltes Markup auf Staging landet.

   Ein Punkteraster ist ein Icon-Array: hundert Punkte, davon x gefuellt. Fuer
   Risikoangaben ist das die ehrlichere Darstellung als eine Prozentzahl, weil
   es den Nenner mitzeigt. Genau daraus folgen die beiden Bedingungen unten.
   --------------------------------------------------------------------------- */

/* --- 10.1 Der Nenner muss sichtbar sein ------------------------------------
   Vorgeschlagen war eine Fuellung --sage-pale ohne Umriss. Gemessen kommt sie
   gegen die weisse Karte auf 1,12:1: Die 95 leeren Punkte verschwinden, und
   damit verschwindet das "von 100". WCAG 1.4.11 verlangt 3:1 fuer grafische
   Objekte, die zum Verstaendnis noetig sind.

   Eine einzelne Fuellfarbe loest das nicht. Gemessen ueber die ganze
   Salbei-Reihe gibt es keinen Wert, der gleichzeitig gegen Weiss und gegen die
   Beere 3:1 haelt - die Beere liegt in der Helligkeit genau dort, wo die
   tieferen Salbeitoene liegen:

     #F0F4EA  gegen weiss 1,12   gegen voll 4,08
     #B4C7B4  gegen weiss 1,78   gegen voll 2,55
     #7E9C7E  gegen weiss 3,02   gegen voll 1,50
     #607960  gegen weiss 4,77   gegen voll 1,05

   Deshalb traegt der leere Punkt seine Sichtbarkeit im UMRISS, nicht in der
   Fuellung. Das ist die uebliche Loesung fuer Icon-Arrays und haelt beide
   Bedingungen:

     Umriss --sage-zahl gegen weiss        3,21:1
     Fuellung leer gegen Fuellung voll     4,08:1

   Nebeneffekt: --sage-zahl war seit Abschnitt 8 ohne Verwendung, weil die
   Etappenziffer auf --sage-darker gewechselt ist. Das Token bekommt hier
   wieder eine Aufgabe, statt verwaist im Blatt zu stehen. */

body.kwk-ratgeber .kwk-seite .abbildung .abb-punkt-leer{
  fill: var(--sage-pale);
  stroke: var(--sage-zahl);
  stroke-width: 1;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-punkt-voll{
  fill: var(--rosa-deep);
  stroke: none;
}

/* --- 10.2 Die Zahl bleibt auf der Skala ------------------------------------
   Vorgeschlagen waren 52 px. Das waere der groesste Wert im Artikelkoerper -
   groesser als die Abschnittsueberschrift mit 33,6 px und groesser als die
   Etappenziffer mit 46 px. Eine Kennzahl innerhalb einer Abbildung darf nicht
   lauter sein als die Ueberschrift, unter der sie steht; DESIGN.md schliesst
   die Hero-Metric-Schablone ausdruecklich aus.

   27,2 px ist bereits auf der Seite in Gebrauch (Ueberschrift im Schlussblock),
   fuegt also keinen neuen Wert hinzu und bleibt der Abschnittsueberschrift
   deutlich untergeordnet. Bei 27,2 px gilt die 3:1-Schwelle fuer grosse
   Schrift; --rosa-deep erreicht 4,55:1 und haelt sogar die strengere. */

body.kwk-ratgeber .kwk-seite .abbildung .abb-raster{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 26px; margin-top: 14px;
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-raster-feld{ flex: 1 1 220px; min-width: 200px; }
body.kwk-ratgeber .kwk-seite .abbildung .abb-raster-feld svg{ width: 100%; height: auto; display: block; }

body.kwk-ratgeber .kwk-seite .abbildung .abb-raster-zahl{
  font-size: 27.2px; font-weight: 700; line-height: 1;
  color: var(--rosa-deep);
}
body.kwk-ratgeber .kwk-seite .abbildung .abb-raster-bezug{
  font-size: 17.5px; color: var(--ink-soft); margin-top: 2px;
}

/* --- 10.3 Vorsatzzeile -----------------------------------------------------
   Eigene Klasse, nicht .abb-unter: die sitzt mit margin-top 2px unter einer
   Schrittzeile, hier steht die Zeile zwischen Titel und Feld. Begruendung
   der anfragenden Sitzung uebernommen, Werte auf die Belegstufe gesetzt. */

body.kwk-ratgeber .kwk-seite .abbildung .abb-vorsatz{
  font-size: 14.5px; color: var(--ink-soft); margin: 2px 0 14px;
}

/* ==== RATGEBER-DESIGN ENDE ==== */

/* ==== WISSEN-HUB ANFANG ====
   Angehaengt am 17.09.2026 fuer die Hubseite /wissen/, Praefix .wh-.
   Quelle: _entwuerfe/wissen-hub/wissen-hub.css
   Auffrischen oder entfernen: ins_blatt.py im selben Ordner. ==== */
/* Hubseite /wissen/: Anliegen-Einstieg und Bento-Raster.
   Alle Selektoren mit Praefix .wh-, die Klassen kommen nur auf /wissen/ vor.
   Motion nach kwk-design: 160 ms, ease-out cubic-bezier(0.23, 1, 0.32, 1).
   Keine Einblendung beim Scrollen (Pruefkatalog §6.2). */

.kwk-seite .wh-anliegen{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
.kwk-seite .wh-anliegen-karte{background:var(--band);border:1px solid var(--line);border-radius:18px;
  padding:22px 22px 10px;display:flex;flex-direction:column}
.kwk-seite .wh-anliegen-karte h3{font-size:20px;line-height:1.2;margin:0 0 10px}

.kwk-seite .wh-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:22px}
.kwk-seite .wh-kachel{grid-column:span 12;position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:22px;padding:26px 26px 18px}
.kwk-seite .wh-kachel--ratgeber{background:var(--sage-pale)}
.kwk-seite .wh-kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;
  align-items:start;margin-bottom:14px}
.kwk-seite .wh-kopfzeile > :not(.wh-icon){grid-column:1}
.kwk-seite .wh-kopfzeile h3{font-size:20px;line-height:1.2;margin:6px 0 8px}
.kwk-seite .wh-kopfzeile p{font-size:14.5px;line-height:1.55;color:var(--ink-body);margin:0;max-width:44ch}
.kwk-seite .wh-icon{grid-column:2;grid-row:1 / span 3;height:64px;width:auto;margin-top:-4px}

.kwk-seite .wh-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.kwk-seite .wh-liste li{margin:0;padding:0;border-bottom:1px solid var(--line)}
.kwk-seite .wh-liste li::before{content:none}
.kwk-seite .wh-liste a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:48px;padding:10px 2px;font-size:15.5px;line-height:1.4;color:var(--ink);text-decoration:none;
  transition:color 160ms cubic-bezier(.23,1,.32,1)}
.kwk-seite .wh-liste a::after{content:"\203A";flex:none;font-size:20px;line-height:1;color:var(--cta-schrift);
  transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.kwk-seite .wh-liste a:hover{color:var(--cta-schrift)}
.kwk-seite .wh-liste a:hover::after{transform:translateX(3px)}

.kwk-seite .wh-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kwk-seite .wh-chips li{margin:0;padding:0}
.kwk-seite .wh-chips li::before{content:none}
.kwk-seite .wh-chips a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);
  font-size:15.5px;line-height:1.2;text-decoration:none;
  transition:border-color 160ms cubic-bezier(.23,1,.32,1),color 160ms cubic-bezier(.23,1,.32,1),
    transform 160ms cubic-bezier(.23,1,.32,1)}
.kwk-seite .wh-chips a:hover{border-color:var(--rosa-deep);color:var(--cta-schrift);transform:translateY(-1px)}
.kwk-seite .wh-chips a:active{transform:translateY(0)}

.kwk-seite .wh-mehr{margin-top:auto;padding-top:14px;align-self:flex-start;display:inline-flex;
  align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:15.5px;
  color:var(--cta-schrift);text-decoration:none}
.kwk-seite .wh-mehr .wh-pfeil{width:30px;height:30px;border-radius:50%;background:var(--rosa-pale);
  display:grid;place-items:center;
  transition:background-color 160ms cubic-bezier(.23,1,.32,1),color 160ms cubic-bezier(.23,1,.32,1),
    transform 160ms cubic-bezier(.23,1,.32,1)}
.kwk-seite .wh-mehr:hover .wh-pfeil{background:var(--rosa-deep);color:#fff;transform:translateX(3px)}

@media (min-width:760px){
  .kwk-seite .wh-anliegen{grid-template-columns:1fr 1fr}
  .kwk-seite .wh-kachel{grid-column:span 6}
  .kwk-seite .wh-kachel--recht{grid-column:span 12}
}
@media (min-width:1100px){
  .kwk-seite .wh-anliegen{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kwk-seite .wh-kachel--ratgeber{grid-column:span 7}
  .kwk-seite .wh-kachel--rechner{grid-column:span 5}
  .kwk-seite .wh-kachel--lexikon,.kwk-seite .wh-kachel--fragen,.kwk-seite .wh-kachel--recht{grid-column:span 4}
}
@media (prefers-reduced-motion:reduce){
  .kwk-seite .wh-liste a,.kwk-seite .wh-liste a::after,.kwk-seite .wh-chips a,
  .kwk-seite .wh-mehr .wh-pfeil{transition:none}
  .kwk-seite .wh-liste a:hover::after,.kwk-seite .wh-chips a:hover,
  .kwk-seite .wh-mehr:hover .wh-pfeil{transform:none}
}
/* ==== WISSEN-HUB ENDE ==== */

/* ---- Eingebettete Fremdtexte (DataReporter-Datenschutz auf /datenschutz/): das Blatt
   kennt nur direkte Kinder von .auf; der Fremdtext liegt in einem eigenen Container.
   Zeilenlaenge und Ueberschriftenstufen auf die Linie des Blatts (Audit 17.09.2026, P-1400). */
.kwk-seite .auf .dr-inhalt p,.kwk-seite .auf .dr-inhalt li{max-width:68ch;font-size:16.5px;line-height:1.6}
.kwk-seite .auf .dr-inhalt h2,.kwk-seite .auf .dr-inhalt h3,.kwk-seite .auf .dr-inhalt h4{font-size:1.08rem;font-weight:600;
  color:var(--ink);margin:28px 0 8px;max-width:68ch}
.kwk-seite .auf .dr-inhalt table{max-width:100%}
.kwk-seite .auf .dr-inhalt h5,.kwk-seite .auf .dr-inhalt h5 span{color:var(--ink);font-size:1rem;font-weight:600}
/* Karten-Platzhalter von DataReporter (Google Maps vor der Zustimmung): Link war 1,78:1 auf Weiss. */
.kwk-seite .cc-tag-placeholder .cc-tag-info a{color:var(--sage-darker);text-decoration:underline}