/* ============================================================================
   epaminondas.eu – Design-System (app.css)
   ----------------------------------------------------------------------------
   - Keine externen Fonts, Bilder oder CDNs: System-Font-Stack, nur lokale Assets.
   - Light/Dark über [data-theme="light"|"dark"]; ohne Attribut folgt das Design
     der OS-Einstellung (prefers-color-scheme).
   - WCAG 2.1 AA: alle Text-/UI-Kontraste >= 4.5:1 (Normaltext) bzw. 3:1 (Large/UI).
   - prefers-reduced-motion wird vollständig respektiert (ein Block am Ende).
   - CSS-Custom-Properties sind die einzige Styling-Quelle für Komponenten
     („Tokens"), damit Themes ohne Regel-Duplikation funktionieren.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Design-Tokens
   ---------------------------------------------------------------------------- */
:root {
  /* --- Markenfarben („Epaminondas": Theben, Bronze, Terrakotta, Olivenlaub) --- */
  --brand-50:  #fbf3e6;
  --brand-100: #f3dfc0;
  --brand-200: #e5c48e;
  --brand-300: #d5a763;
  --brand-400: #c98a4b;
  --brand-500: #b06a2c;
  --brand-600: #7d431a;   /* Primär-Button/Text-Akzent (Kontrast zu Weiß ~7.8:1) */
  --brand-700: #663712;
  --brand-800: #52290e;
  --brand-900: #3f210d;
  /* Buttons mit Markenfarbe: eigener Text/BG je Theme (WCAG AA in beiden) */
  --btn-primary-bg: #7d431a;
  --btn-primary-bg-hover: #663712;
  --btn-primary-text: #fffdf7;
  --olive-600: #5c7337;
  --olive-700: #465a29;

  /* --- Neutrale Flächen & Text (Light) --- */
  --bg:            #f7f3ea;
  --bg-subtle:     #efe8d8;
  --surface:       #fffdf7;
  --surface-alt:   #f2ecdd;
  --border:        #d8ccb6;
  --border-strong: #b3a488;
  --text:          #221b12;
  --text-muted:    #5b5144;
  --text-faint:    #7a6f5e;

  /* --- Status --- */
  --info:      #24598c;
  --info-bg:   #e3eef9;
  --success:   #2f6b2f;
  --success-bg:#e5f2e5;
  --warning:   #8a5a00;
  --warning-bg:#fbf0d9;
  --danger:    #a92d20;
  --danger-bg: #f9e5e2;

  /* --- Interaktion --- */
  --focus:      #2e6fd8;
  --selection:  rgba(46, 111, 216, 0.22);

  /* --- Schatten & Effekte --- */
  --shadow-sm: 0 1px 2px rgba(63, 33, 13, 0.08), 0 1px 3px rgba(63, 33, 13, 0.06);
  --shadow-md: 0 4px 12px rgba(63, 33, 13, 0.12), 0 2px 4px rgba(63, 33, 13, 0.08);
  --shadow-lg: 0 12px 32px rgba(63, 33, 13, 0.18), 0 4px 10px rgba(63, 33, 13, 0.10);

  /* --- Typografie & Abstände --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
               "Liberation Mono", Menlo, monospace;
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-md: 1rem;        /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.375rem;    /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fs-4xl: 3rem;       /* 48px */
  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-loose: 1.7;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --container: 72rem;
  --container-narrow: 46rem;

  /* --- Layout-Dimensionen --- */
  --navbar-height: 4rem;
  --footer-bg: #241c12;

  color-scheme: light;
}

