:root {
  --green: #2d8c4e;
  --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; }
.hidden { display: none !important; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #eef1f6;
  color: var(--text);
  min-height: 100vh;
}

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; }
.header-user { font-size: 13px; opacity: 0.95; display: flex; align-items: center; gap: 6px; }
.header-status { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); }
.header-status:empty { display: none; }
.header-status.is-ok { background: rgba(110, 224, 138, 0.25); }
.header-status.is-error { background: rgba(255, 120, 120, 0.35); font-weight: 600; }
.header-status.is-pending { opacity: 0.85; }
.season-picker { font-size: 12px; display: flex; align-items: center; gap: 6px; opacity: 0.95; }
.season-picker select {
  padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12); color: white; font-size: 13px; font-weight: 600;
}
.season-picker select option { color: var(--text); }

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: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
.tab-section { display: none; }
.tab-section.active { 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); text-decoration: none; }

.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 { font-size: 17px; margin-bottom: 14px; color: var(--blue); }

.connect-screen { max-width: 520px; margin: 60px auto; text-align: center; }
.connect-screen .card { padding: 32px; }
.connect-screen h2 { color: var(--blue); margin-bottom: 14px; }
.connect-screen p { color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

button.btn, .btn {
  background: var(--blue);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.btn:hover, .btn:hover { opacity: 0.9; }
.btn.secondary { background: var(--gray); color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: var(--red); }
.btn.success { background: var(--green); }
.btn.small { padding: 6px 12px; font-size: 13px; }

/* ---------- Toolbar / Mannschafts-Umschalter (wie Tages-Umschalter in Platzbelegung) ---------- */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.day-switch { display: flex; gap: 4px; flex-wrap: wrap; }
.day-switch button {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.day-switch button:hover { background: var(--blue-light); }
.day-switch button.active { background: var(--blue); color: white; border-color: var(--blue); }
.day-switch button[draggable="true"] { cursor: grab; }
.day-switch button.dragging { opacity: 0.4; cursor: grabbing; }
.day-switch button.drag-over { outline: 2px dashed var(--blue); outline-offset: 2px; }
.toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Summen-Karten (Übersicht) ---------- */
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.summary-card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 20px; border-left: 5px solid var(--blue);
}
.summary-card.strong { border-left-color: var(--green); background: #f4fbf6; }
.sc-label { font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.sc-value { font-size: 26px; font-weight: 800; color: var(--blue); margin: 4px 0; }
.summary-card.strong .sc-value { color: var(--green); }
.sc-sub { font-size: 12px; color: var(--muted); }

/* ---------- Datentabellen ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
table.data-table thead th {
  background: var(--blue); color: white; font-size: 12px; font-weight: 600;
  padding: 9px 10px; text-align: left; white-space: nowrap; position: sticky; top: 0;
}
table.data-table th.num, table.data-table td.num { text-align: right; white-space: nowrap; }
table.data-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
table.data-table tbody tr:nth-child(even) { background: #fafbfc; }
table.data-table td.strong, table.data-table td .strong { font-weight: 700; }
body.can-edit table.data-table tbody tr.data-row { cursor: pointer; }
body.can-edit table.data-table tbody tr.data-row:hover { background: var(--blue-light); }
.badge {
  display: inline-block; min-width: 16px; text-align: center; font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 999px; background: var(--gold); color: white; vertical-align: middle;
}

/* ---------- Busplan-Gitter (Status-Badges) ---------- */
table.busplan-table td { vertical-align: middle; }
.status-badge {
  display: inline-block; font-size: 12px; font-weight: 700; color: white;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
body.can-edit .status-badge.is-clickable { cursor: pointer; }
body.can-edit .status-badge.is-clickable:hover { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25); }
.status-badge.has-conflict { box-shadow: 0 0 0 2px var(--red); }
body.can-edit .status-badge.has-conflict.is-clickable:hover { box-shadow: 0 0 0 2px var(--red); }

/* ---------- Konflikte-Karte (Übersicht) ---------- */
.konflikt-row {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 10px 14px; border: 1px solid var(--red); background: var(--red-light);
  border-radius: 8px; margin-bottom: 8px; font-size: 14px; cursor: pointer;
}
.konflikt-row:hover { opacity: 0.85; }
.konflikt-row .lr-strong { font-weight: 700; }

/* ---------- Filterleiste / Liste ---------- */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filter-bar input[type="search"], .filter-bar select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: var(--white);
}
.filter-bar input[type="search"] { flex: 1; min-width: 180px; }
.filter-count { font-size: 13px; color: var(--muted); margin-left: auto; }

.list-rows { display: flex; flex-direction: column; gap: 8px; }
.list-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.4fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}
body.can-edit .list-row { cursor: pointer; }
body.can-edit .list-row:hover { background: var(--blue-light); }
.list-row .lr-strong { font-weight: 700; }
.list-row-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.4fr 1fr;
  gap: 10px;
  padding: 0 14px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}
@media (max-width: 800px) {
  .list-row, .list-row-header { grid-template-columns: 1fr 1fr; }
  .list-row-header { display: none; }
}

/* ---------- Parameter-/Bus-Optionen-Editor ---------- */
.param-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.param-row .pg-label { flex: 1; min-width: 120px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; }
.busoption-row { margin-bottom: 14px; }
.busoption-row .pg-regeln {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: inherit; resize: vertical;
  /* Hoehe setzt autoGrowRegeln() nach dem Inhalt — min-height haelt leere Felder auf zwei Zeilen */
  min-height: 48px; overflow-y: hidden;
}
.icon-btn {
  background: var(--red-light); color: var(--red); border: none; border-radius: 6px;
  width: 30px; height: 30px; font-size: 18px; line-height: 1; cursor: pointer; font-weight: 700;
}
.icon-btn:hover { background: var(--red); color: white; }
.icon-btn.edit { background: var(--blue-light); color: var(--blue); font-size: 14px; }
.icon-btn.edit:hover { background: var(--blue); color: white; }

.checkbox-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 14px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.checkbox-row input { width: 16px; height: 16px; }

/* ---------- Formular / Modal ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
/* Ausdrücklich NUR echte Eingabefelder -- Kästchen und Punkte müssen ihre
   Eigengröße behalten. Ein `width: 100%` auf einer Checkbox macht daraus eine
   500 px breite Box, in die der Browser das Steuerelement mittig zeichnet: der
   Punkt landet in der Mitte der Zeile, der zugehörige Text weit rechts bzw.
   unter dem Kästchen. Genau so sahen der Zuweisen- und der Ressort-Dialog aus.
   Die Regel schlug dabei `.checkbox-row input { width: 16px }` -- gleiche
   Spezifität, aber sie steht später in der Datei.
   Umgekehrt fehlte `textarea` ganz und blieb im Browser-Default: 163 px schmal,
   Monospace, ohne Innenabstand, während das Textfeld daneben korrekt aussah.
   Das Rückfragen-Feld im Detail-Dialog steckt in keinem `.form-field` und lief
   deshalb noch nach diesem Fix im Default weiter -- es steht hier mit im
   Selektor, damit ein Eingabefeld nicht davon abhängt, in welchem Block es liegt. */
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.kommentar-neu textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; font-family: inherit;
}
.form-field textarea { resize: vertical; min-height: 72px; }
.form-field.wide { grid-column: 1 / -1; }
/* Die Blöcke außerhalb des Rasters (An wen?, Personen, Ressort, Schalterzeile)
   standen ohne jeden Abstand aufeinander -- den Abstand liefert sonst das
   `gap` des .form-grid, und das greift bei direkten Formularkindern nicht.
   Sichtbar daran, dass der Hinweis unter "Personen" am nächsten Feldnamen klebte. */
