/* GENERIERT VON build.js - NICHT HIER EDITIEREN.
   Quelle: src/css/ (22 Dateien)
   Aenderungen hier gehen beim naechsten `node build.js` verloren. */

/* ==================================================================
   00-tokens.css
   ================================================================== */
/* ============================================================================
   DESIGN-TOKENS

   Ein Dark Theme, abgeleitet aus der Flutter-App:
   app/lib/styles/theme.dart und app/lib/styles/table_styles.dart.
   Wer hier einen Wert aendert, aendert ihn auf der ganzen Seite.

   KONTRAST (gerechnet gegen --c-bg #121212):
     #FFFFFF              17.9:1   Ueberschriften
     rgba(255,255,255,.78) ~10:1   Fliesstext
     #FFD700 Gold         13.5:1   Links und Akzentschrift
     #FF8C00 Orange        7.9:1   Sekundaerakzent, Icons
     #D72638 Rot           3.8:1   NUR Flaeche, nie Fliesstext
     #FFFFFF auf #D72638   5.0:1   Schrift auf roter Flaeche - besteht AA

   Daraus die wichtigste Regel dieses Stylesheets:
   LINKS SIND GOLD, NICHT ROT. Rot ist Flaechenfarbe (Kopfzeile, Primaerbutton,
   Kacheln, Chips). Genau so verwendet es auch die App: Rot als AppBar und
   Button, Gold als Highlight-Text.
   ========================================================================= */

:root {
  /* --- Farben ------------------------------------------------------------ */
  --c-primary: #D72638;            /* theme.dart:7  */
  --c-primary-soft: rgba(215, 38, 56, 0.8);
  --c-secondary: #FF8C00;          /* theme.dart:8  */
  --c-accent: #FFD700;             /* theme.dart:13 */

  --c-bg: #121212;                 /* theme.dart:9  */
  --c-surface: #1E1E1E;            /* theme.dart:10 */
  --c-surface-alt: #252525;        /* table_styles.dart:8 */

  --c-text: #FFFFFF;
  --c-text-muted: rgba(255, 255, 255, 0.78);
  --c-text-faint: rgba(255, 255, 255, 0.58);

  --c-border: rgba(255, 255, 255, 0.10);
  --c-border-strong: rgba(255, 255, 255, 0.18);
  --c-border-accent: rgba(255, 215, 0, 0.30);

  --c-success: #00C853;            /* table_styles.dart:9  */
  --c-success-text: #69F0AE;       /* helleres Gruen fuer Text auf Dunkel */
  --c-danger: #D50000;             /* table_styles.dart:10 - nur Flaeche */
  --c-danger-text: #FF6B6B;        /* #D50000 hat auf #121212 nur 3.3:1 */
  --c-disabled: #424242;

  /* --- Radien (App: 8/12/16/20, Standard 12) ----------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* --- Abstaende (App: 4/8/12/16/20/24) ---------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --section-y: clamp(48px, 8vw, 96px);

  /* --- Schatten ----------------------------------------------------------- */
  --sh-card: 0 4px 10px rgba(0, 0, 0, 0.30);        /* theme.dart:52-56 */
  --sh-stat: 0 3px 5px 1px rgba(0, 0, 0, 0.20);
  --sh-raised: 0 8px 24px rgba(0, 0, 0, 0.40);
  --sh-glow-gold: 0 0 8px 1px rgba(255, 215, 0, 0.30);
  --sh-glow-red: 0 2px 12px rgba(215, 38, 56, 0.35);

  /* --- Verlaeufe (App: topLeft -> bottomRight = 135deg) ------------------ */
  --g-panel: linear-gradient(135deg, rgba(215, 38, 56, 0.10), rgba(255, 215, 0, 0.10));
  --g-panel-soft: linear-gradient(135deg, rgba(215, 38, 56, 0.08), rgba(255, 215, 0, 0.08));
  --g-panel-strong: linear-gradient(135deg, rgba(215, 38, 56, 0.20), rgba(255, 215, 0, 0.20));
  --g-card: linear-gradient(135deg, #1E1E1E, rgba(30, 30, 30, 0.80));
  --g-chip: linear-gradient(90deg, #D72638, rgba(215, 38, 56, 0.80));
  --g-brand: linear-gradient(135deg, #D72638, #FF8C00);

  /* --- Typografie --------------------------------------------------------- */
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fredoka One', var(--font-body);

  /* Fliessend zwischen Mobil und Desktop, deshalb kaum Breakpoints noetig */
  --fs-900: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);      /* Hero-H1  32 -> 52 */
  --fs-800: clamp(1.5rem, 1.2rem + 1.25vw, 2.125rem);   /* h2       24 -> 34 */
  --fs-700: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* h3       20 -> 24 */
  --fs-600: 1.125rem;   /* 18 */
  --fs-500: 1rem;       /* 16 - Standard der App */
  --fs-400: 1rem;
  --fs-300: 0.875rem;   /* 14 */

  /* Bewusst hoeher als in der App: heller Text auf dunklem Grund braucht
     mehr Luft, damit laengere Abschnitte lesbar bleiben. */
  --lh-body: 1.75;
  --lh-tight: 1.2;
  --ls-brand: 0.5px;

  /* --- Layout -------------------------------------------------------------- */
  --container: 1120px;
  --measure: 68ch;                        /* Lesebreite laengerer Texte */
  --gutter: clamp(16px, 4vw, 20px);       /* App: Screen-Padding 20 */
  --header-h: 64px;

  /* --- Bewegung ------------------------------------------------------------ */
  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;
}

/* ==================================================================
   01-reset.css
   ================================================================== */
/* ============================================================================
   RESET UND GRUNDLAGEN
   ========================================================================= */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der Sprungmarken-Abstand beruecksichtigt die klebende Kopfzeile. */
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  background-color: var(--c-bg);
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-500);
  line-height: var(--lh-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--c-secondary);
}

/* Sichtbarer Fokus. Gold auf dunklem Grund, Weiss auf farbigen Flaechen. */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.site-header :focus-visible,
.btn:focus-visible,
.download-cta :focus-visible {
  outline-color: var(--c-text);
}

/* Wer Bewegung reduziert haben will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

/* Sprungmarke: erst beim Tabben sichtbar. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--s-3) var(--s-5);
  background: var(--c-accent);
  color: #121212;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--r-md) 0;
}

.skip-link:focus {
  left: 0;
}

/* ==================================================================
   02-fonts.css
   ================================================================== */
