/* Landingpage (PBI-201): dieselben Farben, Schrift und Abstände wie die App, dunkles Standard-Design
   (Werte aus app/src/lib/styles/tokens.css). Keine Skripte, keine fremden Server, keine Inline-Styles. */

/* Atkinson Hyperlegible Next (Braille Institute, SIL OFL 1.1, Lizenz in fonts/OFL.txt), wie in der App */
@font-face {
	font-family: 'Atkinson Hyperlegible Next';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/atkinson-hyperlegible-next-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;
}

:root {
	--bg: #16181d;
	--surface: #1f2229;
	--line: #3d4250;
	--line-strong: #7d8494;
	--text: #f3f1ec;
	--muted: #c2bfb7;
	--accent: #8fdcc9;
	--accent-hover: #b3eadc;
	--on-accent: #10201c;
	--action-bg: #1b2a27;
	--action-line: #517671;
	--focus: #ffd166;
	--danger: #ff8f85;
	--success: #8fd694;
	--il-s: #212732;
	--il-fl: #282f3a;
	--il-win: #161b23;
	--il-scr: #2c3746;
	--il-1: #7fcdb9;
	--il-1d: #4e9886;
	--il-2: #d9a77c;
	--il-2d: #a8774f;
	--il-3: #6f8fbf;
	--il-3d: #55729e;
	--il-4: #39414f;
	--il-5: #e9e6df;
	--il-g: #f2c25b;
	/* Die nachgebaute Mail ist hell wie in den Übungen und nutzt die Systemschrift */
	--mail-bg: #fbfaf7;
	--mail-text: #23262d;
	--mail-muted: #5c616b;
	--mail-line: #dcd9d2;
	--mail-brand: #2f4f8f;
	--font: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--font-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
	--width: 68rem;
	--text-width: 42rem;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;
	color-scheme: dark;
}

/* Mehr Kontrast, wenn das System es wünscht (wie tokens.css) */
@media (prefers-contrast: more) {
	:root {
		--line: #7d8494;
		--line-strong: #b9bec9;
		--muted: #e4e1da;
		--action-line: #8fdcc9;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background: var(--bg);
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 1.125rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a {
	color: var(--accent);
	text-underline-offset: 3px;
}
a:hover {
	color: var(--accent-hover);
}
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 4px;
}
h1,
h2,
h3 {
	line-height: 1.2;
	text-wrap: balance;
	margin: 0;
}
p {
	margin: 0;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 10;
	padding: 10px 16px;
	border-radius: var(--r-sm);
	background: var(--focus);
	color: #1a1a1a;
	font-weight: 700;
}
.skip:focus {
	top: 12px;
}

.wrap {
	max-width: calc(var(--width) + 2 * 16px);
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* Kopf */
.top {
	padding-block: 20px;
}
.top .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	text-decoration: none;
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: 0.06em;
}
.brand:hover {
	color: var(--text);
}
.brand img {
	width: 32px;
	height: 32px;
	flex: none;
}
.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.brand-sub {
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--muted);
}
/* Untertitel im Fuß nicht mitten im Satz umbrechen */
.keep {
	white-space: nowrap;
}
.top-link {
	font-size: 1rem;
	color: var(--muted);
}

/* Erster Bildschirm */
.hero {
	padding-block: 32px 48px;
}
.hero .wrap {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
@media (min-width: 60em) {
	.hero .wrap {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}
.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border: 1px solid var(--action-line);
	border-radius: 999px;
	background: var(--action-bg);
	color: var(--text);
	font-size: 0.9rem;
	font-weight: 600;
}
.badge::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}
.hero h1 {
	margin-top: 20px;
	font-size: clamp(2.25rem, 6vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}
.hero h1 span {
	display: block;
	color: var(--accent);
}
.lead {
	margin-top: 20px;
	max-width: 36rem;
	color: var(--muted);
	font-size: 1.2rem;
}
.actions {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 22px;
	border-radius: var(--r-sm);
	border: 2px solid var(--line-strong);
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
	font-size: 1.05rem;
}
.btn:hover {
	border-color: var(--accent);
	color: var(--text);
}
.btn.primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}
.btn.primary:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--on-accent);
}
.for-line {
	margin-top: 16px;
	font-size: 0.95rem;
	color: var(--muted);
}

