/* Warpbeam - Marketing-Webseite
   Marke: Kettgruen (Kette, Akzent) + Flachs (Schuss, nur Grafik) auf Nachtpetrol.
   Keine externen Ressourcen, keine Inline-Styles (CSP-tauglich: style-src 'self').
   Finale Schriften: Anybody (Anzeige) + Atkinson Hyperlegible Next (Text), beide OFL, selbst gehostet.
   Rueckfall ohne Schriftdateien: Systemschrift (Windows: Bahnschrift schmal fuer die Anzeige). */

/* @font-face: erzeugt von tools/schriften.py */
@font-face {
  font-family: "Anybody";
  src: url("/assets/fonts/anybody-16db4f647b.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-9fd7c9c98c.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-italic-7e6837a8a6.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
/* @font-face: Ende */

/* ---------- Tokens ---------- */
:root {
  --grund: #0B1B1E;
  --flaeche: #12272B;
  --flaeche-hoch: #173238;
  --text: #E9E3D6;
  --text-leise: #9FB0AA;
  --kette: #3CCB8E;
  --auf-kette: #062015;
  --schuss: #C9B48A;
  --linie: #23393D;
  --fehler: #FF9C8A;

  /* Fusszeile bleibt in beiden Modi dunkel */
  --fuss-grund: #071416;
  --fuss-text: #E9E3D6;
  --fuss-leise: #9FB0AA;
  --fuss-linie: #1C3033;
  --fuss-kette: #3CCB8E;

  --f-anzeige: "Anybody", "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --f-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --kopf-hoehe: 64px;
  --rand: clamp(16px, 4vw, 48px);
  --breite: 1240px;
  --abschnitt: clamp(72px, 10vw, 128px);
  --gleiten: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

/* Dunkel ist immer Standard (E83); hell nur ueber den Umschalter, fuer diese Seite, nichts gespeichert */
:root[data-theme="light"] {
  --grund: #F1F3EF;
  --flaeche: #FFFFFF;
  --flaeche-hoch: #E6EBE7;
  --text: #0E2226;
  --text-leise: #4A5C58;
  --kette: #126845;
  --auf-kette: #FFFFFF;
  --schuss: #B39A68;
  --linie: #D5DCD8;
  --fehler: #B3261E;
  color-scheme: light;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--f-anzeige); font-stretch: 75%; font-weight: 700; line-height: 1; hyphens: auto; overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--kette); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--kette); color: var(--auf-kette); }
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }

.nur-vorlesen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--kette); color: var(--auf-kette); padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.sprung:focus { top: 12px; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.abschnitt { padding-block: var(--abschnitt); }
/* Abschnittstrenner: eine ruhige Haarlinie in der Breite der Textspalte (Betreiber 01.10.2026: kein gestrichelter
   Faden zwischen allen Abschnitten; das Gewebe zeigen Zeichen, Bilder und Seitenkoepfe) */
.abschnitt--linie {
  background: linear-gradient(var(--linie), var(--linie)) top center / min(100% - 2 * var(--rand), var(--breite)) 1px no-repeat;
}
/* Rhythmus: nicht jeder Abschnitt ist "Beschriftung + grosse Ueberschrift + zwei Spalten" */
/* Satz: kleine Ueberschrift, der Text selbst traegt den Abschnitt */
.abschnitt--satz h2 { font-family: var(--f-anzeige); font-stretch: 100%; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 20px; }
.abschnitt--satz .satz p:first-of-type { font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--text); text-wrap: pretty; }
.abschnitt--satz .satz { max-width: 44ch; }
/* Flaeche: ein Abschnitt als getoentes Band, ohne Trennlinie */
.abschnitt--flaeche, .abschnitt--linie.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--flaeche + .abschnitt--linie { background: none; }

/* Versal-Beschriftung mit Schussfaden-Strich davor: jeder Abschnitt ist ein Schuss */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px;
  font-family: var(--f-anzeige); font-stretch: 100%;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-leise);
}
.eyebrow::before {
  content: ""; flex: 0 0 34px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--schuss) 0 6px, transparent 6px 9px, var(--kette) 9px 11px, transparent 11px 14px);
}

.titel-2 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); letter-spacing: -.005em; max-width: 16ch; }
.titel-3 { font-size: 1.4rem; font-stretch: 85%; line-height: 1.15; }
.leise { color: var(--text-leise); }
.fliesstext { max-width: 62ch; }
.fliesstext p:last-child { margin-bottom: 0; }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  height: var(--kopf-hoehe);
  background: color-mix(in srgb, var(--grund) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf__innen { height: 100%; display: flex; align-items: center; gap: 24px; }

.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.marke__zeichen { flex: none; width: 26px; height: 26px; }
.marke__wort { font-family: var(--f-anzeige); font-stretch: 100%; font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; }
.zeichen-kette { fill: var(--kette); }
.zeichen-schuss { fill: var(--schuss); }

.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: .95rem; text-decoration: none; color: var(--text-leise);
  white-space: nowrap;                       /* nie innerhalb eines Punkts umbrechen (Linux-Rasterung, CI) */
  border-radius: 4px;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--kette); border-radius: 0; }

/* Gruppen Vision und Produkt (E256): Disclosure. Mit Skript oeffnet der Knopf (aria-expanded), Escape und ein Klick
   daneben schliessen; ohne Skript oeffnet die Liste bei Hover und sobald der Fokus in der Gruppe steht. */
.nav__gruppe { position: relative; }
.nav__knopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  font: inherit; font-size: .95rem; color: var(--text-leise); white-space: nowrap;
}
.nav__knopf::after {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.nav__knopf[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.nav__knopf:hover, .nav__knopf[aria-expanded="true"] { color: var(--text); }
.nav__knopf[aria-current="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--kette); border-radius: 0; }
.nav__ueberschrift { display: none; }
.nav .nav__unter {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  flex-direction: column; gap: 2px; min-width: 250px; padding: 8px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 16px 40px rgb(0 0 0 / .35);
}
.nav__unter a { display: flex; width: 100%; padding: 0 12px; color: var(--text); }
.nav__unter a:hover { background: var(--flaeche-hoch); }
.nav .nav__unter a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--kette); border-radius: 0; font-weight: 700; }
html:not(.js-nav) .nav__gruppe:hover .nav__unter, html:not(.js-nav) .nav__gruppe:focus-within .nav__unter,
.nav__knopf[aria-expanded="true"] ~ .nav__unter { display: flex; }

.kopf__werkzeuge { display: flex; align-items: center; gap: 6px; }
.sprache { display: flex; border: 1px solid var(--linie); border-radius: 999px; padding: 3px; }
.sprache a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 32px;
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-decoration: none; color: var(--text-leise); border-radius: 999px;
}
.sprache a[aria-current="true"] { background: var(--flaeche-hoch); color: var(--text); }
.sprache a:hover { color: var(--text); }

.werkzeug {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  background: none; border: 0; border-radius: 999px; color: var(--text-leise); cursor: pointer;
  font: inherit; font-size: .9rem;
}
.werkzeug:hover { color: var(--text); background: var(--flaeche); }
.werkzeug svg { width: 20px; height: 20px; }
.menue-knopf { display: none; }

