/*
  Stil der Webseite (Plan 038 Abschnitt 3).

  Farben und Schriften kommen aus dem softwelop Brand Guide, derselbe Satz wie
  im Panel (ui/src/styles.scss): Core Logic, Bright Code, Deep Trust, Signal
  Orange, Soft Spark, Powerline Red. Feste Farbwerte stehen nur in den beiden
  Token-Blöcken; alles darunter arbeitet mit den Variablen.

  Bewegung: nur transform und opacity, nichts über 400 ms außer den bewusst
  langsamen Schleifen im Komponentenbild und im Apply-Zyklus. Bei
  prefers-reduced-motion steht alles still und ist trotzdem vollständig zu sehen.
*/

@font-face { font-family: Gilmer; src: url('/assets/fonts/gilmer-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Montserrat; src: url('/assets/fonts/montserrat-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: Montserrat; src: url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Montserrat; src: url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Montserrat; src: url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* ------------------------------------------------------------ Tokens hell */
:root {
  --grund: #ffffff;
  --flaeche: #f7f7fc;
  --flaeche-hoch: #eef0f8;
  --linie: #d3d4e4;
  --text: #21264e;
  --text-leise: #4a4f70;
  --primaer: #194093;
  --auf-primaer: #ffffff;
  --primaer-flaeche: #d9e5f6;
  --hell: #a3c7eb;
  --signal: #f18557;
  --signal-tief: #a04117;
  --spark: #f7ae67;
  --spark-flaeche: #fff1e0;
  --rot: #e36150;
  --rot-tief: #ad3128;
  --rot-flaeche: #ffdad3;
  --gruen: #1f7a4d;
  --gruen-flaeche: #dcf2e6;
  --verlauf-tief: linear-gradient(135deg, #21264e 0%, #194093 100%);
  --verlauf-signal: linear-gradient(135deg, #e36150 0%, #f18557 100%);
  --verlauf-hell: linear-gradient(135deg, #a3c7eb 0%, #f6e9df 100%);
  --schatten: 0 1px 2px rgba(33, 38, 78, .06), 0 12px 32px -12px rgba(33, 38, 78, .18);
  --radius: 14px;
  --radius-klein: 8px;
  --schrift: Montserrat, 'Segoe UI', system-ui, sans-serif;
  --schrift-titel: Gilmer, Montserrat, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
  --schnell: 120ms;
  --normal: 200ms;
  --langsam: 320ms;
  --kurve: cubic-bezier(.2, 0, 0, 1);
  --kurve-aus: cubic-bezier(.05, .7, .1, 1);
  --breite: 1180px;
}

/* ---------------------------------------------------------- Tokens dunkel */
:root[data-theme='dark'] {
  --grund: #161a3a;
  --flaeche: #21264e;
  --flaeche-hoch: #2b3160;
  --linie: #3d4373;
  --text: #f0f0fb;
  --text-leise: #b9bdd8;
  --primaer: #a3c7eb;
  --auf-primaer: #0e2247;
  --primaer-flaeche: #2a4a86;
  --hell: #a3c7eb;
  --signal: #f18557;
  --signal-tief: #f7ae67;
  --spark: #f7ae67;
  --spark-flaeche: #4a3420;
  --rot: #e36150;
  --rot-tief: #ffb4a8;
  --rot-flaeche: #5a2320;
  --gruen: #7fd3a4;
  --gruen-flaeche: #1f3d2e;
  --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--grund);
  /* clip statt hidden: hidden lässt ein Handy trotzdem herauszoomen, wenn
     etwas übersteht; clip schneidet ab, ohne den Viewport zu vergrößern. */
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--primaer); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
code, pre { font-family: var(--mono); font-size: .92em; }
code { background: var(--flaeche-hoch); padding: .1em .35em; border-radius: 4px; }
pre { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 1rem 1.2rem; overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; }
img, svg { max-width: 100%; }
.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.25em; }
.sprung { position: absolute; left: -999px; top: 0; background: var(--primaer); color: var(--auf-primaer); padding: .5rem 1rem; z-index: 100; }
.sprung:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 4px; }
.innen { width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; }
.klein { font-size: .85rem; color: var(--text-leise); }
.leise { color: var(--text-leise); }

/* ----------------------------------------------------------- Hinweisband */
.hinweisband { background: var(--spark-flaeche); border-bottom: 1px solid color-mix(in srgb, var(--spark) 50%, transparent); font-size: .9rem; }
.hinweisband a { display: flex; align-items: center; gap: .6rem; width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; padding: .55rem 0; color: var(--text); text-decoration: none; }
.hinweisband .icon { color: var(--signal-tief); }
.hinweisband strong { font-weight: 600; white-space: nowrap; }
.hinweisband span { flex: 1; color: var(--text-leise); }
.hinweisband em { font-style: normal; font-weight: 500; }
.hinweisband a:hover span { color: var(--text); }
@media (max-width: 640px) { .hinweisband span { display: none; } }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.5rem;
  width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; padding: .8rem 0;
  background: color-mix(in srgb, var(--grund) 85%, transparent);
  backdrop-filter: blur(12px);
}
.kopf::after { content: ''; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; height: 1px; background: var(--linie); z-index: -1; }
.kopf::before { content: ''; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 0; bottom: 0; background: inherit; z-index: -1; }
.marke-link { color: var(--text); display: inline-flex; }
.marke-link .logo { height: 28px; width: auto; }
.hauptnav { display: flex; gap: .2rem; margin-inline: auto; }
.hauptnav a { color: var(--text); text-decoration: none; padding: .45rem .8rem; border-radius: 999px; font-weight: 500; font-size: .95rem; transition: background var(--schnell) var(--kurve); }
.hauptnav a:hover { background: var(--flaeche-hoch); }
.hauptnav a[aria-current='page'] { background: var(--primaer-flaeche); color: var(--text); }
:root[data-theme='dark'] .hauptnav a[aria-current='page'] { color: #fff; }
.kopf-rechts { display: flex; align-items: center; gap: .6rem; }
.kanal-pille { display: flex; border: 1px solid var(--linie); border-radius: 999px; overflow: hidden; font-size: .78rem; font-family: var(--mono); }
.kanal-pille a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; color: var(--text-leise); text-decoration: none; }
.kanal-pille a + a { border-left: 1px solid var(--linie); }
.kanal-pille a:hover { background: var(--flaeche-hoch); color: var(--text); }
.punkt-test, .punkt-stabil { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.punkt-test { background: var(--signal); }
.punkt-stabil { background: var(--primaer); }
.schema, .menue { background: none; border: 1px solid var(--linie); border-radius: 999px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; transition: transform var(--schnell) var(--kurve); }
.schema:hover, .menue:hover { transform: scale(1.06); }
.schema svg { width: 20px; height: 20px; }
.schema .mond { display: none; }
:root[data-theme='dark'] .schema .sonne { display: none; }
:root[data-theme='dark'] .schema .mond { display: block; }
.menue { display: none; flex-direction: column; gap: 4px; }
.menue span { width: 16px; height: 1.5px; background: currentColor; display: block; transition: transform var(--normal) var(--kurve), opacity var(--normal); }
@media (max-width: 1000px) {
  .kanal-pille { display: none; }
  .menue { display: inline-flex; }
  .hauptnav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--grund); border-bottom: 1px solid var(--linie); padding: .6rem 0 1rem; margin: 0; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform var(--normal) var(--kurve), opacity var(--normal); }
  .kopf.offen .hauptnav { transform: none; opacity: 1; pointer-events: auto; }
  .kopf.offen .menue span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .kopf.offen .menue span:nth-child(2) { opacity: 0; }
  .kopf.offen .menue span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* ----------------------------------------------------------------- Held */
.held { position: relative; color: #f0f0fb; background: var(--verlauf-tief); overflow: hidden; isolation: isolate; }
.held .innen { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 7vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center; }
.held h1 { color: #fff; margin-bottom: 1rem; }
.held .vorzeile { color: var(--hell); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: 1rem; }
.held .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 300; max-width: 38rem; color: #dfe4f5; }
.held .lead strong { font-weight: 500; color: #fff; }
.held .wort { display: inline-block; opacity: 0; transform: translateY(.6em); animation: wort-auf 600ms var(--kurve-aus) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes wort-auf { to { opacity: 1; transform: none; } }
.held .netz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .55; }
.held .netz line { stroke: #a3c7eb; stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: linie-zeichnen 2.4s var(--kurve-aus) forwards; animation-delay: var(--d, 0ms); }
.held .netz circle { fill: #a3c7eb; opacity: 0; animation: punkt-auf 600ms var(--kurve-aus) forwards; animation-delay: var(--d, 0ms); }
.held .netz .puls { fill: none; stroke: #f18557; stroke-width: 1.5; opacity: 0; transform-origin: center; transform-box: fill-box; animation: puls 3.2s ease-out infinite; animation-delay: var(--d, 0ms); }
@keyframes linie-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes punkt-auf { to { opacity: 1; } }
@keyframes puls { 0% { transform: scale(.3); opacity: .9; } 70% { opacity: 0; } 100% { transform: scale(3); opacity: 0; } }
.held .netz .wandern { animation: wandern 14s ease-in-out infinite alternate; }
@keyframes wandern { to { transform: translate(10px, -14px); } }
.held-karte { background: rgba(255, 255, 255, .06); border: 1px solid rgba(163, 199, 235, .3); border-radius: var(--radius); padding: 1.4rem 1.5rem; backdrop-filter: blur(6px); }
.held-karte h2 { font-size: 1.05rem; color: #fff; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.held-karte h2 .icon { color: var(--spark); }
.held-karte p { font-size: .93rem; color: #dfe4f5; font-weight: 300; }
.held-karte p:last-child { margin: 0; }
.held-karte a { color: #fff; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.knopf { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem; border-radius: 999px; font-weight: 500; text-decoration: none; transition: transform var(--schnell) var(--kurve), box-shadow var(--schnell); border: 1px solid transparent; }
.knopf:hover { transform: translateY(-2px); text-decoration: none; }
.knopf-signal { background: var(--verlauf-signal); color: #fff; box-shadow: 0 8px 24px -8px rgba(241, 133, 87, .7); }
.knopf-hell { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.knopf-primaer { background: var(--primaer); color: var(--auf-primaer); }
.knopf-rand { border-color: var(--linie); color: var(--text); }
.knopf .icon { transition: transform var(--schnell) var(--kurve); }
.knopf:hover .icon { transform: translateX(3px); }
.abzeichen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.abzeichen span { font-size: .78rem; font-family: var(--mono); border: 1px solid rgba(163, 199, 235, .4); border-radius: 999px; padding: .25rem .7rem; color: #dfe4f5; }
@media (max-width: 900px) { .held .innen { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- Bereiche */
.bereich { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.bereich-flaeche { background: var(--flaeche); }
.bereich-kopf { max-width: 44rem; margin-bottom: 2.2rem; }
.vorzeile { color: var(--signal-tief); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; margin-bottom: .6rem; }
.lead { font-size: 1.15rem; font-weight: 300; color: var(--text-leise); }
.lead strong { font-weight: 500; color: var(--text); }
.seitenkopf { padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; max-width: 52rem; }
.seitenkopf + * { width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; }
main > section, main > article, main > aside, main > p, main > div { width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; }
main > section.held, main > section.bereich, main > .breit { width: auto; }
main > section.bereich > .innen { width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; }
.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.drei { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.karte { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--schatten); transition: transform var(--normal) var(--kurve), box-shadow var(--normal); }
.karte:hover { transform: translateY(-3px); }
.karte h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.karte h3 .icon { color: var(--primaer); }
.karte p:last-child { margin: 0; }
.karte-signal { border-color: color-mix(in srgb, var(--signal) 50%, transparent); background: var(--spark-flaeche); }
.karte-signal h3 .icon { color: var(--signal-tief); }
.prosa { max-width: 46rem; }
.prosa h2 { margin-top: 2.2rem; }
.prosa h3 { margin-top: 1.6rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .4rem; }
.prosa table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; font-size: .95rem; display: block; overflow-x: auto; }
.prosa th, .prosa td { text-align: left; border-bottom: 1px solid var(--linie); padding: .5rem .6rem; vertical-align: top; }
.prosa th { font-weight: 600; }
.prosa blockquote { margin: 1rem 0; padding: .8rem 1.2rem; border-left: 3px solid var(--signal); background: var(--flaeche); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }

/* Erscheinen beim Scrollen: opacity und transform, sonst nichts. */
.erscheint { opacity: 0; transform: translateY(18px); transition: opacity var(--langsam) var(--kurve-aus), transform var(--langsam) var(--kurve-aus); transition-delay: var(--verzug, 0ms); }
.erscheint.sichtbar { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Kennzahlen */
.kennzahlen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.kennzahlen li { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem 1.2rem 1rem; text-align: center; }
.kennzahlen .zahl { display: block; font-family: var(--schrift-titel); font-size: 2.4rem; line-height: 1; color: var(--primaer); margin-bottom: .4rem; font-variant-numeric: tabular-nums; }
.kennzahlen strong { display: block; font-weight: 600; font-size: .95rem; }
.kennzahlen .unter { display: block; font-size: .8rem; color: var(--text-leise); }

/* --------------------------------------------------------- Funktionen */
.gruppen-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.kachel a { display: grid; gap: .3rem; height: 100%; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.2rem 1.3rem; text-decoration: none; color: var(--text); transition: transform var(--normal) var(--kurve), border-color var(--normal); }
.kachel a:hover { transform: translateY(-3px); border-color: var(--primaer); }
.kachel .motiv { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; background: var(--primaer-flaeche); color: var(--primaer); align-items: center; justify-content: center; margin-bottom: .4rem; }
:root[data-theme='dark'] .kachel .motiv { color: #fff; }
.kachel .motiv .icon { width: 22px; height: 22px; }
.kachel strong { font-family: var(--schrift-titel); font-size: 1.1rem; }
.kachel .zahl { font-size: .78rem; color: var(--signal-tief); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.kachel .kurz { font-size: .9rem; color: var(--text-leise); font-weight: 300; }
.gruppe { padding: 2.5rem 0; border-top: 1px solid var(--linie); scroll-margin-top: 5rem; }
.gruppe:first-of-type { border-top: 0; }
.gruppe-kopf { display: flex; gap: 1rem; align-items: flex-start; max-width: 46rem; margin-bottom: 1.4rem; }
.gruppe-kopf .motiv { flex: none; display: inline-flex; width: 52px; height: 52px; border-radius: 14px; background: var(--verlauf-tief); color: #fff; align-items: center; justify-content: center; }
.gruppe-kopf .motiv .icon { width: 26px; height: 26px; }
.gruppe-kopf p { color: var(--text-leise); font-weight: 300; margin: 0; }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.punkt { position: relative; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.1rem 1.2rem; transition: transform var(--normal) var(--kurve), border-color var(--normal); }
.punkt:hover { transform: translateY(-2px); border-color: var(--hell); }
.punkt h3 { font-family: var(--schrift); font-weight: 600; font-size: 1rem; margin-bottom: .3rem; }
.punkt p { margin: 0; font-size: .92rem; color: var(--text-leise); }
.punkt::before { content: ''; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 3px; border-radius: 3px; background: var(--verlauf-signal); }
.inhaltsnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.inhaltsnav a { display: inline-block; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; color: var(--text); font-size: .9rem; transition: background var(--schnell); }
.inhaltsnav a:hover { background: var(--flaeche-hoch); }

/* ------------------------------------------------------- Komponentenbild */
/* Zwei Bilder aus demselben Datensatz: breit ab 760 px, schmal darunter. Das
   schmale läuft auf dem Handy über die volle Breite, damit die Schrift lesbar
   bleibt. Die Tafel sitzt am Desktop neben dem Baustein, auf dem Handy als
   Blatt am unteren Rand. */
.komponentenbild { position: relative; margin-top: .5rem; }
.komponenten-svg { display: block; width: 100%; height: auto; font-family: var(--schrift); }
.komponenten-svg.ansicht-schmal { display: none; }
@media (max-width: 759px) {
  .komponentenbild { margin-inline: -1.25rem; }
  .komponenten-svg.ansicht-breit { display: none; }
  .komponenten-svg.ansicht-schmal { display: block; }
}
.komponenten-svg .gruppe > rect { fill: var(--flaeche); stroke: var(--linie); stroke-width: 1; }
.komponenten-svg .gruppe[data-id='node'] > rect { fill: color-mix(in srgb, var(--primaer-flaeche) 40%, var(--flaeche)); }
.komponenten-svg .gruppe[data-id='aussen'] > rect,
.komponenten-svg .gruppe[data-id='besucher'] > rect { fill: none; stroke-dasharray: 6 5; }
.komponenten-svg .gruppe-titel { font-family: var(--schrift-titel); font-size: 14px; fill: var(--text); }
.komponenten-svg .punkt { cursor: pointer; outline: none; }
.komponenten-svg .punkt rect { fill: var(--grund); stroke: var(--linie); stroke-width: 1; transition: stroke var(--schnell), opacity var(--schnell); }
.komponenten-svg .punkt text { font-size: var(--punktschrift); font-weight: 500; fill: var(--text); text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: opacity var(--schnell); }
.komponenten-svg .punkt .unterzeile { font-size: 11px; font-weight: 500; fill: var(--text-leise); }
.komponenten-svg .punkt.kopf .unterzeile, .komponenten-svg .punkt[data-id='grpc'] .unterzeile { fill: var(--auf-primaer); opacity: .8; }
.komponenten-svg .punkt.kopf rect, .komponenten-svg .punkt[data-id='grpc'] rect { fill: var(--primaer); stroke: var(--primaer); }
.komponenten-svg .punkt.kopf text, .komponenten-svg .punkt[data-id='grpc'] text { fill: var(--auf-primaer); font-weight: 600; }
.komponenten-svg .punkt:hover rect, .komponenten-svg .punkt:focus-visible rect, .komponenten-svg .punkt.aktiv rect { stroke: var(--signal); stroke-width: 2; }
.komponenten-svg .punkt.leise rect, .komponenten-svg .punkt.leise text { opacity: .3; }
.komponenten-svg .kante .saum { fill: none; stroke: var(--grund); stroke-width: 7; }
.komponenten-svg .kante .linie { fill: none; stroke: color-mix(in srgb, var(--primaer) 45%, var(--grund)); stroke-width: 1.75; stroke-linejoin: round; transition: stroke var(--schnell), opacity var(--schnell); }
.komponenten-svg .kante .anschluss { fill: var(--grund); stroke: color-mix(in srgb, var(--primaer) 55%, var(--grund)); stroke-width: 1.5; }
.komponenten-svg .kante.gestrichelt .linie { stroke-dasharray: 5 5; }
.komponenten-svg .kante.takt .linie { stroke: var(--primaer); stroke-width: 2.5; }
.komponenten-svg .kante.aktiv .linie { stroke: var(--signal); stroke-width: 3; }
.komponenten-svg .kante.aktiv .anschluss { stroke: var(--signal); }
.komponenten-svg .kante.leise, .komponenten-svg .marke.leise { opacity: .15; }
.komponenten-svg .marke rect { fill: var(--grund); stroke: color-mix(in srgb, var(--primaer) 35%, var(--grund)); stroke-width: 1; }
.komponenten-svg .marke text { font-size: var(--markenschrift); font-weight: 500; fill: var(--text-leise); text-anchor: middle; dominant-baseline: central; }
.komponenten-svg .marke.aktiv rect { stroke: var(--signal); stroke-width: 1.5; }
.komponenten-svg .marke.aktiv text { fill: var(--text); }
.komponenten-svg .paket { fill: var(--signal); pointer-events: none; }
.komponenten-svg .paket.zurueck { fill: var(--spark); }
.komponenten-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; font-size: .85rem; color: var(--text-leise); margin: 1rem 0 0; }
.legende-linie { display: inline-block; width: 28px; border-top: 2px solid color-mix(in srgb, var(--primaer) 45%, var(--grund)); vertical-align: middle; margin-right: -.8rem; }
.legende-linie.gestrichelt { border-top-style: dashed; }
.legende-paket { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); margin-right: -.8rem; }
.legende-hinweis { margin-left: auto; }
.komponenten-tafel { position: absolute; z-index: 6; width: 320px; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--schatten); opacity: 0; transform: translateY(6px); transition: opacity var(--normal) var(--kurve), transform var(--normal) var(--kurve); pointer-events: none; }
.komponenten-tafel.offen { opacity: 1; transform: none; pointer-events: auto; }
.komponenten-tafel .tafel-zu { display: none; position: absolute; top: .5rem; right: .6rem; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--flaeche-hoch); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.komponenten-tafel h3 { margin-bottom: .2rem; padding-right: 2rem; }
.komponenten-tafel .tafel-gruppe { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-tief); font-weight: 600; margin-bottom: .5rem; }
.komponenten-tafel p { font-size: .92rem; margin-bottom: .6rem; }
.komponenten-tafel ul { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .85rem; }
.komponenten-tafel li { padding: .45rem 0; border-top: 1px solid var(--linie); }
.komponenten-tafel li strong { display: block; font-weight: 600; color: var(--primaer); }
.komponenten-tafel li span { color: var(--text-leise); }
@media (max-width: 759px) {
  .komponenten-legende { padding-inline: .1rem; }
  .legende-hinweis { margin-left: 0; width: 100%; }
  .komponenten-tafel { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 62vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 1.2rem 1.25rem 1.6rem; transform: translateY(100%); opacity: 1; }
  .komponenten-tafel.offen { transform: none; }
  .komponenten-tafel .tafel-zu { display: block; }
}

/* ------------------------------------------------------------- Ablauf */
.ablauf { margin-top: 3rem; }
.ablauf-text { max-width: 44rem; color: var(--text-leise); font-weight: 300; }
.schritte { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; counter-reset: schritt; position: relative; }
.schritt { position: relative; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1rem .9rem; display: grid; gap: .3rem; font-size: .88rem; animation: schritt-licht calc(var(--schritte) * 1.1s) infinite; animation-delay: calc(var(--i) * 1.1s); }
.schritt .nummer { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primaer-flaeche); color: var(--primaer); font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
:root[data-theme='dark'] .schritt .nummer { color: #fff; }
.schritt strong { font-family: var(--schrift-titel); font-size: 1rem; }
.schritt span:last-child { color: var(--text-leise); }
.schritt.fehler { border-style: dashed; }
.schritt.fehler .nummer { background: var(--rot-flaeche); color: var(--rot-tief); }
@keyframes schritt-licht {
  0% { transform: none; box-shadow: none; }
  6% { transform: translateY(-4px); box-shadow: 0 10px 24px -10px rgba(241, 133, 87, .8), inset 0 0 0 2px var(--signal); }
  20% { transform: translateY(-4px); box-shadow: 0 10px 24px -10px rgba(241, 133, 87, .8), inset 0 0 0 2px var(--signal); }
  30% { transform: none; box-shadow: none; }
  100% { transform: none; box-shadow: none; }
}

/* --------------------------------------------------------- Installation */
.schrittfolge { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.schrittfolge > li { position: relative; padding: 0 0 2rem 3.4rem; counter-increment: s; }
.schrittfolge > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--verlauf-tief); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--schrift-titel); font-size: 1.1rem; }
.schrittfolge > li::after { content: ''; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px; background: var(--linie); }
.schrittfolge > li:last-child::after { display: none; }
.schrittfolge h3 { margin-top: .4rem; }
.schrittfolge p { color: var(--text-leise); }
.schrittfolge p strong { color: var(--text); }
.schrittfolge pre { margin: .8rem 0 1rem; }
.merke { display: flex; gap: .8rem; padding: 1rem 1.2rem; border-radius: var(--radius-klein); background: var(--primaer-flaeche); color: var(--text); margin: 1rem 0; font-size: .95rem; }
:root[data-theme='dark'] .merke { color: #fff; }
.merke .icon { flex: none; margin-top: .15rem; }
.merke p { margin: 0; }
.merke-warn { background: var(--spark-flaeche); }
.merke-warn .icon { color: var(--signal-tief); }

/* ---------------------------------------------------------- Änderungen */
.quelle-hinweis, .kanal-hinweis { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--spark-flaeche); border: 1px solid color-mix(in srgb, var(--spark) 60%, transparent); margin-bottom: 1.5rem; font-size: .95rem; }
.quelle-hinweis .icon, .kanal-hinweis .icon { flex: none; color: var(--signal-tief); margin-top: .2rem; }
.kanal-hinweis.kanal-stabil { background: var(--primaer-flaeche); border-color: color-mix(in srgb, var(--primaer) 40%, transparent); }
.kanal-hinweis.kanal-stabil .icon { color: var(--primaer); }
:root[data-theme='dark'] .kanal-hinweis.kanal-stabil { color: #fff; }
:root[data-theme='dark'] .kanal-hinweis.kanal-stabil .icon { color: #fff; }
.kanal-hinweis.art-eingriff { background: var(--rot-flaeche); border-color: color-mix(in srgb, var(--rot) 60%, transparent); }
.kanal-hinweis.art-eingriff .icon { color: var(--rot-tief); }
.kanalkarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-bottom: 2.5rem; }
.kanalkarte { display: grid; gap: .25rem; padding: 1.5rem 1.6rem; border-radius: var(--radius); text-decoration: none; color: var(--text); background: var(--grund); border: 1px solid var(--linie); box-shadow: var(--schatten); position: relative; overflow: hidden; transition: transform var(--normal) var(--kurve); }
.kanalkarte:hover { transform: translateY(-3px); }
.kanalkarte::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.kanalkarte.kanal-test::before { background: var(--verlauf-signal); }
.kanalkarte.kanal-stabil::before { background: var(--verlauf-tief); }
.kanal-name { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--text-leise); }
.kanal-version { font-family: var(--schrift-titel); font-size: 2.2rem; line-height: 1.1; }
.kanal-datum { font-size: .85rem; color: var(--text-leise); }
.kanal-kurz { margin-top: .6rem; font-size: .92rem; font-weight: 300; }
.kanal-zahl { margin-top: .4rem; font-size: .8rem; color: var(--primaer); font-weight: 500; }
.zwei-kanaele { margin-bottom: 2.5rem; }
.kanal-erklaerung { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.kanal-erklaerung > div { background: var(--flaeche); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.kanal-erklaerung p { margin: 0; font-size: .95rem; color: var(--text-leise); }
.kanalwechsel { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.kanalwechsel a { padding: .4rem 1rem; text-decoration: none; color: var(--text); font-weight: 500; font-size: .9rem; }
.kanalwechsel a[aria-current='page'] { background: var(--primaer); color: var(--auf-primaer); }
.fassung { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 1.2rem; overflow: hidden; }
.fassung > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: 1rem 1.4rem; cursor: pointer; }
.fassung > header h2 { margin: 0; font-size: 1.4rem; }
.fassung > header h2 a { text-decoration: none; color: var(--text); }
.fassung > header .meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .85rem; color: var(--text-leise); }
.fassung > .inhalt { padding: 0 1.4rem 1.2rem; display: none; }
.fassung.offen > .inhalt { display: block; }
.fassung .abschnitt h3 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); margin: 1.2rem 0 .5rem; }
.fassung .abschnitt-neu h3 { color: var(--gruen); }
.fassung .abschnitt-behoben h3 { color: var(--primaer); }
.fassung .abschnitt-eingriffe h3 { color: var(--rot-tief); }
.fassung .abschnitt ul { margin: 0; padding-left: 1.3rem; }
.fassung .abschnitt li { margin-bottom: .6rem; }
.fassung .abschnitt li p { margin-bottom: .4rem; }
.fassung .abschnitt li::marker { color: var(--signal); }
.badge { display: inline-block; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; border: 1px solid transparent; }
.badge.art-normal { background: var(--flaeche-hoch); color: var(--text-leise); }
.badge.art-sicherheit { background: var(--rot-flaeche); color: var(--rot-tief); }
.badge.art-eingriff { background: var(--spark-flaeche); color: var(--signal-tief); border-color: var(--spark); }
.badge.kanal-test { background: var(--spark-flaeche); color: var(--signal-tief); }
.badge.kanal-stabil { background: var(--primaer-flaeche); color: var(--primaer); }
:root[data-theme='dark'] .badge.kanal-stabil { color: #fff; }
.fassungsliste { list-style: none; margin: 0; padding: 0; }
.fassungsliste li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--linie); font-size: .95rem; }
.fassungsliste li a { font-family: var(--mono); font-weight: 600; text-decoration: none; }
.fassungsliste .anzahl { color: var(--text-leise); font-size: .85rem; margin-left: auto; }
.naechste { margin-bottom: 2.5rem; }
.leer { color: var(--text-leise); font-style: italic; }
.zurueck { margin: 1.5rem 0 3rem; }

/* ------------------------------------------------------------ Lizenz */
.lizenztext { white-space: pre-wrap; font-size: .85rem; line-height: 1.55; }

/* -------------------------------------------------------------- Fuß */
.fuss { margin-top: 4rem; background: var(--verlauf-tief); color: #dfe4f5; padding: 3rem 0 1.5rem; }
.fuss a { color: #fff; }
.fuss-innen { width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.fuss-marke .marke { height: 32px; width: auto; color: #fff; }
.fuss-marke p { font-size: .95rem; font-weight: 300; margin: .8rem 0 .4rem; }
.fuss-marke .klein { color: #b9bdd8; }
.fuss-nav { display: grid; gap: .4rem; align-content: start; font-size: .92rem; }
.fuss-nav a { text-decoration: none; color: #dfe4f5; }
.fuss-nav a:hover { color: #fff; text-decoration: underline; }
.fuss-zeile { width: min(var(--breite), 100% - 2.5rem); margin: 2.5rem auto 0; font-size: .8rem; color: #b9bdd8; border-top: 1px solid rgba(163, 199, 235, .25); padding-top: 1rem; }
@media (max-width: 900px) { .fuss-innen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss-innen { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Bewegung abschalten */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; }
  .erscheint { opacity: 1; transform: none; }
  .held .wort { opacity: 1; transform: none; }
  .held .netz line { stroke-dashoffset: 0; }
  .held .netz circle { opacity: 1; }
  .held .netz .puls { display: none; }
  .schritt { box-shadow: inset 0 0 0 2px var(--signal); }
}