/* Beispiel aus einer Übung */
.example {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 20px;
	display: grid;
	gap: 16px;
	min-width: 0;
}
.label {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.mail {
	background: var(--mail-bg);
	color: var(--mail-text);
	border-radius: var(--r-md);
	font-family: var(--font-system);
	font-size: 0.95rem;
	line-height: 1.5;
	overflow: hidden;
	min-width: 0;
}
.mail-head {
	padding: 12px 16px;
	border-bottom: 1px solid var(--mail-line);
	display: grid;
	gap: 2px;
}
.mail-from {
	font-weight: 700;
}
.mail-addr {
	color: var(--mail-muted);
	font-size: 0.85rem;
	overflow-wrap: anywhere;
}
.mail-subject {
	margin-top: 6px;
	font-weight: 600;
}
.mail-body {
	padding: 14px 16px 18px;
	display: grid;
	gap: 12px;
}
.mail-logo {
	font-weight: 800;
	color: var(--mail-brand);
	letter-spacing: 0.02em;
}
.mail-btn {
	justify-self: start;
	background: var(--mail-brand);
	color: #ffffff;
	border-radius: 6px;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 0.9rem;
}
.mail-link {
	font-size: 0.82rem;
	color: var(--mail-muted);
	overflow-wrap: anywhere;
}
.question {
	font-weight: 700;
	font-size: 1.1rem;
}
details > summary {
	cursor: pointer;
	list-style: none;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	font-weight: 700;
}
details > summary::-webkit-details-marker {
	display: none;
}
details > summary::after {
	content: '+';
	font-size: 1.4rem;
	line-height: 1;
	color: var(--accent);
}
details[open] > summary::after {
	content: '–';
}
details.reveal {
	border: 2px solid var(--line-strong);
	border-radius: var(--r-md);
}
details.reveal[open] {
	border-color: var(--success);
}
.answer {
	padding: 0 16px 16px;
	display: grid;
	gap: 10px;
}
.verdict {
	color: var(--success);
	font-weight: 800;
}
.addr {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	background: var(--bg);
	border-radius: 6px;
	padding: 6px 10px;
	overflow-wrap: anywhere;
}
.addr mark {
	background: transparent;
	color: var(--danger);
	outline: 2px dashed var(--danger);
	outline-offset: 1px;
	border-radius: 2px;
}
.rule {
	color: var(--muted);
}

/* Abschnitte */
section.block {
	padding-block: 64px 0;
}
.block h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.1rem);
	font-weight: 800;
}
.block .intro {
	margin-top: 10px;
	max-width: var(--text-width);
	color: var(--muted);
}

