/* Beta Site v4 "Abendlicht" - dieselbe Sprache wie die Schloss-Einladung: Tinte, Stuck, Messing, Papier, Bodoni Moda + Hanken Grotesk. */

@font-face { font-family: "BNA Bodoni"; src: url("../schloss/fonts/bna-bodoni-moda.sub.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "BNA Bodoni"; src: url("../schloss/fonts/bna-bodoni-moda-italic.sub.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "BNA Hanken"; src: url("../schloss/fonts/bna-hanken-grotesk-400.sub.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BNA Hanken"; src: url("../schloss/fonts/bna-hanken-grotesk-600.sub.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "BNA Bodoni Fallback"; src: local("Georgia"); size-adjust: 94%; }

.beta-site--v4 {
	--ink: #12151c;
	--ink-2: #191d26;
	--stuck: #efe9dd;
	--stuck-dim: #b9b2a5;
	--muted: #8c877d;
	--brass: #c8a764;
	--brass-hell: #d9bb7c;
	--brass-dunkel: #8a6a2e;
	--paper: #eee8dc;
	--paper-text: #1b1a17;
	--paper-dim: #5a554c;
	--line: rgba(239,233,221,.14);
	--line-2: rgba(239,233,221,.24);
	--line-paper: rgba(27,26,23,.16);
	--f-display: "BNA Bodoni", "BNA Bodoni Fallback", Georgia, serif;
	--f-body: "BNA Hanken", "Helvetica Neue", Arial, sans-serif;
	--wrap: 1280px;
	--pad: clamp(20px, 5vw, 80px);
	--sec: clamp(96px, 12vw, 176px);
	--k-licht: cubic-bezier(.2,.7,.2,1);
	--k-out: cubic-bezier(.22,1,.36,1);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	/* Werte für Dialog und Video aus core.css */
	--bs-bg: var(--ink);
	--bs-surface: var(--ink-2);
	--bs-text: var(--stuck);
	--bs-body: var(--stuck-dim);
	--bs-muted: var(--muted);
	--bs-line: var(--line-2);
	--bs-input: rgba(239,233,221,.04);
	--bs-accent: var(--brass);
	--bs-accent-2: var(--brass);
	--bs-focus: var(--brass);
	--bs-radius-lg: 2px;
	--bs-font: var(--f-body);

	margin: 0;
	background: var(--ink);
	color: var(--stuck-dim);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
:where(.beta-site--v4) a { color: inherit; }
:where(.beta-site--v4) :where(h1, h2, h3, h4) { margin: 0; font-weight: 400; color: var(--stuck); }
:where(.beta-site--v4) p { margin: 0 0 1em; }
:where(.beta-site--v4) :where(ul, ol, dl, dd, figure, blockquote) { margin: 0; padding: 0; list-style: none; }
.beta-site--v4 :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 0; }
.beta-site--v4 ::selection { background: var(--brass); color: var(--ink); }
.beta-site--v4 em { font-style: italic; }

.v4-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.v4-section { padding-block: var(--sec); position: relative; }

/* Typografie */
.v4-label { display: block; font-family: var(--f-body); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); line-height: 1.3; }
.v4-num { margin: 0 0 18px; font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--brass); line-height: 1; }
.v4-h2 { font-family: var(--f-display); font-size: clamp(36px, 4.8vw, 70px); line-height: 1.04; letter-spacing: -.01em; color: var(--stuck); max-width: 18ch; text-wrap: balance; margin-bottom: 28px; }
.v4-h2 em, .v4-hero__h1 em, .v4-pano__line em, .v4-footer__claim em { color: var(--brass); }
.v4-h3 { font-family: var(--f-display); font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; color: var(--stuck); margin-bottom: 18px; }
.v4-dek { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--stuck-dim); max-width: 58ch; }
.v4-body { max-width: 60ch; }
.v4-head { margin-bottom: clamp(48px, 6vw, 88px); }

/* Buttons und Links */
.v4-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; border: 1px solid transparent; border-radius: 2px; font-family: var(--f-body); font-size: 16px; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: background-color 160ms var(--k-out), border-color 160ms var(--k-out), color 160ms var(--k-out), transform 90ms ease; }
.v4-btn:active { transform: translateY(1px); }
.v4-btn--brass { background: var(--brass); color: var(--ink); }
.v4-btn--brass:hover { background: var(--brass-hell); }
.v4-btn--line { border-color: rgba(239,233,221,.35); color: var(--stuck); background: transparent; }
.v4-btn--line:hover { border-color: var(--brass); color: var(--brass-hell); }
.v4-btn--block { width: 100%; }
.v4-link { color: var(--stuck); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(239,233,221,.4); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color 160ms, text-decoration-color 160ms; }
.v4-link:hover { color: var(--brass-hell); text-decoration-color: var(--brass); }
.v4-link--small { font-size: 15px; }
.v4-link--ink { color: var(--paper-text); text-decoration-color: var(--brass-dunkel); }
.v4-link--ink:hover { color: var(--brass-dunkel); }

