/* bembel.ai – Kopf- und Fusszeile, fuer alle Seiten (geladen von base.html,
   nach bembel_ai.css und vor dem seiteneigenen Stylesheet).

   Herkunft: Die Regeln oberhalb von ERGAENZUNGEN sind die Abschnitte NAVIGATION,
   FOOTER, MOBILE NAV und FOOTER COPYRIGHT des Prototyps (Prototype/bembel_ai_v3.html)
   sowie die dazugehoerigen Zeilen aus seinen @media-Bloecken. Bis Schritt 5 standen sie
   in home.css; sie sind unveraendert hierher verschoben, in derselben Reihenfolge und mit
   ihren Kommentaren ("Kontrast: …", "Layout: …", "Semantik: …"), die jede
   Abweichung vom Prototyp an der Regel selbst erklaeren. Es gilt dieselbe Paritaetsregel
   wie in home.css/legal.css: oberhalb des Markers steht der Prototyp, Aenderungen an einem
   Prototyp-Wert stehen inline mit Kommentar, Neues steht unterhalb des Markers.

   Die Rechtstext-Seiten hatten bis dahin eine eigene, einfachere Kopf- und Fusszeile
   (legal_header.html / legal_footer.html, gestaltet in legal.css). Die ist entfallen:
   jede Seite benutzt jetzt core/includes/site_header.html und site_footer.html. */

  /* ========== NAVIGATION ========== */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: var(--white-a96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--navy-a10);
    padding: 0 2.5rem; height: 68px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
  .nav-logo { width:32px; height:32px; object-fit:contain; }
  .nav-brand-text { display:flex; flex-direction:column; gap:2px; }
  .nav-wm { font-size:19px; font-weight:700; color:var(--navy); letter-spacing:-.02em; line-height:1.1; }
  /* Typografie: 9.5px -> 11px (Lesbarkeits-Untergrenze, audit.md P3); letter-spacing
     .22em -> .16em, sonst passt die Marke bei 390px nicht mehr neben den Menue-Button
     (siehe @media (max-width:600px) unten, das die Treffflaeche zurueckgewinnt). .16em liegt
     genau in der Spannweite, die die uebrigen Beschriftungen dieses Systems fuer "getrackt"
     verwenden (.12em-.15em bei den Eyebrows/Labels) – der Slogan bleibt spuerbar weiter
     getrackt als sie, aber nicht mehr aussergewoehnlich. */
  .nav-slogan {
    font-family:'DM Sans',sans-serif;
    font-size:11px; font-weight:400;
    letter-spacing:.16em; text-transform:lowercase;
    color:var(--text-mid); line-height:1;
  }
  .nav-links { display:flex; align-items:center; gap:2.2rem; list-style:none; }
  .nav-links a { text-decoration:none; color:var(--text-mid); font-size:14px; letter-spacing:.01em; transition:color .2s; }
  .nav-links a:hover { color:var(--navy); }
  /* Distill: Selektor .nav-cta -> .nav-links .nav-cta, !important entfernt (audit.md P3).
     .nav-links a (Klasse+Typ, Spezifitaet 0,1,1) stand im Quelltext nach dieser Regel und war
     spezifischer als das blosse .nav-cta (0,1,0) auf demselben <a>, daher gewann sie bisher ohne
     !important. .nav-links .nav-cta (zwei Klassen, 0,2,0) schlaegt .nav-links a regulaer –
     .nav-cta liegt im Markup immer innerhalb von .nav-links (site_header.html), keine
     Pixelaenderung. */
  .nav-links .nav-cta {
    background:var(--navy); color:#fff;
    padding:8px 20px; border-radius:var(--radius-sm);
    font-weight:500; font-size:14px;
    transition:background .2s;
  }
  .nav-links .nav-cta:hover { background:var(--navy-light); }
  .nav-mobile-toggle {
    display:none; flex-direction:column; gap:5px;
    cursor:pointer;
    /* Layout: Treffflaeche 30x24 -> 44x44 (WCAG 2.5.8); die Balken selbst bleiben 22x16.
       Der negative Rand gleicht den Mehr-Innenabstand aus, damit der Button im Layout weiter
       nur 30x24 belegt – sonst bricht auf dem Handy der Slogan neben der Marke um. */
    padding:14px 11px; margin:-10px -7px;
  }
  .nav-mobile-toggle span {
    display:block; width:22px; height:2px;
    background:var(--navy); border-radius:2px;
  }

  /* ========== FOOTER ========== */
  footer { background: var(--navy-dark); color: var(--white-a60); padding: 40px 2rem; position: relative; }
  .footer-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.5rem;
  }
  .footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .footer-logo { width: 28px; height: 28px; object-fit: contain; }
  .footer-wordmark { font-size: 16px; font-weight: 700; color: var(--white); }
  /* Typografie: 9.5px -> 11px, letter-spacing .22em -> .16em – derselbe Text wie .nav-slogan,
     gleiche Begruendung dort. */
  .footer-tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px; font-weight: 400;
    letter-spacing: .16em; text-transform: lowercase;
    /* Kontrast: .4 -> .5 (3.66:1 -> 4.91:1 auf navy-dark) */
    color: var(--white-a50); line-height: 1;
  }
  .footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
  /* Layout: Trefffläche 17px -> ~29px hoch (WCAG 2.5.8); Innenabstand auf einem Inline-Link
     verschiebt keinen Text und vergroessert nur die klickbare Flaeche. */
  .footer-links a { color: var(--white-a50); text-decoration: none; font-size: 13px; transition: color 0.2s; padding: 6px 0; }
  .footer-links a:hover { color: var(--white); }

  /* ========== RESPONSIVE (nur die Kopf-/Fusszeilen-Zeilen) ========== */
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-mobile-toggle { display: flex; }
  }
  @media (max-width: 600px) {
    /* Typografie: nav-Innenabstand 2.5rem -> 1.25rem (deckt sich mit dem section-Wert im
       selben Breakpoint in home.css) – gibt der jetzt 11px statt 9.5px breiten Marke die
       Breite zurueck, die der groessere Slogan braucht, ohne den Menue-Button zu verschieben
       (er bleibt rechtsbuendig). Ohne diese Korrektur wuerde der Slogan schon bei 390px
       umbrechen; jetzt bleibt er bis 360px einzeilig, bei 320px bricht er wie zuvor auf zwei
       Zeilen (siehe CLAUDE.md, Abweichung 11: 320px ist mit "technology that people
       understand" bei jeder vertretbaren Groesse nicht einzeilig zu halten). */
    nav { padding: 0 1.25rem; }
    .footer-inner { flex-direction: column; text-align: center; }
    /* Layout: die Linkzeilen ebenfalls zentriert. Im Prototyp standen Copyright und Marke
       mittig, die umbrechenden Linkzeilen darunter aber linksbuendig (text-align wirkt nicht
       auf Flex-Kinder). Mittig statt linksbuendig, weil das die erklaerte Absicht dieser
       Mobil-Regel ist (text-align:center) und nur die Linkzeilen bewegt. */
    .footer-links { justify-content: center; }
  }

  /* ========== MOBILE NAV ========== */
  /* Semantik: das Menue liegt jetzt im <nav> (Landmark). nav hat backdrop-filter und ist damit
     Bezugsrahmen fuer position:fixed – top/left/right bleiben Viewport-Koordinaten, weil nav bei
     0/0/0 sitzt. Neu ist die Stapelung: vorher lag die Leiste (z 100) ueber den obersten 8px des
     Menues (z 99), jetzt laege das Menue darueber und verdeckte die Trennlinie der Leiste.
     Darum top:60px -> 68px und padding-top 1.25rem -> calc(1.25rem - 8px): die Links stehen
     pixelgenau wie vorher, und die Trennlinie bleibt sichtbar. */
  .nav-mobile-menu { display:none; position:fixed; top:68px; left:0; right:0; background:var(--white-a98); backdrop-filter:blur(8px); border-bottom:1px solid var(--lavender-mid); padding:calc(1.25rem - 8px) 1.5rem 1.5rem; z-index:99; flex-direction:column; gap:0; }
  .nav-mobile-menu.is-open { display:flex; }
  .nav-mobile-menu li { list-style:none; border-bottom:1px solid var(--lavender); }
  .nav-mobile-menu li:last-child { border-bottom:none; }
  .nav-mobile-menu a { display:block; padding:0.85rem 0; color:var(--navy); text-decoration:none; font-size:16px; font-weight:500; }
  .nav-mobile-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-mobile-toggle.is-open span:nth-child(2) { opacity:0; }
  .nav-mobile-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .nav-mobile-toggle span { transition:transform 0.2s, opacity 0.2s; }

  /* ========== FOOTER COPYRIGHT ========== */
  /* Kontrast: .4 -> .5 (3.66:1 -> 4.91:1 auf navy-dark) */
  /* Layout: aus position:absolute (Prototyp) in den Flex-Fluss von .footer-inner geholt.
     Absolut mit links:2.5rem bezog sich der Text auf den Viewport-Rand statt auf die
     1100px-Spalte und ueberlappte dadurch unterhalb von ca. 1450px die Wortmarke
     (Desktop) bzw. die Links (Mobile) – siehe CLAUDE.md, Abweichungen vom Prototyp.
     Steht seit der Aufteilung der Fusszeile in .footer-meta, als Anfang der Zeile mit der
     Gruppe "Rechtliches" (ERGAENZUNGEN unten, Abschnitt 3). */
  /* Layout: 14px -> 12px – die Copyright-Zeile ist jetzt eine Zeile mit den Links der Gruppe
     "Rechtliches" (12px) und dieser wie ihr gegenueber der Fussnavigation (13px) nachgeordnet. */
  .footer-copy { font-size: 12px; color: var(--white-a50); }


  /* ========== MODAL (Grundform) ========== */
  /* Kopf/Fuss: unveraendert aus dem Abschnitt MODAL von home.css hierher verschoben (samt der
     640px-Zeile aus dessen Media-Query), weil die Datenschutz-Einstellungen auf jeder Seite ein
     Dialog sind. Was nur die Dialoge der Startseite betrifft (.modal-box h2, .modal-title,
     .modal-lead …), steht weiter in home.css und kommt dort spaeter in der Kaskade. */
  .modal-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 1000;
    background: var(--scrim);
    backdrop-filter: blur(4px);
    align-items: center; justify-content: center;
    padding: 1.5rem;
  }
  .modal-overlay.is-open { display: flex; }
  .modal-box {
    background: var(--white);
    border-radius: 16px;
    max-width: 860px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    padding: 3rem;
    position: relative;
    animation: modalIn 0.25s ease;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
  }
  .modal-close {
    position: absolute; top: 1.25rem; right: 1.25rem;
    width: 36px; height: 36px;
    background: var(--lavender); border: none; border-radius: 50%;
    font-size: 1.2rem; color: var(--navy);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
  }
  .modal-close:hover { background: var(--lavender-mid); }
  @media (max-width: 640px) { .modal-box { padding: 2rem 1.25rem; } }


  /* ==================================================================
     ERGAENZUNGEN GEGENUEBER DEM PROTOTYP
     Aus den gleichnamigen Abschnitten von home.css mitgenommen, soweit sie
     Kopf- oder Fusszeile betreffen; dazu die Datenschutz-Einstellungen (7) und
     Nachtraege zur Fusszeile (3, 8).
     ================================================================== */

  /* --- 1. Ehemalige Inline-Styles ---------------------------------- */
  .nav-mobile-toggle { background: none; border: none; font: inherit; color: inherit; }

  /* --- 2. Fokus-Sichtbarkeit (BFSG / WCAG 2.1 AA) ------------------- */
  /* Gleiche Werte wie die allgemeine Fokusregel in home.css, hier aber auf Kopf- und
     Fusszeile begrenzt, damit sie auf jeder Seite gilt (die Rechtstext-Seiten hatten
     keine Regel fuer den Menue-Button). Auf dunklem Grund ist der Ring hell. */
  nav a:focus-visible,
  nav button:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 3px;
  }
  footer a:focus-visible {
    outline: 2px solid var(--lavender-mid);
    outline-offset: 2px;
    border-radius: 3px;
  }

  /* --- 3. Fusszeile: Marke | Fussnavigation + Copyright/Rechtliches --------- */
  /* Layout: zwei Gruppen statt einer Liste (site_footer.html, NavigationSettings.footer_menu
     und .legal_menu). Links die Marke; rechts ein Block aus der Fussnavigation und darunter,
     kleiner, der Zeile aus Copyright und "Rechtliches" (Impressum, Datenschutz,
     Datenschutz-Einstellungen). Die beiden Zeilen stehen linksbuendig zueinander. Mit neun
     Links in einer Liste passte die Fusszeile ab 1024px nicht mehr in eine Zeile neben die
     Marke; so passt sie ab etwa 820px. Darunter bricht der Block unter die Marke um (flex-wrap
     von .footer-inner), ab 600px steht alles zentriert untereinander (Abschnitt RESPONSIVE
     oben und unten). Zwischen den beiden Zeilen .5rem (rund 18px von Schrift zu Schrift):
     enger als zwischen Marke und Block, damit sie als ein Block lesen; die Treffflaechen
     beruehren sich nicht. font-size an den Containern: die Zeilenhoehe folgt der Schrift
     (12px bzw. 13px) statt den 16px des Fusszeilen-Grunds – so bleibt die Fusszeile auf
     breiten Schirmen nah an ihrer Hoehe vor dem neunten Link. Die Fussnavigation erst ab
     601px: darunter bleiben ihre umbrechenden Zeilen wie in Abschnitt 8 bemessen. */
  .footer-nav { display: flex; flex-direction: column; align-items: flex-start; row-gap: .5rem; }
  @media (min-width: 601px) {
    .footer-links { font-size: 13px; }
  }
  .footer-meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; font-size: 12px;
  }
  .footer-legal { display: flex; flex-wrap: wrap; list-style: none; gap: .5rem 1.25rem; }
  /* 12px, eine Stufe unter den 13px der Fussnavigation; Kontrast wie dort 4.91:1 auf
     navy-dark. Innenabstand 5px: Trefflaeche 26px hoch (WCAG 2.5.8). */
  .footer-legal a {
    color: var(--white-a50); text-decoration: none; font-size: 12px;
    padding: 5px 0; transition: color 0.2s;
  }
  .footer-legal a:hover { color: var(--white); }
  @media (max-width: 600px) {
    /* Gestapelt und zentriert wie der Rest der Mobil-Fusszeile: Marke, Linkzeilen, dann
       Copyright und darunter die Rechtslinks. */
    .footer-nav { align-items: center; row-gap: 1.25rem; }
    .footer-meta { flex-direction: column; align-items: center; }
    .footer-legal { justify-content: center; }
  }

  /* --- 4. Trefffläche (WCAG 2.5.8, mind. 24x24 CSS-px) ------------------ */
  /* Desktop-Navigation: 18px hoch -> Innenabstand auf dem Inline-Link vergroessert die
     Trefffläche, ohne Text/Zeile zu verschieben. Die CTA-Pille hat ihr eigenes Padding
     und bleibt ausgenommen. */
  .nav-links a:not(.nav-cta) { padding: 10px 0; }

  /* --- 5. Reduzierte Bewegung ---------------------------------------------
     Das Burger-Icon: die Balken springen ohne Dreh-/Schiebebewegung ins X, das
     Ausblenden des mittleren Balkens bleibt als kurzer Opacity-Uebergang. */
  @media (prefers-reduced-motion: reduce) {
    .nav-mobile-toggle span { transition: opacity 0.2s; }
    /* Der Dialog (Grundform oben, seit den Datenschutz-Einstellungen auf jeder Seite)
       erscheint ohne Einflug – wie auf der Startseite (home.css, Abschnitt 9). */
    .modal-box { animation: none; }
  }

  /* --- 6. Politur (Schritt 7) ------------------------------------------ */
  /* Fusszeilen-Marke: Wortmarke und Slogan stehen links buendig zueinander, wie in der
     Kopfzeile. Die Mobil-Regel (max-width:600px, text-align:center auf .footer-inner) vererbte
     sich bis in .nav-brand-text, deren Zeilen sich strecken: "bembel.ai" stand dadurch mittig
     ueber dem Slogan. Der Block als Ganzes bleibt zentriert (justify-content am Wrapper). */
  .footer-brand { text-align: left; }

  /* Kopfzeile unter 360px: der Slogan passt bei .16em Laufweite nicht neben den Menue-Button
     und brach auf zwei Zeilen um (CLAUDE.md, Abweichung 11). Mit .04em passt er bei 320px
     einzeilig (Marke endet 5px vor der Treffflaeche des Buttons), Schriftgroesse bleibt 11px.
     Ab 360px unveraendert. */
  @media (max-width: 359px) {
    .nav-slogan { letter-spacing: .04em; }
  }

  /* Druck: die fixierte Leiste wuerde auf jeder Druckseite ueber dem Inhalt liegen – absolut
     steht sie nur oben auf der ersten Seite, ohne das Layout zu verschieben. Das Mobil-Menue
     ist Bedienung. Die Fusszeile (weisse Schrift auf Nachtblau) druckt ihren Hintergrund mit. */
  @media print {
    nav { position: absolute; backdrop-filter: none; }
    .nav-mobile-toggle, .nav-mobile-menu { display: none; }
    footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }

  /* --- 7. Datenschutz-Einstellungen: Dialog, Einstellungsseite, Banner ------- */
  /* Markup: consent/templates/consent/ (Dialog auf jeder Seite ueber base.html, Seite
     /datenschutz-einstellungen/, Banner nur bei Bedarf). Baut auf dem Dialog oben auf; alle
     Werte aus den Tokens. Die Regeln sind auf consent-Klassen begrenzt und spezifischer als
     das, was sonst hineinwirken wuerde: legal.css setzt h2 und (in main) p, a, ul, li, home.css
     .modal-box h2 und allgemeine Fokusregeln. So sieht der Dialog auf jeder Seite gleich aus. */
  /* 640px: bei 3rem Innenabstand passen die drei Buttons in eine Zeile (sie brauchen ~530px). */
  .modal-box--consent { max-width: 640px; }
  .consent-dialog .consent-title {
    font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 700; color: var(--navy);
    letter-spacing: -.02em; line-height: 1.2; text-wrap: balance;
    /* Platz fuer den Schliessen-Knopf; die h2-Linie aus legal.css aufgehoben */
    margin: 0 2.75rem .75rem 0; padding: 0; border: 0;
  }

  /* Fliesstext aus dem Editor (Einleitung, Beschreibungen, Bannertext) */
  .consent-text { color: var(--text-mid); line-height: 1.6; hyphens: auto; }
  .consent-text p { margin: 0 0 .6rem; color: inherit; max-width: none; }
  .consent-text p:last-child { margin-bottom: 0; }
  .consent-text a { color: var(--navy-light); text-underline-offset: 2px; }
  .consent-intro { font-size: 15px; }
  /* Offene Stellen: dieselbe Auszeichnung wie auf den Rechtstext-Seiten (legal.css .ph), die
     im Dialog nicht ueberall geladen ist. */
  .consent-text .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;
  }

  /* Kategorien */
  .consent-form { margin-top: 1.5rem; }
  .consent-categories { border: 0; margin: 0; padding: 0; min-width: 0; }
  .consent-legend { font-size: 15px; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: .5rem; }
  .consent-category { padding: 1.1rem 0; border-top: 1px solid var(--lavender-mid); }
  .consent-category:last-child { border-bottom: 1px solid var(--lavender-mid); }
  .consent-category-head { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; }
  .consent-check {
    width: 24px; height: 24px; margin: 0; flex-shrink: 0;
    accent-color: var(--navy); cursor: pointer;
  }
  .consent-check:disabled { cursor: default; }
  /* Die Beschriftung ist die Trefffläche: 16px Schrift + 2x6px Innenabstand, rund 38px hoch. */
  .consent-name { font-size: 16px; font-weight: 600; color: var(--navy); cursor: pointer; padding: 6px 0; }
  .consent-check:disabled + .consent-name { cursor: default; }
  /* Wie die Leistungs-Tags: 10% Navy, navy Schrift */
  .consent-always {
    margin-left: auto; background: var(--navy-a10); color: var(--navy);
    font-size: 12px; font-weight: 500; line-height: 1.4;
    border-radius: 20px; padding: 3px 10px;
  }
  /* Beschreibung und Aufklapper stehen unter dem Namen, nicht unter dem Haken. */
  .consent-desc, .consent-details, .consent-signal { margin-left: calc(24px + .75rem); }
  .consent-desc { font-size: 14px; margin-top: .2rem; }
  /* Browser sendet GPC/DNT (consent.state): die Kategorie ist aus und gesperrt, der Hinweis
     sagt warum. Navy auf Lavendel wie die Bestaetigung; steht vor der Beschreibung. */
  .consent-signal {
    font-size: 13px; line-height: 1.5; color: var(--navy);
    background: var(--lavender); border-radius: var(--radius-sm);
    padding: .5rem .75rem; margin-top: .35rem; margin-bottom: .5rem; max-width: none;
  }

  .consent-details { margin-top: .5rem; }
  .consent-details summary {
    width: fit-content; cursor: pointer; padding: 4px 0;
    font-size: 13px; font-weight: 600; color: var(--navy-light);
  }
  .consent-details summary:hover { color: var(--navy); }
  .consent-items { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; max-width: none; }
  .consent-item { background: var(--lavender); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: 0; }
  .consent-item-name { font-size: 14px; font-weight: 600; color: var(--navy); margin: 0 0 .35rem; overflow-wrap: anywhere; }
  .consent-item dl {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .9rem;
    font-size: 13px; line-height: 1.5; margin: 0;
  }
  .consent-item dl > div { display: contents; }
  /* --text-light auf Lavendel: 4.76:1 */
  .consent-item dt { color: var(--text-light); }
  .consent-item dd { color: var(--text-dark); margin: 0; overflow-wrap: anywhere; hyphens: auto; }
  @media (max-width: 400px) {
    .consent-item dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .consent-item dd + dt { margin-top: .35rem; }
  }

  /* Bestaetigung (role="status"): leer unsichtbar, aber vorhanden, damit Screenreader die
     Aenderung ansagen. Gestalt wie .form-success in den Dialogen der Startseite. */
  .consent-status {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 15px; line-height: 1.6; color: var(--navy);
    background: var(--lavender); border: 1.5px solid var(--lavender-mid);
    border-radius: var(--radius-sm); padding: .85rem 1.1rem; margin: 1.25rem 0 0;
  }
  .consent-status::before {
    content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px;
    background: var(--navy);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .consent-status:empty { padding: 0; margin: 0; border: 0; }
  .consent-status:empty::before { display: none; }
  .consent-form > .consent-status:first-of-type:not(:empty) { margin: 0 0 1.25rem; }

  /* Buttons: "Auswahl speichern" gefuellt; "Nur notwendige" und "Alle akzeptieren" gleich
     gewichtet (gleiche Klasse, gleiche Groesse), wie es die Aufsichtsbehoerden verlangen. */
  .consent-actions {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; margin-top: 1.5rem;
  }
  .consent-choice { display: flex; flex-wrap: wrap; gap: .75rem; }
  .consent-btn {
    font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.3;
    padding: 12px 22px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--navy); cursor: pointer; text-align: center;
    transition: background .2s, border-color .2s, color .2s;
  }
  .consent-btn--save,
  .consent-btn--banner { background: var(--navy); color: var(--white); }
  .consent-btn--save:hover,
  .consent-btn--banner:hover { background: var(--navy-light); border-color: var(--navy-light); }
  .consent-btn--choice { background: var(--white); color: var(--navy); }
  .consent-btn--choice:hover { background: var(--lavender); }
  @media (max-width: 600px) {
    /* Grid statt Flex-Spalte: in der Flex-Spalte rechnete Chrome die Hoehe des umbrechenden
       Button-Paars zu gross (91 statt 42px), sobald die Beschriftungen einzeilig passten. */
    .consent-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
    /* 12px statt 22px seitlich: "Nur notwendige" brach sonst bei 390px im Button um. */
    .consent-choice .consent-btn { flex: 1 1 9rem; padding-inline: 12px; }
  }

  /* Fokus: navy Ring wie ueberall auf hellem Grund, in der Form des Elements. */
  .consent-dialog .modal-close:focus-visible,
  .consent-form .consent-btn:focus-visible,
  .consent-banner .consent-btn:focus-visible,
  .consent-check:focus-visible,
  .consent-details summary:focus-visible,
  .consent-text a:focus-visible,
  .consent-banner-settings:focus-visible {
    outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 3px;
  }
  .consent-form .consent-btn:focus-visible,
  .consent-banner .consent-btn:focus-visible { border-radius: var(--radius-sm); }
  .consent-dialog .modal-close:focus-visible { border-radius: 50%; }

  /* Einstellungsseite (/datenschutz-einstellungen/, mit legal.css): Spalte wie der Lesetext. */
  .consent-page .consent-intro { font-size: 1.05rem; max-width: 680px; }
  .consent-page .consent-form { max-width: 680px; margin-top: 2rem; }
  /* 14px-Text in der 680px-Spalte liefe auf ~90 Zeichen je Zeile; 34rem halten ihn unter 80. */
  .consent-page .consent-desc,
  .consent-page .consent-signal,
  .consent-page .consent-details { max-width: 34rem; }

  /* Dialog: die Buttons bleiben am unteren Rand sichtbar, waehrend die Kategorien darunter
     durchscrollen (sonst lagen sie auf dem Handy zwei Bildschirme tief). Die Leiste ersetzt
     den unteren Innenabstand des Dialogs und die Linie unter der letzten Kategorie, damit sie
     am Ende des Inhalts genau dort steht, wo sie beim Scrollen klebt. scroll-padding haelt
     per Tab angesteuerte Elemente ueber ihr. Nur ab 380x640px: darunter braeuchte die Leiste
     drei Zeilen bzw. ueber ein Drittel der Dialoghoehe – dort bleiben die Buttons am Ende. */
  @media (min-width: 380px) and (min-height: 640px) {
    .modal-box--consent { padding-bottom: 0; scroll-padding-bottom: 6.5rem; }
    .modal-box--consent .consent-category:last-child { border-bottom: 0; }
    .modal-box--consent .consent-actions {
      position: sticky; bottom: 0; z-index: 1;
      background: var(--white); border-top: 1px solid var(--lavender-mid);
      margin-top: 0; padding: 1rem 0 1.5rem;
    }
  }
  @media (min-width: 380px) and (max-width: 600px) and (min-height: 640px) {
    .modal-box--consent { scroll-padding-bottom: 8.5rem; }
    .modal-box--consent .consent-actions { gap: .5rem; padding: .75rem 0 1.25rem; }
    .modal-box--consent .consent-choice { gap: .5rem; }
    .modal-box--consent .consent-btn { padding-block: 10px; }
  }

  /* Banner: fest am unteren Rand, nicht modal. Es erscheint nur, wenn eine aktive Kategorie
     eine Einwilligung braucht (consent.state). Seine Hoehe (--consent-banner-space, gemessen von
     bembel_ai.js, sonst der Schaetzwert hier) haelt das Seitenende frei und – ueber
     scroll-padding-bottom – auch Elemente, die per Tab in den Blick gescrollt werden. */
  .consent-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: var(--white); border-top: 1px solid var(--lavender-mid);
    box-shadow: 0 -4px 12px var(--navy-a10);
    padding: 1rem 2rem;
  }
  .consent-banner-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem;
  }
  .consent-banner-text { flex: 1 1 22rem; font-size: 14px; }
  .consent-banner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
  /* Beide Entscheidungen gleich breit, nicht nur gleich gestaltet. */
  .consent-btn--banner { min-width: 11.5rem; }
  .consent-banner-settings {
    font-size: 14px; font-weight: 600; color: var(--navy);
    text-decoration: underline; text-underline-offset: 3px; padding: 10px 4px;
  }
  .consent-banner-settings:hover { color: var(--navy-light); }
  html:has(#consent-banner) {
    --consent-banner-space: 7.5rem;
    scroll-padding-bottom: calc(var(--consent-banner-space) + 1rem);
  }
  html:has(#consent-banner) body { padding-bottom: var(--consent-banner-space); }
  /* Der Nach-oben-Knopf der Startseite steigt ueber das Banner. */
  html:has(#consent-banner) .scroll-top { bottom: calc(2rem + var(--consent-banner-space)); }
  @media (max-width: 600px) {
    /* Kompakt, weil es auf dem Handy sonst ein Drittel des ersten Bildschirms (und den
       Hero-Button) verdeckt: engere Abstaende, die beiden Entscheidungen bis 320px
       nebeneinander (gleich breit), "Einstellungen" als schmale Textzeile darunter
       (Trefffläche 14px + 2x5px, ueber 24px). */
    .consent-banner { padding: .75rem 1.25rem .5rem; }
    .consent-banner-inner { gap: .6rem; }
    .consent-banner-actions { width: 100%; gap: .5rem; }
    .consent-btn--banner { flex: 1 1 8rem; min-width: 0; padding: 11px 10px; }
    .consent-banner-settings { flex-basis: 100%; text-align: center; padding: 5px 4px; }
    /* Ohne Skript (keine Messung) der Schaetzwert fuer die hoechste Variante (320px). */
    html:has(#consent-banner) { --consent-banner-space: 13rem; }
  }
  /* Unter 360px passen "Nur notwendige" / "Alle akzeptieren" in 15px nicht nebeneinander. */
  @media (max-width: 359px) {
    .consent-btn--banner { font-size: 14px; padding-inline: 6px; }
  }

  /* Fokus-Ersatzziel (bembel_ai.js, focusMainStart): <main> bekommt kurz tabindex="-1", wenn
     das Element mit dem Fokus verschwindet (das Banner nach einer Entscheidung). Kein Ring:
     es ist ein Lesestartpunkt, kein Bedienelement – wie .form-success[tabindex="-1"]. */
  main[tabindex="-1"]:focus { outline: none; }

  /* Reduzierte Bewegung: der Dialog-Einflug steht im Block in Abschnitt 5. Die
     Farbuebergaenge der Buttons bleiben – sie bewegen nichts. */

  /* Druck: Banner und Dialog sind Bedienung. */
  @media print {
    .consent-banner, .modal-overlay.consent-dialog { display: none; }
    html:has(#consent-banner) body { padding-bottom: 0; }
  }

  /* --- 8. Fusszeile: umbrechende Linkzeilen, Slogan unter 360px ---------------- */
  /* Layout: wenn die Fussnavigation umbricht (auf dem Handy), galt ihr gap (1.5rem) auch
     zwischen den Zeilen, die dadurch 50px auseinanderlagen und wie lose Einzelzeilen wirkten.
     .75rem zwischen den Zeilen ergibt mit dem 6px-Innenabstand der Links genau 24px von
     Schrift zu Schrift – dasselbe Mass wie zwischen zwei Links in einer Zeile. Die
     Treffflaechen bleiben 29px hoch. */
  .footer-links { row-gap: .75rem; }
  /* Layout: unter 360px brach der Slogan der Fusszeile auf zwei Zeilen um; dieselbe Laufweite
     wie in der Kopfzeile (Abschnitt 6) haelt ihn einzeilig. */
  @media (max-width: 359px) {
    .footer-tagline { letter-spacing: .04em; }
  }