/* =============================================================================
   Schach — Seitenlayout
   -----------------------------------------------------------------------------
   Setzt Design/tokens.css und Design/components.css voraus (Schallkiste-
   Styleguide). Hier steht nur, was die Bausteine nicht abdecken: Kopfzeile,
   Anmeldung, Brett, Partie, Übersicht, Konten, Meldung. Nur var(--token);
   die Brettfarben sind aus Gold und Blau gemischt, keine eigenen Farben.
   ============================================================================= */

html { color-scheme: dark; }

:root {
  /* Brett: helle und dunkle Felder aus Marken-Gold, Figuren in Logo-Blau und Weiß. */
  --feld-hell:   color-mix(in oklab, var(--akzent) 55%, var(--text-titel));
  --feld-dunkel: color-mix(in oklab, var(--akzent) 72%, var(--grund));
  --figur-hell:  var(--text-stark);
  --figur-dunkel: var(--tinte);
  /* Figuren im flachen Brett: Fläche, Kragen, Schattenseite, Umriss, Glanz – je Farbe */
  --weiss-flaeche:  var(--text-titel);
  --weiss-band:     color-mix(in oklab, var(--text-titel) 80%, var(--text-leise));
  --weiss-schatten: color-mix(in oklab, var(--text-titel) 55%, var(--text-leise));
  --weiss-rand:     color-mix(in oklab, var(--text-leise) 35%, var(--tinte));
  --weiss-glanz:    var(--text-stark);
  --schwarz-flaeche:  var(--flaeche-hoch);
  --schwarz-band:     color-mix(in oklab, var(--flaeche-hoch) 55%, var(--flaeche));
  --schwarz-schatten: var(--flaeche);
  --schwarz-rand:     var(--tinte);
  --schwarz-glanz:    color-mix(in oklab, var(--text-leise) 80%, transparent);
  --markiert:    color-mix(in oklab, var(--akzent-warm) 32%, transparent);
  --ziel:        color-mix(in oklab, var(--tinte) 38%, transparent);
}

.boot { padding: var(--raum-7) 0; text-align: center; color: var(--text-leise); }

/* ---- Logo: Springer in Marken-Gold --------------------------------------- */
.logo { display: inline-flex; color: var(--akzent); flex: none; }
.logo svg { display: block; width: 40px; height: 40px; fill: currentColor; }

/* ---- Anmeldung ------------------------------------------------------------ */
.anmeldung { padding-top: var(--raum-7); }
.anmelde-kopf { display: grid; justify-items: center; gap: var(--raum-3); margin-bottom: var(--raum-6); text-align: center; }
.anmelde-kopf .logo svg { width: 72px; height: 72px; }
.anmelde-karte { max-width: 400px; margin: 0 auto; }
.anmelde-karte .hinweis { margin-bottom: var(--raum-2); }
@media (max-width: 560px) {
  .anmeldung { padding-top: var(--raum-5); }
  .anmelde-kopf .logo svg { width: 56px; height: 56px; }
  .anmelde-karte { padding: var(--raum-5); }
}

/* ---- Formulare in Karten: volle Kartenbreite ------------------------------ */
.karte .feld { max-width: none; }
.feld-fehler:empty { display: none; }
.schalter.breit { width: 100%; }
.schalter.gefahr { color: var(--schlecht-text); }
.schalter.gefahr:hover { color: var(--text-stark); border-color: var(--schlecht); }
.haken { display: flex; gap: var(--raum-2); align-items: center; min-height: var(--treffer-min); cursor: pointer; }
.haken input { accent-color: var(--akzent); width: 18px; height: 18px; }
.felder-2 { display: grid; gap: var(--raum-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
.karte-zahl { margin-left: auto; color: var(--text-leise); letter-spacing: 0.05em; }

/* ---- Kopfzeile ------------------------------------------------------------ */
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-4) var(--raum-6); }
.marke { display: flex; align-items: center; gap: var(--raum-3); color: inherit; }
.marke:hover, .marke:focus-visible { text-decoration: none; }
.marke-name {
  display: block;
  font-family: var(--schrift-display); font-weight: var(--gewicht-display);
  font-size: var(--text-titel-s); letter-spacing: 0.14em; line-height: var(--zeile-titel); color: var(--text-titel);
}
/* Navigation als Icons; der Name steht im Tooltip und für Screenreader. */
.navi { display: flex; align-items: center; gap: var(--raum-1); margin-left: auto; }
.navi a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--treffer-min); min-height: var(--treffer-min); padding: 0 var(--raum-2);
  color: var(--text-leise); border-bottom: 1px solid transparent;
  transition: color var(--uebergang);
}
.navi svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.navi a:hover { color: var(--text-stark); text-decoration: none; }
.navi a[aria-current='page'] { color: var(--akzent); border-bottom-color: var(--akzent); }
@media (max-width: 560px) {
  .marke .logo svg { width: 34px; height: 34px; }
  main .karte { padding: var(--raum-5) var(--raum-4); }
}

/* ---- Figuren ---------------------------------------------------------------
   Rund und flach (js/icons.js): Fläche, Kragen („band“), Schattenseite, darunter der Umriss
   als dicker Rand derselben Flächen, obendrauf Glanz, Schnitt und Nüster. */
