/*
 * Farben als semantische Variablen. Zwei Paletten, jede genau einmal: die
 * helle hier, die dunkle weiter unten unter [data-theme="dark"]. Welche gilt,
 * entscheidet das Attribut am <html>; es traegt immer "light" oder "dark".
 * "Automatisch" ist nur eine Einstellung der Oberflaeche und wird in theme.js
 * aufgeloest - sonst muesste die dunkle Palette als Media-Abfrage ein zweites
 * Mal dastehen, und jede spaetere Farbaenderung muesste an beiden Stellen
 * landen.
 */
:root {
  color-scheme: light;
  --grund: #f4f5f7;
  --flaeche: #ffffff;
  --feld-bg: #ffffff;
  --feld-rand: #d8dce2;
  --rand: #d8dce2;
  --text: #1f2933;
  --leise: #62707f;
  --akzent: #1f6feb;
  --warnung: #b8860b;
  --fehler: #c0392b;
  --ok: #1e7d44;

  /* Schichtfarben Hell. Die Paare sind so gewaehlt, dass die kleine
     Schichtschrift (0.75rem, fett) die 4.5:1 der WCAG AA erreicht. */
  --schicht-fs-bg: #fdeceb;
  --schicht-fs-text: #8a2c22;
  --schicht-ss-bg: #fdf0d8;
  --schicht-ss-text: #7a5600;
  --schicht-ns-bg: #e4e9f7;
  --schicht-ns-text: #26324f;
  --schicht-frei-bg: #eceff2;
  --schicht-frei-text: #5e6b79;

  /* Abwesenheitsarten. Jede Art hat ihren eigenen Ton, damit man sie auf
     einen Blick auseinanderhaelt. */
  --abw-urlaub-bg: #e4f2ea;
  --abw-urlaub-text: #17603a;
  --abw-krank-bg: #f3e8fb;
  --abw-krank-text: #5b2b8f;
  --abw-schulung-bg: #fdf0d8;
  --abw-schulung-text: #7a5600;
  --abw-sonstige-bg: #e6e9ed;
  --abw-sonstige-text: #3d444d;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --grund: #0b0f19;
  --flaeche: #151e2e;
  --feld-bg: #0e1626;
  --feld-rand: #334460;
  --rand: #26354a;
  --text: #f1f5f9;
  --leise: #94a3b8;
  --akzent: #38bdf8;
  --warnung: #fbbf24;
  --fehler: #f87171;
  --ok: #34d399;

  /* Schichtfarben Dunkel. Der Text fuer freie Tage ist absichtlich heller
     als --leise: auf #1e293b braucht die 0.75rem-Schrift 4.5:1. */
  --schicht-fs-bg: rgba(239, 68, 68, 0.22);
  --schicht-fs-text: #fca5a5;
  --schicht-ss-bg: rgba(245, 158, 11, 0.22);
  --schicht-ss-text: #fcd34d;
  --schicht-ns-bg: rgba(59, 130, 246, 0.22);
  --schicht-ns-text: #93c5fd;
  --schicht-frei-bg: #1e293b;
  --schicht-frei-text: #8b99ac;

  /* Abwesenheitsarten: dieselben Toene wie hell, nur auf dunklem Grund
     eingestellt. Die Flaechen sind durchscheinend, damit die Kartenlage
     darunter durchscheint. */
  --abw-urlaub-bg: rgba(52, 211, 153, 0.18);
  --abw-urlaub-text: #6ee7b7;
  --abw-krank-bg: rgba(167, 139, 250, 0.2);
  --abw-krank-text: #c4b5fd;
  --abw-schulung-bg: rgba(245, 158, 11, 0.2);
  --abw-schulung-text: #fcd34d;
  --abw-sonstige-bg: rgba(255, 255, 255, 0.08);
  --abw-sonstige-text: #cbd5e1;
}

/* Schichtklassen an die semantischen Variablen binden. Ohne !important,
   weil es die spaeter im Blatt liegenden gleichnamigen Regeln nicht mehr
   gibt - diealten sind entfernt, sonst wuerde hier der spaetere Eintrag
   gewinnen und das Dunkelschema wieder zur toten Regel werden. */
.tag.ss, .jahr-t.SS, .mon-zelle.SS { background: var(--schicht-ss-bg); color: var(--schicht-ss-text); }
.tag.ns, .jahr-t.NS, .mon-zelle.NS { background: var(--schicht-ns-bg); color: var(--schicht-ns-text); }
.tag.fs, .jahr-t.FS, .mon-zelle.FS { background: var(--schicht-fs-bg); color: var(--schicht-fs-text); }
.tag.f, .jahr-t.frei, .mon-zelle.frei { background: var(--schicht-frei-bg); color: var(--schicht-frei-text); }

/* Statuszeilen und Warnfarben im dunklen Schema */
html[data-theme="dark"] .unterbesetzt,
html[data-theme="dark"] tr.gruppe-zugang { background: rgba(239, 68, 68, 0.15); }
html[data-theme="dark"] .offen { background: rgba(245, 158, 11, 0.15); }
html[data-theme="dark"] tr.abwesend { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] tr.team-zeile.offen { background: rgba(56, 189, 248, 0.12); }
html[data-theme="dark"] button.gefaehrlich { border-color: rgba(248, 113, 113, 0.4); }
html[data-theme="dark"] button.gefaehrlich:hover { background: rgba(248, 113, 113, 0.15); }

* { box-sizing: border-box; }

/* Das hidden-Attribut muss stärker sein als die display-Regeln weiter unten. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--grund);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Bildlaufleiste. Die Farben kommen aus den Variablen und kippen dadurch von
   selbst mit dem Schema mit. scrollbar-width gehoert dazu, weil Safari
   scrollbar-color uebersieht; der feste Platz verhindert, dass die Seite
   springt, wenn eine Karte hoeher oder niedriger wird. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--leise) var(--rand);
  scrollbar-gutter: stable;
}

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; color: var(--leise); font-weight: 600; }

/* Umbruch von Ueberschriften und Tabellenkoepfen ausgleichen. Bewusst nicht
   global: "balance" ist eine Binaersuche und kostet bei vielen th messbar
   Zeit, deshalb nur dort, wo es etwas zu loesen gibt. */
h1, h2, h3, th { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---- Anmeldung ---- */

.anmeldebildschirm {
  /* Beide Angaben nacheinander: kennt der Browser dvh nicht, greift 100vh.
   * Ohne die erste Zeile waere min-height dort gar nicht gesetzt und die
   * Karte stuende oben statt mittig. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 1.75rem;
  width: 100%;
  max-width: 24rem;
  /* Zwei Lagen statt einer: die flache zeichnet die Kante, die zweite hebt
     die Karte vom Grund ab. */
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .05);
}

/* Auf dunklem Grund liest sich ein Schatten schlecht - dort nur eine zarte
   Lage, sonst verschwimmt die Karte. */
