/* Gestaltungsgrundlage der Oberflaeche.
 *
 * Bewusst keine Excel-Optik: die alte Tabellenansicht wird nicht nachgebaut.
 * Farben, Abstaende und Radien stehen als Variablen an einer Stelle, damit
 * spaetere Ansichten sich daran bedienen statt eigene Werte zu erfinden.
 */

:root {
  color-scheme: light dark;

  --grund: #f7f8f7;
  --flaeche: #ffffff;
  --flaeche-2: #f1f3f2;
  --rand: #e3e6e4;
  --rand-stark: #cdd3cf;

  --text: #161c18;
  --text-leise: #5c6660;
  --text-still: #8a938d;

  --akzent: #2f7d4f;
  --akzent-hell: #e8f3ec;
  --akzent-text: #ffffff;

  --fehler: #b3261e;
  --fehler-hell: #fce9e7;
  --warnung: #8a5a00;
  --warnung-hell: #fdf1dc;
  --hinweis: #1f5f8b;
  --hinweis-hell: #e6f0f7;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 16px;

  --schrift: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-zahl: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

  --schatten: 0 1px 2px rgb(20 30 24 / 6%), 0 4px 12px rgb(20 30 24 / 4%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #10130f;
    --flaeche: #171b18;
    --flaeche-2: #1f2521;
    --rand: #2a312c;
    --rand-stark: #3c453e;

    --text: #e8ece9;
    --text-leise: #a3ada7;
    --text-still: #78827b;

    --akzent: #5cbb82;
    --akzent-hell: #1a2d21;
    --akzent-text: #0d1410;

    --fehler: #f2b8b5;
    --fehler-hell: #2d1614;
    --warnung: #e9c46a;
    --warnung-hell: #2b2312;
    --hinweis: #9ecbea;
    --hinweis-hell: #12242f;

    --schatten: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 30%);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Geruest */

.app {
  display: grid;
  grid-template-columns: 244px 1fr;
  min-height: 100vh;
}

.seitenleiste {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  background: var(--flaeche);
  border-right: 1px solid var(--rand);
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.5rem;
}

.marke-zeichen {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-m);
  background: var(--akzent);
  color: var(--akzent-text);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.marke-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.marke-text strong {
  font-size: 14px;
  letter-spacing: -0.01em;
}

.marke-text span {
  color: var(--text-still);
  font-size: 12px;
}

.navigation {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-gruppe {
  margin: 0.75rem 0 0.25rem;
  padding: 0 0.65rem;
  color: var(--text-still);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-punkt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-s);
  color: var(--text-leise);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-punkt:hover {
  background: var(--flaeche-2);
  color: var(--text);
}

.nav-punkt[aria-current="page"] {
  background: var(--akzent-hell);
  color: var(--akzent);
  font-weight: 600;
}

.nav-punkt.ist-offen {
  color: var(--text-still);
  cursor: default;
}

.nav-punkt.ist-offen:hover {
  background: none;
  color: var(--text-still);
}

.seitenleiste-fuss {
  margin-top: auto;
  padding: 0 0.65rem;
  color: var(--text-still);
  font-size: 12px;
}

/* ---------------------------------------------------------------- Inhalt */

.inhalt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 2rem 1.25rem;
  border-bottom: 1px solid var(--rand);
}

.kopf h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.kopf p {
  margin: 0.2rem 0 0;
  color: var(--text-leise);
  font-size: 14px;
}

main {
  padding: 1.75rem 2rem 3rem;
}

/* ---------------------------------------------------------------- Kacheln */

.kachelreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.kachel {
  padding: 1.1rem 1.15rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-l);
  box-shadow: var(--schatten);
}

.kachel-titel {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--text-leise);
  font-size: 12.5px;
  font-weight: 500;
}

.kachel-wert {
  font-family: var(--schrift-zahl);
  font-size: 28px;
  font-weight: 620;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.kachel-wert.ist-leer {
  color: var(--text-still);
  font-weight: 500;
}

.kachel-fuss {
  margin-top: 0.2rem;
  color: var(--text-still);
  font-size: 12.5px;
}

/* ---------------------------------------------------------------- Karten */

.karte {
  padding: 1.4rem 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-l);
  box-shadow: var(--schatten);
}