/* Emblem */
.v2-emblem { display: block; overflow: visible; }
.v2-emblem__ring { fill: none; stroke: var(--stuck); stroke-width: 2.2; opacity: .9; }
.v2-emblem__x { fill: none; stroke: var(--brass); stroke-width: 5; stroke-linecap: round; }
.v3-glow { fill: var(--brass); opacity: 0; }
.v4-emblem--logo { width: 40px; height: auto; }
.v4-emblem--logo .v2-emblem__ring { stroke-width: 7; }
.v4-emblem--logo .v2-emblem__x { stroke-width: 9; }

/* ---------- Header ---------- */
.v4-header { position: fixed; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 240ms var(--k-out), border-color 240ms var(--k-out); }
.v4-header.is-scrolled, .bs-nav-open .v4-header { background: rgba(18,21,28,.94); border-color: var(--line); }
.v4-header__inner { display: flex; align-items: center; gap: 32px; height: 80px; }
.v4-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--stuck); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.v4-nav { display: flex; gap: 32px; margin-left: auto; font-size: 14px; font-weight: 500; }
.v4-nav a { color: rgba(239,233,221,.8); text-decoration: none; transition: color 160ms; }
.v4-nav a:hover { color: var(--stuck); }
.v4-header__cta { min-height: 40px; padding: 0 18px; font-size: 14px; }
.bs-hero-gone .v4-header__cta { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.v4-burger { display: none; }
.admin-bar .v4-header { top: 32px; }

/* ---------- Hero ---------- */
.v4-hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--ink); }
.v4-hero__img { position: absolute; inset: 0; z-index: -3; }
.v4-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.v4-hero::before { content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		linear-gradient(90deg, rgba(18,21,28,.92) 0%, rgba(18,21,28,.7) 34%, rgba(18,21,28,.12) 66%, rgba(18,21,28,0) 100%),
		linear-gradient(180deg, rgba(18,21,28,.6) 0%, rgba(18,21,28,0) 22%, rgba(18,21,28,0) 52%, var(--ink) 100%); }
.v4-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .06; mix-blend-mode: overlay; pointer-events: none; }
.v4-hero__inner { padding-top: 140px; padding-bottom: 0; }
.v4-hero__h1 { font-family: var(--f-display); font-size: clamp(46px, 6.6vw, 104px); line-height: .98; letter-spacing: -.012em; color: var(--stuck); max-width: none; margin: 0 0 28px; }
.v4-hero__h1 .v4-label { margin-bottom: 26px; }
.v4-line { display: block; }
.v4-hero__lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; color: rgba(239,233,221,.84); max-width: 54ch; margin-bottom: 36px; }
.v4-hero__cta { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(48px, 7vh, 80px); }
.v4-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(239,233,221,.18); position: relative; }
.v4-facts div { padding: 22px 24px 30px 0; }
.v4-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.v4-facts dd { color: var(--stuck); font-size: 16px; font-weight: 500; }
.v4-hero__cap { position: absolute; right: var(--pad); bottom: 30px; margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(239,233,221,.55); }

