/* ── Das Fundament der Webseite ───────────────────────────────────────
 *
 * Die App hat ein fertiges, diszipliniertes Gestaltungssystem. Hier wird
 * es fortgesetzt, nicht daneben ein zweites erfunden: dieselben Farben
 * (Palette.swift), dieselbe Schrift in denselben Graden
 * (Typography.swift), dasselbe Raster und derselbe eine Radius
 * (Metrics.swift), dieselben zwei Schatten (Elevation.swift) und
 * dieselben zwei Bewegungskurven (Motion.swift).
 *
 * Wer hier etwas ändert, ändert es auch dort – sonst laufen App und
 * Webseite auseinander, und das sieht man sofort.
 *
 * Kein Framework. Eine Datei, ein Jahr Cache, ein Netzabruf.
 */

/* ── 1. Die Schrift ───────────────────────────────────────────────────
 *
 * Inter, selbst ausgeliefert. **Nicht** über Google Fonts: das wäre bei
 * jedem Seitenaufruf eine Übertragung der Besucher-IP in die USA, in
 * Deutschland der klassische Abmahngrund und ohne Einwilligung nicht
 * zulässig (LG München I, 20.01.2022 – 3 O 17493/20).
 *
 * Aus den 630-KB-Schriftdateien der App sind je 21 KB geworden: nur
 * Latein und die Zeichen, die hier vorkommen. `swap` zeigt sofort die
 * Systemschrift und tauscht nach – lesen können soll man von Anfang an.
 */
