/* ==========================================================================
   GridFlex Website · Seitenrahmen

   Ergaenzt basis.css und design.css um alles, was eine echte Website
   braucht und das Lab nicht hatte: Kopfzeile mit Aufklappmenue, Hero,
   Zaehlwerk, Abschnittsrhythmus, Fusszeile, Platzhalterseiten.

   Farben kommen ausschliesslich aus den Rollen in tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Symbole

   Das eigene Set ist als Strichzeichnung gedacht: keine Flaeche, Strich in
   der Textfarbe. Staerke und Linienenden setzt die Designsprache.
   -------------------------------------------------------------------------- */
.ikon {
  width: var(--ikon-gr, 20px);
  height: var(--ikon-gr, 20px);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ikon-strich, 1.5);
  stroke-linecap: var(--ikon-ende, round);
  stroke-linejoin: var(--ikon-ecke, round);
  vector-effect: non-scaling-stroke;
}
.ikon * { vector-effect: non-scaling-stroke; }
.ikon .f { fill: var(--ikon-fuellung, none); }

/* --------------------------------------------------------------------------
   Seite
   -------------------------------------------------------------------------- */
:root { --kopf-h: 74px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.seite {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background-color 400ms, color 400ms;
}

.seite__inhalt { display: block; }

/* Sprungmarke */
.sprung {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--text); color: var(--bg);
  padding: 10px 16px; font-family: var(--f-mono, ui-monospace, monospace); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none;
  transition: top 200ms;
}
.sprung:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  transition: background-color 300ms, border-color 300ms;
}
.kopf.ist-gescrollt { background: color-mix(in oklab, var(--bg) 96%, transparent); }

.kopf__zeile {
  max-width: var(--wrap, 1320px);
  margin: 0 auto;
  padding: 0 var(--rand, 32px);
  min-height: 74px;
  display: flex; align-items: center; gap: 28px;
}
.kopf__marke { display: flex; align-items: center; flex: none; padding: 14px 0; }
.kopf__marke .logo { width: 168px; height: auto; }
.kopf__marke:hover .logo { opacity: 0.86; }

.kopf__nav { display: flex; align-items: stretch; gap: 2px; margin-left: auto; position: relative; }
.kopf__punkt { display: flex; align-items: stretch; }
.kopf__link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 14px; min-height: 74px;
  font-family: var(--f-mono, monospace); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  position: relative; transition: color 200ms;
}
.kopf__link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--kurve, ease);
}
.kopf__link:hover::after, .kopf__punkt.ist-offen .kopf__link::after, .kopf__link.ist-aktiv::after { transform: scaleX(1); }
.kopf__link .ikon { width: 11px; height: 11px; transition: transform 260ms; opacity: 0.6; }
.kopf__punkt.ist-offen .kopf__link .ikon { transform: rotate(180deg); }

.kopf__werkzeuge { display: flex; align-items: center; gap: 10px; flex: none; }
.kopf__modus {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  cursor: pointer; transition: border-color 200ms, background-color 200ms;
}
.kopf__modus:hover { border-color: var(--text); background: var(--surface); }
.kopf__modus .ikon { width: 17px; height: 17px; }
[data-modus="dunkel"] .kopf__modus .ikon--hell { display: none; }
[data-modus="hell"] .kopf__modus .ikon--dunkel { display: none; }
.kopf__cta { --btn-h: 42px; }