.figur { display: block; overflow: visible; }
.figur .umriss { stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
.figur .glanz { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.figur .schnitt { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.figur .nuester { fill: var(--tinte); }
.stein .umriss { stroke-width: 6; }
.figur-w .krone { fill: var(--akzent); stroke: var(--weiss-rand); stroke-width: 3; stroke-linejoin: round; }
.figur-b .krone { fill: var(--akzent); stroke: var(--schwarz-rand); stroke-width: 3; stroke-linejoin: round; }
.figur-w .umriss { fill: var(--weiss-rand); stroke: var(--weiss-rand); }
.figur-w .koerper { fill: var(--weiss-flaeche); }
.figur-w .band { fill: var(--weiss-band); }
.figur-w .schatten { fill: var(--weiss-schatten); }
.figur-w .schnitt { stroke: var(--weiss-schatten); }
.figur-w .glanz { stroke: var(--weiss-glanz); }
.figur-b .umriss { fill: var(--schwarz-rand); stroke: var(--schwarz-rand); }
.figur-b .koerper { fill: var(--schwarz-flaeche); }
.figur-b .band { fill: var(--schwarz-band); }
.figur-b .schatten { fill: var(--schwarz-schatten); }
.figur-b .schnitt { stroke: var(--schwarz-schatten); }
.figur-b .glanz { stroke: var(--schwarz-glanz); }

/* ---- Brett ----------------------------------------------------------------- */
.brett {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  width: 100%; aspect-ratio: 1;
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.brettfeld {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--feld-hell); color: var(--figur-dunkel); font: inherit; cursor: default;
}
.brettfeld.dunkel { background: var(--feld-dunkel); }
.brettfeld:focus-visible { outline-offset: -3px; z-index: 1; }
.brettfeld > .figur { position: relative; z-index: 1; width: 86%; height: 86%; pointer-events: none; }
.brettfeld.ziehbar { cursor: grab; touch-action: none; }
.brettfeld.ziel { cursor: pointer; }
.brettfeld.angehoben > .figur { opacity: 0.35; }

/* Markierungen als Schicht über dem Feld: letzter Zug, gewählte Figur, Schach. */
.brettfeld::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.brettfeld.zuletzt::before { background: var(--markiert); }
.brettfeld.gewaehlt::before { background: color-mix(in oklab, var(--akzent-warm) 55%, transparent); }
.brettfeld.drueber::before { box-shadow: inset 0 0 0 3px var(--akzent-warm); }
.brettfeld.im-schach::before { background: radial-gradient(circle, var(--akzent-warm) 0%, color-mix(in oklab, var(--akzent-warm) 50%, transparent) 45%, transparent 72%); }
/* Erlaubte Ziele: Punkt auf leeren Feldern, Ring um schlagbare Figuren. */
.brettfeld.ziel::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  width: 30%; height: 30%; border-radius: 50%; background: var(--ziel);
}
.brettfeld.ziel.schlag::after { width: 92%; height: 92%; background: none; box-shadow: inset 0 0 0 0.35rem var(--ziel); }

/* Koordinaten in den Ecken der Randfelder, in der Farbe des jeweils anderen Feldtons. */
.koord { position: absolute; z-index: 1; font-size: clamp(0.5rem, 1.6vw, 0.75rem); line-height: 1; pointer-events: none; font-weight: var(--gewicht-fett); }
.reihe-nr { top: 0.2em; left: 0.25em; }
.linie-nr { right: 0.25em; bottom: 0.15em; }
.brettfeld.hell .koord { color: var(--feld-dunkel); }
.brettfeld.dunkel .koord { color: var(--feld-hell); }

/* Beim Ziehen hängt die Figur am Zeiger. */
.geist { position: fixed; z-index: 80; pointer-events: none; }
.geist .figur { width: 100%; height: 100%; transform: scale(1.12); filter: drop-shadow(0 4px 6px color-mix(in oklab, var(--tinte) 60%, transparent)); }

/* Gegner hat gezogen: das Brett leuchtet kurz auf. */
@keyframes brett-neu { from { box-shadow: 0 0 0 3px var(--akzent); } to { box-shadow: 0 0 0 3px transparent; } }
.brett.neu { animation: brett-neu 1.2s ease-out; }

/* Räumliches Brett (brett3d.js): eine Leinwand, Gesten selbst ausgewertet (kein Rollen der Seite). */
.brett3d {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.brett3d:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.brett3d-bild { display: block; width: 100%; height: 100%; cursor: move; }
.brett3d-bild.greifen { cursor: grab; }
.brett3d-bild.zeigen { cursor: pointer; }
.brett3d-bild.halten, .brett3d-bild.drehen { cursor: grabbing; }
/* Zurück zur Grundansicht: erscheint, sobald gedreht, gezoomt oder verschoben ist. */
.brett3d-zurueck {
  position: absolute; top: var(--raum-2); right: var(--raum-2);
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--treffer-min); padding: 0;
  background: color-mix(in oklab, var(--flaeche) 80%, transparent);
}
.brett3d-zurueck[hidden] { display: none; }
.brett3d-zurueck svg { width: 22px; height: 22px; fill: currentColor; }
.ansicht-knopf { font-weight: var(--gewicht-fett); }
.blaettern .ansicht-knopf[hidden] { display: none; }

/* Platzhalter, bis die Partie geladen ist und feststeht, welches Brett es braucht. */
.brett-platz { width: 100%; aspect-ratio: 1; border: 1px solid var(--linie); border-radius: var(--radius); }

/* Dame: übersprungene Steine während eines Mehrfachschlags */
.brettfeld.opfer::before { box-shadow: inset 0 0 0 3px var(--akzent-warm); }
.brettfeld > .stein { width: 82%; height: 82%; }

/* Mühle: Linien als SVG, die 24 Punkte als runde Knöpfe darüber */
.muehle-brett {
  position: relative; width: 100%; aspect-ratio: 1;
  background: var(--feld-hell); border: 1px solid var(--linie); border-radius: var(--radius);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.muehle-linien { position: absolute; inset: 0; width: 100%; height: 100%; }
.muehle-linien line { stroke: var(--feld-dunkel); stroke-width: 0.07; stroke-linecap: round; }
.muehle-punkt {
  position: absolute; width: 12.5%; height: 12.5%; transform: translate(-50%, -50%);
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font: inherit; cursor: default;
}
.muehle-punkt::before {
  content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: var(--feld-dunkel);
}
.muehle-punkt > .figur { position: relative; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.muehle-punkt:focus-visible { outline-offset: 2px; }
.muehle-punkt.ziehbar { cursor: grab; touch-action: none; }
.muehle-punkt.ziel { cursor: pointer; }
.muehle-punkt.ziel::before { width: 46%; height: 46%; background: var(--ziel); }
.muehle-punkt.zuletzt::after, .muehle-punkt.genommen::after {
  content: ''; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px var(--markiert);
}
.muehle-punkt.genommen::after { box-shadow: 0 0 0 2px var(--akzent-warm); inset: 22%; }
.muehle-punkt.gewaehlt::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--akzent-warm) 70%, transparent);
}
.muehle-punkt.nehmbar { cursor: pointer; }
.muehle-punkt.nehmbar::after {
  content: ''; position: absolute; inset: -6%; border-radius: 50%; pointer-events: none; z-index: 2;
  box-shadow: 0 0 0 4px var(--akzent-warm); animation: nehmbar 1.1s ease-in-out infinite alternate;
}
@keyframes nehmbar { from { opacity: 1; } to { opacity: 0.35; } }
.muehle-punkt.angehoben > .figur { opacity: 0.35; }
.muehle-hinweis {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; max-width: 30%;
  font-size: var(--text-klein); text-align: center; color: var(--tinte); pointer-events: none;
}

/* Umwandlung */
.umwandlung { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raum-2); }
.umwandlung .schalter { display: grid; justify-items: center; gap: var(--raum-1); padding: var(--raum-2); background: var(--feld-hell); color: var(--tinte); }
.umwandlung .schalter:hover { border-color: var(--akzent-warm); color: var(--tinte); }
.umwandlung .figur { width: 100%; max-width: 64px; aspect-ratio: 1; height: auto; }

