/* Gestaltung der Startseite und aller Kontoseiten.
   Ein einziges Stylesheet, absichtlich klein gehalten. Farben liegen als
   Variablen vor und werden für das dunkle Systemthema neu belegt. */

:root {
  --grund: #f6f7f9;
  --flaeche: #ffffff;
  --flaeche-2: #eef0f4;
  --rand: #d8dce4;
  --text: #1b1f27;
  --text-leise: #5c6474;
  --akzent: #2f6fd0;
  --akzent-text: #ffffff;
  --gut: #1f7a4d;
  --gut-text: #ffffff;
  /* Sättigung und Helligkeit der Farbfläche hinter Spielsymbolen; den
     Farbton bringt jedes Spiel selbst mit (--farbton). */
  --spielflaeche: 42% 44%;
  /* Changelog der Spiele: Farben der Rubriken und der großen Erweiterungen. */
  --cl-neu: #6d4bd8;
  --cl-verbessert: #0e7f95;
  --cl-major: #b8327c;
  /* Alles, was zur Beta gehört: Marken, zweiter Spielen-Knopf, Hinweis. */
  --beta: #7a44c9;
  --beta-text: #ffffff;
  /* „Coming Soon“: bewusst weit weg vom Violett der Beta. */
  --angekuendigt: #0e7f95;
  --angekuendigt-text: #ffffff;
  --schlecht: #b3261e;
  --warnung: #a35f00;
  --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --radius: 12px;
  /* Interne Notizen im Support: nur für das Team, deshalb gelb abgesetzt. */
  --notiz: #fff6d6;
  --notiz-rand: #d9b93f;

  /* Die drei Würfelflächen der Wortmarke, Licht von oben. Die Augen tragen die
     Farbe der Kopfzeile und wirken dadurch ausgestanzt statt aufgemalt. */
  --logo-hell: #6ea6f8;
  --logo-mittel: #2f6fd0;
  --logo-dunkel: #21508f;
  --logo-auge: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14161b;
    --flaeche: #1c1f26;
    --flaeche-2: #23272f;
    --rand: #333944;
    --text: #e9ecf1;
    --text-leise: #9aa3b2;
    --akzent: #5a9bf6;
    --akzent-text: #0e1117;
    --gut: #4ac98a;
    --gut-text: #0e1117;
    --spielflaeche: 34% 32%;
    --cl-neu: #a78bfa;
    --cl-verbessert: #22d3ee;
    --cl-major: #f9a8d4;
    --beta: #b794f6;
    --beta-text: #14161b;
    --angekuendigt: #22d3ee;
    --angekuendigt-text: #14161b;
    --schlecht: #ff8a80;
    --warnung: #f0a93b;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --notiz: #342e14;
    --notiz-rand: #7a6a22;

    --logo-hell: #8fbcff;
    --logo-mittel: #5a9bf6;
    --logo-dunkel: #3a6dad;
    --logo-auge: #1c1f26;
  }
}

* { box-sizing: border-box; }
/* Klassen wie .zeile setzen display und würden das hidden-Attribut sonst aushebeln. */
[hidden] { display: none !important; }
/* Nur für Screenreader: Ansagen, die sichtbar nichts beitragen. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--akzent); }
a:hover { text-decoration: none; }
/* Adresse und Telefonnummer ohne JavaScript: Die Umschreibung ist kein Link
   und soll nicht wie einer aussehen. */
a.kontakt:not([href]) { color: inherit; }

/* ------------------------------------------------------------- Kopfzeile */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}
.kopf-innen {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.marke {
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.marke .logo { flex: none; }
/* Ein langer Seitentitel wird gekürzt, statt die Navigation aus der Zeile zu
   schieben. */
.marke { min-width: 0; }
.marke span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf nav { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.kopf nav a {
  color: var(--text-leise);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 15px;
}
.kopf nav a:hover { background: var(--flaeche-2); color: var(--text); }

/* ----------------------------------------------------------- Profilmenü */
/* Ein <details>: klappt ohne JavaScript. Das Dreieck des <summary> wird
   entfernt, damit nur das Symbol steht. */

.profil { position: relative; }
.profil > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 99px;
  border: 1px solid var(--rand);
  color: var(--text-leise);
  background: var(--flaeche);
}
.profil > summary::-webkit-details-marker { display: none; }
.profil > summary:hover { background: var(--flaeche-2); color: var(--text); }
.profil[open] > summary { border-color: var(--akzent); color: var(--text); }

.profil-menue {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  box-shadow: var(--schatten);
  padding: 6px;
  z-index: 30;
}
.profil-kopf {
  padding: 6px 10px 8px;
  font-size: 13px;
  color: var(--text-leise);
  border-bottom: 1px solid var(--rand);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kopf nav .profil-menue a {
  display: block;
  padding: 8px 10px;
  font-size: 15px;
  color: var(--text);
  border-radius: 7px;
}
.kopf nav .profil-menue a:hover { background: var(--flaeche-2); }
.profil-menue hr { border: 0; border-top: 1px solid var(--rand); margin: 6px 0; }
.kopf nav .profil-menue a.abmelden { color: var(--schlecht); }
.kopf nav .profil-menue a.abmelden:hover {
  background: color-mix(in srgb, var(--schlecht) 14%, var(--flaeche));
}

/* ---------------------------------------------------------------- Rumpf */

main { flex: 1; max-width: 900px; width: 100%; margin: 0 auto; padding: 32px 16px 48px; }
main.schmal { max-width: 460px; }
main.mittel { max-width: 720px; }
main.breit { max-width: 1100px; }

h1 { font-size: 28px; line-height: 1.25; margin: 0 0 8px; letter-spacing: -.02em; }
h2 { font-size: 20px; margin: 32px 0 8px; letter-spacing: -.01em; }
h3 { font-size: 17px; margin: 24px 0 4px; }
.untertitel { color: var(--text-leise); margin: 0 0 28px; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--schatten);
}
.karte + .karte { margin-top: 16px; }
/* Auch nach dem Rahmen einer Live-Suche (data-suchergebnis), in dem die
   letzte Karte steckt — sonst klebt die nächste Karte direkt darunter. */
[data-suchergebnis] + .karte { margin-top: 16px; }

/* Seitennavigation der Verwaltung: links eine senkrechte Liste, rechts der
   Inhalt. Die Liste kommt zur gewohnten Inhaltsbreite dazu (main.mit-seitennav),
   damit Karten und Tabellen so breit bleiben wie ohne sie. Unter 900 px liegt
   die Liste waagerecht über dem Inhalt, der Zurück-Link darüber. */
main.mit-seitennav { max-width: 1114px; }
main.mit-seitennav.breit { max-width: 1314px; }
.seitennav-raster { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.seitennav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; }
.seitennav a {
  color: var(--text-leise);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 15px;
}
.seitennav a:hover { background: var(--flaeche-2); color: var(--text); }
.seitennav a[aria-current="page"] {
  background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche));
  color: var(--text);
  font-weight: 600;
}
.seitennav a:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.seitennav .seitennav-zurueck { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); border-radius: 0; font-size: 14px; }
.seitennav .seitennav-zurueck:hover { background: none; }
/* Seiten ohne eigene Abschnitte: Der Zurück-Link steht allein, ohne Strich. */
.seitennav .seitennav-zurueck:first-child { margin-top: 0; padding-top: 8px; border-top: 0; }
.seitennav-inhalt > .meldung:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .seitennav-raster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .seitennav { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .seitennav .seitennav-zurueck { order: -1; flex-basis: 100%; margin: 0; padding: 0 0 6px; border-top: 0; }
}

