/* Theaterverein Baar-Ebenhausen – Komponenten, die theme.json nicht abdeckt. */

:root {
	--tv-radius: 14px;
	--tv-schatten: 0 1px 2px rgb(14 26 63 / 6%), 0 8px 24px rgb(14 26 63 / 8%);
	--tv-rauten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Crect width='22' height='12' fill='%23fff'/%3E%3Cpath d='M11 0 22 6 11 12 0 6Z' fill='%235b9bd5'/%3E%3C/svg%3E");
	--tv-buehne-hintergrund: linear-gradient(180deg, #13245a 0%, var(--wp--preset--color--nacht) 100%);
	--tv-rahmen-hoehe: 42px;
	--tv-logo: 190px;
	--tv-logo-klein: 64px;
	--tv-logo-seitenverhaeltnis: 1.114;
	--tv-logo-ueberhang: calc((var(--tv-logo) - var(--tv-logo-klein)) * var(--tv-logo-seitenverhaeltnis));
	--tv-kopf-abstand: 8rem;
	--tv-glas: rgb(14 26 63 / 72%);
	--tv-dimmung: linear-gradient(var(--tv-glas), var(--tv-glas));
	--tv-fuss-dimmung: var(--tv-dimmung);
}
.tv-hintergrund--holz { --tv-buehne-hintergrund: linear-gradient(180deg, #3b2819 0%, #1d130b 100%); }
.tv-hintergrund--mit-bild { --tv-buehne-hintergrund: var(--tv-buehne-schleier), var(--tv-buehne-bild) center / cover; }
.tv-hintergrund--mit-bild .tv-fuss { background: var(--tv-fuss-dimmung), var(--tv-buehne-hintergrund); background-origin: border-box; }
.tv-hintergrund--bild { --tv-buehne-schleier: radial-gradient(ellipse 70% 80% at 25% 20%, rgb(14 26 63 / 15%), rgb(14 26 63 / 85%) 80%); }
.tv-hintergrund--vorhang,
.tv-hintergrund--vorhang-scharf,
.tv-hintergrund--vorhang-gedimmt,
.tv-hintergrund--vorhang-weich {
	--tv-vorhang-schleier: linear-gradient(90deg, rgb(14 26 63 / 25%), rgb(14 26 63 / 0%) 40%), linear-gradient(rgb(14 26 63 / 0%) 50%, rgb(14 26 63 / 75%));
	--tv-buehne-schleier: var(--tv-vorhang-schleier);
}
.tv-hintergrund--vorhang-gedimmt { --tv-buehne-schleier: var(--tv-dimmung), var(--tv-vorhang-schleier); --tv-fuss-dimmung: none; }
.tv-hintergrund--vorhang-schraffur { --tv-buehne-schleier: linear-gradient(90deg, rgb(14 26 63 / 25%), rgb(14 26 63 / 0%) 40%), linear-gradient(rgb(14 26 63 / 0%), rgb(14 26 63 / 35%)); }
.tv-hintergrund--vorhang-foto { --tv-buehne-schleier: linear-gradient(90deg, rgb(14 26 63 / 40%), rgb(14 26 63 / 0%) 50%), linear-gradient(rgb(14 26 63 / 10%), rgb(14 26 63 / 45%)); }
.tv-hintergrund--vorhang-zu { --tv-buehne-schleier: linear-gradient(rgb(14 26 63 / 20%), rgb(14 26 63 / 55%)); }
@media (max-width: 1000px) {
	:root { --tv-logo: 140px; }
}
@media (min-width: 601px) and (max-width: 1000px) {
	.tv-marke .wp-block-site-title { display: none; }
}

img { height: auto; max-width: 100%; }
h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100dvh; }
.wp-site-blocks > main { flex-grow: 1; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/* ---- Kopf ---------------------------------------------------------------- */

.tv-kopfbereich { position: sticky; top: 0; z-index: 50; }
.admin-bar .tv-kopfbereich { top: var(--wp-admin--admin-bar--height, 0); }
.tv-kopf { box-shadow: 0 1px 0 rgb(14 26 63 / 6%); }
.tv-marke .wp-block-site-title { max-width: 19ch; }
.tv-marke .wp-block-site-logo { position: relative; z-index: 3; }
.tv-marke .wp-block-site-logo img {
	display: block;
	width: var(--tv-logo);
	margin-bottom: calc(-1 * var(--tv-logo-ueberhang));
	filter: drop-shadow(0 6px 12px rgb(14 26 63 / 30%));
}
.tv-kopfbereich + main:not(.tv-start) { padding-top: max(var(--wp--preset--spacing--50), var(--tv-logo-ueberhang)) !important; }
@keyframes tv-logo-klein { to { width: var(--tv-logo-klein); margin-bottom: 0; } }
@supports (animation-timeline: scroll()) {
	.tv-marke .wp-block-site-logo img {
		animation: tv-logo-klein linear both;
		animation-timeline: scroll(root);
		animation-range: 0 8rem;
	}
}
@supports not (animation-timeline: scroll()) {
	.tv-kopfbereich { position: static; }
}

.tv-rahmen {
	position: relative;
	z-index: 2;
	height: var(--tv-rahmen-hoehe);
	margin-block: calc(var(--tv-rahmen-hoehe) / -2);
	background: var(--tv-rahmen-bild, url("../img/rahmen.png")) repeat-x center / auto 100%;
	pointer-events: none;
}
:not(.tv-kopf):has(+ .tv-rahmen) { border-bottom: calc(var(--tv-rahmen-hoehe) / 2) solid transparent; }
.tv-rahmen + * { border-top: calc(var(--tv-rahmen-hoehe) / 2) solid transparent; }

.wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.35rem; }
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--blau); }
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { box-shadow: inset 0 -3px 0 var(--wp--preset--color--gold); }
.wp-block-navigation .wp-block-navigation__submenu-container { border-radius: 10px; border: 1px solid var(--wp--preset--color--linie) !important; box-shadow: var(--tv-schatten); padding: 0.4rem; }
.tv-kopf .wp-block-navigation .has-child .wp-block-navigation__submenu-container { z-index: 4; }
.wp-block-navigation__responsive-container.is-menu-open { padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1rem; width: 100%; padding-top: 1rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.6rem;
	font-weight: 650;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	font-family: var(--wp--preset--font-family--inter);
	padding: 0.6rem 0 0.2rem 1rem !important;
	border: 0 !important;
	border-left: 2px solid var(--wp--preset--color--gold) !important;
	box-shadow: none;
	gap: 0.6rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	font-size: 1.05rem;
	font-weight: 500;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* ---- Allgemein ----------------------------------------------------------- */

.tv-kicker,
.tv-kicker a {
	color: var(--wp--preset--color--blau);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 0.25rem;
}
.tv-untertitel { color: var(--wp--preset--color--grau); font-size: var(--wp--preset--font-size--l); margin-top: 0.25rem; }
.tv-untertitel:empty { display: none; }
.tv-zurueck { font-size: var(--wp--preset--font-size--s); margin-bottom: 0.5rem; }
.tv-zurueck a { text-decoration: none; }
.tv-etikett a { background: var(--wp--preset--color--gold-hell); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--nacht); }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--blau);
	padding: calc(0.8rem - 2px) calc(1.5rem - 2px);
}

