/* Deltriva Homepage
   Farben aus apps/gemeinsam/theme/tokens.ts (Schema deltriva). Schrift: Archivo (breit) für Titel, Inter für Text und Wortmarke.
   Bewegung nur an drei Stellen: Ablauf-Bühne im Kopf, Name-Geschichte (Delta · tri · via), Fortschrittslinie im Vorgehen. */

@font-face { font-family: "Inter"; src: url("schrift/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("schrift/inter-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; src: url("schrift/archivo-latin-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("schrift/archivo-latin-ext-wdth-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --grund: #f3f5f5; --flaeche: #ffffff; --flaeche2: #eaf0f0; --rahmen: #d6dfe0; --rahmen-stark: #b5c3c5;
  --text: #1a2629; --schwach: #56676b;
  --primaer: #0f6a70; --primaer-hover: #0b5358; --primaer-zart: #e1efef; --auf-primaer: #ffffff;
  --akzent: #d9862f; --akzent-text: #94510f; --akzent-zart: #fbeedd;
  --band: #12383e; --band-tief: #0b2a2f; --band-text: #f2f6f6; --band-schwach: rgba(242,246,246,.74); --band-rahmen: rgba(242,246,246,.16); --band-akzent: #e8a24a;
  --positiv: #23704a; --positiv-zart: #e3f2ea;
  /* Logofarben: m1 Petrol dunkel (Prozess), m2 Petrol (Technik), m3 Kupfer (Mensch) */
  --m1: #12383e; --m2: #0f6a70; --m3: #d9862f;
  --titel: "Archivo", "Inter", system-ui, sans-serif;
  --breite: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #0e1517; --flaeche: #151e21; --flaeche2: #1b262a; --rahmen: #2a393d; --rahmen-stark: #3b4f54;
    --text: #e3eaeb; --schwach: #9fb0b3;
    --primaer: #5fb3b6; --primaer-hover: #7cc4c6; --primaer-zart: #1f3a3d; --auf-primaer: #0a1f23;
    --akzent: #e8a24a; --akzent-text: #f0b86a; --akzent-zart: #3a2a17;
    --band: #0b2a2f; --band-tief: #071c20;
    --positiv: #7ccf9f; --positiv-zart: #183226;
    --m1: #e3eaeb; --m2: #5fb3b6; --m3: #e8a24a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #0e1517; --flaeche: #151e21; --flaeche2: #1b262a; --rahmen: #2a393d; --rahmen-stark: #3b4f54;
  --text: #e3eaeb; --schwach: #9fb0b3;
  --primaer: #5fb3b6; --primaer-hover: #7cc4c6; --primaer-zart: #1f3a3d; --auf-primaer: #0a1f23;
  --akzent: #e8a24a; --akzent-text: #f0b86a; --akzent-zart: #3a2a17;
  --band: #0b2a2f; --band-tief: #071c20;
  --positiv: #7ccf9f; --positiv-zart: #183226;
  --m1: #e3eaeb; --m2: #5fb3b6; --m3: #e8a24a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { font: 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--grund); color: var(--text);
  -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--primaer); text-underline-offset: 3px; }
a:hover { color: var(--primaer-hover); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
svg { display: block; }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
ul, ol { list-style: none; }
.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 16px; }
@media (min-width: 760px) { .rahmen { padding: 0 32px; } }

h1, h2, h3 { font-family: var(--titel); font-stretch: 112%; font-weight: 680; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
h2 { font-size: clamp(25px, 2.7vw, 34px); }
h3 { font-size: 17px; font-stretch: 105%; letter-spacing: -0.01em; line-height: 1.3; }
.leit { font-size: clamp(16px, 1.15vw, 17px); color: var(--schwach); max-width: 62ch; text-wrap: pretty; }
.abschnitt { padding: 84px 0; }
@media (max-width: 760px) { .abschnitt { padding: 56px 0; } }
.abschnitt-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: 36px; }
.abschnitt-kopf .leit { justify-self: start; }
@media (max-width: 900px) { .abschnitt-kopf { grid-template-columns: 1fr; margin-bottom: 40px; } }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 Inter, sans-serif; border-radius: 9px; padding: 13px 19px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; white-space: nowrap; }
.knopf-primaer, .knopf-primaer:hover { background: var(--primaer); color: var(--auf-primaer); }
.knopf-primaer:hover { background: var(--primaer-hover); }
.knopf-zweit { color: var(--text); border-color: var(--rahmen-stark); }
.knopf-zweit:hover { color: var(--text); background: var(--flaeche); }
.knopf-klein { padding: 10px 16px; font-size: 14.5px; }

