/* Eigener Datumskalender (assets/js/kalender.js, seit 06.11.2026).
   Gesperrte Tage aus der Team-App sind schraffiert und nicht waehlbar.
   Der Knopf sieht aus wie die Felder daneben, das Kalenderblatt klappt
   darunter auf. Alles ohne fremde Dateien, das Symbol steckt als Bild direkt
   in der Anweisung. */

.kal-versteckt { display: none !important; }
.kal-huelle { position: relative; }

.kal-knopf {
  display: flex; align-items: center; width: 100%; min-height: 46px;
  padding: 11px 14px 11px 42px; font: inherit; font-size: 15px; text-align: left;
  color: var(--text); background-color: var(--white);
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C4A35' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 18px 18px;
}
.kal-knopf:hover { border-color: var(--sandstone); }
.kal-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kal-knopf.kal-leer .kal-wert { color: var(--text-soft); }
.kal-knopf[aria-invalid="true"] { border-color: #B4321E; }
.kal-knopf:disabled { background-color: var(--sand-pale); color: var(--text-soft); cursor: not-allowed; }

.kal-knopf, .kal-tag, .kal-blaettern { -webkit-tap-highlight-color: transparent; }

/* Startseite: das Feld sitzt in der Suchleiste ohne eigenen Rahmen. Die Leiste
   schneidet fuer die runden Ecken alles ab, was uebersteht. Solange der
   Kalender offen ist, darf er heraus, sonst waere nur sein oberer Rand zu sehen. */
.booking-field .kal-knopf { border: 0; padding: 4px 0 4px 26px; min-height: 0; background-color: transparent; background-position: 0 center; background-size: 16px 16px; }
.booking-fields:has(.kal-feld:not([hidden])) { overflow: visible; }

.kal-meldung { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #B4321E; }

.kal-feld {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: 316px; max-width: calc(100vw - 32px); padding: 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); color: var(--text); text-align: left;
}
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kal-titel { margin: 0; font-size: 15px; font-weight: 700; }
.kal-blaettern {
  width: 40px; height: 40px; font: inherit; font-size: 22px; line-height: 1;
  color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 999px; cursor: pointer;
}
.kal-blaettern:hover:not(:disabled) { background: var(--sand-pale); }
.kal-blaettern:disabled { opacity: .35; cursor: default; }
.kal-blaettern:focus-visible, .kal-tag:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.kal-raster { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kal-raster th { padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--text-soft); text-align: center; }
.kal-raster td { padding: 2px; text-align: center; }
.kal-tag {
  width: 100%; aspect-ratio: 1; min-height: 38px; font: inherit; font-size: 14px;
  color: var(--text); background: transparent; border: 0; border-radius: 999px; cursor: pointer;
}
.kal-tag:hover:not([aria-disabled="true"]) { background: var(--sand-pale); }
.kal-heute { font-weight: 700; box-shadow: inset 0 0 0 1px var(--sandstone); }
.kal-gewaehlt, .kal-gewaehlt:hover { background: var(--gold) !important; color: var(--white); font-weight: 700; }
.kal-vorbei { color: #b5a993; cursor: default; }
/* Gesperrt: schraffiert und durchgestrichen, damit es nicht nur an der Farbe haengt */
.kal-gesperrt, .kal-muster {
  background: repeating-linear-gradient(135deg, var(--sand) 0 4px, var(--sand-pale) 4px 8px);
}
.kal-gesperrt { color: var(--text-soft); text-decoration: line-through; cursor: not-allowed; border-radius: 8px; }

.kal-legende { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; color: var(--text-soft); }
.kal-muster { display: inline-block; width: 18px; height: 18px; border-radius: 5px; }
.kal-hinweis { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #B4321E; }
.kal-hinweis:empty { display: none; }