/* Telefonansicht des Familienkalenders.
   Tokens aus GL-003, Lab-Agenten-Ebene (Paragraph 2b). Die Farben der Personen
   kommen als --f aus dem Markup und damit aus scripts/build-kalender.py, die
   Farben fuer Feiertage, Ferien und schulfreie Tage sind mit dem Druckbogen
   identisch, damit Telefon und Ausdruck dieselbe Sprache sprechen.
   Erst das Telefon, der grosse Bildschirm ist die Zugabe. */

@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("fonts/dm-serif-display-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("fonts/dm-serif-display-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --primary:#c0392b;
  --primary-h:#a93226;
  --bg:#fafaf8;
  --card:#fff;
  --surface:#f3f0eb;
  --border:#e5e2db;
  --border-lt:#eeece8;
  --text:#1a1917;
  --text2:#4a4845;
  --text3:#8a8784;
  /* Eigener, dunklerer Ton fuer kleinen Text, der noch lesbar sein muss.
     --text3 kommt auf Weiss nur auf 3,6:1 und reicht damit fuer AA nicht. */
  --text-schwach:#6b6864;
  --ok:#2e7d32;
  --warn:#b45309;
  --warn-bg:#fff8ef;
  --ok-bg:#f2f8f2;
  --rot-bg:#fdf5f5;
  /* Masse des Monatsrasters. --kopfh ist die feste Hoehe der Zeile mit
     Tagesziffer und Ferienmarke, --bandh die Hoehe einer Bandreihe samt dem
     Abstand darunter. Beide haengen zusammen: die Bandebene setzt auf --kopfh
     auf, und das Tagesfeld haelt --reihen mal --bandh frei. Wer eine der
     beiden Zahlen aendert, sieht sich das gerenderte Raster an. */
  --kopfh:1.55rem;
  --bandh:.95rem;
  --oben:env(safe-area-inset-top,0px);
  --unten:env(safe-area-inset-bottom,0px);
  --links:env(safe-area-inset-left,0px);
  --rechts:env(safe-area-inset-right,0px);
  color-scheme:light;
}

*{box-sizing:border-box}
/* Eine Klassenregel mit display schlaegt sonst das hidden-Attribut, weil beide
   dieselbe Spezifitaet haben und die eigene Regel spaeter kommt. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:"DM Sans",system-ui,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.5;
  overscroll-behavior-y:none}
body.app{display:flex;flex-direction:column;min-height:100svh}

a{color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
button,input,select{font:inherit}

h1,h2,h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;line-height:1.2}

.springen{position:absolute;left:-9999px;top:0;background:var(--card);
  padding:10px 14px;border:1px solid var(--primary);z-index:60}
.springen:focus{left:8px;top:calc(var(--oben) + 8px)}

/* -------------------------------------------------------------- Kopfleiste */
.leiste{position:sticky;top:0;z-index:30;background:var(--card);
  border-bottom:2px solid var(--text);padding-top:var(--oben)}
.leistenzeile{display:flex;align-items:center;gap:4px;
  padding:4px max(8px,var(--rechts)) 4px max(8px,var(--links))}
.monatstitel{flex:1;margin:0;text-align:center;font-size:1.35rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.monatstitel span{color:var(--text-schwach)}
.pfeil{display:flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;font-size:1.7rem;line-height:1;
  color:var(--text2);text-decoration:none;border-radius:0}
.pfeil:active{background:var(--surface)}
.pfeil.aus{color:var(--border);pointer-events:none}

.menue{position:relative}
.menue>summary{display:flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;list-style:none;cursor:pointer}
.menue>summary::-webkit-details-marker{display:none}
.menue .balken{display:block;width:20px;height:2px;background:var(--text);
  box-shadow:0 -6px 0 var(--text),0 6px 0 var(--text)}
.menue[open]>summary{background:var(--surface)}
.menue .klappe{position:absolute;right:0;top:100%;z-index:40;min-width:15rem;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;flex-direction:column}
.menue .klappe a,.menue .klappe button{display:flex;align-items:center;
  min-height:48px;padding:0 16px;font-size:.95rem;color:var(--text2);
  text-decoration:none;border-bottom:1px solid var(--border-lt);
  background:none;border-left:0;border-right:0;border-top:0;width:100%;
  text-align:left;cursor:pointer}
.menue .klappe a:active{background:var(--surface)}
.menue .klappe form{margin:0}

main{flex:1;padding:8px max(8px,var(--links)) calc(88px + var(--unten))
  max(8px,var(--rechts))}

/* --------------------------------------------------------------- Meldungen */
.meldungen{margin:0 0 10px;padding:0;list-style:none}
.meldung{background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--text-schwach);padding:10px 14px;margin-bottom:6px;
  font-size:.92rem;color:var(--text2)}
.meldung.ok{border-left-color:var(--ok);background:var(--ok-bg)}
.meldung.fehler{border-left-color:var(--primary);background:var(--rot-bg)}
.meldung.warnung{border-left-color:var(--warn);background:var(--warn-bg)}

/* Was noch nicht beim Server ist. Der Kasten ist bewusst auffaellig: eine App,
   die so tut, als sei alles gespeichert, ist schlimmer als eine ohne
   Offline-Betrieb. */
/* ------------------------------------------------------- Umschaltung

   Familie, Arbeit, Alles. Drei Flaechen ueber die volle Breite, jede weit
   ueber der 44-px-Grenze fuer einen Daumen. Die aktive Stellung ist gefuellt
   und nicht nur unterstrichen, weil ein Kalender aus zwei Metern Abstand
   erkennen lassen muss, was er gerade zeigt. Dunkel gefuellt und nicht rot:
   Rot gehoert in dieser App dem Pluszeichen und den Feiertagen.

   Kontrast: #fff auf --text (#1a1917) sind 16,9:1, --text2 (#4a4845) auf
   --card (#fff) sind 9,3:1. Beides deutlich ueber AA. */
.ansichtwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin:0 0 10px;background:var(--border);border:1px solid var(--border)}
.ansichtknopf{min-height:44px;padding:0 6px;border:0;background:var(--card);
  color:var(--text2);font-size:.85rem;font-weight:600;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.ansichtknopf:active{background:var(--surface)}
.ansichtknopf.an{background:var(--text);color:#fff;font-weight:700}
/* Die Arbeitsansicht bekommt den warmen Ton, den die App sonst fuer Hinweise
   benutzt. Damit faellt sie auch dann auf, wenn niemand liest. */
.ansichtknopf.an.a-arbeit{background:#7a3d06}
.ansichthinweis{margin:-4px 0 10px;padding:8px 12px;font-size:.85rem;
  background:var(--surface);border-left:3px solid var(--text-schwach);
  color:var(--text2)}
.ansichthinweis.a-arbeit{background:var(--warn-bg);border-left-color:var(--warn);
  color:#7a3d06}

.stand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  background:var(--warn-bg);border:1px solid #f0d9b6;border-left:3px solid var(--warn);
  padding:10px 14px;margin:0 0 10px;font-size:.9rem;color:#7a3d06}
/* Neutral, nicht gruen. Gruen hiesse "alles beim Server", und genau das ist
   in diesem Zustand nicht der Fall. */
.stand.ruhig{background:var(--surface);border-color:var(--border);
  border-left-color:var(--text-schwach);color:var(--text2)}
.stand .text{flex:1;min-width:12rem}
.stand button{min-height:40px}

.konflikte{background:var(--rot-bg);border:1px solid #f0cfcb;
  border-left:3px solid var(--primary);padding:12px 14px;margin:0 0 10px}
.konflikte>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
  gap:8px;font-size:.88rem;font-weight:600;color:#8a2a20;list-style:none}
.konflikte>summary::-webkit-details-marker{display:none}
/* Aufklapp-Pfeil aus Rahmenlinien, damit kein Glyph noetig ist. */
.konflikte>summary::after{content:"";flex:none;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;transition:transform .12s linear}
.konflikte[open]>summary::after{transform:rotate(180deg)}
.konflikte ul{margin:0;padding-left:18px;font-size:.9rem;color:var(--text2)}
.konflikte li{margin-bottom:6px}
.konflikte .wann{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.konflikte form{margin-top:10px}
.konflikte .dazu{font-size:.85rem;color:var(--text2);margin:6px 0 0}

/* ------------------------------------------------------------ Monatsraster */
.raster{touch-action:pan-y}
.raster.wechselt{opacity:.35;transition:opacity .12s linear}
.wochentage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  margin-bottom:1px}
.wt{padding:5px 2px;text-align:center;font-size:.62rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
.wt.we{color:var(--text-schwach)}

/* Das Gitter ist seit dem 31.08.2026 eine Spalte aus Wochen, nicht mehr ein
   Feld aus 7 mal n Tagen. Die sieben Spalten macht jetzt .tage innerhalb einer
   Woche. Das ist der Preis fuer die Baender: ein Band laeuft ueber mehrere
   Tage einer Woche und braucht deshalb einen Knoten, der genau eine Woche
   umspannt.

   Achtung, das ist die Stelle, an der das Raster am 31.08.2026 zusammenfiel.
   Blieben hier die sieben Spalten stehen, waehrend im Markup Wochen-Knoten
   stehen, dann landet jede Woche in einer eigenen Spalte: fuenf Montage
   nebeneinander, Samstag und Sonntag leer. Die Seite antwortet dabei mit 200
   und schreibt nichts ins Protokoll. Wer hier etwas aendert, sieht sich das
   Bild an. */
.gitter{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--border-lt);border:1px solid var(--border-lt)}

/* Eine Woche traegt zwei uebereinanderliegende Ebenen im selben Rasterfeld:
   unten die sieben Tage, darueber die Baender. Kein position:absolute -- die
   Bandebene bekommt ihre Groesse von den Tagen darunter. --reihen kommt aus
   dem Markup und sagt, wie viele Baender uebereinander diese Woche traegt;
   der Wert vererbt sich bis in die Tagesfelder und haelt dort den Platz frei. */
.woche{display:grid;grid-template-columns:minmax(0,1fr)}
.woche > *{grid-area:1/1}
.tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px}

.tag{position:relative;display:flex;flex-direction:column;gap:2px;
  min-width:0;min-height:calc(4.6rem + var(--reihen,0) * var(--bandh));
  padding:3px 2px 4px;background:var(--card);
  color:inherit;text-decoration:none;overflow:hidden}
.tag.we{background:#f6f5f2}
.tag.fremd{background:#faf9f7}
.tag.fremd .ziffer{color:var(--text-schwach)}
/* .7 statt .55: bei .55 fiel weisse Schrift auf einem Urlaubs-Chip unter das
   AA-Mass, obwohl der Tag anklickbar bleibt und der Eintrag echt ist. */
.tag.fremd .chips{opacity:.7}
.tag.ferbg{background:#fbfaf6}
.tag.we.ferbg{background:#f4f2ec}
.tag.so{background:#fbf4f4}
.tag.ft{background:#fdf6f5}
.tag.so .ziffer,.tag.ft .ziffer{color:var(--primary)}
.tag.ft .ziffer{font-weight:700}
.tag.heute{box-shadow:inset 0 0 0 2px var(--primary)}
.tag.heute .ziffer{background:var(--primary);color:#fff;border-radius:50%;
  width:1.55rem;height:1.55rem;display:inline-flex;align-items:center;
  justify-content:center}
.tag:active{background:var(--surface)}

/* Die Kopfzeile ist absichtlich fest hoch. Auf ihrer Unterkante sitzt die
   Bandebene auf, und die kann die Hoehe der einzelnen Tagesfelder nicht
   messen. Die Ziffer gibt mit line-height:1.55rem das Mass vor, die
   Ferienmarke bleibt darunter: eine Marke ist 15 px hoch, zwei sind 28 px --
   ueber den erfassten 27 Monaten gibt es genau einen Tag mit zwei Marken
   (14.08.2027, Einschulung BE und BB an verschiedenen Tagen), und in dessen
   Woche laeuft kein Band ueber diese Spalte. Kaemen regelmaessig zwei Marken
   vor, muss --kopfh mitwachsen.
   margin-bottom haelt in jedem Feld genau den Platz frei, den die Baender
   darueber einnehmen. Ohne ihn druckt das erste Band auf den Feiertagsnamen
   und die Chips. */
.tagkopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:2px;min-width:0;min-height:var(--kopfh);
  margin-bottom:calc(var(--reihen,0) * var(--bandh))}
.ziffer{font-size:.82rem;font-weight:600;color:var(--text2);line-height:1.55rem;
  min-width:1.55rem;text-align:center}
.ferleiste{display:flex;flex-direction:column;gap:1px;padding-top:3px}
.fer{font-size:.5rem;font-weight:700;letter-spacing:.02em;padding:0 2px;
  border-radius:2px;line-height:1.5;font-style:normal}
.fer.k-ferien.f-BE{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe}
.fer.k-ferien.f-BB{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.fer.k-frei{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.fer.k-frei.f-BB{border-style:dashed}
.fer.k-einschulung{background:#fae8ff;color:#86198f;border:1px solid #f0abfc}
.fer.k-einschulung.f-BB{border-style:dashed}

/* .6rem statt .55rem: 8,8 px war auch mit guten Augen nicht zu lesen, und
   das Tagesfeld hat seit dem Wegfall der langen Baender wieder Hoehe frei. */
.ftname{font-size:.6rem;line-height:1.15;color:var(--primary);
  padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chips{display:flex;flex-direction:column;gap:1px;padding:0 1px;min-width:0}
.chip{display:flex;align-items:center;gap:3px;font-size:.62rem;line-height:1.35;
  padding:1px 3px;border-radius:2px;white-space:nowrap;overflow:hidden}
.chip b{font-weight:700;flex:none;max-width:100%;overflow:hidden;
  text-overflow:ellipsis}
.chip i{font-style:normal;font-weight:500;opacity:.9;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.chip.t-urlaub{background:var(--f);color:#fff;border:1px solid var(--f)}
.chip.t-fortbildung{background:#fff;color:var(--f);border:1px solid var(--f)}
.chip.t-dienstreise{background:#fff;color:var(--f);border:1px dashed var(--f)}
.chip.t-termin{background:#fff;color:var(--f);border:1px dotted var(--f);font-weight:600}
.chip.t-teilzeit{background:#fff;color:var(--f);border:1px solid var(--border);opacity:.8}
.chip.t-schliesszeit{background:repeating-linear-gradient(45deg,#f3f2ef,#f3f2ef 3px,#e5e2db 3px,#e5e2db 6px);
  color:var(--f);border:1px solid var(--border)}
.chip.t-krank,.chip.t-sonstiges{background:#fff;color:var(--f);border:1px dotted var(--f)}
/* Was noch auf Versand wartet, ist als solches erkennbar. */
.chip.wartet{border-style:dashed;opacity:.75}
.chip.geht-weg{text-decoration:line-through;opacity:.5}
.mehr{font-size:.62rem;font-weight:600;color:var(--text-schwach);padding:0 3px}

/* ------------------------------------------------- Baender (31.08.2026)

   Ein mehrtaegiger Eintrag ohne Uhrzeit laeuft als durchgehender Balken ueber
   die Wochenzeile, statt in jedem Tagesfeld als abgeschnittener Chip zu
   stehen. Vier Zeilen aus Sashas Schulplanung belegten so zusammen 263
   Tagesfelder, ohne dass eine davon lesbar war.

   Die Ebene liegt im selben Rasterfeld wie die Tage, hat dieselben sieben
   Spalten und denselben Spaltenabstand -- deshalb decken sich Band und Tag.
   padding-top setzt sie unter die Kopfzeile: 3 px Innenabstand des Tages,
   die feste Kopfhoehe, 2 px Abstand des Flex-Kastens.

   pointer-events:none laesst den Finger durch das Band hindurch auf den Tag
   darunter. Vorleseprogramme ueberspringen die Ebene (aria-hidden im Markup),
   weil dieselbe Angabe im aria-label des Tages steht. */
/* position/z-index sind hier Pflicht und kein Geschmack (gefunden 04.09.2026).
   Die Tagesfelder sind position:relative und werden deshalb ueber allem
   gezeichnet, was nicht positioniert ist. Die Bandebene lag darunter und war
   ausser einem Ein-Pixel-Strich in den Fugen zwischen den Tagen unsichtbar --
   jedes Band fuer Urlaub, Fortbildung, Dienstreise und Diensttermin, seit die
   Baender am 31.08.2026 eingebaut wurden. Sichtbar blieben allein die Fristen,
   weil .band.t-frist mit opacity:.85 einen eigenen Stapelzusammenhang aufmacht
   und dadurch auf dieselbe Ebene wie die Tagesfelder rutschte. Genau deshalb
   fiel es niemandem auf: die lautesten Baender waren die, die funktionierten.
   pointer-events:none bleibt, das Tippen geht weiter auf den Tag darunter. */
.baender{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  column-gap:1px;row-gap:0;grid-auto-rows:var(--bandh);align-content:start;
  padding-top:calc(3px + var(--kopfh) + 2px);pointer-events:none;
  position:relative;z-index:1}

.band{grid-column:var(--spalte) / span var(--weite);grid-row:var(--reihe);
  min-width:0;margin:0 0 2px;padding:0 4px;
  font-size:.6rem;font-weight:600;line-height:calc(var(--bandh) - 3px);
  height:calc(var(--bandh) - 2px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--f);border-radius:3px;background:var(--f);color:#fff}

/* Ein Band, das aus der Vorwoche kommt oder in die naechste laeuft, verliert
   an dieser Seite Kante und Rundung. So sieht man ohne Beschriftung, dass es
   weitergeht. Der Titel steht am Anfang jeder Wochenzeile, sonst stuende in
   der zweiten Woche eines langen Zeitraums ein namenloser Balken. */
.band:not(.beginnt){border-left:none;border-top-left-radius:0;
  border-bottom-left-radius:0;padding-left:3px}
.band:not(.endet){border-right:none;border-top-right-radius:0;
  border-bottom-right-radius:0;padding-right:3px}

/* Dieselbe Formensprache wie die Chips: gefuellt ist Urlaub, umrandet ist
   Fortbildung, gestrichelt ist Dienstreise. Alle Personenfarben liegen auf
   Weiss ueber 4,5:1 und tragen deshalb sowohl weisse Schrift auf der Flaeche
   als auch farbige Schrift auf Weiss. */
.band.t-fortbildung{background:#fff;color:var(--f)}
.band.t-dienstreise{background:#fff;color:var(--f);border-style:dashed}
.band.t-termin{background:#fff;color:var(--f);border-style:dotted}
.band.t-teilzeit{background:#fff;color:var(--f);border-color:var(--border)}
.band.t-schliesszeit{color:var(--f);border-color:var(--border);
  background:repeating-linear-gradient(45deg,#f3f2ef,#f3f2ef 3px,#e5e2db 3px,#e5e2db 6px)}
.band.t-krank,.band.t-sonstiges{background:#fff;color:var(--f)}

/* Eine Frist ist ein Zeitraum ohne festen Tag und soll auch so aussehen:
   blasse Flaeche in der Personenfarbe, gestrichelte Kante, kein Vollton. Sie
   ist die schwaechste Aussage im Raster und draengt nichts weg. */
.band.t-frist{background:#fff;color:var(--f);border-style:dashed;opacity:.85;
  font-weight:500}
.chip.t-frist{background:#fff;color:var(--f);border:1px dashed var(--f);
  font-weight:500}

/* Was die Ansicht wegnimmt, bekommt einen Strich statt eines Textes. Im
   Tagesfeld eines Telefons ist fuer einen Satz kein Platz, und der Satz steht
   ohnehin unter dem Raster und im Tagesblatt. Der Strich sagt nur: hier ist
   mehr. Der Text bleibt fuer Vorleseprogramme im aria-label des Tages. */
.verdeckt{align-self:stretch;height:2px;margin:1px 3px 0;padding:0;
  background:repeating-linear-gradient(90deg,var(--text-schwach) 0 3px,transparent 3px 6px);
  font-size:0;color:transparent;overflow:hidden}

.verdecktzeile{margin:0 0 12px;padding:8px 12px;font-size:.85rem;
  background:var(--surface);border-left:3px solid var(--text-schwach);
  color:var(--text2)}
.verdecktzeile a{font-weight:600}

/* ---------------------------------------- Laufende Zeitraeume (04.09.2026)

   Fristen und lange ganztaegige Zeitraeume stehen unter dem Monatsblatt statt
   als Band in jeder Wochenzeile. Im November 2026 lagen vier Bandreihen
   uebereinander und machten jedes Tagesfeld des Monats um 3,8 rem hoeher --
   Chris' Befund "zu exponiert". Eine Zeile je Eintrag, der Balken zeigt den
   Teil dieses Monats, den der Zeitraum belegt.

   Die Leiste sitzt unter dem Gitter, nicht darueber: das Monatsraster ist das,
   weswegen jemand die App oeffnet, die laufenden Fenster sind der Zusammenhang
   dazu. Wer das anders sieht, verschiebt den Block in _raster.html vor
   .gitter, sonst aendert sich nichts.

   Kontrast: --text (#1a1917) auf --card (#fff) sind 16,9:1, --text2 (#4a4845)
   sind 9,1:1. Die Personenfarbe kommt aus farbe_von() und liegt bei jedem
   Namen ueber 4,7:1 auf Weiss; der schwaechste Ton im Vorrat ist #a16207 mit
   4,9:1. */
.laufleiste{margin:10px 0 0;background:var(--card);border:1px solid var(--border)}
.laufleiste>h2{margin:0;padding:7px 12px;font-family:inherit;font-size:.68rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text2);border-bottom:1px solid var(--border-lt)}
.laufleiste ul{list-style:none;margin:0;padding:0}
.lauf+.lauf{border-top:1px solid var(--border-lt)}
.lauf a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;
  align-items:baseline;min-height:48px;padding:8px 12px 10px;
  color:inherit;text-decoration:none}
.lauf a:active{background:var(--surface)}
.laufname{font-size:.88rem;font-weight:600;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.laufwer{font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--f);
  white-space:nowrap;text-align:right}
.laufzeit{grid-column:1/-1;font-size:.78rem;color:var(--text2);
  font-variant-numeric:tabular-nums}

/* Der Balken sagt dasselbe wie das Datum daneben und bleibt deshalb fuer
   Vorleseprogramme unsichtbar. Eine offene Kante heisst, dass der Zeitraum
   ueber diesen Monat hinauslaeuft -- dieselbe Sprache wie beim Band im
   Raster, das an der Wochengrenze seine Kante verliert. */
.laufbalken{grid-column:1/-1;position:relative;height:5px;margin-top:5px;
  background:var(--border-lt)}
.laufbalken::before{content:"";position:absolute;top:0;bottom:0;
  left:var(--von,0%);right:calc(100% - var(--bis,100%));background:var(--f)}
.laufbalken.beginnt::before{border-top-left-radius:3px;
  border-bottom-left-radius:3px}
.laufbalken.endet::before{border-top-right-radius:3px;
  border-bottom-right-radius:3px}

/* Eine Frist ist ein Zeitraum ohne festen Tag. Sie bekommt deshalb keinen
   Vollton, sondern denselben aufgeloesten Charakter wie ihr Chip im Raster. */
.lauf.t-frist .laufname{font-weight:500}
.lauf.t-frist .laufbalken::before{
  background:repeating-linear-gradient(90deg,var(--f) 0 5px,transparent 5px 9px)}

.fusszeile{margin:10px 0 0;font-size:.82rem;color:var(--text2)}

/* Der Sprung zurueck auf den laufenden Monat. Er steht nur da, wenn ein
   anderer Monat zu sehen ist, und ist gross genug fuer einen Daumen. */
.heutesprung{display:inline-flex;align-items:center;min-height:44px;
  margin-top:2px;padding:0 14px;border:1px solid var(--border);
  border-radius:22px;background:var(--card);color:var(--primary);
  font-size:.82rem;font-weight:600;text-decoration:none}
.heutesprung:active{background:var(--surface)}

/* ---------------------------------------------------------- Pluszeichen */
.plus{position:fixed;right:calc(16px + var(--rechts));
  bottom:calc(16px + var(--unten));z-index:35;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;text-decoration:none;
  font-size:2rem;line-height:1;font-weight:400;
  box-shadow:0 4px 14px rgba(0,0,0,.22)}
.plus:active{background:var(--primary-h)}

/* ---------------------------------------------------------------- Blaetter */
.blatt-dialog{width:100%;max-width:34rem;margin:auto auto 0;padding:0;
  border:0;border-top:2px solid var(--text);background:var(--card);
  max-height:88svh;overflow:hidden}
.blatt-dialog::backdrop{background:rgba(26,25,23,.42)}
.blattinhalt,.eingabe{max-height:88svh;overflow-y:auto;
  padding:14px 16px calc(20px + var(--unten))}
.blattkopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--border)}
.blattkopf h2{margin:0;font-size:1.15rem}

.untergrund{list-style:none;margin:0 0 12px;padding:0;font-size:.88rem}
.untergrund li{padding:6px 10px;margin-bottom:4px;border-left:3px solid var(--border)}
.untergrund .feiertag{background:#fdf6f5;border-left-color:var(--primary);color:#8a2a20}
.untergrund .ferien.f-BE{background:#eef2ff;border-left-color:#3730a3;color:#312e81}
.untergrund .ferien.f-BB{background:#f0fdf4;border-left-color:#166534;color:#14532d}

.tagesliste{list-style:none;margin:0 0 14px;padding:0}
.tagesliste .posten{background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--f,var(--text-schwach));padding:10px 12px;
  margin-bottom:8px}
.posten.wartet{border-style:dashed}
.posten .oben{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
  margin-bottom:4px}
.posten .wer{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--f)}
.posten .was{font-weight:600;margin:0}
.posten .wann{font-variant-numeric:tabular-nums;color:var(--text2);
  font-size:.9rem;margin:2px 0 0}
.posten .rand{font-size:.86rem;color:var(--text2);margin:4px 0 0}
.posten .herkunft{font-size:.78rem;color:var(--text-schwach);margin:4px 0 0}
.posten .taten{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.posten .taten form{margin:0}
.art{display:inline-block;font-size:.72rem;padding:1px 8px;border-radius:20px;
  border:1px solid var(--f,var(--border));color:var(--f,var(--text2));background:#fff}
.art.gefuellt{background:var(--f);color:#fff}

.leer{color:var(--text2);font-style:italic;margin:0 0 14px}

/* --------------------------------------------------------------- Formular */
.feld{margin-bottom:12px}
.feld label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text2);margin-bottom:4px}
input[type=text],input[type=date],input[type=password],select{width:100%;
  font-size:16px;min-height:48px;padding:9px 10px;border:1px solid var(--border);
  border-radius:0;background:var(--card);color:var(--text)}
input:focus,select:focus{border-color:var(--primary);outline:none;
  box-shadow:0 0 0 2px rgba(192,57,43,.12)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mehrfelder{margin:0 0 12px;border-top:1px solid var(--border-lt);
  padding-top:8px}
.mehrfelder summary{cursor:pointer;min-height:44px;display:flex;
  align-items:center;font-size:.85rem;color:var(--text2)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.fehlerzeile{margin:8px 0 0;font-size:.88rem;color:#8a2a20;background:var(--rot-bg);
  border-left:3px solid var(--primary);padding:8px 10px}

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:10px 18px;font-size:.95rem;font-weight:600;
  border:1px solid var(--primary);border-radius:0;background:var(--primary);
  color:#fff;text-decoration:none;cursor:pointer}
.knopf:active{background:var(--primary-h);border-color:var(--primary-h)}
.knopf.zweit{background:var(--surface);color:var(--text);border-color:var(--border)}
.knopf.zweit:active{background:#e8e5e0}
.knopf.leise{background:transparent;border-color:transparent;color:var(--text2);
  padding:10px 8px;font-weight:500;text-decoration:underline}
.knopf.breit{width:100%}
.knopf[disabled]{opacity:.55;pointer-events:none}

/* -------------------------------------------------------------- Anmeldung */
.anmeldeseite{display:flex;align-items:center;justify-content:center;
  padding:calc(24px + var(--oben)) max(16px,var(--links))
    calc(32px + var(--unten)) max(16px,var(--rechts))}
.anmeldekasten{width:100%;max-width:26rem;background:var(--card);
  border:1px solid var(--border);padding:20px 18px 24px}
.anmeldekasten h1{font-size:1.6rem;margin:0 0 16px}
.anmeldekasten h1 em{font-style:italic}
.anmeldekasten p{color:var(--text2);font-size:.9rem}

.geraeteanmeldung{margin-bottom:16px}
.trenner{display:flex;align-items:center;gap:10px;margin:14px 0 0;
  font-size:.78rem;color:var(--text-schwach)}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--border)}
.hinweis{font-size:.85rem;color:var(--text2);margin:14px 0 0}

/* ------------------------------------------------------------------ Karten */
.karte{background:var(--card);border:1px solid var(--border);padding:16px;
  margin-bottom:14px}
.karte>h2{font-size:1.15rem;margin:0 0 10px;padding-bottom:8px;
  border-bottom:2px solid var(--border)}
.karte p{color:var(--text2);font-size:.92rem}
.karte form{margin:0}
.geraeteliste{list-style:none;margin:12px 0 0;padding:0}
.geraeteliste li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  padding:8px 0;border-top:1px solid var(--border-lt)}
.geraeteliste .was{font-weight:600;flex:1;min-width:8rem}
.geraeteliste .wann{font-size:.82rem;color:var(--text-schwach)}
.geraeteliste form{margin:0}

.tagesseite .tagesblatt{background:var(--card);border:1px solid var(--border);
  padding:14px 16px}

/* ------------------------------------------------------ Grosser Bildschirm */
@media (min-width:640px){
  main{padding:14px max(16px,var(--links)) calc(96px + var(--unten))
    max(16px,var(--rechts));max-width:52rem;margin:0 auto;width:100%}
  .leistenzeile{max-width:52rem;margin:0 auto;padding-left:16px;padding-right:16px}
  .monatstitel{font-size:1.7rem}
  .tag{min-height:6.4rem}
  .chip{font-size:.7rem}
  .fer{font-size:.58rem}
  .ftname{font-size:.68rem}
  .ferleiste{flex-direction:row}
}

@media (prefers-reduced-motion:reduce){
  .raster.wechselt{transition:none}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media print{
  .leiste,.plus,.stand,.konflikte,.fusszeile,.ansichtwahl,.ansichthinweis,
  .verdecktzeile{display:none}
  body{background:#fff}
}

/* ------------------------------------------------- Familienkalender-Teile
   Personenfilter, Wochentagswahl, Uhrzeit, Stundenraster und Auswertung.
   Farben der Personen kommen als --f aus dem Markup und damit aus
   farbe_von() im Generator. */

.personenfilter{display:flex;gap:6px;overflow-x:auto;padding:2px 0 8px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.personenfilter::-webkit-scrollbar{display:none}
/* 44 px statt 38: die Filterzeile ist das, was am haeufigsten danebengeht,
   und 38 px liegen unter der Grenze fuer einen Daumen. */
.pchip{flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:0 12px;border:1px solid var(--border);border-radius:20px;
  background:var(--card);color:var(--text2);font-size:.82rem;font-weight:500;
  text-decoration:none;white-space:nowrap}
.pchip.an{background:var(--f,var(--text));border-color:var(--f,var(--text));
  color:#fff;font-weight:600}

/* Uhrzeit als kleiner Vorsatz am Termin im Monatsraster. */
.chip u{text-decoration:none;font-variant-numeric:tabular-nums;font-weight:600;
  flex:none;opacity:.9}

.feldname{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text2);margin-bottom:4px}

.wochentagwahl{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wtag input{position:absolute;opacity:0;width:1px;height:1px}
.wtag span{display:flex;align-items:center;justify-content:center;min-height:44px;
  border:1px solid var(--border);background:var(--card);color:var(--text2);
  font-size:.8rem;font-weight:600;cursor:pointer}
.wtag input:checked+span{background:var(--primary);border-color:var(--primary);
  color:#fff}
.wtag input:focus-visible+span{outline:2px solid var(--primary);outline-offset:2px}

/* ------------------------------------------------------- Bereichswahl

   Familie, Arbeit, Beides im Eingabeblatt. Gleiche Bauform wie die
   Wochentagswahl darunter, damit die Maske nicht mit jedem Feld eine neue
   Form lernt. */
.bereichwahl{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.bkasten{position:relative}
.bkasten input{position:absolute;opacity:0;width:1px;height:1px}
.bkasten span{display:flex;align-items:center;justify-content:center;
  min-height:44px;border:1px solid var(--border);background:var(--card);
  color:var(--text2);font-size:.82rem;font-weight:600;cursor:pointer}
.bkasten input:checked+span{background:var(--text);border-color:var(--text);
  color:#fff}
.bkasten input:focus-visible+span{outline:2px solid var(--primary);
  outline-offset:2px}

/* Die Marke am einzelnen Eintrag. Sie steht nur ausserhalb des
   Familienkalenders, siehe _posten.html. */
.art.bereich{border-style:dashed}
.art.bereich.b-arbeit{color:#7a3d06;border-color:#e0c49a}
.art.bereich.b-beides{color:var(--text2);border-color:var(--border)}
.art.bereich.b-familie{color:var(--ok);border-color:#bcd8bc}

/* ------------------------------------------------------------ Erinnerung */

/* Zwei Gruppen von Vorgaben, je nachdem ob der Eintrag eine Uhrzeit hat. Ohne
   JavaScript stehen beide da, deshalb tragen sie eine eigene Ueberschrift. */
.erinnerungsfeld{margin-bottom:14px}
.vorlaufgruppe{margin-bottom:8px}
.gruppenname{margin:0 0 5px;font-size:.78rem;color:var(--text-schwach)}
/* Zwei Spalten auf dem Telefon, weil "Vorabend 18 Uhr" in einem Siebtel der
   Breite nicht lesbar waere. Ab der Handbreite eines groesseren Geraets vier. */
.vorlaufwahl{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.vorlauf input{position:absolute;opacity:0;width:1px;height:1px}
.vorlauf span{display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:4px 6px;text-align:center;
  border:1px solid var(--border);background:var(--card);color:var(--text2);
  font-size:.8rem;font-weight:600;cursor:pointer}
.vorlauf input:checked+span{background:var(--primary);border-color:var(--primary);
  color:#fff}
.vorlauf input:focus-visible+span{outline:2px solid var(--primary);
  outline-offset:2px}
.erinnerungsfeld .frei{margin-bottom:6px}

/* Der Zustand der Erinnerungen auf der Kontoseite. Ruhig, solange alles
   stimmt, deutlich, sobald nichts mehr ankommt. */
.erinnerungslage{margin:0 0 10px;padding:9px 11px;font-size:.9rem;
  background:var(--surface);border-left:3px solid var(--border);
  color:var(--text2)}
.erinnerungslage.achtung{background:var(--warn-bg);border-left-color:var(--warn);
  color:#7a3d06;font-weight:600}

.posten .erinnert{color:var(--text-schwach)}

/* Wer welche Erinnerung bekommt. Steht auf der Kontoseite ueber dem Zustand,
   ruhig abgesetzt, weil es eine Auskunft ist und keine Warnung. */
.wemgilt{margin:0 0 12px;padding:9px 11px;background:var(--surface);
  border-left:3px solid var(--border);font-size:.88rem;color:var(--text2)}

.schalter{display:flex;align-items:center;gap:10px;min-height:48px;
  margin:0 0 8px;cursor:pointer;font-size:.95rem;color:var(--text)}
.schalter input{width:22px;height:22px;accent-color:var(--primary);flex:none}
.zeitpaar{margin-bottom:12px}

.endehinweis{margin:0 0 12px;padding:8px 10px;font-size:.86rem;
  background:var(--surface);border-left:3px solid var(--border);color:var(--text2)}
.endehinweis.achtung{background:var(--warn-bg);border-left-color:var(--warn);
  color:#7a3d06}

/* ----------------------------------------------------------- Stundenraster */
.ganztagsband{margin-bottom:12px}
.stundenraster{position:relative;--zeile:46px;--minute:calc(var(--zeile) / 60);
  border:1px solid var(--border);background:var(--card);margin-bottom:14px}
.stunde{position:relative;height:var(--zeile);border-top:1px solid var(--border-lt)}
.stunde:first-child{border-top:0}
.uhr{position:absolute;left:6px;top:-.62em;font-size:.7rem;font-weight:600;
  color:var(--text-schwach);font-variant-numeric:tabular-nums;
  background:var(--card);padding:0 3px}
.zeitposten{position:absolute;left:3.1rem;right:6px;
  top:calc((var(--start) - var(--erste) * 60) * var(--minute));
  height:calc((var(--ende) - var(--start)) * var(--minute));
  min-height:2.3rem;display:flex;flex-direction:column;gap:1px;
  padding:4px 8px;overflow:hidden;
  background:color-mix(in srgb, var(--f) 10%, #fff);
  border:1px solid var(--f);border-left:4px solid var(--f)}
.zeitposten .zeit{font-size:.72rem;font-weight:700;color:var(--f);
  font-variant-numeric:tabular-nums}
.zeitposten .titel{font-size:.88rem;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeitposten .wer{font-size:.72rem;color:var(--text2)}
.zeitposten .ganz{position:absolute;inset:0}

.ort a{color:var(--primary);text-decoration:underline}

/* -------------------------------------------------------------- Auswertung */
.auswahl{background:var(--card);border:1px solid var(--border);padding:14px 16px;
  margin-bottom:14px}
.auswahl fieldset{border:0;padding:0;margin:0 0 14px}
.auswahl legend{font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text2);padding:0;margin-bottom:6px}
.personenwahl{display:flex;flex-wrap:wrap;gap:6px}
.pkasten input,.zkasten input{position:absolute;opacity:0;width:1px;height:1px}
.pkasten span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--border);border-radius:20px;background:var(--card);
  color:var(--text2);font-size:.86rem;cursor:pointer}
.pkasten input:checked+span{background:var(--f);border-color:var(--f);color:#fff;
  font-weight:600}
.pkasten input:focus-visible+span,.zkasten input:focus-visible+span{
  outline:2px solid var(--primary);outline-offset:2px}
.zeitraumwahl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.zkasten span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--border);background:var(--card);color:var(--text2);
  font-size:.86rem;cursor:pointer}
.zkasten input:checked+span{background:var(--rot-bg);border-color:var(--primary);
  color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px var(--primary)}

.zusammenfassung{background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--primary);padding:14px 16px;margin-bottom:14px}
.zusammenfassung h2{font-size:1.2rem;margin:0 0 4px}
.zeitfenster{color:var(--text2);font-size:.9rem;margin:0 0 10px}
.typzahlen{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0;
  padding:0;font-size:.88rem;color:var(--text2)}
.typzahlen .zahl{font-family:"DM Serif Display",Georgia,serif;font-size:1.25rem;
  color:var(--text);margin-right:4px}
.typzahlen i{font-style:normal;color:var(--text-schwach);font-size:.78rem;
  margin-left:5px}
.urlaubszahlen{list-style:none;margin:12px 0 0;padding:0;font-size:.9rem;
  color:var(--text2)}
.urlaubszahlen li{padding:6px 0 6px 10px;border-left:3px solid var(--f)}
.urlaubszahlen b{color:var(--text)}
.ergebnisliste{list-style:none;margin:0;padding:0}
.ergebnisliste .posten{background:var(--card);border:1px solid var(--border);
  border-left:4px solid var(--f,var(--text-schwach));padding:10px 12px;
  margin-bottom:8px}

.ganzertag{margin:0 0 14px}
.ganzertag>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
  gap:8px;font-size:.86rem;color:var(--text2);list-style:none}
.ganzertag>summary::-webkit-details-marker{display:none}
.ganzertag>summary::after{content:"";flex:none;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor}
.ganzertag[open]>summary::after{transform:rotate(180deg)}

@media (min-width:640px){
  .stundenraster{--zeile:54px}
  .zeitposten{left:3.6rem}
}

@media (min-width:26rem){
  .vorlaufwahl{grid-template-columns:repeat(4,1fr)}
}

/* ------------------------------------------------- Wechselseite (31.08.2026)

   Nur die beiden Stuecke, die es auf der Anmeldeseite noch nicht gab. Alles
   Uebrige der Wechselseite laeuft ueber .anmeldekasten, .feld, .knopf und
   .hinweis und sieht deshalb aus wie die Anmeldung, die kurz davor dastand.
   Beide Knoepfe bleiben ueber der 44-px-Grenze fuer einen Daumen, weil .knopf
   min-height:48px setzt. --text2 (#4a4845) auf --warn-bg (#fff8ef) liegt weit
   ueber AA. */
.wechselhelfer{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.wechselhelfer .knopf{flex:1 1 10rem}
.anmeldekasten .netzhinweis{border-left:3px solid var(--warn);
  background:var(--warn-bg);padding:8px 10px;color:var(--text2)}