/*
 * BeniBro – ergänzende Regeln, die theme.json nicht abbilden kann.
 * Farben und Größen immer über die Preset-Variablen, nie als feste Werte.
 */

/* Sichtbarer Tastatur-Fokus: Senf-Ring mit Espresso-Kante,
   damit er auf hellem und dunklem Grund erkennbar ist. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--senf);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--espresso);
	border-radius: 2px;
}

/* Skip-Link („Zum Inhalt springen“), von WordPress automatisch erzeugt. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--senf);
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--text);
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	text-decoration: none;
	z-index: 100000;
}

/* Fließtext nicht breiter als ca. 70 Zeichen. */
:where(.wp-block-post-content, .entry-content) > p {
	max-width: 70ch;
}

/* Header */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--creme);
	padding: var(--wp--preset--spacing--50) clamp(1rem, 4vw, 3rem);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
}

.site-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--senf);
}

/* Auf Mobile übernimmt der Sticky-Button unten die Anfrage. */
@media (max-width: 781px) {
	.site-header .site-header__cta {
		display: none;
	}
}

/* Sticky „Termin anfragen“ auf Mobile */
.wp-block-buttons.mobile-cta {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-buttons.mobile-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		margin: 0;
		padding: 0.75rem clamp(1rem, 4vw, 3rem) calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--wp--preset--color--espresso);
		border-top: 1px solid rgb(228 162 58 / 0.35);
	}

	.mobile-cta .wp-block-button,
	.mobile-cta .wp-block-button__link {
		width: 100%;
	}

	/* Platz schaffen, damit der Button nichts verdeckt. */
	.wp-site-blocks::after {
		content: "";
		display: block;
		height: 4.75rem;
		background: var(--wp--preset--color--espresso);
	}
}

/* Footer: Sekundärtext in Sand */
.site-footer .has-sand-color a {
	color: inherit;
}

/* Bewegung reduzieren, wenn gewünscht. */
@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;
	}
}

/* Startseite: Kennzahlen */
.stats .stats__value {
	margin: 0;
	line-height: 1;
}

/* Überschriften, die nicht über die ganze Breite laufen sollen */
.is-measure-narrow {
	max-width: 22ch;
}

/* Leicht versetzte Spalten für ein ruhiges, asymmetrisches Raster */
@media (min-width: 782px) {
	.is-staggered > .wp-block-column:nth-child(2) {
		padding-top: var(--wp--preset--spacing--60);
	}
}

/* Media & Text: großzügiger Innenabstand, Bild auf Mobile in sinnvoller Höhe */
.wp-block-media-text .wp-block-media-text__content {
	padding: var(--wp--preset--spacing--60) clamp(1rem, 6vw, 6rem);
}

.wp-block-media-text .wp-block-media-text__content > * {
	max-width: 34rem;
}

@media (max-width: 600px) {
	.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
		min-height: 70vw;
	}
}

/* Lange deutsche Wörter in großen Headlines sauber trennen statt überlaufen lassen */
:where(h1, h2, h3) {
	overflow-wrap: break-word;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
}

/* Zwei dunkle Bereiche direkt hintereinander: ohne hellen Spalt */
.alignfull.is-style-section-nacht + .alignfull.is-style-section-nacht {
	margin-block-start: 0;
}

/* Seiteneinstieg (Event-Seiten, Über mich): dunkel, großes Foto rechts */
.page-intro.wp-block-media-text {
	min-height: min(82vh, 48rem);
}

.page-intro .wp-block-media-text__content > h1 {
	margin-top: 0;
}

/* Sprungziel „Datum prüfen“ nicht unter dem Header verstecken */
#datum {
	scroll-margin-top: 1rem;
}

/* Auf der Anfrage- und Danke-Seite: kein fester „Termin anfragen“-Button */
@media (max-width: 781px) {
	.is-inquiry-page .wp-block-buttons.mobile-cta {
		display: none;
	}

	.is-inquiry-page .wp-site-blocks::after {
		content: none;
	}
}

/* ==========================================================================
   Bewegung („Club-Energie“) – nur mit <html class="has-motion">.
   Ohne JavaScript oder bei „Bewegung reduzieren“ greift nichts davon.
   ========================================================================== */

