/* ============================================================
   Rechtstexte — Impressum & Datenschutzerklärung
   Eisbach Warriors München e.V.

   Geteiltes Stylesheet für die beiden Pflichtseiten. Bewusst
   schlank: Rechtstexte sind Lesetexte, keine Kompositionen.

   TODO: Beim Umzug nach Kirby geht dieses Stylesheet in das
   gemeinsame Site-CSS auf; die Startseite nutzt derzeit noch
   eigene Inline-Styles mit dem Token-Namen --purple statt
   --color-primary. Beide Dateien beim Kirby-Bau vereinheitlichen.
   ============================================================ */

@font-face{
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* Lokal gehostet, SIL Open Font License 1.1 (Lizenzkopie liegt
     im selben Verzeichnis). Kein Google-Fonts-CDN — CLAUDE.md §2. */
  src: url(../fonts/anton/anton-latin-400-normal.woff2) format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter/inter-latin-400-normal.woff2) format('woff2');
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter/inter-latin-600-normal.woff2) format('woff2');
}

:root{
  /* Verbindliches Satzungs-Lila (vom Vorstand bestätigt 09.10.2026).
     Nur hier ändern. */
  --color-primary: #4b1e63;
  --color-primary-deep: #33143f;
  --color-primary-tint: #efe7f2;
  /* DESIGN.md: purple-tint-strong / purple-tint-muted — abgeleitete
     Tint-Stufen desselben Satzungs-Lila; bei einer Änderung von
     --color-primary oben von Hand mitziehen. */
  --color-primary-tint-strong: #e3cdee;
  --color-primary-tint-muted: #cdb2da;
  /* Nicht in DESIGN.md-Frontmatter benannt (nur als Hex im Fließtext,
     Roster-Hover/Fokus-Zustand); Name hier vergeben, damit auch dieser
     Wert an einer Stelle austauschbar bleibt. */
  --color-primary-tint-hover: #d9c3e6;

  --ice: #ffffff;
  --ice-dim: #f5f3f7;
  --ink: #1a1a1a;        /* CLAUDE.md §3 — Fließtext, nicht reines Schwarz */
  --ink-soft: #5a5a5a;   /* CLAUDE.md §3 — Hilfsgrau, Meta-Angaben */
  --ink-deep: #0c0a10;   /* nur als Fläche: Fußbereich (DESIGN.md) */
  --line: #ddd6e0;
  --focus: #7a3aa3;

  --warn-bg: #fff4d6;
  --warn-ink: #6b4b00;
  --warn-line: #e0b64a;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --font-display: "Anton", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{ box-sizing: border-box; }

/* ============================================================
   Aus surfaces/startseite/index.html (freigegebener Entwurf,
   Zeilen 77-631) übernommen. Token-Umbenennung: --purple(-deep)
   -> --color-primary(-deep); Fußbereich-Fläche: --ink -> --ink-deep.
   ============================================================ */

body{
  margin: 0;
  background: var(--ice);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;

  /* Kurze Seiten (News, Kontakt) endeten sonst dort, wo ihr Inhalt aufhört:
     unter der schwarzen Fußzeile blieb ein weißer Streifen bis zum
     Fensterrand stehen. Die Seite füllt jetzt mindestens die Fensterhöhe,
     <main> nimmt den Überschuss auf und schiebt die Fußzeile nach unten.
     dvh statt vh, weil die mobilen Browserleisten sonst mitrechnen — der
     Verkehr kommt laut CLAUDE.md §2 überwiegend vom Handy. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1 0 auto;
}

::selection{ background: var(--color-primary); color: var(--ice); }

::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: var(--ice-dim); }
::-webkit-scrollbar-thumb{ background: var(--color-primary); border-radius: 999px; border: 3px solid var(--ice-dim); }
html{ scrollbar-color: var(--color-primary) var(--ice-dim); scrollbar-width: thin; }

a{ color: var(--color-primary); }
a:hover{ color: var(--color-primary-deep); }
img, svg{ max-width: 100%; display: block; }

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* --focus (#7a3aa3) misst 2.26:1 auf --color-primary-deep und 1.78:1 auf
   --color-primary — beides weit unter dem 3:1-Minimum aus SC 1.4.11 für
   Fokus-Indikatoren. Der globale Token bleibt unverändert (er funktioniert
   auf hellem Grund); auf dunklem Lila-Grund gewinnt hier stattdessen --ice
   (Weiß auf --color-primary-deep: 16:1, auf --color-primary: 12.6:1). Die
   Fokus-Ringe der Buttons (.puck-cta, .ghost-link) sitzen dank
   outline-offset auf dem hellen Hero-Hintergrund dahinter und sind davon
   nicht betroffen. */
.nav-overlay :focus-visible,
.tile:focus-visible,
.plate--cta :focus-visible{
  outline-color: var(--ice);
}


.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.brand-mark{
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ink);
  flex-shrink: 0;
}
.brand-mark--footer{
  width: 3.25rem;
  height: 3.25rem;
  color: var(--ice);
  margin-bottom: var(--space-3);
}


/* ---------- header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}
.wordmark{
  display: flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

.menu-toggle{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--ink);
  color: var(--ice);
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.menu-toggle:hover{ background: var(--color-primary-deep); }
.menu-toggle .bars{ width: 18px; height: 12px; position: relative; }
.menu-toggle .bars span{
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
}
.menu-toggle .bars span:nth-child(1){ top: 0; }
.menu-toggle .bars span:nth-child(2){ top: 5px; }
.menu-toggle .bars span:nth-child(3){ top: 10px; }

/* full-roster nav overlay */
.nav-overlay{
  position: fixed;
  inset: 0;
  background: var(--color-primary-deep);
  color: var(--ice);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-overlay[data-open="true"]{ transform: translateY(0); visibility: visible; }
@media (prefers-reduced-motion: reduce){ .nav-overlay{ transition: none; } }
/* Sicherheitsnetz wie .site-footer a: die Basis-a{}-Regel weiter unten in
   dieser Datei setzt Linkfarbe var(--color-primary) (Lila) — auf der
   dunklen --color-primary-deep-Flächenfarbe dieses Overlays wäre das
   Kontrast 1.27:1, weit unter dem 4.5:1-Minimum. .roster-list a:hover/
   :focus-visible und die [aria-disabled]/[data-draft]-Zustände setzen ihre
   eigene Farbe explizit und stehen nach dieser Regel (bzw. sind über die
   Attributselektoren spezifischer), gewinnen also unverändert. */
.nav-overlay a{ color: inherit; }

.nav-overlay-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
}
.nav-close{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--ice);
  border-radius: 999px;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}
