/*
 * Designsystem, abgeleitet aus crossfiticke.com.
 *
 * Markenfarbe #11d887 mit Hover #04cb7a, Überschriften als Slab-Serife,
 * Fließtext serifenlos — so wie auf der Website.
 *
 * Mobile first heißt hier nicht "schrumpft auch": Die Basisregeln sind die
 * Handyregeln. Alles ab 40rem ist Zugabe.
 *
 * Schriften werden bewusst nicht von einem CDN geladen. Google Fonts überträgt
 * die IP der Nutzerin an Google; das ist bei einer Personalanwendung keine
 * Geschmacksfrage. Wer Roboto Slab will, legt die woff2 nach static/fonts und
 * ergänzt hier ein @font-face.
 */

:root {
  color-scheme: light dark;

  /* Marke */
  --gruen: #11d887;
  /* Grün als TEXT/Rahmen: bewusst dunkler als das helle --gruen, damit es auf dem
     hellen Grund WCAG AA erreicht (#04cb7a lag bei nur ~2:1). Der Farbton bleibt. */
  --gruen-tief: #0a7a45;
  --gruen-schleier: #11d8871a;

  /* Neutrale, leicht ins Grün gedreht statt reines Grau */
  --grund: #f4f7f6;
  --flaeche: #ffffff;
  --flaeche-2: #eef2f1;
  --linie: #dde3e1;
  --tinte: #0d131b;
  --tinte-2: #333c45;
  --tinte-3: #626262;

  /* Zustände. Nie die Markenfarbe für "gut" — sonst verliert sie ihre Bedeutung. */
  --warnung: #8a5d00;
  --warnung-flaeche: #f8eeda;
  --gefahr: #b3372a;
  --gefahr-flaeche: #f8e7e4;

  /* "Frei" ist kein Alarm, sondern eine Information — ein ruhiges Blau, das sich
     bewusst von grün/amber/rot abhebt und nicht mit einer Warnung verwechselt wird. */
  --frei: #35619e;
  --frei-flaeche: #e4edf9;
  --ok: #2c6b41;
  --ok-soft: #e2f0e7;

  /* Feiertag: ein gedämpftes Violett, die fünfte Bedeutung neben
     grün/amber/rot/blau. Hier wird auch an Feiertagen gearbeitet — der Tag ist
     nicht frei, aber er begründet einen Ausgleichstag, also muss er sichtbar sein. */
  --feier: #6d4c9f;
  --feier-flaeche: #efe9f8;

  --serife: "Roboto Slab", "Zilla Slab", Rockwell, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --zahl: ui-monospace, "SF Mono", Menlo, monospace;

  --rand: 12px;
  --rand-klein: 8px;
  --tippziel: 44px;

  --leiste: calc(56px + env(safe-area-inset-bottom));

  /* Abstands-Skala (4·8·12·16·24·32) — für einen gleichmäßigen Rhythmus. Gilt nur
     für Abstände (padding/margin/gap), nie für Schriftgrößen. Neue und angefasste
     Flächen nutzen diese Stufen; der Bestand wandert nach und nach mit. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0d131b;
    --flaeche: #161922;
    --flaeche-2: #1e2430;
    --linie: #2b323d;
    --tinte: #eef2f1;
    --tinte-2: #b3bcc4;
    --tinte-3: #8a939b;
    /* Der Hover-Grünton der Website ist auf dunklem Grund zu dumpf für Text. */
    --gruen-tief: #2fe39d;
    --gruen-schleier: #11d8872e;
    --warnung: #ddb251;
    --warnung-flaeche: #2e2716;
    --gefahr: #ee8577;
    --gefahr-flaeche: #331e1b;
    --frei: #9bbbea;
    --frei-flaeche: #1a2432;
    --ok: #6fc48a;
    --ok-soft: #182c20;
    --feier: #b7a3e0;
    --feier-flaeche: #241f33;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* iOS zoomt Eingabefelder unter 16px automatisch. Das ist kein Feature. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: var(--serife);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.05rem;
}

p {
  margin: 0;
}

a {
  color: var(--gruen-tief);
}

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--gruen-tief);
  outline-offset: 2px;
  border-radius: var(--rand-klein);
}

/* Sanfte Zustandswechsel bei Hover/Fokus/Aktiv — bewusst dezent (nur Farbe und
   Rahmen), keine Effekthascherei. `:where(...)` hält die Spezifität bei 0, damit
   Komponenten ihre Werte behalten. Wer Bewegung reduziert, dem nimmt der Riegel
   weiter unten (prefers-reduced-motion) die Dauer wieder. */
