@import url('bootstrap.min.css');
@import url('svgiconurls.css');

/*
 * Konzertreservierung ticket background — source of truth: public/config-diverses.inc.php
 * (KONZERTRESERVIERUNG_TICKET_*). Derived :root vars below.
 * Additionally keep up to date in @media breakpoints: need literal px (var() invalid there).
 */
:root {
	--konzertreservierung-ticket-bg-layout-min-px: 992px; /* KONZERTRESERVIERUNG_TICKET_BG_LAYOUT_MIN_PX */
	--konzertreservierung-ticket-bg-wide-min-px: 1200px; /* KONZERTRESERVIERUNG_TICKET_BG_WIDE_MIN_PX */
	--konzertreservierung-ticket-bg-img-width: 1536; /* KONZERTRESERVIERUNG_TICKET_BG_IMG_WIDTH */
	--konzertreservierung-ticket-bg-img-height: 1024; /* KONZERTRESERVIERUNG_TICKET_BG_IMG_HEIGHT */
	--konzertreservierung-ticket-card-bottom-ratio: 0.83; /* KONZERTRESERVIERUNG_TICKET_CARD_BOTTOM_RATIO */
	--konzertreservierung-ticket-padding-top: 25%; /* KONZERTRESERVIERUNG_TICKET_PADDING_TOP */
	--konzertreservierung-ticket-padding-top-higher: 16%; /* KONZERTRESERVIERUNG_TICKET_PADDING_TOP_HIGHER */
	--konzertreservierung-ticket-padding-right: 23%; /* KONZERTRESERVIERUNG_TICKET_PADDING_RIGHT */
	--konzertreservierung-ticket-padding-left: 24%; /* KONZERTRESERVIERUNG_TICKET_PADDING_LEFT */
	/* derived: KONZERTRESERVIERUNG_TICKET_BG_IMG_HEIGHT / KONZERTRESERVIERUNG_TICKET_BG_IMG_WIDTH */
	--konzertreservierung-ticket-bg-img-height-ratio: 0.666667;
	/* derived: (100 - KONZERTRESERVIERUNG_TICKET_PADDING_LEFT - KONZERTRESERVIERUNG_TICKET_PADDING_RIGHT) / 100 */
	--konzertreservierung-ticket-border-width-from-cqw: 0.53;
	/* derived: (KONZERTRESERVIERUNG_TICKET_BG_IMG_HEIGHT / KONZERTRESERVIERUNG_TICKET_BG_IMG_WIDTH) * KONZERTRESERVIERUNG_TICKET_CARD_BOTTOM_RATIO */
	--konzertreservierung-ticket-card-bottom: 0.553333;
	/* derived: (KONZERTRESERVIERUNG_TICKET_BG_IMG_HEIGHT / KONZERTRESERVIERUNG_TICKET_BG_IMG_WIDTH) * KONZERTRESERVIERUNG_TICKET_CARD_BOTTOM_RATIO - KONZERTRESERVIERUNG_TICKET_PADDING_TOP / 100 */
	--konzertreservierung-ticket-card-height-factor-default: 0.3033333333333333;
	/* derived: (KONZERTRESERVIERUNG_TICKET_BG_IMG_HEIGHT / KONZERTRESERVIERUNG_TICKET_BG_IMG_WIDTH) * KONZERTRESERVIERUNG_TICKET_CARD_BOTTOM_RATIO - KONZERTRESERVIERUNG_TICKET_PADDING_TOP_HIGHER / 100 */
	--konzertreservierung-ticket-card-height-factor-higher: 0.3933333333333333;
	/* derived: 100cqw / ((100 - KONZERTRESERVIERUNG_TICKET_PADDING_LEFT - KONZERTRESERVIERUNG_TICKET_PADDING_RIGHT) / 100) * ((KONZERTRESERVIERUNG_TICKET_BG_IMG_HEIGHT / KONZERTRESERVIERUNG_TICKET_BG_IMG_WIDTH) * KONZERTRESERVIERUNG_TICKET_CARD_BOTTOM_RATIO - KONZERTRESERVIERUNG_TICKET_PADDING_TOP / 100) */
	--konzertreservierung-ticket-card-height-default: calc(100cqw / var(--konzertreservierung-ticket-border-width-from-cqw) * var(--konzertreservierung-ticket-card-height-factor-default));
	/* derived: 100cqw / ((100 - KONZERTRESERVIERUNG_TICKET_PADDING_LEFT - KONZERTRESERVIERUNG_TICKET_PADDING_RIGHT) / 100) * ((KONZERTRESERVIERUNG_TICKET_BG_IMG_HEIGHT / KONZERTRESERVIERUNG_TICKET_BG_IMG_WIDTH) * KONZERTRESERVIERUNG_TICKET_CARD_BOTTOM_RATIO - KONZERTRESERVIERUNG_TICKET_PADDING_TOP_HIGHER / 100) */
	--konzertreservierung-ticket-card-height-higher: calc(100cqw / var(--konzertreservierung-ticket-border-width-from-cqw) * var(--konzertreservierung-ticket-card-height-factor-higher));

	/* Wienkarte on konzerte.php — source: WIENKARTE_* in config-diverses.inc.php; clip ratios set inline from PHP */
	--wienkarte-layout-min-px: 992px; /* WIENKARTE_LAYOUT_MIN_PX (also literal in @media below) */
}



/* --- Previously added to bootstrap files --- */