/* Dark-Theme: nur die Tokens tauschen, keine Regel-Duplikate. */
[data-theme="dark"] {
  --brand-100: #4a2c12;
  --brand-200: #6f3c17;
  --brand-300: #8a4b1d;
  --brand-400: #c98a4b;
  --brand-500: #d9a05c;
  --brand-600: #e0ab6d;
  --brand-700: #ecc28f;
  --brand-800: #f3dfc0;
  --brand-900: #fbf3e6;
  --olive-600: #9fb26c;
  --olive-700: #b8c88a;

  --bg:            #17130d;
  --bg-subtle:     #1e1912;
  --surface:       #221c14;
  --surface-alt:   #2a231a;
  --border:        #3b3226;
  --border-strong: #57493a;
  --text:          #efe8da;
  --text-muted:    #b7ab94;
  --text-faint:    #8d8271;

  --info:      #7fb0e2;
  --info-bg:   #1c2c3c;
  --success:   #8fc78f;
  --success-bg:#1e331e;
  --warning:   #e0b25c;
  --warning-bg:#3a2e15;
  --danger:    #e08374;
  --danger-bg: #3d221e;

  --focus:      #6ea8ff;
  --selection:  rgba(110, 168, 255, 0.26);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);

  --footer-bg: #100d08;

  color-scheme: dark;
}

/* Ohne explizites data-theme: OS-Einstellung übernehmen (nur Token-Tausch). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --brand-100: #4a2c12;
    --brand-200: #6f3c17;
    --brand-300: #8a4b1d;
    --brand-400: #c98a4b;
    --brand-500: #d9a05c;
    --brand-600: #e0ab6d;
    --brand-700: #ecc28f;
    --brand-800: #f3dfc0;
    --brand-900: #fbf3e6;
    --btn-primary-bg: #c98a4b;
    --btn-primary-bg-hover: #e0ab6d;
    --btn-primary-text: #241505;
    --olive-600: #9fb26c;
    --olive-700: #b8c88a;
    --bg:            #17130d;
    --bg-subtle:     #1e1912;
    --surface:       #221c14;
    --surface-alt:   #2a231a;
    --border:        #3b3226;
    --border-strong: #57493a;
    --text:          #efe8da;
    --text-muted:    #b7ab94;
    --text-faint:    #8d8271;
    --info:      #7fb0e2;
    --info-bg:   #1c2c3c;
    --success:   #8fc78f;
    --success-bg:#1e331e;
    --warning:   #e0b25c;
    --warning-bg:#3a2e15;
    --danger:    #e08374;
    --danger-bg: #3d221e;
    --focus:      #6ea8ff;
    --selection:  rgba(110, 168, 255, 0.26);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
    --footer-bg: #100d08;
    color-scheme: dark;
  }
}

/* ----------------------------------------------------------------------------
   2. Reset & Basis
   ---------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Hintergrund bereits auf <html>, damit Messwerkzeuge nie auf Weiß
     zurückfallen (effectiveBg) und kein Theme-Flash entsteht. */
  background-color: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p {
  text-wrap: pretty;
}

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

a:hover {
  color: var(--brand-700);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--selection);
}

/* ----------------------------------------------------------------------------
   3. Layout-Helfer
   ---------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-7);
}

.section--alt {
  background: var(--bg-subtle);
  border-block: 1px solid var(--border);
}

.section__head {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-6);
}

.section__kicker {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--space-2);
}

.section__title {
  margin-bottom: var(--space-3);
}

.section__subtitle {
  color: var(--text-muted);
  font-size: var(--fs-lg);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

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

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

/* Barrierefreiheit: nur für Screenreader, Skip-Link, Live-Region */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100%;
  z-index: 1000;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--focus);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-4);
}

/* ----------------------------------------------------------------------------
   4. Buttons
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 160ms ease, border-color 160ms ease,
              color 160ms ease, transform 100ms ease, box-shadow 160ms ease;
}

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

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}

.btn--secondary {
  background: transparent;
  border-color: var(--brand-600);
  color: var(--brand-600);
}

.btn--secondary:hover {
  background: var(--brand-100);
  border-color: var(--brand-700);
  color: var(--brand-700);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--bg-subtle);
  color: var(--brand-600);
}

.btn--danger {
  background: var(--danger);
  color: #fffdf7;
}

.btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 85%, black);
  color: #fffdf7;
}

.btn--sm { padding: 0.4rem 0.85rem; font-size: var(--fs-sm); }
.btn--lg { padding: 0.85rem 1.6rem; font-size: var(--fs-lg); }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn .icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

/* ----------------------------------------------------------------------------
   5. Badges & Pills
   ---------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.75em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.badge--brand { background: var(--brand-100); border-color: var(--brand-300); color: var(--brand-700); }
.badge--info  { background: var(--info-bg);  border-color: color-mix(in srgb, var(--info) 40%, transparent); color: var(--info); }
.badge--ok    { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); }
.badge--warn  { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); }
.badge--bad   { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }

/* ----------------------------------------------------------------------------
   6. Cards
   ---------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.card--interactive {
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--brand-100);
  color: var(--brand-700);
  margin-bottom: var(--space-4);
}

.card__icon .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.card__title {
  margin-bottom: var(--space-2);
}

.card__text {
  color: var(--text-muted);
}

/* ----------------------------------------------------------------------------
   7. Formulare
   ---------------------------------------------------------------------------- */
