:root {
  --green: #2d8c4e;
  --green-light: #e8f5ed;
  --red: #c0392b;
  --red-light: #fdecea;
  --blue: #1a56a0;
  --blue-light: #e8f0fb;
  --gold: #c9941f;
  --gold-light: #fbf2e1;
  --gray: #f4f5f7;
  --border: #dde1e8;
  --text: #1e2330;
  --muted: #676e7c;
  --white: #ffffff;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --radius: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #eef1f6;
  color: var(--text);
  min-height: 100vh;
}
code {
  background: var(--gray);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
  font-family: "Consolas", "SF Mono", monospace;
}

/* Header */
header {
  background: var(--blue);
  color: white;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  flex-wrap: wrap;
}
header h1 { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex: 1 1 200px; }
.header-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1 1 200px; justify-content: flex-end; }
.header-logo { height: 44px; width: auto; display: block; }
.back-to-dashboard {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: white; text-decoration: none;
  background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 16px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto;
  transition: background 0.15s ease;
}
.back-to-dashboard:hover { background: rgba(255, 255, 255, 0.28); }

.version-badge {
  font-size: 12px; font-weight: 600; opacity: 0.9;
  background: rgba(255,255,255,0.18); border-radius: 999px; padding: 2px 10px;
}
.version-badge-dark { font-size: 12px; color: var(--muted); font-weight: 600; }

/* Nav / Layout */
nav {
  display: flex; gap: 4px; background: var(--white);
  padding: 8px 28px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
nav button {
  background: none; border: none; padding: 10px 16px;
  font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0;
}
nav button:hover { background: var(--gray); }
nav button.active { color: var(--blue); border-bottom-color: var(--blue); }

main { max-width: 880px; margin: 0 auto; padding: 24px 16px 60px; }
.tab-section { display: none; }
.tab-section.active { display: block; }

/* Cards */
.card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px; margin-bottom: 18px;
}
.card h2 { font-size: 17px; margin-bottom: 14px; color: var(--blue); }
.card h3 { font-size: 15px; margin-bottom: 10px; }
.subcard {
  background: var(--gray); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px; margin-top: 14px;
}

.connect-screen { max-width: 560px; margin: 60px auto; }
.connect-screen .card { padding: 32px; }

.section-divider {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--blue); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}

/* Buttons */
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
button.btn, a.btn {
  background: var(--blue); color: white; border: none; padding: 10px 20px;
  border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button.btn:hover, a.btn:hover { opacity: 0.9; }
button.btn.secondary, a.btn.secondary { background: var(--gray); color: var(--text); border: 1px solid var(--border); }
button.btn.danger { background: var(--red); }
button.btn.success { background: var(--green); }
button.btn.small, a.btn.small { padding: 6px 12px; font-size: 13px; }
button.btn:disabled { opacity: 0.5; cursor: default; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 6px; }
.form-field { margin-bottom: 6px; }
.form-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 6px; font-size: 14px; font-family: inherit;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26, 86, 160, 0.12);
}
.radio-option {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; line-height: 1.4;
}
.radio-option input { margin-top: 3px; }
.radio-option span { font-size: 14px; }

/* Banners */
.muted { color: var(--muted); line-height: 1.5; }
.error-banner {
  display: none; background: var(--red-light); color: var(--red); border-radius: 6px;
  padding: 10px 12px; margin: 10px 0; font-size: 13px;
}
.error-banner.show { display: block; }
.warn-banner {
  background: var(--gold-light); color: #8a6412; border: 1px solid #e6cf92;
  border-radius: 6px; padding: 10px 12px; margin: 10px 0 0; font-size: 13px; line-height: 1.5;
}
.empty-state {
  text-align: center; color: var(--muted); padding: 24px 16px; font-size: 14px; line-height: 1.5;
}