:where(a, button, summary, input, select) {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Ein winziger Druckpunkt: der Knopf gibt beim Tippen kurz nach. */
button:active {
  transform: translateY(1px);
}

/* ---------------------------------------------------------------- Gerüst */

.huelle {
  /* Platz für die Navigationsleiste, plus Home-Indikator auf iPhones. */
  padding-bottom: calc(var(--leiste) + 1rem);
}

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
  padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0.85rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kopf-titel {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

/* Die Wortmarke über dem Seitentitel — dezent, aber immer da, damit klar ist,
   in welcher App man sich befindet. */
.marke {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gruen-tief);
}

.kopf .zeitraum {
  font-family: var(--zahl);
  font-size: 0.75rem;
  color: var(--tinte-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

main {
  padding: var(--s4) max(var(--s4), env(safe-area-inset-right)) var(--s4)
    max(var(--s4), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  max-width: 44rem;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- Tag */

.tag {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.tag > .datum {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  font-family: var(--zahl);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

.tag[data-heute="ja"] > .datum {
  color: var(--gruen-tief);
}

/* Der Feiertagsname im Tageskopf — violett wie im Monat, aber normal geschrieben
   (nicht in Versalien wie das Datum), damit „Christi Himmelfahrt" lesbar bleibt. */
.tag > .datum .feiertag-name {
  color: var(--feier);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.tag > .datum::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.leer {
  color: var(--tinte-3);
  font-size: 0.92rem;
  padding: var(--s2) 0;
}

/* ---------------------------------------------------------------- Schicht */

.schicht {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 var(--s4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gruen);
  border-radius: var(--rand);
  padding: var(--s3) var(--s4);
  min-height: var(--tippziel);
}

.schicht[data-status="abgesagt"] {
  border-left-color: var(--linie);
  opacity: 0.55;
}

.schicht[data-status="abgesagt"] .zeit {
  text-decoration: line-through;
}

.schicht .zeit {
  display: flex;
  flex-direction: column;
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--tinte);
}

.schicht .zeit .bis {
  color: var(--tinte-2);
}

.schicht .zeit .dauer {
  margin-top: 0.15rem;
  color: var(--tinte-3);
  font-size: 0.7rem;
}

.schicht .was {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.schicht .ort {
  font-weight: 600;
  font-size: 0.98rem;
}

.schicht .neben {
  color: var(--tinte-3);
  font-size: 0.82rem;
}

/* ---------------------------------------------------------------- Marken */

.marke {
  /* Zweite Spalte, unter dem Ort — nicht unter der Uhrzeit, wo sie
     die schmale Zahlenspalte auseinanderdrückt. */
  grid-column: 2;
  justify-self: start;
  margin-top: 0.35rem;
  white-space: nowrap;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.16rem 0.42rem;
  border-radius: var(--rand-klein);
  background: var(--flaeche-2);
  color: var(--tinte-2);
}

.marke[data-ton="warnung"] {
  background: var(--warnung-flaeche);
  color: var(--warnung);
}

.marke[data-ton="gefahr"] {
  background: var(--gefahr-flaeche);
  color: var(--gefahr);
}

.marke[data-ton="ok"] {
  background: var(--ok-soft);
  color: var(--ok);
}

/* ---------------------------------------------------------------- Aktionen */

.knoepfe {
  grid-column: 2;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.knoepfe button {
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border-radius: var(--rand-klein);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

/* Zusagen ist der Hauptweg: gefuellt, in der Markenfarbe. */
.zusage button {
  border: 1px solid var(--gruen);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
}

.zusage button:hover {
  background: var(--gruen);
  color: #0d131b;
}

/* Absagen ist der Ausnahmeweg: zurueckhaltend, nur Kontur, ohne Gefahrenrot —
   eine Absage ist kein Fehler, sie soll nur nicht der erste Griff sein. */
.absage button {
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--tinte-3);
}

.absage button:hover {
  border-color: var(--gefahr);
  color: var(--gefahr);
}

/* Stempeln an einer begonnenen Schicht: Kommen/Gehen/erfasst. Sitzt wie die
   Knöpfe in Spalte 2 (Handy) bzw. 3 (Tablet). */
.kommen,
.gehen {
  grid-column: 2;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.gehen .seit {
  flex-basis: 100%;
  font-size: 0.8rem;
  color: var(--tinte-3);
}

.zeitfeld {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: var(--tinte-2);
}

.zeitfeld input {
  min-height: var(--tippziel);
  width: 6rem;
  padding: 0 0.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  /* 16px, damit iOS beim Fokus nicht heranzoomt. */
  font-size: 1rem;
  font-family: inherit;
}

.kommen button,
.gehen button {
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.kommen button:hover,
.gehen button:hover {
  background: var(--gruen);
  color: #0d131b;
}

.erfasst {
  grid-column: 2;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ok);
}

@media (min-width: 40rem) {
  .schicht .knoepfe {
    grid-column: 3;
    margin-top: 0;
    justify-content: flex-end;
  }
}

/* Ein Verstoß gegen die Ruhezeit ist kein Etikett an der Schicht,
   sondern eine Aussage über den Übergang zwischen zwei Schichten. */
.uebergang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  padding: 0.35rem 0.7rem;
  border-left: 2px dashed var(--gefahr);
  color: var(--gefahr);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------- Personenwahl */

.hinweis {
  background: var(--warnung-flaeche);
  color: var(--warnung);
  border-radius: var(--rand);
  padding: 0.8rem 1rem;
  font-size: 0.88rem;
}

.personen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.personen a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: var(--tippziel);
  justify-content: center;
  padding: 0.7rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  text-decoration: none;
  color: var(--tinte);
}

.personen .name {
  font-weight: 600;
}

.personen .neben {
  color: var(--tinte-3);
  font-size: 0.8rem;
}

/* ---------------------------------------------------------------- Team */

.bilanz {
  border-radius: var(--rand);
  padding: var(--s3) var(--s4);
  font-size: 0.95rem;
  font-weight: 600;
}

.bilanz[data-ton="ok"] {
  background: var(--ok-soft);
  color: var(--ok);
}

.bilanz[data-ton="gefahr"] {
  background: var(--gefahr-flaeche);
  color: var(--gefahr);
}

/* Fehlte, seit es „warnung" gibt: ok, gefahr und neutral waren gesetzt, warnung
   nicht — jede Warnung fiel damit auf die Grundschrift zurück und sah aus wie ein
   gewöhnlicher Satz. Betraf jedes Banner der App („Selbstplanung geschlossen",
   „Ausgetreten am …", fehlgeschlagene Übernahmen). Die Farben gab es längst. */
.bilanz[data-ton="warnung"] {
  background: var(--warnung-flaeche);
  color: var(--warnung);
}

.teamschicht {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gruen);
  border-radius: var(--rand);
  padding: 0.75rem 0.95rem;
  min-height: var(--tippziel);
  /* Vom Monatstag angesprungen: nicht bündig unter den Seitenkopf klemmen. */
  scroll-margin-top: 1.5rem;
}

/* Eine Luecke ist kein Zustand der Schicht, sondern ein Auftrag. Sie sticht. */
.teamschicht[data-offen="ja"] {
  border-left-color: var(--gefahr);
}

/* Kommt man aus dem Monat direkt auf eine Schicht, hebt sie sich kurz hervor,
   damit man sieht, wo man gelandet ist. Reines CSS — der Anker aus der URL. */
.teamschicht:target {
  box-shadow: 0 0 0 2px var(--tinte-3);
}

.teamschicht .zeit {
  display: flex;
  flex-direction: column;
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--tinte);
}

.teamschicht .zeit .bis {
  color: var(--tinte-2);
}

.teamschicht .was {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.teamschicht .ort {
  font-weight: 600;
  font-size: 0.95rem;
}

.teamschicht .neben {
  color: var(--tinte-3);
  font-size: 0.82rem;
}

.teamschicht[data-offen="ja"] .neben {
  color: var(--gefahr);
}

.teamschicht .marke {
  grid-column: 2;
  justify-self: start;
  margin-top: 0.35rem;
}

@media (min-width: 40rem) {
  .teamschicht {
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
  }
  .teamschicht .marke {
    grid-column: 3;
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------- Monat */

.bilanz[data-ton="neutral"] {
  background: var(--flaeche-2);
  color: var(--tinte-2);
  font-weight: 400;
}

/* Die Frei-Bilanz gehört zur Besetzungs-Bilanz, ordnet sich ihr aber unter:
   dieselbe blaue Sprache wie die Badges, leiser als die Hauptzeile. */
.frei-bilanz {
  margin-top: -1rem;
  border-radius: var(--rand);
  padding: 0.55rem 1rem;
  background: var(--frei-flaeche);
  color: var(--frei);
  font-size: 0.88rem;
  font-weight: 500;
}

/* Die Ausgleich-Bilanz: dieselbe leise Zeile wie die Frei-Bilanz, nur grün — ein
   Ausgleichstag ist ein verdienter Tag, kein bloßes „jemand frei". */
.ausgleich-bilanz {
  margin-top: -1rem;
  border-radius: var(--rand);
  padding: 0.55rem 1rem;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 0.88rem;
  font-weight: 500;
}

.monat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.monat .kopfzeile,
.monat .gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
}

.monat .kopfzeile span {
  text-align: center;
  font-family: var(--zahl);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

.monat .zelle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  /* Quadratisch, damit das Gitter auf jedem Handy aufgeht. */
  aspect-ratio: 1;
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinte);
}

.monat .nummer {
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  line-height: 1;
}

/* Tage des Nachbarmonats: sichtbar, aber ohne Anspruch. */
.monat .zelle[data-fremd="ja"] {
  background: transparent;
  border-color: transparent;
}

.monat .zelle[data-fremd="ja"] .nummer {
  color: var(--tinte-3);
}

.monat .zelle[data-heute="ja"] {
  border-color: var(--gruen);
  border-width: 2px;
}

.monat .zelle[data-heute="ja"] .nummer {
  color: var(--gruen-tief);
  font-weight: 700;
}

.monat .punkte {
  display: flex;
  gap: 2px;
  min-height: 5px;
}

.monat .punkte i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gruen);
}

.monat .zelle[data-fremd="ja"] .punkte i {
  background: var(--tinte-3);
}

/* Der Umschalter Woche/Monat sitzt ganz rechts. */
.wochennavi .wechsel {
  margin-left: auto;
  padding-inline: 0.7rem;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--gruen-tief);
}

/* Steht ein Wechsel daneben, verliert "Heute" seinen Anspruch auf den Rand. */
.wochennavi .heute:has(~ .wechsel) {
  margin-left: auto;
}

.wochennavi .heute + .wechsel {
  margin-left: 0;
}

.wochennavi .kw.monat {
  min-width: 8.5rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------- Wochennavi */

.wochennavi {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 44rem;
  margin-inline: auto;
  padding: 0.6rem max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
}

.wochennavi a,
.wochennavi .kw,
.wochennavi .heute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tippziel);
  min-width: var(--tippziel);
  border-radius: var(--rand-klein);
  text-decoration: none;
  color: var(--tinte-2);
}

.wochennavi .kw {
  font-family: var(--zahl);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  color: var(--tinte);
}

.wochennavi .heute {
  margin-left: auto;
  padding-inline: 0.8rem;
  font-size: 0.8rem;
}

.wochennavi a.heute {
  color: var(--gruen-tief);
}

/* Die aktuelle Woche ist kein Link, sondern eine Aussage. */
.wochennavi span.heute {
  color: var(--tinte-3);
}

.wochennavi svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- Druck

   Der Rueckfallplan: ein Server, ein Ausfallpunkt. Wenn die App steht, muss
   der Plan trotzdem an der Wand haengen koennen. */

@media print {
  :root {
    --grund: #fff;
    --flaeche: #fff;
    --tinte: #000;
    --tinte-2: #333;
    --tinte-3: #555;
    --linie: #bbb;
  }

  .leiste,
  .wochennavi,
  .hinweis {
    display: none;
  }

  .huelle {
    padding-bottom: 0;
  }

  .kopf {
    position: static;
    backdrop-filter: none;
  }

  main {
    max-width: none;
    gap: 0.8rem;
  }

  /* Ein Tag darf nicht ueber den Seitenumbruch zerfallen. */
  .tag,
  .schicht {
    break-inside: avoid;
  }

  .schicht {
    border: 1px solid var(--linie);
    border-left-width: 3px;
  }

  .uebergang {
    color: #000;
    font-weight: 600;
  }
}

/* -------------------------------------------------------------- Schnellzugriff */

.schnellzugriff {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.schnellzugriff a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippziel);
  padding: 0 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  color: var(--gruen-tief);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------- Abwesenheit */

.abw-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tippziel);
  color: var(--gruen-tief);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.abw-link::after {
  content: "→";
  margin-left: 0.4rem;
}

.antrag {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1.1rem;
}

.antrag label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--tinte-2);
}

.antrag .von-bis {
  display: flex;
  gap: 0.8rem;
}

.antrag .von-bis label {
  flex: 1;
}

.antrag select,
.antrag input[type="date"] {
  min-height: var(--tippziel);
  padding: 0 0.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  /* 16px, damit iOS das Feld beim Fokus nicht heranzoomt. */
  font-size: 1rem;
  font-family: inherit;
}

.antrag button {
  min-height: var(--tippziel);
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.antrag button:hover {
  background: var(--gruen);
  color: #0d131b;
}

/* ---------------------------------------------------------------- Anmelden */

.anmelden {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1.1rem;
}

.anmelden label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--tinte-2);
}

