/* bitte.help — Seitenschicht
 * ---------------------------------------------------------------------------
 * Baut ausschliesslich auf css/tokens.css auf. Keine eigenen Farbwerte:
 * alles kommt aus --bh-*. tokens.css ist eine woertliche Kopie aus
 * "design system/platform/web/tokens.css" und wird hier nicht veraendert.
 *
 * Web-Regeln (nicht App-Regeln):
 *   Seitenrand 64 · Ecke 8 (--bh-radius-web, NICHT die 14 der App)
 *   Hauptaktion Tintenblau --bh-ink (NICHT das Aktivblau der App)
 *
 * Web-Typostufen aus canvas/Web.dc.html:
 *   hero 76 / 600 / -0,035 em / 1,0 · lead 21 / 400 / 1,5
 *   section 32 / 600 / -0,025 em · Schritt-Titel 24 / 600 / -0,02 em
 *
 * =====================================================================
 * DIE MOBILE SPALTE IST HIER GESETZT, NICHT IM DESIGN-SYSTEM
 * =====================================================================
 * Die Web-Schicht des Design-Systems ist reines Desktop und enthaelt keine
 * einzige Media Query. Dies ist aber die Landeseite einer Mobil-App, also
 * kommt der groesste Teil des Verkehrs vom Telefon. Die folgenden Werte sind
 * hier entschieden und stehen in keiner Quelle. Haltepunkte 480 / 768 / 1024
 * sind aus dem Stylesheet der Vorgaengerseite uebernommen.
 *
 *   Groesse        >=1024   769-1023   481-768   <=480
 *   Seitenrand        64        40        24       20
 *   Hero              76        56        44       36
 *   Lead              21        21        19       17
 *   Abschnitt         30        30        27       24
 *   Schritt-Titel     24        24        22       21
 *   Schrittblock    3 Sp.     1 Sp.     1 Sp.    1 Sp.
 *   Vorteile        3 Sp.     2 Sp.     1 Sp.    1 Sp.
 *
 * Die Grenze liegt bewusst bei 768/769 und nicht bei 767/768: die feste
 * Ladeleiste der Vorgaengerseite erschien bei max-width 768, und 768 ist die
 * Hochkantbreite gaengiger Tablets. Bei genau 768 gilt also die Telefonspalte.
 *
 * Kopfleiste, gestaffelt:
 *   >768  Marke · drei Seitenziele · Sprachwahl · Knopf "App laden"
 *   <=768 die drei Seitenziele entfallen (sie stehen auch in der Fusszeile)
 *         und der Knopf entfaellt, weil ab genau diesem Haltepunkt die
 *         feste Leiste am unteren Rand die Ladeaktion uebernimmt. Uebrig
 *         bleiben Marke und Sprachwahl -- eine Zeile, kein Hamburger, kein
 *         Aufklappmenue, kein Javascript.
 *   <=480 Marke 20 statt 22, Kopfleiste bricht auf zwei Zeilen um.
 *
 * Untergrenze: --bh-body-floor (15px) wird von keiner Stufe unterschritten.
 * ------------------------------------------------------------------------ */

/* ---- Layoutgroessen, pro Haltepunkt nur diese Zeilen ------------------- */
:root {
  --page-margin: 20px;
  --page-max: 1120px;
  --hero-size: 36px;
  --lead-size: 17px;
  --section-size: 24px;
  --step-title: 21px;
  --band-pad: 24px;
  --block-gap: 48px;
  --header-pad-y: 16px;
}

@media (min-width: 481px) {
  :root {
    --page-margin: 24px;
    --hero-size: 44px;
    --lead-size: 19px;
    --section-size: 27px;
    --step-title: 22px;
    --band-pad: 28px;
    --block-gap: 56px;
    --header-pad-y: 18px;
  }
}

@media (min-width: 769px) {
  :root {
    --page-margin: 40px;
    --hero-size: 56px;
    --lead-size: 21px;
    --section-size: 30px;
    --step-title: 24px;
    --band-pad: 32px;
    --block-gap: 72px;
    --header-pad-y: 22px;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-margin: 64px;   /* Seitenrand Web, wie im Design-System gesetzt */
    --hero-size: 76px;
    --band-pad: 48px;
    --block-gap: 88px;
  }
}

/* ---- Grundlage --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bh-bg);
  color: var(--bh-fg);
  font-family: var(--bh-font-sans);
  font-size: var(--bh-body-size);
  line-height: var(--bh-body-lead);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;

  /* Auf kurzen Seiten (404, Rechtsseiten) soll die Fusszeile unten sitzen
     und nicht mitten im Bild enden. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main { flex: 1 0 auto; }

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--bh-action);
  outline-offset: 2px;
}

/* ---- Bausteine --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

.meta {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-meta-size);
  font-weight: var(--bh-meta-weight);
  letter-spacing: var(--bh-meta-track);
  line-height: var(--bh-meta-lead);
  text-transform: uppercase;
  color: var(--bh-fg-muted);
}

.skip {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 300;
  background: var(--bh-ink);
  color: var(--bh-paper);
  padding: 12px 18px;
  border-radius: var(--bh-radius-web);
  font-weight: 600;
}
.skip:focus { top: 16px; }

/* ---- Knopf Web (design system/web/knopf-web.html) ---------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bh-space-8);
  min-height: var(--bh-hit);
  padding: 15px 26px;
  border-radius: var(--bh-radius-web);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background var(--bh-motion), color var(--bh-motion), border-color var(--bh-motion);
  text-align: center;
}
.knopf--primaer { background: var(--bh-ink); color: var(--bh-paper); }
.knopf--primaer:hover { background: var(--bh-action); }
.knopf--sekundaer { background: var(--bh-surface); border-color: var(--bh-text); color: var(--bh-text); }
.knopf--sekundaer:hover { background: var(--bh-text); color: var(--bh-paper); }
.knopf--umriss { background: transparent; border-color: var(--bh-text); color: var(--bh-text); padding: 14px 24px; }
.knopf--umriss:hover { background: var(--bh-text); color: var(--bh-paper); }
.knopf--kompakt { padding: 10px 18px; font-size: var(--bh-label-size); min-height: 0; }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-12);
  align-items: center;
}
.knopf-reihe--mitte { justify-content: center; }

/* ---- Kopfleiste (design system/web/kopfleiste.html) -------------------- */
/* Bleibt beim Scrollen oben stehen. Der Grund ist deckend, sonst schiene
   der Inhalt durch; z-index ueber den Abschnitten, unter der Ladeleiste. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bh-paper);
  border-bottom: 1px solid var(--bh-line);
}
.kopf > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bh-space-20);
  flex-wrap: wrap;
  padding-top: var(--header-pad-y);
  padding-bottom: var(--header-pad-y);
}

.marke { display: flex; align-items: center; gap: var(--bh-space-12); }
.marke img { width: 34px; height: 34px; border-radius: 22.2%; }
.wortmarke {
  display: flex;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--bh-text);
}
.wortmarke .punkt { color: var(--bh-ink); }

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.sprachwahl { display: flex; gap: var(--bh-space-10); align-items: center; }
.sprachwahl a {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-meta-size);
  letter-spacing: var(--bh-meta-track);
  text-transform: uppercase;
  color: var(--bh-fg-muted);
  padding: 6px 2px;
}
.sprachwahl a:hover { color: var(--bh-text); }
.sprachwahl a[aria-current="page"] { color: var(--bh-ink); font-weight: 500; }

/* Im Kopf stehen nur noch Sprachwahl und "App laden". Auf dem Telefon
   entfaellt der Knopf: dort fuehrt die feste Ladeleiste unten zum Store. */
