/* =====================================================================
   LIVE & LOUD – Theme-Styles
   1. Design-Tokens
   2. Grundlagen
   3. Header / Navigation
   4. Hero (Slider Revolution + News-Slider)
   5. Layout & Module
   6. Karten
   7. Einzelansichten
   8. Festivals
   9. Widgets / Sidebar / Footer
  10. Formulare, Buttons, Pagination
  11. WPBakery-Kompatibilitaet
  12. Responsive
   ===================================================================== */

/* 1. Design-Tokens ---------------------------------------------------- */
/*
 * Alle Werte kommen aus dem Customizer (Design > Customizer > LIVE & LOUD Theme)
 * und werden von inc/options.php als CSS-Variablen ausgegeben. Die Angaben hier
 * sind nur die Fallbacks, falls eine Einstellung fehlt.
 */
:root, body {
	/* Farben laut CI-Manual, Seite 7 ("GESTALTUNG · FARBEN"):
	   Signalrot #FD001E, Tiefschwarz #14161A, Header-Schwarz #101114,
	   Grau #5F6672, Hellgrau #F6F7F9, Weiss #FFFFFF. */
	--c-accent: var(--ll-accent, #fd001e);
	--c-accent-ink: var(--ll-accent-ink, #ffffff);
	--c-ink: var(--ll-ink, #14161a);
	--c-muted: var(--ll-muted, #5f6672);
	--c-canvas: var(--ll-canvas, #ffffff);
	--c-surface: var(--ll-surface, #f6f7f9);
	--c-line: var(--ll-line, #e4e7ec);
	--c-header: var(--ll-header-bg, #101114);
	--c-header-ink: var(--ll-header-ink, #ffffff);
	--c-header-muted: var(--ll-header-muted, rgba(255, 255, 255, .62));
	--c-header-line: var(--ll-header-line, rgba(255, 255, 255, .12));
	--c-topbar: var(--ll-topbar-bg, #14161a);
	--c-footer: var(--ll-footer-bg, #f6f7f9);

	/* Zweitnamen fuer dieselben Farben. Aeltere Regeln im unteren Teil der
	   Datei sprechen die Tokens so an; ohne die Zeilen hier faellt dort die
	   Farbe komplett aus – aus weisser Schrift auf Rot wurde geerbtes
	   Dunkelgrau. */
	--c-text: var(--c-ink);
	--c-text-muted: var(--c-muted);
	--c-on-accent: var(--c-accent-ink);

	--radius: var(--ll-radius, 14px);
	--radius-sm: 8px;
	--shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 8px 24px rgba(16, 20, 28, .07);
	--gap: var(--ll-gap, 28px);

	/* Typografie laut CI-Manual, Seite 8: Inter, Black 900 in Versalien mit
	   -1 % Laufweite fuer Schlagzeilen, Bold 700 mit +8 % fuer Rubriken und
	   Kicker, SemiBold 600 fuer Zwischenzeilen, Regular 400 / 17 px / 1,65
	   im Fliesstext. */
	--font-head: var(--ll-font-head, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--font-body: var(--ll-font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--font-size: var(--ll-font-size, 17px);
	--line-height: var(--ll-line-height, 1.65);
	--head-weight: var(--ll-head-weight, 900);
	--head-spacing: var(--ll-head-spacing, -0.01em);
	--head-transform: var(--ll-head-transform, uppercase);

	/* Rubriken und Kicker: Bold 700, Versalien, +8 % Laufweite. */
	--kicker-weight: 700;
	--kicker-spacing: .08em;
}

/* 2. Grundlagen ------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--c-canvas);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: var(--font-size);
	line-height: var(--line-height);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-accent); }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	line-height: 1.18;
	margin: 0 0 .5em;
	font-weight: var(--head-weight);
	letter-spacing: var(--head-spacing);
	text-transform: var(--head-transform);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

.container {
	width: 100%;
	/* Der Fallback ist wichtig: kommt --ll-container einmal nicht an (Cache,
	   Builder-Vorschau), liefe sonst jede Reihe randlos ueber die volle
	   Fensterbreite und der Inhalt klebte links an der Kante. */
	max-width: var(--ll-container, 1180px);
	margin: 0 auto;
	padding: 0 20px;
}

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

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--c-accent); color: var(--c-accent-ink);
	padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; clip: auto; }

.site-content { padding: 0 0 64px; }

/* 3. Header / Navigation ---------------------------------------------- */
.topbar {
	background: var(--c-topbar);
	color: #fff;
	font-size: 13px;
}
.topbar a { color: inherit; opacity: .85; }
.topbar a:hover { opacity: 1; color: var(--c-canvas); }
.topbar-menu {
	display: flex; flex-wrap: wrap; gap: 18px;
	list-style: none; margin: 0; padding: 8px 0;
}

.site-header {
	position: static; z-index: 500;
	background: var(--c-header);
	border-bottom: 1px solid var(--c-line);
}
body.ll-sticky-header .site-header { position: sticky; top: 0; }
body.ll-header-scrolled .site-header { box-shadow: var(--shadow); }

.header-inner {
	display: flex; align-items: center; gap: 24px;
	min-height: 72px;
}

.site-branding { margin-right: auto; }
.site-title {
	font-family: var(--font-head);
	font-size: 1.6rem; font-weight: 800;
	margin: 0; letter-spacing: -.02em;
}
.site-description { margin: 0; font-size: 13px; color: var(--c-muted); }
.custom-logo { max-height: 52px; width: auto; }

.primary-menu {
	display: flex; align-items: center; gap: 26px;
	list-style: none; margin: 0; padding: 0;
	font-weight: 600; font-size: 15px;
}
.primary-menu li { position: relative; }
.primary-menu > li > a { padding: 10px 0; display: inline-block; }
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a { color: var(--c-accent); }

.primary-menu .sub-menu {
	position: absolute; left: 0; top: 100%;
	min-width: 220px; padding: 10px 0; margin: 0;
	list-style: none;
	background: var(--c-header);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	display: none; z-index: 20;
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu a { display: block; padding: 8px 16px; font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.search-toggle,
.menu-toggle {
	background: none; border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	width: 42px; height: 42px;
	cursor: pointer; color: inherit;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 18px;
}
.menu-toggle { display: none; }
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
	display: block; width: 18px; height: 2px;
	background: currentColor; position: relative;
}
.menu-toggle-bars::before,
.menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after { top: 6px; }

.header-search {
	border-top: 1px solid var(--c-line);
	background: var(--c-surface);
	padding: 18px 0;
}

/* 4. Hero -------------------------------------------------------------- */
.ll-hero { position: relative; }
.ll-hero--slider { margin: 0; }

/* 4a. News-Slider – mobile first --------------------------------------
   Auf dem Telefon hochkant im Format 9:16 – so, wie das Geraet gehalten
   wird. Ab Tablet-Breite (783 Pixel) quer im Format 16:9.

   Hochgeladen wird nur ein Bild, im Format 16:9. Auf dem Telefon schneidet
   der Browser daraus mittig das Hochformat – deshalb gehoert das Motiv in
   die Bildmitte.
   ------------------------------------------------------------------- */
.ll-hero--news {
	position: relative;
	background: #0b0c0f;
	overflow: hidden;
	--ll-hero-interval: 6s;

	/* Randlos ueber die volle Fensterbreite – auf jedem Geraet. Der Aufmacher
	   gehoert an den Bildschirmrand, nicht in einen Kasten mit Rand ringsum. */
	width: 100%;
	max-width: none;
	margin: 0 0 32px;
	border-radius: 0;
}

/* Der Slider laeuft randlos, sein Text aber nicht: der steht im selben
   Raster wie der Rest der Seite, damit Schlagzeile und Knopf nicht am
   Bildschirmrand kleben. */
.ll-hero--news .ll-hero__inner {
	width: 100%;
	max-width: var(--ll-container, 1180px);
	margin-left: auto;
	margin-right: auto;
}

.ll-hero__viewport {
	overflow: hidden;
	/* 9:16 auf dem Telefon, ab Tablet 16:9. Keine Hoehenbremse: eine
	   max-height wuerde bei festem Seitenverhaeltnis die Breite mitschrumpfen
	   und den Slider aus dem randlosen Format holen. */
	aspect-ratio: 9 / 16;
	width: 100%;
	height: auto;
}

.ll-hero__track {
	display: flex;
	height: 100%;
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

/*
 * Der Text steht in der Bildmitte, nicht am unteren Rand. Hochkant ist die
 * Kachel hoeher als der Bildschirm; stuende die Schlagzeile unten, muesste
 * man erst scrollen, um den Aufmacher ueberhaupt zu sehen. In der Mitte
 * steht sie beim Oeffnen der Seite im Bild.
 */
.ll-hero__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Ohne JavaScript stehen alle Folien untereinander statt nebeneinander –
   der Inhalt bleibt erreichbar, nur eben ohne Karussell. */
.ll-hero--news:not(.is-enhanced) .ll-hero__track { display: block; }
.ll-hero--news:not(.is-enhanced) .ll-hero__slide { aspect-ratio: 9 / 16; height: auto; }
.ll-hero--news:not(.is-enhanced) .ll-hero__viewport { aspect-ratio: auto; height: auto; max-height: none; }
.ll-hero--news:not(.is-enhanced) .ll-hero__arrow,
.ll-hero--news:not(.is-enhanced) .ll-hero__controls { display: none; }

.ll-hero__image {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 7s linear;
}
.ll-hero__slide.is-active .ll-hero__image { transform: scale(1); }

/*
 * Der Verlauf traegt die Schrift dort, wo sie steht: in der Mitte am
 * dichtesten, nach oben und unten offener. Unten bleibt er kraeftig genug
 * fuer Pfeile und Punkte.
 */
.ll-hero__shade {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg,
		rgba(10, 12, 16, .15) 0%,
		rgba(10, 12, 16, .62) 42%,
		rgba(10, 12, 16, .72) 62%,
		rgba(10, 12, 16, .88) 100%);
}

.ll-hero__inner {
	position: relative; z-index: 2;
	/* Kein Abstand nach unten mehr: der Block steht mittig, nicht am Rand. */
	padding: 0 20px;
	max-width: 820px;
	margin-right: auto;
}

.ll-hero__meta {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 12px; flex-wrap: wrap;
}
.ll-hero__kicker {
	display: inline-block;
	background: var(--c-accent); color: var(--c-accent-ink);
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: var(--kicker-weight);
	letter-spacing: var(--kicker-spacing);
	text-transform: uppercase;
	padding: .3em .6em; border-radius: var(--radius-sm);
}
.ll-hero__date {
	color: rgba(255, 255, 255, .78);
	font-size: 13px; font-weight: 600; letter-spacing: .02em;
}

.ll-hero__title {
	color: #fff; margin: 0 0 .4em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/*
	 * Deutlich zurueckgenommen. Eine Schlagzeile, die den halben Bildschirm
	 * fuellt, erschlaegt den Leser und laesst vom Motiv nichts uebrig.
	 */
	font-size: clamp(1.3rem, 1rem + 1.6vw, 1.7rem);
	line-height: 1.1;
	font-weight: var(--head-weight);
	letter-spacing: var(--head-spacing);
	text-transform: uppercase;
	text-wrap: balance;
	/* Auf breiten Schirmen laeuft eine Schlagzeile sonst quer ueber den
	   ganzen Bildschirm und liest sich nicht mehr. */
	max-width: 18ch;
}
.ll-hero__title a { color: #fff; }
.ll-hero__title a:hover { color: var(--c-accent); }

.ll-hero__text {
	color: rgba(255, 255, 255, .86);
	font-size: .92rem;
	max-width: 56ch;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Hochkant ist Platz fuer den ganzen Block: Kicker, Schlagzeile, Anriss und
 * Knopf. Bei 390 Pixel Breite ist die Kachel 693 Pixel hoch.
 */
.ll-hero__meta { margin-bottom: 10px; }

/* Fingerfreundlich: mindestens 44px hoch – so gross muss eine Flaeche sein,
   die mit dem Daumen getroffen werden soll. */
.ll-hero__button {
	margin: 0;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Die Pfeile stehen auf dem Telefon unten neben den Punkten. Mittig ueber
   dem Bild laegen sie unter dem Daumen und verdeckten das Motiv. */
.ll-hero__arrow {
	position: absolute; z-index: 3;
	top: auto; bottom: 16px;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: rgba(12, 14, 18, .7);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 2px 12px rgba(0, 0, 0, .4);
	color: #fff; font-size: 18px; line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.ll-hero__arrow:hover { background: var(--c-accent); color: var(--c-accent-ink); }
.ll-hero__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ll-hero__arrow--prev { left: 12px; }
.ll-hero__arrow--next { right: 12px; }

/* Punkte und Anhalten */
.ll-hero__controls {
	position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3;
	display: flex; align-items: center; justify-content: center; gap: 12px;
	padding: 0 68px;
}
.ll-hero__dots { display: flex; align-items: center; gap: 8px; }
.ll-hero__dot {
	position: relative;
	width: 26px; height: 4px; padding: 12px 0;
	border: 0; background: none; cursor: pointer;
	box-sizing: content-box;
}
.ll-hero__dot::before {
	content: ""; position: absolute; left: 0; right: 0; top: 12px;
	height: 4px; border-radius: 2px;
	background: rgba(255, 255, 255, .35);
}
.ll-hero__dot-fill {
	position: absolute; left: 0; top: 12px;
	height: 4px; width: 0; border-radius: 2px;
	background: var(--c-accent);
}
.ll-hero__dot.is-active .ll-hero__dot-fill { width: 100%; }
.ll-hero--news.is-playing .ll-hero__dot.is-active .ll-hero__dot-fill {
	animation: ll-hero-fill var(--ll-hero-interval) linear forwards;
}
.ll-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@keyframes ll-hero-fill {
	from { width: 0; }
	to { width: 100%; }
}

/* Der Anhalten-Schalter ist auf dem Telefon ueberfluessig: dort haelt schon
   die erste Beruehrung den Wechsel an. */
.ll-hero__pause { display: none; }
.ll-hero__pause-icon {
	width: 10px; height: 11px;
	border-left: 3px solid #fff; border-right: 3px solid #fff;
}
.ll-hero--news.is-paused .ll-hero__pause-icon {
	width: 0; height: 0;
	border: 6px solid transparent;
	border-left: 10px solid #fff;
	margin-left: 4px;
}

/* Ab Tablet: 3:2 ------------------------------------------------------- */
@media (min-width: 783px) {
	.ll-hero--news {
		margin: 0 0 48px;
	}

	.ll-hero__viewport { aspect-ratio: 16 / 9; }
	.ll-hero--news:not(.is-enhanced) .ll-hero__slide { aspect-ratio: 16 / 9; }

	/* Quer traegt der seitliche Verlauf den Text; von oben genuegt wenig. */
	.ll-hero__shade {
		background:
			linear-gradient(180deg, rgba(10, 12, 16, .12) 0%, rgba(10, 12, 16, .35) 55%, rgba(10, 12, 16, .8) 100%),
			linear-gradient(90deg, rgba(10, 12, 16, .78) 0%, rgba(10, 12, 16, 0) 62%);
	}

	.ll-hero__inner { padding: 0 20px; }

	.ll-hero__meta { gap: 12px; margin-bottom: 14px; }
	.ll-hero__kicker { font-size: 12px; padding: 6px 11px; }
	.ll-hero__date { font-size: 13px; }

	.ll-hero__title {
		font-size: clamp(1.7rem, 1.05rem + 1.9vw, 2.4rem);
		line-height: 1.07;
		-webkit-line-clamp: 3;
		max-width: 20ch;
	}

	.ll-hero__text { font-size: .98rem; margin-bottom: 20px; }

	.ll-hero__controls { bottom: 20px; gap: 18px; padding: 0 20px; }
	.ll-hero__dots { gap: 10px; }
	.ll-hero__dot { width: 42px; padding: 10px 0; }
	.ll-hero__dot::before,
	.ll-hero__dot-fill { top: 10px; }

	.ll-hero__pause {
		display: flex;
		width: 30px; height: 30px;
		align-items: center; justify-content: center;
		border: 0; border-radius: 50%;
		background: rgba(255, 255, 255, .18);
		cursor: pointer;
	}
	.ll-hero__pause:hover { background: var(--c-accent); }
}

/* Erst wenn der Slider breiter ist als das Textraster, ist links und rechts
   Platz fuer seitliche Pfeile. Darunter blieben sie unter der Schlagzeile
   liegen – deshalb stehen sie dort unten neben den Punkten. */
@media (min-width: 1260px) {
	.ll-hero__arrow {
		top: 50%; bottom: auto;
		transform: translateY(-50%);
		width: 48px; height: 48px;
		font-size: 20px;
	}
	.ll-hero__arrow--prev { left: 24px; }
	.ll-hero__arrow--next { right: 24px; }
}

/* Weniger Bewegung: kein Schieben, kein Zoom, kein Fortschrittsbalken */
@media (prefers-reduced-motion: reduce) {
	.ll-hero__track { transition: none; }
	.ll-hero__image { transition: none; transform: none; }
	.ll-hero--news .ll-hero__dot-fill { animation: none !important; }
}


/* 5. Layout & Module --------------------------------------------------- */
.site-main { padding-top: 40px; }
.site-main--full { padding-top: 0; }

.layout { display: block; }
.layout.has-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: start;
}

.breadcrumbs {
	font-size: 13px; color: var(--c-muted);
	margin-bottom: 20px;
}
.breadcrumbs a:hover { color: var(--c-accent); }

.page-header { margin-bottom: 32px; }
.page-title { margin-bottom: .2em; }
.archive-description { color: var(--c-muted); max-width: 70ch; }

.ll-module { margin: 0 0 64px; }

.section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; margin-bottom: 24px;
	border-bottom: 2px solid var(--c-ink);
	padding-bottom: 10px;
}
.section-head.align-center { justify-content: center; text-align: center; }
.section-title { margin: 0; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }
.section-subtitle { color: var(--c-muted); margin: 6px 0 0; }
.section-more {
	font-size: 14px; font-weight: 600; color: var(--c-accent);
	white-space: nowrap;
}

/* 6. Karten ------------------------------------------------------------ */
/*
 * Flexbox statt Raster mit fester Spaltenzahl: eine angebrochene letzte Reihe
 * steht damit mittig, nicht linksbuendig mit toter Flaeche daneben. Die
 * Kartenbreite bleibt in jeder Reihe gleich.
 */
.card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	justify-content: center;
}
.card-grid > * {
	flex: 0 1 calc((100% - 2 * var(--gap)) / 3);
	/* Niedrig genug, damit drei Kacheln auch auf einem Tablet in eine Reihe
	   passen – sonst rutscht die dritte in eine zweite Reihe und die sieht
	   immer nach Fehler aus. */
	min-width: min(100%, 200px);
}
.card-grid.cols-2 > * { flex-basis: calc((100% - var(--gap)) / 2); }
.card-grid.cols-4 > * { flex-basis: calc((100% - 3 * var(--gap)) / 4); }

.card {
	background: var(--c-canvas);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Karten-Stil aus dem Customizer (Layout > Karten-Stil) */
body.ll-cards-shadow .card { border-color: transparent; box-shadow: var(--shadow); }
body.ll-cards-flat .card { border: 0; background: transparent; border-radius: 0; }
body.ll-cards-flat .card:hover { box-shadow: none; }
body.ll-cards-flat .card-media { border-radius: var(--radius); }
body.ll-cards-flat .card-body { padding: 16px 0 0; }

.card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-surface); }
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media--empty { background: linear-gradient(135deg, var(--c-surface), var(--c-line)); }

.card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }

/* Art der Veranstaltung und Kennzeichnungen in einer Zeile. */
.card-flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
}
.card-flags .event-badge { margin-left: 0; }

.entry-kicker {
	font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--c-accent);
}
.card-title { font-size: 1.15rem; margin: 0; }
.card-excerpt { color: var(--c-muted); font-size: 15px; margin: 0; }
.card-date, .card-location { font-size: 14px; color: var(--c-muted); margin: 0; }
.card-date { font-weight: 600; color: var(--c-accent); }

.entry-meta {
	display: flex; flex-wrap: wrap; gap: 14px;
	font-size: 13px; color: var(--c-muted);
}

/* Erste Karte im Startseiten-Raster als Aufmacher */
/* 7. Einzelansichten ---------------------------------------------------- */
.single-entry .entry-header { max-width: 76ch; margin-bottom: 28px; }
.entry-title { margin-bottom: .25em; }
.entry-lead { font-size: 1.2rem; color: var(--c-muted); }

.entry-media { margin: 0 0 32px; }
/*
 * Bilder im Beitrag laufen im Format 3:2 – das Aufmacherbild ebenso wie die
 * Bilder im Fliesstext. Was nicht in den Ausschnitt passt, wird beschnitten
 * statt verzerrt; die Bildmitte bleibt stehen.
 */
.entry-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius);
}

/* :where() haelt die Spezifitaet niedrig, damit die Ausnahmen weiter unten
   ueberhaupt eine Chance haben – mit :not() gewinnt sonst diese Regel. */
.entry-content img:where(:not(.emoji)):where(:not(.avatar)) {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
	height: auto;
	border-radius: var(--radius-sm);
}

/* Bilder, die WordPress als "verkleinert" ausgibt, tragen eine feste Hoehe
   im style-Attribut. Die muss weg, sonst gewinnt sie gegen das Format. */
.entry-content img[style*="height"]:not(.emoji) { height: auto !important; }

/* Ausnahmen: Logos, Symbole und alles, was bewusst nicht beschnitten werden
   soll, bekommt die Klasse "ll-kein-zuschnitt". */
.entry-content img.ll-kein-zuschnitt,
.entry-media img.ll-kein-zuschnitt {
	aspect-ratio: auto;
	object-fit: contain;
}

/*
 * Wichtig: Die 3:2-Regel gilt fuer Bilder im Fliesstext. Im Builder liegen
 * auch Kacheln, Terminlisten und der Slider innerhalb von .entry-content –
 * deren Bilder bringen ihr eigenes Format mit und werden hier wieder
 * ausgenommen. Ohne das fuellte das Kachelbild nur den oberen Teil der Kachel
 * und der Rest blieb grau.
 */
.entry-content .card img,
.entry-content .card-media img,
.entry-content .card-placeholder,
.entry-content .lle-card img,
.entry-content .lle-card__media img,
.entry-content .ll-hero__image,
.entry-content .ll-artist img {
	aspect-ratio: auto;
	height: 100%;
	border-radius: 0;
}
.entry-media figcaption { font-size: 13px; color: var(--c-muted); padding-top: 8px; }

.entry-content { max-width: 76ch; }
.layout.has-sidebar .entry-content { max-width: none; }

/*
 * 76 Zeichen sind die richtige Zeilenlaenge fuer Fliesstext – nicht fuer eine
 * im Builder gebaute Seite. Dort haben Artikel und Startseite dieselbe Klasse,
 * und ohne diese Ausnahme stand der ganze Seiteninhalt in einer 814 Pixel
 * schmalen Spalte am linken Rand, waehrend rechts die halbe Seite leer blieb.
 */
.front-builder,
.builder-entry,
.entry-content > .vc_row,
.entry-content > .wpb-content-wrapper { max-width: none; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content blockquote {
	margin: 1.8em 0; padding: 4px 0 4px 22px;
	border-left: 3px solid var(--c-accent);
	font-family: var(--font-head); font-size: 1.2rem;
}
.entry-content figure { margin: 1.8em 0; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }

/*
 * Die Unterstreichung gilt fuer Links im Fliesstext. Module, die im Inhalt
 * stehen – Karten, Terminlisten, Kuenstler, Rubriktitel – sind Layout und
 * keine Textlinks; dort sieht sie nach Rohentwurf aus.
 */
.entry-content .ll-module a,
.entry-content .card a,
.entry-content .section-head a,
.entry-content .lle-events a,
.entry-content .ll-hero a,
.entry-content .ll-artists a,
.entry-content .button {
	text-decoration: none;
}
.entry-content ul, .entry-content ol { padding-left: 1.3em; }

.entry-footer { margin-top: 36px; }
.entry-tags a {
	display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px;
	background: var(--c-surface); border-radius: 999px;
	font-size: 13px;
}

.comments-area { margin-top: 56px; border-top: 1px solid var(--c-line); padding-top: 32px; }
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body { padding: 16px 0; border-bottom: 1px solid var(--c-line); }

/* 8. Festivals ---------------------------------------------------------- */
.festival-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px; align-items: start;
}

.festival-headline-meta {
	display: flex; flex-wrap: wrap; gap: 16px;
	font-weight: 600; color: var(--c-muted);
}
.festival-headline-meta .festival-date { color: var(--c-accent); }

.festival-facts {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 24px;
	position: sticky; top: 96px;
}
.festival-facts h2 { font-size: 1.1rem; }
.festival-facts dl { margin: 0 0 18px; }
.festival-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); }
.festival-facts dd { margin: 0 0 14px; font-weight: 600; }
.festival-facts .button { width: 100%; margin-bottom: 10px; }

.lineup-list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.lineup-list li {
	background: var(--c-surface); border: 1px solid var(--c-line);
	padding: 6px 12px; border-radius: 999px; font-size: 14px;
}

/* 9. Widgets / Sidebar / Footer ------------------------------------------ */
.widget { margin-bottom: 36px; }
.widget-title {
	font-size: 1rem; text-transform: uppercase; letter-spacing: .07em;
	border-bottom: 2px solid var(--c-ink); padding-bottom: 8px;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 7px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }

.site-footer {
	background: var(--c-footer);
	border-top: 1px solid var(--c-line);
	padding: 56px 0 32px;
	margin-top: 64px;
}
.footer-widgets {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gap); margin-bottom: 40px;
}
.footer-bottom {
	display: flex; flex-wrap: wrap; gap: 16px 32px;
	align-items: center; justify-content: space-between;
	border-top: 1px solid var(--c-line); padding-top: 22px;
	font-size: 14px; color: var(--c-muted);
}
.footer-menu, .legal-menu {
	display: flex; flex-wrap: wrap; gap: 18px;
	list-style: none; margin: 0; padding: 0;
}

.scroll-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 400;
	width: 46px; height: 46px; border-radius: 50%;
	border: 1px solid var(--c-line);
	background: var(--c-canvas); color: var(--c-ink);
	box-shadow: var(--shadow); cursor: pointer; font-size: 18px;
}

/* 10. Formulare, Buttons, Pagination -------------------------------------- */
.button,
button, input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px; padding: 11px 20px;
	border-radius: var(--radius-sm); border: 1px solid transparent;
	font-weight: 600; font-size: 15px; cursor: pointer;
	font-family: inherit;
}
.button-accent { background: var(--c-accent); color: var(--c-accent-ink); }
.button-accent:hover { filter: brightness(.93); color: var(--c-accent-ink); }
.button-ghost { background: transparent; border-color: var(--c-line); color: var(--c-ink); }

.search-form { display: flex; gap: 10px; max-width: 620px; }
.search-field {
	flex: 1; padding: 11px 14px;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	background: var(--c-canvas); color: var(--c-ink); font: inherit; font-size: 15px;
}

input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea {
	max-width: 100%;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	padding: 11px 14px; font: inherit;
	background: var(--c-canvas); color: var(--c-ink);
}

.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	font-weight: 600; font-size: 15px;
}
.pagination .page-numbers.current {
	background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink);
}

.no-results { padding: 40px 0 64px; max-width: 70ch; }
.error-code { font-family: var(--font-head); font-size: 5rem; color: var(--c-accent); margin: 0; line-height: 1; }

/* 10b. Termindatenbank ------------------------------------------------------ */
/* Einstieg */
.db-hero {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	padding: 56px 0 48px;
	margin-bottom: 40px;
}
.db-hero .hero-kicker { position: static; }
.db-hero .hero-title { color: var(--c-ink); margin-bottom: .2em; }
.db-hero .hero-excerpt { color: var(--c-muted); max-width: 62ch; }

.db-header { margin-bottom: 20px; }

.db-entry-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gap); margin-bottom: 32px;
}
.db-entry {
	display: block; padding: 28px;
	border: 1px solid var(--c-line); border-radius: var(--radius);
	background: var(--c-canvas);
	transition: transform .18s ease, box-shadow .18s ease;
}
.db-entry:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.db-entry h2 { margin: 8px 0 10px; }
.db-entry p { color: var(--c-muted); margin-bottom: 14px; }
.db-entry-cta { font-weight: 700; color: var(--c-accent); }
.db-entry--festival { border-top: 4px solid var(--c-accent); }
.db-entry--concert { border-top: 4px solid var(--c-ink); }

/* Filterleiste */
.event-filter {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 16px 18px;
	margin-bottom: 28px;
}
.event-filter-row {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.event-filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.event-filter-field > span {
	font-size: 12px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--c-muted);
}
.event-filter-field select,
.event-filter-field input {
	padding: 9px 12px; font: inherit; font-size: 15px;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	background: var(--c-canvas); color: var(--c-ink);
}
.event-filter-field--search { flex: 1 1 220px; }
.event-filter-reset { font-size: 14px; color: var(--c-muted); text-decoration: underline; }

