/* kraewing.de · Schriften selbst gehostet (Design B „Bühne“, Lauf 2, DIREKT-2026-10-14-S7-15; Basis Design C).
   Typografie-Vertrag r1: zwei Schriften, keine Display-Variante. Newsreader 500 nur für Titel (T1) und Abschnitt (T2);
   Source Sans 3 400/600 für alles andere, Kursive nur für <em> im Fließtext der Beiträge.
   Newsreader (Production Type) und Source Sans 3 (Adobe), beide SIL Open Font License 1.1, WOFF2-Untermenge Latin.
   Keine Abrufe bei Google. */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sourcesans3-400.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/sourcesans3-400i.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600 700;font-display:swap;src:url(/fonts/sourcesans3-600.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/newsreader-text-500.woff2) format("woff2")}

/* kraewing.de · Design B „Bühne“ · gemeinsames Stylesheet aller Seiten
   Gegenentwurf Lauf 2 (DIREKT-2026-10-14-S7-15), Rolle Gestaltung. Basis: Gerüst Design C, Bausteine und Klassennamen gleich.
   Leitidee: Die Website spricht wie Michaels Vorträge (ABTF-Vorstellung r6, Design III): Nachtblau, ein Orange-Akzent,
   Blau nur als tragende Linie (Oberkante der Felder, Strich am Zitat). Lange Lesetexte liegen als helles Blatt auf
   derselben Bühne: Kopf, Fuß, Raster und Schriftleiter bleiben gleich, nur die Lesefläche wird hell („seite-hell“).

   Typografie-Vertrag r1 (verbindlich): vier Größen, zwei Schriften, keine Kursive außer <em> im Beitragstext.
     T1 Titel     46 px / 1,1   (Handy 32)  Newsreader 500   — genau ein h1 je Seite
     T2 Abschnitt 28 px / 1,25  (Handy 24)  Newsreader 500   — h2, Beleg-Satz, Kennzahlen, Aussagen, Wortmarke
     T3 Text      18 px / 1,6   (Handy 17)  Source Sans 3 400, Hervorhebung 600 (Kartentitel, Knöpfe, Navigation)
     T4 Klein     15 px / 1,45              Source Sans 3 400 oder 600 (Kennzeilen 600 in Orange, Metadaten, Fuß)
   Zwischen 640 und 1024 px gleitet jede Stufe per clamp() zwischen ihrem Handy- und Desktopwert.
   Abstände nur aus der Leiter 8 · 16 · 24 · 40 · 64 · 96 px.
   Mobil-Umbruch der Navigation 1040 px = Konstante BREAKPOINT in /js/site.js (nicht ändern ohne beide Stellen). */

:root{
  /* Farben (Design-Fundus Design III, ABTF r6) */
  --nacht:#14213D; --karte:#1B2B4C; --tief:#0F1A30; --kante:#2E4170;
  --blau:#2F6FB0;                    /* nur Linien, nie Text */
  --orange:#E3A15F;                  /* der eine Akzent auf Dunkel: Knopf, Verweis, Kennzeile, Kennzahl */
  --orange-blatt:#9E5516;            /* derselbe Akzent auf dem hellen Blatt, abgedunkelt für AA (5,2 : 1) */
  --hell:#FAFAF7; --hell-2:#BEC6D6;  /* Text auf Dunkel, Nebentext auf Dunkel (wie ABTF r6) */
  --blatt:#F5F6F8; --blatt-2:#E8ECF2; --tinte:#1a1a1a; --tinte-2:#4A5262; --blatt-kante:#D5DBE5;
  /* Schrift */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --t1:clamp(32px,calc(3.6458vw + 8.667px),46px);
  --t2:clamp(24px,calc(1.0417vw + 17.333px),28px);
  --t3:clamp(17px,calc(.2604vw + 15.333px),18px);
  --t4:15px;
  /* Raster und Abstandsleiter */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --max:1240px; --pad:40px; --lese:68ch;
  /* Altnamen: der Zustimmungsbanner (vorlagen/zaehler.html, unverändert) liest diese Variablen */
  --bg:var(--nacht); --bg-elev:var(--karte); --fg:var(--hell); --fg-muted:var(--hell-2); --fg-subtle:var(--hell-2);
  --fg-strong:var(--hell); --fg-base:var(--hell); --border:var(--kante); --surface-1:var(--karte);
  --accent:var(--orange); --accent-hover:var(--orange);
}

