/* Drachenboot — Stay-Tuned-Seite
   Eine Datei, keine externen Ressourcen: keine Webfonts, kein CDN, kein
   Tracker. Systemschriften sehen auf jedem Gerät nach diesem Gerät aus und
   sind schon geladen, bevor die Seite überhaupt ankommt.
   Aufbau: Farbwerte → Grundgerüst → Bausteine → Breiten. */

/* ---------- Farbwerte ---------- */

/* Drei Zustände, nicht zwei:
     kein data-thema       → die Seite folgt dem Betriebssystem (Auslieferung)
     data-thema="hell"     → ausdrücklich hell, auch auf einem dunklen System
     data-thema="dunkel"   → ausdrücklich dunkel, auch auf einem hellen

   Deshalb stehen die dunklen Werte zweimal da, und das ist Absicht: Die
   Medienabfrage muss zurücktreten, sobald jemand "hell" gewählt hat, und der
   ausdrückliche Wunsch muss auch auf einem hellen System durchkommen. Ein
   einziger Block kann beides nicht — CSS kann eine Medienabfrage nicht als
   Teil eines Selektors führen.

   WER EINEN FARBWERT ÄNDERT, ÄNDERT IHN IN BEIDEN DUNKEL-BLÖCKEN.
   (light-dark() gäbe es dafür, fällt aber auf Browsern vor Mitte 2024 nicht
   sauber zurück: In einer Custom Property scheitert die Funktion erst beim
   Berechnen, und dann steht die Seite ohne Farben da. Für eine öffentliche
   Seite, die auch auf alten Telefonen aufgeht, ist das kein Tausch.) */

:root {
  /* Sagt dem Browser, wie er das zeichnen soll, was NICHT aus diesem
     Stylesheet kommt: Bildlaufleisten, Haken, Eingabefelder. Ohne das steht
     ein weißes Kästchen in einer dunklen Karte. */
  color-scheme: light;

  --akzent: #208aef;
  --akzent-dunkel: #1668b6;
  --akzent-schrift: #ffffff;

  --grund: #ffffff;
  --grund-2: #f4f7fa;
  --grund-3: #eaf2fb;
  --text: #17202a;
  --text-leise: #5a6672;
  --rand: #dde3ea;
  --schatten: 0 1px 2px rgba(23, 32, 42, 0.06), 0 8px 24px rgba(23, 32, 42, 0.06);

  --gut: #1c7c4a;
  --schlecht: #b23b2e;

  --breite: 62rem;
  --breite-schmal: 42rem;
  --radius: 0.75rem;
}

/* Dunkel, weil das System es so will — aber nur, solange niemand
   ausdrücklich hell gewählt hat. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;

    --akzent: #4ea4f5;
    --akzent-dunkel: #7bbcf8;
    --akzent-schrift: #08121d;

    --grund: #0e151d;
    --grund-2: #141d27;
    --grund-3: #16232f;
    --text: #e7edf3;
    --text-leise: #9aa7b4;
    --rand: #26313d;
    --schatten: none;

    --gut: #5fc98d;
    --schlecht: #f08a7c;
  }
}

/* Dunkel, weil jemand darauf geklickt hat. Gilt auch auf einem hellen
   System und steht deshalb hinter der Medienabfrage. */
:root[data-thema="dunkel"] {
  color-scheme: dark;

  --akzent: #4ea4f5;
  --akzent-dunkel: #7bbcf8;
  --akzent-schrift: #08121d;

  --grund: #0e151d;
  --grund-2: #141d27;
  --grund-3: #16232f;
  --text: #e7edf3;
  --text-leise: #9aa7b4;
  --rand: #26313d;
  --schatten: none;

  --gut: #5fc98d;
  --schlecht: #f08a7c;
}

/* ---------- Grundgerüst ---------- */

* { box-sizing: border-box; }

/* Sprungmarken gleiten, statt zu springen — sonst wirkt ein Klick auf
   "Unterstützen" wie ein Seitenwechsel und man weiß nicht, wo man ist.
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt den
   harten Sprung (siehe ganz unten). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Damit die Überschrift nach dem Sprung nicht unter der stehenden
   Kopfleiste verschwindet. */
[id] { scroll-margin-top: 5rem; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 6vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2rem); }
h3 { font-size: 1.075rem; }

