/*
 * Die Landingpage: Gestaltung nach der gemeinsamen Vorlage mit WBS.LEGAL.
 *
 *
 * WARUM STATISCH UND NICHT NOCH EINE NEXT-ANWENDUNG
 *
 * Diese Seite hat keinen Zustand, kein Konto, keine Datenbank und keine
 * Eingabe. Sie hat genau eine Aufgabe: schnell geladen und gut gefunden zu
 * werden, und dann auf `app.vibecode-checker.de` zu zeigen.
 *
 *
 * KEINE GOOGLE FONTS
 *
 * Die Schriften liegen unter `schrift/` und werden von hier ausgeliefert. Ein
 * Aufruf an `fonts.gstatic.com` überträgt die IP-Adresse jedes Besuchers an
 * Google, und genau dafür ist das LG München I (3 O 17493/20) bekannt. Eine
 * Seite, die neben einer Kanzlei auftritt und ihre Besucher abmahnbar macht,
 * wäre der teuerste denkbare Widerspruch zum eigenen Produkt.
 *
 *
 * KEIN SKRIPT, AUCH NICHT FÜR BEWEGUNG
 *
 * `_headers` setzt `default-src 'none'`. Jede Animation auf dieser Seite liegt
 * deshalb vollständig in CSS. Wo `animation-timeline` fehlt, steht der Inhalt
 * schlicht sofort da; es hängt nichts an der Bewegung.
 */

/* --------------------------------------------------------------------------
   Schrift
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("schrift/inter-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("schrift/poppins-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("schrift/poppins-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("schrift/poppins-800-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Marken
   -------------------------------------------------------------------------- */

:root {
  --ink: #33333e;
  --body: #63636f;
  /*
   * `--muted` war #9a97a6 — auf Weiss 2,9:1, auf --pink nur 2,4:1, beides unter
   * WCAG AA (4,5:1) fuer kleinen Text. Abgedunkelt auf #66636f: 5,9:1 auf Weiss,
   * 5,0:1 auf --pink. Wird fuer viele kleine Textelemente verwendet.
   */
  --muted: #66636f;
  --orange: #f2401f;
  --orange-dark: #d5330f;
  --orange-soft: #fff3f0;
  --pink: #fbeae5;
  --white: #ffffff;
  --line: #ece7e3;
  --line2: #e9e4e1;
  /* Eine Farbfamilie: Signal und Akzent teilen sich das Orange. */
  --warnbg: #ffe4dd;
  --warnink: #b8330f;

  --radius: 12px;
  --radius-gross: 16px;
  --radius-knopf: 999px;

  --bahn: 1180px;
  --luft: clamp(48px, 6.4vw, 78px);
}

/* --------------------------------------------------------------------------
   Grundlage
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  /*
   * Der Kopf klebt oben. Ohne diesen Abstand springt ein Verweis wie `#preise`
   * genau so weit, dass die Überschrift UNTER dem Kopf liegt.
   */
  scroll-padding-top: 88px;
}

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.16; }
h2 { font-size: clamp(23px, 2.6vw, 28px); line-height: 1.2; }
h3 { font-size: 15.5px; line-height: 1.35; }
h4 { font-size: 14px; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--line2);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 4px;
  word-break: break-word;
}

img { max-width: 100%; height: auto; }

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--radius-knopf);
  border: 1.5px solid var(--orange);
  z-index: 100;
}
.sprung:focus { left: 12px; top: 12px; }

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

.container {
  width: 100%;
  max-width: var(--bahn);
  margin-inline: auto;
  padding-inline: 24px;
}

section { padding-block: var(--luft); }
.bg-pink { background: var(--pink); }
/*
 * Die Presselogos gehoeren zur Bewertungszeile darueber, nicht zum Abschnitt
 * darunter: Beides ist derselbe Beleg. Deshalb sind sie deutlich groesser als
 * in einer gewoehnlichen Logoleiste.
 *
 * Oben und unten gleich viel, damit die Kacheln im weissen Feld mittig sitzen.
 * Wer den Abstand zur Bewertungszeile aendern will, fasst den Held an, nicht
 * diesen Wert — sonst rutscht die Leiste in ihrem eigenen Feld nach oben.
 */
.band { padding-block: 28px; }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-knopf);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-outline { border-color: var(--orange); color: var(--orange); background: #fff; }
.btn-outline:hover { background: var(--orange-soft); }
.btn-sm { padding: 10px 20px; font-size: 13.5px; }

.mitte-cta { text-align: center; margin-top: 38px; }

/* --------------------------------------------------------------------------
   Kleinteile
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--orange);
  margin-bottom: 14px;
}

.section-head { max-width: 700px; margin: 0 auto 40px; }
.section-head.center { text-align: center; }
.section-head p.lead { margin-top: 12px; font-size: 15.5px; }

/* Gleich gross wie die Sektions-h2 (auf Wunsch, 27. August). */
.zwischen { font-size: clamp(23px, 2.6vw, 28px); line-height: 1.2; text-align: center; margin: 48px 0 22px; }

.haken { list-style: none; }
.haken li { font-size: 13.5px; padding: 6px 0 6px 22px; position: relative; }
.haken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 800;
}
/* Blocksatz braucht Silbentrennung, sonst reißt deutscher Text Löcher. */
.blocksatz p { text-align: justify; hyphens: auto; }

/* --------------------------------------------------------------------------
   Kopfzeile
   -------------------------------------------------------------------------- */

header.site {
  background: #fff;
  border-bottom: 1px solid var(--line2);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  max-width: var(--bahn);
  margin-inline: auto;
}
.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
/*
 * Die Marke ist dieselbe Datei wie das Favicon (`bild/marke.png`), nicht ein
 * nachgebauter Kasten. Bis zum 22. August war das ein 9px-Quadrat aus CSS mit
 * `background: var(--orange)`; im Browsertab stand daneben ein anderes
 * Zeichen, und beide liefen auseinander, sobald eines angefasst wurde.
 *
 * Farbe und Form stecken im Bild, hier steht nur noch die Größe. `alt=""`
 * statt `aria-hidden`: Das Zeichen wiederholt den Namen daneben.
 */
.wortmarke .punkt {
  width: 20px;
  height: 20px;
  flex: none;
}

/*
 * Die Absenderzeile steht bündig unter dem „V", nicht unter dem Punkt. Deshalb
 * liegen Punkt und Textblock nebeneinander, und die zweite Zeile gehört in den
 * Textblock: Sie erbt dadurch dessen linke Kante.
 */
