/* ==========================================================
   Karate Trainerplan V2
   Schlicht und funktional. Grosse Tippflaechen, klare Kontraste.
   ========================================================== */

:root {
  --dunkelblau: #0d3b66;
  --dunkelblau-hell: #1a5490;
  --gruen: #2e7d32;
  --gruen-hell: #e8f5e9;
  --gelb: #b27600;
  --gelb-hell: #fff8e1;
  --rot: #c62828;
  --rot-hell: #ffebee;
  --grau-text: #5a6069;
  --grau-linie: #dfe3e8;
  --grau-flaeche: #f4f6f8;
  --weiss: #ffffff;

  --rundung: 6px;
  --schatten: 0 1px 3px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1c1f23;
  background: var(--grau-flaeche);
}

/* ---------- Kopfleiste ---------- */
.kopfleiste {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--dunkelblau);
  color: var(--weiss);
  padding: 10px 20px;
  flex-wrap: wrap;
}
.kopfleiste .marke {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--weiss);
  text-decoration: none;
  font-weight: 600;
  font-size: 17px;
  white-space: nowrap;
  /* Ohne dies schrumpft die Marke unter ihre Textbreite. Weil der Text
     nicht umbrechen darf, laeuft er dann aus seinem Kasten heraus und
     schiebt sich ueber die Navigation. Genau das war der Fehler. */
  flex-shrink: 0;
}
.markenzeichen { height: 34px; width: auto; display: block; }
.markentext { display: block; }

/* Die Navigation darf schrumpfen und notfalls scrollen - sie ist das
   einzige Element, das nachgeben soll. */
.hauptnav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
  flex-shrink: 1;
}
.hauptnav a {
  color: rgba(255,255,255,.88);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: var(--rundung);
  font-size: 15px;
}
.hauptnav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.hauptnav a.aktiv { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }

.benutzer {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.benutzer a { color: rgba(255,255,255,.9); font-size: 14px; text-decoration: none; }
.benutzer a:hover { text-decoration: underline; }
.benutzer form { margin: 0; }

/* ---------- Inhaltsflaeche ---------- */
.inhalt {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 20px;
}
h1 { font-size: 24px; margin: 0 0 18px 0; }
h2 { font-size: 18px; margin: 0 0 12px 0; color: var(--dunkelblau); }
h3 { font-size: 15px; margin: 0 0 8px 0; }

/* ---------- Karten ---------- */
.karte {
  background: var(--weiss);
  border: 1px solid var(--grau-linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.karte.schmal { max-width: 480px; }
.karte.betont { border-left: 4px solid var(--dunkelblau); }

/* ---------- Meldungen ---------- */
.meldung {
  padding: 11px 14px;
  border-radius: var(--rundung);
  margin-bottom: 14px;
  font-size: 15px;
  border-left: 4px solid;
}
.meldung.fehler  { background: var(--rot-hell);   color: var(--rot);   border-color: var(--rot); }
.meldung.erfolg  { background: var(--gruen-hell); color: var(--gruen); border-color: var(--gruen); }
.meldung.hinweis { background: var(--gelb-hell);  color: var(--gelb);  border-color: #f9a825; }

/* ---------- Formulare ---------- */
label { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 500; }
label small { display: block; font-weight: 400; color: var(--grau-text); font-size: 13px; margin-top: 3px; }

input[type=text], input[type=password], input[type=number],
input[type=date], input[type=email], select, textarea {
  width: 100%;
  padding: 10px 12px;
  margin-top: 5px;
  border: 1px solid #c3cad3;
  border-radius: var(--rundung);
  font-size: 16px;              /* 16px verhindert Zoom beim Tippen auf dem Handy */
  font-family: inherit;
  background: var(--weiss);
  color: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--dunkelblau-hell);
  outline-offset: 1px;
  border-color: var(--dunkelblau-hell);
}
input[type=color] { width: 56px; height: 38px; padding: 3px; }
textarea { min-height: 80px; resize: vertical; }

/* ---------- Knoepfe ---------- */
button, .knopf {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--dunkelblau);
  border-radius: var(--rundung);
  background: var(--dunkelblau);
  color: var(--weiss);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  min-height: 42px;
}
button:hover, .knopf:hover { background: var(--dunkelblau-hell); border-color: var(--dunkelblau-hell); }
button:disabled, .knopf.gesperrt {
  background: #b6bcc4; border-color: #b6bcc4; cursor: not-allowed; opacity: .8;
}
button.zurueckhaltend, .knopf.zurueckhaltend {
  background: var(--weiss); color: var(--dunkelblau);
}
button.zurueckhaltend:hover, .knopf.zurueckhaltend:hover { background: #eef2f7; }
button.warnend, .knopf.warnend { background: var(--rot); border-color: var(--rot); }
button.bestaetigend, .knopf.bestaetigend { background: var(--gruen); border-color: var(--gruen); }
button.klein, .knopf.klein { padding: 5px 11px; font-size: 13px; min-height: 0; }
button.breit, .knopf.breit { width: 100%; }

/* Aktionen je Planzeile - nebeneinander statt untereinander */
.planaktionen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.planaktionen form { margin: 0; }

.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.knopfreihe .abstandhalter { flex: 1; }

/* ---------- Tabellen ---------- */
.tabellenrahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 9px 11px; border-bottom: 1px solid var(--grau-linie); text-align: left; }
th { background: #eef1f5; font-weight: 600; font-size: 14px; }
tr:last-child td { border-bottom: none; }
td.mitte, th.mitte { text-align: center; }
table.gedraengt th, table.gedraengt td { padding: 5px 8px; font-size: 14px; }

/* ---------- Kennzeichen ---------- */
.kennzeichen {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.kennzeichen.gruen { background: var(--gruen-hell); color: var(--gruen); }
.kennzeichen.gelb  { background: var(--gelb-hell);  color: var(--gelb); }
.kennzeichen.rot   { background: var(--rot-hell);   color: var(--rot); }
.kennzeichen.grau  { background: #eceff1; color: #4a5057; }

/* Unbestaetigte Zusage: gelbes Warndreieck.
   Vorher stand hier das Zeichen "!" im Dreieck als Schriftzeichen. Jedes
   System zeichnet das anders, meist einfarbig und so klein, dass das
   Ausrufezeichen verschwand. Jetzt ein eigenes Bild, direkt eingebettet -
   damit sieht es ueberall gleich aus und braucht keine zweite Anfrage. */
.unbestaetigt {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: -2px;
  /* In Flex-Kaesten wuerde es sonst schmaler gequetscht */
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.6%201.2%2021.4h21.6L12%202.6z%22%20fill%3D%22%23f5b301%22%20stroke%3D%22%238a6100%22%20stroke-width%3D%221.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Crect%20x%3D%2210.8%22%20y%3D%228.4%22%20width%3D%222.4%22%20height%3D%227.2%22%20rx%3D%221.2%22%20fill%3D%22%233a2b00%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2218%22%20r%3D%221.45%22%20fill%3D%22%233a2b00%22%2F%3E%3C%2Fsvg%3E") no-repeat center;
  background-size: contain;
}
.unbestaetigt.gross { width: 20px; height: 20px; vertical-align: -4px; }

/* ---------- Anmeldeseite ---------- */
body.nur-formular { background: var(--grau-flaeche); }
.anmeldeflaeche {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.anmeldekasten {
  width: 100%;
  max-width: 400px;
  background: var(--weiss);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.09);
  padding: 32px 28px;
}
.anmeldekasten h1 { text-align: center; color: var(--dunkelblau); font-size: 22px; margin-bottom: 4px; }
.anmeldekasten .untertitel {
  text-align: center; color: var(--grau-text); font-size: 14px; margin: 0 0 22px 0;
}
.hinweiszeile {
  text-align: center; font-size: 13px; color: var(--grau-text); margin: 18px 0 0 0;
}

/* ---------- Handy ---------- */
/* Reicht die Breite nicht fuer eine Zeile, bekommt die Navigation eine
   eigene und laesst sich seitlich schieben. Ohne das waechst die Kopfleiste
   auf drei oder vier Zeilen an, weil die Punkte einzeln umbrechen. */
@media (max-width: 1080px) {
  .hauptnav {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .hauptnav a { white-space: nowrap; }
}

@media (max-width: 700px) {
  .kopfleiste { padding: 10px 14px; gap: 12px; }
  .kopfleiste .marke { font-size: 16px; gap: 8px; }
  .markenzeichen { height: 30px; width: auto; }
  .hauptnav a { font-size: 14px; padding: 6px 10px; }
  .benutzer { margin-left: auto; }
  .inhalt { margin: 16px auto; padding: 0 14px; }
  h1 { font-size: 20px; }
  .karte { padding: 14px; }
}

/* Formular als Raster.
   Anders als `.reihe` richtet es die Felder oben aus. Ein Feld mit einem
   Hinweis darunter zieht die Zeile dann nicht mehr schief - genau das war
   beim Anlegen eines Trainers passiert. Der Knopf steht in einer eigenen
   Zeile und muss nicht kuenstlich auf Feldhoehe geschoben werden. */
.feldraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 4px 18px;
  align-items: start;
}
.feldraster label { margin-bottom: 10px; }
.feldraster label.eng { max-width: 200px; }
.feldraster small { min-height: 1.2em; }

/* Ein Ankreuzfeld, das zu dem Eingabefeld darueber gehoert - steht in
   derselben Spalte statt als eigene daneben. */
.unterfeld {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; min-height: 1.2em;
}
.unterfeld input { width: 17px; height: 17px; margin: 0; flex: none; }
.unterfeld label {
  margin: 0; font-size: 13px; font-weight: 400; color: var(--grau-text);
  cursor: pointer;
}
.feldraster .rasterfuss {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--grau-linie);
}
.feldraster .rasterfuss .fussnote { margin: 0; flex: 1; min-width: 220px; }

/* ---------- Formularreihen ---------- */
.reihe { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.reihe label { margin-bottom: 0; }
.reihe .waechst { flex: 1; min-width: 160px; }
.reihe-eng { display: inline-flex; gap: 6px; margin: 0; }

.ankreuzfeld { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.ankreuzfeld input[type=checkbox] { width: 18px; height: 18px; margin: 0; }

.fussnote { font-size: 14px; color: var(--grau-text); margin: 8px 0 0 0; }
.warnzeile { color: var(--rot); font-size: 14px; margin: 6px 0 0 0; font-weight: 500; }
.einfarbig { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 14px; }
.ausgegraut { opacity: .62; }

/* ---------- Gruppenmarken ---------- */
.gruppenmarke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  margin: 1px 2px 1px 0;
  border: 1px solid rgba(0,0,0,.14);
  white-space: nowrap;
}

/* ---------- Berechtigungen ---------- */
.berechtigungsliste { display: flex; flex-direction: column; gap: 8px; }
.berechtigung {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--grau-linie);
  border-radius: var(--rundung);
  background: #fafbfc;
}
.berechtigung.erteilt { background: var(--gruen-hell); border-color: #a5d6a7; }
.berechtigung .umschalter {
  width: 34px; height: 34px; min-height: 34px; padding: 0;
  font-size: 17px; font-weight: 700;
  background: var(--weiss); color: var(--gruen);
  border: 2px solid #c3cad3;
}
.berechtigung.erteilt .umschalter { border-color: var(--gruen); background: var(--weiss); }
.berechtigung .beschriftung { flex: 1; padding-left: 10px; }
.berechtigung .beschriftung small { display: block; color: var(--grau-text); font-size: 13px; }
.berechtigung .rollenwahl { margin: 0; min-width: 160px; }
.berechtigung .rollenwahl select { margin-top: 0; }

/* ---------- Teams ---------- */
.teamkasten { padding: 12px 14px; border-radius: var(--rundung); margin-bottom: 12px; }
.teamkasten h3 { margin-bottom: 6px; }
.teamliste { margin: 0; padding-left: 18px; }
.teamliste li { margin: 3px 0; }

/* ---------- Zugangsdaten ---------- */
.zugangsdaten {
  background: var(--grau-flaeche);
  border: 1px solid var(--grau-linie);
  border-radius: var(--rundung);
  padding: 14px;
  margin: 14px 0;
}
.zugangsdaten .zeile { display: flex; gap: 12px; padding: 6px 0; align-items: baseline; }
.zugangsdaten .was { width: 120px; color: var(--grau-text); font-size: 14px; flex-shrink: 0; }
.zugangsdaten .wert { font-family: ui-monospace, Consolas, monospace; }
.zugangsdaten .wert.gross { font-size: 19px; font-weight: 700; color: var(--dunkelblau); }

/* ---------- Aufklappbares ---------- */
.aufklappbar { margin-top: 14px; }
.aufklappbar summary {
  cursor: pointer; color: var(--dunkelblau); font-weight: 500;
  font-size: 14px; padding: 6px 0;
}
.aufklappbar[open] summary { margin-bottom: 10px; }

/* Formulare in Tabellenzeilen */
table form { display: contents; }

/* ---------- Kopfzeile mit Nebeninhalt ---------- */
.kopfzeile {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.kopfzeile h1 { margin: 0; }
.jahreswahl, .monatsblaettern { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.aktueller-monat { background: #eef4fa; }
.aktueller-monat td { font-weight: 600; }

.grau { color: var(--grau-text); font-size: 13px; }
td small.grau { display: block; }

/* Punkt fuer ungeprueft */
.punkt-offen {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #f9a825; margin-left: 5px; vertical-align: middle;
}

.terminbemerkung {
  font-size: 13px; color: var(--grau-text); margin-top: 3px; font-style: italic;
}

/* ---------- Bemerkungen ---------- */
.bemerkungsliste { display: flex; flex-direction: column; gap: 6px; }
.bemerkung {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--rundung);
  background: var(--grau-flaeche); border-left: 4px solid var(--grau-linie);
}
.bemerkung.hervorgehoben {
  background: var(--rot-hell); border-left-color: var(--rot);
  color: var(--rot); font-weight: 600;
}
.bemerkung .text { flex: 1; font-size: 15px; }
.bemerkung form { margin: 0; }

/* ---------- Statuswahl ---------- */
.statuswahl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.statusfeld {
  display: flex; align-items: center; gap: 7px; margin: 0;
  padding: 9px 14px; border: 2px solid var(--grau-linie); border-radius: var(--rundung);
  cursor: pointer; background: var(--weiss); font-weight: 500; font-size: 14px;
}
.statusfeld input { width: 16px; height: 16px; margin: 0; }
.statusfeld.gewaehlt { border-color: var(--dunkelblau); background: #eef4fa; }
.statusfeld:hover { border-color: #a8b4c2; }

.feldgruppe { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.feldgruppe label { margin-bottom: 14px; }
.feldgruppe .waechst { flex: 1; min-width: 180px; }

@media (max-width: 700px) {
  .kopfzeile { flex-direction: column; align-items: stretch; }
  .jahreswahl, .monatsblaettern { margin-left: 0; }
}

/* ==========================================================
   Trainerbereich - fuer das Handy gebaut
   ========================================================== */

.handlungsbedarf { border-left: 5px solid var(--rot); }
.fristzeile { font-size: 15px; margin: 8px 0 14px 0; }

.meintermin {
  border-left: 5px solid var(--grau-linie);
  padding: 9px 0 9px 12px;
  margin-bottom: 10px;
}
.meintermin:last-of-type { margin-bottom: 0; }

/* Zeigt dem Trainer, ob er fertig ist. Ohne diese Zeile muesste er raten. */
.abgabezeile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 14px;
  border-radius: var(--rundung); font-size: 15px; font-weight: 600;
  background: var(--gelb-hell); color: var(--gelb);
  border-left: 4px solid #f9a825;
}
.abgabezeile.erledigt {
  background: var(--gruen-hell); color: var(--gruen); border-left-color: var(--gruen);
}
.abgabezeile .zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--gruen); color: var(--weiss); font-size: 15px;
}
.abgabezeile .zeichen.offen { background: #f9a825; }

/* Wer hat was gemeldet - Trainer in den Zeilen, Trainingstage in den Spalten */
.meldematrix { border-collapse: collapse; font-size: 14px; width: auto; }
.meldematrix th, .meldematrix td {
  border: 1px solid var(--grau-linie); padding: 3px 5px;
}
.meldematrix .namensspalte {
  position: sticky; left: 0; z-index: 2;
  background: var(--weiss); white-space: nowrap; text-align: left;
  box-shadow: 1px 0 0 var(--grau-linie);
  min-width: 130px;
}
.meldematrix thead th {
  font-size: 12px; font-weight: 600; line-height: 1.2;
  background: #eef1f5; text-align: center;
}
.meldematrix thead th.namensspalte { background: #eef1f5; text-align: left; }
.meldematrix tbody tr:hover td { outline: 1px solid var(--dunkelblau-hell); }

.meldezelle { min-width: 38px; font-size: 16px; line-height: 1.4; text-align: center; }
.meldezelle.ist-kann { background: #e6f4ea; color: #1b6b2b; }
.meldezelle.ist-kann-nicht { background: #fdecea; color: var(--rot); }
.meldezelle.ist-wunsch { background: #fff3cd; color: #8a6100; }
.meldezelle.ist-leer { background: #f6f7f9; color: #9aa1a9; }
.vom-verwalter { color: var(--dunkelblau); font-weight: 700; font-size: 13px; }
.warnzahl { color: var(--rot); font-weight: 600; }

/* Umschaltung zwischen Ansehen und Bearbeiten.
   Bewusst ueber eine Klasse an der Tabelle statt ueber das hidden-Attribut:
   Eine CSS-Regel mit `display` sticht `hidden` aus - genau daran ist die
   erste Fassung gescheitert, die Auswahlfelder waren immer sichtbar. */
/* Bewusst mit .meldezelle im Selektor: Sonst gewinnt `.meldezelle
   .zellenform` weiter unten, weil es gleich spezifisch ist und spaeter
   steht - genau daran ist der zweite Anlauf gescheitert. */
.meldematrix .meldezelle .nur-bearbeiten { display: none; }
.meldematrix.bearbeitbar .meldezelle .nur-lesen { display: none; }
.meldematrix.bearbeitbar .meldezelle .nur-bearbeiten { display: flex; }
.meldematrix.bearbeitbar { font-size: 13px; }
.meldematrix.bearbeitbar .meldezelle { padding: 2px; min-width: 96px; }
.meldezelle .zellenform { margin: 0; }
.meldezelle select {
  width: 100%; min-width: 92px; font-size: 13px; padding: 3px 4px;
  margin: 0; border-radius: 4px;
}

/* Solange nicht freigeschaltet ist, soll das auch zu sehen sein */
.freischaltzeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--grau-linie); border-radius: var(--rundung);
  background: var(--grau-flaeche);
}
.freischaltzeile.offen { background: #eef4fa; border-color: var(--dunkelblau-hell); }
.freischaltzeile .zustand { font-size: 14px; color: var(--grau-text); }
.freischaltzeile.offen .zustand { color: var(--dunkelblau); font-weight: 600; }

/* Kleines Farbfeld in der Legende der Meldeuebersicht.
   Bewusst nicht ".marke" - so heisst die Marke in der Kopfleiste. */
.legendenmarke {
  display: inline-block; width: 20px; text-align: center;
  border: 1px solid var(--grau-linie); border-radius: 3px;
}
.legendenmarke.ist-kann { background: #e8f5e9; }
.legendenmarke.ist-kann-nicht { background: #fdecea; }
.legendenmarke.ist-wunsch { background: #fff4d6; }
.legendenmarke.ist-leer { background: #f6f7f9; }

/* Schalter, der die Bearbeitung freigibt */
.schalter { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.schalter input { width: 18px; height: 18px; }

/* Ueberschrift, sobald die Terminliste in einen neuen Monat laeuft */
.monatstrenner {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grau-text);
  margin: 14px 0 6px 0;
}
.monatstrenner:first-child { margin-top: 0; }
.meintermin .wann { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.meintermin .was { margin-top: 4px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.meintermin-gross {
  border-left: 6px solid var(--grau-linie);
  padding: 14px 16px;
}
.meintermin-gross .datumzeile {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 17px;
}
.meintermin-gross .zeitzeile { color: var(--grau-text); margin: 3px 0 9px 0; }

.gruppenmarke.gross { font-size: 14px; padding: 4px 11px; }

/* ---------- Monatskopf und Frist ---------- */
.monatskopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.monatskopf h1 { margin: 0; }
.fristmarke {
  margin-left: auto; padding: 5px 12px; border-radius: 999px;
  background: var(--gelb-hell); color: var(--gelb); font-size: 14px; font-weight: 600;
}
.fristmarke.abgelaufen { background: var(--rot-hell); color: var(--rot); }

/* ---------- Schnellwahl ---------- */
.schnellwahl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.schnellwahl form { margin: 0; }

/* ---------- Verfuegbarkeit eintragen ---------- */
.spaltenkopf {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 6px 0; border-bottom: 1px solid var(--grau-linie); margin-bottom: 4px;
}
.spaltenkopf .platzhalter { flex: 1; }
.spaltenkopf .knopfbeschriftung {
  width: 52px; text-align: center; font-size: 12px; color: var(--grau-text);
}

.tagzeile {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid #eef1f5;
}
.tagzeile .tagangabe { flex: 1; min-width: 0; }
.tagzeile .tagangabe strong { display: block; font-size: 16px; }
.tagzeile .tagangabe small { color: var(--grau-text); font-size: 12px; }

.wahlknoepfe { display: flex; gap: 6px; }
.wahl {
  width: 52px; height: 52px; min-height: 52px; padding: 0;
  font-size: 21px; line-height: 1;
  border: 2px solid #ccd2d9; border-radius: 10px;
  background: var(--weiss); color: #9aa2ab;
  display: flex; align-items: center; justify-content: center;
}
.wahl:hover:not(:disabled) { border-color: #9aa2ab; background: #fafbfc; }
.wahl:disabled { opacity: .45; cursor: not-allowed; }
.wahl.kann.gewaehlt   { border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen); }
.wahl.wunsch.gewaehlt { border-color: #f9a825;      background: var(--gelb-hell);  color: var(--gelb); }
.wahl.nicht.gewaehlt  { border-color: var(--rot);   background: var(--rot-hell);   color: var(--rot); }

.wunschzeile {
  display: none; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 0 0 6px 0;
  background: var(--gelb-hell); border-radius: var(--rundung);
}
.wunschzeile.sichtbar { display: flex; }
.wunschzeile select { margin-top: 0; flex: 1; }

.speicherhinweis {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--gruen); color: var(--weiss);
  padding: 10px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  box-shadow: 0 3px 12px rgba(0,0,0,.2);
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50;
}
.speicherhinweis.sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Plan blaettern ---------- */
.planblaettern {
  display: flex; align-items: center; gap: 10px;
  background: var(--weiss); border: 1px solid var(--grau-linie);
  border-radius: var(--rundung); padding: 8px 10px; margin-bottom: 12px;
}
.planblaettern .pfeil {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; text-decoration: none; color: var(--dunkelblau);
  border-radius: var(--rundung); background: var(--grau-flaeche);
}
.planblaettern .pfeil.leer { opacity: .25; }
.planblaettern .monatsmitte { flex: 1; text-align: center; }
.planblaettern .monatsmitte strong { display: block; font-size: 17px; }
.planblaettern .monatsmitte small { color: var(--grau-text); font-size: 12px; }

.umschalter { display: flex; gap: 6px; margin-bottom: 14px; }
.umschalter a {
  flex: 1; text-align: center; padding: 10px; border-radius: var(--rundung);
  text-decoration: none; font-size: 14px; font-weight: 500;
  background: var(--weiss); color: var(--dunkelblau); border: 1px solid var(--dunkelblau);
}
.umschalter a.gewaehlt { background: var(--dunkelblau); color: var(--weiss); }

.tageskarte { margin-bottom: 8px; }
.tageskarte.ich-dabei { border-left: 5px solid #f9a825; background: #fffdf6; }
.tageskarte .datumzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.belegung { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
.gruppenmarke.ich { outline: 2px solid var(--dunkelblau); font-weight: 700; }
.gruppenmarke.offen {
  background: var(--rot-hell); color: var(--rot); font-style: italic;
  border-color: var(--rot);
}

.katazeile { display: flex; gap: 14px; align-items: baseline; padding: 5px 0; font-size: 17px; }
.katazeile .was { width: 100px; color: var(--grau-text); font-size: 14px; }

@media (max-width: 700px) {
  .wahl { width: 48px; height: 48px; min-height: 48px; font-size: 19px; }
  .spaltenkopf .knopfbeschriftung { width: 48px; }
}

/* ==========================================================
   Monatsassistent
   ========================================================== */

.planungskopf { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.planungskopf h1 { margin: 0 0 6px 0; }
.planungskopf a { margin-left: auto; flex-shrink: 0; }
.statuszeile { display: flex; gap: 8px; align-items: center; }

.schrittleiste {
  display: flex; gap: 2px; margin-bottom: 20px;
  background: var(--weiss); border: 1px solid var(--grau-linie);
  border-radius: var(--rundung); padding: 6px; overflow-x: auto;
}
.schritt {
  flex: 1; min-width: 92px; text-align: center; padding: 8px 4px;
  text-decoration: none; color: var(--grau-text); border-radius: var(--rundung);
  border-bottom: 3px solid transparent;
}
.schritt .zahl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #dfe3e8; color: var(--weiss);
  font-weight: 700; font-size: 13px; margin-bottom: 4px;
}
.schritt .name { display: block; font-size: 12px; }
.schritt:hover { background: var(--grau-flaeche); }
.schritt.erledigt { color: var(--gruen); border-bottom-color: var(--gruen); }
.schritt.erledigt .zahl { background: var(--gruen); }

/* Wo man gerade steht - blau hinterlegt. Gilt auch fuer einen Schritt, der
   schon erledigt ist: Der gruene Haken bleibt, die Hinterlegung kommt dazu.
   Steht nach `.erledigt`, damit die Auswahl sichtbar gewinnt. */
.schritt.jetzt {
  color: var(--dunkelblau); font-weight: 700; border-bottom-color: var(--dunkelblau);
  background: #eef4fa;
}
.schritt.jetzt .zahl { background: var(--dunkelblau); }

/* Erledigt und zugleich geoeffnet: blaue Flaeche, aber der Haken bleibt gruen,
   damit der Bearbeitungsstand ablesbar bleibt. */
.schritt.erledigt.jetzt { color: var(--gruen); border-bottom-color: var(--dunkelblau); }
.schritt.erledigt.jetzt .zahl { background: var(--gruen); }

.assistentfuss {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--grau-linie);
}
.assistentfuss .abstandhalter { flex: 1; }
.assistentfuss form { margin: 0; }

/* ---------- Nachrichtenbausteine ---------- */
.bausteinkarte { border-left: 4px solid var(--gruen); }
.nachrichtentext {
  background: #f0f2f5; border: 1px solid var(--grau-linie);
  border-radius: var(--rundung); padding: 14px 16px;
  font-size: 15px; line-height: 1.65; white-space: pre-wrap;
  font-family: inherit; margin-bottom: 12px;
}
.kopierknopf { background: var(--gruen); border-color: var(--gruen); }
.kopierknopf.fertig { background: var(--dunkelblau); border-color: var(--dunkelblau); }

/* ---------- Rücklauf ---------- */
.fortschrittsbalken {
  height: 10px; background: var(--grau-linie); border-radius: 999px; overflow: hidden;
}
.fortschrittsbalken .gefuellt {
  height: 100%; background: var(--gruen); transition: width .3s;
}
.personenliste { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.knappliste { margin: 8px 0 0 0; padding-left: 20px; }
.knappliste li { margin: 4px 0; }

/* ---------- Planungstabelle ---------- */
.planungstabelle { font-size: 14px; }
.planungstabelle th {
  text-align: center; font-size: 13px; padding: 8px 6px;
  border: 1px solid var(--grau-linie);
}
.planungstabelle td {
  border: 1px solid var(--grau-linie); padding: 4px 6px; vertical-align: middle;
}
.planungstabelle .datumzelle { background: var(--weiss); white-space: nowrap; }
.planungstabelle .ausfallzelle {
  text-align: center; font-style: italic; color: var(--grau-text); background: #f0f1f3;
}
.zellenform { display: flex; align-items: center; gap: 4px; margin: 0; }
.zellenform select {
  margin-top: 0; padding: 5px 6px; font-size: 13px; border-color: transparent;
  background: transparent; font-weight: 600; min-width: 0;
}
.zellenform select:hover { border-color: #c3cad3; background: var(--weiss); }
.zellenform select.leer { color: var(--rot); font-style: italic; background: var(--rot-hell); }
.angeheftet { color: var(--dunkelblau); font-size: 17px; line-height: 1; }
.lszeile { display: flex; align-items: center; gap: 4px; }
.lszeile + .lszeile { margin-top: 3px; border-top: 1px dashed var(--grau-linie); padding-top: 3px; }

.legendezeile {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; font-size: 13px;
}

/* ---------- Prüfliste ---------- */
.pruefliste td { border: none; padding: 6px 8px; }
.pruefliste .zeichen {
  width: 30px; text-align: center; font-weight: 700; font-size: 17px; color: var(--gruen);
}
.pruefliste tr:has(.warnzeile) .zeichen { color: var(--gelb); }

/* ---------- Downloads ---------- */
.downloadreihe { display: flex; gap: 14px; flex-wrap: wrap; }
.downloadkasten {
  flex: 1; min-width: 240px;
  border: 1px solid var(--grau-linie); border-radius: var(--rundung); padding: 14px;
}
.downloadkasten .fussnote { margin: 4px 0 10px 0; }
.downloadkasten .knopf { margin-right: 6px; }

/* ---------- Mini-Fortschritt ---------- */
.minifortschritt { display: flex; gap: 4px; align-items: center; }
.minifortschritt .punkt {
  width: 9px; height: 9px; border-radius: 50%; background: var(--grau-linie);
}
.minifortschritt .punkt.voll { background: var(--gruen); }
.minifortschritt .punkt.jetzt { background: var(--dunkelblau); }
.minifortschritt small { margin-left: 6px; }

@media (max-width: 700px) {
  .schritt .name { font-size: 11px; }
  .schritt { min-width: 74px; }
  .planungskopf { flex-direction: column; }
  .planungskopf a { margin-left: 0; }
}

/* ==========================================================
   Verwaltungs-Startseite
   ========================================================== */

.planungszeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.planungszeile a { margin-left: auto; }
.rueckmeldezeile {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grau-linie);
  font-size: 15px;
}

.aufgabe {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #eef1f5;
}
.aufgabe:last-child { border-bottom: none; }
.aufgabe .ampel {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
}
.aufgabe .ampel.rot   { background: var(--rot); }
.aufgabe .ampel.gelb  { background: #f9a825; }
.aufgabe .ampel.gruen { background: var(--gruen); }
.aufgabe .beschreibung { flex: 1; min-width: 0; }
.aufgabe .beschreibung strong { display: block; }
.aufgabe .beschreibung small { color: var(--grau-text); }
.aufgabe a { flex-shrink: 0; }

.kachelreihe { display: flex; gap: 12px; flex-wrap: wrap; }
.kachel {
  flex: 1; min-width: 165px;
  border: 1px solid var(--grau-linie); border-radius: var(--rundung);
  padding: 14px; text-decoration: none; color: inherit; background: var(--weiss);
}
.kachel:hover { border-color: var(--dunkelblau); background: #f7f9fc; }
.kachel strong { display: block; color: var(--dunkelblau); margin-bottom: 3px; }
.kachel small { color: var(--grau-text); font-size: 13px; }

/* ---------- Auswertung ---------- */
.auswertungstabelle th.geplant { background: #dce6f2; }
.auswertungstabelle td.geplant { background: #f6f9fc; }
.balken {
  height: 14px; background: var(--grau-linie); border-radius: 3px;
  overflow: hidden; min-width: 100px;
}
.balken .gefuellt { height: 100%; background: var(--dunkelblau); }

/* ---------- Protokoll ---------- */
.einzelheiten { font-size: 12px; }
.feldwert {
  display: inline-block; margin-right: 10px; white-space: nowrap;
}
.feldwert .feld {
  color: var(--grau-text); margin-right: 4px;
}
.feldwert .feld::after { content: ":"; }

/* Rueckmeldung beim Speichern - auch wenn etwas schiefgeht */
.speicherhinweis.fehlgeschlagen {
  background: var(--rot);
  padding: 12px 24px;
  max-width: 90vw;
  text-align: center;
  line-height: 1.35;
}