/* ============================================================================
   SCHRIFTEN - selbst ausgeliefert

   Erzeugt von tools/fetch-fonts.js. Nicht von Hand bearbeiten; wer einen
   Schnitt ergaenzen will, passt das Skript an und laesst es neu laufen.

   Die Einbindung ueber fonts.googleapis.com uebertrug die IP jedes
   Besuchers an Google, noch vor jeder Einwilligung. Ausserdem nutzte die
   alte Fassung die v1-Legacy-API ohne unicode-range, lud also immer den
   vollen Zeichensatz.

   Nur das lateinische Subset: Umlaute und ss liegen in U+0000-00FF,
   typografische Anfuehrungszeichen in U+2000-206F.

   Poppins und Fredoka One stehen unter der SIL Open Font License.
   ========================================================================= */
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/fredoka-one-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   03-typography.css
   ================================================================== */
/* ============================================================================
   TYPOGRAFIE

   Poppins fuer alles - dieselbe Schrift und dieselben Schnitte wie die App
   (theme.dart:16-27: 32/700, 24/700, 20/700, 18/600, 16/600, 16/400, 14/400).
   Fredoka One bleibt ausschliesslich der Wortmarke und der Hero-Ueberschrift
   vorbehalten, als Klammer zur bisherigen Seite.
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  color: var(--c-text);
  line-height: var(--lh-tight);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-900);
}

h2 {
  font-size: var(--fs-800);
}

h3 {
  font-size: var(--fs-700);
}

h4 {
  font-size: var(--fs-600);
  font-weight: 600;
}

/* Die beiden einzigen Stellen mit Fredoka One. */
.wordmark,
.hero-section h1 {
  font-family: var(--font-display);
  font-weight: 400;          /* Fredoka One gibt es nur in diesem Schnitt -
                                font-weight:700 erzwaenge ein Faux-Bold */
  letter-spacing: var(--ls-brand);
}

p {
  text-wrap: pretty;
}

strong, b {
  color: var(--c-text);
  font-weight: 600;
}

small {
  font-size: var(--fs-300);
}

hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--s-8) 0;
}

code, kbd, samp {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.9em;
  background: var(--c-surface-alt);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
}

/* --- Fliesstext-Bereiche ------------------------------------------------- */
/* .prose begrenzt die Zeilenlaenge auf ~68 Zeichen. Das entspricht dem
   App-Muster "Regel-Inhalt auf maximal 800 px" (rules_screen.dart:49). */
.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--s-4);
}

.prose h2 {
  margin-top: var(--s-12);
  margin-bottom: var(--s-2);
}

.prose h3 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-1);
  color: var(--c-accent);
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-left: var(--s-5);
}

.prose li {
  position: relative;
  margin-top: var(--s-2);
  padding-left: var(--s-4);
}

.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-accent);
}

.prose ol {
  counter-reset: prose-counter;
}

.prose ol > li {
  counter-increment: prose-counter;
}

.prose ol > li::before {
  content: counter(prose-counter) '.';
  position: absolute;
  left: 0;
  color: var(--c-accent);
  font-weight: 600;
}

/* Abschnittsueberschriften mittig ueber Sektionen */
.section-title {
  text-align: center;
  margin-bottom: var(--s-3);
}

.section-subtitle {
  text-align: center;
  color: var(--c-text-muted);
  max-width: var(--measure);
  margin: 0 auto var(--s-8);
}

.link-highlight {
  color: var(--c-accent);
  font-weight: 600;
}

/* ==================================================================
   04-layout.css
   ================================================================== */
/* ============================================================================
   LAYOUT

   EINE Containerbreite. Das Alt-Stylesheet kannte vier verschiedene
   max-width-Werte (600/800/900/1200 px), je nach Sektion.
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Jede Seitensektion traegt die HALBE Abstandseinheit oben und unten. Zwei
   aufeinanderfolgende Sektionen ergeben damit zusammen genau --section-y -
   unabhaengig von der Reihenfolge und davon, ob eine Sektion eine eigene
   Flaeche hat.
   Die fruehere Loesung ("section + section { padding-top: 0 }") sah bei
   Sektionen ohne Hintergrund richtig aus, riss aber ueberall dort ein Loch
   oder eine Enge, wo eine farbige Flaeche angrenzte. */
section,
main > section,
.section {
  padding-block: calc(var(--section-y) / 2);
  padding-inline: var(--gutter);
}

section > *,
.section > * {
  max-width: var(--container);
  margin-inline: auto;
}

/* Die erste und die letzte Sektion brauchen den vollen Abstand nach aussen,
   sonst kleben sie an Kopf- und Fusszeile. */
#inhalt > section:first-child:not(.hero-section) {
  padding-top: var(--section-y);
}

#inhalt > section:last-child {
  padding-bottom: var(--section-y);
}

/* Abwechselnde Flaechen geben langen Seiten Rhythmus. Bewusst halbdurch-
   sichtig: eine deckende Flaeche wuerde die Farbwolken im Hintergrund
   verdecken, die der Seite ihre Tiefe geben. */
.section--surface,
.why-molotow-section {
  background: rgba(30, 30, 30, 0.55);
  border-block: 1px solid var(--c-border);
  padding-block: var(--section-y);
}

