/* Das öffentliche Auftreten von HelloMates: Startseite, Rechtstexte, Löschseite.
 *
 * **Warum ein eigenes Blatt neben `styles.css`.** Das alte ist für die
 * Testkonsole entstanden - eine Werkbank mit Knöpfen, Tabellen und Protokoll.
 * Die öffentlichen Seiten haben davon geerbt, was sie nie brauchten, und es
 * fehlte, was sie brauchen: Fließtext, den man lesen kann. Am deutlichsten am
 * Rechtstext zu sehen - er stand in `.hint`, also klein und grau, weil das in
 * einer Konsole die Nebenbemerkung ist. Zehn Abschnitte Nutzungsbedingungen in
 * Nebenbemerkungsschrift liest niemand.
 *
 * `styles.css` bleibt der Konsole. Beides in einem Blatt zu führen hieße, jede
 * Änderung am Auftritt gegen ein Werkzeug zu prüfen, das nie jemand ausliefert.
 *
 * **Keine Schrift und kein Skript von fremden Servern.** Jeder externe Wirt ist
 * ein Empfänger im Sinne der DSGVO: eine eingebundene Schriftart übermittelt
 * die IP-Adresse jeder besuchenden Person und gehört damit in die
 * Datenschutzerklärung. Deshalb Systemschriften und eingebettete Zeichen.
 * `tests/web/fremde-hosts.test.mjs` hält das fest.
 */

/* --- Farben und Maße ---------------------------------------------------- */

:root {
  /* Das Grün ist dasselbe wie in der App und im Zeichen (`tools/brand_mark.py`).
     Eine Marke, die auf der Seite anders aussieht als im Symbol auf dem
     Startbildschirm, ist zwei Marken. */
  --brand: #1f6f5c;
  --brand-deep: #144b3e;
  --brand-tint: #e7f1ed;

  /* **Zwei Rollen, zwei Farben - und das ist der Grund.** `--brand-ink` ist die
     Schrift auf einer *gefüllten* Fläche in Markenfarbe; im Dunkelmodus wird
     das Grün hell, also muss diese Schrift dunkel werden. `--on-deep` ist die
     Schrift auf dem *dunklen* Band, und die bleibt in beiden Modi hell. Beide
     an einer Farbe zu führen ergab gemessene 1,13 zu 1: dunkelgrüne Schrift auf
     dunkelgrünem Grund, unsichtbar für alle. */
  --brand-ink: #ffffff;
  --on-deep: #ffffff;

  /* Warmes Papier statt reinem Weiß: der Auftritt soll freundlich wirken und
     nicht wie ein Formular. */
  --paper: #fbfaf7;
  --surface: #ffffff;
  --line: #e4e1d9;
  --ink: #14211d;
  --ink-soft: #55635e;

  --danger: #a3242b;
  --danger-soft: #fbe9ea;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(20 33 29 / 5%), 0 10px 30px -12px rgb(20 33 29 / 18%);
  /* Für die Gerätebilder: sie sollen über der Seite stehen, nicht auf ihr
     liegen. Derselbe Schatten wie bei einer Kachel wäre zu flach. */
  --shadow-tief: 0 2px 8px rgb(20 33 29 / 6%), 0 34px 70px -28px rgb(20 33 29 / 38%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #57bfa2;
    --brand-deep: #0f2b24;
    --brand-tint: #16302a;
    --brand-ink: #05201a;
    --on-deep: #e2ece8;

    --paper: #0e1513;
    --surface: #161e1b;
    --line: #27332f;
    --ink: #e9efec;
    --ink-soft: #a3b2ac;

    --danger: #f2a1a5;
    --danger-soft: #33191b;

    --shadow: 0 1px 2px rgb(0 0 0 / 45%);
    --shadow-tief: 0 2px 8px rgb(0 0 0 / 40%), 0 34px 70px -28px rgb(0 0 0 / 70%);
  }
}

/* --- Grundlagen --------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* **Steht vor allem, was `display` setzt.** Die Löschseite blendet ihre
   Bestätigung über das Attribut `hidden` aus; ein späteres `display: grid` auf
   derselben Kachel würde sie wieder sichtbar machen - und zwar genau den Teil,
   der ein Konto löscht. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  /* Verhindert die einzelne Silbe in der letzten Zeile. Kostet nichts, wo der
     Browser es nicht kann - dort bricht er wie bisher. */
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