.nav-close:hover{ background: rgba(255,255,255,0.12); }

.roster-list{
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-6);
  overflow-y: auto;
  flex: 1;
}
.roster-list li{
  border-top: 1px solid rgba(255,255,255,0.18);
}
.roster-list li:last-child{ border-bottom: 1px solid rgba(255,255,255,0.18); }
.roster-list a, .roster-list [data-draft="true"]{
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  text-decoration: none;
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.roster-list a:hover, .roster-list a:focus-visible{ color: var(--color-primary-tint-hover); }
.roster-list .num{
  font-weight: 800;
  min-width: 2.4ch;
  opacity: 0.6;
}
.roster-list a[aria-disabled="true"], .roster-list [data-draft="true"]{
  pointer-events: none;
  color: rgba(255,255,255,0.4);
}
.roster-list .tag{
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  align-self: center;
}


/* ---------- hero ---------- */
.hero{
  position: relative;
  overflow: clip;
  padding-block: var(--space-6) var(--space-5);
  isolation: isolate;
}
.crest-watermark{
  display: none;
  position: absolute;
  top: 50%;
  /* Rechte Kante bündig mit der Inhaltsspalte (.wrap: 74rem, Innenabstand
     --space-4), statt angeschnitten über den Seitenrand hinaus. */
  right: max(var(--space-4), calc((100% - 74rem) / 2 + var(--space-4)));
  transform: translateY(-50%);
  width: min(42vw, 32rem);
  aspect-ratio: 893 / 967;
  color: var(--color-primary);
  opacity: 0.07;
  z-index: -1;
  pointer-events: none;
}
@media (min-width: 64rem){
  .crest-watermark{ display: block; }
}
.hero-heading{
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.hero-eyebrow-free{ /* deliberately no kicker/eyebrow label above the headline */ }

.hero h1{
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 10vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  max-width: 14ch;
  color: var(--ink);
}
.hero h1 em{
  font-style: normal;
  color: var(--color-primary);
}

/* Der Vorsatztext kommt als Kirbytext aus dem Panel und bringt seine
   eigenen <p> mit (Ausgaberegel in site/snippets/angabe.php). Der
   Behaelter traegt deshalb die Typografie, die Absaetze darin nur ihren
   Abstand zueinander — Muster wie bei .split p + p weiter unten. */
.hero .lede{
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0 0 var(--space-5);
}
.hero .lede p{ margin: 0; }
.hero .lede p + p{ margin-top: var(--space-3); }

.hero-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.puck-cta{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 9rem;
  height: 9rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--ice);
  text-decoration: none;
  text-align: center;
  padding: var(--space-3);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--color-primary) 55%, transparent);
  transition: transform 180ms cubic-bezier(0.16,1,0.3,1), box-shadow 180ms ease-out, background 180ms ease-out;
  flex-shrink: 0;
}
.puck-cta-num{
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
}
.puck-cta-label{
  font-family: var(--font-body);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  max-width: 6.5rem;
}
.puck-cta:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 36px -14px color-mix(in srgb, var(--color-primary) 60%, transparent);
  background: var(--color-primary-deep);
}
.puck-cta:active{ transform: translateY(-1px) scale(1.01); }

