@font-face {
	font-family: 'Silka';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/silka-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Silka';
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/silka-medium.woff2') format('woff2');
}

:root {
	--color-accent-1: #b31114;
	--color-accent-2: #d36b6c;
	--color-accent-3: #9a0e0e;

	--color-text-1: #000;
	--color-text-2: #878787;

	--color-background-1: #fff;
	--color-background-2: #e3e3e3;
	--color-background-3: #f8f8f8;
	--color-transparent-background-1: rgba(0, 0, 0, 0.9);

	--color-success-1: #00c851;
	--color-success-2: rgba(0, 200, 81, 0.2);
	--color-warning: #ffbb33;
	--color-error: #e23636;
	--color-information: #4a90e2;
	--color-silver-gradient-1: linear-gradient(
		45deg,
		hsl(12deg 4% 45%) 0%,
		hsl(347deg 3% 60%) 39%,
		hsl(304deg 2% 75%) 55%,
		hsl(240deg 2% 90%) 66%,
		hsl(304deg 2% 75%) 76%,
		hsl(347deg 3% 60%) 86%,
		hsl(12deg 4% 45%) 100%
		);
	--color-silver-gradient-2: linear-gradient(
			45deg,
			hsl(12deg 4% 45%) 1%,
			hsl(351deg 3% 56%) 31%,
			hsl(322deg 2% 67%) 43%,
			hsl(264deg 2% 79%) 52%,
			hsl(264deg 2% 79%) 60%,
			hsl(322deg 2% 67%) 69%,
			hsl(351deg 3% 56%) 78%,
			hsl(12deg 4% 45%) 100%
		);
	--color-gold-gradient-1: linear-gradient(
		45deg,
		hsl(38deg 75% 39%) 0%,
		hsl(40deg 63% 46%) 39%,
		hsl(44deg 64% 57%) 55%,
		hsl(50deg 84% 73%) 66%,
		hsl(44deg 64% 57%) 76%,
		hsl(40deg 63% 46%) 86%,
		hsl(38deg 75% 39%) 100%
	);
	--color-gold-gradient-2: linear-gradient(
		45deg,
		hsl(38deg 75% 39%) 0%,
		hsl(40deg 59% 47%) 11%,
		hsl(42deg 57% 54%) 21%,
		hsl(45deg 65% 62%) 31%,
		hsl(48deg 77% 70%) 41%,
		hsl(52deg 98% 78%) 51%,
		hsl(48deg 77% 70%) 61%,
		hsl(45deg 65% 61%) 70%,
		hsl(42deg 57% 53%) 80%,
		hsl(39deg 61% 45%) 90%,
		hsl(37deg 80% 37%) 100%
	);

	--top-bar-height: 80px;
	--navigation-height: 50px;

	--shadow-low: 0.3px 0.6px 0.8px hsl(0deg 0% 0%  / 0.3),
	0.5px 1px 1.3px -1.2px hsl(0deg 0% 0%  / 0.1),
	1.3px 2.4px 3.1px -2.5px hsl(0deg 0% 0%  / 0.1);

	--shadow-medium: 0.3px 0.5px 0.7px hsl(0deg 0% 0% / 0.07),
	0.8px 1.6px 2px -0.8px hsl(0deg 0% 0% / 0.07),
	2.1px 4.1px 5.2px -1.7px hsl(0deg 0% 0% / 0.07),
	5px 10px 12.6px -2.5px hsl(0deg 0% 0% / 0.07);

	--shadow-high: -1px -1px 5px hsl(0deg 0% 0% / 0.1),
	0.3px 0.5px 0.7px hsl(0deg 0% 0% / 0.1),
	1.5px 2.9px 3.7px -0.4px hsl(0deg 0% 0% / 0.1),
	2.7px 5.4px 6.8px -0.7px hsl(0deg 0% 0% / 0.1),
	4.5px 8.9px 11.2px -1.1px hsl(0deg 0% 0% / 0.1),
	7.1px 14.3px 18px -1.4px hsl(0deg 0% 0% / 0.1),
	11.2px 22.3px 28.1px -1.8px hsl(0deg 0% 0% / 0.1),
	17px 33.9px 42.7px -2.1px hsl(0deg 0% 0% / 0.1);
}

*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

::selection {
	background-color: rgba(127, 127, 127, 0.5);
	text-shadow: none;
}

