/* ==========================================================================
   Hildebrandt.AI · Stilgrundlage
   Bewegungsmotiv: die Stufe aus der Bildmarke. Alles startet auf einem
   Niveau und springt eine Stufe hoch.
   ========================================================================== */

/* --- 1 · Marken-Werte ---------------------------------------------------- */

:root {
  /* Grundfarben, hell */
  --graphit:      #1D1D1F;
  --grau:         #6E6E73;
  --grau-leise:   #64646A;
  --platin:       #F5F5F7;
  --karte:        #FFFFFF;
  --karte-hoch:   #FFFFFF;
  --haarlinie:    #D2D2D7;
  --haarlinie-fein: rgba(0, 0, 0, .06);

  /* Zustandsfarben. Regel aus dem CI: Farbe gehoert dem Geld.
     Diese drei stehen nur auf Zahlen und Zustaenden, nie auf Flaechen.

     Am 02.08.2026 nachgemessen und abgedunkelt: Weil sie auf ZAHLEN
     stehen, sind sie Textfarben und muessen 4,5:1 erreichen. Die
     urspruenglichen Werte lagen bei 2,90 (gruen), 4,34 (rot) und 3,86
     (gelb) auf hellem Grund und waren damit zu schwach. */
  --gewinn:       #127A42;
  --verlust:      #C62A22;
  --achtung:      #8A5300;
  /* Gemessen am 02.08.2026: Apples #0A84FF erreicht auf hellem Grund nur
     3,65:1 und ist damit für Text zu schwach. Es ist die Farbe des
     DUNKLEN Modus. Hier steht deshalb ein dunklerer Ton derselben
     Familie, gemessen 5,27:1 auf Weiß und 4,84:1 auf Platin. */
  --fokus:        #0B69D4;
  --fokus-leise:  rgba(11, 105, 212, .10);
  --fokus-glut:   rgba(11, 105, 212, .28);

  /* Abgeleitete Rollen */
  --grund:        var(--platin);
  --grund-tief:   #EBEBF0;
  --tinte:        var(--graphit);
  --tinte-leise:  var(--grau);
  --marke:        var(--graphit);

  /* Radien aus dem CI */
  --r-gross:      20px;
  --r-innen:      13px;
  --r-klein:      8px;
  --r-rund:       999px;

  /* Schrift. Systemaufruf ist lizenzkonform, es wird nichts eingebettet.
     Die Mono ist Charakterschrift: Zahlen, Quellen, Kennwerte. */
  --satz: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* Raster */
  --breite-text:  min(680px, 100% - 48px);
  --breite-voll:  min(1180px, 100% - 48px);
  --breite-weit:  min(1400px, 100% - 48px);

  /* Bewegung */
  --stufe-zeit:   .72s;
  --stufe-kurve:  cubic-bezier(.16, 1, .3, 1);
  --schnell:      cubic-bezier(.2, .8, .2, 1);

  color-scheme: light dark;

/* KEINE BEREICHSFARBEN. Zurueckgenommen am 04.08.2026 auf Mikes Urteil:
   „Das mit den verschiedenen Farben gefaellt mir ueberhaupt nicht. Das
   Farbkonzept find ich nicht so geil."

   Damit gilt wieder die urspruengliche Regel aus dem Corporate Design, und
   sie war die bessere: „Ein Logo. Keine Bereichslogos, KEINE BEREICHSFARBEN,
   kein Zusatzsymbol. Das ist die haeufigste Art, eine junge Marke zu
   zerfasern."

   Die Erweiterung war handwerklich sauber gerechnet – gleiche empfundene
   Helligkeit, gemessene Kontraste, getrennte Reviere – und trotzdem falsch.
   Sechs Farben machen aus einer Marke sechs Marken. Was bleibt, sind die drei
   Schichten, die es vorher gab:
     Marke     Graphit/Platin  – Logo, Wortmarke, Fliesstext
     Zustand   Gruen/Rot/Bernstein – nur an Zahlen und Zustaenden
     Bedienung Blau            – nur Verweise und Fokusrahmen */

}

/* Dunkel per Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root {
    --graphit:      #F5F5F7;
    --grau:         #98989D;
    /* Nachgemessen: #6E6E73 erreichte auf Schwarz nur 4,14:1. */
    --grau-leise:   #86868B;
    --platin:       #000000;
    --karte:        #1C1C1E;
    --karte-hoch:   #242428;
    --haarlinie:    #38383A;
    --haarlinie-fein: rgba(255, 255, 255, .07);

    --gewinn:       #30D158;
    --verlust:      #FF453A;
    --achtung:      #FF9F0A;
    --fokus:        #0A84FF;
    --fokus-leise:  rgba(10, 132, 255, .14);
    --fokus-glut:   rgba(10, 132, 255, .40);

    --grund:        #000000;
    --grund-tief:   #0A0A0C;
    --tinte:        var(--graphit);
    --tinte-leise:  var(--grau);
    --marke:        var(--graphit);

  }
}

/* Umschalter am Wurzelelement gewinnt in beide Richtungen */
:root[data-theme="dark"] {
  --graphit:      #F5F5F7;
  --grau:         #98989D;
  --grau-leise:   #86868B;
  --platin:       #000000;
  --karte:        #1C1C1E;
  --karte-hoch:   #242428;
  --haarlinie:    #38383A;
  --haarlinie-fein: rgba(255, 255, 255, .07);
  --gewinn:       #30D158;
  --verlust:      #FF453A;
  --achtung:      #FF9F0A;
  --fokus-leise:  rgba(10, 132, 255, .14);
  --fokus-glut:   rgba(10, 132, 255, .40);
  --grund:        #000000;
  --grund-tief:   #0A0A0C;
  --tinte:        var(--graphit);
  --tinte-leise:  var(--grau);
  --marke:        var(--graphit);
  color-scheme: dark;

  /* GEMESSEN AM 04.08.2026: --fokus fehlte in genau diesem Block.
     Wer ein helles System hat und per Umschalter auf dunkel geht, behielt
     das helle Blau #0B69D4 auf schwarzem Grund: 3,99:1 statt 5,76:1.
     farben.mjs konnte das nie finden, weil es die data-theme-Bloecke
     gar nicht einliest. Beides ist jetzt behoben. */
  --fokus:        #0A84FF;

}

:root[data-theme="light"] {
  --graphit:      #1D1D1F;
  --grau:         #6E6E73;
  --grau-leise:   #64646A;
  --platin:       #F5F5F7;
  --karte:        #FFFFFF;
  --karte-hoch:   #FFFFFF;
  --haarlinie:    #D2D2D7;
  --haarlinie-fein: rgba(0, 0, 0, .06);
  --gewinn:       #127A42;
  --verlust:      #C62A22;
  --achtung:      #8A5300;
  --fokus:        #0B69D4;
  --fokus-leise:  rgba(11, 105, 212, .10);
  --fokus-glut:   rgba(11, 105, 212, .28);
  --grund:        var(--platin);
  --grund-tief:   #EBEBF0;
  --tinte:        var(--graphit);
  --tinte-leise:  var(--grau);
  --marke:        var(--graphit);
  color-scheme: light;

}


/* --- 2 · Grundlagen ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--satz);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .5s var(--schnell), color .5s var(--schnell);
}

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

::selection {
  background: var(--fokus);
  color: #fff;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.028em;
  text-wrap: balance;
  line-height: 1.06;
}

p { margin: 0; text-wrap: pretty; }


/* --- 3 · Typografische Stufen -------------------------------------------- */

.riese {
  font-size: clamp(2.9rem, 9.5vw, 7.2rem);
  letter-spacing: -.045em;
  line-height: .95;
  font-weight: 600;
}

.gross {
  font-size: clamp(2.1rem, 5.4vw, 3.9rem);
  letter-spacing: -.036em;
  line-height: 1.03;
}

.mittel {
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  letter-spacing: -.026em;
  line-height: 1.15;
}

.fuehrung {
  font-size: clamp(1.14rem, 2.1vw, 1.42rem);
  line-height: 1.5;
  color: var(--tinte-leise);
  letter-spacing: -.014em;
  font-weight: 400;
}

.klein   { font-size: .94rem; line-height: 1.5; }
.winzig  { font-size: .81rem; line-height: 1.45; }

/* Das Etikett. Mono, gesperrt, Grossbuchstaben. Kennzeichnet jeden
   Abschnitt und jeden Bereich. Traegt die Marke durch die Seite. */
.etikett {
  color: var(--bereich);
}

/* Das Stufenzeichen vor dem Etikett nimmt die Farbe mit, weil es
   currentColor benutzt. Es darf dabei kraeftiger stehen als in Grau. */
.bereich-raum .etikett::before {
  opacity: .85;
}

/* Der Abschnittstrenner. Die Stufe kommt aus der Bildmarke, hier traegt
   sie die Farbe des Bereichs. */
.bereich-raum .stufenlinie path {
  stroke: var(--bereich);
  opacity: .5;
}

/* Ein Schimmer im Kopfbereich, sehr zurueckhaltend. Er faerbt keine Flaeche
   ein, sondern legt nur einen weichen Verlauf hinter die Ueberschrift.
   Deckkraft bewusst niedrig: Die Schrift darueber muss ihren gemessenen
   Kontrast behalten. */
.bereich-raum .buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, var(--bereich-leise), transparent 62%);
  z-index: 0;
}
.bereich-raum .buehne-inhalt { position: relative; z-index: 1; }

