/* ============================================================
   u flow – Datums-Picker (eigenständiges Modul, gehört zu kalender.js)
   Nutzt die globalen Design-Tokens aus styles.css (:root).
   ============================================================ */
.kalender-pop {
  position: fixed; z-index: 11000; width: 256px; /* über dem Panel-Overlay (10000) */
  background: var(--karte-bg-fest); border: 1px solid var(--karte-rand);
  border-radius: 16px; box-shadow: var(--schatten-drag);
  padding: 12px; user-select: none;
  animation: kal-ein 0.14s ease-out;
}
@keyframes kal-ein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kal-titel { font-size: 13.5px; font-weight: 600; color: var(--text-stark); }
.kal-nav {
  width: 28px; height: 28px; border-radius: 50%; border: none; background: none;
  color: var(--text-mittel); font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.kal-nav:hover { background: rgba(120, 104, 84, 0.10); color: var(--text-stark); }
.kal-wt { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.kal-wt span { text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-leise); }
.kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kal-tag {
  height: 30px; border: none; background: none; border-radius: 9px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--text-stark);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.kal-tag:hover { background: rgba(120, 104, 84, 0.10); }
.kal-tag.aus { color: var(--text-leise); opacity: 0.45; }
.kal-tag.heute { box-shadow: inset 0 0 0 1.5px rgba(176, 125, 86, 0.5); font-weight: 600; }
.kal-tag.sel, .kal-tag.sel:hover { background: var(--akzent); color: #fff; font-weight: 600; box-shadow: none; }
.kal-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--karte-rand); }
.kal-link {
  border: none; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px;
  color: var(--akzent); font-weight: 600; padding: 3px 6px; border-radius: 7px;
  transition: background 0.12s ease, color 0.12s ease;
}
.kal-link:hover { background: rgba(176, 125, 86, 0.10); }
.kal-loesch { color: var(--text-leise); }
.kal-loesch:hover { color: var(--lamp-rot); background: rgba(216, 81, 63, 0.08); }
@media (prefers-reduced-motion: reduce) { .kalender-pop { animation: none; } }