html {
	font-family: 'Silka', Arial, sans-serif;
	font-size: 16px; /* in html (not in body) for the CSS 'rem' unit */
	text-size-adjust: none; /* property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property. We don't want to automatically resize on mobile. */
	line-height: 1.5;
	height: 100%;
	interpolate-size: allow-keywords;
	scrollbar-width: thin;
	scrollbar-color: #aaa #eee;
}

body {
	background: var(--color-background-1);
	color: var(--color-text-1);
	height: 100%;
	scrollbar-color: var(--color-text-2) transparent;
}

html:has(dialog[open]) {
	/* When dialog is shown, show scrollbar to avoid page flicker if scrollbar would disappear */
	scrollbar-gutter: stable;
	body {
		overflow: hidden;
	}
}

a {
	color: inherit;
	text-decoration: underline;
	-webkit-tap-highlight-color: transparent;
}

/* not([class]): Do not apply opacity to any tags with classes (e.g. buttons) */
a:not([class]):active {
	color: var(--color-accent-1);
}

ul {
	padding: 0 0 0 24px;
	list-style-type: square;
}

ol {
	padding: 0 0 0 24px;
}

img {
	vertical-align: text-bottom;
}

h1 {
	font-size: 1.6rem;
}

h1.page-headline {
	text-align: center;
	padding: 32px 0 32px 0;
}

h2 {
	font-size: 1.3rem;
}

h2.page-headline {
	text-align: center;
	padding: 24px 0 24px 0;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var(--color-text-2);
}

p {
	padding-bottom: 16px;
}

hr {
	border: none;
	height: 2px;
	margin: 0;
	background: var(--color-background-2);
}

.top-bar {
	z-index: 5;
	position: fixed;
	height: var(--top-bar-height);
	width: 100%;
	padding: 24px 16px;
	text-align: center;
	background: var(--color-text-1);
	color: var(--color-background-1);
	display: flex;
	justify-content: center;
}

.top-bar a {
	text-decoration: none;
}

.top-bar a:active {
	opacity: 1;
}

.top-bar-content {
	width: 100%;
	max-width: 1024px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.top-bar-right {
	flex: 1 1 100%;
	display: flex;
	justify-content: end;
	align-items: center;
}

.top-bar-right > a {
	display: block;
	padding: 16px 16px;
}

.top-bar-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	border-radius: 16px;
	padding: 1px 6px;
	font-size: 0.65rem;
	font-weight: bold;
	background: var(--color-background-1);
	color: var(--color-text-1);
}

.top-bar-right img {
	height: 20px;
	width: 20px;
	filter: invert(1);
}

.navigation {
	display: flex;
	position: fixed;
	top: calc(var(--top-bar-height) - 6px); /* 6px behind top bar to avoid render issues due to rubberband effects */
	height: calc(var(--navigation-height) + 6px);
	width: 100%;
	overflow-x: auto;
	justify-content: safe center;
	align-items: center;
	padding: 6px 32px 0 32px;
	z-index: 5;
	background: var(--color-text-1);
	box-shadow: var(--shadow-low);
}

.page-container {
	padding-top: var(--top-bar-height);
	min-height: 100svh;
}

.page-container:has(> .navigation) {
	padding-top: calc(var(--top-bar-height) + var(--navigation-height));
}

.content-container {
	padding: 0 32px;
}

.content-container-maximum-width {
	padding: 0;
}

.content-container > h1 {
	margin: 32px 0 16px 0;
}

.heading-with-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 32px 0 16px 0;
	gap: 12px;
}

.content-container-maximum-width .heading-with-buttons {
	padding: 0 32px;
}

footer {
	padding: 32px;
	font-size: 0.8rem;
	max-width: 1024px;
	margin: 0 auto;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	flex-direction: column;
}

footer a, footer span {
	padding: 8px 0;
	text-decoration: none;
	white-space: nowrap;
}

.event-tile-container {
	display: flex;
	flex-direction: column;
}

.event-tile {
	width: 100%;
	position: relative;
	display: flex;
	border-bottom: 2px solid var(--color-background-1);
	padding: 32px 16px;
	gap: 32px;
}

.event-tile::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: url("../images/match-tile-gradient.svg") 0 100% repeat-x,
	url("../images/match-tile-gradient-thin.svg") 20px 100% repeat-x,
	url("../images/match-tile-gradient-thin.svg") 40px 100% repeat-x;
	mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 60%),
	linear-gradient(to top, rgba(0, 0, 0, 0.11) 0%, rgba(0, 0, 0, 0.03) 20px, rgba(0, 0, 0, 0) 40px);
	background-size: 60px;
	pointer-events: none;
	border-radius: inherit;
}

