/* ==========================================================================
   OCTOVO — Website, Hellmodus.

   Gestaltungsthese: Papier. Ein weißes Blatt, auf dem eine Linie arbeitet.
   Der Akzent ist EINE Farbe (Korall-Zinnober) und markiert ausschließlich,
   was der Besucher greifen soll oder was OCTOVO gerade tut.

   Struktur statt Dekoration: Jede Sektion trägt eine Nummer, eine eigene
   Bauart und einen eigenen Bewegungsgedanken. Kein Farbverlauf, kein Schatten
   um seiner selbst willen, keine zweite Akzentfarbe.
   ========================================================================== */

:root {
  /* Flächen */
  --papier: #ffffff;
  --papier-kalt: #f2f4f7;
  --papier-warm: #faf9f7;
  --tinte-flaeche: #101828;

  /* Schrift */
  --tinte: #101828;
  --tinte-2: #475467;
  --tinte-3: #79839b;

  /* Struktur */
  --linie: #e3e7ee;
  --linie-stark: #c9d0dc;

  /* Akzent — genau einer */
  --akzent: #ef4423;
  --akzent-tief: #c9310f;
  --akzent-hauch: #fff1ee;

  /* Raster und Form */
  --r-1: 3px;
  --r-2: 8px;
  --r-3: 22px;
  --spur: 1.25px;

  --schrift: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Volle Breite: die Sektionen nutzen den ganzen Bildschirm, nur die
     Textspalten bleiben lesbar begrenzt. */
  --breite: none;
  --rand: clamp(20px, 5vw, 88px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ----------------------------------------------------------- Typografie -- */
h1, h2, h3, h4 { margin: 0 0 12px; line-height: 1.06; letter-spacing: -0.028em; font-weight: 640; }
h1 { font-size: clamp(2.4rem, 4.6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.1vw, 2.7rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.012em; }
p { margin: 0 0 16px; max-width: 64ch; color: var(--tinte-2); }
p strong, li strong { color: var(--tinte); font-weight: 620; }
a { color: inherit; }
ul, ol { padding-left: 1.15em; color: var(--tinte-2); }
li { margin-bottom: 8px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--papier-kalt); padding: 2px 6px; border-radius: var(--r-1); }

/* Die Nummer und das Etikett über jeder Sektion — das macht die Seite
   übersichtlich, ohne ein Wort zu erklären. */
.etikett {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 620; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinte-3); margin-bottom: 14px;
}
.etikett::before {
  content: attr(data-nummer);
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--linie-stark); color: var(--akzent);
  font-size: 12px; letter-spacing: 0;
}
.etikett::after { content: ''; flex: 1; height: 1px; background: var(--linie); }

.gross { font-size: 1.16rem; color: var(--tinte-2); max-width: 52ch; }

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

.sprung { position: absolute; left: -9999px; background: var(--akzent); color: #fff; padding: 10px 16px; border-radius: var(--r-2); }
.sprung:focus { left: 14px; top: 14px; z-index: 100; }

/* ------------------------------------------------------ Kopf und Fuß ----- */
.kopfleiste {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 28px;
  padding: 15px var(--rand);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--linie);
}
.wortmarke { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.17em; font-size: 14px; text-decoration: none; color: var(--tinte); }
.wortmarke svg { color: var(--akzent); }
.kopfleiste nav { display: flex; gap: 24px; margin-left: auto; }
.kopfleiste nav a { color: var(--tinte-2); text-decoration: none; font-size: 15px; padding: 4px 0; border-bottom: 1.5px solid transparent; }
.kopfleiste nav a:hover { color: var(--tinte); }
.kopfleiste nav a[aria-current='page'] { color: var(--tinte); border-bottom-color: var(--akzent); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 24px; border-radius: 999px;
  border: 1px solid var(--linie-stark); background: var(--papier);
  text-decoration: none; font-weight: 580; color: var(--tinte);
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.knopf:hover { border-color: var(--akzent); transform: translateY(-1px); }
.knopf.stark { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.stark:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }

.fussleiste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 36px;
  padding: 64px var(--rand) 80px;
  border-top: 1px solid var(--linie); background: var(--papier-kalt);
  font-size: 15px; color: var(--tinte-2);
}
.fussleiste a { display: block; color: var(--tinte-2); text-decoration: none; padding: 3px 0; }
.fussleiste a:hover { color: var(--akzent); }
.fussleiste strong { display: block; color: var(--tinte); margin-bottom: 10px; }

.kurzantwort {
  max-width: none; margin: 0; padding: 28px var(--rand) 0;
  color: var(--tinte-2); font-size: 1.06rem;
}

