/* ============================================================================
   Landtagswahlprogramm 2027 — Kampagnenseite (Template „landtagswahlprogramm")

   Portierung von mockup/index.html. Das Mockup trug seine Gestaltung fast
   ausschließlich in style=""-Attributen; hier steht sie als Klassen, damit die
   Seite wartbar bleibt und das Markup lesbar ist.

   Zwei bewusste Abweichungen vom Mockup:
   1. SCHRIFTEN LOKAL. Das Mockup lud Schibsted Grotesk und Source Serif 4 vom
      Google-Fonts-CDN. Das überträgt die IP jeder Besucherin an Google und ist
      damit für uns nicht zulässig — beide Familien stehen unter der SIL Open
      Font License und werden hier selbst ausgeliefert (siehe @font-face unten).
      Deshalb entfällt auch die strikte CSP-Ausnahme: font-src bleibt 'self'.
   2. ALLES UNTER .lwp GESCHACHTELT. Die Seite läuft im normalen Theme-Layout
      (Header, Footer, Newsletter). Der Reset des Mockups (body-Hintergrund,
      Serifen-Grundschrift, Fokusring) darf darum nicht global gelten, sonst
      färbte er Kopf- und Fußbereich um.

   Farbwelt bewusst eigenständig (Kampagnen-Look, abgesetzt vom Theme):
     Blau #0A3C85 · Orange #F7A600 · Tinte #0E1B33 · Papier #F8F7F3
   ========================================================================== */

/* ---------- Schriften: lokal gehostet, latin-Subset, kein CDN ---------- */
/* Schibsted Grotesk ist ein Variable Font — eine Datei deckt 400–900 ab.
   Source Serif 4 liegt als statische Schnitte vor: das Mockup nutzt genau 400,
   600 (für <strong> im Fließtext) und 400 kursiv (Zitat des Kandidaten). Der
   variable Schnitt trüge zusätzlich die opsz-Achse und wäre doppelt so groß. */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url("/themes/default/assets/fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/themes/default/assets/fonts/source-serif-4-latin-400.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/themes/default/assets/fonts/source-serif-4-latin-600.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("/themes/default/assets/fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
}

/* ---------- Tokens & Grundlagen ---------- */
.lwp{
  --lwp-blue:#0A3C85;
  --lwp-blue-deep:#072C63;
  --lwp-gold:#F7A600;
  --lwp-gold-light:#FFB420;
  /* Gedämpftes Gold für die Ziffernkreise INNERHALB einer aufgeklappten
     Ebene. Die Ebenen-Überschrift trägt das volle --lwp-gold; die
     Maßnahmen darunter stehen eine Stufe tiefer und treten darum auch
     farblich zurück. Der Wert ist der hellste, der noch beide Grenzen
     hält: 1,26:1 gegen das Haupt-Gold (unterscheidbar) und 1,50:1 gegen
     den Papier-Hintergrund (der Kreis verschwimmt nicht). Ab #FFCC70
     löst sich der Kreis auf #F8F7F3 optisch auf. */
  --lwp-gold-soft:#FFC24D;
  /* Ein Maß für alle schmückenden Pfeile der Seite (Verzeichnis,
     Abschnitts- und Amtsblatt-Link). Sie stehen in unterschiedlich großen
     Textumgebungen — ohne gemeinsamen Wert wirkten manche kräftig und
     andere verloren. Die Pfeile der Karussell-Schaltflächen bleiben außen
     vor: Die sitzen in runden 48-px-Knöpfen und haben ihr eigenes Maß. */
  --lwp-arrow:26px;
  --lwp-ink:#0E1B33;
  --lwp-muted:#44506A;
  --lwp-faint:#6B7590;
  --lwp-paper:#F8F7F3;
  --lwp-tint:#E9EFF9;
  --lwp-line:rgba(14,27,51,.12);
  --lwp-head:"Schibsted Grotesk",system-ui,sans-serif;
  --lwp-body:"Source Serif 4",Georgia,serif;
  /* Anker unter dem klebenden Theme-Header ausrichten: das Mockup rechnete mit
     8px, hier kommt die Headerhöhe dazu — sonst verschwindet jede Sprungmarke
     hinter der Navigation. */
  --lwp-anchor:calc(var(--header-h) + 8px);

  font-family:var(--lwp-body);
  color:var(--lwp-ink);
  background:var(--lwp-paper);
}
/* Grundfarbe für Links — bewusst in :where(), damit die Regel keine
   Spezifität aus dem Typselektor zieht. Ohne das käme ".lwp a" auf 0-1-1 und
   schlüge jede Button-Klasse (0-1-0): der Ghost-Button „Der Kandidat" bekäme
   Blau auf blauem Hero, die Scroll-Aufforderung ebenso — beides unsichtbar.
   Mit :where() liegt die Regel auf 0-1-0 und gilt nur, solange kein Baustein
   eine eigene Farbe mitbringt. Das Theme setzt a{color:inherit} (0-0-1); diese
   Regel liegt darüber, ".lwp :where(a)" bleibt also wirksam. */
.lwp :where(a){color:var(--lwp-blue);}
.lwp :where(a:hover){color:var(--lwp-blue-deep);}
.lwp :focus-visible{outline:3px solid var(--lwp-gold);outline-offset:3px;}
.lwp summary::-webkit-details-marker{display:none;}
.lwp p{text-wrap:pretty;}