/* Aufklappmenue */
.kopf__panel {
  position: absolute; top: 100%; right: -14px; z-index: 5; margin-top: 1px;
  width: min(760px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
  padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 200ms, transform 260ms var(--kurve, ease), visibility 200ms;
}
.kopf__punkt.ist-offen .kopf__panel { opacity: 1; visibility: visible; transform: none; }
.panel__eintrag {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 13px 14px; text-decoration: none; color: inherit;
  border: 1px solid transparent; transition: background-color 180ms, border-color 180ms;
}
.panel__eintrag:hover { background: var(--surface-elevated); border-color: var(--border); }
.panel__ikon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--accent);
}
.panel__ikon .ikon { width: 19px; height: 19px; }
.panel__nr { display: block; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.08em; color: var(--text-2); }
.panel__titel { display: block; font-size: 14.5px; font-weight: 600; margin: 2px 0 3px; letter-spacing: -0.01em; }
.panel__text { display: block; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.panel__fuss {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; margin-top: 6px; border-top: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none;
}
.panel__fuss:hover { color: var(--accent); }

/* Mobile */
.kopf__burger { display: none; width: 42px; height: 42px; border: 1px solid var(--border); background: none; color: var(--text); cursor: pointer; }
.kopf__burger span { display: block; width: 18px; height: 1px; background: currentColor; margin: 4px auto; transition: transform 260ms, opacity 200ms; }
.ist-menue-offen .kopf__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.ist-menue-offen .kopf__burger span:nth-child(2) { opacity: 0; }
.ist-menue-offen .kopf__burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobil {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg); border-bottom: 1px solid var(--border);
  max-height: calc(100vh - 74px); overflow-y: auto;
  display: none;
}
.ist-menue-offen .mobil { display: block; }
.mobil__innen { padding: 8px var(--rand, 24px) 28px; }
.mobil__gruppe { border-top: 1px solid var(--border); padding: 16px 0 8px; }
.mobil__titel { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 10px; }
.mobil a { display: block; padding: 9px 0; font-size: 16px; color: var(--text); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent); }
.mobil a:last-child { border-bottom: 0; }
.mobil__cta { margin-top: 18px; width: 100%; }