/* Bis das Skript übernimmt: Seiteneinstieg kurz ausblenden (verhindert Aufblitzen) */
.has-motion:not(.motion-ready):not(.motion-fallback) :is(.page-intro .wp-block-media-text__content, main .wp-block-post-title) {
	opacity: 0;
}

/* Überschriften Wort für Wort */
.has-motion .mw {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
	vertical-align: bottom;
}

.has-motion .mw__in {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) calc(var(--i, 0) * 70ms);
}

.has-motion .is-in .mw__in {
	transform: none;
}

/* Texte, Karten, Buttons gleiten hoch */
.has-motion [data-reveal] {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 0.7s ease calc(var(--i, 0) * 110ms + 120ms),
		transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) calc(var(--i, 0) * 110ms + 120ms);
}

.has-motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* Bilder werden von links aufgezogen.
   Nur das Bild wird beschnitten, nicht der Rahmen – sonst meldet der Browser den Rahmen nie als sichtbar. */
.has-motion [data-wipe] {
	overflow: hidden;
}

.has-motion [data-wipe] img {
	clip-path: inset(0 100% 0 0);
	transform: scale(1.2);
	transition:
		clip-path 2.2s cubic-bezier(0.77, 0, 0.18, 1) calc(var(--i, 0) * 120ms),
		transform 2.8s cubic-bezier(0.2, 0.9, 0.25, 1) calc(var(--i, 0) * 120ms);
}

.has-motion [data-wipe].is-in img {
	clip-path: inset(0);
	transform: none;
}

/* Sicherheitsnetz: Skript nicht geladen → alles sichtbar */
.motion-fallback:not(.motion-ready) :is([data-reveal], [data-wipe] img, .mw__in, .page-intro .wp-block-media-text__content, main .wp-block-post-title) {
	opacity: 1 !important;
	clip-path: none !important;
	transform: none !important;
}

/* Startseite dunkel: Kennzahlen in Senf, große Zahlen eng gesetzt */
.is-style-section-nacht .stats .stats__value {
	color: var(--wp--preset--color--senf);
	font-weight: 300;
	font-variant-numeric: tabular-nums;
}

.is-style-section-nacht .stats .stats__item p:not(.stats__value) {
	color: var(--wp--preset--color--sand);
}

/* Anlässe-Karten: Bild leicht zoomen beim Überfahren */
.is-style-section-nacht .wp-block-column .wp-block-image {
	overflow: hidden;
}

.is-style-section-nacht .wp-block-column .wp-block-image img {
	transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.is-style-section-nacht .wp-block-column:hover .wp-block-image img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.is-style-section-nacht .wp-block-column:hover .wp-block-image img {
		transform: none;
	}
}

/* Footer schließt direkt an (sonst heller Streifen nach dunklem letzten Bereich) */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Volle Bereiche direkt übereinander: kein Abstand (Hintergründe stoßen nahtlos aneinander) */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Karten auf dem Handy seitlich wischen statt untereinander */
@media (max-width: 781px) {
	.wp-block-columns.is-swipe-mobile {
		flex-wrap: nowrap !important;
		gap: var(--wp--preset--spacing--20) !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.wp-block-columns.is-swipe-mobile::-webkit-scrollbar {
		display: none;
	}

	.wp-block-columns.is-swipe-mobile.is-swipe-mobile > .wp-block-column {
		flex: 0 0 78% !important;
		flex-basis: 78% !important;
		scroll-snap-align: start;
	}
}

/* FAQ-Seite: dunkle Bühne mit warmem Senf-Glühen (wie Bühnenlicht) */
.faq-stage,
.glow-band.is-style-section-nacht {
	background:
		radial-gradient(45rem 24rem at 80% 20rem, rgb(228 162 58 / 0.18), transparent 70%),
		radial-gradient(45rem 40rem at -10% 85%, rgb(129 66 25 / 0.5), transparent 65%),
		linear-gradient(180deg, var(--wp--preset--color--espresso) 0%, #311e14 55%, #3d2416 100%);
}

.faq-stage .faq__group {
	color: var(--wp--preset--color--senf);
}

.faq-aside .wp-block-mrbro-equalizer {
	margin-top: var(--wp--preset--spacing--50);
	opacity: 0.7;
}

@media (min-width: 782px) {
	/* Einstieg bleibt beim Scrollen stehen */
	.faq-aside {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--preset--spacing--50));
		align-self: flex-start;
	}
}