/* Innenbreite des Mockups (1160px + 20px Luft je Seite). Bewusst schmaler als
   das Theme-.wrap (1600px): die Seite ist ein Lesestück, keine Übersicht. */
.lwp-wrap{width:min(100% - 40px,1160px);margin:0 auto;}

@keyframes lwp-hero-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes lwp-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lwp-cue{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- Lesefortschritt ---------- */
/* Sitzt direkt unter dem klebenden Header (z-index 60), darum 59 — der Balken
   soll die Navigation nicht überlagern, sondern an ihr kleben. */
.lwp-progress{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:59;
  height:4px;background:var(--lwp-gold);
  transform:scaleX(0);transform-origin:left center;pointer-events:none;
}

/* ---------- Typografische Bausteine ---------- */
.lwp-eyebrow{
  margin:0;font:600 13px/1.2 var(--lwp-head);
  letter-spacing:.1em;text-transform:uppercase;color:var(--lwp-blue);
}
.lwp-eyebrow--gold{color:var(--lwp-gold);}
.lwp-eyebrow--ink{color:var(--lwp-ink);}
.lwp-h2{
  margin:16px 0 0;font:800 clamp(32px,5.4vw,60px)/1.02 var(--lwp-head);
  letter-spacing:-.025em;color:var(--lwp-ink);text-wrap:balance;max-width:22ch;
}
.lwp-h2--onblue{color:#fff;}
.lwp-h2--sm{font-size:clamp(28px,4.4vw,48px);line-height:1.05;letter-spacing:-.02em;max-width:24ch;}
.lwp-h2--narrow{max-width:18ch;}
.lwp-h3{
  margin:14px 0 0;font:800 clamp(26px,3.6vw,40px)/1.08 var(--lwp-head);
  letter-spacing:-.02em;color:var(--lwp-ink);text-wrap:balance;
}
.lwp-lead{
  margin:18px 0 0;font:400 clamp(18px,2vw,23px)/1.45 var(--lwp-body);
  color:var(--lwp-ink);max-width:60ch;
}
.lwp-lead--onblue{color:rgba(255,255,255,.85);}
.lwp-lead--narrow{max-width:52ch;}
.lwp-text{margin:0;font:400 17px/1.6 var(--lwp-body);color:var(--lwp-muted);}
.lwp-text + .lwp-text{margin-top:14px;}
.lwp-text--sm{font-size:16px;line-height:1.6;}
.lwp-source{margin:14px 0 0;font:500 12px/1.4 var(--lwp-head);color:var(--lwp-faint);}

/* Pfeil-Link mit goldener Unterkante (Mockup: „Auftrag 01 · … →") */
.lwp-link{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;font:700 15px/1 var(--lwp-head);
  color:var(--lwp-blue);text-decoration:none;border-bottom:2px solid var(--lwp-gold);
}
/* Der Pfeil war zuvor Teil der Beschriftung und lief darum mit 15px mit — neben
   den 26px im Verzeichnis wirkte er verloren. Als eigenes Element bekommt er
   das gemeinsame Maß, der Beschriftungstext bleibt bei 15px. Die Verlinkung ist
   inline-flex mit align-items:center, der größere Pfeil sitzt also mittig zum
   Text; min-height:44px trägt ihn ohne Umbruch. */
.lwp-link__arrow{font-size:var(--lwp-arrow);line-height:1;}

/* ---------- Buttons ---------- */
.lwp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 24px;border-radius:999px;
  font:700 15px/1 var(--lwp-head);text-decoration:none;box-sizing:border-box;
  transition:background .2s ease,color .2s ease;
}
.lwp-btn--gold{background:var(--lwp-gold);color:var(--lwp-ink);}
.lwp-btn--gold:hover{background:var(--lwp-gold-light);color:var(--lwp-ink);}
.lwp-btn--ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff;}
.lwp-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;}
.lwp-btn--blue{min-height:54px;padding:0 26px;font-size:16px;background:var(--lwp-blue);color:#fff;}
.lwp-btn--blue:hover{background:var(--lwp-blue-deep);color:#fff;transform:translateY(-1px);}

/* ---- Aufmerksamkeits-Puls des Formblatt-Buttons ----
   Der Button ist das eigentliche Ziel der Seite und steht ganz unten. Damit er
   auffällt, pulsiert er kurz — aber nach Regeln:

   BEGRENZT, NICHT ENDLOS. Eine dauerhaft pulsierende Schaltfläche liest sich als
   Werbebanner und nutzt sich nach Sekunden ab. Sechs Durchläufe à 1,5 s (rund
   9 s) holen den Blick, danach steht der Button ruhig da. Verlängert wird über
   die Wiederholungszahl, nicht über die Dauer je Puls — so bleibt der Rhythmus
   gleich und die Animation wird nur länger, nicht träger.

   ERST BEIM SICHTBARWERDEN, DANN WIEDERKEHREND. Die Klasse .is-attention setzt
   und entfernt wahlprogramm.js: erstmals, sobald der Button ins Bild kommt,
   danach alle 25 s erneut, solange er sichtbar bleibt. Stünde die Animation
   fest in der CSS, liefe sie beim Seitenaufbau ab — bei dieser Seitenlänge
   lange bevor jemand hier unten ankommt. Achtung: Die Wiederholungszahl unten
   ist mit PULSE_MS in wahlprogramm.js gekoppelt; wird sie hier geändert, muss
   der Wert dort mitwandern, sonst passen Schub und Pause nicht mehr zusammen.

   HOVER UND FOKUS BRECHEN AB. Wer den Button gefunden hat, muss nicht weiter
   angesprochen werden; der Puls würde beim Zielen sogar stören, weil er die
   Trefferfläche bewegt.

   Der Ring ist weiß, nicht golden: Der Abschnitt hat goldenen Hintergrund, ein
   goldener Ring wäre unsichtbar. */
@keyframes lwp-btn-pulse{
  0%   {box-shadow:0 0 0 0 rgba(255,255,255,.85);transform:scale(1);}
  55%  {box-shadow:0 0 0 16px rgba(255,255,255,0);transform:scale(1.035);}
  100% {box-shadow:0 0 0 0 rgba(255,255,255,0);transform:scale(1);}
}
/* Der Pfeil wippt mit — bei einem Download-Button sagt die Richtung mit, worum
   es geht. inline-block ist nötig: transform greift bei reinen Inline-Elementen
   nicht. */
@keyframes lwp-btn-arrow{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(3px);}
}
.lwp-btn__arrow{display:inline-block;}
.lwp-btn--blue.is-attention{animation:lwp-btn-pulse 1.5s cubic-bezier(.2,.7,.2,1) .35s 6;}
.lwp-btn--blue.is-attention .lwp-btn__arrow{animation:lwp-btn-arrow 1.5s ease-in-out .35s 6;}
.lwp-btn--blue.is-attention:hover,
.lwp-btn--blue.is-attention:focus-visible,
.lwp-btn--blue.is-attention:hover .lwp-btn__arrow,
.lwp-btn--blue.is-attention:focus-visible .lwp-btn__arrow{animation:none;}

/* ============================ HERO ============================ */
.lwp-hero{
  position:relative;
  /* 100svh minus Headerhöhe: sonst schöbe der klebende Header den Hero über
     die Falz und die Scroll-Aufforderung läge außerhalb des Sichtfelds. */
  min-height:calc(100svh - var(--header-h));
  background:var(--lwp-blue);color:#fff;
  display:flex;align-items:center;padding:72px 0 84px;overflow:hidden;
  box-sizing:border-box;scroll-margin-top:var(--lwp-anchor);
}
.lwp-hero__inner{
  display:flex;flex-wrap:wrap-reverse;align-items:center;gap:clamp(28px,5vw,72px);
}
/* container-query-Einheit: die H1 skaliert nach der Textspalte, nicht nach dem
   Viewport — sonst bricht der Claim, sobald das Porträt daneben steht. */
.lwp-hero__copy{flex:1 1 380px;min-width:0;container-type:inline-size;}
.lwp-hero__eyebrow{animation:lwp-hero-in .9s cubic-bezier(.2,.7,.2,1) .05s both;color:var(--lwp-gold);line-height:1.5;}
.lwp-hero__title{
  margin:18px 0 0;animation:lwp-hero-in .9s cubic-bezier(.2,.7,.2,1) .15s both;
  font:800 clamp(42px,min(8.5vw,12cqi),104px)/.95 var(--lwp-head);
  letter-spacing:-.03em;color:#fff;text-wrap:balance;
}
.lwp-hero__lead{
  margin:22px 0 0;animation:lwp-hero-in .9s cubic-bezier(.2,.7,.2,1) .3s both;
  font:400 clamp(18px,2.1vw,24px)/1.4 var(--lwp-body);
  color:rgba(255,255,255,.88);max-width:34ch;
}
.lwp-hero__person{margin-top:30px;animation:lwp-hero-in .9s cubic-bezier(.2,.7,.2,1) .42s both;display:flex;flex-direction:column;gap:4px;}
.lwp-hero__name{font:700 clamp(22px,2.6vw,30px)/1.1 var(--lwp-head);color:#fff;}
.lwp-hero__role{font:500 14px/1.4 var(--lwp-head);color:rgba(255,255,255,.72);}
.lwp-hero__cta{margin-top:30px;animation:lwp-hero-in .9s cubic-bezier(.2,.7,.2,1) .55s both;display:flex;flex-wrap:wrap;gap:12px;}
.lwp-hero__media{flex:0 1 420px;min-width:0;margin:0 auto;position:relative;animation:lwp-hero-in 1.1s cubic-bezier(.2,.7,.2,1) .2s both;}
.lwp-hero__blob{position:absolute;width:88%;aspect-ratio:1;border-radius:50%;background:var(--lwp-gold);right:-14%;top:-10%;}
.lwp-hero__frame{position:relative;width:100%;aspect-ratio:4/5;}
.lwp-hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:24px;display:block;}
.lwp-hero__scroll{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;color:rgba(255,255,255,.75);
  font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;
  padding:10px;white-space:nowrap;
}
.lwp-hero__scroll:hover{color:#fff;}
.lwp-hero__cue{display:block;animation:lwp-cue 1.8s ease-in-out infinite;font-size:18px;line-height:1;}

/* ============================ SEKTIONEN ============================ */
.lwp-section{scroll-margin-top:var(--lwp-anchor);}
.lwp-section--white{background:#fff;padding:clamp(64px,9vw,120px) 0 clamp(24px,4vw,48px);}
.lwp-section--paper{background:var(--lwp-paper);padding:clamp(64px,9vw,120px) 0 clamp(40px,6vw,72px);}
.lwp-section--blue{background:var(--lwp-blue);color:#fff;padding:clamp(64px,9vw,120px) 0;overflow:hidden;}
.lwp-section--gold{background:var(--lwp-gold);color:var(--lwp-ink);padding:clamp(64px,9vw,120px) 0;}
.lwp-section--cand{background:#fff;padding:clamp(64px,9vw,120px) 0;}

/* ============ ÜBERBLICK · Scrollytelling mit Kennzahlenkarte ============ */
.lwp-story{
  width:min(100% - 40px,1160px);margin:clamp(36px,5vw,64px) auto 0;
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);align-items:flex-start;
}
.lwp-story__col{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;}

/* Kennzahlenkarte. Existiert zweimal: einmal klebend neben der Geschichte
   (breite Schirme) und einmal statisch je Abschnitt (Telefon) — die Kopien
   klont wahlprogramm.js aus dieser Karte. */
.lwp-fig{
  flex:1 1 340px;min-width:0;align-self:flex-start;
  background:var(--lwp-blue);color:#fff;border-radius:24px;
  padding:clamp(20px,3vw,36px);box-shadow:0 20px 60px rgba(10,60,133,.18);
  box-sizing:border-box;
}
.lwp-fig[data-sticky-fig]{position:sticky;top:calc(var(--header-h) + 16px);z-index:2;}
.lwp-fig__head{
  display:flex;justify-content:space-between;gap:12px;
  font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.lwp-fig__count{font-variant-numeric:tabular-nums;}
.lwp-fig__figure{margin-top:14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.lwp-fig__value{
  font:800 clamp(44px,7.5vw,88px)/.95 var(--lwp-head);
  letter-spacing:-.035em;color:var(--lwp-gold);font-variant-numeric:tabular-nums;
}
.lwp-fig__unit{font:700 clamp(20px,3vw,34px)/1 var(--lwp-head);color:var(--lwp-gold);}
.lwp-fig__label{margin:10px 0 0;font:400 clamp(15px,1.6vw,18px)/1.4 var(--lwp-body);color:#fff;}
.lwp-fig__bars{margin-top:18px;display:grid;gap:10px;}
.lwp-fig__barhead{
  display:flex;justify-content:space-between;gap:12px;
  font:600 13px/1.2 var(--lwp-head);color:rgba(255,255,255,.85);margin-bottom:6px;
}
.lwp-fig__barvalue{font-variant-numeric:tabular-nums;}
.lwp-fig__track{height:10px;background:rgba(255,255,255,.18);border-radius:5px;overflow:hidden;}
.lwp-fig__fill{height:100%;border-radius:5px;width:0%;transition:width .8s cubic-bezier(.2,.7,.2,1);}
.lwp-fig__fill--gold{background:var(--lwp-gold);}
.lwp-fig__fill--white{background:rgba(255,255,255,.75);}
.lwp-fig__sub{
  margin:16px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);
  font:600 14px/1.4 var(--lwp-head);color:rgba(255,255,255,.9);
}
.lwp-fig__source{margin:14px 0 0;font:500 12px/1.4 var(--lwp-head);color:rgba(255,255,255,.6);}

.lwp-step{min-height:62vh;padding:8px 0 40px;display:flex;flex-direction:column;gap:12px;}
.lwp-step:last-child{min-height:50vh;padding-bottom:24px;}
.lwp-step__kicker{font:600 13px/1.2 var(--lwp-head);letter-spacing:.1em;text-transform:uppercase;color:var(--lwp-blue);}
.lwp-step__title{margin:0;font:700 clamp(24px,3.2vw,36px)/1.15 var(--lwp-head);letter-spacing:-.02em;color:var(--lwp-ink);text-wrap:balance;}

/* Wahlkreis-Abbinder unter der Geschichte */
.lwp-district{
  width:min(100% - 40px,1160px);margin:clamp(40px,6vw,72px) auto 0;
  padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--lwp-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,4vw,56px);align-items:center;
}
.lwp-district__text{margin:16px 0 0;font:400 17px/1.6 var(--lwp-body);color:var(--lwp-muted);}
.lwp-district__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font:700 15px/1 var(--lwp-head);color:var(--lwp-blue);text-decoration:none;border-bottom:2px solid var(--lwp-gold);}
.lwp-district__figure{margin:0;}
.lwp-district__map{display:block;width:min(100%,440px);height:auto;margin:0 auto;}
/* Einschränkender Hinweis unter der Karte. Bewusst zurückhaltend — er
   qualifiziert die Karte, er konkurriert nicht mit ihr: kleiner Fließtext in
   der gedämpften Textfarbe. Die goldene Kante links kennzeichnet ihn als
   Anmerkung, ohne einen ganzen Kasten zu bauen. Breite und Zentrierung folgen
   der Karte darüber (min(100%,440px), margin auto), damit beide bündig stehen. */
.lwp-district__note{
  max-width:min(100%,440px);
  margin:16px auto 0;
  padding-left:14px;
  border-left:3px solid var(--lwp-gold);
  font:400 14px/1.5 var(--lwp-body);
  color:var(--lwp-muted);
  text-wrap:pretty;
}

/* ============ ZEHN AUFTRÄGE · Übersicht ============ */
.lwp-howto{margin-top:32px;padding:clamp(18px,2.5vw,26px);background:#fff;border:1px solid var(--lwp-line);border-radius:20px;}
.lwp-howto__title{margin:0 0 16px;font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-muted);}
.lwp-howto__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px;}
.lwp-howto__item{display:flex;gap:12px;align-items:flex-start;}
.lwp-howto__label{display:block;font:700 15px/1.3 var(--lwp-head);color:var(--lwp-ink);}
.lwp-howto__desc{font:400 14px/1.45 var(--lwp-body);color:var(--lwp-muted);}

/* Runde Ziffernmarke — „Ebene 1–4", Maßnahmen, Leitgedanken, Mitmach-Schritte */
.lwp-dot{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font:800 13px/1 var(--lwp-head);
}
.lwp-dot--blue{background:var(--lwp-blue);color:#fff;}
.lwp-dot--gold{background:var(--lwp-gold);color:var(--lwp-ink);}

.lwp-toc{margin-top:40px;columns:2 460px;column-gap:48px;}
.lwp-toc__item{
  display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:start;
  padding:16px 0;border-top:1px solid var(--lwp-line);
  text-decoration:none;color:var(--lwp-ink);break-inside:avoid;
}
.lwp-toc__item:last-child{border-bottom:1px solid var(--lwp-line);}
.lwp-toc__item:hover{color:var(--lwp-blue);}
.lwp-toc__no{font:800 20px/1.2 var(--lwp-head);color:var(--lwp-gold);font-variant-numeric:tabular-nums;}
.lwp-toc__body{display:flex;flex-direction:column;gap:4px;}
.lwp-toc__title{font:700 17px/1.25 var(--lwp-head);}
.lwp-toc__desc{font:400 15px/1.45 var(--lwp-body);color:var(--lwp-muted);}
/* 26px auf allen Breiten. Das Mockup gab dem Pfeil nur auf Telefonen diese
   Groesse und liess ihn auf dem Desktop bei 16px — dort steht er in derselben
   Spalte wie der „Schwerpunkt“-Chip (rund 23px hoch) und wirkte daneben
   verloren, ebenso neben der goldenen Ordnungszahl (20px). Ein Wert fuer alle
   Breiten heisst ausserdem: nur eine Stelle zu aendern. */
.lwp-toc__arrow{font:700 var(--lwp-arrow)/1 var(--lwp-head);color:var(--lwp-blue);}
.lwp-badge{
  font:700 11px/1 var(--lwp-head);letter-spacing:.06em;text-transform:uppercase;
  color:var(--lwp-ink);background:var(--lwp-gold);border-radius:6px;padding:6px 8px;
}
.lwp-badge--inline{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;}

/* ============ EIN AUFTRAG ============ */
.lwp-order{
  padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--lwp-line);
  scroll-margin-top:var(--lwp-anchor);
}
.lwp-order--paper{background:var(--lwp-paper);}
.lwp-order--white{background:#fff;}
.lwp-order__head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;}
.lwp-order__no{
  font:900 clamp(64px,12vw,124px)/.8 var(--lwp-head);letter-spacing:-.04em;
  color:var(--lwp-gold);font-variant-numeric:tabular-nums;
}
.lwp-order__meta{display:flex;flex-direction:column;gap:10px;padding-bottom:6px;}
.lwp-order__tags{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.lwp-order__title{margin:22px 0 0;max-width:20ch;}
.lwp-order__claim{margin:14px 0 0;font:400 clamp(18px,2vw,23px)/1.4 var(--lwp-body);color:var(--lwp-ink);max-width:36ch;}
.lwp-order__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,48px);align-items:start;
}
.lwp-order__body{margin-top:clamp(28px,4vw,44px);}
.lwp-level{display:block;font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-blue);margin-bottom:10px;}

/* Landeshebel-Chips A/B/C */
.lwp-lever{display:inline-flex;gap:6px;align-items:center;text-decoration:none;min-height:32px;}
.lwp-lever__label{font:600 12px/1 var(--lwp-head);color:var(--lwp-muted);margin-right:2px;}
.lwp-lever__chip{
  display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;
  border-radius:7px;background:var(--lwp-tint);color:var(--lwp-blue);
  font:700 12px/1 var(--lwp-head);
}

/* Kennzahl-Figur rechts neben „Ebene 2 · Warum" */
.lwp-figure{margin:0;border-top:3px solid var(--lwp-gold);padding-top:18px;}
.lwp-figure__row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.lwp-figure__value{font:800 clamp(44px,6vw,72px)/1 var(--lwp-head);letter-spacing:-.03em;color:var(--lwp-blue);font-variant-numeric:tabular-nums;}
.lwp-figure__unit{font:700 clamp(18px,2.4vw,26px)/1 var(--lwp-head);color:var(--lwp-blue);}
.lwp-figure__caption{margin-top:8px;font:400 15px/1.45 var(--lwp-body);color:var(--lwp-muted);}
.lwp-figure__bars{margin-top:22px;display:grid;gap:12px;}
.lwp-figure__barlabel{font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-muted);}
.lwp-figure__barhead{display:flex;justify-content:space-between;gap:12px;font:600 13px/1.2 var(--lwp-head);color:var(--lwp-muted);margin-bottom:6px;}
.lwp-figure__track{height:12px;background:var(--lwp-tint);border-radius:6px;overflow:hidden;}
.lwp-figure__fill{height:100%;border-radius:6px;}
.lwp-figure__fill--blue{background:var(--lwp-blue);}
.lwp-figure__fill--gold{background:var(--lwp-gold);}

