/* ==================================================================
   BAHNHOF CALAU — Shared Stylesheet
   Doppelschicht: Bahn-Code (Stations-Schild, Fahrplan, DIN-Mittelschrift)
   + warme Backstein/Beige-Welt + Aurora-Spektrum für Genossenschaft.
   ================================================================== */

:root {
  --backstein: #8B3A2F;
  --backstein-dunkel: #6E2C24;
  --beige: #F2E8D3;
  --beige-dunkel: #E6D9BC;
  --anthrazit: #2E2A26;
  --anthrazit-soft: #4A4540;
  --aurora-lila: #6B3FA0;
  --aurora-pink: #E84A8C;
  --aurora-gelb: #F6C544;
  --db-blau: #1B3A5F;
  --db-blau-hell: #2E5A8A;
  --off-white: #FAF7F0;
  --led-gelb: #F4B83C;
  --led-rot: #E84A4A;
  --led-gruen: #4FBE7F;
  --rule: rgba(46,42,38,0.18);
  --font-head: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-hand: "Caveat", cursive;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--beige);
  color: var(--anthrazit);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--backstein); color: var(--off-white); }

/* ----- TYPE ------------------------------------------------------- */
.h-display, h1, h2, h3 { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.01em; line-height: 0.95; text-transform: uppercase; }
h1 { font-size: clamp(40px, 7.5vw, 104px); margin: 0 0 0.3em; }
h2 { font-size: clamp(34px, 4.6vw, 64px); margin: 0 0 0.4em; letter-spacing: 0.02em; }
h3 { font-size: clamp(22px, 2.4vw, 32px); margin: 0 0 0.5em; letter-spacing: 0.03em; }
h4 { margin: 0 0 0.5em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--backstein);
  font-weight: 700;
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--backstein); }
.serif { font-family: var(--font-serif); font-weight: 400; }
.hand { font-family: var(--font-hand); font-weight: 700; }
.mono { font-family: var(--font-mono); }
p { margin: 0 0 1em; text-wrap: pretty; }
.lead { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.45; font-weight: 400; max-width: 60ch; }
.small-caps { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--anthrazit-soft); }

/* ----- LAYOUT ----------------------------------------------------- */
.wrap { max-width: 1280px; padding: 0 24px; margin: 0 auto; }
.wrap-narrow { max-width: 920px; padding: 0 24px; margin: 0 auto; }
.wrap-text { max-width: 720px; padding: 0 24px; margin: 0 auto; }
section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
section + section { border-top: 1px solid var(--rule); }

/* ----- STATIONS-NAV (sticky) ------------------------------------- */
.station-board {
  position: sticky; top: 0; z-index: 60;
  background: var(--db-blau);
  color: #fff;
  border-bottom: 4px solid var(--led-gelb);
}
.station-board-inner {
  display: flex; align-items: center; gap: 16px;
  max-width: 1280px; margin: 0 auto;
  padding: 10px 24px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.05em;
}
.sb-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-size: 22px; letter-spacing: 0.05em;
  color: inherit; text-decoration: none;
}
.sb-logo .dot { width: 12px; height: 12px; background: var(--led-rot); border-radius: 50%; display: inline-block; box-shadow: 0 0 8px var(--led-rot); }
.sb-track { margin-left: 12px; padding: 3px 8px; border: 1px solid rgba(255,255,255,0.4); border-radius: 2px; font-size: 11px; letter-spacing: 0.15em; opacity: 0.85; }
.sb-nav { display: none; gap: 22px; margin-left: auto; }
.sb-nav a { color: #fff; text-decoration: none; opacity: 0.85; transition: opacity 0.2s; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; }
.sb-nav a:hover, .sb-nav a.is-active { opacity: 1; color: var(--led-gelb); }
.sb-clock { margin-left: auto; color: var(--led-gelb); font-weight: 700; letter-spacing: 0.1em; }
@media (min-width: 1024px) {
  .sb-nav { display: flex; }
  .sb-clock { margin-left: 24px; }
}

/* ----- HERO (Startseite) ----------------------------------------- */
.hero { padding: 0; background: var(--beige); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; }
.hero-text {
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 80px);
  position: relative; display: flex; flex-direction: column; justify-content: center;
}
.hero-photo { position: relative; background: var(--anthrazit); min-height: 320px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(0.95); }
.hero-stamp {
  position: absolute; bottom: 24px; left: 24px;
  color: var(--led-gelb); font-family: var(--font-hand);
  font-size: clamp(32px, 4vw, 56px); transform: rotate(-6deg);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5); line-height: 0.9;
  pointer-events: none;
}
.hero-photo-caption {
  position: absolute; top: 16px; right: 16px;
  background: rgba(0,0,0,0.55); color: #fff;
  padding: 6px 12px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; min-height: 86vh; }
}
.hero h1 { color: var(--anthrazit); }
.hero h1 .accent { color: var(--backstein); display: block; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ----- PAGE HEADER (Unterseiten) --------------------------------- */
.page-header {
  background: var(--beige);
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.page-header.dark { background: var(--anthrazit); color: var(--off-white); }
.page-header.dark .eyebrow { color: var(--led-gelb); }
.page-header.dark .eyebrow::before { background: var(--led-gelb); }
.page-header.dark h1 { color: var(--off-white); }
.page-header.dark .lead { color: rgba(255,255,255,0.85); }
.page-header.aurora {
  background: linear-gradient(135deg, #4F2D85 0%, var(--aurora-lila) 45%, var(--aurora-pink) 100%);
  color: var(--off-white);
}
.page-header.aurora .eyebrow { color: var(--aurora-gelb); }
.page-header.aurora .eyebrow::before { background: var(--aurora-gelb); }
.page-header.aurora h1 { color: var(--off-white); }
.page-header.aurora .lead { color: rgba(255,255,255,0.92); }
.page-header h1 { font-size: clamp(40px, 6.5vw, 88px); }
.breadcrumb {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--anthrazit-soft); margin-bottom: 22px;
}
.breadcrumb a { color: inherit; text-decoration: none; opacity: 0.75; }
.breadcrumb a:hover { color: var(--backstein); opacity: 1; }
.breadcrumb .sep { opacity: 0.4; margin: 0 8px; }
.page-header.dark .breadcrumb, .page-header.aurora .breadcrumb { color: rgba(255,255,255,0.7); }

/* ----- BTN ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--anthrazit);
  background: var(--anthrazit);
  color: var(--off-white);
  transition: all 0.18s ease;
  cursor: pointer;
}
.btn:hover { background: var(--backstein); border-color: var(--backstein); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--anthrazit); }
.btn.ghost:hover { background: var(--anthrazit); color: var(--off-white); }
.btn.on-dark { border-color: var(--off-white); background: transparent; color: var(--off-white); }
.btn.on-dark:hover { background: var(--off-white); color: var(--anthrazit); }
.btn.large { padding: 18px 32px; font-size: 14px; }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ----- PARTNER STRIP --------------------------------------------- */
.partner-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--off-white);
  padding: 18px 0; overflow: hidden;
}
.partner-strip-inner {
  display: flex; flex-wrap: wrap; gap: 12px 36px;
  justify-content: center; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--anthrazit-soft);
}
.partner-strip-inner span.sep { opacity: 0.4; }

/* ----- HUNDERTWASSER --------------------------------------------- */
.hundertw-grid { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .hundertw-grid { grid-template-columns: 1.2fr 1fr; } }
.hundertw-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hundertw-images figure { margin: 0; background: var(--anthrazit); aspect-ratio: 3/4; overflow: hidden; position: relative; }
.hundertw-images figure:first-child { transform: rotate(-1.2deg); }
.hundertw-images figure:last-child { transform: rotate(1.5deg) translateY(20px); }
.hundertw-images img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.35) contrast(1.05); }
.hundertw-images figcaption { position: absolute; bottom: 8px; left: 8px; background: rgba(255,255,255,0.9); color: var(--anthrazit); padding: 4px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; }

/* ----- ZITAT BLOCK ----------------------------------------------- */
.zitat {
  border-left: 4px solid var(--backstein);
  padding: 8px 0 8px 28px;
  margin: 28px 0;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--anthrazit);
  font-style: italic;
  font-weight: 400;
}
.zitat .src {
  display: block; margin-top: 14px; font-style: normal;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; color: var(--anthrazit-soft); text-transform: uppercase;
}

/* ----- WUNSCHLISTE ----------------------------------------------- */
.wunsch-list {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; grid-template-columns: 1fr; gap: 2px;
  background: var(--off-white); border: 1px solid var(--rule);
}
@media (min-width: 700px) { .wunsch-list { grid-template-columns: 1fr 1fr; } }
.wunsch-list li {
  padding: 18px 20px 18px 56px;
  background: var(--off-white);
  position: relative; font-size: 16px; line-height: 1.4;
  display: flex; align-items: center;
}
.wunsch-list li::before {
  content: "✓"; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  background: var(--backstein); color: var(--off-white);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
}
.wunsch-source { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--anthrazit-soft); text-transform: uppercase; margin-top: 16px; }