@font-face {
  font-family: "Inter";
  src: url("/schrift/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/schrift/inter-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/schrift/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/schrift/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Die Werte ─────────────────────────────────────────────────────
 *
 * Hell ist der Grundfall. Dunkel überschreibt nur die Farben, sonst
 * nichts – Abstände und Radien sind in beiden gleich.
 */
:root {
  /* Akzent und Fläche */
  --akzent: #196c7b;
  --akzent-leise: #e2f1f3;
  --auf-gefuellt: #ffffff;

  --grund: #fdfcfb;
  --flaeche: #ffffff;
  --flaeche-vertieft: #f4f2ef;
  --kopf-grund: #f4f2ef;
  --bildflaeche: #efece7;

  /* Drei Textstufen, mehr braucht niemand */
  --text: #1a1815;
  --text-zweit: #6b6560;
  /* ── Zwei Werte, die von der App abweichen ──────────────────────────
   *
   * Nachgerechnet gegen den Grund #fdfcfb:
   *
   *   App-Wert #9b948e (dritte Textstufe)  →  2,92 : 1
   *   App-Wert #b06a1e (Warnung)           →  4,16 : 1
   *
   * WCAG 2.1 AA verlangt für Text unter 18 pt mindestens 4,5 : 1, und
   * genau in dieser Größe stehen beide: „In Vorbereitung", die Zeile im
   * Fuß, „vorher nötig" auf einer Fakten-Kachel.
   *
   * Hier stehen deshalb die nächstgelegenen Werte, die bestehen – auch
   * auf der vertieften Fläche, wo der Abstand am kleinsten ist:
   *
   *   #6f695f  5,31 : 1 auf Grund, 4,87 : 1 auf vertiefter Fläche
   *   #9d5c19  5,15 : 1 auf Grund, 4,72 : 1 auf vertiefter Fläche
   *
   * **Die App hat dasselbe Problem.** Ihre Palette trägt beide Werte
   * unverändert, und dieselbe Anforderung gilt dort. Das gehört dort
   * geprüft; hier wird es nicht abgewartet, weil eine Webseite mit
   * unlesbarem Kleingedruckten auch bei Google durchfällt. */
  --text-dritt: #6f695f;

  --erfolg: #2d6a4f;
  --warnung: #9d5c19;
  --trennlinie: #e8e4df;

  --schatten-weich: 0 3px 10px rgb(26 24 21 / 0.07);
  --schatten-stark: 0 10px 24px rgb(26 24 21 / 0.13);

  /* Raster: 4 px, wie in der App */
  --haar: 4px;
  --eng: 8px;
  --innen: 12px;
  --rand: 16px;
  --luecke: 24px;
  --abschnitt: 32px;
  --seite: 48px;

  /* Ein Radius für alles. Die App hat genau einen, und das ist der
   * Grund, warum sie ruhig wirkt. */
  --radius: 20px;
  --radius-klein: 10px;

  /* Zwei Kurven: Antwort auf eine Handlung, Wechsel eines Zustands */
  --antwort: 220ms cubic-bezier(0.32, 0.72, 0, 1);
  --zustand: 340ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Die Breite, in der Text lesbar bleibt, und die der Inhaltsspalte */
  --lesebreite: 34rem;
  --seitenbreite: 72rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --akzent: #6cc5d0;
    --akzent-leise: #1b3337;
    --auf-gefuellt: #121110;

    --grund: #121110;
    --flaeche: #1e1c1a;
    --flaeche-vertieft: #191817;
    --kopf-grund: #121110;
    --bildflaeche: #1c1a18;

    --text: #f5f3f0;
    --text-zweit: #a8a29c;
    /* App-Wert #78726c: 3,97 : 1. Siehe die Begründung oben. */
    --text-dritt: #948e86;

    --erfolg: #5fbf8f;
    --warnung: #e0a050;
    --trennlinie: #2e2b28;

    --schatten-weich: 0 3px 10px rgb(0 0 0 / 0.44);
    --schatten-stark: 0 10px 24px rgb(0 0 0 / 0.6);
  }
}

/* Derselbe Satz noch einmal für den Schalter im Kopf der Seite. Er muss
 * in beide Richtungen gewinnen: dunkel auf einem hellen Gerät ebenso wie
 * hell auf einem dunklen. */
:root[data-thema="dunkel"] {
  --akzent: #6cc5d0;
  --akzent-leise: #1b3337;
  --auf-gefuellt: #121110;

  --grund: #121110;
  --flaeche: #1e1c1a;
  --flaeche-vertieft: #191817;
  --kopf-grund: #121110;
  --bildflaeche: #1c1a18;

  --text: #f5f3f0;
  --text-zweit: #a8a29c;
  --text-dritt: #948e86;

  --erfolg: #5fbf8f;
  --warnung: #e0a050;
  --trennlinie: #2e2b28;

  --schatten-weich: 0 3px 10px rgb(0 0 0 / 0.44);
  --schatten-stark: 0 10px 24px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}
:root[data-thema="hell"] { color-scheme: light; }

/* ── 3. Grundlage ─────────────────────────────────────────────────────*/

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.52;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Zahlen mit gleicher Breite: Uhrzeiten untereinander springen sonst. */
  font-variant-numeric: tabular-nums;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

a { color: inherit; }

/* Der Fokusrahmen ist keine Zierde, sondern für alle, die mit der
 * Tastatur navigieren, die einzige Ortsangabe. Er wird nie entfernt,
 * nur schöner gemacht. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: var(--radius-klein);
}

/* Nur für Vorlesehilfen sichtbar. */
.nur-lesehilfe {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Der Sprung an den Inhalt, erste Station der Tastaturbedienung. */
.sprung {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 10;
  padding: var(--innen) var(--rand);
  background: var(--flaeche);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-stark);
  transition: top var(--antwort);
}
.sprung:focus { top: var(--rand); }

/* ── 4. Die Stufenleiter ──────────────────────────────────────────────
 *
 * Dieselben acht Grade wie in der App – 31, 25, 20, 16, 16, 13, 13, 11 –
 * mit denselben Laufweiten. Die Zeilenhöhen sind aus SwiftUIs
 * `lineSpacing` umgerechnet (dort Zusatzraum, hier Gesamthöhe).
 */
.schau {
  font-size: clamp(25px, 1.4rem + 1.6vw, 31px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.019em;
  margin: 0;
}
.titel {
  font-size: clamp(22px, 1.2rem + 1vw, 25px);
  font-weight: 700;
  line-height: 1.29;
  letter-spacing: -0.016em;
  margin: 0;
}
.abschnitt-titel {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.31;
  letter-spacing: -0.01em;
  margin: 0;
}
.karten-titel {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.34;
  margin: 0;
}
.fliesstext { font-size: 16px; line-height: 1.52; margin: 0; }
.fliesstext-stark { font-size: 16px; font-weight: 500; line-height: 1.52; margin: 0; }
.detail {
  font-size: 13px;
  line-height: 1.44;
  color: var(--text-zweit);
  margin: 0;
}
.detail-stark { font-size: 13px; font-weight: 500; line-height: 1.44; margin: 0; }
.kleinst {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.39;
  letter-spacing: 0.018em;
  margin: 0;
}

.leise { color: var(--text-zweit); }
.leiser { color: var(--text-dritt); }

/* Ein Text, der nach zwei bzw. drei Zeilen aufhört – nicht mit „…“ im
 * Markup, sondern vom Browser gesetzt, damit die Länge vom Platz
 * abhängt und nicht von einer geratenen Zeichenzahl. */
.zeilen-2, .zeilen-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zeilen-2 { -webkit-line-clamp: 2; }
.zeilen-3 { -webkit-line-clamp: 3; }

/* ── 5. Aufbau der Seite ──────────────────────────────────────────────*/

.blatt {
  width: 100%;
  max-width: var(--seitenbreite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
@media (min-width: 48rem) {
  .blatt { padding-inline: var(--luecke); }
}

.stapel   { display: flex; flex-direction: column; gap: var(--luecke); }
.stapel-eng { display: flex; flex-direction: column; gap: var(--eng); }
.reihe    { display: flex; align-items: center; gap: var(--eng); flex-wrap: wrap; }

section + section { margin-top: var(--abschnitt); }

/* Das Raster wächst mit, statt zu wischen. Am Schreibtisch ist
 * waagerechtes Scrollen eine Zumutung; die App darf das, weil dort ein
 * Daumen wischt. */
.raster {
  display: grid;
  gap: var(--rand);
  grid-template-columns: 1fr;
}
@media (min-width: 30rem) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .raster { grid-template-columns: repeat(4, 1fr); } }

/* Die großen Karten: zwei statt vier Spalten, sie tragen mehr. */
.raster-gross { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .raster-gross { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .raster-gross { grid-template-columns: repeat(3, 1fr); } }

/* ── 6. Die Karte ─────────────────────────────────────────────────────
 *
 * Fläche + Haarlinie + weicher Schatten. Die Begründung aus
 * Elevation.swift gilt im Browser unverändert: der Schatten allein
 * trägt auf dunklem Grund nicht, die Linie allein wirkt flach.
 */
.karte {
  background: var(--flaeche);
  border: 0.5px solid var(--trennlinie);
  border-radius: var(--radius);
  box-shadow: var(--schatten-weich);
}

.karte-vertieft {
  background: var(--flaeche-vertieft);
  border-radius: var(--radius);
}

/* ── 7. Die Kachel ────────────────────────────────────────────────────
 *
 * Die Regel aus der App: **das Bild ist die Kachel.** Der Text steht
 * darunter, ohne eigenen Rahmen; zwei ineinandergeschachtelte Rahmen
 * wirken unruhig. Oben links der Termin, unten links höchstens **ein**
 * Abzeichen, unten rechts der KI-Hinweis.
 */
.kachel {
  display: flex;
  flex-direction: column;
  gap: var(--eng);
  text-decoration: none;
  color: inherit;
}

.kachel-bild {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bildflaeche);
  box-shadow: var(--schatten-weich);
}
.kachel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--zustand);
}
@media (hover: hover) {
  .kachel:hover .kachel-bild img { transform: scale(1.03); }
}
.kachel:active .kachel-bild { transform: scale(0.97); transition: transform var(--antwort); }

/* Die Termin-Pille oben links. Sie liegt auf dem Bild und muss auf
 * jedem Bild lesbar bleiben – daher die Ebene aus Unschärfe und Deckung
 * statt reiner Transparenz. */
.pille {
  position: absolute;
  top: var(--innen);
  left: var(--innen);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px var(--eng);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.88);
  color: #1a1815;
  backdrop-filter: blur(12px) saturate(140%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.018em;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
}

/* Höchstens eines je Kachel, in dieser Rangfolge:
 * Anzeige ▸ Stadtbekannt ▸ Beliebt. */
.abzeichen {
  position: absolute;
  bottom: var(--innen);
  left: var(--innen);
  padding: 4px var(--eng);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.018em;
  background: rgb(255 255 255 / 0.88);
  color: #1a1815;
  backdrop-filter: blur(12px) saturate(140%);
}
.abzeichen-anzeige { background: rgb(26 24 21 / 0.72); color: #ffffff; }

/* Pflichtangabe nach EU-KI-Verordnung Art. 50: künstlich erzeugte Bilder
 * sind als solche zu kennzeichnen. Leise, aber da. */
.ki-hinweis {
  position: absolute;
  bottom: var(--innen);
  right: var(--innen);
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: rgb(26 24 21 / 0.42);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

/* ── 8. Knöpfe ────────────────────────────────────────────────────────*/

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--eng);
  /* 44 px sind die kleinste Fläche, die ein Daumen sicher trifft. */
  min-height: 44px;
  padding: 0 var(--luecke);
  border: none;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--auf-gefuellt);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--antwort), opacity var(--antwort);
}
.knopf:hover { opacity: 0.92; }
.knopf:active { transform: scale(0.97); }