@media (max-width: 900px) {   /* Zwei Gruppen + drei Punkte (E256): Logo, Zeile und Werkzeuge brauchen gemessen 720 px (DE) bzw. 723 px (EN)
                                plus Seitenrand, Linux-Rasterung 26.09.2026; ab 901 px bleiben rund 100 px Reserve */
  .menue-knopf { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--kopf-hoehe) 0 auto 0;
    max-height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto;
    background: var(--grund); border-bottom: 1px solid var(--linie);
    padding: 8px var(--rand) 20px;
    display: none;
  }
  .nav.ist-offen { display: block; }
  .nav ul { flex-direction: column; }
  .nav a { font-size: 1.15rem; padding: 0 4px; min-height: 52px; width: 100%; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--kette); padding-left: 14px; }
  /* Gruppen als Ueberschriften, ihre Seiten immer sichtbar */
  .nav__knopf { display: none; }
  .nav__ueberschrift {
    display: block; padding: 16px 4px 4px;
    font-family: var(--f-anzeige); font-stretch: 100%; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    color: var(--text-leise);
  }
  .nav .nav__unter { display: flex; position: static; min-width: 0; padding: 0 0 8px; background: none; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; box-shadow: none; }
  .nav__unter a { color: var(--text-leise); }
  .nav .nav__unter a[aria-current="page"] { padding-left: 14px; }
  .kopf__werkzeuge { margin-left: auto; }
}
@media (max-width: 420px) {
  .marke__wort { font-size: 1.15rem; }
  .sprache a { min-width: 34px; }
}
@media (max-width: 440px) {   /* "Schliessen" ist breiter als "Menue": geoeffnet sonst bis 13 px Querscrollen (gemessen 380-421 px) */
  .kopf__innen { gap: 12px; }
  .kopf__werkzeuge { gap: 2px; }
  .menue-knopf { padding: 0 6px; }
}
/* 320 px (WCAG 1.4.10): kein Querscrollen; der Menue-Knopf zeigt nur das Symbol, sein Text bleibt fuer Bildschirmleser */
@media (max-width: 379px) {
  :root { --rand: 12px; }
  .kopf__innen { gap: 6px; }
  .kopf__werkzeuge { gap: 2px; }
  .marke { gap: 6px; }
  .marke__wort { font-size: 1rem; }
  .sprache a { min-width: 30px; }
  .menue-knopf { position: relative; width: 44px; padding: 0; justify-content: center; }
  .menue-knopf span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menue-knopf::before { content: ""; width: 20px; height: 14px;
    background: linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat; }
  .menue-knopf[aria-expanded="true"]::before { background: linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%),
      linear-gradient(-45deg, transparent 45%, currentColor 45% 55%, transparent 55%); }
}

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  background: var(--kette); color: var(--auf-kette);
  font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 999px;
  transition: transform .25s var(--gleiten), box-shadow .25s;
}
.knopf:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--kette) 25%, transparent); }
.knopf svg { width: 18px; height: 18px; transition: transform .25s var(--gleiten); }
.knopf:hover svg { transform: translateY(2px); }

.mehr {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--kette); font-weight: 700; text-decoration: none;
}
.mehr::after { content: "\2192"; transition: transform .25s var(--gleiten); }
.mehr:hover::after { transform: translateX(4px); }
.mehr--runter::after { content: "\2193"; }
.mehr--runter:hover::after { transform: translateY(3px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: max(620px, min(100svh - var(--kopf-hoehe), 940px));
  margin-top: calc(-1 * var(--kopf-hoehe));
  padding-top: var(--kopf-hoehe);
  display: flex; align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
}
.hero__schleier {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--grund) 94%, transparent) 0%, color-mix(in srgb, var(--grund) 80%, transparent) 38%, transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--grund) 70%, transparent) 0%, transparent 22%);
}
.hero__inhalt { padding-block: clamp(40px, 7vh, 88px) 120px; }
/* Stand im Hero: eine Zeile Versalien, ohne Pille und ohne Punkt */
.status-marke {
  margin: 0 0 24px;
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-leise);
}
.hero__titel {
  font-size: clamp(3rem, 8.2vw, 7.4rem);
  line-height: .9; letter-spacing: -.012em; font-weight: 800;
}
.hero__titel span { display: block; }
/* eine Farbe: die Zeilen unterscheiden sich nicht ueber Akzentfarbe (kein zweifarbiger Titel) */
/* Schmale Schirme: Titel und Abstaende knapper (Sonde warum.cjs, 390 x 844) */
@media (max-width: 480px) {
  .hero--video .hero__titel { font-size: 2.9rem; }
  .hero--video .hero__text { margin: 18px 0 22px; }
}
.hero__text { max-width: 40ch; margin: 28px 0 32px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--text); }

.pause {
  position: absolute; right: var(--rand); bottom: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--linie); border-radius: 999px;
  background: color-mix(in srgb, var(--grund) 75%, transparent);
  color: var(--text); font: inherit; font-size: .88rem; cursor: pointer;
}
.pause:hover { border-color: var(--kette); }
.pause__icon { width: 14px; height: 14px; position: relative; }
.pause__icon::before, .pause__icon::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 4px; background: currentColor; border-radius: 1px; }
.pause__icon::before { left: 2px; }
.pause__icon::after { right: 2px; }
.pause.ist-angehalten .pause__icon::before { left: 3px; width: 0; height: 0; top: 0; bottom: auto; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; background: none; border-radius: 0; }
.pause.ist-angehalten .pause__icon::after { display: none; }

@media (max-width: 700px) {
  .hero { min-height: max(700px, min(100svh - var(--kopf-hoehe), 860px)); }
  .hero__schleier {
    background: linear-gradient(180deg, color-mix(in srgb, var(--grund) 92%, transparent) 0%, color-mix(in srgb, var(--grund) 86%, transparent) 55%, transparent 80%);
  }
  .hero__inhalt { padding-block: 32px 110px; }
  .hero__text { margin: 24px 0 28px; }
  .pause { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) { .pause { display: none; } }
/* Ton-Modus (intro-video.js setzt .ist-ton): Untertitel in eigener Leiste ueber dem Schleier, Schleier zurueckgenommen,
   Hero-Text ausgeblendet (die Knoepfe bleiben), Video ganz sichtbar statt beschnitten (Hochformat) */
.hero__untertitel {
  position: absolute; left: 50%; bottom: 140px; z-index: 2; transform: translateX(-50%);
  width: max-content; max-width: min(92%, 900px); margin: 0; padding: 10px 16px; border-radius: 6px;
  background: rgb(11 27 30 / .92); color: #E9E3D6; font-size: clamp(1.05rem, 1.9vw, 1.45rem); line-height: 1.4;
  text-align: center; text-wrap: balance;
}
/* Ton-Modus ohne Sprung: das Video bleibt cover (bildschirmfuellend), der Hero-Text blendet aus statt aus dem Fluss zu
   fallen, "Ton aus" steht unten rechts ueber "Video anhalten". Quellenwechsel ueber Dunkel (.ist-wechsel) */
.hero--video .hero__video { transition: opacity .45s ease; }
.hero--video.ist-wechsel .hero__video { opacity: 0; transition: none; }
.hero--video .hero__schleier, .hero--video .hero__inhalt { transition: opacity .35s ease, visibility .35s; }
.hero--video.ist-ton .hero__schleier { opacity: .2; }
.hero--video.ist-ton .hero__inhalt { opacity: 0; visibility: hidden; }
.pause--ton { bottom: 84px; padding: 0 16px; }
@media (max-width: 700px) { .pause--ton { bottom: 76px; } }
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero__video, .hero--video .hero__schleier, .hero--video .hero__inhalt { transition: none; }
}
/* Weiter zum Inhalt: eine Textzeile mit Pfeil an der Textkante, ohne Kreis; der Pfeil bewegt sich nur ohne reduzierte Bewegung */
.hero__runter {
  position: absolute; left: max(var(--rand), (100% - var(--breite)) / 2); bottom: 24px;
  display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding-right: 4px;
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
}
.hero__runter svg { width: 18px; height: 18px; color: var(--kette); }
.hero__runter:hover { color: var(--kette); }
.hero__runter:focus-visible { outline: 2px solid var(--kette); outline-offset: 3px; }
@media (max-width: 700px) { .hero__runter { bottom: 20px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__runter svg { animation: runter-puls 1.6s var(--gleiten) infinite; }
  @keyframes runter-puls { 0%, 100% { transform: translateY(-3px); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }
}

/* ---------- Ausgangslage mit Fadenbuendel ---------- */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.zweispaltig--kopf { align-items: start; }
@media (max-width: 860px) { .zweispaltig { grid-template-columns: minmax(0, 1fr); } }
.zweispaltig .titel-2 { margin-bottom: 28px; }

.buehne { position: relative; margin: 0; }
.buehne__canvas { width: 100%; aspect-ratio: 1 / 1; max-width: 540px; margin-inline: auto; }
.buehne__beschriftung {
  display: flex; justify-content: space-between; gap: 16px;
  max-width: 540px; margin: 12px auto 0;
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-leise);
}

/* ---------- Der Name: Kettbaum, Kette, Schuss, Gewebe (Startseite und Architektur) ---------- */
.kettbaum-bild { display: block; width: 100%; max-width: 640px; height: auto; margin-inline: auto; }
.kb-baum { fill: var(--kette); }
.kb-achse { fill: var(--text-leise); }
.kb-wicklung { stroke: var(--grund); stroke-width: 2; opacity: .55; }
.kb-kette { fill: none; stroke: var(--kette); stroke-width: 3; stroke-linecap: round; }
.kb-schuss { fill: none; stroke: var(--schuss); stroke-width: 5; stroke-linecap: round; }
.kb-luecke { stroke: var(--grund); stroke-width: 9; }
.kb-luecke--quer { stroke-width: 11; }
.kb-fuehrung { fill: none; stroke: var(--text-leise); stroke-width: 1.2; }
.kb-text { fill: var(--text); font-family: var(--f-text); font-size: 20px; font-weight: 700; }
.kb-text--leise { fill: var(--text-leise); font-weight: 400; }
@media (max-width: 620px) { .kb-text { font-size: 25px; } }
.name-bild { margin: 0; }
.sprechtext { margin-top: 20px; max-width: 72ch; }
.sprechtext summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--kette); }
.sprechtext p { color: var(--text-leise); }
.hero__motiv { display: block; width: clamp(160px, 20vw, 240px); height: auto; margin: 28px 0 0; }
.kb-kette--fein { stroke-width: 2; }
.kb-schuss--fein { stroke-width: 3; }
.kb-luecke--fein { stroke-width: 6; }
.name-schritte .titel-3 { margin-bottom: 8px; }
.name-schritte .titel-3:not(:first-child) { margin-top: 32px; }
.nutzen__titel { margin-top: 56px; }
.nutzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 32px 0 0; }
.nutzen div { border-top: 1px solid var(--linie); padding-top: 12px; }
.nutzen dt { font-family: var(--f-anzeige); font-stretch: 100%; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--kette); margin-bottom: 4px; }
.nutzen dd { margin: 0; color: var(--text-leise); }
@media (max-width: 620px) { .nutzen { grid-template-columns: minmax(0, 1fr); } }

