/* bembel.ai – Rechtstext-Seiten (Impressum, Datenschutz, 404).
   1:1 aus dem Prototyp uebernommen; Tokens und Reset kommen aus bembel_ai.css.
   Kopf-/Fusszeile: Die eigene Kopf- und Fusszeile der Rechtstext-Seiten aus dem Prototyp
   (nav, .nav-inner, .brand, footer, .footer-*) ist in Schritt 5 entfallen. Alle Seiten
   benutzen jetzt die der Startseite (site_header.html / site_footer.html, gestaltet in
   site-chrome.css). Die Element-Regeln fuer Fliesstext (p, a, ul, li) sind darum auf
   <main> begrenzt, damit sie nicht in Kopf- und Fusszeile hineinwirken. */

  /* Kopf/Fuss: Der Zurueck-Link stand in der eigenen Kopfzeile; er steht jetzt als erstes
     Element in <main> (Abstand siehe ERGAENZUNGEN), Werte unveraendert.
     Layout: Trefffläche 23.1px -> ueber 24px (WCAG 2.5.8) durch etwas Innenabstand. */
  .back{font-size:14px;color:var(--text-mid);text-decoration:none;
        display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:3px 0}
  .back:hover{color:var(--navy)}

  main{max-width:900px;margin:0 auto;padding:4rem 2rem 5rem}
  .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
           color:var(--navy-light);margin-bottom:.75rem}
  /* Typografie: text-wrap:balance neu (kein Prototyp-Wert veraendert), wie home.css .section-title. */
  h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;color:var(--navy);
     letter-spacing:-.02em;line-height:1.15;margin-bottom:1rem;text-wrap:balance}
  .lead{font-size:1.05rem;color:var(--text-mid);max-width:640px;margin-bottom:2.5rem}
  h2{font-size:1.25rem;font-weight:700;color:var(--navy);margin:2.75rem 0 .9rem;
     padding-top:1.75rem;border-top:1px solid var(--lavender-mid)}
  h3{font-size:1rem;font-weight:700;color:var(--navy);margin:1.5rem 0 .5rem}
  /* Kopf/Fuss: p, a, ul, li -> main p, main a, main ul, main li, sonst bekaemen die Listen
     und Links der gemeinsamen Kopf-/Fusszeile Einzug, Randabstand und Farbe von hier.
     Innerhalb von <main> wirken sie wie vorher (alle Klassen-Regeln unten bleiben staerker). */
  /* Typografie: hyphens:auto neu auf main p/li – lange deutsche Komposita (z.B.
     "Datenschutzerklaerung") koennen in der schmalen 680px-Spalte sonst grosse Wortabstaende
     oder Ueberlauf verursachen; html[lang="de"] liefert das Trennmuster. */
  main p{margin-bottom:.9rem;color:var(--text-mid);max-width:680px;hyphens:auto}
  address{font-style:normal;color:var(--text-mid);margin-bottom:.9rem;line-height:1.8}
  main a{color:var(--navy-light)}
  main ul{margin:0 0 1rem 1.15rem;color:var(--text-mid);max-width:680px}
  main li{margin-bottom:.4rem;hyphens:auto}

  .toc{background:var(--lavender);border-radius:12px;padding:1.35rem 1.6rem;margin-bottom:1rem;max-width:680px}
  .toc p{font-weight:700;color:var(--navy);margin-bottom:.6rem}
  .toc ol{margin:0 0 0 1.15rem;color:var(--text-mid);font-size:14px}
  /* Layout: Trefffläche 18px -> ~28px hoch (WCAG 2.5.8); Innenabstand auf dem Inline-Link
     verschiebt den Text nicht, li{margin-bottom:.4rem} bleibt als Zeilenabstand erhalten. */
  .toc a{text-decoration:none;padding:5px 0}
  .toc a:hover{text-decoration:underline}

  .ph{display:inline-block;background:var(--lavender);color:var(--navy);
      border:1px dashed var(--navy-light);border-radius:var(--radius-sm);
      padding:1px 8px;font-size:.92em;font-weight:600}
  /* Distill: Rohe Hex-Werte -> Tokens aus bembel_ai.css (audit.md P3, gleiche berechnete
     Farben). Der Hinweiskasten ist eine Editier-Hilfe und entfaellt vor dem Launch (TASKS.md). */
  .note{background:var(--note-bg);border:1px solid var(--note-border);border-left:3px solid var(--note-border-strong);
        border-radius:var(--radius-sm);padding:1rem 1.15rem;margin:1.25rem 0;
        font-size:14px;color:var(--note-text);max-width:680px}
  .note b{color:var(--note-text-strong)}
  .note p{color:inherit;margin-bottom:.5rem}
  .note p:last-child{margin-bottom:0}
  .ok{background:var(--note-ok-bg);border-color:var(--note-ok-border);border-left-color:var(--note-ok-border-strong);color:var(--note-ok-text)}
  .ok b{color:var(--note-ok-text-strong)}

  /* Kopf/Fuss: footer, .footer-inner, .footer-links, .footer-copy, .footer-brand entfallen
     (site-chrome.css). Den Abstand zwischen Inhalt und Fusszeile (margin-top:4rem am footer)
     haelt jetzt main, siehe ERGAENZUNGEN. */
  @media(max-width:600px){
    main{padding:2.5rem 1.25rem 3rem}
  }

  /* ==================================================================
     ERGAENZUNGEN GEGENUEBER DEM PROTOTYP
     ================================================================== */

  /* Rechtstexte kommen aus dem Editor; Wagtail rahmt sie in .rich-text. */
  .rich-text > *:last-child { margin-bottom: 0; }
  address p { margin: 0; max-width: none; }
  .legal-stand { margin-top: 2.5rem; }
  .legal-stand p { font-size: 14px; color: var(--text-light); margin-bottom: 0; }

  /* Variante "Anbieterkennzeichnung": erste Ueberschrift ohne Trennlinie. */
  .legal--statement .lead { margin-bottom: 3rem; }
  .legal--statement main h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

  /* Fokus-Sichtbarkeit (BFSG / WCAG 2.1 AA). Kopf- und Fusszeile bringen ihre Regeln aus
     site-chrome.css mit. */
  a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 3px;
  }

  /* Gemeinsame Kopf- und Fusszeile (site-chrome.css) */
  /* Die Kopfzeile ist position:fixed und belegt keinen Platz im Fluss (die alte eigene war
     sticky). Ohne Versatz laege der Seitenanfang unter ihr. --nav-height ist ihre Hoehe.
     margin-bottom uebernimmt den Abstand zur Fusszeile, den vorher footer{margin-top:4rem}
     gesetzt hat. Sprungziele (Inhaltsverzeichnis) raeumt html{scroll-padding-top:80px}
     in bembel_ai.css frei. */
  main { margin-top: var(--nav-height); margin-bottom: 4rem; }
  main > .back { margin-bottom: 1.75rem; }

  /* Politur (Schritt 7): kurze Seiten (die 404, kuenftig z.B. eine kurze Erklaerung) liessen
     unter der Fusszeile eine weisse Flaeche stehen – die Fusszeile hing mitten im Fenster.
     body als Spalte ueber die volle Fensterhoehe, main nimmt den Rest: die Fusszeile steht
     unten. Lange Seiten sind unveraendert (main ist dort ohnehin hoeher). width:100% haelt
     main als Flex-Kind bei max-width:900px + margin:0 auto so breit wie im Blocklayout. */
  body.template-legal-page {
    display: flex; flex-direction: column;
    min-height: 100vh;
  }
  body.template-legal-page > main { flex: 1 0 auto; width: 100%; }

  /* Reflow: unter 360px 1.7rem statt 1.9rem (WCAG 1.4.10). "Datenschutzerklaerung" ist ein
     einziges Wort und war bei 30.4px 307px breit – bei 320px Fensterbreite (280px Spalte)
     schob es die Seite 7px seitlich. Bei 27.2px ist es 275px breit und passt ab 320px
     ungetrennt; alle Seiten mit legal.css (Impressum, Datenschutz, Datenschutz-Einstellungen,
     404) bekommen dieselbe Groesse, damit die Ueberschriften einheitlich bleiben.
     overflow-wrap/hyphens sind nur das Netz fuer noch schmalere Fenster oder laengere
     Titel aus dem CMS: erst trennen (hyphens:auto braucht lang="de", base.html), sonst
     umbrechen statt ueberlaufen. Ab 360px unveraendert. */
  @media (max-width: 359px) {
    h1 { font-size: 1.7rem; overflow-wrap: break-word; hyphens: auto; }
  }