/* Oberflaeche der Produktions- und Schichtplanung.
 *
 * Eine Datei, kein Rahmenwerk. Begruendung in
 * docs/04-technologieauswahl.md, Abschnitt 3: Die Zielhardware ist ein Atom
 * N2800; jedes Kilobyte, das der Browser laedt und auswertet, ist dort
 * spuerbar. Die Ansicht kommt ausserdem ohne JavaScript aus.
 *
 * Keine Webschrift: Der Server kann ohne Internetzugang laufen, und eine
 * mitgelieferte Schrift waeren 100 KB je Schnitt fuer ein Werkzeug, das in
 * jeder Systemschrift gleich gut lesbar ist. Keine Unschaerfe-Filter und
 * keine Daueranimationen - beides kostet auf schwachen Rechnern Bildrate,
 * ohne etwas zu sagen. Was sich bewegt, bewegt sich kurz und nur auf
 * Zeigerkontakt, und gar nicht, wenn das System weniger Bewegung wuenscht.
 *
 * Die Ampelfarben sind so gewaehlt, dass sie sich auch ohne Farbe
 * unterscheiden: Jede Zeile traegt zusaetzlich ein Zeichen und einen Text.
 * Eine Planung, die nur an der Farbe erkennbar waere, koennte ein Teil der
 * Belegschaft nicht lesen.
 */

:root {
  color-scheme: light dark;
  --grund: #f3f5f9;
  --flaeche: #ffffff;
  --flaeche-2: #f8fafc;
  --rand: #e2e8f0;
  --rand-stark: #cbd5e1;
  --schrift: #0f172a;
  --gedaempft: #5b6779;
  --betont: #2353d6;
  --betont-stark: #1a43b5;
  --betont-flaeche: #e8eefe;
  --auf-betont: #ffffff;
  --gruen: #15803d;
  --gruen-flaeche: #dcfce7;
  --gelb: #a16207;
  --gelb-flaeche: #fef3c7;
  --rot: #b91c1c;
  --rot-flaeche: #fee2e2;
  --radius: 12px;
  --radius-klein: 8px;
  --schatten: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);
  --schatten-hoch: 0 4px 12px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
  --fokus: 0 0 0 3px rgba(35, 83, 214, .35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0b1220;
    --flaeche: #121a2b;
    --flaeche-2: #172136;
    --rand: #243049;
    --rand-stark: #33415c;
    --schrift: #e5e9f0;
    --gedaempft: #9aa7bb;
    --betont: #8fb3ff;
    --betont-stark: #b3cbff;
    --betont-flaeche: #1b2a4d;
    --auf-betont: #0b1220;
    --gruen: #86efac;
    --gruen-flaeche: #14532d;
    --gelb: #fde68a;
    --gelb-flaeche: #713f12;
    --rot: #fca5a5;
    --rot-flaeche: #7f1d1d;
    --schatten: 0 1px 2px rgba(0, 0, 0, .35);
    --schatten-hoch: 0 6px 16px rgba(0, 0, 0, .45);
    --fokus: 0 0 0 3px rgba(143, 179, 255, .45);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--grund);
  color: var(--schrift);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--betont); text-underline-offset: 2px; }
a:hover { color: var(--betont-stark); }

/* Ein sichtbarer Fokus fuer die Tastatur, keiner fuer die Maus. Die
   Schichtleitung arbeitet oft mit Tab und Leertaste durch die Vorschlagsliste;
   ohne Ring weiss sie nicht, welches Kaestchen gerade dran ist. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .knopf, button, .kopf-nav a, .kachel, a.besetzen, ul.einsaetze li {
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
  }
}

/* Springt mit der Tastatur an der Navigation vorbei. Unsichtbar, bis sie den
   Fokus bekommt - wer mit der Maus arbeitet, sieht sie nie. */
.sprungmarke {
  position: absolute;
  left: .75rem;
  top: -3rem;
  z-index: 50;
  padding: .45rem .8rem;
  border-radius: var(--radius-klein);
  background: var(--betont);
  color: var(--auf-betont);
  font-weight: 600;
  text-decoration: none;
}
.sprungmarke:focus { top: .5rem; color: var(--auf-betont); }

