/* Manola Trust Center — Werte aus dem Manola-Website-Stylesheet (src/styles/manola). */

@font-face { font-family: "Zilla Slab"; src: url("fonts/ZillaSlab-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
	color-scheme: light;
	--white: #ffffff;
	--ink: #111213;
	--muted: #f1f2f3;
	--accent: #8162f3;
	--ink-soft: #5e666e;
	--accent-ink: #6741f1;
	--accent-deep: #5737ca;
	--mint: #a8bcae;
	--tint-sage: #dff0e4;

	--text-body: var(--ink);
	--text-muted: var(--ink-soft);
	--text-interactive: var(--accent-ink);
	--text-on-invert: var(--white);
	--text-on-invert-muted: rgb(255 255 255 / 0.66);
	--border-hard: rgb(17 18 19 / 0.14);
	--border-on-ink: rgb(255 255 255 / 0.18);
	--focus-ring: var(--accent);

	--font-display: "Zilla Slab", Georgia, serif;
	--font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
	--font-label: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--type-display-1: 500 96px/0.98 var(--font-display);
	--type-display-2: 500 62px/1.02 var(--font-display);
	--type-display-3: 500 40px/1.08 var(--font-display);
	--type-display-4: 500 30px/1.14 var(--font-display);
	--tracking-display: -0.02em;
	--type-heading: 700 22px/1.25 var(--font-body);
	--type-subhead: 600 17px/1.35 var(--font-body);
	--type-body: 400 17px/1.5 var(--font-body);
	--type-body-sm: 400 15px/1.5 var(--font-body);
	--type-label: 500 11px/1.2 var(--font-label);
	--type-label-lg: 500 12px/1.2 var(--font-label);
	--type-data: 400 13px/1.5 var(--font-label);
	--tracking-label: 0.16em;
	--type-cta: 600 13px/1.2 var(--font-label);
	--tracking-cta: 0.12em;
	--underline-offset: 0.18em;

	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
	--space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
	--gutter-page: 64px;
	--content-max: 1312px;
	--pad-x: max(var(--gutter-page), calc((100% - var(--content-max)) / 2));
	--measure: 34rem;
	--measure-lead: 42rem;
	--measure-display: 56rem;
	--section-y: 48px;
	--stack-1: 12px; --stack-2: 24px; --stack-3: 32px; --stack-4: 48px;
	--title-col: 240px;

	--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px;
	--radius-tag: 8px; --radius-button: 13px;
	--rule-hard: 1px solid var(--border-hard);
	--rule-dashed: 1.5px dashed var(--border-hard);
	--shadow-lift: 0 1px 2px rgb(17 18 19 / 0.05), 0 8px 24px rgb(17 18 19 / 0.06);
	--block-pad: var(--space-6);

	--ease-flat: cubic-bezier(0.2, 0, 0, 1);
	--dur-base: 160ms;
	--transition-tint: background-color var(--dur-base) var(--ease-flat), color var(--dur-base) var(--ease-flat);
}
@media (max-width: 1100px) { :root { --gutter-page: 48px; } }
@media (max-width: 700px) {
	:root {
		--gutter-page: 16px;
		--type-display-1: 500 52px/1.0 var(--font-display);
		--type-display-2: 500 40px/1.05 var(--font-display);
		--type-display-3: var(--type-display-4);
		--section-y: 40px;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0; background: var(--white); color: var(--text-body);
	font: var(--type-body); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--space-4); top: var(--space-4); z-index: 20; background: var(--white); padding: var(--space-2) var(--space-3); }

.lbl {
	font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
	color: var(--text-muted);
}
.num { font-variant-numeric: tabular-nums; }

/* ── Top bar ─────────────────────────────────────── */
.top {
	position: sticky; top: 0; z-index: 10; background: var(--white);
	display: flex; align-items: center; gap: var(--space-5);
	padding: var(--space-4) var(--pad-x); min-height: 68px;
	border-bottom: 1px solid var(--muted);
}
.top__brand { display: flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.top__brand img { height: 22px; width: auto; display: block; }
.top__brand .lbl { color: var(--ink); }
.chip-demo {
	font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
	background: var(--muted); color: var(--text-muted); border-radius: var(--radius-pill);
	padding: 5px 10px;
}
.top__nav { margin-left: auto; display: flex; gap: var(--space-5); align-items: center; }
.top__nav a { white-space: nowrap; font: var(--type-body-sm); text-decoration: none; color: var(--text-muted); transition: var(--transition-tint); }
.top__nav a:hover { color: var(--text-interactive); }
.top__nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .top__nav .hide-sm { display: none; } }
@media (max-width: 520px) { .top__brand .lbl { display: none; } .top { gap: var(--space-3); } }

/* ── Bands ───────────────────────────────────────── */
.band { padding: calc(var(--section-y) * 2) var(--pad-x); }
.band--muted { background: var(--muted); }
.band--invert { background: var(--ink); color: var(--text-on-invert); }
.band--invert .lbl { color: var(--text-on-invert-muted); }
.fact .lbl { color: var(--text-muted) !important; }
.band--mint { background: var(--mint); }
.band--sage { background: var(--tint-sage); }
.band--mint .lbl, .band--sage .lbl { color: #3f464c; }
.band--tight { padding-top: var(--section-y); padding-bottom: var(--section-y); }

.head { max-width: var(--measure-display); margin-bottom: var(--stack-4); }
.head .lbl { display: block; margin-bottom: var(--stack-1); }
.head h2 { font: var(--type-display-3); letter-spacing: var(--tracking-display); }
.head p { margin-top: var(--stack-2); max-width: var(--measure-lead); color: var(--text-muted); }
.band--invert .head p { color: var(--text-on-invert-muted); }

/* ── Hero ────────────────────────────────────────── */
.hero { padding-top: var(--space-9); padding-bottom: var(--space-8); }
.hero .lbl { display: block; margin-bottom: var(--stack-2); }
.hero h1 { font: var(--type-display-2); letter-spacing: var(--tracking-display); max-width: 22ch; }
.hero__lead { margin-top: var(--stack-2); max-width: var(--measure-lead); font-size: 19px; color: var(--text-muted); }
.hero__lead strong { color: var(--ink); font-weight: 600; }

/* ── Facts (lime band) ───────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.fact { background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: var(--block-pad); display: flex; flex-direction: column; gap: var(--space-3); }
.fact__value { font: var(--type-display-4); letter-spacing: var(--tracking-display); }
.fact__text { font: var(--type-body-sm); color: var(--text-muted); }
.fact .src { margin-top: auto; }
@media (max-width: 1100px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* ── Source plate — every statement points at its clause ── */
.src {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	font: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
	color: var(--text-interactive); text-decoration: none;
	background: var(--muted); border-radius: var(--radius-tag); padding: 5px 8px;
	transition: var(--transition-tint);
}
.src:hover { background: var(--accent-ink); color: var(--white); }
.band--muted .src, .measure-group .src { background: var(--white); }
.srcs { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Contents ────────────────────────────────────── */
.toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); }
.toc a { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; text-decoration: none; border-top: var(--rule-hard); transition: var(--transition-tint); }
.toc a:hover { color: var(--text-interactive); }
.toc .lbl { min-width: 2.2em; }
@media (max-width: 1100px) { .toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .toc { grid-template-columns: 1fr; } }

/* ── Ledger: key · statement · source ───────────── */
.ledger { margin: 0; padding: 0; list-style: none; }
.ledger > li {
	display: grid; grid-template-columns: var(--title-col) minmax(0, var(--measure-lead)) auto;
	gap: var(--space-3) var(--space-6); align-items: baseline;
	padding: var(--space-5) 0; border-top: var(--rule-hard);
}
.ledger > li:last-child { border-bottom: var(--rule-hard); }
.ledger__key { font: var(--type-subhead); }
.ledger__val { color: var(--text-body); }
.ledger__val .muted { color: var(--text-muted); }
.ledger .srcs { justify-content: flex-end; }
@media (max-width: 900px) {
	.ledger > li { grid-template-columns: 1fr; gap: var(--space-2); }
	.ledger .srcs { justify-content: flex-start; }
}

/* ── Levels ladder ───────────────────────────────── */
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.level {
	display: grid; grid-template-columns: 56px minmax(0, 15rem) minmax(0, 1fr) minmax(0, 18rem);
	gap: var(--space-3) var(--space-5); align-items: start;
	background: var(--white); border-radius: var(--radius-lg); padding: var(--space-5) var(--block-pad);
}
.level__step { font: var(--type-data); color: var(--text-muted); padding-top: 4px; }
.level__name { font: var(--type-heading); }
.level__name .tag { display: inline-block; margin-top: var(--space-2); }
.level__desc { color: var(--text-muted); font: var(--type-body-sm); padding-top: 3px; }
.level__who { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: var(--type-body-sm); padding-top: 3px; }
.level__who li { display: flex; gap: var(--space-2); }
.level__who li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--ink); }
.level__who b { font-weight: 600; }
.level--default { box-shadow: inset 0 0 0 2px var(--ink); }
.level--outside { background: transparent; border: var(--rule-dashed); }
.level--outside .level__who li::before { background: transparent; border: 1.5px dashed var(--ink-soft); }
.tag {
	display: inline-block; line-height: 1.5;
	font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
	border-radius: var(--radius-pill); padding: 4px 9px; background: var(--ink); color: var(--white);
}
.tag--line { white-space: nowrap; background: transparent; box-shadow: inset 0 0 0 1px var(--border-hard); color: var(--text-muted); }
.levels-note { margin-top: var(--stack-2); display: flex; gap: var(--space-5); flex-wrap: wrap; font: var(--type-body-sm); color: var(--text-muted); }
.levels-note span { display: inline-flex; gap: var(--space-2); align-items: center; }
.levels-note i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; background: var(--white); }
.levels-note i.dash { background: transparent; border: 1.5px dashed var(--ink-soft); }
@media (max-width: 1000px) {
	.level { grid-template-columns: 40px minmax(0, 1fr); }
	.level__desc, .level__who { grid-column: 2; }
}

