/*
Theme Name: Bärenkinder
Theme URI: https://baerenkinder.de
Author: Bärenkinder e.V.
Description: Block-Theme für Bärenkinder e.V. — Corporate Design 2026 („Himmelblau-Pastell"). Farben, Typografie und Abstände werden zentral in theme.json gesteuert.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baerenkinder
Tags: block-theme, full-site-editing, education
*/

/*
 * Almost all styling lives in theme.json. Only add CSS here that theme.json
 * genuinely cannot express.
 *
 * Wrap selectors in :root :where(...) so specificity stays low enough that
 * editors can still override via the Styles panel — otherwise the block editor
 * shows a change that the front end silently ignores.
 */

/* ---------------------------------------------------------------------------
 * Inlined SVGs.
 *
 * inc/logo.php inlines the logo files verbatim, so they carry their authoring
 * dimensions — the wordmark is width="1531" height="380". An inline <svg> with
 * explicit width/height and no CSS constraint renders at that intrinsic size,
 * which blew the header up to 629px tall and pushed the document 240px wider
 * than the viewport.
 *
 * The blanket rule below is the safety net; .bk-logo sets the real size.
 * ------------------------------------------------------------------------ */
:root :where(svg) {
	max-inline-size: 100%;
	block-size: auto;
}

:root :where(.bk-logo) {
	display: block;
	block-size: 56px;
	inline-size: auto;
	max-inline-size: min(100%, 320px);
}

@media (max-width: 600px) {
	:root :where(.bk-logo) {
		block-size: 36px;
	}
}

/* Kontaktdaten — one column per group, stacking on narrow screens. */
:root :where(.bk-kontakt__grid) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

:root :where(.bk-kontakt__block) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	font-style: normal; /* <address> italicises by default. */
}