/* ---- Partie ------------------------------------------------------------------ */
.partie { display: grid; gap: var(--raum-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) {
  .partie { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
}
.partie-brett { display: grid; gap: var(--raum-2); width: 100%; max-width: min(640px, calc(100vh - 300px)); min-width: min(100%, 280px); margin: 0 auto; }
.spieler-leiste { display: flex; align-items: center; gap: var(--raum-2); min-height: 32px; flex-wrap: wrap; }
.spieler-leiste b { color: var(--text-stark); }
.farbpunkt { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid var(--akzent); }
.farbpunkt.w { background: var(--figur-hell); }
.farbpunkt.b { background: var(--figur-dunkel); }
.geschlagen { display: inline-flex; align-items: center; margin-left: auto; }
.geschlagen .figur { width: 20px; height: 20px; margin-left: -5px; }
/* Auf dunklem Grund: geschlagene schwarze Figuren mit hellem Rand statt fast unsichtbar. */
.geschlagen .figur-b .umriss { fill: var(--text-leise); stroke: var(--text-leise); }
.geschlagen .figur:first-child { margin-left: 0; }
.vorsprung { margin-left: var(--raum-2); font-size: var(--text-klein); color: var(--text-leise); }
.blaettern { display: flex; align-items: center; gap: var(--raum-1); }
.blaettern .schalter { display: inline-flex; align-items: center; justify-content: center; min-width: var(--treffer-min); padding: 0; }
.blaettern .schalter svg { width: 22px; height: 22px; fill: currentColor; }
.blaettern .schalter:last-child { margin-left: auto; }
.blaettern-stand { flex: 1; min-width: 0; text-align: center; font-size: var(--text-klein); color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.partie-seite { gap: var(--raum-4); }
.partie-titel { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); line-height: var(--zeile-titel); color: var(--text-titel); }
.partie-titel.dran { color: var(--akzent); }
.partie-status { display: grid; gap: var(--raum-2); }
.angebot { padding: var(--raum-3) var(--raum-4); border: 1px solid var(--akzent-warm); border-radius: var(--radius); background: var(--schlecht-tint); }
.angebot b { color: var(--text-stark); }

.zugliste {
  list-style: none; max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
  border-top: 1px solid var(--linie-fein); border-bottom: 1px solid var(--linie-fein);
  font-variant-numeric: tabular-nums;
}
.zugliste li { display: grid; grid-template-columns: 3em 1fr 1fr; align-items: center; }
.zugliste li:nth-child(even) { background: var(--linie-hauch); }
.zug-nr { color: var(--text-leise); font-size: var(--text-klein); padding-left: var(--raum-1); }
.zug {
  font: inherit; text-align: left; color: var(--text); background: none; border: 0; border-radius: var(--radius);
  padding: var(--raum-1) var(--raum-2); cursor: pointer;
}
.zug:hover { color: var(--text-stark); }
.zug.aktuell { background: var(--akzent); color: var(--tinte); font-weight: var(--gewicht-fett); }
.zug-leer { display: block !important; padding: var(--raum-2); color: var(--text-leise); font-size: var(--text-klein); }
textarea.pgn { min-height: 12rem; font-size: var(--text-klein); }

/* ---- Übersicht -------------------------------------------------------------- */
.partie-liste { list-style: none; }
.partie-eintrag {
  display: flex; align-items: center; gap: var(--raum-4);
  padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie-fein); color: inherit;
}
.partie-liste li:first-child .partie-eintrag { border-top: 1px solid var(--linie-fein); }
.partie-eintrag:hover, .partie-eintrag:focus-visible { text-decoration: none; }
.partie-eintrag:hover b { color: var(--akzent); }
.partie-eintrag-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.partie-eintrag b { color: var(--text-stark); overflow-wrap: anywhere; }
.partie-eintrag .konto-meta { margin-top: 0; }
.mini-brett { width: 72px; height: 72px; flex: none; border: 1px solid var(--linie); border-radius: var(--radius); }
.mini-brett .mini-hell { fill: var(--feld-hell); }
.mini-brett .mini-dunkel { fill: var(--feld-dunkel); }
.mini-brett .mini-zuletzt { fill: color-mix(in oklab, var(--akzent-warm) 45%, var(--feld-hell)); }
.mini-brett .mini-stein { stroke-width: 0.08; }
.mini-brett .mini-w { fill: var(--weiss-flaeche); stroke: var(--weiss-rand); }
.mini-brett .mini-b { fill: var(--schwarz-flaeche); stroke: var(--schwarz-rand); }
.mini-brett .mini-krone { fill: var(--akzent); }
.mini-muehle { background: var(--feld-hell); }
.mini-muehle .mini-linie { fill: none; stroke: var(--feld-dunkel); stroke-width: 0.12; }
.mini-muehle .mini-punkt { fill: var(--feld-dunkel); }
.mini-muehle .mini-zuletzt-stein { stroke: var(--akzent-warm); stroke-width: 0.16; }
.steine-info { font-size: var(--text-klein); color: var(--text-leise); }
@media (max-width: 560px) {
  .mini-brett { width: 60px; height: 60px; }
  .partie-eintrag { gap: var(--raum-3); }
}

/* ---- Konto -------------------------------------------------------------------- */
.angemeldet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-4); justify-content: space-between; }
.angemeldet b { color: var(--text-stark); }
.konten { list-style: none; }
.konto {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--raum-3) var(--raum-4);
  padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie-fein);
}
.konto:first-child { border-top: 1px solid var(--linie-fein); }
.konto b { color: var(--text-stark); }
.konto-meta { font-size: var(--text-mikro); color: var(--text-leise); margin-top: var(--raum-1); }

