/* Tokens nach docs/design-dna.md, Abschnitt 3. Diese Datei ist die einzige Stelle mit festen Werten. */
:root {
  /* Flächen */
  --surface-page: #f7f6f2;
  --surface-raised: #ffffff;
  --surface-sunken: #efeee9;
  --surface-band: #dedbd4;
  --surface-inverse: #1a1b19;

  /* Text */
  --text-primary: #171817;
  --text-muted: #6d6d68;
  --text-on-inverse: #f4f2ec;
  --text-muted-on-inverse: #aaa9a3;
  --text-on-accent: #ffffff;

  /* Akzent */
  --accent: #ef6a24;        /* nur Flächen, Linien, Zahlen ab 24px */
  --accent-text: #b34a10;   /* lesbarer Akzent und Füllung des Haupt-Buttons */
  --accent-hover: #8f3608;

  /* Status */
  --signal-red: #c94d3a;    /* Fehler. Nur Linien, Symbole, Text ab 24px */
  --signal-yellow: #e5b528; /* Hinweis. Nur Fläche, Text darauf in --text-primary */

  /* Linien */
  --hairline: #1718171f;
  --hairline-strong: #17181766;
  --hairline-inverse: #ffffff5c;

  /* Schrift */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-text: Inter, system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, monospace;

  /* Abstände */
  --space-1: 7px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 28px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 72px;
  --space-9: 112px;

  /* Layout */
  --container-max: 1220px;
  --gutter: 64px;
  --control-height: 46px;
  --control-height-lg: 52px;
  --cell-min-height: 225px;
  --measure-title: 690px;
  --measure-body: 530px;

  --transition: 160ms ease;
}

@media (max-width: 900px) { :root { --gutter: 40px; --space-9: 86px; } }
@media (max-width: 600px) { :root { --gutter: 32px; --space-9: 74px; } }

/* Schriftstile nach docs/design-dna.md, Abschnitt 4. Je Stil: Größe, Zeilenhöhe, Gewicht, Tracking. */
:root {
  --display-xl-size: clamp(47px, 5.4vw, 76px); --display-xl-line: 0.98; --display-xl-weight: 600; --display-xl-track: -0.05em;
  --display-lg-size: clamp(42px, 4.8vw, 68px); --display-lg-line: 1.02; --display-lg-weight: 600; --display-lg-track: -0.045em;
  --display-md-size: clamp(32px, 3.8vw, 54px); --display-md-line: 1.06; --display-md-weight: 600; --display-md-track: -0.04em;
  --display-sm-size: clamp(28px, 3vw, 42px);   --display-sm-line: 1.08; --display-sm-weight: 550; --display-sm-track: -0.04em;
  --heading-size: 25px;    --heading-line: 1.15;    --heading-weight: 550;    --heading-track: -0.04em;
  --heading-sm-size: 18px; --heading-sm-line: 1.15; --heading-sm-weight: 600; --heading-sm-track: -0.025em;
  --eyebrow-size: 11px;    --eyebrow-line: 1;       --eyebrow-weight: 700;    --eyebrow-track: 0.13em;
  --lead-size: clamp(22px, 2.4vw, 30px); --lead-line: 1.25; --lead-weight: 500; --lead-track: -0.02em;
  --body-size: 16px;    --body-line: 1.85;    --body-weight: 400;
  --body-sm-size: 14px; --body-sm-line: 1.75; --body-sm-weight: 400;
  --ui-size: 15px;      --ui-line: 1.3;       --ui-weight: 650;
  --ui-sm-size: 13px;   --ui-sm-line: 1.2;    --ui-sm-weight: 720;
  --label-size: 12px;   --label-line: 1.4;    --label-weight: 500;
  --count-size: 24px;   /* Zähler der Schritt-Liste, Abschnitt 7 */
  --icon-size: 18px;    /* Symbole, Abschnitt 7 */

  /* Die zwei Ausnahmen von "eckig", Abschnitt 7: Ergebnis des Checks und Status-Punkte. */
  --radius-result: 8px;
  --radius-dot: 50%;
}