.wortmarke-zweizeilig { align-items: flex-start; gap: 8px; }
/* Bündig zur Oberkante des Namens, nicht zur Mitte des Blocks. */
.wortmarke-zweizeilig .punkt { margin-top: 2px; }
.wortmarke-block { display: flex; flex-direction: column; line-height: 1.15; }
.wortmarke-name { font-size: 17px; }
.wortmarke-absender {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--body);
  margin-top: 2px;
}
.wortmarke-absender .mal { color: var(--orange); font-weight: 700; }
nav.main {
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 500;
  color: #8b8b95;
}
nav.main a:hover { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Held, über die ganze Fläche
   -------------------------------------------------------------------------- */

/*
 * Der Held skaliert eigenstaendig, groesser als der Rest der Seite.
 *
 * Er traegt seit dem 22.08. nur noch Ueberschrift, Knoepfe und Bewertung — der
 * erklaerende Satz ist raus. Was uebrig bleibt, muss die Flaeche allein
 * fuellen, sonst steht viel Rosa um wenig Inhalt. Deshalb eigene Groessen
 * statt der globalen, und eine Bahn breiter als `--bahn`: Hier steht kein
 * Fliesstext, dessen Zeilenlaenge zu begrenzen waere, sondern vier zentrierte
 * Zeilen.
 */
.hero {
  background: var(--pink);
  padding-block: clamp(38px, 4.6vw, 62px) clamp(20px, 2vw, 28px);
}
/*
 * Zweispalter: Text links, Produktbild rechts (ab 900 px). Darunter einspaltig,
 * und der Bildrahmen entfaellt — ein Produktbild gequetscht auf dem Handy bringt
 * nichts, der Text traegt dort allein.
 */
.hero-inner {
  max-width: 1120px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
}
/*
 * Zwei Produktbilder (Ausschnitte des Beispielberichts), ueberlappend und
 * diagonal schwebend. Kein Rahmen um den Container — die Screenshots schweben
 * frei auf dem rosa Held.
 */
.hero-bild {
  position: relative;
  min-height: clamp(340px, 33vw, 460px);
}
.hero-shot {
  position: absolute;
  width: 82%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -24px rgb(51 51 62 / .42);
  background: #fff;
}
/* Kopf (Beispielbericht) liegt oben-links und ueberlappt; Befunde unten-rechts dahinter. */
.hero-shot-hinten { bottom: 0; right: 0; transform: rotate(3.5deg); z-index: 1; }
.hero-shot-vorne { top: 0; left: 0; transform: rotate(-3deg); z-index: 2; }
/* Sanftes Schweben; `translate` laesst die `rotate`-Neigung unberuehrt. */
@media (prefers-reduced-motion: no-preference) {
  .hero-shot { animation: schweben 7s ease-in-out infinite; }
  .hero-shot-vorne { animation-delay: -3.5s; }
}
@keyframes schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (max-width: 899px) { .hero-bild { display: none; } }

.hero .eyebrow {
  display: block;
  font-size: clamp(13px, 1.15vw, 15.5px);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(32px, 5.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 34px;
}
.hero .btn { font-size: clamp(15px, 1.25vw, 17px); padding: 16px 36px; }
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 22px;
}
/*
 * Die Bewertungszeile trägt Zahlen der Kanzlei, nicht des Produkts. Die
 * Zuschreibung steht im Text und nicht im Kleingedruckten: Fünf Sterne neben
 * einem Produktnamen liest jeder als Bewertung des Produkts.
 */
/*
 * Die Bewertungszeile im Zuschnitt von WBS.LEGAL. Groesser als zuvor, weil sie
 * dort die traegt Aufgabe eines Siegels hat, nicht die einer Fussnote.
 */
.rating-line {
  font-size: clamp(13px, 1.15vw, 16.5px);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-start;
  font-weight: 500;
}
.rating-wort { font-family: "Poppins", system-ui, sans-serif; font-weight: 700; }
.rating-note { font-weight: 700; }
.rating-zahl { font-weight: 500; }
.rating-text { font-weight: 400; color: var(--body); }
.rating-line .stars { color: var(--orange); letter-spacing: 1px; font-size: clamp(14px, 1.25vw, 17px); }

/*
 * Die Wortmarke aus Text statt aus einer Bilddatei, siehe den Kommentar an der
 * Zeile in index.html. Poppins ist wie das Original eine geometrische Grotesk,
 * die Buchstabenformen kommen deshalb nah heran. Es bleibt eine NACHBILDUNG.
 * Die vier Werte sind die Markenfarben in der Reihenfolge G-o-o-g-l-e.
 */
.google {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 500;
  letter-spacing: -.5px;
  line-height: 1;
  margin-left: 2px;
}
.google b { font-weight: 500; }
.google b:nth-child(1) { color: #4285f4; }
.google b:nth-child(2) { color: #ea4335; }
.google b:nth-child(3) { color: #fbbc05; }
.google b:nth-child(4) { color: #4285f4; }
.google b:nth-child(5) { color: #34a853; }
.google b:nth-child(6) { color: #ea4335; }

/* Die Zuordnung zur Kanzlei. Ohne sie liest sich die Zeile als unsere Bewertung. */
.rating-quelle {
  margin-top: 8px;
  text-align: left;
  font-size: 12.5px;
  color: var(--muted);
}

@media (max-width: 460px) {
  .rating-line { font-size: 14px; gap: 7px; }
  .google { font-size: 20px; }
  .rating-line .stars { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   Kacheln: Zahlen, Presse, Quoten. Eine Größe für alle drei.
   -------------------------------------------------------------------------- */

.kacheln {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}
.kacheln-presse { grid-template-columns: repeat(5, 1fr); }

.kachel {
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 18px 20px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kachel b {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
.kachel > span { font-size: 12.5px; color: var(--body); margin-top: 2px; }

.kacheln-presse .kachel { min-height: 104px; }
.kachel-logo { align-items: center; padding: 14px; }
.kachel-logo img { max-height: clamp(38px, 3.8vw, 52px); width: auto; object-fit: contain; }

/* --------------------------------------------------------------------------
   Erklärblock
   -------------------------------------------------------------------------- */

.explainer { max-width: 740px; margin: 0 auto; }
.explainer p { margin-bottom: 16px; font-size: 15.5px; }
.explainer p:last-child { margin-bottom: 0; }
.explainer strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Belege
   -------------------------------------------------------------------------- */

.beleg {
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: var(--radius-gross);
  padding: 28px 30px;
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   Presseschau: drei gleich große Karten nebeneinander
   -------------------------------------------------------------------------- */

.presseschau {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 22px;
}
.schau {
  background: #fff;
  border: 1px solid var(--line2);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.schau-zahl {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.25;
  margin-bottom: 12px;
}
.schau-text { font-size: 13.5px; flex: 1; }
.schau-quelle {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line2);
  font-size: 11.5px;
  color: var(--muted);
}
.schau-quelle b { color: var(--body); }

/* Die eigene Messung steht im selben Format, nur mit gefuellter Kopfkante. */
.schau-eigen { background: var(--orange-soft); border-color: #f3c9be; }
.schau-eigen .schau-text b { color: var(--orange); font-weight: 700; }
.schau-eigen .schau-quelle { border-top-color: #f3c9be; }

/* --------------------------------------------------------------------------
   Der EU-AI-Act-Block (wieder eingesetzt, 27. August)
   -------------------------------------------------------------------------- */

.marke {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-knopf);
  background: var(--line2);
  color: var(--body);
}
.marke-akzent { background: var(--orange-soft); color: var(--orange); }

.aiact {
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: var(--radius-gross);
  padding: 30px;
  margin-top: 20px;
}
.beleg-kopf { margin-bottom: 18px; }
.beleg-kopf h3 { font-size: 18px; margin-top: 10px; }

.quoten { list-style: none; }
.quoten li {
  font-size: 13.5px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line2);
}
.quoten li:last-child { border-bottom: none; }
.quoten b {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  color: var(--orange);
  margin-right: 6px;
}
/* Label und Text als zwei Spalten, nicht als eingerückte erste Zeile. */
.quoten-aiact li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.quoten-aiact b { margin-right: 0; }

.beleg-fuss {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--body);
  border-top: 1px solid var(--line2);
  padding-top: 14px;
}
.beleg-fuss strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   Karten
   -------------------------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Die Lösung: Zwei Absender
   -------------------------------------------------------------------------- */

.saeulen { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/*
 * DIE SAEULEN STANDEN BIS ZUM 1. SEPTEMBER AUF DUNKLEM GRUND.
 *
 * Die Sektion "Wer dahintersteht" war die einzige der Seite mit bg-dunkel.
 * Als der Hintergrund auf bg-pink umgestellt wurde, blieben die Karten darin
 * dunkel stehen: heller Text auf #3a3b46, mitten in einer rosa Sektion. Der
 * Auftraggeber: "ist immer noch grau. Es ist die einzige Sektion auf der
 * gesamten website."
 *
 * Sie tragen jetzt dieselbe Karte wie .kachel: weiss, ein Strich in --line2,
 * derselbe Radius. Die Sonderfarben, die es nur wegen des dunklen Grundes gab
 * (#ff8a6b statt der Hausfarbe, #c5c5cf statt --body), fallen damit weg.
 */
.saeule {
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: var(--radius-gross);
  padding: 30px;
}
.saeule-marke {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.saeule h3 { font-size: 20px; margin-bottom: 12px; }
.saeule p { font-size: 13.5px; color: var(--body); }

.saeule-zweitabsatz { margin-top: 12px; }
/* Der Markenclaim bleibt klein geschrieben, so wie er gefuehrt wird. */
.claim { color: var(--orange); font-weight: 600; white-space: nowrap; }

/*
 * Der Kanzleiclaim steht im letzten Absatz, nicht darunter — genauso wie
 * `built from within.` auf der Gegenseite. Deshalb erbt er Schriftgroesse und
 * Zeilenhoehe des Fliesstexts und braucht keinen eigenen Abstand.
 *
 * Die Hausfarbe `--orange`. Bis zum 1. September stand hier #ff8a6b, weil
 * `--orange` auf dem dunklen Grund absoff; der Grund ist jetzt weiss, der
 * Aufheller damit gegenstandslos. Anders als beim Claim der Gegenseite KEIN
 * `white-space: nowrap`: Dieser Claim ist zu lang und wuerde die schmale
 * Spalte sprengen.
 */
.saeule-claim {
  /* Eigene Zeile, aber im Absatz: buendig links, ohne zusaetzlichen Abstand. */
  display: block;
  color: var(--orange);
  font-weight: 600;
}

.saeule-rolle {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
  /*
   * Das !important steht hier seit dem dunklen Grund: Es schlaegt die Regel
   * `.saeule p` eine Zeile hoeher. Es bleibt, weil dieselbe Spezifitaet
   * weiterhin dagegensteht -- nur die Farbe ist jetzt die des Fliesstexts.
   */
  color: var(--ink) !important;
}
/* --------------------------------------------------------------------------
   Die drei Schritte, mit Bewegung
   -------------------------------------------------------------------------- */

.schritte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  counter-reset: schritt;
}
/*
 * Ein Schritt ist ein Teilraster der Liste (subgrid): Nummer, Kachel,
 * Ueberschrift, Absatz stehen in allen drei Spalten auf denselben Zeilen.
 * Ohne das hingen die Ueberschriften auf drei Hoehen, weil die Belegkacheln
 * verschieden hoch sind. Wo subgrid fehlt, faellt es auf das alte Verhalten
 * zurueck — einzelne Spalten, nichts kaputt.
 */
.schritt { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; }
@supports (grid-template-rows: subgrid) {
  /* `row-gap: 0`: Sonst erbt das Teilraster die 26 px Spaltenabstand der
     Liste als Abstand zwischen Nummer, Kachel, Ueberschrift und Absatz. */
  .schritt { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
.schritt-n {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 14px;
}
.schritt h3 { font-size: 16px; margin-bottom: 8px; }
.schritt p { font-size: 14px; }

/*
 * Die Kachel traegt einen Beleg, keine Skizze (12. September). Ein Stueck
 * aus dem Produkt, in der Sprache des Berichts: Marke, Fundstelle, Satz.
 * Die Bauteile heissen `beleg-*` und spiegeln die Berichtsvorschau weiter
 * unten (`.fund-marke`, `.fund-titel`), sind aber kleiner gesetzt, weil die
 * Kachel ein Bild ist und kein Dokument.
 */
.schritt-bild {
  background: var(--pink);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  color: var(--ink);
  min-height: 104px;
  display: flex;
  align-items: center;
}
.beleg-zeile {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
}
.beleg-zeile code { font-size: 11.5px; color: var(--ink); overflow-wrap: anywhere; }
.beleg-marke {
  display: inline-block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff;
  background: #d5330f;
  vertical-align: middle;
  margin-right: 6px;
}
.beleg-marke-ok { background: #eef7f1; color: #0e6b31; }
.beleg-marke-risiko { background: #b45309; }
.beleg-marke-hinweis { background: #fdf1e3; color: #b45309; }
.beleg-rot { color: #d5330f; font-weight: 700; }
.beleg-nebensatz { color: var(--muted); font-size: 11.5px; }
.beleg-liste { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.beleg-liste > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.beleg-liste .beleg-marke { margin-right: 0; }
.beleg-kette { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.beleg-feld { display: flex; align-items: center; gap: 8px; }
.beleg-feld-name { font-size: 10.5px; color: var(--muted); width: 44px; flex: none; }
.beleg-feld-wert { flex: 1; background: var(--white); border: 1px solid var(--line2); border-radius: 6px; padding: 6px 9px; font-size: 12px; }
.beleg-feld-chip { flex: 1; background: var(--white); border: 1px dashed #cbb3ab; border-radius: 6px; padding: 6px 9px; font-size: 11.5px; color: var(--muted); }
.beleg-frage { font-weight: 600; font-size: 12.5px; margin-bottom: 6px; }
.beleg-antwort { display: inline-block; border: 1px solid var(--line2); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; margin: 2px 4px 2px 0; background: var(--white); }
.beleg-antwort-gewaehlt { border-color: var(--orange); color: var(--orange); font-weight: 600; }


/*
 * Bewegung nur, wo der Browser scroll-gebundene Animationen kann UND der
 * Nutzer sie nicht abbestellt hat. Ohne beides steht alles sofort da, in
 * genau dem Zustand, den die Animation am Ende erreicht.
 */
/*
 * WARUM HIER NICHTS DIE DECKKRAFT ANIMIERT
 *
 * Der naheliegende Weg wäre `opacity: 0` im Grundzustand und ein Einblenden
 * über `animation-timeline: view()`. Gemessen ergibt das aber: Solange die
 * Sektion nicht ins Bild gescrollt wurde, steht der Fortschritt der Timeline
 * auf 0 — und damit die Deckkraft. Der Text der drei Schritte ist dann
 * unsichtbar, und zwar nicht nur kurz, sondern in jeder Lage, in der die
 * Timeline nicht anläuft: fremder Renderer, Druckansicht, ein Browser, der
 * `view()` meldet, aber anders auflöst.
 *
 * Eine Verzierung darf keinen Inhalt kosten. Animiert wird deshalb nur, was
 * ohne Animation genauso lesbar ist: die Position. Bleibt die Timeline stehen,
 * sitzt der Schritt vierzehn Pixel tiefer, und niemand merkt es.
 *
 * Die Deckkraft in den Ablaufbildern ist davon ausgenommen: Die SVGs sind
 * `aria-hidden` und tragen keine Aussage. Fehlt dort ein Haken, fehlt eine
 * Verzierung, keine Information.
 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .schritt {
      animation: heranruecken .6s linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 30%;
    }

    /* Die Schrittnummer zieht sich beim Hereinscrollen zusammen. */
    .schritt-n {
      animation: aufziehen .5s linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 16%;
    }


    /*
     * „Was du bekommst": Die Vorschau baut sich beim Hereinscrollen auf.
     * Wieder nur Position, nie Deckkraft von Text.
     */
    .kennzahl {
      animation: heranruecken .5s linear both;
      animation-timeline: view();
    }
    .kennzahl:nth-child(1) { animation-range: entry 4% cover 18%; }
    .kennzahl:nth-child(2) { animation-range: entry 8% cover 22%; }
    .kennzahl:nth-child(3) { animation-range: entry 12% cover 26%; }
    .abdeckungsbalken .seg {
      transform-origin: left;
      animation: aufbauen .8s linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 28%;
    }
  }
}

@keyframes aufbauen {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes heranruecken {
  from { transform: translateY(14px); }
  to { transform: translateY(0); }
}
@keyframes einschieben {
  from { transform: translateX(-9px); }
  to { transform: translateX(0); }
}
@keyframes aufziehen {
  from { transform: scale(.6); }
  to { transform: scale(1); }
}




/* Der Produktname unter der Leitfrage, in der Hausfarbe. Ohne Unterstrich. */
.marke-name { color: var(--orange); font-weight: 600; }

/* --------------------------------------------------------------------------
   Kacheln poppen beim Hereinscrollen auf, eine nach der anderen
   -------------------------------------------------------------------------- */

/*
 * Wieder ohne Deckkraft: animiert werden Groesse und Position. Bleibt die
 * Timeline stehen, sitzt die Kachel ein paar Pixel tiefer und minimal kleiner.
 * Lesbar ist sie in jedem Fall.
 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .schau {
      animation: aufpoppen .55s linear both;
      animation-timeline: view();
    }
    .presseschau .schau:nth-child(1) { animation-range: entry 4% cover 26%; }
    .presseschau .schau:nth-child(2) { animation-range: entry 12% cover 38%; }
    .presseschau .schau:nth-child(3) { animation-range: entry 20% cover 50%; }
  }
}

@keyframes aufpoppen {
  from { transform: translateY(18px) scale(.965); }
  to { transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   Beim Zeigen: die Ablaufbilder laufen erneut
   -------------------------------------------------------------------------- */

/*
 * Beim Zeigen hebt sich der Schritt leicht an — mehr Bewegung braucht die
 * Belegkachel nicht (12. September): Sie zeigt eine Zeile aus dem Produkt,
 * und eine Zeile, die zappelt, liest sich nicht.
 */
@media (prefers-reduced-motion: no-preference) {
  .schritt { transition: transform .2s ease; }
  .schritt:hover { transform: translateY(-4px); }
  .schritt-bild { transition: background .2s ease; }
  .schritt:hover .schritt-bild { background: #f8ddd4; }

  /* Auch die Karten heben sich beim Zeigen leicht an. */
  .schau { transition: transform .2s ease, box-shadow .2s ease; }
  .schau:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px -18px rgb(51 51 62 / .35);
  }
}

/* --------------------------------------------------------------------------
   Die Berichtsvorschau
   -------------------------------------------------------------------------- */

.bericht {
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: var(--radius-gross);
  overflow: hidden;
  max-width: 940px;
  margin: 0 auto;
}
.bericht-kopf { padding: 18px 26px 4px; }
.bericht-rubrik {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--orange);
}
/*
 * Der Quick Scan/Deep-Scan-Umschalter — rein CSS, ohne ein Byte JavaScript
 * (CSP `default-src 'none'`). Zwei versteckte Radios steuern per
 * `:checked` + Geschwister-Selektor, welcher Abdeckungsblock sichtbar ist.
 */
.scan-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tab-leiste {
  display: inline-flex; gap: 4px;
  background: var(--line2); border-radius: var(--radius-knopf); padding: 3px;
}
.tab-leiste .tab {
  cursor: pointer;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--body); padding: 6px 14px; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
#scan-quick:checked ~ .bericht-marke .tab-leiste label[for="scan-quick"],
#scan-deep:checked ~ .bericht-marke .tab-leiste label[for="scan-deep"] {
  background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgb(51 51 62 / .12);
}
/* Tastaturfokus sichtbar machen, obwohl das Radio versteckt ist. */
.scan-radio:focus-visible ~ .bericht-marke .tab-leiste label[for="scan-quick"],
.scan-radio:focus-visible ~ .bericht-marke .tab-leiste label[for="scan-deep"] { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Kopfzeile mit Rubrik + Umschalter, ueber beiden Inhaltsbloecken. */
.bericht-marke { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 26px 0; }
.bericht-marke .bericht-rubrik { margin: 0; }

/* Welcher Inhaltsblock (Quick / Deep Scan) sichtbar ist. */
.bericht-inhalt-deep { display: none; }
#scan-deep:checked ~ .bericht-inhalt-quick { display: none; }
#scan-deep:checked ~ .bericht-inhalt-deep { display: block; }
.bericht-titel {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--ink);
  line-height: 1.12; letter-spacing: -.01em; margin: 12px 0 8px;
}
.bericht-aussage { font-size: 15px; color: var(--ink); margin: 0; }
.bericht-archiv { font-size: 13px; color: var(--muted); margin: 4px 0 0; }

.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 22px 26px 0; }
.kennzahl { border: 1px solid var(--line2); border-radius: var(--radius); padding: 16px; }
.kennzahl-zahl { display: block; font-family: "Poppins", system-ui, sans-serif; font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink); }
/*
 * Bis 2. September faerbte `.kennzahl-laut .kennzahl-zahl` die Probleme-Zahl
 * orange. Auftraggeberwunsch: schwarz wie die anderen beiden Zahlen — die
 * Regel ist ersatzlos entfernt, nicht durch eine schwarze ersetzt, weil
 * `.kennzahl-zahl` das ohnehin schon liefert (`color: var(--ink)`).
 * `.kennzahl-laut` bleibt trotzdem am Element: `test/landingpage.test.mjs`
 * liest daran die hervorgehobene Kachel wieder — die Klasse traegt jetzt nur
 * noch diese Markierung, keine Farbe mehr.
 */
.kennzahl-wort { display: block; font-family: "Poppins", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-top: 10px; }
.kennzahl-note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.abdeckungsbalken { display: flex; height: 26px; margin: 20px 26px 0; border-radius: var(--radius-knopf); overflow: hidden; background: var(--line2); }
.abdeckungsbalken .seg { height: 100%; }
.seg-erfuellt { background: #147f3c; }
.seg-problem { background: var(--orange); }
/* Drittes Segment seit 2. September eine flache Gelbflaeche statt der
   grauen Schraffur — liest neben Gruen und Orange als drittes Vollfeld. */
.seg-hinweis { background: #f5c451; }
.abdeckung-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 26px 0; font-size: 13px; color: var(--body); }
.abdeckung-legende b { color: var(--ink); font-variant-numeric: tabular-nums; }
.abdeckung-legende .sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 7px; vertical-align: -2px; }
.sw-erfuellt { background: #147f3c; }
.sw-problem { background: var(--orange); }
.sw-hinweis { background: #f5c451; }
/* Der Test findet `.abdeckung`; die Bildunterschrift bekommt hier ihr Polster,
   spezifischer als der neutralisierende `.fortschritt-text.abdeckung`-Block. */
.bericht .fortschritt-text.abdeckung { padding: 10px 26px 0; }


.bericht-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 26px; }
.bericht-spalte h4 { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.spalte-zeichen { color: var(--orange); font-size: 16px; }
.spalte-marke { margin-left: auto; font-family: "Poppins", system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #fff; background: #b45309; padding: 3px 9px; border-radius: var(--radius-knopf); }
.spalte-marke-problem { background: #d5330f; }

.fund { border: 1px solid var(--line2); border-radius: 10px; margin-bottom: 8px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.fund[open] { box-shadow: 0 8px 22px -18px rgb(51 51 62 / .4); }
.fund-problem { border-left: 3px solid #d5330f; }
.fund-risiko { border-left: 3px solid #b45309; }
.fund summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 14px; }
.fund summary::-webkit-details-marker { display: none; }
.fund summary::after { content: "\2192"; grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--orange); font-size: 15px; font-weight: 700; transition: transform .15s ease; }
.fund[open] summary::after { transform: rotate(90deg); }
.fund-kopf { grid-column: 1; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/*
 * Genau EINE Marke je Karte: das Wort ist die Dringlichkeit (Blocker/Risiko/
 * Problem, frei), die Klasse ist die Schwere und richtet sich nach der Spalte
 * — rot fuer technische Verstoesse, orange fuer rechtliche Risiken. Eine
 * technische Karte mit dem Wort „Risiko" bleibt also rot, eine rechtliche mit
 * dem Wort „Problem" bleibt orange.
 */
.fund-marke { font-family: "Poppins", system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 2px 8px; border-radius: 4px; }
.marke-verstoss { background: #d5330f; }
.marke-risiko { background: #b45309; }
.fund-titel { grid-column: 1; font-size: 15px; color: var(--ink); font-weight: 400; line-height: 1.4; }

.fund-feld { margin: 0; padding: 12px 14px 14px; border-top: 1px solid var(--line2); }
.fund-feld dt { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.fund-feld dt + dd { margin-bottom: 9px; }
.fund-feld dd:last-child { margin-bottom: 0; }
.fund-feld dd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
.fund-feld code { font-size: 0.88em; overflow-wrap: break-word; }

/*
 * Deep-Karten wachsen am 2. September von drei Abschnitten (Problem, Wo
 * genau, Norm) auf fuenf, wie im echten Bericht (components/Befundkarte.tsx):
 * dazwischen "Was zu tun ist" mit der Aufwand/Adressat-Zeile, und
 * "Fix-Prompt" in einem eigenen Kasten. Die Quick-Karten bleiben bei drei
 * Abschnitten — der Quick Scan zeigt im echten Bericht ebenfalls weniger.
 *
 * Kein Kopieren-Knopf am Fix-Prompt: Die CSP der Landingpage lautet
 * `default-src 'none'` (siehe der Kommentar am Umschalter), es laeuft kein
 * JavaScript. Der Prompt steht da, um gelesen und von Hand uebernommen zu
 * werden.
 */
.fund-aufwand { display: flex; flex-wrap: wrap; gap: 3px 18px; margin: 8px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }

.fund-prompt { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--line2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.fund-prompt-fuss { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }

/*
 * „n weitere im Bericht": Die Vorschau zeigt zwei Karten je Spalte, die Marke
 * darueber zaehlt alle. Diese Zeile schliesst die Luecke — als Text, nicht
 * als Knopf: Die Knopfattrappen der Vorschau sind am 12. September gefallen,
 * weil sie aussahen, als taete sich etwas. Im echten Bericht steht hier der
 * Aufklappknopf aus components/MehrAnzeigen.tsx.
 */
.spalte-mehr { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }

.spalte-fuss { margin-top: 14px; padding: 14px 15px; border-radius: 8px; background: #fbfaf9; border: 1px solid var(--line2); font-size: 12px; line-height: 1.55; color: var(--muted); }

/*
 * Hinweise: dritte Kategorie seit dem 2. September, weder erfuellt noch
 * verletzt — uns fehlt die Grundlage. Eigener Abschnitt unter den
 * Befundspalten, gleiche Zwei-Spalten-Form (§ Recht / ⌘ Technik), aber
 * optisch bewusst leichter: helle Gelbflaeche statt Vollfarbe, damit eine
 * Hinweiszeile nie wie ein entschiedener Befund aussieht.
 */
.bericht-hinweise { padding: 4px 26px 26px; border-top: 1px solid var(--line2); }
.hinweise-titel { font-family: "Poppins", system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #b45309; margin: 22px 0 4px; }
.hinweise-erklaerung { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }
.bericht-hinweise .bericht-spalten { padding: 0; }

.spalte-marke-hinweis { background: #fdf1e3; color: #b45309; }

.marke-hinweis { background: #fdf1e3; color: #b45309; }

/*
 * Im Quick-Beispiel sind Hinweiszeilen NICHT aufklappbar (was fehlt,
 * schluesselt erst der Deep Scan auf): ein `<div class="fund fund-hinweis">`
 * ohne `<details>`, mit derselben zweizeiligen Kopfzeile wie eine
 * Befundkarte, aber ohne Pfeil. Im Deep-Beispiel bleibt es bei `<details>`,
 * `.fund-hinweis` liefert dort nur die Randfarbe.
 */
.fund-hinweis { border-left: 3px solid #f5c451; }
.fund-hinweis-zeile { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 6px; padding: 12px 14px; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bericht { animation: aufpoppen .6s linear both; animation-timeline: view(); animation-range: entry 2% cover 22%; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /*
     * Die Funde erscheinen nacheinander, wieder nur über die Position — aber
     * ueber die HOEHE, nicht die Seite. Ein gestaffeltes translateX laesst die
     * Kacheln waehrend des Scrollens unterschiedlich weit links stehen; das
     * liest sich als schiefe Liste, nicht als Animation.
     */
    .bericht-spalte .fund {
      animation: steigen .5s linear both;
      animation-timeline: view();
    }
    .bericht-spalte .fund:nth-of-type(1) { animation-range: entry 4% cover 24%; }
    .bericht-spalte .fund:nth-of-type(2) { animation-range: entry 9% cover 32%; }
    .bericht-spalte .fund:nth-of-type(3) { animation-range: entry 14% cover 40%; }
    .bericht-spalte .fund:nth-of-type(4) { animation-range: entry 19% cover 48%; }
    .bericht-spalte .fund:nth-of-type(5) { animation-range: entry 24% cover 56%; }
  }
}

/*
 * Der Abdeckungssatz nennt den erreichbaren Nenner. „Nichts gefunden" und
 * „nicht gesucht" dürfen nie dasselbe Ergebnis erzeugen; `landingpage.test.mjs`
 * prüft diesen Absatz gegen den Beispielbericht.
 */
.abdeckung {
  max-width: 940px;
  margin: 20px auto 0;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 14px;
  background: #fff;
}
.abdeckung b { color: var(--ink); }


/*
 * Die Fortschrittszeile traegt seit dem 22.08. zusaetzlich `.abdeckung`, weil
 * `landingpage.test.mjs` diesen Selektor sucht. Der Kastenrahmen der Klasse
 * gehoert dort aber nicht hin: Innerhalb der Berichtskarte ist es eine
 * Bildunterschrift, kein eigener Block.
 */
.fortschritt-text.abdeckung {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  max-width: none;
}


/* --------------------------------------------------------------------------
   Die Belegzeile im FAQ
   --------------------------------------------------------------------------
   Sie stand bis zum 25. August im eigenen Abschnitt „Vertraulichkeit" oben auf
   der Seite. Der Abschnitt ist auf Wunsch entfallen; die Zeile ist in die erste
   FAQ-Antwort gezogen, weil sie dort dieselbe Arbeit tut.

   Mit dem Abschnitt entfallen sind `#vertraulichkeit`, `.check-box`,
   `.check-vorsatz` und `.check-dritte`. `.check-row` (samt `.grid-check` und
   dem `.tick`-Kreis) war schon damals ohne Gegenstueck im Markup und ist jetzt
   mit entfernt.
   -------------------------------------------------------------------------- */

/*
 * Die Beispielfundstelle. Sie steht als eigener Block, weil sie das Belegstueck
 * des Abschnitts ist: Statt zu beschreiben, WELCHE Form die Fundstelle hat,
 * zeigt sie eine. Ein Pfad darf am Trennstrich umbrechen, nie im Dateinamen.
 */
.check-beispiel {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--pink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
.check-beispiel-rest { font-size: 13px; color: var(--ink); }
/*
 * `flex-basis: 100%` schiebt den Zusatz UNTER das Beispiel statt dahinter.
 *
 * `--body` und nicht `--muted`: `#9a97a6` auf `--pink` ergibt 2,4:1 und faellt
 * damit unter WCAG AA. `#63636f` ergibt 5,0:1.
 */
.check-beispiel-fuss {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--body);
}
.check-beispiel code {
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
  /*
   * Kein `word-break: keep-all`: Das verbietet auch den Umbruch NACH dem
   * Schraegstrich, sodass nur der Notbruch bleibt und der den Dateinamen
   * zerreisst. So bricht der Browser nach `/` und laesst den Namen ganz.
   */
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Preise
   -------------------------------------------------------------------------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 840px;
  margin: 0 auto;
}
.price-card {
  background: #fff;
  border: 1.5px solid var(--line2);
  border-radius: var(--radius-gross);
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.popular { border-color: var(--orange); }
.popular-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: #fff;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-knopf);
  white-space: nowrap;
}
.price-card h3 { font-size: 16px; margin-bottom: 8px; }
.price-card .price {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 6px;
}
.price-takt { font-size: 12.5px; color: var(--body); }
.price-kuendigung { font-size: 12px; color: var(--muted); margin-bottom: 18px; }

/*
 * Der Mehrwert der groesseren Stufe, bevor die Hakenliste anfaengt.
 *
 * Er sitzt an derselben Stelle, an der die Quick-Scan-Karte ihre Marke traegt,
 * und traegt eine Kante statt eines Kastens: Ein zweiter Kasten IM Kasten
 * erzeugte auf dem Handy vier Rahmen uebereinander. Die Kante links liest sich
 * als Hervorhebung, ohne eine neue Ebene aufzumachen.
 *
 * `--pink` und nicht `--orange`: Der Knopf darunter ist orange, und zwei
 * orange Flaechen in einer Karte lassen den Leser raten, welche der Aufruf ist.
 */

.price-card ul { flex: 1; margin-bottom: 20px; }

/*
 * Die Ueberleitung in der Deep-Scan-Liste. Sie traegt KEINEN Haken, weil sie
 * keine Leistung ist, sondern die Ansage, dass die Leistungen erst folgen —
 * ein Haken davor liesse sie als siebten Punkt lesen und naehme der Liste
 * genau die Staffelung, um die es geht.
 */
.haken-vorsatz {
  padding-left: 0 !important;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line2);
  color: var(--body);
}
.haken-vorsatz::before { content: none !important; }
.haken-vorsatz strong { color: var(--ink); }

/*
 * Der Schluss der Deep-Scan-Liste. Kein Haken, weil es kein Leistungspunkt ist,
 * sondern die Ansage, dass die Liste eine Auswahl war. Etwas eingerueckt wie
 * die Haken darueber, damit die Zeile buendig steht, aber ohne Zeichen und
 * gedaempft.
 */
.haken-mehr {
  padding-left: 22px !important;
  color: var(--muted);
  font-style: italic;
}
.haken-mehr::before { content: none !important; }

/*
 * „Wie loest du das?" ist die Antwort auf den Risikoabschnitt darueber und
 * gehoert optisch naeher heran. Der volle Sektionsabstand (bis 78 px) plus der
 * Abstand des Abschnitts davor riss beide zu weit auseinander; oben deshalb
 * knapper, unten unveraendert.
 */
#checker { padding-top: clamp(20px, 2.4vw, 32px); }



/* --------------------------------------------------------------------------
   Die Leitfrage und die große Stimme darunter
   -------------------------------------------------------------------------- */

/* „Wie loest du das?" traegt jetzt dieselbe Groesse wie jede andere
   Sektionsueberschrift (27. August, „alle Ueberschriften gleich gross"). */
.leitfrage {
  font-size: clamp(23px, 2.6vw, 28px);
  line-height: 1.2;
  margin-bottom: 14px;
}

/*
 * Die grosse Stimme: Foto links, Zitat rechts. Kein Rahmen um das Foto, der
 * dunkle Ring wirkte wie ein Fehler. Der Initialen-Kreis bleibt als
 * Rueckfallebene unter dem Bild liegen.
 */
.stimme-gross {
  display: flex;
  gap: 26px;
  align-items: center;
  max-width: 880px;
  margin: 0 auto 44px;
  padding: 26px 30px;
  background: var(--orange-soft);
  border-radius: var(--radius-gross);
}
.stimme-gross-hell { background: #fff; border: 1px solid var(--line2); }
.stimme-gross-foto {
  position: relative;
  flex: none;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stimme-gross-foto > span {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--orange);
}
.stimme-gross-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stimme-gross blockquote { margin: 0; }
.stimme-gross blockquote p {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 12px;
}
.stimme-gross figcaption {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.stimme-gross figcaption span {
  display: block;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--body);
}



/* Gleich hohe Kacheln: Raster streckt die Kinder, die Karten fuellen sie aus. */
.saeulen { align-items: stretch; }
.saeule { display: flex; flex-direction: column; }
.saeule .saeule-rolle { margin-top: auto; }
/*
 * Der Trennstrich (border-top der Rolle) darf nicht am Claim kleben. Der
 * Abstand kann nicht an der Rolle selbst haengen: Ihr `margin-top` ist `auto`
 * und schluckt jeden festen Wert. Also traegt ihn der Absatz davor. Flex-
 * Kinder kollabieren ihre Abstaende nicht, deshalb kommt er wirklich an.
 */
.saeule p:has(+ .saeule-rolle) { margin-bottom: 20px; }

/* --------------------------------------------------------------------------
   Bewegung im Bericht und in den Ablaufbildern
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /*
   * Der Fortschrittsbalken laeuft von links nach rechts, wenn die Karte ins
   * Bild kommt. `transform` statt `width`, damit der Browser nicht bei jedem
   * Bild neu umbricht.
   */
}

@keyframes steigen {
  from { transform: translateY(14px); }
  to { transform: translateY(0); }
}

/*
 * Die grosse Zahl, Umsatzsteuerhinweis daneben statt darunter. `align-items:
 * baseline` setzt den kleinen Text auf die Grundlinie der grossen Zahl; ohne
 * ihn haengt er an deren Oberkante und sieht aus wie eine Fussnote am falschen
 * Ende.
 *
 * Seit dem 16. September ist die grosse Zahl wieder der Nettobetrag (vom
 * 31. August bis dahin war es der Bruttobetrag) — `.price` traegt beide
 * Male dieselbe Klasse, nur der Inhalt wechselt. Der Gesamtpreis steht in
 * `.price-brutto` darunter, nicht mehr `.price-netto`: Die Klasse ist nach
 * dem benannt, was sie seit dem Wechsel zeigt.
 */
.preiszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin-bottom: 4px;
}
.preiszeile .price { margin-bottom: 0; }
.price-brutto { font-size: 12.5px; color: var(--body); }




/* --------------------------------------------------------------------------
   Fragen
   -------------------------------------------------------------------------- */

.faq {
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--line2);
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: #fff;
}
.faq details { border-bottom: 1px solid var(--line2); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  padding: 19px 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--orange);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.faq details[open] summary::after { content: "-"; }
.faq details p { margin: 0 24px 20px; font-size: 13.5px; padding-right: 20px; }
.faq details p + p { margin-top: -8px; }

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */

footer.site {
  background: #fff;
  border-top: 1px solid var(--line2);
  padding: 52px 0 24px;
}
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; margin-bottom: 32px; }
/*
 * Auf den Rechtsseiten (impressum/datenschutz/agb/widerruf.html) fehlt die
 * dritte Spalte „Auf dieser Seite" — ihre Sprungmarken gehören zur
 * Landingpage, nicht zum Nachschlagetext darunter (Moritz, 3. September).
 * Zwei Spalten statt drei: Logo links, Rechtliches rechts, in derselben
 * 1.4:1-Aufteilung wie zuvor. Ab 980px übernimmt weiterhin die Regel unten
 * (`1fr 1fr`) — mit zwei statt drei Kindern liegt sie ohnehin schon richtig.
 */
.footer-cols--zwei { grid-template-columns: 1.4fr 1fr; }
.footer-cols h4 {
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 14px;
}
.footer-cols ul { list-style: none; }
.footer-cols li { font-size: 13px; padding: 5px 0; }
.footer-cols a:hover { color: var(--orange); }
.footer-legal {
  border-top: 1px solid var(--line2);
  padding-top: 20px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Schmale Fenster
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .kacheln, .kacheln-presse { grid-template-columns: repeat(2, 1fr); }
  .presseschau { grid-template-columns: 1fr; }
  .saeulen { grid-template-columns: 1fr; }
  .schritte { grid-template-columns: 1fr; gap: 26px; }
  /*
   * Die Belegkacheln bleiben auch auf dem Telefon (12. September): Sie sind
   * etwa 100 px hoch und sagen etwas. Die Skizzen davor waren einen
   * Bildschirm hoch und sagten nichts — die standen hier auf display:none.
   */
  .schritt-bild { min-height: 0; padding: 12px; }
  .bericht-spalten { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  nav.main { display: none; }
}

@media (max-width: 720px) {
  .stimme-gross { flex-direction: column; text-align: center; }
  .price-grid { grid-template-columns: 1fr; }
  .beleg { padding: 22px 20px; }
  /* Drei Kacheln nebeneinander werden unter 720px zu schmal fuer die
     Unterzeile „4 Blocker · 2 Risiko · 0 Problem" — gestapelt statt gequetscht. */
  .kennzahlen { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  /*
   * Bei 320 px bleiben im Beispielkasten 200 px. Die laengste unteilbare Kette
   * `20250612_profiles.sql:18` misst bei 13 px Menlo 188 px — 12 px Luft, zu
   * wenig: Der Notbruch traefe den Dateinamen. Bei 12 px sind es 174 px.
   */
  .check-beispiel { padding: 11px; }
  .check-beispiel code { font-size: 12px; }
  /*
   * Seit die Wortmarke zweizeilig ist, braucht sie mehr Breite als der Knopf
   * daneben übrig lässt. Beide tragen `flex: none`, also schrumpft von selbst
   * nichts: Bei 320 px schob die Summe die Seite auf 324 px. Deshalb hier
   * beide kleiner, und der Knopf verliert sein Polster.
   */
  .header-row { padding: 12px 14px; gap: 10px; }
  .wortmarke-name { font-size: 14.5px; }
  .wortmarke-absender { font-size: 10.5px; }
  .wortmarke-zweizeilig { gap: 6px; }
  .header-actions .btn-sm { padding: 9px 13px; font-size: 12px; }
  .kacheln, .kacheln-presse { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Rechtsseiten (Impressum, Datenschutz, AGB, Widerruf)

   Eigene, statische Seiten neben index.html. Sie teilen Kopf, Fuss und diese
   Datei; nur der Inhaltsbereich bekommt hier ein Lesemass und eine ruhige
   Abschnittsgliederung. Verweise im Fliesstext bekommen wieder eine sichtbare
   Auszeichnung — der globale `a { text-decoration: none }` macht sie sonst
   unsichtbar, was in einem Rechtstext eine Barriere ist.
   -------------------------------------------------------------------------- */

main.rechts { padding-block: clamp(36px, 5vw, 64px); }
.rechts-inhalt { max-width: 760px; }

.rechts-rubrik {
  display: inline-block;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange-dark);
}
.rechts-kopf h1 { margin-top: 6px; }
.rechts-stand { font-size: 13px; color: var(--muted); margin-top: 8px; }
.rechts-lead { margin-top: 14px; font-size: 16.5px; color: var(--body); }

.rechts-sektion { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.rechts-sektion h2 { margin-top: 6px; margin-bottom: 12px; }
.rechts-sektion p { margin: 0 0 12px; }
.rechts-sektion p:last-child { margin-bottom: 0; }
.rechts-neben { font-size: 13.5px; color: var(--muted); }

/* Sichtbare Verweise im Rechtstext (nicht Wortmarke/Knopf). */
.rechts-inhalt a:not(.wortmarke):not(.btn) {
  color: var(--orange-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rechts-inhalt a:not(.wortmarke):not(.btn):hover { color: var(--orange); }

.rechts-liste { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 6px 0 0; }
.rechts-liste dt { font-weight: 600; color: var(--ink); }
.rechts-liste dd { margin: 0; color: var(--body); }

.rechts-verweise, .rechts-empfaenger { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 6px 0 0; }
.rechts-empfaenger li { position: relative; padding-left: 16px; }
.rechts-empfaenger li::before { content: "·"; position: absolute; left: 4px; color: var(--orange); font-weight: 700; }

.rechts-kasten { border: 1px solid var(--line2); border-radius: var(--radius); background: var(--orange-soft); padding: 16px 18px; margin: 12px 0; }
.rechts-muster { border: 1px solid var(--line2); border-radius: var(--radius); background: #fff; padding: 18px 20px; margin: 14px 0; display: flex; flex-direction: column; gap: 12px; }
.rechts-muster-fuss { font-size: 13px; color: var(--muted); }

/*
 * Offene Fragen sichtbar am Text markieren — die Landingpage-Fassung dessen,
 * was in der App `<Klaeren>` und `KlaerHinweis` sind. Der Auftraggeber will die
 * offenen Punkte auch auf der Landingpage sehen, damit die Kanzlei sie beim
 * Redigieren nicht übersieht.
 */

.rechts-tabelle { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line2); border-radius: var(--radius); }
.rechts-tabelle table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13.5px; }
.rechts-tabelle th, .rechts-tabelle td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rechts-tabelle thead th { background: var(--pink); color: var(--ink); font-family: "Poppins", system-ui, sans-serif; font-size: 12px; }
.rechts-tabelle tbody tr:last-child td { border-bottom: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.rechts .m-0 { margin: 0; }

@media (max-width: 480px) {
  .rechts-liste { grid-template-columns: 1fr; gap: 2px; }
  .rechts-liste dd { margin-bottom: 10px; }
}