:root :where(.bk-kontakt__name),
:root :where(.bk-kontakt__label) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-kontakt__link) {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

:root :where(.bk-kontakt__link:hover) {
	color: var(--wp--preset--color--signal);
}

/* Only ever shown to administrators — see render.php. */
:root :where(.bk-kontakt__empty) {
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

/* Termine — date chip beside the entry. */
:root :where(.bk-termine__list) {
	list-style: none;
	margin: 0;
	padding: 0;
}

:root :where(.bk-termine__item) {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
	margin-block-end: var(--wp--preset--spacing--30);
}

:root :where(.bk-termine__date) {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	inline-size: 64px;
	padding: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.1;
}

:root :where(.bk-termine__day) {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
}

:root :where(.bk-termine__month) {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}

:root :where(.bk-termine__year) {
	font-size: var(--wp--preset--font-size--tiny);
	opacity: 0.8;
}

:root :where(.bk-termine__title) {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--h-3);
}

:root :where(.bk-termine__excerpt) {
	margin: 0;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Headings emitted by our blocks are bare <h2> elements. theme.json's heading
 * styles reach `.wp-block-heading`, not arbitrary tags, so without this these
 * rendered at body size — 16px next to the 30px of every other section title.
 */
:root :where(.bk-termine__heading, .bk-downloads__heading, .bk-faq__heading, .bk-kontakt__heading) {
	text-align: center;
	margin-block-start: 0;
	margin-block-end: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-termine__empty, .bk-downloads__empty) {
	text-align: center;
	color: var(--wp--preset--color--body);
}

/* Downloads — one card per document; the File block lives in the content. */
:root :where(.bk-downloads__list) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

:root :where(.bk-downloads__item) {
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
}

:root :where(.bk-downloads__title) {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--h-3);
}

/* FAQ accordion — native <details>, so no JS and no ARIA wiring needed. */
:root :where(.bk-faq__item) {
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
	margin-block-end: var(--wp--preset--spacing--30);
	overflow: hidden;
}

:root :where(.bk-faq__question) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

/* Replace the default triangle with a rotating chevron. */
:root :where(.bk-faq__question)::-webkit-details-marker {
	display: none;
}

:root :where(.bk-faq__question)::after {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	flex: 0 0 auto;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

:root :where([open] > .bk-faq__question)::after {
	transform: rotate(-135deg);
}

:root :where(.bk-faq__question:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

:root :where(.bk-faq__answer) {
	padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--body);
}

:root :where(.bk-eyebrow) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 800;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	/* Palette slug is `primary`; `sky` was the token name before the rename. */
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------------
 * Playful components, ported from the design system as patterns.
 * ------------------------------------------------------------------------ */

/* Wellen-Trenner — stretches to any width, fixed height. */
:root :where(.bk-wave) {
	display: block;
	inline-size: 100%;
	block-size: 60px;
}

/* Stimmen — quote cards. */
:root :where(.bk-stimme) {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	border-left: 4px solid var(--wp--preset--color--accent);
}

:root :where(.bk-stimme p) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-4);
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-stimme cite) {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

/* Weg zu uns — numbered steps. */
:root :where(.bk-schritt__nummer) {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	margin: 0 0 var(--wp--preset--spacing--30);
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1;
}

/* Sprechblase — bear beside a quote, with a tail that follows the bubble. */
:root :where(.bk-sprechblase__baer) {
	flex: 0 0 auto;
	inline-size: 96px;
}

:root :where(.bk-sprechblase__baer svg) {
	inline-size: 100%;
	block-size: auto;
}

:root :where(.bk-sprechblase__blase) {
	position: relative;
	flex: 1 1 auto;
}

/* The tail inherits the bubble's own background, so recolouring keeps them together. */
:root :where(.bk-sprechblase__blase)::before {
	content: "";
	position: absolute;
	inset-inline-start: -10px;
	inset-block-start: 50%;
	inline-size: 0;
	block-size: 0;
	transform: translateY(-50%);
	border-block-start: 10px solid transparent;
	border-block-end: 10px solid transparent;
	border-inline-end: 12px solid currentColor;
	color: var(--wp--preset--color--surface-alt);
}

@media (max-width: 600px) {
	:root :where(.bk-sprechblase__baer) {
		inline-size: 64px;
	}
}

/* Marker — highlighted words inside running text.
   Applied by adding the class to an inline span in the editor. */
:root :where(.bk-marker) {
	background: linear-gradient(120deg, transparent 0%, var(--wp--preset--color--accent) 0%);
	background-repeat: no-repeat;
	background-size: 100% 40%;
	background-position: 0 85%;
	padding: 0 2px;
}

/* Sticker — small rotated badge. */
:root :where(.bk-sticker) {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	transform: rotate(-6deg);
}

/* Icons — Tabler, self-hosted. stroke="currentColor" means they take the
   surrounding text colour, so they recolour with the palette for free. */
:root :where(.bk-icon) {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
	stroke: currentColor;
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

:root :where(.bk-hero) {
	position: relative;
	overflow: hidden;
}

/* The soft blob behind the artwork, from the design's PlayHero. Decorative
   only, so it is a pseudo-element rather than markup a screen reader would meet. */
:root :where(.bk-hero)::before {
	content: "";
	position: absolute;
	inline-size: 260px;
	block-size: 260px;
	inset-block-start: -80px;
	inset-inline-end: -40px;
	border-radius: 48% 52% 57% 43% / 43% 47% 53% 57%;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 25%, var(--wp--preset--color--surface));
	pointer-events: none;
}

:root :where(.bk-hero__title) {
	line-height: 1.05;
	text-wrap: balance;
	margin-block: var(--wp--preset--spacing--30) 0;
}

:root :where(.bk-hero__lead) {
	max-inline-size: 52ch;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Pill above the headline. */
:root :where(.bk-pill) {
	display: inline-block;
	margin: 0;
	padding: 6px 16px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

:root :where(.bk-hero__art) {
	position: relative;
	text-align: center;
}

:root :where(.bk-hero__bear) {
	inline-size: 78%;
	max-inline-size: 300px;
	block-size: auto;
	margin-inline: auto;
}

:root :where(.bk-hero__paws) {
	inline-size: 64%;
	max-inline-size: 240px;
	block-size: auto;
	margin: var(--wp--preset--spacing--20) auto 0;
	opacity: 0.5;
}

/* Rotated badge, as in the design. */
:root :where(.bk-hero__sticker) {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 1;
	padding: 8px 18px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	transform: rotate(-8deg);
}

@media (max-width: 781px) {
	:root :where(.bk-hero__figure) {
		margin-block-start: var(--wp--preset--spacing--50);
	}
}

/* ---------------------------------------------------------------------------
 * Fakten-Band
 * ------------------------------------------------------------------------ */

:root :where(.bk-fakten) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

:root :where(.bk-fakt) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	text-align: center;
}

/* The icon chip carries the tone; the icon inherits it via currentColor. */
:root :where(.bk-fakt__icon) {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	margin-block-end: var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radius--pill);
}

:root :where(.bk-fakt--sky .bk-fakt__icon) {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
}

:root :where(.bk-fakt--sun .bk-fakt__icon) {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, white);
	color: color-mix(in srgb, var(--wp--preset--color--accent) 80%, black);
}

:root :where(.bk-fakt--red .bk-fakt__icon) {
	background: color-mix(in srgb, var(--wp--preset--color--signal) 12%, white);
	color: var(--wp--preset--color--signal);
}

