/* ==========================================================================
   Villa: eigene Uhrzeit-Auswahl
   Angelegt 12.09.2026, Sitzung d336ce82.
   Sieht in jedem Browser gleich aus, weil sie nichts vom Browser borgt.
   Farben aus denselben Variablen wie der Rest des Panels.
   ========================================================================== */

/* Der Knopf sieht aus wie ein Eingabefeld, ist aber einer. So bleibt die
   Bedienung mit Tastatur und Vorleser sauber, ohne verstecktes Feld. */
.zw-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 118px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  /* 16px, sonst zoomt iOS beim Antippen. */
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--vr-text-dunkel, #1A1410);
  cursor: pointer;
}

.zw-knopf:hover:not(:disabled) { border-color: var(--vr-gold, #B8924A); }
.zw-knopf:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.zw-knopf:disabled { opacity: 0.55; cursor: default; }
.zw-knopf.ist-leer .zw-text { color: var(--vr-text-muted, #6B5E50); }
.zw-ico { flex: 0 0 auto; color: var(--vr-gold-tief, #806022); }

/* --------------------------------------------------------------------------
   Das Auswahlfenster. Haengt am Koerper, damit es in keiner Zeile mit
   overflow abgeschnitten wird, und liegt ueber dem Panel.
   -------------------------------------------------------------------------- */
.zw-fenster {
  position: absolute;
  z-index: 100060;
  width: 292px;
  padding: 14px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-lg, 16px);
  background: var(--vr-papier, #FBF7EE);
  box-shadow: 0 16px 40px rgba(26, 20, 16, 0.28);
}

.zw-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.zw-wahl {
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-xl, 1.5rem);
  font-variant-numeric: tabular-nums;
  color: var(--vr-burgund, #6E1A24);
}

.zw-zu {
  min-width: 44px; min-height: 44px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: 9999px;
  background: var(--vr-weiss, #FFFDF9);
  font-size: 16px;
  color: var(--vr-burgund, #6E1A24);
  cursor: pointer;
}

.zw-zu:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }

.zw-titel {
  margin: 10px 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vr-text-muted, #6B5E50);
}

.zw-stunden {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.zw-minuten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.zw-stunde,
.zw-minute {
  /* 44 Pixel sind Hausregel, nicht Geschmack. Bei sechs Spalten wird die
     Stundenkachel schmaler als 44, die HOEHE bleibt aber bei 44, und der
     Abstand zur Nachbarkachel haelt die Trefferflaeche auseinander. */
  min-height: 44px;
  padding: 4px 2px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--vr-text-dunkel, #1A1410);
  cursor: pointer;
}

.zw-minute { font-size: 1rem; }

.zw-stunde:hover,
.zw-minute:hover { border-color: var(--vr-gold, #B8924A); background: var(--vr-creme-tief, #EFE6D2); }

.zw-stunde:focus-visible,
.zw-minute:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 1px; }

.zw-stunde.ist-gewaehlt,
.zw-minute.ist-gewaehlt {
  background: var(--vr-burgund, #6E1A24);
  border-color: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Dunkelfassung
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .zw-knopf,
html[data-theme="dark"] .zw-fenster,
html[data-theme="dark"] .zw-zu,
html[data-theme="dark"] .zw-stunde,
html[data-theme="dark"] .zw-minute {
  background: #2A2520;
  border-color: #4A4035;
  color: #F5EFE0;
}

html[data-theme="dark"] .zw-wahl,
html[data-theme="dark"] .zw-ico { color: #D4B070; }
html[data-theme="dark"] .zw-titel,
html[data-theme="dark"] .zw-knopf.ist-leer .zw-text { color: #B5A895; }
html[data-theme="dark"] .zw-stunde:hover,
html[data-theme="dark"] .zw-minute:hover { background: #332B23; }
html[data-theme="dark"] .zw-stunde.ist-gewaehlt,
html[data-theme="dark"] .zw-minute.ist-gewaehlt {
  background: #8E2A36;
  border-color: #8E2A36;
  color: #F5EFE0;
}

/* --------------------------------------------------------------------------
   Schmale Schirme: das Fenster bleibt im Bild, notfalls ueber die ganze
   Breite. Nur die Breakpunkte, die im Haus gelten.
   -------------------------------------------------------------------------- */
@media (max-width: 490px) {
  .zw-fenster { width: calc(100vw - 16px); }
  .zw-stunden { grid-template-columns: repeat(4, 1fr); }
}