/* =====================================================================
   TARNEO LAYOUT PLUGIN – Design-System v2
   Quelle: mockups/mockup-startseite-v2.html + mockup-eventseite-v2.html
   Marke: Creme, Rot #c62828, Gold #d9b77c, Source Sans 3 (liefert Astra).
   Teil 1: Utilities + Startseiten-Pattern (.tarneo-*)
   Teil 2: Restyling der Event-Einzelseite (.knandi-event-*)
   Teil 3: Default-Seitenlayout (statische Seiten)
   Teil 4: Event-Einzelseite – Lead-Elemente (Kaufkasten, Sticky-CTA,
           Newsletter, Zitat, FAQ, Share; docs/briefing-eventseite-leads.md)
===================================================================== */

:root {
	/* Brand is light-only: opt out of Chrome Android's Auto Dark Theme, which
	   would otherwise invert the page (backup to the wp_head meta tag). */
	color-scheme: only light;
	/* Base tone = Astra body background; cream is accent-only (design guide §2),
	   cream-2 only survives as subtle row-hover tint — never as section band. */
	--tarneo-base: #fbfbf8;
	--tarneo-cream: #f8f8e9;
	--tarneo-cream-2: #f2f1dd;
	--tarneo-paper: #fffdf6;
	--tarneo-ink: #26262a;
	--tarneo-body: #3b3b3e;
	--tarneo-muted: #7b7b6e;
	--tarneo-red: #c62828;
	--tarneo-red-2: #a81f1f;
	--tarneo-gold: #d9b77c;
	--tarneo-gold-2: #c49f57;
	--tarneo-line: #e4e1cc;
	--tarneo-w: 1120px;
	--tarneo-r: 10px;
	--tarneo-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	--tarneo-shadow-lg: 0 18px 40px -24px rgba(60, 50, 20, 0.45);
}

/* ---------- Global fixes ---------- */

/* Astra's customizer sets the plain-container page background to Global
   Color 5 (#151517, dark) on tablet/mobile (max-width 921px/544px) — pages
   like Start and Über Tarneo turned near-black on phones regardless of the
   OS color scheme. Match the desktop background until the customizer
   setting itself is corrected (higher specificity than Astra's rule, so
   load order doesn't matter). */
@media (max-width: 921px) {
	body.ast-plain-container {
		background-color: var(--tarneo-cream);
	}
}

/* ---------- Utilities ---------- */

.tarneo-wrap {
	max-width: var(--tarneo-w);
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
}

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

.tarneo-prose {
	max-width: 720px;
}

.tarneo-center .tarneo-prose,
.tarneo-prose.tarneo-mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.tarneo-kicker {
	display: block;
	color: var(--tarneo-red);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.tarneo-lead {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	color: var(--tarneo-ink);
}

.tarneo-muted {
	color: var(--tarneo-muted);
}

/* Überschrift mit kurzem Gold-Strich */
.tarneo-h-rule::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: var(--tarneo-gold);
	border-radius: 3px;
	margin: 18px 0 0;
}

.tarneo-center .tarneo-h-rule::after {
	margin-left: auto;
	margin-right: auto;
}

.tarneo-section-head {
	margin-bottom: 40px;
}

/* ---------- Sektions-Rhythmus ---------- */

.tarneo-section {
	padding: clamp(56px, 8vw, 104px) 0;
	margin-top: 0;
	margin-bottom: 0;
}

/* Kein zweiter Beige-Ton als Zwischenband (Design-Leitfaden §2):
   Sektionen liegen auf dem hellen Basis-Ton, Trennung über Weißraum
   und Kartenrahmen. Klasse bleibt fürs Pattern-Markup erhalten. */
.tarneo-band {
	background: transparent;
}

/* ---------- Hero – dunkles Marken-Band mit warmem Verlauf (Mockup v2) ---------- */

.tarneo-section.tarneo-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #26262a;
	color: #f4f2e7;
	/* flacher als der frühere Marken-Hero — der Hero ist jetzt das Konzert */
	padding: clamp(48px, 7vh, 84px) 0 clamp(44px, 6vh, 76px);
}

.tarneo-section.tarneo-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(120% 95% at 80% 4%, rgba(198, 40, 40, 0.34), transparent 58%),
		radial-gradient(95% 85% at 6% 104%, rgba(217, 183, 124, 0.24), transparent 60%),
		linear-gradient(158deg, #2d2c30 0%, #211f22 55%, #2b231a 100%);
}

/* dezente Notenlinien-Textur */
.tarneo-section.tarneo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.5;
	pointer-events: none;
	background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255, 255, 255, 0.03) 38px 39px);
}

/* OPTIONAL Hero-Foto: background-image auf .tarneo-hero + Overlay via ::before verstärken */

.tarneo-hero .tarneo-wrap {
	position: relative;
	z-index: 1;
}

.tarneo-hero .tarneo-kicker {
	color: var(--tarneo-gold);
}