/* ───────── Grundlage ───────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;background:var(--nacht)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--nacht);color:var(--hell);font:400 var(--t3)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
b,strong{font-weight:600}
em,i,cite{font-style:normal}
h1,h2,h3,h4{font-weight:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.container{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* Die vier Stufen als Bausteine */
.start h1,.seite h1{font:500 var(--t1)/1.1 var(--serif);letter-spacing:-.01em;color:var(--hell);text-wrap:balance}
.start h2,.seite h2,.s-satz,.s-zahl,.s-halte b,.s-werte b,.s-zitat,.s-feld h3,.s-mandat h3,.s-buch h3,
.services-close,.flow-close,.kit-closing,.flow-number,.kit-step .n,.post-card h2,.pub-card h2{
  font:500 var(--t2)/1.25 var(--serif);letter-spacing:0;text-wrap:balance}
.s-kicker,.s-rinne,.hero-eyebrow,.section-eyebrow,.s-jahre,.maturity-stage,.service-number,.cross-eyebrow,
.weg-art,.kit-card .ey,.post .eyebrow,.ft-col-header,.s-praxis b,.s-empf{
  font:600 var(--t4)/1.45 var(--sans);letter-spacing:0;text-transform:none;color:var(--orange)}

/* ───────── Kopf ───────── */
.site-header{position:sticky;top:0;z-index:100;background:var(--nacht);border-bottom:1px solid var(--kante)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:80px}
.logo{display:flex;align-items:center;gap:var(--s2);text-decoration:none;color:var(--hell);min-height:44px}
.logo-mono{height:34px;width:auto;flex:none}
.logo-text{display:flex;flex-direction:column}
.logo-name{font:500 var(--t2)/1.1 var(--serif);letter-spacing:.02em;white-space:nowrap}
.logo-sub{font:400 var(--t4)/1.3 var(--sans);color:var(--hell-2)}
#primary-nav{display:flex;align-items:center;gap:var(--s3);font:400 var(--t3)/1.3 var(--sans)}
#primary-nav a{position:relative;text-decoration:none;color:var(--hell);padding:var(--s1) 0;min-height:44px;display:inline-flex;align-items:center}
#primary-nav a:hover{color:var(--orange)}
#primary-nav a[aria-current="page"]{color:var(--orange)}
#primary-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--orange)}
.lang-switch .sep{margin:0 6px;color:var(--hell-2)}
.lang-switch .active{font-weight:600}
.nav-toggle{display:none}
@media (max-width:1040px){
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--hell)}
  .nav-toggle-bar{display:block;width:22px;height:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .nav-toggle.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open .nav-toggle-bar:nth-child(2){opacity:0}
  .nav-toggle.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  #primary-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--karte);border-bottom:1px solid var(--kante);padding:var(--s1) var(--pad) var(--s2)}
  #primary-nav.is-open{display:flex}
  #primary-nav a{min-height:48px;border-bottom:1px solid var(--kante)}
  #primary-nav a:last-child{border-bottom:0}
  #primary-nav a[aria-current="page"]::after{bottom:8px;right:auto;width:32px}
}

/* ───────── Knöpfe und Verweise ───────── */
.btn-primary{display:inline-flex;align-items:center;gap:var(--s2);min-height:52px;padding:0 var(--s3);background:var(--orange);color:var(--nacht);font:600 var(--t3)/1.2 var(--sans);text-decoration:none;border-radius:4px;transition:background-color .2s}
.btn-primary:hover{background:var(--hell)}
.btn-primary svg{width:15px;height:15px;flex:none}
.btn-link{display:inline-flex;align-items:center;min-height:44px;font:600 var(--t3)/1.3 var(--sans);color:var(--orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.btn-link:hover{color:var(--hell)}
.book-buy-row{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.buy-link{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;color:var(--orange);font:600 var(--t3)/1.3 var(--sans);text-decoration:none}
.buy-link:hover{color:var(--hell);text-decoration:underline;text-underline-offset:5px}
.buy-link svg{width:14px;height:14px;flex:none}
.arr{font-family:var(--sans)}

/* ───────── Fuß ───────── */
.site-footer{background:var(--tief);border-top:1px solid var(--kante);padding:var(--s5) 0 var(--s3);font:400 var(--t4)/1.45 var(--sans);color:var(--hell)}
.footer-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s4)}
.ft-logo-name{font:500 var(--t2)/1.1 var(--serif);letter-spacing:.02em}
.ft-logo-sub{color:var(--hell-2);margin-top:4px}
.ft-tagline{font:400 var(--t3)/1.6 var(--sans);color:var(--hell);margin-top:var(--s2);max-width:40ch}
.ft-address{margin-top:var(--s2);color:var(--hell-2)}
.ft-col-header{margin-bottom:var(--s1)}
.ft-link-list{list-style:none;display:grid}
.ft-link-list a,.ft-contact-line,.ft-social{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--hell)}
.ft-link-list a:hover,.ft-contact-line:hover,.ft-social:hover,.ft-legal-links a:hover{color:var(--orange);text-decoration:underline;text-underline-offset:4px}
.ft-contact-block{display:grid}
.ft-contact-line .label{color:var(--hell-2);margin-right:var(--s1)}
.ft-socials{display:flex;gap:var(--s3)}
.ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0 var(--s3);border-top:1px solid var(--kante);margin-top:var(--s4);padding-top:var(--s2);color:var(--hell-2)}
.ft-copyright{display:flex;align-items:center;min-height:44px}
.ft-legal-links{display:flex;gap:var(--s3)}
.ft-legal-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--hell-2)}

