@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-209C, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sand:       #F3EFE9;
  --sand-deep:  #E7E0D5;
  --sand-light: #FAF7F2;
  --sage:       #3D5F63;
  --sage-deep:  #0E2F33;
  --sage-light: #A7B3B1;
  --ink:        #0E1111;
  --ink-soft:   #2C3A3B;
  --ink-muted:  #6E7A79;
  --divider:    #DCD5C8;
  --warn:       #A8632B;
  --ok:         #3D6B4A;
  --radius:     2px;
  --radius-lg:  6px;
  --container:  880px;
  --font-sans:  "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow:     0 1px 2px rgba(14,17,17,.04), 0 8px 24px rgba(14,17,17,.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--sand); color: var(--ink);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 500; letter-spacing: -.015em; color: var(--ink); margin: 0 0 .6rem; }
p { margin: 0 0 1rem; }
a { color: var(--sage-deep); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--sage-deep); color: var(--sand); padding: .75rem 1.25rem; font-weight: 600; }
.skip-link:focus { left: 0; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2rem); }

header.top { background: var(--sand-light); border-bottom: 1px solid var(--divider); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; }
.brand { display: flex; align-items: center; gap: .7rem; font-weight: 600; letter-spacing: .02em; }
.brand img { height: 30px; width: auto; display: block; }
.brand-fallback { font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; color: var(--sage-deep); }
.top a.back { font-size: .85rem; color: var(--ink-muted); text-decoration: none; }
.top a.back:hover { color: var(--sage-deep); }

.intro { padding: clamp(1.75rem, 6vw, 4rem) 0 1.25rem; }
@media (max-width: 620px) { .intro .lead { font-size: .98rem; } .meta-row { gap: .3rem 1.1rem; font-size: .8rem; } .progress-wrap { margin: 1.25rem 0 .75rem; } }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: .6rem; }
.intro h1 { font-size: clamp(1.8rem, 4.5vw, 2.7rem); line-height: 1.12; margin-bottom: 1rem; }
.intro .lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 58ch; }
.meta-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .84rem; color: var(--ink-muted); }
.meta-row span::before { content: "· "; color: var(--sage-light); }

.card { background: var(--sand-light); border: 1px solid var(--divider); border-radius: var(--radius-lg); box-shadow: var(--shadow); }

/* ── Fortschritt ── */
.progress-wrap { margin: 2rem 0 1rem; }
.progress-meta { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-muted); margin-bottom: .45rem; letter-spacing: .02em; }
.progress-bar { height: 4px; background: var(--sand-deep); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--sage-deep); transition: width .3s ease; }

/* ── Fragen ── */
.q { padding: clamp(1.5rem, 4vw, 2.25rem); }
.q fieldset { border: none; margin: 0; padding: 0; }
.q legend { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; padding: 0; margin-bottom: .35rem; }
.q .hint { font-size: .88rem; color: var(--ink-muted); margin: 0 0 1.35rem; max-width: 56ch; }
.opts { display: grid; gap: .55rem; }
.opt {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .85rem 1rem; border: 1px solid var(--divider); border-radius: var(--radius-lg);
  background: #fff; cursor: pointer; transition: border-color .15s, background .15s;
}
.opt:hover { border-color: var(--sage-light); background: var(--sand-light); }
.opt input { margin: .25rem 0 0; accent-color: var(--sage-deep); flex-shrink: 0; width: 1rem; height: 1rem; }
.opt:focus-within { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.opt-label { font-size: .95rem; font-weight: 500; }
.opt-note { display: block; font-size: .82rem; color: var(--ink-muted); font-weight: 400; margin-top: .15rem; }
.opt.checked { border-color: var(--sage-deep); background: var(--sand-light); }

.nav-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem; font-family: inherit;
  padding: .8rem 1.6rem; border-radius: var(--radius); font-size: .93rem; font-weight: 600;
  border: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s;
}
.btn-primary { background: var(--sage-deep); color: var(--sand); }
.btn-primary:hover { background: var(--sage); }
.btn-primary:disabled { background: var(--sand-deep); color: var(--ink-muted); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--sage-deep); border: 1.5px solid var(--sage-deep); }
.btn-ghost:hover { background: var(--sage-deep); color: var(--sand); }
.btn-text { background: none; border: none; color: var(--ink-muted); font-size: .88rem; cursor: pointer; font-family: inherit; padding: .5rem 0; text-decoration: underline; }
.btn-text:hover { color: var(--sage-deep); }

/* ── Ergebnis ── */
.result { display: none; }
.result.show { display: block; }
.result-head { padding: clamp(1.5rem, 4vw, 2.25rem); border-bottom: 1px solid var(--divider); }
.verdict { font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.25; margin-bottom: .6rem; }
.verdict-sub { color: var(--ink-soft); max-width: 62ch; margin: 0; }