/* ----- KENNZAHLEN-STREIFEN -------------------------------------- */
.kennzahlen {
  background: #0d0d0d; color: var(--led-gelb);
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 4px solid var(--anthrazit);
  border-bottom: 4px solid var(--anthrazit);
  position: relative;
}
.kennzahlen::before {
  content: "ABFAHRT · DEPARTURES";
  position: absolute; top: 12px; left: 24px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(244,184,60,0.5); letter-spacing: 0.3em;
}
.kennzahlen::after {
  content: "PLANMÄSSIG";
  position: absolute; top: 12px; right: 24px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(244,184,60,0.5); letter-spacing: 0.3em;
}
.kennzahlen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
@media (min-width: 900px) { .kennzahlen-grid { grid-template-columns: repeat(5, 1fr); } }
.kennzahl { text-align: left; }
.kennzahl .num {
  font-family: var(--font-head); font-size: clamp(44px, 6.5vw, 88px);
  color: var(--led-gelb); line-height: 0.9;
  letter-spacing: 0.01em; text-shadow: 0 0 16px rgba(244,184,60,0.35);
}
.kennzahl .lbl {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,184,60,0.7); margin-top: 10px;
  line-height: 1.4; display: block;
}

/* ----- VIER KACHELN --------------------------------------------- */
.kacheln { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 800px) { .kacheln { grid-template-columns: 1fr 1fr; } }
.kachel {
  background: var(--off-white); border: 1px solid var(--rule);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kachel:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(46,42,38,0.12); }
.kachel-img { aspect-ratio: 16/10; background: var(--beige-dunkel); overflow: hidden; position: relative; }
.kachel-img img { width: 100%; height: 100%; object-fit: cover; }
.kachel-img .badge {
  position: absolute; top: 14px; left: 14px;
  background: var(--backstein); color: var(--off-white);
  padding: 6px 12px; font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 0.15em;
}
.kachel-body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.kachel h3 { color: var(--anthrazit); margin-bottom: 12px; }
.kachel .flaeche { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--backstein); font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.kachel p { font-size: 15px; line-height: 1.5; color: var(--anthrazit-soft); margin: 0 0 12px; }
.kachel .meta { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--rule); font-size: 13px; color: var(--anthrazit-soft); }
.kachel.full-width { grid-column: 1 / -1; }

/* ----- PULL QUOTE ----------------------------------------------- */
.pull-quote {
  background: var(--backstein); color: var(--off-white);
  padding: clamp(72px, 9vw, 128px) 0; text-align: center;
}
.pull-quote q {
  font-family: var(--font-serif); font-size: clamp(28px, 4vw, 52px);
  line-height: 1.25; font-style: italic;
  quotes: "„" """ "‚" "'";
  display: block; max-width: 22ch; margin: 0 auto;
  text-wrap: balance;
}
.pull-quote .attribution { display: block; margin-top: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; opacity: 0.7; }

/* ----- VERTRAUENS-ANKER ----------------------------------------- */
.anker-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 800px) { .anker-grid { grid-template-columns: repeat(3, 1fr); } }
.anker { background: var(--off-white); padding: 32px 28px; border-top: 4px solid var(--anthrazit); position: relative; }
.anker.architecture { border-top-color: var(--db-blau); }
.anker.kunst { border-top-color: var(--aurora-pink); }
.anker.unternehmen { border-top-color: var(--backstein); }
.anker .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--anthrazit-soft); margin-bottom: 8px; }
.anker .anker-name { font-family: var(--font-head); font-size: 26px; line-height: 1; margin-bottom: 14px; color: var(--anthrazit); letter-spacing: 0.02em; }
.anker p { font-size: 15px; line-height: 1.55; color: var(--anthrazit-soft); margin: 0; }
.traeger-strip {
  margin-top: 36px; padding: 18px 0;
  border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--anthrazit-soft); text-transform: uppercase; text-align: center;
}

/* ----- GALERIE -------------------------------------------------- */
.galerie { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 700px) { .galerie { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
.galerie figure { margin: 0; background: var(--off-white); border: 1px solid var(--rule); overflow: hidden; }
.galerie figure .img-frame { aspect-ratio: 4/3; overflow: hidden; background: #f7f5ed; display: grid; place-items: center; }
.galerie figure img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.galerie figcaption { padding: 14px 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--anthrazit-soft); text-transform: uppercase; line-height: 1.4; display: flex; justify-content: space-between; gap: 12px; }
.galerie figcaption .src { opacity: 0.6; }
.galerie .placeholder { aspect-ratio: 4/3; background: repeating-linear-gradient(135deg, #efeadb 0 12px, #e6dec8 12px 24px); display: grid; place-items: center; text-align: center; padding: 24px; }
.galerie .placeholder span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--anthrazit-soft); text-transform: uppercase; line-height: 1.5; }

/* ----- INSTALLATIONEN ROUND ------------------------------------ */
.install-grid { display: grid; gap: 32px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 800px) { .install-grid { grid-template-columns: repeat(3, 1fr); } }
.install { text-align: center; padding: 0 8px; }
.install .photo { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; margin: 0 auto 24px; box-shadow: 0 18px 40px -12px rgba(46,42,38,0.35); background: var(--anthrazit); }
.install .photo img { width: 100%; height: 100%; object-fit: cover; }
.install h3 { font-size: 28px; margin-bottom: 10px; }
.install p { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; max-width: 32ch; margin: 0 auto; color: var(--anthrazit); }
.install .tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--backstein); text-transform: uppercase; margin-bottom: 8px; }

/* ----- AKT IV — AURORA ------------------------------------------ */
.akt-iv {
  background: linear-gradient(135deg, #4F2D85 0%, var(--aurora-lila) 35%, var(--aurora-pink) 100%);
  color: var(--off-white); border-top: none;
  position: relative; overflow: hidden;
}
.akt-iv::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 15% 20%, rgba(246,197,68,0.18), transparent 45%);
  pointer-events: none;
}
.akt-iv .eyebrow { color: var(--aurora-gelb); }
.akt-iv .eyebrow::before { background: var(--aurora-gelb); }
.akt-iv h2 { color: var(--off-white); }
.akt-iv .lead { color: rgba(255,255,255,0.92); }
.akt-iv .zitat { border-left-color: var(--aurora-gelb); color: var(--off-white); }
.akt-iv .zitat .src { color: rgba(255,255,255,0.7); }
.info-box {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 20px 24px; margin: 24px 0;
  font-family: var(--font-serif); font-size: 16px;
  line-height: 1.5; border-left: 4px solid var(--aurora-gelb);
}

/* ----- FÜNF ROLLEN --------------------------------------------- */
.rollen-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 600px) { .rollen-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .rollen-grid { grid-template-columns: repeat(5, 1fr); } }
.rolle {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 24px 22px; display: flex; flex-direction: column;
  transition: background 0.2s; text-decoration: none; color: inherit;
}
.rolle:hover { background: rgba(255,255,255,0.16); }
.rolle .nr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; opacity: 0.7; }
.rolle h3 { font-size: 24px; margin: 10px 0 12px; line-height: 1.05; color: var(--off-white); }
.rolle p { font-size: 14px; line-height: 1.5; opacity: 0.92; flex: 1; margin-bottom: 18px; }
.rolle .cta { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aurora-gelb); text-decoration: none; border-bottom: 1px solid var(--aurora-gelb); padding-bottom: 4px; align-self: flex-start; }
.rolle:hover .cta { color: #fff; border-color: #fff; }

/* ----- 7 PAKETE ----------------------------------------------- */
.pakete { margin-top: 36px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); overflow-x: auto; }
.pakete table { width: 100%; border-collapse: collapse; min-width: 720px; }
.pakete th, .pakete td { padding: 16px 18px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.15); vertical-align: middle; }
.pakete th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aurora-gelb); background: rgba(0,0,0,0.15); font-weight: 700; }
.pakete td .paket-name { font-family: var(--font-head); font-size: 22px; line-height: 1; letter-spacing: 0.02em; }
.pakete td.einlage, .pakete td.monat { font-family: var(--font-mono); font-weight: 700; }
.pakete td.einlage { color: var(--aurora-gelb); font-size: 17px; }
.pakete td.monat { color: rgba(255,255,255,0.85); font-size: 14px; }
.pakete td.wofuer { font-size: 14px; color: rgba(255,255,255,0.85); }
.pakete tr:hover td { background: rgba(255,255,255,0.06); }
.pakete tr:last-child td { border-bottom: none; }
.paket-hinweis { margin-top: 18px; font-family: var(--font-serif); font-style: italic; font-size: 14px; opacity: 0.85; }

/* ----- AKT V --------------------------------------------------- */
.akt-v { background: var(--beige); }
.foerder-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 700px) { .foerder-grid { grid-template-columns: 1fr 1fr; } }
.foerder { background: var(--off-white); padding: 28px 28px; border-left: 4px solid var(--db-blau); }
.foerder .name { font-family: var(--font-head); font-size: 26px; letter-spacing: 0.02em; color: var(--db-blau); margin-bottom: 10px; }
.foerder p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--anthrazit-soft); }

/* ----- FAHRPLAN ----------------------------------------------- */
.fahrplan-board { margin-top: 36px; background: #0d0d0d; color: var(--led-gelb); padding: 4px; border: 2px solid var(--anthrazit); }
.fahrplan-board .fp-head { display: grid; grid-template-columns: 160px 1fr 100px; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(244,184,60,0.25); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(244,184,60,0.6); text-transform: uppercase; }
.fahrplan-board .fp-row { display: grid; grid-template-columns: 160px 1fr 100px; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(244,184,60,0.12); font-family: var(--font-mono); font-size: 14px; align-items: center; }
.fahrplan-board .fp-row:last-child { border-bottom: none; }
.fahrplan-board .fp-when { color: var(--led-gelb); font-weight: 700; letter-spacing: 0.08em; }
.fahrplan-board .fp-what { color: rgba(244,184,60,0.85); font-family: var(--font-body); font-size: 15px; letter-spacing: 0; line-height: 1.4; }
.fahrplan-board .fp-status { text-align: right; font-size: 11px; letter-spacing: 0.18em; }
.fp-status.ok { color: var(--led-gruen); }
.fp-status.plan { color: rgba(244,184,60,0.65); }
.fp-status.next { color: var(--led-rot); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (max-width: 720px) {
  .fahrplan-board .fp-head, .fahrplan-board .fp-row { grid-template-columns: 110px 1fr 70px; padding: 12px 14px; font-size: 12px; }
  .fahrplan-board .fp-what { font-size: 13px; }
}

/* ----- CTA-KARTEN ----------------------------------------------- */
.cta-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: repeat(3, 1fr); } }
.cta-card { background: var(--off-white); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rule); }
.cta-card .header { padding: 18px 24px; color: var(--off-white); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.cta-card.babenz .header { background: var(--db-blau); }
.cta-card.svv .header { background: var(--backstein); }
.cta-card.foerder .header { background: var(--aurora-lila); }
.cta-card .body { padding: 28px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.cta-card .anrede { font-family: var(--font-serif); font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.cta-card .text { font-family: var(--font-serif); font-size: 15px; line-height: 1.5; flex: 1; color: var(--anthrazit); }
.cta-card .btn { margin-top: 22px; align-self: flex-start; }

/* ----- SCHLUSS-AKKORD ------------------------------------------ */
.akkord { background: var(--beige); text-align: center; padding: clamp(80px, 11vw, 160px) 0; border-top: 1px solid var(--rule); }
.akkord h2 { color: var(--backstein); font-size: clamp(38px, 6vw, 88px); line-height: 1.02; margin-bottom: 12px; text-wrap: balance; }
.akkord .sub { font-family: var(--font-serif); font-size: clamp(18px, 2vw, 24px); color: var(--anthrazit-soft); font-style: italic; margin-top: 18px; }
.akkord .stempel { display: inline-block; margin-top: 30px; padding: 14px 24px; border: 2px dashed var(--backstein); color: var(--backstein); font-family: var(--font-hand); font-size: 28px; transform: rotate(-2deg); }

/* ----- FOOTER -------------------------------------------------- */
footer { background: var(--anthrazit); color: var(--off-white); padding: 64px 0 36px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
footer h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--led-gelb); margin: 0 0 16px; font-weight: 700; }
footer p, footer a { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); text-decoration: none; }
footer a:hover { color: var(--led-gelb); }
footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin-bottom: 6px; }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: rgba(255,255,255,0.55); text-transform: uppercase; }
.footer-traeger { font-family: var(--font-mono); font-size: 11px; line-height: 1.7; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); text-transform: uppercase; }

/* ----- MODAL --------------------------------------------------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; place-items: center; padding: 24px; z-index: 100; animation: fadein 0.2s ease; }
.modal.open { display: grid; }
.modal-card { background: var(--off-white); color: var(--anthrazit); max-width: 560px; width: 100%; padding: 40px 36px; border-top: 6px solid var(--backstein); position: relative; }
.modal-card h3 { margin-bottom: 16px; font-size: 32px; }
.modal-close { position: absolute; top: 12px; right: 12px; background: none; border: none; font-family: var(--font-mono); font-size: 20px; cursor: pointer; color: var(--anthrazit); width: 36px; height: 36px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ----- REVEAL -------------------------------------------------- */
/* Block-Fade je Sektion entfällt — Bewegung übernehmen .rv (granular) + .step (Karten). */
.reveal { }
.reveal.in { }
/* Sicherheits-Fallback: ohne JS, bei reduzierter Bewegung und im Druck immer sichtbar */
.no-reveal .reveal, .reveal.in { opacity: 1; transform: none; }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* ==================================================================
   NEU — Komponenten für Unterseiten
   ================================================================== */

/* ----- MASONRY MOODBOARD --------------------------------------- */
.mood-grid {
  column-count: 2;
  column-gap: 12px;
  margin-top: 32px;
}
@media (min-width: 720px) { .mood-grid { column-count: 3; column-gap: 14px; } }
@media (min-width: 1100px) { .mood-grid { column-count: 4; column-gap: 16px; } }
.mood-card {
  break-inside: avoid;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  background: var(--anthrazit);
  display: block;
  text-decoration: none;
  color: inherit;
}
.mood-card img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.mood-card:hover img { transform: scale(1.04); }
.mood-card .mc-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
  color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mood-card:hover .mc-overlay { opacity: 1; transform: translateY(0); }
.mood-card .mc-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--led-gelb); display: block; margin-bottom: 4px; }
.mood-card .mc-name { font-family: var(--font-head); font-size: 22px; letter-spacing: 0.02em; line-height: 1; }

/* ----- MANIFEST-Block ------------------------------------------ */
.manifest {
  background: var(--off-white);
  border-left: 6px solid var(--backstein);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
  margin: 40px 0;
}
.manifest p {
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.45;
  margin: 0 0 0.8em;
}
.manifest p:last-child { margin-bottom: 0; }

/* ----- STIMMEN (overheard quotes) ----------------------------- */
.stimmen {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 36px;
}
@media (min-width: 700px) { .stimmen { grid-template-columns: 1fr 1fr; } }
.stimme {
  background: var(--off-white);
  padding: 24px 26px;
  position: relative;
  border-top: 3px solid var(--backstein);
}
.stimme.alt { border-top-color: var(--aurora-lila); }
.stimme.alt2 { border-top-color: var(--db-blau); }
.stimme.alt3 { border-top-color: var(--aurora-gelb); }
.stimme q {
  font-family: var(--font-serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.4;
  display: block;
  quotes: "„" """ "‚" "'";
  color: var(--anthrazit);
}
.stimme .who {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--anthrazit-soft);
}

