/* ==========================================================================
   Buchungsstrecke im Look der Website (FluentBooking) – 13.09.2026

   Gilt an drei Stellen, deshalb EINE Datei statt Kopien:
     1. /beratungstermin/ (Seite mit dem Shortcode, zusätzlich zur style.css)
     2. eigenständige Bestätigungs- und Absageseite (?fluent-booking=booking)
     3. eigenständige Umbuchungsseite – zeigt das komplette Buchungs-Widget,
        aber ohne style.css der Website
   Geladen von inc/buchung-anpassungen.php. Werte aus dem freigegebenen
   Entwurf (entwuerfe/2026-09-13-design-buchung-mails/erzeugen.mjs) und der
   style.css (Farben Z. 143–163, Formular Z. 2650–2695, Knopf-Druck
   Z. 2757–2772).

   WARUM DIE LANGEN SELEKTOREN: Das Plugin schreibt sein CSS erst beim
   Laden per Skript in den <head>, also NACH diesem Stylesheet. Bei gleicher
   Gewichtung gewänne das Plugin. Jede Regel hier trägt deshalb vorne
   "html body" (+2 Elemente) und die Klassenkette des Plugins – so gewinnt sie
   unabhängig von der Reihenfolge. !important nur dort, wo das Plugin selbst
   !important setzt.

   Rot heißt nur „ausgewählt“ (Entwurf): buchbare Tage hell mit feinem Rand,
   gewählter Tag und gewählte Uhrzeit rot, gesperrte Tage grau.

   Rückweg: inc/buchung-anpassungen.php → EDDYART_BUCHUNG_ANPASSUNGEN_AKTIV
   auf false, dann wird diese Datei nirgends mehr geladen.
   ========================================================================== */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('schriften/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('schriften/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Werte der Website. Auf /beratungstermin/ kommen sie aus style.css
   (--g-…), auf den eigenständigen Seiten greift der Ersatzwert. */
:root {
	--eb-rot:        var(--g-rot, #ec3013);
	--eb-rot-hell:   var(--g-rot-hell, #ff563c);
	--eb-hell:       var(--g-hell, #f3f2f2);
	--eb-grau:       var(--g-grau, #c9c5c5);
	--eb-dunkel:     var(--g-dunkel, #0c0b0b);
	--eb-matt:       #8b8686;
	--eb-aus:        #6f6b6b;
	--eb-karte:      #141212;
	--eb-linie:      #2a2828;
	--eb-kachelrand: #3a3737;
	--eb-feld:       rgba(243, 242, 242, .05);
	--eb-feldrand:   rgba(243, 242, 242, .2);
	--eb-umriss:     rgba(243, 242, 242, .35);
	--eb-knopfrand:  rgba(243, 242, 242, .22);
	--eb-rothauch:   rgba(236, 48, 19, .08);
	--eb-schrift:    'Archivo', system-ui, -apple-system, sans-serif;
	--eb-kurve:      var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}

/* Plugin-Variablen auf die Website-Werte stellen – für alle Stellen, die
   hier nicht eigens gestaltet sind. "html" vorne schlägt .fcal-dark-mode,
   das auf demselben Element sitzt. */
html .fcal_cal_wrap,
html .fluent_booking_app,
html .fluent_booking_app .fcal-dark-mode,
html .fluent_booking_app .fcal-light-mode,
html .confirmation_page,
html .calendar_wrap {
	--fcal_primary_color: var(--eb-rot);
	--fcal_primaryColor: var(--eb-rot);
	--fcal_dark: var(--eb-hell);
	--fcal_gray: var(--eb-grau);
	--fcal_whiteColor: #ffffff;
	--fcal_body_bg: var(--eb-dunkel);
	--fcal_cal_bg: var(--eb-karte);
	--fcal_input_bg: transparent;
	--fcal_input_disable_bg: rgba(243, 242, 242, .02);
	--fcal_slot_border: var(--eb-linie);
	--fcal_thBG: #1e1c1c;
	--fcal_enable_day_bg: var(--eb-karte);
	--fcal_date_disabled_bg: transparent;
	--fcal_date_disabled_color: var(--eb-aus);
	--fcal_date_radius: 8px;
	--fcal_avatar_radius: 50%;
	--fcal_scroll_bar_bg: var(--eb-kachelrand);
	--fcal_skeleton_bg: linear-gradient(90deg, #1a1818 25%, #242222 37%, #1a1818 63%);
}

html body .fcal_cal_wrap,
html body .fluent_booking_app,
html body .confirmation_page,
html body .calendar_wrap {
	font-family: var(--eb-schrift);
	color: var(--eb-hell);
}

html body .fluent_booking_app :is(button, input, textarea, select),
html body .confirmation_page :is(button, input, textarea, select) {
	font-family: inherit;
}

/* Rahmen auf /beratungstermin/: Der Kasten ist .fcal_calendar_inner. */
html body .fcal_cal_wrap {
	border-radius: 0;
	overflow: visible;
	background: none;
}

/* ==========================================================================
   1. Kasten
   ========================================================================== */

html body .fluent_booking_app .fcal_wrap .fcal_calendar_inner {
	background: var(--eb-karte);
	border: 1px solid var(--eb-linie);
	border-radius: 10px;
	box-shadow: none;
	overflow: hidden;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side {
	background: transparent;
	border: 0;
	min-height: 0;
	padding: 22px 20px;
}

/* Kein Logo-Stempel, kein Titel im Kasten – die Seitenüberschrift sagt es. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_author,
html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_heading {
	display: none;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_info {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Zeilen „45 Minuten · kostenlos“, „Im Studio oder per Video-Call“, Uhrzeit. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_info .fcal_icon_item {
	align-items: center;
	column-gap: 10px;
	margin: 0;
	color: var(--eb-hell);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_info .fcal_icon_item svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_info .fcal_icon_item svg :is(path, circle, rect) {
	stroke: var(--eb-matt);
	fill: none;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_info .fcal_icon_item :is(span, .fcal_duration_title, .fcal_loc_text) {
	margin: 0;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Gewählte Uhrzeit: hervorgehoben (Entwurf: 800, Symbol hell). */
html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_info .slot_time_range.fcal_icon_item {
	font-weight: 800;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_info .slot_time_range.fcal_icon_item svg :is(path, circle, rect) {
	stroke: var(--eb-hell);
}

/* Zeitzone steht fest auf Berlin – Zeile und Auswahl ausblenden. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_info .slot_timezone.fcal_icon_item,
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_day_picker .fcal_timezone_select {
	display: none;
}

/* Die Uhrzeit erscheint oben erst, wenn sie mit „Weiter“ bestätigt ist
   (Entwurf Bild 03 ohne, Bild 04 mit Zeile). */
html body .fluent_booking_app .fcal_calendar_inner:not(.fcal_spot_selected) .fcal_side .fcal_slot_info .slot_time_range {
	display: none;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_description {
	margin: 16px 0 0;
	color: var(--eb-grau);
	font-size: 15px;
	line-height: 1.65;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_description p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_description p + p {
	margin-top: 10px;
}

/* Handy: Beschreibung nur im ersten Schritt. */
html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs.fcal_day_selected .fcal_side .fcal_slot_description,
html body .fluent_booking_app .fcal_calendar_inner.fcal_on_sm.fcal_day_selected .fcal_side .fcal_slot_description {
	display: none;
}

/* ==========================================================================
   2. Kalender
   ========================================================================== */

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper {
	margin: 0;
	background: transparent;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs .fcal_date_wrapper {
	border-top: 1px solid var(--eb-linie);
}

/* Volle Breite: Mit flexiblen Spalten schrumpft der Kalender sonst auf
   seinen Inhalt (er steht in einer Flex-Zeile). */
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container {
	flex: 1 1 auto;
	width: 100%;
	padding: 20px;
}

/* Handy, Schritt Uhrzeiten: Das Plugin schiebt den Kalender nur unsichtbar
   zur Seite – er behält seine Höhe, der Kasten bliebe darunter leer
   (gemessen 13.09.: rund 400 px). Kalender aus dem Fluss nehmen, Uhrzeiten
   normal einfließen lassen. */
html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs.fcal_day_selected:not(.fcal_spot_selected) .fcal_calendar_slot_wrap .calendar-container {
	display: none;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs.fcal_day_selected .fcal_calendar_slot_wrap {
	padding: 0 !important;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs.fcal_day_selected:not(.fcal_spot_selected) .fcal_date_wrapper .fcal_slot_picker.is_active {
	position: relative;
	right: auto;
	width: 100%;
	height: auto;
	overflow: visible;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_day_selected .calendar-container {
	border-right: 0;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header {
	gap: 10px;
	margin: 0 0 16px;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar-month-year :is(h2, h4) {
	margin: 0;
	color: var(--eb-hell);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 1.6px;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar-month-year :is(h2, h4) span {
	color: var(--eb-matt);
	font-weight: 700;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar_nav {
	gap: 8px;
	flex: 0 0 auto;
}

/* Knöpfe ‹ › als Umrissquadrate 44 × 44. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar_nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--eb-knopfrand);
	border-radius: 8px;
	color: var(--eb-hell);
	cursor: pointer;
	transition: border-color .18s var(--eb-kurve), transform .16s var(--eb-kurve);
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar_nav button svg {
	width: 14px;
	height: 14px;
	color: var(--eb-hell);
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar_nav button.fcal_btn_disabled {
	opacity: .35;
}

/* Raster der Tage. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	overflow: visible;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day-name {
	padding: 0 0 4px;
	color: var(--eb-matt);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.2px;
	line-height: 1.5;
	text-transform: uppercase;
}

/* Tag: feste Höhe 44 px statt quadratisch (Plugin: padding-top 100 %). */
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day {
	height: 44px;
	padding-top: 0 !important;
	color: var(--eb-aus);
	font-size: 15px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day > span {
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: transparent;
	color: inherit;
	font-weight: inherit;
	transition: border-color .18s var(--eb-kurve), background-color .18s var(--eb-kurve);
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-disabled > span {
	background-color: transparent;
	color: var(--eb-aus);
}

/* Buchbar: helle Schrift auf dunkler Fläche mit feinem Rand – nicht rot. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled > span,
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled:hover > span {
	background-color: var(--eb-karte);
	border-color: var(--eb-kachelrand);
	color: var(--eb-hell);
	font-weight: 800;
}

/* Beim Überfahren ein roter Rand – nur mit echter Maus, sonst bleibt der
   Zustand nach dem Antippen am Handy hängen. */
@media (hover: hover) and (pointer: fine) {
	html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled:hover > span {
		border-color: var(--eb-rot);
	}

	html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar_nav button:not(.fcal_btn_disabled):hover {
		border-color: var(--eb-rot);
	}
}

/* Gewählt: rot gefüllt, weiße Schrift. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled.day_is_selected > span,
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled.day_is_selected:hover > span {
	background-color: var(--eb-rot);
	border-color: var(--eb-rot);
	color: #ffffff !important;
	font-weight: 800;
}

/* Punkte des Plugins am gewählten Tag weg. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled > span::before {
	content: none !important;
}

/* Heute: grauer Punkt statt roter Schrift. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day .is-today {
	color: inherit;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day .is-today::before {
	content: '';
	display: block;
	bottom: 5px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--eb-matt);
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled.day_is_selected .is-today::before {
	content: none !important;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled:focus-visible {
	outline: none;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day.day-enabled:focus-visible > span {
	box-shadow: 0 0 0 2px var(--eb-dunkel), 0 0 0 4px var(--eb-rot);
}

/* Meldung „Keine freien Termine im …“ */
html body .fluent_booking_app .fcal_calendar_inner :is(.fcal_no_availability, .fcal_error_text) {
	left: 50%;
	transform: translateX(-50%);
	max-width: calc(100% - 40px);
	padding: 24px;
	background: var(--eb-karte);
	border: 1px solid var(--eb-kachelrand);
	border-radius: 10px;
}

html body .fluent_booking_app .fcal_calendar_inner :is(.fcal_no_availability, .fcal_error_text) h3 {
	margin: 0;
	color: var(--eb-hell);
	font-size: 15px;
	line-height: 1.5;
}

html body .fluent_booking_app .fcal_calendar_inner :is(.fcal_no_availability, .fcal_error_text) button {
	height: auto;
	padding: 12px 16px;
	background: var(--eb-rot);
	border-radius: 8px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

/* ==========================================================================
   3. Uhrzeiten
   ========================================================================== */

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker,
html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs.fcal_day_selected .fcal_slot_picker.is_active,
html body .fluent_booking_app .fcal_calendar_inner.fcal_on_sm.fcal_day_selected .fcal_slot_picker.is_active {
	background: transparent;
	padding: 20px;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_slot_picker_header {
	position: static;
	justify-content: flex-start;
	gap: 14px;
	margin: 0 0 18px;
	padding: 0;
	background: transparent;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_slot_picker_header .fcal_back,
html body .fluent_booking_app .fcal_calendar_inner.fcal_on_md .fcal_slot_picker_header .fcal_back {
	display: block;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_date_info,
html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs .fcal_slot_picker.is_active .fcal_slot_picker_header .fcal_slot_date_info {
	margin: 0;
	color: var(--eb-hell);
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_date_info span {
	font: inherit;
	color: inherit;
}

/* Umschalter 12/24 Std. ausblenden (am Handy abgeschnitten, Zeiten sind 24 h). */
html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_slot_picker_header .fcal_slot_picker_header_action {
	display: none;
}

/* Zurück-Knopf: Umrissquadrat wie ‹ › (Uhrzeiten und Formular). */
html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_slot_picker_header .fcal_back .fcal_svg,
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--eb-knopfrand);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .18s var(--eb-kurve), transform .16s var(--eb-kurve);
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_slot_picker_header .fcal_back .fcal_svg svg,
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg svg {
	width: 20px;
	height: 20px;
	fill: var(--eb-hell);
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_slot_picker_header .fcal_back svg path:first-child,
html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg svg path:first-child {
	fill: none;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg:hover {
	background: transparent;
	border-color: var(--eb-knopfrand);
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg:hover svg {
	fill: var(--eb-hell);
}

@media (hover: hover) and (pointer: fine) {
	html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_slot_picker_header .fcal_back .fcal_svg:hover,
	html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header .fcal_back button.fcal_svg:hover {
		border-color: var(--eb-rot);
	}
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists .fcal_spot {
	display: flex;
	gap: 10px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists .fcal_spot + .fcal_spot {
	margin-top: 0;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists .fcal_spot::before {
	content: none;
}

/* Uhrzeit: Umriss, 52 px hoch. */
html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_name {
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
	height: 52px;
	padding: 0 12px;
	border: 2px solid var(--eb-feldrand);
	border-radius: 8px;
	background: transparent;
	color: var(--eb-hell);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .5px;
	font-variant-numeric: tabular-nums;
	transition: border-color .18s var(--eb-kurve), background-color .18s var(--eb-kurve);
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_name :is(div, span, .fcal_spot_time) {
	color: inherit;
	font: inherit;
	line-height: 1.2;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists .fcal_spot.fcal_spot_selected .fcal_spot_name {
	border-color: var(--eb-rot);
	background: var(--eb-rothauch);
	color: var(--eb-hell);
}

@media (hover: hover) and (pointer: fine) {
	html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists .fcal_spot:hover .fcal_spot_name {
		border-color: var(--eb-rot);
	}
}

/* „Weiter“: rot, weiße Schrift 900 (bisher dunkelblau über --fcal_whiteColor). */
html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker .fcal_spot_lists .fcal_spot .fcal_spot_confirm {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--eb-rot);
	color: #ffffff;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 1.6px;
	line-height: 1;
	text-transform: uppercase;
	transition: filter .18s var(--eb-kurve), transform .16s var(--eb-kurve);
}

/* ==========================================================================
   4. Formular
   ========================================================================== */

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details {
	padding: 24px 20px 26px;
	background: transparent;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs .fcal_date_wrapper .fcal_date_event_details.is_active {
	border-top: 0;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}

html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details .fcal_date_event_details_header h3 {
	gap: 14px;
	color: var(--eb-hell);
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -.25px;
	line-height: 1.2;
	text-transform: uppercase;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item + .fcal_form_item {
	margin-top: 28px;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_label {
	margin: 0 0 10px;
	color: var(--eb-hell);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_label span {
	margin-left: 2px;
	color: var(--eb-rot);
}

/* Felder eckig wie im Anfrageformular, 16 px (iPhone zoomt sonst heran). */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content :is(input.fcal_input, textarea.fcal_input, input[type="text"], input[type="email"], textarea) {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 0;
	padding: 15px 16px;
	background: var(--eb-feld);
	border: 2px solid var(--eb-feldrand);
	border-radius: 0;
	box-shadow: none;
	color: var(--eb-hell);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	transition: border-color .18s var(--eb-kurve);
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content textarea.fcal_input {
	height: auto;
	min-height: 88px;
	max-height: 240px;
	resize: vertical;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content :is(input, textarea):focus {
	border-color: var(--eb-rot);
	outline: none;
	box-shadow: none;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content :is(input, textarea)::placeholder {
	color: var(--eb-umriss);
	opacity: 1;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content :is(input, textarea):-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 1000px #1f1d1d;
	-webkit-text-fill-color: var(--eb-hell);
	caret-color: var(--eb-hell);
}

/* Beim Umbuchen sind Name und E-Mail gesperrt. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input:disabled {
	background: rgba(243, 242, 242, .02) !important;
	border-color: rgba(243, 242, 242, .1);
	color: var(--eb-matt);
	-webkit-text-fill-color: var(--eb-matt);
	cursor: not-allowed;
}

/* Fehler: Feld mit hellem Rot umrandet, Text darunter. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content:has(.fcal_validation_error) :is(input, textarea) {
	border-color: var(--eb-rot-hell);
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_validation_error {
	margin: 10px 0 0;
	color: var(--eb-rot-hell);
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_validation_error svg {
	display: none;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_validation_error p {
	margin: 0;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

/* Ort als Kacheln: Radius 8 wie Tage und Uhrzeiten, Kreis rechts. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_input_location_wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 16px;
	min-height: 76px;
	margin: 0;
	padding: 14px 18px;
	border: 2px solid var(--eb-feldrand);
	border-radius: 8px;
	background: transparent;
	color: var(--eb-hell);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
	transition: border-color .18s var(--eb-kurve), background-color .18s var(--eb-kurve);
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group:has(input:checked) {
	border-color: var(--eb-rot);
	background: var(--eb-rothauch);
}

@media (hover: hover) and (pointer: fine) {
	html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group:hover {
		border-color: var(--eb-rot);
	}
}

/* Das echte Auswahlfeld bleibt bedienbar, liegt unsichtbar über der Kachel. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

/* Auswahl-Knopf vor dem Text statt Punkt daneben (Eddy, 13.09. Zwischenstand:
   „viel sichtbarer, als großer runder oranger Knopf, der jede Kachel
   anführt"). Reihenfolge im Markup ist Text, dann <input>, dann dieser
   Span - order:-1 dreht nur die sichtbare Reihenfolge um, ohne das
   Plugin-Markup anzufassen.

   Abweichung vom Entwurf: Eddy wollte zusätzlich eine zweite, kleinere
   Zeile unter dem Titel (Adresse bzw. "Link kommt per E-Mail"). Das
   Plugin schreibt den Kacheltext als reinen Textknoten (kein HTML,
   geprüft in app.js: `tt(ge(t[10].title))` - "tt" erzeugt einen
   Textknoten). Eine zweite Zeile bräuchte eigenes JavaScript, das den
   Text nach " · " zerlegt; das war die Zeit für diesen Zwischenstand nicht
   wert, siehe Bericht. Die bestehende einzeilige Beschriftung (mit Adresse)
   bleibt deshalb stehen - keine Information geht verloren. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group .fcal_radio_icon {
	order: -1;
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	margin: 0;
	border: 2px solid rgba(243, 242, 242, .35);
	border-radius: 50%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	transition: border-color .18s var(--eb-kurve), background-color .18s var(--eb-kurve), box-shadow .18s var(--eb-kurve);
}

/* Der frühere Innenpunkt entfällt - das Symbol kommt jetzt als
   Hintergrundbild (siehe unten, je nach data-driver). */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group .fcal_radio_icon::before {
	content: none;
}

/* Symbol „Vor Ort" (Gebäude), ungewählt: Strich in --g-grau. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input[data-driver="in_person_organizer"] ~ .fcal_radio_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9c5c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 21v-4h6v4'/%3E%3Cpath d='M9 8h1'/%3E%3Cpath d='M14 8h1'/%3E%3Cpath d='M9 12h1'/%3E%3Cpath d='M14 12h1'/%3E%3C/svg%3E");
}

/* Symbol „Video-Call" (Kamera), ungewählt. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input[data-driver="custom"] ~ .fcal_radio_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9c5c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3C/svg%3E");
}

/* Gewählt: roter Knopf, weißes Symbol, leichtes Glühen - dieselbe
   Bild-Sprache wie der pulsierende Anfrage-Knopf der Website
   (box-shadow mit rgba(236, 48, 19, …)). */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input:checked ~ .fcal_radio_icon {
	border-color: var(--eb-rot);
	background-color: var(--eb-rot);
	box-shadow: 0 0 10px 0 rgba(236, 48, 19, .55);
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input[data-driver="in_person_organizer"]:checked ~ .fcal_radio_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 21v-4h6v4'/%3E%3Cpath d='M9 8h1'/%3E%3Cpath d='M14 8h1'/%3E%3Cpath d='M9 12h1'/%3E%3Cpath d='M14 12h1'/%3E%3C/svg%3E");
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input[data-driver="custom"]:checked ~ .fcal_radio_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='m22 8-6 4 6 4V8Z'/%3E%3C/svg%3E");
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input:focus-visible ~ .fcal_radio_icon {
	box-shadow: 0 0 0 2px var(--eb-dunkel), 0 0 0 4px var(--eb-rot);
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input:focus:not(:focus-visible) ~ .fcal_radio_icon {
	border-color: rgba(243, 242, 242, .35);
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item .fcal_input_content .fcal_radio_group input:checked:focus ~ .fcal_radio_icon {
	border-color: var(--eb-rot);
}

/* Knopf „Termin buchen“ – volle Breite. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item.fcal_submit {
	display: block;
	margin-top: 34px;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item button.fcal_btn_submit {
	display: block;
	width: 100%;
	margin: 0;
	padding: 18px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--eb-rot);
	color: #ffffff;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 1.6px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	white-space: normal;
	cursor: pointer;
	transition: filter .18s var(--eb-kurve), transform .16s var(--eb-kurve), opacity .18s var(--eb-kurve);
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item button.fcal_btn_submit:hover {
	background: var(--eb-rot);
	opacity: 1;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item button.fcal_btn_submit.fcal_btn_submitting {
	background: var(--eb-rot);
	opacity: .6;
	cursor: progress;
}

/* Sammelmeldung unter dem Knopf, schlicht wie der Feldfehler. */
html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_errors {
	gap: 0;
	margin: 14px 0 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	color: var(--eb-rot-hell);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

html body .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_errors svg {
	display: none;
}

/* Knopf-Druck wie auf der Website (style.css Z. 2757–2772). */
html body .fluent_booking_app .fcal_calendar_inner :is(.fcal_spot_confirm, .fcal_btn_submit, .calendar_nav button, .fcal_back .fcal_svg):active,
html body .confirmation_page .fcal_confirmation .fcal_cancellation_wrap .fcal_btn_primary:active {
	transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
	html body .fluent_booking_app .fcal_calendar_inner :is(.fcal_spot_confirm, .fcal_btn_submit):hover,
	html body .confirmation_page .fcal_confirmation .fcal_cancellation_wrap .fcal_btn_primary:hover {
		filter: brightness(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .fluent_booking_app *,
	html body .confirmation_page * {
		transition: none !important;
	}
}

/* ==========================================================================
   5. Breite Ansicht (Plugin-Klasse fcal_on_lg, ab 900 px Kastenbreite)
   Entwurf Bild 10: Angaben 330 px | Kalender | Uhrzeiten 300 px
   ========================================================================== */

html body .fluent_booking_app .fcal_wrap .fcal_holder .fcal_calendar_inner.fcal_on_lg {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_side {
	flex: 0 0 330px;
	width: 330px;
	min-width: 0;
	max-width: none;
	padding: 32px 28px;
	border-right: 1px solid var(--eb-linie);
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_date_wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_date_wrapper .calendar-container {
	flex: 0 1 412px;
	width: 100%;
	max-width: 412px;
	padding: 28px;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_date_wrapper .calendar-container .calendar {
	gap: 8px;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_date_wrapper .calendar-container .calendar .day {
	height: 46px;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_calendar_slot_wrap {
	column-gap: 0;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_calendar_slot_wrap.is_active {
	padding-right: 300px;
}

html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_slot_picker,
html body .fluent_booking_app .fcal_calendar_inner.fcal_on_lg .fcal_slot_picker.is_active {
	width: 300px;
	padding: 28px;
	border-left: 1px solid var(--eb-linie);
}

/* ==========================================================================
   6. Bestätigung – Kasten nach dem Buchen und eigenständige Seiten
   Entwurf Bild 07/08: Symbol, große Überschrift, Unterzeile außerhalb, darunter
   der Kasten mit Was/Wann/Wer/Wo.
   ========================================================================== */

/* Nach dem Buchen ist der Widget-Kasten nur noch Hülle. */
html body .fluent_booking_app .fcal_wrap .fcal_calendar_inner:has(.fcal_booking_confirmed) {
	display: block;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

html body .fluent_booking_app .fcal_wrap .fcal_calendar_inner .fcal_booking_confirmed {
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation {
	padding: 0;
	color: var(--eb-hell);
	font-family: var(--eb-schrift);
	text-align: left;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_header {
	margin: 0;
	padding: 40px 0 28px;
	border: 0;
	text-align: left;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_header .fcal_check_holder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border: 1px solid var(--eb-knopfrand);
	border-radius: 8px;
	background: transparent;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .eddy-buchung-zustand[data-zustand="gebucht"] ~ .fcal_confirm_header .fcal_check_holder {
	border-color: var(--eb-rot);
	background: var(--eb-rot);
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_header .fcal_check_holder :is(img, svg) {
	display: block;
	width: 24px !important;
	max-width: none !important;
	height: 24px;
	margin: 0;
	stroke: var(--eb-hell);
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .eddy-buchung-zustand[data-zustand="gebucht"] ~ .fcal_confirm_header .fcal_check_holder img {
	width: 26px !important;
	height: 26px;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_header h2,
html body .eddy-buchung-status .eddy-buchung-titel {
	margin: 22px 0 0;
	color: var(--eb-hell);
	font-family: var(--eb-schrift);
	font-size: clamp(28px, 2.4vw + 18px, 48px);
	font-weight: 900;
	letter-spacing: -.029em;
	line-height: .9;
	text-transform: uppercase;
	overflow-wrap: normal;
	hyphens: none;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_header p,
html body .eddy-buchung-status .eddy-buchung-unterzeile {
	margin: 14px 0 0;
	color: var(--eb-grau);
	font-size: 15px;
	line-height: 1.6;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_header p:empty {
	display: none;
}

/* Der Kasten. */
html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body {
	margin: 0 0 40px;
	padding: 6px 20px 24px;
	background: var(--eb-karte);
	border: 1px solid var(--eb-linie);
	border-radius: 10px;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_confirm_section {
	display: block;
	padding: 16px 0;
	border-top: 1px solid var(--eb-linie);
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_confirm_section:first-child {
	border-top: 0;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_confirm_section .fcal_confirm_section_title {
	width: auto;
	margin: 0 0 6px;
	line-height: 1.5;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_confirm_section .fcal_confirm_section_title h4 {
	margin: 0;
	color: var(--eb-matt);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2.2px;
	line-height: 1.5;
	text-transform: uppercase;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_confirm_section .fcal_confirm_section_content {
	color: var(--eb-hell);
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_confirm_section .fcal_confirm_section_content :is(p, b, strong) {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_confirm_section .fcal_confirm_section_content del {
	color: var(--eb-matt);
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_confirm_section .fcal_confirm_section_content a {
	color: var(--eb-hell);
	text-decoration: underline;
	text-decoration-color: var(--eb-rot);
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body ul.fcal_listed {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Plakette „Organisator“. */
html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body span.fcal_host_badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 6px;
	border: 1px solid var(--eb-kachelrand);
	border-radius: 4px;
	color: var(--eb-matt);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.4px;
	line-height: 1.4;
	text-transform: uppercase;
	vertical-align: 2px;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body span.fcal_host_badge::before {
	content: none;
}

/* Fuß „Musst du etwas ändern? Absagen oder Verschieben“. */
html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_booking_manage {
	margin: 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--eb-linie);
	color: var(--eb-grau);
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_normal_booking_footer a,
html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_cancellation_wrap .fcal_btn_secondary {
	padding-bottom: 1px;
	border-bottom: 2px solid var(--eb-rot);
	color: var(--eb-hell);
	text-decoration: none;
	transition: color .18s var(--eb-kurve);
}

@media (hover: hover) and (pointer: fine) {
	html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_normal_booking_footer a:hover,
	html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_cancellation_wrap .fcal_btn_secondary:hover {
		color: var(--eb-rot);
	}
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_to_calendars {
	display: none;
}

/* Absageformular (Entwurf Bild 08). */
html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_confirm_body .fcal_booking_manage.fcal_cancellation_wrap {
	display: block;
	padding-top: 22px;
	color: var(--eb-hell);
	font-size: 15px;
	line-height: 1.6;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap label {
	display: block;
	margin: 0 0 10px;
	color: var(--eb-hell);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap label .required {
	margin-left: 2px;
	color: var(--eb-rot);
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap textarea {
	display: block;
	width: 100%;
	height: 88px;
	min-height: 88px;
	padding: 15px 16px;
	background: var(--eb-feld);
	border: 2px solid var(--eb-feldrand);
	border-radius: 0;
	box-shadow: none;
	color: var(--eb-hell);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	resize: vertical;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap textarea:focus {
	border-color: var(--eb-rot);
	outline: none;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap textarea::placeholder {
	color: var(--eb-umriss);
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap .fcal_help_text {
	margin: 8px 0 0;
	color: var(--eb-matt);
	font-size: 12px;
	font-style: normal;
}

/* Reihenfolge wie im Entwurf: erst der rote Knopf, darunter der Link. */
html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap .fcal_form_actions {
	display: flex;
	flex-direction: column-reverse;
	align-items: stretch;
	gap: 18px;
	margin: 24px 0 0;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap .fcal_btn.fcal_btn_primary {
	display: block;
	width: 100%;
	margin: 0;
	padding: 18px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--eb-rot);
	color: #ffffff;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 1.6px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	opacity: 1;
	cursor: pointer;
	transition: filter .18s var(--eb-kurve), transform .16s var(--eb-kurve);
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap .fcal_btn.fcal_btn_primary[disabled] {
	opacity: .6;
	cursor: progress;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap .fcal_btn.fcal_btn_secondary {
	align-self: center;
	margin: 0;
	padding: 0 0 1px;
	background: transparent;
	border-width: 0 0 2px;
	border-radius: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	opacity: 1;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap .fcal_error_message {
	gap: 0;
	margin: 14px 0 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	color: var(--eb-rot-hell);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

html body :is(.fcal_booking_confirmed, .fcal_conf_wrap) .fcal_confirmation .fcal_cancellation_wrap .fcal_error_message svg {
	display: none;
}

/* ==========================================================================
   7. Eigenständige Seiten – Grundfläche, Leiste, Kopfbereich
   ========================================================================== */

html body:has(> .confirmation_page),
html body:has(> .calendar_wrap) {
	margin: 0;
	background: var(--eb-dunkel);
	color: var(--eb-hell);
	font-family: var(--eb-schrift);
	-webkit-font-smoothing: antialiased;
}

/* Das Plugin setzt die Fläche auf 100vh mit eigenem Scrollen – dann scrollt
   nicht die Seite, sondern ein Kasten darin. Normal fließen lassen. */
html body .confirmation_page,
html body .calendar_wrap {
	height: auto;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: var(--eb-dunkel);
}

html body .confirmation_page .fcal_conf_wrap {
	max-width: none;
	margin: 0;
	padding: 0 20px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

html body .confirmation_page .fcal_conf_wrap .fcal_confirmation > :is(.fcal_confirm_header, .fcal_confirm_body) {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

html body .confirmation_page .fcal_back_btn {
	display: none;
}

/* Leiste „EddyArt Berlin ■ … Zur Website“ (Entwurf: markenleiste). */
html body .eddy-buchung-leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	min-height: 74px;
	padding: 14px clamp(20px, 4vw, 48px);
	background: rgba(12, 11, 11, .94);
	border-bottom: 2px solid rgba(243, 242, 242, .1);
	font-family: var(--eb-schrift);
}

html body .confirmation_page .fcal_conf_wrap .eddy-buchung-leiste {
	margin: 0 -20px;
}

html body .eddy-buchung-leiste a {
	text-decoration: none;
}

html body .eddy-buchung-leiste .eddy-buchung-marke {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
	color: var(--eb-hell);
}

html body .eddy-buchung-leiste .eddy-buchung-marke-name {
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 1.6px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

html body .eddy-buchung-leiste .eddy-buchung-marke-punkt {
	display: block;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	background: var(--eb-rot);
	transform: translateY(-2px);
}

html body .eddy-buchung-leiste .eddy-buchung-zurwebsite {
	flex: 0 0 auto;
	padding-bottom: 3px;
	border-bottom: 2px solid var(--eb-rot);
	color: var(--eb-hell);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.7px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .18s var(--eb-kurve);
}

@media (hover: hover) and (pointer: fine) {
	html body .eddy-buchung-leiste .eddy-buchung-zurwebsite:hover {
		color: var(--eb-rot);
	}
}

/* Umbuchungsseite: Kopfbereich und Widget. */
html body .calendar_wrap .fcal_rescheduling_wrap {
	display: none;
}

/* Werbezeile der kostenlosen Plugin-Fassung ("Powered By FluentBooking").
   War hier zwischenzeitlich per CSS ausgeblendet - nicht beauftragt und
   nicht Teil des Entwurfs. Eddy, 13.09.2026: "nein, vorerst nicht per
   eigenem Code verstecken." Zeile bleibt als Beleg stehen, nicht wieder
   ohne neue Freigabe einbauen. */

html body .calendar_wrap .eddy-buchung-status,
html body .calendar_wrap .fluent_booking_app {
	box-sizing: border-box;
	max-width: 1084px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

html body .calendar_wrap .eddy-buchung-status {
	padding-top: 40px;
	padding-bottom: 28px;
}

html body .calendar_wrap .eddy-buchung-status .eddy-buchung-symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border: 1px solid var(--eb-knopfrand);
	border-radius: 8px;
}

html body .calendar_wrap .eddy-buchung-status .eddy-buchung-symbol svg {
	display: block;
	width: 24px;
	height: 24px;
}

html body .calendar_wrap .fluent_booking_app {
	padding-top: 0 !important;
	padding-bottom: 40px;
}

html body .calendar_wrap .fluent_booking_app.fcal_loading {
	min-height: 60vh;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--eb-matt);
}

html body .calendar_wrap .fluent_booking_app.fcal_loading h3 {
	color: var(--eb-matt);
	font-size: 14px;
}

/* Beim Umbuchen steht der bisherige Termin oben – ohne Beschreibung. */
html body .calendar_wrap .eddy-buchung-status ~ .fluent_booking_app .fcal_calendar_inner .fcal_side .fcal_slot_description {
	display: none;
}

/* ==========================================================================
   8. Sehr schmale Geräte (Entwurf 320 px: Innenabstand 16 statt 20)
   ========================================================================== */

@media (max-width: 340px) {
	html body .fluent_booking_app .fcal_calendar_inner .fcal_side {
		padding: 22px 16px;
	}

	html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container,
	html body .fluent_booking_app .fcal_calendar_inner .fcal_slot_picker,
	html body .fluent_booking_app .fcal_calendar_inner.fcal_on_xs.fcal_day_selected .fcal_slot_picker.is_active {
		padding: 16px;
	}

	html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .fcal_date_event_details {
		padding: 20px 16px 22px;
	}

	html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-header .calendar-month-year :is(h2, h4) {
		font-size: 12px;
		letter-spacing: 1px;
	}

	html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar {
		gap: 3px;
	}

	html body .fluent_booking_app .fcal_calendar_inner .fcal_date_wrapper .calendar-container .calendar .day {
		height: 40px;
	}

	html body .eddy-buchung-leiste .eddy-buchung-marke-name {
		font-size: 12px;
		letter-spacing: 1px;
	}

	html body .eddy-buchung-leiste .eddy-buchung-zurwebsite {
		font-size: 11px;
		letter-spacing: 1.2px;
	}
}

/* ===========================================================================
   Ortswahl vor dem Kalender (inc/buchung-anpassungen.php, Abschnitt 6)

   Eddy, 23.09.2026: Die Wahl zwischen Studio und Video stand am Ende im
   Formular. Jetzt steht sie davor. Die Kacheln sind eigenes Markup - deshalb
   ist hier endlich die zweite, kleinere Zeile unter dem Titel moeglich, die
   im Plugin nicht ging (siehe Kommentar weiter oben bei .fcal_radio_group:
   das Plugin schreibt den Kacheltext als reinen Textknoten).

   Aufbau und Masse bewusst gleich wie die Kacheln im Formular: Radius 8,
   Rand 2px, Mindesthoehe 76, roter Rand bei Auswahl.
   =========================================================================== */

html body .eddy-ortswahl {
	max-width: 620px;
	margin: 0 auto;
	padding: 28px 20px 32px;
}

html body .eddy-ortswahl .eddy-ortswahl-frage {
	margin: 0 0 18px;
	color: var(--eb-hell);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

html body .eddy-ortswahl .eddy-ortswahl-kacheln {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

html body .eddy-ortswahl .eddy-ortswahl-kachel {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-height: 76px;
	padding: 16px 18px;
	border: 2px solid var(--eb-feldrand);
	border-radius: 8px;
	background: transparent;
	color: var(--eb-hell);
	text-decoration: none;
	transition: border-color .18s var(--eb-kurve), background-color .18s var(--eb-kurve);
}

@media (hover: hover) and (pointer: fine) {
	html body .eddy-ortswahl .eddy-ortswahl-kachel:hover {
		border-color: var(--eb-rot);
		background: var(--eb-rothauch);
	}
}

html body .eddy-ortswahl .eddy-ortswahl-kachel:focus-visible {
	outline: 2px solid var(--eb-rot);
	outline-offset: 2px;
}

/* Runder Knopf vorne - wie im Formular, wo er jede Kachel anfuehrt. */
html body .eddy-ortswahl .eddy-ortswahl-symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--eb-rot);
}

html body .eddy-ortswahl .eddy-ortswahl-symbol svg {
	width: 22px;
	height: 22px;
	stroke: #ffffff;
}

html body .eddy-ortswahl .eddy-ortswahl-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

html body .eddy-ortswahl .eddy-ortswahl-titel {
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

html body .eddy-ortswahl .eddy-ortswahl-zeile {
	color: var(--eb-matt);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

html body .eddy-ortswahl .eddy-ortswahl-erklaert {
	color: var(--eb-grau);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

html body .eddy-ortswahl .eddy-ortswahl-fuss {
	margin: 18px 0 0;
	color: var(--eb-grau);
	font-size: 13px;
	line-height: 1.45;
}

/* "Aendern" hinter dem gewaehlten Ort im Kasten oben. */
html body .eddy-buchung-ortszeile .eddy-buchung-ortwechsel {
	margin-left: 8px;
	color: var(--eb-rot);
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

/* Steht der Ort schon fest, ist die Auswahl im Formular nur noch eine
   Bestaetigung - sie wird ausgeblendet. Die eine verbliebene Kachel bleibt
   im Markup und traegt weiter den Wert, den das Plugin beim Abschicken
   verlangt (location_config[driver]); sie ist lediglich unsichtbar. */
html body.eddy-ort-gewaehlt .fluent_booking_app .fcal_booking_form_wrap .fcal_booking_form .fcal_form_item:has(.fcal_input_location_wrap) {
	display: none;
}

@media (max-width: 599px) {
	html body .eddy-ortswahl {
		padding: 20px 14px 24px;
	}

	html body .eddy-ortswahl .eddy-ortswahl-kachel {
		gap: 12px;
		padding: 14px 14px;
	}

	html body .eddy-ortswahl .eddy-ortswahl-symbol {
		width: 38px;
		height: 38px;
	}
}