/* =============================================================================
   DATERANGE — Zeitraum-Auswahl in einem Kalender
   BEM-Block: .daterange
   JS: js/modules/daterange.js · Markup: template-parts/anfrage-formular.php

   Ersetzt zwei getrennte <input type="date">. Dort wählte man erst die Anreise
   und bekam beim zweiten Feld einen Kalender, der wieder im aktuellen Monat
   stand — man musste bis zum eben gewählten Monat zurückblättern. Hier ist
   beides ein Vorgang: erster Klick setzt die Anreise, der zweite die Abreise,
   dazwischen zeigt der Kalender die Spanne.

   Die nativen Felder bleiben im DOM und tragen weiterhin den Wert; ohne
   JavaScript sind sie sichtbar und voll bedienbar (.daterange__fallback).
   ============================================================================= */

/* Die Akzentwerte stehen auf BEIDEN Knoten: der Kalender wird beim Öffnen an
   <body> gehängt (siehe daterange.js) und liegt dann ausserhalb von .daterange.
   Eigene Eigenschaften vererben über den Baum — ohne diese Wiederholung
   verlören die Tage im geöffneten Zustand ihren Hintergrund und nur die fette
   Schrift bliebe übrig. */
.daterange,
.daterange__popover {
  /* Eigene Akzentwerte statt der Marken-Token direkt.
     `--color-brand-primary-600` ist ein `color-mix(in oklch, …)`; wo das nicht
     greift, wird die ganze Deklaration ungültig und der Tag verliert seinen
     Hintergrund — weisse Schrift auf hellem Grund, unlesbar. `in srgb` ist
     breit unterstützt, und der Textwert steht fest statt aus einem Token zu
     kommen, das in manchen Bereichsfarben fehlt. */
  --dr-akzent: var(--color-brand-primary-500, #1e6e72);
  --dr-akzent-text: #fff;
  /* Gegen die Grundfarbe des Kalenders mischen, nicht gegen Weiss: der
     Popover steht auf Creme (--theme-bg-surface #F5EFE2), und eine gegen Weiss
     aufgehellte Füllung hob sich davon nur um den Faktor 1.2 ab — praktisch
     unsichtbar. Gegen den eigenen Grund gemischt sind es 2.0. */
  --dr-spanne: color-mix(in srgb, var(--color-brand-primary-500, #1e6e72) 45%, var(--theme-bg-surface, #fff));
  --dr-spanne-text: #1a1a1a;
}

.daterange {
  position: relative;
}

/* Native Felder: sichtbar, bis JS übernimmt */
.daterange__fallback {
  display: grid;
  gap: var(--spacing-16, 1rem);
  grid-template-columns: 1fr 1fr;
}

.daterange.is-enhanced .daterange__fallback {
  /* Nicht display:none — die Felder müssen fokussierbar bleiben, wenn die
     Validierung sie anspringt, und ihren Wert weiterhin mit absenden. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Auslöser ─────────────────────────────────────────────── */

.daterange__trigger {
  display: none;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-regular);
  line-height: var(--line-height-text-regular);
  color: var(--theme-input-text);
  text-align: left;
  background-color: var(--theme-input-bg);
  border: 1.5px solid var(--theme-input-border);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.daterange.is-enhanced .daterange__trigger {
  display: flex;
}

.daterange__trigger:hover {
  border-color: var(--theme-input-border-hover);
}

.daterange__trigger:focus-visible {
  outline: none;
  border-color: var(--theme-input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-border-focus) 25%, transparent);
}

.daterange__trigger[aria-expanded='true'] {
  border-color: var(--theme-input-border-focus);
}

.daterange__icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--theme-text-muted, var(--theme-input-placeholder));
}

.daterange__wert {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daterange__wert--leer {
  color: var(--theme-input-placeholder);
}

.daterange__loeschen {
  flex: 0 0 auto;
  display: none;
  padding: 0.125rem;
  color: var(--theme-input-placeholder);
  background: none;
  border: 0;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  line-height: 0;
}

.daterange.has-wert .daterange__loeschen {
  display: block;
}

.daterange__loeschen:hover {
  color: var(--theme-text-default, inherit);
}

.daterange__loeschen:focus-visible {
  outline: 2px solid var(--theme-border-focus);
  outline-offset: 0.125rem;
}

/* ── Kalenderfläche ───────────────────────────────────────── */

/* fixed statt absolute: im Anfrage-Modal sitzt das Formular in einem
   Scroll-Container mit overflow, an dem ein absolut positionierter Kalender
   abgeschnitten würde. Lage und Aufklapprichtung setzt daterange.js. */
.daterange__popover {
  position: fixed;
  z-index: 10000;   /* liegt an <body>, muss über dem Anfrage-Modal stehen */
  display: none;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  background-color: var(--theme-bg-surface, #fff);
  border: 1px solid var(--theme-border-default);
  border-radius: var(--border-radius-medium, 0.5rem);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.14);
}

.daterange__popover.is-open {
  display: block;
}

/* Nach oben geklappt: der Schatten fällt dann nach oben */
.daterange__popover--oben {
  box-shadow: 0 -0.75rem 2rem rgb(0 0 0 / 0.14);
}

.daterange__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.daterange__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: inherit;
  background: none;
  border: 1px solid var(--theme-border-default);
  border-radius: var(--border-radius-small);
  cursor: pointer;
}

.daterange__nav:hover:not(:disabled) {
  border-color: var(--theme-border-strong);
  background-color: var(--theme-bg-subtle);
}

.daterange__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.daterange__nav:focus-visible {
  outline: 2px solid var(--theme-border-focus);
  outline-offset: 0.125rem;
}

.daterange__monate {
  display: flex;
  gap: 1.5rem;
}

.daterange__monat {
  width: 15.5rem;
}

/* Der zweite Monat kostet auf schmalen Schirmen nur Scrollweg */
.daterange__monat--zweiter {
  display: none;
}

.daterange__monatstitel {
  margin: 0 0 0.5rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-small, 0.875rem);
  font-weight: 600;
  text-align: center;
}

.daterange__gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  /* Kein Spaltenabstand: die Spanne soll als durchgehendes Band lesen.
     Mit Lücke zerfiel sie optisch in einzelne Kästchen. */
  column-gap: 0;
  row-gap: 0.125rem;
}

.daterange__wochentag {
  padding-bottom: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--theme-input-placeholder);
}

.daterange__tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-small, 0.875rem);
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--border-radius-small);
  cursor: pointer;
}

.daterange__tag:hover:not(:disabled) {
  background-color: var(--theme-bg-subtle);
}

.daterange__tag:focus-visible {
  outline: 2px solid var(--theme-border-focus);
  outline-offset: -2px;
}

.daterange__tag:disabled {
  color: var(--theme-input-placeholder);
  cursor: default;
  opacity: 0.4;
}

.daterange__tag--leer {
  visibility: hidden;
}

.daterange__tag--heute::after {
  content: '';
  position: absolute;
  bottom: 0.25rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background-color: var(--color-brand-secondary-500);
}

/* Spanne: erst die Fläche, dann die Enden darüber */
.daterange__tag--spanne {
  color: var(--dr-spanne-text);
  background-color: var(--dr-spanne);
  border-radius: 0;
}

/* Der Kalender steht auf beigem Grund (--theme-bg-surface #F5EFE2). Eine
   Füllung mit Transparenz verschwindet darauf fast — deshalb mischt
   --dr-spanne gegen Weiss und die Enden bekommen zusätzlich einen Ring. */
.daterange__tag--start,
.daterange__tag--ende {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--dr-akzent) 55%, #fff);
}

/* Die Auswahl muss den Hover sicher schlagen. Beide Regeln haben dieselbe
   Spezifität (je zwei Klassen), die spätere gewinnt also nur, solange ihr Wert
   gültig ist — und genau das war er nicht: `--dr-akzent-hover` war ein
   color-mix, das in manchen Bereichsfarben ins Leere lief, worauf der Browser
   auf die Hover-Regel zurückfiel und der überfahrene Endtag weiss auf hellem
   Grund stand. Darum hier die doppelte Klasse für mehr Spezifität und ein
   `filter` fürs Abdunkeln statt einer Farbfunktion, die scheitern kann. */
.daterange__tag--start.daterange__tag--start,
.daterange__tag--ende.daterange__tag--ende {
  color: var(--dr-akzent-text);
  background-color: var(--dr-akzent);
  font-weight: 700;
}

.daterange__tag--start.daterange__tag--start:hover,
.daterange__tag--ende.daterange__tag--ende:hover {
  background-color: var(--dr-akzent);
  filter: brightness(0.88);
}

/* Auch die Spanne darf der Hover nicht wegwischen */
.daterange__tag--spanne.daterange__tag--spanne:hover {
  background-color: var(--dr-spanne);
  filter: brightness(0.96);
}

.daterange__tag--start {
  border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
}

.daterange__tag--ende {
  border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
}

/* Ein einzelner Tag ist Anfang und Ende zugleich */
.daterange__tag--start.daterange__tag--ende {
  border-radius: var(--border-radius-small);
}

.daterange__tag--heute.daterange__tag--start::after,
.daterange__tag--heute.daterange__tag--ende::after {
  background-color: currentColor;
}

/* ── Fusszeile ────────────────────────────────────────────── */

.daterange__fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--theme-border-default);
}

.daterange__hinweis {
  font-size: var(--font-size-text-small, 0.875rem);
  color: var(--theme-input-placeholder);
}

.daterange__fertig {
  padding: 0.375rem 0.875rem;
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-small, 0.875rem);
  font-weight: 600;
  color: var(--theme-btn-primary-text);
  background-color: var(--theme-btn-primary-bg);
  border: 1.5px solid var(--theme-btn-primary-border);
  border-radius: var(--border-radius-small);
  cursor: pointer;
}

.daterange__fertig:hover {
  background-color: var(--theme-btn-primary-bg-hover);
}

.daterange__fertig:focus-visible {
  outline: 2px solid var(--theme-border-focus);
  outline-offset: 0.125rem;
}

/* ── Ab 40rem: zwei Monate nebeneinander ──────────────────── */

@media (min-width: 40em) {
  .daterange__monat--zweiter {
    display: block;
  }
}

/* Auf sehr schmalen Schirmen darf der Kalender die volle Breite nehmen */
@media (max-width: 26em) {
  .daterange__popover {
    width: calc(100vw - 1rem);
    padding: 0.75rem;
  }

  .daterange__monat {
    width: 100%;
  }
}