p { margin: 0 0 1em; }

a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }

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

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Kopf- und Fußleiste ---------- */

/* Bleibt beim Scrollen oben stehen. Der Hintergrund muss dabei über die
   volle Fensterbreite gehen, sonst scrollt der Inhalt seitlich daran
   vorbei — deshalb keine max-width mehr, sondern seitliches Polster, das
   den Inhalt auf dieselbe Breite zentriert wie die Bänder darunter. */
.kopfleiste {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem max(1.25rem, calc((100% - var(--breite)) / 2));
  background: var(--grund);
  border-bottom: 1px solid var(--rand);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}

.marke-zeichen { width: 1.6rem; height: 1.6rem; color: var(--akzent); }

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Sichtbar auf jeder Seite, aber bewusst kein gefüllter Knopf: Der
   Spendenhinweis soll auffindbar sein und nicht um Aufmerksamkeit
   konkurrieren. Er sieht deshalb aus wie der Sprachwechsler daneben,
   nur mit Akzentfarbe. */
.kopf-spenden {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
  color: var(--akzent);
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  white-space: nowrap;
}

.kopf-spenden:hover { border-color: var(--akzent); }

.kopf-spenden-zeichen { width: 0.95rem; height: 0.95rem; stroke-width: 2; }

/* Auf schmalen Geräten wird die Kopfleiste sonst dreispaltig eng.
   Das Herz allein sagt genug. */
@media (max-width: 26rem) {
  .kopf-spenden span { display: none; }
  .kopf-spenden { padding: 0.35rem 0.55rem; }
}

/* Ein einziges Zeichen statt Globus, Kürzel und Wort nebeneinander: Das
   Sprachkürzel liegt auf der Kugel, Längen- und Breitenkreis laufen
   dahinter durch. Damit sagt eine Form beides — dass hier die Sprache
   gewechselt wird und wohin.

   Bewusst keine Flagge: Flaggen stehen für Länder, nicht für Sprachen —
   Englisch gehört nicht Großbritannien und Deutsch nicht Deutschland. */
.sprachwechsel {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
  padding: 0.3rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
}

.sprachwechsel:hover { border-color: var(--akzent); color: var(--text); }

/* Derselbe runde Umriss wie beim Sprachwechsler daneben — die beiden
   gehören zusammen und sollen nicht wie zwei verschiedene Dinge wirken.
   Ein <button> und kein Verweis: Hier wird nichts angesteuert, sondern
   die Ansicht umgeschaltet. */
.themawechsel {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem;
  color: var(--text);
  background: none;
  border: 1px solid var(--rand);
  border-radius: 999px;
  cursor: pointer;
}

.themawechsel:hover { border-color: var(--akzent); }

.thema-zeichen {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--text-leise);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Welches Zeichen zu sehen ist, entscheidet allein das Stylesheet — dann
   stimmt es auch in dem Augenblick, bevor das Skript den Knopf beschriftet.
   Sichtbar ist immer das Ziel des Klicks, nicht der Zustand: solange es
   hell ist, wartet der Mond.

   Die drei Blöcke sind dieselben drei wie ganz oben bei den Farbwerten
   (System / hell erzwungen / dunkel erzwungen) und müssen es auch bleiben. */
.zeichen-sonne { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .zeichen-mond { display: none; }
  :root:not([data-thema="hell"]) .zeichen-sonne { display: block; }
}

:root[data-thema="dunkel"] .zeichen-mond { display: none; }
:root[data-thema="dunkel"] .zeichen-sonne { display: block; }

/* Ohne das gewinnt der Dunkel-Block oben die Sonne zurück, sobald das
   System auf dunkel steht — obwohl der Besucher ausdrücklich hell gewählt
   hat. */
:root[data-thema="hell"] .zeichen-mond { display: block; }
:root[data-thema="hell"] .zeichen-sonne { display: none; }

.sprach-zeichen {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
}

/* Die Kugel trägt das Zeichen, das Gitter ist nur Beiwerk — deshalb
   dünner und etwas zurückgenommen. Beides leiser als die Buchstaben,
   damit die Schrift oben liegt und nicht mit den Linien um Aufmerksamkeit
   ringt. */
