/* Velovyn Games — gemeinsamer Stil für Startseite, Datenschutz und Impressum.
   Farben aus Scripts/UI/Gestaltung.cs (Messing, Blech, Verdunkelung), damit Seite und Spiel
   gleich aussehen. Schriften liegen SELBST auf dem Server (schriften/), NICHT bei Google
   Fonts: ein Abruf bei Google überträgt die IP-Adresse jedes Besuchers und wäre ohne
   Einwilligung ein Datenschutzproblem. */

@font-face {
	font-family: "Oswald";
	src: url("schriften/Oswald.ttf") format("truetype");
	font-weight: 200 700;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("schriften/BarlowCondensed-Regular.ttf") format("truetype");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Barlow Condensed";
	src: url("schriften/BarlowCondensed-Medium.ttf") format("truetype");
	font-weight: 500;
	font-display: swap;
}

:root {
	--messing: #C9A24A;
	--messing-hell: #E8BC63;
	--blech: #241F17;
	--dunkel: #080604;
	--text: #EDE6D6;
	--text-leise: #B8AE9A;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	min-height: 100%;
	background: var(--dunkel);
	color: var(--text);
	font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
	font-size: 19px;
	line-height: 1.5;
}

a { color: var(--messing-hell); }
a:hover { color: #fff; }

/* ── Startseite ────────────────────────────────────────────────────────────── */

.start {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 16px 96px;
	text-align: center;
	overflow: hidden;
	/* Der Kartentisch aus dem Titelbildschirm, dunkel abgedeckt, damit das Logo trägt. */
	background:
		radial-gradient(ellipse at 50% 45%, rgba(8, 6, 4, 0.35) 0%, rgba(8, 6, 4, 0.82) 70%, rgba(8, 6, 4, 0.95) 100%),
		url("bilder/hintergrund.webp") center / cover no-repeat,
		var(--dunkel);
}

@media (max-width: 900px) {
	.start {
		background:
			radial-gradient(ellipse at 50% 45%, rgba(8, 6, 4, 0.45) 0%, rgba(8, 6, 4, 0.85) 75%, rgba(8, 6, 4, 0.95) 100%),
			url("bilder/hintergrund-klein.webp") center / cover no-repeat,
			var(--dunkel);
	}
}

.logo {
	width: min(760px, 92vw);
	height: auto;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.7));
	animation: auftritt 1.4s ease-out both;
}

/* Weiche dunkle Fläche unter dem Text — er steht sonst direkt über den Panzern auf der Karte. */
.textblock {
	padding: 10px 48px 18px;
	background: radial-gradient(ellipse at center, rgba(8, 6, 4, 0.72) 0%, rgba(8, 6, 4, 0.45) 55%, rgba(8, 6, 4, 0) 75%);
}

.bald {
	margin: 28px 0 6px;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-weight: 500;
	font-size: clamp(22px, 3.2vw, 34px);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--messing-hell);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
	animation: auftritt 1.4s 0.3s ease-out both;
}

.unterzeile {
	margin: 0;
	max-width: 34em;
	font-size: clamp(17px, 2vw, 21px);
	color: var(--text);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
	animation: auftritt 1.4s 0.5s ease-out both;
}

.kontakt {
	margin-top: 28px;
	font-size: 17px;
	animation: auftritt 1.4s 0.7s ease-out both;
}
.kontakt a { text-decoration: none; border-bottom: 1px solid rgba(232, 188, 99, 0.4); }

.fuss {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 18px 16px;
	font-size: 15px;
	color: var(--text-leise);
	text-align: center;
}
.fuss a { color: var(--text-leise); text-decoration: none; margin: 0 10px; }
.fuss a:hover { color: var(--messing-hell); }
.fuss .studio { display: block; margin-bottom: 4px; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }

@keyframes auftritt {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.logo, .bald, .unterzeile, .kontakt { animation: none; }
}

/* ── Textseiten (Datenschutz, Impressum) ───────────────────────────────────── */

.text {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 20px 80px;
}
.text .zurueck {
	display: inline-block;
	margin-bottom: 28px;
	text-decoration: none;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.text h1 {
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--messing-hell);
	font-size: clamp(28px, 4vw, 40px);
	margin: 0 0 8px;
}
.text h2 {
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--messing);
	font-size: 23px;
	margin: 36px 0 8px;
}
.text .stand { color: var(--text-leise); margin: 0 0 24px; }
.text address { font-style: normal; }
.text ul { padding-left: 1.2em; }
.text strong { font-weight: 500; color: #fff; }