/* Aufklapp-Ebenen 3 und 4 */
.lwp-acc__summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:60px;padding:12px 0;cursor:pointer;list-style:none;
  border-top:1px solid var(--lwp-line);color:var(--lwp-ink);
}
.lwp-acc__label{display:flex;align-items:center;gap:14px;}
.lwp-acc__labels{display:flex;flex-direction:column;gap:2px;}
.lwp-acc__level{font:600 11px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-muted);}
.lwp-acc__title{font:700 17px/1.25 var(--lwp-head);color:var(--lwp-ink);}
.lwp-acc__chev{
  flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--lwp-blue);
  display:grid;place-items:center;font:300 26px/1 var(--lwp-head);color:var(--lwp-blue);
  transition:transform .35s ease;
}
.lwp-measures{list-style:none;margin:0;display:grid;gap:18px;animation:lwp-fade-up .45s ease both;}
.lwp-measure{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;}
.lwp-measure__no{width:34px;height:34px;border-radius:50%;background:var(--lwp-gold-soft);color:var(--lwp-ink);display:grid;place-items:center;font:800 14px/1 var(--lwp-head);}
.lwp-measure__title{display:block;font:700 17px/1.3 var(--lwp-head);color:var(--lwp-ink);margin-bottom:4px;}
.lwp-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:22px 32px;padding:6px 0 30px;animation:lwp-fade-up .45s ease both;
}
.lwp-fact__label{display:block;font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-blue);margin-bottom:6px;}
.lwp-fact__text{margin:0;font:400 15px/1.55 var(--lwp-body);color:var(--lwp-muted);}
.lwp-fact__text strong{color:var(--lwp-ink);}

