/* ==========================================================================
   Buschening-Kaffenberger – Theme-Styles
   ========================================================================== */

/* Schriften (lokal) */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bebas-neue-400.woff2") format("woff2"); }
@font-face { font-family: "Saira Extra Condensed"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/saira-extra-condensed-900.woff2") format("woff2"); }
@font-face { font-family: "Saira Extra Condensed"; font-style: normal; font-weight: 200; font-display: swap; src: url("../fonts/saira-extra-condensed-200.woff2") format("woff2"); }
@font-face { font-family: "Vujahday Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/vujahday-script-400.woff2") format("woff2"); }
@font-face { font-family: "Nothing You Could Do"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nothing-you-could-do-400.woff2") format("woff2"); }

:root {
	--c-accent: #bf315f;
	--c-accent-dark: #a2264f;
	--c-hot: #e2357a;          /* Pink der Slide-Texte */
	--c-text: #1a1a1a;
	--c-body: #4a4a4a;
	--c-muted: #8a8a8a;
	--c-disabled: #cfcfcf;
	--c-light: #dedede;
	--c-white: #fff;

	--f-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;

	--container: 1262px;
	--gutter: clamp(20px, 4vw, 40px);
	--header-h: 128px;          /* volle Höhe (Platzhalter im Layout) */
	--header-h-small: 80px;     /* geschrumpft beim Scrollen */
	--header-current: var(--header-h);
	--radius: 8px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 899px) {
	:root { --header-h: 72px; --header-h-small: 60px; }
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h-small);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--f-sans);
	font-size: 18px;
	line-height: 1.65;
	color: var(--c-body);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; color: var(--c-text); font-weight: 500; line-height: 1.15; }
figure { margin: 0; }
button { font: inherit; color: inherit; }

.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: 16px; top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--c-accent);
	color: var(--c-white);
	border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.text-accent { color: var(--c-accent); }

.kicker {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #444;
}

/* Buttons & Links
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 53px;
	padding: 12px 34px;
	border: 0;
	border-radius: var(--radius);
	background: var(--c-accent);
	color: var(--c-white);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, transform .2s var(--ease);
}
.btn:hover { background: var(--c-accent-dark); }
.btn svg, .link-arrow svg { width: 22px; height: 11px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg, .link-arrow:hover svg { transform: translateX(4px); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0 2px 9px;
	border: 0;
	border-bottom: 2px solid var(--c-accent);
	background: none;
	color: var(--c-text);
	font-size: 17px;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.link-arrow svg { color: var(--c-accent); }

/* Header
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	height: var(--header-current);
	background: var(--c-white);
	transition: height .3s var(--ease), box-shadow .3s;
}
/* Fester Header: Platz im Layout reservieren, damit beim Schrumpfen nichts springt */
body { padding-top: var(--header-h); }
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	/* Admin-Leiste scrollt hier mit: Header oben anliegen lassen */
	.admin-bar .site-header { top: 0; }
}

html.is-scrolled { --header-current: var(--header-h-small); }
html.is-scrolled .site-header { box-shadow: 0 2px 20px rgba(0, 0, 0, .08); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 100%;
}