/* ----- INSTALLATION DETAIL CARDS ------------------------------- */
.inst-detail-grid { display: grid; gap: 40px; grid-template-columns: 1fr; margin-top: 56px; }
@media (min-width: 900px) { .inst-detail-grid { grid-template-columns: 1fr; } }
.inst-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px dashed var(--rule);
}
.inst-detail:last-child { border-bottom: none; }
@media (min-width: 900px) {
  .inst-detail { grid-template-columns: 1.1fr 1fr; gap: 56px; padding: 48px 0; }
  .inst-detail.flip { grid-template-columns: 1fr 1.1fr; }
  .inst-detail.flip .inst-detail-photo { order: 2; }
}
.inst-detail-photo {
  background: var(--anthrazit);
  overflow: hidden;
  position: relative;
}
.inst-detail-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.inst-detail-photo .mc-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--anthrazit); color: var(--led-gelb);
  padding: 6px 10px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
}
.inst-detail h3 { font-size: clamp(32px, 4vw, 56px); margin-bottom: 16px; line-height: 0.95; }
.inst-detail .lead { font-size: 19px; }
.inst-detail .reden { margin-top: 20px; }
.inst-detail .reden h4 {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; color: var(--backstein);
  text-transform: uppercase; margin-bottom: 12px;
}
.inst-detail .reden ul { list-style: none; padding: 0; margin: 0; }
.inst-detail .reden li {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
  color: var(--anthrazit);
}
.inst-detail .reden li::before {
  content: "„"; position: absolute; left: 0; top: -4px;
  font-family: var(--font-serif); font-size: 28px;
  color: var(--backstein); line-height: 1;
}
.inst-detail-photo[data-zoom] { cursor: zoom-in; }
.inst-paket {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.02em; color: var(--anthrazit-soft);
  text-decoration: none; line-height: 1.4;
  transition: color 0.18s ease;
}
.inst-paket strong { color: var(--backstein); font-weight: 700; }
.inst-paket:hover { color: var(--anthrazit); }
.inst-paket:hover strong { color: var(--backstein-dunkel); }

/* ----- FORM ---------------------------------------------------- */
.form-shell {
  background: var(--off-white);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 56px);
  border-top: 6px solid var(--backstein);
  margin: 40px 0;
}
.form-shell.aurora { border-top-color: var(--aurora-pink); }
.form-shell.blau { border-top-color: var(--db-blau); }
.form-shell.gelb { border-top-color: var(--led-gelb); }
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--anthrazit-soft);
  font-weight: 700;
}
.field label .req { color: var(--backstein); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--rule);
  background: #fff;
  color: var(--anthrazit);
  border-radius: 0;
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--backstein);
  background: #fffdf7;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.45; }
