/* Schichtplanung Konsolenkost — gemeinsames Stylesheet.
   Mobil zuerst: die Grundregeln gelten für das Handy, alles Breitere
   kommt über Media Queries dazu. Keine Web-Schriften, keine externen
   Ressourcen — die CSP lässt ohnehin nur 'self' zu. */

/* ── Farben ──────────────────────────────────────────────────────────
   Alle Farben laufen über Variablen — im Stylesheet steht unterhalb
   dieses Blocks kein einziger fester Farbwert mehr. Nur so lässt sich
   die Oberfläche an einer Stelle umschalten.

   Drei Zustände:
     kein data-thema        → dem Betriebssystem folgen
     data-thema="hell"      → hell erzwungen
     data-thema="dunkel"    → dunkel erzwungen
   Gesetzt wird das Attribut von js/thema.js, noch bevor der Body
   gezeichnet wird — sonst blitzt beim Laden kurz die helle Fassung auf. */
:root {
  --ink:        #16202e;    /* Fließtext                     */
  --ink-leise:  #5b6b7f;    /* Zweitrangiges, Beschriftungen */
  --ink-still:  #8b99aa;    /* Hinweise, leere Zustände      */
  --flaeche:    #ffffff;    /* Karten, Kopfleiste, Dialoge   */
  --grund:      #f2f5f8;    /* Seitenhintergrund             */
  --rand:       #dde4ec;
  --rand-stark: #c3cedb;

  --akzent:       #1d5fa8;
  --akzent-hover: #164a83;
  --auf-akzent:   #ffffff;  /* Text auf gefüllter Akzentfläche */
  --akzent-leise: #e8f0fa;
  --akzent-rand:  #c3daf2;
  --akzent-text:  #144876;

  --gut:           #17795e;
  --gut-leise:     #e3f4ee;
  --gut-rand:      #bfe3d6;
  --gut-text:      #0f5a45;
  --warn:          #a4620b;
  --warn-leise:    #fdf0dc;
  --warn-rand:     #ecd3a5;
  --warn-text:     #7d4a08;
  --schlecht:      #b3261e;
  --schlecht-leise:#fbe9e7;
  --schlecht-rand: #f0c8c4;
  --schlecht-text: #8c1d17;

  --toast-grund: #16202e;
  --toast-text:  #ffffff;
  --schleier:    rgba(22,32,46,.45);

  --radius: 10px;
  --schatten: 0 1px 2px rgba(22,32,46,.06), 0 4px 12px rgba(22,32,46,.06);
  --schatten-dialog: 0 12px 40px rgba(22,32,46,.24);
  --tippziel: 44px;          /* Mindestgröße für Finger */

  color-scheme: light;       /* färbt Datums- und Zeitfelder mit */
}

/* Dunkle Fassung. Bewusst kein reines Schwarz und kein reines Weiß —
   #000 auf #fff ist auf dunklem Grund unangenehm hart. Die Akzent- und
   Statusfarben sind aufgehellt, weil die hellen Töne von oben auf
   dunklem Grund nicht mehr lesbar wären. Die Flächen dahinter werden
   umgekehrt sehr dunkel, damit der Kontrast erhalten bleibt. */
:root[data-thema="dunkel"] {
  --ink:        #e6edf5;
  --ink-leise:  #9aa8bb;
  --ink-still:  #6f7d90;
  --flaeche:    #161d27;
  --grund:      #0f141b;
  --rand:       #29323f;
  --rand-stark: #3c4859;

  --akzent:       #62a8f2;
  --akzent-hover: #8cc0f7;
  --auf-akzent:   #0d1219;  /* dunkler Text auf hellem Blau */
  --akzent-leise: #16283b;
  --akzent-rand:  #27455f;
  --akzent-text:  #a8cef8;

  --gut:           #45c79c;
  --gut-leise:     #122f28;
  --gut-rand:      #1f4d41;
  --gut-text:      #7fdcbc;
  --warn:          #dfa44e;
  --warn-leise:    #32250f;
  --warn-rand:     #543f1c;
  --warn-text:     #edc07e;
  --schlecht:      #f0776b;
  --schlecht-leise:#371a1a;
  --schlecht-rand: #5a2a28;
  --schlecht-text: #f5a49b;

  --toast-grund: #e6edf5;
  --toast-text:  #0f141b;
  --schleier:    rgba(0,0,0,.62);

  --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
  --schatten-dialog: 0 12px 40px rgba(0,0,0,.6);

  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--grund);
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; }

a { color: var(--akzent); }