.logo {
	display: inline-flex;
	align-items: baseline;
	gap: .2em;
	font-size: 29px;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-decoration: none;
	white-space: nowrap;
}
.logo { transition: font-size .3s var(--ease); }
.logo__first { color: #4a4a4a; }
.logo__last {
	color: var(--c-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav__list a {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-decoration: none;
	color: #333;
	transition: color .2s;
}
.nav__list a[href]:hover { color: var(--c-accent); }
.nav__list a[aria-disabled="true"] { color: var(--c-disabled); cursor: default; }
.nav__list .is-button { margin-left: 8px; }
.nav__list .is-button a {
	padding: 15px 36px;
	border-radius: var(--radius);
	background: var(--c-accent);
	color: var(--c-white);
	font-weight: 500;
	font-size: 15px;
}
.nav__list .is-button a:hover { background: var(--c-accent-dark); color: var(--c-white); }

.nav__list .is-button a { transition: padding .3s var(--ease), background-color .2s; }
@media (min-width: 900px) {
	html.is-scrolled .logo { font-size: 24px; }
	html.is-scrolled .nav__list .is-button a { padding-block: 11px; }
}

.nav-toggle { display: none; }

@media (max-width: 1100px) and (min-width: 900px) {
	.logo { font-size: 24px; }
	.nav__list { gap: 18px; }
	.nav__list .is-button a { padding: 13px 24px; }
}

@media (max-width: 899px) {
	.logo { font-size: clamp(17px, 5vw, 22px); }
	.logo__last { text-underline-offset: 4px; }

	.nav-toggle {
		position: relative;
		z-index: 60;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 7px;
		width: 44px;
		height: 44px;
		margin-right: -6px;
		padding: 8px 6px;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.nav-toggle__bar {
		display: block;
		height: 2px;
		background: var(--c-accent);
		transition: transform .3s var(--ease), opacity .2s;
	}
	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(9px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) { transform: translateY(-9px) rotate(-45deg); }

	.nav {
		position: fixed;
		inset: var(--header-current) 0 0;
		z-index: 55;
		display: flex;
		align-items: flex-start;
		padding: 32px var(--gutter) 48px;
		background: var(--c-white);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
	}
	.nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity .25s, transform .3s var(--ease);
	}
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
	.nav__list li { border-bottom: 1px solid #eee; }
	.nav__list a { padding: 16px 0; font-size: 18px; }
	.nav__list .is-button { margin: 24px 0 0; border: 0; }
	.nav__list .is-button a { padding: 16px; text-align: center; }
	body.nav-open { overflow: hidden; }
}

/* Slideshow
   ==========================================================================
   Hintergrundbild ohne Text + echte Texte darüber. Die Bühne (.hero__stage)
   verhält sich wie object-fit: cover und hat das Format des Bildes (16:9,
   mobil 9:16). Alle Maße in cqw = 1 % der Bühnenbreite, dadurch sitzen Texte
   bei jeder Bildschirmgröße exakt wie in der Vorlage.
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: #2a1520;
	/* Volle Breite; Höhe aus dem Bildformat, aber nie höher als das Fenster */
	width: 100%;
	height: max(420px, min(calc(100vw * 945 / 1800), calc(100svh - var(--header-h))));
	container-type: size;
	touch-action: pan-y;
}

.hero__slides, .hero__slide, .hero__bg { position: absolute; inset: 0; }

.hero__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s ease, visibility 0s .9s;
}
.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .9s ease;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hero__stage {
	position: absolute;
	left: 50%;
	top: 50%;
	/* Bühne = Format des Hintergrundbilds, komplett sichtbar (contain) und mittig.
	   Das Bild selbst füllt den Slider (cover); so bleiben Texte bei jedem
	   Fensterformat vollständig sichtbar. */
	width: min(100cqw, 100cqh * var(--rd, 1.7778));
	aspect-ratio: var(--rd, 1.7778);
	transform: translate(-50%, -50%);
	container-type: inline-size;
	pointer-events: none;
	color: #fff;
}
.hero__stage a { pointer-events: auto; }

/* Textblock */
.hc {
	position: absolute;
	left: 5.86cqw;
	top: 6.78cqw;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.hc > * { margin: 0; }

.hc-kicker {
	font-family: var(--f-display);
	font-size: 4cqw;
	line-height: 1;
	letter-spacing: .085em;
	white-space: nowrap;
	color: #fff;
}
.hc-word { display: inline-block; }
.br-m { display: none; }
.hc-word.is-accent { color: var(--c-hot); }

.hc-title {
	display: flex;
	flex-direction: column;
	margin-top: 1.09cqw;
	font-family: "Saira Extra Condensed", var(--f-display);
	font-weight: 900;
	font-size: 11.21cqw;
	line-height: .749;
	letter-spacing: -.004em;
	text-transform: uppercase;
	color: #fff;
}
.hc-line { display: block; white-space: nowrap; overflow: hidden; padding-block: .06em; margin-block: -.06em; }
.hc-line > span { display: inline-block; }

.hc-divider {
	display: block;
	width: 11.18cqw;
	height: .78cqw;
	margin-top: 1.2cqw;
	background: var(--c-hot);
}
.hc-divider img { display: none; }

.hc-script {
	display: flex;
	flex-direction: column;
	margin-top: 1.5cqw;
	margin-left: -.3cqw;
	font-family: "Vujahday Script", cursive;
	font-size: calc(5.6cqw * var(--script-scale, 1));
	line-height: .98;
	color: var(--c-hot);
	-webkit-text-stroke: .012em var(--c-hot);
	transform: rotate(-7deg);
	transform-origin: left top;
}
.hc-sline { display: block; white-space: nowrap; }
.hc-sline:nth-child(2) { padding-left: .55em; }
.hc-sline > span { display: inline-block; }

/* Schatten: dezent immer, kräftig für helle Hintergründe */
.hc-kicker { text-shadow: 0 .02em .12em rgba(0, 0, 0, .25); }
.hc-title { filter: drop-shadow(0 .01em .04em rgba(0, 0, 0, .25)); }
.has-shadow .hc-title { filter: drop-shadow(.02em .03em .03em rgba(0, 0, 0, .35)) drop-shadow(0 .03em .12em rgba(0, 0, 0, .2)); }
.has-shadow .hc-kicker { text-shadow: .03em .05em .08em rgba(0, 0, 0, .3); }
.has-shadow .hc-script { text-shadow: .02em .03em .05em rgba(0, 0, 0, .15); }
/* Helle Hintergründe: kräftigeres, dunkleres Pink wie in der Vorlage */
.has-shadow { --c-hot: #d91c63; }
.has-shadow .hc-script { color: #c8124f; -webkit-text-stroke-color: #c8124f; }

/* Kampagne mit Button: Block etwas höher, Button kompakter unter der Pinselschrift */
.layout-campaign.has-button .hc { top: 4.2cqw; }
.layout-campaign.has-button .hc-script { line-height: .9; }
.layout-campaign .hero__btn {
	margin-top: .9cqw !important;
	height: 3.2cqw;
	padding: 0 2.4cqw;
	font-size: 1.1cqw;
}

/* Layout „Porträt“ (Slide 1) */
.layout-portrait .hc { left: 6.56cqw; top: 8.41cqw; }
.layout-portrait .hc-kicker {
	font-family: var(--f-sans);
	font-weight: 600;
	font-size: 1.52cqw;
	letter-spacing: .005em;
	word-spacing: .8em;
}
.layout-portrait .hc-title { margin-top: 1.9cqw; font-weight: 400; }
.layout-portrait .hc-bold {
	font-family: var(--f-display);
	font-size: 15.71cqw;
	line-height: .8;
	letter-spacing: 0;
}
.layout-portrait .hc-light {
	font-family: "Saira Extra Condensed", var(--f-display);
	font-weight: 200;
	font-size: 6.78cqw;
	line-height: .844;
	letter-spacing: -.035em;
}
.layout-portrait .hc-bold + .hc-light { margin-top: -1.2cqw; }
.layout-portrait .hc-divider {
	width: 31.17cqw;
	height: auto;
	margin-top: 1.25cqw;
	background: none;
}
.layout-portrait .hc-divider img { display: block; width: 100%; height: auto; }

.hc-note {
	position: absolute;
	left: 41.4cqw;
	top: 5.1cqw;
	margin: 0;
	display: flex;
	flex-direction: column;
	font-family: "Nothing You Could Do", cursive;
	font-size: 3.16cqw;
	line-height: 1.1;
	color: #fff;
	transform: rotate(-9deg);
	transform-origin: left top;
	text-shadow: 0 .03em .2em rgba(0, 0, 0, .25);
}
.hc-nline { display: block; white-space: nowrap; }
.hc-nline:nth-child(1) { padding-left: .45em; }
.hc-nline:nth-child(2) { padding-left: .35em; }
.hc-nline:nth-child(4) { padding-left: .3em; }
.hc-nline > span { display: inline-block; }
.hc-heart {
	display: block;
	width: 1.25em;
	margin: 0 0 0 1.45em;
	fill: none;
	stroke: #fa497c;
	stroke-width: 2.4;
	stroke-linecap: round;
	transform: rotate(9deg);
}

.hero__btn {
	margin-top: 3cqw !important;
	height: 4.66cqw;
	min-height: 0;
	padding: 0 3.2cqw;
	gap: 1cqw;
	font-size: 1.23cqw;
	box-shadow: 0 .4cqw 1.6cqw rgba(0, 0, 0, .22);
}
.hero__btn svg { width: 1.4cqw; height: .7cqw; }

/* Glitzer (Showbiz-Akzent) */
.hc-sparkles { position: absolute; inset: 0; pointer-events: none; }
.hc-sparkles i {
	position: absolute;
	width: 1.3cqw;
	aspect-ratio: 1;
	background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, #fff 22% 28%, transparent 30% 45%, #fff 47% 53%, transparent 55% 70%, #fff 72% 78%, transparent 80% 95%, #fff 97%);
	-webkit-mask: radial-gradient(circle, #000 0 30%, transparent 70%);
	mask: radial-gradient(circle, #000 0 30%, transparent 70%);
	opacity: 0;
	filter: drop-shadow(0 0 .4cqw rgba(255, 255, 255, .9));
}
.hc-sparkles i:nth-child(1) { left: 36cqw; top: 13cqw; }
.hc-sparkles i:nth-child(2) { left: 4cqw; top: 22cqw; width: .9cqw; }
.hc-sparkles i:nth-child(3) { left: 40cqw; top: 30cqw; width: .8cqw; }
.hc-sparkles i:nth-child(4) { left: 24cqw; top: 6cqw; width: 1cqw; }

/* Pfeile & Punkte */
.hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-top: -28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	color: #333;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background-color .2s;
}
.hero__arrow:hover { background: rgba(255, 255, 255, .85); }
.hero__arrow svg { width: 26px; height: 26px; }
.hero__arrow--prev { left: 18px; }
.hero__arrow--next { right: 18px; }

.hero__dots {
	position: absolute;
	left: 50%;
	bottom: 24px;
	z-index: 2;
	display: flex;
	gap: 10px;
	transform: translateX(-50%);
}
.hero__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .7);
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.hero__dot.is-active { background: var(--c-hot); transform: scale(1.1); }

@media (min-width: 768px) {
	.hero__dots { display: none; }
}

/* Smartphone: Bühne im Hochformat 9:16 */
@media (max-width: 767px) {
	.hero {
		height: auto;
		aspect-ratio: 9 / 16;
		max-height: none;
		min-height: 0;
	}
	.hero__stage {
		width: min(100cqw, 100cqh * var(--rm, .5625));
		aspect-ratio: var(--rm, .5625);
	}
	.hero__slide:not(.has-mobile) .hero__img { object-position: 72% center; }
	/* Ohne eigenes Mobilbild liegt der Text über dem Motiv: dezenter Verlauf für Lesbarkeit */
	.hero__slide:not(.has-mobile) .hero__bg::after {
		content: "";
		position: absolute;
		inset: 0 0 40% 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, .38), rgba(0, 0, 0, .18) 60%, transparent);
		pointer-events: none;
	}

	.hc { left: 7.7cqw; top: 9.5cqw; right: 6cqw; bottom: 4.6cqw; }
	.hc-kicker { font-size: 6.4cqw; }
	.hc-title { font-size: 17.5cqw; margin-top: 2cqw; }
	.hc-divider { width: 22cqw; height: 1.5cqw; margin-top: 2.6cqw; }
	.hc-script { font-size: calc(10cqw * var(--script-scale, 1)); margin-top: 3.5cqw; }

	/* Kampagnen-Slides nach Mobil-Vorlage. Feinjustierung pro Slide über
	   --m-scale (Textgröße), --m-top, --m-left aus dem Backend. */
	.hero__slide.layout-campaign .hc {
		left: var(--m-left, 10.4cqw);
		top: var(--m-top, 5.7cqw);
		--s: var(--m-scale, 1);
	}
	.layout-campaign .hc-kicker {
		font-size: calc(7.09cqw * var(--s));
		letter-spacing: .12em;
		word-spacing: .1em;
		line-height: 1;
		margin-bottom: .25em;
	}
	.layout-campaign .hc-kicker.has-mbreak { font-size: calc(8.5cqw * var(--s)); line-height: 1.04; }
	.layout-campaign .hc-title {
		margin-top: 0;
		font-size: calc(20.8cqw * var(--s));
		line-height: .72;
		letter-spacing: .05em;
	}
	.layout-campaign .hc-divider {
		width: calc(20.2cqw * var(--s));
		height: 1.55cqw;
		margin-top: calc(3cqw * var(--s));
	}
	.layout-campaign .hc-script {
		font-size: calc(9.4cqw * var(--s) * var(--m-ss, 1));
		line-height: .86;
		margin-top: calc(2cqw * var(--s));
		translate: var(--m-sx, 0) var(--m-sy, 0);
	}
	.layout-campaign .hc-sline:nth-child(2) { padding-left: .5em; }
	.hero__slide.layout-campaign .hero__btn {
		margin: 0 !important;
		height: 11cqw;
		padding: 0;
		font-size: 4.1cqw;
		gap: 3cqw;
	}
	.br-m { display: inline; }

	.layout-portrait .hc { left: 7.7cqw; top: 12.1cqw; }
	.layout-portrait .hc-kicker { font-size: 2.6cqw; word-spacing: 1.45em; }
	.layout-portrait .hc-title { margin-top: 3.7cqw; }
	.layout-portrait .hc-bold { font-size: 25.7cqw; }
	.layout-portrait .hc-light { font-size: 11.3cqw; }
	.layout-portrait .hc-divider { margin-top: 1.6cqw; width: 52cqw; }

	.hc-note {
		left: 8.4cqw;
		top: 68cqw;
		font-size: 6.15cqw;
		line-height: 1.12;
		transform: rotate(-10deg);
	}
	.hc-heart { width: 1.3em; margin: .3em 0 0 1.1em; transform: none; }

	.hero__btn {
		position: absolute;
		left: 12.6cqw;
		right: 12.6cqw;
		bottom: 0;
		margin: 0 !important;
		height: 11cqw;
		padding: 0;
		font-size: 4.1cqw;
		gap: 3cqw;
	}
	.hero__btn svg { width: 5cqw; height: 2.5cqw; }

	.hero__arrow {
		top: 63%;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		background: rgba(255, 255, 255, .9);
	}
	.hero__arrow svg { width: 20px; height: 20px; }
	.hero__arrow--prev { left: 14px; }
	.hero__arrow--next { right: 14px; }
	.hero__dots { bottom: calc(4.6% + 11cqw + 22px); }
	/* Kampagnen-Slides: Pfeile neben die Punkte, damit sie nicht über der Pinselschrift liegen */
	.hero:has(.layout-campaign.is-active) .hero__arrow {
		top: auto;
		bottom: calc(4.6% + 11cqw + 28px - 20px);
		margin-top: 0;
		transition: background-color .2s, bottom .3s;
	}
}

/* Aufbau-Animation
   ==========================================================================
   Startet jedes Mal, wenn ein Slide aktiv wird (Klasse .is-active).
   Reihenfolge: Bild zoomt sanft, Dachzeile Wort für Wort, Titelzeilen fahren
   aus einer Maske, Glanzlicht über die Schrift, Pinselstrich wird gemalt,
   Pinsel-/Handschrift „schreibt“ sich, Button federt rein, Glitzer.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.hero__slide.is-active .hero__img { animation: bk-kenburns 7s cubic-bezier(.2, .6, .2, 1) both; }

	.hero__slide .hc-word,
	.hero__slide .hc-line > span,
	.hero__slide .hc-divider,
	.hero__slide .hc-sline > span,
	.hero__slide .hc-nline > span,
	.hero__slide .hc-heart,
	.hero__slide .hero__btn { opacity: 0; }

	.hero__slide.is-active .hc-word {
		animation: bk-word .7s cubic-bezier(.2, .8, .2, 1) both;
		animation-delay: calc(.15s + var(--i) * .09s);
	}
	.hero__slide.is-active .hc-line > span {
		animation: bk-rise .85s cubic-bezier(.16, 1, .3, 1) both;
		animation-delay: calc(.45s + var(--i) * .13s);
	}
	.hero__slide.is-active .hc-bold > span {
		background: linear-gradient(105deg, #fff 0 44%, #ffd6e6 48%, #fff 52%, #fff 100%) 100% 0 / 300% 100% no-repeat text;
		-webkit-text-fill-color: transparent;
		animation: bk-rise .85s cubic-bezier(.16, 1, .3, 1) both, bk-shine 1.4s ease-in-out both;
		animation-delay: calc(.45s + var(--i) * .13s), calc(1.5s + var(--i) * .12s);
	}
	.hero__slide.is-active .hc-divider {
		animation: bk-draw .7s cubic-bezier(.65, 0, .35, 1) both;
		animation-delay: 1.05s;
	}
	.hero__slide.is-active .hc-sline > span {
		animation: bk-write 1s cubic-bezier(.45, 0, .2, 1) both;
		animation-delay: calc(1.3s + var(--i) * .55s);
	}
	.hero__slide.is-active .hc-nline > span {
		animation: bk-write .7s cubic-bezier(.45, 0, .2, 1) both;
		animation-delay: calc(1.1s + var(--i) * .38s);
	}
	.hero__slide.is-active .hc-heart {
		animation: bk-pop .7s cubic-bezier(.34, 1.56, .64, 1) both, bk-beat 1.6s ease-in-out 3.4s infinite;
		animation-delay: 2.7s, 3.4s;
	}
	.hero__slide.is-active .hero__btn {
		animation: bk-pop .8s cubic-bezier(.34, 1.56, .64, 1) both;
		animation-delay: 1.75s;
	}
	.hero__slide.is-active .hc-sparkles i {
		animation: bk-twinkle 2.4s ease-in-out infinite;
		animation-delay: calc(2s + var(--d, 0s));
	}
	.hc-sparkles i:nth-child(2) { --d: .7s; }
	.hc-sparkles i:nth-child(3) { --d: 1.3s; }
	.hc-sparkles i:nth-child(4) { --d: .35s; }

	/* Beim Verlassen: Text zügig ausblenden, Bild blendet weich über */
	.hero__slide:not(.is-active) .hc,
	.hero__slide:not(.is-active) .hc-note { opacity: 0; transition: opacity .35s ease; }
}

@keyframes bk-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes bk-word {
	from { opacity: 0; transform: translateY(.6em); filter: blur(6px); letter-spacing: .4em; }
	to { opacity: 1; transform: none; filter: none; }
}
@keyframes bk-rise {
	from { opacity: 0; transform: translateY(105%) skewY(4deg); }
	to { opacity: 1; transform: none; }
}
@keyframes bk-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes bk-draw {
	from { opacity: 1; clip-path: inset(0 100% 0 0); }
	to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes bk-write {
	from { opacity: 1; clip-path: inset(-20% 100% -40% -5%); transform: translateY(.08em); }
	to { opacity: 1; clip-path: inset(-20% -5% -40% -5%); transform: none; }
}
@keyframes bk-pop {
	from { opacity: 0; transform: translateY(1.2em) scale(.85); }
	to { opacity: 1; transform: none; }
}
@keyframes bk-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } 36% { transform: scale(1.1); } }
@keyframes bk-twinkle {
	0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
	45% { opacity: 1; transform: scale(1) rotate(45deg); }
	60% { opacity: .9; transform: scale(.9) rotate(60deg); }
}

/* Über mich
   ========================================================================== */
.about { padding: 64px 0 58px; }

.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 321px;
	gap: clamp(40px, 7vw, 100px);
	align-items: start;
}

