/*
 * #BEACTIVE Woche Vorarlberg
 *
 * Handgeschrieben, ohne Build-Schritt. Aufbau:
 *   1. Schriften      2. Farbwerte      3. Grundlagen
 *   4. Layout         5. Bausteine      6. Bereiche
 *   7. Bewegung
 *
 * Farben und Radien stammen aus dem Figma-Entwurf (theme.css). Die drei dort
 * getrennten Schriftfamilien fallen hier zusammen.
 */

/* ---------------------------------------------------------------- 1. Schriften */

/*
 * Barlow, SIL Open Font License 1.1 (siehe assets/fonts/OFL.txt).
 *
 * Ersetzt FF DIN: das ist eine Lizenzschrift von Monotype, deren Web-Lizenz
 * an Domain und Abrufzahl gebunden ist. Barlow steht der Zeichnung nach nah
 * — schmale Grotesk mit kleiner x-Höhe — und liegt in der Laufweite nur
 * zwei Prozent daneben, sodass das Layout unverändert bleibt.
 *
 * Die Dateien sind auf Latein und Latein erweitert beschnitten; Emoji in den
 * Beschreibungen der Betriebe übernimmt wie zuvor die Systemschrift.
 */
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/Barlow-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/Barlow-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
/* SemiBold trägt die Hauptüberschrift. */
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/Barlow-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/Barlow-SemiBoldItalic.woff2') format('woff2');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/Barlow-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/Barlow-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
/* Diesen Schnitt hatte DIN nicht — kursive Überschriften mussten bisher
   vom Browser schräggestellt werden. */
@font-face {
	font-family: 'Barlow';
	src: url('../fonts/Barlow-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
/* ---------------------------------------------------------------- 2. Farbwerte */

:root {
	--bw-font: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

	--bw-bg: #ffffff;
	--bw-fg: #000000;
	/* Amber des Logos. Auf Weiß nur 1,76:1 — deshalb ausschließlich als
	   Fläche, nie als Schriftfarbe. Dafür steht --bw-primary-ink. */
	--bw-primary: #fbb800;
	--bw-primary-rgb: 251 184 0;
	/* Schwarz des Logos auf Amber: 10,7:1. */
	--bw-primary-fg: #12120e;
	/* Gleiche Farbfamilie, aber dunkel genug für Fließtext auf Weiß: 5,5:1. */
	--bw-primary-ink: #8f5f00;
	--bw-amber-light: #ffc629;
	--bw-ink: #12120e;
	--bw-secondary: #fff7e0;
	--bw-secondary-rgb: 255 247 224;
	--bw-secondary-fg: #4a3400;
	--bw-muted: #f5f5f5;
	--bw-muted-fg: #666666;
	--bw-accent: #fff4d6;
	--bw-accent-fg: #8f5f00;
	--bw-border: #e5e5e5;

	/* Grün des Figma-Entwurfs (#22c55e) erreicht auf Weiß nur 2,2:1 — zu wenig. */
	--bw-live: #15803d;

	--bw-radius: 0.625rem;
	--bw-radius-lg: 1rem;
	--bw-radius-xl: 1.25rem;

	/*
	 * Schriftgrade und Zeilenhöhen wie auf wko.at/vlbg (Bootstrap-Skala der
	 * Wirtschaftskammer). Unterhalb von 1230px greift dort eine kleinere,
	 * mitwachsende Staffel — die Werte sind 1:1 übernommen.
	 */
	--bw-fs-h1: calc(1.3rem + 0.6vw);
	--bw-lh-h1: 2.25rem;
	--bw-fs-h2: calc(1.28125rem + 0.375vw);
	--bw-lh-h2: 2rem;
	--bw-fs-h3: calc(1.2625rem + 0.15vw);
	--bw-lh-h3: 1.75rem;
	--bw-fs-h4: 1.25rem;
	--bw-lh-h4: 1.5625rem;
	--bw-fs-h5: 1.125rem;
	--bw-lh-h5: 1.375rem;
	--bw-fs-h6: 0.875rem;
	--bw-lh-h6: 1.125rem;
	--bw-fs-lead: 1.25rem;
	--bw-fs-small: 0.875rem;

	--bw-shell: 72rem;
	--bw-shell-narrow: 48rem;
	--bw-gutter: 1.25rem;

	--bw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--bw-shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Ab 1230px schaltet wko.at auf die großen Schriftgrade um. */
@media (min-width: 1230px) {
	:root {
		--bw-fs-h1: 2.75rem;
		--bw-lh-h1: 3.5rem;
		--bw-fs-h2: 2.25rem;
		--bw-lh-h2: 2.875rem;
		--bw-fs-h3: 1.75rem;
		--bw-lh-h3: 2.25rem;
		--bw-fs-h4: 1.375rem;
		--bw-lh-h4: 1.75rem;
	}
}

/* ---------------------------------------------------------------- 3. Grundlagen */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Damit Sprungmarken nicht unter der klebenden Markenleiste landen. */
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--bw-bg);
	color: var(--bw-fg);
	font-family: var(--bw-font);
	font-size: 1rem;
	line-height: 1.5;
	/*
	 * Kein -webkit-font-smoothing: antialiased. Das lässt Striche auf macOS
	 * dünner wirken, als die Schrift gezeichnet ist — wko.at verzichtet im
	 * gesamten Stylesheet darauf.
	 */
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
	/* wko.at setzt keine Laufweite auf Überschriften. */
}

p {
	margin: 0;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
}

hr {
	border: 0;
	border-top: 1px solid var(--bw-border);
	margin: 0;
}

address {
	font-style: normal;
}

:focus-visible {
	outline: 2px solid var(--bw-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.bw-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bw-skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--bw-primary);
	color: var(--bw-primary-fg);
	border-radius: 0 0 var(--bw-radius) var(--bw-radius);
}

.bw-skip-link:focus {
	top: 0;
}

/* ---------------------------------------------------------------- 4. Layout */

.bw-shell {
	width: 100%;
	max-width: var(--bw-shell);
	margin-inline: auto;
	padding-inline: var(--bw-gutter);
}

.bw-shell--narrow {
	max-width: var(--bw-shell-narrow);
}

.bw-section {
	padding-block: 3.5rem;
}

.bw-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.bw-section {
		padding-block: 5rem;
	}

	.bw-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bw-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- 5. Bausteine */

/* Icons */

.bw-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
}

