/*
 * EVF-Startseite — Frontend
 * Design-Tokens aus dem EV Füssen Design System.
 * Keine hellen Flächen außer dem gelben CTA-Streifen.
 */

.evf-startseite {
	--evf-black: #0b0b0c;
	--ink-950: #08090a;
	--ink-800: #18191c;
	--evf-yellow: #ffb400;
	--evf-yellow-deep: #c98a00;
	--evf-white: #fff;
	--result-win: #1e9e5a;
	--result-loss: #d23b36;

	--line: rgba(255, 255, 255, .14);
	--line-strong: rgba(255, 255, 255, .34);
	--text-2: rgba(255, 255, 255, .86);
	--text-3: rgba(255, 255, 255, .74);

	--display: 'Anton', 'Archivo Black', Impact, sans-serif;
	--body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ease-out: cubic-bezier(.2, .8, .2, 1);

	background: var(--evf-black);
	color: var(--evf-white);
	font-family: var(--body);
}

.evf-startseite *,
.evf-startseite *::before,
.evf-startseite *::after {
	box-sizing: border-box;
}

/* Helle Linkfarbe zuerst — sonst erbt alles im Anchor Schwarz auf Schwarz. */
.evf-startseite a {
	color: var(--evf-white);
	text-decoration: none;
}

.evf-startseite a:hover,
.evf-startseite a:focus-visible {
	color: var(--evf-yellow);
}

.evf-startseite :focus-visible {
	outline: 3px solid var(--evf-yellow);
	outline-offset: 2px;
}

.evf-startseite p {
	margin: 0;
}

.evf-startseite img {
	max-width: 100%;
}

.evf-startseite .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.evf-section {
	position: relative;
}

/* --- Bausteine -------------------------------------------------------- */

.evf-eyebrow {
	margin: 0 0 12px;
	font: 700 11px/1 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-3);
}

.evf-eyebrow--yellow {
	color: var(--evf-yellow);
}

.evf-h2 {
	margin: 0;
	font: 400 46px/1.05 var(--display);
	text-transform: uppercase;
	color: var(--evf-white);
	text-wrap: pretty;
}

.evf-mark {
	box-shadow: inset 0 -.16em 0 var(--evf-yellow);
}

.evf-chip {
	display: inline-block;
	padding: 7px 10px;
	background: var(--evf-yellow);
	color: var(--evf-black);
	font: 700 10.5px/1 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.evf-morelink {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--evf-yellow);
	font: 700 10.5px/1 var(--body);
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--evf-yellow);
}

.evf-morelink--white {
	font-size: 12px;
	color: var(--evf-white);
}

.evf-startseite .evf-morelink:hover {
	color: var(--evf-yellow);
}

/* Ticket-Button: gerader gelber Block, mittig, allein. */
.evf-startseite .evf-cta {
	display: inline-block;
	padding: 20px 54px 17px;
	background: var(--evf-yellow);
	color: var(--evf-black);
	border-bottom: 4px solid var(--evf-yellow-deep);
	transition: background .14s, transform .14s var(--ease-out);
}

.evf-cta > span {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	font: 400 23px/1 var(--display);
	letter-spacing: .035em;
	text-transform: uppercase;
}

.evf-startseite .evf-cta:hover,
.evf-startseite .evf-cta:focus-visible {
	background: var(--evf-white);
	border-bottom-color: var(--evf-yellow);
	color: var(--evf-black);
	transform: translateY(-2px);
}

.evf-startseite .evf-cta:active {
	transform: translateY(0);
	border-bottom-width: 2px;
	padding-bottom: 19px;
}

/* --- Slider ----------------------------------------------------------- */

.evf-slider {
	position: relative;
	height: min( var( --evf-slider-h, 560px ), 82vh );
	min-height: 420px;
	overflow: hidden;
	background: var(--evf-black);
}

.evf-slider__viewport,
.evf-slider__track {
	height: 100%;
}

.evf-slider__track {
	display: flex;
	transition: transform .55s var(--ease-out);
	will-change: transform;
}

.evf-slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	min-width: 0;
}

.evf-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.evf-slide__img--empty {
	display: block;
	background: var(--ink-800);
}

.evf-slide__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(75deg, rgba(11, 11, 12, .94) 0%, rgba(11, 11, 12, .82) 42%, rgba(11, 11, 12, .15) 78%, rgba(11, 11, 12, 0) 100%);
}