/* Kennzahl-Varianten: Statt Balken zeigen manche Aufträge Einzelwerte (04, 06),
   Prioritäts-Chips (08) oder eine Statusfolge (09). */
.lwp-figure__stats{
  margin-top:22px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:16px;
}
.lwp-figure__statvalue{display:block;font:800 clamp(24px,3vw,34px)/1 var(--lwp-head);color:var(--lwp-blue);font-variant-numeric:tabular-nums;}
.lwp-figure__statlabel{display:block;margin-top:6px;font:400 14px/1.4 var(--lwp-body);color:var(--lwp-muted);}
.lwp-figure__label{display:block;font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-muted);}
.lwp-figure__tags{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.lwp-figure__tag{
  display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
  border-radius:999px;font:700 14px/1 var(--lwp-head);
}
.lwp-figure__tag--blue{background:var(--lwp-blue);color:#fff;}
.lwp-figure__tag--gold{background:var(--lwp-gold);color:var(--lwp-ink);}
.lwp-figure__steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0;}
.lwp-figure__step{
  display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:center;
  min-height:44px;border-top:1px solid var(--lwp-line);
}
.lwp-figure__step:last-child{border-bottom:1px solid var(--lwp-line);}
.lwp-figure__stepdot{width:12px;height:12px;border-radius:50%;margin-left:6px;}
.lwp-figure__stepdot--blue{background:var(--lwp-blue);}
.lwp-figure__stepdot--gold{background:var(--lwp-gold);}
.lwp-figure__steplabel{font:600 15px/1.3 var(--lwp-head);color:var(--lwp-ink);}
.lwp-figure__note{margin:16px 0 0;font:600 14px/1.4 var(--lwp-head);color:var(--lwp-ink);}
.lwp-figure__note + .lwp-source{margin-top:10px;}

/* ============ SCHLÜSSELPROJEKTE & FAHRPLAN ============ */
/* Karussell der zehn Schlüsselprojekte.
   Aufbau bewusst identisch zum Pressemitteilungs-Karussell der Startseite
   (plugins/pressemitteilungen/assets/css/press.css): nativer scroll-snap-Track
   als Grundlage, JS nur als Verbesserung obendrauf. Wischen, Scrollen und
   Tastatur funktionieren damit auch ohne JavaScript.

   Zwei Abweichungen vom Mockup, beide bewusst:
   1. KEIN NEGATIVER RAND. Das Mockup zog den Track mit margin:0 -20px unter
      den Rand des Inhaltsbereichs und fing das mit padding:0 20px wieder ab.
      Die umgebende Sektion hat overflow:hidden, der Track ragte also in einen
      abgeschnittenen Bereich hinein. Jetzt liegt er bündig im Inhaltsbereich —
      dieselbe Lösung wie beim Press-Track.
   2. KACHELBREITE AUS DEM CONTAINER statt aus der Viewportbreite (78vw). So
      endet die angeschnittene Kachel exakt am Inhaltsrand und zeigt damit an,
      dass es weitergeht — die Formel ist die des Press-Tracks. */
.lwp-rail-wrap{position:relative;margin-top:clamp(28px,4vw,44px);}
.lwp-rail{
  --lwp-cards:3.3;
  --lwp-rail-gap:16px;

  display:flex;
  gap:var(--lwp-rail-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* Oben/unten Luft für den Kartenschatten; horizontal bündig. */
  padding:4px 0 18px;
  /* Scrollleiste aus — navigiert wird per Wischen, Ziehen, Pfeil, Punkt. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.lwp-rail::-webkit-scrollbar{display:none;}
/* Während des Maus-Ziehens: snap aus (sonst kämpft es gegen die Geste). */
.lwp-rail.is-dragging{scroll-snap-type:none;scroll-behavior:auto;user-select:none;}
.lwp-rail.is-dragging,
.lwp-rail.is-dragging *{cursor:grabbing;}

.lwp-project{
  flex:0 0 calc((100% - (var(--lwp-cards) - 1) * var(--lwp-rail-gap)) / var(--lwp-cards));
  scroll-snap-align:start;
  min-width:0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px;
  box-sizing:border-box;
}
.lwp-project__no{font:900 40px/1 var(--lwp-head);color:var(--lwp-gold);}
.lwp-project__title{margin:4px 0 0;font:700 20px/1.2 var(--lwp-head);color:#fff;}
.lwp-project__text{margin:0;font:400 15px/1.5 var(--lwp-body);color:rgba(255,255,255,.82);}

/* Bedienzeile: Punkte mittig, Pfeile rechts. Das Raster hält die Punkte auch
   dann zentriert, wenn die Pfeile ausgeblendet sind (Track passt komplett). */
.lwp-rail__controls{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:12px;margin-top:4px;
}
/* hidden muss display gewinnen, sonst belegt der leere Container Platz. */
.lwp-rail__nav[hidden],
.lwp-rail__dots[hidden]{display:none;}
.lwp-rail__dots{grid-column:2;display:flex;justify-content:center;gap:8px;}
.lwp-rail__dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.35);
  transition:background .2s ease, transform .2s ease;
}
.lwp-rail__dot.is-active{background:var(--lwp-gold);transform:scale(1.4);}
.lwp-rail__dot:focus-visible{outline:2px solid var(--lwp-gold);outline-offset:3px;}
.lwp-rail__nav{grid-column:3;justify-self:end;display:flex;gap:10px;}
.lwp-rail__btn{
  width:48px;height:48px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;
  font:400 22px/1 var(--lwp-head);cursor:pointer;
  transition:background .2s ease, opacity .2s ease;
}
.lwp-rail__btn:hover{background:rgba(255,255,255,.12);}
/* Am Rand angekommen: Pfeil bleibt sichtbar, aber erkennbar inaktiv. */
.lwp-rail__btn[disabled]{opacity:.3;cursor:default;}
.lwp-rail__btn[disabled]:hover{background:transparent;}

.lwp-prio{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,48px);
  padding-top:clamp(24px,3vw,36px);border-top:1px solid rgba(255,255,255,.2);
}
.lwp-prio__label{display:block;font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-gold);margin-bottom:8px;}
.lwp-prio__text{margin:0;font:400 16px/1.55 var(--lwp-body);color:rgba(255,255,255,.85);}