/* Lichtaufgang (Team-Takt 21.10.): Knopf und Lead sofort da, nur Headline und Bild bewegen sich, alles steht nach spätestens 1.400 ms. Kein Blur, kein Filter. */
.bs-motion .v4-hero__img img { animation: v4-belicht 1400ms var(--k-out) both; }
.bs-motion .v4-hero__h1 .v4-line { animation: v4-zeile 520ms var(--k-out) both; }
.bs-motion .v4-hero__h1 .v4-line:nth-child(2) { animation-delay: 60ms; }
.bs-motion .v4-hero__h1 .v4-line:nth-child(3) { animation-delay: 120ms; }
.bs-motion .v4-hero__h1 .v4-line:nth-child(4) { animation-delay: 180ms; }
.bs-motion .v4-hero__h1 .v4-line:nth-child(5) { animation-delay: 240ms; }
.bs-motion .v4-facts::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--brass); transform-origin: left; animation: v4-strich 720ms cubic-bezier(.6,0,.2,1) 480ms both, v4-weg 600ms ease 1400ms forwards; }
.bs-motion .v4-facts div { animation: v4-auf 520ms var(--k-out) both; }
.bs-motion .v4-facts div:nth-child(1) { animation-delay: 420ms; }
.bs-motion .v4-facts div:nth-child(2) { animation-delay: 480ms; }
.bs-motion .v4-facts div:nth-child(3) { animation-delay: 540ms; }
.bs-motion .v4-facts div:nth-child(4) { animation-delay: 600ms; }
@keyframes v4-belicht { from { opacity: .35; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes v4-zeile { from { opacity: 0; transform: translateY(.2em); } to { opacity: 1; transform: none; } }
@keyframes v4-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes v4-strich { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v4-weg { to { opacity: 0; } }

/* ---------- I Menschen am Tisch ---------- */
.v4-people__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.v4-person__media { aspect-ratio: 4 / 5; border-radius: 0; background: var(--ink-2); margin-bottom: 26px; }
.v4-person__media img { filter: saturate(.86) sepia(.08) contrast(1.03); transition: transform 900ms var(--k-out), filter 600ms; }
.v4-person:hover .v4-person__media img { transform: scale(1.03); filter: saturate(.95) sepia(.04); }
.v4-person__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,21,28,0) 55%, rgba(18,21,28,.55) 100%), var(--grain); background-blend-mode: normal, overlay; opacity: .9; pointer-events: none; }
.v4-person__media.is-playing::after { display: none; }
.v4-person__media .bs-video__play, .v4-host__video .bs-video__play { width: 64px; height: 64px; background: rgba(18,21,28,.55); border: 1px solid rgba(239,233,221,.5); color: var(--stuck); box-shadow: none; backdrop-filter: blur(6px); z-index: 2; inset: auto auto 22px 22px; margin: 0; transition: background-color 160ms, transform 160ms var(--k-out); }
.v4-person__media .bs-video__play:hover, .v4-host__video .bs-video__play:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.v4-person__media .bs-video__play svg, .v4-host__video .bs-video__play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.v4-person__media .bs-video__note { display: none; }
.v4-person__name { font-family: var(--f-display); font-size: clamp(30px, 2.6vw, 40px); line-height: 1.08; margin-bottom: 4px; }
.v4-person__role { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.v4-person__quote { font-family: var(--f-display); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--stuck); margin-bottom: 16px; max-width: 32ch; }
.v4-person__fact { font-size: 17px; color: var(--stuck); margin-bottom: 16px; max-width: 32ch; }
.v4-voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); margin-top: clamp(72px, 8vw, 120px); padding-top: 40px; border-top: 1px solid var(--line); }
.v4-voices blockquote p { font-family: var(--f-display); font-style: italic; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.38; color: var(--stuck); margin-bottom: 16px; }
.v4-voices__who { font-size: 14px; color: var(--muted); }
.v4-voices__who strong { color: var(--stuck); font-weight: 600; margin-right: 6px; }