:root :where(.bk-fakt__value) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-fakt__label) {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

/* ---------------------------------------------------------------------------
 * Themen-Kacheln
 * ------------------------------------------------------------------------ */

:root :where(.bk-themen) {
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

:root :where(.bk-thema) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
	text-align: center;
}

:root :where(.bk-thema--sky) { background: var(--wp--preset--color--surface-alt); }
:root :where(.bk-thema--sun) { background: color-mix(in srgb, var(--wp--preset--color--accent) 28%, white); }
:root :where(.bk-thema--red) { background: color-mix(in srgb, var(--wp--preset--color--signal) 10%, white); }

:root :where(.bk-thema__icon) {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 52px;
	block-size: 52px;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-thema--sky .bk-thema__icon) { color: var(--wp--preset--color--primary); }
:root :where(.bk-thema--sun .bk-thema__icon) { color: color-mix(in srgb, var(--wp--preset--color--accent) 85%, black); }
:root :where(.bk-thema--red .bk-thema__icon) { color: var(--wp--preset--color--signal); }

:root :where(.bk-thema__title) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-thema__sub) {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

/* ---------------------------------------------------------------------------
 * Galerie — frames tilted like taped-up photos
 * ------------------------------------------------------------------------ */

:root :where(.bk-galerie) {
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

:root :where(.bk-galerie__frame) {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border-radius: 4px;
	box-shadow: var(--wp--custom--shadow--soft);
}

/* Alternating tilt, so the grid reads as photos rather than cards. */
:root :where(.bk-galerie__item--0 .bk-galerie__frame) { transform: rotate(-2deg); }
:root :where(.bk-galerie__item--1 .bk-galerie__frame) { transform: rotate(1.5deg); }
:root :where(.bk-galerie__item--2 .bk-galerie__frame) { transform: rotate(-1deg); }
:root :where(.bk-galerie__item--3 .bk-galerie__frame) { transform: rotate(2deg); }

:root :where(.bk-galerie__tape) {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: 68px;
	block-size: 20px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 55%, white);
	opacity: 0.85;
	rotate: -3deg;
}

:root :where(.bk-galerie__platzhalter) {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: 2px;
	background: var(--wp--preset--color--surface-alt);
}

:root :where(.bk-galerie__platzhalter svg) {
	inline-size: 55%;
	block-size: auto;
	opacity: 0.35;
}

:root :where(.bk-galerie__caption) {
	margin-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	text-align: center;
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
 * Alltag-Slider — CSS scroll-snap, no JavaScript
 * ------------------------------------------------------------------------ */

:root :where(.bk-slider) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-end: var(--wp--preset--spacing--30);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

:root :where(.bk-slider:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

:root :where(.bk-slide) {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
	min-block-size: 220px;
	justify-content: flex-end;
}

:root :where(.bk-slide--sky) { background: var(--wp--preset--color--surface-alt); }
:root :where(.bk-slide--sun) { background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, white); }
:root :where(.bk-slide--red) { background: color-mix(in srgb, var(--wp--preset--color--signal) 10%, white); }

:root :where(.bk-slide__tag) {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-slide__title) {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-slide__text) {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

/* ---------------------------------------------------------------------------
 * Countdown zum nächsten Termin
 * ------------------------------------------------------------------------ */

:root :where(.bk-fest) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--card);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 25%, white);
	text-align: center;
}

:root :where(.bk-fest__eyebrow) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 800;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--accent) 80%, black);
}

:root :where(.bk-fest__title) {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2);
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-fest__count) {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--20) 0 0;
}

:root :where(.bk-fest__days) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-fest__unit) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3);
	color: var(--wp--preset--color--body);
}

:root :where(.bk-fest__date) {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

:root :where(.bk-fest__empty) {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--body);
}

/* ---------------------------------------------------------------------------
 * Hauptmenü mit Untermenüs
 *
 * Opens on hover and on :focus-within, so the panel is reachable by keyboard
 * without any JavaScript. Nothing to load, nothing to fail before the menu works.
 * ------------------------------------------------------------------------ */

:root :where(.bk-nav__list) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

:root :where(.bk-nav__item) {
	position: relative;
}

:root :where(.bk-nav__link) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-block: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

:root :where(.bk-nav__link:hover) {
	color: var(--wp--preset--color--primary);
}

