/* Groundia — Website, Entwurf 03.09.2026 (Stand 2: Kacheln in einer Reihe,
   Ticket im Hero, weniger Luft)
   Matchday-Look seit 02.10.2026: gedruckt statt geleuchtet (KONZEPT §24.1)
   ------------------------------------------------------------------
   Eine Datei für alle Seiten. Keine Inline-Stile im Markup (§18 P3).
   Farben und Maße sind Token; die Werte sind die der App
   (lib/theme/app_colors.dart): Licht nur im Hintergrund, Karten sind Papier,
   Grün nur für Bedienelemente. */

:root {
  --nacht:     #1B1F24;
  --bg:        #262B31;
  --card:      #3A424B;
  --header:    #47515B;
  --border:    #545E68;
  --line:      rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.08);
  --flaeche:   rgba(255,255,255,.24);
  --ink:       #FFFFFF;
  --ink-2:     #D4D6DA;
  --muted:     #B8C3CC;
  --leise:     #AAAFB4;
  --accent:    #27D17C;
  --accent-2:  #1FA862;
  --accent-ink:#0E2A1C;
  --gold:      #FFD700;
  --flutlicht: #E4EEFF;
  --display:   "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font:      "DM Sans", Roboto, "Segoe UI", system-ui, sans-serif;
  --breit:     1160px;
  --lese:      720px;
  --rund:      12px;
  --rund-k:    8px;
}

/* ---- Schriften: selbst gehostet (fonts/LIZENZ.txt) ------------------ */
/* Roboto Condensed: dieselben drei Schnitte wie in der App (assets/fonts/),
   TrueType. Bold aufrecht trägt Überschriften, Navigation und Knöpfe, Bold
   kursiv die großen Zahlen. */
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/robotocondensed-regular.ttf") format("truetype"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/robotocondensed-bold.ttf") format("truetype"); }
@font-face { font-family: "Roboto Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/robotocondensed-bolditalic.ttf") format("truetype"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("fonts/dmsans.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(var(--breit), 100% - 2rem); margin-inline: auto; }
.wrap-lese { width: min(var(--lese), 100% - 2rem); margin-inline: auto; }

/* ---- Seitenhintergrund: Flutlicht über dem Stadion bei Nacht ------------
   Bild 1 des Entwurfs, lib/widgets/rasen_hintergrund.dart. Er STEHT, der
   Inhalt scrollt darüber: zwei fixierte Pseudo-Elemente hinter allem, kein
   `background-attachment: fixed` — das ruckelt auf Mobilgeräten, ein
   fixiertes Element wird einmal gerastert und nur noch hingelegt.

   ::before  Grund, Nachthimmel (oberste 330 px, nacht läuft in bg), je ein Hof
             um einen Mast knapp außerhalb der oberen Ecken (x −4 % / 104 %,
             y 70 px, Radius 170 px: weiß 25 % → 6 % bei 28 % → 0) und das
             Tornetz: Punkte mit Radius 0,8 px, weiß 3,5 %, alle 8 px, jede
             zweite Reihe um 4 px versetzt (zwei Lagen, Kachel 8 × 16 px).
   ::after   der Lichtkegel von jedem Mast schräg nach unten: weiß 6,4 %,
             zur Mitte hin auslaufend. Die App zeichnet ein weichgezeichnetes
             Dreieck; hier ist es ein Kegel aus einem Verlauf (conic-gradient)
             mit auslaufender Maske. NÄHERUNG: Die Winkel sind fest und
             folgen der Seitenbreite nicht; dafür gibt es keinen
             Weichzeichner, der beim Scrollen neu rechnen müsste.

   Kein grüner Schein, kein Akzent im Hintergrund. Das Lampenfeld der App
   (4 × 3 Punkte im Mast) fehlt absichtlich: Es liegt außerhalb des Bilds. */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -2; background:
  radial-gradient(circle at 3px 3px, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) .55px, rgba(255,255,255,0) 1px) 0 0 / 8px 16px,
  radial-gradient(circle at 7px 11px, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) .55px, rgba(255,255,255,0) 1px) 0 0 / 8px 16px,
  radial-gradient(circle 170px at -4% 70px, rgba(255,255,255,.25) 0, rgba(255,255,255,.06) 47.6px, rgba(255,255,255,0) 170px) no-repeat,
  radial-gradient(circle 170px at 104% 70px, rgba(255,255,255,.25) 0, rgba(255,255,255,.06) 47.6px, rgba(255,255,255,0) 170px) no-repeat,
  linear-gradient(to bottom, var(--nacht), var(--bg)) 0 0 / 100% 330px no-repeat,
  var(--bg); }