/* ---------- Panorama ---------- */
.v4-pano { position: relative; isolation: isolate; min-height: clamp(460px, 62vw, 820px); display: grid; align-items: end; overflow: hidden; }
.v4-pano__img { position: absolute; inset: 0; z-index: -2; }
.v4-pano__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.v4-pano::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink) 0%, rgba(18,21,28,.1) 24%, rgba(18,21,28,.25) 50%, rgba(18,21,28,.95) 92%), linear-gradient(90deg, rgba(18,21,28,.55) 0%, rgba(18,21,28,0) 60%); }
.v4-pano__text { padding-bottom: clamp(48px, 7vw, 96px); }
.v4-pano__line { font-family: var(--f-display); font-size: clamp(36px, 5.4vw, 84px); line-height: 1.02; color: var(--stuck); margin: 0; max-width: 16ch; }
.bs-motion .v4-pano__img img { animation: v4-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
@supports not (animation-timeline: view()) { .bs-motion .v4-pano__img img { animation: none; } }
@keyframes v4-parallax { from { transform: scale(1.12) translateY(-4%); } to { transform: scale(1.12) translateY(4%); } }

/* ---------- II Papier-Kapitel ---------- */
.v4-paper { background: var(--paper); color: var(--paper-dim); }
.v4-paper .v4-h2, .v4-paper .v4-h3 { color: var(--paper-text); }
.v4-paper .v4-h2 em { color: var(--brass-dunkel); }
.v4-paper .v4-num { color: var(--brass-dunkel); }
.v4-paper .v4-dek { color: var(--paper-dim); }
.v4-paper :focus-visible { outline-color: var(--brass-dunkel); }
.v4-pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-paper); counter-reset: p; }
.v4-pillars li { padding: 28px 28px 32px 0; border-right: 1px solid var(--line-paper); counter-increment: p; }
.v4-pillars li + li { padding-left: 28px; }
.v4-pillars li:last-child { border-right: 0; }
.v4-pillars__k { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-dunkel); margin-bottom: 16px; }
.v4-pillars__k::before { content: counter(p, upper-roman) " · "; font-family: var(--f-display); font-style: italic; letter-spacing: 0; font-size: 15px; }
.v4-pillars p { font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.22; color: var(--paper-text); margin: 0; }
.v4-forms { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(80px, 9vw, 136px); }
.v4-forms__intro p { color: var(--paper-dim); max-width: 44ch; }
.v4-forms__list { border-top: 1px solid var(--line-paper); }
.v4-forms__list div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line-paper); }
.v4-forms__list dt { font-family: var(--f-display); font-size: 24px; line-height: 1.2; color: var(--paper-text); }
.v4-forms__list dd { color: var(--paper-dim); line-height: 1.55; }
.v4-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(80px, 9vw, 136px); border: 1px solid var(--line-paper); }
.v4-tier { padding: 36px 32px 40px; border-right: 1px solid var(--line-paper); }
.v4-tier:last-child { border-right: 0; }
.v4-tier p { color: var(--paper-dim); margin: 0; }
.v4-tier .v4-tier__name { font-family: var(--f-display); font-size: 40px; line-height: 1; color: var(--paper-text); margin-bottom: 18px; }
.v4-tier--gold { background: var(--paper-text); }
.v4-tier--gold p { color: rgba(238,232,220,.78); }
.v4-tier--gold .v4-tier__name { color: var(--brass); font-style: italic; }
.v4-paper__foot { margin: 28px 0 0; color: var(--paper-dim); font-size: 15px; }
.v4-paper__foot .v4-link { margin-left: 10px; }

/* ---------- III Schloss ---------- */
.v4-schloss { position: relative; padding-bottom: var(--sec); }
.v4-schloss__img { position: relative; height: clamp(220px, 30vw, 440px); overflow: hidden; }
.v4-schloss__img img { width: 100%; height: 100%; object-fit: cover; }
.v4-schloss__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,21,28,0) 40%, var(--ink) 100%); }
.v4-schloss__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: end; margin-top: clamp(-40px, -3vw, -20px); position: relative; }
.v4-schloss__grid .v4-btn { margin-top: 8px; }
.v4-schloss__date { margin: 0; display: grid; gap: 14px; color: var(--stuck-dim); font-size: 16px; line-height: 1.5; border-left: 1px solid var(--line-2); padding-left: 32px; }
.v4-schloss__day { font-family: var(--f-display); font-size: clamp(72px, 9vw, 136px); line-height: .9; color: var(--brass); letter-spacing: -.02em; }
.v4-schloss__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: clamp(64px, 8vw, 112px); }
.v4-schloss__photos li { aspect-ratio: 3 / 2; overflow: hidden; }
.v4-schloss__photos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--k-out); }
.v4-schloss__photos li:hover img { transform: scale(1.025); }

/* ---------- IV Gastgeber ---------- */
.v4-host { border-top: 1px solid var(--line); }
.v4-host__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 7vw, 120px); align-items: start; }
.v4-host__img { aspect-ratio: 4 / 5; overflow: hidden; position: sticky; top: 112px; }
.v4-host__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.86) sepia(.08) contrast(1.03); }
.v4-sign { margin: 36px 0 48px; color: var(--muted); font-size: 14px; }
.v4-sign span { display: block; font-family: var(--f-display); font-style: italic; font-size: 30px; color: var(--stuck); margin-bottom: 2px; }
.v4-host__video { border-radius: 0; max-width: 620px; }
.v4-host__video img { filter: saturate(.86) sepia(.08); }