/* --- Kopf und Navigation -------------------------------------------------- *
 *
 * Zwei Zeilen: oben Marke, Suche und das Persoenliche, darunter die Bereiche.
 * Elf Bereiche passen neben Suche und Sprachwahl nicht in eine Zeile; vorher
 * brachen sie an wechselnden Stellen um, und die Suche landete mal links, mal
 * in einer eigenen Zeile. Jetzt steht alles an einem festen Platz, und
 * reicht die Breite nicht, rollt die Bereichszeile waagrecht statt umzubrechen.
 */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  box-shadow: var(--schatten);
}

.kopf-oben {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.25rem;
  padding: .65rem 1.25rem .35rem;
}

.kopf .marke {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--schrift);
}
.kopf .marke img { width: 28px; height: 28px; display: block; }

.kopf .schnellsuche { flex: 1 1 16rem; max-width: 28rem; position: relative; }
.kopf .schnellsuche input {
  width: 100%;
  padding-left: 2.1rem;
  background-color: var(--flaeche-2);
}
/* Die Lupe als Hintergrund und nicht als Grafikdatei: eine Anfrage weniger,
   und sie erbt keine Farbe, die im Dunkelmodus verschwinden koennte. */
.kopf .schnellsuche::before {
  content: "";
  position: absolute;
  left: .75rem;
  top: 50%;
  width: .7rem;
  height: .7rem;
  margin-top: -.5rem;
  border: 2px solid var(--gedaempft);
  border-radius: 50%;
  pointer-events: none;
}
.kopf .schnellsuche::after {
  content: "";
  position: absolute;
  left: 1.55rem;
  top: 50%;
  width: 2px;
  height: .45rem;
  margin-top: .2rem;
  background: var(--gedaempft);
  transform: rotate(-45deg);
  pointer-events: none;
}

.kopf .rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
}
.kopf .rechts form { margin: 0; }
.kopf .rechts select { padding-top: .3rem; padding-bottom: .3rem; }

/* Wer angemeldet ist, steht als Kuerzel im Kreis und daneben im Klartext.
   Das Kuerzel ist Wiedererkennung, nicht Information - der Name steht
   dabei. */
.benutzerkennung {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--gedaempft);
  white-space: nowrap;
}
.benutzerkennung .kuerzel {
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--betont-flaeche);
  color: var(--betont);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
}

.kopf-nav {
  display: flex;
  gap: .15rem;
  padding: 0 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.kopf-nav a {
  position: relative;
  padding: .55rem .75rem .6rem;
  color: var(--gedaempft);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}
.kopf-nav a:hover { color: var(--schrift); background: var(--flaeche-2); }
/* Der aktive Bereich traegt einen Balken und fetten Text - nicht nur Farbe. */
.kopf-nav a[aria-current="page"] { color: var(--betont); font-weight: 650; }
.kopf-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .6rem;
  right: .6rem;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--betont);
}

/* Bei schmalen Fenstern bekommt die Suche die ganze Breite. Hauptfokus ist
   Desktop (Kapitel 5), aber ein Tablet im Betrieb soll nicht unbenutzbar
   sein. */
@media (max-width: 48rem) {
  .kopf .schnellsuche { order: 10; flex-basis: 100%; max-width: none; }
  .benutzerkennung .name { display: none; }
}

/* Kopf ohne Anmeldung: nur Marke und Sprachwahl. Wer sich anmelden will,
   muss die Sprache vorher waehlen koennen - die Anmeldeseite ist die erste,
   die jemand an einem fremden Rechner sieht. */
.kopf-oeffentlich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1.25rem;
}
.kopf-oeffentlich .marke {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--schrift);
}
.kopf-oeffentlich .marke img { width: 28px; height: 28px; display: block; }
.kopf-oeffentlich form { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; }

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 110rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1rem;
}

.fuss {
  width: 100%;
  max-width: 110rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.75rem;
  color: var(--gedaempft);
  font-size: .82rem;
  border-top: 1px solid var(--rand);
}

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

h1 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; margin: 0 0 .35rem; }
h1 .gedaempft { font-weight: 500; }
h2 { font-size: 1.08rem; letter-spacing: -.005em; margin: 1.75rem 0 .65rem; }
h3 { font-size: .98rem; }
.gedaempft { color: var(--gedaempft); }
.klein { font-size: .85rem; }
.ohne-abstand { margin: 0; }
.abstand-oben { margin-top: 1rem; }
.abstand-unten { margin-bottom: 1rem; }
.fett { font-weight: 600; }
.normal { font-weight: 400; }

code, kbd { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .9em; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  box-shadow: var(--schatten);
}
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

.leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 1rem 0 1.25rem;
}

/* Knoepfe: eine Hoehe fuer alle, damit Verweise und Formularknoepfe in einer
   Leiste auf einer Linie stehen. */
.knopf, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.25rem;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  padding: .45rem .95rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--schrift);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--schatten);
}

.knopf:hover, button:hover, input[type="submit"]:hover {
  background: var(--flaeche-2);
  border-color: var(--betont);
  color: var(--schrift);
}
.knopf.betont, button.betont, input[type="submit"].betont {
  background: var(--betont);
  border-color: var(--betont);
  color: var(--auf-betont);
}
.knopf.betont:hover, button.betont:hover { background: var(--betont-stark); border-color: var(--betont-stark); color: var(--auf-betont); }
button:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

input[type="text"], input[type="search"], input[type="password"], input[type="date"],
input[type="number"], input[type="email"], select, textarea {
  font: inherit;
  min-height: 2.25rem;
  padding: .4rem .65rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--schrift);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--betont);
  border-radius: var(--radius-klein);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--betont); }
input, select, textarea { max-width: 100%; }
::placeholder { color: var(--gedaempft); opacity: .85; }

/* Meldungen tragen ein Zeichen vor dem Text, aus demselben Grund wie die
   Ampel: Rot und Gruen allein unterscheidet nicht jeder. */
.meldung {
  display: flex;
  gap: .55rem;
  align-items: baseline;
  padding: .7rem .95rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand);
  border-left-width: 4px;
  background: var(--flaeche);
  margin: 0 0 1rem;
}
.meldung::before { font-weight: 700; }
.meldung.fehler { background: var(--rot-flaeche); border-color: var(--rot); }
.meldung.fehler::before { content: "\25A0"; color: var(--rot); }
.meldung.erfolg { background: var(--gruen-flaeche); border-color: var(--gruen); }
.meldung.erfolg::before { content: "\25CF"; color: var(--gruen); }
.meldung.warnung { background: var(--gelb-flaeche); border-color: var(--gelb); }
.meldung.warnung::before { content: "\25B2"; color: var(--gelb); }
.meldung.info::before { content: "i"; color: var(--betont); }
.meldung.kompakt { margin: 0; padding: .35rem .75rem; font-size: .9rem; }

/* Seitenkopf: Ueberschrift links, Kennzeichen rechts daneben. */
.seitenkopf { margin-bottom: .25rem; }
.seitenkopf p { margin: .15rem 0 0; }

/* --- Wochentafel ---------------------------------------------------------- */

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

table.tafel {
  border-collapse: collapse;
  width: 100%;
  min-width: 60rem;
  background: var(--flaeche);
}

table.tafel th, table.tafel td {
  border: 1px solid var(--rand);
  padding: .45rem .55rem;
  vertical-align: top;
  text-align: left;
}
/* Den aeusseren Rand zeichnet der Rahmen mit seinen runden Ecken; doppelt
   saehe er wie ein Fehler aus. */
table.tafel tr > :first-child { border-left: 0; }
table.tafel tr > :last-child { border-right: 0; }
table.tafel thead tr:first-child > * { border-top: 0; }
table.tafel tbody tr:last-child > * { border-bottom: 0; }

