@charset "UTF-8";

/* Grundgestaltung.
   Die Seite soll sich wie ein technisches Datenblatt lesen und nicht wie
   eine Werbebroschuere: Papier und Tinte, sichtbare Haarlinien, Monospace
   fuer alles Zaehlbare.
   Schriften kommen absichtlich vom System. Nichts wird von fremden Servern
   nachgeladen, das spart Ladezeit und haelt die Datenschutzerklaerung kurz. */

/* Merkmale */

:root {
	--paper:        #f6f4ef;
	--paper-raised: #fffefb;
	--paper-sunk:   #eeebe3;
	--ink:          #14161a;
	--ink-soft:     #4a4f57;
	--ink-faint:    #767c86;
	--rule:         #d9d4c8;
	--rule-strong:  #b8b2a3;
	--signal:       #a83518;
	--signal-ink:   #ffffff;
	--signal-tint:  #f6e9e4;
	--ok:           #2f6b45;
	--warn:         #8a6410;

	--glow-warm: rgba(168, 53, 24, 0.20);
	--glow-cool: rgba(31, 84, 102, 0.16);
	--glow-deep: rgba(138, 100, 16, 0.13);

	--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
							 "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
							 "Roboto Mono", Menlo, Consolas, monospace;

	--measure: 62ch;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--wrap: 78rem;

	--step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
	--step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
	--step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
	--step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.8rem);
	--step-4:  clamp(2.2rem, 1.6rem + 2.8vw, 4.2rem);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper:        #121316;
		--paper-raised: #191b20;
		--paper-sunk:   #0d0e10;
		--ink:          #e9e7e2;
		--ink-soft:     #a5a9b0;
		--ink-faint:    #787d86;
		--rule:         #2b2e35;
		--rule-strong:  #414651;
		--signal:       #e87051;
		--signal-ink:   #17110e;
		--signal-tint:  #241813;
		--ok:           #6fbf8e;
		--warn:         #d6a842;

		--glow-warm: rgba(232, 112, 81, 0.30);
		--glow-cool: rgba(56, 130, 156, 0.26);
		--glow-deep: rgba(150, 74, 48, 0.24);
	}
}

:root[data-theme="dark"] {
	--paper:        #121316;
	--paper-raised: #191b20;
	--paper-sunk:   #0d0e10;
	--ink:          #e9e7e2;
	--ink-soft:     #a5a9b0;
	--ink-faint:    #787d86;
	--rule:         #2b2e35;
	--rule-strong:  #414651;
	--signal:       #e87051;
	--signal-ink:   #17110e;
	--signal-tint:  #241813;
	--ok:           #6fbf8e;
	--warn:         #d6a842;
	--glow-warm: rgba(232, 112, 81, 0.30);
	--glow-cool: rgba(56, 130, 156, 0.26);
	--glow-deep: rgba(150, 74, 48, 0.24);

}

/* Grundlage */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	/* Sicherheitsnetz: nichts soll die Seite seitlich verschiebbar machen. */
	overflow-x: clip;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--step-0);
	line-height: 1.62;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0;
	line-height: 1.14;
	font-weight: 620;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); letter-spacing: -0.028em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }

a {
	color: inherit;
	text-decoration-color: var(--rule-strong);
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}
a:hover { text-decoration-color: var(--signal); }

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

::selection { background: var(--signal); color: var(--signal-ink); }

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 0;
}

/* Aufbau */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.stack > * + * { margin-block-start: var(--space, 1.5rem); }
.stack-s  { --space: 0.75rem; }
.stack-m  { --space: 1.5rem; }
.stack-l  { --space: 2.5rem; }
.stack-xl { --space: 4rem; }

.measure { max-width: var(--measure); }
.measure-wide { max-width: 78ch; }

.section {
	padding-block: clamp(2.75rem, 4.5vw, 4.75rem);
	border-block-start: 1px solid var(--rule);
}
.section:first-of-type { border-block-start: 0; }
.section-tight { padding-block: clamp(2rem, 3vw, 3rem); }
.section-sunk { background: var(--paper-sunk); }

.skip {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	background: var(--ink);
	color: var(--paper);
	padding: 0.75rem 1.25rem;
	z-index: 100;
}
.skip:focus { inset-inline-start: 0; }

/* Kennungen und Kleinschrift */

.tag {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 500;
}
.tag-signal { color: var(--signal); }

.num {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.lead {
	font-size: var(--step-1);
	line-height: 1.5;
	color: var(--ink-soft);
}

.small { font-size: var(--step--1); color: var(--ink-faint); line-height: 1.6; }

/* Abschnittskopf: kräftige Nummer links, Haarlinie darunter. */
.head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 1.5rem;
	align-items: baseline;
	margin-block-end: 2rem;
}
.head > .tag:first-child {
	font-size: var(--step-2);
	color: var(--signal);
	letter-spacing: 0.02em;
	line-height: 1;
}
.head::after {
	content: "";
	grid-column: 1 / -1;
	height: 1px;
	background: var(--rule-strong);
	margin-block-start: 1.25rem;
}
/* Direkt nach einem Kopf braucht das erste Element keine eigene Oberkante. */
.head + .svc,
.head + * > .svc:first-child { border-block-start: 0; }

/* Kopfzeile */

.site-head {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: blur(10px);
	border-block-end: 1px solid var(--rule);
}

.site-head__in {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4rem;
}

.brand {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-inline-end: auto;
	white-space: nowrap;
}
.brand__mark {
	width: 1.4rem;
	height: 1.4rem;
	display: block;
	flex: none;
}
.brand__sub {
	color: var(--ink-faint);
	font-weight: 400;
	font-size: var(--step--1);
}

/* Auf dem Telefon reicht der Firmenname, sonst draengt die Zeile
   den Farbschema-Knopf ueber den Rand. */
@media (max-width: 30rem) {
	.site-head__in { gap: 0.6rem; }
	.brand__sub { display: none; }
	.brand { font-size: 1rem; }
}

/* Fingerkuppen sind breiter als Mauszeiger. Auf Geraeten ohne genaue
   Zeigerhardware bekommen die Bedienelemente in der Kopfzeile Platz. */
@media (pointer: coarse) {
	.nav-toggle,
	.theme-btn {
		min-height: 2.75rem;
		min-width: 2.75rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.nav-toggle { display: inline-flex; }
	.brand { min-height: 2.75rem; }
	.nav a { padding-block: 0.95rem; }
}

.nav { display: flex; align-items: center; gap: 0.35rem; }
.nav a {
	font-size: var(--step--1);
	padding: 0.45rem 0.7rem;
	text-decoration: none;
	color: var(--ink-soft);
	white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--paper-sunk); }
.nav a[aria-current="page"] {
	color: var(--ink);
	box-shadow: inset 0 -2px 0 var(--signal);
}

.nav-toggle {
	display: none;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	background: none;
	border: 1px solid var(--rule-strong);
	color: var(--ink);
	padding: 0.45rem 0.8rem;
	cursor: pointer;
}

@media (max-width: 62rem) {
	.nav-toggle { display: block; }
	.nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--paper-raised);
		border-block-end: 1px solid var(--rule);
		padding: 0.5rem var(--gutter) 1rem;
	}
	.nav[data-open="true"] { display: flex; }
	.nav a { padding: 0.8rem 0; border-block-end: 1px solid var(--rule); }
	.nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--signal); padding-inline-start: 0.7rem; }
}

/* Schaltflächen */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.02em;
	padding: 0.8rem 1.3rem;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.12s ease;
}
.btn:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn:active { transform: translateY(1px); }

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--signal); background: transparent; color: var(--signal); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Startbereich */

.hero { padding-block: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 3.5rem); }

.hero h1 { max-width: 20ch; }
.hero__lead { max-width: 54ch; margin-block-start: 1.75rem; }

.hero__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	border-block-start: 1px solid var(--rule);
	margin-block-start: 3rem;
}
.hero__fact {
	padding: 1.25rem 1.25rem 1.25rem 0;
	border-inline-end: 1px solid var(--rule);
}
.hero__fact:last-child { border-inline-end: 0; }
.hero__fact dt { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.hero__fact dd { margin: 0.4rem 0 0; font-size: var(--step-0); font-weight: 560; }

@media (max-width: 48rem) {
	.hero__fact { border-inline-end: 0; border-block-end: 1px solid var(--rule); padding-inline: 0; }
	.hero__fact:last-child { border-block-end: 0; }
}

/* Raster */

.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid > * { background: var(--paper); padding: 1.75rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.cols { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.cols-side { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
	.cols-side { grid-template-columns: 15rem minmax(0, 1fr); }
	.cols-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Listen */

.list { list-style: none; }
.list li {
	position: relative;
	padding-inline-start: 1.5rem;
	margin-block-start: 0.7rem;
}
.list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.66em;
	width: 0.5rem;
	height: 1px;
	background: var(--signal);
}

.list-check li::before {
	content: "✓";
	font-family: var(--font-mono);
	top: 0;
	width: auto;
	height: auto;
	background: none;
	color: var(--ok);
	font-size: 0.9em;
}
.list-no li::before {
	content: "×";
	font-family: var(--font-mono);
	top: 0;
	width: auto;
	height: auto;
	background: none;
	color: var(--ink-faint);
	font-size: 1em;
}

.list-signal li {
	padding-inline-start: 0;
	padding-block: 0.85rem;
	border-block-end: 1px solid var(--rule);
	color: var(--ink-soft);
	margin-block-start: 0;
}
.list-signal li::before { display: none; }
.list-signal li:last-child { border-block-end: 0; }

/* Leistungsblock */

.svc { border-block-start: 1px solid var(--rule-strong); padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* Symbol und Nummer stehen nebeneinander über der Überschrift. */
.svc__head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
.svc__icon {
	width: 2.5rem;
	height: 2.5rem;
	flex: none;
	color: var(--ink-soft);
}
.svc__icon-s {
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
	color: var(--ink-faint);
}

.svc__num {
	font-family: var(--font-mono);
	font-size: var(--step-2);
	color: var(--signal);
	font-weight: 500;
}
.svc__panels {
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	margin-block-start: 2.5rem;
}
@media (min-width: 54rem) {.svc__panels { grid-template-columns: repeat(2, 1fr); } }
.svc__panel { background: var(--paper); padding: 1.75rem; }
.svc__panel h4 { font-size: var(--step-0); margin-block-end: 0.9rem; }

/* Preistafel */

.rate {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	border: 1px solid var(--rule-strong);
	padding: 1.5rem;
	background: var(--paper-raised);
}
.rate__value {
	font-family: var(--font-mono);
	font-size: var(--step-3);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}
.rate__unit { font-family: var(--font-mono); color: var(--ink-faint); font-size: var(--step-0); }

.ptable { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
.ptable caption {
	text-align: start;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding-block-end: 0.85rem;
}
.ptable th.ptable td {
	text-align: start;
	padding: 1rem 1rem 1rem 0;
	border-block-end: 1px solid var(--rule);
	vertical-align: baseline;
}
.ptable thead th {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	border-block-end: 1px solid var(--rule-strong);
}
.ptable td:last-child.ptable th:last-child { text-align: end; padding-inline-end: 0; white-space: nowrap; }
.ptable.price {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 560;
	font-size: var(--step-0);
}
.ptable.note { display: block; color: var(--ink-faint); font-size: var(--step--1); margin-block-start: 0.2rem; }

@media (max-width: 40rem) {
	.ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ptable tr { display: block; border-block-end: 1px solid var(--rule); padding-block: 0.9rem; }
	.ptable td { display: block; border: 0; padding: 0.15rem 0; }
	.ptable td:last-child { text-align: start; padding-block-start: 0.5rem; }
}

/* Hinweiskasten */

.note-box {
	border-inline-start: 3px solid var(--signal);
	background: var(--signal-tint);
	padding: 1.4rem 1.6rem;
}
.note-box h4 { font-size: var(--step-0); margin-block-end: 0.5rem; }

.callout {
	border: 1px solid var(--rule-strong);
	background: var(--paper-raised);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Ablauf */

.step {
	display: grid;
	gap: 0.5rem 2rem;
	padding-block: 1.75rem;
	border-block-end: 1px solid var(--rule);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 54rem) {
	.step { grid-template-columns: 3rem 14rem minmax(0, 1fr) 8rem; align-items: start; }
}
.step__num { font-family: var(--font-mono); color: var(--signal); font-size: var(--step-1); }
.step__time { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-faint); }
.step__role { display: block; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-block-end: 0.2rem; }

/* Fragen */

.qa { border-block-end: 1px solid var(--rule); }
.qa summary {
	cursor: pointer;
	padding-block: 1.25rem;
	font-weight: 560;
	font-size: var(--step-1);
	list-style: none;
	display: flex;
	gap: 1rem;
	align-items: baseline;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before {
	content: "+";
	font-family: var(--font-mono);
	color: var(--signal);
	flex: none;
	font-size: var(--step-1);
}
.qa[open] summary::before { content: "−"; }
.qa__body { padding-block-end: 1.5rem; padding-inline-start: 2rem; color: var(--ink-soft); }

/* Formular */

.field { display: block; margin-block-start: 1.5rem; }
.field > span {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-block-end: 0.5rem;
}
.field input[type="text"].field input[type="email"].field input[type="tel"].field select.field textarea {
	width: 100%;
	font: inherit;
	font-size: var(--step-0);
	padding: 0.8rem 0.9rem;
	background: var(--paper-raised);
	border: 1px solid var(--rule-strong);
	color: var(--ink);
	border-radius: 0;
}
.field textarea { min-height: 10rem; resize: vertical; }
.field input:focus.field select:focus.field textarea:focus { border-color: var(--signal); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.choices { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 40rem) {.choices { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.choice { background: var(--paper); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
	display: block;
	padding: 1.1rem 1.25rem;
	cursor: pointer;
	height: 100%;
}
.choice label:hover { background: var(--paper-sunk); }
.choice input:checked + label { background: var(--signal-tint); box-shadow: inset 3px 0 0 var(--signal); }
.choice input:focus-visible + label { outline: 2px solid var(--signal); outline-offset: -2px; }
.choice__t { display: block; font-weight: 560; }
.choice__d { display: block; font-size: var(--step--1); color: var(--ink-faint); margin-block-start: 0.25rem; line-height: 1.5; }

.consent { display: flex; gap: 0.8rem; align-items: start; margin-block-start: 1.75rem; font-size: var(--step--1); color: var(--ink-soft); }
.consent input { margin-block-start: 0.25rem; flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--signal); }

.msg { border-inline-start: 3px solid var(--ok); background: var(--paper-raised); padding: 1.25rem 1.5rem; }
.msg-err { border-color: var(--signal); }

/* Konfigurator */

.cfg { border: 1px solid var(--rule-strong); background: var(--paper-raised); }
.cfg__bar {
	display: flex;
	gap: 1px;
	background: var(--rule);
	border-block-end: 1px solid var(--rule-strong);
}
.cfg__bar span {
	flex: 1;
	background: var(--paper-sunk);
	padding: 0.65rem 0.5rem;
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--ink-faint);
}
.cfg__bar span[data-on="true"] { background: var(--signal); color: var(--signal-ink); }
.cfg__body { padding: clamp(1.5rem, 4vw, 2.25rem); }
.cfg__step[hidden] { display: none; }
.cfg__nav { display: flex; justify-content: space-between; gap: 1rem; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--rule); }

.estimate {
	border: 1px solid var(--rule-strong);
	background: var(--paper-sunk);
	padding: 1.5rem;
	margin-block-start: 1.75rem;
}
.estimate__v {
	font-family: var(--font-mono);
	font-size: var(--step-2);
	font-weight: 560;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

/* Fußzeile */

.site-foot {
	border-block-start: 1px solid var(--rule-strong);
	margin-block-start: 4rem;
	padding-block: 3.5rem 2.5rem;
	font-size: var(--step--1);
}
.site-foot__cols {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.site-foot h4 {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 500;
	margin-block-end: 1rem;
}
.site-foot ul { list-style: none; }
.site-foot li { margin-block-start: 0.5rem; }
.site-foot a { text-decoration: none; color: var(--ink-soft); }
.site-foot a:hover { color: var(--signal); }
.site-foot__base {
	margin-block-start: 3rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: space-between;
	color: var(--ink-faint);
}

/* Kleinteile */

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--rule);
	color: var(--ink-soft);
}

.anchor-list { list-style: none; position: sticky; top: 6rem; }
.anchor-list li { margin-block-start: 0.4rem; }
.anchor-list a { display: block; padding: 0.35rem 0; text-decoration: none; color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--step--1); }
.anchor-list a:hover { color: var(--signal); }

.theme-btn {
	background: none;
	border: 1px solid var(--rule-strong);
	color: var(--ink-soft);
	font-family: var(--font-mono);
	font-size: var(--step--1);
	padding: 0.4rem 0.6rem;
	cursor: pointer;
	line-height: 1;
}
.theme-btn:hover { border-color: var(--signal); color: var(--signal); }

/* Druck */

@media print {
	:root {
		--paper: #fff; --paper-raised: #fff; --paper-sunk: #fff;
		--ink: #000; --ink-soft: #333; --ink-faint: #555;
		--rule: #bbb; --rule-strong: #888; --signal: #000;
	}
	.site-head.nav.nav-toggle.theme-btn.btn.cfg.skip { display: none !important; }
	body { font-size: 10.5pt; }
	.section { padding-block: 1.2rem; break-inside: avoid; }
	.svc.step.qa { break-inside: avoid; }
	a[href^="/"]::after, a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 8pt;
		color: #555;
	}
	.site-foot { margin-block-start: 1rem; }
}

/* Startbereich zweispaltig */

.hero-split {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (min-width: 64rem) {
	.hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr); }
}

/* Kurzverzeichnis rechts im Startbereich: füllt die Fläche mit Inhalt,
	 statt sie leer zu lassen, und ist zugleich ein Sprungmenü. */
.index-panel {
	border: 1px solid var(--rule-strong);
	background: var(--paper-raised);
}
.index-panel__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 1.15rem;
	border-block-end: 1px solid var(--rule-strong);
	background: var(--paper-sunk);
}
.index-row {
	display: grid;
	grid-template-columns: 1.6rem 1fr auto;
	gap: 0.9rem;
	align-items: center;
	padding: 0.85rem 1.15rem;
	border-block-end: 1px solid var(--rule);
	text-decoration: none;
}
.index-row:last-of-type { border-block-end: 0; }
.index-row:hover { background: var(--paper-sunk); }
.index-row:hover.index-row__t { color: var(--signal); }
.index-row__ico { width: 1.6rem; height: 1.6rem; color: var(--ink-faint); }
.index-row__t { font-weight: 560; font-size: var(--step-0); }
.index-row__d { display: block; font-size: var(--step--1); color: var(--ink-faint); line-height: 1.45; }
.index-row__p {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--signal);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.index-panel__foot {
	padding: 0.8rem 1.15rem;
	border-block-start: 1px solid var(--rule-strong);
	background: var(--paper-sunk);
	font-size: var(--step--1);
	color: var(--ink-faint);
}

/* Leistungszeilen */

.svc-list { border-block-start: 1px solid var(--rule-strong); }

.svc-row {
	display: grid;
	gap: 0.6rem 1.75rem;
	padding-block: 1.6rem;
	border-block-end: 1px solid var(--rule);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 62rem) {
	.svc-row { grid-template-columns: 2.6rem 13rem minmax(0, 1fr) 12.5rem; }
}
.svc-row__ico { width: 2.1rem; height: 2.1rem; color: var(--signal); }
.svc-row__n {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	color: var(--ink-faint);
	display: block;
	margin-block-end: 0.2rem;
}
.svc-row__t { font-size: var(--step-1); }
.svc-row__s { font-size: var(--step--1); color: var(--ink-faint); margin-block-start: 0.35rem; line-height: 1.5; }
.svc-row__p {
	font-family: var(--font-mono);
	font-size: var(--step--1);
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
}
.svc-row__p b { color: var(--signal); font-weight: 500; display: block; font-size: var(--step-0); margin-block-end: 0.25rem; }
.svc-row__more { text-decoration: none; white-space: nowrap; }

/* Farbfeld im Hintergrund.
   Drei sehr weich gezeichnete Flecken, die langsam driften. Bewegt werden nur
   transform und opacity, das laeuft auf der Grafikkarte und kostet auch auf
   dem Telefon praktisch nichts. Wer Bewegung reduziert haben will, bekommt
   dasselbe Bild in ruhig. */

.aurora {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	contain: strict;
}

.aurora span {
	position: absolute;
	display: block;
	border-radius: 50%;
	will-change: transform, opacity;
	filter: blur(80px);
}

.aurora__a {
	inset-inline-start: -18vw;
	top: -12vh;
	width: 58vw;
	height: 58vw;
	background: radial-gradient(circle at 40% 40%, var(--glow-warm), transparent 68%);
	animation: drift-a 13s ease-in-out infinite alternate;
}

.aurora__b {
	inset-inline-end: -22vw;
	top: 18vh;
	width: 52vw;
	height: 52vw;
	background: radial-gradient(circle at 55% 45%, var(--glow-cool), transparent 66%);
	animation: drift-b 17s ease-in-out infinite alternate;
}

.aurora__c {
	inset-inline-start: 32vw;
	bottom: -26vh;
	width: 46vw;
	height: 46vw;
	background: radial-gradient(circle at 50% 50%, var(--glow-deep), transparent 70%);
	animation: drift-c 21s ease-in-out infinite alternate;
}

@keyframes drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
	to   { transform: translate3d(24vw, 18vh, 0) scale(1.45); opacity: 1; }
}
@keyframes drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.25); opacity: 1; }
	to   { transform: translate3d(-26vw, 26vh, 0) scale(0.8); opacity: 0.7; }
}
@keyframes drift-c {
	from { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0.8; }
	to   { transform: translate3d(28vw, -24vh, 0) scale(1.5); opacity: 1; }
}

/* Auf schmalen Bildschirmen weniger Flaeche und weniger Unschaerfe,
   damit auch aeltere Telefone nicht ins Schwitzen kommen. */
@media (max-width: 48rem) {
	.aurora span { filter: blur(56px); }
	.aurora__c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.aurora span { animation: none; }
}

/* Inhalt liegt ueber dem Farbfeld. */
.site-head,
main,
.site-foot { position: relative; z-index: 1; }

/* Hilfsklassen */
/* Ersetzen die frueheren style-Attribute im Markup. Die strenge
	 Inhaltsrichtlinie (style-src 'self') verbietet Inline-Styles, und
	 getrennte Klassen sind ohnehin besser zu pflegen.
	 Stehen bewusst am Ende, damit sie Basisregeln ueberschreiben. */

.mt-05  { margin-block-start: 0.5rem; }
.mt-075 { margin-block-start: 0.75rem; }
.mt-1   { margin-block-start: 1rem; }
.mt-125 { margin-block-start: 1.25rem; }
.mt-15  { margin-block-start: 1.5rem; }
.mt-2   { margin-block-start: 2rem; }
.mt-225 { margin-block-start: 2.25rem; }
.mt-25  { margin-block-start: 2.5rem; }
.mt-3   { margin-block-start: 3rem; }

.mb-1 { margin-block-end: 1rem; }
.mb-2 { margin-block-end: 2rem; }
.mb-3 { margin-block-end: 3rem; }

.fs-0 { font-size: var(--step-0); }
.fs-1 { font-size: var(--step-1); }
.fs-2 { font-size: var(--step-2); }
.fs-3 { font-size: var(--step-3); }

.t-ink   { color: var(--ink); }
.t-soft  { color: var(--ink-soft); }
.t-faint { color: var(--ink-faint); }
.t-ok    { color: var(--ok); }

.ta-start    { text-align: start; }
.wrap-normal { white-space: normal; }
.plain       { text-decoration: none; }
.bare        { list-style: none; }
.w-full      { width: 100%; }
.p-0         { padding: 0; }
.mw-26       { max-width: 26ch; }
.bt-thin     { border-block-start-width: 1px; }

/* Feldgruppen im Konfigurator tragen keine eigene Umrandung. */
.fs-bare { border: 0; padding: 0; margin: 0; }

/* Rahmen um Diagramme und Karten. */
.figbox     { margin: 0; border: 1px solid var(--rule); background: var(--paper-raised); }
.figbox-pad { padding: 1.5rem; overflow-x: auto; }