.anmelden input[type="email"] {
  min-height: var(--tippziel);
  padding: 0 0.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  /* 16px, damit iOS das Feld beim Fokus nicht heranzoomt. */
  font-size: 1rem;
  font-family: inherit;
}

.anmelden button {
  min-height: var(--tippziel);
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.anmelden button:hover {
  background: var(--gruen);
  color: #0d131b;
}

.anmelde-hinweis {
  margin-top: 0.6rem;
  color: var(--tinte-3);
  font-size: 0.85rem;
}

.angemeldet {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: var(--s4);
}

.angemeldet .wer {
  font-size: 1rem;
}

.angemeldet .rolle {
  margin-left: 0.4rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--rand-klein);
  background: var(--flaeche-2);
  color: var(--tinte-2);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.angemeldet .abmelden {
  align-self: flex-start;
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Der Schnellweg zur Krankmeldung: eine Zeile mit Hinweis und einem Knopf, klar
   abgesetzt vom grünen „Beantragen". Amber, weil es der Ausnahmeweg ist, nicht
   der Alltag. Auf engem Schirm bricht der Knopf unter den Text. */
.krankmeldung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.9rem 1.1rem;
}

.krankmeldung .was {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.krankmeldung .titel {
  font-weight: 600;
}

.krankmeldung .hinweis {
  color: var(--tinte-3);
  font-size: 0.82rem;
}

.krankmeldung button {
  flex: none;
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border: 1px solid var(--warnung);
  border-radius: var(--rand-klein);
  background: var(--warnung-flaeche);
  color: var(--warnung);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.abw-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.abw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.75rem 0.95rem;
}

.abw[data-status="abgelehnt"] {
  opacity: 0.6;
}

.abw .art {
  font-weight: 600;
  font-size: 0.95rem;
}

.abw .neben {
  display: block;
  color: var(--tinte-3);
  font-size: 0.82rem;
}

/* Krankschreibung an einer Krankmeldung: angehängte AU-PDFs und das
   Anhängen-Formular, unter dem Zeitraum. */
.abw-was .au {
  margin-top: 0.4rem;
}

.au-liste {
  list-style: none;
  margin: 0 0 0.3rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.82rem;
}

/* Personenliste — wie die Abwesenheitsliste aufgebaut: Zeile mit Name/E-Mail
   links, Rollen-Marke rechts. */
.person-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.75rem 0.95rem;
}

.person .name {
  font-weight: 600;
  font-size: 0.95rem;
}

.person .neben {
  display: block;
  color: var(--tinte-3);
  font-size: 0.82rem;
}

/* Planer ohne Vertrag bei jeder Gesellschaft: derselbe Platz wie die E-Mail, aber
   nicht dieselbe Beiläufigkeit — es ist eine Lücke, die jemand schließen muss. */
.person .neben[data-ton="warnung"] {
  color: var(--warnung);
  font-weight: 600;
}

.antrag .optional {
  color: var(--tinte-3);
  font-weight: 400;
}

/* Kopf der Personen-Detailseite: Name mit Rollen-Marke, darunter Kontakt. */
.person-kopf {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.person-kopf .wer {
  font-size: 1.1rem;
}

.person-kopf .rolle {
  margin-left: 0.4rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--rand-klein);
  background: var(--flaeche-2);
  color: var(--tinte-2);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.person-kopf .neben {
  color: var(--tinte-3);
  font-size: 0.85rem;
}

/* Arbeitszeitnachweis: Summen je Gesellschaft, dann die Zeiten je Tag. */
.nachweis-summe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.6rem 0 0.2rem;
  font-size: 0.9rem;
  color: var(--tinte-2);
}

.nachweis-summe .gesamt {
  color: var(--tinte);
}

/* Der Export sitzt am rechten Rand der Summenzeile — griffbereit, aber ruhig. */
.nachweis-summe .csv-export {
  margin-left: auto;
  font-size: 0.82rem;
  white-space: nowrap;
}

.zeit-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.zeit-eintrag {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.75rem 0.95rem;
}

.zeit-eintrag .zeitspanne {
  font-weight: 600;
  font-size: 0.95rem;
}

.zeit-eintrag .neben {
  display: block;
  color: var(--tinte-3);
  font-size: 0.82rem;
}

/* Die Korrektur liegt eingeklappt unter jeder Zeile — der Ausnahmeweg, nicht der Alltag. */
.korrektur,
.storno,
.nacherfassen,
.stammdaten,
.beenden,
.austritt {
  margin-top: 0.5rem;
}

.korrektur > summary,
.storno > summary,
.nacherfassen > summary,
.stammdaten > summary,
.beenden > summary,
.austritt > summary {
  cursor: pointer;
  color: var(--tinte-3);
  font-size: 0.82rem;
  width: fit-content;
}

.korrektur > .antrag,
.storno > .antrag,
.nacherfassen > .antrag,
.stammdaten > .antrag,
.beenden > .antrag,
.austritt > .antrag {
  margin-top: 0.6rem;
}

/* Austritt/Reaktivierung: eigener Block unter den Verträgen. */
.austritt-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.austritt .hinweis {
  color: var(--tinte-3);
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

/* Das Nacherfassen steht über der Liste als eigener, ruhiger Block. */
.nacherfassen {
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.75rem 0.95rem;
  background: var(--flaeche);
}

/* Storno ist der Ausnahmeweg — der Knopf trägt die Warnfarbe, nicht das Grün. */
button.warnung {
  background: var(--gefahr-flaeche);
  color: var(--gefahr);
}

.storno .hinweis {
  color: var(--tinte-3);
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

/* Abwesend-Band im Team-Plan: wer an diesem Tag frei ist. Ruhig gehalten,
   damit es die Besetzungsluecken nicht ueberstrahlt — es ist Kontext, kein Alarm. */
.abwesend-band {
  font-size: 0.85rem;
  color: var(--tinte-2);
  line-height: 1.5;
}

.abwesend-band .etikett {
  font-family: var(--zahl);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-right: 0.4rem;
}

.abwesend-band .wer {
  font-weight: 600;
}

.abwesend-band .grund {
  color: var(--tinte-3);
}

/* Wochentag-Kaestchen fuer die Serie: sieben gleich breite Tippziele. */
.wochentage {
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  padding: 0.6rem 0.7rem 0.7rem;
  margin: 0;
}

.wochentage legend {
  padding: 0 0.3rem;
  font-size: 0.82rem;
  color: var(--tinte-2);
}

.wochentage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
}

.wochentage legend {
  grid-column: 1 / -1;
}

.tag-kaestchen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-height: var(--tippziel);
  justify-content: center;
  border-radius: var(--rand-klein);
  font-size: 0.78rem;
  color: var(--tinte-2);
  cursor: pointer;
}

/* Ausgewaehlter Tag: gruen unterlegt, damit die Auswahl auf einen Blick steht. */
.tag-kaestchen:has(input:checked) {
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font-weight: 600;
}

.tag-kaestchen input {
  width: 18px;
  height: 18px;
  accent-color: var(--gruen);
}

/* Zwei Planer-Aktionen nebeneinander ueber dem Team-Plan. */
.team-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

/* Offene Anträge sind eine wartende Bitte, kein Menüpunkt. Amber wie eine
   Aufgabe, mit einer Zahl, die ins Auge fällt — und dem ganzen Balken als
   Tippziel, nicht nur dem Wort. */
.genehmigung-hinweis {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--tippziel);
  padding: 0.6rem 0.9rem;
  border-radius: var(--rand);
  border: 1px solid var(--warnung);
  background: var(--warnung-flaeche);
  color: var(--warnung);
  text-decoration: none;
  font-weight: 600;
}

