:root {
  color-scheme: light dark;
  --color-bg: #f7f6f3;
  --color-surface: #ffffff;
  --color-text: #1f2124;
  --color-muted: #6b6f76;
  --color-border: #e2e0db;
  --color-primary: #5b3aa0;
  --color-primary-contrast: #ffffff;
  --color-danger: #b3261e;
  --color-success: #1e6b3a;
  --radius: 10px;

  /* Dichte-Tokens: auf dem Handy großzügig (gut antippbar), ab 900px
     (siehe Media-Query unten) kompakter wie eine Tabelle - Idee von der
     Kellerliga-Seite aus Hannover übernommen. */
  --font-base: 15px;
  --row-font: 0.9375rem;
  --row-pad-y: 0.6rem;
  --row-pad-x: 0.75rem;
  --card-pad: 1.25rem;
  --section-gap: 2rem;
  --control-pad: 0.55rem 0.7rem;
  --button-pad: 0.6rem 1.1rem;
  --label-margin: 0.9rem 0 0.3rem;
  --page-gutter: 1rem;

  /* Kategoriale Palette für die Stadt-Farbcodierung im Kalender (validiert:
     adjacent CVD ΔE 9.1, normal-vision ΔE 19.6, beides über dem Zielwert). */
  --city-color-1: #2a78d6;
  --city-color-2: #eb6834;
  --city-color-3: #1baf7a;
  --city-color-4: #eda100;
  --city-color-5: #e87ba4;
  --city-color-6: #008300;
  --city-color-7: #4a3aa7;
  --city-color-8: #e34948;
  --city-color-other: #898781;

  /* Format-Farbpunkte in der Eventliste - bewusst andere Töne als die
     Städtefarben im Kalender, damit man beides nicht verwechselt. */
  --format-legacy: #6f4fc2;
  --format-vintage: #b8860b;
  --format-modern: #0e7c86;
  --format-commander: #c2410c;
  --format-premodern: #4d7c0f;
}

@media (min-width: 900px) {
  :root {
    --font-base: 15px;
    --row-font: 0.875rem;
    --row-pad-y: 0.35rem;
    --row-pad-x: 0.75rem;
    --card-pad: 1rem;
    --section-gap: 1.5rem;
    --control-pad: 0.35rem 0.6rem;
    --button-pad: 0.4rem 0.9rem;
    --label-margin: 0.6rem 0 0.2rem;
    --page-gutter: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #17181a;
    --color-surface: #212226;
    --color-text: #ecebe9;
    --color-muted: #a0a3a8;
    --color-border: #34363a;
    --color-primary: #a889e0;
    --color-primary-contrast: #17181a;
    --color-danger: #ff8983;
    --color-success: #7bd8a0;

    --city-color-1: #3987e5;
    --city-color-2: #d95926;
    --city-color-3: #199e70;
    --city-color-4: #c98500;
    --city-color-5: #d55181;
    --city-color-6: #008300;
    --city-color-7: #9085e9;
    --city-color-8: #e66767;
    --city-color-other: #898781;

    --format-legacy: #a58bf0;
    --format-vintage: #e0b44a;
    --format-modern: #3fb8c2;
    --format-commander: #f08a4b;
    --format-premodern: #9ccc4a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-base);
  line-height: 1.5;
}

table {
  font-variant-numeric: tabular-nums;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--row-pad-y) * 2) var(--page-gutter);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.site-header .brand {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-primary);
  text-decoration: none;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header nav a {
  color: var(--color-text);
  text-decoration: none;
}

.nav-toggle-checkbox {
  display: none;
}

.nav-toggle-label {
  display: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  user-select: none;
}

/* Ab hier passt die volle Link-Leiste (inkl. "Meine Events") nicht mehr
   bequem in eine Zeile - Menü klappt stattdessen per Checkbox-Hack auf
   (kein JS nötig, funktioniert auch ohne aktiviertes JavaScript). */
@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
  }

  .nav-toggle-label {
    display: block;
  }

  .site-header nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .nav-toggle-checkbox:checked ~ nav {
    display: flex;
  }
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--section-gap) var(--page-gutter);
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-pad);
  margin-bottom: var(--section-gap);
}

.card-narrow {
  max-width: 480px;
}