/* ── Lists of measures ───────────────────────────── */
.measures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.measure-group { background: var(--muted); border-radius: var(--radius-lg); padding: var(--block-pad); }
.measure-group h3 { font: var(--type-heading); margin-bottom: var(--space-4); }
.measure-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.measure-group li { display: grid; gap: var(--space-2); }
@media (max-width: 1100px) { .measures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .measures { grid-template-columns: minmax(0, 1fr); } }
.sub-h { font: var(--type-heading); margin-bottom: var(--space-4); }
#verfuegbarkeit .table-wrap { max-width: 40rem; }
.after { margin-top: var(--stack-3); }

/* ── Tables ──────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); background: var(--white); }
.band--muted .table-wrap { background: var(--white); }
table { border-collapse: collapse; width: 100%; font: var(--type-body-sm); }
th, td { text-align: left; vertical-align: top; padding: var(--space-4) var(--space-5); }
th { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
tbody tr { border-top: var(--rule-hard); }
td b { font-weight: 600; }
.status { font: var(--type-label); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.status--cond::before { background: transparent; border: 1.5px dashed var(--ink-soft); }
.table-note { margin-top: var(--stack-2); max-width: var(--measure-lead); font: var(--type-body-sm); color: var(--text-muted); }
.subproc td:first-child { min-width: 15rem; }

/* ── Document cards ──────────────────────────────── */
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.doc {
	display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none;
	background: var(--white); border-radius: var(--radius-lg); padding: var(--block-pad);
	box-shadow: var(--shadow-lift); transition: box-shadow var(--dur-base) var(--ease-flat);
}
a.doc:hover { box-shadow: var(--shadow-lift), inset 0 0 0 1.5px var(--accent); }
.doc h3 { font: var(--type-heading); }
.doc p { font: var(--type-body-sm); color: var(--text-muted); }
.doc .doc__meta { margin-top: auto; padding-top: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; }
.doc .arrow { color: var(--text-interactive); font: var(--type-cta); letter-spacing: var(--tracking-cta); text-transform: uppercase; }
.doc--plain { background: transparent; box-shadow: none; border: var(--rule-hard); }
@media (max-width: 1100px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .docs { grid-template-columns: 1fr; } }