/* ---- Pop-up (Release Notes, Umwandlung, PGN) --------------------------------- */
.dialog {
  width: min(560px, calc(100% - 2 * var(--raum-4))); max-height: 85vh; margin: auto; padding: 0;
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  background: var(--flaeche); color: var(--text);
}
.dialog[open] { display: flex; flex-direction: column; }
.dialog::backdrop { background: color-mix(in oklab, var(--grund) 80%, transparent); }
.dialog-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-5); border-bottom: 1px solid var(--linie-fein);
}
.dialog-kopf h2 { margin: 0; font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); color: var(--text-titel); }
.dialog-inhalt { overflow-y: auto; overscroll-behavior: contain; padding: var(--raum-4) var(--raum-5) var(--raum-6); }
.release + .release { margin-top: var(--raum-5); padding-top: var(--raum-5); border-top: 1px solid var(--linie-fein); }
.release-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-2) var(--raum-3); margin-bottom: var(--raum-2); }
.release-version { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); color: var(--akzent); font-variant-numeric: tabular-nums; }
.release-datum { font-size: var(--text-mikro); letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--text-leise); }
.release ul { padding-left: var(--raum-5); display: grid; gap: var(--raum-2); }
.release li::marker { color: var(--akzent); }

/* ---- Meldung (kurze Rückmeldung unten) ---------------------------------------- */
.meldung {
  position: fixed; left: 50%; bottom: var(--raum-5); transform: translateX(-50%); z-index: 70;
  max-width: calc(100% - 2 * var(--raum-4));
  background: var(--flaeche-hoch); color: var(--text-stark);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--raum-3) var(--raum-4); font-size: var(--text-klein);
}

/* ---- Computergegner ---------------------------------------------------------- */
.wertung { display: grid; gap: var(--raum-1); }
.wertung-zahl { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-m); line-height: 1; color: var(--akzent); font-variant-numeric: tabular-nums; }
.wertung-spanne { font-family: var(--schrift-mono); font-weight: var(--gewicht-text); font-size: var(--text-klein); color: var(--text-leise); }
.elo-regler { width: 100%; accent-color: var(--akzent); min-height: var(--treffer-min); }
.wertung-aenderung b { color: var(--text-stark); font-variant-numeric: tabular-nums; }
.wertung-aenderung .plus { color: var(--gut-text); }
.wertung-aenderung .minus { color: var(--schlecht-text); }

/* ---- Sichtbarkeit (Admin) ----------------------------------------------------- */
.sicht-liste { list-style: none; margin-top: var(--raum-4); }
.sicht-liste li { border-bottom: 1px solid var(--linie-fein); }

/* ---- Skat -------------------------------------------------------------------- */
/* Deutsches Blatt mit Farbzeichen und Schrift nach dem Altenburger Bild (ASS, Kornblume): schwarze
   Buchstaben und Zahlen; Eichel rot im dunklen Becher mit grünem Laub, Grün als gezacktes Blatt,
   Rot als Herz, Schellen gelb mit rotem Band. Rückseite orange mit Kornblumen und Kreuzband. */