.about__text { max-width: 840px; }

.about__title {
	margin-bottom: 26px;
	font-size: clamp(40px, 4.3vw, 62px);
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.about__teaser {
	font-size: clamp(18px, 1.5vw, 22px);
	line-height: 1.62;
	color: var(--c-body);
}

.accordion__toggle { margin-top: 60px; }

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .5s var(--ease);
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__inner { min-height: 0; overflow: hidden; }
.accordion__inner > :first-child { margin-top: 44px; }

.about__section { display: flow-root; margin-top: 40px; }
.about__section-title {
	margin-bottom: 12px;
	font-size: clamp(20px, 1.6vw, 24px);
	font-weight: 600;
	line-height: 1.3;
}
.about__section-text { font-size: 18px; }
.about__section-image {
	float: right;
	width: min(40%, 300px);
	margin: 6px 0 16px 32px;
	border-radius: 4px;
	overflow: hidden;
}
.about__section:nth-child(even) .about__section-image { float: left; margin: 6px 32px 16px 0; }
.about__section-image img { width: 100%; }

.about__image img { width: 100%; }

@media (max-width: 899px) {
	.about { padding: 48px 0 0; }
	.about__grid { grid-template-columns: 1fr; gap: 48px; }
	.accordion__toggle { margin-top: 36px; }
	.about__image { margin-inline: calc(var(--gutter) * -0.5); }
	.about__section-image,
	.about__section:nth-child(even) .about__section-image {
		float: none;
		width: 100%;
		margin: 0 0 18px;
	}
}

/* Kontakt
   ========================================================================== */
.contact {
	padding: 68px 0 40px;
	background: var(--c-light);
}

.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 593px);
	gap: clamp(40px, 7vw, 100px);
	align-items: start;
}