/* Felder wie auf den Folien: dunkle Fläche, blaue Linie oben */
.feld,.s-halte li,.s-mandat,.maturity-card,.service-card,.flow-station,.kit-step,.kit-card,.weg,.s-weg,.cross-dim{
  background:var(--karte);border-top:4px solid var(--blau);border-radius:4px}
/* Akzentfeld wie ABTF r6 (Karte BOMAG): Oberkante Orange, Hauch Orange in der Fläche */
.s-mandat:first-of-type{border-top-color:var(--orange);background:linear-gradient(180deg,rgba(227,161,95,.10),rgba(227,161,95,.03)),var(--karte)}

/* ═════════ Startseite ═════════ */
.start{display:block}
.s-hero{padding:var(--s5) 0 var(--s4);background:radial-gradient(1200px 700px at 88% 8%,rgba(47,111,176,.16),transparent 70%)}
.s-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:center}
.s-kicker{margin-bottom:var(--s2)}
.start h1{max-width:20ch}
.start h1::after{content:"";display:block;width:120px;height:4px;background:var(--orange);margin-top:var(--s3)}
.s-lead{color:var(--hell-2);margin-top:var(--s3)}
.s-satz{position:relative;margin-top:var(--s3);padding-left:var(--s3);max-width:32ch;color:var(--hell)}
.s-satz::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--blau)}
.s-handeln{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);margin-top:var(--s4)}
.s-portrait{justify-self:end;width:100%;max-width:440px}
.s-portrait img{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;object-position:50% 22%;border-radius:2px;box-shadow:0 24px 64px rgba(0,0,0,.35)}
.s-portrait figcaption{font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2);margin-top:var(--s2)}
.s-name{display:block;font:600 var(--t3)/1.4 var(--sans);color:var(--hell)}

/* BOMAG in vier Feldern */
.s-band{padding:0 0 var(--s2)}
.s-halte{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.s-halte li{padding:var(--s3)}
.s-halte b{display:block;color:var(--orange);white-space:nowrap}
.s-halte span{display:block;font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2);margin-top:var(--s1)}

/* Abschnitte */
.s-lauf{display:block}
.s-halt{position:relative;padding-top:var(--s6)}
.s-rinne{margin-bottom:var(--s1)}
.start h2{max-width:28ch}
.s-sub{color:var(--hell-2);margin-top:var(--s1);max-width:56ch}

.s-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s2)}
.s-stat{border-top:1px solid var(--kante);padding-top:var(--s3)}
.s-zahl{color:var(--orange)}
.s-zahl small{font-size:inherit;margin-left:2px}
.s-stat b{display:block;margin-top:var(--s1);font-weight:600}
.s-stat > span{display:block;font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2)}
.s-kunden{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s1);font-weight:600}
.s-kunden li{white-space:nowrap}

/* Mandate wie Folien: links Zeitraum und Werte, rechts Aussage */
.s-mandat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"jahre text" "daten text";grid-template-rows:auto 1fr;gap:0 var(--s5);padding:var(--s4);margin-top:var(--s3)}
.s-mandat:first-of-type{margin-top:var(--s4)}
.s-jahre{grid-area:jahre}
.s-mandat > div{grid-area:text}
.s-daten{grid-area:daten;margin-top:var(--s3)}
.s-wer{font:600 var(--t3)/1.4 var(--sans);color:var(--hell)}
.s-mandat h3{margin-top:var(--s1);max-width:30ch}
.s-tl{color:var(--hell-2);margin-top:var(--s2);max-width:60ch}
.s-daten dl{font:400 var(--t4)/1.45 var(--sans)}
.s-daten dt{font-weight:600;color:var(--hell-2);margin-top:var(--s2)}
.s-daten dt:first-child{margin-top:0}
.s-daten dd{color:var(--hell)}
.s-daten{display:flex;flex-direction:column}
.s-werte{order:-1;display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--kante)}
.s-werte b{display:block;color:var(--orange)}
.s-werte span{font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2)}
.s-tags{font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2)}