/* ----------------------------------------------------------- Spielkacheln */
/* Ein Raster aus großen Titelbildern mit Name und einer kurzen Zeile. Der
   ausführliche Text steht im Spielfenster, nicht auf der Kachel — sonst werden
   die Kacheln unterschiedlich hoch. */

h2.abschnitt { margin: 4px 0 14px; }
h1 + h2.abschnitt, .meldung + h2.abschnitt { margin-top: 24px; }
/* Systemnachrichten für die Startseite: Banner über den Spielen. Farbton und
   Symbol zeigen die Art. */
.banner-nachrichten { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 32px; }
main > .banner-nachrichten:first-child { margin-top: 0; }
.banner-nachricht {
  --ton: var(--akzent);
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--ton) 35%, var(--rand));
  border-radius: var(--radius);
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--ton) 16%, var(--flaeche)),
    color-mix(in srgb, var(--ton) 4%, var(--flaeche)) 70%);
}
.banner-nachricht.wichtig { --ton: var(--schlecht); }
.banner-symbol {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ton); color: var(--flaeche);
}
.banner-text { flex: 1; min-width: 0; }
.banner-kopf { font-size: 13px; color: var(--text-leise); }
.banner-text b { display: block; margin-top: 2px; font-size: 17px; }
/* Zeilenumbrüche aus dem Eingabefeld bleiben stehen. */
.banner-text p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
/* Der zweite Abschnitt der Startseite („Angekündigt“) unter den Kacheln des ersten. */
.kacheln + h2.abschnitt { margin-top: 32px; }

.kacheln { display: grid; gap: 20px 16px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.kachel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}
.kachel .spielbild { box-shadow: var(--schatten); transition: transform .15s ease; }
.kachel:hover .spielbild { transform: translateY(-3px); }
.kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.kachel-name {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kachel-zeile { font-size: 13px; color: var(--text-leise); }

/* Titelbild eines Spiels. Rückfälle der Reihe nach: Titelbild, Symbol auf der
   Farbfläche des Spiels, Anfangsbuchstabe. Ein Bild, das nicht lädt, entfernt
   sich selbst (seite.js) — dann greifen die Regeln für den nächsten Rückfall
   nicht mehr, die ihn sonst verbergen. */
.spielbild {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: hsl(var(--farbton, 215) var(--spielflaeche));
}
.spielbild.gross { aspect-ratio: 16 / 9; }
.spielbild .titelbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spielbild .symbol { width: 52%; height: 52%; object-fit: contain; }
.spielbild.gross .titelbild { object-fit: contain; }
.spielbild.gross .symbol { width: 34%; height: 46%; }
.spielbild .ersatz { font-size: 56px; font-weight: 700; color: rgba(255, 255, 255, .92); }
.spielbild.gross .ersatz { font-size: 88px; }
.spielbild .titelbild ~ .symbol,
.spielbild img ~ .ersatz { display: none; }
/* Beta-Marke oben links auf dem Bild — auf jedem Titelbild lesbar, weil sie
   eine eigene Fläche mitbringt. */
.spielbild-marke {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--beta);
  color: var(--beta-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.spielbild.gross .spielbild-marke { top: 12px; left: 12px; font-size: 13px; }
/* „Coming Soon“ in eigener Farbe, damit es sich von der Beta abhebt. */
.spielbild-marke.angekuendigt { background: var(--angekuendigt); color: var(--angekuendigt-text); }
/* Erreichbarkeit oben rechts, gegenüber der Beta-Marke und genauso gebaut:
   eine eigene Fläche, damit sie auf jedem Titelbild lesbar bleibt. Reicht der
   Platz neben einer Beta-Marke nicht, bleibt nur der Punkt stehen (.eng); der
   Text ist dann noch für Screenreader und als Tooltip da. Ob es reicht, misst
   seite.js an den echten Breiten und markiert das Bild danach mit
   data-platz-geprueft. Ohne Skript greift ersatzweise eine feste Grenze. */
.kachel .spielbild { container-type: inline-size; }
.spielbild-status {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--flaeche);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.spielbild-status .punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-leise); }
.spielbild-status[data-zustand="online"] .punkt { background: var(--gut); }
.spielbild-status[data-zustand="offline"] .punkt { background: var(--schlecht); }
.spielbild-status[data-zustand="wartung"] .punkt { background: var(--warnung); }
.spielbild-status.eng { padding: 5px; }
.spielbild-status.eng .status-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Im Spielfenster über dem ganzen Bildbereich, so groß wie die Beta-Marke
   dort. Dort ist immer Platz für den Text. */
.spielfenster-bild { position: relative; }
.spielbild-status.gross { top: 12px; right: 12px; z-index: 1; font-size: 13px; }
@container (max-width: 219px) {
  .spielbild:not([data-platz-geprueft]):has(.spielbild-marke) .spielbild-status { padding: 5px; }
  .spielbild:not([data-platz-geprueft]):has(.spielbild-marke) .status-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* Geräte unten links auf der Kachel: immer alle drei Symbole, die nicht
   optimierten ausgegraut. Dunkle Fläche in beiden Farbschemata, damit der
   Unterschied zwischen hell und ausgegraut auf jedem Titelbild trägt. */
.spielbild-geraete {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 99px;
  background: rgba(8, 10, 14, .72);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.spielbild-geraete span { display: flex; }
.spielbild-geraete .aus { color: rgba(255, 255, 255, .3); }

.konto-hinweis {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
}
.konto-hinweis b { display: block; }
.konto-hinweis span { color: var(--text-leise); font-size: 15px; }
.konto-hinweis .zeile { gap: 8px; }
/* Über den Kacheln statt darunter: der Hinweis auf die Zwei-Faktor-Anmeldung. */
.konto-hinweis.oben { margin: 20px 0 8px; }
.konto-hinweis.oben > div:first-child { flex: 1 1 280px; }

/* ----------------------------------------------------------- Spielfenster */
/* Ein <dialog> über der ganzen Seite. Der abgedunkelte Hintergrund ist der
   Dialog selbst, nicht ::backdrop: Ohne JavaScript steht das Fenster nur über
   data-vorgeoeffnet, und nur ein modal geöffneter Dialog hat ein ::backdrop.
   So sieht es mit und ohne Skript gleich aus, und ein Klick auf den Dialog
   selbst ist ein Klick daneben. */

.spielfenster[data-vorgeoeffnet] { display: block; }
.spielfenster {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 40px 16px;
  border: 0;
  background: rgba(8, 10, 14, .62);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.spielfenster::backdrop { background: transparent; }
body:has(.spielfenster[open]),
body:has(.spielfenster[data-vorgeoeffnet]) { overflow: hidden; }

.spielfenster-innen {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 16px;
  box-shadow: var(--schatten);
}
.spielfenster-zu {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: var(--flaeche-2);
  color: var(--text-leise);
}
.spielfenster-zu:hover { color: var(--text); }
.spielfenster-zu:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Screenshots: ohne Skript ein Streifen zum Wischen und Scrollen; mit Skript
   (.aktiv) ohne Scrollleiste, geblättert wird über Pfeile und Vorschau. */
.galerie-buehne { position: relative; }
.galerie-pfeil {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(8, 10, 14, .55);
  color: #fff;
  cursor: pointer;
}
.galerie-pfeil.zurueck { left: 10px; }
.galerie-pfeil.weiter { right: 10px; }
.galerie.aktiv .galerie-pfeil { display: flex; }
.galerie-pfeil:hover { background: rgba(8, 10, 14, .8); }
.galerie-pfeil:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.galerie-streifen {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--radius);
}
.galerie-streifen > img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
}
/* Das Titelbild als erste Folie, ganz zu sehen auf der Farbfläche des Spiels. */
.galerie-streifen > .spielbild { flex: 0 0 100%; border-radius: 0; scroll-snap-align: start; }
.galerie.aktiv .galerie-streifen { scrollbar-width: none; }
.galerie.aktiv .galerie-streifen::-webkit-scrollbar { display: none; }
.galerie-vorschau { display: none; gap: 8px; margin-top: 10px; overflow-x: auto; }
.galerie.aktiv .galerie-vorschau { display: flex; }
.galerie-vorschau button {
  flex: none;
  width: 92px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .65;
}
.galerie-vorschau button:hover { opacity: 1; }
.galerie-vorschau button[aria-current="true"] { border-color: var(--akzent); opacity: 1; }
.galerie-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie-vorschau .vorschau-titel { background: hsl(var(--farbton, 215) var(--spielflaeche)); }
.galerie-vorschau .vorschau-titel img { object-fit: contain; }

.spielfenster-oben {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
/* Rechts bleibt oben Platz für den Schließen-Knopf. */
.spielfenster-seite { min-width: 0; padding-top: 2px; }
.spielfenster-seite h2 { margin: 0 44px 6px 0; font-size: 24px; overflow-wrap: anywhere; }
.spielfenster-seite h3 { margin: 18px 0 4px; font-size: 15px; }
.spielfenster-seite .knopf.spielen { width: 100%; margin-top: 18px; }
.spielfenster-zahlen { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; }
.spielfenster-zahlen dt { font-size: 12px; color: var(--text-leise); }
.spielfenster-zahlen dd { margin: 0; font-weight: 600; }
/* „Optimiert für“ im Spielfenster: beschriftet wie die Zahlen darüber. */
.spielfenster-geraete { margin-top: 14px; }
.spielfenster-geraete-titel { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-leise); }
.spielfenster-geraete ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.spielfenster-geraete li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--rand);
  border-radius: 99px;
  font-size: 14px;
}
.spielfenster-geraete-keins { font-weight: 600; }