:root :where(.bk-nav__chevron) {
	inline-size: 7px;
	block-size: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

:root :where(.bk-nav__panel) {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 50%;
	translate: -50% 0;
	z-index: 20;
	inline-size: min(92vw, 620px);
	margin-block-start: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--soft);
	/*
	 * Hidden with opacity, deliberately NOT visibility:hidden or display:none.
	 * Those remove the panel's links from the focus order, so :focus-within can
	 * never fire and the panel becomes unreachable by keyboard — hidden means
	 * unfocusable, unfocusable means it never opens.
	 *
	 * opacity:0 keeps the links focusable, so tabbing into them triggers
	 * :focus-within and reveals the panel. pointer-events:none stops the
	 * invisible panel from swallowing clicks meant for the page behind it.
	 */
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

:root :where(.bk-nav__item--has-panel:hover .bk-nav__panel),
:root :where(.bk-nav__item--has-panel:focus-within .bk-nav__panel) {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* Respect a reduced-motion preference: reveal without the slide. */
@media (prefers-reduced-motion: reduce) {
	:root :where(.bk-nav__panel) {
		transition: none;
		transform: none;
	}
}

:root :where(.bk-nav__item--has-panel:hover .bk-nav__chevron),
:root :where(.bk-nav__item--has-panel:focus-within .bk-nav__chevron) {
	transform: rotate(-135deg) translateY(-2px);
}

:root :where(.bk-nav__panel-list) {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
}

:root :where(.bk-nav__card) {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--input);
	text-decoration: none;
	transition: background 0.15s ease;
}

:root :where(.bk-nav__card:hover),
:root :where(.bk-nav__card:focus-visible) {
	background: var(--wp--preset--color--surface);
}

:root :where(.bk-nav__card-icon) {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 38px;
	block-size: 38px;
	border-radius: var(--wp--custom--radius--pill);
}

:root :where(.bk-nav__card--sky .bk-nav__card-icon) {
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
}

:root :where(.bk-nav__card--sun .bk-nav__card-icon) {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 30%, white);
	color: color-mix(in srgb, var(--wp--preset--color--accent) 80%, black);
}

:root :where(.bk-nav__card--red .bk-nav__card-icon) {
	background: color-mix(in srgb, var(--wp--preset--color--signal) 12%, white);
	color: var(--wp--preset--color--signal);
}

:root :where(.bk-nav__card-text) {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

:root :where(.bk-nav__card-label) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-nav__card-desc) {
	font-size: var(--wp--preset--font-size--tiny);
	color: var(--wp--preset--color--body);
}

/* Hamburger button. Hidden on desktop, where the menu is always visible. */
.bk-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--surface-alt);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--white);
	cursor: pointer;
}

.bk-nav__toggle-bars,
.bk-nav__toggle-bars::before,
.bk-nav__toggle-bars::after {
	display: block;
	inline-size: 20px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.bk-nav__toggle-bars {
	position: relative;
}

.bk-nav__toggle-bars::before,
.bk-nav__toggle-bars::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
}

.bk-nav__toggle-bars::before { inset-block-start: -6px; }
.bk-nav__toggle-bars::after  { inset-block-start: 6px; }

/* Bars become an X while open. */
.bk-nav.is-open .bk-nav__toggle-bars { background: transparent; }
.bk-nav.is-open .bk-nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.bk-nav.is-open .bk-nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/*
 * Below 782px the menu collapses behind the hamburger.
 *
 * These rules deliberately avoid :where() — they must beat the desktop rules,
 * and a :where() wrapper has zero specificity, so the flyout positioning would
 * win and the panel would sit permanently open. That is exactly what happened
 * before: both panels rendered expanded and filled the whole first screen.
 */
@media (max-width: 781px) {
	.bk-nav {
		position: relative;
	}

	.bk-nav__toggle {
		display: flex;
	}

	.bk-nav__list {
		display: none;
		position: absolute;
		inset-block-start: calc(100% + 10px);
		inset-inline-end: 0;
		z-index: 30;
		inline-size: min(88vw, 340px);
		max-block-size: 70vh;
		overflow-y: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--wp--preset--spacing--30);
		border-radius: var(--wp--custom--radius--card);
		background: var(--wp--preset--color--white);
		box-shadow: var(--wp--custom--shadow--soft);
	}

	.bk-nav.is-open .bk-nav__list {
		display: flex;
	}

	.bk-nav__link {
		display: flex;
		justify-content: space-between;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--body);
		border-block-end: 1px solid var(--wp--preset--color--surface);
	}

	/* Sub-items become a plain indented list inside the open menu, rather than
	   a flyout that a touch device cannot hover. */
	.bk-nav__panel {
		position: static;
		translate: none;
		inline-size: auto;
		margin: 0;
		padding: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
		border-radius: 0;
		box-shadow: none;
		background: none;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: none;
	}

	.bk-nav__panel-list {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bk-nav__card {
		padding: var(--wp--preset--spacing--20);
	}

	.bk-nav__card-icon {
		inline-size: 30px;
		block-size: 30px;
	}

	.bk-nav__chevron {
		transform: rotate(45deg);
	}
}

/* ---------------------------------------------------------------------------
 * Karten-Raster — the icon cards used across the inner pages
 * ------------------------------------------------------------------------ */

:root :where(.bk-karten) {
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

:root :where(.bk-karte) {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--white);
}

:root :where(.bk-karte__icon) {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 48px;
	block-size: 48px;
	margin-block-end: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--primary);
}

:root :where(.bk-karte__title) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-karte__text) {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--body);
}