/* ---------- V Klartext ---------- */
.v4-faq { border-top: 1px solid var(--line); }
.v4-faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 7vw, 120px); align-items: start; }
.v4-steps { counter-reset: s; margin: 8px 0 36px; border-top: 1px solid var(--line); }
.v4-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--stuck-dim); }
.v4-steps li span { font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--brass); line-height: 1.2; }
.v4-faq__list { border-top: 1px solid var(--line); }
.v4-faq__list details { border-bottom: 1px solid var(--line); }
.v4-faq__list summary { cursor: pointer; list-style: none; position: relative; padding: 24px 48px 24px 0; font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; color: var(--stuck); }
.v4-faq__list summary::-webkit-details-marker { display: none; }
.v4-faq__list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--f-body); font-size: 26px; font-weight: 400; color: var(--brass); transition: transform 240ms var(--k-out); }
.v4-faq__list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.v4-faq__a p { max-width: 62ch; margin: -6px 0 24px; }
@supports (interpolate-size: allow-keywords) {
	.beta-site--v4 .v4-faq__list { interpolate-size: allow-keywords; }
	.beta-site--v4 .v4-faq__list details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 280ms var(--k-out), opacity 200ms var(--k-out), content-visibility 280ms allow-discrete; }
	.beta-site--v4 .v4-faq__list details[open]::details-content { block-size: auto; opacity: 1; }
}

/* ---------- Abschluss ---------- */
.v4-final { position: relative; padding: var(--sec) 0; border-top: 1px solid var(--line); text-align: center; overflow: hidden; }
.v4-final::before { content: ""; position: absolute; left: 50%; top: 30%; width: 900px; height: 600px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(200,167,100,.10), rgba(200,167,100,0)); pointer-events: none; }
.v4-final__inner { position: relative; display: grid; justify-items: center; }
.v4-final__emblem { width: min(200px, 46vw); margin-bottom: 40px; }
.v4-emblem--final { width: 100%; }
.v4-emblem--final .v2-emblem__ring { stroke-width: 1.4; }
.v4-emblem--final .v2-emblem__x { stroke-width: 3.6; }
.v4-final__h { margin-inline: auto; }
.v4-final .v4-dek { margin: 0 auto 40px; }
.v4-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; max-width: 1100px; border: 1px solid var(--line-2); }
.v4-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 88px; padding: 18px 22px; text-align: left; color: var(--stuck); text-decoration: none; font-weight: 500; border-right: 1px solid var(--line-2); transition: background-color 200ms var(--k-out), color 200ms; }
.v4-tile:last-child { border-right: 0; }
.v4-tile span { color: var(--brass); transition: transform 200ms var(--k-out); }
.v4-tile:hover { background: var(--brass); color: var(--ink); }
.v4-tile:hover span { color: var(--ink); transform: translateX(3px); }
.v4-final__roadmap { margin: 36px 0 0; color: var(--muted); font-size: 15px; }
.bs-motion .v3-final__emblem.is-armed .v3-ring--l { transform: translateX(-28px); }
.bs-motion .v3-final__emblem.is-armed .v3-ring--r { transform: translateX(28px); }
.bs-motion .v3-final__emblem.is-armed .v2-emblem__x { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bs-motion .v3-final__emblem.is-on .v3-ring--l { animation: hx-l 720ms var(--k-out) forwards; }
.bs-motion .v3-final__emblem.is-on .v3-ring--r { animation: hx-r 720ms var(--k-out) forwards; }
.bs-motion .v3-final__emblem.is-on .v2-emblem__x { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hx-draw 260ms cubic-bezier(.6,0,.2,1) 620ms forwards; }
.bs-motion .v3-final__emblem.is-on .v2-emblem__x--2 { animation-delay: 760ms; }
.bs-motion .v3-final__emblem.is-on .v3-glow { animation: hx-glow 900ms var(--k-out) 880ms both; }
@keyframes hx-l { 0% { transform: translateX(-26px); } 82% { transform: translateX(1.2px); } 100% { transform: none; } }
@keyframes hx-r { 0% { transform: translateX(26px); } 82% { transform: translateX(-1.2px); } 100% { transform: none; } }
@keyframes hx-draw { to { stroke-dashoffset: 0; } }
@keyframes hx-glow { 0% { opacity: 0; } 35% { opacity: .35; } 100% { opacity: .12; } }

/* ---------- Footer ---------- */
.v4-footer { border-top: 1px solid var(--line); padding: 72px 0 40px; font-size: 15px; }
.v4-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.v4-footer__claim { margin: 0; font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 30px); color: var(--stuck); }
.v4-footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 48px 0; }
.v4-footer__about { color: var(--muted); max-width: 46ch; margin: 0; }
.v4-footer nav { display: grid; gap: 10px; align-content: start; }
.v4-footer nav a { color: var(--stuck-dim); text-decoration: none; }
.v4-footer nav a:hover { color: var(--brass-hell); }
.v4-footer__copy { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- Reveal (leise) ---------- */
.beta-site--v4 .bs-reveal--armed { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--k-out), transform 900ms var(--k-out); transition-delay: calc(min(var(--i, 0), 4) * 90ms); }
.beta-site--v4 .bs-reveal--armed.is-in { opacity: 1; transform: none; }
.beta-site--v4 .bs-reveal--armed.is-instant { transition: none; }

