/* Oeffentliche Buchung: Startseite, Terminauswahl, Formular, Bestaetigung. */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.choice { display: block; padding: 1.25rem; border: 2px solid var(--color-accent); border-radius: var(--radius); text-decoration: none; color: var(--color-text); background: #fff; }
.choice:hover, .choice:focus-visible { background: color-mix(in srgb, var(--color-accent) 10%, #fff); }
.choice-title { display: block; font-size: 1.3rem; font-weight: 700; color: var(--color-accent); }
.choice-text { display: block; margin: 0.25rem 0; }
.choice-count { display: block; font-size: 0.9rem; color: var(--color-muted); }

.date-list, .time-list { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.date-item { display: block; padding: 0.5rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--color-text); background: #fff; }
.date-item.is-selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.date-day { display: block; font-weight: 600; }
.date-count { display: block; font-size: 0.85rem; color: var(--color-muted); }
.time-item { background: #fff; border-color: var(--color-accent); }
.time-item:hover { background: var(--color-accent); color: var(--color-accent-contrast); }

.chosen-slot { font-size: 1.15rem; font-weight: 600; }
.field-error { color: var(--color-error); margin: 0.25rem 0 0; font-size: 0.9rem; }
input.has-error { border-color: var(--color-error); }
.privacy-note { font-size: 0.9rem; color: var(--color-muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.reference-label { margin-bottom: 0; color: var(--color-muted); }
.reference { margin: 0 0 1rem; font-size: 2rem; font-weight: 700; letter-spacing: 0.05em; color: var(--color-accent); }