:root {
  --ink: #1a2430;
  --ink-soft: #55616f;
  --paper: #fbfbfa;
  --panel: #ffffff;
  --rule: #d9dee4;
  --rule-strong: #b6bec8;
  --accent: #0f5257;
  --accent-soft: #e3eeee;
  --error: #a4262c;
  --error-bg: #fbeceb;
  --warn: #8a5a00;
  --warn-bg: #fbf3e2;
  --free: #eef2f6;
  /* Gitterlinie des Monatsrasters: dunkler als die hellen Flächen darunter
     (Ferien lila, Wochenende grau), sonst verschwindet sie darin. */
  --gitter: #b2bac5;
  --radius: 3px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ---------- Kopf ---------- */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding: .7rem 1.25rem;
  background: var(--panel);
  border-bottom: 2px solid var(--ink);
}
.brand { display: flex; align-items: baseline; gap: .5rem; font-weight: 650; letter-spacing: .01em; }
.brand .mark {
  width: .7rem; height: .7rem; border: 2px solid var(--accent);
  border-radius: 50%; display: inline-block; align-self: center;
}
.brand small { color: var(--ink-soft); font-weight: 400; }
.top nav { display: flex; flex-wrap: wrap; gap: .25rem; margin-inline-start: auto; }
.top nav a {
  color: var(--ink); text-decoration: none; padding: .3rem .6rem; border-radius: var(--radius);
}
.top nav a:hover { background: var(--accent-soft); }
.top nav a.on { background: var(--ink); color: #fff; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; }

h1 { font-size: 1.45rem; margin: 0 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; color: var(--ink-soft); }
p { margin: .4rem 0 .8rem; }
.muted { color: var(--ink-soft); font-size: .9rem; }
.big { font-size: 1.6rem; font-weight: 650; margin: .2rem 0; }
code { background: var(--free); padding: .1rem .3rem; border-radius: var(--radius); font-size: .85em; word-break: break-all; }

.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.pagehead h1 { margin: 0; }
.pagehead .actions { margin-inline-start: auto; display: flex; gap: .5rem; align-items: center; }

.monthnav { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--rule); border-radius: var(--radius); padding: .2rem .6rem; background: var(--panel); }
.monthnav a { text-decoration: none; color: var(--accent); font-size: 1.2rem; line-height: 1; padding: 0 .2rem; }