.bw-icon--xs { width: 0.75rem;  height: 0.75rem; }
.bw-icon--sm { width: 1rem;     height: 1rem; }
.bw-icon--md { width: 1.5rem;   height: 1.5rem; }
.bw-icon--lg { width: 1.75rem;  height: 1.75rem; }

.bw-icon--accent { color: var(--bw-primary-ink); }
.bw-icon--muted  { color: var(--bw-muted-fg); }

/* Überschriften */

/*
 * Die Hauptüberschrift läuft in SemiBold (600) — kräftig genug, um vor den
 * Zwischenüberschriften zu stehen, ohne so schwer zu wirken wie 700.
 */
.bw-h1,
.bw-single__title,
.bw-hero__title {
	font-weight: 600;
}

.bw-h1 {
	font-size: var(--bw-fs-h1);
	line-height: var(--bw-lh-h1);
}

.bw-h2 {
	font-size: var(--bw-fs-h2);
	line-height: var(--bw-lh-h2);
}

.bw-h3 {
	font-size: var(--bw-fs-h3);
	line-height: var(--bw-lh-h3);
}

.bw-lede {
	margin-top: 0.5rem;
	font-size: var(--bw-fs-lead);
	color: var(--bw-fg);
}

.bw-eyebrow {
	font-size: var(--bw-fs-h6);
	line-height: var(--bw-lh-h6);
	font-weight: 400;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--bw-primary-ink);
}

.bw-rule {
	margin-block: 0.25rem;
}

/* Pillen und Abzeichen */

.bw-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 1rem;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.bw-pill--dark {
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	backdrop-filter: blur(8px);
	font-weight: 400;
}

.bw-pill--outline {
	border: 1px solid rgb(255 255 255 / 0.2);
	background: rgb(255 255 255 / 0.1);
	color: #fff;
	backdrop-filter: blur(8px);
}

.bw-pill--region {
	border: 1px solid var(--bw-border);
	background: rgb(var(--bw-secondary-rgb) / 0.6);
	color: var(--bw-fg);
	padding: 0.25rem 0.625rem;
	font-size: var(--bw-fs-small);
	white-space: nowrap;
}

.bw-pill__icon {
	color: var(--bw-primary-ink);
}

.bw-pill--outline .bw-pill__icon {
	color: var(--bw-amber-light);
}

.bw-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1875rem 0.5rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
}

.bw-badge--accent {
	background: var(--bw-accent);
	color: var(--bw-accent-fg);
}

.bw-badge--ink {
	background: var(--bw-ink);
	color: #fff;
}

/* Statusanzeige — Text und Farbe setzt das Script anhand der Datumsangaben. */

.bw-status {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.bw-status[hidden] {
	display: none;
}

.bw-status--live {
	background: var(--bw-live);
	color: #fff;
}

.bw-status--upcoming {
	background: rgb(255 255 255 / 0.92);
	color: var(--bw-ink);
}

.bw-status--past {
	background: var(--bw-muted);
	color: var(--bw-muted-fg);
}

.bw-status__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: currentColor;
	animation: bw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Schaltflächen */

.bw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-weight: 500;
	cursor: pointer;
	transition: transform 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
}

.bw-btn--primary {
	background: var(--bw-primary);
	color: var(--bw-primary-fg);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: var(--bw-shadow);
}

.bw-btn--primary:hover {
	transform: scale(1.04);
}

.bw-btn--ghost {
	flex: 1;
	padding: 0.625rem 1rem;
	border-color: var(--bw-border);
	background: transparent;
	border-radius: var(--bw-radius);
	font-size: 0.875rem;
}

.bw-btn--ghost:hover {
	background: rgb(var(--bw-secondary-rgb) / 0.6);
}

.bw-btn--block {
	display: flex;
	width: 100%;
	border-radius: var(--bw-radius);
	text-transform: none;
	font-style: normal;
}

/* ---------------------------------------------------------------- 6. Bereiche */

/* Markenleiste */