/* ---------- Kopfleiste ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--grund) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kopf.gescrollt { border-bottom-color: var(--rahmen); }
.kopf .rahmen { display: flex; align-items: center; gap: 20px; height: 68px; }
.marke { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--m1); font: 720 21px/1 Inter, sans-serif; letter-spacing: -0.035em; }
.marke:hover { color: var(--m1); }
.marke svg { width: 27px; height: 27px; }
.marke i { font-style: normal; color: var(--m3); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { color: var(--schwach); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.nav a:hover { color: var(--text); background: var(--flaeche2); }
.symbolknopf { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--rahmen); background: transparent; color: var(--schwach);
  display: grid; place-items: center; cursor: pointer; flex: none; }
.symbolknopf:hover { color: var(--text); background: var(--flaeche2); }
.symbolknopf svg { width: 18px; height: 18px; }
.modus .mond { display: none; }
:root[data-theme="dark"] .modus .sonne { display: none; }
:root[data-theme="dark"] .modus .mond { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .modus .sonne { display: none; }
  :root:not([data-theme="light"]) .modus .mond { display: block; }
}
.menue { display: none; }
@media (max-width: 960px) {
  .nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 16px;
    background: var(--flaeche); border-bottom: 1px solid var(--rahmen); }
  .nav.offen { display: flex; }
  .nav a { padding: 13px 12px; font-size: 16px; }
  .modus { margin-left: auto; }
  .menue { display: grid; }
  .kopf .knopf-primaer { display: none; }
}

/* Rolltext in der Navigation */
.roll { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3; vertical-align: bottom; }
.roll > span { display: block; text-shadow: 0 1.3em currentColor; transition: transform .35s cubic-bezier(.6,0,.2,1); }
.nav a:hover .roll > span, .nav a:focus-visible .roll > span { transform: translateY(-1.3em); }