.event-tile-content-left {
	flex: 2 2 140px;
	display: flex;
	flex-direction: row !important;
	justify-content: center;
	align-items: center;
}

.event-tile-content-left img {
	height: 44px;
}

.event-tile-content-right {
	flex: 1 1 260px;
	display: flex;
	gap: 16px;
	flex-direction: column;
	justify-content: center;
	align-items: start;
}

.carousel {
	position: relative;
}

.carousel-container {
	padding: 24px 24px 56px 24px;
	text-align: center;
	gap: 32px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	display: flex;
	justify-content: safe center;
	scroll-padding: 24px;
	scrollbar-width: none;
}

.carousel-item {
	scroll-snap-align: center;
	text-align: center;
	width: 360px;
	flex: 0 0 330px;
}

.carousel-indicators {
	position: absolute;
	bottom: 20px;
	left: 0;
	display: flex;
	flex-direction: row;
	gap: 12px;
	width: 100%;
	justify-content: center;
}

.carousel-indicators div {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transition: background-color 100ms linear;
	background-color: var(--color-text-2);
	cursor: pointer;
}

.carousel-indicators div.active {
	background-color: var(--color-accent-1);
}

.features-list div::before {
	content: "";
	width: 24px;
	height: 24px;
	mask-image: url('../images/check.svg');
	mask-size: 20px 20px;
	mask-repeat: no-repeat;
	background-color: var(--color-accent-1);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.features-list div {
	padding: 8px 8px 8px 48px;
	position: relative;
	text-align: left;
}

.features-list-business_gold div::before {
	mask-image: url('../images/seal-check.svg');
	background: var(--color-gold-gradient-1);
}

.features-list-business_silver div::before {
	mask-image: url('../images/seal-check.svg');
	background: var(--color-silver-gradient-1);
}

.event-details-tile-info {
	margin-bottom: 24px;
	background-color: var(--color-background-1);
	border: 1px solid var(--color-background-2);
	border-width: 1px 0;
	border-radius: 0;
	transition: background-color ease-out 0.2s;
	display: flex;
	flex-direction: column;
}

.event-details-tile-info > div:first-child {
	display: flex;
	align-items: center;
	text-align: left;
	gap: 12px;
	padding: 24px;
}

.event-details-tile-price-category-container {
	transition: height ease 0.2s;
	overflow: hidden;
}

.event-details-tile-price-category-container > div {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 24px 24px 24px;
}

.event-details-tile-price-category {
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-radius: 12px;
	border: 1px solid var(--color-background-2);
	background: var(--color-background-2);
}

.event-details-tile-price-category > div:nth-child(1) {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.event-details-tile-price-category > div:nth-child(2) {
	flex: 0 0 auto;
}

.event-details-tile-price-category > div > div:nth-child(2) {
	display: flex;
	align-items: center;
	font-size: 0.85rem;
}

.event-details-tile-price-category-count {
	padding: 12px 8px;
	font-variant: tabular-nums
}

.event-header-tile {
	display: flex;
	height: 420px;
	justify-content: space-between;
	flex-direction: column;
	padding: 60px 20px;
	background: url("../images/stripes-bg.svg") no-repeat, url("../images/admira-tile-bg.png") no-repeat, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)), url("../images/stadion.jpg") no-repeat center;
	background-size: 300px auto, 200px auto, cover, 1000px auto;
	background-position: -10px -10px, calc(100% + 40px) calc(100% + 40px), center, center;
	color: var(--color-background-1);
	text-align: center;
}

.bottom-bar-cart {
	/* see https://developer.chrome.com/docs/css-ui/edge-to-edge, Using padding-bottom to support Safari */
	padding-bottom: env(safe-area-inset-bottom, 0);
	background: var(--color-background-2);
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
}

.bottom-bar-cart > div {
	display: flex;
	gap: 32px;
	height: 80px;
	justify-content: center;
	align-items: center;
}

.information-badge, .warning-badge, .success-badge {
	border-radius: 16px;
	font-size: 0.8rem;
	padding: 2px 8px;
	white-space: nowrap;
	display: inline-block;
}

.information-badge {
	color: var(--color-text-2);
	background: var(--color-background-2);
}

.warning-badge {
	color: var(--color-accent-3);
	background: var(--color-accent-2);
	font-weight: bold;
}

.success-badge {
	color: var(--color-success-1);
	background: var(--color-success-2);
	font-weight: bold;
}