/* ── Kopfleiste ──────────────────────────────────────────────────── */
.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 20;
}
.kopf-innen {
  max-width: 1400px; margin: 0 auto;
  padding: .6rem .9rem;
  display: flex; align-items: center; gap: .75rem;
}
.marke { font-weight: 650; font-size: 1rem; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.marke span { color: var(--ink-still); font-weight: 400; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.wer { font-size: .82rem; color: var(--ink-leise); text-align: right; line-height: 1.25; min-width: 0; }
.wer b { display: block; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Auf schmalen Geräten wird die Kopfzeile sonst breiter als der Schirm
   und die ganze Seite lässt sich seitwärts schieben. Also Beiwerk weg:
   der Zusatz „Konsolenkost" und die Rollenbezeichnung. */
@media (max-width: 560px) {
  .kopf-innen { padding: .6rem .7rem; gap: .5rem; }
  .marke span { display: none; }
  .wer span { display: none; }
  /* Der Name darf kürzen, der Tool-Name nicht — ein abgeschnittenes
     „Schichtplan…" sieht nach Fehler aus, ein gekürzter Personenname
     nicht. Seit der Hell/Dunkel-Knopf dazugekommen ist, wird es hier eng. */
  .marke { font-size: .95rem; flex: 0 0 auto; }
  .wer { flex: 1 1 auto; }
  .wer b { max-width: 6.5rem; }
  /* „KW 36 · 31.08. – 06.09.2026" bricht sonst mitten im Datum um */
  .wochenleiste .titel b { font-size: .92rem; }
}

.navi {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.navi-innen { max-width: 1400px; margin: 0 auto; padding: 0 .9rem; display: flex; gap: .25rem; }
.navi a {
  padding: .7rem .8rem; font-size: .9rem; text-decoration: none;
  color: var(--ink-leise); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.navi a:hover { color: var(--ink); }
.navi a.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }

main { max-width: 1400px; margin: 0 auto; padding: 1rem .9rem 4rem; }

/* ── Karten ──────────────────────────────────────────────────────── */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1rem;
  margin-bottom: .9rem;
}
.karte-kopf {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: -.25rem 0 .8rem;
}
.karte-kopf h2 { margin: 0; }
.karte-kopf .rechts { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ── Schalter ────────────────────────────────────────────────────── */
button, .schalter {
  font: inherit; font-size: .92rem; font-weight: 550;
  min-height: var(--tippziel);
  padding: .55rem 1rem;
  border: 1px solid var(--rand-stark);
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
button:hover:not(:disabled) { background: var(--grund); }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}
button.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
button.haupt:hover:not(:disabled) { background: var(--akzent-hover); }
button.gefahr { color: var(--schlecht); border-color: var(--schlecht-rand); }
button.gefahr:hover:not(:disabled) { background: var(--schlecht-leise); }
button.klein { min-height: 34px; padding: .3rem .65rem; font-size: .82rem; font-weight: 500; }
button.blank { border-color: transparent; background: transparent; }
button.blank:hover:not(:disabled) { background: var(--grund); }

/* ── Formulare ───────────────────────────────────────────────────── */
label { display: block; font-size: .85rem; font-weight: 550; color: var(--ink-leise); margin-bottom: .3rem; }
input, select, textarea {
  font: inherit; width: 100%;
  min-height: var(--tippziel);
  padding: .5rem .65rem;
  border: 1px solid var(--rand-stark);
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--ink);
}
textarea { min-height: 4.5rem; resize: vertical; }
.feld { margin-bottom: .8rem; }
.feld-hinweis { font-size: .8rem; color: var(--ink-still); margin-top: .25rem; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }

/* ── Meldungen ───────────────────────────────────────────────────── */
.meldung {
  padding: .65rem .8rem; border-radius: 8px; font-size: .88rem;
  margin-bottom: .8rem; border: 1px solid transparent;
}
.meldung.fehler { background: var(--schlecht-leise); border-color: var(--schlecht-rand); color: var(--schlecht-text); }
.meldung.gut    { background: var(--gut-leise);      border-color: var(--gut-rand);      color: var(--gut-text); }
.meldung.hinweis{ background: var(--akzent-leise);   border-color: var(--akzent-rand);   color: var(--akzent-text); }
.meldung.warnung{ background: var(--warn-leise);     border-color: var(--warn-rand);     color: var(--warn-text); }
.meldung:empty { display: none; }

#toast {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(1rem);
  background: var(--toast-grund); color: var(--toast-text); padding: .7rem 1.1rem; border-radius: 8px;
  font-size: .9rem; box-shadow: var(--schatten); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  max-width: calc(100vw - 2rem); text-align: center;
}
#toast.sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.fehler { background: var(--schlecht); }

/* ── Marken / Etiketten ──────────────────────────────────────────── */
.marker {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .01em;
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--grund); color: var(--ink-leise); border: 1px solid var(--rand);
  white-space: nowrap;
}
.marker.gut      { background: var(--gut-leise);      color: var(--gut);      border-color: var(--gut-rand); }
.marker.warn     { background: var(--warn-leise);     color: var(--warn);     border-color: var(--warn-rand); }
.marker.schlecht { background: var(--schlecht-leise); color: var(--schlecht); border-color: var(--schlecht-rand); }
.marker.akzent   { background: var(--akzent-leise);   color: var(--akzent);   border-color: var(--akzent-rand); }
.punkt { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }

/* ── Wochennavigation ────────────────────────────────────────────── */
.wochenleiste {
  display: flex; align-items: center; gap: .5rem;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .5rem; margin-bottom: .9rem;
  box-shadow: var(--schatten);
}
.wochenleiste .titel { flex: 1; text-align: center; min-width: 0; }
.wochenleiste .titel b { display: block; font-size: 1rem; }
.wochenleiste .titel small { color: var(--ink-leise); font-size: .8rem; }
.wochenleiste button { min-width: var(--tippziel); padding: .5rem .7rem; }

/* ── Tageskarten (Mitarbeitersicht) ──────────────────────────────── */
.tagesliste { display: grid; gap: .6rem; }
.tag {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
  overflow: hidden;
}
.tag.heute { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent), var(--schatten); }
.tag.vergangen { opacity: .62; }
.tag-kopf {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid transparent;
}
.tag.gefuellt .tag-kopf { border-bottom-color: var(--rand); }
.tag-name { font-weight: 600; }
.tag-datum { font-size: .82rem; color: var(--ink-leise); }
.tag-kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.tag-koerper { padding: .7rem .85rem; display: grid; gap: .5rem; }
.zeitzeile { display: flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; }
.zeitzeile .gross { font-size: 1.05rem; font-weight: 600; }
.notiz { font-size: .85rem; color: var(--ink-leise); }
.einteilungskasten {
  border-left: 3px solid var(--akzent);
  background: var(--grund);
  border-radius: 0 8px 8px 0;
  padding: .55rem .7rem;
}
.einteilungskasten .bereich { font-weight: 600; display: flex; align-items: center; gap: .4rem; }

/* Tage, an denen nicht gearbeitet wird: sichtbar, aber erkennbar außer
   Betrieb. Ausblenden wäre falsch — eine Woche ohne Samstag und Sonntag
   verwirrt beim Zählen und Vergleichen. */
.tag.kein-arbeitstag { background: var(--grund); border-style: dashed; }
.tag.kein-arbeitstag .tag-name,
.tag.kein-arbeitstag .tag-datum { color: var(--ink-still); }

/* ── Tabellen ────────────────────────────────────────────────────── */
.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rand); vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-still); font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: var(--grund); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; border-top: 2px solid var(--rand-stark); border-bottom: none; }

/* ── Planungsmatrix (Leitung, breite Schirme) ────────────────────── */
.matrix { min-width: 900px; }
.matrix th.person, .matrix td.person {
  position: sticky; left: 0; background: var(--flaeche); z-index: 2;
  min-width: 170px; border-right: 1px solid var(--rand);
}
.matrix tbody tr:hover td.person { background: var(--grund); }
.matrix th.tagkopf { text-align: center; min-width: 118px; }
.matrix th.tagkopf small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-still); }
.matrix th.tagkopf.heute { color: var(--akzent); }
.matrix td.zelle { padding: .3rem; text-align: center; }

.zelle-leer { color: var(--ink-still); font-size: .8rem; }
.schicht {
  border: 1px solid var(--rand); border-left: 3px solid var(--rand-stark);
  border-radius: 6px; padding: .3rem .4rem; text-align: left;
  background: var(--flaeche); cursor: pointer; width: 100%;
  min-height: 0; font-weight: 400; display: block;
}
.schicht:hover { background: var(--grund); }
/* Jede Angabe auf eine eigene Zeile — als Inline-Elemente würden Zeit
   und Bereich sonst aneinanderkleben. */