.sprach-zeichen .kugel { stroke: var(--text-leise); stroke-width: 1.5; }
.sprach-zeichen .gitter { stroke: var(--text-leise); stroke-width: 1.1; opacity: 0.6; }

/* paint-order macht die Buchstaben lesbar, ohne dass das Gitter dahinter
   aufhören muss: Erst wird die dicke Kontur in Seitenfarbe gezeichnet,
   dann die Füllung darüber. Die Kontur radiert die Linien genau um die
   Buchstaben herum weg — die Schrift sitzt auf der Kugel, statt neben ihr
   zu stehen. */
.sprach-zeichen text {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.3px;
  fill: currentColor;
  stroke: var(--grund);
  stroke-width: 2.6;
  paint-order: stroke;
}

.fussleiste {
  border-top: 1px solid var(--rand);
  margin-top: 3rem;
  padding: 1.75rem 1.25rem 2.5rem;
  color: var(--text-leise);
  font-size: 0.9rem;
  text-align: center;
}

.fussleiste p { margin: 0 0 0.75rem; }

.fussleiste nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}

/* ---------- Held ---------- */

.held {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  text-align: center;
}

.fahne {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--grund-3);
  color: var(--akzent);
  border: 1px solid var(--rand);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.held-text {
  max-width: 40rem;
  margin: 0 auto 2rem;
  font-size: 1.15rem;
  color: var(--text-leise);
}

.held-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
}

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

.knopf {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.knopf-voll {
  background: var(--akzent);
  color: var(--akzent-schrift);
}

.knopf-voll:hover {
  background: var(--akzent-dunkel);
  color: var(--akzent-schrift);
}

.knopf-leer {
  background: transparent;
  color: var(--text);
  border-color: var(--rand);
}

.knopf-leer:hover { border-color: var(--akzent); color: var(--text); }

.knopf-breit { width: 100%; margin-top: 0.5rem; }

.knopf[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Bänder ---------- */

.band {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

.band-schmal { max-width: var(--breite-schmal); }

.band-betont {
  max-width: none;
  background: var(--grund-2);
  border-block: 1px solid var(--rand);
  padding-block: 3rem;
}

.band-betont > * {
  max-width: var(--breite);
  margin-inline: auto;
}

.einleitung {
  color: var(--text-leise);
  margin-bottom: 2rem;
}

.einleitung-breit { max-width: 44rem; }

.fussnote {
  color: var(--text-leise);
  font-size: 0.9rem;
  border-left: 3px solid var(--rand);
  padding-left: 1rem;
  margin-top: 1.5rem;
}

/* Die Klarstellung, dass eine Spende nichts kauft. Steht bewusst vor dem
   Knopf und nicht darunter im Kleingedruckten. */
.klarstellung {
  max-width: 44rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--text-leise);
}

.spenden-knopf { margin-top: 1.5rem; }

/* ---------- Problem und Karten ---------- */

.problem-liste {
  display: grid;
  gap: 1.5rem;
  counter-reset: punkt;
}

.problem-punkt { padding-left: 3rem; position: relative; }

.problem-punkt::before {
  counter-increment: punkt;
  content: counter(punkt);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grund-3);
  color: var(--akzent);
  font-weight: 700;
  font-size: 0.95rem;
}

.problem-punkt h3 { margin-bottom: 0.25rem; }
.problem-punkt p { margin: 0; color: var(--text-leise); }

.raster {
  display: grid;
  gap: 1rem;
}

.karte {
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--schatten);
}

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

.karten-zeichen {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--akzent);
  margin-bottom: 0.6rem;
  display: block;
}

.karte-schlicht {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--akzent);
}

/* ---------- Postfach ---------- */

.postfach-karte {
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.reiter {
  display: flex;
  border-bottom: 1px solid var(--rand);
  background: var(--grund-2);
}

.reiter-knopf {
  flex: 1;
  padding: 0.85rem 0.75rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--text-leise);
  cursor: pointer;
}

.reiter-knopf[aria-selected="true"] {
  color: var(--akzent);
  background: var(--grund);
  border-bottom-color: var(--akzent);
}

.tafel { padding: 1.25rem 1.25rem 0; }

