/* css/kalender-kopf.css — die Datumszeile des Kalenders
 *
 * EINE DATEI, EINE WAHRHEIT
 * Bis 2026-08-02 lagen die Werte dieser Zeile in css/style.css,
 * css/nv-consistency.css und css/ios-grouped.css gleichzeitig. Jede Datei
 * ueberschrieb die vorige mit `!important`; die Pfeile hatten drei verschiedene
 * Groessen (32, 36, 42, 44 px), je nachdem, welche Regel am Ende gewann. Wer
 * etwas aendern wollte, fand zwei von drei Stellen — und wunderte sich.
 * Diese Datei wird als LETZTE eingebunden (siehe index.php) und braucht deshalb
 * kein einziges `!important`.
 *
 * DER AUFBAU (Stefan 2026-08-02: „kalender sieht nicht aufgeräumt aus. heute
 * nicht zentriert und wir verliren viel platz müsste smarter mit datum
 * kombiniert werden")
 *
 *   ┌───────────────────────────────────────────────────────────┐
 *   │  2. August          ☀ 18°     [Heute]  ‹  ›  ⚟            │
 *   │  Sonntag · 2026                                           │
 *   └───────────────────────────────────────────────────────────┘
 *     └ antippen = Mini-Kalender          └ nur, wenn nicht heute
 *
 * EINE Zeile statt zwei. Die zweite Reihe kostete rund 60 px — auf einem
 * Telefon knapp eine Stunde Kalender.
 *
 * WARUM „HEUTE" VERSCHWINDET, WENN MAN AUF HEUTE STEHT
 * Ein Knopf, der einen dorthin bringt, wo man schon ist, belegt dauerhaft
 * Platz fuer nichts. Umgekehrt wird sein Auftauchen zur Information: „du
 * bist woanders". Das ist derselbe Gedanke wie beim Zurueck-Pfeil, den es
 * auf der ersten Seite auch nicht gibt.
 *
 * TIPPFLAECHEN: 44 px, und zwar als `flex: 0 0 44px`, nicht nur als `height`.
 * Ein Flex-Kind wird von seinem Elternteil zusammengedrueckt — die Pfeile
 * standen im Aufbau auf 44 und massen auf dem Bildschirm 40. Mit `flex-shrink:
 * 0` haelt der Knopf seine Groesse, egal was darueber liegt.
 *
 * VERLINKUNGEN: js/buchungen.js (baut die Zeile), tools/ui-vorschau.cjs
 * (misst die Tippflaechen nach), docs/DEVLOG.md 2026-08-02.
 */

/* ── Die Zeile ───────────────────────────────────────────────────────── */

/* E4 (2026-09-01) — MESSREGEL 1, gemessen an js/buchungen.js: `.kal-header-v2`,
   `.kal-kopf`, `.kal-datum*`, `.kal-blatt*`, `.kal-nav-arrow`, `.kal-heute`
   (ohne -fix/-chip), `.kal-wetter-inline`, `.kal-online-dot`, `.kal-filter-btn`
   haben dort 0 Erzeuger — der Rosé-Kopf (system.css §11) hat diese Zeile
   abgeloest. Erreichbar sind nur `.kal-datum-huelle` (leerer Anker),
   `.kal-kopf-rechts` (leerer Halter) und `.kal-col-header`. Die harten Werte
   unten sind deshalb auf die Marken umgelenkt (gleicher Wert, 0 Bild-
   aenderung); der Abbau der toten Regeln ist Altbestand-Arbeit fuer ein
   eigenes Paket. */
.kal-kopf {
  display: flex;
  align-items: center;
  gap: var(--nv-s2);
  min-height: 48px;
  /* KEIN Umbruch. Bricht die Zeile um, ist der ganze Gewinn wieder weg —
     und genau das war der Zustand vorher. Der Datumsblock darf dafuer
     schrumpfen (`min-width: 0` unten), die Knoepfe nicht. */
  flex-wrap: nowrap;
}

/* ── Links: das Datum ────────────────────────────────────────────────── */
.kal-datum-huelle { position: relative; min-width: 0; flex: 1 1 auto; }