.begriffe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.begriffe li { border-top: 1px solid var(--linie); padding-top: 12px; }
.begriffe b { display: block; font-family: var(--f-anzeige); font-stretch: 100%; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--kette); margin-bottom: 2px; }
.begriffe span { color: var(--text-leise); font-size: 1rem; }

/* ---------- Zeitleiste ---------- */
.zeitleiste-kopf { position: sticky; top: calc(var(--kopf-hoehe) + 40px); }
@media (max-width: 860px) { .zeitleiste-kopf { position: static; } }
.legende { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; font-size: 1rem; color: var(--text-leise); }
.legende li { display: flex; gap: 12px; align-items: baseline; }
.legende b { color: var(--text); font-weight: 700; }

.form { flex: 0 0 auto; display: inline-block; width: 12px; height: 12px; border-radius: 50%; translate: 0 1px; }
.form--heute { background: var(--kette); border: 2px solid var(--kette); }
.form--bau { border: 2px solid var(--kette); background: var(--grund); }
.form--richtung { border: 2px dashed var(--text-leise); background: var(--grund); }

.zeitleiste-rahmen { position: relative; padding-left: 44px; }
.zeitleiste-rahmen::before {
  content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px;
  background: var(--linie);
}
.faden {
  position: absolute; left: 10px; top: 10px; bottom: 10px; width: 4px; border-radius: 2px;
  background: repeating-linear-gradient(160deg, var(--kette) 0 5px, color-mix(in srgb, var(--kette) 55%, var(--grund)) 5px 8px);
  transform-origin: top; transform: scaleY(var(--p, 1));
}
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.station { position: relative; padding: 4px 0 40px; }
.station:last-child { padding-bottom: 0; }
.station__knoten {
  position: absolute; left: -44px; top: 8px; width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--grund);
}
.station__knoten .form { width: 14px; height: 14px; translate: 0 0; transition: transform .4s var(--gleiten), box-shadow .4s; }
.station__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 8px; }
.station__name { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-stretch: 80%; transition: color .4s; }
.station__teil { font-family: var(--f-text); font-stretch: 100%; font-size: 1rem; font-weight: 400; color: var(--text-leise); white-space: nowrap; }
.station p { margin: 0; max-width: 54ch; color: var(--text-leise); }

.stand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-leise);
}
.stand .form { width: 10px; height: 10px; }

/* Anfangszustand der Zeitleiste nur, wenn das Skript sie steuert */
/* nur Knoten und Name treten zurueck; der Text behaelt vollen Kontrast */
.js-zeitleiste .station__knoten { opacity: .45; transition: opacity .5s; }
.js-zeitleiste .station__name { color: var(--text-leise); }
.js-zeitleiste .station.ist-erreicht .station__knoten { opacity: 1; }
.js-zeitleiste .station.ist-erreicht .station__name { color: var(--text); }
.js-zeitleiste .station.ist-erreicht .station__knoten .form { transform: scale(1.25); box-shadow: 0 0 0 6px color-mix(in srgb, var(--kette) 18%, transparent); }

/* ---------- Drei Haltungen ---------- */
/* Haltungen: Zeilen zwischen Haarlinien statt drei gleicher Karten. Ueberschrift links, Text rechts, das Objekt
   (sofern vorhanden, .haltungen--objekte) davor; keine Flaeche, kein Schein. */
.haltungen { list-style: none; margin: 48px 0 0; padding: 0; border-bottom: 1px solid var(--linie); }
.karte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px clamp(24px, 4vw, 64px);
  grid-template-rows: auto 1fr; align-items: start;
  padding: 28px 0; border-top: 1px solid var(--linie);
}
.karte > .titel-3 { grid-column: 1; grid-row: 1 / span 2; font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.karte > p, .karte > .mehr { grid-column: 2; }
.karte > p { margin: 0; color: var(--text-leise); font-size: 1rem; max-width: 62ch; }
.karte > .mehr { justify-self: start; }
.haltungen--objekte .karte { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.6fr); }
.haltungen--objekte .karte > .titel-3 { grid-column: 2; }
.haltungen--objekte .karte > p, .haltungen--objekte .karte > .mehr { grid-column: 3; }
.karte__buehne {
  grid-column: 1; grid-row: 1 / span 2; height: 150px; overflow: hidden;
  display: grid; place-items: center; perspective: 900px;
}
.karte__buehne > * { scale: .72; }
.karte__buehne .schichten { margin-top: 20px; }
@media (max-width: 860px) {
  .karte, .haltungen--objekte .karte { grid-template-columns: minmax(0, 1fr); }
  .karte > *, .haltungen--objekte .karte > * { grid-column: 1 !important; grid-row: auto !important; }
  .karte > .titel-3 { margin-bottom: 4px; }
  .karte { grid-template-rows: none; }
  .karte__buehne { height: 140px; justify-self: start; width: 160px; }
  .karte__buehne > * { scale: .6; }
}

/* Objekt 1: Schichten der Fabric */
.schichten { position: relative; width: 140px; height: 140px; margin-top: 70px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-38deg); }
.schicht {
  position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--kette) 70%, transparent);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--kette) 55%, transparent) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--schuss) 50%, transparent) 0 2px, transparent 2px 8px),
    color-mix(in srgb, var(--flaeche) 70%, transparent);
  transition: transform 1s var(--gleiten);
}
.schicht:nth-child(1) { transform: translateZ(0); }
.schicht:nth-child(2) { transform: translateZ(12px); }
.schicht:nth-child(3) { transform: translateZ(24px); }
.schicht:nth-child(4) { transform: translateZ(36px); border-color: var(--kette); }
.karte:hover .schicht:nth-child(2), .karte:focus-within .schicht:nth-child(2), .karte.ist-sichtbar .schicht:nth-child(2) { transform: translateZ(30px); }
.karte:hover .schicht:nth-child(3), .karte:focus-within .schicht:nth-child(3), .karte.ist-sichtbar .schicht:nth-child(3) { transform: translateZ(60px); }
.karte:hover .schicht:nth-child(4), .karte:focus-within .schicht:nth-child(4), .karte.ist-sichtbar .schicht:nth-child(4) { transform: translateZ(90px); }

/* Objekt 2: Webstuhl-Rahmen */
.rahmen {
  position: relative; width: 150px; height: 168px;
  border: 5px solid var(--text-leise); border-top-width: 12px; border-bottom-width: 14px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--kette) 0 1.5px, transparent 1.5px 9px);
  transform: rotateY(-26deg) rotateX(10deg);
}
.rahmen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background:
    repeating-linear-gradient(90deg, var(--kette) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, var(--schuss) 0 3px, transparent 3px 6px);
}
.rahmen::before {
  content: ""; position: absolute; left: -14px; right: -14px; bottom: 40%; height: 5px; border-radius: 3px;
  background: var(--schuss); translate: 0 -8px;
}