/* Rückfrage vor dem Spielen auf einem Gerät, für das das Spiel nicht
   optimiert ist: ein <dialog>, den seite.js anlegt. */
.geraete-warnung {
  width: min(360px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: var(--schatten);
}
.geraete-warnung::backdrop { background: rgba(8, 10, 14, .62); }
.geraete-warnung b { display: block; font-size: 17px; color: var(--warnung); }
.geraete-warnung p { margin: 6px 0 0; font-size: 15px; color: var(--text-leise); }
.geraete-warnung .zeile { margin-top: 16px; flex-direction: column; align-items: stretch; gap: 8px; }
.geraete-warnung .knopf { margin-top: 0; text-align: center; }

.knopf.spielen {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px;
  border-radius: 10px;
  background: var(--gut);
  color: var(--gut-text);
  font-size: 17px;
}

/* Zweiter Knopf für Tester: dieselbe Form, eigene Farbe. */
.knopf.spielen.beta { background: var(--beta); color: var(--beta-text); }
.spielfenster-seite .knopf.spielen.beta { margin-top: 10px; }
.spielfenster-seite .beta-unter,
.spielfenster-seite .angekuendigt-hinweis { margin: 6px 0 0; }
/* Spielen-Knopf eines Spiels, das gerade nicht erreichbar ist. */
.knopf.spielen.gesperrt {
  background: var(--flaeche-2);
  color: var(--text-leise);
  border-color: var(--rand);
  cursor: not-allowed;
  filter: none;
}
.spielfenster-seite .offline-hinweis { margin: 6px 0 0; color: var(--schlecht); }
/* Statt des Spielen-Knopfs bei einem Spiel, das nur für Tester ist. */
.beta-hinweis {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--beta) 45%, transparent);
  background: color-mix(in srgb, var(--beta) 10%, var(--flaeche));
}
.beta-hinweis b { color: var(--beta); }
.beta-hinweis p { margin: 4px 0 0; font-size: 15px; color: var(--text-leise); }
/* Beitritt zu einer offenen Beta, im selben Kasten. */
.beta-hinweis form { margin: 10px 0 0; }
.knopf.beta-beitreten { background: var(--beta); color: var(--beta-text); }
/* Neben der normalen Version steht der Kasten unter dem Spielen-Knopf. */
.spielfenster-seite .knopf.spielen ~ .beta-hinweis { margin-top: 14px; }
.spielfenster-seite > .meldung { margin: 14px 0 0; }
/* Unter dem gesperrten Spielen-Knopf, solange das Spiel in Wartung ist. */
.wartung-hinweis {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--warnung) 45%, transparent);
  background: color-mix(in srgb, var(--warnung) 10%, var(--flaeche));
}
.wartung-hinweis b { color: var(--warnung); }
.wartung-hinweis p { margin: 4px 0 0; font-size: 15px; color: var(--text-leise); }
.wartung-hinweis .wartung-hinweis-info { color: var(--text); white-space: pre-line; }
.wartung-hinweis .hinweis { font-size: 13px; }

.spielfenster-nachrichten { margin-top: 20px; }
.spielfenster-teil { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rand); }
.spielfenster-teil h3 { margin: 0 0 8px; }
/* Zeilenumbrüche aus der Beschreibung in der Verwaltung bleiben stehen. */
.spielfenster-text { margin: 0; white-space: pre-line; color: var(--text-leise); font-size: 15px; }

/* Reiter für Neuigkeiten und Spielstände. Die Leiste baut seite.js; ohne sie
   (kein Skript, nur ein Abschnitt) bleiben die Abschnitte mit Überschrift. */
.reiterleiste {
  display: flex;
  gap: 4px;
  margin-top: 22px;
  border-bottom: 1px solid var(--rand);
}
.reiterleiste button {
  padding: 9px 14px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.reiterleiste button:hover { color: var(--text); }
.reiterleiste button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--akzent); }
.reiterleiste button:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.spielfenster-reiter.aktiv .spielfenster-teil { margin-top: 0; padding-top: 14px; border-top: 0; }
.spielfenster-reiter.aktiv .spielfenster-teil > h3 { display: none; }

/* Unter 720 px steht alles untereinander: Bild, Text, Knopf, Reiter. */
@media (max-width: 720px) {
  .spielfenster-oben { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .spielfenster-seite h2 { margin-right: 0; }
  /* Der Schließen-Knopf liegt jetzt auf dem Bild. */
  .spielfenster-zu { top: 28px; right: 28px; background: rgba(8, 10, 14, .55); color: #fff; }
  .spielfenster-zu:hover { background: rgba(8, 10, 14, .8); color: #fff; }
  /* Die Statuspille rückt links neben den Schließen-Knopf, auf seine Höhe. */
  .spielbild-status.gross { top: 14px; right: 52px; }
}

/* Changelog eines Spiels, aufgebaut wie in den Spielen: Liste der Versionen
   links, gewählte Version rechts; auf schmalen Bildschirmen liegt die Liste
   waagerecht darüber. Die Farben folgen dem Farbschema dieser Seite. */
.changelog-alle { margin-top: 14px; }
.changelog-alle > summary { list-style: none; }
.changelog-alle > summary::-webkit-details-marker { display: none; }
.changelog-alle > summary::after { content: " ▾"; }
.changelog-alle[open] > summary::after { content: " ▴"; }
.changelog-alle .cl-wrap { margin-top: 12px; }

.cl-wrap { display: flex; gap: 16px; align-items: stretch; max-height: min(64vh, 560px); }
.cl-liste {
  flex: 0 0 224px;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-right: 4px;
}
.cl-liste-kopf {
  flex-shrink: 0;
  padding: 0 2px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-leise);
}
/* flex-shrink: 0, sonst staucht die gedeckelte Liste ihre Einträge zusammen,
   statt zu scrollen. */
.cl-v {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand);
  border-radius: 9px;
  background: var(--grund);
  color: var(--text);
  text-decoration: none;
}
.cl-v:hover { background: var(--flaeche-2); }
.cl-v.on {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 12%, var(--flaeche));
}
.cl-v-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cl-v-kopf b { font-size: 14px; font-variant-numeric: tabular-nums; }
.cl-v-kopf .hinweis, .cl-v-fuss .hinweis { margin: 0; font-size: 12px; }
.cl-v-titel { font-size: 13px; line-height: 1.35; color: var(--text-leise); }
.cl-v-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; margin-top: 2px; }
.cl-detail { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding-right: 4px; }
/* Ohne Skript stehen alle Versionen untereinander. Mit Skript (.aktiv) ist
   nur eine sichtbar — die ausgeblendeten zählen für + aber weiter mit. */
.changelog-alle:not(.aktiv) .cl-detail .cl-version + .cl-version { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rand); }

.cl-art {
  padding: 2px 8px;
  border: 1px solid var(--rand);
  border-radius: 99px;
  background: var(--flaeche-2);
  color: var(--text-leise);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cl-art.major { color: var(--cl-major); border-color: color-mix(in srgb, var(--cl-major) 45%, transparent); background: color-mix(in srgb, var(--cl-major) 12%, var(--flaeche)); }
.cl-art.minor { color: var(--cl-neu); border-color: color-mix(in srgb, var(--cl-neu) 45%, transparent); background: color-mix(in srgb, var(--cl-neu) 12%, var(--flaeche)); }
.cl-art.patch { color: var(--cl-verbessert); border-color: color-mix(in srgb, var(--cl-verbessert) 45%, transparent); background: color-mix(in srgb, var(--cl-verbessert) 10%, var(--flaeche)); }
.cl-art.jetzt { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 45%, transparent); background: color-mix(in srgb, var(--gut) 12%, var(--flaeche)); }

.cl-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.cl-kopf-nr {
  flex-shrink: 0;
  padding: 7px 13px;
  border: 1px solid color-mix(in srgb, var(--cl-neu) 40%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cl-neu) 14%, var(--flaeche));
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cl-kopf-txt { min-width: 0; }
.cl-kopf-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.cl-kopf-meta .hinweis { margin: 0; }
.cl-kopf-txt h4 { margin: 0; font-size: 17px; line-height: 1.25; }
.cl-kurz {
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 2px solid var(--rand);
  font-size: 15px;
  color: var(--text-leise);
}
.cl-rub { margin-bottom: 16px; }
.cl-rub:last-child { margin-bottom: 0; }
.cl-rub h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cl-rub.neu h5 { color: var(--cl-neu); }
.cl-rub.verbessert h5 { color: var(--cl-verbessert); }
.cl-rub.behoben h5 { color: var(--gut); }
.cl-rub-n {
  margin-left: auto;
  padding: 1px 8px;
  border: 1px solid var(--rand);
  border-radius: 99px;
  background: var(--flaeche-2);
  color: var(--text-leise);
  font-size: 11px;
}
.cl-rub ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cl-rub li {
  padding: 9px 12px;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand);
  border-radius: 9px;
  background: var(--grund);
}
.cl-rub.neu li { border-left-color: var(--cl-neu); }
.cl-rub.verbessert li { border-left-color: var(--cl-verbessert); }
.cl-rub.behoben li { border-left-color: var(--gut); }
.cl-rub li b { display: block; margin-bottom: 2px; font-size: 15px; }
.cl-rub li span { font-size: 14px; line-height: 1.55; color: var(--text-leise); }

.staende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* Überschrift „Beta-Spielstände“ unter den eigenen Ständen (nur für Tester). */
.staende-titel { margin: 18px 0 8px; font-size: 14px; }
.staende li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 9px;
}
.stand-platz {
  flex: none;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: var(--flaeche-2);
  font-size: 14px;
  font-weight: 600;
}
.stand-text { flex: 1; min-width: 0; }
.stand-text b { display: block; overflow-wrap: anywhere; }
.stand-zeit { margin: 0; white-space: nowrap; }

.leer {
  border: 1px dashed var(--rand);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--text-leise);
}

/* -------------------------------------------------------------- Formular */

label { display: block; margin: 14px 0 4px; font-size: 14px; color: var(--text-leise); }
input[type=text], input[type=email], input[type=password], input[type=url],
input[type=search], input[type=datetime-local], textarea, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--grund);
  color: var(--text);
  font: inherit;
}
/* Kalendersymbol und Auswahl folgen dem Farbschema, sonst stünde im
   dunklen ein schwarzes Symbol auf dunklem Grund. */
input[type=datetime-local] { color-scheme: light dark; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-color: var(--akzent);
}
.hinweis { font-size: 13px; color: var(--text-leise); margin-top: 4px; }
/* Rückmeldung unter einem Feld während der Eingabe (public/seite.js). Leer
   nimmt die Zeile keinen Platz ein — so auch ohne JavaScript. „wartet“: Die
   Auskunft gehört noch zur vorigen Eingabe, die neue ist unterwegs. */
.feldstatus { font-size: 13px; color: var(--text-leise); margin-top: 4px; }
.feldstatus:empty { display: none; }
.feldstatus.gut { color: var(--gut); }
.feldstatus.schlecht { color: var(--schlecht); }
.feldstatus.wartet { opacity: .5; }
/* Anforderungen an ein Passwort. Ohne Skript eine neutrale Liste; während der
   Eingabe wird jeder Punkt grün abgehakt oder rot angekreuzt — das Zeichen
   davor trägt die Aussage auch ohne die Farbe. */
.regelliste { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--text-leise); }
.regelliste li { display: flex; gap: 6px; }
.regelliste li::before { content: "•"; flex: 0 0 1em; text-align: center; }
.regelliste li.erfuellt { color: var(--gut); }
.regelliste li.erfuellt::before { content: "✓"; }
.regelliste li.offen { color: var(--schlecht); }
.regelliste li.offen::before { content: "✗"; }

.knopf {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--akzent);
  color: var(--akzent-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.knopf:hover { filter: brightness(1.08); }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf:disabled:hover { filter: none; }
.knopf.leise { background: var(--flaeche-2); color: var(--text); border-color: var(--rand); }
.knopf.gefahr { background: var(--schlecht); color: #fff; }
.knopf.klein { padding: 5px 10px; font-size: 14px; margin-top: 0; }

.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--flaeche-2);
  overflow-wrap: anywhere;
}
/* Mehrere Felder nebeneinander, auf schmalen Bildschirmen untereinander. */
.felder-reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.felder-reihe > div { flex: 1 1 160px; min-width: 0; }
.felder-reihe > .feld-breit { flex: 3 1 240px; }
textarea { resize: vertical; }