.tarneo-hero h1 {
	color: #fbf9ef;
	font-size: clamp(2.7rem, 6vw, 4.7rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	max-width: 17ch;
	margin: 0 auto 0.35em;
}

.tarneo-hero .tarneo-lead {
	color: #e8e5d6;
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}

.tarneo-hero .tarneo-btn-ghost .wp-block-button__link {
	color: #f4f2e7;
	border-color: rgba(255, 255, 255, 0.34);
}

.tarneo-hero .tarneo-btn-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

.tarneo-scroll {
	display: inline-block;
	margin-top: 34px;
	color: rgba(244, 242, 231, 0.6);
	font-size: 0.8rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ---------- Konzert-Hero (Block-Variante "hero" im dunklen Hero-Band) ----------
   Pendant zu .hero-concert/.hero-dots im Mockup: der Hero IST das nächste
   Konzert; Track/Dots/JS teilt sich die Variante mit dem Highlight-Slider. */

/* Luft für den Karten-Schatten des Plakats (Track schneidet overflow-y ab) */
.tarneo-events--hero .tarneo-events__track {
	border-radius: 0;
	padding: 8px 0 30px;
}

.tarneo-hero-slide {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: clamp(28px, 5vw, 60px);
	align-items: center;
	text-align: left;
}

.tarneo-hero-slide--no-media {
	grid-template-columns: 1fr;
}

a.tarneo-hero-slide__poster {
	display: block;
	background: #fff;
	border-radius: var(--tarneo-r);
	padding: 14px;
	box-shadow: var(--tarneo-shadow-lg);
	transition: transform 0.15s;
}

a.tarneo-hero-slide__poster:hover {
	transform: translateY(-3px);
}

.tarneo-hero-slide__poster img {
	width: 100%;
	height: auto;
	max-height: min(62vh, 540px);
	object-fit: contain;
	display: block;
	border-radius: 4px;
}

.tarneo-hero-slide .tarneo-hero-slide__title {
	color: #fbf9ef;
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	max-width: none;
	margin: 0 0 0.12em;
	text-align: left;
}

.tarneo-hero-slide .tarneo-hero-slide__title a {
	color: inherit;
	text-decoration: none;
}

.tarneo-hero-slide__meta {
	color: #e8e5d6;
	font-size: 1.1rem;
	margin: 0 0 0.4em;
}

.tarneo-hero-slide__price {
	color: var(--tarneo-gold);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 0 1.4em;
}

.tarneo-hero-slide__price span {
	color: #cbc7b4;
	font-weight: 400;
	font-size: 0.9em;
}

/* Button-Zeile ist im Block ein schlichtes div (kein core/buttons-Block) */
.tarneo-events--hero .tarneo-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 26px;
	justify-content: flex-start;
}

/* Ghost-Button hell auf dunklem Hero-Grund */
.tarneo-hero a.tarneo-btn-outline {
	color: #f4f2e7;
	border-color: rgba(255, 255, 255, 0.34);
}

.tarneo-hero a.tarneo-btn-outline:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
	color: #fff;
}

/* Dots auf Dunkel: Weiß-transparent, aktiv = goldenes Pill */
.tarneo-events--hero .tarneo-events__nav {
	margin-top: 0;
}

.tarneo-events--hero .tarneo-events__dot {
	background: rgba(255, 255, 255, 0.25);
}

.tarneo-events--hero .tarneo-events__dot.is-active {
	background: var(--tarneo-gold);
}

/* Fallback ohne kommendes Konzert: generischer Marken-Hero, zentriert */
.tarneo-events--hero.tarneo-events--empty .tarneo-btn-row {
	justify-content: center;
}

@media (max-width: 820px) {
	.tarneo-hero-slide {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.tarneo-hero-slide .tarneo-hero-slide__title {
		text-align: center;
	}

	a.tarneo-hero-slide__poster {
		max-width: 360px;
		margin: 0 auto;
	}

	.tarneo-events--hero .tarneo-btn-row {
		justify-content: center;
	}
}

/* ---------- Buttons (core/button mit className) ---------- */

.tarneo-btn-row {
	gap: 14px;
	margin-top: 26px;
}

.tarneo-center .tarneo-btn-row {
	justify-content: center;
}

.tarneo-btn .wp-block-button__link,
.tarneo-btn-ghost .wp-block-button__link,
a.tarneo-btn-solid,
a.tarneo-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.tarneo-btn .wp-block-button__link,
a.tarneo-btn-solid {
	background: var(--tarneo-gold);
	color: #221c0c;
	padding: 13px 26px;
	border: 1px solid var(--tarneo-gold);
}

.tarneo-btn .wp-block-button__link:hover,
a.tarneo-btn-solid:hover {
	background: var(--tarneo-gold-2);
	color: #1c1608;
	transform: translateY(-1px);
	box-shadow: var(--tarneo-shadow-lg);
}

.tarneo-btn-ghost .wp-block-button__link,
a.tarneo-btn-outline {
	background: transparent;
	color: var(--tarneo-red);
	padding: 13px 22px;
	border: 1px solid #e0c9c9;
}

.tarneo-btn-ghost .wp-block-button__link:hover,
a.tarneo-btn-outline:hover {
	background: #fbecec;
	border-color: var(--tarneo-red);
	color: var(--tarneo-red-2);
}

/* ---------- Event-Bausteine (Datechip, Venue) ---------- */

.tarneo-datechip {
	display: inline-block;
	background: #fbecec;
	color: var(--tarneo-red);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.tarneo-venue {
	color: var(--tarneo-muted);
	font-style: italic;
	margin-bottom: 1em;
}

/* ---------- Drei Säulen ---------- */

.tarneo-pillars {
	gap: 26px;
}

.tarneo-pcard {
	background: var(--tarneo-paper);
	border: 1px solid var(--tarneo-line);
	border-radius: var(--tarneo-r);
	padding: 30px 28px;
	box-shadow: var(--tarneo-shadow);
	transition: transform 0.15s, box-shadow 0.2s;
	height: 100%;
}

.tarneo-pcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--tarneo-shadow-lg);
}