.wiki-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wiki-index-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.wiki-index-card a {
  display: block;
  padding: var(--row-pad-y) var(--row-pad-x);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

section li {
  margin-bottom: 0.3rem;
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: calc(var(--section-gap) * 0.75);
  flex-wrap: wrap;
}

.page-heading-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-heading-actions .button {
  margin-top: 0;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.25rem;
  margin: 0 0 0.6rem;
}

.filter-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: calc(var(--card-pad) * 0.75) var(--card-pad);
  margin-bottom: var(--section-gap);
}

.filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-fields > div {
  flex: 1 1 180px;
}

.filter-fields label {
  margin-top: 0;
}

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

section {
  margin-bottom: var(--section-gap);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

label {
  display: block;
  margin: var(--label-margin);
  font-weight: 600;
  font-size: 0.9em;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: var(--control-pad);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 1em;
  font-family: inherit;
}

textarea {
  resize: vertical;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}

.checkbox input {
  width: auto;
}

.radio-group {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.monthly-weekday-row {
  display: flex;
  gap: 0.75rem;
}

.monthly-weekday-row select {
  width: auto;
  flex: 1;
}

.wld-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.wld-row > div {
  flex: 1;
}

.wld-row input {
  width: 100%;
}

#recurring-fields,
#once-fields {
  border-left: 2px solid var(--color-border);
  padding-left: 1rem;
  margin: 0.75rem 0;
}

.radio {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
}

.radio input {
  width: auto;
}

.field-hint {
  font-size: 0.8rem;
  margin: 0.4rem 0 0;
}

button,
.button {
  display: inline-block;
  margin-top: 1.25rem;
  padding: var(--button-pad);
  border: none;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 1em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.button-danger,
.link-button-danger {
  background: transparent;
  color: var(--color-danger);
}

.button-danger {
  border: 1px solid var(--color-danger);
}

.danger-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.calendar-url {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  word-break: break-all;
}

.link-button {
  background: none;
  border: none;
  color: var(--color-text);
  text-decoration: underline;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
}

.inline-form {
  display: inline;
}

.field-error {
  color: var(--color-danger);
  font-size: 0.85rem;
  margin: 0.25rem 0 0;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

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

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

.landing-intro {
  margin-bottom: 2rem;
}

.landing-intro ul {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

.landing-intro li {
  margin-bottom: 0.35rem;
}

.security-notice {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  border-left: 3px solid var(--color-danger);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.info-notice {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-left: 3px solid var(--color-primary);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.copy-from-form {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.copy-from-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.copy-from-row select {
  flex: 1;
}

.copy-from-row button {
  margin-top: 0;
  white-space: nowrap;
}

.participation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.participation-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: calc(var(--row-pad-y) * 1.6) var(--card-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.badge {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-muted {
  background: color-mix(in srgb, var(--color-muted) 20%, transparent);
  color: var(--color-muted);
}

.participation-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.participation-actions a {
  color: var(--color-text);
}

.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  list-style: none;
  padding: 0;
}

.contact-list li {
  display: flex;
  gap: 0.3rem;
}

.mention-dropdown {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  max-width: 300px;
  overflow: hidden;
}

.mention-dropdown li {
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.mention-dropdown li.active,
.mention-dropdown li:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.top-cut-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
}

.top-cut-table {
  width: 100%;
  border-collapse: collapse;
}

.top-cut-table th,
.top-cut-table td {
  padding: var(--row-pad-y) var(--row-pad-x);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--row-font);
  text-align: left;
}

.top-cut-table th {
  font-size: 0.8rem;
  color: var(--color-muted);
  font-weight: 600;
}

.top-cut-table input {
  padding: 0.4rem 0.5rem;
  margin: 0;
  width: 100%;
}

/* Nur die Eingabe-Tabelle auf der Ergebnis-Seite (6 Spalten, mit Inputs) -
   bewusst NICHT die schlanke 4-Spalten-Anzeigetabelle auf der Event-Seite,
   die dieselbe Basisklasse .top-cut-table nutzt. table-layout: fixed ist
   nötig, damit die Spaltenbreiten von den festen Werten unten kommen statt
   vom (bei width:100%-Inputs unbrauchbaren) Inhalts-basierten Auto-Layout -
   sonst schrumpfen Browser die Spalten bei Platzmangel auf ihre
   Mindestinhaltsbreite, was das Namensfeld auf 1-2 sichtbare Zeichen
   zusammendrückt. */
.top-cut-table--entry {
  table-layout: fixed;
  min-width: 36rem;
}

.top-cut-table--entry th:nth-child(1),
.top-cut-table--entry td:nth-child(1) {
  width: 4.5rem;
}

.top-cut-table--entry th:nth-child(2),
.top-cut-table--entry td:nth-child(2),
.top-cut-table--entry th:nth-child(3),
.top-cut-table--entry td:nth-child(3),
.top-cut-table--entry th:nth-child(4),
.top-cut-table--entry td:nth-child(4) {
  width: 5rem;
}

.top-cut-table--entry th:nth-child(6),
.top-cut-table--entry td:nth-child(6) {
  width: 5rem;
}

/* Decklist-Link steht in einer eigenen, vollbreiten Zeile unter der
   eigentlichen Platzierungszeile (siehe edit-results.ejs) statt in einer
   eigenen schmalen Spalte - ein URL-Feld braucht mehr Breite, als bei 6
   Spalten noch übrig wäre. Die Trennlinie zwischen beiden Zeilen wird
   unterdrückt, damit sie optisch als ein zusammengehöriges Zeilenpaar wirken. */
.top-cut-table--entry .top-cut-entry-row td {
  border-bottom: none;
}

.top-cut-table--entry .top-cut-decklist-row td {
  padding-top: 0;
}

.top-cut-table--entry .top-cut-decklist-row textarea {
  margin-top: 0.4rem;
  font-family: inherit;
}

.top-cut-add-button {
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
}

.decklist-text {
  margin-top: 0.3rem;
}

.decklist-text summary {
  cursor: pointer;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.decklist-text pre {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 16rem;
  overflow-y: auto;
}

.comment-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.comment-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: calc(var(--card-pad) * 0.8) var(--card-pad);
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.comment-body {
  margin: 0.4rem 0 0;
  white-space: pre-wrap;
}

.comment-form textarea {
  margin-top: 0.5rem;
}

/* Monatskalender */

.calendar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-pad);
  margin-bottom: var(--section-gap);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.calendar-nav h2 {
  margin: 0;
  font-size: 1.1rem;
  min-width: 10ch;
  text-align: center;
}

.calendar-nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.calendar-grid {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst erzwingen lange Eventnamen eine
     Mindestbreite pro Spalte und der Kalender läuft auf dem Handy über. */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.calendar-weekday {
  background: var(--color-bg);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  padding: 0.4rem 0;
}

.calendar-day {
  background: var(--color-surface);
  min-height: 5.5rem;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.calendar-day-out {
  background: var(--color-bg);
  opacity: 0.55;
}

.calendar-day-number {
  font-size: 0.8rem;
  color: var(--color-muted);
  align-self: flex-end;
}

.calendar-day-today .calendar-day-number {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border-radius: 999px;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
}

.calendar-event {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.3;
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.calendar-event:hover {
  background: var(--color-bg);
}

.calendar-event-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-event-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .calendar-day {
    min-height: 3.5rem;
  }

  .calendar-weekday {
    font-size: 0.65rem;
  }

  /* Auf dem Handy nur die farbigen Punkte, Name steht im title bzw. auf
     der Eventseite - für Text ist eine Tagesspalte hier zu schmal. */
  .calendar-event-label {
    display: none;
  }

  .calendar-event {
    padding: 0.15rem 0;
  }

  .calendar-event-dot {
    width: 0.65rem;
    height: 0.65rem;
  }

  .calendar-nav {
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .calendar-nav a {
    white-space: nowrap;
  }

  .calendar-nav-word {
    display: none;
  }
}

.city-color-1 { background: var(--city-color-1); }
.city-color-2 { background: var(--city-color-2); }
.city-color-3 { background: var(--city-color-3); }
.city-color-4 { background: var(--city-color-4); }
.city-color-5 { background: var(--city-color-5); }
.city-color-6 { background: var(--city-color-6); }
.city-color-7 { background: var(--city-color-7); }
.city-color-8 { background: var(--city-color-8); }
.city-color-0 { background: var(--city-color-other); }

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.calendar-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.calendar-legend-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.event-image {
  display: block;
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}

.event-image-preview {
  display: block;
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

.event-description {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-pad);
  margin-bottom: var(--section-gap);
}

.event-description :first-child {
  margin-top: 0;
}

.event-description :last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .calendar-day {
    min-height: 4.25rem;
  }
}

/* Startseite als Dashboard: Hauptspalte (Kalender + Eventlisten) und eine
   schmale Seitenleiste mit Kacheln (Filter, eigene Events, Rangliste,
   letztes Ergebnis). Auf schmalen Bildschirmen alles untereinander. */
.container-wide {
  max-width: 1320px;
}

/* Handy/schmal: Hauptspalte und Seitenleiste werden per display: contents
   aufgelöst, damit alle Blöcke einzeln per "order" sortiert werden können
   (Reihenfolge auf Nutzerwunsch, siehe unten). */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dashboard-main,
.dashboard-side {
  display: contents;
}

.dashboard-filter .filter-form,
.dashboard-calendar .calendar-card,
.dashboard-main > section {
  margin-bottom: 0;
}

.tile-my-events { order: 1; }
.dashboard-upcoming { order: 2; }
.tile-standings { order: 3; }
.tile-latest-result { order: 4; }
.tile-metagame { order: 5; }
.dashboard-calendar { order: 6; }
.dashboard-filter { order: 7; }
.dashboard-past { order: 8; }

@media (min-width: 1100px) {
  .dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "main filter"
      "main side";
    align-items: start;
    column-gap: 1.5rem;
    row-gap: 1rem;
  }

  .dashboard-filter {
    grid-area: filter;
  }

  .dashboard-main {
    grid-area: main;
    display: block;
    min-width: 0;
  }

  .dashboard-main > * + * {
    margin-top: var(--section-gap);
  }

  .dashboard-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }

  /* In der schmalen Seitenleiste die Filter untereinander statt nebeneinander. */
  .dashboard-filter .filter-fields {
    flex-direction: column;
    gap: 0;
  }

  .dashboard-filter .filter-fields > div {
    flex-basis: auto;
  }

  .dashboard-filter .filter-fields > div:first-child label {
    margin-top: 0;
  }
}

.tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: calc(var(--card-pad) * 0.75) var(--card-pad);
  margin-bottom: 0;
}

.tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.tile-head h2 {
  margin: 0;
  font-size: 1rem;
}

.tile-head a,
.tile-foot a {
  font-size: 0.8rem;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

/* Gemeinsames Raster (subgrid) wie bei der Eventliste, damit Datum/Platz,
   Name und Wert in allen Zeilen einer Kachel bündig stehen. */
.tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.75rem;
}

.tile-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  margin: 0;
  padding: var(--row-pad-y) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--row-font);
  font-variant-numeric: tabular-nums;
}

.tile-row:first-child {
  border-top: none;
}

.tile-key {
  color: var(--color-muted);
}

.tile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

a.tile-name {
  text-decoration: none;
}

a.tile-name:hover {
  text-decoration: underline;
}

.tile-value {
  text-align: right;
  white-space: nowrap;
}

.tile-sub {
  margin: 0 0 0.2rem;
  font-size: var(--row-font);
}

.tile-empty {
  margin: 0;
  font-size: var(--row-font);
}

.tile-foot {
  margin: 0.35rem 0 0;
}

/* Eventliste der Startseite (partials/event-table.ejs). Handy: jede Zeile
   eine kleine Karte. Desktop: echte Tabellenspalten über ein gemeinsames
   Raster (subgrid), damit alle Zeilen bündig stehen. */
.event-table {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.event-row {
  position: relative;
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) auto;
  grid-template-areas:
    "name name name format"
    "date city count join";
  column-gap: 0.5rem;
  row-gap: 0.15rem;
  align-items: center;
  margin: 0;
  padding: 0.7rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--row-font);
  font-variant-numeric: tabular-nums;
}

.event-row-head {
  display: none;
}

.event-row-name {
  grid-area: name;
  min-width: 0;
  font-weight: 600;
}

.event-row-name a {
  color: var(--color-text);
  text-decoration: none;
}

/* Ganze Zeile klickbar (führt zum Event), der Teilnehmen-Button liegt
   darüber und bleibt separat bedienbar. */
.event-row-name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.event-row:not(.event-row-head):hover {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

.event-row-format {
  grid-area: format;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

/* Handy: Datum · Stadt · Anzahl in der zweiten Zeile, je eine eigene Zelle. */
.event-row-date,
.event-row-city,
.event-row-count {
  color: var(--color-muted);
  white-space: nowrap;
}

.event-row-date { grid-area: date; }
.event-row-city { grid-area: city; }
.event-row-count {
  grid-area: count;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-row-city::before {
  content: "· ";
}

/* Handy: Anzahl kurz als "👤 4" statt "4 eingetragen" - passt sonst neben
   den Teilnehmen-Button nicht in die Zeile. */
.event-row-count::before {
  content: "· 👤 ";
}

.event-row-count-label {
  display: none;
}

.event-row-join {
  grid-area: join;
  position: relative;
  z-index: 1;
  justify-self: end;
}

.event-row-city {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.city-dot,
.format-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Farbe des Stadtpunkts kommt aus den .city-color-N-Klassen (wie im
   Kalender); hier nur der Fallback für unbekannte Formate. */
.format-dot {
  background: var(--city-color-other);
}

.format-legacy { background: var(--format-legacy); }
.format-vintage { background: var(--format-vintage); }
.format-modern { background: var(--format-modern); }
.format-commander { background: var(--format-commander); }
.format-premodern { background: var(--format-premodern); }

.button-small {
  margin: 0;
  padding: 0.2rem 0.7rem;
  font-size: 0.85em;
  border-radius: 999px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  white-space: nowrap;
}

.button-small:hover {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.event-joined {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-success);
  text-decoration: none;
  white-space: nowrap;
}

.event-table-past .event-row {
  opacity: 0.75;
}

@media (min-width: 900px) {
  .event-table {
    display: grid;
    /* Feste Breiten statt max-content, damit "Kommende" und "Vergangene"
       Events (zwei getrennte Listen) exakt dieselben Spalten haben. */
    grid-template-columns: 5.25rem minmax(0, 1fr) 7rem 6.5rem 7rem 6.5rem;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .event-row,
  .event-row-head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-areas: none;
    column-gap: 1.5rem;
    padding: var(--row-pad-y) var(--row-pad-x);
    background: none;
    border: none;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
  }

  .event-row-head {
    border-top: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
  }

  .event-row > * {
    grid-area: auto;
    grid-row: 1;
    margin: 0;
  }

  .event-row-date { grid-column: 1; }
  .event-row-name {
    grid-column: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .event-row-city { grid-column: 3; color: var(--color-text); }
  .event-row-count {
    grid-column: 4;
    display: block;
    text-align: right;
    color: var(--color-text);
  }
  .event-row-join { grid-column: 5; justify-self: center; }

  .event-row-city::before,
  .event-row-count::before {
    content: none;
  }
  .event-row-format { grid-column: 6; }

  .event-row-head .event-row-city,
  .event-row-head .event-row-count {
    color: var(--color-muted);
  }

  .event-row-count-label {
    display: none;
  }

  .event-table-past .event-row {
    opacity: 1;
    color: var(--color-muted);
  }

  .event-table-past .event-row-name a,
  .event-table-past .event-row-city,
  .event-table-past .event-row-count {
    color: var(--color-muted);
  }
}

/* Einheitlicher Tabellenstil für Rangliste, Statistik und Top 8:
   Tabelle als Karte, kleine Kopfzeile, Zahlen rechtsbündig mit fester
   Ziffernbreite, eigene Zeile hervorgehoben. */
.data-table-wrap {
  overflow-x: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: var(--section-gap);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--row-font);
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: var(--row-pad-y) var(--row-pad-x);
  text-align: left;
  vertical-align: baseline;
  border-top: 1px solid var(--color-border);
}

.data-table thead th {
  border-top: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
}

.data-table .col-rank {
  width: 2.5rem;
  text-align: center;
  white-space: nowrap;
}

.data-table .col-num {
  text-align: right;
  white-space: nowrap;
}

/* Sieg/Niederlage/Unentschieden als drei schmale Einzelspalten. */
.data-table .col-wld {
  width: 2.75rem;
}

.data-table .col-date {
  white-space: nowrap;
  color: var(--color-muted);
}

.data-table .col-name a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.data-table .col-name a:hover {
  text-decoration: underline;
}

.data-table .col-deck {
  white-space: nowrap;
}

.data-table .col-deck a {
  color: var(--color-primary);
  text-decoration: none;
}

.data-table .col-deck .decklist-text {
  display: inline-block;
  margin: 0 0 0 0.6rem;
  white-space: normal;
}

.data-table .col-deck .decklist-text[open] {
  display: block;
  margin: 0.3rem 0 0;
}

.data-table tr.is-me td {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.row-note {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Auf dem Handy weniger wichtige Spalten ausblenden und enger setzen. */
@media (max-width: 640px) {
  .data-table th,
  .data-table td {
    padding: 0.5rem 0.4rem;
  }

  .data-table th:first-child,
  .data-table td:first-child {
    padding-left: 0.75rem;
  }

  .data-table th:last-child,
  .data-table td:last-child {
    padding-right: 0.75rem;
  }

  .data-table .col-rank {
    width: auto;
  }

  .data-table .col-optional,
  .data-table .col-date-weekday,
  .data-table .col-deck .decklist-text,
  .row-note {
    display: none;
  }
}

.page-note {
  font-size: 0.8rem;
  max-width: 70ch;
}

/* Zeitraum-Auswahl als Buttonleiste */
.year-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.year-pill {
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.85rem;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.year-pill:hover {
  border-color: var(--color-primary);
}

.year-pill.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 600;
}

/* Highlights über der Rangliste */
.highlights {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem;
}

.highlight {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "icon value names"
    "icon label label";
  column-gap: 0.6rem;
  align-items: baseline;
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.highlight-icon {
  grid-area: icon;
  font-size: 1.4rem;
  align-self: center;
}

.highlight-value {
  grid-area: value;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.highlight-names {
  grid-area: names;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.highlight-names a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.highlight-label {
  grid-area: label;
  font-size: 0.75rem;
}

/* Zahlenkacheln (Statistik-Übersicht) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* Event-Detailseite (events/show.ejs): Kopf mit Fakten und Teilnehmen-
   Button, darunter auf dem Desktop zwei Spalten (Inhalt | Teilnahme +
   Teilnehmer). Auf dem Handy werden beide Spalten wie auf der Startseite
   per display: contents aufgelöst und einzeln sortiert. */
.event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.event-head-main {
  min-width: 0;
}

.event-facts {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-variant-numeric: tabular-nums;
}

.event-facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.event-admin-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.event-admin-links a {
  color: var(--color-muted);
}

.event-admin-links a:hover {
  color: var(--color-primary);
}

.button-cta {
  margin: 0;
  padding: 0.6rem 1.6rem;
  font-size: 1.05em;
  border-radius: 999px;
}

.event-joined-large {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 1em;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.section-head a {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
}

.event-results-image summary {
  cursor: pointer;
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.event-about-card {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-pad);
}

.event-about-image {
  flex: 0 0 auto;
}

.event-about-image img {
  display: block;
  width: 200px;
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.event-about-text {
  flex: 1 1 260px;
  min-width: 0;
}

.event-about-text > :first-child,
.event-description-body > :first-child {
  margin-top: 0;
}

.event-about-text > :last-child,
.event-description-body > :last-child {
  margin-bottom: 0;
}

.event-participation-form summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.event-participation-form .participation-form {
  margin-top: 0.25rem;
}

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

.participant {
  margin: 0;
  padding: var(--row-pad-y) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--row-font);
}

.participant:first-child {
  border-top: none;
}

.participant.is-me {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  margin: 0 calc(var(--card-pad) * -1);
  padding-left: var(--card-pad);
  padding-right: var(--card-pad);
}

.participant.is-maybe .participant-name {
  color: var(--color-muted);
}

.participant-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.participant-name {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.participant-name:hover {
  text-decoration: underline;
}

.participant-icons {
  display: inline-flex;
  gap: 0.2rem;
  font-size: 0.85rem;
}

.participant-result {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.participant-deck {
  font-size: 0.8rem;
}

.participant-deck a {
  color: var(--color-primary);
  text-decoration: none;
}

.participant-contacts {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  gap: 0 0.75rem;
  line-height: 1.4;
}

.participant-legend {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
}

.event-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.event-main,
.event-side {
  display: contents;
}

.event-main > section,
.event-side > section {
  margin-bottom: 0;
}

.event-my-participation { order: 1; }
.event-results { order: 2; }
.event-about { order: 3; }
.event-participants { order: 4; }
.event-comments { order: 5; }

@media (min-width: 1100px) {
  .event-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    column-gap: 1.5rem;
  }

  .event-main {
    display: block;
    min-width: 0;
  }

  .event-main > section + section {
    margin-top: var(--section-gap);
  }

  .event-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }
}

/* Footer mit Impressum/Datenschutz und Fan-Content-Hinweis */
.site-footer {
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.5rem var(--page-gutter) 2rem;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-muted);
}

.site-footer-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.site-footer-links a {
  color: var(--color-muted);
}

.site-footer-fine {
  max-width: 60ch;
  margin: 0.5rem auto 0;
  font-size: 0.7rem;
  opacity: 0.8;
}

/* Impressum / Datenschutz */
.legal {
  max-width: 70ch;
}

.legal h2 {
  font-size: 1.05rem;
  margin: 1.5rem 0 0.4rem;
}

.legal p,
.legal li {
  line-height: 1.6;
}

.legal-contact {
  font-style: normal;
  line-height: 1.6;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.legal-placeholder {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
  color: var(--color-danger);
  font-weight: 600;
  padding: 0 0.25rem;
  border-radius: 3px;
}

.top-cut-table--entry .top-cut-archetype {
  margin-bottom: 0.4rem;
}

/* Decktyp: automatisch erkannte Werte leicht abgesetzt (kursiv), damit
   man sieht, was niemand bewusst eingetragen hat. */
.deck-name.is-auto {
  font-style: italic;
}

.data-table tr.is-unknown td {
  color: var(--color-muted);
}

.data-table .col-archetype {
  white-space: nowrap;
}

.participant-archetype {
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Metagame-Seite */
.page-subtitle {
  margin: 0;
}

.filter-bars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1.25rem;
}

.coverage {
  margin-bottom: 1rem;
  padding: 0.75rem var(--card-pad);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.coverage-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--row-font);
}

.coverage-pct {
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
}

.coverage-bar,
.meta-bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-muted) 18%, transparent);
  overflow: hidden;
}

.coverage-bar {
  margin-top: 0.4rem;
}

.coverage-bar > span,
.meta-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
}

.meta-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--section-gap);
}

.meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 4rem minmax(0, 1.6fr) 4.5rem 2.5rem;
  align-items: center;
  column-gap: 1rem;
  padding: var(--row-pad-y) var(--row-pad-x);
  font-size: var(--row-font);
  font-variant-numeric: tabular-nums;
}

.meta-row-head {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
}

.meta-item {
  border-top: 1px solid var(--color-border);
}

.meta-item > summary {
  cursor: pointer;
  list-style: none;
}

.meta-item > summary::-webkit-details-marker {
  display: none;
}

.meta-item > summary:hover,
.meta-item[open] > summary {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.meta-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-name::before {
  content: "▸ ";
  color: var(--color-muted);
  font-weight: 400;
}

.meta-item[open] .meta-name::before {
  content: "▾ ";
}

.meta-item-unknown .meta-name {
  font-weight: 400;
  color: var(--color-muted);
}

.meta-num {
  text-align: right;
}

.meta-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: 0.6rem;
}

.meta-pct {
  text-align: right;
  color: var(--color-muted);
}

.meta-plays {
  list-style: none;
  margin: 0;
  padding: 0.25rem var(--row-pad-x) 0.6rem 2.2rem;
  font-size: 0.85rem;
}

.meta-plays li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.4fr) 6rem 3.5rem;
  gap: 0.75rem;
  align-items: baseline;
  margin: 0;
  padding: 0.2rem 0;
  font-variant-numeric: tabular-nums;
}

.meta-play-date {
  color: var(--color-muted);
}

.meta-plays a {
  color: var(--color-text);
  text-decoration: none;
}

.meta-plays a:hover {
  text-decoration: underline;
}

.meta-play-event {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-play-deck a {
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .meta-row {
    grid-template-columns: minmax(0, 1fr) 2.5rem 5.5rem 3.5rem;
    column-gap: 0.5rem;
  }

  .meta-optional {
    display: none;
  }

  .meta-share {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .meta-share .meta-bar {
    height: 6px;
  }

  .meta-plays {
    padding-left: var(--row-pad-x);
  }

  .meta-plays li {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  }

  .meta-play-event,
  .meta-play-deck {
    display: none;
  }
}

.meta-item-unknown .meta-bar > span {
  background: color-mix(in srgb, var(--color-muted) 55%, transparent);
}

/* Hinweisbalken der Beta-Instanz (BETA_NOTICE in .env) */
.beta-banner {
  padding: 0.4rem var(--page-gutter);
  background: #fde68a;
  color: #713f12;
  font-size: 0.85rem;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  .beta-banner {
    background: #713f12;
    color: #fef3c7;
  }
}