/* Suchzeile über einer Liste: Feld nimmt den Platz, Knöpfe bleiben daneben. */
.suchzeile { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.suchzeile input { flex: 1 1 220px; width: auto; }
.schalter { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.schalter input { width: auto; }
.schalter label { margin: 0; color: var(--text); font-size: 15px; }
/* „Optimiert für“ in der Spielverwaltung: beschriftet wie ein Feld. */
.geraetefelder { margin: 14px 0 0; padding: 0; border: 0; }
.geraetefelder legend { padding: 0; font-size: 14px; color: var(--text-leise); }
.geraetefelder .schalter { margin: 6px 0; }

/* ------------------------------------------------- Zwei-Faktor-Anmeldung */

/* Codes zum Abtippen: Ziffern gleich breit und mit Abstand, damit sich
   sechs Stellen auf einen Blick vergleichen lassen. */
.code-feld {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px;
  letter-spacing: .12em;
}
/* Der QR-Code bringt seinen weißen Rand mit und bleibt so auch im dunklen
   Farbschema lesbar. */
.qr { max-width: 220px; margin: 0 auto 14px; border-radius: 9px; overflow: hidden; line-height: 0; }
.qr svg { display: block; width: 100%; height: auto; }
.schluessel { font-size: 15px; letter-spacing: .06em; }
.codes {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.codes code { display: block; padding: 8px 6px; text-align: center; font-size: 16px; letter-spacing: .05em; }
/* Ein <details> für selten gebrauchte Formulare: klappt ohne JavaScript. */
.aufklapp { margin-top: 12px; border-top: 1px solid var(--rand); padding-top: 12px; }
.aufklapp > summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.aufklapp > p { font-size: 14px; color: var(--text-leise); margin: 10px 0 0; }
main.schmal > .aufklapp { border-top: 0; padding-top: 0; }
/* Längerer Hinweis mit Liste unter einem Feld (Begründung eines Antrags). */
.hinweis p { margin: 6px 0; }
.hinweis ul { margin: 4px 0; padding-left: 20px; }
.hinweis li { margin: 2px 0; }

/* -------------------------------------------------------------- Meldungen */

.meldung { padding: 12px 14px; border-radius: 9px; margin-bottom: 18px; font-size: 15px; }
.meldung.fehler { background: color-mix(in srgb, var(--schlecht) 14%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--schlecht) 40%, transparent); }
.meldung.gut    { background: color-mix(in srgb, var(--gut) 14%, var(--flaeche));      border: 1px solid color-mix(in srgb, var(--gut) 40%, transparent); }
.meldung.info   { background: var(--flaeche-2); border: 1px solid var(--rand); }

.band {
  background: color-mix(in srgb, #e0a800 20%, var(--flaeche));
  border-bottom: 1px solid var(--rand);
  padding: 8px 16px;
  text-align: center;
  font-size: 15px;
}
/* Angekündigte Wartung der Webseite, über jeder Seite bis zum Beginn. */
.band-ankuendigung {
  background: color-mix(in srgb, var(--warnung) 14%, var(--flaeche));
}
.band-ankuendigung .band-text { display: block; white-space: pre-line; overflow-wrap: anywhere; }
/* Für Admins, solange der Wartungsmodus an ist: nicht zu übersehen. */
.band-wartung {
  background: color-mix(in srgb, var(--warnung) 22%, var(--flaeche));
  font-weight: 600;
}
.band-wartung a { color: inherit; }
.karte-wartung { border-color: var(--warnung); }

/* -------------------------------------------------------------- Wartung */

/* An .karte gebunden: Die angekündigte Wartung im Spielfenster trägt dieselbe
   Klasse (.nachricht.wartung) und stünde sonst zentriert. */
.karte.wartung { text-align: center; }
.karte.wartung h1 { margin-top: 0; }
/* Zeilenumbrüche aus dem Textfeld der Verwaltung bleiben stehen. */
.wartung-info {
  white-space: pre-line;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--flaeche-2);
}
.wartung-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--text-leise);
  font-size: 14px;
}
.wartung-status .punkt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warnung);
}
/* Pulsiert nur, solange seite.js nachfragt; ohne Skript steht der Punkt still. */
.wartung-status.prueft .punkt { animation: wartung-puls 1.6s ease-in-out infinite; }
@keyframes wartung-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .wartung-status.prueft .punkt { animation: none; }
}

/* Verwaltung → Wartungsarbeiten und Systemnachrichten: die Ziele. */
.ziel-auswahl { border: 0; padding: 0; margin: 0; min-width: 0; }
* + .ziel-auswahl { margin-top: 14px; }
.ziel-auswahl legend { padding: 0; font-size: 14px; color: var(--text-leise); }
.ziel-auswahl .schalter + .hinweis { margin: -8px 0 0 26px; }
.ziel-spiele { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.ziel-spiele .schalter { margin: 8px 0; }

/* Verwaltung → Wartungsarbeiten */
.wartung-liste { display: flex; flex-direction: column; gap: 12px; }
.wartung-eintrag { padding: 12px 14px; border: 1px solid var(--rand); border-radius: 9px; background: var(--grund); }
.wartung-eintrag p { margin: 4px 0 0; }
.wartung-eintrag .wartung-info { margin-top: 8px; }
.wartung-eintrag .zeile { margin-top: 10px; }

/* -------------------------------------------------------------- Tabellen */

/* Tabellen sind auf schmalen Geräten breiter als der Bildschirm — sie scrollen
   in einem eigenen Rahmen, statt die ganze Seite zu verschieben. */
.tabelle-rahmen { overflow-x: auto; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rand); vertical-align: middle; }
th { color: var(--text-leise); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
td form { display: inline; }
/* Die Kontenliste hat viele Spalten: Status darf nicht beliebig breit werden,
   die Aktionen sollen nicht mitten im Knopf umbrechen. */
.konten-status { max-width: 230px; }

/* Sortierbare Liste (Spiele): Der Griff erscheint erst, wenn seite.js das
   Ziehen eingerichtet hat — ohne Skript gäbe es nichts zu greifen. */
.griff-spalte { width: 1%; padding-right: 0; }
.griff {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 8px;
  background: none;
  color: var(--text-leise);
  font-size: 20px; line-height: 1;
  cursor: grab;
  touch-action: none; /* sonst scrollt der Finger die Seite, statt zu ziehen */
}
.sortierbar .griff { display: inline-flex; }
.griff:hover, .griff:focus-visible { background: var(--flaeche-2); color: var(--text); }
.griff:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
tr.zieht { background: var(--flaeche-2); }
tr.zieht .griff { cursor: grabbing; }
.reihe-leiste { margin-top: 12px; }

/* Systemnachrichten in der Spielverwaltung. Der farbige Rand zeigt die Art. */
.nachrichten { display: flex; flex-direction: column; gap: 10px; }
.nachricht {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-left: 4px solid var(--akzent);
  border-radius: 9px;
  background: var(--grund);
}
.nachricht.wichtig { border-left-color: var(--schlecht); }
.nachricht.wartung { border-left-color: var(--warnung); }
.nachricht-text { flex: 1; min-width: 0; }
.nachricht-text b { display: block; margin-top: 6px; }
/* Zeilenumbrüche aus dem Eingabefeld bleiben stehen. */
.nachricht-text p { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }

.marke-klein { font-size: 12px; padding: 2px 7px; border-radius: 99px; background: var(--flaeche-2); color: var(--text-leise); border: 1px solid var(--rand); }
.marke-klein.live {
  color: var(--gut);
  border-color: color-mix(in srgb, var(--gut) 45%, transparent);
  background: color-mix(in srgb, var(--gut) 12%, var(--flaeche));
  vertical-align: middle;
}
.marke-klein.live::before { content: "● "; }
.marke-klein.beta {
  color: var(--beta);
  border-color: color-mix(in srgb, var(--beta) 45%, transparent);
  background: color-mix(in srgb, var(--beta) 12%, var(--flaeche));
}
.marke-klein.angekuendigt {
  color: var(--angekuendigt);
  border-color: color-mix(in srgb, var(--angekuendigt) 45%, transparent);
  background: color-mix(in srgb, var(--angekuendigt) 12%, var(--flaeche));
}
.marke-klein.wartung {
  color: var(--warnung);
  border-color: color-mix(in srgb, var(--warnung) 45%, transparent);
  background: color-mix(in srgb, var(--warnung) 12%, var(--flaeche));
  text-decoration: none;
}
/* Beta-Zugang je Spiel auf der Kontoseite der Verwaltung. */
.beta-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }
/* Die Stände der Beta-Instanz, abgesetzt von denen der normalen. Die Linie
   hat die Beta-Farbe: Direkt unter einer Tabelle sähe eine graue wie eine
   doppelte Zeilenlinie aus. */