body::after { z-index: -1;
  background:
    conic-gradient(from 118deg at -4% 70px, rgba(255,255,255,0) 0deg, rgba(255,255,255,.064) 14deg, rgba(255,255,255,.064) 40deg, rgba(255,255,255,0) 54deg),
    conic-gradient(from 188deg at 104% 70px, rgba(255,255,255,0) 0deg, rgba(255,255,255,.064) 14deg, rgba(255,255,255,.064) 40deg, rgba(255,255,255,0) 54deg);
  -webkit-mask-image: radial-gradient(circle 620px at -4% 70px, #000, transparent), radial-gradient(circle 620px at 104% 70px, #000, transparent);
  mask-image: radial-gradient(circle 620px at -4% 70px, #000, transparent), radial-gradient(circle 620px at 104% 70px, #000, transparent); }

/* ---- Typografie -------------------------------------------------- */
/* LANGE WÖRTER MÜSSEN BRECHEN DÜRFEN. „Datenschutzerklärung“ brauchte bei
   320 px 319 px in einer 288-px-Spalte und lief rechts aus dem Bild
   (04.09.2026 gemessen). Deutsch ist voll solcher Wörter:
   Widerrufsbelehrung, Verbraucherstreitbeilegung, Zettelwirtschaft.
   `hyphens` trennt nach den Regeln der Sprache (lang="de" steht im HTML),
   `overflow-wrap` ist der Rückfall, wo das nicht reicht.

   SEIT DEM 02.10.2026 ROBOTO CONDENSED: schmaler als die frühere Schrift
   (Outfit war rund ein Fünftel breiter) und wirkt bei gleicher Größe kleiner,
   deshalb die größeren Grenzen. Die Breite der längsten Wörter bei 320 px
   steht im Bericht dieser Umstellung; das „Zettel­wirtschaft“ im HTML
   bleibt als Trennstelle stehen. */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: 0; margin: 0; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.15; }
p  { margin: 0 0 1em; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 46ch; }
.muted { color: var(--muted); }
strong { color: var(--ink); }

/* DRUCK: Karten- und Abschnittsköpfe, Navigation, Knöpfe, Datum und Uhrzeit —
   Roboto Condensed 700, aufrecht, normale Schreibweise, ohne Sperrung. Die
   Größe setzt jede Stelle selbst. Versalien mit Sperrung gibt es nur auf dem
   Ticket (`.ticket .eyebrow`), wo ein echtes Ticket sie druckt. */
.eyebrow, .knopf, nav.reiter a, nav.doks a, .bereiche-nav a, .faq summary,
.punkte li b, .schritte b, .telefon figcaption b, .store b, .fuss h4,
.abo-kopf, .toc b, .code-box .label, .ticket .datum, .ticket .paarung b,
.wochenende .tag b, .wochenende .spiel b, .samstag .wann, .zeitleiste .wann,
.anzeige .liga, .anzeige .teams span { font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: 0; }
.eyebrow { font-size: 1.15rem; color: var(--ink-2); margin-bottom: .5rem; }

/* ZAHL: große Kennzahlen, Ergebnisse, Beträge — Roboto Condensed 700 kursiv,
   Zeilenhöhe 1, Laufweite −0,3 px, in Weiß. */
.zahl, .ticket .paarung .ergebnis, .ticket .heute b, .wochenende .erg,
.anzeige .stand, .preis .betrag, .bereich-kopf .nummer, .schritte li::before { font-family: var(--display); font-weight: 700; font-style: italic; line-height: 1; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }

/* ---- Papier: EIN Baustein für jede Karte ---------------------------------
   Grund surface, darüber das Papierkorn (assets/textur/korn.png, 256 × 256,
   gekachelt in 85,33 px — die App legt es mit Faktor 3), Radius 12, ein
   kurzer Schatten, KEIN Rand: Papier grenzt sich durch den Schatten ab. Wer
   hervorgehoben werden soll, bekommt einen RAND in der Farbe der Aussage
   (Accent für „ich“ und „aktiv“, Gold für Neues), keine farbige Füllung.
   Verboten bleiben Schein, Glas, Verläufe auf Flächen und Schatten mit mehr
   als 8 px Unschärfe. */
.ticket, .wochenende, .macht article, .samstag li, .zahlen div, .nicht li,
.faq details, .autor, .store, .punkte li, .schritte li, .preis, .code-box,
.toc, .anzeige, .fuss { background: url(korn.png) 0 0 / 85.33px, var(--card); border-radius: var(--rund); box-shadow: 0 3px 6px rgba(0,0,0,.30); }

/* Vertiefte Fläche (in einer Karte: Bildkasten, Kennzahl-Kästen, Eingabe):
   Grund bg plus Korn, Rand 1 px, Radius 8, kein Schatten. */
.macht .bild, .statkarte div, .newsletter-zeile input { background: url(korn.png) 0 0 / 85.33px, var(--bg); border: 1px solid var(--border); border-radius: var(--rund-k); }

/* ---- Kopf --------------------------------------------------------- */
/* Fest und undurchsichtig, ohne Glas: Der Kopf trägt `nacht`, die Farbe, mit
   der der Nachthimmel oben beginnt — bei Seitenanfang geht er nahtlos in ihn
   über, beim Scrollen verdeckt er den Text. */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--nacht); border-bottom: 1px solid var(--line-soft); }