.tafel-text {
  color: var(--text-leise);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

form input[type="text"],
form input[type="email"],
form textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  margin-bottom: 1rem;
  font: inherit;
  color: var(--text);
  background: var(--grund-2);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
}

/* display:block ist kein Schönheitsstrich: Ein textarea ist von Haus aus
   inline-block und sitzt auf der Grundlinie seiner Zeile — darunter bleibt
   Platz für Unterlängen, den es nie braucht. Gemessen am 27.08.2026: unter
   dem Textfeld standen 10,4 px, unter jedem anderen Feld 3,2 px. Der
   Feldhinweis darunter hing damit sichtbar tiefer als seine Geschwister. */
form textarea { display: block; resize: vertical; min-height: 6.5rem; }

form input:focus, form textarea:focus {
  border-color: var(--akzent);
  background: var(--grund);
}

form input[aria-invalid="true"], form textarea[aria-invalid="true"] {
  border-color: var(--schlecht);
}

/* ---- Feld mit Fußleiste ----------------------------------------------
   Ein Hinweis, der IM Feld steht, aber nicht Teil der Eingabe ist.

   Der Trick ist eine Umkehr: Rahmen, Hintergrund und Rundung wandern vom
   Textfeld auf die Hülle darum, das Textfeld selbst wird durchsichtig und
   randlos. Für das Auge ist der Kasten damit einer, für den Browser sind
   es zwei Dinge — und der Hinweis kann weder mitgetippt noch mitgesendet
   werden.

   Die naheliegenden Alternativen scheitern genau daran: Ein Platzhalter
   verschwindet beim ersten Tastendruck, also genau dann, wenn die Warnung
   gebraucht wird. Ein vorbelegtes Feld stünde am Ende in der Datenbank. */
.feld-mit-fuss {
  margin-bottom: 1rem;
  background: var(--grund-2);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  overflow: hidden;
}

.feld-mit-fuss textarea {
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Der eigene Fokusring des Textfeldes wäre jetzt ein Rahmen mitten im
   Kasten. Er geht weg, dafür leuchtet die Hülle — :focus-within ist genau
   dafür da und in jedem Browser seit 2017 vorhanden. */
.feld-mit-fuss textarea:focus { border: 0; background: transparent; }

.feld-mit-fuss:focus-within {
  border-color: var(--akzent);
  background: var(--grund);
}

/* Rot muss die Hülle tragen, weil das Textfeld keinen Rahmen mehr hat.
   :has() kann das erst ab Ende 2023. Wo es fehlt, bleibt der rote Rand
   aus — die Fehlermeldung im Text und der Sprung ins Feld funktionieren
   davon unabhängig weiter. */
.feld-mit-fuss:has(textarea[aria-invalid="true"]) { border-color: var(--schlecht); }

/* Abgesetzt durch eine Haarlinie und einen leiseren Grund: Damit auf den
   ersten Blick klar ist, dass hier das Eingabefeld aufhört und ein Hinweis
   anfängt — und niemand versucht, in die Zeile zu schreiben. */
.feld-fuss {
  margin: 0;
  padding: 0.5rem 0.7rem;
  font-size: 0.825rem;
  line-height: 1.45;
  color: var(--text-leise);
  border-top: 1px solid var(--rand);
  /* color-mix kennen erst Browser ab 2023. Wo es fehlt, fällt die ganze
     Zeile weg und die Leiste bekommt den Grund der Hülle — die Haarlinie
     darüber trennt auch dann noch sichtbar. */
  background: color-mix(in srgb, var(--text-leise) 7%, transparent);
}

.feld-hinweis {
  margin: -0.8rem 0 1rem;
  font-size: 0.825rem;
  color: var(--text-leise);
}

/* .datenschutz-hinweis stand hier bis zum 27.08.2026 — der eigene
   Hinweissatz oben in jedem Reiter. Er ist raus, weil der Einwilligungshaken
   darunter dasselbe sagt und denselben Verweis nennt; zweimal dasselbe im
   selben Formular liest niemand zweimal. Die Regel ist mit ihm gegangen,
   damit kein toter Stil zurückbleibt. */

/* Nur für Vorleseprogramme. Dass ein Verweis einen neuen Tab öffnet, sieht
   man mit den Augen am Sprung — wer die Seite vorgelesen bekommt, steht
   sonst plötzlich woanders, ohne zu wissen warum. Kein display:none: Was
   so versteckt ist, liest auch kein Vorleseprogramm mehr vor. */
.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Verweise in Formulartexten erben sonst das gedämpfte Grau und wären als
   Verweis nicht zu erkennen. Der Unterstrich bleibt: Farbe allein reicht
   nicht, wer sie nicht unterscheiden kann, sieht sonst gar nichts. */
.haken a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Der Browser versteckt [hidden] nur mit display:none in seinem eigenen
   Stylesheet — jede eigene display-Regel schlägt das. .haken setzt display:flex
   und wäre damit sichtbar, obwohl das Attribut dransteht. Diese Regel stellt
   das gerade, ein für alle Mal und für jedes künftige Element. */
[hidden] { display: none !important; }

.haken {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-leise);
  line-height: 1.5;
  cursor: pointer;
}