@media (max-width: 768px) {
  .kopf .knopf { display: none; }
}
@media (max-width: 480px) {
  .wortmarke { font-size: 20px; }
}

/* ---- Abschnitte -------------------------------------------------------- */
main { display: block; }

.abschnitt { padding: var(--block-gap) 0; }
.abschnitt + .abschnitt { border-top: 1px solid var(--bh-divider); }

.abschnitt-titel {
  font-size: var(--section-size);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: var(--bh-space-16);
}
.abschnitt > .wrap > .meta { margin-bottom: var(--bh-space-16); }

.lead {
  font-size: var(--lead-size);
  line-height: 1.5;
  color: var(--bh-fg-body);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ---- 01 Hero ----------------------------------------------------------- */
.hero { padding: var(--block-gap) 0; }
/* Hero und Problem gehoeren inhaltlich zusammen - volle Abstaende auf beiden
   Seiten rissen sie mit fast 300px Leerraum auseinander. */
.hero:has(+ .abschnitt) { padding-bottom: calc(var(--block-gap) / 2); }
.hero + .abschnitt { padding-top: calc(var(--block-gap) / 2); }
.hero-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bh-space-24);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; }
}

/* Auftakt ueber der Schlagzeile: die Frage wechselt, die Antwort bleibt.
   Gleiche Groesse wie .lead, damit Auftakt und Nachsatz die Schlagzeile
   symmetrisch einfassen. */
.beispiele {
  font-size: var(--lead-size);
  line-height: 1.5;
  color: var(--bh-fg-muted);
  margin-bottom: var(--bh-space-16);
  /* Zwei Zeilen reserviert: rutscht ein langes Beispiel auf schmalen
     Schirmen um, darf die Schlagzeile darunter nicht springen. */
  min-height: 3em;
}
@media (min-width: 481px) { .beispiele { min-height: 1.5em; } }

.beispiele .wort {
  color: var(--bh-action);
  font-weight: 500;
  /* Erst raus, dann rein - mit Ueberlappung blenden zwei Woerter
     uebereinander und werden unleserlich. */
  transition: opacity .28s ease;
}
.beispiele .wort.ist-aktiv { transition: opacity .28s ease .28s; }
.beispiele .wort:not(.ist-aktiv) { opacity: 0; }

/* Nur fuer Vorlesesoftware und Suchmaschinen: das rotierende Wort zeigt
   eins von sechs, diese Zeile nennt alle. */
.nur-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .beispiele .wort, .beispiele .wort.ist-aktiv { transition: none; }
}

.hero h1 {
  font-size: var(--hero-size);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}
.hero .lead { margin-top: var(--bh-space-20); }
.hero .knopf-reihe { margin-top: var(--bh-space-24); }

.vertrauen {
  margin-top: var(--bh-space-20);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-caption-size);
  color: var(--bh-fg-muted);
}

.geraet {
  justify-self: center;
  width: 100%;
  max-width: 270px;
  border-radius: var(--bh-radius-web);
  overflow: hidden;
  border: 1px solid var(--bh-line);
  background: var(--bh-card);
}
.geraet img { width: 100%; }

/* ---- 02 Problem -------------------------------------------------------- */
/* Der Abschnitt stand vorher als ein Absatz mit neun harten Umbrüchen
   linksbündig in einem 1120px-Band - schmaler Text, halb leere Fläche, und
   die Wendung von Frage zu Antwort war nur ein Farbwechsel. Jetzt zwei
   Blöcke mit Luft dazwischen, daneben die Reichweiten-Grafik, die genau das
   zeigt, was der Satz sagt. Auf breiten Schirmen steht die Grafik links, der
   Text rechts - gespiegelt zum Hero darueber. Im Markup bleibt der Text
   zuerst, damit Telefon und Vorlesesoftware mit der Frage beginnen. */
.problem-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .problem-raster { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 64px; }
  .problem-raster .reichweite { order: -1; }
}
.problem-raster .frage,
.problem-raster .antwort {
  font-size: calc(var(--lead-size) + 3px);
  line-height: 1.45;
  max-width: 34ch;
  margin: 0;
}
/* Die harten Umbrüche phrasieren den Satz - aber nur, solange die Zeile
   breit genug ist. Auf schmalen Schirmen kollidieren sie mit dem normalen
   Umbruch ("when you don't / know"), deshalb fließt der Text dort frei.
   Betrifft vor allem EN und FR: deren Zeilen sind länger als die deutschen. */
@media (max-width: 899px) {
  .problem-raster br { display: none; }
}

.problem-raster .frage { color: var(--bh-fg-body); }
.problem-raster .antwort { color: var(--bh-text); font-weight: 600; margin-top: 32px; }

/* Auf Tinte (der Problemabschnitt der Startseite) kehren sich beide
   um. Ohne diese zwei Zeilen stehen Frage und Antwort dunkel auf dunkel -
   die Grundregeln oben sind fuer Papier gesetzt. */
.band-tinte .problem-raster .frage { color: var(--bh-on-ink-body); }
.band-tinte .problem-raster .antwort { color: var(--bh-paper); }

/* Onboarding-Grafik 1A. Gezeichnet nur für Papier #F4F2ED - der Abschnitt
   liegt darauf, und die Seite hat keinen Dunkelmodus. Käme einer dazu,
   braucht diese Grafik eine zweite Fassung (siehe README im Design-System). */
.problem-raster .reichweite {
  justify-self: center;
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
}