table.tafel thead th {
  background: var(--flaeche-2);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
table.tafel thead th .gedaempft { font-weight: 400; }
/* Heute hebt sich ueber eine Flaeche und einen Balken ab, nicht nur ueber
   die Farbe des Rahmens. */
table.tafel th.heute { background: var(--betont-flaeche); color: var(--betont); box-shadow: inset 0 3px 0 var(--betont); }
table.tafel td.heute { background: color-mix(in srgb, var(--betont) 4%, var(--flaeche)); }
table.tafel td { width: 12%; }
table.tafel th.zeilenkopf { width: 16%; white-space: normal; background: var(--flaeche); }
table.tafel thead th.zeilenkopf { background: var(--flaeche-2); }
.zeilenkopf .zeit { font-weight: 400; font-variant-numeric: tabular-nums; }

.bereich td {
  background: var(--flaeche-2);
  font-weight: 650;
  font-size: .8rem;
  letter-spacing: .01em;
  color: var(--gedaempft);
  padding-top: .4rem;
  padding-bottom: .4rem;
}
.bereich td strong { color: var(--schrift); }

/* Besetzung als Plakette: Zahl und Wort zusammen. "fehlt" ist rot, "voll"
   gruen - und in beiden Faellen steht die Aussage im Text daneben. */
.besetzung {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  color: var(--gedaempft);
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .05rem .5rem;
  margin-bottom: .35rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.besetzung.fehlt { color: var(--rot); background: var(--rot-flaeche); border-color: transparent; }
.besetzung.voll { color: var(--gruen); background: var(--gruen-flaeche); border-color: transparent; }

ul.einsaetze { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .2rem; }
ul.einsaetze li {
  display: flex;
  justify-content: space-between;
  gap: .35rem;
  align-items: center;
  font-size: .84rem;
  padding: .15rem .2rem .15rem .5rem;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 6px;
}
ul.einsaetze li:hover { border-color: var(--rand-stark); }
ul.einsaetze form { display: inline; margin: 0; }
ul.einsaetze button {
  min-height: 0;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0 .3rem;
  color: var(--gedaempft);
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
}
ul.einsaetze button:hover { color: var(--rot); background: var(--rot-flaeche); }

/* Der Verweis zum Besetzen steht in jeder Zelle. Als schmale, gestrichelte
   Flaeche ist er klar ein Ziel, ohne die Zelle mit zwei Zeilen Text zu
   fuellen; der volle Text steht im Titel. */
a.besetzen {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .76rem;
  font-weight: 500;
  text-decoration: none;
  padding: .15rem .45rem;
  border: 1px dashed var(--rand-stark);
  border-radius: 6px;
  color: var(--betont);
}
a.besetzen:hover { background: var(--betont-flaeche); border-color: var(--betont); border-style: solid; }
a.besetzen.gedaempft { color: var(--gedaempft); }

.unerwartet { font-size: .76rem; color: var(--gelb); font-weight: 600; margin: 0 0 .3rem; }
.zeilenkopf .unerwartet { display: block; margin-top: .2rem; font-weight: 500; }

/* --- Ampel ---------------------------------------------------------------- */

.ampel {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Team, das fuer diese Linie vorgesehen ist. Bewusst nur eingefaerbt und
   nicht als Ampel: Das Team ist eine Praeferenz, keine Zulaessigkeit - eine
   Ampelform wuerde es mit dem Status verwechseln lassen. */
.team-passt { color: var(--gruen); font-weight: 600; }

.ampel.GRUEN { background: var(--gruen-flaeche); color: var(--gruen); }
.ampel.GELB  { background: var(--gelb-flaeche);  color: var(--gelb); }
.ampel.ROT   { background: var(--rot-flaeche);   color: var(--rot); }

/* Die Datentabelle der Anwendung. Der Name stammt aus der Vorschlagsliste,
   inzwischen tragen ihn alle Listen - Bestand, Pruefungen, Abweichungen,
   Berichte. Eine Gestaltung fuer alle, damit eine Liste wie eine Liste
   aussieht, gleich wo. */
table.vorschlaege {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
table.vorschlaege th, table.vorschlaege td {
  border-bottom: 1px solid var(--rand); padding: .6rem .7rem; text-align: left; vertical-align: top;
}
table.vorschlaege tbody tr:last-child > * { border-bottom: 0; }
table.vorschlaege thead th {
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gedaempft);
  background: var(--flaeche-2);
}
table.vorschlaege td.punkte, table.vorschlaege th.punkte {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.vorschlaege td.punkte { font-weight: 600; }
table.vorschlaege tr.ROT td { opacity: .75; }
table.vorschlaege input[type="checkbox"] { width: 1.15rem; height: 1.15rem; cursor: pointer; }
table.vorschlaege input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .45; }
table.vorschlaege th.auswahl { width: 2.5rem; }
/* Die Tabellen der Verwaltungsseiten haben keinen eigenen Kopf, sondern die
   erste Zeile als Ueberschrift; auch die links ausrichten. */
table.vorschlaege th[colspan] { text-align: left; }
/* Auf schmalen Bildschirmen rollt eine breite Liste in sich, statt die ganze
   Seite seitlich verschiebbar zu machen - dann rutschte auch der Kopf mit. */
@media (max-width: 48rem) {
  table.vorschlaege { display: block; overflow-x: auto; }
}

.ueberbuchung {
  margin: .75rem 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--rand);
  border-left: 4px solid var(--gelb);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.ueberbuchung label { display: flex; align-items: center; gap: .45rem; cursor: pointer; }
.ueberbuchung input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
.ueberbuchung input[type="text"] { width: 100%; max-width: 30rem; margin-top: .35rem; }
table.vorschlaege label { cursor: pointer; }
table.vorschlaege tbody tr:hover td { background: color-mix(in srgb, var(--betont) 5%, var(--flaeche)); }

.begruendung { margin-top: .25rem; width: 100%; max-width: 26rem; }

.befund { font-size: .82rem; margin: .2rem 0 0; }
.befund code { font-size: .9em; color: var(--gedaempft); }
/* Rueckblick auf die letzten Wochen. Zugeklappt unauffaellig, aufgeklappt
   ein Raster Montag bis Sonntag. Kein JavaScript: <details> kann das. */
.rueckblick { margin-top: .3rem; font-size: .78rem; }
.rueckblick summary { cursor: pointer; color: var(--gedaempft); }
.rueckblick summary span { margin-left: .4rem; }
table.verlauf { border-collapse: collapse; margin-top: .35rem; }
table.verlauf td {
  border: 1px solid var(--rand); width: 2.1rem; height: 1.5rem;
  text-align: center; color: var(--gedaempft); font-size: .72rem;
}
table.verlauf td.belegt { background: var(--gruen-flaeche); color: var(--gruen); font-weight: 600; }

/* Beschaeftigungsgrad. Vollzeit bleibt unauffaellig, Teilzeit wird
   hervorgehoben: Die Abweichung ist das, was beim Planen auffallen muss. */
.grad { color: var(--gedaempft); white-space: nowrap; }
.grad.teilzeit { color: var(--gelb); font-weight: 600; }

/* Hinweise schliessen niemanden aus. Sie stehen deshalb leiser als
   Warnungen, aber sie stehen da - sie sagen etwas, das sonst nirgends
   auftaucht. */
.befund.hinweis code { opacity: .75; }
.befund.hinweis { opacity: .8; }

.beitraege { font-size: .78rem; color: var(--gedaempft); margin: .25rem 0 0; }

/* --- Anmeldung und oeffentliche Seiten ------------------------------------ */

.anmeldung {
  max-width: 25rem;
  margin: 6vh auto 3rem;
  padding: 1.75rem 1.85rem;
  box-shadow: var(--schatten-hoch);
}
.anmeldung h1 { font-size: 1.35rem; margin-bottom: 1rem; }
.anmeldung label { display: block; margin-bottom: .9rem; font-weight: 500; font-size: .92rem; }
.anmeldung input { width: 100%; margin-top: .3rem; }
.anmeldung button[type="submit"] { width: 100%; margin-top: .35rem; min-height: 2.5rem; }
.anmeldung .markenkopf {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.25rem;
  color: var(--gedaempft);
  font-size: .88rem;
}
.anmeldung .markenkopf img { width: 36px; height: 36px; }

/* Tage, an denen die Schicht nicht faehrt. Zurueckgenommen statt versteckt:
   Die Spalte muss stehen bleiben, damit die Woche als Woche lesbar bleibt,
   aber sie darf nicht wie eine offene Position aussehen. */
table.tafel td.kein-schichttag,
table.tafel th.kein-schichttag {
  background: repeating-linear-gradient(135deg, var(--flaeche-2), var(--flaeche-2) 6px, var(--flaeche) 6px, var(--flaeche) 12px);
}
table.tafel td.kein-schichttag .besetzung { font-style: italic; font-weight: 500; }

/* --- Kalender (Kapitel 17) ------------------------------------------------
 *
 * Dieselbe Tafel wie die Wochenplanung, nur mit Tagen statt Positionen.
 * Feiertag, Wochenende und fremder Monat sind zusaetzlich zur Farbe an Text
 * oder Deckkraft zu erkennen - aus demselben Grund wie bei den Ampelfarben.
 */

.filterleiste {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 0 0 .9rem;
  font-size: .85rem;
}
.filterleiste a {
  text-decoration: none;
  padding: .2rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--schrift);
}
.filterleiste a:hover { border-color: var(--betont); }
.filterleiste a[aria-current="page"] { background: var(--betont-flaeche); border-color: var(--betont); color: var(--betont); font-weight: 600; }
.filterleiste .nicht-gebaut { text-decoration: line-through; cursor: help; padding: .2rem .4rem; }

.ansichtswahl { display: inline-flex; gap: 0; }
.ansichtswahl .knopf { border-radius: 0; box-shadow: none; }
.ansichtswahl .knopf:first-child { border-radius: var(--radius-klein) 0 0 var(--radius-klein); }
.ansichtswahl .knopf:last-child { border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.ansichtswahl .knopf + .knopf { margin-left: -1px; }
.ansichtswahl .knopf[aria-current="page"] { background: var(--betont-flaeche); color: var(--betont); border-color: var(--betont); position: relative; z-index: 1; }

table.tafel.kalender td { width: 14.28%; vertical-align: top; height: 5.5rem; }
table.tafel.kalender.woche td { height: 9rem; }
.kalendertag .tagesnummer {
  font-weight: 650;
  text-decoration: none;
  display: inline-block;
  margin-bottom: .2rem;
  min-width: 1.7rem;
  text-align: center;
  border-radius: 999px;
  padding: 0 .3rem;
}
.kalendertag.heute .tagesnummer { background: var(--betont); color: var(--auf-betont); }
.kalendertag.fremder-monat { opacity: .45; }
.kalendertag.wochenende { background: var(--flaeche-2); }
.kalendertag.feiertag { background: var(--gelb-flaeche); }
/* Auch in der Wochentafel der Planung: Der Feiertag soll auffallen, bevor
 * jemand eingeteilt wird, und nicht erst als Befund danach. */
table.tafel thead th.feiertag { background: var(--gelb-flaeche); }

.feiertagsname { font-size: .76rem; color: var(--gelb); font-weight: 600; white-space: normal; }
.feiertagsname.ausnahme { color: var(--gedaempft); font-weight: 400; text-decoration: line-through; }
.feiertagsmarke {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gelb);
  background: var(--gelb-flaeche);
  border-radius: 999px;
  padding: .1rem .55rem;
  vertical-align: middle;
}
.unterbesetzt { font-size: .78rem; color: var(--rot); font-weight: 600; }
.abwesend { color: var(--gedaempft); }
.gesperrt { color: var(--rot); }

/* --- Uebersicht nach der Anmeldung (Kapitel 6) ----------------------------
 *
 * Eine grosse Zahl je Seite, darunter Kacheln, darunter die Meldungen. Die
 * Ampel steht nie allein: Jede Stufe traegt ein Zeichen und ein Wort, damit
 * sie auch ohne Farbe lesbar ist - auch die Gesamtlage am Rand der grossen
 * Zahl, die bis 0.24 nur als Farbe dastand.
 */

.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.35rem 1.6rem;
  margin: .75rem 0 1.25rem;
}
/* Die Flaeche traegt den Gesamtzustand - dezent, damit die Zahl und nicht der
 * Kasten die Aufmerksamkeit bekommt. */
.hero.ampel-flaeche-GRUEN { border-left: 6px solid var(--gruen); }
.hero.ampel-flaeche-GELB  { border-left: 6px solid var(--gelb); }
.hero.ampel-flaeche-ROT   { border-left: 6px solid var(--rot); }

.herozahl { font-size: 3.4rem; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.heromarke { font-size: .95rem; color: var(--gedaempft); margin-top: .4rem; }
.gesamtlage { margin-top: .65rem; font-size: .82rem; color: var(--gedaempft); display: flex; align-items: center; gap: .4rem; }

.messlatte { min-width: 16rem; flex: 1; max-width: 26rem; }
.messlatte-zahl { font-size: 1rem; margin-bottom: .4rem; font-variant-numeric: tabular-nums; }
/* Die Spur ist dieselbe Farbe wie die Fuellung, nur die helle Stufe: So liest
 * sich der Zustand ueber die ganze Breite und nicht nur im gefuellten Teil. */
.spur {
  height: .65rem;
  border-radius: 999px;
  background: var(--flaeche-2);
  overflow: hidden;
}
.spur.GRUEN { background: var(--gruen-flaeche); }
.spur.GELB  { background: var(--gelb-flaeche); }
.spur.ROT   { background: var(--rot-flaeche); }
.fuellung { height: 100%; border-radius: 999px; background: var(--betont); }
.fuellung.GRUEN { background: var(--gruen); }
.fuellung.GELB  { background: var(--gelb); }
.fuellung.ROT   { background: var(--rot); }

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .85rem;
  margin-bottom: .5rem;
}
.kachel {
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: .9rem 1rem .95rem;
  box-shadow: var(--schatten);
  overflow: hidden;
}
/* Ein schmaler Streifen oben in der Farbe der Stufe. Das Wort steht in der
   Plakette darunter. */
.kachel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: transparent;
}
.kachel.stufe-GRUEN::before { background: var(--gruen); }
.kachel.stufe-GELB::before  { background: var(--gelb); }
.kachel.stufe-ROT::before   { background: var(--rot); }
.kachel:hover { box-shadow: var(--schatten-hoch); }
.kachel.leer { border-style: dashed; box-shadow: none; background: transparent; }
.kachelmarke { font-size: .8rem; font-weight: 500; color: var(--gedaempft); }
/* In der schmalen Kachel darf eine lange Plakette umbrechen; abgeschnitten
   waere ihr Text nicht mehr zu lesen. Pfade brechen an jeder Stelle. */
