/* ==========================================================================
   FutKick – Stylesheet nach der Vorlage FutKick.html (Apple-Stil)
   Schrift Inter (selbst gehostet, assets/fonts), weiße Flächen, durchscheinende Top-Bar, Federbewegungen.
   Flächen (Karten, Antworten, Felder) sind eckig, Bedienelemente (Buttons, Segmente) rund.
   ========================================================================== */

:root {
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #737378;   /* 4,7:1 auf Weiß (vorher #86868b, 3,6:1) */
  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.16);
  --fill: #f5f5f7;
  --fill-2: #e8e8ed;
  --green: #1f7a35;
  --green-tint: #e7f6ec;
  --green-line: #34c759;
  --red: #c4001a;
  --red-tint: #fdeced;
  --red-line: #ff3b30;
  --gutter: 1.375rem;
  --nav-h: 4.5rem;   /* Top-Bar auf jeder Seite gleich hoch (Handy: 4 rem, siehe unten) */
  --spring: linear(0, 0.060, 0.186, 0.329, 0.466, 0.584, 0.682, 0.760, 0.821, 0.868, 0.903, 0.929, 0.949, 0.963, 0.973, 0.981, 0.986, 0.990, 0.993, 0.995, 0.997, 0.998, 1);
  --spring-dur: 550ms;
  --lift: var(--card-shadow);
  --lift-hover: var(--card-shadow-hover);
  --r-md: 0.875rem;
  --r-sm: 0.625rem;
  --r-card: 1.125rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --card-bg: linear-gradient(180deg, #ffffff 0%, #fafafc 100%);
  --card-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 #ffffff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 3px 8px rgba(0, 0, 0, 0.04), 0 14px 28px -10px rgba(0, 0, 0, 0.09);
  --card-shadow-hover: inset 0 0 0 1px var(--hairline), inset 0 1px 0 #ffffff, 0 2px 4px rgba(0, 0, 0, 0.05), 0 22px 40px -12px rgba(0, 0, 0, 0.18);
  --pitch-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ---------- Schrift: Inter, selbst gehostet (SIL Open Font License, assets/fonts/LICENSE.txt) ----------
   Variable Schrift mit Strichstärke und optischer Größe; Latin Extended (ğ, ć, š …) lädt nur bei Bedarf. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin.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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Grundlagen ---------- */
html { -webkit-text-size-adjust: 100%; background: #ffffff; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.ap {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  font-size: 1rem; line-height: 1.47; color: var(--ink); background: #ffffff;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
.ap *, .ap *::before, .ap *::after { box-sizing: border-box; }
.ap a, .ap button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* :where() hält die Spezifität bei 0, damit .btn-primary usw. Farbe und Schriftgröße setzen können */
:where(.ap) button { font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }
.ap :focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.ap-wrap { max-width: 70rem; margin: 0 auto; padding-inline: var(--gutter); }

/* Sprung-Link: unsichtbar, erscheint oben links nur beim Tab-Fokus */
.ap-skip {
  position: fixed; left: 0.75rem; top: 0.75rem; z-index: 200; padding: 0.625rem 1rem; border-radius: 999px;
  background: var(--ink); color: #ffffff; font-size: 0.9375rem; font-weight: 600;
  transform: translateY(-200%);
}
.ap-skip:focus { transform: none; }
main:focus { outline: none; }   /* Ziel des Sprung-Links: kein Rahmen um die ganze Seite */
.ap-nav-links { display: contents; }   /* <nav> nur für Screenreader, die Kopfzeile bleibt ein Raster */

/* ---------- Top-Bar: durchscheinendes Material, Logo + Name mittig ---------- */
.ap-nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding-inline: clamp(0.75rem, 1.5vw, 1.25rem);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.ap-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--hairline-strong); }
.ap-brand {
  grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.625rem; height: 3rem; padding: 0 0.5rem;
  font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em;
  transition: transform var(--spring-dur) var(--spring), opacity 200ms ease;
}
.ap-brand:active { transform: scale(0.97); opacity: 0.7; transition: transform 100ms ease-out, opacity 100ms ease-out; }
.ap-mark { display: block; width: 1.9375rem; height: 1.9375rem; flex: none; color: var(--ink); }
/* Logo mit Namen mittig, solange in der Mitte nichts anderes steht (Spiel-Leiste oder Spieltitel: Logo links) */
.ap-nav:not(.has-carousel):not(.has-title) .ap-brand { grid-column: 2; justify-self: center; }
/* Spieltitel in der Mitte der Kopfzeile (Quiz-Spielseiten) */
.nav-title { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }

/* ==========================================================================
   Startseite
   ========================================================================== */
/* Hero: schlichter weißer Hintergrund */
.ap:has(.ap-first) { background: #ffffff; }
.ap-first { padding-top: 4.5rem; }
.ap-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; margin-bottom: 2.25rem; }
.ap-display { margin: 0; font-size: clamp(2.75rem, 6.2vw, 4.75rem); line-height: 0.98; font-weight: 700; letter-spacing: -0.022em; text-wrap: balance; }

.ap-status {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; height: 2.25rem; padding: 0 1rem;
  border-radius: 999px; background: var(--fill);
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.005em; color: var(--ink-2);
}
.ap-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ap-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Schmale Handys: Serie und Countdown passen mit Inter nebeneinander */
@media (max-width: 400px) { .ap-status { padding: 0 0.875rem; font-size: 0.8125rem; } }
.ap-streak { gap: 0.375rem; }
.ap-streak.is-open { background: #fff1e0; color: #8a4b00; }
.ap-streak.is-open strong { color: #5c3200; }

/* Hover: Glut-Schein am Chip, 🔥 flackert */
.ap-streak { position: relative; transition: background-color 250ms ease, box-shadow 250ms ease; }
.ap-streak .fl-ico { display: inline-block; transform-origin: 50% 90%; }
@media (hover: hover) {
  .ap-streak:hover { background: #ffe9cf; box-shadow: 0 0 0 1px rgba(255, 140, 40, 0.4), 0 6px 18px -2px rgba(255, 110, 20, 0.45); }
  .ap-streak:hover .fl-ico { animation: fl-flicker 520ms ease-in-out infinite alternate; }
}
@keyframes fl-flicker {
  from { transform: scale(1) rotate(-3deg); filter: drop-shadow(0 0 0 rgba(255, 120, 0, 0)); }
  to   { transform: scale(1.22) rotate(4deg); filter: drop-shadow(0 0 5px rgba(255, 120, 0, 0.9)); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-streak:hover .fl-ico { animation: none !important; }
}
.ap-status strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.ap-section { margin-top: 5rem; }
.ap-section-title { display: flex; align-items: center; gap: 1.25rem; margin: 0 0 1.5rem; font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
.ap-section-title::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* Tägliche Spiele: jede Karte mit eigenem Spielfeld-Ausschnitt und Symbol */
.ap-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; padding-bottom: 0.5rem; }
.ap-game { display: block; border-radius: var(--r-card); }
.ap-pitch {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 320 / 208; background: #4f8f3a; border-radius: var(--r-card);
  box-shadow: var(--pitch-shadow);
  transition: transform var(--spring-dur) var(--spring), box-shadow var(--spring-dur) var(--spring);
  will-change: transform;
}
.ap-pitchsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ap-pitchlabel { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 0 1rem; text-align: center; }
.ap-gamename { margin: 0; color: #ffffff; font-size: 2rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 1px 2px rgba(6, 32, 12, 0.55), 0 0 16px rgba(6, 32, 12, 0.45); }
.ap-play {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 2.25rem; padding: 0 0.875rem 0 1.125rem; border-radius: 999px;
  background: rgba(8, 20, 8, 0.4);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #ffffff; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.005em;
  transition: background-color 200ms ease;
}
.ap-play svg { transition: transform var(--spring-dur) var(--spring); }
.ap-play.is-done { padding-left: 0.875rem; }   /* „✓ Gespielt“: gleiche Schaltfläche, nur mit Haken */
.ap-ln { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5px; stroke-linejoin: miter; }
.ap-ln, .ap-ln * { vector-effect: non-scaling-stroke; }
.ap-bar { stroke: #ffffff; stroke-width: 2.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ap-game:active .ap-pitch { transform: scale(0.97); transition: transform 100ms ease-out, box-shadow 100ms ease-out; }
@media (hover: hover) {
  .ap-game:hover .ap-pitch { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06), 0 20px 44px rgba(0, 0, 0, 0.18); }
  .ap-game:hover .ap-play { background: rgba(8, 20, 8, 0.55); }
  .ap-game:hover .ap-play svg { transform: translateX(3px); }
  .ap-game:active .ap-pitch { transform: scale(0.97); }
}

/* Allgemeine Quiz: Karten mit Material und Symbol-Kachel */
.ap-quizzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.ap-quiz {
  display: flex; align-items: center; gap: 1.25rem; min-height: 7.5rem; padding: 1.25rem 1.5rem 1.25rem 1.25rem;
  border-radius: var(--r-card); background: var(--card-bg); box-shadow: var(--card-shadow);
  transition: transform var(--spring-dur) var(--spring), box-shadow var(--spring-dur) var(--spring);
}
.ap-quiz-icon {
  display: flex; align-items: center; justify-content: center; width: 4.75rem; height: 4.75rem; flex: none; border-radius: 1.125rem; color: var(--ink);
  background: linear-gradient(160deg, #fcfcfd 0%, #eceef2 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 0 #ffffff, 0 2px 6px rgba(0, 0, 0, 0.07);
  transition: transform var(--spring-dur) var(--spring);
}
.ap-quiz-icon img { display: block; width: 62%; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12)); }
.ap-quiz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.ap-quiz-title { margin: 0; font-size: 1.375rem; line-height: 1.18; font-weight: 650; letter-spacing: -0.018em; }
.ap-quiz-cta { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.9375rem; font-weight: 600; color: var(--green); }
.ap-quiz-cta svg { transition: transform var(--spring-dur) var(--spring); }

/* Meister-Quiz: kompakte Zeilen, gleiche Kartensprache */
.ap-masters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ap-row {
  display: flex; align-items: center; gap: 0.875rem; min-height: 4.75rem; padding: 0.875rem 0.875rem 0.875rem 1.125rem;
  border-radius: var(--r-card); background: var(--card-bg); box-shadow: var(--card-shadow);
  transition: transform var(--spring-dur) var(--spring), box-shadow var(--spring-dur) var(--spring);
}
.ap-row-name { margin: 0; flex: 1; min-width: 0; font-size: 1.0625rem; line-height: 1.24; font-weight: 600; letter-spacing: -0.012em; }
.ap-flag { position: relative; display: flex; width: 2.75rem; height: 1.875rem; flex: none; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.1); }
.ap-badge { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 1.875rem; flex: none; color: var(--ink); }
.ap-badge svg { display: block; width: 2.25rem; height: 2.25rem; flex: none; }
.ap-globe { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 1.875rem; flex: none; }
.ap-globe img { display: block; height: 2.125rem; width: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14)); }
.ap-chev { flex: none; box-sizing: border-box; width: 1.75rem; height: 1.75rem; padding: 0.4375rem; color: var(--ink-2); transition: transform var(--spring-dur) var(--spring); }

.ap-quiz:active, .ap-row:active { transform: scale(0.97); transition: transform 100ms ease-out; }
@media (hover: hover) {
  .ap-quiz:hover, .ap-row:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
  .ap-quiz:hover .ap-quiz-icon { transform: scale(1.06); }
  .ap-quiz:hover .ap-quiz-cta svg { transform: translateX(3px); }
  .ap-row:hover .ap-chev { transform: translateX(3px); }
  .ap-quiz:active, .ap-row:active { transform: scale(0.97); }
}

/* Text für Suchmaschinen unter den Spielen: leise, kein Kasten */
.ap-about { max-width: 44rem; margin: 8rem auto 0; text-align: center; }
.ap-about-title { margin: 0 0 0.375rem; font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.ap-about-sub { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.4; color: var(--ink-2); }
.ap-about p:not(.ap-about-sub) { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-3); }

/* Einblenden beim Laden: gestaffelt, nur transform + opacity */
@keyframes ap-rise { from { opacity: 0; transform: translateY(14px); } }
.ap-display, .ap-status, .ap-game, .ap-section-title, .ap-quiz, .ap-row {
  animation: ap-rise 700ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
.ap-status { --i: 1; }
.ap-games > :nth-child(1) { --i: 2; } .ap-games > :nth-child(2) { --i: 3; } .ap-games > :nth-child(3) { --i: 4; } .ap-games > :nth-child(4) { --i: 5; }
.ap-section:nth-of-type(2) .ap-section-title { --i: 6; }
.ap-quizzes > :nth-child(1) { --i: 7; } .ap-quizzes > :nth-child(2) { --i: 8; } .ap-quizzes > :nth-child(3) { --i: 9; } .ap-quizzes > :nth-child(4) { --i: 10; }
.ap-section:nth-of-type(3) .ap-section-title { --i: 8; }
.ap-masters > :nth-child(-n+4) { --i: 9; } .ap-masters > :nth-child(n+5) { --i: 10; }

/* Flaggen (Startseite + Liga-Startseiten) */
.flag-row { flex-direction: row; }
.flag-col { flex-direction: column; }
.flag-row > span, .flag-col > span { flex: 1; }
.flag-en svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   Unterseiten
   ========================================================================== */

/* Kopfzeile: Zurück · Titel · Status */
/* Kopfzeile (Spieltitel): nur noch der Titel in der Mitte; Zurück und Serie sitzen in der oberen Leiste */
.sub-head { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; }
.nav-left { grid-column: 1; justify-self: start; }
.nav-right { grid-column: 3; justify-self: end; }
/* Info-Knopf rechts in der Kopfzeile mit kleinem Menü (Serie, Nächster Anstoß, Spieltag, heutige Spiele, Spielregeln) */
.nav-info { position: relative; }
/* Spiel-Leiste (3D-Karussell) in der Kopfzeile der Tagesspiele */
.nav-carousel {
  grid-column: 2; position: relative; width: min(28rem, calc(100vw - 11rem)); height: 3.25rem; perspective: 600px; touch-action: pan-y; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  user-select: none; -webkit-user-select: none;
}
.nav-carousel.is-dragging { cursor: grabbing; }
.cr-item {
  --c: #d6d0c9; --cl: #b4aea6; --ci: var(--ink);
  position: absolute; left: 50%; top: 50%; white-space: nowrap; padding: 0.5rem 1.25rem; border-radius: 1.125rem;
  font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-2);
  transition: transform 280ms var(--ease-out), opacity 280ms var(--ease-out), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.nav-carousel.is-dragging .cr-item { transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.cr-item[data-game="futguess"] { --c: #f8cd55; --cl: #d39a00; --ci: #2b2100; }
.cr-item[data-game="hattrick"] { --c: #ee8a7a; --cl: #c85f4e; --ci: #3a0f08; }
.cr-item[data-game="futconnect"] { --c: #f4a9c4; --cl: #d77a9f; --ci: #4a1230; }
.cr-item[data-game="futelf"] { --c: #8fd47a; --cl: #56a444; --ci: #0f2b0a; }
.cr-item.is-center { background: var(--c); color: var(--ci); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.14); cursor: default; }   /* Auswahl: flach, wirkt eingedrückt, kein Knopf (die Seite öffnet sich beim Drehen sofort) */
.cr-item:focus-visible { outline: 2px solid var(--cl); outline-offset: 3px; }
@media (max-width: 559px) {
  :root { --nav-h: 4rem; }
  .ap-brand span, .nav-info-btn span { display: none; }
  .ap-nav:not(.has-carousel):not(.has-title) .ap-brand span { display: inline; }   /* nichts in der Mitte: der Name bleibt auch am Handy */
  .nav-title { font-size: 1.0625rem; }
  .nav-info-btn { padding: 0 0.75rem; }
  .nav-carousel { width: calc(100vw - 7.75rem); height: 3rem; }
  .nav-carousel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }   /* Handy: Nachbarn weniger ausgeblendet */
  .cr-item { display: inline-flex; align-items: center; min-height: 2.125rem; font-size: 0.9375rem; padding: 0 0.75rem; }   /* Tippfläche ca. 34 px */
  .cr-item::before { content: ""; position: absolute; inset: -0.75rem -0.25rem; }   /* die verkleinerten Nachbarn bekommen eine größere, unsichtbare Tippfläche */
}
/* Info-Knopf: auf allen Seiten gleich blau mit Kante, drückt sich ein, unabhängig von der Spielfarbe */
.nav-info-btn {
  --lip: 4px; border: 0;   /* Standard-Rahmen des Browsers (schwarz) entfernen */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.5rem; padding: 0 1.125rem; margin-bottom: var(--lip);
  border-radius: 1.125rem; background: #7db6f2; color: #0c2a4d;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.005em;
  box-shadow: inset 0 0 0 1px transparent, 0 var(--lip) 0 #4f88c8;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease;
}
.nav-info-btn:focus { outline: none; }
.nav-info-btn:focus-visible { outline: 2px solid #4f88c8; outline-offset: 3px; }   /* nur für die Tastatur */
.nav-info-btn:active, .nav-info-btn[aria-expanded="true"] { transform: translateY(var(--lip)); box-shadow: inset 0 0 0 1px transparent, 0 0 0 #4f88c8; }
@media (hover: hover) { .nav-info-btn:hover { background: #62a3ec; } }
.nav-info-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 200; width: min(19.5rem, calc(100vw - 2rem)); padding: 0.5rem; border-radius: 1rem; background: #ffffff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 14px 36px -10px rgba(0, 0, 0, 0.22); text-align: left; animation: ni-in 160ms var(--ease-out); }
.nav-info-panel[hidden] { display: none; }
@keyframes ni-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.ni-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.625rem; font-size: 0.9375rem; color: var(--ink-2); }
.ni-row strong { font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ni-row small { font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); }
.ni-sep { height: 1px; margin: 0.375rem 0.625rem; background: var(--hairline); }
.ni-h { margin: 0.25rem 0.625rem 0.125rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.ni-game { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.625rem; border-radius: 0.625rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink); }
@media (hover: hover) { .ni-game:hover { background: var(--fill); } }
.ni-state { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.ni-state.is-done { color: var(--ink-2); }
.ni-rules { margin: 0.25rem 0.625rem 0.5rem; font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 479px) { .back span { font-size: 1rem; } }
.back {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.375rem;
  height: 2.75rem; padding: 0 0.75rem 0 0.375rem; margin-left: -0.375rem; border-radius: 999px;
  font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ink);
  transition: transform var(--spring-dur) var(--spring), background-color 200ms ease;
}
.back svg { color: var(--ink-2); transition: transform var(--spring-dur) var(--spring); }
.back:active { transform: scale(0.97); background: var(--fill); transition: transform 100ms ease-out; }
@media (hover: hover) { .back:hover svg { transform: translateX(-2px); } }
.sub-title { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; }
.sub-title img { display: block; height: 2.5rem; width: auto; }
/* Spielseiten: Spielname mit Icon sitzt etwas tiefer unter der Kopfzeile */
.sub-head:has(.sub-title img) { margin-top: 3.5rem; }
.sub-end { justify-self: end; display: flex; align-items: center; gap: 0.5rem; }

/* Buttons (rund) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1.375rem; border: 0; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; text-align: center; cursor: pointer;
  transition: transform var(--spring-dur) var(--spring), background-color 200ms ease, opacity 200ms ease;
}
.btn:active { transform: scale(0.97); transition: transform 100ms ease-out, background-color 100ms ease-out; }
.btn-primary { background: var(--ink); color: #ffffff; }
.btn-secondary { background: var(--fill); color: var(--ink); }
.btn-plain { background: transparent; color: var(--ink-2); font-weight: 500; }
@media (hover: hover) {
  .btn-primary:not([disabled]):hover { background: #000000; color: #ffffff; }
  .btn-secondary:not([disabled]):hover { background: var(--fill-2); color: var(--ink); }
  .btn-plain:hover { color: var(--ink); }
}
.btn-lg { min-height: 3.25rem; padding: 0 2rem; font-size: 1.125rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: 0.32; cursor: default; transform: none; }
.btn svg { flex: none; }

/* ---------- Start-Seite eines Spiels ---------- */
/* Alles mittig, auch senkrecht im sichtbaren Bereich unter der Top-Bar */
.st {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: calc(100svh - var(--nav-h)); padding: 1.5rem 0;
}
.st-art { display: block; width: 10rem; height: auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1)); }
.st-flag { position: relative; display: flex; width: 11rem; aspect-ratio: 5 / 3; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.1); }
.st-badge { display: flex; align-items: center; justify-content: center; color: var(--ink); }   /* Pokal ohne Kasten */
.st-badge svg { width: 7rem; height: 7rem; }
.st-art.st-globe { width: 8rem; }
.st-eyebrow { margin: 2rem 0 0; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.005em; color: var(--ink-2); }
.st-title { margin: 2rem 0 0; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.07; font-weight: 700; letter-spacing: -0.02em; }
.st-eyebrow + .st-title { margin-top: 0.375rem; }
.st-sub { margin: 0.875rem auto 0; max-width: 31rem; font-size: 1.1875rem; line-height: 1.42; color: var(--ink-2); text-wrap: pretty; }
.st-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.875rem; border-radius: 999px;
  background: var(--fill); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.005em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
a.chip { transition: transform var(--spring-dur) var(--spring), background-color 200ms ease; }
a.chip:active { transform: scale(0.96); transition: transform 100ms ease-out; }
@media (hover: hover) { a.chip:hover { background: var(--fill-2); } }
.st-cta { margin-top: 2rem; min-width: 12rem; }
.st-date { margin: 1rem 0 0; font-size: 0.875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Einstellungen (Segmente, FK.initSegments) */
.st-fields { display: grid; gap: 1.25rem; width: 100%; max-width: 24rem; margin-top: 2rem; text-align: center; }
.field-label { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0.005em; text-align: center; }
.seg { --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding: 0.25rem; border-radius: 999px; background: var(--fill-2); }
.seg-thumb {
  position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0.25rem; width: calc((100% - 0.5rem) / var(--n));
  border-radius: 999px; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.1);
  transition: transform var(--spring-dur) var(--spring);
}
.seg-item {
  position: relative; z-index: 1; height: 2.5rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); transition: color 200ms ease;
}
.seg-item[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.seg-item:active { opacity: 0.6; }

/* ---------- Spiel-Spalte ---------- */
.g { max-width: 35rem; margin: 0 auto; padding-bottom: 4rem; }
.g.is-wide { max-width: 62rem; }
.g-prompt { margin: 0.75rem 0 0; font-size: 1.75rem; line-height: 1.14; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.g-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; min-height: 2.75rem; font-size: 0.9375rem; color: var(--ink-2); }
.g-meta strong { color: var(--ink); font-weight: 600; }
.g-section { margin: 2.5rem 0 1rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.g-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin-top: 1.25rem; }
.tnum { font-variant-numeric: tabular-nums; }

/* Leben / Versuche */
.lives { display: inline-flex; align-items: center; gap: 0.375rem; font-variant-numeric: tabular-nums; }
.lives-label { margin-right: 0.25rem; white-space: nowrap; }
.life { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ink); transition: background-color 200ms ease, box-shadow 200ms ease; }
.life.is-lost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hairline-strong); }

/* Fortschritt */
.progress { height: 0.25rem; border-radius: 999px; background: var(--fill-2); overflow: hidden; }
.progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink); transition: width var(--spring-dur) var(--spring); }
.steps { display: flex; gap: 0.375rem; }
.step { flex: 1; height: 0.25rem; border-radius: 999px; background: var(--fill-2); transition: background-color 200ms ease; }
.step.is-done { background: var(--ink); }
.step.is-current { background: var(--ink-3); }