/* ----------------------------------------------------------- Sektionen --- */
section { padding: clamp(48px, 5.5vw, 84px) var(--rand); position: relative; }
section > .innen { max-width: var(--breite); margin-inline: auto; }
.flaeche-kalt { background: var(--papier-kalt); }
.flaeche-warm { background: var(--papier-warm); }
.flaeche-tinte { background: var(--tinte-flaeche); color: #fff; }
.flaeche-tinte h2, .flaeche-tinte h3, .flaeche-tinte strong { color: #fff; }
.flaeche-tinte p, .flaeche-tinte li, .flaeche-tinte .gross { color: #c3cbdb; }
.flaeche-tinte .etikett { color: #8794ad; }
.flaeche-tinte .etikett::before { border-color: #33405c; }
.flaeche-tinte .etikett::after { background: #26314a; }
.flaeche-tinte .knopf { background: transparent; border-color: #3a4767; color: #fff; }
.flaeche-tinte .szene { color: #ff7256; }

/* 1 · HELD — Text links, Szene rechts, feines Punktraster im Hintergrund */
.held { display: grid; grid-template-columns: minmax(320px, 47%) 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.held-raster {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--linie) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(80% 60% at 70% 45%, #000 0%, transparent 78%);
}
.held > * { position: relative; z-index: 1; }
.held .knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.held .beleg { display: flex; gap: 22px; margin-top: 30px; font-size: 14px; color: var(--tinte-3); flex-wrap: wrap; }
/* Die Korrektur steht dauerhaft da — man muss keine Animation abwarten,
   um den Satz zu verstehen. Bewegt wird nur der Streichstrich und das
   Erscheinen des neuen Wortes. */
.streich { position: relative; color: var(--tinte-3); white-space: nowrap; }
.streich::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 54%; height: 4px;
  background: var(--akzent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: streichen 0.62s cubic-bezier(0.65, 0, 0.35, 1) 0.7s forwards;
}
@keyframes streichen { to { transform: scaleX(1); } }
.ersetzt { color: var(--akzent); opacity: 0; animation: einblenden 0.5s ease-out 1.25s forwards; }

/* 2 · DER MORGEN — waagerechte Spur, Karten hängen darunter und verschwinden */
.morgen .spur { position: relative; height: 1px; background: var(--linie-stark); margin: 44px 0 12px; }
.morgen .spur .marke { position: absolute; top: -5px; width: 11px; height: 11px; border-radius: 999px; background: var(--akzent); left: 6%; animation: wandern linear both; animation-timeline: view(); animation-range: entry 25% cover 75%; }
.morgen .spur i { position: absolute; top: -4px; width: 1px; height: 9px; background: var(--linie-stark); }
@keyframes wandern { to { left: 94%; } }
.morgen .stunden { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.morgen .karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 30px; }
.morgen .karten article { border: 1px solid var(--linie); border-radius: var(--r-3); padding: 20px; background: var(--papier); animation: karteWeg linear both; animation-timeline: view(); animation-range: entry 30% cover 70%; }
.morgen .karten article:nth-child(2) { animation-delay: 0.06s; }
.morgen .karten article:nth-child(3) { animation-delay: 0.12s; }
.morgen .karten article:nth-child(4) { animation-delay: 0.18s; }
@keyframes karteWeg { from { opacity: 0.62; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.morgen .karten strong { display: block; margin-bottom: 4px; }
.morgen .karten p { margin: 0; font-size: 15px; }

/* 3 · WAS DU SAGST — zwei Spalten, links echtes Feld, rechts erzeugte Karte */
.sagen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.eingabefeld {
  width: 100%; min-height: 132px; font: inherit; resize: vertical;
  background: var(--papier); color: var(--tinte);
  border: 1px solid var(--linie-stark); border-radius: var(--r-3); padding: 20px 22px;
  box-shadow: 0 1px 0 var(--linie);
}
.eingabefeld:focus { border-color: var(--akzent); outline: none; }
.ergebniskarte { border: 1px solid var(--akzent); border-radius: var(--r-3); padding: 26px; background: var(--akzent-hauch); }
.ergebniskarte .zeile { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid #ffd9d1; }
.ergebniskarte .zeile:last-child { border-bottom: 0; }
.ergebniskarte .zeile span:first-child { color: var(--akzent-tief); font-size: 14px; font-weight: 600; }
.ergebniskarte h3 { margin-bottom: 10px; }

/* 4 · ES BLEIBT BEI DIR — dunkle Fläche, Szene links, drei Ebenen rechts */
.bleibt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.ebenen { display: grid; gap: 14px; }
.ebenen article { border: 1px solid #2a3757; border-radius: var(--r-3); padding: 20px 22px; background: #16203a; }
.ebenen article.hier { border-color: var(--akzent); }
.ebenen h3 { margin-bottom: 6px; font-size: 1rem; }
.ebenen p { margin: 0; font-size: 15px; }

/* 5 · DIE ACHT ARME — radiales Achteck mit Kern */
.acht .rad { position: relative; width: min(620px, 90vw); aspect-ratio: 1; margin: 36px auto 0; }
.acht .speiche button {
  position: absolute; transform: translate(-50%, -50%);
  background: var(--papier); border: 1px solid var(--linie-stark); color: var(--tinte);
  border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; font: inherit; font-weight: 560;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.acht .speiche button:hover { border-color: var(--akzent); }
.acht .speiche button[aria-pressed='true'] { border-color: var(--akzent); background: var(--akzent); color: #fff; box-shadow: 0 6px 20px rgba(239, 68, 35, 0.22); }
/* Drei Ebenen, klar getrennt: Zeichnung in der Mitte, Knoepfe im Ring,
   Erklaerung darunter — nichts ueberdeckt etwas anderes. */
.acht .kernszene { position: absolute; inset: 19%; display: grid; place-items: center; pointer-events: none; }
.acht .kernszene .szene { width: 100%; height: auto; }
.acht .kern {
  max-width: 62ch; margin: 26px auto 0;
  border: 1px solid var(--linie); border-radius: var(--r-3);
  padding: 20px 26px; text-align: center; background: var(--papier);
}
.acht .kern p { margin: 0; font-size: 16px; min-height: 3em; display: grid; place-items: center; }

/* 6 · DER BEWEIS — drei Fensterattrappen, versetzt */
.beweis .stapel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.beweis figure { margin: 0; border: 1px solid var(--linie); border-radius: var(--r-3); background: var(--papier); overflow: hidden; }
.beweis figure:nth-child(2) { transform: translateY(30px); }
.beweis figure:nth-child(3) { transform: translateY(-16px); }
.beweis .fensterkopf { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--linie); background: var(--papier-kalt); }
.beweis .fensterkopf i { width: 9px; height: 9px; border-radius: 999px; background: var(--linie-stark); }
.beweis figcaption { padding: 18px 20px 22px; font-size: 15px; color: var(--tinte-2); }
.beweis .zeilenbau { padding: 18px 20px; display: grid; gap: 9px; }
.beweis .zeilenbau i { display: block; height: 9px; border-radius: 999px; background: var(--papier-kalt); transform-origin: left; animation: tippen 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-timeline: view(); animation-range: entry 15% cover 42%; }
.beweis .zeilenbau i:nth-child(2) { animation-delay: 0.1s; width: 82%; }
.beweis .zeilenbau i:nth-child(3) { animation-delay: 0.2s; width: 64%; }
.beweis .zeilenbau i.betont { background: var(--akzent-hauch); }
@keyframes tippen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 7 · DU BEHÄLTST DAS STEUER — Regler über die ganze Breite */
.steuer .regler { display: flex; margin: 34px 0 22px; border: 1px solid var(--linie-stark); border-radius: 999px; overflow: hidden; background: var(--papier); }
.steuer .regler button { flex: 1; background: none; border: 0; color: var(--tinte-2); padding: 17px; min-height: 58px; cursor: pointer; font: inherit; font-weight: 560; }
.steuer .regler button + button { border-left: 1px solid var(--linie); }
.steuer .regler button[aria-pressed='true'] { background: var(--akzent); color: #fff; }
.steuer .lage { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: center; border: 1px solid var(--linie); border-radius: var(--r-3); padding: 28px; background: var(--papier); }
.steuer .grenzen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.steuer .grenzen div { border: 1px dashed var(--linie-stark); border-radius: var(--r-2); padding: 16px 18px; font-size: 15px; color: var(--tinte-2); }

/* 8 · ER LERNT DICH — Zeitleiste, Korrekturen sichtbar */
.lernen .leiste { list-style: none; padding: 0; margin: 38px 0 0; border-left: 1px solid var(--linie-stark); }
.lernen .leiste > li { position: relative; padding: 0 0 34px 30px; }
.lernen .leiste > li::before { content: ''; position: absolute; left: -5px; top: 10px; width: 9px; height: 9px; border-radius: 999px; background: var(--akzent); }
.lernen time { display: block; color: var(--tinte-3); font-size: 14px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.lernen .korrektur { border-left: 2px solid var(--linie-stark); padding-left: 14px; margin-bottom: 8px; }
.lernen .korrektur s { color: var(--tinte-3); text-decoration-color: var(--akzent); }
.lernen .gelernt { border: 1px solid var(--linie); border-radius: var(--r-2); padding: 12px 16px; background: var(--papier); margin: 0; }

/* 9 · EHRLICH GESAGT — Waage, zwei Spalten, bewusst ruhig */
.ehrlich .waage { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 3vw, 44px); align-items: start; margin-top: 36px; }
.ehrlich .schale { border: 1px solid var(--linie); border-radius: var(--r-3); padding: 28px; background: var(--papier); }
.ehrlich .schale.nein { background: var(--papier-kalt); }
.ehrlich .schale h3 { margin-bottom: 14px; }
.ehrlich .schale ul { padding-left: 1.1em; }

/* 10 · PREISE — drei Karten, Etiketten schwingen beim Umschalten */
.preise .schalter { display: inline-flex; border: 1px solid var(--linie-stark); border-radius: 999px; overflow: hidden; margin: 28px 0 8px; background: var(--papier); }
.preise .schalter button { background: none; border: 0; padding: 12px 22px; min-height: 46px; cursor: pointer; font: inherit; color: var(--tinte-2); }
.preise .schalter button[aria-pressed='true'] { background: var(--tinte-flaeche); color: #fff; }
.preise .tarife { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 22px; margin-top: 28px; align-items: start; }
.preise article { border: 1px solid var(--linie); border-radius: var(--r-3); padding: 30px; background: var(--papier); }
.preise article.hervor { border-color: var(--akzent); box-shadow: 0 18px 44px rgba(16, 24, 40, 0.07); }
.preise .betrag { font-size: 2.7rem; font-weight: 660; letter-spacing: -0.035em; color: var(--tinte); font-variant-numeric: tabular-nums; transform-origin: 50% 0; }
.preise .betrag.schwingt { animation: schwingen 0.62s cubic-bezier(0.2, 1.4, 0.3, 1); }
@keyframes schwingen { 0% { transform: rotate(-6deg); } 40% { transform: rotate(3deg); } 70% { transform: rotate(-1.4deg); } 100% { transform: none; } }
.preise ul { list-style: none; padding: 0; }
.preise li { display: flex; gap: 9px; padding: 5px 0; font-size: 15px; }
.preise li::before { content: '—'; color: var(--akzent); }
.preise .sparhinweis { color: var(--akzent); font-size: 14px; font-weight: 600; min-height: 1.4em; }

/* 11 · EINRICHTEN — vier Tafeln, scrollgebunden aufgedeckt */
.ablauf .tafeln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; counter-reset: tafel; }
.ablauf .tafeln article { position: relative; border: 1px solid var(--linie); border-radius: var(--r-3); padding: 24px 22px; background: var(--papier); animation: aufdecken linear both; animation-timeline: view(); animation-range: entry 8% cover 40%; }
.ablauf .tafeln article:nth-child(2) { animation-delay: 0.08s; }
.ablauf .tafeln article:nth-child(3) { animation-delay: 0.16s; }
.ablauf .tafeln article:nth-child(4) { animation-delay: 0.24s; }
@keyframes aufdecken { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.ablauf .tafeln strong { display: block; margin: 14px 0 6px; }
.ablauf .tafeln p { margin: 0; font-size: 15px; }
.ablauf .dauer { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--akzent); font-weight: 620; letter-spacing: 0.06em; text-transform: uppercase; }

/* 12 · ABSCHLUSS — Bühne, ein Satz, die Arme kommen zur Ruhe */
.abschluss { text-align: center; }
.abschluss h2 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); max-width: 20ch; margin-inline: auto; }
.abschluss p { margin-inline: auto; }
.abschluss .szene { margin-bottom: 8px; }

/* --------------------------------------------------------- Rechtstexte --- */
.rechtstext { max-width: 74ch; margin-inline: auto; }
.rechtstext h1 { margin-bottom: 24px; }
.rechtstext h2 { font-size: 1.42rem; margin-top: 42px; }
.rechtstext h3 { margin-top: 26px; }
.rechtstext table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.rechtstext th, .rechtstext td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; color: var(--tinte-2); }
.rechtstext th { color: var(--tinte); font-weight: 620; }

/* ----------------------------------------------------------- Szenen ------ */
/* Alle Illustrationen folgen einem Bauprinzip: eine Linienstärke, eine
   Rundung, ein Akzent. Bewegung ist immer das, was die Linie ohnehin tut. */
.szene {
  color: var(--akzent); display: block; height: auto;
  width: 100% !important; max-width: var(--szene-max, 560px) !important;
}
.szene-klein { --szene-max: 190px; }
.szene-mittel { --szene-max: 320px; }
.szene .linie, .szene path, .szene line, .szene circle, .szene rect, .szene polyline, .szene ellipse {
  fill: none; stroke: currentColor; stroke-width: var(--spur); stroke-linecap: round; stroke-linejoin: round;
}
.szene .grau { color: var(--linie-stark); }
.szene .fuellung { fill: var(--akzent-hauch); stroke: none; }
.szene .fuellung-grau { fill: var(--papier-kalt); stroke: none; }
.szene .schraffur { stroke-width: 0.7px; opacity: 0.5; }
.szene text { fill: currentColor; stroke: none; font-family: var(--schrift); font-size: 5px; letter-spacing: 0.02em; }

/* Selbstzeichnende Linien, gestaffelt — die Grundbewegung des ganzen Systems */
.zeichnet [data-strich] {
  stroke-dasharray: var(--laenge, 340);
  stroke-dashoffset: var(--laenge, 340);
  animation: strichZeichnen 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
@keyframes strichZeichnen { to { stroke-dashoffset: 0; } }
.zeichnet [data-stufe='1'] { animation-delay: 0.05s; }
.zeichnet [data-stufe='2'] { animation-delay: 0.12s; }
.zeichnet [data-stufe='3'] { animation-delay: 0.2s; }
.zeichnet [data-stufe='4'] { animation-delay: 0.28s; }
.zeichnet [data-stufe='5'] { animation-delay: 0.36s; }
.zeichnet [data-stufe='6'] { animation-delay: 0.44s; }
.zeichnet [data-stufe='7'] { animation-delay: 0.52s; }
.zeichnet [data-stufe='8'] { animation-delay: 0.6s; }

.blendet [data-blende] { opacity: 0; animation: einblenden 0.55s ease-out forwards; animation-timeline: view(); animation-range: entry 10% cover 45%; }
@keyframes einblenden { to { opacity: 1; } }

/* Bewegungen, die einzelnen Szenen gehören */
.dampf { animation: dampfen 3.6s ease-in-out infinite; }
@keyframes dampfen { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(-3px); opacity: 0.45; } }
.tickt { transform-origin: 50% 50%; animation: ticken 8s steps(8) infinite; }
@keyframes ticken { to { transform: rotate(360deg); } }
.prallt { animation: prallen 3.2s ease-in-out infinite; }
.prallt:nth-of-type(2n) { animation-delay: 0.6s; }
.prallt:nth-of-type(3n) { animation-delay: 1.2s; }
@keyframes prallen { 0%, 100% { transform: translateX(0); opacity: 0.9; } 46% { transform: translateX(20px); opacity: 1; } 60% { transform: translateX(11px); opacity: 0.55; } }
.hebel { transform-origin: 50% 84%; transition: transform 0.42s cubic-bezier(0.2, 1.3, 0.3, 1); }
.zahnrad { transform-origin: 50% 50%; animation: drehen 14s linear infinite; }
.zahnrad.gegen { animation-direction: reverse; animation-duration: 9s; }
@keyframes drehen { to { transform: rotate(360deg); } }
.wippt { transform-origin: 50% 30%; animation: wippen 7s ease-in-out infinite; }
@keyframes wippen { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.sinkt { animation: sinken linear both; animation-timeline: view(); animation-range: entry 20% cover 80%; }
@keyframes sinken { from { transform: translateY(-14px); } to { transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zeichnet [data-strich] { stroke-dashoffset: 0; }
  .blendet [data-blende] { opacity: 1; }
  .beweis figure { transform: none !important; }
}

/* --------------------------------------------------------------- Mobil --- */
@media (max-width: 940px) {
  body { font-size: 16px; }

  /* Zweispaltige Raster, die im Markup direkt gesetzt sind (Morgen, Preise,
     Lernen, Einrichten), werden einspaltig — sonst schiebt die zweite Spalte
     die Szene aus dem Bildschirm. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .szene { margin-inline: auto; }

  /* Die Navigation verschwindet nicht, sie legt sich unter das Logo und
     laesst sich seitlich schieben — ein Menue-Knopf waere ein Klick mehr
     fuer nichts. */
  .kopfleiste { flex-wrap: wrap; gap: 10px 16px; padding: 12px 16px; }
  .kopfleiste nav {
    order: 3; width: 100%; margin-left: 0; gap: 18px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .kopfleiste nav::-webkit-scrollbar { display: none; }
  .kopfleiste nav a { white-space: nowrap; }
  .kopfleiste .knopf.stark { margin-left: auto; padding: 10px 18px; min-height: 42px; }
  .held, .sagen, .bleibt, .steuer .lage { grid-template-columns: 1fr; }
  .ehrlich .waage { grid-template-columns: 1fr; }
  .beweis .stapel, .ablauf .tafeln { grid-template-columns: 1fr; }
  .beweis figure { transform: none !important; }
  .steuer .grenzen { grid-template-columns: 1fr; }
  .preise article.hervor { box-shadow: none; }
  .acht .rad { width: 100%; aspect-ratio: auto; }
  .acht .speiche { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .acht .speiche button { position: static; transform: none; }
  .acht .kernszene { position: static; margin-top: 18px; inset: auto; }
  .held-raster { display: none; }
  .ergebniskarte .zeile { grid-template-columns: 1fr; gap: 2px; }
}

/* ==========================================================================
   Unterseiten (Download, Sicherheit, Preise, Funktionen, Hilfe)
   Sie nutzen dieselben Bausteine wie die Startseite — hier nur die Bauarten,
   die es ausschließlich dort gibt.
   ========================================================================== */
.arm { color: var(--akzent); display: block; max-width: 100%; height: auto; }
.arm path, .arm line, .arm circle, .arm rect {
  fill: none; stroke: currentColor; stroke-width: var(--spur); stroke-linecap: round; stroke-linejoin: round;
}
.arm.zeichnet path, .arm.zeichnet line, .arm.zeichnet circle, .arm.zeichnet rect {
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: strichZeichnen 1.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-timeline: view(); animation-range: entry 0% cover 42%;
}

.grenze { background: var(--papier-kalt); }
.grenze .paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; max-width: var(--breite); margin-inline: auto; }
.paar { max-width: var(--breite); margin-inline: auto; }

.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 38px; max-width: var(--breite); margin-inline: auto; }
.schritte div { border: 1px solid var(--linie); border-radius: var(--r-3); padding: 22px; background: var(--papier); }
.schritte strong { display: block; margin-bottom: 6px; }
.schritte p { margin: 0; font-size: 15px; }

.stapel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.stapel figure { margin: 0; border: 1px solid var(--linie); border-radius: var(--r-3); padding: 22px; background: var(--papier); }
.stapel figcaption { color: var(--tinte-2); font-size: 15px; margin-top: 12px; }

.szene-mitte { display: flex; justify-content: center; }
.tarife article h2 { font-size: 1.3rem; }

@media (max-width: 940px) {
  .grenze .paar, .schritte, .stapel { grid-template-columns: 1fr; }
}

/* Steht oben eine Kurzantwort, braucht die erste Sektion keinen doppelten
   Abstand mehr. */
.kurzantwort + section { padding-top: clamp(20px, 3vw, 48px); }

/* ==========================================================================
   SCROLL-CHOREOGRAFIE

   Regel des Hauses: jede Sektion hat GENAU EINE eigene Bewegung, die am
   Scrollen hängt — keine zwei Sektionen bewegen sich gleich, und keine
   Bewegung läuft im Leerlauf weiter, wenn niemand scrollt. Was hier steht,
   überschreibt bewusst die früheren Endlosschleifen.
   ========================================================================== */

/* 01 · HELD — Parallaxe: die Szene bleibt zurück, während der Text steigt */
.held-szene {
  animation: heldParallaxe linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 100vh;
  will-change: transform;
}
@keyframes heldParallaxe { to { transform: translateY(-58px); } }
.held-raster {
  animation: rasterZieht linear both;
  animation-timeline: scroll(root block);
  animation-range: 0 100vh;
}
@keyframes rasterZieht { to { background-position: 0 78px; } }

/* 02 · MORGEN — der Zeiger wandert die Stundenspur entlang (bleibt) und die
   Sonne steigt dabei über den Horizont */
.morgen .szene .sinkt {
  animation: sonneSteigt linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 75%;
}
@keyframes sonneSteigt { from { transform: translateY(16px); } to { transform: translateY(-6px); } }

/* 03 · SATZ — die erzeugte Karte richtet sich auf, während man liest */
.ergebniskarte {
  animation: karteRichtetSich linear both;
  animation-timeline: view();
  animation-range: entry 8% cover 48%;
  transform-origin: 50% 100%;
}
@keyframes karteRichtetSich {
  from { transform: rotate(-2.6deg) translateY(30px); opacity: 0.35; }
  to { transform: none; opacity: 1; }
}

/* 04 · HAUS — die Datenpunkte laufen gegen die Membran und prallen ab */
.szene .prallt {
  animation: punktPrallt linear both;
  animation-timeline: view();
  animation-range: entry 5% cover 85%;
}
@keyframes punktPrallt {
  0% { transform: translateX(-30px); opacity: 0; }
  55% { transform: translateX(18px); opacity: 1; }
  72% { transform: translateX(22px); opacity: 1; }
  100% { transform: translateX(2px); opacity: 0.45; }
}

/* 05 · MANDALA — das Rad dreht sich, solange die Sektion durchs Bild läuft */
.acht .kernszene {
  animation: radDreht linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}
@keyframes radDreht { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }

/* 06 · BEWEIS — die drei Fenster fächern beim Scrollen auseinander */
.beweis figure { animation: linear both; animation-timeline: view(); animation-range: entry 5% cover 55%; }
.beweis figure:nth-child(1) { animation-name: faechertLinks; }
.beweis figure:nth-child(2) { animation-name: faechertMitte; }
.beweis figure:nth-child(3) { animation-name: faechertRechts; }
@keyframes faechertLinks { from { transform: translate(28px, 12px); } to { transform: none; } }
@keyframes faechertMitte { from { transform: translateY(0); } to { transform: translateY(30px); } }
@keyframes faechertRechts { from { transform: translate(-28px, 6px); } to { transform: translateY(-16px); } }

/* 07 · STEUER — das Getriebe dreht sich mit dem Scrollen (der Hebel gehört
   der Hand des Besuchers, der bleibt interaktiv) */
.szene .zahnrad {
  animation: zahnradScroll linear both;
  animation-timeline: view();
  animation-range: entry 0% exit 100%;
}
.szene .zahnrad.gegen { animation-name: zahnradScrollGegen; }
@keyframes zahnradScroll { from { transform: rotate(-90deg); } to { transform: rotate(90deg); } }
@keyframes zahnradScrollGegen { from { transform: rotate(140deg); } to { transform: rotate(-140deg); } }

/* 08 · LERNEN — die Zeitleiste zeichnet sich beim Scrollen nach unten */
.lernen .leiste { border-left-color: transparent; position: relative; }
.lernen .leiste::before {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
  background: var(--linie-stark); transform: scaleY(0); transform-origin: top;
  animation: leisteWaechst linear both;
  animation-timeline: view();
  animation-range: entry 15% cover 78%;
}
@keyframes leisteWaechst { to { transform: scaleY(1); } }

/* 09 · EHRLICH — die Waage kippt, während man die beiden Seiten liest */
.szene .waage-kippt {
  animation: waageKippt linear both;
  animation-timeline: view();
  animation-range: entry 12% cover 82%;
}
@keyframes waageKippt { from { transform: rotate(-3.4deg); } to { transform: rotate(3.4deg); } }

/* 10 · PREISE — die drei Karten steigen gestaffelt auf */
.preise .tarife article {
  animation: tarifSteigt linear both;
  animation-timeline: view();
  animation-range: entry 6% cover 44%;
}
.preise .tarife article:nth-child(2) { animation-range: entry 10% cover 50%; }
.preise .tarife article:nth-child(3) { animation-range: entry 14% cover 56%; }
@keyframes tarifSteigt { from { transform: translateY(34px); opacity: 0.3; } to { transform: none; opacity: 1; } }

/* 11 · EINRICHTEN — die Fortschrittslinie wächst über die vier Tafeln */
.ablauf .tafeln { position: relative; padding-top: 26px; }
.ablauf .tafeln::before {
  content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 2px;
  background: var(--akzent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  animation: fortschrittWaechst linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 70%;
}
@keyframes fortschrittWaechst { to { transform: scaleX(1); } }

/* 12 · ABSCHLUSS — alles kommt zur Ruhe: die Szene senkt sich und legt ab */
.abschluss .szene {
  animation: kommtZurRuhe linear both;
  animation-timeline: view();
  animation-range: entry 8% cover 62%;
}
@keyframes kommtZurRuhe {
  from { transform: translateY(-22px) scale(1.05); }
  to { transform: none; }
}

/* Ohne Scroll-Zeitachse (ältere Browser) darf nichts unsichtbar bleiben. */
@supports not (animation-timeline: view()) {
  .held-szene, .ergebniskarte, .acht .kernszene, .beweis figure,
  .preise .tarife article, .abschluss .szene, .szene .prallt {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .lernen .leiste { border-left-color: var(--linie-stark); }
  .lernen .leiste::before, .ablauf .tafeln::before { display: none; }
}

/* Bei „Bewegung reduzieren“ bleibt alles stehen — das gilt auch hier. */
@media (prefers-reduced-motion: reduce) {
  .held-szene, .held-raster, .ergebniskarte, .acht .kernszene, .beweis figure,
  .preise .tarife article, .abschluss .szene, .szene .prallt, .szene .zahnrad,
  .szene .waage-kippt, .morgen .szene .sinkt {
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
  .lernen .leiste { border-left-color: var(--linie-stark); }
  .lernen .leiste::before, .ablauf .tafeln::before { transform: scaleX(1) scaleY(1); }
  .beweis figure:nth-child(2) { transform: translateY(30px) !important; }
}

/* Bei voller Breite darf die Szene nicht am äußeren Rand kleben — sie sitzt
   mittig in ihrer Spalte, der Text bleibt bei lesbarer Zeilenlänge. */
.szene { justify-self: center; }
.held > div, .bleibt > div, .steuer .lage > div { max-width: 68ch; }
.held > div { justify-self: end; }
.bleibt > div:last-child, .steuer .lage > div:first-child { justify-self: start; }
.morgen .innen > div > div:first-child, .ablauf .innen > div > div:first-child,
.preise .innen > div > div:first-child, .lernen .innen > div:first-child { max-width: 72ch; }

/* Auf schmalen Bildschirmen dreht das Rad weniger weit — eine um 26 Grad
   gedrehte Zeichnung braucht rund ein Drittel mehr Platz in der Breite,
   und das schöbe die Seite seitlich raus. */
@media (max-width: 940px) {
  .acht .kernszene { animation-name: radDrehtSchmal; }
  .acht .kernszene .szene { width: 76%; }
  @keyframes radDrehtSchmal { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
}

/* ==========================================================================
   Bausteine für den zusätzlichen Inhalt — sie füllen die Flächen, die vorher
   leer standen, ohne die Seite unruhig zu machen.
   ========================================================================== */

/* Faktenreihe: harte Produktzahlen, keine Werbezahlen */
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-top: 26px; }
.fakten div { border: 1px solid var(--linie); border-radius: var(--r-2); padding: 14px 16px; background: var(--papier); }
.fakten b { display: block; font-size: 1.5rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fakten span { font-size: 14px; color: var(--tinte-2); }
.flaeche-tinte .fakten div { background: #16203a; border-color: #2a3757; }
.flaeche-tinte .fakten span { color: #9fabc4; }

/* Beispielsätze zum Antippen */
.saetze { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.saetze button {
  border: 1px solid var(--linie-stark); background: var(--papier); color: var(--tinte-2);
  border-radius: 999px; padding: 9px 16px; min-height: 42px; cursor: pointer; font: inherit; font-size: 14px;
  text-align: left;
}
.saetze button:hover { border-color: var(--akzent); color: var(--tinte); }
.saetze button[aria-pressed='true'] { border-color: var(--akzent); background: var(--akzent-hauch); color: var(--tinte); }

/* Zweispaltige Auflistung, die den Platz neben einer Szene füllt */
.doppelliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 28px; margin-top: 18px; }
.doppelliste div { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 15px; color: var(--tinte-2); }
.doppelliste b { color: var(--tinte); font-weight: 600; white-space: nowrap; }
.flaeche-tinte .doppelliste div { border-color: #26314a; color: #b9c3d6; }
.flaeche-tinte .doppelliste b { color: #fff; }

/* Vergleichstabelle (Autonomiestufen) */
.stufentabelle { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 15px; }
.stufentabelle th, .stufentabelle td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; color: var(--tinte-2); }
.stufentabelle th { color: var(--tinte); font-weight: 620; white-space: nowrap; }
.stufentabelle td:first-child { color: var(--tinte); font-weight: 560; }
.stufentabelle .ja { color: var(--akzent); font-weight: 600; }

/* Kleine Szene neben einem Absatz */
.mit-szene { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.mit-szene p { margin: 0; }

/* Die vier Einrichtungstafeln bekommen eigene Bilder */
.ablauf .tafeln article .szene { margin-bottom: 6px; }

@media (max-width: 940px) {
  .mit-szene { grid-template-columns: 1fr; }
  .stufentabelle, .stufentabelle tbody, .stufentabelle tr, .stufentabelle td, .stufentabelle th { display: block; }
  .stufentabelle thead { display: none; }
  .stufentabelle tr { border: 1px solid var(--linie); border-radius: var(--r-2); padding: 8px 12px; margin-bottom: 10px; }
  .stufentabelle td { border: 0; padding: 5px 0; }
  .stufentabelle td::before { content: attr(data-spalte) ': '; color: var(--tinte-3); font-size: 13px; }
}

/* 07 · WENN DU WILLST — der Bildschirm-Beobachter.
   Eigene Bewegung: der gelesene Text wandert beim Scrollen in die Schublade. */
.auge { background: var(--papier-warm); border-block: 1px solid var(--linie); }
.auge em { font-style: normal; color: var(--akzent); }
.szene .wandert {
  animation: textWandert linear both;
  animation-timeline: view();
  animation-range: entry 12% cover 68%;
}
@keyframes textWandert { from { transform: translateX(-14px); opacity: 0.25; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .szene .wandert { animation: none !important; opacity: 1 !important; transform: none !important; }
}