/* ---------- Sticky-CTA (Handy) ---------- */
.v4-sticky { display: none; }

/* ---------- Dialog / Formular ---------- */
.beta-site--v4 .bs-dialog { border-radius: 2px; background: var(--ink); }
.beta-site--v4 .bs-lead__title { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.1; letter-spacing: 0; }
.beta-site--v4 .bs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 2px; font-size: 16px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.beta-site--v4 .bs-btn--primary { background: var(--brass); color: var(--ink); }
.beta-site--v4 .bs-btn--primary:hover { background: var(--brass-hell); }
.beta-site--v4 .bs-btn--ghost { background: transparent; color: var(--stuck); border-color: var(--line-2); text-decoration: none; }
.beta-site--v4 .bs-btn--block { width: 100%; }
.beta-site--v4 .bs-choice { min-height: 56px; border-radius: 2px; }
.beta-site--v4 .bs-choice--pill { min-height: 44px; }
.beta-site--v4 .bs-field input { border-radius: 2px; }
.beta-site--v4 [data-only] { display: none; }
.beta-site--v4 .bs-lead[data-situation="angestellt"] [data-only="angestellt"] { display: flex; order: -1; }
.v3-lead-person { display: flex; align-items: center; gap: 12px; margin: -2px 0 4px; font-size: 14px; color: var(--muted); }
.v3-lead-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; border: 1px solid var(--line-2); }
.v3-done-emblem { width: 64px; height: auto; overflow: visible; }
.v3-done-emblem circle { fill: none; stroke: var(--stuck); stroke-width: 6; }
.v3-done-x { fill: none; stroke: var(--brass); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bs-lead__done:not([hidden]) .v3-done-x { animation: hx-draw 200ms cubic-bezier(.6,0,.2,1) 420ms forwards; }
.bs-lead__done:not([hidden]) .v3-done-x--2 { animation-delay: 560ms; }
.bs-lead__done h3:focus { outline: none; }
.beta-site--v4 .bs-lead__done h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	.v4-nav { gap: 22px; }
	.v4-tiles { grid-template-columns: 1fr 1fr; }
	.v4-tile:nth-child(2) { border-right: 0; }
	.v4-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line-2); }
	.v4-forms__list div { grid-template-columns: 160px 1fr; }
}
@media (max-width: 900px) {
	.v4-header__inner { height: 64px; }
	.v4-header__cta { display: none; }
	.v4-nav { position: fixed; inset: 64px 0 auto; flex-direction: column; gap: 0; padding: 8px var(--pad) 24px; background: var(--ink); border-bottom: 1px solid var(--line); transform: translateY(-120%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
	.bs-nav-open .v4-nav { transform: none; visibility: visible; transition: transform .3s ease; }
	.v4-nav a { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-family: var(--f-display); }
	.v4-burger { margin-left: auto; display: grid; gap: 6px; place-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; }
	.v4-burger span { display: block; width: 24px; height: 1.5px; background: var(--stuck); transition: transform .25s ease, background-color .25s; }
	.bs-nav-open .v4-burger span { background: var(--brass); }
	.bs-nav-open .v4-burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
	.bs-nav-open .v4-burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
	.admin-bar .v4-header { top: 46px; }

	.v4-hero { align-items: end; }
	.v4-hero__img { bottom: auto; height: 68svh; }
	.v4-hero__img img { object-position: 50% 30%; }
	.v4-hero::before { background: linear-gradient(180deg, rgba(18,21,28,.45) 0%, rgba(18,21,28,0) 24%, rgba(18,21,28,.55) 46%, var(--ink) 66%); }
	.v4-hero__inner { padding-top: 38svh; }
	.v4-hero__h1 { font-size: clamp(40px, 11vw, 56px); line-height: 1.0; }
	.v4-hero__h1 .v4-label { font-size: 11px; margin-bottom: 18px; }
	.v4-hero__lead { font-size: 17px; margin-bottom: 28px; }
	.v4-hero__cta { display: grid; gap: 18px; margin-bottom: 40px; }
	.v4-hero__cta .v4-btn { width: 100%; }
	.v4-hero__cta .v4-link { justify-self: start; }
	.v4-facts { grid-template-columns: 1fr; }
	.v4-facts div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 130px 1fr; gap: 12px; align-items: baseline; }
	.v4-facts dt { margin: 0; font-size: 11px; }
	.v4-hero__cap { display: none; }

	.v4-people__grid, .v4-voices { grid-template-columns: 1fr; gap: 64px; }
	.v4-voices { gap: 40px; }
	.v4-person__media { aspect-ratio: 4 / 5; }
	.v4-pillars { grid-template-columns: 1fr 1fr; }
	.v4-pillars li { padding: 24px 16px 28px 0; border-right: 0; border-bottom: 1px solid var(--line-paper); }
	.v4-pillars li + li { padding-left: 0; }
	.v4-pillars li:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--line-paper); }
	.v4-pillars li:nth-child(even) { padding-left: 16px; }
	.v4-forms, .v4-schloss__grid, .v4-host__grid, .v4-faq__grid { grid-template-columns: 1fr; }
	.v4-forms__list div { grid-template-columns: 1fr; gap: 6px; }
	.v4-tiers { grid-template-columns: 1fr; }
	.v4-tier { border-right: 0; border-bottom: 1px solid var(--line-paper); }
	.v4-tier:last-child { border-bottom: 0; }
	.v4-schloss__date { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 24px; }
	.v4-schloss__photos { grid-template-columns: 1fr; }
	.v4-host__img { position: static; max-width: 420px; }
	.v4-tiles { grid-template-columns: 1fr; }
	.v4-tile { border-right: 0; border-bottom: 1px solid var(--line-2); }
	.v4-tile:last-child { border-bottom: 0; }
	.v4-footer__cols { grid-template-columns: 1fr 1fr; }
	.v4-footer__about { grid-column: 1 / -1; }

	.v4-sticky { display: block; visibility: hidden; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background: rgba(18,21,28,.96); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 200ms ease, visibility 0s linear 200ms; }
	.v4-sticky.is-on { transform: none; visibility: visible; transition: transform 360ms var(--k-out); }
	.v4-sticky[hidden] { display: none !important; }
}
@media (max-width: 380px) {
	.v4-hero__h1 { font-size: 38px; }
	.v4-pillars { grid-template-columns: 1fr; }
	.v4-pillars li:nth-child(odd) { border-right: 0; padding-right: 0; }
	.v4-pillars li:nth-child(even) { padding-left: 0; }
}