.tv-kasten {
	background: var(--wp--preset--color--papier);
	border-radius: var(--tv-radius);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	margin-bottom: 1.25rem;
}
.tv-kasten--gold { background: var(--wp--preset--color--gold-hell); }
.tv-kasten > :first-child { margin-top: 0; }
.tv-kasten a { font-weight: 600; text-decoration: none; }

/* ---- Bühne (Hero) -------------------------------------------------------- */

.tv-buehne {
	--tv-buehne-abstand: clamp(2.5rem, 7vw, 6rem);
	--tv-buehne-abstand-oben: max(var(--tv-buehne-abstand), var(--tv-logo-ueberhang));
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	padding: var(--tv-buehne-abstand) max(clamp(1rem, 4vw, 2rem), calc((100vw - 1200px) / 2));
	color: #fff;
	background:
		radial-gradient(ellipse 60% 70% at 20% -10%, rgb(255 230 150 / 28%), transparent 60%),
		radial-gradient(ellipse 50% 60% at 85% 0%, rgb(91 155 213 / 30%), transparent 65%),
		var(--tv-buehne-hintergrund);
	background-origin: border-box;
	overflow: hidden;
	margin-top: 0 !important;
}
.tv-buehne__kicker { color: var(--wp--preset--color--gold); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; margin: 0 0 0.5rem; }
.tv-buehne__titel {
	color: #fff;
	font-size: clamp(1.9rem, 8.5vw, 5rem);
	font-weight: 750;
	hyphens: manual;
	line-height: 1.02;
	margin: 0 0 0.75rem;
	text-wrap: balance;
}
.tv-buehne__meta { font-size: var(--wp--preset--font-size--l); font-weight: 600; margin: 0 0 1rem; color: #e6ebf8; }
.tv-buehne__text { color: #c9d2ea; max-width: 46ch; margin: 0 0 1.25rem; }
.tv-buehne__info { color: var(--wp--preset--color--gold-hell); font-size: var(--wp--preset--font-size--s); margin: 0 0 1.25rem; }
.tv-buehne .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tv-buehne .is-style-outline > .wp-block-button__link,
.tv-chips li { background: var(--tv-glas); backdrop-filter: blur(6px); }
.tv-buehne .is-style-outline > .wp-block-button__link { color: #fff; }
.tv-buehne__plakat { display: block; justify-self: center; max-width: min(420px, 100%); }
.tv-buehne__bild {
	display: block;
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 30px 60px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 10%);
	transform: rotate(1.5deg);
}
.tv-buehne--leer { text-align: left; }

.tv-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0 0 1.5rem; }
.tv-chips li {
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: 10px;
	padding: 0.4rem 0.7rem;
	font-size: 0.9rem;
	line-height: 1.3;
	white-space: nowrap;
}
.tv-chip__tag { color: var(--wp--preset--color--gold); font-weight: 700; }
.tv-chip__zeit { color: #c9d2ea; }

.tv-buehne { padding-top: var(--tv-buehne-abstand-oben); }
@media (min-width: 1001px) {
	.tv-buehne { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
	.tv-buehne__titel { font-size: clamp(1.9rem, 5.5vw, 5rem); }
}

/* ---- Terminliste --------------------------------------------------------- */

.tv-termine { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: 0.6rem; }
.tv-termin,
.tv-sponsor {
	position: relative;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--tv-radius);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.tv-termin:hover,
.tv-sponsor:has(a):hover { border-color: var(--wp--preset--color--himmel); box-shadow: var(--tv-schatten); }
.tv-termin {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding: 0.7rem 1rem 0.7rem 0.7rem;
}
.tv-termin__datum {
	display: grid;
	justify-items: center;
	min-width: 3.6rem;
	padding: 0.35rem 0.4rem;
	border-radius: 10px;
	background: var(--wp--preset--color--blau);
	color: #fff;
	line-height: 1.05;
}
.tv-termin__tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--gold); font-weight: 700; }
.tv-termin__nr { font-family: var(--wp--preset--font-family--fraunces); font-size: 1.6rem; font-weight: 700; }
.tv-termin__monat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tv-termin__info { display: grid; gap: 0.1rem; }
.tv-termin__titel { font-weight: 700; color: var(--wp--preset--color--nacht); text-decoration: none; font-size: 1.05rem; }
.tv-termin__titel::after,
.tv-sponsor a::after { content: ""; position: absolute; inset: 0; } /* ganze Zeile klickbar */
.tv-termin__meta { color: var(--wp--preset--color--grau); font-size: 0.9rem; }
.tv-termin__ticket {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--nacht);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
}
.tv-termine--leer { color: var(--wp--preset--color--grau); }