/* --- Raster --------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 600px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Zwischenstufe: vier Karten stehen ab 600 px zu zweit statt untereinander. */
@media (min-width: 600px) and (max-width: 959.98px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.center {
  text-align: center;
}

/* ==================================================================
   05-patterns.css
   ================================================================== */
/* ============================================================================
   SIGNATURE-MUSTER DER APP

   Vier Flaechen-Muster, die in der Flutter-App durchgaengig auftreten. Sie
   sind das eigentliche Wiedererkennungsmerkmal - mehr noch als die Farben
   allein. Alle Verlaeufe laufen in der App topLeft -> bottomRight, in CSS
   also 135deg.
   ========================================================================= */

/* --- A: Accent Panel -----------------------------------------------------
   Rot-Gold-Verlauf mit 10 % Deckkraft, 1 px goldener Rand, Radius 20.
   In der App: Begruessungsfeld, Login-Bereich, Profilkarte
   (start_screen.dart:254-266, :665-677, player_setup_screen.dart:201-213).   */
.panel {
  background: var(--g-panel);
  border: 1px solid var(--c-border-accent);
  border-radius: var(--r-xl);
  padding: var(--s-5);
}

/* Variante mit 8 % und Radius 16 - start_screen.dart:588-600 (Logo-Kopf) */
.panel--soft {
  background: var(--g-panel-soft);
  border-color: rgba(255, 215, 0, 0.20);
  border-radius: var(--r-lg);
}

/* Variante mit 20 % und Radius 12 - score_input_screen.dart:819-830 (Badge) */
.panel--strong {
  background: var(--g-panel-strong);
  border-radius: var(--r-md);
}

/* --- B: Neutral Card -----------------------------------------------------
   Karten-Grau-Verlauf mit weissem 10-%-Rand, Radius 16.
   In der App: Einstellungen, Spielerauswahl, Kontakt, Historie
   (settings_screen.dart:161-173, profile_screen.dart:693-705).              */
.card {
  background: var(--g-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--s-5);
}

/* --- C: Erfolgs-CTA ------------------------------------------------------
   Gruener Verlauf mit gruenem Schein, Radius 20.
   In der App: "Laufendes Spiel fortsetzen", "Spiel starten"
   (start_screen.dart:385-397, player_setup_screen.dart:533-549).            */
.cta-success {
  background: linear-gradient(135deg, #388E3C, #4CAF50);
  border-radius: var(--r-xl);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.30);
  color: var(--c-text);
}

/* --- D: Chip -------------------------------------------------------------
   Roter Verlauf, Radius 20. In der App die Spieler-Chips
   (player_setup_screen.dart:357-372).                                       */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--g-chip);
  border-radius: var(--r-xl);
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--c-text);
  box-shadow: var(--sh-glow-red);
}

/* --- Symbole -------------------------------------------------------------
   Alle Symbole kommen aus dem Sprite in src/partials/icon-sprite.html und
   tragen ihre Strichstaerke selbst. Sie erben die Farbe ueber currentColor,
   sind also automatisch farbgleich mit ihrer Umgebung. */
.icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

.icon--sm { width: 1.125em; height: 1.125em; }
.icon--lg { width: 2em; height: 2em; }

/* --- Goldener Schein, in der App punktuell um Avatare ------------------- */
.is-glowing {
  box-shadow: var(--sh-glow-gold);
}

/* --- Farbige Icon-Flaeche ------------------------------------------------
   Das App-Muster "Icon-Box in der Akzentfarbe mit 20 % Deckkraft, Radius 12"
   (rules_screen.dart:137-155). Die Farbe kommt je Element ueber --icon-c.   */
.icon-box {
  --icon-c: var(--c-accent);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--icon-c) 20%, transparent);
  color: var(--icon-c);
  flex-shrink: 0;
}

/* Fallback fuer Browser ohne color-mix: goldener Schimmer statt Fehlfarbe. */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .icon-box {
    background: rgba(255, 215, 0, 0.20);
  }
}

.icon-box img {
  width: 60%;
  height: auto;
}

/* ==================================================================
   06-backdrop.css
   ================================================================== */
/* ============================================================================
   HINTERGRUND

   Eine flache Flaeche #121212 wirkt korrekt, aber leblos. Hier liegen drei
   weiche Farbwolken aus der Markenpalette dahinter - Rot oben links, Orange
   oben rechts, Gold unten. Sie sind so schwach, dass der Kontrast der Schrift
   unveraendert bleibt, geben der Seite aber Tiefe.

   Die Wolken haengen fest im Ansichtsfenster (position: fixed) und
   verschieben sich beim Scrollen leicht gegenlaeufig. Den Scrollwert setzt
   src/js/60-motion.js als --scroll-shift; ohne JavaScript steht er auf 0 und
   der Hintergrund ist einfach statisch.
   ========================================================================= */

:root {
  --scroll-shift: 0px;
}

body::before {
  content: '';
  position: fixed;
  inset: -10% -10% -10% -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(55rem 38rem at 12% -8%, rgba(215, 38, 56, 0.22), transparent 62%),
    radial-gradient(48rem 34rem at 88% 4%, rgba(255, 140, 0, 0.14), transparent 60%),
    radial-gradient(42rem 30rem at 50% 104%, rgba(255, 215, 0, 0.09), transparent 62%);
  transform: translate3d(0, var(--scroll-shift), 0);
  will-change: transform;
}

/* Feine Koernung darueber. Ohne sie wirken grossflaechige Verlaeufe auf
   dunklem Grund schnell streifig (Banding). Das Muster steckt als winziges
   SVG direkt in der Datei - kein zusaetzlicher Request. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    transform: none;
  }
}

/* ==================================================================
   10-header.css
   ================================================================== */
/* ============================================================================
   KOPFZEILE UND NAVIGATION

   Rote Flaeche wie die AppBar der App (start_screen.dart:63-69 und alle
   weiteren Screens: backgroundColor AppTheme.primaryColor).

   Behebt zwei Fehler des Alt-Stylesheets strukturell:
   1. Dort positionierte der Mobil-Breakpoint den Burger-Button absolut
      gegenueber ".site-header .container" - ein Element, das in keinem Header
      existierte. Der Button haftete dadurch am Viewport statt an der
      Kopfzeile und hing auf halber Bildschirmhoehe. Hier ist er ein normales
      Flex-Kind, position:static.
   2. ".main-nav { flex-grow: 1 }" blieb wirkungslos, weil .site-header gar
      kein Flex-Container war. Jetzt ist er einer.
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
  padding: var(--s-2) var(--gutter);
  /* Rot wie die AppBar der App, aber mit leichtem Verlauf und einer dunklen
     Kante nach unten - eine flache Vollflaeche wirkte hart abgeschnitten. */
  background: linear-gradient(180deg, #e02a3e 0%, var(--c-primary) 62%, #b81f30 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* Schmaler Goldfaden als Abschluss - greift den Akzent der App auf und
   trennt die Kopfzeile sauber vom Inhalt. */
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.55), transparent);
}

/* --- Logo und Wortmarke --------------------------------------------------- */
.site-header .logo {
  flex-shrink: 0;
}

.site-header .logo a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-text);
  text-decoration: none;
}

.site-header .logo img {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  /* Die Logodatei ist transparent und zeigt eine kleinteilige, dunkle
     Zeichnung. Auf der roten Flaeche ging sie unter. Eine weisse Scheibe
     darunter gibt ihr den Hintergrund, fuer den sie gezeichnet wurde. */
  background: #fff;
  padding: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.wordmark {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--c-text);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- Navigation ----------------------------------------------------------- */
.main-nav {
  margin-left: auto;
}

#main-menu {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

#main-menu a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: var(--fs-300);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast);
}

