/*
 * Startseite (v2 front-page.php <style>-Block + ksb-redesign.css: Crowdfunding, Orte, Aktivitäten, Spotlight).
 */

@layer pages {

	/* ── Hero (v2 «HERO V5») ─────────────────────────────────────────── */
	.hero {
		position: relative;
		padding: 96px 0 110px;
		background: var(--ksb-yellow-pale);
	}

	.hero-grid {
		display: grid;
		grid-template-columns: 1.05fr 1fr;
		gap: var(--ksb-space-8);
		align-items: center;
	}

	.hero-text {
		text-align: center;
	}

	.hero .h1 {
		margin-top: 20px;
	}

	.hero .lede {
		max-width: 500px;
		margin: 22px auto 0;
	}

	.hero .cta {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--ksb-space-3);
		margin-top: var(--ksb-space-6);
	}

	.stack {
		position: relative;
		height: 520px;
	}

	.stack-card {
		position: absolute;
		display: block;
		width: min(350px, calc(100% - 112px));   /* 112px = Versatz Karte 2; schmale Spalte (901–1000px) ohne Überlauf */
		padding: 14px;
		color: inherit;
		text-decoration: none;
		background: var(--ksb-paper);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-md);
		transition: transform .2s, box-shadow .2s;
		will-change: transform;
	}

	/* Stapel-Positionen (v2 Inline-Variablen → Modifier-Klassen) */
	.stack-card--1 {
		top: 0;
		left: 0;
		box-shadow: 0 12px 32px rgb(60 55 30 / .15);
	}

	.stack-card--2 {
		top: 75px;
		left: 112px;
		transform: translate(6px, 4px) scale(.97);
		box-shadow: 0 8px 20px rgb(60 55 30 / .10);
	}

	.stack-card--3 {
		top: 162px;
		left: 38px;
		transform: translate(12px, 8px) scale(.94);
		box-shadow: 0 4px 12px rgb(60 55 30 / .07);
	}

	.stack-card:hover {
		z-index: 2;
		transform: translate(0, -4px) scale(1.02);
		box-shadow: var(--ksb-shadow-lg);
	}

	.stack-card__img,
	.stack-card__platzhalter {
		width: 100%;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		border-radius: var(--ksb-radius-sm);
	}

	.stack-card .eyebrow {
		display: block;
		margin-top: var(--ksb-space-3);
		font-size: 10px;
	}

	.stack-card .name {
		display: block;
		margin: var(--ksb-space-1) 0 0;
		font-family: var(--ksb-font-display);
		font-size: 19px;
		font-weight: 400;
		line-height: var(--ksb-lh-title);
		letter-spacing: var(--ksb-ls-title);
	}

	.stack-card .meta {
		display: block;
		margin: 2px 0 0;
		font-size: var(--ksb-fs-xs);
		color: var(--ksb-ink-soft);
	}

	@media (max-width: 900px) {
		.hero {
			padding: var(--ksb-space-8) 0;
		}

		.hero-grid {
			grid-template-columns: 1fr;
			gap: 56px;
		}

		.stack {
			display: grid;
			grid-template-columns: 1fr;
			gap: var(--ksb-space-4);
			height: auto;
			max-width: 450px;
			margin: 0 auto;
		}

		.stack-card {
			position: static;
			width: 100%;
			transform: none;
		}
	}

	@media (max-width: 600px) {
		.hero {
			padding: 40px 0 var(--ksb-space-7);
		}

		.hero-grid {
			gap: var(--ksb-space-6);
		}

		.hero .h1 {
			margin-top: 14px;
		}

		.hero .cta {
			gap: var(--ksb-space-2);
		}

		.stack {
			max-width: 100%;
		}
	}

	/* ── Crowdfunding abgeschlossen (v2 14b) ─────────────────────────── */
	.cf-danke-section {
		padding: 96px 0;
		text-align: center;
		background: var(--ksb-green-pale);
	}

	.cf-danke-inner {
		max-width: 640px;
		margin: 0 auto;
	}

	.cf-danke-inner .eyebrow {
		margin-bottom: 14px;
		color: var(--ksb-green);
	}

	.cf-danke-inner .lede {
		max-width: 520px;
		margin: var(--ksb-space-4) auto 28px;
	}

	.cf-danke-amount {
		margin: 0 0 28px;
		font-family: var(--ksb-font-display);
		font-size: var(--ksb-fs-lg);
		font-weight: 700;
		color: var(--ksb-green);
	}

	/* ── Crowdfunding (v2 Kap. 15) ───────────────────────────────────── */
	.crowdfunding-section {
		padding: var(--ksb-section-y) 0;
		background: var(--ksb-paper);
		border-top: 1px solid var(--ksb-line);
	}

	.crowdfunding-inner {
		text-align: center;
	}

	.crowdfunding-inner .eyebrow,
	.crowdfunding-inner .h2 {
		max-width: 720px;
		margin-inline: auto;
	}

	.crowdfunding-inner .eyebrow {
		margin-bottom: var(--ksb-space-4);
	}

	.crowdfunding-inner .h2 {
		margin-bottom: 20px;
	}

	.crowdfunding-inner .lede {
		max-width: 600px;
		margin: 0 auto;
		text-align: left;
	}

	.crowdfunding-inner .lede--zweite {
		margin: var(--ksb-space-3) auto 40px;
	}

	.bahnen-progress-block,
	.chf-progress-block {
		margin: 0 auto 36px;
	}

	.bahnen-progress-count,
	.chf-progress-label {
		margin: 0 0 14px;
		line-height: 1;
		text-align: center;
	}

	.bahnen-progress-count__num,
	.chf-progress-label__num {
		font-family: var(--ksb-font-display);
		font-size: 32px;
		font-weight: 700;
		letter-spacing: -.02em;
		color: var(--ksb-green);
	}

	.bahnen-progress-count__label,
	.chf-progress-label__total {
		font-family: var(--ksb-font-display);
		font-size: var(--ksb-fs-md);
		font-weight: 700;
		letter-spacing: var(--ksb-ls-title);
		color: var(--ksb-ink);
	}

	.chf-progress-label__total {
		color: var(--ksb-ink-soft);
	}

	.bahnen-progress-wrap,
	.chf-progress-wrap {
		position: relative;
		padding-bottom: 40px;
	}

	/* Balken: natives <progress> (kein Inline-Style nötig) */
	.ksb-progress {
		display: block;
		width: 100%;
		height: 16px;
		overflow: hidden;
		color: var(--ksb-green);
		background: var(--ksb-line);
		border: 0;
		border-radius: var(--ksb-radius-pill);
		appearance: none;
	}

	.ksb-progress::-webkit-progress-bar {
		background: var(--ksb-line);
		border-radius: var(--ksb-radius-pill);
	}

	.ksb-progress::-webkit-progress-value {
		background: var(--ksb-green);
		border-radius: var(--ksb-radius-pill);
	}

	.ksb-progress::-moz-progress-bar {
		background: var(--ksb-green);
		border-radius: var(--ksb-radius-pill);
	}

	.progress-milestones {
		position: relative;
		height: 0;
	}

	.milestone {
		position: absolute;
		top: -15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		transform: translateX(-50%);
	}

	.milestone--heute {
		left: var(--heute, 0%);
	}

	.milestone--haelfte {
		left: 59.02%;   /* 72 / 122 (v2) */
	}

	.milestone--phase2 {
		left: 52.38%;   /* 11'000 / 21'000 (konzept.md) */
	}

	.milestone--phase3 {
		left: 80.95%;   /* 17'000 / 21'000 */
	}

	/* Ziel am rechten Rand: Punkt bleibt auf 100%, Beschriftung rechtsbündig statt mittig,
	 * damit sie nicht über den Seitenrand ragt (sonst horizontales Scrollen um 768px). */
	.milestone--ziel {
		left: 100%;
		align-items: flex-end;
		transform: translateX(calc(-100% + 7px));   /* 7px = halbe Punktbreite */
	}

	.milestone--ziel .milestone__label {
		text-align: right;
	}

	.milestone__dot {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		background: var(--ksb-line);
		border: 2px solid var(--ksb-paper);
		border-radius: 50%;
		box-shadow: 0 0 0 2px var(--ksb-line);
	}

	.milestone--reached .milestone__dot {
		background: var(--ksb-green);
		box-shadow: 0 0 0 2px var(--ksb-green);
	}

	.milestone__label {
		margin-top: 6px;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.3;
		text-align: center;
		white-space: nowrap;
		color: var(--ksb-ink-soft);
	}

	.milestone--reached .milestone__label {
		color: var(--ksb-green);
	}

	.milestone__label small {
		display: block;
		font-size: 10px;
		font-weight: 400;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--ksb-ink-soft);
	}

	.crowdfunding-cta {
		display: flex;
		justify-content: center;
		margin-bottom: var(--ksb-space-7);
	}

	.cf-unlock-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--ksb-space-4);
		margin-bottom: var(--ksb-space-6);
		text-align: left;
	}

	.cf-unlock-phase {
		overflow: hidden;
		background: var(--ksb-paper);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-md);
	}

	.cf-unlock-phase--soon {
		opacity: .8;
	}

	.cf-unlock-phase--later {
		opacity: .6;
	}

	.cf-unlock-phase__header {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: var(--ksb-space-4) 20px 14px;
		background: var(--ksb-cream);
		border-bottom: 1px solid var(--ksb-line);
	}

	.cf-unlock-phase__num {
		font-size: 11px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--ksb-ink-soft);
	}

	.cf-unlock-phase__title {
		flex: 1;
		font-size: var(--ksb-fs-ui);
		font-weight: 600;
		line-height: 1;
	}

	.cf-unlock-phase__range {
		font-family: var(--ksb-font-display);
		font-size: var(--ksb-fs-xs);
		font-weight: 700;
		color: var(--ksb-ink-soft);
	}

	.cf-unlock-list {
		margin: 0;
		padding: var(--ksb-space-2) 0;
		list-style: none;
	}

	.cf-unlock-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 20px;
		border-bottom: 1px solid var(--ksb-line);
	}

	.cf-unlock-item:last-child {
		border-bottom: none;
	}

	.cf-unlock-item__chf {
		min-width: 70px;
		font-family: var(--ksb-font-display);
		font-size: var(--ksb-fs-xs);
		font-weight: 700;
		color: var(--ksb-ink-soft);
	}

	.cf-unlock-item__emoji {
		flex-shrink: 0;
		font-size: var(--ksb-fs-md);
		line-height: 1;
	}

	.cf-unlock-item__name {
		font-size: 13.5px;
		font-weight: 500;
		line-height: 1.3;
	}

	.cf-unlock-item__status {
		margin-left: auto;
		font-size: var(--ksb-fs-ui);
	}

	.cf-phases-hint {
		max-width: 560px;
		margin: var(--ksb-space-4) auto 0;
		font-size: var(--ksb-fs-ui);
		line-height: 1.6;
		text-align: center;
		color: var(--ksb-ink-soft);
	}

	@media (max-width: 700px) {
		.cf-unlock-grid {
			grid-template-columns: 1fr;
		}

		.bahnen-progress-count__num,
		.chf-progress-label__num {
			font-size: 26px;
		}

		.bahnen-progress-count__label,
		.chf-progress-label__total {
			font-size: 15px;
		}
	}

	@media (max-width: 480px) {
		.milestone__label {
			display: none;
		}

		.bahnen-progress-wrap,
		.chf-progress-wrap {
			padding-bottom: 18px;
		}

		.cf-unlock-item {
			gap: var(--ksb-space-2);
			padding: 9px var(--ksb-space-3);
		}

		.cf-unlock-item__chf {
			min-width: 58px;
		}
	}

	/* ── Spotlight (v2) ──────────────────────────────────────────────── */
	.ksb-spotlight-section {
		padding: 80px 0;
		text-align: center;
		background: var(--ksb-paper);
	}

	.ksb-spotlight-section .h2 {
		margin-top: var(--ksb-space-3);
	}

	.ksb-spotlight-section .lede {
		max-width: 640px;
		margin: var(--ksb-space-4) auto 40px;
	}

	.ksb-spotlight-track {
		position: relative;
		text-align: left;
	}

	.ksb-spotlight-slide {
		display: flex;
		gap: var(--ksb-space-5);
		align-items: stretch;
	}

	.ksb-spotlight-slide[hidden] {
		display: none;
	}

	.ksb-spotlight-bahn,
	.ksb-spotlight-related {
		display: flex;
		flex-direction: column;
		min-width: 0;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
		background: var(--ksb-paper);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-md);
		transition: box-shadow .18s;
	}

	.ksb-spotlight-bahn:hover,
	.ksb-spotlight-related:hover {
		box-shadow: var(--ksb-shadow-hover);
	}

	.ksb-spotlight-bahn {
		flex: 0 0 55%;
		order: 2;
	}

	.ksb-spotlight-bahn--full {
		flex: 1;
	}

	.ksb-spotlight-related {
		flex: 1;
		order: 1;
	}

	.ksb-spotlight-bahn__media,
	.ksb-spotlight-related__media {
		position: relative;
		flex-shrink: 0;
		overflow: hidden;
		aspect-ratio: 16 / 9;
	}

	.ksb-spotlight-related__media {
		aspect-ratio: 4 / 3;
	}

	.ksb-spotlight__img,
	.ksb-spotlight__platzhalter {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 0;
		border: 0;
	}

	.ksb-spotlight-bahn__body {
		display: flex;
		flex-direction: column;
		gap: var(--ksb-space-2);
		padding: 20px var(--ksb-space-5) var(--ksb-space-5);
	}

	.ksb-spotlight-related__body {
		display: flex;
		flex: 1;
		flex-direction: column;
		gap: 6px;
		padding: var(--ksb-space-4) 20px 20px;
	}

	.ksb-spotlight-related__type {
		margin: 0;
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--ksb-green);
	}

	.ksb-spotlight-related__name {
		margin: 0;
		font-size: var(--ksb-fs-md);
		line-height: 1.25;
	}

	.ksb-spotlight-related__hint {
		margin: auto 0 0;
		padding-top: var(--ksb-space-3);
		font-size: var(--ksb-fs-sm);
		color: var(--ksb-ink-soft);
	}

	.ksb-spotlight-dots {
		display: flex;
		justify-content: center;
		gap: var(--ksb-space-1);
		margin-top: var(--ksb-space-5);
	}

	/* Punkt 8px sichtbar, Klickfläche 24px */
	.ksb-spotlight-dot {
		position: relative;
		width: 24px;
		height: 24px;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 50%;
	}

	.ksb-spotlight-dot::before {
		content: "";
		position: absolute;
		inset: 8px;
		background: var(--ksb-line);
		border-radius: 50%;
		transition: background .2s, transform .2s;
	}

	.ksb-spotlight-dot.is-active::before {
		background: var(--ksb-green);
		transform: scale(1.3);
	}

	.ksb-spotlight-actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--ksb-space-3);
		margin-top: 28px;
	}

	.ksb-spotlight-actions .btn-ghost {
		font-size: var(--ksb-fs-sm);
		border-color: var(--ksb-line);
	}

	.ksb-spotlight-actions .btn-ghost:hover {
		color: var(--ksb-green-deep);
		border-color: var(--ksb-green);
	}

	@media (max-width: 900px) {
		.ksb-spotlight-section {
			padding: 60px 0;
		}
	}

	@media (max-width: 600px) {
		.ksb-spotlight-section {
			padding: var(--ksb-space-7) 0;
		}

		.ksb-spotlight-slide {
			flex-direction: column;
		}

		.ksb-spotlight-bahn,
		.ksb-spotlight-bahn--full {
			flex: none;
			order: 1;
			width: 100%;
		}

		.ksb-spotlight-related {
			flex: none;
			order: 2;
			width: 100%;
		}
	}

	/* ── Verzeichnis-Kacheln ─────────────────────────────────────────── */
	.cards-section {
		padding: var(--ksb-section-y) 0;
		background: var(--ksb-paper);
	}

	.leer-hinweis {
		text-align: center;
		color: var(--ksb-ink-soft);
	}

	/* ── Orte / Aktivitäten (v2 Sektionen 6 + 7) ─────────────────────── */
	.orte-section,
	.activities-section {
		position: relative;
		padding: var(--ksb-section-y) 0;
		text-align: center;
	}

	.orte-section {
		background: var(--ksb-cream);
		border-top: 1px solid var(--ksb-line);
	}

	.activities-section {
		overflow: hidden;
		color: var(--ksb-paper);
		background: var(--ksb-ink);
	}

	.activities-section::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(ellipse 60% 50% at 10% 0%, rgb(255 187 0 / .14), transparent 70%),
			radial-gradient(ellipse 50% 40% at 95% 100%, rgb(61 107 64 / .20), transparent 70%);
		pointer-events: none;
	}

	.activities-section > .container {
		position: relative;
		z-index: 1;
	}

	.orte-section .eyebrow,
	.activities-section .eyebrow {
		margin-bottom: var(--ksb-space-4);
	}

	.orte-section .h2,
	.activities-section .h2 {
		margin-bottom: 20px;
	}

	.orte-section .lede,
	.activities-section .lede {
		max-width: var(--ksb-measure);
		margin-inline: auto;
	}

	.activities-section .eyebrow {
		color: var(--ksb-yellow);
	}

	.activities-section .h2 {
		color: var(--ksb-paper);
	}

	.activities-section .lede {
		color: var(--ksb-on-dark-soft);
	}

	.unlock-hint {
		margin: var(--ksb-space-3) 0 0;
		font-size: var(--ksb-fs-sm);
		color: var(--ksb-ink-soft);
	}

	.activities-section .unlock-hint {
		color: var(--ksb-on-dark-muted);
	}

	.kat-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--ksb-space-3);
		max-width: 800px;
		margin: var(--ksb-space-6) auto 36px;
		text-align: left;
	}

	.kat-chip {
		display: flex;
		align-items: center;
		gap: var(--ksb-space-3);
		min-width: 0;
		padding: var(--ksb-space-4) 19px;
		text-decoration: none;
		color: var(--ksb-ink);
		background: var(--ksb-paper);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-md);
		transition: border-color var(--ksb-transition), box-shadow var(--ksb-transition), transform var(--ksb-transition), background var(--ksb-transition);
	}

	a.kat-chip:hover {
		transform: translateY(-2px);
		border-color: var(--ksb-green);
		box-shadow: var(--ksb-shadow-chip);
	}

	.kat-chip__emoji {
		flex-shrink: 0;
		font-size: 40px;
		line-height: 1;
	}

	.kat-chip__name {
		flex: 1;
		min-width: 0;   /* lange Wörter umbrechen statt Chip über den Rand schieben */
		font-size: 15px;
		font-weight: 600;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	.kat-chip__lock {
		flex-shrink: 0;
		font-size: var(--ksb-fs-sm);
	}

	.kat-chip--locked {
		opacity: .7;
	}

	.kat-chip--locked .kat-chip__emoji {
		filter: grayscale(.4);
	}

	.kat-chip--locked .kat-chip__name {
		color: var(--ksb-ink-soft);
	}

	.kat-chip--dunkel {
		color: var(--ksb-paper);
		background: var(--ksb-on-dark-fill);
		border-color: var(--ksb-on-dark-hover);
	}

	a.kat-chip--dunkel:hover {
		background: var(--ksb-on-dark-hover);
		border-color: rgb(255 253 247 / .28);
		box-shadow: none;
	}

	.kat-chip--dunkel.kat-chip--locked {
		opacity: .75;
	}

	.kat-chip--dunkel.kat-chip--locked .kat-chip__name {
		color: rgb(255 253 247 / .65);
	}

	.section-cta-center {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--ksb-space-3);
	}

	@media (max-width: 900px) {
		.section-cta-center {
			flex-direction: column;
			align-items: center;
		}

		.section-cta-center .btn {
			width: 100%;
			max-width: 420px;
		}
	}

	@media (max-width: 600px) {
		.kat-grid {
			grid-template-columns: 1fr;
		}
	}

	/* ── Hintergründe + Stat-Strip ───────────────────────────────────── */
	.background-section {
		padding: var(--ksb-section-y) 0;
		background: var(--ksb-paper);
	}

	.background-grid {
		display: grid;
		grid-template-columns: 1fr 1.1fr;
		gap: 80px;
		align-items: start;
	}

	.background-grid .eyebrow {
		margin-bottom: 14px;
	}

	.background-grid .h2 {
		margin-bottom: 40px;
	}

	.background-prose {
		font-size: var(--ksb-fs-base);
		line-height: var(--ksb-lh-prose);
		color: var(--ksb-ink-soft);
	}

	.background-prose p {
		margin: 0 0 18px;
	}

	.background-prose strong {
		font-weight: 500;
		color: var(--ksb-ink);
	}

	.background-cta {
		margin-top: var(--ksb-space-6);
		text-align: center;
	}

	.pullquote {
		margin: 36px 0;
		padding: var(--ksb-space-5) 28px;
		font-family: var(--ksb-font-display);
		font-size: var(--ksb-fs-lg);
		line-height: 1.35;
		color: var(--ksb-ink);
		background: var(--ksb-yellow-pale);
		border-left: 3px solid var(--ksb-green);
		border-radius: var(--ksb-radius-xs);
	}

	.pullquote cite {
		display: block;
		margin-top: 14px;
		font-family: var(--ksb-font-text);
		font-size: var(--ksb-fs-xs);
		font-style: normal;
		font-weight: 600;
		letter-spacing: var(--ksb-ls-eyebrow);
		text-transform: uppercase;
		color: var(--ksb-gold);
	}

	.stat-strip {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		margin-top: 40px;
		border-top: 1px solid var(--ksb-line);
		border-bottom: 1px solid var(--ksb-line);
	}

	.stat-cell {
		padding: var(--ksb-space-5) 20px;
		border-right: 1px solid var(--ksb-line);
	}

	.stat-cell:first-child {
		padding-left: 0;
	}

	.stat-cell:last-child {
		border-right: none;
	}

	.stat-num {
		font-family: var(--ksb-font-display);
		font-size: var(--ksb-fs-stat);
		font-weight: 400;
		line-height: 1;
		letter-spacing: -.02em;
		color: var(--ksb-ink);
	}

	.stat-label {
		margin-top: var(--ksb-space-2);
		font-size: var(--ksb-fs-xs);
		font-weight: 600;
		letter-spacing: var(--ksb-ls-caps);
		text-transform: uppercase;
		color: var(--ksb-gold);
	}

	.stat-sub {
		margin-top: var(--ksb-space-1);
		font-size: var(--ksb-fs-sm);
		color: var(--ksb-ink-soft);
	}

	@media (max-width: 900px) {
		.background-grid {
			grid-template-columns: 1fr;
			gap: 36px;
		}
	}

	@media (max-width: 560px) {
		.stat-strip {
			grid-template-columns: repeat(2, 1fr);
		}

		.stat-cell:nth-child(2) {
			border-right: none;
		}

		.stat-cell:nth-child(3) {
			padding-left: 0;
			border-top: 1px solid var(--ksb-line);
		}
	}

	/* ── Verein ──────────────────────────────────────────────────────── */
	.verein-section {
		padding: var(--ksb-section-y) 0;
		background: var(--ksb-cream);
	}

	.verein-grid {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: var(--ksb-space-9);
		align-items: center;
	}

	.verein-grid .eyebrow {
		margin-bottom: 14px;
	}

	.verein-grid .lede {
		max-width: 540px;
		margin: 18px 0 28px;
	}

	.verein-cta {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--ksb-space-3);
	}

	.verein-visual {
		position: relative;
		aspect-ratio: 4 / 3;
	}

	.verein-visual__platzhalter {
		height: 100%;
	}

	.verein-badge {
		position: absolute;
		top: -18px;
		right: -18px;
		max-width: 220px;
		padding: var(--ksb-space-4) 20px;
		background: var(--ksb-paper);
		border: 1px solid var(--ksb-line);
		border-radius: var(--ksb-radius-md);
		box-shadow: var(--ksb-shadow-md);
	}

	.verein-badge .n {
		font-family: var(--ksb-font-display);
		font-size: 36px;
		font-weight: 400;
		line-height: 1;
		letter-spacing: -.02em;
		color: var(--ksb-green);
	}

	.verein-badge .l {
		margin-top: var(--ksb-space-2);
		font-size: var(--ksb-fs-xs);
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: var(--ksb-ls-caps);
		text-transform: uppercase;
		color: var(--ksb-gold);
	}

	.verein-badge .s {
		margin-top: var(--ksb-space-1);
		font-size: var(--ksb-fs-sm);
		line-height: 1.4;
		color: var(--ksb-ink-soft);
	}

	@media (max-width: 900px) {
		.verein-grid {
			grid-template-columns: 1fr;
			gap: 56px;
		}

		.verein-badge {
			top: -14px;
			right: 0;
		}
	}

	@media (max-width: 600px) {
		.verein-grid {
			gap: 36px;
		}

		.verein-badge {
			top: -10px;
			max-width: 180px;
		}

		.verein-badge .n {
			font-size: 28px;
		}
	}
}