/* Angriffslage: vier Kacheln mit großer Zahl, Quelle klein darunter */
.facts {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40em) {
	.facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 72em) {
	.facts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.facts li {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 20px;
	display: grid;
	gap: 8px;
	align-content: start;
	min-width: 0;
}
.facts .who {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.facts b {
	font-size: 2.3rem;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.facts p,
.facts .src {
	color: var(--muted);
}
.facts .src {
	font-size: 0.85rem;
}
details.sources {
	margin-top: 16px;
	max-width: 52rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
}
details.sources ol {
	margin: 0;
	padding: 0 16px 16px 40px;
	display: grid;
	gap: 8px;
	font-size: 0.95rem;
	color: var(--muted);
}
details.sources a {
	overflow-wrap: anywhere;
}

/* Was du bekommst */
.gets {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px 28px;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48em) {
	.gets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.gets li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}
.gets .icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--action-bg);
	border: 1px solid var(--action-line);
	display: grid;
	place-items: center;
}
.gets svg {
	width: 22px;
	height: 22px;
	stroke: var(--accent);
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gets h3 {
	font-size: 1.15rem;
}
.gets p {
	color: var(--muted);
	margin-top: 2px;
}

/* Schule, Privat und Beruf; Bilder wie GroupPicture in der App */
.groups {
	margin-top: 28px;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52em) {
	.groups {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.group {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
}
.group svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
}
.group-body {
	padding: 18px 20px 22px;
	display: grid;
	gap: 10px;
	align-content: start;
}
.group h3 {
	font-size: 1.3rem;
}
.group .who-text {
	font-weight: 700;
}
.group .topics-in,
.group .extra {
	color: var(--muted);
}
.group .extra {
	font-size: 0.95rem;
	border-top: 1px solid var(--line);
	padding-top: 10px;
	margin-top: 4px;
}
.group ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}
.group li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 8px;
}
.group li::before {
	content: '✓';
	color: var(--accent);
	font-weight: 800;
}
.il-s {
	fill: var(--il-s);
}
.il-fl {
	fill: var(--il-fl);
}
.il-win {
	fill: var(--il-win);
}
.il-scr {
	fill: var(--il-scr);
}
.f1 {
	fill: var(--il-1);
}
.f1d {
	fill: var(--il-1d);
}
.f2 {
	fill: var(--il-2);
}
.f2d {
	fill: var(--il-2d);
}
.f3 {
	fill: var(--il-3);
}
.f3d {
	fill: var(--il-3d);
}
.f4 {
	fill: var(--il-4);
}
.f5 {
	fill: var(--il-5);
}
.g {
	fill: var(--il-g);
}
.lo2 {
	opacity: 0.55;
}
.st2,
.st4 {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.st2 {
	stroke: var(--il-2);
}
.st4 {
	stroke: var(--il-4);
}

/* So lernst du */
.steps {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
	counter-reset: step;
}
@media (min-width: 40em) {
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 64em) {
	.steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.steps li {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 20px;
	display: grid;
	gap: 6px;
	align-content: start;
	counter-increment: step;
}
.steps li::before {
	content: counter(step);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--action-bg);
	border: 1px solid var(--action-line);
	color: var(--accent);
	font-weight: 800;
	font-size: 0.95rem;
}
.steps h3 {
	font-size: 1.2rem;
	margin-top: 6px;
}
.steps p {
	color: var(--muted);
}
.sims {
	margin-top: 16px;
	padding: 18px 20px;
	border-radius: var(--r-lg);
	background: var(--action-bg);
	border: 1px solid var(--action-line);
}
.sims p {
	max-width: 52rem;
}

/* Zahlen */
.numbers {
	margin-top: 64px;
	border-block: 1px solid var(--line);
}
.numbers ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48em) {
	.numbers ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.numbers li {
	padding: 20px 16px 20px 0;
	display: grid;
	gap: 2px;
}
.numbers b {
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--accent);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.numbers span {
	color: var(--muted);
	font-size: 1rem;
}

/* Fragen */
.faq {
	margin-top: 24px;
	display: grid;
	gap: 10px;
	max-width: var(--text-width);
}
.faq details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}
.faq details p {
	padding: 0 16px 16px;
	color: var(--muted);
}

/* Kontakt */
.final {
	margin-top: 72px;
}
.final-box {
	border: 1px solid var(--action-line);
	border-radius: var(--r-lg);
	padding: 40px 24px;
	text-align: center;
	background: radial-gradient(ellipse at top, #22403a 0%, var(--action-bg) 60%);
	display: grid;
	gap: 14px;
	justify-items: center;
}
.final h2 {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 800;
}
.final p {
	color: var(--muted);
	max-width: 34rem;
}

/* Datenschutz */
.legal {
	padding-block: 16px 0;
}
.legal .wrap > * {
	max-width: var(--text-width);
}
.legal h1 {
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 800;
}
.legal h2 {
	margin-top: 40px;
	font-size: 1.4rem;
	font-weight: 800;
}
.legal p,
.legal ul {
	margin-top: 12px;
}
.legal .short {
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: var(--r-lg);
	background: var(--action-bg);
	border: 1px solid var(--action-line);
}
.legal ul {
	padding-left: 24px;
}
.legal li + li {
	margin-top: 6px;
}

footer {
	margin-top: 64px;
	border-top: 1px solid var(--line);
	padding-block: 24px 40px;
}
footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
	justify-content: space-between;
}
footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
footer a,
footer p {
	font-size: 1rem;
}
footer p {
	color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
	.btn,
	details summary {
		transition:
			background-color 120ms ease-out,
			border-color 120ms ease-out,
			color 120ms ease-out;
	}
}