/* ---- 03 / 07 Schrittblock (design system/web/schrittblock.html) -------- */
.band-tinte { background: var(--bh-ink); color: var(--bh-paper); }
.band-tinte .meta { color: var(--bh-action-soft); }
.band-tinte .abschnitt-titel { color: var(--bh-paper); }
.band-tinte .lead { color: var(--bh-on-ink-body); }

/* Die Vision auf Tinte (seit 23.09.2026). Wie beim Problemraster kehren sich
   die Textfarben um - .vision und ihr <strong> sind fuer Papier gesetzt und
   staenden hier dunkel auf dunkel. Der Verweis wird vom weissen Chip zum
   Umriss: eine weisse Flaeche laege als Fremdkoerper auf dem Band, und der
   Rahmen aus --bh-line ist fuer Papier gedacht. */
.band-tinte .vision { color: var(--bh-on-ink-body); }
.band-tinte .vision strong { color: var(--bh-paper); }
.band-tinte .verweise a {
  background: transparent;
  border-color: var(--bh-action-soft);
  color: var(--bh-paper);
}
.band-tinte .verweise a:hover { border-color: var(--bh-paper); color: var(--bh-paper); }

/* Knoepfe auf Tinte. Der primaere Knopf traegt sonst --bh-ink als Flaeche -
   dieselbe Farbe wie das Band, er verschwaende also bis auf seine Schrift.
   Auf Tinte kehrt er sich um: Papier als Flaeche, Tinte als Schrift. Der
   sekundaere wird zum Umriss, weil --bh-surface als helle Flaeche neben dem
   umgekehrten Primaerknopf zwei fast gleiche Knoepfe ergaebe. */
.band-tinte .knopf--primaer { background: var(--bh-paper); color: var(--bh-ink); }
.band-tinte .knopf--primaer:hover { background: var(--bh-action-soft); color: var(--bh-ink); }
.band-tinte .knopf--sekundaer {
  background: transparent;
  border-color: var(--bh-paper);
  color: var(--bh-paper);
}
.band-tinte .knopf--sekundaer:hover { background: var(--bh-paper); color: var(--bh-ink); }

.schritte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: var(--band-pad) 0;
}
@media (min-width: 1024px) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.schritt-nr {
  font-family: var(--bh-font-mono);
  font-size: 12px;
  color: var(--bh-action-soft);
  margin-bottom: 14px;
}
.schritt h3 {
  font-size: var(--step-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bh-paper);
  margin-bottom: var(--bh-space-10);
}
.schritt p { font-size: 16px; line-height: 1.5; color: var(--bh-on-ink-body); }

/* ---- 04 App-Schaufenster ---------------------------------------------- */
.schaufenster {
  display: flex;
  gap: var(--bh-space-20);
  overflow-x: auto;
  padding-bottom: var(--bh-space-12);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.schaufenster figure {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-web);
  overflow: hidden;
  background: var(--bh-card);
}
.schaufenster img { width: 100%; }
/* Die Bilder erzaehlen die App in der Reihenfolge, in der man sie erlebt:
   Titel als Schritt, darunter ein Satz. */
.schaufenster figcaption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--bh-fg-body);
  padding: var(--bh-space-12);
  border-top: 1px solid var(--bh-line);
}
.schaufenster figcaption strong {
  display: block;
  font-weight: 600;
  color: var(--bh-text);
  margin-bottom: 2px;
}
@media (max-width: 480px) { .schaufenster figure { width: 180px; } }

/* ---- 06 Safe Space ----------------------------------------------------- */
/* Loest den TestFlight-Block ab; der Titel ist laenger als dessen 22ch.
   Den abgesetzten Grund tragen zwei Abschnitte, deshalb eine eigene
   Klasse dafuer: Problem (02) und Safe Space (06). */
.gesenkt { background: var(--bh-card-sunk); }
.safe .abschnitt-titel { max-width: 34ch; margin-bottom: var(--bh-space-24); }

/* ---- 06 Vorteile ------------------------------------------------------- */
.vorteile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bh-space-20);
}
@media (min-width: 769px) { .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vorteile { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.karte {
  background: var(--bh-card);
  border: var(--bh-card-border-width) solid var(--bh-card-border-color);
  border-radius: var(--bh-radius-web);
  padding: var(--bh-space-24);
}
.karte .meta { display: block; margin-bottom: var(--bh-space-12); }
.karte h3 {
  font-size: var(--bh-headline-size);
  font-weight: var(--bh-headline-weight);
  letter-spacing: var(--bh-headline-track);
  line-height: var(--bh-headline-lead);
  margin-bottom: var(--bh-space-8);
}
.karte p { font-size: var(--bh-body-floor); line-height: 1.5; color: var(--bh-fg-body); }

/* ---- 08 Vision --------------------------------------------------------- */
.vision {
  font-size: calc(var(--lead-size) + 1px);
  line-height: 1.55;
  color: var(--bh-fg-body);
  max-width: 52ch;
}
.vision strong { color: var(--bh-text); }
.verweise {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-12);
  margin-top: var(--bh-space-24);
}
.verweise a {
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-web);
  padding: 10px 16px;
  font-size: var(--bh-label-size);
  font-weight: 500;
  color: var(--bh-text-body);
  background: var(--bh-card);
}
.verweise a:hover { border-color: var(--bh-text); color: var(--bh-text); }

/* ---- 09 / 13 Aufruf ---------------------------------------------------- */
.aufruf .abschnitt-titel { font-size: calc(var(--section-size) + 4px); max-width: 20ch; }

/* ---- 10 Vereine · 11 Partner ------------------------------------------ */
/* Schlusssatz unter einem Kartenraster. Kein .kasten: der traegt denselben
   Grund wie ein .gesenkt-Abschnitt und waere darin unsichtbar. */
.nachsatz { margin-top: var(--bh-space-24); }

.kasten {
  background: var(--bh-card-sunk);
  border-radius: var(--bh-radius-web);
  padding: var(--band-pad);
}
.kasten p + p { margin-top: var(--bh-space-12); }
.kasten .knopf-reihe { margin-top: var(--bh-space-20); }

/* ---- 12 Fragen --------------------------------------------------------- */
.fragen { border-top: 1px solid var(--bh-divider); }
.fragen details { border-bottom: 1px solid var(--bh-divider); }
.fragen summary {
  cursor: pointer;
  list-style: none;
  padding: var(--bh-space-20) 40px var(--bh-space-20) 0;
  font-size: var(--bh-item-size);
  font-weight: var(--bh-item-weight);
  position: relative;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--bh-fg-muted);
}
.fragen details[open] summary::after { content: "\2013"; }
.fragen details p {
  padding: 0 0 var(--bh-space-20);
  color: var(--bh-fg-body);
  font-size: var(--bh-body-floor);
  line-height: 1.6;
  max-width: 68ch;
}

