:root {
  color-scheme: dark light;
  --bg: #0f1411;
  --bg-soft: #18221d;
  --bg-card: #1c2823;
  --fg: #ecf2ee;
  --fg-muted: #9caea3;
  --brand: #2c8a5a;
  --brand-soft: #1f5f3f;
  --brand-ink: #ffffff;
  --line: #243a2e;
  --radius: 14px;
  /* Die Breite der Inhaltsspalte. 1080 liess auf einem Tablet im Querformat
     sichtbar Platz liegen; 1300 fuellt auch ein grosses (1366) fast ganz.
     Das Lesemass des Fliesstextes haengt nicht hieran — Absaetze sind
     getrennt auf 52ch bzw. 60ch begrenzt. Dieser Deckel wirkt auf Kacheln
     und Raster. */
  --max: 1300px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f8f6;
    --bg-soft: #ffffff;
    --bg-card: #ffffff;
    --fg: #15201a;
    --fg-muted: #5a6a62;
    --brand: #1f5f3f;
    --brand-soft: #2c8a5a;
    --brand-ink: #ffffff;
    --line: #d9e3dd;
  }
}

/* Erzwungenes Theme ueber ?theme=dark|light in der URL — etwa wenn Impressum
   und Datenschutz aus dem (fest dunklen) Webview geoeffnet werden. Die
   Attribut-Regel schlaegt die System-Media-Query, deshalb gilt sie unabhaengig
   von der Betriebssystem-Einstellung. */
:root[data-theme="dark"] {
  --bg: #0f1411; --bg-soft: #18221d; --bg-card: #1c2823;
  --fg: #ecf2ee; --fg-muted: #9caea3;
  --brand: #2c8a5a; --brand-soft: #1f5f3f; --line: #243a2e;
}
:root[data-theme="light"] {
  --bg: #f5f8f6; --bg-soft: #ffffff; --bg-card: #ffffff;
  --fg: #15201a; --fg-muted: #5a6a62;
  --brand: #1f5f3f; --brand-soft: #2c8a5a; --line: #d9e3dd;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Verweise im Fliesstext und in der Fusszeile sind unterstrichen: Farbe
   allein reicht nicht — wer Gruen und Grau schlecht auseinanderhaelt,
   findet einen Verweis sonst nur durch Absuchen mit der Maus. Knoepfe,
   Kacheln und die Menuezeile bleiben ohne Strich; die sehen ohnehin
   anklickbar aus. */
p a:not(.btn), li a:not(.btn), td a, th a, figcaption a, .foot-links a {
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
/* JS setzt .scrolled, sobald die Seite ein Stück gescrollt ist —
   der Header wird dann kompakter, opaker und wirft einen Schatten. */
header.scrolled {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.10);
}
header.scrolled .nav { padding: 9px 0; }
.nav { transition: padding .3s ease; }
.nav {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 0;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: 0.2px;
  color: var(--fg);
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 9px;
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* Der Kopf darf breiter sein als der Inhalt — ein eigener Deckel nur fuer
   die Kopfzeile; der Textspalte darunter bleibt ihr Lesemass. */
header .wrap { max-width: 1400px; }
.nav-links { margin-left: auto; display: flex; flex-wrap: wrap;
  justify-content: flex-end; row-gap: 2px; gap: 18px; }
.nav-links a {
  /* 16px statt 14: Der Platz kommt vom entfallenen Live-Link — die Zielgruppe
     sind Vereine mit vielen aelteren Augen, und die Menuezeile ist das erste,
     was jemand liest. */
  color: var(--fg-muted); font-size: 16px; font-weight: 500;
  position: relative; padding-bottom: 2px;
  transition: color .2s ease;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.nav-links a:hover { color: var(--fg); text-decoration: none; }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--fg); }
/* ── Das Menue auf dem Handy ──────────────────────────────────────────────
   Unter 900px war die Menuezeile bisher einfach weg — wer am Telefon kam,
   hatte keinen Weg zu Preisen, Anleitung oder Kontakt ausser Scrollen. Jetzt
   klappt ein Knopf das Menue als Liste unter der Kopfzeile auf (nav.js
   schaltet `nav-open` und aria-expanded). Ohne Skript bleibt das Menue
   offen stehen: lieber eine Liste zu viel als gar keine. */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); color: var(--fg);
  cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; display: block; margin: 0 auto; }
.nav-toggle .icon-close { display: none; }
header.nav-open .nav-toggle .icon-open { display: none; }
header.nav-open .nav-toggle .icon-close { display: block; }
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; row-gap: 0; }
  .nav-toggle { display: block; }
  .nav-links {
    flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin: 10px 0 4px;
    border-top: 1px solid var(--line);
  }
  .nav-links a {
    display: block; padding: 12px 4px; font-size: 18px;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a::after { display: none; }
  header.has-toggle:not(.nav-open) .nav-links { display: none; }
  header.scrolled .nav { padding: 9px 0; }
}

/* Die Kernbotschaft zwischen Ueberschrift und Systemliste: groesser und
   dunkler als der Fliesstext, damit sie als Antwort auf „wozu?" gelesen wird
   und nicht als erster Satz der Aufzaehlung. */
/* Die drei Belege unter den Hero-Knoepfen. Punkte statt Aufzaehlungszeichen,
   damit sie in einer Zeile stehen und nicht wie eine Liste wirken — sie sind
   eine Antwort, kein Inhaltsverzeichnis. */
.hero-facts {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: var(--fg-muted); font-size: 16px;
}
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before {
  content: ''; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
}

.lead-claim {
  font-size: 20px; font-weight: 600; line-height: 1.45;
  color: var(--fg); margin: 14px 0 6px; max-width: 720px;
}
@media (max-width: 640px) { .lead-claim { font-size: 17px; } }

