/* ==========================================================================
   Villa Admin: der Reiter Oeffnungszeiten
   Angelegt 12.09.2026, Sitzung d336ce82.
   Farben und Abstaende aus denselben Variablen wie die uebrigen Reiter,
   damit nicht ein zweites Aussehen im Panel entsteht.
   ========================================================================== */

.oz-tage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.oz-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-left: 3px solid var(--vr-gold, #B8924A);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-papier, #FBF7EE);
}

/* Ein geschlossener Tag steht blass da, aber er steht da. Erik sieht, dass
   er ihn oeffnen KANN. Genau das war Dirks Ansage. */
.oz-tag--zu { opacity: 0.55; border-left-color: var(--vr-linie-soft, #E8DDC4); }

.oz-schalter {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  min-height: 44px;
  cursor: pointer;
}

.oz-schalter input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
}

.oz-schalter-bahn {
  position: relative;
  flex: 0 0 auto;
  width: 48px; height: 28px;
  border-radius: 9999px;
  background: #D8CDB8;
  transition: background 0.18s ease;
}

.oz-schalter-knauf {
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: var(--vr-weiss, #FFFDF9);
  box-shadow: 0 1px 3px rgba(26, 20, 16, 0.30);
  transition: transform 0.18s ease;
}

.oz-schalter input:checked + .oz-schalter-bahn { background: var(--vr-burgund, #6E1A24); }
.oz-schalter input:checked + .oz-schalter-bahn .oz-schalter-knauf { transform: translateX(20px); }
.oz-schalter input:focus-visible + .oz-schalter-bahn {
  outline: 3px solid var(--vr-gold, #B8924A);
  outline-offset: 2px;
}
.oz-schalter input:disabled + .oz-schalter-bahn { opacity: 0.5; }

.oz-tag-name {
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-md, 1.125rem);
  color: var(--vr-burgund, #6E1A24);
}

.oz-felder { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.oz-feld { display: flex; align-items: center; gap: 8px; }

.oz-klein {
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

/* Die Uhrzeit kommt aus der eigenen Auswahl. Aussehen und Trefferflaeche
   stehen in zeitwahl.css unter .zw-knopf, hier nur die Breite in der Zeile. */
.oz-zeit { min-width: 104px; }

.oz-feld--kueche { gap: 8px; }

/* Der Knopf steht nur da, wenn die Kuechenzeit von Hand gesetzt ist. Ohne
   das !important gewinnt die display-Regel gegen das hidden-Attribut. */
.oz-auto[hidden] { display: none !important; }

.oz-auto {
  /* 44 sind Hausregel, nicht Geschmack. Gemessen am 12.09.2026 stand der
     Knopf auf 32 und war damit das einzige zu kleine Tippziel im Reiter. */
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: 9999px;
  background: transparent;
  font-family: inherit;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-burgund, #6E1A24);
  cursor: pointer;
}

.oz-auto:hover:not(:disabled) { border-color: var(--vr-gold, #B8924A); }
.oz-auto:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }

.oz-kuechennote {
  font-size: var(--vr-text-sm, 0.875rem);
  font-style: italic;
  color: var(--vr-text-muted, #6B5E50);
}

/* Wenn das Programm einen eigenen Wert zurueckgestellt hat, faellt das auf.
   Eine stille Korrektur ist schlimmer als gar keine. */
.oz-kuechennote--achtung { font-style: normal; font-weight: 600; color: var(--vr-burgund, #6E1A24); }
html[data-theme="dark"] .oz-kuechennote--achtung { color: #E8A0AC; }

.oz-slot {
  min-width: 190px;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.oz-fuss {
  margin: 10px 0 0;
  font-size: var(--vr-text-sm, 0.875rem);
  color: var(--vr-text-muted, #6B5E50);
}

.oz-speichern {
  margin-top: 16px;
  width: 100%;
  min-height: 44px;
  padding: 14px 20px;
  border: none;
  border-radius: var(--vr-radius-md, 8px);
  background: var(--vr-burgund, #6E1A24);
  color: var(--vr-creme, #F8F2E4);
  font-family: var(--vr-font-display, Georgia, serif);
  font-size: var(--vr-text-md, 1.125rem);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.oz-speichern:hover:not(:disabled) { background: var(--vr-burgund-tief, #4A0E18); }
.oz-speichern:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.oz-speichern:disabled { opacity: 0.55; cursor: default; }

.oz-hinweis {
  padding: 10px 14px;
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-creme-tief, #EFE6D2);
  font-size: var(--vr-text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--vr-text-muted, #6B5E50);
}

.oz-hinweis--info { border-left: 3px solid var(--vr-gold, #B8924A); }
.oz-hinweis--fehler { background: #F6E3E5; color: var(--vr-burgund, #6E1A24); font-weight: 600; }
.oz-hinweis--gut { background: #E4EFE2; color: #2F5B2A; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .oz-schalter-bahn, .oz-schalter-knauf { transition: none; }
}

/* --------------------------------------------------------------------------
   Dunkelfassung, dieselben Werte wie in den uebrigen Reitern
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .oz-tag,
html[data-theme="dark"] .oz-hinweis {
  background: #2A2520;
  border-color: #4A4035;
  color: #F5EFE0;
}

html[data-theme="dark"] .oz-tag-name { color: #D4B070; }
html[data-theme="dark"] .oz-klein,
html[data-theme="dark"] .oz-slot,
html[data-theme="dark"] .oz-kuechennote,
html[data-theme="dark"] .oz-fuss { color: #B5A895; }
html[data-theme="dark"] .oz-auto { border-color: #4A4035; color: #D4B070; }
html[data-theme="dark"] .oz-schalter-bahn { background: #4A4035; }
html[data-theme="dark"] .oz-schalter input:checked + .oz-schalter-bahn { background: #8E2A36; }
html[data-theme="dark"] .oz-speichern { background: #8E2A36; color: #F5EFE0; }
html[data-theme="dark"] .oz-hinweis--fehler { background: #3A2225; color: #E8A0AC; }
html[data-theme="dark"] .oz-hinweis--gut { background: #22301F; color: #A8D3A0; }

/* --------------------------------------------------------------------------
   Schmale Schirme. Nur die drei Breakpunkte, die im Haus gelten.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .oz-tag { align-items: flex-start; flex-direction: column; }
  .oz-slot { min-width: 0; }
}

@media (max-width: 490px) {
  .oz-felder { flex-direction: column; align-items: flex-start; gap: 8px; }
  .oz-feld { width: 100%; justify-content: space-between; }
  .oz-feld--kueche { flex-wrap: wrap; }
}

/* --- Wie lange vor dem Lokal die Kueche schliesst ----------------------- */
.oz-vorlauf {
  margin: 18px 0 6px;
  padding: 12px 16px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-left: 3px solid var(--vr-gold, #B8924A);
  border-radius: var(--vr-radius-sm, 4px);
  background: var(--vr-papier, #FBF7EE);
}

.oz-vorlauf .oz-titel { margin-top: 0; }
.oz-vorlauf-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }

.oz-vl {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--vr-linie-soft, #E8DDC4);
  border-radius: 9999px;
  background: var(--vr-weiss, #FFFDF9);
  font-family: inherit;
  font-size: 1rem;
  color: var(--vr-text-dunkel, #1A1410);
  cursor: pointer;
}

.oz-vl:hover:not(:disabled) { border-color: var(--vr-gold, #B8924A); }
.oz-vl:focus-visible { outline: 3px solid var(--vr-gold, #B8924A); outline-offset: 2px; }
.oz-vl:disabled { opacity: 0.55; cursor: default; }

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

html[data-theme="dark"] .oz-vorlauf,
html[data-theme="dark"] .oz-vl { background: #2A2520; border-color: #4A4035; color: #F5EFE0; }
html[data-theme="dark"] .oz-vl.ist-gewaehlt { background: #8E2A36; border-color: #8E2A36; }

@media (max-width: 490px) {
  .oz-vorlauf-wahl { flex-direction: column; }
  .oz-vl { width: 100%; }
}