/*
 * Ponyhof – Gestaltung
 *
 * „Clubnacht": echtes Schwarz, Magenta als Fläche, Pink für Links und Knöpfe,
 * der Rot-Violett-Verlauf des Logos als Linie. Jeder Abschnitt hat eine eigene
 * Lichtstimmung aus den Bildern der bisherigen Seite, die sich langsam bewegt
 * (Nebel, Lichtband, Pulver) – nur solange sie zu sehen ist und nie bei
 * „Bewegung reduzieren". Schrift: Big Shoulders Display, schmal und kantig
 * wie ein Techno-Plakat.
 */

/* ---------- Schriften (liegen im Theme, keine Anfrage an Google) ---------- */

@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/bigshoulders-normal-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/bigshoulders-normal-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/instrumentsans-normal-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/instrumentsans-normal-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/instrumentsans-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/instrumentsans-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Farben, Maße ---------- */

:root {
	--schwarz: #000;
	--nacht: #14061d;           /* Aubergine aus dem Violett des Logos */
	--rot: #e10d48;
	--magenta: #b8185d;         /* die Magenta-Fläche der bisherigen Seite */
	--orchidee: #d91487;
	--violett: #782ace;
	--pink: #ff4fa3;
	--neon: #f904ff;
	--text: #f7f0f9;
	--text-leise: rgb(247 240 249 / 0.74);
	--kante: rgb(247 240 249 / 0.16);
	--linie: linear-gradient(90deg, #ff1f55 0%, #e10d48 28%, #d91487 52%, #ba2bbb 72%, #782ace 100%);

	--anzeige: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
	--beat: 0.46875s;            /* 128 BPM - am Ponyhof: PPM */
	--fliesstext: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--breite: 74rem;
	--rand: clamp(1.25rem, 5vw, 3rem);
	--abstand: clamp(4.5rem, 11vw, 9rem);
	--kopfhoehe: 4.5rem;          /* Kopfzeile beim Scrollen */
	--kopfhoehe-oben: 6.25rem;    /* Kopfzeile ganz oben */

	--t-0: 1.0625rem;                            /* Fließtext */
	--t-1: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); /* Einleitungen */
	--t-2: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem);
	--t-3: clamp(2.6rem, 1.6rem + 4.2vw, 5rem);    /* Abschnittstitel */
	--t-4: clamp(5rem, 2rem + 12vw, 12rem);       /* Name im Kopfbereich */
}

/* ---------- Grundlagen ---------- */

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

html {
	color-scheme: dark;
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kopfhoehe) + 1rem);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--schwarz);
	color: var(--text);
	font: 400 var(--t-0) / 1.6 var(--fliesstext);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	hyphens: manual;
}

/* hidden gilt immer - auch gegen display-Regeln wie bei .knopf */
[hidden] {
	display: none !important;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--anzeige);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.005em;
	text-wrap: balance;
}

p,
ul,
ol,
dl {
	margin: 0;
}

p + p {
	margin-top: 1em;
}

a {
	color: var(--pink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 3px;
	border-radius: 3px;
}

main:focus {
	outline: none;
}

.sprung {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--pink);
	color: var(--schwarz);
	font-weight: 600;
	border-radius: 0 0 0.5rem 0.5rem;
}

.sprung:focus {
	top: 0;
}

/* ---------- Knöpfe ---------- */

.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 1.5px solid var(--pink);
	border-radius: 999px;
	background: var(--pink);
	color: var(--schwarz);
	font: 600 1rem / 1.2 var(--fliesstext);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.knopf:hover {
	background: var(--text);
	border-color: var(--text);
}

.knopf svg {
	flex: none;
	width: 1.25rem;
}

.knopf--leise {
	background: transparent;
	border-color: rgb(247 240 249 / 0.45);
	color: var(--text);
}

.knopf--leise:hover {
	background: transparent;
	border-color: var(--pink);
	color: var(--pink);
}

/* ---------- Kopfzeile ----------
   Oben groß und durchsichtig mit farbigem Rundlogo; beim Scrollen wird sie
   schmal, dunkel, und das Pony im Logo wird weiß. */

.kopfzeile {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--kopfhoehe-oben);
	transition: height 0.3s, background-color 0.3s;
}

.ist-gescrollt .kopfzeile {
	height: var(--kopfhoehe);
}

.ist-gescrollt .kopfzeile,
.menue-offen .kopfzeile {
	background: rgb(0 0 0 / 0.86);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Oben reicht das riesige Logo bis unter die Kopfzeile - ein leichter
   Schatten hält Logo und Menü lesbar. */
.kopfzeile::before {
	content: "";
	position: absolute;
	inset: 0 0 -2rem;
	z-index: -1;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.75), transparent);
	transition: opacity 0.3s;
	pointer-events: none;
}

.ist-gescrollt .kopfzeile::before,
.menue-offen .kopfzeile::before {
	opacity: 0;
}

.ist-gescrollt .kopfzeile::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: var(--linie);
	opacity: 0.6;
}

/* Abstände in der Kopfzeile wachsen nur bis 1,75rem mit - sonst passen
   Menü, Symbole und Sprache auch breit nicht nebeneinander */
.kopfzeile__innen {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.75rem);
	max-width: var(--breite);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--rand);
}

.kopfzeile__marke {
	display: block;
	margin-right: auto;
	color: var(--text);
}

.logo-kopfzeile {
	width: 4.75rem;
	transition: width 0.3s;
}

.ist-gescrollt .logo-kopfzeile {
	width: 3.4rem;
}

.logo-kopfzeile__ring {
	fill: #fff;
}

.logo-kopfzeile__weiss {
	opacity: 0;
	transition: opacity 0.3s;
}

.ist-gescrollt .logo-kopfzeile__weiss {
	opacity: 1;
}

.hauptmenue ul {
	display: flex;
	gap: clamp(1rem, 1.8vw, 1.75rem);
	padding: 0;
	list-style: none;
}

.hauptmenue li > a {
	color: var(--text);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.hauptmenue li > a:hover {
	color: var(--pink);
}

.kopfzeile__schalter {
	display: none;
}

/* ---------- Soziale Kanäle ---------- */

.sozial {
	display: flex;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sozial a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--kante);
	border-radius: 50%;
	color: var(--text);
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.sozial a:hover {
	border-color: var(--pink);
	background: var(--pink);
	color: var(--schwarz);
}

.sozial svg {
	width: 1.15rem;
}

/* In der Kopfzeile durch einen Strich vom Menü getrennt */
.sozial--kopfzeile {
	padding-left: clamp(0.75rem, 1.6vw, 1.75rem);
	border-left: 1px solid var(--kante);
}

/* ---------- Barrierefreiheit: „Ansicht anpassen“ ----------
   template-parts/ansicht.php. Ab 52rem eine pinke Lasche am rechten Rand,
   auf halber Höhe - das Menü fährt mit ihr wie eine Schublade heraus. Sie
   liegt im Seitenrand neben dem Inhalt und verdeckt keinen Text. Schmaler
   (Handy, Tablet hochkant) stehen die Schalter direkt im Hauptmenü. Die
   Wirkung der Schalter steht weiter unten („Ansicht: …“). */

.ansicht-ort[hidden],
.ansicht__zeile[hidden] {
	display: none;
}

.ansicht-ort--lasche {
	--schublade: 21rem;
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	translate: var(--schublade) -50%;
	transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ansicht-ort--lasche.ist-offen {
	translate: 0 -50%;
}

.ansicht-ort--menue {
	display: none;
}

.ansicht__symbol {
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

/* Die Lasche: Symbol oben, das Wort von unten nach oben gelesen. Beim
   Darüberfahren zieht sie ein Stück heraus und glüht stärker. */
.ansicht-knopf {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 0.5rem 1rem;
	border: 0;
	border-radius: 0.9rem 0 0 0.9rem;
	background: var(--pink);
	color: var(--schwarz);
	font: 700 0.78rem / 1 var(--fliesstext);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 0 1.5rem rgb(255 79 163 / 0.45), 0 0.5rem 1.5rem rgb(0 0 0 / 0.45);
	transition: padding 0.25s, box-shadow 0.25s;
}

.ansicht-knopf .ansicht__symbol {
	width: 1.5rem;
	height: 1.5rem;
}

.ansicht-knopf__wort {
	writing-mode: vertical-rl;
	rotate: 180deg;
}

.ansicht-knopf:hover,
.ansicht-knopf[aria-expanded="true"] {
	padding-right: 0.85rem;
	box-shadow: 0 0 2.5rem rgb(255 79 163 / 0.7), 0 0.5rem 1.5rem rgb(0 0 0 / 0.45);
}

.ansicht-knopf:focus-visible {
	outline-color: var(--text);
}

/* Die Schublade: Kante im Logo-Verlauf, Titel in der Anzeigeschrift */
.ansicht--lasche {
	width: var(--schublade);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.5rem 1.5rem 1.25rem;
	border: 2px solid transparent;
	border-right: 0;
	border-radius: 1rem 0 0 1rem;
	background:
		linear-gradient(var(--nacht), var(--nacht)) padding-box,
		linear-gradient(180deg, #ff1f55, #d91487 50%, #782ace) border-box;
	box-shadow: -1.5rem 0 3rem rgb(0 0 0 / 0.55);
	visibility: hidden;
	transition: visibility 0s 0.45s;
}

.ist-offen .ansicht--lasche {
	visibility: visible;
	transition: none;
}

.ansicht--lasche .ansicht__titel {
	margin-bottom: 1.25rem;
	color: var(--text);
	font: 800 1.9rem / 1 var(--anzeige);
	letter-spacing: 0.01em;
	text-transform: none;
}

/* Bei offenem Hauptmenü (52-64rem) würde die Lasche darüber liegen */
.menue-offen .ansicht-ort--lasche {
	visibility: hidden;
}

.bewegung-aus .ansicht-ort--lasche,
.bewegung-aus .ansicht-knopf {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.ansicht-ort--lasche,
	.ansicht-knopf {
		transition: none;
	}
}

@media (max-width: 52rem) {
	.ansicht-ort--lasche {
		display: none;
	}

	.ansicht-ort--menue {
		display: block;
		max-width: 26rem;
		padding-top: 1.75rem;
	}

	.ansicht--menue .ansicht__titel {
		margin-bottom: 1.1rem;
		color: var(--text);
		font-size: 0.9rem;
	}
}

.ansicht__titel {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	color: var(--text-leise);
	font: 700 0.8rem / 1.2 var(--fliesstext);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ansicht__name {
	font-weight: 600;
	font-size: 0.95rem;
}

/* Schriftgröße: drei Stufen nebeneinander, die Wörter schon etwas größer */
.ansicht__groesse {
	margin: 0 0 0.9rem;
	padding: 0;
	border: 0;
}

.ansicht__groesse legend {
	float: left;
	width: 100%;
	margin-bottom: 0.55rem;
	padding: 0;
}

.ansicht__stufen {
	clear: both;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--kante);
	border-radius: 999px;
}

.ansicht__stufe {
	position: relative;
	cursor: pointer;
}

.ansicht__stufe input,
.ansicht__zeile input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ansicht__stufe span {
	display: grid;
	place-items: center;
	min-height: 2.25rem;
	padding: 0.3rem 0.4rem;
	border-radius: 999px;
	color: var(--text-leise);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	transition: background-color 0.2s, color 0.2s;
}

.ansicht__stufe:nth-child(2) span {
	font-size: 0.9rem;
}

.ansicht__stufe:nth-child(3) span {
	font-size: 1rem;
}

.ansicht__stufe:hover span {
	color: var(--text);
}

.ansicht__stufe input:checked + span {
	background: var(--pink);
	color: var(--schwarz);
}

.ansicht__stufe input:focus-visible + span,
.ansicht__zeile input:focus-visible ~ .ansicht__bahn {
	outline: 3px solid var(--pink);
	outline-offset: 3px;
}

/* An/Aus-Schalter: der Knopf wandert nach rechts und wird schwarz auf Pink -
   nicht nur die Farbe zeigt, ob er an ist */
.ansicht__zeile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3rem;
	border-top: 1px solid var(--kante);
	cursor: pointer;
}

.ansicht__bahn {
	position: relative;
	flex: none;
	width: 2.8rem;
	height: 1.6rem;
	border: 2px solid var(--text-leise);
	border-radius: 999px;
	transition: background-color 0.2s, border-color 0.2s;
}

.ansicht__bahn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.2rem;
	width: 0.95rem;
	height: 0.95rem;
	border-radius: 50%;
	background: var(--text-leise);
	transform: translateY(-50%);
	transition: transform 0.2s, background-color 0.2s;
}

.ansicht__zeile:hover .ansicht__bahn {
	border-color: var(--text);
}

.ansicht__zeile input:checked ~ .ansicht__bahn {
	border-color: var(--pink);
	background: var(--pink);
}

.ansicht__zeile input:checked ~ .ansicht__bahn::after {
	background: var(--schwarz);
	transform: translate(1.2rem, -50%);
}

.ansicht__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--kante);
	font-size: 0.85rem;
}