/* Aufklapper „Ganzen Text lesen“ */
.s-mehr{margin-top:var(--s2)}
.s-mehr summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font:600 var(--t3)/1.2 var(--sans);color:var(--orange)}
.s-mehr summary::-webkit-details-marker{display:none}
.s-mehr summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.s-mehr[open] summary::before{transform:rotate(45deg)}
.s-mehr summary:hover{color:var(--hell)}
.s-mehr > :not(summary){max-width:66ch;margin-top:var(--s2)}

/* Schwerpunkte als Verzeichnis */
.s-felder{margin-top:var(--s4);border-top:1px solid var(--kante)}
.s-feld{border-bottom:1px solid var(--kante)}
.s-feld summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 32px;gap:var(--s4);align-items:center;padding:var(--s3) 0}
.s-feld summary::-webkit-details-marker{display:none}
.s-feld summary:hover h3{color:var(--orange)}
.s-feld .s-tl{margin-top:0}
.s-feld summary i{grid-column:3;position:relative;width:32px;height:32px;border:2px solid var(--orange);border-radius:50%}
.s-feld summary i::before,.s-feld summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--orange);transform:translate(-50%,-50%)}
.s-feld summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.s-feld[open] summary i{background:var(--orange)}
.s-feld[open] summary i::before,.s-feld[open] summary i::after{background:var(--nacht)}
.s-feld[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.s-inhalt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s4);padding-bottom:var(--s4)}
.s-inhalt.s-einspaltig{grid-template-columns:minmax(0,1fr);max-width:66ch}
.s-inhalt > p{grid-column:2;grid-row:1}
.s-inhalt .s-praxis{grid-column:1;grid-row:1}
.s-inhalt.s-einspaltig > p,.s-inhalt.s-einspaltig .s-praxis{grid-column:1;grid-row:auto}
.s-praxis{border-left:3px solid var(--blau);padding-left:var(--s2);font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2);align-self:start}
.s-praxis b{display:block;margin-bottom:4px}

/* Buch */
.s-buch{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--s5);margin-top:var(--s4);align-items:start}
.s-cover{background:var(--hell);padding:var(--s3);border-radius:2px}
.s-cover img{width:100%}
.s-buchdaten{display:grid;grid-template-columns:auto 1fr;gap:4px var(--s2);font:400 var(--t4)/1.45 var(--sans);margin-top:var(--s2)}
.s-buchdaten dt{color:var(--hell-2)}
.s-buchdaten dd{white-space:nowrap}
.nobr{white-space:nowrap}
.s-kauf{flex-direction:column;gap:0;margin-top:var(--s1)}
.s-buch .s-tl{margin-top:var(--s2)}
.s-zitat{position:relative;margin-top:var(--s4);padding-left:var(--s3);max-width:36ch;color:var(--hell)}
.s-zitat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--blau)}
.s-zitat span{display:block;font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2);margin-top:var(--s1)}
.s-saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);max-width:none!important}
.s-saeulen > div{border-top:1px solid var(--kante);padding-top:var(--s2)}
.s-saeulen h4{font:600 var(--t3)/1.4 var(--sans);margin-bottom:var(--s1)}
.s-saeulen p{color:var(--hell-2)}

/* Kontakt: die Schlussfolie */
.s-ende{position:relative;isolation:isolate;margin-top:var(--s6);padding:var(--s6) 0}
.s-ende::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--karte);z-index:-1}
.s-ende h2{max-width:24ch}
.s-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4);align-items:stretch}
.s-weg{display:flex;flex-direction:column;text-decoration:none;padding:var(--s3);background:var(--nacht)}
.s-weg h3{font:600 var(--t3)/1.4 var(--sans)}
.s-weg p{font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2);margin-top:var(--s1);flex:1}
.s-tun{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s1);font:600 var(--t3)/1.2 var(--sans);color:var(--orange)}
.s-weg:hover h3{color:var(--orange)}
.s-weg:hover .s-tun{text-decoration:underline;text-underline-offset:4px}
.s-weg.s-primaer{background:var(--orange);color:var(--nacht);border-top-color:var(--orange)}
.s-weg.s-primaer p,.s-weg.s-primaer .s-tun,.s-weg.s-primaer .s-empf{color:var(--nacht)}
.s-weg.s-primaer:hover{background:var(--hell);border-top-color:var(--hell)}
.s-weg.s-primaer:hover h3{color:var(--nacht)}
.s-empf{display:block;margin-bottom:4px}
.s-vertrauen{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin-top:var(--s3);font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2)}

