/* ══════════════════════════════════════════════════════════════
   Aevum Intelligence · Testumgebung
   Design-System nach notizen/2026-09-17-prompt-claude-design.md (Rev. 02)
   Akzent Jade #00C08B auf Dunkel, #00694E auf Papier.
   Beide Schriften Monospace. Hairlines 0.5px. Keine Sans-Serif.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Dunkler Grundzustand */
  --grund: #171717;
  --raster: rgba(255, 255, 255, 0.09);
  --text: #f0f0f8;
  --text-2: #f0f0f88c;      /* 55 % */
  --text-3: #f0f0f87a;      /* 48 % */
  --jade: #00C08B;
  --jade-papier: #00694E;

  --linie-weich: #ffffff0d;
  --linie: #ffffff1a;
  --linie-stark: #ffffff26;
  --flaeche-1: #ffffff05;
  --flaeche-2: #ffffff08;
  --flaeche-3: #ffffff0d;
  --flaeche-4: #ffffff14;

  /* Heller Zustand, nur Prozess-Sektion */
  --papier: #F4F4F2;
  --papier-raster: rgba(0, 0, 0, 0.07);
  --papier-text: #171717;
  --papier-text-2: #171717a6;
  --papier-text-3: #17171773;
  --papier-linie: #00000014;
  --papier-zahl: rgba(0, 0, 0, 0.05);

  /* Hero-Verlauf, 1:1 von jeskojets.com ("Global", 16 Stopps, Braun nach Schwarz).
     Trägt den Hero und das Ende der Ablauf-Strecke. */
  --hero-verlauf: linear-gradient(180deg, #312726 0%, #2D2423 11.79%, #292120 21.38%, #251E1D 29.12%, #211A1A 35.34%, #1D1716 40.37%, #181313 44.56%, #141010 48.24%, #100D0C 51.76%, #0C0A0A 55.44%, #090707 59.63%, #060505 64.66%, #030303 70.88%, #020101 78.62%, #000 88.21%, #000 100%);
  /* Ablauf: wird je Schritt dunkler, von Papier bis zum Hero-Verlauf (Dima 01.10.2026).
     OKLCH auf dem Farbton von #312726 (L .86 / .72 / .44). Kontrast: 01 und 02 dunkler
     Text 11,7 bzw. 7,2:1, 03 heller Text 6,9:1. app.js liest diese Werte für die Bühne. */
  --ablauf-1: #D5CFCF;
  --ablauf-2: #ABA2A1;
  --ablauf-3: #5C4F4E;

  /* Schrift */
  --anzeige: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fliess: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Bewegung */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.77, 0, .175, 1);
  --dauer-reveal: 1.2s;
  --dauer-zustand: .3s;
  --dauer-hover: .15s;

  --kopf-hoehe: 76px;
  --rand: 16px;
}

@media (min-width: 640px) { :root { --rand: 24px; } }

* { box-sizing: border-box; }

/* Markierter Text in Jade (Dima 03.10.2026). -webkit-text-fill-color für die Überschriften im
   Verlauf (background-clip: text), sonst bliebe deren Schrift beim Markieren durchsichtig. */