.haken input {
  margin: 0.2rem 0 0;
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  accent-color: var(--akzent);
}

/* Das Fallenfeld muss im Layout existieren und darf trotzdem niemand sehen.
   display:none würde von manchen Bots erkannt und übersprungen. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#formular > .knopf-breit { margin: 0.25rem 1.25rem 0; width: calc(100% - 2.5rem); }

.meldung {
  margin: 1rem 1.25rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 550;
  min-height: 1.5rem;
}

.meldung:empty { margin: 0 1.25rem 1.25rem; min-height: 0; }
.meldung[data-lage="gut"] { color: var(--gut); }
.meldung[data-lage="schlecht"] { color: var(--schlecht); }

/* Das Versprechen direkt über dem Absendeknopf: "Eine einzige Mail. Kein
   Newsletter. Keine Weitergabe." Es steht dort, wo der letzte Zweifel
   entsteht — im Moment vor dem Klick. Deshalb bewusst klein und leise: Wer
   groß beteuert, nichts Schlimmes vorzuhaben, macht misstrauisch. Der Satz
   soll gelesen werden, nicht rufen.

   Kein eigener Innenabstand: Der Block sitzt in .tafel und bekommt deren
   1,25rem von links und rechts mit. */
.versprechen {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  color: var(--text-leise);
}

/* Der persönliche Satz im Abschnitt "Wo das gerade steht". Er sagt, warum
   es diese App überhaupt gibt, und trägt als einziger Text auf der Seite
   eine Ich-Stimme mit Gewicht. Der Strich links ist derselbe wie bei
   .karte-schlicht — das Auge kennt ihn dann schon als "hier spricht jemand". */
.geschichte {
  margin: 1.25rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--akzent);
  color: var(--text-leise);
  font-size: 0.975rem;
}

/* ---- Nachfrage nach einem Wunsch --------------------------------------
   Erscheint erst, nachdem ein Wunsch abgeschickt wurde: "Soll ich Bescheid
   geben, wenn es losgeht?"

   Der Block liegt bewusst AUSSERHALB des <form> — ein Knopf darin würde das
   Hauptformular abschicken, egal was daneben steht. Er sitzt direkt in
   .postfach-karte und braucht deshalb seinen eigenen Innenabstand; .tafel
   liefert ihn hier nicht mit.

   Abgesetzt durch eine Trennlinie und einen leiseren Grund, damit sofort
   klar ist: Das ist ein zweiter, freiwilliger Schritt und keine Fortsetzung
   des Formulars, das gerade abgeschickt wurde. */
.nachfrage {
  padding: 1.25rem;
  border-top: 1px solid var(--rand);
  background: var(--grund-2);
}

.nachfrage h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

/* Der Grund der Hülle ist hier schon --grund-2. Bekäme das Eingabefeld
   denselben, verschwände es darin. */
.nachfrage input[type="email"] { background: var(--grund); }

.nachfrage .haken { margin-bottom: 0.9rem; }

/* Nebeneinander, solange Platz ist; auf schmalen Geräten untereinander.
   "Nein danke" steht bewusst als vollwertiger Knopf daneben und nicht als
   kleiner Verweis am Rand: Wer ablehnen will, soll das genauso leicht
   können wie zusagen. Ein versteckter Ausgang wäre genau die Masche, gegen
   die diese Seite mit ihrem Datenschutz-Versprechen antritt. */
.nachfrage-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

.nachfrage-knoepfe .knopf { flex: 1 1 10rem; }

.nachfrage .meldung { margin: 0.9rem 0 0; }
.nachfrage .meldung:empty { margin: 0; }

/* ---------- Rechtstexte ---------- */

.rechtstext {
  max-width: var(--breite-schmal);
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}

.rechtstext h2 {
  font-size: 1.15rem;
  margin-top: 2rem;
}

.rechtstext dt { font-weight: 650; margin-top: 1rem; }
.rechtstext dd { margin: 0.25rem 0 0; color: var(--text-leise); }

.zeilenweise { white-space: pre-line; }

.platzhalter-hinweis {
  background: var(--grund-3);
  border: 1px dashed var(--akzent);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  color: var(--text-leise);
}

.zurueck { margin-top: 2.5rem; }

/* ---------- Fehlerseite ----------------------------------------------
   Bewusst kurz und ohne Angebot zum Weiterstöbern: Es gibt auf dieser Seite
   nur eine Handvoll Unterseiten, eine Liste davon wäre keine Hilfe, sondern
   nur Text. Ein Weg zurück reicht. */
.fehlerseite {
  max-width: var(--breite-schmal);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  text-align: center;
}

/* Groß, aber leise: Die Zahl trägt die Seite gestalterisch, sagt inhaltlich
   aber nichts, was die Überschrift darunter nicht besser sagt. Deshalb liegt
   sie in der Farbe des Hintergrunds-Kontrasts und ist für Vorleseprogramme
   ausgeblendet — sonst hörte man "vierhundertvier" vor der eigentlichen
   Nachricht. */
.fehler-zahl {
  margin: 0;
  font-size: clamp(4rem, 18vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--rand);
}

.fehlerseite h1 {
  margin: 0.5rem 0 0.75rem;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
}

.fehler-text {
  color: var(--text-leise);
  margin: 0 auto 2rem;
  max-width: 32rem;
}

.fehler-wege { margin: 0 0 2.5rem; }

.fehler-nachsatz {
  font-size: 0.875rem;
  color: var(--text-leise);
  margin: 0 auto;
  max-width: 30rem;
}

/* ---------- Breitere Bildschirme ---------- */

@media (min-width: 34rem) {
  .problem-liste { gap: 1.75rem; }
  .tafel, .meldung, #formular > .knopf-breit { padding-inline: 1.75rem; }
  .tafel { padding-inline: 1.75rem; }
  /* Muss mitwandern, sonst steht die Nachfrage in derselben Karte weiter
     innen als das Formular direkt darüber — und die linke Kante bricht. */
  .nachfrage { padding-inline: 1.75rem; }
  .meldung { margin-inline: 1.75rem; }
  #formular > .knopf-breit { margin-inline: 1.75rem; width: calc(100% - 3.5rem); padding-inline: 1.4rem; }
}

@media (min-width: 48rem) {
  body { font-size: 1.09375rem; }
  .held { padding: 3.5rem 1.25rem 4rem; }
  .band { padding-block: 3.5rem; }
  .raster { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .raster-eng { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; }
  .problem-liste { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Nach oben ---------- */

/* Erscheint erst nach einer Bildschirmhöhe (siehe nachoben.js) und sitzt
   unten rechts, wo der Daumen ihn auf dem Handy von selbst trifft.
   visibility statt display, damit der Wechsel überblenden kann — und
   damit der Knopf im ausgeblendeten Zustand weder anklickbar ist noch
   von Vorleseprogrammen gefunden wird. */
.nach-oben {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--akzent-schrift);
  box-shadow: 0 2px 6px rgba(23, 32, 42, 0.18), 0 8px 20px rgba(23, 32, 42, 0.14);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s, background-color 0.18s ease;
}

.nach-oben.sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nach-oben:hover { background: var(--akzent-dunkel); }

.nach-oben svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
}

/* Auf dem Handy liegt der Knopf sonst genau auf dem Absende-Knopf des
   Formulars, wenn man dort angekommen ist. Etwas kleiner und näher an
   die Ecke gerückt gibt das genug Luft. */
@media (max-width: 30rem) {
  .nach-oben {
    right: 0.9rem;
    bottom: 0.9rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}