/* Datum-, Uhrzeit- und Dauer-Auswahl ohne Scrollen (core/js/zeitwahl.js) – Verwaltung und Helfer-App.
   Farben: Dunkelblau/Gold wie im Rest des Systems; in der Helfer-App über deren Farbvariablen (hell + dunkel). */
.avz .datetimeshortcuts, .avz #calendarbox0, .avz .calendarbox, .avz .clockbox { display: none !important; }
.avz-weg { display: none !important; }

.avz-fenster, .avz-dauer {
  --z-grund: #ffffff; --z-text: #15233e; --z-leise: #6b778c; --z-linie: #e3e7ef; --z-kachel: #f4f6fa;
  --z-kachel-hover: #e8edf6; --z-an: #15233e; --z-auf-an: #ffffff; --z-gold: #c69829; --z-gold-hell: #f6e7c1; --z-kopf: #15233e;
  --z-auf-kopf: #f6e7c1;
}
.avz-fenster.avz-app, .avz-dauer.avz-app {
  --z-grund: var(--surface, #172036); --z-text: var(--fg, #e9e6de); --z-leise: var(--muted, #a3a9b8); --z-linie: var(--line, #2c3854);
  --z-kachel: var(--surface-2, #1d2740); --z-kachel-hover: var(--info-bg, #22304f); --z-an: var(--gold, #e9c05a);
  --z-auf-an: var(--auf-gold, #1d1606); --z-gold: var(--gold, #e9c05a); --z-gold-hell: var(--gold-hell, #f6e7c1);
  --z-kopf: var(--bg-2, #0b1120); --z-auf-kopf: var(--gold-hell, #f6e7c1);
}
html[data-thema="hell"] .avz-fenster.avz-app { --z-kopf: #15233e; --z-an: #15233e; --z-auf-an: #ffffff; }
html[data-thema="hell"] .avz-dauer.avz-app { --z-an: #15233e; --z-auf-an: #ffffff; }

.avz-fenster {
  position: fixed; z-index: 10050; width: 332px; max-width: calc(100vw - 16px); background: var(--z-grund); color: var(--z-text);
  border: 1px solid var(--z-linie); border-radius: 12px; box-shadow: 0 14px 40px rgba(11, 17, 33, .28); overflow: hidden;
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.3;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.avz-fenster[hidden], .avz-schleier[hidden] { display: none !important; }
.avz-fenster button {
  font: inherit; color: inherit; background: var(--z-kachel); border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  padding: 0; margin: 0; min-height: 36px; -webkit-tap-highlight-color: transparent; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.avz-fenster button:hover:not([disabled]) { background: var(--z-kachel-hover); }
.avz-fenster button:focus-visible { outline: 2px solid var(--z-gold); outline-offset: 1px; }
.avz-fenster button[disabled] { opacity: .3; cursor: default; }
.avz-fenster button.an, .avz-fenster button.an:hover { background: var(--z-an); color: var(--z-auf-an); font-weight: 700; }

.avz-kopf { display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem .55rem .9rem; background: var(--z-kopf); color: var(--z-auf-kopf);
  border-bottom: 3px solid var(--z-gold); }
.avz-titel { font-weight: 700; }
.avz-anzeige { margin-left: auto; font-variant-numeric: tabular-nums; color: #e9c05a; font-weight: 700; }
.avz-fenster .avz-zu { background: transparent; color: var(--z-auf-kopf); font-size: 1.4rem; line-height: 1; width: 36px; min-height: 32px; }
.avz-fenster .avz-zu:hover:not([disabled]) { background: rgba(255, 255, 255, .12); }
.avz-anzeige:empty + .avz-zu { margin-left: auto; }

.avz-schnell { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: .7rem .7rem .3rem; }
.avz-schnell button { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .35rem .1rem; min-height: 48px;
  font-weight: 700; font-size: .82rem; border-color: var(--z-linie); }
.avz-schnell small { font-weight: 400; font-size: .72rem; color: var(--z-leise); margin-top: 2px; white-space: nowrap; }
.avz-schnell button.an small { color: inherit; }

.avz-monat { display: flex; align-items: center; justify-content: space-between; padding: .35rem .7rem .2rem; font-weight: 700; }
.avz-fenster .avz-pfeil { width: 40px; font-size: 1.3rem; line-height: 1; background: transparent; }
.avz-kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: .1rem .7rem .6rem; text-align: center; }
.avz-kalender > span { font-size: .72rem; color: var(--z-leise); padding: .2rem 0; font-weight: 700; }
.avz-kalender button { min-height: 36px; background: transparent; font-variant-numeric: tabular-nums; }
.avz-kalender button.we { color: var(--z-leise); }
.avz-kalender button.heute { border-color: var(--z-gold); font-weight: 700; color: var(--z-text); }

.avz-schritt { display: flex; align-items: center; gap: .5rem; padding: .7rem .7rem .3rem; }
.avz-schritt b { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--z-leise); margin-right: auto; }
.avz-schritt .avz-leise:first-child + b { margin-left: .2rem; }
.avz-stunden { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: .2rem .7rem .7rem; }
.avz-stunden button { min-height: 46px; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.avz-minuten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: .2rem .7rem .7rem; }
.avz-minuten button { min-height: 54px; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.avz-fenster button.avz-leise { background: transparent; color: var(--z-gold); font-weight: 700; font-size: .85rem; padding: 0 .5rem; min-height: 32px; }
html[data-thema="hell"] .avz-app button.avz-leise, .avz-fenster:not(.avz-app) button.avz-leise { color: #8a6420; }
.avz-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; padding: .45rem .7rem .6rem; border-top: 1px solid var(--z-linie); }
.avz-tipp { margin-left: auto; font-size: .78rem; color: var(--z-leise); }
.avz-tipp b { color: var(--z-text); }

/* Handy: als Blatt am unteren Rand, große Kacheln */
.avz-schleier { position: fixed; inset: 0; z-index: 10049; background: rgba(11, 17, 33, .35); }
.avz-fenster.avz-blatt { left: 0; top: auto; bottom: auto; width: 100vw; max-width: none; border-radius: 16px 16px 0 0;
  border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); max-height: 85vh; overflow-y: auto; font-size: 16px; }
.avz-blatt .avz-kopf { padding: .7rem .7rem .7rem 1rem; }
.avz-blatt .avz-kalender button { min-height: 44px; }
.avz-blatt .avz-stunden button { min-height: 52px; }
.avz-blatt .avz-minuten button { min-height: 60px; font-size: 1.2rem; }
.avz-blatt .avz-schnell button { min-height: 54px; font-size: .88rem; }

/* Dauer-Kacheln unter dem Feld */
.avz-dauer { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0 .1rem; }
.avz-dauer button {
  font: inherit; font-size: .84rem; font-weight: 700; color: var(--z-text); background: var(--z-kachel); border: 1px solid var(--z-linie);
  border-radius: 8px; min-height: 38px; padding: .3rem .25rem; cursor: pointer; flex: 1 1 0; min-width: 3.2rem; max-width: 6rem; margin: 0; width: auto;
  white-space: nowrap; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.avz-dauer button:hover { background: var(--z-kachel-hover); }
.avz-dauer button.an { background: var(--z-an); color: var(--z-auf-an); border-color: var(--z-an); }
.avz-dauer button b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.avz-dauer button small { font-size: .7rem; font-weight: 400; opacity: .85; }
.avz-app.avz-dauer button { min-height: 48px; }

/* Datum + Uhrzeit nebeneinander (aus input type=datetime-local) */
.avz-paar { display: inline-flex; gap: .4rem; align-items: center; }
.avz-paar > input:first-child { width: 8.5rem !important; }
.avz-paar > input:last-child { width: 5.5rem !important; }

/* Eingetippt, aber nicht lesbar */
input.avz-falsch { border-color: #b42318 !important; }
.avz-hinweis { color: #b42318; font-size: .8rem; margin: .25rem 0 0; }
.avz-app ~ .avz-hinweis, html:not([data-thema="hell"]) main .avz-hinweis { color: var(--crit, #b42318); }
input[data-avz-sicht] { font-variant-numeric: tabular-nums; }