/* Bei reduzierter Bewegung bleibt alles, wie es ist: Farbe ist keine
   Bewegung. Nichts abzuschalten. */

.etikett {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

/* Die Stufe im Kleinformat, aus drei Strichen gebaut: unten links
   waagerecht, in der Mitte senkrecht hoch, oben rechts waagerecht
   weiter. Genau die Bewegung der Bildmarke. */
.etikett::before {
  content: "";
  width: 16px;
  height: 8px;
  flex: none;
  transform: translateY(-1px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%    1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%    1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.5px  100%  no-repeat;
  opacity: .55;
}

/* Zahlen immer in Mono mit gleichmaessiger Breite */
.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-weight: 500;
}


/* --- 4 · Rumpf und Abschnitte -------------------------------------------- */

.rumpf { width: var(--breite-voll); margin-inline: auto; }
.rumpf-weit { width: var(--breite-weit); margin-inline: auto; }

/* Lesetext läuft NICHT in einer eigenen, zentrierten Spalte. Er beginnt
   an derselben linken Kante wie alle Raster und ist nur schmaler. Sonst
   springt die Seite beim Scrollen zwischen zwei linken Rändern hin und
   her, was bei dieser strengen Gestaltung sofort auffällt. */
.rumpf-text {
  width: var(--breite-voll);
  margin-inline: auto;
}

.rumpf-text > * { max-width: 68ch; }

/* Die Ausnahme: bewusst mittig gesetzte Abschnitte */
.rumpf-text.mitte { text-align: center; }
.rumpf-text.mitte > * { margin-inline: auto; }

section { position: relative; }

.abschnitt {
  padding-block: clamp(64px, 8vw, 112px);
}

/* Der Streifen um eine Stufenlinie. Er braucht Luft, aber deutlich
   weniger als ein voller Abschnitt, sonst zerfällt die Seite in
   zusammenhanglose Inseln. */
.abschnitt-eng { padding-block: clamp(22px, 3vw, 40px); }

/* Ein Abschnitt, der unmittelbar vor einer Stufenlinie endet, zieht sein
   unteres Polster zurück. Sonst addieren sich beide Abstände zu einem
   Loch von über 200 Bildpunkten, und die Seite zerfällt in Inseln. */
.abschnitt:has(+ .abschnitt-eng) { padding-bottom: clamp(30px, 4vw, 56px); }


/* --- 5 · Die Stufenlinie -------------------------------------------------
   Der Abschnittstrenner. Kommt direkt aus der Bildmarke: eine Linie, die
   nicht gerade durchlaeuft, sondern einmal die Stufe nach oben macht.
   ------------------------------------------------------------------------ */

.stufenlinie {
  height: 34px;
  width: 100%;
  color: var(--haarlinie);
  overflow: visible;
}

.stufenlinie path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--laenge, 1200);
  stroke-dashoffset: 0;
}

.js .stufenlinie path { stroke-dashoffset: var(--laenge, 1200); }

.js .stufenlinie.sichtbar path {
  animation: linie-zeichnen 1.5s var(--stufe-kurve) forwards;
}

@keyframes linie-zeichnen {
  to { stroke-dashoffset: 0; }
}


/* --- 6 · Der Auftritt beim Scrollen --------------------------------------
   Das Kernmotiv: ein Element liegt tief und springt eine Stufe hoch,
   sobald es in den Blick kommt.
   ------------------------------------------------------------------------ */

/* WICHTIG: Das Verstecken greift nur, wenn JavaScript läuft. Ohne
   JavaScript ist die Seite vollständig sichtbar statt leer. Die Klasse
   setzt ein winziges Skript im Kopf der Seite, deshalb blitzt nichts auf. */
.js [data-auftritt] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity   var(--stufe-zeit) var(--stufe-kurve),
    transform var(--stufe-zeit) var(--stufe-kurve),
    filter    var(--stufe-zeit) var(--stufe-kurve);
  filter: blur(6px);
  will-change: opacity, transform;
}

.js [data-auftritt].da {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Variante: von der Seite */
.js [data-auftritt="seite"]        { transform: translate3d(-22px, 0, 0); }
.js [data-auftritt="seite-rechts"] { transform: translate3d(22px, 0, 0); }

/* ACHTUNG: Eine seitliche Startverschiebung lässt das Element überstehen,
   solange die Animation noch nicht gelaufen ist. Auf schmalen Schirmen
   erzeugt das eine Querscroll-Leiste. Dort wird deshalb von unten
   eingeblendet statt von der Seite. Nebenbei ist das auch richtiger:
   einspaltig gibt es kein links und rechts mehr. */
@media (max-width: 780px) {
  .js [data-auftritt="seite"],
  .js [data-auftritt="seite-rechts"] { transform: translate3d(0, 22px, 0); }
}
.js [data-auftritt="ruhig"]        { transform: none; filter: none; }
.js [data-auftritt="skala"]        { transform: scale(.965); filter: blur(4px); }

/* Zeilenweiser Aufstieg fuer grosse Ueberschriften */
.zeile-huelle { display: block; overflow: hidden; }

.js .zeile {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--stufe-kurve);
  will-change: transform;
}

.js .da .zeile, .js .zeile.da { transform: none; }


/* --- 7 · Kopfzeile -------------------------------------------------------- */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: 14px;
  transition: transform .45s var(--schnell), background .35s, backdrop-filter .35s,
              border-color .35s, padding .35s var(--schnell);
  border-bottom: 1px solid transparent;
}

.kopf.geheftet {
  background: color-mix(in srgb, var(--grund) 78%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: var(--haarlinie-fein);
  padding-block: 9px;
}

.kopf.versteckt { transform: translateY(-104%); }

.kopf-innen {
  width: var(--breite-weit);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Die Marke in der Kopfzeile */
.marke-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--marke);
  flex: none;
}

.marke-link .bildmarke { width: 26px; height: 26px; }

.wortmarke {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.028em;
  white-space: nowrap;
}

.wortmarke .punkt-ai {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -.02em;
}

.kopf-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-punkt {
  position: relative;
  padding: 7px 13px;
  font-size: .88rem;
  color: var(--tinte-leise);
  border-radius: var(--r-klein);
  transition: color .25s, background .25s;
  white-space: nowrap;
}

.nav-punkt:hover { color: var(--tinte); background: var(--haarlinie-fein); }
.nav-punkt[aria-current="page"] { color: var(--tinte); font-weight: 500; }

.nav-punkt[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 1px;
  height: 1.5px;
  background: var(--fokus);
  border-radius: 2px;
}

/* Umschalter Hell und Dunkel */
.themenschalter {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--haarlinie);
  background: transparent;
  color: var(--tinte-leise);
  border-radius: var(--r-rund);
  cursor: pointer;
  transition: color .25s, border-color .25s, transform .25s var(--schnell);
}

.themenschalter:hover { color: var(--tinte); border-color: var(--tinte-leise); transform: rotate(18deg); }
.themenschalter svg { width: 15px; height: 15px; }
.themenschalter .sonne { display: none; }
:root[data-theme="dark"] .themenschalter .sonne,
:root[data-theme="dark"] .themenschalter .mond { display: revert; }

/* Menueknopf fuer schmale Bildschirme */
/* ══ DIE DREI SEITENFORMEN DER UNTERSEITEN ═══════════════════════════════
   Sie unterscheiden sich nicht nur im Inhalt, sondern im SATZBILD. Wer eine
   Unterseite ueberfliegt, soll an der Form erkennen, was ihn erwartet.

   Mikes Einwand vom 04.08.2026, der das ausgeloest hat: „Ich find auch nicht
   cool, dass Sie den Ablauf von jeder einzelnen Seite gleich gemacht hast …
   das ist ja alles gleich."
   ------------------------------------------------------------------------ */

.unter-kopf .etikett a { color: inherit; text-decoration: none; }
.unter-kopf .etikett a:hover { color: var(--fokus); }
.unter-these { font-size: clamp(2.1rem, 5.6vw, 3.5rem); max-width: 18ch; }

.unter-abschnitt { margin-top: 52px; }
.unter-abschnitt:first-child { margin-top: 40px; }
.unter-h2 { font-size: 1.24rem; display: flex; align-items: baseline; gap: .7em; }
.unter-nr {
  font-family: var(--mono); font-size: .66em; font-weight: 500;
  color: var(--tinte-leise); flex: none;
}
.unter-abschnitt .fliess { margin-top: 12px; }
.unter-abschnitt .bereich-liste { margin-top: 14px; }

.unter-kasten {
  margin-top: 40px; padding: 22px 24px;
  border: 1px solid var(--haarlinie); border-radius: var(--r-innen);
  background: var(--karte);
}
.unter-kasten p:last-child { margin: 10px 0 0; color: var(--tinte-leise); }

.unter-tafel { overflow-x: auto; margin-top: 16px; }
.unter-tafel table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.unter-tafel td {
  padding: 10px 16px 10px 0; vertical-align: top;
  border-bottom: 1px solid var(--haarlinie);
}
.unter-tafel td:first-child { font-weight: 600; width: 34%; }

/* ── Form 1 · WERKSCHAU ──────────────────────────────────────────────────
   Ein Register. Durchlaufende Ziffern ueber die Gruppengrenzen hinweg, enge
   Spalten, jede Zeile einzeilig. Die letzte Ziffer unten ist die Zahl, die
   oben im Kopf steht. */