.knopf-leise {
  background: var(--akzent-leise);
  color: var(--akzent);
}
.knopf-rand {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--trennlinie);
}

/* ── 9. Nilo ──────────────────────────────────────────────────────────
 *
 * Dieselbe Regel wie in der App: **eine** Nilo-Karte je Seite. Der
 * Otter ist ein Gruß, keine Tapete; wer ihn überall hinstellt, macht ihn
 * bedeutungslos.
 */
.nilo { width: auto; height: auto; }
.nilo-karte {
  display: flex;
  align-items: center;
  gap: var(--rand);
  padding: var(--rand);
  background: var(--akzent-leise);
  border-radius: var(--radius);
  /* Nicht über die ganze Seitenbreite: Ein kurzer Satz neben einem Bild
   * zerfällt sonst in zwei weit auseinanderliegende Inseln. */
  max-width: 52rem;
}
.nilo-karte img { width: 88px; flex: none; }
@media (min-width: 40rem) {
  .nilo-karte { padding: var(--luecke); gap: var(--luecke); }
  .nilo-karte img { width: 112px; }
}

/* ── 10. Kopf und Fuß ─────────────────────────────────────────────────*/

.seitenkopf {
  background: var(--kopf-grund);
  border-bottom: 0.5px solid var(--trennlinie);
  /* Bleibt oben stehen, aber ohne Aufhebens: eine Zeile, die nicht
   * mitscrollt, kostet am Telefon sonst spürbar Platz. */
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(12px);
}
.seitenkopf-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rand);
  min-height: 56px;
}
.wortmarke {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--akzent);
  text-decoration: none;
}
.thema-knopf {
  min-height: 36px;
  padding: 0 var(--innen);
  border: 1px solid var(--trennlinie);
  border-radius: 999px;
  background: transparent;
  color: var(--text-zweit);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--antwort), border-color var(--antwort);
}
.thema-knopf:hover { color: var(--text); border-color: var(--text-dritt); }

