/**
 * Beauty Tresor — Stylesheet (Front-End & Editor)
 * ================================================
 * Gestaltungsidee „Der Tresor": ein ruhiges, helles Haus (Papier/Champagner),
 * darin zwei dunkle Räume (Tresor) mit Gold. Ein einziges markantes Element —
 * die Drehscheibe (Dial) um das runde Foto. Alles andere bleibt still:
 * Fraunces für Überschriften und Fließtext, Inter nur für Bedienelemente,
 * Gold ausschließlich als Hairline, Schild und Akzent. Keine Schatten,
 * keine Icons, keine Scroll-Effekte.
 *
 * Inhalt:
 *   1.  Tokens
 *   2.  Basis & Typografie
 *   3.  Block-Styles (Kleine Zeile, Häkchen, Rahmen)
 *   4.  Buttons
 *   5.  Header & Navigation
 *   6.  Dial (Tresor-Drehscheibe)
 *   7.  Fach (Tresorfach) & Schild
 *   8.  Tresor (dunkle Abschnitte)
 *   9.  Komponenten (Fakten, Schritte, Stimmen, Kontakt, Preis, FAQ)
 *   10. Bild-Slider
 *   11. Footer
 *   12. Formulare, Skip-Link, Blog
 *   13. Responsive
 *   14. Reduced Motion & Print
 *
 * Farben, Schriften und Abstände stammen aus theme.json
 * (CSS-Variablen --wp--preset--…), hier zu kurzen Aliassen gebündelt.
 */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
	--ink: var(--wp--preset--color--contrast, #1e1a16);
	--vault: var(--wp--preset--color--vault, #16130f);
	--paper: var(--wp--preset--color--base, #faf8f4);
	--champagne: var(--wp--preset--color--surface, #f3ecdf);
	--cream: var(--wp--preset--color--cream, #e9dfcc);
	--gold: var(--wp--preset--color--primary, #c4a46a);
	--bronze: var(--wp--preset--color--primary-dark, #8a6b32);
	--gold-soft: var(--wp--preset--color--accent, #e3cfa0);
	--muted: var(--wp--preset--color--muted, #6b635a);
	--white: var(--wp--preset--color--white, #fff);

	--font-serif: var(--wp--preset--font-family--heading, "Fraunces", Georgia, serif);
	--font-ui: var(--wp--preset--font-family--ui, "Inter", system-ui, sans-serif);
	--font-script: var(--wp--preset--font-family--script, "Parisienne", cursive);

	/* Nagellack-Töne — nur für die Lack-Tupfer im Bereich Nails */
	--nail-1: #d9a5a0;
	--nail-2: #e8cdb8;
	--nail-3: #8e3b46;
	--nail-4: #c4a46a;
	--nail-5: #f0d6d3;

	/* Ornamente als Masken (Gold kommt aus dem Hintergrund) */
	--sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.8 4.6 11 12 12-7.4 1-11.4 5.2-12 12C11.4 17.2 7.4 13 0 12c7.4-1 11.4-5.2 12-12z'/%3E%3C/svg%3E");
	--flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2 11c18-9 34-9 52-1s37 7 64-6'/%3E%3C/svg%3E");
	--wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 8c10-8 20-8 30 0s20 8 30 0 20-8 30 0'/%3E%3C/svg%3E");
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.54 0 0 0 0 0.42 0 0 0 0 0.2 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* Hairlines: warm, nie reines Grau */
	--line: rgba(30, 26, 22, 0.12);
	--line-soft: rgba(30, 26, 22, 0.07);
	--line-gold: rgba(196, 164, 106, 0.55);
	--line-gold-strong: rgba(196, 164, 106, 0.9);
	--line-on-dark: rgba(250, 248, 244, 0.14);

	--ease: cubic-bezier(0.25, 0.8, 0.25, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.28s;
	--radius: 3px;
}

/* ============================================================
   2. BASIS & TYPOGRAFIE
   ============================================================ */
html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern", "liga", "calt", "onum";
	/* Fraunces: weiche Achse leicht geöffnet, „wonky" Formen aus — ruhig lesbar */
	font-variation-settings: "SOFT" 30, "WONK" 0;
	overflow-x: clip;
}

::selection {
	background: var(--gold-soft);
	color: var(--ink);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 1.5px solid var(--bronze);
	outline-offset: 3px;
	border-radius: 2px;
}

:where(h1, h2, h3, h4, .wp-block-post-title, .wp-block-site-title) {
	font-optical-sizing: auto;
	font-variation-settings: "SOFT" 45, "WONK" 0;
	text-wrap: balance;
}

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

/* Lange Zeilen vermeiden: Fließtext in Spalten nie breiter als ~70 Zeichen
   (in eingegrenzten Gruppen regelt WordPress die Breite über die Inhaltsbreite) */
:where(.wp-block-column) > p:not([class*="has-"]) {
	max-width: 68ch;
}

/* Lead-Absatz (Größe „Groß") */
.has-large-font-size {
	line-height: 1.5;
	font-weight: 300;
	color: color-mix(in srgb, var(--ink) 82%, transparent);
}

/* Anker-Sprünge nicht unter dem Sticky-Header landen lassen */
:where(.wp-site-blocks [id]) {
	scroll-margin-top: 6rem;
}

/* Bilder sanft, nie rund — Rundung ist dem Dial vorbehalten */
:where(.wp-block-image, .wp-block-post-featured-image) img {
	border-radius: var(--radius);
}

/* ============================================================
   3. BLOCK-STYLES
   ============================================================ */
/* Absatz → „Kleine Zeile": Ortsangabe, Rolle, Bereich. Serif, Bronze, mit kleinem Glanzpunkt. */
.is-style-label,
p.is-style-label {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 400;
	color: var(--bronze);
	margin-bottom: 0.9rem;
}

.is-style-label::before {
	content: "";
	display: inline-block;
	width: 0.62em;
	height: 0.62em;
	margin-right: 0.5em;
	vertical-align: 0.05em;
	background: var(--gold);
	-webkit-mask: var(--sparkle) center / contain no-repeat;
	mask: var(--sparkle) center / contain no-repeat;
	animation: bt-twinkle 3.6s ease-in-out infinite;
}

@keyframes bt-twinkle {
	0%, 100% { opacity: 0.55; transform: scale(0.85) rotate(0deg); }
	50% { opacity: 1; transform: scale(1.1) rotate(15deg); }
}

/* Absatz / Überschrift → „Handschrift": Parisienne für kurze Zeilen (Willkommen, by Barbara, Signaturen) */
.is-style-script,
p.is-style-script,
h1.is-style-script,
h2.is-style-script,
h3.is-style-script {
	font-family: var(--font-script);
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--bronze);
	margin-bottom: 0.35rem;
	font-variation-settings: normal;
}

/* Überschrift → „Mit Zierstrich": geschwungene Goldlinie darunter */
.is-style-flourish {
	position: relative;
	padding-bottom: 1.25rem;
}

.is-style-flourish::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 6.5rem;
	height: 0.85rem;
	background: var(--gold);
	-webkit-mask: var(--flourish) left center / contain no-repeat;
	mask: var(--flourish) left center / contain no-repeat;
}

.is-style-flourish.has-text-align-center::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Liste → „Häkchen" */
.wp-block-list.is-style-checklist,
ul.is-style-checklist {
	list-style: none;
	padding-left: 0;
}

.is-style-checklist li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.65rem;
}

.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.72em;
	width: 0.6rem;
	height: 0.32rem;
	border-left: 1.5px solid var(--bronze);
	border-bottom: 1.5px solid var(--bronze);
	transform: rotate(-45deg);
}

/* Bild → „Goldrahmen": Hairline, leicht versetzt, wie eine Schließfachkante */
.wp-block-image.is-style-frame,
.wp-block-post-featured-image.is-style-frame {
	position: relative;
	isolation: isolate; /* Rahmen bleibt hinter dem Bild, aber vor dem Abschnittshintergrund */
}

.wp-block-image.is-style-frame img,
.wp-block-post-featured-image.is-style-frame img {
	border-radius: 2px;
}

.wp-block-image.is-style-frame::after,
.wp-block-post-featured-image.is-style-frame::after {
	content: "";
	position: absolute;
	inset: 0.75rem -0.75rem -0.75rem 0.75rem;
	border: 1px solid var(--line-gold);
	border-radius: 2px;
	pointer-events: none;
	z-index: -1;
}

/* Bild → „Bogen": Rundbogen-Fenster mit versetzter Gold-Hairline, sanfter Zoom beim Hover */
.wp-block-image.is-style-arch {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 50% 50% 2px 2px / 40% 40% 2px 2px;
}

.wp-block-image.is-style-arch img {
	border-radius: 50% 50% 2px 2px / 40% 40% 2px 2px;
	transition: transform 1.1s var(--ease-out);
}

.wp-block-image.is-style-arch:hover img {
	transform: scale(1.035);
}

.wp-block-image.is-style-arch::after {
	content: "";
	position: absolute;
	inset: 0.75rem;
	border: 1px solid rgba(250, 248, 244, 0.55);
	border-radius: 50% 50% 2px 2px / 40% 40% 2px 2px;
	pointer-events: none;
}

.wp-block-image.is-style-arch figcaption {
	position: relative;
	z-index: 1;
	padding: 0 0.25rem;
}

/* Trennlinie */
.wp-block-separator {
	border: 0;
	border-bottom: 1px solid var(--line);
	opacity: 1;
}

.wp-block-separator.is-style-wide,
.wp-block-separator:not(.is-style-dots) {
	width: 100%;
}

/* Trennlinie → Bereichs-Ornamente (Maßband, Wellen, Lack-Tupfer, Messstriche) */
.wp-block-separator.is-style-tape,
.wp-block-separator.is-style-waves,
.wp-block-separator.is-style-polish,
.wp-block-separator.is-style-ruler {
	border: 0;
	width: 100%;
	max-width: 14rem;
	margin-left: 0;
	margin-right: auto;
	background-color: transparent;
}

.wp-block-separator.has-text-align-center.is-style-tape,
.is-layout-constrained > .wp-block-separator.is-style-tape,
.is-layout-constrained > .wp-block-separator.is-style-waves,
.is-layout-constrained > .wp-block-separator.is-style-polish,
.is-layout-constrained > .wp-block-separator.is-style-ruler {
	margin-left: auto;
}

.wp-block-separator.is-style-tape {
	height: 1.1rem;
	background-image:
		linear-gradient(var(--gold), var(--gold)),
		repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 10px),
		repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 50px);
	background-size: 100% 1.5px, 100% 8px, 100% 16px;
	background-position: 0 100%, 0 100%, 0 100%;
	background-repeat: no-repeat;
}

.wp-block-separator.is-style-ruler {
	height: 0.75rem;
	max-width: 10rem;
	background-image:
		linear-gradient(var(--gold), var(--gold)),
		repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 6px),
		repeating-linear-gradient(90deg, var(--gold) 0 1px, transparent 1px 30px);
	background-size: 100% 1px, 100% 5px, 100% 11px;
	background-position: 0 100%, 0 100%, 0 100%;
	background-repeat: no-repeat;
}

.wp-block-separator.is-style-waves {
	height: 1rem;
	background-color: var(--gold);
	-webkit-mask: var(--wave) left center / 5rem 1rem repeat-x;
	mask: var(--wave) left center / 5rem 1rem repeat-x;
}

.wp-block-separator.is-style-polish {
	height: 1.1rem;
	max-width: 6.6rem;
	background-image:
		radial-gradient(circle at 50% 50%, var(--nail-1) 0 6px, transparent 7px),
		radial-gradient(circle at 50% 50%, var(--nail-2) 0 6px, transparent 7px),
		radial-gradient(circle at 50% 50%, var(--nail-3) 0 6px, transparent 7px),
		radial-gradient(circle at 50% 50%, var(--nail-4) 0 6px, transparent 7px),
		radial-gradient(circle at 50% 50%, var(--nail-5) 0 6px, transparent 7px);
	background-size: 1.1rem 1.1rem;
	background-position: 0 0, 1.35rem 0, 2.7rem 0, 4.05rem 0, 5.4rem 0;
	background-repeat: no-repeat;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.wp-block-button__link,
.wp-element-button {
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

/* Variante „Gold": Gold trägt Tinte (heller Text wäre zu kontrastarm); beim Hover ein metallischer Schimmer */
.wp-block-button.is-style-gold .wp-block-button__link {
	background-color: var(--gold);
	color: var(--ink);
	background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
	background-size: 260% 100%;
	background-position: 120% 0;
	background-repeat: no-repeat;
	transition: background-position 0.9s var(--ease-out), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.wp-block-button.is-style-gold .wp-block-button__link:hover {
	background-position: -30% 0;
}

.wp-block-button.is-style-gold .wp-block-button__link:hover,
.wp-block-button.is-style-gold .wp-block-button__link:focus-visible {
	background-color: var(--bronze);
	color: var(--white);
}

/* Core-Variante „Umriss": 1px statt 2px, gleiche Höhe wie gefüllte Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):not(.has-background) {
	border: 1px solid currentColor;
	color: var(--ink);
	background-color: transparent;
	padding: calc(1rem - 1px) calc(1.75rem - 1px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):not(.has-background):focus-visible {
	background-color: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* Textlinks: Unterstrich in Gold, beim Hover in Tinte */
:where(.wp-site-blocks, .editor-styles-wrapper) p a:not(.wp-element-button),
:where(.wp-site-blocks, .editor-styles-wrapper) li a:not(.wp-element-button),
:where(.wp-site-blocks, .editor-styles-wrapper) cite a {
	text-decoration-color: var(--line-gold-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

:where(.wp-site-blocks, .editor-styles-wrapper) p a:not(.wp-element-button):hover {
	text-decoration-color: currentColor;
}

/* ============================================================
   5. HEADER & NAVIGATION
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--paper);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
	border-bottom-color: var(--line-soft);
}

.site-header__inner {
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 3.5rem;
}

.site-brand {
	gap: 0.85rem;
}

.site-header .wp-block-site-logo img {
	display: block;
	height: auto;
}

.site-header .wp-block-site-title {
	margin: 0;
	white-space: nowrap;
}

/* Sobald unter Design → Editor ein Logo gesetzt ist, weicht der Textname */
.site-brand:has(.wp-block-site-logo) .wp-block-site-title {
	display: none;
}

/* Hauptmenü: ruhige UI-Schrift, feiner Goldstrich beim Hover / aktiv */
.site-header .wp-block-navigation {
	flex: 1 1 auto;
	justify-content: center;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	color: var(--ink);
	text-decoration: none;
}

.site-header .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.1rem;
	height: 1px;
	background: var(--gold);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after {
	opacity: 1;
}

.site-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--bronze);
}

/* Dropdown „Leistungen": übernimmt die Overlay-Farben des Navigations-Blocks
   (Tresor dunkel, Papier-Text) — das Menü öffnet sich wie der Tresor. */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid var(--line-gold);
	border-radius: var(--radius);
	padding: 0.5rem;
	min-width: 16rem;
	box-shadow: 0 24px 48px -32px rgba(22, 19, 15, 0.6);
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.6rem 0.9rem;
	border-radius: 2px;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--paper);
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background: rgba(250, 248, 244, 0.06);
	color: var(--gold);
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-icon {
	color: var(--bronze);
}

/* Termin-Link nur im Overlay (Desktop hat den Gold-Button rechts) */
.site-header .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__container > .menu-cta {
	display: none;
}

.site-header .is-menu-open .menu-cta .wp-block-navigation-item__content {
	color: var(--gold);
}

/* Burger-Button */
.site-header .wp-block-navigation__responsive-container-open {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	transition: border-color var(--dur) var(--ease);
}

.site-header .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--gold);
}

/* Overlay = der Tresor öffnet sich: dunkel, Gold, große Serif.
   (Farben sind zusätzlich als Overlay-Farben am Navigations-Block gesetzt.) */
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--vault);
	color: var(--paper);
	padding: clamp(1.25rem, 5vw, 3rem);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: center;
}

.site-header .wp-block-navigation__responsive-container-close {
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--line-on-dark);
	border-radius: var(--radius);
	color: var(--paper);
}

.site-header .is-menu-open .wp-block-navigation__container {
	gap: 0.2rem;
	text-align: left;
}

.site-header .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 6.5vw, 2.6rem);
	font-weight: 300;
	letter-spacing: -0.015em;
	color: var(--paper);
	padding-block: 0.3rem;
}

.site-header .is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--gold);
}

/* Untermenü im Overlay: eingerückt, kleiner, mit Goldlinie */
.site-header .is-menu-open .wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	border-left: 1px solid var(--line-gold);
	box-shadow: none;
	padding: 0.25rem 0 0.25rem 1rem;
	margin-left: 0.25rem;
}

.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: clamp(1.15rem, 4vw, 1.4rem);
	color: var(--gold-soft);
	padding: 0.25rem 0;
}

.site-header .is-menu-open .wp-block-navigation__submenu-icon {
	color: var(--gold);
}

/* Header-Aktion */
.header-actions {
	flex: 0 0 auto;
}

.header-actions .wp-block-button__link {
	padding: 0.75rem 1.25rem;
	font-size: 0.85rem;
}

/* ============================================================
   6. DIAL — die Tresor-Drehscheibe
   ============================================================
   Gruppe-Block-Style „Tresor-Dial": nimmt genau einen Bild-Block auf.
   Das Bild wird rund beschnitten; darum liegt ein Ring aus feinen
   Strichmarken (dreht sich sehr langsam) und ein Hairline-Ring. */
.wp-block-group.is-style-dial {
	position: relative;
	padding: 8%;
	max-width: 36rem;
	margin-inline: auto;
	isolation: isolate;
}

.wp-block-group.is-style-dial::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: repeating-conic-gradient(from -0.125deg, var(--gold) 0 0.25deg, transparent 0.25deg 3deg);
	-webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 0.85rem), #000 calc(100% - 0.8rem), #000 calc(100% - 0.1rem), transparent 100%);
	mask: radial-gradient(circle closest-side, transparent calc(100% - 0.85rem), #000 calc(100% - 0.8rem), #000 calc(100% - 0.1rem), transparent 100%);
	animation: dial-turn 140s linear infinite;
	pointer-events: none;
	z-index: -1;
}

.wp-block-group.is-style-dial::after {
	content: "";
	position: absolute;
	inset: 4.5% 4.5% auto 4.5%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 1px solid var(--line-gold);
	pointer-events: none;
	z-index: -1;
}

.wp-block-group.is-style-dial > .wp-block-image,
.wp-block-group.is-style-dial > figure {
	margin: 0;
	width: 100%;
}

.wp-block-group.is-style-dial img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
}

/* Bildunterschrift (z. B. Bildnachweis) sitzt unterhalb des Rings */
.wp-block-group.is-style-dial figcaption {
	text-align: center;
	margin-top: calc(10% + 0.5rem);
	margin-bottom: 0;
}

@keyframes dial-turn {
	to {
		transform: rotate(360deg);
	}
}

/* ============================================================
   7. FACH — Tresorfach & Schild
   ============================================================
   Gruppe-Block-Style „Tresorfach": Hairline in Gold, viel Luft, kein Schatten.
   Beim Hover schließt sich der Rahmen (volles Gold) und die Fläche hellt auf. */
.wp-block-group.is-style-fach {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--line-gold);
	border-radius: 2px;
	background: var(--paper);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
		transform 0.4s var(--ease-out);
}

.wp-block-group.is-style-fach:hover,
.wp-block-group.is-style-fach:focus-within {
	border-color: var(--gold);
	background: var(--white);
	transform: translateY(-3px);
}

.wp-block-group.is-style-fach > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Link unten nur in den gleich hohen Rastern (Flex) — sonst würde „auto“ den Absatzabstand auf 0 setzen */
.fach-grid .wp-block-group.is-style-fach > p:last-child {
	margin-top: auto;
}

/* Beim Hover „öffnet" sich das Fach: Messingkante oben, kleiner Dial im Eck, Schild leuchtet */
.wp-block-group.is-style-fach::before {
	content: "";
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: repeating-conic-gradient(var(--gold) 0 2deg, transparent 2deg 12deg);
	-webkit-mask: radial-gradient(circle closest-side, transparent 60%, #000 63%, #000 94%, transparent 100%);
	mask: radial-gradient(circle closest-side, transparent 60%, #000 63%, #000 94%, transparent 100%);
	opacity: 0;
	transform: rotate(-40deg);
	transition: opacity 0.4s var(--ease), transform 0.9s var(--ease-out);
	pointer-events: none;
}

.wp-block-group.is-style-fach::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 8%;
	right: 8%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	opacity: 0;
	transition: opacity 0.4s var(--ease);
	pointer-events: none;
}

.wp-block-group.is-style-fach:hover::before,
.wp-block-group.is-style-fach:focus-within::before {
	opacity: 0.8;
	transform: rotate(30deg);
}

.wp-block-group.is-style-fach:hover::after,
.wp-block-group.is-style-fach:focus-within::after {
	opacity: 1;
}

/* Schild: das kleine gravierte Namensschild am Fach */
.plate,
p.plate {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--bronze);
	padding: 0.5em 0.75em;
	border: 1px solid var(--line-gold);
	border-radius: 2px;
	margin-bottom: 1.25rem;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.wp-block-group.is-style-fach:hover .plate,
.wp-block-group.is-style-fach:focus-within .plate {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--ink);
}

/* Fächer-Raster: gleich hohe Fächer, Link unten, Titel bricht sauber um */
.fach-grid .wp-block-group.is-style-fach {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	height: 100%;
}

.fach-grid .wp-block-group.is-style-fach > h3 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	font-size: clamp(1.35rem, 1.7vw, 1.6rem);
	overflow-wrap: break-word;
	hyphens: manual;
}

.fach-grid .wp-block-group.is-style-fach > p {
	margin-top: 0;
}

.fach-grid .wp-block-group.is-style-fach > p:last-child {
	padding-top: 1.5rem;
}

/* Tabelle-Block-Style „Preisliste": Leistung links, Preis rechts in Bronze,
   feine Gold-Hairlines zwischen den Zeilen — im Editor wie eine Tabelle bearbeitbar. */
.wp-block-table.is-style-pricelist {
	width: 100%;
	margin: 0;
	overflow-x: visible;
}

.wp-block-table.is-style-pricelist table {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	border: 0;
}

.wp-block-table.is-style-pricelist td,
.wp-block-table.is-style-pricelist th {
	border: 0;
	border-bottom: 1px solid var(--line-gold);
	padding: 0.8rem 0;
	vertical-align: baseline;
	text-align: left;
	line-height: 1.4;
}

.wp-block-table.is-style-pricelist tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-pricelist td:last-child,
.wp-block-table.is-style-pricelist th:last-child {
	text-align: right;
	white-space: nowrap;
	padding-left: 1.25rem;
	font-family: var(--font-ui);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--bronze);
	font-variant-numeric: tabular-nums;
}

.wp-block-table.is-style-pricelist em {
	font-size: 0.85em;
	color: var(--bronze);
}

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

/* Preis-Fächer sind Information, kein Link: kein Anheben beim Überfahren */
.price-columns .wp-block-group.is-style-fach:hover,
.price-columns .wp-block-group.is-style-fach:focus-within {
	transform: none;
}

/* ============================================================
   8. TRESOR — dunkle Abschnitte
   ============================================================
   Gruppe-Block-Style „Tresor (dunkel)": Tiefes Warmbraun, Papier-Text,
   Gold für Linien und Kleine Zeilen. Ohne Verläufe, ohne Effekte. */
.wp-block-group.is-style-vault {
	background-color: var(--vault);
	color: var(--cream);
}

.wp-block-group.is-style-vault :is(h1, h2, h3, h4, h5, h6),
.wp-block-group.is-style-vault .wp-block-heading {
	color: var(--paper);
}

.wp-block-group.is-style-vault .has-large-font-size {
	color: color-mix(in srgb, var(--cream) 88%, transparent);
}

.wp-block-group.is-style-vault .is-style-label,
.wp-block-group.is-style-vault .is-style-script,
.wp-block-group.is-style-vault .plate {
	color: var(--gold);
	border-color: var(--line-gold);
}

.wp-block-group.is-style-vault p a:not(.wp-element-button),
.wp-block-group.is-style-vault li a:not(.wp-element-button) {
	color: var(--gold-soft);
	text-decoration-color: var(--line-gold);
}

.wp-block-group.is-style-vault p a:not(.wp-element-button):hover {
	color: var(--white);
}

.wp-block-group.is-style-vault .wp-block-separator {
	border-color: var(--line-on-dark);
}

.wp-block-group.is-style-vault .wp-block-quote {
	border-left-color: var(--gold);
	color: var(--paper);
}

.wp-block-group.is-style-vault .wp-block-quote cite {
	color: var(--gold-soft);
}

.wp-block-group.is-style-vault .is-style-checklist li::before {
	border-color: var(--gold);
}

.wp-block-group.is-style-vault .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):not(.has-background) {
	color: var(--paper);
	border-color: var(--line-on-dark);
}

.wp-block-group.is-style-vault .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):not(.has-background):hover {
	background: var(--paper);
	color: var(--vault);
	border-color: var(--paper);
}

.wp-block-group.is-style-vault .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--gold);
	color: var(--ink);
}

.wp-block-group.is-style-vault .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-group.is-style-vault .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: var(--gold-soft);
	color: var(--ink);
}

/* Säulen im Tresor: Hairline-Liste statt Karten */
.pillars {
	border-top: 1px solid var(--line-on-dark);
}

.pillars > .wp-block-group {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--line-on-dark);
}

.pillars h4 {
	margin: 0 0 0.35rem;
}

.pillars p {
	margin: 0;
	font-size: 1rem;
	color: color-mix(in srgb, var(--cream) 80%, transparent);
}

.wp-block-group.is-style-vault .pillars {
	border-top-color: var(--line-on-dark);
}

/* Fach im Tresor (z. B. Preis im dunklen Bereich) */
.wp-block-group.is-style-vault .wp-block-group.is-style-fach {
	background: transparent;
	border-color: var(--line-gold);
}

/* ============================================================
   9. KOMPONENTEN
   ============================================================ */
/* Fakten-Zeile unter dem Hero: vier stille Aussagen zwischen zwei Linien */
.facts {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

.facts > .wp-block-group {
	padding-right: 1.5rem;
}

.facts > .wp-block-group + .wp-block-group {
	border-left: 1px solid var(--line-soft);
	padding-left: 1.5rem;
}

.facts h3 {
	font-size: 1.1rem;
	font-weight: 400;
	margin: 0 0 0.35rem;
}

.facts p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--muted);
}

/* Raster ohne leere Spuren: Einträge füllen immer die volle Breite.
   „steps" (3–4 Schritte) bis zu vier Spalten, „trio" (3 oder 6 Einträge) höchstens drei. */
.steps.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.trio.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* Schritte: große, leichte Ziffer in Bronze — hier ist Reihenfolge Inhalt */
.step-num,
p.step-num {
	font-family: var(--font-serif);
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 200;
	line-height: 1;
	color: var(--bronze);
	margin: 0 0 1rem;
	font-variation-settings: "SOFT" 60, "WONK" 0;
}

.steps > .wp-block-group {
	border-top: 1px solid var(--line-gold);
	padding-top: 1.5rem;
}

.steps h3 {
	margin: 0 0 0.6rem;
}

.steps p:not(.step-num) {
	margin: 0;
	color: color-mix(in srgb, var(--ink) 78%, transparent);
}

/* Schritt-Illustrationen (Tomaten der Studio-Seite): Weiß wird über Multiply unsichtbar */
.step-figure,
.wp-block-image.step-figure {
	margin: 0 0 1rem;
}

.step-figure img {
	mix-blend-mode: multiply;
	border-radius: 0;
}

/* Ergebnisse (Vorher/Nachher-Galerie) */
.wp-block-gallery.results {
	gap: 1rem;
}

.wp-block-gallery.results .wp-block-image img {
	border-radius: 2px;
}

/* Bildunterschriften: ruhig, klein, linksbündig */
.wp-block-image figcaption,
.wp-element-caption {
	text-align: left;
	margin-top: 0.75rem;
}

/* Bereichs-Liste ohne Rahmen (Anwendungsbereiche, Vorteile) */
.plain-grid > .wp-block-group {
	border-top: 1px solid var(--line);
	padding-top: 1.25rem;
}

.plain-grid h3,
.plain-grid h4 {
	margin: 0 0 0.5rem;
}

.plain-grid p {
	margin: 0;
	color: color-mix(in srgb, var(--ink) 78%, transparent);
}

/* Stimmen: ein großes Anführungszeichen, Text in leichter Serif, kein Rahmen */
.testimonial {
	position: relative;
	padding-top: 3.5rem;
}

.testimonial::before {
	content: "\201E";
	position: absolute;
	top: -2.7rem;
	left: -0.15rem;
	font-family: var(--font-serif);
	font-size: 5rem;
	line-height: 1;
	font-weight: 300;
	color: var(--gold);
	font-variation-settings: "SOFT" 100, "WONK" 0;
}

.testimonial .wp-block-quote {
	border: 0;
	padding: 0;
	margin: 0;
}

.testimonial .wp-block-quote p {
	font-size: 1.2rem;
	line-height: 1.45;
	font-weight: 300;
	max-width: none;
}

.testimonial .wp-block-quote cite {
	display: block;
	margin-top: 0.9rem;
	font-family: var(--font-script);
	font-size: 1.55rem;
	line-height: 1.1;
	font-style: normal;
	color: var(--bronze);
}

.testimonial .is-style-label {
	margin-bottom: 0.75rem;
}

/* Zitat im Fließtext */
.wp-block-quote cite {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-style: normal;
	color: var(--muted);
}

/* Kontaktzeilen: Bezeichnung klein (UI), Wert in Serif, Hairline darunter */
.contact-row {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--line);
	gap: 0.15rem;
}

.contact-row:first-of-type {
	border-top: 1px solid var(--line);
}

.contact-row > p:first-child {
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--muted);
	margin: 0;
}

.contact-row > p:last-child {
	font-size: 1.15rem;
	margin: 0;
}

/* Öffnungszeiten-Zeilen im Fach */
.hours-row {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--line-soft);
	gap: 1rem;
}

.hours-row p {
	margin: 0;
	font-size: 1rem;
}

.hours-row p:last-child {
	text-align: right;
	color: var(--bronze);
	flex-shrink: 0;
}

/* Preis (Kennenlernbehandlung) */
.price,
p.price {
	font-family: var(--font-serif);
	font-size: clamp(2.5rem, 5vw, 3.25rem);
	font-weight: 200;
	line-height: 1;
	color: var(--ink);
	margin: 0.5rem 0 0.25rem;
	font-variation-settings: "SOFT" 60, "WONK" 0;
}

.price small,
p.price small {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--muted);
	margin-left: 0.5rem;
	letter-spacing: 0.01em;
}

/* Hinweis (medizinisch, Kontraindikationen): Goldlinie links, kein Kasten */
.note {
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 1px solid var(--gold);
	font-size: 1rem;
	color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.note p {
	margin: 0;
}

/* FAQ — core/details */
.wp-block-details {
	border-top: 1px solid var(--line);
	padding: 1.25rem 0;
	margin: 0 !important;
}

.wp-block-details:last-of-type {
	border-bottom: 1px solid var(--line);
}

.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	font-family: var(--font-serif);
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	font-weight: 400;
	line-height: 1.3;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

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

.wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--font-ui);
	font-size: 1.35rem;
	font-weight: 300;
	line-height: 1;
	color: var(--bronze);
	transition: transform var(--dur) var(--ease);
}

.wp-block-details summary:hover {
	color: var(--bronze);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	margin-top: 0.85rem;
	color: color-mix(in srgb, var(--ink) 80%, transparent);
	max-width: 60ch;
}

.wp-block-details[open] > :not(summary) {
	animation: bt-fade 0.45s var(--ease-out);
}

@keyframes bt-fade {
	from {
		opacity: 0;
		transform: translateY(-0.35rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* FAQ-Intro links bleibt beim Scrollen stehen (nur breit) */
@media (min-width: 782px) {
	.sticky-intro {
		position: sticky;
		top: 6rem;
	}
}

/* Blog-Karten (Archiv/Suche) */
.post-card .wp-block-post-featured-image {
	margin-bottom: 1rem;
}

.post-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0.35rem 0;
}

.post-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--ink);
}

.post-card .wp-block-post-title a:hover {
	color: var(--bronze);
}

/* ============================================================
   9a. LICHT, TEXTUR, LAUFBAND, VERGLEICH, SIEGEL, BEHANDLUNGSKARTE
   ============================================================ */
/* Hero: weicher Gold-Lichtfleck hinter dem Dial */
.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	top: -8%;
	right: -6%;
	width: min(60vw, 46rem);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(196, 164, 106, 0.22) 0%, rgba(196, 164, 106, 0) 62%);
	pointer-events: none;
	z-index: -1;
}

/* Champagner-Flächen mit feiner Papierkörnung */
.has-surface-background-color {
	background-image: var(--grain);
}

/* Laufband unter dem Hero: die vier Bereiche, langsam ziehend (JS verdoppelt die Zeile) */
.ticker {
	overflow: hidden;
	border-top: 1px solid var(--line-gold);
	border-bottom: 1px solid var(--line-gold);
	padding: 0.85rem 0;
}

.ticker .ticker__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 3.5rem;
	width: max-content;
	max-width: none;
	margin: 0;
}

.ticker.is-ready .ticker__track {
	animation: bt-ticker var(--ticker-duration, 42s) linear infinite;
}

.ticker:hover .ticker__track {
	animation-play-state: paused;
}

.ticker p {
	margin: 0;
	white-space: nowrap;
	font-family: var(--font-serif);
	font-size: 1.05rem;
	color: var(--bronze);
	display: flex;
	align-items: center;
	gap: 3.5rem;
	max-width: none;
}

.ticker p::before {
	content: "";
	width: 0.6em;
	height: 0.6em;
	flex: 0 0 auto;
	background: var(--gold);
	-webkit-mask: var(--sparkle) center / contain no-repeat;
	mask: var(--sparkle) center / contain no-repeat;
}

@keyframes bt-ticker {
	to {
		transform: translateX(-50%);
	}
}

/* Vorher/Nachher-Vergleich: zwei Bild-Blöcke, JS legt den Regler darüber */
.compare {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
}

.compare .wp-block-image {
	margin: 0;
}

.compare img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.compare.is-ready {
	aspect-ratio: var(--compare-ratio, 4 / 3);
}

.compare.is-ready .wp-block-image {
	position: absolute;
	inset: 0;
}

.compare.is-ready img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.compare.is-ready .wp-block-image:nth-of-type(2) {
	clip-path: inset(0 0 0 var(--compare-pos, 50%));
}

.compare.is-ready figcaption {
	position: absolute;
	top: 1rem;
	left: 1rem;
	margin: 0;
	padding: 0.35rem 0.7rem;
	background: rgba(250, 248, 244, 0.85);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: 2px;
}

.compare.is-ready .wp-block-image:nth-of-type(2) figcaption {
	left: auto;
	right: 1rem;
}

.compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	z-index: 3;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

.compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--compare-pos, 50%);
	width: 1px;
	background: var(--paper);
	box-shadow: 0 0 0 1px rgba(30, 26, 22, 0.15);
	pointer-events: none;
	z-index: 2;
}

.compare__handle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2.6rem;
	height: 2.6rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--paper);
	border: 1px solid var(--gold);
	box-shadow: 0 8px 24px -12px rgba(30, 26, 22, 0.5);
}

.compare__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.9rem;
	height: 0.9rem;
	transform: translate(-50%, -50%);
	background: var(--bronze);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.compare__range:focus-visible ~ .compare__handle::before {
	outline: 2px solid var(--bronze);
	outline-offset: 3px;
}