.lwp-roadmap{width:min(100% - 40px,1160px);margin:clamp(56px,8vw,96px) auto 0;}
.lwp-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px;margin-top:clamp(28px,4vw,44px);}
.lwp-phase{position:relative;border-top:2px solid rgba(255,255,255,.25);padding-top:22px;}
.lwp-phase__dot{position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--lwp-gold);}
.lwp-phase__label{display:block;font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);}
.lwp-phase__title{margin:8px 0 0;font:700 22px/1.2 var(--lwp-head);color:#fff;}
.lwp-acc--dark .lwp-acc__summary{
  border-top:0;min-height:52px;margin-top:10px;padding:0;
  color:#fff;font:600 15px/1.2 var(--lwp-head);
}
.lwp-acc--dark .lwp-acc__chev{width:36px;height:36px;border-color:rgba(255,255,255,.55);color:#fff;font-size:24px;}
.lwp-phase__list{
  margin:6px 0 0;padding:0 0 0 22px;display:grid;gap:10px;
  font:400 15px/1.5 var(--lwp-body);color:rgba(255,255,255,.88);
  animation:lwp-fade-up .45s ease both;
}
.lwp-phase__list strong{color:#fff;}
.lwp-roadmap__note{margin:clamp(24px,3vw,36px) 0 0;font:400 15px/1.55 var(--lwp-body);color:rgba(255,255,255,.7);max-width:70ch;}

/* ============ KANDIDAT ============ */
.lwp-cand{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(28px,5vw,72px);align-items:start;
}
.lwp-cand__media{position:relative;max-width:440px;width:100%;}
.lwp-cand__shape{position:absolute;left:24px;right:-16px;bottom:-16px;height:62%;background:var(--lwp-tint);border-radius:24px;}
.lwp-cand__frame{position:relative;width:100%;aspect-ratio:4/5;}
.lwp-cand__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:24px;display:block;}
.lwp-cand__name{margin:16px 0 0;font:800 clamp(36px,6vw,68px)/1 var(--lwp-head);letter-spacing:-.03em;color:var(--lwp-ink);}
.lwp-cand__role{margin:12px 0 0;font:600 15px/1.4 var(--lwp-head);color:var(--lwp-muted);}
.lwp-cand__intro{margin:24px 0 0;font:400 clamp(18px,2vw,22px)/1.45 var(--lwp-body);color:var(--lwp-ink);}
.lwp-cand__org{margin:8px 0 0;font:500 13px/1.4 var(--lwp-head);color:var(--lwp-faint);}
.lwp-cand__blocks{margin-top:32px;display:grid;gap:18px;}
.lwp-cand__label{display:block;font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-blue);margin-bottom:6px;}
.lwp-cand__text{margin:0;font:400 16px/1.6 var(--lwp-body);color:var(--lwp-muted);}

.lwp-quote{margin:32px 0 0;padding:0;}
.lwp-quote__mark{display:block;font:900 72px/1 var(--lwp-head);color:var(--lwp-gold);height:63px;margin-bottom:8px;overflow:visible;}
.lwp-quote__text{margin:0;font:400 clamp(19px,2.2vw,25px)/1.4 var(--lwp-body);font-style:italic;color:var(--lwp-ink);}
.lwp-quote__source{margin-top:12px;font:600 13px/1.4 var(--lwp-head);color:var(--lwp-muted);}

.lwp-cand__foot{
  width:min(100% - 40px,1160px);margin:clamp(56px,8vw,96px) auto 0;
  padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--lwp-line);
}
.lwp-cand__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,5vw,64px);align-items:start;}

.lwp-principles{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;}
.lwp-principle{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;}
.lwp-principle__title{display:block;font:700 16px/1.3 var(--lwp-head);color:var(--lwp-ink);}
.lwp-principle__text{font:400 15px/1.5 var(--lwp-body);color:var(--lwp-muted);}

.lwp-guide{scroll-margin-top:var(--lwp-anchor);}
.lwp-guide__text{margin:18px 0 0;font:400 16px/1.6 var(--lwp-body);color:var(--lwp-muted);}
.lwp-guide__label{margin:22px 0 0;font:600 12px/1.2 var(--lwp-head);letter-spacing:.08em;text-transform:uppercase;color:var(--lwp-muted);}
.lwp-guide__list{margin:12px 0 0;display:grid;gap:10px;}
.lwp-guide__row{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;}
.lwp-guide__key{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--lwp-tint);color:var(--lwp-blue);font:700 13px/1 var(--lwp-head);}
.lwp-guide__def{margin:0;font:400 15px/1.5 var(--lwp-body);color:var(--lwp-muted);}
.lwp-guide__def strong{color:var(--lwp-ink);font-family:var(--lwp-head);font-size:15px;}
.lwp-account{
  margin:22px 0 0;padding:16px 18px;background:var(--lwp-paper);border-radius:14px;
  font:400 15px/1.55 var(--lwp-body);color:var(--lwp-muted);
}
.lwp-account strong{color:var(--lwp-ink);font-family:var(--lwp-head);}

