/* Disruptive Vibes, Gestalt der Website.

   Diese Datei wird nach stil.css geladen und gewinnt gegen sie. Hier liegen
   Flaechen, Radien, Schatten und Typoskala, also alles, was die Seite aussehen
   laesst wie sie aussieht.

   Was hier NICHT liegt: --akzent, --text und --linie. Die drei sind
   Aussenvertrag und stehen in stil.css, weil Decks und OnePager sie lesen. Wer
   die Farbe der Gesellschaft aendern will, aendert sie dort und arbeitet die
   Liste im Kopf jener Datei mit ab. Hier wird die Form umgebaut, nicht die
   Marke. Auch --grund, --text-leise und --text-still kommen weiter aus
   stil.css, samt ihrem Dunkelsatz.

   Gestalt "Buehne", Runde 5 vom 19.10.2026 (entwurf/2026-10-19/runde-5/),
   live genommen am 22.10.2026, Entscheidung Alex: "nimm sie live". Tickets
   DV-2026-10-015 und DV-2026-10-044. Weiss und Schwarz, eine Grotesk des
   Systems, die Figuren in Originalfarbe mit runden Ecken, abgesetzte
   Abschnitte in hellem Grau, Bernstein fuer Dachzeilen und Pfeile. Je
   Spezialist eine Bildzeile mit Freigabekarte (vorher, nachher, Regel), dazu
   die Herkunftskarte. Davor galt seit dem 19.10.2026 die Gestalt
   "Geschaeftsbericht" (Zweig geschaeftsbericht), seit dem 02.10.2026
   "Leinwand" (Zweig astro).

   Abweichungen vom Entwurf, alle bewusst: der Entwurf kannte keinen
   Dunkelmodus, diese Datei fuehrt einen; die Navigation bleibt unter 60rem
   sichtbar (im Entwurf blieb dort nur der Ruf, und "English" war auf dem
   Handy nicht erreichbar); die Unterschrift auf dem Bild liegt auf einem
   dichteren Schleier (.66 statt .5), damit sie auch ueber hellem Bildgrund
   4,5 zu 1 haelt.

   Keine externe Schrift, kein CDN, keine Nachladung, kein url(). Die
   Datenschutzerklaerung behauptet das, und pruefe_extern.py haelt es nach. */

/* ---- Tokens -------------------------------------------------------------

     grund  Weiss, aus stil.css, folgt dem Modus.
     hoch   das abgesetzte Grau fuer jeden zweiten Abschnitt.
     tief   die Karte im Ablauf, an der ein Mensch entscheidet. In BEIDEN
            Modi dunkel, deshalb mit eigenen Textwerten. Wer dort --text
            setzt, kippt den Kontrast im Dunkelmodus.

   pruefe_kontrast.py liest diese Werte und rechnet jedes Paar, das die
   Gestalt benutzt; die Liste der Paare steht dort. */

:root {
  --mass: 80rem;
  --flaeche-hoch: #f5f5f4;
  --flaeche-tief: #1a1a1a;
  --tief-text: #ffffff;
  --tief-leise: #d6d6d6;
  --tief-akzent: #f0b166;
  --karte-grund: #ffffff;
  --schatten-karte: 0 24px 50px rgba(0, 0, 0, .07);

  /* Die Freigabekarte: vorher rot, nachher Bernstein. */
  --alt-grund: #fbefef;
  --alt-text: #8a3434;
  --alt-marke: #9b3b3b;
  --neu-grund: #fdf3e7;
  --neu-text: #6b3f04;
  --neu-marke: #9a4706;

  /* Die Unterschrift auf einem Bild. Gerechnet wird gegen den schlimmsten
     Fall, den Schleier auf weissem Bildgrund. */
  --schleier: rgba(17, 17, 17, .66);
  --schleier-text: #ffffff;

  --sans: -apple-system, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rund: 18px;
  --rund-mittel: 14px;
  --rund-klein: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --flaeche-hoch: #1c1b17;
    --karte-grund: #211f1b;
    --schatten-karte: 0 0 0 1px #302e28;
    --alt-grund: #2c1b1b;
    --alt-text: #f2c0c0;
    --alt-marke: #e9a3a3;
    --neu-grund: #2b2114;
    --neu-text: #f5d9b0;
    --neu-marke: #f0b166;
  }
}