/* Eyebrows above a centred heading need centring too. */
:root :where(.has-text-align-center.bk-eyebrow) {
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Verspielte Elemente — self-built, inspired by the reference themes.
 * Every shape here is our own SVG or CSS; nothing is taken from a template.
 * ------------------------------------------------------------------------ */

/* Wolken-Trenner — the cloud-edge divider. */
:root :where(.bk-wolke) {
	display: block;
	inline-size: 100%;
	block-size: 44px;
}

/* Blob masks — organic corners instead of rectangles. The shape is a lopsided
   border-radius; two variants so repeated blobs are not identical. */
:root :where(.bk-blob) {
	border-radius: 62% 38% 54% 46% / 54% 51% 49% 46%;
	overflow: hidden;
}

:root :where(.bk-blob--alt) {
	border-radius: 41% 59% 43% 57% / 58% 42% 58% 42%;
}

/* Confetti layer. A section with .bk-konfetti gets a handful of our decoration
   SVGs scattered in its margins via ::before / ::after mask images. Purely
   decorative and aria-hidden by being CSS-only. */
:root :where(.bk-konfetti) {
	position: relative;
	isolation: isolate;
}

:root :where(.bk-konfetti)::before,
:root :where(.bk-konfetti)::after {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: 40px;
	block-size: 24px;
	background: var(--wp--preset--color--accent);
	-webkit-mask: var(--bk-deko) center / contain no-repeat;
	mask: var(--bk-deko) center / contain no-repeat;
	opacity: 0.5;
	pointer-events: none;
}

:root :where(.bk-konfetti)::before {
	--bk-deko: url("assets/deko/punkte.svg");
	inset-block-start: 8%;
	inset-inline-start: 4%;
}

:root :where(.bk-konfetti)::after {
	--bk-deko: url("assets/deko/stern.svg");
	inline-size: 26px;
	block-size: 26px;
	inset-block-end: 12%;
	inset-inline-end: 6%;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
}

@media (max-width: 600px) {
	/* Confetti crowds a narrow screen; hide it on phones. */
	:root :where(.bk-konfetti)::before,
	:root :where(.bk-konfetti)::after {
		display: none;
	}
}

/* Fortschrittsbalken — the four-pillars bars. */
:root :where(.bk-saeulen) {
	list-style: none;
	margin: var(--wp--preset--spacing--60) auto 0;
	padding: 0;
	max-inline-size: 640px;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

:root :where(.bk-saeule__label) {
	display: block;
	margin-block-end: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

:root :where(.bk-saeule__track) {
	display: block;
	block-size: 14px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface-alt);
	overflow: hidden;
}

:root :where(.bk-saeule__fill) {
	display: block;
	block-size: 100%;
	inline-size: var(--bk-fill, 0%);
	border-radius: inherit;
	background: var(--wp--preset--color--primary);
	transition: inline-size 0.8s ease;
}

/* Slide the fill in on load, unless the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	:root :where(.bk-saeule__fill) {
		animation: bk-fill-in 1s ease forwards;
	}
	@keyframes bk-fill-in {
		from { inline-size: 0; }
	}
}

/* Brighter feature cards — a per-card tone so a card row reads as colourful,
   like the reference feature cards, while staying on our palette. Add a tone
   class to a column: bk-tile--sky / --sun / --red. */
:root :where(.bk-tile--sky) { background: var(--wp--preset--color--surface-alt); }
:root :where(.bk-tile--sun) { background: color-mix(in srgb, var(--wp--preset--color--accent) 26%, white); }
:root :where(.bk-tile--red) { background: color-mix(in srgb, var(--wp--preset--color--signal) 10%, white); }

/* Soft blob behind the hero bear, echoing the reference hero art. Drawn with
   border-radius, coloured from the palette, sitting behind the SVG. */
:root :where(.bk-hero__art)::after {
	content: "";
	position: absolute;
	inset: 8% 10%;
	z-index: -1;
	border-radius: 62% 38% 54% 46% / 54% 51% 49% 46%;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--surface-alt));
}

/* ---------------------------------------------------------------------------
 * More playful elements — self-built.
 * ------------------------------------------------------------------------ */

/* Papierriss — the torn-paper divider. */
:root :where(.bk-riss) {
	display: block;
	inline-size: 100%;
	block-size: 30px;
}

/* Floating "Platz anfragen" pill, bottom-right on every visitor page. */
.bk-fab {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(27, 40, 50, 0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bk-fab:hover,
.bk-fab:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(27, 40, 50, 0.28);
	color: var(--wp--preset--color--white);
}

.bk-fab__icon {
	display: inline-flex;
}

@media (max-width: 600px) {
	/* Icon-only on phones so the pill does not cover content. */
	.bk-fab__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.bk-fab {
		padding: 14px;
	}
}

/* Overlapping facts: pull the Fakten band up so its cards straddle the hero
   edge, the way the reference feature cards overlap the hero. */
:root :where(.bk-fakten-overlap) {
	margin-block-start: calc(-1 * var(--wp--preset--spacing--60));
	position: relative;
	z-index: 2;
	background: transparent !important;
	padding-block: 0 !important;
}

:root :where(.bk-fakten-overlap .bk-fakt) {
	box-shadow: var(--wp--custom--shadow--soft);
}

/* A warm accent band, for sections that should feel brighter than plain
   surface. Text stays ink for contrast. */
:root :where(.bk-band-warm) {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--surface));
}