.kopf-inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.marke { display: inline-flex; align-items: center; padding-block: 5px; }
.marke img { height: 34px; width: auto; }
nav.reiter { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
nav.reiter::-webkit-scrollbar { display: none; }
nav.reiter a { padding: 8px 13px; border-radius: var(--rund-k); font-size: 1.1rem; color: var(--muted); white-space: nowrap; }
nav.reiter a:hover { color: var(--ink); text-decoration: none; background: var(--line-soft); }
nav.reiter a[aria-current="page"] { color: var(--accent); }
.kopf-knopf { margin-left: .5rem; }
/* ---- Menü auf dem Handy -------------------------------------------------
   Die Reiterleiste scrollte seitwärts und schnitt bei 320 px drei von fünf
   Punkten ab — sichtbar war nur „Start" und ein halbes „Funktionen"
   (04.09.2026 gemeldet und nachgemessen). Ab hier ein Klappmenü.

   ES KLAPPT AUF, ES SCHWEBT NICHT. Der erste Versuch legte das Menü mit
   fester Position über die Seite — und verschwand hinter dem Text: Der Kopf
   trug damals einen Weichzeichner im Hintergrund, und der erzeugt einen
   eigenen Stapelkontext, in dem die Ebenenzahl des Menüs nur noch gegen seine
   Geschwister zählt. Der Weichzeichner ist mit dem Matchday-Look weg, die
   Lösung bleibt: Ein Menü, das die Seite nach unten schiebt, hat dieses
   Problem nicht und ist auf dem Handy ohnehin das gewohnte Verhalten.

   OHNE JS bleibt alles beim Alten, nur umbrechend statt scrollend: Der
   Knopf ist dann versteckt, die Leiste sichtbar. Das Skript der Seite setzt
   die Klasse js an das Wurzelelement; fehlt sie, greifen die Regeln unter
   html:not(.js). */
.menue-knopf { display: none; }

@media (max-width: 900px) {
  /* Der grüne Knopf im Kopf war trotz der alten Regel sichtbar: .knopf steht
     weiter unten in der Datei und gewinnt bei gleicher Spezifität. Deshalb
     hier eine Stufe höher. */
  .kopf .kopf-knopf { display: none; }
  .kopf-inner { flex-wrap: wrap; }

  html.js .menue-knopf {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1px solid var(--flaeche);
    border-radius: var(--rund);
    background: transparent;
    cursor: pointer;
    flex: none;
  }
  /* Drei Striche aus einem Element: der mittlere ist der Balken selbst, die
     beiden anderen sind seine Schatten. Beim Öffnen wird daraus ein Kreuz. */
  .menue-knopf .balken { position: relative; }
  .menue-knopf .balken,
  .menue-knopf .balken::before,
  .menue-knopf .balken::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .18s ease, background .18s ease;
  }
  .menue-knopf .balken::before,
  .menue-knopf .balken::after { content: ""; position: absolute; left: 0; }
  .menue-knopf .balken::before { transform: translateY(-6px); }
  .menue-knopf .balken::after { transform: translateY(6px); }
  .menue-knopf[aria-expanded="true"] .balken { background: transparent; }
  .menue-knopf[aria-expanded="true"] .balken::before { transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .balken::after { transform: rotate(-45deg); }

  /* AUF- UND ZUKLAPPEN ÜBER display, NICHT ÜBER max-height. Die Höhe blieb
     im Flex-Kopf bei 0, obwohl Klasse und Regel griffen (04.09.2026 im
     Browser nachgemessen: matches() true, computed max-height 0px). Die
     Anzeige-Eigenschaft kennt dieses Problem nicht; das Einblenden macht
     eine kurze Animation statt eines Übergangs. */
  html.js nav.reiter { display: none; flex-basis: 100%; flex-direction: column; gap: 0; }
  html.js nav.reiter.offen { display: flex; padding-bottom: .6rem; animation: menue-auf .18s ease both; }
  @keyframes menue-auf { from { opacity: 0; transform: translateY(-6px); } }
  @media (prefers-reduced-motion: reduce) { html.js nav.reiter.offen { animation: none; } }
  html.js nav.reiter a {
    padding: 14px 12px;
    border-radius: var(--rund-k);
    font-size: 1.2rem;
    white-space: normal;
  }

  /* Ohne Skript: keine Kunst, aber vollständig lesbar. */
  html:not(.js) nav.reiter { flex-wrap: wrap; overflow: visible; }
  html:not(.js) nav.reiter a { padding: 10px 12px; }
}

/* ---- Knöpfe -------------------------------------------------------- */
/* Primär: Fläche accent, dunkle Schrift, Radius 12, kein Verlauf, kein
   Schein. Sekundär: durchsichtig, Rand 1 px in `flaeche`. Hover: Primär etwas
   dunkler, Sekundär mit hellerem Rand. */
.knopf { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.3rem; border-radius: var(--rund); font-size: 1.1rem; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.knopf:hover { text-decoration: none; }
.knopf-voll { background: var(--accent); color: var(--accent-ink); }
.knopf-voll:hover { background: var(--accent-2); }
.knopf-rand { background: transparent; color: var(--ink-2); border-color: var(--flaeche); }
.knopf-rand:hover { border-color: rgba(255,255,255,.5); color: var(--ink); }
.knopf svg { width: 18px; height: 18px; }

/* ---- Hero: Text links, Ticket rechts, dahinter jedes Stadion Europas -- */
.hero { position: relative; overflow: clip; isolation: isolate; }
/* Die Punktkarte läuft nach unten in den Seitenhintergrund aus — über eine
   Maske, nicht über eine Deckfläche in `bg`: Die Fläche hätte das Tornetz
   des Hintergrunds am Rand des Hero überdeckt. */
.hero-karte { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.hero-karte canvas { width: 100%; height: 100%; }
/* Der Schleier hält nur die Schrift lesbar (Farbe: bg, 38/43/49), er schmückt
   nichts. */
.hero-schleier { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 55% 80% at 22% 50%, rgba(38,43,49,.96) 0%, rgba(38,43,49,.86) 40%, rgba(38,43,49,.3) 75%, rgba(38,43,49,.05) 100%); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero-text { display: grid; gap: 1.4rem; }
.hero h1 .zeile { display: block; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-hinweis { color: var(--muted); font-size: .92rem; margin: 0; }
/* EIN ABSATZ, KEIN FLEX (02.10.2026): Als Flex-Container wurde jedes Textstueck
   zur eigenen Spalte – auf dem Handy stand die Zeile in vier schmalen Saeulen. */
.hero-legende { margin: 0; font-size: .82rem; color: var(--muted); position: relative; padding-left: 1.1rem; }
.hero-legende i { position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-schleier { background: radial-gradient(ellipse 100% 70% at 50% 35%, rgba(38,43,49,.95) 0%, rgba(38,43,49,.8) 55%, rgba(38,43,49,.25) 100%); }
}

/* Das Ticket: der erste Ground, als Papier über der Punktkarte */
.ticket { padding: clamp(1.3rem, 2.6vw, 2rem); }
/* Der Abschnittsstempel des Tickets: die EINE Stelle mit Versalien und Sperrung. */
.ticket .eyebrow { margin-bottom: .1rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; }
.ticket .datum { font-size: clamp(2.4rem, 3.8vw, 3.4rem); line-height: 1; }
.ticket .paarung { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px dashed rgba(255,255,255,.18); }
.ticket .paarung b { font-size: 1.4rem; }
.ticket .paarung b:last-child { text-align: right; }
.ticket .paarung .ergebnis { font-size: clamp(2.4rem, 4vw, 3.4rem); color: var(--ink); }
.ticket .ort { margin: 1.1rem 0 0; color: var(--muted); font-size: .9rem; }
.ticket .ort b { color: var(--ink-2); font-weight: 600; }
.ticket .heute { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); display: flex; gap: .8rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.ticket .heute b { font-size: 1.35rem; color: var(--ink); }

/* ---- Abschnitte ---------------------------------------------------- */
.abschnitt { padding-block: clamp(2.8rem, 6vw, 5.5rem); }
/* Kein Farbband mehr: Es hätte den stehenden Hintergrund überdeckt. Eine
   feine Linie oben trennt, wie vorher das Band. */
.abschnitt-hell { border-top: 1px solid var(--line-soft); }
.sec-kopf { max-width: 60ch; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.sec-kopf p { color: var(--ink-2); margin-top: .8rem; }

/* Warum: Text links, das echte Wochenende rechts */
.geschichte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.geschichte .text p { font-size: 1.06rem; color: var(--ink-2); }
.wochenende { overflow: hidden; }
.wochenende header { padding: 1.1rem 1.3rem .9rem; background: var(--header); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.wochenende header .eyebrow { margin: 0; }
.wochenende header span { color: var(--ink-2); font-size: .9rem; }
.wochenende ol { list-style: none; margin: 0; padding: 0; }
.wochenende li { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 1rem; align-items: center; padding: .95rem 1.3rem; border-bottom: 1px solid var(--line-soft); position: relative; }
.wochenende li:last-child { border-bottom: 0; }
.wochenende li::before { content: ""; position: absolute; left: 4.1rem; top: 0; bottom: 0; width: 1px; background: var(--line); }
.wochenende .tag { line-height: 1.15; }
.wochenende .tag b { display: block; font-size: 1.3rem; }
.wochenende .tag small { display: block; font-family: var(--font); font-weight: 500; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.wochenende .spiel b { display: block; font-size: 1.15rem; }
.wochenende .spiel span { color: var(--muted); font-size: .9rem; }
.wochenende .erg { font-size: 1.8rem; color: var(--ink); text-align: right; }
/* Neues wird durch einen Rand in Gold hervorgehoben, nicht durch eine Füllung. */
.wochenende .neu { display: inline-block; margin-left: .4rem; padding: .1rem .45rem; border-radius: var(--rund-k); border: 1px solid var(--gold); color: var(--ink-2); font-family: var(--font); font-size: .75rem; font-weight: 700; vertical-align: middle; }
.wochenende footer { padding: .9rem 1.3rem 1.1rem; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line-soft); }
@media (max-width: 860px) { .geschichte { grid-template-columns: 1fr; } }

/* Drei Dinge — gleich breit, in einer Reihe, sobald sie passen */
/* Feste Spaltenzahlen statt auto-fit: auto-fit machte auf breiten Bildschirmen
   sechs Spalten für acht Zahlen — zwei Kacheln standen allein in Reihe zwei.
   Genau das hatte der Betreiber am 03.09. gemeldet. */
.macht { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 760px) { .macht { grid-template-columns: 1fr; } }
.macht article { padding: 1.25rem; display: grid; gap: .8rem; align-content: start; }
.macht .bild { aspect-ratio: 300 / 160; position: relative; overflow: hidden; }
.macht .bild svg, .macht .bild canvas { width: 100%; height: 100%; }
/* Das Etikett steht UNTER dem Bild, nicht darin. Absolut im Bild lag es
   über dem Inhalt: über „Berlin / Fr 18:20" in der Kette und über der
   unteren Reihe der Statistik-Kacheln (03.09.2026 gemeldet). */
.macht .etikett { display: block; margin-top: -.35rem; font-size: .75rem; color: var(--muted); }
.macht p { margin: 0; color: var(--ink-2); font-size: .98rem; }
/* Kompakt genug fuer den Bildkasten (300:160). Vorher brauchte der Inhalt
   148 px in einem 134 px hohen Kasten — „samstags" und „Stueck" standen
   unten halb abgeschnitten (03.09.2026 gemeldet). */
.statkarte { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .7rem; align-content: center; }
.statkarte div { padding: .4rem .55rem; min-width: 0; }
.statkarte .zahl { font-size: 1.4rem; color: var(--ink); }
.statkarte small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.15; margin-top: .1rem; }

/* Aus der App: drei Telefone in einer Reihe, je so breit wie ein Telefon
   (300 bis 360 px). Passen keine drei nebeneinander, stehen zwei, dann eines
   — mittig, auch das allein übrige in der letzten Reihe (darum Flex, kein
   Raster). */
.telefone { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1.6rem; }
.telefone .telefon { flex: 1 1 300px; min-width: 0; margin: 0; }
.telefon { display: grid; gap: .9rem; width: 100%; max-width: 360px; margin: 0 auto; align-content: start; }
/* Der Rahmen ist ein Gerät, keine Karte: flaches Anthrazit, feine Linie, kurzer
   Schatten — kein Verlauf und kein Schweben. KEINE Kerben-Attrappe: Sie lag
   am 03.09.2026 über der Titelzeile der App und machte aus dem Titel ein
   „M…IK". Der Rahmen bleibt ohne sie als Gerät erkennbar: Radius, Innenkante. */
.telefon .rahmen { position: relative; border-radius: 34px; padding: 10px; background: var(--nacht); border: 1px solid var(--line); box-shadow: 0 3px 6px rgba(0,0,0,.30); }
/* Die Bildschirmfotos beginnen mit der Titelzeile der App: tool/web_app_bilder.dart
   schneidet Status- und Navigationsleiste ab. */
.telefon .rahmen img { width: 100%; height: auto; border-radius: 26px; display: block; }
.telefon figcaption { color: var(--ink-2); font-size: .95rem; }
.telefon figcaption b { display: block; font-size: 1.15rem; color: var(--ink); margin-bottom: .15rem; }
/* Darunter, klein: woher das Bild kommt. */
.telefon figcaption .herkunft { display: block; margin-top: .4rem; color: var(--muted); font-size: .85rem; }

/* Kreisliga: Anzeigetafel — auf Papier gedruckt, ohne Zeilenraster und Schein */
.tafel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: center; }
.anzeige { padding: clamp(1.3rem, 2.8vw, 2.2rem); }
.anzeige .liga { color: var(--muted); font-size: 1rem; }
.anzeige .teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 1rem; }
.anzeige .teams span { font-size: clamp(1.2rem, 1.9vw, 1.6rem); }
.anzeige .teams span:last-child { text-align: right; }
.anzeige .stand { font-size: clamp(3.4rem, 7vw, 5.8rem); color: var(--ink); }
.anzeige .meta { margin-top: 1.1rem; color: var(--muted); font-size: .95rem; }
.tafel .text p { color: var(--ink-2); }
@media (max-width: 860px) { .tafel { grid-template-columns: 1fr; } }
/* Bei 320 px bleiben neben „15:1“ 59 px je Mannschaft — „Alemannia“ braucht 82.
   Schmal steht die Paarung deshalb untereinander. */
@media (max-width: 480px) { .anzeige .teams { grid-template-columns: 1fr; gap: .3rem; } .anzeige .teams span:last-child { text-align: left; } }

/* Samstag: vier Schritte als 2×2 links, „Meine Stadien" aus der App rechts */
.samstag-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.samstag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; }
@media (max-width: 860px) { .samstag-wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .samstag { grid-template-columns: 1fr; } }
/* Der Schritt, der gerade im Bild ist, bekommt einen Rand in Accent
   („aktiv“) — er hebt sich nicht mehr vom Blatt ab. Der Rand ist eine
   Kontur (outline), damit sich nichts verschiebt. */
.samstag li { list-style: none; padding: 1.15rem 1.15rem 1.25rem; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .3s ease; }
.samstag li.aktiv { outline-color: var(--accent); }
.samstag .wann { font-size: 1.35rem; color: var(--ink); }
.samstag h3 { margin-top: .25rem; font-size: 1.2rem; }
.samstag p { margin: .45rem 0 0; color: var(--ink-2); font-size: .95rem; }
.samstag-ende { margin: 1.3rem 0 0; }

/* Zahlen: vier je Reihe, sobald sie passen */
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 900px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zahlen div { padding: 1.1rem 1.2rem; }
/* Die Untergrenze kommt aus der Messung: bei 320 px stehen zwei Kacheln
   nebeneinander, 98 px Platz innen, und „153.119“ braucht bei 28 px rund 91 px
   (Roboto Condensed Bold kursiv, aus den Schriftmaßen gerechnet). */
.zahlen .zahl { font-size: clamp(1.75rem, 4.4vw, 3.5rem); color: var(--ink); }
@media (max-width: 480px) { .zahlen div { padding: 1rem; } }
.zahlen small { display: block; color: var(--muted); margin-top: .35rem; font-size: .92rem; }
/* „Meine“ Zahlen: Rand in Accent statt grüner Füllung. */
.zahlen .meine { outline: 1px solid var(--accent); outline-offset: -1px; }
.zahlen-hinweis { margin: .9rem 0 0; color: var(--muted); font-size: .9rem; }

/* Nicht */
.nicht { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.nicht ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.nicht li { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 1rem; }
.nicht li svg { width: 22px; height: 22px; flex: none; margin-top: .1rem; }
.nicht p { color: var(--ink-2); }
@media (max-width: 860px) { .nicht { grid-template-columns: 1fr; } }

/* FAQ + Autor nebeneinander */
.fragen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.faq { display: grid; gap: .55rem; }
.faq summary { cursor: pointer; padding: .95rem 1.1rem; font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--accent); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 1.1rem 1rem; margin: 0; color: var(--ink-2); }
.autor { display: grid; gap: 1rem; padding: 1.3rem 1.4rem; position: sticky; top: 88px; }
.autor p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.autor .reihe { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.autor .reihe .zahl { font-size: 1.8rem; color: var(--ink); }
.autor .reihe small { display: block; color: var(--muted); font-size: .78rem; }
@media (max-width: 860px) { .fragen { grid-template-columns: 1fr; } .autor { position: static; } }

/* Laden */
.laden { text-align: center; padding-block: clamp(2.8rem, 6vw, 5rem); border-top: 1px solid var(--line-soft); }
.laden .lead { margin-inline: auto; }
.laden .cta-row { justify-content: center; margin-top: 1.3rem; }
.store { display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem; color: var(--ink); text-align: left; line-height: 1.1; }
.store small { display: block; color: var(--muted); font-size: .78rem; }
.store b { font-size: 1.15rem; }
.store svg { width: 22px; height: 22px; }
.store.bald { opacity: .55; }
.newsletter { max-width: 34rem; margin: 2rem auto 0; text-align: left; }
.newsletter-frage { display: block; font-weight: 700; margin-bottom: .6rem; }
.newsletter-zeile { display: flex; flex-wrap: wrap; gap: .6rem; }
.newsletter-zeile input { flex: 1 1 14rem; min-width: 0; min-height: 48px; padding: .85rem 1.1rem; border-radius: var(--rund); color: var(--ink); font: inherit; font-size: 1rem; }
.newsletter-zeile input::placeholder { color: var(--muted); }
.newsletter-zeile input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.newsletter-zeile .knopf { flex: 0 0 auto; min-height: 48px; }
.newsletter-hinweis { color: var(--muted); font-size: .9rem; margin-top: .7rem; }
.newsletter-koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .newsletter-zeile .knopf { flex-basis: 100%; justify-content: center; } }

/* Fuß: ein Blatt Papier am unteren Rand, der Schatten fällt nach oben. */
.fuss { border-radius: var(--rund) var(--rund) 0 0; box-shadow: 0 -3px 6px rgba(0,0,0,.30); padding-block: 2.5rem 2rem; color: var(--muted); font-size: .93rem; }
/* VIER SPALTEN SEIT DEM 25.09.2026: Marke, „Die App", „Rechtliches",
   „Folgen". Die Kanäle (TikTok, Instagram) standen vorher nirgends auf der
   Seite — gesetzt werden sie von `tool/web_fusszeile.mjs`, das sie aus
   `lib/app_config.dart` liest. Auf dem Handy stapelt das Raster ohnehin auf
   eine Spalte, die Regel darunter bleibt also unberührt. */
.fuss-gitter { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.fuss h4 { margin: 0 0 .6rem; color: var(--ink-2); font-size: 1.1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.fuss a { color: var(--muted); }
.fuss a:hover { color: var(--ink); }
.fuss .slogan { color: var(--ink-2); margin-top: .8rem; max-width: 36ch; }
.fuss-unten { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--leise); }
@media (max-width: 720px) {
  .fuss-gitter { grid-template-columns: 1fr; gap: 1.4rem; }
  /* Tippziele: Ein Link von 20 px Hoehe ist auf dem Handy nicht zu treffen.
     Der Text bleibt gleich gross, nur die Flaeche waechst (04.09.2026). */
  .fuss ul { gap: 0; }
  .fuss ul a { display: block; padding: 11px 0; }
  .fuss-unten { margin-top: 1.4rem; gap: .4rem; }
}

/* ---- Unterseiten -------------------------------------------------- */
/* Seitenkopf einer Unterseite: Überschrift links, ein Satz darunter. */
.seitenkopf { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); position: relative; overflow: clip; }
.seitenkopf .lead { margin-top: 1rem; }
.seitenkopf .pitch { position: absolute; right: -8%; top: -20%; width: min(52vw, 620px); opacity: .6; pointer-events: none; }
/* Das Spielfeld im Seitenkopf trägt im HTML noch grüne Linien. Linien sind
   kein Bedienelement: hier in der Lichtfarbe (flutlicht) überschrieben —
   eine CSS-Angabe schlägt das Darstellungsattribut im SVG. */
.seitenkopf .pitch g { stroke: var(--flutlicht); stroke-opacity: .07; }
.seitenkopf .pitch circle[fill] { fill: var(--flutlicht); fill-opacity: .1; }
@media (max-width: 720px) { .seitenkopf .pitch { display: none; } }

/* Funktionen: Bereiche mit Sprungleiste */
.bereiche-nav { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1.4rem; }
.bereiche-nav a { padding: .4rem .9rem; border-radius: var(--rund); border: 1px solid var(--flaeche); color: var(--ink-2); font-size: 1.05rem; }
.bereiche-nav a:hover { text-decoration: none; border-color: rgba(255,255,255,.5); color: var(--ink); }
.bereich { padding-block: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid var(--line-soft); scroll-margin-top: 80px; }
.bereich-kopf { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.4rem; align-items: center; margin-bottom: 1.4rem; }
/* Die Abschnittsnummer ist gedruckt, nicht leuchtend: Zahl in textMuted. */
.bereich-kopf .nummer { font-size: clamp(2.2rem, 5vw, 4rem); color: var(--muted); }
.bereich-kopf p { margin: .3rem 0 0; color: var(--ink-2); max-width: 60ch; }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.punkte li { padding: 1rem 1.1rem; color: var(--ink-2); font-size: .97rem; }
.punkte li b { display: block; color: var(--ink); font-size: 1.15rem; margin-bottom: .2rem; }
@media (max-width: 960px) { .punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .punkte { grid-template-columns: 1fr; } }
/* Neben dem Telefon (340 px, siehe .telefone) bleiben bei voller Breite rund
   800 px — genug für zwei Spalten Punkte, nicht für drei. */
.bereich-bild { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.4rem; align-items: start; }
.bereich-bild .punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bereich-bild .telefon { margin-top: -1rem; }
@media (max-width: 960px) { .bereich-bild { grid-template-columns: 1fr; } .bereich-bild .telefon { margin: 0 auto; } }
@media (max-width: 560px) { .bereich-bild .punkte { grid-template-columns: 1fr; } }

/* So geht's: der Tag als Zeitleiste */
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 7.4rem; top: 0; bottom: 0; width: 2px; background: var(--border); }
.zeitleiste li { display: grid; grid-template-columns: 6.4rem 2rem 1fr; gap: 0 .6rem; padding: 1.1rem 0; align-items: start; }
.zeitleiste .wann { font-size: 1.3rem; text-align: right; color: var(--ink); }
.zeitleiste .wann small { display: block; font-family: var(--font); font-weight: 500; color: var(--muted); font-size: .78rem; }
.zeitleiste .punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink-2); margin: .25rem auto 0; position: relative; z-index: 1; }
.zeitleiste h3 { margin: 0 0 .3rem; }
.zeitleiste p { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 640px) { .zeitleiste::before { left: 1rem; } .zeitleiste li { grid-template-columns: 2rem 1fr; } .zeitleiste .wann { grid-column: 2; text-align: left; margin-bottom: .2rem; } .zeitleiste .punkt { grid-row: 1 / span 2; } }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; counter-reset: s; }
.schritte li { padding: 1.2rem; counter-increment: s; }
/* Die Ziffer steht frei, ohne farbigen Kreis dahinter (keine Symbol-Kachel). */
.schritte li::before { content: counter(s); display: block; font-size: 1.9rem; color: var(--ink-2); margin-bottom: .4rem; }
.schritte b { display: block; color: var(--ink); font-size: 1.2rem; margin-bottom: .2rem; }
.schritte p { margin: 0; color: var(--ink-2); font-size: .97rem; }
@media (max-width: 900px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .schritte { grid-template-columns: 1fr; } }