@media (max-width: 1080px) {
  :root { --kopf-h: 64px; }
  .kopf__nav, .kopf__cta { display: none; }
  .kopf__burger { display: block; }
  .kopf__zeile { min-height: 64px; gap: 14px; }
  .kopf__marke .logo { width: 142px; }
  .kopf__werkzeuge { margin-left: auto; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Der Hero ist eine Scroll-Szene: solange gescrollt wird, setzt sich das
   Zeichen zusammen und oeffnet sich danach zum Netz. */
.hero { position: relative; height: 230vh; margin-top: calc(-1 * var(--kopf-h)); }
.hero__klebe {
  position: sticky; top: 0;
  height: 100vh; min-height: 620px;
  display: grid; grid-template-rows: 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.hero__buehne { position: absolute; inset: 0; z-index: 0; }
.hero__buehne .fx { position: absolute; inset: 0; }
.hero__buehne canvas { width: 100%; height: 100%; display: block; }
.hero__schleier {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 74% 50%, transparent 30%, color-mix(in oklab, var(--bg) 72%, transparent) 78%),
    linear-gradient(100deg, var(--bg) 6%, color-mix(in oklab, var(--bg) 82%, transparent) 38%, transparent 62%);
}
.hero__innen {
  position: relative; z-index: 2; pointer-events: none;
  max-width: var(--wrap, 1320px); width: 100%;
  margin: 0 auto; padding: calc(var(--kopf-h) + 34px) var(--rand, 32px) 0;
  align-self: center;
}
.hero__text { max-width: 640px; }
.hero__eyebrow { margin-bottom: 26px; }
.hero__titel { margin-bottom: 26px; }
.hero__lead { max-width: 52ch; margin-bottom: 38px; }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Die Buehne liegt darunter und soll den Zeiger bekommen */
.hero__innen a, .hero__innen button { pointer-events: auto; }

/* Themenband am unteren Rand */
.hero__band {
  position: relative; z-index: 2;
  max-width: var(--wrap, 1320px); width: 100%;
  margin: 0 auto; padding: 0 var(--rand, 32px) 0;
  align-self: end;
}
.hero__themen { margin-top: 0; }
.hero__themen {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--text);
  margin-top: 64px;
}
.hero__thema {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 16px; border-left: 1px solid var(--border);
  font-size: 14px; color: var(--text); text-decoration: none;
  transition: background-color 220ms, color 220ms;
}
.hero__thema:first-child { border-left: 0; padding-left: 0; }
.hero__thema:hover { background: color-mix(in oklab, var(--surface) 70%, transparent); color: var(--accent); }
.hero__thema .ikon { width: 20px; height: 20px; color: var(--primary); flex: none; }
.hero__thema:hover .ikon { color: var(--accent); }
.hero__thema-nr { margin-left: auto; font-family: var(--f-mono, monospace); font-size: 10.5px; color: var(--text-2); }

.hero__legende {
  position: absolute; left: var(--rand, 32px); bottom: 118px; z-index: 2;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
  display: flex; align-items: center; gap: 9px;
}
.hero__legende::before { content: ""; width: 26px; height: 1px; background: var(--accent); }

.hero__scroll {
  position: absolute; right: var(--rand, 32px); bottom: 118px; z-index: 3;
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
  transition: opacity 500ms, transform 500ms;
}
.hero__scroll .ikon { width: 14px; height: 14px; color: var(--accent); animation: hero-tipp 2.2s var(--kurve, ease) infinite; }
.hero__scroll.ist-weg { opacity: 0; transform: translateY(8px); pointer-events: none; }
@keyframes hero-tipp { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }

@media (max-width: 900px) {
  .hero { height: 175vh; }
  .hero__klebe { min-height: 560px; }
  .hero__innen { padding-top: 92px; }
  .hero__scroll span { display: none; }
  .hero__buehne { opacity: 0.55; }
  .hero__schleier {
    background:
      linear-gradient(180deg, var(--bg) 2%, color-mix(in oklab, var(--bg) 78%, transparent) 46%, color-mix(in oklab, var(--bg) 55%, transparent) 72%, var(--bg) 100%);
  }
  .hero__knoepfe .gf-btn { flex: 1 1 100%; }
  .hero__themen { grid-template-columns: 1fr 1fr; }
  .hero__thema:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero__thema { border-top: 1px solid var(--border); }
  .hero__thema:nth-child(1), .hero__thema:nth-child(2) { border-top: 0; }
  .hero__legende { display: none; }
}

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */
.sec { position: relative; padding: clamp(64px, 6.6vw, 104px) 0; border-bottom: 1px solid var(--border); }
.sec--eng { padding: clamp(56px, 6vw, 92px) 0; }
.sec--dunkel { background: var(--inverse); color: var(--text-inverse); border-bottom-color: color-mix(in oklab, var(--text-inverse) 14%, transparent); }
.wrap { max-width: var(--wrap, 1320px); margin: 0 auto; padding: 0 var(--rand, 32px); }

.sec__kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 72px); align-items: end; padding-top: 22px; border-top: 1px solid var(--text); margin-bottom: clamp(38px, 4vw, 64px); }
.sec--dunkel .sec__kopf { border-top-color: color-mix(in oklab, var(--text-inverse) 55%, transparent); }
.sec__kopf--mitte { grid-template-columns: 1fr; max-width: 62ch; }
.sec__eyebrow { margin-bottom: 20px; }
.sec__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.1em; color: var(--text-2); }
.sec__mehr {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--f-mono, monospace); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 5px;
  transition: gap 220ms, color 220ms;
}
.sec__mehr:hover { gap: 16px; color: var(--accent); }
.sec__mehr .ikon { width: 15px; height: 15px; }