/* Bausteine nach docs/design-dna.md. Alle Werte kommen aus tokens.css. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-v1.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/static/fonts/inter-v1.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--body-weight);
}
.wrap { width: min(var(--container-max), 100% - var(--gutter)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; hyphens: auto; overflow-wrap: break-word; }
p, ul, ol { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Schriftstile */
.display-xl { font-size: var(--display-xl-size); line-height: var(--display-xl-line); font-weight: var(--display-xl-weight); letter-spacing: var(--display-xl-track); }
.display-lg { font-size: var(--display-lg-size); line-height: var(--display-lg-line); font-weight: var(--display-lg-weight); letter-spacing: var(--display-lg-track); }
.display-md { font-size: var(--display-md-size); line-height: var(--display-md-line); font-weight: var(--display-md-weight); letter-spacing: var(--display-md-track); text-wrap: balance; }
.display-sm { font-family: var(--font-display); font-size: var(--display-sm-size); line-height: var(--display-sm-line); font-weight: var(--display-sm-weight); letter-spacing: var(--display-sm-track); }
.heading { font-family: var(--font-display); font-size: var(--heading-size); line-height: var(--heading-line); font-weight: var(--heading-weight); letter-spacing: var(--heading-track); }
.heading-sm { font-family: var(--font-display); font-size: var(--heading-sm-size); line-height: var(--heading-sm-line); font-weight: var(--heading-sm-weight); letter-spacing: var(--heading-sm-track); }
.eyebrow { font-family: var(--font-display); font-size: var(--eyebrow-size); line-height: var(--eyebrow-line); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--space-3); }
.lead { font-size: var(--lead-size); line-height: var(--lead-line); font-weight: var(--lead-weight); letter-spacing: var(--lead-track); max-width: var(--measure-title); }
.sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.muted { color: var(--text-muted); }
.meta { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-muted); margin-top: var(--space-3); }

/* Links im Text: interne mit Pfeil nach rechts, externe mit Pfeil nach oben rechts */
a { color: var(--text-primary); transition: color var(--transition); overflow-wrap: anywhere; }
a:hover { color: var(--accent-text); }
.arrow a::after, a.arrow::after { content: " \2192"; }
.arrow a[href^="http"]::after, a.arrow[href^="http"]::after { content: " \2197"; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--space-4);
  font-family: var(--font-text); font-size: var(--ui-sm-size); line-height: var(--ui-sm-line); font-weight: var(--ui-sm-weight);
  text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent-text); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--hairline-strong); }
.btn-secondary:hover { border-color: var(--text-primary); color: var(--text-primary); }
.btn[disabled] { cursor: default; background: var(--surface-band); color: var(--text-primary); transform: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); }

/* Kopfzeile */
.site-head { border-bottom: 1px solid var(--hairline); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-weight: var(--heading-sm-weight); font-size: var(--heading-sm-size); letter-spacing: var(--heading-sm-track); text-decoration: none; color: var(--text-primary); }
.brand span { color: var(--accent-text); }
.nav { display: flex; gap: var(--space-1) var(--space-4); align-items: center; flex-wrap: wrap; font-size: var(--ui-size); line-height: var(--ui-line); font-weight: var(--ui-weight); }
.nav a { text-decoration: none; }

/* Brotkrumen */
.crumbs { padding-top: var(--space-4); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); padding: 0; font-size: var(--label-size); line-height: var(--label-line); font-weight: var(--label-weight); color: var(--text-muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); }
.crumbs a { color: var(--text-muted); }

/* Abschnitte */
.section { padding-block: var(--space-9); }
.section + .section { padding-top: 0; }
.hero { padding-block: var(--space-8) var(--space-9); }
.hero h1 { max-width: 16em; }
.hero .lead { margin-top: var(--space-5); }
.hero + .section { padding-top: 0; }
.section + .inverse, .hero + .inverse { padding-top: var(--space-9); }

/* Abschnittskopf */
.sec-head { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: var(--space-8); align-items: end; margin-bottom: var(--space-7); }
.sec-head > div { min-width: 0; }
.sec-head h2 { max-width: var(--measure-title); }
.sec-head > p { max-width: var(--measure-body); margin-left: auto; color: var(--text-muted); }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; gap: var(--space-4); } .sec-head > p { margin-left: 0; } }

/* Haarlinien-Raster */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); list-style: none; padding: 0; }
.cell { min-width: 0; min-height: var(--cell-min-height); padding: var(--space-4) var(--space-4) var(--space-4) 0; border-bottom: 1px solid var(--hairline); }
.cell:not(:nth-child(3n+1)) { border-left: 1px solid var(--hairline); padding-left: var(--space-4); }
.cell h3 { margin-bottom: var(--space-2); }
.cell p + p, .cell ul + p { margin-top: var(--space-2); }
.cell a { font-weight: var(--ui-weight); font-size: var(--body-sm-size); }
.grid.low .cell { min-height: 0; }
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .cell:not(:nth-child(3n+1)) { border-left: 0; padding-left: 0; }
  .cell:nth-child(2n) { border-left: 1px solid var(--hairline); padding-left: var(--space-4); }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .cell, .cell:nth-child(2n) { min-height: 0; border-left: 0; padding-left: 0; }
}

