/*
 * Mini-Kalender -- Darstellung.
 *
 * Der Kern vergibt Klassen, diese Datei gibt ihnen ein Aussehen. Die
 * fachlichen Zustaende `-z-<name>` bleiben bewusst OHNE Farbe: welche Farbe
 * "Krankheit" hat, entscheidet das Werkzeug, nicht der Kern. Hier stehen nur
 * Raster, Groesse, Fokus und die drei Zustaende, die jeder Kalender kennt --
 * Wochenende, Feiertag, heute.
 *
 * Zwei Dinge sind Barrierefreiheit, nicht Geschmack:
 *
 *   - 44 CSS-Pixel Zeilenhoehe je Tag. Das ist das KUKANILEA-Ziel, nicht die
 *     Untergrenze: WCAG 2.2 SC 2.5.8 (Stufe AA) verlangt 24x24 oder
 *     ausreichenden Abstand, die 44 stehen in SC 2.5.5 (Stufe AAA). In einem
 *     Raster aus 42 nebeneinanderliegenden Knoepfen ist das Minimum zu knapp,
 *     weil der Nachbar der haeufigste Fehlgriff ist.
 *
 *     Die BREITE ist dagegen nicht festgelegt, und das ist eine bewusste
 *     Grenze dieser Datei: sieben Spalten teilen sich, was der Verbraucher
 *     hergibt. Auf einem 390 Pixel breiten Telefon sind das gemessen 34 Pixel
 *     je Tag -- ueber dem Mindestmass, aber unter den 44, die man gern haette.
 *     Wer den Kalender in einen schmaleren Bereich stellt, unterschreitet
 *     irgendwann auch die 24: `min-width` je Zelle waere hier die falsche
 *     Antwort, weil sie waagerechtes Scrollen im Kernworkflow erzeugt.
 *   - Der Fokusring liegt AUSSEN (`outline-offset`), sonst verdeckt ihn bei
 *     einem gewaehlten Tag dessen eigener Hintergrund.
 *
 * Und eine dritte Regel: Auswahl und Zustand duerfen nie allein durch Farbe
 * unterschieden werden (WCAG 1.4.1). Der gewaehlte Zeitraum traegt deshalb
 * zusaetzlich einen Rahmen, der Feiertag einen Punkt.
 */

.mk {
  --mk-rand: #d8dee7;
  --mk-ink: #1d2430;
  --mk-schwach: #99a2b0;
  --mk-flaeche: #fff;
  --mk-wochenende: #f4f6f9;
  --mk-feiertag: #fdf3e3;
  --mk-feiertag-ink: #8a5a12;
  --mk-heute: #1f6feb;
  --mk-wahl: #dce9fd;
  --mk-wahl-rand: #1f6feb;
  display: block;
  font-size: 14px;
  color: var(--mk-ink);
}

/* ── Kopf ────────────────────────────────────────────────────────── */

.mk-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.mk-nav,
.mk-heute {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--mk-rand);
  border-radius: 8px;
  background: var(--mk-flaeche);
  color: var(--mk-ink);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.mk-nav { font-size: 20px; }

/* Die Pfeile bleiben beieinander, auch wenn die Zeile umbricht. */
.mk-blaettern { display: inline-flex; gap: 6px; flex: 0 0 auto; }

/* `margin-left: auto` schiebt "Heute" auf dem Desktop nach rechts. Bricht die
 * Zeile um, waere das eine einzelne Schaltflaeche am rechten Rand einer sonst
 * leeren Zeile -- deshalb nur, solange Platz ist. */
@media (min-width: 30em) {
  .mk-heute { margin-left: auto; }
}

/* Der Monatswahl gehoert der freie Platz: sie traegt das laengste Wort. */
.mk .mk-monat { flex: 1 1 8em; min-width: 0; }

.mk-nav:hover,
.mk-heute:hover { background: var(--mk-wochenende); }

/* `.mk`-Praefix nicht aus Ordnungsliebe, sondern wegen der Spezifitaet.
 *
 * Am 2026-09-17 in `urlaub` gemessen: das Jahresfeld war 24 Pixel hoch statt
 * 44, und der Kopf stand dadurch schief. Ursache ist der erzeugte
 * Zielgroessen-Block (`sync_webtool_common.py`), der repoweit
 * `input[type="number"] { min-height: 24px }` setzt -- als Untergrenze voellig
 * richtig, aber mit Spezifitaet 0,1,1 gegen die 0,1,0 einer blossen Klasse.
 * Die Kaskade waehlt EINEN Gewinner, und das war nicht diese Datei.
 *
 * Der Ausweg ist nicht `!important` und auch nicht, die gemeinsame Regel
 * anzufassen: sie gilt fuer 185 Werkzeuge und hat recht. Diese Datei sagt ihre
 * eigene Absicht nur innerhalb ihres eigenen Bereichs -- 0,2,0 schlaegt 0,1,1.
 *
 * Das `<select>` war davon nicht betroffen (Typselektor 0,0,1), und genau
 * deshalb fiel es nur an einem der beiden Felder auf. */
.mk .mk-monat,
.mk .mk-jahr {
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--mk-rand);
  border-radius: 8px;
  background: var(--mk-flaeche);
  color: inherit;
  font: inherit;
}

/* Safari nimmt `min-height` an einem `<select>` nicht an, solange es in der
 * Systemdarstellung (`appearance: menulist`) steckt -- dort bestimmt die
 * Schriftgroesse die Hoehe. Am 2026-09-17 in WebKit gemessen: 22 Pixel statt
 * 44, waehrend Chromium und Firefox dieselbe Regel befolgten.
 *
 * Das ist kein Schoenheitsfehler, sondern die Zielgroesse -- und es war genau
 * der Befund, fuer den sich die Browsermatrix gelohnt hat: zwei von drei
 * Browsern sagten, alles sei in Ordnung.
 *
 * Welche Zielgroesse, sauber getrennt: WCAG 2.2 SC 2.5.8 (Minimum, Stufe AA)
 * verlangt 24 x 24 CSS-Pixel oder ausreichenden Abstand und kennt dabei
 * Ausnahmen -- ein natives `<select>` mit 22 Pixel Hoehe ist danach NICHT
 * allein wegen dieser Zahl ein Verstoss. Die 44 x 44 stammen aus SC 2.5.5
 * (Enhanced, Stufe AAA) und decken sich mit den ueblichen
 * Touch-Empfehlungen; sie sind hier KUKANILEA-Qualitaetsziel fuer zentrale
 * Kalendersteuerungen, nicht Mindestanforderung.
 *
 * Diese Unterscheidung stand hier zuerst falsch -- 22 Pixel wurden als
 * "Verstoss gegen SC 2.5.8, weil 44 erforderlich" ausgegeben. Der Test darf
 * 44 verlangen; er darf das nur nicht als Gesetz ausgeben.
 *
 * `appearance: none` nimmt Safari die Hoheit zurueck, kostet aber das
 * Aufklapp-Dreieck. Deshalb wird es hier selbst gezeichnet: ohne dieses
 * Zeichen sieht das Feld aus wie ein Textfeld, und niemand klickt es an.
 * Als `background-image` statt als Pseudoelement, weil ein `<select>` keine
 * eigenen Kindelemente darstellen darf. */
.mk .mk-monat {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2399a2b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Ein `<select>` ist `white-space: nowrap`; seine Mindestbreite ist die
 * laengste Option. "September" in einem 390-Pixel-Bildschirm neben vier
 * weiteren Bedienelementen erzeugt sonst waagerechtes Scrollen. */
.mk .mk-monat { max-width: 10.5em; }
.mk .mk-jahr { width: auto; min-width: 6em; flex: 0 0 auto; }

/* Schmale Breiten (2026-09-25): zwei FESTE Zeilen statt zufaelligen
 * Umbruchs. Gemessen bei 390 px: Blaettern 94 + Monat 147 + Jahr 84 +
 * Heute 61 plus Abstaende sind 404 px bei 358 verfuegbaren -- "Heute" fiel
 * je nach Monatsname mal in Zeile 1, mal in Zeile 2, dort 6 px hoeher als
 * die Monatsanzahl daneben. Kleinere Schrift gewinnt keine 46 px, ohne die
 * Tippziele unter 44 zu druecken; eine eigene Zeile gewinnt sie.
 *
 *   Zeile 1   <  >  Monat......  Jahr
 *   Zeile 2   Heute              1 · 2 · 3 Monate
 */
@media (max-width: 29.99em) {
  .mk-kopf {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "blaettern monat jahr" "heute anzahl anzahl";
    align-items: stretch;
  }
  .mk-blaettern { grid-area: blaettern; }
  .mk .mk-monat { grid-area: monat; max-width: none; width: 100%; padding-right: 22px; background-position: right 7px center; }
  .mk .mk-jahr { grid-area: jahr; min-width: 5.5em; }
  .mk-heute { grid-area: heute; justify-self: start; }
  .mk-anzahl { grid-area: anzahl; justify-self: end; align-self: stretch; }
  .mk-anzahl-knopf { min-height: 0; }
}

/* ── Raster ──────────────────────────────────────────────────────── */

.mk-raster { display: block; }

.mk-zeile {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.mk:has(.mk-kw) .mk-zeile,
.mk-zeile:has(.mk-kw),
.mk-zeile:has(.mk-kw-kopf) {
  grid-template-columns: 2.4em repeat(7, minmax(0, 1fr));
}

.mk-wochentage {
  font-size: 12px;
  color: var(--mk-schwach);
  text-align: center;
  padding-bottom: 4px;
}

.mk-wochentage span { padding: 4px 0; }

.mk-kw,
.mk-kw-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--mk-schwach);
  font-variant-numeric: tabular-nums;
}

.mk-tag {
  position: relative;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--mk-flaeche);
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  padding: 0;
}

.mk-tag:hover { background: var(--mk-wochenende); }