/*
 * Text, Punkte und Pfeile fluchten mit der Inhaltsbreite (.evf-boxed) der
 * Sektionen darunter — das Bild selbst bleibt über die volle Breite.
 */
.evf-slider {
	--evf-inset: max(24px, calc((100% - min(var(--evf-boxed-w, 80%), var(--evf-boxed-max, 1600px))) / 2));
}

.evf-slide__content {
	position: absolute;
	left: var(--evf-inset);
	bottom: 74px;
	width: min(600px, calc(100% - 128px));
}

.evf-slide__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.evf-slide__date {
	font: 700 11px/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	font-variant-numeric: tabular-nums;
}

.evf-slide__title {
	margin: 0 0 16px;
	font: 400 52px/1.06 var(--display);
	text-transform: uppercase;
	color: var(--evf-white);
	text-wrap: pretty;
}

.evf-slide__text {
	margin: 0 0 22px;
	font: 400 15px/1.65 var(--body);
	color: var(--text-2);
	text-wrap: pretty;
}

.evf-startseite .evf-slide__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: 700 12.5px/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--evf-yellow);
}

.evf-startseite .evf-slide__link:hover {
	color: var(--evf-white);
}

.evf-slider__arrows {
	position: absolute;
	right: var(--evf-inset);
	bottom: 74px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.evf-arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, .55);
	background: rgba(11, 11, 12, .45);
	color: var(--evf-white);
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}

.evf-arrow:hover {
	background: var(--evf-yellow);
	border-color: var(--evf-yellow);
	color: var(--evf-black);
}

.evf-slider__dots {
	position: absolute;
	left: var(--evf-inset);
	bottom: 44px;
	display: flex;
	gap: 7px;
}

.evf-dot {
	position: relative;
	width: 34px;
	height: 4px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .38);
	cursor: pointer;
}

/* Hit-Target auf 44 px bringen, ohne die Optik zu ändern. */
.evf-dot::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 34px;
	height: 44px;
	transform: translateY(-50%);
}

.evf-dot[aria-selected="true"] {
	background: var(--evf-yellow);
}

/* --- Match-Band ------------------------------------------------------- */

/* Nach dem Match-Band Luft lassen — der Ticket-Button hängt hinein. */
.evf-match + .evf-section {
	padding-top: 64px;
}

.evf-match {
	position: relative;
	/* Der Ticket-Button hängt über die Unterkante hinaus. */
	overflow: visible;
	background: var(--evf-yellow);
	color: var(--evf-black);
	padding: 34px 44px 46px;
}

.evf-match--js {
	min-height: 360px;
}

/*
 * Eigene, geclippte Ebene für die Wappen-Prägung: die Sektion selbst darf
 * nicht clippen (der Ticket-Button hängt über die Unterkante hinaus), sonst
 * ragt das Wappen aber oben in den Slider hinein.
 */
.evf-match__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.evf-match__watermark {
	position: absolute;
	left: 50%;
	top: -140px;
	width: 440px;
	height: auto;
	transform: translateX(-50%);
	/* Auf Gelb als dunkle Prägung statt weißem Schleier. */
	filter: brightness(0);
	opacity: .05;
}

.evf-match__inner {
	position: relative;
}

.evf-match__eyebrow {
	margin: 0 0 28px;
	text-align: center;
	letter-spacing: .18em;
	color: rgba(11, 11, 12, .72);
}

.evf-match__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 40px;
}

.evf-match__team {
	display: flex;
	align-items: center;
	gap: 20px;
}

.evf-match__team--home {
	justify-content: flex-end;
	text-align: right;
}

.evf-match__teamname {
	font: 400 30px/1.06 var(--display);
	text-transform: uppercase;
	color: var(--evf-black);
}

.evf-match__side {
	margin-top: 7px;
	font: 700 10.5px/1 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(11, 11, 12, .62);
}

.evf-match__center {
	min-width: 210px;
	text-align: center;
}

.evf-match__date {
	font: 400 44px/1 var(--display);
	color: var(--evf-black);
	font-variant-numeric: tabular-nums;
}