/* ---- Fusszeile (design system/web/fusszeile.html) ---------------------- */
.fuss { background: var(--bh-text); color: var(--bh-paper); margin-top: var(--block-gap); }
/* Der Abstand trennt die Fusszeile von einem Abschnitt auf Papier. Endet die
   Seite auf einem Band, trennt er zwei dunkle Flaechen durch einen hellen
   Streifen - das sieht aus wie eine Naht, nicht wie Abstand. Die Startseite
   endet auf Tinte, die Rechts- und Supportseiten enden auf Papier und
   behalten den Abstand - deshalb die Bedingung statt eines festen 0. */
main:has(> section:last-child.band-tinte) + .fuss { margin-top: 0; }
/* Drei Zeilen untereinander: Wortmarke, Verweise, Stand. */
.fuss > .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bh-space-24);
  padding-top: 36px;
  padding-bottom: 36px;
}
.fuss .wortmarke { font-size: 20px; color: var(--bh-paper); }
.fuss .wortmarke .punkt { color: var(--bh-action-soft); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 14px; color: var(--bh-dark-muted); }
.fuss-links a:hover { color: var(--bh-paper); }
.fuss-notiz { font-size: var(--bh-caption-size); color: var(--bh-dark-muted); }

/* ---- Feste Ladeleiste, nur Telefon ------------------------------------ */
.leiste { display: none; }
@media (max-width: 768px) {
  .leiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    display: flex;
    gap: var(--bh-space-8);
    padding: var(--bh-space-10) var(--page-margin);
    background: var(--bh-paper);
    border-top: 1px solid var(--bh-line);
  }
  .leiste .knopf { flex: 1 1 0; padding: 12px 14px; font-size: var(--bh-label-size); }
  body { padding-bottom: 76px; }
}

/* ---- Rechtsseiten ------------------------------------------------------ */
.recht { padding: var(--block-gap) 0; max-width: 78ch; }
.recht h1 { font-size: var(--section-size); font-weight: 600; letter-spacing: -0.025em; margin-bottom: var(--bh-space-24); }
.recht h2 {
  font-size: var(--bh-headline-size);
  font-weight: var(--bh-headline-weight);
  letter-spacing: var(--bh-headline-track);
  margin: var(--bh-space-24) 0 var(--bh-space-8);
}
.recht h3 {
  font-size: var(--bh-item-size);
  font-weight: 600;
  margin: var(--bh-space-20) 0 var(--bh-space-8);
}
.recht code {
  font-family: var(--bh-font-mono);
  font-size: 0.92em;
  background: var(--bh-card-sunk);
  padding: 1px 5px;
  border-radius: var(--bh-radius-tag);
}
.recht p, .recht li { font-size: var(--bh-body-floor); line-height: 1.65; color: var(--bh-fg-body); }
.recht p + p { margin-top: var(--bh-space-12); }
.recht ul { margin: var(--bh-space-12) 0 0 var(--bh-space-20); }
.recht li { margin-bottom: var(--bh-space-4); }
.recht a { color: var(--bh-link); text-decoration: underline; text-underline-offset: 2px; }
.recht a:hover { color: var(--bh-text); }
.recht table { border-collapse: collapse; margin-top: var(--bh-space-12); width: 100%; }
.recht th, .recht td {
  border: 1px solid var(--bh-line);
  padding: var(--bh-space-10) var(--bh-space-12);
  font-size: var(--bh-caption-size);
  text-align: left;
  vertical-align: top;
  color: var(--bh-fg-body);
}
.recht th { font-weight: 600; color: var(--bh-text); background: var(--bh-card-sunk); }
.tabelle-rollt { overflow-x: auto; }

.zurueck {
  display: inline-block;
  margin-bottom: var(--bh-space-24);
  font-size: var(--bh-label-size);
  font-weight: 500;
  color: var(--bh-link);
}
.zurueck:hover { color: var(--bh-text); }

/* ---- Rechtstexte der App (/app/nutzungsbedingungen.html, /app/datenschutz.html)
   Die Entwuerfe in proximety-docs bringen eigene Kaesten, ein
   Inhaltsverzeichnis und nummerierte Abschnitte mit. Hier nur mit Tokens
   nachgebaut, keine eigenen Farbwerte, keine Inline-Stile (CSP). */
.recht--app .kicker {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-meta-size);
  letter-spacing: var(--bh-meta-track);
  text-transform: uppercase;
  color: var(--bh-fg-muted);
  margin-bottom: var(--bh-space-12);
}
.recht--app .lead { font-size: var(--lead-size); color: var(--bh-fg-body); margin-top: 0; }
.recht--app .stand {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-caption-size);
  color: var(--bh-fg-muted);
  margin-top: var(--bh-space-24);
  padding-top: var(--bh-space-16);
  border-top: 1px solid var(--bh-line);
}
.recht--app h2 { margin-top: 48px; }
.recht--app h2 .num {
  display: block;
  font-family: var(--bh-font-mono);
  font-size: var(--bh-meta-size);
  letter-spacing: var(--bh-meta-track);
  color: var(--bh-fg-muted);
  font-weight: 500;
  margin-bottom: var(--bh-space-4);
}
.recht--app .box,
.recht--app .toc,
.recht--app .dreisatz > div {
  background: var(--bh-surface);
  border: 1px solid var(--bh-line);
  border-radius: var(--bh-radius-web);
  padding: var(--bh-space-20);
}
.recht--app .box { margin: var(--bh-space-20) 0; }
.recht--app .box--akzent { border-left: 3px solid var(--bh-link); }
.recht--app .box--warn { border-left: 3px solid var(--bh-urgent); }
.recht--app .box--blau { background: var(--bh-ink); border-color: var(--bh-ink); }
.recht--app .box--blau p,
.recht--app .box--blau strong { color: var(--bh-paper); }
.recht--app .toc { margin-top: var(--bh-space-24); }
.recht--app .toc ol { columns: 2; column-gap: 32px; margin: 0 0 0 var(--bh-space-20); }
.recht--app .toc a { text-decoration: none; color: var(--bh-fg-body); }
.recht--app .toc a:hover { text-decoration: underline; color: var(--bh-text); }
.recht--app .dreisatz {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-16);
  margin-top: var(--bh-space-24);
}
.recht--app .dreisatz > div { flex: 1 1 200px; }
.recht--app .zahl {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-meta-size);
  letter-spacing: var(--bh-meta-track);
  text-transform: uppercase;
  color: var(--bh-fg-muted);
  margin-bottom: var(--bh-space-8);
}
.recht--app .satz { color: var(--bh-text); line-height: 1.4; }
.recht--app .tablenote { font-size: var(--bh-caption-size); color: var(--bh-fg-muted); }
.recht--app .siehe-auch { margin-top: 40px; }
@media (max-width: 640px) {
  .recht--app .toc ol { columns: 1; }
}