#main-menu a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--c-text);
}

/* Der aktive Punkt wird in Gold markiert - dieselbe Rolle wie in der App,
   wo Gold das Highlight ist. */
#main-menu a.active {
  background: rgba(255, 255, 255, 0.16);
  color: var(--c-accent);
}

/* --- Burger --------------------------------------------------------------- */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;      /* Mindest-Tippflaeche */
  height: 44px;
  margin-left: auto;
  padding: 10px;
  border-radius: var(--r-md);
}

.mobile-menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--c-text);
  transition: transform var(--t-base), opacity var(--t-fast);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobil ---------------------------------------------------------------- */
@media (max-width: 859.98px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .main-nav {
    margin-left: 0;
  }

  #main-menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--s-2);
    padding: var(--s-6) var(--gutter);
    background: var(--c-surface);
    border-top: 1px solid var(--c-border);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-base), visibility var(--t-base);
    overflow-y: auto;
  }

  #main-menu.active {
    transform: translateX(0);
    visibility: visible;
  }

  #main-menu li {
    width: 100%;
  }

  #main-menu a {
    padding: var(--s-4);
    font-size: var(--fs-600);
    border-bottom: 1px solid var(--c-border);
    border-radius: 0;
  }

  /* Solange das Menue offen ist, soll die Seite dahinter nicht scrollen. */
  body.mobile-menu-open {
    overflow: hidden;
  }
}

/* ==================================================================
   11-footer.css
   ================================================================== */
/* ============================================================================
   FUSSZEILE
   ========================================================================= */

.site-footer {
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  color: var(--c-text-muted);
  text-align: center;
  padding: var(--s-8) var(--gutter);
  font-size: var(--fs-300);
}

.site-footer > * {
  max-width: var(--container);
  margin-inline: auto;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-4);
}

.footer-nav a,
.footer-link-button {
  color: var(--c-text-muted);
  font-size: var(--fs-300);
  text-decoration: none;
  padding: var(--s-1) 0;
  transition: color var(--t-fast);
}

.footer-nav a:hover,
.footer-link-button:hover {
  color: var(--c-accent);
  text-decoration: underline;
}

/* Der Widerruf ist ein Button, kein Link - er loest eine Aktion aus und
   navigiert nicht. Er soll aber wie die Links daneben aussehen. */
.footer-link-button {
  font-family: inherit;
  font-weight: inherit;
}

/* ==================================================================
   12-button.css
   ================================================================== */
/* ============================================================================
   SCHALTFLAECHEN

   Eine Basis, mehrere Varianten. Das Alt-Stylesheet kannte fuenf
   unterschiedlich definierte Button-Klassen (.btn, .platform-btn,
   .btn-primary zweimal mit widerspruechlichen Werten auf Zeile 226 und 859,
   .home-button) mit Radien zwischen 5 px und 999 px.

   Masse aus der App: Radius 12, Padding 12/20, Schrift 16/700
   (theme.dart:30-36 primaryButtonStyle).
   ========================================================================= */

.btn,
.btn-primary,
.platform-btn,
.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;                       /* Mindest-Tippflaeche */
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.btn:active,
.btn-primary:active,
.platform-btn:active,
.home-button:active {
  transform: translateY(1px);
}

/* --- Primaer: rote Flaeche, weisse Schrift (5.0:1, besteht AA) ----------- */
.btn-primary,
.btn--primary {
  background: var(--c-primary);
  color: var(--c-text);
}

.btn-primary:hover,
.btn--primary:hover {
  background: #ef2c40;
  color: var(--c-text);
  box-shadow: var(--sh-glow-red);
}

/* --- Sekundaer: orange ---------------------------------------------------- */
.btn-secondary,
.btn--secondary {
  background: var(--c-secondary);
  color: #1a1200;
}

.btn-secondary:hover,
.btn--secondary:hover {
  background: #ffa32e;
  color: #1a1200;
}

/* --- Store-Buttons: dezent umrandet, damit die Wortmarken wirken --------- */
.btn-appstore,
.btn-playstore,
.platform-btn,
.home-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

.btn-appstore:hover,
.btn-playstore:hover,
.platform-btn:hover,
.home-button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* Auf der Akzentflaeche der Download-CTA stehen die Store-Buttons kraeftiger. */
.download-cta .btn-appstore,
.download-cta .btn-playstore {
  background: var(--c-text);
  border-color: var(--c-text);
  color: #121212;
}

.download-cta .btn-appstore:hover,
.download-cta .btn-playstore:hover {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #121212;
}

/* --- Erfolgsvariante, App-Muster C --------------------------------------- */
.btn--success {
  background: linear-gradient(135deg, #388E3C, #4CAF50);
  border-radius: var(--r-xl);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.30);
  color: var(--c-text);
}

