@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-italic-400-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;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-normal-400-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;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-500-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;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-normal-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-normal-600-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;}
@font-face{font-family:'Vollkorn';font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/vollkorn-italic-400-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Vollkorn';font-style:italic;font-weight:400 900;font-display:swap;src:url(fonts/vollkorn-italic-400-900-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;}
@font-face{font-family:'Vollkorn';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/vollkorn-normal-400-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Vollkorn';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/vollkorn-normal-400-900-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;}

/* ==========================================================================
   Kommentarsatz — chladt.com
   Zwei Stimmen: Vollkorn (Recht) und IBM Plex Mono (Code). Zwei Akzente:
   Siegelrot für die Norm, Kryptik-Türkis für die Umsetzung. Kein Farbwert
   und keine Schriftgröße existiert hier, ohne eine der beiden zu bedienen.
   ========================================================================== */

:root {
	color-scheme: light dark;

	--ground: #e4e5e0;
	--panel: #eff0ec;
	--panel-2: #dbdcd6;
	--ink: #191d1b;
	--ink-2: #545c56;
	--ink-3: #6d746e;
	--rule: #c8cac3;
	--rule-soft: #d7d9d2;
	--siegel: #8a2b34;
	--siegel-soft: rgba(138, 43, 52, 0.09);
	--kryptik: #16605c;
	--kryptik-soft: rgba(22, 96, 92, 0.09);

	--marge: 8.5rem;
	--gutter: clamp(1.25rem, 4vw, 3.5rem);
	--maxw: 68rem;

	--serif: 'Vollkorn', 'Iowan Old Style', Palatino, 'Book Antiqua', Georgia, serif;
	--mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--ground: #111614;
		--panel: #19201d;
		--panel-2: #222a26;
		--ink: #e6e9e4;
		--ink-2: #9aa39c;
		--ink-3: #8c958e;
		--rule: #2b322e;
		--rule-soft: #232a26;
		--siegel: #dd858d;
		--siegel-soft: rgba(221, 133, 141, 0.11);
		--kryptik: #63c4bb;
		--kryptik-soft: rgba(99, 196, 187, 0.1);
	}
}

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

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--serif);
	font-size: clamp(1.02rem, 0.96rem + 0.28vw, 1.16rem);
	line-height: 1.62;
	font-variant-numeric: oldstyle-num;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

@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;
	}
}

a { color: inherit; }

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

/* --- Marginalspalte -------------------------------------------------------
   Die senkrechte Linie, an der die Randnummern hängen. Sie ist der Grund,
   warum die Seite wie ein Kommentar liest und nicht wie ein Portfolio. */

.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
	position: relative;
}

.rand {
	position: relative;
	padding-left: var(--marge);
}

.rand::before {
	content: '';
	position: absolute;
	left: calc(var(--marge) - 2.9rem);
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--rule);
}

.rn {
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: calc(var(--marge) - 3.9rem);
	text-align: right;
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 46rem) {
	.rand { padding-left: 0; }
	.rand::before { display: none; }
	.rn {
		position: static;
		width: auto;
		text-align: left;
		display: block;
		margin-bottom: 0.75rem;
		padding-bottom: 0.4rem;
		border-bottom: 1px solid var(--rule);
	}
}

/* --- Kopfzeile ----------------------------------------------------------- */

.top {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--ground) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--rule);
}

.top-in {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0.85rem var(--gutter);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
}

.sig {
	font-family: var(--mono);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.sig span { color: var(--siegel); }

.nav {
	display: flex;
	gap: 1.4rem;
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.05em;
}

.nav a {
	text-decoration: none;
	color: var(--ink-2);
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: color 0.18s, border-color 0.18s;
}

.nav a:hover { color: var(--ink); border-bottom-color: var(--kryptik); }

@media (max-width: 46rem) { .nav { display: none; } }

/* --- Aufmacher ----------------------------------------------------------- */

.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2.5rem, 6vw, 4.5rem); }

.eyebrow {
	font-family: var(--mono);
	font-size: 0.73rem;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
}

.eyebrow b { color: var(--ink-2); font-weight: 500; }

.claim {
	font-size: clamp(2rem, 0.9rem + 4.8vw, 3.9rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.018em;
	margin: 0 0 clamp(2rem, 5vw, 3.2rem);
	max-width: 21ch;
	text-wrap: balance;
}

.claim .norm { color: var(--siegel); }
.claim .impl { color: var(--kryptik); font-style: italic; font-weight: 500; }

/* --- Das Signaturelement: Norm gegen Umsetzung ---------------------------
   Links die Pflicht im Gesetzestext, rechts die Zeile, die sie erfüllt.
   Dieselbe Aussage in zwei Sprachen, mit einer Haarlinie dazwischen. */

.gegenueber {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--rule);
	background: var(--panel);
	margin: 0 0 clamp(2rem, 4vw, 2.8rem);
}

.gg { padding: clamp(1.3rem, 3vw, 1.9rem); min-width: 0; }
.gg + .gg { border-left: 1px solid var(--rule); }

.gg-kopf {
	font-family: var(--mono);
	font-size: 0.71rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.9rem;
	padding-left: 0.7rem;
	border-left: 2px solid currentColor;
}

.gg-recht .gg-kopf { color: var(--siegel); }
.gg-code .gg-kopf { color: var(--kryptik); }

.gg-recht .zitat {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.55;
	color: var(--ink-2);
	hyphens: auto;
}

.gg-recht .zitat em { font-style: italic; color: var(--ink); }

.gg-code pre {
	margin: 0;
	font-family: var(--mono);
	font-size: 0.79rem;
	line-height: 1.72;
	color: var(--ink-2);
	overflow-x: auto;
	white-space: pre;
	-webkit-overflow-scrolling: touch;
}

.gg-code .k { color: var(--kryptik); }
.gg-code .c { color: var(--ink-3); }

.gg-fuss {
	margin: 1.1rem 0 0;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--ink-3);
}

@media (max-width: 46rem) {
	.gegenueber { grid-template-columns: 1fr; }
	.gg + .gg { border-left: 0; border-top: 1px solid var(--rule); }
}

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

.tasten { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

.taste {
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-decoration: none;
	padding: 0.72rem 1.15rem;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--ground);
	transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.taste:hover { background: var(--siegel); border-color: var(--siegel); color: #fff; }

.taste-flach {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule);
}

.taste-flach:hover { background: transparent; color: var(--kryptik); border-color: var(--kryptik); }

/* --- Abschnitte ---------------------------------------------------------- */

.abschnitt { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--rule); }

.h2 {
	font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.4rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.014em;
	margin: 0 0 1.1rem;
	text-wrap: balance;
}

.lead {
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.32rem);
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0 0 1.6rem;
	max-width: 46ch;
}

.abschnitt p { max-width: 62ch; }
.abschnitt p:last-child { margin-bottom: 0; }

.betont { color: var(--ink); font-weight: 600; }

/* --- Kennzahlen ---------------------------------------------------------- */

.zahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	margin: 2rem 0;
}

.zahl { background: var(--panel); padding: 1.15rem 1.2rem; }

.zahl dt {
	font-family: var(--mono);
	font-size: 0.67rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 0.4rem;
}

.zahl dd {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -0.01em;
}

/* --- Schichttabelle ------------------------------------------------------ */

.schichten { margin: 2rem 0 0; border-top: 1px solid var(--rule); }

.schicht {
	display: grid;
	grid-template-columns: 13.5rem 1fr;
	gap: 0 1.5rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--rule-soft);
	align-items: baseline;
}

.schicht dt {
	font-family: var(--mono);
	font-size: 0.73rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--kryptik);
	text-transform: uppercase;
}

.schicht dd { margin: 0; font-size: 0.99rem; line-height: 1.5; color: var(--ink-2); }
.schicht dd b { color: var(--ink); font-weight: 600; }

@media (max-width: 40rem) {
	.schicht { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* --- Juristische Randnotizen --------------------------------------------- */

.notizen { list-style: none; margin: 2rem 0 0; padding: 0; }

.notiz {
	position: relative;
	padding: 0 0 0 2.6rem;
	margin-bottom: 1.35rem;
	max-width: 60ch;
	color: var(--ink-2);
	font-size: 0.99rem;
	line-height: 1.55;
}

.notiz::before {
	content: '§';
	position: absolute;
	left: 0;
	top: -0.08em;
	font-size: 1.35rem;
	line-height: 1;
	color: var(--siegel);
	opacity: 0.75;
}

.notiz b { color: var(--ink); font-weight: 600; }
.notiz:last-child { margin-bottom: 0; }

/* --- Werdegang ----------------------------------------------------------- */

.spuren {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.75rem, 4vw, 3rem);
	margin-top: 2.2rem;
}

@media (max-width: 46rem) { .spuren { grid-template-columns: 1fr; } }

.spur-kopf {
	font-family: var(--mono);
	font-size: 0.71rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-bottom: 0.6rem;
	margin-bottom: 1.4rem;
	border-bottom: 2px solid currentColor;
}

.spur-recht .spur-kopf { color: var(--siegel); }
.spur-code .spur-kopf { color: var(--kryptik); }

.posten { margin-bottom: 1.6rem; }
.posten:last-child { margin-bottom: 0; }

.posten-zeit {
	font-family: var(--mono);
	font-size: 0.71rem;
	letter-spacing: 0.07em;
	color: var(--ink-3);
	font-variant-numeric: lining-nums tabular-nums;
	display: block;
	margin-bottom: 0.25rem;
}

.posten-titel { font-weight: 600; font-size: 1.04rem; line-height: 1.3; display: block; }

.posten-ort {
	display: block;
	font-size: 0.93rem;
	color: var(--ink-2);
	margin-top: 0.12rem;
}

.posten-note {
	margin: 0.45rem 0 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--ink-3);
	font-style: italic;
	max-width: 44ch;
}

.selbstfinanziert {
	margin-top: 2.4rem;
	padding: 1.15rem 1.3rem;
	background: var(--panel);
	border-left: 2px solid var(--siegel);
	font-size: 0.97rem;
	line-height: 1.55;
}

.selbstfinanziert p { margin: 0; max-width: none; }

/* --- Kenntnisse ---------------------------------------------------------- */

.koennen { margin: 2rem 0 0; }

.koennen-gruppe { padding: 1.1rem 0; border-top: 1px solid var(--rule-soft); }
.koennen-gruppe:first-child { border-top: 1px solid var(--rule); }

.koennen-kopf {
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 0.7rem;
}

.marken { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.marke {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	padding: 0.32rem 0.6rem;
	border: 1px solid var(--rule);
	background: var(--panel);
	color: var(--ink-2);
	white-space: nowrap;
}

.marke-stark {
	border-color: color-mix(in srgb, var(--kryptik) 45%, transparent);
	background: var(--kryptik-soft);
	color: var(--kryptik);
	font-weight: 500;
}

.marke-recht {
	border-color: color-mix(in srgb, var(--siegel) 40%, transparent);
	background: var(--siegel-soft);
	color: var(--siegel);
	font-weight: 500;
}

/* --- Einsatz ------------------------------------------------------------- */

.rollen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	margin: 2rem 0 0;
}

.rolle { background: var(--panel); padding: 1.4rem 1.35rem; }

.rolle h3 {
	margin: 0 0 0.55rem;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.25;
}

.rolle p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); max-width: none; }

.offen {
	margin-top: 2.2rem;
	padding-left: 1.1rem;
	border-left: 2px solid var(--rule);
	font-size: 0.97rem;
	color: var(--ink-2);
}

.offen h3 {
	margin: 0 0 0.45rem;
	font-family: var(--mono);
	font-size: 0.69rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.offen p { margin: 0; max-width: 60ch; }

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

.kontakt-adresse {
	font-family: var(--mono);
	font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.3rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	border-bottom: 2px solid var(--kryptik);
	padding-bottom: 0.15rem;
	display: inline-block;
	margin-bottom: 1.8rem;
	word-break: break-all;
	transition: color 0.18s;
}

.kontakt-adresse:hover { color: var(--kryptik); }

/* --- Fußzeile ------------------------------------------------------------ */

.fuss {
	border-top: 1px solid var(--rule);
	padding: 2.5rem 0 3.5rem;
	font-family: var(--mono);
	font-size: 0.73rem;
	line-height: 1.75;
	color: var(--ink-3);
	letter-spacing: 0.02em;
}

.fuss-in {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	justify-content: space-between;
	align-items: flex-start;
}

/* Line the footer up with the body column, not with the page gutter — the
   marginal rule above it ends here, and a shifted footer looks like a mistake. */
@media (min-width: 46.001rem) { .fuss-in { padding-left: calc(var(--gutter) + var(--marge)); } }

.fuss a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.fuss a:hover { color: var(--kryptik); border-bottom-color: var(--kryptik); }

.fuss-beleg { max-width: 40ch; }
.fuss-beleg strong { color: var(--kryptik); font-weight: 500; }

.fuss-links { display: flex; gap: 1.4rem; }

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

.textseite { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.textseite h1 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem); font-weight: 600; margin: 0 0 2rem; letter-spacing: -0.015em; }
.textseite h2 { font-size: 1.15rem; font-weight: 600; margin: 2.2rem 0 0.6rem; }
.textseite p, .textseite li { max-width: 62ch; color: var(--ink-2); }
.textseite p { margin: 0 0 0.9rem; }
.textseite ul { padding-left: 1.2rem; margin: 0 0 0.9rem; }
.textseite li { margin-bottom: 0.35rem; }
.textseite strong { color: var(--ink); font-weight: 600; }
.textseite a { color: var(--kryptik); }

.zurueck {
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--ink-3);
	display: inline-block;
	margin-bottom: 2rem;
}

.zurueck:hover { color: var(--kryptik); }

/* --- Auftritt ------------------------------------------------------------
   Die Norm erscheint, dann ihre Umsetzung. Erst danach der Rest. */

@keyframes auf {
	from { opacity: 0; transform: translateY(9px); }
	to { opacity: 1; transform: none; }
}

.auftritt { opacity: 0; animation: auf 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.auftritt-1 { animation-delay: 0.05s; }
.auftritt-2 { animation-delay: 0.16s; }
.auftritt-3 { animation-delay: 0.34s; }
.auftritt-4 { animation-delay: 0.52s; }
.auftritt-5 { animation-delay: 0.66s; }

@media (prefers-reduced-motion: reduce) {
	.auftritt { opacity: 1; animation: none; }
}

/* --- Druck ---------------------------------------------------------------
   Wer die Seite ausdruckt, hält einen Lebenslauf in der Hand, keine Website. */

@media print {
	:root {
		--ground: #fff;
		--panel: #fff;
		--ink: #000;
		--ink-2: #333;
		--ink-3: #555;
		--rule: #bbb;
		--rule-soft: #ddd;
		--siegel: #7a1f27;
		--kryptik: #10403d;
		--marge: 6rem;
	}
	body { font-size: 10.5pt; line-height: 1.45; }
	.top, .nav, .tasten, .fuss-links { display: none; }
	.hero { padding-top: 0.5rem; }
	.claim { font-size: 24pt; max-width: 26ch; }
	.abschnitt { padding: 1.2rem 0; break-inside: avoid; }
	.gegenueber, .rollen, .zahlen, .rolle, .zahl, .posten, .notiz { break-inside: avoid; }
	.auftritt { opacity: 1; animation: none; }
	a { text-decoration: none; }
}

/* --- Zugangsschleuse -----------------------------------------------------
   Rn. 0 derselben Kommentierung: gleiche Marginallinie, gleiche Typografie.
   Wer den Code eingibt, sieht die Seite nicht "aufspringen", sondern
   weiterlaufen. Kein JavaScript — das Formular schickt ein GET an /, und
   Caddy entscheidet, ob es den Inhalt herausgibt (siehe deploy/Caddyfile).
   Der Code steht deshalb nirgends im Quelltext dieser Seite. */

.body-schleuse { min-height: 100vh; }

.schleuse {
	display: flex;
	align-items: center;
	min-height: calc(100vh - 4rem);
	padding: clamp(2rem, 8vh, 6rem) 0;
}

.schleuse .wrap { width: 100%; }

.schleuse-titel {
	font-size: clamp(1.9rem, 1rem + 4vw, 3.2rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.018em;
	margin: 0 0 1rem;
	max-width: 16ch;
}

.schleuse-text {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
	color: var(--ink-2);
	margin: 0 0 2.2rem;
	max-width: 42ch;
}

.schleuse-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin-bottom: 1rem;
}

/* Knopf auf Feldhöhe bringen — sonst sitzt er sichtbar tiefer im Blick. */
.schleuse-form .taste { padding-block: 1.05rem; }

.schleuse-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Ein einziges Feld, das wie vier Kästchen aussieht: die Zellen sind ein
   Hintergrund-Gradient, die Ziffern sitzen per letter-spacing darüber. Vier
   echte Inputs bräuchten JavaScript für den Fokuswechsel. */
.code-feld {
	font-family: var(--mono);
	font-size: 1.75rem;
	font-weight: 500;
	/* Zeichenabstand so gewählt, dass der Vorschub genau einer Zelle
	   entspricht: 1ch Glyphe + 1.4ch Abstand = 2.4ch Raster. */
	letter-spacing: 1.4ch;
	text-indent: 0.7ch;
	width: 10.2ch;
	padding: 0.9rem 0 0.85rem;
	color: var(--ink);
	background-color: var(--panel);
	background-image:
		linear-gradient(var(--rule), var(--rule)),
		linear-gradient(var(--rule), var(--rule)),
		linear-gradient(var(--rule), var(--rule));
	background-size: 1px 55%;
	background-position: 2.4ch 50%, 4.8ch 50%, 7.2ch 50%;
	background-repeat: no-repeat;
	border: 1px solid var(--rule);
	border-bottom: 2px solid var(--kryptik);
	border-radius: 0;
	transition: border-color 0.18s, background-color 0.18s;
}

.code-feld::placeholder { color: var(--ink-3); }

.code-feld:focus {
	outline: none;
	border-color: var(--kryptik);
	background-color: var(--kryptik-soft);
}

/* Muss auch im Fokus gelten: das Feld hat autofocus, sonst überschreibt der
   Fokuszustand die Fehlermarkierung und der rote Rahmen ist nie zu sehen. */
.code-feld-fehler,
.code-feld-fehler:focus {
	border-color: var(--siegel);
	border-bottom-color: var(--siegel);
	background-color: var(--siegel-soft);
}

.schleuse-fehler {
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	color: var(--siegel);
	margin: 0 0 1rem;
}

.schleuse-fuss {
	margin: 2.4rem 0 0;
	font-family: var(--mono);
	font-size: 0.73rem;
	line-height: 1.85;
	letter-spacing: 0.02em;
	color: var(--ink-3);
	max-width: 52ch;
}

.schleuse-fuss a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.schleuse-fuss a:hover { color: var(--kryptik); border-bottom-color: var(--kryptik); }

/* --- Offenlegung (KI-Absatz) ---------------------------------------------
   Bewusst als eigener Kasten und nicht im Fließtext versteckt. */

.offenlegung {
	margin: 2.4rem 0 0;
	padding: 1.4rem 1.5rem;
	background: var(--panel);
	border: 1px solid var(--rule);
	border-left: 2px solid var(--kryptik);
}

.offenlegung h3 {
	margin: 0 0 0.7rem;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.25;
}

.offenlegung p {
	margin: 0 0 0.8rem;
	font-size: 0.97rem;
	line-height: 1.58;
	color: var(--ink-2);
	max-width: 62ch;
}

.offenlegung p:last-child { margin-bottom: 0; }