/* Objekt 3: Stufenskala (klein) */
.stufen-mini { display: flex; align-items: flex-end; gap: 10px; height: 130px; transform: rotateX(18deg) rotateY(-22deg); }
.stufen-mini span { width: 18px; border: 2px solid var(--text-leise); border-radius: 2px; }
.stufen-mini span:nth-child(1) { height: 16%; }
.stufen-mini span:nth-child(2) { height: 32%; }
.stufen-mini span:nth-child(3) { height: 48%; background: var(--kette); border-color: var(--kette); }
.stufen-mini span:nth-child(4) { height: 64%; }
.stufen-mini span:nth-child(5) { height: 82%; border-style: dashed; }
.stufen-mini span:nth-child(6) { height: 100%; border-style: dashed; }

@media (prefers-reduced-motion: no-preference) {
  .schichten { animation: schwingen 12s ease-in-out infinite alternate; }
  .rahmen { animation: wiegen 9s ease-in-out infinite alternate; }
  .stufen-mini { animation: wiegen-mini 10s ease-in-out infinite alternate; }
}
@keyframes schwingen { from { transform: rotateX(58deg) rotateZ(-38deg); } to { transform: rotateX(54deg) rotateZ(-24deg); } }
@keyframes wiegen { from { transform: rotateY(-26deg) rotateX(10deg); } to { transform: rotateY(-8deg) rotateX(4deg); } }
@keyframes wiegen-mini { from { transform: rotateX(18deg) rotateY(-22deg); } to { transform: rotateX(10deg) rotateY(-6deg); } }

/* ---------- Stand ---------- */
.stand-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--linie); }
@media (max-width: 860px) { .stand-raster { grid-template-columns: minmax(0, 1fr); } }
.stand-spalte { padding: 28px 28px 8px 0; }
.stand-spalte + .stand-spalte { border-left: 1px solid var(--linie); padding-left: 28px; }
@media (max-width: 860px) {
  .stand-spalte { padding: 24px 0 8px; }
  .stand-spalte + .stand-spalte { border-left: 0; border-top: 1px solid var(--linie); padding-left: 0; }
}
.stand-spalte h3 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-stretch: 85%; margin-bottom: 14px; }
.stand-spalte p { color: var(--text-leise); font-size: 1rem; }
.neuigkeiten { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; color: var(--text-leise); font-size: 1rem; }

/* ---------- Einblenden beim Scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .einblenden { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--gleiten), transform .5s var(--gleiten); }
  .einblenden.ist-sichtbar { opacity: 1; transform: none; }
}

/* ---------- Unterseiten ---------- */
.seitenkopf { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(64px, 9vw, 120px) clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--linie); }
.seitenkopf__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .55; }
.seitenkopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--grund) 0%, color-mix(in srgb, var(--grund) 88%, transparent) 50%, color-mix(in srgb, var(--grund) 40%, transparent) 100%);
}
.seitenkopf h1 { font-size: clamp(2.8rem, 7vw, 6rem); line-height: .92; font-weight: 800; max-width: 14ch; }
.seitenkopf--knapp { padding-block: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px); }
.seitenkopf--knapp h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); max-width: none; }
.seitenkopf--knapp .einleitung { margin-top: 12px; }
.seitenkopf--knapp + .abschnitt { padding-top: clamp(24px, 3vw, 40px); }
.seitenkopf--knapp + .abschnitt .titel-2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.seitenkopf--knapp + .abschnitt .eyebrow { margin-bottom: 12px; }
.abschnitt--knapp { padding-block: clamp(32px, 4vw, 56px); }
.seitenkopf .einleitung { max-width: 52ch; margin: 28px 0 0; font-size: clamp(1.1rem, 1.5vw, 1.25rem); }

/* Vermerk: ein Hinweis mit Beschriftung IM Rahmen, wie die Legende eines Formularblocks (Betreiber 01.10.2026:
   kein Akzentstreifen links, oben oder rechts). Voller 1-px-Rahmen, ruhige Flaeche, die Beschriftung unterbricht die
   obere Kante. Varianten unterscheiden sich nur ueber Beschriftung und Farbe (--vermerk-farbe), nie ueber die Form.
   Kein display hier: [hidden] muss greifen (Fehlerliste). */
.vermerk {
  --vermerk-farbe: var(--kette);
  position: relative;
  margin: 40px 0 0; padding: 20px 22px 16px; max-width: 64ch;
  border: 1px solid var(--linie); border-radius: 4px;
  background: var(--flaeche);
  font-size: 1rem;
}
.vermerk--fehler { --vermerk-farbe: var(--fehler); border-color: var(--fehler); }
.vermerk__marke, .grund:target::before {
  position: absolute; top: 0; left: 14px; translate: 0 -50%;
  padding: 0 8px; line-height: 1.5; white-space: nowrap;
  /* deckt nur die Rahmenlinie ab; darueber und darunter scheint der jeweilige Grund durch */
  background: linear-gradient(var(--flaeche), var(--flaeche)) center / 100% 3px no-repeat;
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vermerk-farbe, var(--kette));
}

/* Stufenskala interaktiv (KI) - reines CSS ueber :has(), Radios bleiben native */
.stufen { border: 0; margin: 48px 0 0; padding: 0; min-width: 0; }
.stufen legend { padding: 0; margin-bottom: 20px; color: var(--text-leise); font-size: 1rem; }
.stufen__reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 16px); align-items: end; }
.stufe { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.stufe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stufe__balken {
  display: block; border: 2px solid var(--text-leise); border-radius: 3px;
  transition: background .3s, border-color .3s;
}
.stufe:nth-child(1) .stufe__balken { height: 28px; }
.stufe:nth-child(2) .stufe__balken { height: 56px; }
.stufe:nth-child(3) .stufe__balken { height: 84px; }
.stufe:nth-child(4) .stufe__balken { height: 112px; }
.stufe:nth-child(5) .stufe__balken { height: 140px; border-style: dashed; }
.stufe:nth-child(6) .stufe__balken { height: 168px; border-style: dashed; }
.stufe__nr { font-family: var(--f-anzeige); font-stretch: 75%; font-size: 2rem; font-weight: 700; line-height: 1; }
.stufe__name { font-size: .88rem; line-height: 1.3; color: var(--text-leise); min-height: 2.6em; }
.stufe:hover .stufe__balken { border-color: var(--text); }
.stufe:has(input:checked) .stufe__balken { background: var(--kette); border-color: var(--kette); border-style: solid; }
.stufe:has(input:checked) .stufe__name { color: var(--text); }
.stufe:has(input:focus-visible) .stufe__balken { outline: 2px solid var(--kette); outline-offset: 4px; }
@media (max-width: 520px) { .stufe__name { font-size: .74rem; hyphens: auto; } .stufe__nr { font-size: 1.5rem; } }

.stufe-details { margin-top: 28px; }
.stufe-detail {
  display: none;
  padding: 24px 28px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche);
}
.stufe-detail h3 { font-size: 1.6rem; font-stretch: 85%; margin-bottom: 10px; }
.stufe-detail p { margin: 0; color: var(--text-leise); max-width: 60ch; }
.stufe-detail .standard { color: var(--kette); font-weight: 700; }
.stufen:has(input[value="0"]:checked) ~ .stufe-details [data-stufe="0"],
.stufen:has(input[value="1"]:checked) ~ .stufe-details [data-stufe="1"],
.stufen:has(input[value="2"]:checked) ~ .stufe-details [data-stufe="2"],
.stufen:has(input[value="3"]:checked) ~ .stufe-details [data-stufe="3"],
.stufen:has(input[value="4"]:checked) ~ .stufe-details [data-stufe="4"],
.stufen:has(input[value="5"]:checked) ~ .stufe-details [data-stufe="5"] { display: block; }