/* --- Zustaende ------------------------------------------------------------ */
.btn[disabled],
.btn-primary[disabled],
button[disabled] {
  background: var(--c-disabled);
  border-color: transparent;
  color: var(--c-text-faint);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn--block {
  width: 100%;
}

/* Der "Zurueck zur Startseite"-Button steht als eigener Block unter dem
   Formular und braucht Abstand nach oben. */
.home-button {
  margin-top: var(--s-8);
}

/* ==================================================================
   13-card.css
   ================================================================== */
/* ============================================================================
   KARTEN

   Alle Kartenarten der Seite auf App-Muster B: Karten-Grau-Verlauf, weisser
   10-%-Rand, Radius 16, weicher Schatten.
   ========================================================================= */

.platform-card,
.why-molotow-card,
.testimonial-item,
.info-card {
  background: var(--g-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--s-6);
  transition: border-color var(--t-base), transform var(--t-base),
              box-shadow var(--t-base);
}

.platform-card:hover,
.why-molotow-card:hover {
  border-color: var(--c-border-accent);
  transform: translateY(-3px);
  box-shadow: var(--sh-raised);
}

/* --- Kartensektionen ------------------------------------------------------ */
/* Die Ueberschrift steht mittig ueber dem Raster, der Karteninhalt aber
   linksbuendig: zentrierte Fliesstextbloecke mit Flatterrand links UND rechts
   wirken unruhig und sind schlechter lesbar. */
.platforms-section,
.why-molotow-section {
  text-align: center;
}

.platforms-section > h2,
.why-molotow-section > h2 {
  margin-bottom: var(--s-8);
}

.platform-card,
.why-molotow-card {
  text-align: left;
}

/* --- Plattform-Karten (App Store / Play Store) --------------------------- */
.platforms-grid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 600px) {
  .platforms-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.platform-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.platform-card h3 {
  color: var(--c-text);
  font-size: var(--fs-600);
}

.platform-card p {
  color: var(--c-text-muted);
  font-size: var(--fs-300);
  flex-grow: 1;
}

.platform-card .platform-btn {
  width: 100%;
  margin-top: var(--s-2);
}

/* --- "Warum Molotow Jass?" ------------------------------------------------ */
/* Drei Spalten statt vier: die Startseite zeigt sechs Karten, die
   Beschreibungsseite neun - beides geht damit ohne angebrochene Reihe auf. */
.why-molotow-grid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 600px) {
  .why-molotow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .why-molotow-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.why-molotow-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.why-molotow-card h3 {
  font-size: var(--fs-600);
  color: var(--c-text);
}

/* Kennzeichnung fuer Funktionen, die es nicht auf allen Plattformen gibt.
   Der Trinkspielmodus ist in der App fest auf Android beschraenkt
   (GameSettings.isDrinkGameEnabled() liefert auf iOS immer false) - ohne
   diesen Hinweis verspricht die Seite etwas, das iPhone-Nutzer nicht
   bekommen. */
.card-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  background: rgba(255, 140, 0, 0.16);
  border: 1px solid rgba(255, 140, 0, 0.45);
  color: var(--c-secondary);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.why-molotow-card p {
  font-size: var(--fs-300);
  color: var(--c-text-muted);
}

/* --- Icon-Flaeche --------------------------------------------------------
   Ein einziges Muster fuer alle Kartensymbole: das Accent-Panel der App
   (Rot-Gold-Verlauf, goldener Rand) auf Icon-Groesse, das Symbol selbst in
   Gold. Weil die Symbole aus dem SVG-Sprite kommen und currentColor erben,
   sind sie automatisch farbgleich - genau das fehlte den bisherigen
   Rasterbildern aus vier verschiedenen Quellen. */
.why-icon,
.platform-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  background: var(--g-panel-strong);
  border: 1px solid var(--c-border-accent);
  color: var(--c-accent);
  transition: border-color var(--t-base), color var(--t-base),
              transform var(--t-base);
}

.why-icon .icon,
.platform-icon .icon {
  width: 28px;
  height: 28px;
}

.why-molotow-card:hover .why-icon,
.platform-card:hover .platform-icon {
  color: var(--c-text);
  border-color: var(--c-accent);
  transform: scale(1.06);
}

/* --- Info- und Warnkarten (Spielregeln) ---------------------------------- */
.info-card {
  --icon-c: var(--c-secondary);
  border-left: 3px solid var(--icon-c);
}

.warning-card {
  --icon-c: var(--c-danger-text);
  background: rgba(213, 0, 0, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.35);
  border-left: 3px solid var(--c-danger-text);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.warning-card h3,
.warning-card h2 {
  color: var(--c-danger-text);
}

/* ==================================================================
   14-accordion.css
   ================================================================== */
/* ============================================================================
   FAQ-AKKORDEON

   Bleibt natives <details>/<summary>: kein JavaScript noetig, funktioniert
   ohne Einwilligung und ist von Haus aus zugaenglich.
   ========================================================================= */

.faq-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 52rem;
  margin-inline: auto;
}

.faq-item {
  background: var(--g-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base);
}

.faq-item[open] {
  border-color: var(--c-border-accent);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  cursor: pointer;
  list-style: none;
  color: var(--c-text);
  transition: background-color var(--t-fast);
}

/* Den Standard-Marker beider Engines entfernen. */
.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::marker {
  content: '';
}

.faq-question:hover {
  background: rgba(255, 255, 255, 0.04);
}

.faq-question h3 {
  font-size: var(--fs-600);
  font-weight: 600;
  color: inherit;
}

.faq-item[open] .faq-question h3 {
  color: var(--c-accent);
}

.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--c-accent);
  transition: transform var(--t-base);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--c-text-muted);
  max-width: var(--measure);
}

.faq-answer > * + * {
  margin-top: var(--s-3);
}

.faq-answer ul {
  padding-left: var(--s-5);
}

.faq-answer li {
  position: relative;
  padding-left: var(--s-4);
  margin-top: var(--s-2);
}

.faq-answer ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-accent);
}

/* ==================================================================
   15-table.css
   ================================================================== */
/* ============================================================================
   TABELLEN (Spielregeln)

   Die drei Tabellen auf jass-rules.html hatten bisher keinerlei
   Mobilbehandlung: vier Spalten, kein overflow-x, kein Umbruch. Auf dem Handy
   sprengten sie das Layout.

   Bewusst horizontales Scrollen statt Karten-Umbau: das aendert kein Markup
   und keine Semantik, und die Tabellen sind echte Datentabellen.
   Farbrollen wie in der App (table_styles.dart): Kopfzeile auf #252525,
   Zebrastreifen auf #1E1E1E, Punktespalte in Gold.
   ========================================================================= */

/* Der Wrapper wird per JavaScript gesetzt - siehe src/js/50-tables.js.
   Er ist fokussierbar, damit die Tabelle auch per Tastatur scrollbar ist. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--s-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  /* Ein Schatten am rechten Rand zeigt an, dass es weitergeht. */
  background:
    linear-gradient(to right, var(--c-surface) 30%, rgba(30, 30, 30, 0)) left / 24px 100% no-repeat,
    linear-gradient(to left, var(--c-surface) 30%, rgba(30, 30, 30, 0)) right / 24px 100% no-repeat;
}

.table-wrap:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-300);
  background: var(--c-surface);
  min-width: 34rem;
}

caption {
  caption-side: top;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  color: var(--c-text-faint);
  font-size: var(--fs-300);
}

th,
td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}

thead th {
  background: var(--c-surface-alt);
  color: var(--c-accent);
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

/* Zahlen rechtsbuendig und in Tabellenziffern - so stehen die Stellen
   untereinander, wie in der Punktetabelle der App. */
td:not(:first-child),
th:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

tbody th {
  font-weight: 600;
  color: var(--c-text);
}

/* ==================================================================
   16-form.css
   ================================================================== */
/* ============================================================================
   FORMULARE

   Eingabefelder im Stil der App: gefuellte Flaeche auf Karten-Grau, kein
   Rahmen, Radius 12 (rules_screen.dart:52-62, player_setup_screen.dart:238-253).
   ========================================================================= */

.contact-section {
  max-width: 42rem;
  margin-inline: auto;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--g-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--s-6);
}

