/* Grundlagen: Schriften, Farben, Satz, Knöpfe, Kacheln. Farben aus dem Werbeschild. */

:root {
	--wein: #8a0c50;
	--wein-dunkel: #5e0836;
	--wein-hell: #f4e7ee;
	--gold: #c99a22;
	--gold-hell: #e6c56e;
	--anthrazit: #2c2b2a;
	--stein: #8e8b88;
	--stein-hell: #d6d2cc;
	--papier: #f4f0e8;
	--papier-hell: #faf8f4;
	--weiss: #ffffff;
	--text: #2c2b2a;
	--text-leise: #5f5b56;
	--schrift-titel: "Libre Bodoni", Georgia, "Times New Roman", serif;
	--schrift-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--rand: clamp(20px, 5vw, 64px);
	--breite: 1200px;
	--rundung: 8px;
	--gold-text: #7f6110;
	--schatten: 0 1px 2px rgba(44, 43, 42, 0.06), 0 12px 32px rgba(44, 43, 42, 0.08);
	--kopf-hoehe: 76px;
	--weich: cubic-bezier(0.2, 0.7, 0.2, 1);
	/* heller Lichthof für weinrote Schauschrift: auf freiem Grund unsichtbar, über der Zeichnung lesbar.
	   Der frühere schwarze Versatzschatten wirkte verdoppelt und verschwommen (Auftraggeber, 10.11.2026). */
	--lichthof: 0 0 0.08em var(--papier), 0 0 0.25em var(--papier);
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--kopf-hoehe);
	-webkit-text-size-adjust: 100%;
}

/* Mit weichem Mausrad-Scrollen (assets/js/weich.js) glättet nur Lenis; die Bildlaufleiste behält ihren Platz,
   wenn die Seite hinter einem Fenster stillsteht (kein seitliches Verrutschen). */
html.lenis {
	scroll-behavior: auto;
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	background: var(--papier-hell);
	color: var(--text);
	font-family: var(--schrift-text);
	font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
	margin: 0 0 0.5em;
	font-family: var(--schrift-titel);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--wein);
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--wein-dunkel);
}

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

.unsichtbar {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sprung {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--wein);
	color: var(--weiss);
}

.sprung:focus {
	top: 12px;
}

.symbol-vorrat {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.symbol {
	width: 1.25em;
	height: 1.25em;
	flex: none;
}

.knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.8em 1.4em;
	border: 2px solid var(--wein);
	border-radius: 6px;
	white-space: nowrap;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.25s, color 0.25s, transform 0.25s var(--weich);
}

.knopf:hover {
	transform: translateY(-2px);
}

.knopf--voll {
	background: var(--wein);
	color: var(--weiss);
}

.knopf--voll:hover {
	background: var(--wein-dunkel);
	border-color: var(--wein-dunkel);
	color: var(--weiss);
}

.knopf--rahmen {
	background: transparent;
	color: var(--wein);
}

.knopf--rahmen:hover {
	background: var(--wein);
	color: var(--weiss);
}

.vorzeile {
	margin-bottom: 0.6em;
	color: var(--gold-text);
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.kachel {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: var(--wein);
	color: var(--weiss);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.kachel .symbol {
	width: 30px;
	height: 30px;
}

.kachel--klein {
	width: 38px;
	height: 38px;
	border-radius: 6px;
}

.kachel--klein .symbol {
	width: 22px;
	height: 22px;
}

.kachel--gross {
	width: 76px;
	height: 76px;
	border-radius: 10px;
}

.kachel--gross .symbol {
	width: 42px;
	height: 42px;
}

.nummer {
	white-space: nowrap;
}

.hinweis-fehler,
.hinweis-redaktion {
	margin: 0;
	padding: 0.6em 1em;
	background: #fff3cd;
	color: #6b4e00;
	font-weight: 600;
}

.hinweis-fehler {
	position: relative;
	z-index: 120;
	margin-top: var(--kopf-hoehe);
}