/* ---- 404 --------------------------------------------------------------- */
/* ---- /app/ - die Seite hinter dem QR-Code ------------------------------ */
/* Telefone sehen diese Seite nie, die Weiche schickt sie in den Store. Wer
   sie zu Gesicht bekommt, sitzt am Rechner - deshalb ist der Code die
   Hauptsache und die beiden Store-Knoepfe sind der Nebenweg. Schmal und
   zentriert: die Seite ist ein Aushang, kein Abschnitt der Startseite.
   Vorher lieh sie sich .leer, den Leerzustand der 404, und sah entsprechend
   nach Fehlermeldung aus. */
.seite-laden {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.seite-laden .fuss { margin-top: 0; }

.laden {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--block-gap) 0;
}
.laden-mitte {
  max-width: 420px;
  text-align: center;
}
.laden h1 {
  font-size: var(--section-size);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

/* Der Kasten bleibt in JEDEM Farbschema weiss - nicht var(--bh-card), das im
   dunklen Schema auf eine dunkle Flaeche zeigt. Ein QR-Code braucht seine
   helle Ruhezone, sonst liest ihn keine Kamera. */
.laden-code {
  width: fit-content;
  margin: var(--bh-space-24) auto 0;
  padding: var(--bh-space-20);
  background: var(--bh-surface);
  border: var(--bh-card-border-width) solid var(--bh-card-border-color);
  border-radius: var(--bh-radius-web);
  line-height: 0;
}
.laden-tun {
  margin-top: var(--bh-space-20);
  font-size: var(--lead-size);
  color: var(--bh-fg-body);
  text-wrap: balance;   /* sonst bricht die Zeile 5 Woerter gegen 1 um */
}
.laden-sprachen {
  margin-top: var(--bh-space-8);
  font-size: var(--bh-caption-size);
  line-height: 1.6;
  color: var(--bh-fg-muted);
}
.laden .knopf-reihe { margin-top: var(--bh-space-24); }

.leer { padding: var(--block-gap) 0; }
.leer h1 { font-size: var(--hero-size); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.leer ul { list-style: none; margin-top: var(--bh-space-24); display: grid; gap: var(--bh-space-8); }
.leer ul a { color: var(--bh-link); font-weight: 500; }

/* =========================================================================
   Die Startseite
   =========================================================================
   Alles hier gehoert zur Startseite und ihren Grafiken. Bis zum 23.09.2026
   stand sie als zweite Fassung unter /neu/; seitdem ist sie die Seite.
   Eigene benannte Bloecke, keine geliehene Layoutklasse: .leer auszuleihen
   hat einmal .leer a { color: var(--bh-link) } mitgebracht und einen Knopf
   auf 2,02:1 gedrueckt (siehe solutions/ui-bugs/borrowed-layout-class-...).
   ------------------------------------------------------------------------ */

/* ---- Abstand zwischen Ueberschrift und Grafik ------------------------- */
/* Die drei Grafiken sind je ein eigener Abschnitt mit eigener Flaeche. Eine
   gemeinsame Klammerueberschrift gab es einmal; sie sagte nichts, was die
   drei Aussagen nicht selbst sagen. */
.abschnitt-titel + .bh-grafik { margin-top: var(--bh-space-24); }

/* ---- Bedienzeile ------------------------------------------------------- */
/* Gebaut von js/grafiken.js, nicht im Markup: ohne JavaScript waeren es drei
   Knoepfe, die nichts tun. Volle Knopfgroesse (.knopf, nicht
   .knopf--kompakt) - das kompakte Mass ist im Design-System fuer die
   Kopfleiste gesetzt und faellt mit min-height 0 unter die 44 px aus
   --bh-hit. Hier stehen drei Knoepfe nebeneinander, die oft hintereinander
   getippt werden. */
.bh-steuerung {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bh-space-8);
  margin-bottom: var(--bh-space-24);
}
.bh-wahl.ist-aktiv {
  background: var(--bh-ink);
  border-color: var(--bh-ink);
  color: var(--bh-paper);
}

/* ---- Ein Zustand ------------------------------------------------------- */
/* Jeder Zustand steht als fertiges Markup in der Seite. Erst wenn
   js/fruehstart.js die Klasse js gesetzt hat - vor dem ersten Bild -,
   blendet die naechste Regel die inaktiven aus. Ohne JavaScript stehen alle
   untereinander, und genau das ist die Rueckfallebene. */
.bh-zustand {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bh-space-24);
  align-items: center;
}
.bh-zustand + .bh-zustand { margin-top: var(--block-gap); }
@media (min-width: 769px) {
  .bh-zustand { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}

.js .bh-zustand:not(.ist-aktiv) { display: none; }
.js .bh-zustand + .bh-zustand { margin-top: 0; }
/* Mit JavaScript steht der Name schon auf dem gewaehlten Knopf. */
.js .bh-name { display: none; }
.bh-name { margin-bottom: var(--bh-space-12); }

.bh-text > * + * { margin-top: var(--bh-space-12); }
.bh-zahl {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-caption-size);
  color: var(--bh-fg-muted);
}
.bh-zahl strong {
  font-family: var(--bh-font-sans);
  font-size: calc(var(--section-size) + 4px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--bh-ink);
  display: block;
  line-height: 1.05;
}
/* Die Aussage in einem Satz: fett, in Textfarbe, auf schmales Mass gesetzt -
   nicht der laufende Text eines Leads, sondern ein Satz, der steht.
   Zweimal gebraucht: in der Bildunterschrift jeder Grafik (.bh-anspruch)
   und einmal als Schluss unter der ersten (.anspruch). EINE Regel fuer
   beide. Die Klasse der Grafik einfach auszuleihen waere der Fehler, den
   solutions/ui-bugs/borrowed-layout-class-carries-its-cascade.md
   beschreibt: sie brachte ihre Kaskade mit. */
.bh-anspruch,
.anspruch {
  font-size: var(--lead-size);
  font-weight: 600;
  line-height: 1.35;
  color: var(--bh-text);
  max-width: 30ch;
  text-wrap: pretty;
}
/* Nur die freistehende: sie steht zwischen der Grafik und dem, was folgt, und
   braucht nach BEIDEN Seiten Luft. Ohne die untere klebt sie auf der ersten
   Karte; ohne die obere klebt sie - sobald die Spalten unter 769 px
   uebereinander stehen - direkt unter der .bh-notiz der Bildunterschrift und
   liest sich als deren letzter Satz. In der Bildunterschrift selbst regelt
   .bh-text > * + * den Abstand, deshalb steht das hier und nicht in der
   gemeinsamen Regel. */