/* ============ MITMACHEN ============ */
.lwp-join{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(28px,5vw,72px);align-items:start;
}
.lwp-join__lead{color:var(--lwp-ink);}
.lwp-join__cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.lwp-join__ctanote{font:500 14px/1.4 var(--lwp-head);color:rgba(14,27,51,.75);}
.lwp-join__hint{
  margin:28px 0 0;padding:18px 20px;background:rgba(255,255,255,.55);border-radius:16px;
  font:400 16px/1.55 var(--lwp-body);color:var(--lwp-ink);max-width:60ch;
}
.lwp-join__hint strong{font-family:var(--lwp-head);}
.lwp-join__card{background:#fff;border-radius:24px;padding:clamp(22px,3vw,36px);box-shadow:0 24px 60px rgba(14,27,51,.12);}
.lwp-join__title{margin:0;font:800 clamp(22px,2.6vw,28px)/1.15 var(--lwp-head);letter-spacing:-.02em;color:var(--lwp-ink);}
.lwp-join__steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:20px;}
.lwp-join__step{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;}
.lwp-join__no{width:36px;height:36px;border-radius:50%;background:var(--lwp-blue);color:var(--lwp-gold);display:grid;place-items:center;font:800 15px/1 var(--lwp-head);}
.lwp-join__steptitle{display:block;font:700 17px/1.3 var(--lwp-head);color:var(--lwp-ink);margin-bottom:4px;}
.lwp-join__steptext{margin:0;font:400 16px/1.55 var(--lwp-body);color:var(--lwp-ink);}
.lwp-join__legal{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--lwp-line);font:400 14px/1.5 var(--lwp-body);color:var(--lwp-muted);}
.lwp-join__contact{margin:12px 0 0;font:600 13px/1.4 var(--lwp-head);color:var(--lwp-faint);}