.evf-match__time {
	margin-top: 8px;
	padding: 3px 14px;
	display: inline-block;
	font: 400 30px/1.15 var(--display);
	background: var(--evf-black);
	color: var(--evf-yellow);
	font-variant-numeric: tabular-nums;
}

.evf-match__weekday {
	margin-top: 11px;
	font: 600 11px/1 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(11, 11, 12, .62);
}

.evf-match__venue {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	font: 600 11.5px/1.4 var(--body);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(11, 11, 12, .8);
}

.evf-match__venue svg {
	flex: none;
	stroke: var(--evf-black);
}

.evf-match__cta {
	position: absolute;
	left: 0;
	right: 0;
	/* Ankert an __inner; die Sektionskante liegt das Padding (46px) tiefer. */
	bottom: -46px;
	display: flex;
	justify-content: center;
	/* Halb über der Unterkante: der Button wächst aus der gelben Fläche. */
	transform: translateY(50%);
	z-index: 2;
}

/*
 * Der Button setzt das Gelb der Fläche nahtlos fort und läuft mit
 * angewinkelten Ecken in den schwarzen Bereich darunter aus.
 */
.evf-match .evf-ticketbtn {
	clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%);
	border-bottom: 0;
	box-shadow: none;
}

.evf-match .evf-ticketbtn:hover,
.evf-match .evf-ticketbtn:focus-visible {
	background: var(--evf-yellow-deep);
}

/* Teamlogos */
.evf-team__logo {
	flex: none;
	object-fit: contain;
	background: var(--evf-white);
	border-radius: 50%;
}

.evf-team__logo.is-evf {
	/* Das API-Wappen behält wie die Gegner den weißen Kreis. */
	background: var(--evf-white);
	border-radius: 50%;
}

/* Kürzel-Rückfall auf Gelb: dunkel statt weiß. */
.evf-match .evf-team__badge {
	background: var(--evf-black);
	color: var(--evf-yellow);
}

.evf-team__logo--lg {
	width: 92px;
	height: 92px;
}

.evf-team__logo--md {
	width: 36px;
	height: 36px;
}

.evf-team__logo--sm {
	width: 26px;
	height: 26px;
}

.evf-team__badge {
	flex: none;
	display: grid;
	place-items: center;
	font-family: var(--display);
	color: var(--evf-black);
}

.evf-team__badge--lg {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: var(--evf-white);
	font-size: 24px;
	line-height: 1;
}

.evf-team__badge--md {
	width: 36px;
	height: 36px;
	border: 1px solid var(--line-strong);
	font-size: 12px;
	line-height: 1;
	color: rgba(255, 255, 255, .9);
}

.evf-team__badge--sm {
	width: 26px;
	height: 26px;
	border: 1px solid rgba(255, 255, 255, .32);
	font-size: 9.5px;
	line-height: 1;
	color: rgba(255, 255, 255, .88);
}

/* --- Spielplan und Tabelle -------------------------------------------- */

.evf-plan {
	background: var(--evf-black);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 52px 44px 58px;
}

.evf-plan__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	align-items: start;
}

.evf-plan__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 16px;
}

