/* LO-Server: App-Look der Einsatzkarte (Schwarz/Rot/Gold, Archivo).
   Die Akzentfarbe der LO kommt als --akzent aus base.html. */
:root {
  --hintergrund: #F4F4F1;
  --flaeche: #FFFFFF;
  --rand: #E3E4E0;
  --chip-rand: #DDDED9;
  --trenner: #F1F1EE;
  --hellgrau: #EFEFEC;
  --tinte: #1A1B1E;
  --text2: #3A3C42;
  --sekundaer: #6B6E76;
  --rot: #D6001C;
  --rot-dunkel: #B0001F;
  --rot-ton: #FBE3E6;
  --gold: #FFCC00;
  --gold-ton: #FFF4C2;
  --gold-text: #6E5A00;
  --gruen-ton: #E3F1E6;
  --gruen-text: #1F7A33;
  --akzent: var(--rot);
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: Archivo, system-ui, -apple-system, sans-serif;
  background: var(--hintergrund);
  color: var(--tinte);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--rot-dunkel); }
a:hover { color: var(--tinte); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ----- Rahmen ----- */
.rahmen { display: flex; flex-wrap: wrap; min-height: 100vh; }
.seitenleiste {
  flex: 1 1 240px; max-width: 100%;
  background: var(--tinte); color: #fff;
  display: flex; flex-direction: column;
}
.inhalt { flex: 999 1 560px; min-width: 0; padding: 28px 28px 48px; display: flex; flex-direction: column; gap: 20px; }
.marke { padding: 22px 20px; display: flex; gap: 12px; align-items: center; text-decoration: none; color: #fff; }
.marke:hover { color: #fff; }
.marke-logo {
  width: 44px; height: 44px; border-radius: 10px; background: #fff; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--akzent); font-weight: 800; font-size: 14px;
}
.marke-logo img { width: 100%; height: 100%; object-fit: contain; }
.marke-name { font-size: 15px; font-weight: 800; }
.marke-zusatz { font-size: 12px; color: #C0C2C7; }
.trikolore { display: flex; height: 3px; }
.trikolore span { flex: 1; }
.trikolore span:nth-child(1) { background: #3A3C42; }
.trikolore span:nth-child(2) { background: var(--rot); }
.trikolore span:nth-child(3) { background: var(--gold); }
.navigation { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.navigation a, .navigation .bald {
  padding: 11px 12px; border-radius: 9px; color: #D4D5D8;
  text-decoration: none; font-weight: 600;
}
.navigation a:hover { background: #2A2B30; color: #fff; }
.navigation a[aria-current="page"] { background: #fff; color: var(--tinte); }
.navigation .bald { color: #8A8D94; cursor: default; }
.navigation .bald:hover { background: transparent; color: #8A8D94; }
.navigation .bald small { font-size: 11px; margin-left: 6px; }
.konto { margin-top: auto; padding: 16px 20px 22px; font-size: 13px; color: #C0C2C7; display: flex; flex-direction: column; gap: 8px; }
.konto a { color: #D4D5D8; }
.konto button { all: unset; cursor: pointer; color: #D4D5D8; text-decoration: underline; }

/* ----- Kopf einer Seite ----- */
.kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; }
.kopf h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.4px; }
.kopf .unter { font-size: 14px; color: var(--sekundaer); }
.zurueck { font-size: 13px; font-weight: 700; color: var(--sekundaer); text-decoration: none; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- Bausteine ----- */
.kachel {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
}
.kachel-innen { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.versal { font-size: 12px; font-weight: 800; letter-spacing: 0.9px; color: var(--sekundaer); text-transform: uppercase; margin: 0; }
.spalten { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.spalten > .breit { flex: 999 1 520px; min-width: 0; }
.spalten > .schmal { flex: 1 1 320px; min-width: 0; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.zahl { padding: 16px 18px; }
.zahl b { display: block; font-size: 30px; font-weight: 800; }
.zahl span { font-size: 13px; color: var(--sekundaer); font-weight: 600; }
.hinweis { font-size: 13px; color: var(--text2); background: var(--hintergrund); border-radius: 10px; padding: 12px; }

.knopf {
  font: inherit; font-size: 14px; font-weight: 700; padding: 11px 16px; border-radius: 10px;
  border: 1px solid var(--chip-rand); background: var(--flaeche); color: var(--tinte);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.knopf:hover { border-color: var(--tinte); color: var(--tinte); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 800; }
.knopf.haupt:hover { filter: brightness(0.92); color: #fff; }
.knopf.dunkel { background: var(--tinte); border-color: var(--tinte); color: #fff; font-weight: 800; }
.knopf.gefahr { color: var(--rot-dunkel); }
.knopf:focus-visible, .navigation a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}

.pille {
  display: inline-block; padding: 4px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
  background: var(--hellgrau); color: var(--text2);
}
.pille.verbunden, .pille.gruen { background: var(--gruen-ton); color: var(--gruen-text); }
.pille.offen, .pille.gold { background: var(--gold-ton); color: var(--gold-text); }
.pille.rot { background: var(--rot-ton); color: var(--rot-dunkel); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 12px; border-radius: 99px; border: 1px solid var(--chip-rand);
  font-size: 13px; font-weight: 700; color: var(--text2); text-decoration: none;
}
.chip[aria-current="true"] { background: var(--tinte); border-color: var(--tinte); color: #fff; }

/* ----- Tabelle ----- */
.tabelle-box { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 10px 16px; font-size: 12px; letter-spacing: 0.8px;
  color: var(--text2); border-bottom: 1px solid var(--rand); text-transform: uppercase;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--trenner); color: var(--text2); }
tr:last-child td { border-bottom: 0; }
td.name a { font-weight: 700; color: var(--tinte); text-decoration: none; }
td.name a:hover { text-decoration: underline; }
.leer { padding: 28px 16px; text-align: center; color: var(--sekundaer); }

/* ----- Formulare ----- */
.feld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text2); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 15px; font-weight: 500; padding: 10px 12px;
  border: 1px solid var(--chip-rand); border-radius: 9px; background: var(--flaeche); color: var(--tinte);
}
.feld small { font-weight: 500; color: var(--sekundaer); }
.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.schalter { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; }
.schalter input { width: 20px; height: 20px; accent-color: var(--akzent); }
.suche { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--rand); align-items: center; }
.suche input { flex: 1 1 220px; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--chip-rand); border-radius: 9px; background: #FAFAF8; }

/* ----- Meldungen ----- */
.meldungen { display: flex; flex-direction: column; gap: 8px; }
.meldung { padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.meldung.ok { background: var(--gruen-ton); color: var(--gruen-text); }
.meldung.fehler { background: var(--rot-ton); color: var(--rot-dunkel); }
.meldung.warnung { background: var(--gold-ton); color: var(--gold-text); }

/* ----- Einladung ----- */
.qr { align-self: center; padding: 14px; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; line-height: 0; }
.qr svg { width: 200px; height: 200px; }
.link-box { font-size: 13px; padding: 10px 12px; background: var(--hintergrund); border-radius: 9px; word-break: break-all; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.raster-2 form { display: contents; }
.liste { display: flex; flex-direction: column; }
.liste > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--trenner); }
.liste > div:first-child { border-top: 0; }
.klein { font-size: 13px; color: var(--sekundaer); }

/* ----- Turniere und Einteilung ----- */
.reiter { display: flex; flex-wrap: wrap; gap: 8px; }
.kampftag-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.kampftag-kopf h2 { margin: 0; font-size: 18px; font-weight: 800; }
.matte { border: 1px solid var(--rand); border-radius: 12px; }
.matte-kopf { padding: 10px 14px; border-bottom: 1px solid var(--trenner); font-weight: 800; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--sekundaer); }
.matte .liste > div { padding: 10px 14px; }
.matten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.einteilen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.zeilen { display: flex; flex-direction: column; gap: 10px; }
.zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--trenner); border-radius: 12px; }
details.aendern > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sekundaer); list-style: none; }
details.aendern > summary::-webkit-details-marker { display: none; }
details.aendern[open] { flex-basis: 100%; }
details.aendern form { margin-top: 10px; }
.inline { display: inline; }
.knopf.klein-knopf { padding: 6px 10px; font-size: 13px; }
.namen { display: flex; flex-wrap: wrap; gap: 6px; }
.pruefung { display: flex; gap: 10px; align-items: flex-start; }
.zahl-rechts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ----- Einzelseiten ohne Seitenleiste ----- */
.einzel { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.einzel .kachel { width: 100%; max-width: 420px; }
.einzel-kopf { padding: 24px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.einzel-kopf .marke-logo { width: 64px; height: 64px; border-radius: 14px; background: var(--tinte); color: #fff; }

@media (max-width: 700px) {
  .inhalt { padding: 20px 16px 40px; }
  .kopf h1 { font-size: 24px; }
}

@media print {
  .seitenleiste, .knoepfe, .nicht-drucken { display: none !important; }
  body { background: #fff; }
  .kachel { border: 0; }
}

/* Blättern in langen Listen */
.blaettern { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--rand); }