/* ============================ RESPONSIVE ============================ */
/* Die statischen Kennzahlenkarten je Abschnitt existieren nur auf Telefonen —
   dort verdeckte die klebende Karte sonst den Text, den sie erklärt. */
.lwp-fig[data-step-fig]{display:none;}

@media (max-width:1023px){
  .lwp-hero__media{flex-basis:min(60vw,300px);}
  .lwp-rail{--lwp-cards:2.2;}
}
@media (max-width:720px){
  .lwp-hero__media{flex-basis:min(56vw,230px);}
  .lwp-rail{--lwp-cards:1.15;--lwp-rail-gap:14px;}
  .lwp-hero__cta{justify-content:center;}
  .lwp-fig[data-sticky-fig]{display:none;}
  .lwp-fig[data-step-fig]{display:block;position:static;flex:0 0 auto;align-self:stretch;margin-bottom:6px;}
}
@media (prefers-reduced-motion:reduce){
  .lwp *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .lwp-rail{scroll-behavior:auto;}
  /* Der Puls wird ohnehin nicht gesetzt (das Skript füllt die Liste nicht),
     aber falls die Klasse anders hineinkommt, hier hart aus. */
  .lwp-btn--blue.is-attention,
  .lwp-btn--blue.is-attention .lwp-btn__arrow{animation:none !important;}
  /* Bewusst unbeschränkt auf .lwp: scroll-behavior wirkt nur auf dem
     scrollenden Element (html), das außerhalb des Seitencontainers liegt.
     Das Theme setzt es global auf smooth und nimmt es bei reduzierter
     Bewegung nicht zurück — auf dieser sprungmarkenreichen Seite ist das
     spürbar. Die Regel gilt nur hier, weil auch diese Datei nur hier lädt. */
  html{scroll-behavior:auto;}
}