/* ==========================================================================
   Klaredo Ferien – Buchungskalender
   Zustandsfarben sind FEST (unabhängig von der Kundenfarbe), damit „frei“,
   „gebucht“ usw. bei jeder Kundenmarke gleich erkennbar bleiben.
   Die Kundenfarbe (--kl-brand*, aus theme.css) erscheint nur für:
   heute, Auswahl, Knöpfe, Fokus.
   Jeder Zustand hat neben der Farbe ein zweites Merkmal (Muster, Linie, Form).
   Alle Zahl-/Feld-Kombinationen ≥ 4,5 : 1 (WCAG AA), hell und dunkel.
   ========================================================================== */
:root {
  --kal-frei-bg: #E6F4EC;      --kal-frei-fg: #1F6B40;      /* 5,7 : 1 */
  --kal-gebucht-bg: #E7E1D6;   --kal-gebucht-fg: #5A5247;   /* 5,9 : 1 */
  --kal-gebucht-muster: #D6CDBE;
  --kal-vorgemerkt-bg: #FFFFFF; --kal-vorgemerkt-fg: #1F5A96; /* 7,1 : 1 */
  --kal-halb-fg: #2E2A24;                                    /* ≥ 11 : 1 auf beiden Hälften */
  --kal-anreise: #8A5300;                                    /* Markierung, 5,6 : 1 */
  --kal-vergangen: #B8AE9E;                                  /* deaktiviert, von AA ausgenommen */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --kal-frei-bg: #16301F; --kal-frei-fg: #9BE0B5; --kal-gebucht-bg: #3A352D; --kal-gebucht-fg: #CFC6B6; --kal-gebucht-muster: #474136;
  --kal-vorgemerkt-bg: #2A2620; --kal-vorgemerkt-fg: #9DC3F0; --kal-halb-fg: #F3EEE4; --kal-anreise: #F2C069; --kal-vergangen: #6B6255; } }
[data-theme="dark"] {
  --kal-frei-bg: #16301F; --kal-frei-fg: #9BE0B5; --kal-gebucht-bg: #3A352D; --kal-gebucht-fg: #CFC6B6; --kal-gebucht-muster: #474136;
  --kal-vorgemerkt-bg: #2A2620; --kal-vorgemerkt-fg: #9DC3F0; --kal-halb-fg: #F3EEE4; --kal-anreise: #F2C069; --kal-vergangen: #6B6255; }
[data-theme="light"] {
  --kal-frei-bg: #E6F4EC; --kal-frei-fg: #1F6B40; --kal-gebucht-bg: #E7E1D6; --kal-gebucht-fg: #5A5247; --kal-gebucht-muster: #D6CDBE;
  --kal-vorgemerkt-bg: #FFFFFF; --kal-vorgemerkt-fg: #1F5A96; --kal-halb-fg: #2E2A24; --kal-anreise: #8A5300; --kal-vergangen: #B8AE9E; }

.kal { font-family: var(--kl-font-body); color: var(--kl-text); }
.kal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.kal-nav { width: 44px; height: 44px; border-radius: var(--kl-radius-m); border: 1px solid var(--kl-border);
  background: var(--kl-surface); color: var(--kl-text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.kal-nav:disabled { opacity: .45; cursor: default; }
.kal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 620px) { .kal-months { grid-template-columns: 1fr; } .kal-months .kal-month + .kal-month { display: none; } }
.kal-month h3 { font: 600 1.1rem var(--kl-font-body); text-align: center; margin: 0 0 10px; }
.kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-wd { text-align: center; font-size: .8rem; font-weight: 600; color: var(--kl-text-2); padding-bottom: 4px; }

.kal-day { position: relative; min-height: 44px; border: 0; border-radius: 8px; font: 600 .95rem var(--kl-font-body);
  font-variant-numeric: tabular-nums; background: transparent; color: var(--kl-text); cursor: pointer; padding: 0; }
.kal-day:focus-visible { outline: 3px solid var(--kl-focus); outline-offset: 2px; z-index: 1; }
.kal-day[disabled] { cursor: default; }
.kal-day.vergangen { color: var(--kal-vergangen); font-weight: 400; }
.kal-day.frei { background: var(--kal-frei-bg); color: var(--kal-frei-fg); }
.kal-day.frei:hover:not([disabled]) { box-shadow: inset 0 0 0 2px var(--kal-frei-fg); }
/* gebucht: Farbe + Schraffur + Durchstreichen */
.kal-day.gebucht { color: var(--kal-gebucht-fg); text-decoration: line-through; text-decoration-thickness: 2px;
  background: repeating-linear-gradient(135deg, var(--kal-gebucht-bg) 0 6px, var(--kal-gebucht-muster) 6px 8px); }
/* vorgemerkt: gestrichelter Rahmen */
.kal-day.vorgemerkt { background: var(--kal-vorgemerkt-bg); color: var(--kal-vorgemerkt-fg); box-shadow: inset 0 0 0 2px transparent;
  outline: 2px dashed var(--kal-vorgemerkt-fg); outline-offset: -3px; }
/* Abreisetag einer Buchung: links oben belegt, rechts unten frei */
.kal-day.abreise { color: var(--kal-halb-fg);
  background: linear-gradient(135deg, var(--kal-gebucht-bg) 0 49%, var(--kal-frei-bg) 51% 100%); }
/* Anreise laut Regel möglich: Dreieck in der Ecke (Form, nicht nur Farbe) */
.kal-day.anreise::after { content: ""; position: absolute; top: 4px; right: 4px; width: 0; height: 0;
  border-style: solid; border-width: 0 9px 9px 0; border-color: transparent var(--kal-anreise) transparent transparent; }
/* heute: Ring in Kundenfarbe */
.kal-day.heute { box-shadow: inset 0 0 0 2px var(--kl-brand); }
/* Auswahl des Gastes: Kundenfarbe */
.kal-day.sel-ende, .kal-day.sel-start { background: var(--kl-brand-fill); color: var(--kl-on-brand);
  box-shadow: inset 0 0 0 1px var(--kl-brand-fill-border, transparent); text-decoration: none; }
.kal-day.sel-mitte { background: var(--kl-brand-soft); color: var(--kl-brand); text-decoration: none; }
.kal-day.sel-start::after, .kal-day.sel-ende::after { border-color: transparent var(--kl-on-brand) transparent transparent; }

.kal-stats { display: flex; gap: 32px; margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--kl-divider); }
.kal-stats span { display: block; font-size: .85rem; color: var(--kl-text-2); }
.kal-stats b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.kal-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; margin: 14px 0 0; font-size: .88rem; }
.kal-legend li { display: flex; gap: 8px; align-items: flex-start; }
.kal-legend .kal-day { width: 26px; height: 26px; min-height: 26px; flex-shrink: 0; cursor: default; font-size: 0; }
.kal-legend small { display: block; color: var(--kl-text-2); }

.kal-sel { margin-top: 16px; padding: 14px 16px; border-radius: var(--kl-radius-l); background: var(--kl-surface-2);
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.kal-sel p { margin: 0; }
.kal-msg { margin: 10px 0 0; font-weight: 600; font-size: .92rem; }
.kal-msg.fehler { color: var(--kl-danger); } .kal-msg.ok { color: var(--kl-success); }
.kal-regeln { margin-top: 16px; padding: 16px 18px; border-radius: var(--kl-radius-l); background: var(--kl-surface-2);
  border-left: 4px solid var(--kl-brand); }
.kal-regeln h4 { margin: 0 0 6px; font: 600 1rem var(--kl-font-body); }
.kal-regeln ul { margin: 0 0 12px; padding-left: 1.2em; } .kal-regeln li { margin: 2px 0; }
.kal-btn { min-height: 44px; padding: 0 18px; border-radius: var(--kl-radius-m); font: 600 1rem var(--kl-font-body); cursor: pointer;
  background: var(--kl-brand-fill); color: var(--kl-on-brand); border: 1px solid var(--kl-brand-fill-border, transparent); }
.kal-btn:disabled { opacity: .5; cursor: not-allowed; }
.kal-btn2 { min-height: 44px; padding: 0 16px; border-radius: var(--kl-radius-m); font: 600 .95rem var(--kl-font-body); cursor: pointer;
  background: transparent; color: var(--kl-brand); border: 1px solid var(--kl-border); width: 100%; }
@media (prefers-reduced-motion: no-preference) { .kal-day { transition: background-color .12s, color .12s; } }