strong {
  font-weight: 650;
}

/* Der Sprung an den Inhalt: unsichtbar, bis jemand mit der Tastatur ankommt. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 0.7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

/* --- Aufteilung --------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.shell--narrow {
  max-width: 46rem;
}

/* Fließtext bricht bei rund 70 Zeichen um - darüber verliert das Auge beim
   Zeilenwechsel die Spur. */
.prose {
  max-width: 38rem;
}

.band {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.band--tint {
  background: var(--brand-tint);
}

/* Nach einem Klick in der Navigation klebte die Überschrift am oberen Rand. */
.band[id],
.panel[id] {
  scroll-margin-top: 1.5rem;
}

.band--deep {
  background: var(--brand-deep);
  color: var(--on-deep);
}

.band--deep a {
  color: inherit;
}

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

.site-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.wordmark svg {
  width: 30px;
  height: 30px;
  color: var(--brand);
  flex: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: 0.95rem;
}

/* 44 Pixel hoch, damit der Finger trifft - ein Textlink in einer Zeile ist auf
   dem Telefon sonst kaum zu erwischen. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--brand-tint);
  color: var(--ink);
}

/* --- Startseite: Aufmacher ---------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* **Unten weniger als oben.** Darunter folgt sofort ein Band mit eigener
     Polsterung; beide zusammen ergaben rund 190 Pixel Leere zwischen den
     Merkmalen und der nächsten Überschrift. Der Abstand gehört einmal gesetzt,
     nicht zweimal addiert. */
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
}

/* Ein weicher Schein in Markenfarbe hinter der Beispielkachel.
 *
 * **Er ersetzt das gespenstische Zeichen, das hier stand.** Das Zeichen
 * brauchte Platz, den der Aufmacher nicht hat: oben rechts lag die Kachel,
 * unten rechts ihre Bildunterschrift, und wohin man es auch schob, es
 * verschwand halb hinter etwas Undurchsichtigem und sah aus wie abgeschnitten.
 * Ein Verlauf hat dieses Problem nicht - er hat keine Form, die man
 * anschneiden kann. Das Zeichen steht weiterhin im Kopf der Seite und im
 * Symbol; eine dritte, blasse Kopie hat nie etwas dazugetan.
 *
 * Die Maße sind so gewählt, dass der Verlauf **innerhalb** des Aufmachers auf
 * null gefallen ist. Sonst schnitte ihn das `overflow: hidden` an und die
 * Kante wäre wieder da, diesmal als gerade Linie quer über die Seite.
 */
.hero::before {
  content: '';
  position: absolute;
  inset: -8rem -6rem auto auto;
  width: min(38rem, 46vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at center,
    color-mix(in oklab, var(--brand) 16%, transparent),
    transparent 60%
  );
  pointer-events: none;
}

.hero-grid {
  /* **Über das Zeichen, nicht darunter.** Das Zeichen ist absolut gesetzt, der
     Rost daneben nicht - ohne eigene Ebene läge es vor dem Text. Bei 6 Prozent
     Deckkraft sieht man das kaum und liest es trotzdem schlechter. */
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

@media (max-width: 56rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.4rem);
  letter-spacing: -0.04em;
}

.lead {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.55;
}

/* Die drei Merkmale, die vor jedem weiteren Satz stehen müssen. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* --- Gerätebilder ------------------------------------------------------- */

/* **Echte Bildschirme statt nachgebauter Kacheln.** Vorher stand im Aufmacher
 * eine gezeichnete Aktivitätskachel - hübsch, aber eine Behauptung darüber, wie
 * die App aussieht, statt ein Beleg. Die Bilder unter `web/bilder/` sind die
 * echten Aufnahmen aus `store/screenshots/android/`, dieselben, aus denen auch
 * der Film gebaut ist. Nur die Inhalte darin sind Beispieldaten, und das steht
 * unter jedem Bild.
 *
 * Als WebP mit 800 Pixel Breite: 182 KB für alle vier zusammen, gegenüber
 * 1,0 MB als PNG. Alles außer dem ersten lädt erst beim Heranscrollen.
 */