.field .hint {
  font-size: 13px; color: var(--anthrazit-soft);
  font-family: var(--font-body); letter-spacing: 0;
  text-transform: none; font-weight: 400;
}
.checkbox-row {
  display: grid; grid-template-columns: 1fr;
  gap: 10px; margin: 8px 0 22px;
}
.checkbox-row label {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--font-body); font-size: 15px;
  letter-spacing: 0; text-transform: none;
  color: var(--anthrazit); font-weight: 400;
  cursor: pointer; line-height: 1.4;
}
.checkbox-row input[type="checkbox"],
.checkbox-row input[type="radio"] {
  margin-top: 3px; width: 18px; height: 18px;
  accent-color: var(--backstein); flex-shrink: 0;
}
.form-shell .form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.form-shell .form-foot {
  margin-top: 18px; font-size: 13px; color: var(--anthrazit-soft); line-height: 1.45;
}

.form-success {
  display: none;
  background: var(--led-gruen);
  color: #0d2014;
  padding: 20px 24px;
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 24px;
  border-left: 4px solid #0d4d2a;
}
.form-success.show { display: block; }

/* ----- INFOTILE (sub-page navigation) -------------------------- */
.infotiles {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  margin-top: 40px;
}
@media (min-width: 720px) { .infotiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .infotiles { grid-template-columns: repeat(3, 1fr); } }
.infotile {
  background: var(--off-white);
  padding: 28px 28px;
  text-decoration: none;
  color: var(--anthrazit);
  border-left: 4px solid var(--backstein);
  transition: background 0.2s, transform 0.2s;
  display: flex; flex-direction: column;
}
.infotile:hover { background: var(--beige); transform: translateX(2px); }
.infotile .nr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--anthrazit-soft); }
.infotile h3 { font-size: 24px; margin: 8px 0 10px; }
.infotile p { font-size: 14px; line-height: 1.5; color: var(--anthrazit-soft); flex: 1; margin: 0 0 16px; }
.infotile .more { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; color: var(--backstein); text-transform: uppercase; }

/* ----- BIG TYPE QUOTE ----------------------------------------- */
.big-q {
  font-family: var(--font-head);
  font-size: clamp(42px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 40px 0;
  color: var(--anthrazit);
}
.big-q .accent { color: var(--backstein); }

/* ----- ESSAY type ---------------------------------------------- */
.essay p { font-family: var(--font-serif); font-size: 18px; line-height: 1.7; max-width: 38em; }
.essay p.first::first-letter {
  font-family: var(--font-head);
  font-size: 4em;
  float: left;
  line-height: 0.85;
  padding: 6px 12px 0 0;
  color: var(--backstein);
}
.essay h2 { margin-top: 56px; }

/* ----- VOICE WALL --------------------------------------------- */
.voice-wall {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin: 40px 0;
}
@media (min-width: 600px) { .voice-wall { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .voice-wall { grid-template-columns: repeat(3, 1fr); } }
.voice {
  background: var(--off-white);
  padding: 20px 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  border-left: 3px solid var(--backstein);
  position: relative;
}
.voice:nth-child(3n+2) { border-left-color: var(--aurora-lila); }
.voice:nth-child(3n+3) { border-left-color: var(--db-blau); }
.voice .who {
  display: block; margin-top: 12px;
  font-family: var(--font-mono); font-style: normal;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--anthrazit-soft);
}

/* ----- PROGRESS DOTS (form steps) ----------------------------- */
.steps {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 28px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--anthrazit-soft);
}
.steps .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.steps .dot.is-active { background: var(--backstein); box-shadow: 0 0 0 3px rgba(139,58,47,0.15); }
.steps .line { width: 30px; height: 1px; background: var(--rule); }

/* ----- ENTWICKLUNGS-HINWEIS (Beta-Band) ------------------------ */
.dev-notice { background: var(--anthrazit); color: var(--off-white); border-bottom: 1px solid rgba(255,255,255,0.12); }
.dev-notice[hidden] { display: none; }
.dev-notice-inner {
  max-width: 1280px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
}
.dev-notice .dn-tag {
  flex-shrink: 0; background: var(--led-gelb); color: var(--db-blau);
  font-weight: 700; padding: 3px 9px; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.dev-notice p { margin: 0; line-height: 1.45; color: rgba(255,255,255,0.82); }
.dev-notice a { color: var(--led-gelb); text-decoration: underline; text-underline-offset: 2px; }
.dev-notice a:hover { color: #fff; }
.dev-notice .dn-x {
  margin-left: auto; flex-shrink: 0; align-self: flex-start;
  background: none; border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.7); width: 24px; height: 24px;
  cursor: pointer; font-family: var(--font-mono); font-size: 14px;
  line-height: 1; border-radius: 2px;
}
.dev-notice .dn-x:hover { color: #fff; border-color: #fff; }
@media (max-width: 640px) {
  .dev-notice-inner { padding: 8px 16px; font-size: 11px; gap: 10px; }
  .dev-notice .dn-tag { font-size: 9px; padding: 3px 7px; }
}

/* ----- FORTSCHRITT IM NAV-RAND --------------------------------- */
.station-progress {
  position: absolute; left: 0; bottom: -4px; height: 4px; width: 0;
  background: var(--led-rot); box-shadow: 0 0 10px var(--led-rot);
  transition: width 0.12s linear; z-index: 2; pointer-events: none;
}

/* ----- STRECKENPLAN-RAIL (Kapitel + Lesefortschritt) ----------- */
.streckenplan {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 50; display: none;
}
@media (min-width: 1180px) { .streckenplan { display: block; } }
.sp-rail { position: relative; padding: 4px 0; }
.sp-line, .sp-fill {
  position: absolute; right: 5px; width: 2px; pointer-events: none;
}
.sp-line { background: var(--rule); }
.sp-fill { background: var(--backstein); transition: height 0.15s linear; }
.sp-rail ol { list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; }
.sp-stop {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; padding: 9px 0; cursor: pointer;
}
.sp-stop .sp-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--anthrazit-soft); white-space: nowrap;
  background: var(--off-white); padding: 4px 9px; border: 1px solid var(--rule);
  opacity: 0; transform: translateX(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s, border-color 0.2s;
}
.sp-stop .sp-dot {
  width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  background: var(--off-white); border: 2px solid var(--anthrazit-soft);
  flex-shrink: 0; transition: all 0.2s ease; position: relative; z-index: 1;
}
.streckenplan:hover .sp-label,
.sp-stop.is-active .sp-label { opacity: 1; transform: none; }
.sp-stop.is-done .sp-dot { background: var(--anthrazit-soft); border-color: var(--anthrazit-soft); }
.sp-stop.is-active .sp-dot { background: var(--backstein); border-color: var(--backstein); box-shadow: 0 0 0 4px rgba(139,58,47,0.18); }
.sp-stop.is-active .sp-label { color: var(--anthrazit); border-color: var(--backstein); font-weight: 700; }

/* ==================================================================
   KONZEPT-DOSSIER — Komponenten für die zivile/strategische Überarbeitung
   ================================================================== */

/* ----- STATUS-LEGENDE & STATUS-TAGS ---------------------------- */
.status-legende {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin: 28px 0 0; padding: 0; list-style: none;
}
.status-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
  padding: 6px 11px 6px 10px; border: 1px solid var(--rule);
  background: var(--off-white); color: var(--anthrazit-soft);
  border-radius: 2px; white-space: nowrap;
}
.status-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-tag.bestand     { color: #3A6B4A; border-color: rgba(58,107,74,0.42); }
.status-tag.idee        { color: var(--backstein); border-color: rgba(139,58,47,0.42); }
.status-tag.pruefung    { color: #9A6A16; border-color: rgba(154,106,22,0.5); }
.status-tag.schritt     { color: var(--db-blau); border-color: rgba(27,58,95,0.42); }
.status-tag.perspektive { color: var(--aurora-lila); border-color: rgba(107,63,160,0.42); }
h2 .status-tag, h3 .status-tag { vertical-align: middle; margin-left: 12px; }

/* ----- SECTION-DARK (zivile, ruhige dunkle Sektion) ------------ */
.section-dark { background: var(--anthrazit); color: var(--off-white); border-top: none; }
.section-dark .eyebrow { color: var(--led-gelb); }
.section-dark .eyebrow::before { background: var(--led-gelb); }
.section-dark h2, .section-dark h3 { color: var(--off-white); }
.section-dark .lead { color: rgba(255,255,255,0.86); }
.section-dark p { color: rgba(255,255,255,0.78); }
.section-dark a:not(.btn) { color: var(--led-gelb); }
.section-dark .status-tag { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); }
.section-dark .info-box {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  border-left: 4px solid var(--led-gelb); padding: 22px 26px; margin: 26px 0;
  font-family: var(--font-serif); font-size: 16px; line-height: 1.5;
}

/* ----- BLAUE SECTION (DB-Blau, sachlich) ----------------------- */
.section-blau { background: var(--db-blau); color: var(--off-white); border-top: none; }
.section-blau .eyebrow { color: var(--led-gelb); }
.section-blau .eyebrow::before { background: var(--led-gelb); }
.section-blau h2, .section-blau h3 { color: var(--off-white); }
.section-blau .lead { color: rgba(255,255,255,0.88); }
.section-blau p { color: rgba(255,255,255,0.8); }

/* ----- KONZEPT-EINORDNUNG (24.06.) ----------------------------- */
.einordnung { background: var(--off-white); border: 1px solid var(--rule); border-top: 5px solid var(--db-blau); padding: clamp(28px,4vw,48px) clamp(28px,4vw,52px); margin-top: 36px; }
.einordnung .lead { font-size: clamp(20px,2vw,26px); max-width: 64ch; }
.einordnung .ja-nein { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 760px) { .einordnung .ja-nein { grid-template-columns: 1fr 1fr; } }
.ja-nein .jn { padding: 22px 24px; border: 1px solid var(--rule); background: var(--beige); }
.ja-nein .jn.ist { border-left: 4px solid #3A6B4A; }
.ja-nein .jn.nicht { border-left: 4px solid var(--backstein); }
.ja-nein .jn .jn-h { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin-bottom: 12px; }
.ja-nein .jn.ist .jn-h { color: #3A6B4A; }
.ja-nein .jn.nicht .jn-h { color: var(--backstein); }
.ja-nein .jn p { font-size: 15px; line-height: 1.5; margin: 0; color: var(--anthrazit-soft); }

/* ----- ÖFFENTLICHER NUTZEN ------------------------------------- */
.nutzen-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 700px) { .nutzen-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .nutzen-grid { grid-template-columns: repeat(3, 1fr); } }
.nutzen { background: var(--off-white); padding: 26px 26px 28px; border-top: 3px solid var(--db-blau); }
.nutzen .nz-icon { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--db-blau); font-weight: 700; margin-bottom: 12px; }
.nutzen h3 { font-size: 23px; margin-bottom: 10px; letter-spacing: 0.02em; }
.nutzen p { font-size: 15px; line-height: 1.55; color: var(--anthrazit-soft); margin: 0; }

/* ----- PHASENMODELL -------------------------------------------- */
.phasen { margin-top: 44px; border-top: 1px solid var(--rule); }
.phase { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .phase { grid-template-columns: 150px 1fr; } }
.phase .ph-key { padding: 26px 24px 22px; background: var(--off-white); border-left: 4px solid var(--backstein); display: flex; flex-direction: column; gap: 14px; }
.phase .ph-num { font-family: var(--font-head); font-size: 56px; line-height: 0.78; color: var(--backstein); letter-spacing: 0.01em; }
.phase .ph-num small { display: block; font-size: 13px; letter-spacing: 0.18em; color: var(--anthrazit-soft); margin-top: 8px; }
.phase .ph-body { padding: 26px 28px 30px; }
.phase .ph-body h3 { font-size: 26px; margin-bottom: 12px; }
.phase .ph-body p { font-size: 15.5px; line-height: 1.55; color: var(--anthrazit-soft); margin: 0; }
.phase:nth-child(1) .ph-key { border-left-color: var(--db-blau); }
.phase:nth-child(1) .ph-num { color: var(--db-blau); }

/* ----- RECHTSSICHER / VOR-ORT-TERMIN --------------------------- */
.vor-ort { margin-top: 34px; background: var(--db-blau); color: #fff; padding: clamp(28px,3.5vw,40px); border-left: 5px solid var(--led-gelb); }
.vor-ort .vo-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--led-gelb); font-weight: 700; margin-bottom: 14px; }
.vor-ort p { font-family: var(--font-serif); font-size: clamp(17px,1.7vw,21px); line-height: 1.5; margin: 0; color: rgba(255,255,255,0.94); }
.trenn-prinzip { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 760px) { .trenn-prinzip { grid-template-columns: 1fr 1fr; } }
.trenn-prinzip .tp { background: var(--off-white); border: 1px solid var(--rule); padding: 24px 26px; }
.trenn-prinzip .tp h3 { font-size: 22px; margin-bottom: 10px; }
.trenn-prinzip .tp p { font-size: 15px; line-height: 1.55; color: var(--anthrazit-soft); margin: 0; }

