/* ==========================================================================
   rauch-coach.css - Ergänzung zu style.css (übernommen von ki.rauch.coach)

   style.css bleibt unverändert, damit sie bei einer Aktualisierung des
   Nachbarprojekts einfach ersetzt werden kann. Hier steht nur, was
   rauch.coach zusätzlich braucht: ein Menü mit zwei Untergruppen, weil diese
   Seite 27 Seiten hat und nicht 15.
   ========================================================================== */

.nav__reihe { list-style: none; margin: 0; padding: 0;
              display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.nav__reihe > li { position: relative; }

.kopf__nav a, .kopf__nav label {
  color: inherit; text-decoration: none; cursor: pointer;
  font-size: 15px; line-height: 1.6; padding: 6px 0; display: inline-block;
}
.kopf__nav a:hover, .kopf__nav label:hover { text-decoration: underline; }
.kopf__nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; }

.nav__gruppe label::after { content: " ▾"; font-size: 13px; }
.nav__schalter { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nav__schalter:focus-visible + label { outline: 2px solid #C9A84C; outline-offset: 3px; }

/* R8: Grund und Schriftfarbe stehen am Bauteil selbst, nicht in der
   :checked-Regel. Sonst ist der Text navy auf navy und nur durch
   display:none gerettet - genau der Fehler „creme auf creme" in Blau. */
.nav__unter {
  display: none; list-style: none; margin: 0; padding: 14px 18px;
  background: #FDFBF6;
  color: #1B3A6B;
  border: 1px solid rgba(27,58,107,.18);
  border-radius: 18px;            /* R6 */
  min-width: 260px; max-height: 70vh; overflow-y: auto;
}
.nav__schalter:checked ~ .nav__unter {
  display: block; position: absolute; top: 100%; left: 0; z-index: 40;
}
.nav__unter a { color: #1B3A6B; display: block; padding: 5px 0; }

.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 16px; z-index: 60; }

@media (max-width: 900px) {
  .nav__reihe { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav__schalter:checked ~ .nav__unter { position: static; min-width: 0; width: 100%; }
}

/* Deutsche Komposita in Versalüberschriften sprengen sonst schmale Schirme */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

/* Abstand Überschrift zu Textblock. Steht bei ki.rauch.coach als inline-style
   an jedem .modul - hier einmal zentral, damit ihn niemand vergisst. */
.block .zeilen + .modul, .block .zeilen + .fragen { margin-top: 26px; }

/* --- Rechtstexte: eigene Gattung (R2: eine creme-Fläche, R5: Zeilenhöhe 1,70) --- */
body.langtext { line-height: 1.70; }
.legal-block .inhalt { max-width: 46rem; }
.legal-content h2 {
  font-size: 26px;                /* R4 */
  margin-top: 2.4em;
  color: #1B3A6B;                 /* R8 */
}
.legal-content h3 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: 19px;                /* R4 */
  margin-top: 1.8em;
  color: #1B3A6B;                 /* R8 */
}
.legal-content p, .legal-content li { font-size: 15px; }   /* R4: Rechtstexte */
.legal-content ul { padding-left: 1.3em; }
.legal-content li { margin-bottom: .5em; }
.legal-stand { opacity: .7; font-size: 13px; }

/* --- Textlinks im Fließtext -----------------------------------------------
   R8: Jedes Bauteil setzt seine Schriftfarbe selbst. Ohne diese Regeln sind
   Links im Fließtext Browser-Blau (#0000EE) und auf navy praktisch unlesbar
   (27 Helligkeitsstufen Abstand). Gefunden bei der Kontrastmessung über alle
   28 Seiten, nicht per Augenschein.
   R7: Gold nur auf dunklem Grund, auf hellem Grund navy. */

.block--navy .modul a,
.block--navy .frage__a a,
.block--navy .lead a {
  color: #C9A84C;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.block--navy .modul a:hover,
.block--navy .frage__a a:hover,
.block--navy .lead a:hover { color: #FDFBF6; }

.block--creme .modul a,
.block--creme .frage__a a,
.block--creme .lead a,
.legal-content a {
  color: #1B3A6B;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.block--creme .modul a:hover,
.block--creme .frage__a a:hover,
.legal-content a:hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   Entwurfskennzeichnung (29.08.2026)
   Erscheint nur bei `python _bauen2.py --entwurf`, also solange eine Seite
   noch offene Rückfragen an Willi trägt. R8: Grund und Schriftfarbe stehen
   beide am Bauteil, nichts wird geerbt.
   ========================================================================== */

.entwurfsbalken {
  margin: 0; padding: 12px 24px;
  width: 100%; max-width: none; box-sizing: border-box; display: block;
  background: #7A2E2E; color: #FFFFFF;
  font-size: 15px; line-height: 1.5; font-weight: 700;
  text-align: center;
}

.offene-frage {
  background: #FBEFEF; color: #5E2020;
  max-width: 62ch;
  border-left: 4px solid #7A2E2E;
  padding: 12px 16px; margin: 16px 0;
  font-size: 15px; line-height: 1.6;
}
.offene-frage strong { color: #7A2E2E; }

/* ==========================================================================
   ENTWURF, NICHT AKTIV: KI-Kennzeichnung per CSS statt ins Bild gebrannt
   Stand 29.08.2026. Willi ist mit der eingebrannten Fassung weitergegangen,
   eine ausdrueckliche Entscheidung steht aus. Zum Aktivieren die Kommentar-
   zeichen entfernen UND im Bildskript die Kennzeichnung abschalten, sonst
   steht sie doppelt.

   Warum diese Fassung besser waere: Das Bild ist 1200 px breit, wird aber je
   nach Seite und Geraet auf 342 bis 674 px dargestellt. Eine eingebrannte
   Kennzeichnung verkleinert sich um Faktor 1,8 bis 3,5 mit und verliert dabei
   Schaerfe. Diese hier ist immer gleich gross und immer scharf.
   Was sie nicht kann: Gibt jemand die Bilddatei separat weiter, fehlt der
   Hinweis. Auf der Website selbst ist Art. 50 KI-VO in beiden Faellen erfuellt.

.bildrahmen::before {
  content: "KI-generiert";
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  pointer-events: none;
}

.bildrahmen--echt::before { content: none; }

   ========================================================================== */