/* Draft-Zustand: reuses the same "muted colour, no hover-darken response"
   pattern already established for .tile[data-draft="true"] (DESIGN.md,
   Draft/Unpublished Content) instead of inventing a new one. The ambient
   CTA glow is reserved for the live, actionable button — a draft target
   has neither. */
.puck-cta[data-draft="true"]{
  background: var(--color-primary-deep);
  color: var(--color-primary-tint-muted);
  box-shadow: none;
  cursor: default;
}
.puck-cta[data-draft="true"]:hover,
.puck-cta[data-draft="true"]:active{
  transform: none;
  background: var(--color-primary-deep);
  box-shadow: none;
}

.ghost-link{
  text-decoration: none;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
}
.ghost-link:hover{ color: var(--color-primary); }
/* Selbe Draft-Logik wie .puck-cta[data-draft="true"], übersetzt auf hellen
   statt dunklen Untergrund: gedämpftes Grau statt Lila, keine
   Hover-Verfärbung. */
.ghost-link[data-draft="true"]{
  color: var(--ink-soft);
  border-bottom-color: var(--ink-soft);
  cursor: default;
}
.ghost-link[data-draft="true"]:hover{ color: var(--ink-soft); }


/* ---------- board strip: nächstes spiel ---------- */
.board-strip{
  background: var(--color-primary-deep);
  color: var(--ice);
  padding-block: var(--space-4);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 64px);
}
.board-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  justify-content: space-between;
}
.board-label{
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.8rem, 2.6vw, 0.95rem);
  color: var(--color-primary-tint-strong);
  max-width: 32ch;
}
.board-empty{
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.8);
}
.board-empty .flip{
  display: inline-block;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  animation: flip-in 520ms cubic-bezier(0.16,1,0.3,1) both;
}
@media (prefers-reduced-motion: reduce){ .board-empty .flip{ animation: none; } }
@keyframes flip-in{
  from{ opacity: 0; transform: rotateX(-90deg) translateY(-6px); }
  to{ opacity: 1; transform: rotateX(0) translateY(0); }
}