/* ----- OFFENE PUNKTE (Tabelle) --------------------------------- */
.klaeren { margin-top: 36px; border: 1px solid var(--rule); background: var(--off-white); overflow-x: auto; }
.klaeren table { width: 100%; border-collapse: collapse; min-width: 680px; }
.klaeren th, .klaeren td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.klaeren tr:last-child td { border-bottom: none; }
.klaeren th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--anthrazit-soft); background: var(--beige); font-weight: 700; }
.klaeren td.thema { font-weight: 600; font-size: 16px; width: 28%; }
.klaeren td.next { font-size: 15px; color: var(--anthrazit-soft); line-height: 1.5; }
.klaeren td.statuscol { width: 1%; white-space: nowrap; }

/* ----- WAS WIR VON DER STADT BRAUCHEN -------------------------- */
.braucht { counter-reset: br; list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.18); }
.braucht li { counter-increment: br; padding: 22px 8px 22px 60px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.18); font-size: clamp(16px,1.7vw,19px); line-height: 1.5; color: rgba(255,255,255,0.92); }
.braucht li::before { content: counter(br,decimal-leading-zero); position: absolute; left: 8px; top: 22px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--led-gelb); }
.braucht.on-light { border-top-color: var(--rule); }
.braucht.on-light li { color: var(--anthrazit); border-bottom-color: var(--rule); }
.braucht.on-light li::before { color: var(--backstein); }

/* ----- FAQ ----------------------------------------------------- */
.faq { margin-top: 40px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { padding: 22px 0; cursor: pointer; font-family: var(--font-head); font-size: clamp(20px,2.3vw,28px); letter-spacing: 0.02em; line-height: 1.1; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; color: var(--anthrazit); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 26px; color: var(--backstein); flex-shrink: 0; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { color: var(--backstein); }
.faq .faq-a { padding: 0 0 26px; max-width: 72ch; }
.faq .faq-a p { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; margin: 0 0 0.8em; }
.faq .faq-a p:last-child { margin-bottom: 0; }

/* ----- BETEILIGUNG (ruhig, ohne Preis-Tabelle) ----------------- */
.beteiligung-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 800px) { .beteiligung-grid { grid-template-columns: repeat(3, 1fr); } }
.bet-card { background: var(--off-white); border: 1px solid var(--rule); padding: 28px 26px 30px; display: flex; flex-direction: column; }
.bet-card .nr { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--anthrazit-soft); margin-bottom: 12px; }
.bet-card h3 { font-size: 24px; margin-bottom: 12px; }
.bet-card p { font-size: 15px; line-height: 1.55; color: var(--anthrazit-soft); flex: 1; margin: 0 0 18px; }
.bet-card .cta { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--backstein); text-decoration: none; border-bottom: 1px solid var(--backstein); padding-bottom: 4px; align-self: flex-start; }
.bet-card .cta:hover { color: var(--anthrazit); border-color: var(--anthrazit); }

/* ----- RECHTLICHE ENTWURFS-SEITEN ------------------------------ */
.legal-body { max-width: 840px; }
.legal-body h2 { font-size: clamp(26px,3vw,40px); margin-top: 52px; }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body h3 { font-size: 21px; margin-top: 30px; letter-spacing: 0.02em; }
.legal-body p { font-size: 16px; line-height: 1.65; max-width: 70ch; }
.legal-field { display: block; background: #FBF3DE; border: 1px dashed var(--backstein); color: var(--backstein); font-family: var(--font-mono); font-size: 13px; padding: 11px 15px; margin: 8px 0 16px; letter-spacing: 0.01em; line-height: 1.5; border-radius: 2px; }
.legal-note { background: var(--off-white); border-left: 4px solid var(--led-gelb); padding: 20px 24px; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; margin: 28px 0; color: var(--anthrazit-soft); }
.legal-note strong { color: var(--anthrazit); }
.legal-data { background: var(--off-white); border-left: 4px solid var(--led-gruen); padding: 16px 20px; font-size: 16px; line-height: 1.7; margin: 8px 0 16px; max-width: 70ch; }
.legal-data a { color: inherit; }

/* ----- HERO-ZUSATZNOTIZ & PARTNER-STRIP-LABEL ------------------ */
.hero-sub-note { font-family: var(--font-serif); font-style: italic; font-size: clamp(15px,1.5vw,18px); color: var(--anthrazit-soft); max-width: 52ch; margin: -6px 0 4px; }
.partner-strip-inner .ps-label { font-weight: 700; color: var(--anthrazit); letter-spacing: 0.12em; }
.partner-strip-inner .ps-note { flex-basis: 100%; text-align: center; font-style: normal; letter-spacing: 0.06em; opacity: 0.7; margin-top: 6px; text-transform: none; font-size: 10.5px; }

/* ==================================================================
   FAHRPLAN-REDESIGN — 7 Stationen, Anzeigetafel, Heute/Möglich
   ================================================================== */

/* ----- STATION-KOPF (Streckenmarke je Abschnitt) --------------- */
.station-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.station-head .st-no {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--db-blau); color: var(--led-gelb);
  font-family: var(--font-head); font-size: 28px; line-height: 1;
  box-shadow: 0 0 0 4px rgba(27,58,95,0.12);
}
.station-head .st-meta { display: flex; flex-direction: column; gap: 2px; }
.station-head .st-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--anthrazit-soft); }
.station-head .st-name { font-family: var(--font-head); font-size: clamp(22px,2.4vw,30px); letter-spacing: 0.03em; line-height: 1; color: var(--anthrazit); text-transform: uppercase; }
.section-dark .station-head .st-no, .section-blau .station-head .st-no { background: var(--led-gelb); color: var(--db-blau); box-shadow: 0 0 0 4px rgba(244,184,60,0.16); }
.section-dark .station-head .st-kicker, .section-blau .station-head .st-kicker { color: rgba(255,255,255,0.6); }
.section-dark .station-head .st-name, .section-blau .station-head .st-name { color: #fff; }

/* ----- ANZEIGETAFEL (Hero-Abfahrtsboard, Split-Flap) ----------- */
.hero-board {
  background: #0c0c0c;
  border: 1px solid rgba(244,184,60,0.18);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6), 0 24px 60px -28px rgba(0,0,0,0.7);
  padding: clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px) clamp(20px,2.8vw,30px);
}
.hero-board .ab-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(244,184,60,0.22);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(244,184,60,0.62);
}
.hero-board .ab-head .blink { color: var(--led-rot); animation: blink 1.4s ease-in-out infinite; }
.ab-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px 18px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(244,184,60,0.1); }
.ab-row:last-child { border-bottom: none; }
.ab-row .ab-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244,184,60,0.55); padding-top: 4px; }
.ab-row .ab-value { font-family: var(--font-head); font-size: clamp(19px,2vw,27px); line-height: 1.1; letter-spacing: 0.03em; color: var(--led-gelb); text-shadow: 0 0 14px rgba(244,184,60,0.3); text-transform: uppercase; display: flex; flex-wrap: wrap; }
.ab-row .ab-value .flap { display: inline-block; perspective: 200px; }
.ab-row .ab-value .flap-inner { display: inline-block; transform-origin: center; }
.ab-row.is-flipping .flap-inner { animation: flapIn 0.42s cubic-bezier(0.4,0,0.2,1) both; }
@keyframes flapIn { 0% { transform: rotateX(-90deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: rotateX(0); opacity: 1; } }
@media (max-width: 540px) {
  .ab-row { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
  .ab-row .ab-value { font-size: 19px; }
}

/* ----- PROBLEM / EXTERNES ZITAT (Knut Abraham) ----------------- */
.medien-grid { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 38px; align-items: start; }
@media (min-width: 860px) { .medien-grid { grid-template-columns: 1.15fr 1fr; } }
.post-card {
  background: var(--off-white); border: 1px solid var(--rule);
  border-top: 4px solid var(--db-blau); padding: 24px 26px 26px;
}
.post-card .pc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.post-card .pc-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--db-blau); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-size: 20px; }
.post-card .pc-who { font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--anthrazit); }
.post-card .pc-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--anthrazit-soft); margin-top: 2px; }
.post-card .pc-placeholder {
  background: repeating-linear-gradient(135deg, #eef2f7 0 12px, #e4ebf3 12px 24px);
  border: 1px dashed var(--db-blau); border-radius: 3px;
  padding: 26px 22px; text-align: center; margin-bottom: 14px;
}
.post-card .pc-placeholder span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; line-height: 1.6; color: var(--db-blau); }
.post-card .pc-body { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--anthrazit); }
.post-card .pc-link { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--db-blau); font-weight: 700; }