@media (max-width: 860px) {
  .sec__kopf { grid-template-columns: 1fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   Zaehlwerk (Idee aus dem Termin, Werte sind Platzhalter)
   -------------------------------------------------------------------------- */
.uhr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.uhr__anzeige { position: relative; border: 1px solid color-mix(in oklab, var(--text-inverse) 30%, transparent); padding: 30px 30px 26px; }
.uhr__marke {
  position: absolute; top: -9px; left: 22px; padding: 0 9px; background: var(--inverse);
  font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-light);
}
.uhr__zahl {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--f-mono, monospace); font-size: clamp(38px, 6.4vw, 92px); font-weight: 400;
  letter-spacing: -0.03em; line-height: 1; color: var(--text-inverse);
}
.uhr__ziffer {
  display: inline-block; min-width: 0.62em; text-align: center;
  color: var(--text-inverse);
  transition: color 240ms;
}
.uhr__ziffer.ist-neu { color: var(--accent-light); transition: none; }
.uhr__doppel { color: color-mix(in oklab, var(--text-inverse) 32%, transparent); }
.uhr__zeile { margin: 14px 0 0; font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklab, var(--text-inverse) 58%, transparent); }
.uhr__offen { display: flex; flex-wrap: wrap; gap: 28px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid color-mix(in oklab, var(--text-inverse) 18%, transparent); }
.uhr__offen span { display: grid; gap: 3px; font-size: 12.5px; color: color-mix(in oklab, var(--text-inverse) 60%, transparent); }
.uhr__offen b { font-family: var(--f-mono, monospace); font-size: 26px; font-weight: 400; color: var(--accent-light); letter-spacing: -0.02em; }
.uhr__param { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 30px; background: color-mix(in oklab, var(--text-inverse) 16%, transparent); border: 1px solid color-mix(in oklab, var(--text-inverse) 16%, transparent); }
.uhr__feld { background: var(--inverse); padding: 14px 16px; }
.uhr__label { display: block; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in oklab, var(--text-inverse) 55%, transparent); }
.uhr__wert { display: block; font-family: var(--f-mono, monospace); font-size: 21px; margin: 5px 0 4px; color: var(--text-inverse); }
.uhr__quelle { display: block; font-size: 12.5px; color: color-mix(in oklab, var(--text-inverse) 62%, transparent); }
@media (max-width: 900px) { .uhr { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Positionierung
   -------------------------------------------------------------------------- */
.position { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 76px); align-items: start; }
.position__bild { position: relative; border: 1px solid var(--border); }
.position__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; filter: grayscale(1) contrast(1.06) brightness(0.92); }
[data-modus="hell"] .position__bild img { filter: grayscale(1) contrast(1.05); }
.position__bildtext { display: flex; gap: 10px; margin-top: 12px; font-family: var(--f-mono, monospace); font-size: 11px; color: var(--text-2); }
.position__bildtext b { color: var(--text); font-weight: 500; }
.perspektiven { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 34px; }
.perspektive { position: relative; background: var(--bg); padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.perspektive__ikon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); }
.perspektive__ikon .ikon { width: 22px; height: 22px; }
.perspektive__nr { position: absolute; right: 18px; top: 20px; font-family: var(--f-mono, monospace); font-size: 10.5px; color: var(--text-2); }
.perspektive h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.perspektive p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; max-width: 46ch; }
@media (max-width: 900px) { .position { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Datenblatt
   -------------------------------------------------------------------------- */
.blatt { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(22px, 2.6vw, 44px); align-items: start; }
.blatt__tabelle { grid-column: auto; }
.blatt__seite { display: grid; gap: 14px; align-content: start; }
.blatt__buehne { position: relative; border: 1px solid var(--border); background: var(--surface); aspect-ratio: 16 / 10; }
.blatt__buehne .fx { position: absolute; inset: 0; }
.blatt__legende { margin: 0; display: flex; gap: 10px; font-family: var(--f-mono, monospace); font-size: 11px; line-height: 1.5; color: var(--text-2); }
.blatt__legende b { color: var(--text); font-weight: 500; flex: none; }
.blatt__hinweis { margin: 6px 0 0; padding-left: 16px; border-left: 1px solid var(--accent); font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 980px) { .blatt { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Leistungen
   -------------------------------------------------------------------------- */
.leistungen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.leistung {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px 24px; text-decoration: none; color: inherit;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 30%, transparent);
  transition: background-color 260ms;
}
.leistung::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: 0;
  --m: var(--accent); --l: 9px;
  background:
    linear-gradient(var(--m), var(--m)) 0 0 / var(--l) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / var(--l) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 0 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / var(--l) 1px no-repeat,
    linear-gradient(var(--m), var(--m)) 100% 100% / 1px var(--l) no-repeat;
  transition: opacity 240ms, inset 380ms var(--kurve, ease);
}
.leistung:hover { background: var(--surface-elevated); }
.leistung:hover::after { opacity: 1; inset: 14px; }
.leistung__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.leistung__ikon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); transition: color 240ms, border-color 240ms; }
.leistung:hover .leistung__ikon { color: var(--accent); border-color: var(--accent); }
.leistung__ikon .ikon { width: 22px; height: 22px; }
.leistung__nr { font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-2); }
.leistung__titel { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
.leistung__text { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0; }
.leistung__fuss { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.leistung__fuss .ikon { width: 14px; height: 14px; transition: transform 260ms; }
.leistung:hover .leistung__fuss .ikon { transform: translateX(4px); }
@media (max-width: 1180px) { .leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .leistungen { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Systeme: Reiter mit Effekt
   -------------------------------------------------------------------------- */
.systeme { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 3vw, 54px); align-items: start; }
.systeme__liste { display: flex; flex-direction: column; border-top: 1px solid var(--text); }
.systeme__reiter {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 18px 16px; background: none; border: 0; border-bottom: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-2); cursor: pointer; text-align: left;
  transition: color 200ms, background-color 200ms;
}
.systeme__reiter .ikon { width: 20px; height: 20px; }
.systeme__reiter:hover { color: var(--text); }
.systeme__reiter[aria-selected="true"] { color: var(--text); background: var(--surface); }
.systeme__reiter[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--accent); }
.systeme__inhalt { display: grid; grid-template-rows: auto 1fr; }
.systeme__buehne { position: relative; border: 1px solid var(--border); background: var(--surface); aspect-ratio: 16 / 6.6; max-height: 380px; overflow: hidden; }
.systeme__buehne .fx { position: absolute; inset: 0; }
.systeme__panel { display: none; }
.systeme__panel.ist-aktiv { display: block; animation: sanft-ein 420ms var(--kurve, ease); }
.systeme__text { margin: 22px 0 0; font-size: var(--fs-lead, 18px); line-height: 1.5; color: var(--text-2); max-width: 60ch; }
.systeme__param { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 26px; background: var(--border); border: 1px solid var(--border); }
.systeme__param li { flex: 1 1 200px; background: var(--bg); font-family: var(--f-mono, monospace); font-size: 11.5px; padding: 12px 14px; color: var(--text-2); display: flex; gap: 9px; align-items: baseline; }
.systeme__param li::before { content: ""; width: 5px; height: 5px; background: var(--accent); flex: none; }
.systeme__notiz { margin: 26px 0 0; padding: 0 0 0 16px; border-left: 1px solid var(--accent); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.systeme__liste .systeme__panel.ist-aktiv { display: block; }
@keyframes sanft-ein { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 900px) {
  .systeme { grid-template-columns: 1fr; }
  .systeme__liste { flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--border); }
  .systeme__reiter { border-bottom: 0; white-space: nowrap; }
  .systeme__reiter[aria-selected="true"]::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; }
}