.score-block { padding: clamp(1.5rem, 4vw, 2.25rem); border-bottom: 1px solid var(--divider); }
.score-top { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .25rem; }
.score-num { font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--sage-deep); }
.score-max { color: var(--ink-muted); font-size: 1rem; }
.score-stage { font-size: .95rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 1.5rem; }
.dims { display: grid; gap: .9rem; }
.dim-row { display: grid; grid-template-columns: 12rem 1fr auto; gap: .9rem; align-items: center; font-size: .88rem; }
.dim-bar { display: block; height: 8px; background: var(--sand-deep); border-radius: 999px; overflow: hidden; }
.dim-fill { display: block; height: 100%; min-width: 2px; background: var(--sage); border-radius: 999px; transition: width .4s ease; }
.dim-fill.low  { background: var(--warn); }
.dim-fill.mid  { background: var(--sage); }
.dim-fill.high { background: var(--ok); }
.dim-row.is-zero .dim-bar { box-shadow: inset 0 0 0 1px rgba(168,99,43,.35); }
@media print { .dim-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }
.dim-val { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: .82rem; }
@media (max-width: 620px) {
  .dim-row { grid-template-columns: 1fr auto; }
  .dim-bar { grid-column: 1 / -1; }
}

.disclaimer-inline { font-size: .8rem; line-height: 1.55; color: var(--ink-muted); margin: 1rem 0 0; max-width: 66ch; border-left: 2px solid var(--divider); padding-left: .8rem; }
.score-block .disclaimer-inline { margin: 0 0 1.5rem; }
.sect { padding: clamp(1.5rem, 4vw, 2.25rem); border-bottom: 1px solid var(--divider); }
.sect h2 { font-size: 1.15rem; margin-bottom: 1.2rem; }
.findings { display: grid; gap: 1rem; }
.finding { border-left: 3px solid var(--sage-light); padding: .1rem 0 .1rem 1rem; }
.finding.p1 { border-left-color: var(--warn); }
.finding.p3 { border-left-color: var(--sage-light); }
.finding.good { border-left-color: var(--ok); }
.finding h3 { font-size: .98rem; font-weight: 600; margin-bottom: .3rem; }
.finding p { font-size: .92rem; color: var(--ink-soft); margin: 0 0 .35rem; }
.finding .src { font-size: .76rem; color: var(--ink-muted); letter-spacing: .01em; }
.tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .15rem .45rem; border-radius: var(--radius); margin-left: .5rem; vertical-align: .1em; }
.tag.p1 { background: rgba(168,99,43,.12); color: var(--warn); }
.tag.p2 { background: rgba(61,95,99,.12); color: var(--sage); }
.tag.p3 { background: var(--sand-deep); color: var(--ink-muted); }
.tag.good { background: rgba(61,107,74,.12); color: var(--ok); }

ol.steps { margin: 0; padding-left: 0; list-style: none; counter-reset: s; display: grid; gap: .9rem; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 1.9rem 1fr; gap: .9rem; align-items: start; font-size: .95rem; }
ol.steps li::before { content: counter(s, decimal-leading-zero); font-size: .8rem; font-weight: 700; color: var(--sage); padding-top: .18rem; letter-spacing: .05em; }
ol.steps .why { display: block; font-size: .85rem; color: var(--ink-muted); margin-top: .15rem; }