/* ---- Termin-Details (Einzelseite) --------------------------------------- */

.tv-details {
	background: var(--wp--preset--color--papier);
	border-radius: var(--tv-radius);
	padding: 1.5rem;
	position: sticky;
	top: var(--tv-kopf-abstand);
}
.tv-details__titel { font-size: 1rem; font-family: var(--wp--preset--font-family--inter); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--blau); margin: 0 0 0.5rem; }
.tv-details__titel:not(:first-child) { margin-top: 1.5rem; }
.tv-details__termine { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.tv-details__termine li { padding: 0.5rem 0.75rem; background: #fff; border-radius: 8px; font-weight: 600; font-size: 0.95rem; }
.tv-details__termine li.is-vorbei { color: var(--wp--preset--color--grau); text-decoration: line-through; font-weight: 400; background: transparent; }
.tv-details__info { margin-top: 1rem; font-size: 0.95rem; }
.tv-details .wp-block-buttons { margin-top: 1rem; }
.tv-plakat img { border-radius: var(--tv-radius); }

/* ---- Sponsoren ----------------------------------------------------------- */

.tv-sponsoren { margin-block: 2rem; }
.tv-sponsor { padding: 1.25rem 1rem 1rem; }
.tv-sponsor__logo { margin: 0; width: 100%; }
.tv-sponsor__logo img { display: block; margin-inline: auto; height: clamp(4rem, 12vw, 6rem); object-fit: contain; }
.tv-sponsor__name { margin: 0; text-align: center; font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--wp--preset--color--nacht); }

/* ---- Karten (Beiträge, Termine, Galerien) ------------------------------- */

.tv-karte { height: 100%; }
.tv-karte .wp-block-post-featured-image { margin: 0 0 0.25rem; width: 100%; }
.tv-karte .wp-block-post-featured-image img { border-radius: var(--tv-radius); transition: transform 0.3s; object-position: center top; }
.tv-karte .wp-block-post-featured-image a { display: block; overflow: hidden; border-radius: var(--tv-radius); }
.tv-karte:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.tv-karte .wp-block-post-title { font-size: var(--wp--preset--font-size--l); margin: 0; }
.tv-karte .wp-block-post-excerpt { color: var(--wp--preset--color--grau); font-size: 0.95rem; margin: 0; }
.tv-karte .wp-block-post-excerpt__more-text { display: none; }
.tv-karte__meta { color: var(--wp--preset--color--grau); font-size: 0.9rem; margin: 0; }
.tv-karte .tv-kicker { margin: 0; }

/* Platzhalter ohne Beitragsbild: Rautenmuster statt leerer Fläche */
.tv-karte:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: var(--tv-radius);
	background: linear-gradient(rgb(30 58 138 / 75%), rgb(14 26 63 / 85%)), var(--tv-rauten) center / 22px 12px;
	margin-bottom: 0.25rem;
}