/* Platzhalter-Chips */
.field-chip {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; margin: 0 6px 6px 0; border: 1px solid var(--border);
}
.field-chip.profil { background: var(--blue-light); color: var(--blue); border-color: #bcd2f0; }
.field-chip.trainerdaten { background: var(--gold-light); color: #8a6412; border-color: #e6cf92; }
.field-chip.auto { background: var(--gray); color: var(--muted); }
.field-chip.unbekannt { background: var(--red-light); color: var(--red); border-color: #f0b7b0; }

/* Platzhalter-Referenz (klickbar, Vorlagen-Tab) */
.ph-group { margin-bottom: 16px; }
.ph-group:last-child { margin-bottom: 0; }
.ph-group-title {
  font-size: 11px; font-weight: 700; color: var(--muted);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.field-chip.copyable {
  cursor: pointer; font-family: inherit; text-align: left;
  padding: 5px 11px; margin: 0 8px 8px 0;
  display: inline-flex; align-items: baseline; gap: 7px;
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.field-chip.copyable:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13); transform: translateY(-1px); }
.field-chip.copyable:active { transform: none; box-shadow: none; }
.field-chip .chip-key { font-family: "Consolas", "SF Mono", monospace; font-weight: 700; }
.field-chip .chip-label { font-weight: 500; opacity: 0.85; font-size: 11px; }
.field-chip.copied { background: var(--green-light) !important; color: var(--green) !important; border-color: #a8d8ba !important; }

/* Empfänger-Filter */
.filter-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px;
}
.filter-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 150px; }
.filter-field label {
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.filter-field select { width: 100%; }
/* Der Reset-Button sitzt in derselben Zeile wie die Selects (align-items:flex-end),
   soll aber nicht mitwachsen. */
.filter-row .btn { flex: 0 0 auto; }

/* Empfängerliste */
.recipient-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.recipient-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.recipient-row:last-child { border-bottom: none; }
.recipient-row:hover { background: var(--gray); }
.recipient-row input { width: 16px; height: 16px; flex: 0 0 auto; }
.recipient-row .r-name { font-weight: 600; }
.recipient-row .r-meta { color: var(--muted); font-size: 12px; margin-left: auto; text-align: right; }
.recipient-row.missing .r-meta { color: var(--red); }
#recipient-count.warn { color: var(--red); font-weight: 600; }

/* Wohnort-Filter (Häkchen, Mehrfachauswahl).
   ⚠️ Die Kästchen stehen bewusst NICHT in einem .form-field — dort greift
   `input { width: 100% }` und macht aus jeder Checkbox einen Balken quer durch
   die Karte. Die Breite steht deshalb hier explizit, wie bei .recipient-row. */
.filter-orte {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 10px;
}
.filter-orte > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue);
  list-style-position: inside;
}
.filter-orte-kopf {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 8px;
}
/* In sich scrollen: bei zwei Dutzend Dörfern schöbe die Liste sonst die
   Empfängerauswahl aus dem Bild. */
.filter-orte-liste { max-height: 200px; overflow-y: auto; }
.filter-ort-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 2px; cursor: pointer; font-size: 14px;
}
.filter-ort-zeile input { width: 16px; height: 16px; flex: 0 0 auto; }
.filter-ort-name { min-width: 0; overflow-wrap: anywhere; }
/* Die Ortsteile stehen unter dem Gruppennamen, nicht dahinter — dahinter träfen
   sie bei „Heilbad Heiligenstadt mit Bernterode, Bischhagen, …" am Handy auf die
   Zahl am rechten Rand. */
.filter-ort-teile { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; }
.filter-ort-zahl { margin-left: auto; color: var(--muted); font-size: 12px; flex: 0 0 auto; }

/* Vorlagen-Liste */
.tpl-item {
  border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px;
}
.tpl-item .tpl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tpl-item .tpl-name { font-weight: 700; font-size: 15px; }
.tpl-item .tpl-desc { color: var(--muted); font-size: 13px; }
.tpl-item .tpl-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Vorschau-Tabelle */
table.preview { border-collapse: collapse; width: 100%; font-size: 13px; }
table.preview th, table.preview td {
  border: 1px solid var(--border); padding: 6px 9px; text-align: left; white-space: nowrap;
}
table.preview th { background: var(--gray); font-size: 12px; position: sticky; top: 0; }
table.preview td.missing { background: var(--red-light); color: var(--red); }