/* Community: Zitatblock */
.zitat { border-left: 4px solid var(--border); padding: .2rem 0 .2rem 1.2rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--ink); font-weight: 500; max-width: 60ch; margin: 0; }
.zitat small { display: block; margin-top: .6rem; color: var(--muted); font-size: .9rem; font-weight: 500; }

/* Supporter: Preise */
/* DREI KARTEN SEIT DEM 12.10.2026: Kern (0 €), monatlich, jährlich. Nur
   diese eine Seite benutzt das Raster (nachgemessen: ein Treffer für
   `class="preise"` in website/).

   DIE HÖCHSTBREITE KAM AUS DER MESSUNG, nicht aus dem Gefühl. Mit 900 px sind
   es bei 1280 px Fenster 289 px je Karte, und der breiteste Betrag
   („29,99 € im Jahr") steht in einer Zeile; unter 760 px eine Spalte zu
   343 px (Telefon, 375 px). Gemessen im Browser am 12.10.2026. Vorher stand
   hier die Messung für zwei Karten mit 620 px. */
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 900px; }
.preis { padding: 1.4rem; display: grid; gap: .3rem; align-content: start; }
.preis .betrag { font-size: clamp(2.6rem, 4.4vw, 3.6rem); }
.preis .betrag small { font-family: var(--font); font-style: normal; font-size: 1rem; font-weight: 500; color: var(--muted); margin-left: .3rem; letter-spacing: 0; }
.preis .hinweis { color: var(--muted); font-size: .92rem; }
/* Das Abo-Paket trägt den Accent-Rand der Auswahl, keine grüne Füllung. */
.preis.hervor { outline: 1px solid var(--accent); outline-offset: -1px; }
@media (max-width: 760px) { .preise { grid-template-columns: 1fr; } }
.liste-frei { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0; color: var(--ink-2); }
.liste-frei li { break-inside: avoid; padding: .35rem 0 .35rem 1.6rem; position: relative; }
.liste-frei li::before { content: ""; position: absolute; left: 0; top: .75rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
@media (max-width: 560px) { .liste-frei { columns: 1; } }

/* Zwei Listen statt einer: was der Kern kann, und was zum Abo gehoert
   (KONZEPT §15.0.2). Der Punkt vor dem Abo-Eintrag ist ein Ring statt einer
   Scheibe — gleiche Form, anderer Zustand, ohne zweite Farbe. */
.abo-kopf { margin: 2rem 0 .8rem; font-size: 1.2rem; color: var(--ink-2); }
.liste-abo { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0; color: var(--ink-2); }
.liste-abo li { break-inside: avoid; padding: .35rem 0 .35rem 1.6rem; position: relative; }
.liste-abo li::before { content: ""; position: absolute; left: 0; top: .75rem; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent); }
@media (max-width: 560px) { .liste-abo { columns: 1; } }

/* Einladung: die Code-Box */
.einladung-karte { max-width: 560px; margin-inline: auto; text-align: center; }
.code-box { padding: 1.4rem; margin: 1.6rem 0; display: grid; gap: .8rem; justify-items: center; }
.code-box .label { font-size: 1.05rem; color: var(--ink-2); }
/* Die Sperrung des Codes ist funktional (sechs Zeichen lesen), keine Zierde. */
.code { font-family: var(--display); font-weight: 700; font-size: clamp(2.8rem, 8vw, 4.4rem); letter-spacing: .14em; line-height: 1; color: var(--ink); }
.code-box .nurdu { margin: 0; color: var(--muted); font-size: .88rem; max-width: 34ch; }
.knopf.fertig { background: var(--accent-2); }
body.ohne-code .code-box, body.ohne-code .nur-mit-code { display: none; }

/* Rechtsseiten (aus lib/data/legal_docs.dart erzeugt) */
.rechtstext { padding-block: 1rem 3rem; }
/* „Datenschutzerklärung“ ist zwanzig Zeichen lang und passte bei 320 px
   nicht in eine Zeile — der Browser brach es hart, ohne Bindestrich, nach
   „…erklärun“. Kleinere Schrift auf schmalen Geräten löst das an der
   Wurzel; die Trennung darunter bleibt nur als Notnagel. */