@media (max-width:1100px){
  .s-halte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-wege{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .s-weg.s-primaer{grid-column:1 / -1}
}
@media (max-width:820px){
  :root{--pad:16px}
  .header-inner{min-height:64px}
  .logo{gap:12px}
  .logo-mono{height:30px}
  .logo-sub{display:none}
  .s-hero{padding:var(--s4) 0 var(--s4)}
  .s-hero-grid{grid-template-columns:1fr;gap:var(--s4)}
  .s-portrait{justify-self:start;max-width:280px}
  .s-handeln{margin-top:var(--s3);gap:var(--s1) var(--s3)}
  .s-halte li{padding:var(--s2)}
  .s-halte b{white-space:normal}
  .s-halt{padding-top:var(--s5)}
  .s-stats{grid-template-columns:1fr;gap:var(--s3)}
  .s-mandat{grid-template-columns:1fr;grid-template-areas:"jahre" "text" "daten";padding:var(--s3) var(--s2)}
  .s-feld summary{grid-template-columns:minmax(0,1fr) 32px;gap:var(--s1) var(--s2);padding:var(--s3) 0}
  .s-feld h3{grid-column:1;grid-row:1}
  .s-feld .s-tl{grid-column:1;grid-row:2}
  .s-feld summary i{grid-column:2;grid-row:1}
  .s-inhalt{grid-template-columns:1fr;gap:var(--s3)}
  .s-inhalt > p,.s-inhalt .s-praxis{grid-column:1;grid-row:auto}
  .s-buch{grid-template-columns:1fr;gap:var(--s3)}
  .s-buch aside{max-width:320px}
  .s-saeulen{grid-template-columns:1fr;gap:var(--s2)}
  .s-ende{margin-top:var(--s5);padding:var(--s5) 0}
  .s-wege{grid-template-columns:1fr}
}
@media (max-width:420px){
  .s-halte{grid-template-columns:1fr 1fr;gap:var(--s1)}
}

/* ═════════ Unterseiten ═════════ */
.seite{display:block;padding-bottom:var(--s6)}
.seite > section{padding-top:var(--s6)}
.seite > section.hero{padding-top:var(--s5);padding-bottom:var(--s1)}
.seite > section.hero + section{padding-top:var(--s5)}
.seite > section.cta-section{padding-top:var(--s6)}
.seite > section.presentations-section{padding-top:var(--s5)}

.hero-eyebrow,.section-eyebrow{margin-bottom:var(--s1)}
.seite .section-header{max-width:820px}
.seite .section-header.centered{text-align:left}
.seite .section-header p{color:var(--hell-2);margin-top:var(--s2);max-width:60ch}
.seite .hero h1{max-width:24ch}
.seite .hero h1::after,.seite .section-header h1::after{content:"";display:block;width:120px;height:4px;background:var(--orange);margin-top:var(--s3)}
.seite .hero .container > div > h1 + p,.seite .hero .lead{color:var(--hell-2);margin-top:var(--s3);max-width:60ch}
.seite .section-header h2{max-width:30ch}

/* Strategie */
.foundation-body,.responsibility-body{margin-top:var(--s3);max-width:var(--lese)}
.foundation-body p,.responsibility-body p{margin-top:var(--s2)}
.foundation-body p:first-child,.responsibility-body p:first-child{margin-top:0}
p.foundation-attribution{color:var(--hell-2);margin-top:var(--s3)}
.maturity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}
.maturity-card,.service-card,.flow-station,.kit-step{padding:var(--s3)}
.maturity-card h3,.service-card h3,.flow-station h3,.kit-item h3,.cross-dim h4{font:600 var(--t3)/1.4 var(--sans);color:var(--hell);margin-top:var(--s1)}
.maturity-card p,.service-body p,.flow-station p,.cross-dim p,.kit-step p{color:var(--hell-2);margin-top:var(--s1)}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}
.service-body{margin-top:var(--s1)}
.services-close,.flow-close,.kit-closing{position:relative;padding-left:var(--s3);max-width:40ch;margin-top:var(--s4);color:var(--hell)}
.services-close::before,.flow-close::before,.kit-closing::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--blau)}
.cross-dimensions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-top:var(--s5)}
.cross-dim{padding:var(--s3)}
.flow-stations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}
.flow-number,.kit-step .n{color:var(--orange)}
.cta-section .section-header + div{margin-top:var(--s3)}