/* Kurzer Gold-Strich statt Ordnungsziffer (Mockup-Stand) */
.tarneo-pcard::before {
	content: "";
	display: block;
	width: 30px;
	height: 3px;
	background: var(--tarneo-gold);
	border-radius: 3px;
	margin-bottom: 16px;
}

.tarneo-pcard h3 {
	margin: 0 0 0.4em;
}

.tarneo-pcard p:last-child {
	margin-bottom: 0;
	font-size: 1rem;
}

/* ---------- Statement-Band ---------- */

.tarneo-statement {
	background: var(--tarneo-ink);
	color: #f4f3e6;
	text-align: center;
}

.tarneo-statement .tarneo-kicker {
	color: var(--tarneo-gold);
}

.tarneo-statement p:not(.tarneo-kicker) {
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-style: italic;
	font-weight: 600;
	color: #f6f5ea;
	margin: 0;
	letter-spacing: -0.01em;
}

/* ---------- Highlight-Slider (Block tarneo/naechste-events, Mockup v2) ---------- */

.tarneo-events__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: 26px;
	border-radius: var(--tarneo-r);
}

.tarneo-events__track::-webkit-scrollbar {
	display: none;
}

.tarneo-events__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
}

/* Eine große, komplett klickbare Slide: Plakat links, Infos rechts */
a.tarneo-hl {
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	background: var(--tarneo-paper);
	border: 1px solid var(--tarneo-line);
	border-radius: var(--tarneo-r);
	overflow: hidden;
	box-shadow: var(--tarneo-shadow);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.2s;
}

a.tarneo-hl:hover {
	box-shadow: var(--tarneo-shadow-lg);
}

a.tarneo-hl:hover .tarneo-hl__go {
	background: var(--tarneo-gold-2);
}

/* Astra unterstreicht Content-Links – in Slide und Listen-Zeile hart abschalten */
body a.tarneo-hl,
body a.tarneo-hl:hover,
body a.tarneo-hl *,
body a.tarneo-eventlist__item,
body a.tarneo-eventlist__item * {
	text-decoration: none !important;
}

.tarneo-hl--no-media {
	grid-template-columns: 1fr;
}

/* Plakat unbeschnitten auf Weiß, mittig mit Luft (kein cover-Crop) */
.tarneo-hl__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: #fff;
}

.tarneo-hl__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.tarneo-hl__body {
	padding: clamp(34px, 4.4vw, 64px);
	align-self: center;
}

.tarneo-hl__title {
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	margin: 0 0 0.18em;
	color: var(--tarneo-ink);
}

.tarneo-hl__teaser {
	margin: 0 0 1.1em;
}

.tarneo-hl__price {
	color: var(--tarneo-red);
	font-weight: 700;
	margin: 0 0 1.3em;
}

.tarneo-hl__price span {
	color: var(--tarneo-muted);
	font-weight: 400;
	font-size: 0.9em;
}

.tarneo-hl__go {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--tarneo-gold);
	color: #221c0c;
	padding: 13px 26px;
	border-radius: 8px;
	font-weight: 700;
	transition: background 0.18s;
}

/* Navigation: nur Dots, aktiv = rotes Pill */
.tarneo-events__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 22px;
}

.tarneo-events__dots {
	display: flex;
	gap: 9px;
}

.tarneo-events__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tarneo-line);
	cursor: pointer;
	transition: background 0.2s, width 0.2s, border-radius 0.2s;
}

.tarneo-events__dot.is-active {
	background: var(--tarneo-red);
	width: 28px;
	border-radius: 5px;
}

@media (max-width: 820px) {
	a.tarneo-hl {
		grid-template-columns: 1fr;
	}
}

/* ---------- Vorverkauf-Liste (Block tarneo/vorverkauf-liste, „mini-list" im Mockup) ---------- */

/* Intro-Absatz über der Liste („Hinter den Kulissen dabei") */
.tarneo-mini-intro {
	text-align: center;
	color: var(--tarneo-muted);
	font-size: 1rem;
	max-width: 640px;
	margin: -16px auto 24px;
}

.tarneo-eventlist {
	max-width: 820px;
	margin-inline: auto;
}

