/* ═══════════════════════════════════════════════════════════════════
   praesto. — Produktseite (ki.smartmacherei.at)
   Statisch, kein Build. Farben und Schriften sind das CI der App
   (packages/web/tailwind.config.js im Erledigt-Repo), nicht das der
   Smartmacherei-Hauptseite. Bewegung nur dort, wo im Produkt gearbeitet
   wird (Werkbank, Stationen, Gatter); der Rest der Seite bleibt ruhig.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Outfit'; src: url('fonts/Outfit.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }

:root {
  --grund: #eef4f8; --karte: #ffffff; --flaeche: #f4f8fb; --kachel: #f1f5f8; --kontur: #d7e3ec; --kontur-hell: #e6eef4;
  --ink: #0a2a3d; --ink-soft: #5b7180; --ink-leise: #7e97a6; --ink-stumm: #b9cdd9; --tief: #071520;
  --marke: #3ABDD0; --marke-hell: #8DDBEA; --marke-flaeche: #e4f6fa; --marke-ink: #146e7d;
  --amber: #ffb83d; --amber-flaeche: #fff7ea; --amber-kontur: #f4dcae; --amber-ink: #8a6415;
  --gruen: #36c98e; --gruen-satt: #1f9e6c; --gruen-flaeche: #eafaf3;
  --f-marke: 'Outfit', system-ui, -apple-system, sans-serif;
  --f-text: 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r-klein: 4px; --r-mittel: 6px; --r-gross: 10px;
  --breite: 1120px;
  --schatten: 0 30px 60px -30px rgba(10, 42, 61, .28), 0 2px 6px rgba(10, 42, 61, .06);
}

/* ── Basis ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--ink); font-family: var(--f-text); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--f-marke); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
.container { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.kicker { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-leise); margin-bottom: 14px; }
.titel { font-size: clamp(1.9rem, 3.4vw, 2.7rem); max-width: 24ch; }
.lead { font-size: 18px; color: var(--ink-soft); max-width: 64ch; margin-top: 16px; }
.abschnitt { padding: clamp(64px, 9vw, 120px) 0; }
.abschnitt--hell { background: var(--karte); }
.abschnitt-kopf { margin-bottom: clamp(32px, 5vw, 52px); }
section[id] { scroll-margin-top: 84px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wortmarke { font-family: var(--f-marke); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: inherit; display: inline-flex; align-items: baseline; }
.wortmarke .punkt { color: var(--marke); }

/* Modus: Betrieb oder Kanzlei. Alles mit data-nur zeigt nur im passenden Modus. */
html[data-modus="betrieb"] [data-nur="kanzlei"], html[data-modus="kanzlei"] [data-nur="betrieb"] { display: none !important; }

/* Knöpfe (Formen aus der App: primär = Marke auf Tief, still = weiß) */
.knopf { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--r-mittel); padding: 12px 20px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.knopf--primaer { background: var(--marke); color: var(--tief); box-shadow: 0 8px 20px -10px rgba(58, 189, 208, .8); }
.knopf--primaer:hover { background: var(--marke-hell); transform: translateY(-1px); }
.knopf--still { background: var(--karte); border-color: var(--kontur); color: var(--ink); }
.knopf--still:hover { border-color: var(--ink-stumm); }
.knopf--ruhig { background: var(--marke-flaeche); border-color: #9ddceb; color: var(--ink); }
.knopf--klein { padding: 8px 14px; font-size: 13px; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Umschalter Betrieb / Kanzlei */
.schalter { display: inline-flex; background: var(--kachel); border: 1px solid var(--kontur); border-radius: 100px; padding: 4px; gap: 4px; }
.schalter button { border: 0; background: transparent; border-radius: 100px; padding: 8px 16px; font-weight: 600; font-size: 14px; color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.schalter button[aria-pressed="true"] { background: var(--karte); color: var(--ink); box-shadow: 0 2px 8px rgba(10, 42, 61, .1); }
.schalter-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); }

/* Einblenden beim Scrollen */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--ease), transform .75s var(--ease); transition-delay: var(--d, 0ms); }
[data-reveal].da { opacity: 1; transform: none; }

/* ── Kopf ─────────────────────────────────────────────────────────── */
.kopf { position: sticky; top: 0; z-index: 40; background: rgba(238, 244, 248, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, box-shadow .25s; }
.kopf.gescrollt { background: rgba(255, 255, 255, .88); border-color: var(--kontur-hell); box-shadow: 0 10px 30px -20px rgba(10, 42, 61, .25); }
.kopf-innen { display: flex; align-items: center; gap: 28px; height: 68px; }
.kopf .wortmarke { font-size: 24px; color: var(--ink); }
.kopf-nav { display: flex; gap: 4px; margin-left: 8px; }
.kopf-nav a { font-size: 14px; font-weight: 500; color: var(--ink-soft); text-decoration: none; padding: 8px 12px; border-radius: 100px; transition: background .15s, color .15s; }
.kopf-nav a:hover { background: var(--marke-flaeche); color: var(--ink); }
.kopf-cta { margin-left: auto; }
@media (max-width: 900px) { .kopf-nav { display: none; } .kopf-innen { height: 60px; } .kopf .wortmarke { font-size: 22px; } }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; max-width: 900px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58, 189, 208, .22), rgba(58, 189, 208, 0)); pointer-events: none; }
.hero-innen { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .hero-innen { grid-template-columns: 5fr 7fr; gap: 56px; } }
.hero .kicker { margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); display: grid; gap: .06em; }
/* Die H1 ist das LCP-Element: kein Opacity-Fade (Chrome zählt unsichtbaren Text nicht), nur ein Heben. */
.takt { display: block; transform: translateY(14px); animation: takt-h1 .8s var(--ease) forwards; }
.takt:nth-child(2) { animation-delay: .3s; }
.takt:nth-child(3) { animation-delay: .6s; }
@keyframes takt-h1 { to { transform: none; } }
.takt em { font-style: normal; background: linear-gradient(var(--marke), var(--marke)) no-repeat 0 96% / 0% .09em; animation: strich .7s 1.3s var(--ease) forwards; }
@keyframes takt { to { opacity: 1; transform: none; } }
@keyframes strich { to { background-size: 100% .09em; } }
.hero-sub { font-size: 18px; color: var(--ink-soft); max-width: 46ch; margin-top: 20px; opacity: 0; animation: takt .8s 1s var(--ease) forwards; }
.hero-schalter { margin-top: 22px; opacity: 0; animation: takt .8s 1.15s var(--ease) forwards; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; opacity: 0; animation: takt .8s 1.3s var(--ease) forwards; }
.hero-takt4 { margin-top: 28px; font-family: var(--f-marke); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; display: flex; gap: 10px; align-items: flex-start;
  opacity: 0; animation: takt .8s 1.5s var(--ease) forwards; }
.hero-takt4 svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--marke-ink); }
.hero-mockup { opacity: 0; transform: translateY(20px); animation: takt .7s .2s var(--ease) forwards; }
.bild-unterschrift { margin-top: 12px; font-size: 13px; color: var(--ink-leise); line-height: 1.5; }