main { padding-block: var(--abschnitt) var(--seite); }

.seitenfuss {
  border-top: 0.5px solid var(--trennlinie);
  padding-block: var(--luecke);
  background: var(--flaeche-vertieft);
}
.fuss-wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rand);
  margin-bottom: var(--innen);
}
.fuss-wege a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-zweit);
  text-decoration: none;
}
.fuss-wege a:hover { color: var(--akzent); }

/* ── 11. Bausteine der Startseite ─────────────────────────────────────*/

.gruss { margin-bottom: var(--abschnitt); }
.gruss-satz { max-width: var(--lesebreite); margin-top: var(--innen); }

.stadt-raster { margin-top: var(--rand); }

/* Die Stadtkachel ist der wichtigste Knopf der ganzen Seite. Deshalb
 * groß genug, dass man sie nicht suchen muss. */
.stadt-kachel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 88px;
  padding: var(--rand);
  text-decoration: none;
  transition: transform var(--antwort), border-color var(--antwort);
}
.stadt-kachel:hover { border-color: var(--akzent); }
.stadt-kachel:active { transform: scale(0.98); }

.vorbereitung { margin-top: var(--rand); }

.punkte { margin-top: var(--rand); }
@media (min-width: 62rem) { .punkte { grid-template-columns: repeat(3, 1fr); } }

.punkt { display: flex; flex-direction: column; gap: var(--eng); }
.punkt-zeichen { color: var(--akzent); }
.punkt h3 { margin: 0; }

.app-block {
  display: flex;
  flex-direction: column;
  gap: var(--rand);
  padding: var(--luecke);
}

/* ── 11b. Bausteine der Stadtseite ────────────────────────────────────*/