html[data-theme="dark"] .karte { box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

label { display: block; margin-bottom: 1rem; }
label span { display: block; font-size: .8rem; color: var(--leise); margin-bottom: .3rem; }

input, select, textarea {
  width: 100%;
  padding: .7rem .8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background-color: var(--feld-bg);
  border: 1px solid var(--feld-rand);
  border-radius: 8px;
  box-sizing: border-box;
}

input {
  letter-spacing: .08em;
}

select {
  letter-spacing: normal;
  cursor: pointer;
}

select option {
  background-color: var(--flaeche);
  color: var(--text);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

/* ---- Moderne Formularvalidierung (:user-invalid / :user-valid) ---- */

input:user-invalid, select:user-invalid {
  border-color: var(--fehler) !important;
  outline-color: var(--fehler) !important;
  box-shadow: 0 0 0 1px var(--fehler);
}

input:user-valid:not(:placeholder-shown), select:user-valid {
  border-color: var(--ok);
}

button {
  width: 100%;
  padding: .8rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--akzent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

button:disabled { opacity: .55; cursor: default; }
button.klein { width: auto; padding: .35rem .7rem; font-size: .8rem; background: transparent; color: var(--leise); border: 1px solid var(--rand); }
button.zweit {
  width: auto;
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand);
  font-weight: 500;
  white-space: nowrap;
}

/* Deutsches Datumsfeld: Text in TT.MM.JJJJ plus Kalenderknopf */
.datumsfeld { display: inline-flex; align-items: center; gap: .3rem; }
.datums-text {
  width: 7.5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--feld-rand);
  border-radius: 8px;
  background-color: var(--feld-bg);
  color: var(--text);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.datumsfeld button.klein { padding: .5rem .6rem; }
tr.team-detail .datums-text { padding: .25rem .35rem; font-size: .8rem; width: 7.5rem; }

/* Breite Tabellen (Dienstplan) waagerecht scrollbar halten. */
.breit { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.breit table { min-width: 46rem; }

tr.team-detail td > table { min-width: 0; }

.fehler { color: var(--fehler); font-size: .85rem; margin: .8rem 0 0; }
.hinweis { color: var(--leise); font-size: .9rem; margin: 0 0 1.2rem; }

/* ---- Rahmen ---- */

header {
  display: flex;
  align-items: center;
  /* Umbruch erlaubt: auf dem Telefon ist vor allem der lange Name links
     schuld, dass die Kopfzeile sonst aus allen Fugen gerät. */
  flex-wrap: wrap;
  gap: .75rem;
  padding: .7rem 1rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Groesse und Abstand festgenagelt: als h1 wuerde die Wortmarke sonst die
   h1-Regel erben (1.4rem und 1rem unterhalb) und die Kopfzeile springen. */
.marke { font-weight: 700; font-size: 1rem; margin: 0; }
.wer { margin-left: auto; min-width: 0; font-size: .85rem; color: var(--leise); }

nav {
  display: flex;
  gap: .25rem;
  padding: .5rem 1rem;
  overflow-x: auto;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 3.1rem;
  z-index: 4;
}

nav button {
  width: auto;
  white-space: nowrap;
  background: transparent;
  color: var(--leise);
  font-weight: 500;
  padding: .45rem .8rem;
  border-radius: 20px;
}

nav button[aria-current="page"] { background: var(--akzent); color: #fff; }

main { padding: 1rem; max-width: 60rem; margin: 0 auto; }

/* ---- Karten und Tabellen ---- */

.abschnitt {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.zeile { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.zeile.gleich { justify-content: space-between; }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
/* "anywhere" und nicht "break-word": nur "anywhere" verkleinert auch die
   Mindestbreite einer Zelle. Sonst zwingt ein langes Wort die Tabelle ueber
   den Rand der Karte hinaus - auf dem Telefon zuerst. */
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--rand); }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600; }
/* Sortierbare Spalten: der Knopf sieht aus wie eine Ueberschrift und faellt
   nur beim Darueberfahren auf. Die aktive Spalte traegt die Richtung. */
th button.sortknopf {
  width: auto;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--rand);
  border-radius: 0;
}
th button.sortknopf:hover { color: var(--text); border-bottom-color: currentColor; }
th button.sortknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
th.sorbiert button.sortknopf { color: var(--text); border-bottom: 0; }
th.sorbiert { color: var(--text); }
tr:last-child td { border-bottom: 0; }
td.rechts, th.rechts { text-align: right; }

/* ---- Zwei Darstellungen fuer enge und breite Fenster -------------------
   Die Liste der offenen Vertretungen passt auf dem Telefon nicht mehr in
   ihre Karte. Statt sie zu stauchen, gibt es sie zweimal: als Tabelle fuer
   breite Fenster und als Block fuer schmale. Beide stehen im Dokument,
   ausgeblendet wird eine davon - so greift es auch beim Drehen sofort.
   Unterhalb von 48rem passt die Tabelle nicht mehr; dort gewinnen die Karten. */
.nur-schmal { display: none; }
@media (max-width: 47.99rem) {
  .nur-breit { display: none; }
  .nur-schmal { display: block; }
}

.vk {
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--flaeche);
  padding: .7rem .8rem;
  margin-bottom: .5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.vk-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.vk-fuss { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.vk-zeile { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.pflicht td { font-weight: 600; }
.unterbesetzt { background: #fdf0ee; }
.offen { background: #fdf8e7; }
/* Abwesenheitstage in der eigenen Liste: zurueckgenommen, nicht erledigt. */
tr.abwesend td { color: var(--leise); }
tr.abwesend { background: #f2f3f5; }

/* Protokoll: die Gruppe steht als schmaler Streifen links. Nur der Zugang
   faellt farblich auf - dort schaut man zuerst hin. */
tr.gruppe-zugang td:first-child { border-left-color: #b42318; }
tr.gruppe-stamm td:first-child { border-left-color: #b45309; }
tr.gruppe-plan td:first-child { border-left-color: #0e7490; }
tr.gruppe-vertretung td:first-child { border-left-color: #6d28d9; }
tr.gruppe-abwesenheit td:first-child { border-left-color: #15803d; }
tr.gruppe-betrieb td:first-child { border-left-color: #334155; }
tr.gruppe-unbekannt td:first-child { border-left-color: #94a3b8; }
tr.gruppe-zugang { background: #fdf3f2; }
/* Der Detailtext ist der lange Teil; er soll umbrechen, nicht die Tabelle
   breit machen. */
td.einzelheiten { max-width: 26rem; overflow-wrap: anywhere; }

.marke-klein {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  background: #e6e9ed;
  color: var(--leise);
}
.marke-klein.meister { background: #e2edfb; color: #17458f; }
.marke-klein.vertreter { background: #e4f2ea; color: #17603a; }
.marke-klein.leitstand { background: #fdf0d8; color: #7a5600; }
.marke-klein.laeufer { background: #eee7fa; color: #4c2f8f; }
.marke-klein.kran { background: #e2edfb; color: #17458f; }
.marke-klein.springer { background: #e6e9ed; }

.plus { color: var(--ok); }
.minus { color: var(--fehler); }
.leise { color: var(--leise); }

/* Verbot im Formular: ruhig, aber nicht so leise, dass man es ueberliest.
   Wird bei jedem Eintrag gezeigt, deshalb kein Warnrot - Rot bei jedem
   Urlaubseintraegeignen wuerde den Blick genau dort stumpf machen. */
.datenschutz {
  margin: .25rem 0 0;
  font-size: .85rem;
  color: var(--text);
  border-left: 3px solid #b45309;
  padding-left: .5rem;
}

.tag { display: inline-block; padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 700; }
/* Die Farben der .tag-Schichtklassen kommen weiter oben aus den Variablen. */

/* ---- Jahresplan ----------------------------------------------------------
   Zwei Monatsbaender untereinander. Der Tag traegt die Tageszahl, das
   Schichtkuerzel und darunter die Stunden. Eine Abwesenheit ersetzt das
   Kuerzel und laesst die Stunden weg, weil es keine gab. */
/* Ein Monat pro Zeile ueber die volle Breite. Die Zellen sind 26 Pixel
   breit, damit auch der laengste Monat ohne Querlauf hineinpasst. */
.jahr-woche, .jahr-bes, .jahr-bandzeile { display: flex; gap: 2px; position: relative; }
.jahr-woche { margin-bottom: 2px; }
.jahr-breit h3 { margin: .9rem 0 .3rem; font-size: .95rem; }
.jahr-breit h3:first-child { margin-top: 0; }
.jahr-bes-label { font-size: .75rem; margin: .6rem 0 .3rem; }
.jahr-bes { margin-bottom: .2rem; }
.jahr-wochentage { display: flex; gap: 2px; margin-bottom: 2px; }
.jahr-wochentage span { flex: 0 0 26px; text-align: center; font-size: .65rem; font-weight: 700; color: var(--leise); }
/* Feste Grundgroesse ueberall. Ohne das stauchen sich die Zellen auf die
   Kartenbreite zusammen, statt zu ueberlaufen - und die Tage driften dann
   gegenueber der Wochentagszeile nach links. */
.jahr-t {
  flex: 0 0 26px; min-height: 40px; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .65rem; line-height: 1.25;
}
.jahr-t em { font-style: normal; font-size: .55rem; opacity: .7; }
.jahr-t b { font-size: .72rem; font-weight: 800; }
/* Die Schichtfarben der .jahr-t-Klassen kommen aus den Variablen oben. */
/* Wochenrhythmus: nach dem So beginnt wieder Mo. */
.jahr-t.wochenstart { margin-left: 6px; }
/* Der Rand eines Monats: derselbe Tag, im entsorgten Monat genauso gross und
   farbig wie im eigenen. Nur die Beschriftung weicht ab. */
.jahr-t.rand { border: 1px dashed var(--rand); }
/* Abwesenheitskuerzel. Jede Art hat ihre eigene Farbe, damit man sie auf
   einen Blick auseinanderhaelt - deshalb auch fuer den dunklen Modus eigene
   Variablen statt fest verdrahteter Toene. */
.jahr-t.weg { font-weight: 800; }
.jahr-t.weg[data-code="U"], .jahr-t.weg[data-code="SU"] { background: var(--abw-urlaub-bg); color: var(--abw-urlaub-text); }
.jahr-t.weg[data-code="K"] { background: var(--abw-krank-bg); color: var(--abw-krank-text); }
.jahr-t.weg[data-code="A"] { background: var(--abw-schulung-bg); color: var(--abw-schulung-text); }
.jahr-t.weg[data-code="FA"], .jahr-t.weg[data-code="UU"] { background: var(--abw-sonstige-bg); color: var(--abw-sonstige-text); }
.jahr-t.knapp { box-shadow: inset 0 -3px 0 #c2410c; }

/* Der laengste Monat hat mit den Randtagen bis zu 42 Zellen. Die passen
   nicht in die Kartenbreite, ohne unleserlich zu werden - deshalb laesst der
   Jahresbereich waagerecht mitlaufen. Waagerecht und senkrecht zusammen,
   damit ein Durchgang fuer alle Monate gilt. */
.jahr-breit { max-height: 40rem; overflow: auto; padding-right: .3rem; }
.jahr-bandzeile { align-items: center; min-height: 1.1rem; margin-bottom: 2px; }
.jahr-band {
  position: absolute; height: 1.1rem; border-radius: 3px; display: flex; align-items: center;
  padding: 0 .4rem; color: #fff; font-size: .65rem; font-weight: 700;
  white-space: nowrap; overflow: hidden;
}
.jahr-band.anfang { border-radius: 3px 0 0 3px; }
.jahr-band.ende { border-radius: 0 3px 3px 0; }
.jahr-bes span {
  flex: 0 0 26px; text-align: center; font-size: .65rem; color: var(--leise);
  font-variant-numeric: tabular-nums;
}
.jahr-bes span.knapp { color: #c2410c; font-weight: 800; }
.jahr-legende { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .75rem; color: var(--leise); }
.jahr-legende b { color: var(--text); }

/* Ein Anhakfeld mitBeschriftung daneben, damit es klickbar bleibt. */
label.hakenfeld { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--text); }
label.hakenfeld input[type="checkbox"] { width: auto; margin: 0; }
/* Der Kalender-Haken sitzt schmal neben dem Knopf und soll ihn nicht
   wegschieben. */
/* Kästchen im Bestätigungsfenster: es steht eine Zeile über den Knöpfen,
   deshalb etwas Luft darüber und darunter. */
.dialog-hinweis { margin: .15rem 0 .6rem; font-size: .8rem; }
.dialog-fenster > label.hakenfeld { margin-top: .8rem; }

/* Die Vorgaenge des Monats im Klartext unter dem Kalender. */
.monat-vorgaenge { margin: .6rem 0 .2rem; display: flex; flex-direction: column; gap: .2rem; }
.monat-vorgaenge p { margin: 0; display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.vorgang-punkt { width: .7rem; height: .7rem; border-radius: 2px; flex: none; align-self: center; }

/* ---- Vorgaenge anlegen: Felder nebeneinander -------------------- */
.vorgang-felder {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-start;
}
.vorgang-felder > label {
  display: flex; flex-direction: column; gap: .2rem; flex: 1 1 10rem;
  justify-content: flex-start;
  font-size: .8rem; color: var(--leise);
}
/* Der Haken gehoert unten an die Basis der anderen Felder, nicht nach oben. */
.vorgang-felder > label.hakenfeld { justify-content: flex-end; }
.vorgang-felder .datums-text { width: 100%; box-sizing: border-box; }
.vorgang-felder > label input[type="text"],
.vorgang-felder > label select { width: 100%; box-sizing: border-box; }
.vorgang-felder .hakenfeld { align-self: center; }
/* Farbe rückt an Bezeichnung heran. */
.vorgang-felder > label:nth-child(3),
.vorgang-felder > label:nth-child(4) { flex: 0 0 11rem; }

/* ---- Der grosse Monatskalender -------------------------------------------
   Sieben Spalten, bis zu sechs Zeilen, und Platz fuer mehr als ein Kuerzel:
   Tageszahl, Schicht oder Abwesenheit, Stunden beziehungsweise das Wort der
   Abwesenheit, die Zahl der Anwesenden im eigenen Team. */
/* Kopfzeile und Wochen bekommen dieselbe Spaltenangabe und stehen beide in
   einem gemeinsamen, seitlich scrollbaren Bereich. Solange sich jeder Grid
   selbst an seinem Inhalt misst, ist die Kopfzeile sieben schmale Spalten und
   der Tag sieben breite - dann steht der Tag nicht mehr darunter. */
.mon-bereich { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mon-wochentage {
  display: grid;
  grid-template-columns: repeat(7, minmax(5.5rem, 1fr));
  gap: 3px;
  margin-bottom: 3px;
}
.mon-wochentage span { text-align: center; font-size: .7rem; font-weight: 700; color: var(--leise); }
/* Jede Woche ein eigener Block: Zeile 1 die Tage, Zeile 2 das Vorgangsband.
   Nur so liegt das Band unter genau seinen Tagen. */
.mon-gitter { display: flex; flex-direction: column; gap: 3px; }
.mon-woche { display: grid; grid-template-columns: repeat(7, minmax(5.5rem, 1fr)); gap: 2px 3px; }
.mon-zelle {
  min-height: 4.6rem; border-radius: 4px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: .7rem; line-height: 1.25; text-align: center; padding: 0 .2rem;
}
.mon-zelle.leer { background: transparent; }
.mon-zelle .tageszahl { position: absolute; top: 3px; left: 5px; font-size: .72rem; font-weight: 700; opacity: .85; }
.mon-zelle .schicht { font-size: .78rem; font-weight: 700; }
.mon-zelle .zusatz { font-size: .62rem; opacity: .8; }
.mon-zelle .personen { font-size: .62rem; font-weight: 700; opacity: .8; }
.mon-zelle .personen.knapp { color: #c2410c; opacity: 1; }
.mon-zelle .vertretungsvermerk { font-size: .62rem; font-weight: 800; color: #4c1d95; }
.mon-zelle .feiertag { position: absolute; top: 2px; right: 4px; font-size: .62rem; }
/* Die Schicht- und die Freitagsfarbe holen sich die Variablen weiter oben
   bei :root. Hier stand ein zweites Mal eine hart verdrahtete Fassung, und
   weil sie spaeter im Blatt steht, gewann sie - im dunklen Schema blieben
   die Zellen dann hell, und "frei" kam auf 1.6:1 Kontrast. */
.mon-zelle.K { background: var(--abw-krank-bg); color: var(--abw-krank-text); }
.mon-zelle.U, .mon-zelle.SU { background: var(--abw-urlaub-bg); color: var(--abw-urlaub-text); }
.mon-zelle.A { background: var(--abw-schulung-bg); color: var(--abw-schulung-text); }
.mon-zelle.FA, .mon-zelle.UU { background: var(--abw-sonstige-bg); color: var(--abw-sonstige-text); }
.mon-zelle.knapp { box-shadow: inset 0 -3px 0 #c2410c; }

/* Die Zellen sind jetzt auch im dunklen Schema dunkel. Die beiden Akzentfarben
   darin waren auf hellen Grund gestimmt und muessen mitkippen. */
html[data-theme="dark"] .mon-zelle.knapp { box-shadow: inset 0 -3px 0 #fdba74; }
html[data-theme="dark"] .mon-zelle .personen.knapp { color: #fdba74; }
html[data-theme="dark"] .mon-zelle .vertretungsvermerk { color: #c4b5fd; }
/* Eigene Vertretung: ein Punkt am Rand. Die Zeile darunter nennt Team und
   Zeit, der Punkt macht den Tag auch beim Ueberfliegen kenntlich. */
.mon-zelle.vertretung::before {
  content: ''; position: absolute; top: 4px; right: 4px;
  width: .4rem; height: .4rem; border-radius: 50%; background: #6d28d9;
}
.mon-zelle.anklickbar { cursor: pointer; }
.mon-zelle.anklickbar:hover { outline: 2px solid var(--akzent); }
.mon-detail { margin-top: .6rem; }
/* Das Bandstueck liegt in Zeile 2 seiner Woche, unter genau seinen Tagen. */
.mon-band {
  grid-row: 2; height: 1.2rem; border-radius: 4px; display: flex;
  align-items: center; padding: 0 .5rem; color: #fff; font-size: .7rem;
  font-weight: 700; white-space: nowrap; overflow: hidden;
}

.meldung {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--text);
  /* Nicht #fff: die Box ist invertiert, also muss die Schrift die
     Gegenfarbe des jeweiligen Schemas nehmen. Festes Weiss ergibt im
     dunklen Schema Weiss auf Weiss. */
  color: var(--grund);
  padding: .7rem 1.1rem;
  border-radius: 8px;
  font-size: .9rem;
  z-index: 20;
  max-width: 90vw;
}
.meldung.fehler { background: var(--fehler); }

/* Pulldown in der Mitarbeiterliste */
.klein-auswahl {
  width: 100%;
  max-width: 11rem;
  padding: .35rem .45rem;
  font-size: .85rem;
  border: 1px solid var(--feld-rand);
  border-radius: 6px;
  background-color: var(--feld-bg);
  color: var(--text);
}

/* Eingabefeld in der Mitarbeiterliste */
.klein-feld {
  width: 100%;
  max-width: 10rem;
  padding: .35rem .45rem;
  font-size: .85rem;
  letter-spacing: 0;
  border: 1px solid var(--feld-rand);
  border-radius: 6px;
  background-color: var(--feld-bg);
  color: var(--text);
}

button.gefaehrlich { color: var(--fehler); border-color: #e6c4bf; }
button.gefaehrlich:hover { background: #fdf0ee; }

tr.archiviert td { opacity: .55; }

/* Besetzung in der Meldungsliste: Rollen mit Namen untereinander */
.besetzung { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }

/* Teamzeile im Dienstplan: aufklappbar */
tr.team-zeile td:first-child { white-space: nowrap; }

.team-knopf {
  width: auto;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  padding: .25rem .5rem;
  border: 1px solid transparent;
  text-align: left;
}

.team-knopf:hover { border-color: var(--rand); background: var(--flaeche); }
tr.team-zeile.offen { background: #eef3fb; }
tr.team-zeile.offen .team-knopf { border-color: #b9cdf0; }

tr.team-detail > td {
  background: #f7f9fc;
  border-left: 3px solid #b9cdf0;
  padding: .6rem .8rem;
}

tr.team-detail table { background: transparent; }

tr.team-detail .name-zelle { min-width: 12rem; }
tr.team-detail .name-zelle .name { display: block; font-weight: 600; }
tr.team-detail .name-zelle .klein { display: block; font-size: .78rem; }

tr.team-detail td.status {
  font-size: .82rem;
  white-space: nowrap;
  font-weight: 500;
}
tr.team-detail td.status.anwesend { color: #17603a; }
tr.team-detail td.status.frei { color: #9aa5b1; }
tr.team-detail td.status.weg { color: var(--fehler); }
tr.team-detail td.status.vertretung { color: #4c2f8f; font-weight: 600; }

/* Grund und Stichtag erscheinen in der Zeile, sobald ein anderes Team
   gewaehlt ist. */
.wechsel-feld {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-top: .4rem;
  padding: .4rem;
  background: #fdf8e7;
  border: 1px solid #ecd9a8;
  border-radius: 6px;
}

.wechsel-feld input {
  width: 100%;
  padding: .3rem .4rem;
  font-size: .8rem;
  border: 1px solid var(--feld-rand);
  border-radius: 5px;
  background-color: var(--feld-bg);
  color: var(--text);
  letter-spacing: 0;
}

form.feld { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
form.feld label { margin-bottom: 0; }
form.feld input, form.feld select { padding: .5rem .6rem; font-size: .95rem; letter-spacing: 0; }
form.feld button { width: auto; padding: .5rem 1rem; }
form.feld select { border: 1px solid var(--feld-rand); border-radius: 8px; background-color: var(--feld-bg); color: var(--text); }

.lade { color: var(--leise); padding: 2rem; text-align: center; }

/* ---- Bestaetigungsfenster (HTML5 Dialog & Top Layer) ---- */

dialog.dialog-fenster {
  background: var(--flaeche);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 1.5rem;
  width: calc(100% - 2rem);
  max-width: 26rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
  margin: auto;
  transition: opacity .2s ease, transform .2s ease, display .2s allow-discrete, overlay .2s allow-discrete;
  opacity: 0;
  transform: scale(.95);
}

dialog.dialog-fenster[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  dialog.dialog-fenster[open] {
    opacity: 0;
    transform: scale(.95);
  }
}

dialog::backdrop {
  background: rgba(15, 23, 42, .65);
  /* Der Praefix fehlt in Safari bis Version 18 - ohne ihn bleibt der
     Dialog auf aelteren iPhones ohne Weichzeichnung, nicht ohne Funktion. */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: opacity .2s ease, display .2s allow-discrete, overlay .2s allow-discrete;
  opacity: 0;
}

dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.dialog-fenster,
  dialog.dialog-fenster::backdrop {
    transition: none !important;
  }
}

.dialog-fenster h2 { margin-bottom: .9rem; }
.dialog-fenster p { margin: .35rem 0; font-size: .95rem; }

.dialog-paar { display: flex; justify-content: space-between; gap: 1rem; }
.dialog-paar span:first-child { flex: 0 0 5.5rem; }
.dialog-paar span:last-child { text-align: right; font-weight: 600; }

.dialog-knoepfe { display: flex; gap: .6rem; margin-top: 1.2rem; }
.dialog-knoepfe button { flex: 1; }

/* ---- View Transitions (PWA Animationen) ---- */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .18s;
  animation-timing-function: ease;
}

/* Monatswechsel: Vorwaerts schiebt nach links heraus, Neues kommt von rechts */
html.vt-vor::view-transition-old(root) {
  animation-name: slide-links-raus;
}
html.vt-vor::view-transition-new(root) {
  animation-name: slide-rechts-rein;
}

/* Monatswechsel: Rueckwaerts schiebt nach rechts heraus, Neues kommt von links */
html.vt-zurueck::view-transition-old(root) {
  animation-name: slide-rechts-raus;
}
html.vt-zurueck::view-transition-new(root) {
  animation-name: slide-links-rein;
}

@keyframes slide-links-raus { to { transform: translateX(-40px); opacity: 0; } }
@keyframes slide-rechts-rein { from { transform: translateX(40px); opacity: 0; } }
@keyframes slide-rechts-raus { to { transform: translateX(40px); opacity: 0; } }
@keyframes slide-links-rein { from { transform: translateX(-40px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}