/* Changelog */
.changelog-version { margin-bottom: 16px; }
.changelog-version h4 { color: var(--blue); font-size: 14px; margin-bottom: 4px; }
.changelog-group { margin: 6px 0 6px 0; }
.changelog-group .cg-title { font-weight: 600; font-size: 13px; }
.changelog-group ul { margin: 4px 0 0 18px; }
.changelog-group li { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 3px; }

/* Rechte Nav-Gruppe (Einstellungen/Verwaltung + Info). Das margin haengt
   am Wrapper, damit die Gruppe rechts bleibt, auch wenn einzelne Buttons
   fuer Nicht-Admins ausgeblendet sind. */
/* flex-wrap, weil die Gruppe sonst als ein Stueck ueber den rechten Rand
   hinauslaeuft: bei 375px bleiben neben dem linken Reiter nur ~319px, und
   vier Reiter brauchen mehr. Ohne den Umbruch ist der letzte nicht antippbar. */
nav .nav-right { margin-left: auto; display: flex; flex-wrap: wrap; gap: inherit; }

/* ---------- Handy: Formularfelder mindestens 16px ----------
   iOS Safari zoomt beim Antippen eines Feldes unter 16px automatisch in die
   Seite hinein — und wieder heraus zoomt es nicht. Die Feldregeln weiter oben
   laufen über Klassen und sind damit höher spezifisch als ein reiner
   Elementsatz, deshalb hier !important. Gilt nur auf schmalen Schirmen, das
   Desktop-Design bleibt unverändert. */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ── Bereitstellen im Downloadbereich (seit 2026-08-17) ────────────────────── */

/* Zuordnung Datei -> Person. Zwei Spalten, die am Handy umbrechen; der linke
   Teil traegt den Dateinamen und muss `min-width: 0` haben, sonst sprengt ein
   langer Name die Karte (ein Flex-Kind schrumpft ohne das nie unter seinen
   Inhalt). */
.dv-zuordnung {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.dv-zuordnung:first-child { border-top: none; }
.dv-zuordnung-datei {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Der linke Rand traegt die Aussage, nicht die Schriftfarbe: ein rot gefaerbter
   Text waere auf dem hellen Grund schlechter lesbar und bei Rot-Gruen-Schwaeche
   gar nicht zu unterscheiden. */
.dv-zuordnung.ok   { border-left: 3px solid var(--green); padding-left: 8px; }
.dv-zuordnung.warn { border-left: 3px solid var(--gold);  padding-left: 8px; }

.dv-bereit-zeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.dv-bereit-zeile:first-child { border-top: none; }
.dv-bereit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 260px;
  min-width: 0;
}
.dv-bereit-text > * { overflow-wrap: anywhere; min-width: 0; }

/* Ob jemand hingesehen hat, ist die Frage, wegen der man diese Liste öffnet —
   deshalb eine eigene Zeile und nicht angehängt an die graue Kleinschrift.
   Das Zeichen davor trägt die Aussage mit: nur über die Farbe unterscheidbar
   wäre sie bei Rot-Grün-Schwäche keine Aussage (gleiche Linie wie .dv-zuordnung). */
.dv-bereit-zugriff { font-size: 12px; }
.dv-bereit-zugriff.da::before    { content: "✓ "; }
.dv-bereit-zugriff.offen::before { content: "○ "; }
.dv-bereit-zugriff.da    { color: #2e7d32; }
.dv-bereit-zugriff.offen { color: var(--muted, #666); }
.dv-bereit-wer { font-size: 12px; color: var(--muted, #666); }
.dv-bereit-wer summary { cursor: pointer; }
.dv-bereit-wer > div { padding: 2px 0 0 14px; }

/* Karte "Funktionen" im Info-Reiter. Die Schriftgroesse haengt sonst an
   .changelog-entry — die Klasse hat diese Karte nicht. */
#funktionen-list { display: flex; flex-direction: column; gap: 18px; font-size: 13px; }