/* Stadt-Chips */
.city-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.city-chip {
	display: inline-block; padding: 6px 14px;
	border: 1px solid var(--c-line); border-radius: 999px;
	font-size: 14px; font-weight: 600; background: var(--c-canvas);
}
.city-chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.city-chip.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-ink); }

/* Listenansicht Konzerte */
.event-month {
	font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--c-muted); border-bottom: 1px solid var(--c-line);
	padding-bottom: 8px; margin: 36px 0 14px;
}
.event-list { display: flex; flex-direction: column; }
.event-row {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	gap: 20px; align-items: center;
	padding: 18px 0; border-bottom: 1px solid var(--c-line);
}
.event-row-date {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	padding: 10px 6px; background: var(--c-surface);
}
.event-row-day { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.event-row-month { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-accent); font-weight: 700; }
.event-row-weekday { font-size: 12px; color: var(--c-muted); }
.event-row-title { margin: 0 0 4px; font-size: 1.2rem; }
.event-row-tour { margin: 0 0 4px; color: var(--c-muted); font-size: 15px; }
.event-row-place { margin: 0; font-size: 15px; }
.event-row-time { color: var(--c-muted); margin-left: 8px; }
.event-row-support { margin: 4px 0 0; font-size: 14px; color: var(--c-muted); }
.event-row-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Planer-Mini-Karten */
.mini-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.mini-card {
	display: flex; flex-direction: column; gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--c-line); border-radius: var(--radius-sm);
	background: var(--c-canvas);
}
.mini-card:hover { border-color: var(--c-accent); }
.mini-date { font-size: 13px; font-weight: 700; color: var(--c-accent); }
.mini-title { font-family: var(--font-head); font-weight: 700; line-height: 1.25; }
.mini-city { font-size: 13px; color: var(--c-muted); }

