/* ===================================================================
   FARBEN & GRUNDLAGEN (hell / dunkel)
   =================================================================== */
:root {
  /* Markenfarben A.R.C. Laser: Navy #001E46, Blau #003479, Hellblau #638FC7, Grau #B3BCC8 */
  --navy: #001e46;
  --hellblau: #638fc7;
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #edf1f6;
  --text: #001f47;
  --muted: #4a5b72;
  --line: #d3dbe5;
  --accent: #003479;
  --accent-soft: #e2eaf5;
  --accent-text: #003479;
  --on-accent: #ffffff;
  --ki: #6b3fa0;
  --ki-soft: #efe8f8;
  --rot: #b42318;  --rot-soft: #fdecea;
  --gelb: #8a5a00; --gelb-dot: #e0a100; --gelb-soft: #fdf4dc;
  --gruen: #1f6b3a; --gruen-soft: #e6f4ea;
  --ph-bg: #fff3a3; --ph-text: #5a4600; --ph-line: #d9b800;
  --shadow: 0 1px 2px rgba(20,30,50,.06), 0 4px 16px rgba(20,30,50,.06);
  --radius: 12px;
  --maxw: 1080px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #04122a;
    --surface: #0b1d38;
    --surface-2: #112847;
    --text: #e8eef7;
    --muted: #a7b6cb;
    --line: #213a5e;
    --accent: #638fc7;
    --accent-soft: #10284b;
    --accent-text: #9dbbe3;
    --on-accent: #04122a;
    --ki: #c3a3ec;
    --ki-soft: #2b2140;
    --rot: #ff8a80;  --rot-soft: #3a1d1b;
    --gelb: #f2c55c; --gelb-dot: #f2c55c; --gelb-soft: #3a2f14;
    --gruen: #7fd59a; --gruen-soft: #183324;
    --ph-bg: #4a3f00; --ph-text: #fff0a0; --ph-line: #b39600;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px; }

/* Platzhalter – gelb markiert, damit nichts vergessen wird */
mark.ph {
  background: var(--ph-bg); color: var(--ph-text);
  border-bottom: 2px dashed var(--ph-line);
  padding: 0 .25em; border-radius: 3px;
}

/* ===================================================================
   NAVIGATION (sticky)
   =================================================================== */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topnav .wrap { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.brand { font-weight: 700; color: var(--accent-text); white-space: nowrap; font-size: .95rem; }
.topnav ul {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0;
}
.topnav ul::-webkit-scrollbar { display: none; }
.topnav a {
  display: block; padding: 6px 10px; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-size: .9rem; white-space: nowrap;
}
.topnav a:hover { color: var(--text); background: var(--surface-2); }
.topnav a.aktiv { color: var(--on-accent); background: var(--accent); }
@media (max-width: 699px) { .brand { display: none; } }

/* ===================================================================
   ABSCHNITTE
   =================================================================== */
section { padding: 72px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: 0; }
.nr { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-bottom: .5rem; }
.intro { color: var(--muted); max-width: 68ch; font-size: 1.05rem; }

/* Hero */
.hero { padding: 0 0 72px; }
.hero-band {
  color: #fff; padding: 40px 0 64px;
  background: linear-gradient(120deg, var(--navy) 0%, #00285c 60%, #003479 100%);
}
.hero-logo { display: block; width: 150px; height: auto; margin-bottom: 36px; }
.hero-band .eyebrow { color: var(--hellblau); }
.hero-band h1 { color: #fff; }
.hero-band h1 .ki { color: #8fb3e3; }
.hero-band .kern { color: rgba(255,255,255,.9); }
.hero .hero-band .wer { color: rgba(255,255,255,.75); }
.hero .hero-band .wer strong { color: #fff; }
.hero .vn { margin-top: -28px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 30px; width: auto; display: block; }
.fuss-marke { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fuss-marke img { height: 40px; width: auto; }
.eyebrow { font-weight: 600; color: var(--accent-text); font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); letter-spacing: -.02em; margin: .4em 0 .5em; max-width: 20ch; }
.hero .kern { font-size: 1.15rem; max-width: 62ch; }
.hero .wer { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--muted); }
.hero .wer strong { color: var(--text); }

/* Karten-Raster */
.grid { display: grid; gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); break-inside: avoid;
}
.ist { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 24px; }
.ist .card h3 { display: flex; gap: 10px; align-items: baseline; }
.ist .card h3 span { color: var(--rot); font-variant-numeric: tabular-nums; }
.ist .card p { color: var(--muted); margin: 0; }

/* Prozessgrafik */
.prozess { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px;
  grid-template-columns: 1fr; counter-reset: s; }
.prozess li {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 16px 16px; box-shadow: var(--shadow);
  border-top: 4px solid var(--accent); break-inside: avoid;
}
.prozess li[data-typ="ki"] { border-top-color: var(--ki); background: linear-gradient(180deg, var(--ki-soft), var(--surface) 60%); }
.prozess li[data-typ="mensch"] { border-top-color: var(--gruen); }
.prozess .kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.prozess .zahl {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .9rem;
}
.prozess li[data-typ="ki"] .zahl { background: var(--ki); }
.prozess li[data-typ="mensch"] .zahl { background: var(--gruen); }
.prozess h3 { margin: 0; font-size: 1rem; }
.prozess p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); margin-bottom: 8px; }
.prozess li[data-typ="ki"] .tag { background: var(--ki); color: var(--surface); }
.prozess li[data-typ="mensch"] .tag { background: var(--gruen-soft); color: var(--gruen); }
/* Pfeile zwischen den Schritten */
.prozess li:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 10px; height: 10px;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted);
  transform: translateX(-50%) rotate(45deg); background: transparent;
}
@media (min-width: 700px) {
  .prozess { grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
  .prozess li:not(:last-child)::after { left: auto; right: -19px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  .prozess li:nth-child(3)::after { display: none; }
}
@media (min-width: 1040px) {
  .prozess { grid-template-columns: repeat(6, 1fr); gap: 22px; }
  .prozess li:nth-child(3)::after { display: block; }
  .prozess li:not(:last-child)::after { right: -16px; }
}
.legende-typ { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: .88rem; color: var(--muted); }
.legende-typ span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--accent); }
.legende-typ .l-ki::before { background: var(--ki); }
.legende-typ .l-mensch::before { background: var(--gruen); }

.callout {
  margin-top: 28px; display: flex; gap: 16px; align-items: flex-start;
  background: var(--gruen-soft); border: 1px solid color-mix(in srgb, var(--gruen) 35%, transparent);
  border-left: 6px solid var(--gruen); border-radius: var(--radius); padding: 18px 20px; break-inside: avoid;
}
.callout svg { flex: none; color: var(--gruen); }
.callout strong { display: block; font-size: 1.15rem; color: var(--gruen); margin-bottom: 2px; }
.callout p { margin: 0; }

/* Beispiel-Report */
.report-box { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.report-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .9rem; }
.badge-beispiel { font-weight: 700; color: var(--gelb); background: var(--gelb-soft); padding: 2px 10px; border-radius: 999px; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.tabelle-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
caption { text-align: left; padding: 12px 18px 0; color: var(--muted); font-size: .85rem; }
th, td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr.zeile { cursor: pointer; }
tbody tr.zeile:hover, tbody tr.zeile.offen { background: var(--accent-soft); }
.art-btn { all: unset; cursor: pointer; display: block; }
.art-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.art-nr { display: block; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.art-name { font-weight: 600; }
.art-btn .hint { display: block; font-size: .78rem; color: var(--accent-text); }
.lz-streu { color: var(--muted); font-size: .85em; }
.korr { display: inline-block; margin-left: 4px; font-size: .7rem; font-weight: 700; color: var(--gruen); background: var(--gruen-soft); padding: 0 6px; border-radius: 999px; vertical-align: 1px; }
.ampel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; padding: 2px 10px 2px 6px; border-radius: 999px; }
.ampel::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.ampel.rot { color: var(--rot); background: var(--rot-soft); } .ampel.rot::before { background: var(--rot); }
.ampel.gelb { color: var(--gelb); background: var(--gelb-soft); } .ampel.gelb::before { background: var(--gelb-dot); }
.ampel.gruen { color: var(--gruen); background: var(--gruen-soft); } .ampel.gruen::before { background: var(--gruen); }
tr.korrektur td { background: var(--surface-2); padding: 16px 18px; }
.korr-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.korr-form label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
.korr-form input { font: inherit; width: 8rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.btn { font: inherit; font-size: .9rem; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; }
.btn.sek { background: transparent; color: var(--accent-text); }
.korr-info { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--muted); }
.legende { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 14px 18px; font-size: .85rem; color: var(--muted); }
.legende .ampel { font-size: .8rem; }
.live { padding: 0 18px 14px; font-size: .85rem; color: var(--gruen); min-height: 1.4em; margin: 0; }

/* Handy & schmales Tablet: Tabelle als Karten */
@media (max-width: 859px) {
  table, thead, tbody, tr, td, th { display: block; }
  thead { position: absolute; left: -9999px; }
  caption { display: block; padding: 12px 16px 4px; }
  tbody tr.zeile { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  tbody tr.zeile td { border: 0; padding: 0; }
  tbody tr.zeile td:first-child, tbody tr.zeile td.vorschlag { grid-column: 1 / -1; }
  tbody tr.zeile td.zahl { text-align: left; }
  tbody tr.zeile td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
  tr.korrektur td { display: block; }
}

/* Kennzahlenkarten */
.kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 24px; }
.kpi { display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--accent); }
.kpi h3 { margin: 0; }
.kpi .mess { color: var(--muted); font-size: .93rem; margin: 0; flex: 1; }
.kpi .ausgang { font-size: .82rem; color: var(--muted); margin: 0; }
.kpi .ziel { border: 2px dashed var(--line); border-radius: 8px; padding: 10px 12px; font-size: .88rem; display: flex; align-items: flex-end; gap: 10px; }
.kpi .ziel .linie { flex: 1; min-width: 3rem; border-bottom: 1px solid var(--line); height: 1.1em; }
.kpi .ziel b { color: var(--text); font-weight: 600; }