.anspruch {
  margin: var(--bh-space-24) 0;
  /* Weiter als die 30ch der Bildunterschrift: die steht in einer schmalen
     Spalte, diese ueber der vollen Breite. Der Umbruch sitzt als <br> im
     Markup, vor dem Gedankenstrich; bei 30ch braeche die zweite Zeile ein
     zweites Mal und der gesetzte Umbruch waere umsonst. */
  max-width: 46ch;
}
.bh-notiz {
  font-size: var(--bh-body-floor);
  line-height: 1.55;
  color: var(--bh-fg-body);
  max-width: 42ch;
  text-wrap: pretty;
}

/* ---- Das Kreisbauteil -------------------------------------------------- */
/* Zweimal dasselbe: derselbe Ring, dieselben 26 Punkte, derselbe Marker.
   Einmal mit Linien darauf, einmal mit Gruppenkreisen.

   EINE FARBFAMILIE JE GRAFIK, kein Farbwechsel fuer Kategorien - so steht
   es im Design-System (web/diagramm.html). Verein und Kollegen
   unterscheiden sich deshalb nicht durch die Farbe, sondern durch ihren
   Kreis und ihre Beschriftung; betont wird ueber die Stufe der Reihe. */
.bh-svg {
  width: 100%;
  max-width: 340px;
  justify-self: center;
  overflow: visible;
}
.bh-feld {
  fill: none;
  stroke: var(--bh-line);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}
.bh-gruppe {
  fill: none;
  stroke: var(--bh-series-1);
  stroke-width: 2;
  transition: stroke var(--bh-motion), fill-opacity var(--bh-motion);
}
.bh-gruppe.ist-aktiv {
  fill: var(--bh-series-1);
  fill-opacity: 0.55;
  stroke: var(--bh-series-3);
}
.bh-linie {
  stroke: var(--bh-series-1);
  stroke-width: 1;
  transition: stroke var(--bh-motion), stroke-width var(--bh-motion);
}
.bh-linie.ist-aktiv { stroke: var(--bh-series-3); stroke-width: 2; }
.bh-punkt {
  fill: var(--bh-series-1);
  transition: fill var(--bh-motion);
}
.bh-punkt.ist-aktiv { fill: var(--bh-series-4); }
.bh-mitte { fill: var(--bh-series-4); }
.bh-mitte-kern { fill: var(--bh-paper); }

/* Dasselbe Bauteil auf Tinte, im Problemabschnitt. Die Reihe kehrt sich um -
   auf dunklem Grund traegt die HELLE Stufe, nicht die dunkle. Es bleibt
   dieselbe Farbfamilie, wie das Design-System es fuer jede Grafik verlangt
   (web/diagramm.html): eine Familie, kein Farbwechsel fuer Kategorien. */
.bh-svg--tinte .bh-feld { stroke: var(--bh-action-soft); }
.bh-svg--tinte .bh-punkt { fill: var(--bh-series-2); }
.bh-svg--tinte .bh-punkt.ist-aktiv { fill: var(--bh-series-1); }
.bh-svg--tinte .bh-mitte { fill: var(--bh-paper); }
.bh-svg--tinte .bh-mitte-kern { fill: var(--bh-ink); }

/* ---- Die Vertrauensleiter, als Tabelle -------------------------------- */
/* Neun Zellen statt drei Bildkarten. Der Vorteil ist nicht die Kuerze: die
   Tabelle ist OHNE JavaScript vollstaendig. Alle Stufen stehen gleichzeitig
   da, und das Hervorheben einer Spalte ist reine Zugabe. Drei gestapelte
   Bildkarten waren dagegen nur lesbar, WEIL sie untereinander standen. */
.bh-rollt { overflow-x: auto; }

.leiter {
  border-collapse: collapse;
  width: 100%;
  /* Unter dieser Breite rollt der Kasten, statt die Seite zu verbreitern. */
  min-width: 340px;
}
.leiter th,
.leiter td {
  border-bottom: 1px solid var(--bh-line);
  padding: var(--bh-space-12);
  text-align: left;
  vertical-align: top;
  transition: background var(--bh-motion);
}
.leiter thead th {
  font-family: var(--bh-font-mono);
  font-size: var(--bh-meta-size);
  font-weight: var(--bh-meta-weight);
  letter-spacing: var(--bh-meta-track);
  line-height: var(--bh-meta-lead);
  text-transform: uppercase;
  color: var(--bh-fg-muted);
  border-bottom-color: var(--bh-text);
  padding: 0;
}
.leiter tbody th {
  font-size: var(--bh-body-floor);
  font-weight: 600;
  color: var(--bh-text);
  white-space: nowrap;
}
.leiter td {
  font-size: var(--bh-body-floor);
  line-height: 1.4;
  color: var(--bh-fg-body);
}
.leiter tbody tr:last-child th,
.leiter tbody tr:last-child td { border-bottom: 0; }

/* Die hervorgehobene Spalte. Dieselbe Reihe wie die Grafiken: die helle
   Stufe als Flaeche, die Schrift in Tinte - kein zweiter Farbton. */
.leiter [data-stufe].ist-aktiv { background: var(--bh-series-1); }
.leiter tbody td[data-stufe].ist-aktiv { color: var(--bh-ink); font-weight: 600; }

/* Der Spaltenkopf ist ein Knopf, gebaut von js/grafiken.js. Volle Hoehe aus
   --bh-hit, wie jeder andere Knopf der Seite - hier wird oft hintereinander
   getippt. */