.lead-block { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--sage-deep); color: var(--sand); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.lead-block h2 { color: var(--sand); font-size: 1.15rem; }
.lead-block p { color: var(--sage-light); font-size: .92rem; max-width: 56ch; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.25rem 0 .9rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sage-light); margin-bottom: .3rem; font-weight: 600; }
.field input {
  width: 100%; padding: .7rem .85rem; border-radius: var(--radius); border: 1px solid rgba(167,179,177,.35);
  background: rgba(250,247,242,.06); color: var(--sand); font-family: inherit; font-size: .95rem;
}
.field input:focus { outline: 2px solid var(--sage-light); outline-offset: 1px; }
.consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .82rem; color: var(--sage-light); margin-bottom: 1.1rem; }
.consent input { margin-top: .2rem; accent-color: var(--sage-light); }
.consent a { color: var(--sand); }
.lead-actions { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
.btn-light { background: var(--sand); color: var(--sage-deep); }
.btn-light:hover { background: #fff; }
.btn-outline-light { background: transparent; color: var(--sand); border: 1.5px solid rgba(243,239,233,.45); }
.btn-outline-light:hover { border-color: var(--sand); }
.lead-done { display: none; font-size: .95rem; color: var(--sand); }
.lead-done.show { display: block; }

.privacy-note { font-size: .82rem; color: var(--ink-muted); margin: 1.25rem 0 3rem; }
.privacy-note strong { color: var(--ink-soft); font-weight: 600; }

footer.foot { border-top: 1px solid var(--divider); padding: 2rem 0 3rem; font-size: .82rem; color: var(--ink-muted); }
footer.foot a { color: var(--ink-muted); }

@media print {
  header.top, .intro .meta-row, .lead-block, .btn, .btn-text, .privacy-note, footer.foot, .progress-wrap { display: none !important; }
  body { background: #fff; }
  .card { border: none; box-shadow: none; }
  .sect, .score-block, .result-head { border-color: #ddd; page-break-inside: avoid; }
}

/* ── Ergänzungen für die Formular-Stufe ── */
.gate { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--sage-deep); color: var(--sand); border-radius: var(--radius-lg); }
.gate h2 { color: var(--sand); font-size: clamp(1.2rem, 2.8vw, 1.5rem); margin-bottom: .5rem; }
.gate .gate-lead { color: var(--sage-light); font-size: .95rem; max-width: 58ch; }
.gate ul.gate-list { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; display: grid; gap: .45rem; }
.gate ul.gate-list li { font-size: .9rem; color: var(--sand); display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; }
.gate ul.gate-list li::before { content: "→"; color: var(--sage-light); font-size: .85rem; line-height: 1.6; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .9rem; margin-top: .9rem; display: none; }
.form-status.show { display: block; }
.form-status.err { color: #F0C9A8; }
.form-status.ok { color: var(--sand); }
.gate .btn-light[disabled] { opacity: .6; cursor: progress; }
.result-mailnote { font-size: .85rem; color: var(--ink-muted); margin: .8rem 0 0; }
.ladebalken { height: 3px; background: rgba(167,179,177,.25); border-radius: 999px; overflow: hidden; margin-top: 1rem; display: none; }
.ladebalken.show { display: block; }
.ladebalken span { display: block; height: 100%; width: 35%; background: var(--sand); border-radius: 999px; animation: lade 1.1s ease-in-out infinite; }
@keyframes lade { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ladebalken span { animation: none; width: 100%; } }

/* ── Gesperrte Tiefeninformationen ──────────────────────────────────────── */
.gesperrt { position: relative; margin-top: 1.25rem; }
.gesperrt-inhalt { filter: blur(5px); opacity: .55; user-select: none; pointer-events: none; }
.gesperrt-inhalt .finding h3 { color: var(--ink); }
.gesperrt-hinweis {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: .5rem;
  padding: 1rem; background: linear-gradient(to bottom, rgba(250,247,242,.35), rgba(250,247,242,.92) 60%);
}
.gesperrt-hinweis strong { font-size: 1rem; font-weight: 600; color: var(--ink); }
.gesperrt-hinweis span { font-size: .88rem; color: var(--ink-muted); max-width: 46ch; }
.schloss { width: 20px; height: 20px; color: var(--sage); }
.zaehler-reihe { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .75rem; font-size: .82rem; color: var(--ink-muted); }
.zaehler-reihe span::before { content: "· "; color: var(--sage); }

/* Formularstufe */
.gate { padding: clamp(1.5rem, 4vw, 2.25rem); background: var(--sage-deep); color: var(--sand); border-radius: var(--radius-lg); }
.gate h2 { color: var(--sand); font-size: clamp(1.2rem, 2.8vw, 1.5rem); margin-bottom: .5rem; }
.gate .gate-lead { color: var(--sage-light); font-size: .95rem; max-width: 58ch; }
.gate ul.gate-list { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; display: grid; gap: .45rem; }
.gate ul.gate-list li { font-size: .9rem; color: var(--sand); display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; }
.gate ul.gate-list li::before { content: "→"; color: var(--sage-light); font-size: .85rem; line-height: 1.6; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .9rem; margin-top: .9rem; display: none; }
.form-status.show { display: block; }
.form-status.err { color: #F0C9A8; }
.gate .btn-light[disabled] { opacity: .6; cursor: progress; }
.ladebalken { height: 3px; background: rgba(167,179,177,.25); border-radius: 999px; overflow: hidden; margin-top: 1rem; display: none; }
.ladebalken.show { display: block; }
.ladebalken span { display: block; height: 100%; width: 35%; background: var(--sand); border-radius: 999px; animation: lade 1.1s ease-in-out infinite; }
@keyframes lade { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ladebalken span { animation: none; width: 100%; } }

/* Postfach-Hinweis nach dem Absenden */
.postfach { padding: clamp(1.75rem, 5vw, 2.5rem); text-align: center; }
.postfach h2 { font-size: clamp(1.3rem, 3vw, 1.8rem); margin-bottom: .7rem; }
.postfach p { color: var(--ink-soft); max-width: 54ch; margin: 0 auto 1rem; }
.postfach .klein { font-size: .85rem; color: var(--ink-muted); }