.unter-form-werkschau .rumpf-text { --breite-text: min(1000px, 100% - 48px); }

.werk-register { margin-top: 18px; display: grid; gap: 30px 40px; }
@media (min-width: 720px)  { .werk-register { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .werk-register { grid-template-columns: 1fr 1fr 1fr; } }

.werk-gruppe { break-inside: avoid; }
.werk-gruppentitel {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-leise); font-weight: 500;
  padding-bottom: 7px; border-bottom: 1px solid var(--haarlinie); margin: 0;
}
.werk-liste { list-style: none; margin: 9px 0 0; padding: 0; }
.werk-liste li {
  display: flex; gap: .8em; align-items: baseline;
  font-size: .91rem; line-height: 1.45; padding: 4px 0;
}
.werk-nr {
  font-family: var(--mono); font-size: .74em; color: var(--tinte-leise);
  flex: none; font-variant-numeric: tabular-nums;
}

/* ── Form 2 · EIN FALL ───────────────────────────────────────────────────
   Eine Spalte, eine Zeitachse am Rand, viel Weissraum. Liest sich wie ein
   fortlaufender Bericht. Keine Spalten, keine Kacheln. */

.unter-form-fall .rumpf-text { --breite-text: min(660px, 100% - 48px); }
.unter-form-fall .unter-abschnitt { margin-top: 74px; }

.fall-etappen { list-style: none; margin: 22px 0 0; padding: 0 0 0 34px; position: relative; }
.fall-etappen::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--haarlinie);
}
.fall-etappen > li { position: relative; margin-bottom: 46px; }
.fall-etappen > li:last-child { margin-bottom: 0; }
.fall-etappen > li::before {
  content: ""; position: absolute; left: -34px; top: .55em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--grund); border: 1.5px solid var(--tinte-leise);
}
.fall-etappen .nr {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  color: var(--tinte-leise); display: block; margin-bottom: 4px;
}
.fall-etappen h3 { font-size: 1.04rem; font-weight: 600; margin: 0 0 7px; }
.fall-etappen p { margin: 0; color: var(--tinte-leise); }

/* ── Form 3 · WAS GEHT UND WAS NICHT ─────────────────────────────────────
   Die Gegenueberstellung steht ganz oben, VOR allem Moeglichen. Beide Spalten
   exakt gleich breit und in derselben Schriftstaerke, damit keine Seite
   typografisch bevorzugt wirkt. Rahmenlinien statt Kartenflaechen. */

.unter-form-grenzen .rumpf-text { --breite-text: min(820px, 100% - 48px); }

.grenz-tafel { overflow-x: auto; margin-top: 16px; }
.grenz-tafel table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.grenz-tafel td {
  width: 50%; padding: 13px 18px; vertical-align: top;
  border: 1px solid var(--haarlinie); font-weight: 400;
}
.grenz-tafel td:first-child { border-right: 0; }
.grenz-tafel td:last-child { border-left: 0; color: var(--tinte-leise); }
.grenz-tafel sup {
  font-family: var(--mono); font-size: .62em; color: var(--tinte-leise);
  margin-right: .5em; vertical-align: super;
}
.grenz-tafel thead th {
  padding: 0 18px 10px; text-align: left; font-weight: 400;
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinte-leise);
}

/* Schmaler Bildschirm: gestapelt statt seitwaerts.

   Vorher stand die rechte Spalte bei 390 Punkten ausserhalb des Bildes, weil
   der Kasten `overflow-x: auto` traegt. Genau auf den Seiten, deren Zweck die
   Gegenueberstellung ist. Gefunden auf einem Bildschirmfoto, nicht von einer
   Pruefung: Ein Kasten, der seitwaerts scrollt, meldet keinen Fehler. */
@media (max-width: 640px) {
  .grenz-tafel { overflow-x: visible; }
  .grenz-tafel table,
  .grenz-tafel tbody,
  .grenz-tafel tr,
  .grenz-tafel td { display: block; width: auto; }
  .grenz-tafel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .grenz-tafel tr { border: 1px solid var(--haarlinie); margin-bottom: 10px; }
  .grenz-tafel td { border: 0; padding: 12px 15px; }
  .grenz-tafel td:first-child { border-bottom: 1px solid var(--haarlinie); }
  .grenz-tafel td::before {
    content: attr(data-spalte); display: block; margin-bottom: 5px;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .09em;
    text-transform: uppercase; color: var(--tinte-leise);
  }
}

.grenz-begruendungen { list-style: none; margin: 18px 0 0; padding: 0; }
.grenz-begruendungen > li {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 0 .6em;
  padding: 15px 0; border-bottom: 1px solid var(--haarlinie-fein);
}
.grenz-begruendungen .nr {
  font-family: var(--mono); font-size: .74rem; color: var(--tinte-leise);
  padding-top: .2em; font-variant-numeric: tabular-nums;
}
/* GEFUNDEN BEIM ANSEHEN, nicht beim Messen: Ein Raster mit zwei Spalten und
   DREI Kindern (Ziffer, Ueberschrift, Absatz) setzt das dritte Kind wieder in
   die erste Spalte - und die ist 2,4em breit. Der Begruendungstext lief mit
   einem Wort je Zeile herunter. Alle Prueflaeufe waren dabei gruen: Es war
   kein Fehler, es war nur haesslich. */
.grenz-begruendungen h3,
.grenz-begruendungen p { grid-column: 2; }
.grenz-begruendungen h3 { font-size: .97rem; font-weight: 600; margin: 0 0 5px; }
.grenz-begruendungen p { margin: 0; font-size: .91rem; color: var(--tinte-leise); }

/* ── Die Nachbarn am Fuss jeder Unterseite ─────────────────────────────── */

.unter-nachbarn { margin-top: 20px; display: grid; gap: 12px; }
@media (min-width: 720px) { .unter-nachbarn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.unter-nachbar {
  display: block; padding: 18px 20px; text-decoration: none; color: inherit;
  border: 1px solid var(--haarlinie); border-radius: var(--r-innen);
  background: var(--karte); position: relative;
  transition: border-color .22s var(--schnell), transform .22s var(--schnell);
}
.unter-nachbar:hover { border-color: var(--tinte-leise); transform: translateY(-2px); }
.unter-nachbar b { display: block; font-size: 1rem; font-weight: 600; }
.unter-nachbar span {
  display: block; margin-top: 6px; font-size: .87rem;
  color: var(--tinte-leise); line-height: 1.5;
}
.unter-nachbar .pfeil { position: absolute; top: 18px; right: 18px; width: 14px; height: 14px; opacity: .4; }

.fuss-hinweis { color: var(--tinte-leise); font-size: .82rem; margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .unter-nachbar { transition: none; }
  .unter-nachbar:hover { transform: none; }
}

/* ── Die zweite Ebene: das Mega-Menue ────────────────────────────────────
   Eine Flaeche ueber die volle Breite, die unter der Leiste aufgeht.

   OHNE JAVASCRIPT BEDIENBAR: Sie oeffnet ueber :hover UND :focus-within.
   Damit erreicht sie auch die Tastatur, und sie funktioniert auf einer Seite,
   deren Skript nicht geladen hat. Der Motor setzt zusaetzlich .offen, damit
   ein Klick auf dem Telefon dasselbe tut.

   Der Kopf traegt z-index 90 und setzt kein overflow - die Flaeche darf also
   herausragen. Nachgesehen am 04.08.2026. */

.nav-gruppe { position: static; display: flex; align-items: center; }

/* Der Ausloeser MUSS ein <button> sein: Der Motor schliesst das Menue bei
   einem Klick auf irgendein <a> in der Leiste. Ein <a> als Aufklapper klappte
   auf und im selben Wimpernschlag wieder zu. */
.nav-auf {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: .38em;
  padding: 7px 13px; border-radius: var(--r-rund);
  font-size: .88rem; white-space: nowrap;
}
.nav-auf::after {
  content: ""; width: 5px; height: 5px; flex: none;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .5; transition: transform .3s var(--schnell), opacity .3s;
}
.nav-gruppe:hover > .nav-auf::after,
.nav-auf[aria-expanded="true"]::after {
  opacity: 1; transform: rotate(-135deg) translate(-2px, -2px);
}

.nav-unter {
  position: absolute; left: 0; right: 0; top: 100%;
  background: color-mix(in srgb, var(--grund) 97%, transparent);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--haarlinie);
  padding: 30px 0 34px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .26s var(--schnell), transform .26s var(--schnell),
              visibility 0s linear .26s;
  z-index: 5;
}
.nav-gruppe:hover > .nav-unter,
.nav-gruppe:focus-within > .nav-unter,
.nav-unter.offen {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}