/* Karten der Datenbank */
.card-acts { font-size: 14px; color: var(--c-muted); margin: 0; }
.card-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Einzelansicht */
.event-layout {
	display: grid; grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px; align-items: start;
}
.event-headline-meta {
	display: flex; flex-wrap: wrap; gap: 16px;
	font-weight: 600; color: var(--c-muted);
}
.event-headline-meta .event-date { color: var(--c-accent); }
.event-facts {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 24px; position: sticky; top: 96px;
}
.event-facts h2 { font-size: 1.1rem; }
.event-facts dl { margin: 0 0 18px; }
.event-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); }
.event-facts dd { margin: 0 0 14px; font-weight: 600; }
.event-facts .button { width: 100%; margin-bottom: 10px; }
.event-facts-terms { margin-top: 16px; }

/* 11. WPBakery-Kompatibilitaet --------------------------------------------- */
/*
 * Builder-Seiten liegen in einem Container – sonst klebt jede Reihe am linken
 * Rand. "Stretch row" funktioniert trotzdem: WPBakery bricht solche Reihen per
 * negativem Rand aus dem Container heraus und braucht ihn sogar als Bezug.
 *
 * Die Reihen behalten ihren eigenen negativen Rand von 15 Pixeln – das ist das
 * Spaltenraster von WPBakery und gehoert so.
 */
body.ll-builder .site-main { padding-top: 0; }
body.ll-builder .builder-entry { max-width: none; }

/* WPBakery-Inhalt innerhalb normaler Seiten sauber begrenzen. */
.entry-content .vc_row[data-vc-full-width="true"] { max-width: 100vw; }

/* Standardabstaende der WPBakery-Reihen an das Theme angleichen. */
.vc_row.ll-section { padding: 64px 0; }
.wpb_text_column p:last-child { margin-bottom: 0; }
.vc_btn3.vc_btn3-color-liveloud { background-color: var(--c-accent); color: var(--c-accent-ink); }

/* Slider-Revolution-Container: keine Randabstaende erben. */
.ll-hero--slider .rev_slider_wrapper,
.ll-hero--slider rs-module-wrap { margin: 0 !important; }

/* 12. Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.layout.has-sidebar,
	.festival-layout,
	.event-layout { grid-template-columns: 1fr; gap: 40px; }
	.festival-facts, .event-facts { position: static; }
	.mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Das Standardraster bleibt dreispaltig: drei Kacheln in zwei Spalten
	   gehen nie auf, und eine angebrochene Reihe sieht immer nach Fehler aus.
	   Nur die Vier- und Zweispalter brechen hier auf zwei um. */
	.card-grid.cols-4 > * { flex-basis: calc((100% - var(--gap)) / 2); }
	.footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.menu-toggle { display: inline-flex; }

	.main-navigation {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--c-canvas);
		border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow);
		display: none;
	}
	.main-navigation.is-open { display: block; }
	.primary-menu {
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 8px 20px 20px;
	}
	.primary-menu > li > a { padding: 12px 0; border-bottom: 1px solid var(--c-line); display: block; }
	.primary-menu .sub-menu {
		position: static; display: block; border: 0; box-shadow: none;
		padding: 0 0 0 14px;
	}

}

@media (max-width: 860px) {
	.db-entry-grid { grid-template-columns: 1fr; }
	.mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.event-row { grid-template-columns: 64px minmax(0, 1fr); }
	.event-row-actions { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 700px) {
	body { font-size: 16px; }
	.mini-grid { grid-template-columns: 1fr; }
	.event-filter-field { min-width: 0; flex: 1 1 100%; }

	/* Unterhalb dieser Breite steht jede Kachel allein. Zwischenstufen mit
	   zwei Spalten gibt es bewusst nicht: bei drei Kacheln geht das nie auf. */
	.card-grid > *,
	.card-grid.cols-2 > *,
	.card-grid.cols-3 > *,
	.card-grid.cols-4 > * { flex-basis: 100%; }
	.footer-widgets { grid-template-columns: 1fr; }
	.search-form { flex-direction: column; }
}

/* ------------------------------------------------------------------ */
/* 10c  Kennzeichnung von Terminen                                      */
/* ------------------------------------------------------------------ */

.event-badge {
	display: inline-block;
	/*
	 * Der Kartenkoerper ist ein Flex-Container in Spaltenrichtung. Flexbox
	 * macht aus jedem inline-block ein block und streckt es auf die volle
	 * Breite – aus der Pille wurde dadurch ein roter Balken quer ueber die
	 * Kachel. align-self haelt sie auf Inhaltsbreite.
	 */
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	margin-left: .45rem;
	padding: .15em .6em;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 1.6;
}

.event-badge--new {
	background: var(--c-accent);
	color: var(--c-on-accent);
}

.event-badge--sold-out,
.event-badge--cancelled {
	background: var(--c-line);
	color: var(--c-text-muted);
}

.event-badge--postponed,
.event-badge--relocated {
	background: transparent;
	color: var(--c-text-muted);
	box-shadow: inset 0 0 0 1px var(--c-line);
}

.event-filter-field--new .event-filter-check {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .9rem;
	white-space: nowrap;
}

.event-filter-field--new input {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* 10d  Künstler                                                        */
/* ------------------------------------------------------------------ */

.artist-header {
	padding: 2.5rem 0 1.75rem;
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-line);
	margin-bottom: 2rem;
}

.artist-title {
	margin: .2rem 0 .5rem;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1.1;
}

.artist-description {
	max-width: 62ch;
	color: var(--c-text-muted);
}

.artist-summary {
	margin: .4rem 0 0;
	color: var(--c-text-muted);
	font-size: .95rem;
}

.artist-section {
	margin-bottom: 2.75rem;
}

.artist-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
	margin: .75rem 0 0;
}

.artist-links-label {
	font-size: .85rem;
	color: var(--c-text-muted);
}

.artist-chip {
	display: inline-block;
	padding: .3em .85em;
	border-radius: 999px;
	background: var(--c-surface);
	box-shadow: inset 0 0 0 1px var(--c-line);
	color: var(--c-text);
	font-size: .85rem;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.artist-chip:hover,
.artist-chip:focus {
	background: var(--c-accent);
	color: var(--c-on-accent);
	box-shadow: none;
}

.artist-dates,
.artist-articles {
	margin-top: 2.5rem;
}

@media (max-width: 640px) {
	.artist-header {
		padding: 1.75rem 0 1.25rem;
	}
}

.artist-alphabet {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-bottom: 2rem;
}

.artist-alphabet a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.1rem;
	padding: .3rem .5rem;
	border-radius: var(--c-radius, 8px);
	background: var(--c-surface);
	box-shadow: inset 0 0 0 1px var(--c-line);
	color: var(--c-text);
	font-weight: 600;
	text-decoration: none;
}

.artist-alphabet a:hover,
.artist-alphabet a:focus {
	background: var(--c-accent);
	color: var(--c-on-accent);
	box-shadow: none;
}

.artist-group {
	margin-bottom: 2rem;
}

.artist-group-title {
	margin: 0 0 .6rem;
	padding-bottom: .3rem;
	border-bottom: 2px solid var(--c-accent);
	font-size: 1.4rem;
}

.artist-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: .35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.artist-list a {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	padding: .35rem 0;
	color: var(--c-text);
	text-decoration: none;
	border-bottom: 1px solid var(--c-line);
}

.artist-list a:hover,
.artist-list a:focus {
	color: var(--c-accent);
}

