/*
  workspace-bento-kalender-kachel.css — Aussehen der Kalender-Kachel auf der Bento-Startseite (Logik: workspace-bento-kalender-kachel.js).

  Kurzbeschreibung (für Laien): Ralph, 24.10.2026. Rahmen, Titel und Listenzeilen kommen aus workspace-bento.css und
  workspace-bento-kacheln.css; hier stehen nur die Teile, die neu sind: farbiger Punkt je Termin (eigen blau,
  Outlook/Exchange türkis, „Belegt" grau), Uhrzeit-Spalte, kleine Tages-Überschriften, der Mini-Monat in der großen
  Kachel. Texte erben die Schriftfarbe der Kachel (sie kann über den Pinsel umgefärbt werden), nie eine feste Textfarbe.
  Greift nur in der Bento-Ansicht (html.ws-bento) und nur in dieser Kachel.
*/

:root.ws-bento .wb-k[data-id="z-kalender"] { --zkk-eigen: var(--marke-nav-blau); --zkk-ol: var(--marke-tuerkis-tief); --zkk-belegt: var(--marke-text-3); }

/* 1×1: nächster Termin groß */
.wb-k[data-id="z-kalender"] .zkk-naechster { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: auto; padding: 0; border: 0; background: none;
  color: inherit; font-family: var(--marke-schrift); text-align: left; cursor: pointer; min-width: 0; max-width: 100%; }
.wb-k[data-id="z-kalender"] .zkk-gross { font-size: clamp(20px, 15cqi, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wb-k[data-id="z-kalender"] span.zkk-gross { margin-top: auto; }
.wb-k[data-id="z-kalender"] .zkk-titel { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wb-k[data-id="z-kalender"] .zkk-naechster:hover .zkk-titel { text-decoration: underline; text-underline-offset: 2px; }
.wb-k[data-id="z-kalender"] .zkk-naechster:focus-visible { outline: 2px solid var(--marke-akzent); outline-offset: 2px; border-radius: var(--marke-r-s); }

/* Liste: Punkt · Uhrzeit · Titel */
.wb-k[data-id="z-kalender"] .zkk-liste { flex: 0 1 auto; }
.wb-k[data-id="z-kalender"] .zkk-zeile { gap: 8px; }
.wb-k[data-id="z-kalender"] .zkk-zeile.vorbei { opacity: .55; }
.wb-k[data-id="z-kalender"] .zkk-zeit { order: -1; min-width: 44px; font-variant-numeric: tabular-nums; }
.wb-k[data-id="z-kalender"] .zkk-punkt { order: -2; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--zkk-eigen); box-shadow: 0 0 0 1.5px var(--wb-karte, #fff); }
.wb-k[data-id="z-kalender"] .zkk-punkt.ol { background: var(--zkk-ol); }
.wb-k[data-id="z-kalender"] .zkk-punkt.belegt { background: var(--zkk-belegt); }
.wb-k[data-id="z-kalender"] .zkk-tag { flex: none; padding: 8px 8px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--wb-leise); }
.wb-k[data-id="z-kalender"] .zkk-frei { padding: 6px 8px; margin: 0; }

/* Groß: Mini-Monat links, Termine rechts */
.wb-k[data-id="z-kalender"] .zkk-gross-raster { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 16px; flex: 1 1 auto; min-height: 0; }
.wb-k[data-id="z-kalender"] .zkk-rechts { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.wb-k[data-id="z-kalender"] .zkk-monat { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wb-k[data-id="z-kalender"] .zkk-mname { font-size: 13px; font-weight: 700; }
.wb-k[data-id="z-kalender"] .zkk-mraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.wb-k[data-id="z-kalender"] .zkk-wt { font-size: 10px; font-weight: 600; text-align: center; color: var(--wb-leise); }
.wb-k[data-id="z-kalender"] .zkk-mt { position: relative; display: flex; align-items: center; justify-content: center; height: 22px; border-radius: var(--marke-r-s);
  font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wb-k[data-id="z-kalender"] .zkk-mt.vorbei { opacity: .5; }
.wb-k[data-id="z-kalender"] .zkk-mt.hat { font-weight: 700; }
.wb-k[data-id="z-kalender"] .zkk-mt.hat::after { content: ''; position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .75; }
.wb-k[data-id="z-kalender"] .zkk-mt.viel::after { width: 10px; border-radius: 2px; }
.wb-k[data-id="z-kalender"] .zkk-mt.heute { box-shadow: inset 0 0 0 2px currentColor; opacity: 1; }

/* Formular „Neuer Termin" (Ralph 28.10.2026: Bezeichnung, Kalender-Symbol, Uhrzeit – fertig): Tag, von, bis in einer Reihe,
   bei wenig Breite umbrechend. Das Datumsfeld sieht aus wie die Felder daneben, mit Kalender-Symbol; die echte Datumsauswahl
   liegt unsichtbar darunter (wie die Frist im Aufgaben-Bento, workspace-bento-innenlisten.css .il-datum). */
.wb-k[data-id="z-kalender"] .zkk-wann { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
@container (max-width: 300px) {   /* schmales Bento: Tag über die ganze Breite, von/bis darunter */
  .wb-k[data-id="z-kalender"] .zkk-wann { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wb-k[data-id="z-kalender"] .zkk-wann > :first-child { grid-column: 1 / -1; }
}
.wb-k[data-id="z-kalender"] .zkk-wann .il-feld { padding: 0 8px; }
.wb-k[data-id="z-kalender"] .zkk-datum { display: flex; width: 100%; min-width: 0; }
.wb-k[data-id="z-kalender"] .zkk-datum .il-feld { display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer; }
.wb-k[data-id="z-kalender"] .zkk-datum .il-feld span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wb-k[data-id="z-kalender"] .zkk-datum svg { width: 15px; height: 15px; flex: none; }