/* Begriffsliste statt Kachelraster: Begriff und Satz in einer Zeile, Haarlinien, zwei Spalten ab 861 px */
.kacheln { list-style: none; margin: 40px 0 32px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
@media (max-width: 860px) { .kacheln { grid-template-columns: minmax(0, 1fr); } }
.kacheln li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--linie); }
@media (max-width: 480px) { .kacheln li { grid-template-columns: minmax(0, 1fr); } }
.kacheln b { font-family: var(--f-anzeige); font-stretch: 85%; font-size: 1.2rem; }
.kacheln span { color: var(--text-leise); font-size: 1rem; }

.grundsaetze { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
/* Saetze zwischen Haarlinien, ohne Symbol davor: die Saetze selbst sind die Knoten */
.grundsaetze li { padding: 18px 0; border-bottom: 1px solid var(--linie); font-size: clamp(1.1rem, 1.6vw, 1.3rem); }

.ablauf { list-style: none; counter-reset: ablauf; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .ablauf { grid-template-columns: minmax(0, 1fr); } }
/* Schrittfolge: alle Schritte gleich gewichtet, Haarlinie, Ziffer leise (kein hervorgehobener letzter Schritt) */
.ablauf li { counter-increment: ablauf; border-top: 1px solid var(--linie); padding-top: 14px; }
.ablauf li::before { content: counter(ablauf) "."; display: block; font-family: var(--f-anzeige); font-stretch: 100%; font-size: .78rem; font-weight: 600; letter-spacing: .18em; line-height: 1; margin-bottom: 10px; color: var(--text-leise); }
.ablauf b { display: block; font-size: 1.05rem; }
.ablauf span { color: var(--text-leise); font-size: .98rem; }

.thesen { list-style: none; counter-reset: these; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
@media (max-width: 860px) { .thesen { grid-template-columns: minmax(0, 1fr); } }
.thesen li { counter-increment: these; padding: 32px 0; border-top: 1px solid var(--linie); display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 4px 12px; }
.thesen li::before { content: counter(these); grid-row: span 2; font-family: var(--f-anzeige); font-stretch: 75%; font-size: 2.6rem; font-weight: 700; line-height: .9; color: var(--kette); }
.thesen h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-stretch: 80%; line-height: 1.05; margin-bottom: 10px; }
.thesen p { margin: 0; color: var(--text-leise); font-size: 1rem; }

.fragen { margin: 40px 0 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.fragen div { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
@media (max-width: 700px) { .fragen div { grid-template-columns: minmax(0, 1fr); } }
.fragen dt { color: var(--text-leise); }
.fragen dd { margin: 0; font-family: var(--f-anzeige); font-stretch: 85%; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
/* Vision (E256), Abgrenzung: Begriff gross, Erklaerung als Fliesstext */
.fragen--abgrenzung dt { color: var(--text); font-family: var(--f-anzeige); font-stretch: 85%; font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.fragen--abgrenzung dd { font-family: var(--f-text); font-stretch: 100%; font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--text-leise); }
@media (min-width: 701px) { .fragen--abgrenzung div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }
.titel-manuell { hyphens: manual; }   /* nur an der weichen Trennstelle umbrechen (Vision: "Identitaets-souveraenitaet") */

.betriebsarten { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
@media (max-width: 860px) { .betriebsarten { grid-template-columns: minmax(0, 1fr); } }
.betriebsarten li { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; padding: 24px; }
.betriebsarten li:last-child { border-color: var(--kette); }
.betriebsarten .nr { display: block; font-family: var(--f-anzeige); font-stretch: 75%; font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--kette); margin-bottom: 10px; }
.betriebsarten h3 { font-size: 1.45rem; font-stretch: 85%; margin-bottom: 10px; }
.betriebsarten p { margin: 0; color: var(--text-leise); font-size: 1rem; }
.betriebsarten .heute { display: inline-block; margin-top: 12px; }

.prosa { max-width: 68ch; }
.prosa h2 { font-size: 1.5rem; font-stretch: 85%; margin: 40px 0 12px; }
.prosa p { font-size: 1.02rem; }
.platzhalter { background: color-mix(in srgb, var(--schuss) 22%, transparent); color: var(--text); padding: 0 4px; border-radius: 2px; }

.weiter { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--linie); }

/* ---------- Fusszeile ---------- */
.fuss { background: var(--fuss-grund); color: var(--fuss-text); padding-block: 72px 32px; }
.fuss a { color: var(--fuss-text); }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 860px) { .fuss__raster { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.fuss .marke__wort { font-size: 1.6rem; }
.fuss .zeichen-kette { fill: var(--fuss-kette); }
.fuss__satz { font-family: var(--f-anzeige); font-stretch: 75%; font-size: 1.9rem; font-weight: 700; line-height: 1.05; margin: 20px 0 14px; }
.fuss__klein { color: var(--fuss-leise); font-size: .95rem; max-width: 40ch; }
.fuss h2 { font-family: var(--f-anzeige); font-stretch: 100%; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fuss-leise); margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fuss li a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.fuss li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fuss__grund { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--fuss-linie); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--fuss-leise); font-size: .88rem; }
.fuss :focus-visible { outline-color: var(--fuss-kette); }

/* ---------- Termine ---------- */
.termine { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; }
.termin {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px;
  padding: 24px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px;
}
@media (max-width: 560px) { .termin { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; } }
.termin__datum { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 560px) { .termin__datum { flex-direction: row; align-items: baseline; gap: 10px; } }
.termin__tag { font-family: var(--f-anzeige); font-stretch: 75%; font-size: 3.2rem; font-weight: 800; line-height: .9; }
.termin__monat { font-family: var(--f-anzeige); font-stretch: 100%; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise); margin-top: 6px; }
.termin__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; font-size: .92rem; color: var(--text-leise); }
.termin__titel { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-stretch: 85%; line-height: 1.1; margin-bottom: 8px; }
.termin__inhalt > p:not(.termin__meta):not(.termin__aktionen) { color: var(--text-leise); font-size: 1rem; max-width: 64ch; }
.termin__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin: 0; font-size: 1rem; }
.termine--vergangen .termin { background: transparent; }
.termine__leer { padding: 28px; border: 1px dashed var(--linie); border-radius: 6px; color: var(--text-leise); }
.chip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--kette); color: var(--text);
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.beispiel {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 4px;
  border: 1px dashed var(--schuss); color: var(--text);
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.mehr--datei::after { content: "\2193"; }
.abo { margin-top: 32px; padding: 24px; border: 1px solid var(--linie); border-radius: 6px; max-width: 720px; }
.abo .titel-3 { margin-bottom: 8px; }
.abo p { color: var(--text-leise); font-size: 1rem; margin-bottom: 8px; }
.abo--demo { margin: 0 0 32px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 1rem; }
.neuigkeiten span { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }

/* ---------- Faehigkeiten-Matrix ---------- */
.zaehler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 24px 0 0; font-size: 1.1rem; font-weight: 700; }
.filter { border: 0; padding: 0; margin: 32px 0 16px; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.filter label { position: relative; cursor: pointer; }
.filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.filter span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linie); color: var(--text-leise); font-size: .95rem;
}
.filter label:hover span { color: var(--text); border-color: var(--text-leise); }
.filter input:checked + span { background: var(--kette); border-color: var(--kette); color: var(--auf-kette); font-weight: 700; }
.filter input:focus-visible + span { outline: 2px solid var(--kette); outline-offset: 3px; }
.matrix:has(input[value="0"]:checked) tr[data-reife]:not([data-reife="0"]),
.matrix:has(input[value="1"]:checked) tr[data-reife]:not([data-reife="1"]),
.matrix:has(input[value="2"]:checked) tr[data-reife]:not([data-reife="2"]),
.matrix:has(input[value="3"]:checked) tr[data-reife]:not([data-reife="3"]),
.matrix:has(input[value="4"]:checked) tr[data-reife]:not([data-reife="4"]) { display: none; }