.artist-count {
	color: var(--c-text-muted);
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* 10e  Seiten im Page Builder                                          */
/* ------------------------------------------------------------------ */

/* Ohne Container laeuft jede Reihe randlos ueber die Fensterbreite und der
   Text klebt links an der Kante. Stretch rows von WPBakery brechen per
   negativem Rand weiterhin heraus. */
.site-main--builder {
	padding: 32px 0 48px;
}

.builder-container > .builder-entry > .ll-module,
.builder-container > .builder-entry > .lle-events,
.builder-container > .builder-entry > .section-head {
	margin-bottom: 48px;
}

.builder-entry > *:last-child {
	margin-bottom: 0;
}

/* Titel und Unterzeile untereinander, nicht nebeneinander. */
.section-head-text {
	min-width: 0;
}

.section-head-text .section-title {
	margin: 0;
}

@media (max-width: 640px) {
	.site-main--builder {
		padding: 20px 0 32px;
	}
}

/* ------------------------------------------------------------------ */
/* 10f  Magazin-Karte: Titel über dem Bild                              */
/* ------------------------------------------------------------------ */

/* Das ist der Stil von live-and-loud.de: eine Bildkachel, darauf der Titel
   in Versalien, darunter die Meta-Zeile. Kein weisser Kasten, kein Anriss. */

/*
 * Das Bild bekommt ein festes Fenster im Format 16:9, der Text legt sich auf
 * dessen unteres Drittel.
 *
 * Vorher lag das Bild als Hintergrund hinter der ganzen Kachel und die Kachel
 * wuchs mit der Schlagzeile. Bei 327 Pixel Breite war sie dadurch 375 Pixel
 * hoch – hochkant. Ein Querformat von 800 x 520 wurde darin auf einen
 * schmalen Mittelstreifen zusammengeschnitten: vom Motiv blieb die Mitte, die
 * Koepfe waren weg.
 *
 * Jetzt bestimmt das Bild die Hoehe. Braucht die Schlagzeile mehr Platz, als
 * unten auf dem Bild ist, waechst die Kachel nach unten auf dunklem Grund
 * weiter – das Bild bleibt in jedem Fall unangetastet und in jeder Kachel
 * gleich ausgeschnitten.
 */
body.ll-cards-overlay .card {
	position: relative;
	background: #101114;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 0;
	justify-content: flex-start;
}

body.ll-cards-overlay .card:hover {
	transform: none;
	box-shadow: none;
}

body.ll-cards-overlay .card-link {
	position: relative;
	z-index: 1;
	display: block;
	/* Das Fenster, in dem das Motiv steht. Nichts darf es verformen. */
	aspect-ratio: 16 / 9;
	width: 100%;
	flex: 0 0 auto;
	overflow: hidden;
}

body.ll-cards-overlay .card-media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border-radius: 0;
}

body.ll-cards-overlay .card-media img,
body.ll-cards-overlay .card-media .card-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

body.ll-cards-overlay .card:hover .card-media img {
	transform: scale(1.04);
}

/* Der Verlauf liegt nur auf dem Bild und macht die Schrift lesbar, ohne das
   Motiv zuzudecken. */
body.ll-cards-overlay .card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .02) 38%, rgba(0, 0, 0, .34) 62%, rgba(0, 0, 0, .88) 100%);
	z-index: 1;
	pointer-events: none;
}

/*
 * Der Textblock ueberlappt das untere Drittel des Bildes. Passt er nicht
 * hinein, schiebt er sich nach unten aus der Bildflaeche heraus – der
 * dunkle Kachelgrund faengt ihn auf.
 */
body.ll-cards-overlay .card-body {
	position: relative;
	z-index: 2;
	/*
	 * In em, nicht in Prozent: Prozent bezoege sich auf die BREITE der
	 * Kachel, die Ueberlappung waere auf einer breiten Kachel dreimal so
	 * gross wie auf einer schmalen. In em haengt sie an der Schriftgroesse
	 * und damit an der Hoehe des Textes, den sie tragen soll.
	 */
	margin-top: var(--card-overlap, -5.5em);
	padding: 0 20px 18px;
	color: #fff;
}

