/* Bericht – gemeinsame Gestaltung für Web-Ansicht und PDF (WeasyPrint). */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-400-normal.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-600-normal.woff2") format("woff2"); font-weight: 600; }

:root {
  color-scheme: light;
  --ink: #1b2142; --ink-soft: #2f3765; --pencil: #5d6377; --rule: #d9dde6;
  --paper: #f4f6f9; --surface: #ffffff; --marker: #ffe14d; --marker-soft: #fff4ad;
  --note: #3d43c4; --note-wash: #e9ebfb; --ok: #1f7a4d; --danger: #b42318; --danger-wash: #fdeceb;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --text: "Literata", Georgia, serif;
  --emoji: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji";
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body.report { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.62; }
a { color: var(--note); }
:focus-visible { outline: 3px solid var(--note); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 .5em; }
h2 { font-size: 1.85rem; font-weight: 800; letter-spacing: -0.03em; margin-top: 0; }
h3 { font-size: 1.2rem; font-weight: 700; margin-top: 1.6em; }
h4 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 .9em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .35em; }
.muted { color: var(--pencil); }
.small { font-size: .88em; }
.ui { font-family: var(--display); }
@media screen { svg.chart { max-width: 100%; height: auto; } }

/* Werkzeugleiste (nur Web) */
.toolbar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 90%, white); border-bottom: 1px solid var(--rule); backdrop-filter: blur(6px); }
.toolbar .inner { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-family: var(--display); }
.toolbar .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.1rem; color: var(--ink); text-decoration: none; letter-spacing: -0.03em; margin-right: auto; }
.toolbar .brand svg { width: 26px; height: 26px; }
.tbtn { display: inline-flex; align-items: center; gap: 8px; font: 600 .95rem/1 var(--display); padding: 11px 15px; border-radius: 10px; border: 1.5px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; cursor: pointer; }
.tbtn.secondary { background: transparent; color: var(--ink); }
.tbtn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.sample-banner { background: var(--marker-soft); font-family: var(--display); text-align: center; padding: 9px 16px; font-size: .95rem; }

.report-layout { max-width: 1180px; margin: 0 auto; padding: 36px 24px 80px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
.toc-side { position: sticky; top: 84px; align-self: start; font-family: var(--display); font-size: .92rem; }
.toc-side ol { list-style: none; padding: 0; margin: 0; counter-reset: t; }
.toc-side li { counter-increment: t; margin: 0; }
.toc-side a { display: grid; grid-template-columns: 26px 1fr; padding: 6px 0; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule); }
.toc-side a::before { content: counter(t); color: var(--pencil); font-weight: 600; }
.toc-side a:hover { color: var(--note); }
@media (max-width: 980px) { .report-layout { grid-template-columns: minmax(0, 1fr); padding: 16px 12px 60px; } .toc-side { display: none; } }
.doc { min-width: 0; }
.table-scroll { overflow-x: auto; position: relative; }
@media screen and (max-width: 640px) { table.data { display: block; overflow-x: auto; } .doc { padding: 20px 16px; } }
.doc { max-width: 780px; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(24px, 5vw, 64px); box-shadow: 0 30px 60px -48px rgba(27,33,66,.45); }
.doc > section { padding-top: 48px; margin-top: 48px; border-top: 1.5px solid var(--ink); scroll-margin-top: 80px; }