.contact-form label {
  color: var(--c-text);
  font-size: var(--fs-300);
  font-weight: 600;
  margin-top: var(--s-3);
}

.contact-form label:first-of-type {
  margin-top: 0;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: var(--fs-500);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

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

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--c-text-faint);
}

.contact-form input:hover,
.contact-form textarea:hover {
  border-color: var(--c-border-strong);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  background: var(--c-surface);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* Nur nach einem Absendeversuch faerben - nicht schon beim Tippen. */
.contact-form input:user-invalid,
.contact-form textarea:user-invalid {
  border-color: var(--c-danger-text);
}

.contact-form button[type="submit"] {
  margin-top: var(--s-5);
}

/* --- Honeypot ------------------------------------------------------------- */
/* Bewusst nicht display:none - manche Bots ueberspringen unsichtbare Felder,
   aus dem Layout geschobene fuellen sie dagegen aus. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Rueckmeldung --------------------------------------------------------- */
.message-box {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  text-align: center;
  font-size: var(--fs-300);
}

.message-box[hidden] {
  display: none;
}

.message-box.success {
  background: rgba(0, 200, 83, 0.12);
  border: 1px solid rgba(105, 240, 174, 0.4);
  color: var(--c-success-text);
}

.message-box.error {
  background: rgba(213, 0, 0, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.4);
  color: var(--c-danger-text);
}

/* ==================================================================
   17-gallery.css
   ================================================================== */
/* ============================================================================
   GALERIE

   Die Aufnahmen werden wie Geraetebildschirme praesentiert: dunkler Rahmen,
   grosser Radius, weicher Schein. Das liest sich als Produktbild statt als
   loses Bild im Fliesstext.

   Die drei Elemente haben unterschiedliche Hoehen (die Standbilder sind
   zugeschnitten). Sie werden deshalb oben ausgerichtet und in der Hoehe
   begrenzt, statt auf ein gemeinsames Seitenverhaeltnis gezwungen zu werden -
   das wuerde sie verzerren.
   ========================================================================= */

.gallery-section {
  text-align: center;
}

.gallery-section h2 {
  margin-bottom: var(--s-8);
}

.screenshot-gallery {
  display: grid;
  gap: var(--s-6);
  justify-items: center;
  align-items: start;
}

@media (min-width: 700px) {
  .screenshot-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Gemeinsamer Geraeterahmen fuer Standbilder und Video.
   Alle drei erzwingen dasselbe Seitenverhaeltnis. Die Quellen sind
   unterschiedlich hoch - zwei zugeschnittene Standbilder und das Video in
   voller Laenge -, ohne feste Vorgabe standen sie in drei verschiedenen
   Groessen nebeneinander. */
.screenshot-img,
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 15rem;
  margin: 0;
  padding: 6px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  box-shadow: var(--sh-raised);
  aspect-ratio: 9 / 17;
}

.screenshot-img img,
.webapp-video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--c-bg);
  /* Oben ausgerichtet: die Kopfzeile der App mit Rundenzahl und Spielzeit
     ist der aussagekraeftigste Teil und soll nie weggeschnitten werden. */
  object-fit: cover;
  object-position: top center;
}

/* Ein warmer Schein hinter der mittleren Aufnahme hebt sie leicht hervor. */
.screenshot-gallery > *:nth-child(2)::after {
  content: '';
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(215, 38, 56, 0.28), transparent 68%);
  pointer-events: none;
}

/* ==================================================================
   18-consent.css
   ================================================================== */
/* ============================================================================
   COOKIE-BANNER

   Vorher steckten rund 40 Inline-Styles im Markup, auf sieben Seiten
   dupliziert. Beide Schaltflaechen sind bewusst gleich gross und gleich
   prominent - eine versteckte Ablehnung waere rechtlich angreifbar.
   ========================================================================= */

#cookie-consent-banner {
  position: fixed;
  left: var(--s-3);
  right: var(--s-3);
  bottom: var(--s-3);
  z-index: 900;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-border-accent);
  border-radius: var(--r-lg);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.55);
  color: var(--c-text-muted);
  font-size: var(--fs-300);
}

#cookie-consent-banner[hidden] {
  display: none;
}

.consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.consent-text {
  flex: 1 1 18rem;
}

.consent-text strong {
  display: block;
  margin-bottom: var(--s-2);
  font-size: var(--fs-500);
  color: var(--c-text);
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

/* Beide Schaltflaechen in derselben Groesse. */
.consent-actions .btn {
  min-width: 10rem;
  flex: 1 1 auto;
}

.consent-actions a {
  font-size: var(--fs-300);
  white-space: nowrap;
}

@media (max-width: 599.98px) {
  .consent-actions {
    width: 100%;
  }

  .consent-actions .btn {
    flex: 1 1 100%;
  }
}

/* ==================================================================
   19-hero.css
   ================================================================== */
/* ============================================================================
   HERO UND DOWNLOAD-CTA

   Der Hero uebernimmt das Accent-Panel der App (Muster A): Rot-Gold-Verlauf
   mit goldenem Rand. Bisher war jeder Hero auf jeder Seite dieselbe orange
   Vollflaeche - auch auf Impressum und Datenschutz.
   ========================================================================= */

.hero-section {
  position: relative;
  text-align: center;
  padding-block: clamp(48px, 9vw, 104px);
  overflow: hidden;
}

/* Der Verlauf liegt als eigene Ebene darunter, damit er ueber die volle
   Breite laeuft, der Text aber im Container bleibt. */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--g-panel);
  border-bottom: 1px solid var(--c-border-accent);
  z-index: -1;
}

.hero-section > * {
  max-width: 46rem;
  margin-inline: auto;
}

.hero-section h1 {
  color: var(--c-text);
}