/* Siegel (Bild-Block mit Klasse „seal" im Dial): dreht sich langsam, sitzt unten links auf dem Ring */
.wp-block-group.is-style-dial > .seal {
	position: absolute;
	left: -1%;
	bottom: 4%;
	width: 27%;
	margin: 0;
	z-index: 2;
}

.wp-block-group.is-style-dial > .seal img {
	border-radius: 50%;
	animation: bt-spin 48s linear infinite;
	filter: drop-shadow(0 10px 20px rgba(30, 26, 22, 0.18));
}

@keyframes bt-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Behandlungskarte (Ordination): Zeilen mit Hairlines statt Fächer */
.treatment {
	border-top: 1px solid var(--line);
	padding: 1.75rem 0 !important;
	margin: 0 !important;
}

.treatment:last-of-type {
	border-bottom: 1px solid var(--line);
}

.treatment h3 {
	margin: 0;
	font-size: clamp(1.35rem, 1.8vw, 1.6rem);
}

.treatment p {
	margin: 0;
	color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.facts-list,
ul.facts-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	color: var(--muted);
}

.facts-list li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
	border-bottom: 1px dotted var(--line);
}

.facts-list li strong {
	font-weight: 500;
	color: var(--ink);
}

/* ============================================================
   9b. ANIMATIONEN
   ============================================================
   Alles JS-gebunden (Klasse „js" am <html>, vor dem ersten Paint gesetzt):
   ohne JavaScript ist nichts versteckt, im Editor ebenfalls nicht.
   Bei „Reduzierte Bewegung" (Abschnitt 14) entfallen sie komplett. */

/* Hero-Einstieg: Text steigt gestaffelt auf, der Dial dreht sich ein */
.js .hero .wp-block-column:first-child > * {
	opacity: 0;
	animation: bt-rise 0.9s var(--ease-out) forwards;
}

.js .hero .wp-block-column:first-child > :nth-child(1) { animation-delay: 0.05s; }
.js .hero .wp-block-column:first-child > :nth-child(2) { animation-delay: 0.15s; }
.js .hero .wp-block-column:first-child > :nth-child(3) { animation-delay: 0.27s; }
.js .hero .wp-block-column:first-child > :nth-child(4) { animation-delay: 0.39s; }
.js .hero .wp-block-column:first-child > :nth-child(5) { animation-delay: 0.51s; }

.js .hero .is-style-dial {
	opacity: 0;
	animation: bt-dial-in 1.3s var(--ease-out) 0.2s forwards;
}

@keyframes bt-rise {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes bt-dial-in {
	from {
		opacity: 0;
		transform: scale(0.94) rotate(-5deg);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Scroll-Reveal: theme.js markiert nur Elemente, die beim Laden noch unterhalb
   des sichtbaren Bereichs liegen — nichts flackert, nichts bleibt versteckt. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
	transition-delay: calc(var(--bt-i, 0) * 90ms);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ============================================================
   9c. KLIMATA — Gruppe-Styles, die eine ganze Seite umschließen
   ============================================================ */
/* Bereich: Nails — ein Hauch Rosé in den Flächen */
.wp-block-group.is-style-area-nails {
	--wp--preset--color--surface: #f7eeeb;
	--champagne: #f7eeeb;
	--gold-soft: #e9cfc8;
}

/* Bereich: Beckenboden — Magnetfeld-Wellen hinter dem Dial, sanft pulsierend */
.wp-block-group.is-style-area-beckenboden .hero .wp-block-column:last-child {
	position: relative;
	isolation: isolate;
}

.wp-block-group.is-style-area-beckenboden .hero .wp-block-column:last-child::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: repeating-radial-gradient(circle at center, transparent 0 27px, rgba(196, 164, 106, 0.6) 27px 28.5px);
	-webkit-mask: radial-gradient(circle, #000 42%, transparent 71%);
	mask: radial-gradient(circle, #000 42%, transparent 71%);
	animation: bt-pulse 9s ease-in-out infinite;
	pointer-events: none;
	z-index: -1;
}

@keyframes bt-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
	50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* Ordination (Ästhetische Medizin): kühl, präzise, ohne Verspieltes */
.wp-block-group.is-style-clinic {
	--wp--preset--color--surface: #f5f5f3;
	--champagne: #f5f5f3;
	--wp--preset--color--vault: #1d2023;
	--vault: #1d2023;
	--radius: 0;
}

.wp-block-group.is-style-clinic .has-surface-background-color {
	background-image: none;
}

.wp-block-group.is-style-clinic .hero::before {
	background: radial-gradient(circle, rgba(196, 164, 106, 0.1) 0%, rgba(196, 164, 106, 0) 62%);
}

.wp-block-group.is-style-clinic .is-style-label::before {
	display: none;
}

.wp-block-group.is-style-clinic .is-style-script {
	font-family: var(--font-serif);
	font-size: 1rem;
	line-height: 1.65;
	margin-bottom: 0.9rem;
}

.wp-block-group.is-style-clinic .is-style-flourish::after {
	width: 3rem;
	height: 1px;
	-webkit-mask: none;
	mask: none;
}

.wp-block-group.is-style-clinic .wp-block-group.is-style-fach,
.wp-block-group.is-style-clinic .plate,
.wp-block-group.is-style-clinic .wp-block-button__link,
.wp-block-group.is-style-clinic .wp-block-image img,
.wp-block-group.is-style-clinic .compare {
	border-radius: 0;
}

/* … der Dial und das Siegel bleiben rund */
.wp-block-group.is-style-clinic .is-style-dial img {
	border-radius: 50%;
}

.wp-block-group.is-style-clinic .testimonial .wp-block-quote cite {
	font-family: var(--font-ui);
	font-size: 0.85rem;
	color: var(--muted);
}

/* ============================================================
   10. BILD-SLIDER (optional, Pattern „Bild-Slider")
   ============================================================
   Ohne JS (und im Editor): Bilder untereinander, voll bearbeitbar.
   Mit JS: Überblendung, Zähler „1 / 4", schlanke Pfeile. */
.bt-slider {
	position: relative;
}

.bt-slider__track {
	display: grid;
	gap: 0.75rem;
}

.bt-slider__track > * {
	margin: 0;
}

.bt-slider__track img {
	display: block;
	width: 100%;
	height: auto;
}

.bt-slider.is-ready .bt-slider__track {
	display: grid;
	grid-template-areas: "slide";
	gap: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 2px;
}

.bt-slider.is-ready .bt-slider__track > * {
	grid-area: slide;
	opacity: 0;
	transition: opacity 0.9s var(--ease);
}

.bt-slider.is-ready .bt-slider__track > .is-active {
	opacity: 1;
}

.bt-slider.is-ready .bt-slider__track img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.bt-slider__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.85rem;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	color: var(--muted);
}

.bt-slider__nav {
	display: flex;
	gap: 0.5rem;
}

.bt-slider__btn {
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease);
}

.bt-slider__btn:hover {
	border-color: var(--gold);
}

.bt-slider__btn svg {
	width: 1rem;
	height: 1rem;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.site-footer {
	background: var(--vault);
	color: color-mix(in srgb, var(--cream) 80%, transparent);
	font-size: 0.95rem;
}

.site-footer .wp-block-site-title,
.site-footer .wp-block-site-title a {
	color: var(--paper);
	font-size: 1.6rem;
	text-decoration: none;
}

.site-footer .wp-block-site-title a:hover {
	color: var(--gold);
}

.site-footer .footer-title {
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 400;
	color: var(--gold);
	margin: 0 0 0.9rem;
}

.site-footer p {
	color: color-mix(in srgb, var(--cream) 80%, transparent);
}

.site-footer a:not(.wp-element-button) {
	color: color-mix(in srgb, var(--paper) 85%, transparent);
	text-decoration: none;
}

.site-footer a:not(.wp-element-button):hover {
	color: var(--gold);
}

.site-footer .wp-block-navigation .wp-block-navigation__container {
	flex-direction: column;
	gap: 0.55rem;
	align-items: flex-start;
}

.site-footer .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	color: color-mix(in srgb, var(--paper) 85%, transparent);
	transition: color var(--dur) var(--ease);
}

.site-footer .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--gold);
}