.hero {
  padding: 72px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -25%; left: 50%;
  width: min(1200px, 120%); height: 720px;
  /* --parallax wird per JS beim Scrollen gesetzt (sanfter Tiefen-Effekt). */
  transform: translateX(-50%) translateY(var(--parallax, 0px));
  background:
    radial-gradient(closest-side at 30% 40%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 70%),
    radial-gradient(closest-side at 75% 60%, color-mix(in srgb, #d8a83a 22%, transparent), transparent 70%);
  filter: blur(8px);
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.hero .wrap {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 820px) {
  .hero { padding: 48px 0 32px; }
  .hero .wrap { grid-template-columns: 1fr; }
}
/* Startaktion im Hero. Kraeftiger als das Eyebrow darueber — es ist eine
   Ansage und keine Rubrik —, aber ein Verweis und kein Knopf: Der Knopf
   „Im Play Store herunterladen" steht zwei Zeilen tiefer und soll der einzige
   bleiben, der wie ein Knopf aussieht. */
.hero-promo {
  display: block; position: relative; overflow: hidden;
  margin: 0 0 18px; padding: 14px 18px 14px 52px;
  border-radius: 14px; text-decoration: none;
  /* Gefuellt statt getoent: Das Eyebrow darueber ist bereits ein blasser
     Farbfleck. Ein zweiter daneben verschwimmt damit — dieses Feld muss sich
     von ihm absetzen, nicht ihm gleichen. */
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  border: 0;
  color: var(--brand-ink);
  font-size: 16px; line-height: 1.45;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand) 35%, transparent);
}
/* Das Geschenk als Zeichen, links im Feld. Ueber ::before und nicht als
   Zeichen im Text: Es gehoert zur Verzierung, nicht zur Vorlesereihenfolge —
   ein Screenreader soll „Zum Start 180 Tage geschenkt" sagen und nicht
   „Geschenk Zum Start". */
.hero-promo::before {
  content: "🎁"; position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%); font-size: 22px; line-height: 1;
}
.hero-promo:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--brand) 45%, transparent);
}
.hero-promo strong { display: block; font-size: 19px; font-weight: 800;
  letter-spacing: -0.01em; color: var(--brand-ink); }
.hero-promo .hero-promo-sub { display: block; font-size: 14px;
  color: color-mix(in srgb, var(--brand-ink) 85%, transparent);
  margin-top: 3px; }

/* Ein Lichtstreifen laeuft einmal quer darueber, wenn die Seite steht.
   Einmal, nicht in Schleife: Etwas, das dauernd blinkt, liest sich als
   Werbebanner, und ueber Werbebanner sieht man hinweg. Bei „Bewegung
   reduzieren" bleibt er ganz weg (siehe unten). */
@media (prefers-reduced-motion: no-preference) {
  .hero-promo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%,
      color-mix(in srgb, #fff 40%, transparent) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: heroPromoSheen 1.1s ease-out 0.5s 1 forwards;
  }
  @keyframes heroPromoSheen { to { transform: translateX(120%); } }
}

.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 14px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, transparent);
}
h1 {
  font-size: clamp(34px, 5vw, 52px); line-height: 1.08; margin: 0 0 18px;
  letter-spacing: -0.01em; font-weight: 800;
  background: linear-gradient(120deg,
    var(--fg) 0%,
    var(--fg) 55%,
    color-mix(in srgb, var(--brand) 92%, var(--fg)) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hero p.lead { font-size: 18px; color: var(--fg-muted); max-width: 52ch; margin: 0 0 28px; }
/* Die anderen Wege zur App — Play Store, Windows, Live-Ansicht — als eine
   Zeile unter den zwei Knoepfen. Vorher standen hier fuenf Knoepfe in vier
   Farben, und keiner war der erste. */
.hero-ways {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin: 18px 0 0; color: var(--fg-muted); font-size: 16px;
}
.hero-ways a { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.hero-ways .btn-badge img { height: 40px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 16px;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, box-shadow .25s ease, transform .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  color: var(--brand-ink);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 32%, transparent);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-soft), var(--brand));
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--brand) 48%, transparent);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--fg);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  text-decoration: none;
  transform: translateY(-1px);
}

/* Eigenständiger, app-badge-artiger Windows-Download-Button. Windows-Blau hebt
   ihn klar vom grünen Play-Store-Button ab. */
.btn-windows {
  background: linear-gradient(135deg, #005fb8, #0a84ff);
  color: #ffffff;
  padding: 9px 20px;
  box-shadow: 0 6px 16px color-mix(in srgb, #0a84ff 32%, transparent);
}
.btn-windows:hover {
  background: linear-gradient(135deg, #0a84ff, #3aa0ff);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px color-mix(in srgb, #0a84ff 46%, transparent);
}
.btn-windows:active { transform: translateY(0); }
.btn-windows__logo {
  flex: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
}
.btn-windows__text {
  display: flex; flex-direction: column;
  line-height: 1.18; text-align: left;
}
.btn-windows__title { font-weight: 700; font-size: 16px; }
.btn-windows__sub { font-size: 13px; font-weight: 500; opacity: .85; }

/* ── Die Turnierkarte im Hero ─────────────────────────────────────────────
   Eine laufende Runde: drei Bahnen, zwei Ergebnisse, eines noch offen. Das
   ist der gemeinsame Nenner jeder Turnierart — die Leiste darunter nennt die
   Systeme und hebt reihum eines hervor. */
.matchcard {
  padding: 18px 18px 14px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  min-width: 268px;
  animation: mcPop .5s cubic-bezier(.2,.8,.25,1) backwards;
}
.mc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.mc-round { font-size: 14px; font-weight: 700; color: var(--fg-muted); }
/* Der Punkt vor „live" pulst — das Einzige an der Karte, was sich bewegt,
   und genau das, was sie behauptet. */
.mc-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: .08em;
}
.mc-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
}
.mc-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  animation: mcPop .5s cubic-bezier(.2,.8,.25,1) backwards;
}
.mc-teams { display: grid; gap: 3px; min-width: 0; }
.mc-line {
  display: grid; grid-template-columns: 1fr 26px;
  align-items: baseline; gap: 8px; min-width: 0;
}
.mc-row + .mc-row { border-top: 1px solid var(--line); }
.mc-lane {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--bg-soft); color: var(--fg-muted);
  border: 1px solid var(--line);
}
.mc-team {
  font-weight: 600; color: var(--fg); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-score {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--fg-muted);
}
.mc-score.win { color: var(--brand); }
/* Die offene Partie steht blasser da: Sie wartet noch auf ihr Ergebnis. */
.mc-row.open .mc-team { color: var(--fg-muted); font-weight: 500; }

.mc-systems {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mc-chip {
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 999px;
  background: var(--bg-soft); color: var(--fg-muted);
  border: 1px solid var(--line);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.mc-chip.mc-more { border-style: dashed; }

@keyframes mcPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44,138,90,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(44,138,90,.28); }
}
/* Zwei von zehn Sekunden hervorgehoben, dann wieder ruhig. */
@keyframes mcAktiv {
  0%, 20%, 100% {
    background: var(--brand); color: var(--brand-ink); border-color: var(--brand);
  }
  25%, 95% {
    background: var(--bg-soft); color: var(--fg-muted); border-color: var(--line);
  }
}
@keyframes mcPop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
/* nth-child, nicht nth-of-type: Der Kopf und die Systemleiste sind
   ebenfalls divs und wuerden mitgezaehlt — die dritte Zeile bekaeme gar
   keine Verzoegerung und die erste die des Kopfes. */
.mc-row:nth-child(2) { animation-delay: .16s; }
.mc-row:nth-child(3) { animation-delay: .26s; }
.mc-row:nth-child(4) { animation-delay: .36s; }

