/* ==========================================================================
   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: var(--bg); 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: var(--bg); 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; }

/* Sprachumschalter: zwei Kuerzel in einem Rahmen, die aktive Sprache
   gefuellt. Dieselbe Hoehe wie der Modusschalter daneben. */
.sprachwahl {
  display: inline-flex; align-items: stretch; flex: none;
  border: 1px solid var(--border); font-family: var(--f-mono, monospace);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em;
}
.sprachwahl__aktiv, .sprachwahl__ziel {
  display: inline-flex; align-items: center; padding: 0 9px; min-height: 36px;
  text-decoration: none; transition: color 200ms, background-color 200ms;
}
.sprachwahl__aktiv { background: var(--text); color: var(--bg); }
.sprachwahl__ziel { color: var(--text-2); }
.sprachwahl__ziel:hover { color: var(--text); background: var(--surface); }

/* Im Klappmenue steht er als eigene Zeile unter dem Knopf */
.mobil__sprache {
  display: block; margin-top: 14px; padding: 12px 0 0;
  border-top: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-2); text-decoration: none;
}

/* 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; }
/* Neun Bausteine gehen in zwei Spalten nicht auf — vier Reihen und ein
   einzelnes Feld. Ab sieben Eintraegen steht das Menue deshalb in drei
   Spalten und wird dafuer breiter. Bis zum Klappmenue (1301 Pixel) bleibt
   links genug Luft, gemessen. */
.kopf__panel--breit {
  width: min(940px, calc(100vw - 48px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Drei Eintraege (Unternehmen) stehen nebeneinander statt 2 + 1, ein
   einzelner (Fassungen ohne die Seiten Partner und Jobs) steht allein in
   einem schmalen Feld. */
.kopf__panel--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kopf__panel--eins { width: min(360px, calc(100vw - 48px)); grid-template-columns: minmax(0, 1fr); }

/* Band am Fuss: eine Flaeche ueber die ganze Breite, die auf die Seite
   selbst fuehrt. Es ersetzt den frueheren Eintrag "Uebersicht aller
   Leistungen" im Raster. */
.panel__fuss {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  padding: 14px 16px; margin-top: 7px;
  background: var(--surface-elevated); border: 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;
  transition: background-color 180ms, border-color 180ms, color 180ms;
}
.panel__fusstitel { color: var(--text); font-weight: 500; letter-spacing: 0.07em; }
.panel__fusstext { color: var(--text-2); }
.panel__fuss:hover { border-color: var(--accent); color: var(--accent); }
.panel__fuss:hover .panel__fusstitel { color: var(--accent); }
/* Das Zeichen stand inline und saass damit auf der Grundlinie — also ueber
   dem Wort statt daneben. Beide Haelften sind jetzt eigene Flex-Zeilen, das
   setzt Text und Pfeil auf dieselbe Mitte. */
.panel__fuss > span { display: inline-flex; align-items: center; gap: 8px; }
.panel__fuss .ikon { width: 14px; height: 14px; flex: none; }

/* 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 var(--border); 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%; }

/* 1080 war zu knapp: zwischen 1080 und 1160 lief die Kopfzeile ueber */
@media (max-width: 1160px) {
  :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: 260vh; 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%, var(--bg) 78%),
    linear-gradient(100deg, var(--bg) 6%, var(--bg) 38%, transparent 62%); 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: var(--surface); 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%, var(--bg) 46%, var(--bg) 72%, var(--bg) 100%); 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: 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: var(--text-inverse); 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 var(--text-inverse); 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: var(--text-inverse); 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: var(--text-inverse); 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 var(--text-inverse); 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: var(--text-inverse); 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: var(--text-inverse); 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: var(--text-inverse); 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: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 62%, transparent); }
@media (max-width: 900px) { .uhr { grid-template-columns: 1fr; } }
/* --------------------------------------------------------------------------
   Zaehlwerk · Modellrechnung

   Die Anzeige zeigt einen Betrag, keine Uhrzeit mehr. Die Cent laufen im
   Akzent mit, damit die Bewegung sichtbar ist, ohne dass die Zahl flackert.
   -------------------------------------------------------------------------- */
.uhr__komma, .uhr__einheit { color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 55%, transparent); }
.uhr__cent { color: var(--accent-light); transition: color 420ms; }
.uhr__cent.ist-neu { color: var(--accent-light); transition: none; }
.uhr__einheit { font-size: 0.5em; align-self: center; }
.seite .uhr__rechenweg {
  display: flex; gap: 11px; align-items: flex-start; margin: 18px 0 0;
  font-family: var(--f-mono, monospace); font-size: 11.5px; line-height: 1.55;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 62%, transparent);
}
.uhr__rechenweg .ikon { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--accent-light); }
.seite .uhr__hinweis {
  margin: clamp(26px, 3vw, 44px) 0 0; padding-top: 18px;
  border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 18%, transparent);
  font-size: 13px; line-height: 1.6; max-width: 92ch;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 60%, transparent);
}


/* --------------------------------------------------------------------------
   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: var(--surface); 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(4, minmax(0, 1fr)); gap: 0; row-gap: 34px; 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(3, 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 var(--text-inverse); 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: var(--text-inverse); 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: var(--text-inverse); 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 var(--text-inverse); 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 var(--text-inverse); 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: var(--text-inverse); 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: var(--text-inverse); 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
   -------------------------------------------------------------------------- */
/* Unten mehr Luft, als die Zeile braucht: der schwebende Cookie-Schalter
   steht fest am unteren Fensterrand (40 Pixel hoch, bis zu 32 Pixel
   Abstand) und lag sonst genau auf der Zeile mit dem Jahr. */
.fuss { background: var(--inverse); color: var(--text-inverse); padding: clamp(56px, 6vw, 96px) 0 clamp(72px, 8vw, 88px); }
/* Marke und vier Linkspalten stehen in einer Reihe. Mit dem frueheren
   Vierer-Raster fiel die fuenfte Spalte ("Rechtliches") in eine zweite
   Reihe und liess rechts daneben die halbe Breite leer. Die Luecken sind
   dafuer schmaler und die Marke bekommt nur wenig mehr Platz als eine
   Spalte. */
.fuss__oben { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(0, 0.78fr)); gap: clamp(20px, 2.4vw, 40px); }
.fuss__marke .logo { width: 196px; height: auto; }
.fuss__text { margin: 20px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 70%, transparent); max-width: 30ch; }
/* Kontakt steht als flache Reihe unter den Spalten, nicht als Stapel */
.fuss__kontakt {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--text-inverse); border: 1px solid color-mix(in oklab, var(--text-inverse) 30%, transparent);
  margin-top: clamp(32px, 4vw, 60px);
}
.fuss__kontakt div {
  display: grid; gap: 4px; padding: 13px 16px;
  border-left: 1px solid var(--text-inverse); border-left: 1px solid color-mix(in oklab, var(--text-inverse) 20%, transparent);
}
.fuss__kontakt div:first-child { border-left: 0; }
.fuss__kontakt span { font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 50%, transparent); }
.fuss__kontakt b { font-weight: 400; font-size: 14px; color: var(--text-inverse); 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: var(--text-inverse); 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 var(--text-inverse); 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 var(--text-inverse); 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: var(--text-inverse); 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: var(--text-inverse); 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); }
/* Unter 1200 Pixeln wird die Reihe zu eng fuer fuenf Spalten: die Marke
   legt sich dann ueber die volle Breite, die vier Linkspalten bleiben in
   einer Reihe darunter. */
@media (max-width: 1200px) {
  .fuss__oben { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fuss__marke { grid-column: 1 / -1; }
}
@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
   -------------------------------------------------------------------------- */
.ein [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); }
.ein [data-ein].ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ein [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); }

/* --------------------------------------------------------------------------
   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); }

/* --------------------------------------------------------------------------
   Netzgrund

   Der lebende Hintergrund liegt hinter allem. Damit er sichtbar bleibt,
   traegt nur der Koerper eine Flaeche; der Inhalt ist durchsichtig und
   liegt eine Ebene darueber. Gezeichnet wird in assets/js/seite/grund.js.
   -------------------------------------------------------------------------- */
.grund { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
/* Die Kopfzeile hat ihre eigene Ebene (sticky, z-index 90) und bleibt hier aussen vor */
.seite__inhalt, .fuss { position: relative; z-index: 1; }
.seite__inhalt.gf { background: transparent; }
/* Dunkle Baender lassen den Grund leicht durchscheinen */
.sec--dunkel { background: var(--inverse); background: color-mix(in oklab, var(--inverse) 93%, transparent); }

/* --------------------------------------------------------------------------
   Laufband
   -------------------------------------------------------------------------- */
.laufband {
  position: relative; z-index: 1;
  overflow: hidden; padding: 16px 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface); background: color-mix(in oklab, var(--surface) 55%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband__spur { display: flex; width: max-content; animation: laufband 68s linear infinite; }
.laufband__reihe { display: flex; gap: 0; }
.laufband__reihe li {
  display: flex; align-items: center; gap: 26px; padding-right: 26px;
  font-family: var(--f-mono, monospace); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}
.laufband__reihe li::after { content: ""; width: 5px; height: 5px; background: var(--accent); opacity: 0.55; }
@keyframes laufband { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband__spur { animation: none; } }

/* --------------------------------------------------------------------------
   Positionierung · neue Aufteilung
   -------------------------------------------------------------------------- */
.position { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.4vw, 60px); align-items: start; }
.position__bildseite { position: sticky; top: calc(var(--kopf-h) + 32px); }
.position__bild { position: relative; border: 1px solid var(--border); margin: 0; }
.position__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; display: block; filter: grayscale(1) contrast(1.06) brightness(0.9); }
[data-modus="hell"] .position__bild img { filter: grayscale(1) contrast(1.04); }
.position__bildtext {
  display: flex; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--border); background: var(--surface);
  font-family: var(--f-mono, monospace); font-size: 10.5px; line-height: 1.5; color: var(--text-2);
}
.position__bildtext b { color: var(--text); font-weight: 500; flex: none; }

.perspektiven { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 0; }
.perspektive { position: relative; background: var(--bg); padding: 26px 28px 28px; display: block; }
.perspektive__kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.perspektive__ikon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); flex: none; }
.perspektive__ikon .ikon { width: 22px; height: 22px; }
.perspektive__kopf h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.perspektive__nr { margin-left: auto; font-family: var(--f-mono, monospace); font-size: 11px; color: var(--text-2); position: static; }
.perspektive__text { margin: 0 0 16px; font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 52ch; }
.perspektive__details { display: flex; flex-wrap: wrap; gap: 7px; }
.perspektive__details li {
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.04em;
  padding: 6px 10px; border: 1px solid var(--border); color: var(--text-2);
  transition: border-color 260ms, color 260ms;
}
.perspektive:hover .perspektive__details li { border-color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); color: var(--text); }
@media (max-width: 980px) { .position { grid-template-columns: 1fr; } .position__bildseite { position: static; } .position__bild img { aspect-ratio: 16 / 9; } }

/* --------------------------------------------------------------------------
   Aus der Praxis · vier Faelle
   -------------------------------------------------------------------------- */