/* ---------- Kopfbereich ---------- */
/* Dunkle Bänder: gleiche Token-Namen, dunkle Werte – Knöpfe und Text darin funktionieren unverändert */
.dunkel { --grund: #0b2226; --flaeche: #102d32; --flaeche2: rgba(242,246,246,.07); --rahmen: rgba(242,246,246,.12); --rahmen-stark: rgba(242,246,246,.26);
  --text: #f2f6f6; --schwach: rgba(242,246,246,.7); --primaer: #5fb3b6; --primaer-hover: #7cc4c6; --auf-primaer: #071c20;
  --akzent: #e8a24a; --m1: #f2f6f6; --m2: #5fb3b6; --m3: #e8a24a; color: var(--text); color-scheme: dark; }

/* Kopf: dunkles Band mit Haarlinien-Raster und zwei Lichthöfen (Petrol oben rechts, Kupfer unten links) */
.held { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 0; margin-top: -68px; padding-top: calc(68px + 56px);
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(15,106,112,.55), transparent 62%),
    radial-gradient(700px 380px at 6% 104%, rgba(217,134,47,.13), transparent 60%),
    #0b2226; }
.held::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(242,246,246,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(242,246,246,.045) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, #000 30%, transparent 78%); }
.held h1 { font-size: clamp(34px, 4.4vw, 58px); font-stretch: 112%; font-weight: 680; letter-spacing: -0.03em; line-height: 1.02; }
.held h1 .unterstrich { position: relative; display: inline-block; }
.held h1 .unterstrich svg { position: absolute; left: -2%; right: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; }
.held h1 .unterstrich path { fill: none; stroke: var(--akzent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: strich 1.1s .5s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes strich { to { stroke-dashoffset: 0; } }
.held-plakette { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px 6px 6px; border-radius: 999px;
  font-size: 13.5px; color: var(--schwach); background: rgba(242,246,246,.05); border: 1px solid var(--rahmen); position: relative; overflow: hidden; }
.held-plakette b { font-weight: 600; color: var(--text); background: rgba(232,162,74,.16); color: #f0b86a; border-radius: 999px; padding: 3px 9px; }
/* Lichtpunkt, der einmal um die Plakette läuft */
.held-plakette::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--winkel, 0deg), transparent 0 80%, rgba(232,162,74,.9) 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: umlauf 5s linear infinite; }
@property --winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes umlauf { to { --winkel: 360deg; } }
.held-unter { display: grid; justify-items: start; gap: 24px; margin: 20px 0 44px; }
.held-unter .leit { color: var(--schwach); max-width: 60ch; }
.held-unter .aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.held .knopf-primaer { box-shadow: 0 0 0 1px rgba(95,179,182,.4), 0 10px 30px -10px rgba(95,179,182,.6); }
@media (max-width: 900px) { .held { padding-top: calc(68px + 32px); } }

/* Laufband „Wir binden an“ am Fuß des Kopfbands */
.laufband { margin-top: 64px; border-top: 1px solid var(--rahmen); padding: 18px 0; display: flex; align-items: center; gap: 28px; }
.laufband-titel { flex: none; font-size: 13.5px; color: var(--schwach); padding-left: max(16px, calc((100vw - var(--breite)) / 2 + 32px)); }
.laufband-fenster { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.laufband-spur { display: flex; width: max-content; animation: laufen 48s linear infinite; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband-spur span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font: 560 14.5px/1 Inter, sans-serif; color: rgba(242,246,246,.82); }
.laufband-spur span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--akzent); opacity: .7; }
@keyframes laufen { to { transform: translateX(-50%); } }
@media (max-width: 700px) { .laufband { flex-direction: column; align-items: stretch; gap: 12px; } .laufband-titel { padding-left: 16px; } }

/* Kopfleiste über dem dunklen Kopf: dunkle Werte, bis der Kopf vorbei ist */
.kopf.ueber-dunkel { --grund: #0b2226; --flaeche: #102d32; --flaeche2: rgba(242,246,246,.08); --rahmen: rgba(242,246,246,.14);
  --text: #f2f6f6; --schwach: rgba(242,246,246,.74); --primaer: #5fb3b6; --primaer-hover: #7cc4c6; --auf-primaer: #071c20;
  --m1: #f2f6f6; --m2: #5fb3b6; --m3: #e8a24a; background: color-mix(in srgb, #0b2226 55%, transparent); }
.kopf.ueber-dunkel:not(.gescrollt) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.kopf { transition: border-color .2s, background-color .3s; }

/* ---------- Leitsatz ---------- */
.leitsatz { padding: 84px 0; }
.leitsatz p { font-family: var(--titel); font-stretch: 110%; font-weight: 580; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; letter-spacing: -0.02em;
  max-width: 24em; text-wrap: balance; }
.leitsatz p + p { margin-top: 28px; font-family: Inter, sans-serif; font-stretch: 100%; font-weight: 400; font-size: clamp(16px, 1.15vw, 17px); line-height: 1.6;
  letter-spacing: 0; color: var(--schwach); max-width: 62ch; }

/* ---------- Vorgehen (Zeitleiste mit Fortschritt) ---------- */
.vorgehen { background: var(--flaeche); border-block: 1px solid var(--rahmen); }
.zeitleiste { position: relative; display: grid; gap: 0; --fortschritt: 0; }
.zeitleiste::before, .zeitleiste::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; }
.zeitleiste::before { background: var(--rahmen); }
.zeitleiste::after { background: var(--primaer); transform-origin: top; transform: scaleY(var(--fortschritt)); }
.etappe { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 24px; padding-bottom: 44px; }
.etappe:last-child { padding-bottom: 0; }
.etappe-punkt { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--flaeche); border: 2px solid var(--rahmen-stark); color: var(--schwach); font: 700 16px/1 Inter, sans-serif; transition: border-color .3s, color .3s, background-color .3s; }
.etappe.erreicht .etappe-punkt { border-color: var(--primaer); color: var(--primaer); }
.etappe.ziel.erreicht .etappe-punkt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.etappe-inhalt { padding-top: 9px; max-width: 840px; }
.etappe-inhalt h3 { font-size: clamp(18px, 1.6vw, 21px); font-stretch: 110%; }
.etappe-inhalt > p:not(.ergebnis), .mit-ordner > div > p:not(.ergebnis) { color: var(--schwach); margin-top: 10px; max-width: 64ch; }
.etappe.schwer .etappe-inhalt h3 { font-size: clamp(20px, 1.9vw, 24px); }
/* Ordner in der Prozessanalyse: Rückwand, Unterlagen, Klappe (Scharnier unten).
   Zeigen: Klappe gibt nach, Blätter heben sich. Klick: Blätter liegen 2×2 darüber aus (--ox/--oy je Blatt). */
.etappe-inhalt.mit-ordner { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px 56px; align-items: start; }
@media (max-width: 1000px) { .etappe-inhalt.mit-ordner { grid-template-columns: minmax(0, 1fr); } }

.pruefliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin-top: 22px; }
@media (max-width: 700px) { .pruefliste { grid-template-columns: 1fr; } .etappe { grid-template-columns: 40px minmax(0,1fr); gap: 18px; }
  .etappe-punkt { width: 40px; height: 40px; } .zeitleiste::before, .zeitleiste::after { left: 19px; } }