.karte + .karte {
  margin-top: 1rem;
}

.karte h2 {
  margin: 0 0 0.15rem;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.karte p {
  margin: 0.35rem 0 0;
  color: var(--text-leise);
  max-width: 62ch;
}

.karten-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* ------------------------------------------------------------- Bausteine */

.marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.marke-chip {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--flaeche-2);
  color: var(--text-leise);
  font-size: 12.5px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}

.status-entwurf {
  background: var(--flaeche-2);
  color: var(--text-leise);
}

.status-fehler {
  background: var(--fehler-hell);
  color: var(--fehler);
}

.status-warnung {
  background: var(--warnung-hell);
  color: var(--warnung);
}

.status-hinweis {
  background: var(--hinweis-hell);
  color: var(--hinweis);
}

.status-gut {
  background: var(--akzent-hell);
  color: var(--akzent);
}

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: var(--akzent);
  color: var(--akzent-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.knopf:hover {
  filter: brightness(1.06);
}

.knopf-still {
  background: var(--flaeche);
  border-color: var(--rand-stark);
  color: var(--text);
}

.knopf[aria-disabled="true"] {
  background: var(--flaeche-2);
  border-color: var(--rand);
  color: var(--text-still);
  cursor: default;
  filter: none;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

/* Leerzustand: ehrlich benennen, dass noch nichts da ist. */
.karte .leer {
  padding: 1rem 1.1rem;
}

.leer {
  padding: 2rem 1.5rem;
  border: 1px dashed var(--rand-stark);
  border-radius: var(--r-m);
  text-align: center;
  color: var(--text-leise);
}

.leer strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text);
  font-weight: 600;
}

.liste {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rand);
  font-size: 14px;
}

.liste li:first-child {
  border-top: none;
}

.liste .wert {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .app {
    grid-template-columns: 1fr;
  }

  .seitenleiste {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--rand);
  }

  .navigation {
    flex-direction: row;
  }

  .nav-gruppe,
  .seitenleiste-fuss {
    display: none;
  }

  .kopf,
  main {
    padding-inline: 1.15rem;
  }
}

/* ------------------------------------------------- Filter und Suchleiste */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.suchfeld {
  flex: 1 1 260px;
  min-width: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--r-s);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

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

.segment {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--rand);
  border-radius: var(--r-s);
  background: var(--flaeche-2);
}

.segment-knopf {
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--text-leise);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.segment-knopf.ist-gewaehlt {
  background: var(--flaeche);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--schatten);
}

/* ------------------------------------------------------------- Tabellen */

.tabellenrahmen {
  overflow-x: auto;
  border: 1px solid var(--rand);
  border-radius: var(--r-l);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabelle th {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rand);
  color: var(--text-leise);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.tabelle td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

.tabelle tbody tr:last-child td {
  border-bottom: none;
}

.tabelle tbody tr:hover {
  background: var(--flaeche-2);
}

.tabelle .rechts {
  text-align: right;
}

.tabelle .zahl {
  font-variant-numeric: tabular-nums;
}

.tabelle .ist-inaktiv td {
  color: var(--text-still);
}

.verweis {
  color: var(--text);
  font-weight: 550;
  text-decoration: none;
}

.verweis:hover {
  color: var(--akzent);
  text-decoration: underline;
}

.knopf-klein {
  padding: 0.32rem 0.7rem;
  font-size: 13px;
}

.nur-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* ------------------------------------------------------- Fortschritt */

.fortschritt {
  display: inline-block;
  width: 54px;
  height: 6px;
  margin-right: 0.45rem;
  border-radius: 999px;
  background: var(--flaeche-2);
  vertical-align: middle;
  overflow: hidden;
}

.fortschritt-balken {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--warnung);
}

.fortschritt.ist-fertig .fortschritt-balken {
  background: var(--akzent);
}