.genehmigung-hinweis .zahl {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: 0.8rem;
  background: var(--warnung);
  color: var(--warnung-flaeche);
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.genehmigung-hinweis .text {
  flex: 1;
}

.genehmigung-hinweis::after {
  content: "→";
  flex: none;
}

/* Die Guthaben-Leiste auf „Mein Plan": Ausgleich und Resturlaub nebeneinander,
   auf schmalen Schirmen untereinander. */
.guthaben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.guthaben > * {
  flex: 1 1 14rem;
}

/* Ausgleich grün (ein verdientes Guthaben, kein Alarm), Urlaub blau (die Farbe
   der Abwesenheit) — sonst gleich aufgebaut: Zahl, Satz, Pfeil. */
.ausgleich-hinweis,
.urlaub-hinweis {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: var(--tippziel);
  padding: 0.6rem 0.9rem;
  border-radius: var(--rand);
  border: 1px solid var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
  text-decoration: none;
  font-weight: 600;
}

.ausgleich-hinweis .zahl,
.urlaub-hinweis .zahl {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: 0.8rem;
  background: var(--ok);
  color: var(--ok-soft);
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.ausgleich-hinweis .text,
.urlaub-hinweis .text {
  flex: 1;
  font-weight: 500;
}

.ausgleich-hinweis .tipp,
.urlaub-hinweis .tipp {
  font-weight: 600;
  text-decoration: underline;
}

.ausgleich-hinweis::after,
.urlaub-hinweis::after {
  content: "→";
  flex: none;
}

/* Resturlaub blau. Ist er aufgebraucht oder überzogen (data-knapp), wird die
   Kachel amber — ein Hinweis, keine Feier. */
.urlaub-hinweis {
  border-color: var(--frei);
  background: var(--frei-flaeche);
  color: var(--frei);
}

.urlaub-hinweis .zahl {
  background: var(--frei);
  color: var(--frei-flaeche);
}

.urlaub-hinweis[data-knapp="ja"] {
  border-color: var(--warnung);
  background: var(--warnung-flaeche);
  color: var(--warnung);
}

.urlaub-hinweis[data-knapp="ja"] .zahl {
  background: var(--warnung);
  color: var(--warnung-flaeche);
}

/* ---------------------------------------------------------------- Besetzen */

.besetzen-link {
  grid-column: 2;
  justify-self: start;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gruen-tief);
  text-decoration: none;
}

.besetzen-link::before {
  content: "+ ";
}

.schichtkopf {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1rem 1.1rem;
}

.schichtkopf .neben {
  color: var(--tinte-3);
  font-size: 0.85rem;
}

.schichtkopf .stand {
  font-size: 0.92rem;
  color: var(--tinte-2);
}

.besetzen {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 1.1rem;
}

.besetzen label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--tinte-2);
}