.contact__title {
	margin: 0 0 14px;
	font-family: var(--f-display);
	font-size: clamp(84px, 10vw, 146px);
	font-weight: 400;
	line-height: .86;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #000;
}

.contact__text {
	max-width: 570px;
	font-size: clamp(19px, 1.65vw, 24px);
	line-height: 1.5;
	color: #3a3a3a;
}
.contact__text p { margin-bottom: 1.4em; }

.contact__phone {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	font-size: 22px;
	font-weight: 500;
}
.contact__phone svg { width: 26px; height: 26px; color: var(--c-accent); }
.contact__phone a { text-decoration: none; }

.social {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}
.social a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--c-accent);
	transition: color .2s, transform .2s var(--ease);
}
.social a:hover { color: var(--c-accent-dark); transform: translateY(-2px); }
.social svg { width: 40px; height: 40px; }

/* Formular */
.form { display: grid; gap: 12px; }
.form__field { position: relative; }
.form input[type="text"],
.form input[type="email"],
.form textarea {
	display: block;
	width: 100%;
	padding: 16px 24px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--c-white);
	color: var(--c-text);
	font: inherit;
	font-size: 20px;
	line-height: 1.5;
	transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none;
	appearance: none;
}
.form textarea { min-height: 140px; resize: vertical; }
.form ::placeholder { color: #8f8f8f; opacity: 1; }
.form input:focus, .form textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(191, 49, 95, .15);
}
.form__field.has-error input,
.form__field.has-error textarea { border-color: #c62828; }
.form__error { margin: 6px 4px 0; font-size: 14px; color: #c62828; }
.form__error:empty { display: none; }

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.form__submit { min-width: 271px; height: 68px; font-size: 18px; }
.form__submit[disabled] { opacity: .6; cursor: progress; }
.form__privacy { flex: 1 1 220px; margin: 0; font-size: 13px; line-height: 1.5; color: #6b6b6b; }

.form__status p { margin: 4px 0 0; padding: 14px 18px; border-radius: var(--radius); font-size: 16px; }
.form__status .is-success { background: #fff; border-left: 4px solid var(--c-accent); color: var(--c-text); }
.form__status .is-error { background: #fff; border-left: 4px solid #c62828; color: #c62828; }

@media (max-width: 899px) {
	.contact { padding: 48px 0 32px; }
	.contact__grid { grid-template-columns: 1fr; gap: 32px; }
	.social { order: 3; justify-content: space-between; gap: 12px; margin-top: 0; }
	.form input[type="text"], .form input[type="email"], .form textarea { font-size: 18px; padding: 14px 20px; }
	.form__submit { width: 100%; min-width: 0; height: 60px; }
}

/* Social-Icons auf Mobil unter dem Formular, wie im Design */
@media (max-width: 899px) {
	.contact__grid { display: flex; flex-direction: column; gap: 0; }
	.contact__intro { display: contents; }
	.form { order: 4; margin-top: 28px; }
	.social { order: 5; margin-top: 40px; }
}

/* Footer
   ========================================================================== */
.site-footer {
	padding: 0 0 36px;
	background: var(--c-light);
}
.site-footer__inner { display: flex; justify-content: flex-end; }
.footer-nav {
	display: flex;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-nav a {
	font-size: 18px;
	font-weight: 500;
	color: var(--c-text);
	text-decoration: none;
}
.footer-nav a:hover { color: var(--c-accent); }

body:not(.home) .site-footer { padding-top: 36px; }

@media (max-width: 899px) {
	.site-footer__inner { justify-content: center; }
	.footer-nav a { font-size: 16px; }
}

/* Textseiten (Impressum, Datenschutz)
   ========================================================================== */
.page-content { padding-block: 64px 96px; }
.page-content__title {
	margin-bottom: 32px;
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 500;
}
.entry { max-width: 820px; font-size: 17px; }
.entry h2 { margin: 1.8em 0 .5em; font-size: 24px; }
.entry h3 { margin: 1.5em 0 .4em; font-size: 19px; font-weight: 600; }
.entry a { color: var(--c-accent); }
.entry ul, .entry ol { padding-left: 1.2em; }

/* Scroll-Animationen „Über mich“ & „Kontakt“
   ==========================================================================
   Startet, sobald der Bereich ins Bild scrollt (Klasse .is-inview per JS).
   Ohne JavaScript oder mit „Bewegung reduzieren“ ist alles sofort sichtbar.
   ========================================================================== */
.rv-word, .rv-tword, .rv-accent, .rv-char { display: inline-block; }
/* Einfliegende Elemente dürfen keinen seitlichen Scrollbalken erzeugen */
[data-reveal] { overflow-x: clip; }
.about__title .text-accent { white-space: nowrap; }
.rv-img { position: relative; overflow: hidden; }
.rv-glint {
	position: absolute;
	inset: -10% auto -10% 0;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .55) 55%, transparent);
	transform: translateX(-150%) skewX(-12deg);
	pointer-events: none;
	mix-blend-mode: soft-light;
}
.rv-sparkles { position: absolute; inset: 0; pointer-events: none; }
.rv-sparkles i {
	position: absolute;
	width: 22px;
	aspect-ratio: 1;
	background: conic-gradient(from 45deg, transparent 0 20%, #fff 22% 28%, transparent 30% 45%, #fff 47% 53%, transparent 55% 70%, #fff 72% 78%, transparent 80% 95%, #fff 97%);
	-webkit-mask: radial-gradient(circle, #000 0 30%, transparent 70%);
	mask: radial-gradient(circle, #000 0 30%, transparent 70%);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95));
	opacity: 0;
}
.rv-sparkles i:nth-child(1) { right: 12%; top: 9%; }
.rv-sparkles i:nth-child(2) { right: 30%; top: 4%; width: 14px; --d: .8s; }
.rv-sparkles i:nth-child(3) { left: 10%; bottom: 14%; width: 16px; --d: 1.5s; }

.contact__title { position: relative; isolation: isolate; }
.contact__title::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -35%;
	bottom: -35%;
	left: 0;
	width: 45%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	html.js [data-reveal] :is(.rv-word, .rv-tword, .rv-accent, .rv-fade, .rv-link, .rv-char, .rv-pop, .rv-field) { opacity: 0; }
	html.js [data-reveal] .rv-img { clip-path: inset(100% 0 0 0); }

	/* Dachzeilen: Wort für Wort, wie im Slider */
	[data-reveal].is-inview .kicker .rv-word {
		animation: bk-word .7s cubic-bezier(.2, .8, .2, 1) both;
		animation-delay: calc(.1s + var(--i) * .08s);
	}

	/* Überschrift „Mehr als Brautmode.“ */
	[data-reveal].is-inview .rv-tword,
	[data-reveal].is-inview .rv-accent {
		animation: bk-flip .9s cubic-bezier(.16, 1, .3, 1) both;
		animation-delay: calc(.3s + var(--i) * .12s);
	}
	[data-reveal].is-inview .rv-accent .rv-tword-inner {
		display: inline-block;
		background: linear-gradient(105deg, var(--c-accent) 0 44%, #ff9cc2 48%, var(--c-accent) 52%, var(--c-accent) 100%) 100% 0 / 300% 100% no-repeat text;
		-webkit-text-fill-color: transparent;
		animation: bk-shine 1.3s ease-in-out 1.05s both;
	}

	[data-reveal].is-inview .rv-fade {
		animation: bk-fade-up .9s cubic-bezier(.2, .8, .2, 1) both;
		animation-delay: var(--d, .6s);
	}

	/* „Weiter lesen“: Link wischt sich mit Unterstrich rein, Pfeil stupst */
	[data-reveal].is-inview .rv-link {
		animation: bk-wipe .8s cubic-bezier(.65, 0, .35, 1) 1.05s both;
	}
	[data-reveal].is-inview .rv-link svg { animation: bk-nudge 1.2s ease-in-out 1.9s 2; }

	/* Porträt: Vorhang auf, Bild zoomt, Blitzlicht, Glitzer */
	[data-reveal].is-inview .rv-img { animation: bk-curtain 1.1s cubic-bezier(.65, 0, .35, 1) .35s both; }
	[data-reveal].is-inview .rv-img img { animation: bk-zoom-out 1.8s cubic-bezier(.2, .6, .2, 1) .35s both; }
	[data-reveal].is-inview .rv-glint { animation: bk-glint 1.1s ease-in-out 1.35s both; }
	[data-reveal].is-inview .rv-sparkles i { animation: bk-twinkle 2.6s ease-in-out infinite; animation-delay: calc(1.8s + var(--d, 0s)); }

	/* Langtext: Abschnitte gleiten nacheinander rein */
	.accordion__panel.is-open .about__section {
		animation: bk-fade-up .7s cubic-bezier(.2, .8, .2, 1) both;
		animation-delay: calc(.15s + var(--i) * .1s);
	}

	/* LET'S TALK!: Buchstaben fallen wie auf eine Bühne, Scheinwerfer zieht vorbei */
	[data-reveal].is-inview .rv-char {
		animation: bk-drop .75s cubic-bezier(.34, 1.56, .64, 1) both;
		animation-delay: calc(.25s + var(--i) * .055s);
	}
	[data-reveal].is-inview .contact__title .text-accent .rv-char:last-child {
		transform-origin: 50% 90%;
		animation: bk-drop .75s cubic-bezier(.34, 1.56, .64, 1) both, bk-swing 1.2s ease-in-out both;
		animation-delay: calc(.25s + var(--i) * .055s), calc(.95s + var(--i) * .055s);
	}
	[data-reveal].is-inview .contact__title::before { animation: bk-spot 1.6s ease-in-out 1s both; }

	/* Social-Icons ploppen auf */
	[data-reveal].is-inview .rv-pop {
		animation: bk-pop-spin .7s cubic-bezier(.34, 1.56, .64, 1) both;
		animation-delay: calc(1.15s + var(--i) * .08s);
	}

	/* Formular: Felder gleiten von rechts rein, Button glüht kurz auf */
	[data-reveal].is-inview .rv-field {
		animation: bk-slide-in .8s cubic-bezier(.16, 1, .3, 1) both;
		animation-delay: calc(.4s + var(--i) * .11s);
	}
	[data-reveal].is-inview .form__submit { animation: bk-glow 1.4s ease-in-out 1.5s both; }
}

@keyframes bk-flip {
	from { opacity: 0; transform: translateY(.55em) rotate(4deg); filter: blur(5px); }
	to { opacity: 1; transform: none; filter: none; }
}
@keyframes bk-fade-up {
	from { opacity: 0; transform: translateY(24px); filter: blur(4px); }
	to { opacity: 1; transform: none; filter: none; }
}
@keyframes bk-wipe {
	from { opacity: 1; clip-path: inset(-20% 100% -20% 0); }
	to { opacity: 1; clip-path: inset(-20% -10% -20% 0); }
}
@keyframes bk-nudge { 0%, 100% { transform: none; } 40% { transform: translateX(6px); } }
@keyframes bk-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bk-zoom-out { from { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes bk-glint {
	from { transform: translateX(-150%) skewX(-12deg); }
	to { transform: translateX(320%) skewX(-12deg); }
}
@keyframes bk-drop {
	from { opacity: 0; transform: translateY(-.55em) rotate(-10deg) scale(.9); }
	to { opacity: 1; transform: none; }
}
@keyframes bk-swing {
	0%, 100% { transform: none; }
	25% { transform: rotate(12deg); }
	50% { transform: rotate(-8deg); }
	75% { transform: rotate(4deg); }
}
@keyframes bk-spot {
	0% { opacity: 0; left: -45%; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; left: 100%; }
}
@keyframes bk-pop-spin {
	from { opacity: 0; transform: scale(0) rotate(-25deg); }
	to { opacity: 1; transform: none; }
}
@keyframes bk-slide-in {
	from { opacity: 0; transform: translateX(48px); filter: blur(4px); }
	to { opacity: 1; transform: none; filter: none; }
}
@keyframes bk-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(191, 49, 95, 0); }
	40% { box-shadow: 0 0 0 10px rgba(191, 49, 95, .18), 0 8px 30px rgba(191, 49, 95, .35); }
}

/* Bewegung reduzieren
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}