.matrix__rahmen { border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.matrix__tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.matrix__tabelle thead th {
  text-align: left; padding: 14px 20px; background: var(--flaeche);
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-leise);
}
.matrix__tabelle td, .matrix__tabelle tbody th { padding: 14px 20px; border-top: 1px solid var(--linie); vertical-align: top; text-align: left; font-weight: 400; }
.matrix__tabelle td:nth-child(2) { color: var(--text-leise); }
.matrix__tabelle td:last-child { white-space: nowrap; }
.matrix__gruppe th {
  padding: 22px 20px 10px !important; background: var(--grund);
  font-family: var(--f-anzeige); font-stretch: 85%; font-size: 1.35rem !important; font-weight: 700 !important; color: var(--text);
}
.matrix__name { display: block; font-weight: 700; }
.matrix__fach { display: block; font-size: .82rem; color: var(--text-leise); margin-top: 2px; }
@media (max-width: 700px) {
  .matrix__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix__tabelle, .matrix__tabelle tbody, .matrix__tabelle tr, .matrix__tabelle td, .matrix__tabelle th { display: block; }
  .matrix__tabelle tr[data-reife] { padding: 14px 16px; border-top: 1px solid var(--linie); }
  .matrix__tabelle tr[data-reife] > * { padding: 0; border: 0; }
  .matrix__tabelle tr[data-reife] td:nth-child(2) { margin: 6px 0 8px; }
  .matrix:has(input[value="0"]:checked) tr[data-reife]:not([data-reife="0"]),
  .matrix:has(input[value="1"]:checked) tr[data-reife]:not([data-reife="1"]),
  .matrix:has(input[value="2"]:checked) tr[data-reife]:not([data-reife="2"]),
  .matrix:has(input[value="3"]:checked) tr[data-reife]:not([data-reife="3"]),
  .matrix:has(input[value="4"]:checked) tr[data-reife]:not([data-reife="4"]) { display: none; }
  .matrix__gruppe th { padding: 20px 16px 8px !important; }
}

/* Abstand Ueberschrift -> Text, wo kein Rasterabstand greift */
.titel-2 + .fliesstext, .titel-2 + .zaehler { margin-top: 24px; }
.stufen__reihe { max-width: 780px; }

/* ---------- Kontakt (E84): genau ein Formular ---------- */
.seitenkopf__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: 20px 0 0; font-size: 1rem; color: var(--text-leise); }

.kontakt { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
@media (max-width: 960px) { .kontakt { grid-template-columns: minmax(0, 1fr); } }
.kontakt__haupt { min-width: 0; max-width: 680px; }
.kontakt__legende { margin: 24px 0 0; color: var(--text-leise); font-size: 1rem; }
.kontakt__seite { border-top: 1px solid var(--linie); padding-top: 20px; font-size: 1rem; }
.kontakt__seite .titel-3 { margin-bottom: 10px; }
.kontakt__seite .titel-3:not(:first-child) { margin-top: 32px; }
.kontakt__weg { margin: 0 0 20px; padding-left: 1.4em; display: grid; gap: 8px; color: var(--text-leise); }
.kontakt__weg li::marker { color: var(--kette); font-weight: 700; }

.formular { margin-top: 32px; display: grid; gap: 28px; }
.formular__gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.formular__gruppe legend, .feld label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 1.02rem; }
.pflicht, .optional { font-weight: 400; font-size: .88rem; color: var(--text-leise); }
.pflicht span { color: var(--kette); font-weight: 700; }

.wahl { display: flex; align-items: flex-start; gap: 14px; min-height: 48px; padding: 12px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; cursor: pointer; }
.wahl input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--kette); }
.wahl span { display: grid; gap: 4px; }
.wahl span span { display: inline; }            /* Pflicht-/optional-Hinweis im Haekchen-Text bleibt in der Zeile */
.wahl small { font-size: .95rem; color: var(--text-leise); }
.wahl:hover { border-color: var(--text-leise); }
.wahl:has(input:checked) { border-color: var(--kette); box-shadow: inset 0 0 0 1px var(--kette); }

/* Bedingte Formularbloecke: dieselbe Gestalt wie der Vermerk (voller Rahmen, Beschriftung im Rahmen) */
.formular__live, .formular__anmeldung { padding: 10px 20px 20px; border: 1px solid var(--linie); border-radius: 4px; gap: 20px; }
.formular__live legend, .formular__anmeldung legend {
  padding: 0 8px; margin-left: -6px;
  font-family: var(--f-anzeige); font-stretch: 100%; font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--kette);
}
/* Ohne :has() bleibt der Block sichtbar; die Legende sagt, wofuer er gilt */
@supports selector(:has(*)) {
  .formular:not(:has(#anliegen-live:checked)) .formular__live { display: none; }
  .formular:not(:has(#anliegen-anmeldung:checked)) .formular__anmeldung { display: none; }
}

.feld { display: grid; min-width: 0; }
.feld__hinweis { margin: 0 0 8px; font-size: .95rem; color: var(--text-leise); }
.feld__fehler { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: .95rem; font-weight: 700; color: var(--fehler); }
.feld__fehler:empty { display: none; }
.feld__fehler::before {
  content: "!"; content: "!" / "";
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; translate: 0 .2em;
  border-radius: 50%; background: var(--fehler); color: var(--grund); font-size: .85em; line-height: 1;
}
.feld input, .feld textarea, .feld select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 1.05rem; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--text-leise); border-radius: 4px;
}
.feld textarea { min-height: 200px; line-height: 1.5; resize: vertical; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-color: var(--text); }
.feld [aria-invalid="true"] { border: 2px solid var(--fehler); }
.feld--kurz input { max-width: 10rem; }

/* Honigtopf: fuer Menschen unsichtbar, nicht im Tab-Weg, fuer Vorleser ausgeblendet */
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formular__datenschutz { margin: 0; font-size: .95rem; color: var(--text-leise); }
.formular__senden { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
button.knopf { border: 0; font-family: inherit; cursor: pointer; }
.formular__status { margin: 0; font-size: 1rem; }
.formular__status:not(:empty) { flex-basis: 100%; padding: 12px 16px; background: var(--flaeche); border: 1px solid var(--kette); border-radius: 4px; }
.formular__status a { color: var(--kette); font-weight: 700; }

.fehlerliste { max-width: none; }   /* Gestalt: .vermerk.vermerk--fehler */
.fehlerliste__titel { font-size: 1.3rem; font-stretch: 85%; margin-bottom: 6px; }
.fehlerliste ul { margin: 0; padding-left: 1.2em; }
.fehlerliste a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fehler); font-weight: 700; }

/* Fehlerseite: der zutreffende Grund kommt als Sprungmarke (#eingabe, #zu-viele, #technisch), ohne Skript */
.gruende { display: grid; gap: 12px; margin: 28px 0 32px; }
.grund { position: relative; padding: 4px 20px 16px; border: 1px solid var(--linie); border-radius: 4px; }
.prosa .grund h2 { margin: 12px 0 8px; font-size: 1.3rem; }
.grund p { margin: 0; }
/* der zutreffende Grund wird zum Vermerk; die Beschriftung kommt aus .vermerk__marke (oben) */
.grund:target { margin-top: 10px; padding-top: 14px; background: var(--flaeche); border-color: var(--kette); }
.grund--spaeter:not(:target) { display: none; }
.grund:target::before { content: "Trifft zu"; }
:lang(en) .grund:target::before { content: "Applies"; }

/* ---------- Architektur (E94): interaktive Bilder ----------
   Ohne Skript: Nummern im Bild, nummerierte Liste darunter. Mit Skript (.ist-interaktiv): Knoepfe ab 1100 px ueber dem
   Bild, darunter als Raster; die Liste wird zum Detailfeld. Positionen kommen als --x/--y ueber CSSOM.
   Unter 860 px zeigt der Betrieb eine senkrechte Fassung des Bildes. */
.legende--architektur { margin-top: 32px; max-width: 72ch; }
.reife-hinweis { margin: 16px 0 0; font-size: 1rem; }

.bild { margin-top: 40px; }
.bild__anleitung { margin: 0 0 16px; font-size: 1rem; color: var(--text-leise); }
.bild__buehne { position: relative; }
.bild__svg { width: 100%; height: auto; }
/* Webstuhl ohne Knopfreihen: die leeren Baender oben und unten abschneiden (Prozent beziehen sich auf die Breite) */
.bild--wb .bild__svg { margin: -9% 0 -7.5%; }
.bild__svg--schmal { display: none; max-width: 480px; margin-inline: auto; }
@media (max-width: 859px) {
  .bild__svg--breit { display: none; }
  .bild__svg--schmal { display: block; }
}

.bild__teile { display: none; list-style: none; margin: 0; padding: 0; }
.bild.ist-interaktiv .bild__teile { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; margin-top: 16px; }
.teil {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 12px 6px 6px;
  scroll-margin: calc(var(--kopf-hoehe) + 16px) 0 16px;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 999px;
  font: inherit; font-size: .88rem; line-height: 1.15; text-align: left; cursor: pointer;
}
.teil:hover { border-color: var(--text-leise); }
.teil[aria-expanded="true"] { border-color: var(--kette); box-shadow: inset 0 0 0 1px var(--kette); }
.teil__nr {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--flaeche-hoch); font-family: var(--f-anzeige); font-stretch: 85%; font-weight: 700; font-size: 1rem;
}
.teil[aria-expanded="true"] .teil__nr { background: var(--kette); color: var(--auf-kette); }
.teil__text { display: grid; flex: 1 1 auto; }
.teil__name { font-weight: 700; }
.teil__rolle { font-size: .8rem; color: var(--text-leise); }
.teil .form { width: 10px; height: 10px; }
/* Roadmap-Faeden im Raster: alle Knoepfe gleich hoch, auch wenn ein langer Name umbricht (Betreiber 27.09.2026) */
@media (max-width: 1099px) {
  .bild--rg.ist-interaktiv .gewebe__faeden { grid-auto-rows: 1fr; }
  .bild--rg.ist-interaktiv .gewebe__faeden > li { display: flex; }
  .bild--rg.ist-interaktiv .gewebe__faeden .teil { height: 100%; }
}
@media (min-width: 1100px) {
  .bild.ist-interaktiv .bild__teile { display: block; position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .bild.ist-interaktiv .teil {
    position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: auto; white-space: nowrap;
    pointer-events: auto; box-shadow: 0 6px 18px color-mix(in srgb, var(--grund) 70%, transparent);
  }
  .bild.ist-interaktiv .teil[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--kette), 0 6px 18px color-mix(in srgb, var(--grund) 70%, transparent); }
  .bild.ist-interaktiv .ab-marken, .bild.ist-interaktiv .ab-koepfe { display: none; }
  .bild--wb.ist-interaktiv .bild__svg { margin: 0; }
}
.ab-fuehrungen { display: none; }
@media (min-width: 1100px) { .bild.ist-interaktiv .ab-fuehrungen { display: inline; } }

