/* Stylesheet der Startseite auf mein-kegelbuch.de.

   Bewusst NEBEN styles.css und nicht darin: styles.css traegt die beiden Rechtstexte
   (impressum.html, datenschutz.html) und zentriert dafuer den ganzen <body> in einer Karte.
   Eine Landing-Page mit durchlaufenden Abschnitten braucht genau das nicht - beides in einer
   Datei hiesse, die Karten-Regeln fuer die Startseite wieder zurueckzunehmen. Die Rechtstexte
   bleiben so unberuehrt; wer hier etwas aendert, kann sie nicht kaputtmachen.

   Die Markenwerte sind dieselben wie dort (Hintergrund, Tinte, Gruen) - nur um die Rollen
   erweitert, die eine laengere Seite zusaetzlich braucht.

   Schriften wie in styles.css: Poppins und Nunito von DIESER Domain aus fonts/, nicht von
   fonts.googleapis.com. Verfuegbar sind genau drei Schnitte - Poppins 600, Poppins 700 und
   Nunito 400. Wer einen vierten setzt (etwa fetten Fliesstext), muss die Datei erst nach
   fonts/ legen und hier deklarieren, sonst rechnet der Browser sich die Form aus. */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-latin-400-normal.woff2') format('woff2');
}

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  /* Der leicht abgesetzte Grund fuer jeden zweiten Abschnitt. Die Seite gliedert sich ueber
     Flaechenwechsel, nicht ueber Trennlinien. */
  --surface-alt: #f1f5f9;
  --ink: #0f172a;
  --ink-soft: #475569;
  --line: #e2e8f0;

  /* Zwei Gruen-Rollen, weil ein Ton beides nicht kann: --brand ist der TEXT-taugliche Ton
     (Fliesstext verlangt 4,5:1 gegen Weiss, #2fb36d kommt nur auf 2,7:1), --brand-solid ist
     die Markenflaeche, auf der dunkle Schrift steht. Genau diese Aufteilung macht styles.css
     auch, dort nur ohne eigenen Namen fuer die Flaeche. */
  --brand: #157a4c;
  --brand-solid: #2fb36d;
  --brand-solid-hover: #27a061;
  --brand-wash: rgb(47 179 109 / 0.12);

  --font-display: 'Poppins', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', Roboto, system-ui, sans-serif;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 1px 2px rgb(15 23 42 / 0.06), 0 18px 48px rgb(15 23 42 / 0.1);

  /* Die Hoehe der festen Kopfzeile - einmal benannt, weil scroll-padding-top denselben Wert
     braucht, sonst verschwindet jedes Sprungziel darunter. */
  --nav-h: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #0f172a;
    --surface-alt: #111a2e;
    --ink: #f8fafc;
    --ink-soft: #cbd5e1;
    --line: #1e293b;
    /* Auf dunklem Grund kehrt sich die Kontrastlage um: hier traegt das HELLE Gruen den Text
       (7,0:1 auf #0b1120), das dunkle waere unlesbar. Die Markenflaeche bleibt dieselbe - eine
       gesaettigte Flaeche mit dunkler Schrift steht in beiden Erscheinungsbildern gleich. */
    --brand: #4ade80;
    --brand-wash: rgb(47 179 109 / 0.16);
    --shadow-lg: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 48px rgb(0 0 0 / 0.45);
  }
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration: none;
}

/* Sichtbarer Fokusring fuer die Tastaturbedienung, in der Markenfarbe - so ist er auf beiden
   Untergruenden gleich gut zu sehen. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

/* Der Sprung ueber die Navigation. Sichtbar erst bei Tastaturfokus - fuer die Maus waere er
   ein Fremdkoerper, fuer die Tastatur ist er der kuerzeste Weg zum Inhalt. */