/* Reduzierte Bewegung: alles still */
@media (prefers-reduced-motion: reduce) {
	.beta-site--v4 *, .beta-site--v4 *::before, .beta-site--v4 *::after { animation: none !important; transition: none !important; }
	.beta-site--v4 .bs-reveal--armed { opacity: 1; transform: none; }
}
.v4-host__video .bs-video__play { inset: 0; margin: auto; }

/* ---------- Logik-Review: Kennenlernen, Zweitweg, Themen, zwei Wege ---------- */
.v4-hero__cta { align-items: flex-start; }
.v4-hero__main { display: grid; gap: 10px; }
.v4-micro { margin: 0; font-size: 14px; color: rgba(239,233,221,.72); }
.v4-hero__alt { margin: 16px 0 0; font-size: 16px; color: rgba(239,233,221,.72); }
.v4-hero__alt .v4-link { margin-left: 4px; }
.v4-schloss .v4-micro { margin-top: 12px; color: var(--muted); }
.v4-nav__login { opacity: .7; }
.v4-people__more { margin: clamp(48px, 6vw, 72px) 0 0; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; }
.v4-people__more span { font-size: 14px; color: var(--muted); }
.v4-person__media--type { position: relative; display: grid; align-content: space-between; padding: 28px; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; }
.v4-person__ini { font-family: var(--f-display); font-style: italic; font-size: clamp(120px, 12vw, 180px); line-height: .8; color: var(--brass); opacity: .9; }
.v4-person__pull { font-family: var(--f-display); font-style: italic; font-size: clamp(22px, 2vw, 28px); line-height: 1.3; color: var(--stuck); }
.v4-topics { border-top: 1px solid var(--line-paper); }
.v4-topics li { position: relative; padding: 18px 0 18px 36px; border-bottom: 1px solid var(--line-paper); font-family: var(--f-display); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; color: var(--paper-text); }
.v4-topics li::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1px; background: var(--brass-dunkel); }
.v4-ways { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(80px, 9vw, 136px); border: 1px solid var(--line-paper); }
.v4-way { padding: clamp(28px, 3vw, 44px); }
.v4-way__k { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-dunkel); }
.v4-way__h { font-family: var(--f-display); font-size: clamp(30px, 3vw, 42px); line-height: 1.08; color: var(--paper-text); margin-bottom: 16px; }
.v4-way p:last-child { margin: 0; color: var(--paper-dim); max-width: 46ch; }
.v4-way--dark { background: var(--paper-text); }
.v4-way--dark .v4-way__k { color: var(--brass); }
.v4-way--dark .v4-way__h { color: var(--stuck); }
.v4-way--dark p:last-child { color: rgba(238,232,220,.78); }
.v4-tiles { grid-template-columns: repeat(5, 1fr); max-width: 1280px; }
@media (max-width: 1080px) {
	.v4-tiles { grid-template-columns: 1fr 1fr 1fr; }
	.v4-tile { border-bottom: 1px solid var(--line-2); }
	.v4-tile:nth-child(2) { border-right: 1px solid var(--line-2); }
	.v4-tile:nth-child(3n) { border-right: 0; }
}
@media (max-width: 900px) {
	.v4-ways { grid-template-columns: 1fr; }
	.v4-hero__cta { display: grid; gap: 14px; }
	.v4-hero__main .v4-btn { width: 100%; }
	.v4-hero__alt { margin: 4px 0 0; font-size: 15px; }
	.v4-tiles { grid-template-columns: 1fr; }
	.v4-tile, .v4-tile:nth-child(2) { border-right: 0; }
	.v4-facts div { grid-template-columns: 90px 1fr; }
}

