/*
Theme Name: Bürgerfest Ingolstadt 2026
Theme URI: https://buergerfest-in.de/
Author: fwn.media
Author URI: https://fwn-media.de/
Description: Maßgeschneidertes Theme für das Bürgerfest Ingolstadt 2026 – „Von Bürgern für Bürger“. Warmer Plakat-Look mit Rot-Orange, echten Ingolstädter Wahrzeichen, Live-Countdown, Bändchen-, Location-, Über-uns- und Partner-Sektion sowie eine eigene Programmseite mit Jetzt-Markierung. Inhalte vollständig im Customizer sowie über die Inhaltstypen „Partner“ und „Veranstalter“ pflegbar. Lokal gehostete Schriften (Bebas Neue, Source Sans 3, Kaushan Script), keine externen Abhängigkeiten, kein Page Builder, kein Plugin nötig.
Version: 1.3.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buergerfest-ingolstadt
Tags: one-page, event, festival, custom-colors, custom-logo, translation-ready, front-page-post-form
*/

/* ==========================================================================
   1. Schriften – lokal gehostet (DSGVO-konform, kein externes CDN)
   ========================================================================== */

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/BebasNeue-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/SourceSans3-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/SourceSans3-SemiBold.woff2") format("woff2");
}

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/SourceSans3-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "Kaushan Script";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/KaushanScript-Regular.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Kaushan Script";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/KaushanScript-Regular-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
		U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
		U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
		U+A720-A7FF;
}

/* ==========================================================================
   2. Design-Tokens
   ========================================================================== */

:root {
	--bf-red: #a81935;
	--bf-red-deep: #7d1228;
	--bf-red-bright: #c0203f;
	--bf-orange: #e8743b;
	--bf-orange-soft: #ffb98f;
	--bf-green: #5f8a3f;
	--bf-fwn: #3aa85f;

	--bf-ink: #2a1418;
	--bf-ink-soft: #3a2228;
	--bf-muted: #7a6a66;

	--bf-cream: #fbf4ef;
	--bf-cream-2: #faf6f2;
	--bf-paper: #fffaf6;
	--bf-line: #efe0d7;

	--bf-display: "Bebas Neue", "Arial Narrow", "Oswald", sans-serif;
	--bf-script: "Kaushan Script", "Segoe Script", cursive;
	--bf-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--bf-shadow-sm: 0 6px 18px rgba(125, 18, 40, 0.08);
	--bf-shadow: 0 16px 40px rgba(125, 18, 40, 0.14);
	--bf-shadow-lg: 0 24px 60px rgba(125, 18, 40, 0.20);

	--bf-radius: 18px;
	--bf-radius-lg: 24px;

	--bf-header-h: 76px;
	--bf-maxw: 1140px;
}

/* ==========================================================================
   3. Basis
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--bf-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--bf-ink);
	background: var(--bf-paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--bf-red); text-decoration: none; }
a:hover { color: var(--bf-red-deep); }

::selection { background: var(--bf-orange); color: #fff; }

:focus-visible {
	outline: 3px solid var(--bf-orange);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.bf-skip-link {
	position: absolute;
	left: 50%;
	top: -60px;
	transform: translateX(-50%);
	background: var(--bf-red);
	color: #fff;
	padding: 10px 20px;
	border-radius: 0 0 12px 12px;
	z-index: 200;
	transition: top .2s ease;
}
.bf-skip-link:focus { top: 0; color: #fff; }

/* Typografie-Bausteine */
.bf-h2 {
	font-family: var(--bf-display);
	font-weight: 400;
	letter-spacing: 1.5px;
	color: var(--bf-red);
	font-size: clamp(34px, 5.4vw, 60px);
	line-height: 1.02;
	margin: 0 0 16px;
}
.bf-h3 {
	font-family: var(--bf-display);
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--bf-ink);
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.08;
	margin: 0 0 12px;
}
.bf-lead { font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.7; color: var(--bf-ink-soft); margin: 0 0 16px; }

/* Kicker / Eyebrow – bewusst sparsam und in zwei Ausprägungen */
.bf-kicker { display: inline-block; margin: 0 0 12px; }
.bf-kicker--line {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--bf-orange);
	position: relative;
	padding-left: 34px;
}
.bf-kicker--line::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 26px; height: 2px;
	background: var(--bf-orange);
	transform: translateY(-50%);
}
.bf-kicker--script {
	font-family: var(--bf-script);
	font-size: clamp(22px, 3vw, 30px);
	color: var(--bf-orange);
	transform: rotate(-2deg);
}