/* ---------- Antworten (eckige Flächen) ---------- */
.answers { display: grid; gap: 0.625rem; }
.answer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; min-height: 3.5rem; padding: 0.875rem 1.125rem; border: 0; background: #ffffff; box-shadow: var(--lift);
  text-align: left; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: transform var(--spring-dur) var(--spring), box-shadow var(--spring-dur) var(--spring), background-color 200ms ease, opacity 200ms ease;
}
.answer:disabled { cursor: default; }
.answer:active:not(:disabled) { transform: scale(0.98); transition: transform 100ms ease-out; }
@media (hover: hover) { .answer:not(:disabled):hover { box-shadow: var(--lift-hover); } }
.answer.is-correct { background: var(--green-tint); box-shadow: inset 0 0 0 2px var(--green-line); }
.answer.is-wrong { opacity: 0.45; animation: shake 400ms ease; }
.answer.is-muted { opacity: 0.45; }
.answer-icon { flex: none; }
.answer.is-correct .answer-icon { color: var(--green); }
.answer.is-wrong .answer-icon { color: var(--ink-3); }

/* ---------- Eingabe ---------- */
.guess { display: flex; gap: 0.625rem; }
.input {
  flex: 1; min-width: 0; height: 3.25rem; padding: 0 1rem; border: 0; border-radius: 0; background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  transition: box-shadow 150ms ease;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.input.is-error { box-shadow: inset 0 0 0 2px var(--red-line); }
/* FutElf: „Raten“ und „Weiter“ sind derselbe Knopf, gleiche Größe */
.game-fe #guessBtn, .fg #guessBtn { flex: none; width: 7.25rem; padding-inline: 0.5rem; }
/* FutGuess: Namensvorschläge unter dem Feld, bei zu wenig Platz (Handy-Tastatur) darüber; weiße erhöhte Karte, keine Farbe */
.fg .guess { position: relative; }
.fg-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 20; margin: 0; padding: 0.25rem 0; list-style: none; border-radius: var(--r-md); background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--hairline), 0 2px 8px rgba(0, 0, 0, 0.08), 0 14px 36px -10px rgba(0, 0, 0, 0.22); animation: fgs-in 120ms var(--ease-out); }
.fg-suggest.is-up { top: auto; bottom: calc(100% + 0.5rem); }
.fg-suggest[hidden] { display: none; }
.fg-suggest li { display: flex; align-items: baseline; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem; font-size: 1.0625rem; line-height: 1.3; color: var(--ink); cursor: pointer; align-items: center; }
.fg-suggest li + li { box-shadow: inset 0 1px 0 var(--hairline); }
.fg-suggest li span { font-size: 0.9375rem; color: var(--ink-3); }
.fg-suggest li.is-active { background: var(--fill); }
@media (hover: hover) { .fg-suggest li:hover { background: var(--fill); } }
.fg-suggest li:active { background: var(--fill-2); }
@keyframes fgs-in { from { opacity: 0; transform: translateY(-4px); } }
.fg-suggest.is-up { animation-name: fgs-in-up; }
@keyframes fgs-in-up { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .fg-suggest { animation: none; } }
.fg .input.is-error, .game-fe .input.is-error { box-shadow: inset 0 0 0 1px var(--hairline-strong); }   /* FutGuess und FutElf: nur wackeln, nicht rot */
.input.is-shake { animation: shake 400ms ease; }
.input.is-hit { animation: hit-pop 520ms var(--spring); }
@keyframes hit-pop {
  0% { transform: scale(1); box-shadow: inset 0 0 0 2px var(--g-accent, #8fd47a); }
  35% { transform: scale(1.04); box-shadow: inset 0 0 0 3px var(--g-accent, #8fd47a), 0 0 0 6px color-mix(in srgb, var(--g-accent, #8fd47a) 35%, transparent); }
  100% { transform: scale(1); box-shadow: inset 0 0 0 2px transparent, 0 0 0 0 transparent; }
}
.input:disabled { background: var(--fill); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.msg { min-height: 1.5rem; margin: 0.625rem 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.msg.is-error { color: var(--red); }
.msg.is-ok { color: var(--green); font-weight: 500; }
.msg.is-center { text-align: center; }

/* Schwebender Hinweis (HUD) */
.hud {
  display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 1rem; border-radius: 999px;
  background: rgba(29, 29, 31, 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #ffffff; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.005em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: opacity 200ms ease, transform var(--spring-dur) var(--spring);
}
.hud.is-hidden { opacity: 0; transform: translateY(-0.375rem) scale(0.96); pointer-events: none; }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.375rem;
  border-radius: 0.375rem; background: var(--fill); box-shadow: inset 0 -1px 0 var(--hairline-strong);
  font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--ink);
}

/* ---------- FutGuess: Karrierestationen ---------- */
.stations { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; }
.station {
  display: grid; grid-template-columns: 6.75rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  min-height: 4rem; padding: 0.75rem 1.125rem; background: #ffffff; box-shadow: var(--lift);
}
.station.is-open { animation: pop-in 300ms var(--spring); }
.station.is-flip { animation: st-flip 260ms var(--ease-out); }
@keyframes st-flip { from { transform: perspective(500px) rotateX(-80deg); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(0.97); opacity: 0.4; } to { transform: none; opacity: 1; } }
.station-years { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.station-club { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.station-stats { display: flex; gap: 1rem; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.station-stats b { color: var(--ink); font-weight: 600; }
.station.is-covered { background: var(--fill); box-shadow: inset 0 0 0 1px var(--hairline); cursor: pointer; }
.station.is-covered.is-locked { cursor: not-allowed; opacity: 0.6; }
@media (hover: hover) { .station.is-covered:not(.is-locked):hover { background: var(--fill-2); } }
.station.is-covered:active:not(.is-locked) { transform: scale(0.99); transition: transform 100ms ease-out; }
.redact { display: block; height: 0.75rem; border-radius: 999px; background: var(--fill-2); }
.station-q { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 1px var(--hairline); font-size: 0.875rem; font-weight: 600; color: var(--ink-3); }

/* FutGuess-Spielspalte: breiter, Verein mittig, Inhalt etwas tiefer (eine Spalte bleibt, daneben/darunter ist Platz für Werbung) */
.game .g { max-width: 41rem; padding-top: clamp(1rem, 7vh, 5rem); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fg .g-prompt { font-size: clamp(1.75rem, 3vw, 2.125rem); }
.fg .stations { gap: 0.625rem; margin: 1.75rem 0 2rem; }
.fg .station {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem;
  min-height: 4.75rem; padding: 0.875rem 1.5rem;
}
.fg .station-club { font-size: 1.25rem; text-align: center; }
.fg .station-club { display: flex; align-items: center; justify-content: center; gap: 0.625rem; }
.kit { flex: none; width: 1.75rem; height: 1.75rem; }
.fg .station-stats { justify-self: end; }
/* Eine Zeile (Jahre | Verein | Spiele/Tore), solange die Karte breit genug ist. Wird sie schmal (Handy, schmales Fenster),
   steht oben links das Jahr und rechts die Zahlen, der Verein mittig darunter. Entscheidend ist die Breite der Karte, nicht die des Fensters. */
.fg .stations { container-type: inline-size; }
.fg .station-years { grid-column: auto; }   /* die allgemeine Schmal-Regel (Jahr über die ganze Breite) gilt hier nicht */
@container (max-width: 38rem) {
  .fg .station { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; min-height: 4.25rem; padding: 0.75rem 1rem; }
  .fg .station-years { grid-area: 1 / 1; }
  .fg .station-stats, .fg .station .station-q { grid-area: 1 / 2; }
  .fg .station-club, .fg .station .redact { grid-area: 2 / 1 / 3 / -1; }
  .fg .station-club { font-size: 1.1875rem; }
}
.fg .station .redact { justify-self: center; }
.fg .station .station-q { justify-self: end; }
.game .guess .input { min-height: 3.5rem; }
/* Spielfarben: jedes Spiel setzt nur diese Variablen, die Knopf-Regeln darunter gelten für alle (Klasse .game).
   FutGuess = Trikot-Gelb aus dem Spiel-Symbol, HatTrick = Koralle. Farbe nur an Knöpfen und Punkten, Karten bleiben weiß. */
.fg, body:has(.fg) .ap-nav {
  --g-accent: #f8cd55; --g-accent-hover: #f1bf33; --g-tint: #fff6dc; --g-line: rgba(176, 130, 0, 0.3);
  --g-text: #6b4f00; --g-ink: #2b2100; --g-lip-color: #d39a00; --g-tint-lip: #e3c777; --g-tint-hover: #ffedb8; --g-focus: #d9a400;
}
.game-fc, body:has(.game-fc) .ap-nav {
  --g-accent: #f4a9c4; --g-accent-hover: #ee94b5; --g-tint: #fdeef4; --g-line: rgba(200, 100, 140, 0.3);
  --g-text: #8a2f55; --g-ink: #4a1230; --g-lip-color: #d77a9f; --g-tint-lip: #f2c9da; --g-tint-hover: #fadbe7; --g-focus: #d77a9f;
}
/* Allgemeine Quiz und Meister-Quiz: gemeinsame Spielfarbe Blau (nur Farbwerte, z. B. für den Info-Knopf) */
.game-quiz, body:has(.game-quiz) .ap-nav {
  --g-accent: #7db6f2; --g-accent-hover: #62a3ec; --g-tint: #e8f2fd; --g-line: rgba(60, 120, 190, 0.3);
  --g-text: #1d4b82; --g-ink: #0c2a4d; --g-lip-color: #4f88c8; --g-tint-lip: #b7d3f2; --g-tint-hover: #d6e8fb; --g-focus: #4f88c8;
}
.game-fe, body:has(.game-fe) .ap-nav {
  --g-accent: #8fd47a; --g-accent-hover: #79c862; --g-tint: #eaf7e5; --g-line: rgba(60, 140, 50, 0.3);
  --g-text: #1f5a17; --g-ink: #0f2b0a; --g-lip-color: #56a444; --g-tint-lip: #bfe3b4; --g-tint-hover: #d9f0d1; --g-focus: #56a444; --g-bar: #6cbb59;
}
.game-ht, body:has(.game-ht) .ap-nav {
  --g-accent: #ee8a7a; --g-accent-hover: #e4705e; --g-tint: #fdeeea; --g-line: rgba(200, 95, 78, 0.3);
  --g-text: #7a2e22; --g-ink: #3a0f08; --g-lip-color: #c85f4e; --g-tint-lip: #efb9ae; --g-tint-hover: #fbdcd5; --g-focus: #c85f4e;
}
/* Versuchs-/Fehlerpunkte in allen Tagesspielen: leere schwarze Kreise, verbraucht = gelb gefüllt,
   der letzte Punkt eines verlorenen Spiels/Spielers rotrot (wie im Teilen-Text 🟨…🟥) */
.game .life { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.game .life.is-used { background: #f8cd55; box-shadow: inset 0 0 0 1.5px #d39a00; }
.game .life.is-fail { background: #e5533d; box-shadow: inset 0 0 0 1.5px #b93a27; }
/* FutGuess: bis zu 30 Punkte, am Handy umbrechen statt überstehen */
.fg .lives, .game-fe .lives { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.375rem; }
/* FutGuess: je verbrauchtem Versuch ein Punkt (erst ab dem ersten sichtbar); verbraucht = gelb gefüllt, der letzte Versuch eines nicht erratenen Spielers rotrot (wie im Teilen-Text 🟨…🟥) */
.game .input:focus { box-shadow: inset 0 0 0 2px var(--g-focus); }
.fg .input:focus, .game-fe .input:focus { box-shadow: inset 0 0 0 2px var(--ink); }   /* FutGuess und FutElf: Eingabefeld neutral (schwarz), nicht in Spielfarbe */

/* Knöpfe mit „Kante“ (Vorlage: Aufnahme eines Knopfes mit dicker Unterkante): Hauptknopf, hellerer Zweitknopf (#revealBtn), Teilen.
   Stehen leicht erhöht, drücken sich beim Antippen ein; gesperrt = flach und blass. */
.game .btn-primary, .game #revealBtn, .game #deselectBtn {
  --lip: 5px;
  border-radius: 1.125rem; font-weight: 700; letter-spacing: -0.005em;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease, color 150ms ease;
}
.game .btn-primary { background: var(--g-accent); color: var(--g-ink); box-shadow: 0 var(--lip) 0 var(--g-lip-color); }
.game #revealBtn, .game #deselectBtn { background: var(--g-tint); color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-line), 0 var(--lip) 0 var(--g-tint-lip); }
.game .btn-primary:not([disabled]):active { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--g-lip-color); }
.game #revealBtn:not([disabled]):active, .game #deselectBtn:not([disabled]):active { transform: translateY(var(--lip)); box-shadow: inset 0 0 0 1px var(--g-line), 0 0 0 var(--g-tint-lip); }
/* Abwählen (FutConnect): immer da, weiß/farblos mit grauer Kante, unabhängig von der Spielfarbe */
.game #deselectBtn { background: #ffffff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 var(--lip) 0 #d6d0c9; }
.game #deselectBtn:not([disabled]):active { box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 0 0 #d6d0c9; }
@media (hover: hover) { .game #deselectBtn:not([disabled]):hover { background: #f7f5f2; color: var(--ink); } }
.game .btn-primary[disabled], .game #revealBtn[disabled], .game #deselectBtn[disabled] { background: #eeeeef; color: #b3b3b8; opacity: 1; box-shadow: none; }
.game #deselectBtn[disabled] { background: #ffffff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 var(--lip) 0 #d6d0c9; }   /* sieht immer gleich aus, auch wenn nichts gewählt ist */
/* FutConnect: „Abschicken“ ist hellrosa, solange keine vier Karten gewählt sind, danach kräftig rosa */
.game-fc #playActions .btn { flex: 1 1 0; }
.game-fc #submit-btn[disabled] { background: var(--g-tint); color: var(--g-text); box-shadow: 0 var(--lip) 0 var(--g-tint-lip); }
@media (hover: hover) {
  .game .btn-primary:not([disabled]):hover { background: var(--g-accent-hover); color: var(--g-ink); }
  .game #revealBtn:not([disabled]):hover { background: var(--g-tint-hover); color: var(--g-ink); }
}
.game .guess { align-items: flex-start; }
.game .guess .btn-lg { min-height: 3.5rem; }

/* Ergebnisseite: Teilen als volle Pille mit Symbol links, darunter nur Text ohne Kasten (Vorlage: Knopf mit Kante + „Tippen zum Fortfahren“) */
.game .share-btn { border-radius: 999px; --g-share-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4M8 8l4-4 4 4M5 12v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3C/svg%3E"); }
.game .share-btn::before {
  content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-right: 0.625rem; background: currentColor;
  -webkit-mask: var(--g-share-icon) center / contain no-repeat; mask: var(--g-share-icon) center / contain no-repeat;
}
.game .game-continue { margin-top: 2.25rem; padding: 0.75rem 1.25rem; border-radius: 0.5rem; color: var(--ink); font-size: 1.0625rem; font-weight: 500; text-align: center; }
@media (hover: hover) { .game .game-continue:hover { text-decoration: underline; text-underline-offset: 0.25em; } }

@media (max-width: 767px) {
  .game .g { padding-top: 0; }
  /* Handy: weniger Leerraum zwischen Kopfzeile und Spiel, die Eingabe rutscht höher */
  .game .g-meta { min-height: 2.5rem; }
  .game .stations, .game .fg .stations { margin-top: 0; margin-bottom: 1.25rem; }
  .game .fe-pitch { margin-top: 0; }
  .ap-brand { font-size: 1.125rem; }
  .ap-mark { width: 1.75rem; height: 1.75rem; }
}
@media (max-width: 479px) {
  .game .btn-block { font-size: 1rem; padding-inline: 1rem; }
  .fg #guessBtn { padding-inline: 0.875rem; }
}

/* ---------- HatTrick ---------- */
/* HatTrick-Spielseite: Frage groß und ohne Kasten, Uhr kleiner und grau, alles mittig (Hierarchie: erst lesen, dann antippen) */
.game-ht .ht-timer:not(.is-penalty) { color: var(--ink); }
.game-ht .ht-timer { font-size: clamp(2.5rem, 6vw, 3rem); }
.game-ht .qbox:not(.is-covered) { background: none; box-shadow: none; padding-inline: 0; font-size: clamp(1.625rem, 3.4vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.game-ht .answer { position: relative; justify-content: center; text-align: center; }
.game-ht .answer .answer-icon { position: absolute; right: 1.125rem; }
/* HatTrick: abgedeckte Frage als Einladung in hellem Korallenton, Antworten davor normal lesbar (nur noch gesperrt) */
.game-ht .qbox.is-covered { background: var(--g-tint); box-shadow: inset 0 0 0 1px var(--g-line); color: var(--g-text); }
@media (hover: hover) { .game-ht .qbox.is-covered:hover { background: var(--g-tint-hover); } }
.answer:disabled:not(.is-muted):not(.is-correct):not(.is-wrong) { color: var(--ink); }
/* HatTrick: Aufdecken/Weiter in der Spielfarbe mit Kante; vor der Antwort gesperrt = helles Koralle, nicht grau */
.game-ht #nextBtn[disabled] { background: var(--g-tint); color: var(--g-text); box-shadow: 0 var(--lip) 0 var(--g-tint-lip); }
/* abgedeckte Frage: nur ein Fragezeichen, kein Hinweistext */
.game-ht .qbox.is-covered .station-q { width: 3.25rem; height: 3.25rem; font-size: 1.5rem; color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-line); }
/* Fortschrittsleiste (Schritte und Balken) in der Spielfarbe; --g-bar = etwas kräftiger, wo die Hauptfarbe auf Weiß zu blass ist */
.game .step.is-done { background: var(--g-bar, var(--g-accent)); }
.game .step.is-current { background: var(--g-tint-lip); }
.game .progress > span { background: var(--g-bar, var(--g-accent)); }
.ht-clock { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; margin: 1.25rem 0 1.5rem; }
.ht-timer { font-size: clamp(3.25rem, 8vw, 4.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; transition: color 200ms ease; }
.ht-timer.is-penalty { color: var(--red); }
.qbox {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 9rem; padding: 1.5rem 1.75rem; margin-bottom: 1rem;
  border: 0; background: #ffffff; box-shadow: var(--lift); text-align: center; cursor: default;
  font-size: 1.375rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance;
}
.qbox.is-covered {
  flex-direction: column; gap: 0.5rem; background: var(--fill); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--ink-2);
  font-size: 1rem; font-weight: 500; cursor: pointer;
  transition: transform var(--spring-dur) var(--spring), background-color 200ms ease;
}
.qbox.is-covered:active { transform: scale(0.98); transition: transform 100ms ease-out; }
@media (hover: hover) { .qbox.is-covered:hover { background: var(--fill-2); } }
.action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-top: 1.25rem; }

/* ---------- FutConnect ---------- */
.fc-board { container-type: inline-size; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
/* gefundene Gruppe im Spielfeld: genau so hoch wie ein quadratisches Kästchen (eine Spaltenbreite) */
.fc-board .fc-group { min-height: calc((100cqw - 1.5rem) / 4); }
.fc-card {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 0; padding: 0.625rem; border: 0; border-radius: 0;
  background: var(--fill); text-align: center; cursor: pointer;
  font-size: 0.9375rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; overflow-wrap: anywhere; hyphens: auto;
  user-select: none;
  transition: transform var(--spring-dur) var(--spring), background-color 150ms ease, color 150ms ease;
}
.fc-card:active { transform: scale(0.95); transition: transform 100ms ease-out; }
@media (hover: hover) { .fc-card:hover { background: var(--fill-2); } }
.fc-card.sel-1 { --sel: #f6dd74; } .fc-card.sel-2 { --sel: #a9d9a2; } .fc-card.sel-3 { --sel: #aac7f2; } .fc-card.sel-4 { --sel: #cfb6ef; }
.fc-card.is-selected, .fc-card.is-selected:hover, .fc-card.is-correct, .fc-card.is-correct:hover { background: var(--sel, var(--ink)); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(29, 29, 31, 0.55); }
.fc-card.is-wrong, .fc-card.is-wrong:hover { animation: shake 400ms ease; }
.fc-group { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 5.25rem; padding: 0.75rem 1rem; text-align: center; }
.fc-board .fc-group { animation: pop-in 350ms var(--spring); }
.fc-group strong { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.fc-group span { font-size: 0.875rem; color: rgba(29, 29, 31, 0.78); }
.grp-1 { background: #f6dd74; }
.grp-2 { background: #a9d9a2; }
.grp-3 { background: #aac7f2; }
.grp-4 { background: #cfb6ef; }
/* FutConnect: nicht gefundene Gruppen werden nach dem Verlieren nacheinander aufgedeckt */
.fc-card.is-reveal, .fc-card.is-reveal:hover { background: var(--sel, var(--fill-2)); box-shadow: inset 0 0 0 2px rgba(29, 29, 31, 0.55); color: var(--ink); transform: scale(1.05); transition: transform 280ms var(--spring), box-shadow 200ms ease, background-color 200ms ease; }
.grp-missed { background: var(--fill); box-shadow: inset 0 0 0 1px var(--hairline); }
.grp-missed strong, .grp-missed span { color: var(--ink-2); }
.fc-groups { display: grid; gap: 0.5rem; width: 100%; max-width: 35rem; margin-top: 2rem; }

/* ---------- Higher-Lower ---------- */
/* Kategorie frei über den Karten (ohne Kasten), „Stand …“ klein darunter */
.game-hl .g { padding-top: 1rem; }
.hl-cat { margin: 1.25rem 0 1.5rem; text-align: center; font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.hl-cat-note { display: block; margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.3; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.hl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.hl-cards.is-swap { animation: pop-in 300ms var(--spring); }
/* zwei erhöhte weiße Karten mit Kante; rechts verdeckt („?“), nach dem Tipp grün bzw. rot */
.hl-card {
  --lip: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; min-height: 12rem; margin-bottom: var(--lip); padding: 1.25rem 1rem;
  border-radius: 1.125rem; background: #ffffff; text-align: center;
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 var(--lip) 0 #d6d0c9;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.hl-name { font-size: 1.1875rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; overflow-wrap: anywhere; }
.hl-value { margin-top: 0.375rem; font-size: 2.75rem; line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hl-unit { font-size: 0.875rem; color: var(--ink-2); }
.hl-unit:empty { display: none; }
.hl-card.is-guess .hl-value { color: var(--ink-3); }
.hl-card.is-right { background: var(--green-tint); box-shadow: inset 0 0 0 2px var(--green-line), 0 var(--lip) 0 #b9e3c6; animation: hl-pop 420ms var(--spring); }
.hl-card.is-right .hl-value { color: var(--green); }
.hl-card.is-wrong { background: var(--red-tint); box-shadow: inset 0 0 0 2px var(--red-line), 0 var(--lip) 0 #f3c2c5; animation: shake 400ms ease; }
.hl-card.is-wrong .hl-value { color: var(--red); }
@keyframes hl-pop { 40% { transform: scale(1.03); } }
/* Höher / Tiefer: erhöhte weiße Knöpfe mit grauer Kante (Antworten, kein Blau) */
.hl-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.hl-btn, .game-hl #shareBtn {
  --lip: 4px; min-height: 3.75rem; margin-bottom: var(--lip); border-radius: 1.125rem; background: #ffffff; color: var(--ink); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 var(--lip) 0 #d6d0c9;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease, opacity 150ms ease;
}
.hl-btn:not([disabled]):active, .game-hl #shareBtn:active { transform: translateY(var(--lip)); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 0 0 #d6d0c9; }
@media (hover: hover) { .hl-btn:not([disabled]):hover, .game-hl #shareBtn:hover { background: #f7f5f2; color: var(--ink); } }
.hl-btn[disabled] { opacity: 0.5; }
.game-hl #shareBtn { max-width: 20rem; min-height: 3.5rem; margin-top: 0.5rem; }   /* Teilen unter dem Weiter-Knopf, gleich breit */

/* ---------- Meister-Quiz ---------- */
/* Zeit, Zähler und Eingabe bleiben beim Scrollen sichtbar */
.mq-controls { position: sticky; top: var(--nav-h); z-index: 10; padding: 0.5rem 0 0.25rem; background: #ffffff; }
.mq-input { display: block; width: 100%; margin-top: 0.75rem; }
.season-grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr)); gap: 0.375rem; }
.season { display: flex; flex-direction: column; gap: 0.125rem; min-height: 3.5rem; padding: 0.5rem 0.625rem; background: var(--fill); transition: background-color 300ms ease, box-shadow 300ms ease; }
.season-year { font-size: 0.75rem; color: var(--ink-3); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.season-club { font-size: 0.875rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.005em; min-height: 1.05rem; overflow-wrap: anywhere; }
.season.is-found { background: var(--green-tint); }
.season.is-fresh { box-shadow: inset 0 0 0 2px var(--green-line); }
.season.is-missed { background: var(--red-tint); }
.season.is-missed .season-club { color: var(--red); }
.season.is-void { background: transparent; box-shadow: inset 0 0 0 1px var(--hairline); }
.season.is-void .season-club { color: var(--ink-3); font-weight: 500; font-style: italic; }
/* Spitznamen-Quiz: alle Spitznamen nebeneinander, Verein erscheint darunter */
.nick-hint { margin: 1rem 0 0; font-size: 0.875rem; color: var(--ink-2); }
/* Tabelle wie bei JetPunk: Spitzname | Verein, in mehreren Spalten nebeneinander */
.nick-table { list-style: none; margin: 0.75rem 0 0; padding: 0; columns: 3 17rem; column-gap: 1rem; }
.nick {
  break-inside: avoid; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 0.75rem;
  min-height: 2.75rem; margin-bottom: 0.25rem; padding: 0.375rem 0.75rem; background: var(--fill); cursor: pointer;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.nick-name { font-size: 0.875rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.005em; }
.nick-club { min-height: 1rem; font-size: 0.875rem; line-height: 1.2; color: var(--ink-2); }
@media (hover: hover) { .nick:hover { background: var(--fill-2); } }
.nick.is-current, .nick.is-current:hover { background: #fff4c7; box-shadow: inset 0 0 0 2px #e8c547; }
.nick.is-found, .nick.is-found:hover { background: var(--green-tint); cursor: default; }
.nick.is-found .nick-club { color: var(--green); font-weight: 600; }
.nick.is-fresh { box-shadow: inset 0 0 0 2px var(--green-line); }
.nick.is-missed { background: var(--red-tint); }
.nick.is-missed .nick-club { color: var(--red); font-weight: 600; }
/* Quiz-Spielseiten ohne eigene Spalten-Regel: Abstand unter der Kopfzeile (der Titel steht jetzt in der Kopfzeile) */
.game-quiz:not(.game) .g { padding-top: 1.5rem; }
/* Listen-Quiz (Spitznamen, Meister-Quiz): oben eine Zeile mit Stand und Uhr, darunter Eingabe und „Aufgeben“; die Liste bleibt darunter */
.game-list .g { max-width: 62rem; padding-top: 1.5rem; }   /* breite Liste, Abstand unter der Kopfzeile */
.game-list .input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
/* Handy: Eingabe wandert unter den markierten Spitznamen (Zeile in der Liste) */
.nick-slot { list-style: none; break-inside: avoid; margin: 0.375rem 0 0.75rem; }
.nick-slot .g-meta { min-height: 2.25rem; }
.list-controls .guess { margin-top: 0.25rem; }
.list-controls .mq-input { margin-top: 0; }
.list-controls #timeLeft.is-low { color: var(--red); }
.list-sub { color: var(--ink-3); }
@media (max-width: 479px) { .list-sub { display: none; } }
/* „Aufgeben“: erhöhter weißer Knopf mit grauer Kante (wie „Abwählen“) */
.list-controls #giveUpBtn {
  --lip: 4px; flex: none; min-height: 3.5rem; margin-bottom: var(--lip); padding-inline: 1.375rem;
  border-radius: 1.125rem; background: #ffffff; color: var(--ink); font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 var(--lip) 0 #d6d0c9;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease;
}
.list-controls #giveUpBtn:not([disabled]):active { transform: translateY(var(--lip)); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 0 0 #d6d0c9; }
@media (hover: hover) { .list-controls #giveUpBtn:not([disabled]):hover { background: #f7f5f2; color: var(--ink); } }
.list-controls #giveUpBtn[disabled] { opacity: 0.5; }
/* Weiter-Knopf auf den Ergebnisseiten aller Quiz: blau mit Kante (Spielfarbe), drückt sich ein */
.game-quiz #nextQuizBtn {
  --lip: 5px; min-height: 3.5rem; margin-bottom: var(--lip); padding-inline: 1.375rem;
  border-radius: 1.125rem; background: var(--g-accent); color: var(--g-ink); font-weight: 700;
  box-shadow: 0 var(--lip) 0 var(--g-lip-color);
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease;
}
.game-quiz #nextQuizBtn:active { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--g-lip-color); }
@media (hover: hover) { .game-quiz #nextQuizBtn:hover { background: var(--g-accent-hover); color: var(--g-ink); } }
.game #nextQuizBtn { max-width: 20rem; margin-top: 1.75rem; }   /* so breit wie die Ergebnis-Spalten darüber */
/* Weiter der Tagesspiele: sieht aus wie „Tippen zum Fortfahren“ (Klasse game-continue), darunter der Fortschritt */
.game .daily-status { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.game .daily-status strong { color: var(--ink); font-weight: 600; }
.game #dailyNextBtn[hidden] + .daily-status { margin-top: 2.25rem; }   /* alle vier geschafft: kein Weiter, Abstand wie sonst */
/* Listen-Quiz: Fahne, Pokal bzw. Spiel-Symbol oben in der Mitte, die Seite rückt dadurch etwas tiefer */
.list-emblem { display: flex; justify-content: center; padding-top: clamp(1.5rem, 5vh, 3rem); }
.list-emblem:empty { display: none; }
.le-flag { position: relative; display: flex; width: 5.5rem; aspect-ratio: 5 / 3; overflow: hidden; border-radius: 0.5rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 10px 20px -8px rgba(0, 0, 0, 0.25); }
.le-trophy { display: flex; color: var(--ink); }
.le-trophy svg { width: 4.25rem; height: 4.25rem; }
.le-globe { display: block; width: 4.5rem; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.14)); }
.le-art { display: block; width: 5rem; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.12)); }   /* Spiel-Symbol (Spitznamen) */
.game .list-emblem + .res { padding-top: 1.5rem; }   /* Ergebnis direkt unter der Fahne */
@media (max-width: 559px) {
  .le-flag { width: 4.5rem; }
  .le-trophy svg { width: 3.5rem; height: 3.5rem; }
  .le-globe { width: 3.75rem; }
  .le-art { width: 4rem; }
}
.more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.75rem; }
.more-label { margin: 2.5rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }

/* ---------- FutElf: Aufstellungen auf dem Spielfeld ---------- */
.g.fe { max-width: 44rem; }
.fe-sub { margin: 0.375rem 0 0; font-size: 1.0625rem; color: var(--ink-2); }
.fe-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; }
.fe-chips .chip { height: auto; min-height: 2rem; padding-block: 0.25rem; }
#feYear { font-weight: 600; }
.fe-pitch {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 320 / 208; margin-top: 1.25rem;
  background: #4f8f3a; box-shadow: var(--pitch-shadow);
}
.fe-portrait { display: none; }
.fe-players { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; }
/* Spieler laufen Reihe für Reihe (von hinten nach vorn) auf ihre Position */
.fe-player {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0;
  animation: fe-in var(--spring-dur) var(--spring) both; animation-delay: calc(var(--row) * 70ms);
}
@keyframes fe-in { from { opacity: 0; transform: scale(0.6); } }
.fe-mark {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: block; width: 1.875rem; height: 1.25rem; overflow: hidden; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.fe-mark svg { display: block; width: 100%; height: 100%; }
.fe-mark.is-dot { width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 2px rgba(8, 20, 8, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35); }
/* Beschriftung als Glas-Material wie der "Spielen"-Knopf auf den Startseiten-Feldern */
.fe-label {
  position: absolute; left: 0; top: 0.875rem; transform: translateX(-50%);
  width: max-content; max-width: 6rem; padding: 0.0625rem 0.125rem;
  color: #ffffff; text-align: center; font-size: 0.6875rem; line-height: 1.2; font-weight: 700; letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.45);
  overflow-wrap: anywhere; hyphens: auto;
}
.fe-mark.is-dot + .fe-label { top: 0.75rem; }
/* Nationalmannschaft: Trikot in Vereinsfarben statt Punkt */
.fe-mark.is-kit { width: 1.75rem; height: 1.75rem; overflow: visible; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
.fe-mark.is-kit svg { width: 100%; height: 100%; }
.fe-mark.is-kit + .fe-label { top: 1.125rem; }
.fe-label b { display: block; font-weight: 700; }
/* nach der Auflösung: nur der Name; Verein/Land erscheint nur beim Spieler, über den man fährt oder den man antippt */
.fe-label small { display: none; margin-top: 0.0625rem; font-size: 0.625rem; font-weight: 500; opacity: 0.9; }
.fe-player:hover .fe-label small, .fe-player.is-info .fe-label small { display: block; }
.fe-player:hover, .fe-player.is-info { z-index: 3; }
/* Spieler antippen: Namen aufdecken (Knopf ohne eigene Fläche, Beschriftung bleibt am Spieler positioniert) */
.fe-hit { position: static; display: block; width: 0; height: 0; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
.fe-hit::before { content: ""; position: absolute; left: -1.75rem; top: -1.25rem; width: 3.5rem; height: 3.5rem; }   /* großzügige Tipp-Fläche */
.fe-hit:not(:disabled) { cursor: pointer; }
.fe-mark { transition: transform 160ms var(--ease-out); }
@media (hover: hover) { .fe-hit:not(:disabled):hover .fe-mark { transform: translate(-50%, -50%) scale(1.2); } }
.fe-hit:focus-visible { outline: none; }
.fe-hit:focus-visible .fe-mark { outline: 2px solid #ffffff; outline-offset: 3px; }
/* FutElf-Tipps: Tipp 1 und Tipp 2 als Karten, die sich beim Antippen umdrehen */
.fe-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.625rem; margin: 1rem 0 1.25rem; }
.fe-tip { display: block; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; perspective: 700px; }
.fe-tip-inner { display: grid; transform-style: preserve-3d; transition: transform 560ms var(--ease-out); }
.fe-tip.is-flipped .fe-tip-inner { transform: rotateY(180deg); }
.fe-tip-face {
  grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.5rem; padding: 0.5rem 1.125rem;
  border-radius: var(--r-md); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.fe-tip-front { background: var(--fill); box-shadow: inset 0 0 0 1px var(--hairline); }
.fe-tip-back { background: #ffffff; box-shadow: var(--lift); transform: rotateY(180deg); }
.fe-tip-label { font-size: 0.875rem; color: var(--ink-2); }
.fe-tip b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; text-align: right; }
.fe-tip:not(.is-covered) { cursor: default; }
.fe-tip.is-covered.is-locked { cursor: not-allowed; opacity: 0.6; }
@media (hover: hover) { .fe-tip.is-covered:not(.is-locked):hover .fe-tip-front { background: var(--fill-2); } }
.fe-tip.is-covered:active:not(.is-locked) .fe-tip-inner { transform: scale(0.98); transition: transform 100ms ease-out; }
.fe-pitch.is-revealed .fe-player { animation: none; }
.fe-pitch.is-revealed .fe-label { animation: fe-fade 300ms ease both; }
@keyframes fe-fade { from { opacity: 0; } }
.fe-pitch.is-revealed .fe-label.is-flip { animation: fe-flip 260ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes fe-flip { from { opacity: 0; transform: translateX(-50%) perspective(400px) rotateX(-80deg); } }
/* Treffer: Spieler pulsen mit grünem Ring, Reihe für Reihe von hinten nach vorn */
.fe-pitch.is-win .fe-mark.is-kit { animation-name: fe-win-kit; }
@keyframes fe-win-kit {
  0% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
  40% { transform: translate(-50%, -50%) scale(1.3); filter: drop-shadow(0 0 8px rgba(143, 212, 122, 0.95)); }
  100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); }
}
.fe-pitch.is-win .fe-mark { animation: fe-win 650ms var(--spring) both; animation-delay: calc(var(--row, 0) * 70ms); }
@keyframes fe-win {
  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(143, 212, 122, 0.9); }
  40% { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(143, 212, 122, 0.55); }
  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 14px rgba(143, 212, 122, 0); }
}

/* ---------- Spitznamen-Quiz: große Karte ---------- */
.quote {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 10rem; margin: 1.5rem 0 1.25rem; padding: 2rem 1.75rem; background: #ffffff; box-shadow: var(--lift); text-align: center;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.quote.is-swap { animation: pop-in 300ms var(--spring); }
.quote-text { margin: 0; font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.quote-text.is-long { font-size: clamp(1.25rem, 3.2vw, 1.625rem); line-height: 1.3; letter-spacing: -0.012em; }
.quote.is-right { background: var(--green-tint); box-shadow: inset 0 0 0 2px var(--green-line); }
.quote.is-wrong { background: var(--red-tint); box-shadow: inset 0 0 0 2px var(--red-line); }

/* ---------- Auflösung (FutElf, Spitznamen) ---------- */
.reveal { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; padding: 1rem 1.25rem; background: #ffffff; box-shadow: var(--lift); animation: pop-in 350ms var(--spring); }
.reveal-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; }
.reveal-icon.is-win { background: var(--green-tint); color: var(--green); }
.reveal-icon.is-lose { background: var(--red-tint); color: var(--red); }
.reveal-text { min-width: 0; }
.reveal-state { margin: 0; font-size: 0.875rem; font-weight: 600; }
.reveal-state.is-win { color: var(--green); }
.reveal-state.is-lose { color: var(--red); }
.reveal-answer { margin: 0.125rem 0 0; font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; }
.reveal-note { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--ink-2); }
.reveal-note:empty { display: none; }

/* ---------- Stadion-Quiz: leere Deutschlandkarte, Pin setzen ---------- */
.sq-name { margin: 1.5rem 0 0; font-size: clamp(1.75rem, 4.5vw, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; text-align: center; text-wrap: balance; }
.sq-name.is-swap { animation: pop-in 300ms var(--spring); }

.sq-map {
  position: relative; width: min(100%, calc(50svh * 0.74)); aspect-ratio: var(--ratio, 466 / 636);
  margin: 1.25rem auto 0; cursor: crosshair; -webkit-tap-highlight-color: transparent;
}
.sq-map.is-reveal { cursor: default; }
.sq-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sq-land { fill: var(--fill); stroke: var(--hairline-strong); stroke-width: 1.5; stroke-linejoin: round; }
.sq-pin, .sq-target { stroke: #ffffff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: sq-pop 350ms var(--spring); }
.sq-pin { fill: var(--g-lip-color); }
.sq-pin.is-past { fill: var(--ink-2); animation: none; }
.sq-target { fill: var(--green-line); }
@keyframes sq-pop { from { transform: scale(0.3); opacity: 0.4; } to { transform: none; opacity: 1; } }
.sq-line { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; animation: fe-fade 400ms ease both; }

/* Schild an der echten Lage: außen am Punkt verankert */
.sq-label { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 0.75rem)); pointer-events: none; }
.sq-label.is-start { transform: translate(-1rem, calc(-100% - 0.75rem)); }
.sq-label.is-end { transform: translate(calc(-100% + 1rem), calc(-100% - 0.75rem)); }
.sq-label.is-below { transform: translate(-50%, 0.75rem); }
.sq-label.is-below.is-start { transform: translate(-1rem, 0.75rem); }
.sq-label.is-below.is-end { transform: translate(calc(-100% + 1rem), 0.75rem); }
.sq-pill {
  display: flex; flex-direction: column; align-items: center; padding: 0.375rem 0.875rem; border-radius: 999px;
  white-space: nowrap; background: var(--green); color: #ffffff; text-align: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  animation: pop-in 350ms var(--spring);
}
.sq-label.is-start .sq-pill { align-items: flex-start; }
.sq-label.is-end .sq-pill { align-items: flex-end; }
.sq-label-name { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.sq-label-club { font-size: 0.75rem; opacity: 0.85; line-height: 1.25; }

/* Ergebniszeile unter der Karte (reserviert ihre Höhe, damit nichts springt), darunter der Knopf wie beim Derby-Quiz */
.sq-result { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4rem; margin: 0.5rem 0 0; text-align: center; }
.sq-result-main { font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.012em; }
.sq-result-main.is-hit { color: var(--green); }
.sq-result-sub { font-size: 0.9375rem; color: var(--ink-2); }
.game-sq #mainBtn[disabled] { background: var(--g-tint); color: var(--g-text); box-shadow: 0 var(--lip) 0 var(--g-tint-lip); }

/* ---------- Rückblick auf der Ergebnisseite ---------- */
.recap { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.5rem; width: 100%; max-width: 35rem; text-align: left; }
.recap-row { display: flex; align-items: center; gap: 1rem; min-height: 4rem; padding: 0.75rem 1.125rem; background: #ffffff; box-shadow: var(--lift); }
.recap-lead { flex: none; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.recap-text { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.recap-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.recap-sub { font-size: 0.8125rem; color: var(--ink-2); }
.recap-state { flex: none; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.recap-state.is-win { color: var(--green); }
.recap-state.is-lose { color: var(--red); }

/* ---------- Ergebnis ---------- */
.res { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 0 3rem; }
.res-badge { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; }
.res-badge.is-win { background: var(--green-tint); color: var(--green); }
.res-badge.is-lose { background: var(--red-tint); color: var(--red); }
.res-badge.is-art { width: auto; height: 5.5rem; border-radius: 0; }
.res-badge.is-art img { display: block; height: 100%; width: auto; }
.res-badge.is-neutral { background: var(--fill); color: var(--ink); }
.res-title { margin: 1.25rem 0 0; font-size: clamp(2.25rem, 4.5vw, 3rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.res-name { margin: 0.5rem 0 0; font-size: 1.5rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; }
.res-big { margin: 0.75rem 0 0; font-size: clamp(3.5rem, 9vw, 5rem); line-height: 1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.res-sub { margin: 0.625rem 0 0; max-width: 30rem; font-size: 1.1875rem; line-height: 1.42; color: var(--ink-2); text-wrap: pretty; }
/* Teilen-Karte: Monospace-Text im Rahmen, Kopier-Symbol oben rechts */
.share { width: 100%; max-width: 25rem; margin-top: 1.75rem; text-align: left; }
.share-card { position: relative; border: 1px solid var(--hairline-strong); border-radius: var(--r-card); background: #ffffff; padding: 1rem 3.25rem 1rem 1.25rem; }
.share-text { margin: 0; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font-kerning: none; }
.share-copy { position: absolute; top: 0.625rem; right: 0.625rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0.625rem; background: transparent; color: var(--ink-2); transition: background 150ms ease, color 150ms ease; }
.share-copy.is-copied { color: var(--green); background: var(--green-tint); }
@media (hover: hover) { .share-copy:hover { background: var(--fill); color: var(--ink); } }
.share-btn { margin-top: 0.75rem; }
.res-stats { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 20rem; margin-top: 1.5rem; }
.res-stat { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; }
.res-stat + .res-stat { box-shadow: inset 1px 0 0 var(--hairline); }
.res-stat-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.res-stat-big { font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.res-stat-sub { font-size: 0.8125rem; font-weight: 500; color: var(--ink-2); }
.res[hidden] { display: none; }
.game .res { padding-top: clamp(4rem, 14vh, 8rem); }
@media (max-width: 767px) { .game .res { padding-top: 1rem; } .game .res-stats { margin-top: 1rem; } }   /* Handy: weniger Leerraum über dem Ergebnis, damit „2 von 4 heute“ ohne Scrollen zu sehen ist */
.res-actions { display: grid; gap: 0.625rem; width: 100%; max-width: 22rem; margin-top: 2rem; }

/* ---------- Rechtliches ---------- */
.legal { max-width: 42rem; margin: 0 auto; padding: 1rem 0 1rem; }
.legal h1 { margin: 0 0 1.5rem; font-size: clamp(1.875rem, 4.5vw, 3rem); hyphens: auto; overflow-wrap: break-word; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.legal h2 { margin: 2.25rem 0 0.5rem; font-size: 1.25rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.legal ul { margin: 0 0 0.875rem; padding-left: 1.25rem; font-size: 1.0625rem; line-height: 1.53; color: #424245; }
.legal li { margin-bottom: 0.375rem; }
.legal p { margin: 0 0 0.875rem; font-size: 1.0625rem; line-height: 1.53; color: #424245; }
.legal a { color: #0066cc; }
.legal a:hover { color: #0066cc; text-decoration: underline; }
.legal mark { background: #fff1a8; color: var(--ink); padding: 0 0.2em; }
.callout { display: flex; gap: 0.875rem; margin: 0 0 1rem; padding: 1rem 1.125rem; background: var(--fill); }
.callout svg { flex: none; margin-top: 0.125rem; color: var(--ink-2); }
.legal .callout p { margin: 0; font-size: 0.9375rem; line-height: 1.47; color: var(--ink); }

/* ---------- Footer ---------- */
/* Impressum/Datenschutz: fest am unteren Rand; auf Ergebnisseiten (is-result-page) unter dem Inhalt */
.ap-legal {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center; gap: 1.5rem; height: 1.5rem; align-items: center;
  background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 0.75rem; line-height: 1.33; letter-spacing: 0.01em; color: var(--ink-3);
}
/* Tippfläche ca. 34 px hoch, ragt unsichtbar nach oben über die schmale Leiste; der Text bleibt unten */
.ap-legal a { display: inline-flex; align-items: flex-end; align-self: flex-end; min-height: 2.125rem; padding: 0 0.5rem 0.25rem; }
.ap-legal a:hover { color: var(--ink); }
.ap:not(.is-result-page) main.game { padding-bottom: 1.5rem; }
.ap:not(.is-result-page) .st { min-height: calc(100svh - var(--nav-h) - 1.5rem); }
.ap-footer-res { display: none; }
.ap.is-result-page .ap-legal { display: none; }
.ap.is-result-page .ap-footer-res { display: block; }
.ap.is-result-page main.game { min-height: calc(100svh - var(--nav-h)); }
.ap-footer { margin-top: 6rem; padding: 2.5rem 0 8rem; border-top: 1px solid var(--hairline); font-size: 0.75rem; line-height: 1.33; letter-spacing: 0.01em; color: var(--ink-2); }
.ap-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.ap-footer h3 { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.ap-footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }
.ap-footer a { display: inline-block; padding: 0.5625rem 0; color: #424245; }   /* Tippfläche ca. 34 px */
.ap-footer a:hover { text-decoration: underline; color: #424245; }
.ap-footer-base { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline); }

/* ==========================================================================
   Unterseiten: gleiche Kartensprache wie die Startseite
   (Radius, Material, Schatten, Einblenden). Reihenfolge wichtig: steht nach den Einzelregeln.
   ========================================================================== */
.answer, .station, .qbox, .hl-card, .quote, .reveal, .recap-row {
  border-radius: var(--r-card); background-color: #ffffff; background-image: var(--card-bg);
}
.fc-card, .fc-group, .callout, .redact { border-radius: var(--r-md); }
.season, .nick { border-radius: var(--r-sm); }
.fe-pitch { border-radius: var(--r-card); }
.input { padding: 0 1.25rem; border-radius: var(--r-md); }
.seg { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07); }
.progress, .step { border-radius: 999px; }
@media (hover: hover) {
  .answer:not(:disabled):hover { transform: translateY(-2px); }
}

/* Start-Seiten: großer Titel, Symbol mit Tiefe, grüner Spielen-Knopf */
.ap:has(.st), .ap:has(.legal) { background: #ffffff; }
.st-title { font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 0.98; letter-spacing: -0.022em; text-wrap: balance; }
.st-eyebrow { color: var(--green); letter-spacing: 0.02em; }
.game .st-eyebrow { color: var(--g-text); }
.st-art { width: 11rem; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.14)); }
.st-flag { border-radius: 0.75rem; }
.st-flag { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 14px 28px -8px rgba(0, 0, 0, 0.22); }
.btn-primary.st-cta { background: var(--green); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px -6px rgba(31, 122, 53, 0.55); }
@media (hover: hover) {
  .btn-primary.st-cta:not([disabled]):hover { background: #19662c; }
}
/* FutGuess-Startseite: „Spielen“ in der Spielfarbe mit Kante wie die Knöpfe im Spiel */
.game .btn-primary.st-cta { background: var(--g-accent); color: var(--g-ink); box-shadow: 0 var(--lip) 0 var(--g-lip-color); }
.game .btn-primary.st-cta:not([disabled]):active { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--g-lip-color); }
@media (hover: hover) {
  .game .btn-primary.st-cta:not([disabled]):hover { background: var(--g-accent-hover); }
}

/* Ergebnis */
.res-title { font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 1; letter-spacing: -0.022em; }
.res-badge.is-win { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0.12); }
.res-badge.is-lose { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0.1); }
.legal h1 { line-height: 1; letter-spacing: -0.022em; }
/* Ohne Kerning: sonst schiebt Segoe UI (Windows) Umlaute unter das Dach vom „T“ (z. B. „Tä“) */
.ap-display, .st-title, .res-title, .legal h1 { font-kerning: none; }

/* Einblenden beim Laden (gestaffelt, nur transform + opacity) */
.st > *, .res > *, .g-prompt, .g-meta, .sub-head {
  animation: ap-rise 700ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
.st > :nth-child(2), .res > :nth-child(2), .g-meta { --i: 1; }
.st > :nth-child(3), .res > :nth-child(3) { --i: 2; }
.st > :nth-child(4), .res > :nth-child(4) { --i: 3; }
.st > :nth-child(5), .res > :nth-child(5) { --i: 4; }
.st > :nth-child(n+6), .res > :nth-child(n+6) { --i: 5; }
/* Wechsel über die Spiel-Leiste: keine Einblend-Animation, die Seite steht sofort da */
.is-instant .st > *, .is-instant .res > *, .is-instant .g-prompt, .is-instant .g-meta, .is-instant .sub-head,
.is-instant .ap-display, .is-instant .ap-status, .is-instant .ap-game, .is-instant .ap-section-title, .is-instant .ap-quiz, .is-instant .ap-row { animation: none; }

/* ==========================================================================
   Breiten
   ========================================================================== */
@media (max-width: 1023px) {
  .ap-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-masters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* FutElf auf schmalen Bildschirmen: Spielfeld hochkant, Angriff nach oben */
@media (max-width: 639px) {
  .fe-pitch { aspect-ratio: 208 / 320; width: min(100%, max(19rem, calc(55dvh * 208 / 320))); margin-inline: auto; }
  .fe-landscape { display: none; }
  .fe-portrait { display: block; }
  .fe-player { left: calc(var(--y) * 1%); top: calc((100 - var(--x)) * 1%); }
  .fe-label { max-width: 4.5rem; padding: 0.125rem 0.25rem; font-size: 0.625rem; letter-spacing: -0.005em; }
  .fe-label small { font-size: 0.5625rem; }
}
@media (max-width: 767px) {
  .ap-first { padding-top: 2rem; }
  .ap-pagehead { gap: 1.125rem; margin-bottom: 1.5rem; }
  .ap-section { margin-top: 2.5rem; }
  .ap-section-title { margin-bottom: 1rem; font-size: 1.5rem; }
  .ap-games { gap: 0.75rem; }
  .ap-pitchlabel { gap: 0.4375rem; padding: 0 0.5rem; }
  .ap-gamename { font-size: 1.25rem; }
  .ap-play { height: 2rem; padding: 0 0.625rem 0 0.875rem; font-size: 0.8125rem; }
  .ap-quizzes { gap: 0.75rem; }
  .ap-quiz { flex-direction: column; align-items: flex-start; gap: 0.75rem; min-height: 0; padding: 1rem; }
  .ap-quiz-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; }
  .ap-quiz-title { font-size: 1.0625rem; }
  .ap-quiz-cta { font-size: 0.875rem; }
  .ap-masters { gap: 0.625rem; }
  .ap-row { gap: 0.625rem; min-height: 3.75rem; padding: 0.625rem 0.75rem; }
  .ap-row-name { font-size: 0.9375rem; line-height: 1.2; }
  .ap-flag, .ap-badge, .ap-globe { width: 2.25rem; height: 1.5rem; }
  .ap-globe img { height: 1.75rem; }
  .ap-badge svg { width: 1.875rem; height: 1.875rem; }

  .st-art { width: 8rem; }
  .st-flag { width: 9rem; }
  .st-badge svg { width: 5.5rem; height: 5.5rem; }
  .st-art.st-globe { width: 6.5rem; }
  /* Footer: passen die vier Spalten nicht mehr nebeneinander, nur noch "Über uns" */
  .sq-map { width: min(100%, calc(46svh * 0.74)); }
  .sq-result-main { font-size: 1.1875rem; }
  .ap-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-footer-grid > div:not(:last-child) { display: none; }
  .station { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.125rem; }
  .station-years { grid-column: 1 / -1; }
  .station.is-covered { grid-template-columns: minmax(0, 1fr) auto; }
  .fc-card { padding: 0.375rem; font-size: 0.8125rem; }
  .hl-card { min-height: 10rem; padding: 1rem 0.75rem; }
  .hl-value { font-size: 2.125rem; }
  .sub-title { font-size: 1.3125rem; gap: 0.5rem; }
  .sub-title img { height: 2rem; }
  .sub-head:has(.sub-title img) { margin-top: 2.25rem; }
}
@media (max-width: 479px) {
  .ap-chev { display: none; }
  .back span { display: none; }
  .hl-name { font-size: 1.0625rem; }
  .guess .btn-lg { padding: 0 1.25rem; }
}

/* ==========================================================================
   Barrierefreiheit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ap-pitch, .ap-quiz, .ap-quiz-icon, .ap-row, .ap-brand, .ap-play svg, .ap-quiz-cta svg, .ap-chev,
  .btn, .back, .back svg, .answer, .fc-card, .seg-thumb, a.chip, .progress > span, .qbox, .hud {
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, opacity 200ms ease !important; transform: none !important;
  }
  .st > *, .res > *, .g-prompt, .g-meta, .sub-head,
  .ap-display, .ap-status, .ap-game, .ap-section-title, .ap-quiz, .ap-row,
  .input.is-hit, .fe-pitch.is-win .fe-mark, .station.is-open, .station.is-flip,   .fc-board .fc-group, .hl-cards.is-swap, .hl-card.is-right, .hl-card.is-wrong, .fc-card.is-wrong, .answer.is-wrong, .input.is-shake,
  .fe-player, .quote.is-swap, .reveal, .sq-name.is-swap, .sq-pin, .sq-target, .sq-line, .sq-pill { animation: none !important; }
  .fe-pitch .fe-label { animation: fe-fade 200ms ease both !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .ap-nav { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ap-play { background: #1d1d1f; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hud { background: #1d1d1f; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fe-label { background: #1d1d1f; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .ap-nav { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ap-nav::after { opacity: 1; background: #000000; animation: none; }
  .ap-play { background: #000000; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px #ffffff; }
  .ap-quiz, .ap-row, .answer, .station, .hl-card, .qbox { background: #ffffff; box-shadow: inset 0 0 0 1px #000000; }
  .ap-quiz-cta, .st-eyebrow { color: #14561f; }
  .btn-primary.st-cta { background: #14561f; box-shadow: none; }
  .fc-card, .season, .chip, .callout { box-shadow: inset 0 0 0 1px #000000; }
  .quote, .reveal, .recap-row { box-shadow: inset 0 0 0 1px #000000; }
  .fe-label { background: #000000; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ap-status, .ap-quiz-cta, .msg, .g-meta, .st-sub, .res-sub, .st-date, .legal p, .ap-footer { color: #1d1d1f; }
}
@media (prefers-reduced-motion: reduce) { .fe-tip-inner { transition-duration: 1ms; } }

/* FutConnect: erhöhte Karten mit Kante, drücken sich beim Antippen ein; größere Schrift, kleine Flagge mit Nationalität */
.game-fc .fc-board { gap: 0.75rem; }
.game-fc .fc-board .fc-group { min-height: calc((100cqw - 2.25rem) / 4); }
.game-fc .fc-card {
  --lip: 4px; flex-direction: column; gap: 0.375rem; margin-bottom: var(--lip);
  background: #ffffff; font-size: 1.1875rem; line-height: 1.2; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 var(--lip) 0 #d6d0c9;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease;
}
@media (hover: hover) { .game-fc .fc-card:not(.is-selected):not(.is-correct):not(.is-reveal):hover { background: #faf8f5; } }
.game-fc .fc-card:active { transform: translateY(var(--lip)); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 0 0 #d6d0c9; }
.game-fc .fc-card.is-selected, .game-fc .fc-card.is-selected:hover, .game-fc .fc-card.is-correct, .game-fc .fc-card.is-correct:hover {
  transform: translateY(var(--lip)); background: var(--sel, var(--ink)); box-shadow: inset 0 0 0 2px rgba(29, 29, 31, 0.55);
}
.game-fc .fc-card.is-reveal, .game-fc .fc-card.is-reveal:hover { background: var(--sel, #ffffff); box-shadow: inset 0 0 0 2px rgba(29, 29, 31, 0.55); transform: translateY(var(--lip)) scale(1.05); }
.fc-card-text, .fc-card-kind, .fc-card-big { overflow-wrap: normal; hyphens: none; }
.fc-card-text { display: block; width: 100%; }   /* Wörter werden nicht mitten drin getrennt, stattdessen schrumpft die Schrift (fitCardText in game.js) */
.fc-card-kind { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-2); }
.fc-flag { display: block; width: 4rem; height: 2.6667rem; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 2px 5px rgba(0, 0, 0, 0.15); }
.fc-shirt { display: block; width: 4.25rem; height: 4.25rem; }
.fc-card-big { font-size: 2.125rem; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.fc-card-visual .fc-card-kind { text-align: center; line-height: 1.2; }
.fc-card-big + .fc-card-kind { font-size: 0.875rem; padding-inline: 0.25rem; }
.fc-card.is-selected .fc-card-kind, .fc-card.is-correct .fc-card-kind, .fc-card.is-reveal .fc-card-kind { color: rgba(29, 29, 31, 0.7); }
@media (max-width: 559px) { .game-fc .fc-card { font-size: 1rem; padding: 0.375rem; } .fc-card-kind { font-size: 0.6875rem; } .fc-flag { width: 3.25rem; height: 2.1667rem; } .fc-shirt { width: 3.5rem; height: 3.5rem; } .fc-card-big { font-size: 1.75rem; } .fc-card-big + .fc-card-kind { font-size: 0.75rem; } }
/* FutConnect: gefundene Gruppen (Spielfeld und Ergebnisseite) in derselben Schriftgröße wie die Karten */
.game-fc .fc-group { gap: 0.375rem; padding: 0.875rem 1.25rem; }
.game-fc .fc-group strong { font-size: 1.375rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.game-fc .fc-group span { font-size: 1rem; line-height: 1.3; color: rgba(29, 29, 31, 0.72); }
@media (max-width: 559px) { .game-fc .fc-group { padding: 0.625rem 0.875rem; } .game-fc .fc-group strong { font-size: 1.1875rem; } .game-fc .fc-group span { font-size: 0.875rem; } }
/* FutConnect: gefundene Gruppen mit demselben dunklen Rand wie ausgewählte Karten */
.game-fc .fc-group { box-shadow: inset 0 0 0 2px rgba(29, 29, 31, 0.55); }

/* ==========================================================================
   Derby-Quiz (Start-, Spiel- und Ergebnisseite)
   Frage frei auf der Seite (ohne Kasten), darunter die vier Antworten (A–D) untereinander als erhöhte weiße Kacheln mit Kante,
   die sich beim Antippen eindrücken; Buchstaben grau, Blau nur am Weiter-Knopf, richtig = Grün, falsch = Rot.
   ========================================================================== */
.game-dq .dq-question {
  display: flex; align-items: center; justify-content: center; min-height: calc(3 * 1.2em);   /* drei Zeilen reserviert: die Kacheln springen nicht von Frage zu Frage */
  margin: 1.5rem 0 1.75rem; text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance;
}
.dq-answers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
.dq-answer {
  --lip: 4px;
  display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; margin-bottom: var(--lip); padding: 0.75rem 1rem;
  border: 0; border-radius: 1.125rem; background: #ffffff; color: var(--ink); text-align: left;
  font-size: 1.125rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; hyphens: auto;
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 var(--lip) 0 #d6d0c9;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease, opacity 200ms ease;
}
.dq-letter {
  display: flex; flex: none; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border-radius: 50%;
  background: var(--fill); color: var(--ink-2); font-size: 0.875rem; font-weight: 700; letter-spacing: 0;
  transition: background-color 150ms ease, color 150ms ease;
}
.dq-answer-text { flex: 1; min-width: 0; }
@media (hover: hover) {
  .dq-answer:not(:disabled):hover { background: #faf8f5; }
  .dq-answer:not(:disabled):hover .dq-letter { background: var(--fill-2); }
}
.dq-answer:not(:disabled):active { transform: translateY(var(--lip)); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 0 0 #d6d0c9; }
.dq-answer:disabled { cursor: default; }
/* jede neue Frage blendet kurz ein, die Kacheln leicht versetzt */
@keyframes dq-in { from { opacity: 0; transform: translateY(10px); } }
.dq-enter .dq-question, .dq-enter .dq-answer { animation: dq-in 320ms var(--ease-out) backwards; }
.dq-enter .dq-answer:nth-child(2) { animation-delay: 40ms; }
.dq-enter .dq-answer:nth-child(3) { animation-delay: 80ms; }
.dq-enter .dq-answer:nth-child(4) { animation-delay: 120ms; }
/* nach dem Antippen: Kachel bleibt eingedrückt, der Buchstabe wird zum Haken bzw. Kreuz */
.dq-answer.is-correct, .dq-answer.is-wrong { transform: translateY(var(--lip)); }
.dq-answer.is-correct { background: var(--green-tint); box-shadow: inset 0 0 0 2px var(--green-line); animation: dq-pop 420ms var(--spring); }
.dq-answer.is-wrong { background: var(--red-tint); box-shadow: inset 0 0 0 2px var(--red-line); animation: dq-shake 400ms ease; }
.dq-enter .dq-answer.is-correct, .dq-enter .dq-answer.is-wrong { animation-delay: 0s; }   /* Rückmeldung sofort, ohne die Versatz-Zeit vom Einblenden */
.dq-answer.is-muted { opacity: 0.45; }
.dq-answer.is-correct .dq-letter { background: var(--green); color: #ffffff; }
.dq-answer.is-wrong .dq-letter { background: var(--red); color: #ffffff; }
@keyframes dq-pop { 0%, 100% { transform: translateY(var(--lip)) scale(1); } 40% { transform: translateY(var(--lip)) scale(1.03); } }
@keyframes dq-shake { 0%, 100% { transform: translateY(var(--lip)); } 25% { transform: translateY(var(--lip)) translateX(-6px); } 75% { transform: translateY(var(--lip)) translateX(6px); } }
/* Weiter-Knopf: immer da; vor der Antwort in hellem Blau statt grau (wie bei HatTrick) */
.game-dq #nextBtn { margin-top: 1.25rem; }
.game-dq #nextBtn[disabled] { background: var(--g-tint); color: var(--g-text); box-shadow: 0 var(--lip) 0 var(--g-tint-lip); }


/* Ergebnisseite: zweiter Knopf wie „Abwählen“ bei FutConnect (weiß mit grauer Kante) */
.game-dq .btn-secondary {
  --lip: 5px; border-radius: 1.125rem; font-weight: 700; background: #ffffff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 var(--lip) 0 #d6d0c9;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease;
}
.game-dq .btn-secondary:active { transform: translateY(var(--lip)); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 0 0 #d6d0c9; }
@media (hover: hover) { .game-dq .btn-secondary:hover { background: #f7f5f2; color: var(--ink); } }

@media (max-width: 559px) {
  .game-dq .dq-question { min-height: calc(4 * 1.2em); margin: 1.25rem 0 1.5rem; }
  .dq-answer { font-size: 1.0625rem; }
}
@media (prefers-contrast: more) {
  .dq-answer { box-shadow: inset 0 0 0 1px #000000, 0 4px 0 #000000; }
}
@media (prefers-reduced-motion: reduce) {
  .dq-enter .dq-question, .dq-enter .dq-answer, .dq-answer.is-correct, .dq-answer.is-wrong { animation: none !important; }
  .dq-answer, .game-dq .btn-secondary { transition-duration: 1ms !important; }
}

/* ---------- 404-Seite und Hinweis ohne JavaScript ---------- */
.nf { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem var(--gutter) 4.5rem; text-align: center; }
.nf-stage { position: relative; width: 6rem; height: 7.5rem; margin-bottom: 0.5rem; }
.nf-ball { position: absolute; left: 0; bottom: 0.75rem; width: 6rem; height: 6rem; transform-origin: 50% 100%; animation: nf-drop 1.5s linear 150ms both; }
.nf-ball img { display: block; width: 100%; height: 100%; }
.nf-shadow { position: absolute; left: 50%; bottom: 0.25rem; width: 4.5rem; height: 0.75rem; margin-left: -2.25rem; border-radius: 50%; background: rgba(0, 0, 0, 0.14); animation: nf-shadow 1.5s linear 150ms both; }
/* Ball fällt, prallt dreimal auf und bleibt liegen; der Schatten atmet mit */
@keyframes nf-drop {
  0%   { transform: translateY(-9rem) scale(1, 1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  34%  { transform: translateY(0) scale(1, 1); }
  37%  { transform: translateY(0) scale(1.12, 0.88); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  39%  { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  58%  { transform: translateY(-3.25rem) scale(1, 1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  74%  { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  86%  { transform: translateY(-1rem) scale(1, 1); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  94%  { transform: translateY(0) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes nf-shadow {
  0%   { transform: scale(0.2); opacity: 0; }
  34%  { transform: scale(1); opacity: 1; }
  58%  { transform: scale(0.65); opacity: 0.6; }
  74%  { transform: scale(1); opacity: 1; }
  86%  { transform: scale(0.85); opacity: 0.8; }
  94%, 100% { transform: scale(1); opacity: 1; }
}
/* Ziffern rollen wie ein Zählwerk ein (4 zählt hoch, 0 zählt runter) */
.nf-num { display: flex; margin: 0; font-size: clamp(5.5rem, 26vw, 9rem); line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.nf-d { display: block; height: 1em; overflow: hidden; }
.nf-col { display: flex; flex-direction: column; animation: nf-roll 1000ms var(--spring) both; }
.nf-d:nth-child(1) .nf-col { animation-delay: 950ms; }
.nf-d:nth-child(2) .nf-col { animation-delay: 1050ms; }
.nf-d:nth-child(3) .nf-col { animation-delay: 1150ms; }
.nf-col i { display: block; height: 1em; font-style: normal; text-align: center; }
@keyframes nf-roll { from { transform: translateY(0); } to { transform: translateY(calc(var(--n) * -1em)); } }
.nf-title { margin: 0.5rem 0 0; font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.nf-sub { margin: 0.375rem 0 0; font-size: 1.0625rem; color: var(--ink-2); }
.nf-cta {
  --lip: 5px; margin-top: 1.75rem; margin-bottom: var(--lip);   /* wie der Weiter-Knopf der Quiz: blau mit Kante, drückt sich ein */
  border-radius: 1.125rem; background: #7db6f2; color: #0c2a4d; font-weight: 700; letter-spacing: -0.005em;
  box-shadow: 0 var(--lip) 0 #4f88c8;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms ease;
}
.nf-cta:active { transform: translateY(var(--lip)); box-shadow: 0 0 0 #4f88c8; }
.nf-cta:focus-visible { outline: 2px solid #4f88c8; outline-offset: 3px; }
@media (hover: hover) { .nf-cta:hover { background: #62a3ec; color: #0c2a4d; } }
.nf-title, .nf-sub, .nf-cta { animation: nf-fade 500ms ease 1500ms backwards; }
@keyframes nf-fade { from { opacity: 0; transform: translateY(0.375rem); } }
.nf-legal { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 1.5rem; margin: 0; padding: 1rem; font-size: 0.8125rem; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .nf-ball, .nf-shadow, .nf-col, .nf-title, .nf-sub, .nf-cta { animation: none; }
  .nf-col { transform: translateY(calc(var(--n) * -1em)); }
}
/* Ohne JavaScript bleibt die Seite leer: dieser Hinweis steht dann ganz oben */
.ap-nojs { max-width: 26rem; margin: 0 auto; padding: 5rem var(--gutter) 2rem; text-align: center; }
.ap-nojs img { display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem; animation: nojs-rock 2.4s ease-in-out infinite alternate; }
.ap-nojs-t { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.ap-nojs-s { margin: 0.5rem 0 0; font-size: 1.0625rem; color: var(--ink-2); }
body:has(.ap-nojs) main.game { display: none; }   /* Spielseiten ohne JavaScript: nur der Hinweis, kein totes Eingabefeld */
@keyframes nojs-rock { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .ap-nojs img { animation: none; } }