.ansicht__zuruecksetzen {
	min-height: 2.5rem;
	padding: 0 1rem;
	border: 1px solid var(--kante);
	border-radius: 999px;
	background: none;
	color: var(--text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s;
}

.ansicht__zuruecksetzen:hover {
	border-color: var(--pink);
}

.ansicht__fuss a {
	color: var(--text);
}

/* Sprachschalter (inc/sprache.php): zeigt die jeweils andere Sprache, rund
   wie die Symbole daneben - auch am Handy in der Kopfzeile, damit niemand
   erst ein deutsches Menü öffnen muss */
.sprachschalter {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: -0.6rem;
	border: 1px solid var(--kante);
	border-radius: 50%;
	color: var(--text);
	font: 700 0.85rem / 1 var(--fliesstext);
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.sprachschalter:hover {
	border-color: var(--pink);
	background: var(--pink);
	color: var(--schwarz);
}

/* Angehalten bleibt alles, wo es gerade ist. Was erst durch Bewegung
   erscheint (Linie und Einhörnchen der Zeitleiste, nachgeladene
   Instagram-Beiträge), steht sofort fertig da. */
.bewegung-aus {
	scroll-behavior: auto;
}

.bewegung-aus *,
.bewegung-aus *::before,
.bewegung-aus *::after {
	animation-play-state: paused !important;
}

.bewegung-aus .zeitleiste::before,
.bewegung-aus .zeitleiste__einhorn,
.bewegung-aus .beitrag.ist-neu {
	animation: none !important;
}

@media (max-width: 52rem) {
	:root {
		--kopfhoehe-oben: 5rem;
	}
}

/* Kopfzeile kompakt: Menü eingeklappt. Schon unter 64rem (nicht erst ab der
   Handy-Ansicht 52rem) - mit dem Sprachschalter passen Logo, sechs
   Menüpunkte und drei Symbole darunter nicht mehr nebeneinander. */
@media (max-width: 64rem) {
	.logo-kopfzeile {
		width: 3.9rem;
	}

	.ist-gescrollt .logo-kopfzeile {
		width: 3.1rem;
	}

	.sozial--kopfzeile {
		gap: 0.15rem;
		padding-left: 0;
		border-left: 0;
	}

	.sozial--kopfzeile a {
		width: 2.75rem;
		height: 2.75rem;
		border-color: transparent;
	}

	.kopfzeile__schalter {
		order: 3;
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 2.75rem;
		padding: 0 0.25rem;
		border: 0;
		background: none;
		color: var(--text);
		font: 600 1rem / 1 var(--fliesstext);
		cursor: pointer;
	}

	.kopfzeile__schalter-linien,
	.kopfzeile__schalter-linien::before {
		display: block;
		width: 1.4rem;
		height: 2px;
		background: currentColor;
		transition: transform 0.2s;
	}

	.kopfzeile__schalter-linien {
		position: relative;
		transform: translateY(-3px);
	}

	.kopfzeile__schalter-linien::before {
		content: "";
		position: absolute;
		top: 6px;
	}

	.menue-offen .kopfzeile__schalter-linien {
		transform: rotate(45deg);
	}

	.menue-offen .kopfzeile__schalter-linien::before {
		transform: translateY(-6px) rotate(-90deg);
	}

	/* klappt direkt unter der Kopfzeile auf, egal wie hoch sie gerade ist;
	   mit den Schaltern für die Ansicht wird es länger als ein kleines Handy
	   hoch ist - dann scrollt das Menü für sich */
	.hauptmenue {
		position: absolute;
		inset: 100% 0 auto;
		max-height: calc(100dvh - 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 1rem var(--rand) 2rem;
		background: rgb(0 0 0 / 0.97);
		border-bottom: 1px solid var(--kante);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5rem);
		transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
	}

	.menue-offen .hauptmenue {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.2s, transform 0.2s;
	}

	.hauptmenue ul {
		flex-direction: column;
		gap: 0;
	}

	.hauptmenue li > a {
		display: block;
		padding: 0.8rem 0;
		font: 800 1.9rem / 1.1 var(--anzeige);
		border-bottom: 1px solid var(--kante);
	}

	/* Logo, drei Symbole, Sprache und Menü müssen bis 320 px nebeneinander
	   passen: enger setzen, Knöpfe 40 statt 44 px (zum Tippen reicht das
	   gut), das Logo wird nie zusammengedrückt. */
	.kopfzeile__innen {
		gap: 0.5rem;
	}

	.kopfzeile__marke {
		flex: none;
	}

	.sozial--kopfzeile a,
	.sprachschalter {
		width: 2.5rem;
		height: 2.5rem;
	}

	.sprachschalter {
		margin-left: 0;
	}
}

@media (max-width: 22rem) {
	.logo-kopfzeile,
	.ist-gescrollt .logo-kopfzeile {
		width: 3.1rem;
	}

	.kopfzeile__schalter-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}
}

/* ---------- Kopfbereich ----------
   Das runde Logo füllt riesig die linke Hälfte und darf links über den
   Rand hinausgehen; der Text sitzt rechts daneben.

   Es dreht sich als Ganzes um die Mitte des Schriftrings - der Kreis bleibt
   rund und steht still (im Logo-Video der bisherigen Seite kippte der Ring
   mit, der Abstand zur Überschrift wechselte). Farbe und Licht wandern in
   eigenen Takten darüber, damit es nie gleich aussieht. Bewegt werden nur
   rotate und filter: Das Logo samt Leuchten wird einmal gezeichnet, drehen
   und umfärben erledigt die Grafikkarte. */

.kopf {
	/* Rechts immer gleich weit vor der Überschrift, die in der Mitte beginnt.
	   Mittelpunkt auch für Pulver und Funken beim Auftritt. */
	--logo-breite: min(58vw, 105svh);
	--logo-x: calc(50% - clamp(1.5rem, 3vw, 3rem) - var(--logo-breite) / 2);
	--logo-y: 52%;
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100svh;
	overflow: clip;
}

.kopf::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(46rem 40rem at var(--logo-x) var(--logo-y), rgb(217 20 135 / 0.22), transparent 70%),
		radial-gradient(36rem 30rem at 34% 72%, rgb(120 42 206 / 0.2), transparent 70%);
	pointer-events: none;
}

.kopf__logo {
	position: absolute;
	top: var(--logo-y);
	left: var(--logo-x);
	width: var(--logo-breite);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
	/* Schwarz wird durchsichtig - so verschluckt der Lichtkegel das Logo,
	   ohne selbst zu sehen zu sein. Muss hier am verschobenen Rahmen stehen:
	   transform macht ihn zu einer eigenen Ebene, in der die Teile sonst nur
	   mit Durchsichtigem mischen. Der schwarze Grund ist ebenso unsichtbar,
	   ihn braucht das Disco-Licht zum Einfärben. */
	background: #000;
	mix-blend-mode: screen;
}

.kopf__dreh {
	animation:
		logo-drehen 30s linear infinite,
		logo-farbe 23s ease-in-out infinite;
	will-change: rotate, filter;
}

.kopf__dreh .logo-rund {
	display: block;
}

/* Disco-Licht wie im alten Video: große, weiche Farbfelder (Pink, Rot,
   Orange bis Gold, Violett) schwenken wie Moving Heads über das
   Logo - schnell, aber fließend, nie springend. mix-blend-mode: color färbt
   nur die Linien um, auf dem schwarzen Grund bleibt Schwarz schwarz. Die
   zwei Sätze schwenken in verschiedenen Takten, so mischen sich die Farben
   entlang der Linien immer neu. */
.kopf__disco {
	position: absolute;
	inset: 0;
	/* nur innerhalb des schwarzen Grunds - daneben wäre die Farbe zu sehen */
	overflow: hidden;
	border-radius: 50%;
	mix-blend-mode: color;
}

.kopf__disco::before,
.kopf__disco::after {
	content: "";
	position: absolute;
	inset: 0;
	will-change: rotate;
}

.kopf__disco::before {
	background:
		radial-gradient(circle at 26% 30%, rgb(255 150 30 / 0.95), rgb(255 150 30 / 0) 42%),
		radial-gradient(circle at 78% 60%, rgb(170 40 255 / 0.9), rgb(170 40 255 / 0) 40%),
		radial-gradient(circle at 40% 82%, rgb(255 30 60 / 0.9), rgb(255 30 60 / 0) 38%);
	animation: disco-schwenken 5.3s ease-in-out infinite;
}

.kopf__disco::after {
	background:
		radial-gradient(circle at 70% 22%, rgb(255 20 150 / 0.9), rgb(255 20 150 / 0) 40%),
		radial-gradient(circle at 18% 66%, rgb(125 40 225 / 0.8), rgb(125 40 225 / 0) 34%),
		radial-gradient(circle at 64% 86%, rgb(255 190 40 / 0.9), rgb(255 190 40 / 0) 32%);
	animation: disco-schwenken 7.1s ease-in-out infinite reverse;
}

/* Hin und her mit kurzem Halt an den Umkehrpunkten, wie ein Scheinwerfer */
@keyframes disco-schwenken {
	0% {
		rotate: 0deg;
	}
	17% {
		rotate: 110deg;
	}
	31% {
		rotate: 55deg;
	}
	50% {
		rotate: 190deg;
	}
	66% {
		rotate: 150deg;
	}
	83% {
		rotate: 290deg;
	}
	100% {
		rotate: 360deg;
	}
}

/* Glanz: ein weicher heller Fleck, der die angestrahlten Linien aufleuchten
   lässt. overlay hellt nur Farbiges auf - Schwarz bleibt schwarz. */
.kopf__glanz {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 50%;
	mix-blend-mode: overlay;
}

.kopf__glanz::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.7), rgb(255 255 255 / 0) 36%);
	animation: disco-schwenken 6.2s ease-in-out -2s infinite;
	will-change: rotate;
}

/* Lichtkegel: ein dunkler Sektor, der gegen die Drehung wandert und das
   Logo abschnittweise weich im Schwarz verschwinden lässt wie im alten
   Video. Dazu atmet er, so pulsiert das Licht - fließend, kein Blinken. */
.kopf__licht {
	position: absolute;
	inset: -8%;
	border-radius: 50%;
	background: conic-gradient(
		transparent 0deg 100deg,
		rgb(0 0 0 / 0.55) 165deg,
		rgb(0 0 0 / 0.9) 225deg,
		rgb(0 0 0 / 0.55) 285deg,
		transparent 350deg
	);
	animation:
		licht-wandern 11s linear infinite,
		licht-atmen 2.3s ease-in-out infinite;
	will-change: rotate, opacity;
}

@keyframes licht-atmen {
	0%,
	100% {
		opacity: 1;
	}
	23% {
		opacity: 0.72;
	}
	41% {
		opacity: 0.95;
	}
	64% {
		opacity: 0.62;
	}
	82% {
		opacity: 0.9;
	}
}

[data-bewegung]:not(.laeuft) .kopf__dreh,
[data-bewegung]:not(.laeuft) .kopf__disco::before,
[data-bewegung]:not(.laeuft) .kopf__disco::after,
[data-bewegung]:not(.laeuft) .kopf__glanz::before,
[data-bewegung]:not(.laeuft) .kopf__licht {
	animation-play-state: paused;
}

@keyframes logo-drehen {
	to {
		rotate: -360deg;
	}
}

/* Von Magenta ins Violett und über Rot ins Orange - in der Farbwelt der
   Seite. Das alte Video lief auch ins Blau und Türkis, das bleibt weg. */
@keyframes logo-farbe {
	0%,
	100% {
		filter: hue-rotate(0deg);
	}
	30% {
		filter: hue-rotate(-25deg);
	}
	50% {
		filter: hue-rotate(-8deg);
	}
	75% {
		filter: hue-rotate(35deg);
	}
}

@keyframes licht-wandern {
	to {
		rotate: 360deg;
	}
}

.kopf__innen {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: 100%;
	max-width: var(--breite);
	margin: 0 auto;
	padding: calc(var(--kopfhoehe-oben) + 2rem) var(--rand) 5rem;
}

.kopf__text {
	grid-column: 2;
	container-type: inline-size;
}

.logo-rund {
	width: 100%;
	overflow: visible;
}

.kopf__titel {
	/* „Ponyhof" (rund 3,2 Geviert) plus „_official" (rund 1,1) - zusammen nie
	   breiter als die Spalte */
	font-size: min(var(--t-4), 22.5cqi);
	white-space: nowrap;
	font-weight: 900;
	letter-spacing: 0.01em;
	line-height: 0.85;
	text-transform: uppercase;
}

/* „_official" wie der Instagram-Name, klein in Pink direkt am F */
.kopf__official {
	display: inline-block;
	margin-left: 0.03em;
	color: var(--pink);
	font-size: 0.3em;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: none;
}

/* Handy und Tablet hochkant: Name groß, „_official" rechtsbündig darunter */
@media (max-width: 52rem) {
	.kopf__titel {
		width: fit-content;
		font-size: min(var(--t-4), 30cqi);
		white-space: normal;
	}

	.kopf__official {
		display: block;
		margin: 0.12em 0 0;
		font-size: 0.26em;
		text-align: right;
	}
}