/* ---------- Flächen ---------- */
.card {
  background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1.25rem;
}
.card.narrow { max-width: 26rem; margin: 3rem auto; }
.grid2 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
body.bare { background: #fff; }
body.bare .sheet { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }

/* ---------- Formulare ---------- */
.f { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .8rem; font-size: .9rem; }
.f > span { color: var(--ink-soft); }
.f em { color: var(--ink-soft); font-size: .8rem; font-style: normal; }
input, select, button { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input:not([type]), select {
  padding: .35rem .45rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: #fff; color: var(--ink);
  min-width: 6rem;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.row .f { margin-bottom: 0; }
.checks { display: flex; flex-wrap: wrap; gap: .75rem; }
.checks label { display: flex; align-items: center; gap: .3rem; }

button.primary, .btn, button.btn {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: .4rem .9rem; border-radius: var(--radius); cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover, button.primary:hover { background: #0b3f43; }
a.btn { line-height: 1.5; }
button.linkish { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; }
.inline { display: inline; }

.sticky-save {
  position: sticky; bottom: 0; background: var(--panel); border-top: 2px solid var(--ink);
  padding: .7rem 0; display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
}
.sticky-save .f { flex: 1 1 18rem; margin: 0; }

/* ---------- Tabellen ---------- */
table { border-collapse: collapse; width: 100%; margin-bottom: .5rem; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { border-bottom: 1.5px solid var(--rule-strong); font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.tight td, .tight th { padding: .25rem .5rem; font-size: .9rem; }
td.date { white-space: nowrap; font-weight: 550; }
td.date em { display: block; font-style: normal; font-size: .75rem; color: var(--accent); }
tr.free > td { background: var(--free); }
/* Zeilen mit Hinweis: schmaler Balken am linken Rand statt Flächenfarbe.
   Eine eingefärbte Zeile überdeckt das Grau der Wochenenden; damit geht beim
   Querlesen die Orientierung im Monat verloren. Der Balken fällt auf, ohne
   den Untergrund zu verdrängen. */
tr.hat-error > td:first-child { box-shadow: inset 3px 0 0 var(--error); }
tr.hat-warn > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* Besetzungsübersicht: hier bleibt die rote Fläche. Es ist eine reine
   Lesetabelle ohne graue Wochenenden, die verdeckt werden könnten, und der
   Text unter der Tabelle verspricht sie ausdrücklich („Rot heißt: der Tag ist
   rechnerisch nicht besetzbar"). */
table.staffing tr.error > td { background: var(--error-bg); }

/* Das Ausrufezeichen am Zeilenende. Der Wortlaut steht in einem eigenen
   Kasten, der beim Überfahren sofort erscheint – der eingebaute Tooltip des
   Browsers braucht dafür eine Sekunde und übernimmt nicht die Schrift. */
.ruf {
  position: relative; display: inline-block; width: 1.1rem; text-align: center;
  font-weight: 700;
}
.ruf.error { color: var(--error); }
.ruf.warn { color: var(--warn); }
/* Derselbe Kasten dient der Spalte „Feiertage" in der Verteilung. Dort steht
   im Kasten, welcher Feiertag an welchem Datum gemeint ist. */
.tipp { position: relative; display: inline-block; }
.tipp .wt { color: var(--ink-soft); }
.ruf::after, .tipp::after {
  content: attr(data-text);
  position: absolute; right: 0; bottom: calc(100% + .3rem); z-index: 30;
  display: none; width: max-content; max-width: 22rem;
  padding: .4rem .55rem; text-align: left; font-weight: 400; font-size: .82rem;
  line-height: 1.35; color: var(--ink); background: var(--panel);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ruf:hover::after, .ruf:focus::after, .ruf:focus-visible::after,
.tipp:hover::after, .tipp:focus::after, .tipp:focus-visible::after { display: block; }

/* Breite Tabellen bekommen einen eigenen Rahmen. Ohne ihn schiebt eine zu
   breite Tabelle die GANZE Seite zur Seite – Kopfzeile, Menü und Monatsauswahl
   wandern mit aus dem Bild. Der Rahmen wird erst auf schmalen Bildschirmen zum
   Schiebebereich: Ein Schiebebereich schneidet ab, was darüber hinausragt, und
   würde sonst am Rechner den Hinweiskasten oben abschneiden. */
.tabwrap { max-width: 100%; }
@media (max-width: 900px) {
  .tabwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pagehead, .pagehead .actions { flex-wrap: wrap; }
  /* Der Hinweiskasten der Spalte „Feiertage" steckt in einer Tabelle, die hier
     zum Schiebebereich wird – und ein Schiebebereich schneidet ab, was oben
     herausragt. In der ersten Zeile wäre vom Kasten nur die untere Hälfte zu
     sehen. Deshalb bleibt er auf schmalen Bildschirmen aus; die Wochentage
     stehen ohnehin in der Zelle selbst. Das Ausrufezeichen im Dienstplan ist
     davon nicht betroffen, es steht in der letzten Spalte und braucht den
     Kasten dort, wo es keinen Schiebebereich gibt. */
  .tabwrap .tipp::after { display: none !important; }
}
@media print {
  .tabwrap { overflow: visible; }
}

/* Unbesetzter Dienst */
select.offen { border-color: var(--error); color: var(--error); }

/* Abwesende: Name und Kürzel bleiben zusammen, umbrochen wird zwischen Personen. */
.abs .abw { white-space: nowrap; display: inline-block; }
td.abs { font-size: .85rem; color: var(--ink-soft); }

/* Wünsche in der Plantabelle: Zeichen und Name bleiben zusammen, umbrochen
   wird zwischen Personen – wie bei den Abwesenden daneben. */
td.wsp { font-size: .85rem; color: var(--ink-soft); }
.wsg { white-space: nowrap; display: inline-block; }
.pill { border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0 .35rem; font-size: .72rem; }
.pill.ok { border-color: var(--accent); color: var(--accent); }
.mini { font-size: .7rem; border-radius: var(--radius); padding: .05rem .3rem; border: 1px solid; }
.mini.error { color: var(--error); border-color: var(--error); }
.mini.warn { color: var(--warn); border-color: var(--warn); }
.mini.info { color: var(--ink-soft); border-color: var(--rule-strong); }
.plan select, .wishes select { width: 100%; min-width: 9rem; }
/* Alle Spalten in den Listen stehen linksbündig – auch die Zahlen.
   Nur die Tageszellen der Kalenderraster sind zentriert, dort steht
   höchstens ein Kürzel in einer sehr schmalen Spalte. */
.staffing td { text-align: left; }
.warncell { font-size: .82rem; color: var(--warn); }

/* ---------- Hinweise ---------- */
.warns { list-style: none; padding: 0; margin: 0; }
.warns li { padding: .35rem 0; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.warns li:last-child { border-bottom: 0; }
.warns .tag {
  display: inline-block; min-width: 4.5rem; margin-right: .5rem; font-size: .72rem;
  border: 1px solid; border-radius: var(--radius); padding: 0 .3rem; text-align: center;
}
.warns li.error .tag { color: var(--error); border-color: var(--error); }
.warns li.warn .tag { color: var(--warn); border-color: var(--warn); }
.warns li.info .tag { color: var(--ink-soft); border-color: var(--rule-strong); }
.ok-note { color: var(--accent); }

.flash { padding: .5rem .75rem; border-radius: var(--radius); border-left: 3px solid; margin-bottom: 1rem; }
.flash.ok { border-color: var(--accent); background: var(--accent-soft); }
.flash.err { border-color: var(--error); background: var(--error-bg); }
.flash.warn { border-color: var(--warn); background: var(--warn-bg); }

ul.cols { columns: 2 16rem; list-style: none; padding: 0; }
ul.cols li { break-inside: avoid; padding: .1rem 0; }
ul.links { list-style: none; padding: 0; }
.person .rules ul { list-style: none; padding: 0; margin: 0 0 .5rem; }
.person .rules li { padding: .15rem 0; }
.person .rules em { color: var(--ink-soft); font-style: normal; font-size: .85rem; margin-left: .3rem; }

/* ---------- Druck ---------- */
.printhead h1 { margin-bottom: .1rem; }
table.print th, table.print td { border: 1px solid #888; padding: .3rem .45rem; }
table.print tr.free td { background: #f0f0f0; }
table.print b.offen { color: #000; border: 1px solid #000; padding: 0 .2rem; }
.legend { font-size: .8rem; color: #444; margin-top: .6rem; }

@media print {
  .noprint, .top, .sticky-save { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  body.bare .sheet { padding: 0; max-width: none; }
  table.print { page-break-inside: auto; }
  table.print tr { page-break-inside: avoid; }
}

@media (max-width: 700px) {
  .top nav { margin-inline-start: 0; width: 100%; }
  table, thead, tbody, tr, td, th { font-size: .85rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn, button.primary { transition: background .12s ease; }
}

/* Passwortfeld mit Augensymbol */
.pwfeld { display: flex; gap: .3rem; align-items: stretch; }
.pwfeld input { flex: 1 1 auto; }
.pwauge {
  border: 1px solid var(--rule-strong); background: #fff; border-radius: var(--radius);
  cursor: pointer; padding: 0 .5rem; line-height: 1; font-size: .95rem; color: var(--ink-soft);
}
.pwauge:hover { background: var(--free); }
.pwauge.an { color: var(--accent); border-color: var(--accent); }

/* Fußzeile mit der Fassung */
footer.fuss {
  max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem 2rem;
  color: var(--ink-soft); font-size: .8rem; border-top: 1px solid var(--rule);
}
/* Tage, die schon im Folgemonat liegen */
tr.trenner td {
  background: var(--accent-soft); font-size: .85rem; color: var(--ink);
  border-top: 2px solid var(--accent); padding: .5rem;
}
tr.folgemonat td { font-style: italic; }

/* Die angebrochene Woche vor dem Monatsersten: nur zum Nachsehen. Grau
   hinterlegt und kursiv, damit sofort klar ist, dass hier nichts zu
   bedienen ist. */
tr.vormonat td { background: var(--free); font-style: italic; color: var(--ink-soft); }
.nurlesen { display: inline-block; padding: .2rem 0; }

/* Einleitungstext, z. B. auf der Wunschseite: hervorgehoben, aber ruhig */
p.einleitung {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  margin: 0 0 1rem;
  max-width: 62ch;
}

/* Monatsauswahl zwischen den Pfeilen */
.monthnav .monatswahl { display: flex; align-items: center; gap: .3rem; margin: 0; }
.monthnav .monatswahl select {
  border: 0; background: transparent; color: var(--ink);
  font-weight: 650; font-size: 1rem; padding: .15rem .2rem;
  cursor: pointer; min-width: 0;
}
.monthnav .monatswahl select:hover { color: var(--accent); }
.monthnav .monatswahl select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------------------
   Urlaub und Feiertage
   Der Jahreskalender hat eine Spalte je Tag. Ein Urlaub von Mittwoch bis
   Montag erscheint deshalb genau sechs Streifen breit – Kalenderwochen
   als Spalten würden ihn auf- oder abrunden.
   ------------------------------------------------------------------ */
.jahrwrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }

table.jahr { table-layout: fixed; width: 100%; min-width: 60rem; border-collapse: collapse; margin: 0; }
table.jahr th, table.jahr td { padding: 0; border: 0; }
/* Namensspalte. Kein display:flex – zwei Flex-Zellen in einer Zeile sprengen
   den Tabellenaufbau, die Zellen stünden dann untereinander. */
table.jahr th.wer {
  width: 7.5rem; padding: 0 .4rem; font-size: .78rem; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; background: var(--panel); text-align: left;
}
table.jahr th.wer .nm { display: block; overflow: hidden; text-overflow: ellipsis; }
/* Jahressummen in einer EIGENEN Spalte rechts neben dem Namen: Urlaub und
   Freizeitausgleich. Eigene Spalte, damit sie am Telefon mitwandern können,
   während der Name stehenbleibt. */
table.jahr th.summe {
  width: 4.5rem; padding: 0 .4rem 0 0; font-size: .78rem; font-weight: 400;
  font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--panel);
  border-right: 1px solid var(--rule-strong); text-align: right; overflow: hidden;
}
table.jahr th.summe b { font-weight: 600; }
table.jahr th.summe .s-ur { color: #b96a16; }
table.jahr th.summe .s-fza { color: #3f6ea8; margin-inline-start: .3rem; }
table.jahr th.mon {
  font-size: .72rem; font-weight: 600; color: var(--ink-soft); text-align: left;
  border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule-strong); padding: .15rem 0 .15rem .15rem;
}
table.jahr th.mon a { color: inherit; text-decoration: none; }
table.jahr th.mon a:hover { color: var(--accent); text-decoration: underline; }
/* Zwischenzeile „Vordergrund" / „Hintergrund". Die Beschriftung steht in der
   normalen ersten Spalte, das Band läuft über die restlichen Zellen weiter. */
table.jahr tr.gruppe th, table.jahr tr.gruppe td,
table.monatsgitter tr.gruppe th, table.monatsgitter tr.gruppe td {
  background: var(--free); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); text-align: left; padding: .15rem .4rem; border-right: 0;
}
table.jahr tbody td { height: 15px; }
table.jahr tbody tr:nth-child(even) td { box-shadow: inset 0 0 0 99px rgba(0,0,0,.015); }

/* Monatsansicht: dieselben Farben, aber groß genug zum Lesen */
/* Getrennte Rahmen statt zusammengelegter: Bei zusammengelegten Rahmen
   übermalt der Zellhintergrund die Linien, und in einer eingefärbten Fläche
   (Ferien lila, Wochenende grau) verschwindet das Gitter. Mit getrennten
   Rahmen zeichnet jede Zelle ihre Linie über die eigene Fläche. */
table.monatsgitter {
  table-layout: fixed; width: 100%; min-width: 46rem; margin: 0;
  border-collapse: separate; border-spacing: 0;
  border-top: 1px solid var(--gitter); border-left: 1px solid var(--gitter);
}
table.monatsgitter th, table.monatsgitter td {
  border: 0; border-right: 1px solid var(--gitter); border-bottom: 1px solid var(--gitter);
  padding: 0; text-align: center; font-size: .7rem; height: 1.5rem;
}
table.monatsgitter th.wer {
  width: 9rem; text-align: left; padding: 0 .4rem; font-size: .8rem; font-weight: 500;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
table.monatsgitter thead th { font-size: .65rem; color: var(--ink-soft); line-height: 1.1; padding: .1rem 0; }
table.monatsgitter thead th span { display: block; font-weight: 400; }

/* Tagesfarben. Sie stehen hier fest, weil die Inhaltsrichtlinie keine im HTML
   eingebetteten Formate zulässt; abwFarbklasse() in views.php verteilt sie.
   Die Zuordnung zu den Arten steht in ABW_FARBEN in views.php. */
.c-ur,  .lg i.c-ur  { background: #e8943a; }   /* Urlaub – orange */
.c-fza, .lg i.c-fza { background: #5b8fc9; }   /* Freizeitausgleich – blau */
.c-fb,  .lg i.c-fb  { background: #63a663; }   /* Fortbildung – grün */
.c-ez,  .lg i.c-ez  { background: #9aa3ac; }   /* Elternzeit – grau, deutlich dunkler
                                                  als das Wochenendgrau darunter */
/* Restvorrat für selbst angelegte Arten */
.c-x1, .lg i.c-x1 { background: #b487c4; }
.c-x2, .lg i.c-x2 { background: #d9c14e; }
.c-x3, .lg i.c-x3 { background: #6fb3ae; }
.c-x4, .lg i.c-x4 { background: #c98a8a; }
.kx, .lg i.kx { background: repeating-linear-gradient(45deg, #ccc, #ccc 2px, #eee 2px, #eee 4px); }
.we { background: #eef1f4; }
.ft, .lg i.ft { background: #f3e2e2; }
/* Monatstrennlinie als Schatten, nicht als Rahmen: so liegt sie über der
   Fläche und verschwindet nicht in einem eingefärbten Block. */
.ms { box-shadow: inset 1px 0 0 var(--rule-strong); }
.jetzt { outline: 1px solid var(--accent); outline-offset: -1px; }

.legende { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--ink-soft); margin: 0 0 .5rem; }
.legende .lg { display: inline-flex; align-items: center; gap: .3rem; }
.legende .lg i { width: .8rem; height: .8rem; border: 1px solid var(--rule-strong); border-radius: 2px; display: inline-block; }

/* Wunschübersicht des Teams: die beiden Zeichen im Gitter. Sie tragen die
   Aussage allein, die Farbe hilft nur – so bleibt das Gitter auch für
   farbenblinde Augen und im Schwarzweißdruck lesbar. */
.wunschgitter td { line-height: 1; }
.wja   { color: #2f7d32; font-size: .95rem; font-weight: 700; }
.wnein { color: #b4452f; font-size: 1.1rem; font-weight: 700; }
.legende .lg b { font-size: 1rem; width: .8rem; text-align: center; }

.jahrnav { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .1rem .5rem; }
.jahrnav a { text-decoration: none; color: var(--accent); font-size: 1.1rem; line-height: 1; }

/* Feiertagsliste: Auswahlfelder je Track */
table.feiertage select { min-width: 10rem; width: 100%; }
table.feiertage tr.trennzeile td { height: .5rem; padding: 0; background: var(--paper); border-bottom: 0; }
table.feiertage td.note .mini { display: inline-block; margin-bottom: .1rem; }

/* Umbenennen in den Wertelisten */
.umbenennen { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin: 0; }
.umbenennen input { min-width: 9rem; flex: 1 1 9rem; }
.umbenennen button { white-space: nowrap; }

/* Spalte „Abwesend" unter Meine Wünsche */
table.wishes td.abs { font-size: .85rem; color: var(--ink-soft); }

/* Feiertagszeiträume: jeder Anlass für sich, deutlich abgesetzt */
.ftgruppe {
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: .7rem .9rem 0; margin-bottom: 1.25rem;
  background: #fcfcfc;
}
.ftgruppe h3 { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 650; }
.ftgruppe p.spanne { margin: .1rem 0 .6rem; }
.ftgruppe table { margin-bottom: .6rem; }
@media print { .ftgruppe { page-break-inside: avoid; } }

/* ------------------------------------------------------------------
   Auf- und zuklappbare Abschnitte
   Dreieck und Verhalten kommen vom Browser; hier nur das Aussehen.
   ------------------------------------------------------------------ */
details.klapp { margin: 0; }
details.klapp > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .45rem;
  padding: .1rem 0; border-radius: var(--radius);
}
details.klapp > summary::-webkit-details-marker { display: none; }
details.klapp > summary::before {
  content: ''; width: 0; height: 0; flex: none;
  border-left: .4rem solid var(--accent);
  border-top: .3rem solid transparent; border-bottom: .3rem solid transparent;
}
details.klapp[open] > summary::before {
  border-left: .3rem solid transparent; border-right: .3rem solid transparent;
  border-top: .4rem solid var(--accent); border-bottom: 0;
}
details.klapp > summary:hover { color: var(--accent); }
details.klapp > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
summary.klapp-h2 { font-size: 1.05rem; font-weight: 650; margin-bottom: .6rem; }
summary.klapp-h3 { font-size: .95rem; font-weight: 600; color: var(--ink-soft); margin: 1.2rem 0 .4rem; }
details.klapp[open] > summary { margin-bottom: .5rem; }
.klapp-inhalt > :first-child { margin-top: 0; }

/* Im Ausdruck ist alles offen – ein zugeklappter Abschnitt fehlte sonst */
@media print {
  details.klapp > .klapp-inhalt { display: block !important; }
  details.klapp > summary::before { display: none; }
}

/* Berliner Schulferien: blasslila, nur als Hintergrundhinweis.
   Das Wochenende steht in der Farbreihenfolge davor und bleibt immer grau. */
.fe, .lg i.fe { background: #e4d8ef; }

/* Spalte „Tage" in den Listen */
td.tage { text-align: left; white-space: nowrap; }

/* Kästchen zum Aufheben einer einzelnen Fixierung, unter dem Auswahlfeld */
label.loesen {
  display: block; margin-top: .2rem; font-size: .72rem; color: var(--ink-soft);
  white-space: nowrap;
}
label.loesen input { margin-inline-end: .25rem; }
input.klein { width: 4.5rem; }


/* ---------- Handy: erste Spalte bleibt beim Schieben stehen ----------
   Wird eine Tabelle seitlich geschoben, wandert sonst auch die Spalte mit dem
   Datum beziehungsweise dem Namen aus dem Bild – und man weiß nicht mehr, zu
   welchem Tag der Eintrag gehört, den man gerade ansieht. Die Spalte braucht
   dafür eine deckende Fläche: Sonst scheint durch, was unter ihr hindurchläuft. */
@media (max-width: 900px) {
  /* Die erste Spalte bleibt beim seitlichen Schieben stehen – in jeder
     Tabelle, nicht nur in denen mit Datumsspalte. */
  .tabwrap thead th:first-child,
  .tabwrap tbody > tr > :first-child:not([colspan]),
  .jahrwrap th.wer:not([colspan]) {
    position: sticky; left: 0; z-index: 2; background: var(--panel);
  }
  .tabwrap thead th:first-child { z-index: 3; }

  /* Eine stehende Zelle muss blickdicht sein, sonst scheint der darunter
     wandernde Inhalt durch. Darum bekommt jede eingefärbte Zeile ihre Farbe
     in der stehenden Spalte eigens noch einmal. */
  .tabwrap tr.free > :first-child { background: var(--free); }
  .tabwrap table.staffing tr.error > :first-child { background: var(--error-bg); }
  /* Die stehende Zelle der Zwischenzeile behält die Farbe des Bandes. */
  .jahrwrap tr.gruppe th.wer { background: var(--free); }

  /* Kante zwischen stehender und wandernder Spalte. Bei den Kalendern sitzt
     die Linie sonst an der Summenspalte – die wandert mit, und nach dem
     Schieben fehlte die Kante. */
  .tabwrap thead th:first-child::after,
  .tabwrap tbody > tr > :first-child:not([colspan])::after,
  .jahrwrap th.wer:not([colspan])::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
    background: var(--rule-strong);
  }

  /* Die Namensspalte der beiden Kalender ist am Telefon schmaler, sonst
     bleibt vom Kalender selbst fast nichts übrig. Die Jahressummen bleiben
     sichtbar, wandern aber mit dem Kalender mit und verschwinden beim
     Schieben hinter der Namensspalte. */
  table.jahr th.wer, table.monatsgitter th.wer { width: 7rem; }
  table.jahr th.summe { width: 4.5rem; }
}
@media print {
  .tabwrap thead th:first-child,
  .tabwrap tbody > tr > :first-child,
  .jahrwrap th.wer { position: static; }
}