@media (max-width: 480px) {
  .matchcard { min-width: 0; padding: 14px 14px 12px; }
  .mc-row { font-size: 14px; }
}

section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
  position: relative;
  scroll-margin-top: 76px;
}
section::before {
  content: '';
  position: absolute; top: -1px; left: 50%;
  width: 120px; height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: .6;
  pointer-events: none;
}
.hero { border-top: none; }
.hero::after { display: none; }
section h2 {
  font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 12px; letter-spacing: -0.01em;
}
section .section-lead {
  color: var(--fg-muted); max-width: 60ch; margin: 0 0 36px;
}

.features {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feature {
  padding: 22px; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative; isolation: isolate; overflow: hidden;
}
/* Cursor-Spotlight: ein weicher Lichtfleck, der dem Mauszeiger folgt.
   --mx/--my werden per JS auf die Cursor-Position innerhalb der Karte
   gesetzt; ohne JS bleibt der Fleck unsichtbar (opacity 0). */
.feature::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(
    180px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--brand) 20%, transparent),
    transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.feature:hover::before { opacity: 1; }
.feature > * { position: relative; z-index: 1; }
.feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow:
    0 14px 30px rgba(0,0,0,.16),
    0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}
.feature .icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  margin-bottom: 14px;
  transition: transform .35s cubic-bezier(.2,.8,.25,1);
}
.feature:hover .icon { transform: rotate(-4deg) scale(1.06); }
.feature .icon svg { width: 36px; height: 36px; display: block; }
.hero-logo {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
}
.hero-logo img {
  width: 140px; height: 140px; border-radius: 28px;
  box-shadow: 0 12px 36px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  animation: logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (max-width: 820px) {
  .hero-logo img { width: 96px; height: 96px; border-radius: 20px; }
}
.feature h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.feature p { margin: 0; color: var(--fg-muted); font-size: 16px; }
.grid-foot { margin: 22px 0 0; color: var(--fg-muted); font-size: 16px; }

.steps {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
}
.step { position: relative; padding-left: 56px; }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  color: var(--brand-ink);
  font-weight: 700; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 30%, transparent);
  transition: transform .25s ease, box-shadow .25s ease;
}
.step:hover::before {
  transform: scale(1.08);
  box-shadow:
    0 6px 14px color-mix(in srgb, var(--brand) 30%, transparent),
    0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent);
}
.step h3 { margin: 4px 0 6px; font-size: 16px; font-weight: 700; }
.step p { margin: 0; color: var(--fg-muted); font-size: 16px; }

/* ── Der Turniertag: ein Zeitstrahl ─────────────────────────────────────
   Nummernkreise wie bei „So funktioniert's", aber an einer durchgehenden
   Linie: Es ist EIN Tag, keine Liste von Funktionen. Auf breiten Schirmen
   zwei Spalten, auf dem Handy eine. */
.timeline {
  list-style: none; margin: 0; padding: 0;
  counter-reset: tl;
  display: grid; gap: 22px 32px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.tl-step {
  position: relative; padding-left: 58px;
  display: grid; gap: 12px;
}
.tl-step::before {
  counter-increment: tl;
  content: counter(tl);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  color: var(--brand-ink);
  font-weight: 700; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 30%, transparent);
}
/* Die Linie von Kreis zu Kreis gibt es nur, wenn die Schritte untereinander
   stehen — in mehreren Spalten liefe sie ins Leere. */
@media (max-width: 680px) {
  .tl-step::after {
    content: ''; position: absolute; left: 19px; top: 44px; bottom: -22px;
    width: 2px; background: var(--line);
  }
  .tl-step:last-child::after { display: none; }
}
.tl-when {
  display: inline-block; margin-bottom: 4px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.tl-step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.tl-step p { margin: 0; color: var(--fg-muted); font-size: 16px; }
.tl-shot {
  display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-card);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
/* Einheitliche Bildhoehe: Nur vier der sieben Stationen haben ein Bild, und
   mit voller Hoehe ragte jede davon doppelt so weit wie ihre Nachbarn. Der
   obere Ausschnitt genuegt — dort steht die Kopfzeile mit dem Reiter. */
.tl-shot img {
  display: block; width: 100%; height: 150px;
  object-fit: cover; object-position: top;
}
/* ── Die Rollen am Kopf der Anleitung ───────────────────────────────────
   Drei Karten, jede ein Pfad durch die Kapitel. Die ganze Karte ist ein
   Link auf das erste Kapitel; die Liste darin springt gezielt. */
.rollen {
  display: grid; gap: 16px; margin: 22px 0 34px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.rolle {
  display: block; padding: 18px 18px 14px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-card); color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rolle:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.rolle-icon { font-size: 26px; line-height: 1; display: block; margin-bottom: 8px; }
.rolle h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.rolle h3 a { color: inherit; text-decoration: none; }
.rolle h3 a:hover { color: var(--brand); }
.rolle > p { margin: 0 0 10px; color: var(--fg-muted); font-size: 16px; }
.rolle ol { margin: 0; padding-left: 20px; font-size: 15px; }
.rolle ol li { margin: 3px 0; }
.rolle ol a { color: var(--brand); }


.cta-card {
  margin-top: 16px;
  padding: 32px; border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 60%),
    linear-gradient(135deg, var(--brand-soft), #143828);
  color: var(--brand-ink);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
  position: relative; overflow: hidden;
}
.cta-card::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 60%);
  pointer-events: none;
}
.cta-card h3 { margin: 0 0 6px; font-size: 22px; }
.cta-card p { margin: 0; opacity: .85; }
.cta-card .btn-primary { background: #ffffff; color: var(--brand-soft); }
.cta-card .btn-primary:hover { background: #f0f5f2; }

/* Add-on module cards */
.mod-tag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--brand-ink);
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  padding: 3px 9px; border-radius: 999px;
}
.youth-pitch {
  margin-top: 12px !important;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  color: var(--fg) !important;
  font-size: 15px !important;
}

