:root {
  color-scheme: dark;
  --bg: #10141a;
  --panel: #1a212b;
  --fg: #e6e9ee;
  --accent: #66c0f4;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, sans-serif;
}

a {
  color: var(--accent);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--panel);
}

.brand {
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
}

.who {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.who img {
  border-radius: 50%;
}

.button,
button {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.4rem;
  background: var(--accent);
  color: #0b1016;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.notice {
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: var(--panel);
}

.players {
  padding: 0;
  list-style: none;
}

.players li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--panel);
}

.warn {
  flex-basis: 100%;
  color: #f0b36a;
}

.covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.covers li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.covers img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: 0.4rem;
  background: var(--panel);
  object-fit: cover;
}

.badge,
.missing {
  color: #9aa7b5;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

nav a {
  margin-right: 1rem;
}

.hint {
  color: #9aa7b5;
}

.karte {
  max-width: 44rem;
  padding: 1rem 1.25rem;
  border: 1px solid #3a4656;
  border-radius: 0.6rem;
  background: var(--panel);
}

.karte ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.platz {
  display: grid;
  grid-template-columns: 1.5rem 50px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 84px;
  padding: 0.25rem 0;
  border-bottom: 1px dashed #3a4656;
}

.platz:last-child {
  border-bottom: 0;
}

.platz.belegt {
  cursor: grab;
}

.platz.frei {
  grid-template-columns: 2rem 1fr auto;
  color: #6b7785;
}

.rang {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.platz img,
.platz .kachel {
  width: 50px;
  height: 75px;
  aspect-ratio: auto;
  font-size: 0.55rem;
  border-radius: 0.3rem;
  object-fit: cover;
}

.platz .name {
  display: flex;
  flex-direction: column;
}

.platz small {
  color: #9aa7b5;
}

.punkte {
  grid-column: 3;
  color: #9aa7b5;
  font-size: 0.85rem;
  white-space: nowrap;
}

.platz.belegt .name {
  grid-column: 3;
}

.platz.belegt .aktionen {
  grid-column: 4;
  grid-row: 1 / span 2;
}

.aktionen button {
  padding: 0.25rem 0.55rem;
  background: #2a3442;
  color: var(--fg);
}

#suche {
  width: 100%;
  max-width: 30rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #3a4656;
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
}

.cover {
  cursor: pointer;
}

.cover.auf-karte {
  opacity: 0.35;
  cursor: default;
}

.kachel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  padding: 0.5rem;
  border-radius: 0.4rem;
  background: #2a3442;
  text-align: center;
  font-size: 0.8rem;
  overflow: hidden;
}

.sortable-ghost {
  opacity: 0.4;
}

main.breit {
  max-width: 110rem;
}

/* Die Karte bleibt beim Scrollen durch das Raster sichtbar, sonst wäre kein Platz zum Hinziehen da. */
.karte-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 26rem) 1fr;
  gap: 2rem;
  align-items: start;
}

.karte-spalte {
  position: sticky;
  top: 1rem;
}

.karte-spalte h1 {
  margin-top: 0;
}

@media (max-width: 60rem) {
  .karte-layout {
    grid-template-columns: 1fr;
  }

  .karte-spalte {
    position: static;
  }
}

.werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.werkzeuge #suche {
  flex: 1 1 16rem;
}

.werkzeuge select {
  margin-left: 0.4rem;
  padding: 0.5rem;
  border: 1px solid #3a4656;
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
}

.leer {
  padding: 4rem 0;
  text-align: center;
}

.buehne {
  position: relative;
  height: min(52vh, 34rem);
  overflow: hidden;
  border-radius: 0.8rem;
  background: var(--panel);
}

.buehne-bild {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.buehne-bild.aktiv {
  opacity: 1;
}

.buehne-bild img,
.buehne-bild .kachel {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  font-size: 2rem;
}

.buehne-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem 2rem 1.5rem;
  background: linear-gradient(transparent, rgb(0 0 0 / 85%));
}

.buehne-text h1 {
  margin: 0.2rem 0;
  font-size: 2.4rem;
}

.buehne-text p {
  margin: 0;
}

.platzierung {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.menue-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.gericht {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 8rem;
  font-size: 0.8rem;
}

.gericht.mittel {
  width: 11rem;
  font-size: 0.9rem;
}

.gericht.gross {
  width: 15rem;
  font-size: 1rem;
}

.gericht img,
.gericht .kachel {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 0.4rem;
  background: var(--panel);
  object-fit: cover;
}

.gericht .punkte {
  color: var(--accent);
  font-weight: 700;
}

.voter {
  color: #9aa7b5;
}

.wochentage {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.wochentag {
  min-width: 3.2rem;
  background: #2a3442;
  color: var(--fg);
}

.wochentag.aktiv {
  background: var(--accent);
  color: #0b1016;
}

.kalender {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem;
  padding: 0;
  list-style: none;
}

.kalender .kopf {
  color: #9aa7b5;
  font-size: 0.85rem;
  text-align: center;
}

.tag {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 5.5rem;
  padding: 0.5rem;
  border: 1px solid #2a3442;
  border-radius: 0.4rem;
  background: var(--panel);
  font-size: 0.8rem;
  cursor: pointer;
}

.tag.ich-frei {
  border-color: var(--accent);
  background: #17324a;
}

.tag.ausnahme {
  border-style: dashed;
}

.tag.alle-frei {
  background: #1f5a3a;
  border-color: #58d68d;
}

.tag .wer {
  color: #9aa7b5;
}

.tag .alle {
  color: #58d68d;
  font-weight: 700;
}

.termin-feld {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--panel);
}

.termin-feld img,
.termin-feld .kachel {
  width: 5rem;
  aspect-ratio: 2 / 3;
  border-radius: 0.3rem;
  object-fit: cover;
  font-size: 0.6rem;
}

.termin-feld h2,
.termin-feld p {
  margin: 0.2rem 0;
}

.tag.termin {
  outline: 3px solid var(--accent);
}

/* Einmalcode auf der Discord-Seite: groß genug zum Abtippen und Kopieren. */
code.code {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  background: var(--panel);
  border-radius: 6px;
  font-size: 1.25rem;
  user-select: all;
}

/* Mod-Urteile (Spec 8a). */
.mod {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font-size: 0.75rem;
}
.mod-zeile { padding: 0.4rem 0; border-bottom: 1px solid var(--panel); }
.mod-zeile summary { cursor: pointer; display: flex; gap: 0.75rem; align-items: baseline; }
.mod-formular { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin: 0.5rem 0; }
.mod-formular label { display: flex; flex-direction: column; font-size: 0.8rem; }
.mod-urteil.ja { color: var(--accent); }

/* HTMX setzt beim Austauschen das Neue kurz vor das Alte. Chromes Scroll-Verankerung hielt dabei
   das alte Element im Blick und schob die Seite um die Höhe des Rasters nach unten, bis ans Ende.
   Die Bilder haben feste Maße, also braucht die Seite keine Verankerung. */
body {
  overflow-anchor: none;
}

/* Spiele aus dem Menü übernehmen (Spec 9). */
.uebernehmen-frage { padding: 0.75rem 1rem; margin-bottom: 1rem; background: var(--panel); border-radius: 8px; }
.uebernehmen-wahl { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.uebernehmen-wahl .punkte { opacity: 0.7; margin-left: 0.4rem; }
button.uebernehmen { font-size: 0.8rem; }