/* ----- QUELLEN-KARTEN (INSEK / SEK / ...) ---------------------- */
.quellen-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 640px) { .quellen-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .quellen-grid { grid-template-columns: repeat(4, 1fr); } }
.quelle { background: var(--off-white); border: 1px solid var(--rule); border-top: 4px solid var(--db-blau); padding: 24px 22px 24px; display: flex; flex-direction: column; }
.quelle .q-kuerzel { font-family: var(--font-head); font-size: 30px; letter-spacing: 0.03em; color: var(--db-blau); line-height: 0.9; margin-bottom: 10px; }
.quelle .q-titel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--anthrazit-soft); margin-bottom: 12px; }
.quelle p { font-size: 14px; line-height: 1.55; color: var(--anthrazit-soft); margin: 0; }
.quelle .q-src { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--db-blau); text-transform: uppercase; }
.quelle a.q-src { text-decoration: none; transition: color 0.18s ease; }
.quelle a.q-src:hover { color: var(--backstein); text-decoration: underline; }

/* ----- DER LANGE WEG (Hürden) ---------------------------------- */
.weg-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 38px; }
@media (min-width: 700px) { .weg-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .weg-grid { grid-template-columns: repeat(3, 1fr); } }
.huerde { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-left: 4px solid var(--led-gelb); padding: 22px 24px; }
.huerde .h-no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--led-gelb); margin-bottom: 10px; }
.huerde h3 { font-size: 21px; margin-bottom: 8px; color: #fff; letter-spacing: 0.02em; }
.huerde p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; }

/* ----- WER VERANTWORTUNG ÜBERNIMMT (Team) ---------------------- */
.team-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 38px; }
@media (min-width: 640px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(5, 1fr); } }
.team-card { background: var(--off-white); padding: 26px 22px 24px; border-top: 4px solid var(--backstein); display: flex; flex-direction: column; }
.team-card:nth-child(1) { border-top-color: var(--db-blau); }
.team-card:nth-child(2) { border-top-color: var(--anthrazit); }
.team-card:nth-child(3) { border-top-color: var(--aurora-pink); }
.team-card:nth-child(4) { border-top-color: var(--aurora-lila); }
.team-card:nth-child(5) { border-top-color: var(--led-gruen); }
.team-card .tc-rolle { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--anthrazit-soft); margin-bottom: 10px; }
.team-card h3 { font-size: 20px; line-height: 1.05; margin-bottom: 12px; letter-spacing: 0.02em; }
.team-card p { font-size: 14px; line-height: 1.55; color: var(--anthrazit-soft); margin: 0; }

/* ----- HEUTE / MÖGLICH — Vergleichs-Slider --------------------- */
.vergleich { position: relative; margin-top: 38px; aspect-ratio: 16/10; overflow: hidden; background: var(--anthrazit); border: 1px solid var(--rule); user-select: none; touch-action: pan-y; }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vergleich .vg-moeglich { clip-path: inset(0 0 0 var(--vg, 50%)); }
.vergleich .vg-tag { position: absolute; top: 14px; z-index: 4; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 11px; color: #fff; background: rgba(0,0,0,0.6); }
.vergleich .vg-tag.heute { left: 14px; }
.vergleich .vg-tag.moeglich { right: 14px; color: var(--db-blau); background: var(--led-gelb); }
.vergleich .vg-divider { position: absolute; top: 0; bottom: 0; left: var(--vg, 50%); width: 2px; background: var(--led-gelb); z-index: 5; transform: translateX(-1px); box-shadow: 0 0 12px rgba(244,184,60,0.6); }
.vergleich .vg-handle { position: absolute; top: 50%; left: var(--vg, 50%); z-index: 6; width: 46px; height: 46px; border-radius: 50%; background: var(--led-gelb); color: var(--db-blau); display: grid; place-items: center; transform: translate(-50%,-50%); cursor: ew-resize; box-shadow: 0 4px 16px rgba(0,0,0,0.4); font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.vergleich .vg-range { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.vergleich-cap { margin-top: 14px; }

/* ----- ZIELBILD — Nutzungs-Ideen mit Status -------------------- */
.ziel-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 600px) { .ziel-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ziel-grid { grid-template-columns: repeat(4, 1fr); } }
.ziel-card { background: var(--off-white); border: 1px solid var(--rule); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.ziel-card h3 { font-size: 19px; margin: 0; letter-spacing: 0.02em; }
.ziel-card p { font-size: 13.5px; line-height: 1.5; color: var(--anthrazit-soft); margin: 0; flex: 1; }
.ziel-card .status-tag { align-self: flex-start; }

/* ----- WAS JETZT GEBRAUCHT WIRD (Ask-Karten) ------------------- */
.ask-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 38px; }
@media (min-width: 700px) { .ask-grid { grid-template-columns: 1fr 1fr; } }
.ask-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); padding: 26px 26px; display: flex; gap: 18px; align-items: flex-start; }
.ask-card .ask-no { flex-shrink: 0; font-family: var(--font-head); font-size: 40px; line-height: 0.8; color: var(--led-gelb); }
.ask-card .ask-body h3 { font-size: 21px; margin-bottom: 8px; color: #fff; letter-spacing: 0.02em; }
.ask-card .ask-body p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.8); margin: 0; }
.ask-card.kern { grid-column: 1 / -1; background: var(--led-gelb); border-color: var(--led-gelb); }
.ask-card.kern .ask-no { color: var(--db-blau); }
.ask-card.kern .ask-body h3 { color: var(--db-blau); }
.ask-card.kern .ask-body p { color: rgba(15,42,71,0.85); }