/* Zeitleiste */
.zeitleiste { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 20px; position: relative; }
.zeitleiste > li { position: relative; padding-left: 40px; break-inside: avoid; }
.zeitleiste > li::before { content: ""; position: absolute; left: 9px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 4px solid var(--accent); z-index: 1; }
.zeitleiste::before { content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 3px; background: var(--line); }
.zeitleiste .card { padding: 18px 20px; }
.zeitleiste .phase { font-size: .8rem; font-weight: 700; color: var(--accent-text); letter-spacing: .06em; text-transform: uppercase; }
.zeitleiste h3 { margin: 2px 0 2px; font-size: 1.25rem; }
.zeitleiste .dauer { display: inline-block; font-size: .85rem; font-weight: 600; background: var(--accent-soft); color: var(--accent-text); padding: 2px 10px; border-radius: 999px; margin-bottom: 10px; }
.zeitleiste ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: .95rem; }
@media (min-width: 800px) {
  .zeitleiste { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .zeitleiste::before { left: 10px; right: 10px; top: 17px; bottom: auto; width: auto; height: 3px; }
  .zeitleiste > li { padding-left: 0; padding-top: 44px; }
  .zeitleiste > li::before { left: 0; top: 9px; }
  .zeitleiste .card { height: 100%; }
}

/* Risiken */
.risiken { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 24px; }
.risiko h3 { margin-bottom: .3em; }
.risiko .lbl { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.risiko .r { color: var(--muted); margin-bottom: 14px; }
.risiko .r .lbl { color: var(--rot); }
.risiko .m { background: var(--gruen-soft); border-radius: 8px; padding: 10px 12px; margin: 0; font-size: .95rem; }
.risiko .m .lbl { color: var(--gruen); }

/* Rolle */
.rolle-text { font-size: 1.2rem; max-width: 64ch; border-left: 4px solid var(--accent); padding: 4px 0 4px 20px; margin-top: 16px; }

/* Kontakt */
.kontakt-box { margin-top: 20px; display: grid; gap: 8px; font-size: 1.05rem; }
.kontakt-box dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.kontakt-box dt { color: var(--muted); }
.kontakt-box dd { margin: 0; overflow-wrap: anywhere; }
footer { padding: 32px 0 48px; color: var(--muted); font-size: .85rem; }

/* ===================================================================
   NEUE GRAFIKEN: Vorher/Nachher, Stationen, Pyramide, Datenfluss
   =================================================================== */
:root { --e1: #3a6aa8; }
@media (prefers-color-scheme: dark) { :root { --e1: #9dbbe3; } }

/* Vorher / Nachher im Kopf */
.vn { display: grid; gap: 14px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .vn { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.vn-seite { border-radius: var(--radius); padding: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); break-inside: avoid; }
.vn-seite h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.vn-seite.heute h3 { color: var(--muted); }
.vn-seite.morgen { border: 2px solid var(--accent); }
.vn-seite.morgen h3 { color: var(--accent-text); }
.vn-seite ol { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; counter-reset: v; }
.vn-seite li { counter-increment: v; display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; font-size: .95rem; line-height: 1.35; }
.vn-seite li::before { content: counter(v); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; }
.vn-seite.heute li { border: 1px dashed var(--line); }
.vn-seite.heute li::before { background: var(--surface-2); color: var(--muted); }
.vn-seite.morgen li { background: var(--accent-soft); }
.vn-seite.morgen li::before { background: var(--accent); color: var(--on-accent); }
.vn-fazit { margin: 0; font-size: .92rem; font-weight: 600; }
.heute .vn-fazit { color: var(--rot); }
.morgen .vn-fazit { color: var(--gruen); }
.vn-pfeil { display: grid; place-items: center; color: var(--accent-text); }
@media (max-width: 759px) { .vn-pfeil svg { transform: rotate(90deg); } }
.blick { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.blick-kachel { padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 2px; break-inside: avoid; }
.blick-kachel b { font-size: 1.7rem; line-height: 1.1; color: var(--accent-text); }
.blick-kachel .k { font-weight: 600; }
.blick-kachel .txt { font-size: .85rem; color: var(--muted); }

/* Einkaufsprozess: 10 Stationen */
.stationen { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stationen { grid-template-columns: repeat(5, 1fr); } }
.stationen li { display: flex; }
.station {
  font: inherit; text-align: left; cursor: pointer; width: 100%; position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 12px; border-radius: var(--radius); background: var(--surface); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow); break-inside: avoid;
}
.station svg { color: var(--accent-text); }
.station:hover { border-color: var(--accent); }
.station[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.station[aria-pressed="true"] svg, .station[aria-pressed="true"] .st-nr { color: var(--on-accent); }
.st-nr { position: absolute; top: 10px; right: 12px; font-size: .78rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-titel { font-weight: 600; font-size: .92rem; line-height: 1.3; flex: 1; }
.meter { display: inline-flex; gap: 3px; vertical-align: middle; }
.meter i { width: 14px; height: 6px; border-radius: 2px; background: var(--line); }
.meter i.an { background: var(--gruen); }
.station[aria-pressed="true"] .meter i { background: color-mix(in srgb, var(--on-accent) 30%, transparent); }
.station[aria-pressed="true"] .meter i.an { background: var(--on-accent); }
.st-legende { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; font-size: .85rem; color: var(--muted); align-items: center; }
.art { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; }
.art-ki { background: var(--ki); color: var(--surface); }
.art-auto { background: var(--accent-soft); color: var(--accent-text); }
.station-detail { margin-top: 16px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--accent); box-shadow: var(--shadow); }
.sd-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.sd-kopf h3 { margin: 0; font-size: 1.2rem; }
.sd-nr { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .9rem; }
.sd-pot { margin-left: auto; font-size: .88rem; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.sd-vergleich { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .sd-vergleich { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.sd-heute, .sd-kuenftig { padding: 12px 14px; border-radius: 8px; }
.sd-heute { background: var(--rot-soft); }
.sd-kuenftig { background: var(--gruen-soft); }
.sd-vergleich .lbl { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.sd-heute .lbl { color: var(--rot); }
.sd-kuenftig .lbl { color: var(--gruen); }
.sd-vergleich p { margin: 0; }
.sd-pfeil { display: grid; place-items: center; color: var(--muted); }
@media (max-width: 699px) { .sd-pfeil svg { transform: rotate(90deg); } }
.nur-druck { display: none; }

/* Fundament-Pyramide */
.fundament-grid { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 860px) { .fundament-grid { grid-template-columns: 1.25fr 1fr; align-items: center; } }
.pyramide { display: grid; gap: 6px; justify-items: center; }
.ebene { display: grid; place-items: center; text-align: center; color: var(--surface); min-height: 108px; break-inside: avoid; }
.ebene b { display: block; font-size: 1.02rem; line-height: 1.25; }
.ebene span { display: block; font-size: .82rem; line-height: 1.35; opacity: .92; margin-top: 2px; }
.ebene em { display: inline-block; margin-top: 8px; font-style: normal; font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 22%, transparent); }
.ebene.e0 { width: 52%; background: var(--ki); clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%); padding: 30px 14% 12px; }
.ebene.e1 { width: 76%; background: var(--e1); clip-path: polygon(15.8% 0, 84.2% 0, 100% 100%, 0 100%); padding: 14px 18% 14px; }
.ebene.e2 { width: 100%; background: var(--accent); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); padding: 16px 14% 16px; min-height: 130px; }
.fundament-seite { grid-template-columns: 1fr; }
.fundament-seite .card p { margin: 0; color: var(--muted); }

/* Datenfluss */
.fluss { display: grid; gap: 10px; margin-top: 28px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .fluss { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; } }
.fl-spalte { display: grid; gap: 10px; }
.fl-lbl { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.fl-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); display: grid; gap: 2px; break-inside: avoid; }
.fl-box span { font-size: .85rem; color: var(--muted); }
.fl-box.q { border-left: 4px solid var(--accent); }
.fl-box.erg { border-left: 4px solid var(--gruen); }
.fl-box.basis { background: var(--accent); border-color: var(--accent); padding: 24px 18px; text-align: center; }
.fl-box.basis b { font-size: 1.15rem; color: var(--on-accent); }
.fl-box.basis span { color: var(--on-accent); opacity: .9; }
.fl-pfeil { display: grid; place-items: center; color: var(--accent-text); }
@media (max-width: 859px) { .fl-pfeil svg { transform: rotate(90deg); } }

/* Zeitvergleich */
.zeit { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); display: grid; gap: 18px; break-inside: avoid; }
.zeit h3 { margin: 0; }
.zeit-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; }
.zeit-kopf span { font-weight: 700; font-variant-numeric: tabular-nums; }
.zeit-spur { height: 22px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.zeit-balken { height: 100%; border-radius: 6px; min-width: 18px; }
.zeit-balken.hand { background: repeating-linear-gradient(135deg, var(--rot) 0 10px, color-mix(in srgb, var(--rot) 70%, var(--surface)) 10px 20px); }
.zeit-balken.auto { background: var(--gruen); }
.zeit-zeile p { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.zeit-achse { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; margin-top: -6px; }
.zeit-hinweis { font-size: .8rem; color: var(--muted); margin: 0; }
.merk { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 20px; }
.merk .card { border-top: 4px solid var(--gruen); }
.merk .card p { margin: 0; color: var(--muted); }

/* Umsetzung mit Microsoft */
.ms-arch { display: grid; gap: 10px; margin-top: 28px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ms-arch { grid-template-columns: 1fr auto 1.15fr auto 1fr; align-items: stretch; gap: 14px; } }
.zone { border: 2px dashed var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; break-inside: avoid; }
.zone.cloud { background: var(--accent-soft); border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.zone .fl-box.ms { border-left: 4px solid var(--accent); }
.ms-arch .fl-pfeil { align-self: center; }
.ausbau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.chip { display: inline-flex; flex-wrap: wrap; gap: 0 6px; padding: 6px 12px; border: 1.5px dashed var(--ki); border-radius: 999px; font-size: .85rem; color: var(--muted); }
.chip b { color: var(--ki); }
.ms-kern { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-left-color: var(--accent); }
.ms-kern svg { color: var(--accent-text); }
.ms-kern p { font-size: 1.05rem; font-weight: 500; }
h3.unter { font-size: 1.25rem; margin: 40px 0 6px; }
.produkte { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); margin-top: 14px; }
.produkt { display: flex; flex-direction: column; gap: 6px; }
.produkt h3 { margin: 0; font-size: 1rem; }
.produkt p { margin: 0; color: var(--muted); font-size: .93rem; }
.ph-badge { align-self: flex-start; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 9px; border-radius: 999px; }
.ph-badge.pilot { background: var(--gruen-soft); color: var(--gruen); }
.ph-badge.spaeter { border: 1.5px dashed var(--line); color: var(--muted); }
.produkt.spaeter { box-shadow: none; border-style: dashed; }
.checkliste { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 8px; }
.checkliste h3 { font-size: 1.02rem; margin-bottom: 10px; }
.checkliste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checkliste label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .93rem; line-height: 1.45; }
.checkliste input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.checkliste input:checked + span { color: var(--muted); text-decoration: line-through; }
.ms-hinweise { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 20px; }
.ms-hinweise .card { border-left: 5px solid var(--gelb-dot); background: var(--gelb-soft); box-shadow: none; }
.ms-hinweise .card h3 { color: var(--gelb); margin-bottom: 4px; }
.ms-hinweise .card p { margin: 0; }

/* Icons auf Karten */
.c-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 10px; flex: none; }
.c-icon svg { width: 22px; height: 22px; }
.c-kopf { display: flex; align-items: center; gap: 12px; }
.c-kopf .c-icon { margin-bottom: 0; }
.c-kopf h3 { margin: 0; }
.ist .c-icon { background: var(--rot-soft); color: var(--rot); }
.kpi .c-icon { background: var(--gruen-soft); color: var(--gruen); }
.blick-kachel .c-icon { width: 34px; height: 34px; margin-bottom: 4px; }
.r-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--surface); font-size: .82rem; font-weight: 700; }
.risiko .c-kopf { margin-bottom: 12px; }
h3.unter.klein { font-size: 1rem; margin-top: 24px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* Teufelskreis */
.kreis-wrap { display: grid; gap: 20px; margin: 24px 0 28px; align-items: center; }
@media (min-width: 860px) { .kreis-wrap { grid-template-columns: 1.25fr 1fr; } }
#kreis { width: 100%; max-width: 520px; height: auto; justify-self: center; }
.k-bogen { fill: none; stroke: var(--rot); stroke-width: 3; stroke-dasharray: 2 0; }
.k-spitze { fill: var(--rot); }
.k-knoten rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.k-knoten.ansatz rect { stroke: var(--gruen); stroke-width: 3; }
.k-knoten text { fill: var(--text); font: 600 13px "Segoe UI", system-ui, -apple-system, sans-serif; text-anchor: middle; }
.k-haken { fill: var(--gruen); }
.k-haken-strich { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-mitte { fill: var(--rot); font: 700 18px "Segoe UI", system-ui, -apple-system, sans-serif; text-anchor: middle; }
.k-mitte-unter { fill: var(--muted); font: 400 12.5px "Segoe UI", system-ui, -apple-system, sans-serif; text-anchor: middle; }
.kreis-text { background: var(--gruen-soft); border-left: 6px solid var(--gruen); border-radius: var(--radius); padding: 18px 20px; break-inside: avoid; }
.kreis-text h3 { color: var(--gruen); }
.kreis-text p { margin: 0 0 10px; }
.kreis-legende { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); margin: 0 !important; }
.k-muster { width: 26px; height: 16px; border: 3px solid var(--gruen); border-radius: 5px; background: var(--surface); }

/* Wirkungskette */
.kette { list-style: none; padding: 0; margin: 10px 0 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.glied { padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 2px solid var(--gruen); color: var(--gruen); background: var(--surface); }
.glied.g2, .glied.g3 { background: var(--gruen-soft); }
.glied.g4 { background: var(--gruen); color: var(--surface); }
.kette-pfeil { color: var(--gruen); display: grid; place-items: center; }
.kette-pfeil svg { width: 22px; height: 22px; }
@media (max-width: 599px) {
  .kette { flex-direction: column; align-items: stretch; }
  .glied { text-align: center; }
  .kette-pfeil svg { transform: rotate(90deg); }
}

/* Balkenplan */
.gantt { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); break-inside: avoid; }
.g-zeile { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin-bottom: 10px; }
@media (max-width: 599px) {
  .g-zeile { grid-template-columns: 84px 1fr; gap: 6px; }
  .g-lbl { font-size: .8rem; hyphens: manual; }
  .gantt .g-balken { font-size: 0; padding: 0; } /* Dauer steht in den Phasenkarten darunter */
}
.g-lbl { font-weight: 600; font-size: .9rem; }
.g-spur { position: relative; height: 32px; background: var(--surface-2); border-radius: 6px; margin-inline: 10px; }
.g-balken { position: absolute; top: 0; bottom: 0; border-radius: 6px; color: var(--surface); font-size: .8rem; font-weight: 700; display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.g-balken.pilot { background: linear-gradient(90deg, var(--accent) 0 var(--weich, 100%), color-mix(in srgb, var(--accent) 50%, var(--surface)) var(--weich, 100%)); }
.g-balken.auswertung { background: var(--e1); }
.g-balken.ausbau { background: linear-gradient(90deg, var(--gruen) 40%, color-mix(in srgb, var(--gruen) 25%, var(--surface))); }
.g-zeile.ms .g-spur { background: none; border-bottom: 2px dashed var(--line); border-radius: 0; height: 30px; }
.g-ms { position: absolute; top: 4px; width: 22px; height: 22px; transform: translateX(-50%) rotate(45deg); background: var(--gelb-dot); border-radius: 3px; display: grid; place-items: center; }
.g-ms span { transform: rotate(-45deg); font-size: .72rem; font-weight: 700; color: #1a1a1a; }
.g-zeile.achse .g-lbl { font-weight: 400; font-size: .8rem; color: var(--muted); }
.g-zeile.achse .g-spur { background: none; height: 18px; }
.g-tick { position: absolute; transform: translateX(-50%); font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-tick:first-child { transform: none; }
.g-tick:last-child { transform: translateX(-100%); }
.g-legende { margin: 8px 0 0; padding-left: 1.4em; font-size: .88rem; color: var(--muted); display: grid; gap: 2px; }
.g-legende li::marker { color: var(--gelb); font-weight: 700; }

/* Risikomatrix */
.risiko-wrap { display: grid; gap: 24px; margin-top: 24px; align-items: start; }
@media (min-width: 980px) { .risiko-wrap { grid-template-columns: 340px 1fr; } }
.risiko-wrap .risiken { margin-top: 0; }
.matrix-box { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); break-inside: avoid; }
#matrix { width: 100%; height: auto; display: block; }
.matrix-box figcaption { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.m-zelle { stroke: var(--surface); stroke-width: 2; }
.m-zelle.gruen { fill: var(--gruen-soft); } .m-zelle.gelb { fill: var(--gelb-soft); } .m-zelle.rot { fill: var(--rot-soft); }
.m-stufe { fill: var(--muted); font: 400 11px "Segoe UI", system-ui, sans-serif; text-anchor: middle; }
.m-achse { fill: var(--text); font: 600 12px "Segoe UI", system-ui, sans-serif; text-anchor: middle; }
.m-pfeil { stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 4 3; }
.m-spitze { fill: var(--text); }
.m-vorher { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.m-nachher { fill: var(--accent); }
.m-nr { font: 700 11px "Segoe UI", system-ui, sans-serif; text-anchor: middle; fill: var(--text); }
.m-nr.hell { fill: var(--on-accent); }

/* Netzwerk Meine Rolle */
.hub { position: relative; display: grid; gap: 14px; margin: 24px 0 8px; grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "m m" "c d"; }
@media (min-width: 760px) { .hub { grid-template-columns: 1fr 1.1fr 1fr; grid-template-areas: "a . b" ". m ." "c . d"; row-gap: 10px; } }
.hub-linien { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hub-linien line { stroke: var(--accent); stroke-opacity: .45; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.hub-knoten { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; box-shadow: var(--shadow); break-inside: avoid; }
.hub-knoten span { font-size: .85rem; color: var(--muted); }
.hub-mitte { grid-area: m; position: relative; z-index: 1; justify-self: center; text-align: center; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 18px 30px; display: grid; gap: 2px; box-shadow: var(--shadow); }
.hub-mitte b { font-size: 1.3rem; }
.hub-mitte span { font-size: .85rem; opacity: .9; }

/* ===================================================================
   SCROLL-ANIMATION (abschaltbar über prefers-reduced-motion)
   =================================================================== */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   DRUCK (A4, sauberes PDF)
   =================================================================== */
@page { size: A4; margin: 16mm 14mm; }
@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #f2f4f8; --text: #111; --muted: #444; --line: #ccd3de;
    --accent: #003479; --accent-soft: #e2eaf5; --accent-text: #003479; --on-accent: #fff; --text: #001f47; --e1: #3a6aa8;
    --ki: #6b3fa0; --ki-soft: #f3eefa;
    --rot: #b42318; --rot-soft: #fdecea; --gelb: #7a5000; --gelb-dot: #e0a100; --gelb-soft: #fdf4dc;
    --gruen: #1f6b3a; --gruen-soft: #e6f4ea; --shadow: none;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 10.5pt; background: #fff; }
  .topnav, .skip, .art-btn .hint, tr.korrektur, .live { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .wrap { max-width: none; padding: 0; }
  section { padding: 0 0 8mm; border: 0; break-before: page; }
  .hero { break-before: auto; padding: 0 0 4mm; }
  .hero-band { padding: 7mm 8mm 9mm; border-radius: 4mm; }
  .hero-logo { width: 34mm; margin-bottom: 5mm; }
  .hero .vn { margin-top: 5mm; }
  #ausgangslage { break-before: page; }
  .vn { grid-template-columns: 1fr auto 1fr; margin-top: 6mm; }
  .vn-pfeil svg, .fl-pfeil svg { transform: none !important; }
  .blick { grid-template-columns: repeat(4, 1fr); }
  .station-detail, .st-legende { display: none !important; }
  .stationen { grid-template-columns: repeat(5, 1fr); }
  .station { padding: 8px; }
  table.nur-druck { display: table !important; margin-top: 4mm; font-size: 7.8pt; line-height: 1.35; }
  .nur-druck td, .nur-druck th { padding: 3px 5px; }
  .station svg { width: 18px; height: 18px; }
  .st-titel { font-size: 8.5pt; }
  .fundament-grid { grid-template-columns: 1fr; }
  .pyramide { width: 80%; margin: 0 auto; }
  .fundament-seite { grid-template-columns: 1fr 1fr; }
  .fluss { grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
  .zeit, .merk { break-inside: avoid; }
  .kreis-wrap { grid-template-columns: 1.2fr 1fr; margin: 3mm 0 4mm; }
  #kreis { max-width: 105mm; }
  .risiko-wrap { grid-template-columns: 1fr; gap: 4mm; }
  .matrix-box { display: grid; grid-template-columns: 68mm 1fr; gap: 6mm; align-items: center; }
  .matrix-box { padding: 3mm; }
  .risiko { padding: 10px 12px; }
  .risiko p { font-size: 8.8pt; line-height: 1.4; }
  .risiko .r { margin-bottom: 6px; }
  #risiken h2 { margin-bottom: 2mm; }
  footer { padding: 2mm 0 0; }
  .risiko-wrap .risiken { grid-template-columns: 1fr 1fr; }
  .hub { grid-template-columns: 1fr 1.1fr 1fr; grid-template-areas: "a . b" ". m ." "c . d"; }
  .kette { flex-direction: row; }
  .kette-pfeil svg { transform: none; }
  .c-icon { width: 30px; height: 30px; }
  .c-icon svg { width: 17px; height: 17px; }
  .ms-arch { grid-template-columns: 1fr auto 1.15fr auto 1fr; gap: 3mm; }
  .produkte { grid-template-columns: repeat(3, 1fr); }
  h3.check-start { break-before: page; margin-top: 0; }
  .checkliste { grid-template-columns: repeat(3, 1fr); }
  .checkliste label { font-size: 8.5pt; }
  h3.unter { margin-top: 6mm; break-after: avoid; }
  .checkliste input { -webkit-appearance: none; appearance: none; border: 1.5px solid #555; border-radius: 3px; }
  #kontakt { break-before: auto; padding-top: 8mm; }
  .nr { break-after: avoid; }
  /* Flex statt Grid: Chrome bricht Grid-Zeilen beim Druck zu früh um */
  .ist { display: flex; flex-wrap: wrap; gap: 4mm; }
  .ist .card { flex: 0 0 calc((100% - 8mm) / 3); padding: 10px 12px; }
  .ist .card p { font-size: 9pt; line-height: 1.45; }
  .ist { margin-top: 3mm; }
  .hero h1 { font-size: 22pt; margin: 2mm 0 3mm; max-width: none; }
  .hero .kern { font-size: 11pt; }
  .hero .wer { margin-top: 3mm; }
  h2, h3 { break-after: avoid; }
  .card, .prozess li, .callout, .zeitleiste > li, tr { break-inside: avoid; }
  .prozess { grid-template-columns: repeat(3, 1fr); gap: 5mm 7mm; }
  .prozess li:nth-child(3)::after { display: none; }
  .prozess li:not(:last-child)::after { left: auto; right: -5.5mm; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
  .tabelle-scroll { overflow: visible; }
  table { font-size: 9pt; }
  th, td { padding: 6px 8px; }
  .zeitleiste { grid-template-columns: repeat(3, 1fr); gap: 5mm; }
  .zeitleiste::before { left: 10px; right: 10px; top: 17px; bottom: auto; width: auto; height: 3px; }
  .zeitleiste > li { padding-left: 0; padding-top: 40px; }
  .zeitleiste > li::before { left: 0; top: 9px; }
  .kpis, .risiken { grid-template-columns: repeat(2, 1fr); }
  a { text-decoration: none; color: inherit; }
}
/* Druck mit schmalem Fenster: Handy-Kartenlayout der Tabelle zurücknehmen */
@media print and (max-width: 859px) {
  table { display: table; } thead { display: table-header-group; position: static; }
  tbody { display: table-row-group; } tr, tbody tr.zeile { display: table-row; }
  th, td, tbody tr.zeile td { display: table-cell; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  tbody tr.zeile td[data-label]::before { display: none; }
  caption { display: table-caption; }
}

/* ===================================================================
   MEHRSEITIG: Titelbild, Seitenkopf, Kapitel-Kacheln, Blättern
   =================================================================== */
a.brand { text-decoration: none; color: var(--accent-text); }
.seitenkopf .hero-band { padding: 32px 0 40px; }
.seitenkopf .eyebrow a { color: inherit; text-decoration: none; }
.seitenkopf h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); margin: .3em 0 .3em; letter-spacing: -.02em; }
.seitenkopf .kern { color: rgba(255,255,255,.88); max-width: 66ch; font-size: 1.08rem; margin: 0; }
.seitenkopf + section { border-top: 0; }
.kapitel-grid { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.kapitel {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: start;
  padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: border-color .2s, transform .2s;
}
.kapitel:hover { border-color: var(--accent); transform: translateY(-2px); }
.kapitel .c-icon { grid-row: span 2; margin: 0; width: 46px; height: 46px; }
.kapitel .k-nr { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); }
.kapitel h3 { margin: 0; font-size: 1.12rem; grid-column: 2; }
.kapitel p { grid-column: 2 / 4; margin: 4px 0 0; color: var(--muted); font-size: .93rem; }
.kapitel .k-pfeil { grid-row: 1 / 3; grid-column: 3; align-self: center; color: var(--accent-text); }
.blaettern { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 32px; padding-bottom: 8px; }
.blaettern a { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); text-decoration: none; color: var(--text); min-width: 200px; }
.blaettern a span { font-size: .78rem; color: var(--muted); }
.blaettern a b { color: var(--accent-text); }
.blaettern a.weiter { margin-left: auto; text-align: right; }
.blaettern a:hover { border-color: var(--accent); }
@media print {
  .blaettern { display: none; }
  .seitenkopf .hero-band { padding: 6mm 8mm; border-radius: 4mm; }
  .seitenkopf + section { break-before: avoid !important; padding-top: 5mm; }
  .kapitel { break-inside: avoid; }
}

/* ===================================================================
   KAPITEL STRATEGISCHER EINKAUF
   =================================================================== */
.quelle { font-size: .8rem; color: var(--muted); margin: 10px 0 0; }
.quelle::before { content: "Quelle: "; font-weight: 600; }
.card .quelle { margin-top: 10px; }
.wer-tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.wer-tag.ki { background: var(--ki); color: var(--surface); }
.wer-tag.mensch { background: var(--gruen-soft); color: var(--gruen); }
.wer-tag.auto { background: var(--accent-soft); color: var(--accent-text); }

/* Gesamtmodell */
.modell { display: grid; gap: 24px; margin-top: 24px; align-items: center; }
@media (min-width: 900px) { .modell { grid-template-columns: 1fr 1fr; } }
.modell-grafik { display: grid; gap: 8px; }
#modell-kreis { width: 100%; max-width: 500px; height: auto; justify-self: center; }
.mo-bogen { fill: none; stroke: var(--accent); stroke-width: 3; opacity: .7; }
.mo-spitze { fill: var(--accent); }
.mo-knoten rect { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.mo-knoten.ki rect { stroke: var(--ki); }
.mo-knoten.mensch rect { stroke: var(--gruen); }
.mo-nr-kreis { fill: var(--accent); }
.mo-knoten.ki .mo-nr-kreis { fill: var(--ki); }
.mo-knoten.mensch .mo-nr-kreis { fill: var(--gruen); }
.mo-nr { fill: var(--surface); font: 700 12px "SF Pro Display", -apple-system, system-ui, sans-serif; text-anchor: middle; }
.mo-titel { fill: var(--text); font: 700 14px "SF Pro Display", -apple-system, system-ui, sans-serif; text-anchor: middle; }
.mo-kurz { fill: var(--muted); font: 400 12px "SF Pro Display", -apple-system, system-ui, sans-serif; text-anchor: middle; }
.mo-mitte { fill: var(--accent-text); font: 700 17px "SF Pro Display", -apple-system, system-ui, sans-serif; text-anchor: middle; }
.mo-mitte-unter { fill: var(--muted); font: 400 13px "SF Pro Display", -apple-system, system-ui, sans-serif; text-anchor: middle; }
.modell-fundament { background: var(--accent); color: var(--on-accent); text-align: center; font-weight: 700; padding: 12px 16px; border-radius: 8px; clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); }
.modell-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.modell-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; }
.ml-nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .85rem; }
.modell-liste h3 { margin: 0 0 2px; font-size: 1rem; }
.ml-kurz { font-weight: 400; color: var(--muted); font-size: .88rem; margin-left: 4px; }
.modell-liste p { margin: 0; font-size: .9rem; color: var(--muted); }

/* Hebel */
.hebel { margin: 24px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); display: grid; gap: 12px; break-inside: avoid; }
.hb-zeile { display: grid; grid-template-columns: 220px 1fr; gap: 12px; align-items: center; }
@media (max-width: 599px) { .hb-zeile { grid-template-columns: 1fr; gap: 4px; } }
.hb-lbl { font-weight: 600; font-size: .95rem; }
.hb-spur { background: var(--surface-2); border-radius: 6px; height: 34px; }
.hb-balken { height: 100%; border-radius: 6px; background: var(--line); display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; min-width: 58px; }
.hb-balken b { font-variant-numeric: tabular-nums; color: var(--text); }
.hb-zeile.stark .hb-balken { background: var(--accent); }
.hb-zeile.stark .hb-balken b { color: var(--on-accent); }
.hebel figcaption { font-size: .82rem; color: var(--muted); }
.argumente { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 18px; }
.argumente .card { border-top: 4px solid var(--accent); }
.argumente .card p { margin: 0; color: var(--muted); font-size: .93rem; }

/* Portfolio */
.portfolio-wrap { display: grid; gap: 24px; margin-top: 24px; align-items: start; }
@media (min-width: 900px) { .portfolio-wrap { grid-template-columns: 1.4fr 1fr; } }
.pf { display: grid; grid-template-columns: 30px 1fr 1fr; grid-template-rows: auto auto 30px; gap: 6px; }
.pf-y { grid-row: 1 / 3; display: grid; place-items: center; }
.pf-y span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.pf-x { grid-column: 2 / 4; text-align: center; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); align-self: center; }
.pf-feld { border-radius: 10px; padding: 14px; min-height: 150px; display: flex; flex-direction: column; gap: 6px; break-inside: avoid; }
.pf-feld h3 { margin: 0; font-size: 1.05rem; }
.pf-feld p { margin: 0; font-size: .9rem; }
.pf-feld .pf-bsp { margin-top: auto; font-size: .82rem; color: var(--muted); font-style: italic; }
.pf-feld.engpass { background: var(--rot-soft); } .pf-feld.engpass h3 { color: var(--rot); }
.pf-feld.strategisch { background: var(--accent); color: var(--on-accent); } .pf-feld.strategisch .pf-bsp { color: var(--on-accent); opacity: .85; }
.pf-feld.unkritisch { background: var(--surface-2); }
.pf-feld.hebel { background: var(--gruen-soft); } .pf-feld.hebel h3 { color: var(--gruen); }
.pf-hinweis { font-size: .88rem; color: var(--muted); margin: 0 0 10px; padding: 10px 12px; border-left: 4px solid var(--gelb-dot); background: var(--gelb-soft); border-radius: 6px; }
.pf-daten { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; font-size: .9rem; }
.pf-daten b { display: inline-block; min-width: 64px; color: var(--accent-text); }
.abc h3 { font-size: 1rem; }
.abc p { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
#abc-kurve { width: 100%; height: auto; }
.abc-zone.a { fill: var(--accent); opacity: .16; } .abc-zone.b { fill: var(--accent); opacity: .08; } .abc-zone.c { fill: transparent; }
.abc-lbl { fill: var(--accent-text); font: 700 13px "SF Pro Display", -apple-system, system-ui, sans-serif; text-anchor: middle; }
.abc-linie { fill: none; stroke: var(--accent); stroke-width: 3; }
.abc-achse { stroke: var(--muted); stroke-width: 1.2; }
.abc-ax { fill: var(--muted); font: 400 11px "SF Pro Display", -apple-system, system-ui, sans-serif; text-anchor: middle; }

/* Entscheidungsbaum */
.baum { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 0; }
.baum-zeile { display: grid; grid-template-columns: 1.2fr auto 1fr; gap: 10px 14px; align-items: center; }
.baum-frage { background: var(--surface); border: 2px solid var(--accent); border-radius: 10px; padding: 12px 14px; font-weight: 600; display: flex; gap: 10px; align-items: center; break-inside: avoid; }
.baum-frage.sonst { border-style: dashed; color: var(--muted); }
.baum-nr { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: .8rem; }
.baum-ja { display: flex; align-items: center; gap: 2px; color: var(--gruen); font-weight: 700; font-size: .8rem; text-transform: uppercase; }
.baum-ja svg { width: 26px; height: 26px; }
.baum-ergebnis { background: var(--gruen-soft); border-radius: 10px; padding: 10px 14px; display: grid; gap: 2px; break-inside: avoid; }
.baum-ergebnis b { color: var(--gruen); }
.baum-ergebnis span { font-size: .85rem; color: var(--muted); }
.baum-nein { grid-column: 1; justify-self: center; padding: 6px 0; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 759px) {
  .baum-zeile { grid-template-columns: 1fr; gap: 6px; }
  .baum-ja { justify-content: center; } .baum-ja svg { transform: rotate(90deg); }
}
.kurve-box { margin-top: 24px; }
.kurve-box h3 { margin-bottom: 4px; }
.kurve-box > p { margin: 0 0 8px; color: var(--muted); font-size: .92rem; max-width: 70ch; }
#bestell-kurve { width: 100%; height: auto; }
.bk-achse { stroke: var(--muted); stroke-width: 1.2; }
.bk-og { stroke: var(--gruen); stroke-width: 1.6; stroke-dasharray: 6 4; }
.bk-bp { stroke: var(--rot); stroke-width: 1.6; stroke-dasharray: 6 4; }
.bk-lager { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; }
.bk-theo { fill: none; stroke: var(--hellblau); stroke-width: 2; stroke-dasharray: 3 3; }
.bk-lz { stroke: var(--text); stroke-width: 1.4; marker-start: none; }
.bk-marke { fill: var(--rot); }
.bk-txt { font: 600 11px "SF Pro Display", -apple-system, system-ui, sans-serif; }
.bk-txt.og { fill: var(--gruen); } .bk-txt.bp { fill: var(--rot); } .bk-txt.lz { fill: var(--text); text-anchor: middle; }
.bk-ax { fill: var(--muted); font: 400 11px "SF Pro Display", -apple-system, system-ui, sans-serif; text-anchor: middle; }
.kurve-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .82rem; color: var(--muted); margin-top: 6px; }
.kurve-legende i { display: inline-block; width: 22px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 6px; }
.lg-lager { border-color: var(--accent) !important; } .lg-theo { border-color: var(--hellblau) !important; border-top-style: dashed !important; }
.lg-bp { border-color: var(--rot) !important; border-top-style: dashed !important; } .lg-og { border-color: var(--gruen) !important; border-top-style: dashed !important; }
.kurve-legende i.lg-marke { width: 0; height: 0; border: 6px solid transparent; border-bottom: 10px solid var(--rot); border-top: 0; vertical-align: 1px; }
#steuer-merk { margin-top: 18px; }
.merk .card .quelle { margin-top: 8px; }

/* Lieferantenmanagement */
.lm { margin-top: 24px; }
.lm-schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .lm-schritte { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; } }
.lm-schritt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; break-inside: avoid; }
.lm-schritt h3 { margin: 0; }
.lm-schritt p { margin: 0; color: var(--muted); font-size: .9rem; flex: 1; }
.lm-schritt .wer-tag { align-self: flex-start; }
.lm-nr { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: .85rem; }
.lm-pfeil { display: grid; place-items: center; color: var(--accent-text); }
.lm-pfeil svg { width: 26px; height: 26px; }
@media (max-width: 899px) { .lm-pfeil svg { transform: rotate(90deg); } }
.lm-ruecklauf { margin-top: 8px; border: 2px dashed var(--accent); border-top: 0; border-radius: 0 0 14px 14px; height: 26px; position: relative; opacity: .7; }
.lm-ruecklauf span { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); background: var(--bg); padding: 0 10px; font-size: .82rem; font-weight: 700; color: var(--accent-text); white-space: nowrap; }
.ampel-box { display: grid; gap: 20px; margin-top: 36px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); break-inside: avoid; }
@media (min-width: 900px) { .ampel-box { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.ampel-text p { margin: 0; color: var(--muted); }
.ampel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fa { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.fa i { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.fa div { display: grid; }
.fa span { font-size: .85rem; color: var(--muted); }
.fa.rot i { background: var(--rot); } .fa.rot { background: var(--rot-soft); }
.fa.orange i { background: #e8710a; } .fa.orange { background: color-mix(in srgb, #e8710a 14%, var(--surface)); }
.fa.gelb i { background: var(--gelb-dot); } .fa.gelb { background: var(--gelb-soft); }
#lm-karten { margin-top: 18px; }

/* Kennzahlen */
.kz-legende { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .85rem; color: var(--muted); margin-top: 16px; }
.kz-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gruen); margin-right: 8px; vertical-align: -1px; flex: none; }
.kz-punkt.an { background: var(--gruen); }
.kz-gruppen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 12px; }
.kz ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: .92rem; }
.kz li { display: flex; align-items: baseline; }
.quellen { margin-top: 28px; }
.quellen ul { margin: 8px 0 0; padding-left: 1.2em; font-size: .9rem; display: grid; gap: 4px; }

@media print {
  .modell { grid-template-columns: 1fr 1fr; }
  .portfolio-wrap { grid-template-columns: 1.3fr 1fr; }
  .lm-schritte { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }
  .lm-pfeil svg { transform: none; }
  .ampel-box { grid-template-columns: 1.1fr 1fr; }
  .baum-zeile { grid-template-columns: 1.2fr auto 1fr; }
  .baum-ja svg { transform: none; }
  .hb-zeile { grid-template-columns: 55mm 1fr; }
}
/* Gesamtmodell auf schmalen Bildschirmen: Etikett unter den Text, nichts ragt über den Rand */
.modell > * { min-width: 0; }
@media (max-width: 599px) {
  .modell-liste li { grid-template-columns: auto 1fr; }
  .modell-liste .wer-tag { grid-column: 2; justify-self: start; }
}
@media print { .quelle { break-before: avoid; } }

/* ===================================================================
   METHODE (Treppe), PROALPHA-KARTE, EINKAUFSLEITUNG
   =================================================================== */
.treppe { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .treppe { grid-template-columns: repeat(4, 1fr); align-items: end; } .treppe .s1 { margin-bottom: 28px; } .treppe .s2 { margin-bottom: 56px; } .treppe .s3 { margin-bottom: 84px; } }
.stufe { background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--accent); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; break-inside: avoid; }
.stufe.s0 { border-top-color: var(--hellblau); } .stufe.s1 { border-top-color: var(--e1); } .stufe.s3 { border-top-color: var(--gruen); }
.stufe-kopf { display: flex; justify-content: space-between; align-items: center; }
.stufe-nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 700; }
.stufe-zeit { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stufe h3 { margin: 4px 0 0; font-size: 1.15rem; }
.stufe p { margin: 0; color: var(--muted); font-size: .92rem; flex: 1; }
.stufe-erg { font-weight: 700; color: var(--gruen); font-size: .9rem; }

.pa-legende { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .85rem; color: var(--muted); margin-top: 16px; }
.pa-status { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.pa-status.nutzen { background: var(--gruen); color: var(--surface); }
.pa-status.pruefen { background: var(--gelb-soft); color: var(--gelb); border: 1.5px solid var(--gelb-dot); }
.pa-status.ergaenzen { border: 1.5px dashed var(--accent); color: var(--accent-text); }
.pa-karte { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.pa-zeile { display: grid; grid-template-columns: 1.1fr 1.2fr auto; gap: 8px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); align-items: center; break-inside: avoid; }
.pa-zeile:last-child { border-bottom: 0; }
.pa-zeile.kopf { background: var(--surface-2); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pa-zeile.nutzen { border-left: 5px solid var(--gruen); } .pa-zeile.pruefen { border-left: 5px solid var(--gelb-dot); } .pa-zeile.ergaenzen { border-left: 5px dashed var(--accent); }
.pa-bedarf { font-weight: 600; }
.pa-funktion { color: var(--muted); font-size: .92rem; }
@media (max-width: 699px) {
  .pa-zeile { grid-template-columns: 1fr auto; }
  .pa-zeile .pa-funktion { grid-column: 1 / -1; grid-row: 2; }
  .pa-zeile.kopf span:nth-child(2) { display: none; }
}

.prinzipien { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: 20px; }
.prinzipien .card { border-top: 4px solid var(--accent); }
.prinzipien .card p { margin: 0; color: var(--muted); font-size: .93rem; }
.kompetenz { margin-top: 14px; display: grid; gap: 8px; }
.kp-zeile { display: grid; grid-template-columns: 1fr auto 2fr; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; break-inside: avoid; }
.kp-anf { font-weight: 700; color: var(--accent-text); }
.kp-pfeil { color: var(--gruen); display: grid; } .kp-pfeil svg { width: 22px; height: 22px; }
.kp-nachweis { font-size: .95rem; }
@media (max-width: 699px) { .kp-zeile { grid-template-columns: 1fr; gap: 4px; } .kp-pfeil { display: none; } }

.hundert { margin-top: 24px; }
.h-leiste { display: grid; grid-template-columns: 30fr 30fr 30fr 10fr auto; align-items: center; gap: 3px; margin-bottom: 14px; }
.h-seg { height: 30px; display: grid; place-items: center; color: var(--surface); font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.h-seg.h0 { background: var(--hellblau); border-radius: 8px 0 0 8px; } .h-seg.h1 { background: var(--e1); } .h-seg.h2 { background: var(--accent); } .h-seg.h3 { background: var(--gruen); border-radius: 0 8px 8px 0; font-size: 0; }
.h-ziel { width: 44px; height: 44px; margin-left: 6px; border-radius: 50%; background: var(--gruen); color: var(--surface); display: grid; place-items: center; font-weight: 800; }
.h-phasen { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.h-phase { border-top: 5px solid var(--accent); }
.h-phase.h0 { border-top-color: var(--hellblau); } .h-phase.h1 { border-top-color: var(--e1); } .h-phase.h3 { border-top-color: var(--gruen); }
.h-tage { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.h-phase h3 { margin: 2px 0 8px; }
.h-phase ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: .92rem; display: grid; gap: 4px; }
.h-meilenstein { margin: 14px 0 0; font-weight: 700; color: var(--gruen); }
.h-meilenstein span { color: var(--gelb-dot); }
@media (max-width: 599px) { .h-seg { font-size: 0; } }
@media print {
  .treppe { grid-template-columns: repeat(4, 1fr); align-items: end; }
  .treppe .s1 { margin-bottom: 6mm; } .treppe .s2 { margin-bottom: 12mm; } .treppe .s3 { margin-bottom: 18mm; }
  .pa-zeile { padding: 5px 10px; font-size: 9pt; }
  .kp-zeile { grid-template-columns: 1fr auto 2fr; padding: 6px 10px; }
  .kp-pfeil { display: grid; }
}

/* ===================================================================
   SEITENLEISTE LINKS (Kapitel-Reiter)
   =================================================================== */
:root { --sl-breite: 272px; }
.topnav { display: none; }
.seitenleiste {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--sl-breite); z-index: 60;
  background: var(--navy); color: #fff; display: flex; flex-direction: column; gap: 18px;
  padding: 22px 14px; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease;
}
.seitenleiste.offen { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.3); }
.sl-marke { display: grid; gap: 10px; padding: 0 8px 14px; border-bottom: 1px solid rgba(255,255,255,.14); text-decoration: none; color: #fff; }
.sl-marke img { width: 110px; height: auto; }
.sl-marke span { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hellblau); line-height: 1.35; }
.sl-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sl-liste a { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; color: rgba(255,255,255,.82); text-decoration: none; border-left: 4px solid transparent; }
.sl-liste a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sl-liste a.aktiv { background: rgba(255,255,255,.12); color: #fff; border-left-color: var(--hellblau); }
.sl-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: var(--hellblau); }
.sl-liste a.aktiv .sl-icon { background: var(--hellblau); color: var(--navy); }
.sl-text { display: grid; line-height: 1.25; font-weight: 600; font-size: .95rem; }
.sl-text small { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sl-druck { margin-top: auto; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.85); text-decoration: none; font-size: .88rem; }
.sl-druck:hover, .sl-druck.aktiv { background: rgba(255,255,255,.1); color: #fff; }
.sl-schleier { position: fixed; inset: 0; background: rgba(0,15,40,.45); z-index: 55; }
.mobilkopf { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.menue-knopf { font: inherit; font-weight: 600; font-size: .9rem; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); cursor: pointer; }
@media (min-width: 1000px) {
  body { padding-left: var(--sl-breite); }
  .seitenleiste { transform: none; transition: none; }
  .mobilkopf, .sl-schleier { display: none !important; }
  html { scroll-padding-top: 16px; }
}
@media print {
  body { padding-left: 0 !important; }
  .seitenleiste, .mobilkopf, .sl-schleier { display: none !important; }
}

/* ===================================================================
   KURZFASSUNG (Startseite)
   =================================================================== */
section.kurz { padding: 56px 0; }
.mehr { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--accent-text); text-decoration: none; }
.mehr:hover { text-decoration: underline; }
.pa-bilanz { margin-top: 20px; }
.pb-balken { display: flex; gap: 4px; height: 44px; border-radius: 10px; overflow: hidden; }
.pb-teil { display: grid; place-items: center; color: var(--surface); font-size: 1.1rem; }
.pb-teil.nutzen { background: var(--gruen); }
.pb-teil.pruefen { background: var(--gelb-dot); color: #1a1a1a; }
.pb-teil.ergaenzen { background: var(--surface); border: 2px dashed var(--accent); color: var(--accent-text); border-radius: 0 10px 10px 0; }
.pb-spalten { display: grid; gap: 14px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pb-spalte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; break-inside: avoid; }
.pb-spalte.nutzen { border-top: 5px solid var(--gruen); } .pb-spalte.pruefen { border-top: 5px solid var(--gelb-dot); } .pb-spalte.ergaenzen { border-top: 5px dashed var(--accent); }
.pb-spalte h3 { font-size: 1rem; display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.pb-spalte p { margin: 0 0 8px; font-size: .85rem; color: var(--muted); }
.pb-spalte ul { margin: 0; padding-left: 1.1em; font-size: .92rem; display: grid; gap: 3px; }
.kpi-chips { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.kpi-chips li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; break-inside: avoid; }
.kpi-chips .c-icon { margin: 0; background: var(--gruen-soft); color: var(--gruen); }
.kpi-chips div { display: grid; gap: 2px; }
.kpi-chips span:not(.c-icon) { font-size: .86rem; color: var(--muted); }
.sl-trenner { margin: 12px 10px 2px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px; }
@media print {
  body[data-seite="start"] section { break-before: auto; padding: 5mm 0; }
  body[data-seite="start"] #kapitel { display: none; }
  body[data-seite="start"] #methode, body[data-seite="start"] #fuehrung { break-before: page; }
  .mehr { display: none; }
}
@media print {
  body[data-seite="start"] #kurz-proalpha { break-before: page; }
  .pa-bilanz, .kpi-chips, .kette { break-inside: avoid; }
  .prinzipien { grid-template-columns: repeat(4, 1fr); }
  .prinzipien .card { padding: 10px 12px; }
  body[data-seite="start"] #kontakt { break-inside: avoid; padding-top: 4mm; }
}