/* Liste mit Haarlinien */
.lines { list-style: none; padding: 0; border-top: 1px solid var(--hairline); }
.lines li { overflow-wrap: anywhere; padding-block: var(--space-2); border-bottom: 1px solid var(--hairline); font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.cell .lines { border-top: 0; }
.cell .lines li:last-child { border-bottom: 0; }

/* Schritt-Liste */
.steps { border-top: 1px solid var(--hairline); list-style: none; padding: 0; }
.step { display: grid; grid-template-columns: var(--space-8) 1fr; gap: var(--space-4); padding-block: var(--space-4); border-bottom: 1px solid var(--hairline); }
.step > div { min-width: 0; }
.step h3 { margin-bottom: var(--space-1); }
.count { font-family: var(--font-display); font-weight: var(--display-md-weight); font-size: var(--count-size); color: var(--accent); line-height: var(--heading-line); }
@media (max-width: 600px) { .step { grid-template-columns: var(--space-6) 1fr; gap: var(--space-2); } }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.cols > * { min-width: 0; }
.cols h3 { margin-bottom: var(--space-4); }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Felder */
.field { margin-bottom: var(--space-3); border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.field label, .field legend { display: block; padding: 0; font-size: var(--label-size); font-weight: var(--label-weight); line-height: var(--label-line); margin-bottom: var(--space-1); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea {
  display: block; width: 100%; height: var(--control-height); padding: 0 var(--space-2);
  background: var(--surface-page); border: 1px solid var(--hairline-strong); border-radius: 0;
  font-family: var(--font-text); font-size: var(--body-size); font-weight: var(--body-weight); color: var(--text-primary);
  transition: border-color var(--transition);
}
.field textarea { height: auto; min-height: var(--space-9); padding-block: var(--space-2); line-height: var(--body-sm-line); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-color: var(--accent); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--signal-red); }
.field .choice, .choice { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--body-sm-size); line-height: var(--body-sm-line); font-weight: var(--body-sm-weight); margin-bottom: var(--space-1); }
.choice input { accent-color: var(--accent-text); flex: none; }
.field-error { font-size: var(--body-sm-size); line-height: var(--body-sm-line); margin-top: var(--space-1); }
.field-error::before { content: "!"; color: var(--signal-red); font-weight: var(--eyebrow-weight); margin-right: var(--space-1); }
.notice { background: var(--signal-yellow); color: var(--text-primary); padding: var(--space-2) var(--space-3); font-size: var(--body-sm-size); line-height: var(--body-sm-line); margin-bottom: var(--space-4); }
.form { max-width: var(--measure-body); }
.actions + .form { margin-top: var(--space-5); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Prozess-Check */
.check { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.check > * { min-width: 0; }
@media (max-width: 900px) { .check { grid-template-columns: 1fr; gap: var(--space-6); } }
.check .eyebrow { margin-bottom: var(--space-2); }
.check-nav { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.result { background: var(--surface-raised); border: var(--space-2) solid var(--surface-sunken); border-radius: var(--radius-result); box-shadow: 0 0 0 1px var(--hairline); padding: var(--space-5); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--hairline); }
.kpi { min-width: 0; padding-bottom: var(--space-4); }
.kpi + .kpi { border-left: 1px solid var(--hairline); padding-left: var(--space-4); }
.kpi .display-sm { color: var(--accent); font-variant-numeric: tabular-nums; }
.formula { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-muted); padding-block: var(--space-3); }
.result .field input.rate { display: inline-block; width: var(--space-9); }
.result .form { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.result .field input, .result .field textarea { background: var(--surface-raised); }

/* Tabelle */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
th { font-size: var(--label-size); font-weight: var(--label-weight); line-height: var(--label-line); color: var(--text-muted); text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--hairline-strong); }
td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--hairline); vertical-align: top; overflow-wrap: anywhere; }
tbody th { border-bottom: 1px solid var(--hairline); width: 30%; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
.scroll.wide table { min-width: 40em; }

/* Akkordeon */
details { border-bottom: 1px solid var(--hairline); }
details:first-of-type { border-top: 1px solid var(--hairline); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); font-size: var(--ui-size); line-height: var(--ui-line); font-weight: var(--ui-weight); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--font-display); font-size: var(--count-size); line-height: 0.9; color: var(--accent); }
details[open] summary::after { content: "\2212"; }
details p { font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-muted); max-width: var(--measure-title); padding-bottom: var(--space-3); }