/* ---- Grundform ---------------------------------------------------------- */

body {
  font-family: var(--sans);
  line-height: 1.6;
}

.bahn {
  padding: 0 2.5rem;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.035em;
}

h1 {
  font-size: clamp(2.6rem, 1rem + 4.6vw, 5.4rem);
  line-height: 1;
  overflow-wrap: break-word;
  hyphens: manual;
}

h2 {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
}

h3 {
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

section {
  padding: 7rem 0;
  border: 0;
}

.ton {
  background: var(--flaeche-hoch);
}

.gross {
  font-size: 1.25rem;
  color: var(--text-leise);
}

.etikett {
  margin: 0 0 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* ---- Tasten ------------------------------------------------------------- */

.tasten {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: center;
  margin: 2rem 0 0;
}

.taste {
  display: inline-block;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  background: var(--text);
  color: var(--grund);
  font-weight: 600;
  text-decoration: none;
}

.taste:hover {
  background: var(--akzent-tief);
  color: var(--grund);
}

.taste-leise,
.pfeil {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.taste-leise {
  padding: 1rem .2rem;
}

.taste-leise::after,
.pfeil::after {
  content: " \2192";
  color: var(--akzent);
}

.taste-leise:hover,
.pfeil:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ---- Kopf ---------------------------------------------------------------
   Zeichen und Name links, die Navigation, rechts der Ruf als schwarze Taste.
   Unter 60rem stehen Zeichen und Ruf in der ersten Zeile und die Navigation
   darunter; sie bricht um, statt zu verschwinden. Kein Menue, kein Skript. */

.kopfband {
  background: var(--grund);
}

.kopf-bahn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6rem 2rem;
  min-height: 5.2rem;
  padding-top: .8rem;
  padding-bottom: .8rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  text-decoration: none;
}

.marke:hover {
  color: var(--text);
}

.marke-logo {
  display: block;
  height: 32px;
  width: auto;
}

.marke-name {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.kopf-nav .nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kopf-nav .nav a {
  color: var(--text-leise);
  font-size: .95rem;
  text-decoration: none;
  white-space: nowrap;
}

.kopf-nav .nav a:hover,
.kopf-nav .nav a[aria-current="page"] {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.kopfband .ruf {
  padding: .6rem 1.05rem;
  border-radius: var(--rund-klein);
  background: var(--text);
  color: var(--grund);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.kopfband .ruf:hover {
  background: var(--akzent-tief);
  color: var(--grund);
}

@media (max-width: 60rem) {
  .kopf-bahn {
    grid-template-columns: 1fr auto;
    grid-template-areas: "marke ruf" "nav nav";
    min-height: 0;
    padding-top: 1rem;
  }

  .marke { grid-area: marke; }
  .kopfband .ruf { grid-area: ruf; }
  .kopf-nav { grid-area: nav; }

  .kopf-nav .nav {
    justify-content: flex-start;
    gap: .2rem 1rem;
  }

  .kopf-nav .nav a {
    font-size: .9rem;
  }
}

/* ---- Fuss ---------------------------------------------------------------
   Er traegt den Satz, dass die Spezialisten Software sind, einen der Riegel
   aus recht/PRUEFLISTE-LARS.md Punkt 7. */

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--grund);
  padding: 2.5rem 0 3rem;
  font-size: .85rem;
  color: var(--text-still);
}

.fuss p {
  margin: .3rem 0;
  max-width: none;
}

.fuss-hinweis {
  color: var(--text);
  font-weight: 700;
}

.fuss-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.4rem;
  margin: .8rem 0;
  padding: 0;
  list-style: none;
}

.fuss a {
  color: var(--text-leise);
}

.fuss a:hover {
  color: var(--text);
}

/* ---- Bilder mit Unterschrift auf dem Bild ------------------------------
   Jede Figur traegt direkt am Bild den Satz, dass sie Software ist. */

.bild {
  position: relative;
  margin: 0;
}

.bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rund);
}