:root {
  --karte-flaeche: var(--text-titel);
  --karte-rand:    color-mix(in oklab, var(--text-leise) 50%, var(--tinte));
  --karte-linie:   var(--tinte);
  --blatt-eichel:   color-mix(in oklab, var(--rot-600) 80%, var(--akzent-warm));
  --blatt-becher:   color-mix(in oklab, var(--daten-2) 35%, var(--tinte));
  --blatt-laub:     color-mix(in oklab, var(--daten-2) 85%, var(--tinte));
  --blatt-gruen:    color-mix(in oklab, var(--daten-2) 80%, var(--tinte));
  --blatt-rot:      color-mix(in oklab, var(--rot-600) 70%, var(--akzent-warm));
  --blatt-schellen: color-mix(in oklab, var(--akzent) 90%, var(--akzent-warm));
  /* Rückseite */
  --ruecken-orange: color-mix(in oklch, var(--gold-500) 76%, var(--rot-500));
  --ruecken-feld:   color-mix(in oklab, var(--ruecken-orange) 30%, var(--text-titel));
  --ruecken-ranke:  color-mix(in oklab, var(--ruecken-orange) 80%, var(--rot-700));
  --ruecken-blau:   color-mix(in oklab, var(--daten-1) 75%, var(--tinte));
  --ruecken-braun:  color-mix(in oklab, var(--rot-700) 55%, var(--gold-500));
}
.spielkarte {
  --kb: 3.6rem;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--kb); aspect-ratio: 5 / 7; padding: 0;
  border: 1px solid var(--karte-rand); border-radius: calc(var(--kb) * 0.1);
  background: var(--karte-flaeche); color: var(--karte-linie);
  font-family: var(--schrift-display); font-weight: var(--gewicht-fett); line-height: 1;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  user-select: none; -webkit-user-select: none;
}
.farbzeichen { display: block; fill: currentColor; overflow: visible; }
.farbzeichen.zeichen-C { color: var(--blatt-eichel); }
.farbzeichen.zeichen-S { color: var(--blatt-gruen); }
.farbzeichen.zeichen-H { color: var(--blatt-rot); }
.farbzeichen.zeichen-D { color: var(--blatt-schellen); }
.farbzeichen .schatten { fill: color-mix(in oklab, currentColor 72%, var(--tinte)); }
.farbzeichen .ader { fill: none; stroke: var(--karte-flaeche); stroke-width: 1; stroke-linecap: round; }
.farbzeichen .ring { fill: none; stroke: currentColor; stroke-width: 1.3; }
.farbzeichen .band { fill: var(--blatt-rot); }
.farbzeichen .kappe { fill: color-mix(in oklab, var(--daten-1) 70%, var(--tinte)); }
.farbzeichen .loch { fill: var(--karte-flaeche); }
.farbzeichen .becher { fill: var(--blatt-becher); }
.farbzeichen .laub { fill: var(--blatt-laub); }
.farbzeichen .stiel { fill: none; stroke: var(--blatt-becher); stroke-width: 1.2; }
/* Wie gedruckt: dünne dunkle Umrisse */
.farbzeichen > :not(.ader):not(.ring):not(.stiel):not(.schatten) { stroke: var(--karte-linie); stroke-width: 0.5; stroke-linejoin: round; }
/* Die Unter sind immer Trumpf (außer im Null): goldener Rahmen innen */
.spielkarte.unter { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--akzent) 70%, transparent), 0 1px 3px rgb(0 0 0 / 0.35); }
/* Ecke: schwarzer Buchstabe oder Zahl, darunter das Farbzeichen; groß in der Mitte Zeichen oder Buchstabe */
.spielkarte .ecke { position: absolute; top: 0.18em; left: 0.22em; display: grid; justify-items: center; gap: 0.08em; font-size: calc(var(--kb) * 0.27); letter-spacing: -0.04em; }
.spielkarte .ecke .farbzeichen { width: 0.82em; height: 0.82em; }
.spielkarte .bild { font-size: calc(var(--kb) * 0.5); margin-top: 0.35em; }
.spielkarte .bild .farbzeichen { width: 1.05em; height: 1.05em; }
.spielkarte.klein { --kb: 2.2rem; }
.spielkarte.klein .bild { display: none; }
.spielkarte.klein .ecke { position: static; font-size: calc(var(--kb) * 0.36); }
/* Rückseite: das Kornblumen-Blatt (Bild aus js/skat-karten.js) */
.spielkarte.ruecken { background: var(--ruecken-orange); border-color: color-mix(in oklab, var(--ruecken-orange) 60%, var(--tinte)); overflow: hidden; }
.ruecken-bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.ruecken-bild .r-rahmen { fill: var(--ruecken-blau); }
.ruecken-bild .r-feld { fill: var(--ruecken-feld); }
.ruecken-bild .r-ranke { fill: none; stroke: var(--ruecken-ranke); stroke-width: 0.7; stroke-linecap: round; }
.ruecken-bild .r-bluete { fill: var(--ruecken-blau); }
.ruecken-bild .r-kopf { fill: var(--ruecken-braun); }
.ruecken-bild .r-schuppen { fill: none; stroke: color-mix(in oklab, var(--ruecken-braun) 50%, var(--tinte)); stroke-width: 0.3; }
.ruecken-bild .r-band { fill: var(--text-titel); }
.ruecken-bild .r-dreiecke { fill: var(--tinte); }
.ruecken-bild .r-saum { fill: none; stroke: var(--ruecken-blau); stroke-width: 0.5; }
.skat-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1); }

.skat-feld { display: grid; gap: var(--raum-3); width: 100%; max-width: 640px; margin: 0 auto; }
.skat-tisch {
  display: grid; gap: var(--raum-2); align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* oben die anderen, Mitte, unten links ich und rechts der letzte Stich, darunter meine Karten */
  grid-template-areas: "links rechts" "mitte mitte" "unten letzter" "hand hand";
  padding: var(--raum-3); border-radius: var(--radius-gross);
  background: color-mix(in oklab, var(--daten-2) 22%, var(--flaeche));
  border: 1px solid var(--linie);
}
.skat-platz { display: grid; gap: var(--raum-1); align-content: start; min-width: 0; }
.skat-platz.links { grid-area: links; }
.skat-platz.rechts { grid-area: rechts; justify-items: end; text-align: right; }
.skat-platz.rechts .pill-reihe { justify-content: flex-end; }
.skat-platz.unten { grid-area: unten; justify-self: start; }
.skat-platz b { color: var(--text-stark); overflow-wrap: anywhere; }
.skat-platz.dran b { color: var(--akzent); }
.skat-platz .konto-meta { margin-top: 0; }
.skat-info { display: flex; flex-wrap: wrap; gap: 0 0.7em; }
.skat-platz.rechts .skat-info { justify-content: flex-end; }
.skat-liste td:nth-child(2) { white-space: nowrap; }
.skat-ruecken, .skat-offen { display: flex; }
.skat-ruecken .spielkarte { --kb: 1.4rem; box-shadow: none; }
.skat-ruecken .spielkarte + .spielkarte { margin-left: -0.95rem; }
.skat-offen { flex-wrap: wrap; gap: 2px; max-width: 9.5rem; }
.skat-platz.rechts .skat-offen { justify-content: flex-end; }
.skat-offen .spielkarte { --kb: 1.8rem; }
.skat-offen .spielkarte .bild { display: none; }
.skat-offen .spielkarte .ecke { position: static; }

/* Mitte über die ganze Breite: links und rechts die Karten der beiden anderen (zu ihnen hin geneigt),
   in der Mitte etwas tiefer die eigene; darunter je der Name. Nichts verdeckt sich. */