.bild__details { margin-top: 24px; }
.bild__leer { margin: 0; padding: 18px 20px; border: 1px dashed var(--linie); border-radius: 6px; color: var(--text-leise); font-size: 1rem; }
.bild__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .bild__liste { grid-template-columns: minmax(0, 1fr); } }
.bild.ist-interaktiv .bild__liste { grid-template-columns: minmax(0, 1fr); }
.detail { padding: 20px 24px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 6px; }
.detail[hidden] { display: none; }
.detail__titel { display: flex; align-items: baseline; gap: 12px; font-size: 1.5rem; font-stretch: 85%; line-height: 1.15; margin-bottom: 10px; }
.detail__nr { flex: 0 0 auto; font-stretch: 75%; color: var(--kette); }
.detail__rolle { color: var(--text-leise); font-weight: 400; }
.detail__stand { margin: 0 0 12px; }
.detail p:not(.detail__stand) { font-size: 1rem; max-width: 70ch; }
.detail p:last-child { margin-bottom: 0; }
.reife { list-style: none; margin: 0 0 12px; padding: 12px 0 0; border-top: 1px solid var(--linie); display: grid; gap: 4px; font-size: .92rem; color: var(--text-leise); }
.reife__name { color: var(--text); font-weight: 700; margin-right: 6px; }

.verbindungen__titel { margin-top: 48px; }
.verbindungen { margin: 16px 0 0; display: grid; border-top: 1px solid var(--linie); max-width: 900px; }
.verbindungen div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 1rem; }
@media (max-width: 700px) { .verbindungen div { grid-template-columns: minmax(0, 1fr); } }
.verbindungen dt { font-weight: 700; }
.verbindungen dd { margin: 0; color: var(--text-leise); }

/* Zeichnung: nur Token-Farben, beide Modi */
.ab-rahmen { fill: none; stroke: var(--text-leise); stroke-width: 2; }
.ab-rahmen-fein { fill: none; stroke: var(--text-leise); stroke-width: 1; }
.ab-kette { fill: none; stroke: var(--kette); stroke-width: 1.7; }
.ab-kette-fein { stroke: var(--kette); stroke-width: 1.5; }
.ab-baum { fill: var(--kette); }
.ab-baum-kern { fill: none; stroke: var(--grund); stroke-width: 2.5; }
.ab-schuss { fill: var(--schuss); }
.ab-schuss-fein { stroke: var(--schuss); stroke-width: 1.6; }
.ab-schuss-linie { stroke: var(--schuss); stroke-width: 2.4; }
.ab-schuss-strich { stroke: var(--schuss); stroke-width: 1.8; stroke-dasharray: 3 3; }
.ab-warenbaum { fill: var(--flaeche-hoch); stroke: var(--text-leise); stroke-width: 2; }
.ab-bogen { fill: none; stroke: var(--text-leise); stroke-width: 1.4; }
.ab-spitze { fill: var(--text-leise); }
.ab-fuehrungen line { stroke: var(--text-leise); stroke-width: 1.2; stroke-dasharray: 2 4; }
.ab-marke circle { fill: var(--flaeche); stroke: var(--kette); stroke-width: 2; }
.ab-marke text { fill: var(--text); font-family: var(--f-anzeige); font-weight: 700; font-size: 30px; text-anchor: middle; dominant-baseline: central; }
.ab-kopf .ab-marke text, .bild__svg--schmal .ab-marke text { font-size: 16px; }
.ab-kasten { fill: var(--flaeche); stroke: var(--linie); stroke-width: 2; }
.ab-kasten--ziel { stroke-dasharray: 6 4; }
.ab-vm { fill: var(--grund); stroke: var(--text-leise); stroke-width: 1.5; }
.ab-behaelter { fill: none; stroke: var(--kette); stroke-width: 2; }
.ab-db { fill: var(--flaeche-hoch); stroke: var(--kette); stroke-width: 1.6; }
.ab-db--primaer { fill: var(--kette); }
.ab-mandant { fill: var(--flaeche-hoch); stroke: var(--linie); stroke-width: 1; }
.ab-schluessel { fill: var(--schuss); }
.ab-schluessel--gross { fill: none; stroke: var(--schuss); stroke-width: 3; }
.ab-schluessel-bart { stroke: var(--schuss); stroke-width: 3; }
.ab-agent { fill: var(--kette); }
.ab-agent--ziel { fill: var(--grund); stroke: var(--text-leise); stroke-width: 2; stroke-dasharray: 3 2; }
.ab-leitung { stroke: var(--kette); stroke-width: 3; }
.ab-leitung-duenn { stroke: var(--kette); stroke-width: 2; }
.ab-pfeil { stroke: var(--text-leise); stroke-width: 1.6; }
.ab-text { fill: var(--text); font-family: var(--f-text); font-size: 15px; }
.ab-text--leise { fill: var(--text-leise); }
.ab-text--titel { font-weight: 700; font-size: 16px; }
.ab-text--pfeil { font-size: 14px; }
.ab-text--gross { font-weight: 700; font-size: 18px; }
.ab-text--mittel { font-size: 14px; }

