/* Aussehen der vier Seiten, die oeffentlich hinter dem QR stehen:
   landeseite, landeseite_eigen, wurzel, unbekannt.

   Warum eine Datei und kein <style> im Kopf: die Antworten tragen
   Content-Security-Policy "default-src 'self'" ohne eigenes style-src. Ein
   Inline-Block faellt damit auf default-src zurueck und wird ohne sichtbaren
   Fehler verworfen. Genau das ist bis 09.09.2026 passiert, die Briefempfaenger
   sahen eine voellig ungestylte Seite. Eine Datei von derselben Herkunft ist
   erlaubt, und sie bleibt es auch, ohne dass irgendwo 'unsafe-inline'
   aufgeweicht werden muss. Wer hier wieder ein <style> in eine Vorlage
   schreibt, baut denselben Fehler neu; test_landeseite.py wacht darueber. */

:root {
  --grund: #fffdf4;
  --tinte: #222323;
  --grau: #6b6b6b;
  --linie: #e6e0cd;
  /* Genau EIN Akzent, und er gehoert nur dem Knopf.
     #D14900 auf Weiss misst 4,5:1 und haelt damit AA auch fuer
     normalen Text. Bauligs #FFAC3B haelt nur 1,9:1. */
  --akzent: #d14900;
  --akzent-tief: #a83a00;
  /* Ein Schwarz fuer den Kopfbalken und den Abschnitt der fuenf Bereiche.
     Ernest am 15.09.2026: derselbe Grund an beiden Stellen. Bis dahin trug
     der Balken die Tinte (#222323) und der Abschnitt echtes Schwarz; neben-
     einander gesehen wirkte der Balken dadurch grau statt schwarz. */
  --schwarz: #000;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 34rem; margin: 0 auto; padding: 3rem 1.4rem 2rem; }

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 6.5vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 1.3rem;
}

p { margin: 0 0 1.1rem; font-size: 1.05rem; }

footer {
  max-width: 34rem;
  margin: 2.5rem auto 0;
  padding: 1rem 1.4rem 2.5rem;
  color: var(--grau);
  font-size: .85rem;
  text-align: center;
}
footer a { color: var(--grau); }

/* --- Befund-Seite (kalter Prospect) ------------------------------------ */

.befund {
  border-left: 3px solid var(--tinte);
  padding: .8rem 1rem;
  background: #ffffff;
  border-radius: 0 8px 8px 0;
  margin: 1.4rem 0;
}
.hinweis { color: var(--grau); font-size: .95rem; }

/* --- Persoenliche Seite ------------------------------------------------ */

/* Quadratisches Handyvideo. aspect-ratio haelt den Platz frei, bevor die
   Datei da ist, sonst springt die Seite beim Laden. */
.film { margin: 1.8rem 0; position: relative; }
.film video {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 18px;
  background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .13);
}

/* Der Ton-Knopf liegt auf dem Video, weil der Daumen dort ohnehin ist.
   Gross genug fuer die 44px, die Apple als Mindestziel nennt. */
.tonknopf {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  min-height: 44px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 253, 244, .94);
  color: var(--tinte);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.tonknopf:active { transform: translateX(-50%) scale(.97); }

.schluss { margin-top: 1.6rem; }

/* --- Nackte Domain und unbekannter Code -------------------------------- */

body.knapp main { max-width: 30rem; padding: 4.5rem 1.4rem 2rem; }
body.knapp footer { max-width: 30rem; }

/* =======================================================================
   Kampagnenseite hinter dem Brief-QR (body.lp), Stand 15.09.2026
   =======================================================================

   Vorbild fuer den Aufbau ist andreasbaulig.de, analysiert am 15.09.2026.
   Uebernommen wurde die Anatomie (Kicker, Schlagzeile, Unterzeile, Bild,
   Haken, Knopf, Beleg) und die Farbdisziplin: zwei Farben plus genau EIN
   Akzent, und der Akzent gehoert ausschliesslich der Handlung. Auf der
   ganzen Seite gibt es deshalb keine akzentfarbene Ueberschrift und keinen
   akzentfarbenen Rahmen. Wer die Farbe sieht, sieht einen Knopf.

   NICHT uebernommen wurde Bauligs Knopf-Kontrast: weiss auf #FFAC3B ergibt
   1,9:1 und faellt jede Pruefung durch. Hier ist es weiss auf #D14900,
   gemessen 4,5:1, damit auch normaler Text die AA-Schwelle haelt.

   Der Grundton bleibt das warme Papier der uebrigen oeffentlichen Seiten.
   Das ist kein Geschmack, sondern die Fortsetzung des Briefes: der
   Empfaenger kommt von cremefarbenem Papier mit weissem Siegel. */

body.lp main {
  max-width: 62rem;
  /* Knapper Kopfabstand mit Absicht. Gemessen am iPhone 15 Pro liegt der
     Falz bei 659 Pixeln; jeder Millimeter hier oben entscheidet, ob der
     Knopf noch darueber steht. */
  padding: 1rem 1.4rem 1rem;
}

/* --- Kopfzone ----------------------------------------------------------
   Alles bis zum Bild steht mittig. Das ist Absicht: es ist die Fortsetzung
   des Briefes, und ein Brief ist zentriert, kein Dashboard. */

/* --- Schwarzer Kopfbalken ----------------------------------------------
   Logo links, sonst nichts. Bewusst keine Navigation und kein zweiter Knopf:
   die Seite hat genau ein Ziel, jeder weitere Weg hinaus kostet nur.
   Bauligs Kopf traegt zwar Menue und Zweitknopf, seine Seite ist aber eine
   Website mit vielen Zielen. Diese hier ist eine Strecke. */

.kopf {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--schwarz);
  padding: 1.3rem 1.4rem;
}

.kopf-logo {
  display: block;
  width: auto;
  /* Hoehe statt Breite steuern: das Lockup ist 303 zu 100, die Hoehe ist
     die Groesse, die das Auge im Balken vergleicht. */
  height: 39px;
  /* Schiebt alles Weitere an den rechten Rand. */
  margin-right: auto;
}

/* Sprungmarken. Unter 768 Pixeln ausgeblendet: Logo, zwei Woerter und ein
   Knopf passen bei 393 Pixeln Geraetebreite nicht nebeneinander, gemessen
   waeren es rund 270 Pixel Bedarf bei 231 Pixeln Platz. Der Geisterknopf
   hat Vorrang, er ist das Ziel der Seite. */
.kopf-nav { display: none; }

/* Siehe Kommentar in _kopf.html: unter 768 Pixeln steht im Kopfknopf nur
   "Gratis-Vorschau". */
.nur-breit { display: none; }

.kopf-nav a {
  color: #fff;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
}

.kopf-nav a:hover { color: var(--akzent); }

/* Geisterknopf: Fuellung durchsichtig, nur der Rahmen traegt die Farbe.
   Bewusst zurueckhaltend. Der Hauptknopf in der Hero ist voll ausgefuellt;
   waeren beide gefuellt, konkurrierten sie um denselben Blick. Baulig loest
   dasselbe Problem mit einem weissen Rahmen oben und Orange unten. */
.kopf-knopf {
  display: inline-block;
  padding: .6rem 1.1rem;
  /* Rahmen weiss, nicht in der Akzentfarbe. Der Akzent bleibt damit auf der
     ganzen Seite dem EINEN vollen Knopf in der Hero vorbehalten. Zwei Stellen
     in derselben Farbe haetten sich um denselben Blick gestritten. */
  border: 1.5px solid #fff;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.kopf-knopf:hover {
  background: #fff;
  color: var(--tinte);
}

.kopf-knopf:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.hero-kicker {
  margin: 0 0 .7rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau);
}

body.lp h1 {
  text-align: center;
  font-size: clamp(2rem, 8.5vw, 3.1rem);
  line-height: 1.12;
  margin: 0 0 .8rem;
}

.hero-sub b { font-weight: 700; }

.hero-sub {
  max-width: 34rem;
  margin: 0 auto 1rem;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.45;
}

/* --- Koerper: Bild und Argumente --------------------------------------
   Am Handy gestapelt in der DOM-Reihenfolge, am Schreibtisch zwei Spalten. */

.hero-koerper {
  display: grid;
  gap: .9rem;
}

.hero-bild { margin: 0; }