/* ---------- dual-career section ---------- */
.split{
  padding-block: var(--space-7);
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 56rem){
  .split{ grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}
.split h2{
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  max-width: 16ch;
}
.split p{
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.split p + p{ margin-top: var(--space-3); }

.faceoff{
  position: relative;
  aspect-ratio: 1;
  max-width: 22rem;
  margin-inline: auto;
}
.faceoff svg{ width: 100%; height: 100%; }
.faceoff .ring{
  stroke-dasharray: 578;
  stroke-dashoffset: 578;
  animation: draw-ring 1100ms cubic-bezier(0.16,1,0.3,1) both;
}
.faceoff .dot{
  transform-origin: 100px 100px;
  animation: drop-dot 460ms cubic-bezier(0.16,1,0.3,1) 820ms both;
}
@keyframes draw-ring{ to{ stroke-dashoffset: 0; } }
@keyframes drop-dot{ from{ transform: scale(0); } to{ transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
  .faceoff .ring{ animation: none; stroke-dashoffset: 0; }
  .faceoff .dot{ animation: none; }
}


/* ---------- pages grid (jersey tiles) ---------- */
.pages-section{
  padding-block: var(--space-6) var(--space-7);
  background: var(--color-primary-deep);
  border-top: 1px solid var(--color-primary-deep);
  border-bottom: 1px solid var(--color-primary-deep);
}
.pages-section > .wrap > h2{
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  margin: 0 0 var(--space-5);
  max-width: 24ch;
  color: var(--ice);
}
.tile-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.16);
}
@media (min-width: 40rem){
  .tile-grid{ grid-template-columns: repeat(4, 1fr); }
}
.tile{
  background: var(--color-primary-deep);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 9rem;
  text-decoration: none;
  color: var(--ice);
  transition: background 160ms ease-out;
}
.tile:hover, .tile:focus-visible{ background: var(--color-primary); }
.tile .num{
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 800;
  font-size: 2.4rem;
  color: var(--ice);
  line-height: 1;
}
.tile .name{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
}
.tile[data-draft="true"]{
  color: var(--color-primary-tint-muted);
  cursor: default;
}
.tile[data-draft="true"] .num{ color: var(--color-primary-tint-muted); opacity: 0.7; }
.tile[data-draft="true"]:hover{ background: var(--color-primary-deep); }
.tile .status{
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: var(--space-2);
  color: var(--color-primary-tint-strong);
}
.tile[data-draft="true"] .status{ color: var(--color-primary-tint-muted); }


/* ---------- plate (shared shape) ----------
   DESIGN.md: "the same plate shape is reused with a purple-deep fill for
   the Mitglied-werden panel — same shape, different fill." The comp only
   ever styled .plate scoped under .registry, which was the comp's own
   oversight, not the intent — outside .registry (the homepage Torhüter
   block today, the Mitglied-werden panel from Task 8) that left .plate
   with no border, radius, padding or internal spacing at all. The shape
   lives here, unscoped; .registry .plate below carries only what is
   genuinely registry-specific (the smaller meta type size/colour). */
.plate{
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

/* ---------- registry plate ---------- */
.registry{
  padding-block: var(--space-5);
}
.registry .plate{
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.registry .plate strong{ color: var(--ink); }
.registry .plate .vr{
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ---------- plate CTA modifier ----------
   Faithful port of the inline-styled treatment on the comp's dropped
   "Mitglied werden" plate (surfaces/startseite/index.html:782): background
   and border in the deep purple, text in the light purple tint. Reused by
   the homepage's Torhüter block and, per Task 8, the Mitglied-werden panel. */
.plate--cta{
  background: var(--color-primary-deep);
  border-color: var(--color-primary-deep);
  color: var(--color-primary-tint-strong);
}
/* Sicherheitsnetz wie .site-footer a / .nav-overlay a: die Basis-a{}-Regel
   weiter unten in dieser Datei setzt Linkfarbe var(--color-primary) (Lila)
   — auf dieser --color-primary-deep-Fläche wäre das Kontrast 1.27:1, weit
   unter dem 4.5:1-Minimum. Ein <a> hier erbt stattdessen die helle
   .plate--cta-Textfarbe (--color-primary-tint-strong, Kontrast 10.84:1). */
.plate--cta a{ color: inherit; }

/* Vertikaler Rhythmus für eine .wrap-Sektion, die eine einzelne Plate
   trägt (Torhüter-Block heute, ab Aufgabe 8 auch das Mitglied-werden-
   Panel) — Wert aus dem Entwurf (surfaces/startseite/index.html:781:
   style="padding-block: 0 var(--space-6);"), hier als Klasse statt als
   Inline-Style, damit sie wie jede andere Bande ihren eigenen Abstand
   trägt statt ihn dem umgebenden Inhalt zu überlassen. */
.plate-section{
  padding-block: 0 var(--space-6);
}


/* ---------- footer ---------- */
.site-footer{
  background: var(--ink-deep);
  color: rgba(255,255,255,0.82);
  padding-block: var(--space-6) var(--space-5);
}
.footer-grid{
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 48rem){
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
}
.site-footer h3{
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ice);
  margin: 0 0 var(--space-3);
}
.site-footer p, .site-footer address{ font-style: normal; margin: 0 0 var(--space-2); font-size: 0.85rem; }
/* Sicherheitsnetz: die Basis-a{}-Regel weiter unten in dieser Datei
   setzt Linkfarbe var(--color-primary) (Lila) fürs Rechtstext-
   Fließtext — auf der dunklen --ink-deep-Fußfläche wäre das Kontrast
   1.56:1, weit unter dem 4.5:1-Minimum für Fließtext. .footer-links a
   und .legal-row a setzen ihre eigene helle Farbe explizit und stehen
   nach dieser Regel, gewinnen also unverändert; ein unverlinkt
   dastehender <a> (z. B. die Kontakt-E-Mail) erbt stattdessen die
   ohnehin helle .site-footer-Textfarbe. */
.site-footer a{ color: inherit; }
.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li + li{ margin-top: var(--space-2); }
.footer-links a{ text-decoration: none; color: rgba(255,255,255,0.82); }
.footer-links a:hover, .footer-links a:focus-visible{ color: var(--ice); text-decoration: underline; }
.placeholder-chip{
  display: inline-block;
  border: 1px dashed rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.6);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.85rem;
}
.legal-row{
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
}
.legal-row ul{ list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; }
.legal-row a{ color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }

.wrap{
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* ---------- Lesetext-Maß ----------
   Eigene Klasse statt Element-Selektoren: main/h1/h2/h3/p/ul/ol/li
   würden sonst auf jeder Seite gelten, auch auf der gestalteten
   Startseite, deren eigene Klassen (.split h2, .pages-section > .wrap
   > h2 usw.) diese Eigenschaften bewusst nicht setzen. .prose wird
   zusammen mit .wrap auf <main> der Rechtstextseiten gesetzt; die
   engere max-width hier gewinnt gegen .wrap, weil .prose danach
   im Dokument steht (gleiche Spezifität, spätere Regel gewinnt). */
.prose{
  max-width: 44rem;
  line-height: 1.65;
  padding-block: var(--space-6);
}

.skip-link{
  position: absolute;
  left: 1rem;
  top: -3rem;
  background: var(--ink);
  color: var(--ice);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 6px 6px;
  z-index: 200;
  text-decoration: none;
  font-weight: 600;
  transition: top 160ms ease-out;
}
.skip-link:focus{ top: 0; }

/* ---------- Entwurfs-Warnbanner ----------
   ENTFERNEN, sobald kein TODO mehr auf der Seite steht.
   Solange dieses Banner sichtbar ist, darf die Seite nicht live. */
.draft-banner{
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-bottom: 3px solid var(--warn-line);
  padding: var(--space-3) 0;
  font-size: 0.9rem;
}
.draft-banner strong{ display: block; font-size: 1rem; }

/* ---------- Fließtext (nur innerhalb .prose) ---------- */
.prose h1{
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}
.prose h2{
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: var(--space-6) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-primary);
}
.prose h3{
  font-size: 1rem;
  font-weight: 700;
  margin: var(--space-4) 0 var(--space-2);
}
.prose p, .prose ul, .prose ol{ margin: 0 0 var(--space-3); }
.prose ul, .prose ol{ padding-left: 1.25rem; }
.prose li{ margin-bottom: var(--space-2); }

.block{
  margin-bottom: var(--space-4);
}
.block .label{
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
address{
  font-style: normal;
}
.meta{
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---------- TODO-Marker ----------
   Absichtlich laut. Jeder sichtbare Marker ist ein Launch-Blocker. */
.todo{
  display: block;
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-left: 4px solid var(--warn-line);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
  font-size: 0.9rem;
}
.todo code{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
}
span.todo{ display: inline-block; padding: 0.1rem 0.4rem; margin: 0; border-left-width: 3px; }

/* ---------- Spielplan-Tabelle ----------
   Neu für Aufgabe 7: bislang gab es in diesem Stylesheet keine Tabellen-
   und keine Karten-Darstellung. Auf schmalen Viewports (Traffic kommt laut
   CLAUDE.md §2 primär über den Instagram-Bio-Link aufs Handy) wird jede
   Tabellenzeile stattdessen als eigene Karte gerendert — Kopfzeile
   ausgeblendet, jede Zelle zeigt ihre Spaltenbeschriftung per
   data-label/::before davor. Markup bleibt eine einzige <table>; es wird
   nicht serverseitig verzweigt. */
.fixtures-table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-5);
  font-size: 0.95rem;
}
.fixtures-table th,
.fixtures-table td{
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
}
.fixtures-table thead th{
  font-family: var(--font-display);
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--color-primary);
}
.fixtures-table .ort{
  color: var(--ink-soft);
  font-size: 0.85rem;
}

@media (max-width: 40rem){
  .fixtures-table thead{
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .fixtures-table, .fixtures-table tbody, .fixtures-table tr, .fixtures-table td{
    display: block;
    width: 100%;
  }
  .fixtures-table tr{
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .fixtures-table td{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: 0.3rem 0;
    border-bottom: none;
  }
  .fixtures-table td::before{
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: 600;
    color: var(--ink-soft);
  }
}

/* ---------- Gründungspaket (Abschnitt auf /mitglied-werden) ----------
   Der Abschnitt liegt innerhalb von .prose und übernimmt dessen Lesemaß
   und Überschriftenstufen — er ist Teil derselben Seite, keine zweite
   gestaltete Fläche. Neu sind hier nur drei Dinge, die es im Stylesheet
   noch nicht gab: die Kennzahlen-Reihe, die Kartenvisualisierung und das
   Aufklapp-Register. Die Preistabelle erbt bewusst .fixtures-table vom
   Spielplan — dieselbe Tabellenform, dieselbe Umschaltung auf Karten am
   Handy, nur mit rechtsbündigem Betrag. */

.paket-zahlen{
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
@media (min-width: 34rem){
  .paket-zahlen{ grid-template-columns: repeat(3, 1fr); }
}
.paket-zahlen li{
  background: var(--ice);
  padding: var(--space-3);
  margin: 0;
  display: grid;
  gap: 0.15rem;
}
/* Anton für die Zahl — DESIGN.md, „The Numerals-Are-Anton Rule". */
.paket-zahlen .num{
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.paket-zahlen strong{ font-size: 0.95rem; }

/* Preistabelle: nur die Abweichungen gegenüber .fixtures-table. */
.preis-tabelle th[scope="row"]{ font-weight: 600; }
.preis-tabelle .betrag{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.preis-tabelle .summe th,
.preis-tabelle .summe td{
  font-weight: 700;
  border-top: 2px solid var(--color-primary);
  border-bottom: none;
}
@media (max-width: 40rem){
  /* In der Kartenansicht steht der Betrag rechts neben seiner
     Beschriftung, nicht mehr rechtsbündig in einer Spalte. */
  .preis-tabelle .betrag{ text-align: left; }
  .preis-tabelle th[scope="row"]{
    display: block;
    width: 100%;
    padding: 0.3rem 0;
    border-bottom: none;
  }
  .preis-tabelle .summe th{ border-top: none; }
}

.paket-split{
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 48rem){
  .paket-split{ grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}
.paket-liste{ margin: 0; padding-left: 1.25rem; }

/* Die Karte ist in CSS gebaut, kein Bild: sie zeigt ein Muster, keine
   echte Karte, und muss sich mit --color-primary mitfärben, sobald der
   verbindliche Satzungs-Lilawert vorliegt. */
.jahreskarte{
  position: relative;
  overflow: hidden;
  background: var(--color-primary-deep);
  color: var(--color-primary-tint-strong);
  border-radius: 6px;
  padding: var(--space-4);
  display: grid;
  gap: 0.15rem;
  min-height: 11rem;
  align-content: center;
}
.jahreskarte-wappen{
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  width: 9rem;
  height: 9rem;
  opacity: 0.12;
  fill: var(--ice);
  pointer-events: none;
}
.jahreskarte-label,
.jahreskarte-saison{
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.jahreskarte-nummer{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 12vw, 3.4rem);
  line-height: 1;
  color: var(--ice);
  font-variant-numeric: tabular-nums;
}
.jahreskarte-fuss{
  margin-top: var(--space-3);
  font-size: 0.7rem;
  color: var(--color-primary-tint-muted);
}

/* Aufklapp-Register ohne JavaScript — <details> bringt Tastaturbedienung
   und den Aufklappzustand selbst mit. */
.faq{
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: var(--space-4);
}
.faq details + details{ border-top: 1px solid var(--line); }
.faq summary{
  cursor: pointer;
  padding: var(--space-3);
  font-weight: 600;
  list-style-position: inside;
}
.faq summary:hover{ background: var(--color-primary-tint); }
.faq details[open] summary{ border-bottom: 1px solid var(--line); }
.faq details > *:not(summary){
  margin: var(--space-3);
}