.stadt-kopf { margin-bottom: var(--luecke); }
.stadt-kopf p { margin-top: var(--eng); }
.stadt-kopf a { color: var(--akzent); text-decoration: none; }
.stadt-kopf a:hover { text-decoration: underline; }

/* Die Schnellfilter. Links, keine Knöpfe: „Was ist heute in Dresden los“
 * ist die Suchanfrage, um die es geht – dafür braucht es eine Seite, die
 * Google aufrufen kann. */
.filterleiste {
  display: flex;
  gap: var(--eng);
  flex-wrap: wrap;
  margin-bottom: var(--luecke);
}
.filterpille {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--rand);
  border: 1px solid var(--trennlinie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-zweit);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--antwort), border-color var(--antwort),
              background var(--antwort);
}
.filterpille:hover { color: var(--text); border-color: var(--text-dritt); }
.filterpille-an {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-gefuellt);
}

/* Die Kategorien als Kachelreihe – dieselben Illustrationen wie in der
 * App. Ein Raster, das mitwächst, statt eines Streifens zum Wischen:
 * Am Schreibtisch passen alle zwölf nebeneinander, am Telefon in drei
 * Reihen. */
.kategorien {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--innen);
  margin-bottom: var(--abschnitt);
}
.kategoriekachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--eng) 4px;
  border-radius: var(--radius-klein);
  color: var(--text-zweit);
  text-align: center;
  text-decoration: none;
  transition: color var(--antwort), background var(--antwort),
              transform var(--antwort);
}
.kategoriekachel img { width: 56px; height: 56px; }
.kategoriekachel:hover {
  background: var(--flaeche-vertieft);
  color: var(--text);
}
.kategoriekachel:active { transform: scale(0.96); }

.reihen-raster { margin-top: var(--rand); }

/* Eine Seite, auf der nur eine Aussage steht – 404, Störung, „in
 * Arbeit“. Mittig, schmal, ruhig. */
.mitte-seite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rand);
  max-width: var(--lesebreite);
  text-align: center;
  padding-block: var(--abschnitt);
}
.mitte-seite img { width: min(160px, 40vw); height: auto; }

/* ── 12. Bewegung ─────────────────────────────────────────────────────
 *
 * Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, hat
 * dafür einen Grund – oft einen medizinischen. Dann bleibt alles stehen,
 * und zwar ausnahmslos.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Der Verweis in der Nilo-Karte. Kein Knopf: Nilo sagt etwas, er fordert
 * nicht auf. */
.nilo-weg {
  color: var(--akzent);
  font-weight: 500;
  text-decoration: none;
}
.nilo-weg:hover { text-decoration: underline; }

/* ── 13. Die Detailseite ──────────────────────────────────────────────*/

/* Eine Spalte, nicht die volle Seitenbreite: Fließtext über 70 Zeichen
 * hinweg zu lesen ist anstrengend, und am Schreibtisch wäre die Zeile
 * sonst 1100 Pixel lang.
 *
 * **Alles auf der Detailseite steht in derselben Bahn** – Bild, Text,
 * Hinweisband, die Reihe darunter. Vorher hatte nur der Text diese
 * Breite und war dadurch mittig, während das Bild in der 72-rem-Bahn
 * links klebte: Beide begannen an verschiedenen Stellen. */
.detailbahn {
  max-width: 46rem;
  margin-inline: auto;
}

.detailspalte {
  display: flex;
  flex-direction: column;
  gap: var(--luecke);
  margin-top: var(--luecke);
}

.detailbild {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bildflaeche);
  box-shadow: var(--schatten-weich);
  aspect-ratio: 3 / 2;
}
.detailbild img { width: 100%; height: 100%; object-fit: cover; }

/* „Dieser Termin ist vorbei“ – sichtbar, aber ohne Alarm. Die Seite
 * bleibt erreichbar, weil Suchmaschinen und alte Nachrichten auf sie
 * zeigen; sie soll nur nicht so tun, als stünde der Termin noch bevor. */
.vorbei-band {
  margin: 0 0 var(--rand);
  padding: var(--innen) var(--rand);
  border-radius: var(--radius-klein);
  background: var(--flaeche-vertieft);
  color: var(--text-zweit);
  font-size: 13px;
  font-weight: 500;
}

/* Die Kennzeichnungen unter dem Titel. Auf der Kachel sind sie Kapseln
 * im Bild; hier stehen sie nebeneinander in einer eigenen Zeile – als
 * Einordnung, nicht als Werbung. */
