/* ########################################################################## */
/* ##### mummert/appointment-bundle: Basis-Styles                       ##### */
/* ##### Nur Struktur und Grundlesbarkeit, keine Markenfarben/Schriften ##### */
/* ##### Überschreiben im Theme über Custom Properties, z. B.:          ##### */
/* #####   .appointment { --appointment-color-selected: #ad6200; }      ##### */
/* ########################################################################## */

/* ##### Custom Properties mit Fallback ##### */
:where(.appointment, .appointment-vacation) {
	--_gap: var(--appointment-gap, 1.25rem);
	--_gap-small: var(--appointment-gap-small, 0.5rem);
	--_radius: var(--appointment-radius, 0.25rem);
	--_border-width: var(--appointment-border-width, 1px);
	--_font-size-small: var(--appointment-font-size-small, 0.875em);
	--_cell-min-height: var(--appointment-cell-min-height, 3rem);
	--_max-width: var(--appointment-max-width, 44rem);
	--_color-border: var(--appointment-color-border, color-mix(in srgb, currentColor 35%, transparent));
	--_color-surface: var(--appointment-color-surface, color-mix(in srgb, currentColor 6%, transparent));
	--_color-surface-hover: var(--appointment-color-surface-hover, color-mix(in srgb, currentColor 14%, transparent));
	--_color-muted: var(--appointment-color-muted, color-mix(in srgb, currentColor 60%, transparent));
	--_color-selected: var(--appointment-color-selected, CanvasText);
	--_color-on-selected: var(--appointment-color-on-selected, Canvas);
	--_color-focus: var(--appointment-color-focus, CanvasText);
	--_color-error: var(--appointment-color-error, #b3261e);
	--_color-notice-border: var(--appointment-color-notice-border, currentColor);
	--_vacation-border: var(--appointment-vacation-border, 0.25rem solid currentColor);
	--_card-padding: var(--appointment-card-padding, clamp(1rem, 3vw, 2rem));
	--_card-background: var(--appointment-card-background, Canvas);
	--_card-radius: var(--appointment-card-radius, 0.5rem);
	--_shadow: var(--appointment-shadow, 0 1px 6px rgba(0, 0, 0, 0.15));
	--_scroll-margin: var(--appointment-scroll-margin, 1rem);
	--_duration: var(--appointment-duration, 180ms);
}

/* ##### Allgemein ##### */
:where(.appointment) { display: grid; gap: var(--_gap); box-sizing: border-box; max-width: var(--_max-width); margin-block: var(--_gap) 0; margin-inline: auto; padding: var(--_card-padding); background: var(--_card-background); border-radius: var(--_card-radius); box-shadow: var(--_shadow); scroll-margin-block-start: var(--_scroll-margin); }
/* Abschnitte werden vom Skript programmatisch fokussiert: kein Fokusrahmen auf nicht interaktiven Elementen */
:where(.appointment, .appointment-intro, .appointment-times, .appointment-form-step, .appointment-success):focus { outline: none; }
:where(.appointment-times) { scroll-margin-block-start: var(--_scroll-margin); }
:where(.appointment-sr-only) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:where(.appointment-form__honeypot) { display: none; }
:where(.appointment a, .appointment button, .appointment input, .appointment select, .appointment textarea):focus-visible { outline: 2px solid var(--_color-focus); outline-offset: 2px; }
:where(.appointment h3, .appointment h4) { margin-block: 0 var(--_gap-small); }

/* ##### Schrittanzeige ##### */
:where(.appointment-steps) { display: flex; flex-wrap: wrap; gap: var(--_gap-small) var(--_gap); margin: 0; padding: 0; list-style: none; font-size: var(--_font-size-small); }
:where(.appointment-steps__item) { display: inline-flex; align-items: center; gap: 0.4em; }
:where(.appointment-steps__number) { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75em; block-size: 1.75em; border: var(--_border-width) solid currentColor; border-radius: 50%; font-weight: 700; }
:where(.appointment-steps__item--current .appointment-steps__number) { background: var(--_color-selected); color: var(--_color-on-selected); border-color: var(--_color-selected); }
:where(.appointment-steps__item--upcoming) { color: var(--_color-muted); }
:where(.appointment-steps__item--current .appointment-steps__label) { font-weight: 700; }

/* ##### Hinweise und Fehler ##### */
:where(.appointment-notice) { margin: 0; padding: var(--_gap-small) var(--_gap); border-inline-start: 0.25rem solid var(--_color-notice-border); background: var(--_color-surface); }
:where(.appointment-notice--error) { border-color: var(--_color-error); }
:where(.appointment-errors) { padding: var(--_gap-small) var(--_gap); border-inline-start: 0.25rem solid var(--_color-error); background: var(--_color-surface); }
:where(.appointment-errors__heading) { margin: 0 0 var(--_gap-small); font-weight: 700; }
:where(.appointment-errors__list) { margin: 0; padding-inline-start: 1.25em; }
:where(.appointment-error) { margin: 0.25em 0 0; font-size: var(--_font-size-small); color: var(--_color-error); }

/* ##### Monatskalender ##### */
:where(.appointment-calendar__nav) { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--_gap-small); margin-block-end: var(--_gap-small); }
:where(.appointment-calendar__month) { margin: 0; font-size: 1.1em; font-weight: 600; text-align: center; }
:where(.appointment-calendar__nav-link) { justify-self: start; padding: 0.4em 0.6em; border-radius: var(--_radius); font-size: var(--_font-size-small); text-decoration: none; }
:where(.appointment-calendar__nav-link--next) { justify-self: end; text-align: end; }
:where(.appointment-calendar__nav-link--disabled) { visibility: hidden; }
:where(a.appointment-calendar__nav-link:hover) { background: var(--_color-surface-hover); }
:where(.appointment-calendar__table) { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; }
:where(.appointment-calendar__weekday) { padding: 0.25em 0; font-size: var(--_font-size-small); font-weight: 600; text-align: center; }
:where(.appointment-calendar__weekday abbr) { text-decoration: none; border: 0; }
:where(.appointment-calendar__cell) { padding: 0; vertical-align: top; }
:where(.appointment-calendar__day) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1em; min-block-size: var(--_cell-min-height); margin: 0.1rem; padding: 0.3em 0.15em; border: var(--_border-width) solid transparent; border-radius: var(--_radius); text-align: center; text-decoration: none; line-height: 1.2; }
:where(.appointment-calendar__number) { font-weight: 600; }
:where(.appointment-calendar__status) { display: none; font-size: 0.7em; }
:where(.appointment-calendar__day--available) { border-color: var(--_color-border); background: var(--_color-surface); color: inherit; }
:where(.appointment-calendar__day--available:hover, .appointment-calendar__day--available:focus-visible) { background: var(--_color-surface-hover); }
:where(.appointment-calendar__day--selected, .appointment-calendar__day--selected:hover) { background: var(--_color-surface-hover); border-color: var(--_color-selected); box-shadow: inset 0 0 0 2px var(--_color-selected); }
:where(.appointment-calendar__day--none, .appointment-calendar__day--out_of_range, .appointment-calendar__day--full, .appointment-calendar__day--blocked) { color: var(--_color-muted); }
:where(.appointment-calendar__day--full .appointment-calendar__number, .appointment-calendar__day--blocked .appointment-calendar__number) { text-decoration: line-through; }
:where(.appointment-calendar__cell--today .appointment-calendar__number) { text-decoration: underline; text-underline-offset: 0.2em; }
:where(.appointment-calendar__legend) { display: flex; flex-wrap: wrap; gap: var(--_gap-small) var(--_gap); margin: var(--_gap-small) 0 0; font-size: var(--_font-size-small); }
:where(.appointment-calendar__legend-item) { display: inline-flex; align-items: center; gap: 0.4em; }
:where(.appointment-calendar__legend-item)::before { content: ""; display: inline-block; flex: 0 0 auto; inline-size: 1em; block-size: 1em; border: var(--_border-width) solid var(--_color-border); border-radius: var(--_radius); }
:where(.appointment-calendar__legend-item--available)::before { background: var(--_color-surface); }
:where(.appointment-calendar__legend-item--unavailable)::before { border-color: transparent; background: linear-gradient(to top right, transparent 46%, var(--_color-muted) 46%, var(--_color-muted) 54%, transparent 54%); }
:where(.appointment-calendar__empty) { margin: var(--_gap-small) 0 0; }

@media (min-width: 30rem) {
	:where(.appointment-calendar__status) { display: block; }
	:where(.appointment) { --_cell-min-height: var(--appointment-cell-min-height, 3.75rem); }
}

/* ##### Uhrzeiten ##### */
:where(.appointment-times:focus) { outline: none; }
:where(.appointment-times__list) { display: flex; flex-wrap: wrap; gap: var(--_gap-small); margin: 0; padding: 0; list-style: none; }
:where(.appointment-times__link) { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 5.5rem; padding: 0.6em 1em; border: var(--_border-width) solid var(--_color-border); border-radius: var(--_radius); background: var(--_color-surface); color: inherit; font-weight: 600; text-decoration: none; }
:where(.appointment-times__link:hover, .appointment-times__link:focus-visible) { background: var(--_color-surface-hover); }

/* ##### Gewählter Termin ##### */
:where(.appointment-selected) { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--_gap-small) var(--_gap); margin: 0; padding: var(--_gap-small) var(--_gap); border: var(--_border-width) solid var(--_color-border); border-radius: var(--_radius); }
:where(.appointment-selected__text) { font-weight: 600; }
:where(.appointment-selected__change) { font-size: var(--_font-size-small); }

/* ##### Bestätigung und Einwilligungen ##### */
:where(.appointment-intro__text) { margin-block-end: var(--_gap); }
/* Oberer Abstand kollabiert mit dem Text davor; greift, wenn kein Text vor den Checkboxen steht */
:where(.appointment-consent) { margin: var(--_gap) 0; padding: 0; border: 0; }
:where(.appointment-consent__legend) { padding: 0; margin-block-end: var(--_gap-small); font-weight: 700; }
:where(.appointment-consent__label) { margin: 0; }
:where(.appointment-consent__item) { display: grid; grid-template-columns: auto 1fr; column-gap: var(--_gap-small); align-items: start; margin-block-end: var(--_gap-small); }
:where(.appointment-consent__input) { margin: 0.3em 0 0; }
/* Bewusst eine Klassenregel: Themes blenden häufig "form label" aus, die Einwilligungstexte müssen aber sichtbar bleiben */
.appointment-consent__label { display: block; }
:where(.appointment-consent__item .appointment-error) { grid-column: 2; }
:where(.appointment-consent__item--error .appointment-consent__label) { color: var(--_color-error); }

/* ##### Formular ##### */
:where(.appointment-form__hint) { margin: 0 0 var(--_gap-small); font-size: var(--_font-size-small); color: var(--_color-muted); }
:where(.appointment-form__fields) { display: grid; gap: var(--_gap-small); }
:where(.appointment-form__fields .widget) { display: grid; gap: 0.25em; }
:where(.appointment-form__fields .widget > input:not([type="checkbox"]):not([type="radio"]), .appointment-form__fields .widget > textarea, .appointment-form__fields .widget > select) { inline-size: 100%; box-sizing: border-box; }
:where(.appointment-form__fields .widget p.error) { margin: 0; font-size: var(--_font-size-small); color: var(--_color-error); }
:where(.appointment-form__fields .widget-submit, .appointment-actions) { margin-block-start: var(--_gap-small); }
/* Hinweis und Pflicht-Checkboxen des Kalenders im Formular: volle Breite, kein eigener Außenabstand im Grid */
:where(.appointment-form__consent) { grid-column: 1 / -1; }
:where(.appointment-form__consent .appointment-consent) { margin: 0; }
:where(.appointment-form__consent-text) { margin-block-end: var(--_gap-small); }

/* ##### Buttons ##### */
:where(.appointment-button) { display: inline-block; padding: 0.6em 1.2em; border: var(--_border-width) solid currentColor; border-radius: var(--_radius); background: transparent; color: inherit; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
:where(.appointment-button--primary) { background: var(--_color-selected); border-color: var(--_color-selected); color: var(--_color-on-selected); }
:where(.appointment-button:hover, .appointment-button:focus-visible) { background: var(--_color-surface-hover); }
:where(.appointment-button--primary:hover, .appointment-button--primary:focus-visible) { background: var(--_color-selected); opacity: 0.85; }
:where(.appointment-actions) { margin: 0; }

/* ##### Urlaubshinweis ##### */
:where(.appointment-vacation) { display: grid; gap: var(--_gap-small); padding: var(--_gap-small) var(--_gap); border-inline-start: var(--_vacation-border); background: var(--_color-surface); }
:where(.appointment-vacation__period) { margin: 0; }
:where(.appointment-vacation__status) { display: block; }
:where(.appointment-vacation__message .rte > :first-child) { padding-block-start: 0; }
:where(.appointment-vacation__message) { margin: 0; }
:where(.appointment-vacation__message > :last-child) { margin-block-end: 0; }

/* ##### Übergänge (nur ohne Bewegungsreduzierung) ##### */
@media (prefers-reduced-motion: no-preference) {
	:where(.appointment) { transition: opacity var(--_duration) ease; }
	:where(.appointment--leaving, .appointment--entering) { opacity: 0; }
	:where(.appointment-calendar__day--available, .appointment-times__link, .appointment-button, .appointment-calendar__nav-link) { transition: background-color var(--_duration) ease, border-color var(--_duration) ease, box-shadow var(--_duration) ease, transform var(--_duration) ease; }
	:where(.appointment-calendar__day--available:hover, .appointment-times__link:hover) { transform: translateY(-1px); }
	:where(.appointment-calendar__day--available:active, .appointment-times__link:active) { transform: translateY(0); }
	:where(.appointment-intro, .appointment-times, .appointment-form-step, .appointment-success, .appointment-notice) { animation: appointment-rise calc(var(--_duration) * 1.8) ease both; }
	@keyframes appointment-rise { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
}