::selection { background: var(--jade); color: #171717; -webkit-text-fill-color: #171717; }
.pille--jade::selection, .pille--jade *::selection,
.chat__nachricht--du p::selection { background: #171717; color: var(--jade); -webkit-text-fill-color: var(--jade); }

html {
  background: var(--grund);
  scroll-behavior: smooth;
}
/* Nach dem Sprachwechsel springt die Seite direkt zum Abschnitt, statt von oben durchzufahren
   (setzt das Kopf-Skript der index.html bis kurz nach load). */
html.ohne-gleiten { scroll-behavior: auto; }

/* Die Leinwand liegt hinter allem und traegt das Punktraster, sobald JS laeuft.
   Sie ist fixiert, damit beim Scrollen nicht jedes Bild neu berechnet wird. */
.raster {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
/* Ohne JS bleibt das alte CSS-Raster stehen, mit JS wuerde es doppelt liegen.
   Der body muss dabei durchsichtig werden: seine Farbe liegt sonst ueber der
   Leinwand, die mit z-index -1 dahinter sitzt. Die Grundfarbe traegt html. */
.js body { background-image: none; background-color: transparent; }

body {
  margin: 0;
  background-color: var(--grund);
  background-image: radial-gradient(var(--raster) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--fliess);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--text); }
button, input, textarea, select { font: inherit; color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--jade);
  color: var(--grund);
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ── Typografie ─────────────────────────────────────────────── */

.h2 {
  margin: 0;
  font-family: var(--anzeige);
  font-size: clamp(48px, 6.5vw, 80px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.h2--klein { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.1; }

.h3 {
  margin: 0;
  font-family: var(--anzeige);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.lead {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.label {
  margin: 0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.label--klein { font-size: 10px; letter-spacing: .08em; }

.akzent { color: var(--jade); font-style: normal; }
.akzent--papier { color: var(--jade-papier); font-style: normal; }

.hinweis { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-3); max-width: 62ch; }
.nachsatz { margin: 0; color: var(--text-2); text-wrap: balance; }

p { max-width: 65ch; }

.textlink {
  color: var(--text);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--linie-stark);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dauer-hover) var(--ease-out);
}
.textlink:hover { text-decoration-color: var(--text); }

/* ── Bahnen, Sektionen ──────────────────────────────────────── */

.sektion { padding: 80px var(--rand); border-top: .5px solid var(--linie-weich); }
@media (min-width: 640px) { .sektion { padding: 160px var(--rand); } }

.bahn { margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.bahn--standard { max-width: 1100px; }
.bahn--text     { max-width: 900px; }
.bahn--rechner  { max-width: 680px; }
.bahn--faq      { max-width: 760px; }

/* ── Pillen ─────────────────────────────────────────────────── */

.pille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 24px;
  border: .5px solid transparent;
  border-radius: 9999px;
  background: transparent;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dauer-hover) var(--ease-out),
              border-color var(--dauer-hover) var(--ease-out),
              background-color var(--dauer-zustand) var(--ease-out),
              color var(--dauer-zustand) var(--ease-out);
}
.pille--jade { background: var(--jade); color: var(--grund); font-weight: 500; }
.pille--jade:hover { opacity: .88; }
.pille--linie { border-color: var(--linie-stark); color: var(--text); }
.pille--linie:hover { border-color: #ffffff59; }

.pille--wahl {
  height: 38px;
  padding: 0 18px;
  border-color: var(--linie-stark);
  color: var(--text-2);
  letter-spacing: .08em;
}
.pille--wahl:hover { border-color: #ffffff59; color: var(--text); }
.pille--wahl[aria-pressed="true"] {
  background: var(--jade);
  border-color: var(--jade);
  color: var(--grund);
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Header ─────────────────────────────────────────────────── */

/* Die Kapsel ist die Huelle, die sich oeffnen kann. Das eigentliche Raster
   der Leiste sitzt in .kopf__leiste, damit die Tafel darunter Platz bekommt,
   ohne die Hoehe der Leiste anzutasten. */
.kopf {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 50;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  border: .5px solid var(--linie);
  border-radius: 32px;
  /* Ganz oben durchsichtig, damit der Globus durchscheint. Weiter unten
     deckend: ueber der hellen Prozess-Sektion wird die Kapsel sonst grau
     und die Reiter sind kaum noch lesbar (gemessen bei scrollY 1612).
     Die Stufen liefert die Seite ohnehin schon ueber data-stufe. */
  background: rgba(23, 23, 23, .3);
  /* Starkes Blur mischt den Untergrund zu einem gleichmaessigen Ton. Ohne das
     traegt die niedrige Deckkraft den Text nicht, sobald etwas Strukturiertes
     durchlaeuft. */
  backdrop-filter: blur(42px) saturate(120%);
  -webkit-backdrop-filter: blur(42px) saturate(120%);
  transition: box-shadow .5s var(--ease-out), border-radius .45s var(--ease-out),
              border-color .3s var(--ease-out), background-color .45s var(--ease-out);
  animation: kapselRein 1.1s var(--ease-out) .12s both;
}
/* Offen wird sie deckend: acht Eintraege mit Beschreibungstext ueber
   durchscheinendem Inhalt waeren nicht lesbar. */
.kopf[data-offen] {
  border-radius: 22px;
  border-color: var(--linie-stark);
  background: rgba(20, 20, 20, .95);
}

.kopf__leiste {
  height: var(--kopf-hoehe);
  padding: 0 12px 0 22px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
@media (min-width: 640px) { .kopf { left: 16px; right: 16px; } }

.kopf[data-stufe="1"] { box-shadow: 0 4px 20px rgba(0, 0, 0, .2); background: rgba(23, 23, 23, .5); }
.kopf[data-stufe="2"] { box-shadow: 0 10px 40px rgba(0, 0, 0, .4); background: rgba(23, 23, 23, .78); }
.kopf[data-stufe="3"] { box-shadow: 0 24px 70px rgba(0, 0, 0, .55); background: rgba(23, 23, 23, .78); }

.kopf__marke {
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  animation: kindRein .7s var(--ease-out) .3s both;
}
.kopf__zeile { display: flex; align-items: center; gap: 8px; }
/* Derselbe ruhige Puls wie am Ortsschild im Hero, nicht ein hartes Blinken:
   zwei verschiedene Rhythmen auf einer Seite wirken unruhig. */
.kopf__punkt {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--jade);
  animation: puls 2.4s ease-in-out infinite;
}
.kopf__wort {
  font-family: var(--anzeige);
  /* Kleiner und enger als beim frueheren "AEVUM": der volle Name ist dreimal
     so lang und muss neben der Kommandozeile Platz lassen. */
  font-size: 14px;
  font-weight: 700;
  /* Satz nach Logo 01 (DESIGN.md "Logo"): Laufweite 0, Wortabstand 0,42 em.
     Die Leerstelle ist in Mono 0,6 em breit, word-spacing nimmt 0,18 em weg. */
  letter-spacing: 0;
  word-spacing: -.18em;
  line-height: 1;
  white-space: nowrap;
}
.kopf__ai { color: var(--jade); font-weight: inherit; }

/* ── Navigation als Kommandozeile ───────────────────────────── */
.kopf__mitte {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: kindRein .7s var(--ease-out) .42s both;
}

.zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  padding: 7px 14px;
  border: .5px solid var(--linie);
  border-radius: 9999px;
  background: rgba(0, 0, 0, .35);
  font-size: 12.5px;
}
.zeile__prompt { color: var(--jade); white-space: nowrap; }
.zeile__text { color: var(--text); }
.zeile__cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--jade);
  animation: blinken 1.1s step-end infinite;
  vertical-align: -2px;
}
/* Waehrend ein Befehl laeuft, hoert der Cursor auf zu blinken. */
.kopf[data-offen] .zeile__cursor { animation: none; }
@keyframes blinken { 0%, 49% { opacity: .9; } 50%, 100% { opacity: 0; } }

.kopf__reiter { display: flex; gap: 2px; }
/* Heller als --text-2: bei durchsichtiger Kapsel steht der Text ueber der
   hellen Prozess-Sektion sonst auf mittelgrauem Grund. Gemessen waren es dort
   3,69:1, also unter der Schwelle von 4,5:1. Mit dieser Stufe ueberall darueber. */
.kopf__reiter a,
.kopf__reiter button {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 7px 11px;
  border-radius: 8px;
  color: #f0f0f8dd;
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  transition: color var(--dauer-hover) var(--ease-out), background-color var(--dauer-hover) var(--ease-out);
}
.kopf__reiter a:hover,
.kopf__reiter button:hover { color: var(--jade); background: rgba(0, 192, 139, .08); }

/* Hochgestellter Hinweis am Reiter, etwa "gratis". In Jade, nicht in einer
   zweiten Signalfarbe: die Marke hat genau einen Akzent. */
.kopf__mini {
  margin-left: 4px;
  color: var(--jade);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: super;
  line-height: 1;
}
.kopf__reiter button[aria-expanded="true"] { color: var(--jade); background: rgba(0, 192, 139, .12); }
/* Der Punkt sagt vorher, dass sich hier etwas öffnet statt zu springen.
   Eigenes Element statt ::after, damit er bei "tools" vor dem hochgestellten
   "free" steht (tools.free, Spec 4.1) und nicht dahinter. */
.kopf__tafelpunkt {
  display: inline-block;
  margin-left: 7px;
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: currentColor;
  opacity: .5;
  vertical-align: 2px;
}
.kopf__reiter button[aria-expanded="true"] .kopf__tafelpunkt { opacity: 1; }

.kopf__menue {
  display: none;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: .5px solid var(--linie-stark);
  border-radius: 9999px;
  background: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color var(--dauer-hover) var(--ease-out);
}
.kopf__menue:hover { border-color: var(--jade); }
.kopf__striche { display: flex; flex-direction: column; gap: 3px; }
.kopf__striche i { display: block; width: 14px; height: 1px; background: currentColor; }

/* ── Ausgabe-Tafel ──────────────────────────────────────────── */
.kopf__tafel {
  padding: 0 14px;
  max-height: 0;
  opacity: 0;
  border-top: .5px solid transparent;
  transition: max-height .5s var(--ease-out), opacity .35s var(--ease-out),
              padding .5s var(--ease-out), border-color .4s var(--ease-out);
}
.kopf[data-offen] .kopf__tafel {
  max-height: min(64vh, 420px);
  opacity: 1;
  padding: 14px;
  overflow: auto;
  border-top-color: var(--linie);
}
/* Zwei Bloecke nebeneinander statt einer durchgehenden Wand aus acht Eintraegen.
   Untereinander waeren es vier Spalten und damit 4+1 in der Fuenfergruppe. So ist
   links zweispaltig (3 Reihen), rechts einspaltig (3 Reihen): beide Bloecke sind
   gleich hoch, und jeder Eintrag hat genug Breite fuer den Titel in einer Zeile. */
.kopf__tafel { display: grid; grid-template-columns: 2fr 1fr; gap: 0 28px; align-items: start; }
/* Reihenfolge zaehlt: beide Regeln haben dieselbe Spezifitaet, die breite
   Variante muss deshalb hinten stehen, sonst gewinnt die Einspaltigkeit. */
.kopf__block .kopf__reihe { grid-template-columns: 1fr; }
.kopf__block--breit .kopf__reihe { grid-template-columns: repeat(2, 1fr); }

/* Handy-Akkordeon (Aufbau in index.html). Auf dem Desktop lösen sich die
   Hüllen auf, die Blöcke bleiben so direkte Kinder des Tafel-Rasters und die
   Regeln für data-tafel-inhalt greifen wie vor dem Umbau. Hauptpunkte,
   Sprungziele und der Knopf im Menü gibt es nur unter 900 px. */
.kopf__klappe,
.kopf__klappinhalt { display: contents; }
.kopf__haupt,
.kopf__links,
.kopf__tafel-cta { display: none; }

/* Je Reiter eigener Inhalt. app.js setzt data-inhalt beim Öffnen und lässt es
   beim Schließen stehen, damit der Inhalt während des Zuklappens nicht vorher
   verschwindet. "menue" (Handy-Knopf auf breitem Schirm nach dem Drehen) zeigt
   die Leistungen, wie vor der Umstellung. */
.kopf__tafel [data-tafel-inhalt] { display: none; }
.kopf[data-inhalt="leistungen"] .kopf__tafel [data-tafel-inhalt="leistungen"],
.kopf[data-inhalt="menue"] .kopf__tafel [data-tafel-inhalt="leistungen"],
.kopf[data-inhalt="tools"] .kopf__tafel [data-tafel-inhalt="tools"] { display: block; }

/* Tools-Tafel seit 03.10.2026 (Dima) genau wie die Leistungs-Tafel: Gruppenzeile,
   Einträge mit Bild und Titel. Der Block sitzt in der linken 2fr-Spalte des
   Tafel-Rasters und ist zweispaltig, die Einträge stehen so genau unter den
   Spalten von „AI in deinen Prozessen“. */
.kopf__block--tools .kopf__reihe { grid-template-columns: repeat(2, 1fr); }

.kopf__gruppe {
  margin: 16px 0 8px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kopf__gruppe::after {
  content: "";
  flex: 1;
  height: .5px;
  background: var(--linie);
}
.kopf__gruppe:first-child { margin-top: 2px; }

.kopf__reihe { display: grid; gap: 6px; }

.kopf__eintrag {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color var(--dauer-hover) var(--ease-out);
}
.kopf__eintrag:hover { background: rgba(255, 255, 255, .04); }
/* Nur der Titel nimmt die Akzentfarbe an, die Unterzeile (seit 03.10.2026 nur noch
   bei Tools free) bleibt ruhig. */
.kopf__eintrag:hover .kopf__eintrag-titel,
.kopf__eintrag:focus-visible .kopf__eintrag-titel { color: var(--jade); }

.kopf__eintrag img {
  width: 72px;
  height: 41px;
  flex: none;
  object-fit: cover;
  border-radius: 7px;
  border: .5px solid var(--linie);
}
.kopf__eintrag > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kopf__eintrag-titel { font-family: var(--anzeige); font-size: 13.5px; color: var(--text); }
.kopf__eintrag-unter { font-size: 11.5px; line-height: 1.35; color: var(--text-3); }

.kopf__cta {
  justify-self: end;
  height: 38px;
  padding: 0 20px;
  /* backwards statt both: der Endzustand ist ohnehin der Normalzustand, und ein
     festgehaltenes transform würde das Nachgeben beim Drücken überschreiben. */
  animation: kindRein .7s var(--ease-out) .6s backwards;
}

/* Unter 900px hat die Zeile mit vier Reitern keinen Platz. Dort uebernimmt
   ein Menue-Knopf, und die Tafel wird zum Akkordeon mit denselben Zielen wie
   die Desktop-Reiter. Beim Oeffnen ist alles zu (app.js). */
@media (max-width: 899px) {
  .kopf__leiste { grid-template-columns: 1fr auto auto; padding-right: 8px; }
  .kopf__mitte { display: none; }
  .kopf__menue { display: flex; }
  .kopf__tafel { grid-template-columns: 1fr; gap: 0; }
  .kopf__block--breit .kopf__reihe { grid-template-columns: 1fr; }

  /* Hüllen werden wieder Kästen. aria-expanded am Knopf ist der einzige
     Zustand, der Inhalt folgt ihm. */
  .kopf__klappe,
  .kopf__klappinhalt,
  .kopf__links { display: block; }
  .kopf__klappknopf[aria-expanded="false"] + .kopf__klappinhalt { display: none; }
  .kopf__klappinhalt { padding: 2px 0 12px; }
  .kopf__tafel [data-tafel-inhalt] { display: block; }

  /* Hauptpunkte: größte Schrift im Menü, Tippziel über 48 px, Haarlinie
     dazwischen. Block statt Flex, damit "free" hochgestellt bleibt. */
  .kopf__haupt {
    display: block;
    position: relative;
    width: 100%;
    padding: 15px 40px 15px 8px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    font-family: var(--anzeige);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.2;
    transition: color var(--dauer-hover) var(--ease-out);
  }
  .kopf__klappe + .kopf__klappe > .kopf__haupt,
  .kopf__links > .kopf__haupt { border-top: .5px solid var(--linie); }
  .kopf__klappknopf[aria-expanded="true"] { color: var(--jade); }
  .kopf__haupt:focus-visible { outline-offset: -2px; }
  .kopf__haupt .kopf__mini { margin-left: 5px; font-size: 10px; }
  .kopf__zeichen {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .55;
    transition: transform var(--dauer-zustand) var(--ease-out), opacity var(--dauer-hover) var(--ease-out);
  }
  .kopf__klappknopf[aria-expanded="true"] .kopf__zeichen { opacity: 1; }
  .kopf__klappknopf[aria-expanded="true"] .kopf__zeichen--klappe { transform: rotate(180deg); }

  /* Einträge eine Stufe unter den Hauptpunkten, Unterzeile heller als
     --text-3, weil 12 px auf dunklem Grund sonst knapp unter 4,5:1 liegen. */
  .kopf__eintrag-titel { font-size: 14px; }
  .kopf__eintrag-unter { font-size: 12px; color: var(--text-2); }

  /* Tools free: der Klappknopf trägt den Namen, die Gruppenzeile bleibt aus. */
  .kopf__block--tools .kopf__gruppe { display: none; }
  .kopf__block--tools .kopf__reihe { grid-template-columns: 1fr; }
}
/* Hover nur mit Maus: auf Touch bleibt :hover nach dem Antippen stehen, eine
   gerade zugeklappte Klappe sähe dann weiter offen aus. */
@media (max-width: 899px) and (hover: hover) {
  .kopf__haupt:hover { color: var(--jade); }
  .kopf__haupt:hover .kopf__zeichen { opacity: 1; }
}
@media (max-width: 479px) {
  .kopf__menue { padding: 9px 12px; font-size: 0; gap: 0; }
  .kopf__striche i { width: 16px; }
}
/* Auf schmalen Schirmen draengeln sich Marke, Menue-Knopf und Knopf. Die
   volle Wortmarke bleibt stehen, Erstgespraech wandert als breiter Knopf ans
   Ende des Menues. */
@media (max-width: 559px) {
  .kopf__leiste { grid-template-columns: 1fr auto; }
  .kopf__cta { display: none; }
  .kopf__tafel-cta { display: flex; width: 100%; margin-top: 14px; }
}

@keyframes kapselRein { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes kindRein   { from { opacity: 0; transform: translateY(6px); }  to { opacity: 1; transform: none; } }

/* ── Scroll-Anzeige rechts ──────────────────────────────────── */

.schiene {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-3);
  transition: color .42s var(--ease-out);
}
.schiene__bahn { position: relative; width: 1px; height: 64px; background: var(--linie); }
.schiene__regler {
  position: absolute; left: -2px; top: 0;
  width: 5px; height: 8px;
  border-radius: 9999px;
  background: var(--text);
  transition: transform .15s linear, background .42s var(--ease-out);
}
.schiene__wert { font-size: 10px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.schiene[data-fertig="1"] { color: var(--jade); }
.schiene[data-fertig="1"] .schiene__regler { background: var(--jade); }
.schiene[data-papier="1"] { color: var(--papier-text-3); }
.schiene[data-papier="1"] .schiene__bahn { background: var(--papier-linie); }
.schiene[data-papier="1"] .schiene__regler { background: var(--papier-text); }

@media (max-width: 1023px) { .schiene { display: none; } }

/* ── Sprach-Knopf (seit 03.10.2026) ─────────────────────────────   Nur das Kürzel „EN“ bzw. „DE“, ohne Flagge (Dima 03.10.2026 spät; vorher Flaggen im
   Hausstil). Gezeigt wird immer die Sprache, in die der Knopf wechselt. Ab 900 px schwebt er rechts über der Scroll-Schiene, auf
   ihrer Achse (Schiene: right 22px, 27px breit, also Mitte 35,5px vom Rand), darunter
   sitzt er in der Kopfleiste vor dem Menü-Knopf (Dima). Eigener dunkler Grund wie die
   Kopf-Kapsel, damit er auf Papier lesbar bleibt. Von 900 bis rund 1206 px enden Karten und
   Formular 29,5 px unter dem Knopf (Inhalt 1100 px breit, gemessen); dort liegt er beim
   Scrollen über ihrem Rand, wie ab 1024 px auch die Schiene. Die englischen Seiten erzeugt
   website/englisch/baue-englisch.mjs, dort zeigt derselbe Knopf zurück. */
.sprachwahl {
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  border: .5px solid var(--linie-stark);
  border-radius: 9999px;
  transition: border-color var(--dauer-hover) var(--ease-out);
}
.sprachwahl:hover { border-color: var(--jade); }
.sprachwahl:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }
.sprachwahl__kurz { letter-spacing: .12em; text-transform: uppercase; }

.sprachwahl--rand {
  position: fixed;
  z-index: 40;
  right: 17.5px;                    /* 35,5px Achse minus halbe Breite */
  bottom: calc(50% + 64px);         /* Schiene beginnt 46,5px über der Mitte: 17,5px Luft */
  width: 36px;
  display: flex;
  flex-direction: column;  padding: 11px 0 10px;
  background: rgba(23, 23, 23, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: kindRein .7s var(--ease-out) .6s backwards;
}
.sprachwahl--rand .sprachwahl__kurz { font-size: 10px; line-height: 1; }
/* In der Kopfleiste wie der Menü-Knopf daneben: gleiche Höhe, gleiche Schrift. */
.sprachwahl--kopf { display: none; }
@media (max-width: 899px) {
  .sprachwahl--rand { display: none; }
  /* Menü und Erstgespräch stießen ohne Abstand aneinander (0 px), neben dem Sprach-Knopf mit
     8 px fiel das auf: dieselben 8 px auch hier. */
  .kopf__cta { margin-left: 8px; }
  .sprachwahl--kopf {
    position: relative;
    display: inline-flex;
    gap: 9px;
    margin-right: 8px;
    padding: 9px 13px;
    font-size: 11px;
    animation: kindRein .7s var(--ease-out) .45s both;
  }
  .kopf__leiste { grid-template-columns: 1fr auto auto auto; }
  /* Tippfläche mindestens 44 px hoch, seitlich nur 3 px, damit sie den Menü-Knopf nicht erreicht. */
  .sprachwahl--kopf::before { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 44px; transform: translateY(-50%); }
}
@media (max-width: 559px) { .kopf__leiste { grid-template-columns: 1fr auto auto; } }
/* Unter 480 px so hoch wie der Menü-Knopf (25 px); unter 360 px schmaler, damit es neben der
   Wortmarke nicht zu eng wird. */
@media (max-width: 479px) {
  .sprachwahl--kopf { padding: 6px 11px; font-size: 10px; line-height: 12px; gap: 7px; }
}
@media (max-width: 359px) { .sprachwahl--kopf { padding: 6px 8px; } }
/* Offenes Chat-Fenster: Der Rand-Knopf stünde 6,5 px darüber hinaus und bliebe anklickbar. */
body:has(#chat[data-offen]) .sprachwahl--rand { display: none; }
/* Aufruf mit Anker (Sprachwechsel, geteilter Link): der Abschnitt beginnt unter der Kopf-Kapsel
   statt dahinter. Nur :target, weil die Navigation (gleiteZu in app.js) scroll-margin mitliest
   und sonst anders landen würde als bisher. */
main section[id]:target { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
/* OTP-Link: Wer gerade einen Link öffnet oder die Nachricht liest, würde beim Sprachwechsel
   den Link verlieren (otp-link.js hat den Anker schon aus der Adresse genommen). */
body:has([data-ansicht="empfang"]:not([hidden]), [data-ansicht="inhalt"]:not([hidden])) .sprachwahl { display: none; }

/* ── 01 Hero ────────────────────────────────────────────────── */

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; }
/* Grund im Verlauf von jeskojets.com (Schriftzug „Global“, 16 Stopps, Braun nach Schwarz), seit 01.10.2026.
   z-index -2 legt ihn unter die Raster-Leinwand (-1): Punktraster und Klick-Wellen bleiben im Hero sichtbar.
   Die Jade-Vignette ist dafür entfallen. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--hero-verlauf);
  pointer-events: none;
}
/* Ohne JS malt der body Grund und Raster selbst und läge über -2. */
html:not(.js) .hero::before { z-index: 0; }
.hero__inhalt {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 24px) var(--rand) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}

/* Leinwand für den Anflug der Punkte beim Laden. Liegt über dem Hero-Grund und
   unter dem Inhalt (früher im DOM, beide positioniert); nach 2,4 s wird sie
   ausgeblendet und die Globus-Leinwand übernimmt. Nimmt keine Zeiger an. */
.hero__anflug { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero__anflug[hidden] { display: none; }

/* pan-y: senkrechtes Wischen scrollt weiter die Seite, waagerecht dreht
   die Kugel. Ohne das würde der Globus am Handy das Scrollen blockieren.
   Gedreht wird am Kasten, nicht an der Leinwand: die ist größer (siehe unten). */
.globus { position: relative; width: min(50vh, 86vw); aspect-ratio: 1; flex: none; cursor: grab; touch-action: pan-y; --ueberstand: .15; }
.globus.faesst { cursor: grabbing; }
/* Die Bögen steigen bis 30 % des Radius über die Kugel (app.js, zeichneBogen). War die
   Leinwand so groß wie der Kasten, schnitt ihr Rand sie hart ab, am deutlichsten, wenn man
   die Kugel am Handy nach oben kippt (Dima, iPhone-Screenshot 03.10.2026). Jetzt ragt sie
   ringsum um --ueberstand der Kastenbreite hinaus, die Kugel bleibt gleich groß und gleich
   platziert, das Layout ändert sich nicht. .15 reicht in jeder Drehlage: Bogenspitze bei
   0,65 Kastenbreite minus 8 px von der Mitte, Leinwandrand bei 0,65. */
.globus__leinwand {
  position: absolute;
  top: calc(var(--ueberstand) * -100%);
  left: calc(var(--ueberstand) * -100%);
  width: calc(100% * (1 + 2 * var(--ueberstand)));
  height: calc(100% * (1 + 2 * var(--ueberstand)));
  display: block;
  pointer-events: none;
}
/* Die Leinwand ragt am schmalen Handy seitlich über den Bildschirm. Ohne das entstünde
   dort ein waagerechter Scrollweg (overflow-x am body greift in iOS Safari nicht sicher). */
.hero { overflow-x: clip; }

.ortschild {
  position: absolute;
  top: 9%;
  right: -2%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: .5px solid var(--linie);
  border-radius: 9999px;
  background: rgba(23, 23, 23, .8);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.ortschild__puls {
  width: 5px; height: 5px;
  border-radius: 9999px;
  background: var(--jade);
  animation: puls 2.4s ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.hero__titel {
  margin: 0;
  font-family: var(--anzeige);
  font-size: clamp(54px, 8.5vw, 111px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.hero__titel [data-wort] { display: inline-block; }
/* H1 im Ton von „Global“: oben unser Hellton, unten läuft jedes Wort ins Braun aus.
   Verlauf je Wort über die Glyphenhöhe wie beim Vorbild. Der Punkt bleibt Jade. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__titel [data-wort] {
    background: linear-gradient(180deg, var(--text) 0%, var(--text) 30%, #B8AAA6 62%, #5A4A47 88%, #312726 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero__titel .akzent { -webkit-text-fill-color: var(--jade); }
}
@media (forced-colors: active) {
  .hero__titel [data-wort] { background: none; -webkit-text-fill-color: currentColor; }
}

.hero__block { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* Branchenzeile und Zusagen-Pille sind seit der Textkürzung vom 01.10.2026 raus. */

/* Das Wort "Scroll" unter den Knöpfen ist seit 01.10.2026 raus (Dima). */

@media (max-width: 767px) {
  /* Das Schild würde sonst über den rechten Seitenrand ragen. */
  .ortschild { right: 0; top: 6%; }
}

/* Hero = Variante C (Dimas Wahl, 01.10.2026): passt komplett in den ersten Bildschirm.
   Die Kugel läuft nach unten aus (Maske --auslauf-von/-bis; app.js liest dieselben Werte
   für den Anflug, damit die unteren Punkte bei der Übergabe nicht springen), die H1
   rutscht 30 % über sie, wie bei weevolveit.
   Desktop: vorher 49 bis 219 px unter der Falz, jetzt 42 bis 123 px Luft (1280×720 bis
   1920×1080). Handy: Safari-Leisten lassen am iPhone nur rund 690 statt 844 pt sichtbar;
   deshalb Globus in svh (kleinster Viewport), H1 dreizeilig und Inhalt oben angesetzt
   statt mittig, damit der Rest nicht unter die schwebende Leiste von iOS 26 rutscht. */
.hero { --globus: min(44vh, 82vw); }
@supports (height: 1svh) { .hero { --globus: min(44svh, 82vw); } }
.hero__inhalt { padding-top: calc(var(--kopf-hoehe) + 8px); padding-bottom: 32px; gap: 20px; }
.globus { width: var(--globus); --auslauf-von: .48; --auslauf-bis: .86; }
/* --auslauf-von/-bis zählen in der Höhe des Kastens. Die Leinwand ragt um --ueberstand
   darüber hinaus, deshalb umgerechnet: (ü + Wert) / (1 + 2ü). Gleiche Stelle auf dem
   Bildschirm wie vorher, und gleiche Werte wie im Anflug (app.js misst den Kasten). */
.globus__leinwand {
  --maske-von: calc((var(--ueberstand) + var(--auslauf-von)) / (1 + 2 * var(--ueberstand)) * 100%);
  --maske-bis: calc((var(--ueberstand) + var(--auslauf-bis)) / (1 + 2 * var(--ueberstand)) * 100%);
  -webkit-mask-image: linear-gradient(#000 var(--maske-von), transparent var(--maske-bis));
  mask-image: linear-gradient(#000 var(--maske-von), transparent var(--maske-bis));
}
.hero__titel { position: relative; z-index: 1; margin-top: calc(var(--globus) * -.3); }
.hero__block { gap: 18px; }
/* Ohne Lead (seit 02.10.2026) stünden die Knöpfe nur 20px unter der H1 und klebten an den
   Unterlängen. Etwas Abstand, der mit der Höhe wächst (rund 33 bis 48px insgesamt). */
.hero__block { margin-top: clamp(12px, 2.4vh, 28px); }
@media (max-width: 899px) { .hero { align-items: flex-start; } }
/* Handy (Dima 02.10.2026, iPhone-Screenshot): oben angesetzt klebte der Globus an der Kopfleiste
   (2 pt Luft, Ortschild darunter gequetscht), unter den Knöpfen blieben rund 140 pt leer.
   Jetzt steht der Inhalt mittig zwischen Kopfleiste (12 + 76 px) und Unterkante von 100svh.
   Kein Polster unten: iOS 26 legt seine schwebende Leiste rund 26 pt UNTER svh, der Abstand
   zur Leiste fällt dort ohnehin größer aus. Reicht die Höhe nicht (iPhone SE), wächst der
   Bereich wie bisher mit. */
@media (max-width: 899px) {
  .hero__inhalt { min-height: 100vh; justify-content: center; padding-top: calc(var(--kopf-hoehe) + 20px); padding-bottom: 0; }
  @supports (height: 1svh) { .hero__inhalt { min-height: 100svh; } }
}
/* Seit 03.10.2026 heißt der erste Knopf „Kostenloses Erstgespräch“: zusammen mit „Ersparnis
   berechnen“ rund 450 px. Bricht die Reihe um, stehen die Knöpfe mittig unter der H1. Bis 479 px
   bewusst untereinander und gleich breit; Höhe und Tippfläche bleiben 46 px. */
.hero .knopfreihe { justify-content: center; }
@media (max-width: 479px) {
  .hero .knopfreihe { flex-direction: column; align-items: center; gap: 8px; }
  .hero .knopfreihe .pille { width: min(100%, 256px); padding: 0 16px; }
}
/* Niedrige Handys: die zweite Knopfzeile kostet 54 px. Ein kleinerer Globus hält beide Knöpfe
   über der Falz (360×560 war der zweite Knopf vorher 13 px angeschnitten). */
@media (max-width: 639px) and (max-height: 620px) {
  .hero { --globus: min(36vh, 82vw); }
  @supports (height: 1svh) { .hero { --globus: min(36svh, 82vw); } }
}
@media (min-width: 900px) {
  .hero { --globus: min(58vh, 86vw); }
  .hero__inhalt { max-width: 1240px; }
}

/* H1 seit 02.10.2026 „Die Konkurrenz zieht vorbei, während bei dir noch alles manuell läuft.“
   (70 Zeichen statt 37, vorher „Büroarbeit, die sich selbst erledigt.“ zweizeilig mit bis zu 104px).
   Ab 640px dreizeilig: 15em lässt rund 26 Zeichen je Zeile zu, die Größe folgt Breite und Höhe,
   damit die Knöpfe über der Falz bleiben (gemessen 1024×768 bis 1920×1080: 25 bis 101 px Luft).
   Höchstens 84px, sonst reicht die 1240-px-Bahn bei 1920px nur für 4 Zeilen. */
.hero__titel { max-width: 15em; }
@media (min-width: 640px) {
  .hero__titel { font-size: clamp(40px, min(6vw, 8.6vh), 84px); }
  /* Englisch „The competition is pulling“ hat 26 Zeichen in der ersten Zeile: bei 84px
     bräche es auf 1920px vierzeilig, mit 78px bleibt es dreizeilig (gemessen 03.10.2026). */
  html[lang="en"] .hero__titel { font-size: clamp(40px, min(6vw, 8.6vh), 78px); }
}

/* Die Skala der Spec beginnt bei 54px, in Monospace passt das am Handy nicht. Die H1 folgt
   unter 640px der sichtbaren Höhe (svh, Safari-Leisten): iPhone SE 4 Zeilen mit rund 30px,
   größere iPhones 5 Zeilen bis 40px; gemessen 18 bis 70 px Luft unter den Knöpfen. */
@media (max-width: 639px) {
  .hero__titel { font-size: clamp(28px, min(9.5vw, 5.4vh), 44px); max-width: none; }
  .h2 { font-size: clamp(30px, 9.5vw, 48px); }
}
@supports (height: 1svh) {
  @media (max-width: 639px) { .hero__titel { font-size: clamp(28px, min(9.5vw, 5.4svh), 44px); } }
}

/* ── 02 Prozess: waagerechte Strecke ────────────────────────── */

.prozess {
  background-color: var(--papier);
  background-image: radial-gradient(var(--papier-raster) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  color: var(--papier-text);
  transition: background-color .6s var(--ease-inout), color .6s var(--ease-inout);
}
/* Ab Tafel 03 kippt die ganze Bühne auf dunkel */
.prozess[data-dunkel="1"] {
  background-color: var(--grund);
  background-image: radial-gradient(var(--raster) 1px, transparent 1px);
  color: var(--text);
}

/* 5 Tafeln (Titel und 4 Schritte): Spur 5 × 100vh, Reihe 5 × 100vw. Muss zu TAFELN in app.js passen. */
.prozess__spur { height: 500vh; position: relative; }
/* Einrast-Marken der Strecke am Handy: app.js setzt top und html.strecke-rastet */
.prozess__rast { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; }
html.strecke-rastet { scroll-snap-type: y proximity; }
.prozess__buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prozess__reihe {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 500vw;
  will-change: transform;
}

.tafel {
  position: relative;
  width: 100vw;
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 8vw;
  overflow: hidden;
}
.tafel--titel { flex-direction: column; justify-content: center; text-align: center; gap: 20px; }
/* Sekundär statt gedämpft (02.10.2026, critique): 11px mit 45 % ergab auf Papier nur 2,9:1. */
.tafel--titel .label { color: var(--papier-text-2); }
/* Der Hinweis "Scrollen bewegt die Strecke waagerecht. Überspringen" ist seit 01.10.2026 raus (Dima). */

.tafel__zahl {
  position: absolute;
  left: -.08em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--anzeige);
  font-size: clamp(200px, 40vw, 520px);
  font-weight: 800;
  line-height: .8;
  color: var(--papier-zahl);
  pointer-events: none;
  user-select: none;
}
.tafel__zahl--naechste { left: auto; right: -.35em; }

.tafel__inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 52ch;
}
/* Die lange Überschrift „Go Live und Betreuung“ bricht sonst mit „und“ allein in der Mitte um.
   Zusätzlich hält index.html „Go Live und“ als ein Stück (geschützte Leerzeichen, eigenes span) zusammen
   (am Handy sonst „Go Live / und Betreuung.“). */
.tafel[data-tafel="4"] .tafel__inhalt { max-width: min(100%, 720px); }
.tafel__strich { width: 80px; height: 0; margin: 0; border: 0; border-top: .5px solid var(--papier-text-3); }
.tafel__satz { margin: 0; max-width: 50ch; color: var(--papier-text-2); }

/* Jeder Schritt ist dunkler als der vorige (Dima 01.10.2026): 01 und 02 warme helle Töne mit
   dunklem Text, 03 dunkel mit hellem Text, 04 der Hero-Verlauf mit Hero-Überschrift. Die Tafeln
   tragen ihren Ton selbst (gestapelt: ohne JS, ohne Bewegung). Auf der Strecke (alle Breiten) trägt
   ihn stattdessen die Bühne und wird beim Scrollen fließend dunkler (siehe unten, data-bewegt). */
.tafel[data-tafel] { background-size: 22px 22px; background-position: 11px 11px; }
.tafel[data-tafel="1"] { background-color: var(--ablauf-1); background-image: radial-gradient(var(--papier-raster) 1px, transparent 1px); }
.tafel[data-tafel="2"] { background-color: var(--ablauf-2); background-image: radial-gradient(var(--papier-raster) 1px, transparent 1px); }
.tafel[data-tafel="3"] { background-color: var(--ablauf-3); background-image: radial-gradient(var(--raster) 1px, transparent 1px); }
.tafel[data-tafel="4"] {
  background: radial-gradient(var(--raster) 1px, transparent 1px) 11px 11px / 22px 22px, var(--hero-verlauf);
}
/* 01 und 02 behalten dunklen Text, auch wenn die gestapelte Sektion schon dunkel ist (sonst 2,2:1). */
.tafel[data-tafel="1"],
.tafel[data-tafel="2"] { color: var(--papier-text); }
/* Auf den Zwischentönen wäre der 65-%-Satz zu blass (02: 3,6:1), deshalb 80 % (02: 5,0:1, 03: 5,1:1). */
.tafel[data-tafel="1"] .tafel__satz,
.tafel[data-tafel="2"] .tafel__satz { color: rgba(23, 23, 23, .8); }
.tafel[data-tafel="3"] .tafel__satz { color: rgba(240, 240, 248, .8); }

/* 03 und 04 haben hellen Text */
.tafel--dunkel { color: var(--text); }
.tafel--dunkel .tafel__zahl { color: rgba(255, 255, 255, .05); }
.tafel--dunkel .tafel__strich { border-top-color: var(--text-3); }
.tafel--dunkel .tafel__satz { color: var(--text-2); }

/* 04 endet wie der Hero: Überschrift im selben Verlauf wie die H1, Punkt bleibt Jade.
   Verlauf je Stück wie bei H1 und Kontakt (seit 02.10.2026): die Überschrift ist zweizeilig, über
   den ganzen Block lag „Betreuung“ komplett im dunklen Ende (critique: Glyphenfuß 1,3 bis 2:1).
   Zwei Stücke, „Go Live und“ und „Betreuung.“, damit auch der Umbruch fest dazwischen liegt. */
.tafel[data-tafel="4"] .h2 [data-wort] { display: inline-block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tafel[data-tafel="4"] .h2 [data-wort] {
    background: linear-gradient(180deg, var(--text) 0%, var(--text) 30%, #B8AAA6 62%, #5A4A47 88%, #312726 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .tafel[data-tafel="4"] .h2 .akzent { -webkit-text-fill-color: var(--jade); }
}
@media (forced-colors: active) {
  .tafel[data-tafel="4"] .h2 [data-wort] { background: none; -webkit-text-fill-color: currentColor; }
}

/* Fortschrittsleiste */
.fortschritt {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 var(--rand) 40px;
}
.fortschritt__glied { display: flex; flex-direction: column; align-items: center; gap: 7px; }

/* Nummer statt Initiale: das "T" ueber "Teilen" wiederholte nur den ersten
   Buchstaben. Eine Nummer sagt zusaetzlich, der wievielte Schritt das ist,
   und passt zur Nummerierung der uebrigen Sektionen. */
.fortschritt__nr {
  font-family: var(--anzeige);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--papier-text-3);
  transition: color .45s var(--ease-out);
}
.fortschritt__punkt {
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: #1717174d;
  transition: background .45s var(--ease-out), transform .45s var(--ease-out),
              box-shadow .45s var(--ease-out);
}
.fortschritt__name {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--papier-text-3);
  transition: color .45s var(--ease-out);
}

/* Die Linie fuellt sich, statt nur dazuliegen: so sieht man nicht nur wo man
   ist, sondern auch wie weit man gekommen ist. */
.fortschritt__linie {
  position: relative;
  width: 44px;
  height: 1px;
  background: var(--papier-linie);
  margin-bottom: 4px;
}
.fortschritt__linie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--jade-papier);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.fortschritt__linie[data-voll="1"]::after { transform: scaleX(1); }

/* Bereits durchlaufen: gefuellt, aber ruhig. */
.fortschritt__glied[data-erledigt="1"] .fortschritt__punkt { background: rgba(0, 105, 78, .42); }
.fortschritt__glied[data-erledigt="1"] .fortschritt__nr,
.fortschritt__glied[data-erledigt="1"] .fortschritt__name { color: rgba(0, 105, 78, .68); }

/* Aktiv: groesser, mit Hof, damit das Auge ihn sofort findet. */
.fortschritt__glied[data-aktiv="1"] .fortschritt__punkt {
  background: var(--jade-papier);
  transform: scale(1.32);
  box-shadow: 0 0 0 4px rgba(0, 105, 78, .15);
}
.fortschritt__glied[data-aktiv="1"] .fortschritt__nr,
.fortschritt__glied[data-aktiv="1"] .fortschritt__name { color: var(--jade-papier); }

.prozess[data-dunkel="1"] .fortschritt__nr,
.prozess[data-dunkel="1"] .fortschritt__name { color: #f0f0f866; }
.prozess[data-dunkel="1"] .fortschritt__punkt { background: #f0f0f866; }
.prozess[data-dunkel="1"] .fortschritt__linie { background: var(--linie); }
.prozess[data-dunkel="1"] .fortschritt__linie::after { background: var(--jade); }
.prozess[data-dunkel="1"] .fortschritt__glied[data-erledigt="1"] .fortschritt__punkt { background: rgba(0, 192, 139, .45); }
.prozess[data-dunkel="1"] .fortschritt__glied[data-erledigt="1"] .fortschritt__nr,
.prozess[data-dunkel="1"] .fortschritt__glied[data-erledigt="1"] .fortschritt__name { color: rgba(0, 192, 139, .7); }
.prozess[data-dunkel="1"] .fortschritt__glied[data-aktiv="1"] .fortschritt__punkt { box-shadow: 0 0 0 4px rgba(0, 192, 139, .16); }
.prozess[data-dunkel="1"] .fortschritt__glied[data-aktiv="1"] .fortschritt__punkt { background: var(--jade); }
.prozess[data-dunkel="1"] .fortschritt__glied[data-aktiv="1"] .fortschritt__nr,
.prozess[data-dunkel="1"] .fortschritt__glied[data-aktiv="1"] .fortschritt__name { color: var(--jade); }

/* Handy (seit 01.10.2026, Dima): dieselbe Strecke wie am Desktop, Runterscrollen schiebt die
   Tafeln seitlich. Vorher war es hier eine Wisch-Reihe. Nur die Maße sind fürs schmale Bild.
   Die Schrittleiste steht wie am Desktop unten (Dima), aber mit 64 px Abstand: beim Scrollen
   schrumpft die Safari-Leiste von iOS 26 zu einer Pille, die die untersten rund 48 pt belegt.
   Ohne JS oder ohne Bewegung bleiben die Tafeln gestapelt (Regeln weiter unten). */
@media (max-width: 767px) {
  .tafel { padding: 0 var(--rand); }
  .tafel__zahl { font-size: clamp(160px, 55vw, 300px); }
  .tafel__zahl--naechste { display: none; }
  .fortschritt { padding: 0 var(--rand) 64px; }
  .fortschritt__linie { width: 16px; }
  .fortschritt__name { display: none; }
  /* Ohne Namen läge die Linie mittig zwischen Ziffer und Punkt, also an der Ziffer
     („01__02“). Unten ausrichten, damit sie durch die Punkte läuft (Punkt 7px, Mitte 3,5px). */
  .fortschritt { align-items: flex-end; }
  .fortschritt__linie { margin-bottom: 3px; }
}

/* Ohne JavaScript: Tafeln gestapelt, keine Strecke */
html:not(.js) .prozess__spur { height: auto; }
html:not(.js) .prozess__buehne { position: static; height: auto; overflow: visible; }
html:not(.js) .prozess__reihe { flex-direction: column; width: 100%; }
html:not(.js) .tafel { width: 100%; min-height: 80svh; padding: 80px var(--rand); }
html:not(.js) .fortschritt { display: none; }

/* ── 04 Leistungen ──────────────────────────────────────────── */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.karte {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: .5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche-1);
  transition: transform .34s var(--ease-out), box-shadow .34s var(--ease-out);
}
.karte:hover { transform: translateY(-5px); box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .5); }
.karte__feld p:not(.label) { margin: 4px 0 0; color: #f0f0f8d9; text-wrap: pretty; }
.karte .textlink { margin-top: auto; padding-top: 8px; }

/* ─── Bildkarten (Leistungen) ────────────────────────────────
   Bild randlos oben, Text darunter. auto-fit statt auto-fill:
   bei vier Karten auf einem breiten Schirm liesse auto-fill eine
   leere fuenfte Spalte stehen, auto-fit verteilt stattdessen. */
.karten--bild { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.karten--bild .karte { padding: 0; gap: 0; overflow: hidden; }

.karte__bild {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--flaeche-2);
  border-bottom: .5px solid var(--linie-weich);
}
.karte__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
/* Zoom nur mit echter Maus (sonst klebt :hover am Handy) und beim Antippen
   (.licht-an), damit Foto und Lichtschichten immer gemeinsam zoomen. */
@media (hover: hover) { .karte:hover .karte__bild img { transform: scale(1.04); } }
:is(.karte.licht-an, .karte.licht-auto) .karte__bild img { transform: scale(1.04); }

.karte__nummer {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border: .5px solid var(--linie-stark);
  border-radius: 9999px;
  background: #171717b3;
  backdrop-filter: blur(6px);
  color: var(--jade);
  font-size: 11px;
  letter-spacing: .14em;
}

.karte__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 20px;
}
/* Die Textspalte der Karte bleibt bei 221px, auch auf breiten Schirmen: dort
   kommen Spalten dazu, statt dass Karten wachsen. Eine am Viewport haengende
   Schrift macht den Titel dort also enger statt weiter. Gemessen lief
   "Individualsoftware" bei 1600px um 15px ueber. Daher niedrigerer Deckel,
   und Silbentrennung als Netz fuer lange Einzelwoerter. */
.h3--karte {
  margin: 0;
  font-size: clamp(19px, 1.4vw, 21px);
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}
.karte__kurz { margin: 0; color: #f0f0f8a6; text-wrap: pretty; }

/* ─── Licht in den Leistungsbildern (seit 01.10.2026, Dima) ─────
   Nur das Grüne im Bild bewegt sich. bilder/licht/ enthält je Bild genau
   diese grünen Teile als transparente Schicht (qa/licht-schichten.py).
   ::before legt sie schwarz über das Foto und nimmt den Linien etwas Licht,
   ::after legt sie additiv darüber, und eine Maske lässt das Licht wandern,
   je Motiv anders: die Linie entlang, Wellen nach außen, rund um die Form.
   Maus: solange die Karte überfahren wird. Touch: Antippen (app.js setzt
   .licht-an). In Ruhe steht die Animation, sie pausiert statt
   zurückzuspringen, damit das Ausblenden nicht ruckt.
   Die Hülle selbst bekommt weder opacity noch transform: sonst wäre sie eine
   eigene Ebene, und plus-lighter mischte nicht mehr mit dem Foto. */
@property --licht-p { syntax: '<percentage>'; inherits: false; initial-value: -30%; }
@property --licht-r { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --licht-w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.karte__licht { position: absolute; inset: 0; pointer-events: none; }
.karte__licht::before,
.karte__licht::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--licht-bild) center / cover no-repeat;
  opacity: 0;
  transition: opacity .3s var(--ease-in), transform .5s var(--ease-out);
}
.karte__licht::before { filter: brightness(0); }
.karte__licht::after {
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
  /* Grundlicht 30 % auf allen grünen Teilen, darüber das wandernde Licht. */
  -webkit-mask-image: var(--licht-maske), linear-gradient(#0000004d, #0000004d);
  mask-image: var(--licht-maske), linear-gradient(#0000004d, #0000004d);
  animation: var(--licht-art) var(--licht-dauer, 2.6s) var(--licht-kurve, cubic-bezier(.45, 0, .25, 1)) infinite paused;
}
@media (hover: hover) {
  .karte:hover .karte__licht::before { opacity: .55; }
  .karte:hover .karte__licht::after { opacity: 1; animation-play-state: running; }
  .karte:hover .karte__licht::before,
  .karte:hover .karte__licht::after { transform: scale(1.04); transition: opacity .3s var(--ease-out), transform .5s var(--ease-out); }
}
:is(.karte.licht-an, .karte.licht-auto) .karte__licht::before { opacity: .55; }
:is(.karte.licht-an, .karte.licht-auto) .karte__licht::after { opacity: 1; animation-play-state: running; }
:is(.karte.licht-an, .karte.licht-auto) .karte__licht::before,
:is(.karte.licht-an, .karte.licht-auto) .karte__licht::after { transform: scale(1.04); transition: opacity .3s var(--ease-out), transform .5s var(--ease-out); }

/* Drei Arten von Bewegung. Die Maske muss am ::after selbst stehen: dort
   läuft die Animation, und nur dort hat --licht-p/-r/-w den laufenden Wert. */
.karte__licht[data-art="lauf"]::after {
  --licht-art: licht-lauf;
  --licht-maske: linear-gradient(var(--licht-winkel, 90deg), #0000 calc(var(--licht-p) - 20%), #000 var(--licht-p), #0000 calc(var(--licht-p) + 20%));
}
.karte__licht[data-art="welle"]::after {
  --licht-art: licht-welle;
  --licht-kurve: cubic-bezier(.16, 1, .3, 1);
  --licht-maske: radial-gradient(circle at var(--licht-x) var(--licht-y), #0000 calc(var(--licht-r) - var(--licht-band, 5%)), #000 var(--licht-r), #0000 calc(var(--licht-r) + var(--licht-band, 5%)));
}
.karte__licht[data-art="kreis"]::after {
  --licht-art: licht-kreis;
  --licht-kurve: linear;
  --licht-maske: conic-gradient(from var(--licht-w) at var(--licht-x) var(--licht-y), #0000 0deg, #000 70deg, #0000 140deg, #0000 360deg);
}
@keyframes licht-lauf  { from { --licht-p: -30%; } to { --licht-p: 130%; } }
@keyframes licht-welle { from { --licht-r: 0%; } to { --licht-r: var(--licht-weit, 45%); } }
@keyframes licht-kreis { from { --licht-w: 0deg; } to { --licht-w: 360deg; } }

/* Je Motiv: Lage und Takt, gemessen an den Lichtschichten (Schwerpunkt, Bogenmitte) */
[data-licht="briefe"]  { --licht-bild: url(bilder/licht/ablaeufe-automatisieren.webp); --licht-dauer: 2.4s; }
[data-licht="telefon"] { --licht-bild: url(bilder/licht/telefonagent.webp); --licht-x: 37.7%; --licht-y: 54%; --licht-weit: 34%; --licht-band: 3.5%; --licht-dauer: 1.9s; }
[data-licht="chat"]    { --licht-bild: url(bilder/licht/chatbot.webp); --licht-x: 53%; --licht-y: 36%; --licht-dauer: 2.6s; }
[data-licht="lupe"]    { --licht-bild: url(bilder/licht/beratung.webp); --licht-x: 53%; --licht-y: 44%; --licht-weit: 14%; --licht-band: 3%; --licht-dauer: 2s; }
[data-licht="tafel"]   { --licht-bild: url(bilder/licht/schulung.webp); --licht-dauer: 2.8s; }
[data-licht="seite"]   { --licht-bild: url(bilder/licht/websites.webp); --licht-winkel: 150deg; --licht-dauer: 2.8s; }
[data-licht="zahnrad"] { --licht-bild: url(bilder/licht/individualsoftware.webp); --licht-x: 50%; --licht-y: 66%; --licht-dauer: 2.2s; }
[data-licht="handys"]  { --licht-bild: url(bilder/licht/apps.webp); --licht-winkel: 100deg; --licht-dauer: 2.6s; }

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung: die grünen Teile leuchten beim Überfahren nur etwas auf. */
  .karte__licht::before { display: none; }
  .karte__licht::after { animation: none; -webkit-mask-image: none; mask-image: none; }
  .karte:hover .karte__licht::after, .karte.licht-an .karte__licht::after { opacity: .5; }
}

/* ── 05 Rechner ─────────────────────────────────────────────── */

.rechner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  border: .5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche-1);
}
.feld { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.feld legend { padding: 0; }
.pillenreihe { display: flex; flex-wrap: wrap; gap: 8px; }

.stepper { display: flex; align-items: center; gap: 4px; }
.stepper__knopf {
  width: 38px; height: 38px;
  border: .5px solid var(--linie-stark);
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--dauer-hover) var(--ease-out);
}
.stepper__knopf:hover { border-color: #ffffff59; }
.stepper__wert {
  min-width: 56px;
  text-align: center;
  font-family: var(--anzeige);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.ergebnis {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: .5px solid var(--jade);
}
.ergebnis[hidden] { display: none; }
.ergebnis__zahl {
  margin: 0;
  font-family: var(--anzeige);
  /* Deckel bei 56px: darüber passt "5.500 – 23.200 €" in Monospace
     nicht mehr in die 680er-Bahn und das Euro-Zeichen bricht um. */
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
}
/* "pro Jahr" als eigene kleine Zeile direkt unter der Spanne. Neben der Zahl passt es
   in der 680er-Bahn nicht (bricht schon bei "5.500 – 23.200 €" um und hing dann mit
   einer vollen 56px-Zeile Abstand darunter), so steht es auf allen Breiten gleich. */
.ergebnis__einheit {
  display: block;
  margin-top: 6px;
  font-size: max(13px, .32em);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .02em;
  color: var(--text-2);
}
.ergebnis__zeit { margin: 0; color: var(--text-2); }
.ergebnis__formel { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-3); }
.ergebnis__formel .label { display: block; margin-bottom: 4px; }
/* Zeilenhöhe und balance: "Hier lohnt sich ein System nicht." bricht in der Bahn um,
   sonst stünde "nicht." allein mit Fließtext-Abstand in der zweiten Zeile. */
.ergebnis__knapp-titel { margin: 0; font-family: var(--anzeige); font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.ergebnis--knapp { border-top-color: var(--linie-stark); }
.ergebnis--knapp p { color: var(--text-2); }
.ergebnis .pille--jade { align-self: flex-start; }

/* ── Listen ─────────────────────────────────────────────────── */



/* ── Compliance (seit 03.10.2026, Dima) ─────────────────────────   Nach Dimas Vorlagebild, Label „05 · Compliance“ wie alle Sektionen (Dima), Überschrift mit
   Jade-Hälfte, drei Kacheln (Zeichen, Titel, Satz, Haken-Pille), darunter ein Aufruf
   zum Erstgespräch. Jade statt Gold, Hausschriften, Hairlines. Die Kacheln sind keine
   Links und heben sich deshalb beim Überfahren nicht (critique 02.10.: Karten, die
   sich heben, wirken wie Links ohne Ziel). */
.compliance__kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.compliance__haken svg,
.compliance__zeichen svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compliance .h2 { max-width: 16em; }

/* Eine Spalte am Handy, 640 bis 899 px zwei (die dritte Kachel über beide), ab 900 px drei. */
.compliance__kacheln {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.compliance__kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;  padding: 36px 24px 30px;
  border: .5px solid var(--linie);
  border-radius: 14px;
  /* Leichtes Jade-Licht von oben, wie der Schein in der Vorlage */
  background: radial-gradient(110% 55% at 50% 0%, #00c08b14, transparent 72%), var(--flaeche-1);
  text-align: center;
}
.compliance__zeichen {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border: .5px solid #00c08b4d;
  border-radius: 14px;
  background: #00c08b14;
  color: var(--jade);
}
.compliance__zeichen svg { width: 24px; height: 24px; stroke-width: 1.5; }
.compliance__titel { font-size: clamp(19px, 1.6vw, 22px); }
.compliance__text { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.65; color: #f0f0f8a6; text-wrap: pretty; }
/* Haken-Pille unten bündig, auch wenn ein Satz eine Zeile länger ist. Neutral, nicht Jade:
   kein grünes Häkchen und kein Jade-Kleintext (PRODUCT.md Prinzip 5, DESIGN.md). */
.compliance__haken {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: auto 0 0;
  padding: 5px 12px 5px 10px;  border: .5px solid var(--linie-stark);
  border-radius: 9999px;
  background: var(--flaeche-1);
  color: #f0f0f8cc;
  font-size: 11px;
  letter-spacing: .04em;
}
.compliance__haken svg { width: 12px; height: 12px; stroke-width: 2.2; }

.compliance__aufruf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;  padding: 28px 32px;
  border: .5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche-1);
}
.compliance__frage {
  margin: 0;
  max-width: 34ch;
  font-family: var(--anzeige);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}
@media (min-width: 640px) {
  .compliance__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compliance__kachel:last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .compliance__kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compliance__kachel:last-child { grid-column: auto; }
}
@media (max-width: 639px) {
  .compliance__kachel { padding: 28px 20px 24px; gap: 12px; }
  .compliance__zeichen { width: 44px; height: 44px; margin-bottom: 2px; }
  .compliance__aufruf { padding: 24px 20px; }
  .compliance__aufruf .pille { width: 100%; }
}

/* ── 07 FAQ ─────────────────────────────────────────────────── */

.faq { display: flex; flex-direction: column; }
.faq__eintrag { border-top: .5px solid var(--linie); }
.faq__eintrag:last-child { border-bottom: .5px solid var(--linie); }
.faq__eintrag summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  text-wrap: pretty;
}
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__nr { font-size: 10px; letter-spacing: .08em; color: var(--text-3); flex: none; }
.faq__plus {
  position: relative;
  margin-left: auto;
  width: 12px; height: 12px;
  flex: none;
  transition: transform var(--dauer-zustand) var(--ease-out);
}
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  background: var(--text-2);
}
.faq__plus::before { left: 0; top: 5.75px; width: 12px; height: .5px; }
.faq__plus::after  { top: 0; left: 5.75px; height: 12px; width: .5px; }
.faq__eintrag[open] .faq__plus { transform: rotate(45deg); }
.faq__antwort { padding: 0 0 22px; }
.faq__antwort p { margin: 0; color: var(--text-2); }

/* Sanftes Auf- und Zuklappen, nur mit JS */
.js .faq__antwort { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dauer-zustand) var(--ease-out); }
.js .faq__antwort > p { overflow: hidden; }
.js .faq__eintrag[open] .faq__antwort { grid-template-rows: 1fr; }
.js .faq__eintrag.schliesst .faq__antwort { grid-template-rows: 0fr; }
.js .faq__eintrag.schliesst .faq__plus { transform: none; }

/* ── 08 Kontakt ─────────────────────────────────────────────── */

/* Variante H (Dima, 01.10.2026): die ganze Sektion liegt im Hero-Verlauf, so endet die
   Seite im Ton, in dem sie beginnt. Der Verlauf sitzt wie beim Hero auf z-index -2 unter
   der Raster-Leinwand, damit Punktraster und Klick-Welle sichtbar bleiben. Unten läuft er
   in den Seitengrund aus, damit zur Schlusszeile keine harte Kante entsteht. */
.sektion--kontakt { position: relative; }
.sektion--kontakt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(rgba(23, 23, 23, 0) calc(100% - 96px), var(--grund)), var(--hero-verlauf);
  pointer-events: none;
}
/* Ohne JS malt der body Grund und Raster selbst und läge über -2 (wie beim Hero). */
html:not(.js) .sektion--kontakt::after { z-index: 0; }
.sektion--kontakt > .bahn { position: relative; z-index: 1; }

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 36px;
  align-items: start;
}
.kontakt__kopf { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.kontakt__kopf .label { color: var(--text-2); }
.kontakt__kopf .h2 { font-size: clamp(48px, 6.5vw, 88px); }
/* Überschrift im Verlauf der H1, Punkt bleibt Jade (wie Hero und die letzte Ablauf-Tafel) */
.kontakt__kopf .h2 [data-wort] { display: inline-block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kontakt__kopf .h2 [data-wort] {
    background: linear-gradient(180deg, var(--text) 0%, var(--text) 30%, #B8AAA6 62%, #5A4A47 88%, #312726 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .kontakt__kopf .h2 .akzent { -webkit-text-fill-color: var(--jade); }
}
@media (forced-colors: active) {
  .kontakt__kopf .h2 [data-wort] { background: none; -webkit-text-fill-color: currentColor; }
}
.kontakt__weg { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; }
.kontakt__punkt { width: 6px; height: 6px; flex: none; border-radius: 9999px; background: var(--jade); }
.kontakt__mail {
  display: inline-flex;
  align-items: center;
  font-family: var(--anzeige);
  font-size: clamp(16px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Allgemeine Formular-Bausteine. Auch das OTP-Werkzeug (otp-link/) nutzt sie,
   deshalb hier unverändert; der Kontakt legt seine Karte darüber (.kontakt …). */
.formular { display: flex; flex-direction: column; gap: 24px; }
.formular__feld { display: flex; flex-direction: column; gap: 6px; }
.formular__feld label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.formular__feld input, .formular__feld textarea {
  padding: 8px 0;
  border: 0;
  border-bottom: .5px solid var(--linie-stark);
  background: transparent;
  outline: none;
  resize: vertical;
  transition: border-color var(--dauer-zustand) var(--ease-out);
}
.formular__feld input:focus, .formular__feld textarea:focus { border-bottom-color: var(--jade); }
.formular__feld--jade input { border-bottom-color: var(--jade); }
.formular__feld--jade input::placeholder { color: var(--text-3); }
.formular .pille { align-self: flex-start; }
.formular__notiz { margin: 0; font-size: 12px; color: var(--text-3); }
.formular__optional { color: var(--text-3); text-transform: none; letter-spacing: 0; }

/* Fehlerhinweis am Feld. Kein Rot, kein Grün: die Seite kennt nur
   Helligkeit und Hairlines als Zustand. */
.formular__fehler { margin: 0; font-size: 11px; line-height: 1.5; color: var(--text); }
.formular__fehler:empty { display: none; }
.formular__feld input[aria-invalid="true"],
.formular__feld textarea[aria-invalid="true"] { border-bottom-color: var(--text); }

/* Kontakt: Formular als dunkle Karte auf dem Verlauf, Felder gefüllt.
   16 px in den Feldern, sonst zoomt iOS Safari beim Antippen hinein. */
.kontakt .formular {
  gap: 20px;
  padding: clamp(24px, 3vw, 36px);
  border: .5px solid var(--linie-stark);
  border-radius: 14px;
  background: rgba(23, 23, 23, .92);
}
.kontakt .formular__feld { gap: 8px; }
.kontakt .formular__feld label { color: #f0f0f8a6; }
.kontakt .formular__feld input, .kontakt .formular__feld textarea {
  width: 100%;
  padding: 14px 16px;
  border: .5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche-3);
  font-size: 16px;
  line-height: 1.5;
}
.kontakt .formular__feld textarea { min-height: 128px; line-height: 1.6; }
.kontakt .formular__feld input:focus, .kontakt .formular__feld textarea:focus { border-color: var(--jade); }
.kontakt .formular__feld input[aria-invalid="true"],
.kontakt .formular__feld textarea[aria-invalid="true"] { border-color: var(--text); }
/* Fokus schlägt den Fehlerzustand, sonst sieht man nicht, wo man gerade tippt. */
.kontakt .formular__feld input[aria-invalid="true"]:focus,
.kontakt .formular__feld textarea[aria-invalid="true"]:focus { border-color: var(--jade); }
.kontakt .formular .pille { align-self: stretch; height: 52px; font-size: 12px; }
.kontakt .formular .pille[aria-disabled="true"] { opacity: .6; cursor: progress; }
.kontakt .formular__notiz { color: #f0f0f8a6; text-align: center; line-height: 1.6; }
.kontakt .formular__notiz:empty { display: none; }
/* Die Mail-Adresse im Fehlerfall nie am Bindestrich umbrechen: sonst liest man „aevum-“ als Trennung. */
.kontakt .formular__notiz a[href^="mailto:"] { white-space: nowrap; }
/* Datenschutz-Hinweis am Knopf (03.10.2026): links wie die Feld-Beschriftungen und heller
   als die Status-Notiz, weil er gelesen werden soll (Art. 13 DSGVO). */
.kontakt .formular__notiz.kontakt__datenschutz { text-align: left; color: #f0f0f8b8; }
/* Bestätigung nach dem Senden: ersetzt die Felder, die Karte behält ihre Höhe (app.js setzt
   min-height), der Text steht mittig. Hairline oben statt Grün. */
.kontakt .formular--gesendet { justify-content: center; }
.kontakt .formular--gesendet > :not(.formular__danke) { display: none; }
.kontakt .formular__danke { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 20px; border-top: .5px solid var(--linie-stark); outline: none; }
.kontakt .formular__danke[hidden] { display: none; }
.kontakt .formular__danke-titel { margin: 0; font-family: var(--anzeige); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--text); }
.kontakt .formular__danke-text { margin: 0; font-size: 14px; line-height: 1.6; color: #f0f0f8a6; overflow-wrap: anywhere; }
.kontakt .formular__neu { min-height: 44px; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
/* Bot-Falle (seit 02.10.2026): aus dem Fluss und außer Sicht, nicht display:none,
   weil manche Bots versteckte Felder daran erkennen und auslassen. */
.kontakt .formular__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 899px) {
  .kontakt { grid-template-columns: 1fr; }
  .kontakt__kopf .h2 { font-size: clamp(36px, 10vw, 56px); }
}

/* ── 09 Footer ──────────────────────────────────────────────── */

.fuss { padding: 40px var(--rand); border-top: .5px solid var(--linie); font-size: 11px; letter-spacing: .04em; color: var(--text-2); }
/* Drei Spalten seit 01.10.2026: Telefon und Standort sind raus (Dima), Kontakt nur per Mail. */
.fuss__raster { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 24px; }
.fuss__raster > div { display: flex; flex-direction: column; gap: 8px; }
.fuss__raster a { text-decoration: none; color: var(--text); }
.fuss__raster a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Aktuelle Unterseite im Fuß sichtbar markieren, nicht nur per aria-current */
.fuss__raster a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--text-2); }
.fuss__raster p { margin: 0; }
.fuss__marke {
  display: flex; align-items: center; gap: 12px;
  padding-top: 24px;
  border-top: .5px solid var(--linie-weich);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
/* Logo (Wortmarke der Logo-Runde, dunkle Fassung) statt Punkt und Schriftzug, Dima 01.10.2026 */
.fuss__logo { display: block; width: auto; height: 22px; }

@media (max-width: 767px) {
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .fuss__raster > div:first-child { grid-column: 1 / -1; }   /* Mail-Adresse braucht die volle Breite */
}

/* ── Reveal-System ──────────────────────────────────────────── */

.js [data-reveal].verborgen { opacity: 0; transform: translateY(40px); }
.js [data-reveal].sichtbar {
  opacity: 1; transform: none;
  transition: opacity var(--dauer-reveal) var(--ease-out), transform var(--dauer-reveal) var(--ease-out);
}
.js [data-staffel].verborgen > * { opacity: 0; transform: translateY(24px); }
.js [data-staffel].sichtbar > * { opacity: 1; transform: none; }
.js [data-worte].verborgen [data-wort] { opacity: 0; filter: blur(10px); }
.js [data-worte].sichtbar [data-wort] { opacity: 1; filter: blur(0); }
.js [data-hero].verborgen { opacity: 0; }
.js [data-hero].sichtbar { opacity: 1; transition: opacity var(--dauer-reveal) var(--ease-out); }

/* ── Bewegung aus ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .prozess__spur { height: auto; }
  .prozess__buehne { position: static; height: auto; overflow: visible; }
  .prozess__reihe { flex-direction: column; width: 100%; transform: none !important; }
  .tafel { width: 100%; min-height: 0; padding: 80px var(--rand); }
  .fortschritt { display: none; }
  .js [data-reveal].verborgen,
  .js [data-staffel].verborgen > *,
  .js [data-worte].verborgen [data-wort],
  .js [data-hero].verborgen { opacity: 1; transform: none; filter: none; }
}

/* ── Bewegung, Runde 01.10.2026 (Wissen aus jeskojets.com) ──── */

/* Glattes Mausrad: Lenis aus vendor/, nur Startseite, nur mit Maus/Trackpad.
   Regeln aus lenis.css. Unter .lenis-smooth gleitet Lenis, CSS darf nicht mitglätten. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Die "nächste" Riesenziffer am rechten Rand lag über der Ziffer der
   Nachbartafel. Jede Tafel zeigt nur noch ihre eigene. */
.tafel__zahl--naechste { display: none; }

/* Weiche Kante: der dunkle Hero geht über 96px ins Papier über, statt hart zu schneiden.
   Startet bei Schwarz, weil der Hero-Verlauf seit 01.10.2026 dort endet. */
.prozess { position: relative; }
.prozess::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 96px;
  background: linear-gradient(#000, rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 3;   /* über der Bühne, die seit 01.10.2026 eine eigene Farbe trägt */
}

/* Strecke (data-bewegt setzt strecke(), alle Breiten): die Linien der Leiste füllen sich stetig. */
.prozess[data-bewegt] .fortschritt__linie::after { transform: scaleX(var(--fuell, 0)); transition: none; }

/* Die Bühne wird mit jedem Scrollen dunkler (Dima 01.10.2026, ersetzt die Front der letzten Tafel).
   ::before trägt den Ton von Papier über 01 bis 03 (--ablauf-farbe, Punkte --ablauf-punkt),
   ::after blendet im letzten Schritt den Hero-Verlauf darüber (--ablauf-nacht 0 bis 1).
   Alle drei setzt strecke(). Die Tafeln sind dabei durchsichtig, nur ihr Text kippt. */
.prozess[data-bewegt][data-dunkel="1"] {
  background-color: var(--papier);
  background-image: radial-gradient(var(--papier-raster) 1px, transparent 1px);
  color: var(--papier-text);
}
.prozess[data-bewegt] .tafel { background: none; }
.prozess[data-bewegt] .prozess__reihe { position: relative; z-index: 1; }
.prozess[data-bewegt] .prozess__buehne::before,
.prozess[data-bewegt] .prozess__buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.prozess[data-bewegt] .prozess__buehne::before {
  background-color: var(--ablauf-farbe, var(--papier));
  background-image: radial-gradient(var(--ablauf-punkt, var(--papier-raster)) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 11px 11px;
}
.prozess[data-bewegt] .prozess__buehne::after {
  background: radial-gradient(var(--raster) 1px, transparent 1px) 11px 11px / 22px 22px, var(--hero-verlauf);
  opacity: var(--ablauf-nacht, 0);
}
/* Fortschrittsleiste auf der dunkler werdenden Bühne: Schrift neutral statt Grün, Jade bleibt
   für Punkte und Linien. Grün hätte auf 02 nur 2,7:1, Jade auf 03 nur 3,3:1. Hier: aktiv volle
   Textfarbe (02: 7,2:1, 03: 6,9:1), alle anderen 75 % (02: 4,5:1, 03: 4,7:1). */
.prozess[data-bewegt] .fortschritt__glied .fortschritt__nr,
.prozess[data-bewegt] .fortschritt__glied .fortschritt__name { color: rgba(23, 23, 23, .75); }
.prozess[data-bewegt] .fortschritt__glied[data-aktiv="1"] .fortschritt__nr,
.prozess[data-bewegt] .fortschritt__glied[data-aktiv="1"] .fortschritt__name { color: var(--papier-text); }
.prozess[data-bewegt][data-dunkel="1"] .fortschritt__glied .fortschritt__nr,
.prozess[data-bewegt][data-dunkel="1"] .fortschritt__glied .fortschritt__name { color: rgba(240, 240, 248, .75); }
.prozess[data-bewegt][data-dunkel="1"] .fortschritt__glied[data-aktiv="1"] .fortschritt__nr,
.prozess[data-bewegt][data-dunkel="1"] .fortschritt__glied[data-aktiv="1"] .fortschritt__name { color: var(--text); }

/* Die Strecke endet schwarz (Hero-Verlauf), die Leistungen beginnen auf #171717: weiche Kante.
   Gestapelt (ohne JS oder ohne Bewegung) endet der Ablauf mit Tafel 04 ebenfalls schwarz. */
.prozess[data-bewegt] + .sektion::after,
html:not(.js) .prozess + .sektion::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(#000, rgba(0, 0, 0, 0));
  pointer-events: none;
}
html:not(.js) .prozess + .sektion { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .prozess + .sektion { position: relative; }
  .prozess + .sektion::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(#000, rgba(0, 0, 0, 0));
    pointer-events: none;
  }
}

@property --ein { syntax: '<number>'; inherits: true; initial-value: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Tafeln kommen an, statt vorbeizufahren. --ein (0 bis 1, kommt) und --aus
     (0 bis 1, geht) setzt strecke() aus der Scrollposition, Reihenfolge über --k. */
  .js .tafel:not(.tafel--titel) :is(.h2, .tafel__strich, .tafel__satz) {
    --t: clamp(0, calc(var(--ein) * 1.7 - var(--k, 0) * .14), 1);
    opacity: calc(var(--t) * (1 - var(--aus, 0) * .6));
    transform: translateY(calc((1 - var(--t)) * 10px));
  }
  .js .tafel:not(.tafel--titel) .tafel__strich { transform: scaleX(var(--t)); transform-origin: left; }
  .tafel__strich { --k: 1; }
  .tafel__satz { --k: 2; }
}

/* ── Bewegung, Runde 01.10.2026, Teil 2 ─────────────────────── */

/* Dritte Kurve für alles, was geht: langsam ankommen, doppelt so schnell gehen. */
:root { --ease-in: cubic-bezier(.5, 0, .75, 0); }

/* Heben: Blöcke steigen 24 statt 40px. */
.js [data-reveal].verborgen { transform: translateY(24px); }

/* Fokus: der Hero-Lead wird als Block scharf (höchstens 6px Unschärfe). */
.js [data-hero="lead"].verborgen { filter: blur(6px); }
.js [data-hero="lead"].sichtbar {
  filter: none;
  transition: opacity var(--dauer-reveal) var(--ease-out), filter var(--dauer-reveal) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  /* Ziehen: Sektionsgrenzen zeichnen sich von der Mitte nach außen, sobald die
     Sektion ins Bild kommt (Klasse .gezogen aus app.js). */
  .js .sektion { position: relative; border-top-color: transparent; }
  .js .sektion::before {
    content: "";
    position: absolute;
    top: -.5px; left: 0; right: 0;
    border-top: .5px solid var(--linie-weich);
    transform: scaleX(0);
    transition: transform var(--dauer-reveal) var(--ease-out);
  }
  .js .sektion.gezogen::before { transform: scaleX(1); }

  /* FAQ-Linien ziehen sich von links, eine nach der anderen. */
  .js .faq__eintrag { position: relative; border-top-color: transparent; }
  .js .faq__eintrag::before {
    content: "";
    position: absolute;
    top: -.5px; left: 0; right: 0;
    border-top: .5px solid var(--linie);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dauer-reveal) var(--ease-out);
  }
  .js .faq.gezogen .faq__eintrag::before { transform: scaleX(1); }
  .faq__eintrag:nth-child(2)::before { transition-delay: .05s; }
  .faq__eintrag:nth-child(3)::before { transition-delay: .1s; }
  .faq__eintrag:nth-child(4)::before { transition-delay: .15s; }
  .faq__eintrag:nth-child(5)::before { transition-delay: .2s; }
  .faq__eintrag:nth-child(6)::before { transition-delay: .25s; }
  .faq__eintrag:nth-child(7)::before { transition-delay: .3s; }
  .faq__eintrag:nth-child(8)::before { transition-delay: .35s; }

  /* Leistungsbilder entwickeln sich von unten, statt nur einzublenden.
     --verzug setzt app.js je Karte, passend zur Staffel. */
  .js [data-staffel].verborgen .karte__bild img { clip-path: inset(100% 0 0 0); }
  .js [data-staffel].sichtbar .karte__bild img {
    clip-path: inset(0 0 0 0);
    transition: clip-path var(--dauer-reveal) var(--ease-out) calc(var(--verzug, 0s) + .1s),
                transform .5s var(--ease-out);
  }

  /* Textlinks auf der Seite (nicht in der Kapsel): der Unterstrich zieht sich
     wie ein Maßband von links auf und verschwindet nach rechts. */
  main .textlink, .fuss .textlink {
    text-decoration: none;
    padding-bottom: 3px;
    background-image: linear-gradient(currentColor, currentColor),
                      linear-gradient(color-mix(in srgb, currentColor 28%, transparent), color-mix(in srgb, currentColor 28%, transparent));
    background-size: 0% .5px, 100% .5px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size .3s var(--ease-in);
  }
  main .textlink:hover, main .textlink:focus-visible,
  .fuss .textlink:hover, .fuss .textlink:focus-visible {
    background-size: 100% .5px, 100% .5px;
    background-position: 0 100%, 0 100%;
    transition: background-size .6s var(--ease-out);
  }

  /* Knöpfe geben beim Drücken kurz nach. */
  main .pille, .kopf__cta { transition: opacity var(--dauer-hover) var(--ease-out), border-color var(--dauer-hover) var(--ease-out),
                            background-color var(--dauer-zustand) var(--ease-out), color var(--dauer-zustand) var(--ease-out),
                            outline-color var(--dauer-zustand) var(--ease-out), transform .15s var(--ease-out); }
  main .pille:active, .kopf__cta:active { transform: scale(.97); }

  /* FAQ: auf langsam (0,6 s), zu schnell (0,3 s), Antwort nur über die Deckkraft. */
  .js .faq__antwort { transition: grid-template-rows .6s var(--ease-out); }
  .js .faq__eintrag.schliesst .faq__antwort { transition: grid-template-rows .3s var(--ease-in); }
  .faq__plus { transition: transform .6s var(--ease-inout); }
  .js .faq__antwort > p { opacity: 0; transition: opacity .3s var(--ease-in); }
  .js .faq__eintrag[open]:not(.schliesst) .faq__antwort > p { opacity: 1; transition: opacity .6s var(--ease-out) .1s; }
}

/* Jade-Knopf: beim Überfahren eine feine Jade-Kontur mit Abstand statt Ausgrauen.
   Gilt auch für „Erstgespräch“ in der Kopfleiste (Dima 01.10.2026: muss gleich sein). */
main .pille--jade, .kopf__cta { outline: .5px solid transparent; outline-offset: 3px; }
main .pille--jade:hover, .kopf__cta:hover { opacity: 1; outline-color: var(--jade); }

/* Eingabefelder: Cursor in Jade. */
main input, main textarea { caret-color: var(--jade); }
/* Der Tastatur-Fokus bleibt kräftig (2px) und schlägt die Hover-Kontur. */
main .pille--jade:focus-visible, .kopf__cta:focus-visible { outline: 2px solid var(--jade); }

/* ── Lader „Würfel“ (Dimas Wahl, 02.10.2026) ─────────────────────
   Ersetzt den „Lichtschnitt“. Der Würfel steht auf dem Hero-Ton und löst sich in
   drei Zügen, je Zug ein Wort. Seit 02.10. in 3D (lader-3d.js, three.js), Satz, Linie und
   2D-Rückfall in lader.js; hier nur Bühne, Satz und Ausblenden. Vertrag mit app.js bleibt: --lader-dauer, bei 68 % startet
   der Hero (LADER_AUF), bei 100 % entfernt app.js den Lader. Nur mit .mit-lader. */
.lader { display: none; }
.mit-lader .lader {
  --lader-dauer: 4.4s;
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.lader-kurz .lader { --lader-dauer: 1.3s; }
.lader-sperrt, .lader-sperrt body { overflow: hidden; }

.lader__raum {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.5vh, 16px);
  background: radial-gradient(var(--raster) 1px, transparent 1px) 11px 11px / 22px 22px, var(--hero-verlauf);
  animation: lader-raum var(--lader-dauer) both;
}
/* Bühne des Würfels: unten die WebGL-Leinwand (3D-Würfel, lader-3d.js), darüber die
   2D-Leinwand mit Lichtlinie und Rückfall-Würfel (lader.js). Der 3D-Würfel blendet ein,
   sobald three.js bereit ist (.an). */
.lader__buehne {
  position: relative;
  width: min(86vw, 52vh, 520px);
  aspect-ratio: 1 / .96;
}
.lader__wuerfel,
.lader__wuerfel3d {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.lader__wuerfel3d { opacity: 0; transition: opacity .8s var(--ease-out); }
.lader__wuerfel3d.an { opacity: 1; }

.lader__satz {
  margin: 0;
  max-width: none;
  padding: 0 var(--rand);
  font-family: var(--anzeige);
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.5;
  text-align: center;
  color: var(--text);
}
.lader__zeile { white-space: nowrap; }
@media (max-width: 639px) { .lader__zeile { display: block; } }
.lader__wort {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.lader__wort.an { opacity: 1; transform: none; }
.lader__wort.an.leise { opacity: .4; }

/* Übergang „Würfel wird zur Erde“ (Dima 02.10.2026): bei 68 % übernimmt der
   Globus-Anflug den Würfel als Punktwolke an derselben Stelle (lader.js tastet ihn
   ab, app.js lässt die Punkte dort starten). Deshalb blendet der Lader jetzt in
   rund 0,44 s aus statt in 1,4 s und ohne Vergrößerung, sonst stünde der Würfel
   als Doppelbild im Globus. */
@keyframes lader-raum {
  0%, 68% { opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  78%, to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .lader { display: none !important; } }

/* ══ Garderobe: Cookies und Speicher (seit 03.10.2026, Dima) ═════════════════
   Keine Cookies, kein Banner (Recherche 03.10.: nichts auf der Seite braucht eine
   Einwilligung). Stattdessen eine Garderobenmarke: Sie zeigt live, was diese Website gerade
   im Browser liegen hat, meistens nichts. Startseite in „05 · Compliance“, die Seite
   /cookies/ mit je einer Marke pro möglichem Eintrag, Satz im Fuß aller Seiten.
   Logik in garderobe.js (liest und löscht nur, schreibt nie).
   Form: Abschnitt mit Nummer links, Perforation aus Rasterpunkten (halber Rastertakt, 11 px),
   zwei Kerben an der Perforation. Am Handy steht der Abschnitt oben, Perforation waagerecht.
   Bewegung: Die Marke wird von unten „ausgegeben“ (wie die Leistungsbilder), die Perforation
   erscheint Punkt für Punkt, die Zahl rollt bei Änderungen, „Entfernen“ reißt den Teil rechts
   der Perforation ab. Bei reduzierter Bewegung nichts davon. */

.marke {
  --stummel: 132px;           /* Breite des Abschnitts mit der Nummer */
  --stummel-hoehe: 72px;      /* Höhe des Abschnitts am Handy */
  --kerbe: 9px;               /* Radius der Kerben */
  --kerbe-rand: calc(var(--kerbe) + 6px);
  --kerben: radial-gradient(circle var(--kerbe) at var(--stummel) 0, #0000 97%, #000) top / 100% 51% no-repeat,
            radial-gradient(circle var(--kerbe) at var(--stummel) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  position: relative;
  display: grid;
  grid-template-columns: var(--stummel) minmax(0, 1fr);
  border: .5px solid var(--linie);
  border-radius: 14px;
  /* Jade-Licht hinter der Nummer, wie der Schein der Compliance-Kacheln */
  background: radial-gradient(90% 150% at 0% 50%, #00c08b14, transparent 60%), var(--flaeche-1);
  -webkit-mask: var(--kerben);
  mask: var(--kerben);
}

.marke__abschnitt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px 12px;
}
.marke__nr-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* Beide Ziffern liegen beim Rollen in derselben Zelle übereinander, overflow schneidet ab. */
.marke__nr {
  display: inline-grid;
  overflow: hidden;
  font-family: var(--anzeige);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  color: var(--jade);
}
.marke__ziffer { grid-area: 1 / 1; }

.marke__koerper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 32px;
  padding: 26px 30px;
}
/* Perforation: eine Reihe Punkte im halben Rastertakt, die Kerben oben und unten bleiben frei. */
.marke__koerper::before {
  content: "";
  position: absolute;
  left: -1px;
  top: var(--kerbe-rand);
  bottom: var(--kerbe-rand);
  width: 2px;
  background: radial-gradient(circle, #ffffff52 0 .85px, transparent 1.1px) center top / 2px 11px repeat-y;
}
.marke__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.marke__titel {
  margin: 0;
  font-family: var(--anzeige);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}
.marke__titel:focus { outline: none; }
.marke__satz { margin: 0; font-size: 15px; line-height: 1.6; color: #f0f0f8a6; }
.marke__knopf { white-space: nowrap; }
.marke__pfeil { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dauer-zustand) var(--ease-out); }
.marke__knopf:hover .marke__pfeil { transform: translateX(3px); }

/* Handy: Abschnitt oben, Perforation waagerecht, Kerben links und rechts */
@media (max-width: 639px) {
  .marke {
    --kerben: radial-gradient(circle var(--kerbe) at 0 var(--stummel-hoehe), #0000 97%, #000) left / 51% 100% no-repeat,
              radial-gradient(circle var(--kerbe) at 100% var(--stummel-hoehe), #0000 97%, #000) right / 51% 100% no-repeat;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--stummel-hoehe) auto;
    background: radial-gradient(150% 90% at 50% 0%, #00c08b14, transparent 60%), var(--flaeche-1);
  }
  .marke__abschnitt { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 12px; padding: 0 20px; align-self: center; }
  .marke__nr { font-size: 40px; }
  .marke__koerper { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 24px; }
  .marke__koerper::before {
    top: -1px;
    bottom: auto;
    left: var(--kerbe-rand);
    right: var(--kerbe-rand);
    width: auto;
    height: 2px;
    background: radial-gradient(circle, #ffffff52 0 .85px, transparent 1.1px) left center / 11px 2px repeat-x;
  }
  .marke__knopf { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Ausgeben: die Marke schiebt sich von unten heraus statt nur einzublenden.
     Der clip-path läuft erst als Animation, wenn die Marke .sichtbar ist. Im Zustand .verborgen
     darf er NICHT auf dem beobachteten Element liegen: Chromium rechnet ihn (zusammen mit Maske
     und transform) in den IntersectionObserver ein, die Schnittfläche bleibt 0 und die Marke
     erscheint am Handy nie (Review 03.10.2026, gemessen 375 bis 390 px). */
  .js .marke[data-reveal].sichtbar {
    transition: transform var(--dauer-reveal) var(--ease-out);
    animation: marke-ausgeben var(--dauer-reveal) var(--ease-out) backwards;
  }
  @keyframes marke-ausgeben {
    from { clip-path: inset(100% 0 0 0 round 14px); }
    to   { clip-path: inset(0 0 0 0 round 14px); }
  }
  /* Perforation Punkt für Punkt, nachdem die Marke da ist (steps statt Gleiten). */
  .js .marke[data-reveal].verborgen .marke__koerper::before { clip-path: inset(0 0 100% 0); }
  .js .marke[data-reveal].sichtbar .marke__koerper::before { clip-path: inset(0); transition: clip-path .6s steps(10, end) .55s; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639px) {
  .js .marke[data-reveal].verborgen .marke__koerper::before { clip-path: inset(0 100% 0 0); }
}

/* ── Seite cookies/: eine Marke je möglichem Eintrag ─────────── */
/* Kopfmarke in der schmalen Rechtsbahn (660 px): Knopf unter den Text, sonst bricht der
   Satz neben dem breiten „Wirklich alles entfernen?“ dreizeilig um */
.recht .marke:not(.marke--haken) .marke__koerper { grid-template-columns: minmax(0, 1fr); align-items: start; }
.recht .marke:not(.marke--haken) .marke__knopf { justify-self: start; }
.garderobe { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
/* recht.css setzt für Listen Strich, Einzug und 8 px Abstand: für die Marken aufheben */
.recht .garderobe { gap: 14px; }
.recht .garderobe > li { padding-left: 0; }
.recht .garderobe > li::before { content: none; }
.marke--haken { --stummel: 96px; }
.marke--haken .marke__nr { font-size: 32px; }
.marke--haken .marke__koerper { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; padding: 24px 26px; }
.marke--haken .marke__titel { font-size: clamp(18px, 1.8vw, 21px); }
/* Wofür, wie lange, wo, wann: kurze Zeilen statt Tabelle */
.marke__angaben { margin: 0; display: grid; gap: 10px; }
.marke__angaben > div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 2px 16px; }
.marke__angaben dt { padding-top: 3px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.marke__angaben dd { margin: 0; font-size: 14px; line-height: 1.6; color: #f0f0f8c7; }
.marke__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: 14px; border-top: .5px solid var(--linie-weich); }
/* Ohne JS gibt es keinen Stand und keinen Knopf: dann auch keine leere Fußzeile */
html:not(.js) .marke__fuss { display: none; }
.marke__stand { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--text-2); }
.marke__stand:focus { outline: none; }
.marke__stand::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 9999px; border: .5px solid var(--linie-stark); }
.marke--haken[data-liegt="1"] .marke__stand { color: var(--text); }
.marke--haken[data-liegt="1"] .marke__stand::before { background: var(--jade); border-color: var(--jade); box-shadow: 0 0 0 4px #00c08b1f; }
/* Was gerade nicht liegt, tritt zurück: Nummer gedämpft statt Jade */
.marke--haken[data-liegt="0"] .marke__nr { color: var(--text-3); }
.marke--haken .pille { height: 38px; padding: 0 18px; }
/* Knöpfe mit Nachfrage tragen beide Beschriftungen übereinander in derselben Zelle: so ist der
   Knopf von Anfang an so breit wie „Wirklich … entfernen?“ und springt beim ersten Klick nicht
   (Review 03.10.2026). Die gerade nicht gültige Beschriftung ist unsichtbar und zählt auch nicht
   zum Namen des Knopfs. */
.pille:has(> .knopf__wort) { display: inline-grid; place-items: center; }
.knopf__wort { grid-area: 1 / 1; }
.knopf__wort--frage, [data-bestaetigen="1"] > .knopf__wort:not(.knopf__wort--frage) { visibility: hidden; }
[data-bestaetigen="1"] > .knopf__wort--frage { visibility: visible; }
/* Zweiter Klick bestätigt: der Knopf wird hell, ohne Rot (eine zweite Akzentfarbe gibt es nicht) */
[data-entfernen][data-bestaetigen="1"], [data-alles-entfernen][data-bestaetigen="1"] { border-color: var(--text); color: var(--text); }
/* Warnung steht schon da, sobald OTP-Links liegen, nicht erst beim ersten Klick: eingeblendet
   verschob sie den Knopf (Critique 03.10.2026, zweiter Klick ging ins Leere). */
.marke__warnung { display: none; margin: 0; font-size: 13px; line-height: 1.6; color: #f0f0f8c7; }
.marke--haken[data-liegt="1"] .marke__warnung, .marke[data-otp="1"] .marke__warnung { display: block; }
@media (max-width: 639px) {
  .marke--haken { --stummel-hoehe: 60px; }
  .marke--haken .marke__nr { font-size: 28px; }
  .marke--haken .marke__koerper { padding: 20px 20px 22px; }
  .marke__angaben > div { grid-template-columns: minmax(0, 1fr); }
  .marke--haken .pille { width: 100%; }
}
.js .nur-ohne-js { display: none; }
/* .pille setzt display: inline-flex und schlägt sonst das hidden-Attribut der Knöpfe */
.marke [hidden] { display: none !important; }
/* Ansage (role=status) nur für Screenreader: sichtbar schob sie die Liste beim Nachfragen nach
   unten. Sichtbar ändern sich Stand, Zahl und Knopf an der Marke selbst. */
.garderobe__ansage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Fuß: Satz neben dem Logo, auf allen Seiten ──────────────────
   Links neben dem Logo statt rechts außen: rechts unten sitzt auf der Startseite der Chat-Knopf. */
.fuss__marke { flex-wrap: wrap; column-gap: 28px; }
.fuss__frei {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-2);
  transition: color var(--dauer-hover) var(--ease-out);
}
.fuss__frei:hover { color: var(--text); }
.fuss__punkt { flex: none; width: 6px; height: 6px; border-radius: 9999px; background: var(--jade); box-shadow: 0 0 0 3px #00c08b1f; transition: box-shadow var(--dauer-zustand) var(--ease-out); }
.fuss__frei:hover .fuss__punkt { box-shadow: 0 0 0 5px #00c08b2e; }