.skip {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 100;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

/* Der Schatten erst im Fokus: oberhalb des Bildschirmrands reichte er sonst als grauer Fleck
   in die Seite hinein. */
.skip:focus {
  top: 0.75rem;
  box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------------ Grundraster */

.wrap {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: clamp(4rem, 10vw, 7.5rem) 0;
}

.section--alt {
  background: var(--surface-alt);
}

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

/* Fest am oberen Rand und durchscheinend. backdrop-filter ist reine Zugabe: wo der Browser ihn
   nicht kennt, bleibt die halbdurchsichtige Flaeche stehen und der Text darauf lesbar. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.nav__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav__logo {
  width: auto;
  height: 1.75rem;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
}

.nav__links a {
  color: var(--ink-soft);
  text-decoration: none;
}

.nav__links a:hover {
  color: var(--ink);
}

/* Unter 52rem passen die Ankerlinks nicht mehr neben Logo und "App öffnen". Sie rutschen in
   eine zweite Zeile, statt zu verschwinden: ohne sie gab es am Telefon keinen Weg zu Preis oder
   Funktionen ausser Scrollen. Ohne Skript und ohne Menueknopf - .nav__links loest sich per
   display: contents auf, seine Kinder ordnen sich in .nav__inner neu. Das leere ::after mit
   voller Breite erzwingt den Umbruch zwischen erster und zweiter Zeile. Seiten ohne Ankerlinks
   (Kontakt, Rechtstexte) behalten die einzeilige Kopfzeile, daher :has(). */
@media (max-width: 52rem) {
  :root:has(.nav__links a:not(.nav__cta)) {
    --nav-h: 6.25rem;
  }

  .nav__inner:has(.nav__links a:not(.nav__cta)) {
    flex-wrap: wrap;
    gap: 0.625rem 0.5rem;
  }

  .nav__inner:has(.nav__links a:not(.nav__cta))::after {
    content: '';
    order: 2;
    flex-basis: 100%;
  }

  .nav__inner:has(.nav__links a:not(.nav__cta)) .nav__links {
    display: contents;
    font-size: 0.875rem;
  }

  .nav__links a:not(.nav__cta) {
    order: 3;
    flex: 1;
    text-align: center;
    padding-block: 0.25rem;
  }

  .nav__links .nav__cta {
    order: 1;
    margin-left: auto;
  }
}

/* Dunkle Schrift auf der Markenflaeche, nicht weisse: #ffffff auf #2fb36d ergibt 2,7:1 und
   faellt durch jede Pruefung, #0f172a ergibt 6,9:1. Die App macht es an ihren Primaerflaechen
   genauso (--color-primary-foreground in src/app.css). */
.nav__cta {
  padding: 0.4375rem 1.125rem;
  border-radius: 999px;
  background: var(--brand-solid);
  color: #0f172a;
  transition: background-color 0.15s ease;
}

.nav__links .nav__cta:hover {
  background: var(--brand-solid-hover);
  color: #0f172a;
}

/* Die Unterseiten: Menue-Knopf und "App öffnen" stehen direkt in der Kopfzeile, ohne die
   Schriftangaben von .nav__links - deshalb tragen beide sie hier selbst. */
.nav__inner > .nav__cta {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav__inner > .nav__cta:hover {
  background: var(--brand-solid-hover);
}

/* Das Menue der Unterseiten. <details> statt eines Skripts: der Browser oeffnet und schliesst
   die Tafel selbst, auch per Tastatur. Die Tafel haengt an .nav__inner, damit sie rechtsbuendig
   unter der Kopfzeile sitzt, auf jeder Breite. */
.nav__inner:has(.menue) {
  position: relative;
  gap: 0.5rem;
}

.menue {
  margin-left: auto;
}

.menue__knopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  list-style: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.menue__knopf::-webkit-details-marker {
  display: none;
}

.menue__knopf:hover,
.menue[open] > .menue__knopf {
  border-color: var(--brand-solid);
}

.menue__knopf:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.menue__knopf svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Die Tafel schwebt ueber dem Inhalt - einer der Faelle, in denen ein Schatten stimmt. */
.menue__tafel {
  position: absolute;
  right: 1.5rem;
  top: calc(100% + 0.5rem);
  width: min(22rem, calc(100vw - 3rem));
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.menue__tafel a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}

.menue__tafel a:hover {
  background: var(--surface-alt);
}

.menue__tafel a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.menue__tafel a[aria-current] {
  background: var(--brand-wash);
  color: var(--brand);
}

.menue__gruppe {
  margin: 0;
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.menue__tafel hr {
  margin: 0.375rem 0.5rem;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Sehr schmale Telefone (320 px): Logo, Menue und "App öffnen" passen nur mit engeren Raendern
   und Knoepfen in eine Zeile. */
@media (max-width: 26rem) {
  .nav__inner:has(.menue) {
    padding: 0 1rem;
    gap: 0.375rem;
  }

  .menue__knopf {
    padding: 0.375rem 0.625rem;
  }

  .nav__inner > .nav__cta {
    padding: 0.4375rem 0.75rem;
  }

  .menue__tafel {
    right: 1rem;
    width: calc(100vw - 2rem);
  }
}

/* ------------------------------------------------------------------ Typografie */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

/* "Die Kegelclub-App" steht ungebrochen in einer Zeile (.nowrap im Markup) und braucht gut
   9,3em. Die Schrift waechst deshalb mit der Breite (8.5vw): so passt die Zeile ab etwa 235 px
   Bildschirmbreite, und die H1 bleibt am Telefon zweizeilig statt vierzeilig. */
.h-hero {
  font-size: clamp(1.75rem, 8.5vw, 4rem);
}

.h-section {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.h-feature {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
}

.h-card {
  font-size: 1.125rem;
  font-weight: 600;
}

.lead {
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  text-wrap: pretty;
  margin: 1.25rem 0 0;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.75rem;
}

.section__head {
  max-width: 42rem;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

/* ------------------------------------------------------------------ Kopfbereich */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem);
  text-align: center;
}

/* Der Lichtschein hinter dem Geraet. Rein dekorativ und deshalb aria-hidden im Markup - ein
   Radialverlauf hat nichts, was vorgelesen werden koennte. */
.hero__glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(
    60% 60% at 50% 40%,
    var(--brand-wash),
    transparent 70%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
}

.hero__logo {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto 2rem;
  display: block;
}

/* Am Telefon steht das Logo schon in der Kopfzeile. In voller Groesse schob es die Ueberschrift
   und die Store-Knoepfe unter die Falz, deshalb hier nur noch halb so gross. */
@media (max-width: 40rem) {
  .hero__logo {
    max-width: 11rem;
    margin-bottom: 1.25rem;
  }
}

/* "Kegelclub-App" bricht sonst am Bindestrich um und laesst "App" allein in einer Zeile. */
.nowrap {
  white-space: nowrap;
}

.hero .lead {
  max-width: 38rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ Store-Knoepfe */

.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.stores--start {
  justify-content: flex-start;
}

/* Am Telefon zwei gleich breite Spalten statt einer Treppe unterschiedlich langer Knoepfe -
   so steht auch die Web-App noch ueber der Falz. Ein letzter Knopf ohne Partner nimmt die
   ganze Zeile. */
@media (max-width: 40rem) {
  .stores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-top: 1.75rem;
  }

  .stores .store {
    justify-content: center;
    padding-inline: 0.75rem;
  }

  .stores .store:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.375rem;
  border-radius: 0.875rem;
  border: 1px solid transparent;
  font-family: var(--font-display);
  text-decoration: none;
  line-height: 1.2;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.store:active {
  transform: translateY(1px);
}

.store__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  /* currentColor im SVG - der Knopf gibt die Farbe vor, nicht die Grafik. */
  fill: currentColor;
}

.store__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.store__small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.store__big {
  font-size: 1rem;
  font-weight: 700;
}

/* Der Hauptknopf: gefuellte Markenflaeche mit dunkler Schrift, siehe .nav__cta. */
.store--primary {
  background: var(--brand-solid);
  color: #0f172a;
}

.store--primary:hover {
  background: var(--brand-solid-hover);
  color: #0f172a;
}

/* Die Nebenknoepfe: Flaeche der Seite, sichtbare Kante. Gleiche Groesse wie der Hauptknopf,
   damit die Reihe ruhig bleibt - der Unterschied liegt allein in der Fuellung. */
.store--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.store--ghost:hover {
  border-color: var(--brand-solid);
  color: var(--ink);
}

/* Wer die Bewegung abbestellt hat, bekommt sie nicht - der Zustand bleibt trotzdem an der
   Farbe erkennbar. */
@media (prefers-reduced-motion: reduce) {
  .store,
  .nav__cta,
  .skip {
    transition: none;
  }

  .store:active {
    transform: none;
  }
}

/* ------------------------------------------------------------------ Bildplatzhalter */

/* Jeder Platzhalter steht an der Stelle, an der spaeter ein Screenshot liegt, und traegt im
   Markup den Dateinamen, den das Bild bekommen soll. Bewusst ein <div> und kein <img> auf eine
   noch fehlende Datei: ein kaputtes Bildsymbol saehe aus wie ein Fehler, das hier sieht aus wie
   eine Absicht. Zum Einsetzen den .ph-Block gegen das <img> tauschen - der umgebende Rahmen
   (.phone) bleibt stehen und traegt Form, Kante und Schatten weiter. */
.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      var(--brand-wash) 10px,
      var(--brand-wash) 20px
    ),
    var(--surface-alt);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
}

.ph__label {
  font-size: 1rem;
  color: var(--ink);
}

.ph__hint {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8125rem;
}

/* Der Geraeterahmen um die Hochkant-Screenshots. Reines CSS, keine Bilddatei: ein abgerundetes
   Rechteck mit Kante und Schatten liest sich als Telefon, sobald ein 9:19,5-Ausschnitt darin
   steht. */
.phone {
  position: relative;
  width: 100%;
  max-width: 17.5rem;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  padding: 0.5rem;
  border-radius: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.phone > * {
  border-radius: 2rem;
  overflow: hidden;
}

/* Der eingesetzte Screenshot fuellt den Rahmen ganz aus. object-fit: cover statt einer
   genauen Groessenangabe, weil kein Geraet exakt 9:19,5 liefert - die Aufnahmen messen
   780x1688, also 9:19,48. Der Unterschied betraegt ein Promille und wird oben angeschnitten
   (object-position: top), wo die Statusleiste sitzt und am wenigsten verlorengeht. Ein Bild in
   einem anderen Seitenverhaeltnis bleibt so ebenfalls formatfuellend, statt eine Leerkante im
   Rahmen zu lassen. <picture> ist von Haus aus inline und wuerde weder Hoehe noch Rundung
   weitergeben - deshalb hier als Block. */
.phone picture {
  display: block;
  height: 100%;
}

.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Clips im Telefonrahmen: das Video fuellt den Rahmen wie ein Screenshot. Das Standbild
   daneben ist nur fuer prefers-reduced-motion da - ohne Skript laesst sich ein
   autoplay-Video nicht anhalten, also wird es ausgeblendet und das Poster gezeigt.
   Der Selektor ".clip .clip__still" statt nur ".clip__still": ".phone img" oben wiegt mehr
   und blendete das Standbild sonst neben dem Video ein. */
.phone video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.clip .clip__still {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .clip video {
    display: none;
  }

  .clip .clip__still {
    display: block;
  }
}

.phone--hero {
  max-width: 20rem;
  margin-top: clamp(3rem, 7vw, 4.5rem);
}

/* Die Zeile unter den Store-Knoepfen: was es kostet, bevor jemand fragt. In Poppins, weil
   Nunito nur in 400 vorliegt (siehe Kopf) - ein fetter Nunito-Schnitt waere errechnet. */
.hero__trial {
  margin-top: 1rem;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ------------------------------------------------------------------ Kennzahlenreihe */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.5rem 1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(2rem, 5vw, 3rem) 0;
}

.fact {
  text-align: center;
}

.fact__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--brand);
}

.fact__label {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

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

/* Bild und Text nebeneinander, ab 56rem im Wechsel links/rechts. Darunter untereinander, Text
   zuerst - auf dem Telefon zaehlt die Aussage vor der Abbildung. */
.feature {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.feature + .feature {
  margin-top: clamp(4rem, 9vw, 7rem);
}

@media (min-width: 56rem) {
  .feature {
    grid-template-columns: 1fr 1fr;
  }

  /* Nicht die Reihenfolge im Markup umdrehen: dort steht immer erst der Text, dann das Bild -
     so liest es ein Screenreader und so stapelt es auf dem Telefon. Nur in der zweispaltigen
     Ansicht wandert das Bild bei jeder zweiten Zeile nach links. */
  .feature--flip .feature__media {
    order: -1;
  }
}

.feature__body p {
  color: var(--ink-soft);
  margin: 1rem 0 0;
  text-wrap: pretty;
}

.feature__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.feature__list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-soft);
}

/* Das Haekchen als ::before und nicht als Zeichen im Markup: es ist Schmuck, kein Inhalt, und
   taucht so in keiner Vorlesung auf. */
.feature__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.75rem;
  height: 0.4rem;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ Kartenraster */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

/* Neun Karten: auf dem Rechner haetten vier Spalten eine einzelne Karte in der letzten Reihe
   zurueckgelassen. Ab 56rem deshalb fest drei Spalten, drei volle Reihen. */
@media (min-width: 56rem) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  padding: 1.75rem 1.5rem;
  border-radius: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.card p {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 0.875rem;
  background: var(--brand-wash);
  color: var(--brand);
}

.card__icon svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------ Kurz erklaert */

.erklaert__inner {
  display: grid;
  gap: 2rem;
  justify-items: center;
}

.erklaert__video {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 9 / 16;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.erklaert__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------ Preis */

.preis {
  max-width: 32rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 1.25rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.preis__betrag {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
}

.preis__zahl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 3rem);
  color: var(--ink);
  margin-right: 0.35rem;
}

/* ------------------------------------------------------------------ Fragen */

/* <details> ohne Skript: der Browser oeffnet und schliesst selbst. Das eigene Plus ersetzt den
   Standard-Pfeil, der je Browser anders aussieht (::-webkit-details-marker fuer Safari). */
.faq {
  max-width: 46rem;
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.faq__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

/* Die Frage steht als h3 in der summary, damit sie in der Gliederung der Seite auftaucht.
   Aussehen bleibt das der summary: Schrift und Abstand kommen von .faq__frage. */
.faq__frage h3 {
  font: inherit;
  margin: 0;
}

.faq__frage::-webkit-details-marker {
  display: none;
}

.faq__frage::after {
  content: '+';
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand);
}

.faq__item[open] .faq__frage::after {
  content: '–';
}

.faq__frage:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 1rem;
}

.faq__item p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ Abschluss */

.cta {
  text-align: center;
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.cta .lead {
  max-width: 34rem;
  margin-inline: auto;
}

/* Die Fusszeile steht in footer.css - sie gilt auch fuer die Rechtstexte mit styles.css. */

/* ------------------------------------------------------------------ Einblenden */

/* Die Abschnitte gleiten beim Erreichen leicht herein. Umgesetzt ueber animation-timeline und
   nicht ueber einen IntersectionObserver: die Seite kommt so ganz ohne JavaScript aus. Browser,
   die die Scroll-Zeitachse nicht kennen, ueberspringen den Block vollstaendig - der Inhalt
   steht dann von Anfang an da, was der richtige Rueckfall ist. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 28%;
    }

    @keyframes reveal-in {
      from {
        opacity: 0;
        transform: translateY(1.5rem);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* ------------------------------------------------------------------ Knopf */

/* Derselbe Knopf wie .store--primary (Markenflaeche, dunkle Schrift - #ffffff darauf ergibt
   nur 2,7:1, #0f172a kommt auf 6,9:1), aber ohne die Store-spezifische Zwei-Zeilen-Beschriftung.
   Bislang nur vom Kontaktformular gebraucht; ein weiterer Verwendungsort duerfte diese Regeln
   unveraendert mitbenutzen. */
.btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 0.875rem;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.btn--primary {
  background: var(--brand-solid);
  color: #0f172a;
}

.btn--primary:hover:not(:disabled) {
  background: var(--brand-solid-hover);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:active {
    transform: none;
  }
}

/* ------------------------------------------------------------------ Kontaktformular */

/* Alle Farben kommen aus den Variablen, die :root und der prefers-color-scheme-Block oben
   setzen - ein eigener Farbwert hier saehe im hellen Erscheinungsbild richtig aus und faellt im
   dunklen auseinander. */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 34rem;
  margin: 0 auto;
}

.form label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}

.form textarea {
  resize: vertical;
  min-height: 9rem;
}

/* Sichtbarer Fokus, und zwar auf der Farbe der Marke: Tastaturbedienung ist auf einem
   Formular keine Randerscheinung. outline statt border, damit das Feld beim Fokussieren nicht
   um einen Pixel springt. */
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--brand-solid);
  outline-offset: 1px;
}

/* Die Rueckmeldung nach dem Absenden. role=status im HTML sorgt dafuer, dass ein Screenreader
   sie vorliest, ohne dass der Fokus springt. */
#kontakt-meldung {
  min-height: 1.5rem;
  color: var(--ink-soft);
}

/* Honeypot: aus dem Blickfeld, aber NICHT display:none - manche Bots fuellen nur, was im Layout
   steht, und genau die sollen hineintappen. aria-hidden und tabindex=-1 im HTML halten ihn von
   Screenreadern und dem Tabulatorlauf fern. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------ Vergleichsseite */

/* Fliesstext der Vergleichsseite (clubmanager-alternative.html). Schmaler als .wrap, damit die
   Zeilen lesbar bleiben; Ueberschriften und Tabelle duerfen dieselbe Breite nutzen. */
.prose {
  max-width: 46rem;
  margin: 0 auto;
}

.prose h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  margin-top: clamp(3rem, 7vw, 4.5rem);
}