/* Layout */
.bf-container { max-width: var(--bf-maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.bf-container--narrow { max-width: 880px; }

.bf-section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.bf-section--cream { background: var(--bf-cream); }
[id] { scroll-margin-top: calc(var(--bf-header-h) + 14px); }

.bf-section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(34px, 5vw, 52px); }
.bf-section-head__text { font-size: 17px; line-height: 1.65; color: var(--bf-ink-soft); margin: 6px 0 0; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.bf-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bf-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 14px 26px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
	white-space: nowrap;
}
.bf-btn svg { width: 18px; height: 18px; }
.bf-btn--lg { padding: 16px 32px; font-size: 17px; }

.bf-btn--accent { background: var(--bf-orange); color: #fff; box-shadow: 0 12px 28px rgba(232, 116, 59, 0.42); }
.bf-btn--accent:hover { background: #e2641f; color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(232, 116, 59, 0.5); }

.bf-btn--ghost { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.bf-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: #fff; transform: translateY(-2px); }

.bf-btn--white { background: #fff; color: var(--bf-red); box-shadow: var(--bf-shadow-sm); }
.bf-btn--white:hover { color: var(--bf-red-deep); transform: translateY(-2px); box-shadow: var(--bf-shadow); }

.bf-btn--fwn { background: linear-gradient(135deg, #1f8a44, #3aa85f); color: #fff; box-shadow: 0 12px 30px rgba(42, 158, 91, 0.4); }
.bf-btn--fwn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(42, 158, 91, 0.5); }

/* ==========================================================================
   5. Header / Navigation
   ========================================================================== */

.bf-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(122, 17, 38, 0.86);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	transition: background-color .25s ease, box-shadow .25s ease;
}
.bf-header.is-scrolled { background: rgba(122, 17, 38, 0.96); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2); }

.bf-header__inner {
	max-width: 1220px;
	margin: 0 auto;
	min-height: var(--bf-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 10px clamp(16px, 4vw, 40px);
}
.bf-header__brand { display: inline-flex; align-items: center; flex: none; }
.bf-header__logo, .bf-header .custom-logo { height: 46px; width: auto; display: block; }

.bf-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); }
.bf-nav__inner { display: contents; }
/* Nur im mobilen Fullscreen-Menü sichtbar. */
.bf-nav__sheet, .bf-nav__kicker, .bf-nav__foot { display: none; }
.bf-nav__list { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); list-style: none; margin: 0; padding: 0; }
.bf-nav__link {
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .2px;
	opacity: .92;
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	transition: opacity .2s ease, border-color .2s ease;
}
.bf-nav__link:hover, .bf-nav__link.is-active { color: #fff; opacity: 1; border-color: var(--bf-orange); }
.bf-nav__cta { padding: 10px 20px; font-size: 15px; }

/* Burger */
.bf-burger {
	display: none;
	width: 46px; height: 46px;
	border: 0; background: transparent;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.bf-burger__box { position: relative; width: 24px; height: 16px; display: block; }
.bf-burger__line, .bf-burger__line::before, .bf-burger__line::after {
	content: "";
	position: absolute;
	left: 0;
	width: 24px; height: 2.5px;
	background: #fff;
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.bf-burger__line { top: 50%; transform: translateY(-50%); }
.bf-burger__line::before { top: -7px; }
.bf-burger__line::after { top: 7px; }
/* Beschriftung folgt dem Zustand: „Menü“ bzw. „Menü schließen“. */
.bf-burger__label--close { display: none; }
.bf-burger[aria-expanded="true"] .bf-burger__label--open { display: none; }
.bf-burger[aria-expanded="true"] .bf-burger__label--close { display: inline; }

.bf-burger[aria-expanded="true"] .bf-burger__line { background: transparent; }
.bf-burger[aria-expanded="true"] .bf-burger__line::before { top: 0; transform: rotate(45deg); }
.bf-burger[aria-expanded="true"] .bf-burger__line::after { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.bf-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(64px, 9vh, 104px) 24px clamp(108px, 13vh, 168px);
	text-align: center;
	background:
		radial-gradient(120% 90% at 78% 4%, rgba(232, 116, 59, 0.92) 0%, rgba(200, 32, 63, 0.22) 38%, rgba(200, 32, 63, 0) 62%),
		linear-gradient(157deg, #c0203f 0%, #a81935 44%, #7d1228 100%);
}

/* Wimpelkette */
.bf-bunting {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30'%3E%3Cpath d='M0 4 H48' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='2'/%3E%3Cpath d='M0 4 L24 4 L12 27 Z' fill='%23e8743b'/%3E%3Cpath d='M24 4 L48 4 L36 27 Z' fill='%23ffd9b0'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: top center;
	opacity: .9;
	pointer-events: none;
	z-index: 3;
}

.bf-hero__landmark {
	position: absolute;
	pointer-events: none;
	filter: brightness(0) invert(1);
	z-index: 1;
}
.bf-hero__landmark--left { left: -70px; bottom: -40px; width: min(420px, 42vw); opacity: .42; }
.bf-hero__landmark--right { right: -50px; top: 40px; width: min(360px, 36vw); opacity: .40; }

.bf-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.bf-hero__kicker {
	font-family: var(--bf-script);
	color: var(--bf-orange-soft);
	font-size: clamp(24px, 3.4vw, 34px);
	transform: rotate(-2deg);
	margin-bottom: 4px;
}
.bf-hero__logo {
	width: min(440px, 78vw);
	height: auto;
	margin: clamp(28px, 5vw, 52px) 0 6px;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.26));
	animation: bf-float 7s ease-in-out infinite;
}
/* Festdatum: Original-Pinselstrich-Grafik vom Bauzaunbanner. */
.bf-hero__date {
	position: relative;
	z-index: 3;
	margin: -10px 0 2px;
	line-height: 0;
}
.bf-hero__date-img {
	display: block;
	width: min(560px, 94vw);
	height: auto;
	filter: drop-shadow(0 9px 18px rgba(0, 0, 0, 0.30));
	/* Eigene Compositing-Ebene erzwingen: Sonst schneidet iOS Safari beim
	   ersten Rendern die drop-shadow-Region am Bildrand ab (erscheint erst
	   nach einem Repaint, z. B. Scrollen). translateZ(0) reserviert den
	   Schattenbereich sofort – analog zum animierten Logo darüber. */
	transform: translateZ(0);
	backface-visibility: hidden;
}
.bf-hero__welcome {
	font-family: var(--bf-script);
	color: var(--bf-orange-soft);
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1;
	margin: 18px 0 0;
	transform: rotate(-1.5deg);
}
/* Nur für Screenreader/SEO sichtbar (visuell ausgeblendet). */
.bf-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.bf-hero__text {
	color: rgba(255, 255, 255, 0.86);
	font-size: clamp(15px, 2vw, 18px);
	max-width: 560px;
	line-height: 1.6;
	margin: 18px 0 0;
}
.bf-hero__actions { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Auf dem Handy steht im Hero nur ein Knopf. Zwei passen dort nicht
   nebeneinander, untereinander schöben sie den Rest der Seite nach unten –
   und die Location steht ohnehin eine Sektion weiter unten. */
@media (max-width: 560px) {
	.bf-hero__action--location { display: none; }
}

@keyframes bf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ==========================================================================
   7. Fakten-Strip
   ========================================================================== */

.bf-facts { padding: 0 clamp(18px, 4vw, 32px); }
.bf-facts__grid {
	max-width: 1080px;
	margin: -76px auto 0;
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
}
.bf-fact {
	position: relative;
	background: #fff;
	border-radius: var(--bf-radius);
	padding: 26px 26px 26px 30px;
	box-shadow: var(--bf-shadow);
	display: flex;
	align-items: center;
	gap: 18px;
	overflow: hidden;
}
/* Ticket-Kerbe links */
.bf-fact::before {
	content: "";
	position: absolute;
	left: -9px; top: 50%;
	width: 18px; height: 18px;
	background: var(--bf-cream);
	border-radius: 50%;
	transform: translateY(-50%);
}
.bf-section--cream .bf-fact::before, .bf-facts .bf-fact::before { background: var(--bf-paper); }
.bf-fact__icon {
	flex: none;
	width: 52px; height: 52px;
	border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
}
.bf-fact__icon svg { width: 26px; height: 26px; }
.bf-fact__icon--orange { background: #fbe8df; color: var(--bf-orange); }
.bf-fact__icon--green { background: #e7f0e1; color: var(--bf-green); }
.bf-fact__body { display: flex; flex-direction: column; }
.bf-fact__value { font-family: var(--bf-display); font-size: 24px; letter-spacing: .5px; color: var(--bf-red); line-height: 1.1; }
.bf-fact__label { font-size: 14px; color: var(--bf-muted); font-weight: 600; }

/* ==========================================================================
   7b. Öffnungszeiten / Startzeiten
   ========================================================================== */

.bf-hours__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(18px, 3vw, 28px);
	max-width: 760px;
	margin: 0 auto;
}
.bf-hours__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 34px 28px 30px;
	border-radius: var(--bf-radius-lg);
	background: #fff;
	box-shadow: var(--bf-shadow);
	overflow: hidden;
}
/* Farbiger Balken oben am Kärtchen */
.bf-hours__card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 6px;
}
.bf-hours__card--red::before { background: linear-gradient(90deg, var(--bf-red), var(--bf-red-bright)); }
.bf-hours__card--orange::before { background: linear-gradient(90deg, var(--bf-red-bright), var(--bf-orange)); }
.bf-hours__icon {
	width: 56px; height: 56px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 6px;
}
.bf-hours__card--red .bf-hours__icon { background: #fbe2e7; color: var(--bf-red); }
.bf-hours__card--orange .bf-hours__icon { background: #fbe8df; color: var(--bf-orange); }
.bf-hours__icon svg { width: 28px; height: 28px; }
.bf-hours__day {
	font-family: var(--bf-display);
	font-size: 30px;
	letter-spacing: 1px;
	color: var(--bf-ink);
	line-height: 1;
}
.bf-hours__date { font-size: 15px; font-weight: 600; color: var(--bf-muted); }
.bf-hours__time {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 12px;
	color: var(--bf-red);
}
.bf-hours__card--orange .bf-hours__time { color: var(--bf-orange); }
.bf-hours__from, .bf-hours__uhr { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.bf-hours__time strong { font-family: var(--bf-display); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
/* Startzeit noch nicht bekannt: „to be announced“-Badge. */
.bf-hours__tba {
	display: inline-flex;
	align-items: center;
	align-self: center;
	margin-top: 16px;
	padding: 9px 18px;
	border-radius: 999px;
	font-family: var(--bf-display);
	font-size: 22px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bf-red);
	background: #fbe2e7;
}
.bf-hours__card--orange .bf-hours__tba { color: var(--bf-orange); background: #fbe8df; }
/* Weg zum vollständigen Laufzettel. */
.bf-hours__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: clamp(30px, 4vw, 44px) 0 0;
	text-align: center;
}
.bf-hours__cta-note { font-size: 14.5px; font-weight: 600; color: var(--bf-muted); }

/* ==========================================================================
   8. Countdown
   ========================================================================== */

.bf-countdown {
	position: relative;
	margin-top: 64px;
	padding: clamp(64px, 9vh, 104px) 24px;
	text-align: center;
	background:
		linear-gradient(180deg, rgba(125, 18, 40, 0.86), rgba(125, 18, 40, 0.92)),
		var(--bf-countdown-bg, none);
	background-size: cover;
	background-position: center 30%;
}
.bf-countdown__inner { max-width: 800px; margin: 0 auto; }
.bf-countdown__kicker { margin: 0 0 6px; color: var(--bf-orange-soft); font-weight: 700; letter-spacing: 3px; font-size: 13px; text-transform: uppercase; }
.bf-countdown__title { font-family: var(--bf-display); font-weight: 400; color: #fff; font-size: clamp(30px, 5vw, 52px); letter-spacing: 1px; margin: 0 0 36px; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3); }
.bf-countdown__grid { display: flex; gap: clamp(12px, 2.5vw, 26px); justify-content: center; flex-wrap: wrap; }
.bf-cd-unit {
	flex: 1;
	min-width: 116px;
	max-width: 165px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--bf-radius);
	padding: 26px 10px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.bf-cd-unit__num { display: block; font-family: var(--bf-display); color: #fff; font-size: clamp(46px, 7vw, 70px); line-height: 1; font-variant-numeric: tabular-nums; }
.bf-cd-unit:last-child .bf-cd-unit__num { color: var(--bf-orange-soft); }
.bf-cd-unit__label { display: block; color: rgba(255, 255, 255, 0.82); font-weight: 700; letter-spacing: 2px; font-size: 12px; margin-top: 10px; text-transform: uppercase; }
.bf-countdown__note { margin: 28px 0 0; color: rgba(255, 255, 255, 0.82); font-size: 15px; }

/* ==========================================================================
   9. Bändchen
   ========================================================================== */

.bf-baendchen__inner {
	max-width: var(--bf-maxw);
	margin: 0 auto;
	padding: 0 clamp(18px, 4vw, 32px);
	display: flex;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	flex-wrap: wrap;
}
.bf-baendchen__text { flex: 1; min-width: 300px; }
.bf-checks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.bf-checks li {
	display: inline-flex; align-items: center; gap: 10px;
	background: #fff;
	border: 2px solid var(--bf-line);
	border-radius: 14px;
	padding: 11px 18px;
	font-weight: 700;
	color: var(--bf-ink);
}
.bf-checks svg { width: 20px; height: 20px; color: var(--bf-green); }

.bf-baendchen__visual { flex: 0 0 auto; width: min(380px, 90vw); position: relative; display: flex; justify-content: center; padding: 26px 0; }
.bf-wristband {
	position: relative;
	width: 100%;
	height: 120px;
	background: linear-gradient(90deg, #a81935, #c0203f 50%, #e8743b);
	border-radius: 14px;
	transform: rotate(-5deg);
	box-shadow: 0 22px 50px rgba(168, 25, 53, 0.35);
	display: flex;
	align-items: center;
}
.bf-wristband::after { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(255, 255, 255, 0.35); border-radius: 10px; pointer-events: none; }
.bf-wristband__strip { white-space: nowrap; overflow: hidden; width: 100%; }
.bf-wristband__marquee {
	display: inline-block;
	color: rgba(255, 255, 255, 0.92);
	font-family: var(--bf-display);
	letter-spacing: 3px;
	font-size: 18px;
	opacity: .75;
	animation: bf-marquee 18s linear infinite;
	will-change: transform;
}
.bf-wristband__badge {
	position: absolute;
	right: -18px;
	top: -46px;
	width: 150px; height: 150px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 16px 34px rgba(125, 18, 40, 0.30);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	transform: rotate(8deg);
	border: 5px solid var(--bf-orange);
	z-index: 3;
}
.bf-wristband__price { font-family: var(--bf-display); font-size: 56px; color: var(--bf-red); line-height: 1; }
.bf-wristband__sub { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--bf-orange); text-transform: uppercase; }

@media (max-width: 560px) {
	/* Bändchen tiefer setzen (mehr Luft nach oben) und Preis-Badge vertikal
	   mittig auf das Bändchen legen. Symmetrisches Padding macht die
	   Mitte des Visuals = Mitte des Bändchens, daher top:50% + translateY. */
	.bf-baendchen__visual { width: min(300px, 76vw); margin-top: 24px; padding: 30px 26px 30px 0; }
	.bf-wristband__badge { width: 112px; height: 112px; right: -8px; top: -14px; transform: rotate(8deg); }
	.bf-wristband__price { font-size: 42px; }
	.bf-wristband__sub { font-size: 12px; letter-spacing: 1.5px; }
}

@keyframes bf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   10. Unsere Stadt – Foto-Collage
   ========================================================================== */

/* Die Drehungen ragen seitlich minimal über den Container hinaus – hier
   abgeschnitten, damit auf schmalen Displays kein Querscrollen entsteht. */
.bf-cityscape { overflow-x: hidden; }

.bf-cityscape__head {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(14px, 3vw, 52px);
	align-items: end;
	margin: 0 0 clamp(30px, 4vw, 50px);
}
.bf-cityscape__lead { font-size: 17px; line-height: 1.65; color: var(--bf-ink-soft); margin: 0; }

/* Fotoabzüge, leicht gedreht und gegeneinander versetzt auf ein Brett geheftet. */
.bf-collage {
	display: grid;
	grid-template-columns: 1.12fr 1fr 1fr;
	gap: clamp(16px, 3vw, 36px);
	align-items: start;
	padding-bottom: clamp(10px, 2vw, 26px);
}
.bf-shot { margin: 0; position: relative; }
/* Der mittlere Abzug ist von Natur aus der höchste (9:16) – er startet
   deshalb oben, die beiden flankierenden sind abgetreppt. So enden alle
   drei ungefähr auf einer Höhe, ohne dass der Versatz verloren geht. */
.bf-shot--a { transform: rotate(-2.1deg); margin-top: clamp(12px, 2.6vw, 34px); }
.bf-shot--b { transform: rotate(1.5deg); }
.bf-shot--c { transform: rotate(-1.1deg); margin-top: clamp(20px, 4.4vw, 58px); }

.bf-shot__frame {
	position: relative;
	background: #fff;
	padding: 11px 11px 12px;
	border-radius: 5px;
	box-shadow: var(--bf-shadow);
}
/* Kein object-fit/aspect-ratio: das Bild behält sein eigenes Verhältnis,
   damit kein Motiv angeschnitten wird. Die width/height-Attribute im
   Markup reservieren den Platz vorab. */
.bf-shot__frame img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

.bf-shot__cap {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 4px 0;
	font-family: var(--bf-display);
	font-size: clamp(19px, 2.1vw, 27px);
	letter-spacing: .6px;
	color: var(--bf-ink);
}
.bf-shot__no { color: var(--bf-orange); font-size: .78em; letter-spacing: 1px; }
.bf-shot__name { position: relative; }
.bf-shot__name::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: -5px;
	height: 2px;
	background: var(--bf-red);
	transition: right .35s ease;
}

@media (hover: hover) {
	.bf-shot { transition: transform .4s ease; }
	.bf-shot:hover { transform: rotate(0deg) translateY(-7px); }
	.bf-shot:hover .bf-shot__name::after { right: 0; }
}

@media (max-width: 900px) {
	.bf-cityscape__head { grid-template-columns: 1fr; align-items: start; }
	.bf-collage { grid-template-columns: repeat(3, 1fr); }
	.bf-shot__cap { font-size: clamp(16px, 2.4vw, 20px); gap: 7px; }
}

@media (max-width: 680px) {
	.bf-collage { grid-template-columns: 1fr; gap: 30px; max-width: 420px; margin-inline: auto; }
	.bf-shot--b, .bf-shot--c { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.bf-shot, .bf-shot--a, .bf-shot--b, .bf-shot--c { transform: none; transition: none; }
	.bf-shot:hover { transform: none; }
	.bf-shot__name::after { transition: none; }
}

/* ==========================================================================
   11. Location
   ========================================================================== */

.bf-location__grid { display: flex; gap: clamp(28px, 4vw, 56px); align-items: stretch; flex-wrap: wrap; }
/* Bewusst niedriger als die Textspalte: die fehlende Höhe geht unten ab. Oben
   liegt die Bildkante auf der Oberkante der Überschrift „Mitten in Ingolstadt“ –
   deshalb beginnen beide Spalten am Reihenanfang. Der Bildausschnitt bleibt am
   unteren Bildrand verankert (object-position), das ist die Altstadtgasse. */
.bf-location__photo {
	flex: 1;
	min-width: 300px;
	margin: 0;
	align-self: flex-start;
	height: clamp(320px, 42vw, 556px);
	border-radius: var(--bf-radius-lg);
	overflow: hidden;
	box-shadow: var(--bf-shadow);
}
.bf-location__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.bf-location__text { flex: 1; min-width: 300px; display: flex; flex-direction: column; justify-content: flex-start; }

.bf-placeholder {
	border: 2px dashed #d9c2b8;
	border-radius: var(--bf-radius);
	background: #fff;
	padding: 30px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.bf-placeholder__badge {
	width: 54px; height: 54px;
	border-radius: 12px;
	background: var(--bf-red);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-family: var(--bf-display); font-size: 18px; letter-spacing: 1px;
}
.bf-placeholder strong { font-size: 17px; color: var(--bf-ink); }
.bf-placeholder__hint { font-size: 14px; color: var(--bf-muted); line-height: 1.5; }
/* Lageplan-PDF noch nicht bekannt: „to be announced“-Badge. */
.bf-placeholder__tba {
	display: inline-flex;
	align-items: center;
	margin-top: 4px;
	padding: 8px 18px;
	border-radius: 999px;
	font-family: var(--bf-display);
	font-size: 20px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--bf-red);
	background: #fbe2e7;
}

/* Liegt der Lageplan vor, wird derselbe Kasten zum Link: durchgezogener Rahmen
   statt gestricheltem – gestrichelt heißt auf dieser Seite „steht noch aus". */
.bf-placeholder--link {
	border-style: solid;
	border-color: #e7c9bf;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.bf-placeholder--link:hover,
.bf-placeholder--link:focus-visible {
	border-color: var(--bf-orange);
	box-shadow: var(--bf-shadow-sm);
}
.bf-placeholder__icon { width: 34px; height: 34px; color: var(--bf-red); }
/* Aus dem „to be announced"-Schild wird die Handlungsaufforderung: gleiche
   Form, gefüllt statt getönt. */
.bf-placeholder__tba--open { color: #fff; background: var(--bf-red); }
.bf-placeholder--link:hover .bf-placeholder__tba--open,
.bf-placeholder--link:focus-visible .bf-placeholder__tba--open { background: var(--bf-orange); }

/* Schematische Altstadt-Karte unter dem Lageplan-Platzhalter. */
.bf-citymap { margin: 22px 0 0; }
.bf-citymap__svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bf-radius);
	box-shadow: var(--bf-shadow-sm);
}
/* Schriftgrößen bezogen auf die viewBox (600 breit) – die Karte steht in einer
   schmalen Spalte, deshalb bewusst groß. */
.bf-citymap__label {
	font-family: var(--bf-display);
	font-size: 20px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	fill: var(--bf-ink);
}
.bf-citymap__label--red { fill: var(--bf-red); font-size: 23px; }
.bf-citymap__label--light { fill: #fffaf6; }
.bf-citymap__label--sm { font-size: 15px; fill: var(--bf-muted); }
.bf-citymap__script {
	font-family: var(--bf-script);
	font-size: 24px;
	fill: var(--bf-muted);
	opacity: .7;
}
.bf-citymap__caption {
	margin: 10px 2px 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--bf-muted);
}

/* ==========================================================================
   12. Informationen für Anwohner
   ========================================================================== */

/* Ein Aushang, kein Festbeitrag: weißes Blatt auf dem Papierton, ruhige
   Farben, Linien statt Kacheln. Bewusst knapp – die Einzelheiten stehen im
   verlinkten Flyer, nicht hier. */
.bf-anwohner__sheet {
	margin-top: clamp(24px, 3.4vw, 36px);
	padding: clamp(22px, 3vw, 32px);
	background: #fff;
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius-lg);
	box-shadow: var(--bf-shadow-sm);
}

/* Zwei Spalten im selben auto-fit-Raster wie die Bühnen auf der
   Programmseite – ohne eigenen Umbruchpunkt. */
.bf-anwohner__main {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.bf-anwohner__head {
	margin: 0 0 8px;
	font-family: var(--bf-display);
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 1.2px;
	line-height: 1.1;
	color: var(--bf-red-deep);
}

/* Sperrzeiten – dieselbe Zeilenrhythmik wie der Laufzettel einer Bühne. */
.bf-anwohner__times { list-style: none; margin: 0 0 12px; padding: 0; }
.bf-anwohner__time {
	padding: 9px 0;
	border-top: 1px solid color-mix(in srgb, var(--bf-red) 16%, transparent);
}
.bf-anwohner__time:first-child { border-top: 0; padding-top: 2px; }
.bf-anwohner__day {
	font-family: var(--bf-display);
	font-size: 21px;
	letter-spacing: .6px;
	color: var(--bf-ink);
}
.bf-anwohner__span {
	display: block;
	margin-top: 1px;
	font-size: 15.5px;
	font-variant-numeric: tabular-nums;
	color: var(--bf-ink-soft);
}
.bf-anwohner__span strong { font-weight: 700; color: var(--bf-red); }
.bf-anwohner__bis { margin: 0 5px; color: var(--bf-muted); }

.bf-anwohner__note { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bf-muted); }

.bf-anwohner__docs { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.bf-anwohner__hint { margin: 0 0 2px; font-size: 16px; line-height: 1.6; color: var(--bf-ink-soft); }
/* .bf-btn steht auf white-space:nowrap und ist auf eine Zeile gerechnet.
   Auf schmalen Geräten darf die Beschriftung stattdessen umbrechen – sonst
   schöbe sie den Knopf über das Blatt hinaus. Nur mit min-width:0 am span
   darf der unter seine natürliche Breite. */
.bf-anwohner__docs .bf-btn { max-width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
.bf-anwohner__docs .bf-btn > span { min-width: 0; }
.bf-anwohner__docs .bf-btn svg { flex: none; }
/* Der weiße Knopf steht auf weißem Blatt – er braucht eine sichtbare Kante. */
.bf-anwohner__docs .bf-btn--white { border-color: var(--bf-line); }

.bf-anwohner__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3px 14px;
	margin: clamp(18px, 2.6vw, 26px) 0 0;
	padding-top: clamp(14px, 2vw, 20px);
	border-top: 1px solid var(--bf-line);
	font-size: 15.5px;
}
.bf-anwohner__ask { color: var(--bf-muted); }
.bf-anwohner__contact strong { color: var(--bf-ink); }
.bf-anwohner__contact a { font-weight: 700; color: var(--bf-red); overflow-wrap: anywhere; }
.bf-anwohner__contact a:hover { color: var(--bf-red-deep); text-decoration: underline; }

/* Auf dem Telefon laufen die beiden Knöpfe über die volle Breite: als Balken
   gelesen wirkt eine zweizeilige Beschriftung gewollt, als schmaler Knopf
   wirkt sie wie ein Unfall. */
@media (max-width: 560px) {
	.bf-anwohner__docs { align-items: stretch; }
	.bf-anwohner__docs .bf-btn { justify-content: center; padding-left: 18px; padding-right: 18px; }
}

/* ==========================================================================
   13. Über uns
   ========================================================================== */

.bf-about__grid { display: flex; gap: clamp(24px, 4vw, 48px); justify-content: center; flex-wrap: wrap; }
.bf-person {
	flex: 1;
	min-width: 260px;
	max-width: 380px;
	background: var(--bf-cream);
	border-radius: var(--bf-radius-lg);
	padding: 34px 28px;
	text-align: center;
	box-shadow: var(--bf-shadow-sm);
}
.bf-section--cream .bf-person { background: #fff; }
.bf-person__photo, .bf-person__avatar {
	width: 128px; height: 128px;
	border-radius: 50%;
	margin: 0 auto 18px;
	border: 4px solid #fff;
	box-shadow: 0 10px 24px rgba(168, 25, 53, 0.22);
	object-fit: cover;
}
.bf-person__avatar {
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-family: var(--bf-display);
	font-size: 44px;
	letter-spacing: 2px;
}
.bf-person__avatar--red { background: linear-gradient(140deg, var(--bf-red-bright), var(--bf-orange)); }
.bf-person__avatar--blue { background: linear-gradient(140deg, #1c2c54, #3a5aa0); }
.bf-person__name { margin: 0 0 4px; font-size: 22px; color: var(--bf-ink); font-weight: 700; }
.bf-person__role { margin: 0 0 16px; color: var(--bf-orange); font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.bf-person__mail {
	display: inline-flex; align-items: center;
	color: var(--bf-red);
	font-weight: 700;
	font-size: 15px;
	border: 1.5px solid #e7c9bf;
	padding: 9px 18px;
	border-radius: 999px;
	transition: background-color .2s ease, border-color .2s ease;
}
.bf-person__mail:hover { background: #fff; border-color: var(--bf-orange); }

/* ==========================================================================
   14. Partner
   ========================================================================== */

/* Endlos-Laufband: zwei Reihen, die gegensätzlich zueinander laufen. */
.bf-partner__marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bf-partner__marquee + .bf-partner__marquee { margin-top: 22px; }
.bf-partner__rail {
	display: flex;
	width: max-content;
	animation: bf-logo-rail 48s linear infinite;
	will-change: transform;
}
/* Zweite Reihe läuft in die Gegenrichtung. */
.bf-partner__marquee--rev .bf-partner__rail { animation-direction: reverse; }
.bf-partner__marquee:hover .bf-partner__rail { animation-play-state: paused; }
.bf-partner__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
}
.bf-partner__item { flex: 0 0 auto; padding: 6px 11px; }
.bf-partner__card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 246px;
	height: 150px;
	background: #fff;
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius);
	padding: 26px 30px;
	box-shadow: var(--bf-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
a.bf-partner__card:hover { transform: translateY(-4px); box-shadow: var(--bf-shadow); }
.bf-partner__logo {
	max-width: 100%;
	max-height: 84px;
	width: auto; height: auto;
	object-fit: contain;
}

/* Rail = trackA + identische trackB; -50% → 0 lässt die Logos nach rechts wandern. */
@keyframes bf-logo-rail {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* ==========================================================================
   15. Social
   ========================================================================== */

.bf-social {
	position: relative;
	overflow: hidden;
	background: linear-gradient(120deg, var(--bf-red), var(--bf-red-deep));
	padding: clamp(56px, 8vh, 88px) 24px;
	text-align: center;
}
.bf-social__inner { max-width: 720px; margin: 0 auto; }
.bf-social__title { font-family: var(--bf-display); font-weight: 400; color: #fff; font-size: clamp(30px, 5vw, 48px); letter-spacing: 1px; margin: 0 0 10px; }
.bf-social__text { color: rgba(255, 255, 255, 0.85); font-size: 17px; margin: 0 0 32px; }
.bf-social__links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.bf-social__btn {
	display: inline-flex; align-items: center; gap: 12px;
	background: #fff; color: var(--bf-red);
	font-weight: 700; font-size: 16px;
	padding: 14px 26px;
	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
	transition: transform .2s ease, color .2s ease;
}
.bf-social__btn svg { width: 22px; height: 22px; }
.bf-social__btn:hover { transform: translateY(-2px); color: var(--bf-red-deep); }
.bf-social__contact { margin: 30px 0 0; color: rgba(255, 255, 255, 0.85); font-size: 16px; }
.bf-social__contact a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bf-social__contact a:hover { color: var(--bf-orange-soft); }

/* ==========================================================================
   16. fwn.media
   ========================================================================== */

.bf-fwn {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(110% 130% at 85% 10%, rgba(58, 168, 95, 0.32), rgba(58, 168, 95, 0) 55%),
		linear-gradient(140deg, #0c140f 0%, #10241a 100%);
	padding: clamp(60px, 9vh, 92px) 24px;
}
.bf-fwn__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.bf-fwn__kicker { margin: 0 0 18px; color: #5fd089; font-weight: 700; letter-spacing: 3px; font-size: 13px; text-transform: uppercase; }
.bf-fwn__logo-wrap { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: var(--bf-radius); padding: 26px 48px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); margin-bottom: 24px; }
.bf-fwn__logo { height: 58px; width: auto; max-width: 72vw; object-fit: contain; }
.bf-fwn__title { font-family: var(--bf-display); font-weight: 400; color: #fff; font-size: clamp(28px, 4.4vw, 44px); letter-spacing: 1px; line-height: 1.06; margin: 0 0 14px; }
.bf-fwn__text { margin: 0 auto 28px; max-width: 540px; color: rgba(255, 255, 255, 0.74); font-size: 17px; line-height: 1.6; }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.bf-footer {
	background: linear-gradient(125deg, #7d1228 0%, #5e0f20 55%, #2a1a3e 100%);
	color: #fff;
	padding: clamp(48px, 7vh, 76px) clamp(18px, 4vw, 32px) 28px;
}
.bf-footer__inner { max-width: 1080px; margin: 0 auto; display: flex; gap: 40px; justify-content: space-between; flex-wrap: wrap; }
.bf-footer__brand { max-width: 360px; }
.bf-footer__logo { height: 54px; width: auto; margin-bottom: 14px; }
.bf-footer__tagline { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, 0.8); line-height: 1.6; }
.bf-footer__contact { margin: 12px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.8); }
.bf-footer__contact a { color: var(--bf-orange); font-weight: 700; }
.bf-footer__contact a:hover { color: #fff; text-decoration: underline; }
.bf-footer__head { margin: 0 0 14px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--bf-orange); font-weight: 700; }
.bf-footer__col { display: flex; flex-direction: column; gap: 9px; }
.bf-footer__col a { color: rgba(255, 255, 255, 0.85); font-size: 15px; }
.bf-footer__col a:hover { color: #fff; text-decoration: underline; }
.bf-footer__social { display: flex; gap: 12px; margin-top: 16px; }
.bf-footer__social-link {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	transition: background-color .2s ease;
}
.bf-footer__social-link:hover { background: rgba(255, 255, 255, 0.24); }
.bf-footer__social-link svg { width: 18px; height: 18px; }
.bf-footer__bar {
	max-width: 1080px;
	margin: 36px auto 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
}
.bf-footer__credit { color: rgba(255, 255, 255, 0.6); }
.bf-footer__credit strong { color: rgba(255, 255, 255, 0.92); }

/* ==========================================================================
   18. Prosa / Rechtsseiten
   ========================================================================== */

.bf-prose { padding-top: 24px; }
.bf-prose__body, .bf-legal { font-size: 16.5px; line-height: 1.7; color: var(--bf-ink-soft); }
.bf-legal h1, .bf-prose__body h1 { font-family: var(--bf-display); font-weight: 400; letter-spacing: 1px; color: var(--bf-red); font-size: clamp(32px, 5vw, 50px); margin: 0 0 22px; }
.bf-legal h2 { font-family: var(--bf-display); font-weight: 400; letter-spacing: .5px; color: var(--bf-red-deep); font-size: 26px; margin: 34px 0 10px; }
.bf-legal h3 { font-size: 19px; color: var(--bf-ink); margin: 22px 0 6px; }
.bf-legal h4 { font-size: 16px; color: var(--bf-ink); margin: 16px 0 4px; }
.bf-legal a { color: var(--bf-red); text-decoration: underline; word-break: break-word; }
.bf-prose__back { margin-top: 36px; }
.bf-prose__back a { font-weight: 700; }

/* ==========================================================================
   17b. Programmseite – der Laufzettel
   ========================================================================== */

/* Kopf: dieselbe Plakatfläche wie der Hero, flacher und linksbündig gesetzt.
   Das Diagonalraster ist dasselbe wie im Fullscreen-Menü. */
.bf-prog__head {
	position: relative;
	overflow: hidden;
	padding: clamp(54px, 8vh, 88px) 0 clamp(38px, 6vh, 60px);
	color: #fff;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 9px),
		radial-gradient(118% 96% at 84% 2%, rgba(232, 116, 59, 0.30), transparent 62%),
		linear-gradient(157deg, #c0203f 0%, #a81935 46%, #7d1228 100%);
}
.bf-prog__head-inner { position: relative; z-index: 2; }
.bf-prog__kicker {
	display: inline-block;
	font-family: var(--bf-script);
	font-size: clamp(22px, 3vw, 30px);
	color: var(--bf-orange-soft);
	transform: rotate(-2deg);
	margin: 0 0 6px;
}
.bf-prog__title {
	font-family: var(--bf-display);
	font-weight: 400;
	letter-spacing: 1.5px;
	/* Untergrenze 34px: „Wochenendprogramm" ist ein Wort und muss auf 320 px
	   in eine Zeile passen, sonst schneidet es der Rand ab. */
	font-size: clamp(34px, 9.5vw, 76px);
	line-height: .96;
	color: #fff;
	margin: 0 0 14px;
	/* Optischer Randausgleich: Das „D" hat eine Vorbreite, ohne den Zug stünde
	   die Zeile minimal weiter rechts als der Absatz darunter. */
	margin-inline-start: -.04em;
}
.bf-prog__lead {
	max-width: 58ch;
	margin: 0;
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.86);
}

/* Tageswahl – zwei Abrisse, die zum jeweiligen Tag springen. */
.bf-prog__jump { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(26px, 4vw, 36px); }
.bf-prog__jump-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 186px;
	padding: 14px 24px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	transition: background-color .2s ease, transform .2s ease;
}
.bf-prog__jump-link:hover { background: rgba(255, 255, 255, 0.2); color: #fff; transform: translateY(-2px); }
.bf-prog__jump-day { font-family: var(--bf-display); font-size: 30px; line-height: 1; letter-spacing: 1px; }
.bf-prog__jump-date { font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.bf-prog__jump-start {
	margin-top: 7px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bf-orange-soft);
	font-variant-numeric: tabular-nums;
}

/* Läuft nur während des Fests, siehe assets/js/programm.js. */
.bf-prog__live {
	display: inline-flex;
	align-items: center;
	margin: 22px 0 0;
	padding: 11px 20px;
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.32);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}
.bf-prog__live[hidden] { display: none; }

.bf-prog__body { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); }
.bf-prog__day { margin: 0 0 clamp(52px, 8vw, 88px); }
.bf-prog__day:last-of-type { margin-bottom: 0; }

/* Tageskopf: ein Strich in der Tagesfarbe, darüber Name, Datum und Beginn. */
.bf-prog__day-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 22px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	margin-bottom: clamp(26px, 4vw, 40px);
	border-bottom: 3px solid var(--bf-red);
}
.bf-prog__day--orange .bf-prog__day-head { border-bottom-color: var(--bf-orange); }
.bf-prog__day-name {
	display: flex;
	align-items: baseline;
	gap: 8px 16px;
	flex-wrap: wrap;
	margin: 0 0 0 -.04em;
	font-family: var(--bf-display);
	font-weight: 400;
	letter-spacing: 1.5px;
	line-height: .95;
	font-size: clamp(38px, 6.4vw, 64px);
	color: var(--bf-red);
}
.bf-prog__day--orange .bf-prog__day-name { color: var(--bf-orange); }
.bf-prog__day-date {
	font-family: var(--bf-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--bf-muted);
}
.bf-prog__day-start { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; }
.bf-prog__day-from,
.bf-prog__day-uhr { font-size: 13.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--bf-muted); }
.bf-prog__day-start strong {
	font-family: var(--bf-display);
	font-weight: 400;
	font-size: 38px;
	line-height: 1;
	letter-spacing: 1px;
	font-variant-numeric: tabular-nums;
	color: var(--bf-red);
}
.bf-prog__day--orange .bf-prog__day-start strong { color: var(--bf-orange); }

/* Alle Bühnen sind gleich wichtig – keine bekommt eine eigene Behandlung.
   Bewusst ein Raster und kein Spaltenfluss: Im Raster beginnt jede Bühne
   einer Zeile auf derselben Höhe. Der Spaltenfluss versetzt sie gegeneinander
   und liest sich dadurch wie eine Reihenfolge, die es hier nicht gibt. */
.bf-prog__stages {
	display: grid;
	/* min() ist nötig: minmax(290px, …) allein kann auf einem 320-px-Display
	   nicht unter 290 px schrumpfen und schöbe die Spalte über den Rand. */
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
	gap: clamp(30px, 4vw, 46px) clamp(28px, 4vw, 54px);
	align-items: start;
}
.bf-stage {
	break-inside: avoid;
	page-break-inside: avoid;
	margin: 0;
	padding-top: 11px;
	border-top: 3px solid var(--bf-red);
}
.bf-prog__day--orange .bf-stage { border-top-color: var(--bf-orange); }

.bf-stage__head { margin-bottom: 12px; }
.bf-stage__name {
	margin: 0;
	font-family: var(--bf-display);
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1.05;
	font-size: 26px;
	color: var(--bf-red-deep);
}
/* Steht auch leer da: hält die Köpfe einer Rasterzeile auf gleicher Höhe.
   Die 28 px sind die Höhe des Merkers – sonst stünde eine Bühne mit Merker
   4 px tiefer als ihre Nachbarin ohne. */
.bf-stage__meta {
	display: flex;
	align-items: center;
	gap: 6px 12px;
	flex-wrap: wrap;
	min-height: 28px;
	margin: 5px 0 0;
}
.bf-stage__place { font-size: 15px; color: var(--bf-muted); }
.bf-stage__flag {
	margin-left: auto;
	padding: 3px 11px 4px;
	border-radius: 999px;
	border: 1px solid var(--bf-line);
	border-color: color-mix(in srgb, var(--bf-orange) 45%, transparent);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #a8551f;
	white-space: nowrap;
}

.bf-stage__list { list-style: none; margin: 0; padding: 0; }
/* Steht nur bei der Bühne, deren Auftritte noch nicht vorliegen. Bewusst
   zurückhaltend: Sie ist eine Ankündigung, kein Laufzettel. */
.bf-stage__empty {
	margin: 0;
	padding: 14px 0 2px;
	border-top: 1px solid var(--bf-line);
	color: var(--bf-muted);
	font-size: 15px;
	line-height: 1.55;
}
.bf-stage__act {
	display: grid;
	/* Zwei Spalten: Zeit, dann Auftritt. Der Jetzt-Merker bekommt eine
	   eigene Zeile darunter – als dritte Spalte quetschte er in den
	   schmalen Spalten lange Namen auf drei Zeilen. */
	grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
	align-items: baseline;
	gap: 3px 18px;
	padding: 12px 0;
	border-top: 1px solid var(--bf-line);
	border-top-color: color-mix(in srgb, var(--bf-red) 16%, transparent);
}
.bf-stage__time {
	font-size: 15.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--bf-red);
}
.bf-prog__day--orange .bf-stage__time { color: var(--bf-orange); }
.bf-stage__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bf-stage__act-name {
	font-family: var(--bf-display);
	font-size: 22px;
	letter-spacing: .6px;
	line-height: 1.1;
	color: var(--bf-ink);
}
.bf-stage__genre { font-size: 14px; font-weight: 600; color: var(--bf-muted); }
.bf-stage__note { font-size: 14px; color: var(--bf-ink-soft); }

/* Jetzt-Markierung. Der Punkt schlägt, weil die Angabe für genau jetzt gilt
   und nicht für irgendwann. Ohne JavaScript bleibt sie unsichtbar. */
.bf-stage__now {
	display: none;
	align-items: center;
	align-self: start;
	justify-self: start;
	grid-column: 2;
	margin-top: 7px;
	gap: 7px;
	padding: 5px 13px 5px 11px;
	border-radius: 999px;
	background: #fbe2e7;
	color: var(--bf-red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	white-space: nowrap;
}
.bf-prog__day--orange .bf-stage__now { background: #fbe8df; color: #a8551f; }
.bf-stage__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: bf-pulse 2.4s ease-in-out infinite; }
.bf-stage__act.is-now .bf-stage__now { display: inline-flex; }
.bf-stage__act.is-now {
	margin-inline: -14px;
	padding-inline: 14px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--bf-orange) 14%, transparent), transparent 72%);
	box-shadow: inset 3px 0 0 var(--bf-orange);
}
/* Gelaufenes tritt zurück, bleibt aber lesbar (kein opacity-Trick). */
.bf-stage__act.is-past .bf-stage__act-name,
.bf-stage__act.is-past .bf-stage__time { color: var(--bf-muted); }

@keyframes bf-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .5; } }

.bf-prog__foot {
	margin-top: clamp(40px, 6vw, 64px);
	padding-top: 22px;
	border-top: 1px solid var(--bf-line);
}
.bf-prog__note { margin: 0; font-size: 15px; color: var(--bf-muted); }
.bf-prog__foot .bf-prose__back { margin-top: 18px; }

@media (max-width: 560px) {
	/* Die Zeitspalte bleibt auch schmal erhalten: Sie ist der Anker, an dem
	   das Auge den Laufzettel abwärts liest. */
	.bf-stage__act { grid-template-columns: minmax(78px, auto) minmax(0, 1fr); gap: 2px 14px; }
	.bf-prog__jump-link { flex: 1 1 100%; min-width: 0; }
}

/* Der Laufzettel wird ausgedruckt und ausgehängt. */
@media print {
	.bf-header,
	.bf-footer,
	.bf-skip-link,
	.bf-bunting,
	.bf-prog__jump,
	.bf-prog__live,
	.bf-prose__back { display: none !important; }

	body { background: #fff; font-size: 11pt; }
	.bf-prog__head { padding: 0 0 16px; color: var(--bf-ink); background: none; }
	.bf-prog__title, .bf-prog__kicker { color: var(--bf-ink); }
	.bf-prog__lead { color: var(--bf-ink-soft); }
	.bf-prog__body { padding: 0; }
	.bf-stage { break-inside: avoid; page-break-inside: avoid; }
	.bf-prog__day { break-before: page; page-break-before: always; }
	.bf-prog__day:first-of-type { break-before: auto; page-break-before: auto; }
}

/* ==========================================================================
   19. Reveal-Animationen
   ========================================================================== */

.bf-js .bf-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.bf-js .bf-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.bf-js .bf-reveal { opacity: 1 !important; transform: none !important; transition: none; }
	.bf-hero__logo, .bf-wristband__marquee, .bf-partner__rail, .bf-stage__dot { animation: none; }
	* { scroll-behavior: auto !important; }
}

/* ==========================================================================
   20. Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.bf-burger { display: inline-flex; }

	/* Wichtig: backdrop-filter macht den Header zum Bezugsrahmen für
	   position:fixed-Kinder – das Menü käme sonst nie über die Headerhöhe
	   hinaus. Mobil ist der Header ohnehin fast deckend, der Blur entfällt. */
	.bf-header {
		background: rgba(122, 17, 38, 0.94);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.bf-header.is-scrolled { background: rgba(122, 17, 38, 0.985); }

	/* Logo und Burger bleiben über der Plakatfläche bedienbar. */
	.bf-header__brand, .bf-burger { position: relative; z-index: 95; }

	/* ---- Fullscreen-Menü ------------------------------------------------
	   Liegt als eigene Ebene unter dem Header (z-index 90 < 100), damit Logo
	   und Burger sichtbar bleiben. Der Header wird währenddessen transparent
	   und geht optisch in der Plakatfläche auf. */
	.bf-nav {
		position: fixed;
		inset: 0;
		z-index: 90;
		display: block;
		gap: 0;
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		pointer-events: none;
		transition: visibility 0s linear .28s;
	}
	.bf-nav.is-open {
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	/* Plakatfläche: warmes Rot mit Abendlicht oben rechts und feinem
	   Diagonalraster – die Drucktextur, die das ganze Theme trägt. */
	.bf-nav__sheet {
		display: block;
		position: fixed;
		inset: 0;
		background:
			repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 9px),
			radial-gradient(118% 88% at 84% 6%, rgba(232, 116, 59, 0.26), transparent 62%),
			linear-gradient(178deg, #8f1530 0%, #7d1228 54%, #690f21 100%);
		transform: translateY(-101%);
		transition: transform .28s cubic-bezier(.45, 0, .55, 1);
		will-change: transform;
	}
	.bf-nav.is-open .bf-nav__sheet {
		transform: translateY(0);
		transition: transform .46s cubic-bezier(.16, .84, .3, 1);
	}

	.bf-nav__inner {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		min-height: 100dvh;
		padding:
			calc(var(--bf-header-h) + env(safe-area-inset-top) + 22px)
			clamp(24px, 7vw, 46px)
			calc(26px + env(safe-area-inset-bottom));
	}

	/* Gemeinsames Einlaufen: Kicker, Menüpunkte, Fußzeile.
	   --bf-i wird in main.js gesetzt und staffelt die Punkte um je 55 ms. */
	.bf-nav__kicker,
	.bf-nav__list > li,
	.bf-nav__foot {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity .16s ease-in, transform .16s ease-in;
	}
	.bf-nav.is-open .bf-nav__kicker,
	.bf-nav.is-open .bf-nav__list > li,
	.bf-nav.is-open .bf-nav__foot {
		opacity: 1;
		transform: none;
		transition:
			opacity .45s ease-out calc(140ms + var(--bf-i, 0) * 55ms),
			transform .55s cubic-bezier(.16, .84, .3, 1) calc(140ms + var(--bf-i, 0) * 55ms);
	}

	.bf-nav__kicker {
		display: block;
		align-self: flex-start;
		font-family: var(--bf-script);
		font-size: clamp(23px, 6.4vw, 31px);
		line-height: 1.1;
		color: var(--bf-orange-soft);
		transform-origin: left center;
		margin: 0 0 clamp(16px, 4vh, 32px) 2px;
	}
	.bf-nav.is-open .bf-nav__kicker { transform: rotate(-2.5deg); }

	.bf-nav__list {
		flex: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		margin: auto 0;
		counter-reset: bf-nav;
	}
	.bf-nav__list > li {
		counter-increment: bf-nav;
		position: relative;
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}
	.bf-nav__list > li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.15); }

	/* Orangener Merker am linken Rand für den Abschnitt, in dem man gerade ist. */
	.bf-nav__list > li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 3px;
		height: 0;
		background: var(--bf-orange);
		transform: translateY(-50%);
		transition: height .3s cubic-bezier(.16, .84, .3, 1);
	}
	.bf-nav__list > li.is-active::before { height: 54%; }

	.bf-nav__link {
		display: flex;
		align-items: baseline;
		gap: 14px;
		padding: 17px 2px 17px 16px;
		font-family: var(--bf-display);
		font-size: clamp(32px, 10vw, 52px);
		font-weight: 400;
		line-height: 1;
		letter-spacing: 1.5px;
		color: #fff;
		opacity: 1;
		border-bottom: 0;
		transition: transform .18s ease, padding-left .18s ease;
	}
	/* Ziffern 01–0n aus dem Zähler – kein Extra-Markup nötig. */
	.bf-nav__link::before {
		content: counter(bf-nav, decimal-leading-zero);
		flex: none;
		font-family: var(--bf-body);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 2px;
		color: var(--bf-orange-soft);
		opacity: .8;
	}
	.bf-nav__link.is-active { color: #fff; }
	.bf-nav__link.is-active::before { opacity: 1; }
	.bf-nav__link:active { transform: translateX(5px); }

	.bf-nav__foot {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin-top: clamp(24px, 5vh, 40px);
		padding-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}
	.bf-nav__date {
		margin: 0;
		font-size: 12.5px;
		font-weight: 700;
		letter-spacing: 2.2px;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.86);
	}
	.bf-nav__social { display: flex; gap: 12px; }
	.bf-nav__social-link {
		width: 46px;
		height: 46px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		color: #fff;
		transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
	}
	.bf-nav__social-link svg { width: 20px; height: 20px; }
	.bf-nav__social-link:active {
		background: var(--bf-orange);
		border-color: var(--bf-orange);
		transform: scale(.94);
	}

	.bf-nav__cta { margin-top: 18px; justify-content: center; }

	/* Header verschmilzt mit der Plakatfläche, solange das Menü offen ist. */
	.bf-header.is-nav-open,
	.bf-header.is-nav-open.is-scrolled {
		background: transparent;
		box-shadow: none;
		border-bottom-color: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Bei offenem Menü wird der Burger zum eindeutigen Schließen-Knopf:
	   Der Ring greift die Social-Kreise im Menüfuß auf, damit das X nicht
	   frei auf der gemusterten Plakatfläche schwebt. */
	.bf-header.is-nav-open .bf-burger {
		border: 1px solid rgba(255, 255, 255, 0.34);
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.18);
		transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
	}
	.bf-header.is-nav-open .bf-burger:active {
		background: var(--bf-orange);
		border-color: var(--bf-orange);
		transform: scale(.94);
	}
}

/* Seite darf nicht mitscrollen, während das Fullscreen-Menü offen ist.
   Bewusst NUR auf <html>: Ein zusätzliches overflow:hidden auf <body> würde
   den Body zum Scroll-Container machen. Der sticky Header bezöge sich dann
   auf den Body statt auf den Viewport und würde bei gescrollter Seite nach
   oben aus dem Bild rutschen – samt Schließen-Knopf. */
.bf-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.bf-nav,
	.bf-nav.is-open,
	.bf-nav__sheet,
	.bf-nav.is-open .bf-nav__sheet,
	.bf-nav__kicker,
	.bf-nav__list > li,
	.bf-nav__list > li::before,
	.bf-nav__link,
	.bf-nav__foot,
	.bf-nav.is-open .bf-nav__kicker,
	.bf-nav.is-open .bf-nav__list > li,
	.bf-nav.is-open .bf-nav__foot {
		transition: none !important;
	}
}

@media (max-width: 720px) {
	body { font-size: 16px; }
	.bf-facts__grid { margin-top: -54px; }
	.bf-baendchen__inner { flex-direction: column; }
	.bf-baendchen__visual { margin: 8px auto 0; }
	.bf-location__grid { flex-direction: column; }
	.bf-footer__inner { gap: 28px; }
	.bf-footer__bar { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
	.bf-hero { padding-left: 18px; padding-right: 18px; }
	.bf-cd-unit { min-width: calc(50% - 8px); }
}