.hero-bild img {
  display: block;
  width: 100%;
  /* Am Handy bewusst klein: das Bild ist hier Vertrauensbeleg, nicht Inhalt.
     Jeder Pixel Bildhoehe schiebt den Knopf unter den Falz. */
  max-width: 9.8rem;
  margin: 0 auto;
  height: auto;
  border-radius: 10px;
  background: #fff;
}

.hero-bild figcaption {
  margin-top: .6rem;
  text-align: center;
  font-size: .88rem;
  color: var(--grau);
}

.hero-rechts {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Die vier Haken ---------------------------------------------------
   Haken als Hintergrundbild statt als Listenpunkt, damit die zweite Zeile
   unter dem Text einrueckt und nicht unter dem Haken steht. Das Zeichen
   kommt aus der Schrift, nicht aus einer Datei: eine zusaetzliche Datei
   waere ein weiterer Ladeweg, den die CSP mitverantworten muesste. */

.haken {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}

.haken li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 1rem;
  font-size: 1.02rem;
  line-height: 1.45;
}

.haken li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -0.05em;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tinte);
}

.haken b { font-weight: 700; }

/* --- Der Knopf ---------------------------------------------------------
   Mindesthoehe 56 Pixel. Apple nennt 44 als Minimum, das ist die Schwelle
   zum Treffen, nicht die Schwelle zum Auffallen. Volle Breite am Handy,
   weil der Daumen dort keine Zielsuche machen soll. */

.knopf {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 1rem 1.6rem;
  border: 0;
  border-radius: 6px;
  background: var(--akzent);
  color: #fff;
  font: inherit;
  font-size: 1.04rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(209, 73, 0, .28);
}

.knopf:hover { background: var(--akzent-tief); }
.knopf:active { transform: translateY(1px); }

.knopf:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 3px;
}

/* Der zusaetzliche Knopf direkt hinter dem Bild existiert nur am Handy. */
.knopf-mobil { margin-bottom: 1.6rem; }

.beweis {
  margin: .8rem 0 0;
  text-align: center;
  font-size: .9rem;
  font-style: italic;
  color: var(--grau);
}

/* --- Ab Tablet zwei Spalten ------------------------------------------- */

@media (min-width: 768px) {
  body.lp main { padding: 3rem 2rem 1.5rem; }

  .kopf { padding: 1.5rem 2rem; gap: 2rem; }
  .kopf-logo { height: 45px; }
  .kopf-nav { display: flex; gap: 1.8rem; }
  /* Die Verkleinerungen oben dienen allein dem Falz am Handy. Am
     Schreibtisch ist Platz, also zurueck auf die lesbare Groesse. */
  /* 42rem statt 34rem: die zweite Zeile ("Kostenlos, in 48 Stunden, ...")
     braucht rund 38rem. Schmaler bricht sie um und aus zwei Zeilen werden
     drei. */
  .hero-sub { font-size: 1.12rem; line-height: 1.5; margin-bottom: 1.6rem;
              max-width: 42rem; }
  .hero-kicker { font-size: .85rem; }

  .hero-koerper {
    grid-template-columns: 1fr 1fr;
    gap: 2.6rem;
    align-items: center;
    margin-top: .5rem;
  }

  .hero-bild img { max-width: 100%; }

  /* Am Schreibtisch traegt der eine Knopf unter den Haken die Handlung. */
  .knopf-mobil { display: none; }
}

/* =======================================================================
   Die zwei Abschnitte unter der Hero, 15.09.2026
   =======================================================================

   Ziele der beiden Sprungmarken im Kopfbalken. Bis heute zeigten sie ins
   Leere, das war Blocker 2 vor dem ersten Brief.

   Die Hero ist zentriert, weil sie die Fortsetzung eines Briefes ist. Diese
   Abschnitte sind linksbuendig, weil sie gelesen werden. Und sie sind auf
   34rem begrenzt, nicht auf die 62rem der Hero: eine Fliesstextzeile ueber
   die volle Breite verliert das Auge am Zeilenende.

   Keine Karten mit Icon-Kreis, keine zweite Akzentfarbe. Struktur entsteht
   aus Haarlinien, genau wie auf der Formularseite. Der Akzent gehoert weiter
   allein dem Knopf. */

/* Fliesstext bleibt bei 34rem, sonst verliert das Auge das Zeilenende.
   Abschnitte, die Kacheln oder Bild und Text nebeneinander tragen, brauchen
   die volle Breite: bei 34rem quetschen sich drei Karten auf je 10rem und der
   Text bricht nach zwei Woertern. */
.abschnitt.breit { max-width: 62rem; }

.abschnitt {
  max-width: 34rem;
  margin: 3.2rem auto 0;
  padding-top: 2.8rem;
  border-top: 1px solid var(--linie);
  /* Damit der Sprung aus dem Kopfbalken nicht auf der Kante landet. */
  scroll-margin-top: 1rem;
}

.abschnitt-titel {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 1.95rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
}

.abschnitt-unter {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.3;
  margin: 2.4rem 0 1.3rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--linie);
}

.abschnitt-vorspann { color: var(--grau); font-size: .98rem; }

/* Ueber einer Kartenreihe steht der Titel mittig und fett: er gehoert zu
   allen drei Karten gleich, nicht zur ersten. Linksbuendig wuerde er die
   Reihe anfuehren statt sie zu ueberspannen. Der groessere Abstand darunter
   trennt ihn sichtbar von den Karten. */
.titel-mitte {
  text-align: center;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

/* Der eine Satz, der die Wendung traegt. Groesser und in der Serifenschrift,
   damit das Auge beim Ueberfliegen genau hier haengen bleibt. Keine Farbe:
   wer Farbe sieht, soll einen Knopf sehen. */
.fuehrung {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  line-height: 1.4;
  margin: 1.8rem 0 1.3rem;
}

/* --- Es ist nicht Ihre Schuld -------------------------------------------
   Eins zu eins nach andreasbaulig.de (PDF der ganzen Seite, 15.09.2026).
   Dort: grosse zentrierte Schlagzeile, Bild ueber die volle Spaltenbreite mit
   kursiver Bildunterschrift, linksbuendiger Fliesstext, Punkteliste, fette
   Zeile, Knopf. Papierton, kein dunkler Grund; der stand hier bis 16:20 Uhr
   und war meine Zutat, nicht die des Vorbilds.

   Zur Farbdisziplin oben: der Knopf steht hier zum zweiten Mal auf der Seite
   und traegt dieselbe Farbe wie in der Hero. Das ist Absicht und keine
   Aufweichung. Baulig setzt seinen Knopf nach jedem Abschnitt neu, und wer
   bis hierher gelesen hat, soll nicht zurueckscrollen muessen. */

.abschnitt.schuld { max-width: 40rem; }

/* Reihenfolge am Handy: Titel, Bild, Text, Knopf. Das Bild steht im
   Dokument hinter dem Text und wird hier nach oben geholt. */
.schuld { display: grid; }
.schuld-text { display: contents; }
.schuld-titel { order: 1; }
.schuld-bild { order: 2; }
.schuld-text > p, .schuld-liste, .schuld .knopf { order: 3; }

/* Die Schlagzeile ist die groesste Schrift der Seite nach der Hero und steht
   als einzige hier mittig: sie ist der Einstieg, nicht Teil des Lesetexts. */
/* Fett, nicht in der normalen Ueberschriftenstaerke: Ernest am 15.09.2026,
   "dicker Druck". Im Vorbild traegt diese eine Zeile das ganze Gewicht des
   Abschnitts, und sie ist dort die fetteste Schrift der Seite. Die Schrift
   bleibt Georgia wie alle Ueberschriften, nur die Staerke wechselt. */
.schuld-titel {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  /* Obergrenze 2.1rem statt 2.5rem: fett braucht mehr Lauflaenge, und in
     der linken Spalte riss die Zeile sonst das Auslassungszeichen ab.
     Zusammen mit den geschuetzten Leerzeichen im Titel bleibt sie ganz. */
  font-size: clamp(1.75rem, 7vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 1.6rem;
}

/* Das Bild nimmt die volle Spaltenbreite. Bei Baulig ist es der groesste
   Gegenstand des Abschnitts, und genau das macht den Absatz persoenlich,
   bevor der erste Satz gelesen ist. */
.schuld-bild { margin: 0 0 2rem; }

.schuld-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #fff;
}

.schuld-bild figcaption {
  margin-top: .8rem;
  text-align: center;
  font-size: .92rem;
  font-style: italic;
  color: var(--grau);
}

/* Punkte, nicht Haken: die Liste zaehlt auf, was dazwischenkam, und ein Haken
   waere an dieser Stelle ein Versprechen statt einer Aufzaehlung. */
.schuld-liste {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
}

.schuld-liste li {
  margin-bottom: .55rem;
  font-size: 1.05rem;
  line-height: 1.5;
}

.schuld b { font-weight: 700; }

/* Der Knopf steht am Ende des Abschnitts, mit Luft davor. */
.schuld .knopf { margin-top: 1.2rem; }

/* --- Karten: Was Sie von uns erwarten koennen --------------------------
   Bauligs Form (Zeichen, Titel, Text, farbiger Balken unten), aber mit dem
   Njanké-Stern statt eines gekauften Symbolsatzes. Er steht als Pfade im
   Dokument, damit er je Karte seine Farbe wechseln kann. */

.karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }

.karte {
  position: relative;
  padding: 1.6rem 1.4rem 1.9rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

/* Icons mittig ueber der Karte. Gezeichnet, freigestellt, 256 px fuer
   Bildschirme mit doppelter Aufloesung; angezeigt werden 64. */
.karte-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.1rem;
}

/* Titel und Text stehen weiter links: mittig gesetzter Fliesstext liest sich
   schlechter, und Baulig zentriert dort auch nur Zeichen und Titel. */
.karte b { text-align: center; }

.karte b {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: .5rem;
}

.karte p { margin: 0; font-size: 1rem; line-height: 1.5; }

/* Der Balken auf der Unterkante ist der einzige Farbtraeger der Karte, und
   genau deshalb wirkt er. */
.karte-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; }

.karte-a .karte-balken { background: #2563a8; }
.karte-b .karte-balken { background: #157f3c; }
.karte-c .karte-balken { background: #6b3fa0; }

/* --- Fallstudien: Bild und Text im Wechsel ------------------------------
   Am Handy immer Bild oben, Text darunter. Am Schreibtisch wechseln die
   Seiten, damit das Auge nicht zweimal denselben Weg geht. Der Wechsel
   entsteht ueber die Spaltenzuweisung, nicht ueber row-reverse: sonst stimmt
   die Vorlesereihenfolge nicht mehr mit dem Bild ueberein. */

.fall {
  margin: 2rem 0 0;
  padding: 1.4rem 1.3rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: 8px;
}

.fall-bild { margin: 0 0 1.2rem; }

.fall-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--grund);
}

.fall-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 1rem;
}

.fall-zeilen { margin: 0; }

.fall-zeilen dt {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: .2rem;
}

.fall-zeilen dd { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; }
.fall-zeilen dd:last-of-type { margin-bottom: 0; }

/* Die gestiegene Zahl in Gruen mit Pfeil nach oben. Gruen sitzt hier nie an
   etwas Anklickbarem, deshalb kollidiert es nicht mit der Knopffarbe.
   #11703a auf dem Papierton misst 5,7:1. */
.ergebnis {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
  color: #11703a;
  line-height: 1.4;
}

.ergebnis b { font-size: 1.18rem; font-weight: 700; }
.pfeil { margin-right: .4rem; font-size: .9rem; }

.ergebnis-klein {
  display: block;
  margin-top: .25rem;
  font-size: .95rem;
  color: var(--grau);
}

/* --- Kachelleiste der weiteren Kunden -----------------------------------
   Echte Fotos aus den Projekten statt einer Logoreihe: ein Logo beweist eine
   Rechnung, ein Foto beweist, dass jemand dort war. Quadratisch, weil die
   Quellen teils hoch und teils quer sind und nur das Quadrat beide traegt,
   ohne jemandem den Kopf abzuschneiden.

   Zwei Spalten schon am Handy. Eine Spalte waere ruhiger, aber die Leiste
   soll Menge zeigen, und Menge entsteht erst, wenn mehrere Gesichter
   gleichzeitig im Blick sind. */

.faelle, .leute {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem 1rem;
}

.faelle img, .leute img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
  margin-bottom: .55rem;
}

.faelle b, .leute b {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.3;
}

.faelle span, .leute span {
  display: block;
  margin-top: .15rem;
  font-size: .92rem;
  line-height: 1.4;
  color: var(--grau);
}

/* Drei Gesichter nebeneinander, auch am Handy: sie gehoeren zusammen, und
   ein Team in zwei Reihen mit Einzelgaenger unten sieht nach Rest aus. */
.leute { grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: .2rem; }
.leute b { font-size: .9rem; }
.leute span { font-size: .84rem; }

/* --- Der Knopf am Seitenende ------------------------------------------- */

.knopf-schluss { margin-top: 2.4rem; }