.skat-mitte { --kb: 3.6rem; grid-area: mitte; position: relative; width: 100%; height: calc(var(--kb) * 1.4 + var(--kb) * 0.5 + 3.6rem); }
.stich-platz { position: absolute; left: 50%; display: grid; justify-items: center; gap: 2px; }
.stich-platz .spielkarte { --kb: inherit; }
.stich-platz.links { top: 0; translate: calc(-50% - var(--kb) * 1.35) 0; rotate: -7deg; }
.stich-platz.rechts { top: 0; translate: calc(-50% + var(--kb) * 1.35) 0; rotate: 7deg; }
.stich-platz.unten { top: calc(var(--kb) * 0.5); translate: -50% 0; z-index: 1; }
.stich-name { font-size: var(--text-mikro); color: var(--text-stark); white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.stich-name.allein { color: var(--akzent); font-weight: var(--gewicht-fett); }
.stich-platz.sticht .spielkarte { box-shadow: 0 0 0 3px var(--akzent), 0 0 14px 2px color-mix(in oklab, var(--akzent) 70%, transparent); }
.skat-mitte.voll .stich-platz:not(.sticht) .spielkarte { filter: brightness(0.82); }
.skat-mitte-text {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 3; white-space: nowrap;
  padding: var(--raum-1) var(--raum-2); border-radius: var(--radius);
  background: color-mix(in oklab, var(--grund) 80%, transparent); color: var(--akzent);
  font-size: var(--text-klein); font-weight: var(--gewicht-fett);
}
.skat-spielende {
  position: absolute; inset: 0.4rem 0; display: grid; place-items: center; text-align: center; z-index: 3;
  padding: var(--raum-3); border-radius: var(--radius); border: 1px solid var(--akzent);
  background: color-mix(in oklab, var(--grund) 88%, transparent); color: var(--text-stark);
  font-size: var(--text-klein); line-height: var(--zeile-text);
  animation: spielende 0.35s ease-out;
}
@keyframes spielende { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
.skat-skat { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.skat-skat .spielkarte { --kb: 2.4rem; }
.skat-skat .spielkarte + .spielkarte { margin-left: -1.2rem; transform: rotate(10deg); }
.skat-feld.spielt .skat-tisch { cursor: pointer; }
.skat-tisch, .skat-hand { -webkit-tap-highlight-color: transparent; }

/* Wer das Spiel macht: gold umrahmt, mit „spielt …“ */
.skat-platz { padding: var(--raum-1) var(--raum-2); border: 1px solid transparent; border-radius: var(--radius); }
.skat-platz.allein { border-color: var(--akzent); background: color-mix(in oklab, var(--akzent) 12%, transparent); }
.skat-allein { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1); font-size: var(--text-klein); color: var(--akzent); font-weight: var(--gewicht-fett); }
.skat-platz.rechts .skat-allein { justify-content: flex-end; }
.skat-allein .pill { background: var(--akzent); color: var(--tinte); }
/* Wer den Stich nimmt, leuchtet kurz auf */
.skat-platz.nimmt { animation: nimmt 0.9s ease-out; }
@keyframes nimmt { from { box-shadow: 0 0 0 3px var(--akzent); } to { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .skat-platz.nimmt, .skat-spielende { animation: none; }
}

/* Eigene Karten: als leichter Fächer (Lage aus faecher() in js/skat-karten.js), von jeder Karte ist
   die linke Kante mit Wert und Farbe zu sehen. Die gewählte Karte steht höher, größer und frei. */
.skat-hand { --kb: 3.6rem; grid-area: hand; position: relative; min-height: calc(var(--kb) * 1.4 + 1rem); }
.skat-hand .spielkarte { --kb: inherit; position: absolute; cursor: default; transition: translate 0.15s ease, scale 0.15s ease; }
.skat-hand .spielkarte.waehlbar { cursor: pointer; }
.skat-hand .spielkarte.waehlbar:hover { translate: 0 -0.25rem; }
.skat-hand .spielkarte.gewaehlt, .skat-hand .spielkarte.gewaehlt:hover {
  translate: 0 calc(var(--kb) * -0.32);
  box-shadow: 0 0 0 2px var(--akzent), 0 4px 10px rgb(0 0 0 / 0.45);
}
/* Zum Ausspielen gewählt: deutlich größer und obenauf (die Karten rechts rücken zur Seite);
   zum Drücken gewählt: nur angehoben, die Nachbarn bleiben antippbar */
.skat-hand:not(.drueckt) .spielkarte.gewaehlt { scale: 1.18; z-index: 20; }
.skat-hand .spielkarte.gesperrt { filter: brightness(0.6) saturate(0.6); }
.skat-hand .spielkarte:disabled { opacity: 1; }
.skat-hand .spielkarte.kommt { visibility: hidden; }
.skat-hand .spielkarte:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: 2px; z-index: 21; }

/* Was über die Seite fliegt (Karten, Stapel beim Geben, Skat) */
.fliegt { position: fixed; z-index: 100; pointer-events: none; margin: 0; }
.skat-stapel, .skat-paar { display: grid; }
.skat-stapel > *, .skat-paar > * { grid-area: 1 / 1; }
.skat-stapel > :nth-child(2) { translate: 2px -2px; }
.skat-stapel > :nth-child(3) { translate: 4px -4px; }
.skat-paar > :nth-child(2) { translate: 5px 3px; rotate: 8deg; }

/* Der aufgenommene Skat liegt offen in der Mitte, bis man ihn antippt */
.skat-skat.offen {
  inset: auto; left: 50%; top: 50%; translate: -50% -50%; z-index: 4; display: grid; grid-template-columns: repeat(2, auto); gap: var(--raum-2); justify-items: center;
  padding: var(--raum-2); border: 1px solid var(--akzent); border-radius: var(--radius); background: color-mix(in oklab, var(--grund) 70%, transparent);
  font: inherit; color: inherit; cursor: pointer; animation: spielende 0.35s ease-out;
}
.skat-skat.offen .spielkarte { --kb: inherit; }
.skat-skat.offen .spielkarte + .spielkarte { margin: 0; transform: none; }
.skat-skat-text { grid-column: 1 / -1; font-size: var(--text-mikro); color: var(--akzent); }
.skat-ansage { gap: var(--raum-2); align-content: center; }
.skat-ansage b { font-family: var(--schrift-display); font-size: var(--text-titel-s); color: var(--akzent); }

@media (min-width: 600px) {
  .skat-hand, .skat-mitte { --kb: 4.4rem; }
}

@media (max-width: 560px) {
  .skat-tisch { padding: var(--raum-2); }
  .skat-platz b { font-size: var(--text-klein); }
}
.skat-aktionen:empty { display: none; }
.skat-haken { gap: var(--raum-4); }
.skat-stand { list-style: none; display: grid; gap: var(--raum-1); }
.skat-stand li { display: flex; justify-content: space-between; gap: var(--raum-3); }
.skat-stand li b { font-family: var(--schrift-display); color: var(--text-stark); }
.skat-stand li.ich span { color: var(--akzent); }
.skat-ergebnis.gut { color: var(--gut-text); }
.skat-ergebnis.schlecht { color: var(--schlecht-text); }
.skat-liste td.plus { color: var(--gut-text); }
.skat-liste td.minus { color: var(--schlecht-text); }
.skat-liste tr.summe td { font-weight: var(--gewicht-fett); color: var(--text-stark); }
.skat-stiche { display: grid; gap: var(--raum-2); padding-left: 1.4em; }
.skat-stiche li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); }
.skat-blatt b { color: var(--text-stark); }