.pruefliste li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; }
.pruefliste svg { width: 18px; height: 18px; margin-top: 3px; color: var(--primaer); }
.ergebnis { margin-top: 22px; display: flex; width: fit-content; max-width: 100%; gap: 10px; align-items: baseline; font-size: 14.5px; color: var(--text);
  background: var(--flaeche2); padding: 10px 14px; border-radius: 10px; }
.ergebnis b { font-weight: 650; }

/* ---------- Name-Geschichte (Delta · tri · via) ---------- */
.name { background: var(--band); color: var(--band-text); }
.name h2 { color: var(--band-text); max-width: 16em; }
.name .leit { color: var(--band-schwach); margin-top: 18px; }
.geschichte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-top: 36px; }
.figur { height: 340px; display: grid; place-items: center; }
.figur svg { width: min(100%, 320px); height: auto; overflow: visible; }
.figur .kontur { fill: none; stroke: var(--band-akzent); stroke-width: .9; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1), opacity .6s; }
.figur .teil { opacity: 0; transform-box: view-box; transform-origin: 24px 28.67px; transform: scale(.55);
  transition: opacity .6s, transform .9s cubic-bezier(.2,.9,.25,1); }
.figur .teil.t1 { fill: #e8a24a; transition-delay: 0s; }
.figur .teil.t2 { fill: #f2f6f6; transition-delay: .12s; }
.figur .teil.t3 { fill: #8fd0d2; transition-delay: .24s; }
.figur .beschrift { font: 600 3.1px Inter, sans-serif; fill: var(--band-schwach); opacity: 0; transition: opacity .6s .5s; }
.figur .weg { fill: none; stroke: var(--band-akzent); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1), opacity .3s; }
.figur .weg-spitze, .figur .weg-punkt { fill: var(--band-akzent); opacity: 0; transition: opacity .4s; }
.figur .weg-text { font: 600 2.8px Inter, sans-serif; fill: var(--band-akzent); opacity: 0; transition: opacity .4s; }
.figur[data-schritt="1"] .kontur, .figur[data-schritt="2"] .kontur, .figur[data-schritt="3"] .kontur { stroke-dashoffset: 0; }
.figur[data-schritt="2"] .kontur, .figur[data-schritt="3"] .kontur { opacity: .3; }
.figur[data-schritt="2"] .teil, .figur[data-schritt="3"] .teil { opacity: 1; transform: none; }
.figur[data-schritt="2"] .beschrift { opacity: 1; }
.figur[data-schritt="3"] .teil { opacity: .9; }
.figur[data-schritt="3"] .weg { stroke-dashoffset: 0; opacity: 1; }
.figur[data-schritt="3"] .weg-punkt { opacity: 1; transition-delay: 0s; }
.figur[data-schritt="3"] .weg-spitze, .figur[data-schritt="3"] .weg-text { opacity: 1; transition-delay: 1.3s; }
.silben { display: grid; }
/* Drei Zeilen Δ · tri · via – Zeigen/Fokus steuert die Figur, sonst läuft sie einmal durch */
.silbe { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 24px; padding: 22px 0; border-top: 1px solid var(--band-rahmen);
  opacity: .5; transition: opacity .4s; cursor: default; }
.silbe:last-child { border-bottom: 1px solid var(--band-rahmen); }
.silbe.aktiv { opacity: 1; }
.silbe:focus-visible { outline-offset: 6px; }
.silbe-wort { grid-row: span 2; font-family: var(--titel); font-stretch: 125%; font-weight: 760; font-size: clamp(34px, 3.4vw, 46px); line-height: .95; letter-spacing: -0.035em; color: var(--band-akzent); }
.silbe-wort small { display: block; font: 600 13px/1 Inter, sans-serif; letter-spacing: 0; color: var(--band-schwach); margin-top: 8px; }
.silbe h3 { color: var(--band-text); font-size: clamp(17px, 1.5vw, 20px); }
.silbe p { color: var(--band-schwach); max-width: 52ch; font-size: 15.5px; }
.name-schluss { margin-top: 24px; padding-top: 40px; border-top: 1px solid var(--band-rahmen); font-family: var(--titel); font-stretch: 110%; font-weight: 600;
  font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -0.01em; max-width: 34em; }
@media (max-width: 860px) {
  .geschichte { grid-template-columns: 1fr; gap: 8px; }
  .figur { height: 230px; }
  .figur svg { width: 220px; }
  .silbe { grid-template-columns: 1fr; }
  .silbe-wort { grid-row: auto; display: flex; align-items: baseline; gap: 12px; }
  .silbe-wort small { margin-top: 0; }
}

/* ---------- Nach Maß statt Standard ---------- */
.vergleich { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.vergleich th, .vergleich td { text-align: left; vertical-align: top; padding: 13px 18px; border-bottom: 1px solid var(--rahmen); }
.vergleich thead th { font-family: var(--titel); font-stretch: 110%; font-size: 15.5px; font-weight: 650; border-bottom-width: 2px; }
.vergleich tbody th { font-weight: 600; width: 22%; }
.vergleich td { color: var(--schwach); width: 39%; }
.vergleich .wir { background: var(--primaer-zart); color: var(--text); }
.vergleich thead .wir { border-radius: 14px 14px 0 0; color: var(--primaer); border-bottom-color: var(--primaer); }
.vergleich tbody tr:last-child .wir { border-radius: 0 0 14px 14px; border-bottom: 0; }
@media (max-width: 760px) {
  .vergleich thead { display: none; }
  .vergleich, .vergleich tbody, .vergleich tr, .vergleich th, .vergleich td { display: block; width: auto; }
  .vergleich tr { padding: 16px 0; border-bottom: 1px solid var(--rahmen); }
  .vergleich th, .vergleich td { border: 0; padding: 4px 0; }
  .vergleich td::before { content: attr(data-spalte) ": "; font-weight: 600; color: var(--text); }
  .vergleich .wir { background: none; padding: 8px 12px; margin-top: 6px; border-left: 3px solid var(--primaer); border-radius: 0 !important; }
}
.gebaut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 36px; margin-top: 56px; }
@media (max-width: 960px) { .gebaut { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gebaut { grid-template-columns: 1fr; gap: 32px; } }
.gebaut > div { border-top: 2px solid var(--text); padding-top: 18px; }
.gebaut svg { width: 22px; height: 22px; color: var(--primaer); margin-bottom: 14px; }
.gebaut p { color: var(--schwach); margin-top: 6px; font-size: 15px; }

/* ---------- Bausteine ---------- */
.bausteine-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.filter { display: flex; flex-wrap: wrap; gap: 6px; }
.filter button { font: 550 14px/1 Inter, sans-serif; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--rahmen); background: var(--flaeche); color: var(--schwach); cursor: pointer; }
.filter button:hover { color: var(--text); border-color: var(--rahmen-stark); }
.filter button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--grund); }
.zaehler { font-size: 14px; color: var(--schwach); font-variant-numeric: tabular-nums; }
.liste { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 14px; overflow: hidden; }
.zeile { display: grid; grid-template-columns: 104px minmax(0, 14rem) minmax(0, 1fr) 10rem; gap: 18px; align-items: baseline; padding: 12px 20px;
  border-top: 1px solid var(--rahmen); animation: zeile-ein .35s ease both; }