/* Deckblatt */
.cover .brandline { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; font-size: 1.05rem; margin-bottom: 48px; }
.cover .brandline svg { width: 30px; height: 30px; }
.cover .kind { font-family: var(--display); font-size: 1rem; color: var(--pencil); margin-bottom: 10px; }
.cover h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin-bottom: 28px; max-width: 18ch; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 30px; font-family: var(--display); font-size: .97rem; }
.facts dt { color: var(--pencil); }
.facts dd { margin: 0; }
.person-tag { display: inline-block; margin-right: 16px; white-space: nowrap; }
.person-tag .dot { margin-right: 6px; vertical-align: 0; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ai-note { font-family: var(--display); font-size: .88rem; color: var(--ink-soft); background: var(--note-wash); border-radius: 10px; padding: 12px 16px; }
.confidential { font-family: var(--display); font-size: .85rem; color: var(--pencil); margin-top: 12px; }

/* Abschnittsnummer mit Textmarker */
.secnum { margin-right: .35em; font-family: var(--display); font-weight: 800; font-size: .95em; padding: 0 .18em; background-image: linear-gradient(transparent 55%, var(--marker) 55%, var(--marker) 95%, transparent 95%); }

/* Auf einen Blick */
.climate { margin: 8px 0 26px; padding: 22px 24px; background: var(--paper); border-radius: 12px; }
.climate-top { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.climate .score { font-family: var(--display); font-weight: 800; font-size: 3.4rem; letter-spacing: -0.04em; line-height: 1; }
.climate .score small { font-size: .38em; font-weight: 600; color: var(--pencil); letter-spacing: 0; }
.climate .label { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.climate p { margin: 12px 0 0; }
.findings { list-style: none; padding: 0; margin: 0 0 24px; }
.findings li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--rule); margin: 0; }
.findings li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 12px; height: 7px; background: var(--marker); border-radius: 2px; }

/* Zahlen */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin: 0 0 30px; font-family: var(--display); }
.kpis div { padding: 12px 12px 4px 0; }
.kpis b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.kpis span { font-size: .84rem; color: var(--pencil); line-height: 1.3; display: block; }
@media (max-width: 640px) { .kpis { grid-template-columns: 1fr 1fr; } }
figure { margin: 0 0 30px; }
figcaption { font-family: var(--display); font-size: .86rem; color: var(--pencil); margin-top: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--display); font-size: .86rem; color: var(--ink-soft); margin-top: 8px; }
.lg-item { display: inline-block; white-space: nowrap; }
.lg-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.chart { display: block; }
table.data { width: 100%; border-collapse: collapse; font-family: var(--display); font-size: .9rem; margin: 6px 0 26px; }
table.data th, table.data td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
table.data th { font-weight: 500; color: var(--pencil); font-size: .82rem; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.compare td.bar { width: 190px; }
.emoji { font-family: var(--emoji); }

/* Dimensionen */
.dim { padding: 18px 0 8px; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.dim-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--display); }
.dim-head h3 { margin: 0; font-size: 1.1rem; flex: 1 1 auto; min-width: 0; }
.dim-head .val { font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.dim-head .val small { color: var(--pencil); font-weight: 600; font-size: .75em; }
.dim .meter { display: block; margin-top: 6px; line-height: 0; }
.dim p { margin-top: 10px; }

/* Belegstellen */
.ev { margin: 10px 0 14px; padding: 10px 14px 10px 16px; border-left: 3px solid var(--marker); background: #fffdf2; border-radius: 0 8px 8px 0; break-inside: avoid; }
.ev p { margin: 0; font-size: .97em; }
.ev footer { font-family: var(--display); font-size: .8rem; color: var(--pencil); margin-top: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ev footer em { font-family: var(--text); color: var(--ink-soft); }

/* Profile, Muster, Konflikte */
.profile { padding: 18px 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.profile h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.profile .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.profile .cols h4 { font-size: .85rem; color: var(--pencil); font-weight: 600; margin-bottom: 4px; }
.profile .cols ul { margin: 0; padding-left: 1.1em; font-size: .95em; }
@media (max-width: 640px) { .profile .cols { grid-template-columns: 1fr; } }
.pattern, .conflict, .rec, .guide { padding: 20px 0 10px; border-bottom: 1px solid var(--rule); }
.pattern h3, .conflict h3, .rec h3, .guide h3 { margin: 0 0 6px; }
.freq { display: inline-block; font-family: var(--display); font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--note-wash); color: var(--note); margin-left: 8px; vertical-align: 2px; }
.effect { font-family: var(--display); font-size: .93rem; color: var(--ink-soft); }
.effect b { color: var(--ink); }
.dynamics { background: var(--paper); border-radius: 12px; padding: 18px 22px; margin-top: 24px; }
.conflict dl { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px 14px; margin: 8px 0; }
.conflict dt { font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--pencil); }
.conflict dd { margin: 0; }
.phases { list-style: none; padding: 0; margin: 10px 0 0; }
.phases li { display: grid; grid-template-columns: 9em 1fr auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); margin: 0; break-inside: avoid; }
.phases .when { font-family: var(--display); color: var(--pencil); font-size: .9rem; }
.phases b { font-family: var(--display); display: block; }
.phases .sc { font-family: var(--display); font-weight: 800; }
@media (max-width: 640px) { .phases li { grid-template-columns: 1fr auto; } .phases .when { grid-column: 1 / -1; } }
.two-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.two-lists h3 { margin-top: 0; }
@media (max-width: 640px) { .two-lists { grid-template-columns: 1fr; } }
.question { font-family: var(--display); font-weight: 600; font-size: 1.1rem; border-left: 3px solid var(--note); padding-left: 14px; margin-bottom: 18px; }

/* Empfehlungen & Leitfäden: Formulierungen als Nachricht */
.rec .for { font-family: var(--display); font-size: .85rem; color: var(--pencil); }
.rec ol { margin: 8px 0 10px; }
.say { display: table; max-width: 88%; margin: 10px 0 6px auto; background: var(--note-wash); border-radius: 18px 18px 6px 18px; padding: 10px 15px; font-family: var(--display); font-size: .97rem; line-height: 1.45; break-inside: avoid; }
.say-label { display: block; text-align: right; font-family: var(--display); font-size: .76rem; color: var(--pencil); }
.guide dl { margin: 8px 0; }
.guide dt { font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--pencil); margin-top: 10px; }
.guide dd { margin: 2px 0 0; }
.guide .avoid li { color: var(--ink-soft); }
table.plan td:first-child { font-weight: 700; white-space: nowrap; }
table.plan ul { margin: 0; padding-left: 1.1em; }