.bh-stufe {
  display: block;
  width: 100%;
  min-height: var(--bh-hit);
  padding: var(--bh-space-12);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.bh-stufe:hover { color: var(--bh-text); }
.bh-stufe[aria-pressed="true"] { color: var(--bh-ink); font-weight: 500; }
/* Ohne JavaScript steht im Kopf nur Text - dann traegt die Zelle das Mass. */
.leiter thead th:not(:has(.bh-stufe)) { padding: var(--bh-space-12); }


/* ---- Die beiden Ablaeufe (03 und 05 zusammengelegt) -------------------- */
/* Vier Spalten auf breiten Schirmen: aussen die Aufnahmen, innen die
   Schritte, links gespiegelt zu rechts. Der rechte Ablauf beginnt eine
   Zeile tiefer - das ist der Inhalt des Abschnitts, nicht Dekoration.

   EIN Raster fuer beide Haelften, nicht zwei nebeneinander. Zwei getrennte
   Raster haetten je eigene Zeilenhoehen, und dann liegt Zeile 2 links nicht
   auf derselben Hoehe wie Zeile 2 rechts - der Versatz waere unsichtbar.
   Deshalb tragen die Zellen ihre Zeile als Klasse und werden gesetzt.

   Im Markup stehen beide Ablaeufe hintereinander, erst fragen, dann
   helfen. So liest eine Vorlesesoftware zwei zusammenhaengende Ablaeufe
   statt einer Tabelle, und auf dem Telefon stapelt es sich von selbst
   richtig. Nur das Raster zieht sie darueber nebeneinander. */
.ablaeufe {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bh-space-24);
  padding: var(--band-pad) 0;
}
.ablauf-marke { color: var(--bh-action-soft); }
.ablauf-marke + .ablauf-bild,
.ablauf-marke + .ablauf-schritt { margin-top: calc(var(--bh-space-4) * -1); }

/* Ab hier die vier Spalten. Darunter bleibt alles gestapelt: vier Spalten
   auf einem Telefon waeren 80 px breit. */
@media (min-width: 1024px) {
  .ablaeufe {
    grid-template-columns:
      minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
    column-gap: 32px;
    row-gap: 48px;
    align-items: start;
  }
  /* Zeile 1 tragen die beiden Marken, je ueber ihrer Haelfte. */
  .ablauf-marke--fragen { grid-area: 1 / 1 / 2 / 3; }
  .ablauf-marke--helfen { grid-area: 1 / 3 / 2 / 5; }

  .ablauf-bild--fragen   { grid-column: 1; }
  .ablauf-schritt--fragen { grid-column: 2; }
  .ablauf-schritt--helfen { grid-column: 3; }
  .ablauf-bild--helfen   { grid-column: 4; }

  /* Die Zeilen des gemeinsamen Rasters. Zeile 1 gehoert den Marken,
     deshalb der Versatz um eins. */
  .reihe-1 { grid-row: 2; }
  .reihe-2 { grid-row: 3; }
  .reihe-3 { grid-row: 4; }
  .reihe-4 { grid-row: 5; }
}

/* Der Rahmen liegt auf dem Bild, nicht auf der figure: die Karte IST das
   Telefon. Damit haben beide Seiten dieselbe Hoehe - alle Aufnahmen sind
   480x1044 und werden auf dieselbe Breite gelegt - und die Unterschriften
   beginnen links wie rechts auf derselben Zeile. Lag der Rahmen um die
   figure, bestimmte die Zeilenzahl der Unterschrift die Kartenhoehe, und
   die beiden Karten endeten je nach Text verschieden tief. */
.ablauf-bild {
  width: 100%;
  max-width: 240px;
}
@media (max-width: 1023px) {
  .ablauf-bild { margin-left: auto; margin-right: auto; }
}
.ablauf-bild img {
  display: block;
  width: 100%;
  border-radius: var(--bh-radius-web);
  border: 1px solid var(--bh-line);
  background: var(--bh-card);
}

/* Die Unterschrift steht auf dem Band, ohne Kasten. Sie benennt den
   Bildschirm, den man sieht; die Schrittueberschrift daneben erklaert den
   Moment. Zwei Aufgaben, also zwei Stimmen: die Marke in der Mono-Stimme
   der Marken darueber ("WENN DU FRAGST"), nicht als zweite Ueberschrift,
   die mit der danebenstehenden um die Aufmerksamkeit streitet. */
.ablauf-bild figcaption {
  font-size: 14px;
  line-height: 1.45;
  color: var(--bh-on-ink-body);
  padding-top: var(--bh-space-12);
}
.ablauf-bild figcaption strong {
  display: block;
  font-family: var(--bh-font-mono);
  font-size: var(--bh-meta-size);
  font-weight: var(--bh-meta-weight);
  letter-spacing: var(--bh-meta-track);
  line-height: var(--bh-meta-lead);
  text-transform: uppercase;
  color: var(--bh-action-soft);
  margin-bottom: var(--bh-space-4);
}

/* ---- Ein Bild je Seite, beide wandern gemeinsam ------------------------ */
/* Nur ab 1024 px und nur unter .js. Die Klasse setzt js/fruehstart.js vor
   dem ersten Bild, deshalb blitzt der Stapel nie auf. Ohne sie - und unter
   1024 px immer - steht jedes Bild da; das ist die Rueckfallebene.

   Jede Seite ist EIN Platz: alle Bilder einer Seite liegen in derselben
   Rasterzelle ueber den vier Zeilen. Ausgeblendet wird mit visibility,
   nicht mit display - so bemisst der verborgene Stapel die Zelle weiter,
   und ein Wechsel verschiebt keine Zeile Text. Welches Paar steht, sagt
   data-reihe am Raster; im Markup steht 1, js/grafiken.js setzt die
   anderen. */

@media (min-width: 1024px) {
  .js .ablaeufe .ablauf-bild--fragen,
  .js .ablaeufe .ablauf-bild--helfen { grid-row: 2 / 6; }

  .js .ablaeufe .ablauf-bild { visibility: hidden; }
  .js .ablaeufe[data-reihe="1"] .reihe-1.ablauf-bild,
  .js .ablaeufe[data-reihe="2"] .reihe-2.ablauf-bild,
  .js .ablaeufe[data-reihe="3"] .reihe-3.ablauf-bild,
  .js .ablaeufe[data-reihe="4"] .reihe-4.ablauf-bild { visibility: visible; }

  /* Die Markierung. Das einzige Band auf Tinte; die Flaechen der anderen
     Grafiken sind fuer Papier gebaut. Deshalb der Akzent des Bands als
     Rahmen und Unterstrich, keine Flaeche. Der Unterstrich liegt schon vor
     dem ersten Bild als durchsichtige Linie da - wer ihn einfaerbt, schiebt
     nichts. */
  .js .ablaeufe .ablauf-bild img { border-color: var(--bh-action-soft); }
  .js .ablauf-schritt {
    padding-bottom: var(--bh-space-12);
    border-bottom: 2px solid transparent;
  }
  .js .ablaeufe[data-reihe="1"] .reihe-1.ist-waehlbar,
  .js .ablaeufe[data-reihe="2"] .reihe-2.ist-waehlbar,
  .js .ablaeufe[data-reihe="3"] .reihe-3.ist-waehlbar,
  .js .ablaeufe[data-reihe="4"] .reihe-4.ist-waehlbar { border-bottom-color: var(--bh-action-soft); }
}