.bild figcaption {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  max-width: calc(100% - 2.2rem);
  padding: .35rem .7rem;
  border-radius: 6px;
  background: var(--schleier);
  color: var(--schleier-text);
  font-size: .85rem;
  line-height: 1.4;
}

/* ---- Titel der Inhaltsseiten (Buehne.astro) -----------------------------
   Text links, das Bild rechts, ganz und unbeschnitten, damit kein Kopf an
   der Kante haengt. Unter 62rem steht das Bild unter dem Text. */

.titel {
  padding: 4.5rem 0 3rem;
}

/* Titel und erster Abschnitt bringen beide ihr Polster mit; zusammen waeren
   es ueber zehn Zeilen Leere. */
.titel + section {
  padding-top: 3rem;
}

.titel-bahn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 4rem;
  align-items: center;
}

.titel h1 {
  font-size: clamp(2.6rem, 1rem + 4vw, 4.8rem);
  margin-bottom: 1.4rem;
}

.titel .gross {
  max-width: 34rem;
}

@media (max-width: 62rem) {
  .titel-bahn {
    grid-template-columns: 1fr;
  }

  .titel {
    padding-top: 3rem;
  }
}

/* ---- Startseite: Buehne --------------------------------------------------- */

/* Nur oben und unten: die Seitenraender kommen von .bahn, damit die
   Ueberschrift auf der Kante des Zeichens im Kopf steht. Im Entwurf setzte
   die Kurzform sie auf null, und die Ueberschrift stand 20 Pixel links davon. */
.held {
  padding-top: 5rem;
  padding-bottom: 3.5rem;
}

.held h1 {
  font-size: clamp(2.8rem, 1rem + 5.6vw, 6.4rem);
  line-height: .98;
  max-width: 13ch;
}

.held h1 span {
  color: var(--text-still);
}

.held-unter {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem 3rem;
  margin-top: 2.5rem;
}

.held-unter p {
  margin: 0;
  max-width: 34rem;
}

.held-unter .tasten {
  margin: 0;
  flex-shrink: 0;
}

.voll img {
  height: clamp(22rem, 42vw, 52rem);
  object-fit: cover;
  object-position: 30% 3%;
  border-radius: 0;
}

.voll figcaption {
  left: 2.5rem;
  bottom: 2rem;
}

/* ---- Kennzahlen -----------------------------------------------------------
   Jede Zahl kommt aus zahlen.json und wird von pruefe_zahlen.py gegen ihr
   Register gezaehlt; der Stand steht darunter. */

.fakten {
  padding: 6rem 0;
}

.fakten-reihe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fakten-reihe b {
  display: block;
  font-size: clamp(3rem, 2rem + 3vw, 5rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
}

.fakten-reihe span {
  display: block;
  margin-top: .5rem;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--text-leise);
}

.fakten-stand {
  margin: 2rem 0 0;
  font-size: .85rem;
  color: var(--text-still);
}

/* ---- Drei Schritte ---------------------------------------------------- */

.schritte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 3.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.schritte li {
  counter-increment: schritt;
}

.schritte .bild img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 0;
  border-radius: 16px;
}

/* Die Nummer ist gezaehlt und steht nicht im Text: pruefe_zahlen.py liest den
   Text, und ein Vorleseprogramm soll sie nicht als Kennzahl sprechen. */
.schritte h3::before {
  content: counter(schritt);
  display: block;
  margin: 1.4rem 0 .6rem;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--akzent);
}

.schritte p {
  margin: .4rem 0 0;
  color: var(--text-leise);
}

/* ---- Spezialisten: je einer eine Bildzeile ------------------------------
   Die Klasse bleibt .karte: gegenprobe_extern.py setzt dort seine Probe an.
   Jede Zeile traegt die Riegel aus Punkt 7 der Pruefliste, die an ihr stehen:
   "ist Software" am Bild, die Dachzeile "KI-Spezialist" ueber dem Namen und
   die Grenzzeile. */

.spez-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
}

.spez-kopf h2 {
  margin: 0;
}

.spez-kopf p {
  margin: 0;
  max-width: 30rem;
  color: var(--text-leise);
}

.riegel-satz {
  margin: 1.6rem 0 0;
  font-weight: 600;
}