.fortschritt-text {
  color: var(--text-still);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Formulare */

/* Formular und Abwesenheitskarte teilen sich eine Breite. Vorher endete das
   Formular bei 880 px und die Karte darunter lief bis zum Fensterrand - zwei
   verschiedene Breiten untereinander sehen aus wie ein Versehen. */
.personenmaske {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 1080px;
}

.maske {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.karte-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.karte-kopf h2 {
  margin: 0;
}

.feldreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.feld-breit {
  grid-column: 1 / -1;
}

.feld-name {
  color: var(--text-leise);
  font-size: 12.5px;
  font-weight: 600;
}

.feld-hinweis {
  color: var(--text-still);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Datum und Uhrzeit gehoerten hier nicht dazu und sahen deshalb nach nacktem
   Browser aus - mitten zwischen gestalteten Feldern. */
.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="number"],
.feld input[type="date"],
.feld input[type="time"],
.feld select,
.feld textarea {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--r-s);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.feld textarea {
  resize: vertical;
}

.feld-schalter {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
  padding-top: 1.1rem;
}

.feld-schalter input {
  margin: 0.2rem 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--akzent);
}

.feld-schalter span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.wahlmarke {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  font-size: 13.5px;
  cursor: pointer;
}

.wahlmarke input {
  accent-color: var(--akzent);
}

.wahlmarke:has(input:checked) {
  border-color: var(--akzent);
  background: var(--akzent-hell);
  color: var(--akzent);
  font-weight: 600;
}

/* ---------------------------------------------------------- Meldungen */

.meldung {
  margin-bottom: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r-m);
  font-size: 14px;
}

.meldung ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.meldung-gut {
  border-color: var(--akzent);
  background: var(--akzent-hell);
  color: var(--akzent);
}

.meldung-fehler {
  border-color: var(--fehler);
  background: var(--fehler-hell);
  color: var(--fehler);
}

/* Kein Fehler, aber auch keine reine Erfolgsmeldung: es ist etwas passiert,
   das die planende Person kennen muss. */
.meldung-warnung {
  border-color: var(--warnung);
  background: var(--warnung-hell);
  color: var(--warnung);
}

.meldung-warnung a {
  color: inherit;
}

/* Das Anlegeformular unter einer Liste: enger als eine ganze Maske. */
.maske-eng {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rand);
}

.maske-eng .feldreihe {
  margin-bottom: 0.6rem;
}

.maske-eng .knopfreihe {
  margin-top: 0.9rem;
}

/* Der Abschluss des Personenformulars. Frei zwischen zwei Karten schwebend
   sah die Zeile aus, als gehoerte sie zur naechsten - dabei schliesst sie die
   vorige ab. Als eigene Leiste im Kartenstil ist das eindeutig. */
.knopfreihe-fuss {
  align-items: center;
  margin-top: 0;
  padding: 0.85rem 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-l);
  box-shadow: var(--schatten);
}

/* ------------------------------- Verfuegbarkeit je Person und Wochentag */

/* Sechs Spalten statt acht: die beiden Zeitpaare ruecken je in eine Zelle.
   Mit acht Spalten lief das Raster ueber die Seitenbreite hinaus, und
   ausgerechnet die Tagesspalte scrollte als erste aus dem Bild. */

.tabelle-woche {
  /* "position: sticky" wirkt in Chrome nicht auf Zellen einer Tabelle mit
     "border-collapse: collapse". Genau daran scrollte die Tagesspalte weg und
     das Raster zeigte sieben namenlose Zeilen. */
  border-collapse: separate;
  border-spacing: 0;
}

.tabelle-woche th,
.tabelle-woche td {
  border-bottom: 1px solid var(--rand);
}

.tabelle-woche tbody tr:last-child th,
.tabelle-woche tbody tr:last-child td {
  border-bottom: none;
}

.tabelle-woche th,
.tabelle-woche td {
  padding: 0.45rem 0.6rem;
}

/* Der Tag bleibt stehen, auch wenn der Rest doch einmal scrollen muss:
   ohne ihn weiss niemand, welche Zeile er gerade ausfuellt. */
.tabelle-woche .spalte-tag {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 6.5rem;
  background: var(--flaeche);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  box-shadow: 1px 0 0 var(--rand);
}

.tabelle-woche thead .spalte-tag {
  z-index: 3;
  background: var(--flaeche-2);
}