.bw-brandbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--bw-border);
	background: rgb(255 255 255 / 0.9);
	backdrop-filter: blur(8px);
}

.bw-brandbar__inner {
	display: flex;
	align-items: center;
	/* Logo und Regions-Abzeichen stehen mittig. */
	justify-content: center;
	gap: 1rem;
	padding-block: 0.25rem;
}

.bw-brandbar__brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

/*
 * Das Logo stapelt drei Bänder übereinander ("European Week of Sport",
 * "#BEACTIVE", das Datum). Es braucht deshalb mehr Höhe als ein einzeiliger
 * Schriftzug, sonst sind die schmalen Bänder nicht mehr zu entziffern.
 */
.bw-brandbar__logo {
	/*
	 * Mitwachsend statt in Stufen: das Logo soll auf dem Telefon so groß sein
	 * wie der Platz neben dem Regions-Abzeichen hergibt. Bei 320px bleiben mit
	 * 15vw noch sieben Pixel Luft — mit 16vw reicht es nicht mehr.
	 */
	height: clamp(2.75rem, 15vw, 4rem);
	width: auto;
	flex: none;
	object-fit: contain;
}

.bw-brandbar__brand .bw-pill--region {
	margin-left: -0.25rem;
}

/*
 * Unter 400px passen Logo und Regions-Abzeichen sonst nicht nebeneinander und
 * schieben die ganze Seite über den Rand hinaus (WCAG 1.4.10).
 */
@media (max-width: 400px) {
	.bw-pill--region {
		padding: 0.2rem 0.5rem;
		font-size: 0.75rem;
	}
}

@media (min-width: 640px) {
	.bw-brandbar__logo { height: 4rem; }
}

@media (min-width: 768px) {
	.bw-brandbar__logo { height: 5rem; }
}

/* Kopfbereich */

.bw-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background: var(--bw-ink);
	color: #fff;
}

.bw-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Der Entwurf sah 0.25 vor — davon blieb vom Foto kaum etwas übrig. */
	opacity: 0.55;
}

/*
 * Der Schleier hält den weißen Text lesbar. Die Werte sind nicht frei
 * gewählt: selbst wenn das Foto an einer Stelle rein weiß ist, erreicht der
 * schwächste Text im Kopfbereich (Countdown-Beschriftung, weiß mit 60 %,
 * 14px) noch rund 5,6:1 — nötig wären 4,5:1.
 */
.bw-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom right, rgb(0 0 0 / 0.80), rgb(20 20 20 / 0.62), rgb(0 0 0 / 0.78));
}

.bw-hero__inner {
	position: relative;
	display: grid;
	align-items: center;
	gap: 2.5rem;
	padding-top: 4rem;
	padding-bottom: 7rem;
}

.bw-hero__title {
	margin-top: 1.5rem;
	font-size: clamp(2.5rem, 7vw, 4.5rem);
	font-weight: 600;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 1;
}

.bw-hero__title-b {
	color: var(--bw-amber-light);
}