/* ---------- Event-Seiten: Farbflächen und Elemente ---------- */

/* Versprechen mit Zahlen: warmer Verlauf Espresso → Rost */
.statement-band.is-style-section-nacht {
	background:
		radial-gradient(40rem 20rem at 50% 0%, rgb(228 162 58 / 0.14), transparent 70%),
		linear-gradient(120deg, var(--wp--preset--color--espresso) 0%, #311e14 45%, #643012 100%);
}

.statement-band .has-text-align-center {
	max-width: 22ch;
	margin-inline: auto !important;
	text-wrap: balance;
	line-height: 1.15;
}

.statement-band .stats.stats {
	max-width: var(--wp--style--global--wide-size);
	justify-content: center;
	column-gap: var(--wp--preset--spacing--70);
	text-align: center;
}

.statement-band .stats__item {
	align-items: center;
}

/* Moderation: tiefer Rost-Grund */
.rost-band.is-style-section-nacht {
	background: linear-gradient(160deg, #643012 0%, var(--wp--preset--color--rost) 55%, #5a2c10 100%);
}

.pull-quote {
	margin: 0;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--senf);
	color: var(--wp--preset--color--creme);
	font-weight: 300;
	line-height: 1.05;
}

/* Liste mit Senf-Strichen statt Punkten */
.check-list {
	padding-left: 0;
	list-style: none;
}

.check-list li {
	position: relative;
	padding: 0.6rem 0 0.6rem 2.25rem;
	border-bottom: 1px solid rgb(129 66 25 / 0.2);
}

.check-list li::before {
	content: "";
	position: absolute;
	top: 1.35rem;
	left: 0;
	width: 1.25rem;
	height: 2px;
	background: var(--wp--preset--color--senf);
}

/* Tagesablauf: Linie mit Senf-Punkten */
.day-line > .wp-block-column {
	position: relative;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgb(228 162 58 / 0.45);
}

.day-line > .wp-block-column::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--wp--preset--color--senf);
	box-shadow: 0 0 0 5px rgb(228 162 58 / 0.18);
}

.day-line h3 {
	margin-bottom: 0.5rem;
}

.day-line p {
	color: var(--wp--preset--color--sand);
	font-size: var(--wp--preset--font-size--small);
}

/* Technik-Karten auf hellem Grund */
.feature-cards > .wp-block-column {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	border-top: 3px solid var(--wp--preset--color--senf);
	background: #fffdf9;
	box-shadow: 0 1px 0 rgb(129 66 25 / 0.12);
}

.feature-cards h3 {
	margin-top: 0;
}

/* Anlässe als große, ruhige Liste (wie ein Line-up) */
.occasion-list {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.occasion-list li {
	padding: 0.9rem 0;
	border-bottom: 1px solid rgb(228 162 58 / 0.3);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.2;
}

.occasion-list li:first-child {
	border-top: 1px solid rgb(228 162 58 / 0.3);
}

/* Orte-Leiste: Bild mit Ortsname darunter */
.place-strip h3 {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
}

/* ---------- Über mich: persönlich, hell, wie ein Brief ---------- */

/* Kleine Zeile über dem Namen im Einstieg */
.about-hero__kicker {
	margin: 0;
	color: var(--wp--preset--color--senf);
	font-weight: 600;
	letter-spacing: 0.04em;
}


/* Bildausschnitt weiter rechts (Klasse am Bild-Block) */
.wp-block-image.focus-right img {
	object-position: 62% 50%;
}

/* ---------- Startseite: Abschnitte klar voneinander absetzen ---------- */

/* Warmer Verlauf (ohne zentrierte Inhalte wie beim Zahlen-Band) */
.warm-band.is-style-section-nacht {
	background:
		radial-gradient(40rem 26rem at 85% 30%, rgb(228 162 58 / 0.12), transparent 70%),
		linear-gradient(120deg, var(--wp--preset--color--espresso) 0%, #311e14 45%, #643012 100%);
}

/* Laufband und Datum: feine Senf-Linien als Kante */
.marquee-band {
	border-block: 1px solid rgb(228 162 58 / 0.45);
}

.line-top {
	border-top: 1px solid rgb(228 162 58 / 0.45);
}

/* Kapitel-Zeichen: kurzer Senf-Strich über jeder Abschnitts-Überschrift */
:is(.home main, .chapter) h2.wp-block-heading::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-bottom: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--senf);
}