/* Gruppenkopf: trennt das Feste sichtbar von den Vorlieben. */
.tabelle-woche .gruppenzeile th:not(.spalte-tag) {
  padding-top: 0.55rem;
  padding-bottom: 0.35rem;
  border-bottom: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* "Tag" ueberspannt beide Kopfzeilen und ist keine Gruppenbeschriftung. */
.tabelle-woche thead .spalte-tag {
  vertical-align: bottom;
  padding-bottom: 0.7rem;
  font-size: 12.5px;
  letter-spacing: normal;
  text-transform: none;
}

.tabelle-woche .gruppe-fest {
  background: var(--flaeche-2);
}

.tabelle-woche .gruppenzeile .gruppe-weich {
  color: var(--text-still);
}

.tabelle-woche thead tr:last-child th {
  font-weight: 600;
  white-space: nowrap;
}

/* Die Felder stehen nicht in einem .feld-Block und haetten sonst das nackte
   Browseraussehen - hier dieselbe Gestaltung wie in den uebrigen Masken. */
.tabelle-woche select,
.tabelle-woche input[type="time"] {
  padding: 0.32rem 0.45rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--r-s);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.tabelle-woche select:focus-visible,
.tabelle-woche input[type="time"]:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

.tabelle-woche select {
  width: 100%;
  min-width: 5.4rem;
}

.tabelle-woche select.wahl-kurz {
  min-width: 4.2rem;
}

/* Zwei Uhrzeiten in einer Zelle, durch einen Gedankenstrich getrennt. */
.zeitpaar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.zeitpaar input[type="time"] {
  width: 6.3rem;
  flex: 0 0 auto;
}

.zeitpaar span {
  color: var(--text-still);
}

/* Im schmalen Fenster stehen die beiden Uhrzeiten uebereinander. Lieber ein
   hoeheres Raster als eines, das seitlich wegscrollt. */
@media (max-width: 1180px) {
  .zeitpaar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }

  .zeitpaar span {
    display: none;
  }

  .zeitpaar input[type="time"] {
    width: 100%;
    min-width: 6rem;
  }

  .tabelle-woche {
    min-width: 0;
  }
}

.tabelle-woche .zeile-gesperrt td,
.tabelle-woche .zeile-gesperrt th {
  background: var(--flaeche-2);
}

.tabelle-woche .zeile-gesperrt .spalte-tag {
  color: var(--text-still);
  text-decoration: line-through;
}

/* Ein gesperrter Tag braucht keine Vorlieben - sie werden ohnehin abgelehnt. */
.tabelle-woche .zeile-gesperrt select:not([name="darf"]),
.tabelle-woche .zeile-gesperrt input[type="time"] {
  opacity: 0.45;
}

.tabelle-woche tbody tr:hover .spalte-tag {
  background: var(--flaeche-2);
}

/* ------------------------------------------------------ Wochenraster */

.raster {
  table-layout: fixed;
}

.raster th.raster-ort {
  width: 165px;
  vertical-align: top;
  font-weight: 600;
  color: var(--text);
}

.raster th.raster-ort .marke-chip {
  display: inline-block;
  margin-top: 0.2rem;
}

.raster-zelle {
  vertical-align: top;
}

.raster th.ist-sonntag,
.raster td.ist-sonntag {
  background: var(--flaeche-2);
}

.stelle {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--rand);
  border-left: 3px solid var(--akzent);
  border-radius: var(--r-s);
  background: var(--flaeche);
}

.stelle:last-child {
  margin-bottom: 0;
}

.stelle.ist-offen {
  border-left-color: var(--warnung);
  background: var(--warnung-hell);
}