.faelle { display: grid; gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fall {
  position: relative; background: var(--bg);
  display: grid; grid-template-columns: minmax(0, 1.05fr) repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 34px); padding: 26px 0;
}
.fall__marke { display: flex; gap: 14px; align-items: baseline; padding-left: 4px; }
.fall__nr { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--accent); flex: none; padding-top: 3px; }
.fall__titel { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.fall__spalte { display: grid; gap: 7px; align-content: start; }
.fall__label { font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
.fall__spalte p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.fall__spalte--antwort { position: relative; padding-left: 18px; }
.fall__spalte--antwort::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--accent); opacity: 0.6; }
.fall__spalte--antwort p { color: var(--text); }
.fall__spalte--antwort .fall__label { color: var(--accent); }
@media (max-width: 1080px) {
  .fall { grid-template-columns: 1fr 1fr; row-gap: 22px; padding: 24px 0 28px; }
  .fall__marke { grid-column: 1 / -1; }
}
@media (max-width: 680px) { .fall { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Merksatz
   -------------------------------------------------------------------------- */
.merksatz {
  position: relative; z-index: 1;
  padding: clamp(64px, 8vw, 120px) 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface); background: color-mix(in oklab, var(--surface) 45%, transparent);
  text-align: center;
}
.merksatz__klein { margin: 0 0 22px; font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.merksatz__satz {
  margin: 0 auto; max-width: 20ch;
  font-family: var(--f-head, sans-serif); font-size: clamp(30px, 4.4vw, 62px); font-weight: 560;
  line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance;
}
.merksatz__quelle { margin: 26px auto 0; max-width: 44ch; font-size: 14.5px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   Systeme · Nummer im Reiter
   -------------------------------------------------------------------------- */
.systeme__nr { font-family: var(--f-mono, monospace); font-size: 10px; color: var(--text-2); }
.systeme__reiter[aria-selected="true"] .systeme__nr { color: var(--accent); }

/* --------------------------------------------------------------------------
   Vorgehen · Ergebnis je Phase
   -------------------------------------------------------------------------- */
.phase__ergebnis {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--text-2); opacity: 0; transform: translateY(4px);
  transition: opacity 600ms var(--kurve, ease) 260ms, transform 600ms var(--kurve, ease) 260ms;
}
.phase__ergebnis .ikon { width: 12px; height: 12px; color: var(--accent); }
.phase.ist-sichtbar .phase__ergebnis { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Bildband
   -------------------------------------------------------------------------- */
.bildband { position: relative; z-index: 1; overflow: hidden; border-bottom: 1px solid var(--border); }
.bildband__bild {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.55);
}
[data-modus="hell"] .bildband__bild { filter: grayscale(1) contrast(1.05) brightness(0.92); }
.bildband__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--inverse) 4%, var(--inverse) 46%, var(--inverse) 100%); background: linear-gradient(90deg, var(--inverse) 4%, color-mix(in oklab, var(--inverse) 72%, transparent) 46%, color-mix(in oklab, var(--inverse) 28%, transparent) 100%);
}
[data-modus="hell"] .bildband__schleier {
  background: linear-gradient(90deg, var(--bg) 4%, var(--bg) 46%, var(--bg) 100%); background: linear-gradient(90deg, var(--bg) 4%, color-mix(in oklab, var(--bg) 80%, transparent) 46%, color-mix(in oklab, var(--bg) 38%, transparent) 100%);
}
.bildband__innen { position: relative; padding-top: clamp(84px, 11vw, 180px); padding-bottom: clamp(84px, 11vw, 180px); }
.bildband__klein { margin: 0 0 18px; font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.bildband__titel { max-width: 18ch; color: var(--text-inverse); }
[data-modus="hell"] .bildband__titel { color: var(--text); }
.bildband__text { max-width: 48ch; margin-top: 22px; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 78%, transparent); }
[data-modus="hell"] .bildband__text { color: var(--text-2); }
.bildband__nachweis {
  position: absolute; right: var(--rand, 32px); bottom: 18px; margin: 0;
  font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.06em;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 45%, transparent);
}
[data-modus="hell"] .bildband__nachweis { color: var(--muted); }
@media (max-width: 760px) { .bildband__nachweis { position: static; margin-top: 26px; } }

/* --------------------------------------------------------------------------
   Haeufige Fragen
   -------------------------------------------------------------------------- */
.sec__kopf--schmal { grid-template-columns: 1fr; }
.fragen { display: grid; gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.frage { background: var(--bg); }
.frage__kopf {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 22px 6px; cursor: pointer; list-style: none;
  transition: background-color 220ms;
}
.frage__kopf::-webkit-details-marker { display: none; }
.frage:hover .frage__kopf { background: var(--surface); background: color-mix(in oklab, var(--surface) 60%, transparent); }
.frage__nr { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--text-2); }
.frage__titel { font-size: clamp(16px, 1.35vw, 19px); font-weight: 600; letter-spacing: -0.012em; }
.frage__zeichen { position: relative; width: 14px; height: 14px; flex: none; }
.frage__zeichen::before, .frage__zeichen::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--text);
  transition: transform 320ms var(--kurve, ease), background-color 220ms;
}
.frage__zeichen::after { transform: rotate(90deg); }
.frage[open] .frage__zeichen::after { transform: rotate(0deg); }
.frage[open] .frage__zeichen::before, .frage[open] .frage__zeichen::after { background: var(--accent); }
.frage[open] .frage__nr { color: var(--accent); }
.frage__inhalt { padding: 0 6px 26px 47px; max-width: 78ch; animation: frage-ein 360ms var(--kurve, ease); }
.frage__inhalt p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-2); }
@keyframes frage-ein { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 680px) { .frage__inhalt { padding-left: 6px; } }

/* --------------------------------------------------------------------------
   Abschluss
   -------------------------------------------------------------------------- */