@media (min-width: 768px) {
  .nur-breit { display: inline; }
  .abschnitt { margin-top: 4.5rem; padding-top: 3.5rem; }
  .fall { padding: 1.8rem 1.7rem; }
  .fuehrung { font-size: 1.4rem; }
  .faelle { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.3rem; }
  .karten { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

  /* Schreibtisch: Text links, Bild rechts. Ernest am 15.09.2026, und er hat
     recht: die Handy-Screenshots des Vorbilds stapeln alles, am breiten Schirm
     ist daneben Platz, den man nicht verschenkt.
     display:contents am Textbehaelter faellt hier weg, sonst landen seine
     Kinder als eigene Rasterzellen in der rechten Spalte. */
  .abschnitt.schuld {
    max-width: 62rem;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    align-items: start;
  }
  .schuld-text { display: block; grid-column: 1; grid-row: 1 / span 2; }
  .schuld-titel { text-align: left; }
  /* Das Bild klebt beim Scrollen, statt oben stehenzubleiben. Grund: die
     Liste ist am 15.09. von drei auf fuenf Aussagen gewachsen, damit ist der
     Text laenger als das Bild und der Knopf rutschte 187 px unter die
     Bildunterschrift. Kleben loest das dauerhaft, auch wenn die Copy spaeter
     wieder waechst, und das Gesicht bleibt neben jedem Satz stehen.
     align-items:start am Raster ist die Bedingung dafuer. */
  .schuld-bild {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    position: sticky;
    top: 2rem;
  }
  /* Der Knopf traegt hier keine volle Spaltenbreite mehr, sonst wird er am
     Schreibtisch zum Balken. */
  .schuld .knopf { display: inline-block; width: auto; }

  .fall { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.8rem;
          align-items: center; padding: 1.8rem; }
  .fall-bild { margin: 0; grid-column: 1; grid-row: 1; }
  .fall-text { grid-column: 2; grid-row: 1; }
  .fall-gedreht .fall-bild { grid-column: 2; }
  .fall-gedreht .fall-text { grid-column: 1; }
}

/* =======================================================================
   Die fuenf Bereiche (.bereiche), 15.09.2026
   =======================================================================

   Die einzige dunkle Buehne der Seite und die einzige Stelle, an der mehr
   als eine Farbe steht. Beides ist begruendet und beides ist begrenzt.

   DUNKEL. Der Grundton der Seite ist das warme Papier des Briefes. Dieser
   eine Abschnitt bricht das, weil er das Modell zeigt und nicht den Betrieb:
   er ist die Tafel, nicht das Gespraech. #17191b liegt tiefer als die Tinte
   des Kopfbalkens (#222323), damit er als eigene Flaeche liest und nicht wie
   ein zweiter Balken.

   FUENF FARBEN. Auf der uebrigen Seite gilt: wer Farbe sieht, sieht einen
   Knopf. Hier ist die Ausnahme, und sie steht nur an drei Stellen je Bereich:
   Sternteil, Pfeil, Ziffer. Titel und Fliesstext bleiben weiss. Kein Ton
   liegt im Orange-Rot-Band, in dem der Knopf sitzt (#d14900); alle fuenf sind
   kuehl, pink oder gruen. Gemessen gegen #17191b: Tuerkis 8,6:1, Hellblau
   8,4:1, Violett 8,3:1, Magenta 7,8:1, Limette 11,5:1. Alle halten AA auch
   fuer normalen Text, damit die Ziffern lesbar bleiben.

   VON KANTE ZU KANTE, ohne 100vw. Ein `width:100vw` rechnet die Bildlaufleiste
   mit und erzeugt am Schreibtisch einen Querbalken. Der uebliche Notbehelf
   dagegen ist `overflow-x:hidden` am Body, und genau der wuerde das klebende
   Bild im Schuld-Abschnitt toeten, weil ein Body mit overflow zum
   Bildlaufbehaelter wird und position:sticky daran haengt. Deshalb hier ein
   Schlagschatten ohne Weichzeichnung, der die Flaeche nach aussen fortsetzt,
   plus clip-path, der ihn oben und unten an der Kante abschneidet. Ein
   Schatten nimmt keinen Platz im Layout ein, also entsteht auch kein
   Bildlauf.

   FUELLEN BEIM SCROLLEN nur mit CSS, kein JavaScript. Die Seite traegt
   Content-Security-Policy "default-src 'self'", und jede zusaetzliche Datei
   ist ein weiteres Teil, das stumm ausfallen kann. Die Zeitachse haengt am
   Raster (view-timeline), die Teile referenzieren sie ueber ihren Namen.
   Kann der Browser das nicht, greift der @supports-Block gar nicht erst und
   alles steht fertig da: niemand sieht je eine leere Stelle. Wer
   "Bewegung reduzieren" gestellt hat, bekommt dasselbe. */

.bereiche {
  /* Zweite Fassung der Palette. Ernest am 15.09.2026 zum ersten Entwurf:
     "das sieht wirklich nicht appetitlich aus fuer das Auge". Der Grund war
     die Saettigung: fuenf Neontoene quer durch den Farbkreis, bei rund 90
     Prozent Saettigung. Das ist die Standardpalette, die ueberall passt und
     deshalb nirgends hingehoert, und sie steht quer zu einer Marke aus warmem
     Papier, Tinte und weissem Siegelwachs.

     Jetzt dieselben fuenf Familien, aber um rund ein Drittel entsaettigt und
     leicht abgedunkelt: gedeckte Juwelentoene, wie sie auf schwarzem Grund
     teuer wirken statt grell. Der Bogen bleibt weit genug, dass man die fuenf
     auseinanderhaelt, ohne dass zwei Nachbarn sich streiten.

     Weiterhin liegt keiner im Orange-Rot-Band des Knopfes. Gemessen gegen
     #17191b haelt jeder Ton die AA-Schwelle fuer normalen Text, denn die
     Ziffern sind Text, keine Dekoration. */
  --b1: #45b3a8;
  --b2: #6b9fd4;
  --b3: #9d8fd0;
  --b4: #c98aa6;
  --b5: #8fb36a;
  /* Echtes Schwarz, nicht das uebliche getoente Fast-Schwarz. Ernest am
     15.09.2026: "das ist schon so 4K-aehnliches, also fuer OLED-Displays
     wunderschoen zu betrachten." Auf einem OLED sind bei #000 die Pixel
     tatsaechlich aus, und die glimmenden Linien stehen dann in echter
     Schwaerze statt auf einer leicht leuchtenden grauen Flaeche. Auf jedem
     anderen Schirm bleibt es einfach der tiefste mögliche Grund. */
  --dunkel: var(--schwarz);

  background: var(--dunkel);
  color: #fff;
  /* Die Trennlinie der uebrigen Abschnitte waere auf dunklem Grund ein
     heller Strich mitten in der Flaeche. */
  border-top: 0;
  padding: 3.2rem 1.4rem 3.4rem;
  /* Siehe Kopfkommentar: Flaeche bis zur Kante, ohne Querbalken. */
  box-shadow: 0 0 0 100vmax var(--dunkel);
  clip-path: inset(0 -100vmax);

  /* Ernest am 15.09.2026: "es soll halt komplett den kompletten View nehmen,
     weil jetzt aktuell sieht man schwarz nicht vollkommen, sondern man sieht
     halt auch immer noch weisse Flecke." Gemessen war der Abschnitt am
     Schreibtisch 912 Pixel hoch bei 900 Pixeln Schirm: fast, aber eben nicht
     ganz, und oben oder unten blieb immer ein Streifen Papier stehen.

     100svh und nicht 100vh: vh rechnet am iPhone mit der GROESSTEN Hoehe,
     also ohne Adressleiste. Solange die Leiste noch da ist, waere der
     Abschnitt hoeher als der Schirm und der Knopf unten abgeschnitten. svh
     nimmt die kleinste Hoehe und passt immer. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 3.2rem;

  /* Kein Lichtkegel mehr. Er stand hier, solange der Grund ein getoentes
     Dunkel war und die Mitte Gewicht brauchte. Auf echtem Schwarz macht ein
     Verlauf ueber eine so grosse Flaeche sichtbare Streifen, und das Licht
     kommt jetzt ohnehin vom Stern selbst. Eine Zutat weniger. */
}

/* Die Ueberschrift dieses Abschnitts ist die groesste der ganzen Seite, noch
   vor der Schlagzeile der Hero. Das ist Absicht und folgt dem Vorbild: der
   Abschnitt ist die Tafel, an der das Modell erklaert wird, und er hat genau
   einen Auftritt. Die kleine Kickerzeile darueber ist deshalb gestrichen, sie
   hat der Ueberschrift nur Anlauf weggenommen. */
.bereiche-titel {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  /* 26 Zeichen und nicht 20: bei 20 brach der Satz am Schreibtisch auf DREI
     Zeilen und schob den Knopf aus dem Bild. Breiter heisst hier kuerzer. */
  max-width: 26ch;
  margin: 0 auto .8rem;
  text-align: center;
  color: #fff;
}

.bereiche-vorspann {
  max-width: 54ch;
  margin: 0 auto 1.7rem;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

/* --- Das Raster ---------------------------------------------------------
   Am Handy eine Spalte: Stern oben, darunter 01 bis 05 in ihrer Nummernfolge.
   Genau so steht es auch im Dokument, damit ein Vorleseprogramm dieselbe
   Reihenfolge hoert, die das Auge am Handy sieht. */

.stern-raster {
  display: grid;
  gap: 1.8rem;
}

.stern {
  display: block;
  /* Kanten exakt rechnen statt auf Tempo optimieren. Der Browser darf sonst
     schraege Linien auf das Pixelraster runden, und genau die Diagonalen des
     Sterns leiden darunter. */
  shape-rendering: geometricPrecision;
  width: 100%;
  max-width: 14rem;
  margin: 0 auto 1rem;
  /* Die Pfeile laufen bis in die Ecken der viewBox, ohne Rand faende das Auge
     kein Ende. */
  overflow: visible;
}

/* Jedes Teil glimmt in seiner eigenen Farbe, und zwar zweilagig: ein enger,
   kraeftiger Schein direkt an der Linie und ein weiter, schwacher Hof
   darum. Der enge verdichtet die Kante und laesst die Linie schaerfer wirken,
   der weite gibt den Raum. Eine einzelne weiche Lage liess den Kern im Hof
   ersaufen, die Figur wirkte weich statt praezise.

   Die Linie selbst bleibt dabei gestochen: drop-shadow weichzeichnet nur den
   Schatten, nie die Quelle. box-shadow waere hier falsch, es umrandet bei
   einem SVG-Pfad den rechteckigen Kasten und nicht die Form. */
.stern-teil { stroke: currentColor; color: rgba(255, 255, 255, .25); }
/* Nur das Karo traegt eine Fuellung, und sehr leise. Es ist die einzige
   geschlossene Flaeche der Figur und soll als Kern lesen, nicht als fuenfte
   gleichberechtigte Form. */
.teil-1 { color: var(--b1); fill: rgba(69, 179, 168, .04);
          filter: drop-shadow(0 0 2px rgba(69, 179, 168, .5))
                  drop-shadow(0 0 14px rgba(69, 179, 168, .16)); }
.teil-2 { color: var(--b2);
          filter: drop-shadow(0 0 2px rgba(107, 159, 212, .46))
                  drop-shadow(0 0 13px rgba(107, 159, 212, .14)); }
.teil-3 { color: var(--b3);
          filter: drop-shadow(0 0 2px rgba(157, 143, 208, .46))
                  drop-shadow(0 0 13px rgba(157, 143, 208, .14)); }
.teil-4 { color: var(--b4);
          filter: drop-shadow(0 0 2px rgba(201, 138, 166, .46))
                  drop-shadow(0 0 13px rgba(201, 138, 166, .14)); }
.teil-5 { color: var(--b5);
          filter: drop-shadow(0 0 2px rgba(143, 179, 106, .46))
                  drop-shadow(0 0 13px rgba(143, 179, 106, .14)); }

.pfeil-1 { stroke: var(--b1); }
.pfeil-2 { stroke: var(--b2); }
.pfeil-3 { stroke: var(--b3); }
.pfeil-4 { stroke: var(--b4); }
.pfeil-5 { stroke: var(--b5); }

/* Ernests Vorgabe: am Handy ohne Pfeile. Sie zeigen auf Textbloecke, die dort
   gar nicht neben dem Stern stehen, und waeren damit eine Luege. */
.pfeile { display: none; }

/* --- Ein Bereich --------------------------------------------------------
   Am Handy traegt jeder Block seinen Ton als Strich links. Das ist die
   Zuordnung, die am Schreibtisch der Pfeil uebernimmt. */

.bereich {
  border-left: 3px solid var(--ton);
  padding-left: 1.1rem;
}

/* Der Knopf steht unter der Figur, mittig, wie im Vorbild. Am Handy ueber die
   volle Breite wie ueberall sonst auf der Seite, am Schreibtisch nur so breit
   wie sein Text: ein Balken ueber 60 Zeichen liest sich nicht mehr als Knopf.
   Der Schatten der Grundregel traegt Orange auf Papier; auf dem dunklen Grund
   ist er unsichtbar und stoert deshalb auch nicht. */
.knopf-bereiche {
  margin: 1.8rem auto 0;
  align-self: center;
}

.bereich-1 { --ton: var(--b1); }
.bereich-2 { --ton: var(--b2); }
.bereich-3 { --ton: var(--b3); }
.bereich-4 { --ton: var(--b4); }
.bereich-5 { --ton: var(--b5); }

.bereich-kopf {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 .35rem;
}

.bereich-ziffer {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--ton);
}

.bereich-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.25;
}

.bereich-merk {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, .96);
}

.bereich-text {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .64);
}

/* --- Schreibtisch: der Stern in der Mitte, vier Bereiche in den Ecken ----

   Erst ab 900 Pixeln, nicht ab den ueblichen 768. Gemessen: bei 768 Pixeln
   bleiben den beiden Seitenspalten je rund 215 Pixel, darin bricht
   "Positionierung" um und der Satz zerfaellt in Zweiwortzeilen. Ab 900 sind
   es rund 300 Pixel je Spalte, das traegt.

   Die Zuordnung Zacke zu Block ist keine Anordnung nach Geschmack, sondern
   folgt den gemessenen Spitzen der Pfade: Zacke 2 zeigt nach oben links,
   3 nach oben rechts, 4 nach unten links, 5 nach unten rechts. Das Karo in
   der Mitte ist 01 und steht deshalb ueber dem Stern, mit einem kurzen Strich
   nach unten als Verbindung. */

@media (min-width: 900px) {
  .bereiche { padding: 2rem 1.4rem 2.2rem; }

  /* Zwoelf Spalten statt drei. Ernest am 15.09.2026 nach dem Vergleich mit
     dem Vorbild: "es muss jetzt nicht so gelagert sein, wie du es machst, es
     kann halt eins kann da sein, drei dann mehr rechts oben, fuenf dann da
     unten rechts, Verkauf unten links, halt einfach den gesamten Platz
     verwenden."

     Im Vorbild sitzen die sechs Bloecke auf sechs verschiedenen Hoehen, keine
     zwei bilden eine Reihe. Genau das erzeugt den Eindruck, dass sie um die
     Figur herum liegen und nicht in einer Tabelle stehen. Hier dasselbe mit
     fuenf: 03 startet ganz oben rechts, 02 etwas tiefer links, 04 unten
     links, 05 noch ein Stueck tiefer rechts. align-self:start ist die
     Bedingung dafuer, sonst zentriert das Raster jeden Block in seiner Zone
     und der Versatz verschwindet wieder.

     Alle Bloecke sind linksbuendig, auch die auf der linken Seite. Das ist
     ebenfalls aus dem Vorbild uebernommen und der Grund ist banal: fuenf
     Textbloecke mit unterschiedlicher Ausrichtung haben zwei verschiedene
     Lesekanten, und das Auge sucht bei jedem Block neu. */
  .stern-raster {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1.6rem;
    row-gap: 1.2rem;
    align-items: start;
  }

  /* scale und nicht mehr Spalten: die Figur soll wachsen, ohne dass das
     Raster breiter wird und die Textspalten schrumpfen. Ein transform nimmt
     keinen Platz im Layout ein, und weil im SVG rundherum nur der Leerraum
     fuer die Pfeile liegt, ragt der Stern selbst nie in eine Textspalte. */
  .stern {
    grid-column: 5 / 9;
    grid-row: 2 / 4;
    max-width: none;
    margin: 0;
    align-self: center;
    transform: scale(1.22);
  }

  .pfeile { display: block; }

  .bereich { border-left: 0; padding-left: 0; }

  /* 01 sitzt mittig ueber dem Stern, weil es das Karo IN der Mitte ist und
     als einziges keinen Pfeil bekommt. Der kurze Strich darunter ist seine
     Verbindung zum Kern. */
  /* Genau die vier Spalten des Sterns, nicht mehr. Der erste Versuch gab 01
     die Spalten 4 bis 9 und 03 die Spalten 9 bis 12: Spalte 9 war damit
     doppelt vergeben, und im Screenshot lief der Satz von 01 mitten in den
     von 03 hinein ("sich bloedIhre Seite ist Ihr Content"). Rasterspalten
     stapeln sich stillschweigend uebereinander, sie weichen einander nicht
     aus. */
  .bereich-1 {
    grid-column: 5 / 9;
    grid-row: 1;
    margin: 0 auto;
    text-align: center;
  }
  .bereich-1 .bereich-kopf { justify-content: center; }

  /* Am Schreibtisch nur so breit wie sein Text. Die Grundregel gibt jedem
     Knopf width:100%, was am Handy richtig ist und hier einen 1180 Pixel
     breiten Balken ergab. Ein Balken liest sich als Flaeche, nicht als Knopf,
     und das Vorbild setzt ihn an dieser Stelle bewusst kompakt. */
  .knopf-bereiche { width: auto; }

  /* Zweiter Anlauf bei der Verteilung. Der erste legte die vier Bloecke auf
     sechs Rasterzeilen, damit keine zwei eine Reihe bilden. Im Screenshot war
     das Ergebnis aber nicht locker, sondern loechrig: rechts klaffte zwischen
     03 und 05 ein leeres Rechteck von gut 200 Pixeln, weil 03 kurz ist und 05
     tief sass.

     Jetzt docken die vier Bloecke an ihre Zacke an: 02 und 03 auf Hoehe der
     oberen Spitzen, 04 und 05 auf Hoehe der unteren. Der Pfeil zeigt damit
     tatsaechlich dorthin, wo der Text beginnt, und nicht daneben. Der Versatz
     bleibt, er kommt jetzt aus den Randabstaenden statt aus eigenen Zeilen:
     03 sitzt etwas hoeher als 02, 05 etwas tiefer als 04. Das haelt die
     Komposition schief, ohne Loecher zu reissen. */
  .bereich-2 { grid-column: 1 / 5;  grid-row: 2; }
  .bereich-3 { grid-column: 9 / 13; grid-row: 2; margin-top: -1.6rem; }
  .bereich-4 { grid-column: 1 / 5;  grid-row: 3; }
  .bereich-5 { grid-column: 9 / 13; grid-row: 3; margin-top: 1.6rem; }
}