.form-field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.form-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--text-faint);
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--selection);
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.form-input[aria-invalid="true"]:focus-visible,
.form-select[aria-invalid="true"]:focus-visible,
.form-textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}

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

.form-error {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.form-check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  flex: none;
  accent-color: var(--brand-600);
}

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

.form-row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 40rem) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------------------------------------
   8. Alerts
   ---------------------------------------------------------------------------- */
.alert {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--fs-sm);
}

.alert__icon {
  flex: none;
  font-weight: 700;
}

.alert--info    { background: var(--info-bg);    border-color: color-mix(in srgb, var(--info) 45%, transparent); color: var(--info); }
.alert--success { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 45%, transparent); color: var(--success); }
.alert--warning { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 45%, transparent); color: var(--warning); }
.alert--danger  { background: var(--danger-bg);  border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }

/* ----------------------------------------------------------------------------
   8b. Formulare (Lead-Klassen), Flash-Messages, Consent-Banner
   ---------------------------------------------------------------------------- */
.auth-page {
  padding-block: var(--space-7);
}

.auth-page .form {
  margin-top: var(--space-5);
}

.form__field {
  margin-bottom: var(--space-5);
}

.form__field > label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}

.form__field--check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.form__field--check input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  accent-color: var(--brand-600);
}

.auth-page__links {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* Flash-Messages */
.flash {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}

.flash ul {
  margin: 0;
  padding-left: 1.25rem;
}

.flash--error {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
}

.flash--success {
  background: var(--success-bg);
  border-color: color-mix(in srgb, var(--success) 45%, transparent);
  color: var(--success);
}

/* Consent-Banner (TTDSG: „Nur notwendige" GLEICHRANGIG, kein Dark Pattern) */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}

.consent-banner__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
}

.consent-banner__text {
  flex: 1 1 20rem;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* Gleichrangiger Ablehnen-Button (identische Größe/Gewichtung wie Akzeptieren) */
.btn--consent-equal {
  background: var(--surface-alt);
  border: 2px solid var(--border-strong);
  color: var(--text);
}

.btn--consent-equal:hover {
  background: var(--bg-subtle);
  border-color: var(--text-faint);
  color: var(--text);
}

.consent-banner__link {
  font-size: var(--fs-sm);
}

@media (max-width: 40rem) {
  .consent-banner__actions .btn {
    flex: 1 1 auto;
  }
}

/* Level-Auswahl (Bot-Seite) */
.level-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.level-picker .btn {
  min-width: 3rem;
}

.btn.is-active {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn.is-active:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text);
}

/* Einfache Listen ohne Bullets */
.list-plain {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

/* ----------------------------------------------------------------------------
   8c. Partie-View (game/show): Layout, Uhren, Zugliste, Chat, Aktionen
   ---------------------------------------------------------------------------- */
.game-layout {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 60rem) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  }
}

.game-player {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
}

.clock {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.clock__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.clock__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.clock--active {
  border-color: var(--brand-500);
  box-shadow: inset 0 0 0 1px var(--brand-500);
}

.clock--active .clock__value {
  color: var(--brand-600);
}

.move-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  max-height: 18rem;
  overflow-y: auto;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.move-list li {
  display: contents;
}

.move-list .move-list__ply {
  color: var(--text-faint);
  text-align: right;
}

.chat-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: var(--space-2);
  max-height: 14rem;
  overflow-y: auto;
  font-size: var(--fs-sm);
}