.marke {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--innen);
  border-radius: 999px;
  background: var(--akzent);
  color: var(--auf-gefuellt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.018em;
}
.marke-anzeige { background: var(--text-zweit); }

/* Eine Zeile mit einem Zeichen davor – Datum, Countdown, Ort. */
.zeile-mit-zeichen {
  display: flex;
  align-items: flex-start;
  gap: var(--innen);
  margin: 0;
}
.zeile-mit-zeichen .zeichen { flex: none; color: var(--text-dritt); }
.zeile-mit-zeichen.betont { color: var(--akzent); font-weight: 500; }
.zeile-mit-zeichen.betont .zeichen { color: var(--akzent); }
.zeile-mit-zeichen.warnend { color: var(--warnung); font-size: 13px; }
.zeile-mit-zeichen.warnend .zeichen { color: var(--warnung); }

.kartenknopf { align-self: flex-start; }

/* Die Fakten: kleine Kacheln, die umbrechen statt zu scrollen. */
.fakten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--innen);
}
.fakt {
  padding: var(--innen) var(--rand);
  border-radius: var(--radius-klein);
  background: var(--flaeche-vertieft);
}
.fakt p { margin: 0; }
.fakt.gut .detail-stark { color: var(--erfolg); }
.fakt.achtung .detail-stark { color: var(--warnung); }

.hinweisblock {
  display: flex;
  flex-direction: column;
  gap: var(--innen);
  padding: var(--rand);
}
.hinweisblock .knopf-rand { align-self: flex-start; }

.liste { margin: 0; padding-left: 1.2em; }
.liste li { margin-bottom: 4px; }
.liste li.warnend { color: var(--warnung); }

.nilo-hinweis { flex-direction: row; align-items: center; gap: var(--rand); }
.nilo-hinweis img { width: 67px; flex: none; }

/* Ein Rechtstext ist zum Lesen da, nicht zum Überfliegen: eine schmale
 * Spalte, großzügige Abstände zwischen den Abschnitten, und Listen, die
 * sich vom Fließtext abheben. */
.rechtstext { max-width: var(--lesebreite); margin-top: var(--luecke); }
.rechtstext h2 { margin: var(--abschnitt) 0 var(--innen); }
.rechtstext h3 { margin: var(--luecke) 0 var(--eng); }
.rechtstext p { margin: 0 0 var(--innen); }
.rechtstext ul { margin: 0 0 var(--innen); }
.rechtstext a { color: var(--akzent); }

/* ── 14. Die Startseite ───────────────────────────────────────────────
 *
 * Der einzige Ort, an dem dieses System lauter wird. Eine Stadtseite ist
 * ein Werkzeug – sie hat ruhig zu sein. Die Startseite hat eine Sekunde,
 * um zu sagen, worum es geht.
 *
 * ── Drei Regeln, von denen die übrige Seite nichts weiß ──────────────
 *
 * 1. **Ein sehr großer Satz.** Bis 76 px, eng gesetzt (-0,035 em). Bei
 *    dieser Größe trägt die Schrift die Stimmung, nicht die Farbe.
 * 2. **Keine Schatten in den Bändern.** Die Tiefe kommt aus
 *    ganzflächigen Farbfeldern. Ein Schatten unter einem farbigen
 *    Streifen sieht aus, als läge er lose auf der Seite.
 * 3. **Wechselnder Takt.** Hell, hell, dunkel, hell, getönt, dunkel.
 *    Ohne den Wechsel liest sich die Seite wie eine Liste von
 *    Abschnitten.
 *
 * Die Akzentfarbe bleibt rationiert. Türkis trägt die Städte und die
 * dunklen Bänder; das Orange aus Nilos Halstuch kommt **einmal** vor,
 * an der Terminpille im Schaufenster. Mehr wäre Dekor.
 */