.rechtstext h1 { margin: 1.8rem 0 .4rem; font-size: clamp(1.8rem, 6.4vw, 3.4rem); }
.rechtstext h2 { font-size: 1.5rem; margin: 2.1rem 0 .5rem; scroll-margin-top: 90px; line-height: 1.2; }
.rechtstext h3 { font-size: 1.15rem; color: var(--ink-2); margin: 1.4rem 0 .4rem; line-height: 1.2; }
.rechtstext p, .rechtstext li { color: var(--ink-2); font-size: 1rem; }
.rechtstext ul { padding-left: 20px; }
.rechtstext li { margin: 5px 0; }
nav.doks { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); padding-top: 14px; }
nav.doks::-webkit-scrollbar { display: none; }
nav.doks a { padding: 13px 16px 11px; font-size: 1.05rem; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
nav.doks a:hover { color: var(--ink); text-decoration: none; }
nav.doks a.an { color: var(--accent); border-bottom-color: var(--accent); }
/* Hinweis-Kasten: Fläche in der Tonfarbe mit 12 %, Rand mit 40 %, Radius 12. */
.geltung { display: flex; align-items: center; gap: 12px; background: rgba(39,209,124,.12); border: 1px solid rgba(39,209,124,.40); border-radius: var(--rund); padding: 13px 16px; margin: 18px 0 8px; font-size: .94rem; color: var(--ink-2); }
/* Das Zeichen steht frei in der Tonfarbe — kein farbiges Quadrat dahinter. */
.geltung .marke2 { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--accent); flex-shrink: 0; }
.toc { padding: 20px 22px; margin: 26px 0 34px; }
.toc b { display: block; color: var(--ink-2); font-size: 1.1rem; margin-bottom: 14px; }
.toc-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 26px; font-size: .95rem; }
@media (max-width: 640px) {
  .toc-liste { grid-template-columns: 1fr; gap: 0; }
  /* 24 px hohe Sprungmarken waren auf dem Handy nicht zu treffen. */
  .toc-liste a { display: block; padding: 10px 0; }
}