.hero-section p {
  margin-top: var(--s-5);
  font-size: var(--fs-600);
  color: var(--c-text-muted);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

/* --- Produkt-Hero der Startseite -----------------------------------------
   Zweispaltig ab 900 px: Text links, Geraet rechts. Darunter gestapelt, das
   Geraet zuerst - auf dem Handy soll man das Produkt sehen, bevor man liest. */
.hero-section--product {
  text-align: left;
}

/* Die 46rem-Begrenzung weiter oben gilt fuer den einspaltigen Hero der
   Unterseiten. Der zweispaltige Produkt-Hero braucht die volle
   Containerbreite, sonst steht er gequetscht in der Mitte. */
.hero-section--product > .hero-inner {
  max-width: var(--container);
}

/* Der Farbverlauf der Sektion laeuft weiterhin ueber die volle Breite; nur
   der Inhalt ist auf die Containerbreite begrenzt. Die Begrenzung kommt aus
   der allgemeinen Regel "section > *" in 04-layout.css. */
.hero-inner {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero-text {
  order: 2;
}

.hero-device {
  order: 1;
  justify-self: center;
  position: relative;
  width: min(100%, 17rem);
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .hero-text { order: 1; }
  .hero-device { order: 2; justify-self: end; width: min(100%, 19rem); }
}

.hero-section--product .hero-cta {
  justify-content: flex-start;
}

.hero-section--product h1 {
  max-width: 14ch;
}

.hero-section--product p {
  max-width: 34rem;
}

/* Geraeterahmen, leicht gekippt. Die Neigung nimmt beim Scrollen ab -
   siehe src/js/60-motion.js. */
.hero-device img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  padding: 6px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: rotate(var(--device-tilt, -3.5deg)) translate3d(0, var(--device-shift, 0px), 0);
  transition: transform var(--t-base);
  will-change: transform;
}

/* Warmer Schein hinter dem Geraet. */
.hero-device::before {
  content: '';
  position: absolute;
  inset: -22% -28%;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(215, 38, 56, 0.42), transparent 62%),
    radial-gradient(ellipse at 65% 70%, rgba(255, 215, 0, 0.22), transparent 60%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-device img {
    transform: none;
  }
}

/* Rechts- und Textseiten bekommen einen ruhigeren Hero als die
   Marketingseiten - bisher sah Impressum aus wie die Startseite. */
.page-legal .hero-section {
  padding-block: clamp(32px, 6vw, 64px);
}

.page-legal .hero-section::before {
  background: var(--c-surface);
  border-bottom-color: var(--c-border);
}

/* --- Download-CTA ---------------------------------------------------------
   Die Sektion selbst bleibt unsichtbar und liefert nur den Rhythmus und den
   seitlichen Rand; die farbige Flaeche ist das innere Element. */
.download-cta__inner {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--g-brand);
  border-radius: var(--r-xl);
  padding: clamp(32px, 6vw, 56px) var(--s-5);
  box-shadow: var(--sh-raised);
}

/* Ein weicher Lichtschein hinter der Ueberschrift gibt der Flaeche Tiefe,
   statt sie als flachen Farbblock stehen zu lassen. */
.download-cta__inner::before {
  content: '';
  position: absolute;
  inset: -40% 20% auto;
  height: 120%;
  background: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.35), transparent 62%);
  pointer-events: none;
}

.download-cta__inner > * {
  position: relative;
}

.download-cta h2 {
  color: var(--c-text);
}

.download-cta p {
  margin-top: var(--s-3);
  color: rgba(255, 255, 255, 0.94);
  max-width: 42rem;
  margin-inline: auto;
}

.download-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* --- Kontakt-Teaser auf der Startseite ------------------------------------ */
.contact-intro {
  text-align: center;
}

.contact-intro p {
  max-width: var(--measure);
  margin: var(--s-4) auto var(--s-6);
}

/* ==================================================================
   20-testimonial.css
   ================================================================== */
/* ============================================================================
   NUTZERSTIMMEN

   Ersetzt den frueheren :root-Block auf Zeile 1270 des Alt-Stylesheets, der
   mitten in der Datei stand und als einziger Bereich ueberhaupt Variablen
   benutzte - mit einer komplett anderen, hellen Palette.
   ========================================================================= */

.testimonial-container {
  display: grid;
  gap: var(--s-5);
  max-width: var(--container);
  margin-inline: auto;
}

@media (min-width: 600px) {
  .testimonial-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.testimonial-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-8);
}

/* Grosses Anfuehrungszeichen als Schmuck, nicht als Text - deshalb
   aria-hidden ueber ::before und nicht im Markup. */
.testimonial-item::before {
  content: '\201C';
  position: absolute;
  top: var(--s-2);
  left: var(--s-5);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--c-accent);
  opacity: 0.35;
}

.testimonial-quote {
  font-size: var(--fs-600);
  line-height: 1.6;
  color: var(--c-text);
  flex-grow: 1;
}

.testimonial-author {
  color: var(--c-accent);
  font-size: var(--fs-300);
  font-weight: 600;
}

.testimonials-section {
  text-align: left;
}

/* ==================================================================
   22-rule-card.css
   ================================================================== */
/* ============================================================================
   REGEL- UND TRINKSPIELKARTEN (Spielregeln)

   Ersetzt die hartkodierten Inline-Farben im Markup ("border: 2px solid blue",
   "color: green"). Die Akzentfarbe kommt jetzt je Karte ueber --icon-c und
   folgt dem App-Muster der Regelkarten: farbige Icon-Flaeche mit 20 %
   Deckkraft, Titel in derselben Farbe (rules_screen.dart:137-155).
   ========================================================================= */

.rules-container {
  max-width: 56rem;
  margin-inline: auto;
}

.drinking-rules-card {
  --icon-c: var(--c-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  background: var(--g-card);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--icon-c);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
  padding: var(--s-5);
  margin-block: var(--s-4);
}

.drinking-rules-card h3,
.drinking-rules-card h4 {
  color: var(--icon-c);
  font-size: var(--fs-600);
}

.drinking-rules-card p {
  color: var(--c-text-muted);
  margin-top: var(--s-2);
}

.drinking-rules-card > div {
  flex: 1;
}

/* Farbvarianten, ueber eine Zusatzklasse steuerbar. */
.drinking-rules-card--gold   { --icon-c: var(--c-accent); }
.drinking-rules-card--green  { --icon-c: var(--c-success-text); }
.drinking-rules-card--red    { --icon-c: var(--c-danger-text); }
.drinking-rules-card--orange { --icon-c: var(--c-secondary); }

/* --- Punktezahl-Plakette -------------------------------------------------- */
/* Das App-Muster der Trinkregel-Karten: 60x60-Flaeche in der Akzentfarbe mit
   20 % Deckkraft (drinking_rules_screen.dart). */
.rule-badge {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--icon-c) 20%, transparent);
  border: 1px solid var(--icon-c);
  color: var(--icon-c);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .rule-badge {
    background: rgba(255, 215, 0, 0.20);
  }
}