/* --- Fuellen beim Scrollen ----------------------------------------------
   Siehe Kopfkommentar. Ohne Unterstuetzung steht alles fertig da. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .stern-raster { view-timeline: --raster block; }

    .stern-teil,
    .pfeil-lp {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      opacity: 0;
      /* Weiche Kurve statt linear. Am Scrollrad kommt der Fortschritt in
         kleinen Spruengen an; linear gibt jeden davon eins zu eins weiter und
         es stakst. Eine Kurve, die am Ende auslaeuft, schluckt die Spruenge
         sichtbar. */
      animation: stern-zeichnen cubic-bezier(.32, .82, .38, 1) both;
      animation-timeline: --raster;
    }

    /* Am Handy haengt jeder Block an seiner EIGENEN Zeitachse, nicht an der
       des Rasters. Gemessen am ersten Schuss: der Abschnitt ist dort 1482
       Pixel hoch, der Schirm 852. Der Stern steht oben, die fuenf Bloecke
       darunter, und beide sind nie gleichzeitig im Bild. Haengen alle an der
       Rasterachse, dann ist der Stern halb gezeichnet, solange man ihn sieht,
       und fertig, wenn er laengst oben raus ist. Genau so sah der erste
       Handy-Screenshot aus.

       Mit view() fuellt sich jeder Block in dem Moment, in dem er selbst ins
       Bild kommt. Der Stern bekommt weiter unten seine eigene, fruehe
       Strecke. */
    .bereich {
      opacity: 0;
      animation: bereich-steigen cubic-bezier(.25, .85, .32, 1) both;
      animation-timeline: view();
      animation-range: entry 5% entry 75%;
    }

    /* Gestaffelt ueber die Strecke, in der das Raster durch das Bild laeuft.
       01 zuerst, weil es der Kern ist, dann die vier Zacken im Uhrzeigersinn
       der Nummern. Beim Zurueckscrollen laeuft es rueckwaerts, das ist bei
       einer Scroll-Zeitachse so gewollt: der Abschnitt fuellt sich bei jedem
       Durchgang neu.

       Die Strecke endet bei cover 49 Prozent, nicht spaeter. Der erste
       Versuch lief bis 60 Prozent, und gemessen war Bereich 05 dann noch
       vollstaendig unsichtbar (opacity 0), waehrend der Abschnitt schon
       mittig im Bild stand. Alles muss gefuellt sein, bevor der Leser unten
       ankommt, sonst liest er eine leere Ecke. */
    /* entry statt cover, und das ist kein Detail: cover misst die ganze
       Strecke vom Auftauchen bis zum Verschwinden, und die haengt an der
       Hoehe des Abschnitts. Als der Abschnitt auf volle Schirmhoehe wuchs und
       den Knopf bekam, stand Bereich 05 gemessen wieder bei 0,39. entry misst
       nur das Hereinfahren des Rasters selbst und bleibt damit stabil, egal
       wie hoch der Abschnitt drumherum wird.

       Am Handy zeichnet sich der Stern frueh und zuegig durch, damit er
       fertig ist, sobald er im Bild steht. Gemessen: Raster 1072 Pixel,
       Schirm 852, der Stern sitzt oben. Das Karo kommt zuletzt, die vier
       Zacken bauen sich auf und dann setzt sich der Kern hinein. */
    /* Fenster von 14 statt 9 Prozent, Versatz weiterhin 4: die Teile
       ueberlappen sich jetzt deutlich, statt nacheinander abzuhaken. Das ist
       der zweite Teil von "smoother", der erste ist die Kurve oben. */
    .teil-2, .pfeil-2 { animation-range: entry 2% entry 26%; }
    .teil-3, .pfeil-3 { animation-range: entry 8% entry 32%; }
    .teil-4, .pfeil-4 { animation-range: entry 14% entry 38%; }
    .teil-5, .pfeil-5 { animation-range: entry 20% entry 44%; }
    .teil-1, .pfeil-1 { animation-range: entry 26% entry 50%; }

    /* Am Schreibtisch muss dieselbe Staffelung frueher fertig sein, und der
       Grund ist die Form des Rasters, nicht der Geschmack: am Handy ist es
       1072 Pixel hoch und laeuft an einem 852 Pixel hohen Schirm vorbei, am
       Schreibtisch ist es 539 Pixel flach und steht komplett im Bild. Mit den
       Handy-Werten stand Bereich 05 dort gemessen bei 0,66, als der Abschnitt
       schon an seinem untersten Punkt war: der Leser haette die letzte Ecke
       nie voll gesehen. */
    @media (min-width: 900px) {
      /* Am Schreibtisch steht der ganze Abschnitt auf einmal im Bild. Hier
         gehoeren Block und Sternteil zurueck auf DIESELBE Achse, denn erst
         dadurch sieht man, dass der Pfeil von genau dieser Zacke kommt. */
      .bereich { animation-timeline: --raster; }
      /* Hier laeuft die Staffelung ueber das ganze Hereinfahren, denn am
         Schreibtisch soll man sie sehen: das Raster ist mit 549 zu 900 Pixeln
         kleiner als der Schirm, es faehrt also als Ganzes herein und fuellt
         sich dabei Zacke fuer Zacke. Bei entry 90 Prozent steht es fast
         vollstaendig im Bild und alles ist voll. */
      .teil-1, .pfeil-1, .bereich-1 { animation-range: entry 10% entry 48%; }
      .teil-2, .pfeil-2, .bereich-2 { animation-range: entry 20% entry 58%; }
      .teil-3, .pfeil-3, .bereich-3 { animation-range: entry 30% entry 68%; }
      .teil-4, .pfeil-4, .bereich-4 { animation-range: entry 40% entry 78%; }
      .teil-5, .pfeil-5, .bereich-5 { animation-range: entry 50% entry 88%; }
    }
  }
}

@keyframes stern-zeichnen {
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes bereich-steigen {
  from { transform: translateY(1rem); }
  to { opacity: 1; transform: none; }
}

/* =======================================================================
   Formular und Danke-Seite (die Strecke hinter dem Knopf), 15.09.2026
   =======================================================================

   Dieselben zwei Farben und derselbe Papierton wie die Landeseite. Der
   Akzent bleibt auch hier dem EINEN Knopf vorbehalten: kein akzentfarbener
   Rahmen um ein gewaehltes Feld, keine akzentfarbene Ueberschrift. Ein
   gewaehlter Schalter wird dunkel, nicht orange.

   Die einzige Ausnahme ist --fehler, und sie bricht die Regel nicht: die
   Farbe erscheint nur, wenn etwas schiefgegangen ist, sie ist nie anklickbar
   und steht nie neben dem Knopf. Eine Fehlermeldung in der Knopffarbe waere
   dagegen ein Angebot, das keines ist.

   Keine Karten mit Icon-Kreis. Die Struktur kommt aus Haarlinien und zwei
   Bloecken mit Titel, weil sie etwas ueber den Inhalt sagen soll: drei
   Fragen, dann die Adresse. */

:root {
  /* Dunkles Rot, deutlich weg vom Orange des Knopfes. Auf dem Papierton
     gemessen 7,4:1, haelt also AA auch in kleiner Schrift. */
  --fehler: #8f1d1d;
}

body.lp main.strecke {
  max-width: 34rem;
  padding: 1.6rem 1.4rem 2.5rem;
}

body.lp main.strecke-schmal { max-width: 30rem; }

/* Die Schlagzeile der Folgeseiten ist kleiner als die der Hero. Dort muss
   sie den Blick fangen, hier ist der Blick schon da. */
body.lp main.strecke h1 { font-size: clamp(1.7rem, 7vw, 2.3rem); }

body.lp main.strecke .hero-sub { margin-bottom: 2rem; }

/* --- Die zwei Bloecke --------------------------------------------------- */

/* --- Ein Schritt je Schirm ----------------------------------------------

   Seit 15.09.2026 stellt die Strecke jede Frage einzeln, siehe Migration 018
   und den Kopfkommentar von vorschau.html. Fuer das Aussehen heisst das: auf
   dem Schirm steht genau eine Sache, und sie ist so gross wie die Schlagzeile
   der Landeseite davor. Ein Schritt, der aussieht wie ein Formular mit einem
   Feld, waere schlechter als das alte Formular, nicht besser. */

.strecke-schritt { max-width: 34rem; }

/* Der Zaehler ist Pflicht, nicht Zierde: Brief und Landeseite versprechen
   "drei kurze Fragen", und wer eine einzelne Frage ohne Zaehler sieht,
   rechnet mit zehn. */
.fortschritt-text {
  margin: 0 0 .5rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grau);
}

/* Vier Striche statt eines Balkens mit Prozentzahl. Der Empfaenger soll
   abzaehlen koennen, wie viel noch kommt, und nicht schaetzen. */
.fortschritt {
  display: flex;
  gap: .35rem;
  list-style: none;
  margin: 0 auto 1.6rem;
  padding: 0;
  max-width: 14rem;
}

.fortschritt li {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--linie);
}

/* Erledigte Schritte in der Tinte, der aktuelle im Akzent. Das ist die
   einzige Stelle ausserhalb eines Knopfes, an der die Akzentfarbe steht, und
   sie ist hier richtig: der Strich zeigt genau die eine Handlung an, die der
   Empfaenger gerade ausfuehrt. */