.stelle-zeit {
  color: var(--text-leise);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.stelle select {
  max-width: 100%;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--rand-stark);
  border-radius: 4px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

/* Kopf- und Fusszeile erscheinen nur im Druck. */
.druckkopf,
.druckfuss {
  display: none;
}

/* Der zugeordnete Name als Text - im Druck statt des Auswahlfeldes. */
.stelle-name {
  display: none;
}

/* ------------------------------------------------------------- Druck
 *
 * Gedruckt wird der Wochenplan so, wie ihn die Excel-Listen zeigten: Namen,
 * Zeiten, Orte und der Notfallkontakt. Bedienelemente, Navigation und
 * Kennzahlen gehoeren nicht aufs Papier.
 */

@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 9pt;
  }

  .app {
    display: block;
  }

  .seitenleiste,
  .kopf,
  .nicht-drucken,
  .meldung,
  .filterleiste,
  .knopfreihe,
  .stelle select,
  .stelle noscript {
    display: none !important;
  }

  main {
    padding: 0;
  }

  .druckkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4mm;
    padding-bottom: 2mm;
    border-bottom: 1pt solid #000;
    font-size: 12pt;
  }

  .druckfuss {
    display: block;
    margin-top: 4mm;
    padding-top: 2mm;
    border-top: 1pt solid #000;
    font-size: 9pt;
  }

  .tabellenrahmen {
    overflow: visible;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .tabelle th,
  .tabelle td {
    border: 0.5pt solid #666;
    padding: 1mm 1.5mm;
  }

  .tabelle th.ist-sonntag,
  .tabelle td.ist-sonntag {
    background: none;
  }

  .stelle {
    display: block;
    margin-bottom: 1mm;
    padding: 0;
    border: none;
    border-left: 2pt solid #000;
    padding-left: 1.5mm;
    border-radius: 0;
    background: none;
  }

  .stelle.ist-offen {
    border-left-style: dashed;
  }

  .stelle-zeit {
    display: block;
    color: #444;
    font-size: 8pt;
  }

  .stelle-name {
    display: block;
    font-weight: 600;
  }

  .stelle.ist-offen .stelle-name {
    font-weight: 400;
    font-style: italic;
  }

  /* Eine Ortszeile nicht ueber zwei Seiten reissen. */
  .raster tr {
    break-inside: avoid;
  }

  .marke-chip {
    background: none;
    color: #444;
    padding: 0;
  }
}

/* --------------------------------------------------------- Konflikte */

.konflikt .knopfreihe {
  margin-top: 0.9rem;
}

.konflikt .knopfreihe form {
  display: contents;
}

.konflikt-text {
  margin-top: 0.6rem !important;
  color: var(--text) !important;
  font-size: 14.5px;
}


/* -------------------------------------------- Schichten und Ausnahmen */

.zeitfeld,
.zahlfeld {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--rand-stark);
  border-radius: 4px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.zahlfeld {
  width: 62px;
  text-align: right;
}

.neue-schicht {
  margin-top: 0.9rem;
}

.neue-schicht summary {
  color: var(--akzent);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.stelle-neu {
  margin-top: 0.3rem;
}

.stelle-neu summary {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px dashed var(--rand-stark);
  border-radius: var(--r-s);
  color: var(--text-still);
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

.stelle-neu[open] summary {
  border-color: var(--akzent);
  color: var(--akzent);
}

.stelle-neu form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.4rem;
  padding: 0.5rem;
  border: 1px solid var(--rand);
  border-radius: var(--r-s);
  background: var(--flaeche-2);
}

.stelle-neu input[type="time"] {
  padding: 0.25rem 0.35rem;
  border: 1px solid var(--rand-stark);
  border-radius: 4px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
}

.stelle-aktionen {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.stelle-aktionen form {
  display: contents;
}

.stelle-aktion {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-still);
  font: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
}

.stelle-aktion:hover {
  color: var(--fehler);
}

.stelle.ist-abgesagt {
  border-left-color: var(--text-still);
  background: var(--flaeche-2);
}

.stelle.ist-abgesagt .stelle-name {
  display: block;
  color: var(--text-still);
  font-style: italic;
  text-decoration: line-through;
}

@media print {
  .stelle.ist-abgesagt .stelle-name {
    display: block;
    font-style: italic;
    text-decoration: line-through;
  }
}


/* ------------------------------------------ Feststehende Tabellenkoepfe
 *
 * "sticky" haftet immer am naechsten scrollenden Vorfahren. Ein Rahmen mit
 * eigener Scrollhoehe wuerde das leisten, brauchte dafuer aber einen zweiten
 * Scrollbalken neben dem der Seite - unangenehm zu bedienen.
 *
 * Deshalb scrollt nur die Seite. Der Rahmen des Wochenrasters gibt sein
 * "overflow" auf, damit er kein Scroll-Container mehr ist; die Spalten teilen
 * sich stattdessen die vorhandene Breite (table-layout: fixed).
 */

.rahmen-raster {
  overflow: visible;
  border-radius: var(--r-l);
}

.tabelle thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--flaeche);
}