/* --- Intensitaetsanzeige -------------------------------------------------- */
.intensity-meter {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--s-3);
  font-size: var(--fs-300);
  color: var(--c-text-faint);
}

.intensity-meter span {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--c-border-strong);
}

.intensity-meter span.active {
  background: var(--icon-c, var(--c-accent));
}

/* ==================================================================
   23-page.css
   ================================================================== */
/* ============================================================================
   SEITENSPEZIFISCHE BEREICHE

   Rechts- und Fliesstextseiten. Sie bekommen die Lesebreite aus --measure,
   damit lange Absaetze auf grossen Bildschirmen nicht ueber die volle
   Containerbreite laufen.
   ========================================================================= */

.impressum-page,
.datenschutz-page {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--section-y);
}

.impressum-page > * + *,
.datenschutz-page > * + * {
  margin-top: var(--s-4);
}

.impressum-page h2,
.datenschutz-page h2 {
  margin-top: var(--s-12);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
}

.impressum-page h3,
.datenschutz-page h3 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-1);
  color: var(--c-accent);
  font-size: var(--fs-600);
}

.impressum-page h2:first-child,
.datenschutz-page h2:first-child {
  margin-top: 0;
}

.impressum-page ul,
.datenschutz-page ul,
.rules-container ul,
.rules-container ol {
  padding-left: var(--s-5);
}

.impressum-page li,
.datenschutz-page li,
.rules-container li {
  position: relative;
  padding-left: var(--s-4);
  margin-top: var(--s-2);
}

.impressum-page ul > li::before,
.datenschutz-page ul > li::before,
.rules-container ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--c-accent);
}

/* --- Spielregeln ---------------------------------------------------------- */
.rules-container > * + * {
  margin-top: var(--s-4);
}

.rules-container h2 {
  margin-top: var(--s-12);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border);
}

.rules-container h3 {
  margin-top: var(--s-8);
  color: var(--c-accent);
  font-size: var(--fs-600);
}

.rules-container p,
.rules-container li {
  max-width: var(--measure);
}

/* --- FAQ ------------------------------------------------------------------ */
.faq-section {
  padding-block: var(--section-y);
}

/* .container kam im Alt-Stylesheet ueberhaupt nicht vor - der Wrapper in
   molotow-faq.html war wirkungslos. Jetzt greift die Layout-Regel. */

/* --- Kontakt -------------------------------------------------------------- */
.contact-section {
  text-align: left;
}

.contact-section .home-button {
  display: inline-flex;
}

/* ==================================================================
   91-motion.css
   ================================================================== */
/* ============================================================================
   BEWEGUNG

   Alles hier haengt an der Klasse .motion-on, die src/js/60-motion.js am
   <html> setzt. Ohne JavaScript - und bei "Bewegung reduzieren" - wird die
   Klasse nie gesetzt, und die Seite steht einfach still. Wichtig: ohne diese
   Absicherung waeren Abschnitte dauerhaft unsichtbar, falls das Skript nicht
   laedt.
   ========================================================================= */

.motion-on [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.motion-on [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Karten laufen leicht versetzt ein, statt alle gleichzeitig zu erscheinen.
   Das liest sich ruhiger und lenkt den Blick von links nach rechts. */
.motion-on .platform-card[data-reveal]:nth-child(2),
.motion-on .why-molotow-card[data-reveal]:nth-child(2),
.motion-on .testimonial-item[data-reveal]:nth-child(2) { transition-delay: 0.08s; }

.motion-on .why-molotow-card[data-reveal]:nth-child(3),
.motion-on .testimonial-item[data-reveal]:nth-child(3) { transition-delay: 0.16s; }

.motion-on .why-molotow-card[data-reveal]:nth-child(4),
.motion-on .testimonial-item[data-reveal]:nth-child(4) { transition-delay: 0.24s; }

.motion-on .why-molotow-card[data-reveal]:nth-child(5) { transition-delay: 0.32s; }
.motion-on .why-molotow-card[data-reveal]:nth-child(6) { transition-delay: 0.40s; }

/* Der Hero laeuft ohne Beobachter ein - er steht beim Laden schon im Bild. */
.motion-on .hero-text > *,
.motion-on .hero-device {
  animation: hero-auf 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.motion-on .hero-text > h1 { animation-delay: 0.05s; }
.motion-on .hero-text > p { animation-delay: 0.15s; }
.motion-on .hero-text > .hero-cta { animation-delay: 0.25s; }
.motion-on .hero-device { animation-delay: 0.1s; }

@keyframes hero-auf {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}

/* Schaltflaechen und Karten reagieren spuerbar, aber kurz. */
.btn,
.btn-primary,
.platform-btn,
.home-button {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .motion-on [data-reveal],
  .motion-on .hero-text > *,
  .motion-on .hero-device {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* ==================================================================
   99-print.css
   ================================================================== */
/* ============================================================================
   DRUCK

   Vor allem fuer Impressum, Datenschutz und die Spielregeln gedacht - Seiten,
   die tatsaechlich jemand ausdruckt. Dunkler Grund wuerde dabei nur Toner
   kosten.
   ========================================================================= */

@media print {
  :root {
    --c-bg: #fff;
    --c-surface: #fff;
    --c-surface-alt: #f2f2f2;
    --c-text: #000;
    --c-text-muted: #222;
    --c-border: #ccc;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .site-header,
  .site-footer,
  .download-cta,
  .skip-link,
  #cookie-consent-banner,
  .mobile-menu-toggle,
  .hero-cta,
  .screenshot-gallery,
  .contact-form,
  .home-button {
    display: none !important;
  }

  .hero-section::before {
    display: none;
  }

  .hero-section {
    padding-block: 0 1rem;
    text-align: left;
  }

  h1, h2, h3 {
    color: #000;
    page-break-after: avoid;
  }

  .card,
  .panel,
  .faq-item,
  .info-card,
  .drinking-rules-card {
    border: 1px solid #ccc;
    box-shadow: none;
    background: #fff;
    page-break-inside: avoid;
  }

  .faq-item[open] .faq-answer,
  .faq-answer {
    display: block;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Ziel externer Links mitdrucken - auf Papier ist ein Link sonst wertlos. */
  main a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
    word-break: break-all;
  }

  table {
    min-width: 0;
  }

  .table-wrap {
    overflow: visible;
    border: none;
    background: none;
  }
}