.geraet {
  margin: 0;
  width: min(100%, 19rem);
  margin-inline: auto;
}

.geraet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(1.3rem, 3vw, 1.9rem);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-tief);
  background: var(--surface);
}

.geraet figcaption {
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

/* --- Die drei Schritte als Reihen --------------------------------------- */

/* **Ein Gedanke je Reihe, im Wechsel links und rechts.** Vorher standen die
 * drei Schritte als schmale Spalten nebeneinander, jede ein Absatz von vier
 * Zeilen - man liest sie quer und behält keinen. Als Reihen mit dem
 * dazugehörigen Bildschirm daneben liest man sie nacheinander, und jede hat
 * Platz für den einen Satz, auf den es ankommt.
 */
.flow {
  display: grid;
  gap: clamp(3.5rem, 9vw, 7rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.flow-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* Der Wechsel: bei jeder zweiten Reihe steht das Bild links. Ohne ihn läuft
   der Blick immer denselben Weg und die Seite wirkt wie eine Tabelle. */
.flow-row:nth-child(even) .geraet {
  order: -1;
}

@media (max-width: 52rem) {
  .flow-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Einspaltig gehört das Bild immer unter den Text - sonst stünde bei jeder
     zweiten Reihe das Bild vor der Überschrift, zu der es gehört. */
  .flow-row:nth-child(even) .geraet {
    order: 0;
  }
}

.flow-nr {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 700;
  /* Gesperrt, aber nicht so weit, dass "01" als "0 1" gelesen wird. */
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.flow-text h3 {
  font-size: clamp(1.6rem, 3.8vw, 2.4rem);
  letter-spacing: -0.03em;
}

.flow-text p {
  margin-top: 0.9rem;
  max-width: 32rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.6;
}

/* --- Einblenden beim Scrollen ------------------------------------------- */

/* **Nur wenn JavaScript läuft.** Die Klasse `js` setzt ein Einzeiler ganz oben
 * im Dokument. Stünde `opacity: 0` ungeschützt im Blatt, wäre die halbe Seite
 * für jeden unsichtbar, bei dem das Skript nicht ankommt - und das ist der
 * schlechteste Fehler, den eine Einblendung machen kann.
 *
 * Bei `prefers-reduced-motion` blendet `startseite.js` alles sofort ein, statt
 * es zu bewegen.
 */
.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .reveal.sichtbar {
  opacity: 1;
  transform: none;
}

/* --- Der Film als Seitenkopf -------------------------------------------- */

/* **Der Film eröffnet die Seite, er steht nicht in ihr.**
 *
 * Vorher war er eine Kachel zwischen zwei weißen Flächen: Kopfleiste darüber,
 * Bildunterschrift darunter, ein Knopf obendrauf. Drei Kanten, an denen man
 * sieht, dass hier etwas eingesetzt wurde. Jetzt beginnt das Dokument mit dem
 * Film, und die Kopfzeile liegt darauf - es gibt keine Fuge mehr, an der er
 * anfangen könnte.
 *
 * Die drei Bedingungen für selbsttätiges Abspielen gelten weiter: eine eigene
 * leichte Fassung (720p, ohne Ton, 0,8 MB), Ruhe bei `prefers-reduced-motion`,
 * und anhalten können - Letzteres jetzt durch einen Klick auf den Film selbst
 * statt durch einen sichtbaren Knopf (siehe `startseite.js`).
 */
.filmstrip {
  position: relative;
  margin: 0;
}

.filmstrip-frame {
  position: relative;
  /* Derselbe Grund wie im Film - falls je ein Rand entsteht, sieht ihn niemand. */
  background: #061713;
  line-height: 0;
}

.filmstrip video {
  display: block;
  width: 100%;
  height: auto;
  /* Höher als das Fenster wäre der Film keine Eröffnung mehr, sondern eine
     Wand, an der man erst vorbeiscrollen muss. `cover` statt `contain`: lieber
     ein paar Pixel am Rand beschnitten als schwarze Balken - und beschnitten
     wird nur auf sehr breiten, sehr flachen Fenstern überhaupt. */
  max-height: 100svh;
  object-fit: cover;
  cursor: pointer;
}

/* Ein weicher Schatten unter der Kopfzeile: der Film wird an manchen Stellen
   hell (die Bildschirme sind fast weiß), und die Navigation muss auf jedem
   Bild lesbar bleiben. Ein Verlauf statt einer Fläche, damit man ihn nicht als
   Leiste wahrnimmt. */
.filmstrip-frame::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  background: linear-gradient(rgb(4 16 13 / 72%), rgb(4 16 13 / 0%));
  pointer-events: none;
}

.filmstrip figcaption {
  padding: 0.9rem clamp(1.25rem, 5vw, 3rem) 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
  opacity: 0.75;
}

/* --- Kopfzeile über dem Film -------------------------------------------- */

/* Nur auf den beiden Startseiten. Impressum, Datenschutz und Löschseite haben
   keinen Film, dort bleibt die Kopfzeile, wie sie war. */
@media (min-width: 56.01rem) {
  .shell--film {
    position: absolute;
    inset: 0 0 auto 0;
    margin-inline: auto;
    z-index: 5;
  }

  .shell--film .wordmark,
  .shell--film .wordmark svg {
    color: #f4f2ea;
  }

  .shell--film .site-nav a {
    color: rgb(244 242 234 / 82%);
  }

  .shell--film .site-nav a:hover {
    background: rgb(255 255 255 / 14%);
    color: #ffffff;
  }
}

/* --- Merkmalfarben ------------------------------------------------------ */

/* Die Farben sind dieselben wie in der App (`event_labels.dart`). Jede Kachel
   setzt ihre Farbe über `--c`; `color-mix` macht daraus den blassen Grund, ohne
   dass hier achtzehn Paare stehen müssen. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--brand)) 12%, var(--surface));
  /* 60 zu 40 und nicht etwa 80 zu 20: nachgerechnet erreicht Orange auf seinem
     eigenen blassen Grund erst so die geforderten 4,5 zu 1. Bei 80 Prozent
     sieht es kräftiger aus und ist unlesbar für alle, die es nötig haben. */
  color: color-mix(in srgb, var(--c, var(--brand)) 60%, var(--ink));
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .chip {
    background: color-mix(in srgb, var(--c, var(--brand)) 22%, var(--surface));
    color: color-mix(in srgb, var(--c, var(--brand)) 45%, var(--ink));
  }
}

/* --- Abschnitte --------------------------------------------------------- */

/* Überschriften tragen die Seite. Vorher waren sie kaum größer als der
   Fließtext darunter - der Blick fand keinen Halt beim Scrollen. */
.section-title {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -0.035em;
}

.section-intro {
  margin-top: 0.8rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Drei Schritte, groß nummeriert: die Zahl trägt die Reihenfolge, nicht der
   Satzbau. */
.steps {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: schritt;
}

/* **Die Linie oben macht aus drei Absätzen drei Spalten.** Ohne sie schweben
   die Zahlen im Weiß und der Blick sucht, wo ein Schritt anfängt und der
   nächste aufhört. Als Oberlinie statt als Verbindungsstrich zwischen den
   Zahlen, weil das Raster je nach Breite ein-, zwei- oder dreispaltig ist -
   ein durchgehender Strich zeigte dann ins Leere. */
.steps li {
  counter-increment: schritt;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.steps li::before {
  content: counter(schritt);
  display: block;
  margin-bottom: 0.5rem;
  color: var(--brand);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.steps h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.steps p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.panel {
  padding: clamp(1.3rem, 3vw, 1.8rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.panel h3 {
  font-size: 1.2rem;
  margin-bottom: 0.7rem;
}

.panel p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* Aufzählungen mit eigenem Zeichen: der Punkt sitzt sonst auf der Grundlinie
   der ersten Zeile und rutscht bei zwei Zeilen aus dem Blick. */
.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brand);
}

.ticks li:last-child {
  margin-bottom: 0;
}

/* Die Aussage, die den Dienst von der Nachbarschaft abgrenzt, steht allein. */
.statement {
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.statement + p {
  margin-top: 1rem;
  font-size: 1.05rem;
  opacity: 0.9;
}

/* --- Abschluss der Startseite ------------------------------------------- */

/* **Die wichtigste Frage steht am Ende, also darf sie nicht wie eine Fußnote
   aussehen.** Wer bis hierher liest, will wissen: wo kriege ich das? Die
   Antwort ist heute "noch nirgends" - das ist kein Grund, sie klein zu setzen.
   Als getönte Fläche über die volle Breite, mit der Adresse als eigenem,
   anfassbarem Ziel statt als Link mitten im Satz. */
.closing {
  display: grid;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.4rem);
  background: var(--brand-tint);
  border-radius: var(--radius);
}

@media (max-width: 46rem) {
  .closing {
    grid-template-columns: minmax(0, 1fr);
  }
}

.closing h3 {
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  margin-bottom: 0.4rem;
}

.closing p {
  margin: 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
}

/* Die Adresse als Fläche, nicht als unterstrichenes Wort: sie ist der einzige
   Weg, uns heute zu erreichen. 44 Pixel hoch, damit der Finger trifft. */
.closing-mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.closing-mail:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-ink);
}

/* --- Hinweiskachel ------------------------------------------------------ */

.note {
  padding: 1.3rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
}

.note h2,
.note h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}

.note p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

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

.site-foot {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
}

.foot-links a:hover {
  background: var(--brand-tint);
}

.site-foot p {
  margin: 0;
}

/* --- Rechtstexte und Unterseiten ---------------------------------------- */

.page-head {
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.page-head h1 {
  font-size: clamp(1.9rem, 5vw, 2.9rem);
}

.page-head .lead {
  margin-top: 0.7rem;
}

.doc {
  padding-bottom: clamp(2.5rem, 7vw, 4rem);
}

/* Ein Abschnitt, keine Kachel: Rechtstext liest sich als durchlaufende Seite
   besser denn als Stapel von Karten. Die Linie trennt, der Rest ist Ruhe. */
.doc-section {
  /* Gemessen bei 1280 Pixeln: 42rem ergaben rund 79 Zeichen je Zeile, 39rem
     ergeben rund 73. Darüber verliert das Auge beim Zeilenwechsel die Spur -
     und Rechtstext ist die längste Strecke am Stück auf diesem Auftritt. */
  max-width: 39rem;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}

.doc-section:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.doc-section h2 {
  font-size: 1.35rem;
  margin-bottom: 0.9rem;
}

.doc-section h3 {
  font-size: 1.05rem;
  margin: 1.4rem 0 0.5rem;
}

.doc-section ul {
  margin: 0 0 1em;
  padding-left: 1.3rem;
}

.doc-section li {
  margin-bottom: 0.45rem;
}

.doc-section li:last-child {
  margin-bottom: 0;
}

/* --- Formular (Löschseite) ---------------------------------------------- */

.form-card {
  max-width: 34rem;
  padding: clamp(1.3rem, 4vw, 2rem);
  margin-bottom: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-card h2 {
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
}

.grid {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}

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

input[type='email'],
input[type='password'] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}

.checkbox {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1.2rem 0;
  font-size: 1rem;
  font-weight: 400;
}

.checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--brand);
  flex: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

button {
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--brand);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

button.danger {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

/* Sprachwahl als sichtbarer Umschalter: beide Sprachen stehen da, damit niemand
   raten muss, ob es die Seite auf Englisch gibt. */
.langs {
  display: flex;
  gap: 0.35rem;
}

.langs button {
  min-height: 36px;
  padding: 0.3rem 0.7rem;
  font-size: 0.88rem;
}

.langs button[aria-pressed='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.head-side {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  align-items: center;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.badge {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Meldungen: Erfolg und Fehler müssen ohne Farbwahrnehmung unterscheidbar
   bleiben - deshalb trägt der Fehler zusätzlich Fettschrift und ein Zeichen. */
.hint {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.hint.error {
  color: var(--danger);
  font-weight: 650;
}

.hint.error::before {
  content: '! ';
  font-weight: 700;
}

/* --- Druck -------------------------------------------------------------- */

/* Rechtstexte werden ausgedruckt und abgeheftet. Auf Papier ist die Navigation
   nur Ballast, und Weiß auf Grün kostet eine Tonerpatrone. */
@media print {
  .site-head,
  .site-nav,
  .skip {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .band--deep,
  .band--tint {
    background: none;
    color: #000;
  }

  a {
    color: #000;
  }

  .doc-section {
    break-inside: avoid;
  }
}