/* loviz-ai-dossier · Seitenstile.
   Nichts hier fasst .sc-stage, .sc-copy oder [data-sc-*] an; das ist der Mechanismus.
   Zwei Gründe, harte Schnitte, ein Farbton in zwei Helligkeiten. */

:root {
  /* Papier-Grund ist die Vorgabe. */
  --sc-canvas:      #F4F2ED;
  --sc-surface:     #FBFAF7;
  --sc-ink:         #191B20;
  --sc-ink-soft:    #5B5F69;
  --sc-accent:      #0B6E7D;
  --sc-accent-ink:  #F4F2ED;
  --sc-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --sc-shadow-color: 40 12% 20%;

  --papier:       #F4F2ED;
  --papier-hell:  #FBFAF7;
  --papier-linie: rgba(25, 27, 32, 0.11);
  --dunkel:       #14161B;
  --dunkel-hoch:  #1D2027;
  --tinte-hell:   #F1EFE9;
  --tinte-hell-weich: #A6AAB3;
  --akzent-dunkel-grund: #3BD1E1;
}

html { background: var(--papier); }
body { background: var(--papier); color: var(--sc-ink); font-family: var(--sc-font-text); }

/* ─── Kapitel: jedes malt seinen Grund selbst. Kein Drift, harte Kante. ─── */
.kap { position: relative; }
.kap--papier { background: var(--papier); color: var(--sc-ink); }
.kap--dunkel {
  --sc-ink: var(--tinte-hell);
  --sc-ink-soft: var(--tinte-hell-weich);
  --sc-accent: var(--akzent-dunkel-grund);
  --sc-accent-ink: var(--dunkel);
  --sc-surface: var(--dunkel-hoch);
  background: var(--dunkel);
  color: var(--sc-ink);
}

.kap__wrap {
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding: var(--sc-section) var(--sc-gutter);
  padding-left: calc(var(--sc-gutter) + 4.5rem);   /* Platz für das Folio im Rand */
}
@media (max-width: 860px) { .kap__wrap { padding-left: var(--sc-gutter); } }

.kap__kopf { max-width: 44rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
/* Ziffer UND Kapitelwort in einer Zeile, gesetzt wie die Kennung der Zwischentitel.
   Eine nackte roemische Ziffer ueber der Ueberschrift las sich fremd ("V" allein). */
.kap__folio {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0 0 var(--sc-3);
}
.kap__folio--hell { color: var(--sc-accent); }
.kap__h2 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--sc-5);
}
.kap__lede {
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  color: var(--sc-ink-soft);
  max-width: 38rem;
  text-wrap: pretty;
  margin: 0;
}

/* Fließtext-Link als Zeile, nicht als Knopfinsel. */
.zeile {
  color: var(--sc-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.zeile:hover { text-decoration-thickness: 3px; }
.zeile:active { transform: translateY(1px); }
.zeile:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }

/* ─── Folio im Rand ─── */
.folio {
  position: fixed;
  left: calc(var(--faden-x) + 1.1rem);   /* rechts neben dem Faden */
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  z-index: var(--sc-z-chrome);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-sm);
  letter-spacing: 0.14em;
  color: var(--sc-ink-soft);
  display: flex;
  gap: 0.8em;
  opacity: 0;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
  pointer-events: none;
  mix-blend-mode: normal;
}
.folio.ist-da { opacity: 1; }
.folio.ist-dunkel { color: var(--tinte-hell-weich); }
.folio__num { color: var(--sc-accent); }
.folio.ist-dunkel .folio__num { color: var(--akzent-dunkel-grund); }
@media (max-width: 860px) {
  .folio {
    left: 1rem;
    writing-mode: horizontal-tb;
    transform: none;
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
    left: 1rem;
    font-size: var(--sc-t-xs);
    padding: 0.35rem 0.6rem;
    background: var(--papier);
    box-shadow: 0 0 0 1px var(--papier-linie);
    border-radius: var(--sc-r-sm);
  }
  .folio.ist-dunkel { background: var(--dunkel); box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
}

/* ─── Der Faden im Rand ───
   Eine Linie von Kapitel I bis V, ein Punkt wandert beim Lesen daran entlang, hinter ihm
   fuellt sie sich in Akzentfarbe, jeder erreichte Knoten kippt auf voll. Die Lage kommt
   aus dem Scrollstand (--p, 0 bis 1), gerechnet in site.js; hier steht nur die Form. */
:root { --faden-x: clamp(1rem, 2.2vw, 1.8rem); }
.faden {
  --faden-linie: var(--papier-linie);
  --faden-grund: var(--papier);
  --faden-akzent: var(--sc-accent);
  --p: 0;
  position: fixed; left: var(--faden-x); top: 18vh; height: 64vh; width: 1px;
  z-index: var(--sc-z-chrome);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
  pointer-events: none;
}
.faden.ist-da { opacity: 1; }
.faden.ist-dunkel { --faden-linie: rgba(255,255,255,0.18); --faden-grund: var(--dunkel); --faden-akzent: var(--akzent-dunkel-grund); }
.faden__linie { position: absolute; inset: 0; background: var(--faden-linie); transition: background var(--sc-d-base); }
.faden__voll { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p) * 100%); background: var(--faden-akzent); }
.faden__knoten {
  position: absolute; left: 50%; top: calc(var(--k) * 25%);
  width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--faden-grund); box-shadow: 0 0 0 1px var(--faden-linie);
  transition: background var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.faden__knoten.ist-durch { background: var(--faden-akzent); box-shadow: 0 0 0 1px var(--faden-akzent); }
