/* KALENDER (24.09.2026) — eigener Datumswähler für Formulare, Ablauf assets/js/kalender.js.
   Dunkel, Kanten eckig wie die übrigen Felder, Auswahl in Neon-Türkis. */
.l7-kal { position: relative; display: block; }
html .l7-form .l7-kal__anzeige { width: 100%; cursor: pointer; padding-right: 48px; caret-color: transparent; }
.l7-kal__symbol { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--l7-teal); pointer-events: none; filter: drop-shadow(0 0 6px rgba(4,255,247,0.45)); }
.l7-kal__symbol svg { display: block; width: 100%; height: 100%; }
.l7-kal.is-offen .l7-kal__anzeige { border-color: var(--l7-teal); box-shadow: var(--l7-neon); }

.l7-kal__pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: 336px; max-width: calc(100vw - 32px);
  padding: 18px 18px 14px; background: #111313; border: 1px solid rgba(4,255,247,0.55); border-top: 3px solid var(--l7-teal);
  box-shadow: 0 24px 60px rgba(0,0,0,0.65), 0 0 32px rgba(4,255,247,0.12);
  letter-spacing: normal; text-transform: none; font-family: var(--l7-font, inherit);
  animation: l7-kal-auf 0.16s ease-out;
}
@keyframes l7-kal-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .l7-kal__pop { animation: none; } }

.l7-kal__kopf { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin-bottom: 12px; }
.l7-kal__monat { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.l7-kal__blaettern { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; background: transparent; color: var(--l7-teal); border: 1px solid rgba(255,255,255,0.16); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.l7-kal__blaettern svg { width: 16px; height: 16px; }
.l7-kal__blaettern:hover:not(:disabled) { border-color: var(--l7-teal); background: var(--l7-teal); color: #0A0A0A; }
.l7-kal__blaettern:disabled { color: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.07); cursor: default; }

.l7-kal__wochentage, .l7-kal__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.l7-kal__wochentage { margin-bottom: 6px; }
.l7-kal__wochentage span { text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; color: rgba(255,255,255,0.45); padding: 4px 0; }

.l7-kal__tag {
  aspect-ratio: 1; min-height: 38px; padding: 0; display: grid; place-items: center; position: relative;
  background: rgba(255,255,255,0.035); color: #fff; border: 1px solid transparent;
  font: 700 14px/1 var(--l7-font, inherit); cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s, box-shadow 0.12s;
}
.l7-kal__tag.is-fremd { background: transparent; color: rgba(255,255,255,0.35); }
.l7-kal__tag:hover:not(:disabled) { border-color: var(--l7-teal); color: var(--l7-teal); }
.l7-kal__tag:focus-visible { outline: 2px solid var(--l7-teal); outline-offset: 1px; }
.l7-kal__tag.is-heute::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--l7-teal); }
.l7-kal__tag:disabled { background: transparent; color: rgba(255,255,255,0.16); cursor: default; }
.l7-kal__tag.is-gewaehlt, .l7-kal__tag.is-gewaehlt:hover { background: var(--l7-teal); border-color: var(--l7-teal); color: #0A0A0A; box-shadow: 0 0 18px rgba(4,255,247,0.55); }
.l7-kal__tag.is-gewaehlt::after { background: #0A0A0A; }

.l7-kal__fuss { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.l7-kal__leeren { background: none; border: 0; padding: 6px 0; color: rgba(255,255,255,0.55); font: 700 11px/1 var(--l7-font, inherit); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.l7-kal__leeren:hover { color: var(--l7-teal); }

@media (max-width: 560px) {
  .l7-kal__pop { left: 0; right: 0; width: auto; max-width: none; }
}