/* ---------- Kundentest (50 Personas): Klarheit ---------- */
.v4-facts { grid-template-columns: repeat(4, 1fr); }
.v4-micro--dim { color: rgba(239,233,221,.55); font-size: 13px; max-width: 46ch; }
.v4-person__fact { font-family: var(--f-display); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--stuck); margin-bottom: 16px; max-width: 32ch; }
@media (max-width: 900px) {
	.v4-hero__h1 .v4-label { font-size: 12.5px; letter-spacing: .12em; color: var(--brass-hell); line-height: 1.45; }
	.v4-person__media { aspect-ratio: 16 / 11; }
	.v4-people__grid { gap: 48px; }
	.v4-facts { grid-template-columns: 1fr; }
}

/* Gastgeber: prüfbare Fakten (Team-Runde 21.10.) */
.v4-host__facts { display: grid; gap: 0; margin: 26px 0 8px; border-top: 1px solid var(--line); }
.v4-host__facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.v4-host__facts dt { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); padding-top: 3px; }
.v4-host__facts dd { color: var(--stuck); font-size: 16px; }

/* Handy-Hero: Bild als eigenes Band mit weichem Auslauf, Text auf ruhiger Fläche (Team-Runde 21.10.) */
@media (max-width: 900px) {
	.v4-hero__img { height: 52svh; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
	.v4-hero__img img { object-position: 50% 28%; }
	.v4-hero::before { background: linear-gradient(180deg, rgba(18,21,28,.4) 0%, rgba(18,21,28,0) 22%); }
	.v4-hero__inner { padding-top: calc(52svh - 48px); }
	.v4-hero__h1 { font-size: clamp(38px, 10.6vw, 46px); line-height: 1.02; }
}
@media (max-width: 600px) {
	.v4-hero__lead-mehr { display: none; } /* steht in der Faktenleiste darunter */
	.v4-hero__lead { margin-bottom: 22px; }
}
.v4-hero__h1 .v4-line:first-of-type { white-space: normal; }

/* Baseline resilience: navigation remains usable without JavaScript. */
@media (max-width: 900px) {
	.v4-nav { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
	html:not(.bs-js) .v4-burger { display: none; }
	html:not(.bs-js) .v4-header { position: relative; background: var(--ink); }
	html:not(.bs-js) .v4-header__inner { height: auto; padding-block: 16px; flex-wrap: wrap; }
	html:not(.bs-js) .v4-nav { position: static; transform: none; visibility: visible; width: 100%; padding: 12px 0 0; }
}
/* Draw the confirmation emblem even when its animation is disabled. */
@media (prefers-reduced-motion: reduce) {
	.beta-site--v4 .v3-done-x { stroke-dashoffset: 0; }
}