/* Mit dem Element davor, nicht ohne: ".fortschritt li" traegt die
   Spezifitaet 0-1-1, ".fortschritt-fertig" allein nur 0-1-0. Der Grundton
   haette also gewonnen und alle vier Striche saehen gleich aus. Genau so war
   es im ersten Screenshot, und es faellt nur auf, wenn man die Farben
   nachmisst statt sie anzuschauen. */
.fortschritt li.fortschritt-fertig { background: var(--tinte); }
.fortschritt li.fortschritt-hier { background: var(--akzent); }

/* Die Frage IST die Ueberschrift. Deshalb braucht das Feld darunter keine
   eigene sichtbare Beschriftung mehr, sie stuende zweimal da. Fuer
   Vorleseprogramme bleibt sie, nur unsichtbar. */
.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body.lp .strecke-schritt h1 { text-align: left; }

.strecke-schritt .hero-sub {
  margin: 0 0 1.6rem;
  text-align: left;
  color: var(--grau);
}

.feld-wahl { border: 0; margin: 0 0 1.4rem; padding: 0; }

/* Zurueck ist bewusst ein Link und kein zweiter Knopf. Zwei Knoepfe
   nebeneinander sind zwei Angebote, und eines davon fuehrt rueckwaerts. */
.zurueck {
  display: block;
  margin: 1rem auto 0;
  width: fit-content;
  color: var(--grau);
  font-size: .95rem;
}

/* Wenn das Skript uebernimmt: der gewaehlte Schalter bleibt kurz stehen,
   bevor die Seite wechselt, und der Rest tritt zurueck. Ohne diese
   Rueckmeldung sieht es aus, als waere die Seite von selbst gesprungen. */
.fragen-geht-weiter .wahl:not(:has(input:checked)) { opacity: .45; }
.fragen-geht-weiter .knopf { opacity: .5; }

.block {
  border: 0;
  padding: 0;
  margin: 0 0 2.2rem;
}

.block-titel {
  /* legend laesst sich nur mit display:block zuverlaessig setzen. */
  display: block;
  width: 100%;
  padding: 0 0 .5rem;
  margin: 0 0 1.4rem;
  border-bottom: 1px solid var(--linie);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 500;
}

.feld {
  border: 0;
  padding: 0;
  margin: 0 0 1.6rem;
}

/* Der letzte Block eines Abschnitts traegt seinen Abstand nicht doppelt:
   sonst stehen zwischen der letzten Antwort und dem naechsten Titel knapp
   vier Zeilen Luft und der Abschnitt wirkt abgerissen. */
.block .feld:last-of-type { margin-bottom: 0; }

.feld-frage {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 .25rem;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}

.feld-hilfe {
  margin: 0 0 .7rem;
  font-size: .92rem;
  line-height: 1.45;
  color: var(--grau);
}

.feld-frei { font-weight: 400; font-size: .88rem; color: var(--grau); }

/* --- Eingabefelder ------------------------------------------------------ */

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: .75rem .9rem;
  border: 1.5px solid var(--linie);
  border-radius: 6px;
  background: #fff;
  color: var(--tinte);
  font-family: inherit;
  /* 16px, keine Nachkommastelle: iOS Safari zoomt beim Tippen in jedes Feld
     unter 16 Pixeln hinein, und die Seite steht danach verschoben da. */
  font-size: 16px;
  line-height: 1.45;
}

.feld textarea {
  min-height: 6.2rem;
  resize: vertical;
}

.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 2px;
  border-color: var(--tinte);
}

/* --- Schalter ----------------------------------------------------------
   Eine Zeile je Antwort, volle Breite, Mindesthoehe 52 Pixel. Der ganze
   Streifen ist das Ziel, nicht der kleine Kreis: am Handy trifft der Daumen
   sonst daneben, und ein Fehlversuch auf der Qualifizierungsseite kostet
   genau den Empfaenger, der sich gerade Muehe gibt. */

.wahl {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 52px;
  padding: .6rem .9rem;
  margin: 0 0 .5rem;
  border: 1.5px solid var(--linie);
  border-radius: 6px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.35;
  cursor: pointer;
}

.wahl input[type="radio"] {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  /* Der gewaehlte Schalter wird Tinte, nicht Akzent. */
  accent-color: var(--tinte);
}

/* Zweite, deutlichere Stufe fuer die gewaehlte Zeile. Faellt :has() aus,
   bleibt der gefuellte Kreis als Zustand uebrig, die Zeile ist also nie
   ohne Antwort. */
.wahl:has(input:checked) {
  border-color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--tinte);
}

.wahl:focus-within {
  outline: 3px solid var(--tinte);
  outline-offset: 2px;
}

/* --- Fehler ------------------------------------------------------------- */

.fehler-oben {
  margin: 0 0 1.6rem;
  padding: .75rem .95rem;
  border-left: 3px solid var(--fehler);
  border-radius: 0 6px 6px 0;
  background: #fff;
  font-size: .98rem;
}

.feld-fehler {
  margin: .5rem 0 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--fehler);
}

/* --- Honigtopf ---------------------------------------------------------
   Aus dem Bild, aber im Dokument: ein Bot fuellt es, ein Mensch sieht es
   nie. display:none waere ehrlicher zu lesen und genau deshalb falsch, die
   besseren Bots ueberspringen ausgeblendete Felder. */

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Danke-Seite -------------------------------------------------------- */

.danke-bild { margin: 2rem 0 0; }

.danke-bild img {
  display: block;
  width: 100%;
  /* Ernest am 16.09.2026: "ein bisschen Bild groesser". 11rem war eine
     Briefmarke neben einer Ueberschrift, die die halbe Breite nimmt. */
  max-width: 17rem;
  margin: 0 auto;
  height: auto;
  border-radius: 10px;
  background: #fff;
}

.danke-bild figcaption {
  margin-top: .7rem;
  text-align: center;
  font-size: .88rem;
  color: var(--grau);
}

@media (min-width: 768px) {
  body.lp main.strecke { padding: 3rem 2rem 3rem; }
  body.lp main.strecke .hero-sub { font-size: 1.08rem; }
  .block-titel { font-size: 1.32rem; }
}

/* --- FAQ "Was jetzt noch offen ist" (body.lp), Stand 15.09.2026 ---------

   Natives <details>/<summary>, kein JavaScript. Ein Akkordeon, das ein
   Skript braucht, ist genau der Fall, der irgendwann still nicht mehr
   aufgeht, und die CSP dieser Strecke laesst nichts Fremdes zu.

   Der Marker ist ein gedrehtes Plus und kein Pfeilzeichen: ein "+" liegt in
   jeder Schrift, die hier ohne Ladeweg zur Verfuegung steht, ein Chevron
   nicht. Um 45 Grad gedreht wird daraus ein Kreuz, und der Leser sieht am
   Winkel, ob die Antwort offen ist. Der eingebaute Dreieck-Marker faellt
   dafuer weg, in Safari ueber ::-webkit-details-marker, sonst ueber
   list-style.

   Die Frage traegt die Serifenschrift der Ueberschriften, nicht die des
   Fliesstextes: sie IST eine Ueberschrift, der Leser ueberfliegt nur diese
   Zeilen. */

.faq { margin: 0 0 2.2rem; border-top: 1px solid var(--linie); }

.faq details { border-bottom: 1px solid var(--linie); }

.faq summary {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 0;
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  line-height: 1.35;
  /* Das native Dreieck weg, an beiden Stellen, an denen es entstehen kann. */
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  /* Grau, NICHT der Akzent. Diese Datei haelt oben fest: der Akzent gehoert
     ausschliesslich der Handlung, wer die Farbe sieht, sieht einen Knopf.
     Ein akzentfarbenes Plus neben acht Fragen waeren acht falsche Knoepfe
     direkt ueber dem echten. */
  color: var(--grau);
  transition: transform .18s ease;
}

.faq details[open] summary::after { transform: rotate(45deg); }

/* Ohne diese Zeile setzt der Browser beim Klick einen eigenen Rahmen, der
   nur bei der Tastatur erwuenscht ist. */
.faq summary:focus { outline: none; }

.faq summary:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 2px;
}