.sec--abschluss { border-bottom: 0; }
.abschluss__kartenkopf {
  margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.abschluss__mitbringen { display: grid; gap: 13px; margin: 0 0 24px; }
.abschluss__mitbringen li { display: flex; gap: 13px; align-items: center; font-size: 15px; color: var(--text); }
.abschluss__kasten { width: 13px; height: 13px; border: 1px solid var(--border); flex: none; transition: border-color 260ms, background-color 260ms; }
.abschluss__karte:hover .abschluss__kasten { border-color: var(--accent); }
.abschluss__notiz { margin: 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.abschluss__themen { margin-top: 30px; }

/* --------------------------------------------------------------------------
   Abstaende an Absaetzen

   basis.css setzt `.gf p { margin: 0 }` und schlaegt damit jede
   Klassenregel mit nur einem Klassennamen. Die Abstaende dieser Seite
   stehen deshalb hier noch einmal, eine Stufe spezifischer.
   -------------------------------------------------------------------------- */
.seite .merksatz__klein { margin: 0 0 22px; }
.seite .merksatz__satz { margin: 0 auto; }
.seite .merksatz__quelle { margin: 26px auto 0; }

.seite .bildband__klein { margin: 0 0 18px; }
.seite .bildband__text { margin: 24px 0 0; }
.seite .bildband__nachweis { margin: 0; }

.seite .perspektive__text { margin: 0 0 16px; }
.seite .position__bildtext { margin: 0; }

.seite .blatt__legende { margin: 0; }
.seite .blatt__hinweis { margin: 6px 0 0; }

.seite .uhr__zeile { margin: 16px 0 0; }
.seite .uhr__offen { margin: 22px 0 0; }

.seite .systeme__text { margin: 22px 0 0; }
.seite .systeme__notiz { margin: 26px 0 0; }

.seite .phase__text { margin: 0; }
.seite .vorgehen__fuss p { margin: 0; }

.seite .fall__spalte p { margin: 0; }

.seite .finanz__hinweis { margin: 24px 0 0; }
.seite .finanz__modul p { margin: 0; }
.seite .finanz__modul h3 { margin: 0 0 5px; }

.seite .kennzahlen__hinweis { margin: 26px 0 0; }
.seite .schnitt__legende { margin: 12px 0 0; }

.seite .frage__inhalt p { margin: 0; }
.seite .abschluss__kartenkopf { margin: 0 0 20px; }
.seite .abschluss__notiz { margin: 0; }
.seite .platz__titel { margin: 0 0 20px; }
.seite .platz__text { margin: 0 0 30px; }
.seite .hero__legende, .seite .hero__scroll { margin: 0; }

/* Zwischenraum zwischen Ueberschrift und Folgeabsatz im Bildband */
.seite .bildband__titel { margin: 0; }
.seite .abschluss__liste { margin: 26px 0 0; }
.seite .abschluss__themen { margin: 30px 0 0; }


/* ==========================================================================
   Unterseiten

   Gleiche Sprache wie die Startseite: Haarlinien, Registermarken,
   Monospace-Beschriftungen, je Abschnitt ein eigenes 3D-Bild.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Seitenkopf
   -------------------------------------------------------------------------- */
.seitenkopf { position: relative; padding: calc(var(--kopf-h) + clamp(44px, 5vw, 86px)) 0 0; }
.brotkrumen {
  display: flex; gap: 10px; align-items: center; margin-bottom: clamp(30px, 4vw, 56px);
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
}
.brotkrumen a { color: var(--text-2); text-decoration: none; transition: color 200ms; }
.brotkrumen a:hover { color: var(--accent); }
.brotkrumen [aria-current] { color: var(--text); }
.seitenkopf__text { max-width: 1000px; }
.seitenkopf__titel { max-width: 15ch; }
.seitenkopf__titel { margin: 18px 0 0; }
.seitenkopf__lead { max-width: 54ch; margin-top: 26px; }
.seitenkopf__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.seitenkopf__meta li {
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.05em;
  padding: 7px 11px; border: 1px solid var(--border); color: var(--text-2);
}
.seitenkopf__band {
  position: relative; margin-top: clamp(40px, 5vw, 76px);
  height: clamp(200px, 22vw, 300px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.seitenkopf__band--hoch { height: clamp(320px, 38vw, 540px); }
.seitenkopf__band .fx { position: absolute; inset: 0; }
.seitenkopf__legende {
  position: absolute; left: var(--rand, 32px); bottom: 14px; margin: 0;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
}
.seite .seitenkopf__titel { margin: 18px 0 0; }
.seite .seitenkopf__lead { margin: 26px 0 0; }
.seite .seitenkopf__legende { margin: 0; }
@media (max-width: 900px) { .seitenkopf__text, .seitenkopf__titel { max-width: none; } }

/* --------------------------------------------------------------------------
   Dreier: drei gleichwertige Felder
   -------------------------------------------------------------------------- */
.dreier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.dreier__feld { background: var(--bg); padding: 26px 26px 28px; }
.dreier__nr { display: block; margin-bottom: 14px; font-family: var(--f-mono, monospace); font-size: 11px; color: var(--accent); }
.dreier__feld h3 { margin: 0 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.seite .dreier__feld p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 860px) { .dreier { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Stufen: die Phasen im Detail
   -------------------------------------------------------------------------- */
.stufen {
  --luft: clamp(16px, 1.7vw, 30px);
  display: grid; gap: 1px; background: var(--border);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-inline: calc(-1 * var(--luft));
}
.stufe {
  position: relative; background: var(--bg);
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(20px, 3vw, 48px); padding: 32px var(--luft);
}
.stufe__kopf { display: flex; gap: 14px; align-items: baseline; align-content: flex-start; }
.stufe__nr { font-family: var(--f-mono, monospace); font-size: 12px; color: var(--accent); flex: none; }
.stufe__titel { margin: 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; letter-spacing: -0.018em; }
.seite .stufe__text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 60ch; }
.stufe__listen { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stufe__label { display: block; margin-bottom: 10px; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
.stufe__liste { display: grid; gap: 9px; }
.stufe__liste li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.5; color: var(--text); }
.stufe__liste .ikon { width: 13px; height: 13px; color: var(--accent); flex: none; }
.stufe__liste--offen li { color: var(--text-2); }
.stufe__kasten { width: 11px; height: 11px; border: 1px solid var(--border); flex: none; }
.seite .stufe__hinweis { margin: 22px 0 0; padding-left: 16px; border-left: 1px solid var(--accent); font-size: 13.5px; line-height: 1.6; color: var(--text-2); max-width: 62ch; }
.stufe__buehne { position: relative; border: 1px solid var(--border); background: var(--surface); background: color-mix(in oklab, var(--surface) 60%, transparent); aspect-ratio: 4 / 3; overflow: hidden; }
.stufe__buehne .fx { position: absolute; inset: 0; }
.stufe__buehne--leer { display: grid; place-items: center; }
.stufe__marke {
  font-family: var(--f-mono, monospace); font-size: clamp(40px, 5vw, 72px);
  color: var(--text); color: color-mix(in oklab, var(--text) 8%, transparent); letter-spacing: -0.04em;
}
@media (max-width: 1180px) {
  .stufe { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .stufe__buehne { grid-column: 2; aspect-ratio: 16 / 7; }
}
@media (max-width: 820px) {
  .stufen { --luft: 14px; }
  .stufe { grid-template-columns: 1fr; gap: 18px; }
  .stufe__buehne { grid-column: 1; }
  .stufe__listen { grid-template-columns: 1fr; gap: 18px; }
}

/* --------------------------------------------------------------------------
   Bausteine: Text und Bild im Wechsel
   -------------------------------------------------------------------------- */
.baustein { border-bottom: 1px solid var(--border); }
.baustein__gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 72px); align-items: center; }
.baustein--gedreht .baustein__text { order: 2; }
.baustein__marke { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.baustein__nr { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--accent); }
.baustein__ikon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); }
.baustein__ikon .ikon { width: 22px; height: 22px; }
.baustein__label { font-family: var(--f-mono, monospace); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.baustein__punkte { display: grid; gap: 1px; margin-top: 30px; background: var(--border); border: 1px solid var(--border); }
.baustein__punkte li { background: var(--bg); padding: 16px 18px; }
.baustein__punkte h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.seite .baustein__punkte p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.baustein__seite { display: grid; gap: 14px; }
.baustein__buehne { position: relative; border: 1px solid var(--border); background: var(--surface); background: color-mix(in oklab, var(--surface) 60%, transparent); aspect-ratio: 4 / 3; overflow: hidden; }
.baustein__buehne .fx { position: absolute; inset: 0; }
.seite .baustein__legende { display: flex; gap: 10px; margin: 0; font-family: var(--f-mono, monospace); font-size: 10.5px; line-height: 1.5; color: var(--text-2); }
.baustein__legende b { color: var(--text); font-weight: 500; flex: none; }
@media (max-width: 960px) {
  .baustein__gitter { grid-template-columns: 1fr; }
  .baustein--gedreht .baustein__text { order: 0; }
}

/* --------------------------------------------------------------------------
   Modelle der Finanzierung
   -------------------------------------------------------------------------- */
.modelle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.modell { background: var(--bg); padding: 26px 26px 28px; display: flex; flex-direction: column; }
.modell__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.modell__ikon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); transition: color 260ms, border-color 260ms; }
.modell:hover .modell__ikon { color: var(--accent); border-color: var(--accent); }
.modell__ikon .ikon { width: 21px; height: 21px; }
.modell__nr { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--text-2); }
.modell:hover .modell__nr { color: var(--accent); }
.modell__titel { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.seite .modell__text { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.modell__zeilen { margin: auto 0 0; display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.modell__zeilen div { display: grid; gap: 4px; }
.modell__zeilen dt { font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.modell__zeilen dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.modell--hinweis { background: var(--surface); background: color-mix(in oklab, var(--surface) 70%, transparent); }
.modell--hinweis .modell__zeilen { border-top: 0; padding-top: 6px; }
@media (max-width: 1080px) { .modelle { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .modelle { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   Vorqualifizierung (Vorgehen) und Projekte/Kapital (Über GridFlex)
   -------------------------------------------------------------------------- */
.vorab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(26px, 4vw, 72px); align-items: start; }
.seite .vorab__marke {
  margin: 0 0 18px; 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-light);
  border: 1px solid var(--accent-light); border: 1px solid color-mix(in oklab, var(--accent-light) 50%, transparent); padding: 7px 12px;
}
.seite .vorab__hinweis {
  margin: 24px 0 0; padding-left: 16px;
  border-left: 1px solid var(--text-inverse); border-left: 1px solid color-mix(in oklab, var(--text-inverse) 35%, transparent);
  font-size: 13.5px; line-height: 1.6;
  color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 62%, transparent);
  max-width: 60ch;
}
.vorab__punkte { display: grid; gap: 1px; background: var(--text-inverse); background: color-mix(in oklab, var(--text-inverse) 16%, transparent); border: 1px solid color-mix(in oklab, var(--text-inverse) 16%, transparent); }
.vorab__punkte li { background: var(--inverse); padding: 20px 22px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.vorab__nr { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--accent-light); padding-top: 3px; }
.vorab__punkte h3 { margin: 0 0 5px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.012em; color: var(--text-inverse); }
.seite .vorab__punkte p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 70%, transparent); }
@media (max-width: 900px) { .vorab { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Zwei Säulen mit Pluszeichen dazwischen
   -------------------------------------------------------------------------- */
.saeulen { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; align-items: stretch; }
.saeule { border: 1px solid var(--border); padding: 28px 28px 30px; display: flex; flex-direction: column; }
.saeule__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.saeule__ikon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); transition: color 260ms, border-color 260ms; }
.saeule:hover .saeule__ikon { color: var(--accent); border-color: var(--accent); }
.saeule__ikon .ikon { width: 24px; height: 24px; }
.saeule__nr { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--text-2); }
.saeule__titel { margin: 0 0 12px; font-size: clamp(21px, 2vw, 27px); font-weight: 600; letter-spacing: -0.02em; }
.seite .saeule__text { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.saeule__punkte { display: grid; gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border); }
.saeule__punkte li { font-family: var(--f-mono, monospace); font-size: 11.5px; letter-spacing: 0.03em; color: var(--text-2); display: flex; gap: 10px; align-items: baseline; }
.saeule__punkte li::before { content: ""; width: 5px; height: 5px; background: var(--accent); flex: none; }
.saeule--mitte { border-left: 0; border-right: 0; width: clamp(60px, 8vw, 110px); display: grid; place-items: center; text-align: center; padding: 18px 10px; }
.saeule__plus { font-family: var(--f-mono, monospace); font-size: 30px; color: var(--accent); line-height: 1; }
.seite .saeule--mitte p { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 900px) {
  .saeulen { grid-template-columns: 1fr; }
  .saeule--mitte { width: auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-top: 0; border-bottom: 0; padding: 22px; }
}
/* Drei Saeulen (Technik, Finanzierung, Vertrieb): zwei Verbinder, etwas
   schmaler; unter 1100 px gestapelt wie auf dem Handy */
.saeulen--drei { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); }
.saeulen--drei .saeule { padding: 26px 24px 28px; }
/* Listen unten buendig, auch wenn die Texte verschieden lang sind (eine
   allgemeinere Regel setzte den Abstand sonst auf 0) */
.seite .saeule__punkte { margin-top: auto; }
.saeulen--drei .saeule--mitte { width: clamp(56px, 6.4vw, 96px); padding: 18px 8px; }
@media (max-width: 1100px) {
  .saeulen--drei { grid-template-columns: 1fr; }
  .saeulen--drei .saeule--mitte { width: auto; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-top: 0; border-bottom: 0; padding: 22px; }
}

/* --------------------------------------------------------------------------
   Gegenüberstellung: was wir sind, was nicht
   -------------------------------------------------------------------------- */
.gegen { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.gegen__seite { background: var(--bg); padding: 28px 28px 30px; }
.gegen__seite--nicht { background: var(--surface); background: color-mix(in oklab, var(--surface) 55%, transparent); }
.seite .gegen__titel {
  margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.gegen__seite--nicht .gegen__titel { color: var(--text-2); }
.gegen__liste { display: grid; gap: 14px; }
.gegen__liste li { display: flex; gap: 13px; align-items: baseline; font-size: 15px; line-height: 1.55; color: var(--text); }
.gegen__liste .ikon { width: 14px; height: 14px; color: var(--primary); flex: none; }
.gegen__liste--nicht li { color: var(--text-2); }
.gegen__liste--nicht .ikon { color: var(--muted); }
@media (max-width: 820px) { .gegen { grid-template-columns: 1fr; } }

/* Grundsätze nutzen die Leistungskacheln, aber ohne Link-Verhalten */
.leistung--statisch { cursor: default; }
.leistung--statisch .leistung__kopf { justify-content: flex-start; }


/* --------------------------------------------------------------------------
   Zurueck nach oben

   Quadratisch wie alles hier, mit einem feinen Ring, der den Lesefortschritt
   zeigt. Erscheint erst nach einer Bildschirmhoehe.
   -------------------------------------------------------------------------- */
.nachoben {
  position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px);
  z-index: 80;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--bg); background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 320ms, transform 420ms var(--kurve, ease), visibility 320ms, border-color 220ms, background-color 220ms;
}
.nachoben.ist-da { opacity: 1; visibility: visible; transform: none; }
.nachoben:hover { border-color: var(--accent); background: var(--surface); }

.nachoben__ring { position: absolute; inset: 5px; width: auto; height: auto; transform: rotate(-90deg); overflow: visible; }
.nachoben__ring circle { fill: none; stroke-width: 1.5; }
.nachoben__bahn { stroke: var(--text); stroke: color-mix(in oklab, var(--text) 14%, transparent); }
.nachoben__fortschritt { stroke: var(--accent); stroke-linecap: butt; transition: stroke-dashoffset 120ms linear; }

.nachoben__pfeil { display: grid; place-items: center; transform: rotate(180deg); transition: transform 320ms var(--kurve, ease); }
.nachoben__pfeil .ikon { width: 16px; height: 16px; }
.nachoben:hover .nachoben__pfeil { transform: rotate(180deg) translateY(3px); }

.nachoben__zahl {
  position: absolute; bottom: -2px; left: 50%; transform: translate(-50%, 100%);
  font-family: var(--f-mono, monospace); font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--text-2); opacity: 0; transition: opacity 220ms;
}
.nachoben__zahl::after { content: " %"; }
.nachoben:hover .nachoben__zahl { opacity: 1; }

@media (max-width: 700px) {
  .nachoben { width: 46px; height: 46px; }
  .nachoben__zahl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nachoben { transition: opacity 200ms, visibility 200ms; transform: none; }
  .nachoben.ist-da { transform: none; }
}


/* Die Phase vor dem ersten Kontakt wird markiert */
.stufe--vorab { background: var(--surface); background: color-mix(in oklab, var(--surface) 55%, transparent); }
.stufe--vorab .stufe__nr { color: var(--accent); }
.stufe--vorab .stufe__kopf::after {
  content: "vor dem Kontakt"; display: block; margin-top: 8px;
  font-family: var(--f-mono, monospace); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); padding: 4px 8px;
}
.stufe--vorab .stufe__kopf { flex-wrap: wrap; align-content: flex-start; row-gap: 12px; }


/* ==========================================================================
   Leistungsseite
   ========================================================================== */

/* Sprungziele nicht unter der Kopfzeile verstecken */
[id] { scroll-margin-top: calc(var(--kopf-h) + 24px); }

/* --------------------------------------------------------------------------
   Übersicht mit Sprungmarken
   -------------------------------------------------------------------------- */
