/* 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,.wtagfeld.we,.gtfeld.we,.wochenspalte.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,.wtagfeld.ferbg{background:#fbfaf6}
.tag.we.ferbg,.wtagfeld.we.ferbg{background:#f4f2ec}
.tag.so,.wtagfeld.so{background:#fbf4f4}
.tag.ft,.wtagfeld.ft{background:#fdf6f5}
.tag.so .ziffer,.tag.ft .ziffer,
.wtagfeld.so .ziffer,.wtagfeld.ft .ziffer{color:var(--primary)}
.tag.ft .ziffer,.wtagfeld.ft .ziffer{font-weight:700}
.tag.heute,.wtagfeld.heute,.wochenspalte.heute{
  box-shadow:inset 0 0 0 2px var(--primary)}
.tag.heute .ziffer,.wtagfeld.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,.wtagfeld: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}

/* Der Passwortweg. Aufgeklappt sieht seine Zeile aus wie der Trenner, der
   frueher zwischen Geraeteknopf und Formular stand, zugeklappt wie ein Link,
   der ihn zurueckholt. Beide Male ist sie 44 px hoch, damit ein Daumen sie
   trifft. Das Dreieck des Browsers faellt weg, stattdessen steht die Zeile
   mittig zwischen zwei duennen Linien. */
.passwortweg>summary{display:flex;align-items:center;justify-content:center;
  gap:10px;min-height:44px;cursor:pointer;list-style:none;
  font-size:.85rem;color:var(--text2)}
.passwortweg>summary::-webkit-details-marker{display:none}
.passwortweg[open]>summary{margin-bottom:6px}
.passwortweg[open]>summary::before,.passwortweg[open]>summary::after{
  content:"";flex:1;height:1px;background:var(--border)}
.passwortweg:not([open])>summary{text-decoration:underline;
  text-underline-offset:3px}
.passwortweg>summary:focus-visible{outline:2px solid var(--primary);
  outline-offset:2px}
.hinweis{font-size:.85rem;color:var(--text2);margin:14px 0 0}

/* Der Passkey-Weg auf der Wechselseite (06.09.2026). Er steht ueber dem
   Formular, weil er der empfohlene Weg ist, und ist als eigener Block
   abgesetzt, damit niemand den Knopf fuer einen Teil des Formulars haelt.
   --text2 (#4a4845) auf --card (#fff) sind 9,1:1 und damit weit ueber AA. */
.anmeldekasten h2{font-size:1.05rem;margin:22px 0 8px;padding-bottom:6px;
  border-bottom:2px solid var(--border)}
.passkeyweg{margin-bottom:4px}
.passkeyweg h2{margin-top:0}
.passkeyweg .knopfzeile{margin-top:14px}

/* ------------------------------------------------------------------ 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,.saeule{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;
  /* Weisser Grund, Farbe nur in der Kante -- dieselbe Bauweise wie im
     Wochenraster. Bis zum 06.09.2026 lag hier eine 10-Prozent-Toenung der
     Personenfarbe, und die Uhrzeit stand in derselben Farbe darauf. Auf Weiss
     halten alle Personenfarben ihre 4,5:1, auf der Toenung nicht: #a16207
     fiel von 4,92 auf 4,32, #15803d von 5,02 auf 4,38. Bei 0,72 rem ist das
     kein grosser Text, AA war damit gerissen. */
  background:var(--card);
  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)}

/* ------------------------------------------------ Wochenblatt (06.09.2026)

   Sieben Tage nebeneinander mit Stundenraster. Der Aufbau ist ein Gitter aus
   zwei Spalten: links die Uhrzeiten, rechts die sieben Tage, und darin drei
   Zeilen aus Tagesköpfen, Ganztägigem und Stundenraster. Alle drei teilen
   dieselbe Spaltenaufteilung, sonst stünde ein Band über der falschen Spalte.

   Das Telefon ist die enge Stelle. Bei 375 px Bildschirmbreite bleiben nach
   Seitenrand und Uhrspalte rund 46 px je Tag. Titel sind darin abgeschnitten,
   und das ist Absicht: die Woche beantwortet, wann es voll ist, das Tagesblatt
   beantwortet, was da steht. Deshalb führt hier jeder Griff auf denselben Tag.
   Waagerechtes Scrollen wäre die Alternative gewesen, es kollidiert aber mit
   dem Wischen zwischen den Wochen. Ab 640 px, also auch auf einem Telefon im
   Querformat, werden die Spalten breit genug für den Titel.

   Kontrast: die Personenfarbe steht nur als Rand und als Uhrzeit auf weißem
   Grund, nie als Schrift auf einer getönten Fläche. Der schwächste Ton im
   Vorrat (#a16207) kommt auf Weiß auf 4,9:1; auf einer 10-Prozent-Tönung
   derselben Farbe fiele er auf 4,3:1 und damit unter AA. */
.wochenraster{--wzeile:40px;--wminute:calc(var(--wzeile) / 60);
  --uhrbreite:2.4rem}
.wochengitter{display:grid;grid-template-columns:var(--uhrbreite) minmax(0,1fr);
  column-gap:2px;align-items:start}

.uhrecke{min-height:1px}

/* --------------------------------------------------------- Tagesköpfe */
.wochentagsleiste{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;background:var(--border-lt);border:1px solid var(--border-lt);
  margin-bottom:4px}
/* 52 px Höhe: der Kopf ist der Griff, mit dem das Tagesblatt aufgeht, und
   liegt damit über der 44-px-Grenze für einen Daumen. */
.wtagfeld{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:1px;min-height:52px;padding:4px 1px;min-width:0;overflow:hidden;
  background:var(--card);color:inherit;text-decoration:none}
.wtagfeld .wt{padding:0;font-size:.6rem}
.wtagfeld .ziffer{min-width:1.55rem}
.wtagfeld .ferleiste{flex-direction:row;flex-wrap:wrap;justify-content:center;
  padding-top:0}
.wtagfeld .ftname{max-width:100%;font-size:.55rem}

/* ------------------------------------------------------------ Ganztägig */
/* font-size:0 statt display:none. Der Kasten ist das erste Feld seiner
   Gitterzeile; verschwände er, rutschten die sieben Tage eine Spalte nach
   links und stünden nicht mehr über dem Stundenraster. */
/* Klein und klein geschrieben. In Versalien mit Sperrung passt das Wort nicht
   in die 3,1 rem breite Uhrspalte und laeuft links aus dem Seitenrand heraus. */
.ganztagsmarke{font-size:0;color:var(--text-schwach);text-align:right;
  padding:3px 4px 0 0;line-height:1.2;overflow:hidden}
.ganztagsfeld{display:grid;grid-template-columns:minmax(0,1fr);margin-bottom:4px;
  background:var(--border-lt);border:1px solid var(--border-lt)}
.ganztagsfeld > *{grid-area:1/1}
/* Die Bandebene sitzt hier direkt oben auf, nicht wie im Monat unter der
   Kopfzeile des Tagesfeldes. Den Platz darunter hält .gtfeld frei. */
.ganztagsfeld .baender{padding-top:0}
.gtfeld{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden;
  padding:1px;min-height:calc(var(--bandh) + 4px);background:var(--card);
  padding-top:calc(1px + var(--reihen,0) * var(--bandh))}

/* ------------------------------------------------------ Stundenraster */
.uhrleiste{display:grid;grid-auto-rows:var(--wzeile);
  height:calc(var(--anzahl) * var(--wzeile))}
.uhrzeile{position:relative}
.uhrzeile i{position:absolute;right:3px;top:-.55em;font-style:normal;
  font-size:.62rem;font-weight:600;color:var(--text-schwach);
  font-variant-numeric:tabular-nums;background:var(--bg);padding:0 2px}

.wochenspalten{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;height:calc(var(--anzahl) * var(--wzeile));
  background:var(--border-lt);border:1px solid var(--border-lt)}
/* Die Stundenlinien als Hintergrundmuster statt als Knoten. Sieben Spalten mal
   sechzehn Stunden wären 112 leere Kästen im Markup, die niemand liest. */
.wochenspalte{position:relative;min-width:0;background-color:var(--card);
  background-image:repeating-linear-gradient(to bottom,
    var(--border-lt) 0, var(--border-lt) 1px,
    transparent 1px, transparent var(--wzeile))}
/* Die leere Fläche einer Spalte führt auf denselben Tag wie der Kopf darüber. */
.saeule{position:absolute;inset:0;z-index:0}
.saeule:active{background:rgba(26,25,23,.05)}

.wposten{position:absolute;z-index:1;
  top:calc((var(--start) - var(--erste) * 60) * var(--wminute));
  height:calc((var(--ende) - var(--start)) * var(--wminute));
  /* Ueberschneidungen werden gestaffelt und nicht geteilt. Bei zwei
     gleichzeitigen Terminen waeren zwei halbe Spalten auf einem Telefon je 22
     Pixel breit, und darin steht nicht einmal die Uhrzeit. Gestaffelt bleibt
     der vordere Termin ganz lesbar und vom hinteren sieht man Anfangszeit und
     Farbe. Dieselbe Bauform benutzen Outlook und der Google-Kalender. */
  left:calc(var(--spur) * 28%);
  width:calc(100% - var(--spur) * 28%);
  z-index:calc(1 + var(--spur));
  min-height:1.5rem;display:flex;flex-direction:column;overflow:hidden;
  padding:1px 3px;text-decoration:none;
  background:var(--card);border:1px solid var(--border);
  border-left:3px solid var(--f);
  /* Der Schatten macht die Kante zwischen zwei gestaffelten Terminen
     sichtbar. Ohne ihn sehen sie aus wie ein Kasten mit zwei Uhrzeiten. */
  box-shadow:-1px 0 0 rgba(26,25,23,.10)}
.wposten u{text-decoration:none;font-size:.58rem;font-weight:700;
  color:var(--f);font-variant-numeric:tabular-nums;line-height:1.25;
  white-space:nowrap;overflow:hidden}
/* Eine Zeile mit Auslassungspunkten statt eines Umbruchs, den der untere
   Rand des Kastens mitten im Wort abschneidet. Der ganze Titel steht im
   Tagesblatt, das ein Tippen auf denselben Termin oeffnet. */
.wposten i{font-style:normal;font-size:.6rem;font-weight:600;color:var(--text);
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wposten.wartet{border-style:dashed}
.wposten:active{background:var(--surface)}

@media (min-width:640px){
  .wochenraster{--wzeile:54px;--uhrbreite:3.1rem}
  .ganztagsmarke{font-size:.6rem}
  .wtagfeld{min-height:58px}
  .wtagfeld .wt{font-size:.66rem}
  .wposten u{font-size:.66rem}
  .wposten i{font-size:.72rem}
  .gtfeld .chip{font-size:.66rem}
}