/* ---------- Reifegrad (E86): vier Balken, gefuellt bis zum Grad; Form + Wort, nie nur Farbe ---------- */
.reife-form { flex: 0 0 auto; display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.reife-form i { display: block; width: 4px; border: 1px solid var(--text-leise); border-radius: 1px; }
.reife-form i:nth-child(1) { height: 6px; }
.reife-form i:nth-child(2) { height: 8px; }
.reife-form i:nth-child(3) { height: 10px; }
.reife-form i:nth-child(4) { height: 12px; }
.reife-form--1 i:nth-child(-n+1), .reife-form--2 i:nth-child(-n+2), .reife-form--3 i:nth-child(-n+3), .reife-form--4 i { background: var(--kette); border-color: var(--kette); }
.legende--reife li { flex-direction: column; align-items: flex-start; gap: 2px; }
.legende--reife .stand { color: var(--text); }
.legende__hinweis { margin-top: 4px; }
.matrix__abdeckung { display: block; margin-top: 4px; font-size: .82rem; color: var(--text-leise); white-space: normal; }
.stand-spalte h3 .reife-form { height: 16px; }
.stand-spalte__grad { font-family: var(--f-text); font-stretch: 100%; font-size: .9rem; font-weight: 400; color: var(--text-leise); }
.stand-spalte__namen { color: var(--text); margin: 8px 0 0; padding-left: 1.1em; }
.stand-spalte__namen li { margin: 2px 0; }
.stand-offen { margin-top: 12px; }
.zaehler__offen { font-weight: 400; font-size: 1rem; color: var(--text-leise); }

/* ---------- Intro-Video im Hero (E85) ----------
   Der Hero mit Video bleibt in beiden Modi dunkel (wie die Fusszeile); die lokalen Tokens sind die dunklen Werte. */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  object-fit: cover; object-position: 50% 50%;
  background: #0B1B1E;                      /* bis das Poster da ist */
}
.hero--video { --grund: #0B1B1E; --flaeche: #12272B; --flaeche-hoch: #173238; --text: #E9E3D6; --text-leise: #9FB0AA; --kette: #3CCB8E; --auf-kette: #062015; --schuss: #C9B48A; --linie: #23393D; color: var(--text); }
.hero--video .hero__schleier {
  background:
    linear-gradient(90deg, rgb(11 27 30 / .94) 0%, rgb(11 27 30 / .88) 45%, rgb(11 27 30 / 0) 85%),
    linear-gradient(180deg, rgb(11 27 30 / .70) 0%, rgb(11 27 30 / 0) 22%),
    linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25));      /* ganzes Video um 25 % dunkler */
}
@media (max-width: 700px) {
  .hero--video .hero__schleier {
    background:
      linear-gradient(180deg, rgb(11 27 30 / .92) 0%, rgb(11 27 30 / .86) 55%, rgb(11 27 30 / 0) 80%),
      linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25));
  }
}
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.hero--video .knopf--leise { background: rgb(11 27 30 / .75); color: var(--text); border: 1px solid var(--linie); }
.hero--video [hidden] { display: none; }   /* .pause und .knopf setzen display selbst; hidden muss trotzdem greifen */
.hero--video video::cue { background: rgb(11 27 30 / .82); color: #E9E3D6; }
/* Pause-Knopf bleibt auch bei reduzierter Bewegung, sobald ein Video laeuft (das Skript blendet ihn sonst aus) */
@media (prefers-reduced-motion: reduce) { .hero--video .pause:not([hidden]) { display: inline-flex; } }
/* bildschirmfuellend (E85): der Hero beginnt unter der Kopfleiste, also volle Hoehe des Sichtfensters */
.hero--video { min-height: max(620px, 100vh); min-height: max(620px, 100svh); }
@media (max-width: 700px) { .hero--video { min-height: max(600px, 100vh); min-height: max(600px, 100svh); } }
/* Niedrige Bildschirme: Hero-Inhalt verdichten, damit der Hero nicht hoeher als der Bildschirm wird und der Pfeil
   ganz sichtbar bleibt (gemessen: 1366 x 768, 1440 x 900, 1920 x 1080, 360 x 740; Sonde warum.cjs) */
@media (min-width: 701px) and (max-height: 940px) {
  .hero--video .hero__inhalt { padding-block: 28px 96px; }
  .hero--video .status-marke { margin-bottom: 16px; }
  .hero--video .hero__titel { font-size: min(clamp(3rem, 8.2vw, 7.4rem), 12.5vh); }
  .hero--video .hero__motiv { width: 150px; margin-top: 18px; }
  .hero--video .hero__text { margin: 18px 0 22px; max-width: 48ch; }
}
/* Querformat und sehr niedrige Schirme: der Hero waechst mit dem Inhalt, der Pfeil entfaellt (der Inhalt schliesst
   direkt an), das Motiv auch; gemessen 1024 x 600, 844 x 390, 740 x 360 */
@media (max-height: 619px) {
  .hero--video { min-height: 0; }
  .hero--video .hero__inhalt { padding-block: 20px 88px; }
  .hero--video .status-marke { margin-bottom: 10px; }
  .hero--video .hero__titel { font-size: min(clamp(2.4rem, 6vw, 4rem), 16vh); }
  .hero--video .hero__motiv, .hero__runter { display: none; }
  .hero--video .hero__text { margin: 12px 0 16px; max-width: 60ch; }
}
@media (max-width: 700px) and (max-height: 820px) {
  .hero--video .hero__inhalt { padding-block: 16px 96px; }
  .hero--video .status-marke { margin-bottom: 12px; }
  .hero--video .hero__titel { font-size: 2.6rem; }
  .hero--video .hero__motiv { width: 96px; margin-top: 12px; }
  .hero--video .hero__text { margin: 14px 0 16px; line-height: 1.5; }
}

/* ---------- Roadmap als Gewebe (E100) ----------
   Faden-Dicke + Strichart zeigen den Reifegrad (dazu Zahl und Wort in Knopf und Detail), Knoten die Phase. Hervorhebung
   ueber Form (Hof um den Faden, dickere Schussreihe, Umriss am Knoten), nicht nur ueber Farbe. */
.legende--gewebe { margin-top: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.legende--gewebe li { align-items: center; }
.rg-muster { flex: 0 0 auto; width: 40px; height: 16px; }
.rg-faden { stroke: var(--kette); stroke-linecap: round; }
.rg-faden--0 { stroke: var(--text-leise); stroke-width: 1.6; stroke-dasharray: 4 4; }
.rg-faden--1 { stroke-width: 2; }
.rg-faden--2 { stroke-width: 4; }
.rg-faden--3 { stroke-width: 6.5; }
.rg-faden--4 { stroke-width: 9; }
.rg-halo { stroke: var(--text); stroke-width: 14; stroke-linecap: round; opacity: 0; }
.rg-schuss { stroke: var(--schuss); stroke-width: 2; }
.rg-knoten { fill: var(--schuss); stroke: var(--kette); stroke-width: 1.5; }
.rg-klammer { stroke: var(--linie); stroke-width: 2; }
.rg-gruppe { font-size: 12px; text-anchor: middle; }
.rg-name { font-size: 13px; }
.rg-klein { font-size: 13px; }
.rg-marke text { font-size: 16px; }
.bild--rg g.ist-hervorgehoben .rg-halo { opacity: .28; }
.bild--rg.hat-hervorhebung g[data-faden]:not(.ist-hervorgehoben) { opacity: .35; }
.bild--rg .rg-schuss.ist-hervorgehoben { stroke-width: 6; }
.bild--rg .rg-knoten.ist-hervorgehoben { stroke: var(--text); stroke-width: 3; }
.gewebe__hinweis { display: none; margin: 0 0 12px; font-size: 1rem; color: var(--text-leise); }
.gewebe__rahmen:focus-visible { outline: 2px solid var(--kette); outline-offset: 3px; }
.gewebe__listentitel { margin: 24px 0 12px; }
.bild.ist-interaktiv .gewebe__listentitel { display: none; }
.bild--rg .bild__liste + .gewebe__listentitel { margin-top: 32px; }
@media (max-width: 859px) {
  .gewebe__hinweis { display: block; }
  .gewebe__rahmen { overflow-x: auto; }
  .gewebe__svg { min-width: 900px; }
}
/* Schmal: die Grafik waere briefmarkengross und die Faehigkeiten stuenden doppelt (Matrix darunter). Es bleiben die
   Phasen als Liste; der Hinweis verweist auf die Tabelle. */
.gewebe__mobil { display: none; margin: 16px 0 0; color: var(--text-leise); }
@media (max-width: 699px) {
  .legende--gewebe, .gewebe__hinweis, .gewebe__rahmen, .bild.bild--rg .gewebe__faeden, .bild--rg .gewebe__faedenliste { display: none; }
  .gewebe__mobil { display: block; }
}

@media (min-width: 1100px) {
  /* Fadenknoepfe breit: nur Stufe und Balken sichtbar, der Name bleibt fuer Bildschirmleser */
  .bild--rg.ist-interaktiv .teil--faden { gap: 6px; padding: 4px 8px 4px 4px; }
  .bild--rg.ist-interaktiv .teil--faden .teil__nr { width: 28px; height: 28px; }
  .bild--rg.ist-interaktiv .teil--faden .teil__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Aktuelle Seite im Fuss: fett und unterstrichen, nicht nur Farbe (im Kopf: Unterstrich-Balken bzw. Balken links) */
.fuss li a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }