.au-booking {
	--au-accent: var(--color-primary-1, #063E85);
	--au-accent-ink: var(--color-white, #fff);
	--au-line: var(--color-grey-200, #D0D5DB);
	--au-muted: var(--color-grey-300, #3C3C3C);
	--au-sunk: var(--color-grey-100, #F6F6F6);
	--au-radius: 0.3rem;
}
.au-booking .container {
	max-width: 128rem;
	padding-top: 4rem;
	padding-bottom: 6rem;
}

@media (min-width: 62em) {
	.au-booking .container {
		padding-top: 8rem;
		padding-bottom: 12rem;
	}
}

.au-booking__intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	margin: 4rem 0 5rem;
}

@media (min-width: 48em) {
	.au-booking__intro {
		grid-template-columns: 34rem minmax(0, 1fr);
		gap: 5rem;
		align-items: start;
	}
}

.au-booking__portrait-image {
	display: block;
	width: 100%;
	height: auto;
}
.au-booking__portrait picture {
	display: block;
}
.au-booking .au-booking__eyebrow {
	margin: 0 0 1rem;
}

.au-booking__name {
	margin: 0 0 0.5rem;
}

.au-booking__job {
	margin: 0 0 2rem;
	font-size: 1.8rem;
	color: var(--au-muted);
}

.au-booking__lead {
	margin: 0 0 2rem;
	max-width: 52rem;
}

@media (min-width: 62em) {
	.au-booking__lead {
		max-width: 68rem;
	}
}

.au-booking__facts {
	margin: 0;
	font-size: 1.4rem;
	color: var(--au-muted);
}

.au-booking__card {
	background: var(--color-white, #fff);
	border: 1px solid var(--au-line);
	border-radius: var(--au-radius);
	padding: 3rem 2rem;
	margin-bottom: 0;
}

@media (min-width: 48em) {
	.au-booking__card {
		padding: 4rem;
	}
}

.au-booking__card-title {
	margin: 0 0 3rem;
}

.au-booking__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
}

@media (min-width: 62em) {
	.au-booking__columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6rem;
	}
}

.au-booking__section-title {
	margin: 0 0 2.5rem;
	font-size: 2.2rem;
}

@media (min-width: 62em) {
	.au-booking__section-title {
		font-size: 2.4rem;
	}
}


.au-booking__calendar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.au-booking__month {
	font-weight: 700;
	font-size: 1.7rem;
}

.au-booking__nav {
	appearance: none;
	width: 3.4rem;
	height: 3.4rem;
	border: 1px solid var(--au-line);
	border-radius: var(--au-radius);
	background: transparent;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.au-booking__nav:hover:not(:disabled) {
	border-color: var(--au-accent);
	color: var(--au-accent);
}

.au-booking__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.au-booking__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.6rem;
}

.au-booking__weekday {
	text-align: center;
	font-size: 1.2rem;
	color: var(--au-muted);
	padding-bottom: 0.5rem;
}

.au-booking__day {
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--au-radius);
	background: var(--au-sunk);
	color: inherit;
	font: inherit;
	font-size: 1.5rem;
	padding: 1rem 0;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.au-booking__day:hover:not(:disabled) {
	background: var(--au-line);
}

.au-booking__day--today {
	border-color: var(--au-accent);
	color: var(--au-accent);
	font-weight: 700;
}

.au-booking__day[aria-pressed="true"] {
	background: var(--au-accent);
	color: var(--au-accent-ink);
	border-color: var(--au-accent);
	font-weight: 700;
}

.au-booking__day:disabled:not(.au-booking__day--today) {
	background: transparent;
	color: var(--au-line);
	cursor: default;
}

.au-booking__day--today:disabled {
	background: transparent;
	cursor: default;
}


.au-booking__times {
	border: 0;
	margin: 2.5rem 0 0;
	padding: 0;
}

.au-booking__slots {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

/*
 * Der Bezugsrahmen fuer den versteckten Radio-Knopf — ohne ihn springt die
 * Seite.
 *
 * Das Theme schiebt jeden `input[type=radio]` global aus dem Bild
 * (`.visually-hidden`, mit `position: absolute !important` und
 * `top: 40px; left: 16px`). Diese 40/16 px gelten gegenueber dem naechsten
 * *positionierten* Vorfahren — das war nicht die Schaltflaeche, sondern
 * `div.wrapper` ganz oben im Dokument: gemessen 689 px oberhalb der eigenen
 * Schaltflaeche. Wer eine Uhrzeit waehlt, fokussiert den Knopf, und der
 * Browser holt ihn ins Bild — zurueck an den Seitenanfang.
 *
 * `top`/`left` deshalb ausdruecklich zurueck, und mit Attributselektor: Das
 * Theme trifft mit `input[type=radio]` dieselbe Spezifitaet wie ein blosses
 * `.au-booking__slot input`, dann entschiede die Ladereihenfolge.
 */
.au-booking__slot {
	position: relative;
}

.au-booking__slot input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 0;
	height: 0;
}

.au-booking__slot span {
	display: inline-block;
	padding: 0.9rem 1.8rem;
	border: 1px solid var(--au-line);
	border-radius: 999px;
	font-size: 1.5rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.au-booking__slot input:not(:checked) + span:hover {
	background: var(--au-line);
}

.au-booking__slot input:checked + span {
	background: var(--au-accent);
	border-color: var(--au-accent);
	color: var(--au-accent-ink);
}

.au-booking__slot input:focus-visible + span {
	outline: 2px solid var(--au-accent);
	outline-offset: 2px;
}

.au-booking__hint {
	margin: 2rem 0 0;
	font-size: 1.3rem;
	color: var(--au-muted);
}


.au-booking__field {
	margin-bottom: 2rem;
}

.au-booking__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 2rem;
}

@media (min-width: 30em) {
	.au-booking__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Beschriftung links, «Pflichtfeld» rechts auf derselben Grundlinie.
 *
 * Statt eines Sternchens: Ein `*` muss irgendwo erklaert werden, und diese
 * Erklaerung steht typischerweise am Formularende — also dort, wo man sie
 * nicht liest, wenn man sie braucht. Das ausgeschriebene Wort erklaert sich
 * selbst und funktioniert auch, wenn ein Screenreader das Zeichen als
 * «Stern» vorliest.
 */
.au-booking__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.6rem;
	font-size: 1.4rem;
	font-weight: 700;
}

.au-booking__required {
	color: var(--au-muted);
	font-size: 1.2rem;
	font-weight: 400;
	white-space: nowrap;
}

.au-booking input[type="text"],
.au-booking input[type="email"],
.au-booking input[type="tel"],
.au-booking select,
.au-booking textarea {
	width: 100%;
	/*
	 * Ueber die Hoehe und nicht nur ueber das Innenmass: Auswahlfelder rechnen
	 * ihre Hoehe teils aus der Schriftgroesse und blieben sonst flacher als die
	 * Textfelder daneben — sichtbar genau dort, wo beide in einer Zeile stehen.
	 */
	min-height: 5.2rem;
	padding: 1.4rem 1.4rem;
	border: 1px solid var(--au-line);
	border-radius: var(--au-radius);
	background: var(--color-white, #fff);
	font: inherit;
	font-size: 1.5rem;
	color: inherit;
}

.au-booking textarea {
	resize: vertical;
	min-height: 10rem;
}

.au-booking :focus-visible {
	outline: 2px solid var(--au-accent);
	outline-offset: 1px;
}

.au-booking__field--check {
	margin-top: 2.5rem;
}

.au-booking__check {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-size: 1.4rem;
	/* Der Datenschutzhinweis läuft über zwei Zeilen — ohne eigene
	   Zeilenhöhe kleben sie aneinander. */
	line-height: 1.5;
	cursor: pointer;
}

/*
 * Die Ankreuzbox muss dem Theme abgerungen werden.
 *
 * Es schiebt `input[type=checkbox]` und `input[type=radio]` global mit
 * `position: absolute !important` aus dem Bild und beschneidet sie auf ein
 * Pixel — es ersetzt sie ueberall durch eigenes Markup mit `::before` an
 * einem Geschwister-Label. Ohne Gegenwehr ist die Datenschutz-Bestaetigung
 * unsichtbar: klickbar ueber den Text, aber niemand sieht, dass da etwas
 * anzukreuzen ist, und die Pflichtfeld-Meldung des Browsers zeigt auf nichts.
 *
 * Das `!important` hier ist deshalb kein Faulheitszeichen, sondern die
 * einzige Antwort auf ein `!important` der Gegenseite.
 *
 * Die Uhrzeit-Radios sind anders betroffen: Sie sollen versteckt bleiben —
 * die Zustaende stellt das `<span>` daneben dar —, aber sie muessen dort
 * verstecken bleiben, wo sie hingehoeren. Siehe `.au-booking__slot` oben.
 */
.au-booking__check input[type="checkbox"] {
	position: static !important;
	clip: auto !important;
	width: 1.8rem !important;
	height: 1.8rem !important;
	overflow: visible !important;
	margin: 0.2rem 0 0;
	flex: 0 0 auto;
	appearance: auto;
	accent-color: var(--au-accent);
}

/*
 * Der Honigtopf. Nicht `display: none` und nicht `hidden` — beides erkennen
 * einfache Skripte und lassen das Feld dann aus. Aus dem Bild geschoben und
 * fuer Screenreader ausgeblendet erfuellt denselben Zweck, ohne es zu
 * verraten.
 */
.au-booking__pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------- Schaltflaeche -- */

.au-booking__submit {
	margin-top: 3rem;
}

.au-booking__button {
	appearance: none;
	display: block;
	width: 100%;
	padding: 1.5rem 2rem;
	border: 1px solid var(--au-accent);
	border-radius: var(--au-radius);
	background: var(--au-accent);
	color: var(--au-accent-ink);
	font: inherit;
	font-size: 1.6rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.au-booking__button:hover {
	opacity: 0.88;
}

.au-booking__card--empty {
	padding: 3rem;
}

.au-booking__card--empty p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.au-booking * {
		transition: none !important;
	}
}

/* --------------------------------------------------------- Rueckmeldung -- */

.au-booking__errors {
	border-left: 3px solid var(--color-error, #FF004E);
	background: var(--au-sunk);
	padding: 1.5rem 2rem;
	margin: 0 0 3rem;
}

.au-booking__errors p {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

.au-booking__errors p:last-child {
	margin-bottom: 0;
}

.au-booking__card--done {
	border-left: 3px solid var(--au-accent);
}

.au-booking__card--done p {
	margin: 0;
	max-width: 60rem;
}