.kachel .ampel { white-space: normal; align-items: baseline; }
.kachel code { overflow-wrap: anywhere; }
.kachelwert { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: .2rem 0 .4rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.warnliste {
  list-style: none;
  margin: .25rem 0 0;
  padding: .2rem 1.1rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.warnliste li {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rand);
}
.warnliste li:last-child { border-bottom: none; }
.warnliste code { font-size: .78rem; color: var(--gedaempft); }

/* --- Ziehen und Ablegen (Kapitel 7) ---------------------------------------
 *
 * Nur Rueckmeldung fuer die Maus. Ob ein Ablegen zulaessig ist, sagt der
 * Server nach dem Abschicken - deshalb ist hier kein Ziel "gesperrt"
 * eingefaerbt: Das waere Regelwissen im Browser.
 */
ul.einsaetze li[data-einsatz] { cursor: grab; }
ul.einsaetze li[data-einsatz]:active { cursor: grabbing; }
ul.einsaetze li.wird-gezogen { opacity: .45; }
table.tafel td.ablegeziel {
  outline: 2px dashed var(--betont);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--betont) 10%, var(--flaeche));
}

/* Kennungen wie ABW-2026-0001 oder CH-0101-02 nicht umbrechen: Halbiert
   sind sie beim Ueberfliegen einer Liste nicht mehr zu erkennen. */