.karte,
.ton .karte {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  padding: 4.5rem 0;
  border: 0;
  border-top: 1px solid var(--linie);
  border-radius: 0;
  background: transparent;
}

.karte:nth-of-type(even) .bild {
  order: 2;
}

.karte .bild img {
  aspect-ratio: 1600 / 907;
  object-fit: cover;
  object-position: 50% 0;
}

.karte .dachzeile {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .12em;
}

.karte h3 {
  margin: .2rem 0 .1rem;
  font-size: 2.4rem;
  letter-spacing: -.035em;
}

.karte .fach {
  margin: 0 0 1.3rem;
  font-size: 1.05rem;
  color: var(--text-leise);
}

.karte .grenze {
  margin: 1.2rem 0 0;
  padding: 0;
  border: 0;
  font-size: .9rem;
  color: var(--text-still);
}

.karte .grenze b {
  color: var(--text-leise);
}

.karte .pfeil-zeile {
  margin: 1.1rem 0 0;
}

/* Die letzte Bildzeile gibt ihr Polster nach unten ab, sonst stehen bis zum
   naechsten Abschnitt zwei Polster und der Nachsatz uebereinander
   (Sichtbefund 22.10.2026). Der Nachsatz schliesst mit derselben Linie an
   wie jede Bildzeile. */
.karte:last-of-type {
  padding-bottom: 0;
}

.spez-nachsatz {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  max-width: 48rem;
  font-size: .9rem;
  color: var(--text-still);
}

/* ---- Freigabekarte (Freigabekarte.astro) --------------------------------
   Ein Beispiel, kein Bedienelement: die drei Knoepfe sind Text. Die Marken
   "vorher" und "nachher" stehen als Text im Code und nicht als ::before,
   damit sie vorgelesen werden und die Sprache wechseln. */

.vs {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: var(--karte-grund);
  box-shadow: var(--schatten-karte);
}

.vs-zeile {
  display: flex;
  justify-content: space-between;
  gap: .3rem 1rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
  font-size: .78rem;
  color: var(--text-still);
}

.vs-zeile b {
  color: var(--akzent);
  font-weight: 600;
}

.vs h4 {
  margin: 0 0 .8rem;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.vs pre {
  margin: 0 0 .35rem;
  padding: .6rem .8rem;
  border-radius: var(--rund-klein);
  font: .8rem/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.vs-alt {
  background: var(--alt-grund);
  color: var(--alt-text);
}

.vs-neu {
  background: var(--neu-grund);
  color: var(--neu-text);
}

.vs-marke {
  font-weight: 700;
  margin-right: .6em;
}

.vs-alt .vs-marke {
  color: var(--alt-marke);
}

.vs-neu .vs-marke {
  color: var(--neu-marke);
}

.vs-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .9rem;
}

.vs-knoepfe span {
  padding: .45rem .85rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  font-size: .82rem;
}

.vs-knoepfe .vs-ja {
  border-color: var(--text);
  background: var(--text);
  color: var(--grund);
}

/* Doppelte Klasse, weil stil.css ".karte p" mit groesserer Schrift fuehrt
   und sonst gewinnt. */
.vs .vs-regel {
  margin: .8rem 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--text-still);
}

/* ---- Herkunftskarte (Karte.astro) ----------------------------------------
   Die Karte ist eine eigenstaendige SVG-Datei je Sprache, als img auf Abruf
   (werkzeug/karte_uebernehmen.py). Ihr Stil steht in der Datei selbst, weil
   ein SVG als img diese Stildatei nicht sieht. Unter 460 Pixeln Kartenbreite
   fallen dort die Ortsnamen weg; dann steht unter der Karte die Liste mit
   Name und Ort. Darueber bleibt die Liste fuer Vorleseprogramme da.

   Groesse (Sichtbefund 22.10.2026, Gesichter waren 28 und 14 Pixel): am
   Rechner bekommt die Karte die breitere Spalte und bis zu 40rem, also ihre
   eigene Einheitengroesse; unter 40rem steht sie in voller Bildschirmbreite,
   ohne Seitenrand. werkzeug/karte_pruefen.py misst Gesichter, Schrift und
   Ueberlappung an genau diesen Breiten. */

.karte-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 3rem 4rem;
  align-items: start;
}