.mk-tag:focus-visible {
  outline: 2px solid var(--mk-heute);
  outline-offset: 2px;
  z-index: 1;
}

/* Tage aus dem Vor- oder Folgemonat bleiben sichtbar und bedienbar -- wer am
 * 31. Januar einen Zeitraum bis zum 2. Februar zieht, soll nicht blaettern
 * muessen. Sie treten nur zurueck. */
.mk-fremd { color: var(--mk-schwach); background: transparent; }

/* ── Kalendertatsache und Arbeitsmodell ──────────────────────────────
 *
 * Grau heisst hier "regulaer nicht gearbeitet", nicht "Samstag". Die beiden
 * fallen im Normalfall zusammen, und genau deshalb liessen sie sich so lange
 * verwechseln.
 *
 * Ohne Arbeitsmodell des Verbrauchers gilt der Kalender-Vorgabewert: Sa/So
 * grau. Sagt der Verbraucher `working` fuer einen Samstag, ist die Flaeche
 * weg; sagt er `nonWorking` fuer einen Mittwoch, ist sie da. Der Vorgabewert
 * Mo-Fr bleibt damit bequem, ohne Wahrheit zu sein.
 *
 * `:not()` statt einer zweiten Regel weiter unten, weil beide Klassen
 * gleichzeitig am selben Knopf haengen und die Reihenfolge im Stylesheet dann
 * ueber die Bedeutung entscheiden wuerde.
 */
.mk-wochenende:not(.mk-k-working) { background: var(--mk-wochenende); }
.mk-k-nonWorking { background: var(--mk-wochenende); }

.mk-feiertag {
  background: var(--mk-feiertag);
  color: var(--mk-feiertag-ink);
}

/* Nicht allein durch Farbe: ein Punkt unter der Tageszahl. */
.mk-feiertag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}

.mk-heute-tag { font-weight: 700; box-shadow: inset 0 0 0 2px var(--mk-heute); }

.mk-gewaehlt {
  background: var(--mk-wahl);
  border-color: var(--mk-wahl-rand);
}

/* Die Spanne, die der zweite Klick waehlen wuerde. Leiser als die Auswahl:
 * gleiche Flaeche, gestrichelter statt durchgezogener Rand -- entschieden ist
 * noch nichts. */
.mk-vorschau:not(.mk-gewaehlt) {
  background: var(--mk-wahl);
  border-color: var(--mk-wahl-rand);
  border-style: dashed;
}

/* ── Legende ─────────────────────────────────────────────────────── */

.mk-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--mk-schwach);
}

.mk-legende-punkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid var(--mk-rand);
}

/* Die Ansage ist fuer Screenreader, nicht fuer das Auge -- aber sie darf nicht
 * `display: none` sein, sonst liest sie niemand vor. */
.mk-ansage {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dunkel nur, wenn die SEITE dunkel ist -- nicht, wenn das System es ist.
   Bis zum 2026-09-24 stand hier `@media (prefers-color-scheme: dark)`, und
   beide Verbraucher (Urlaubsplaner, Brueckentage) sind helle Seiten: wer am
   Rechner den Dunkelmodus eingeschaltet hatte, sah einen schwarzen Kalender
   in einer weissen Seite. Die Webtool-Shell markiert ein dunkles Werkzeug mit
   `data-theme="dark"` am Wurzelelement (thema.js); genau daran haengt der
   Kalender jetzt. */
:root[data-theme="dark"] .mk {
    --mk-rand: #313a49;
    --mk-ink: #e6ebf2;
    --mk-schwach: #7d8797;
    --mk-flaeche: #161b23;
    --mk-wochenende: #1c222c;
    --mk-feiertag: #33270f;
    --mk-feiertag-ink: #e5b463;
    --mk-heute: #5b9dff;
    --mk-wahl: #1c3355;
    --mk-wahl-rand: #5b9dff;
}

/* ── Mehrere Monate (2026-09-25) ─────────────────────────────────────
 * Ein Raster je Monat. Die Spalten richten sich nach der Breite des
 * Kalenders, nicht nach dem Fenster: `auto-fit` mit 240 px Mindestbreite
 * stellt drei Monate nebeneinander, wo Platz ist, und bricht sonst um --
 * auf dem Telefon untereinander, ohne eigene Regel. */
.mk-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px 22px;
}
.mk-blocktitel { font-weight: 600; font-size: 14px; text-align: center; margin: 0 0 4px; color: var(--mk-ink); }
.mk-leer { min-height: 44px; }
.mk-anzahl { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--mk-rand); border-radius: 8px; }
.mk-anzahl-knopf {
  min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 13px; color: var(--mk-ink); cursor: pointer; white-space: nowrap;
}
.mk-anzahl-knopf[aria-pressed="true"] { background: var(--mk-ink); color: var(--mk-flaeche); font-weight: 600; }
.mk-anzahl-knopf:focus-visible { outline: 2px solid var(--mk-heute); outline-offset: 2px; }
@media (pointer: coarse) { .mk-anzahl-knopf { min-height: 44px; } }