/* Fließtext handgeschriebener Seiten */
.prose { max-width: var(--measure-title); }
.prose > * + * { margin-top: var(--space-3); }
.prose h2 { font-size: var(--display-sm-size); line-height: var(--display-sm-line); font-weight: var(--display-sm-weight); letter-spacing: var(--display-sm-track); margin-top: var(--space-7); }
.prose h3 { font-size: var(--heading-size); line-height: var(--heading-line); font-weight: var(--heading-weight); letter-spacing: var(--heading-track); margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: var(--space-4); }

/* Invertiertes Band */
.inverse { background: var(--surface-inverse); color: var(--text-on-inverse); }
.inverse .eyebrow { color: var(--accent); }
.inverse h2 { max-width: var(--measure-title); }
.inverse p { color: var(--text-muted-on-inverse); max-width: var(--measure-body); margin-top: var(--space-4); }
.inverse .btn-primary { background: var(--accent); color: var(--surface-inverse); }
.inverse .btn-primary:hover { background: var(--accent); color: var(--surface-inverse); }
.inverse :focus-visible { outline-color: var(--text-on-inverse); }

/* Fußzeile */
.site-foot { border-top: 1px solid var(--hairline); }
.site-foot .wrap { display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; justify-content: space-between; padding-block: var(--space-5); font-size: var(--body-sm-size); line-height: var(--body-sm-line); color: var(--text-muted); }
.site-foot nav { display: flex; gap: var(--space-1) var(--space-4); flex-wrap: wrap; }
.site-foot a { color: var(--text-muted); }

/* Symbole */
.icon { width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: text-bottom; }

/* Status-Punkt (Verwaltung) */
.dot { display: inline-block; width: var(--space-1); height: var(--space-1); border-radius: var(--radius-dot); background: var(--text-muted); margin-right: var(--space-1); }
.dot.new { background: var(--accent); }
.dot.lost { background: var(--signal-red); }
.dot.won { background: var(--text-primary); }
.inline-form { display: flex; gap: var(--space-2); align-items: end; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }

/* Styleguide */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.sw { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--space-2); font-size: var(--label-size); line-height: var(--label-line); }
.sw i { display: block; height: var(--space-7); margin-bottom: var(--space-2); box-shadow: 0 0 0 1px var(--hairline); }
.sw code, code { font-family: var(--font-mono); font-size: var(--label-size); color: var(--text-muted); }
.type-row { display: grid; grid-template-columns: 10em 1fr; gap: var(--space-4); align-items: baseline; padding-block: var(--space-3); border-bottom: 1px solid var(--hairline); }
.type-row > * { min-width: 0; }
.type-row small { font-size: var(--label-size); color: var(--text-muted); line-height: var(--label-line); }
@media (max-width: 600px) { .type-row { grid-template-columns: 1fr; gap: var(--space-1); } }
.diagram { background: var(--surface-sunken); padding: var(--space-5); }
.diagram svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--text-primary); stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.diagram .on { stroke: var(--accent); }
.sw i[data-c="--surface-page"] { background: var(--surface-page); }
.sw i[data-c="--surface-raised"] { background: var(--surface-raised); }
.sw i[data-c="--surface-sunken"] { background: var(--surface-sunken); }
.sw i[data-c="--surface-band"] { background: var(--surface-band); }
.sw i[data-c="--surface-inverse"] { background: var(--surface-inverse); }
.sw i[data-c="--text-primary"] { background: var(--text-primary); }
.sw i[data-c="--text-muted"] { background: var(--text-muted); }
.sw i[data-c="--text-on-inverse"] { background: var(--text-on-inverse); }
.sw i[data-c="--text-muted-on-inverse"] { background: var(--text-muted-on-inverse); }
.sw i[data-c="--accent"] { background: var(--accent); }
.sw i[data-c="--accent-text"] { background: var(--accent-text); }
.sw i[data-c="--accent-hover"] { background: var(--accent-hover); }
.sw i[data-c="--signal-red"] { background: var(--signal-red); }
.sw i[data-c="--signal-yellow"] { background: var(--signal-yellow); }
.sw i[data-c="--hairline"] { background: var(--hairline); }
.sw i[data-c="--hairline-strong"] { background: var(--hairline-strong); }
.type-row [class^="display-"] { font-family: var(--font-display); }
.display-xl, .display-lg, .display-md, .display-sm, .heading, .heading-sm { hyphens: auto; overflow-wrap: break-word; }