.modal-body form > .form-field { margin-bottom: 14px; }
.modal-body form > .form-field:last-child { margin-bottom: 0; }
#meta-view .form-field span, #season-info { font-size: 14px; }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 26, 40, 0.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto;
}
.modal {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 640px; width: 100%; display: flex; flex-direction: column;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header h2 { color: var(--blue); font-size: 18px; }
.modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px 22px; }
.modal-footer { display: flex; justify-content: space-between; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); flex-wrap: wrap; }
/* Der Löschen-Knopf links ist rechteabhängig und verschwindet mit `display:none`
   ganz aus dem Fluss -- ohne ihn hätte `space-between` nur noch ein Kind zu
   verteilen und die rechte Gruppe stünde plötzlich links. `margin-left:auto`
   hängt sie an die rechte Kante, unabhängig davon, wer den Dialog öffnet. */
.modal-footer > .footer-rechts { margin-left: auto; }

.version-badge {
  font-size: 11px; font-weight: 600;
  background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px; padding: 2px 9px; vertical-align: middle; margin-left: 4px;
}
.card .version-badge { background: var(--blue-light); border-color: var(--blue-light); color: var(--blue); }

#changelog-list { display: flex; flex-direction: column; gap: 8px; }
.changelog-entry { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.changelog-entry .cv { font-weight: 700; color: var(--blue); }
.changelog-group { display: flex; flex-direction: column; gap: 4px; }
.changelog-group .cg-title { font-weight: 700; font-size: 14px; color: var(--blue); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.changelog-group .cg-items { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; color: var(--text); }

.muted { color: var(--muted); font-size: 13px; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }

/* ---------- Druckansicht (PDF-Export via window.print) ---------- */
#print-area { display: none; }
body.printing-report > *:not(#print-area) { display: none !important; }
body.printing-report #print-area { display: block; padding: 20px; }
#print-area h1 { font-size: 1.4rem; margin-bottom: 4px; color: #000; }
#print-area .print-meta { font-size: 0.85rem; color: #444; margin-bottom: 16px; }
.print-kennzahlen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.print-kennzahl { border: 1px solid #ccc; border-radius: 6px; padding: 8px 14px; min-width: 120px; }
.print-kennzahl .pk-label { font-size: 0.7rem; color: #444; text-transform: uppercase; letter-spacing: 0.3px; }
.print-kennzahl .pk-value { font-size: 1.2rem; font-weight: 700; color: #000; }
.print-konflikte { margin-bottom: 20px; }
.print-konflikte h2 { font-size: 1.05rem; margin-bottom: 8px; color: #000; }
.print-konflikt-row { font-size: 0.85rem; padding: 4px 0; border-bottom: 1px solid #eee; color: #000; }
.print-team-block { margin-bottom: 22px; }
.print-team-block h2 { font-size: 1.05rem; margin-bottom: 8px; color: #000; }
.print-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.print-table th, .print-table td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; vertical-align: top; color: #000; }
.print-table th.num, .print-table td.num { text-align: right; white-space: nowrap; }
.print-table td.print-status-cell {
  color: #fff; font-weight: 700; text-align: center;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media print {
  .print-table tr { page-break-inside: avoid; }
  .print-team-block { page-break-inside: avoid; }
}

/* 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; }
}
/* ================= Vereinsaufgaben ================= */

.summary-value { display:block; font-size:2rem; font-weight:700; line-height:1.1; }
.summary-label { display:block; font-size:.85rem; color:#5b6470; margin-top:2px; }

/* ---- Personenübersicht ---- */
.person-list { display:flex; flex-direction:column; gap:8px; }
.person-card { border:1px solid #dde3ea; border-radius:8px; overflow:hidden; background:#fff; max-width:100%; }
.person-card.hat-ueberfaellig { border-color:#e6b0aa; }
.person-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:none; border:0; cursor:pointer; text-align:left; font:inherit; flex-wrap:wrap; }
.person-head:hover { background:#f4f7fb; }
.person-name { font-weight:600; display:flex; flex-direction:column; gap:2px; min-width:0; }
.person-ressorts { font-weight:400; font-size:.82rem; color:#7a828c; }
.person-zahlen { display:flex; gap:6px; flex-shrink:0; }
.zahl { min-width:34px; text-align:center; padding:3px 8px; border-radius:6px; font-weight:700;
  background:#eaf1f9; color:#2c6fbb; font-size:.9rem; }
.zahl.warn { background:#fdecea; color:#c0392b; }
.zahl.leer { background:#f1f3f5; color:#98a1ab; }
.zahl.ok   { background:#e8f5ec; color:#1e8449; }
.person-body { padding:0 10px 10px; }

/* ---- Aufgabenzeilen ---- */
.aufgaben-liste { display:flex; flex-direction:column; gap:6px; }
.aufgabe-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:10px 12px; border:1px solid #e3e8ee; border-radius:7px; background:#fff; cursor:pointer;
  text-align:left; font:inherit; flex-wrap:wrap; max-width:100%; }
.aufgabe-zeile:hover { border-color:#b9c8da; background:#f8fafc; }
.aufgabe-zeile.ueberfaellig { border-left:4px solid #c0392b; }
.az-haupt { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 240px; }
.az-titel { font-weight:600; overflow-wrap:anywhere; }
.az-meta { font-size:.82rem; color:#7a828c; overflow-wrap:anywhere; }
.az-rechts { display:flex; align-items:center; gap:10px; flex-shrink:0; }
/* Das Dreieck steht für "hohe Priorität" und ist das einzige Zeichen in der Zeile,
   das eine Warnung ausdrückt -- bei .8rem war es kleiner als die Frist daneben und
   ging als Punkt unter. Es darf ruhig größer sein als der Text, den es begleitet. */
.az-prio { font-size:1.05rem; line-height:1; }
.az-frist { font-size:.88rem; color:#5b6470; white-space:nowrap; }
.az-frist.warn { color:#c0392b; font-weight:600; }
.az-status { display:inline-block; padding:3px 9px; border-radius:11px; color:#fff; font-size:.76rem;
  font-weight:600; white-space:nowrap; }

/* Der Erinnern-Knopf in der Zeile. Er ist ein <span> und kein <button>: die ganze
   Zeile ist bereits ein Button, und ein Button darin würde vom HTML-Parser
   herausgeworfen. Optik und Trefferfläche muss er deshalb selbst mitbringen. */
.az-erinnern { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:11px;
  border:1px solid #cfd8e3; background:#fff; color:#2c6fbb; font-size:.76rem; font-weight:600;
  white-space:nowrap; cursor:pointer; }
.az-erinnern:hover { background:#eaf1f9; border-color:#2c6fbb; }
.az-erinnern:focus-visible { outline:2px solid #2c6fbb; outline-offset:2px; }

.nav-badge { display:inline-block; min-width:18px; padding:1px 6px; border-radius:9px; background:#2c6fbb;
  color:#fff; font-size:.72rem; font-weight:700; margin-left:4px; }
.nav-badge.warn { background:#c0392b; }

/* ---- Ressorts ---- */
.ressort-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.ressort-card { border:1px solid #dde3ea; border-radius:8px; padding:14px; background:#fff; max-width:100%; }
.ressort-card h3 { margin:0 0 6px; font-size:1.05rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ressort-zahl { font-size:.75rem; font-weight:600; background:#eaf1f9; color:#2c6fbb; padding:2px 8px; border-radius:10px; }
.ressort-rollen { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:10px 0 0; font-size:.9rem; }
.ressort-rollen dt { color:#7a828c; }
.ressort-rollen dd { margin:0; overflow-wrap:anywhere; }

.ressort-admin-list { display:flex; flex-direction:column; gap:6px; }
.admin-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px;
  border:1px solid #e3e8ee; border-radius:7px; flex-wrap:wrap; }

/* ---- Protokoll und Verlauf ---- */
.protokoll-list, .verlauf-liste { display:flex; flex-direction:column; gap:4px; }
.protokoll-row, .verlauf-row { display:flex; gap:10px; padding:7px 10px; border-bottom:1px solid #eef1f4;
  font-size:.86rem; flex-wrap:wrap; }
.pr-zeit, .v-zeit { color:#7a828c; white-space:nowrap; flex-shrink:0; }
.pr-text, .v-text { flex:1 1 200px; overflow-wrap:anywhere; }
.pr-wer, .v-wer { color:#7a828c; flex-shrink:0; }

/* ---- Detailfenster ---- */
.modal-wide { max-width:780px; }
.detail-kopf { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px 16px;
  padding-bottom:14px; border-bottom:1px solid #eef1f4; }
.detail-kopf label { display:block; font-size:.78rem; color:#7a828c; margin-bottom:2px; }
.detail-kopf span { overflow-wrap:anywhere; }
.detail-kopf .warn { color:#c0392b; font-weight:600; }
.detail-block { padding:14px 0; border-bottom:1px solid #eef1f4; }
.detail-block:last-child { border-bottom:0; }
.detail-block h4 { margin:0 0 8px; font-size:.95rem; color:#3c4652; }
.detail-text { margin:0; overflow-wrap:anywhere; }
.hinweis { padding:12px; background:#f6f8fa; border-radius:7px; }

.anhang-liste { display:flex; flex-direction:column; gap:5px; }
.anhang-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.anhang-name { background:none; border:0; padding:0; color:#2c6fbb; cursor:pointer; font:inherit;
  text-decoration:underline; overflow-wrap:anywhere; text-align:left; }
.anhang-upload { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.anhang-upload input[type="file"] { max-width:100%; }

.kommentar-liste { display:flex; flex-direction:column; gap:8px; }
.kommentar { display:flex; flex-direction:column; gap:2px; padding:8px 10px; background:#f6f8fa; border-radius:7px; }
.k-kopf { font-size:.78rem; color:#7a828c; }
.k-text { overflow-wrap:anywhere; }
.kommentar-neu { display:flex; gap:8px; margin-top:10px; align-items:flex-start; flex-wrap:wrap; }
.kommentar-neu textarea { flex:1 1 100%; resize:vertical; min-height:58px; }

.radio-row { display:flex; flex-direction:column; gap:6px; }
/* Die Schalterzeile trägt zwei lange Beschriftungen nebeneinander -- ohne Umbruch
   wird sie am Handy breiter als das Fenster, ohne flex-start hängen unterschiedlich
   hohe Beschriftungen mittig zueinander statt oben bündig. */
.checkbox-row { align-items: flex-start; flex-wrap: wrap; gap: 10px 18px; }
.checkbox-row > label { flex: 1 1 240px; }

/* Auswahl-Beschriftungen sind Bedienelemente, keine Feldnamen. `.form-field label`
   (12 px, grau, fett, display:block) ist für die Überschrift ÜBER einem Feld
   gedacht und macht aus einem Auswahltext eine blasse Mini-Zeile -- und weil
   `display:block` das Kästchen auf eine eigene Zeile stellt, stand es über statt
   neben dem Text. Hier also zurückdrehen. */
.radio-row label,
.checkbox-row label,
.checkbox-list label {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; font-weight: 400; color: var(--text);
  margin-bottom: 0; cursor: pointer;
}
/* Das Kästchen darf nicht schrumpfen und sitzt auf Höhe der ersten Textzeile. */
.radio-row label > input,
.checkbox-row label > input,
.checkbox-list label > input { flex-shrink: 0; margin-top: 2px; }

.btn.tiny { padding:3px 9px; font-size:.76rem; }
.header-status.error { color:#c0392b; font-weight:600; }

.changelog-version { margin-bottom:18px; }
.changelog-version h3 { margin:0 0 6px; font-size:1rem; }
.changelog-version h4 { margin:10px 0 4px; font-size:.9rem; color:#3c4652; }
.changelog-version ul { margin:0; padding-left:20px; }
.changelog-version li { margin-bottom:4px; }

/* Am Handy wird aus jeder Zeile ein Block. Das date-Feld hat eine intrinsische
   Mindestbreite, die sich nicht kürzen lässt — ohne den Umbruch schiebt es die
   ganze Seite seitlich hinaus (in der Tools-Übersicht live so aufgeschlagen). */
@media (max-width: 640px) {
  .filter-bar { flex-wrap:wrap; }
  .filter-bar input, .filter-bar select { flex:1 1 100%; min-width:0; }
  .aufgabe-zeile { align-items:flex-start; }
  .az-rechts { width:100%; justify-content:space-between; }
  .person-head { align-items:flex-start; }
  .person-zahlen { width:100%; justify-content:flex-start; }
  .ressort-list { grid-template-columns:1fr; }
  .detail-kopf { grid-template-columns:1fr 1fr; }
  .admin-row { align-items:flex-start; }
  input, select, textarea { font-size:16px; }
}

/* ================= Klubzertifizierung ================= */

/* ---- Fortschritt: zwei Balken plus die Aufgabenlage ----
   Liegen im bestehenden .summary-cards-Grid (auto-fit, minmax(180px,1fr)), damit
   sie sich am Handy von selbst untereinander legen. */
.zf-block { background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px 14px; max-width:100%; }
.zf-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.zf-label { font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.zf-zahl { font-size:1.15rem; font-weight:800; color:var(--text); white-space:nowrap; }
.zf-balken { height:8px; border-radius:4px; background:#eef1f4; overflow:hidden; margin:8px 0 6px; }
/* Die Breite setzt JS je Stand; Farbe und Übergang gehören hierher. Bewusst
   KEINE Kurzform mit var() -- eine unauflösbare var() macht die ganze
   Kurzform ungültig und der Balken verlöre seine Grundform. */
.zf-balken > span { display:block; height:100%; background:var(--blue); border-radius:4px; transition:width .25s ease; }
.zf-sub { font-size:.78rem; color:var(--muted); overflow-wrap:anywhere; }
.zf-sub .warn { color:var(--red); font-weight:600; }

/* ---- Bedienleiste des Tabs ----
   ⚠️ align-items:center und flex-wrap sind Pflicht: unter 820 px zwingt die
   Flottenregel `select{font-size:16px}` das Auswahlfeld auf ~38 px Höhe, und in
   einer Flex-Leiste zieht das höchste Element alle anderen mit. */
.zert-leiste { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.zert-arten { display:flex; gap:6px; flex-wrap:wrap; }
.zert-art-btn {
  padding:7px 14px; border:1px solid var(--border); border-radius:999px; background:#fff;
  cursor:pointer; font:inherit; font-size:14px; color:var(--text); display:flex; align-items:center; gap:7px;
}
.zert-art-btn:hover { background:var(--blue-light); }
.zert-art-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.zab-zahl { font-size:.76rem; font-weight:700; opacity:.85; }
/* Zwei Beschriftungen je Knopf, immer genau eine sichtbar. Die Kurzform greift
   erst unter 560 px -- am Tablet ist Platz für das ganze Wort. */
.za-kurz { display:none; }
/* Eigene Regel statt .form-field: dort gilt `input{width:100%}` und `label{display:block}`,
   das machte aus dem Kästchen einen Balken auf eigener Zeile. */
.zert-schalter { display:flex; align-items:center; gap:7px; font-size:14px; cursor:pointer; white-space:nowrap; }
.zert-schalter input { width:16px; height:16px; flex-shrink:0; }
.zert-leiste select { padding:7px 9px; border:1px solid var(--border); border-radius:7px; font:inherit; font-size:14px; max-width:100%; }

/* ---- Die drei Bereiche ---- */
.zert-bereich { border:1px solid var(--border); border-radius:8px; background:#fff; margin-bottom:10px; max-width:100%; }
.zert-bereich > summary {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:11px 14px; cursor:pointer; font-weight:600; list-style:revert;
}
.zert-bereich > summary:hover { background:#f4f7fb; }
.zb-name { min-width:0; overflow-wrap:anywhere; }
.zb-zahl { font-size:.78rem; font-weight:600; background:#eaf1f9; color:#2c6fbb; padding:2px 9px; border-radius:10px; white-space:nowrap; }
.zert-liste { display:flex; flex-direction:column; gap:5px; padding:0 10px 12px; }

/* ---- Eine Kriteriumszeile ---- */
.zert-zeile {
  display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px;
  border:1px solid #e3e8ee; border-radius:7px; background:#fff; cursor:pointer;
  text-align:left; font:inherit; flex-wrap:wrap; max-width:100%;
}
.zert-zeile:hover { border-color:#b9c8da; background:#f8fafc; }
.zert-zeile.ueberfaellig { border-left:4px solid var(--red); }
.zz-nr { font-size:.78rem; font-weight:700; color:var(--muted); background:var(--gray);
  border-radius:5px; padding:2px 7px; flex-shrink:0; }
/* min-width:0 ist Pflicht, sonst sprengt ein langer Wortlaut die Zeile. */
.zz-haupt { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 220px; }
.zz-name { font-weight:600; overflow-wrap:anywhere; }
.zz-meta { font-size:.8rem; color:var(--muted); overflow-wrap:anywhere; }
.zz-rechts { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.zz-status { display:inline-block; padding:3px 9px; border-radius:11px; color:#fff;
  font-size:.76rem; font-weight:600; white-space:nowrap; }
.zz-arbeit { font-size:.72rem; font-weight:700; color:#8a5b00; background:var(--gold-light);
  border-radius:10px; padding:2px 8px; white-space:nowrap; }

/* ---- Kriterium im Detail ---- */
.zert-wortlaut { background:#f6f8fa; border-radius:7px; padding:11px 13px; }
.zert-status-row { justify-content:flex-start; }
.zert-status-row .btn[disabled] { opacity:1; cursor:default; }

.zert-aufgaben { display:flex; flex-direction:column; gap:6px; }
.zert-aufgabe-row {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; border:1px solid #e8ecf1; border-radius:7px; background:#fff;
}
.zert-aufgabe-row.ueberfaellig { border-left:3px solid var(--red); }
.zert-aufgabe-row.erledigt { background:#f7faf8; }
.zert-aufgabe-row.erledigt .za-titel { text-decoration:line-through; color:var(--muted); }
/* Das Kästchen bleibt bei fehlendem Recht bedienbar und wird nur ausgegraut -- ein
   `disabled` schluckt den Klick kommentarlos, der Handler sagt stattdessen, warum. */
.za-haken { display:flex; align-items:flex-start; gap:9px; flex:1 1 220px; min-width:0;
  cursor:pointer; font-size:14px; }
.za-haken.gesperrt { opacity:.6; }
.za-haken input { width:16px; height:16px; flex-shrink:0; margin-top:2px; }
.za-titel { overflow-wrap:anywhere; }
.za-meta { font-size:.78rem; color:var(--muted); overflow-wrap:anywhere; }
.za-meta .warn { color:var(--red); font-weight:600; }

/* ---- Bericht ---- */
.zp-zusatz { font-size:.75rem; color:#444; }

/* ⚠️ Am Handy gemessen und danach gezielt gekürzt: die Leiste kostete zuerst
   181 px über der Liste (jeder Umschalter eine eigene Zeile, Häkchen und
   Auswahlfeld je eine weitere), eine Kriteriumszeile mit Wortlaut-Auszug 158 px.
   Die drei Regeln unten bringen das auf 111 bzw. 124 px, ohne eine Angabe
   wegzunehmen. */
@media (max-width: 560px) {
  .za-lang { display:none; }
  .za-kurz { display:inline; }
  /* Die zwei Umschalter teilen sich EINE Zeile. min-width:0 ist Pflicht, sonst
     erzwingt der Text die Wunschbreite und der zweite Knopf bricht doch um. */
  .zert-arten { flex:1 1 100%; }
  .zert-art-btn { flex:1 1 0; min-width:0; justify-content:center; }
  /* Häkchen und Auswahlfeld teilen sich die nächste Zeile. Die 130 px sind die
     Reißleine: wird es enger, bricht das Feld doch um statt zu schrumpfen.
     ⚠️ Wer das Häkchen je entfernt, holt hier `flex: 1 1 100%` zurück. */
  .zert-leiste select { flex:1 1 130px; min-width:0; }
  /* Der Wortlaut-Auszug bleibt lesbar, deckelt die Zeile aber auf zwei Zeilen --
     ohne das war die Meta-Zeile allein 51 px hoch. */
  .zz-meta { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* ⚠️ Die 220 px der Grundregel liegen bei 375 px EXAKT auf der Umbruchgrenze
     (259 px verfügbar, Nummer 28 + Abstand 11 + 220 = 259) -- gemessen stand die
     Nummer dadurch allein in einer eigenen Zeile und die Kriteriumszeile war
     125 statt 93 px hoch, bei 29 Kriterien also fast 1000 px umsonst. */
  .zz-haupt { flex:1 1 140px; }
}

@media (max-width: 640px) {
  .zert-zeile { align-items:flex-start; }
  .zz-rechts { width:100%; justify-content:flex-start; }
  .zert-aufgabe-row { align-items:flex-start; }
}

/* Karte "Funktionen" im Info-Reiter -- gleiche Bausteine wie der Changelog,
   nur ohne Versionsmarke, darum etwas mehr Luft zwischen den Themen. */
#funktionen-list { display: flex; flex-direction: column; gap: 18px; font-size: 13px; }

/* ---- Wiederkehrende Aufgaben (Serien) ---- */
/* Die Serienzeile ist dieselbe .aufgabe-zeile wie eine Aufgabe -- eine zweite
   Zeilen-Optik wäre eine zweite Stelle, die am Handy nachgemessen werden müsste.
   Unterschieden wird sie nur durch den linken Rand und, wenn sie ruht, durch
   gedämpfte Schrift. */
.serie-zeile { border-left:4px solid #2c6fbb; }
.serie-ruht { border-left-color:#c8ced6; background:#fbfcfd; }
.serie-ruht .az-titel { color:#7a828c; }

/* Der Kalender-Teil des Dialogs: die nächsten Termine aus der gerade
   eingestellten Taktung. Umbricht selbst, statt den Dialog breit zu ziehen. */
.serien-vorschau { display:flex; flex-wrap:wrap; gap:8px; }
.serien-termin { display:flex; flex-direction:column; gap:1px; padding:6px 10px;
  border:1px solid #e3e8ee; border-radius:7px; background:#f8fafc; min-width:104px; }
.serien-termin .muted { font-size:.76rem; }

/* Zahl und Einheit des eigenen Takts stehen nebeneinander in EINEM Feld. */
.inline-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-row select { flex:1 1 120px; min-width:0; }

/* Der aufklappbare Kasten über der Aufgabenliste. */
#serien-box > summary { cursor:pointer; padding:2px 0; }
#serien-box[open] > summary { margin-bottom:4px; }