/* Scene illustrations filling the picture placeholders. */
:root :where(.bk-galerie__illu) {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* The gallery placeholder now holds a full illustration, so drop the padding
   and centring it used for the small bear. */
:root :where(.bk-galerie__platzhalter:has(.bk-galerie__illu)) {
	padding: 0;
	background: none;
}

/* Grass edge at the top of the footer. */
:root :where(.bk-gras) {
	display: block;
	inline-size: 100%;
	block-size: 34px;
	margin-block-end: -1px; /* seal the seam with the footer below */
}

/* ===========================================================================
 * Redesign: bold, vibrant, chunky component language.
 * ======================================================================== */

/* Drei Wege — big vibrant cards, white text. */
:root :where(.bk-wege) {
	list-style: none;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

:root :where(.bk-weg__link) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	block-size: 100%;
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	box-shadow: 0 14px 30px rgba(27, 40, 50, 0.16);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

:root :where(.bk-weg--petrol .bk-weg__link)  { background: var(--wp--preset--color--vivid-petrol); }
:root :where(.bk-weg--sonne .bk-weg__link)   { background: var(--wp--preset--color--vivid-sonne); }
:root :where(.bk-weg--koralle .bk-weg__link) { background: var(--wp--preset--color--vivid-koralle); }
:root :where(.bk-weg--gruen .bk-weg__link)   { background: var(--wp--preset--color--vivid-gruen); }
:root :where(.bk-weg--violett .bk-weg__link) { background: var(--wp--preset--color--vivid-violett); }
:root :where(.bk-weg--pink .bk-weg__link)    { background: var(--wp--preset--color--vivid-pink); }

:root :where(.bk-weg__link:hover),
:root :where(.bk-weg__link:focus-visible) {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(27, 40, 50, 0.24);
	color: var(--wp--preset--color--white);
}

:root :where(.bk-weg__icon) {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 64px;
	block-size: 64px;
	border-radius: var(--wp--custom--radius--pill);
	background: rgba(255, 255, 255, 0.22);
	color: var(--wp--preset--color--white);
	margin-block-end: var(--wp--preset--spacing--20);
}

:root :where(.bk-weg__icon svg) { inline-size: 30px; block-size: 30px; }

:root :where(.bk-weg__title) {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
}

:root :where(.bk-weg__text) {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.92);
}

:root :where(.bk-weg__more) {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
}

/* Bolder hero: bigger art, floating shapes, chunkier buttons. */
:root :where(.bk-hero__bear) { inline-size: 92%; max-inline-size: 360px; }

:root :where(.bk-hero)::before {
	inline-size: 320px;
	block-size: 320px;
	inset-block-start: -90px;
	inset-inline-end: -60px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 34%, var(--wp--preset--color--surface));
}

/* A second floating shape, lower left, for the layered reference feel. */
:root :where(.bk-hero)::after {
	content: "";
	position: absolute;
	inline-size: 120px;
	block-size: 120px;
	inset-block-end: -30px;
	inset-inline-start: 6%;
	z-index: 0;
	border-radius: 41% 59% 43% 57% / 58% 42% 58% 42%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 18%, var(--wp--preset--color--surface));
	pointer-events: none;
}

/* Chunkier buttons everywhere. */
:root :where(.wp-block-button__link) {
	padding: 15px 34px;
	font-size: var(--wp--preset--font-size--h-4);
	box-shadow: 0 8px 20px rgba(27, 40, 50, 0.12);
}

/* Vibrant Themen tiles: full colour, white text, bigger. */
:root :where(.bk-thema) {
	color: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

:root :where(.bk-thema--sky) { background: var(--wp--preset--color--vivid-petrol); }
:root :where(.bk-thema--sun) { background: var(--wp--preset--color--vivid-sonne); }
:root :where(.bk-thema--red) { background: var(--wp--preset--color--vivid-koralle); }

:root :where(.bk-thema__icon) {
	inline-size: 60px;
	block-size: 60px;
	background: rgba(255, 255, 255, 0.22) !important;
	color: var(--wp--preset--color--white) !important;
}

:root :where(.bk-thema__title) { color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--h-3); }
:root :where(.bk-thema__sub) { color: rgba(255, 255, 255, 0.9); }

/* ===========================================================================
 * Sticky header + image placeholders + hero rebuilds.
 * ======================================================================== */

/* Reveal-on-scroll header. The header is a normal static element at the top;
   assets/js/header.js adds .is-fixed once it has scrolled out of view, and a
   fixed copy slides back down. So the menu is not glued at the very top — it
   only sticks after you start scrolling. */