.faden__knoten.ist-jetzt::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--faden-akzent);
  animation: faden-ring 1.8s var(--sc-ease-out) infinite;
}
@keyframes faden-ring { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.faden__punkt {
  position: absolute; left: 50%; top: calc(var(--p) * 100%);
  width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--faden-akzent); box-shadow: 0 0 0 3px var(--faden-grund);
}
/* Auf dem Telefon ist der Rand zu schmal: der Faden wird zur Kante oben. */
@media (max-width: 860px) {
  .faden { left: 0; top: 0; width: 100%; height: 2px; }
  .faden__voll { height: 100%; width: calc(var(--p) * 100%); }
  .faden__knoten, .faden__punkt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .faden__knoten.ist-jetzt::after { animation: none; opacity: 0.6; transform: none; }
}

/* ─── Titelseite ───
   Bewegung, aber gesetzt: die Ueberschrift baut sich Zeile fuer Zeile auf, dann fuellt sich
   das Blatt rechts Strich fuer Strich von Hand. Genau die Frage, die die Zeile stellt. */
.kap--titel {
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.ebene { position: absolute; inset: 0; pointer-events: none; }
.ebene--rueck { z-index: 0; inset: -12% 0; }
.ledger__linie { stroke: var(--papier-linie); stroke-width: 1; }
/* x1/x2 sind Praesentationsattribute, keine CSS-Eigenschaften: der Rand braucht deshalb
   zwei Linien statt einer umgesetzten. */
.ledger__rand { stroke: color-mix(in oklab, var(--sc-accent) 45%, transparent); stroke-width: 1; }
.ledger__rand--schmal { display: none; }
@media (max-width: 860px) {
  .ledger__rand--breit { display: none; }
  .ledger__rand--schmal { display: inline; }
}

.titel__kopie {
  position: relative;
  z-index: 2;
  max-width: var(--sc-maxw);
  width: 100%;
  margin-inline: auto;
  padding: var(--sc-section) var(--sc-gutter);
  padding-left: calc(var(--sc-gutter) + 4.5rem);
}
@media (max-width: 860px) { .titel__kopie { padding-left: var(--sc-gutter); } }
.titel__marke {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--sc-t-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-7);
}
/* Die Marke als Vektor in Tinte, nicht das dunkle JPEG-Quadrat: das las sich auf Papier
   wie ein Fleck. Es ist dasselbe Zeichen wie im Favicon. */
.titel__zeichen { width: 22px; height: 22px; fill: var(--sc-ink); flex: none; }
.titel__h1 {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 1.4rem + 5.2vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sc-6);
}
/* Jede Zeile faehrt hinter einer sauberen Kante hervor. Die Maske reicht unter die
   Grundlinie, sonst schert sie die Unterlaengen von g, y und p ab. */
.zeile-auf { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.zeile-auf > span {
  display: block;
  transform: translateY(105%);
  animation: zeile-herein 900ms var(--sc-ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 1ms + 120ms);
}
.zeile-auf:nth-of-type(2) > span { animation-delay: 260ms; }
@keyframes zeile-herein { to { transform: translateY(0); } }

.titel__sub {
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  max-width: 34rem;
  color: var(--sc-ink);
  margin: 0 0 var(--sc-6);
  text-wrap: pretty;
  opacity: 0;
  animation: sanft-herein 700ms var(--sc-ease-out) 520ms forwards;
}
.titel__cta {
  margin: 0;
  display: flex; flex-wrap: wrap; gap: 0.4em 1em; align-items: baseline;
  opacity: 0;
  animation: sanft-herein 700ms var(--sc-ease-out) 700ms forwards;
}
.titel__cta .zeile { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); }
/* Ohne min-width:0 schrumpft ein Flex-Kind nicht unter seine Textbreite: auf dem Telefon
   lief der Hinweis genau deshalb aus dem Bild. */