/* Blog- und Veröffentlichungsübersicht */
.post-list,.pub-list{max-width:820px}
.post-card,.pub-card{border-top:1px solid var(--kante);padding:var(--s4) 0}
.post-card:first-of-type,.pub-card:first-of-type{border-top:0;padding-top:0}
.post-card .date,.pub-card .kind{font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2);margin-bottom:var(--s1)}
.pub-card .kind{font-weight:600;color:var(--orange)}
.post-card h2 a,.pub-card h2 a{text-decoration:none}
.post-card h2 a:hover,.pub-card h2 a:hover{color:var(--orange)}
.post-card .teaser,.pub-card .teaser{color:var(--hell-2);margin-top:var(--s1);max-width:62ch}
.post-card .more,.pub-card .more{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;margin-top:var(--s1);font-weight:600;color:var(--orange);text-decoration:none}
.post-card .more:hover,.pub-card .more:hover{color:var(--hell);text-decoration:underline;text-underline-offset:4px}

/* Kontakt */
.wege-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.weg{display:block;padding:var(--s3);text-decoration:none;color:var(--hell);transition:background-color .2s}
.weg:hover{background:#22355C}
.weg.primaer{grid-column:1 / -1;background:var(--orange);border-top-color:var(--orange);color:var(--nacht)}
.weg.primaer:hover{background:var(--hell);border-top-color:var(--hell)}
.weg-art{margin-bottom:var(--s1)}
.weg.primaer .weg-art,.weg.primaer .weg-text{color:var(--nacht)}
.weg-titel{font:600 var(--t3)/1.4 var(--sans);overflow-wrap:anywhere}
.weg-text{font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2);margin-top:var(--s1)}
.kontakt-fuss{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--kante);font:400 var(--t4)/1.45 var(--sans);color:var(--hell-2)}
.kontakt-fuss p + p{margin-top:var(--s1)}
.kontakt-fuss strong{color:var(--hell)}
.kontakt-fuss a{display:inline-flex;align-items:center;min-height:44px;color:var(--hell-2);text-underline-offset:4px}
.seite > section.kontakt-wege{padding-top:var(--s4)}

/* Werkzeuge */
.kit-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:start}
.kit-layout h2{margin:0 0 var(--s3)}
.kit-list{display:flex;flex-direction:column;gap:var(--s3)}
.kit-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s2);align-items:start}
.kit-mark{display:block;width:24px;height:3px;background:var(--blau);margin-top:14px}
.kit-item h3{margin-top:0}
.kit-item p{color:var(--hell-2)}
.kit-card{padding:var(--s4) var(--s3)}
.kit-card .ey{margin-bottom:var(--s1)}
.kit-card h2{margin:0 0 var(--s2)}
.kit-card p{color:var(--hell-2)}
.kit-card .meta{font:400 var(--t4)/1.45 var(--sans);margin:var(--s2) 0 var(--s3)}
.kit-card .note{font:400 var(--t4)/1.45 var(--sans);margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--kante)}
.kit-card .note a{color:var(--orange)}
.kit-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}

/* Präsentationen */
.seite .section-header h1{max-width:24ch}
.presentation-embed{position:relative;width:100%;max-width:1000px;margin-top:var(--s4);aspect-ratio:16/9;border:1px solid var(--kante);border-radius:2px;overflow:hidden;background:var(--karte)}
.presentation-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.presentations-actions{margin-top:var(--s3)}

/* ═════════ Lesefläche: ein helles Blatt auf derselben Bühne ═════════
   Kopf, Fuß, Raster und Schriftleiter bleiben; nur die Fläche unter dem Text wird hell. Die Textkante liegt an derselben
   Linie wie Monogramm und Navigation im Kopf. */
.seite-hell{padding:var(--s4) 0 var(--s6)}
.seite-hell > section{padding-top:0}
.seite-hell > section > .container,.seite-hell > .container{background:var(--blatt);color:var(--tinte);padding-top:var(--s5);padding-bottom:var(--s6);border-top:3px solid var(--orange);border-radius:2px}
.seite-hell h1,.seite-hell h2,.seite-hell h3{color:var(--tinte)}
.seite-hell :focus-visible{outline-color:var(--orange-blatt)}
.seite-hell .hero-eyebrow,.seite-hell .post .eyebrow,.seite-hell .seclabel,.seite-hell .blatt .eyebrow{color:var(--orange-blatt)}
.seite-hell .hero h1::after,.seite-hell h1::after{content:none}
.seite-hell .hero .lead,.seite-hell .hero .container > div > h1 + p{color:var(--tinte-2)}