.beta-staende { margin-top: 28px; border-top: 2px solid color-mix(in srgb, var(--beta) 45%, transparent); }
.beta-staende h3 .marke-klein { font-weight: normal; vertical-align: middle; }

/* ------------------------------------------------------------ Kontoseite */

/* Angaben zum Konto: Beschriftung links, Wert rechts; schmal untereinander. */
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.angaben dt { color: var(--text-leise); font-size: 14px; padding-top: 1px; }
.angaben dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .angaben { grid-template-columns: 1fr; gap: 2px; }
  .angaben dd { margin-bottom: 8px; }
}

.statistik { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; color: var(--text-leise); }
.statistik b { color: var(--text); }
.kennzahlen { display: block; font-size: 13px; color: var(--text-leise); }
/* Aktionen eines Spielstands: Knöpfe umbrechen als Ganzes, nie mitten im
   Knopf; Auswahl und Knopf zum Wiederherstellen bleiben zusammen. */
.knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
td .knoepfe form { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
td .knoepfe .knopf { white-space: nowrap; }
td select, .import select { width: auto; padding: 5px 8px; font-size: 14px; }
.import { margin-top: 16px; }
.import input[type=file] { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 14px; color: var(--text-leise); }
/* Der Knopf im Dateifeld ist sonst in beiden Farbschemata hellgrau. */
.import input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--flaeche-2);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ------------------------------------------------ Bilder in der Verwaltung */

.bild-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bild-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bild-liste .bild-zeile { margin: 0; padding: 8px; border: 1px solid var(--rand); border-radius: 9px; background: var(--grund); }
.bild-vorschau { display: block; object-fit: cover; border-radius: 8px; background: var(--flaeche-2); }
.bild-vorschau.quadrat { width: 120px; height: 120px; }
.bild-vorschau.breit { width: 160px; aspect-ratio: 16 / 9; }
.bild-nr { color: var(--text-leise); font-size: 14px; }
.bild-zeile .knoepfe { margin-left: auto; }
.bild-zeile .knopf[disabled] { opacity: .4; cursor: default; }

/* --------------------------------------------------------------- Support */
/* Übersicht, Chat und Verwaltung. Alles mit sp- vorn, weil .nachricht und
   .reiterleiste schon für Systemnachrichten und Spielfenster vergeben sind. */

/* Zahl an Menüeinträgen, Punkt am Profilsymbol. */
.menue-zahl {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 99px; background: var(--schlecht); color: #fff;
  font-size: 12px; font-weight: 600; line-height: 19px; text-align: center;
}
.menue-zahl.leise { background: var(--flaeche-2); color: var(--text); border: 1px solid var(--rand); }
.knopf:not(.leise) .menue-zahl { background: var(--akzent-text); color: var(--akzent); }
.profil > summary { position: relative; }
.profil-punkt {
  position: absolute; top: -2px; right: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--schlecht); border: 2px solid var(--flaeche);
}

.sp-titelzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; }
.sp-titelzeile .knopf { margin-top: 4px; display: inline-flex; align-items: center; gap: 7px; }
.sp-abschnitt { margin-top: 8px; }
.sp-zurueck { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; text-decoration: none; margin-bottom: 10px; }
.sp-leer {
  text-align: center; padding: 24px 16px; margin: 0; color: var(--text-leise);
  border: 1px dashed var(--rand); border-radius: var(--radius);
}