/* Pricing */
.pricing {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}
.price-card {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.price-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}
.price-card.featured {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow:
    0 14px 30px rgba(0,0,0,.16),
    0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent);
}
.price-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand-ink);
  background: linear-gradient(135deg, var(--brand), var(--brand-soft));
  padding: 4px 10px; border-radius: 999px;
}
/* „Förderer"-Tarif: warm golden accent set apart from the brand-green cards. */
.price-card.sponsor {
  border-color: #f2a90099;
  box-shadow: 0 14px 30px rgba(0,0,0,.16), 0 0 0 1px #f2a9004d;
}
.price-card.sponsor .price-badge {
  color: #3a2a00; background: linear-gradient(135deg, #ffd166, #f2a900);
}
.price-card.sponsor .price-name { color: #c98a00; }
.price-card.sponsor .price-list li::before { content: '★'; color: #f2a900; }
.price-card.sponsor .btn-primary { background: #f2a900; color: #2a1f00; }
.price-name {
  font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 8px;
}
.price-amount { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.price-period { font-size: 15px; font-weight: 600; color: var(--fg-muted); margin-left: 4px; }
.price-tag { margin: 6px 0 16px; color: var(--fg-muted); font-size: 16px; }
/* Der Knopf sitzt am unteren Rand der Kachel. Die Merkmallisten sind
   verschieden lang; ohne das stünden die Knöpfe der vier Kacheln auf vier
   verschiedenen Höhen, und die Reihe sähe unsortiert aus. */
.price-card .btn { margin-top: auto; }
.price-card .btn + .btn { margin-top: 10px; }
.price-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; }
.price-list li { position: relative; padding-left: 26px; font-size: 16px; color: var(--fg-muted); }
.price-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 800;
}
.price-card .btn { margin-top: auto; align-self: flex-start; }
.modules-title { margin: 40px 0 16px; font-size: 18px; font-weight: 700; }
.price-foot { margin-top: 22px; color: var(--fg-muted); font-size: 16px; }

footer {
  padding: 36px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--fg-muted); font-size: 16px;
}
.foot-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr auto;
  align-items: center;
}
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-links a { color: var(--fg-muted); }

/* Legal / long-form text pages (privacy, impressum) */
.legal { padding: 56px 0 32px; max-width: 760px; }
.legal h1 { font-size: clamp(28px, 4vw, 38px); margin: 0 0 8px; }
.legal .meta { color: var(--fg-muted); font-size: 16px; margin: 0 0 32px; }
.legal h2 {
  font-size: 20px; margin: 32px 0 10px; letter-spacing: -0.005em;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }
.legal h3 { font-size: 16px; margin: 20px 0 6px; }
.legal p, .legal li { color: var(--fg); }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 4px; }
.legal blockquote {
  margin: 12px 0; padding: 12px 16px;
  border-left: 3px solid var(--brand);
  background: var(--bg-card);
  border-radius: 0 8px 8px 0;
  color: var(--fg);
}
.legal blockquote p { margin: 0; }
.legal table {
  width: 100%; border-collapse: collapse; margin: 12px 0 20px;
  font-size: 16px;
}
.legal th, .legal td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.legal th { font-weight: 600; color: var(--fg-muted); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg-card); border: 1px solid var(--line);
}

/* Scroll-Reveal: Elemente starten leicht versetzt + transparent und
   blenden ein, sobald sie ins Sichtfeld scrollen (JS setzt .is-visible).
   Die .reveal-Klasse wird per JS gesetzt — ohne JS bleibt alles sofort
   sichtbar, weil dann gar kein opacity:0 greift. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .65s cubic-bezier(.2,.8,.25,1),
    transform .65s cubic-bezier(.2,.8,.25,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Wer "reduzierte Bewegung" eingestellt hat, kriegt nur Hover-Farben — keine
   Animations-Loops, keine Schwebe- und keine Scroll-Effekte. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-logo img { animation: none; }
  /* Ohne Bewegung bleibt die Karte samt Systemleiste einfach stehen —
     die Namen sind dann alle gleich gesetzt, und das ist auch richtig:
     Keines der Systeme ist wichtiger als die anderen. */
  .matchcard, .mc-row, .mc-live::before, .mc-chip {
    animation: none; opacity: 1; transform: none;
  }
  .hero::before { transform: translateX(-50%); }
  .reveal { opacity: 1; transform: none; }
}

/* Druckansicht — für PDF-Export der Textseiten (Anleitung, Datenschutz,
   Impressum …): heller Hintergrund, Navigation/Fußzeile aus, voller Satz. */
@media print {
  :root {
    --bg: #ffffff;
    --bg-soft: #ffffff;
    --bg-card: #ffffff;
    --fg: #15201a;
    --fg-muted: #5a6a62;
    --brand: #1f5f3f;
    --brand-soft: #2c8a5a;
    --line: #c9d6cf;
  }
  @page { margin: 18mm 16mm; }
  html { scroll-behavior: auto; }
  body { background: #fff; color: #15201a; }
  header, footer { display: none !important; }
  main { padding: 0; }
  .legal { max-width: none; padding: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a { color: var(--brand); text-decoration: none; }
  .legal h2 {
    page-break-after: avoid;
    break-after: avoid;
  }
  .legal h2 + p, .legal h3 + p, .legal h3 { page-break-inside: avoid; }
  .legal blockquote, .legal table { page-break-inside: avoid; }
}

/* =====================================================================
   Zusätzliche Effekte ("eindrucksvoller"). Alles additiv und mit
   prefers-reduced-motion abgesichert; ohne Motion bleibt die Optik ruhig.
   ===================================================================== */

/* Animierter Farbverlauf im Hero-Titel (Fallback: einfarbig, falls
   background-clip:text nicht unterstützt wird). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 {
    background-image: linear-gradient(
      100deg,
      var(--brand, #2e8b57) 0%,
      #1f5f3f 28%,
      #ffd966 50%,
      #1f5f3f 72%,
      var(--brand, #2e8b57) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Mit background-clip:text wird der Verlauf auf die Glyphen-Box beschnitten.
       Bei enger line-height ragt die Unterlänge (z. B. das „y" in „Handy") aus
       dieser Box und würde abgeschnitten — etwas Luft nach unten verhindert das. */
    line-height: 1.15;
    padding-bottom: 0.12em;
  }
}

/* Sanft pulsierender Lichtschein hinter dem Hero. */
.hero { position: relative; }
.hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(
    60% 60% at 70% 20%,
    rgba(78, 168, 120, 0.18),
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }

/* 3D-Tilt der Turnierkarte, gesteuert per Pointer (JS setzt --rx/--ry). */
.hero-logo .matchcard {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 220ms ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Glanz-Sweep über den Primär-Button beim Hover. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );
  transform: skewX(-18deg);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero h1 {
    animation: bb-text-shimmer 9s ease-in-out infinite;
  }
  .hero::after {
    animation: bb-glow-pulse 6s ease-in-out infinite;
  }
  /* Die ganze Karte schwebt leicht — statt einzelner Kacheln wie frueher. */
  .matchcard {
    animation:
      mcPop .5s cubic-bezier(.2,.8,.25,1) backwards,
      bb-float 6s 1s ease-in-out infinite;
  }
  /* Der Punkt vor „live" schlaegt wie eine Sendeanzeige. */
  .mc-live::before {
    animation: mcPuls 2.2s ease-in-out infinite;
  }
  /* Durch die Systeme wandern: Jedes ist zwei Sekunden lang das laufende.
     Fuenf Namen, zehn Sekunden Runde — die Aussage der Karte in Bewegung,
     ohne dass jemand etwas anklicken muss. */
  .mc-systems .mc-chip:not(.mc-more) {
    animation: mcAktiv 10s ease-in-out infinite;
  }
  .mc-systems .mc-chip:nth-child(1) { animation-delay: 0s; }
  .mc-systems .mc-chip:nth-child(2) { animation-delay: 2s; }
  .mc-systems .mc-chip:nth-child(3) { animation-delay: 4s; }
  .mc-systems .mc-chip:nth-child(4) { animation-delay: 6s; }
  .mc-systems .mc-chip:nth-child(5) { animation-delay: 8s; }
  .btn-primary:hover::after {
    animation: bb-btn-shine 900ms ease-out;
  }
}