.besetzen select {
  min-height: var(--tippziel);
  padding: 0 0.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  font-size: 1rem;
  font-family: inherit;
}

.besetzen button {
  min-height: var(--tippziel);
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.besetzen button:hover {
  background: var(--gruen);
  color: #0d131b;
}

.zurueck {
  align-self: flex-start;
  min-height: var(--tippziel);
  display: inline-flex;
  align-items: center;
  color: var(--tinte-3);
  font-size: 0.88rem;
}

/* ---------------------------------------------------------------- Urlaubskonto */

/* Das Ausgleichskonto teilt das Aussehen des Urlaubskontos — dieselbe Sprache
   für „so viele Tage hast du". Nur die kleine Zahl (1.25rem) ist etwas ruhiger,
   weil das Guthaben meist einstellig ist und keine Schlagzeile braucht. */
.urlaubskonto,
.ausgleichskonto {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--flaeche-2);
  border-radius: var(--rand);
  padding: 0.9rem 1.1rem;
}

.urlaubskonto .gross,
.ausgleichskonto .gross {
  font-family: var(--serife);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gruen-tief);
}

.ausgleichskonto .gross {
  font-size: 1.25rem;
}

.urlaubskonto .klein,
.ausgleichskonto .klein {
  color: var(--tinte-2);
  font-size: 0.88rem;
}

/* Ueberzogen: die grosse Zahl wird zur Warnung, nicht mehr gruen. */
.urlaubskonto[data-knapp="ja"] .gross,
.ausgleichskonto[data-knapp="ja"] .gross {
  color: var(--gefahr);
}

/* Die aufklappbare Liste der einzelnen Ausgleichstage (verdient/genommen). */
.ausgleich-tage {
  margin-top: 0.4rem;
  font-size: 0.88rem;
}

.ausgleich-tage > summary {
  cursor: pointer;
  color: var(--gruen-tief);
  font-weight: 600;
  min-height: var(--tippziel);
  display: inline-flex;
  align-items: center;
}

.ausgleich-tage .klein {
  margin: 0.5rem 0 0.2rem;
  color: var(--tinte-3);
  font-weight: 600;
}

.ausgleich-tage ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--tinte-2);
}

/* Kleine Zusatzzeile unter dem Zeitraum: Resturlaub/Ausgleich in der
   Genehmigungsliste und die Schichtwarnung in der eigenen Abwesenheitsliste. */
.antrag-offen .rest,
.abw-was .rest {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--tinte-3);
}

.antrag-offen .rest[data-knapp="ja"],
.abw-was .rest[data-knapp="ja"] {
  color: var(--gefahr);
  font-weight: 600;
}

/* ---------------------------------------------------------------- Genehmigung */

.antrag-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.antrag-offen {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.9rem 0.95rem;
  /* Vom Monat angesprungen: nicht bündig unter den Seitenkopf klemmen. */
  scroll-margin-top: 1.5rem;
}

/* Aus dem Monat direkt auf einen Antrag gesprungen: er hebt sich kurz hervor,
   damit man sieht, welchen man entscheidet. Reines CSS, der Anker aus der URL. */
.antrag-offen:target {
  border-color: var(--warnung);
  box-shadow: 0 0 0 2px var(--warnung);
}

.antrag-offen .person {
  font-weight: 600;
  font-size: 0.98rem;
}

.antrag-offen .neben {
  display: block;
  color: var(--tinte-3);
  font-size: 0.85rem;
}

/* Die Knopfgruppe erbt Zusage/Absage-Stile: Genehmigen gefuellt gruen,
   Ablehnen zurueckhaltend. Nur der Abstand zur Kopfzeile ist neu. */
.antrag-offen .knoepfe {
  grid-column: auto;
  margin-top: 0;
}

/* Entschiedene Anträge stehen nur zum Nachsehen da: eine Zeile, links wer/wann,
   rechts die Marke, wie es ausging. Kein Knopf, keine zweite Entscheidung. */
.entschieden {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.entschieden h2 {
  color: var(--tinte-2);
}

.antrag-erledigt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.7rem 0.95rem;
}

/* Der Info-Block nimmt die Breite, Marke und Knopf setzen sich rechts ab. Auf
   engem Schirm bricht der Knopf um, statt die Zeile zu quetschen. */
.antrag-erledigt .antrag-was {
  flex: 1 1 12rem;
  min-width: 0;
}

.antrag-erledigt .person {
  font-weight: 600;
  font-size: 0.95rem;
}

.antrag-erledigt .neben {
  display: block;
  color: var(--tinte-3);
  font-size: 0.85rem;
}

.antrag-erledigt .entschied {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--tinte-3);
}

.antrag-erledigt .marke {
  flex: none;
  align-self: center;
  margin-top: 0;
}

.antrag-erledigt .oeffnen button {
  min-height: var(--tippziel);
  padding-inline: 0.9rem;
  border-radius: var(--rand-klein);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------------------------------------------------------------- Leiste */

.leiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--flaeche) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}

.leiste a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: var(--tippziel);
  padding: 0.5rem 0.25rem;
  text-decoration: none;
  color: var(--tinte-3);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.leiste a[aria-current="page"] {
  color: var(--gruen-tief);
}

.leiste svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- Ab Tablet */

@media (min-width: 40rem) {
  h1 {
    font-size: 1.85rem;
  }

  .schicht {
    grid-template-columns: 5.5rem 1fr auto;
    align-items: center;
  }

  .schicht .marke {
    grid-column: 3;
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- Tauschbörse */

/* Zwei Links über dem eigenen Plan, wie die Planer-Aktionen über dem Team-Plan. */
.plan-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
}

/* „Heute krankmelden" auf dem Startschirm — derselbe amberfarbene Ausnahmeknopf
   wie unter „Abwesenheit", damit die Meldung wirklich in einem Tipp geht. */
.krank-schnell button {
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border: 1px solid var(--warnung);
  border-radius: var(--rand-klein);
  background: var(--warnung-flaeche);
  color: var(--warnung);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Tauschen steht neben Zu-/Absagen und ist ein ruhiger Weg: nur Kontur, ohne
   Markenfarbe im Ruhezustand — abgeben ist die Ausnahme, nicht der Griff zuerst. */
.tausch button,
button.leise {
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--tinte-3);
}

.tausch button:hover,
button.leise:hover {
  border-color: var(--gruen);
  color: var(--gruen-tief);
}

.tausch-block {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

.tausch-block h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinte-2);
}