.nav-unter-innen {
  width: var(--breite-voll); margin-inline: auto;
  display: grid; gap: 4px 34px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nav-unter-kopf {
  grid-column: 1 / -1; margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.nav-unter-kopf .etikett { margin: 0; }
.nav-unter-kopf a { color: var(--fokus); font-size: .84rem; text-decoration: none; }
.nav-unter-kopf a:hover { text-decoration: underline; }

.unter-punkt {
  display: block; padding: 11px 13px; border-radius: var(--r-innen);
  text-decoration: none; color: inherit;
  transition: background .2s var(--schnell);
}
.unter-punkt:hover { background: var(--karte); }
.unter-punkt b { display: block; font-size: .95rem; font-weight: 600; }
.unter-punkt span {
  display: block; margin-top: 2px; font-size: .82rem;
  color: var(--tinte-leise); line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .nav-unter { transition: none; transform: none; }
  .nav-auf::after { transition: none; }
}

.menue-knopf {
  position: relative;
  display: none;
  flex: none;
  width: 34px; height: 34px;
  place-items: center;
  border: 1px solid var(--haarlinie);
  background: transparent;
  color: var(--tinte);
  border-radius: var(--r-rund);
  cursor: pointer;
}

/* GEMESSEN: Als Raster zog der Knopf seine drei Zeilen auf die volle
   Hoehe auseinander, die Balken standen 11,3 statt 4 Punkte auseinander.
   Die Drehung rechnete mit 5,5 Punkten und schob sie nur zur Haelfte
   zusammen: Statt eines Kreuzes stand dort ein Pfeil nach rechts.

   Jetzt liegen die Balken absolut uebereinander. Damit stimmt der Weg
   zum Kreuz unabhaengig von der Knopfhoehe. */
.menue-knopf span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px; height: 1.5px;
  margin-left: -7.5px;
  margin-top: -0.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .34s var(--stufe-kurve), opacity .2s;
}

.menue-knopf span:nth-child(1) { transform: translateY(-5px); }
.menue-knopf span:nth-child(2) { transform: translateY(0); }
.menue-knopf span:nth-child(3) { transform: translateY(5px); }

/* Der Versatz aus der Grundstellung muss AUFGEHOBEN werden, nicht
   weggelassen: Der obere Balken steht bei -5 und muss +5 wandern, damit
   beide in der Mitte zusammenfinden. Ohne das drehen sie sich zwar, aber
   auf ihrer eigenen Hoehe, und es entsteht ein Pfeil statt eines Kreuzes. */
.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }


/* --- 7b · Der Fortschritt als Treppe -------------------------------------
   Kein gleitender Balken: der Fortschritt springt in festen Stufen, wie
   das Markenzeichen. Zwischen zwei Stufen steht er still.
   ------------------------------------------------------------------------ */

.fortschritt {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 99;
  pointer-events: none;
  background: transparent;
}

.fortschritt span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(to right,
              color-mix(in srgb, var(--fokus) 40%, transparent), var(--fokus));
  /* Kurz und hart: der Sprung soll als Sprung erkennbar sein */
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .fortschritt { display: none; }
}


/* --- 8 · Der Kopfbereich mit Leinwand ------------------------------------ */

.buehne {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.buehne-leinwand {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;

  /* Die Fläche tritt dort zurück, wo der Text steht. Ohne das läuft die
     Schrift durch die Striche und wird schlecht lesbar. Der Verlauf ist
     bewusst weich, damit keine sichtbare Kante entsteht. */
  /* Zwei Masken übereinander: eine blendet nach links aus, damit der Text
     frei steht, die zweite hält den obersten Streifen frei, damit keine
     Linie quer durch die Navigation läuft. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 26%,
                    rgba(0,0,0,.9) 52%, #000 70%),
    linear-gradient(to bottom, transparent 0, #000 96px);
          mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 26%,
                    rgba(0,0,0,.9) 52%, #000 70%),
    linear-gradient(to bottom, transparent 0, #000 96px);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Auf schmalen Bildschirmen steht der Text über der ganzen Breite,
   dort blendet die Fläche stattdessen nach unten aus. */
@media (max-width: 760px) {
  /* Sanfter als zuvor: Mit dem harten Auslauf bei 62 Prozent wirkte die
     untere Haelfte der Buehne auf dem Telefon leer. */
  .buehne-leinwand {
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 74%, transparent 96%);
            mask-image:
      linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 74%, transparent 96%);
  }
}

/* Weicher Auslauf nach unten, damit die Leinwand nicht abgeschnitten wirkt */
.buehne::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34vh;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--grund) 88%);
  pointer-events: none;
}

.buehne-inhalt {
  width: var(--breite-weit);
  margin-inline: auto;
  padding-block: 150px 108px;
  position: relative;
  z-index: 1;
}

.buehne-these {
  max-width: 15ch;
  margin-top: 22px;
}

.buehne-fuehrung {
  max-width: 46ch;
  margin-top: 26px;
}

.buehne-fuss {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Hinweis zum Weiterscrollen */
.scroll-wink {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--tinte-leise);
  z-index: 1;
  pointer-events: none;
}

.scroll-wink .balken {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, transparent, currentColor);
  transform-origin: top;
  animation: wink 2.4s var(--schnell) infinite;
}

@keyframes wink {
  0%, 100% { transform: scaleY(.34); opacity: .3; }
  50%      { transform: scaleY(1);   opacity: .9; }
}


/* --- 9 · Knoepfe ---------------------------------------------------------- */

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-rund);
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: -.012em;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--schnell), box-shadow .3s, background .3s,
              color .3s, border-color .3s;
  isolation: isolate;
}

.knopf-voll {
  background: var(--tinte);
  color: var(--grund);
}

.knopf-voll:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--tinte) 55%, transparent);
}

.knopf-linie {
  border-color: var(--haarlinie);
  color: var(--tinte);
  background: transparent;
}

.knopf-linie:hover {
  border-color: var(--tinte);
  transform: translateY(-2px);
}

/* Solange der Zeiger auf dem Knopf liegt, folgt er ihm schnell. Ohne das
   hinkt er der Maus sichtbar hinterher. */
.knopf.magnet { transition: transform .14s var(--schnell), box-shadow .3s, background .3s; }

.knopf:active { transform: translateY(0) scale(.985); }

/* Der Pfeil springt die Stufe */
.knopf .pfeil {
  width: 15px; height: 15px;
  transition: transform .34s var(--stufe-kurve);
}
.knopf:hover .pfeil { transform: translate(3px, -3px); }


/* --- 10 · Der Beleg -------------------------------------------------------
   Das Herzstueck. Jede Zahl auf dieser Seite hat eine Quelle. Antippen
   klappt den Messbefehl auf.
   ------------------------------------------------------------------------ */

.beleg {
  position: relative;
  display: inline;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

.beleg-wert {
  position: relative;
  display: inline-block;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--fokus) 55%, transparent);
  transition: color .25s, border-color .25s;
}

.beleg:hover .beleg-wert,
.beleg[aria-expanded="true"] .beleg-wert {
  color: var(--fokus);
  border-bottom-color: var(--fokus);
}

/* Die aufklappbare Quelle */
/* GEMESSEN: Als reines Grid ist dieser Kasten Block-Level und reisst den
   Fliesstext um, auch wenn er zugeklappt null Punkte hoch ist. Bei 1280
   Punkten blieben 917 Punkte der Zeile ungenutzt. Zugeklappt verhaelt er
   sich deshalb wie ein Zeichen im Text, erst beim Aufklappen wird er zum
   eigenen Block. */
.beleg-quelle {
  display: inline grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--stufe-kurve), opacity .3s, margin .5s var(--stufe-kurve);
  opacity: 0;
  margin-top: 0;
}

.beleg-quelle.offen {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

/* Im Markup stehen hier <span>, weil die Belege in Fließtext-Absätzen
   liegen. Der Selektor muss deshalb auf jedes Kind passen, nicht auf div.
   Und display:block ist Pflicht: an einem inline-Element wirkt weder
   overflow noch max-width, die Karte sprengte sonst das Layout. */
.beleg-quelle > * { overflow: hidden; display: block; }

.quelle-karte {
  display: block;
  max-width: 100%;
  font-family: var(--mono);
  font-size: .77rem;
  line-height: 1.65;
  background: var(--grund-tief);
  border: 1px solid var(--haarlinie-fein);
  border-left: 2px solid var(--fokus);
  border-radius: var(--r-klein);
  padding: 11px 14px;
  color: var(--tinte-leise);
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

/* Der Befehl selbst darf nicht umbrechen, sonst stimmt er nicht mehr.
   Er scrollt innerhalb seiner Karte. */
.quelle-karte .befehl { display: inline-block; }

.quelle-karte .befehl { color: var(--tinte); }
.quelle-karte .kommentar { color: var(--grau-leise); }

/* Solange der Befehl getippt wird, blinkt dahinter ein Eingabezeichen. */
.quelle-karte .befehl.tippt::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .08em;
  background: var(--fokus);
  vertical-align: text-bottom;
  animation: blinken .68s steps(1) infinite;
}

@keyframes blinken {
  0%, 50%   { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}


/* --- 11 · Die Messtafel --------------------------------------------------- */

.messtafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--haarlinie-fein);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
}

@media (min-width: 560px) {
  .messtafel { grid-template-columns: repeat(auto-fit, minmax(228px, minmax(0, 1fr))); }
}

.messfeld {
  background: var(--karte);
  padding: 26px 24px 22px;
  position: relative;
  transition: background .3s;
}

.messfeld:hover { background: var(--karte-hoch); }

.messfeld-wert {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  display: block;
}

/* Die Ziffern schieben sich einzeln herein. Der angezeigte Wert ist dabei
   immer der richtige, es zählt nichts hoch. Begründung siehe motor.js. */
.ziffer-huelle {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.js .ziffer {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .78s var(--stufe-kurve), opacity .5s var(--stufe-kurve);
}

.js [data-zaehl].da .ziffer {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .ziffer { transform: none; opacity: 1; }
}

.messfeld-einheit {
  font-size: .48em;
  font-weight: 500;
  color: var(--tinte-leise);
  margin-left: .18em;
  letter-spacing: 0;
}

.messfeld-name {
  margin-top: 9px;
  font-size: .93rem;
  color: var(--tinte);
  font-weight: 500;
}

.messfeld-bei {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--tinte-leise);
  letter-spacing: -.01em;
}


/* --- 12 · Die vier Bereiche ---------------------------------------------- */

/* Zweispaltiger Block. Die Untergrenze ist ausdrücklich 0 und nicht der
   Inhalt: sonst bläht ein langes Wort die Spalte über die Seitenbreite
   hinaus auf, und der Text steht auf dem Telefon seitlich über. Genau
   das ist hier passiert und war ohne Messung nicht zu sehen, weil
   overflow-x am Rumpf es verdeckt hat. */
.zweispalt {
  display: grid;
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 780px) {
  .zweispalt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bereiche {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
  .bereiche { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), minmax(0, 1fr))); }
}

/* Bei genau vier Karten würde die vierte allein in einer Zeile stehen.
   Zwei mal zwei ist ausgewogen und gibt jeder Karte mehr Raum. */
@media (min-width: 880px) {
  .bereiche-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bereich {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
  isolation: isolate;
  transition: transform .55s var(--stufe-kurve), border-color .4s, box-shadow .55s var(--stufe-kurve);
  transform-style: preserve-3d;
}

.bereich::before {
  /* Lichtschein, der der Maus folgt */
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(
    340px circle at var(--maus-x, 50%) var(--maus-y, 0%),
    var(--fokus-leise), transparent 62%);
  opacity: 0;
  transition: opacity .45s;
}

.bereich:hover {
  border-color: color-mix(in srgb, var(--fokus) 34%, var(--haarlinie));
  box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--tinte) 40%, transparent);
}

.bereich:hover::before { opacity: 1; }

.bereich-nr {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--tinte-leise);
  letter-spacing: .1em;
}

.bereich-name {
  margin-top: 14px;
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -.028em;
}

.bereich-satz {
  margin-top: 10px;
  color: var(--tinte-leise);
  font-size: .96rem;
  line-height: 1.5;
}

.bereich-liste {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  font-size: .89rem;
  color: var(--tinte-leise);
}

.bereich-liste li {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

/* Dasselbe Stufenzeichen als Aufzählungspunkt */
.bereich-liste li::before {
  content: "";
  flex: none;
  width: 12px; height: 6px;
  color: var(--fokus);
  transform: translateY(-3px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.3px 100%  no-repeat;
}

.bereich-fuss {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--fokus);
}

.bereich-fuss .pfeil {
  width: 14px; height: 14px;
  transition: transform .34s var(--stufe-kurve);
}

.bereich:hover .bereich-fuss .pfeil { transform: translate(3px, -3px); }

/* Der ganze Kasten ist anklickbar, ohne verschachtelte Links */
.bereich-deckel::after {
  content: "";
  position: absolute;
  inset: 0;
}


/* --- 13 · Kennwerte in Textform ------------------------------------------ */

.kennliste {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.kennzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.kennzeile:first-child { border-top: 1px solid var(--haarlinie-fein); }

.kennzeile dt { color: var(--tinte-leise); font-size: .95rem; margin: 0; }

.kennzeile dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  letter-spacing: -.02em;
}


/* --- 14 · Ablauf in Schritten -------------------------------------------- */

.ablauf {
  counter-reset: schritt;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  position: relative;
}

.schritt {
  position: relative;
  padding: 26px 0 26px 62px;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.schritt:first-child { border-top: 1px solid var(--haarlinie-fein); }

.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0; top: 26px;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--fokus);
  letter-spacing: .06em;
}

/* Die senkrechte Linie, die die Schritte verbindet */
.schritt::after {
  content: "";
  position: absolute;
  left: 12px; top: 46px; bottom: -1px;
  width: 1px;
  background: var(--haarlinie-fein);
}

.schritt:last-child::after { display: none; }

.schritt h3 { font-size: 1.14rem; font-weight: 600; letter-spacing: -.022em; }
.schritt p  { margin-top: 7px; color: var(--tinte-leise); font-size: .96rem; }


/* --- 15 · Abgrenzung: was nicht gemacht wird ----------------------------- */

.grenze {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .grenze { grid-template-columns: repeat(auto-fit, minmax(258px, minmax(0, 1fr))); }
}

.grenzfeld {
  padding: 20px 22px;
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-innen);
  background: var(--karte);
}

.grenzfeld h4 {
  font-size: .99rem;
  display: flex;
  align-items: center;
  gap: 9px;
}

.grenzfeld h4::before {
  content: "";
  width: 13px; height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--verlust);
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 6px 1.5px no-repeat;
  color: var(--verlust);
}

.grenzfeld p { margin-top: 8px; color: var(--tinte-leise); font-size: .9rem; }


/* --- 16 · Zitat und Betonung --------------------------------------------- */

.merksatz {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.16;
  text-wrap: balance;
}

.merksatz em {
  font-style: normal;
  color: var(--fokus);
}


/* --- 17 · Fusszeile ------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--haarlinie-fein);
  padding-block: 64px 40px;
  margin-top: 60px;
}

.fuss-raster {
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  align-items: start;
}

.fuss-spalte h5 {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
}

.fuss-spalte ul { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 9px; }
.fuss-spalte a { color: var(--tinte-leise); font-size: .92rem; transition: color .25s; }
.fuss-spalte a:hover { color: var(--tinte); }

.fuss-unten {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--haarlinie-fein);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--tinte-leise);
}

.fuss-unten .mono { font-family: var(--mono); letter-spacing: -.01em; }


/* --- 18 · Hinweisband ----------------------------------------------------- */

.hinweisband {
  background: color-mix(in srgb, var(--achtung) 12%, var(--grund));
  border-bottom: 1px solid color-mix(in srgb, var(--achtung) 30%, transparent);
  color: var(--tinte);
  font-size: .82rem;
  padding: 9px 0;
  text-align: center;
  position: relative;
  z-index: 95;
}

.hinweisband strong { font-weight: 600; }
.hinweisband .mono { font-family: var(--mono); font-size: .95em; }


/* --- 19 · Bildmarke ------------------------------------------------------- */

.bildmarke {
  color: currentColor;
  flex: none;
}

.bildmarke path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* --- 20 · Schmale Bildschirme -------------------------------------------- */

@media (max-width: 900px) {
  :root {
    --breite-text: min(680px, 100% - 36px);
    --breite-voll: min(1180px, 100% - 36px);
    --breite-weit: min(1400px, 100% - 36px);
  }

    /* ── Die zweite Ebene, schmal ──────────────────────────────────────────
     Hier ist das Untermenue keine Flaeche, sondern eine eingerueckte Liste
     in derselben Spalte. Sie geht NUR auf Klick auf - beim Zeigen waere die
     Tafel sofort zu lang. */
  .nav-gruppe { display: block; }
  .nav-auf {
    width: 100%; justify-content: space-between;
    padding: 13px 12px; font-size: 1.02rem;
    border-bottom: 1px solid var(--haarlinie-fein); border-radius: 0;
  }
  .nav-unter {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; backdrop-filter: none; border: 0; padding: 0;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .34s var(--stufe-kurve);
  }
  .nav-unter.offen { grid-template-rows: 1fr; }
  .nav-unter-innen {
    width: auto; margin: 0; grid-template-columns: 1fr; gap: 0;
    overflow: hidden; padding-left: 14px;
  }
  .nav-unter-kopf { display: none; }
  .unter-punkt { padding: 11px 12px; border-radius: 0;
                 border-bottom: 1px solid var(--haarlinie-fein); }
  .unter-punkt span { display: none; }

  .kopf-nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    padding: 74px 22px 26px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: color-mix(in srgb, var(--grund) 96%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--haarlinie-fein);
    transform: translateY(-102%);
    transition: transform .48s var(--stufe-kurve);
    z-index: -1;
    margin-left: 0;

    /* DIE TEUERSTE FALLE DES UMBAUS, gefunden am 04.08.2026 VOR dem Bauen:
       Diese Tafel hatte kein max-height und kein overflow-y. Ihre Hoehe ergab
       sich allein aus dem Inhalt. Acht Zeilen passten. Sechs aufgeklappte
       Untermenues sind vierundzwanzig Zeilen mehr - die Tafel waere ueber das
       Sichtfeld hinausgewachsen, und weil `.menue-offen body { overflow:
       hidden }` gilt, waere man an die unteren Punkte GAR NICHT MEHR
       HERANGEKOMMEN. */
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .kopf-nav.offen { transform: none; }

  .nav-punkt {
    padding: 13px 12px;
    font-size: 1.02rem;
    border-bottom: 1px solid var(--haarlinie-fein);
    border-radius: 0;
  }

  .nav-punkt[aria-current="page"]::after { display: none; }

  .menue-knopf { display: grid; order: 3; }
  .themenschalter { margin-left: auto; order: 2; }
  .marke-link { order: 1; }

  .fuss-raster { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
  .buehne-inhalt { padding-block: 128px 96px; }
  .schritt { padding-left: 46px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .messfeld { padding: 20px 18px 18px; }
  .bereich  { padding: 24px 22px 22px; }
}


/* --- 21 · Bewegung aus ---------------------------------------------------
   Pflicht. Wer Bewegung abgeschaltet hat, bekommt dieselbe Seite ohne
   Bewegung, nicht eine kaputte.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-auftritt] { opacity: 1; transform: none; filter: none; }
  .js .zeile { transform: none; }
  .js .stufenlinie path { stroke-dashoffset: 0; }
  .stufenlinie path { stroke-dashoffset: 0; }
  .scroll-wink { display: none; }
}


/* --- 22 · Druck ----------------------------------------------------------- */

@media print {
  .kopf, .scroll-wink, .buehne-leinwand, .themenschalter, .menue-knopf { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-auftritt] { opacity: 1; transform: none; filter: none; }
  .buehne { min-height: auto; }
}


/* ==========================================================================
   23 · Neue Bausteine aus dem Textkonzept vom 02.08.2026
   ========================================================================== */

/* --- Die zweite Zeile der Buehne ----------------------------------------
   Traegt den eigentlichen Satz. Deshalb groesser und in voller Tinte,
   nicht im Grauton der uebrigen Fuehrungstexte.
   ------------------------------------------------------------------------ */

.buehne-zweitzeile {
  margin-top: 26px;
  max-width: 22ch;
  font-size: clamp(1.28rem, 2.7vw, 2rem);
  line-height: 1.28;
  letter-spacing: -.022em;
  color: var(--tinte);
  font-weight: 400;
}


/* --- Die Weiche ---------------------------------------------------------
   Zwei Wege statt eines Menues: der Betrieb und der mit der Idee.
   ------------------------------------------------------------------------ */

.weiche {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .weiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.weichenfeld {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 30px 26px;
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--stufe-kurve), border-color .4s,
              box-shadow .5s var(--stufe-kurve);
}

.weichenfeld::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(420px circle at 50% 0%, var(--fokus-leise), transparent 65%);
  opacity: 0;
  transition: opacity .45s;
}

.weichenfeld:hover {
  border-color: color-mix(in srgb, var(--fokus) 40%, var(--haarlinie));
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--tinte) 45%, transparent);
}