/* ----- AUCH HUMOR BRAUCHT RETTUNGSWEGE ------------------------- */
.rettung { background: var(--db-blau); color: #fff; border-top: none; }
.rettung .eyebrow { color: var(--led-gelb); }
.rettung .eyebrow::before { background: var(--led-gelb); }
.rettung h2 { color: #fff; }
.rettung .lead { color: rgba(255,255,255,0.9); }
.rettung p { color: rgba(255,255,255,0.8); }
.rettung-pruef { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.rettung-pruef span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 13px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }

/* ----- AKKORDEON (Mitglieder-Pakete eingeklappt) --------------- */
.akkordeon { margin-top: 32px; border: 1px solid var(--rule); background: var(--off-white); }
.akkordeon summary { cursor: pointer; padding: 20px 24px; font-family: var(--font-head); font-size: 22px; letter-spacing: 0.03em; color: var(--anthrazit); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after { content: "+"; font-family: var(--font-mono); font-size: 24px; color: var(--backstein); }
.akkordeon details[open] summary::after { content: "–"; }
.akkordeon .akk-body { padding: 0 24px 24px; }

/* ----- STAGGER-REVEAL (Punkte erscheinen nacheinander) --------- */
.reveal .step { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.in .step { opacity: 1; transform: none; }
.reveal.in .step:nth-child(1) { transition-delay: 0.04s; }
.reveal.in .step:nth-child(2) { transition-delay: 0.12s; }
.reveal.in .step:nth-child(3) { transition-delay: 0.20s; }
.reveal.in .step:nth-child(4) { transition-delay: 0.28s; }
.reveal.in .step:nth-child(5) { transition-delay: 0.36s; }
.reveal.in .step:nth-child(6) { transition-delay: 0.44s; }
.reveal.in .step:nth-child(7) { transition-delay: 0.52s; }
.reveal.in .step:nth-child(8) { transition-delay: 0.60s; }
.no-reveal .step, .reveal.in .step { opacity: 1; }
@media print { .step { opacity: 1 !important; transform: none !important; } }

/* ----- HERO-FOTO unter der Anzeigetafel ------------------------ */
.hero-photo { display: flex; flex-direction: column; }
.hero-board { margin: clamp(18px,2.6vw,30px) clamp(16px,2.4vw,28px) 0; }
.hero-photo-fig { position: relative; margin: clamp(16px,2.4vw,24px) 0 0; flex: 1 1 auto; min-height: 230px; overflow: hidden; }
.hero-photo-fig img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(0.96); }
@media (min-width:1024px){ .hero-photo-fig { min-height: 300px; } }

/* ----- ÜBERTRAGBARES MODELL (Genossenschaft + Gewerbe) --------- */
.modell { margin-top: clamp(44px,5.5vw,76px); }
.modell .modell-intro { max-width: 64ch; }
.modell-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width:640px){ .modell-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width:1024px){ .modell-grid { grid-template-columns: repeat(4,1fr); } }
.modell-card { background: var(--off-white); border: 1px solid var(--rule); border-top: 4px solid var(--backstein); padding: 26px 24px; display: flex; flex-direction: column; }
.modell-card:nth-child(1){ border-top-color: var(--db-blau); }
.modell-card:nth-child(2){ border-top-color: var(--backstein); }
.modell-card:nth-child(3){ border-top-color: var(--aurora-lila); }
.modell-card:nth-child(4){ border-top-color: var(--led-gruen); }
.modell-card .m-no { font-family: var(--font-head); font-size: 30px; line-height: 0.9; color: var(--rule); margin-bottom: 10px; }
.modell-card .m-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--anthrazit-soft); margin-bottom: 8px; }
.modell-card h3 { font-size: 21px; line-height: 1.05; margin-bottom: 12px; letter-spacing: 0.02em; }
.modell-card p { font-size: 14px; line-height: 1.55; color: var(--anthrazit-soft); margin: 0; }
.bruecke { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; padding: 22px 26px; background: var(--db-blau); color: #fff; border-left: 5px solid var(--led-gelb); }
.bruecke .bx { font-family: var(--font-head); font-size: clamp(17px,1.7vw,23px); letter-spacing: 0.03em; }
.bruecke .bx.end { color: var(--led-gelb); }
.bruecke .barrow { color: var(--led-gelb); font-family: var(--font-mono); font-weight: 700; font-size: 14px; }

/* ----- HOVER-LIFT für Karten ----------------------------------- */
.quelle, .team-card, .ziel-card, .huerde, .ask-card, .modell-card, .post-card, .cta-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.quelle:hover, .team-card:hover, .ziel-card:hover, .modell-card:hover, .cta-card:hover {
  transform: translateY(-4px); box-shadow: 0 16px 36px -16px rgba(46,42,38,0.32);
}
.huerde:hover, .ask-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.1); }
.ask-card.kern:hover { background: var(--led-gelb); }

/* ----- A11Y ----------------------------------------------------- */
:focus-visible { outline: 3px solid var(--led-gelb); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal .step { opacity: 1 !important; transform: none !important; }
}

/* ==================================================================
   REFINEMENT v5 — Hero-Bewegung, granulare Reveals, Akteure, Trägerschaft
   ================================================================== */

/* ----- HERO-HEADLINE · vom Warten zur Bewegung ----------------- */
.hero h1 { position: relative; }
.h1-wartet { color: var(--hero-accent, var(--backstein)); display: block; transition: color 0.7s ease 0.8s; }
body.js-anim .hero:not(.is-live) .h1-wartet { color: var(--anthrazit-soft); }
.hero-rail {
  position: relative; display: block; height: 3px; width: 100%; max-width: 440px;
  margin: 26px 0 6px; background: var(--rule); border-radius: 3px;
}
.hero-rail .rail-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: var(--hero-accent, var(--backstein)); border-radius: 3px;
  transition: width 1.15s cubic-bezier(0.42, 0, 0.16, 1);
}
body.js-anim .hero:not(.is-live) .hero-rail .rail-fill { width: 0; }
.hero-rail .rail-car {
  position: absolute; top: 50%; left: 100%; width: 15px; height: 15px;
  margin-left: -8px; border-radius: 50%; background: var(--led-gelb);
  box-shadow: 0 0 14px var(--led-gelb), 0 0 5px #fff;
  transform: translateY(-50%);
  transition: left 1.15s cubic-bezier(0.42, 0, 0.16, 1);
}
body.js-anim .hero:not(.is-live) .hero-rail .rail-car { left: 0; }

/* ----- GRANULARE REVEALS (data-rv) ----------------------------- */
.rv {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--rvd, 0s); will-change: opacity, transform;
}
.rv[data-rv="up"] { transform: translateY(24px); }
.rv[data-rv="zoom"] { transform: scale(0.975); }
.rv[data-rv="accent"] { transform: translateX(-16px); }
.rv.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; transform: none !important; } }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

/* ----- POLITIK-BEITRAG vs. MÖGLICHE ZUKUNFT -------------------- */
@media (min-width: 860px) { .medien-grid { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.post-card { display: flex; flex-direction: column; }
figure.post-card { margin: 0; }
.pc-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--db-blau); font-weight: 700; margin-bottom: 14px; display: block; }
.post-card .pc-body { margin: 4px 0 0; }
.pc-more { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; }
.pc-more summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--db-blau); display: inline-flex; align-items: center; gap: 8px; }
.pc-more summary::-webkit-details-marker { display: none; }
.pc-more summary::after { content: "+"; font-size: 16px; line-height: 1; }
.pc-more[open] summary::after { content: "\2013"; }
.pc-more .pc-img { margin-top: 14px; border: 1px solid var(--rule); border-radius: 4px; }
.post-card.moeglich { border-top-color: var(--backstein); }
.post-card.moeglich .pc-kicker { color: var(--backstein); }
.moeglich-frame { flex: 1 1 auto; min-height: 240px; margin: 0 0 14px; overflow: hidden; background: var(--anthrazit); }
.moeglich-frame img { width: 100%; height: 100%; object-fit: cover; }
.moeglich-cap { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.5; color: var(--anthrazit-soft); margin: 0; }
.moeglich-cap strong { color: var(--anthrazit); display: block; margin-bottom: 4px; font-size: 16px; }

/* ----- AKTEURE (Wer Verantwortung übernimmt) ------------------- */
.akteur-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 640px) { .akteur-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .akteur-grid { grid-template-columns: repeat(3, 1fr); } }
.akteur { background: var(--off-white); border: 1px solid var(--rule); border-top: 5px solid var(--backstein); padding: 30px 28px 26px; display: flex; flex-direction: column; }
.akteur:nth-child(1) { border-top-color: var(--db-blau); }
.akteur:nth-child(2) { border-top-color: var(--anthrazit); }
.akteur:nth-child(3) { border-top-color: var(--aurora-pink); }
.akteur:nth-child(4) { border-top-color: var(--aurora-lila); }
.akteur:nth-child(5) { border-top-color: var(--led-gruen); }
.akteur .ak-rolle { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--anthrazit-soft); font-weight: 700; margin-bottom: 12px; }
.akteur h3 { font-size: clamp(23px, 2.1vw, 29px); line-height: 1; margin-bottom: 14px; letter-spacing: 0.02em; }
.akteur .ak-lead { font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--anthrazit); margin: 0 0 6px; }
.akteur .ak-more { margin-top: auto; padding-top: 16px; }
.akteur .ak-more summary { cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--backstein); display: inline-flex; align-items: center; gap: 8px; }
.akteur .ak-more summary::-webkit-details-marker { display: none; }
.akteur .ak-more summary::after { content: "→"; display: inline-block; transition: transform 0.2s ease; }
.akteur .ak-more[open] summary::after { transform: rotate(90deg); }
.akteur .ak-more p { font-size: 14px; line-height: 1.55; color: var(--anthrazit-soft); margin: 14px 0 0; }
.ak-fazit { font-family: var(--font-serif); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--anthrazit); max-width: 72ch; margin: 34px 0 0; padding-left: 22px; border-left: 4px solid var(--backstein); }

/* ----- TRÄGER-CTA (sichtbarer Button statt Akkordeon) ---------- */
.traeger-cta { margin: 30px 0 10px; display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
.traeger-cta .btn { background: var(--backstein); border-color: var(--backstein); }
.traeger-cta .btn:hover { background: var(--backstein-dunkel); border-color: var(--backstein-dunkel); }
.traeger-cta .tc-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--anthrazit-soft); }