.tauschkarte {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.9rem 1.1rem;
}

.tauschkarte .zeit,
.tauschkarte .was,
.tauschkarte .anbieter {
  grid-column: 1;
}

.tauschkarte .zeit {
  display: flex;
  flex-direction: column;
}

.tauschkarte .zeit .von {
  font-weight: 600;
}

.tauschkarte .zeit .bis {
  font-size: 0.85rem;
  color: var(--tinte-3);
}

.tauschkarte .was {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}

.tauschkarte .was .neben {
  font-size: 0.85rem;
  color: var(--tinte-3);
}

.tauschkarte .anbieter {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--tinte-2);
}

.tausch-aktion {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}

.tausch-aktion button {
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border-radius: var(--rand-klein);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

/* Übernehmen ist der Hauptweg auf dem Brett: gefüllt, in der Markenfarbe. */
.tauschkarte[data-art="offen"] .tausch-aktion button {
  border: 1px solid var(--gruen);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
}

.tauschkarte[data-art="offen"] .tausch-aktion button:hover {
  background: var(--gruen);
  color: #0d131b;
}

/* ---------------------------------------------------------------- Standortfilter */

/* Die Filterleiste über dem Team-Plan. Je Gesellschaft eine Gruppe, damit die
   beiden GmbHs sichtbar getrennt bleiben. Reine Links, waagerecht scrollbar,
   wenn es eng wird — statt umzubrechen und die Woche nach unten zu drücken. */
.standortfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  margin-bottom: 1rem;
}

.standortfilter .gruppe {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.standortfilter .gruppenname {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-right: 0.1rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--tinte-2);
  background: var(--flaeche);
  text-decoration: none;
}

.chip:hover {
  border-color: var(--gruen);
  color: var(--gruen-tief);
}

/* Der gewählte Standort: gefüllt in der Markenfarbe, kein Link mehr. */
.chip[aria-current="true"] {
  border-color: var(--gruen);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
}

/* ---------------------------------------------------------------- Kandidatenliste */

/* Wer für eine Schicht in Frage kommt — je Person eine Zeile mit eigenem Knopf,
   damit die Warnung daneben Platz hat. Ersetzt das frühere Auswahlfeld. */
.kandidaten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kandidat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.7rem 0.9rem;
}

/* Eine Warnung färbt den linken Rand, ohne die Zeile zu verschreien. */
.kandidat[data-warnung="ja"] {
  border-left: 3px solid var(--warnung);
}

.kandidat .wer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.kandidat .name {
  font-weight: 600;
}

.kandidat form {
  margin: 0;
  flex: none;
}

.kandidat button {
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.kandidat button:hover {
  background: var(--gruen);
  color: #0d131b;
}

/* ---------------------------------------------------------- Offene Schichten */

/* Wochen-Soll/Ist der Selbstplanung. Wer unter dem Soll liegt, wird knapp markiert. */
.sollkonto {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sollzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0.75rem;
  background: var(--flaeche-2);
  border-radius: var(--rand-klein);
}

.sollzeile .ges {
  font-weight: 600;
  font-size: 0.9rem;
}

.sollzeile .stunden {
  color: var(--tinte-3);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.sollzeile[data-knapp="ja"] .stunden {
  color: var(--warnung);
}
.sollzeile[data-knapp="ja"] .stunden strong {
  color: var(--warnung);
}

.offen-tag > h2 {
  margin-bottom: 0.5rem;
}

.offen-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.offen-schicht {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.7rem 0.9rem;
}

.offen-schicht[data-warnung="ja"] {
  border-left: 3px solid var(--warnung);
}

.offen-was {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  min-width: 0;
}

.offen-was .zeit {
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.9rem;
}

.offen-was .ort {
  font-weight: 600;
  font-size: 0.9rem;
}

.offen-was .neben {
  color: var(--tinte-3);
  font-size: 0.82rem;
}

.offen-was .rest {
  flex-basis: 100%;
  color: var(--tinte-3);
  font-size: 0.8rem;
}

.offen-was .marken {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.offen-schicht form {
  margin: 0;
  flex: none;
}

.offen-schicht button {
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.offen-schicht button:hover {
  background: var(--gruen);
  color: #0d131b;
}

/* Hinweis, bis wann die Selbstplanung offen ist. */
.frist-offen {
  padding: 0.5rem 0.75rem;
  background: var(--flaeche-2);
  border-radius: var(--rand-klein);
  font-size: 0.85rem;
  color: var(--tinte-2);
}

/* Planer-Steuerung der Frist, eingeklappt im Team-Plan. */
.frist-steuerung > summary {
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gruen-tief);
  padding: 0.3rem 0;
}

.frist-steuerung .hinweis {
  margin: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--tinte-3);
}

.frist-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Vorschlagsliste der Auto-Zuweisung. */
.auto-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auto-zeile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gruen);
  border-radius: var(--rand);
  padding: 0.7rem 0.9rem;
}

.auto-zeile .name {
  font-weight: 600;
  font-size: 0.95rem;
}

.auto-zeile .neben {
  color: var(--tinte-3);
  font-size: 0.82rem;
}

/* Die von einer Schicht geforderte Qualifikation, im Besetzen-Kopf. */
.schichtkopf .fordert {
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gruen-tief);
}

/* ---------------------------------------------------------------- Qualifikationen */

.qual-person {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}

.qual-person h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.qual-chips {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Ein Schein: Name, Zusatz (Ablauf), und ein kleiner Weg ihn zu entfernen. */
.qual-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.3rem 0.2rem 0.7rem;
  border: 1px solid var(--gruen);
  border-radius: 999px;
  background: var(--gruen-schleier);
  font-size: 0.82rem;
}

.qual-chip .qual-name {
  font-weight: 600;
  color: var(--gruen-tief);
}

.qual-chip .qual-zusatz {
  color: var(--tinte-3);
  font-size: 0.76rem;
}

/* Abgelaufen: blass und grau, nicht mehr in der Markenfarbe. */
.qual-chip[data-gueltig="nein"] {
  border-color: var(--linie);
  background: var(--flaeche-2);
}

.qual-chip[data-gueltig="nein"] .qual-name {
  color: var(--tinte-3);
  text-decoration: line-through;
}

.qual-chip form {
  margin: 0;
}

.qual-chip .entfernen {
  min-width: 1.6rem;
  min-height: 1.6rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tinte-3);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.qual-chip .entfernen:hover {
  background: var(--gefahr-flaeche);
  color: var(--gefahr);
}

/* Das Erteilen-Feld: Auswahl, Ablauf, Knopf — nebeneinander, wenn Platz ist. */
.qual-erteilen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
}

.qual-erteilen label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--tinte-2);
}

