:root {
  --bg: #161d27;
  --panel: #1f2937;
  --panel2: #273244;
  --text: #eef0f3;
  --muted: #9aa8bc;
  --accent: #81b64c;      /* chess.com-Grün */
  --accent-text: var(--accent);
  --on-accent: #14210b;
  --success-text: #b9dc9d;
  --accent-dark: #4f7a2c;
  --accent2: #f7b32b;     /* freundliches Amber */
  --info: #4aa8ff;
  --sq-light: #ecd9b9;
  --sq-dark: #b08662;
  --danger: #e05d5d;
  --line: #364357;
  --shadow: 0 12px 30px rgba(0, 0, 0, .24);
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
#faq-account-login li { overflow-wrap: anywhere; }
html { background: var(--bg); }
html[data-theme="arena"] { background: #f3f7fb; }
html[data-theme="intelligence"] { background: #111418; }
html[data-theme="cognitive"] { background: #f7f8f7; }
body {
  background: radial-gradient(1100px 500px at 75% -80px, #21304a 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Drei vollwertige Produktoberflaechen ---------- */
body.theme-arena {
  color-scheme: light;
  --bg: #f3f7fb;
  --panel: #ffffff;
  --panel2: #e7eef6;
  --text: #17263a;
  --muted: #5d6f86;
  --accent: #39a84b;
  --accent-text: #1e6b2b;
  --success-text: #1e6b2b;
  --accent-dark: #238536;
  --accent2: #205bc0;
  --info: #205bc0;
  --sq-light: #f0d9b5;
  --sq-dark: #61936b;
  --danger: #c94f4f;
  --line: #d4dfeb;
  --shadow: 0 12px 28px rgba(38, 73, 108, .12);
  --radius: 8px;
  background: #f3f7fb;
}
body.theme-intelligence {
  --on-accent: #18140c;
  color-scheme: dark;
  --bg: #111418;
  --panel: #1a1f25;
  --panel2: #242b33;
  --text: #f5f1e6;
  --muted: #adb6c1;
  --accent: #d6a84b;
  --accent-dark: #8f6b28;
  --accent2: #7aa7d8;
  --info: #7aa7d8;
  --sq-light: #d5c7a8;
  --sq-dark: #4d5961;
  --danger: #d96b5d;
  --line: #343d48;
  --shadow: 0 18px 40px rgba(0, 0, 0, .34);
  --radius: 8px;
  background: #111418;
}
body.theme-cognitive {
  --on-accent: #ffffff;
  color-scheme: light;
  --bg: #f7f8f7;
  --panel: #ffffff;
  --panel2: #e9efec;
  --text: #20312e;
  --muted: #62736f;
  --accent: #16836f;
  --accent-text: #116856;
  --success-text: #116856;
  --accent-dark: #0e6758;
  --accent2: #395d8a;
  --info: #395d8a;
  --sq-light: #e7e4db;
  --sq-dark: #718e87;
  --danger: #bd5a4a;
  --line: #d4ded9;
  --shadow: 0 8px 24px rgba(40, 65, 58, .08);
  --radius: 6px;
  background: #f7f8f7;
}
body.theme-arena .card p,
body.theme-arena .ob-step p,
body.theme-arena .glossar dd,
body.theme-cognitive .card p,
body.theme-cognitive .ob-step p,
body.theme-cognitive .glossar dd { color: #334650; }
body.theme-arena header { background: #ffffff; box-shadow: 0 2px 12px rgba(38, 73, 108, .08); }
body.theme-intelligence header { border-bottom-color: var(--accent); }
body.theme-intelligence h1,
body.theme-intelligence .content-page > h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
body.theme-intelligence .primary { color: #18140c; }
body.theme-intelligence .mode-card,
body.theme-intelligence .card { border: 1px solid var(--line); }
body.theme-cognitive header { background: #ffffff; border-bottom-width: 1px; }
body.theme-cognitive .card,
body.theme-cognitive .mode-card { box-shadow: none; border: 1px solid var(--line); }
body.theme-cognitive h1 { font-weight: 650; }
body.theme-arena .board,
body.theme-intelligence .board,
body.theme-cognitive .board { box-shadow: var(--shadow), 0 0 0 1px rgba(38, 48, 58, .24) inset; }
a.inline-link { color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; }
a.inline-link:hover { color: #ffd069; }
body.light a.inline-link:hover { color: var(--accent2); }

/* ---------- Header & Navigation ---------- */
header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 18px;
  background: var(--panel);
  border-bottom: 3px solid var(--accent);
  flex-wrap: wrap;
}
.logo {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
}
/* Variante A "weisse Plakette": Das Zeichen bleibt unveraendert und bekommt
   eine weisse Unterlage. Dadurch sieht es auf dunklem Header, im Hellmodus
   und auf jedem fremden Hintergrund identisch aus. */
.logo-image {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: #ffffff;
  padding: 6px;
  border-radius: 15px;
  box-sizing: content-box;
  /* Haarlinie: auf dem dunklen Header unsichtbar, im Hellmodus (Header ist
     dann #ffffff) trennt sie die Plakette sichtbar vom Untergrund. */
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .14);
}
.logo-word {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text);
  white-space: nowrap;
}
.logo-word b { color: var(--accent-text); font-weight: 800; }
.logo:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
#main-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: .95rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.nav-btn:hover { color: var(--text); background: var(--panel2); }
.nav-btn.active { color: #fff; background: var(--accent-dark); }
.nav-btn:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }
a.nav-btn { display: block; text-decoration: none; white-space: nowrap; }
html.public-navigation { scroll-padding-top: calc(var(--public-header-height, 160px) + 12px); }
header.public-header {
  position: sticky;
  top: 0;
  z-index: 40;
}
header.public-header.subpage-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
}
.public-header.subpage-header .logo { grid-column: 1; grid-row: 1; text-decoration: none; }
.public-header.subpage-header .locale-switch { grid-column: 2; grid-row: 1; }
.public-header.subpage-header #main-nav { grid-column: 1 / -1; grid-row: 2; min-width: 0; }

.locale-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, 34px);
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
}
.locale-switch button {
  width: 34px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}
.locale-switch button + button { border-left: 1px solid var(--line); }
.locale-switch button.active, .locale-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.design-picker-button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  color: var(--text);
  font-weight: 750;
  cursor: pointer;
}
.design-picker-button:hover, .design-picker-button:focus-visible { border-color: var(--accent); }
.header-stats { margin-left: 0; }
.header-stats span { margin-left: 14px; font-weight: 700; }
.locale-preview-note {
  width: 100%;
  padding: 8px 16px;
  background: #3a2b12;
  border-bottom: 1px solid var(--accent2);
  color: #fff0c2;
  text-align: center;
  font-size: .86rem;
  line-height: 1.4;
}

/* ---------- Seiten & Screens ---------- */
main { flex: 1; display: flex; justify-content: center; padding: 26px 16px; }
.page { display: none; max-width: 860px; width: 100%; }
.page.active { display: block; }
.screen { display: none; text-align: center; max-width: 720px; margin: 0 auto; }
.screen.active { display: block; }
.content-page { max-width: 760px; margin: 0 auto; }
.content-page h1 { margin-bottom: 10px; }
.lead { color: var(--muted); margin-bottom: 20px; font-size: 1.05rem; }

h1 { font-size: 1.9rem; margin-bottom: 12px; }
h1 small { color: var(--accent-text); font-size: 1.2rem; }
h2 { margin-bottom: 14px; }
h3 { margin: 16px 0 8px; }
h3.left { text-align: left; }

.card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  text-align: left;
}
.card.narrow { max-width: 420px; }
.card ol, .card ul { margin: 8px 0 0 20px; line-height: 1.7; }
.card p { line-height: 1.65; color: #d5dbe4; }
.card h3 { margin-top: 0; }

.science-note {
  background: var(--panel);
  border-left: 4px solid var(--accent);
  padding: 12px 16px;
  margin: 14px 0 18px;
  text-align: left;
  color: var(--muted);
  font-size: .93rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.6;
}
.science-note.small { font-size: .86rem; margin: 12px 0; }
.science-note a { color: var(--accent2); }

.page-kicker {
  color: var(--accent2);
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 6px;
}
.research-page { max-width: 940px; }
.research-lead { color: var(--muted); font-size: 1.08rem; line-height: 1.7; max-width: 760px; }
.research-summary, .research-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 30px;
}
.research-summary > div, .research-grid > article {
  background: var(--panel);
  border-top: 3px solid var(--accent);
  padding: 18px;
}
.research-summary strong { display: block; color: var(--text); margin-bottom: 8px; }
.research-summary span, .research-grid p { color: var(--muted); line-height: 1.6; }
.research-grid h3 { margin-top: 0; }
.research-steps { margin: 12px 0 24px; }
.research-steps > div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; margin: 12px 0; }
.research-steps span {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: var(--accent); color: var(--on-accent); font-weight: 800;
}
.research-steps p { margin: 2px 0 0; color: var(--muted); line-height: 1.6; }
.research-sources { padding-left: 22px; line-height: 1.65; }
.research-sources li { margin-bottom: 10px; color: var(--muted); }
.research-sources a { color: var(--accent2); white-space: nowrap; }
.research-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 14px; }
@media (max-width: 760px) {
  .research-summary, .research-grid { grid-template-columns: 1fr; }
}

.daily-line { color: var(--accent2); font-weight: 600; margin-bottom: 10px; min-height: 1.2em; }
.routine-launch {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 18px 0 24px; padding: 18px 20px;
  border-left: 4px solid var(--accent); background: var(--panel);
}
.routine-launch h2 { margin: 0 0 4px; font-size: 1.25rem; }
.routine-launch p { margin: 0; color: var(--muted); }
.attention-target { outline: 3px solid var(--accent2); outline-offset: 3px; }
@media (max-width: 680px) {
  .routine-launch { align-items: stretch; flex-direction: column; }
  .routine-launch .big { width: 100%; }
}

/* ---------- Levelraster ---------- */
#level-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.level-btn {
  padding: 10px 4px;
  background: var(--panel);
  border: 2px solid var(--panel2);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  transition: transform .1s, border-color .15s;
}
.level-btn:hover:not(.locked) { transform: translateY(-2px); }
.level-btn small { display: block; color: var(--muted); font-size: .7rem; margin-top: 2px; font-weight: 400; }
.level-btn.selected { border-color: var(--accent); background: #2b3a24; }
.level-btn.locked { color: var(--muted); cursor: not-allowed; }
body.light .level-btn.selected { background: var(--panel2); }

.mode-row { margin: 8px 0 16px; color: var(--muted); font-size: .9rem; text-align: left; }

/* ---------- Buttons ---------- */
button.primary {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  border: none;
  border-bottom: 4px solid var(--accent-dark);
  padding: 12px 30px;
  font-size: 1rem;
  border-radius: 14px;
  cursor: pointer;
  margin: 6px 4px;
  transition: filter .1s, transform .05s;
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.primary:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
button.primary:disabled { opacity: .45; cursor: not-allowed; }
button.primary.big { font-size: 1.12rem; padding: 14px 38px; }
button.ghost {
  background: transparent;
  color: var(--muted);
  border: 2px solid var(--panel2);
  padding: 10px 20px;
  border-radius: 14px;
  cursor: pointer;
  margin: 6px 4px;
  font-weight: 600;
}
button.ghost:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
button.ghost.small { padding: 7px 14px; font-size: .85rem; }
button.ghost.small.active { border-color: var(--danger); color: var(--danger); }
.cloud-account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.account-access-card { padding: 20px; }
.local-options-card summary { cursor: pointer; font-weight: 800; font-size: 1.05rem; }
.local-options-card[open] summary { margin-bottom: 14px; }
.profile-identity { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.profile-avatar {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-size: 22px; font-weight: 800;
}
.profile-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.profile-avatar.has-photo > span { display: none; }
.avatar-upload-panel {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start;
  margin: 14px 0; padding: 14px; border: 1px solid var(--panel2); border-radius: 8px;
}
.avatar-upload-preview { width: 76px; height: 76px; background-size: cover; background-position: center; }
.avatar-upload-preview.has-photo { color: transparent; }
.avatar-file-button { display: inline-block; cursor: pointer; }
.chess-identity-settings { margin: 16px 0; padding: 14px; border: 1px solid var(--panel2); border-radius: 8px; }
.chess-identity-settings summary { cursor: pointer; font-weight: 800; }
.identity-card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; }
.identity-card { padding: 16px; border: 1px solid var(--panel2); border-radius: 8px; background: var(--panel); }
.identity-card h3 { margin-top: 0; }
.operator-avatar-preview { width: 128px; height: 128px; object-fit: cover; border-radius: 6px; display: block; margin: 10px 0; }
.verification-status { font-weight: 800; }
.status-identity_verified { color: var(--accent-text); }
.status-official_record_matched { color: #efc35a; }
.status-self_claimed { color: var(--muted); }
.title-badge { display: inline-block; padding: 3px 7px; border: 1px solid var(--accent); color: var(--accent-text); border-radius: 4px; font-size: .48em; vertical-align: middle; }

.plan-usage-status {
  min-height: 1.4em;
  margin-top: 10px;
  font-weight: 700;
}

.public-profile-settings {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid var(--panel2);
  border-radius: 8px;
}

.public-profile-settings legend {
  padding: 0 8px;
  font-weight: 800;
}

.player-profile-page {
  max-width: 920px;
}

.player-profile-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
}

.player-avatar {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  font-size: 46px;
}

.player-profile-hero h1 {
  margin: 2px 0 8px;
}

.player-stat-grid {
  margin-top: 18px;
}

@media (max-width: 560px) {
  .player-profile-hero { align-items: flex-start; gap: 12px; }
  .player-avatar { width: 64px; height: 64px; flex-basis: 64px; font-size: 34px; }
  .avatar-upload-panel { grid-template-columns: 1fr; }
}
.profile-identity-copy { min-width: 0; }
.profile-identity-copy h2 { margin: 2px 0 3px; font-size: 24px; }
.profile-identity-copy .hint { margin: 0 0 8px; overflow-wrap: anywhere; }
.profile-kicker { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.sync-status { display: inline-flex; align-items: center; gap: 6px; color: var(--success-text); font-size: 13px; font-weight: 700; }
.sync-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.profile-logout { align-self: start; }
.profile-onboarding { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--panel2); }
.profile-onboarding h3 { margin-top: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.settings-section { padding: 18px; border: 1px solid var(--panel2); background: var(--panel); border-radius: 8px; }
.settings-section h3 { margin-top: 0; }
.settings-section .danger-zone { margin-top: 20px; padding-top: 16px; border-top: 1px solid #783b3b; }
.settings-section .danger-zone h4 { color: #ffb0a8; }
.deletion-feedback { margin: 14px 0; padding: 12px; border: 1px solid var(--panel2); border-radius: 6px; }
.deletion-feedback legend { padding: 0 6px; font-weight: 700; }
.deletion-feedback textarea { width: 100%; resize: vertical; }
button.danger {
  background: transparent; border: 1px solid var(--danger); color: var(--danger);
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 700;
}
button.danger:hover { background: var(--danger); color: #fff; }
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
.ghost-link { color: var(--text); border: 2px solid var(--panel2); background: transparent; }
.ghost-link:hover { border-color: var(--muted); }

/* ---------- Timer ---------- */
.timer-bar {
  height: 12px;
  background: var(--panel2);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
}
#timer-fill, #timer-fill-recall {
  height: 100%;
  width: 100%;
  background: var(--accent2);
  transition: width .1s linear;
}
#timer-fill-recall { background: var(--danger); }

/* ---------- Brett ---------- */
.board-wrap { position: relative; display: inline-block; max-width: 100%; }
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: min(88vw, 460px);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 6px solid #52412d;
  border-radius: 10px;
  overflow: hidden;
  user-select: none;
  box-shadow: 0 14px 34px #000a, 0 0 0 1px #6b5638 inset;
}
.sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(20px, 4.8vw, 36px);
  line-height: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.board-row { display: contents; }
.board[aria-readonly="true"] .sq { cursor: default; }
.board .sq:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -5px;
  box-shadow: inset 0 0 0 7px #111;
  z-index: 3;
}
.picker button:focus-visible, .pal-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 2px #111;
}
@media (forced-colors: active) {
  .board .sq:focus-visible, .picker button:focus-visible, .pal-btn:focus-visible {
    outline-color: Highlight;
  }
}
/* SVG-Figuren: gestochen scharf in jeder Größe */
.pc-img {
  width: 88%;
  height: 88%;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 2px #0007);
}
.pc-img.ghost-pc { opacity: .38; filter: none; }
/* C3-09 WCAG 2.2: Richtig und falsch duerfen nicht NUR ueber Farbe unterschieden werden.
   Rot-Gruen-Fehlsichtigkeit betrifft rund acht Prozent der Maenner -- fuer sie waren die
   beiden Rahmen bisher praktisch gleich. Deshalb zusaetzlich ein Zeichen in der Ecke:
   Haken fuer richtig, Kreuz fuer falsch. Der Farbrahmen bleibt, er ist fuer alle anderen
   der schnellere Hinweis. */
.sq.correct::after, .sq.wrong::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.sq.correct::after { box-shadow: inset 0 0 0 3px #52b788; }
.sq.wrong::after   { box-shadow: inset 0 0 0 3px var(--danger); }
.sq.correct::before, .sq.wrong::before {
  position: absolute; top: 1px; left: 2px; z-index: 2;
  font-size: 13px; line-height: 1; font-weight: 700;
  pointer-events: none;
  /* Heller Umriss, damit das Zeichen auf hellen wie dunklen Feldern lesbar bleibt. */
  text-shadow: 0 0 2px #fff, 0 0 3px #fff;
}
#page-train.active #screen-result.active .sq.correct::before { content: "\2713"; color: #1e6b45; }
#page-train.active #screen-result.active .sq.wrong::before { content: "\2717"; color: #8c1d1d; }
.sq .ghost-pc { opacity: .38; }
.sq.drag-over { outline: 3px solid var(--accent2); outline-offset: -3px; }

/* ---------- Figuren-Picker (Klick aufs Feld) ---------- */
.picker {
  position: absolute;
  z-index: 20;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px #000a;
  display: grid;
  width: min(304px, calc(100vw - 40px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}
.picker button {
  width: 100%; height: 44px;
  font-size: 28px;
  background: var(--panel2);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
}
.picker button:hover { background: var(--accent-dark); }
.picker button.pick-remove { font-size: 18px; grid-column: span 6; width: auto; height: 34px; color: var(--danger); }
.picker button .pc-img { width: 82%; height: 82%; }

.hint { color: var(--muted); margin-top: 10px; font-size: .88rem; line-height: 1.5; }

/* ---------- Recall-Layout: Palette KLEBT neben dem Brett ---------- */
.recall-layout {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: flex-start;
}
.palette-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 10px;
}
.palette { display: grid; grid-template-columns: repeat(2, 50px); gap: 5px; margin-bottom: 10px; }
.pal-btn {
  width: 50px; height: 50px;
  font-size: 32px;
  background: var(--panel);
  border: 2px solid var(--panel2);
  border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
}
.pal-btn.selected { border-color: var(--accent2); background: #3a3423; }
.pal-btn .pc-img { width: 80%; height: 80%; }

/* Mobile controls stay in flow so they cannot cover focused board squares. */
@media (max-width: 700px) {
  header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 4px 8px;
    padding: 4px 10px;
  }
  .logo-image { width: 40px; height: 40px; padding: 5px; border-radius: 12px; }
  .logo { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .logo-word { font-size: 1.05rem; }
  #main-nav {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-wrap: nowrap;
    gap: 2px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #main-nav::-webkit-scrollbar { display: none; }
  .locale-switch { grid-column: 1; grid-row: 2; justify-self: start; margin-left: 0; }
  .design-picker-button { grid-column: 2; grid-row: 2; }
  .header-stats { grid-column: 3; grid-row: 2; white-space: nowrap; }
  .nav-btn { flex: 0 0 auto; padding: 8px 10px; }
  .design-choice-grid { grid-template-columns: 1fr; }
  .recall-layout { flex-direction: column; align-items: center; }
  .palette-wrap {
    position: static;
    width: 100%;
    background: var(--panel);
    border-top: 3px solid var(--accent);
    padding: 8px 6px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    z-index: 30;
  }
  .palette { grid-template-columns: repeat(6, 34px); gap: 3px; margin: 0; }
  .pal-btn { width: 34px; height: 34px; font-size: 22px; }
  .palette-wrap .hint { display: none; }
  #screen-recall { padding-bottom: 24px; }
}
@media (max-width: 500px) {
  header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .logo { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .locale-switch { grid-column: 1; grid-row: 2; justify-self: start; }
  .design-picker-button { grid-column: 2; grid-row: 2; }
  #main-nav { grid-row: 3; min-width: 0; }
  .header-stats { display: none; }
}

/* ---------- Ergebnis & Stats ---------- */
.result-grid { display: flex; gap: 12px; justify-content: center; margin: 16px 0; flex-wrap: wrap; }
.stat-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 20px;
  min-width: 116px;
  border-bottom: 4px solid var(--accent-dark);
}
.stat-num { font-size: 1.7rem; font-weight: 800; color: var(--accent-text); }
.stat-label { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.legend { color: var(--muted); font-size: .85rem; margin: 10px 0 14px; }

#history { text-align: left; max-width: 560px; margin: 0 auto 14px; }
.hist-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel);
  padding: 9px 14px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: .88rem;
  flex-wrap: wrap;
}
.hist-row .acc { font-weight: 800; color: var(--accent-text); }

/* Performance-Balken */
.perf-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .85rem; }
.perf-row .pl { width: 64px; color: var(--muted); text-align: right; }
.perf-bar { flex: 1; height: 18px; background: var(--panel2); border-radius: 9px; overflow: hidden; }
.perf-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); border-radius: 9px; }
.perf-row .pv { width: 48px; font-weight: 700; }
.mode-row .pl { width: 118px; }
.mode-row .pv { width: 88px; }
.activity-grid { display: grid; grid-template-columns: repeat(14, minmax(16px, 1fr)); gap: 6px; align-items: end; min-height: 92px; margin: 10px 0 18px; }
.activity-day { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: end; gap: 5px; color: var(--muted); font-size: .7rem; }
.activity-bar { width: 100%; max-width: 30px; min-height: 22px; border-radius: 4px 4px 2px 2px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.activity-bar b { color: var(--on-accent); font-size: .7rem; line-height: 1; }
.training-insights-card { max-width: none; margin: 18px 0 22px; text-align: left; }
.training-insights-card > .hint { margin-bottom: 12px; }
#training-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.training-insight { padding: 12px 14px; border-left: 4px solid var(--accent2); background: var(--bg); border-radius: 4px; }
.training-insight h4 { margin-bottom: 5px; font-size: .98rem; }
.training-insight p { color: var(--muted); line-height: 1.55; margin: 4px 0; }
.training-insight b { color: var(--text); }
.insight-action { margin-top: 8px; padding: 7px 10px; font-size: .78rem; }
.insight-empty { grid-column: 1 / -1; color: var(--muted); line-height: 1.6; }
@media (max-width: 700px) { #training-insights { grid-template-columns: 1fr; } }
.operator-entry { margin-top: 24px; border-left: 4px solid var(--info); }

/* ---------- Freies Training ---------- */
.free-panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: 20px;
  text-align: left;
}
.free-panel h3 { margin-top: 0; }
.free-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.free-row label { color: var(--muted); font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
.free-row input, .form-label input {
  width: 130px;
  padding: 9px;
  background: var(--bg);
  border: 2px solid var(--panel2);
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
}
.form-label { display: block; color: var(--muted); font-size: .88rem; margin-bottom: 12px; }
.form-label input { width: 100%; margin-top: 4px; }

.cancellation-form { max-width: 720px; }
.cancellation-form select,
.cancellation-form textarea { width: 100%; margin-top: 4px; }
.cancel-receipt { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.cancel-receipt pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.55; color: var(--text); }

/* ---------- Preise ---------- */
.pricing-page { max-width: 1120px; }
.pricing-content { max-width: none; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
  margin: 22px 0 18px;
}
.price-card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 20px;
  width: auto;
  min-width: 0;
  text-align: center;
  position: relative;
  border: 2px solid var(--panel2);
  display: flex;
  flex-direction: column;
}
.price-card.featured { border-color: var(--accent2); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent2) 30%, transparent); }
.price-card .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent2); color: #201a05; font-weight: 800; font-size: .75rem;
  padding: 3px 12px; border-radius: 10px;
}
.price-card .price { font-size: 2rem; font-weight: 800; color: var(--accent-text); margin: 8px 0 2px; }
.price-card .price span { font-size: .9rem; color: var(--muted); font-weight: 400; }
.price-alt { color: var(--accent2); font-size: .85rem; margin-bottom: 6px; }
.price-card ul { list-style: none; margin: 12px 0; padding: 0; text-align: left; }
.price-card li { padding: 5px 0; border-bottom: 1px solid var(--panel2); font-size: .9rem; }
.page.active .price-card li::before { content: "\2713 "; color: var(--accent-text); font-weight: 800; }
.price-card > button { margin-top: auto; }
.premium-legal-consent { align-items: flex-start; line-height: 1.55; text-align: left; overflow-wrap: anywhere; }
.premium-legal-consent input { flex: 0 0 auto; margin-top: 4px; }
.premium-buy-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: auto; }
.premium-buy-actions button { width: 100%; min-height: 46px; }
#premium-buy-status { min-height: 2.6em; margin-bottom: 0; }
.premium-checkout-fallback { width: 100%; margin-top: 10px; text-align: center; border: 1px solid var(--accent2); }

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  .price-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card:last-child { grid-column: auto; }
}