.tarneo-eventlist__items {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tarneo-eventlist__item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 16px;
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: background 0.15s;
}

a.tarneo-eventlist__item:hover {
	background: var(--tarneo-cream-2);
}

.tarneo-eventlist__date {
	flex: 0 0 118px;
	color: var(--tarneo-red);
	font-weight: 700;
	font-size: 0.85rem;
}

.tarneo-eventlist__title {
	flex: 1;
	font-weight: 600;
	color: var(--tarneo-ink);
}

.tarneo-eventlist__title small {
	display: block;
	color: var(--tarneo-muted);
	font-weight: 400;
	font-style: italic;
	font-size: 0.85rem;
}

.tarneo-eventlist__ext {
	color: var(--tarneo-muted);
	font-size: 0.9rem;
	white-space: nowrap;
}

.tarneo-eventlist--empty {
	text-align: center;
}

/* Kleinere Sektions-Überschrift („Auch interessant") */
.tarneo-h-small {
	font-size: 1.55rem;
}

@media (max-width: 640px) {
	.tarneo-eventlist__item {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.tarneo-eventlist__date {
		flex-basis: 100%;
	}
}

/* =====================================================================
   Teil 2: Event-Einzelseite – Restyling des Event-Plugin-Markups
   (Struktur liefert das Event-Plugin, hier nur Optik nach Mockup v2.)
===================================================================== */

/* Grundfläche hell statt Creme: Astra legt im Separate-Container seine
   Content-Hintergrundfarbe (#f8f8e9) auf den Artikel — als große Fläche
   wirkt das wie eine beige Wand. Transparent → heller Body-Hintergrund;
   Creme bleibt Akzent-Band, Karten (Keyfacts/Pretix) heben sich ab. */
.ast-separate-container .knandi-event-single.ast-article-single:not(.ast-related-post) {
	background-color: transparent;
}

/* Hero (Mockup v3): Plakat links (bis 440px), rechts Titel + Kaufkasten */
.knandi-event-single .knandi-event-hero {
	display: grid;
	grid-template-columns: minmax(300px, 440px) 1fr;
	gap: clamp(28px, 4vw, 44px);
	align-items: start;
	padding-top: 22px;
}

.knandi-event-single .knandi-event-hero__media {
	order: -1;
	margin: 0;
}

.knandi-event-single .knandi-event-hero__media img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--tarneo-line);
	border-radius: var(--tarneo-r);
	background: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 820px) {
	.knandi-event-single .knandi-event-hero {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.knandi-event-single .knandi-event-hero__media {
		max-width: 360px;
		margin: 0 auto;
	}
}

/* Keyfacts = oberer Teil des Kaufkastens (Mockup v3 .factbox/.facts):
   weiße Karte mit Gold-Kante, Zeilen als Label/Wert-Paare. Datum/Zeit/Ort
   tragen im Plugin-Markup kein Label → CSS-Label via ::before; Mitwirkende
   und Preis bringen ihr <strong>-Label mit. Folgt der Kasten-Unterteil des
   Layout-Plugins (.tarneo-factbox, Hook knandi_event_after_meta), werden
   Preis- und Mitwirkenden-Zeilen dort neu gerendert (Preis „ab X €" + Cast-
   Zeile) und hier ausgeblendet; die Karte schließt nahtlos an. */
.knandi-event-single .knandi-event-keyfacts {
	list-style: none;
	margin: 0 0 24px;
	padding: 6px 26px;
	background: #fff;
	border: 1px solid var(--tarneo-line);
	border-top: 4px solid var(--tarneo-gold);
	border-radius: var(--tarneo-r);
}

.knandi-event-single .knandi-event-keyfacts:has(~ .tarneo-factbox) {
	margin-bottom: 0;
	border-bottom: 0;
	border-radius: var(--tarneo-r) var(--tarneo-r) 0 0;
}

.knandi-event-single .knandi-event-keyfacts:has(~ .tarneo-factbox) .knandi-event-keyfacts__performer,
.knandi-event-single .knandi-event-keyfacts:has(~ .tarneo-factbox) .knandi-event-keyfacts__price,
.knandi-event-single .knandi-event-hero__info:has(.tarneo-factbox) > .knandi-event-keyfacts__price {
	display: none;
}

/* Plugin-Ticket-Button (Events ohne Pretix-Widget) bleibt optisch im Kasten */
.knandi-event-single .knandi-event-keyfacts:has(~ .tarneo-factbox) ~ .knandi-event-tickets {
	margin: 0;
	padding: 12px 26px 0;
	background: #fff;
	border: 1px solid var(--tarneo-line);
	border-top: 0;
	border-bottom: 0;
}

.knandi-event-single .knandi-event-keyfacts > p {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--tarneo-line);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--tarneo-ink);
}

.knandi-event-single .knandi-event-keyfacts > p:last-child {
	border-bottom: 0;
}

.knandi-event-single .knandi-event-keyfacts:has(~ .tarneo-factbox) > p:last-child {
	border-bottom: 1px solid var(--tarneo-line);
}