.chat-list li {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
}

.chat-list .chat__handle {
  font-weight: 700;
  color: var(--brand-600);
}

.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.game-status {
  margin-top: var(--space-3);
  min-height: 1.5rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.game-result {
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--fs-lg);
  font-weight: 700;
}

/* Analyse-Seite: 1 Spalte mobil, Brett + Panel ab 60rem nebeneinander */
.analysis-layout {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 60rem) {
  .analysis-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* ----------------------------------------------------------------------------
   9. Modal (HTML <dialog>)
   ---------------------------------------------------------------------------- */
dialog.modal {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: min(32rem, calc(100vw - 2rem));
  width: 100%;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

dialog.modal::backdrop {
  background: rgba(10, 7, 3, 0.6);
  backdrop-filter: blur(2px);
}

.modal__body {
  padding: var(--space-5);
}

.modal__title {
  margin-bottom: var(--space-3);
}

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ----------------------------------------------------------------------------
   10. Navbar
   ---------------------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Solider Hintergrund (keine Transparenz/Blur): stabile Kontrastmessung
     und sauberes Sticky-Verhalten. */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--navbar-height);
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: var(--fs-lg);
  margin-right: auto;
}

.navbar__brand:hover {
  color: var(--text);
}

.navbar__brand .logo {
  height: 2rem;
  width: auto;
}

.navbar__brand .accent {
  color: var(--brand-600);
}

/* Footer-Hintergrund ist in beiden Themes dunkel → heller Akzent nötig */
.footer__brand .accent {
  color: var(--brand-400);
}

.navbar__links {
  display: none;
}

.navbar__menu {
  position: relative;
}

.navbar__menu summary {
  list-style: none;
  cursor: pointer;
}

.navbar__menu summary::-webkit-details-marker {
  display: none;
}

.navbar__menu-content {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 14rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: grid;
  gap: 2px;
}

.navbar__menu-content a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}

.navbar__menu-content a:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

@media (min-width: 60rem) {
  .navbar__links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  .navbar__links a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
  }

  .navbar__links a:hover {
    color: var(--brand-600);
    text-decoration: underline;
  }

  .navbar__menu { display: none; }
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.navbar__actions form,
.navbar__logout {
  display: inline-flex;
  margin: 0;
}

/* Das Hamburger-<summary> trägt .btn--ghost, muss aber IMMER sichtbar bleiben. */
.navbar__menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navbar__actions .btn--ghost:not(summary) {
  display: none;
}

@media (min-width: 40rem) {
  .navbar__actions .btn--ghost:not(summary) {
    display: inline-flex;
  }
}

/* Profil-Link (eingeloggt) */
.navbar__profile {
  display: none;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar__profile:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .navbar__profile {
    display: inline-block;
  }
}

/* Primär-CTA: auf kleinen Screens ins mobile Menü verlagert (kein Überlauf) */
.navbar__cta {
  display: none;
}

@media (min-width: 40rem) {
  .navbar__cta {
    display: inline-flex;
  }
}

/* Abmelden-/Menü-Buttons in der mobilen Navigation */
.navbar__menu-content .navbar__menu-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.navbar__menu-content .navbar__menu-link:hover {
  background: var(--bg-subtle);
}

/* Theme-Umschalter */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--text-faint);
}

.theme-toggle .icon { width: 1.2rem; height: 1.2rem; }
.theme-toggle .icon--moon { display: none; }
[data-theme="dark"] .theme-toggle .icon--sun { display: none; }
[data-theme="dark"] .theme-toggle .icon--moon { display: block; }

/* ----------------------------------------------------------------------------
   11. Hero
   ---------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-7) var(--space-8);
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
  }
}

.hero__title {
  font-size: var(--fs-3xl);
  margin-block: var(--space-3) var(--space-4);
}

@media (min-width: 60rem) {
  .hero__title { font-size: var(--fs-4xl); }
}

.hero__title .accent {
  color: var(--brand-600);
}

.hero__subtitle {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  max-width: 36rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__note {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ----------------------------------------------------------------------------
   12. Regeln-Schritte
   ---------------------------------------------------------------------------- */
.rules-list {
  display: grid;
  gap: var(--space-4);
  counter-reset: rule;
}

.rules-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.rules-list__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.rules-list__title {
  margin-bottom: var(--space-1);
}

.rules-list__text {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------------------
   13. CTA-Band
   ---------------------------------------------------------------------------- */
.cta {
  background:
    radial-gradient(60rem 30rem at 85% 10%, color-mix(in srgb, var(--brand-400) 26%, transparent), transparent 60%),
    linear-gradient(140deg, var(--brand-800), var(--brand-900));
  color: #f6efdf;
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}

.cta__title {
  color: #f6efdf;
  margin-bottom: var(--space-3);
}

.cta__text {
  color: #d9c9ab;
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.cta .btn--primary {
  background: var(--brand-400);
  color: #241505;
}

.cta .btn--primary:hover {
  background: var(--brand-500);
}

.cta .btn--secondary {
  border-color: #d9c9ab;
  color: #f6efdf;
}

.cta .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #f6efdf;
}

/* ----------------------------------------------------------------------------
   14. Footer
   ---------------------------------------------------------------------------- */
.footer {
  background: var(--footer-bg);
  color: #cbbfa8;
  padding-block: var(--space-7);
  font-size: var(--fs-sm);
}

.footer a {
  color: #e8dcc2;
  text-decoration: none;
}

.footer a:hover {
  color: #fffdf7;
  text-decoration: underline;
}

.footer__inner {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fffdf7;
  font-weight: 800;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-3);
  text-decoration: none;
}

.footer__brand:hover {
  color: #fffdf7;
  text-decoration: none;
}

.footer__brand .logo {
  height: 1.75rem;
  width: auto;
}

.footer__tagline {
  color: #a99a7e;
  max-width: 20rem;
}

.footer__col-title {
  color: #fffdf7;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid #3a3225;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  justify-content: space-between;
  color: #a99a7e;
}

/* ----------------------------------------------------------------------------
   15. Tabellen
   ---------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-sm);
}

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

.table th {
  font-weight: 700;
  background: var(--bg-subtle);
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--surface-alt);
}

/* ----------------------------------------------------------------------------
   16. Brett (board.js) – Rahmen, Themes & UI-Zustände
   ---------------------------------------------------------------------------- */
.board-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
}

.board-frame--hero {
  box-shadow: var(--shadow-lg);
}