:root {
  /* Das tiefe Blaugrün aus Nilos Schuppen. Es ist kein neuer Akzent,
   * sondern eine Fläche: Text steht darauf, nicht darin. */
  --tiefe: #0e3f49;
  --auf-tiefe: #f2fbfc;
  --auf-tiefe-leise: #a9cdd3;
  /* ── Das Halstuch ──────────────────────────────────────────────────
   *
   * Genau eine Verwendung: die Terminpille im Schaufenster.
   *
   * **Dunkler als im Bild.** Nilos Halstuch ist ein helles Korallenrot;
   * mit weißer Schrift darauf ergibt das 3,4 : 1 und fällt an WCAG 2.1 AA
   * durch (4,5 : 1 bei 12 px). Der Wert hier ist der nächstgelegene, der
   * besteht: 4,7 : 1. Auf dem dunklen Band sitzt er ohnehin ruhiger. */
  --halstuch: #c94823;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    /* Auf dunklem Grund darf das Band nicht heller sein als die Seite,
     * sonst kippt die Ordnung: Der Streifen würde vorn liegen. */
    --tiefe: #0b3038;
    --auf-tiefe: #eefafc;
    --auf-tiefe-leise: #93bcc3;
  }
}
:root[data-thema="dunkel"] {
  --tiefe: #0b3038;
  --auf-tiefe: #eefafc;
  --auf-tiefe-leise: #93bcc3;
}

/* Ganzflächige Bänder vertragen keinen Innenabstand am `main`. */
main.startseite { padding-block: 0 0; }

/* Der Abstand zwischen den Abschnitten – großzügiger als sonst. */
.startseite > * + * { margin-top: 0; }
.bahn { padding-block: clamp(48px, 7vw, 88px); }
.dunkelband { padding-block: clamp(48px, 7vw, 88px); }

.bahn-titel {
  font-size: clamp(26px, 1.3rem + 2vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
}
.bahn-unter {
  font-size: clamp(16px, 0.95rem + 0.3vw, 19px);
  line-height: 1.5;
  color: var(--text-zweit);
  max-width: 36rem;
  margin: var(--innen) 0 0;
}

/* Die kleine Zeile über einer Überschrift. Sie ersetzt eine zweite
 * Schriftfamilie: Versalien, weit gesperrt, sehr klein. */
.augenmerk {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 var(--eng);
}
.auf-dunkel-leise { color: var(--auf-tiefe-leise); }
.augenmerk.auf-dunkel-leise { color: var(--auf-tiefe-leise); }

/* ── Das Plakat ───────────────────────────────────────────────────── */

.plakatband {
  background: linear-gradient(180deg, var(--akzent-leise) 0%,
                                      var(--grund) 78%);
  padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 80px);
}
.plakat-inhalt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luecke);
  align-items: center;
}
@media (min-width: 52rem) {
  .plakat-inhalt { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.plakat-satz {
  font-size: clamp(38px, 2rem + 4.4vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.plakat-unter {
  font-size: clamp(16px, 0.95rem + 0.4vw, 20px);
  line-height: 1.5;
  color: var(--text-zweit);
  max-width: 32rem;
  margin: var(--rand) 0 0;
}

/* ── Wo Nilo steht ──────────────────────────────────────────────────
 *
 * Auf dem Telefon **über** der Überschrift und klein: Sonst steht er
 * unter der Stadtwahl, und bis dahin hat man schon getippt. Oben ist er
 * das erste, was man sieht – und die Überschrift bleibt trotzdem das
 * erste, was man liest.
 *
 * Ab Tablet daneben und groß, weil dort Platz dafür ist. */
.plakat-bild { justify-self: center; }
.plakat-bild img {
  width: clamp(150px, 26vw, 232px);
  height: auto;
  display: block;
}
@media (max-width: 51.99rem) {
  .plakat-inhalt { display: flex; flex-direction: column; }
  .plakat-bild { order: -1; align-self: flex-start; }
  .plakat-bild img { width: 112px; }
}

/* ── Die Städte als Pillen ────────────────────────────────────────── */

.stadtwahl { margin-top: var(--abschnitt); }
.stadtpillen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--innen);
  margin-top: var(--eng);
}

/* Der einzige wirklich gefüllte Knopf der Seite. Er ist die Handlung,
 * um die es geht – alles andere daneben wäre Konkurrenz. */
.stadtpille {
  display: inline-flex;
  align-items: baseline;
  gap: var(--eng);
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--akzent);
  color: var(--auf-gefuellt);
  text-decoration: none;
  transition: transform var(--antwort), opacity var(--antwort);
}
.stadtpille:hover { opacity: 0.92; }
.stadtpille:active { transform: scale(0.97); }
.stadtpille-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.stadtpille-zahl { font-size: 13px; opacity: 0.82; }

.stadtwahl .detail { margin-top: var(--innen); }

/* ── Drei Schritte ────────────────────────────────────────────────── */

.schrittreihe {
  list-style: none;
  margin: var(--abschnitt) 0 0;
  padding: 0;
  display: grid;
  gap: var(--luecke);
  grid-template-columns: 1fr;
  counter-reset: schritt;
}
@media (min-width: 46rem) {
  .schrittreihe { grid-template-columns: repeat(3, 1fr); gap: var(--abschnitt); }
}

.schritt { display: flex; flex-direction: column; gap: var(--eng); }
.schritt-bild {
  width: clamp(76px, 12vw, 104px);
  height: auto;
  display: block;
  margin-bottom: var(--eng);
}
.schritt-zahl {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dritt);
  margin: 0;
}
.schritt-titel {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.014em;
  margin: 0;
}