/* --------------------------------------------------------------------------
   Vorgehen
   -------------------------------------------------------------------------- */
.phasen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; margin-top: 8px; }
.phase { position: relative; padding: 34px 16px 0 0; }
.phase::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--border); }
.phase__knoten { position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border: 1px solid var(--text); background: var(--bg); transform: rotate(45deg); transition: background-color 300ms, border-color 300ms; }
.phase.ist-sichtbar .phase__knoten { background: var(--accent); border-color: var(--accent); }
.phase__nr { font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-2); }
.phase__titel { margin: 8px 0 7px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.phase__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.vorgehen__fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: clamp(38px, 4vw, 64px); padding-top: 22px; border-top: 1px solid var(--border); }
.vorgehen__fuss p { margin: 0; font-size: 14.5px; color: var(--text-2); max-width: 64ch; }
.vorgehen__band { position: relative; height: 128px; margin-top: clamp(30px, 3.5vw, 52px); border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.vorgehen__band .fx { position: absolute; inset: 0; }
@media (max-width: 760px) { .vorgehen__fuss { grid-template-columns: 1fr; } }
.phase.ist-sichtbar::after { content: ""; position: absolute; left: 0; top: 14px; height: 1px; background: var(--accent); animation: phase-linie 700ms var(--kurve, ease) both; }
@keyframes phase-linie { from { width: 0; } to { width: 100%; } }
@media (max-width: 1080px) { .phasen { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 680px) { .phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Schnittstelle
   -------------------------------------------------------------------------- */
.schnitt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.schnitt__buehne { position: relative; border: 1px solid color-mix(in oklab, var(--text-inverse) 22%, transparent); aspect-ratio: 4 / 3; max-height: 520px; }
.schnitt__buehne .fx { position: absolute; inset: 0; }
.schnitt__punkte { display: grid; gap: 1px; margin-top: 30px; background: color-mix(in oklab, var(--text-inverse) 18%, transparent); border: 1px solid color-mix(in oklab, var(--text-inverse) 18%, transparent); }
.schnitt__punkte li { background: var(--inverse); padding: 15px 18px; display: flex; gap: 14px; align-items: baseline; font-size: 15px; color: color-mix(in oklab, var(--text-inverse) 88%, transparent); }
.schnitt__punkte b { font-family: var(--f-mono, monospace); font-size: 11px; font-weight: 500; color: var(--accent-light); letter-spacing: 0.06em; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 45%, transparent); margin-top: 52px; }
.kennzahl { padding: 24px 18px 8px 20px; border-left: 1px solid color-mix(in oklab, var(--text-inverse) 18%, transparent); }
.kennzahl:first-child { border-left: 0; padding-left: 0; }
.kennzahl__wert { font-family: var(--f-mono, monospace); font-size: clamp(38px, 4.6vw, 66px); line-height: 1; letter-spacing: -0.04em; color: var(--text-inverse); }
.kennzahl__label { display: block; margin: 12px 0 5px; font-family: var(--f-mono, monospace); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-light); }
.kennzahl__text { display: block; font-size: 13.5px; color: color-mix(in oklab, var(--text-inverse) 65%, transparent); }
.kennzahlen__hinweis { margin: 26px 0 0; font-family: var(--f-mono, monospace); font-size: 11px; color: color-mix(in oklab, var(--text-inverse) 52%, transparent); }
@media (max-width: 900px) { .schnitt { grid-template-columns: 1fr; } .kennzahlen { grid-template-columns: 1fr 1fr; row-gap: 22px; } .kennzahl:nth-child(3) { border-left: 0; padding-left: 0; } }

/* --------------------------------------------------------------------------
   Finanzierung
   -------------------------------------------------------------------------- */
.finanz { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.finanz__module { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.finanz__modul { background: var(--bg); padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; transition: background-color 220ms; }
.finanz__modul:hover { background: var(--surface); }
.finanz__modul b { font-family: var(--f-mono, monospace); font-size: 11px; font-weight: 500; letter-spacing: 0.07em; color: var(--accent); }
.finanz__modul h3 { margin: 0 0 5px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.finanz__modul p { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.finanz__hinweis { margin-top: 24px; padding-left: 18px; border-left: 1px solid var(--text); font-family: var(--f-mono, monospace); font-size: 13px; color: var(--text-2); line-height: 1.6; }
@media (max-width: 900px) { .finanz { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Abschluss
   -------------------------------------------------------------------------- */
.abschluss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.abschluss__themen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.abschluss__themen li { font-family: var(--f-mono, monospace); font-size: 11.5px; padding: 8px 12px; border: 1px solid var(--border); color: var(--text-2); }
.abschluss__karte { border: 1px solid var(--text); padding: 30px; background: var(--surface); }
.abschluss__karte h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.abschluss__karte p { margin: 0 0 22px; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.abschluss__liste { display: grid; gap: 10px; margin: 0 0 26px; }
.abschluss__liste li { display: flex; gap: 11px; align-items: baseline; font-size: 14.5px; color: var(--text-2); }
.abschluss__liste .ikon { width: 15px; height: 15px; color: var(--primary); flex: none; }
@media (max-width: 900px) { .abschluss { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Fusszeile
   -------------------------------------------------------------------------- */
.fuss { background: var(--inverse); color: var(--text-inverse); padding: clamp(56px, 6vw, 96px) 0 30px; }
.fuss__oben { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 0.8fr)); gap: clamp(24px, 3vw, 56px); }
.fuss__marke .logo { width: 196px; height: auto; }
.fuss__text { margin: 22px 0 0; font-size: 14px; line-height: 1.6; color: color-mix(in oklab, var(--text-inverse) 70%, transparent); max-width: 34ch; }
.fuss__kontakt { margin-top: 26px; display: grid; gap: 9px; }
.fuss__kontakt div { display: grid; gap: 2px; }
.fuss__kontakt span { font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: color-mix(in oklab, var(--text-inverse) 50%, transparent); }
.fuss__kontakt b { font-weight: 400; font-size: 14px; color: color-mix(in oklab, var(--text-inverse) 78%, transparent); }
.fuss__titel { font-family: var(--f-mono, monospace); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 16px; }
.fuss__links { display: grid; gap: 10px; }
.fuss__links a { font-size: 14.5px; color: color-mix(in oklab, var(--text-inverse) 78%, transparent); text-decoration: none; transition: color 200ms; }
.fuss__links a:hover { color: var(--text-inverse); }
.schriftfeld { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid color-mix(in oklab, var(--text-inverse) 35%, transparent); margin-top: clamp(40px, 5vw, 72px); }
.schriftfeld div { padding: 11px 15px; border-left: 1px solid color-mix(in oklab, var(--text-inverse) 22%, transparent); display: grid; gap: 4px; }
.schriftfeld div:first-child { border-left: 0; }
.schriftfeld span { font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklab, var(--text-inverse) 52%, transparent); }
.schriftfeld b { font-family: var(--f-mono, monospace); font-weight: 500; font-size: 13px; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 26px; font-family: var(--f-mono, monospace); font-size: 11px; color: color-mix(in oklab, var(--text-inverse) 50%, transparent); }
.fuss__unten a { color: inherit; text-decoration: none; }
.fuss__unten a:hover { color: var(--text-inverse); }
@media (max-width: 900px) {
  .fuss__oben { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
  .schriftfeld { grid-template-columns: 1fr 1fr; }
  .schriftfeld div:nth-child(3) { border-left: 0; }
}

/* --------------------------------------------------------------------------
   Platzhalterseiten
   -------------------------------------------------------------------------- */
.platz { padding: clamp(80px, 10vw, 150px) 0; }
.platz__innen { max-width: 62ch; }
.platz__marke { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 7px 12px; margin-bottom: 28px; }
.platz__titel { margin: 0 0 20px; }
.platz__text { margin: 0 0 30px; }
.platz__liste { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 34px; }
.platz__liste li { background: var(--bg); padding: 14px 18px; display: flex; gap: 14px; align-items: baseline; font-size: 14.5px; color: var(--text-2); }
.platz__liste b { font-family: var(--f-mono, monospace); font-size: 11px; font-weight: 500; color: var(--accent); }

/* --------------------------------------------------------------------------
   Einlauf beim Scrollen
   -------------------------------------------------------------------------- */
.js [data-ein] { opacity: 0; transform: translateY(18px); transition: opacity 760ms var(--kurve, ease), transform 900ms var(--kurve, ease); transition-delay: calc(var(--ein, 0) * 90ms); }
.js [data-ein].ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-ein] { opacity: 1; transform: none; transition: none; }
  .phase.ist-sichtbar::after { animation: none; width: 100%; }
}

/* --------------------------------------------------------------------------
   Schaltflaechen im dunklen Modus

   Nachts ist die Markenfarbe die hellere Fassung; weisse Schrift darauf
   waere zu schwach. Deshalb traegt die Flaeche die tiefe Grundfarbe.
   -------------------------------------------------------------------------- */
[data-modus="dunkel"] .gf-btn--primaer { --btn-fg: var(--inverse); }
[data-modus="dunkel"] .gf-btn--primaer:hover,
[data-modus="dunkel"] .gf-btn--primaer.ist-hover { --btn-bg: var(--primary-light); --btn-rand: var(--primary-light); --btn-fg: var(--inverse); }
[data-modus="dunkel"] .gf-btn--sekundaer:hover { --btn-bg: var(--text); --btn-fg: var(--bg); }

/* --------------------------------------------------------------------------
   Fadenkreuz

   Liegt ueber der Seite, faengt nichts ab und liegt unter der Kopfzeile.
   Gezeichnet wird in assets/js/seite/fadenkreuz.js.
   -------------------------------------------------------------------------- */
.fadenkreuz {
  position: fixed; inset: 0; z-index: 20;
  pointer-events: none;
  width: 100%; height: 100%;
}

/* --------------------------------------------------------------------------
   Licht unter dem Zeiger

   Karten bekommen einen weichen Schein an der Stelle, an der der Zeiger
   steht. Die Position kommt als --mx / --my aus dem Skript.
   -------------------------------------------------------------------------- */
[data-licht] {
  background-image: radial-gradient(
    260px circle at var(--mx, -300px) var(--my, -300px),
    color-mix(in oklab, var(--accent) 18%, transparent) 0%,
    color-mix(in oklab, var(--accent) 7%, transparent) 42%,
    transparent 72%
  );
  background-repeat: no-repeat;
  transition: background-color 260ms;
}
[data-modus="hell"] [data-licht] {
  background-image: radial-gradient(
    260px circle at var(--mx, -300px) var(--my, -300px),
    color-mix(in oklab, var(--accent) 10%, transparent) 0%,
    color-mix(in oklab, var(--accent) 4%, transparent) 42%,
    transparent 72%
  );
}

/* --------------------------------------------------------------------------
   Perspektiven: Hover weckt die Zeile
   -------------------------------------------------------------------------- */
.perspektive { transition: background-color 280ms; }
.perspektive::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: var(--accent); transition: width 620ms var(--kurve, ease);
}
.perspektive:hover::after { width: 100%; }
.perspektive__ikon { transition: background-color 300ms, color 300ms, border-color 300ms, transform 500ms var(--kurve, ease); }
.perspektive:hover .perspektive__ikon { background: var(--accent); color: var(--inverse); border-color: var(--accent); }
[data-modus="hell"] .perspektive:hover .perspektive__ikon { color: var(--surface-elevated); }
.perspektive:hover .perspektive__nr { color: var(--accent); }
.perspektive__nr { transition: color 300ms; }
.perspektive h3 { transition: transform 420ms var(--kurve, ease); }
.perspektive:hover h3 { transform: translateX(3px); }

/* Auch die Leistungen und die Finanzierungsmodule reagieren */
.leistung:hover .leistung__nr { color: var(--accent); }
.finanz__modul { position: relative; transition: background-color 260ms; }
.finanz__modul::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform 420ms var(--kurve, ease);
}
.finanz__modul:hover::after { transform: scaleY(1); }