.kopf__satz {
	max-width: 30ch;
	margin-top: 1.5rem;
	color: var(--text-leise);
	font-size: var(--t-1);
	line-height: 1.5;
}

.kopf__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

@media (max-width: 30rem) {
	.kopf__aktionen {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.6rem;
	}

	.kopf__aktionen .knopf {
		padding-inline: 0.75rem;
	}
}

/* Handy und Tablet hochkant: Logo groß oben, über beide Ränder hinaus,
   der Text darunter */
@media (max-width: 52rem) {
	.kopf {
		align-items: end;
	}

	.kopf::before {
		background:
			radial-gradient(28rem 26rem at 50% 30%, rgb(217 20 135 / 0.24), transparent 70%),
			radial-gradient(22rem 20rem at 55% 45%, rgb(120 42 206 / 0.2), transparent 70%);
	}

	.kopf {
		--logo-breite: min(114vw, 57svh);
		--logo-x: 50%;
		--logo-y: 31%;
	}

	.kopf__innen {
		grid-template-columns: 1fr;
		padding-bottom: 3rem;
	}

	.kopf__text {
		grid-column: 1;
	}
}

/* ---------- „Bass-Drop": Auftritt beim Laden der Startseite ----------
   Einmal, rund 2 Sekunden, getaktet auf 128 BPM (--beat):
   Schlag 0  Licht an - das Logo taucht aus der Dunkelheit auf
   Schlag 1  PONYHOF fällt Buchstabe für Buchstabe ein (Achtelnoten)
   Schlag 3  Wumms - der Schriftzug pumpt, kurzer Glitch in Rot/Cyan
   Schlag 3+ Text, Knöpfe und Kopfzeile erscheinen
   Schlag 4  die Laufbänder rauschen von rechts und links herein
   Nur beim ersten Aufruf je Besuch - danach setzt der Kopf .ohne-intro. */

.kopf__buchstaben,
.kopf__buchstabe {
	display: inline-block;
}

/* einzelne Buchstaben wären sonst Umbruchstellen: PON / YHOF */
.kopf__buchstaben {
	white-space: nowrap;
}

.kopf__titel {
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .kopf__logo {
		animation: licht-an calc(var(--beat) * 3) cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}

	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .kopf__buchstabe {
		animation: buchstabe-drop 0.55s cubic-bezier(0.25, 1.5, 0.45, 1) both;
		animation-delay: calc(var(--beat) + var(--nr) * var(--beat) / 8);
	}

	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .kopf__titel {
		animation: wumms 0.42s ease-out both;
		animation-delay: calc(var(--beat) * 3);
	}

	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .kopf__official {
		animation: aufkleben 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
		animation-delay: calc(var(--beat) * 3.4);
	}

	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .kopf__satz {
		animation: auftritt 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(var(--beat) * 3.25);
	}

	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .kopf__aktionen {
		animation: auftritt 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(var(--beat) * 3.6);
	}

	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .home .kopfzeile__innen {
		animation: einblenden 0.7s ease both;
		animation-delay: calc(var(--beat) * 3.4);
	}

	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .laufband--vorne {
		animation: band-von-rechts 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both;
		animation-delay: calc(var(--beat) * 4);
	}

	:root:not(.ohne-intro):not(.auftritt-pulver):not(.auftritt-glitch) .laufband--hinten {
		animation: band-von-links 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both;
		animation-delay: calc(var(--beat) * 4.25);
	}
}

@keyframes licht-an {
	from {
		opacity: 0;
		filter: blur(22px) brightness(2.4);
		scale: 0.82;
	}
	55% {
		opacity: 1;
	}
	to {
		opacity: 1;
		filter: none;
		scale: 1;
	}
}

@keyframes buchstabe-drop {
	from {
		opacity: 0;
		translate: 0 -0.7em;
		filter: blur(6px);
	}
	40% {
		opacity: 1;
	}
	to {
		opacity: 1;
		translate: 0 0;
		filter: none;
	}
}

@keyframes wumms {
	0% {
		scale: 1;
		text-shadow: 0 0 0 transparent;
	}
	18% {
		scale: 1.045;
		text-shadow: -4px 0 #ff1f55, 4px 0 #3ad7ff, 0 0 2.5rem rgb(249 4 255 / 0.6);
	}
	34% {
		text-shadow: 3px 0 #ff1f55, -3px 0 #3ad7ff, 0 0 2rem rgb(249 4 255 / 0.5);
	}
	100% {
		scale: 1;
		text-shadow: 0 0 0 transparent;
	}
}

@keyframes aufkleben {
	from {
		opacity: 0;
		scale: 2.2;
		rotate: -14deg;
	}
	60% {
		opacity: 1;
		scale: 0.92;
	}
	to {
		opacity: 1;
		scale: 1;
		rotate: 0deg;
	}
}

@keyframes auftritt {
	from {
		opacity: 0;
		translate: 0 1.25rem;
	}
}

@keyframes einblenden {
	from {
		opacity: 0;
	}
}

@keyframes band-von-rechts {
	from {
		translate: 105% 0;
	}
}

@keyframes band-von-links {
	from {
		translate: -105% 0;
	}
}

/* ---------- Alternative Auftritte zum Vergleichen ----------
   ?auftritt=pulver  Pulver-Explosion: pinkes Farbpulver knallt hinter dem
                     Logo auf, Glitzerfunken fliegen, alles taucht aus der
                     Wolke auf
   ?auftritt=glitch  Glitch-Scan: eine Scanlinie fährt von oben nach unten und
                     enthüllt die Seite, dann Farbversatz und Zittern wie ein
                     gestörtes Signal */

.kopf__pulver,
.kopf__funken,
.kopf__scan {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	/* --- Pulver-Explosion --- */
	:root.auftritt-pulver .kopf__pulver {
		position: absolute;
		top: var(--logo-y);
		left: var(--logo-x);
		display: block;
		width: min(100vw, 150svh);
		aspect-ratio: 1;
		translate: -50% -50%;
		mix-blend-mode: screen;
		pointer-events: none;
		-webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
		mask: radial-gradient(closest-side, #000 30%, transparent 100%);
		animation: pulver-knall 2.8s cubic-bezier(0.12, 0.8, 0.2, 1) both;
	}

	:root.auftritt-pulver .kopf__pulver img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	:root.auftritt-pulver .kopf__funken {
		position: absolute;
		top: var(--logo-y);
		left: var(--logo-x);
		display: block;
		pointer-events: none;
	}

	:root.auftritt-pulver .kopf__funken i {
		position: absolute;
		width: var(--g);
		height: var(--g);
		border-radius: 50%;
		background: var(--f);
		box-shadow: 0 0 0.6rem var(--f);
		animation: funke 1.5s cubic-bezier(0.1, 0.7, 0.3, 1) both;
		animation-delay: calc(0.12s + var(--v));
	}

	:root.auftritt-pulver .kopf__logo {
		animation: aus-dem-pulver 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
	}

	:root.auftritt-pulver .kopf__buchstabe {
		animation: buchstabe-puff 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
		animation-delay: calc(0.75s + var(--nr) * 55ms);
	}

	:root.auftritt-pulver .kopf__official {
		animation: buchstabe-puff 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both;
	}

	:root.auftritt-pulver .kopf__satz,
	:root.auftritt-glitch .kopf__satz {
		animation: auftritt 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both;
	}

	:root.auftritt-pulver .kopf__aktionen,
	:root.auftritt-glitch .kopf__aktionen {
		animation: auftritt 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.45s both;
	}

	:root.auftritt-pulver .home .kopfzeile__innen,
	:root.auftritt-glitch .home .kopfzeile__innen {
		animation: einblenden 0.7s ease 1.4s both;
	}

	:root.auftritt-pulver .laufband--vorne,
	:root.auftritt-glitch .laufband--vorne {
		animation: band-von-rechts 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) 1.7s both;
	}

	:root.auftritt-pulver .laufband--hinten,
	:root.auftritt-glitch .laufband--hinten {
		animation: band-von-links 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) 1.85s both;
	}

	/* --- Glitch-Scan --- */
	:root.auftritt-glitch .kopf__scan {
		position: absolute;
		inset: 0;
		z-index: 3;
		display: block;
		pointer-events: none;
	}

	/* schwarzer Vorhang, dessen Oberkante mit der Scanlinie nach unten wandert */
	:root.auftritt-glitch .kopf__scan::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--schwarz);
		animation: scan-vorhang 0.95s cubic-bezier(0.6, 0, 0.3, 1) both;
	}

	/* Rasterzeilen wie auf einem alten Bildschirm, blenden danach aus */
	:root.auftritt-glitch .kopf__scan::after {
		content: "";
		position: absolute;
		inset: 0;
		background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.4) 0 1px, transparent 1px 3px);
		animation: raster-aus 2s ease both;
	}

	:root.auftritt-glitch .kopf__scan-linie {
		position: absolute;
		inset: 0 0 auto;
		height: 3px;
		background: linear-gradient(90deg, transparent, #3ad7ff 15%, #fff 50%, #ff4fa3 85%, transparent);
		box-shadow: 0 0 1.2rem #3ad7ff, 0 0 2.5rem rgb(249 4 255 / 0.7);
		animation: scan-linie 0.95s cubic-bezier(0.6, 0, 0.3, 1) both;
	}

	/* ohne Füllmodus: vor dem Start keine Wirkung */
	:root.auftritt-glitch .kopf__logo {
		animation: logo-glitch 0.55s steps(1) 0.9s;
	}

	:root.auftritt-glitch .kopf__titel {
		animation: titel-glitch 0.8s steps(1) 0.95s both;
	}
}

@keyframes pulver-knall {
	0% {
		opacity: 0;
		scale: 0.12;
		rotate: -10deg;
		filter: brightness(2.2);
	}
	15% {
		opacity: 1;
	}
	45% {
		opacity: 0.95;
		scale: 1.1;
		filter: none;
	}
	100% {
		opacity: 0.3;
		scale: 1.35;
		rotate: 4deg;
	}
}

@keyframes funke {
	from {
		opacity: 1;
		transform: rotate(var(--w)) translateX(0) scale(1.5);
	}
	to {
		opacity: 0;
		transform: rotate(var(--w)) translateX(var(--d)) scale(0.2);
	}
}

@keyframes aus-dem-pulver {
	from {
		opacity: 0;
		scale: 1.15;
		filter: blur(16px);
	}
	to {
		opacity: 1;
		scale: 1;
		filter: none;
	}
}

@keyframes buchstabe-puff {
	from {
		opacity: 0;
		scale: 1.6;
		filter: blur(12px);
	}
	to {
		opacity: 1;
		scale: 1;
		filter: none;
	}
}

@keyframes scan-vorhang {
	from {
		clip-path: inset(0 0 0 0);
	}
	to {
		clip-path: inset(100% 0 0 0);
	}
}

@keyframes scan-linie {
	from {
		top: 0;
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	to {
		top: 100%;
		opacity: 0;
	}
}

@keyframes raster-aus {
	0%,
	55% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes logo-glitch {
	0% {
		translate: -12px 0;
		filter: hue-rotate(35deg) saturate(2.5) brightness(1.4);
	}
	20% {
		translate: 9px 3px;
		filter: hue-rotate(-40deg) saturate(2) brightness(1.2);
	}
	40% {
		translate: -5px -2px;
		filter: hue-rotate(-25deg) saturate(3) brightness(1.6);
	}
	60% {
		translate: 3px 0;
		filter: hue-rotate(-30deg) brightness(1.5);
	}
	80% {
		translate: 0 0;
		filter: hue-rotate(20deg);
	}
	100% {
		translate: 0 0;
		filter: none;
	}
}

@keyframes titel-glitch {
	0% {
		translate: -5px 0;
		text-shadow: -5px 0 #ff1f55, 5px 0 #3ad7ff;
		clip-path: inset(8% 0 55% 0);
	}
	12% {
		translate: 6px 0;
		text-shadow: 4px 0 #ff1f55, -4px 0 #3ad7ff;
		clip-path: inset(58% 0 6% 0);
	}
	24% {
		translate: -2px 0;
		text-shadow: -3px 0 #ff1f55, 3px 0 #3ad7ff;
		clip-path: inset(0 0 0 0);
	}
	36% {
		translate: 4px 0;
		clip-path: inset(32% 0 38% 0);
	}
	48% {
		translate: 0 0;
		text-shadow: -2px 0 #ff1f55, 2px 0 #3ad7ff;
		clip-path: inset(0 0 0 0);
	}
	70% {
		text-shadow: 1px 0 #ff1f55, -1px 0 #3ad7ff;
	}
	100% {
		translate: 0 0;
		text-shadow: none;
		clip-path: none;
	}
}

/* ---------- Abschnitte allgemein ---------- */

.herde__innen,
.chronik__innen,
.jockeys__innen,
.sets__innen,
.instagram__innen,
.awareness__innen,
.kontakt__innen {
	max-width: var(--breite);
	margin: 0 auto;
	padding: var(--abstand) var(--rand);
}

.abschnittskopf {
	max-width: 42rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.abschnittskopf h2 {
	font-size: var(--t-3);
}

.abschnittskopf p {
	margin-top: 1.25rem;
	color: var(--text-leise);
	font-size: var(--t-1);
	line-height: 1.5;
}

/* ---------- Wer ist Ponyhof? ---------- */

.herde {
	background: var(--magenta);
	color: #fff;
}

/* Ruhiger Grund für den Fließtext: zur Textseite hin ein Schleier in
   Weinrot – das Pulver bleibt sichtbar, die Fläche bleibt Magenta.
   Liegt über der Bühne (gleiche Ebene, später im Baum). */
.herde::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, transparent 30%, rgb(70 0 35 / 0.5) 62%, rgb(70 0 35 / 0.62));
	pointer-events: none;
}

.herde__innen {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 3vw, 2.5rem);
	row-gap: 2rem;
}