.zeile:first-child { border-top: 0; }
.zeile[hidden] { display: none; }
.zeile:hover { background: color-mix(in srgb, var(--primaer-zart) 45%, transparent); }
.zeile b { font-weight: 620; }
.zeile .text { color: var(--schwach); font-size: 14.5px; }
.zeile .bereich { font-size: 13px; color: var(--schwach); text-align: right; }
@keyframes zeile-ein { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 900px) { .zeile { grid-template-columns: 1fr auto; gap: 4px 12px; } .zeile .stand { grid-column: 2; grid-row: 1; justify-self: end; }
  .zeile b { grid-column: 1; grid-row: 1; } .zeile .text { grid-column: 1 / -1; } .zeile .bereich { display: none; } }
.stand { justify-self: start; font-size: 12px; font-weight: 650; padding: 4px 9px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.stand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stand.einsatz { background: var(--positiv-zart); color: var(--positiv); }
.stand.aufbau { background: var(--primaer-zart); color: var(--primaer); }
.stand.plan { background: var(--akzent-zart); color: var(--akzent-text); }

/* ---------- Praxis & Ausblick ---------- */
.praxis { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; }
@media (max-width: 900px) { .praxis { grid-template-columns: 1fr; gap: 40px; } }
.praxis .leit { margin-top: 18px; }
.referenzen { display: grid; }
.referenz { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--rahmen); }
.referenz:last-child { border-bottom: 1px solid var(--rahmen); }
.referenz .symbol { width: 44px; height: 44px; border-radius: 10px; background: var(--flaeche2); color: var(--primaer); display: grid; place-items: center; }
.referenz .symbol svg { width: 22px; height: 22px; }
.referenz p { color: var(--schwach); font-size: 15px; margin-top: 4px; }
.referenz a { font-size: 14.5px; font-weight: 600; display: inline-block; margin-top: 6px; }
.ausblick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 72px; }
@media (max-width: 1000px) { .ausblick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ausblick { grid-template-columns: 1fr; } }
.ausblick-titel { grid-column: 1 / -1; }
.ausblick-titel h2 { font-size: clamp(21px, 2vw, 26px); }
.ausblick .idee { border-top: 2px solid var(--akzent); padding-top: 16px; }
.ausblick .idee p { color: var(--schwach); font-size: 15px; margin-top: 6px; }
.umzug { margin-top: 48px; font-size: 15px; color: var(--schwach); padding: 16px 20px; border-radius: 12px; background: var(--flaeche2); }
.umzug b { color: var(--text); }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--band); color: var(--band-text); border-radius: 20px; padding: clamp(26px, 4vw, 52px);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 900px) { .kontakt { grid-template-columns: 1fr; } }
.kontakt h2 { color: var(--band-text); }
.kontakt p { color: var(--band-schwach); margin-top: 16px; max-width: 52ch; }
.kontaktwege { display: grid; gap: 12px; }
.kontaktwege a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 20px; border-radius: 12px;
  border: 1px solid var(--band-rahmen); color: var(--band-text); text-decoration: none; transition: background-color .15s; }