/* 404 */
.vierhundertvier { text-align: center; padding-block: clamp(4rem, 12vw, 9rem); }
.vierhundertvier .zahl { font-size: clamp(5rem, 18vw, 12rem); color: var(--ink); }
.vierhundertvier .lead, .einladung-karte .lead { margin-inline: auto; }
.einladung-karte .schritte { text-align: left; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .einladung-karte .schritte { grid-template-columns: 1fr; } }

/* ---- Bewegung: obendrauf, nie Voraussetzung ------------------------ */
/* Erste Fassung: .zeig war unsichtbar, bis der Beobachter es freigab. In einem
   Hintergrund-Tab drosselt der Browser den Beobachter — das Ticket im Hero
   stand nach 3,5 s bei Deckkraft 0,04. Ein Block darf nie DAVON abhängen,
   gesehen zu werden. Jetzt: alles sofort sichtbar; wer ins Bild kommt,
   bekommt eine kurze Einblend-Animation obendrauf. Ohne JS, ohne Beobachter,
   ohne Bewegung ist die Seite dieselbe. */
/* Nur Bewegung, keine Deckkraft: Eine pausierte Animation (Hintergrund-Tab)
   ließe ein Element mit opacity 0 unsichtbar stehen — gemessen 0,08 nach zwei
   Sekunden. Ein Element, das 10 px zu tief steht, stört niemanden. */