.herde__titel {
	grid-column: 1 / span 5;
	font-size: var(--t-3);
}

.herde__leitsatz {
	grid-column: 1 / span 5;
	grid-row: 2;
	font: 700 var(--t-2) / 1.05 var(--anzeige);
}

.herde__text {
	grid-column: 7 / span 6;
	grid-row: 1 / span 3;
	max-width: 36rem;
	font-size: 1.125rem;
	line-height: 1.65;
}

.herde__schluss {
	margin-top: 1.75rem !important;
	font: 800 1.7rem / 1.1 var(--anzeige);
}

@media (max-width: 52rem) {
	.herde__titel,
	.herde__leitsatz,
	.herde__text {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Text steht unter der Überschrift - Schleier von oben nach unten */
	.herde::after {
		background: linear-gradient(180deg, transparent 12%, rgb(70 0 35 / 0.5) 40%, rgb(70 0 35 / 0.62));
	}
}

/* ---------- Chronik ---------- */

.chronik {
	background: var(--nacht);
}

.chronik__titel {
	max-width: 18ch;
	font-size: var(--t-3);
}

.zeitleiste {
	position: relative;
	display: grid;
	/* so viele Spalten wie Stationen */
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 2rem;
	margin: clamp(3rem, 6vw, 5rem) 0;
	padding: 2.25rem 0 0;
	list-style: none;
}

/* Die Linie aus dem Logo, weitergezogen */
.zeitleiste::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	border-radius: 3px;
	background: var(--linie);
}

.zeitleiste__station {
	position: relative;
}

/* Einhörnchen wie auf der alten Seite: das Pony aus dem Logo steht auf der
   Linie, jedes in der Farbe seiner Stelle im Verlauf */
.zeitleiste__einhorn {
	--einhorn: #ff4f7b;
	position: absolute;
	/* steht mit dem Bogen auf der Linie */
	top: calc(-2.25rem - 3.2rem + 3px);
	left: -0.2rem;
	width: 3.2rem;
	height: 3.2rem;
	color: var(--einhorn);
	filter: drop-shadow(0 0 0.6rem color-mix(in srgb, var(--einhorn) 55%, transparent));
}

.zeitleiste__einhorn svg {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 50% 88%;
	animation: schaukeln calc(var(--beat) * 4) ease-in-out infinite alternate;
	animation-play-state: paused;
}

.laeuft .zeitleiste__einhorn svg {
	animation-play-state: running;
}

.zeitleiste__station:nth-child(2) .zeitleiste__einhorn {
	--einhorn: #ff4fa3;
}

.zeitleiste__station:nth-child(2) .zeitleiste__einhorn svg {
	animation-delay: calc(var(--beat) * -1.5);
}

.zeitleiste__station:nth-child(3) .zeitleiste__einhorn {
	--einhorn: #e05ad6;
}

.zeitleiste__station:nth-child(3) .zeitleiste__einhorn svg {
	animation-delay: calc(var(--beat) * -3);
}

.zeitleiste__station:nth-child(4) .zeitleiste__einhorn {
	--einhorn: #b383ff;
}

.zeitleiste__station:nth-child(4) .zeitleiste__einhorn svg {
	animation-delay: calc(var(--beat) * -0.75);
}

.zeitleiste__station:nth-child(5) .zeitleiste__einhorn {
	--einhorn: #9b6bff;
}

.zeitleiste__station:nth-child(5) .zeitleiste__einhorn svg {
	animation-delay: calc(var(--beat) * -2.25);
}

/* wie ein Schaukelpferd */
@keyframes schaukeln {
	from {
		transform: rotate(-9deg);
	}
	to {
		transform: rotate(9deg);
	}
}

.zeitleiste__jahr {
	display: block;
	font: 800 clamp(2.6rem, 1.8rem + 2.6vw, 4rem) / 0.9 var(--anzeige);
}

.zeitleiste__text {
	display: block;
	max-width: 22ch;
	margin-top: 0.75rem;
	color: var(--text-leise);
}

@media (max-width: 52rem) {
	.zeitleiste {
		grid-auto-flow: row;
		gap: 2.5rem;
		padding: 0 0 0 3.5rem;
	}

	.zeitleiste::before {
		inset: 0 auto 0 calc(1.25rem - 1.5px);
		width: 3px;
		height: auto;
		background: linear-gradient(180deg, #ff1f55 0%, #e10d48 28%, #d91487 52%, #ba2bbb 72%, #782ace 100%);
	}

	/* senkrechte Linie: das Einhorn sitzt auf einer dunklen Scheibe mitten
	   auf der Linie */
	.zeitleiste__einhorn {
		top: -0.35rem;
		left: -3.5rem;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0.3rem;
		border-radius: 50%;
		background: var(--nacht);
	}
}

.chronik__unten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.woerterbuch {
	padding-left: 1.25rem;
	border-left: 3px solid var(--orchidee);
}

.woerterbuch dt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
}

.woerterbuch__wort {
	font: 800 1.9rem / 1 var(--anzeige);
}

.woerterbuch__laut,
.woerterbuch__art {
	color: var(--text-leise);
	font-style: italic;
}

.woerterbuch dd {
	margin: 0.6rem 0 0;
	color: var(--text-leise);
	font-style: italic;
}

.chronik__text {
	font-size: var(--t-1);
	line-height: 1.5;
}

@media (max-width: 52rem) {
	.chronik__unten {
		grid-template-columns: 1fr;
	}
}

/* ---------- Jockeys ---------- */

.jockeys__liste {
	display: grid;
	/* 8 Jockeys: 4 x 2 ab Tablet, 2 x 4 am Handy - nie eine halbe Reihe */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
	padding: 0;
	list-style: none;
}

.jockey img {
	width: 100%;
	aspect-ratio: 440 / 500;
	object-fit: cover;
	border-radius: 0.4rem;
	background: var(--nacht);
}

.jockey--ohne-foto img {
	object-fit: contain;
	padding: 18%;
}

.jockey__name {
	display: block;
	margin-top: 0.85rem;
	font: 800 1.6rem / 1 var(--anzeige);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

@media (max-width: 36rem) {
	.jockeys__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jockey__name {
		font-size: 1.3rem;
	}
}

/* ---------- Sets ---------- */

.sets {
	background: var(--schwarz);
}

.sets__innen {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.sets__innen .abschnittskopf {
	margin-bottom: 0;
}

/* Funfact: Pegel links, rechts Überschrift und Satz - zwei Zeilen mit Absicht */
.funfact {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kante);
}

.funfact p {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

.funfact__titel {
	color: var(--text);
	font: 800 1.55rem / 1 var(--anzeige);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.funfact__text {
	color: var(--text-leise);
	font-size: 1rem;
	text-wrap: balance;
}

.pegel--funfact {
	flex: none;
	height: 2.6rem;
	margin: 0;
	gap: 4px;
}

.pegel--funfact i {
	width: 6px;
}

/* ---------- Plattenspieler ----------
   Eigene Oberfläche für die SoundCloud-Sets: Platte mit Ponyhof-Sticker als
   Etikett (dreht sich mit 33 1/3 beim Abspielen), runde Knöpfe,
   Verlaufsbalken, Trackliste. */

.plattenspieler {
	position: relative;
	container-type: inline-size;
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 1rem;
	background:
		radial-gradient(28rem 18rem at 20% 0%, rgb(217 20 135 / 0.16), transparent 70%),
		rgb(20 6 29 / 0.88);
	box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.55), 0 0 3rem rgb(120 42 206 / 0.18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Kante im Logo-Verlauf */
.plattenspieler::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	background: var(--linie);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

.plattenspieler__deck {
	display: grid;
	grid-template-columns: clamp(8.5rem, 16vw, 12.5rem) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.25rem);
	align-items: center;
}

/* Die Platte: Rillen und Sticker-Etikett drehen, der Lichtreflex steht still */
.platte {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #050505;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 0.75rem 2rem rgb(0 0 0 / 0.6);
}

.platte__scheibe {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: repeating-radial-gradient(circle at 50% 50%, #0b0b0b 0 1.5px, #161616 1.5px 3px);
	animation: platte-drehen 1.8s linear infinite;
	animation-play-state: paused;
}

.spielt .platte__scheibe {
	animation-play-state: running;
}

.platte::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / 0.13) 13%, transparent 20% 55%, rgb(255 255 255 / 0.09) 61%, transparent 68%);
	pointer-events: none;
}

.platte__etikett {
	width: 44%;
	border-radius: 50%;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* Scratchen: äußere Scheibe dreht mit 33 1/3, innen die Hand */
.platte-halter {
	display: grid;
	gap: 0.6rem;
	justify-items: center;
	-webkit-user-select: none;
	user-select: none;
}

.platte {
	width: 100%;
	cursor: grab;
	touch-action: none;
}

.platte__dreh {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: 50%;
}

.plattenspieler.kratzt .platte {
	cursor: grabbing;
}

.plattenspieler.kratzt .platte__scheibe {
	animation-play-state: paused;
}

.platte__tipp {
	margin: 0;
	color: var(--text-leise);
	font-size: 0.8125rem;
	text-align: center;
}

@keyframes platte-drehen {
	to {
		transform: rotate(360deg);
	}
}

.plattenspieler__jetzt {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.plattenspieler__titel {
	overflow: hidden;
	font: 800 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem) / 1 var(--anzeige);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.plattenspieler__unterzeile {
	color: var(--text-leise);
	font-size: 0.9rem;
}

.plattenspieler__knoepfe {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.1rem;
}

.rundknopf {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--kante);
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.15s;
}

.rundknopf svg {
	width: 1.15rem;
}

.rundknopf:hover:not(:disabled) {
	border-color: var(--pink);
	color: var(--pink);
}

.rundknopf:active:not(:disabled) {
	transform: scale(0.94);
}

.rundknopf:disabled {
	opacity: 0.35;
	cursor: default;
}

.rundknopf--gross {
	width: 4rem;
	height: 4rem;
	border: 0;
	background: var(--pink);
	color: var(--schwarz);
	box-shadow: 0 0 1.75rem rgb(255 79 163 / 0.45);
}

.rundknopf--gross svg {
	width: 1.6rem;
}

.rundknopf--gross:hover:not(:disabled) {
	background: var(--text);
	color: var(--schwarz);
}

.rundknopf .symbol-pause,
.spielt .rundknopf .symbol-play {
	display: none;
}

.spielt .rundknopf .symbol-pause {
	display: block;
}

/* Vor dem Laden: „Sets laden“ statt Play. Der Klick holt nur die Liste,
   gespielt wird erst, was man aussucht (gewünscht am 01.10.2026). Zurück,
   Weiter und Fortschritt kommen erst mit der Liste. */
.rundknopf .symbol-liste,
.rundknopf__text {
	display: none;
}

.plattenspieler:not(.ist-geladen) .rundknopf--gross {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	width: auto;
	padding: 0 1.7rem 0 1.35rem;
	border-radius: 2rem;
	font: 800 1.35rem / 1 var(--anzeige);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.plattenspieler:not(.ist-geladen) .rundknopf--gross :is(.symbol-liste, .rundknopf__text) {
	display: block;
}

.plattenspieler:not(.ist-geladen) .rundknopf--gross .symbol-play,
.plattenspieler:not(.ist-geladen) :is([data-zurueck], [data-weiter], .fortschritt, .lautstaerke) {
	display: none;
}

/* Beim Laden glüht der Knopf */
.laedt .rundknopf--gross {
	cursor: progress;
}

@media (prefers-reduced-motion: no-preference) {
	.laedt .rundknopf--gross {
		animation: knopf-laedt 1.2s ease-in-out infinite alternate;
	}
}

@keyframes knopf-laedt {
	to {
		box-shadow: 0 0 2.75rem rgb(255 79 163 / 0.85);
		opacity: 0.7;
	}
}

.pegel--spieler {
	margin-left: 0.6rem;
	opacity: 0;
	transition: opacity 0.3s;
}

.spielt .pegel--spieler {
	opacity: 1;
}

.spielt .pegel--spieler i {
	animation-play-state: running;
}

.fortschritt {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1.1rem;
}

.fortschritt__regler {
	--stand: 0%;
	flex: 1;
	min-width: 0;
	height: 2.75rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.fortschritt__regler:disabled {
	cursor: default;
}

.fortschritt__regler::-webkit-slider-runnable-track {
	height: 5px;
	border-radius: 5px;
	background:
		linear-gradient(90deg, #ff1f55, #d91487 50%, #782ace) 0 0 / var(--stand) 100% no-repeat,
		rgb(255 255 255 / 0.14);
}

.fortschritt__regler::-moz-range-track {
	height: 5px;
	border-radius: 5px;
	background: rgb(255 255 255 / 0.14);
}

.fortschritt__regler::-moz-range-progress {
	height: 5px;
	border-radius: 5px;
	background: linear-gradient(90deg, #ff1f55, #d91487 50%, #782ace);
}

.fortschritt__regler::-webkit-slider-thumb {
	width: 14px;
	height: 14px;
	margin-top: -4.5px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0.75rem rgb(255 79 163 / 0.8);
	-webkit-appearance: none;
	appearance: none;
}

.fortschritt__regler::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0.75rem rgb(255 79 163 / 0.8);
}

.fortschritt__regler:disabled::-webkit-slider-thumb {
	opacity: 0;
}

.fortschritt__regler:disabled::-moz-range-thumb {
	opacity: 0;
}

/* Die Zeit behält ihre Breite, schmaler wird nur der Regler */
.fortschritt__zeit {
	flex: none;
	min-width: 6.5rem;
	white-space: nowrap;
	color: var(--text-leise);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Lautstärke: Lautsprecher (schaltet stumm) und ein kurzer Regler im Stil
   des Fortschritts. Am iPhone/iPad ausgeblendet (hidden, aus dem Skript). */
.lautstaerke {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	max-width: 11rem;
}

.lautstaerke[hidden] {
	display: none;
}

.lautstaerke__knopf {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: -0.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-leise);
	cursor: pointer;
	transition: color 0.2s;
}

.lautstaerke__knopf:hover {
	color: var(--pink);
}

.lautstaerke__knopf svg {
	width: 1.3rem;
}

.lautstaerke__aus,
.ist-stumm .lautstaerke__wellen {
	display: none;
}

.ist-stumm .lautstaerke__aus {
	display: inline;
}

.lautstaerke__regler {
	--stand: 100%;
}

.plattenspieler__hinweis {
	margin-top: 1.5rem;
	color: var(--text-leise);
	font-size: 0.9rem;
}

.ist-geladen .plattenspieler__hinweis {
	display: none;
}

/* Trackliste: nummeriert, weil es eine Reihenfolge ist */
.titelliste {
	max-height: 17.5rem;
	margin: 1.5rem 0 0;
	padding: 0.25rem 0 0;
	overflow-y: auto;
	border-top: 1px solid var(--kante);
	list-style: none;
	scrollbar-color: rgb(255 255 255 / 0.25) transparent;
	scrollbar-width: thin;
}

.titelliste__set {
	display: grid;
	grid-template-columns: 2.1rem minmax(0, 1fr) auto;
	gap: 0.75rem;
	align-items: baseline;
	width: 100%;
	padding: 0.7rem 0.5rem;
	border: 0;
	border-bottom: 1px solid rgb(255 255 255 / 0.06);
	background: none;
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.titelliste__set:hover {
	background: rgb(255 255 255 / 0.04);
}

.titelliste__nr {
	color: var(--text-leise);
	font: 700 1rem / 1 var(--anzeige);
}

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

.titelliste__dauer {
	color: var(--text-leise);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.titelliste__set[aria-current],
.titelliste__set[aria-current] .titelliste__nr {
	color: var(--pink);
}

.plattenspieler__quelle {
	margin-top: 1.25rem;
	font-size: 0.9rem;
}

.plattenspieler__quelle a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-leise);
}

.plattenspieler__quelle a:hover {
	color: var(--pink);
}

.plattenspieler__quelle svg {
	width: 1.3rem;
}

/* Das SoundCloud-Widget selbst bleibt unsichtbar - außer im Notfall. Es
   braucht echte Maße, sonst stolpert es beim Zeichnen seiner Wellenform. */
.plattenspieler__widget {
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
	width: 300px;
	height: 166px;
	visibility: hidden;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.nur-widget .plattenspieler__deck,
.nur-widget .titelliste {
	display: none;
}

.nur-widget .plattenspieler__widget {
	position: static;
	visibility: visible;
	display: block;
	width: 100%;
	height: 22rem;
	opacity: 1;
	pointer-events: auto;
}

/* Platte über den Knöpfen, sobald die Karte selbst schmal ist - am Handy,
   aber auch am Tablet, wo der Player neben der Überschrift steht. Neben der
   Platte brauchen Knöpfe und „1:02:33 / 2:04:10“ rund 16rem. */
@container (max-width: 30rem) {
	.plattenspieler__deck {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}

	/* cqi statt %: der Halter ist zentriert und nur so breit wie die Platte */
	.platte {
		width: min(62cqi, 12.5rem);
	}

	.plattenspieler__steuerung {
		width: 100%;
	}

	.plattenspieler__knoepfe {
		justify-content: center;
	}

	.lautstaerke {
		margin-inline: auto;
	}

	/* der Pegel steht schon beim Funfact - hier würde er die Knöpfe aus der Mitte schieben
	   (doppelte Klasse, weil .pegel weiter unten display setzt) */
	.plattenspieler__knoepfe .pegel--spieler {
		display: none;
	}
}

@media (max-width: 52rem) {
	.sets__innen {
		grid-template-columns: 1fr;
	}
}

/* ---------- Instagram und Termine ---------- */

.termine {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem 2rem;
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 0.75rem;
	background: var(--nacht);
}


.termine__titel {
	grid-column: 1 / -1;
	font-size: var(--t-2);
}

.termine p:not(:has(.knopf)) {
	max-width: 44ch;
	font-size: 1.1rem;
}

.termine p + p {
	margin-top: 0;
}

.beitraege {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.5rem, 1.2vw, 1rem);
	padding: 0;
	list-style: none;
}

.beitrag a {
	position: relative;
	display: block;
	border-radius: 0.4rem;
	overflow: hidden;
}

.beitrag img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 0.4s;
}

@media (hover: hover) {
	.beitrag a:hover img {
		transform: scale(1.04);
	}
}

.beitrag__reel {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.7);
	color: var(--text);
	font-size: 0.8125rem;
	font-weight: 600;
}

/* Profilleiste wie bei Instagram: Sticker mit Verlaufsring, Name, Bio.
   Zum Folgen geht es über den Knopf in der Termine-Box. */
.insta-profil {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.1rem;
	align-items: center;
	margin-bottom: 1.25rem;
}

.insta-profil__bild {
	display: block;
	width: 4.25rem;
	padding: 3px;
	border-radius: 50%;
	background: var(--linie);
}

.insta-profil__bild img {
	display: block;
	width: 100%;
	border: 3px solid var(--schwarz);
	border-radius: 50%;
}

.insta-profil__text {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
	margin: 0;
}

.insta-profil__name {
	overflow: hidden;
	color: var(--text);
	font: 800 1.6rem / 1 var(--anzeige);
	letter-spacing: 0.02em;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.insta-profil__name:hover {
	color: var(--pink);
}

.insta-profil__bio {
	color: var(--text-leise);
	font-size: 0.95rem;
}

.knopf--instagram {
	gap: 0.55rem;
	min-height: 3.25rem;
	padding-inline: 1.6rem;
	border: 0;
	background: var(--linie);
	color: #fff;
	font-size: 1.05rem;
	box-shadow: 0 0 1.75rem rgb(217 20 135 / 0.4);
	transition: box-shadow 0.25s, transform 0.2s;
}

.knopf--instagram svg {
	width: 1.3rem;
}

.knopf--instagram:hover {
	background: var(--linie);
	color: #fff;
	box-shadow: 0 0 2.5rem rgb(249 4 255 / 0.55);
	transform: translateY(-1px);
}

@media (max-width: 36rem) {
	.knopf--instagram {
		width: 100%;
	}
}

/* Mehr Ponys zeigen */
.instagram__mehr {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.beitrag.ist-neu {
	animation: beitrag-einblenden 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: calc(var(--nr, 0) * 45ms);
}

@keyframes beitrag-einblenden {
	from {
		opacity: 0;
		transform: translateY(1rem) scale(0.97);
	}
}

/* ---------- Neuester Beitrag, hervorgehoben ----------
   Drei Arten (inc/instagram.php, PONYHOF_INSTAGRAM_NEU): Bühne neben dem
   Raster, doppelt große Kachel oder schräges Polaroid im Raster. */

/* „Neu“ mit einem Punkt, der im Takt blinkt wie ein Live-Zeichen */
.neu-marke {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	color: var(--text-leise);
	font-size: 0.95rem;
}

.neu-marke__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.75rem 0.3rem 0.6rem;
	border-radius: 999px;
	background: var(--pink);
	color: var(--schwarz);
	font: 800 0.95rem / 1 var(--anzeige);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.neu-marke__chip::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: currentColor;
	animation: neu-blinken calc(var(--beat) * 2) ease-in-out infinite;
}

@keyframes neu-blinken {
	50% {
		opacity: 0.35;
		transform: scale(0.6);
	}
}

/* Bühne: groß, das Bild leuchtet in seinen eigenen Farben nach außen */
.insta-neu {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.insta-neu__bild {
	position: relative;
	isolation: isolate;
	display: block;
}

.insta-neu__glut {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(3rem) saturate(2.2) brightness(1.3);
	opacity: 1;
	transform: scale(1.14);
	animation: neu-glut calc(var(--beat) * 8) ease-in-out infinite alternate;
}

@keyframes neu-glut {
	to {
		opacity: 0.55;
		transform: scale(1.02);
	}
}

.insta-neu__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0.75rem;
	box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 1.5rem 3rem rgb(0 0 0 / 0.5);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
	.insta-neu__bild:hover .insta-neu__foto {
		transform: translateY(-4px) rotate(-1deg);
	}
}

.insta-neu__text {
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}

.insta-neu__auszug {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font: 800 clamp(2rem, 1.2rem + 2.6vw, 3.6rem) / 1 var(--anzeige);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
}

/* Kachel und Polaroid: doppelt so groß im Raster */
.beitraege--kachel .beitrag--neu,
.beitraege--polaroid .beitrag--neu {
	grid-column: span 2;
	grid-row: span 2;
}

.beitrag--neu a {
	height: 100%;
	text-decoration: none;
}

/* Bild füllt die Fläche, die Zeilenhöhe geben die kleinen Kacheln vor */
.beitrag__rahmen {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
}

.beitrag__rahmen img {
	height: 100%;
	aspect-ratio: auto;
}

.beitrag__info {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: 0.65rem;
	justify-items: start;
	padding: 6rem clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem);
	background: linear-gradient(transparent, rgb(0 0 0 / 0.9));
	color: var(--text);
}

.beitrag__auszug {
	display: -webkit-box;
	overflow: hidden;
	font: 800 clamp(1.3rem, 1rem + 1.2vw, 1.9rem) / 1.05 var(--anzeige);
	text-transform: uppercase;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.beitraege--kachel .beitrag--neu a {
	border-radius: 0.6rem;
	box-shadow: 0 0 2.5rem rgb(217 20 135 / 0.4);
}

/* Kante im Logo-Verlauf */
.beitraege--kachel .beitrag--neu a::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	background: var(--linie);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}

.beitraege--kachel .neu-marke {
	color: var(--text);
}

/* Polaroid: schräges Sofortbild mit Klebeband und Sticker */
.beitraege--polaroid .beitrag--neu {
	z-index: 1;
}

.beitraege--polaroid .beitrag--neu a {
	display: flex;
	flex-direction: column;
	padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.6rem, 1.2vw, 0.9rem) 0;
	border-radius: 0.2rem;
	overflow: visible;
	background: #fbf6f1;
	box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / 0.6), 0 0 3.5rem rgb(217 20 135 / 0.3);
	transform: rotate(-2.5deg);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.beitraege--polaroid .beitrag__rahmen {
	position: relative;
	flex: 1;
	min-height: 0;
}

.beitraege--polaroid .beitrag__rahmen img {
	position: absolute;
	inset: 0;
}

.beitraege--polaroid .beitrag__info {
	position: static;
	gap: 0.4rem;
	padding: 0.9rem 0.25rem 1.1rem;
	background: none;
	color: #1a0d20;
}

.beitraege--polaroid .neu-marke {
	color: rgb(26 13 32 / 0.65);
}

.beitraege--polaroid .beitrag__reel {
	top: 1.3rem;
	right: 1.3rem;
}

.beitraege--polaroid .beitrag--neu a::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -0.75rem;
	left: 50%;
	width: 6.5rem;
	height: 1.6rem;
	background: rgb(255 79 163 / 0.6);
	transform: translateX(-50%) rotate(3deg);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.beitrag__sticker {
	position: absolute;
	z-index: 2;
	top: -1.4rem;
	right: -1.2rem;
	display: grid;
	place-items: center;
	width: clamp(4.25rem, 7vw, 5.25rem);
	aspect-ratio: 1;
	background: var(--linie);
	color: #fff;
	clip-path: polygon(50% 0%, 59.1% 10%, 71.7% 5%, 75.6% 17.9%, 89.1% 18.8%, 86.9% 32.2%, 98.7% 38.9%, 91% 50%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 75.6% 82.1%, 71.7% 95%, 59.1% 90%, 50% 100%, 40.9% 90%, 28.3% 95%, 24.4% 82.1%, 10.9% 81.2%, 13.1% 67.8%, 1.3% 61.1%, 9% 50%, 1.3% 38.9%, 13.1% 32.2%, 10.9% 18.8%, 24.4% 17.9%, 28.3% 5%, 40.9% 10%);
	font: 800 clamp(1.2rem, 2vw, 1.45rem) / 1 var(--anzeige);
	text-transform: uppercase;
	transform: rotate(14deg);
}

@media (hover: hover) {
	.beitraege--polaroid .beitrag--neu a:hover {
		transform: rotate(0deg) translateY(-4px);
	}
}

@media (max-width: 52rem) {
	.insta-neu {
		grid-template-columns: minmax(0, 1fr);
	}

	.insta-neu__bild {
		width: min(100%, 28rem);
	}
}

/* Am Handy füllt die große Kachel die Zeilen allein - dann gibt sie ihre
   Höhe selbst vor */
@media (max-width: 36rem) {
	.beitraege--kachel .beitrag--neu,
	.beitraege--polaroid .beitrag--neu {
		grid-row: span 1;
	}

	.beitrag--neu a {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.beitraege--polaroid .beitrag--neu a {
		aspect-ratio: 4 / 5.6;
		margin-inline: 0.4rem;
		transform: rotate(-2deg);
	}

	.beitrag__sticker {
		right: -0.6rem;
	}
}

@media (max-width: 52rem) {
	.termine {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 36rem) {
	.beitraege {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Kontakt ---------- */

.kontakt {
	background: var(--schwarz);
}

/* Oben knapper: Instagram und Kontakt auf Schwarz mit zwei vollen Abständen
   wirkten wie ein Loch (01.10.2026: 310 statt 150 px). Seit dem Awareness-
   Abschnitt liegt dazwischen ein Farbwechsel - die knappen Abstände bleiben. */
.kontakt__innen {
	padding-top: calc(var(--abstand) * 0.6);
	padding-bottom: calc(var(--abstand) * 1.2);
}

.instagram__innen {
	padding-bottom: calc(var(--abstand) * 0.5);
}

.kontakt__titel {
	max-width: 16ch;
	font-size: var(--t-3);
}

.kontakt__anlaesse {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.5rem;
	padding: 0;
	list-style: none;
	font-size: var(--t-1);
}

/* Anlässe als Knöpfe: öffnen eine Mail mit dem Anlass als Betreff */
.kontakt__anlaesse a {
	display: inline-block;
	padding: 0.45rem 1rem;
	border: 1px solid rgb(255 255 255 / 0.22);
	border-radius: 999px;
	color: var(--text-leise);
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.kontakt__anlaesse a:hover,
.kontakt__anlaesse a:focus-visible {
	border-color: var(--pink);
	background: rgb(255 79 163 / 0.12);
	color: #fff;
}

.kontakt__mail {
	margin-top: clamp(2rem, 5vw, 3.5rem);
	/* passt auf jeder Breite in eine Zeile (rund 11,7 Geviert breit) */
	font: 800 clamp(1.4rem, 7.2vw, 5.5rem) / 1 var(--anzeige);
	letter-spacing: 0.005em;
}

.kontakt__mail a {
	color: var(--text);
	text-decoration-color: var(--pink);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.18em;
	overflow-wrap: anywhere;
}

.kontakt__mail a:hover {
	color: var(--pink);
}

.kontakt__hinweis {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-left: 1rem;
	border-left: 3px solid var(--pink);
	font-weight: 600;
}

/* Kurz auf Englisch für Gäste aus dem Ausland - auf dunkler Karte, sonst
   läuft die Lichtschleife dahinter durch den Text */
.kontakt__englisch {
	max-width: 40rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--kante);
	border-radius: 1.25rem;
	background: rgb(0 0 0 / 0.72);
	color: var(--text-leise);
}

.kontakt__englisch h3 {
	margin-bottom: 0.75rem;
	color: var(--text);
	font-size: var(--t-2);
}

.kontakt__englisch p + p {
	margin-top: 0.75rem;
}

/* ---------- Awareness ----------
   Bewusst ruhig: keine Lichtspiele, keine Bewegung - hier geht es um
   Schutz. Drei Regeln nebeneinander, darunter das Team mit dem roten
   Ballon, an dem man es bei Events erkennt. */

.awareness {
	background: var(--nacht);
}

.awareness__regeln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.awareness__regel {
	padding-top: 1.5rem;
	border-top: 3px solid var(--pink);
}

.awareness__regel h3 {
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.awareness__regel p {
	margin-top: 1rem;
	color: var(--text-leise);
	line-height: 1.6;
}

.awareness__team {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	margin-top: clamp(3rem, 6vw, 4.5rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--kante);
	border-radius: 1.25rem;
	background: rgb(255 255 255 / 0.03);
}

.awareness__ballon {
	flex: none;
	width: clamp(2.75rem, 5vw, 3.5rem);
	fill: #ff3048;
}

.awareness__schnur,
.awareness__glanz {
	fill: none;
	stroke-linecap: round;
}

.awareness__schnur {
	stroke: rgb(247 240 249 / 0.6);
	stroke-width: 1.6;
}

.awareness__glanz {
	stroke: rgb(255 255 255 / 0.55);
	stroke-width: 2.4;
}

/* Höchstens 2.125rem: so passt der Satz am Desktop in eine Zeile
   (gewünscht am 01.10.2026) */
.awareness__team-titel {
	font: 800 clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem) / 1.1 var(--anzeige);
}

.awareness__team-titel strong {
	color: var(--pink);
}

.awareness__team p + p {
	margin-top: 0.5rem;
	color: var(--text-leise);
}

.awareness__zugang {
	max-width: 46rem;
	margin-top: 2rem;
	color: var(--text-leise);
}

@media (max-width: 52rem) {
	.awareness__regeln {
		grid-template-columns: 1fr;
	}

	.awareness__team {
		align-items: flex-start;
	}
}

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

.fusszeile {
	position: relative;
	background: var(--schwarz);
}

.fusszeile::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: var(--linie);
	opacity: 0.7;
}

.fusszeile__innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	max-width: var(--breite);
	margin: 0 auto;
	padding: 2.5rem var(--rand) 3rem;
	color: var(--text-leise);
	font-size: 0.95rem;
}

.fusszeile__rechtliches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.fusszeile__rechtliches a {
	color: var(--text);
}

/* ---------- Einzelseiten (Impressum & Datenschutz) ---------- */

.seite {
	max-width: 48rem;
	margin: 0 auto;
	padding: calc(var(--kopfhoehe) + clamp(3rem, 8vw, 6rem)) var(--rand) var(--abstand);
}

.seite__titel {
	font-size: var(--t-3);
}

.seite__kopf {
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--kante);
}

.fliesstext {
	color: var(--text-leise);
	overflow-wrap: break-word;
}

.fliesstext h2 {
	margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem;
	color: var(--text);
	font-size: var(--t-2);
}

.fliesstext h2:first-child {
	margin-top: 0;
}

.fliesstext h3 {
	margin: 2.25rem 0 0.75rem;
	color: var(--text);
	font: 600 1.2rem / 1.3 var(--fliesstext);
	letter-spacing: 0;
}

.fliesstext p,
.fliesstext ul,
.fliesstext ol {
	margin: 0 0 1em;
}

.fliesstext ul,
.fliesstext ol {
	padding-left: 1.25rem;
}

.fliesstext li + li {
	margin-top: 0.35em;
}

.fliesstext strong,
.fliesstext b {
	color: var(--text);
	font-weight: 600;
}

/* ---------- Nur für Screenreader ---------- */

.nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Bühne: bewegte Lichtstimmungen ----------
   Jeder Abschnitt bekommt ein Bild der bisherigen Seite als Licht dahinter.
   Bewegt wird nur transform/opacity (läuft auf der Grafikkarte), und nur,
   solange der Abschnitt zu sehen ist: ponyhof.js setzt dann .laeuft. */

.herde,
.chronik,
.jockeys,
.sets,
.instagram,
.kontakt {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.buehne {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.buehne__bild {
	position: absolute;
	inset: -12%;
	width: 124%;
	max-width: none;
	height: 124%;
	object-fit: cover;
}

/* Die animation-Kurzform der einzelnen Bühnen setzt play-state zurück -
   deshalb hier mit höherer Spezifität anhalten. */
[data-bewegung]:not(.laeuft) .buehne__bild,
[data-bewegung]:not(.laeuft) .buehne__rahmen,
[data-bewegung]:not(.laeuft) .buehne__puls,
[data-bewegung]:not(.laeuft) .komet use,
[data-bewegung]:not(.laeuft) .termine,
[data-bewegung]:not(.laeuft) .neu-marke__chip::before,
[data-bewegung]:not(.laeuft) .insta-neu__glut {
	animation-play-state: paused;
}

/* Wer ist Ponyhof: Farbpulver treibt langsam über das Magenta */
.buehne--pulver .buehne__bild {
	opacity: 0.55;
	mix-blend-mode: soft-light;
	animation: pulver-treiben 38s ease-in-out infinite alternate;
}

@keyframes pulver-treiben {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.14) translate3d(-4%, 3%, 0);
	}
}

/* Chronik: die Neon-Ellipse kreist, der Lichtpunkt zieht seine Bahn */
.buehne--ellipse .buehne__bild {
	inset: -25%;
	width: 150%;
	height: 150%;
	opacity: 0.7;
	animation: kreisen 120s linear infinite;
}

.chronik .buehne::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--nacht) 0%, rgb(20 6 29 / 0.3) 35%, rgb(20 6 29 / 0.6) 100%);
}

@keyframes kreisen {
	to {
		transform: rotate(360deg);
	}
}

/* Jockeys: Nebelmaschine – zwei Schwaden ziehen gegeneinander */
.buehne--nebel .buehne__bild {
	opacity: 0.6;
	animation: nebel-ziehen 46s ease-in-out infinite alternate;
}

.buehne--nebel-zwei .buehne__bild {
	opacity: 0.42;
	animation: nebel-gegenzug 62s ease-in-out infinite alternate;
}

@keyframes nebel-ziehen {
	from {
		transform: translate3d(-7%, 0, 0) scale(1.05);
	}
	to {
		transform: translate3d(7%, -3%, 0) scale(1.18);
	}
}

@keyframes nebel-gegenzug {
	from {
		transform: translate3d(8%, 3%, 0) scale(-1.2, 1.2);
	}
	to {
		transform: translate3d(-6%, 0, 0) scale(-1.08, 1.08);
	}
}

/* Sets: Lichtband schwingt wie ein Moving Head */
.buehne--lichtband .buehne__bild {
	opacity: 0.6;
	animation: lichtband-schwingen 26s ease-in-out infinite alternate;
}

.sets .buehne::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--schwarz) 15%, rgb(0 0 0 / 0.55) 55%, rgb(0 0 0 / 0.35));
}

@keyframes lichtband-schwingen {
	from {
		transform: rotate(-5deg) scale(1.02);
	}
	to {
		transform: rotate(6deg) scale(1.12);
	}
}

/* Kontakt: die Lichtschleife atmet im Takt (vier Schläge bei 128 BPM).
   Bild und Lichtbahn (template-parts/buehne-schleife.php) teilen sich den
   Rahmen - so schweben sie gemeinsam und die Bahn bleibt auf der Linie. */
.buehne--schleife .buehne__rahmen {
	position: absolute;
	inset: auto -12% -6%;
	height: 110%;
	animation: schleife-schweben calc(var(--beat) * 4) ease-in-out infinite alternate;
}

.buehne--schleife .buehne__bild,
.buehne__puls,
.buehne__komet {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.buehne--schleife .buehne__bild {
	object-position: center bottom;
	animation: schleife-atmen calc(var(--beat) * 4) ease-in-out infinite alternate;
}

.kontakt .buehne::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--schwarz) 0%, rgb(0 0 0 / 0.35) 45%, rgb(0 0 0 / 0.1));
}

@keyframes schleife-atmen {
	from {
		opacity: 0.55;
	}
	to {
		opacity: 1;
	}
}