.qual-erteilen select,
.qual-erteilen input {
  min-height: var(--tippziel);
  padding: 0 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-size: 0.95rem;
}

.qual-erteilen button {
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.qual-erteilen button:hover {
  background: var(--gruen);
  color: #0d131b;
}

/* Schicht löschen: der Ausnahmeweg auf der Besetzen-Seite. Nur Kontur, mit
   Abstand nach oben — soll nicht neben den Zuweisen-Knöpfen als Alltag stehen. */
.loeschen {
  margin-top: 1.4rem;
}

.loeschen button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  min-height: var(--tippziel);
  padding: 0.4rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: transparent;
  color: var(--tinte-3);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.loeschen button:hover {
  border-color: var(--gefahr);
  color: var(--gefahr);
}

.loeschen .hinweis {
  font-size: 0.74rem;
  font-weight: 400;
  color: var(--tinte-3);
}

/* Schicht ändern: ein Aufklapper auf der Besetzen-Seite, damit das Einteilen im
   Vordergrund bleibt. Das Formular erbt die .antrag-Feldoptik über .von-bis. */
.bearbeiten {
  margin: 0.4rem 0 0.2rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  background: var(--flaeche);
}

.bearbeiten > summary {
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gruen-tief);
  cursor: pointer;
}

.bearbeiten[open] > summary {
  border-bottom: 1px solid var(--linie);
}

.bearbeiten form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.9rem 1rem 1.1rem;
}

.bearbeiten label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--tinte-2);
}

/* Arbeitsbereich der ganzen Serie ändern — wie das Bearbeiten eingeklappt. */
.serie-standort {
  margin: 0.2rem 0;
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  background: var(--flaeche);
}

.serie-standort > summary {
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gruen-tief);
  cursor: pointer;
}

.serie-standort[open] > summary {
  border-bottom: 1px solid var(--linie);
}

.serie-standort form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.9rem 1rem 1.1rem;
}

.serie-standort label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--tinte-2);
}

.serie-standort .hinweis {
  font-size: 0.85rem;
  color: var(--tinte-2);
}

/* Ganze Serie löschen — wie das Bearbeiten eingeklappt, aber mit Warn-Akzent. */
.serie-loeschen {
  margin: 0.2rem 0 0.4rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  background: var(--flaeche);
}

.serie-loeschen > summary {
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gefahr);
  cursor: pointer;
}

.serie-loeschen[open] > summary {
  border-bottom: 1px solid var(--linie);
}

.serie-loeschen form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.9rem 1rem 1.1rem;
}

.serie-loeschen label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--tinte-2);
}

.serie-loeschen .hinweis {
  font-size: 0.85rem;
  color: var(--tinte-2);
}

.bearbeiten .von-bis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.bearbeiten input,
.bearbeiten select {
  min-height: var(--tippziel);
  padding: 0 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-size: 1rem;
}

.bearbeiten button {
  align-self: flex-start;
  min-height: var(--tippziel);
  padding-inline: 1.2rem;
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.bearbeiten button:hover {
  background: var(--gruen);
  color: #0d131b;
}

/* Qualifikationsanforderung im Team-Plan. „erfordert WOD" grün; wer eingeteilt
   ist, aber den Schein nicht hat, wird warnend genannt und die Zeile bekommt
   einen amberfarbenen Rand — der Plan zeigt nicht nur Lücken, auch Fehlbesetzung. */
.teamschicht .fordert {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gruen-tief);
}

.teamschicht .fordert .fehlt {
  color: var(--warnung);
}

/* Wer an dem Tag über zehn Stunden käme — im Team-Plan warnend. */
.teamschicht .ueberzeit {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warnung);
}

/* Eine eingeteilte, aber abwesende Person — die Schicht muss vertreten werden.
   Rot, nicht amber: das ist eine echte Lücke, kein bloßer ArbZG-Hinweis. */
.teamschicht .vertretung {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gefahr);
}

.teamschicht[data-warnt="ja"] {
  border-left: 3px solid var(--warnung);
}

/* ---------------------------------------------------------------- Stammdaten */

.stamm-block {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
}

.stamm-block h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.stamm-gruppe {
  margin-bottom: 0.6rem;
}

.stamm-gruppe .gruppenname {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tinte-3);
}

.stamm-liste {
  list-style: none;
  margin: 0.2rem 0 0.9rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stamm-liste li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.stamm-marke {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
}

.stamm-marke[data-ton="aus"] {
  background: var(--flaeche-2);
  color: var(--tinte-3);
}

/* Das Anlege-Feld je Block. */
.stamm-anlegen {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linie);
}

.stamm-anlegen label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--tinte-2);
}

.stamm-anlegen label.ankreuz {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tippziel);
}

.stamm-anlegen input[type="text"],
.stamm-anlegen select {
  min-height: var(--tippziel);
  padding: 0 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-size: 0.95rem;
}

.stamm-anlegen input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gruen);
}

.stamm-anlegen button {
  min-height: var(--tippziel);
  padding-inline: 1.1rem;
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.stamm-anlegen button:hover {
  background: var(--gruen);
  color: #0d131b;
}

/* Bearbeiten je Stammdaten-Zeile: ein kleiner Aufklapper mit Umbenennen (und
   bei Kostenstellen dem Aktiv-Schalter). Hält die Liste ruhig. */
.stamm-liste li {
  flex-wrap: wrap;
}

.stamm-name {
  font-weight: 500;
}

.stamm-bearbeiten {
  flex-basis: 100%;
  margin-top: 0.2rem;
}

.stamm-bearbeiten > summary {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gruen-tief);
  cursor: pointer;
}

.stamm-bearbeiten form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.stamm-bearbeiten input[type="text"] {
  min-height: var(--tippziel);
  padding: 0 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--rand-klein);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  font-size: 0.95rem;
}

