.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
/* Design-Tokens. Die Werte sind NICHT neu erfunden, sondern aus dem Bestand
    gemessen (Farben, Knopfmasse, Abstaende) -- sie bekommen hier nur einen
    Namen, damit dieselbe Farbe nicht 40-mal als Literal im Markup steht und
    beim naechsten Mal auseinanderlaeuft.
    --shell, --section, --eo, --erev und --dur-reveal kommen aus enhance.js und
    werden hier bewusst NICHT erneut definiert, sonst gaebe es zwei Wahrheiten. */
 :root{
   --blau:#032D67; --blau-tief:#021E47; --gelb:#FFE000;
   --akzent:#0A76A8; --akzent-hell:#00A7E7;
   --flaeche:#F1F5FA; --linie:#E6E6EC;
   --text:#3A3A45; --text-leise:#6B6B78;
   /* Eine fluide Typo-Leiter statt Einzelwerten pro Abschnitt. clamp() haelt
      die Spruenge zwischen Handy, Tablet und Desktop stetig -- vorher sprang
      dieselbe Ueberschrift je nach Abschnitt auf andere Groessen. */
   --t-hero:clamp(36px,6.4vw,76px);
   --t-h2:clamp(29px,4.4vw,54px);
   --t-h2-klein:clamp(26px,3.4vw,42px);
   --t-h3:clamp(19px,1.5vw,23px);
   --t-lead:clamp(17px,1.5vw,21px);
   --t-body:clamp(15.5px,1.1vw,17px);
   --t-klein:clamp(13.5px,.95vw,15px);
   --t-kicker:clamp(12px,.9vw,14px);
   /* Grosszuegiger Abstand fuer die ruhigen, redaktionellen Flaechen. */
   --section-gross:clamp(76px,10vw,150px);
   --kopf-start:92px;
   --rand:clamp(20px,5vw,40px);
 }
 *{box-sizing:border-box}
 body{margin:0;font-family:'Public Sans',-apple-system,Helvetica,Arial,sans-serif;color:#44444F;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
 html{scroll-behavior:smooth}
 a{color:inherit;text-decoration:none}
 h1,h2,h3,h4,p{margin:0}
 input,textarea,button{font-family:inherit}
 img{max-width:100%}
 @keyframes fdpKen{from{transform:scale(1)}to{transform:scale(1.10)}}
 .fdp-ken{animation:fdpKen 24s ease-in-out infinite alternate;will-change:transform}
 .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;transform:scale(1.02);transition:opacity 1.4s ease-in-out,transform 8s ease-out;will-change:opacity,transform}
 .hero-slide.on{opacity:1;transform:scale(1.09)}
 .hero-slide.zout{transform:scale(1.09)}
 .hero-slide.zout.on{opacity:1;transform:scale(1.0)}
 /* ---------- Hero ---------- */
 .hero-buehne{position:absolute;inset:0;display:flex;align-items:flex-end}
 .hero-inhalt{width:100%;max-width:var(--shell);margin:0 auto;
   padding:0 var(--rand) clamp(44px,7vh,96px);max-width:min(var(--shell),100%)}
 .hero-inhalt>*{max-width:19ch}
 .hero-marke{display:inline-block;background:var(--gelb);color:var(--blau);font-weight:800;
   text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-kicker);padding:8px 15px;border-radius:4px;max-width:none}
 /* text-wrap:balance verteilt die Zeilen gleichmaessig, statt die letzte als
    Waise haengen zu lassen ("... Heimat" / "ist!"). Wo der Browser es nicht
    kennt, bricht er wie bisher um -- kein Fallback noetig. */
 .hero-titel{font-family:'Public Sans';font-weight:900;font-size:var(--t-hero);color:#fff;
   line-height:1.02;letter-spacing:-.025em;margin-top:20px;text-shadow:0 2px 28px rgba(0,0,0,.38);
   text-wrap:balance}
 /* Der Fließtext darf breiter laufen als die Schlagzeile: 19ch waeren fuer
    zwei Saetze zu schmal, 62ch ist die Lesebreite, ab der Augen springen. */
 .hero-text{font-size:var(--t-lead);line-height:1.55;color:rgba(255,255,255,.95);
   margin-top:20px;max-width:min(52ch,100%);text-shadow:0 1px 14px rgba(0,0,0,.45)}
 .hero-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3.4vw,36px);max-width:none}
 /* Gestaffelter Einstieg. NUR opacity und transform -- beides laeuft im
    Compositor und kann keinen Layout Shift erzeugen. Das Hero-BILD wird
    bewusst nicht eingeblendet: es ist das LCP-Element, ein Fade von 0 wuerde
    die gemessene Ladezeit verschlechtern, ohne dass es besser aussieht. */
 @keyframes fdpHeroAuf{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
 .hero-auf>*{animation:fdpHeroAuf .68s var(--erev,cubic-bezier(.22,1,.36,1)) both}
 .hero-auf>*:nth-child(1){animation-delay:.12s}
 .hero-auf>*:nth-child(2){animation-delay:.22s}
 .hero-auf>*:nth-child(3){animation-delay:.34s}
 .hero-auf>*:nth-child(4){animation-delay:.44s}
 @media(max-width:820px){
   /* Eigenes Mobil-Layout, kein verkleinerter Desktop: der Text rueckt nach
      unten, damit oben genug Foto sichtbar bleibt, und die Schlagzeile darf
      ueber die volle Spaltenbreite laufen statt auf 19ch zu haengen.
      Volle kleine Viewporthoehe (svh, nicht vh) -> kein Sprung beim Ein- und
      Ausfahren der Safari-Leiste und beim Laden nichts abgeschnitten. */
   /* 100svh MINUS Kopfhoehe: der Kopf klebt im Fluss ueber dem Hero, volle
      100svh ergaeben zusammen mehr als der Bildschirm hoch ist -- der
      Hero-Text landete 92px unterhalb der Sichtkante. Vorher fiel das nicht
      auf, weil der Text mittig sass; unten ausgerichtet wird es sichtbar.
      Die Kopfhoehe steht als Token, damit sie nicht an zwei Stellen driftet;
      tests/pruefe_relaunch_browser.py hero prueft das Ergebnis real nach. */
   .hero{height:calc(100svh - var(--kopf-start))!important}
   .hero-buehne{align-items:flex-end}
   .hero-inhalt>*{max-width:none}
   .hero-titel{letter-spacing:-.02em}
   .hero-text{max-width:none}
   .hero-knoepfe{gap:11px}
   .hero-knoepfe>*{flex:1 1 100%;text-align:center;justify-content:center}
 }
 /* ---------- Kicker (eine Definition fuer alle Abschnitte) ---------- */
 .kicker{font-weight:800;text-transform:uppercase;letter-spacing:.14em;
   font-size:var(--t-kicker);color:var(--akzent);padding-left:13px;
   border-left:4px solid var(--gelb);display:inline-block}
 .kicker-hell{color:var(--akzent)}
 /* ---------- Statement: die ruhige Flaeche nach dem Hero ---------- */
 .statement{padding:var(--section-gross) 0}
 .statement-innen{max-width:var(--shell);margin:0 auto;padding:0 var(--rand);
   display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.5vw,44px)}
 .statement-titel{font-family:'Public Sans';font-weight:900;font-size:var(--t-h2);
   color:var(--blau);margin-top:18px;line-height:1.0;letter-spacing:-.028em;
   max-width:14ch;text-wrap:balance}
 .statement-strich{height:7px;width:88px;background:var(--gelb);margin-top:24px;border-radius:2px}
 /* Die Lesespalte laeuft schmal: 56 Zeichen sind die Breite, ab der das Auge
    beim Zeilenwechsel nicht mehr sucht. Ohne Begrenzung liefe der Satz ueber
    die volle Shell-Breite und der Abschnitt waere alles andere als ruhig. */
 .statement-lead{font-size:clamp(18px,1.9vw,25px);line-height:1.62;color:var(--text);max-width:56ch}
 .statement-lead strong{color:var(--blau);font-weight:800}
 @media(min-width:900px){
   /* Zweispaltig erst ab Desktop: Schlagzeile links, Lesespalte rechts --
      redaktionell statt zentriert, und die Ueberschrift bekommt Luft. */
   .statement-innen{grid-template-columns:minmax(0,5fr) minmax(0,6fr);
     gap:clamp(40px,6vw,96px);align-items:start}
   .statement-text{padding-top:clamp(6px,1vw,16px)}
 }
 /* ---------- Themen: grosse Flaechen statt kleiner Karten ---------- */
 .themen-grid{display:grid;gap:clamp(18px,2.4vw,28px);margin-top:clamp(28px,3.6vw,44px);
   grid-template-columns:minmax(0,1fr)}
 .thema{background:#fff;border:1px solid var(--linie);border-radius:18px;overflow:hidden;
   display:flex;flex-direction:column;min-width:0;
   transition:border-color .3s var(--eo,cubic-bezier(.16,.78,.29,1)),box-shadow .3s var(--eo,cubic-bezier(.16,.78,.29,1))}
 .thema:hover{border-color:#CFD8E6;box-shadow:var(--sh-sm,0 4px 12px rgba(3,45,103,.10))}
 .thema-bild{position:relative;overflow:hidden;aspect-ratio:16/10;flex-shrink:0}
 .thema-bild img{width:100%;height:100%;object-fit:cover;display:block}
 .thema-schleier{position:absolute;inset:0;
   background:linear-gradient(to top,rgba(2,16,40,.34),rgba(2,16,40,0) 58%)}
 .thema-text{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;flex:1;min-width:0}
 /* Zwei Zeilen Mindesthoehe: eine laengere Kategorie ("Konzepte neu gestalten --
    keine alten Kamellen") bricht um und schob sonst nur bei EINER Karte den
    Titel nach unten -- die drei Titel fluchteten dann nicht mehr. */
 .thema-kategorie{font-size:var(--t-kicker);font-weight:800;text-transform:uppercase;
   letter-spacing:.08em;color:var(--akzent);line-height:1.35;min-height:2.7em}
 .thema-titel{font-family:'Public Sans';font-size:var(--t-h3);color:var(--blau);font-weight:800;
   letter-spacing:-.012em;margin-top:9px;line-height:1.15;text-wrap:balance}
 .thema-satz{font-size:var(--t-body);line-height:1.6;color:var(--text-leise);margin-top:11px;flex:1}
 .thema-pfeil{color:var(--akzent);font-size:20px;margin-top:16px;align-self:flex-start;
   transition:transform .28s var(--eo,cubic-bezier(.16,.78,.29,1))}
 .thema:hover .thema-pfeil{transform:translateX(5px)}
 @media(min-width:700px) and (max-width:1039px){
   /* iPad Portrait: eine Spalte waere sehr hoch, drei sehr eng. Deshalb quer --
      Bild links, Text rechts. Die Breite wird genutzt statt gestreckt. */
   .thema{flex-direction:row;align-items:stretch}
   .thema-bild{aspect-ratio:auto;width:42%;min-height:212px}
   .thema-text{justify-content:center}
 }
 @media(min-width:1040px){.themen-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
 /* ---------- Bildbreak ---------- */
 .breaker{position:relative;overflow:hidden;background:var(--blau);
   min-height:clamp(360px,52vh,600px);display:flex}
 .breaker-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
   object-position:center 58%;display:block}
 /* Verlauf von links: der Satz steht auf der ruhigen Seite des Bildes, das
    Motiv bleibt rechts frei. Ein flaechiger Schleier ueber alles wuerde das
    Foto entwerten. */
 .breaker-schleier{position:absolute;inset:0;
   background:linear-gradient(100deg,rgba(2,16,40,.88) 0%,rgba(2,16,40,.66) 42%,rgba(2,16,40,.12) 78%)}
 .breaker-inhalt{position:relative;width:100%;display:flex;align-items:center}
 .breaker-innen{max-width:var(--shell);margin:0 auto;padding:clamp(56px,8vw,104px) var(--rand);width:100%}
 .breaker-titel{font-family:'Public Sans';font-weight:900;font-size:var(--t-h2);color:#fff;
   line-height:1.0;letter-spacing:-.028em;text-shadow:0 2px 26px rgba(0,0,0,.35)}
 .breaker-text{font-size:var(--t-lead);line-height:1.55;color:rgba(255,255,255,.92);
   margin-top:20px;max-width:44ch;text-shadow:0 1px 12px rgba(0,0,0,.4)}
 /* Auf dunklem Foto: Weiss (Text, Unterstreichung und Pfeil folgen currentColor), Hover Gelb, Fokus gelb.
    Doppelte Klasse, damit .textlink weiter unten die Farbe nicht wieder auf Blau setzt. */
 .textlink.textlink-hell{color:#fff;margin-top:14px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
 .textlink.textlink-hell:hover{color:var(--gelb)}
 .textlink.textlink-hell:focus-visible{outline:3px solid var(--gelb);outline-offset:3px;border-radius:4px}
 @media(max-width:640px){
   /* Mobil deckt der Verlauf die volle Flaeche ab -- von links reicht der
      Kontrast bei schmaler Spalte nicht, der Satz stuende auf dem Motiv. */
   .breaker-schleier{background:linear-gradient(to top,rgba(2,16,40,.90) 0%,rgba(2,16,40,.66) 55%,rgba(2,16,40,.42) 100%)}
   .breaker-inhalt{align-items:flex-end}
 }
 /* ---------- Abschnittskopf (eine Definition fuer alle Abschnitte) ---------- */
 .abschnitt-titel{font-family:'Public Sans';font-weight:900;font-size:var(--t-h2-klein);
   color:var(--blau);margin-top:12px;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
 /* ---------- Aktuelles: eine Leitmeldung, zwei kleinere ---------- */
 .aktuell{padding:var(--section) 0;background:var(--flaeche);
   border-top:1px solid #ECECF1;border-bottom:1px solid #ECECF1}
 .aktuell-innen{max-width:var(--shell);margin:0 auto;padding:0 var(--rand)}
 .aktuell-kopf{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
 .aktuell-grid{display:grid;gap:clamp(18px,2.4vw,26px);margin-top:clamp(28px,3.6vw,42px);
   grid-template-columns:minmax(0,1fr)}
 .aktuell-klein{display:grid;gap:clamp(18px,2.4vw,26px);grid-template-columns:minmax(0,1fr);align-content:start}
 .meldung{display:flex;background:#fff;border:1px solid var(--linie);border-radius:16px;overflow:hidden;min-width:0;
   transition:border-color .3s var(--eo,cubic-bezier(.16,.78,.29,1)),box-shadow .3s var(--eo,cubic-bezier(.16,.78,.29,1))}
 .meldung:hover{border-color:#CFD8E6;box-shadow:var(--sh-sm,0 4px 12px rgba(3,45,103,.10))}
 .meldung-flaeche{display:flex;flex-direction:column;width:100%;height:100%;text-align:left;
   background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
 .meldung-bild{aspect-ratio:16/9;overflow:hidden;flex-shrink:0;border-bottom:1px solid #ECECF1}
 .meldung-bild img{width:100%;height:100%;object-fit:cover;display:block}
 .meldung-text{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;flex:1;min-width:0}
 .meldung-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}
 .marke{background:#EAF6FD;color:#0A4F91;font-weight:700;text-transform:uppercase;font-size:11px;
   letter-spacing:.03em;padding:5px 11px;border-radius:4px}
 .meldung-datum{font-size:13px;color:#6E6E80;font-weight:600}
 .meldung-titel{font-family:'Public Sans';color:var(--blau);font-weight:800;line-height:1.22;
   letter-spacing:-.008em;font-size:var(--t-h3);text-wrap:balance}
 .meldung-teaser{font-size:var(--t-body);line-height:1.58;color:var(--text-leise);margin-top:11px;flex:1}
 .meldung-mehr{margin-top:14px;font-size:13.5px;min-height:0;padding:0}
 .meldung-lead .meldung-titel{font-size:clamp(22px,2.4vw,30px)}
 @media(min-width:960px){
   /* Leitmeldung links ueber die volle Hoehe, zwei kleinere rechts gestapelt.
      Nicht drei gleiche Kaesten: die wichtigste Meldung soll man zuerst sehen. */
   .aktuell-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch}
   /* Rechte Spalte teilt sich die Hoehe der Leitmeldung zu gleichen Teilen (1fr je
      Karte, egal wie viele und wie lang die Texte); Weiterlesen sitzt per flex:1 am Teaser unten. */
   .aktuell-klein{grid-auto-rows:1fr;align-content:stretch}
   /* Ohne kleinere Meldungen nimmt die Leitmeldung die ganze Breite. */
   .aktuell-grid:not(:has(.meldung-klein)){grid-template-columns:minmax(0,1fr)}
   .aktuell-klein:not(:has(.meldung-klein)){display:none}
   .meldung-lead .meldung-bild{aspect-ratio:16/10}
 }
 /* ---------- Termine: Karten im Stil der Pressemitteilungen (Startseite + /termine) ---------- */
 .termine-home{padding:var(--section) 0;background:#fff}
 .tm-liste{display:grid;gap:clamp(14px,2vw,20px);margin-top:clamp(28px,3.6vw,42px);grid-template-columns:minmax(0,1fr)}
 .tmv-liste .tm-liste{margin-top:0}
 .tm-karte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.2vw,26px);align-items:start;
   background:#fff;border:1px solid var(--linie);border-radius:16px;min-width:0;
   padding:clamp(18px,2.2vw,28px);
   transition:border-color .3s var(--eo,cubic-bezier(.16,.78,.29,1)),box-shadow .3s var(--eo,cubic-bezier(.16,.78,.29,1))}
.tm-karte[hidden]{display:none}
 .tm-datum{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
   width:clamp(64px,7vw,80px);min-height:clamp(64px,7vw,80px);padding:8px 0;border-radius:12px;
   background:var(--blau);color:#fff;font-family:'Public Sans';line-height:1}
 .tm-tag{font-weight:900;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
 .tm-monat{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:5px;color:var(--gelb)}
 .tm-inhalt{min-width:0}
 .tm-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px}
 .tm-zeit{font-size:13px;color:#6E6E80;font-weight:600}
 .tm-titel{font-family:'Public Sans';color:var(--blau);font-weight:800;line-height:1.22;letter-spacing:-.008em;
   font-size:var(--t-h3);text-wrap:balance;margin:0;overflow-wrap:anywhere}
 .tm-ort{margin:8px 0 0;font-size:15px;font-weight:700;color:#1b2130;overflow-wrap:anywhere}
 .tm-text{margin:10px 0 0;font-size:var(--t-body);line-height:1.58;color:var(--text-leise);
   white-space:pre-line;overflow-wrap:anywhere}
 .tm-leer{border:1px dashed #CFD8E6;border-radius:16px;background:var(--flaeche);
   padding:clamp(24px,3.4vw,40px);text-align:left}
 .tm-leer[hidden]{display:none}
 .tm-leer-text{margin:0;font-family:'Public Sans';font-weight:800;color:var(--blau);font-size:var(--t-h3);line-height:1.25}
 .tm-leer-hinweis{margin:10px 0 0;font-size:var(--t-body);line-height:1.58;color:var(--text-leise)}
 .tm-leer-hinweis a{display:inline-flex;align-items:center;min-height:44px;color:var(--akzent);font-weight:700;text-underline-offset:3px}
 .tm-leer-hinweis a:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
 @media(hover:hover){.tm-karte:hover{border-color:#CFD8E6;box-shadow:var(--sh-sm,0 4px 12px rgba(3,45,103,.10))}}
 @media(prefers-reduced-motion:reduce){.tm-karte{transition:none}}
 @media(max-width:420px){.tm-karte{grid-template-columns:minmax(0,1fr)}.tm-datum{flex-direction:row;gap:8px;width:auto;min-height:0;padding:8px 14px;justify-self:start}.tm-monat{margin-top:0}}
 /* ---------- Kalender: „In den Kalender“ je Termin, „Alle Termine speichern“ und „Abonnieren“ oben (Partei-Demo-Muster) ---------- */
 .kal-link{display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;max-width:100%;min-height:44px;padding:0;
   font:700 15px/1.2 'Public Sans',system-ui,sans-serif;color:var(--blau);text-decoration:underline;
   text-decoration-thickness:1px;text-underline-offset:.25em}
 .kal-einzel{margin-top:12px}
 .kal-abo{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
 .kal-icon{flex:none;display:block}
 .kal-link:focus-visible{outline:3px solid var(--akzent,#0A76A8);outline-offset:3px;border-radius:4px}
 @media(hover:hover){.kal-link:hover{text-decoration-color:var(--akzent);text-decoration-thickness:2px}}
 /* ---------- Menschen ---------- */
 .menschen{padding:var(--section) 0}
 .menschen-innen{max-width:var(--shell);margin:0 auto;padding:0 var(--rand);
   display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr);align-items:center}
 .menschen-bild{position:relative;border-radius:20px;overflow:hidden;
   box-shadow:var(--sh-lg,0 16px 34px rgba(3,45,103,.16));aspect-ratio:4/3}
 .menschen-bild img{width:100%;height:100%;object-fit:cover;display:block}
 .menschen-bildunterschrift{position:absolute;left:18px;bottom:16px;color:#fff;font-weight:700;
   font-size:14px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
 .menschen-satz{font-size:var(--t-body);line-height:1.72;color:var(--text);margin-top:18px;max-width:56ch}
 .menschen-wege{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,30px)}
 @media(min-width:900px){.menschen-innen{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
 /* ---------- Mitmachen: grosse gelbe Flaeche ---------- */
 .mitmachen{background:var(--gelb);padding:clamp(56px,6vw,96px) 0}
 .mitmachen-innen{max-width:var(--shell);margin:0 auto;padding:0 var(--rand);max-width:min(var(--shell),100%)}
 .mitmachen-titel{font-family:'Public Sans';font-weight:900;font-size:var(--t-h2);color:var(--blau);
   line-height:1.02;letter-spacing:-.028em;max-width:18ch;text-wrap:balance}
 .mitmachen-text{font-size:var(--t-lead);line-height:1.6;color:#1B3557;margin-top:22px;max-width:52ch}
 .mitmachen-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.4vw,40px)}
 /* ---------- Newsletter-Band unter dem Kontakt ---------- */
 .newsletter-band{background:var(--blau);color:#fff;padding:clamp(40px,5.5vw,72px) 0}
 .newsletter-innen{max-width:var(--shell);margin:0 auto;padding:0 clamp(20px,5vw,40px);
   display:grid;gap:clamp(22px,3vw,36px);grid-template-columns:minmax(0,1fr);align-items:center}
 .newsletter-text h2{font-family:'Public Sans';font-weight:900;font-size:clamp(24px,2.9vw,32px);
   letter-spacing:-.01em;line-height:1.1;color:#fff}
 .newsletter-text p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82);margin-top:10px;max-width:46ch}
 .newsletter-form{display:grid;gap:14px 12px;grid-template-columns:minmax(0,1fr);align-items:end}
 .newsletter-feld{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;
   text-transform:uppercase;letter-spacing:.04em;color:#fff}
 .newsletter-feld input{border:1px solid transparent;border-radius:8px;padding:14px 16px;font-size:16px;
   min-height:49px;background:#fff;color:var(--blau);font-weight:400;text-transform:none;letter-spacing:0;width:100%}
 .newsletter-knopf{background:var(--gelb);color:var(--blau);border:none;border-radius:7px;min-height:49px;
   padding:0 28px;font-family:'Public Sans';font-weight:800;text-transform:uppercase;font-size:15px;
   letter-spacing:.02em;cursor:pointer;transition:background .25s,transform .25s var(--eo,cubic-bezier(.16,.78,.29,1))}
 .newsletter-knopf:hover{background:#fff;transform:translateY(-2px)}
 .newsletter-knopf:active{transform:translateY(0)}
 .newsletter-zustimmung{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
   color:rgba(255,255,255,.82);line-height:1.5;cursor:pointer}
 .newsletter-zustimmung .fdp-box{border-color:rgba(255,255,255,.6)}
 .newsletter-zustimmung:hover .fdp-box{border-color:var(--gelb)}
 .newsletter-zustimmung .fdp-check:checked + .fdp-box{background:var(--gelb);border-color:var(--gelb)}
 .newsletter-zustimmung .fdp-check:checked + .fdp-box svg{stroke:var(--blau)}
 .newsletter-zustimmung button{background:none;border:none;padding:0;color:#fff;font-weight:700;
   cursor:pointer;font-size:13.5px;text-decoration:underline;display:inline;font-family:inherit;line-height:inherit;padding:12px 0;margin:-12px 0}
 .newsletter-zustimmung .fdp-box{margin-top:1px}
 .newsletter-band :focus-visible,.newsletter-band .fdp-check:focus-visible + .fdp-box{outline:3px solid var(--gelb);outline-offset:2px}
 .newsletter-form .tj-msg{grid-column:1/-1;margin:0;color:#fff!important}
 .newsletter-danke{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);border-radius:10px;
   padding:16px 18px;font-size:15px;font-weight:600;color:#fff}
 @media(min-width:640px){.newsletter-form{grid-template-columns:minmax(0,1fr) auto}}
 @media(min-width:960px){.newsletter-innen{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
 @media(prefers-reduced-motion:reduce){.newsletter-knopf{transition:none}.newsletter-knopf:hover{transform:none}}
 /* ---------- Flaechige Knoepfe fuer helle Hintergruende ---------- */
 .btn-blau,.btn-rand{display:inline-flex;align-items:center;justify-content:center;
   padding:15px 28px;border-radius:7px;font-family:'Public Sans';font-weight:800;
   text-transform:uppercase;font-size:15px;letter-spacing:.02em;cursor:pointer;min-height:49px;
   border:1.5px solid transparent;
   transition:transform .25s var(--eo,cubic-bezier(.16,.78,.29,1)),background .25s,border-color .25s,color .25s}
 .btn-blau{background:var(--blau);color:#fff}
 .btn-blau:hover{background:var(--blau-tief);transform:translateY(-2px)}
 .btn-rand{background:transparent;color:var(--blau);border-color:#C3CDDD}
 .btn-rand:hover{border-color:var(--blau);transform:translateY(-2px)}
 .btn-rand-dunkel{border-color:rgba(3,45,103,.45)}
 .btn-rand-dunkel:hover{border-color:var(--blau);background:rgba(255,255,255,.4)}
 @media(prefers-reduced-motion:reduce){
   .btn-blau,.btn-rand{transition:none}
   .btn-blau:hover,.btn-rand:hover{transform:none}
 }
 /* ---------- Footer als Abschluss ---------- */
 .fussleiste{background:#01152F;color:#C2C2D0;padding:0 0 28px}
 /* Der Claim steht ueber den Links und traegt den Abschluss. Etwas dunkler als
    zuvor (#01152F statt #021E47), damit die Seite unten zur Ruhe kommt statt
    einfach aufzuhoeren. */
 .fuss-claim{border-bottom:1px solid rgba(255,255,255,.10)}
 .fuss-claim-innen{max-width:var(--shell);margin:0 auto;padding:clamp(48px,6vw,88px) var(--rand) clamp(40px,5vw,66px)}
 .kicker-fuss{color:rgba(255,255,255,.72)}
 .fuss-claim-satz{font-family:'Public Sans';font-weight:900;font-size:var(--t-h2-klein);
   color:#fff;line-height:1.06;letter-spacing:-.025em;margin-top:18px;text-wrap:balance}
 .fussleiste>div:not(.fuss-claim){padding-top:clamp(40px,5vw,64px)}
 /* ---------- Trefferflaechen ---------- */
 /* 44x44px ist das Mass, unter dem eine Fingerkuppe daneben trifft. Die
    Fusszeilen-Links waren 16px hoch, die Social-Icons 40x40. Vergroessert wird
    ueber Innenabstand und negativen Aussenabstand -- optisch aendert sich
    dadurch nichts, nur die Flaeche. */
 footer button,footer a:not([aria-label]){min-height:44px;display:inline-flex;align-items:center}
 footer a[aria-label]{min-width:44px;min-height:44px}
 .scph{min-width:44px!important;min-height:44px!important}
 /* Die E-Mail-Adresse in der Kontakt-Infokarte steht als eigene Zeile,
    nicht mitten im Satz -- fuer sie gilt die WCAG-Ausnahme fuer
    Fliesstext-Links nicht. */
 #kontakt a[href^='mailto:']{min-height:44px;display:inline-flex;align-items:center}
 /* ---------- Textlink mit Pfeil (eine Definition) ---------- */
 .textlink{display:inline-flex;align-items:center;gap:2px;background:none;border:none;
   color:var(--akzent);font-family:'Public Sans';font-weight:700;text-transform:uppercase;
   font-size:15px;letter-spacing:.02em;cursor:pointer;padding:8px 0;min-height:44px}
 .textlink:hover{color:var(--blau)}
 @media(prefers-reduced-motion:reduce){
   .thema,.thema-pfeil{transition:none}
   .thema:hover .thema-pfeil{transform:none}
 }
 /* ---------- Knoepfe (eine Definition statt Inline-Wiederholung) ---------- */
 .btn-gelb,.btn-glas{display:inline-flex;align-items:center;justify-content:center;
   padding:15px 30px;border-radius:7px;font-family:'Public Sans';font-weight:800;
   text-transform:uppercase;font-size:15px;letter-spacing:.02em;cursor:pointer;
   min-height:49px;border:1.5px solid transparent;
   transition:transform .25s var(--eo,cubic-bezier(.16,.78,.29,1)),background .25s,box-shadow .25s,border-color .25s}
 .btn-gelb{background:var(--gelb);color:var(--blau);box-shadow:0 12px 30px rgba(0,0,0,.25)}
 .btn-gelb:hover{background:#fff;transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.32)}
 .btn-glas{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55);
   -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-weight:700}
 .btn-glas:hover{background:rgba(255,255,255,.24);transform:translateY(-3px);border-color:#fff}
 @media(prefers-reduced-motion:reduce){
   .hero-auf>*{animation:none}
   .btn-gelb,.btn-glas{transition:none}
   .btn-gelb:hover,.btn-glas:hover{transform:none}
 }
 .tile-arrow{display:inline-flex}
 footer button{transition:color .2s,transform .2s}
 footer button:hover{transform:translateX(3px)}
 footer a[aria-label]{transition:background .18s,transform .18s}
 footer a[aria-label]:hover{transform:translateY(-3px)}
 .zoom img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
 .zoom:hover img{transform:scale(1.025)}
 .arrow-btn svg{transition:transform .25s cubic-bezier(.16,.78,.29,1)}
 .arrow-btn.arrow-next:hover svg{transform:translateX(3px)}
 .arrow-btn.arrow-prev:hover svg{transform:translateX(-3px)}
 .arrow-btn:focus-visible{outline:3px solid #032D67;outline-offset:3px}
 .arrow-btn:disabled:hover svg{transform:none}
 /* EIN Reveal, eine Dauer, eine Kurve. Vorher standen hier .55s mit --eo und in
    enhance.js .62s mit --erev -- dieselbe Bewegung lief je nach Herkunft des
    Elements unterschiedlich, was als "unruhig" auffiel, ohne dass man den
    Grund sah. Die Tokens kommen aus enhance.js; die Fallbacks greifen nur,
    falls dessen Stil einmal nicht geladen ist. */
 [data-reveal]{opacity:1;transition:opacity var(--dur-reveal,.62s) var(--erev,cubic-bezier(.22,1,.36,1)),transform var(--dur-reveal,.62s) var(--erev,cubic-bezier(.22,1,.36,1))}
 @keyframes fdpView{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
 .fdp-view{animation:fdpView .6s var(--erev,cubic-bezier(.22,1,.36,1)) both}
 header nav button{position:relative}
 header nav button::after{content:'';position:absolute;left:8px;right:8px;bottom:1px;height:2.5px;background:#00A7E7;border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.16,.78,.29,1)}
 header nav button:hover::after{transform:scaleX(1)}
 header nav button.nav-on{color:#0A76A8}
 header nav button.nav-on::after{transform:scaleX(1)}
 .fdp-check{position:absolute;opacity:0;width:1px;height:1px}
 .fdp-box{width:22px;height:22px;border:2px solid #C9CDD8;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;transition:background .18s cubic-bezier(.16,.78,.29,1),border-color .18s}
 label:hover .fdp-box{border-color:#032D67}
 .fdp-box svg{opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s}
 .fdp-check:checked + .fdp-box{background:#032D67;border-color:#032D67}
 .fdp-check:checked + .fdp-box svg{opacity:1;transform:scale(1)}
 .fdp-check:focus-visible + .fdp-box{outline:3px solid #032D67;outline-offset:2px}
 #presseTrack,#themenTrack{scrollbar-width:none;-ms-overflow-style:none}
 /* Startseite, Aktuelles: Hierarchie statt drei gleich grosser Karten.
    Die neueste Meldung gross, zwei aeltere daneben -- der Rest bleibt ueber den
    Knopf "Alle Pressemitteilungen" darunter erreichbar. Rein ueber CSS, damit
    die Vorlagenschleife unveraendert bleibt; die Doppelung der Kennung deckt
    den statischen Vorab-Anstrich (#tjp-) mit ab. */
 #presseTrack,#tjp-presseTrack{display:grid!important;grid-template-columns:1fr;gap:20px;
   overflow:visible!important;scroll-snap-type:none!important;padding:22px 0 8px!important}
 #presseTrack>*,#tjp-presseTrack>*{flex:none!important;scroll-snap-align:none!important;min-width:0}
 #presseTrack>*:nth-child(n+4),#tjp-presseTrack>*:nth-child(n+4){display:none!important}
 @media(min-width:900px){
   #presseTrack,#tjp-presseTrack{grid-template-columns:1.55fr 1fr;grid-auto-rows:1fr}
   #presseTrack>*:first-child,#tjp-presseTrack>*:first-child{grid-row:span 2}
   /* Die grosse Karte bekommt auch typografisch mehr Gewicht, sonst ist sie
      nur groesser, aber nicht wichtiger. */
   #presseTrack>*:first-child h3,#tjp-presseTrack>*:first-child h3{font-size:24px}
   /* Die grosse Karte ist so hoch wie die zwei gestapelten daneben. Ihr kurzer
      Text fuellt das nicht -- ohne diese Regel klaffte unten eine leere weisse
      Flaeche. Das Bild nimmt den Ueberschuss auf, statt ihn stehen zu lassen. */
   #presseTrack>*:first-child .fs-ar169,
   #presseTrack>*:first-child .fs-ar169,
   #tjp-presseTrack>*:first-child .fs-ar169,
   #tjp-presseTrack>*:first-child .fs-ar169{
     aspect-ratio:auto!important;flex:1 1 auto!important;min-height:220px}
 }
 /* Die Pfeile steuerten das horizontale Scrollen -- das gibt es nicht mehr. */
 .press-arrows{display:none!important}
 /* Bildband: Das Originalverhaeltnis 1600:738 ergibt auf dem Handy nur rund
    180px Hoehe -- das wirkt als gequetschter Streifen, nicht als Ruhepunkt.
    Auf schmalen Screens deshalb hochkantiger zuschneiden (das Motiv sitzt
    mittig), erst ab Tablet das volle Panorama. */
 .tj-band-bild{aspect-ratio:3/2}
 @media(min-width:640px){.tj-band-bild{aspect-ratio:16/9}}
 @media(min-width:900px){.tj-band-bild{aspect-ratio:1600/738}}
 #presseTrack::-webkit-scrollbar,#themenTrack::-webkit-scrollbar{display:none}
 a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #032D67;outline-offset:2px}
 ::selection{background:#FFE000;color:#032D67}
 @media (prefers-reduced-motion: reduce){[data-reveal]{transition:none}.fdp-ken{animation:none}.hero-slide{animation:none}.hero-slide:first-of-type{opacity:1}.zoom:hover .tile-arrow{transform:none}}
 *{scrollbar-width:thin;scrollbar-color:#9FB4D6 #EEF2F8}
 ::-webkit-scrollbar{width:10px;height:10px}
 ::-webkit-scrollbar-track{background:#EEF2F8}
 ::-webkit-scrollbar-thumb{background:#9FB4D6;border-radius:8px;border:2px solid #EEF2F8}
 ::-webkit-scrollbar-thumb:hover{background:#032D67}
 .brand-row{height:86px}
 .brand-logo{transition:transform .35s cubic-bezier(.16,.78,.29,1)}
 header.scrolled .brand-logo{transform:scale(.8)}
 .brand-divider{transition:opacity .3s ease;max-width:1px;overflow:hidden}
 header.scrolled .brand-divider{opacity:0}
 .brand-sub{transition:opacity .28s ease;max-width:120px;overflow:hidden;white-space:nowrap}
 header.scrolled .brand-sub{opacity:0}
 .burger{position:relative;width:26px;height:19px;background:none;border:none;cursor:pointer;padding:0;display:flex;flex-direction:column;justify-content:space-between}
 .burger-line{display:block;width:100%;height:2.8px;background:#032D67;border-radius:2px;transition:transform .35s cubic-bezier(.16,.78,.29,1),opacity .25s ease}
 .burger.open .burger-line:nth-child(1){transform:translateY(8.1px) rotate(45deg)}
 .burger.open .burger-line:nth-child(2){opacity:0;transform:scaleX(0)}
 .burger.open .burger-line:nth-child(3){transform:translateY(-8.1px) rotate(-45deg)}
 @keyframes burgerPop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
 .burger.open{animation:burgerPop .35s cubic-bezier(.34,1.56,.64,1)}
 .mobile-menu-panel{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s cubic-bezier(.16,.78,.29,1),opacity .3s ease}
 .mobile-menu-panel.open{max-height:640px;opacity:1}
 .back-top{position:fixed;right:20px;bottom:20px;z-index:70;width:50px;height:50px;border-radius:50%;background:#032D67;color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 12px 28px rgba(3,45,103,.3);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s cubic-bezier(.16,.78,.29,1),transform .3s cubic-bezier(.16,.78,.29,1),background .25s}
 .back-top.visible{opacity:1;transform:none;pointer-events:auto}
 .back-top:hover{background:#00A7E7}
 .uline{position:relative}
 .uline::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:currentColor;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,.78,.29,1)}
 a:hover .uline::after,button:hover .uline::after{transform:scaleX(1)}
 .uarrow{display:inline-block;margin-left:7px;transition:transform .35s cubic-bezier(.16,.78,.29,1)}
 a:hover .uarrow,button:hover .uarrow{transform:translateX(4px)}
 .uarrow-l{display:inline-block;margin-right:7px;transition:transform .35s cubic-bezier(.16,.78,.29,1)}
 a:hover .uarrow-l,button:hover .uarrow-l{transform:translateX(-4px)}
 .kontakt-cols{display:grid;grid-template-columns:1fr;gap:28px}
 @media (min-width:820px){.kontakt-cols{grid-template-columns:1fr 1fr}}
 .kontakt-cols>div{display:flex;flex-direction:column}
 .kontakt-cols .scpc{flex:1;display:flex;flex-direction:column}
 .kontakt-cols form{flex:1}
 /* "Wofür wir uns einsetzen": redaktionelle Liste, volle Breite, keine Boxen –
    Ziffer + Text nebeneinander, feine Trennlinie zwischen den Einträgen. */
 .pos-grid{display:flex;flex-direction:column}
 .pos-row{border-bottom:1px solid #E6E6EC;padding:24px 8px}
 .pos-row .pos-text{transition:transform .42s cubic-bezier(.16,.78,.29,1);min-width:0;overflow-wrap:break-word;hyphens:auto}
 .pos-row:hover .pos-text{transform:translateX(7px)}
 .responsive-cards{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px 4px 16px}
 .responsive-cards::-webkit-scrollbar{display:none}
 .rc-card{scroll-snap-align:start}
 .rc-card-vorstand{flex:0 0 170px}
 .rc-card-topic{flex:0 0 80vw;max-width:330px}
 /* Tablet: schmalere Karten, damit mehrere im Wisch-Karussell sichtbar sind */
 @media (min-width:640px){
  .rc-card-topic{flex:0 0 316px;max-width:316px}
 }
 /* Vorstand: Wisch-Karussell; passt alles in eine Zeile, wird zentriert,
    sonst horizontal scrollbar (Pfeile ergänzt enhance.js auf Desktop). */
 @media (min-width:640px){
  .rc-card-vorstand{flex:0 0 210px;max-width:210px}
 }

 /* Themen-Kacheln bleiben Wisch-Karussell, bis alle vier bequem nebeneinander
    passen (>=1120px) -> dann sauberes 4er-Raster, kein 3+1-Umbruch */
 @media (min-width:1120px){
  .responsive-cards.rc-topics{overflow:visible;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .rc-card-topic{flex:none;max-width:none}
 }
 @media (max-width:859px){.press-arrows{display:none}}
 .press-body p{font-size:17.5px;line-height:1.75;color:#3A3A45;margin:0 0 20px}
 .press-body ul,.press-body ol{font-size:17.5px;line-height:1.75;color:#3A3A45;margin:0 0 20px;padding-left:26px}
 .press-body li{margin-bottom:6px}
 .press-body h3{font-family:'Public Sans';font-weight:800;font-size:22px;color:#032D67;margin:8px 0 14px;letter-spacing:-.01em}
 .press-body a{color:#0A76A8;font-weight:600;text-decoration:underline;text-underline-offset:2px}
 .press-body strong,.press-body b{color:#032D67}
 .press-body blockquote{margin:0 0 20px;padding:14px 20px;border-left:4px solid #FFE000;background:#F7F9FC;border-radius:0 10px 10px 0;font-size:17px;line-height:1.7;color:#3A3A45}
 .press-body hr{border:none;border-top:1px solid #E6E6EC;margin:26px 0}
 .press-body s,.press-body strike{color:#8A8A96}
 .press-body :last-child{margin-bottom:0}
 /* ============ Beitragsseite (Pressemitteilung Detail) ============
    Format: docs/ki-texte/beitragsformat.md, Renderer: beitragsformat.py.
    Gestaltung „Faktenblatt“ (Timo, 21.10.2026). Tokens am Element definiert (unabhängig vom Startseiten-Relaunch), keine Pillen. */
 .bk{--blau:#032D67;--gelb:#FFE000;--akzent:#0A76A8;--akzent-hell:#00A7E7;--flaeche:#F1F5FA;--linie:#E6E6EC;
   --text:#3A3A45;--text-leise:#6B6B78;--t-lead:clamp(17px,1.5vw,21px);--t-klein:clamp(13.5px,.95vw,15px);
   --t-kicker:clamp(12px,.9vw,14px);--rand:clamp(20px,5vw,40px);
   position:relative;margin:0 auto;padding:0 0 clamp(48px,6vw,88px);color:var(--text)}
 .bk :focus-visible{outline:3px solid var(--akzent-hell);outline-offset:3px;border-radius:3px}
 .bk-fortschritt{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--blau);
   transform:scaleX(0);transform-origin:0 50%;z-index:80;pointer-events:none}
 @keyframes bkFortschritt{to{transform:scaleX(1)}}
 @supports (animation-timeline:scroll()){
   @media (prefers-reduced-motion:no-preference){
     .bk-fortschritt{animation:bkFortschritt linear both;animation-timeline:scroll(root)}}}
 /* ---- Kopf ---- */
 .bk-kopf{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
 .bk-kopf-in{max-width:var(--bk-breite,820px);margin:0 auto;padding:clamp(22px,3.5vw,40px) var(--rand) 0}
 .bk-zurueck{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:6px 0;cursor:pointer;
   color:var(--blau);font-weight:700;font-size:var(--t-klein);letter-spacing:.02em}
 .bk-zurueck:hover .uline{text-decoration:underline;text-underline-offset:3px}
 .bk-titel{font-family:'Public Sans';font-weight:900;color:var(--blau);margin:14px 0 0;
   font-size:clamp(30px,4.6vw,54px);line-height:1.06;letter-spacing:-.022em;text-wrap:balance;overflow-wrap:anywhere}
 .bk-lead{margin:clamp(16px,2vw,24px) 0 0;font-size:var(--t-lead);line-height:1.6;color:var(--text)}
 /* ---- Layout ---- */
 .bk-layout{display:flex;flex-direction:column;max-width:var(--bk-breite,820px);margin:0 auto;
   padding:clamp(30px,4vw,52px) var(--rand) 0}
 .bk-side{display:contents}
 .bk-body-wrap{order:2;min-width:0}
 .bk-quellen-wrap{order:3;min-width:0}
 .bk-quellen-wrap:empty,.bk-toc-wrap:empty{display:none}
 /* ---- Text ---- */
 .bk-body{font-size:clamp(17px,1.25vw,18.5px);line-height:1.76;color:#2f2f3a;overflow-wrap:anywhere}
 .bk-body>*:first-child{margin-top:0}
 .bk-body p{margin:0 0 1.15em}
 .bk-body a{color:var(--akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
 .bk-body a:hover{color:var(--blau)}
 .bk-body strong,.bk-body b{color:var(--blau)}
 .bk-body s,.bk-body strike{color:var(--text-leise)}
 .bk-body ul,.bk-body ol{margin:0 0 1.2em;padding-left:1.35em}
 .bk-body li{margin:0 0 .5em;padding-left:.2em}
 .bk-body li::marker{color:var(--akzent);font-weight:700}
 .bk-body hr{border:0;border-top:1px solid var(--linie);margin:2em 0}
 .bk-h{font-family:'Public Sans';font-weight:800;color:var(--blau);font-size:clamp(21px,2.3vw,27px);
   line-height:1.22;letter-spacing:-.012em;margin:2em 0 .6em;scroll-margin-top:104px}
 .bk-body blockquote{margin:1.6em 0;padding:.9em 1.2em;border-left:4px solid var(--gelb);background:var(--flaeche);border-radius:0 6px 6px 0}
 .bk-body blockquote p:last-child{margin-bottom:0}
 .bk-zitat{margin:2em 0}
 .bk-zitat blockquote{margin:0;padding:0;border:0;background:none;border-radius:0}
 .bk-zitat blockquote p{margin:0 0 .5em}
 .bk-zitat figcaption{font-size:var(--t-klein);font-weight:700;color:var(--text-leise);letter-spacing:.01em}
 .bk-zitat figcaption::before{content:'— '}
 .bk-kasten{margin:2em 0;padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px);background:var(--flaeche)}
 .bk-kasten-titel{margin:0 0 .7em!important;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
   font-size:var(--t-kicker);color:var(--blau)}
 .bk-kasten ul,.bk-kasten ol{margin-bottom:0}
 .bk-kasten>*:last-child{margin-bottom:0}
 .bk-sig{margin-top:2.2em;padding-top:1.1em;border-top:1px solid var(--linie);color:var(--text)}
 .bk-sig p{margin:0 0 .25em;line-height:1.6}
 .bk-sig-name{font-weight:800;color:var(--blau)}
 .bk-quellen{margin-top:clamp(30px,4vw,48px);padding-top:20px;border-top:1px solid var(--linie);font-size:var(--t-klein);line-height:1.6}
 .bk-side-label{margin:0 0 12px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;font-size:var(--t-kicker);color:var(--blau)}
 .bk-quellen ul,.bk-quellen ol{margin:0;padding-left:1.2em}
 .bk-quellen li{margin:0 0 .5em}
 .bk-quellen a{color:var(--akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
 .bk-toc ol{margin:0;padding:0;list-style:none}
 .bk-toc li{margin:0}
 .bk-toc a{display:block;padding:7px 0 7px 12px;border-left:2px solid var(--linie);color:var(--text);font-size:var(--t-klein);
   line-height:1.4;text-decoration:none;font-weight:600}
 .bk-toc a:hover{border-left-color:var(--blau);color:var(--blau)}
 .bk .press-att{margin-top:clamp(26px,3.4vw,40px)}
 .bk .press-nav{max-width:calc(var(--bk-breite,820px) - 2*var(--rand));width:calc(100% - 2*var(--rand));margin:clamp(40px,5vw,64px) auto 0;padding:clamp(24px,3vw,32px) 0 0}
 .bk:has(.press-nav){padding-bottom:clamp(40px,5vw,72px)}

 /* ---- Faktenblatt: nüchtern, Seitenleiste, nummerierte Abschnitte ---- */
 .bk{--bk-breite:1120px}
 .bk .bk-kopf-in{border-top:6px solid var(--blau);margin-top:0;padding-top:clamp(20px,3vw,32px)}
 .bk .bk-titel{font-size:clamp(28px,4vw,46px);max-width:24ch}
 .bk .bk-lead{max-width:62ch;padding-left:16px;border-left:4px solid var(--gelb)}
 .bk .bk-hero{max-width:var(--bk-breite,820px);margin:clamp(24px,3vw,36px) auto 0;padding:0 var(--rand)}
 .bk .bk-hero img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:4px;background:var(--linie)}
 .bk .bk-credit-hero{position:absolute;right:clamp(20px,5vw,40px);bottom:10px;max-width:70%;font-size:12px;line-height:1.4;color:rgba(255,255,255,.78);text-align:right;text-shadow:0 1px 3px rgba(2,16,40,.7)}
 .bk .bk-zurueck-zeile{padding-top:clamp(14px,2vw,22px);padding-bottom:0;border-top:0}
 @media(min-width:820px){.bk .bk-hero img{aspect-ratio:21/9}}
 .bk .bk-fakten{order:0;margin:0 0 20px;padding:0}
 .bk .bk-fakten div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--linie);font-size:var(--t-klein)}
 .bk .bk-fakten dt{font-weight:700;color:var(--text-leise)}
 .bk .bk-fakten dd{margin:0;font-weight:700;color:var(--blau);text-align:right}
 .bk .bk-toc-wrap{order:1;margin:0 0 24px}
 .bk .bk-body{counter-reset:bk-h;max-width:68ch}
 .bk .bk-h{counter-increment:bk-h;display:flex;gap:.6em;align-items:baseline;margin:2em 0 .7em;padding-top:.7em;border-top:2px solid var(--blau)}
 .bk .bk-h::before{content:counter(bk-h,decimal-leading-zero);font-weight:800;color:var(--akzent);font-size:.8em;letter-spacing:.04em;flex:none}
 .bk .bk-kasten{background:var(--flaeche);border-left:6px solid var(--blau)}
 .bk .bk-zitat{padding:4px 0 4px 20px;border-left:4px solid var(--gelb)}
 .bk .bk-zitat blockquote p{font-weight:700;color:var(--blau);font-size:clamp(18px,1.8vw,21px);line-height:1.45}
 .bk .bk-quellen{margin-top:0;padding:16px 18px;background:#fff;border:2px solid var(--blau);border-top-width:6px;font-size:var(--t-klein)}
 .bk .bk-quellen li{font-weight:600}
 .bk .bk-quellen ul{list-style:none;padding:0;counter-reset:bk-q}
 .bk .bk-quellen li{counter-increment:bk-q;display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--linie)}
 .bk .bk-quellen li::before{content:'['counter(bk-q)']';font-weight:800;color:var(--akzent);flex:none}
 .bk .bk-quellen li:last-child{border-bottom:0}
 @media (min-width:960px){
   .bk .bk-layout{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:clamp(40px,5vw,72px);align-items:start}
   .bk .bk-side{display:block;position:sticky;top:104px;max-height:calc(100vh - 124px);overflow:auto;padding-right:6px}
   .bk .bk-body-wrap{grid-column:2;grid-row:1}
   .bk .bk-side .bk-quellen-wrap{margin-top:8px}
 }
 @media (prefers-reduced-motion:reduce){
   .bk *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
 }
 /* Artikel-Detail: Vor/Zurück schlicht (Pfeil + Titel, kein Kasten) */
 .press-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px;padding-top:26px;border-top:1px solid #E6E6EC}
 .pn-card{display:flex;flex-direction:column;gap:5px;text-align:left;background:none;border:none;padding:0;cursor:pointer}
 .pn-card.pn-right{text-align:right;grid-column:2;align-items:flex-end}
 .pn-label{display:inline-flex;align-items:center;gap:7px;color:#0A76A8;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
 .pn-title{color:#032D67;font-weight:800;font-size:16px;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s ease}
 .pn-card:hover .pn-title{color:#0A76A8}
 .pn-card .uarrow,.pn-card .uarrow-l{transition:transform .25s cubic-bezier(.22,1,.36,1)}
 .pn-card:hover .uarrow{transform:translateX(4px)}
 .pn-card:hover .uarrow-l{transform:translateX(-4px)}
 @media(max-width:600px){.press-nav{grid-template-columns:1fr;gap:22px}.pn-card.pn-right{grid-column:1;text-align:left;align-items:flex-start}}
 /* Tag-Badges: „+N" dezent für weitere Tags (nur auf Karten) */
 .tag-more{background:#EEF2F8;color:#6B7280;font-weight:700;font-size:11px;padding:5px 9px;border-radius:4px}