.sprungmarken { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.sprungmarke {
  background: var(--bg); padding: 18px 18px 20px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  text-decoration: none; color: inherit;
  transition: background-color 220ms;
}
.sprungmarke:hover { background: var(--surface-elevated); }
.sprungmarke__ikon { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); transition: color 240ms, border-color 240ms; }
.sprungmarke:hover .sprungmarke__ikon { color: var(--accent); border-color: var(--accent); }
.sprungmarke__ikon .ikon { width: 19px; height: 19px; }
.sprungmarke__nr { display: block; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.08em; color: var(--text-2); }
.sprungmarke__titel { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; margin-top: 3px; }
.sprungmarke > .ikon { width: 14px; height: 14px; color: var(--text-2); transition: transform 260ms, color 240ms; }
.sprungmarke:hover > .ikon { transform: translateY(3px); color: var(--accent); }
@media (max-width: 1180px) { .sprungmarken { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .sprungmarken { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Ein Leistungsblock
   -------------------------------------------------------------------------- */
.leistung-block { border-bottom: 1px solid var(--border); }
.lb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(26px, 4vw, 68px); align-items: start; }
.leistung-block--gedreht .lb__text { order: 2; }
.lb__marke { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.lb__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.lb__ikon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); }
.lb__ikon .ikon { width: 22px; height: 22px; }
.seite .lb__titel { margin: 0; }
.seite .lb__lead { margin: 18px 0 0; max-width: 58ch; }

.lb__spalten { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(20px, 2.6vw, 44px); margin-top: 30px; }
.lb__label { display: block; margin-bottom: 12px; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
.lb__liste { display: grid; gap: 11px; }
.lb__liste li { display: flex; gap: 11px; align-items: baseline; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.lb__liste .ikon { width: 13px; height: 13px; color: var(--accent); flex: none; }
.lb__liste--ergebnis li { color: var(--text-2); }
/* Lange Komposita ("Wirtschaftlichkeitsbetrachtung") sprengten unter 1280 px
   die schmale rechte Spalte: Ein Flex-Kind traegt min-width:auto und kann
   nicht unter sein laengstes Wort schrumpfen. min-width:0 erlaubt es, die
   Trennung uebernimmt hyphens (das Dokument traegt lang="de"), und
   overflow-wrap faengt Browser ohne deutsche Trennmuster ab. */
.lb__liste li > span, .lb__wann li {
  /* anywhere statt break-word: nur anywhere verkleinert die Mindestbreite.
     Wo die deutschen Trennmuster fehlen (Safari ohne Woerterbuch), schob
     "Wirtschaftlichkeitsbetrachtung" die Seite sonst seitwaerts. */
  min-width: 0; overflow-wrap: anywhere;
  -webkit-hyphens: auto; hyphens: auto;
}
.lb__kasten { width: 11px; height: 11px; border: 1px solid var(--accent); flex: none; }
.lb__seitenspalte { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--border); }
.lb__wann { display: grid; gap: 8px; }
.lb__wann li { font-family: var(--f-mono, monospace); font-size: 11.5px; line-height: 1.45; color: var(--text-2); display: flex; gap: 9px; align-items: baseline; }
.lb__wann li::before { content: ""; width: 5px; height: 5px; background: var(--accent); flex: none; }
.seite .lb__hinweis { margin: 28px 0 0; padding-left: 16px; border-left: 1px solid var(--accent); font-size: 13.5px; line-height: 1.6; color: var(--text-2); max-width: 66ch; }

/* --------------------------------------------------------------------------
   Kennzahlen eines Projekts

   Drei gerechnete Werte in einer Reihe, darunter die Rechengrundlage. Die
   Grundlage ist bewusst klein, aber nicht gedaempft bis zur Unlesbarkeit:
   Sie gehoert zur Aussage, nicht zum Kleingedruckten.
   -------------------------------------------------------------------------- */
.lb__zahlen { margin-top: clamp(26px, 3vw, 40px); }
/* auto-fit statt fester Dreiteilung: In der gedrehten Spalte sind die
   Zahlen laenger (52.500 MWh, 3.675.000 €) und brachen sonst um. So
   stellt sich die Reihe selbst auf zwei oder eine Spalte um. */
.lb__zahlenreihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  list-style: none; margin: 0; padding: 0;
}
.lb__zahlenreihe li { background: var(--bg); padding: 14px 16px 15px; display: grid; gap: 5px; }
.lb__zahlenreihe b {
  font-family: var(--f-head, inherit); font-size: clamp(18px, 1.8cqi, 26px); font-weight: 560;
  line-height: 1.05; letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lb__zahlenreihe span {
  font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
}
.seite .lb__grundlage {
  margin: 12px 0 0; padding-left: 14px; border-left: 1px solid var(--accent);
  font-size: 12.5px; line-height: 1.55; color: var(--text-2); max-width: 74ch;
}


.lb__seite { display: grid; gap: 14px; position: sticky; top: calc(var(--kopf-h) + 28px); }
.lb__buehne { position: relative; border: 1px solid var(--border); background: var(--surface); background: color-mix(in oklab, var(--surface) 60%, transparent); aspect-ratio: 4 / 3; overflow: hidden; }
.lb__buehne .fx { position: absolute; inset: 0; }
/* Projekte: gekauftes Bild statt Zeichnung */
.lb__buehne--foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.seite .lb__legende { display: flex; gap: 10px; margin: 0; font-family: var(--f-mono, monospace); font-size: 10.5px; line-height: 1.5; color: var(--text-2); }
.lb__legende b { color: var(--text); font-weight: 500; flex: none; }
.lb__kontakt {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent);
  padding-bottom: 6px; align-self: start;
  transition: gap 220ms, color 220ms;
}
.lb__kontakt:hover { gap: 15px; color: var(--accent); }
.lb__kontakt .ikon { width: 14px; height: 14px; }

@media (max-width: 1080px) {
  .lb { grid-template-columns: 1fr; }
  .leistung-block--gedreht .lb__text { order: 0; }
  .lb__seite { position: static; }
  .lb__buehne { aspect-ratio: 16 / 8; }
}
@media (max-width: 720px) {
  .lb__spalten { grid-template-columns: 1fr; }
  .lb__seitenspalte { padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--border); }
}


/* ==========================================================================
   Einwilligung, Kontakt und Rechtstexte
   ========================================================================== */

/* --------------------------------------------------------------------------
   Einwilligungsdialog
   -------------------------------------------------------------------------- */
.cookie { position: fixed; inset: 0; z-index: 120; display: grid; align-items: end; justify-items: center; padding: clamp(12px, 2vw, 28px); pointer-events: none; }
/* Nur die Tafel selbst nimmt Klicks an. Der Rahmen liegt zwar ueber der
   ganzen Seite, darf sie aber nicht lahmlegen. */
.cookie__panel { pointer-events: auto; }
.cookie[hidden] { display: none; }
.cookie__grund { pointer-events: none; position: absolute; inset: 0; background: var(--inverse); background: color-mix(in oklab, var(--inverse) 62%, transparent); opacity: 0; transition: opacity 320ms; }
.cookie.ist-offen .cookie__grund { opacity: 1; }
.cookie__panel {
  position: relative; width: min(760px, 100%);
  background: var(--bg); border: 1px solid var(--border);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(20px);
  transition: opacity 320ms, transform 420ms var(--kurve, ease);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.cookie.ist-offen .cookie__panel { opacity: 1; transform: none; }
.cookie__panel::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  --m: var(--accent); --l: 10px;
  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;
  opacity: 0.7;
}
.cookie__kopf { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.cookie__marke { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); }
.cookie__marke .ikon { width: 24px; height: 24px; color: var(--accent); }
.seite .cookie__titel { margin: 0 0 8px; font-family: var(--f-head, sans-serif); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.018em; }
.seite .cookie__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); max-width: 62ch; }

.cookie__optionen { display: grid; gap: 1px; margin-top: 22px; background: var(--border); border: 1px solid var(--border); }
.cookie__optionen[hidden] { display: none; }
.cookie__option { background: var(--bg); padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; cursor: pointer; }
.cookie__option input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie__kasten { width: 18px; height: 18px; border: 1px solid var(--border); display: grid; place-items: center; margin-top: 2px; transition: background-color 200ms, border-color 200ms; }
.cookie__kasten .ikon { width: 12px; height: 12px; color: var(--inverse); opacity: 0; transition: opacity 160ms; }
.cookie__option input:checked + .cookie__kasten { background: var(--primary); border-color: var(--primary); }
.cookie__option input:checked + .cookie__kasten .ikon { opacity: 1; }
.cookie__kasten--fest { background: var(--primary); background: color-mix(in oklab, var(--primary) 45%, transparent); border-color: color-mix(in oklab, var(--primary) 55%, transparent); }
.cookie__kasten--fest .ikon { opacity: 1; color: var(--text); }
.cookie__option input:focus-visible + .cookie__kasten { outline: 2px solid var(--accent); outline-offset: 2px; }
.cookie__optiontext b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.cookie__optiontext b i { font-style: normal; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); margin-left: 6px; }
.cookie__optiontext > span { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

.cookie__aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }
.cookie__btn { --btn-h: 46px; flex: 1 1 200px; }
/* .gf-btn setzt display:inline-flex und wuerde [hidden] sonst schlagen */
.cookie__btn[hidden], .gf-btn[hidden] { display: none; }
.cookie__mehr {
  background: none; border: 0; cursor: pointer; margin-left: auto; padding: 8px 2px;
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); border-bottom: 1px solid var(--border); transition: color 200ms, border-color 200ms;
}
.cookie__mehr:hover { color: var(--accent); border-color: var(--accent); }
.seite .cookie__fuss {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.04em; color: var(--text-2);
}
.cookie__fuss a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.cookie__fuss a:hover { color: var(--accent); }
/* Fruher stand hier `overflow: hidden`, solange der Dialog offen war. Das
   ist bei einem modalen Dialog ueblich — aber wenn ihn irgendetwas
   ausblendet (ein Banner-Blocker, eine Erweiterung, eine Filterliste),
   kann niemand mehr antworten, und die Seite steht fuer immer still. Die
   Einwilligung ist jetzt ein Banner, kein Riegel: Diese Seite laedt ohnehin
   nichts, was einer Zustimmung beduerfte. Die Klasse bleibt als Merker.
   Siehe seite/cookies.js, Abschnitt "sichtbar?". */
.hat-cookie { /* keine Sperre mehr — siehe oben */ }
@media (max-width: 640px) {
  .cookie__aktionen { flex-direction: column; align-items: stretch; }
  .cookie__btn { flex: 0 0 auto; width: 100%; }
  .cookie__panel { max-height: calc(100dvh - 24px); }
  .cookie__mehr { margin-left: 0; }
}

/* Griff unten links */
.cookie-griff {
  position: fixed; left: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px 0 11px;
  background: var(--bg); background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border); color: var(--text-2);
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; transition: color 220ms, border-color 220ms, background-color 220ms;
}
.cookie-griff[hidden] { display: none; }
.cookie-griff svg { width: 17px; height: 17px; flex: none; }
.cookie-griff:hover { color: var(--text); border-color: var(--accent); background: var(--surface); }
@media (max-width: 700px) { .cookie-griff span { display: none; } .cookie-griff { padding: 0 11px; } }

/* --------------------------------------------------------------------------
   Kontaktseite
   -------------------------------------------------------------------------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(26px, 3.4vw, 60px); align-items: start; }
.kontakt__wege { position: sticky; top: calc(var(--kopf-h) + 28px); display: grid; gap: 26px; }
.wege { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.weg { background: var(--bg); padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.weg__ikon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border); color: var(--primary); }
.weg__ikon .ikon { width: 20px; height: 20px; }
.weg__label { display: block; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
.weg__wert { display: block; font-size: 17px; font-weight: 600; margin: 3px 0 2px; letter-spacing: -0.01em; }
.weg__zusatz { display: block; font-size: 12.5px; color: var(--text-2); }
.kontakt__karte { border: 1px solid var(--border); padding: 24px; background: var(--surface); background: color-mix(in oklab, var(--surface) 55%, transparent); }
.seite .kontakt__kartenkopf { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }

.kontakt__formular { border: 1px solid var(--text); padding: clamp(22px, 2.6vw, 36px); background: var(--surface); background: color-mix(in oklab, var(--surface) 40%, transparent); position: relative; }
.formular__kopf { margin-bottom: 28px; }
.seite .formular__entwurf {
  display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; padding: 12px 14px;
  border: 1px solid var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  font-size: 13px; line-height: 1.55; color: var(--text-2);
}
.formular__entwurf .ikon { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 2px; }

.formular__gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feld { display: grid; gap: 8px; }
.feld--halb { grid-column: span 1; }
.feld__label { font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.feld__label i { font-style: normal; color: var(--accent); }
.feld__eingabe {
  width: 100%; font: inherit; font-size: 15px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  transition: border-color 200ms, background-color 200ms;
}
.feld__eingabe::placeholder { color: var(--muted); }
.feld__eingabe:hover { border-color: var(--text); border-color: color-mix(in oklab, var(--text) 30%, transparent); }
.feld__eingabe:focus { outline: none; border-color: var(--accent); background: var(--surface-elevated); }
.feld__eingabe--lang { resize: vertical; min-height: 120px; }
.feld.ist-fehlerhaft .feld__eingabe { border-color: #C9554A; }
.feld__fehler { display: none; font-family: var(--f-mono, monospace); font-size: 10.5px; color: #C9554A; }
.feld.ist-fehlerhaft .feld__fehler { display: block; }

.formular__gruppe { border: 0; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.marken { display: flex; flex-wrap: wrap; gap: 8px; }
.marke { position: relative; cursor: pointer; }
.marke input { position: absolute; opacity: 0; width: 0; height: 0; }
.marke span {
  display: inline-block; padding: 9px 13px; border: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 11.5px; color: var(--text-2);
  transition: border-color 200ms, color 200ms, background-color 200ms;
}
.marke:hover span { border-color: var(--text); border-color: color-mix(in oklab, var(--text) 35%, transparent); color: var(--text); }
.marke input:checked + span { border-color: var(--accent); color: var(--text); background: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.marke input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.einwilligung { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: 26px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); cursor: pointer; }
.einwilligung input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--primary); }
.einwilligung a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.einwilligung .feld__fehler { grid-column: 2; }
.einwilligung.ist-fehlerhaft .feld__fehler { display: block; }
.formular__fuss { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.seite .formular__pflicht { margin: 0; font-family: var(--f-mono, monospace); font-size: 10.5px; color: var(--text-2); }
.formular__pflicht i { font-style: normal; color: var(--accent); }

.formular__dank { display: grid; gap: 16px; justify-items: start; padding: 8px 0; }
.formular__dank[hidden] { display: none; }
.formular__haken { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); }
.formular__haken .ikon { width: 26px; height: 26px; }
.formular__dank h3 { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.seite .formular__dank p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 54ch; }

@media (max-width: 1000px) {
  .kontakt { grid-template-columns: 1fr; }
  .kontakt__wege { position: static; }
}
@media (max-width: 640px) { .formular__gitter { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Rechtstexte
   -------------------------------------------------------------------------- */