/* Beitrag */
.post{color:var(--tinte)}
.post-wrap{max-width:680px}
.post .eyebrow{margin:0 0 var(--s2)}
.post .eyebrow a{color:inherit}
.post h1{margin:0 0 var(--s3)}
.post h2{margin:0 0 var(--s2)}
.post h3{font:600 var(--t3)/1.4 var(--sans);margin:var(--s3) 0 var(--s1)}
.post p{margin:0 0 var(--s2)}
.post .lead{color:var(--tinte-2);margin-bottom:var(--s3)}
.post em{font-style:italic}
.post a{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--orange-blatt);text-decoration-thickness:2px;text-underline-offset:4px}
.post a:hover{color:var(--orange-blatt)}
.post hr.sec{border:0;width:64px;height:3px;background:var(--blau);margin:var(--s5) 0 var(--s4)}
.post ol,.post ul{margin:0 0 var(--s2);padding-left:1.3em}
.post li{margin:0 0 var(--s1)}
.post figure{margin:var(--s1) 0 var(--s4)}
.post figure.teaser{max-width:420px}
.post figure.teaser video{width:100%;border-radius:2px;background:var(--nacht)}
.post figcaption{font:400 var(--t4)/1.45 var(--sans);color:var(--tinte-2);margin-top:var(--s1)}
.post .note{background:var(--blatt-2);border-left:3px solid var(--blau);padding:var(--s3);margin-top:var(--s3)}
.post .note .seclabel{font:600 var(--t4)/1.45 var(--sans);margin:0 0 var(--s1)}
.post .note p{margin:0}
.post .note p + p{margin-top:var(--s2)}
.post .note a{font-weight:600}
.post .colophon{font:400 var(--t4)/1.45 var(--sans);color:var(--tinte-2);margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--blatt-kante)}