.weichenfeld:hover::before { opacity: 1; }

.weichenfeld-nr {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--tinte-leise);
}

.weichenfeld-titel {
  margin-top: 16px;
  font-size: clamp(1.32rem, 2.5vw, 1.72rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.14;
}

.weichenfeld-satz {
  margin-top: 12px;
  color: var(--tinte-leise);
  font-size: .97rem;
  line-height: 1.5;
}

.weichenfeld-fuss {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--fokus);
}

.weichenfeld-fuss .pfeil {
  width: 14px; height: 14px;
  transition: transform .34s var(--stufe-kurve);
}

.weichenfeld:hover .weichenfeld-fuss .pfeil { transform: translate(3px, -3px); }


/* --- Der Rechner --------------------------------------------------------
   Zugleich Arbeitsprobe. Ohne JavaScript stehen die Beispielwerte fertig
   ausgerechnet da, statt eines leeren Kastens.
   ------------------------------------------------------------------------ */

.rechner {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--haarlinie-fein);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
}

@media (min-width: 820px) {
  .rechner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.rechner-regler {
  background: var(--karte);
  padding: clamp(26px, 3.5vw, 38px);
  display: grid;
  gap: 26px;
  align-content: start;
}

.regler-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: .95rem;
  color: var(--tinte-leise);
  margin-bottom: 10px;
  cursor: pointer;
}

.regler-kopf output {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--tinte);
  letter-spacing: -.02em;
}

/* Der Schieberegler. Bewusst gross genug fuer einen Daumen. */
.regler input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.regler input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--haarlinie);
}

.regler input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--haarlinie);
}

.regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10.5px;
  border-radius: 50%;
  background: var(--tinte);
  border: 0;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--tinte) 60%, transparent);
  transition: transform .2s var(--schnell);
}

.regler input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tinte);
  border: 0;
}

.regler input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

.regler input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
}

.rechner-ergebnis {
  background: var(--karte-hoch);
  padding: clamp(26px, 3.5vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
}

.rechner-summe {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 6vw, 3.9rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--tinte);
  display: block;
}

.rechner-satz {
  color: var(--tinte-leise);
  font-size: .96rem;
  line-height: 1.55;
  max-width: 38ch;
}


/* --- Die Gegenliste -----------------------------------------------------
   Behauptung links, Wirklichkeit rechts. Traegt den Abschnitt "Was Ihnen
   gerade verkauft wird" und die vier Zusagen beim Werbespruch.
   ------------------------------------------------------------------------ */