.kontaktwege a:hover { background: rgba(255,255,255,.07); color: var(--band-text); }
.kontaktwege svg { width: 22px; height: 22px; color: var(--band-akzent); }
.kontaktwege b { font-weight: 600; }
.kontaktwege small { display: block; color: var(--band-schwach); font-size: 13px; }

/* ---------- Fuß ---------- */
.fuss { padding: 48px 0; color: var(--schwach); font-size: 14px; }
.fuss .rahmen { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; }
.fuss nav { display: flex; gap: 20px; }
.fuss a { color: var(--schwach); }
.fuss a:hover { color: var(--text); }
.fuss .marke { font-size: 18px; }
.fuss .marke svg { width: 22px; height: 22px; }

/* ---------- Rechtliches (Unterseiten) ---------- */
.recht { max-width: 760px; margin: 0 auto; padding: 56px 16px 96px; }
.recht h1 { font-size: clamp(32px, 5vw, 46px); }
.recht h2 { font-size: 22px; margin-top: 40px; }
.recht p, .recht li { color: var(--schwach); margin-top: 10px; }
.recht ul { padding-left: 20px; list-style: disc; }
.recht code { font-size: .92em; background: var(--flaeche2); padding: 1px 6px; border-radius: 5px; }

/* ---------- Reduzierte Bewegung: alles sofort im Endzustand ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .figur .kontur, .figur .weg { stroke-dashoffset: 0; opacity: 1; }
  .held h1 .unterstrich path { stroke-dashoffset: 0; }
  .figur .teil, .figur .beschrift, .figur .weg-spitze, .figur .weg-punkt, .figur .weg-text { opacity: 1; transform: none; }
  .silbe { opacity: 1; }
}