.sp-pille {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--flaeche-2); color: var(--text-leise);
}
.sp-pille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sp-pille.support { background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche)); color: var(--akzent); }
.sp-pille.nutzer { background: color-mix(in srgb, var(--warnung) 16%, var(--flaeche)); color: var(--warnung); }
.sp-nummer {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
  color: var(--text-leise); background: var(--flaeche-2); border-radius: 6px; padding: 1px 7px;
}
.sp-kopieren { border: 0; background: none; color: inherit; padding: 0 0 0 2px; cursor: pointer; display: inline-flex; }
.sp-kopieren:hover { color: var(--text); }
.sp-ungelesen { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--schlecht); flex: none; }
.sp-marke {
  display: inline-block; font-size: 11.5px; font-weight: 600; padding: 0 7px; border-radius: 99px;
  border: 1px solid var(--rand); color: var(--text-leise); margin-left: 4px; white-space: nowrap;
}
.sp-marke.sperre { border-color: color-mix(in srgb, var(--schlecht) 45%, transparent); color: var(--schlecht); }
.sp-marke.aufbewahrt { border-color: color-mix(in srgb, var(--beta) 45%, transparent); color: var(--beta); }
.sp-marke.frist { background: var(--schlecht); border-color: var(--schlecht); color: #fff; }
.sp-gut { color: var(--gut); font-weight: 600; }
.sp-schlecht { color: var(--schlecht); font-weight: 600; }

/* Fallkarten der Person */
.sp-faelle { display: flex; flex-direction: column; gap: 10px; }
.sp-fallkarte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten); color: var(--text); text-decoration: none;
}
.sp-fallkarte:hover { border-color: var(--akzent); }
.sp-fallkarte.zu { box-shadow: none; background: transparent; }
.sp-fallkarte-titel { font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-fallkarte-titel > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-meta { font-size: 13px; color: var(--text-leise); display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.sp-fallkarte .sp-meta { grid-column: 1 / -1; }
.sp-abgeschlossen > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 700; margin: 32px 0 12px; letter-spacing: -.01em;
}
.sp-abgeschlossen > summary::-webkit-details-marker { display: none; }
.sp-abgeschlossen > summary small { font-size: 14px; font-weight: 400; color: var(--text-leise); }
.sp-pfeil { transition: transform .15s; flex: none; }
.sp-abgeschlossen[open] .sp-pfeil { transform: rotate(90deg); }

/* Kopf eines Falls */
.sp-fallkopf { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sp-fallkopf h1 { margin: 0; font-size: 24px; overflow-wrap: anywhere; }
.sp-fallkopf .sp-meta { font-size: 14px; }
.sp-verweis {
  display: flex; gap: 8px; align-items: center; margin: 0; padding: 8px 12px;
  font-size: 14px; background: var(--flaeche-2); border-radius: 9px;
}
.sp-verweis svg { flex: none; color: var(--text-leise); }

/* Chat */
.karte.sp-chatkarte { padding: 0; overflow: hidden; }
.sp-chat { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.sp-nachricht { max-width: 80%; display: flex; flex-direction: column; gap: 4px; }
.sp-nachricht.eigen { align-self: flex-end; align-items: flex-end; }
.sp-nachricht.notiz { align-self: stretch; max-width: none; }
.sp-kopf { font-size: 12.5px; color: var(--text-leise); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sp-kopf b { color: var(--text); font-weight: 600; }
.sp-team {
  font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche)); border-radius: 5px; padding: 0 6px;
}
.sp-gelesen { display: inline-flex; align-items: center; gap: 3px; }
.sp-blase {
  padding: 10px 14px; border-radius: 14px; background: var(--flaeche-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.sp-nachricht.fremd .sp-blase { border-bottom-left-radius: 4px; }
.sp-nachricht.eigen .sp-blase { background: var(--akzent); color: var(--akzent-text); border-bottom-right-radius: 4px; }
.sp-nachricht.notiz .sp-blase { background: var(--notiz); border: 1px dashed var(--notiz-rand); border-radius: 10px; }
.sp-system {
  align-self: center; font-size: 13px; color: var(--text-leise); text-align: center;
  display: flex; align-items: center; gap: 8px;
}
.sp-system::before, .sp-system::after { content: ""; width: 24px; height: 1px; background: var(--rand); flex: none; }
.sp-bilder { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-nachricht.eigen .sp-bilder { justify-content: flex-end; }
.sp-bilder a {
  display: block; width: 132px; height: 88px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rand); cursor: zoom-in; background: var(--flaeche-2);
}
.sp-bilder img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Eingabe */
.sp-eingabe { border-top: 1px solid var(--rand); padding: 14px 20px 16px; }
.sp-eingabe textarea { min-height: 80px; }
.sp-eingabe-leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-top: 10px; }
.sp-eingabe-leiste.oben { justify-content: space-between; margin: 0 0 10px; }
.sp-eingabe-leiste .knopf { margin-top: 0; }
.sp-eingabe-leiste select { width: auto; padding: 6px 10px; font-size: 14px; }
.sp-unterzeile { display: flex; gap: 12px 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 12px; }
.sp-unterzeile p { flex: 1 1 280px; }
.sp-unterzeile .knopf { margin-top: 0; }

/* Antwort oder interne Notiz: Farbe und Knopftext folgen dem Radioknopf. */
.sp-modus { display: inline-flex; border: 1px solid var(--rand); border-radius: 9px; overflow: hidden; padding: 0; margin: 0; }
.sp-modus label {
  margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: 14px; color: var(--text-leise); cursor: pointer; background: var(--flaeche);
}
.sp-modus input { position: absolute; opacity: 0; pointer-events: none; }
.sp-modus label:has(input:checked) { background: var(--flaeche-2); color: var(--text); font-weight: 600; }
.sp-modus label:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: -2px; }
.sp-nur-notiz { display: none; }
.sp-eingabe-support:has(input[value="notiz"]:checked) { background: var(--notiz); }
.sp-eingabe-support:has(input[value="notiz"]:checked) textarea { border-color: var(--notiz-rand); }
.sp-eingabe-support:has(input[value="notiz"]:checked) .sp-nur-notiz { display: inline; }
.sp-eingabe-support:has(input[value="notiz"]:checked) .sp-nur-antwort,
.sp-eingabe-support:has(input[value="notiz"]:checked) .sp-danach { display: none; }

/* Fotos: ohne Skript das Dateifeld, mit Skript Knopf und Vorschau. */
.sp-fotos { margin-top: 10px; }
.sp-fotos-zeile { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.sp-fotos-zeile .hinweis { margin: 0; }
.sp-fotoknopf { display: none; margin: 0; color: var(--text); font-weight: 600; align-items: center; gap: 6px; }
.sp-fotos.aktiv .sp-fotoknopf { display: inline-flex; }
.sp-fotos.aktiv input[type=file] {
  position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.sp-fotos.aktiv input[type=file]:focus-visible + .sp-fotoknopf { outline: 2px solid var(--akzent); outline-offset: 2px; }
.sp-vorschau { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-vorschau:not(:empty) { margin-top: 10px; }
.sp-vorschau div { position: relative; width: 76px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--rand); }
.sp-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-vorschau button {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .65); color: #fff; font-size: 15px; line-height: 22px; cursor: pointer;
}
.sp-fehlertext { color: var(--schlecht); font-size: 14px; margin: 8px 0 0; }

.sp-abschluss { border-top: 1px solid var(--rand); padding: 18px 20px; background: var(--flaeche-2); }
.sp-abschluss .knopf { margin-top: 12px; }
.sp-bewertung { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rand); display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.sp-bewertung .zeile { gap: 8px; }
.sp-bewertung .knopf { margin-top: 0; }
.knopf.gewaehlt { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Neue Anfrage */
.sp-kategorien { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sp-kategorien legend { font-size: 14px; color: var(--text-leise); margin-bottom: 6px; padding: 0; }
.sp-kategorien label {
  position: relative; margin: 0; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); color: var(--text);
}
/* Die Radioknöpfe sind unsichtbar, die ganze Kachel ist die Auswahl: Die
   gewählte leuchtet im Akzent. Die Knöpfe bleiben im Formular, damit Tastatur
   (Pfeiltasten) und Screenreader weiter funktionieren. */
.sp-kategorien label:has(input:checked) {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 10%, var(--flaeche));
  box-shadow: 0 0 0 1px var(--akzent), 0 0 14px color-mix(in srgb, var(--akzent) 45%, transparent);
}
.sp-kategorien label:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.sp-kategorien label:hover { border-color: color-mix(in srgb, var(--akzent) 50%, var(--rand)); }
.sp-kategorien input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); pointer-events: none;
}
.sp-kategorien b { display: block; font-size: 15px; }
.sp-kategorien small { display: block; font-size: 13px; line-height: 1.4; color: var(--text-leise); }
.sp-kontext { font-size: 13px; color: var(--text-leise); background: var(--flaeche-2); border-radius: 9px; padding: 10px 12px; margin-top: 18px; }

/* Verwaltung: Kennzahlen, Reiter, Liste */
.sp-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.sp-zahlen > div { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 14px; }
.sp-zahlen span { display: block; font-size: 12.5px; color: var(--text-leise); }
.sp-zahlen strong { font-size: 20px; }
.suchzeile select { width: auto; flex: 0 1 180px; }
.sp-reiter { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--rand); margin-bottom: 14px; }
.sp-reiter a {
  padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  color: var(--text-leise); text-decoration: none; font-size: 15px;
}
.sp-reiter a[aria-current="page"] { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }
.sp-anzahl { font-size: 12px; background: var(--flaeche-2); border-radius: 99px; padding: 0 7px; margin-left: 6px; }
.sp-liste { border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); }
.sp-listzeile {
  display: grid; grid-template-columns: 12px 100px minmax(0, 1fr) 180px 110px; gap: 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--rand); color: var(--text); text-decoration: none; font-size: 14.5px;
}
.sp-listzeile:first-child { border-top: 0; }
a.sp-listzeile:hover { background: var(--flaeche-2); }
.sp-listkopf { font-size: 12.5px; font-weight: 600; color: var(--text-leise); background: var(--flaeche-2); text-transform: uppercase; letter-spacing: .04em; }
.sp-listbetreff { min-width: 0; }
.sp-listbetreff b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-listbetreff small { font-size: 13px; color: var(--text-leise); }
.sp-listkat { font-size: 13.5px; color: var(--text-leise); }
.sp-listzeit { font-size: 13.5px; }
.sp-lang { color: var(--schlecht); font-weight: 600; }