.tv-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.tv-filter a {
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--nacht);
}
.tv-filter a:hover { border-color: var(--wp--preset--color--blau); }

/* Galerie-Kacheln (Block theaterverein/galerien) */
.tv-galerien {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));
	gap: 1rem;
}
.tv-galerie-karte a { position: relative; display: block; border-radius: var(--tv-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--wp--preset--color--nacht); color: #fff; text-decoration: none; }
.tv-galerie-karte__bild { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s, opacity 0.3s; opacity: 0.9; }
.tv-galerie-karte a:hover .tv-galerie-karte__bild { transform: scale(1.04); opacity: 1; }
.tv-galerie-karte__text { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem 0.9rem; background: linear-gradient(transparent, rgb(14 26 63 / 92%)); display: grid; }
.tv-galerie-karte__titel { font-family: var(--wp--preset--font-family--fraunces); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.tv-galerie-karte__meta { font-size: 0.8rem; color: var(--wp--preset--color--gold-hell); }

/* Galerie-Einzelseite */
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 6px; }
@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) { width: calc(50% - var(--wp--style--unstable-gallery-gap, 0.5rem) / 2); }
}

/* ---- Fließtext (migrierte Inhalte) -------------------------------------- */

.tv-inhalt img { border-radius: 8px; }
.tv-inhalt table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.95rem; display: block; overflow-x: auto; }
.tv-inhalt td, .tv-inhalt th { border-bottom: 1px solid var(--wp--preset--color--linie); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.tv-inhalt tr:first-child td { font-weight: 700; }
.tv-inhalt h2 { margin-top: 2.5rem; scroll-margin-top: var(--tv-kopf-abstand); }

/* ---- Fuß ----------------------------------------------------------------- */

.tv-fuss { background: var(--tv-buehne-hintergrund); background-origin: border-box; }
.tv-fuss__titel { color: var(--wp--preset--color--gold); font-family: var(--wp--preset--font-family--inter); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tv-fuss__liste { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.tv-fuss a { text-decoration: none; }
.tv-fuss a:hover { text-decoration: underline; }
.tv-fuss__logo img { background: #fff; border-radius: 8px; padding: 4px; }

@media (max-width: 781px) {
	.tv-termin-spalten > .wp-block-column:last-child { order: -1; }
	.tv-plakat { max-width: 75%; }
}

/* ---- Mobil --------------------------------------------------------------- */

@media (max-width: 600px) {
	:root { --tv-rahmen-hoehe: 34px; --tv-logo: 110px; --tv-logo-klein: 48px; }
	.tv-marke .wp-block-site-title { font-size: 1rem !important; }
	.tv-termin { grid-template-columns: auto minmax(0, 1fr); padding-right: 0.7rem; }
	.tv-termin__ticket { grid-column: 2; justify-self: start; }
	.tv-details { position: static; }
	.tv-buehne__plakat { order: -1; max-width: 55%; }
	/* A centred portrait crop of the 16:9 image hides the curtains; this offset shows the right one. */
	.tv-hintergrund--mit-bild { --tv-buehne-hintergrund: var(--tv-buehne-schleier), var(--tv-buehne-bild) 94% center / cover; }
	.tv-hintergrund--mit-bild :is(.tv-buehne__meta, .tv-buehne__text) { max-width: 76%; }
	.tv-buehne__meta { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}