.titel__cta > * { min-width: 0; }
.titel__ctanote { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
@keyframes sanft-herein { to { opacity: 1; } }

.ebene--blatt { z-index: 1; }
.blatt {
  position: absolute;
  right: clamp(-6rem, -4vw, -2rem);
  bottom: -14%;
  width: clamp(18rem, 42vw, 40rem);
  height: 78%;
  background: var(--papier-hell);
  border-radius: 3px;
  box-shadow: var(--sc-edge), -18px 24px 60px -20px hsl(var(--sc-shadow-color) / 0.35), -2px 4px 12px hsl(var(--sc-shadow-color) / 0.10);
  transform: rotate(-3deg);
  overflow: hidden;
}
.blatt::after {
  content: "";
  position: absolute; inset: 14% 12% auto 12%;
  height: 46%;
  background: repeating-linear-gradient(to bottom, transparent 0 34px, var(--papier-linie) 34px 35px);
}
/* Die Handarbeit: neun Striche, die nacheinander geschrieben werden, dazu ein Schreibcaret. */
.hand { position: absolute; inset: 14% 12% auto 12%; height: 46%; width: 76%; overflow: visible; }
.hand__strich {
  fill: none;
  stroke: var(--sc-ink);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.34;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: schreiben 420ms var(--sc-ease-out) forwards;
  animation-delay: calc(1100ms + var(--i) * 260ms);
}
@keyframes schreiben { to { stroke-dashoffset: 0; } }
.hand__caret {
  fill: var(--sc-accent);
  opacity: 0;
  animation: caret 2500ms steps(1) 1100ms forwards;
}
@keyframes caret {
  0%   { opacity: 0.9; transform: translate(18px, 0); }
  22%  { opacity: 0.9; transform: translate(168px, 0); }
  44%  { opacity: 0.9; transform: translate(178px, 34px); }
  66%  { opacity: 0.9; transform: translate(162px, 68px); }
  88%  { opacity: 0.9; transform: translate(160px, 102px); }
  100% { opacity: 0; transform: translate(70px, 136px); }
}

@media (max-width: 860px) {
  /* Telefon wird eigens gesetzt, nicht geschrumpft: das Blatt rutscht unter den Text,
     die Ueberschrift geht eine Stufe herunter, der Hinweis bekommt eine eigene Zeile.
     Der senkrechte Randstrich steht links vom Text, nicht quer durch die Woerter. */
  .kap--titel { align-items: start; }
  .titel__kopie { padding-left: 2.75rem; }
  .titel__kopie { padding-top: clamp(5rem, 18vh, 8rem); padding-bottom: clamp(3rem, 10vh, 6rem); }
  .titel__h1 { font-size: clamp(2.2rem, 1.1rem + 6.4vw, 3.2rem); }
  .titel__sub { font-size: var(--sc-t-base); max-width: 30rem; }
  .titel__cta { display: block; }
  .titel__cta .zeile { font-size: var(--sc-t-base); }
  .titel__ctanote { display: block; margin-top: var(--sc-2); }
  .blatt { width: 74vw; height: 30%; bottom: 4%; right: -16vw; }
  .hand { inset: 12% 10% auto 10%; height: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .zeile-auf > span { transform: none; animation: none; }
  .titel__sub, .titel__cta { opacity: 1; animation: none; }
  .hand__strich { stroke-dashoffset: 0; animation: none; }
  .hand__caret { display: none; }
}

/* ─── I · Die Rechnung ───
   Eine Aussage, nicht fünf Zahlen: die Treppe führt von der Woche zum Jahr zum Preis,
   darunter steht die eine Gegenzahl. Alles Weitere ist Fußnote. */
.rechnung { max-width: 54rem; display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); }

.treppe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  align-items: end; gap: clamp(1rem, 4vw, 3.5rem);
}
.treppe__stufe { display: grid; gap: var(--sc-2); position: relative; }
.treppe__stufe + .treppe__stufe::before {
  content: ""; position: absolute; left: calc(-1 * clamp(1rem, 4vw, 3.5rem) / 2 - 0.3rem); bottom: 1.15rem;
  width: 0.6rem; height: 0.6rem;
  border-top: 1.5px solid var(--sc-accent); border-right: 1.5px solid var(--sc-accent);
  transform: rotate(45deg);
}
.treppe__zahl {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.2rem, 1rem + 4.2vw, 4.4rem);
  line-height: 0.95; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sc-ink-soft);
}
.treppe__stufe--ziel .treppe__zahl { color: var(--sc-ink); }
.treppe__was { font-size: var(--sc-t-sm); line-height: 1.35; color: var(--sc-ink-soft); }
.treppe__stufe--ziel .treppe__was { color: var(--sc-ink); }

.gegen {
  display: grid; gap: var(--sc-2);
  padding: var(--sc-5) var(--sc-6);
  border-left: 2px solid var(--sc-accent);
  background: var(--papier-hell);
  border-radius: 0 var(--sc-r-sm) var(--sc-r-sm) 0;
  max-width: 34rem;
}
.gegen__marke {
  margin: 0; font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent);
}
.gegen__zahl {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.2rem, 1rem + 4.2vw, 4.4rem); line-height: 0.95;
  letter-spacing: -0.025em; color: var(--sc-accent); font-variant-numeric: tabular-nums;
}
.gegen__was { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); }

.rechnung__satz {
  margin: 0; font-family: var(--sc-font-display);
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2rem); line-height: 1.3;
  max-width: 36rem; text-wrap: pretty;
}
.rechnung__satz strong { font-weight: 600; }
.rechnung__fuss {
  margin: clamp(2rem, 5vw, 3.5rem) 0 0; max-width: 40rem;
  font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); text-wrap: pretty;
}

@media (max-width: 620px) {
  /* Auf dem Telefon gehoert die Beschriftung UNTER die Zahl, nicht daneben. Zwei Spalten
     scheitern hier zweimal: mit fester Breite klafft bei "10" eine Luecke bis zur
     Beschriftung, mit max-content richten sich die Spalten nicht aneinander aus, weil
     jede Stufe ihr eigenes Raster ist. Stattdessen eine durchgehende Linie am Rand, die
     die drei Stufen zusammenhaelt - dieselbe Idee wie der Rand im Titelblatt. */
  .treppe {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 1.7rem;
    border-left: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent);
  }
  .treppe__stufe {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--sc-1);
    padding: 0 0 var(--sc-6);
    position: relative;
  }
  .treppe__stufe:last-child { padding-bottom: 0; }
  .treppe__zahl { font-size: clamp(2rem, 1.2rem + 3.8vw, 2.8rem); }
  .treppe__was { font-size: var(--sc-t-base); }
  /* Der Punkt auf der Linie ersetzt den Pfeil: gestapelt zeigt eine Spitze ins Leere. */
  .treppe__stufe::before {
    content: "";
    position: absolute;
    left: calc(-1.7rem - 3.5px); top: 0.78em;
    width: 7px; height: 7px; border-radius: 50%;
    border: 0;
    background: var(--papier);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--sc-accent) 55%, transparent);
    transform: none;
  }
  /* Der gefuellte Punkt markiert das Ziel. Die Zahl bleibt Tinte: der Akzent gehoert
     der Gegenzahl darunter, zwei Akzente wuerden um denselben Blick streiten. */
  .treppe__stufe--ziel::before {
    background: var(--sc-accent);
    box-shadow: 0 0 0 1px var(--sc-accent);
  }
  .gegen { padding: var(--sc-4) var(--sc-5); }
}