.gegenliste {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.gegenzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.gegenzeile:first-child { border-top: 1px solid var(--haarlinie-fein); }

@media (min-width: 720px) {
  .gegenzeile { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

.gegenzeile dt {
  margin: 0;
  color: var(--tinte);
  font-weight: 500;
  font-size: 1rem;
}

.gegenzeile dd {
  margin: 0;
  color: var(--tinte-leise);
  font-size: .96rem;
  line-height: 1.55;
}


/* --- Die Spruchtafel ----------------------------------------------------- */

.spruchtafel {
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  padding: clamp(30px, 4.5vw, 56px);
}

.spruch {
  letter-spacing: -.04em;
  line-height: 1.02;
}


/* --- Groessere Bereichsueberschrift auf der Startseite -------------------- */

.bereich-gross {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.1;
  margin-top: 16px;
}


/* --- Die Beispielliste auf den Leistungsseiten ---------------------------- */

.beispielgruppen {
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 780px) {
  .beispielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.beispielgruppe h3 {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.beispielgruppe ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.beispielgruppe li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--tinte);
  font-size: .97rem;
  line-height: 1.45;
}

.beispielgruppe li::before {
  content: "";
  flex: none;
  width: 11px; height: 6px;
  color: var(--fokus);
  transform: translateY(-3px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.3px 100%  no-repeat;
}



/* ==========================================================================
   24 · v2 · Auftakt, Enthuellung, Nachlauf
   ========================================================================== */

/* --- Der Auftakt ---------------------------------------------------------
   Kurzer Vorhang beim ersten Besuch. Kein Ladebalken: die Seite ist sofort
   da, hier wird nichts vorgetaeuscht. Er hebt sich wie eine Stufe.
   ------------------------------------------------------------------------ */

.auftakt {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--grund);
  display: grid;
  place-items: center;
  color: var(--marke);
  cursor: pointer;
  transition: transform .78s cubic-bezier(.7, 0, .2, 1);
}

.auftakt.hoch { transform: translateY(-100%); }

.auftakt-marke {
  width: clamp(56px, 8vw, 84px);
  height: auto;
}

@keyframes marke-zeichnen {
  to { stroke-dashoffset: 0; }
}

/* Solange der Vorhang liegt, wird darunter nicht gescrollt */
.auftakt-laeuft body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .auftakt { display: none; }
}


/* --- Enthuellung beim Scrollen -------------------------------------------
   Die Merksaetze hellen sich Wort fuer Wort auf. Die Grundhelligkeit liegt
   bei 22 Prozent und nicht bei null: Ein Satz, der voellig unsichtbar
   beginnt, ist ohne Scrollen nicht lesbar. Das waere schlechter Text, kein
   guter Effekt.
   ------------------------------------------------------------------------ */

.merksatz .wort {
  display: inline-block;
  transition: opacity .22s linear;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .merksatz .wort { opacity: 1 !important; }
}


/* --- Nachlauf beim Scrollen ----------------------------------------------
   Der Motor verschiebt hier die Layout-Kaesten leicht. Die Angabe hilft
   dem Browser, das auf der Grafikkarte zu halten.
   ------------------------------------------------------------------------ */

/* will-change nur dort, wo der Nachlauf wirklich laeuft. Dauerhaft auf
   allen Kaesten gesetzt kostet es Speicher und erzeugt nebenbei eine
   eigene Zeichenebene, deren Rundung die Dokumentbreite um zwei Punkte
   aufblaeht. Der Motor setzt die Klasse, wenn er den Nachlauf einschaltet. */
@media (min-width: 780px) {
  .nachlauf .abschnitt > .rumpf,
  .nachlauf .abschnitt > .rumpf-text,
  .nachlauf .abschnitt > .rumpf-weit { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .abschnitt > .rumpf,
  .abschnitt > .rumpf-text,
  .abschnitt > .rumpf-weit { will-change: auto; transform: none !important; }
}


/* --- Hinweiskarte --------------------------------------------------------
   Ein Weg aus der Seite heraus, ohne die Gestaltung zu unterbrechen.
   ------------------------------------------------------------------------ */

.hinweiskarte {
  padding: 26px 28px;
  border-radius: var(--r-gross);
  border: 1px solid var(--haarlinie-fein);
  background: var(--karte);
  max-width: 68ch;
}


/* ==========================================================================
   25 · v2 · Bewegung ueberall
   Jede einzelne Regung bleibt dezent. Viele dezente Bewegungen wirken
   reich, wenige kraeftige wirken billig.
   ========================================================================== */

/* --- Listen laufen ein ---------------------------------------------------
   Betrifft die grossen Beispiellisten, die Aufzaehlungen im Lieferumfang
   und die Punkte auf den Karten. Reines CSS, kostet keine Rechenzeit.
   ------------------------------------------------------------------------ */

.js .beispielgruppe li,
.js .bereich-liste li,
.js .fuss-spalte li {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .5s var(--stufe-kurve), transform .5s var(--stufe-kurve);
}

.js .beispielgruppe.da li,
.js .da .bereich-liste li,
.js .bereich-liste.da li,
.js .fuss.da li,
.js .bereich:hover .bereich-liste li {
  opacity: 1;
  transform: none;
}

/* Gestaffelt, damit sie nacheinander kommen statt als Block */
.js .beispielgruppe li:nth-child(1),  .js .bereich-liste li:nth-child(1)  { transition-delay:  30ms; }
.js .beispielgruppe li:nth-child(2),  .js .bereich-liste li:nth-child(2)  { transition-delay:  75ms; }
.js .beispielgruppe li:nth-child(3),  .js .bereich-liste li:nth-child(3)  { transition-delay: 120ms; }
.js .beispielgruppe li:nth-child(4),  .js .bereich-liste li:nth-child(4)  { transition-delay: 165ms; }
.js .beispielgruppe li:nth-child(5),  .js .bereich-liste li:nth-child(5)  { transition-delay: 210ms; }
.js .beispielgruppe li:nth-child(6),  .js .bereich-liste li:nth-child(6)  { transition-delay: 255ms; }
.js .beispielgruppe li:nth-child(7)  { transition-delay: 300ms; }
.js .beispielgruppe li:nth-child(n+8) { transition-delay: 345ms; }


/* --- Karten kippen leicht ------------------------------------------------
   Der Zeiger neigt die Karte ein wenig. Sehr flach dosiert: Es soll wie
   ein Blatt Papier wirken, das man anhebt, nicht wie ein Karussell.
   ------------------------------------------------------------------------ */

.bereiche, .weiche { perspective: 1400px; }

.js .bereich.kippbar,
.js .weichenfeld.kippbar {
  transform: rotateX(var(--kipp-x, 0deg)) rotateY(var(--kipp-y, 0deg))
             translate3d(0, var(--heb, 0px), 0);
  transition: transform .5s var(--stufe-kurve);
}

.js .bereich.kippbar.folgt,
.js .weichenfeld.kippbar.folgt {
  /* Waehrend der Zeiger darauf liegt, folgt sie schnell */
  transition: transform .16s var(--schnell);
}


/* --- Die Navigation ------------------------------------------------------
   Der Strich waechst aus der Mitte, statt einfach da zu sein.
   ------------------------------------------------------------------------ */

.nav-punkt::before {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 1px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .32s var(--stufe-kurve);
  opacity: .5;
}

.nav-punkt:hover::before { transform: scaleX(1); }
.nav-punkt[aria-current="page"]::before { display: none; }


/* --- Die Bildmarke in der Kopfzeile --------------------------------------
   Beim Zeigen springt die Stufe kurz eine Stufe hoeher. Das Markenmotiv
   als kleine Geste.
   ------------------------------------------------------------------------ */

.marke-link .bildmarke path { transition: transform .42s var(--stufe-kurve); }
.marke-link:hover .bildmarke path:last-child { transform: translateY(-3px); }


/* --- Knoepfe bekommen einen Schimmer -------------------------------------- */

.knopf-voll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%,
              color-mix(in srgb, var(--grund) 22%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s var(--stufe-kurve);
}

.knopf-voll:hover::before { transform: translateX(100%); }


/* --- Die Stufenlinie zeichnet sich beim Scrollen -------------------------- */

.stufenlinie { transition: color .5s; }
.stufenlinie.sichtbar { color: color-mix(in srgb, var(--fokus) 28%, var(--haarlinie)); }


@media (prefers-reduced-motion: reduce) {
  .js .beispielgruppe li,
  .js .bereich-liste li,
  .js .fuss-spalte li { opacity: 1; transform: none; }
  .js .bereich.kippbar,
  .js .weichenfeld.kippbar { transform: none; }
  .nav-punkt::before { display: none; }
  .knopf-voll::before { display: none; }
}


/* ==========================================================================
   26 · v3 · Uebergang, Begleiter, Zeichen
   ========================================================================== */

/* --- Der Seitenuebergang -------------------------------------------------
   Zwei Haelften mit Versatz: der Vorhang faehrt als STUFE herein, nicht
   als gerade Kante. Das Markenmotiv im Moment des Wechsels.
   ------------------------------------------------------------------------ */

.uebergang {
  position: fixed;
  inset: 0;
  z-index: 190;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.uebergang span {
  display: block;
  background: var(--grund);
  transform: translateY(-101%);
  transition: transform .46s cubic-bezier(.7, 0, .25, 1);
}

/* Der Versatz macht die Stufe */
.uebergang span:nth-child(2) { transition-delay: .07s; }

.uebergang.zu span { transform: translateY(0); }

/* Beim Ankommen liegt er und faehrt nach unten weg */
.uebergang.ankommen span {
  transform: translateY(0);
  animation: vorhang-heben .62s cubic-bezier(.7, 0, .25, 1) forwards;
}
.uebergang.ankommen span:nth-child(2) { animation-delay: .08s; }

@keyframes vorhang-heben {
  to { transform: translateY(101%); }
}


/* --- Der Zeigerbegleiter -------------------------------------------------
   Der echte Mauszeiger bleibt sichtbar. Ihn zu verstecken ist auf
   Award-Seiten ueblich und erschwert vielen die Bedienung.
   ------------------------------------------------------------------------ */

.begleiter {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1.5px solid var(--fokus);
  border-radius: 50%;
  pointer-events: none;
  z-index: 150;
  opacity: 0;
  transition: opacity .3s, width .3s var(--stufe-kurve),
              height .3s var(--stufe-kurve), background .3s, border-color .3s;
  will-change: transform;
}

.begleiter.da { opacity: .75; }

.begleiter.gross {
  width: 52px; height: 52px;
  background: var(--fokus-leise);
  border-color: color-mix(in srgb, var(--fokus) 70%, transparent);
}

.begleiter.druck {
  width: 18px; height: 18px;
  background: var(--fokus);
  border-color: var(--fokus);
}

@media (prefers-reduced-motion: reduce) {
  .begleiter, .uebergang { display: none; }
}


/* Die zeichenweise Ueberschrift wurde am 02.08.2026 zurueckgebaut,
   siehe Begruendung in motor.js. Der Wortblock bleibt, er haelt
   Woerter beim Umbruch zusammen. */
.wortblock { display: inline-block; white-space: nowrap; }


/* --- Die Gegenfall-Karte -------------------------------------------------
   Hebt sich ab, ohne eine Zustandsfarbe zu benutzen. Das CI sagt: Farbe
   gehoert den Zahlen, nie einer Flaeche oder einem Rahmen. Also arbeitet
   diese Karte mit einem kraeftigeren Strich statt mit Rot.
   ------------------------------------------------------------------------ */

.bereich.gegenfall {
  border-color: var(--haarlinie);
  border-left-width: 3px;
}

.bereich.gegenfall .bereich-nr { color: var(--tinte); font-weight: 500; }


/* ==========================================================================
   27 · Vier Befunde aus der Endabnahme (02.08.2026)
   ========================================================================== */

/* --- Sprungziele unter der Kopfzeile -------------------------------------
   GEMESSEN: Der Knopf "Die drei Fälle" sprang so, dass das Etikett komplett
   hinter der festen Kopfleiste verschwand und die Überschrift 10 Punkte
   angeschnitten war. Die Kopfleiste ist 55 Punkte hoch, also braucht jedes
   Sprungziel diesen Abstand plus Luft.
   ------------------------------------------------------------------------ */

[id] { scroll-margin-top: 84px; }

@media (max-width: 900px) {
  [id] { scroll-margin-top: 76px; }
}


/* --- Bedienbar mit dem Daumen --------------------------------------------
   GEMESSEN: Themenschalter und Menüknopf waren 34 × 34 Punkte und sitzen
   direkt nebeneinander. Empfohlen sind 44. Die sichtbare Rundung bleibt
   klein, die Trefferfläche wächst unsichtbar darüber hinaus.
   ------------------------------------------------------------------------ */

.themenschalter, .menue-knopf { position: relative; }

.themenschalter::after, .menue-knopf::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--r-rund);
}


/* --- Das geschlossene Menü ist auch für die Tastatur zu --------------------
   GEMESSEN: Die zugeschobene Menütafel war weiterhin ansteuerbar. Wer mit
   der Tastatur bedient, tippte acht Mal ins Leere, bevor der sichtbare
   Menüknopf drankam. Sichtbar zu sein und erreichbar zu sein muss
   zusammenfallen.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  .kopf-nav:not(.offen) {
    visibility: hidden;
    pointer-events: none;
  }

  .kopf-nav.offen { visibility: visible; pointer-events: auto; }
}



/* --- Keine Bewegung hinter dem offenen Menue ------------------------------
   GEMESSEN: Bei offenem Menue lief die Seite darunter beim Wischen weiter
   (scrollY von 0 auf 900). Die Menueflaeche ist 533 Punkte hoch bei 844
   Punkten Sichtfeld, das untere Drittel blieb lebende Seite.
   ------------------------------------------------------------------------ */

.menue-offen body { overflow: hidden; }

/* ==========================================================================
   DIE MOMENTE · je Bereichsseite einer, den es nur dort gibt
   Angelegt 04.08.2026. Vorher benutzte jede der zwoelf Seiten exakt dieselben
   fuenf Effekte. Ein Effekt, der ueberall gleich gut passt, gehoert nirgends.

   Grundsatz fuer alle vier: Das Markup zeigt bereits den ENDZUSTAND. Diese
   Regeln machen daraus eine Vorfuehrung. Wer „Bewegung reduzieren" gesetzt hat
   oder kein JavaScript nutzt, sieht Inhalt statt Geruest.
   ========================================================================== */

/* ── 1 · Automatisierung: „Der Montag" ──────────────────────────────────── */

.montag {
  margin-top: 36px; padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--haarlinie-fein); border-radius: var(--r-gross);
  background: var(--karte);
}
.montag-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.montag-stand { margin: 0; color: var(--tinte-leise); font-size: .92rem;
  font-variant-numeric: tabular-nums; }

.montag-liste { list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }

.montag-zeile {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-klein);
  transition: background .3s ease, opacity .3s ease;
}
.montag-haken {
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--haarlinie); position: relative;
  transition: border-color .25s ease, background .25s ease;
}
.montag-was { color: var(--tinte); }
.montag-zeit {
  color: var(--tinte-leise); font-size: .82rem; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .3s ease;
}