.evf-plan__title {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.evf-plan__h2 {
	margin: 0;
	font: 400 32px/1 var(--display);
	text-transform: uppercase;
	color: var(--evf-white);
}

.evf-plan__sub {
	font: 700 13px/1 var(--body);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}

.evf-games,
.evf-table {
	border: 1px solid rgba(255, 255, 255, .1);
}

.evf-game {
	display: grid;
	grid-template-columns: 104px 1fr 36px 76px 36px 1fr;
	gap: 14px;
	align-items: center;
	padding: 11px 18px;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.evf-game.is-alt {
	background: rgba(255, 255, 255, .05);
}

.evf-game__when {
	text-align: center;
}

.evf-game__weekday {
	font: 600 9.5px/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.evf-game__date {
	margin-top: 4px;
	font: 700 13px/1.2 var(--body);
	color: var(--evf-white);
	font-variant-numeric: tabular-nums;
}

.evf-game__time {
	margin-top: 2px;
	font: 600 10.5px/1 var(--body);
	color: rgba(255, 255, 255, .74);
	font-variant-numeric: tabular-nums;
}

.evf-game__team {
	font: 600 13.5px/1.3 var(--body);
	color: var(--text-2);
}

.evf-game__team--home {
	text-align: right;
}

.evf-game__team.is-evf {
	font-weight: 700;
	color: var(--evf-white);
}

.evf-game__logo {
	display: grid;
	place-items: center;
}

.evf-game__result {
	text-align: center;
	font: 400 22px/1 var(--display);
	font-variant-numeric: tabular-nums;
}

.evf-game__result.is-win {
	color: var(--result-win);
}

.evf-game__result.is-loss {
	color: var(--result-loss);
}

.evf-game__result.is-draw {
	color: var(--evf-white);
}

.evf-game__result.is-upcoming {
	color: var(--evf-yellow);
}

.evf-table__head,
.evf-table__row {
	display: grid;
	grid-template-columns: 26px 30px 1fr 34px 40px 66px;
	gap: 10px;
	align-items: center;
	padding: 9px 14px;
}

.evf-table__head {
	background: rgba(255, 255, 255, .06);
	font: 700 9.5px/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .74);
}

.evf-table__row {
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.evf-table__gap {
	padding: 4px 14px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--text-3);
	font: 700 12px/1 var(--body);
	text-align: center;
}

.evf-table__rank {
	font: 700 12px/1 var(--body);
	color: rgba(255, 255, 255, .74);
	font-variant-numeric: tabular-nums;
}

.evf-table__logo {
	flex: none;
	width: 26px;
	height: 26px;
	object-fit: contain;
	background: var(--evf-white);
	border-radius: 50%;
	padding: 2px;
}

.evf-table__badge {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(255, 255, 255, .32);
	font: 400 9.5px/1 var(--display);
	color: rgba(255, 255, 255, .88);
}

.evf-table__name {
	font: 700 11.5px/1.25 var(--body);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
}

.evf-table__num {
	font: 600 11.5px/1 var(--body);
	color: rgba(255, 255, 255, .78);
	font-variant-numeric: tabular-nums;
}

.evf-table__num.is-center {
	font-size: 12px;
}

.evf-table__pts {
	font: 700 13px/1 var(--body);
	color: var(--evf-white);
	font-variant-numeric: tabular-nums;
}

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

.is-right {
	text-align: right;
}

/* Die EVF-Zeile ist vollflächig gelb. */
.evf-table__row.is-evf {
	background: var(--evf-yellow);
}

.evf-table__row.is-evf .evf-table__rank,
.evf-table__row.is-evf .evf-table__num {
	color: rgba(0, 0, 0, .7);
}

.evf-table__row.is-evf .evf-table__name,
.evf-table__row.is-evf .evf-table__pts {
	color: var(--evf-black);
}

.evf-table__row.is-evf .evf-table__badge {
	border-color: rgba(0, 0, 0, .3);
	color: rgba(0, 0, 0, .75);
}

/* --- News-Grid -------------------------------------------------------- */

.evf-news {
	background: var(--evf-black);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 66px 44px 70px;
}

.evf-news__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 30px;
}

.evf-news__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.evf-startseite .evf-card {
	display: block;
	background: var(--ink-800);
	border: 2px solid var(--line);
	color: var(--evf-white);
	transition: transform .18s var(--ease-out), box-shadow .18s;
}

.evf-startseite .evf-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(11, 11, 12, .5);
	color: var(--evf-white);
}

.evf-card__media {
	height: 186px;
	overflow: hidden;
}

.evf-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evf-card__img--empty {
	background: #101114;
}

.evf-card__body {
	padding: 20px 22px 24px;
	border-top: 2px solid var(--line);
}

.evf-card__meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
	font: 600 10.5px/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.evf-card__cat {
	color: var(--evf-yellow);
}

.evf-card__dot {
	color: rgba(255, 255, 255, .25);
}

.evf-card__date {
	color: rgba(255, 255, 255, .72);
	font-variant-numeric: tabular-nums;
}

.evf-card__title {
	margin: 0 0 10px;
	font: 400 24px/1.06 var(--display);
	text-transform: uppercase;
	color: var(--evf-white);
	text-wrap: pretty;
}

.evf-card__text {
	margin: 0;
	font: 400 13.5px/1.6 var(--body);
	color: rgba(255, 255, 255, .75);
	text-wrap: pretty;
}

/* --- Bild-Kacheln ----------------------------------------------------- */

.evf-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background: var(--evf-black);
}

.evf-tiles[data-count="1"] {
	grid-template-columns: 1fr;
}

