/* Farbwerte sind aus der Lederaufnahme des Kunden gesampelt (Cognac/Rost). */
:root {
	--ink: #121212;
	--ink-soft: #55504c;
	--paper: #ffffff;
	--cognac: #8f4118;
	--rust: #601800;
	--sand: #d8a878;

	--measure: 46rem;
	--gap: clamp(1.5rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Helvetica Neue", Helvetica, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Straussenleder-Narbung, zur Mitte hin ausmaskiert, damit der Text auf reinem
   Weiss steht. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 50% 50%, rgba(96, 24, 0, 0.11) 1.4px, transparent 2.3px),
		radial-gradient(circle at 50% 50%, rgba(96, 24, 0, 0.11) 1.4px, transparent 2.3px),
		radial-gradient(130% 80% at 50% 0%, rgba(216, 144, 96, 0.13), transparent 55%),
		radial-gradient(130% 80% at 50% 100%, rgba(216, 144, 96, 0.13), transparent 55%);
	background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
	background-position: 0 0, 22px 22px, 0 0, 0 0;
	-webkit-mask-image: radial-gradient(68% 55% at 50% 48%, transparent 55%, #000 100%);
	mask-image: radial-gradient(68% 55% at 50% 48%, transparent 55%, #000 100%);
}

.page {
	min-height: 100svh;
	display: grid;
	grid-template-rows: 1fr auto;
	padding: var(--gap);
}

.stage {
	display: grid;
	align-content: center;
	justify-items: center;
	gap: clamp(2rem, 6vw, 4rem);
	padding: clamp(2rem, 8vh, 6rem) 0;
	text-align: center;
}

/* --- Wortmarke --------------------------------------------------------- */

.brand { display: grid; justify-items: center; gap: clamp(1.25rem, 3vw, 2rem); }

.brand__mark {
	margin: 0;
	display: block;
	position: relative;   /* Anker fuer das ® */
	width: min(100%, 46rem);
	line-height: 1;
}

/* Das ® sitzt per left:100% ausserhalb der Wortmarke. Die Breite dafuer nur dann
   freihalten, wenn es auch im Markup steht — sonst schrumpft das Logo grundlos. */
.brand__mark:has(.brand__r) { width: min(100% - 2.25rem, 46rem); }

.brand__mark img {
	display: block;
	width: 100%;
	height: auto;
}

.brand__r {
	position: absolute;
	top: -0.55em;
	left: 100%;
	margin-left: 0.35em;
	font-size: clamp(0.75rem, 1.6vw, 1.05rem);
	color: var(--ink-soft);
	font-weight: 400;
}

.claim {
	margin: 0;
	max-width: var(--measure);
	font-size: clamp(1.05rem, 0.9rem + 0.9vw, 1.6rem);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-wrap: balance;
}

.claim__lead { display: block; }

.claim__lead b {
	font-weight: 500;
	/* Mittelpunkt trennt die beiden Leistungen ohne Aufzaehlungszeichen */
}

.claim__segments {
	display: block;
	margin-top: 0.5em;
	font-size: 0.72em;
	color: var(--ink-soft);
	letter-spacing: 0.04em;
}

/* Cognac-Haarlinie als einziger Farbakzent. */
.rule {
	width: min(100%, 7rem);
	height: 2px;
	margin: 0;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--cognac) 20%, var(--rust) 50%, var(--cognac) 80%, transparent);
}

/* --- Kontakt ----------------------------------------------------------- */

.contact { display: grid; justify-items: center; gap: 0.75rem; }

.contact__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cognac);
}

.contact address {
	font-style: normal;
	line-height: 1.75;
}

.contact strong { font-weight: 500; }

a {
	color: inherit;
	text-decoration-color: var(--sand);
	text-underline-offset: 0.28em;
	text-decoration-thickness: 1px;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover { color: var(--cognac); text-decoration-color: var(--cognac); }

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

/* --- Fusszeile --------------------------------------------------------- */

.foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 1.5rem;
	padding-top: 2rem;
	font-size: 0.8125rem;
	color: var(--ink-soft);
	text-align: center;
}

.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }

/* --- Unterseiten ------------------------------------------------------- */

/* Lange Fliesstexte oben ausrichten statt vertikal zentrieren. */
.stage--doc { align-content: start; padding-top: 0; }

.doc {
	width: min(100%, var(--measure));
	margin-inline: auto;
	padding: clamp(2.5rem, 8vh, 5rem) 0 clamp(2rem, 6vh, 4rem);
	text-align: left;
}

.doc__back {
	display: inline-block;
	margin-bottom: clamp(2rem, 6vh, 3.5rem);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	text-decoration: none;
}

.doc__back:hover { color: var(--cognac); }

.doc h1 {
	margin: 0 0 2.5rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: 500;
	letter-spacing: 0.01em;
}

.doc h2 {
	margin: 2.75rem 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.doc h2::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1rem;
	background: var(--cognac);
}

.doc p, .doc ul { margin: 0 0 1rem; }

.doc ul { padding-left: 1.15rem; }

.doc li { margin-bottom: 0.35rem; }

.doc address { font-style: normal; line-height: 1.8; margin-bottom: 1rem; }

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
	body::before { display: none; }
	.page { min-height: 0; }
	a { text-decoration: none; }
}