.bw-hero__kicker {
	margin-top: 1rem;
	font-size: var(--bw-fs-h3);
	line-height: var(--bw-lh-h3);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.bw-hero__intro {
	margin-top: 1rem;
	max-width: 42rem;
	font-size: var(--bw-fs-lead);
	color: rgb(255 255 255 / 0.85);
}

.bw-hero__motto {
	color: #fff;
	font-weight: 700;
}

.bw-hero__cta--inline {
	margin-top: 2rem;
	display: inline-flex;
}

.bw-hero__scroll {
	display: none;
}

@media (min-width: 1024px) {
	.bw-hero {
		min-height: calc(100vh - 6rem);
		min-height: calc(100svh - 6rem);
	}

	.bw-hero__inner {
		grid-template-columns: 1fr 340px;
		padding-top: 6rem;
		padding-bottom: 8rem;
	}

	.bw-hero__cta--inline {
		display: none;
	}

	.bw-hero__scroll {
		position: absolute;
		inset-inline: 0;
		bottom: 3.5rem;
		display: flex;
		justify-content: center;
	}
}

/* Countdown */

.bw-countdown {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

.bw-countdown__label {
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgb(255 255 255 / 0.6);
}

.bw-countdown__units {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.bw-countdown__unit {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem;
	border-radius: var(--bw-radius-xl);
	background: rgb(255 255 255 / 0.1);
	backdrop-filter: blur(8px);
}

.bw-countdown__value {
	font-size: var(--bw-fs-h2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.bw-countdown__unit-label {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgb(255 255 255 / 0.5);
}

@media (min-width: 640px) {
	.bw-countdown__units { gap: 0.75rem; }

	.bw-countdown__unit {
		flex: none;
		min-width: 3.75rem;
		padding-inline: 0.75rem;
	}
}

/* Video */

.bw-hero__media {
	justify-self: center;
}

.bw-video {
	position: relative;
	width: 18rem;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--bw-radius-xl);
	background: rgb(0 0 0 / 0.4);
	box-shadow: var(--bw-shadow-lg);
	outline: 1px solid rgb(255 255 255 / 0.15);
	outline-offset: -1px;
}

.bw-video__el {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bw-video__toggle {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.bw-video__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 999px;
	background: var(--bw-primary);
	color: var(--bw-primary-fg);
	transition: opacity 0.2s;
}

.bw-video__pause { display: none; }

.bw-video.is-playing .bw-video__icon { opacity: 0; }
.bw-video.is-playing:hover .bw-video__icon { opacity: 1; }
.bw-video.is-playing .bw-video__play { display: none; }
.bw-video.is-playing .bw-video__pause { display: block; }

.bw-video__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1rem;
	background: linear-gradient(to top, rgb(0 0 0 / 0.8), transparent);
	pointer-events: none;
}

.bw-video__title {
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.2;
}

.bw-video__duration {
	font-size: 0.875rem;
	color: rgb(255 255 255 / 0.75);
}

@media (min-width: 640px) {
	.bw-video { width: 20rem; }
}

@media (min-width: 1024px) {
	.bw-hero__media { justify-self: end; }
	.bw-video { width: 100%; }
}

/* Angebotsübersicht */

.bw-directory__intro {
	margin-bottom: 2rem;
}

.bw-directory__heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bw-directory__heading .bw-icon {
	width: 1.5rem;
	height: 1.5rem;
}

/* Filter */

.bw-filter {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.5rem;
	/* Auf schmalen Geräten seitlich scrollbar statt umgebrochen. */
	scrollbar-width: none;
}

.bw-filter::-webkit-scrollbar {
	display: none;
}

.bw-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex: none;
	padding: 0.5rem 1rem;
	border: 1px solid var(--bw-border);
	border-radius: 999px;
	background: var(--bw-bg);
	font-size: 0.875rem;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.bw-chip:hover {
	border-color: rgb(var(--bw-primary-rgb) / 0.5);
	background: rgb(var(--bw-secondary-rgb) / 0.5);
}

.bw-chip.is-active {
	border-color: var(--bw-primary);
	background: var(--bw-primary);
	color: var(--bw-primary-fg);
}

.bw-chip__count {
	padding-inline: 0.375rem;
	border-radius: 999px;
	background: var(--bw-muted);
	color: var(--bw-muted-fg);
	font-size: 0.75rem;
}

.bw-chip.is-active .bw-chip__count {
	background: rgb(255 255 255 / 0.2);
	color: inherit;
}

@media (min-width: 640px) {
	.bw-filter {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/* Bezirksgruppen */

.bw-directory__groups {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	margin-top: 2rem;
}

.bw-group[hidden] {
	display: none;
}

.bw-group__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.bw-group__title {
	font-size: var(--bw-fs-h4);
	line-height: var(--bw-lh-h4);
}

.bw-group__count {
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--bw-muted);
	color: var(--bw-muted-fg);
	font-size: 0.875rem;
}

.bw-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
	padding-block: 4rem;
	border: 1px dashed var(--bw-border);
	border-radius: var(--bw-radius-lg);
	color: var(--bw-muted-fg);
	text-align: center;
}

.bw-empty[hidden] {
	display: none;
}

/* Angebotskarte */

.bw-card {
	display: flex;
	position: relative;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-lg);
	background: var(--bw-bg);
	overflow: hidden;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.bw-card[hidden] {
	display: none;
}

.bw-card:hover {
	transform: translateY(-4px);
	border-color: rgb(var(--bw-primary-rgb) / 0.4);
	box-shadow: var(--bw-shadow);
}

.bw-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.bw-card__accent {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 10;
	height: 3px;
	background: var(--bw-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s;
}

.bw-card:hover .bw-card__accent {
	transform: scaleX(1);
}

.bw-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--bw-muted);
}

.bw-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.bw-card:hover .bw-card__img {
	transform: scale(1.05);
}

.bw-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1.25rem;
	background: linear-gradient(to bottom right, var(--bw-amber-light), var(--bw-primary));
}

.bw-card__placeholder-text {
	font-size: var(--bw-fs-h4);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1.2;
	/* Der Verlauf ist jetzt Amber — Weiß erreichte darauf nur 1,8:1. */
	color: var(--bw-primary-fg);
	text-align: center;
}

.bw-card__badge {
	position: absolute;
}

.bw-card__badge--bezirk { top: 0.75rem; left: 0.75rem; }
.bw-card__badge--status { top: 0.75rem; right: 0.75rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.1); }
.bw-card__badge--day    { bottom: 0.75rem; left: 0.75rem; }

.bw-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	/* Oben etwas mehr Luft, damit der Text nicht am Bild klebt. */
	padding: 0.875rem 1rem 1rem;
}

.bw-card__eyebrow {
	font-size: var(--bw-fs-h6);
	line-height: var(--bw-lh-h6);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--bw-primary-ink);
}

.bw-card__title {
	font-size: var(--bw-fs-h5);
	line-height: var(--bw-lh-h5);
}

.bw-card__place {
	font-size: 0.875rem;
	color: var(--bw-fg);
}

.bw-card__schedule {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--bw-fg);
}

.bw-card__schedule .bw-icon {
	margin-top: 0.175rem;
}

.bw-card__schedule-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bw-card__more {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: 0.75rem;
	font-weight: 500;
	color: var(--bw-primary-ink);
}