header.wp-block-template-part.is-fixed {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 100;
	animation: bk-header-drop 0.28s ease;
}

header.wp-block-template-part.is-fixed > .wp-block-group {
	box-shadow: 0 4px 20px rgba(27, 40, 50, 0.10);
}

@keyframes bk-header-drop {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part.is-fixed { animation: none; }
}

/* Image placeholder — a soft frame with a photo glyph, standing in until real
   pictures (with consent) exist. `bk-ph--blob` gives the organic mask. */
:root :where(.bk-ph) {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, var(--wp--preset--color--surface-alt));
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, white);
}

:root :where(.bk-ph)::after {
	content: "";
	inline-size: 34%;
	max-inline-size: 96px;
	aspect-ratio: 1;
	background: currentColor;
	-webkit-mask: url("assets/deko/foto.svg") center / contain no-repeat;
	mask: url("assets/deko/foto.svg") center / contain no-repeat;
	opacity: 0.6;
}

:root :where(.bk-ph--blob) {
	border-radius: 62% 38% 54% 46% / 54% 51% 49% 46%;
	aspect-ratio: 1;
}

:root :where(.bk-ph--tall)  { aspect-ratio: 3 / 4; }
:root :where(.bk-ph--wide)  { aspect-ratio: 16 / 9; }

/* --- Shared hero button styles ------------------------------------------- */
:root :where(.bk-hx__buttons) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

:root :where(.bk-btn) {
	display: inline-flex;
	align-items: center;
	padding: 15px 32px;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h-4);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
:root :where(.bk-btn:hover) { transform: translateY(-2px); }
:root :where(.bk-btn--signal) { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--white); box-shadow: 0 8px 20px rgba(27,40,50,.18); }
:root :where(.bk-btn--sun) { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); box-shadow: 0 8px 20px rgba(27,40,50,.14); }
:root :where(.bk-btn--ghost) { background: transparent; color: var(--wp--preset--color--ink); border: 2px solid var(--wp--preset--color--ink); }
:root :where(.bk-btn--ghost-light) { background: rgba(255,255,255,.16); color: var(--wp--preset--color--white); border: 2px solid rgba(255,255,255,.7); }

:root :where(.bk-accent-signal) { color: var(--wp--preset--color--signal); }
:root :where(.bk-accent-sun) { color: var(--wp--preset--color--accent); }
:root :where(.bk-accent-primary) { color: var(--wp--preset--color--primary); }

:root :where(.bk-hx) { position: relative; overflow: hidden; }
:root :where(.bk-hx h1) { font-family: var(--wp--preset--font-family--display); font-weight: 700; line-height: 1.05; margin: 0; text-wrap: balance; }

/* --- Hero 1: full-bleed photo ------------------------------------------- */
:root :where(.bk-hx1) { min-block-size: 74vh; display: flex; align-items: center; }
:root :where(.bk-hx1__media) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 0; }
:root :where(.bk-hx1__overlay) { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,50,63,.35), rgba(22,50,63,.6)); }
:root :where(.bk-hx1__inner) { position: relative; z-index: 2; max-inline-size: 760px; margin-inline: auto; padding: 0 var(--wp--preset--spacing--40); text-align: center; color: var(--wp--preset--color--white); }
:root :where(.bk-hx1__eyebrow) { color: rgba(255,255,255,.85); }
:root :where(.bk-hx1__title) { font-size: var(--wp--preset--font-size--hero); }
:root :where(.bk-hx1__lead) { font-size: var(--wp--preset--font-size--h-4); color: rgba(255,255,255,.92); margin-block-start: var(--wp--preset--spacing--30); }
:root :where(.bk-hx1 .bk-hx__buttons) { justify-content: center; }
:root :where(.bk-hx1__cloud) { position: absolute; inset-block-end: -1px; inset-inline: 0; inline-size: 100%; block-size: 60px; z-index: 2; }

/* --- Hero 2: split with blob ------------------------------------------- */
:root :where(.bk-hx2) { background: var(--wp--preset--color--surface-alt); padding-block: var(--wp--preset--spacing--80); }
:root :where(.bk-hx2__grid) { max-inline-size: 1140px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--wp--preset--spacing--60); align-items: center; }
:root :where(.bk-hx2__title) { font-size: var(--wp--preset--font-size--hero); color: var(--wp--preset--color--ink); margin-block: var(--wp--preset--spacing--30); }
:root :where(.bk-hx2__lead) { font-size: var(--wp--preset--font-size--h-4); color: var(--wp--preset--color--body); max-inline-size: 46ch; }
:root :where(.bk-hx2__figure) { position: relative; }
:root :where(.bk-hx2__arc) { position: absolute; inset: -8% -8% auto auto; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--wp--preset--color--accent) 40%, white); z-index: 0; }
:root :where(.bk-hx2__figure .bk-ph) { position: relative; z-index: 1; }