.evf-tiles[data-count="3"] {
	grid-template-columns: repeat(3, 1fr);
}

.evf-tiles[data-count="4"] {
	grid-template-columns: repeat(4, 1fr);
}

.evf-startseite .evf-tile {
	position: relative;
	display: block;
	height: 300px;
	overflow: hidden;
	color: var(--evf-white);
	border-left: 2px solid var(--evf-black);
}

.evf-tiles > .evf-tile:first-child {
	border-left: 0;
}

.evf-tile__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evf-tile__img--empty {
	background: var(--ink-800);
}

.evf-tile__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(11, 11, 12, .9) 0%, rgba(11, 11, 12, .25) 55%, rgba(11, 11, 12, .1) 100%);
}

.evf-tile__content {
	position: absolute;
	left: 44px;
	right: 44px;
	bottom: 36px;
}

.evf-tile__title {
	margin: 0;
	font: 400 36px/1.05 var(--display);
	text-transform: uppercase;
	color: var(--evf-white);
	text-wrap: pretty;
}

.evf-tile__text {
	margin-top: 10px;
	font: 400 13.5px/1.6 var(--body);
	color: rgba(255, 255, 255, .82);
}

.evf-startseite a.evf-tile:hover .evf-tile__title {
	color: var(--evf-yellow);
}

/* --- Zahlen ----------------------------------------------------------- */

.evf-numbers {
	position: relative;
	overflow: hidden;
	background: var(--evf-black);
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 70px 64px 74px;
}

.evf-numbers__watermark {
	position: absolute;
	right: -90px;
	bottom: -90px;
	width: 420px;
	height: auto;
	opacity: .05;
	pointer-events: none;
}

.evf-numbers__head {
	position: relative;
	text-align: center;
	margin-bottom: 44px;
}

.evf-numbers__head .evf-eyebrow {
	margin-bottom: 16px;
	letter-spacing: .18em;
}

.evf-numbers__claim {
	margin: 0;
	font: 400 58px/1.05 var(--display);
	text-transform: uppercase;
	color: var(--evf-white);
	text-wrap: pretty;
}

.evf-numbers__claim .evf-mark {
	box-shadow: inset 0 -.14em 0 var(--evf-yellow);
}

.evf-numbers__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid rgba(255, 255, 255, .16);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.evf-numbers__grid[data-count="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.evf-numbers__grid[data-count="4"] {
	grid-template-columns: repeat(4, 1fr);
}

.evf-numbers__cell {
	padding: 34px 24px;
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.evf-numbers__cell:first-child {
	border-left: 0;
}

.evf-numbers__value {
	font: 400 64px/1 var(--display);
	color: var(--evf-white);
	font-variant-numeric: tabular-nums;
}

.evf-numbers__value.is-accent {
	color: var(--evf-yellow);
}

.evf-numbers__label {
	margin-top: 12px;
	font: 600 11.5px/1 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

/* --- CTA-Streifen ----------------------------------------------------- */

/* ------------------------------------------------ Browser-Renderer wartet */
.evf-startseite .evf-client-debug {
	padding: 18px 22px;
	font: 400 13px/1.6 var(--body, "Archivo", system-ui, sans-serif);
	color: rgba(255, 255, 255, .78);
	border: 1px dashed rgba(255, 180, 0, .5);
}

.evf-startseite .evf-client-debug strong {
	display: block;
	margin-bottom: 6px;
	color: var(--evf-yellow, #FFB400);
}


/*
 * Solange hd-client.js die Daten holt, halten die Flächen ihre Höhe —
 * sonst springt die Seite, wenn das Match-Band auftaucht.
 */
.evf-match--wait .evf-match__grid {
	min-height: 190px;
}

.evf-plan--wait .evf-games {
	min-height: 340px;
}

.evf-plan--wait .evf-table {
	min-height: 340px;
}

/* ------------------------------------------------------- Inhaltsbreite */

/*
 * Sektionen ohne „Volle Fensterbreite“ stehen zentriert auf der
 * Inhaltsbreite des Themes (Divi-Zeilen: 80 %). Über die beiden Variablen
 * lässt sich das per CSS anpassen.
 */
.evf-startseite .evf-boxed {
	width: min(var(--evf-boxed-w, 80%), 100%);
	max-width: var(--evf-boxed-max, 1600px);
	margin-inline: auto;
}

/* Im Rahmen hat der Vollbreiten-Trick einer Sektion nichts zu suchen. */
.evf-startseite .evf-boxed .evf-bleed {
	margin-inline: 0;
	padding-inline: 0;
}

@media (max-width: 980px) {
	.evf-startseite .evf-boxed {
		width: 100%;
	}
}

/* --------------------------------------------------------- Volle Breite */

/*
 * Zieht die Fläche über das gesamte Fenster, lässt den Inhalt aber genau da
 * stehen, wo er vorher stand. Funktioniert in jedem Container, auch in einer
 * Divi-Zeile mit fester Maximalbreite.
 *
 * --evf-vw setzt das Frontend-JS auf documentElement.clientWidth, also OHNE
 * Scrollbalken. Ohne JS greift 100vw; das kann je nach Browser einen
 * schmalen waagrechten Überlauf erzeugen.
 */
.evf-startseite .evf-bleed {
	margin-inline: calc( 50% - var( --evf-vw, 100vw ) / 2 );
	padding-inline: calc( var( --evf-vw, 100vw ) / 2 - 50% );
}

.evf-stripe {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
}

.evf-stripe--yellow {
	background: var(--evf-yellow);
}

.evf-stripe--black {
	background: var(--ink-950);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.evf-stripe__text {
	padding: 46px 56px 48px;
}

.evf-stripe__action {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 46px 56px;
}

.evf-stripe__title {
	margin: 0 0 14px;
	font: 400 40px/1.05 var(--display);
	text-transform: uppercase;
	text-wrap: pretty;
}

.evf-stripe__body {
	max-width: 52ch;
	font: 400 14.5px/1.65 var(--body);
	text-wrap: pretty;
}

.evf-stripe__btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 18px 26px;
	font: 700 13.5px/1 var(--body);
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 2px solid currentColor;
	transition: transform .14s var(--ease-out);
}

/* Gelbe Variante: Text schwarz, Button schwarz mit weißer Schrift. */
.evf-stripe--yellow .evf-stripe__eyebrow {
	color: rgba(0, 0, 0, .6);
}

.evf-stripe--yellow .evf-stripe__title {
	color: var(--evf-black);
}

.evf-stripe--yellow .evf-stripe__body {
	color: rgba(0, 0, 0, .8);
}

.evf-startseite .evf-stripe--yellow .evf-stripe__btn {
	background: var(--evf-black);
	border-color: var(--evf-black);
	color: var(--evf-white);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
}

.evf-startseite .evf-stripe--yellow .evf-stripe__btn:hover {
	color: var(--evf-yellow);
	transform: translateY(-2px);
}

.evf-startseite .evf-stripe--yellow :focus-visible {
	outline-color: var(--evf-black);
}

/* Schwarze Variante spiegelbildlich. */
.evf-stripe--black .evf-stripe__eyebrow {
	color: var(--evf-yellow);
}

.evf-stripe--black .evf-stripe__title {
	color: var(--evf-white);
}

.evf-stripe--black .evf-stripe__body {
	color: var(--text-2);
}

.evf-startseite .evf-stripe--black .evf-stripe__btn {
	background: var(--evf-yellow);
	border-color: var(--evf-yellow);
	color: var(--evf-black);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}

.evf-startseite .evf-stripe--black .evf-stripe__btn:hover {
	background: var(--evf-white);
	border-color: var(--evf-white);
	color: var(--evf-black);
	transform: translateY(-2px);
}

/* --- Freitext --------------------------------------------------------- */

.evf-text {
	padding: 60px 64px 64px;
}

.evf-text--black {
	background: var(--evf-black);
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.evf-text--yellow {
	background: var(--evf-yellow);
}

.evf-text__inner {
	max-width: 76ch;
}

.evf-text__body {
	margin-top: 18px;
	font: 400 15px/1.7 var(--body);
	color: var(--text-2);
}

.evf-text__body p {
	margin: 0 0 1em;
}

.evf-text--yellow .evf-h2 {
	color: var(--evf-black);
}

.evf-text--yellow .evf-text__body {
	color: rgba(0, 0, 0, .8);
}

.evf-startseite .evf-text--yellow a {
	color: var(--evf-black);
	text-decoration: underline;
}

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

.evf-sponsors {
	background: var(--ink-950);
	padding: 56px 64px 60px;
}

.evf-sponsors__head {
	text-align: center;
	margin-bottom: 38px;
}

.evf-sponsors__title {
	margin: 0;
	font: 400 34px/1 var(--display);
	text-transform: uppercase;
	color: var(--evf-white);
	text-wrap: pretty;
}

.evf-sponsors__eyebrow {
	margin: 12px 0 0;
	font-weight: 600;
	color: var(--text-3);
}

.evf-sponsors__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .1);
}

.evf-sponsor {
	display: grid;
	place-items: center;
	height: 82px;
	padding: 12px;
	background: var(--ink-950);
}

.evf-sponsor__logo {
	max-width: 100%;
	max-height: 58px;
	object-fit: contain;
}

.evf-sponsor__name {
	font: 600 12px/1.3 var(--body);
	color: var(--text-3);
	text-align: center;
}

/* --- Videos ----------------------------------------------------------- */

.evf-videos {
	background: var(--evf-black);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 60px 44px 64px;
}

.evf-videos__h2 {
	margin-bottom: 26px;
}

.evf-videos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.evf-videos__grid[data-count="1"] {
	grid-template-columns: 1fr;
}

.evf-videos__grid[data-count="2"] {
	grid-template-columns: repeat(2, 1fr);
}

.evf-video {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 2px solid var(--line);
	background: var(--ink-800);
	color: var(--evf-white);
	cursor: pointer;
	overflow: hidden;
}

.evf-video__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evf-video__img--empty {
	background: var(--ink-800);
}

.evf-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	transform: translate(-50%, -50%);
	background: var(--evf-yellow);
	color: var(--evf-black);
	transition: transform .15s var(--ease-out);
}

.evf-video:hover .evf-video__play {
	transform: translate(-50%, -50%) scale(1.06);
}

.evf-video__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 18px;
	background: linear-gradient(0deg, rgba(11, 11, 12, .92), rgba(11, 11, 12, 0));
	font: 700 12.5px/1.35 var(--body);
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--evf-white);
}

.evf-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(8, 9, 10, .94);
}

.evf-lightbox__frame {
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	border: 0;
}

.evf-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 2px solid rgba(255, 255, 255, .55);
	background: transparent;
	color: var(--evf-white);
	cursor: pointer;
}

.evf-lightbox__close:hover {
	background: var(--evf-yellow);
	border-color: var(--evf-yellow);
	color: var(--evf-black);
}

/* --- Hockeydata-Widgets ------------------------------------------------ */

.evf-hdblock {
	background: var(--evf-black);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 52px 44px 58px;
}

.evf-hdblock__h2 {
	margin-bottom: 20px;
}

.evf-hd {
	min-height: 220px;
	color: var(--text-2);
}

.evf-hd--schedule,
.evf-hd--standings {
	min-height: 300px;
}

/* Die hockeydata-Templates werden nicht geladen; hier nur das Nötigste. */
.evf-hd table {
	width: 100%;
	border-collapse: collapse;
	color: var(--text-2);
	font-family: var(--body);
	font-variant-numeric: tabular-nums;
}

.evf-hd th {
	font: 700 9.5px/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-3);
	text-align: left;
	padding: 9px 10px;
	background: rgba(255, 255, 255, .06);
}

.evf-hd td {
	padding: 9px 10px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: 12.5px;
}

.evf-hd img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.evf-hd a {
	color: var(--evf-white);
}

.evf-consent {
	display: grid;
	place-items: center;
	gap: 14px;
	padding: 40px 24px;
	border: 1px solid var(--line);
	text-align: center;
}

.evf-consent__text {
	max-width: 60ch;
	font: 400 13.5px/1.6 var(--body);
	color: var(--text-2);
}

.evf-consent__btn {
	padding: 14px 24px;
	border: 2px solid var(--evf-yellow);
	background: transparent;
	color: var(--evf-yellow);
	font: 700 12px/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

.evf-consent__btn:hover {
	background: var(--evf-yellow);
	color: var(--evf-black);
}

/* --- 900–1199 px ------------------------------------------------------ */

@media (max-width: 1199px) {
	.evf-match__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		justify-items: center;
	}

	.evf-match__team,
	.evf-match__team--home {
		justify-content: center;
		text-align: center;
	}

	.evf-match__cta .evf-cta {
		display: block;
		width: 100%;
		text-align: center;
	}

	.evf-plan__grid {
		grid-template-columns: 1fr;
	}

	.evf-news__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.evf-videos__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.evf-sponsors__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.evf-slide__title {
		font-size: 42px;
	}
}

/* --- unter 900 px ----------------------------------------------------- */

@media (max-width: 899px) {
	.evf-slider {
		height: 420px;
	}

	.evf-slide__content {
		left: 24px;
		bottom: 92px;
		width: calc(100% - 48px);
	}

	.evf-slide__title {
		font-size: 34px;
	}

	.evf-slide__text {
		display: none;
	}

	.evf-slider__arrows {
		right: 24px;
		bottom: 84px;
	}

	.evf-slider__dots {
		left: 50%;
		bottom: 44px;
		transform: translateX(-50%);
	}

	.evf-match {
		padding: 28px 20px 40px;
	}

	.evf-match__cta {
		bottom: -40px;
	}

	.evf-match__team--home {
		flex-direction: row-reverse;
	}

	.evf-plan {
		padding: 40px 20px 44px;
	}

	.evf-game {
		grid-template-columns: 78px 1fr 30px 62px 30px 1fr;
		gap: 8px;
		padding: 11px 12px;
	}

	.evf-game__weekday {
		display: none;
	}

	.evf-game__team {
		font-size: 12px;
	}

	.evf-team__logo--md,
	.evf-team__badge--md {
		width: 30px;
		height: 30px;
	}

	.evf-table__head,
	.evf-table__row {
		grid-template-columns: 22px 26px 1fr 30px 36px 58px;
		gap: 8px;
		padding: 9px 10px;
	}

	.evf-news {
		padding: 44px 20px 48px;
	}

	.evf-news__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.evf-h2 {
		font-size: 32px;
	}

	.evf-news__grid,
	.evf-videos__grid,
	.evf-videos__grid[data-count="2"] {
		grid-template-columns: 1fr;
	}

	.evf-tiles,
	.evf-tiles[data-count="3"],
	.evf-tiles[data-count="4"] {
		grid-template-columns: 1fr;
	}

	.evf-startseite .evf-tile {
		height: 260px;
		border-left: 0;
		border-top: 2px solid var(--evf-black);
	}

	.evf-tile__content {
		left: 20px;
		right: 20px;
		bottom: 24px;
	}

	.evf-tile__title {
		font-size: 28px;
	}

	.evf-numbers {
		padding: 48px 20px 52px;
	}

	.evf-numbers__claim {
		font-size: 34px;
	}

	.evf-numbers__grid,
	.evf-numbers__grid[data-count="2"],
	.evf-numbers__grid[data-count="4"] {
		grid-template-columns: 1fr;
	}

	.evf-numbers__cell {
		padding: 24px 12px;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .16);
	}

	.evf-numbers__cell:first-child {
		border-top: 0;
	}

	.evf-numbers__value {
		font-size: 48px;
	}

	.evf-stripe {
		grid-template-columns: 1fr;
	}

	.evf-stripe__text {
		padding: 32px 20px 8px;
	}

	.evf-stripe__action {
		justify-content: flex-start;
		padding: 24px 20px 32px;
	}

	.evf-stripe__title {
		font-size: 30px;
	}

	.evf-stripe__btn {
		width: 100%;
		justify-content: center;
	}

	.evf-text,
	.evf-videos,
	.evf-hdblock {
		padding: 44px 20px 48px;
	}

	.evf-sponsors {
		padding: 40px 20px 44px;
	}

	.evf-sponsors__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.evf-sponsors__title {
		font-size: 26px;
	}

	.evf-startseite .evf-cta {
		display: block;
		width: 100%;
		padding: 18px 20px 15px;
		text-align: center;
	}

	.evf-cta > span {
		justify-content: center;
		font-size: 20px;
	}
}

@media (max-width: 380px) {
	.evf-game {
		grid-template-columns: 66px 1fr 52px 1fr;
	}

	.evf-game__logo {
		display: none;
	}
}

/* --- Motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.evf-startseite *,
	.evf-startseite *::before,
	.evf-startseite *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
	}

	.evf-slider__track {
		transition: none;
	}
}