/* ---------- Konto-Tabs ---------- */
.acct-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn {
  background: var(--panel);
  border: 2px solid var(--panel2);
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}
.tab-btn.active { color: #fff; border-color: var(--accent); background: #2b3a24; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

@media (max-width: 720px) {
  .profile-identity { grid-template-columns: 52px minmax(0, 1fr); }
  .profile-avatar { width: 52px; height: 52px; font-size: 18px; }
  .profile-logout { grid-column: 1 / -1; justify-self: start; }
  .settings-grid { grid-template-columns: 1fr; }
}

footer {
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
  padding: 14px;
  border-top: 1px solid var(--panel2);
}
footer a { margin: 0 4px; color: var(--accent2); }

/* ---------- Modus-Karten (Tages-Challenge, Wissenschafts-Check, Schwächen) ---------- */
.mode-cards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 18px 0; }
.mode-card {
  background: var(--panel);
  border: 2px solid var(--panel2);
  border-radius: var(--radius);
  padding: 16px 14px 12px;
  width: 218px;
  text-align: center;
  transition: transform .12s, border-color .15s;
}
.mode-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.mc-icon { font-size: 2rem; }
.mode-card h3 { margin: 6px 0 4px; font-size: 1.02rem; }
.mode-card p { color: var(--muted); font-size: .82rem; line-height: 1.45; min-height: 3.4em; }
.mode-card .primary { padding: 9px 18px; font-size: .9rem; }
.mc-status { color: var(--accent2); font-size: .8rem; min-height: 1.1em; margin-top: 4px; font-weight: 600; }