@keyframes bb-text-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes bb-glow-pulse {
  0%, 100% { opacity: 0.65; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-6px); }
}
@keyframes bb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes bb-btn-shine {
  from { left: -120%; }
  to { left: 130%; }
}

/* ── Schaubild: vernetzte Geräte ───────────────────────────────────────── */
.netz-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px clamp(10px, 3vw, 36px);
}
.netz-svg {
  width: 100%; height: auto; display: block;
  font-family: inherit;
  max-width: 760px; margin: 0 auto;
}
/* Geräte-Körper (erstes Rechteck jeder Gruppe) */
.netz-device > rect:first-of-type {
  fill: var(--bg-soft); stroke: var(--line); stroke-width: 2.5;
}
.netz-screen {
  fill: color-mix(in srgb, var(--brand) 12%, transparent);
  stroke: color-mix(in srgb, var(--brand) 35%, transparent);
  stroke-width: 1.5;
}
.netz-bar { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.netz-row { stroke: color-mix(in srgb, var(--fg-muted) 55%, transparent); stroke-width: 4; stroke-linecap: round; }
.netz-rowG { stroke: var(--brand); stroke-width: 5; stroke-linecap: round; }
.netz-stand { fill: var(--bg-soft); stroke: var(--line); stroke-width: 2.5; }
.netz-score { fill: var(--brand); font-weight: 800; font-size: 24px; }
.netz-tscore { fill: var(--brand); font-weight: 800; font-size: 24px; }
.netz-tscoreM { fill: var(--fg-muted); font-weight: 700; font-size: 22px; }
.netz-ok { fill: var(--brand); }
.netz-okmark { stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Hotspot + Funkwellen */
.netz-hotspot rect { fill: var(--brand); }
.netz-led { fill: #ffd966; }
.netz-signal path { stroke: #3aa0ff; }
.netz-signal path:nth-child(1) { opacity: .9; }
.netz-signal path:nth-child(2) { opacity: .55; }
.netz-signal path:nth-child(3) { opacity: .3; }
/* Verbindungen + wandernde Datenpunkte */
.netz-links line {
  stroke: color-mix(in srgb, var(--brand) 45%, transparent);
  stroke-dasharray: 2 9;
}
.netz-dot { fill: #ffd966; }
/* Zweig zur oeffentlichen Webansicht: Internet-Wolke, Weg, Globus.
   Die vorhandenen Regeln greifen nur auf <line>/<path>, daher eigene. */
.netz-cloud { fill: color-mix(in srgb, var(--brand) 16%, #ffffff); }
.netz-web path, .netz-web line {
  stroke: color-mix(in srgb, var(--brand) 45%, transparent);
  fill: none;
}
.netz-globe circle, .netz-globe ellipse, .netz-globe line {
  stroke: #3aa0ff; fill: none; stroke-width: 2.5;
}
/* Beschriftungen */
.netz-name { fill: var(--fg); font-weight: 700; font-size: 19px; }
.netz-sub { fill: var(--fg-muted); font-size: 15px; }

/* Pre-Release-Hinweis (Startseite, direkt unter dem Header).
   Die Klassen heissen weiterhin `beta-banner*` — ein Umbenennen ueber
   HTML, CSS und JS hinweg brachte hier nichts ausser der Gelegenheit,
   eine Stelle zu vergessen. Gesprochen wird von Pre-Release. */
.beta-banner {
  background: color-mix(in srgb, #ffd966 22%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, #ffd966 45%, var(--line));
}
/* Textfluss statt Flexzeile.
   Als Flexzeile war der Knopf ein eigenes Element in der Reihe: Passte er
   nicht mehr daneben, rutschte er in eine zweite Zeile und das Banner wurde
   doppelt so hoch. Jetzt schwimmt er rechts, und der Text laeuft links an ihm
   vorbei und darunter weiter — das Banner bleibt so flach, wie der Text es
   zulaesst. */
.beta-banner__inner {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Die Schwimmer aus dem Fluss nehmen, sonst ragen sie unten heraus. */
.beta-banner__inner::after {
  content: "";
  display: block;
  clear: both;
}
/* Die Marke links, der Text rechts daneben — mit einer durchgehenden Kante.
   Der Schwimmer allein reichte dafuer nicht: Der Text lief um ihn herum, die
   ersten Zeilen begannen rechts von ihm, die letzte sprang unter ihn an den
   linken Rand. „Feedback willkommen!" stand dadurch versetzt zum Rest. Den
   Rest erledigt `.beta-banner__text` (siehe dort). */
.beta-banner__tag {
  float: left;
  margin: 1px 10px 0 0;
  background: #f5b73a;
  color: #2a1d00;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
/* Der Text als eigener Block NEBEN der Marke, nicht um sie herum.
   `overflow: hidden` ist hier kein Abschneiden, sondern der Kniff: Es macht
   aus dem Text einen eigenen Formatierungskontext, und so einer stellt sich
   neben einen Schwimmer, statt sich um ihn zu legen. Jede Zeile beginnt
   dadurch an derselben Kante — der rechten Seite der Marke. */
.beta-banner__text {
  display: block;
  overflow: hidden;
  color: var(--fg);
  font-size: 16px;
}
.beta-banner__cta {
  float: right;
  margin: 0 0 6px 16px;
  background: #f5b73a;
  color: #2a1d00;
  font-weight: 800;
  padding: 7px 16px;
}
/* Auf schmalen Schirmen taugt der Textfluss nicht: Neben dem Knopf blieben
   drei Woerter je Zeile. Dann untereinander, der Knopf ueber die volle
   Breite — dort ist Hoehe ohnehin billiger als Gedraengel. */
@media (max-width: 640px) {
  /* Nebeneinander bleiben zwei Woerter je Zeile uebrig. Also die Marke
     darueber und der Text mit voller Breite darunter. */
  .beta-banner__tag { float: none; display: inline-block; margin-bottom: 8px; }
  .beta-banner__cta {
    float: none;
    display: block;
    margin: 10px 0 0;
    text-align: center;
  }
}
.beta-banner__cta:hover {
  background: #ffc94f;
  text-decoration: none;
  transform: translateY(-1px);
}


/* ── Link auf die Web-App (online.bouleboy.de) ─────────────────────────────
   Bewusst anders eingefaerbt als „Live-Ergebnisse" darunter: Das eine ist die
   vollstaendige App im Browser (mit Konto), das andere die oeffentliche
   Zuschaueransicht (ohne). Zwei gleich aussehende Knoepfe nebeneinander
   verwechselt man. */
.btn-web {
  background: linear-gradient(135deg, #5b3fd6, #7c5cff);
  color: #ffffff;
  padding: 9px 20px;
  box-shadow: 0 6px 16px color-mix(in srgb, #7c5cff 32%, transparent);
}
.btn-web:hover {
  background: linear-gradient(135deg, #7c5cff, #9a80ff);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px color-mix(in srgb, #7c5cff 46%, transparent);
}
.btn-web:active { transform: translateY(0); }
.nav-app { color: #6b4ee6; font-weight: 700; }
/* Der Weg zum Windows-Programm — die Schaltstelle der Turnierleitung. Im
   Windows-Blau, damit er sich von der lila Web-App unterscheidet. */
.nav-win { color: #0a84ff; font-weight: 700; }

/* ── Link auf die öffentliche Live-Ansicht (webview.bouleboy.de) ───────── */
.btn-live {
  display: inline-flex; align-items: center; gap: 12px;
  background: #15201a; color: #ffffff;
  border: 1px solid #2e8b57;
}
.btn-live:hover { border-color: #3fbb77; background: #1a2a20; }
.btn-live__dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: #3fbb77; box-shadow: 0 0 0 0 rgba(63,187,119,.6);
  animation: live-pulse 2.2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,187,119,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(63,187,119,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,187,119,0); }
}

/* ── Free-Account anlegen: Dialog aus der Preiskachel „Frei" ──────────────
   Eigenes Overlay statt <dialog>, damit das Verhalten in aelteren Browsern
   gleich ist. Die Farben kommen aus den Tokens, also stimmt hell wie dunkel. */
/* Turnstile-Platzhalter im Anmeldeformular. Das Widget bringt seine eigene
   Groesse mit; hier nur der Abstand nach oben. Leer nimmt er keinen Platz. */
.signup-captcha:not(:empty) { margin-top: 4px; }

.signup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.62);
  overflow-y: auto;
}
.signup-overlay[hidden] { display: none; }
.signup-box {
  position: relative;
  width: min(30rem, 100%);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.signup-box h2 { margin: 0 0 8px; font-size: 1.3rem; }
.signup-lead { margin: 0 0 16px; color: var(--fg-muted); font-size: 1rem; }
.signup-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--fg);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.signup-x:hover { border-color: var(--brand); color: var(--brand); }
.signup-box label {
  display: block;
  margin-bottom: 12px;
  font-size: 1rem;
  font-weight: 600;
}
.signup-box input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  font: inherit;
  font-weight: 400;
  color: var(--fg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.signup-box input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.signup-opt { color: var(--fg-muted); font-weight: 400; }
.signup-hint {
  display: block;
  margin-top: 4px;
  color: var(--fg-muted);
  font-size: 0.875rem;
  font-weight: 400;
}
/* ── Passwortstaerke ──────────────────────────────────────────────────────
   Vier Segmente, so viele gefuellt wie Merkmale erfuellt sind, daneben ein
   Wort. Dieselbe Rechnung wie in der App — siehe script.js.

   Die Farben stehen hier fest und kommen nicht aus den Themenfarben: Rot,
   Gelb und Gruen bedeuten hier etwas, und was sie bedeuten, soll sich nicht
   mit dem Erscheinungsbild aendern. */
.signup-pwbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.signup-pwbar[hidden] { display: none; }
.signup-pwbar__track {
  display: flex;
  flex: 1;
  gap: 3px;
}
.signup-pwbar__track i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background-color .15s ease;
}
.signup-pwbar__level {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.signup-pwbar.is-weak   .signup-pwbar__track i.on { background: #c2543f; }
.signup-pwbar.is-medium .signup-pwbar__track i.on { background: #b37700; }
.signup-pwbar.is-good   .signup-pwbar__track i.on { background: #3d8b3d; }
.signup-pwbar.is-strong .signup-pwbar__track i.on { background: #2e7d32; }
.signup-pwbar.is-weak   .signup-pwbar__level { color: #c2543f; }
.signup-pwbar.is-medium .signup-pwbar__level { color: #b37700; }
.signup-pwbar.is-good   .signup-pwbar__level { color: #3d8b3d; }
.signup-pwbar.is-strong .signup-pwbar__level { color: #2e7d32; }

.signup-pwtips[hidden], .signup-pwmatch[hidden] { display: none; }
/* Die Abweichung ist ein Fehler und sieht auch so aus; „stimmt ueberein" ist
   eine Bestaetigung und bleibt zurueckhaltend. */
.signup-pwmatch.is-bad { color: #c2543f; font-weight: 600; }
.signup-pwmatch.is-ok  { color: #3d8b3d; }

/* Leer nimmt die Meldung keinen Platz weg — sonst huepft das Formular beim
   ersten Fehler. */
.signup-msg:empty { display: none; }
.signup-msg {
  margin: 4px 0 14px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 1rem;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.signup-msg.is-ok { border-color: var(--brand); color: var(--fg); }
.signup-msg.is-error { border-color: #c2543f; color: var(--fg); }
.signup-box .btn { width: 100%; justify-content: center; }
.signup-legal {
  margin: 12px 0 0;
  color: var(--fg-muted);
  font-size: 0.875rem;
  text-align: center;
}

/* ── Landeseite des Bestätigungslinks (club-confirmed.html) ────────────
   Eigene, sehr schlichte Seite: Sie erscheint aus einem Mailprogramm heraus,
   oft auf dem Handy, und soll auf den ersten Blick vertrauenswürdig aussehen. */
body.confirm-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}
.confirm-card {
  width: min(34rem, 100%);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  text-align: center;
}
.confirm-mark { font-size: 2.2rem; line-height: 1; margin-bottom: 10px; }
.confirm-card h1 { margin: 0 0 10px; font-size: 1.35rem; }
.confirm-card p { margin: 0 0 10px; }
.confirm-muted:empty { display: none; }
.confirm-muted { color: var(--fg-muted); font-size: 1rem; }
.confirm-card .btn { margin-top: 14px; }

/* ── Preiskachel „Frei": leuchtet, damit der kostenlose Einstieg auffällt ──
   Der Free-Tarif ist der Weg, auf dem ein Verein ohne Rückfrage anfangen kann —
   die Kachel soll das Auge dorthin ziehen, ohne zu blinken. Deshalb ein ruhiges
   Atmen des Scheins statt einer schnellen Animation, und alles unter
   prefers-reduced-motion abgeschaltet. */
.price-card.free {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .16),
    0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent),
    0 0 26px -6px color-mix(in srgb, var(--brand) 55%, transparent);
}
.price-card.free:hover {
  box-shadow:
    0 18px 38px rgba(0, 0, 0, .2),
    0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent),
    0 0 40px -4px color-mix(in srgb, var(--brand) 75%, transparent);
}

/* Das Wort „Frei" selbst: größer als die übrigen Tarifnamen, mit
   Farbverlauf und einem weichen Schein dahinter. */
.price-card.free .price-name {
  position: relative;
  display: inline-block;
  font-size: 20px;
  letter-spacing: .12em;
  background: linear-gradient(100deg, var(--brand), var(--brand-soft), var(--brand));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Rückfall für Browser ohne background-clip: text — sonst stünde dort
     unsichtbarer Text auf unsichtbarem Grund. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .price-card.free .price-name {
    color: var(--brand);
    -webkit-text-fill-color: currentColor;
    background: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Der Schein atmet langsam (4 s) — auffällig genug, um den Blick zu holen,
     ruhig genug, um beim Lesen nicht zu stören. */
  .price-card.free { animation: freeGlow 4s ease-in-out infinite; }
  /* Und ein Lichtschimmer wandert durch das Wort. */
  .price-card.free .price-name {
    animation: freeShine 4s ease-in-out infinite;
  }
}

@keyframes freeGlow {
  0%, 100% {
    box-shadow:
      0 14px 30px rgba(0, 0, 0, .16),
      0 0 0 1px color-mix(in srgb, var(--brand) 35%, transparent),
      0 0 22px -8px color-mix(in srgb, var(--brand) 45%, transparent);
  }
  50% {
    box-shadow:
      0 14px 30px rgba(0, 0, 0, .16),
      0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent),
      0 0 44px -4px color-mix(in srgb, var(--brand) 80%, transparent);
  }
}

@keyframes freeShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Sprunglink ─────────────────────────────────────────────────────────────
   Erste Station beim Tabben. Liegt ausserhalb des Bildes, bis er den Fokus
   bekommt — dann springt er sichtbar herein. Ohne ihn muss sich jemand, der
   mit der Tastatur bedient, auf JEDER Seite erst durch die ganze Navigation
   arbeiten, bevor der Text anfaengt. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* ── Tastaturmarkierung ─────────────────────────────────────────────────────
   Gilt fuer alles Anklickbare, nicht nur fuer die Eingabefelder der
   Anmeldung. Wer mit der Maus arbeitet, sieht davon nichts: :focus-visible
   greift nur bei Tastatur. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hinweis unter einem Eingabefeld (Passwortlaenge). */
.reset-hint { margin: 6px 0 0; font-size: 14px; color: var(--fg-muted); }

/* ── Passwortfeld mit Auge (Anmeldeformular) ───────────────────────────────
   Der Knopf liegt im Feld statt daneben: Daneben wuerde er die Feldbreite
   nehmen, und auf einem Telefon ist die knapp. */
.signup-pw { position: relative; display: block; }
.signup-pw input { width: 100%; padding-right: 2.75rem; }
.signup-eye {
  position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--muted, #6b7280);
}
.signup-eye:hover { background: rgba(127, 127, 127, .12); }
.signup-eye svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
/* Sichtbares Passwort: Das Auge faerbt sich, damit man den Zustand sieht,
   ohne ins Feld zu schauen. */
.signup-eye.is-on { color: var(--brand, #2f6f4f); }

/* ── Galerie „Ein Blick in die App" ──────────────────────────────────────
   Kacheln mit echten Screenshots; Klick oeffnet die Lightbox (script.js).
   width/height stehen im HTML, damit beim Nachladen nichts springt. */
.shots {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.shot {
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shot:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  box-shadow: 0 10px 26px rgba(31, 95, 63, .14);
}
.shot a { display: block; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  /* Fensterschatten der Screenshots abschneiden — die Kachel hat schon
     ihren eigenen Rahmen. */
  background: var(--bg-soft);
}
.shot figcaption {
  padding: 10px 14px 12px;
  font-size: 1rem;
  color: var(--fg-muted);
  border-top: 1px solid var(--line);
}

/* Die Lightbox. <dialog> liefert ESC und ::backdrop von Haus aus. */
.shotbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(1600px, 94vw);
  max-height: 92vh;
  overflow: visible;
}
.shotbox::backdrop { background: rgba(10, 16, 12, .82); }
.shotbox img {
  display: block;
  max-width: min(1600px, 94vw);
  max-height: calc(92vh - 56px);
  width: auto; height: auto;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.shotbox-caption {
  margin: 12px auto 0;
  text-align: center;
  color: #fff;
  font-size: .95rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.shotbox-x,
.shotbox-nav {
  position: fixed;
  z-index: 2;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, .45);
  border-radius: 999px;
  width: 44px; height: 44px;
  font-size: 26px; line-height: 1;
  display: grid; place-items: center;
}
.shotbox-x:hover,
.shotbox-nav:hover { background: rgba(0, 0, 0, .7); }
.shotbox-x { top: 16px; right: 16px; }
.shotbox-nav { top: 50%; transform: translateY(-50%); }
.shotbox-prev { left: 14px; }
.shotbox-next { right: 14px; }
@media (max-width: 640px) {
  /* Auf dem Telefon liegen die Pfeile sonst auf dem Bild. */
  .shotbox-nav { top: auto; bottom: 14px; transform: none; }
  .shotbox-prev { left: 25%; }
  .shotbox-next { right: 25%; }
}

/* ── Kontakt ─────────────────────────────────────────────────────────────
   Drei Karten fuer drei Anliegen. Bewusst dieselbe Kachelform wie bei den
   Funktionen: Wer die Seite heruntergescrollt hat, kennt sie schon. */
.contact-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.contact-card {
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.contact-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.contact-card p { margin: 0 0 14px; color: var(--fg-muted); font-size: 1rem; }
.contact-link {
  font-weight: 600;
  word-break: break-word;
}
.contact-foot {
  margin-top: 22px;
  color: var(--fg-muted);
  font-size: 1rem;
}


/* ── Play-Abzeichen und QR-Codes im Hero ──────────────────────────────────
   Das Abzeichen ist Googles eigene Bildmarke und darf nicht umgefaerbt oder
   beschnitten werden — deshalb nur Groesse und ein Hover-Heben, sonst
   nichts. Die feste Hoehe haelt es auf einer Linie mit den Knoepfen
   daneben. */
.btn-badge {
  display: inline-flex; align-items: center;
  padding: 0; border: 0; background: none;
  transition: transform .15s ease, filter .15s ease;
}
.btn-badge img { display: block; height: 56px; width: auto; }
.btn-badge:hover { transform: translateY(-1px); filter: brightness(1.06); }

.hero-qr { display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.hero-qr__item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--fg-muted); font-size: .875rem; text-decoration: none;
}
.hero-qr__item:hover { color: var(--fg); text-decoration: none; }
/* Der Code braucht Weiss unter sich — auf dunklem Grund liest ihn keine
   Kamera. */
.hero-qr__item img {
  background: #fff; padding: 6px; border-radius: 8px;
  width: 88px; height: 88px;
}
/* Auf einem Handy ist ein QR-Code zur eigenen Seite sinnlos: Man ist schon
   dort. */
@media (max-width: 900px) { .hero-qr { display: none; } }

/* ── Reiter ueber den Funktionskacheln ────────────────────────────────── */
.feature-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px;
}
.feature-tab {
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--fg);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.feature-tab:hover { border-color: var(--brand); }
.feature-tab.is-active {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}

/* ── Zahlen unter dem Hero ────────────────────────────────────────────── */
#zahlen { padding-top: 8px; }
.stats {
  list-style: none; margin: 0; padding: 22px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center;
}
.stats strong {
  display: block; font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.1; color: var(--brand);
  /* Tabellenziffern: Beim Hochzaehlen sonst zappelt die Zahl in der
     Breite, weil eine 1 schmaler ist als eine 8. */
  font-variant-numeric: tabular-nums;
}
.stats span { color: var(--fg-muted); font-size: 1rem; }
.stats-foot {
  margin: 10px 0 0; text-align: center;
  color: var(--fg-muted); font-size: .875rem;
}

/* ── Stimmen aus Vereinen ─────────────────────────────────────────────── */
.voices {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.voice {
  margin: 0; padding: 20px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.voice blockquote { margin: 0 0 10px; font-size: 1.02rem; }
.voice blockquote::before { content: "„"; }
.voice blockquote::after { content: "\201C"; }
.voice figcaption { color: var(--fg-muted); font-size: 1rem; }

/* ── Tarif-Matrix ─────────────────────────────────────────────────────── */
.matrix-title { margin: 36px 0 12px; font-size: 1.15rem; }
/* Waagerecht rollen statt umbrechen: Eine Tabelle, die sich in Spalten
   zerlegt, ist keine Tabelle mehr — und genau der Vergleich ueber die
   Zeile hinweg ist ihr Zweck. */
.tier-matrix-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card);
}
.tier-matrix-wrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tier-matrix {
  width: 100%; min-width: 640px; border-collapse: collapse;
  font-size: 1rem;
}
.tier-matrix th, .tier-matrix td {
  padding: 10px 14px; text-align: center;
  border-bottom: 1px solid var(--line);
}
.tier-matrix thead th {
  position: sticky; top: 0; background: var(--bg-soft);
  font-size: .9rem; letter-spacing: .02em;
}
.tier-matrix tbody th {
  text-align: left; font-weight: 500; color: var(--fg);
  white-space: nowrap;
}
.tier-matrix tbody tr:last-child th,
.tier-matrix tbody tr:last-child td { border-bottom: 0; }
.tier-matrix .ja { color: var(--brand); font-weight: 700; }
.tier-matrix .nein { color: var(--fg-muted); }
.tier-matrix .test { color: var(--fg-muted); font-size: .9rem; }
.matrix-foot {
  margin: 10px 0 0; color: var(--fg-muted); font-size: 1rem;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Haeufige Fragen ──────────────────────────────────────────────────── */
.faq { display: grid; gap: 10px; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0 18px;
}
.faq-item summary {
  cursor: pointer; padding: 14px 0; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; color: var(--brand); font-weight: 700; font-size: 1.2rem;
  line-height: 1;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p {
  margin: 0 0 16px; color: var(--fg-muted);
}

/* ── Kontaktformular ──────────────────────────────────────────────────── */
.contact-form { display: grid; gap: 14px; max-width: 680px; }
.cf-row { display: grid; gap: 14px; }
.cf-row--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .cf-row--2 { grid-template-columns: 1fr; } }
.cf-field { display: grid; gap: 6px; font-size: 1rem; }
.cf-field > span { color: var(--fg-muted); }
.cf-field em { font-style: normal; opacity: .75; }
.cf-field input, .cf-field select, .cf-field textarea {
  font: inherit; color: var(--fg); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  width: 100%;
}
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
/* Der Honigtopf: unerreichbar fuer Menschen, sichtbar fuer Roboter. NICHT
   display:none — manche Sammler ueberspringen genau das. */
.cf-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}
.cf-captcha:empty { display: none; }
.cf-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-msg { margin: 0; font-size: 1rem; color: var(--fg-muted); }
.cf-msg--ok { color: var(--brand); }
.cf-msg--fehler { color: #e2725b; }
.cf-note { margin: 0; color: var(--fg-muted); font-size: .875rem; }

/* ── Nummerierte Aufbauten („Aufbau am Platz") ─────────────────────────────
 *
 * Drei Konfigurationen stehen dort untereinander, jede mit Schaubild,
 * Schrittliste und Hinweisen. Als schlichte Zwischenueberschrift gingen sie im
 * Fliesstext unter: Wer mitten im Kapitel einstieg, las die Schritte des
 * zweiten Aufbaus und hielt sie fuer die Fortsetzung des ersten.
 *
 * Die Plakette traegt die Nummer, der Balken links faengt das Auge beim
 * Rollen. Beides holt seine Farben aus den Variablen, damit es in Hell und
 * Dunkel stimmt. */
.konfig {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 38px 0 12px;
  padding: 12px 16px;
  border-left: 5px solid var(--brand);
  border-radius: 0 10px 10px 0;
  background: var(--bg-card);
  font-size: 19px;
  line-height: 1.3;
}
.konfig-nr {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 17px;
  font-weight: 700;
}

/* ── Schaubilder im Handbuch ───────────────────────────────────────────────
 *
 * Inline-SVG, keine Bilddateien: Das Handbuch bleibt eine einzelne Datei.
 * Die Grafiken holen ihre Farben aus den Variablen oben, damit sie in Hell
 * und Dunkel stimmen — feste Farben waeren im jeweils anderen Thema
 * unlesbar.
 *
 * `viewBox` ohne feste Breite: Das Bild skaliert mit der Spalte. Auf dem
 * Telefon wird es dadurch klein, aber es bleibt lesbar — die Beschriftungen
 * sind Teil der Zeichnung und wachsen mit. */
.schaubild {
  margin: 20px 0;
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.schaubild svg {
  display: block;
  width: 100%;
  height: auto;
}
.schaubild figcaption {
  margin-top: 10px;
  color: var(--fg-muted);
  font-size: 15px;
  line-height: 1.5;
}