/* Im Wochenraster bleibt zusaetzlich die Ortsspalte stehen: ohne sie weiss man
 * beim Blaettern nach rechts nicht mehr, welche Zeile man liest. */
.raster th.raster-ort {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--flaeche);
}

.raster thead th.raster-ort {
  /* Die Ecke oben links kreuzt beide Richtungen und muss obenauf liegen. */
  z-index: 3;
}

.raster thead th.ist-sonntag,
.raster th.raster-ort.ist-sonntag {
  background: var(--flaeche-2);
}

@media print {
  /* Auf Papier gibt es kein Scrollen; feste Koepfe wuerden nur stoeren. */
  .tabelle thead th,
  .raster th.raster-ort {
    position: static;
  }

  /* Stattdessen wiederholt der Druck die Kopfzeile auf jeder Seite. */
  .tabelle thead {
    display: table-header-group;
  }
}


/* --------------------------------------------- Dichteres Wochenraster
 *
 * Eine Stelle belegte drei Zeilen: Zeit, Auswahlfeld, Aktionen. Bei zwei
 * Stellen je Zelle summierte sich das zu viel leerer Flaeche - besonders in
 * Zeilen, in denen nur an einem Tag gearbeitet wird.
 *
 * Jetzt teilen sich Zeit und Aktionen eine Zeile. Die Aktionen bleiben dabei
 * sichtbar statt sie beim Ueberfahren einzublenden: was nur auf Zuruf
 * erscheint, findet man mit der Tastatur nicht.
 */

.raster-zelle {
  padding: 0.35rem 0.4rem;
}

.raster th.raster-ort {
  padding: 0.35rem 0.6rem;
}

.stelle {
  gap: 0.1rem;
  padding: 0.3rem 0.4rem;
  margin-bottom: 0.3rem;
}

.stelle-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.stelle-aktionen {
  display: inline-flex;
  gap: 0.35rem;
  margin: 0;
}

.stelle-aktion {
  font-size: 11px;
  line-height: 1;
}

.stelle select {
  padding: 0.2rem 0.3rem;
  font-size: 12.5px;
}

.stelle-neu {
  margin-top: 0.1rem;
}

.stelle-neu summary {
  width: 18px;
  height: 18px;
  line-height: 16px;
  font-size: 12px;
}

.raster tbody tr:hover {
  background: none;  /* die Zellen tragen ihre eigene Struktur */
}


/* ------------------------------------------------------- Gefahrenzone */

.gefahr {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rand);
}

.gefahr summary {
  color: var(--fehler);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.gefahr p {
  max-width: 62ch;
}

.knopf-gefahr {
  background: var(--fehler);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .knopf-gefahr {
    color: #2d1614;
  }
}

/* ---------------------------------------------------------- Anmeldeseite */

.anmeldeseite {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1.25rem;
  background: var(--grund);
}

.anmeldung {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-l);
  box-shadow: var(--schatten);
}

.anmeldung .marke {
  padding: 0;
}

.anmeldung-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.anmeldung-form .knopf {
  justify-content: center;
}

.anmeldung-fuss {
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rand);
  color: var(--text-still);
  font-size: 12.5px;
}

.anmeldung .feld input[type="password"] {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--r-s);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.abmelden {
  margin-top: 0.9rem;
}

/* Solange kein Passwort gesetzt ist, muss das unuebersehbar sein. */
.seitenleiste-warnung {
  margin: 0.9rem 0 0;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--warnung);
  border-radius: var(--r-m);
  background: var(--warnung-hell);
  color: var(--warnung);
  font-size: 12px;
  line-height: 1.4;
}

.seitenleiste-warnung strong {
  display: block;
  margin-bottom: 0.15rem;
}