/* Dieselbe helle Marken-Sprache wie Kaufweg, Dashboard und Akademie: Creme-Grund, Ink als Handlungsfarbe,
   Gold nur als Akzent. Das Gewicht traegt das Foto, nicht eine dunkle Flaeche — so bleibt der Uebergang von
   der Landing in den Checkout bruchlos, samt demselben Ink-Knopf.
   Montserrat liegt lokal, nichts wird von fremden Hosts geladen. */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('/static/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg: #f6f4ef;
	--surface: #ffffff;
	--ink: #0d2231;
	--ink-tief: #081724;
	--ink-soft: #34404b;
	--muted: #6b7580;
	--border: #e7e2d8;
	--gold: #cfaf3e;
	--gold-text: #8a6e1f;
	--radius: 10px;
	--radius-sm: 6px;
	--font: 'Montserrat', system-ui, -apple-system, sans-serif;
	--mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
	--s1: 8px;
	--s2: 14px;
	--s3: 24px;
	--s4: 40px;
	--s5: 64px;
	--spalte: 1080px;
	--text: 620px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

main { flex: 1; display: flex; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Held ---------- */

/* Die Seite hat genau einen Bildschirm Inhalt. Das Held nimmt sich, was nach dem Fuss uebrig bleibt, statt
   eine feste Hoehe zu behaupten: sonst sieht es aus, als passe alles, und man muss trotzdem scrollen. */
.held {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	background: var(--bg);
}

.held__innen {
	width: 100%;
	max-width: var(--spalte);
	margin: 0 auto;
	padding: var(--s3);
}

/* Die Marke steht im Fluss, nicht absolut: absolut positioniert stiess der Schriftzug unter dem Logo bei
   kurzen Seiten in die Fristzeile, und dagegen half nur Herumraten an der Reserve. So wird der ganze Block
   samt Marke mittig gesetzt und der Abstand ist gesetzt statt gehofft. */
.held__marke { display: block; margin-bottom: var(--s3); }

.held__marke img { height: 30px; width: auto; display: block; }

.held__spalten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	gap: var(--s5);
	align-items: center;
}

.held__text { max-width: var(--text); }

/* Hoehe statt Seitenverhaeltnis: das Bild soll mit dem Bildschirm atmen, nicht die Seite laenger machen. */
.held__bild {
	height: clamp(300px, 52vh, 520px);
	border-radius: var(--radius);
	background: var(--ink-tief) url('/static/held.jpg') 62% center / cover no-repeat;
	box-shadow: 0 2px 6px rgba(13, 34, 49, 0.08), 0 24px 60px rgba(13, 34, 49, 0.14);
}

.held__marker {
	margin: 0 0 var(--s3);
	padding: var(--s1) 0 var(--s1) var(--s2);
	border-left: 3px solid var(--gold);
	font-family: var(--mono);
	font-size: 0.76rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

.held__marker-marke {
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-text);
}

.held h1 {
	margin: 0 0 var(--s3);
	font-size: clamp(1.95rem, 4.1vw, 2.8rem);
	text-wrap: balance;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--ink);
}

/* Die Staffelung traegt die Ueberschrift: das Adjektiv klein und leise, die Sache gross, die Lage des
   Lesers in Gold. Sonst ist es eine Textwand in einer Groesse. */
.held__klein {
	display: block;
	margin-bottom: var(--s1);
	font-size: 0.34em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--muted);
}

.held__gold { color: var(--gold-text); }

.held__fliess {
	margin: 0 0 var(--s2);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--ink-soft);
}

.held__warnung {
	margin: 0 0 var(--s3);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
}

/* Beleg: vier Gesichter, dann Sterne und Zahl. Die Bilder standen auf dem CDN von OnePage und sterben mit
   dem Umzug, deshalb liegen sie jetzt hier. Sie ueberlappen sich, damit die Reihe als Gruppe liest und
   nicht als vier Kaesten; der helle Ring trennt sie voneinander. */
.beleg {
	display: flex;
	align-items: center;
	gap: var(--s2);
	margin-top: var(--s2);
}

.beleg__gesichter { display: flex; flex-shrink: 0; }

/* Weisser Trennring statt Goldrand: auf dem Creme-Grund hat Gold zu wenig Kontrast und wird matschig, und
   direkt daneben stehen die goldenen Sterne. Der Ring trennt die Kreise, das Gold bleibt der Wertung. */
.beleg__gesichter img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--surface);
	box-shadow: 0 1px 3px rgba(13, 34, 49, 0.16);
}

.beleg__gesichter img + img { margin-left: -14px; }

.beleg__sterne {
	display: block;
	font-size: 0.86rem;
	letter-spacing: 0.14em;
	line-height: 1;
	color: var(--gold);
}

/* 4,8 sind nicht fuenf: der letzte Stern wird zur Haelfte abgeschnitten. */
.beleg__stern-halb {
	display: inline-block;
	width: 0.5em;
	overflow: hidden;
	vertical-align: bottom;
}

.beleg__text { margin: 5px 0 0; font-size: 0.86rem; color: var(--muted); }
.beleg__text strong { color: var(--ink-soft); font-weight: 700; }

/* ---------- Handlungsaufforderung ---------- */

.ruf {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	padding: 17px 38px;
	background: var(--ink);
	border-radius: var(--radius-sm);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 4px rgba(13, 34, 49, 0.12), 0 12px 28px rgba(13, 34, 49, 0.14);
	transition: background 0.15s, transform 0.1s;
}

.ruf:hover { background: #143349; }
.ruf:active { transform: translateY(1px); }
.ruf__haupt { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; }
.ruf__neben { font-size: 0.85rem; opacity: 0.7; }

/* ---------- Uhr ---------- */

.uhr {
	margin-top: var(--s2);
	font-family: var(--mono);
	font-size: 0.8rem;
	color: var(--muted);
}

.uhr strong { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---------- Fuss ---------- */

.footer {
	border-top: 1px solid var(--border);
	padding: 26px 24px 32px;
	text-align: center;
}

.footer-content { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.footer-logo img { height: 30px; width: auto; opacity: 0.8; }
.footer-copyright { font-size: 0.78rem; line-height: 1.6; color: var(--muted); }
.footer-copyright strong { color: var(--ink-soft); font-weight: 600; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.footer-legal a { font-size: 0.78rem; color: var(--muted); text-decoration: none; }
.footer-legal a:hover { color: var(--gold-text); text-decoration: underline; }

@media (max-width: 860px) {
	.held__spalten { grid-template-columns: 1fr; gap: var(--s4); }
	.held__bild { height: clamp(240px, 34vh, 340px); }
	.held__text { max-width: none; }
}

@media (max-width: 560px) {
	.held__innen { padding: 22px 18px 52px; }
	.held__marke { margin-bottom: var(--s4); }
	.ruf { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}