.bw-card:hover .bw-card__more .bw-icon {
	transform: translateX(2px);
}

.bw-card__more .bw-icon {
	transition: transform 0.2s;
}

/* Detailansicht (im Dialog und auf der Einzelseite) */

.bw-detail {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bw-detail__story,
.bw-detail__action {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.bw-detail__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.bw-detail__name {
	font-size: var(--bw-fs-h4);
	line-height: var(--bw-lh-h4);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bw-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.bw-detail__action-title {
	font-size: var(--bw-fs-h5);
	line-height: var(--bw-lh-h5);
	font-weight: 700;
	color: var(--bw-primary-ink);
}

.bw-detail__figure {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--bw-radius);
	background: var(--bw-muted);
}

.bw-detail__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bw-detail__schedule {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--bw-fs-small);
	color: var(--bw-muted-fg);
}

.bw-detail__schedule .bw-icon {
	margin-top: 0.2rem;
}

.bw-detail__text {
	color: var(--bw-fg);
}

.bw-detail__text p + p {
	margin-top: 0.75rem;
}

.bw-detail__actions {
	display: flex;
	gap: 0.5rem;
}

.bw-detail__contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 1rem;
}

.bw-detail__row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.bw-detail__row .bw-icon {
	margin-top: 0.2rem;
}

.bw-detail__row a {
	overflow-wrap: anywhere;
}

.bw-detail__row a:hover {
	color: var(--bw-primary-ink);
	text-decoration: underline;
}

.bw-detail__map {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius);
	background: rgb(var(--bw-secondary-rgb) / 0.4);
	color: var(--bw-secondary-fg);
	font-size: 0.875rem;
	transition: background-color 0.2s;
}

.bw-detail__map:hover {
	background: rgb(var(--bw-secondary-rgb) / 0.8);
}

.bw-detail__map-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Dialog */

.bw-modal {
	width: min(56rem, calc(100vw - 2rem));
	/*
	 * svh statt vh: auf dem Telefon meint vh die Höhe *ohne* die Leisten des
	 * Browsers. Solange die Adressleiste sichtbar ist, gerät der Dialog damit
	 * höher als der sichtbare Bereich und rutscht unten heraus. svh rechnet
	 * mit den Leisten. Die vh-Zeile bleibt als Rückfall für ältere Browser.
	 */
	max-height: 90vh;
	max-height: 90svh;
	/*
	 * --bw-viewport setzt das Script aus visualViewport — dem Ausschnitt, den
	 * man wirklich sieht. Es gewinnt, weil eingebettete Browser (Instagram,
	 * WhatsApp) bei vh und svh mitunter danebenliegen. Ohne Script bleibt es
	 * bei den Zeilen darüber.
	 */
	max-height: calc(var(--bw-viewport, 100svh) * 0.9);
	padding: 0;
	border: 0;
	border-radius: var(--bw-radius-lg);
	background: var(--bw-bg);
	color: var(--bw-fg);
	/* Spalte: Kopfleiste bleibt stehen, nur der Inhalt darunter scrollt. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bw-modal:not([open]) {
	display: none;
}

.bw-modal__bar {
	display: flex;
	justify-content: flex-end;
	flex: none;
	padding: 0.75rem 0.75rem 0;
	background: var(--bw-bg);
}

/*
 * Hinweis, dass unterhalb noch etwas steht. Das Script nimmt ihn weg, sobald
 * ans Ende gescrollt wurde — sonst suggeriert er dauerhaft mehr Inhalt.
 */
.bw-modal__fade {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 3rem;
	background: linear-gradient(to top, var(--bw-bg), transparent);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}

.bw-modal.is-scrollable .bw-modal__fade {
	opacity: 1;
}

.bw-modal::backdrop {
	background: rgb(0 0 0 / 0.6);
	backdrop-filter: blur(2px);
}

.bw-modal__content {
	flex: 1;
	overflow-y: auto;
	padding: 0 1.5rem 1.5rem;
}

/*
 * Ab 900px stehen die beiden Blöcke nebeneinander. Das halbiert die Höhe des
 * Dialogs, ohne die Zeilen zu lang werden zu lassen: gut 50 Zeichen je Zeile.
 * Darunter — und in der Schublade auf dem Handy — bleibt alles untereinander.
 */
@media (min-width: 900px) {
	.bw-modal__content .bw-detail {
		display: grid;
		/*
		 * Ungleiche Spalten: links steht der Fließtext und braucht Platz,
		 * rechts stehen kurze Zeilen. Bei gleicher Breite geriete die linke
		 * Spalte deutlich höher als die rechte.
		 */
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		column-gap: 1.75rem;
		/* Die Handlungsspalte reicht bis nach unten, statt in der Luft zu enden. */
		align-items: stretch;
	}

	.bw-modal__content .bw-detail__head {
		grid-column: 1 / -1;
		margin-bottom: 0.25rem;
	}

	/*
	 * Alles zum Handeln steht auf einer eigenen Fläche. Das fasst Schaltflächen
	 * und Kontaktdaten sichtbar zusammen und lässt den freien Platz darunter
	 * gewollt wirken statt vergessen.
	 */
	.bw-modal__content .bw-detail__action {
		padding: 1.25rem;
		border-radius: var(--bw-radius);
		background: rgb(var(--bw-secondary-rgb) / 0.75);
	}

	/* Nebeneinander ist mehr Höhe da — der Deckel darf großzügiger sein. */
	.bw-modal__content .bw-detail__img {
		max-height: 60vh;
	}

	/* Auf heller Fläche brauchen die Umrissflächen einen eigenen Grund. */
	.bw-modal__content .bw-detail__action .bw-btn--ghost,
	.bw-modal__content .bw-detail__action .bw-detail__map {
		background: var(--bw-bg);
	}
}

/*
 * Im Dialog behält das Bild sein eigenes Seitenverhältnis — nichts wird
 * beschnitten. Statt eines festen Rahmens begrenzt ein Deckel die Höhe: bei
 * Querformaten greift er nicht, ein Hochformat wird auf ihn heruntergerechnet
 * und mittig gestellt, statt den halben Dialog zu füllen.
 */
.bw-modal__content .bw-detail__figure {
	aspect-ratio: auto;
	max-height: none;
	/* Ohne Beschnitt bleibt keine Fläche übrig, die einen Grund bräuchte. */
	background: none;
}

.bw-modal__content .bw-detail__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 22rem;
	margin-inline: auto;
	object-fit: contain;
	border-radius: var(--bw-radius);
}