/* --- Hero 3: colour band ----------------------------------------------- */
:root :where(.bk-hx3) { background: var(--wp--preset--color--vivid-petrol); padding-block: var(--wp--preset--spacing--80); }
:root :where(.bk-hx3__grid) { max-inline-size: 1140px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--60); align-items: center; position: relative; z-index: 1; }
:root :where(.bk-hx3__title) { font-size: var(--wp--preset--font-size--hero); color: var(--wp--preset--color--white); margin-block: var(--wp--preset--spacing--30); }
:root :where(.bk-hx3__eyebrow) { color: rgba(255,255,255,.8); }
:root :where(.bk-hx3__lead) { font-size: var(--wp--preset--font-size--h-4); color: rgba(255,255,255,.92); max-inline-size: 44ch; }
:root :where(.bk-hx3__blob1) { position: absolute; inline-size: 340px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.08); inset-block-start: -120px; inset-inline-end: -80px; }
:root :where(.bk-hx3__blob2) { position: absolute; inline-size: 180px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.07); inset-block-end: -70px; inset-inline-start: 30%; }
:root :where(.bk-hx3__figure .bk-ph) { background: rgba(255,255,255,.16); color: rgba(255,255,255,.7); }

/* --- Hero 4: playful clouds -------------------------------------------- */
:root :where(.bk-hx4) { background: color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--surface)); padding-block: var(--wp--preset--spacing--80); }
:root :where(.bk-hx4__grid) { max-inline-size: 1140px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--60); align-items: center; position: relative; z-index: 1; }
:root :where(.bk-hx4__title) { font-size: var(--wp--preset--font-size--hero); color: var(--wp--preset--color--ink); margin-block: var(--wp--preset--spacing--30); }
:root :where(.bk-hx4__lead) { font-size: var(--wp--preset--font-size--h-4); color: var(--wp--preset--color--body); max-inline-size: 44ch; }
:root :where(.bk-hx4__cloud) { position: absolute; background: rgba(255,255,255,.8); border-radius: 100px; block-size: 40px; }
:root :where(.bk-hx4__cloud--1) { inline-size: 160px; inset-block-start: 40px; inset-inline-start: 8%; }
:root :where(.bk-hx4__cloud--2) { inline-size: 110px; inset-block-start: 90px; inset-inline-end: 12%; }
:root :where(.bk-hx4__sun) { position: absolute; inline-size: 90px; aspect-ratio: 1; border-radius: 50%; background: var(--wp--preset--color--accent); inset-block-start: 30px; inset-inline-end: 6%; opacity: .5; }
:root :where(.bk-hx4__photo) { aspect-ratio: 4/3; transform: rotate(-3deg); box-shadow: 0 16px 34px rgba(27,40,50,.16); border: 8px solid var(--wp--preset--color--white); }
:root :where(.bk-hx4__figure) { position: relative; }
:root :where(.bk-hx4__badge) { position: absolute; inset-block-start: -12px; inset-inline-end: 6%; background: var(--wp--preset--color--signal); color: var(--wp--preset--color--white); font-family: var(--wp--preset--font-family--display); font-weight: 700; padding: 8px 18px; border-radius: var(--wp--custom--radius--pill); transform: rotate(6deg); }

/* --- Hero 5: centred with strip ---------------------------------------- */
:root :where(.bk-hx5) { background: var(--wp--preset--color--surface); padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70); text-align: center; }
:root :where(.bk-hx5__inner) { max-inline-size: 780px; margin-inline: auto; padding-inline: var(--wp--preset--spacing--40); }
:root :where(.bk-hx5__title) { font-size: var(--wp--preset--font-size--hero); color: var(--wp--preset--color--ink); margin-block: var(--wp--preset--spacing--30); }
:root :where(.bk-hx5__lead) { font-size: var(--wp--preset--font-size--h-4); color: var(--wp--preset--color--body); }
:root :where(.bk-hx5__buttons) { justify-content: center; }
:root :where(.bk-hx5__strip) { max-inline-size: 1140px; margin: var(--wp--preset--spacing--60) auto 0; padding-inline: var(--wp--preset--spacing--40); display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: var(--wp--preset--spacing--40); align-items: center; }

@media (max-width: 781px) {
	:root :where(.bk-hx2__grid),
	:root :where(.bk-hx3__grid),
	:root :where(.bk-hx4__grid) { grid-template-columns: 1fr; }
	:root :where(.bk-hx2__figure),
	:root :where(.bk-hx3__figure),
	:root :where(.bk-hx4__figure) { order: -1; }
	:root :where(.bk-hx5__strip) { grid-template-columns: 1fr; }
	:root :where(.bk-hx1) { min-block-size: 60vh; }
}