.karte-raster p:not(.etikett) {
  color: var(--text-leise);
  font-size: 1.15rem;
}

.karte-raster p.vermerk {
  font-size: .82rem;
  color: var(--text-still);
}

.karte-raster .vermerk a {
  color: inherit;
}

.hk-bild {
  margin: 0;
}

.hk-karte {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin: 0 auto;
}

.hk-bild figcaption {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--text-leise);
}

.hk-liste {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .hk-karte {
    width: calc(100% + 2.5rem);
    max-width: none;
    margin: 0 -1.25rem;
  }

  .hk-liste {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--text-leise);
  }

  .hk-liste b {
    color: var(--text);
  }
}

/* ---- Leitsatz und Ruf ------------------------------------------------------- */

.leit {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2.6rem, 1rem + 5vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}

.drei {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 3rem;
  margin: 4rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--linie);
  list-style: none;
}

.drei h3 {
  font-size: 1.15rem;
  letter-spacing: -.01em;
}

.drei p {
  margin: .3rem 0 0;
  color: var(--text-leise);
}

.ruf-ab {
  text-align: center;
}

.ruf-ab h2 {
  max-width: 20ch;
  margin: 0 auto 1.2rem;
}

.ruf-ab p {
  max-width: 40ch;
  margin: 0 auto 2.2rem;
  color: var(--text-leise);
}

.ruf-ab .tasten {
  justify-content: center;
}

/* ---- Unterseite eines Spezialisten (Spezialist.astro) ---------------------
   Die Farbe des Spezialisten (--farbe aus team.json) traegt nur Linien und
   Ringe, nie Schrift: auf hellem Grund liegen diese Farben zwischen 1,7 und
   3,2 zu 1. */

.d-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: end;
  padding-top: 4.5rem;
  padding-bottom: 3rem;
}

.portraet {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--grund), 0 0 0 6px var(--farbe);
}

.d-kopf .dachzeile {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .12em;
}

.d-kopf h1 {
  margin: .3rem 0 .6rem;
  font-size: clamp(3.2rem, 1rem + 7vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.05em;
}

.d-kopf .fach {
  margin: 0;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text-still);
}

.d-kopf .handwerk {
  margin: 0 0 1.2rem;
  font-size: 1.1rem;
  color: var(--text-leise);
}

.riegel {
  margin: 0 0 1.6rem;
  padding-left: .8rem;
  border-left: 3px solid var(--farbe, var(--akzent));
  font-weight: 600;
  color: var(--text);
}

.d-kopf .tasten {
  margin: 0;
}

.d-bild {
  margin-bottom: 5rem;
}

.zwei {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2.5rem 4rem;
  align-items: center;
}

.zwei-text p:not(.etikett) {
  color: var(--text-leise);
  font-size: 1.1rem;
}

.eingang {
  max-width: 46rem;
  margin: 1.4rem 0 0;
  padding-left: .8rem;
  border-left: 3px solid var(--farbe, var(--akzent));
  font-size: 1.05rem;
  color: var(--text-leise);
}

.eingang b {
  color: var(--text);
}

.kette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.kette li {
  counter-increment: schritt;
  padding: 1.3rem 1.2rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: var(--karte-grund);
}

.kette li::before {
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: .9rem;
  border: 2px solid var(--farbe, var(--akzent));
  border-radius: 50%;
  font-weight: 700;
}

.kette h3 {
  margin: 0 0 .4rem;
  font-size: 1.08rem;
  letter-spacing: -.01em;
}

.kette p {
  margin: 0;
  font-size: .92rem;
  color: var(--text-leise);
}

/* Der Schritt, an dem ein Mensch entscheidet, steht auf der Tiefflaeche: er
   trennt das Angebot von einem Automaten. */
.kette li.mensch {
  border-color: var(--flaeche-tief);
  background: var(--flaeche-tief);
  color: var(--tief-text);
}

.kette li.mensch::before {
  border-color: var(--tief-akzent);
  background: var(--tief-akzent);
  color: var(--flaeche-tief);
}

.kette li.mensch p {
  color: var(--tief-leise);
}

.kette .mensch-marke {
  display: block;
  margin-bottom: .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tief-akzent);
}

.paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem 4rem;
}

.paar ul {
  margin: 1.2rem 0 0;
  padding-left: 1.1rem;
}

.paar li {
  margin-bottom: .5rem;
  color: var(--text-leise);
}

.grenze-gross {
  margin-top: 1.2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--farbe, var(--akzent));
  font-size: 1.25rem;
  color: var(--text);
}

.paar ul.zuege {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
  padding: 0;
  list-style: none;
}

.zuege li {
  margin: 0;
  padding: .4rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte-grund);
  font-size: .92rem;
  color: var(--text);
}

.partner {
  margin-top: 1.6rem;
  color: var(--text-leise);
}

.partner b {
  color: var(--text);
}

.zitat {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.8rem, 1rem + 2.6vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.12;
}

.gruss {
  max-width: 44rem;
  margin-top: 1.6rem;
  font-size: 1.1rem;
  color: var(--text-leise);
}

.gruss b {
  color: var(--text);
}

.blaettern-ab {
  padding: 4rem 0;
}

.blaettern {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blaettern a {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.blaettern a:hover {
  text-decoration: underline;
}

.blaettern img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.blaettern small {
  display: block;
  font-size: .85rem;
  font-weight: 400;
  color: var(--text-still);
}

/* ---- Inhaltsseiten: Punkte, Felder, Tabelle ------------------------------ */

.vor {
  max-width: 48ch;
  font-size: 1.08rem;
  color: var(--text-leise);
}

.punkte > li {
  border-left: 2px solid var(--akzent);
}

.punkte + p,
.punkte + .still {
  margin-top: 1.7rem;
}

.felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.4rem;
  margin: 2rem 0 0;
}

.feld {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund-mittel);
  background: var(--karte-grund);
}

/* Die Farbe gliedert die Felder, als Punkt vor der Ueberschrift, nie als
   Schrift. */
.feld h3 {
  margin: 0 0 .6rem;
  font-size: 1.2rem;
  letter-spacing: -.015em;
}

.feld h3::before {
  content: "";
  display: block;
  width: .7rem;
  height: .7rem;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: var(--farbe, var(--akzent));
}

.feld p {
  flex: 1;
  margin: 0 0 .9rem;
  font-size: .98rem;
  color: var(--text-leise);
}

.feld .merk {
  flex: 0;
  margin: 0;
  padding-top: .8rem;
  border-top: 1px solid var(--linie);
  font-size: .93rem;
  font-weight: 600;
  color: var(--text);
}

.rolle table {
  font-size: .95rem;
}

/* ---- Rechtstexte ---------------------------------------------------------
   Impressum und Datenschutzerklaerung bleiben ruhig: eine Spalte, kleine
   Ueberschriften, keine Bilder. Inhaltlich unberuehrt seit dem 22.10.2026. */

.recht h1 {
  font-size: clamp(2.4rem, 1.2rem + 3vw, 4rem);
  margin-bottom: 1rem;
}

.recht h2 {
  margin: 2.5rem 0 .6rem;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.hero {
  padding: 4.5rem 0 6rem;
}

/* ---- Schmal -------------------------------------------------------------- */

@media (max-width: 60rem) {
  .bahn {
    padding: 0 1.25rem;
  }

  section {
    padding: 4.5rem 0;
  }

  .held {
    padding-top: 2.5rem;
  }

  .held-unter,
  .spez-kopf {
    flex-direction: column;
    align-items: flex-start;
  }

  .voll img {
    height: 22rem;
  }

  .voll figcaption {
    left: 1.25rem;
    bottom: 1rem;
  }

  .fakten {
    padding: 4rem 0;
  }

  .fakten-reihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schritte,
  .drei,
  .karte,
  .ton .karte,
  .karte-raster,
  .d-kopf,
  .zwei,
  .paar {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .karte:nth-of-type(even) .bild {
    order: 0;
  }

  .titel + section {
    padding-top: 2rem;
  }

  .karte,
  .ton .karte {
    padding: 3rem 0;
  }

  .d-kopf {
    padding-top: 2.5rem;
    padding-bottom: 2rem;
  }

  .d-bild {
    margin-bottom: 3rem;
  }
}