.knandi-event-single .knandi-event-keyfacts > p::before,
.knandi-event-single .knandi-event-keyfacts > p > strong,
.knandi-event-single .tarneo-factbox__price > strong {
	flex: 0 0 96px;
	color: var(--tarneo-muted);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Hierarchie: Datum/Beginn groß, Ort mittel (Mockup .big/.place) */
.knandi-event-single .knandi-event-keyfacts__date,
.knandi-event-single .knandi-event-keyfacts__time {
	font-size: 1.6rem;
	line-height: 1.2;
}

.knandi-event-single .knandi-event-keyfacts__venue {
	font-size: 1.25rem;
}

/* Site ist einsprachig deutsch — Labels analog zu den Plugin-Labels mit
   Doppelpunkt (strong endet auf ":"), damit alle Zeilen gleich aussehen. */
.knandi-event-single .knandi-event-keyfacts__date::before {
	content: "Datum:";
}

.knandi-event-single .knandi-event-keyfacts__time::before {
	content: "Beginn:";
}

.knandi-event-single .knandi-event-keyfacts__venue::before {
	content: "Ort:";
}

/* Links in den Werten (Spielstätte, Mitwirkende): Textfarbe mit gepunkteter
   Gold-Unterlinie — nie Rot als Grundfarbe (Briefing Kaufkasten) */
.knandi-event-single .knandi-event-keyfacts a,
.knandi-event-single .tarneo-factbox__cast a {
	color: var(--tarneo-ink);
	text-decoration: none;
	border-bottom: 1px dotted var(--tarneo-gold);
}

.knandi-event-single .knandi-event-keyfacts a:hover,
.knandi-event-single .knandi-event-keyfacts a:focus,
.knandi-event-single .tarneo-factbox__cast a:hover,
.knandi-event-single .tarneo-factbox__cast a:focus {
	color: var(--tarneo-red);
	border-bottom-color: var(--tarneo-red);
}

/* Beschreibung als Prose-Spalte */
.knandi-event-single .knandi-event-description {
	max-width: 720px;
}

/* Ticket-Hinweis (Links zu Shops) */
.knandi-event-single .knandi-event-ticket-info {
	color: var(--tarneo-muted);
	font-size: 0.95rem;
}

/* Preiszeile über dem Pretix-Widget (Spanne aus der Pretix-API) */
.knandi-event-single .knandi-event-ticket-price {
	color: var(--tarneo-ink);
	font-weight: 600;
	font-size: 1.05rem;
	margin: 0 0 0.9em;
}

/* Pretix-Box: Karte mit Gold-Kante */
.knandi-event-single .knandi-event-pretix {
	background: var(--tarneo-paper);
	border: 1px solid var(--tarneo-line);
	border-top: 4px solid var(--tarneo-gold);
	border-radius: var(--tarneo-r);
	padding: clamp(24px, 3.5vw, 40px);
	box-shadow: var(--tarneo-shadow-lg);
	margin: clamp(28px, 4vw, 48px) 0;
}

.knandi-event-single .knandi-event-pretix > h2 {
	margin-top: 0;
}

/* Share-Buttons als Pills */
.knandi-event-single .knandi-event-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.knandi-event-single .knandi-event-share__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--tarneo-paper);
	border: 1px solid var(--tarneo-line);
	border-radius: 8px;
	padding: 9px 16px;
	color: var(--tarneo-ink);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.16s, color 0.16s;
}

.knandi-event-single .knandi-event-share__button:hover {
	border-color: var(--tarneo-red);
	color: var(--tarneo-red);
}

.knandi-event-single .knandi-event-share__button svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
}

/* Karte */
.knandi-event-single .knandi-map-wrap,
.knandi-event-single .knandi-map {
	border-radius: var(--tarneo-r);
	overflow: hidden;
}

.knandi-event-single .knandi-map-wrap {
	border: 1px solid var(--tarneo-line);
}

/* Sektions-Abstände innerhalb der Event-Seite */
.knandi-event-single .knandi-event-pretix,
.knandi-event-single .knandi-event-share,
.knandi-event-single .knandi-event-map,
.knandi-event-single .knandi-event-organizer {
	margin-top: clamp(28px, 4vw, 48px);
}

/* Veranstalter-Zeile am Seitenende */
.knandi-event-single .knandi-event-organizer {
	padding-top: 18px;
	border-top: 1px solid var(--tarneo-line);
	font-size: 0.95rem;
	color: var(--tarneo-body);
}

.knandi-event-single .knandi-event-organizer a {
	color: var(--tarneo-red);
	text-decoration: none;
}

.knandi-event-single .knandi-event-organizer a:hover {
	color: var(--tarneo-red-2);
	text-decoration: underline;
}

/* =====================================================================
   Teil 3: Default-Seitenlayout — Auffangnetz für Standard-Seiten
   (alle statischen Seiten außer Front Page; Events rendert das
   Event-Plugin, die Startseite ihr Pattern. Genau ein H1 = Astra-
   Seitentitel, Prose ~720px, v2-Typo — siehe includes/default-layout.php)
===================================================================== */