.stamm-bearbeiten button {
  min-height: var(--tippziel);
  padding-inline: 0.9rem;
  border: 1px solid var(--gruen);
  border-radius: var(--rand-klein);
  background: var(--gruen-schleier);
  color: var(--gruen-tief);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.stamm-bearbeiten button.leise {
  border-color: var(--linie);
  background: transparent;
  color: var(--tinte-3);
}

.stamm-bearbeiten button.leise:hover {
  border-color: var(--gefahr);
  color: var(--gefahr);
}

/* Team-Monat: die Zelle zeigt die Zahl der Schichten, gefärbt nach Status —
   rot bei unbesetzt, amber bei Warnung, grün wenn alles passt. */
.monat-team .zelle .zahl {
  font-family: var(--zahl);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  min-height: 0.82rem;
}

.monat-team .zelle .zahl.leer {
  visibility: hidden;
}

.monat-team .zelle[data-status="ok"] .zahl {
  color: var(--gruen-tief);
}

.monat-team .zelle[data-status="warnung"] {
  border-color: var(--warnung);
}

.monat-team .zelle[data-status="warnung"] .zahl {
  color: var(--warnung);
}

.monat-team .zelle[data-status="offen"] {
  border-color: var(--gefahr);
  background: var(--gefahr-flaeche);
}

.monat-team .zelle[data-status="offen"] .zahl {
  color: var(--gefahr);
}

/* Randtage bleiben blass, egal welcher Status. */
.monat-team .zelle[data-fremd="ja"] {
  opacity: 0.5;
}

/* Das Frei-Badge sitzt in der Ecke, damit es die Schichtzahl in der Mitte nicht
   verdrängt. Blau statt einer Statusfarbe: Abwesenheit ist eine Information neben
   der Besetzung, kein Zustand der Besetzung. */
.monat-team .zelle {
  position: relative;
}

.monat-team .frei {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--frei-flaeche);
  color: var(--frei);
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Der Ausgleichstag-Marker — grün (ein verdienter Tag), oben links, gegenüber dem
   blauen Frei-Badge. Gilt in beiden Monatsansichten (Team wie persönlich). */
.monat .zelle {
  position: relative;
}

.monat .zelle .ausgleich {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: var(--ok-soft);
  color: var(--ok);
  font-family: var(--zahl);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Feiertag: ein violetter Schleier über der Zelle — der Tag ist besonders, auch
   ohne dass man den Namen liest. Gilt in beiden Monatsansichten (Team wie
   persönlich). Nicht über eine offene (rote) Zelle: die Lücke ist dringender als
   die Information. Der Name steht in title und aria-label. */
.monat .zelle[data-feiertag="ja"]:not([data-status="offen"]) {
  background: var(--feier-flaeche);
  border-color: var(--feier);
}

/* Die Feiertagsliste unter dem Gitter — nur zum Nachschlagen, mit Namen. */
.monat-feiertage h2 {
  margin-bottom: 0.6rem;
}

.monat-feiertage ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.monat-feiertage li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.monat-feiertage .tag {
  flex: none;
  min-width: 3.2rem;
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  color: var(--feier);
  font-weight: 600;
}

.monat-feiertage .name {
  color: var(--tinte-2);
}

/* Die „Zu entscheiden"-Liste unter dem Gitter: offene Anträge, die in den Monat
   fallen. Jede Zeile führt per Anker direkt auf ihren Antrag zum Entscheiden. */
.monat-antraege h2 {
  margin-bottom: 0.6rem;
}

.monat-antraege ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.monat-antraege a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: var(--tippziel);
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--warnung);
  border-radius: var(--rand);
  background: var(--warnung-flaeche);
  text-decoration: none;
}

.monat-antraege .person {
  color: var(--warnung);
  font-weight: 600;
}

.monat-antraege .neben {
  color: var(--tinte-2);
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------- Wochenstunden */

.ws-person {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.9rem;
}

.ws-person h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.ws-vertrag + .ws-vertrag {
  margin-top: 0.7rem;
}

.ws-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}

.ws-gesellschaft {
  font-size: 0.85rem;
  color: var(--tinte-2);
}

.ws-zahl {
  font-family: var(--zahl);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tinte);
}

/* Über dem Vertrag: die Zahl amber, damit die Überplanung auffällt. */
.ws-vertrag[data-ueber="ja"] .ws-zahl {
  color: var(--warnung);
}

.ws-balken {
  height: 8px;
  border-radius: 999px;
  background: var(--flaeche-2);
  overflow: hidden;
}

.ws-balken span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gruen);
  border-radius: 999px;
}

/* Füllstand in Zehnteln — Inline-Breiten scheitern an der strengen CSP. */
.ws-balken[data-anteil="1"] span {
  width: 10%;
}
.ws-balken[data-anteil="2"] span {
  width: 20%;
}
.ws-balken[data-anteil="3"] span {
  width: 30%;
}
.ws-balken[data-anteil="4"] span {
  width: 40%;
}
.ws-balken[data-anteil="5"] span {
  width: 50%;
}
.ws-balken[data-anteil="6"] span {
  width: 60%;
}
.ws-balken[data-anteil="7"] span {
  width: 70%;
}
.ws-balken[data-anteil="8"] span {
  width: 80%;
}
.ws-balken[data-anteil="9"] span {
  width: 90%;
}
.ws-balken[data-anteil="10"] span {
  width: 100%;
}

.ws-vertrag[data-ueber="ja"] .ws-balken span {
  background: var(--warnung);
}

/* ---------------------------------------------------------------- Ausgleichstage */

.ag-liste {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ag-zeile {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rand);
  padding: 0.8rem 0.95rem;
}

/* Wer noch offene Tage hat, bekommt eine grüne Kante — die stehen für Einlösung an. */
.ag-zeile[data-offen="ja"] {
  border-left: 3px solid var(--gruen);
}

/* Die Kopfzeile — schlicht oder als aufklappbares <summary>: immer dieselbe Reihe. */
.ag-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.ag-zeile summary {
  cursor: pointer;
  list-style-position: outside;
}

.ag-zeile summary::-webkit-details-marker {
  color: var(--tinte-3);
}

/* Das aufgeklappte <summary> braucht Luft zur Feiertagsliste darunter. */
.ag-zeile details[open] summary {
  margin-bottom: 0.6rem;
}

.ag-was {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.ag-name {
  font-weight: 600;
  font-size: 0.98rem;
}

.ag-neben {
  color: var(--tinte-3);
  font-size: 0.82rem;
}

.ag-rest {
  flex: none;
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--gruen-tief);
  white-space: nowrap;
}

/* Überzogen (mehr genommen als verdient): die Zahl warnt. */
.ag-rest[data-knapp="ja"] {
  color: var(--gefahr);
}

/* Die verdienenden Feiertage, aufgeklappt: Datum grün, Name daneben. */
.ag-feiertage {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--linie);
}

.ag-feiertage li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: 0.88rem;
}

.ag-feiertage .tag {
  flex: none;
  min-width: 3.2rem;
  font-family: var(--zahl);
  font-variant-numeric: tabular-nums;
  color: var(--gruen-tief);
  font-weight: 600;
}

.ag-feiertage .name {
  color: var(--tinte-2);
}

/* „Zusage offen": neutraler Hinweis, kein Verstoß — deshalb blass, nicht amber. */
.teamschicht .zusage-offen {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--tinte-3);
}

/* Zusammenfassung offener Zusagen — neutraler Schnellblick über dem Wochenplan. */
.zusagen-bilanz {
  margin: -0.4rem 0 0.2rem;
  font-size: 0.9rem;
  color: var(--tinte-2);
}

/* „Ich" — der persönliche Bereich. Die Abschnitte (Konto, Guthaben, Links,
   Abwesenheiten) trägt der Flex-Abstand von main; hier nur die zwei Feinheiten. */
.konto-mail {
  margin: 0;
  color: var(--tinte-3);
  font-size: 0.9rem;
}

/* Überschrift nutzt die globale h2-Skala (serife, 1.05rem) — hier nur der
   Abstand zur Liste darunter. */
.meine-abw h2 {
  margin-bottom: 0.6rem;
}