/* Container, in den board.js das SVG einfügt. */
.ep-board {
  --board-light:  #efdcb8;   /* helle Felder */
  --board-dark:   #c8a26b;   /* dunkle Felder */
  --board-coord:  #6b5b41;   /* Koordinaten-Beschriftung */
  --board-line:   #a58a5c;   /* Gitterlinien */
  --stone-white:  #f8f4e6;
  --stone-white-edge: #26201a;
  --stone-black:  #211d17;
  --stone-black-edge: #0a0806;
  --board-select: #2e6fd8;
  --board-capture: #c03020;
  position: relative;
  width: 100%;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.ep-board svg {
  width: 100%;
  height: auto;
  display: block;
}

.ep-board text {
  font-family: var(--font-sans, sans-serif);
  fill: var(--board-coord);
  font-weight: 600;
}

/* Koordinaten passen sich dem Theme an */
.ep-board .ep-label--alt {
  fill: color-mix(in srgb, var(--board-coord) 55%, var(--board-light));
}

/* Feld-Hover (nur interaktiv) */
.ep-board.ep-interactive .ep-cell {
  cursor: pointer;
}

.ep-board.ep-interactive .ep-cell:hover .ep-cell-bg {
  filter: brightness(1.05);
}

/* Auswahl & Phalanx-Linien-Highlight */
.ep-board .ep-cell--line .ep-cell-bg {
  fill: color-mix(in srgb, var(--board-select) 14%, var(--board-light));
}

.ep-board .ep-cell--line-dark .ep-cell-bg {
  fill: color-mix(in srgb, var(--board-select) 14%, var(--board-dark));
}

.ep-board .ep-cell--from .ep-cell-bg {
  fill: color-mix(in srgb, var(--board-select) 30%, var(--board-light));
}

.ep-board .ep-cell--from-dark .ep-cell-bg {
  fill: color-mix(in srgb, var(--board-select) 30%, var(--board-dark));
}

/* Legale Ziele: Punkt auf leerem Feld */
.ep-board .ep-target {
  fill: color-mix(in srgb, var(--board-select) 55%, transparent);
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 120ms ease;
}

.ep-board .ep-marker--hover .ep-target {
  transform: scale(1.6);
}

/* Schlag-Ziel: Ring + Zähler-Badge */
.ep-board .ep-target-capture {
  fill: none;
  stroke: var(--board-capture);
  stroke-width: 5;
  pointer-events: none;
}

.ep-board .ep-badge {
  font-weight: 800;
  fill: #fffdf7;
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: central;
}

.ep-board .ep-badge-bg {
  fill: var(--board-capture);
  pointer-events: none;
}

/* Stein-Bewegung: transform-Transition (150–250 ms), Fade für Schläge */
.ep-board .ep-stone {
  transition: transform 200ms cubic-bezier(0.25, 0.6, 0.35, 1),
              opacity 200ms ease;
}

.ep-board .ep-stone--captured {
  opacity: 0;
}

.ep-board .ep-stone--selected .ep-stone-body {
  stroke: var(--board-select);
  stroke-width: 7;
}

/* Steine sind Drag-Ziele (Pointer Events; kein Text-Selektieren/Scrollen) */
.ep-board.ep-interactive .ep-stone {
  touch-action: none;
  cursor: grab;
}

.ep-board.ep-interactive .ep-stone:active {
  cursor: grabbing;
}

/* Tastatur-Cursor-Zelle */
.ep-board .ep-cell--cursor .ep-cell-bg {
  stroke: var(--board-select);
  stroke-width: 6;
}

/* Board-Themes (data-board-theme auf dem .ep-board-Container) */
.ep-board[data-board-theme="olive"] {
  --board-light: #d8d5b4;
  --board-dark:  #93a06f;
  --board-coord: #4c5232;
  --board-line:  #6f7a4e;
}

.ep-board[data-board-theme="slate"] {
  --board-light: #c3cfda;
  --board-dark:  #74879b;
  --board-coord: #34485c;
  --board-line:  #51677c;
}

.ep-board[data-board-theme="walnut"] {
  --board-light: #d8b48c;
  --board-dark:  #8f5e34;
  --board-coord: #4e3317;
  --board-line:  #6d4726;
}

.ep-board[data-board-theme="midnight"] {
  --board-light: #4a5468;
  --board-dark:  #232a38;
  --board-coord: #aeb9cf;
  --board-line:  #6b768c;
  --stone-white: #ece7da;
  --stone-black: #0d0f14;
  --stone-black-edge: #000000;
}

/* Live-Region (Screenreader-Ansagen) bleibt visuell unsichtbar. */
.ep-board .ep-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   17. Utilities
   ---------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.d-flex { display: flex; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.w-100 { width: 100%; }

.is-hidden { display: none !important; }

/* ----------------------------------------------------------------------------
   18. Sehr kleine Screens (ab 360 px) & große Screens
   ---------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  :root {
    --navbar-height: 3.5rem;
  }

  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  .hero__title { font-size: var(--fs-2xl); }
  .section { padding-block: var(--space-6); }
  .container { padding-inline: var(--space-4); }
  .hero__actions .btn { flex: 1 1 auto; }
  .cta { padding: var(--space-5); }
}

@media (min-width: 80rem) {
  h1 { font-size: clamp(3rem, 4.5vw, 4rem); }
}

/* ----------------------------------------------------------------------------
   19. Reduced Motion – ein Block, vollständige Deaktivierung von Bewegung
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .btn:active,
  .card--interactive:hover {
    transform: none;
  }
}