.kennung { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Mitarbeiterakte -------------------------------------------------------
 *
 * Feste Abschnitte untereinander, alles vom Server. Die Bearbeitung steht in
 * <details>: Sie klappt nur auf, wenn jemand darauf klickt, und schiebt dann
 * genau den Inhalt darunter weiter - auf eigenen Klick, nicht ueberraschend.
 * Die Kalenderzellen haben eine Mindesthoehe wie im Standortkalender, damit
 * ein Monat mit wenigen Einsaetzen nicht anders aussieht als ein voller.
 */
section.akte { margin-bottom: 1rem; }
section.akte h2 { margin-top: 0; }
section.akte h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem; margin: 0 0 .75rem; }
dl.angaben dt { color: var(--gedaempft); font-size: .85rem; }
dl.angaben dd { margin: 0; }
details.bearbeiten { margin-top: .75rem; border-top: 1px solid var(--rand); padding-top: .6rem; }
details.bearbeiten summary { cursor: pointer; color: var(--betont); font-weight: 500; }
details.bearbeiten form { margin-top: .5rem; max-width: 36rem; }
details.bearbeiten form p { margin: .5rem 0; }
details.bearbeiten label { display: block; font-size: .85rem; color: var(--gedaempft); margin-bottom: .15rem; }
form.zeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .1rem 0; }
table.tafel.kalender.person td { height: 4.5rem; }
.kalendertag .einsatz a { text-decoration: none; }
.kalendertag .einsatz a:hover { text-decoration: underline; }
details.zeilenaktion summary { cursor: pointer; color: var(--betont); font-size: .85rem; }
details.zeilenaktion[open] { min-width: 22rem; }

/* --- Druck -----------------------------------------------------------------
 *
 * Fuer den Aushang gibt es das PDF. Wer trotzdem die Seite druckt, bekommt
 * den Inhalt ohne Navigation und ohne Knoepfe, die auf Papier nichts tun.
 */
@media print {
  body { background: #fff; color: #000; }
  .kopf, .kopf-oeffentlich, .sprungmarke, .leiste, a.besetzen, ul.einsaetze form, .fuss form { display: none !important; }
  main { max-width: none; padding: 0; }
  .karte, .tafel-rahmen, table.vorschlaege, .kachel, .hero, .warnliste { box-shadow: none; }
}