body.ll-cards-overlay .card-title {
	margin: 0;
	font-size: clamp(.95rem, .82rem + .45vw, 1.15rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-wrap: balance;

	/* Lange Schlagzeilen duerfen die Kachel nicht auffuellen. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.ll-cards-overlay .card-title a {
	color: #fff;
}

body.ll-cards-overlay .card-title a:hover {
	color: var(--c-accent);
}

body.ll-cards-overlay .entry-kicker {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--c-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Anrisse gehören nicht auf eine Bildkachel. */
body.ll-cards-overlay .card-excerpt {
	display: none;
}

body.ll-cards-overlay .entry-meta,
body.ll-cards-overlay .card-acts,
body.ll-cards-overlay .card-date,
body.ll-cards-overlay .card-location {
	margin: 8px 0 0;
	color: rgba(255, 255, 255, .78);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* Die Statuskennzeichnungen sind fuer helle Karten gemacht. Auf der dunklen
   Bildkachel brauchen sie einen dunklen Grund, sonst leuchtet ein weisser
   Kasten aus dem Motiv heraus. */
body.ll-cards-overlay .event-badge--sold-out,
body.ll-cards-overlay .event-badge--cancelled,
body.ll-cards-overlay .event-badge--postponed,
body.ll-cards-overlay .event-badge--relocated {
	background: rgba(12, 14, 18, .72);
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* Ein Datum wie "12. September 2026" gehoert nicht in Versalien. */
body.ll-cards-overlay .entry-date,
.entry-meta .entry-date { text-transform: none; }

body.ll-cards-overlay .card-acts {
	text-transform: none;
	letter-spacing: 0;
	font-size: 12px;
	font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* 10g  Sektionskopf im Magazin-Stil                                    */
/* ------------------------------------------------------------------ */

.section-head {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 20px;
	align-items: center;
}

.section-head::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--c-line);
	order: 2;
}

.section-head .section-more {
	order: 3;
	margin-left: 4px;
}

.section-head-text {
	order: 1;
	flex: 0 0 auto;
}

.section-title {
	font-size: clamp(.95rem, .85rem + .35vw, 1.1rem);
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.section-subtitle {
	margin: 4px 0 0;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}

/*
 * Auf dem Telefon steht jeder Rubrikkopf linksbuendig – auch einer, der im
 * Builder auf "zentriert" steht. Zentrierte Rubriktitel wirken auf schmalen
 * Schirmen wie eine Einladungskarte, nicht wie ein Magazin, und die Rubrik
 * stuende anders als alle anderen auf derselben Seite.
 *
 * Die Klasse ".align-center" wird ausdruecklich mitgenannt: ohne sie gewinnt
 * sie mit ihrer hoeheren Spezifitaet, und genau das ist hier lange passiert.
 * Ab Tablet-Breite gilt die Einstellung aus dem Builder wieder.
 */
.section-head,
.section-head.align-center {
	justify-content: space-between;
	align-items: baseline;
	text-align: left;
	gap: 12px;
}

/* Der Zierstrich braucht Platz, den es auf dem Telefon nicht gibt. */
.section-head::after { display: none; }
.section-head .section-more { order: 2; margin-left: 0; }

@media (min-width: 621px) {
	.section-head {
		align-items: center;
		gap: 16px;
	}

	.section-head::after { display: block; }
	.section-head .section-more { order: 3; margin-left: 4px; }

	.section-head.align-center {
		justify-content: center;
		text-align: center;
	}

	.section-head.align-center::after { display: none; }
}

/* ------------------------------------------------------------------ */
/* 10h  Dunkler Header wie auf live-and-loud.de                         */
/* ------------------------------------------------------------------ */

/* Der Header traegt jetzt ab Werk eine dunkle Flaeche. Damit Logo, Menue
   und Icons darauf lesbar bleiben, rechnet das Theme die Schriftfarbe aus
   der Helligkeit der Flaeche – wer im Customizer wieder auf Weiss stellt,
   bekommt automatisch dunkle Schrift zurueck. */

.site-header {
	color: var(--c-header-ink);
	border-bottom-color: var(--c-header-line);
}

.site-header a,
.site-header .site-title a,
.site-header .primary-menu a,
.site-header button {
	color: var(--c-header-ink);
}

.site-header .site-description {
	color: var(--c-header-muted);
}

.site-header a:hover,
.site-header .primary-menu a:hover {
	color: var(--c-accent);
}

.site-header .header-action svg,
.site-header .menu-toggle svg {
	fill: currentColor;
	stroke: currentColor;
}

.site-title {
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* 10i. Terminkacheln des Importers im Kartenstil des Themes -------------
   Der Importer bringt eigene Karten mit. Damit auf einer Seite nicht zwei
   Kartenwelten nebeneinander stehen – weisse Kaesten neben Bildkacheln –
   uebernimmt das Theme sie in seinen Overlay-Stil. */
body.ll-cards-overlay .lle-card {
	position: relative;
	border: 0;
	background: var(--c-ink);
	justify-content: flex-end;
	overflow: hidden;
}

body.ll-cards-overlay .lle-card::before {
	content: "";
	display: block;
	padding-top: 66.67%;
	flex: 0 0 auto;
}

body.ll-cards-overlay .lle-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

body.ll-cards-overlay .lle-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

body.ll-cards-overlay .lle-card:hover .lle-card__media img {
	transform: scale(1.04);
}

body.ll-cards-overlay .lle-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .88) 100%);
	z-index: 1;
	pointer-events: none;
}

body.ll-cards-overlay .lle-card__body {
	position: relative;
	z-index: 2;
	padding: 18px 20px 20px;
	color: #fff;
}

body.ll-cards-overlay .lle-card__title {
	margin: 6px 0 6px;
	font-size: clamp(.95rem, .82rem + .45vw, 1.15rem);
	font-weight: 800;
	line-height: 1.22;
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.ll-cards-overlay .lle-card__title a { color: #fff; }
body.ll-cards-overlay .lle-card__title a:hover { color: var(--c-accent); }

body.ll-cards-overlay .lle-card__place,
body.ll-cards-overlay .lle-card__extra {
	color: rgba(255, 255, 255, .8);
	font-size: 12px;
	margin: 2px 0 0;
}

/* Auf der Kachel ist kein Platz fuer Lineups und Tickets – beides steht in
   der Detailansicht, und der Klick auf die Kachel fuehrt dorthin. */
body.ll-cards-overlay .lle-card__extra { display: none; }
body.ll-cards-overlay .lle-card__action { display: none; }

/* ------------------------------------------------------------------ */
/* 13  Mobile first                                                     */
/*                                                                      */
/* Die Werte hier gelten zuerst fuer das Telefon – enge Raender, kleine */
/* Abstaende, Flaechen, die sich mit dem Daumen treffen lassen. Alles,  */
/* was auf grossen Schirmen groesszuegiger sein darf, steht in der      */
/* min-width-Abfrage darunter. Der Abschnitt steht bewusst am Ende der  */
/* Datei: so gewinnt er gegen die aelteren Desktop-Werte weiter oben.   */
/* ------------------------------------------------------------------ */

:root {
	/* Rasterabstand auf dem Telefon. Der Customizer-Wert greift erst ab
	   Tablet-Breite – 28px zwischen zwei Kacheln sind auf 390px Bildschirm
	   ein Drittel der nutzbaren Flaeche. */
	--gap: 18px;
}

.container { padding-left: 16px; padding-right: 16px; }

.site-content { padding-bottom: 40px; }
.site-main { padding-top: 24px; }
.ll-module { margin-bottom: 40px; }

.builder-container > .builder-entry > .ll-module,
.builder-container > .builder-entry > .lle-events,
.builder-container > .builder-entry > .section-head { margin-bottom: 32px; }

/* Flaechen, die getroffen werden muessen, sind mindestens 44px hoch. */
.button,
.entry-content .button,
.lle-events a.lle-btn,
.search-toggle,
.primary-menu > li > a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/*
 * Der Menue-Schalter steht hier bewusst ohne "display".
 *
 * Er gehoert nur auf schmale Schirme; breiter steht die Navigation
 * ausgeschrieben daneben. Nimmt man ihn in die Sammelregel darueber auf,
 * setzt sie ihn auf inline-flex und er bleibt auch auf dem Schreibtisch
 * sichtbar – zwei Striche neben einem Menue, das schon da ist.
 */
.menu-toggle {
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

.primary-menu > li > a { justify-content: flex-start; }

/* Tabellen und Terminlisten duerfen die Seite nicht breiter machen als den
   Bildschirm – sie bekommen ihren eigenen Schieberegler. */
.entry-content table,
.lle-table {
	display: block;
	overflow-x: auto;
	max-width: 100%;
}

/* Kein Zoomsprung beim Antippen eines Eingabefelds: unter 16px vergroessert
   iOS die Seite automatisch und der Besucher landet verschoben. */
input,
select,
textarea { font-size: 16px; }

@media (min-width: 783px) {
	:root { --gap: var(--ll-gap, 28px); }

	.container { padding-left: 20px; padding-right: 20px; }

	.site-content { padding-bottom: 64px; }
	.site-main { padding-top: 40px; }
	.ll-module { margin-bottom: 64px; }

	.builder-container > .builder-entry > .ll-module,
	.builder-container > .builder-entry > .lle-events,
	.builder-container > .builder-entry > .section-head { margin-bottom: 48px; }

	.button,
	.entry-content .button,
	.lle-events a.lle-btn {
		min-height: 0;
		display: inline-block;
	}

	.entry-content table,
	.lle-table { display: table; }

	input,
	select,
	textarea { font-size: inherit; }
}

/* ------------------------------------------------------------------ */
/* 14  Auftritte auf einem Festival                                     */
/* ------------------------------------------------------------------ */

/* Auf der Konzertseite: zu welchem Festival gehoert der Auftritt? */
.event-festival-hint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	font-size: 14px;
	font-weight: 600;
}
.event-festival-hint a { color: var(--c-accent); }

/* Auf der Festivalseite: die Auftritte mit Datum und Link. */
.festival-acts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.festival-act {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 2px 14px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-line);
}
.festival-act:last-child { border-bottom: 0; }

.festival-act__date {
	font-weight: 700;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.festival-act__title {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
}
.festival-act__title:hover { color: var(--c-accent); }

.festival-act__venue {
	grid-column: 2;
	font-size: 14px;
	color: var(--c-muted);
}

@media (max-width: 480px) {
	.festival-act { grid-template-columns: 52px minmax(0, 1fr); gap: 2px 10px; }
}

/* ------------------------------------------------------------------ */
/* 15  Corporate Identity                                              */
/* ------------------------------------------------------------------ */
/*
 * Die Vorgaben aus dem CI-Manual, an einer Stelle gebuendelt. Die Farben und
 * die Schrift stehen oben in den Tokens; hier stehen die Elemente, fuer die
 * das Manual eigene Werte nennt (Seite 8 "Typografie", Seite 9
 * "Gestaltungselemente").
 *
 * Der Abschnitt steht bewusst am Dateiende: er korrigiert aeltere Regeln, und
 * bei gleicher Spezifitaet gewinnt die spaetere.
 */

/* Schlagzeilen: Inter Black in Versalien, -1 % Laufweite. */
h1, h2,
.entry-title,
.card-title,
.section-title,
.ll-hero__title {
	font-family: var(--font-head);
	font-weight: var(--head-weight);
	letter-spacing: var(--head-spacing);
}

/*
 * Zwischenzeilen im Artikel: SemiBold, normale Gross- und Kleinschreibung.
 * Versalien sind der Schlagzeile vorbehalten – stuenden auch die
 * Zwischenzeilen gross, verloere die Seite ihre Gliederung.
 */
.entry-content h3,
.entry-content h4 {
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* Claim und Vorspann: SemiBold in Grau. */
.entry-lead,
.section-subtitle {
	font-weight: 600;
	color: var(--c-muted);
}

/*
 * Ein Modul ist kein Fliesstext.
 *
 * ".entry-content a" faerbt jeden Link rot und unterstreicht ihn. Das ist im
 * Artikel richtig – in einer Kachel nicht: dort wurde die Schlagzeile rot und
 * unterstrichen, und der Kicker stand rot auf rot, also unsichtbar. Die Regel
 * hat mit 0,1,1 eine hoehere Spezifitaet als ".entry-kicker" und gewann.
 *
 * :where() zaehlt nicht mit, die Rueckname hat damit dieselbe Spezifitaet und
 * gewinnt nur, weil sie spaeter steht. Was innerhalb der Module farbig sein
 * soll – Kicker, Buttons, "Alle anzeigen" – setzt sich darunter selbst.
 */
.entry-content :where(.ll-module, .card, .card-grid, .section-head, .event-row, .event-card, .festival-acts, .artist-grid, .artist-card, .lle-events) a {
	color: inherit;
	text-decoration: none;
}

.entry-content :where(.ll-module, .card-grid, .section-head) a:hover,
.entry-content :where(.card, .event-row, .artist-card) a:hover {
	color: var(--c-accent);
}

/* Der Verweis am Kopf einer Rubrik bleibt rot – er ist die Handlung. */
.section-more,
.entry-content .section-more {
	color: var(--c-accent);
	text-decoration: none;
}

/*
 * Rubriken und Kicker: Signalrot, weisse Schrift, Inter Bold, Versalien,
 * Eckenradius 8 px (Manual Seite 9, "KICKER").
 */
.entry-content .entry-kicker,
.entry-kicker,
.hero-kicker,
.ll-hero__kicker,
body.ll-cards-overlay .entry-kicker {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	padding: .3em .6em;
	border-radius: var(--radius-sm);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: var(--kicker-weight);
	letter-spacing: var(--kicker-spacing);
	line-height: 1.2;
	text-transform: uppercase;
}

/* Im Kartenkoerper ist die Spaltenrichtung Flex: ohne align-self zieht
   Flexbox die Pille auf die volle Kartenbreite. */
.card-body .entry-kicker,
.card-flags .entry-kicker { align-self: flex-start; }

/*
 * Statuskennzeichnungen sind Kicker in anderer Rolle und folgen demselben
 * Radius. Die runde Pille war eine Fremdform.
 */
.event-badge {
	border-radius: var(--radius-sm);
	font-family: var(--font-head);
	letter-spacing: var(--kicker-spacing);
	padding: .3em .6em;
	line-height: 1.2;
}

/* Handlungsaufforderung: Signalrot, weisse Schrift, Inter Bold, Radius 8 px. */
.button,
button,
input[type="submit"] {
	font-family: var(--font-body);
	font-weight: 700;
	border-radius: var(--radius-sm);
}

/*
 * Datumskachel der Live-Datenbank: Tag in Inter Black, Monat in Signalrot,
 * Jahr bzw. Wochentag in Grau. Tabellenziffern halten die Kacheln
 * untereinander auf gleicher Breite – sonst wackelt die Spalte zwischen
 * "11." und "30.".
 */
.event-row-date,
.lle-row__date {
	font-variant-numeric: tabular-nums;
}
.event-row-day,
.lle-row__day {
	font-family: var(--font-head);
	font-weight: 900;
	letter-spacing: -.02em;
}
.event-row-month,
.lle-row__month {
	font-family: var(--font-head);
	font-weight: var(--kicker-weight);
	letter-spacing: var(--kicker-spacing);
	text-transform: uppercase;
	color: var(--c-accent);
}
.event-row-weekday,
.lle-row__year {
	color: var(--c-muted);
	font-weight: 600;
}

/*
 * Karten: Eckenradius 14 px, Bild mit dunklem Verlauf, Kicker und Headline
 * in Weiss. Der Verlauf sitzt im Overlay-Stil bereits auf dem Bild; hier
 * wird nur der Radius verbindlich gemacht, damit ihn keine aeltere Regel
 * ueberschreibt.
 */
.card,
.event-card,
.lle-card { border-radius: var(--radius); }

/* Version 3.0: aktuelle Slider-Anpassungen vom 17.09.2026. */
.ll-hero--news .ll-hero__viewport { aspect-ratio: 16 / 9; height: auto; min-height: 0; max-height: none; }
.ll-hero--news .ll-hero__slide { align-items: flex-start; }
.ll-hero--news .ll-hero__inner { margin-top: clamp(120px, 26.8vw, 520px); margin-bottom: 0; }
@media (min-width: 768px) {
  .ll-hero--news .ll-hero__title { max-width: 740px; font-size: 34px; }
}
@media (max-width: 767px) {
  .ll-hero--news .ll-hero__viewport { aspect-ratio: 9 / 16; height: auto; min-height: 0; max-height: none; }
  .ll-hero--news .ll-hero__slide { align-items: flex-end; }
  .ll-hero--news .ll-hero__inner { margin-top: 32px; margin-bottom: 76px; }
  .ll-hero--news .ll-hero__title { max-width: 100%; font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
  .ll-hero--news .ll-hero__text { font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
  .ll-hero--news .ll-hero__meta { font-size: 11px; margin-bottom: 10px; }
  .ll-hero--news .ll-hero__date { font-size: 11px; }
  .ll-hero--news .ll-hero__button { font-size: 13px; padding: 12px 18px; }
}

/* Mobile navigation: theme accent, consistent contrast and independent toggles. */
.submenu-toggle { display: none; }
[hidden] { display: none !important; }
@media (max-width: 860px) {
 .site-header .main-navigation {
  background: var(--ll-accent, #fd001e);
  color: #fff;
  border-bottom-color: rgba(255,255,255,.3);
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
 }
 .site-header .main-navigation a,
 .site-header .main-navigation a:hover,
 .site-header .main-navigation a:focus-visible,
 .site-header .primary-menu .current-menu-item > a,
 .site-header .primary-menu .current-menu-ancestor > a,
 .site-header .primary-menu .current_page_item > a,
 .site-header .main-navigation button { color: #fff; }
 .site-header .main-navigation a:hover,
 .site-header .main-navigation a:focus-visible,
 .site-header .main-navigation .current-menu-item > a { background: rgba(0,0,0,.16); }
 .site-header .primary-menu > li > a { border-bottom-color: rgba(255,255,255,.3); }
 .site-header .primary-menu .sub-menu { background: transparent; color: #fff; min-width: 0; }
 .site-header .main-navigation.is-enhanced .menu-item-has-children > a { padding-right: 52px; }
 .site-header .main-navigation.is-enhanced .sub-menu { display: none; }
 .site-header .main-navigation.is-enhanced li.is-expanded > .sub-menu { display: block; }
 .site-header .submenu-toggle {
  display: inline-flex; position: absolute; right: 0; top: 0;
  width: 46px; height: 46px; padding: 0; border: 0;
  border-radius: 0; background: transparent; color: #fff;
 }
 .site-header .submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }
 .site-header .main-navigation a:focus-visible,
 .site-header .submenu-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
}


/* 4.0.1: Beitragskarten bleiben vollstaendig im 16:9-Bildfenster.
   Der Text liegt im Bild; weder Ueberlappung noch Raster-Streckung erzeugen
   eine freie Flaeche darunter. Veranstaltungsdetails behalten ihren Platz. */
body.ll-cards-overlay .card-post {
    container-type: inline-size;
    aspect-ratio: 16 / 9;
    align-self: flex-start;
}
body.ll-cards-overlay .card-post .card-body {
    position: absolute;
    inset: auto 0 0;
    margin: 0;
    padding: 12px 16px;
    gap: 6px;
    background: transparent;
}
body.ll-cards-overlay .card-post .entry-kicker,
body.ll-cards-overlay .card-post .entry-meta {
    margin: 0;
}
body.ll-cards-overlay .card-post .card-title {
    margin: 0;
}

/* Die Plugin-Datei kann nach dem Theme geladen werden. Daher bewusst
   spezifischer: inline-flex behaelt die vertikale Zentrierung trotz der
   inline-block-Regel des Plugins; 44px bleiben gut antippbar. */
body .lle-events a.lle-btn,
body .entry-content .button-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 16px;
    line-height: 1.2;
    border-radius: 8px;
    color: var(--c-accent-ink);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
}
body .lle-events a.lle-btn--small {
    padding: 10px 14px;
    font-size: 13px;
}
body .lle-events .lle-compact {
    list-style: none;
    margin: 0;
    padding: 0;
}
body .lle-events a.lle-compact__ticket {
    align-self: center;
    height: 44px;
}
body .lle-events--kompakt .lle-events__more a.lle-btn {
    display: flex;
}
body .lle-events a.lle-btn:focus-visible {
    outline: 2px solid var(--c-ink);
    outline-offset: 3px;
}

@container (max-width: 260px) {
    body.ll-cards-overlay .card-post .card-body { padding: 8px; gap: 4px; }
    body.ll-cards-overlay .card-post .card-title { font-size: .8rem; }
    body.ll-cards-overlay .card-post .entry-kicker { font-size: 9px; }
    body.ll-cards-overlay .card-post .entry-meta { font-size: 10px; line-height: 1.2; }
}


/* 4.0.2: Desktop-Typografie richtet sich nach der Kachel, nicht dem
   Bildschirm. Die mobile Einspaltenansicht bleibt unveraendert. */
@media (min-width: 701px) {
    body.ll-cards-overlay .card-post .card-body {
        padding: 8px 12px;
        gap: 4px;
    }
    body.ll-cards-overlay .card-post .card-title {
        font-size: 11.5px;
        font-size: clamp(10.5px, 4.1cqw, 15px);
        line-height: 1.2;
        letter-spacing: -.01em;
        text-wrap: pretty;
        -webkit-line-clamp: 4;
    }
    body.ll-cards-overlay .card-post .entry-kicker {
        font-size: 9px;
        font-size: clamp(9px, 3.5cqw, 11px);
        padding: .25em .55em;
        line-height: 1.2;
    }
    body.ll-cards-overlay .card-post .entry-meta {
        font-size: 10px;
        font-size: clamp(10px, 4cqw, 12px);
        line-height: 1.2;
    }
}

/* Explizite mobile Mengen je Builder-Modul. 0 zeigt alle geladenen Karten.
   Desktop und paginierte Archive werden nicht beschnitten. */
@media (max-width: 700px) {
    .ll-module .card-grid[data-mobile-count="1"] > .card:nth-child(n+2) { display: none; }
    .ll-module .card-grid[data-mobile-count="2"] > .card:nth-child(n+3) { display: none; }
    .ll-module .card-grid[data-mobile-count="3"] > .card:nth-child(n+4) { display: none; }
    .ll-module .card-grid[data-mobile-count="4"] > .card:nth-child(n+5) { display: none; }
    .ll-module .card-grid[data-mobile-count="5"] > .card:nth-child(n+6) { display: none; }
    .ll-module .card-grid[data-mobile-count="6"] > .card:nth-child(n+7) { display: none; }
    .ll-module .card-grid[data-mobile-count="7"] > .card:nth-child(n+8) { display: none; }
    .ll-module .card-grid[data-mobile-count="8"] > .card:nth-child(n+9) { display: none; }
    .ll-module .card-grid[data-mobile-count="9"] > .card:nth-child(n+10) { display: none; }
    .ll-module .card-grid[data-mobile-count="10"] > .card:nth-child(n+11) { display: none; }
    .ll-module .card-grid[data-mobile-count="11"] > .card:nth-child(n+12) { display: none; }
    .ll-module .card-grid[data-mobile-count="12"] > .card:nth-child(n+13) { display: none; }
    .ll-module .card-grid[data-mobile-count="13"] > .card:nth-child(n+14) { display: none; }
    .ll-module .card-grid[data-mobile-count="14"] > .card:nth-child(n+15) { display: none; }
    .ll-module .card-grid[data-mobile-count="15"] > .card:nth-child(n+16) { display: none; }
    .ll-module .card-grid[data-mobile-count="16"] > .card:nth-child(n+17) { display: none; }
    .ll-module .card-grid[data-mobile-count="17"] > .card:nth-child(n+18) { display: none; }
    .ll-module .card-grid[data-mobile-count="18"] > .card:nth-child(n+19) { display: none; }
    .ll-module .card-grid[data-mobile-count="19"] > .card:nth-child(n+20) { display: none; }
    .ll-module .card-grid[data-mobile-count="20"] > .card:nth-child(n+21) { display: none; }
    .ll-module .card-grid[data-mobile-count="21"] > .card:nth-child(n+22) { display: none; }
    .ll-module .card-grid[data-mobile-count="22"] > .card:nth-child(n+23) { display: none; }
    .ll-module .card-grid[data-mobile-count="23"] > .card:nth-child(n+24) { display: none; }
    .ll-module .card-grid[data-mobile-count="24"] > .card:nth-child(n+25) { display: none; }
    .ll-module .card-grid[data-mobile-count="25"] > .card:nth-child(n+26) { display: none; }
    .ll-module .card-grid[data-mobile-count="26"] > .card:nth-child(n+27) { display: none; }
    .ll-module .card-grid[data-mobile-count="27"] > .card:nth-child(n+28) { display: none; }
    .ll-module .card-grid[data-mobile-count="28"] > .card:nth-child(n+29) { display: none; }
    .ll-module .card-grid[data-mobile-count="29"] > .card:nth-child(n+30) { display: none; }
    .ll-module .card-grid[data-mobile-count="30"] > .card:nth-child(n+31) { display: none; }
    .ll-module .card-grid[data-mobile-count="31"] > .card:nth-child(n+32) { display: none; }
    .ll-module .card-grid[data-mobile-count="32"] > .card:nth-child(n+33) { display: none; }
    .ll-module .card-grid[data-mobile-count="33"] > .card:nth-child(n+34) { display: none; }
    .ll-module .card-grid[data-mobile-count="34"] > .card:nth-child(n+35) { display: none; }
    .ll-module .card-grid[data-mobile-count="35"] > .card:nth-child(n+36) { display: none; }
    .ll-module .card-grid[data-mobile-count="36"] > .card:nth-child(n+37) { display: none; }
    .ll-module .card-grid[data-mobile-count="37"] > .card:nth-child(n+38) { display: none; }
    .ll-module .card-grid[data-mobile-count="38"] > .card:nth-child(n+39) { display: none; }
    .ll-module .card-grid[data-mobile-count="39"] > .card:nth-child(n+40) { display: none; }
    .ll-module .card-grid[data-mobile-count="40"] > .card:nth-child(n+41) { display: none; }
    .ll-module .card-grid[data-mobile-count="41"] > .card:nth-child(n+42) { display: none; }
    .ll-module .card-grid[data-mobile-count="42"] > .card:nth-child(n+43) { display: none; }
    .ll-module .card-grid[data-mobile-count="43"] > .card:nth-child(n+44) { display: none; }
    .ll-module .card-grid[data-mobile-count="44"] > .card:nth-child(n+45) { display: none; }
    .ll-module .card-grid[data-mobile-count="45"] > .card:nth-child(n+46) { display: none; }
    .ll-module .card-grid[data-mobile-count="46"] > .card:nth-child(n+47) { display: none; }
    .ll-module .card-grid[data-mobile-count="47"] > .card:nth-child(n+48) { display: none; }
    .ll-module .card-grid[data-mobile-count="48"] > .card:nth-child(n+49) { display: none; }
    .ll-module .card-grid[data-mobile-count="49"] > .card:nth-child(n+50) { display: none; }
    .ll-module .card-grid[data-mobile-count="50"] > .card:nth-child(n+51) { display: none; }
    .ll-module .card-grid[data-mobile-count="51"] > .card:nth-child(n+52) { display: none; }
    .ll-module .card-grid[data-mobile-count="52"] > .card:nth-child(n+53) { display: none; }
    .ll-module .card-grid[data-mobile-count="53"] > .card:nth-child(n+54) { display: none; }
    .ll-module .card-grid[data-mobile-count="54"] > .card:nth-child(n+55) { display: none; }
    .ll-module .card-grid[data-mobile-count="55"] > .card:nth-child(n+56) { display: none; }
    .ll-module .card-grid[data-mobile-count="56"] > .card:nth-child(n+57) { display: none; }
    .ll-module .card-grid[data-mobile-count="57"] > .card:nth-child(n+58) { display: none; }
    .ll-module .card-grid[data-mobile-count="58"] > .card:nth-child(n+59) { display: none; }
    .ll-module .card-grid[data-mobile-count="59"] > .card:nth-child(n+60) { display: none; }
    .ll-module .card-grid[data-mobile-count="60"] > .card:nth-child(n+61) { display: none; }
    .ll-module .card-grid[data-mobile-count="61"] > .card:nth-child(n+62) { display: none; }
    .ll-module .card-grid[data-mobile-count="62"] > .card:nth-child(n+63) { display: none; }
    .ll-module .card-grid[data-mobile-count="63"] > .card:nth-child(n+64) { display: none; }
    .ll-module .card-grid[data-mobile-count="64"] > .card:nth-child(n+65) { display: none; }
    .ll-module .card-grid[data-mobile-count="65"] > .card:nth-child(n+66) { display: none; }
    .ll-module .card-grid[data-mobile-count="66"] > .card:nth-child(n+67) { display: none; }
    .ll-module .card-grid[data-mobile-count="67"] > .card:nth-child(n+68) { display: none; }
    .ll-module .card-grid[data-mobile-count="68"] > .card:nth-child(n+69) { display: none; }
    .ll-module .card-grid[data-mobile-count="69"] > .card:nth-child(n+70) { display: none; }
    .ll-module .card-grid[data-mobile-count="70"] > .card:nth-child(n+71) { display: none; }
    .ll-module .card-grid[data-mobile-count="71"] > .card:nth-child(n+72) { display: none; }
    .ll-module .card-grid[data-mobile-count="72"] > .card:nth-child(n+73) { display: none; }
    .ll-module .card-grid[data-mobile-count="73"] > .card:nth-child(n+74) { display: none; }
    .ll-module .card-grid[data-mobile-count="74"] > .card:nth-child(n+75) { display: none; }
    .ll-module .card-grid[data-mobile-count="75"] > .card:nth-child(n+76) { display: none; }
    .ll-module .card-grid[data-mobile-count="76"] > .card:nth-child(n+77) { display: none; }
    .ll-module .card-grid[data-mobile-count="77"] > .card:nth-child(n+78) { display: none; }
    .ll-module .card-grid[data-mobile-count="78"] > .card:nth-child(n+79) { display: none; }
    .ll-module .card-grid[data-mobile-count="79"] > .card:nth-child(n+80) { display: none; }
    .ll-module .card-grid[data-mobile-count="80"] > .card:nth-child(n+81) { display: none; }
    .ll-module .card-grid[data-mobile-count="81"] > .card:nth-child(n+82) { display: none; }
    .ll-module .card-grid[data-mobile-count="82"] > .card:nth-child(n+83) { display: none; }
    .ll-module .card-grid[data-mobile-count="83"] > .card:nth-child(n+84) { display: none; }
    .ll-module .card-grid[data-mobile-count="84"] > .card:nth-child(n+85) { display: none; }
    .ll-module .card-grid[data-mobile-count="85"] > .card:nth-child(n+86) { display: none; }
    .ll-module .card-grid[data-mobile-count="86"] > .card:nth-child(n+87) { display: none; }
    .ll-module .card-grid[data-mobile-count="87"] > .card:nth-child(n+88) { display: none; }
    .ll-module .card-grid[data-mobile-count="88"] > .card:nth-child(n+89) { display: none; }
    .ll-module .card-grid[data-mobile-count="89"] > .card:nth-child(n+90) { display: none; }
    .ll-module .card-grid[data-mobile-count="90"] > .card:nth-child(n+91) { display: none; }
    .ll-module .card-grid[data-mobile-count="91"] > .card:nth-child(n+92) { display: none; }
    .ll-module .card-grid[data-mobile-count="92"] > .card:nth-child(n+93) { display: none; }
    .ll-module .card-grid[data-mobile-count="93"] > .card:nth-child(n+94) { display: none; }
    .ll-module .card-grid[data-mobile-count="94"] > .card:nth-child(n+95) { display: none; }
    .ll-module .card-grid[data-mobile-count="95"] > .card:nth-child(n+96) { display: none; }
    .ll-module .card-grid[data-mobile-count="96"] > .card:nth-child(n+97) { display: none; }
    .ll-module .card-grid[data-mobile-count="97"] > .card:nth-child(n+98) { display: none; }
    .ll-module .card-grid[data-mobile-count="98"] > .card:nth-child(n+99) { display: none; }
    .ll-module .card-grid[data-mobile-count="99"] > .card:nth-child(n+100) { display: none; }
    .ll-module .card-grid[data-mobile-count="100"] > .card:nth-child(n+101) { display: none; }
}


/* 4.0.5: iPad/Tablet fuellt den sichtbaren Bereich unter dem Header.
   Bild wird proportional zugeschnitten, ohne freien Rand. Smartphone und
   klassische Desktop-Ansicht behalten ihre bisherigen Abmessungen. */
@media (min-width: 768px) and (max-width: 1400px) and (any-pointer: coarse) {
    .ll-hero--news { margin-bottom: 0; }
    .ll-hero--news:is(.is-enhanced, .is-single) .ll-hero__viewport {
        width: 100%;
        aspect-ratio: auto;
        height: calc(100vh - var(--ll-hero-top, 96px));
        height: calc(100dvh - var(--ll-hero-top, 96px));
        min-height: 320px;
        max-height: none;
    }
    .ll-hero--news:is(.is-enhanced, .is-single) .ll-hero__slide {
        height: 100%;
        aspect-ratio: auto;
        align-items: flex-end;
    }
    .ll-hero--news .ll-hero__inner {
        margin-top: 0;
        margin-bottom: 76px;
    }
    .ll-hero--news .ll-hero__image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/* 4.0.6: Mobile Positionen am festen Bildfenster verankern.
   Prozenthoehen in einer automatisch hohen Flex-Spur koennen mit dem
   Text wachsen. Deshalb fuellt die Spur hier absolut das 9:16-Fenster.
   Textende 124px, Pfeiloberkante 100px ueber Unterkante: 24px Abstand. */
@media (max-width: 767px) {
    .ll-hero--news:is(.is-enhanced, .is-single) .ll-hero__viewport {
        position: relative;
        aspect-ratio: 9 / 16;
        height: auto;
    }
    .ll-hero--news:is(.is-enhanced, .is-single) .ll-hero__track {
        position: absolute;
        inset: 0;
        height: 100%;
    }
    .ll-hero--news:is(.is-enhanced, .is-single) .ll-hero__slide {
        height: 100%;
        min-height: 0;
        aspect-ratio: auto;
    }
    .ll-hero--news:is(.is-enhanced, .is-single) .ll-hero__inner {
        position: absolute;
        inset: auto 0 124px;
        margin: 0 auto;
    }
    .ll-hero--news .ll-hero__arrow {
        top: auto;
        bottom: 56px;
        height: 44px;
        transform: none;
    }
    .ll-hero--news .ll-hero__controls { bottom: 64px; }
}

/* Upcoming event counts in footer. */
.footer-event-counts, .lle-footer-counts {display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}
.footer-event-counts {padding:1.25rem 0}
.lle-footer-count {color:inherit;text-decoration:none}
.lle-footer-count strong {font-size:1.35em;font-weight:800}
.lle-footer-count:hover {text-decoration:underline}