@keyframes rein { from { transform: translateY(12px); } to { transform: none; } }
html.js .zeig.da { animation: rein .45s ease both; }
@media (prefers-reduced-motion: reduce) {
  html.js .zeig.da { animation: none; }
  .knopf, .samstag li { transition: none; }
}

/* ---- Drucken -----------------------------------------------------------
   Rechtstexte werden ausgedruckt oder als PDF abgelegt. Ohne diese Regeln
   käme weiße Schrift auf dunklem Grund aufs Papier: viel Toner, wenig
   Lesbarkeit. Gedruckt wird der Inhalt, nicht die Oberfläche. */
@media print {
  :root { --bg: #fff; --card: #fff; --header: #eee; --border: #ccc; --nacht: #fff;
          --ink: #111; --ink-2: #222; --muted: #555; --leise: #555;
          --line: #ccc; --line-soft: #e5e5e5; --flaeche: #ccc; --accent: #067a43; }
  html, body { background: #fff; color: #111; font-size: 11pt; }
  /* Der stehende Hintergrund und das Papierkorn gehören nicht aufs Papier. */
  body::before, body::after { display: none; }
  * { background-image: none !important; box-shadow: none !important; }

  /* Was auf Papier nichts zu suchen hat. */
  .kopf, .fuss, nav.reiter, .menue-knopf, nav.doks,
  .hero-karte, .hero-schleier, .macht .bild, .telefone, .telefon,
  .cta-row, .knopf, .store, .seitenkopf .pitch, .bereiche-nav,
  canvas, .samstag-wrap .telefon, .bereich-bild .telefon { display: none !important; }

  /* Der Text bekommt die ganze Seite. */
  .wrap, .wrap-lese { width: auto; max-width: none; margin: 0; padding: 0; }
  .abschnitt, .bereich, .seitenkopf { padding-block: 0; margin-bottom: 1.2em; }
  main { display: block; }

  /* Überschriften bleiben bei ihrem Absatz, Absätze reißen nicht auf. */
  h1, h2, h3 { break-after: avoid; color: #111; }
  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; margin-top: 1.4em; }
  p, li { orphans: 3; widows: 3; }
  .faq details { break-inside: avoid; }
  .faq details[open] summary ~ * { display: block; }

  /* Auf Papier ist ein Link ohne Adresse eine Sackgasse. Interne Ziele
     bekommen die volle Adresse, damit man sie abtippen kann. */
  a { color: #111; text-decoration: underline; }
  .rechtstext a[href^="/"]::after { content: " (groundia-hopper.com" attr(href) ")"; font-size: 9pt; color: #555; }
  .rechtstext a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="mailto:"]::after { content: none; }

  /* Kästen ohne Farbe, aber mit Kante — sonst verschwimmt die Gliederung. */
  .karte, .toc, .geltung, .anzeige, .ticket, .wochenende { border: 1px solid #ccc; background: #fff; }
}