@keyframes schleife-schweben {
	from {
		transform: translate3d(0, 1.5%, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

/* Puls: die Linie glüht auf jedem Takt-Anfang auf und klingt aus. Eigenes
   SVG, damit nur seine Deckkraft animiert wird (die Unschärfe bleibt
   stehen) - das schafft die Grafikkarte allein. */
.buehne__puls {
	opacity: 0;
	animation: schleife-puls calc(var(--beat) * 4) cubic-bezier(0.3, 0, 0.4, 1) infinite;
	will-change: opacity;
}

.buehne__puls use {
	fill: none;
	stroke: url(#schleife-farbe);
}

.puls__glut {
	stroke-width: 14;
	filter: url(#schleife-weich);
}

.puls__linie {
	stroke-width: 2.5;
}

@keyframes schleife-puls {
	0% {
		opacity: 0;
	}
	6% {
		opacity: 0.55;
	}
	100% {
		opacity: 0;
	}
}

/* Komet: ein Lichtteilchen fährt die Linie entlang, eine Runde in
   16 Schlägen. Jede Ebene ist ein Strich, dessen Ende der Kopf ist
   („0 Lücke Länge 0“, Maße im Template) - so laufen alle mit derselben
   Animation. „screen“ addiert das Licht wie echtes Leuchten. */
.buehne__komet {
	mix-blend-mode: screen;
}

.komet use {
	fill: none;
	stroke-linecap: round;
	animation: komet-fahrt calc(var(--beat) * 16) linear infinite;
}

@keyframes komet-fahrt {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: -1000;
	}
}

/* Variante „atom“: drei kleinere Teilchen mit gleichem Abstand */
.komet--atom {
	display: none;
}

.komet--atom use {
	animation-delay: calc(var(--beat) * -16 * var(--versatz) / 3);
}

/* Varianten zum Vergleichen (?schleife=…, gesetzt von ponyhof.js) */
[data-schleife="komet"] .buehne__puls use,
[data-schleife="atom"] .buehne__puls use,
[data-schleife="puls"] .komet,
[data-schleife="atom"] .komet:not(.komet--atom),
[data-schleife="aus"] :is(.komet, .buehne__puls use) {
	display: none;
}

[data-schleife="atom"] .komet--atom {
	display: inline;
}

/* stärker und auf jedem zweiten Schlag */
[data-schleife="puls"] .buehne__puls {
	animation-name: schleife-puls-stark;
	animation-duration: calc(var(--beat) * 2);
}

@keyframes schleife-puls-stark {
	0% {
		opacity: 0;
	}
	6% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
	}
}

/* Angehalten oder ruhig gewünscht: kein Teilchen, kein Aufglühen */
.bewegung-aus :is(.komet, .buehne__puls use) {
	display: none;
}

/* ---------- Laufband „Absperrband" ----------
   Zwei schmale Bänder kreuzen sich und laufen gegeneinander: vorne im
   Logo-Verlauf, hinten dunkel und leiser. Bewusst dezent (30.09.2026):
   schmal, flach geneigt, wenig Leuchten, langsam. Der Rahmen schneidet nur seitlich
   ab - oben und unten ragen die Bänder in die Nachbarabschnitte. */

.laufband-rahmen {
	position: relative;
	z-index: 2;
	height: 5.5rem;
	margin: -2.75rem 0;
	overflow-x: clip;
	pointer-events: none;
}

.laufband {
	position: absolute;
	top: 50%;
	left: -5%;
	display: flex;
	align-items: center;
	width: 110%;
	overflow: hidden;
}

.laufband--vorne {
	height: 2.5rem;
	transform: translateY(-50%) rotate(-2deg);
	background: var(--linie);
	box-shadow: 0 0.4rem 1.25rem rgb(0 0 0 / 0.3), 0 0 1.25rem rgb(249 4 255 / 0.12);
}

.laufband--hinten {
	height: 2.1rem;
	transform: translateY(-50%) rotate(1.6deg);
	background: rgb(10 4 16 / 0.62);
	border-block: 1px solid rgb(255 79 163 / 0.3);
}

.laufband__spur {
	display: flex;
	width: max-content;
	animation: laufen 60s linear infinite;
	animation-play-state: paused;
}

.laufband--hinten .laufband__spur {
	animation-duration: 84s;
	animation-direction: reverse;
}

.laufband-rahmen.laeuft .laufband__spur {
	animation-play-state: running;
}

.laufband__gruppe {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.laufband__wort {
	font-family: var(--anzeige);
	text-transform: uppercase;
	white-space: nowrap;
}

.laufband--vorne .laufband__wort {
	color: #fff;
	font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.14em;
}

.laufband--hinten .laufband__wort {
	color: rgb(255 255 255 / 0.4);
	font-size: clamp(0.9rem, 0.75rem + 0.45vw, 1.1rem);
	font-weight: 600;
	letter-spacing: 0.2em;
}

/* Das Pony als Trenner */
.laufband__pony {
	flex: none;
	width: 1.05em;
	height: 1.05em;
	margin: 0 1.1em;
	font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.35rem);
}

.laufband--vorne .laufband__pony {
	color: #fff;
}

.laufband--hinten .laufband__pony {
	color: rgb(255 79 163 / 0.6);
	font-size: clamp(0.9rem, 0.75rem + 0.45vw, 1.1rem);
}

@keyframes laufen {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (max-width: 52rem) {
	.laufband-rahmen {
		height: 4.5rem;
		margin: -2.25rem 0;
	}

	.laufband--vorne {
		height: 2.2rem;
		transform: translateY(-50%) rotate(-2.8deg);
	}

	.laufband--hinten {
		height: 1.9rem;
		transform: translateY(-50%) rotate(2.2deg);
	}
}

/* ---------- Pegel im Takt (Sets) ---------- */

.pegel {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 1.5em;
	margin-right: 0.8rem;
	vertical-align: -0.3em;
}

.pegel i {
	width: 5px;
	height: 100%;
	border-radius: 1px;
	background: linear-gradient(0deg, #782ace, #d91487 55%, #ff1f55);
	transform: scaleY(0.3);
	transform-origin: bottom;
	animation: pegel var(--beat) ease-in-out infinite alternate;
	animation-play-state: paused;
}

.laeuft .pegel i {
	animation-play-state: running;
}

.pegel i:nth-child(2) {
	animation-duration: calc(var(--beat) / 2);
}

.pegel i:nth-child(3) {
	animation-delay: calc(var(--beat) * -0.5);
}

.pegel i:nth-child(4) {
	animation-duration: calc(var(--beat) / 2);
	animation-delay: calc(var(--beat) * -0.25);
}

.pegel i:nth-child(5) {
	animation-duration: calc(var(--beat) * 2);
}

@keyframes pegel {
	to {
		transform: scaleY(1);
	}
}

/* ---------- Jockeys: Foto färbt sich im Logo-Verlauf ---------- */

.jockey__foto {
	position: relative;
	display: block;
	border-radius: 0.4rem;
	overflow: hidden;
}

.jockey__foto img {
	border-radius: 0;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.jockey__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, #ff1f55, #d91487 45%, #782ace);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 0.35s;
}

/* nur mit Maus - am Handy bliebe die Färbung nach dem Antippen hängen */
@media (hover: hover) {
	.jockey:hover .jockey__foto::after {
		opacity: 0.9;
	}

	.jockey:hover .jockey__foto img {
		transform: scale(1.05);
	}
}

.jockey--ohne-foto .jockey__foto::after {
	display: none;
}

/* ---------- Termine: Leuchtrand wie ein LED-Schlauch ---------- */

@property --leuchtwinkel {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.termine {
	border: 2px solid transparent;
	background:
		linear-gradient(var(--nacht), var(--nacht)) padding-box,
		conic-gradient(from var(--leuchtwinkel), #ff1f55, #d91487, #782ace, #3ad7ff, #ff1f55) border-box;
	box-shadow: 0 0 2.5rem rgb(217 20 135 / 0.22);
	animation: leuchtrand 7s linear infinite;
}

@keyframes leuchtrand {
	to {
		--leuchtwinkel: 360deg;
	}
}

/* ---------- Zeitleiste zieht sich beim Scrollen auf ---------- */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.zeitleiste::before {
			transform-origin: left center;
			animation: linie-ziehen linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 45%;
		}

		@media (max-width: 52rem) {
			.zeitleiste::before {
				transform-origin: center top;
				animation-name: linie-ziehen-senkrecht;
			}
		}
	}
}

@keyframes linie-ziehen {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes linie-ziehen-senkrecht {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}

/* Die Einhörnchen hüpfen nacheinander auf die Linie, während sie sich aufzieht */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.zeitleiste__einhorn {
			animation: einhorn-hupf linear both;
			animation-timeline: view();
			animation-range: cover 10% cover 22%;
		}

		.zeitleiste__station:nth-child(2) .zeitleiste__einhorn {
			animation-range: cover 16% cover 28%;
		}

		.zeitleiste__station:nth-child(3) .zeitleiste__einhorn {
			animation-range: cover 22% cover 34%;
		}

		.zeitleiste__station:nth-child(4) .zeitleiste__einhorn {
			animation-range: cover 28% cover 40%;
		}

		.zeitleiste__station:nth-child(5) .zeitleiste__einhorn {
			animation-range: cover 34% cover 46%;
		}

		@media (max-width: 52rem) {
			.zeitleiste__station:nth-child(n) .zeitleiste__einhorn {
				animation-range: entry 40% cover 25%;
			}
		}
	}
}

@keyframes einhorn-hupf {
	0% {
		opacity: 0;
		transform: translateY(45%) scale(0.3);
	}
	65% {
		opacity: 1;
		transform: translateY(-20%) scale(1.1);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Galopp-Anzeige unten an der Kopfzeile ----------
   Die Linie füllt sich mit dem Scrollfortschritt, vorne reitet ein Einhorn.
   Es galoppiert nur, solange gescrollt wird, und schaut in Laufrichtung. */

.galopp {
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
}

.ist-gescrollt .galopp {
	opacity: 1;
}

/* die bisherige Verlaufskante wird zur leisen Spur */
.ist-gescrollt .kopfzeile::after {
	opacity: 0.18;
}

.galopp__linie {
	position: absolute;
	inset: 0;
	background: var(--linie);
	box-shadow: 0 0 0.6rem rgb(249 4 255 / 0.6);
	transform: scaleX(0);
	transform-origin: left center;
}

.galopp__reiter {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1.7rem;
	height: 1.7rem;
	color: #fff;
	filter: drop-shadow(0 0 0.35rem rgb(255 79 163 / 0.9));
}

.galopp__reiter svg {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 50% 90%;
}

.galopp-zurueck .galopp__reiter svg {
	scale: -1 1;
}

.galoppiert .galopp__reiter svg {
	animation: galopp 0.26s ease-in-out infinite alternate;
}

@keyframes galopp {
	from {
		translate: 0 0;
		rotate: -7deg;
	}
	to {
		translate: 0 -0.3rem;
		rotate: 7deg;
	}
}

/* ---------- 404: das Einhorn ist ausgebüxt ----------
   Es galoppiert quer durchs Bild, verschwindet rechts und kommt links
   wieder. Der Boden ist die Verlaufskante der Fußzeile. */

.ausgebuext {
	position: relative;
	height: clamp(9rem, 22vw, 14rem);
	margin-top: -2rem;
	overflow: hidden;
	container-type: inline-size;
}

.ausgebuext__pony {
	position: absolute;
	bottom: 0;
	left: 0;
	width: clamp(5rem, 12vw, 8rem);
	aspect-ratio: 1;
	animation: ausbuexen 6.5s linear infinite;
}

.ausgebuext__sprung {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--pink);
	filter: drop-shadow(0 0 1rem rgb(255 79 163 / 0.55));
	transform-origin: 50% 90%;
	animation: galopp-gross 0.32s ease-in-out infinite alternate;
}

.ausgebuext__sprung svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ein bisschen Staub hinter den Hufen */
.ausgebuext__staub {
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 5rem;
	height: 1.2rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(255 79 163 / 0.45), transparent);
	filter: blur(4px);
	animation: ausbuexen 6.5s linear infinite;
	animation-delay: -0.12s;
}

@keyframes ausbuexen {
	from {
		transform: translateX(-10rem);
	}
	to {
		transform: translateX(calc(100cqw + 2rem));
	}
}

@keyframes galopp-gross {
	from {
		translate: 0 0;
		rotate: -10deg;
	}
	to {
		translate: 0 -18%;
		rotate: 8deg;
	}
}

/* ---------- Kopfzeilen-Logo erst ab Bildschirm 2 (Startseite) ---------- */

.kopfzeile__marke {
	transition: opacity 0.45s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
}

.logo-versteckt .kopfzeile__marke {
	opacity: 0;
	transform: translateY(-0.4rem) scale(0.9);
	visibility: hidden;
}

/* ---------- Club-Modus: Effekte, solange Musik läuft ----------
   Lichtkegel wie Moving Heads schwenken durch den Sets-Abschnitt, das
   Lichtband wird heller, der Player glüht im Takt (128 BPM). Sanft, ohne
   Stroboskop. Beim Anhalten fährt alles wieder herunter. */

.sets__lichter {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.sets__lichter i {
	--strahl: rgb(255 79 163 / 0.5);
	position: absolute;
	top: -6%;
	width: 36rem;
	height: 120%;
	margin-left: -18rem;
	background: linear-gradient(180deg, var(--strahl) 0%, transparent 82%);
	clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
	filter: blur(18px);
	mix-blend-mode: screen;
	opacity: 0;
	transform-origin: 50% 0;
	transition: opacity 1.4s;
	animation: strahl-schwenken calc(var(--beat) * 8) ease-in-out infinite alternate;
	animation-play-state: paused;
}

.sets__lichter i:nth-child(1) {
	--strahl: rgb(255 31 85 / 0.55);
	left: 14%;
	animation-delay: calc(var(--beat) * -3);
}

.sets__lichter i:nth-child(2) {
	--strahl: rgb(217 20 135 / 0.5);
	left: 52%;
	animation-duration: calc(var(--beat) * 12);
	animation-direction: alternate-reverse;
}

.sets__lichter i:nth-child(3) {
	--strahl: rgb(58 215 255 / 0.4);
	left: 90%;
	animation-delay: calc(var(--beat) * -6);
}

.musik-laeuft .sets__lichter i {
	opacity: 0.8;
}

.musik-laeuft.laeuft .sets__lichter i {
	animation-play-state: running;
}

@keyframes strahl-schwenken {
	from {
		transform: rotate(-30deg);
	}
	to {
		transform: rotate(30deg);
	}
}

.buehne--lichtband .buehne__bild {
	transition: opacity 1.4s;
}

.musik-laeuft .buehne--lichtband .buehne__bild {
	opacity: 0.9;
}

/* Der Player glüht im Takt */
.plattenspieler-platz {
	position: relative;
}

.plattenspieler-platz .plattenspieler {
	z-index: 1;
}

.plattenspieler__glut {
	position: absolute;
	inset: -0.6rem;
	border-radius: 1.5rem;
	background: var(--linie);
	filter: blur(26px);
	opacity: 0;
	transition: opacity 0.8s;
	pointer-events: none;
}

.musik-laeuft .plattenspieler__glut {
	animation: takt-glut var(--beat) ease-out infinite;
}

@keyframes takt-glut {
	0% {
		opacity: 0.7;
		transform: scale(1.025);
	}
	100% {
		opacity: 0.22;
		transform: scale(1);
	}
}

.spielt .platte {
	box-shadow: 0 0 0 1px rgb(255 79 163 / 0.4), 0 0 2.25rem rgb(217 20 135 / 0.4), 0 0.75rem 2rem rgb(0 0 0 / 0.6);
	transition: box-shadow 0.8s;
}

/* ---------- Weniger Bewegung, wenn gewünscht ---------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.knopf,
	.beitrag img,
	.hauptmenue,
	.jockey__foto img,
	.jockey__foto::after {
		transition: none;
	}

	.beitrag a:hover img,
	.jockey:hover .jockey__foto img,
	.insta-neu__bild:hover .insta-neu__foto {
		transform: none;
	}

	.insta-neu__foto,
	.beitraege--polaroid .beitrag--neu a {
		transition: none;
	}

	.buehne__bild,
	.buehne__rahmen,
	.laufband__spur,
	.pegel i,
	.termine,
	.platte__scheibe,
	.sets__lichter i,
	.plattenspieler__glut,
	.zeitleiste__einhorn svg,
	.beitrag.ist-neu,
	.neu-marke__chip::before,
	.insta-neu__glut,
	.galoppiert .galopp__reiter svg,
	.ausgebuext__sprung,
	.ausgebuext__staub {
		animation: none;
	}

	/* kein Lichtteilchen, kein Aufglühen an der Kontakt-Schleife */
	.komet,
	.buehne__puls use {
		display: none;
	}

	/* ruhig: das Einhorn steht mitten auf der Linie */
	.ausgebuext__pony {
		animation: none;
		left: 50%;
		translate: -50% 0;
	}

	.ausgebuext__staub {
		display: none;
	}

	/* statt Schwenken und Pulsieren: ruhiges Leuchten */
	.musik-laeuft .sets__lichter i {
		opacity: 0.35;
	}

	.musik-laeuft .plattenspieler__glut {
		opacity: 0.35;
	}

	.kopfzeile__marke {
		transition: none;
	}

	.pegel i {
		transform: scaleY(0.6);
	}
}

/* ---------- Ansicht: Schrift größer ----------
   Zwei Stufen (template-parts/ansicht.php): Die Grundgröße wächst, mit ihr
   alles in rem - Fließtext, kleine Beschriftungen, Knöpfe. Die großen Titel
   bleiben, wie sie sind (groß genug, sonst passten sie nicht mehr), ebenso
   Seitenränder und Abstände der Abschnitte. Die Kopfzeile gleicht zoom aus,
   damit sie am Handy weiter in eine Zeile passt. */
:root.schrift-1 {
	font-size: 125%;
}

:root.schrift-2 {
	font-size: 150%;
}

:root.schrift-1,
:root.schrift-2 {
	--t-2: clamp(28px, 20.8px + 1.8vw, 41.6px);
	--t-3: clamp(41.6px, 25.6px + 4.2vw, 80px);
	--t-4: clamp(80px, 32px + 12vw, 192px);
	--rand: clamp(20px, 5vw, 48px);
	--abstand: clamp(72px, 11vw, 144px);
	--breite: 1184px;
}

.schrift-1 .kopfzeile {
	zoom: 0.8;
}

/* in der Kopfzeile wieder die rem-Werte - zoom macht sie genau so groß wie
   sonst, so bleibt sie über dem Inhalt ausgerichtet (vw rechnet zoom nicht
   heraus, deshalb mal Faktor) */
:is(.schrift-1, .schrift-2) .kopfzeile {
	--breite: 74rem;
}

.schrift-1 .kopfzeile {
	--rand: clamp(1.25rem, 5vw * 1.25, 3rem);
}

.schrift-2 .kopfzeile {
	--rand: clamp(1.25rem, 5vw * 1.5, 3rem);
}

.schrift-2 .kopfzeile {
	zoom: 0.6667;
}

/* dvh rechnet zoom nicht heraus - das Handy-Menü reicht sonst nicht bis
   ganz unten */
.schrift-1 .hauptmenue {
	max-height: calc(100dvh * 1.25 - 100%);
}

.schrift-2 .hauptmenue {
	max-height: calc(100dvh * 1.5 - 100%);
}

/* die Lasche samt Schublade bleibt ebenfalls so groß wie sonst */
.schrift-1 .ansicht-ort--lasche {
	zoom: 0.8;
}

.schrift-2 .ansicht-ort--lasche {
	zoom: 0.6667;
}

.schrift-1 .ansicht--lasche {
	max-height: calc(100dvh * 1.25 - 2rem);
}

.schrift-2 .ansicht--lasche {
	max-height: calc(100dvh * 1.5 - 2rem);
}

/* Zwischentitel sind schon groß - sie bleiben bei ihrer Größe (rem × 16 px),
   sonst passen lange Wörter am Handy nicht mehr in die Spalte */
:is(.schrift-1, .schrift-2) .herde__schluss {
	font-size: 27.2px;
}

:is(.schrift-1, .schrift-2) .zeitleiste__jahr {
	font-size: clamp(41.6px, 28.8px + 2.6vw, 64px);
}

:is(.schrift-1, .schrift-2) .woerterbuch__wort {
	font-size: 30.4px;
}

:is(.schrift-1, .schrift-2) .jockey__name {
	font-size: 25.6px;
}

:is(.schrift-1, .schrift-2) .funfact__titel {
	font-size: 24.8px;
}

:is(.schrift-1, .schrift-2) .plattenspieler__titel {
	font-size: clamp(25.6px, 19.2px + 1.4vw, 36.8px);
}

:is(.schrift-1, .schrift-2) .insta-profil__name {
	font-size: 25.6px;
}

:is(.schrift-1, .schrift-2) .insta-neu__auszug {
	font-size: clamp(32px, 19.2px + 2.6vw, 57.6px);
}

:is(.schrift-1, .schrift-2) .awareness__regel h3 {
	font-size: clamp(32px, 22.4px + 2vw, 48px);
}

:is(.schrift-1, .schrift-2) .awareness__team-titel {
	font-size: clamp(24px, 17.6px + 1.6vw, 36px);
}

@media (max-width: 36rem) {
	:is(.schrift-1, .schrift-2) .jockey__name {
		font-size: 20.8px;
	}
}

/* Lange Wörter („Ponybesichtigungstermine“) dürfen umbrechen, statt über
   den Rand zu ragen; der Text neben dem Ballon darf schmaler werden */
:is(.schrift-1, .schrift-2) body {
	hyphens: auto;
	overflow-wrap: break-word;
}

:is(.schrift-1, .schrift-2) :is(h1, h2, h3) {
	hyphens: manual;
}

:is(.schrift-1, .schrift-2) .kontakt__anlaesse li {
	min-width: 0;
	max-width: 100%;
}

:is(.schrift-1, .schrift-2) .kontakt__anlaesse a {
	overflow-wrap: anywhere;
}

:is(.schrift-1, .schrift-2) .awareness__team > div {
	min-width: 0;
}

@media (max-width: 52rem) {
	:is(.schrift-1, .schrift-2) .awareness__team {
		flex-wrap: wrap;
	}
}

/* ---------- Ansicht: einfache Schrift ----------
   Überschriften in der Fließtext-Schrift statt der schmalen Big Shoulders,
   mit etwas mehr Luft zwischen den Zeilen. */
:root.schrift-einfach {
	--anzeige: var(--fliesstext);
}

.schrift-einfach :is(h1, h2, h3) {
	line-height: 1.1;
}

/* „PONYHOF_official“ ist in der breiteren Schrift rund 1,4-mal so lang */
.schrift-einfach .kopf__titel {
	font-size: min(var(--t-4), 16cqi);
	line-height: 1;
}

@media (max-width: 52rem) {
	.schrift-einfach .kopf__titel {
		font-size: min(var(--t-4), 20cqi);
	}
}

/* der hervorgehobene Instagram-Satz in Großbuchstaben: in der breiteren
   Schrift kleiner, sonst ragt „WUNDERSCHÖNER“ am Handy über den Rand */
.schrift-einfach .insta-neu__auszug {
	font-size: clamp(24px, 16px + 2.2vw, 46px);
}

/* ---------- Ansicht: hoher Kontrast ----------
   Reines Schwarz und Weiß: Lichtstimmungen, Leuchten, Verläufe und Bilder
   hinter Text aus, Knöpfe klar umrandet, Links unterstrichen. Fotos und das
   Logo bleiben - sie sind Inhalt. */
:root.kontrast {
	--nacht: #000;
	--magenta: #000;
	--pink: #fff;
	--orchidee: #fff;
	--text: #fff;
	--text-leise: #fff;
	--kante: #fff;
	--linie: linear-gradient(#fff, #fff);
}

.kontrast *,
.kontrast *::before,
.kontrast *::after {
	text-shadow: none !important;
	box-shadow: none !important;
}

/* Lichtstimmungen, Leuchten und Bilder hinter Text: aus */
.kontrast .buehne,
.kontrast .kopf::before,
.kontrast .kopf__disco,
.kontrast .kopf__glanz,
.kontrast .kopf__licht,
.kontrast .herde::after,
.kontrast .insta-neu__glut,
.kontrast .sets__lichter,
.kontrast .plattenspieler__glut,
.kontrast .laufband--hinten {
	display: none;
}

.kontrast .plattenspieler,
.kontrast .termine {
	border: 2px solid #fff;
	background: #000;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	animation: none;
}

.kontrast .plattenspieler::before {
	display: none;
}

.kontrast .zeitleiste__einhorn,
.kontrast .galopp__reiter {
	color: #fff;
	filter: none;
}

.kontrast .pegel i {
	background: #fff;
}

/* Laufband: weißes Band, schwarze Schrift */
.kontrast .laufband--vorne .laufband__wort,
.kontrast .laufband--vorne .laufband__pony {
	color: #000;
}

/* Knöpfe: weiß gefüllt oder klar weiß umrandet */
.kontrast .knopf,
.kontrast .knopf--instagram,
.kontrast .knopf--instagram:hover {
	border: 2px solid #fff;
	background: #fff;
	color: #000;
}

.kontrast .knopf--leise {
	background: #000;
	color: #fff;
}

.kontrast .knopf--leise:hover {
	background: #fff;
	color: #000;
}

.kontrast .beitrag__sticker {
	color: #000;
}

.kontrast .sprachschalter,
.kontrast .sozial a,
.kontrast .ansicht__stufen,
.kontrast .ansicht__zuruecksetzen {
	border-width: 2px;
}

@media (max-width: 64rem) {
	.kontrast .hauptmenue {
		background: #000;
	}
}

.kontrast .ansicht-knopf {
	background: #fff;
	color: #000;
}

.kontrast .ansicht--lasche {
	border: 2px solid #fff;
	border-right: 0;
	background: #000;
}