/* ── Availability numbers ────────────────────────── */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.figure { display: flex; flex-direction: column; gap: var(--space-3); border-top: 2px solid var(--ink); padding-top: var(--space-5); }
.figure__value { font: var(--type-display-2); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.figure__text { color: var(--text-muted); max-width: 22rem; }
@media (max-width: 900px) { .figures { grid-template-columns: 1fr; } .figure__value { font: var(--type-display-3); } }

/* ── Contact (ink band) ──────────────────────────── */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); }
.contact > div { border-top: 1px solid rgb(17 18 19 / 0.16); padding-top: var(--space-5); display: grid; gap: var(--space-2); }
.contact a { color: var(--ink); text-underline-offset: var(--underline-offset); }
.contact a:hover { color: var(--accent-ink); }
.contact p { color: #3f464c; }
.contact .who { color: var(--ink); font: var(--type-subhead); }
.band--sage .src, .band--mint .src { background: var(--white); }
@media (max-width: 760px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.contact > div > * { min-width: 0; overflow-wrap: anywhere; }

.btn {
	display: inline-flex; align-items: center; gap: var(--space-3);
	font: var(--type-cta); letter-spacing: var(--tracking-cta); text-transform: uppercase;
	background: var(--accent-ink); color: var(--white); text-decoration: none; border: 0; cursor: pointer;
	border-radius: var(--radius-button); padding: 15px 20px; transition: var(--transition-tint);
}
.btn:hover { background: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgb(17 18 19 / 0.45); }
.btn--ghost:hover { background: var(--muted); color: var(--ink); }
.band--invert .btn:focus-visible { outline-color: var(--white); }
.cta-row { margin-top: var(--stack-4); display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* ── Footer ──────────────────────────────────────── */
.foot { background: var(--ink); color: var(--text-on-invert-muted); padding: var(--space-7) var(--pad-x) var(--space-8); border-top: 1px solid var(--border-on-ink); font: var(--type-body-sm); }
.foot__row { display: flex; gap: var(--space-5) var(--space-7); flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.foot img { height: 20px; width: auto; display: block; margin-bottom: var(--space-4); }
.foot nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.foot a { color: var(--text-on-invert); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }

/* ── Document pages ──────────────────────────────── */
.doc-head { padding-top: var(--space-8); padding-bottom: var(--space-7); }
.crumbs { font: var(--type-body-sm); color: var(--text-muted); margin-bottom: var(--stack-2); }
.crumbs a { color: var(--text-interactive); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.doc-head h1 { font: var(--type-display-2); letter-spacing: var(--tracking-display); max-width: 20ch; }
.doc-head__sub { margin-top: var(--stack-2); color: var(--text-muted); max-width: var(--measure-lead); }
.doc-meta { margin-top: var(--stack-3); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.doc-meta .pill { font: var(--type-data); background: var(--muted); border-radius: var(--radius-pill); padding: 6px 12px; font-variant-numeric: tabular-nums; }
.doc-meta .btn { padding: 10px 14px; }

.doc-layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-8); padding: var(--space-7) var(--pad-x) var(--space-9); }
.doc-toc { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; }
.doc-toc .lbl { display: block; margin-bottom: var(--space-3); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-toc a { display: block; font: var(--type-body-sm); padding: 5px 0; text-decoration: none; color: var(--text-muted); transition: var(--transition-tint); }
.doc-toc a:hover { color: var(--text-interactive); }
.doc-toc li.sep { margin-top: var(--space-3); }
@media (max-width: 960px) {
	.doc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.doc-toc { position: static; max-height: none; background: var(--muted); border-radius: var(--radius-lg); padding: var(--space-5); }
	.doc-toc details > summary { cursor: pointer; }
}
.doc-toc summary { list-style: none; }
.doc-toc summary::-webkit-details-marker { display: none; }

.prose { max-width: 46rem; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font: var(--type-heading); margin-top: var(--stack-4); scroll-margin-top: 96px; }
.prose h2.part { font: var(--type-display-3); letter-spacing: var(--tracking-display); margin-top: var(--space-9); padding-top: var(--space-7); border-top: 2px solid var(--ink); }
.prose h3 { font: var(--type-subhead); margin-top: var(--stack-3); }
.prose p, .prose li { max-width: var(--measure-lead); overflow-wrap: break-word; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose hr { border: 0; border-top: var(--rule-hard); margin: var(--stack-4) 0; }
.prose a { color: var(--text-interactive); text-decoration-thickness: 1px; text-underline-offset: var(--underline-offset); }
.prose a:hover { color: var(--accent-deep); }
.prose a.ref { text-decoration-style: dotted; }
.prose code { font: var(--type-data); background: var(--muted); border-radius: 6px; padding: 1px 5px; }
.prose .table-wrap { max-width: none; background: var(--muted); }
.prose table { min-width: 40rem; }
.prose .clause { position: relative; scroll-margin-top: 96px; }
.prose .clause-no { font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.prose .clause-no:hover { color: var(--text-interactive); }
.prose .clause:target, .prose h2:target { background: linear-gradient(var(--accent), var(--accent)) 0 0 / 3px 100% no-repeat; padding-left: var(--space-4); margin-left: calc(var(--space-4) * -1 - 4px); }
.prose .parties { color: var(--text-muted); }
.prose .parties > * + * { margin-top: var(--space-4); }
.prose .parties strong { color: var(--ink); }
@media (max-width: 960px) { .prose .clause:target, .prose h2:target { margin-left: 0; } }

@media print {
	.top, .foot, .doc-toc, .doc-meta .btn, .skip { display: none !important; }
	.doc-layout { display: block; padding: 0; }
	.doc-head { padding: 0 0 24px; }
	body { font-size: 11pt; }
	.prose a { color: inherit; text-decoration: none; }
	.prose { max-width: none; }
	.prose h2.part { break-before: page; }
}

.fact .src { background: var(--muted); }
.contact a.src { color: var(--text-interactive); }
.contact a.src:hover { color: var(--white); }
.foot { background: var(--muted); color: var(--text-muted); border-top: 0; }
.foot a { color: var(--ink); }