/* ── Werkbank-Mockup ─────────────────────────────────────────────── */
.wb { width: 100%; background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); box-shadow: var(--schatten);
  overflow: hidden; font-size: 13px; line-height: 1.45; font-family: var(--f-text); text-align: left; }
.wb-chrome { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--kontur-hell); }
.wb-logo { display: flex; align-items: center; gap: 6px; font-family: var(--f-marke); font-weight: 700; font-size: 14px; }
.wb-logo svg { width: 18px; height: 18px; }
.wb-nav { display: flex; gap: 2px; margin-left: 6px; }
.wb-nav span { padding: 4px 8px; border-radius: var(--r-klein); color: var(--ink-soft); font-size: 12px; }
.wb-nav span.aktiv { background: var(--marke-flaeche); color: var(--ink); font-weight: 500; }
.wb-diktieren { margin-left: auto; background: var(--marke); color: var(--tief); font-weight: 600; font-size: 12px; padding: 5px 10px; border-radius: var(--r-klein); display: flex; align-items: center; gap: 6px; }
.wb-diktieren::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tief); opacity: .8; }
.wb-body { padding: 14px 16px 12px; display: grid; gap: 12px; }
.wb-krume { display: flex; align-items: baseline; gap: 8px; color: var(--ink-soft); font-size: 12px; flex-wrap: wrap; }
.wb-krume b { color: var(--ink); font-weight: 600; font-family: var(--f-marke); font-size: 15px; }
.wb-stufe { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-leise); }
.label-mono { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-leise); }
.wb-diktat { background: var(--flaeche); border: 1px solid var(--kontur-hell); border-radius: var(--r-mittel); padding: 10px 12px; }
/* Der Diktattext liegt unsichtbar vollständig im Kasten (reserviert die Höhe), der getippte Text darüber. */
.wb-diktat .text { position: relative; margin-top: 5px; font-size: 13.5px; color: var(--ink); }
.wb-ghost { visibility: hidden; }
.wb-typed { position: absolute; inset: 0; }
.wb-diktat .caret { display: inline-block; width: 2px; height: 1em; background: var(--marke); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* Leiste: immer da (kein Layoutsprung). Grün = Ruhe, Amber = Wartet auf dich. */
.wb-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: var(--amber-flaeche); border: 1px solid var(--amber-kontur); color: var(--amber-ink);
  border-radius: var(--r-mittel); padding: 8px 12px; font-weight: 500; min-height: 42px; transition: background .5s, border-color .5s, color .5s; }
.wb-leiste .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; transition: background .5s; }
.wb-leiste .knopf-mini { margin-left: auto; background: var(--karte); border: 1px solid var(--amber-kontur); border-radius: var(--r-klein); padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: opacity .4s; }
.wb-leiste.ruhe { background: var(--gruen-flaeche); border-color: #cdeedd; color: var(--gruen-satt); }
.wb-leiste.ruhe .punkt { background: var(--gruen-satt); }
.wb-leiste.ruhe .knopf-mini { opacity: 0; pointer-events: none; }
.wb-verteiler { display: flex; align-items: center; gap: 8px; min-height: 22px; flex-wrap: wrap; }
.wb-chip { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--r-klein); background: var(--kachel); border: 1px solid var(--kontur); color: var(--ink);
  opacity: 0; transform: translateX(-10px) scale(.9); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.wb-chip.da { opacity: 1; transform: none; }
.wb-verteiler .pfeil { color: var(--ink-stumm); opacity: 0; transition: opacity .3s; }
.wb-verteiler .pfeil.da { opacity: 1; }
.wb-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wb-karte { border: 1px solid var(--kontur); border-radius: var(--r-mittel); padding: 10px 11px 9px; background: var(--karte); display: grid; gap: 7px; align-content: start;
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); min-height: 198px; }
.wb-karte.da { opacity: 1; transform: none; }
.wb-kopf { display: flex; align-items: center; gap: 8px; }
.wb-avatar { width: 26px; height: 26px; flex: none; border-radius: var(--r-mittel); background: var(--kachel); border: 1px solid var(--kontur-hell); display: grid; place-items: center; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; }
.wb-rolle { font-weight: 600; font-size: 13px; }
.wb-zust { font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-leise); }
.wb-status { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.wb-status .punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--marke-hell); flex: none; }
.wb-status[data-art="arbeitet"] .punkt { animation: puls 1.6s ease-in-out infinite; }
.wb-status[data-art="wartet"] .punkt { background: var(--amber); }
.wb-status[data-art="wartet"] { color: var(--amber-ink); font-weight: 500; }
.wb-status[data-art="geplant"] .punkt, .wb-status[data-art="extern"] .punkt { background: transparent; border: 1.5px solid var(--ink-stumm); width: 6px; height: 6px; }
.wb-status[data-art="fertig"] .punkt { background: var(--gruen-satt); }
.wb-status[data-art="fertig"] { color: var(--gruen-satt); }
@keyframes puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.wb-zeilen { display: grid; gap: 4px; }
.wb-zeile { display: grid; grid-template-columns: 12px 1fr; column-gap: 7px; align-items: start; font-size: 12.5px;
  opacity: 0; transform: translateY(3px); transition: opacity .28s ease-out, transform .28s ease-out; }
.wb-zeile.da { opacity: 1; transform: none; }
.wb-zeile .m { text-align: center; color: var(--ink-leise); font-family: var(--f-mono); font-size: 11px; line-height: 1.5; }
.wb-zeile.erledigt .m { color: var(--gruen-satt); }
.wb-zeile.danach { color: var(--ink-soft); }
.wb-zeile.frage { grid-template-columns: 1fr; background: var(--amber-flaeche); border: 1px solid var(--amber-kontur); border-radius: var(--r-klein); padding: 6px 8px; gap: 6px; }
.wb-zeile.frage .m { display: none; }
.wb-zeile .knopf-mini { justify-self: start; background: var(--karte); border: 1px solid var(--amber-kontur); border-radius: var(--r-klein); padding: 3px 8px; font-size: 11.5px; font-weight: 600; }
.wb-balken { grid-column: 2; height: 4px; background: var(--kachel); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.wb-balken i { display: block; height: 100%; width: 0; background: var(--marke); border-radius: 2px; transition: width 1.4s linear; }
.wb-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--kontur-hell); padding-top: 9px; color: var(--ink-soft); font-size: 12px; flex-wrap: wrap; }
.wb-fuss svg { width: 13px; height: 13px; display: inline; vertical-align: -2px; margin-right: 5px; }
.wb-replay { background: none; border: 1px solid var(--kontur); border-radius: var(--r-klein); padding: 3px 8px; font-size: 11.5px; color: var(--ink-soft); cursor: pointer; opacity: 0; transition: opacity .3s; }
.wb-replay.da { opacity: 1; }
@media (max-width: 560px) { .wb-karten { grid-template-columns: 1fr; } .wb-nav { display: none; } .wb-stufe { display: none; } }

/* ── Der zweite Arbeitstag ───────────────────────────────────────── */
.vergleich { display: grid; gap: 20px; }
@media (min-width: 800px) { .vergleich { grid-template-columns: 1fr 1fr; } }
.vergleich-karte { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 28px; }
.vergleich-karte--mit { background: linear-gradient(180deg, #ffffff, var(--marke-flaeche)); border-color: #bfe6ee; }
.vergleich-karte h3 { font-size: 22px; margin-bottom: 12px; }
.vergleich-karte p { color: var(--ink-soft); }
.vergleich-karte p + p { margin-top: 14px; }
.vergleich-karte ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vergleich-karte li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.vergleich-karte li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ink-stumm); }
.vergleich-karte--mit li svg { color: var(--gruen-satt); }
.leitsaetze { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 800px) { .leitsaetze { grid-template-columns: repeat(3, 1fr); } }
.leitsatz { border-top: 2px solid var(--kontur); padding-top: 14px; }
.leitsatz .kicker { margin-bottom: 8px; }
.leitsatz p:not(.kicker) { font-family: var(--f-marke); font-weight: 600; font-size: 19px; line-height: 1.3; }

/* ── Ein Diktat. Ein Vorgang. Ein Team. ──────────────────────────── */
.stationen { display: grid; gap: 14px; position: relative; }
.station { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 20px 20px 18px; transition: border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.station .nr { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-leise); text-transform: uppercase; }
.station h3 { font-size: 19px; margin: 8px 0 8px; }
.station p { color: var(--ink-soft); font-size: 15px; }
.station.aktiv { border-color: var(--marke); box-shadow: 0 16px 40px -24px rgba(58, 189, 208, .9); }
.station.aktiv .nr { color: var(--marke-ink); }
.laeufer { display: none; }
@media (min-width: 900px) {
  .stationen { grid-template-columns: repeat(5, 1fr); padding-top: 34px; }
  .stationen::before { content: ''; position: absolute; left: 4%; right: 4%; top: 14px; height: 2px; background: var(--kontur); border-radius: 1px; }
  .laeufer { display: inline-flex; position: absolute; top: 0; left: 4%; transform: translate(-50%, 0); align-items: center; gap: 7px; background: var(--tief); color: #fff; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 100px; white-space: nowrap;
    box-shadow: 0 8px 20px -8px rgba(7, 21, 32, .6); z-index: 2; opacity: 0; }
  .laeufer::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--marke); animation: puls 1.6s ease-in-out infinite; }
  /* Linear und synchron zu den Stationen (JS: 300 ms + i × 900 ms): Stationsmitten bei 10 %, 30 %, 50 %, 70 %, 90 %. */
  .stationen.laeuft .laeufer { animation: laufen 3.6s .75s linear forwards; }
  @keyframes laufen { 0% { opacity: 1; left: 10%; } 100% { opacity: 1; left: 90%; } }
}
.team { display: grid; gap: 28px; margin-top: 40px; align-items: start; }
@media (min-width: 1000px) { .team { grid-template-columns: 1fr 1fr; gap: 40px; } }
.rollen { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rolle { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-mittel); padding: 10px 12px; }
.rolle .wb-avatar { width: 34px; height: 34px; font-size: 12px; }
.rolle b { display: block; font-size: 15px; }
.rolle span { color: var(--ink-soft); font-size: 14px; }
.team-text { display: grid; gap: 16px; align-content: start; }
.team-text h3 { font-size: 20px; }
.team-text p { color: var(--ink-soft); font-size: 15.5px; }
.team-text strong { color: var(--ink); }
.werkbank-satz { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.werkbank-satz .wb-avatar { width: 34px; height: 34px; font-size: 12px; }
.werkbank-satz p { font-size: 15px; color: var(--ink); }
.werkbank-satz .kicker { margin: 0 0 4px; }

/* ── Fähigkeiten ─────────────────────────────────────────────────── */
.dateien { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 900px) { .dateien { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.datei { position: relative; background: var(--karte); border: 1px solid var(--kontur); border-radius: 0 var(--r-gross) var(--r-gross) var(--r-gross); padding: 30px 16px 16px; min-height: 160px; }
.datei::before { content: attr(data-typ); position: absolute; top: -1px; left: -1px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--kachel); border: 1px solid var(--kontur); border-bottom: 0; border-radius: var(--r-klein) var(--r-klein) 0 0; padding: 3px 9px; color: var(--ink-soft); transform: translateY(-100%); }
.datei h3 { font-size: 17px; margin-bottom: 8px; }
.datei p { color: var(--ink-soft); font-size: 14px; }
.beweise { display: grid; gap: 20px; margin-top: 36px; }
@media (min-width: 900px) { .beweise { grid-template-columns: 1fr 1fr; } }
.beweis { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 22px; }
.beweis h3 { font-size: 19px; margin-bottom: 12px; }
.beweis p { color: var(--ink-soft); font-size: 15px; margin-top: 12px; }
.position { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; background: var(--flaeche); border: 1px solid var(--kontur-hell); border-radius: var(--r-mittel); padding: 12px 14px; font-size: 14px; }
.position .alt { text-decoration: line-through; color: var(--ink-leise); }
.position .neu { font-weight: 600; }
.position .delta { font-family: var(--f-mono); font-size: 13px; color: var(--gruen-satt); background: var(--gruen-flaeche); padding: 2px 8px; border-radius: var(--r-klein); white-space: nowrap; }
.position .grund { grid-column: 1 / -1; color: var(--ink-soft); font-size: 13.5px; }
.pruefweg { display: grid; gap: 6px; background: var(--flaeche); border: 1px solid var(--kontur-hell); border-radius: var(--r-mittel); padding: 12px 14px; font-size: 14px; }
.pruefweg div { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }
.pruefweg .nr { font-family: var(--f-mono); font-size: 11px; color: var(--ink-leise); padding-top: 3px; }

/* ── Der Alltag ──────────────────────────────────────────────────── */
.alltag { display: grid; gap: 20px; }
@media (min-width: 900px) { .alltag { grid-template-columns: repeat(3, 1fr); } }
.kachel { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 22px; display: grid; gap: 14px; align-content: start; }
.kachel h3 { font-size: 19px; }
.kachel > p { color: var(--ink-soft); font-size: 15px; }
.blase { background: var(--flaeche); border: 1px solid var(--kontur-hell); border-radius: 14px 14px 14px 4px; padding: 10px 12px; font-size: 13.5px; }
.blase--diktat { background: var(--marke-flaeche); border-color: #bfe6ee; border-radius: 14px 14px 4px 14px; }
.handy { background: var(--tief); border-radius: 26px; padding: 10px; }
.handy-schirm { background: var(--grund); border-radius: 18px; padding: 14px 12px; display: grid; gap: 10px; }
.handy-kopf { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-leise); }
.handy-mikro { justify-self: center; width: 46px; height: 46px; border-radius: 50%; background: var(--marke); display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(58, 189, 208, .9); margin-top: 4px; }
.handy-mikro svg { width: 20px; height: 20px; color: var(--tief); }
.saeumig-zeile { display: grid; gap: 10px; background: var(--flaeche); border: 1px solid var(--kontur-hell); border-radius: var(--r-mittel); padding: 12px 14px; font-size: 14px; }
.saeumig-zeile b { font-weight: 600; }
.pille { display: inline-block; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 100px; background: var(--amber-flaeche); color: var(--amber-ink); border: 1px solid var(--amber-kontur); white-space: nowrap; }
.saeumig-zeile .aktion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.saeumig.bereit .aktion { opacity: 1; transform: none; }
.datei-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 12px; background: var(--kachel); border: 1px solid var(--kontur); border-radius: var(--r-klein); padding: 3px 8px; justify-self: start; }
.ergebnis-zeile { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--gruen-satt); font-weight: 500; }
.ergebnis-zeile svg { width: 16px; height: 16px; }
.selbst { margin-top: 28px; background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 15px; color: var(--ink-soft); }
.selbst strong { color: var(--ink); }