.kal-datum {
  display: flex;
  align-items: center;
  gap: var(--nv-luft-1);
  width: 100%;
  min-width: 0;
  min-height: var(--nv-tap);
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.kal-datum:active { opacity: .55; }

/* Das Kalenderblatt: Zahl gross oben, Monat klein unten.
   `tabular-nums` haelt die Ziffern gleich breit — sonst huepft das Blatt
   zwischen dem 1. und dem 11. um zwei Pixel, und das sieht man. */
.kal-blatt {
  flex: 0 0 auto;
  width: 46px; height: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--nv-r-eingabe);
  background: var(--k-fill);
  color: var(--k-text);
  line-height: 1;
}
.kal-blatt b {
  font-size: var(--k-fs-titel); font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kal-blatt i {
  font-style: normal;
  font-size: var(--k-fs-micro); font-weight: 700; letter-spacing: .09em;
  margin-top: 2px; opacity: .62;
}
/* Heute faellt auf — wie im Kalender jedes Telefons. */
.kal-blatt.ist-heute {
  background: var(--k-brand);
  color:var(--k-text-auf-marke);
}
.kal-blatt.ist-heute i { opacity: .8; }
/* Die Wochenansicht zeigt eine Spanne („2–8") und braucht mehr Breite. */

.kal-datum-text { display: flex; flex-direction: column; min-width: 0; }
.kal-datum-text b {
  display: block;
  font-size: var(--k-fs-hervor);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--k-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kal-datum-text small {
  display: block;
  font-size: var(--k-fs-caption);
  font-weight: 500;
  line-height: 1.25;
  color: var(--k-text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Der kleine Pfeil neben dem Datum ist entfallen (2026-08-02).
   Er kostete 22 px in einer Zeile, die auf einem 390-px-Telefon 8 px zu
   wenig hatte — gemessen, nicht geschaetzt: `.kal-kopf` ist dort 322 px
   breit, der Inhalt wollte 330. Deshalb wurde „Sonntag" zu „So…".
   Ein farbiges Kalenderblatt sieht man an; dass man es antippen kann,
   muss ihm kein Pfeil erklaeren. Apples Kalender hat dort auch keinen. */

/* Das Wetter gehoert zum Datum, nicht zu den Knoepfen. Es ist das Erste,
   was weicht, wenn der Platz knapp wird — eine Temperatur ist angenehm,
   aber niemand steuert damit den Kalender. */
/* ══ MITTIG (Stefan 2026-08-02: „wetter müsste zentriert sein") ═════════
   Diese Regel stammt aus dem alten Kopf, wo das Wetter NEBEN dem Datum in
   einer Zeile stand — dort war linksbündig richtig. Seit es unter dem Datum
   steht, ist der Kasten zwar mittig, sein Inhalt klebte aber am linken Rand:
   `text-align` wirkt in einem Flex-Behälter nicht. Gemessen war die Textmitte
   37 px links der Bildschirmmitte, während der Titel darüber genau mittig
   sass — dieser Versatz war der sichtbare Fehler.
   `justify-content` ist die Angabe, die in einem Flex-Behälter zählt. */

/* ── Rechts: alles, was man bedient ──────────────────────────────────── */
.kal-kopf-rechts {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  /* KEIN `margin-left: auto`.
     Das stand hier und sah harmlos aus — es hat aber „Sonntag" auf „So…"
     verkuerzt, obwohl 36 px frei waren. Ein automatischer Aussenabstand
     schluckt den freien Platz KOMPLETT, bevor `flex-grow` ueberhaupt
     verteilen darf. Der Datumsblock ist `flex: 1 1 auto` und schiebt die
     Gruppe von selbst nach rechts; der Abstand war nie noetig.
     Gemessen: Datumsblock 136 px, Gruppe 178 px, Fenster 390 px — es hat
     immer gepasst, es durfte nur nicht. */
}

.kal-nav-arrow {
  width: var(--nv-tap); height: var(--nv-tap);
  min-width: var(--nv-tap); min-height: var(--nv-tap);
  flex: 0 0 var(--nv-tap);
  align-self: center;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--k-text2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, transform .1s;
}
.kal-nav-arrow .material-symbols-rounded { font-size: 24px; }
.kal-nav-arrow:active { background: var(--k-fill); transform: scale(.92); }

/* Der Filter traegt einen Punkt, wenn er etwas ausblendet. Ohne das Zeichen
   sucht man Termine, die man selbst weggefiltert hat. */

/* „Heute" — nur sichtbar, wenn man nicht auf heute steht (js/buchungen.js
   baut den Knopf dann gar nicht erst). Deshalb darf er auffallen. */
.kal-heute {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--nv-s4);
  margin-right: 2px;
  border: none;
  border-radius: var(--k-r-full);
  background: var(--k-brand);
  color:var(--k-text-auf-marke);
  font-family: inherit;
  font-size: var(--k-fs-body);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s, opacity .15s;
}
.kal-heute:active { transform: scale(.95); opacity: .85; }

/* Der Punkt fuer Online-Anfragen wird von js/buchungen.js hier eingehaengt
   (`_kalRenderOnlineBanner`). */

/* ── Enge Telefone ───────────────────────────────────────────────────── */
/* Unter 380 px (iPhone SE, mini) wird es mit „Heute" + drei Knoepfen zu eng.
   Dann faellt das Wetter weg — die einzige Angabe, die man nicht bedient. */
@media (max-width: 379px) {
  /* Das Wetter bleibt AUCH auf schmalen Geräten stehen. Ausgeblendet wurde
     es, als es sich mit Datum und vier Knöpfen eine Zeile teilte — dort war
     es der Platzfresser. Auf einer eigenen Zeile unter dem Datum nimmt es
     niemandem etwas weg, und ein Salon ohne Wetterangabe war nie die Absicht. */
  .kal-kopf { gap: var(--nv-s1); }
  .kal-datum-text b { font-size: var(--k-fs-hervor); }
  /* Auf sehr schmalen Geraeten (iPhone SE, mini) passen Datum und vier
     Knoepfe nicht nebeneinander — dann fallen die Pfeile weg. Den Tag
     wechselt man dort mit einem Wisch ueber das Raster (js/buchungen.js,
     `_kalSwipe*`); die Funktion geht also nicht verloren, sie wechselt nur
     die Hand. Verkleinern statt weglassen waere die schlechtere Wahl:
     ein 34-px-Pfeil ist da, aber nicht zu treffen. */
}

/* ── Bildschirm ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .kal-datum-text b { font-size: var(--k-fs-titel); }
  .kal-datum-text small { font-size: var(--k-fs-body); }
  /* Auf dem Bildschirm ist Platz — der Datumsblock nimmt sich nur, was er
     braucht, damit die Bedienelemente nicht ans andere Ende der Seite
     wandern. 1440 px zwischen Datum und Pfeil sind keine Gestaltung. */
  .kal-datum-huelle { flex: 0 1 auto; }
  .kal-kopf { gap: var(--nv-s4); }
  .kal-kopf-rechts { margin-left: 0; }
}

/* ══ DIE MITARBEITER-ZEILE MUSS DECKEN ═══════════════════════════════════
   Seit sie klebt (siehe js/buchungen.js, `#kal-hscroll`), laeuft das Raster
   UNTER ihr durch. Die bisherige Glas-Flaeche kam aus keeva-ui.css und misst
   `rgba(0,0,0,.02)` — praktisch durchsichtig. Das war richtig, solange die
   Zeile mitgescrollt ist und nichts hinter ihr lag; seit sie stehen bleibt,
   liest man Termine und Rasterlinien durch die Namen hindurch (Stefans
   Bildschirmfoto 22:32).

   Deckend heisst hier: die Farbe des Untergrunds, nicht Weiss — sonst haette
   man im dunklen Thema einen hellen Balken quer im Kalender. Die Unschaerfe
   bleibt, sie macht den Uebergang weich.

   Zwei Klassen im Selektor, weil die Regel aus keeva-ui.css verschachtelt ist
   und damit schwerer waere als eine einzelne Klasse. */
/* Demo (.spaltenkopf): Avatare DIREKT auf dem Grund — keine Box, kein
   Balken (Stefan 2026-08-25). Damit beim Scrollen darunter keine Termin-
   Bloecke durch die Namen laufen, ein weicher Milchglas-Schleier ohne
   sichtbare Kante. */
body .kal-col-header,
body.k-ui .kal-col-header {
  /* Kein Schleier, kein Blur mehr: der Kopf klebt nicht mehr, er scrollt
     mit dem Raster (Stefan 2026-08-25: «den blur entfernen und generell
     andere loesung finden»). Avatare stehen direkt auf dem Grund. */
  background: transparent;
}