/* ----- NAV · Seiten-Link (Trägerschaft) ------------------------ */
.sb-nav a.sb-page { color: var(--led-gelb); border: 1px solid rgba(244, 184, 60, 0.5); padding: 4px 11px; border-radius: 2px; opacity: 1; }
.sb-nav a.sb-page:hover, .sb-nav a.sb-page.is-active { background: var(--led-gelb); color: var(--db-blau); }

/* ----- SCHLUSS-AKKORD · Claim ---------------------------------- */
.akkord .akkord-claim {
  font-family: var(--font-serif); font-style: normal;
  font-size: clamp(18px, 2vw, 25px); line-height: 1.45; color: var(--anthrazit);
  max-width: 34ch; margin: 20px auto 0; text-wrap: balance;
}

/* ----- TRÄGERSCHAFT-SEITE · Prinzip-Schritte ------------------- */
.prinzip-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 760px) { .prinzip-grid { grid-template-columns: repeat(3, 1fr); } }
.prinzip { background: var(--off-white); border: 1px solid var(--rule); border-top: 4px solid var(--db-blau); padding: 28px 26px; display: flex; flex-direction: column; }
.prinzip:nth-child(2) { border-top-color: var(--backstein); }
.prinzip:nth-child(3) { border-top-color: var(--led-gruen); }
.prinzip .pr-no { font-family: var(--font-head); font-size: 34px; line-height: 0.9; color: var(--rule); margin-bottom: 12px; }
.prinzip h3 { font-size: 23px; line-height: 1.05; margin-bottom: 12px; letter-spacing: 0.02em; }
.prinzip p { font-size: 14.5px; line-height: 1.55; color: var(--anthrazit-soft); margin: 0; }

/* ==================================================================
   BETEILIGUNGSPAKETE — Leiter von kleiner Geste zu Wahrzeichen
   Jedes Paket (Quelle: gehoert-uns-allen.html, 7 Pakete) mit
   möglichem Installations-Beitrag verknüpft. Tag/Nacht: site.css.
   ================================================================== */
.leiter-bruecke {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px;
  margin-top: 34px; padding: 18px 24px;
  background: var(--beige); border: 1px solid var(--rule);
  border-left: 5px solid var(--backstein);
}
.leiter-bruecke .lx { font-family: var(--font-head); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: 0.03em; color: var(--anthrazit); line-height: 1; }
.leiter-bruecke .lx.end { color: var(--backstein); }
.leiter-bruecke .larrow { color: var(--backstein); font-family: var(--font-mono); font-weight: 700; font-size: 14px; }

.paket-leiter { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 560px)  { .paket-leiter { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px)  { .paket-leiter { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .paket-leiter { grid-template-columns: repeat(4, 1fr); } }

.paket-karte {
  background: var(--off-white); border: 1px solid var(--rule);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.paket-karte:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(46,42,38,0.34); }

.pk-bild { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--anthrazit); cursor: zoom-in; }
.pk-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.2,0,0.2,1); }
.paket-karte:hover .pk-bild img, .pk-bild:focus-within img { transform: scale(1.05); }
.pk-stufe {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  color: #fff; background: rgba(0,0,0,0.62); padding: 5px 9px; border-radius: 2px;
}
.pk-stufe b { color: var(--led-gelb); }
.pk-patentag {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--db-blau); background: var(--led-gelb); padding: 5px 8px; border-radius: 2px;
}
.pk-wirkungslabel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(20,16,14,0.85), rgba(20,16,14,0));
  color: #fff; font-family: var(--font-head); font-size: 20px; letter-spacing: 0.03em; line-height: 1;
}

.pk-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.pk-name { font-size: 25px; margin: 0 0 12px; line-height: 1; }
.pk-zahlen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--rule); }
.pk-einlage { font-family: var(--font-head); font-size: 31px; line-height: 0.9; color: var(--backstein); letter-spacing: 0.02em; }
.pk-anteile { align-self: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--db-blau); border: 1px solid var(--rule); border-radius: 2px; padding: 3px 6px; line-height: 1; white-space: nowrap; }
.pk-monat { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--anthrazit-soft); }
.pk-fuer { font-size: 13.5px; line-height: 1.5; color: var(--anthrazit-soft); margin: 0 0 16px; }
.pk-wirkung { margin-top: auto; }
.pk-wirkung-h { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--backstein); margin-bottom: 7px; }
.pk-wirkung p { font-family: var(--font-serif); font-size: 14.5px; line-height: 1.5; color: var(--anthrazit); margin: 0; }
.pk-meter { display: flex; gap: 5px; margin-top: 16px; }
.pk-meter span { flex: 1; height: 4px; background: var(--rule); border-radius: 2px; }
.pk-meter span.on { background: var(--backstein); }

/* Höhere Stufen: dezenter Gold-Akzent (Wahrzeichen-Ebene) */
.paket-karte[data-tier="6"], .paket-karte[data-tier="7"] { border-color: rgba(246,197,68,0.6); }
.paket-karte[data-tier="7"] { box-shadow: 0 0 0 1px rgba(246,197,68,0.45); }
.paket-karte[data-tier="6"]:hover, .paket-karte[data-tier="7"]:hover { box-shadow: 0 18px 44px -18px rgba(246,197,68,0.5); }
.paket-karte[data-tier="5"] .pk-meter span.on,
.paket-karte[data-tier="6"] .pk-meter span.on,
.paket-karte[data-tier="7"] .pk-meter span.on { background: var(--aurora-gelb); }

@media (hover: none) { .pk-bild { cursor: pointer; } }

/* ==================================================================
   FÖRDERWEG-TILE (Akteur · institutioneller Akzent)
   ================================================================== */
.akteur.foerderweg { border-top-color: var(--db-blau); background: linear-gradient(180deg, rgba(27,58,95,0.05), transparent 55%), var(--off-white); }
.akteur .ak-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 0; }
.akteur .ak-links a {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--db-blau);
  text-decoration: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: 6px 9px; line-height: 1; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.akteur .ak-links a:hover { background: var(--db-blau); border-color: var(--db-blau); color: #fff; }

/* ==================================================================
   BESCHLUSSWEG · Entscheidungs-Dossier (Teil A / B / C)
   ================================================================== */
.teil-tag { font-family: var(--font-head); font-size: 30px; line-height: 0.8; color: var(--db-blau); }
.prinzip .teil-tag { margin-bottom: 6px; }

.dossier-doc {
  background: var(--off-white); border: 1px solid var(--rule);
  border-top: 5px solid var(--db-blau);
  padding: clamp(24px, 3.4vw, 44px); margin-top: 28px;
}
.dossier-doc .doc-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--db-blau); display: block; margin-bottom: 10px; }
.dossier-doc h2 { margin-top: 0; }
.dossier-doc .doc-betreff { font-family: var(--font-serif); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.4; color: var(--anthrazit); margin: 0 0 6px; }

.doc-meta { margin: 24px 0 4px; border-top: 1px solid var(--rule); }
.doc-meta .row { display: grid; grid-template-columns: 1fr; gap: 3px 18px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 620px) { .doc-meta .row { grid-template-columns: 210px 1fr; align-items: baseline; } }
.doc-meta dt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--anthrazit-soft); margin: 0; }
.doc-meta dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--anthrazit); }

.doc-sub { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--backstein); margin: 30px 0 4px; }

.beschluss-ol { counter-reset: bsl; list-style: none; margin: 14px 0 0; padding: 0; }
.beschluss-ol > li {
  counter-increment: bsl; position: relative; padding: 18px 0 18px 58px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-serif); font-size: 16.5px; line-height: 1.62; color: var(--anthrazit);
}
.beschluss-ol > li:first-child { border-top: none; }
.beschluss-ol > li::before {
  content: counter(bsl); position: absolute; left: 0; top: 16px;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 20px; color: var(--db-blau);
  border: 1.5px solid var(--db-blau); border-radius: 50%; line-height: 1;
}

.schritt-liste { counter-reset: stp; list-style: none; margin: 16px 0 0; padding: 0; }
.schritt-liste li {
  counter-increment: stp; position: relative; padding: 0 0 20px 42px;
  font-size: 15.5px; line-height: 1.55; color: var(--anthrazit);
}
.schritt-liste li:last-child { padding-bottom: 0; }
.schritt-liste li::before {
  content: counter(stp); position: absolute; left: 0; top: -1px;
  width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: #fff;
  background: var(--backstein); border-radius: 50%; line-height: 1;
}
.schritt-liste li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 27px; bottom: 0; width: 1px; background: var(--rule); }

.doc-note { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; letter-spacing: 0.02em; color: var(--anthrazit-soft); border-left: 3px solid var(--rule); padding: 4px 0 4px 16px; margin-top: 26px; }
.empfehlung-box { background: var(--beige); border: 1px solid var(--rule); border-left: 5px solid var(--led-gruen); padding: 24px 28px; margin-top: 26px; }
.empfehlung-box .eb-h { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #3A6B4A; margin-bottom: 10px; }
.empfehlung-box p { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; color: var(--anthrazit); margin: 0; }

.glossar { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--anthrazit-soft); font-style: normal; }