/* ==========================================================================
   MainStage Booking – Theme-Styles
   Reihenfolge: Tokens, Reset, Typografie, Layout, Bausteine, Abschnitte,
   Formular, Fußbereich, Bewegungsvorbehalt.
   Maße stammen aus dem Figma-Frame (2000 px breit, Inhaltsspalte 1440 px).
   ========================================================================== */

:root {
	/* Flächen */
	--ms-bg: #262626;
	--ms-surface: #2d2d2d;
	--ms-surface-top: #54575c;
	--ms-white: #ffffff;

	/* Text */
	--ms-text: #ffffff;
	--ms-text-muted: #d9d9d9;
	--ms-ink: #000000;
	--ms-ink-muted: #4a4a4a;

	/* Linien. Der Designwert ist 30 % Weiß.
	   Gemessen im Browser: 2,68:1 auf --ms-bg, 2,62:1 auf --ms-surface.
	   WCAG 1.4.11 verlangt 3:1 für die Begrenzung eines Bedienelements.
	   0.35 würde 3,14:1 bzw. 3,05:1 ergeben – bewusst nicht geändert,
	   das ist eine Designentscheidung. Fokus liegt darüber. */
	--ms-line: rgba(255, 255, 255, 0.3);
	--ms-line-strong: rgba(255, 255, 255, 0.75);

	/* Akzent */
	/* Weiss auf dem Verlauf gemessen: 4,51:1 oben, 3,40:1 unten.
	   Für 16 px fett fordert WCAG 4,5:1 – die untere Hälfte der Glyphen
	   liegt darunter. Ein dunkleres unteres Ende würde das lösen. */
	--ms-accent-from: #9747ff;
	--ms-accent-to: #3192d3;
	--ms-accent: linear-gradient(180deg, var(--ms-accent-from) 0%, var(--ms-accent-to) 100%);

	/* Glasfassung desselben Verlaufs. Die Deckkraft allein trägt den Kontrast
	   nicht: hinter der Fläche läuft Video, dessen hellster Punkt im Bereich
	   des Namens gemessen reines Weiss erreicht (L = 1,000). Deshalb dunkelt
	   backdrop-filter zuerst ab; erst dadurch bleibt Weiss bei 0.65 Deckkraft
	   im schlechtesten Einzelbild bei 4,31:1 oben und 3,47:1 unten – besser
	   als die deckende Fassung, die unten auf 3,40:1 kommt. */
	--ms-accent-glas: linear-gradient(
		180deg,
		rgba(151, 71, 255, 0.65) 0%,
		rgba(49, 146, 211, 0.65) 100%
	);

	/* Formular.
	   --ms-field auf der weissen Karte gemessen: 1,10:1. Das Feld ist damit
	   allein über die Fläche erkennbar, ohne die von 1.4.11 geforderten 3:1.
	   Der Designrahmen --ms-field-border käme auf 2,19:1; für 3:1 bräuchte es
	   etwa #6b7a94. Auch das ist eine Designentscheidung. */
	--ms-field: #eef4ff;
	--ms-field-border: #a2b0c9;
	--ms-error: #b3261e;

	/* Schrift */
	--ms-font-grotesk: "Roboto", "Helvetica Neue", Arial, sans-serif;
	--ms-font-serif: "Fraunces", "Times New Roman", Georgia, serif;

	/* Maße */
	--ms-content: 1440px;
	--ms-gutter: clamp(1rem, 4vw, 2.5rem);
	--ms-radius-card: 20px;
	--ms-radius-field: 5px;
	--ms-radius-pill: 60px;
	--ms-section-gap: clamp(4rem, 9vw, 10rem);

	/*
	 * Bewegung. Eigene Kurven statt der eingebauten CSS-Keywords – die sind
	 * zu kraftlos. Werte nach Emil Kowalski.
	 */
	--ms-ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* Standard für Bedienelemente */
	--ms-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* Bewegung quer über den Schirm */
	--ms-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* Flächen, die aufziehen */
	--ms-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);    /* langer Auftritt beim Scrollen */
	--ms-ease: var(--ms-ease-out);                      /* Kurzname */

	/* Dauer nach Häufigkeit und Weg. Bedienelemente bleiben unter 300 ms. */
	--ms-dur-press: 110ms;   /* Druck: sofort */
	--ms-dur-release: 200ms; /* Loslassen: etwas ruhiger */
	--ms-dur: 200ms;         /* Standard */
	--ms-dur-slow: 260ms;    /* grössere Wege */
	--ms-dur-reveal: 620ms;  /* Auftritt beim Scrollen – Marketing darf länger */
}

/* ------------------------------------------------------------------ Reset */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--ms-bg);
	color: var(--ms-text);
	font-family: var(--ms-font-grotesk);
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

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

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

figure {
	margin: 0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0; /* sonst sprengt langer Inhalt das Grid */
}

legend {
	padding: 0;
}

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

.ms-skip {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--ms-white);
	color: var(--ms-ink);
	border-radius: var(--ms-radius-field);
	font-weight: 700;
	text-decoration: none;
}

.ms-skip:focus {
	top: 1rem;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--ms-accent-from);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Feine Textur über der Fläche – im Design liegt dort ein Partikelraster. */
.ms-noise {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 3px 3px;
}

/* -------------------------------------------------------------- Typografie */

.ms-heading {
	margin: 0 0 clamp(2rem, 4vw, 3.5rem);
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

.ms-heading__grotesk,
.ms-heading__serif {
	display: block;
}

.ms-heading__grotesk {
	font-family: var(--ms-font-grotesk);
	font-weight: 800;
	font-size: clamp(2rem, 4.4vw, 4rem); /* 64 px */
	line-height: 0.94;
	letter-spacing: 0.01em;
}

.ms-heading__serif {
	font-family: var(--ms-font-serif);
	font-weight: 400;
	font-size: clamp(2.25rem, 4.9vw, 4.4375rem); /* 71 px */
	line-height: 0.85;
	letter-spacing: 0.005em;
}

.ms-heading--hero .ms-heading__grotesk {
	font-size: clamp(2.75rem, 8vw, 10rem); /* 160 px */
	line-height: 0.85;
}

.ms-heading--hero .ms-heading__serif {
	font-size: clamp(2.75rem, 8vw, 10rem);
	line-height: 0.85;
}

.ms-heading--card {
	color: var(--ms-ink);
}

.ms-prose {
	max-width: 72ch;
	color: var(--ms-text-muted);
}

/*
 * Rechtsseiten (Impressum, Datenschutz und alles, was über page.php läuft):
 * Die Spalte steht mittig, der Text darin beginnt links. Vorher hing die
 * Textspalte am linken Rand der 1343 px breiten Fläche, während die
 * Überschrift darüber mittig stand – die Seite wirkte dadurch verrutscht.
 */
.ms-page__inner {
	max-width: 72ch;
	margin-inline: auto;
}

.ms-page__inner .ms-heading,
.ms-page__inner .ms-prose {
	max-width: none;
	text-align: start;
}

.ms-prose p {
	margin: 0 0 1em;
}

.ms-prose p:last-child {
	margin-bottom: 0;
}

.ms-prose a {
	color: var(--ms-white);
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ Layout */

.ms-main {
	position: relative;
	z-index: 1;
}

.ms-section {
	width: min(100% - (2 * var(--ms-gutter)), var(--ms-content));
	margin-inline: auto;
	padding-block: var(--ms-section-gap);
}

.ms-header {
	position: absolute;
	inset-block-start: clamp(1.25rem, 3vw, 4.25rem);
	inset-inline: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.ms-header__logo {
	pointer-events: auto;
	display: block;
	color: var(--ms-white);
}

.ms-header__mark {
	width: clamp(104px, 10vw, 146px);
	height: auto;
}

/* -------------------------------------------------------------------- Hero */

.ms-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(560px, 52vw, 1036px);
	padding-block: clamp(8rem, 14vw, 12rem) clamp(5rem, 8vw, 7rem);
	padding-inline: var(--ms-gutter);
	overflow: hidden;
	isolation: isolate;
}

/*
 * Der Hintergrund steht im Viewport fest, während der Kopfbereich darüber
 * wegscrollt. Umgesetzt wie im Schrift-Fenster: das Medium wird per transform
 * um die Viewport-Position des Kopfbereichs zurückgeschoben, der Kopfbereich
 * selbst schneidet mit overflow: hidden ab.
 *
 * inset unten offen, damit die Höhe greift. Ohne JavaScript bleibt es bei
 * 100 % Kopfbereichshöhe – dann scrollt es einfach mit.
 */
.ms-hero__media {
	position: absolute;
	inset: 0 0 auto 0;
	height: 100%;
	z-index: -3;
}

.ms-hero__media.is-fest {
	will-change: transform;
}

.ms-hero__media img,
.ms-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Der Bildmittelpunkt liegt im Design im oberen Drittel – auf schmalen
	   Viewports bleibt so das Motiv im Bild statt der Fläche darunter. */
	object-position: 50% 30%;
}

/* Das Video liegt über dem Standbild und blendet auf, sobald es läuft.
   Bis dahin sieht man das Bild – kein Schwarzblitz beim Start. */
.ms-hero__video {
	opacity: 0;
	transition: opacity var(--ms-dur-slow) var(--ms-ease-out);
}

.ms-hero__video.is-playing {
	opacity: 1;
}

/*
 * Verlauf nach unten in die Grundfläche, wie die Maske im Design – plus eine
 * örtliche Abschattung hinter der Überschrift.
 *
 * Grund: gegen das rohe Videobild gemessen lagen im schlechtesten Einzelbild
 * 93,9 % der weissen Glyphenfläche unter 3:1 (Minimum 1,0:1). Ein flächiges
 * Abdunkeln würde das Video erschlagen; die Ellipse schattet nur dort ab,
 * wo Schrift steht, und läuft nach aussen aus.
 */
.ms-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			ellipse 78% 52% at 50% 42%,
			rgba(12, 12, 12, 0.86) 0%,
			rgba(12, 12, 12, 0.78) 42%,
			rgba(12, 12, 12, 0.42) 72%,
			rgba(12, 12, 12, 0) 100%
		),
		linear-gradient(180deg, rgba(38, 38, 38, 0.6) 0%, rgba(38, 38, 38, 0.15) 30%),
		linear-gradient(180deg, rgba(38, 38, 38, 0) 45%, var(--ms-bg) 100%);
}

/* Ohne Video steht dort ein ruhiges Bild – dann darf die Abschattung
   deutlich zurückgenommen werden. */
.ms-hero:not(:has(.ms-hero__video.is-playing)) .ms-hero__veil {
	background:
		radial-gradient(
			ellipse 78% 52% at 50% 42%,
			rgba(12, 12, 12, 0.55) 0%,
			rgba(12, 12, 12, 0.3) 60%,
			rgba(12, 12, 12, 0) 100%
		),
		linear-gradient(180deg, rgba(38, 38, 38, 0.55) 0%, rgba(38, 38, 38, 0) 35%),
		linear-gradient(180deg, rgba(38, 38, 38, 0) 45%, var(--ms-bg) 100%);
}

/*
 * Über die HÖHE begrenzen, nicht über die Breite: ein hochformatiger
 * Freisteller (etwa 588 × 1400) wäre sonst höher als der Kopfbereich und
 * würde oben abgeschnitten – man sähe nur noch die Beine.
 */
.ms-hero__portrait {
	position: absolute;
	inset-block-end: 0;
	inset-inline-end: clamp(-2rem, -1vw, 0rem);
	z-index: -2;
	height: min(88%, 900px);
	width: auto;
	max-width: 46%;
}

.ms-hero__portrait img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: contain;
	object-position: bottom right;
}

.ms-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(2rem, 5vw, 6.5rem);
	width: min(100%, var(--ms-content));
	text-align: center;
}

/* Auf der Künstlerseite steht rechts das Portrait – die Überschrift bekommt
   eine schmalere Spalte, damit lange Namen umbrechen statt darunter zu laufen. */
@media (min-width: 961px) {
	.ms-hero--artist .ms-heading {
		max-width: 62%;
		margin-inline: auto;
	}
}

.ms-hero .ms-heading {
	margin-bottom: 0;
	/* Deutsche Komposita brechen sonst über die Spaltenbreite hinaus. */
	hyphens: auto;
	overflow-wrap: break-word;
}

.ms-scroll {
	position: absolute;
	inset-block-end: clamp(1.5rem, 4vw, 5.5rem);
	inset-inline: 0;
	margin-inline: auto;
	width: 46px;
	color: var(--ms-white);
	transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-scroll:hover {
	transform: translateY(4px);
}

.ms-scroll svg {
	width: 46px;
	height: 46px;
}

/* ------------------------------------------- Künstler-Kopfbereich, Ausgangszustand */

/*
 * Die Abschattung entfällt hier. Sie war nötig, solange weisse Schrift direkt
 * auf dem Video stand; jetzt tragen die Verlaufsfläche hinter dem Namen und die
 * gefüllte Sprungnavigation die Lesbarkeit. Der Verlauf nach unten in die
 * Grundfläche bleibt – ohne ihn bräche der Abschnitt hart ab.
 */
.ms-hero--artist .ms-hero__veil,
.ms-hero--artist:not(:has(.ms-hero__video.is-playing)) .ms-hero__veil {
	background: linear-gradient(180deg, rgba(38, 38, 38, 0) 45%, var(--ms-bg) 100%);
}

/*
 * Der Name ist EIN inline-Element, das über zwei Zeilen läuft.
 * box-decoration-break bleibt auf slice (Vorgabe): der Verlauf wird einmal über
 * den gesamten Block gerechnet und danach je Zeile zugeschnitten. Deshalb läuft
 * er über den Umbruch hinweg weiter, statt in jeder Zeile neu bei Violett zu
 * beginnen – bei clone wäre genau das der Fall.
 *
 * Senkrechte Polsterung vergrössert die Zeilenhöhe bei inline-Elementen nicht:
 * die Flächen überlappen sich leicht, wie im Entwurf.
 *
 * Weiss auf dem Verlauf: 4,51:1 oben, 3,40:1 unten. Der Name ist Grosstext,
 * WCAG 1.4.3 verlangt dafür 3:1 – beide Enden erfüllen das.
 */
/*
 * Jedes Wort des Namens liegt auf einer eigenen Fläche.
 *
 * Der naheliegende Weg – ein umbrechendes inline-Element mit
 * box-decoration-break: slice – funktioniert hier nicht: gemessen beginnt der
 * Verlauf in jeder Zeile neu bei Violett (22.09.2026, #6191D5 am Ende der
 * ersten Zeile, #9463F6 am Anfang der zweiten). Stattdessen trägt jede Zeile
 * denselben Verlauf, der über alle Zeilen gestreckt und je Zeile um ihren
 * Anteil verschoben wird. Damit läuft er durch, als wäre es eine Fläche.
 *
 * --n ist die Anzahl der Zeilen (an der Überschrift), --i der Index der
 * Zeile (am Wort). Beide setzt ms_heading().
 */
.ms-hero--artist .ms-heading__zeile {
	/*
	 * Block, nicht inline-block: zwei kurze Wörter wie „DJ Aaron" passten
	 * sonst nebeneinander in die Spalte und landeten auf derselben Zeile.
	 * fit-content hält die Fläche trotzdem an der Wortbreite.
	 */
	display: block;
	width: fit-content;
	margin-inline: auto;
	padding: 0.11em 0.14em 0.12em;
	border-radius: 10px;
	background-image: var(--ms-accent);
	background-repeat: no-repeat;
	background-size: 100% calc(var(--n, 1) * 100%);
	background-position: 0 calc(var(--i, 0) / max(var(--n, 1) - 1, 1) * 100%);
}

/*
 * Glas: der Verlauf wird durchscheinend, das Video dahinter weichgezeichnet und
 * abgedunkelt. Die Abdunklung ist nicht Geschmack, sondern die Bedingung dafür,
 * dass die Fläche durchscheinen darf – ohne sie fiele Weiss auf dem unteren
 * Verlaufsende im hellsten Einzelbild auf 2,15:1.
 *
 * Nur dort, wo backdrop-filter wirklich greift. Sonst bleibt die deckende
 * Fassung stehen, die ihren Kontrast aus sich selbst holt.
 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {

	.ms-hero--artist .ms-heading__zeile {
		background-image: var(--ms-accent-glas);
		-webkit-backdrop-filter: blur(26px) saturate(1.15) brightness(0.55);
		backdrop-filter: blur(26px) saturate(1.15) brightness(0.55);
	}
}

/* Wer Transparenz abbestellt hat, bekommt die deckende Fläche zurück. */
@media (prefers-reduced-transparency: reduce) {

	.ms-hero--artist .ms-heading__zeile {
		background-image: var(--ms-accent);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/*
 * Enge Zeilenführung wie im Entwurf: die Flächen berühren sich, statt
 * auseinanderzufallen. Der Wert liegt knapp unter der Flächenhöhe von
 * 0.94em, damit keine Lücke entsteht.
 */
.ms-hero--artist .ms-heading--hero {
	line-height: 0.92;
}

/* Ein Wort, eine Zeile – dann gibt es nichts zu verschieben. */
.ms-hero--artist .ms-heading__zeile:only-child {
	background-size: 100% 100%;
	background-position: 0 0;
}

/*
 * Sprungnavigation als gefüllte Leiste. Ohne die Abschattung stünde die
 * Beschriftung sonst ungeschützt auf dem Video.
 */
.ms-hero--artist .ms-pillnav__link {
	border: 1px solid transparent;
	background-color: #000000;
	color: var(--ms-white);
}

/* Trennlinie am Listenpunkt, nicht am Link: der Hover setzt den Rahmen des
   Links auf transparent und würde die Trennung sonst mitnehmen. */
.ms-hero--artist .ms-pillnav__item + .ms-pillnav__item {
	border-inline-start: 1px solid rgba(255, 255, 255, 0.15);
}

/* --------------------------------------------------------- Pill-Navigation */

.ms-pillnav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.ms-pillnav__link {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-width: 200px;
	min-height: 91px;
	/* Seitlich 16 px mehr als im Entwurf: die Beschriftung stand sonst zu
	   dicht an den Trennlinien und den runden Enden. */
	padding: 1rem 2.5rem;
	border: 1px solid var(--ms-line);
	color: var(--ms-text);
	font-size: clamp(0.875rem, 1.1vw, 1.25rem);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--ms-dur) var(--ms-ease), border-color var(--ms-dur) var(--ms-ease);
}

.ms-pillnav__item + .ms-pillnav__item .ms-pillnav__link {
	border-inline-start: 0;
}

.ms-pillnav__item:first-child .ms-pillnav__link {
	border-start-start-radius: var(--ms-radius-pill);
	border-end-start-radius: var(--ms-radius-pill);
}

.ms-pillnav__item:last-child .ms-pillnav__link {
	border-start-end-radius: var(--ms-radius-pill);
	border-end-end-radius: var(--ms-radius-pill);
}

/* ------------------------------------------------------------------ Kachel */

.ms-grid {
	display: grid;
	gap: 9px 4px;
}

.ms-grid--large {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ms-grid--small {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 12px;
}

.ms-tile__frame {
	position: relative;
	display: block;
	aspect-ratio: 360 / 503;
	background-color: var(--ms-surface);
	border-radius: var(--ms-radius-card);
	overflow: hidden;
	isolation: isolate;
}

.ms-tile--small .ms-tile__frame {
	aspect-ratio: 229 / 306;
	background-color: var(--ms-surface);
}

.ms-tile__logo,
.ms-tile__name {
	position: absolute;
	inset-block-start: 6.2%;
	inset-inline: 8%;
	z-index: 3;
	margin: 0;
	text-align: center;
}

.ms-tile__logo img {
	margin-inline: auto;
	max-height: 114px;
	width: auto;
	object-fit: contain;
}

.ms-tile__name {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
}

.ms-tile__portrait {
	position: absolute;
	inset: 13% 0 0;
	z-index: 1;
}

/*
 * Freigestellte Motive stehen auf der unteren Kachelkante auf und werden
 * nicht beschnitten – sonst fehlen Hände oder Kopf. Das entspricht dem
 * Design, in dem die Figur frei auf der Fläche steht.
 */
.ms-tile--freisteller .ms-tile__portrait img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}

/* Platzhalter, solange zu einem Künstler kein Motiv gepflegt ist. */
.ms-tile__platzhalter {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #3a3a3a;
}

.ms-tile--small .ms-tile__portrait {
	inset: 17% 0 0;
}

/*
 * Foto-Kacheln: das Bild füllt die Kachel randlos, der Name liegt darüber und
 * bekommt einen kurzen Verlauf als Grund. Der Verlauf unten trägt die Buttons.
 */
.ms-tile--foto .ms-tile__portrait {
	inset: 0;
}

.ms-tile--foto .ms-tile__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
}

.ms-tile--foto .ms-tile__logo,
.ms-tile--foto .ms-tile__name {
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 3;
	padding: 1.1rem 1rem 2.6rem;
	/* Der Verlauf muss über der Textzeile stehen bleiben und darf erst
	   darunter auslaufen – sonst sitzt der Name bei hellen Fotos auf
	   3,9:1 statt der geforderten 4,5:1. */
	background: linear-gradient(
		180deg,
		rgba(20, 20, 20, 0.9) 0%,
		rgba(20, 20, 20, 0.84) 48%,
		rgba(20, 20, 20, 0) 100%
	);
}

.ms-tile--foto .ms-tile__fade {
	height: 46%;
	background: linear-gradient(
		180deg,
		rgba(20, 20, 20, 0) 0%,
		rgba(20, 20, 20, 0.05) 16%,
		rgba(20, 20, 20, 0.16) 30%,
		rgba(20, 20, 20, 0.33) 43%,
		rgba(20, 20, 20, 0.53) 55%,
		rgba(20, 20, 20, 0.72) 67%,
		rgba(20, 20, 20, 0.86) 79%,
		rgba(20, 20, 20, 0.94) 90%,
		rgba(20, 20, 20, 0.96) 100%
	);
}

/*
 * Drei Balken im Muster der Bildmarke. Sie wachsen über clip-path ein –
 * damit bleibt der Verlauf in jedem Balken unverzerrt, anders als bei einer
 * Skalierung, und es entsteht kein Layout.
 * Masse aus Figma (Kachel 360): 128 / 120 / 120 px bei x 0 / 124 / 240.
 */
.ms-tile__balken {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	overflow: hidden;
}

.ms-tile__balken-teil {
	position: absolute;
	inset-block: 0;
	background: var(--ms-accent);
	transition: clip-path 260ms var(--ms-ease-out);
}

/*
 * Reihenfolge und Richtung nach Absprache: erst die Mitte von oben, dann
 * versetzt links von unten, zuletzt rechts von oben. Im Figma kam der rechte
 * Balken von unten – das ist die bewusste Abweichung.
 */

/* Von oben einwachsen: Mitte und rechts */
.ms-tile__balken-teil:nth-child(2),
.ms-tile__balken-teil:nth-child(3) {
	clip-path: inset(0 0 100% 0);
}

/* Von unten einwachsen: links */
.ms-tile__balken-teil:nth-child(1) {
	clip-path: inset(100% 0 0 0);
}

.ms-tile__balken-teil:nth-child(1) {
	inset-inline-start: 0;
	width: 35.56%; /* 128 / 360 */
}

.ms-tile__balken-teil:nth-child(2) {
	inset-inline-start: 34.44%; /* 124 / 360 */
	width: 33.34%;
}

.ms-tile__balken-teil:nth-child(3) {
	inset-inline-start: 66.67%; /* 240 / 360 */
	width: 33.33%;
}

/*
 * Weiche Kante nach unten. Im Design ist das eine weichgezeichnete Fläche,
 * kein harter Verlauf – deshalb viele Stützstellen mit ansteigender Kurve
 * statt zweier Endpunkte.
 */
.ms-tile__fade {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 2;
	height: 56%;
	background: linear-gradient(
		180deg,
		rgba(45, 45, 45, 0) 0%,
		rgba(45, 45, 45, 0.04) 16%,
		rgba(45, 45, 45, 0.13) 30%,
		rgba(45, 45, 45, 0.28) 43%,
		rgba(45, 45, 45, 0.47) 55%,
		rgba(45, 45, 45, 0.67) 67%,
		rgba(45, 45, 45, 0.84) 79%,
		rgba(45, 45, 45, 0.95) 90%,
		var(--ms-surface) 100%
	);
}

.ms-tile__actions {
	position: absolute;
	inset-block-end: 7.75%;
	inset-inline: 0;
	z-index: 4;
	justify-content: center;
}

/* --------------------------------------------------------- Geteilter Button */

.ms-split {
	display: flex;
}

.ms-split__part {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	min-width: 100px;
	min-height: 40px;
	padding-inline: 0.75rem;
	border: 1px solid var(--ms-line);
	color: var(--ms-text);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--ms-dur) var(--ms-ease), border-color var(--ms-dur) var(--ms-ease);
}

.ms-split__part--left {
	border-start-start-radius: var(--ms-radius-card);
	border-end-start-radius: var(--ms-radius-card);
}

.ms-split__part--right {
	border-inline-start: 0;
	border-start-end-radius: var(--ms-radius-card);
	border-end-end-radius: var(--ms-radius-card);
}

/* -------------------------------------------------------- Waagerechte Strecke */

.ms-rail {
	margin-inline: calc(var(--ms-gutter) * -1);
	padding-inline: var(--ms-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;

	/*
	 * Kein Einrasten. Beim Ziehen mit der Maus reisst es die Strecke nach dem
	 * Auslaufen auf die nächste Kachel – das fühlt sich wie ein Ruck an.
	 * Einrasten gibt es nur im Karussell auf schmalen Geräten, wo es zu den
	 * Blätter-Buttons passt.
	 */
	scroll-snap-type: none;

	/* Die eigene Leiste steht unter der Strecke, die native wird versteckt. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ms-rail::-webkit-scrollbar,
.ms-gridwrap::-webkit-scrollbar {
	display: none;
}

/*
 * Greifen mit der Maus. Nur bei feinem Zeiger – auf Touch ist das native
 * Wischen besser und würde sich mit der Zugsteuerung ins Gehege kommen.
 */
@media (hover: hover) and (pointer: fine) {
	.ms-rail.is-ziehbar,
	.ms-gridwrap.is-ziehbar {
		cursor: grab;
	}

	.ms-rail.is-greift,
	.ms-gridwrap.is-greift {
		cursor: grabbing;
	}
}

/* Während des Ziehens darf nichts einrasten, sonst ruckelt der Schwung. */
.ms-rail.is-greift,
.ms-gridwrap.is-greift,
.ms-rail.is-schwingt,
.ms-gridwrap.is-schwingt {
	scroll-snap-type: none;
}

/* Beim Ziehen keine Bilder oder Links aufnehmen. */
.ms-rail.is-greift a,
.ms-gridwrap.is-greift a,
.ms-rail.is-greift img,
.ms-gridwrap.is-greift img {
	pointer-events: none;
}

/* Der Browser soll Bilder in der Strecke nie als Objekt mitnehmen. */
.ms-rail img,
.ms-gridwrap img {
	-webkit-user-drag: none;
	user-select: none;
}

/* ------------------------------------------------- Eigene Bildlaufleiste */

/*
 * Statt der Systemleiste eine schmale Spur im Seitendesign: dünner Strich
 * in Linienfarbe, darauf ein Griff im Akzentverlauf. Erscheint nur, wenn es
 * tatsächlich etwas zu schieben gibt.
 */
.ms-railbar {
	position: relative;
	width: min(100%, 320px);
	height: 4px;
	margin: 1.25rem auto 0;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.12);
	cursor: pointer;
	touch-action: none;
}

.ms-railbar[hidden] {
	display: none;
}

.ms-railbar__griff {
	position: absolute;
	inset-block: -3px;
	inset-inline-start: 0;
	min-width: 32px;
	border-radius: 999px;
	background: var(--ms-accent);
	transition: transform var(--ms-dur) var(--ms-ease-out);
}

.ms-railbar:hover .ms-railbar__griff,
.ms-railbar.is-greift .ms-railbar__griff {
	transform: scaleY(1.35);
}

/* Der Griff folgt beim Ziehen sofort, ohne Nachlauf. */
.ms-railbar.is-greift .ms-railbar__griff {
	transition: none;
}


.ms-rail__track {
	display: flex;
	gap: 12px;
	justify-content: center;
	min-width: max-content;
	padding-block-end: 1rem;
}

.ms-rail__item {
	flex: 0 0 auto;
	width: 229px;
}

.ms-rail--gallery .ms-rail__track {
	gap: 31px;
	justify-content: flex-start;
}

.ms-rail--gallery .ms-rail__item {
	width: min(493px, 78vw);
}


/* ------------------------------------------------- Blättern in der Strecke */

.ms-railnav {
	display: none;
	justify-content: center;
	gap: 1rem;
	margin-block-start: 1.5rem;
}

.ms-railnav__btn {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform var(--ms-dur) var(--ms-ease), opacity var(--ms-dur) var(--ms-ease);
}

.ms-railnav__btn svg {
	width: 46px;
	height: 46px;
}

.ms-railnav__btn[data-ms-rail-prev] svg {
	rotate: 90deg;
}

.ms-railnav__btn[data-ms-rail-next] svg {
	rotate: -90deg;
}

.ms-railnav__btn:hover {
	transform: scale(1.06);
}

.ms-railnav__btn[disabled] {
	opacity: 0.35;
	cursor: default;
	transform: none;
}

.ms-gridwrap {
	min-width: 0;
}

/* ------------------------------------------------------------------ Galerie */

.ms-gallery__media {
	position: relative;
	aspect-ratio: 493 / 666;
	border-radius: var(--ms-radius-card);
	overflow: hidden;
	background-color: var(--ms-surface);
}

.ms-gallery__media img,
.ms-gallery__media video,
.ms-gallery__media iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.ms-gallery__caption {
	margin: 0.75rem 0 0;
	color: var(--ms-text-muted);
	font-size: 0.875rem;
}

.ms-lite-embed {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ms-lite-embed__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--ms-accent);
	color: var(--ms-white);
	transition: transform var(--ms-dur) var(--ms-ease);
}

.ms-lite-embed__play svg {
	width: 34px;
	height: 34px;
}

.ms-lite-embed:hover .ms-lite-embed__play {
	transform: scale(1.06);
}

/* -------------------------------------------------------------- Profil-Links */

.ms-profile__claim {
	max-width: 24ch;
	margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
	font-family: var(--ms-font-serif);
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	text-wrap: balance;
}

.ms-profile__text {
	max-width: 1000px;
	margin-inline: auto;
	text-align: center;
}

.ms-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-block-start: clamp(2rem, 4vw, 3.5rem);
}

.ms-links__link {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-width: 260px;
	min-height: 100px;
	padding-inline: clamp(1.25rem, 3vw, 2.75rem);
	background: linear-gradient(180deg, var(--ms-surface-top) 0%, var(--ms-bg) 100%);
	color: var(--ms-text-muted);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform var(--ms-dur-release) var(--ms-ease-out);
}

.ms-links__item:first-child .ms-links__link {
	border-start-start-radius: var(--ms-radius-pill);
	border-end-start-radius: var(--ms-radius-pill);
}

.ms-links__item:last-child .ms-links__link {
	border-start-end-radius: var(--ms-radius-pill);
	border-end-end-radius: var(--ms-radius-pill);
}

.ms-links__icon svg,
.ms-links__icon img {
	width: 48px;
	height: 48px;
	color: var(--ms-white);
}

.ms-links__icon > svg {
	position: absolute;
	inset: 0;
}

.ms-links__label {
	min-width: 0;
}

/* ---------------------------------------------------------------- Pressekit */

.ms-presskit {
	text-align: center;
}

.ms-presskit__text {
	margin-inline: auto;
	margin-block-end: 2rem;
	max-width: 62ch;
}


/* ==========================================================================
   Hover-Zustände, 1:1 aus den state=hover-Varianten des Figma-Files.

   Alle Wechsel laufen über opacity und transform, damit sie auf dem
   Compositor bleiben. Gekapselt in (hover: hover), sonst bleibt der Zustand
   auf Touch-Geräten nach dem Antippen kleben.
   ========================================================================== */

/* Gemeinsame Verlaufsschicht: liegt hinter dem Inhalt und wird eingeblendet. */
.ms-pillnav__link::before,
.ms-split__part::before,
.ms-links__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	transition: opacity var(--ms-dur) var(--ms-ease);
}

.ms-pillnav__link::before,
.ms-split__part::before {
	background: var(--ms-accent);
}

/* Die Link-Kacheln hellen im Hover auf, statt zu verlaufen. */
.ms-links__link::before {
	background: linear-gradient(180deg, #ffffff 0%, #def2ff 100%);
}

@media (hover: hover) {

	/* Sprungnavigation: Rahmen weicht der Verlaufsfläche. */
	.ms-pillnav__link:hover {
		border-color: transparent;
	}

	.ms-pillnav__link:hover::before {
		opacity: 1;
	}

	/* DETAILS / BUCHEN: Verlaufsfläche plus 2 px Rand in #9747ff.
	   Das zweite Pixel kommt als inset-Schatten, damit sich die Kachel
	   im Hover nicht um einen Pixel verschiebt. */
	.ms-split__part:hover {
		border-color: var(--ms-accent-from);
		box-shadow: inset 0 0 0 1px var(--ms-accent-from);
	}

	.ms-split__part:hover::before {
		opacity: 1;
	}

	/* Kachel: Grund wird zum Verlauf, das Portrait fährt heran,
	   die dunkle Verlaufskante verschwindet. */
	.ms-tile:hover .ms-tile__balken-teil {
		clip-path: inset(0 0 0 0);
	}

	/*
	 * Der Versatz macht die Reihenfolge lesbar: Mitte (0), links (60),
	 * rechts (120). Beim Verlassen laufen alle gleichzeitig zurück –
	 * eine rückwärts abgespielte Choreografie wirkt zäh.
	 */
	.ms-tile:hover .ms-tile__balken-teil:nth-child(1) {
		transition-delay: 60ms;
	}

	.ms-tile:hover .ms-tile__balken-teil:nth-child(3) {
		transition-delay: 120ms;
	}

	.ms-tile:hover .ms-tile__fade {
		opacity: 0;
	}

	.ms-tile:hover .ms-tile__portrait img {
		/* 142,99 % → 176,87 % Breite im Design = Faktor 1,237. */
		transform: scale(1.237);
	}

	/* Link-Kacheln: heller Grund, farbiges Icon, Schrift im Verlauf. */
	.ms-links__link:hover::before {
		opacity: 1;
	}

	.ms-links__link:hover .ms-links__glyph--rest {
		opacity: 0;
	}

	.ms-links__link:hover .ms-links__glyph--hover {
		opacity: 1;
	}

	.ms-links__link:hover .ms-links__label {
		color: transparent;
	}
}

.ms-tile__fade,
.ms-links__label {
	transition: opacity var(--ms-dur) var(--ms-ease), color var(--ms-dur) var(--ms-ease);
}

.ms-tile__portrait img {
	transform-origin: 50% 30%;
	transition: transform var(--ms-dur-slow) var(--ms-ease-out);
}

/* will-change nur, solange die Kachel tatsächlich angefasst wird –
   dauerhaft gesetzt belegt es unnötig eine eigene Compositor-Ebene. */
@media (hover: hover) {
	.ms-tile:hover .ms-tile__portrait img {
		will-change: transform;
	}
}

.ms-split__part,
.ms-pillnav__link {
	transition: border-color var(--ms-dur) var(--ms-ease), box-shadow var(--ms-dur) var(--ms-ease);
}

/* Der Verlauf unter der Schrift liegt immer bereit; sichtbar wird er erst,
   wenn die Textfarbe darüber wegblendet. */
.ms-links__label {
	background-image: var(--ms-accent);
	-webkit-background-clip: text;
	background-clip: text;
}

/* Zwei Icons übereinander, damit der Wechsel überblendet. */
.ms-links__icon {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.ms-links__glyph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity var(--ms-dur) var(--ms-ease);
}

.ms-links__glyph--hover {
	opacity: 0;
}

/* Tastaturbedienung zeigt denselben Zustand wie die Maus. */
.ms-pillnav__link:focus-visible::before,
.ms-split__part:focus-visible::before,
.ms-links__link:focus-visible::before {
	opacity: 1;
}

.ms-links__link:focus-visible .ms-links__glyph--rest {
	opacity: 0;
}

.ms-links__link:focus-visible .ms-links__glyph--hover {
	opacity: 1;
}

.ms-links__link:focus-visible .ms-links__label {
	color: transparent;
}

/* ------------------------------------------------------------------ Buttons */

.ms-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 1rem 1.5625rem;
	border: 0;
	border-radius: 30px;
	color: var(--ms-white);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	/* Loslassen ist die ruhigere Richtung – der Druck kommt sofort. */
	transition: transform var(--ms-dur-release) var(--ms-ease-out);
}

.ms-btn--primary {
	background: var(--ms-accent);
}

/* Aufhellen über eine Deckschicht statt über filter: brightness().
   filter zwingt den Browser zum Neuzeichnen, opacity bleibt im Compositor. */
.ms-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.16);
	opacity: 0;
	transition: opacity var(--ms-dur) var(--ms-ease-out);
}

@media (hover: hover) {
	.ms-btn:hover {
		transform: translateY(-1px);
	}

	.ms-btn:hover::after {
		opacity: 1;
	}
}

.ms-btn:focus-visible::after {
	opacity: 1;
}

.ms-btn__meta {
	font-weight: 400;
	opacity: 0.85;
}

/* ----------------------------------------------------------------- Formular */

.ms-card {
	padding: clamp(2rem, 5vw, 5.5rem) clamp(1.25rem, 6.6vw, 5.9375rem);
	background-color: var(--ms-white);
	border-radius: 10px;
	color: var(--ms-ink);
}

.ms-card .ms-heading {
	margin-block-end: clamp(2rem, 5vw, 4.5rem);
}

.ms-notice {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	border-radius: var(--ms-radius-field);
	font-weight: 700;
}

.ms-notice--ok {
	background-color: #e7f4ec;
	color: #10331f;
}

.ms-notice--error {
	background-color: #fdecea;
	color: #5c130e;
}

/* Im Design sind die Spalten nicht gleich breit: 517 zu 553 bei 124 Abstand. */
.ms-form__cols {
	display: grid;
	grid-template-columns: minmax(0, 517fr) minmax(0, 553fr);
	gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 8.6vw, 7.75rem);
}

.ms-form__col {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 5vw, 4.5rem);
	min-width: 0;
}

.ms-fieldset__legend {
	margin-block-end: 1rem;
	color: var(--ms-ink);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

/*
 * Spaltenverhältnisse und Abstände sind aus dem Figma-Frame gerechnet
 * (Karte 1440 × 922). Die Felder stehen dort 11 px auseinander, nicht 16.
 */
.ms-form__row {
	display: grid;
	grid-template-columns: minmax(0, 310fr) minmax(0, 233fr);
	gap: 10px;
}

.ms-form__row--3 {
	grid-template-columns: minmax(0, 230fr) minmax(0, 133fr) minmax(0, 133fr);
}

.ms-form__row--zip {
	grid-template-columns: minmax(0, 230fr) minmax(0, 277fr);
}

/* Gestapelte Felder innerhalb eines Blocks */
.ms-fieldset > .ms-field + .ms-field,
.ms-fieldset > .ms-form__row + .ms-form__row,
.ms-fieldset > .ms-field + .ms-form__row,
.ms-fieldset > .ms-form__row + .ms-field {
	margin-block-start: 11px;
}

.ms-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Feld mit mitlaufender Beschriftung – die Beschriftung sitzt im Feld wie im
   Design und steigt auf, sobald etwas eingetragen ist. */
.ms-field {
	position: relative;
	min-width: 0;
}

.ms-field input,
.ms-field select,
.ms-field textarea {
	width: 100%;
	height: 48px;
	padding: 1.25rem 1rem 0.25rem 1.5rem;
	background-color: var(--ms-field);
	border: 1px solid transparent;
	border-radius: var(--ms-radius-field);
	color: var(--ms-ink);
	font-size: 1rem;
	line-height: 1.2;
	appearance: none;
	transition: border-color var(--ms-dur) var(--ms-ease);
}

.ms-field textarea {
	height: 99px;
	min-height: 99px;
	padding-block: 1.5rem 0.75rem;
	resize: vertical;
}

/*
 * Die Beschriftung steigt auf, ohne dass sich Layout bewegt: statt
 * font-size und top wird ausschliesslich transform animiert
 * (0.75 = 12 px aus 16 px). Nur so bleibt der Wechsel im Compositor.
 */
.ms-field__label {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 1.5rem;
	display: flex;
	align-items: center;
	height: 48px; /* gleiche Höhe wie das Feld – die Schrift sitzt damit mittig */
	color: var(--ms-ink-muted);
	font-size: 1rem;
	line-height: 1.2;
	pointer-events: none;
	transform-origin: left center;
	transition: transform var(--ms-dur) var(--ms-ease-out), color var(--ms-dur) var(--ms-ease-out);
}

.ms-field input:focus + .ms-field__label,
.ms-field select:focus + .ms-field__label,
.ms-field textarea:focus + .ms-field__label,
/* Nur Felder MIT Platzhalter prüfen: ein date-Feld hat keinen, damit würde
   :not(:placeholder-shown) dort immer zutreffen. */
.ms-field input[placeholder]:not(:placeholder-shown) + .ms-field__label,
.ms-field textarea[placeholder]:not(:placeholder-shown) + .ms-field__label,
.ms-field select:valid + .ms-field__label,
.ms-field--zeit input:not([data-ms-leer]) + .ms-field__label,
.ms-field--zeit input:focus + .ms-field__label {
	transform: translateY(-12px) scale(0.75);
	font-weight: 700;
}

/*
 * Datum und Zeit: im Design steht dort eine einzelne Zeile mit Icon.
 * Solange nichts gewählt ist, wird das Browser-Format ausgeblendet und die
 * Beschriftung steht mittig wie ein Platzhalter. Sobald der Wert da ist oder
 * das Feld den Fokus hat, dreht sich das um.
 */
.ms-field--zeit input {
	padding-inline-end: 2.75rem;
}

.ms-field--zeit input[data-ms-leer]:not(:focus) {
	color: transparent;
}

.ms-field--zeit input[data-ms-leer]:not(:focus)::-webkit-datetime-edit {
	color: transparent;
}

/* Das native Auswahlsymbol bleibt bedienbar, deckt unsichtbar das ganze Feld
   ab – so öffnet auch ein Klick auf unser Icon den Kalender. */
.ms-field--zeit input::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

.ms-field--zeit::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 1.15rem;
	translate: 0 -50%;
	width: 15px;
	height: 15px;
	background-color: var(--ms-ink);
	mask: url("../icons/clock.svg") center / contain no-repeat;
	pointer-events: none;
}

.ms-field--datum::after {
	width: 13px;
	height: 15px;
	mask-image: url("../icons/calendar.svg");
}

/* Auswahlfelder tragen ihre Beschriftung als erste Option – die zugehörige
   <label> bleibt für Hilfsmittel bestehen, aber unsichtbar. */
.ms-field--select .ms-field__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ms-field--select select {
	padding-block: 0.75rem;
	padding-inline-end: 3rem;
}

/* Im Design ist es ein schlanker Winkel, kein ausgefülltes Dreieck. */
.ms-field--select::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 1.35rem;
	translate: 0 -70%;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--ms-ink);
	border-bottom: 1.5px solid var(--ms-ink);
	rotate: 45deg;
	pointer-events: none;
}

.ms-field input:focus,
.ms-field select:focus,
.ms-field textarea:focus {
	border-color: var(--ms-accent-from);
}

.ms-field--error input,
.ms-field--error select,
.ms-field--error textarea {
	border-color: var(--ms-error);
}

/* Line-Up */

.ms-lineup {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-block-end: 1.25rem;
}

.ms-lineup__row {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.ms-lineup__row .ms-field {
	flex: 1 1 auto;
}

.ms-lineup__remove {
	flex: 0 0 auto;
	width: 48px;
	background-color: var(--ms-field);
	border: 1px solid var(--ms-field-border);
	border-radius: var(--ms-radius-field);
	color: var(--ms-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ms-lineup__remove:hover {
	background-color: #dfe8fa;
}

.ms-fieldset.ms-field--error .ms-lineup__row .ms-field select {
	border-color: var(--ms-error);
}

/* Einwilligung */

.ms-consent {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 0.75rem;
	margin-block-start: clamp(2rem, 4vw, 3rem);
	color: var(--ms-ink);
	font-size: 0.75rem;
	line-height: 1.5;
}

.ms-consent input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--ms-accent-from);
	background-color: var(--ms-field);
	border: 1px solid var(--ms-field-border);
	border-radius: 4px;
}

.ms-consent.ms-field--error input[type="checkbox"] {
	outline: 2px solid var(--ms-error);
	outline-offset: 2px;
}

.ms-consent p {
	margin: 0 0 0.5em;
}

.ms-consent__required {
	white-space: nowrap;
}

.ms-form__submit {
	margin-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

/* ------------------------------------------------------------------ Über uns */

.ms-about {
	text-align: center;
}

.ms-about__intro {
	margin-inline: auto;
	margin-block-end: 2rem;
	max-width: 1440px;
	color: var(--ms-text);
	font-size: clamp(1.125rem, 1.95vw, 1.75rem); /* 28 px */
	line-height: 1.72;
}

.ms-about__wide {
	margin-block-start: clamp(2.5rem, 5vw, 4rem);
	border-radius: 10px;
	overflow: hidden;
}

/*
 * Mittig stellen. Das Bild wird nicht auf die Spaltenbreite gezogen – ein
 * quadratisches Motiv (die aktuelle Datei misst 1000 × 1000) würde sonst
 * hochskaliert. Es behält seine Breite und steht in der Mitte.
 */
.ms-about__wide img {
	display: block;
	margin-inline: auto;
}

/*
 * Spaltenverhältnisse aus dem Figma-Frame, je Blockart unterschiedlich:
 *   zwei Textspalten : 604 zu 584, Abstand 172
 *   Bild und Text    : 648 zu 632, Abstand 121
 * jeweils innerhalb der 1440er Inhaltsspalte.
 */
.ms-block {
	display: grid;
	grid-template-columns: minmax(0, 604fr) minmax(0, 584fr);
	gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 12vw, 10.75rem);
	align-items: start;
}

.ms-block--image-left,
.ms-block--image-right {
	grid-template-columns: minmax(0, 648fr) minmax(0, 632fr);
	column-gap: clamp(1.5rem, 8.4vw, 7.5625rem); /* 121 px */
	align-items: center;
}

.ms-block--image-right .ms-block__media {
	order: 2;
}

.ms-block__media {
	border-radius: 10px;
	overflow: hidden;
}

/* Ein Block ohne Bild läuft einspaltig, statt eine Lücke zu lassen. */
.ms-block--text-single {
	grid-template-columns: minmax(0, 1fr);
}

.ms-block--image-left .ms-block__media img,
.ms-block--image-right .ms-block__media img {
	width: 100%;
	aspect-ratio: 648 / 532; /* Maß aus dem Design */
	object-fit: cover;
	/* Im Design zeigt der Ausschnitt den oberen Teil des Motivs. */
	object-position: 50% 30%;
}

.ms-block__heading {
	margin: 0 0 1.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

/*
 * Bei zwei Textspalten läuft die Überschrift über beide. Damit beginnen die
 * Spalten darunter auf derselben Höhe – vorher stand die Überschrift in der
 * linken Spalte und schob deren Text um ihre Höhe nach unten.
 */
.ms-block--text-two-col .ms-block__heading {
	grid-column: 1 / -1;
	margin-block-end: 0;
}

/* Die linke Spalte trägt den Hauptgedanken und ist im Design deutlich
   grösser gesetzt als die rechte. */
.ms-block__body:first-of-type .ms-prose {
	max-width: none;
	color: var(--ms-text);
	font-size: clamp(1.0625rem, 1.95vw, 1.75rem);
	line-height: 1.72;
}

.ms-block__body:last-of-type:not(:first-of-type) .ms-prose,
.ms-block--text-two-col .ms-block__body + .ms-block__body {
	max-width: none;
	color: var(--ms-text);
	font-size: clamp(0.9375rem, 1.4vw, 1.25rem);
	line-height: 1.6;
}

.ms-block--image-left .ms-block__body,
.ms-block--image-right .ms-block__body {
	align-self: center;
}

.ms-team__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.75rem, 2.2vw, 1.9rem); /* 30 px im Design */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Abstand zum Fußbereich – der Abschnitt schloss vorher bündig ab. */
.ms-team {
	padding-block-end: clamp(3rem, 7vw, 7rem);
}

/*
 * Die Kachel trägt Bild UND Beschriftung. Vorher bestimmte allein das Bild die
 * Zeilenhöhe – die Angaben lagen ausserhalb der Zelle und die folgende Reihe
 * schob sich darüber (gemessen: Zelle endete bei 4612, die Angaben standen bei
 * 4626 bis 4665, die nächste Reihe begann bei 4642).
 */
.ms-team__item {
	display: flex;
	flex-direction: column;
}

.ms-team__item img,
.ms-team__platzhalter {
	display: block;
	width: 100%;
	/* Im Design vier Hochformate 337 × 506. Die Höhe kommt aus dem
	   Seitenverhältnis, nicht aus der Zeilenhöhe des Gitters. */
	aspect-ratio: 337 / 506;
	object-fit: cover;
	border-radius: 10px;
	filter: grayscale(1);
}

/* Platzhalter, solange kein Bild gepflegt ist. */
.ms-team__platzhalter {
	background-color: #3a3a3a;
	filter: none;
}

.ms-team__daten {
	margin-block-start: 0.85rem;
	text-align: center;
}

.ms-team__name {
	margin: 0;
	font-family: var(--ms-font-grotesk);
	font-weight: 700;
	font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.ms-team__mail {
	display: block;
	margin-block-start: 0.2rem;
	font-size: clamp(0.8125rem, 1vw, 0.9375rem);
	line-height: 1.3;
	color: var(--ms-text-muted);
	overflow-wrap: anywhere;
}

/*
 * Ohne JavaScript steht die Adresse rückwärts im Text – hier wird sie für die
 * Anzeige wieder umgedreht. Sobald JavaScript den Link gebaut hat, trägt die
 * Adresse diese Klasse nicht mehr.
 */
.ms-mail__rueckwaerts {
	unicode-bidi: bidi-override;
	direction: rtl;
}

.ms-mail__link {
	color: inherit;
	text-decoration-color: var(--ms-line-strong);
	text-underline-offset: 0.2em;
}

@media (hover: hover) {

	.ms-mail__link:hover {
		color: var(--ms-white);
	}
}

@media (max-width: 720px) {
	.ms-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ==========================================================================
   Schrift-Fenster

   Grosse Typo hinter dem ersten Abschnitt, durch deren Buchstaben das
   Hero-Video läuft. Umgesetzt als SVG-Maske aus echtem Text – dadurch bleibt
   die Schrift echte Schrift in unserer Webfont und über ACF pflegbar.

   Masse aus dem Figma-Frame (2000 breit): Textblock 2035 × 698 bei y 1354,
   drei Zeilen zu je 232,7.
   ========================================================================== */

.ms-ghost {
	position: relative;
	/*
	 * Hinter den Inhalt. Ohne z-index malt ein positioniertes Element über
	 * seine statischen Geschwister – der Abschnitt darunter lag deshalb unter
	 * dem Motiv statt darüber. Aufgefallen ist es erst, als die Maske
	 * überhaupt zuverlässig zeichnete.
	 *
	 * -1 ist sicher: .ms-main ist positioniert mit z-index 1 und damit der
	 * Stapelkontext; das Motiv landet unter dessen Inhalt, aber über der
	 * Grundfläche des Dokuments.
	 */
	z-index: -1;
	height: 0;          /* nimmt keinen Platz, verankert nur die Position */
	pointer-events: none;
	user-select: none;
}

.ms-ghost__svg,
.ms-ghost__fenster {
	position: absolute;
	inset-inline: -1%;
	inset-block-start: 11.75vw; /* 235 px im 2000er-Frame */
	width: 102%;
	height: auto;
	overflow: visible;

	/* Hintergrundmotiv, keine zweite Überschrift. */
	opacity: 0.22;
}

/*
 * Das Fenster als CSS-Maske. Die Datei enthält die Schrift als Pfade – ein
 * als Maske geladenes SVG wird ohne externe Ressourcen gerendert, eine
 * Webfont käme darin nicht an.
 *
 * Gegenüber der früheren SVG-Maske mit <foreignObject> ist das der stabile
 * Weg: WebKit zeichnete jene nur sporadisch, auf iOS gar nicht.
 */
.ms-ghost__fenster {
	aspect-ratio: var(--ms-ghost-verhaeltnis, 2.9141);
	overflow: hidden;

	-webkit-mask-image: var(--ms-ghost-maske);
	mask-image: var(--ms-ghost-maske);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
}

/* Die Zeilen der Maske: weiss = Fenster, alles andere bleibt verdeckt. */
.ms-ghost__zeile {
	font-size: 236px;
	line-height: 1;
	text-transform: uppercase;
}

.ms-ghost__zeile--grotesk {
	font-family: var(--ms-font-grotesk);
	font-weight: 800;
}

.ms-ghost__zeile--serif {
	font-family: var(--ms-font-serif);
	font-weight: 400;
}

.ms-ghost__buehne {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ms-ghost__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Solange das Fenster im Bild ist, liegt das Video auf einer eigenen Ebene. */
.ms-ghost__buehne.is-aktiv .ms-ghost__video {
	will-change: transform;
}

/* -------------------------------------------------------------- Einwilligung */

/*
 * Erscheint nur, wenn unter Einstellungen mindestens ein Dienst hinterlegt ist.
 * Unten angedockt statt bildschirmfüllend: die Seite bleibt bedienbar, während
 * die Frage offen ist – eine Abfrage, die alles blockiert, erzwingt eher ein
 * Ja als eine Entscheidung.
 */
.ms-einwilligung {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 100;
	display: flex;
	justify-content: center;
	padding: var(--ms-gutter);
	pointer-events: none;
}

.ms-einwilligung__karte {
	pointer-events: auto;
	width: min(100%, 640px);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-radius-card);
	background-color: #101010;
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.ms-einwilligung__titel {
	margin: 0 0 0.6rem;
	font-family: var(--ms-font-grotesk);
	font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
	font-weight: 700;
	line-height: 1.25;
}

.ms-einwilligung__text {
	margin: 0 0 0.9rem;
	color: var(--ms-text-muted);
	font-size: clamp(0.875rem, 1.2vw, 1rem);
	line-height: 1.55;
}

.ms-einwilligung__liste {
	margin: 0 0 1.2rem;
	padding-inline-start: 1.1rem;
	color: var(--ms-text-muted);
	font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
	line-height: 1.5;
}

.ms-einwilligung__meta {
	display: block;
	opacity: 0.75;
}

/*
 * Beide Knöpfe tragen dieselbe Gestalt und dieselbe Breite. Ein Nein, das
 * kleiner oder blasser ist als das Ja, holt keine freiwillige Einwilligung ein.
 */
.ms-einwilligung__knoepfe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.ms-einwilligung__knopf {
	width: 100%;
}

.ms-einwilligung__fuss {
	margin: 0.9rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.ms-einwilligung__fuss a {
	color: var(--ms-text-muted);
	text-underline-offset: 0.2em;
}

/* Der Widerruf sitzt im Fußmenü und soll aussehen wie die Links daneben. */
.ms-einwilligung__widerruf {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

@media (max-width: 520px) {

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

/* ------------------------------------------------------- Sehr breite Schirme */

/*
 * Der Entwurf endet bei 1440. Darüber fror bisher alles ein: ab 1920 blieben
 * Inhaltsspalte, Schriftgrade und Kacheln unverändert. Auf 3840 px lagen damit
 * 2384 px – 62 Prozent der Breite – als leerer Rand brach, und die Schrift
 * wirkte auf dem Betrachtungsabstand eines grossen Schirms klein.
 *
 * Zwei Hebel statt vieler Einzelwerte:
 *
 * 1. Die Grundschriftgrösse. Weil das ganze Theme in rem rechnet, wachsen
 *    Schrift, Abstände und Rundungen damit gemeinsam und im selben Verhältnis
 *    – nichts verschiebt sich gegeneinander.
 * 2. Die Inhaltsspalte. Sie wächst mit, aber langsamer als der Schirm. Die
 *    Zeilenlänge bleibt trotzdem im Griff, weil der Fliesstext seine Breite
 *    in ch misst und damit an der Schrift hängt, nicht am Fenster.
 *
 * Bewusst NICHT angefasst: die Zahl der Kachelspalten. Vier Hochformate
 * nebeneinander sind die Bildsprache des Entwurfs; sechs kleinere wären eine
 * andere Seite, keine grössere.
 */
@media (min-width: 2200px) {

	html {
		font-size: 112.5%; /* 18 px Grundwert */
	}

	:root {
		--ms-content: 1760px;
	}

	/*
	 * Der Entwurf gibt 1036 px Kopfhöhe vor. Auf einem 4K-Schirm ist das
	 * weniger als die halbe Fensterhöhe – der Kopfbereich wirkt dann wie ein
	 * Banner, nicht wie ein Auftakt. Ab hier richtet er sich nach dem Fenster,
	 * mit Deckel, damit er auf sehr hohen Schirmen nicht ausufert.
	 */
	.ms-hero {
		min-height: min(86vh, 1500px);
	}
}

@media (min-width: 3000px) {

	html {
		font-size: 125%; /* 20 px Grundwert */
	}

	:root {
		--ms-content: 2040px;
	}

	.ms-hero {
		min-height: min(88vh, 1800px);
	}
}

/* --------------------------------------------------------------- Fußbereich */

.ms-footer {
	position: relative;
	z-index: 1;
	padding-block: clamp(3rem, 6vw, 5rem) clamp(3rem, 8vw, 8rem);
}

/*
 * Im Design flankieren zwei Links die Bildmarke. Mit dem dritten Punkt
 * („Über uns") geht diese Symmetrie nicht mehr auf, deshalb stehen die Links
 * jetzt mittig in einer Zeile und die Marke mittig darunter – so bleibt sie
 * zentriert, egal wie viele Punkte das Menü hat.
 */
.ms-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	width: min(100% - (2 * var(--ms-gutter)), var(--ms-content));
	margin-inline: auto;
}

.ms-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 6vw, 5rem);
	order: -1;
}

.ms-footer__list a {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}

.ms-footer__list a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ms-footer__mark {
	width: 46px;
	color: var(--ms-white);
}

.ms-footer__mark svg,
.ms-footer__mark img {
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------- 404, Liste */

.ms-404 {
	text-align: center;
}

.ms-404__text {
	margin-inline: auto;
	margin-block-end: 2rem;
	max-width: 52ch;
	color: var(--ms-text-muted);
}

/* ------------------------------------------------------------ Schmale Geräte */

@media (max-width: 1200px) {
	.ms-grid--large {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.ms-grid--large {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-form__cols,
	.ms-block {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-block--image-right .ms-block__media {
		order: 0;
	}

	.ms-links {
		flex-direction: column;
		align-items: center;
	}

	.ms-links__link {
		width: min(100%, 420px);
		border-radius: var(--ms-radius-pill);
	}

	.ms-hero__portrait {
		height: min(58%, 520px);
		max-width: 72%;
		inset-inline-end: -6%;
	}

	/*
	 * Künstlerseiten auf schmalen Geräten: das Portrait füllt den Kopfbereich
	 * und darf anschneiden. Daneben ist kein Platz mehr, deshalb rücken Name
	 * und Sprungnavigation nach unten statt in die Mitte – sonst lägen sie
	 * mitten im Gesicht.
	 */
	.ms-hero--artist .ms-hero__portrait {
		inset: 0;
		height: 100%;
		width: 100%;
		max-width: none;
	}

	/*
	 * Schmaler Schleier hinter der Bildmarke. Sie steht seit dem Wegfall der
	 * flächigen Abschattung ungeschützt auf dem Portrait; über alle Künstler
	 * gemessen fiel Weiss bei Linda Siu auf 2,81:1, WCAG verlangt 3:1 für
	 * grafische Elemente. Nur oben, damit das Portrait darunter frei bleibt.
	 */
	.ms-hero--artist::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		z-index: -1;
		height: 26vh;
		background: linear-gradient(
			180deg,
			rgba(12, 12, 12, 0.62) 0%,
			rgba(12, 12, 12, 0.28) 55%,
			rgba(12, 12, 12, 0) 100%
		);
		pointer-events: none;
	}

	.ms-hero--artist .ms-hero__portrait img {
		height: 100%;
		width: 100%;
		max-width: none;
		object-fit: cover;
		/* Oben ausgerichtet: der Kopf bleibt im Bild, angeschnitten wird unten. */
		object-position: top center;
	}

	.ms-hero--artist {
		align-items: end;
		padding-block: clamp(14rem, 46vw, 22rem) clamp(4.5rem, 12vw, 7rem);

		/* Bildschirmfüllend. svh statt vh, damit die ein- und ausfahrende
		   Adressleiste mobiler Browser die Höhe nicht springen lässt; der
		   vh-Wert davor greift, wo svh fehlt. Ein Rest bleibt sichtbar, damit
		   erkennbar ist, dass es weitergeht. */
		min-height: 92vh;
		min-height: 92svh;
	}
}

@media (max-width: 720px) {
	.ms-pillnav__list {
		width: 100%;
	}

	.ms-pillnav__item {
		flex: 1 1 0;
		min-width: 0;
	}

	.ms-pillnav__link {
		min-width: 0;
		min-height: 72px;
		/* Hier bleibt es bei 8 px. Mit den 24 px von oben bleiben je Schaltfläche
		   nur noch rund 60 px für den Text, und „Künstler" wird mitten im Wort
		   getrennt. */
		padding-inline: 0.5rem;
		font-size: 0.8125rem;
		hyphens: auto;
	}

	.ms-form__row,
	.ms-form__row--3,
	.ms-form__row--zip {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-form__row--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-form__row--3 > :first-child {
		grid-column: 1 / -1;
	}

	.ms-grid--large {
		grid-template-columns: minmax(0, 1fr);
		max-width: 340px;
		margin-inline: auto;
	}

	.ms-footer__list {
		gap: 1.5rem;
	}
}


@media (max-width: 720px) {
	.ms-gridwrap {
		margin-inline: calc(var(--ms-gutter) * -1);
		padding-inline: var(--ms-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.ms-gridwrap::-webkit-scrollbar {
		display: none;
	}

	.ms-gridwrap .ms-grid {
		display: flex;
		gap: 12px;
		width: max-content;
	}

	.ms-gridwrap .ms-grid__item {
		flex: 0 0 auto;
		width: 72vw;
		max-width: 320px;
	}

	.ms-railnav {
		display: flex;
	}
}

/*
 * Einrasten nur auf Geräten mit grobem Zeiger und nur für die Kachel-
 * Karussells: dort gehört ein Wisch zu genau einer Karte, passend zu den
 * Blätter-Buttons. Die Bildergalerie läuft immer frei – dort ist Einrasten
 * eine Bremse, kein Komfort.
 */
@media (max-width: 720px) and (pointer: coarse) {
	.ms-gridwrap,
	.ms-artists .ms-rail {
		scroll-snap-type: x mandatory;
	}

	.ms-gridwrap .ms-grid__item,
	.ms-artists .ms-rail__item {
		scroll-snap-align: center;
	}

	.ms-rail--gallery {
		scroll-snap-type: none;
	}
}


/* ==========================================================================
   Bewegung

   Grundsätze: nur transform und opacity, Bedienelemente unter 300 ms,
   eigene Kurven statt der CSS-Keywords, jede Bewegung mit einem Zweck.
   Hover ist hinter (hover: hover) gekapselt, sonst klebt der Zustand auf
   Touch. Der Auftritt beim Scrollen darf länger – eine Website wird selten
   besucht, das ist die Marketing-Ausnahme.
   ========================================================================== */

/* --------------------------------------------------- Druckrückmeldung ---- */

/*
 * 0.97 ist gross genug, um sich anzufühlen, und klein genug, um nicht
 * albern zu wirken. Der Druck kommt in 110 ms, das Loslassen in 200 ms –
 * die Asymmetrie lässt die Fläche „nachfedern", ohne Feder-Physik.
 */
.ms-btn,
.ms-split__part,
.ms-pillnav__link,
.ms-railnav__btn,
.ms-lineup__remove,
.ms-scroll,
.ms-lite-embed__play {
	transition-property: transform, opacity, border-color, box-shadow, color;
	transition-duration: var(--ms-dur-release);
	transition-timing-function: var(--ms-ease-out);
}

.ms-btn:active,
.ms-split__part:active,
.ms-pillnav__link:active,
.ms-railnav__btn:not([disabled]):active,
.ms-lineup__remove:active,
.ms-scroll:active,
.ms-lite-embed:active .ms-lite-embed__play {
	transform: scale(0.97);
	transition-duration: var(--ms-dur-press);
}

/* Der Button hebt im Hover an – beim Druck gewinnt die Skalierung. */
.ms-btn:active {
	transform: translateY(0) scale(0.97);
}

/* ------------------------------------------- Auftritt beim Scrollen ----- */

/*
 * Nur mit JavaScript sichtbar gesteuert: ohne JS trägt <html> die Klasse
 * ms-js nicht, dann steht alles sofort da. Kein Inhalt hängt an einer
 * Animation.
 */
.ms-js [data-ms-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--ms-dur-reveal) var(--ms-ease-reveal),
		transform var(--ms-dur-reveal) var(--ms-ease-reveal);
}

.ms-js [data-ms-reveal].is-in {
	opacity: 1;
	transform: none;
}

/*
 * Gestaffelte Kinder: 45 ms Abstand liest sich als Choreografie, alles
 * gleichzeitig als Zufall. Nach acht Kacheln ist Schluss, sonst wartet
 * man auf die letzte.
 */
.ms-js [data-ms-stagger] > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--ms-dur-reveal) var(--ms-ease-reveal),
		transform var(--ms-dur-reveal) var(--ms-ease-reveal);
}

.ms-js [data-ms-stagger].is-in > * {
	opacity: 1;
	transform: none;
}

.ms-js [data-ms-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.ms-js [data-ms-stagger].is-in > *:nth-child(2) { transition-delay: 45ms; }
.ms-js [data-ms-stagger].is-in > *:nth-child(3) { transition-delay: 90ms; }
.ms-js [data-ms-stagger].is-in > *:nth-child(4) { transition-delay: 135ms; }
.ms-js [data-ms-stagger].is-in > *:nth-child(5) { transition-delay: 180ms; }
.ms-js [data-ms-stagger].is-in > *:nth-child(6) { transition-delay: 225ms; }
.ms-js [data-ms-stagger].is-in > *:nth-child(7) { transition-delay: 270ms; }
.ms-js [data-ms-stagger].is-in > *:nth-child(n + 8) { transition-delay: 315ms; }

/* ------------------------------------------------- Zeile im Line-Up ----- */

.ms-lineup__row {
	transition:
		opacity var(--ms-dur) var(--ms-ease-out),
		transform var(--ms-dur) var(--ms-ease-out);
}

/* Auftritt ohne JavaScript-Umweg: @starting-style setzt den Startwert. */
@starting-style {
	.ms-lineup__row {
		opacity: 0;
		transform: translateY(-8px);
	}
}

.ms-lineup__row.is-leaving {
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	transition-duration: 160ms;
}

/* ------------------------------------------------------- Rückmeldung ---- */

.ms-notice {
	transition: opacity var(--ms-dur-slow) var(--ms-ease-out), transform var(--ms-dur-slow) var(--ms-ease-out);
}

@starting-style {
	.ms-notice {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* ------------------------------------------------------ Scroll-Hinweis -- */

/*
 * Ein sanfter Hinweis, dass es weitergeht – hört auf, sobald der Besucher
 * gescrollt hat. Ein Dauerläufer, den niemand mehr braucht, ist Lärm.
 */
@keyframes ms-nudge {
	0%, 70%, 100% { transform: translateY(0); }
	85% { transform: translateY(5px); }
}

.ms-scroll {
	animation: ms-nudge 2.6s var(--ms-ease-in-out) 1.2s infinite;
}

.ms-scrolled .ms-scroll {
	animation: none;
}

@media (hover: hover) {
	.ms-scroll:hover {
		transform: translateY(4px);
		animation: none;
	}
}

/* ----------------------------------------------- Eingebettetes Video ---- */

.ms-gallery__media iframe {
	animation: ms-fade-in var(--ms-dur-slow) var(--ms-ease-out) both;
}

@keyframes ms-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}


/* Im Druck und in Ganzseiten-Aufnahmen gibt es kein Scrollen – dort muss
   alles sofort stehen, sonst bleiben ganze Abschnitte leer. */
@media print {
	.ms-js [data-ms-reveal],
	.ms-js [data-ms-stagger] > * {
		opacity: 1 !important;
		transform: none !important;
	}

	.ms-noise,
	.ms-hero__video,
	.ms-scroll,
	.ms-railnav {
		display: none !important;
	}
}

/* --------------------------------------------------------- Bewegungsvorbehalt */

/*
 * Bewegungsvorbehalt: nicht alles abschalten, sondern die Ortsveränderung
 * herausnehmen und die Rückmeldung als reines Auf- und Abblenden erhalten.
 * Wer „weniger Bewegung" einstellt, will keine Blindheit für Zustände.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	/* Ortswechsel raus. Die Feldbeschriftung ist ausgenommen: ihre
	   Verschiebung IST der Zustand, nicht die Verzierung. */
	.ms-js [data-ms-reveal],
	.ms-js [data-ms-stagger] > *,
	.ms-lineup__row,
	.ms-notice {
		transform: none !important;
	}

	.ms-js [data-ms-reveal],
	.ms-js [data-ms-stagger] > * {
		transition: opacity var(--ms-dur-slow) var(--ms-ease-out);
	}

	.ms-js [data-ms-stagger].is-in > * {
		transition-delay: 0ms !important;
	}

	/* Skalierung und Anheben raus, Zustandswechsel bleiben sichtbar */
	.ms-btn:hover,
	.ms-btn:active,
	.ms-split__part:active,
	.ms-pillnav__link:active,
	.ms-railnav__btn:active,
	.ms-lineup__remove:active,
	.ms-scroll:active,
	.ms-scroll:hover,
	.ms-lite-embed:active .ms-lite-embed__play,
	.ms-lite-embed:hover .ms-lite-embed__play {
		transform: none;
	}

	.ms-tile:hover .ms-tile__portrait img {
		transform: none;
	}

	/* Die Balken sind der Zustand, nicht die Verzierung – sie erscheinen
	   sofort statt einzuwachsen. */
	.ms-tile__balken-teil {
		transition: none !important;
	}

	.ms-tile:hover .ms-tile__balken-teil {
		transition-delay: 0ms !important;
	}

	/* Dauerschleifen aus */
	.ms-scroll {
		animation: none;
	}

	/* Der Hintergrund im Kopfbereich scrollt einfach mit. */
	.ms-hero__media {
		transform: none !important;
		height: 100% !important;
	}

	/* Die Verlaufsflächen im Hover blenden weiter – das ist die Rückmeldung. */
	.ms-hero__video {
		transition-duration: var(--ms-dur-slow);
	}
}