/* ── Das dunkle Band ──────────────────────────────────────────────── */

.dunkelband {
  background: var(--tiefe);
  color: var(--auf-tiefe);
}
.bandtitel {
  font-size: clamp(26px, 1.3rem + 2vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin: 0;
  color: var(--auf-tiefe);
}
.bandkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rand);
}
.bandkopf-satz { max-width: 22rem; }

.schaufenster {
  display: grid;
  gap: var(--rand);
  grid-template-columns: 1fr;
  margin-top: var(--abschnitt);
}
@media (min-width: 40rem) { .schaufenster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .schaufenster { grid-template-columns: repeat(3, 1fr); } }

/* Flach, ohne Karte: Auf einer farbigen Fläche wäre ein weißes Kästchen
 * mit Schatten ein Fremdkörper. Das Bild ist die Kachel. */
.schaukachel {
  display: flex;
  flex-direction: column;
  gap: var(--eng);
  text-decoration: none;
  color: inherit;
}
.schaubild {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgb(255 255 255 / 0.06);
}
.schaubild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--zustand);
}
.schaukachel:hover .schaubild img { transform: scale(1.03); }

/* Die eine Stelle, an der das Orange vorkommt. */
.schaumarke {
  position: absolute;
  top: var(--innen);
  left: var(--innen);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--halstuch);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.schautitel {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--auf-tiefe);
}

/* ── Warum ────────────────────────────────────────────────────────── */

.gruendereihe {
  display: grid;
  gap: var(--luecke);
  grid-template-columns: 1fr;
  margin-top: var(--abschnitt);
}
@media (min-width: 46rem) {
  .gruendereihe { grid-template-columns: repeat(3, 1fr); gap: var(--abschnitt); }
}
.grund {
  display: flex;
  flex-direction: column;
  gap: var(--innen);
  padding: var(--luecke);
  border-radius: var(--radius);
  background: var(--flaeche-vertieft);
}
.grund-bild { width: 72px; height: auto; display: block; }

/* ── Nilo ─────────────────────────────────────────────────────────── */

.niloband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luecke);
  padding: var(--luecke);
  border-radius: var(--radius);
  background: var(--akzent-leise);
}
.niloband img { width: clamp(108px, 18vw, 164px); height: auto; flex: none; }
.nilo-text { max-width: 34rem; }

/* ── Die App ──────────────────────────────────────────────────────── */

.appband-inhalt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luecke);
  align-items: center;
}
@media (min-width: 52rem) {
  .appband-inhalt { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.appband-text .fliesstext { margin-top: var(--innen); max-width: 30rem; }

.appliste {
  list-style: none;
  margin: var(--luecke) 0 0;
  padding: 0;
  display: grid;
  gap: var(--innen);
}
.appliste li {
  position: relative;
  padding-left: 28px;
  color: var(--auf-tiefe);
  line-height: 1.45;
}
/* Ein Häkchen aus reiner Geometrie – kein Symbol, keine Datei. */
.appliste li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--akzent);
  border-bottom: 2px solid var(--akzent);
  transform: rotate(45deg);
}

.appmarke {
  margin: var(--luecke) 0 0;
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.28);
  font-size: 13px;
  font-weight: 500;
  color: var(--auf-tiefe-leise);
}
.appband-bild { justify-self: center; }
.appband-bild img { width: clamp(180px, 30vw, 300px); height: auto; display: block; }

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .schaukachel:hover .schaubild img,
  .stadtpille:active { transform: none; }
}