.bw-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--bw-border);
	border-radius: 999px;
	background: var(--bw-bg);
	cursor: pointer;
}

.bw-modal__close:hover {
	background: var(--bw-muted);
}

/* Unter 768px als Schublade vom unteren Rand — wie im Entwurf. */
@media (max-width: 767px) {
	/*
	 * Auf dem Telefon füllt der Dialog den Bildschirm, statt als Schublade am
	 * unteren Rand zu sitzen.
	 *
	 * Die Schublade brauchte eine Höhe — und woher die kommt, beantworten die
	 * Browser verschieden: vh meint den Ausschnitt ohne ihre Leisten, svh mit,
	 * und Chrome auf iOS legt seine Leiste zusätzlich über den Bereich, in dem
	 * fest verankerte Elemente sitzen. Die Schublade rutschte dadurch unter
	 * den Bildschirmrand.
	 *
	 * inset: 0 braucht keine Höhenangabe: der Dialog spannt sich zwischen
	 * oberen und unteren Rand, was der Browser auch immer dafür hält. Die
	 * Kopfleiste mit dem Schließen-Knopf steht oben und bleibt stehen, der
	 * Inhalt darunter scrollt.
	 */
	.bw-modal {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		max-height: none;
		/*
		 * Das Standard-Stylesheet der Browser setzt für <dialog>
		 * height: fit-content. Damit richtet sich die Höhe nach dem Inhalt und
		 * inset: 0 bliebe wirkungslos — der Dialog wüchse über den unteren
		 * Rand hinaus. Mit height: auto spannt er sich wieder zwischen die
		 * beiden Ränder.
		 */
		height: auto;
		margin: 0;
		border-radius: 0;
	}

	.bw-modal__content {
		/*
		 * Reichlich Luft unten: Chrome und Safari legen auf iOS ihre Leiste
		 * über den unteren Rand. Ohne den Abstand endet der letzte Absatz
		 * dahinter.
		 */
		padding: 0 1.25rem calc(5rem + env(safe-area-inset-bottom));
	}
}

/* Meldung */

.bw-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	z-index: 60;
	transform: translateX(-50%);
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	background: var(--bw-ink);
	color: #fff;
	font-size: 0.875rem;
	box-shadow: var(--bw-shadow-lg);
}

.bw-toast[hidden] {
	display: none;
}

/* Säulen */

.bw-pillars__intro {
	max-width: 42rem;
	margin-bottom: 2rem;
}

.bw-pillars__intro .bw-h2 {
	margin-top: 0.5rem;
}

.bw-grid--3 {
	gap: 1.25rem;
}

.bw-pillar {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-lg);
	background: var(--bw-bg);
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.bw-pillar:hover {
	transform: translateY(-4px);
	border-color: rgb(var(--bw-primary-rgb) / 0.4);
	box-shadow: var(--bw-shadow);
}

.bw-pillar__accent {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 3px;
	background: var(--bw-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s;
}

.bw-pillar:hover .bw-pillar__accent {
	transform: scaleX(1);
}

.bw-pillar__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.bw-pillar__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--bw-radius-xl);
	background: var(--bw-accent);
	color: var(--bw-accent-fg);
	transition: background-color 0.2s, color 0.2s;
}

.bw-pillar:hover .bw-pillar__icon {
	background: var(--bw-primary);
	color: var(--bw-primary-fg);
}

.bw-pillar__number {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	/* 0.25 ergab nur 1,43:1 — 0.70 erreicht die 3:1 für große Schrift. */
	color: var(--bw-primary-ink);
}

.bw-pillar__title {
	margin-top: 1.25rem;
	/* Gleiche Auszeichnung wie die Titel der Angebotskarten darüber. */
	font-size: var(--bw-fs-h5);
	line-height: var(--bw-lh-h5);
}