.faq details p {
  margin: 0 0 1.1rem;
  font-size: 1rem;
  color: var(--tinte);
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* --- Fuss der Kampagnenstrecke (body.lp), Stand 15.09.2026 --------------

   Ernest am 15.09.2026: derselbe Grund wie der Kopfbalken. Der Kopf ist
   schwarz, die Buehne der fuenf Bereiche ist schwarz, die Fusszeile stand
   als einzige unentschieden dazwischen und hat die Seite auslaufen lassen
   statt sie zu schliessen. Jetzt ist die Seite gerahmt.

   Bewusst NUR body.lp, also die drei Seiten der Strecke (Landeseite,
   Formular, Danke), die auch den schwarzen Kopf tragen. wurzel.html und
   unbekannt.html laufen unter body.knapp und haben keinen Kopfbalken; ein
   schwarzer Fuss ohne schwarzen Kopf waere dort ein Balken ohne Gegenstueck.
   landeseite_eigen.html traegt einen eigenen <footer> und bleibt ebenfalls
   unberuehrt.

   Der Balken geht von Kante zu Kante, deshalb faellt max-width weg. Die
   Links stehen ohne zusaetzlichen Behaelter mittig, weil sie inline sind. */

body.lp footer {
  max-width: none;
  margin: 3.5rem 0 0;
  padding: 1.9rem 1.4rem;
  background: var(--schwarz);
  /* Nicht var(--grau): #6b6b6b auf Schwarz misst 3,9:1 und haelt AA fuer
     normalen Text nicht. #b5b5b5 misst rund 10:1. */
  color: #b5b5b5;
}

body.lp footer a { color: #e2e2e2; }
body.lp footer a:hover { color: #fff; }

body.lp footer a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --- Sanftes Springen und der Heimweg im Kopf, Stand 16.09.2026 ---------

   Ernest am 16.09.2026: die Sprungmarken sollen scrollen, nicht springen,
   "nicht dieses Harte". scroll-behavior gehoert ans Wurzelelement, sonst
   greift es fuer Spruenge, die das Dokument bewegen, gar nicht.

   Wer Bewegung im System abgeschaltet hat, bekommt weiter den harten
   Sprung: eine erzwungene Bewegung ueber mehrere Bildschirmhoehen ist
   genau der Fall, gegen den die Einstellung existiert. */

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Das Logo ist jetzt ein Link. Es soll deshalb aussehen wie vorher und
   sich nur beim Tasten-Fokus zu erkennen geben. */
.kopf-heim { display: inline-flex; text-decoration: none; }

.kopf-heim:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Der Fuss bleibt unten, auch auf kurzen Seiten ----------------------

   Ernest am 16.09.2026, beim Durchklicken des Formulars: "der Footer ist
   zu weit oben auf Desktop". Nachgemessen: auf der Formularseite endete der
   schwarze Balken bei 725 von 982 Pixeln, darunter standen 257 Pixel
   Papier. Am Handy 185. Der Balken sah dadurch aus wie ein Kasten mitten
   auf der Seite und nicht wie der Abschluss.

   Loesung ohne position:fixed: der Koerper ist mindestens so hoch wie das
   Fenster, der Inhalt dehnt sich, der Fuss sitzt am Ende. Auf der langen
   Landeseite aendert das nichts, dort ist der Inhalt ohnehin laenger.

   100dvh statt 100vh: am iPhone rechnet 100vh mit eingeklappter Adress-
   zeile und schiebt den Fuss sonst unter die Falz. */

body.lp {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* margin:0 auto zentriert den Inhalt weiterhin, auch als Flex-Element. */
body.lp main { flex: 1 0 auto; }
body.lp footer { flex-shrink: 0; }

/* --- Frage auf der eigenen Landeseite, Stand 06.10.2026 -----------------

   Migration 043: steht an der eigenen Seite eine Frage, liegt unter dem
   oberen Text ein Textfeld. Gebaut aus den Teilen der Vorschau-Strecke
   (.feld, .feld-frage, .feld-fehler, .knopf, .honigtopf), damit Feld und
   Knopf auf allen oeffentlichen Seiten gleich aussehen. Hier steht nur, was
   diese eine Seite anders braucht. Deshalb am Ende der Datei: bei gleicher
   Spezifitaet gewinnt die spaetere Regel.

   Gelesen wird am Handy, direkt nach dem Scan, oft von jemandem, der erst
   die Lesebrille sucht. Deshalb ist die Frage groesser als ein Feldtitel der
   Strecke und die Schrift im Feld groesser als die 16 Pixel, die dort nur
   gegen den Zoom von iOS stehen. Sechs Zeilen hoch, weil der Brief um zwei,
   drei Saetze bittet: ein schmales Feld sagt "ein Stichwort", ein Kasten
   von sechs Zeilen sagt "erzaehlen Sie". */

.antwort { margin: 1.8rem 0 2rem; }

.antwort .feld { margin-bottom: 1.2rem; }

/* Die Frage ist die Beschriftung des Feldes und zugleich der Satz, um den
   es auf der Seite geht. Serif wie die Ueberschrift, damit sie als Frage
   des Absenders gelesen wird und nicht als Formularfeld. */
.antwort .feld-frage {
  margin-bottom: .7rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Ueber dem Feld statt darunter, siehe Vorlage: am Handy schiebt die
   Tastatur alles unter dem Feld aus dem Bild. */
.antwort .feld-fehler { margin: 0 0 .6rem; }

.antwort .feld textarea {
  font-size: 1.125rem;
  line-height: 1.5;
  /* Sechs Zeilen plus Innenabstand und Rahmen, auch wo rows="6" nicht
     greift. em misst hier die Schrift des Feldes selbst. */
  min-height: calc(6 * 1.5em + 1.5rem + 3px);
}

.antwort .knopf { font-size: 1.1rem; }

/* Der Dank an der Stelle des Feldes. Dieselbe Randlinie wie der Befund:
   eine Notiz auf dem Papier, kein Banner. Tinte statt Akzent, die Farbe
   gehoert dem Knopf. */
.antwort-danke {
  margin: 1.8rem 0 2rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--tinte);
  border-radius: 0 8px 8px 0;
  background: #fff;
}

.antwort-danke p {
  margin: 0 0 .6rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.4;
}

.antwort-danke p:last-child { margin-bottom: 0; }

/* --- Kontaktfelder unter der Antwort, Stand 07.10.2026 -------------------

   Migration 044: an Seiten fuer Briefe ohne Namen folgen unter dem
   Antwortfeld Vorname, Name, E-Mail, Telefon und LinkedIn. Die Frage oben
   ist der Satz der Seite und deshalb gross in Serif. Diese Felder sind nur
   Angaben dazu und bekommen die schlichte Beschriftung der Vorschau-Strecke
   zurueck, sonst stuenden fuenf Ueberschriften untereinander. */

.antwort .antwort-kontakt .feld { margin-bottom: 1rem; }

.antwort .antwort-kontakt .feld-frage {
  margin-bottom: .3rem;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}

.antwort .antwort-kontakt { margin-bottom: 1.4rem; }

/* --- Vorschlaege zum Antippen, Stand 07.10.2026 --------------------------

   Migration 045: zwischen Frage und Antwortfeld stehen Saetze, die mit KI
   heute schon gehen, als Knoepfe. Kontrollkaestchen ohne Skript: das
   Kaestchen selbst ist unsichtbar, aber fokussierbar, der Knopf ist das
   span daneben und zeigt den Zustand ueber :checked. Angetippt wird er
   tintenschwarz statt akzentfarben, die Farbe gehoert dem Knopf "Absenden".
   Mindestens 44 Pixel hoch, damit ein Daumen ihn trifft. */

.vorschlaege { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }

.vorschlaege-hinweis {
  margin: 0 0 .6rem;
  padding: 0;
  color: var(--grau);
  font-size: .98rem;
  line-height: 1.45;
}

.vorschlaege-liste { display: flex; flex-wrap: wrap; gap: .5rem; }

.vorschlag { position: relative; display: inline-flex; cursor: pointer; }

.vorschlag input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.vorschlag span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .55rem .9rem;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
}

/* Abstand per margin: im Flex-Knopf faellt ein Leerzeichen im content weg. */
.vorschlag span::before { content: "+"; margin-right: .4em; color: var(--grau); }

.vorschlag input:checked + span {
  border-color: var(--tinte);
  background: var(--tinte);
  color: #fff;
}

.vorschlag input:checked + span::before { content: "\2713"; color: #fff; }

.vorschlag input:focus-visible + span {
  outline: 2px solid var(--tinte);
  outline-offset: 2px;
}