/* Rechtsseiten */
.rechtstext{max-width:var(--lese);color:var(--tinte)}
.rechtstext h1{margin:0 0 var(--s4)}
.rechtstext h2{margin:var(--s5) 0 var(--s2);scroll-margin-top:96px}
.rechtstext h3{font:600 var(--t3)/1.4 var(--sans);margin:var(--s3) 0 var(--s1)}
.rechtstext p{margin:0 0 var(--s2)}
.rechtstext ul,.rechtstext ol{margin:0 0 var(--s2);padding-left:1.3em}
.rechtstext a{color:var(--tinte);text-decoration-color:var(--orange-blatt);text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.rechtstext a:hover{color:var(--orange-blatt)}
.rechtstext p.stand{color:var(--tinte-2)}
.rechtstext p.quelle{margin-top:var(--s5);font:400 var(--t4)/1.45 var(--sans);color:var(--tinte-2)}

/* Doku-Blatt (Referenz, eine Seite): eigener Inhalt, Rahmen der Website */
.blatt{color:var(--tinte)}
.blatt .wrap{max-width:760px}
.blatt-tag{font:400 var(--t4)/1.45 var(--sans);color:var(--tinte-2);margin-bottom:var(--s1)}
.blatt .eyebrow,.blatt .seclabel,.blatt .filekey{font:600 var(--t4)/1.45 var(--sans);letter-spacing:0;text-transform:none}
.blatt .eyebrow{margin:0 0 var(--s1)}
.blatt .seclabel{margin:0 0 var(--s1)}
.blatt .filekey{color:var(--tinte-2);margin-bottom:var(--s1)}
.blatt h1{margin:0 0 var(--s3)}
.blatt h2{margin:0 0 var(--s2)}
.blatt h3{font:600 var(--t3)/1.4 var(--sans);margin:0 0 var(--s1)}
.blatt p{margin:0 0 var(--s2)}
.blatt .lead{color:var(--tinte-2);max-width:62ch}
.blatt .muted{color:var(--tinte-2)}
.blatt a{color:var(--tinte);text-decoration:underline;text-decoration-color:var(--orange-blatt);text-decoration-thickness:2px;text-underline-offset:4px}
.blatt a:hover{color:var(--orange-blatt)}
.blatt .free{display:inline-flex;align-items:center;gap:var(--s1);font:600 var(--t4)/1.45 var(--sans);color:var(--tinte)}
.blatt .free::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange-blatt)}
.blatt section{padding:var(--s4) 0;border-top:1px solid var(--blatt-kante)}
.blatt section.flush{border-top:0;padding-top:0}
.blatt .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s3)}
.blatt .file{background:#fff;border-top:3px solid var(--blau);border-radius:2px;padding:var(--s3)}
.blatt .file p{margin:0;color:var(--tinte-2)}
.blatt ol.steps{list-style:none;counter-reset:s;margin:var(--s3) 0 0;padding:0}
.blatt ol.steps li{counter-increment:s;position:relative;padding:0 0 var(--s3) 56px}
.blatt ol.steps li:last-child{padding-bottom:0}
.blatt ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--nacht);color:var(--orange);font:600 var(--t3)/1 var(--sans);display:flex;align-items:center;justify-content:center}
.blatt ol.steps li p{margin:0;color:var(--tinte-2)}
.blatt .note{background:var(--blatt-2);border-left:3px solid var(--blau);padding:var(--s3);margin-top:var(--s3)}
.blatt .note p{margin:0}
.blatt .note p + p{margin-top:var(--s2)}
.blatt figure{margin:var(--s4) 0 var(--s1);overflow-x:auto}
/* Schaubild: Beschriftung im SVG in T4; auf schmalen Bildschirmen behält es seine Breite und lässt sich seitlich schieben */
.blatt figure svg{min-width:760px}
.blatt figure svg{display:block;width:100%;height:auto;border:1px solid var(--blatt-kante);border-radius:2px;background:#fff}
.blatt figcaption{font:400 var(--t4)/1.45 var(--sans);color:var(--tinte-2);margin-top:var(--s1)}
.blatt footer{border-top:1px solid var(--blatt-kante);margin-top:var(--s3);padding:var(--s4) 0 0}
.blatt .foot-grid{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:flex-start;justify-content:space-between}
.blatt .foot-block{max-width:46ch}
.blatt .foot-block p{margin:0;color:var(--tinte-2)}
.blatt .crosslink{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font-weight:600}
.blatt .crosslink .arr{color:var(--orange-blatt)}
.blatt .sig{font:600 var(--t3)/1.4 var(--sans);color:var(--tinte)}
.blatt .meta{font:400 var(--t4)/1.45 var(--sans);color:var(--tinte-2);margin-top:var(--s4)}

/* Unterseiten: Breitenstufen */
@media (max-width:1100px){
  .maturity-grid,.flow-stations,.wege-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .seite{padding-bottom:var(--s5)}
  .seite > section{padding-top:var(--s5)}
  .seite > section.hero{padding-top:var(--s4)}
  .seite > section.hero + section{padding-top:var(--s4)}
  .seite > section.cta-section{padding-top:var(--s5)}
  .seite > section.presentations-section{padding-top:var(--s4)}
  .maturity-grid,.services-grid,.cross-dimensions,.flow-stations,.kit-layout,.kit-steps,.wege-liste,.blatt .grid{grid-template-columns:1fr}
  .kit-layout{gap:var(--s4)}
  .seite-hell{padding-top:var(--s3)}
  .seite-hell > section > .container,.seite-hell > .container{padding-top:var(--s4);padding-bottom:var(--s5);border-radius:0}
  .footer-grid{grid-template-columns:1fr;gap:var(--s3)}
}
@media (max-width:1040px) and (min-width:821px){
  .footer-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr)}
}

/* Bewegung nur auf Wunsch */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{
  html,body{background:#fff;color:#000}
  .site-header,.site-footer{display:none}
}

/* Zustimmungsbanner (vorlagen/zaehler.html, Verhalten unverändert): nur Darstellung, Schrift in T4 */
[aria-labelledby="kw-consent-text"]{left:auto!important;right:16px!important;bottom:16px!important;max-width:540px!important;margin:0!important;padding:16px!important;gap:8px 16px!important;font:400 15px/1.45 var(--sans)!important;border-top:3px solid var(--blau)!important;box-shadow:0 16px 40px rgba(0,0,0,.4)!important}
[aria-labelledby="kw-consent-text"] #kw-consent-text{flex:1 1 260px!important;font-size:15px!important}
[aria-labelledby="kw-consent-text"] button{min-height:44px!important;padding:8px 16px!important;font:600 15px/1.2 var(--sans)!important;border-radius:4px!important}
@media (max-width:820px){
  [aria-labelledby="kw-consent-text"]{left:8px!important;right:8px!important;bottom:8px!important;max-width:none!important;padding:8px 16px!important}
  [aria-labelledby="kw-consent-text"] #kw-consent-text{flex:1 1 100%!important}
  [aria-labelledby="kw-consent-text"] > div{flex:1 1 100%!important}
  [aria-labelledby="kw-consent-text"] button{flex:1 1 0!important;padding:8px!important}
}