/* Schalti Termine – Basis-Stylesheet.
   Bewusst ohne Build-Schritt: eine Datei, reines CSS, überall lesbar. */

/* Die Farben stammen von fahrschule-schaltwerk.de, damit der Sprung von dort
   auf die Buchung nicht wie ein Seitenwechsel wirkt: das warme Papierweiß des
   Seitenhintergrunds, das Graublau für Schrift und Marke, der rote Akzent und
   die Pastelltöne der Abschnitte.

   Zwei Töne sind bewusst nachgeschärft, weil sie dort nur große Überschriften
   tragen, hier aber Fließtext und Bedienelemente:
   - Das hellere Graublau (#5b7995) kam auf dem Grund nur auf 3,9:1 und ist
     hier auf #4d6b87 abgedunkelt (4,8:1).
   - Das Taubenblau (#3673b9) bleibt ungenutzt – 4,2:1 auf dem Grund reicht
     für Text nicht. Für Zeigen und Fokus steht das dunklere #1f4467. */
:root {
  /* Marke und Bedienung: Knöpfe, Links, aktiver Bereich, Auswahl */
  --marke: var(--schalti-marke, #2b5883);
  --marke-hell: var(--schalti-marke-hell, #dbe8ef);
  --marke-dunkel: var(--schalti-marke-dunkel, #1f4467);
  /* Schrift auf einer kräftig gefüllten Fläche – Marke oder Rot. */
  --auf-akzent: var(--schalti-auf-akzent, #ffffff);

  /* Bedeutung „frei“ und „hat geklappt“ – bleibt grün */
  --gruen: var(--schalti-gruen, #4a7c2f);
  --gruen-hell: var(--schalti-gruen-hell, #d9ecc4);
  --gruen-dunkel: var(--schalti-gruen-dunkel, #3f6329);

  --rot: var(--schalti-rot, #c72e2e);
  --rot-hell: var(--schalti-rot-hell, #fdecea);
  --gelb: var(--schalti-gelb, #8a6100);
  --gelb-hell: var(--schalti-gelb-hell, #ffebb6);

  --text: var(--schalti-text, #2b5883);
  --text-leise: var(--schalti-text-leise, #4d6b87);
  --linie: var(--schalti-linie, #cfdbe2);
  --flaeche: var(--schalti-flaeche, #ffffff);
  --grund: var(--schalti-grund, #ebefe7);

  --radius: var(--schalti-radius, 10px);
  --radius-klein: var(--schalti-radius-sm, 6px);
  --schatten: var(--schalti-schatten, 0 1px 2px rgba(20, 30, 25, 0.06), 0 4px 12px rgba(20, 30, 25, 0.05));
  --font: var(--sl-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

@media (prefers-color-scheme: dark) {
  :root {
    --marke: var(--schalti-marke, #8fb9e3);
    --marke-hell: var(--schalti-marke-hell, #1d2c3a);
    --marke-dunkel: var(--schalti-marke-dunkel, #b9d5f0);
    --auf-akzent: var(--schalti-auf-akzent, #10202e);

    --gruen: var(--schalti-gruen, #8fc46a);
    --gruen-hell: var(--schalti-gruen-hell, #1e2a17);
    --gruen-dunkel: var(--schalti-gruen-dunkel, #a9d68a);
    --rot: var(--schalti-rot, #f2b8b5);
    --rot-hell: var(--schalti-rot-hell, #3a2220);
    --gelb: var(--schalti-gelb, #e5c37c);
    --gelb-hell: var(--schalti-gelb-hell, #33291480);

    --text: var(--schalti-text, #dde8ef);
    --text-leise: var(--schalti-text-leise, #9db0be);
    --linie: var(--schalti-linie, #2e3d48);
    --flaeche: var(--schalti-flaeche, #1a242c);
    --grund: var(--schalti-grund, #121a20);
  }
}

.sl-theme-dark {
  --marke: var(--schalti-marke, #8fb9e3);
  --marke-hell: var(--schalti-marke-hell, #1d2c3a);
  --marke-dunkel: var(--schalti-marke-dunkel, #b9d5f0);
  --auf-akzent: var(--schalti-auf-akzent, #10202e);

  --gruen: var(--schalti-gruen, #8fc46a);
  --gruen-hell: var(--schalti-gruen-hell, #1e2a17);
  --gruen-dunkel: var(--schalti-gruen-dunkel, #a9d68a);
  --rot: var(--schalti-rot, #f2b8b5);
  --rot-hell: var(--schalti-rot-hell, #3a2220);
  --gelb: var(--schalti-gelb, #e5c37c);
  --gelb-hell: var(--schalti-gelb-hell, #33291480);

  --text: var(--schalti-text, #dde8ef);
  --text-leise: var(--schalti-text-leise, #9db0be);
  --linie: var(--schalti-linie, #2e3d48);
  --flaeche: var(--schalti-flaeche, #1a242c);
  --grund: var(--schalti-grund, #121a20);
}

.tag:hover,
.tag--frei:hover,
.tag--gebucht:hover,
.tag--gemischt:hover,
.slot:hover,
.schalti-nav-pill:hover {
  text-decoration: none;
}

/* Besucher ohne Anmeldung sehen keine leere mobile Navigation */
.schalti-header:not(:has(.schalti-nav-links li)) .schalti-nav-toggler {
  display: none !important;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--marke); }
a:hover { color: var(--marke-dunkel); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }

/* Einheitliches Fahrschul-Branding für alle Hauptüberschriften:
   gesperrte Versalien über einem doppelten roten Strich. */
main h1 {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--marke);
  border-bottom: 4px double var(--rot);
  padding-bottom: 0.2rem;
  margin-bottom: 0.9rem;
}
@media (max-width: 520px) {
  /* Gesperrte Versalien brauchen Platz; auf dem Handy geht sonst jede
     Überschrift über drei Zeilen. */
  main h1 { font-size: 1.35rem; letter-spacing: 0.05em; }
}

.huelle { max-width: 1040px; margin: 0 auto; padding: 0 1rem; }
.huelle-schmal { max-width: 620px; margin: 0 auto; padding: 0 1rem; }

/* --- Kopf und Fuß --- */

/* Die Kopfzeile bleibt beim Scrollen stehen. Auf dem Handy ist das der
   Unterschied zwischen „einmal ganz nach oben wischen" und „direkt zum
   nächsten Bereich"; die Planung ist lang genug, dass das zählt. */
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--flaeche) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie);
  margin-bottom: 1.5rem;
}
/* Browser ohne backdrop-filter bekommen eine deckende Fläche statt
   milchig durchscheinendem Text. */
@supports not (backdrop-filter: blur(1px)) {
  .kopf { background: var(--flaeche); }
}

/* Der Kopf spannt breiter als der Inhalt darunter. Marke, sechs Punkte und
   die Abmeldung brauchen zusammen mehr als die 1040 px, auf die der Text
   bewusst begrenzt ist – ohne diese Ausnahme kürzt der Browser den Namen der
   Fahrschule weg, obwohl der Bildschirm breit genug wäre. */
.kopf-inhalt {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: 1240px; min-height: 3.5rem;
}

.marke {
  display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0;
  font-weight: 700; font-size: 1.02rem; color: var(--text); text-decoration: none;
  letter-spacing: -0.01em;
}
.marke-zeichen {
  display: grid; place-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 9px;
  background: var(--marke-hell); color: var(--marke);
  border: 1px solid color-mix(in srgb, var(--marke) 22%, transparent);
}
.marke-zeichen svg { width: 1.05rem; height: 1.05rem; }
/* Lange Fahrschulnamen dürfen den Schalter nicht aus der Zeile drängen. */
.marke-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Navigation --- */

.menue { margin-left: auto; }

.menue-inhalt {
  display: flex; align-items: center; gap: 0.15rem;
  font-size: 0.92rem;
}
/* Ab dieser Breite ist das Menü keine Klappe mehr, sondern eine Leiste: Der
   Inhalt gehört immer sichtbar, unabhängig davon, ob <details> gerade offen
   ist. Neuere Browser verstecken ihn über ::details-content, ältere über
   display:none am Kind – die Zeile oben nimmt das eine zurück, diese das
   andere.

   Die Grenze liegt bei 960 px, weil die ausgeklappte Leiste so viel braucht:
   Marke, sechs Punkte und die Abmeldung stehen alle auf einer Zeile und
   brechen nicht um. Reichte die Breite nicht, schöbe die Leiste die Seite
   seitlich hinaus – der Kopf klebt oben und schiebt dann den ganzen Inhalt
   mit. Lieber der Schalter als eine Seite, die sich verschieben lässt. */
@media (min-width: 961px) {
  .menue::details-content { content-visibility: visible; }
}
.menue-inhalt a {
  padding: 0.45rem 0.75rem; border-radius: 999px;
  color: var(--text-leise); text-decoration: none; font-weight: 550;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.menue-inhalt a:hover { background: var(--grund); color: var(--text); }
.menue-inhalt a.aktiv { background: var(--marke-hell); color: var(--marke-dunkel); }
.menue-inhalt a:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.menue-abmelden { margin-left: 0.4rem; }

/* Der Schalter erscheint nur auf schmalen Geräten (siehe unten). */
.menue-schalter {
  display: none; list-style: none; cursor: pointer;
  width: 2.75rem; height: 2.75rem; border-radius: 10px;
  align-items: center; justify-content: center;
  color: var(--text); border: 1px solid var(--linie); background: var(--flaeche);
}
.menue-schalter::-webkit-details-marker { display: none; }
.menue-schalter svg { width: 1.35rem; height: 1.35rem; }
.menue-schalter:hover { background: var(--grund); }
.menue-kreuz { display: none; }
.menue[open] .menue-strich { display: none; }
.menue[open] .menue-kreuz { display: block; }

@media (max-width: 960px) {
  .menue-schalter { display: flex; }
  .menue-inhalt {
    position: absolute; right: 1rem; left: 1rem; top: calc(100% + 0.5rem);
    flex-direction: column; align-items: stretch; gap: 0.1rem;
    padding: 0.5rem; border-radius: var(--radius);
    background: var(--flaeche); border: 1px solid var(--linie);
    box-shadow: var(--schatten);
  }
  /* Fingerbreite Ziele statt Textzeilen. */
  .menue-inhalt a { padding: 0.7rem 0.8rem; border-radius: var(--radius-klein); }
  .menue-abmelden { margin: 0.35rem 0 0; border-top: 1px solid var(--linie); padding-top: 0.5rem; }
  .menue-abmelden .knopf { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .menue-inhalt a { transition: none; }
}

.fuss {
  margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--linie);
  color: var(--text-leise); font-size: 0.85rem;
}
.fuss a { color: var(--text-leise); }

/* --- Karten --- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--schatten);
}
.karte + .karte { margin-top: 1rem; }
.karte h2 { margin-top: 0; }

.raster-zwei {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
/* Auch einspaltig bleibt es minmax(0, …), und die Spalteninhalte bekommen
   min-width: 0. Ohne beides zieht ein einziges nicht umbrechendes Wort – die
   Abo-Adresse des Kalenders – die Spalte auf seine Länge, und mit ihr die
   ganze Seite: Auf dem Handy stand dann alles in Schreibtischbreite und ließ
   sich seitlich schieben. Grid-Elemente schrumpfen von sich aus nicht unter
   ihren Inhalt, ein overflow-x am Kasten selbst greift dagegen nicht. */
.raster-zwei > * { min-width: 0; }
@media (max-width: 760px) { .raster-zwei { grid-template-columns: minmax(0, 1fr); } }

/* --- Kalender --- */

.kalender-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.kalender-kopf h2 { margin: 0; font-size: 1.05rem; }

/* Größere, runde Blätter-Knöpfe statt der winzigen Pfeil-Zeichen –
   gut treffbar auch auf dem Handy, mit Shoelace-Chevron statt &larr;/&rarr;. */
.kalender-kopf .knopf--pfeil {
  width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%;
  font-size: 1.3rem; line-height: 1; flex: none;
}
.kalender-kopf .knopf--pfeil sl-icon { pointer-events: none; }

.monat { width: 100%; border-collapse: collapse; table-layout: fixed; }
.monat th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-leise); font-weight: 600; padding-bottom: 0.4rem;
}
.monat td { padding: 2px; }

.tag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; min-height: 40px;
  border: 1px solid transparent; border-radius: var(--radius-klein);
  background: none; color: var(--text-leise);
  font: inherit; font-size: 0.9rem; text-decoration: none; cursor: default;
}
.tag .zahl { line-height: 1.1; }
.tag .punkt {
  width: 4px; height: 4px; border-radius: 50%; margin-top: 3px; background: transparent;
}

.tag--frei {
  background: var(--gruen-hell); color: var(--gruen-dunkel);
  border-color: color-mix(in srgb, var(--gruen) 25%, transparent);
  font-weight: 600; cursor: pointer;
}
.tag--frei:hover { border-color: var(--gruen); }
.tag--frei .punkt { background: var(--gruen); }
.tag--gebucht {
  background: var(--marke-hell); color: var(--marke-dunkel);
  border-color: color-mix(in srgb, var(--marke) 25%, transparent);
  font-weight: 600; cursor: pointer;
}
.tag--gebucht:hover { border-color: var(--marke); }
.tag--gebucht .punkt { background: var(--marke); }
.tag--gemischt {
  background: linear-gradient(135deg, var(--gruen-hell) 50%, var(--marke-hell) 50%);
  color: var(--marke-dunkel);
  border-color: var(--linie);
  font-weight: 600; cursor: pointer;
}
.tag--gemischt:hover { border-color: var(--marke); }
.tag--gewaehlt { background: var(--marke) !important; color: var(--auf-akzent) !important; border-color: var(--marke) !important; }
.tag--gewaehlt .punkt,
.tag--gewaehlt .punkt--gruen,
.tag--gewaehlt .punkt--blau,
.tag--gewaehlt .punkt--gelb { background: var(--auf-akzent) !important; }
.tag--fremd { opacity: 0.35; }
.tag--heute { outline: 2px solid var(--marke); outline-offset: -2px; }
.tag--feiertag { color: var(--rot); }

.punkte-reihe {
  display: flex; gap: 2px; justify-content: center; align-items: center; margin-top: 3px; min-height: 4px;
}
.punkt--gruen { width: 4px; height: 4px; border-radius: 50%; background: var(--gruen); }
.punkt--blau { width: 4px; height: 4px; border-radius: 50%; background: var(--marke); }
.punkt--gelb { width: 4px; height: 4px; border-radius: 50%; background: var(--gelb); }

.legende {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-leise);
}
.legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legende i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  background: var(--gruen-hell); border: 1px solid var(--gruen);
}
.legende i.frei-voll { background: var(--marke); }
.legende i.gebucht-voll { background: var(--marke-hell); border-color: var(--marke); }
.legende i.feiertag { background: var(--rot-hell); border-color: var(--rot); }

/* --- Interne Terminkarten --- */
.termin-karte-liste {
  display: flex; flex-direction: column; gap: 0.65rem;
}
.termin-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 0.85rem 1rem;
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.termin-karte--gebucht {
  border-left: 4px solid var(--marke);
}
.termin-karte--frei {
  border-left: 4px solid var(--gruen);
}
.termin-karte--offen {
  border-left: 4px solid var(--gelb);
}
.termin-karte-kopf {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.termin-karte-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.4rem 1rem;
  font-size: 0.9rem; margin-top: 0.2rem;
}

/* --- Terminliste --- */

.slots { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); }
.slot {
  display: block; text-align: center; text-decoration: none;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.slot:hover { border-color: var(--marke); background: var(--marke-hell); color: var(--marke-dunkel); }
.slot .uhrzeit { font-weight: 650; display: block; }
.slot .meta { display: block; font-size: 0.76rem; color: var(--text-leise); }
.slot:hover .meta { color: var(--marke-dunkel); }

/* --- Formulare --- */

.feld { margin-bottom: 1rem; }
.feld label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.3rem; }
.feld .hilfe { font-size: 0.82rem; color: var(--text-leise); margin-top: 0.25rem; }
.feld .fehler { font-size: 0.85rem; color: var(--rot); margin-top: 0.25rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="password"], select, textarea {
  width: 100%; padding: 0.55rem 0.65rem;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text);
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marke); outline-offset: 1px; border-color: var(--marke);
}
textarea { resize: vertical; }

/* Kästchen links, Beschriftung rechts – Hilfetext und Fehler darunter, in
   derselben Spalte wie die Beschriftung. Nebeneinander waren es drei Spalten,
   und auf schmalen Geräten schob die dritte die Seite seitlich hinaus. */
.feld--kontrollkaestchen {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.6rem; align-items: start;
}
.feld--kontrollkaestchen input { margin-top: 0.3rem; }
.feld--kontrollkaestchen label { font-weight: 400; font-size: 0.9rem; margin-bottom: 0; }
.feld--kontrollkaestchen .hilfe,
.feld--kontrollkaestchen .fehler { grid-column: 2; margin-top: 0; }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

ul.wochentage { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
ul.wochentage li { display: flex; align-items: center; gap: 0.3rem; }
ul.wochentage label { font-weight: 400; margin: 0; }
ul.wochentage input { width: auto; }

ul.klassen-auswahl {
  list-style: none;
  margin: 0.4rem 0 0.25rem;
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem 1rem;
  background: var(--flaeche-dunkel);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}
ul.klassen-auswahl li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
ul.klassen-auswahl label { font-weight: 400; margin: 0; cursor: pointer; color: var(--text); }
ul.klassen-auswahl input { width: auto; margin: 0; }

/* --- Knöpfe --- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem; border-radius: var(--radius-klein);
  border: 1px solid var(--marke); background: var(--marke); color: var(--auf-akzent);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); color: var(--auf-akzent); }
.knopf--leise { background: var(--flaeche); color: var(--text); border-color: var(--linie); }
.knopf--leise:hover { background: var(--grund); color: var(--text); border-color: var(--text-leise); }
.knopf--gefahr { background: var(--flaeche); color: var(--rot); border-color: var(--rot); }
.knopf--gefahr:hover { background: var(--rot); color: var(--auf-akzent); }
.knopf--klein { padding: 0.3rem 0.6rem; font-size: 0.82rem; }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }

.knopfreihe { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* --- Hinweise --- */

.hinweis {
  padding: 0.8rem 1rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--flaeche);
  margin-bottom: 1rem; font-size: 0.92rem;
}
.hinweis--erfolg { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen-dunkel); }
.hinweis--fehler { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); }
.hinweis--warnung { background: var(--gelb-hell); border-color: var(--gelb); color: var(--gelb); }

/* Kasten für etwas, das abgetippt oder kopiert wird: der Befehl im
   Einrichtungshinweis, die Abo-Adresse des Kalenders. Beide müssen in
   schmalen Spalten bestehen, und beide vertragen keinen Umbruch – lieber
   scrollen, damit das Kopierte ganz bleibt. */
.befehl {
  max-width: 100%;
  margin: 0 0 0.6rem; padding: 0.55rem 0.7rem;
  border-radius: var(--radius-klein); border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text);
  overflow-x: auto; font-size: 0.86rem;
}
.einrichtung > p { margin: 0 0 0.6rem; }
.einrichtung > p:last-child { margin-bottom: 0; }
.einrichtung code,
.befehl code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}

.marke-status {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; border: 1px solid;
}
.status-frei { color: var(--gruen); border-color: var(--gruen); background: var(--gruen-hell); }
.status-gebucht { color: var(--rot); border-color: var(--rot); background: var(--rot-hell); }
.status-reserviert { color: var(--gelb); border-color: var(--gelb); background: var(--gelb-hell); }

/* --- Tabellen --- */

.tabelle-huelle { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.liste th, table.liste td {
  text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
table.liste th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-leise); }
table.liste tr:last-child td { border-bottom: none; }

table.tabelle--kompakt th, table.tabelle--kompakt td {
  padding: 0.5rem 0.55rem;
  font-size: 0.88rem;
  line-height: 1.35;
}
table.tabelle--kompakt th {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* Auf schmalen Screens stapeln sich Tabellenzeilen als Karten statt seitlich
   zu scrollen. Die Beschriftung kommt aus dem data-label der Zelle. */
@media (max-width: 760px) {
  table.als-karten thead { display: none; }
  table.als-karten, table.als-karten tbody {
    display: block; width: 100%;
  }
  table.als-karten tr {
    display: block;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.55rem;
  }
  table.als-karten tr > td:last-child { padding-bottom: 0; }
  table.als-karten td {
    display: block;
    padding: 0.25rem 0;
    border-bottom: none;
  }
  table.als-karten td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-leise);
    margin-bottom: 0.05rem;
  }
  table.als-karten td[hidden]::before,
  table.als-karten td.ohne-label::before { content: none; }
  /* Leere Zellen (Platzhalter „—") gar nicht erst anzeigen */
  table.als-karten td:empty { display: none; }
  /* Kurzinfo-Felder eng zusammenrücken */
  table.als-karten td br { display: none; }
}

/* --- Tagesplanung (Wochenraster) --- */

.woche {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 900px) { .woche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .woche { grid-template-columns: 1fr; } }

.wochentag {
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); padding: 0.55rem; min-height: 140px;
  display: flex; flex-direction: column;
}
.wochentag--heute { border-color: var(--gruen); border-width: 2px; }
.wochentag--vergangen { opacity: 0.55; }
.wochentag--feiertag { background: var(--rot-hell); }
.wochentag h3 { font-size: 0.82rem; margin-bottom: 0.4rem; }
.wochentag h3 small { display: block; font-weight: 400; color: var(--text-leise); }
.wochentag .feiertag-name { font-size: 0.72rem; color: var(--rot); margin-bottom: 0.3rem; }
.wochentag-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.wochentag-fuss {
  margin-top: auto;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--linie) 65%, transparent);
  font-size: 0.72rem;
  color: var(--text-leise);
  line-height: 1.35;
}

.plan-slot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.3rem;
  font-size: 0.78rem; padding: 0.2rem 0.35rem; border-radius: 4px;
  border-left: 3px solid var(--linie); margin-bottom: 3px; background: var(--grund);
  font-variant-numeric: tabular-nums;
}
.plan-slot--frei { border-left-color: var(--gruen); }
.plan-slot--gebucht { border-left-color: var(--rot); }
.plan-slot--reserviert { border-left-color: var(--gelb); }
.plan-slot--sperre {
  border-left: 3px solid var(--text-leise);
  background: color-mix(in srgb, var(--linie) 25%, var(--grund));
  font-size: 0.74rem;
}
.plan-slot--sperre-fsm {
  border-left-color: #3b82f6;
  background: color-mix(in srgb, #3b82f6 8%, var(--grund));
}
.plan-slot--fahrstundenblock {
  border-left-color: #2563eb;
  background: color-mix(in srgb, #2563eb 12%, var(--grund));
}
.plan-slot--sperre-urlaub {
  border-left-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 10%, var(--grund));
}
.badge-ganztaegig {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  background: color-mix(in srgb, #f59e0b 20%, transparent);
  color: #b45309;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 3px;
}
.badge-fsm {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  background: color-mix(in srgb, #3b82f6 20%, transparent);
  color: #1d4ed8;
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 3px;
}
.plan-slot .weg {
  border: none; background: none; color: var(--text-leise); cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0 2px;
}
.plan-slot .weg:hover { color: var(--rot); }
.plan-slot .name { font-size: 0.72rem; color: var(--text-leise); }

.leer { color: var(--text-leise); font-size: 0.85rem; font-style: italic; }

.kennzahlen { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.kennzahl .wert { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.kennzahl .beschriftung { font-size: 0.8rem; color: var(--text-leise); }

.zusammenfassung {
  background: var(--marke-hell); border: 1px solid color-mix(in srgb, var(--marke) 30%, transparent);
  border-radius: var(--radius-klein); padding: 0.9rem 1rem; margin-bottom: 1.25rem;
}
.zusammenfassung dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; font-size: 0.92rem; }
.zusammenfassung dt { color: var(--text-leise); }
.zusammenfassung dd { margin: 0; font-weight: 600; }

.htmx-request { opacity: 0.55; transition: opacity 120ms; }

/* --- Fehlerseiten --- */

.fehler-nummer {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-leise); margin: 0 0 0.3rem;
}