/* Cozy Drift – gemeinsame Formatierung für alle Seiten.
   Bewusst ohne externe Schriften, Skripte oder Bibliotheken: nichts lädt
   von fremden Servern, damit die Seite ohne Cookie-Banner auskommt.

   Helle, warme Farbwelt – dieselben Sandtöne, in denen das Spiel spielt.
   Einzige Ausnahme ist der Hero: dort liegt das Video unter einem warmen
   dunklen Verlauf, der nach unten in den Seitenhintergrund ausläuft. */

:root {
	--bg: #fdf8f0;          /* warmes Creme */
	--surface: #ffffff;
	--surface-2: #f8f1e4;   /* sandig abgesetzt */
	--line: #ebe0cd;
	--text: #2b2620;
	--muted: #6f6659;
	--accent: #b4620a;      /* Orange für Text und Links, kontraststark */
	--accent-bright: #ffb833; /* Orange für Flächen */
	--sand: #9c7b3f;
	--shadow: 0 1px 2px rgba(70, 52, 24, 0.05), 0 8px 24px rgba(70, 52, 24, 0.06);
	--radius: 14px;
	--wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 650; }
p { margin: 0 0 1.1em; }

.eyebrow {
	font-size: 0.82rem; font-weight: 700; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem;
}

/* ---------- Kopfzeile ---------- */
/* Der Milchglas-Effekt liegt auf einem Pseudo-Element, nicht auf der
   Kopfzeile selbst: ein backdrop-filter macht sie sonst zum Bezugsrahmen
   für alles Feststehende darin – das Vollbildmenü wäre dann nur so groß
   wie die Leiste. */
.site-head {
	position: sticky; top: 0; z-index: 20;
	border-bottom: 1px solid var(--line);
}
.site-head::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(253, 248, 240, 0.88); backdrop-filter: blur(12px);
}
/* Drei Spalten statt Flex: nur so sitzt die Navigation wirklich in der
   Seitenmitte und nicht bloß mittig zwischen Logo und Knopf. */
.site-head .wrap {
	position: relative;
	display: grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; gap: 1rem; padding: 0.8rem 0;
}
.site-head .brand { justify-self: start; }
.site-head nav { justify-self: center; }
.head-actions { justify-self: end; display: flex; align-items: center; gap: 0.6rem; }

/* Musikschalter: aus = Lautsprecher mit Kreuz, an = mit Schallwellen */
.sound-toggle {
	display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
	padding: 0; border: 1px solid var(--line); border-radius: 999px;
	background: var(--surface); color: var(--muted); cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.sound-toggle svg { width: 1.15rem; height: 1.15rem; }
.sound-toggle:hover { color: var(--text); border-color: var(--sand); }
.sound-toggle.is-on { color: var(--accent); border-color: #f0d9ac; background: #fdf3e0; }
.sound-toggle .ico-waves { display: none; }
.sound-toggle.is-on .ico-waves { display: inline; }
.sound-toggle.is-on .ico-cross { display: none; }

/* Menüknopf: nur auf schmalen Schirmen sichtbar (siehe Media Query unten) */
.nav-toggle {
	display: none; place-items: center; width: 2.3rem; height: 2.3rem;
	padding: 0; border: 1px solid var(--line); border-radius: 999px;
	background: var(--surface); color: var(--text); cursor: pointer;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle .ico-x { display: none; }
.nav-toggle[aria-expanded="true"] .ico-x { display: inline; }
.nav-toggle[aria-expanded="true"] .ico-bars { display: none; }

.nav-cta {
	padding: 0.5rem 1.15rem; border-radius: 999px;
	background: var(--accent-bright); color: #3a2604;
	font-size: 0.92rem; font-weight: 700; white-space: nowrap;
	box-shadow: 0 2px 8px rgba(180, 120, 20, 0.25);
}
.nav-cta:hover { filter: brightness(1.06); text-decoration: none; }
/* Nur im Vollbildmenue sichtbar (siehe Media Query). Der Selektor muss
   so spezifisch sein wie ".site-head nav a", sonst gewinnt dessen
   display-Wert und der Knopf steht mitten in der Desktop-Navigation. */
.site-head nav a.menu-cta { display: none; }
/* Ebenso die Rechtstexte: im Vollbildmenue stehen sie klein am unteren
   Rand, auf dem Desktop nur im Fuss. */
.site-head nav .menu-legal { display: none; }
.brand {
	color: var(--text); font-weight: 800; letter-spacing: 0.04em;
	font-size: 1.05rem; text-transform: uppercase;
}
.brand:hover { text-decoration: none; color: var(--accent); }
.brand span { color: var(--accent); }
.site-head nav { display: flex; gap: 2.6rem; font-size: 0.95rem; }
.site-head nav a {
	display: inline-flex; align-items: center; gap: 0.42rem; color: var(--muted);
}
/* Auf dem Desktop trägt die Leiste nur Text – die Symbole erscheinen erst
   im Vollbildmenü, wo sie die Einträge auf einen Blick unterscheidbar
   machen. */
.site-head nav a svg { display: none; flex: none; color: var(--sand); }
.site-head nav a:hover { color: var(--text); text-decoration: none; }

/* ---------- Hero ----------
   Das Video steht als eigener Block in Inhaltsbreite, nicht randlos über
   die ganze Seite. Darüber liegt ein gleichmäßiges transparentes Schwarz –
   kein Verlauf, die Kanten bleiben sauber. */
/* unten kein Abstand: den bringt schon der folgende Abschnitt mit */
/* overflow-x: clip haelt den Schein seitlich im Rahmen – sonst ragt er
   ueber den Viewport hinaus und erzeugt eine waagerechte Bildlaufleiste.
   Anders als hidden laesst clip den Ueberstand nach unten zu. */
.hero {
	padding: 2rem 0 0; position: relative; isolation: isolate;
	overflow-x: clip;
}
/* Weicher Schatten hinter dem Video: gibt dem Rahmen Tiefe und läuft
   nach unten in die Seite aus, statt an seiner Kante aufzuhören. */
.hero::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 50%; translate: -50% 0; top: -3rem;
	width: min(150%, 2000px); height: 165%;
	background: radial-gradient(50% 50% at 50% 42%,
		rgba(0, 0, 0, 0.34) 0%,
		rgba(0, 0, 0, 0.17) 38%,
		rgba(0, 0, 0, 0.06) 60%,
		transparent 78%);
}
.hero-frame {
	position: relative; overflow: hidden;
	border-radius: calc(var(--radius) + 6px);
	min-height: min(72vh, 620px);
	display: flex; align-items: center;
	background: #6d4526;   /* warmer Ton, bis das Video da ist */
	box-shadow: var(--shadow);
}
.hero-media {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	background: #6d4526 center/cover no-repeat url("hero-poster.jpg");
}
.hero-frame::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: rgba(30, 18, 8, 0.46);
}
.hero-inner {
	position: relative; z-index: 2; max-width: 36rem;
	padding: clamp(2rem, 5vw, 3.5rem);
}
/* Versionshinweis oben rechts im Hero – auf schmalen Schirmen versteckt */
.version-badge {
	position: absolute; top: 1.25rem; right: 1.25rem; z-index: 3;
	padding: 0.4rem 0.9rem; border-radius: 999px;
	border: 1px solid rgba(255, 250, 242, 0.35);
	background: rgba(30, 18, 8, 0.4); backdrop-filter: blur(6px);
	color: #fffaf2; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.06em;
}

.hero h1 {
	color: #fffaf2; margin-bottom: 10px;
	text-shadow: 0 2px 24px rgba(40, 24, 10, 0.35);
}
.hero .eyebrow { color: #ffce74; }
.hero p.lead {
	font-size: clamp(1.05rem, 2vw, 1.3rem); color: #f7ede0; max-width: 32rem;
	text-shadow: 0 1px 14px rgba(40, 24, 10, 0.4);
}

.badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.badge {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.75rem 1.25rem; border-radius: 999px;
	border: 1px solid rgba(255, 250, 242, 0.4);
	background: rgba(255, 250, 242, 0.14);
	backdrop-filter: blur(6px);
	color: #fffaf2; font-size: 0.95rem; font-weight: 600;
}
.badge:hover { text-decoration: none; background: rgba(255, 250, 242, 0.24); }
.badge.primary {
	background: var(--accent-bright); border-color: var(--accent-bright);
	color: #3a2604; box-shadow: 0 6px 20px rgba(180, 120, 20, 0.35);
}
.badge.primary:hover { filter: brightness(1.06); background: var(--accent-bright); }
.badge small { color: inherit; opacity: 0.75; font-weight: 500; }

/* ---------- Coming-soon-Fassung der Startseite ----------
   Solange unter dem Video nur ein kurzer Abschnitt steht, darf der Rahmen
   etwas mehr Hoehe nehmen – sonst wirkt die Seite oben leer und unten
   abgeschnitten. */
.hero.solo { padding-bottom: 0.5rem; }
.hero.solo .hero-frame { min-height: min(80vh, 700px); }
.soon-note {
	margin-top: 2.4rem; padding-top: 1.6rem;
	border-top: 1px solid var(--line);
	color: var(--muted); font-size: 0.97rem;
}

/* ---------- Abschnitte ---------- */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
section.alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.section-head { max-width: 40rem; margin-bottom: 2.8rem; }
.section-head p { color: var(--muted); margin-bottom: 0; }

.grid { display: grid; gap: 1.25rem; }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* Ranglisten paarweise: vier Stück ergeben sonst 3 + 1 und wirken schief */
.grid.boards { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

.card {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow);
}
.card p { color: var(--muted); margin-bottom: 0; font-size: 0.97rem; }
.card .icon {
	width: 2.4rem; height: 2.4rem; border-radius: 10px; margin-bottom: 1rem;
	display: grid; place-items: center; font-size: 1.2rem; color: var(--accent);
	background: #fdf0d8; border: 1px solid #f2ddb4;
}

/* ---------- Laufband unter dem Video ----------
   Der Inhalt steht zweimal hintereinander und wandert um genau die halbe
   Strecke; dadurch schließt die Schleife nahtlos, ohne zu springen. */
.ticker {
	display: block; margin-top: 0.9rem; padding: 0.7rem 0;
	overflow: hidden; position: relative;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: calc(var(--radius) + 6px); color: var(--text);
	contain: paint;
}
.ticker:hover { text-decoration: none; border-color: var(--sand); }
.ticker-track {
	display: flex; width: max-content;
	animation: ticker 26s linear infinite;
	will-change: transform; backface-visibility: hidden;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

.ticker-run { display: flex; align-items: center; flex: none; }
.tick-group { display: flex; align-items: center; gap: 0.9rem; padding-right: 2.6rem; }
.tick-group em {
	font-style: normal; font-weight: 700; color: var(--accent);
	font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
	white-space: nowrap;
}
.tick {
	display: inline-flex; align-items: baseline; gap: 0.4rem;
	font-size: 0.92rem; white-space: nowrap; color: var(--muted);
}
/* Startnummern-Optik: schräges schwarzes Feld, die Ziffer darin wird
   gegengeschert und steht dadurch aufrecht. */
.tick i {
	display: inline-block; font-style: normal; font-weight: 800;
	font-size: 0.74rem; line-height: 1; color: #fff;
	background: #16130f; padding: 0.32rem 0.5rem 0.3rem;
	transform: skewX(-14deg); border-radius: 2px;
}
.tick i span { display: inline-block; transform: skewX(14deg); }
.tick b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Auf schmalen Schirmen fressen 4 rem Ausblendung zu viel vom Text */
@media (max-width: 640px) {
	.tick-group { gap: 0.7rem; padding-right: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ticker-track { animation: none; }
	.ticker { overflow-x: auto; }
	.ticker-run:last-child { display: none; }
}

/* ---------- Neuigkeiten ---------- */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
	display: grid; grid-template-columns: 9.5rem 1fr; gap: 0 2rem;
	padding: 1.6rem 0; border-top: 1px solid var(--line);
}
.news-list li:last-child { border-bottom: 1px solid var(--line); }
.news-list time {
	color: var(--sand); font-size: 0.82rem; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.3rem;
}
.news-list h3 { margin-bottom: 0.35rem; font-size: 1.2rem; }
.news-list p { color: var(--muted); margin: 0; font-size: 0.97rem; }

@media (max-width: 640px) {
	.news-list li { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.3rem 0; }
	.news-list time { padding-top: 0; }
}

/* ---------- Plattform-Hinweise (Controller, Game Center) ---------- */
.platform-row {
	display: grid; gap: 1.25rem; margin-top: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.platform {
	display: flex; align-items: flex-start; gap: 1.1rem;
	background: var(--surface-2); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.35rem 1.5rem;
}
.pf-icon { width: 2.9rem; height: auto; flex: none; color: var(--accent); margin-top: 0.15rem; }
.platform b { display: block; font-size: 1.02rem; font-weight: 650; margin-bottom: 0.15rem; }
.platform span { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }

/* Apples Badge: unverändert, nur skaliert */
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 3.3rem; width: auto; display: block; }
.store-badge:hover { text-decoration: none; filter: brightness(1.08); }

/* ---------- Streckenkarten ---------- */
.grid.tracks { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.track-card {
	margin: 0; background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.track-card .shot { display: block; position: relative; line-height: 0; }
.track-card .shot img { width: 100%; height: auto; display: block; }
/* Lupe erscheint beim Überfahren – zeigt, dass das Bild aufgeht */
.track-card .shot::after {
	content: "⤢"; position: absolute; right: 0.5rem; bottom: 0.5rem;
	width: 1.9rem; height: 1.9rem; border-radius: 8px;
	display: grid; place-items: center; font-size: 0.9rem; line-height: 1;
	background: rgba(30, 18, 8, 0.55); color: #fffaf2;
	opacity: 0; transition: opacity 0.15s ease;
}
.track-card .shot:hover::after, .track-card .shot:focus-visible::after { opacity: 1; }

.track-card figcaption {
	display: flex; align-items: center; gap: 0.9rem;
	padding: 1rem 1.1rem; border-top: 1px solid var(--line);
}
.track-card .map { width: 3.1rem; height: 3.1rem; flex: none; opacity: 0.9; }
.track-card b { display: block; font-size: 1.02rem; font-weight: 650; }
.track-card span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.track-card em {
	display: block; margin-top: 0.15rem; font-style: normal;
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--sand);
}

/* ---------- Vergrößerte Bilder (CSS-only, über :target) ---------- */
.lightbox {
	position: fixed; inset: 0; z-index: 60; display: none;
	align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
	background: rgba(28, 17, 7, 0.86);
}
.lightbox:target { display: flex; }
.lightbox .lb-back { position: absolute; inset: 0; }
.lightbox img {
	position: relative; max-width: min(1200px, 100%); max-height: 88vh;
	width: auto; height: auto; border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* Schließkreuz oben rechts */
.lightbox .lb-back::after {
	content: "✕"; position: absolute; top: clamp(0.75rem, 3vw, 1.5rem);
	right: clamp(0.75rem, 3vw, 1.5rem);
	width: 2.4rem; height: 2.4rem; border-radius: 999px;
	display: grid; place-items: center; font-size: 1rem;
	background: rgba(255, 250, 242, 0.16); color: #fffaf2;
}

/* ---------- Ranglisten ---------- */
.board {
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: var(--shadow);
}
.board h3 {
	margin-bottom: 1rem; padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--line); color: var(--sand);
	font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.board table { width: 100%; border-collapse: collapse; }
.board td {
	padding: 0.55rem 0; border-bottom: 1px solid #f4ebdb; font-size: 0.97rem;
}
.board tr:last-child td { border-bottom: 0; }
.board .pos {
	width: 2.2rem; color: var(--muted);
	font-variant-numeric: tabular-nums; font-weight: 650;
}
.board .time {
	text-align: right; font-variant-numeric: tabular-nums;
	color: var(--text); font-weight: 600;
}
/* Bestzeit hervorheben – die eine Zeile, auf die alle schauen */
.board tr:first-child .pos,
.board tr:first-child .time { color: var(--accent); }
.board-note {
	margin: 1.6rem 0 0; color: var(--muted);
	font-size: 0.87rem; font-style: italic;
}

/* ---------- Schlussaufruf ---------- */
.cta {
	text-align: center;
	background: #fdf3e0;
	border-top: 1px solid var(--line);
}
.cta .wrap { max-width: 44rem; }
.cta h2 { margin-bottom: 0.6rem; }
.cta-lead {
	color: #6b5a3c; font-size: 1.08rem; margin-bottom: 2rem;
	margin-inline: auto; max-width: 34rem;
}
.cta .store-badge img { height: 3.8rem; }

/* Ohne Trennzeichen: beim Umbruch landete der Punkt sonst am Zeilenanfang.
   Der Abstand allein trennt sauber, in jeder Zeilenaufteilung. */
.cta-facts {
	list-style: none; margin: 2rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 2.2rem;
	color: var(--sand); font-size: 0.86rem; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase;
}
.cta-facts li { white-space: nowrap; }

/* ---------- Fußzeile ---------- */
.site-foot {
	border-top: 1px solid var(--line); background: var(--surface-2);
	padding: 3rem 0; color: var(--muted); font-size: 0.93rem;
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--accent); }

/* ---------- Unterseiten ---------- */
.page { padding: clamp(3rem, 7vw, 5rem) 0; }
.page .wrap { max-width: 46rem; }
.page h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 0.4rem; }
.page .updated { color: var(--muted); font-size: 0.9rem; margin-bottom: 2.5rem; }
.page h2 { font-size: 1.35rem; margin-top: 2.5rem; }
.page ul { color: var(--muted); padding-left: 1.2rem; }
.page li { margin-bottom: 0.5rem; }
.page dl { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.6rem 1.5rem; }
.page dt { font-weight: 650; }
.page dd { margin: 0; color: var(--muted); }
.note {
	border-left: 3px solid var(--accent-bright); background: #fdf3e0;
	padding: 1rem 1.25rem; border-radius: 0 var(--radius) var(--radius) 0;
	color: #6b5a3c; font-size: 0.95rem;
}
.note strong { color: #4a3c22; }

/* ---------- Kontaktformular ----------
   Die Felder liegen in derselben weissen Karte wie die uebrigen Kaesten der
   Seite. Der Honigtopf (.hp) ist fuer Menschen unsichtbar, steht aber im
   Fluss des Formulars, damit Ausfuellhilfen von Bots ihn finden. */
.contact-form {
	margin-top: 2rem;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 2.2rem);
	box-shadow: var(--shadow);
}
.field { margin-bottom: 1.2rem; }
.field label {
	display: block; margin-bottom: 0.4rem;
	font-size: 0.92rem; font-weight: 650;
}
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: 0.86rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	width: 100%; padding: 0.75rem 0.9rem;
	border: 1px solid var(--line); border-radius: 10px;
	background: var(--bg); color: var(--text);
	font: inherit; font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form textarea { min-height: 11rem; resize: vertical; line-height: 1.6; }
.contact-form input:focus, .contact-form textarea:focus {
	outline: none; border-color: var(--sand);
	box-shadow: 0 0 0 3px rgba(255, 184, 51, 0.25);
}
.contact-form input:disabled, .contact-form textarea:disabled { opacity: 0.6; }

/* Der Honigtopf darf nicht display:none sein – manche Bots ueberspringen
   ausgeblendete Felder. Er wird stattdessen aus dem Sichtfeld geschoben. */
.hp {
	position: absolute; left: -9999px; width: 1px; height: 1px;
	overflow: hidden;
}

.contact-form button {
	padding: 0.8rem 1.8rem; border: 0; border-radius: 999px;
	background: var(--accent-bright); color: #3a2604;
	font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
	box-shadow: 0 2px 8px rgba(180, 120, 20, 0.25);
	transition: filter 0.15s ease;
}
.contact-form button:hover:not(:disabled) { filter: brightness(1.06); }
.contact-form button:disabled { cursor: default; opacity: 0.6; }

/* Rueckmeldung nach dem Absenden – eine Zeile unter dem Knopf */
.form-status {
	margin: 1rem 0 0; font-size: 0.95rem; min-height: 1.5rem;
}
.form-status:empty { margin-top: 0; min-height: 0; }
.form-status.ok { color: #1f6b3a; }
.form-status.err { color: #a3341c; }

.form-legal { margin-top: 1.6rem; color: var(--muted); font-size: 0.88rem; }

/* ---------- Schmale Schirme ----------
   Statt Links auszublenden bekommt die Kopfzeile hier einen Menüknopf; das
   Panel klappt darunter auf und enthält alle vier Ziele in Tippgröße. */
@media (max-width: 860px) {
	.site-head .wrap { grid-template-columns: auto 1fr; gap: 0.75rem; }
	.nav-toggle { display: grid; }
	.version-badge { display: none; }
	/* Logo und Knöpfe bleiben über dem Menü sichtbar – derselbe Knopf
	   öffnet und schließt, ohne dass es ein zweites Kreuz braucht. */
	.brand, .head-actions { position: relative; z-index: 45; }

	/* Vollbildmenü, das von rechts hereinfährt */
	.site-head nav {
		position: fixed; inset: 0; z-index: 40;
		display: flex; flex-direction: column; gap: 0; justify-self: stretch;
		padding: 5.2rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
		background: var(--bg);
		transform: translateX(100%); visibility: hidden;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
		overflow-y: auto; overscroll-behavior: contain;
	}
	.site-head nav.is-open { transform: translateX(0); visibility: visible; }

	.site-head nav a {
		padding: 1.05rem 0.25rem; font-size: 1.15rem; font-weight: 600;
		color: var(--text); border-bottom: 1px solid var(--line);
	}
	.site-head nav a svg {
		display: block; width: 1.35rem; height: 1.35rem; margin-right: 0.35rem;
	}

	/* Der Download-Knopf sitzt am unteren Rand, über die volle Breite */
	.site-head nav a.menu-cta {
		display: block; margin-top: auto; border-bottom: 0;
		text-align: center; padding: 1rem 1.25rem; font-size: 1.05rem;
	}
	.menu-cta svg { display: none; }

	/* Impressum und Datenschutz ganz unten, klein und zurückhaltend.
	   margin-top: auto schiebt sie an den unteren Rand – steht daneben
	   ein Download-Knopf, reiht sich der Block einfach darunter ein. */
	.site-head nav .menu-legal {
		display: flex; gap: 1.6rem; margin-top: auto;
		padding-top: 1.4rem;
	}
	.site-head nav .menu-legal a {
		padding: 0; border-bottom: 0;
		font-size: 0.88rem; font-weight: 500; color: var(--muted);
	}

	/* Hintergrund festhalten, solange das Menü offen ist */
	body.menu-open { overflow: hidden; }
	/* Bei offenem Menü steht der Download unten – oben wäre er doppelt */
	body.menu-open .head-actions > .nav-cta { display: none; }
}

/* Wer Bewegung reduziert, bekommt das Menü ohne Fahrt */
@media (prefers-reduced-motion: reduce) {
	.site-head nav { transition: none; }
}

@media (max-width: 640px) {
	.nav-cta { padding: 0.45rem 0.95rem; font-size: 0.88rem; }
	.hero { padding: 1rem 0 0; }
	.hero-frame { min-height: min(66vh, 520px); }
	/* Der Badge des App Stores hat eine Mindestgröße – hier nicht kleiner */
	.store-badge img { height: 3rem; }
	.track-card figcaption { padding: 0.9rem 1rem; gap: 0.8rem; }
	.platform { padding: 1.1rem 1.2rem; gap: 0.9rem; }
	.board { padding: 1.2rem 1.1rem; }
	.page dl { grid-template-columns: 1fr; gap: 0.2rem 0; }
	.page dd { margin-bottom: 0.8rem; }
	.site-foot .wrap { gap: 1.1rem; }
	.site-foot nav { gap: 1rem 1.2rem; }
}

/* Sehr schmal (iPhone SE): der Schriftzug darf die Kopfzeile nicht sprengen */
@media (max-width: 380px) {
	.brand { font-size: 0.95rem; }
	.nav-cta { padding: 0.42rem 0.8rem; font-size: 0.85rem; }
	.sound-toggle, .nav-toggle { width: 2.1rem; height: 2.1rem; }
}

/* Wer Bewegung reduziert haben will, bekommt das Standbild */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero-media { display: none; }
}