/* ---------- Brett-Koordinaten ---------- */
.sq .coord {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  /* C3-08 WCAG 2.2 Kontrast: Die Koordinaten waren in der jeweils anderen Feldfarbe gesetzt
     (#b08662 auf #ecd9b9 = 2,36:1) und zusaetzlich auf opacity .75 gedimmt. Gefordert sind
     4,5:1. Jetzt dunkles bzw. helles Grau mit voller Deckkraft; der Text bleibt dezent,
     weil er klein und in der Ecke steht, ist aber lesbar. */
  opacity: 1;
}
.sq .coord.file { right: 3px; bottom: 2px; }
.sq .coord.rank { left: 3px; top: 2px; }
.sq.light .coord { color: #4a3728; }   /* 8,13:1 auf #ecd9b9 */
.sq.dark  .coord { color: #2f2418; }   /* 4,64:1 auf #b08662 -- heller Text kann hier
                                          rechnerisch keine 4,5:1 erreichen, deshalb dunkel */
body.theme-arena .sq.dark .coord { color: #172014; }
body.theme-cognitive .sq.dark .coord { color: #172014; }
body.theme-intelligence .sq.dark .coord { color: #ffffff; }

/* ---------- 3-2-1 Countdown ---------- */
.countdown-overlay {
  position: absolute;
  inset: 0;
  background: #161d27ee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5.5rem;
  font-weight: 800;
  color: #ffffff;
  border-radius: 8px;
  z-index: 15;
}

/* ---------- Wissenschafts-Check ---------- */
.sci-bars { max-width: 520px; margin: 18px auto; }
.sci-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sci-label { width: 140px; text-align: right; color: var(--muted); font-size: .9rem; }
.sci-bar { flex: 1; height: 26px; background: var(--panel2); border-radius: 13px; overflow: hidden; }
.sci-bar > div { height: 100%; border-radius: 13px; width: 0; transition: width .8s ease; }
.sci-bar .real { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.sci-bar .random { background: linear-gradient(90deg, #7a6a35, var(--accent2)); }
.sci-val { width: 52px; font-weight: 800; text-align: left; }

/* ---------- Onboarding & Toast ---------- */
.overlay {
  position: fixed; inset: 0;
  background: #0009;
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.overlay-card {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 18px;
  padding: 26px 24px;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 20px 60px #000c;
}
.ob-steps { text-align: left; margin: 18px 0; }
.ob-step { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ob-num {
  background: var(--accent); color: var(--on-accent);
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0;
}
.ob-step p { color: #d5dbe4; line-height: 1.5; font-size: .93rem; }

.toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  overflow: auto;
  overflow-wrap: anywhere;
  font-size: .9rem;
  line-height: 1.4;
  background: var(--panel);
  border: 2px solid var(--accent2);
  color: var(--text);
  padding: 12px 22px;
  border-radius: 14px;
  font-weight: 700;
  z-index: 120;
  box-shadow: 0 8px 30px #000a;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Abzeichen ---------- */
#badge-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.badge-card {
  background: var(--panel);
  border: 2px solid var(--panel2);
  border-radius: var(--radius);
  padding: 12px;
  width: 150px;
  text-align: center;
}
.badge-card.earned { border-color: var(--accent2); }
.badge-card .b-icon { font-size: 1.9rem; }
.badge-card.locked { opacity: .38; filter: grayscale(1); }
.badge-card h4 { font-size: .85rem; margin: 6px 0 2px; }
.badge-card p { font-size: .72rem; color: var(--muted); line-height: 1.35; }

/* ---------- Sparkline & Auswahl ---------- */
.learning-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 10px 0 20px;
}
.learning-metric {
  min-height: 112px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--panel2);
  border-bottom: 3px solid var(--accent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.learning-metric span { color: var(--muted); font-size: .8rem; }
.learning-metric strong { color: var(--accent-text); font-size: 1.25rem; }
.learning-metric small { color: var(--muted); line-height: 1.35; }
#perf-spark { min-height: 76px; overflow-x: auto; margin-bottom: 18px; }
#perf-spark svg { display: block; width: 100%; min-width: 620px; height: 150px; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.spark-grid { stroke: #3b4656; stroke-width: 1; stroke-dasharray: 4 5; }
.spark-axis, .spark-date { fill: var(--muted); font-size: 11px; }
.spark-point circle { fill: var(--accent2); stroke: var(--bg); stroke-width: 2; }
.spark-value { fill: var(--text); font-size: 10px; font-weight: 700; }
.free-row select {
  width: 170px;
  padding: 9px;
  background: var(--bg);
  border: 2px solid var(--panel2);
  border-radius: 10px;
  color: var(--text);
  font-size: .95rem;
}

/* ---------- Blitz-Quiz ---------- */
.tagline {
  color: var(--accent-text);
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.quiz-card { max-width: 520px; margin: 0 auto 14px; text-align: center; }
.quiz-card h3 { font-size: 1.15rem; margin-bottom: 14px; }
.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quiz-opt {
  padding: 14px 10px;
  background: var(--panel2);
  border: 2px solid transparent;
  border-radius: 12px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, transform .08s;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.quiz-opt.right { background: #2b4a2b; border-color: #52b788; }
.quiz-opt.wrong { background: #4a2626; border-color: var(--danger); }
.quiz-opt:disabled { cursor: default; }
@media (max-width: 480px) { .quiz-options { grid-template-columns: 1fr; } }

/* ---------- Wissenstest ---------- */
.kn-feedback { margin-top: 12px; text-align: left; }
.kn-feedback p { margin: 8px 0; line-height: 1.55; }
.kn-feedback .kn-wrong { color: var(--danger); }
.kn-feedback details { margin: 8px 0; color: var(--muted); }
.kn-feedback summary { cursor: pointer; color: var(--accent2); font-weight: 600; }
.kn-feedback .primary { margin-top: 8px; }

/* ---------- Glossar (Trainings-Guide) ---------- */
.glossar dt {
  font-weight: 800;
  color: var(--accent-text);
  margin-top: 12px;
}
.glossar dd {
  margin: 2px 0 0 0;
  color: #d5dbe4;
  line-height: 1.55;
  font-size: .93rem;
}
body.light .glossar dd { color: #33404f; }

/* ---------- Meine Partien ---------- */
#inp-pgn {
  width: 100%;
  background: var(--bg);
  border: 2px solid var(--panel2);
  border-radius: 10px;
  color: var(--text);
  font-family: monospace;
  font-size: .85rem;
  padding: 10px;
}
.tag-far {
  background: var(--accent2);
  color: #201a05;
  font-weight: 700;
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 8px;
}
.small-btn { padding: 6px 12px !important; font-size: .82rem !important; }
#inp-pgn-file { color: var(--muted); }

.otp-login { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--panel2); }
.login-captcha { min-height: 65px; margin: 4px 0 6px; }
.login-captcha-status { margin: 0 0 12px; }
.confirm-dialog {
  width: min(92vw, 480px);
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel2);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 20px 60px #0009;
}
.confirm-dialog::backdrop { background: #07101acc; }
.confirm-dialog h2 { margin-top: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.support-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--panel2);
  margin-bottom: 18px;
}
.support-intro h2 { margin: 0 0 6px; }
.support-intro p { margin: 0; color: var(--muted); }
.help-dialog {
  width: min(92vw, 720px);
  max-height: 86vh;
  overflow: auto;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel2);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 20px 60px #0009;
}
.help-dialog::backdrop { background: #07101acc; }
.help-dialog h2 { margin-top: 0; }
.dialog-close-row { display: flex; justify-content: flex-end; margin: -10px -10px 0 0; }
.icon-close {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.7rem;
  cursor: pointer;
}
.help-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.help-suggestion {
  border: 1px solid var(--panel2);
  background: var(--bg);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.help-suggestion:hover, .help-suggestion:focus-visible { border-color: var(--accent); }
.help-answer { min-height: 48px; padding: 14px 0; border-top: 1px solid var(--panel2); }
.help-answer h3 { margin: 0 0 8px; }
.support-ticket { border-top: 1px solid var(--panel2); padding-top: 14px; }
.support-ticket summary { cursor: pointer; font-weight: 700; margin-bottom: 14px; }
#product-analytics-row { align-items: flex-start; gap: 8px; }
.sync-status[data-state="error"] { color: #ffb4a8; border-color: #d95d4f; }
.sync-status[data-state="pending"], .sync-status[data-state="syncing"], .sync-status[data-state="loading"] { color: #ffd37a; }
.account-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: -8px 0 18px; }
.account-mode-status { color: var(--muted); font-size: .9rem; margin: 0; }
.account-plan-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 65%, var(--panel2));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text);
  font-size: .84rem;
  font-weight: 800;
}
.leaderboard-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; margin: 14px 0; }
.leaderboard-toolbar .form-label { width: 100%; margin: 0; }
.leaderboard-toolbar select { width: min(100%, 280px); }
.leaderboard-toolbar button { margin: 0; min-height: 42px; }
.research-heatmap { display:grid; grid-template-columns:repeat(8,minmax(32px,1fr)); max-width:520px; border:1px solid var(--border); margin:12px 0 20px; }
.research-heatmap-cell { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:.72rem; color:var(--text); border:1px solid rgba(255,255,255,.08); min-width:0; }
.research-heatmap-cell strong { font-size:.9rem; }

/* ---------- Punkte-Animation (Quiz-Session) ---------- */
.pts-pop {
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent2);
  text-align: center;
  margin: 8px 0 2px;
  animation: pts-pop .6s cubic-bezier(.2, 1.6, .4, 1);
  text-shadow: 0 3px 12px #f7b32b55;
}
@keyframes pts-pop {
  0% { transform: scale(.3); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}
.pts-today { text-align: center; color: var(--text); margin-bottom: 10px; }
.pts-bar {
  height: 12px;
  max-width: 320px;
  margin: 6px auto 0;
  background: var(--panel2);
  border-radius: 6px;
  overflow: hidden;
}
.pts-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent2));
  transition: width .8s ease;
}

/* ---------- Mini-Plakette: richtige Figur bei falsch belegtem Feld ---------- */
.mini-correct {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 46%;
  height: 46%;
  background: #fffef2;
  border: 2px solid var(--danger);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px #0008;
  z-index: 2;
}
.mini-correct .pc-img { width: 88%; height: 88%; filter: none; }

/* ---------- Kontrast: schwarze Figuren in Palette & Picker ---------- */
.pal-btn, .picker button:not(.pick-remove) {
  background: linear-gradient(135deg, var(--sq-light) 50%, #d9c6a5 50%);
}
.pal-btn:hover, .picker button:not(.pick-remove):hover { filter: brightness(1.08); }
.pal-btn.selected { outline: 3px solid var(--accent2); background: linear-gradient(135deg, #f4e6c8 50%, #e2cfa9 50%); }

/* ---------- Heller Modus (Einstellungen → Design) ---------- */
body.light {
  --bg: #eef1f5;
  --panel: #ffffff;
  --panel2: #dde4ec;
  --text: #1d2634;
  --muted: #55647a;
  --accent-dark: #4e7d2b;
  background: radial-gradient(1100px 500px at 75% -80px, #dfe7f2 0%, var(--bg) 55%) fixed;
}
body.light .card p { color: #33404f; }
body.light .ob-step p { color: #33404f; }
body.light .stat-card { border-bottom-color: var(--accent); }

/* ---------- Betreiber- und Rechtstextseiten ---------- */
.subpage-header { justify-content: space-between; flex-wrap: nowrap; }
.admin-main, .legal-main { align-items: flex-start; }
.wide-page { width: min(100%, 1220px); max-width: 1220px; min-width: 0; }
.eyebrow { color: var(--accent-text); font-weight: 800; text-transform: uppercase; font-size: .78rem; margin-bottom: 6px; }
.admin-view-nav { position: sticky; top: 0; z-index: 20; display: flex; width: 100%; min-width: 0; gap: 4px; margin: 20px 0 8px; padding: 6px; overflow-x: auto; border: 1px solid var(--border); background: var(--bg); }
.admin-view-tab { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 700; }
.admin-view-tab:hover, .admin-view-tab:focus-visible { color: var(--text); background: var(--panel); }
.admin-view-tab.is-active { color: var(--text); border-bottom-color: var(--accent); background: var(--panel); }
.admin-view-panel[hidden] { display: none !important; }
.admin-coverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 14px 0; }
.admin-coverage-grid > a, .admin-coverage-grid > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; min-height: 96px; padding: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); text-decoration: none; }
.admin-coverage-grid small { grid-column: 1 / -1; color: var(--muted); line-height: 1.4; }
.source-state { align-self: start; padding: 3px 6px; border: 1px solid currentColor; border-radius: 3px; font-size: .7rem; font-weight: 800; }
.state-live { color: var(--success-text); }
.state-partial { color: #f0b23d; }
.state-prepared { color: #58a6d8; }
.state-missing { color: #e05d5d; }
.admin-source-table { margin: 14px 0; border-top: 1px solid var(--border); }
.admin-source-table > div { display: grid; grid-template-columns: minmax(210px, 1.4fr) 110px minmax(180px, 1fr); gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.admin-access-panel { width: 100%; margin: 22px 0 8px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.admin-access-panel h2 { margin: 2px 0 8px; }
.admin-access-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; padding: 0; list-style: none; counter-reset: access-step; }
.admin-access-steps li { min-height: 82px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); counter-increment: access-step; }
.admin-access-steps li::before { content: counter(access-step); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; background: var(--accent); color: #111; font-weight: 800; }
.admin-access-steps strong { display: inline; }
.admin-access-steps span { display: block; margin: 8px 0 0 32px; color: var(--muted); }
.admin-section { width: 100%; padding: 20px 0; border-top: 1px solid var(--panel2); }
.admin-section:first-of-type { margin-top: 22px; }
.admin-metrics { justify-content: flex-start; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.status-banner { padding: 12px 14px; margin: 14px 0; border-left: 4px solid var(--info); background: var(--panel); line-height: 1.5; }
.status-ok { border-left-color: var(--accent); }
.status-warning { border-left-color: var(--accent2); }
.status-error { border-left-color: var(--danger); }
.data-table { margin: 12px 0; border-top: 1px solid var(--panel2); }
@media (max-width: 760px) {
  .admin-view-nav { margin-inline: -8px; }
  .admin-source-table > div { grid-template-columns: 1fr auto; }
  .admin-source-table > div > :last-child { grid-column: 1 / -1; color: var(--muted); }
  .admin-access-panel { padding: 15px; }
  .admin-access-steps { grid-template-columns: 1fr; }
  .admin-access-steps li { min-height: 0; }
  .admin-filterbar select { width: 100%; min-height: 44px; }
}
.table-scroll { overflow-x: auto; margin-top: 12px; }
.table-scroll table { width: 100%; border-collapse: collapse; }
.table-scroll th, .table-scroll td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--panel2); }
.table-scroll th { color: var(--muted); font-size: .85rem; }
.friend-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--panel2); }
.friend-row > span { flex: 1 1 180px; }
.quick-message-select { flex: 0 1 190px; min-width: 160px; height: 38px; }
.quick-message-row { padding: 8px 0; border-bottom: 1px solid var(--panel2); color: var(--muted); line-height: 1.45; }
.social-refresh-status { display: none; text-align: right; margin: -4px 4px 14px; }
.data-row { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--panel2); }
.data-row span { color: var(--muted); }
.data-row strong { text-align: right; overflow-wrap: anywhere; }
.check-list { list-style: none; margin: 12px 0; }
.check-list li { position: relative; padding: 7px 0 7px 24px; line-height: 1.45; }
.check-list li::before { position: absolute; left: 0; font-weight: 900; }
.check-list .ok::before { content: "OK"; color: var(--accent-text); font-size: .7rem; top: 10px; }
.check-list .warn::before { content: "!"; color: var(--accent2); }
.check-list .blocked::before { content: "×"; color: var(--danger); }
.legal-page { width: 100%; max-width: 780px; margin: 0 auto; }
.legal-content { padding-bottom: 18px; }
.legal-page h1 { margin-bottom: 6px; }
@media (max-width: 500px) {
  .legal-page h1 { font-size: 1.5rem; overflow-wrap: anywhere; }
}
.legal-page h2 { margin: 30px 0 10px; font-size: 1.18rem; line-height: 1.35; }
.legal-page p, .legal-page li { max-width: 72ch; margin: 0 0 14px; line-height: 1.72; color: #d9e0e8; overflow-wrap: anywhere; }
.legal-page a { color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: #ffd069; }
.legal-updated { color: var(--muted) !important; font-size: .88rem; margin-bottom: 20px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--panel2); }
body.light .legal-page p, body.light .legal-page li { color: #273244; }
@media (max-width: 600px) {
  .support-intro { align-items: stretch; flex-direction: column; gap: 12px; }
  .support-intro .primary { width: 100%; margin: 0; }
  .subpage-header { align-items: center; }
  .subpage-header .logo-image { width: 40px; height: 40px; padding: 5px; border-radius: 12px; }
  .data-row { flex-direction: column; gap: 3px; }
  .data-row strong { text-align: left; }
  .activity-grid { gap: 3px; }
  .mode-row .pl { width: 90px; }
}
body.light .toast { box-shadow: 0 8px 30px #0003; }
body.light .overlay-card { box-shadow: 0 20px 60px #0004; }
body.light .board { box-shadow: 0 14px 34px #0004, 0 0 0 1px #6b5638 inset; }
.design-choice-fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.design-choice-fieldset legend { color: var(--muted); font-size: .88rem; margin-bottom: 8px; }
.design-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.design-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 12px;
  color: var(--text);
  background: var(--bg);
  border: 2px solid var(--panel2);
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
}
.design-choice:hover, .design-choice:focus-within { border-color: var(--accent); }
.design-choice.selected { border-color: var(--accent); background: var(--panel2); }
.design-choice input { margin-top: 5px; accent-color: var(--accent); }
.design-choice > span:last-child { display: grid; gap: 4px; min-width: 0; }
.design-choice b { font-size: .9rem; overflow-wrap: anywhere; }
.design-choice small { color: var(--muted); line-height: 1.35; font-size: .75rem; }
.design-swatch { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); border: 4px solid #fff; }
.design-swatch-arena { background: #39a84b; }
.design-swatch-intelligence { background: #d6a84b; }
.design-swatch-cognitive { background: #16836f; }
.design-dialog { width: min(760px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.design-dialog::backdrop { background: rgba(7, 12, 18, .72); }
.design-choice-grid-dialog { margin-top: 18px; }
.design-choice-button { font: inherit; }
.design-current-status { min-height: 22px; margin-top: 14px; }
@media (max-width: 700px) {
  .design-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .design-dialog { padding: 16px; }
  .design-choice small { overflow-wrap: anywhere; }
}
.form-label select {
  width: 100%;
  margin-top: 4px;
  padding: 9px;
  background: var(--bg);
  border: 2px solid var(--panel2);
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
}
#kn-board { width: min(80vw, 380px); }
#kn-turn { margin: 8px 0 4px; font-weight: 700; color: var(--accent2); }
.position-actions { display:flex; align-items:center; gap:10px; margin:14px 0; min-height:44px; }
.icon-action { width:42px; height:42px; border:1px solid var(--border); background:var(--panel); color:var(--text); font-size:24px; line-height:1; cursor:pointer; }
.icon-action.active { color:#ef476f; border-color:#ef476f; }
#btn-save-position.active { color:var(--green); border-color:var(--green); }
#position-report-dialog textarea { width:100%; box-sizing:border-box; resize:vertical; }

/* ===================================================================
   Design-Trennung: Cognitive und Arena spürbar unterscheiden
   ===================================================================

   BEFUND (2026-08-16): Arena und Cognitive unterschieden sich fast nur in der
   Akzentfarbe. Hintergründe lagen vier Farbstufen auseinander — unsichtbar —,
   und beide teilten denselben bläulichen Verlauf, dieselbe Zeilenhöhe und
   dieselben Abstände. Wer umschaltete, fragte sich, ob etwas passiert ist.

   ENTWURFSGEDANKE: „Ruhig und wissenschaftlich" entsteht nicht durch eine
   andere Farbe, sondern durch LUFT. Mehr Zeilenhöhe, mehr Raum um Text, weniger
   Kontrast in den Trennlinien. „Lebendig" entsteht durch Dichte und deutliche
   Reaktion auf Berührung.

   Beide bleiben hell und behalten ihren Kontrast — geändert wird der Rhythmus,
   nicht die Lesbarkeit.
   =================================================================== */

/* --- Cognitive: ruhig, wissenschaftlich ---------------------------- */

/* Eigener Verlauf im eigenen Farbklang. Der geteilte bläuliche Verlauf
   widersprach dem grünlich-neutralen Grundton. */
body.theme-cognitive {
  background: radial-gradient(1200px 560px at 72% -90px, #e8eeeb 0%, var(--bg) 58%) fixed;
}

/* Luft ist das eigentliche Gestaltungsmittel hier. */
body.theme-cognitive .card {
  padding: 26px 28px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  box-shadow: none;              /* Schatten erzeugen Betriebsamkeit */
}
body.theme-cognitive .card p,
body.theme-cognitive .card li {
  line-height: 1.85;             /* gegenüber 1.65 im Standard */
  max-width: 68ch;               /* Lesebreite begrenzen — Kernregel der Typografie */
}
body.theme-cognitive .card h2,
body.theme-cognitive .card h3 {
  font-weight: 500;              /* leiser als fett */
  letter-spacing: .01em;
  margin-bottom: .7em;
}
body.theme-cognitive .hint {
  line-height: 1.75;
}
/* Trennlinien zurücknehmen: sie sollen gliedern, nicht rufen. */
body.theme-cognitive .line,
body.theme-cognitive hr {
  opacity: .55;
}
/* Ruhige Reaktion statt Sprung. */
body.theme-cognitive .primary,
body.theme-cognitive .ghost {
  transition: background-color .25s ease, border-color .25s ease;
}

/* --- Arena: lebendig, motivierend ---------------------------------- */

/* Kompakter als Cognitive — hier wird trainiert, nicht gelesen. */
body.theme-arena .card {
  padding: 18px 20px;
  margin-bottom: 14px;
}
/* Deutliche Rückmeldung auf Berührung: in der Trainingsansicht soll man
   spüren, dass etwas passiert. */
body.theme-arena .primary:hover,
body.theme-arena .primary:focus-visible {
  background: var(--accent-dark);
  color: #ffffff;
  filter: none;
  transform: translateY(-1px);
}
body.theme-cognitive .primary:hover:not(:disabled) { filter: none; }
body.theme-arena .primary {
  transition: background-color .12s ease, transform .12s ease;
}
/* Zahlen sind in der Trainingsansicht die Hauptsache. */
body.theme-arena .stat-num {
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Bewegung respektiert die Systemeinstellung. */
@media (prefers-reduced-motion: reduce) {
  body.theme-arena .primary,
  body.theme-cognitive .primary,
  body.theme-cognitive .ghost {
    transition: none;
  }
  body.theme-arena .primary:hover,
  body.theme-arena .primary:focus-visible {
    transform: none;
  }
}