body{
	/*background-image: url(../img/SG1L5881-min.JPG);*/
	/*background-image: url(../img/2862248_s.jpg);*/
	background-image: url(../img/g3762.png);
	background-attachment: fixed;
	background-position: center top;
	background-repeat: repeat;
	background-size: cover;
}  
.bg-covid19 { background-color: #cccccc; font-size: 90%; }
.bg-public { color: #000000; }
.label-public { border-radius: .25em; color: #000; color: #000000; display: inline; font-size: 75%; font-weight: 700; line-height: 1; padding: .2em .6em .3em; text-align: center; vertical-align: baseline; white-space: nowrap; }
.inactive { color: #a7a7a7; }
.panel-programm { border-color: #bce8f1; }
.panel-programm>.panel-footer+.panel-collapse>.panel-body { border-bottom-color: #bce8f1; }
.panel-programm>.panel-heading { background-color: #d9edf7; border-color: #bce8f1; color: #31708f; }
.panel-programm>.panel-heading .badge { background-color: #31708f; color: #d9edf7; }
.panel-programm>.panel-heading+.panel-collapse>.panel-body { border-top-color: #bce8f1; }
.reservierung { background-color: #ff0000; padding: 10px; }
.trennzeilentext { padding-bottom: 10px; padding-top: 50px; }
td.alte { background-color: #f8f8f8; color: #787878; font-size: 80%; }
td.trennzeile { background-color: transparent; }

/* --- Bootstrap overrides --- */
h4,
.h4 {
	margin-top: 1px;
	margin-bottom: 2px;
}
.container > h1, .container > h2 {
	color: #334466;
}
.container > .panel {
	border-radius: 6px;
}
.container > h1:has(.svg-icon) {
	display: flex;
	align-items: start;
	gap: 0.35em;
	margin-left: 0.35em;
}
.container > h1:has(.svg-icon) .svg-icon {
	flex-shrink: 0;
}
/* White content box (replaces Bootstrap jumbotron misuse) */
.white-box {
	padding: 15px 15px 30px;
	margin-bottom: 30px;
	background-color: #fff;
	border-radius: 6px;
}
/* Streaming / social platform links (media.php) */
.streaming-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem 1rem;
}
.streaming-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	flex: 1 1 10.5rem;
	max-width: 13rem;
	min-width: 9rem;
	box-sizing: border-box;
	padding: 0.75rem 0.5rem;
	text-decoration: none;
	color: #334466;
}
.streaming-link:hover,
.streaming-link:focus {
	text-decoration: none;
	color: #334466;
	opacity: 0.8;
}
.streaming-link .svg-icon {
	width: 3em;
	height: 3em;
	font-size: 3.5rem;
}
.streaming-link-label {
	text-align: center;
}
.streaming-link--amazon .svg-icon { color: #ff9900; }
.streaming-link--spotify .svg-icon { color: #1db954; }
.streaming-link--applemusic .svg-icon { color: #fa243c; }
.streaming-link--deezer .svg-icon { color: #a238ff; }
.streaming-link--qobuz .svg-icon { color: #0070e0; }
.streaming-link--facebook .svg-icon { color: #1877f2; }
@media screen and (min-width: 768px) {
	.white-box {
		padding: 48px 60px;
	}
}
.white-box > h1:first-child,
.white-box > h2:first-child,
.white-box > h3:first-child {
	margin-top: 0;
}

/* move 15px of 20px margin-top from h3:first-child to full row possibly including image */
.row:has(> div > h3:first-child) {
	margin-top: 15px;
}
.row > div > h3:first-child {
    margin-top: 5px;
}

/* btn-primary-alt: former Bootstrap btn-primary (blue) */
.btn-primary-alt {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}
.btn-primary-alt:hover,
.btn-primary-alt:focus,
.btn-primary-alt.focus,
.btn-primary-alt:active,
.btn-primary-alt.active,
.open > .dropdown-toggle.btn-primary-alt {
	color: #fff;
	background-color: #286090;
	border-color: #204d74;
}
.btn-primary-alt:active,
.btn-primary-alt.active,
.open > .dropdown-toggle.btn-primary-alt {
	background-image: none;
}
.btn-primary-alt.disabled,
.btn-primary-alt[disabled],
fieldset[disabled] .btn-primary-alt,
.btn-primary-alt.disabled:hover,
.btn-primary-alt[disabled]:hover,
fieldset[disabled] .btn-primary-alt:hover,
.btn-primary-alt.disabled:focus,
.btn-primary-alt[disabled]:focus,
fieldset[disabled] .btn-primary-alt:focus,
.btn-primary-alt.disabled.focus,
.btn-primary-alt[disabled].focus,
fieldset[disabled] .btn-primary-alt.focus,
.btn-primary-alt.disabled:active,
.btn-primary-alt[disabled]:active,
fieldset[disabled] .btn-primary-alt:active,
.btn-primary-alt.disabled.active,
.btn-primary-alt[disabled].active,
fieldset[disabled] .btn-primary-alt.active {
	background-color: #337ab7;
	border-color: #2e6da4;
}
.btn-primary-alt .badge {
	color: #337ab7;
	background-color: #fff;
}

/* btn-primary: site default action color (former btn-warning orange) */
.btn-primary {
	color: #fff;
	/* color: #000000c8; */
	font-weight: normal;
	/* font-weight: bold; */
	/* background-color: #f0ad4e; */
	/* background: radial-gradient(circle at 20% 10%, #fdb154, #f0ad4e); */
	background: radial-gradient(circle at 20% 10%, #ee7f36, #ec971f);
	/* border-color: #eea236; */
	border-color: #d58512;
	/* text-shadow: 0 0 2px #be7a1a; */
	text-shadow: 0 0 2px #be7a1a;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.open > .dropdown-toggle.btn-primary {
	color: #fff;
	/* background-color: #ec971f; */
	/* background: radial-gradient(circle at 20% 10%, #ee7f36, #ec971f); */
	background: radial-gradient(circle at 20% 10%, #fdb154, #f0ad4e);
	/* border-color: #d58512; */
	border-color: #eea236;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	/* Keep a solid fill: background-image:none alone left the button empty/bright */
	background-color: #ec971f;
	background-image: none;
	border-color: #d58512;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	background-color: #f0ad4e;
	border-color: #eea236;
}
.btn-primary .badge {
	color: #f0ad4e;
	background-color: #fff;
}

.gapped-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}


.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
	padding: 10px;
}
.alert {
	padding: 10px;
}
code {
	color: #000000;
	background-color: #f5f5f5;
}
.table-striped > tbody > tr:nth-of-type(even):not(:has(.trennzeile)) {
	background-color: #f1f1f1;
}
.table-hover > tbody > tr:nth-of-type(odd):hover {
	background-color: #f5f5f5;
}
.table-hover > tbody > tr:nth-of-type(even):hover {
	background-color: #ececec;
}
.table-striped > tbody > tr:has(.trennzeile) {
	background-color: transparent !important;
}

.radio-inline + span > .radio-inline:first-child,
.checkbox-inline + span > .checkbox-inline:first-child {
  margin-top: 0;
  margin-left: 10px;
}


.svg-icon-glow {
	display: inline-flex;
	line-height: 0;
	vertical-align: middle;
}
.navbar-ha-item.active .svg-icon-glow,
.navbar-ha-item:hover .svg-icon-glow,
.btn-primary .svg-icon-glow {
	-webkit-filter: drop-shadow(0 0 2px #be7a1a);
	filter: drop-shadow(0 0 2px #be7a1a);
}
.btn-primary:has(.svg-icon-glow) {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}
.btn-primary:has(.svg-icon-glow) .svg-icon-glow {
	vertical-align: unset;
	flex-shrink: 0;
}
.btn-primary:has(.svg-icon-glow) .svg-icon {
	width: 1em;
	height: 1em;
	vertical-align: 0;
}


.navbar-ha {
	margin: 15px;
	min-height: auto; /* override bootstrap .navbar min-height: 50px */
	background-color: #337ab7;
	border: solid 1px #2e6da4;
	border-radius: 5px;
	color: #fff;
	/* padding-left: 20vw; */
}
/* Bootstrap clearfix pseudo-elements (display:table) add stray space with flex layout — disable them. */
.navbar-ha:before,
.navbar-ha:after {
	display: none;
}
.navbar-ha-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1px;
}
.navbar-ha-item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: #fff;
	text-decoration: none;
	font-weight: normal;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
}
.navbar-ha-right {
	flex: 1 1 auto;
	min-width: min-content;
	margin-left: auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: 1px;
}
.navbar-ha-right .navbar-ha-item {
	flex: 0 0 auto;
}
.navbar-ha-item.navbar-ha-muted {
	color: rgba(255, 255, 255, 0.5);
}
.navbar-ha-item.active {
	color: #fff;
	text-decoration: none;
	/* background: radial-gradient(circle at 20% 10%, #fdb154, #f0ad4e); */
	background: radial-gradient(circle at 20% 10%, #ee7f36, #ec971f);
	/* border: solid 1px #eea236; */
	border-color: #d58512;
	text-shadow: 0 0 2px #be7a1a;
	font-weight: bold;
	/* font-weight: normal; */
	padding-top: 12px;
	margin-top: -6px;
	padding-bottom: 12px;
	margin-bottom: -6px;
	padding-left: 18px;
	padding-right: 18px;
}
.navbar-ha-item.active:first-child {
	margin-left: -1px;
}
.navbar-ha-item:hover {
	color: #fff;
	text-decoration: none;
	/* background: radial-gradient(circle at 20% 10%, #ee7f36, #ec971f); */
	background: radial-gradient(circle at 20% 10%, #fdb154, #f0ad4e);
	border-color: #eea236;
	/* border-color: #d58512; */
	text-shadow: 0 0 2px #be7a1a;
}
.navbar-ha-item:active,
.navbar-ha-item:focus {
	color: #fff;
	text-decoration: none;
	border-color: #d58512;
}
.navbar-ha-item.navbar-ha-muted:hover,
.navbar-ha-item.navbar-ha-muted:focus,
.navbar-ha-item.navbar-ha-muted:active {
	color: #fff;
}
.navbar-ha-expand {
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
button.navbar-ha-item {
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
}

/* Narrow viewports: icon-only row; .navbar-ha-expanded = full-width stacked labels. */
@media (max-width: 500px) {
	.navbar-ha-item.active:first-child {
		margin-left: 0px;
	}
	.navbar-ha-expand {
		display: inline-flex;
	}
	.navbar-ha:not(.navbar-ha-expanded) .navbar-ha-label {
		display: none;
	}
	.navbar-ha:not(.navbar-ha-expanded) .navbar-ha-item {
		font-size: clamp(14px, 4.67vw, 24px);
		padding: clamp(6px, 2.00vw, 10px) clamp(7px, 2.34vw, 12px); /* 2.00vw = 6px300px, 2.34vw = 12px */
		justify-content: center;
	}
	.navbar-ha:not(.navbar-ha-expanded) .navbar-ha-muted {
		display: none;
	}
	.navbar-ha:not(.navbar-ha-expanded) .navbar-ha-item.active {
		margin-top: 0;
		margin-bottom: 0;
	}
	.navbar-ha.navbar-ha-expanded .navbar-ha-inner {
		flex-direction: column;
		align-items: stretch;
	}
	.navbar-ha.navbar-ha-expanded .navbar-ha-item {
		flex: 1 1 auto;
		width: 100%;
		font-size: 14px;
		justify-content: flex-start;
		text-align: left;
		white-space: normal;
	}
	.navbar-ha.navbar-ha-expanded .navbar-ha-right {
		flex: 1 1 auto;
		flex-direction: column;
		width: 100%;
		min-width: 0;
		margin-left: 0;
	}
	.navbar-ha.navbar-ha-expanded .navbar-ha-muted {
		display: inline-flex;
	}
	.navbar-ha.navbar-ha-expanded .navbar-ha-item.active {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 6px;
		padding-bottom: 6px;
	}
}
@media (min-width: 500px) {
	.navbar-ha-expand {
		display: none;
	}
}

/* Two optional side slots + main: small viewports with start/end above main, wide viewports with the main in between. */
.media-flank-host {
	container-type: inline-size;
	container-name: media-flank;
}
.media-flank {
	display: grid;
	gap: 1em;
	align-items: start;
	grid-template-columns: min(250px, 1fr) min(250px, 1fr);
	grid-template-areas:
		"start end"
		"main main";
}
.media-flank__start {
	grid-area: start;
	justify-self: center;
}
.media-flank__main {
	grid-area: main;
	min-width: 0;
	overflow-wrap: break-word;
}
.media-flank__end {
	grid-area: end;
	justify-self: center;
}
.media-flank:not(:has(.media-flank__start)):not(:has(.media-flank__end)) {
	grid-template-columns: 1fr;
	grid-template-areas: "main";
}
.media-flank:has(.media-flank__start):not(:has(.media-flank__end)) {
	grid-template-columns: 1fr;
	grid-template-areas:
		"start"
		"main";
}
.media-flank:not(:has(.media-flank__start)):has(.media-flank__end) {
	grid-template-columns: 1fr;
	grid-template-areas:
		"end"
		"main";
}
@container media-flank (max-width: 379px) {
	.media-flank:has(.media-flank__start):has(.media-flank__end) {
		grid-template-columns: 1fr;
		grid-template-areas:
			"start"
			"end"
			"main";
	}
}
@container media-flank (min-width: 649px) {
	@media (min-width: 992px) {
		.media-flank:has(.media-flank__start):has(.media-flank__end) {
			grid-template-columns: min(300px, 100%) 1fr min(300px, 100%);
			grid-template-areas: "start main end";
		}
		.media-flank:has(.media-flank__start):has(.media-flank__end) .media-flank__start {
			justify-self: start;
		}
		.media-flank:has(.media-flank__start):has(.media-flank__end) .media-flank__end {
			justify-self: end;
		}
		.media-flank:has(.media-flank__start):not(:has(.media-flank__end)) {
			grid-template-columns: min(300px, 100%) 1fr;
			grid-template-areas: "start main";
		}
		.media-flank:has(.media-flank__start):not(:has(.media-flank__end)) .media-flank__start {
			justify-self: start;
		}
		.media-flank:not(:has(.media-flank__start)):has(.media-flank__end) {
			grid-template-columns: 1fr min(300px, 100%);
			grid-template-areas: "main end";
		}
		.media-flank:not(:has(.media-flank__start)):has(.media-flank__end) .media-flank__end {
			justify-self: end;
		}
	}
}
.media-flank--sides-bottom .media-flank__start,
.media-flank--sides-bottom .media-flank__end {
	align-self: end;
}




/* --- SVG icons (base) --- */
.svg-icon {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	vertical-align: -0.15em;
	font-size: inherit;
	color: inherit;
	background-color: currentColor;
	-webkit-mask-image: var(--icon-data);
	mask-image: var(--icon-data);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}


/* --- Index welcome (index.php only) --- */
/* Index keeps flush side images (no white-box padding — that would inset/narrow the layout). */
.white-box.index-welcome {
	padding: 0;
	overflow: hidden;
}
.index-welcome .media-flank__start,
.index-welcome .media-flank__end {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 10px 0;
}
.index-welcome .media-flank__main {
	padding: 15px; /* former .panel-body */
}
.index-welcome .media-flank__start img {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	margin: 0 auto;
}
.index-welcome .media-flank__end img {
	display: block;
	width: 50%;
	max-width: 150px;
	height: auto;
	margin: 0 auto;
}
.index-welcome .index-welcome__block + .index-welcome__block {
	margin-top: 2em;
}


/* --- Konzertliste --- */
.bg-public, .label-public {
	background-color: rgb(255, 237, 172);
}
.bg-public {
	vertical-align: top;
	padding: 12px 14px;
	line-height: 1.3;
}
td.alte.bg-public-past {
	background-color: rgb(245, 240, 219);
}
.konzert-detail .alert {
	margin: 0 0 0.65em;
	padding: 8px 12px;
	line-height: 1.3;
}
/* gap between text and button; no leftover indent when the button wraps alone */
.konzerte-location-filter,
.konzerte-no-upcoming {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
}

/* Wienkarte: full SVG on wide screens; clip side boxes + HTML links below LAYOUT_MIN_PX */
.wienkarte-frame {
	max-width: 100%;
	margin-bottom: 0.75em;
}
.wienkarte-clip {
	overflow: hidden;
	max-width: 100%;
	aspect-ratio: var(--wienkarte-full-w) / var(--wienkarte-full-h);
}
.wienkarte-object {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border: 0;
}
.wienkarte-boxes {
	display: none;
	list-style: none;
	margin: 0.85em 0 0;
	padding: 0;
	flex-wrap: wrap;
	gap: 0.65em 0.75em;
}
.wienkarte-box {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	max-width: 100%;
	padding: 0.55em 0.75em;
	border: 2px solid var(--wienkarte-box-color, #cc0000);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 0 0 0 transparent; /* hover thickens via shadow so layout stays put */
	transition: opacity 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.wienkarte-box:hover,
.wienkarte-box:focus {
	box-shadow: 0 0 0 1.5px var(--wienkarte-box-color, #cc0000);
	color: inherit;
	text-decoration: none;
}
.wienkarte-box--dim {
	opacity: 0.3;
	filter: grayscale(0.75);
}
.wienkarte-box--dim:hover,
.wienkarte-box--dim:focus {
	opacity: 1;
	filter: none;
}
.wienkarte-box-dot {
	flex: 0 0 auto;
	width: 0.75em;
	height: 0.75em;
	margin-top: 0.35em;
	border-radius: 50%;
	background: var(--wienkarte-box-color, #cc0000);
}
.wienkarte-box-body {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	min-width: 0;
}
.wienkarte-box-name {
	font-weight: bold;
	color: var(--wienkarte-box-color, #cc0000);
	line-height: 1.25;
}
.wienkarte-box-adresse {
	color: #222;
	font-size: 0.95em;
	line-height: 1.3;
}
@media (max-width: 991px) {
	/* WIENKARTE_LAYOUT_MIN_PX − 1: scale full SVG so the map fills the clip, shift left to cut off boxes */
	.wienkarte-clip {
		aspect-ratio: var(--wienkarte-clip-w) / var(--wienkarte-full-h);
	}
	.wienkarte-object {
		width: calc(100% * var(--wienkarte-full-w) / var(--wienkarte-clip-w));
		max-width: none;
		margin-left: calc(-100% * var(--wienkarte-clip-offset) / var(--wienkarte-clip-w));
	}
	.wienkarte-boxes {
		display: flex;
	}
}

.konzert-titel {
	margin: 0 0 0.4em;
	font-size: 18px;
	line-height: 1.3;
}
/* Multi-part KON_titel: one line if parts fit; otherwise wrap between parts (each part full-width, wraps alone if narrower). */
.konzert-titel-parts {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.3em;
}
.konzert-titel-part {
	flex: 0 0 auto;
	max-width: 100%;
}
.konzert-detail .konzert-ort {
	position: relative;
	padding-left: 1.45em;
	margin: 0 0 0.65em;
}
.konzert-detail .konzert-ort-icon {
	position: absolute;
	left: 0;
	top: 0.12em;
	line-height: 0;
}
.konzert-detail .konzert-ort-icon .svg-icon {
	display: block;
	vertical-align: 0;
}
.konzert-detail .konzert-ort-name {
	font-weight: bold;
}
.konzert-detail .konzert-ort-adresse {
	margin-top: 0.15em;
}
.konzert-detail .konzert-ort-oeffi {
	margin-top: 0.15em;
}
.konzert-detail .konzert-ort-oeffi-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	color: inherit;
	text-decoration: none;
}
.konzert-detail .konzert-ort-oeffi-link-icon {
	line-height: 0;
	flex-shrink: 0;
}
.konzert-detail .konzert-ort-oeffi-link-icon .svg-icon {
	display: block;
	vertical-align: 0;
}
.konzert-detail .konzert-ort-oeffi-link-text {
	text-decoration: underline;
}
.konzert-detail .konzert-ort-oeffi-link:hover,
.konzert-detail .konzert-ort-oeffi-link:focus {
	color: inherit;
}
.konzert-beschreibung {
	margin: 0 0 0.7em;
	padding-left: 0.4em;
	border-left: solid 0.3em rgba(0, 0, 0, 0.2);
	line-height: 1.3;
}
.konzert-actions {
	margin: 0;
}
.konzert-body {
	margin-left: -8px;
	margin-right: -8px;
}
.konzert-body .konzert-img {
	margin-top: 0.5em;
}
@media (min-width: 992px) {
	.konzert-body .konzert-img {
		margin-top: 0;
	}
}

/* --- Konzertreservierung: layout --- */
.konzertreservierung-container {
	/* max-width: 52em; */
	max-width: 88em;
	margin-left: auto;
	margin-right: auto;
}
.konzertreservierung-page-box {
	padding: 30px 15px;
	margin-bottom: 30px;
	color: inherit;
	background-color: #fff;
	border-radius: 6px;
}
@media (min-width: 768px) {
	.konzertreservierung-page-box {
		padding: 48px 60px;
	}
}
.mailfish-sent-box { text-align: center; }
.mailfish-sent-box > img {
	max-width: min(90%, 420px);
	max-height: 400px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
	margin-bottom: 1em;
}
.konzertreservierung-layout .panel { margin-bottom: 20px; }
.konzertreservierung-konzert-titel { margin: 0 0 15px; }
.konzertreservierung-wienkarte {
	box-sizing: border-box;
	display: block;
	width: min(250px, 100%);
	max-width: 100%;
	aspect-ratio: var(--wk-w, 1021) / var(--wk-h, 795);
	position: relative;
	z-index: 0;
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}
a.konzertreservierung-wienkarte:hover,
a.konzertreservierung-wienkarte:focus {
	color: inherit;
	text-decoration: none;
	outline: none;
}
a.konzertreservierung-wienkarte {
	-webkit-tap-highlight-color: transparent;
}
.konzertreservierung-wienkarte-svg {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: center center;
	transition: transform 0.25s ease;
	pointer-events: none;
}
.konzertreservierung-wienkarte-svg .wk-reservierung-hit {
	pointer-events: visiblePainted;
}
@media (hover: hover) {
	.konzertreservierung-wienkarte--expanded,
	a.konzertreservierung-wienkarte:focus-visible {
		z-index: 2;
	}
	.konzertreservierung-wienkarte--expanded .konzertreservierung-wienkarte-svg,
	a.konzertreservierung-wienkarte:focus-visible .konzertreservierung-wienkarte-svg {
		transform: scale(2);
	}
}
.konzertreservierung-konzert-bild {
	width: min(250px, 100%);
	height: auto;
}
/* Single side asset: float beside text; both sides keep generic media-flank grid. */
@container media-flank (min-width: 649px) {
	@media (min-width: 992px) {
		.konzertreservierung-konzert-card-top--only-end.media-flank,
		.konzertreservierung-konzert-card-top--only-start.media-flank {
			display: block;
		}
		.konzertreservierung-konzert-card-top--only-end .media-flank__end {
			float: right;
			max-width: min(250px, 100%);
			margin: 0 0 1em 1em;
		}
		.konzertreservierung-konzert-card-top--only-start .media-flank__start {
			float: left;
			max-width: min(250px, 100%);
			margin: 0 1em 1em 0;
		}
		.konzertreservierung-konzert-card-top--only-start + .konzertreservierung-konzert-card-below {
			clear: both;
		}
	}
}
.konzertreservierung-brief .panel-body { line-height: 1.45; }
.konzertreservierung-brief .panel-body p:last-child { margin-bottom: 0; }
/* h4 override above uses 1px/2px margins — restore p-like rhythm in brief */
.konzertreservierung-brief .panel-body h3,
.konzertreservierung-brief .panel-body h4 {
	margin-top: 0;
	margin-bottom: 0.75em;
	line-height: 1.3;
}
.konzertreservierung-brief .panel-body h3 {
	font-size: 1.25em;
}
.konzertreservierung-brief .panel-body h4 {
	font-size: 1.1em;
}
.konzertreservierung-brief .brief-signature {
	font-style: italic;
}
.konzertreservierung-regeln-vorschau { line-height: 1.45; }
.konzertreservierung-regeln-vorschau h4 {
	margin-top: 0;
	margin-bottom: 0.75em;
	line-height: 1.3;
	font-size: 1.1em;
}
.konzertreservierung-regeln-vorschau ul {
	margin-bottom: 0;
	padding-left: 1.4em;
	list-style: disc;
}
.konzertreservierung-regeln-vorschau li + li {
	margin-top: 0.65em;
}
.konzertreservierung-regeln-bilder {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0 auto 1em;
	justify-content: space-evenly;
}
.konzertreservierung-regeln-bilder img {
	display: block;
	min-width: 11em;
	max-width: 100%;
	max-height: 22em;
	width: auto;
	height: auto;
	border-radius: 6px;
}
.konzertreservierung-ticket-bild {
	margin: 0 auto 1em;
	text-align: center;
}
.konzertreservierung-ticket-bild img {
	display: inline-block;
	max-width: 100%;
	max-height: 15em;
	width: auto;
	height: auto;
	border-radius: 6px;
}

/* --- Konzertreservierung: ticket --- */
/* @media breakpoints only: var() invalid in media conditions. */
@media (min-width: 992px) /* KONZERTRESERVIERUNG_TICKET_BG_LAYOUT_MIN_PX */ {
	.konzertreservierung-ticket-bild {
		display: none;
	}
	.konzertreservierung-ticket-bg {
		container-type: inline-size;
		width: 100%;
		margin: 0 0 1em;
		box-sizing: border-box;
		aspect-ratio: var(--konzertreservierung-ticket-bg-img-width) / var(--konzertreservierung-ticket-bg-img-height);
		background: url('../img/ticket_bg.jpg') no-repeat top center / 100% auto;
		padding: var(--konzertreservierung-ticket-padding-top) var(--konzertreservierung-ticket-padding-right) 0 var(--konzertreservierung-ticket-padding-left);
	}
	/* overflow fallback: gradient from ~86% image height (ticket card bottom) downward */
	.konzertreservierung-ticket-bg > .konzertreservierung-eckdaten {
		position: relative;
		z-index: 0;
	}
	.konzertreservierung-ticket-bg > .konzertreservierung-eckdaten::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: var(--konzertreservierung-ticket-card-height-default);
		bottom: 0;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 20px, rgba(255, 255, 255, 0.5) 100%);
		border-radius: 0 0 0.2em 0.2em;
		pointer-events: none;
		z-index: -1;
	}
}
@media (min-width: 992px) and (max-width: 1199px) /* KONZERTRESERVIERUNG_TICKET_BG_LAYOUT_MIN_PX, KONZERTRESERVIERUNG_TICKET_BG_WIDE_MIN_PX - 1 */ {
	.konzertreservierung-ticket-bg--higher {
		background-image: url('../img/ticket_bg_big.jpg');
		padding-top: var(--konzertreservierung-ticket-padding-top-higher);
	}
	.konzertreservierung-ticket-bg--higher > .konzertreservierung-eckdaten::after {
		top: var(--konzertreservierung-ticket-card-height-higher);
	}
}
@media (max-width: 991px) /* KONZERTRESERVIERUNG_TICKET_BG_LAYOUT_MIN_PX - 1 */ {
	.konzertreservierung-ticket-bg {
		background: none;
		padding: 0;
		margin: 0;
		aspect-ratio: auto;
	}
	.konzertreservierung-eckdaten--below-ticket:not(:empty) {
		margin-top: 1em;
	}
}

/* --- Konzertreservierung: eckdaten --- */
.konzertreservierung-eckdaten-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5em 2.5em;
	margin-bottom: 1em;
}
.konzertreservierung-eckdaten-block { flex: 0 0 auto; }
.konzertreservierung-eckdaten > .konzertreservierung-eckdaten-block { margin-bottom: 1em; }
.konzertreservierung-eckdaten > .konzertreservierung-eckdaten-block:last-child { margin-bottom: 0; }
.konzertreservierung-eckdaten-label { font-weight: bold; margin-bottom: 0.25em; }
.konzertreservierung-eckdaten-wert { margin: 0; }
a.konzertreservierung-ort-link,
a.konzertreservierung-ort-name-link,
a.konzertreservierung-ort-email-link {
	color: inherit;
	text-decoration: underline;
}
a.konzertreservierung-ort-link:hover,
a.konzertreservierung-ort-link:focus,
a.konzertreservierung-ort-name-link:hover,
a.konzertreservierung-ort-name-link:focus,
a.konzertreservierung-ort-email-link:hover,
a.konzertreservierung-ort-email-link:focus {
	color: inherit;
}
a.konzertreservierung-oeffi-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	color: inherit;
	text-decoration: none;
}
.konzertreservierung-oeffi-link-icon {
	line-height: 0;
	flex-shrink: 0;
}
.konzertreservierung-oeffi-link-icon .svg-icon {
	display: block;
	vertical-align: 0;
}
.konzertreservierung-oeffi-link-text {
	text-decoration: underline;
}
a.konzertreservierung-oeffi-link:hover,
a.konzertreservierung-oeffi-link:focus {
	color: inherit;
}
.konzertreservierung-oeffi-link-line {
	margin-top: 0.5em;
}
#konzertreservierung-map {
	scroll-margin-top: 1em;
}
.konzertreservierung-eckdaten-preis { margin-bottom: 0.75em; }
.konzertreservierung-beschreibung {
	padding: 0.3em 0.5em;
	padding-left: 0.4em;
	border-left: solid 0.3em rgba(0, 0, 0, 0.2);
}
.konzertreservierung-reservierung-art-hinweis {
	margin-top: 0.75em;
}

/* --- Konzertreservierung: form --- */
#form-root.typ-privat .feld_gruppe { display: none; }
#form-root.typ-gruppe .feld_privat { display: none; }
#form-root.typ-privat .emph_privat { font-weight: bold; }
#form-root.typ-gruppe .emph_gruppe { font-weight: bold; }
#form-root > .row { margin-left: -15px; margin-right: -15px; }
.konzertreservierung-plz-stadt-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 15px;
}
.konzertreservierung-feld-plz {
	flex: 0 0 auto;
	width: 7.5em;
	max-width: 11em;
}
.konzertreservierung-feld-stadt {
	flex: 1 1 10em;
	min-width: 0;
}
#nachricht {
	min-width: 100%;
	max-width: 100%;
}

/* --- Mailfish (form errors) --- */
div.mailfish_errormsgs {
	padding-bottom: 5px;
	margin-bottom: 15px;
}
div.mailfish_errormsgs div {
	margin-bottom: 10px;
}
div.mailfish_errormsg {
	color: #9d1e04;
}
span.mailfish_errorhighlight_inline {
	display: inline;
}
span.mailfish_errorhighlight_block {
	display: block;
}
span.mailfish_errorhighlight_inline, span.mailfish_errorhighlight_block {
	background-color: #ff0000;
	border-radius: 5px;
	padding: 1px;
}
span.mailfish_errorhighlight_inline:has(>input[type="checkbox"]:only-child) {
	position: absolute;
	margin-left: -20px;
	border-radius: 3px;
	width: 20px;
	text-align: center;
}
span.mailfish_errorhighlight_inline>input[type="checkbox"]:only-child {
	margin-left: 0 !important;
	position: relative !important;
}

/* --- Konzertreservierung: map --- */
.konzertreservierung-map {
	margin: 2em -15px -30px;
	border-radius: 0 0 6px 6px;
	overflow: hidden;
}
@media (min-width: 768px) {
	.konzertreservierung-map {
		margin-left: -60px;
		margin-right: -60px;
		margin-bottom: -48px;
	}
}
.konzertreservierung-map-frame {
	position: relative;
	--konzertreservierung-map-height: 280px;
}
@media (min-width: 768px) {
	.konzertreservierung-map-frame {
		--konzertreservierung-map-height: 320px;
	}
}
.konzertreservierung-map-frame--expanded {
	--konzertreservierung-map-height: 90vh;
}
.konzertreservierung-map-body {
	height: var(--konzertreservierung-map-height);
	transition: height 0.25s ease;
	overflow: hidden;
}
.konzertreservierung-map-body iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.konzertreservierung-map-toolbar {
	position: absolute;
	top: 0.45em;
	right: 0.45em;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	justify-content: flex-end;
	max-width: calc(100% - 0.9em);
	pointer-events: auto;
}
.konzertreservierung-map-toolbar .btn {
	font-size: 12px;
	line-height: 1.3;
	padding: 0.35em 0.55em;
	white-space: nowrap;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.konzertreservierung-map-toolbar .svg-icon {
	margin-right: 0.3em;
}
.konzertreservierung-map-consent {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	box-sizing: border-box;
	padding: 1.5em;
	text-align: center;
	background: linear-gradient(145deg, #dceef3 0%, #eef6f9 42%, #f3efe8 100%);
	overflow: hidden;
}
.konzertreservierung-map-consent-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.konzertreservierung-map-consent-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 36em;
	padding: 1.1em 1.25em;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: 0 2px 16px rgba(72, 92, 99, 0.12);
}
.konzertreservierung-map-consent-text {
	max-width: 36em;
	margin: 0 0 1em;
	line-height: 1.45;
}

/* --- Embedded video (YouTube etc.) --- */
.embed-16x9 {
	display: block;
	width: 560px;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* --- Thumbnail overlay (initThumbnailOverlay in js/scripts.js) --- */
body.thumbnail-overlay-open {
	overflow: hidden;
}

.thumbnail-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 2000;
}

.thumbnail-overlay.is-open {
	display: block;
}

.thumbnail-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	cursor: pointer;
}

.thumbnail-overlay__content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 16px 16px;
	pointer-events: none;
}

.thumbnail-overlay__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
	cursor: default;
}

.thumbnail-overlay__close {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 1;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.85;
}

.thumbnail-overlay__close:hover,
.thumbnail-overlay__close:focus {
	opacity: 1;
}

/* --- Inline audio player (initInlineAudioPlayer in js/scripts.js) --- */
.audio-player-bar {
	position: sticky;
	top: 15px;
	z-index: 1500;
	margin: 8px 15px 10px;
	background-color: rgba(255, 255, 255, 0.96);
	border: solid 1px #2e6da4;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: #334466;
}

.audio-player-bar--error {
	border-color: #a94442;
	background-color: rgba(255, 245, 245, 0.98);
}

.audio-player-bar--error .audio-player-bar__title {
	color: #a94442;
}

a.audio-link--active {
	font-weight: bold;
	line-height: 1.35;
}

a.audio-link--active:active, a.audio-link--active:focus {
	outline: none;
}

a.audio-link--active .audio-link__state-icon {
	width: 1.3em;
	height: 1.3em;
	margin-top: -1.3em;
	margin-left: -0.25em;
	margin-right: 0.15em;
	vertical-align: -0.25em;
	line-height: 0;
}

.audio-player-bar[hidden] {
	display: none;
}

.audio-player-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	padding: 8px 10px;
}

.audio-player-bar__play,
.audio-player-bar__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: #337ab7;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}

.audio-player-bar__play {
	width: 32px;
	height: 32px;
	border-radius: 4px;
}

.audio-player-bar__play:hover,
.audio-player-bar__play:focus,
.audio-player-bar__close:hover,
.audio-player-bar__close:focus {
	color: #23527c;
	background-color: rgba(51, 122, 183, 0.08);
}

.audio-player-bar__play .svg-icon {
	width: 1.25em;
	height: 1.25em;
}

.audio-player-bar__title {
	flex: 1 1 120px;
	min-width: 0;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.audio-player-bar__progress-wrap {
	flex: 2 1 140px;
	min-width: 100px;
}

.audio-player-bar__progress,
.audio-player-bar__volume {
	width: 100%;
	margin: 0;
	vertical-align: middle;
	accent-color: #337ab7;
}

.audio-player-bar__progress:disabled,
.audio-player-bar__volume:disabled {
	opacity: 0.45;
}

.audio-player-bar__play:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.audio-player-bar__time {
	flex: 0 0 auto;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: #555;
}

.audio-player-bar__volume-wrap {
	flex: 0 1 110px;
	min-width: 80px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.audio-player-bar__mute {
	flex: 0 0 auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: #337ab7;
	cursor: pointer;
	padding: 4px;
	line-height: 1;
}

.audio-player-bar__mute:hover,
.audio-player-bar__mute:focus {
	color: #23527c;
	background-color: rgba(51, 122, 183, 0.08);
	border-radius: 4px;
}

.audio-player-bar__mute .svg-icon {
	flex-shrink: 0;
	width: 1em;
	height: 1em;
}

.audio-player-bar__mute.is-muted::after {
	content: '';
	position: absolute;
	left: 3px;
	right: 3px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: currentColor;
	transform: rotate(-45deg);
	pointer-events: none;
}

.audio-player-bar__close {
	font-size: 28px;
	padding: 0 4px 2px;
	opacity: 0.85;
}

@media (max-width: 600px) {
	.audio-player-bar__title {
		flex-basis: calc(100% - 80px);
		order: 1;
	}
	.audio-player-bar__play {
		order: 0;
	}
	.audio-player-bar__close {
		order: 2;
		margin-left: auto;
	}
	.audio-player-bar__progress-wrap {
		flex-basis: 100%;
		order: 3;
	}
	.audio-player-bar__time {
		order: 4;
	}
	.audio-player-bar__volume-wrap {
		flex: 1 1 auto;
		order: 5;
	}
}