.seite .recht__hinweis {
  display: flex; gap: 14px; align-items: flex-start; margin: 0 0 clamp(30px, 4vw, 52px);
  padding: 16px 18px; border: 1px solid var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  font-size: 13.5px; line-height: 1.6; color: var(--text-2); max-width: 90ch;
}
.recht__hinweis .ikon { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; }

.recht { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: clamp(26px, 4vw, 68px); align-items: start; }
.recht__inhalt { display: grid; gap: clamp(30px, 3.4vw, 52px); }
.recht__bloecke { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.recht__block { background: var(--bg); padding: 22px 24px 24px; }
.recht__blocktitel { margin: 0 0 16px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.recht__liste { display: grid; gap: 10px; margin: 0; }
/* Mehrzeilige Werte im Impressum: jeder Eintrag einer Liste steht in
   seiner eigenen Zeile, ohne Trennzeichen davor. */
.recht__zeile { display: block; }
.recht__liste div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 14px; align-items: baseline; }
.recht__liste dt { font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.05em; color: var(--text-2); }
.recht__liste dd { margin: 0; font-size: 14.5px; color: var(--text); }
.recht__liste dd.ist-offen, .gf-tabelle td.ist-offen {
  font-family: var(--f-mono, monospace); font-size: 12.5px; color: var(--accent);
  border: 1px dashed var(--accent); border: 1px dashed color-mix(in oklab, var(--accent) 50%, transparent); padding: 2px 8px; display: inline-block;
}
.recht__text h2, .recht__abschnitt h2 { margin: 0 0 14px; font-family: var(--f-head, sans-serif); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; letter-spacing: -0.02em; }
.seite .recht__text p, .seite .recht__abschnitt p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--text-2); max-width: 78ch; }
.recht__abschnitt { scroll-margin-top: calc(var(--kopf-h) + 28px); padding-top: 26px; border-top: 1px solid var(--border); }
.recht__nr { display: flex; gap: 16px; align-items: baseline; }
.recht__nr span { font-family: var(--f-mono, monospace); font-size: 12px; color: var(--accent); }
.recht__blatt { margin: 22px 0; }
.recht__punkte { display: grid; gap: 10px; margin: 18px 0; }
.recht__punkte li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.recht__punkte .ikon { width: 13px; height: 13px; color: var(--accent); flex: none; }
.seite .recht__nachsatz { margin: 18px 0 0; padding-left: 16px; border-left: 1px solid var(--accent); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

.recht__seite { position: sticky; top: calc(var(--kopf-h) + 28px); }
.recht__nav { border: 1px solid var(--border); padding: 20px 22px 22px; background: var(--surface); background: color-mix(in oklab, var(--surface) 50%, transparent); }
.seite .recht__navtitel { margin: 0 0 14px; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
.recht__nav ol { display: grid; gap: 9px; }
.recht__nav a { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); text-decoration: none; transition: color 200ms; }
.recht__nav a span { font-family: var(--f-mono, monospace); font-size: 10.5px; color: var(--accent); flex: none; }
.recht__nav a:hover { color: var(--text); }
.recht__navfuss { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.recht__navfuss a, .recht__einstellungen {
  display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text); text-decoration: none; transition: color 200ms;
}
.recht__navfuss a:hover, .recht__einstellungen:hover { color: var(--accent); }
.recht__navfuss .ikon, .recht__einstellungen .ikon { width: 13px; height: 13px; }

.kurzfassung { max-width: 74ch; }
.kurzfassung__liste { display: grid; gap: 13px; margin-top: 24px; }
.kurzfassung__liste li { display: flex; gap: 14px; align-items: baseline; font-size: 15.5px; line-height: 1.55; }
.kurzfassung__liste .ikon { width: 14px; height: 14px; color: var(--accent); flex: none; }

@media (max-width: 1000px) {
  .recht { grid-template-columns: 1fr; }
  .recht__seite { position: static; order: -1; }
  .recht__bloecke { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Fehlerseite
   -------------------------------------------------------------------------- */
.fehler { min-height: 70vh; display: grid; align-items: center; padding: clamp(60px, 9vw, 140px) 0; }
.fehler__code { font-family: var(--f-mono, monospace); font-size: clamp(64px, 12vw, 160px); line-height: 1; letter-spacing: -0.04em; color: var(--accent); }
.seite .fehler__text { margin: 26px 0 0; max-width: 52ch; }
.fehler__wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

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

   Steht bewusst ganz am Ende und eine Stufe spezifischer: viele Bausteine
   setzen spaeter ein eigenes `background`, und die Kurzschreibweise loescht
   sonst den Schein wieder. Zurueckhaltend gehalten — er soll die Flaeche
   waermen, nicht leuchten.
   -------------------------------------------------------------------------- */
.seite [data-licht] {
  background-image: radial-gradient(
    300px circle at var(--mx, -400px) var(--my, -400px),
    var(--accent) 0%,
    var(--accent) 40%,
    transparent 74%
  ); background-image: radial-gradient(
    300px circle at var(--mx, -400px) var(--my, -400px),
    color-mix(in oklab, var(--accent) 9%, transparent) 0%,
    color-mix(in oklab, var(--accent) 4%, transparent) 40%,
    transparent 74%
  );
  background-repeat: no-repeat;
}
[data-modus="hell"] .seite [data-licht] {
  background-image: radial-gradient(
    300px circle at var(--mx, -400px) var(--my, -400px),
    var(--accent) 0%,
    var(--accent) 40%,
    transparent 74%
  ); background-image: radial-gradient(
    300px circle at var(--mx, -400px) var(--my, -400px),
    color-mix(in oklab, var(--accent) 7%, transparent) 0%,
    color-mix(in oklab, var(--accent) 3%, transparent) 40%,
    transparent 74%
  );
}

/* --------------------------------------------------------------------------
   Dach und Anlage

   Bild links, drei Schritte rechts — dieselbe Teilung wie bei der
   Positionierung, damit der Abschnitt sich einfuegt und nicht herausfaellt.
   -------------------------------------------------------------------------- */
.dach__inhalt { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.dach__bild { position: relative; margin: 0; border: 1px solid var(--border); }
/* Die drei Punkte rechts sind laenger als das Bild: Es laeuft beim Scrollen
   mit, wie die Bilder bei den Leistungen und Projekten. */
@media (min-width: 901px) { .dach__bild { position: sticky; top: calc(var(--kopf-h) + 32px); } }
/* Hinweis unter den drei Dach-Punkten: eigener Absatz, gleiche Optik wie
   zuvor als letzte Zelle der Liste */
.dach__liste { display: grid; align-content: start; }
[data-ausbau] .dach__liste > .dach__hinweis { box-shadow: 0 0 0 1px var(--border); }
.seite .dach__hinweis { margin: 0; }
/* Antworten unter den drei Fragen im Band "Zuerst das Netz" */
.grossbild__spalte p.grossbild__antwort { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 16%, transparent); font-size: 13.5px; line-height: 1.55; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 66%, transparent); }
/* Euro-Zaehler auf Englisch: Zeichen vorn */
.uhr__einheit--vorn { margin-right: 0.06em; }
/* ≤ und ≥ aus der Systemschrift an die fette Barlow angleichen */
.vergleich { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-size: 0.92em; vertical-align: 0.02em; }
.dach__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; filter: grayscale(1) contrast(1.06) brightness(0.9); }
[data-modus="hell"] .dach__bild img { filter: grayscale(1) contrast(1.04); }
.seite .dach__bild figcaption {
  margin: 0; padding: 11px 14px; border-top: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-2);
}
.dach__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.dach__punkt { background: var(--bg); padding: 20px 22px 22px; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; }
.dach__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); padding-top: 3px; }
.seite .dach__punkt h3 { margin: 0 0 7px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.seite .dach__punkt p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 54ch; }
.dach__hinweis {
  background: var(--bg); padding: 16px 22px 18px;
  border-left: 1px solid var(--accent);
  font-size: 13.5px; line-height: 1.55; color: var(--text-2);
}

/* Leitsatz: die eine Zeile, die den Punkt auf den Begriff bringt. Steht
   zwischen Ueberschrift und Erlaeuterung, deshalb etwas naeher an der
   Ueberschrift als am Text. */
.dach__leitsatz {
  margin: 6px 0 10px; font-size: 15px; line-height: 1.45; font-weight: 500;
  color: var(--text); text-wrap: pretty;
}
/* Abschluss: der Gedanke, der ueber das einzelne Projekt hinausgeht. */
.dach__abschluss {
  margin-top: clamp(34px, 4vw, 60px); padding-top: clamp(24px, 2.6vw, 38px);
  border-top: 1px solid var(--border);
  display: grid; gap: 14px; max-width: 72ch;
}
.seite .dach__satz {
  margin: 0; font-family: var(--f-head, inherit);
  font-size: clamp(21px, 2.3cqi, 31px); font-weight: 560; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--text); text-wrap: balance;
}
.seite .dach__nachsatz { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 900px) {
  .dach__inhalt { grid-template-columns: minmax(0, 1fr); }
  .dach__bild img { aspect-ratio: 16 / 9; }
}

/* Eigene Werkzeuge: steht direkt unter dem Vorspann, mit der Kante in der
   Akzentfarbe wie der Hinweis am Fuss des Blocks — nur kraeftiger, weil es
   ein Unterschied ist und keine Randbemerkung. */
.lb__werkzeug {
  margin: 26px 0 0; padding: 18px 20px 20px;
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  max-width: 64ch;
}
.seite .lb__werkzeug p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.lb__werkzeug .lb__label { margin-bottom: 8px; color: var(--accent); }

/* --------------------------------------------------------------------------
   Ruhebild

   Unter jeder Zeichnung, die eines bekommt, liegt ein ruhender Stand. Er ist
   da, bis der Effektkern meldet, dass er wirklich gezeichnet hat ("hat-bild").
   Kommt das Skript nicht durch, bleibt er stehen — dann fehlt die Bewegung,
   aber keine Flaeche ist leer.
   -------------------------------------------------------------------------- */
.ruhebild { position: absolute; inset: 0; pointer-events: none; }
/* Dort, wo die Montage zum Stehen kommt: rechts, auf halber Hoehe. */
.ruhebild .logo {
  position: absolute; left: 70%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(76px, 9vw, 132px); height: auto; opacity: 0.55;
}
@media (max-width: 900px) {
  /* Schmal liegt der Text ueber der Flaeche — dann tritt das Zeichen zurueck */
  .ruhebild .logo { left: 50%; top: 62%; opacity: 0.2; width: clamp(96px, 30vw, 150px); }
}
.fx.hat-bild .ruhebild { display: none; }
.fx > canvas { position: relative; z-index: 1; }

/* ==========================================================================
   Jobs und Partner (Fassungen 10 und 11)

   Dieselbe Sprache wie der Rest: eckige Formen, Haarlinien, Monospace fuer
   Nummern und Marken, das Pfeilchen aus dem Zeichen als Aufzaehlung. Nichts
   Eigenes, nur Anwendungen des Bestehenden.
   ========================================================================== */