/* Seitentitel im v2-Look: Tinte + kurzer Gold-Strich */
body.page:not(.home) .site-main .entry-header {
	max-width: 720px;
	margin: clamp(20px, 4vw, 44px) auto clamp(18px, 3vw, 30px);
}

body.page:not(.home) .entry-title {
	color: var(--tarneo-ink);
	font-size: clamp(2.2rem, 4vw, 3.2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: 0;
}

body.page:not(.home) .entry-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: var(--tarneo-gold);
	border-radius: 3px;
	margin-top: 18px;
}

/* Prose-Breite: lesbare Zeilen, volle Breite nur für align(full|wide)-Blöcke */
body.page:not(.home) .entry-content > :not(.alignfull):not(.alignwide) {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* v2-Typo im Inhalt: Überschriften in Tinte, Links rot ohne Unterstrich */
body.page:not(.home) .entry-content :is(h2, h3, h4) {
	color: var(--tarneo-ink);
	letter-spacing: -0.01em;
}

body.page:not(.home) .entry-content a:not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--tarneo-red);
	text-decoration: none;
}

body.page:not(.home) .entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover {
	color: var(--tarneo-red-2);
}

/* =====================================================================
   Teil 4: Event-Einzelseite – Lead-Elemente (Mockup docs/mockup-eventseite-v3.html)
   Markup: includes/event-page.php (Kaufkasten-Unterteil, Sticky-CTA, FAQ), Patterns
   patterns/event-*.php (Button, Zitat, Newsletter), Event-Plugin
   (Einlöse-Zeile unter dem Widget, Ticket-Infos).
   Hinweis: Die frühere Teil-4-Neutralisierung der Dark-Theme-Altlasten ist
   entfallen – Quelle im Customizer bereinigt (docs/AUFTRAG-kontrast-darkmode.md).
===================================================================== */

/* ---------- Kaufkasten, unterer Teil (Mockup v3 .factbox: Badge, Preis,
   Button, Unterzeile, Cast) — schließt nahtlos an .knandi-event-keyfacts an */

.knandi-event-single .tarneo-factbox {
	margin: 0 0 26px;
	padding: 0 26px 22px;
	background: #fff;
	border: 1px solid var(--tarneo-line);
	border-top: 0;
	border-radius: 0 0 var(--tarneo-r) var(--tarneo-r);
}

.knandi-event-single .tarneo-factbox__badge {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--tarneo-gold);
	color: var(--tarneo-ink);
	font-size: 0.86rem;
	font-weight: 600;
	padding: 3px 12px;
	border-radius: 999px;
	margin: 12px 0 2px;
}

.knandi-event-single .tarneo-factbox__price {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--tarneo-line);
	font-weight: 600;
	font-size: 1.35rem;
	line-height: 1.3;
	color: var(--tarneo-ink);
}

.knandi-event-single .tarneo-factbox__price small {
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--tarneo-muted);
	margin-left: 6px;
	white-space: nowrap;
}

.knandi-event-single a.tarneo-factbox__button {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	margin: 18px 0 8px;
	padding: 15px 20px;
	background: var(--tarneo-gold);
	color: #221c0c;
	border: 1px solid var(--tarneo-gold);
	border-radius: 8px;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.knandi-event-single a.tarneo-factbox__button:hover,
.knandi-event-single a.tarneo-factbox__button:focus {
	background: var(--tarneo-gold-2);
	color: #1c1608;
	transform: translateY(-1px);
	box-shadow: var(--tarneo-shadow-lg);
}

.knandi-event-single .tarneo-factbox__note {
	display: block;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--tarneo-muted);
}

.knandi-event-single .tarneo-factbox__note a {
	color: var(--tarneo-ink);
	text-decoration: none;
	border-bottom: 1px dotted var(--tarneo-gold);
}

.knandi-event-single .tarneo-factbox__note a:hover,
.knandi-event-single .tarneo-factbox__note a:focus {
	color: var(--tarneo-red);
	border-bottom-color: var(--tarneo-red);
}

.knandi-event-single .tarneo-factbox__cast {
	margin: 16px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--tarneo-line);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--tarneo-muted);
}

.knandi-event-single .tarneo-factbox__cast strong {
	color: var(--tarneo-ink);
	font-weight: 600;
}

@media (max-width: 760px) {
	.knandi-event-single .knandi-event-keyfacts {
		padding-left: 18px;
		padding-right: 18px;
	}

	.knandi-event-single .tarneo-factbox {
		padding: 0 18px 20px;
	}

	.knandi-event-single .knandi-event-keyfacts__date,
	.knandi-event-single .knandi-event-keyfacts__time {
		font-size: 1.4rem;
	}
}

/* Zweiter CTA am Ende des Programmtexts (Pattern „Ticket-Button") */
.knandi-event-single .tarneo-event-cta-row {
	margin-top: 8px;
	margin-bottom: 1.5em;
}

/* ---------- Ticket-Sektion: Einlöse-Zeile (Code) + Ticket-Infos (.mt-line) ---------- */