.schicht .zeit, .schicht .bereich, .schicht .anwesend { display: block; }
.schicht .zeit { font-size: .82rem; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.schicht .bereich { font-size: .75rem; color: var(--ink-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schicht .bereich.fehlt { color: var(--ink-still); font-style: italic; }
.schicht .anwesend { font-size: .72rem; margin-top: .15rem; width: fit-content; }

/* ── Zahlenkacheln ───────────────────────────────────────────────── */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin-bottom: .9rem; }
.kachel {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .8rem .9rem; box-shadow: var(--schatten);
}
.kachel .wert { font-size: 1.7rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel .bez { font-size: .8rem; color: var(--ink-leise); margin-top: .15rem; }

/* Quotenbalken: ein Farbton, Länge trägt die Aussage, Zahl steht daneben */
.quote { display: flex; align-items: center; gap: .5rem; min-width: 150px; }
.quote-schiene { flex: 1; height: 8px; background: var(--grund); border-radius: 4px; overflow: hidden; min-width: 60px; }
.quote-balken { height: 100%; border-radius: 4px; background: var(--akzent); }
.quote-balken.gut { background: var(--gut); }
.quote-balken.warn { background: var(--warn); }
.quote-balken.schlecht { background: var(--schlecht); }
.quote-zahl { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.4rem; text-align: right; }
.quote-zahl.ohne-wert { color: var(--ink-still); font-weight: 400; }

/* ── Dialog ──────────────────────────────────────────────────────── */
dialog {
  border: none; border-radius: 14px; padding: 0; width: min(520px, calc(100vw - 1.5rem));
  box-shadow: var(--schatten-dialog); color: var(--ink); background: var(--flaeche);
}
dialog::backdrop { background: var(--schleier); }
.dialog-kopf { padding: .9rem 1.1rem; border-bottom: 1px solid var(--rand); display: flex; align-items: center; gap: .6rem; }
.dialog-kopf h2 { margin: 0; font-size: 1.05rem; }
.dialog-kopf .schliessen { margin-left: auto; }
.dialog-koerper { padding: 1.1rem; max-height: 70vh; overflow-y: auto; }
.dialog-fuss { padding: .8rem 1.1rem; border-top: 1px solid var(--rand); display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.dialog-fuss .links { margin-right: auto; }

/* ── Anmeldeseite ────────────────────────────────────────────────── */
.anmeldeseite { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.2rem; }
.anmeldekasten { width: min(400px, 100%); }
.anmeldekasten .logo { text-align: center; margin-bottom: 1.2rem; }
.anmeldekasten .logo h1 { font-size: 1.3rem; margin-bottom: .2rem; }
.anmeldekasten .logo p { margin: 0; color: var(--ink-leise); font-size: .88rem; }
.anmeldekasten button[type=submit] { width: 100%; margin-top: .3rem; }

.passwortkasten {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.25rem; letter-spacing: .04em; text-align: center;
  background: var(--grund); border: 1px dashed var(--rand-stark);
  border-radius: 8px; padding: .8rem; margin: .5rem 0; user-select: all;
}

/* ── Hell/Dunkel-Umschalter ──────────────────────────────────────── */
.thema-schalter {
  min-height: 34px; width: 34px; padding: 0;
  border-radius: 8px; flex: 0 0 auto;
  color: var(--ink-leise);
}
.thema-schalter:hover:not(:disabled) { color: var(--ink); }
/* Auf der Anmeldeseite gibt es keine Kopfleiste — dort steht der Knopf frei. */
.thema-ecke { position: fixed; top: .8rem; right: .8rem; z-index: 30; }

/* ── Abstandshelfer ──────────────────────────────────────────────── */
/* Die CSP erlaubt kein style-Attribut — auch nicht das, was der Browser
   aus HTML einliest. Kleinkram-Abstände laufen deshalb über Klassen. */
.mt-0   { margin-top: 0; }
.mt-eng { margin-top: -.2rem; }
.mt-1   { margin-top: .6rem; }
.mt-2   { margin-top: .8rem; }
.mt-3   { margin-top: .9rem; }
.mb-0   { margin-bottom: .2rem; }
.breit-auto { width: auto; }
.dehnbar { flex: 1; min-width: 180px; }
.zusatz { font-weight: 400; font-size: .75rem; }

/* ── Kleinkram ───────────────────────────────────────────────────── */
.leer { text-align: center; padding: 2.2rem 1rem; color: var(--ink-still); }
.leer p { margin: .3rem 0; }
.laedt { text-align: center; padding: 2rem; color: var(--ink-still); font-size: .9rem; }
.stapel { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.trennlinie { height: 1px; background: var(--rand); margin: 1rem 0; border: none; }
.nur-breit { display: none; }
.leise { color: var(--ink-leise); font-size: .85rem; }
.rechtsbuendig { text-align: right; }

/* ── Ab Tablet ───────────────────────────────────────────────────── */
@media (min-width: 720px) {
  h1 { font-size: 1.5rem; }
  main { padding: 1.4rem 1.2rem 4rem; }
  .karte { padding: 1.2rem; }
  .nur-breit { display: initial; }
  .nur-schmal { display: none; }
  .tagesliste { grid-template-columns: repeat(2, 1fr); }
  .tabellenrahmen { margin: 0; padding: 0; }
}

@media (min-width: 1100px) {
  .tagesliste { grid-template-columns: repeat(4, 1fr); }
}

/* Wer partout keine Animationen will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}