/* ─── Zwischentitel · Stille ───
   Eine Zwischenseite, keine leere Seite: kurz gehalten (60svh statt einer vollen Hoehe),
   der Satz im selben Textmass wie die Kapitel, optisch auf 45 % statt am Fussende. */
.kap--stille {
  min-height: 60svh;
  display: grid;
  align-items: center;
}
.stille {
  max-width: var(--sc-maxw);
  width: 100%;
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6rem) var(--sc-gutter);
  padding-left: calc(var(--sc-gutter) + 4.5rem);
  display: grid;
  gap: var(--sc-4);
  justify-items: start;
}
@media (max-width: 860px) { .stille { padding-left: var(--sc-gutter); } }
.stille__regel {
  display: block; width: clamp(3rem, 8vw, 6rem); height: 1px;
  background: var(--sc-accent);
}
.stille__kennung {
  margin: 0; font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.stille__satz {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.stille__satz em { font-style: italic; font-weight: 400; color: var(--sc-ink-soft); }

/* ─── II · Die Kette ─── */
.kette {
  display: grid;
  /* Kopf, Ketten und Schluss als EIN Block in der Mitte. Mit "auto 1fr auto" dehnte
     sich die Mitte auf die ganze Bildschirmhoehe, und oben wie unten standen je 300 px
     Leere. */
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  padding: clamp(1.5rem, 4vh, 3rem) var(--sc-gutter);
  padding-left: calc(var(--sc-gutter) + 4.5rem);
  max-width: var(--sc-maxw);
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 860px) { .kette { padding-left: var(--sc-gutter); } }
.kette__kopf { max-width: 44rem; }
.kette__kopf .kap__h2 { margin-bottom: var(--sc-3); }
.kette__hinweis { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); }

.kette__paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-content: center;
  perspective: 1400px;
}
.kette__spalte { min-width: 0; }
.kette__marke {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-4);
}
.kette__marke--akzent { color: var(--sc-accent); }
.kette__spalte--heute .kette__marke { transition: opacity var(--sc-d-slow) var(--sc-ease-out); }
.kette__spalte--heute.ist-leer .kette__marke { opacity: 0.35; }
.kette__glieder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); transform-style: preserve-3d; }
.glied {
  position: relative;
  padding: var(--sc-4) var(--sc-5);
  border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-base);
  line-height: 1.45;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.glied--heute {
  background: var(--papier-hell);
  color: #191B20;
  transform-origin: 50% 100%;
  box-shadow: var(--sc-edge), 0 10px 24px -14px hsl(220 30% 2% / 0.7);
}
.glied--danach {
  background: transparent;
  color: var(--sc-ink);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent);
  transform-origin: 50% 0%;
  transform: rotateX(90deg);
  opacity: 0;
}
/* Kettenlinie zwischen den Gliedern */
.glied + .glied::before {
  content: "";
  position: absolute;
  left: 1.4rem; top: calc(-1 * var(--sc-3) - 1px);
  width: 1px; height: var(--sc-3);
  background: currentColor;
  opacity: 0.35;
}
.glied--danach + .glied--danach::before { background: var(--sc-accent); opacity: 0.8; }

.kette__schluss {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem);
  line-height: 1.2;
  margin: 0;
  max-width: 44rem;
}
.kette__auch {
  display: block;
  margin-top: var(--sc-3);
  font-family: var(--sc-font-text);
  font-weight: 400;
  font-size: var(--sc-t-base);
  color: var(--sc-ink-soft);
}

/* Telefon: beide Spalten liegen übereinander, jedes Glied kippt an Ort und Stelle. */
@media (max-width: 640px) {
  .kette { gap: var(--sc-5); }
  .kette__paar { grid-template-columns: 1fr; grid-template-rows: auto; }
  .kette__spalte { grid-area: 1 / 1; }
  .kette__spalte--danach { pointer-events: none; }
  .kette__spalte--danach .kette__marke { visibility: hidden; }
  .kette__spalte--danach.ist-vorn { pointer-events: auto; }
  .kette__spalte--danach.ist-vorn .kette__marke { visibility: visible; }
  .kette__spalte--heute .kette__marke { transition: opacity var(--sc-d-base) var(--sc-ease-out); }
  .kette__spalte--heute.ist-hinten .kette__marke { opacity: 0; }
  .glied { padding: var(--sc-3) var(--sc-4); font-size: var(--sc-t-sm); }
  .kette__schluss { font-size: var(--sc-t-xl); }
}

/* Ohne Bewegung: beide Ketten stehen da, nichts dreht sich. */
@media (prefers-reduced-motion: reduce) {
  .glied--danach { transform: none; opacity: 1; }
  .glied--heute { opacity: 0.55; }
  @media (max-width: 640px) {
    .kette__paar { display: grid; gap: var(--sc-5); }
    .kette__spalte { grid-area: auto; }
    .kette__spalte--danach .kette__marke { visibility: visible; }
  }
}