:is(.home main, .chapter) h2.wp-block-heading.has-text-align-center::before {
	margin-inline: auto;
}

/* Auf hellem Grund: Strich in Rost (Senf hätte zu wenig Kontrast) */
.home main .wp-block-group:not(.is-style-section-nacht) > h2.wp-block-heading::before {
	background: var(--wp--preset--color--rost);
}

/* Mittlerer Ton: warmes Sand statt hellem Creme */
.sand-band {
	background: linear-gradient(180deg, #cdb79e 0%, #b99d80 100%);
	color: var(--wp--preset--color--mokka);
}

.sand-band a {
	color: var(--wp--preset--color--mokka);
}

.chapter.sand-band h2.wp-block-heading::before,
.home main .sand-band > h2.wp-block-heading::before {
	background: var(--wp--preset--color--espresso);
}

/* „Club-Nacht“: sehr dunkel, Senf-Licht steigt von unten auf */
.night-band.is-style-section-nacht {
	background:
		radial-gradient(60rem 22rem at 50% 105%, rgb(228 162 58 / 0.22), transparent 70%),
		linear-gradient(180deg, #150e09 0%, var(--wp--preset--color--espresso) 100%);
}

/* Über mich: Porträt zeigt die oberen 75 % des Bildes (Bild 2:3 → sichtbarer Ausschnitt 8:9) */
@media (min-width: 601px) {
	.about-intro.wp-block-media-text {
		min-height: 0;
	}

	.about-intro.wp-block-media-text .wp-block-media-text__media {
		align-self: start;
		height: auto;
		aspect-ratio: 8 / 9;
	}
}

.about-intro.wp-block-media-text .wp-block-media-text__media img {
	object-position: 50% 0% !important;
}

/* ---------- Über mich: Lebensweg als Zeitstrahl ---------- */
.letter .has-large-font-size {
	line-height: 1.55;
}

.life-track {
	position: relative;
	margin-top: var(--wp--preset--spacing--50) !important;
}

/* Linie, auf der die Stationen sitzen */
.life-track::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	right: 0;
	left: 0;
	height: 2px;
	background: rgb(32 21 14 / 0.35);
}

.life-track > .wp-block-column {
	position: relative;
	padding-top: var(--wp--preset--spacing--50);
}

.life-track > .wp-block-column::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.1rem;
	height: 1.1rem;
	border: 3px solid var(--wp--preset--color--espresso);
	border-radius: 50%;
	background: var(--wp--preset--color--senf);
}

.life-track__year {
	margin: 0;
	color: var(--wp--preset--color--espresso);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.4rem);
	white-space: nowrap;
	font-weight: 300;
	line-height: 1;
}

.life-track h3 {
	margin-block: var(--wp--preset--spacing--20) 0.5rem;
	font-size: var(--wp--preset--font-size--large);
	hyphens: manual;
}

.life-track p:not(.life-track__year) {
	font-size: var(--wp--preset--font-size--small);
}

@media (max-width: 781px) {
	/* Mobil: senkrechter Zeitstrahl */
	.life-track::before {
		top: 0;
		bottom: 0;
		left: 0.45rem;
		width: 2px;
		height: auto;
	}

	.life-track > .wp-block-column {
		padding-top: 0;
		padding-left: var(--wp--preset--spacing--50);
	}

	.life-track > .wp-block-column::before {
		top: 0.4rem;
	}
}