.prose h3 {
  font-size: 1.1875rem;
  margin-top: 2rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  text-wrap: pretty;
}

.prose p {
  margin: 1rem 0 0;
}

.prose ol {
  margin: 1rem 0 0;
  padding-left: 1.5rem;
}

.prose li + li {
  margin-top: 0.5rem;
}

/* Brotkrumen ueber der Hauptueberschrift. Sie spiegeln die BreadcrumbList im <head>. */
.krumen {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.krumen a {
  color: var(--ink-soft);
}

/* Autorenzeile unter der h1 der Ratgeber: wer schreibt und von wann. Leise wie die Krumen,
   steht im JSON-LD der Seite noch einmal als author des Article. */
.autor {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

/* Offenlegung und Stand: gehoeren nach oben, gut sichtbar, aber nicht lauter als der Inhalt. */
.hinweis {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--brand-solid) 35%, transparent);
  border-radius: 0.75rem;
  background: var(--brand-wash);
  color: var(--ink);
  font-size: 0.9375rem;
}

/* Die Vergleichstabelle. Sollte sie doch einmal breiter werden als der Bildschirm, scrollt nur
   die Tabelle waagrecht, nie die ganze Seite; der Rahmen um sie herum ist fokussierbar (tabindex
   im HTML), damit das auch per Tastatur geht. */