/* erledigt: Haken faellt, Zeitstempel erscheint, die Zeile tritt zurueck */
.montag-zeile.fertig { background: var(--grund-tief); }
.montag-zeile.fertig .montag-haken { border-color: var(--gewinn); background: var(--gewinn); }
.montag-zeile.fertig .montag-haken::after {
  content: ""; position: absolute; inset: 0;
  background: var(--karte);
  clip-path: polygon(19% 47%, 8% 58%, 39% 88%, 92% 30%, 81% 20%, 39% 66%);
}
.montag-zeile.fertig .montag-was { color: var(--tinte-leise); }
.montag-zeile.fertig .montag-zeit { opacity: 1; }

.montag-fuss { margin: 22px 0 0; color: var(--tinte-leise); max-width: 54ch; }

/* ── 2 · Software: „Aus der Tabelle wird ein Programm" ───────────────────── */

.verwandlung {
  margin-top: 36px; display: grid; gap: clamp(18px, 3vw, 30px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .verwandlung { grid-template-columns: 1fr 1fr; align-items: start; } }

.verwandlung-blatt, .verwandlung-maske {
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--haarlinie-fein); border-radius: var(--r-gross);
  background: var(--karte);
}
.v-tabelle { width: 100%; border-collapse: collapse; font-size: .84rem; }
.v-zelle {
  padding: 8px 9px; border: 1px solid var(--haarlinie-fein);
  color: var(--tinte-leise); white-space: nowrap;
  transition: transform .5s cubic-bezier(.7,0,.25,1), opacity .5s ease, color .4s ease;
}
.v-kopf { color: var(--tinte); font-weight: 600; }

/* Waehrend die Maske erscheint, tritt das Blatt zurueck und verschiebt sich
   leicht – als ob die Angaben hinuebergezogen werden. */
.verwandlung.zieht .v-zelle { opacity: .32; transform: translateX(-6px); }

.v-feld, .v-ergebnis {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 12px 2px; border-bottom: 1px solid var(--haarlinie-fein);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.7,0,.25,1);
}
.v-feld span, .v-ergebnis span { color: var(--tinte-leise); font-size: .88rem; }
.v-feld b { color: var(--tinte); font-size: 1.02rem; }
.v-ergebnis { border-bottom: none; border-top: 1px solid var(--haarlinie); margin-top: 6px; }
.v-ergebnis b { color: var(--tinte); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.verwandlung.zieht .v-feld,
.verwandlung.zieht .v-ergebnis { opacity: 1; transform: none; }
.verwandlung.zieht .v-feld:nth-of-type(2) { transition-delay: .09s; }
.verwandlung.zieht .v-feld:nth-of-type(3) { transition-delay: .18s; }
.verwandlung.zieht .v-ergebnis          { transition-delay: .30s; }

.v-hinweis { margin: 16px 0 0; color: var(--tinte-leise); font-size: .9rem; }

/* ── 3 · Websites: „Gefunden werden" ─────────────────────────────────────── */

.gefunden { margin-top: 36px; }

.gefunden-suche {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--r-rund);
  border: 1px solid var(--haarlinie); background: var(--karte);
  max-width: 30rem;
}
.gefunden-lupe { display: inline-flex; color: var(--tinte-leise); }
.gefunden-lupe svg { width: 19px; height: 19px; }
.gefunden-eingabe { color: var(--tinte); font-size: 1.02rem; white-space: nowrap; }
.gefunden-strich {
  width: 1.5px; height: 1.1em; background: var(--fokus); opacity: 0;
}
.gefunden.tippt .gefunden-strich { opacity: 1; animation: gefunden-blinken 1s steps(2) infinite; }
@keyframes gefunden-blinken { 50% { opacity: 0; } }

.gefunden-unten {
  margin-top: 26px; display: grid; gap: clamp(18px, 3vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .gefunden-unten { grid-template-columns: 1.1fr 1fr; align-items: center; } }

.gefunden-karte { width: 100%; height: auto; }
.gefunden-karte .ort {
  fill: var(--haarlinie);
  transition: fill .45s ease, r .45s cubic-bezier(.7,0,.25,1);
}
.gefunden-karte .ort.an { fill: var(--fokus); r: 2.9; }

.gefunden-treffer { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.treffer {
  padding: 13px 15px; border-radius: var(--r-innen);
  border: 1px solid var(--haarlinie-fein); background: var(--karte);
  opacity: 0; transform: translateY(9px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.7,0,.25,1);
}
.treffer.da { opacity: 1; transform: none; }
.treffer b { display: block; color: var(--tinte); }
.treffer span { display: block; margin-top: 3px; color: var(--tinte-leise); font-size: .88rem; }

.gefunden-fuss { margin: 24px 0 0; color: var(--tinte-leise); max-width: 52ch; }

/* ── 4 · Apps: „Auch ohne Netz" ──────────────────────────────────────────── */

.inderhand {
  margin-top: 36px; display: grid; gap: clamp(22px, 4vw, 40px);
  grid-template-columns: 1fr; align-items: center; justify-items: center;
}
@media (min-width: 780px) { .inderhand { grid-template-columns: auto 1fr; justify-items: start; } }

.telefon {
  width: 268px; border-radius: 34px; padding: 10px;
  border: 1px solid var(--haarlinie); background: var(--karte-hoch);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.telefon-leiste {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 12px 8px; font-size: .72rem; color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.telefon-netz { transition: color .3s ease; }
.telefon-netz.aus { color: var(--achtung); }

.telefon-schirm {
  border-radius: 26px; padding: 16px 14px 18px;
  background: var(--grund-tief); min-height: 300px;
}
.telefon-titel { margin: 0 0 12px; font-size: .8rem; color: var(--tinte-leise);
  letter-spacing: .04em; text-transform: uppercase; }
.telefon-liste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }

.telefon-punkt {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: var(--r-klein);
  border: 1px solid transparent; background: transparent;
  color: var(--tinte); font: inherit; font-size: .88rem; text-align: left;
  cursor: pointer; transition: background .2s ease;
}
.telefon-punkt:hover { background: var(--karte); }
.telefon-punkt:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.telefon-kasten {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--haarlinie); position: relative;
  transition: border-color .2s ease, background .2s ease;
}
.telefon-punkt[aria-pressed="true"] .telefon-kasten {
  border-color: var(--gewinn); background: var(--gewinn);
}
.telefon-punkt[aria-pressed="true"] .telefon-kasten::after {
  content: ""; position: absolute; inset: 0; background: var(--grund-tief);
  clip-path: polygon(19% 47%, 8% 58%, 39% 88%, 92% 30%, 81% 20%, 39% 66%);
}
.telefon-punkt[aria-pressed="true"] span:last-child { color: var(--tinte-leise); }

.telefon-stand { margin: 14px 2px 0; font-size: .76rem; color: var(--tinte-leise);
  transition: color .3s ease; }
.telefon-stand.gemerkt { color: var(--achtung); }

.inderhand-neben { max-width: 34ch; }
.inderhand-satz { margin: 16px 0 0; color: var(--tinte-leise); }

/* ── Rücksicht auf reduzierte Bewegung ───────────────────────────────────
   PFLICHT aus dem Skill „website-baustein": Endzustand sofort, nie eine leere
   Flaeche. Der Motor steigt bei istRuhig() aus, hier faellt zusaetzlich jede
   Anlaufzeit weg – sonst haengt ein Element in seinem Startzustand fest. */
@media (prefers-reduced-motion: reduce) {
  .v-feld, .v-ergebnis, .treffer { opacity: 1; transform: none; transition: none; }
  .v-zelle, .montag-zeile, .montag-zeit, .gefunden-karte .ort { transition: none; }
  .gefunden.tippt .gefunden-strich { animation: none; }
  /* Nachgetragen 04.08.2026: Der Baustein-Waechter fand, dass die Uebergaenge
     im Telefon hier fehlten. Der Moment animiert zwar nichts von selbst, aber
     die Haken und der Netz-Schalter blenden weich - auch das ist Bewegung. */
  .telefon-punkt, .telefon-kasten, .telefon-netz, .telefon-stand { transition: none; }
  /* Nachgetragen 04.08.2026 nach dem Blick ins Bild: Bei reduzierter Bewegung
     wird der Endzustand sofort gezeigt – das hiess hier, dass die Tabelle
     dauerhaft auf 32 % Deckkraft stand und kaum noch lesbar war. Wer keine
     Animation sieht, soll BEIDE Seiten lesen koennen. */
  .verwandlung.zieht .v-zelle { opacity: 1; transform: none; }
}