.footer-bottom {
	margin-top: var(--wp--preset--spacing--40, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--line-on-dark);
	font-family: var(--font-ui);
	font-size: 0.8rem;
}

.footer-bottom p {
	margin: 0;
	color: color-mix(in srgb, var(--cream) 60%, transparent);
}

/* ============================================================
   12. FORMULARE & BLOG
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
	width: 100%;
	padding: 0.8rem 1rem;
	font-family: var(--font-ui);
	font-size: 0.95rem;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--gold);
}

.wp-block-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0.25rem;
	background: var(--white);
}

.wp-block-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.6rem 0.85rem;
}

.wp-block-search .wp-block-search__input:focus {
	outline: none;
}

.wp-block-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--gold);
}

.wp-block-search .wp-block-search__button {
	border-radius: 2px;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	padding: 0.6rem 1.1rem;
	font-family: var(--font-ui);
	font-size: 0.85rem;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}

.wp-block-search .wp-block-search__button:hover {
	background: var(--bronze);
}

/* Skip-Link liefert WordPress selbst (Block-Themes); nur Farben angleichen */
.skip-link.screen-reader-text:focus {
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-ui);
}

/* Kommentare */
.wp-block-comments {
	font-size: 1rem;
}

.wp-block-comment-author-name {
	font-family: var(--font-ui);
	font-weight: 500;
}

.wp-block-comment-date,
.wp-block-comment-edit-link,
.wp-block-comment-reply-link {
	font-family: var(--font-ui);
	font-size: 0.85rem;
}

/* Beitragsnavigation */
.wp-block-post-navigation-link {
	font-family: var(--font-ui);
	font-size: 0.95rem;
}

/* Paginierung */
.wp-block-query-pagination {
	font-family: var(--font-ui);
	font-size: 0.9rem;
}

.wp-block-query-pagination-numbers .current {
	color: var(--bronze);
	font-weight: 600;
}

/* ============================================================
   13. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) and (min-width: 782px) {
	/* Vierspaltige Raster (Fächer, Fakten, Footer) als 2 × 2 */
	.footer-columns {
		flex-wrap: wrap;
	}

	.footer-columns > .wp-block-column {
		flex-basis: calc(50% - 1.25rem) !important;
	}
}

@media (max-width: 781px) {
	:where(.wp-site-blocks [id]) {
		scroll-margin-top: 4.5rem;
	}

	/* Header-Button wandert ins Overlay-Menü (Spezifität > Layout-Klassen von WP) */
	.site-header .wp-block-buttons.header-actions {
		display: none;
	}

	.site-header .wp-block-navigation {
		flex: 0 0 auto;
	}

	.wp-block-group.is-style-dial {
		max-width: 22rem;
		margin-top: 1.5rem;
	}

	/* Fakten: zweispaltig, ohne vertikale Trennlinien */
	.facts > .wp-block-group + .wp-block-group {
		border-left: 0;
		padding-left: 0;
	}

	.facts > .wp-block-group {
		padding-right: 0;
	}

	.hours-row {
		flex-wrap: wrap;
	}

	.hours-row p:last-child {
		text-align: left;
	}
}

@media (max-width: 599px) {
	.site-header .wp-block-site-logo img {
		max-height: 2.5rem;
		width: auto;
	}

	.site-brand .wp-block-site-title {
		font-size: 1.25rem;
	}
}

/* ============================================================
   14. REDUCED MOTION & PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.wp-block-group.is-style-dial::before {
		animation: none !important;
	}

	.js .hero .wp-block-column:first-child > *,
	.js .hero .is-style-dial,
	.js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.is-style-label::before,
	.ticker.is-ready .ticker__track,
	.wp-block-group.is-style-dial > .seal img,
	.wp-block-group.is-style-area-beckenboden .hero .wp-block-column:last-child::before {
		animation: none !important;
	}
}

@media print {
	.site-header,
	.site-footer,
	.header-actions {
		display: none !important;
	}

	.wp-block-group.is-style-vault {
		background: none;
		color: #000;
	}

	.wp-block-details > :not(summary) {
		display: block;
	}
}