/* ── Warum Sie das freigeben können (dunkler Abschnitt) ──────────── */
.abschnitt--tief { background: var(--tief); color: #e6eef4; }
.abschnitt--tief .kicker { color: var(--marke-hell); }
.abschnitt--tief .lead { color: #a9bccb; }
.abschnitt--tief .titel { color: #fff; }
.abschnitt--tief h3 { color: #fff; }
.gatter { display: grid; gap: 14px; position: relative; }
@media (min-width: 960px) { .gatter { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.gatter-kasten { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-gross); padding: 20px; display: grid; gap: 10px; align-content: start; transition: border-color .5s, box-shadow .5s; }
.gatter-kasten .nr { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #7e97a6; }
.gatter-kasten h3 { font-size: 20px; }
.gatter-kasten p { color: #c5d4df; font-size: 14.5px; }
.gatter-kasten--du { text-align: center; }
.gatter-knoepfe { display: grid; gap: 8px; margin-top: 4px; }
.gatter-knoepfe button { border-radius: var(--r-mittel); padding: 9px 12px; font-weight: 600; font-size: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #e6eef4; cursor: pointer; transition: background .2s; }
.gatter-knoepfe button.frei { background: var(--marke); color: var(--tief); border-color: transparent; }
.gatter-knoepfe button.frei:hover { background: var(--marke-hell); }
.gatter.wartet .gatter-kasten--du { border-color: rgba(255, 184, 61, .6); box-shadow: 0 0 0 4px rgba(255, 184, 61, .12); }
.gatter.frei .gatter-kasten--aus { border-color: rgba(54, 201, 142, .55); box-shadow: 0 0 0 4px rgba(54, 201, 142, .1); }
.impuls { display: none; }
@media (min-width: 960px) {
  .impuls { display: block; position: absolute; top: -14px; left: 12.5%; width: 12px; height: 12px; border-radius: 50%; background: var(--marke); box-shadow: 0 0 0 6px rgba(58, 189, 208, .25), 0 0 24px rgba(58, 189, 208, .9);
    transform: translate(-50%, -50%); opacity: 0; z-index: 3; transition: left 1.3s var(--ease), opacity .4s, background .4s, box-shadow .4s; }
  .gatter::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: -14px; height: 2px; background: rgba(255, 255, 255, .12); }
  .gatter.laeuft .impuls { opacity: 1; left: 37.5%; }
  .gatter.wartet .impuls { left: 62.5%; background: var(--amber); box-shadow: 0 0 0 6px rgba(255, 184, 61, .25), 0 0 24px rgba(255, 184, 61, .9); animation: puls 1.2s ease-in-out infinite; }
  .gatter.frei .impuls { left: 87.5%; background: var(--gruen); box-shadow: 0 0 0 6px rgba(54, 201, 142, .25), 0 0 24px rgba(54, 201, 142, .9); animation: none; opacity: 1; }
  .gatter-wrap { padding-top: 22px; }
}
.gatter-satz { margin-top: 26px; display: grid; gap: 10px; color: #a9bccb; font-size: 15.5px; max-width: 70ch; }
.gatter-satz strong { color: #fff; }
.sicherheit-spalten { display: grid; gap: 24px; margin-top: 48px; }
@media (min-width: 960px) { .sicherheit-spalten { grid-template-columns: 1fr 1fr; gap: 32px; } }
.dunkel-karte { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-gross); padding: 24px; display: grid; gap: 14px; align-content: start; }
.dunkel-karte h3 { font-size: 20px; }
.dunkel-karte p, .dunkel-karte li { color: #c5d4df; font-size: 15px; }
.dunkel-karte strong { color: #fff; }
.dunkel-karte ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dunkel-karte li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; }
.dunkel-karte li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--marke-hell); }
.stufen { display: grid; gap: 8px; }
.stufe { text-align: left; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-mittel); padding: 12px 14px; display: grid; grid-template-columns: 32px 1fr; gap: 12px; cursor: pointer; color: #e6eef4; transition: border-color .2s, box-shadow .2s; }
.stufe .nr { font-family: var(--f-mono); font-size: 13px; font-weight: 600; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); display: grid; place-items: center; color: #a9bccb; }
.stufe b { display: block; font-size: 15px; color: #fff; }
.stufe span span { color: #a9bccb; font-size: 13.5px; }
.stufe[aria-pressed="true"] { border-color: var(--marke); box-shadow: 0 0 0 3px rgba(58, 189, 208, .18); }
.stufe[aria-pressed="true"] .nr { background: var(--marke); border-color: var(--marke); color: var(--tief); }
.stufen-text { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 14px; }
.stufen-text [data-stufe-text] { display: none; }
.stufen-text[data-stufe="1"] [data-stufe-text="1"], .stufen-text[data-stufe="2"] [data-stufe-text="2"], .stufen-text[data-stufe="3"] [data-stufe-text="3"] { display: grid; gap: 10px; }
.bestaetigung { background: rgba(255, 184, 61, .1); border: 1px solid rgba(255, 184, 61, .4); border-radius: var(--r-mittel); padding: 12px 14px; color: #ffd996; font-size: 14.5px; display: grid; gap: 10px; }
.bestaetigung div { display: flex; gap: 8px; flex-wrap: wrap; }
.bestaetigung .knopf { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }

/* ── Herkunft und Stand ──────────────────────────────────────────── */
.herkunft { display: grid; gap: 22px; align-items: center; background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 26px; }
@media (min-width: 760px) { .herkunft { grid-template-columns: 140px 1fr; gap: 30px; } }
.herkunft img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid var(--marke-flaeche); }
.herkunft p { color: var(--ink-soft); font-size: 16px; }
.herkunft p + p { margin-top: 10px; }
.herkunft strong { color: var(--ink); }
.punkt-satz { margin-top: 16px; font-family: var(--f-marke); font-weight: 600; font-size: 19px; color: var(--ink); }
.punkt-satz .punkt { color: var(--marke); }
.stand-bloecke { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 900px) { .stand-bloecke { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.stand { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 22px; display: grid; gap: 12px; align-content: start; }
.stand h3 { font-size: 18px; }
.stand ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.stand li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; font-size: 14.5px; align-items: start; color: var(--ink); }
.stand li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--gruen-satt); }
.stand--bald li svg { color: var(--ink-stumm); }
.stand--bald li { color: var(--ink-soft); }
.stand p { color: var(--ink-soft); font-size: 14.5px; }
.stand .datum { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-leise); }

/* ── Fragen ──────────────────────────────────────────────────────── */
.fragen { display: grid; gap: 8px; max-width: 820px; }
.frage { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-mittel); }
.frage summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary svg { width: 18px; height: 18px; flex: none; color: var(--ink-leise); transition: transform .3s var(--ease); }
.frage[open] summary svg { transform: rotate(45deg); }
.frage div { padding: 0 18px 16px; color: var(--ink-soft); font-size: 15px; }

/* ── Gespräch ────────────────────────────────────────────────────── */
.gespraech { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .gespraech { grid-template-columns: 7fr 5fr; gap: 40px; } }
.formular { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 26px; display: grid; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { background: var(--kachel); border: 1px solid var(--kontur); border-radius: 100px; padding: 6px 12px; font-size: 13px; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.chips button:hover { border-color: var(--marke); background: var(--marke-flaeche); }
.feld-gruppe { display: grid; gap: 6px; }
.feld-gruppe label { font-size: 14px; font-weight: 600; }
.feld-gruppe small { color: var(--ink-leise); font-size: 12.5px; font-weight: 400; }
.feld { width: 100%; border: 1px solid var(--kontur); border-radius: var(--r-klein); background: var(--karte); padding: 11px 12px; font: inherit; font-size: 15px; color: var(--ink); }
.feld::placeholder { color: var(--ink-stumm); }
.feld:focus { border-color: var(--marke); outline: none; box-shadow: 0 0 0 3px var(--marke-flaeche); }
textarea.feld { min-height: 130px; resize: vertical; }
.feld-reihe { display: grid; gap: 16px; }
@media (min-width: 640px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
.formular-fuss { display: grid; gap: 12px; }
.formular-status { font-size: 14px; color: var(--ink-soft); }
.formular-status[data-art="ok"] { color: var(--gruen-satt); background: var(--gruen-flaeche); border: 1px solid #cdeedd; border-radius: var(--r-mittel); padding: 12px 14px; }
.formular-status[data-art="fehler"] { color: var(--amber-ink); background: var(--amber-flaeche); border: 1px solid var(--amber-kontur); border-radius: var(--r-mittel); padding: 12px 14px; }
.honig { position: absolute; left: -9999px; }
.gespraech-aside { display: grid; gap: 18px; }
.kontakt-karte { background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 22px; display: grid; gap: 10px; }
.kontakt-karte h3 { font-size: 17px; }
.kontakt-karte a { text-decoration: none; font-weight: 500; }
.kontakt-karte a:hover { text-decoration: underline; }
.kontakt-karte p { color: var(--ink-soft); font-size: 14.5px; }
.danach { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: s; }
.danach li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14.5px; color: var(--ink-soft); align-items: start; }
.danach li::before { counter-increment: s; content: counter(s); font-family: var(--f-mono); font-size: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--kachel); border: 1px solid var(--kontur); display: grid; place-items: center; color: var(--ink); }
.danach li strong { color: var(--ink); }

/* ── Fuß ─────────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--kontur); padding: 36px 0 44px; color: var(--ink-soft); font-size: 14px; }
.fuss-innen { display: grid; gap: 12px; }
.fuss .wortmarke { font-size: 18px; color: var(--ink); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fuss-links a { text-decoration: none; }
.fuss-links a:hover { text-decoration: underline; }

/* ── Rechtsseiten ────────────────────────────────────────────────── */
.recht { max-width: 760px; padding: 48px 0 80px; }
.recht h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 8px; }
.recht h2 { font-size: 21px; margin: 36px 0 10px; }
.recht p, .recht li { color: var(--ink-soft); font-size: 15.5px; }
.recht p + p { margin-top: 10px; }
.recht dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 14px 0; }
.recht dt { color: var(--ink-leise); font-size: 13px; font-family: var(--f-mono); letter-spacing: .04em; padding-top: 3px; }
.recht dd { margin: 0; color: var(--ink); font-size: 15.5px; }
.recht .stand-datum { color: var(--ink-leise); font-size: 13.5px; }
@media (max-width: 560px) { .recht dl { grid-template-columns: 1fr; gap: 2px 0; } .recht dd { margin-bottom: 10px; } }

/* ── Reduzierte Bewegung ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .takt, .hero-sub, .hero-schalter, .hero-cta, .hero-takt4, .hero-mockup { opacity: 1; transform: none; }
  .takt em { background-size: 100% .09em; }
  .laeufer { display: none !important; }
  .saeumig-zeile .aktion { opacity: 1; transform: none; }
}

/* ── Animationsstufe 2 (2026-09-04): die Geschichte bewegt sich ──── */
/* Wortmarke: der Punkt springt einmal beim Laden; im Herkunfts-Block noch einmal. */
.kopf .wortmarke .punkt { display: inline-block; animation: punkt-pop .6s 1.1s var(--ease) both; }
@keyframes punkt-pop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.punkt-satz .punkt { display: inline-block; }
.herkunft.da .punkt-satz .punkt { animation: punkt-pop .7s .5s var(--ease) both; }
/* Hero-Glow treibt langsam. */
.hero::before { animation: treiben 22s ease-in-out infinite alternate; }
@keyframes treiben { to { transform: translate(-6%, 4%) scale(1.08); } }
/* Aufnahme: Welle neben dem Etikett, der Punkt im Diktieren-Knopf pulsiert. */
.wb-welle { display: none; margin-left: 10px; vertical-align: -2px; gap: 2px; height: 12px; }
.wb-welle i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--marke); animation: welle .8s ease-in-out infinite; }
.wb-welle i:nth-child(2) { animation-delay: .12s; }
.wb-welle i:nth-child(3) { animation-delay: .24s; }
.wb-welle i:nth-child(4) { animation-delay: .36s; }
.wb-welle i:nth-child(5) { animation-delay: .48s; }
.wb.aufnahme .wb-welle { display: inline-flex; }
.wb.aufnahme .wb-diktieren::before { animation: puls .6s ease-in-out infinite; }
@keyframes welle { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
/* Karten leuchten beim Eintreffen kurz auf. */
.wb-karte.da { animation: karte-ein .9s var(--ease); }
@keyframes karte-ein { 0% { box-shadow: 0 0 0 0 rgba(58, 189, 208, .45); } 100% { box-shadow: 0 0 0 10px rgba(58, 189, 208, 0); } }
/* Der Klick, mit dem etwas fertig wird. */
.wb-leiste .knopf-mini.klick { animation: klick .4s var(--ease); background: var(--marke); border-color: var(--marke); color: var(--tief); }
@keyframes klick { 0% { transform: scale(1); } 40% { transform: scale(.9); } 100% { transform: scale(1); } }
.wb-zeile.wechsel { animation: wechsel 1.4s ease-out; border-radius: var(--r-klein); }
@keyframes wechsel { 0% { background: var(--gruen-flaeche); } 100% { background: transparent; } }
.wb-stempel { display: none; align-items: center; gap: 7px; margin-left: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--gruen-satt); white-space: nowrap; }
.wb-stempel i { width: 9px; height: 9px; border-radius: 50%; background: var(--marke); box-shadow: 0 0 0 3px var(--marke-flaeche); }
.wb-stempel.da { display: inline-flex; animation: stempel .6s var(--ease) both; }
.wb-stempel.da i { animation: punkt-pop .7s .2s var(--ease) both; }
.wb-leiste .wb-stempel.da ~ .knopf-mini { display: none; }
@keyframes stempel { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
/* Blitz, wenn „Beispiel ansehen" die Werkbank neu startet. */
.wb.blitz { animation: blitz 1.3s var(--ease); }
@keyframes blitz { 0% { box-shadow: var(--schatten), 0 0 0 0 rgba(58, 189, 208, .6); } 100% { box-shadow: var(--schatten), 0 0 0 18px rgba(58, 189, 208, 0); } }
/* Stationen: die Linie füllt sich hinter dem Vorgang. */
@media (min-width: 900px) {
  .stationen::after { content: ''; position: absolute; left: 4%; top: 14px; height: 2px; width: 0; background: var(--marke); border-radius: 1px; z-index: 1; }
  .stationen.laeuft::after { animation: linie 3.6s .75s linear forwards; }
  @keyframes linie { 0% { width: 6%; } 100% { width: 86%; } }
}
/* Heute: die Aufgaben werden abgenommen, Morgen hakt sie ab. */
.vergleich-karte--heute li span { position: relative; justify-self: start; transition: color .5s; }
.vergleich-karte--heute li span::after { content: ''; position: absolute; left: 0; top: 56%; height: 1.5px; width: 0; background: var(--ink-leise); transition: width .5s var(--ease); }
.vergleich-karte--heute.da li span { color: var(--ink-leise); }
.vergleich-karte--heute.da li span::after { width: 100%; }
.vergleich-karte--heute.da li:nth-child(1) span, .vergleich-karte--heute.da li:nth-child(1) span::after { transition-delay: 1.1s; }
.vergleich-karte--heute.da li:nth-child(2) span, .vergleich-karte--heute.da li:nth-child(2) span::after { transition-delay: 1.4s; }
.vergleich-karte--heute.da li:nth-child(3) span, .vergleich-karte--heute.da li:nth-child(3) span::after { transition-delay: 1.7s; }
.vergleich-karte--heute.da li:nth-child(4) span, .vergleich-karte--heute.da li:nth-child(4) span::after { transition-delay: 2s; }
.vergleich-karte--mit li svg { transform: scale(0); }
.vergleich-karte--mit.da li svg { animation: haken .5s var(--ease) forwards; }
.vergleich-karte--mit.da li:nth-child(1) svg { animation-delay: 1.3s; }
.vergleich-karte--mit.da li:nth-child(2) svg { animation-delay: 1.6s; }
.vergleich-karte--mit.da li:nth-child(3) svg { animation-delay: 1.9s; }
@keyframes haken { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
/* Handy: das Mikrofon nimmt auf. */
.handy-mikro { position: relative; }
.handy-mikro::before, .handy-mikro::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--marke); opacity: 0; animation: ring 2.4s ease-out infinite; }
.handy-mikro::after { animation-delay: 1.2s; }
@keyframes ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }
/* Gatter: Freigeben ruft, Ausführen bestätigt. */
.gatter.wartet .gatter-knoepfe .frei { animation: ruf 1.2s ease-in-out infinite; }
@keyframes ruf { 0%, 100% { box-shadow: 0 0 0 0 rgba(58, 189, 208, .5); } 50% { box-shadow: 0 0 0 8px rgba(58, 189, 208, 0); } }
.gatter-kasten--aus { position: relative; }
.gatter-haken { position: absolute; top: 14px; right: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--gruen); color: var(--tief); display: grid; place-items: center; font-weight: 700; font-size: 15px; transform: scale(0); }
.gatter.frei .gatter-haken { animation: haken .6s .9s var(--ease) forwards; }
/* Karten heben sich unter der Maus. */
@media (hover: hover) {
  .rolle, .fakt, .kachel, .datei, .beweis, .stand, .kontakt-karte, .frage { transition: opacity .75s var(--ease), transform .4s var(--ease), border-color .25s, box-shadow .25s; }
  .rolle:hover, .fakt:hover, .kachel:hover, .datei:hover, .beweis:hover, .stand:hover, .kontakt-karte:hover, .frage:hover { transform: translateY(-2px); border-color: var(--marke-hell); box-shadow: 0 14px 30px -20px rgba(10, 42, 61, .35); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-welle { display: none !important; }
  .vergleich-karte--mit li svg, .gatter-haken { transform: none; }
  .hero::before, .handy-mikro::before, .handy-mikro::after { animation: none; }
}
.mehr { margin-top: 28px; }
.abschnitt--tief .mehr .knopf--still { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }

/* ── Datenseite: Fluss, Tabelle, Betrieb, Verträge ───────────────── */
.abschnitt--kurz { padding-bottom: clamp(24px, 4vw, 40px); }
.fluss-wrap { overflow-x: auto; background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 12px; }
.fluss { display: block; min-width: 760px; width: 100%; height: auto; font-family: var(--f-text); }
.fluss .zone { fill: var(--flaeche); stroke: var(--kontur); }
.fluss .zone--ki { fill: #fff; stroke: var(--marke-hell); stroke-dasharray: 6 5; animation: ki-zone 11s linear infinite; }
@keyframes ki-zone { 0%, 36% { stroke: var(--marke-hell); } 38%, 44% { stroke: var(--marke); stroke-width: 2; } 46%, 100% { stroke: var(--marke-hell); } }
.fluss .zonen-titel { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-leise); }
.fluss .knoten { fill: #fff; stroke: var(--kontur); stroke-width: 1.2; }
.fluss .knoten--handakte { stroke: var(--marke); stroke-width: 1.8; }
.fluss .titel-k { font-family: var(--f-marke); font-weight: 700; font-size: 16px; fill: var(--ink); }
.fluss .sub { font-size: 11.5px; fill: var(--ink-soft); }
.fluss .pfad { fill: none; stroke: var(--kontur); stroke-width: 2; }
.fluss .pfad-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-leise); }
.fluss .gate { fill: #fff; stroke: var(--amber); stroke-width: 2; animation: gate-fluss 11s linear infinite; }
@keyframes gate-fluss { 0%, 68% { fill: #fff; stroke: var(--amber); } 70%, 78% { fill: var(--amber-flaeche); stroke: var(--amber); } 80%, 94% { fill: var(--gruen-flaeche); stroke: var(--gruen-satt); } 100% { fill: #fff; stroke: var(--amber); } }
.fluss .system .knoten { animation: system-fluss 11s linear infinite; }
@keyframes system-fluss { 0%, 91% { stroke: var(--kontur); } 93%, 99% { stroke: var(--gruen-satt); stroke-width: 1.8; } 100% { stroke: var(--kontur); } }
.paket { fill: var(--marke); opacity: 0; offset-rotate: 0deg; animation-duration: 11s; animation-timing-function: linear; animation-iteration-count: infinite; }
.paket--1 { offset-path: path('M 144 120 C 200 120 200 200 250 200'); animation-name: paket-1; }
.paket--2 { offset-path: path('M 420 190 C 500 190 520 115 640 115'); animation-name: paket-2; }
.paket--3 { offset-path: path('M 640 145 C 520 145 500 230 420 230'); fill: var(--gruen-satt); animation-name: paket-3; }
.paket--4 { offset-path: path('M 335 270 C 335 330 400 330 482 330'); fill: var(--amber); animation-name: paket-4; }
.paket--5 { offset-path: path('M 530 330 L 588 330'); fill: var(--gruen-satt); animation-name: paket-5; }
@keyframes paket-1 { 0%, 4% { opacity: 0; offset-distance: 0%; } 5% { opacity: 1; } 17% { opacity: 1; offset-distance: 100%; } 18%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes paket-2 { 0%, 23% { opacity: 0; offset-distance: 0%; } 24% { opacity: 1; } 37% { opacity: 1; offset-distance: 100%; } 38%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes paket-3 { 0%, 41% { opacity: 0; offset-distance: 0%; } 42% { opacity: 1; } 55% { opacity: 1; offset-distance: 100%; } 56%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes paket-4 { 0%, 59% { opacity: 0; offset-distance: 0%; } 60% { opacity: 1; } 69% { opacity: 1; offset-distance: 100%; } 70%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes paket-5 { 0%, 79% { opacity: 0; offset-distance: 0%; } 80% { opacity: 1; } 91% { opacity: 1; offset-distance: 100%; } 92%, 100% { opacity: 0; offset-distance: 100%; } }
.schritte { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
@media (min-width: 900px) { .schritte { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.schritte li { counter-increment: st; background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 18px 18px 16px; font-size: 14.5px; color: var(--ink-soft); }
.schritte li::before { content: counter(st); display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--marke-ink); margin-bottom: 8px; }
.schritte li strong { color: var(--ink); display: block; margin-bottom: 4px; }
.tabelle-wrap { overflow-x: auto; background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); }
.tabelle { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.tabelle th { text-align: left; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-leise); padding: 14px 18px; border-bottom: 1px solid var(--kontur); }
.tabelle td { padding: 14px 18px; border-bottom: 1px solid var(--kontur-hell); vertical-align: top; color: var(--ink-soft); }
.tabelle td strong { color: var(--ink); }
.tabelle td span { font-size: 13.5px; color: var(--ink-leise); }
.tabelle tr:last-child td { border-bottom: 0; }
.hinweis { margin-top: 18px; font-size: 14.5px; color: var(--ink-soft); max-width: 78ch; }
.wb--betrieb { font-size: 13.5px; }
.betrieb-tabelle-wrap { overflow-x: auto; }
.betrieb-tabelle { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.betrieb-tabelle th { text-align: left; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-leise); padding: 8px 10px; border-bottom: 1px solid var(--kontur); }
.betrieb-tabelle td { padding: 9px 10px; border-bottom: 1px solid var(--kontur-hell); color: var(--ink); white-space: nowrap; }
.betrieb-tabelle td:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.betrieb-tabelle .num { text-align: right; font-family: var(--f-mono); font-size: 12.5px; }
.betrieb-tabelle th.num { text-align: right; }
.betrieb-tabelle tfoot td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--kontur); background: var(--flaeche); }
.b-stand { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 2px 8px; border-radius: 100px; background: var(--kachel); color: var(--ink-soft); border: 1px solid var(--kontur); }
.b-stand[data-art="laeuft"] { background: var(--marke-flaeche); color: var(--marke-ink); border-color: #bfe6ee; }
.b-stand[data-art="fertig"] { background: var(--gruen-flaeche); color: var(--gruen-satt); border-color: #cdeedd; }
.vertraege { display: grid; gap: 20px; }
@media (min-width: 900px) { .vertraege { grid-template-columns: 1fr 1fr; } }
.haken-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.haken-liste li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; color: var(--ink-soft); align-items: start; }
.haken-liste li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--gruen-satt); }
.haken-liste strong { color: var(--ink); }
.selbst a { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .paket { display: none; }
  .fluss .gate, .fluss .zone--ki, .fluss .system .knoten { animation: none; }
}

/* ── Werkbank: Kartenausschnitt in der Beschaffungs-Karte ────────── */
.wb-map { position: relative; aspect-ratio: 16 / 9; margin-top: 2px; border: 1px solid var(--kontur); border-radius: var(--r-klein); overflow: hidden; background: var(--kachel); }
.wb-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.wb-map.da img { opacity: 1; }
.wb-ring { position: absolute; transform: translate(-50%, -50%); border: 1.5px dashed var(--marke-ink); border-radius: 50%; opacity: 0; transition: opacity .6s .3s; pointer-events: none; }
.wb-map.da .wb-ring { opacity: .55; }
.wb-pin { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--marke); color: var(--tief); font: 600 10px/1 var(--f-mono); display: grid; place-items: center;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(7, 21, 32, .35); transform: translate(-50%, -50%) scale(0); }
.wb-pin--haus { width: 20px; height: 20px; background: var(--tief); }
.wb-map.da .wb-pin { animation: pin-pop .5s var(--ease) forwards; }
.wb-map.da .wb-pin--haus { animation-delay: .35s; }
.wb-map.da .wb-pin:nth-of-type(3) { animation-delay: .6s; }
.wb-map.da .wb-pin:nth-of-type(4) { animation-delay: .8s; }
.wb-map.da .wb-pin:nth-of-type(5) { animation-delay: 1s; }
.wb-map.da .wb-pin:nth-of-type(6) { animation-delay: 1.2s; }
@keyframes pin-pop { 0% { transform: translate(-50%, -50%) scale(0); } 70% { transform: translate(-50%, -50%) scale(1.25); } 100% { transform: translate(-50%, -50%) scale(1); } }
.wb-map-credit { position: absolute; right: 4px; bottom: 2px; font: 400 8.5px/1.2 var(--f-text); color: var(--ink-soft); background: rgba(255, 255, 255, .78); padding: 1px 4px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .wb-pin { transform: translate(-50%, -50%) scale(1); } .wb-map img { opacity: 1; } }

/* ── Datenfluss v2: Zonen, nummerierte Stationen, Grenzen, Legende ─ */
.fluss--v2 { min-width: 840px; }
.fluss--v2 .zone--haus { fill: #f4f9fd; stroke: #bcd8ef; }
.fluss--v2 .zone--ki { fill: #fff; stroke: var(--marke); }
.fluss--v2 .zone--sys { fill: #f3faf6; stroke: #bfe3d0; }
.fluss--v2 .zonen-titel { font-size: 12px; font-weight: 600; }
.fluss--v2 .zonen-titel--blau { fill: #0a6fbe; }
.fluss--v2 .zonen-titel--teal { fill: var(--marke-ink); }
.fluss--v2 .zonen-titel--gruen { fill: var(--gruen-satt); }
.fluss--v2 .sub--betont { fill: var(--ink); font-weight: 600; }
.fluss--v2 .karte { fill: #fff; stroke: var(--kontur); stroke-width: 1.2; }
.fluss--v2 .karte--betont { stroke: #0a6fbe; stroke-width: 1.6; }
.fluss--v2 .karte--betont-teal { stroke: var(--marke); stroke-width: 1.6; }
.fluss--v2 .karte--betont-gruen { stroke: var(--gruen-satt); stroke-width: 1.6; }
.fluss--v2 .nr { stroke: #fff; stroke-width: 2.5; }
.fluss--v2 .nr--blau { fill: #0a6fbe; }
.fluss--v2 .nr--teal { fill: var(--marke-ink); }
.fluss--v2 .nr--amber { fill: #c98a12; }
.fluss--v2 .nr--gruen { fill: var(--gruen-satt); }
.fluss--v2 .nr-text { font-family: var(--f-marke); font-weight: 700; font-size: 14px; fill: #fff; }
.fluss--v2 .ikon { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fluss--v2 .ikon--blau { stroke: #0a6fbe; }
.fluss--v2 .ikon--teal { stroke: var(--marke-ink); }
.fluss--v2 .ikon--gruen { stroke: var(--gruen-satt); }
.fluss--v2 .ikon--ink { stroke: var(--ink); }
.fluss--v2 .ikon--klein { stroke-width: 2.2; }
.fluss--v2 .chip { stroke: none; }
.fluss--v2 .chip--blau { fill: #e8f2fb; }
.fluss--v2 .chip--teal { fill: var(--marke-flaeche); }
.fluss--v2 .chip--amber { fill: var(--amber-flaeche); stroke: var(--amber-kontur); stroke-width: 1; }
.fluss--v2 .chip--gruen { fill: var(--gruen-flaeche); stroke: #cdeedd; stroke-width: 1; }
.fluss--v2 .chip-t { font-size: 11.5px; font-weight: 600; fill: var(--ink); }
.fluss--v2 .chip-s { font-size: 10.5px; fill: var(--ink-soft); }
.fluss--v2 .chip-s--amber { fill: var(--amber-ink); font-weight: 600; }
.fluss--v2 .chip-s--gruen { fill: var(--gruen-satt); font-weight: 600; }
.fluss--v2 .grenze { font-size: 10.5px; fill: var(--ink); }
.fluss--v2 .sys-t { font-family: var(--f-marke); font-weight: 700; font-size: 14px; fill: var(--ink); }
.fluss--v2 .sys-s { font-size: 10.5px; fill: var(--ink-soft); }
.fluss--v2 .pfad { fill: none; stroke-width: 2.2; }
.fluss--v2 .pfad--blau { stroke: #0a6fbe; }
.fluss--v2 .pfad--teal { stroke: var(--marke-ink); stroke-dasharray: 5 4; }
.fluss--v2 .pfad--amber { stroke: #c98a12; }
.fluss--v2 .pfad--gruen { stroke: var(--gruen-satt); }
.fluss--v2 .pfad--grau { stroke: var(--ink-stumm); stroke-width: 1.5; }
.fluss--v2 .gate { fill: #fff; stroke: #c98a12; stroke-width: 2; }
.fluss--v2 .gate-haken { fill: var(--gruen); stroke: #fff; stroke-width: 2; opacity: 0; animation: haken-fluss 11s linear infinite; }
.fluss--v2 .gate-haken-strich { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: haken-fluss 11s linear infinite; }
@keyframes haken-fluss { 0%, 79% { opacity: 0; } 81%, 96% { opacity: 1; } 100% { opacity: 0; } }
.fluss--v2 .system .karte { animation: system-fluss 11s linear infinite; }
.fluss--v2 .paket--1 { offset-path: path('M 152 235 L 182 235'); }
.fluss--v2 .paket--2 { offset-path: path('M 312 220 L 382 220'); }
.fluss--v2 .paket--3 { offset-path: path('M 382 250 L 312 250'); }
.fluss--v2 .paket--4 { offset-path: path('M 246 386 V 452 Q 246 470 264 470 H 476'); }
.fluss--v2 .paket--5 { offset-path: path('M 544 470 H 660 Q 676 470 676 454 V 318 Q 676 302 692 302 H 706'); }
.fluss--v2 .paket--1 { fill: #0a6fbe; }
.fluss--v2 .paket--2 { fill: var(--marke-ink); }
.fluss--v2 .paket--4 { fill: #c98a12; }
.legende { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.legende-item { display: inline-flex; align-items: center; gap: 9px; }
.legende-pfeil { display: inline-block; width: 26px; height: 0; border-top: 2.5px solid; position: relative; flex: none; }
.legende-pfeil::after { content: ''; position: absolute; right: -2px; top: -5.5px; border: 4px solid transparent; border-left: 7px solid currentColor; }
.legende-pfeil--blau { color: #0a6fbe; }
.legende-pfeil--teal { color: var(--marke-ink); border-top-style: dashed; }
.legende-pfeil--amber { color: #c98a12; }
.legende-pfeil--gruen { color: var(--gruen-satt); }
.legende-marke { margin-left: auto; font-weight: 500; color: var(--ink); display: inline-flex; align-items: baseline; gap: 8px; }
.legende-marke .wortmarke { font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .fluss--v2 .gate-haken, .fluss--v2 .gate-haken-strich { animation: none; opacity: 1; } .fluss--v2 .system .karte { animation: none; } }

/* ── Einrichtungsablauf ──────────────────────────────────────────── */
.ablaufliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
@media (min-width: 720px) { .ablaufliste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ablaufliste { grid-template-columns: repeat(3, 1fr); } }
.ablauf-schritt { position: relative; background: var(--karte); border: 1px solid var(--kontur); border-radius: var(--r-gross); padding: 22px 22px 20px 22px; display: grid; gap: 10px; align-content: start; }
.ablauf-schritt--vertrag { border-color: var(--marke); box-shadow: 0 0 0 3px var(--marke-flaeche); }
.ablauf-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--tief); color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: 13px; display: grid; place-items: center; }
.ablauf-schritt--vertrag .ablauf-nr { background: var(--marke); color: var(--tief); }
.ablauf-schritt h3 { font-size: 18px; }
.ablauf-schritt p { color: var(--ink-soft); font-size: 14.5px; }
.ablauf-tag { justify-self: start; margin-top: 4px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-leise); background: var(--kachel); border: 1px solid var(--kontur); border-radius: 100px; padding: 4px 10px; }
.ablauf-tag--vertrag { color: var(--marke-ink); background: var(--marke-flaeche); border-color: #bfe6ee; }
.ablauf-tag a { color: inherit; }