/* --- Stellen: aufklappbare Eintraege ------------------------------------- */
.stellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.stelle { background: var(--bg); }
.stelle__rahmen { }
.stelle__kopf {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto 34px; align-items: center;
  gap: 18px; padding: 22px 24px; cursor: pointer; list-style: none;
}
.stelle__kopf::-webkit-details-marker { display: none; }
.stelle__kopf:hover { background: var(--surface); }
.stelle__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.seite .stelle__titel { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.012em; }
.stelle__eckdaten { display: flex; flex-wrap: wrap; gap: 9px; font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.05em; color: var(--text-2); }
.stelle__zeichen { position: relative; width: 16px; height: 16px; justify-self: end; }
.stelle__zeichen::before, .stelle__zeichen::after {
  content: ""; position: absolute; background: var(--text-2); transition: transform 220ms, opacity 220ms;
}
.stelle__zeichen::before { left: 0; top: 7px; width: 16px; height: 1.5px; }
.stelle__zeichen::after { left: 7px; top: 0; width: 1.5px; height: 16px; }
.stelle__rahmen[open] .stelle__zeichen::after { transform: scaleY(0); opacity: 0; }
.stelle__inhalt { padding: 0 24px 26px; display: grid; gap: 20px; }
.seite .stelle__text { max-width: 68ch; margin: 0; }
.stelle__marke {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 14px;
  border-left: 2px solid var(--accent); background: var(--surface);
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.5; color: var(--text-2);
}
.stelle__marke .ikon { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 1px; }
.stelle__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3vw, 52px); }
.stelle__weiter {
  display: inline-flex; align-items: center; gap: 10px; justify-self: start;
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text); text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid var(--accent);
}
.stelle__weiter:hover { color: var(--accent); }
.stelle__weiter .ikon { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .stelle__kopf { grid-template-columns: 1fr 24px; gap: 8px; }
  .stelle__nr { grid-column: 1; }
  .stelle__zeichen { grid-row: 1; grid-column: 2; }
  .stelle__spalten { grid-template-columns: minmax(0, 1fr); }
}

/* --- Rollen: fuer wen die Partnerseite gilt ----------------------------- */
.rollen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.rolle { background: var(--bg); padding: 24px 22px 26px; display: grid; gap: 10px; align-content: start; }
.rolle__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.seite .rolle__titel { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.seite .rolle__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
/* Das Raster steht auf vier Spalten. Stehen nur drei Rollen darin,
   bliebe die vierte Zelle als graue Flaeche sichtbar — der Hintergrund des
   Rasters ist die Linienfarbe. Deshalb zaehlt die Regel die Kinder. */
.rollen:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rollen:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .rollen, .rollen:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rollen, .rollen:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } }

/* --- Bewerbungs- und Meldeformular -------------------------------------- */
.bewerbung { max-width: 760px; }
.formular__fuss--zwei { flex-wrap: wrap; gap: 12px; }
.formular__pflicht--block { display: block; margin: 14px 0 0; max-width: 62ch; }

/* --- Ablage fuer Unterlagen --------------------------------------------- */
.ablage__text { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 62%, transparent); }
.ablage {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 22px 24px; border: 1px dashed var(--text-inverse); border: 1px dashed color-mix(in oklab, var(--text-inverse) 34%, transparent);
  transition: border-color 200ms, background-color 200ms;
}
.ablage.ist-bereit { border-color: var(--accent); background: var(--accent); background: color-mix(in oklab, var(--accent) 12%, transparent); }
.ablage__eingabe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ablage__knopf {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border: 1px solid var(--text-inverse); border: 1px solid color-mix(in oklab, var(--text-inverse) 45%, transparent);
  font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ablage__ziehen { font-size: 13.5px; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 55%, transparent); }
.ablage:hover .ablage__knopf { border-color: var(--text-inverse); }
.ablage__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
[data-ablage].hat-dateien .ablage__liste { margin-top: 1px; background: var(--text-inverse); background: color-mix(in oklab, var(--text-inverse) 18%, transparent); border: 1px solid color-mix(in oklab, var(--text-inverse) 18%, transparent); }
.ablage__datei {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 14px;
  background: var(--inverse); padding: 11px 14px; font-size: 14px;
}
.ablage__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ablage__groesse { font-family: var(--f-mono, monospace); font-size: 11px; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 58%, transparent); }
.ablage__weg {
  width: 26px; height: 26px; border: 1px solid var(--text-inverse); border: 1px solid color-mix(in oklab, var(--text-inverse) 28%, transparent);
  background: none; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; justify-self: end;
}
.ablage__weg:hover { border-color: var(--accent); color: var(--accent); }
.ablage__pflicht { margin: 10px 0 0; font-size: 12.5px; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 55%, transparent); }
[data-ablage].ist-fehlerhaft .ablage { border-color: #ff8a7a; }

/* Auf hellem Grund steht die Ablage nicht im dunklen Band — dieselben Rollen,
   aber ohne die Mischungen gegen die helle Schrift. */
[data-modus="hell"] .sec--dunkel .ablage__datei { background: var(--inverse); }

/* --------------------------------------------------------------------------
   Kopfzeile mit zwei Punkten mehr (Fassungen 10 und 11)

   "Für Partner" und "Jobs" kosten zusammen rund 160 Pixel. Damit passt die
   Zeile erst ab etwa 1380 statt ab 1080 Pixeln. Statt alle Fassungen enger
   zu setzen, wird hier nur dort nachgezogen, wo die Punkte auch stehen:
   etwas knapperer Satz, und das Klappmenue uebernimmt frueher.
   -------------------------------------------------------------------------- */
[data-neu] .kopf__nav { gap: 0; }
[data-neu] .kopf__link { padding-inline: 11px; letter-spacing: 0.07em; }
[data-neu] .kopf__cta { padding-inline: 18px; }

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

/* Merksatz im Leistungsblock — der Punkt, auf den der Abschnitt hinausläuft.
   Steht zwischen Vorspann und Spalten, mit der Kante in der Akzentfarbe.
   Wird nur auf "Betrieb & Markt" benutzt; die acht Leistungsblöcke tragen
   ihren Merksatz am Fuß als .lb__hinweis. */
.seite .lb__merksatz {
  margin: 24px 0 0; padding: 16px 0 16px 20px;
  border-left: 2px solid var(--accent);
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; font-weight: 500;
  letter-spacing: -0.008em; color: var(--text); max-width: 56ch;
}

/* --------------------------------------------------------------------------
   Register der Firmengruppe

   Ein Verzeichnis, wie es hinten in einem technischen Bericht steht:
   Kopfzeile mit Haarlinie, darunter die Unternehmen nach Anfangsbuchstaben,
   der Buchstabe in Monospace und Akzentfarbe. Die Spalten verteilt der
   Browser selbst (columns), eine Gruppe bricht nie ueber zwei Spalten.
   Keine Logos — Namen sind die zurueckhaltendere Form derselben Aussage.
   -------------------------------------------------------------------------- */
.firmen { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--border); }
.seite .firmen__kopf {
  display: flex; justify-content: space-between; gap: 16px; margin: 0;
  padding: 12px 0; border-bottom: 1px solid var(--border);
  font-family: var(--f-mono, monospace); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.firmen__register { columns: 4 230px; column-gap: clamp(22px, 3vw, 52px); padding-top: 22px; }
.firmen__gruppe {
  break-inside: avoid; display: grid; grid-template-columns: 2em minmax(0, 1fr);
  gap: 0 10px; padding-bottom: 20px;
}
.firmen__buchstabe {
  font-family: var(--f-mono, monospace); font-size: 13px; font-weight: 500;
  line-height: 1.55; color: var(--accent);
}
.seite .firmen__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.seite .firmen__liste li { font-size: 15px; line-height: 1.55; color: var(--text); }
.seite .firmen__hinweis {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.55; color: var(--text-2);
}
.firmen__hinweis .ikon { width: 17px; height: 17px; flex: none; color: var(--accent); margin-top: 1px; }
@media (max-width: 700px) { .firmen__register { columns: 2 140px; } }

/* --------------------------------------------------------------------------
   Steuerblock · Hinweis zum Investitionsabzugsbetrag

   Links die Ueberschrift mit der Rechtsgrundlage in Monospace, rechts der
   Text — dasselbe Zweispaltenmass wie die Abschnittskoepfe, damit der
   Block die volle Breite traegt und rechts nichts leer bleibt. Die
   Abgrenzung steht abgesetzt darunter: Sie ist der wichtigste Satz.
   -------------------------------------------------------------------------- */
.steuerblock {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 52px);
  margin-top: clamp(26px, 3vw, 40px);
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--surface); box-shadow: 0 0 0 1px var(--border);
}
.steuerblock__marke {
  margin: 0 0 10px; font-family: var(--f-mono, monospace); font-size: 11px;
  font-weight: 500; letter-spacing: 0.08em; color: var(--accent);
}
.seite .steuerblock__titel {
  margin: 0; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.2;
  font-weight: 600; letter-spacing: -0.015em; color: var(--text);
}
.seite .steuerblock__text p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.seite .steuerblock__text p:last-child { margin-bottom: 0; }
.seite .steuerblock__abgrenzung {
  margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--accent);
  font-size: 13.5px; line-height: 1.55; color: var(--text);
}
@media (max-width: 900px) { .steuerblock { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* Zwei Saetze nebeneinander: links der Merksatz mit der Akzentkante,
   rechts die leisere Einschraenkung. Beide tragen ihre eigene Kante, die
   Spalten sind deshalb nicht gleich breit — der Merksatz fuehrt. */
.satzpaar {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(22px, 3vw, 52px); align-items: start;
  margin-top: clamp(26px, 3vw, 40px);
}
.seite .satzpaar > .lb__merksatz,
.seite .satzpaar > .lb__hinweis { margin-top: 0; max-width: none; }
.seite .satzpaar > .lb__hinweis { padding-top: 4px; }
@media (max-width: 900px) { .satzpaar { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Drei Karten, die auf "Betrieb & Markt" führen. Gleiche Form wie die
   Perspektiven: Raster mit Haarlinien, eine Kante pro Karte. */
.danach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.danach__karte { background: var(--bg); }
.danach__karte a { display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; height: 100%; color: inherit; text-decoration: none; transition: background-color 200ms; }
.danach__karte a:hover { background: var(--surface); }
.danach__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.seite .danach__titel { margin: 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 600; letter-spacing: -0.012em; }
.seite .danach__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 40ch; }
.danach__weiter { margin-top: 6px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); }
.danach__karte a:hover .danach__weiter { color: var(--accent); }
.danach__weiter .ikon { width: 14px; height: 14px; transition: transform 240ms; }
.danach__karte a:hover .danach__weiter .ikon { transform: translateX(4px); }
.danach__knopf { margin: 0; flex: none; }
@media (max-width: 900px) { .danach { grid-template-columns: minmax(0, 1fr); } }

/* Frueher brauchten acht Menuepunkte hier engeren Satz und ein frueheres
   Klappmenue (ab 1450px). Seit die Navigation auf vier Punkte mit zwei
   Aufklappmenues steht, reicht die allgemeine Regel bei 1300px. */

/* Vertrauenszeile unter dem Hero-Text: drei Punkte, durch Haarlinien
   getrennt, in Monospace wie die übrigen Marken. */
/* Vier Punkte unter dem Kopf. Die erste Fassung war eine Flexzeile mit
   Trennstrichen aus ::before — mit vier laengeren Punkten brach sie um, und
   der Strich rutschte an den Zeilenanfang. Das sah aus wie ein Einzug.
   Jetzt ein Raster zwei mal zwei unter einer Haarlinie. */
.hero__vertrauen {
  list-style: none; margin: 26px 0 0; padding: 15px 0 0; max-width: 660px;
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 28px;
  font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-2);
}
.hero__vertrauen li { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; }
.hero__vertrauen li > span { display: block; line-height: 1.5; }
.hero__vertrauen b { display: block; color: var(--text); font-weight: 600; letter-spacing: 0.06em; }
.hero__vertrauen .ikon { width: 12px; height: 12px; margin-top: 3px; color: var(--primary); flex: none; }
@media (max-width: 760px) { .hero__vertrauen { grid-template-columns: minmax(0, 1fr); gap: 9px; } }

/* --------------------------------------------------------------------------
   Keine grauen Kästen vor dem Zeichnen (Fassung 12)

   Die Bühnen trugen eine helle Fläche, auch solange nichts darauf stand.
   Beim Scrollen sah man deshalb erst einen grauen Block und dann die
   Zeichnung. Jetzt bleibt die Fläche leer — nur die Kante steht, damit der
   Platz erkennbar bleibt.
   -------------------------------------------------------------------------- */
[data-ausbau] .lb__buehne,
[data-ausbau] .blatt__buehne,
[data-ausbau] .systeme__buehne,
[data-ausbau] .stufe__buehne,
[data-ausbau] .baustein__buehne,
[data-ausbau] .szene__buehne { background: none; }


/* --------------------------------------------------------------------------
   Fußzeile · Kontakt ohne Kästen (Fassung 12)

   Drei umrandete Kästen betonten vor allem, dass dort noch nichts steht.
   Jetzt eine Reihe unter einer Haarlinie: Marke in Monospace, Wert darunter,
   kein Rahmen. Das trägt auch, wenn echte Angaben eingesetzt werden.
   -------------------------------------------------------------------------- */
[data-ausbau] .fuss__kontakt {
  display: flex; flex-wrap: wrap; gap: clamp(26px, 5vw, 76px);
  border: 0; border-top: 1px solid var(--text-inverse); border-top: 1px solid color-mix(in oklab, var(--text-inverse) 22%, transparent);
  margin-top: clamp(34px, 4vw, 58px); padding-top: 22px;
}
[data-ausbau] .fuss__kontaktfeld { display: grid; gap: 5px; padding: 0; border: 0; }
[data-ausbau] .fuss__kontaktfeld span {
  font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-inverse); color: color-mix(in oklab, var(--text-inverse) 52%, transparent);
}
[data-ausbau] .fuss__kontaktfeld b,
[data-ausbau] .fuss__kontaktfeld a {
  font-size: 15px; font-weight: 500; color: var(--text-inverse); text-decoration: none;
}
[data-ausbau] .fuss__kontaktfeld a { border-bottom: 1px solid var(--accent); border-bottom: 1px solid color-mix(in oklab, var(--accent) 60%, transparent); padding-bottom: 2px; }
[data-ausbau] .fuss__kontaktfeld a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Keine grauen Blöcke beim Scrollen (Fassung 12)

   Die Raster auf dieser Seite malen ihre Trennlinien als Hintergrund: Der
   Behälter trägt die Rahmenfarbe, die Zellen liegen mit einem Pixel Abstand
   darauf. Das ist sparsam — aber die Zellen blenden beim Scrollen ein, und
   solange eine Zelle noch durchsichtig ist, scheint der Behälter durch. Man
   sieht einen grauen Block, und erst beim Weiterscrollen den Inhalt.

   Jetzt trägt jede Zelle ihre Linie selbst, als Schlagschatten ohne Versatz.
   Schatten benachbarter Zellen liegen exakt übereinander, die Linie bleibt
   also einen Pixel schmal und das Bild unverändert. Ist eine Zelle noch
   durchsichtig, ist ihre Linie es auch — dort steht dann nichts.

   Betrifft 22 Raster. Die älteren Fassungen bleiben, wie sie sind.
   -------------------------------------------------------------------------- */