.bw-pillar__text {
	margin-top: 0.5rem;
	font-size: var(--bw-fs-small);
	color: var(--bw-fg);
}

/* Häufige Fragen */

.bw-faq,
.bw-contact {
	border-top: 1px solid var(--bw-border);
	background: rgb(var(--bw-secondary-rgb) / 0.35);
}

.bw-faq__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.bw-faq__item {
	border-bottom: 1px solid var(--bw-border);
}

.bw-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	font-size: var(--bw-fs-h5);
	line-height: var(--bw-lh-h5);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.bw-faq__question::-webkit-details-marker {
	display: none;
}

.bw-faq__question:hover {
	color: var(--bw-primary-ink);
}

.bw-faq__chevron {
	flex: none;
	color: var(--bw-muted-fg);
	transition: transform 0.2s;
}

.bw-faq__item[open] .bw-faq__chevron {
	transform: rotate(180deg);
}

.bw-faq__answer {
	padding-bottom: 1.25rem;
	font-size: 1rem;
	color: var(--bw-fg);
}

.bw-faq__answer p + p {
	margin-top: 0.75rem;
}

/* Kontakt */

.bw-contact__org {
	margin-top: 0.25rem;
	color: var(--bw-muted-fg);
}

.bw-contact .bw-h2 {
	margin-top: 0.5rem;
}

.bw-contact__cards {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

.bw-contact__card {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.25rem;
	border: 1px solid var(--bw-border);
	border-radius: var(--bw-radius-xl);
	background: var(--bw-bg);
}

.bw-contact__card .bw-icon {
	margin-top: 0.2rem;
}

.bw-contact__card--links {
	flex-direction: column;
	gap: 1rem;
}

.bw-contact__address {
	/* Die Anschrift ist eine Angabe für sich, keine Nebenbemerkung — Grau
	   bleibt Ort und Zeitraum auf den Karten, Brotkrümeln und der Fußzeile
	   vorbehalten. */
	color: var(--bw-fg);
}

.bw-contact__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	overflow-wrap: anywhere;
	transition: color 0.2s;
}

.bw-contact__link:hover {
	color: var(--bw-primary-ink);
}

.bw-contact__more {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 1.5rem;
	font-weight: 500;
	color: var(--bw-primary-ink);
}

.bw-contact__more:hover {
	text-decoration: underline;
}

@media (min-width: 640px) {
	.bw-contact__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Fußzeile */

.bw-footer {
	background: var(--bw-ink);
	color: #fff;
	padding-block: 3.5rem;
}

.bw-footer__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	text-align: center;
}

.bw-footer__brand {
	max-width: 28rem;
}

.bw-footer__lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.bw-footer__logo {
	height: 4rem;
	width: auto;
	object-fit: contain;
}

.bw-footer__intro {
	margin-top: 1rem;
	color: rgb(255 255 255 / 0.7);
}

.bw-footer__window {
	margin-top: 1.25rem;
}

.bw-footer__partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.bw-footer__partner {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 0.75rem 1.25rem;
	border-radius: var(--bw-radius);
	background: #fff;
}

.bw-footer__partner img {
	height: 3.25rem;
	width: auto;
	object-fit: contain;
}

.bw-footer__eu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid rgb(255 255 255 / 0.15);
	text-align: center;
}

.bw-footer__eu-text {
	max-width: 36rem;
	color: rgb(255 255 255 / 0.6);
}

.bw-footer__eu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	flex: none;
	color: var(--bw-amber-light);
	transition: color 0.2s;
}

.bw-footer__eu-link:hover {
	color: #fff;
}

.bw-footer__legal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.15);
	font-size: 0.875rem;
	color: rgb(255 255 255 / 0.45);
	text-align: center;
}

.bw-footer__legal-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.bw-footer__menu {
	display: flex;
	flex-wrap: wrap;
	/* Mittig unter den beiden Hinweisen. */
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.bw-footer__menu a:hover {
	color: #fff;
	text-decoration: underline;
}

@media (min-width: 640px) {
	.bw-footer__lockup {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
	}

	.bw-footer__legal-row {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0.5rem 1.5rem;
	}
}

@media (min-width: 768px) {
	.bw-footer {
		padding-block: 4rem;
	}

	/*
	 * Der Kopf der Fußzeile bleibt bewusst einspaltig: die Partner-Logos
	 * stehen unter dem Text und beginnen an derselben Kante wie er, statt
	 * rechts abgesetzt zu schweben.
	 */
	.bw-footer__logo {
		height: 5rem;
	}

	/* Der EU-Hinweis bleibt einspaltig und mittig wie der Kopf darüber. */
}

/* Einzelseite, Archive, einfache Seiten */

.bw-main {
	display: block;
}

.bw-single,
.bw-archive,
.bw-page {
	padding-block: 2.5rem 4rem;
}

.bw-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
	color: var(--bw-muted-fg);
}

.bw-breadcrumb a:hover {
	color: var(--bw-primary-ink);
	text-decoration: underline;
}

.bw-single__title {
	margin-bottom: 1.5rem;
	font-size: var(--bw-fs-h1);
	line-height: var(--bw-lh-h1);
}

.bw-archive__head {
	margin-bottom: 2.5rem;
}

.bw-related {
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--bw-border);
}

.bw-related .bw-grid {
	margin-top: 1.5rem;
	grid-template-columns: 1fr;
}

.bw-single__back {
	margin-top: 3rem;
	font-weight: 500;
	color: var(--bw-primary-ink);
}

.bw-single__back a:hover {
	text-decoration: underline;
}

.bw-404 {
	padding-block: 4rem 6rem;
	text-align: center;
}

.bw-404 .bw-btn {
	margin-top: 2rem;
}

.bw-prose h2 { margin-top: 2rem; font-size: var(--bw-fs-h2); line-height: var(--bw-lh-h2); }
.bw-prose h3 { margin-top: 1.5rem; font-size: var(--bw-fs-h3); line-height: var(--bw-lh-h3); }
.bw-prose p,
.bw-prose ul,
.bw-prose ol { margin-top: 1rem; }
.bw-prose a { color: var(--bw-primary-ink); text-decoration: underline; }

@media (min-width: 640px) {
	.bw-related .bw-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.bw-related .bw-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- 7. Bewegung */

@keyframes bw-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

@keyframes bw-bounce {
	0%, 100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
	50%      { transform: none;             animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

.bw-icon--bounce {
	animation: bw-bounce 1s infinite;
}

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt hier keine.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.bw-card:hover,
	.bw-pillar:hover,
	.bw-btn--primary:hover {
		transform: none;
	}
}

/* ------------------------------------------- 14. Datenschutz-Einbettung */

/*
 * Der Usercentrics-Generator schreibt seine eigenen Stile als <style>-Block
 * in die Seite. Der steht im Dokument hinter dieser Datei und gewinnt bei
 * gleicher Spezifität — die Regeln hier sind deshalb bewusst eine Stufe
 * höher gehalten.
 *
 * Sein Kern ist eine Tabelle mit fünf Spalten, deren Breiten fest in Pixeln
 * stehen (zusammen über 1100). In der Lesebreite von 48rem läuft sie über
 * den Rand. Die Seite bekommt darum den weiten Container (siehe page.php),
 * die Spalten dürfen sich nach ihrem Inhalt richten, und bleibt es dennoch
 * zu eng, scrollt die Tabelle waagrecht in ihrem eigenen Rahmen — statt die
 * ganze Seite seitlich zu verschieben.
 */
.bw-page--embed .privacy-wrapper {
	padding: 0;
}

/*
 * Der weite Container ist für die Tabelle da, nicht für den Fließtext: über
 * die volle Breite gelesen wäre eine Zeile weit über hundert Zeichen lang.
 * Text und Listen bleiben deshalb auf Lesebreite, die Tabelle darf ausbrechen.
 */
.bw-page--embed .privacy-title,
.bw-page--embed .privacy-section-title,
.bw-page--embed .privacy-subtitle,
.bw-page--embed .privacy-text,
.bw-page--embed .privacy-content > .privacy-section > .privacy-list,
.bw-page--embed .privacy-content > .privacy-section > .privacy-section > .privacy-list {
	max-width: 42rem;
}

/* Innerhalb der Tabelle gilt die Begrenzung nicht — dort ist jede Zelle eng. */
.bw-page--embed .privacy-table .privacy-text,
.bw-page--embed .privacy-table .privacy-list {
	max-width: none;
}

.bw-page--embed .privacy-table-container {
	overflow-x: auto;
	/* Der Rahmen des Generators rundet die Ecken; beim Scrollen soll die
	   Tabelle darin bleiben und nicht darüber hinauslaufen. */
	-webkit-overflow-scrolling: touch;
}

.bw-page--embed .privacy-table {
	table-layout: auto;
	min-width: 44rem;
}

/* :nth-child(n) trifft jede Zelle und hebt die festen Pixelbreiten auf. */
.bw-page--embed .privacy-table th:nth-child(n),
.bw-page--embed .privacy-table td:nth-child(n) {
	width: auto;
}

/*
 * Der Generator setzt word-break: break-word auf jede Zelle. Sobald die
 * Spalten nicht mehr fest vermessen sind, trennt das mitten im Wort
 * ("Cloudflar/e"). Nur die Spalte mit der fremden Adresse braucht das.
 */
.bw-page--embed .privacy-table th:nth-child(n),
.bw-page--embed .privacy-table td:nth-child(n) {
	word-break: normal;
	overflow-wrap: break-word;
}

.bw-page--embed .privacy-table td:last-child {
	word-break: break-all;
}

/* Firmenname und Anbieter sind kurz — ohne Mindestbreite quetscht der
   Umbruch sie in eine Spalte von wenigen Zeichen. */
.bw-page--embed .privacy-table th:nth-child(1),
.bw-page--embed .privacy-table td:nth-child(1),
.bw-page--embed .privacy-table th:nth-child(2),
.bw-page--embed .privacy-table td:nth-child(2) {
	min-width: 8.5rem;
}

.bw-page--embed .privacy-table a {
	color: var(--bw-primary-ink);
	text-decoration: underline;
}

@media (max-width: 640px) {
	.bw-page--embed .privacy-title {
		font-size: var(--bw-fs-h2);
	}
}