/* Die Zeile ist der Knopf. js/grafiken.js legt ihn um die Ueberschrift der
   ersten Haelfte einer Zeile; sein ::after spannt ueber den ganzen
   Schrittblock, damit die Trefferflaeche weit ueber --bh-hit liegt, ohne
   dass die Ueberschrift ein Pixel waechst. Die andere Haelfte schaltet per
   Klick mit. Der Fokusring ist Papier, nicht das Aktionsblau: das hat auf
   Tinte kaum Kontrast.

   Kein eigener Zustand fuer die Maus. Wer eine Zeile ueberfaehrt, waehlt
   sie damit schon (mouseenter oben), und der Unterstrich unter BEIDEN
   Haelften ist die Rueckmeldung. Ein zweites Zeichen fuer dasselbe
   Ereignis stand hier: text-decoration auf der h3. Es erschien nur auf der
   Haelfte OHNE Knopf - ein button ist ein atomarer Inline-Block, den die
   Unterstreichung der h3 nicht erreicht -, also rechts bei Schritt 01 und
   02 und sonst nirgends. Wer die Maus wieder zeichnen will, faerbt den
   Unterstrich, nicht die Schrift: nur er liegt auf beiden Haelften. */
.ist-waehlbar { position: relative; cursor: pointer; }
.ablauf-wahl {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ablauf-wahl::after {
  content: '';
  position: absolute;
  inset: 0;
  min-height: var(--bh-hit);
  border-radius: var(--bh-radius-web);
}
.ablauf-wahl:focus-visible { outline: none; }
.ablauf-wahl:focus-visible::after {
  outline: 3px solid var(--bh-paper);
  outline-offset: 4px;
}

/* .abschnitt-unter - die Zwischenueberschrift eines zusammengelegten
   Abschnitts - ist am 23.09.2026 entfallen. Sie hatte genau einen Traeger,
   "Ihr seid nicht das Produkt", und der ist auf eine Haelfte geschrumpft und
   traegt seine Zwischenueberschrift jetzt als Abschnittsueberschrift. Wer
   wieder zwei Bloecke in einen Abschnitt legt, holt die Regel aus der
   Geschichte zurueck. */

/* ---- Knopf aus der App, in der Karte ----------------------------------- */
/* Der echte Knopf steht in der Karte, die ihn erklaert. Freigestellt: sein
   Grund in der Aufnahme ist --bh-paper, die Karte ist --bh-card - ohne
   Transparenz laege ein hellgraues Quadrat auf Weiss.

   UNTEN angeheftet, nicht oben. Nicht jede Karte einer Reihe hat einen Knopf;
   oben stuende die Ueberschrift der knopflosen Karte hoeher als die ihrer
   Nachbarn. Unten fallen die Knoepfe dagegen auf eine Linie, weil das Raster
   die Karten ohnehin auf gleiche Hoehe zieht.

   Das Mass steht an der HOEHE, nicht an der Breite: so ist der einzelne
   bitte.call-Knopf genauso gross wie die beiden Daumen daneben, obwohl ihre
   Bilder verschieden breit sind. */
.karte:has(.karte-knopf) { display: flex; flex-direction: column; }
.karte-knopf {
  display: block;
  width: auto;
  height: 112px;
  margin-top: auto;
  padding-top: var(--bh-space-20);
  align-self: center;
}
/* Melden und Blockieren sind in der App keine runden Knoepfe, sondern kleine
   Schaltflaechen aus Fahne und Wort - und beide tragen DIESELBE Fahne. Ohne
   ihr Wort waeren die zwei Karten nicht zu unterscheiden, deshalb wird der
   Text mitgeschnitten. Auf 112 px Hoehe waere so ein Streifen ueber 300 px
   breit; er bekommt darum sein eigenes, leichteres Mass - so schwer, wie die
   Schaltflaeche in der App auch wiegt. */
.karte-knopf--marke { height: 60px; }
/* Ein ganzer Ausschnitt statt einer Schaltflaeche - die Personenzeile traegt
   Name, Karma und zwei Gruppenchips uebereinander. Auf 60 px Hoehe waeren die
   Chips zwei Zeilen von je acht Pixeln und nicht mehr zu lesen; sie bekommt
   deshalb die Breite der Karte und findet ihre Hoehe selbst. */
.karte-knopf--zeile {
  height: auto;
  width: 100%;
  align-self: stretch;
}

/* Gezeichnet, nicht aufgenommen. Die uebrigen Bilder dieser Seite sind
   Ausschnitte aus der App und belegen etwas; diese drei zeigen, was es NICHT
   gibt - kein Profil, keine Werbung, kein Datenhandel -, und dafuer kann es
   keine Aufnahme geben. Deshalb Zeichen und keine Fotos: derselbe Kreis, die
   dieselbe Strichstaerke und dasselbe Blau wie die Knoepfe der App, aber mit
   dem Schraegstrich, der sie verneint.

   Der Schraegstrich liegt doppelt: zuerst breit in der Kartenfarbe, dann
   schmal in Blau. Die untere Linie schneidet das Zeichen frei, damit der
   Strich darueber liegt und nicht mit den Linien darunter verschmilzt. Er
   endet innerhalb des Kreises, damit der Kreis geschlossen bleibt. */
.karte-zeichen { color: var(--bh-action); }
.karte-zeichen .strich {
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.karte-zeichen .durch-frei {
  fill: none;
  stroke: var(--bh-card);
  stroke-width: 22;
  stroke-linecap: round;
}

/* Derselbe Knopf, eine Zeile tiefer: unter der Spalte "Nummer geteilt" steht
   die Handlung, die dorthin fuehrt. Gleiche Hoehe wie die Knoepfe in den
   Karten, damit beide als dasselbe Bauteil zu erkennen sind. Die Fusszeile
   traegt keine Trennlinie - sie schliesst die Tabelle ab, sie teilt nichts. */
.leiter tfoot td { border-bottom: 0; }
/* Linksbuendig, nicht mittig: der Knopf steht unter einer Spalte aus Text,
   und mittig unter linksbuendigen Zellen sitzt er sichtbar daneben. So
   beginnt er auf derselben Kante wie "geteilt" darueber.

   Etwas kleiner als die Knoepfe in den Karten (112 px): in der Tabelle steht
   er neben Text, nicht allein in einer Karte, und wirkt dort schwerer. Die
   Abweichung ist gewollt. */
.leiter-knopf {
  display: block;
  width: auto;
  height: 91px;
  margin: var(--bh-space-12) 0 0;
}

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