.mini-skat { background: color-mix(in oklab, var(--daten-2) 22%, var(--flaeche)); }
.mini-skat .mini-karte { fill: var(--karte-flaeche); stroke: var(--karte-rand); stroke-width: 0.1; }
.mini-skat .farbe-C { color: var(--blatt-eichel); }
.mini-skat .farbe-H { color: var(--blatt-rot); }

/* Raster nie breiter als die Seite: Breite Inhalte (Tabellen) scrollen in sich statt die Seite zu verbreitern. */
.stapel, .stapel-weit { grid-template-columns: minmax(0, 1fr); }

/* ---- Bilanz: Gegner als Zwischenzeile, darunter je Spiel + = − ---------------- */
.bilanz th, .bilanz td { padding-left: var(--raum-3); padding-right: var(--raum-3); }
.bilanz th:not(:first-child) { width: 3.2em; font-size: var(--text-klein); letter-spacing: 0; }
.bilanz tbody tr.bilanz-gegner td { padding-top: var(--raum-4); padding-bottom: var(--raum-1); border-bottom: none; overflow-wrap: anywhere; }
.bilanz tbody tr.bilanz-gegner:hover { background: none; }
.bilanz tbody td.bilanz-spiel { font-weight: var(--gewicht-text); color: var(--text); padding-left: var(--raum-5); }

/* Stichstapel je Platz (verdeckt, mit Zahl) und beim Alleinspieler der Skat */
.skat-ablagen { display: flex; align-items: center; gap: var(--raum-3); min-height: 1.9rem; }
.skat-platz.rechts .skat-ablagen { justify-content: flex-end; }
.skat-stichstapel { display: inline-flex; align-items: center; gap: var(--raum-1); }
.skat-stichstapel .stapel-karten { position: relative; display: inline-block; width: 1.9rem; height: 1.4rem; }
.skat-stichstapel .stapel-karten .spielkarte { --kb: 1rem; position: absolute; left: 0.45rem; top: -0.3rem; rotate: 90deg; box-shadow: none; }
.skat-stichstapel.leer .stapel-karten { border: 1px dashed var(--linie); border-radius: 3px; }
.skat-ablage { display: inline-grid; grid-auto-flow: column; touch-action: none; user-select: none; -webkit-user-select: none; }
.skat-ablage.unterwegs { visibility: hidden; }
.skat-ablage .ablage-karte { display: grid; }
.skat-ablage .ablage-karte > * { grid-area: 1 / 1; --kb: 1.6rem; }
.skat-ablage .ablage-karte + .ablage-karte { margin-left: -0.6rem; rotate: 8deg; }
.skat-ablage .ablage-karte > .spielkarte:not(.ruecken) { visibility: hidden; }
.skat-ablage .ablage-karte > .spielkarte:not(.ruecken) .bild { display: none; }
.skat-ablage .ablage-karte > .spielkarte:not(.ruecken) .ecke { position: static; }
.skat-ablage.meine { cursor: pointer; border-radius: 3px; }
.skat-ablage.meine:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: 2px; }
/* Gedrückt halten: Die eigenen gedrückten Karten drehen sich um */
.skat-ablage.zeigt .ablage-karte > .ruecken { visibility: hidden; }
.skat-ablage.zeigt .ablage-karte > .spielkarte:not(.ruecken) { visibility: visible; animation: umdrehen 0.18s ease-out; }
.skat-ablage.zeigt .ablage-karte > * { --kb: 2.6rem; }

/* Rechts unten: der letzte Stich */
.skat-letzter { grid-area: letzter; justify-self: end; display: grid; gap: var(--raum-1); justify-items: end; }
.skat-letzter-titel { font-size: var(--text-mikro); color: var(--text-stark); white-space: nowrap; }
.skat-letzter-karten { display: flex; gap: 2px; }
.skat-letzter-karten .spielkarte { --kb: 1.9rem; }
.skat-letzter-karten .spielkarte.sticht { box-shadow: 0 0 0 2px var(--akzent); }
.skat-letzter-karten .platzhalter-karte { background: transparent; border: 1px dashed var(--linie); box-shadow: none; }

/* Ein fertiger Stich blendet nach drei Sekunden langsam aus */
.skat-mitte.blendet-aus .stich-platz, .skat-mitte.blendet-aus .skat-mitte-text { animation: ausblenden 1s ease-in forwards; }
@keyframes ausblenden { to { opacity: 0; } }
/* Eigene Karten nach dem Geben aufdecken */
.skat-hand .spielkarte.aufdecken { animation: umdrehen 0.4s ease-out; }
@keyframes umdrehen { from { scale: 0 1; } to { scale: 1 1; } }