[data-ausbau] .baustein__punkte,
[data-ausbau] .cookie__optionen,
[data-ausbau] .dach__punkte,
[data-ausbau] .danach,
[data-ausbau] .dreier,
[data-ausbau] .einpolig__punkte,
[data-ausbau] .faelle,
[data-ausbau] .film__param,
[data-ausbau] .finanz__module,
[data-ausbau] .fragen,
[data-ausbau] .gegen,
[data-ausbau] .modelle,
[data-ausbau] .perspektiven,
[data-ausbau] .platz__liste,
[data-ausbau] .recht__bloecke,
[data-ausbau] .rollen,
[data-ausbau] .sprungmarken,
[data-ausbau] .stellen,
[data-ausbau] .stufen,
[data-ausbau] .systeme__param,
[data-ausbau] .szene__param,
[data-ausbau] .wege {
  background: none;
  border: 0;
  gap: 0;
}

[data-ausbau] .baustein__punkte > *:not(legend),
[data-ausbau] .cookie__optionen > *:not(legend),
[data-ausbau] .dach__punkte > *:not(legend),
[data-ausbau] .danach > *:not(legend),
[data-ausbau] .dreier > *:not(legend),
[data-ausbau] .einpolig__punkte > *:not(legend),
[data-ausbau] .faelle > *:not(legend),
[data-ausbau] .film__param > *:not(legend),
[data-ausbau] .finanz__module > *:not(legend),
[data-ausbau] .fragen > *:not(legend),
[data-ausbau] .gegen > *:not(legend),
[data-ausbau] .modelle > *:not(legend),
[data-ausbau] .perspektiven > *:not(legend),
[data-ausbau] .platz__liste > *:not(legend),
[data-ausbau] .recht__bloecke > *:not(legend),
[data-ausbau] .rollen > *:not(legend),
[data-ausbau] .sprungmarken > *:not(legend),
[data-ausbau] .stellen > *:not(legend),
[data-ausbau] .stufen > *:not(legend),
[data-ausbau] .szene__param > *:not(legend),
[data-ausbau] .systeme__param > *:not(legend),
[data-ausbau] .wege > *:not(legend) {
  box-shadow: 0 0 0 1px var(--border);
}

/* Auf den dunklen Bändern ist die Linie eine andere */
[data-ausbau] .sec--dunkel .einpolig__punkte > *,
[data-ausbau] .sec--dunkel .fragen > * {
  box-shadow: 0 0 0 1px var(--text-inverse); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text-inverse) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Sprungleiste · Spalten nach Zahl der Einträge (Fassung 12)

   Vier feste Spalten gingen bei fünf Einträgen als 4 + 1 auf: eine volle
   Reihe, darunter ein einzelner Kasten. Die Spaltenzahl richtet sich jetzt
   nach der Zahl der Einträge, damit keine Reihe mit einem Einzelstück endet.
   Acht Einträge (Leistungen) bleiben bei 4 + 4, fünf (Betrieb & Markt)
   stehen in einer Reihe und fallen über drei auf eine Spalte zurück.

   Bei fünf Spalten ist eine Zelle zu schmal für Zeichen neben Text. Dort
   stehen Zeichen und Pfeil deshalb oben, die Beschriftung darunter — sie
   bekommt damit die ganze Breite.
   -------------------------------------------------------------------------- */
[data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
[data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) > .sprungmarke {
  grid-template-columns: auto 1fr;
  grid-template-areas: "zeichen pfeil" "text text";
  align-items: start;
  align-content: start;
  gap: 18px 12px;
}
[data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) .sprungmarke__ikon { grid-area: zeichen; }
[data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) .sprungmarke__text { grid-area: text; }
[data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) > .sprungmarke > .ikon {
  grid-area: pfeil; justify-self: end; margin-top: 11px;
}

@media (max-width: 1240px) {
  [data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) > .sprungmarke {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "zeichen text pfeil";
    align-items: center;
    gap: 14px;
  }
  [data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) > .sprungmarke > .ikon { margin-top: 0; }
}
@media (max-width: 860px) {
  [data-ausbau] .sprungmarken:has(> :nth-child(5):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Das Bildband trug sein Raster ebenfalls als Hintergrund — über dem Foto
   fiel der helle Streifen besonders auf, solange die Spalten noch nicht
   eingeblendet waren. Gleiche Lösung, nur mit der hellen Linie. */
[data-ausbau] .grossbild__spalten { background: none; border: 0; gap: 0; }
[data-ausbau] .grossbild__spalte {
  box-shadow: 0 0 0 1px var(--text-inverse); box-shadow: 0 0 0 1px color-mix(in oklab, var(--text-inverse) 24%, transparent);
}

/* --------------------------------------------------------------------------
   "Passt dazu" · Querverweise am Ende eines Leistungsabschnitts

   Aus dem Umsetzungsskript des Kunden: die Kette Vertrag → Steuerung →
   Flexibilitaet → Messkonzept → Nachweis soll sichtbar sein, statt dass
   der Leser sie sich aus der Navigation zusammensucht. Zwei Verweise je
   Abschnitt, mehr wird eine zweite Navigation.
   -------------------------------------------------------------------------- */
.lb__passt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
}
.lb__passt .lb__label { margin: 0; flex: none; }
.lb__passt a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; line-height: 1.4; color: var(--text); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms;
}
.lb__passt a:hover { color: var(--accent); border-bottom-color: currentColor; }
.lb__passt a .ikon { width: 12px; height: 12px; color: var(--primary); flex: none; }

/* Die Zeichnung im Block "Was alle versprechen" · Seitenverhaeltnis 16:7
   wie vorgegeben, mobil wird sie flacher statt schmaler. */
/* Flacher als zuvor (war 16:7): Die Zeichnung ist eine Zeile, kein Bild —
   bei 16:7 stand mehr Luft darin als Inhalt. */
.danach__bild { margin: clamp(22px, 2.6vw, 34px) 0 0; }
.danach__bild .fx { aspect-ratio: 16 / 4.6; width: 100%; }
@media (max-width: 1000px) { .danach__bild .fx { aspect-ratio: 16 / 6; } }
@media (max-width: 760px) { .danach__bild .fx { aspect-ratio: 16 / 9; } }

/* Der Knopf schloss den Abschnitt nicht ab, er stand darunter im Raum.
   Jetzt sitzt er auf einer Haarlinie, die ueber die volle Breite laeuft —
   dasselbe Muster wie am Fuss der Klappmenues. */
/* Satz und Knopf stehen bündig zu den Kaesten darueber: der Text an der
   linken Kante, der Knopf an der rechten. Dazwischen darf Luft sein —
   die Kanten sind das Raster, nicht die Mitte. */
.danach__abschluss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px clamp(28px, 4vw, 56px); margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid var(--border);
}
.danach__abschluss p {
  margin: 0; max-width: 52ch;
  font-size: 14px; line-height: 1.5; color: var(--text-2);
}

/* Ein Eintrag ohne Nummer soll nicht hoeher sitzen als einer mit */
.panel__eintrag .panel__titel:first-child { margin-top: 0; }

/* Telefon und Post auf der Kontaktseite sind waehlbar, sobald sie
   feststehen — sie sollen aber aussehen wie die uebrigen Werte. */