.knandi-event-single .knandi-event-pretix__voucher,
.knandi-event-single .knandi-event-pretix__footer {
	color: var(--tarneo-muted);
	font-size: 0.95rem;
	margin: 14px 0 0;
}

.knandi-event-single .knandi-event-pretix__footer p {
	margin: 0;
}

.knandi-event-single .knandi-event-pretix__voucher + .knandi-event-pretix__footer {
	margin-top: 4px;
}

.knandi-event-single .knandi-event-pretix__voucher a,
.knandi-event-single .knandi-event-pretix__footer a {
	color: var(--tarneo-red);
	text-decoration: none;
}

.knandi-event-single .knandi-event-pretix__voucher a:hover,
.knandi-event-single .knandi-event-pretix__footer a:hover {
	color: var(--tarneo-red-2);
	text-decoration: underline;
}

/* pretix-Widget im Ticket-Kasten: Weißraum weg (Widget-CSS setzt
   min-height 208px, Innenrahmen, Padding), Sitzplan-/Shop-Button in Gold
   wie der Kaufkasten-Button. Spezifität bewusst über .pretix-widget button. */
.knandi-event-single .knandi-event-pretix .pretix-widget {
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.knandi-event-single .knandi-event-pretix .pretix-widget .pretix-widget-seating-link-wrapper {
	padding: 0;
	margin: 6px 0 0;
}

.knandi-event-single .knandi-event-pretix .pretix-widget button.pretix-widget-seating-link,
.knandi-event-single .knandi-event-pretix .pretix-widget a.pretix-widget-button,
.knandi-event-single .knandi-event-pretix .pretix-widget button.pretix-widget-button {
	background: var(--tarneo-gold);
	color: #221c0c;
	border: 1px solid var(--tarneo-gold);
	border-radius: 8px;
	font-family: inherit;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.2;
	padding: 14px 20px;
	transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.knandi-event-single .knandi-event-pretix .pretix-widget button.pretix-widget-seating-link:hover,
.knandi-event-single .knandi-event-pretix .pretix-widget button.pretix-widget-seating-link:focus,
.knandi-event-single .knandi-event-pretix .pretix-widget a.pretix-widget-button:hover,
.knandi-event-single .knandi-event-pretix .pretix-widget a.pretix-widget-button:focus,
.knandi-event-single .knandi-event-pretix .pretix-widget button.pretix-widget-button:hover,
.knandi-event-single .knandi-event-pretix .pretix-widget button.pretix-widget-button:focus {
	background: var(--tarneo-gold-2);
	border-color: var(--tarneo-gold-2);
	color: #1c1608;
	transform: translateY(-1px);
	box-shadow: var(--tarneo-shadow-lg);
}

/* ---------- Besucherzitat (Block-Style „Tarneo Zitat", .quote) ---------- */

.wp-block-quote.is-style-tarneo-quote {
	border: 0;
	border-left: 4px solid var(--tarneo-gold);
	padding: 6px 22px;
	margin: clamp(24px, 3vw, 36px) 0;
	font-style: italic;
	color: var(--tarneo-ink);
	font-size: 1.15rem;
	line-height: 1.55;
}

.wp-block-quote.is-style-tarneo-quote p {
	margin: 0 0 0.4em;
}

.wp-block-quote.is-style-tarneo-quote cite {
	display: block;
	font-style: normal;
	font-size: 0.9rem;
	color: var(--tarneo-muted);
	margin-top: 6px;
}

/* ---------- Newsletter-Block (Pattern, .newsletter – dunkel) ---------- */

.tarneo-newsletter {
	background: #2b2b2e;
	color: #f4f1e4;
	border-radius: var(--tarneo-r);
	padding: clamp(24px, 3.5vw, 34px) clamp(22px, 3vw, 30px);
	margin: clamp(24px, 3vw, 40px) 0;
}

.tarneo-newsletter h2,
.tarneo-newsletter h3 {
	color: #fff;
	margin: 0 0 0.4em;
}

.tarneo-newsletter p {
	margin: 0 0 16px;
	color: #f4f1e4;
}

.tarneo-newsletter a {
	color: var(--tarneo-gold);
}

.tarneo-newsletter .tarneo-newsletter__hint {
	margin: 12px 0 0;
	font-size: 0.85rem;
	color: #c9c5b3;
}

/* WPForms im dunklen Block: Feld + goldener Button in einer Zeile */
.tarneo-newsletter .wpforms-container {
	margin: 0;
}

.tarneo-newsletter .wpforms-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.tarneo-newsletter .wpforms-form .wpforms-field-container {
	flex: 1 1 260px;
}

.tarneo-newsletter .wpforms-form .wpforms-field {
	padding: 0;
}

.tarneo-newsletter .wpforms-form .wpforms-field-label {
	color: #f4f1e4;
	font-size: 0.9rem;
	font-weight: 600;
}

.tarneo-newsletter .wpforms-form input[type="email"],
.tarneo-newsletter .wpforms-form input[type="text"] {
	width: 100%;
	max-width: none;
	font: inherit;
	font-size: 1rem;
	padding: 11px 14px;
	border: 1px solid #8a8a80;
	border-radius: 8px;
	background: #fff;
	color: var(--tarneo-ink);
}

.tarneo-newsletter .wpforms-form .wpforms-submit-container {
	padding: 0;
	flex: 0 0 auto;
}

.tarneo-newsletter .wpforms-form button[type="submit"],
.tarneo-newsletter .wpforms-form .wpforms-submit {
	background: var(--tarneo-gold);
	color: #221c0c;
	border: 1px solid var(--tarneo-gold);
	border-radius: 8px;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	padding: 12px 24px;
	cursor: pointer;
	transition: background 0.18s ease, transform 0.12s ease;
}

.tarneo-newsletter .wpforms-form button[type="submit"]:hover,
.tarneo-newsletter .wpforms-form .wpforms-submit:hover {
	background: var(--tarneo-gold-2);
	transform: translateY(-1px);
}

.tarneo-newsletter .wpforms-form .wpforms-field-description,
.tarneo-newsletter .wpforms-form .wpforms-field-sublabel {
	color: #c9c5b3;
}

.tarneo-newsletter .wpforms-form .wpforms-field-gdpr-checkbox label,
.tarneo-newsletter .wpforms-form .wpforms-field-checkbox label {
	color: #f4f1e4;
}

.tarneo-newsletter .wpforms-confirmation-container-full {
	background: transparent;
	border-color: var(--tarneo-gold);
	color: #f4f1e4;
}

/* ---------- FAQ „Gut zu wissen" (.faq): Template-Sektion .tarneo-event-faq
   (Meta-Repeater, Hook knandi_event_after_share) — und wp:details im Inhalt */

.knandi-event-single .tarneo-event-faq {
	max-width: 860px;
	margin-top: clamp(28px, 4vw, 48px);
}

.knandi-event-single .tarneo-event-faq > h2 {
	margin-bottom: 8px;
}

.knandi-event-single .tarneo-event-faq .wp-block-details,
.knandi-event-single .knandi-event-description .wp-block-details {
	border-bottom: 1px solid var(--tarneo-line);
	padding: 12px 0;
	margin: 0;
}

.knandi-event-single .tarneo-event-faq .wp-block-details > summary,
.knandi-event-single .knandi-event-description .wp-block-details > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--tarneo-ink);
	font-size: 1.05rem;
	line-height: 1.4;
}