.price-tag {
	background: var(--color-accent-1);
	cursor: pointer;
	color: white;
	font-size: 0.6rem;
	font-weight: bold;
	text-transform: uppercase;
	padding: 6px 6px 6px 20px;
	border-radius: 30px 10px 10px 30px;
	transform: rotate(40deg);
}

.price-tag::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	width: 8px;
	height: 8px;
	background: var(--color-background-1);
	border-radius: 50%;
	transform: translateY(-50%);
}

.flex-column {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.flex-center-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.blinking-dot {
	width: 10px;
	height: 10px;
	background-color: var(--color-accent-1);
	border-radius: 50%;
	display: inline-block;
	animation: blink 1s infinite alternate;
	margin-left: 4px;
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.3;
	}
}

.longtext {
	text-align: justify;
	font-size: 0.95rem;
}

.longtext h1, .longtext h2, .longtext h3, .longtext h4, .longtext h5, .longtext h6 {
	text-align: initial;
}

.longtext h2 {
	padding: 24px 0 8px 0;
}

.longtext h3 {
	padding: 24px 0 4px 0;
}

.longtext ol, .longtext ul {
	margin: 0 0 16px 16px;
}

.text-with-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.card-container {
	margin-bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.card-body {
	border: 1px solid var(--color-background-2);
	border-radius: 24px;
	padding: 24px;
	width: 100%;
	background: var(--color-background-3);
}

.card-container-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-body-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

.card-body p {
	padding-bottom: 0;
}

.card-body-row {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 8px;
}

.card-body-row-description {
	width: 100%;
	text-align: left;
	font-size: 0.85rem;
}

.card-body-row-action {
	display: flex;
	align-items: center;
	width: 100%;
	padding-left: 0;
}

.card-body-row-action button,
.card-body-row-action a {
	width: 100%;
}

.small-light-text {
	color: var(--color-text-2);
	font-size: 0.8rem;
	padding: 0;
}

@media screen and (min-width: 799px) {
	.content-container {
		padding: 0 32px;
		max-width: 1024px;
		margin: 0 auto;
	}

	.content-container-maximum-width {
		padding: 0 32px;
		max-width: 1024px;
		margin: 0 auto;
	}

	.content-container-maximum-width .heading-with-buttons {
		padding: 0 0;
	}

	.event-details-tile-info {
		border-radius: 12px;
		border-width: 1px;
	}

	.event-tile-container {
		gap: 32px;
	}

	.event-tile {
		border: 1px solid var(--color-background-2);
		border-radius: 24px;
		padding: 32px;
		margin: 0 auto;
	}

	.event-tile-content-left {
		flex: 1 1 300px;
	}

	.event-tile-content-right {
		flex: 0 1 600px;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.event-details-tile-price-category > div:nth-child(1) {
		flex-direction: row;
		align-items: center;
	}

	.event-details-tile-price-category > div > div:nth-child(1) {
		flex: 0 0 250px;
	}

	.event-header-tile {
		height: 480px;
		background: url("../images/stripes-bg.svg") no-repeat, url("../images/admira-tile-bg.png") no-repeat, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)), url("../images/stadion.jpg") no-repeat center;
		background-size: 300px auto, 200px auto, cover, cover;
		background-position: -10px -10px, calc(100% + 40px) calc(100% + 40px), center, center;
	}

	.card-body-row {
		flex-direction: row;
		justify-content: space-between;
	}

	.card-body-row-description {
		width: auto;
	}

	.card-body-row-action {
		padding-left: 32px;
		width: auto;
	}

	footer {
		flex-direction: row;
		gap: 32px;
		padding-top: 64px;
	}

	footer span {
		margin-left: auto;
		text-align: right;
	}
}

@media print {
	footer, .top-bar {
		display: none;
	}

	.season-pass, .season-pass *, .season-pass-business_gold, .season-pass-business_gold *, .season-pass-business_silver, .season-pass-business_silver *, .ticket, .ticket * {
		background: none !important;
		background-clip: unset !important;
		color: var(--color-text-1) !important;
		mask-image: none !important;
	}

	.full-page-print {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		height: 90vh !important;
		width: 90vw !important;
		margin: 0 !important;
		padding: 0 !important;
		page-break-inside: avoid !important;
	}

	.season-pass-title-container {
		border-top: 2px solid var(--color-text-1) !important;
		border-image-source: unset !important;
	}

	.ticket-qr-mask-image > img {
		display: inline-block !important;
	}

	.ticket-settings-button-container {
		display: none;
	}
}