/* Datum und Uhrzeit wählen (wahl.js): Knopf im Formular und Blatt über der Seite. Website und Backend.
   «button.» vor .wahl-feld, damit die allgemeine Knopf-Rücksetzung (.anfrage-bereich button) nicht gewinnt; die Datei lädt danach. */
button.wahl-feld { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 13px 14px;
             border: 0; border-radius: 12px; background: #fff; color: var(--tinte); font: 400 17px/1.3 var(--sans); text-align: left; cursor: pointer;
             box-shadow: inset 0 0 0 1.5px rgba(69, 52, 79, .25); transition: box-shadow .15s; }
button.wahl-feld.leer .wahl-text { color: var(--leise); }
button.wahl-feld::after { content: ""; flex: none; width: 22px; height: 22px; background: var(--violett);
                    -webkit-mask: var(--wahl-symbol) center / contain no-repeat; mask: var(--wahl-symbol) center / contain no-repeat; opacity: .8; }
button.wahl-feld.datum { --wahl-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
button.wahl-feld.zeit { --wahl-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
button.wahl-feld:hover, button.wahl-feld:focus-visible { outline: none; box-shadow: inset 0 0 0 2.5px var(--violett); }
.feld.fehler button.wahl-feld { box-shadow: inset 0 0 0 2.5px var(--wein, var(--rot, #8a1f2b)); }

.wahlblatt { width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 18px 18px 14px; border: 0; border-radius: 18px;
             background: var(--karte); color: var(--tinte); overflow: auto; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); font-family: var(--sans); }
.wahlblatt[open] { animation: wahl-auf .3s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes wahl-auf { from { opacity: 0; transform: translateY(24px) rotate(-1.5deg) scale(.97); } to { opacity: 1; transform: none; } }
.wahlblatt::backdrop { background: rgba(20, 30, 25, .55); }
.wahl-titel { margin: 0 0 10px; font: 400 26px/1.1 var(--hand); color: var(--violett); }

.wahl-monat { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 6px; }
.wahl-monat b { text-align: center; font: 620 19px/1.2 var(--satz); }
.wahl-blaettern { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.wahl-blaettern::before { content: ""; width: 10px; height: 10px; border: solid var(--violett); border-width: 0 0 2.5px 2.5px; transform: translateX(2px) rotate(45deg); }
.wahl-blaettern.vor::before { transform: translateX(-2px) rotate(-135deg); }
.wahl-blaettern:hover:not(:disabled) { background: rgba(69, 52, 79, .08); }
.wahl-blaettern:disabled { opacity: .25; cursor: default; }
.wahl-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.wahl-wochentag { text-align: center; font: 600 12px/2.2 var(--sans); color: var(--leise); }
.wahl-tag { aspect-ratio: 1; min-height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--tinte); font: 500 16px/1 var(--sans); cursor: pointer;
            transition: background .15s, color .15s, transform .15s; }
.wahl-tag:hover:not(:disabled) { background: rgba(69, 52, 79, .1); }
.wahl-tag.heute { box-shadow: inset 0 0 0 1.5px var(--violett); }
.wahl-tag[aria-pressed="true"] { background: var(--violett); color: var(--karte); font-weight: 700; }
.wahl-tag:disabled { color: rgba(69, 52, 79, .28); cursor: default; }

.wahl-anzeige { margin: 0 0 6px; font: 620 24px/1.2 var(--satz); color: var(--violett); }
.wahl-zwischen { margin: 12px 0 6px; font: 600 12.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.wahl-stunden { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.wahl-minuten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wahl-zahl { min-height: 42px; border: 0; border-radius: 10px; background: #fff; color: var(--tinte); font: 500 16px/1 var(--sans); cursor: pointer;
             box-shadow: inset 0 0 0 1.5px rgba(69, 52, 79, .18); transition: background .15s, color .15s; }
.wahl-zahl:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--violett); }
.wahl-zahl[aria-pressed="true"] { background: var(--violett); color: var(--karte); box-shadow: none; font-weight: 700; }
.wahl-zahl:disabled { opacity: .35; cursor: default; }

.wahl-knoepfe { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 16px; }
.wahl-knoepfe [data-leeren] { margin-right: auto; }
.wahl-knoepfe [data-leeren][hidden] { display: none; }
.wahlblatt:not(.ist-zeit) [data-fertig] { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .wahlblatt[open] { animation: none; } }