/* Verwaltung: Fall mit Seitenleiste */
.sp-raster { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.sp-seitenleiste { display: flex; flex-direction: column; gap: 14px; }
.sp-seitenleiste .karte { padding: 16px; margin: 0; }
.sp-seitenleiste h3 { margin: 0 0 8px; font-size: 15px; }
.sp-seitenleiste dl { margin: 0; font-size: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
.sp-seitenleiste dt { color: var(--text-leise); }
.sp-seitenleiste dd { margin: 0; overflow-wrap: anywhere; }
.sp-seitenleiste label { margin-top: 12px; }
.sp-seitenleiste .knopf { margin-top: 0; }
.sp-aktionen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.sp-aufbewahrt { font-size: 14px; margin-top: 14px; padding: 10px 12px; border-radius: 9px; background: color-mix(in srgb, var(--beta) 10%, var(--flaeche)); }
.sp-aufbewahren .knopf, .sp-zusammen .knopf { margin-top: 8px; }
.sp-andere { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.sp-andere li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sp-andere a { text-decoration: none; }

/* Großansicht der Fotos: ein <dialog>, den seite.js anlegt. */
.grossansicht {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 20px;
  border: 0; background: rgba(8, 10, 14, .9); color: #e9ecf1;
}
.grossansicht[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.grossansicht::backdrop { background: transparent; }
.grossansicht img { max-width: min(1200px, 100%); max-height: calc(100vh - 110px); border-radius: 8px; object-fit: contain; }
.grossansicht-leiste { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 14px; }
.grossansicht button {
  font: inherit; font-size: 14px; background: #2a2f38; color: #fff; border: 1px solid #454c58;
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.grossansicht button:hover { background: #363c47; }

/* -------------------------------------------------------- Beta-Feedback */
/* Abschnitt in der Verwaltung (Spiele → Bearbeiten → Beta). */
.feedback-knoepfe { margin-top: 14px; }
.feedback-knoepfe .knopf { margin-top: 0; }
.feedback-knoepfe form { margin-left: auto; }
.knopf.gefahr-rand { color: var(--schlecht); border-color: color-mix(in srgb, var(--schlecht) 45%, transparent); }

/* Die Einträge — auf ihrer eigenen Seite und im Pop-up dieselben. */
.feedback-kopf { display: flex; gap: 8px 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.feedback-kopf h1 { font-size: 22px; margin: 0 0 4px; }
.feedback-kopf .untertitel { margin: 0 0 14px; font-size: 14px; }
.feedback-eintrag { padding: 14px 0; border-top: 1px solid var(--rand); }
.feedback-meta {
  display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap;
  margin: 0 0 6px; font-size: 13px; color: var(--text-leise);
}
.feedback-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-eintrag .sp-bilder { margin-top: 10px; }
.feedback-art.fehler {
  color: var(--schlecht);
  border-color: color-mix(in srgb, var(--schlecht) 45%, transparent);
  background: color-mix(in srgb, var(--schlecht) 10%, var(--flaeche));
}
.feedback-art.idee {
  color: var(--akzent);
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
  background: color-mix(in srgb, var(--akzent) 10%, var(--flaeche));
}

/* Pop-up: ein <dialog>, den seite.js anlegt (data-popup). Der Kopf bleibt
   stehen, darunter scrollt die Liste. */
.popup {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: min(820px, calc(100vh - 48px));
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: var(--flaeche);
  color: var(--text);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.popup[open] { display: flex; flex-direction: column; }
.popup::backdrop { background: rgba(8, 10, 14, .62); }
.popup > [data-popup-inhalt] { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.popup .feedback-kopf { padding: 18px 60px 0 20px; }
.popup .feedback-liste { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 6px; }
.popup-zu {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 99px;
  background: var(--flaeche-2); color: var(--text-leise);
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.popup-zu:hover { color: var(--text); }
.popup-zu:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Auf dem Telefon füllt das Pop-up den ganzen Bildschirm. */
@media (max-width: 560px) {
  .popup { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .feedback-knoepfe form { margin-left: 0; }
}

/* „Problem melden“ im Spielfenster */
.spielfenster-problem { margin: 14px 0 0; font-size: 14px; }
.spielfenster-problem a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-leise); }
.spielfenster-problem a:hover { color: var(--text); }

@media (max-width: 900px) {
  .sp-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .sp-listkopf { display: none; }
  .sp-listzeile {
    grid-template-columns: 10px minmax(0, 1fr) auto;
    grid-template-areas: "p n z" "p b b" "p k k";
    gap: 2px 10px;
  }
  .sp-listzeile > :nth-child(1) { grid-area: p; align-self: start; margin-top: 6px; }
  .sp-listzeile > :nth-child(2) { grid-area: n; justify-self: start; }
  .sp-listzeile > :nth-child(3) { grid-area: b; }
  .sp-listzeile > :nth-child(4) { grid-area: k; }
  .sp-listzeile > :nth-child(5) { grid-area: z; }
}
@media (max-width: 560px) {
  /* Pille unter den Betreff, damit der nicht auf zwei Wörter schrumpft. */
  .sp-fallkarte { grid-template-columns: minmax(0, 1fr); }
  .sp-fallkarte .sp-pille { justify-self: start; }
  .sp-fallkarte-titel > span:last-child { white-space: normal; }
  .sp-chat { padding: 16px 12px; }
  .sp-nachricht { max-width: 92%; }
  .sp-eingabe { padding: 12px; }
  .sp-abschluss { padding: 16px 12px; }
  .sp-bilder a { width: 104px; height: 70px; }
  .sp-fallkopf h1 { font-size: 22px; }
  .sp-listbetreff b { white-space: normal; }
  .suchzeile select { flex: 1 1 140px; }
}

/* ------------------------------------------------------------------ Fuß */

.fuss {
  border-top: 1px solid var(--rand);
  background: var(--flaeche);
  padding: 18px 16px;
  font-size: 14px;
  color: var(--text-leise);
}
.fuss-innen { max-width: 900px; margin: 0 auto; display: flex; gap: 16px; flex-wrap: wrap; }
.fuss a { color: var(--text-leise); }

/* ------------------------------------------------------------- Rechtstext */

.rechtstext { max-width: 700px; }
.rechtstext h2 { margin-top: 28px; }
.rechtstext p { margin: 8px 0; }
.platzhalter {
  background: color-mix(in srgb, #e0a800 22%, transparent);
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 600;
}

/* Neben Marke und „Anmelden“ ist auf einem Telefon kein Platz mehr für
   „Konto erstellen“; die Anmeldeseite verlinkt die Registrierung ohnehin. */
@media (max-width: 400px) {
  .kopf nav a.kopf-registrieren { display: none; }
}

@media (max-width: 560px) {
  main { padding: 20px 16px 36px; }
  h1 { font-size: 24px; }
  /* Marke und Navigation bleiben in einer Zeile, die Links rücken enger. */
  .kopf-innen { gap: 10px; }
  .kopf nav { gap: 2px; }
  .kopf nav a { padding: 6px 8px; font-size: 14px; }
  .tabelle-rahmen table { min-width: 680px; }
  /* Der Löschknopf drückte den Text sonst auf eine Handbreite zusammen. */
  .nachricht { flex-direction: column; }
  /* Das Spielfenster füllt auf dem Telefon den ganzen Bildschirm. */
  .spielfenster { padding: 0; }
  .spielfenster-innen { min-height: 100%; padding: 16px; border: 0; border-radius: 0; }
  .spielfenster-zu { top: 24px; right: 24px; }
  .knopf.spielen { width: 100%; }
  .reiterleiste button { flex: 1; }
  .spielbild .ersatz { font-size: 48px; }
  /* Changelog: Liste waagerecht über der gewählten Version. */
  .cl-wrap { flex-direction: column; max-height: none; }
  .cl-liste { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 0 5px; }
  .cl-liste-kopf { display: none; }
  .cl-v { min-width: 168px; }
  .cl-detail { max-height: 60vh; }
  .cl-kopf-nr { font-size: 17px; padding: 6px 10px; }
}