/* Kalender-Popup der Tagesnavigation (kalender.js) — eigene Datei nach dem
   Muster von abrechnung.css: Die Gestaltung gehört zum Modul. */

.kalender {
  position: fixed; z-index: 45;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand-feld);
  border-radius: var(--rundung-gross, 8px);
  box-shadow: 0 12px 32px rgb(0 0 0 / .22);
  padding: .65rem;
  user-select: none;
}

.kalenderkopf { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; }
.kalenderkopf strong { flex: 1; text-align: center; font-size: 1rem; }
.kalenderkopf button { padding: .5rem .85rem; }

.kalendergitter {
  display: grid;
  grid-template-columns: 2.1rem repeat(7, 2.8rem);
  gap: 2px;
}
.kalendergitter .spaltenkopf, .kalendergitter .kw {
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; color: var(--gedaempft);
}
.kalendergitter .kw { border-right: 1px solid var(--rand-fein); }

/* Große Ziele mit Absicht: Das Datum wird in Eile getroffen, deshalb sind die
   Zellen deutlich größer als im nativen Browser-Kalender, der sich nicht
   vergrößern lässt. */
.kalender .tagzelle {
  height: 2.6rem; padding: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--rundung, 6px);
  font-size: .95rem; font-variant-numeric: tabular-nums;
}
.kalender .tagzelle:hover { background: var(--spur); border-color: var(--rand); }
.kalender .tagzelle.andermonat { color: var(--gedaempft); }
.kalender .tagzelle.heute { border-color: var(--akzent); }
.kalender .tagzelle.gewaehlt { background: var(--akzent); color: var(--primary-foreground); border-color: var(--akzent); }
.kalender .tagzelle:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }