/*
 * EVF-Beitrag — Einzelansicht.
 * Farben kommen aus dem Design System (EVF-Startseite). Die Werte hinter dem Komma
 * greifen nur, wenn keine Tokens gesetzt sind.
 */

.evf-beitrag {
	--y: var(--evf-yellow, #ffb400);
	--yd: var(--evf-yellow-deep, #d18f00);
	--bk: var(--evf-black, #0b0b0c);
	--i950: var(--ink-950, #121215);
	--i800: var(--ink-800, #1c1c20);
	--evf-hero-h: 520px;
	--evf-read-w: 720px;
	--evf-below-w: 80%;
	--evf-max-w: 1160px;
	--pad: 44px;

	/*
	 * Das Bild läuft über die volle Breite, alles darunter steht in einer
	 * schmaleren Mitte. Die Hintergründe der Bänder bleiben dabei randlos —
	 * eingerückt wird über den Innenabstand, nicht über eine Maximalbreite.
	 */
	--evf-gutter: max(var(--pad), calc((100% - min(var(--evf-below-w), var(--evf-max-w))) / 2));

	margin: 0;
	background: var(--bk);
	color: #fff;
	font-family: 'Archivo', system-ui, -apple-system, sans-serif;
	text-rendering: optimizeLegibility;
}

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

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

/* ---------------------------------------------------------------- Bildkopf */

.evf-beitrag-hero {
	position: relative;
	height: var(--evf-hero-h);
	overflow: hidden;
	border-bottom: 3px solid var(--y);
	background: var(--bk);
}

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

.evf-beitrag-hero__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(0deg,
		rgba(11, 11, 12, .96) 0%,
		rgba(11, 11, 12, .72) 42%,
		rgba(11, 11, 12, .18) 78%,
		rgba(11, 11, 12, .35) 100%);
}

/* Textkopf ohne Beitragsbild — gleiche Struktur, nie ein leerer Rahmen. */

.evf-beitrag-hero--text {
	background: var(--i950);
}

.evf-beitrag-hero__mark {
	position: absolute;
	top: -40px;
	right: 24px;
	width: 340px;
	height: 340px;
	opacity: .045;
	pointer-events: none;
	user-select: none;
}

.evf-beitrag-crumbs {
	position: absolute;
	left: var(--evf-gutter);
	right: var(--evf-gutter);
	top: 26px;
	max-width: calc(200px + var(--evf-read-w));
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	font: 600 10.5px/1.5 'Archivo', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.evf-beitrag-crumbs a {
	color: inherit;
	text-decoration: none;
}

.evf-beitrag-crumbs a:hover,
.evf-beitrag-crumbs a:focus-visible {
	color: #fff;
}

.evf-beitrag-crumbs span[aria-hidden] {
	color: rgba(255, 255, 255, .4);
}

.evf-beitrag-crumbs .is-current {
	color: var(--y);
}

.evf-beitrag-hero__foot {
	position: absolute;
	left: var(--evf-gutter);
	right: var(--evf-gutter);
	bottom: 48px;
	/* Gleiche Kante wie die Seitenspalte darunter. */
	max-width: calc(200px + var(--evf-read-w));
	margin-left: auto;
	margin-right: auto;
}

.evf-beitrag-hero__line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.evf-beitrag-chip {
	background: var(--y);
	color: var(--bk);
	font: 700 10.5px/1 'Archivo', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 7px 10px;
}

.evf-beitrag-date,
.evf-beitrag-rt {
	font: 700 11px/1 'Archivo', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.evf-beitrag-date {
	color: rgba(255, 255, 255, .82);
}

.evf-beitrag-rt {
	color: rgba(255, 255, 255, .78);
}

.evf-beitrag-dot {
	color: rgba(255, 255, 255, .35);
}

.evf-beitrag-title {
	margin: 0;
	font: 400 62px/1.03 'Anton', 'Archivo', sans-serif;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #fff;
	max-width: 900px;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------ Spaltenraster */

/*
 * Seitenspalte und Lesespalte bilden zusammen einen Block, der in der
 * Inhaltsbreite zentriert steht. Ohne das Zentrieren klebt der Text links und
 * rechts daneben bleibt auf breiten Monitoren eine große schwarze Fläche —
 * die Lesespalte darf ja nicht breiter als 720 px werden.
 */
.evf-beitrag__cols {
	display: grid;
	grid-template-columns: 200px minmax(0, var(--evf-read-w));
	justify-content: center;
	gap: 0;
	background: var(--bk);
	padding: 56px var(--evf-gutter) 20px;
}

.evf-beitrag__side {
	padding-right: 36px;
}

.evf-beitrag__sticky {
	position: sticky;
	top: 24px;
}

.evf-beitrag__main {
	min-width: 0;
}

/* -------------------------------------------------------------- Seitenspalte */

.evf-beitrag-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 700 10.5px/1 'Archivo', sans-serif;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}

.evf-beitrag-back:hover,
.evf-beitrag-back:focus-visible {
	color: #fff;
}

.evf-beitrag-side__label {
	margin: 28px 0 10px;
	font: 600 10px/1 'Archivo', sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.evf-beitrag-progress {
	height: 4px;
	background: rgba(255, 255, 255, .14);
}

.evf-beitrag-progress > span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--y);
	transition: width .12s linear;
}

.evf-beitrag-progress-top {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 999;
	background: rgba(255, 255, 255, .14);
	display: none;
}

.evf-beitrag-progress-top > span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--y);
	transition: width .12s linear;
}

/* -------------------------------------------------------------------- Teilen */

.evf-beitrag-share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.evf-beitrag-share--row {
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
}

.evf-beitrag-share--row .evf-beitrag-side__label {
	margin: 0 4px 0 0;
}

.evf-beitrag-share__item {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .24);
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	transition: background .14s, border-color .14s, color .14s;
}

.evf-beitrag-share__item:hover,
.evf-beitrag-share__item:focus-visible {
	background: var(--y);
	border-color: var(--y);
	color: var(--bk);
}

.evf-beitrag-share__native {
	display: none;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, .24);
	background: none;
	color: rgba(255, 255, 255, .88);
	font: 700 10.5px/1 'Archivo', sans-serif;
	letter-spacing: .11em;
	text-transform: uppercase;
	cursor: pointer;
}

.evf-beitrag-share__note {
	display: block;
	margin: 10px 0 0;
	min-height: 14px;
	font: 600 10.5px/1.3 'Archivo', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--y);
}

.evf-beitrag-share__note:empty {
	min-height: 0;
}

/* ------------------------------------------------------------------ Vorspann */

.evf-beitrag-lead {
	margin: 0 0 32px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
	font: 600 21px/1.6 'Archivo', sans-serif;
	color: #fff;
	text-wrap: pretty;
}

/* ------------------------------------------------ Fließtext .evf-beitrag-body */

.evf-beitrag-body {
	color: rgba(255, 255, 255, .88);
}

.evf-beitrag-body > *:first-child {
	margin-top: 0;
}

.evf-beitrag-body p {
	margin: 0 0 22px;
	font: 400 17px/1.75 'Archivo', sans-serif;
	color: rgba(255, 255, 255, .88);
	text-wrap: pretty;
}

.evf-beitrag-body h2 {
	margin: 40px 0 16px;
	font: 400 30px/1.1 'Anton', 'Archivo', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-wrap: pretty;
}

.evf-beitrag-body h3 {
	margin: 32px 0 12px;
	font: 400 24px/1.15 'Anton', 'Archivo', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-wrap: pretty;
}

.evf-beitrag-body h4,
.evf-beitrag-body h5,
.evf-beitrag-body h6 {
	margin: 28px 0 10px;
	font: 700 17px/1.3 'Archivo', sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.evf-beitrag-body ul,
.evf-beitrag-body ol {
	margin: 0 0 24px;
	padding-left: 22px;
}

.evf-beitrag-body li {
	margin-bottom: 8px;
	font: 400 16.5px/1.7 'Archivo', sans-serif;
	color: rgba(255, 255, 255, .86);
}

.evf-beitrag-body li::marker {
	color: rgba(255, 255, 255, .68);
}

.evf-beitrag-body a {
	color: var(--y);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.evf-beitrag-body a:hover,
.evf-beitrag-body a:focus-visible {
	color: #fff;
}

.evf-beitrag-body strong,
.evf-beitrag-body b {
	color: #fff;
	font-weight: 700;
}

.evf-beitrag-body blockquote {
	margin: 32px 0;
	padding: 2px 0 2px 22px;
	border-left: 3px solid var(--y);
	font: 400 24px/1.25 'Anton', 'Archivo', sans-serif;
	font-style: normal;
	text-transform: uppercase;
	color: #fff;
}

.evf-beitrag-body blockquote p {
	margin: 0 0 10px;
	font: inherit;
	color: inherit;
}

.evf-beitrag-body blockquote cite,
.evf-beitrag-body blockquote .wp-block-quote__citation {
	display: block;
	margin-top: 12px;
	font: 600 12px/1.5 'Archivo', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-style: normal;
	color: rgba(255, 255, 255, .72);
}

.evf-beitrag-body figure {
	margin: 32px 0;
	max-width: 100%;
}

.evf-beitrag-body img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

.evf-beitrag-body figcaption,
.evf-beitrag-body .wp-element-caption {
	margin-top: 10px;
	font: 400 12px/1.5 'Archivo', sans-serif;
	color: rgba(255, 255, 255, .72);
}

.evf-beitrag-body hr,
.evf-beitrag-body .wp-block-separator {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	height: 0;
}

.evf-beitrag-tablewrap,
.evf-beitrag-body .wp-block-table {
	overflow-x: auto;
	margin: 0 0 24px;
	-webkit-overflow-scrolling: touch;
}

.evf-beitrag-body table {
	width: 100%;
	border-collapse: collapse;
	font: 400 15px/1.5 'Archivo', sans-serif;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, .86);
}

.evf-beitrag-body thead th,
.evf-beitrag-body th {
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-weight: 700;
	text-align: left;
	letter-spacing: .04em;
}

.evf-beitrag-body th,
.evf-beitrag-body td {
	padding: 10px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.evf-beitrag-body iframe,
.evf-beitrag-body embed,
.evf-beitrag-body object,
.evf-beitrag-body video {
	max-width: 100%;
}

.evf-beitrag-body .wp-block-embed__wrapper {
	position: relative;
}

.evf-beitrag-body .wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.evf-beitrag-body .wp-block-embed iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	border: 0;
}

.evf-beitrag-body .wp-block-file a,
.evf-beitrag-body .wp-block-file__button {
	color: var(--y);
}

.evf-beitrag-body .wp-block-gallery img {
	width: 100%;
}

.evf-beitrag-body pre,
.evf-beitrag-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	background: rgba(255, 255, 255, .06);
	color: #fff;
}

.evf-beitrag-body pre {
	padding: 18px 20px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 24px;
}

.evf-beitrag-body code {
	padding: 2px 6px;
	font-size: .9em;
}

/* ------------------------------------------------ Zwei-Klick-Einbettungen */

.evf-beitrag-embed {
	position: relative;
	margin: 0 0 24px;
	aspect-ratio: 16 / 9;
	background: var(--i800);
	border: 1px solid rgba(255, 255, 255, .16);
}

.evf-beitrag-embed__box {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
}

.evf-beitrag-embed__title {
	margin: 0;
	font: 400 24px/1.15 'Anton', 'Archivo', sans-serif;
	text-transform: uppercase;
	color: #fff;
}

.evf-beitrag-embed__hint {
	margin: 0;
	max-width: 42ch;
	font: 400 13.5px/1.6 'Archivo', sans-serif;
	color: rgba(255, 255, 255, .78);
}

.evf-beitrag-embed__btn {
	min-height: 44px;
	padding: 0 26px;
	border: 0;
	border-bottom: 3px solid var(--yd);
	background: var(--y);
	color: var(--bk);
	font: 400 17px/1.05 'Anton', 'Archivo', sans-serif;
	letter-spacing: .035em;
	text-transform: uppercase;
	cursor: pointer;
}

.evf-beitrag-embed__btn:hover {
	background: #fff;
	border-bottom-color: var(--y);
}

.evf-beitrag-embed__remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font: 600 11px/1.4 'Archivo', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	cursor: pointer;
}

.evf-beitrag-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --------------------------------------------------- Autorzeile und Schlagwörter */

.evf-beitrag-meta {
	margin-top: 36px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.evf-beitrag-author {
	display: flex;
	align-items: center;
	gap: 14px;
}

.evf-beitrag-author__mark {
	width: 44px;
	height: 44px;
	flex: none;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .24);
	background: rgba(255, 255, 255, .06);
}

.evf-beitrag-author__mark img {
	width: 26px;
	height: 26px;
	opacity: .85;
}

.evf-beitrag-author__name {
	display: block;
	font: 700 13px/1.3 'Archivo', sans-serif;
	color: #fff;
}

.evf-beitrag-author__time {
	display: block;
	margin-top: 3px;
	font: 400 11.5px/1.3 'Archivo', sans-serif;
	color: rgba(255, 255, 255, .72);
	font-variant-numeric: tabular-nums;
}

.evf-beitrag-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.evf-beitrag-tag {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 9px 13px;
	border: 1px solid rgba(255, 255, 255, .24);
	font: 600 10.5px/1 'Archivo', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	border-radius: 0;
}

.evf-beitrag-tag:hover,
.evf-beitrag-tag:focus-visible {
	border-color: var(--y);
	color: var(--y);
}

.evf-beitrag-pages {
	margin-top: 24px;
	font: 700 12px/1 'Archivo', sans-serif;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .8);
}

/* ------------------------------------------------ Nächstes Spiel (kompakt) */

.evf-match {
	background: var(--i950);
	border-top: 3px solid var(--y);
	padding: 34px var(--evf-gutter) 36px;
	margin-top: 36px;
}

.evf-match__label {
	margin: 0 0 26px;
	text-align: center;
	font: 700 11px/1.4 'Archivo', sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--y);
}

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

.evf-match__side {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	text-align: right;
}

.evf-match__side--right {
	justify-content: flex-start;
	text-align: left;
}

.evf-match__logo {
	width: 78px;
	height: 78px;
	flex: none;
	object-fit: contain;
}

.evf-match__initials {
	width: 78px;
	height: 78px;
	flex: none;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
	font: 400 21px/1.05 'Anton', 'Archivo', sans-serif;
	color: var(--bk);
}

.evf-match__team {
	font: 400 28px/1.06 'Anton', 'Archivo', sans-serif;
	text-transform: uppercase;
	color: #fff;
}

.evf-match__role {
	margin-top: 6px;
	font: 700 10.5px/1 'Archivo', sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.evf-match__when {
	text-align: center;
	min-width: 200px;
}

.evf-match__date {
	font: 400 38px/1.05 'Anton', 'Archivo', sans-serif;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.evf-match__time {
	margin-top: 7px;
	font: 400 26px/1.05 'Anton', 'Archivo', sans-serif;
	color: var(--y);
	font-variant-numeric: tabular-nums;
}

.evf-match__venue {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	font: 600 11px/1.4 'Archivo', sans-serif;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .84);
}

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

.evf-match__cta {
	margin-top: 28px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	display: flex;
	justify-content: center;
}

/* -------------------------------------------------------------- Gelber Button */

.evf-btn {
	display: inline-block;
	background: var(--y);
	color: var(--bk);
	text-decoration: none;
	padding: 20px 54px 17px;
	border-bottom: 4px solid var(--yd);
	transition: background .14s, transform .14s cubic-bezier(.2, .8, .2, 1);
}

.evf-btn > span {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	font: 400 23px/1.05 'Anton', 'Archivo', sans-serif;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.evf-btn:hover,
.evf-btn:focus-visible {
	background: #fff;
	border-bottom-color: var(--y);
	color: var(--bk);
	transform: translateY(-2px);
}

.evf-btn--small {
	padding: 14px 28px 12px;
}

.evf-btn--small > span {
	font-size: 17px;
	gap: 10px;
}

/* --------------------------------------------------------- Weitere Meldungen */

.evf-related {
	background: var(--bk);
	padding: 60px var(--evf-gutter) 64px;
}

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

.evf-related__title {
	margin: 0;
	font: 400 40px/1.05 'Anton', 'Archivo', sans-serif;
	text-transform: uppercase;
	color: #fff;
}

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

.evf-related__all {
	flex: none;
	font: 700 12px/1 'Archivo', sans-serif;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid var(--y);
	padding-bottom: 5px;
}

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

.evf-card {
	display: block;
	text-decoration: none;
	color: #fff;
	background: var(--i800);
	border: 2px solid rgba(255, 255, 255, .14);
	transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, border-color .18s;
}

.evf-card:hover,
.evf-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(11, 11, 12, .5);
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}

.evf-card__media {
	display: block;
	height: 180px;
	overflow: hidden;
}

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

.evf-card__body {
	display: block;
	padding: 20px 22px 24px;
	border-top: 2px solid rgba(255, 255, 255, .14);
}

.evf-card__line {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
	font: 600 10.5px/1 'Archivo', sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

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

.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 {
	display: block;
	margin-bottom: 10px;
	font: 400 24px/1.06 'Anton', 'Archivo', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-wrap: pretty;
}

.evf-card__text {
	display: block;
	font: 400 13.5px/1.6 'Archivo', sans-serif;
	color: rgba(255, 255, 255, .75);
	text-wrap: pretty;
}

/* ----------------------------------------------------------- Vorher / Nachher */

.evf-adjacent {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--i950);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-left: calc(var(--evf-gutter) - var(--pad));
	padding-right: calc(var(--evf-gutter) - var(--pad));
}

.evf-adjacent__half {
	display: block;
	padding: 32px var(--pad);
	text-decoration: none;
	border-right: 1px solid rgba(255, 255, 255, .12);
}

.evf-adjacent__half--right {
	border-right: 0;
	text-align: right;
}

.evf-adjacent__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font: 600 10px/1 'Archivo', sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.evf-adjacent__half--right .evf-adjacent__label {
	justify-content: flex-end;
}

.evf-adjacent__title {
	display: block;
	font: 400 24px/1.08 'Anton', 'Archivo', sans-serif;
	text-transform: uppercase;
	color: #fff;
	text-wrap: pretty;
}

.evf-adjacent__half:hover .evf-adjacent__title,
.evf-adjacent__half:focus-visible .evf-adjacent__title {
	color: var(--y);
}

/* ------------------------------------------------------ WhatsApp und Sponsoren */

.evf-whatsapp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	background: var(--i950);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 32px var(--evf-gutter);
}

.evf-whatsapp__text {
	margin: 0;
	max-width: 60ch;
	font: 600 17px/1.5 'Archivo', sans-serif;
	color: #fff;
}

.evf-sponsors {
	background: var(--bk);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 34px var(--evf-gutter) 38px;
}

.evf-sponsors__label {
	margin: 0 0 20px;
	text-align: center;
	font: 700 10px/1 'Archivo', sans-serif;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.evf-sponsors__row {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 28px 44px;
}

.evf-sponsors__item img {
	max-height: 46px;
	width: auto;
	opacity: .78;
	transition: opacity .14s;
}

.evf-sponsors__item:hover img {
	opacity: 1;
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.evf-beitrag-title {
		font-size: 48px;
	}

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

@media (max-width: 899px) {
	.evf-beitrag {
		--pad: 22px;
		--evf-hero-h: 360px;
		--evf-below-w: 100%; /* Unter 900 px wäre eine schmale Mitte unlesbar. */
	}

	.evf-beitrag-hero {
		height: 360px;
	}

	.evf-beitrag-hero--text {
		height: auto;
		min-height: 320px;
		padding: 74px 0 32px;
	}

	.evf-beitrag-hero--text .evf-beitrag-hero__foot {
		position: static;
		padding: 0 var(--pad);
	}

	.evf-beitrag-hero__mark {
		width: 220px;
		height: 220px;
	}

	.evf-beitrag-hero__foot {
		bottom: 26px;
	}

	.evf-beitrag-title {
		font-size: 34px;
		line-height: 1.05;
	}

	.evf-beitrag__cols {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
		padding: 28px var(--pad) 16px;
	}

	.evf-beitrag-hero__foot,
	.evf-beitrag-crumbs {
		max-width: none;
	}

	.evf-beitrag__side {
		padding-right: 0;
		margin-bottom: 28px;
	}

	.evf-beitrag__sticky {
		position: static;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 14px;
	}

	/* Der Fortschritt sitzt oben am Fensterrand. */
	.evf-beitrag__side .evf-beitrag-progress,
	.evf-beitrag__side .evf-beitrag-side__label {
		display: none;
	}

	.evf-beitrag-progress-top {
		display: block;
	}

	.evf-beitrag-side__label {
		margin: 0;
	}

	.evf-beitrag__main {
		max-width: none;
	}

	.evf-beitrag-lead {
		font-size: 19px;
	}

	.evf-beitrag-body h2 {
		font-size: 26px;
	}

	.evf-match__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		justify-items: center;
	}

	.evf-match__side,
	.evf-match__side--right {
		justify-content: center;
		text-align: center;
		flex-direction: column;
		gap: 10px;
	}

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

	.evf-btn {
		padding: 17px 32px 14px;
	}

	.evf-btn > span {
		font-size: 19px;
	}

	.evf-cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.evf-related__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.evf-adjacent {
		grid-template-columns: minmax(0, 1fr);
	}

	.evf-adjacent__half {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	.evf-adjacent__half--right,
	.evf-adjacent__half--right .evf-adjacent__label {
		text-align: left;
		justify-content: flex-start;
	}

	.evf-adjacent__half--empty {
		display: none;
	}

	.evf-beitrag-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evf-beitrag *,
	.evf-beitrag-progress-top > span {
		transition: none !important;
		animation: none !important;
	}

	.evf-card:hover,
	.evf-btn:hover {
		transform: none;
	}
}

/* ------------------------------------------------- Shortcode-Betrieb (Divi)
 *
 * Der Entwurf läuft randlos, Divi steckt Inhalte aber in einen Container mit
 * fester Breite und Innenabstand. Der Rahmen bricht daraus aus. Außerdem ein
 * paar Absicherungen gegen Divi-Grundregeln, die sonst in den Fließtext
 * hineinregieren.
 */

.evf-beitrag--breakout {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.evf-beitrag--shortcode {
	position: relative;
}

/* Divi hängt an jeden Absatz einen Abstand und färbt Links um. */
.evf-beitrag--shortcode p {
	padding-bottom: 0;
}

.evf-beitrag--shortcode .evf-beitrag-body a {
	color: var(--y);
}

.evf-beitrag--shortcode .evf-beitrag-body a:hover {
	color: #fff;
}

.evf-beitrag--shortcode ul,
.evf-beitrag--shortcode ol {
	list-style-position: outside;
}

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

/* Divi setzt Überschriften eigene Farben und Abstände. */
.evf-beitrag--shortcode h1,
.evf-beitrag--shortcode h2,
.evf-beitrag--shortcode h3,
.evf-beitrag--shortcode h4 {
	padding-bottom: 0;
	color: #fff;
}

/* Mehrere Shortcodes untereinander sollen nicht doppelt Luft bekommen. */
.evf-beitrag--shortcode + .evf-beitrag--shortcode .evf-match,
.evf-beitrag--shortcode + .evf-beitrag--shortcode .evf-related {
	margin-top: 0;
}


/* ------------------------------------------------------------- Blocksatz
 *
 * Blocksatz ohne Silbentrennung reißt im Deutschen Löcher in die Zeilen —
 * die langen Komposita lassen sich sonst nicht unterbringen. hyphens braucht
 * das lang-Attribut der Seite, das WordPress am <html> setzt.
 */

.evf-beitrag--justify .evf-beitrag-body p,
.evf-beitrag--justify .evf-beitrag-body li {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
}

.evf-beitrag--justify .evf-beitrag-lead {
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Überschriften und Bildunterschriften bleiben im Flattersatz. */
.evf-beitrag--justify .evf-beitrag-body h2,
.evf-beitrag--justify .evf-beitrag-body h3,
.evf-beitrag--justify .evf-beitrag-body h4,
.evf-beitrag--justify .evf-beitrag-body figcaption,
.evf-beitrag--justify .evf-beitrag-body blockquote {
	text-align: left;
	hyphens: manual;
}

@media (max-width: 599px) {
	/* Auf schmalen Spalten macht Blocksatz mehr kaputt als er hilft. */
	.evf-beitrag--justify .evf-beitrag-body p,
	.evf-beitrag--justify .evf-beitrag-body li {
		text-align: left;
	}
}