/* Texte, die sich ständig ändern: feste Größe, damit nichts springt */
.skat-statusbox {
  display: grid; align-content: start; gap: var(--raum-1); height: 5.6rem; overflow: hidden;
  padding: var(--raum-2) var(--raum-3); border-left: 2px solid var(--akzent); background: var(--linie-hauch);
}
.skat-statusbox .partie-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skat-statusbox .skat-statustext {
  font-size: var(--text-klein); color: var(--text-leise); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .skat-mitte.blendet-aus .stich-platz, .skat-hand .spielkarte.aufdecken, .skat-ablage.zeigt .spielkarte { animation: none; }
}
.skat-zeile { height: 2rem; display: flex; align-items: center; }
.skat-platz.rechts .skat-zeile { justify-content: flex-end; }
.skat-platz .pill-reihe .konto-meta { margin: 0; }
.skat-ruecken { height: calc(1.4rem * 1.4); }
.skat-offen { min-height: calc(1.4rem * 1.4); }
.skat-platz .pill-reihe { flex-wrap: nowrap; min-width: 0; }
.skat-platz .pill-reihe b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.skat-dran { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; visibility: hidden; background: var(--akzent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--akzent) 35%, transparent); }
.skat-dran.an { visibility: visible; animation: dran-punkt 1.4s ease-in-out infinite; }
@keyframes dran-punkt { 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--akzent) 10%, transparent); } }
.skat-letzter-titel { text-align: right; line-height: 1.2; }
.skat-letzter-titel .konto-meta { margin: 0; }
@media (prefers-reduced-motion: reduce) { .skat-dran.an { animation: none; } }

/* Reizen: Sprechblasen an den Plätzen, die Spitze zeigt zum Namen. Wer zuletzt gesprochen hat, steht
   vorn; eine neue Blase geht auf. Zur Auswahl stehen am eigenen Platz antippbare Blasen. */
.skat-platz.unten .skat-zeile { height: 3rem; }
.skat-blase {
  position: relative; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.3rem;
  min-width: 2.6rem; padding: 0.15rem 0.7rem; border-radius: 1rem; border: 1px solid var(--text-titel);
  background: var(--text-titel); color: var(--tinte); white-space: nowrap;
  font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-basis); line-height: 1.3;
  opacity: 0.62; transform-origin: 0.9rem -0.3rem;
}
.skat-blase::before {
  content: ''; position: absolute; top: -0.32rem; left: 0.6rem; width: 0.55rem; height: 0.55rem;
  background: inherit; border: inherit; border-right: 0; border-bottom: 0; rotate: 45deg;
}
.skat-platz.rechts .skat-blase { transform-origin: calc(100% - 0.9rem) -0.3rem; }
.skat-platz.rechts .skat-blase::before { left: auto; right: 0.6rem; }
.skat-blase.passe { font-size: var(--text-klein); }
.skat-blase.zuletzt { opacity: 1; box-shadow: 0 2px 8px rgb(0 0 0 / 0.35); }
.skat-blase.neu { animation: blase-auf 0.35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes blase-auf { from { scale: 0.3; opacity: 0; } }
.skat-wahl { display: flex; align-items: center; gap: var(--raum-2); }
.skat-blase.waehlen {
  opacity: 1; min-width: 3.4rem; min-height: 2.4rem; padding: 0.3rem 1rem; cursor: pointer;
  background: var(--akzent); border-color: var(--akzent); color: var(--tinte); font-size: var(--text-lead);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
}
.skat-blase.waehlen.passe { background: var(--flaeche-hoch); color: var(--text-stark); font-size: var(--text-klein); }
.skat-blase.waehlen:hover { filter: brightness(1.08); }
.skat-blase.waehlen:active { scale: 0.96; }
.skat-blase.waehlen:focus-visible { outline: var(--fokus-breite) solid var(--fokus-farbe); outline-offset: var(--fokus-abstand); }
@media (prefers-reduced-motion: reduce) { .skat-blase.neu { animation: none; } }

/* ---- Start und Spielwahl: große Wahlen mit Bild, Name, Satz und Pfeil ---------- */
.wahl-liste { display: grid; gap: var(--raum-4); }
.wahl {
  display: flex; align-items: center; gap: var(--raum-4); padding: var(--raum-5);
  color: inherit; transition: border-color 0.15s ease;
}
.wahl:hover, .wahl:focus-visible { text-decoration: none; border-color: var(--akzent); }
.wahl:hover .wahl-titel { color: var(--akzent); }
.wahl-bild { flex: none; display: grid; place-items: center; width: 64px; height: 64px; }
.wahl-bild > svg:not(.mini-brett) { width: 40px; height: 40px; fill: var(--akzent); }
.wahl-bild .mini-brett { width: 64px; height: 64px; }
.wahl-text { display: grid; gap: var(--raum-1); flex: 1; min-width: 0; }
.wahl-titel { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-gross); color: var(--text-titel); }
.wahl-text .konto-meta { margin-top: 0; }
.wahl-text .pill-reihe:empty { display: none; }
.wahl-pfeil { flex: none; display: grid; }
.wahl-pfeil svg { width: 24px; height: 24px; fill: var(--text-leise); }
@media (max-width: 560px) {
  .wahl { padding: var(--raum-4); gap: var(--raum-3); }
  .wahl-bild, .wahl-bild .mini-brett { width: 52px; height: 52px; }
}

/* Unterseiten: zurück, darunter die Überschrift */
.seiten-kopf { display: grid; gap: var(--raum-2); justify-items: start; }
.zurueck { display: inline-flex; align-items: center; gap: var(--raum-1); font-size: var(--text-klein); color: var(--text-leise); }
.zurueck svg { width: 20px; height: 20px; fill: currentColor; margin-left: -6px; }
.zurueck:hover { color: var(--akzent); text-decoration: none; }
.seiten-titel { font-family: var(--schrift-display); font-weight: var(--gewicht-display); font-size: var(--text-titel-s); color: var(--text-titel); }