.knandi-event-single .tarneo-event-faq .wp-block-details > summary:hover,
.knandi-event-single .knandi-event-description .wp-block-details > summary:hover {
	color: var(--tarneo-red);
}

.knandi-event-single .tarneo-event-faq .wp-block-details > :not(summary),
.knandi-event-single .knandi-event-description .wp-block-details > :not(summary) {
	margin: 10px 0 0;
}

.knandi-event-single .tarneo-event-faq__answer > p:last-child {
	margin-bottom: 0;
}

.knandi-event-single .tarneo-event-faq a {
	color: var(--tarneo-red);
	text-decoration: none;
}

.knandi-event-single .tarneo-event-faq a:hover {
	color: var(--tarneo-red-2);
	text-decoration: underline;
}

/* ---------- Share-Sektion: Einleitung, Zusatzzeile, „Link kopieren" leise ---------- */

.knandi-event-single .knandi-event-share__lead {
	margin: 0 0 14px;
	font-size: 1.05rem;
	color: var(--tarneo-body);
}

.knandi-event-single .knandi-event-share__sub {
	margin: 14px 0 0;
	font-size: 0.95rem;
	color: var(--tarneo-muted);
}

.knandi-event-single .knandi-event-share__sub a {
	color: var(--tarneo-red);
	text-decoration: none;
}

.knandi-event-single .knandi-event-share__sub a:hover {
	color: var(--tarneo-red-2);
	text-decoration: underline;
}

.knandi-event-single .knandi-event-share__button--copy {
	color: var(--tarneo-muted);
	font-weight: 400;
}

/* ---------- Sticky-CTA mobil (.sticky-cta, < 760px) ---------- */

.tarneo-sticky-cta {
	display: none;
}

@media (max-width: 760px) {
	.tarneo-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		background: var(--tarneo-gold);
		color: #221c0c;
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.15);
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.tarneo-sticky-cta.is-hidden {
		transform: translateY(110%);
		opacity: 0;
		pointer-events: none;
	}

	.tarneo-sticky-cta__text {
		font-weight: 600;
		font-size: 0.95rem;
		line-height: 1.3;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.tarneo-sticky-cta__button,
	.tarneo-sticky-cta__button:hover,
	.tarneo-sticky-cta__button:focus {
		flex: 0 0 auto;
		background: var(--tarneo-ink);
		color: #fff;
		padding: 10px 18px;
		border-radius: 8px;
		font-weight: 700;
		font-size: 0.95rem;
		text-decoration: none;
	}

	body.tarneo-has-sticky-cta {
		padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
	}
}