/* Sicherheit & Hinweise */
.safety { border-radius: 12px; padding: 20px 22px; margin: 0 0 28px; background: var(--marker-soft); break-inside: avoid; }
.safety.ernst { background: var(--danger-wash); border-left: 4px solid var(--danger); }
.safety h3 { margin-top: 0; }
.hotlines { list-style: none; padding: 0; margin: 10px 0 0; font-family: var(--display); font-size: .93rem; }
.hotlines li { margin-bottom: 4px; }
.method { font-size: .95em; }
.cta-box { margin-top: 24px; padding: 18px 22px; border: 1.5px solid var(--ink); border-radius: 12px; }

/* ---------- PDF ---------- */
body.pdf { background: #fff; font-size: 10.4pt; line-height: 1.55; }
body.pdf .report-layout { display: block; max-width: none; padding: 0; margin: 0; }
body.pdf .doc { max-width: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
body.pdf .doc > section { padding-top: 0; margin-top: 26pt; border-top: 0; }
body.pdf .doc > section.newpage { break-before: page; margin-top: 0; }
body.pdf h2 { font-size: 20pt; border-bottom: 1.2pt solid var(--ink); padding-bottom: 6pt; margin-bottom: 14pt; break-after: avoid; }
body.pdf h3, body.pdf h4 { break-after: avoid; }
body.pdf .cover { page: cover; height: 245mm; display: flex; flex-direction: column; }
body.pdf .cover .spacer { flex: 1; }
body.pdf .cover h1 { font-size: 30pt; }
body.pdf .toc { break-before: page; }
body.pdf .toc h2 { border: 0; }
body.pdf .toc ol { list-style: none; padding: 0; font-family: var(--display); font-size: 11pt; }
body.pdf .toc li { border-bottom: .6pt solid var(--rule); padding: 7pt 0; margin: 0; }
body.pdf .toc a { color: var(--ink); text-decoration: none; display: block; }
body.pdf .toc a::after { content: leader(".") target-counter(attr(href), page); font-weight: 700; color: var(--pencil); }
body.pdf .kpis b { font-size: 16pt; }
body.pdf .climate .score { font-size: 30pt; }
body.pdf figure, body.pdf .dim, body.pdf .profile, body.pdf .phases li, body.pdf .ev, body.pdf .conflict, body.pdf table.data tr { break-inside: avoid; }
body.pdf .pattern, body.pdf .rec, body.pdf .guide { break-inside: auto; }
body.pdf a { color: var(--ink); text-decoration: none; }
body.pdf .ai-note { background: #eef0fb; }