.tabelle {
  margin-top: 2rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabelle caption {
  padding: 1rem 1.25rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
}

.tabelle th,
.tabelle td {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* Auf dem Telefon passen alle drei Spalten nebeneinander, wenn die Zellen enger werden - so
   sieht man die Clubmanager-Spalte, ohne erst waagrecht wischen zu muessen. */
@media (max-width: 40rem) {
  .tabelle table {
    font-size: 0.875rem;
  }

  .tabelle caption {
    padding: 0.875rem 0.75rem 0;
  }

  .tabelle th,
  .tabelle td {
    padding: 0.625rem 0.75rem;
  }
}

.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.tabelle thead th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.tabelle tbody th {
  font-weight: 400;
  color: var(--ink-soft);
}

.tabelle td {
  color: var(--ink);
}

/* Die Fussnote mit Stand und Quellen unter der Tabelle. */
.quellen {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------ Strafenkatalog */

/* Die Katalogtabelle auf strafenkatalog-kegelclub.html. Baut auf .tabelle auf: eine Zeile je
   Strafe, drei Betragsspalten. Die Betraege stehen rechtsbuendig in gleich breiten Ziffern,
   damit man sie untereinander lesen kann wie im Kassenbuch. Die Spalte "Ueblich" liegt im
   Grünschleier - die eine Stelle, an der die Markenfarbe hier eine Flaeche bekommt. */
/* Eine Beschriftung ueber den drei Knoepfen statt derselben Zeile in jedem Knopf. */
.vorlagen__titel {
  margin-top: 1.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.prose .vorlagen__titel {
  color: var(--ink);
}

.vorlagen {
  margin-top: 0.75rem;
}

/* Weniger Luft nach unten: der Abschluss darunter bringt seinen eigenen Abstand mit. */
.katalog-kopf {
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* overflow: clip statt des auto aus .tabelle: die Tabelle passt auf jede Breite, und ein
   Scroll-Container wuerde die mitlaufenden Spaltenkoepfe unten festhalten. clip haelt die runden
   Ecken trotzdem sauber. */
.katalog {
  margin-top: 2.5rem;
  overflow: clip;
}

/* Die Spaltenkoepfe laufen unter der festen Kopfzeile mit, damit man bei Zeile zwanzig noch
   weiss, welche Spalte welche Stufe ist. Deckender Grund, sonst scheinen die Zeilen durch. */
.katalog thead th {
  position: sticky;
  top: var(--nav-h);
  z-index: 1;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
}

.katalog thead th.katalog__ueblich {
  background:
    linear-gradient(var(--brand-wash), var(--brand-wash)), var(--surface);
}

.katalog table {
  font-variant-numeric: tabular-nums;
}

.katalog thead th:not(:first-child),
.katalog td {
  width: 6.5rem;
  text-align: right;
  white-space: nowrap;
}

.katalog td {
  font-family: var(--font-display);
  font-weight: 600;
}

/* Jede Gruppe ist ein eigenes tbody. Die Regel aus .tabelle, die der letzten Zeile die Linie
   nimmt, soll nur am Ende der ganzen Tabelle greifen, nicht am Ende jeder Gruppe. */
.katalog tbody tr:last-child th,
.katalog tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}

.katalog tbody:last-child tr:last-child th,
.katalog tbody:last-child tr:last-child td {
  border-bottom: 0;
}

.katalog tbody th {
  color: var(--ink);
}

.katalog__ueblich {
  background: var(--brand-wash);
}

.katalog thead .katalog__ueblich {
  color: var(--brand);
}

/* Die Zwischenzeile je Gruppe: Titel in Poppins auf dem abgesetzten Grund, ueber die volle
   Breite. Die Zeile darunter beginnt mit einer kraeftigeren Linie, wie im gedruckten Katalog. */
.katalog .katalog__gruppe th {
  padding-top: 1.25rem;
  background: var(--surface-alt);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-soft);
}

.katalog__info {
  display: block;
  margin-top: 0.125rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.katalog__gruppe .katalog__info {
  display: inline;
  margin: 0 0 0 0.5rem;
}

.katalog tbody tr:not(.katalog__gruppe):hover th,
.katalog tbody tr:not(.katalog__gruppe):hover td {
  background: color-mix(in srgb, var(--surface-alt) 70%, transparent);
}

.katalog tbody tr:not(.katalog__gruppe):hover .katalog__ueblich {
  background: color-mix(in srgb, var(--brand-solid) 20%, transparent);
}

/* Auf dem Telefon muessen vier Spalten in rund 330px passen, ohne dass die Tabelle seitlich
   wischt: Betragsspalten schmal und enger gepolstert, Koepfe kleiner, und "Ø + 10,00" darf am
   Leerzeichen umbrechen. */
@media (max-width: 40rem) {
  .katalog thead th:not(:first-child),
  .katalog td {
    width: auto;
    padding-inline: 0.375rem;
    white-space: normal;
  }

  .katalog thead th:not(:first-child) {
    font-size: 0.75rem;
  }

  .katalog td {
    font-size: 0.8125rem;
  }

  .katalog td:last-child,
  .katalog thead th:last-child {
    padding-right: 0.75rem;
  }

  .katalog__gruppe .katalog__info {
    display: block;
    margin: 0.125rem 0 0;
  }
}

/* Die Begriffe: Wort links, Erklaerung rechts, ab schmaler Breite untereinander. */
.begriffe {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}

.begriffe > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.25rem 1.5rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
}

.begriffe dt {
  font-family: var(--font-display);
  font-weight: 600;
}

.begriffe dd {
  margin: 0;
  color: var(--ink-soft);
}

@media (max-width: 40rem) {
  .begriffe > div {
    grid-template-columns: 1fr;
  }
}

/* Die Quellen in einem aufklappbaren Kasten unter dem Text, im Stil der Fragen. */
.quellen-liste {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

.quellen-liste__liste {
  margin: 0;
  padding: 0 1.25rem 1.25rem 2.5rem;
  columns: 2 14rem;
  column-gap: 2rem;
}

.quellen-liste__liste li {
  break-inside: avoid;
}

.quellen-liste__liste a {
  color: var(--brand);
}

/* ------------------------------------------------------------------ Kegelspiele */

/* kegelspiele.html. Die Seite liest sich wie eine Seite im Kegelbuch: ein Register vorne, dann
   ein Eintrag je Spiel mit Haarlinie darueber. Bahngruen gibt es nur an den Verweisen und am
   Koenig in der Raute. */

/* Schnellwahl: Anlass links, Spiele rechts, wie die Begriffe, aber als Karte. */
.schnellwahl {
  margin: 1.25rem 0 0;
  padding: 0.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

.schnellwahl > div {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 0.25rem 1.5rem;
  padding: 0.875rem 0;
}

.schnellwahl > div + div {
  border-top: 1px solid var(--line);
}

.schnellwahl dt {
  font-family: var(--font-display);
  font-weight: 600;
}

.schnellwahl dd {
  margin: 0;
  color: var(--ink-soft);
}

.schnellwahl a,
.spiele a {
  color: var(--brand);
  text-underline-offset: 0.2em;
}

/* Das Register der 20 Spiele. Nummer und Dauer in gleich breiten Ziffern, damit die Spalten
   untereinander stehen wie im Kassenbuch. */
.spiele table {
  font-variant-numeric: tabular-nums;
}

.spiele tbody th {
  color: var(--ink);
}

.tabelle .spiele__nr {
  width: 3rem;
  padding-right: 0;
  color: var(--ink-soft);
}

.tabelle .spiele__dauer {
  text-align: right;
  white-space: nowrap;
}

/* Am Telefon fehlt die Spalte "Wer gegen wen" - sie steht ohnehin in jedem Eintrag, und so
   passt das Register ohne seitliches Wischen. */
@media (max-width: 40rem) {
  .spiele .spiele__wer {
    display: none;
  }

  .tabelle .spiele__nr {
    width: 2rem;
  }
}

/* Ein Spiel: Haarlinie darueber, Kenndaten in einer Zeile, Regeln, dann die Hausregeln als
   leisere Notiz. */
.spiel {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.prose .spiel h3 {
  margin: 0;
  font-size: 1.375rem;
}

.prose .spiel__daten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.spiel__daten > span + span::before {
  content: '·';
  margin: 0 0.5rem;
  color: var(--line);
}

.prose .spiel__haus {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: var(--surface-alt);
  font-size: 0.9375rem;
}

.spiel__haus > span {
  display: block;
  margin-bottom: 0.125rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

/* Erklaervideo zu einem Spiel: eigenes Vorschaubild und ein gewoehnlicher Link zu YouTube. Kein
   eingebetteter Player - der wuerde schon beim Aufruf Daten an YouTube schicken (siehe
   Datenschutzerklaerung, "Keine fremden Inhalte"). */
.prose .spiel__video {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.prose .spiel__video:hover,
.prose .spiel__video:focus-visible {
  border-color: var(--brand-solid);
  box-shadow: var(--shadow-sm);
}

.spiel__video-bild {
  position: relative;
  flex: 0 0 auto;
  width: min(11rem, 40%);
  border-radius: 0.5rem;
  overflow: hidden;
}

.spiel__video-bild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Abspielknopf: gruener Kreis, darin ein weisses Dreieck aus Raendern (ohne Bilddatei) */
.spiel__video-bild::before,
.spiel__video-bild::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
}

.spiel__video-bild::before {
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border-radius: 50%;
  background: var(--brand-solid);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
}

.spiel__video-bild::after {
  margin: -0.5rem 0 0 -0.3rem;
  border-style: solid;
  border-width: 0.5rem 0 0.5rem 0.8rem;
  border-color: transparent transparent transparent #fff;
}

.spiel__video-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.9375rem;
}

.spiel__video-text strong {
  font-family: var(--font-display);
  font-weight: 600;
}

.spiel__video-text span {
  color: var(--ink-soft);
}

/* Skizzen zu einzelnen Spielen: so, wie die Tafel an der Bahn aussieht, mit einem
   durchgerechneten Beispiel. Linien in der Farbe der Raute, Bahngruen nur fuer das, worauf es
   ankommt (gestrichene Zahl, wer zahlt). */
.skizze {
  margin: 1.25rem 0 0;
}

.skizze svg {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
}

.skizze figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.skizze text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-anchor: middle;
  fill: var(--ink);
}

.skizze .skizze__links {
  text-anchor: start;
}

.skizze .skizze__zahl {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.skizze .skizze__gross {
  font-size: 34px;
  fill: var(--brand);
}

.skizze .skizze__klein {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  fill: var(--ink-soft);
}

.skizze .skizze__weg {
  fill: color-mix(in srgb, var(--ink-soft) 55%, transparent);
}

.skizze__kasten {
  fill: var(--surface);
  stroke: var(--ink-soft);
  stroke-width: 1.5;
}

.skizze__linie,
.skizze__offen,
.skizze__streich {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skizze__linie {
  stroke: var(--ink-soft);
}

.skizze__offen {
  stroke: color-mix(in srgb, var(--ink-soft) 45%, transparent);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

.skizze__streich {
  stroke: var(--brand-solid);
  stroke-width: 3;
}

.skizze__latte {
  fill: var(--surface);
  stroke: var(--ink-soft);
  stroke-width: 2;
  stroke-linejoin: round;
}

.skizze__punkt {
  fill: var(--ink-soft);
}

.skizze__kreis {
  fill: none;
  stroke: var(--brand-solid);
  stroke-width: 2.5;
}

/* Die Raute neben den Begriffen: links die Zeichnung, rechts die Erklaerungen. */
.raute-block {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.25rem;
}

.raute-block .begriffe {
  margin-top: 0;
}

.raute-block .begriffe > div {
  grid-template-columns: 8.5rem 1fr;
}

.raute {
  width: 100%;
  height: auto;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}

.raute__linien path {
  fill: none;
  stroke: color-mix(in srgb, var(--ink-soft) 45%, transparent);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

.raute__kegel circle {
  fill: var(--surface);
  stroke: var(--ink-soft);
  stroke-width: 1.5;
}

.raute__koenig circle {
  fill: var(--brand-solid);
}

.raute text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-anchor: middle;
  fill: var(--ink);
}

.raute__koenig text {
  fill: #0f172a;
  font-size: 16px;
}

.raute__pfeil {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 40rem) {
  .schnellwahl > div {
    grid-template-columns: 1fr;
  }

  .raute-block {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .raute-block .begriffe > div {
    grid-template-columns: 1fr;
  }

  .raute {
    position: static;
    max-width: 11rem;
    margin: 0 auto;
  }
}