/* ─── III · Preis ─── */
.preis { margin: 0; max-width: 46rem; border-top: 1px solid var(--papier-linie); }
.preis__zeile {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: var(--sc-3) var(--sc-6);
  align-items: baseline;
  padding: var(--sc-6) 0;
  border-bottom: 1px solid var(--papier-linie);
}
.preis__zahl {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.preis__zeile:first-child .preis__zahl { color: var(--sc-accent); }
.preis__text { margin: 0; font-size: var(--sc-t-base); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
/* Der Weg aus dem Kapitel: eine Zeile, gesetzt wie der Weg auf der Titelseite. Nach der
   Rechnung fuehrt sie zum Nachrechnen, nach dem Preis zum Gespraech. */
.kap__weg {
  margin: var(--sc-7) 0 0;
  display: flex; flex-wrap: wrap; gap: 0.4em 1em; align-items: baseline;
}
.kap__weg > * { min-width: 0; }
.kap__weg > .zeile { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); white-space: nowrap; }
.kap__wegnote { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.kolophon__zeile .zeile { white-space: nowrap; }
@media (max-width: 560px) { .kap__weg { display: block; } .kap__wegnote { display: block; margin-top: var(--sc-2); } }

.preis__note { margin: var(--sc-6) 0 0; font-size: var(--sc-t-base); line-height: 1.6; max-width: 40rem; text-wrap: pretty; }
@media (max-width: 560px) { .preis__zeile { grid-template-columns: 1fr; gap: var(--sc-2); } }

/* ─── IV · Gebaut ───
   Ein Beleg ist EIN durchgehender Block, keine zwei konkurrierenden Spalten: Kopf, der
   gebaute Ablauf, das Ergebnisbild in voller Breite, die Kundenstimme darunter als
   abgesetztes Zitat. Vorher standen Projekt und Stimme nebeneinander und quetschten sich. */
.belege { display: grid; gap: clamp(4rem, 10vw, 9rem); }
.beleg { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }

.beleg__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 1.2em;
  padding-bottom: var(--sc-3);
  border-bottom: 1px solid var(--papier-linie);
}
.beleg__firma {
  margin: 0; font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em;
}
.beleg__was { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ─── Das Ergebnisbild: eine Zeichnung, die sich beim Eintreten selbst zieht ───
   Kein nachgebautes Bildschirmfoto, sondern ein Schema dessen, was herauskommt. */
.ergebnis { margin: 0; display: grid; gap: var(--sc-3); }
.ergebnis__blatt {
  background: var(--papier-hell);
  border: 1px solid var(--papier-linie);
  border-radius: 3px;
  padding: clamp(1rem, 2.5vw, 2rem);
  box-shadow: var(--sc-edge), 0 26px 44px -32px hsl(var(--sc-shadow-color) / 0.4);
}
.ergebnis__svg { display: block; width: 100%; height: auto; }
.ergebnis figcaption {
  font-size: var(--sc-t-sm); line-height: 1.55; color: var(--sc-ink-soft);
  max-width: 46rem; text-wrap: pretty;
}
.ergebnis .hair { fill: none; stroke: var(--sc-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }
/* NICHT .blatt nennen: die Titelseite hat eine gleichnamige Klasse mit rotate(-3deg)
   und eigener Breite, und CSS-Geometrie greift auch auf ein SVG-Rechteck. */
.ergebnis .papier { stroke-width: 1.6; }
.ergebnis .akzent { stroke: var(--sc-accent); stroke-width: 2; opacity: 1; }
.ergebnis .pfeil { stroke: var(--sc-accent); stroke-width: 1.6; }
.ergebnis .fuell { fill: var(--sc-ink); stroke: none; opacity: 0.22; }
.ergebnis .akzent-f { fill: var(--sc-accent); opacity: 0.9; }
/* Beschriftungen stehen ueber den Zeichnungen, nie auf einer Linie: sonst schneidet
   ein Strich mitten durch das Wort, und genau das war vorher der Fall. */
.ergebnis .mark {
  font-family: var(--sc-font-text); font-size: 15px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; fill: var(--sc-ink-soft);
}
.ergebnis .akzent-t { fill: var(--sc-accent); }
.ergebnis .mini {
  font-family: var(--sc-font-text); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em; fill: var(--sc-ink-soft); opacity: 0.9;
}

.ergebnis .z { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
/* Rechtecke werden NICHT gezeichnet: stroke-dasharray auf einem <rect> laeuft die Kanten
   ungleich ab und der Rahmen steht am Ende schief. Sie blenden ein. */
.ergebnis .rahmen { fill: none; opacity: 0; }
.ergebnis .fuell, .ergebnis .mark, .ergebnis .mini { opacity: 0; }
[data-zeichnen].ist-gezeichnet .z {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 780ms var(--sc-ease-out);
  transition-delay: calc(var(--i, 0) * 52ms);
}
[data-zeichnen].ist-gezeichnet .rahmen {
  opacity: 0.5; transition: opacity 520ms var(--sc-ease-out);
  transition-delay: calc(var(--i, 0) * 52ms);
}
[data-zeichnen].ist-gezeichnet .rahmen.papier { opacity: 0.9; }
[data-zeichnen].ist-gezeichnet .fuell {
  opacity: 0.22; transition: opacity 420ms var(--sc-ease-out);
  transition-delay: calc(var(--i, 0) * 52ms + 240ms);
}
[data-zeichnen].ist-gezeichnet .akzent-f { opacity: 0.9; }
[data-zeichnen].ist-gezeichnet .mark { opacity: 1; transition: opacity 460ms var(--sc-ease-out); transition-delay: 180ms; }
[data-zeichnen].ist-gezeichnet .mini { opacity: 0.9; transition: opacity 460ms var(--sc-ease-out); transition-delay: 620ms; }
@media (prefers-reduced-motion: reduce) {
  .ergebnis .z { stroke-dashoffset: 0; }
  .ergebnis .rahmen { opacity: 0.5; }
  .ergebnis .rahmen.papier { opacity: 0.9; }
  .ergebnis .fuell { opacity: 0.22; }
  .ergebnis .akzent-f { opacity: 0.9; }
  .ergebnis .mark { opacity: 1; }
  .ergebnis .mini { opacity: 0.9; }
  [data-zeichnen].ist-gezeichnet .z,
  [data-zeichnen].ist-gezeichnet .fuell,
  [data-zeichnen].ist-gezeichnet .mark,
  [data-zeichnen].ist-gezeichnet .mini { transition: none; }
}

/* Zwei Fassungen je Ergebnisbild statt eines Schiebestreifens. Das 960er Band auf 350 px
   zusammengeschoben ist unlesbar, und "seitwaerts schieben" ist eine Notloesung, keine
   Gestaltung: auf dem Telefon steht dieselbe Aussage hochkant. */
.ergebnis__svg--tel { display: none; }
@media (max-width: 700px) {
  .ergebnis__svg--breit { display: none; }
  .ergebnis__svg--tel { display: block; }
  .ergebnis__blatt { padding: var(--sc-4); }
  .ergebnis .mark { font-size: 17px; }
  .ergebnis .mini { font-size: 15px; }
}

/* ─── Die Kundenstimme: abgesetzt unter dem Projekt, nicht daneben ─── */
.stimme {
  margin: var(--sc-4) 0 0;
  padding-left: clamp(1rem, 3vw, 2.25rem);
  border-left: 2px solid var(--sc-accent);
  max-width: 48rem;
}
.stimme__satz {
  margin: 0 0 var(--sc-4);
  font-family: var(--sc-font-display); font-style: italic;
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem); line-height: 1.4;
  text-wrap: pretty;
}
.stimme__wer { display: flex; align-items: center; gap: 0.8em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.stimme__wer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.stimme__wer b { display: block; font-weight: 600; color: var(--sc-ink); }

/* Der Weg in die Fallseite. Bewusst eine Zeile am Fuss des Belegs und kein Blocklink um
   den ganzen Artikel: der enthaelt schon Links, und ein Blocklink nimmt der Zeichnung die
   Vorlesbarkeit. */
.beleg__mehr { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); }

/* ─── V · Person ─── */
.person {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.person__bild { margin: 0; }
.person__rahmen { overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 5; box-shadow: var(--sc-edge), 0 24px 40px -28px hsl(var(--sc-shadow-color) / 0.45); }
.person__rahmen img { display: block; width: 100%; height: 118%; object-fit: cover; margin-top: -9%; }
.person__bild figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.person__text p { font-size: var(--sc-t-base); line-height: 1.62; margin: 0 0 var(--sc-4); max-width: 38rem; text-wrap: pretty; }
.person__daten { padding-top: var(--sc-4); border-top: 1px solid var(--papier-linie); color: var(--sc-ink-soft); }
@media (max-width: 760px) { .person { grid-template-columns: 1fr; } .person__rahmen { aspect-ratio: 5 / 4; } }

/* ─── Kolophon ───
   So breit wie die Kapitel darueber (der Wrap gibt die Breite, nicht eine eigene). Links der
   Weg zum Gespraech, rechts die Angaben; unten, hinter einer Linie, das Jahr. */
/* Keine Mindesthoehe: die 70svh von frueher standen als leere Flaeche ueber dem Text. */
.kap--kolophon .kap__wrap { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.kolophon {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: var(--sc-8);
  align-items: end;
}
.kolophon__zeile {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  line-height: 1.45;
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}
.zeile--hell { color: var(--sc-accent); }
.kolophon__zweitweg { display: block; margin-top: var(--sc-3); font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.kolophon__daten { margin: 0; display: grid; gap: var(--sc-3); font-size: var(--sc-t-xs); line-height: 1.6; color: var(--sc-ink-soft); }
.kolophon__daten div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sc-3); }
.kolophon__daten dt { letter-spacing: 0.1em; text-transform: uppercase; }
.kolophon__daten dd { margin: 0; }
.kolophon__daten a { color: var(--sc-ink); text-decoration-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); text-underline-offset: 0.2em; }
.kolophon__daten a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.kolophon__jahr {
  grid-column: 1 / -1;
  margin: 0; padding-top: var(--sc-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
@media (max-width: 860px) { .kolophon { grid-template-columns: 1fr; row-gap: var(--sc-6); } }
@media (max-width: 560px) { .kolophon__daten div { grid-template-columns: 1fr; gap: var(--sc-1); } }

/* Auswahl, Caret, Scrollbar: eine Farbe, überall. */
::selection { background: color-mix(in oklab, var(--sc-accent) 30%, transparent); }

/* ─── Schemata in Kapitel IV: der gebaute Ablauf als Kette, darunter das Bildschirmfoto als Beleg ─── */
.schema__kette {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  /* Die Luecke traegt den Pfeil. Bei 8 px war er ein Haken von 5 px, den niemand sah. */
  gap: 1.75rem;
  counter-reset: schritt;
  width: 100%;
}
.schema__kette li {
  position: relative;
  padding: var(--sc-3) var(--sc-2) var(--sc-3) var(--sc-3);
  border: 1px solid var(--papier-linie);
  border-radius: var(--sc-r-sm);
  background: var(--papier-hell);
  display: grid; gap: 2px;
  min-height: 4.6rem;
}
.schema__kette li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0.55rem; top: 0.55rem;
  font-family: var(--sc-font-display); font-size: var(--sc-t-xs); color: var(--sc-accent);
}
/* Ein Pfeil mit Schaft und Spitze, mittig in der Luecke. Die Form ist ein SVG als Maske,
   die Farbe kommt aus der Variablen - ein Bild in der Datenadresse kann keine Variable lesen. */
.schema__kette li::after {
  content: ""; position: absolute;
  right: -1.55rem; top: 50%; width: 1.35rem; height: 0.7rem;
  transform: translateY(-50%);
  background: var(--sc-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h20M16 1.5l5 4.5-5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M1 6h20M16 1.5l5 4.5-5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.schema__kette li:last-child::after { display: none; }
.schema__kette strong { font-size: var(--sc-t-sm); font-weight: 600; line-height: 1.3; color: var(--sc-ink); padding-left: 0.9rem; }
.schema__kette span { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.35; padding-left: 0.9rem; }
.schema__rahmen {
  border: 1px solid var(--papier-linie);
  border-radius: 3px;
  padding: 6px;
  background: var(--papier-hell);
  box-shadow: var(--sc-edge), 0 24px 40px -28px hsl(var(--sc-shadow-color) / 0.45);
}
.schema__rahmen img { display: block; width: 100%; height: auto; border-radius: 2px; filter: saturate(0.85); box-shadow: none; }
@media (max-width: 560px) {
  /* Gestapelt zeigt der Eckhaken in die falsche Richtung und ist am Rand kaum zu sehen.
     Stattdessen eine Spitze nach unten, mittig in der Luecke, gross genug zum Sehen.
     ::before traegt die Ziffer und bleibt unangetastet. */
  .schema__kette { grid-template-columns: 1fr; gap: 1.5rem; }
  .schema__kette li { min-height: 0; padding: var(--sc-3) var(--sc-4) var(--sc-3) var(--sc-5); }
  .schema__kette li::after {
    right: auto; left: 50%; top: auto; bottom: -1.4rem;
    width: 0.7rem; height: 1.3rem;
    transform: translateX(-50%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24'%3E%3Cpath d='M6 1v20M1.5 16l4.5 5 4.5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24'%3E%3Cpath d='M6 1v20M1.5 16l4.5 5 4.5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .schema__kette strong, .schema__kette span { padding-left: 0.6rem; }
}


/* ─── Fallakten ───
   Dieselbe Formensprache wie das Dossier, nur mit eigener Titelseite: kein Hero-Bild,
   die Zeichnung kommt in Kapitel II. Alles Uebrige (kap, schema__kette, ergebnis,
   stimme, gegen, stille, kolophon) ist unveraendert von der Startseite. */
.kap--fall { padding-top: clamp(3rem, 10vh, 6rem); }
.fall__kopf { max-width: 46rem; }
.fall__zurueck { margin: 0 0 var(--sc-6); font-size: var(--sc-t-sm); }
.fall__art {
  margin: 0 0 var(--sc-3);
  font-size: var(--sc-t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-accent);
}
.fall__h1 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.2rem);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 var(--sc-5); text-wrap: balance;
}
.fall__lede {
  margin: 0 0 var(--sc-5);
  font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft);
  max-width: 38rem; text-wrap: pretty;
}
.fall__aussen { margin: 0; font-size: var(--sc-t-sm); }
.fall__weiter { margin: clamp(2rem, 5vw, 3.5rem) 0 0; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }

/* Fliesstext der Fallakte. Eigene Klasse statt einer Regel auf blanke <p>: sonst
   greift sie auch in Kapiteln, die ihre Absaetze schon selbst setzen. */
.fliess { max-width: 40rem; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.fliess p { margin: 0 0 var(--sc-5); font-size: var(--sc-t-base); line-height: 1.65; text-wrap: pretty; }
.fliess p:last-child { margin-bottom: 0; }
.fliess b { font-weight: 600; }

/* Die Ablaufkette steht in der Fallakte allein, nicht unter einem Beleg. */
.kap__wrap > .schema__kette { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.kap__wrap > .ergebnis { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.kap__wrap > .gegen { margin-bottom: clamp(2rem, 5vw, 3rem); }

/* ─── Zeitfresser-Check ───
   Links die acht Taetigkeiten als Zeilen mit fuenf Stufen, rechts die Rechnung, die
   mitlaeuft und beim Scrollen stehen bleibt. Gesetzt aus den Teilen der Startseite:
   Papierhell und Linie wie die Kettenglieder, die grosse Zahl wie in Kapitel I. */
.check {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.check__liste { display: grid; gap: var(--sc-3); }
.check__fuer { margin: 0 0 var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-accent); font-weight: 600; }
.check__noscript { margin: 0; font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft); max-width: 36rem; }
.check__zeile {
  display: grid; gap: var(--sc-3);
  padding: var(--sc-4) var(--sc-5);
  border: 1px solid var(--papier-linie); border-radius: var(--sc-r-sm);
  background: var(--papier-hell);
  transition: border-color var(--sc-d-base) var(--sc-ease-out);
}
.check__zeile--gesetzt { border-color: color-mix(in oklab, var(--sc-accent) 55%, var(--papier-linie)); }
.check__zeile--fokus { border-left: 3px solid var(--sc-accent); }
.check__kopf { display: grid; gap: 2px; }
.check__herkunft { margin: 0 0 var(--sc-1); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); }
.check__titel { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.25; }
.check__hinweis { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; }
.check__stufen { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.check__stufe {
  font: inherit; font-size: var(--sc-t-sm); font-weight: 500;
  padding: 0.45em 0.9em;
  border: 1px solid var(--papier-linie); border-radius: var(--sc-r-pill);
  background: var(--papier); color: var(--sc-ink);
  cursor: pointer;
  transition: background var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) var(--sc-ease-out);
}
.check__stufe:hover { border-color: var(--sc-accent); }
.check__stufe:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.check__stufe--an { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; }

.check__ergebnis {
  position: sticky; top: clamp(1rem, 4vh, 2.5rem);
  display: grid; gap: var(--sc-4);
  padding: var(--sc-6) var(--sc-6) var(--sc-6) var(--sc-5);
  border-left: 2px solid var(--sc-accent);
  background: var(--papier-hell);
}
.check__marke { margin: 0; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.check__zahl {
  margin: 0;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.6rem, 1.4rem + 4.5vw, 5rem);
  line-height: 0.95; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.check__einheit { margin: calc(-1 * var(--sc-2)) 0 0; font-size: var(--sc-t-base); color: var(--sc-ink-soft); }
.check__daten { margin: var(--sc-2) 0 0; display: grid; gap: var(--sc-4); padding-top: var(--sc-4); border-top: 1px solid var(--papier-linie); }
.check__daten dt { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; }
.check__daten dd { margin: 2px 0 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); line-height: 1.15; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.check__geld { color: var(--sc-accent); }
.check__satz { white-space: nowrap; }
.check__satz input {
  width: 4.2em; font: inherit; font-weight: 600; color: var(--sc-ink);
  padding: 0.1em 0.3em; margin: 0 0.15em;
  border: 0; border-bottom: 1px solid var(--sc-accent); border-radius: 0;
  background: transparent; text-align: right;
}
.check__satz input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.check__note { margin: 0; font-size: var(--sc-t-xs); line-height: 1.5; color: var(--sc-ink-soft); }
.check__faelle { display: grid; gap: var(--sc-2); padding-top: var(--sc-4); border-top: 1px solid var(--papier-linie); }
.check__faelle ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); }

.check__summe { margin: 0 0 var(--sc-6); max-width: 40rem; display: grid; gap: var(--sc-3); }
.check__summe pre {
  margin: 0; padding: var(--sc-4) var(--sc-5);
  font: inherit; font-size: var(--sc-t-sm); line-height: 1.55; white-space: pre-wrap;
  border: 1px solid var(--papier-linie); border-radius: var(--sc-r-sm); background: var(--papier-hell);
}
.check__kopie { margin: 0; font-size: var(--sc-t-sm); }
.zeile--knopf { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

.check__leiste { display: none; }
@media (max-width: 860px) {
  .check { grid-template-columns: 1fr; row-gap: var(--sc-6); }
  .check__ergebnis { position: static; scroll-margin-top: var(--sc-5); }
  /* Klebt am unteren Rand, solange die Liste im Bild ist; danach scrollt sie mit weg. */
  .check__leiste {
    display: block; order: 99;
    position: sticky; bottom: 0.75rem;
    margin: 0; padding: 0.7rem 1rem;
    background: var(--dunkel); color: var(--tinte-hell);
    border-radius: var(--sc-r-sm); box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    font-size: var(--sc-t-sm);
  }
  .check__leiste[hidden] { display: none; }
  .check__leiste .zeile { color: inherit; }
  .check__leiste b { color: var(--akzent-dunkel-grund); font-weight: 600; }
}
@media (max-width: 560px) {
  .check__zeile { padding: var(--sc-4); }
  .check__stufe { padding: 0.4em 0.7em; font-size: var(--sc-t-xs); }
}

/* ─── Textseiten: Impressum, Datenschutz, Kontaktdaten ───
   Kopf wie die Fallakte, danach Fliesstext in einer Spalte. */
.text { max-width: 40rem; }
.text h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: var(--sc-t-lg); line-height: 1.3; letter-spacing: -0.01em;
  margin: var(--sc-7) 0 var(--sc-3);
}
.text h2:first-child { margin-top: 0; }
.text h3 { font-size: var(--sc-t-base); font-weight: 600; margin: var(--sc-5) 0 var(--sc-2); }
.text p, .text li { font-size: var(--sc-t-base); line-height: 1.65; text-wrap: pretty; }
.text p { margin: 0 0 var(--sc-4); }
.text ul { margin: 0 0 var(--sc-4); padding-left: 1.2em; }
.text li { margin: 0 0 var(--sc-1); }
.text a { color: var(--sc-ink); text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.text a:hover { text-decoration-color: var(--sc-accent); }
.text .text__stand { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }