/*
 * Ferdinand Bienek – Komponenten-Styles (Frontend + Editor-iframe).
 * Erstellt von Leni Rosenbauer
 *
 * Alle Werte kommen aus theme.json (var(--wp--preset--…) / var(--wp--custom--…)).
 * Logische Eigenschaften (inline/block) für RTL-Tauglichkeit.
 */

/* ---------- Kurzschreibweisen ---------- */
:root {
	--fb-ink: var(--wp--preset--color--text);
	--fb-muted: var(--wp--preset--color--text-muted);
	--fb-paper: var(--wp--preset--color--surface);
	--fb-paper-alt: var(--wp--preset--color--surface-alt);
	--fb-line: var(--wp--preset--color--border);
	--fb-line-strong: var(--wp--preset--color--border-strong);
	--fb-brand: var(--wp--preset--color--brand-primary);
	--fb-brand-dark: var(--wp--preset--color--brand-primary-dark);
	--fb-on-brand: var(--wp--preset--color--on-brand-primary);
	--fb-signal: var(--wp--preset--color--signal);
	--fb-radius: var(--wp--custom--radius, 10px);
	--fb-radius-field: var(--wp--custom--radius-field, 8px);
	--fb-radius-pill: var(--wp--custom--radius-pill, 999px);
	--fb-radius-card: var(--wp--preset--border-radius--l, 18px);
	--fb-raised: var(--wp--custom--surface-raised, var(--fb-paper));
	--fb-glow: var(--wp--custom--glow, var(--fb-brand-dark));
	--fb-dur-fast: var(--wp--custom--motion--dur-fast, 150ms);
	--fb-dur-base: var(--wp--custom--motion--dur-base, 220ms);
	--fb-dur-slow: var(--wp--custom--motion--dur-slow, 420ms);
	--fb-ease-out: var(--wp--custom--motion--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
	--fb-ease-in: var(--wp--custom--motion--ease-in, cubic-bezier(0.55, 0, 1, 0.45));
	--fb-header-h: var(--wp--custom--header-height-mobile, 64px);
	--fb-sticky-h: var(--wp--custom--sticky-cta-height, 72px);
	--fb-gutter: var(--wp--style--root--padding-left, clamp(20px, 5vw, 64px));
}

@media (min-width: 782px) {
	:root {
		--fb-header-h: var(--wp--custom--header-height, 76px);
	}
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-block-start: calc(var(--fb-header-h) + var(--wp-admin--admin-bar--height, 0px) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	caret-color: var(--fb-ink);
	accent-color: var(--fb-ink);
}

::selection {
	background: var(--fb-line);
	color: var(--fb-ink);
}

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
	scroll-margin-block-start: calc(var(--fb-header-h) + 16px);
}

p, li, dd, figcaption {
	text-wrap: pretty;
}

/* Deutsche Komposita brechen auf schmalen Spalten sauber um. */
main p,
main li,
main summary {
	hyphens: auto;
	overflow-wrap: break-word;
}

img {
	max-width: 100%;
	height: auto;
}

/* Abschnitte stoßen nahtlos aneinander (kein Spalt zum Footer). */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

main.wp-block-group {
	margin-block: 0;
}

main > .alignfull:last-child {
	margin-block-end: 0;
}

/* Eine gemeinsame linke Kante (6.28 Regel 7): Normale Blöcke in
   „eingeschränkten“ Containern beginnen an der Kante des breiten Rasters,
   statt mittig zu stehen. Gilt automatisch auch für neue Seiten. */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide):not(.aligncenter):not(.has-text-align-center):not(.is-content-justification-center)) {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size, 1680px)) / 2)) !important;
	margin-inline-end: auto !important;
}

/* Fokus: nie entfernen, sondern gestalten. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--fb-ink);
	outline-offset: 3px;
	border-radius: var(--fb-radius-field);
}

:where(.wp-element-button, .wp-block-button__link):focus-visible {
	border-radius: var(--fb-radius-pill);
}

.has-contrast-background-color :where(a, button, summary):focus-visible,
.fb-footer :where(a, button):focus-visible {
	outline-color: var(--fb-paper);
}

/* Links */
a {
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: color var(--fb-dur-fast) var(--fb-ease-out), text-decoration-color var(--fb-dur-fast) var(--fb-ease-out), text-decoration-thickness var(--fb-dur-fast) var(--fb-ease-out);
}

a:hover {
	text-decoration-thickness: 2px;
	text-decoration-color: currentColor;
}

/* Zahlen in Preisen und Tabellen ruhig ausrichten. */
table,
.fb-price {
	font-variant-numeric: tabular-nums lining-nums;
}

/* Scrollbar im Papierton */
html {
	scrollbar-color: var(--fb-line-strong) var(--fb-paper);
}

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--fb-dur-fast) var(--fb-ease-out),
		color var(--fb-dur-fast) var(--fb-ease-out),
		border-color var(--fb-dur-fast) var(--fb-ease-out),
		box-shadow var(--fb-dur-base) var(--fb-ease-out),
		transform var(--fb-dur-fast) var(--fb-ease-out);
	min-block-size: 48px;
	border-radius: var(--fb-radius-pill);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	text-align: center;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--wp--preset--shadow--sm);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: 60ms;
}

.wp-block-button__link[aria-disabled="true"],
.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"] {
	background-color: var(--fb-paper-alt);
	border-color: var(--fb-line);
	color: var(--fb-muted);
	cursor: not-allowed;
	transform: none;
}

/* Kontur-Button (Core-Stil „Kontur“) */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: var(--fb-ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--fb-ink);
	border-color: var(--fb-ink);
	color: var(--fb-paper);
}

.has-contrast-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.has-text-color.has-on-contrast-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--fb-paper);
}

.has-contrast-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--fb-paper);
	border-color: var(--fb-paper);
	color: var(--fb-ink);
}

/* Textlink mit Pfeil */
.wp-block-button.is-style-text-link > .wp-block-button__link {
	background: none;
	border: 0;
	padding: 0.25em 0;
	min-block-size: 44px;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.wp-block-button.is-style-text-link > .wp-block-button__link::after {
	content: "";
	inline-size: 1.1em;
	block-size: 1.1em;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
	transition: transform var(--fb-dur-fast) var(--fb-ease-out);
}

.wp-block-button.is-style-text-link > .wp-block-button__link:hover {
	transform: none;
	box-shadow: none;
	text-decoration-thickness: 2px;
}

.wp-block-button.is-style-text-link > .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

[dir="rtl"] .wp-block-button.is-style-text-link > .wp-block-button__link::after {
	transform: scaleX(-1);
}

/* ---------- Kopfbereich ---------- */
/* Sticky sitzt auf dem Template-Part-Wrapper, damit er über die ganze Seite greift. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.fb-header {
	background-color: var(--fb-paper);
	min-block-size: var(--fb-header-h);
	transition: box-shadow var(--fb-dur-base) var(--fb-ease-out), border-color var(--fb-dur-base) var(--fb-ease-out);
	border-block-end: 1px solid transparent;
}

.fb-header.is-scrolled {
	border-block-end-color: var(--fb-line);
	box-shadow: 0 10px 30px -18px rgb(30 28 26 / 0.35);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		inset-block-start: 0;
	}
}

.fb-header .wp-block-site-title a {
	white-space: nowrap;
}

.fb-header .wp-block-site-logo img {
	max-block-size: 44px;
	inline-size: auto;
}

.fb-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.4em;
}

/* Navigations-Unterstreichung: wächst von links (nur transform). */
@media (min-width: 600px) {
	.fb-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		block-size: 1.5px;
		border-radius: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--fb-dur-base) var(--fb-ease-out);
	}

	.fb-header .wp-block-navigation-item__content:hover::after,
	.fb-header .wp-block-navigation-item__content[aria-current="page"]::after,
	.fb-header .current-menu-item > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}
}

.fb-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--fb-paper);
	color: var(--fb-ink);
	padding: var(--fb-gutter);
}

.fb-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--lg);
}

.fb-header__actions {
	flex-shrink: 0;
}

@media (max-width: 781px) {
	.fb-header__contact,
	.fb-header__cta {
		display: none !important;
	}
}

@media (max-width: 1100px) {
	.fb-header__contact {
		display: none !important;
	}
}

/* Platz für den späteren Sprachumschalter (leer = unsichtbar). */
.fb-lang-switch:empty {
	display: none;
}

/* ---------- Brotkrumen ---------- */
.fb-breadcrumbs {
	padding-block: var(--wp--preset--spacing--m) 0;
}

.wp-block-breadcrumbs ol {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	min-inline-size: 0;
}

.wp-block-breadcrumbs li {
	white-space: nowrap;
}

.wp-block-breadcrumbs li:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	min-inline-size: 0;
}

.wp-block-breadcrumbs a {
	text-decoration: none;
}

.wp-block-breadcrumbs a:hover {
	text-decoration: underline;
}

/* ---------- Hero ---------- */
.fb-hero {
	position: relative;
	overflow: hidden;
	padding-inline-start: max(var(--fb-gutter), calc((100% - var(--wp--style--global--wide-size, 1680px)) / 2)) !important;
	padding-inline-end: 0 !important;
}

.fb-hero > .wp-block-columns {
	margin: 0;
	gap: 0;
	align-items: stretch !important;
}

.fb-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--wp--preset--spacing--xl);
	padding-inline-end: var(--wp--preset--spacing--xl);
}

.fb-hero__content h1 {
	max-inline-size: 11ch;
}

.fb-hero__content .is-style-lead {
	max-inline-size: 34ch;
}

.fb-hero__panel {
	position: relative;
	/* Lampenlicht: tonaler Verlauf in einer Farbe, hinter der Bildtafel am hellsten. */
	background-image: radial-gradient(ellipse 70% 60% at 32% 50%, var(--fb-glow) 0%, transparent 72%);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-block-size: clamp(460px, calc(100svh - var(--fb-header-h) - 40px), 860px);
	padding: var(--wp--preset--spacing--xl) var(--fb-gutter);
	isolation: isolate;
}

.fb-hero__panel .is-style-monogram {
	inset-inline-end: -0.06em;
	inset-block-start: 50%;
	translate: 0 -54%;
}

.fb-hero__panel .wp-block-image {
	position: relative;
	z-index: 1;
	inline-size: min(76%, 440px);
	margin: 0;
	margin-inline-start: calc(-1 * clamp(48px, 7vw, 140px));
}

@media (max-width: 781px) {
	.fb-hero {
		padding-inline-start: 0 !important;
	}

	.fb-hero__content {
		padding-inline: var(--fb-gutter);
		padding-block: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xl);
	}

	.fb-hero__panel {
		min-block-size: 0;
		padding-block: var(--wp--preset--spacing--xl);
		justify-content: center;
	}

	.fb-hero__panel .wp-block-image {
		margin-inline-start: 0;
		inline-size: min(78%, 360px);
	}
}

/* Signatur-Moment: die Bildtafel „landet“ wie eine Karte auf dem Tisch. */
@media (prefers-reduced-motion: no-preference) {
	.fb-hero__panel .wp-block-image {
		animation: fb-card-land var(--fb-dur-slow) var(--fb-ease-out) 80ms both;
	}

	.fb-hero__panel .is-style-monogram {
		animation: fb-monogram-settle 900ms var(--fb-ease-out) both;
	}
}

@keyframes fb-card-land {
	from {
		transform: translateY(10px) rotate(-1.2deg);
	}
	to {
		transform: none;
	}
}

@keyframes fb-monogram-settle {
	from {
		transform: translateX(3%);
	}
	to {
		transform: none;
	}
}

/* ---------- Monogramm (Absatz-Stil) ---------- */
p.is-style-monogram {
	position: absolute;
	z-index: 0;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--monogram);
	font-weight: 400;
	line-height: 0.8;
	letter-spacing: -0.06em;
	white-space: nowrap;
	color: color-mix(in srgb, currentColor 14%, transparent);
	pointer-events: none;
	user-select: none;
}

.editor-styles-wrapper p.is-style-monogram {
	position: relative;
}

/* ---------- Bilder ---------- */
/* Bildtafel als Abzug im Bogenrahmen – die Signatur der Seite. */
.wp-block-image.is-style-plate img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border: clamp(10px, 1.6vw, 18px) solid var(--fb-raised);
	border-radius: 50% 50% var(--fb-radius) var(--fb-radius) / 34% 34% var(--fb-radius) var(--fb-radius);
	box-shadow: var(--wp--preset--shadow--lg);
	background: var(--fb-raised);
}

.wp-block-image.is-style-portrait img,
.wp-block-media-text .is-style-portrait img,
.fb-portrait img {
	object-fit: cover;
	object-position: 50% 18%;
}

.fb-portrait .wp-block-media-text__media img {
	aspect-ratio: 4 / 5;
	inline-size: 100%;
}

.wp-block-image.is-style-portrait img {
	aspect-ratio: 4 / 5;
	inline-size: 100%;
}

/* Freistehende Bilder im Inhalt: weiche Ecken. Vollflächige Cover bleiben eckig (6.28 Regel 5). */
:where(.wp-block-post-content, .fb-invitation, .fb-post-card, .wp-block-media-text) .wp-block-image:not(.alignfull):not(.is-style-plate) img,
.wp-block-media-text__media img {
	border-radius: var(--fb-radius);
}

.wp-block-image figcaption {
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* Vollbreite Cover: Inhalt bekommt denselben Seitenrand wie alles andere (6.28 Regel 12). */
.wp-block-cover.alignfull {
	padding-inline: var(--fb-gutter);
}

/* Galerie im Kontaktbogen-Stil */
.wp-block-gallery.is-style-contact-sheet {
	--wp--style--unstable-gallery-gap: 6px;
	gap: 6px !important;
}

.wp-block-gallery.is-style-contact-sheet.is-cropped .wp-block-image img {
	aspect-ratio: 4 / 5;
}

.wp-block-gallery .wp-block-image img {
	border-radius: var(--wp--preset--border-radius--s, 4px);
	transition: transform var(--fb-dur-base) var(--fb-ease-out);
}

/* ---------- Karten ---------- */
.wp-block-group.is-style-card {
	display: flex;
	flex-direction: column;
	background-color: var(--fb-raised);
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius-card);
	padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
	block-size: 100%;
}

.wp-block-group.is-style-card > .wp-block-buttons:last-child {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--s);
}

/* Antwortkarte: helle Fläche mit Akzentkante oben (Signaturfarbe). */
.wp-block-group.is-style-reply-card {
	position: relative;
	background-color: var(--fb-raised);
	color: var(--fb-ink);
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius-card);
	padding: clamp(28px, 4vw, 56px);
	box-shadow: var(--wp--preset--shadow--lg);
}

.wp-block-group.is-style-reply-card a:not(.wp-element-button) {
	color: var(--fb-ink);
}

/* Menükarte: Doppelrahmen wie gedruckte Papeterie, auf hellerem Karton mit weichen Ecken. */
.wp-block-group.is-style-menu-card {
	background-color: var(--fb-raised);
	border: 1px solid var(--fb-line);
	box-shadow: inset 0 0 0 7px var(--fb-raised), inset 0 0 0 8px var(--fb-line), var(--wp--preset--shadow--sm);
	border-radius: var(--fb-radius-card);
	padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 64px);
}

.wp-block-group.is-style-hairline {
	border-block-start: 1px solid var(--fb-line);
	padding-block-start: var(--wp--preset--spacing--m);
}

/* ---------- Absatz-Stile ---------- */
p.is-style-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	max-inline-size: 60ch;
}

p.is-style-small-caps {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fb-muted);
	line-height: 1.5;
}

.has-contrast-background-color p.is-style-small-caps,
.wp-block-cover p.is-style-small-caps {
	color: inherit;
	opacity: 1;
}

/* Platzhalter sind sichtbar anders gesetzt als echte Inhalte. */
p.is-style-placeholder-note {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--fb-muted);
	border: 1px dashed var(--fb-line-strong);
	border-radius: var(--fb-radius-field);
	padding: 0.75em 1em;
	background-color: var(--fb-paper-alt);
	max-inline-size: 70ch;
}

.has-contrast-background-color p.is-style-placeholder-note {
	background-color: transparent;
	color: inherit;
	border-color: currentColor;
}

/* ---------- Listen ---------- */
ul.is-style-checklist,
ul.is-style-plain {
	list-style: none;
	padding-inline-start: 0;
}

ul.is-style-checklist li {
	position: relative;
	padding-inline-start: 1.9em;
}

ul.is-style-checklist li + li {
	margin-block-start: 0.6em;
}

ul.is-style-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.3em;
	inline-size: 1.1em;
	block-size: 1.1em;
	background-color: currentColor;
	-webkit-mask: url("../icons/check.svg") center / contain no-repeat;
	mask: url("../icons/check.svg") center / contain no-repeat;
}

/* ---------- FAQ (core/details) ---------- */
.wp-block-details summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--m);
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	line-height: 1.35;
	min-block-size: 44px;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 34px;
	block-size: 34px;
	margin-block-start: -0.1em;
	border: 1px solid var(--fb-line-strong);
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
	transition: transform var(--fb-dur-base) var(--fb-ease-out), background-color var(--fb-dur-base) var(--fb-ease-out), color var(--fb-dur-base) var(--fb-ease-out), border-color var(--fb-dur-base) var(--fb-ease-out);
}

.wp-block-details summary:hover::after {
	background-color: var(--fb-paper-alt);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
	background-color: var(--fb-ink);
	border-color: var(--fb-ink);
	color: var(--fb-paper);
}

.wp-block-details summary:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.wp-block-details > :not(summary) {
	margin-block-start: var(--wp--preset--spacing--s);
	max-inline-size: 68ch;
	color: var(--fb-muted);
}

.wp-block-details.is-style-faq:first-of-type,
.fb-faq-list > .wp-block-details:first-child {
	border-block-start: 1px solid var(--fb-line);
}

/* ---------- Preisliste (Tabelle) ---------- */
.wp-block-table.is-style-price-list table {
	border-collapse: collapse;
	inline-size: 100%;
}

.wp-block-table.is-style-price-list :where(td, th) {
	border: 0;
	border-block-end: 1px solid var(--fb-line);
	padding: 0.9em 0;
	vertical-align: baseline;
	text-align: start;
}

.wp-block-table.is-style-price-list :where(td, th):last-child {
	text-align: end;
	white-space: nowrap;
	padding-inline-start: var(--wp--preset--spacing--m);
}

.wp-block-table.is-style-price-list thead {
	border: 0;
}

.wp-block-table.is-style-price-list th {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fb-muted);
}

/* ---------- Menükarte / Pakete ---------- */
.fb-package + .fb-package {
	border-block-start: 1px solid var(--fb-line);
	padding-block-start: var(--wp--preset--spacing--l);
}

.fb-price {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
	white-space: nowrap;
}

/* ---------- Leistungs-Kacheln (Cover) ---------- */
.fb-service-tile {
	min-block-size: clamp(380px, 46vw, 640px);
}

.fb-service-tile .wp-block-cover__inner-container {
	align-self: flex-end;
}

/* ---------- Ablauf / Programm ---------- */
.fb-step {
	border-block-start: 1px solid var(--fb-line);
	padding-block: var(--wp--preset--spacing--m);
}

.fb-step:last-child {
	border-block-end: 1px solid var(--fb-line);
}

.fb-step__time {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1;
	min-inline-size: 3ch;
}

@media (min-width: 782px) {
	.fb-sticky-heading {
		position: sticky;
		inset-block-start: calc(var(--fb-header-h) + var(--wp--preset--spacing--l));
		align-self: flex-start;
	}
}

/* ---------- Abfrage-Karten (Journal, Reportagen) ---------- */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}

.fb-post-card {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	border-block-start: 1px solid var(--fb-line);
	padding-block-start: var(--wp--preset--spacing--s);
}

.fb-post-card .wp-block-post-featured-image {
	margin: 0 0 var(--wp--preset--spacing--s);
	overflow: hidden;
	border-radius: var(--fb-radius);
}

.fb-post-card .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	inline-size: 100%;
	transition: transform var(--fb-dur-slow) var(--fb-ease-out);
}

.fb-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

.fb-post-card .wp-block-post-title a {
	text-decoration: none;
}

.fb-post-card .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.fb-post-card .wp-block-read-more {
	margin-block-start: auto;
}

/* ---------- Formular-Platzhalter ---------- */
.fb-form {
	display: grid;
	gap: var(--wp--preset--spacing--m);
}

.fb-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--m);
}

@media (min-width: 600px) {
	.fb-form__row--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.fb-form label {
	display: block;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.04em;
	margin-block-end: 0.4em;
}

.fb-form .fb-required {
	color: var(--fb-signal);
}

.fb-form :where(input:not([type="checkbox"]), select, textarea) {
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0.7em 0.9em;
	font: inherit;
	color: var(--fb-ink);
	background-color: var(--fb-raised);
	border: 1px solid var(--fb-line-strong);
	border-radius: var(--fb-radius-field);
	transition: border-color var(--fb-dur-fast) var(--fb-ease-out), box-shadow var(--fb-dur-fast) var(--fb-ease-out);
}

.fb-form textarea {
	min-block-size: 160px;
	resize: vertical;
}

.fb-form :where(input, select, textarea):hover {
	border-color: var(--fb-ink);
}

.fb-form :where(input, select, textarea):focus-visible {
	outline: none;
	border-color: var(--fb-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-ink) 18%, transparent);
}

.fb-form :where(input, select, textarea):disabled {
	background-color: var(--fb-paper-alt);
	color: var(--fb-muted);
	cursor: not-allowed;
}

.fb-form :where(input, textarea):user-invalid {
	border-color: var(--fb-signal);
}

.fb-form__consent {
	display: flex;
	gap: 0.75em;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--sm);
}

.fb-form__consent input {
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 0.2em;
	flex: 0 0 auto;
}

.fb-form__consent label {
	font-weight: 400;
	letter-spacing: 0;
	margin: 0;
}

.fb-form__note {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--fb-muted);
	margin: 0;
}

.fb-form__status:empty {
	display: none;
}

/* ---------- Buchungs-Platzhalter ---------- */
.fb-slots .wp-block-button__link {
	min-inline-size: 7.5em;
	padding: 0.7em 1em;
	letter-spacing: 0.06em;
}

.fb-slots .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--fb-line-strong);
}

/* ---------- Karten-Platzhalter (Zwei-Klick) ---------- */
.fb-map-consent {
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--fb-paper-alt);
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius-card);
}

.fb-map-consent > * {
	max-inline-size: 46ch;
}

.fb-map-consent__note {
	display: none;
}

.fb-map-consent.is-active .fb-map-consent__note {
	display: block;
}

@media (max-width: 600px) {
	.fb-map-consent {
		aspect-ratio: 4 / 5;
	}
}

/* ---------- Icon-Zeilen (Kontakt, Anfahrt) ---------- */
.fb-icon-row {
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}

.fb-icon-row .wp-block-icon {
	flex: 0 0 auto;
	margin-block-start: 0.15em;
}

.fb-icon-row .wp-block-icon svg {
	inline-size: 22px;
	block-size: 22px;
}

/* ---------- Footer ---------- */
.fb-footer a:not(.wp-element-button) {
	text-decoration: none;
}

.fb-footer a:not(.wp-element-button):hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.fb-footer .wp-block-navigation {
	letter-spacing: 0.04em;
	text-transform: none;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--base);
}

.fb-footer .wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.3em;
}

.fb-footer__bottom {
	border-block-start: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.fb-footer .has-text-muted-color {
	color: color-mix(in srgb, currentColor 72%, transparent) !important;
}

/* ---------- Mobile Aktionsleiste ---------- */
.fb-sticky-cta {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 60;
	padding: 10px var(--fb-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
	background-color: var(--fb-paper);
	border-block-start: 1px solid var(--fb-line);
	box-shadow: 0 -8px 24px rgb(30 28 26 / 0.08);
	transition: transform var(--fb-dur-base) var(--fb-ease-out), visibility 0s linear 0s;
}

.fb-sticky-cta .wp-block-buttons {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.fb-sticky-cta .wp-block-button,
.fb-sticky-cta .wp-block-button__link {
	inline-size: 100%;
}

.fb-sticky-cta .wp-block-button__link {
	padding-inline: 0.75em;
	letter-spacing: 0.08em;
}

.fb-sticky-cta.is-hidden,
.fb-cookie-open .fb-sticky-cta {
	transform: translateY(110%);
	visibility: hidden;
	transition: transform var(--fb-dur-base) var(--fb-ease-in), visibility 0s linear var(--fb-dur-base);
}

@media (min-width: 768px) {
	.fb-sticky-cta {
		display: none !important;
	}
}

@media (max-width: 767px) {
	body:has(.fb-sticky-cta) .fb-footer {
		padding-block-end: calc(var(--fb-sticky-h) + env(safe-area-inset-bottom, 0px) + var(--wp--preset--spacing--m)) !important;
	}
}

/* ---------- Cookie-Hinweis (Platzhalter) ---------- */
.fb-cookie {
	position: fixed;
	inset-inline: var(--fb-gutter);
	inset-block-end: var(--fb-gutter);
	z-index: 70;
	max-inline-size: 560px;
	margin: 0 !important;
	background-color: var(--fb-paper);
	color: var(--fb-ink);
	border: 1px solid var(--fb-line);
	border-radius: var(--fb-radius-card);
	box-shadow: var(--wp--preset--shadow--lg);
}

.fb-cookie a:not(.wp-element-button) {
	color: var(--fb-ink);
	text-decoration: underline;
}

/* Banner sitzt im dunklen Footer – Kontur-Buttons wieder auf Tinte stellen. */
.fb-cookie .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	color: var(--fb-ink);
}

.fb-cookie .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover {
	background-color: var(--fb-ink);
	border-color: var(--fb-ink);
	color: var(--fb-paper);
}

.fb-cookie:not(.is-visible) {
	display: none !important;
}

.editor-styles-wrapper .fb-cookie,
.block-editor-block-list__layout .fb-cookie {
	position: relative;
	display: block !important;
	inset: auto;
}

@media (prefers-reduced-motion: no-preference) {
	.fb-cookie.is-visible {
		animation: fb-rise var(--fb-dur-base) var(--fb-ease-out) both;
	}
}

@keyframes fb-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Zitat ---------- */
.wp-block-quote {
	border-inline-start: 1px solid var(--fb-line-strong);
}

.wp-block-quote cite {
	color: var(--fb-muted);
}

/* ---------- Suche ---------- */
.wp-block-search__input {
	min-block-size: 48px;
	border: 1px solid var(--fb-line-strong);
	border-radius: var(--fb-radius-pill);
	padding-inline: 1.1em;
	font: inherit;
	background: var(--fb-raised);
	color: var(--fb-ink);
}

.wp-block-search__input:focus-visible {
	outline: 2px solid var(--fb-ink);
	outline-offset: 2px;
}

.wp-block-search__inside-wrapper {
	gap: 8px;
}

/* ---------- Paginierung ---------- */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	text-decoration: none;
	min-inline-size: 44px;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-query-pagination .page-numbers.current {
	border-block-end: 1px solid currentColor;
}

/* ---------- Widgets ---------- */
.widget + .widget {
	margin-block-start: var(--wp--preset--spacing--m);
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- Druck ---------- */
@media print {
	.fb-header,
	.fb-sticky-cta,
	.fb-cookie,
	.fb-breadcrumbs {
		display: none !important;
	}
}

/* ---------- Seitenende ---------- */
/* Luft unter Textseiten; endet die Seite mit einer vollbreiten Sektion, schließt der Footer nahtlos an. */
.wp-block-post-content::after {
	content: "";
	display: block;
	block-size: var(--wp--preset--spacing--2-xl);
}

.wp-block-post-content:has(> .alignfull:last-child)::after,
.wp-block-post-content:has(> .wp-block-cover:last-child)::after {
	display: none;
}

@media (max-width: 600px) {
	.fb-package {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--xs) !important;
	}

	.fb-package > .fb-price {
		order: 2;
		inline-size: 100%;
	}
}

/* Media & Text: Inhalt bündig an der gemeinsamen Kante, Abstand nur zur Bildseite. */
.wp-block-media-text > .wp-block-media-text__content {
	padding-inline: var(--wp--preset--spacing--xl) 0;
}

.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
	padding-inline: 0 var(--wp--preset--spacing--xl);
}

@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
		padding-inline: 0;
		padding-block-start: var(--wp--preset--spacing--l);
	}
}

/* ---------- Review-Runde 1 ---------- */
/* Monogramm: angeschnittenes F-B-Paar, Versalhöhe ≈ 70 vh, benannte Graustufe. */
.fb-hero__panel p.is-style-monogram {
	font-size: clamp(14rem, 98svh, 60rem);
	inset-inline-start: 30%;
	inset-inline-end: auto;
	color: var(--wp--custom--zone--3);
	letter-spacing: -0.08em;
}

@media (max-width: 781px) {
	.fb-hero__panel {
		position: static;
	}

	.fb-hero__panel p.is-style-monogram {
		inset-block-start: 0;
		inset-inline-start: 52%;
		translate: 0 0;
		font-size: clamp(16rem, 96vw, 28rem);
		color: var(--fb-line);
		z-index: 0;
	}

	.fb-hero__content {
		position: relative;
		z-index: 1;
	}
}

/* Inline-Platzhalter sind sofort als solche erkennbar. */
mark.fb-ph {
	background: none;
	color: var(--fb-muted);
	font-style: normal;
	text-decoration: underline dashed var(--fb-line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.has-contrast-background-color mark.fb-ph {
	color: inherit;
}

/* Antwortkarte der Suite: Doppelrahmen wie die Menükarte, Ausfüll-Linien. */
.wp-block-group.is-style-reply-card {
	background-color: var(--fb-raised);
	border: 1px solid var(--fb-line);
	box-shadow: inset 0 0 0 7px var(--fb-raised), inset 0 0 0 8px var(--fb-line), var(--wp--preset--shadow--md);
	border-radius: var(--fb-radius-card);
	max-inline-size: 620px;
}

.fb-fill-line {
	display: flex;
	align-items: baseline;
	gap: 0.75em;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-inline: 0;
	padding-block: 0.35em;
}

.fb-fill-line::after {
	content: "";
	flex: 1;
	border-block-end: 1px solid var(--fb-line-strong);
	transform: translateY(-0.2em);
}

/* Einladungskarten (Leistungen) */
.fb-invitation {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

.fb-invitation .wp-block-image {
	margin: 0;
}

.fb-invitation > .wp-block-buttons {
	margin-block-start: auto;
}

/* Formular-Checkbox im Tintenton */
.fb-form input[type="checkbox"] {
	accent-color: var(--fb-ink);
	inline-size: 20px;
	block-size: 20px;
	border: 1px solid var(--fb-line-strong);
}

.fb-form__hint {
	font-weight: 400;
	letter-spacing: 0;
	color: var(--fb-muted);
}

/* ---------- Kontrastflächen (dunkelgrau, heller Text) ---------- */
/* Greift für jede Gruppe mit Hintergrund „Kontrastfläche“ – auch auf neuen Seiten. */
.has-contrast-background-color {
	--fb-line: color-mix(in srgb, currentColor 22%, transparent);
	--fb-line-strong: color-mix(in srgb, currentColor 55%, transparent);
	--fb-muted: color-mix(in srgb, currentColor 74%, transparent);
}

.has-contrast-background-color :where(h1, h2, h3, h4, h5, h6),
.has-contrast-background-color a:where(:not(.wp-element-button)) {
	color: inherit;
}

.has-contrast-background-color .has-text-muted-color {
	color: var(--fb-muted) !important;
}

.has-contrast-background-color ::selection {
	background: var(--wp--preset--color--on-contrast);
	color: var(--wp--preset--color--contrast);
}

/* Primärbutton kehrt sich um: helle Pille auf dunklem Grund. */
.has-contrast-background-color .wp-block-button:not(.is-style-outline):not(.is-style-text-link) > .wp-block-button__link {
	background-color: var(--wp--preset--color--on-contrast);
	border-color: var(--wp--preset--color--on-contrast);
	color: var(--wp--preset--color--contrast);
}

.has-contrast-background-color .wp-block-button:not(.is-style-outline):not(.is-style-text-link) > .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--on-contrast) 86%, var(--wp--preset--color--contrast));
	border-color: transparent;
}

.has-contrast-background-color .wp-block-details[open] summary::after {
	background-color: var(--wp--preset--color--on-contrast);
	border-color: var(--wp--preset--color--on-contrast);
	color: var(--wp--preset--color--contrast);
}

/* Römische Schrittziffern auf Dunkel als große, helle Akzente. */
.has-contrast-background-color .fb-step__time {
	color: var(--wp--preset--color--on-contrast);
}

/* ---------- Bewegung: leise und einmalig ---------- */
/* Einblenden: nur Elemente, die das Skript markiert (nie über dem Falz, nie ohne JS). */
@media (prefers-reduced-motion: no-preference) {
	.fb-reveal {
		transition:
			opacity var(--fb-dur-base) var(--fb-ease-out) var(--fb-reveal-delay, 0ms),
			transform var(--fb-dur-base) var(--fb-ease-out) var(--fb-reveal-delay, 0ms),
			filter var(--fb-dur-base) var(--fb-ease-out) var(--fb-reveal-delay, 0ms);
	}

	.fb-reveal:not(.is-in) {
		opacity: 0;
		transform: translateY(12px);
		filter: blur(3px);
	}

	/* Galerie: Bild zoomt im Rahmen minimal mit (öffnet die Lightbox). */
	.wp-block-gallery .wp-block-image {
		overflow: hidden;
		border-radius: var(--wp--preset--border-radius--s, 4px);
	}

	.wp-block-gallery .wp-block-image img {
		transition-duration: var(--fb-dur-slow);
	}

	.wp-block-gallery .wp-block-image:hover img {
		transform: scale(1.03);
	}
}

/* Monogramm wandert beim Scrollen leicht mit (Parallax, nur Desktop, reines CSS). */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 782px) {
		.fb-hero__panel p.is-style-monogram {
			animation:
				fb-monogram-settle 900ms var(--fb-ease-out) both,
				fb-monogram-drift linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100vh;
		}
	}
}

@keyframes fb-monogram-drift {
	from {
		translate: 0 -54%;
	}
	to {
		translate: 0 -66%;
	}
}