a.weg__wert { text-decoration: none; color: inherit; border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms; }
a.weg__wert:hover { color: var(--accent); border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   Zwei Wege: vor und auf dem Zähler

   Zwei gleichwertige Spalten, jede mit Kennung, Titel, Zielgruppe, Liste
   und dem Satz, worauf es hinausläuft. Jede Zelle trägt ihre Linie selbst,
   damit beim Einblenden keine graue Fläche stehen bleibt.
   -------------------------------------------------------------------------- */
.wege2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.weg2 { background: var(--bg); padding: clamp(22px, 2.4vw, 30px); box-shadow: 0 0 0 1px var(--border); }
.weg2__marke { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.weg2__nr { color: var(--primary); font-weight: 500; }
.weg2__titel { margin: 0 0 14px; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.weg2__fuer { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.weg2__fuer .lb__label { display: block; margin-bottom: 5px; }
.weg2__wert { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--border); font-size: 14.5px; line-height: 1.5; color: var(--text); }
@media (max-width: 860px) { .wege2 { grid-template-columns: minmax(0, 1fr); } }

/* Drei Wege statt zwei — fuer die Formen, in denen es die Plattform gibt.
   Unter 1100 Pixeln bricht die Reihe auf eine Spalte, weil die Kaesten
   sonst nur noch Schlagworte tragen. */
/* Neun Einträge (Leistungen) gehen als 3 × 3 auf. Bei vier Spalten
   bliebe ein einzelner Kasten in der letzten Reihe stehen — derselbe
   Grund wie bei den fünf Einträgen weiter oben. */
[data-ausbau] .sprungmarken:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) {
  [data-ausbau] .sprungmarken:has(> :nth-child(9):last-child) { grid-template-columns: minmax(0, 1fr); }
}

.wege2--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Die Werte sollen auf einer Linie stehen, auch wenn die Texte darueber
   verschieden lang sind — sonst steht die Haarlinie in jedem Kasten
   woanders und wirkt wie eine Unterstreichung. */
.wege2--drei .weg2 { display: flex; flex-direction: column; }
.wege2--drei .weg2__wert { margin-top: auto; }

/* --------------------------------------------------------------------------
   Nutzenregister · fuenf Zeilen mit Haarlinie

   Fuer Aufzaehlungen, die sich nicht in ein Raster teilen lassen: Nummer,
   Wirkung, Erklaerung in einer Zeile. Links die Marke in Monospace, rechts
   der Satz — wie eine Positionsliste in einer Zeichnung.
   -------------------------------------------------------------------------- */
.nutzen {
  list-style: none; margin: 36px 0 0; padding: 0;
  border-top: 1px solid var(--border);
}
.nutzen li {
  display: grid; grid-template-columns: 3.2em minmax(0, 15em) minmax(0, 1fr);
  gap: 10px 22px; padding: 17px 0;
  border-bottom: 1px solid var(--border); align-items: baseline;
}
.nutzen__nr { font-family: var(--f-mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: var(--accent); }
.nutzen b { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.nutzen li > span:last-child { font-size: 15px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 900px) {
  .nutzen li { grid-template-columns: 2.8em minmax(0, 1fr); gap: 6px 16px; padding: 16px 0; }
  .nutzen li > b, .nutzen li > span:last-child { grid-column: 2; }
}
@media (max-width: 1100px) { .wege2--drei { grid-template-columns: minmax(0, 1fr); } }

/* Die Ebenen-Tabelle laeuft ueber die volle Breite. Die dritte Spalte
   traegt den laengsten Text und bekommt deshalb den meisten Platz; auf
   kleinen Bildschirmen scrollt die Tabelle waagerecht statt zu zerfallen. */
.ebenen-blatt { overflow-x: auto; }
.ebenen-blatt .gf-tabelle { min-width: 720px; }
.ebenen-blatt .gf-tabelle th:first-child { width: 22%; }
.ebenen-blatt .gf-tabelle td:first-of-type { width: 30%; }

/* --------------------------------------------------------------------------
   Hero · drei kurze Sätze statt eines langen Blocks (Fassungen mit Ausbau)

   Die Überschrift besteht aus drei Aussagen. Bei voller Displaygröße liefen
   sie auf fünf Zeilen um und drückten Vorspann, Knöpfe und die Montage des
   Zeichens nach unten. Kleiner gesetzt bekommt jeder Satz seine Zeile, und
   der Kopf atmet wieder.
   -------------------------------------------------------------------------- */
[data-ausbau] .hero__titel { font-size: clamp(32px, 3.7cqi, 56px); line-height: 1.04; }
@media (max-width: 1100px) { [data-ausbau] .hero__titel { font-size: clamp(30px, 5.4vw, 44px); } }

/* --------------------------------------------------------------------------
   Kopfzeile der Ausbaufassungen · sieben Punkte in 1320 Pixeln

   Diese Fassungen tragen "Betrieb & Markt" und "Projekte" zusaetzlich.
   Gemessen lief die Zeile um 129 Pixel ueber — und zwar bei jeder
   Fensterbreite, weil sie auf --wrap begrenzt ist. Ein groesserer Monitor
   hilft also nicht. Deshalb hier enger gesetzt: weniger Innenabstand je
   Punkt, kleinere Sperrung, schmalere Luecken, Zeichen eine Nummer
   kleiner. Die Schriftgroesse bleibt, damit die Zeile lesbar bleibt.
   -------------------------------------------------------------------------- */
[data-ausbau] .kopf__zeile { gap: 14px; }
/* Das Zeichen ist in dieser Fassung 196 Pixel breit (Hautregel der 08).
   Die Angabe muss diese Spezifitaet erreichen, sonst greift sie nicht. */
[data-skin="8"][data-ausbau] .kopf__marke .logo { width: 176px; }
[data-ausbau] .kopf__link { padding-inline: 7px; letter-spacing: 0.045em; }
[data-ausbau] .kopf__link::after { left: 7px; right: 7px; }
[data-ausbau] .kopf__werkzeuge { gap: 8px; }
[data-ausbau] .kopf__cta { padding-inline: 12px; }

/* Der Systemvorteil nutzt die Dreierreihe wie die Unterseiten — eigene
   Formen braucht er nicht. Nur der Abstand zum Kopf wird gesetzt. */
#systemvorteil .dreier { margin-top: clamp(28px, 3vw, 44px); }

/* Nummerierte Absaetze in den AGB: (1), (2) … wie in Vertragstexten
   ueblich, die Zahl in Monospace und gedaempft. */
.seite .recht__absaetze { list-style: none; counter-reset: absatz; margin: 0; padding: 0; display: grid; gap: 10px; }
.seite .recht__absaetze li {
  counter-increment: absatz; display: grid; grid-template-columns: 2.4em minmax(0, 1fr);
  font-size: 15px; line-height: 1.65; color: var(--text-2);
}
.seite .recht__absaetze li::before {
  content: "(" counter(absatz) ")"; font-family: var(--f-mono, monospace);
  font-size: 12px; line-height: 2.05; color: var(--text-2); opacity: 0.8;
}

/* Hinweis auf die massgebliche Fassung, nur auf den englischen
   Rechtsseiten. Gleiche Form wie der Platzhalterhinweis darunter. */
.vorrang {
  display: flex; align-items: flex-start; gap: 12px; margin: 0;
  padding: 14px 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--border);
  font-size: 13.5px; line-height: 1.55; color: var(--text-2);
}
.vorrang .ikon { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 1px; }

/* Untertitel im Seitenkopf: auf den Rechtsseiten steht in der Ueberschrift
   der amtliche Name, darunter die Rechtsgrundlage. */
/* .seite davor, weil der Reset ".gf p { margin: 0 }" sonst gewinnt. */
.seite .seitenkopf__untertitel {
  /* Die Ueberschrift laeuft mit einer Zeilenhoehe unter 1. Ihre Unterlaenge
     (das p in "Impressum") steht damit ausserhalb des Textkastens und lag
     auf dieser Zeile. Deshalb hier mehr Abstand, als der Kasten verlangt. */
  margin: clamp(20px, 2.2vw, 30px) 0 0; font-family: var(--f-mono, monospace);
  font-size: 12px; letter-spacing: 0.06em; color: var(--text-2);
}

/* Der Schritt ueber dem Phasentitel — leise, in Monospace, damit die
   Phase ihren Platz im Ablauf zeigt, ohne die Zeile zu dominieren. */
.stufe__schritt {
  display: block; margin-bottom: 4px;
  font-family: var(--f-mono, monospace); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}

/* Unterschrift im Kopfbild (Fassung 12): Auf dem Desktop liegt sie auf der
   Zeichnung. Ein Schild in der Farbe des Grunds haelt sie lesbar, wo die
   Zeichnung bis an den Rand reicht (etwa der Tagesverlauf auf den
   Rechtsseiten). Wo nichts darunter liegt, sieht man keinen Unterschied.
   Bis 1100 Pixel steht die Unterschrift ohnehin unter der Zeichnung. */
[data-fassung="12"] .seitenkopf__legende {
  z-index: 2; padding: 4px 8px; margin-left: -8px;
  background: var(--bg); background: color-mix(in oklab, var(--bg) 90%, transparent);
}

/* ==========================================================================
   Sprachknopf und Suche im Kopf (Fassung 12, seit 12.10.2026)

   Der zweiteilige Schalter DE|EN ist ein einzelner Knopf mit der jeweils
   anderen Sprache: auf der deutschen Seite "EN", auf der englischen "DE".
   Im frei gewordenen Platz steht die Lupe. Sie oeffnet das Suchfeld unter
   der Kopfzeile (seite/suche.js). Beide Knoepfe haben das Mass des
   Hell-Dunkel-Schalters daneben.
   ========================================================================== */
.sprachknopf, .kopf__suche {
  width: 38px; height: 38px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  cursor: pointer; text-decoration: none;
  transition: border-color 200ms, background-color 200ms, color 200ms;
}
.sprachknopf { font-family: var(--f-mono, monospace); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; }
.sprachknopf:hover, .kopf__suche:hover, .kopf__suche[aria-expanded="true"] { border-color: var(--text); background: var(--surface); }
.kopf__suche .ikon { width: 17px; height: 17px; }

/* Platz fuer die Lupe: Die deutsche Menuezeile lief mit dem zusaetzlichen
   Knopf um bis zu 28 Pixel ueber. Je Menuepunkt ein Pixel weniger
   Innenabstand und zwei Pixel weniger zwischen den Knoepfen holen das
   zurueck; unter 1320 Pixeln uebernimmt das Klappmenue (bisher unter 1300). */
[data-fassung="12"] .kopf__werkzeuge { gap: 6px; }
[data-fassung="12"] .kopf__link { padding-inline: 6px; }
[data-fassung="12"] .kopf__link::after { left: 6px; right: 6px; }
@media (max-width: 1320px) {
  [data-fassung="12"] { --kopf-h: 64px; }
  [data-fassung="12"] .kopf__nav, [data-fassung="12"] .kopf__cta { display: none; }
  [data-fassung="12"] .kopf__burger { display: block; }
  [data-fassung="12"] .kopf__zeile { min-height: 64px; gap: 14px; }
  [data-fassung="12"] .kopf__werkzeuge { margin-left: auto; }
}

.suche {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--border);
  box-shadow: 0 28px 56px -16px rgba(0, 0, 0, 0.5);
  max-height: calc(100vh - var(--kopf-h)); overflow-y: auto; overscroll-behavior: contain;
}
.suche[hidden] { display: none; }
.suche__innen { max-width: 760px; margin: 0 auto; padding: 18px var(--rand, 24px) 22px; }
.suche__feld { display: flex; align-items: center; gap: 12px; padding: 2px 0 10px; border-bottom: 1px solid var(--text); }
.suche__lupe { width: 20px; height: 20px; flex: none; color: var(--text-2); }
.suche__eingabe {
  flex: 1; min-width: 0; padding: 6px 0; border: 0; border-radius: 0; outline: none;
  background: transparent; color: var(--text);
  font-family: var(--f-text, inherit); font-size: 19px; line-height: 1.3; font-weight: 400;
  -webkit-appearance: none; appearance: none;
}
.suche__eingabe::placeholder { color: var(--text-2); opacity: 1; }
/* Den Fokus zeigt die Linie unter dem Feld, nicht ein zweiter Rahmen */
.gf .suche__eingabe:focus-visible, .suche .suche__eingabe:focus { outline: none; }
.suche__feld:focus-within { border-bottom-color: var(--accent); }
.suche__eingabe::-webkit-search-cancel-button, .suche__eingabe::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.suche__zu {
  width: 36px; height: 36px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border); background: none; color: var(--text); cursor: pointer;
}
.suche__zu .ikon { width: 16px; height: 16px; }
.suche__zu:hover { border-color: var(--text); }
.suche .suche__marke {
  margin: 16px 0 10px; font-family: var(--f-mono, monospace); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.suche__vorschlaege[hidden] { display: none; }
.suche__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.suche__chip {
  padding: 8px 12px; border: 1px solid var(--border); background: none; color: var(--text); cursor: pointer;
  font-family: var(--f-text, inherit); font-size: 13.5px; font-weight: 500; line-height: 1.2;
  transition: border-color 200ms, color 200ms;
}
.suche__chip:hover { border-color: var(--accent); color: var(--accent); }
.suche .suche__status { margin: 14px 0 6px; font-family: var(--f-mono, monospace); font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-2); }
.suche .suche__status:empty { display: none; }
.suche .suche__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.suche__treffer a {
  display: grid; gap: 3px; padding: 11px 12px; text-decoration: none; color: var(--text);
  border-left: 2px solid transparent;
}
.suche__treffer[aria-selected="true"] a { background: var(--surface); border-left-color: var(--accent); }
.suche__ort { font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); }
.suche__titel { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.suche__auszug { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.suche mark { background: var(--accent); background: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--text); padding: 0 1px; }

/* Am Ziel eines Sprungs aus der Suche: die Stelle leuchtet kurz auf */
.ist-suchziel { animation: suchziel 2.6s var(--kurve, ease) both; }
@keyframes suchziel {
  0%, 35% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 9px var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 9px color-mix(in oklab, var(--accent) 18%, transparent); }
  100% { box-shadow: 0 0 0 2px transparent, 0 0 0 9px transparent; }
}
@media (prefers-reduced-motion: reduce) { .ist-suchziel { animation-duration: 2.6s; animation-timing-function: steps(1, end); } }