/* Fahrschul-Cloud – Oberfläche */
:root {
  /* FUCHS – Deine Fahrschule: Markenfarben aus dem Logo */
  --gruen: #ce6232;          /* Fuchs-Rost (Primär dunkel) */
  --gruen-hell: #fdeee2;     /* helles Orange für Flächen */
  --gruen-mittel: #f67b32;   /* Fuchs-Orange (Primär hell) */
  --dunkel: #171008;         /* fast Schwarz wie im Logo */
  --grau-bg: #f7f4f1; --grau-linie: #e6ded7; --text: #241c15; --text-2: #6b5f55;
  --rot: #b3261e; --gelb: #8a6d00; --blau: #1a56a0; --radius: 10px;
  --schatten: 0 1px 3px rgba(0,0,0,.08);
}
* { box-sizing: border-box; margin: 0; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--grau-bg); color: var(--text); font-size: 15px; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--grau-linie); border-radius: 7px; background: #fff; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gruen-mittel); border-color: transparent; }
a { color: var(--gruen-mittel); }

/* Layout */
#app { display: flex; min-height: 100vh; }
nav {
  width: 220px; background: linear-gradient(180deg, #171008, #241407); color: #e8d6c6; padding: 18px 0; flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
nav .logo { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 800; letter-spacing: 2px; color: #fff; padding: 0 18px 16px; border-bottom: 1px solid #3a2513; margin-bottom: 12px; }
nav .logo img { width: 42px; height: 42px; }
nav .logo small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--gruen-mittel); text-transform: uppercase; }
nav .logo .untertitel { display: block; font-size: 10.5px; font-weight: 400; letter-spacing: .3px; color: #a08a77; text-transform: none; margin-top: 3px; }
nav a.nav-item { display: flex; gap: 10px; align-items: center; padding: 11px 20px; color: #e8d6c6; text-decoration: none; font-size: 14.5px; border-left: 3px solid transparent; }
nav a.nav-item:hover { background: #33200f; }
nav a.nav-item.aktiv { background: #33200f; color: #fff; border-left-color: var(--gruen-mittel); font-weight: 600; }
nav .fuss { margin-top: auto; padding: 14px 20px; font-size: 12.5px; color: #a08a77; border-top: 1px solid #3a2513; }
nav .fuss button { background: none; border: 1px solid #5c3d22; color: #e8d6c6; border-radius: 6px; padding: 5px 12px; margin-top: 8px; }

main { flex: 1; padding: 26px 32px; max-width: 1200px; }
.kopfzeile { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.kopfzeile h1 { font-size: 22px; }
.filialwahl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.filialwahl select { width: auto; padding: 6px 8px; }

/* Karten & Tabellen */
.karte { background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px 20px; margin-bottom: 18px; }
.kachel-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
/* Uebersichtszeile der Schuelerkarte: Ausbildungsstand, Pruefungen, Konto
   nebeneinander - kompakt wie im Vogel-Fahrschulmanager (03.09.2026). */
.uebersicht-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; margin-bottom: 20px; }
.uebersicht-reihe .karte.uebersicht-block { margin: 0; padding: 14px 16px; }
.uebersicht-block .label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.uebersicht-block table { border-collapse: collapse; }
.uebersicht-block .badge { font-size: 11px; padding: 2px 7px; }
.kachel { background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px 18px; }
.kachel .wert { font-size: 26px; font-weight: 700; color: var(--gruen); margin-top: 2px; }
.kachel .label { font-size: 13px; color: var(--text-2); }
table.liste { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
table.liste th { text-align: left; font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); background: #fafbfa; padding: 10px 14px; border-bottom: 1px solid var(--grau-linie); }
table.liste td { padding: 10px 14px; border-bottom: 1px solid #eef1ef; }
table.liste tr:last-child td { border-bottom: none; }
table.liste tr.klickbar { cursor: pointer; }
table.liste tr.klickbar:hover { background: var(--gruen-hell); }
.rechts { text-align: right; }
.storniert { text-decoration: line-through; color: #999; }

/* Knöpfe & Badges */
.btn { background: var(--gruen); color: #fff; border: none; border-radius: 7px; padding: 9px 16px; font-weight: 600; font-size: 14px; }
.btn:hover { background: var(--gruen-mittel); }
.btn.zweit { background: #fff; color: var(--gruen); border: 1px solid var(--gruen); }
.btn.klein { padding: 5px 10px; font-size: 12.5px; }
.btn.gefahr { background: #fff; color: var(--rot); border: 1px solid var(--rot); }
.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.klasse-badge { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.badge.aktiv { background: var(--gruen-hell); color: #a34a1e; }
.badge.bestanden { background: #e3ecf8; color: var(--blau); }
/* "gemeldet" = Pruefung steht an. Bewusst eine eigene Farbe, damit es weder
   mit "aktiv" noch mit "bestanden" verwechselt wird (09.09.2026). */
.badge.gemeldet { background: #ece7fb; color: #59339d; }
.badge.ruht, .badge.abgebrochen { background: #f3f0e0; color: var(--gelb); }
.badge.bar { background: #f3f0e0; color: var(--gelb); }
.badge.ec { background: #e3ecf8; color: var(--blau); }
.badge.kreditkarte { background: #efe3f8; color: #7b3aa0; }
.badge.ueberweisung { background: #e6f2e6; color: #2e7d32; }
.badge.online { background: #fdead9; color: #b4530a; }
.saldo-plus { color: #2e7d32 !important; font-weight: 600; }
.saldo-minus { color: var(--rot) !important; font-weight: 600; }
.saldo-null { color: #111 !important; font-weight: 600; }

/* Formulare */
.form-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.feld label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.werkzeuge { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.werkzeuge input, .werkzeuge select { width: auto; }

/* Dialog */
dialog { border: none; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 0; width: min(640px, calc(92vw / var(--zoomf, 1))); }
dialog::backdrop { background: rgba(10,25,18,.45); }
dialog .dialog-kopf { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--grau-linie); }
dialog .dialog-kopf h2 { font-size: 17px; }
dialog .dialog-inhalt { padding: 18px 22px; max-height: calc(66vh / var(--zoomf, 1)); overflow-y: auto; }
dialog .dialog-fuss { padding: 14px 22px; border-top: 1px solid var(--grau-linie); display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.schliessen { background: none; border: none; font-size: 20px; color: var(--text-2); }

/* Kalender */
.kalender { display: grid; grid-template-columns: 52px repeat(6, 1fr); background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); overflow: clip; }
.kal-kopf { padding: 8px 4px; text-align: center; font-size: 12.5px; font-weight: 700; border-bottom: 2px solid var(--grau-linie); background: #fafbfa; position: sticky; top: 0; z-index: 5; }
.kal-kopf small { display: block; font-weight: 400; color: var(--text-2); }
.kal-spalte { border-left: 1px solid #eef1ef; position: relative; }
.kal-zeit { font-size: 10.5px; color: var(--text-2); text-align: right; padding-right: 5px; border-top: 1px solid #eef1ef; }
.kal-slot { border-top: 1px solid #f2f5f3; cursor: pointer; }
.kal-slot:hover { background: var(--gruen-hell); }
.termin { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 3px 6px; font-size: 11px; line-height: 1.25; overflow: hidden; cursor: pointer; color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.termin.geteilt { padding: 2px 4px; font-size: 10px; }
/* Fahrzeug zur selben Zeit in einem zweiten Termin: roter Rahmen, damit die
   Doppelbelegung im Wochenplan sofort auffaellt (Benjamin, 03.09.2026). */
.termin.fz-doppelt { outline: 2px solid #b3261e; outline-offset: -2px; box-shadow: 0 0 0 1px #fff, 0 1px 3px rgba(0,0,0,.35); }
.termin-fzwarnung { float: right; margin-left: 3px; font-size: 10px; line-height: 1; }
/* Bemerkung im Termin (oft der Pruefort) - etwas zurueckgenommen, damit sie
   den Namen nicht ueberlagert (Buerokraft, 03.09.2026). */
.termin-bemerkung { opacity: .85; font-style: italic; }
/* Anfang und Ende der Fahrstunde stehen zusammen in der Kachel und duerfen
   niemals mitten in der Uhrzeit umbrechen (Benjamin, 03.09.2026). In sehr
   schmalen Spalten wird die Zeitangabe etwas kleiner, damit sie ganz passt. */
.termin-zeit { white-space: nowrap; }
/* Umplanen mit der Maus: Block anfassen und ziehen, Unterkante fuer die Dauer. */
.termin.ziehbar { cursor: grab; }
.termin.zieht { cursor: grabbing; opacity: .92; z-index: 60; box-shadow: 0 8px 20px rgba(0,0,0,.4); outline: 2px solid #fff; outline-offset: -2px; }
.termin-griff { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.termin.ziehbar:hover .termin-griff { background: rgba(255,255,255,.45); }
body.plan-zieht { user-select: none; cursor: grabbing; }
/* Schild mit Fahrtart und Klasse im Terminblock. Die Schriftgroesse haengt
   bewusst am Block (em), damit sie in geteilten und engen Spalten sowie auf
   dem Handy mitschrumpft, ohne dass es dafuer eigene Regeln braucht. */
.termin-klasse { display: inline-block; padding: 0 4px; border-radius: 4px; font-size: .94em; font-weight: 700; line-height: 1.35; color: #fff; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.termin.geteilt.eng .termin-klasse { padding: 0 2px; letter-spacing: -.2px; }
.termin.geteilt .termin-zeit { font-size: 9.5px; }
.termin.geteilt.eng .termin-zeit { font-size: 8.5px; letter-spacing: -.2px; }
/* Auf dem Handy ist eine Tagesspalte nur rund 60 Pixel breit - "08:30-09:50"
   braucht dort weniger Schrift, sonst rutscht der Name aus der Kachel. */
@media (max-width: 900px) {
  .termin-zeit { font-size: 9.5px; }
  .termin.geteilt .termin-zeit { font-size: 8.5px; letter-spacing: -.2px; }
}
@media (max-width: 560px) {
  .termin-zeit { font-size: 8.5px; letter-spacing: -.2px; }
}
/* Ab vier gleichzeitigen Terminen wird es eng - Schrift weiter zurueknehmen,
   damit wenigstens Uhrzeit und Name anlesbar bleiben. */
.termin.geteilt.eng { padding: 1px 3px; font-size: 9px; line-height: 1.15; }
.termin.uebung { background: var(--gruen); }
/* Sonderfahrten farblich unterscheidbar: Überland gelb, Autobahn orange, Nacht blau */
.termin.ueberland { background: #f2c200; color: #2b2200; }
.termin.autobahn { background: #f59e0b; color: #2b1c00; }
.termin.nacht { background: #1a56a0; }
/* Prüfungen rot */
.termin.pruefungsvorbereitung, .termin.praktische_pruefung { background: #c22a20; }
.termin.testfahrt { background: #0e7a6d; }
.termin.theorie { background: #e0559f; }
.termin.sonstiges { background: #667; }
/* Einträge ohne Fahrschüler: Tätigkeit grau, Privat braun, Urlaub/Krank/Feiertag schwarz */
.termin.taetigkeit { background: #8a8f8a; }
.termin.privat { background: #7a4a2b; }
.termin.urlaub, .termin.krank, .termin.feiertag { background: #1c1c1c; }
.termin.ausgefallen { background: #b9c2bd; text-decoration: line-through; }
/* Fehlstunde (nicht erschienen): rot schraffiert */
.termin.fehlstunde { background: repeating-linear-gradient(45deg, #b3261e, #b3261e 7px, #7e1712 7px, #7e1712 14px); }
.termin.durchgefuehrt { opacity: .92; box-shadow: inset 0 0 0 2px #e3b341, 0 1px 2px rgba(0,0,0,.25); }
.termin-schloss { float: right; margin-left: 3px; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
/* Zur Selbstbuchung freigegebener Block: ein ANGEBOT, kein Termin. Deshalb hell
   und gestrichelt statt farbig gefuellt - er soll sich auf den ersten Blick von
   allem unterscheiden, was wirklich stattfindet (Benjamin, 08.09.2026). */
.termin.frei-block { background: repeating-linear-gradient(45deg, #fff, #fff 5px, #fdeee2 5px, #fdeee2 10px); color: #7a4a2b; border: 1.5px dashed var(--gruen-mittel); box-shadow: none; }
.termin.frei-block:hover { background: #fdeee2; }
.termin.frei-block .termin-zeit { color: #6b3f22; }
.karte.frei-karte { border-left: 5px dashed var(--gruen-mittel); background: #fffaf6; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 70% 30%, #4a2408 0%, #171008 55%, #0d0a06 100%); }
.login-box { background: #fff; border-radius: 16px; padding: 36px; width: min(400px, 92vw); box-shadow: 0 0 80px rgba(246,123,50,.35), 0 20px 60px rgba(0,0,0,.5); }
.login-box .marke { text-align: center; margin-bottom: 18px; }
.login-box .marke img { width: 96px; height: 96px; }
.login-box .marke .name { font-size: 26px; font-weight: 800; letter-spacing: 6px; color: #171008; border-bottom: 3px solid #171008; display: inline-block; padding-bottom: 2px; }
.login-box .marke .claim { font-size: 12px; font-weight: 700; letter-spacing: 4px; color: var(--gruen-mittel); text-transform: uppercase; margin-top: 6px; }
.login-box h1 { font-size: 22px; margin-bottom: 4px; }
.login-box p { color: var(--text-2); font-size: 13.5px; margin-bottom: 20px; }
.login-box .feld { margin-bottom: 14px; }
.fehler { background: #fdecea; color: var(--rot); border-radius: 7px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 12px; }
.leer { color: var(--text-2); font-style: italic; padding: 20px; text-align: center; }
.tab-reihe { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--grau-linie); margin-bottom: 16px; }
.tab-reihe button { flex: 0 0 auto; white-space: nowrap; }
.tab-reihe button { background: none; border: none; padding: 9px 16px; font-size: 14px; color: var(--text-2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-reihe button.aktiv { color: var(--gruen); font-weight: 700; border-bottom-color: var(--gruen); }

/* Mobiler Kopfbereich (nur Handy) */
.mobil-kopf { display: none; }

/* Mein Tag */
.tag-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tag-nav .btn { font-size: 20px; padding: 8px 20px; }
.tag-datum { text-align: center; cursor: pointer; flex: 1; }
.tag-datum strong { display: block; font-size: 18px; }
.tag-datum span { font-size: 13px; color: var(--text-2); }
.tag-zusammenfassung { text-align: center; font-size: 13.5px; color: var(--text-2); margin-bottom: 14px; }
.tag-karte { background: #fff; border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: 12px; overflow: hidden; border-left: 5px solid var(--gruen-mittel); }
.tag-karte.durchgefuehrt { border-left-color: #2e7d32; opacity: .78; }
.tag-karte.ausgefallen { border-left-color: var(--rot); opacity: .78; }
.tag-karte .karte-kern { display: flex; align-items: center; gap: 14px; padding: 13px 15px; cursor: pointer; }
.tag-zeit { text-align: center; min-width: 58px; }
.tag-zeit strong { display: block; font-size: 18px; }
.tag-zeit span { font-size: 12px; color: var(--text-2); }
.tag-info { flex: 1; min-width: 0; }
.tag-info strong { font-size: 15.5px; }
.tag-art { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.tag-tel { font-size: 22px; text-decoration: none; padding: 6px; }
.tag-aktionen { display: flex; gap: 8px; align-items: center; padding: 10px 15px; border-top: 1px solid #f2ede8; background: #fdfbf9; flex-wrap: wrap; }
.tag-aktionen .btn { flex: 1; min-width: 130px; }
.tag-aktionen .btn.klein { flex: 0 0 auto; min-width: auto; white-space: nowrap; margin-left: auto; }
.tag-erledigt { font-weight: 700; color: #2e7d32; }

@media (max-width: 860px) {
  #app { flex-direction: column; }

  /* Kopfzeile oben */
  .mobil-kopf {
    display: flex; align-items: center; gap: 8px;
    background: linear-gradient(180deg, #171008, #241407); color: #fff;
    padding: 10px 14px; position: sticky; top: 0; z-index: 50;
  }
  .mobil-kopf img { width: 30px; height: 30px; }
  .mobil-kopf strong { letter-spacing: 2px; }
  .mobil-kopf .mk-name { margin-left: auto; font-size: 12.5px; color: #e8d6c6;
    flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobil-kopf strong { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobil-kopf button { flex-shrink: 0; white-space: nowrap; }
  .mobil-kopf button { background: none; border: 1px solid #5c3d22; color: #e8d6c6; border-radius: 6px; padding: 4px 10px; font-size: 12.5px; }

  /* Navigation unten, wie eine App */
  nav {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; z-index: 50;
    width: 100%; height: auto; flex-direction: row; padding: 0;
    background: #171008; border-top: 1px solid #3a2513;
    padding-bottom: env(safe-area-inset-bottom);
  }
  nav .logo, nav .fuss { display: none; }
  nav a.nav-item {
    flex: 1; flex-direction: column; justify-content: center; gap: 2px;
    padding: 7px 2px 8px; font-size: 10px; border-left: none; border-top: 3px solid transparent;
    text-align: center; min-width: 0;
  }
  nav a.nav-item .icon { font-size: 19px; }
  nav a.nav-item .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  nav a.nav-item.aktiv { border-left: none; border-top-color: var(--gruen-mittel); }

  main { padding: 14px 14px 92px; }
  .kopfzeile h1 { font-size: 21px; }
  .kalender { overflow-x: auto; }
  dialog { width: calc(96vw / var(--zoomf, 1)); }
  .tab-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border-bottom: none; margin-bottom: 12px; }
  .tab-reihe button { border: 1.5px solid var(--grau-linie); border-radius: 11px; padding: 12px 6px;
    text-align: center; margin-bottom: 0; background: #fff; font-size: 14px; }
  .tab-reihe button.aktiv { border-color: var(--orange, #b45309); background: #fdf3e7; border-bottom-color: var(--orange, #b45309); }
  /* Alle Dialog-Knoepfe teilen sich die Zeile und bleiben komplett sichtbar */
  dialog .dialog-fuss { padding: 12px 12px; gap: 8px; }
  dialog .dialog-fuss .btn { flex: 1 1 auto; min-width: 0; padding: 12px 8px; text-align: center; white-space: nowrap; }

  /* Auf dem Handy alles ein gutes Stück größer (bessere Lesbarkeit und Bedienung) */
  body { font-size: 17px; }
  input, select, textarea { font-size: 17px; padding: 11px 12px; }
  .btn { font-size: 16.5px; padding: 12px 18px; }
  .btn.klein { font-size: 14px; padding: 8px 12px; }
  table.liste th { font-size: 13.5px; padding: 11px 12px; }
  table.liste td { font-size: 16px; padding: 12px 12px; }
  nav a.nav-item { padding: 9px 2px 10px; font-size: 11.5px; }
  nav a.nav-item .icon { font-size: 23px; }
  .mobil-kopf .mk-name, .mobil-kopf button { font-size: 14px; }
  .feld label { font-size: 14px; }
  .badge { font-size: 13px; }
}

/* Vermerk aus der Grundmaske des Fahrschulmanagers. Steht ganz oben auf der
   Schuelerkarte und muss im Buero sofort ins Auge fallen (z. B. „Bezahlung
   ueber Klaus am Ende"). */
.vermerk-karte { border-left: 5px solid var(--orange, #E8600B); background: var(--hell, #fdf1e3); }
.vermerk-karte .vermerk-text { white-space: pre-wrap; font-size: 15px; font-weight: 600;
  line-height: 1.45; margin-top: 5px; }

/* ============================================================
   AUSWERTUNG ALS KREUZTABELLE (Vogel-Vorbild, 08.09.2026)
   Links das Bedienfeld, rechts Tabelle oder Diagramm.
   ============================================================ */
.s3-karte { padding: 0; overflow: hidden; }

.s3-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--grau-linie);
}
.s3-titel { margin: 0; font-size: 19px; }
.s3-unter { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.s3-gesamt { text-align: right; line-height: 1.25; }
.s3-gesamt span { display: block; font-size: 11px; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .07em; }
.s3-gesamt strong { font-size: 21px; font-variant-numeric: tabular-nums; }

/* Die sechs Bereiche als sichtbare Reihe - man soll alle auf einmal sehen. */
.s3-bereiche {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 10px 18px; border-bottom: 1px solid var(--grau-linie);
  background: var(--grau-bg);
}
.s3-bereich {
  border: 1px solid var(--grau-linie); background: #fff; border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; color: var(--text-2); font-family: inherit;
  cursor: pointer;
}
.s3-bereich:hover { border-color: var(--gruen-mittel); color: var(--gruen-mittel); }
.s3-bereich.an {
  background: var(--gruen-mittel); border-color: var(--gruen-mittel);
  color: #fff; font-weight: 600;
}

.s3-raster { display: grid; grid-template-columns: 218px 1fr; align-items: start; }
@media (max-width: 900px) { .s3-raster { grid-template-columns: 1fr; } }

.s3-bedien {
  padding: 14px; border-right: 1px solid var(--grau-linie);
  background: var(--grau-bg); min-height: 100%;
}
@media (max-width: 900px) {
  .s3-bedien { border-right: none; border-bottom: 1px solid var(--grau-linie);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .s3-trenner { display: none; }
}
.s3-feld { display: block; margin-bottom: 10px; }
.s3-feld span { display: block; font-size: 11px; color: var(--text-2); margin-bottom: 2px; }
.s3-feld select { width: 100%; font-size: 13.5px; padding: 7px 8px; }
.s3-feld.s3-aus span { opacity: .45; }
.s3-feld.s3-aus select { opacity: .45; cursor: not-allowed; }
.s3-trenner { height: 1px; background: var(--grau-linie); margin: 14px 0 12px; }

.s3-inhalt { padding: 12px 14px 16px; min-width: 0; }

.s3-werkzeug {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.s3-ansichten { display: flex; }
.s3-ansicht {
  border: 1px solid var(--grau-linie); background: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 7px 11px; color: var(--text-2);
  font-family: inherit;
}
.s3-ansicht:first-child { border-radius: 7px 0 0 7px; }
.s3-ansicht:last-child { border-radius: 0 7px 7px 0; }
.s3-ansicht + .s3-ansicht { border-left: none; }
.s3-ansicht.an { background: var(--gruen-mittel); border-color: var(--gruen-mittel); color: #fff; }
.s3-quote { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 5px; }
.s3-aktionen { margin-left: auto; display: flex; gap: 6px; }

.s3-tabelle-rahmen { overflow-x: auto; }
.s3-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.s3-tabelle th, .s3-tabelle td { padding: 7px 10px; border-bottom: 1px solid var(--grau-linie); }
.s3-tabelle thead th {
  background: var(--grau-bg); font-weight: 600; font-size: 12px;
  color: var(--text-2); text-align: right; white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.s3-tabelle thead th.s3-name { text-align: left; }
.s3-sort { cursor: pointer; user-select: none; }
.s3-sort:hover { color: var(--gruen-mittel); }
.s3-tabelle .s3-name { text-align: left; font-weight: 500; white-space: nowrap; }
.s3-tabelle .s3-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s3-tabelle .s3-null { color: #b9ada2; }
.s3-tabelle .s3-summe { font-weight: 600; }
/* Die Summenspalte bleibt beim seitlichen Blaettern stehen. */
.s3-tabelle th.s3-summe, .s3-tabelle td.s3-summe {
  position: sticky; right: 0; background: #fff;
  box-shadow: inset 1px 0 0 var(--grau-linie);
}
.s3-tabelle thead th.s3-summe, .s3-tabelle tfoot td.s3-summe { background: var(--grau-bg); }
.s3-tabelle thead th.s3-summe { z-index: 2; }
.s3-tabelle tbody tr:hover { background: var(--grau-bg); }
.s3-tabelle tfoot th, .s3-tabelle tfoot td {
  background: var(--grau-bg); font-weight: 600; border-bottom: none; border-top: 2px solid var(--grau-linie);
}

.s3-diagramm { overflow-x: auto; padding: 6px 0 2px; }
.s3-kreis { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; padding: 6px 0; }
.s3-legende { flex: 1; min-width: 220px; }
.s3-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0;
  border-bottom: 1px solid var(--grau-linie); }
.s3-leg:last-child { border-bottom: none; }
.s3-punkt { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }
.s3-leg-name { flex: 1; }
.s3-leg-wert { font-variant-numeric: tabular-nums; }
.s3-leg-pct { width: 44px; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }

.s3-hinweis { font-size: 11.5px; color: var(--text-2); margin: 10px 0 0; line-height: 1.5; }

/* Drucken: nur die Auswertung, ohne Bedienfeld und Werkzeugleiste. */
@media print {
  body.s3-druckt .s3-bedien,
  body.s3-druckt .s3-werkzeug,
  body.s3-druckt .s3-hinweis { display: none; }
  body.s3-druckt .s3-raster { grid-template-columns: 1fr; }
  body.s3-druckt .s3-karte { border: none; box-shadow: none; }
  body.s3-druckt .s3-tabelle { font-size: 10.5pt; }
  body.s3-druckt .s3-tabelle thead th { position: static; }
}

/* Wochenplan ohne gewaehlten Fahrlehrer: kein leeres Stundenraster. */
.kalender.kal-leer { display: none; }
.kal-legende.kal-leer { display: none; }

/* Spaltenbreiten in den Zahlungslisten: Der ueberschuessige Platz gehoert
   den Namen, nicht der Referenz - dort steht meist nur "Fahrstunde". */
table.liste th.sp-eng, table.liste td.sp-eng { width: 150px; max-width: 150px; }
table.liste td.rechts { white-space: nowrap; }
table.liste td.sp-eng { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }