/* Schriften liegen auf dem eigenen Server. Es geht keine Anfrage mehr an Google. */

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/jetbrains-mono-v24-latin-regular.woff2") format("woff2")
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/jetbrains-mono-v24-latin-500.woff2") format("woff2")
}

@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/jetbrains-mono-v24-latin-600.woff2") format("woff2")
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2")
}

@font-face {
	font-family: "Inter";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-italic.woff2") format("woff2")
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-600.woff2") format("woff2")
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-700.woff2") format("woff2")
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/inter-v20-latin-900.woff2") format("woff2")
}

:root {
	--bg: #151515;
	--bg2: #0d0d0d;
	--panel: #191919;
	--paper: #eee;
	--muted: #858585;
	--line: #303030;
	--green: #22c55e;
	--green-dim: #145b32;
	--danger: #c9c9c9
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--paper);
	font-family: Inter, Arial, sans-serif;
	overflow-wrap: break-word
}

body:before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: .025;
	background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
	background-size: 48px 48px
}

.mono {
	font-family: "JetBrains Mono", monospace
}

.wrap {
	width: min(1120px, calc(100% - 44px));
	margin: auto
}

section {
	border-top: 1px solid var(--line)
}

.section {
	padding: 120px 0
}

.hero {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden
}

/* Das Cover sitzt als Kreis rechts im Hero. --hero-inset ist der Abstand vom Rand zur Kante von .wrap. */
.hero {
	--cover-w: clamp(380px, 40vw, 540px);
	--hero-inset: max(22px, calc((100% - 1120px) / 2))
}

.hero-cover {
	position: absolute;
	z-index: 1;
	right: 40px;
	top: 50%;
	width: var(--cover-w);
	height: var(--cover-w);
	transform: translateY(-50%);
	border-radius: 50%;
	overflow: hidden;
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 55%, transparent 100%)
}

.hero-cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 95%
}

.hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 70% 50%, rgba(34, 197, 94, .025), transparent 35%);
	pointer-events: none
}

.hero-content {
	position: relative;
	z-index: 2;
	padding: 80px max(0px, calc(var(--cover-w) + 80px - var(--hero-inset))) 80px 0
}

.status {
	font-size: 13px;
	letter-spacing: .16em;
	color: var(--green);
	margin-bottom: 30px
}

.status-teil {
	white-space: nowrap
}

.status-teil > span {
	color: #666
}

h1 {
	font-size: clamp(4.5rem, 12vw, 10rem);
	line-height: .82;
	letter-spacing: -.08em;
	margin: 0 0 30px;
	font-weight: 900
}

.tag {
	font-size: clamp(1.2rem, 2.6vw, 1.8rem);
	color: #aaa;
	font-style: italic
}

.quote {
	border-left: 2px solid var(--green);
	padding: 12px 0 12px 22px;
	margin: 45px 0;
	max-width: 720px;
	font: 500 clamp(1rem, 2vw, 1.2rem)/1.5 "JetBrains Mono", monospace;
	color: #d8d8d8
}

.actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}

.btn {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .1em;
	font: 600 13px "JetBrains Mono", monospace;
	padding: 15px 20px;
	border: 1px solid #4a4a4a;
	transition: .2s
}

.btn.primary {
	background: var(--green);
	border-color: var(--green);
	color: #06100a
}

.btn:hover {
	transform: translateY(-1px)
}

.btn.secondary {
	color: #bbb
}

.btn.secondary:hover {
	border-color: #888;
	color: #fff
}

.stream {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 25px;
	z-index: 2;
	overflow: hidden;
	white-space: nowrap;
	color: var(--green);
	opacity: .14;
	font: 12px "JetBrains Mono", monospace
}

.stream span {
	display: inline-block;
	animation: scroll 24s linear infinite
}

@keyframes scroll {
	from {
		transform: translateX(20%)
	}

	to {
		transform: translateX(-70%)
	}
}

.kicker {
	font: 600 12px "JetBrains Mono", monospace;
	letter-spacing: .16em;
	color: var(--green);
	text-transform: uppercase;
	margin-bottom: 17px
}

h2 {
	font-size: clamp(2.2rem, 5vw, 4.2rem);
	line-height: 1;
	letter-spacing: -.055em;
	margin: 0 0 60px;
	max-width: 900px
}

.normality {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px
}

.normality p {
	font-size: 18px;
	line-height: 1.8;
	color: #bbb
}

.normality .right {
	border-left: 1px solid var(--line);
	padding-left: 45px
}

.list {
	font: 14px/2 "JetBrains Mono", monospace;
	color: #aaa
}

.list div:before {
	content: "✓";
	color: var(--green);
	margin-right: 13px
}

.anomaly {
	background: var(--bg2)
}

.audit {
	border: 1px solid var(--line);
	background: #111;
	padding: 35px;
	max-width: 900px
}

.audit-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 17px;
	color: var(--muted);
	font: 12px "JetBrains Mono", monospace
}

.audit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
	margin-top: 25px
}

.audit-cell {
	background: #111;
	padding: 28px
}

.audit-cell .label {
	font: 12px "JetBrains Mono", monospace;
	color: var(--muted);
	text-transform: uppercase
}

.audit-cell strong {
	display: block;
	font: 500 18px "JetBrains Mono", monospace;
	margin-top: 10px
}

/* Eine Zeile, die ueber beide Spalten laeuft. Sonst bliebe im Raster
   ein leeres Feld daneben stehen. */
.audit-cell.breit {
	grid-column: 1 / -1
}

.good {
	color: var(--green)
}

.question {
	margin: 40px 0 0;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -.03em
}

.schlusszeile {
	margin-top: 70px;
	text-align: center
}

/* Der ruhige Satz unter einem Kasten. */
.nachsatz {
	max-width: 720px;
	margin: 35px 0 0;
	color: #888;
	line-height: 1.8
}

/* Aktenzeichen ueber der Abschnittsmarke. */
.aktenzeichen {
	font: 12px "JetBrains Mono", monospace;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #555;
	margin-bottom: 12px
}

/* Drei mal zwei statt einer Reihe: Bei sechs Karten in einer Zeile bliebe
   fuer den Text jeder Karte kaum mehr Platz als fuer ein Wort je Zeile. */
.register {
	border: 1px solid var(--line)
}

.register-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	padding: 17px 25px;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font: 12px "JetBrains Mono", monospace;
	letter-spacing: .08em
}

.characters {
	display: grid;
	grid-template-columns: repeat(3, 1fr)
}

.card {
	display: flex;
	flex-direction: column;
	padding: 25px;
	min-height: 280px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	position: relative;
	transition: .25s
}

/* Aussen sitzt schon der Rahmen des Kastens. Die Linien der rechten Spalte
   und der letzten Reihe lagen sonst doppelt. */
.card:nth-child(3n) {
	border-right: 0
}

.card:nth-last-child(-n+3) {
	border-bottom: 0
}

.card:hover {
	background: #1d1d1d
}

.card:hover:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background: var(--green)
}

.num {
	font: 12px "JetBrains Mono", monospace;
	color: #555
}

.card h3 {
	font-size: 20px;
	line-height: 1.05;
	margin: 48px 0 9px
}

.role {
	font: 12px/1.5 "JetBrains Mono", monospace;
	color: var(--green);
	text-transform: uppercase
}

.card p {
	color: #999;
	font-size: 15px;
	line-height: 1.7
}

.connection {
	margin: auto 0 0;
	padding-top: 25px;
	color: #555;
	font: 12px "JetBrains Mono", monospace;
	letter-spacing: .05em
}

.philosophy {
	background: #101010
}

.bigquote {
	font: 500 clamp(1.5rem, 4vw, 3rem)/1.35 "JetBrains Mono", monospace;
	border-left: 2px solid var(--green);
	padding-left: 28px;
	max-width: 900px
}

.reveal {
	margin: 35px 0 0 30px;
	color: #999;
	line-height: 1.8;
	max-width: 720px
}

.release {
	position: relative
}

.release-box {
	position: relative;
	border: 1px solid #404040;
	background: #101010;
	max-width: 900px;
	padding: 35px
}

.release-line {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 6px 20px;
	border-bottom: 1px solid #292929;
	padding: 13px 0;
	font: 13px "JetBrains Mono", monospace
}

.release-line:last-of-type {
	border: 0
}

/* Setzt eine Zeile vom Block darueber ab, wie eine Leerzeile in einer Akte. */
.release-line.abstand {
	margin-top: 22px
}

.release-line span {
	color: var(--muted)
}

.release-line strong {
	font-weight: 500
}

.approval {
	margin-top: 35px;
	padding-top: 25px;
	border-top: 1px solid var(--line)
}

.approval-label {
	font: 12px "JetBrains Mono", monospace;
	color: var(--muted);
	margin-bottom: 13px
}

.approval h3 {
	font-size: clamp(1.8rem, 4vw, 3rem);
	letter-spacing: -.04em;
	margin: 0 0 25px
}

.warning {
	font: 12px "JetBrains Mono", monospace;
	color: #777;
	margin-top: 17px
}

.details {
	margin-top: 90px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px
}

.details>div {
	min-width: 0
}

.code {
	background: #101010;
	border: 1px solid var(--line);
	padding: 25px;
	max-width: 100%;
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font: 13px/1.8 "JetBrains Mono", monospace
}

.key {
	color: #777
}

.val {
	color: #ccc
}

footer {
	border-top: 1px solid var(--line);
	padding: 35px 0;
	color: #555;
	font: 12px "JetBrains Mono", monospace
}

.footer-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 20px 40px;
	align-items: start;
	line-height: 1.9
}

.footer-recht {
	justify-content: center
}

@media(max-width:900px) {
	.section {
		padding: 90px 0
	}

	.hero {
		flex-direction: column;
		justify-content: center
	}

	.hero-content {
		margin: 0 auto;
		padding-right: 0
	}

	.hero-cover {
		position: static;
		width: 280px;
		height: 280px;
		margin: 0 auto 90px;
		transform: none
	}

	.normality,
	.details {
		grid-template-columns: 1fr
	}

	.normality {
		gap: 50px
	}

	.normality .right {
		border-left: 0;
		padding-left: 0
	}

	.details {
		margin-top: 60px;
		gap: 50px
	}

	.characters {
		grid-template-columns: 1fr 1fr
	}

	/* Bei zwei Spalten stehen die Linien woanders als bei dreien, deshalb
	   erst die Regeln von oben zuruecknehmen, dann neu setzen. */
	.card:nth-child(3n) {
		border-right: 1px solid var(--line)
	}

	.card:nth-child(2n) {
		border-right: 0
	}

	.card:nth-last-child(-n+3) {
		border-bottom: 1px solid var(--line)
	}

	.card:nth-last-child(-n+2) {
		border-bottom: 0
	}

	h2 {
		margin-bottom: 45px
	}
}

@media(max-width:600px) {
	.wrap {
		width: calc(100% - 30px)
	}

	.section {
		padding: 72px 0
	}

	.hero-content {
		padding: 60px 0
	}

	h1 {
		font-size: 21vw
	}

	.quote {
		margin: 35px 0;
		padding-left: 16px
	}

	.stream {
		bottom: 14px
	}

	.characters {
		grid-template-columns: 1fr
	}

	.card {
		border-right: 0;
		min-height: 0;
		padding: 22px
	}

	.card h3 {
		margin-top: 26px
	}

	/* Eine Spalte: alle Karten brauchen eine Trennlinie, nur die letzte nicht. */
	.card:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--line)
	}

	.card:last-child {
		border-bottom: 0
	}

	.audit {
		padding: 22px 18px
	}

	.audit-grid {
		grid-template-columns: 1fr
	}

	.audit-cell {
		padding: 20px 18px
	}

	.bigquote {
		padding-left: 18px
	}

	.reveal {
		margin-left: 0
	}

	.release-box {
		padding: 22px 18px
	}

	.details {
		margin-top: 50px;
		gap: 45px
	}

	.code {
		padding: 18px;
		font-size: 12px
	}

	.footer-inner {
		grid-template-columns: 1fr;
		gap: 8px
	}

	.footer-recht {
		justify-content: flex-start
	}

	.actions .btn {
		flex: 1 1 100%;
		text-align: center
	}

	.release-line {
		grid-template-columns: 1fr;
		gap: 4px
	}

	.stempel {
		position: static;
		display: inline-block;
		margin: 0 0 18px;
		transform: rotate(-3deg)
	}

	.normality p {
		font-size: 16px
	}
}

/* Topbar auf den Unterseiten */

.topbar {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(21, 21, 21, .92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line)
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 0
}

.topbar-home {
	color: var(--paper);
	text-decoration: none;
	font: 600 13px "JetBrains Mono", monospace;
	letter-spacing: .16em;
	transition: .2s
}

.topbar-home:hover {
	color: var(--green)
}

.topbar-meta {
	color: #666;
	font: 12px "JetBrains Mono", monospace;
	letter-spacing: .12em
}

/* Lesesatz der Kapitelseiten */

.wrap-narrow {
	width: min(680px, calc(100% - 44px))
}

.reading {
	border-top: 0;
	padding: 80px 0 60px
}

.reading .kicker {
	margin-bottom: 26px
}

.reading h1 {
	font-size: clamp(2.4rem, 7vw, 4rem);
	line-height: .95;
	letter-spacing: -.05em;
	margin: 0 0 55px
}

.reading h2 {
	font-size: clamp(1.5rem, 4vw, 2rem);
	letter-spacing: -.03em;
	margin: 60px 0 25px
}

.reading h3 {
	font-size: 1.25rem;
	margin: 45px 0 20px
}

.reading p {
	font-size: 19px;
	line-height: 1.85;
	color: #cfcfcf;
	margin: 0 0 28px;
	hyphens: auto
}

.reading em {
	color: var(--paper)
}

.reading a {
	color: var(--green)
}

.scene-break {
	margin: 55px 0;
	text-align: center;
	color: var(--green);
	opacity: .45;
	font: 13px "JetBrains Mono", monospace;
	letter-spacing: .5em
}

/* Kasten im Kapiteltext: ein abgedrucktes Dokument, ein Auszug, ein Brief.
   Zeilen und Einrueckungen bleiben, wie sie im Manuskript stehen. Wird es
   zu breit, rollt der Kasten waagerecht statt umzubrechen. */

.kasten {
	margin: 40px 0 44px;
	border: 1px solid #404040;
	border-left: 2px solid var(--green-dim);
	background: #101010
}

.kasten figcaption {
	padding: 12px 22px;
	border-bottom: 1px solid #292929;
	font: 600 11px/1.5 "JetBrains Mono", monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted)
}

.kasten pre {
	margin: 0;
	padding: 20px 22px;
	overflow-x: auto;
	font: 13px/1.75 "JetBrains Mono", monospace;
	color: #cfcfcf;
	tab-size: 4
}

/* Blaettern zwischen den Kapiteln */

.chapter-nav {
	border-top: 1px solid var(--line);
	padding: 45px 0 90px
}

.chapter-nav-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px
}

/* Abschluss der Leseprobe */

.teaser-end {
	padding: 60px 0 100px
}

.teaser-end h2 {
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	margin-bottom: 45px
}

.teaser-end .release-box {
	max-width: none
}

.teaser-end .approval h3 {
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	margin-bottom: 20px
}

@media(max-width:600px) {
	.reading {
		padding: 50px 0 40px
	}

	.reading h1 {
		margin-bottom: 40px
	}

	.reading p {
		font-size: 17px;
		line-height: 1.8
	}

	.kasten figcaption,
	.kasten pre {
		padding-left: 16px;
		padding-right: 16px
	}

	.kasten pre {
		font-size: 12px
	}

	.scene-break {
		margin: 40px 0;
		letter-spacing: .4em
	}

	.chapter-nav {
		padding: 35px 0 60px
	}

	.chapter-nav-inner .btn {
		width: 100%;
		text-align: center
	}

	.teaser-end {
		padding: 40px 0 70px
	}

	.teaser-end .actions .btn {
		width: 100%;
		text-align: center
	}
}

/* Scroll-Effekt: der Cursor tippt den Kicker, danach faehrt der Block ein.
   Greift nur bei Bloecken, die wirklich einen Kicker haben, damit die
   Kapitelnavigation nicht mit versteckt wird. Der Lesetext ist ausgenommen. */

.js .section:not(.reading):has(> .wrap > .kicker) > .wrap > .kicker {
	display: inline-block;
	max-width: 100%;
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: bottom;
	border-right: 2px solid var(--green);
	animation: caret 1s step-end infinite
}

.js .section:not(.reading):has(> .wrap > .kicker).is-typing > .wrap > .kicker {
	width: var(--tw-width);
	transition: width var(--tw-time) steps(var(--tw-chars), end)
}

.js .section:not(.reading):has(> .wrap > .kicker).is-done > .wrap > .kicker {
	border-right-color: transparent;
	animation: none;
	transition: width var(--tw-time) steps(var(--tw-chars), end), border-right-color .4s .15s
}

.js .section:not(.reading):has(> .wrap > .kicker) > .wrap > :not(.kicker) {
	opacity: 0;
	transform: translateY(14px)
}

.js .section:not(.reading):has(> .wrap > .kicker).is-done > .wrap > :not(.kicker) {
	opacity: 1;
	transform: none;
	transition: opacity .55s ease-out, transform .55s ease-out
}

@keyframes caret {

	0%,
	100% {
		border-right-color: var(--green)
	}

	50% {
		border-right-color: transparent
	}
}

/* Reduzierte Bewegung: alles sofort da, kein Tippen, kein Einfahren. */

.is-instant .section > .wrap > .kicker {
	width: var(--tw-width);
	border-right-color: transparent;
	animation: none;
	transition: none
}

.is-instant .section > .wrap > :not(.kicker) {
	opacity: 1;
	transform: none;
	transition: none
}


/* Gestaffeltes Einblenden. Der Index --i kommt aus my.js und steht in DOM-Reihenfolge. */

.js .section:not(.reading):has(> .wrap > .kicker).is-done > .wrap > :not(.kicker) {
	transition-delay: calc(var(--i, 0) * 60ms)
}

.js .card,
.js .list > div,
.js .release-line {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .5s ease-out, transform .5s ease-out;
	transition-delay: calc(var(--i, 0) * 60ms)
}

.js .is-done .card,
.js .is-done .list > div,
.js .is-done .release-line {
	opacity: 1;
	transform: none
}

.is-instant .card,
.is-instant .list > div,
.is-instant .release-line {
	opacity: 1;
	transform: none;
	transition: none
}

/* Beobachtereffekt: die Statuszeile reagiert darauf, ob jemand hinsieht. */

.status span[data-oversight] {
	transition: color .3s
}

.status span[data-oversight].ist-weg {
	color: var(--danger)
}

.status span[data-oversight].ist-zurueck {
	color: var(--green)
}

/* Weicher Uebergang beim Seitenwechsel. Browser ohne Unterstuetzung ignorieren das. */

@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .35s
}


/* Der Stempel im Release-Kasten. Ohne JavaScript steht er sofort da. */

.stempel {
	position: absolute;
	top: 30px;
	right: 30px;
	padding: 8px 14px;
	border: 2px solid var(--green);
	border-radius: 3px;
	color: var(--green);
	font: 600 14px "JetBrains Mono", monospace;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .8;
	transform: rotate(-8deg);
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse at 40% 60%, #000 55%, rgba(0, 0, 0, .55) 100%);
	mask-image: radial-gradient(ellipse at 40% 60%, #000 55%, rgba(0, 0, 0, .55) 100%)
}

.js .stempel {
	opacity: 0;
	transform: rotate(-8deg) scale(1.6)
}

.js .is-done .stempel {
	opacity: .8;
	transform: rotate(-8deg) scale(1);
	transition: opacity .2s 1.3s, transform .22s 1.3s cubic-bezier(.2, 1.6, .5, 1)
}

.is-instant .stempel {
	opacity: .8;
	transform: rotate(-8deg);
	transition: none
}

/* Beobachter-Effekt im Audit-Kasten: solange niemand hinsieht, sind beide
   Laeufe gleich. Die Frage darunter erscheint erst mit dem Blick. */

[data-beobachter] .question {
	transition: opacity .6s ease-out, transform .6s ease-out
}

[data-beobachter].ist-unbeobachtet .question {
	opacity: 0;
	transform: translateY(8px)
}

[data-beobachter] strong[data-ruhe],
[data-beobachter] [data-beobachter-status] {
	transition: color .3s
}

[data-beobachter].ist-beobachtet strong[data-ruhe] {
	color: var(--green)
}

.flackert {
	animation: flackern .42s steps(1, end)
}

@keyframes flackern {

	0%,
	40%,
	80% {
		opacity: 0
	}

	20%,
	60%,
	100% {
		opacity: 1
	}
}

/* Fortschrittsbalken: fuellt sich beim Scrollen und kippt am Ende das Release-Gate. */

.fortschritt {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	height: 2px;
	width: 0;
	background: var(--green);
	pointer-events: none;
	transition: width .1s linear, box-shadow .4s
}

.fortschritt.voll {
	box-shadow: 0 0 14px rgba(34, 197, 94, .55)
}

footer span[data-gate] {
	transition: color .4s
}

footer span[data-gate].ist-pruefung {
	color: var(--paper)
}

footer span[data-gate].ist-bereit {
	color: var(--green);
	animation: gate-quittung .75s ease-out
}

@keyframes gate-quittung {

	0%,
	40% {
		opacity: 0
	}

	20%,
	60% {
		opacity: 1;
		text-shadow: 0 0 10px rgba(34, 197, 94, .7)
	}

	100% {
		opacity: 1;
		text-shadow: none
	}
}

/* Der Standarduebergang blendet zwei fast gleich dunkle Seiten ineinander,
   das sieht man nicht. Deshalb eine eigene, sichtbare Bewegung. */

::view-transition-old(root) {
	animation: vt-raus .25s cubic-bezier(.4, 0, 1, 1) both
}

::view-transition-new(root) {
	animation: vt-rein .4s cubic-bezier(0, 0, .2, 1) both
}

@keyframes vt-raus {
	to {
		opacity: 0;
		transform: translateY(-14px)
	}
}

@keyframes vt-rein {
	from {
		opacity: 0;
		transform: translateY(18px)
	}
}


/* Die Stimme des Systems. Nur an einer Stelle, sonst nutzt sie sich ab. */

.systemstimme {
	margin: 0 0 25px;
	padding-left: 16px;
	border-left: 2px solid var(--green);
	font: 13px/1.75 "JetBrains Mono", monospace;
	color: #b8b8b8
}

/* Footer: Pflichtlinks und Vorgangsnummer */

.footer-recht {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px
}

.footer-recht a {
	color: #777;
	text-decoration: none;
	transition: color .2s
}

.footer-recht a:hover,
.footer-recht a:focus-visible {
	color: var(--green)
}

.footer-vorgang {
	color: #444
}

/* Pflichtseiten: gleiche Lesbarkeit wie das Kapitel, nur dichter gesetzt.
   Sie tragen die Klasse reading und sind damit von den Effekten ausgenommen,
   denn Rechtstexte duerfen nie erst durch JavaScript sichtbar werden. */

.rechtstext h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	margin-bottom: 40px
}

.rechtstext h2 {
	font-size: clamp(1.25rem, 3vw, 1.55rem);
	line-height: 1.25;
	letter-spacing: -.02em;
	margin: 45px 0 16px
}

.rechtstext h3 {
	font-size: 1.05rem;
	margin: 28px 0 12px
}

.rechtstext p,
.rechtstext li {
	font-size: 16px;
	line-height: 1.75;
	color: #b5b5b5;
	margin: 0 0 18px
}

.rechtstext ul {
	margin: 0 0 18px;
	padding-left: 20px
}

.rechtstext li {
	margin-bottom: 8px
}

.rechtstext a {
	color: var(--green)
}

.rechtstext code {
	padding: 2px 6px;
	background: #101010;
	border: 1px solid var(--line);
	font: 13px "JetBrains Mono", monospace;
	color: #ccc;
	word-break: break-all
}

.rechtstext dl {
	margin: 0 0 18px
}

.rechtstext dt {
	font: 12px "JetBrains Mono", monospace;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #666;
	margin-top: 14px
}

.rechtstext dd {
	margin: 4px 0 0;
	font-size: 16px;
	color: #b5b5b5
}

/* Was noch ausgefuellt werden muss, faellt sofort ins Auge. */

.platzhalter {
	display: block;
	margin: 0 0 18px;
	padding: 12px 16px;
	background: #1c1c1c;
	border-left: 2px solid #6b5d2a;
	font: 13px/1.6 "JetBrains Mono", monospace;
	color: #9a8a4e
}


/* Kontaktformular. Sieht aus wie ein Vorgang, der eingereicht wird. */

.kontakt-vorspann {
	color: #999;
	line-height: 1.8;
	max-width: 620px;
	margin: 0 0 45px
}

.kontakt-vorspann a {
	color: var(--green)
}

.kontaktformular {
	border: 1px solid #404040;
	background: #101010;
	padding: 35px
}

.honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden
}

.feld {
	margin-bottom: 26px
}

.feld label {
	display: block;
	margin-bottom: 9px;
	font: 600 12px "JetBrains Mono", monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #888
}

.feld-optional {
	color: #555;
	letter-spacing: .08em
}

.feld input,
.feld textarea {
	display: block;
	width: 100%;
	padding: 13px 14px;
	background: #171717;
	border: 1px solid var(--line);
	color: var(--paper);
	font: 15px/1.6 Inter, Arial, sans-serif;
	transition: border-color .2s, background .2s
}

.feld textarea {
	resize: vertical;
	min-height: 160px
}

.feld input:focus,
.feld textarea:focus {
	outline: 0;
	border-color: var(--green);
	background: #1b1b1b
}

.feld.hat-fehler input,
.feld.hat-fehler textarea {
	border-color: #8a6d3b
}

.feld-fehler {
	margin: 8px 0 0;
	font: 12px "JetBrains Mono", monospace;
	color: #c9a35a
}

.feld-fuss {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-top: 8px
}

.zeichenzahl {
	font: 11px "JetBrains Mono", monospace;
	color: #555;
	white-space: nowrap
}

.zeichenzahl.wird-eng {
	color: #c9a35a
}

.formular-hinweis {
	margin: 0 0 25px;
	padding: 14px 18px;
	border-left: 2px solid #8a6d3b;
	background: #1c1a16;
	font: 13px/1.6 "JetBrains Mono", monospace;
	color: #c9a35a
}

.formular-fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 32px;
	padding-top: 25px;
	border-top: 1px solid var(--line)
}

.formular-marke {
	font: 12px "JetBrains Mono", monospace;
	letter-spacing: .1em;
	color: #666
}

.formular-hinweis-klein {
	margin: 22px 0 0;
	font: 12px/1.7 "JetBrains Mono", monospace;
	color: #666
}

.formular-hinweis-klein a {
	color: #999
}

.formular-hinweis-klein a:hover {
	color: var(--green)
}

@media(max-width:600px) {
	.kontaktformular {
		padding: 22px 18px
	}

	.formular-fuss {
		flex-direction: column;
		align-items: stretch
	}

	.formular-fuss .btn {
		width: 100%;
		text-align: center
	}
}


/* Auswahl der Ausgabe auf der Warteliste */

.feld.auswahl {
	border: 0;
	padding: 0;
	margin-bottom: 26px
}

.feld.auswahl legend {
	padding: 0;
	margin-bottom: 9px;
	font: 600 12px "JetBrains Mono", monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #888
}

/* Spezifischer als .feld label, sonst gewinnt dort das display: block
   und die Beschriftung rutscht unter das Kaestchen. */

.feld.auswahl label.kaestchen {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	padding: 13px 14px;
	background: #171717;
	border: 1px solid var(--line);
	cursor: pointer;
	transition: border-color .2s, background .2s
}

.feld.auswahl label.kaestchen:hover {
	border-color: #4a4a4a
}

.feld.auswahl label.kaestchen:has(input:checked) {
	border-color: var(--green);
	background: #17211a
}

.feld.auswahl label.kaestchen:has(input:focus-visible) {
	outline: 2px solid var(--green);
	outline-offset: 2px
}

.feld.auswahl .kaestchen input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--green);
	flex: none
}

.feld.auswahl .kaestchen span {
	font: 15px Inter, Arial, sans-serif;
	letter-spacing: normal;
	text-transform: none;
	color: var(--paper)
}

.feld.auswahl .kaestchen small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--muted)
}

.feld.auswahl.hat-fehler label.kaestchen {
	border-color: #8a6d3b
}

/* Einwilligung. Faehrt von unten ein, verdeckt die Seite aber nicht:
   Wer nicht entscheiden will, kann trotzdem weiterlesen. */

.consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: #101010;
	border-top: 1px solid var(--green-dim);
	box-shadow: 0 -22px 60px rgba(0, 0, 0, .55);
	transform: translateY(100%);
	transition: transform .35s ease;
	max-height: 90vh;
	overflow-y: auto
}

.consent[hidden] {
	display: none
}

.consent.ist-da {
	transform: none
}

.consent-innen {
	width: min(1120px, calc(100% - 44px));
	margin: auto;
	padding: 26px 0 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px 45px
}

.consent-text {
	flex: 1 1 400px;
	min-width: 0
}

.consent-text .kicker {
	margin-bottom: 14px
}

.consent-text p {
	margin: 0 0 11px;
	max-width: 660px;
	font-size: 15px;
	line-height: 1.75;
	color: #9a9a9a
}

.consent-mehr {
	margin-top: 6px;
	padding: 0;
	background: none;
	border: 0;
	font: 12px "JetBrains Mono", monospace;
	letter-spacing: .06em;
	color: var(--green);
	text-decoration: underline;
	cursor: pointer
}

.consent-liste {
	margin-top: 18px;
	border-top: 1px solid #262626;
	max-width: 660px
}

.consent-liste[hidden] {
	display: none
}

.consent-zeile {
	display: flex;
	gap: 10px 22px;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid #1d1d1d;
	font: 12px/1.65 "JetBrains Mono", monospace
}

.consent-zeile span {
	flex: none;
	color: #666;
	letter-spacing: .1em
}

.consent-zeile strong {
	font-weight: 400;
	color: #a8a8a8;
	text-align: right
}

/* Beide Knoepfe gleich gross und gleich auffindbar. Ablehnen darf nicht
   umstaendlicher sein als Zustimmen. */
.consent-knoepfe {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 230px
}

.consent-knoepfe .btn {
	text-align: center;
	cursor: pointer
}

.consent-recht {
	margin-top: 4px;
	font: 11px "JetBrains Mono", monospace;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: #666;
	text-decoration: none
}

.consent-recht:hover {
	color: var(--green)
}

.fuss-knopf {
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: #777;
	cursor: pointer;
	transition: color .2s
}

.fuss-knopf:hover,
.fuss-knopf:focus-visible {
	color: var(--green)
}

@media(max-width:700px) {
	.consent-innen {
		padding: 20px 0 24px;
		gap: 18px
	}

	.consent-text p {
		font-size: 14px
	}

	.consent-knoepfe {
		width: 100%;
		min-width: 0
	}

	.consent-zeile {
		flex-direction: column;
		gap: 5px
	}

	.consent-zeile strong {
		text-align: left
	}
}


/* Leserumfrage vor einem Kapitel. Der Regler laeuft von 0 bis 10 in
   Zehntelschritten, Farbe, Wort und Vermerk folgen dem Wert. Bis er
   angefasst wurde, steht er grau in der Mitte und zaehlt nicht. */

.regler {
	--ton: var(--green);
	--anteil: 50%;
	margin: 0 0 34px;
	padding: 0 0 30px;
	border-bottom: 1px solid #262626
}

.regler[data-ton="tief"] {
	--ton: #c9a35a
}

.regler[data-ton="mitte"] {
	--ton: var(--paper)
}

.regler-kopf {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: start;
	margin-bottom: 18px
}

.regler-kopf label {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--paper)
}

.regler-nummer {
	display: inline-block;
	min-width: 34px;
	font: 500 12px "JetBrains Mono", monospace;
	color: var(--muted);
	vertical-align: 2px
}

.regler-hinweis {
	margin: 6px 0 0 34px;
	font-size: 14px;
	line-height: 1.6;
	color: #8a8a8a
}

.regler-anzeige {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 110px;
	text-align: right
}

.regler-zahl {
	font: 600 34px/1 "JetBrains Mono", monospace;
	letter-spacing: -.04em;
	color: var(--ton);
	font-variant-numeric: tabular-nums;
	transition: color .25s
}

.regler-wort {
	margin-top: 6px;
	font: 600 12px "JetBrains Mono", monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ton);
	transition: color .25s
}

.regler input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 32px;
	margin: 0;
	background: transparent;
	cursor: pointer;
	touch-action: pan-y
}

.regler input[type="range"]:focus {
	outline: 0
}

.regler input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	background: linear-gradient(to right, var(--ton) var(--anteil), #2c2c2c var(--anteil))
}

.regler input[type="range"]::-moz-range-track {
	height: 4px;
	background: #2c2c2c
}

.regler input[type="range"]::-moz-range-progress {
	height: 4px;
	background: var(--ton)
}

.regler input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px;
	height: 30px;
	margin-top: -13px;
	border: 2px solid var(--ton);
	background: var(--bg);
	transition: box-shadow .2s, border-color .25s
}

.regler input[type="range"]::-moz-range-thumb {
	width: 10px;
	height: 26px;
	border: 2px solid var(--ton);
	border-radius: 0;
	background: var(--bg);
	transition: box-shadow .2s, border-color .25s
}

.regler input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px var(--green-dim)
}

.regler input[type="range"]:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 4px var(--green-dim)
}

.regler input[type="range"]:active::-webkit-slider-thumb {
	background: var(--ton)
}

.regler input[type="range"]:active::-moz-range-thumb {
	background: var(--ton)
}

.regler-skala {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 12px;
	margin-top: 10px;
	font: 11px "JetBrains Mono", monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5c5c5c
}

.regler-skala span:last-child {
	text-align: right
}

.regler-vermerk {
	color: var(--ton);
	letter-spacing: .14em;
	transition: color .25s
}

/* Noch nicht angefasst: alles grau, der Griff wartet in der Mitte. */
.js .regler:not(.ist-gesetzt) {
	--ton: #555
}

.js .regler:not(.ist-gesetzt) .regler-vermerk {
	animation: regler-warten 1.1s steps(1) infinite
}

@keyframes regler-warten {
	50% {
		opacity: .35
	}
}

.regler.fehlt {
	--ton: #c9a35a
}

.regler.fehlt .regler-wort::after {
	content: " / BITTE SETZEN"
}

/* Ohne Skript laeuft die Anzeige nicht mit, dann lieber gar keine. */
html:not(.js) .regler-anzeige,
html:not(.js) .regler-vermerk {
	visibility: hidden
}

.umfrage .feld {
	margin-top: 10px
}

@media(max-width:600px) {
	.regler-kopf {
		gap: 14px
	}

	.regler-kopf label {
		font-size: 16px
	}

	.regler-nummer {
		display: block;
		margin-bottom: 4px
	}

	.regler-hinweis {
		margin-left: 0
	}

	.regler-anzeige {
		min-width: 76px
	}

	.regler-zahl {
		font-size: 26px
	}

	.regler-skala {
		grid-template-columns: 1fr 1fr;
		row-gap: 6px
	}

	.regler-vermerk {
		grid-column: 1 / -1;
		grid-row: 2;
		text-align: center
	}
}