/* Fairdy - styles. Only roles from tokens.css, never a color value here. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-100);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }

[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0 0 var(--space-md);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-md); }

a { color: inherit; text-underline-offset: 3px; }

figure { margin: 0; }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
}

main:focus { outline: none; }

section[id], [id="inhalt"], [tabindex="-1"] { scroll-margin-top: calc(var(--space-2xl) + var(--space-lg)); }

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

.skip-link {
  position: absolute; left: var(--space-md); top: calc(-1 * var(--space-2xl));
  z-index: 20; padding: var(--space-sm) var(--space-md);
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--r-md);
}
.skip-link:focus { top: var(--space-md); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.container.reading { max-width: calc(var(--reading) + 2 * var(--space-lg)); }

.kicker {
  margin-bottom: var(--space-sm);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-300);
}

.lead { font-size: var(--fs-lg); color: var(--text-200); max-width: var(--reading); }
.note, .source { font-size: var(--fs-sm); color: var(--text-300); max-width: var(--reading); }
.mono { font-family: var(--mono); }
.small { font-size: var(--fs-xs); color: var(--text-300); }

.placeholder { color: var(--hint); }
.placeholder-block {
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--hint);
  color: var(--hint);
}

/* --- buttons: primary, secondary, tertiary -------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 700;
  line-height: var(--lh-head);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              text-decoration-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--action); color: var(--on-action); border-color: var(--action-edge); }
.btn-primary:hover:not(:disabled) { background: var(--action-hover); }

.btn-large { padding: var(--space-md) var(--space-lg); font-size: var(--fs-lg); }

.btn-secondary { background: transparent; color: var(--text-100); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-3); border-color: var(--text-100); }

.btn-tertiary {
  padding: 0 var(--space-xs);
  background: transparent; color: var(--text-100);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 2px;
}
.btn-tertiary:hover:not(:disabled) { text-decoration-color: var(--text-100); }

/* --- header and footer ----------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  padding: var(--space-sm) 0;
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.logo-link { display: inline-flex; align-items: center; min-height: 44px; }
.logo-link img { width: 160px; }
.site-header .btn { white-space: nowrap; padding: var(--space-sm) var(--space-md); }

.site-footer {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-sm);
  color: var(--text-300);
}
.landing .site-footer { margin-top: 0; }
.footer-inner p { max-width: var(--reading); }
.footer-title { font-weight: 700; color: var(--text-100); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

/* --- sections -------------------------------------------------------------- */

.section { padding: var(--space-xl) 0; }

.section-dark { background: var(--bg-inverse); color: var(--text-inverse); }
.section-dark .lead { color: var(--text-inverse-soft); }
.section-dark :focus-visible { outline-color: var(--text-inverse); }

.hero { padding: var(--space-xl) 0; }
.hero-grid { display: grid; gap: var(--space-xl); }
.hero h1 { font-size: var(--fs-2xl); }
.hero-action { margin: var(--space-lg) 0 var(--space-sm); }

.belege { list-style: none; margin: var(--space-lg) 0 0; padding: 0; max-width: var(--reading); }
.belege li { position: relative; padding-left: var(--space-lg); margin-bottom: var(--space-sm); }
.belege li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: var(--space-sm); height: var(--space-sm);
  border-radius: var(--r-pill); background: var(--text-100);
}

.hero-video { width: 100%; max-width: 300px; justify-self: center; }
.video-frame {
  aspect-ratio: 9 / 16;
  background: var(--bg-inverse);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.hero-video figcaption { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--text-300); }
.video-error {
  margin: var(--space-sm) 0 0; padding: var(--space-sm) var(--space-md);
  background: var(--bg-1); border-radius: var(--r-sm); font-size: var(--fs-sm);
}

.band img { width: 100%; height: clamp(240px, 42vw, 420px); object-fit: cover; }

.split { display: grid; gap: var(--space-xl); align-items: center; }
.split-text > p { max-width: var(--reading); }
.split-image img { width: 100%; aspect-ratio: 9 / 7; object-fit: cover; border-radius: var(--r-md); }
.split-reverse > figure { order: 2; }

.points { list-style: none; margin: var(--space-lg) 0 0; padding: 0; max-width: var(--reading); }
.points li { padding: var(--space-sm) 0; border-top: 1px solid var(--border-soft); }
.points-strong { font-weight: 700; }

.compare { width: 100%; border-collapse: collapse; margin-top: var(--space-lg); }
.compare th {
  padding: 0 var(--space-md) var(--space-md) 0;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; text-align: left;
}
.compare-yes { color: var(--action); }
.compare-no { color: var(--text-inverse-soft); }
.compare td {
  width: 50%; padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-top: 1px solid var(--border-strong); vertical-align: top;
}
.compare td + td { color: var(--text-inverse-soft); }

.steps { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.card { background: var(--bg-1); border-radius: var(--r-md); padding: var(--space-lg); }
.step p { margin: 0; color: var(--text-200); }
.step-number {
  display: block; margin-bottom: var(--space-sm);
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-300);
}

.statement {
  padding-left: var(--space-md);
  border-left: 3px solid var(--text-100);
  font-size: var(--fs-lg); font-weight: 700;
}

/* guest view mock-up */
.phone-figure { width: 100%; max-width: 320px; justify-self: center; }
.example-label {
  margin-bottom: var(--space-sm);
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
  color: var(--hint);
}
.phone {
  border: var(--space-sm) solid var(--bg-inverse);
  border-radius: calc(var(--r-lg) * 3);
  background: var(--bg-inverse);
}
.phone-screen {
  min-height: 420px;
  padding: var(--space-lg) var(--space-md);
  border-radius: calc(var(--r-lg) * 2);
  background: var(--bg-2);
}
.phone-dish {
  margin-bottom: var(--space-xs);
  font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
  text-align: center; color: var(--text-300);
}
.phone-total { font-weight: 700; text-align: center; line-height: var(--lh-head); }
.ingredients { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.ingredient {
  display: grid; gap: var(--space-xs); justify-items: center;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-1); border-radius: var(--r-sm);
}
.ingredient-name { font-weight: 700; font-size: var(--fs-sm); }
.ingredient-meta { display: flex; gap: var(--space-md); font-family: var(--mono); font-size: var(--fs-xs); }
.origin::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: var(--space-sm); height: var(--space-sm); margin-right: var(--space-xs);
  border-radius: var(--r-pill);
}
.origin-proven::before { background: var(--action); }
.origin-unproven { color: var(--text-300); }
.origin-unproven::before { background: var(--text-300); }
.phone-figure figcaption { margin-top: var(--space-sm); text-align: center; font-size: var(--fs-sm); color: var(--text-300); }

/* number block */
.numbers { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-lg); }
.number { padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-soft); }
.number p { margin: 0; font-size: var(--fs-sm); color: var(--text-300); }
.number .figure {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-2xl); font-weight: 700; line-height: 1; color: var(--text-100);
}
.unit {
  margin-left: var(--space-xs);
  font-family: var(--mono); font-size: var(--fs-sm); font-weight: 400; color: var(--text-300);
}
.source { margin-top: var(--space-lg); }

/* disclosure panels */
.accordion { border-top: 1px solid var(--border-soft); }
.accordion-item { border-bottom: 1px solid var(--border-soft); }
.accordion-heading { margin: 0; font-size: inherit; }
.accordion-button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-height: 44px; padding: var(--space-md) var(--space-sm);
  background: transparent; border: 0; border-radius: var(--r-sm);
  font: inherit; font-weight: 700; color: var(--text-100); text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}
.accordion-button:hover { background: var(--bg-3); }
.chevron {
  flex-shrink: 0; width: var(--space-sm); height: var(--space-sm); margin-right: var(--space-xs);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t) var(--ease);
}
.accordion-button[aria-expanded="true"] .chevron { transform: rotate(-135deg); }
.accordion-panel { padding: 0 var(--space-sm) var(--space-md); color: var(--text-200); }
.answers summary, .raw summary { gap: var(--space-sm); list-style: none; }
.answers summary::-webkit-details-marker, .raw summary::-webkit-details-marker { display: none; }
.answers summary::before, .raw summary::before {
  content: ""; flex-shrink: 0; width: var(--space-sm); height: var(--space-sm);
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t) var(--ease);
}
.answers[open] summary::before, .raw[open] summary::before { transform: rotate(45deg); }
.accordion-panel p { max-width: var(--reading); }
.compact .accordion-button { padding: var(--space-sm); font-size: var(--fs-sm); }
.compact .accordion-panel { font-size: var(--fs-sm); }

.quote-placeholder {
  margin: var(--space-lg) 0 0; padding: var(--space-lg);
  border: 2px dashed var(--border-soft); border-radius: var(--r-md);
  color: var(--text-400);
}

.closing h2 { font-size: var(--fs-2xl); }

/* --- 2-minute check ------------------------------------------------------- */

.check {
  min-height: 460px;
  margin-top: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  background: var(--bg-1);
  border-radius: var(--r-md);
}
.check-progress { margin-bottom: var(--space-lg); font-size: var(--fs-sm); color: var(--text-300); }
.check-progress p { margin-bottom: var(--space-xs); }
progress {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: var(--space-sm);
  border: 0; border-radius: var(--r-pill);
  background: var(--bg-4); overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--bg-4); border-radius: var(--r-pill); }
progress::-webkit-progress-value { background: var(--text-100); border-radius: var(--r-pill); }
progress::-moz-progress-bar { background: var(--text-100); border-radius: var(--r-pill); }

.check fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.check legend {
  margin-bottom: var(--space-md); padding: 0;
  font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-head);
}
.options { display: grid; gap: var(--space-sm); }
.option {
  display: flex; align-items: flex-start; gap: var(--space-md);
  min-height: 44px; padding: var(--space-md);
  background: var(--bg-2);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.option:hover { background: var(--bg-3); border-color: var(--text-100); }
.option.is-selected { border-color: var(--text-100); box-shadow: inset 0 0 0 1px var(--text-100); }
.option input, .check-unknown input {
  flex-shrink: 0; width: var(--space-lg); height: var(--space-lg); margin: 0;
  accent-color: var(--text-100);
}

.fields { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-weight: 700; font-size: var(--fs-sm); }
.field-hint { font-size: var(--fs-sm); color: var(--text-300); }
.field input, .field textarea, .field select, .results select {
  width: 100%; max-width: 24rem; min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-2); color: var(--text-100);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font: inherit;
}
.field input:disabled { opacity: .5; cursor: not-allowed; }
.field input[type="number"] { max-width: 12rem; }
.field.has-error input { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field-error { margin: 0; font-size: var(--fs-sm); color: var(--error); }
.check-unknown {
  display: flex; align-items: center; gap: var(--space-md);
  min-height: 44px; margin-top: var(--space-md); cursor: pointer;
}

.check-error { margin: var(--space-md) 0 0; font-size: var(--fs-sm); color: var(--error); }
.check-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md);
  margin-top: var(--space-lg);
}
.check-nav .btn-primary { margin-left: auto; }

/* result */
.result-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.result-head h3 { margin: 0; font-size: var(--fs-xl); }
.result-head h3:focus { outline: none; }
.result-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--space-xl); height: var(--space-xl);
  border: 2px solid currentColor; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--fs-lg); font-weight: 700;
}
.result-fits .result-badge { color: var(--ok); }
.result-clarify .result-badge { color: var(--warn); }
.result-not_yet .result-badge { color: var(--text-300); }
.result-label {
  display: block; font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-300);
}

.result-points { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.result-points li { margin-bottom: var(--space-xs); }

.cent {
  margin: var(--space-lg) 0; padding: var(--space-md) 0;
  border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
}
.cent .cent-figure { margin: 0 0 var(--space-xs); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; }
.cent p { margin: 0; }
.cent-calc { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--text-300); }

.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }

.answers { margin-top: var(--space-lg); }
.answers summary {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.answers ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.answers li { display: grid; gap: var(--space-xs); padding: var(--space-sm) 0; border-top: 1px solid var(--border-strong); }
.rating { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-300); }
.rating::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: var(--space-sm); height: var(--space-sm); margin-right: var(--space-xs);
  border-radius: var(--r-pill);
}
.rating-green::before { background: var(--ok); }
.rating-yellow::before { background: var(--warn); }
.rating-red::before { background: var(--text-300); }

/* demo request */
.demo-form { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--border-strong); }
.demo-form h4 { margin: 0 0 var(--space-md); font-size: var(--fs-lg); }
.form-note { margin-top: var(--space-md); font-size: var(--fs-sm); color: var(--text-300); }
.form-summary {
  margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--error); background: var(--bg-2);
}
.success {
  margin-top: var(--space-lg); padding: var(--space-lg);
  background: var(--bg-2); border-left: 3px solid var(--ok); border-radius: var(--r-sm);
}
.success h4 { margin: 0 0 var(--space-sm); font-size: var(--fs-lg); }
.success h4:focus { outline: none; }
.success p:last-child { margin-bottom: 0; }

.check-noscript { margin: 0; }

/* --- event list ------------------------------------------------------------ */

.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-md); }
.filter label { font-weight: 700; font-size: var(--fs-sm); }
.filter input {
  min-height: 44px; padding: var(--space-sm) var(--space-md);
  background: var(--bg-2); color: var(--text-100);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font: inherit; font-family: var(--mono);
}
.active-filter { font-size: var(--fs-sm); }
.count { font-size: var(--fs-sm); color: var(--text-300); }
.table-wrap { overflow-x: auto; }
.events, .leads, .results { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.events th, .leads th, .results th {
  padding: var(--space-sm); text-align: left;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-300);
  border-bottom: 1px solid var(--border-strong);
}
.events td { padding: var(--space-sm); border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.events td:first-child { white-space: nowrap; }
.raw summary { min-height: 44px; display: flex; align-items: center; font-size: var(--fs-xs); cursor: pointer; }
.raw code {
  display: block; padding: var(--space-sm); border-radius: var(--r-sm);
  background: var(--bg-1); font-family: var(--mono); font-size: var(--fs-xs);
  white-space: pre-wrap; word-break: break-all;
}
.empty { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--bg-1); border-radius: var(--r-md); }
.empty p:last-child { margin-bottom: 0; }

/* --- cockpit -------------------------------------------------------------- */

.cockpit .header-inner { flex-wrap: wrap; }
.cockpit h2 { font-size: var(--fs-xl); }
.cockpit .card h2 { font-size: var(--fs-lg); }
.cockpit-nav { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.nav-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md);
  border-bottom: 3px solid transparent; color: var(--text-200); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-link:hover { color: var(--text-100); border-bottom-color: var(--border-strong); }
.nav-link[aria-current="page"] {
  background: var(--bg-3); color: var(--text-100); font-weight: 700; border-bottom-color: var(--text-100);
}

.breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: var(--space-xs);
  margin: 0 0 var(--space-md); padding: 0; list-style: none;
  font-size: var(--fs-sm); color: var(--text-300);
}
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-xs); }
.breadcrumb a { color: var(--text-200); }

.flash { padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--ok); background: var(--bg-2); }

.filters { display: grid; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.filters p, .filters form { margin: 0; }
.chip-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.chip-label { min-width: 7rem; font-size: var(--fs-sm); font-weight: 700; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md);
  border-radius: var(--r-pill); background: var(--bg-1); color: var(--text-100);
  font-size: var(--fs-sm); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.chip:hover { background: var(--bg-4); }
.chip[aria-current="true"] { background: var(--bg-inverse); color: var(--text-inverse); font-weight: 700; }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0 var(--space-sm); border-radius: var(--r-pill);
  background: var(--bg-4); color: var(--text-100);
  font-size: var(--fs-xs); line-height: 1.8; white-space: nowrap;
}
.badge-sample { background: transparent; border: 1px solid var(--hint); color: var(--hint); }
.badge-dot { width: var(--space-sm); height: var(--space-sm); border-radius: var(--r-pill); }
.result-fits .badge-dot { background: var(--ok); }
.result-clarify .badge-dot { background: var(--warn); }
.result-not_yet .badge-dot { background: var(--text-300); }

.section-title { margin-top: var(--space-xl); }
.funnel {
  display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: var(--space-md) 0 0; padding: 0; list-style: none;
}
.funnel-step {
  display: grid; gap: var(--space-xs); padding: var(--space-md);
  border-radius: var(--r-md); background: var(--bg-1); color: var(--text-100); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
.funnel-step:hover { background: var(--bg-4); }
.funnel-count { font-size: var(--fs-2xl); font-weight: 700; line-height: 1; }
.funnel-label { font-size: var(--fs-sm); color: var(--text-200); }
.tasks, .plain { margin: 0; padding: 0; list-style: none; }
.data-actions, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.data-actions p, .data-actions form, .actions form { margin: 0; }

.leads td { padding: var(--space-md) var(--space-sm); border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.leads tbody tr { position: relative; transition: background-color var(--t-fast) var(--ease); }
.leads tbody tr:hover { background: var(--bg-3); }
.leads tbody tr:focus-within { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.row-link { font-weight: 700; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
@media (max-width: 759px) {
  .leads th:nth-child(2), .leads td:nth-child(2) { display: none; }  /* type: shown on the detail page */
}

.detail-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.detail-head h1, .detail-head p { margin: 0; }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.detail-grid { display: grid; gap: var(--space-md); }
.card > :last-child { margin-bottom: 0; }
.facts {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-md);
  margin: 0; font-size: var(--fs-sm);
}
.facts dt { color: var(--text-300); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.break { overflow-wrap: anywhere; }
.field textarea { max-width: none; resize: vertical; }
.answers-list { margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.answers-list li { display: grid; gap: var(--space-xs); padding: var(--space-sm) 0; border-top: 1px solid var(--border-strong); }

.timeline { margin: var(--space-md) 0 0; padding: 0; list-style: none; border-left: 2px solid var(--border-soft); }
.timeline li { position: relative; display: grid; gap: var(--space-xs); padding: var(--space-sm) 0 var(--space-sm) var(--space-lg); font-size: var(--fs-sm); }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-xs) - 1px); top: calc(var(--space-sm) + .5em);
  width: var(--space-sm); height: var(--space-sm); border-radius: var(--r-pill); background: var(--text-100);
}
.timeline li > span:nth-child(2) { font-weight: 700; }

/* --- research --------------------------------------------------------------- */

.research-form .fields { margin-top: var(--space-lg); }
.source-choice { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-md); padding: 0; border: 0; min-width: 0; }
.source-choice legend { margin-bottom: var(--space-sm); padding: 0; font-size: var(--fs-sm); font-weight: 700; }
.source-choice .option input { accent-color: var(--text-100); }
.option.is-disabled { border-style: dashed; color: var(--text-300); cursor: not-allowed; }
.option.is-disabled:hover { background: var(--bg-2); border-color: var(--border-strong); }
.results td { padding: var(--space-sm); border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.results input[type="checkbox"] { width: var(--space-lg); height: var(--space-lg); margin: var(--space-sm) 0; accent-color: var(--text-100); }
.results select { width: auto; max-width: 12rem; font-size: var(--fs-sm); }
.result-name { display: block; min-height: 44px; padding-top: var(--space-sm); font-weight: 700; cursor: pointer; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: var(--space-md) 0; font-size: var(--fs-sm); }
.attribution { margin-top: var(--space-lg); font-size: var(--fs-xs); color: var(--text-300); }
.runs li { padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-sm); }
@media (min-width: 760px) {
  .research-form .fields { grid-template-columns: 1fr 1fr; }
}

/* --- outbox and contact (stage 5) ------------------------------------------ */

.mode-banner {
  padding: var(--space-sm) 0; background: var(--bg-4);
  border-bottom: 2px dashed var(--hint); font-size: var(--fs-sm);
}
.mode-box { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); border: 2px dashed var(--hint); border-radius: var(--r-md); }
.mode-box h2 { margin-bottom: var(--space-sm); font-size: var(--fs-lg); }
.mode-box p { max-width: var(--reading); }
.blocked { font-size: var(--fs-sm); color: var(--text-300); }
.badge-blocked { background: var(--bg-inverse); color: var(--text-inverse); }
.mail-preview {
  margin: var(--space-lg) 0; padding: var(--space-md);
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: var(--r-md);
  font-family: var(--mono); font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere;
}
.inline-form { display: inline-block; margin: 0; }
.letters li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; }
.sent-note { margin: 0; font-size: var(--fs-sm); color: var(--text-300); }
.consent-form { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--border-strong); }
.consent-form h4 { margin: 0 0 var(--space-xs); font-size: var(--fs-lg); }
.field .consent {
  display: flex; align-items: flex-start; gap: var(--space-md); min-height: 44px;
  font-weight: 400; font-size: var(--fs-sm); cursor: pointer;
}
.consent input { flex-shrink: 0; width: var(--space-lg); height: var(--space-lg); margin: 0; accent-color: var(--text-100); }
.consent a { overflow-wrap: anywhere; }

/* --- follow-up postcard: A6 landscape, two pages ----------------------------- */

@page postkarte { size: 148mm 105mm; margin: 0; }
.postcard {
  position: relative; overflow: hidden;
  width: 148mm; height: 105mm; max-width: 100%; margin: var(--space-xl) auto;
  background: var(--bg-2); color: var(--text-100);
  page: postkarte;
}
.postcard-front { display: flex; flex-direction: column; }
.postcard-image { width: 100%; height: 74mm; object-fit: cover; }
.postcard-strip { display: flex; flex: 1; align-items: center; justify-content: space-between; padding: 0 8mm; background: var(--bg-0); }
.postcard-question { margin: 0; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-head); }
.postcard-strip img { width: 140px; }
.postcard-back {
  display: grid; grid-template-columns: 1fr 40mm; gap: 5mm; padding: 6mm 7mm;
  font-size: var(--fs-xs); line-height: 1.35;
}
.postcard-text p { margin: 0 0 1.5mm; }
.postcard-text .sample-banner { margin-bottom: 1.5mm; padding: 0 var(--space-xs); }
.postcard-check { display: flex; align-items: center; gap: 2.5mm; margin: 1.5mm 0 2mm; font-weight: 700; }
.postcard-check .qr { flex-shrink: 0; width: 16mm; height: 16mm; }
.postcard-check a { font-family: var(--mono); font-weight: 400; color: inherit; }
.nowrap { white-space: nowrap; }
.postcard-note { color: var(--text-200); }
.postcard-address {
  display: flex; align-items: flex-end; padding-left: 4mm;
  border-left: 1px solid var(--border-soft); font-style: normal;
}

/* --- letter: print view ---------------------------------------------------- */

.print-view { background: var(--bg-1); }
.print-toolbar {
  position: sticky; top: 0; z-index: 10; padding: var(--space-sm) 0;
  background: var(--bg-0); border-bottom: 1px solid var(--border-soft);
}
.print-toolbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.print-toolbar p { margin: 0; max-width: 52ch; font-size: var(--fs-sm); color: var(--text-300); }
.sheet {
  display: flex; flex-direction: column;
  width: 210mm; max-width: 100%; min-height: 297mm; margin: var(--space-xl) auto;
  padding: 17mm 20mm 13mm 25mm;
  background: var(--bg-2); color: var(--text-100);
  font-size: var(--fs-sm); line-height: 1.45;
}
.sheet p { margin: 0 0 var(--space-sm); }
.sheet a { color: inherit; overflow-wrap: anywhere; }
.sample-banner {
  padding: var(--space-xs) var(--space-sm); border: 1px dashed var(--hint);
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  text-align: center; color: var(--hint);
}
.letter-head { display: flex; justify-content: flex-end; margin-bottom: var(--space-md); }
.letter-head img { width: 190px; }
.letter-sender { font-size: var(--fs-xs); color: var(--text-300); }
.letter-recipient { min-height: 27mm; margin-bottom: var(--space-md); font-style: normal; }
.letter-date { text-align: right; }
.letter-subject { margin: var(--space-sm) 0 var(--space-md); font-size: var(--fs-lg); }
.letter-close { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-sm); }
.letter-ps { margin-top: var(--space-md); }
.letter-qr { flex-shrink: 0; width: 32mm; }
.qr { display: block; width: 32mm; height: 32mm; background: var(--bg-2); color: var(--text-100); }
.letter-qr figcaption {
  margin-top: var(--space-xs); font-family: var(--mono); font-size: var(--fs-xs);
  overflow-wrap: anywhere; color: var(--text-300);
}
.letter-footer {
  margin-top: auto; padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); color: var(--text-200);
}
.letter-footer p { margin: 0; }

@media print {
  @page { size: A4; margin: 0; }
  .print-toolbar { display: none; }
  .print-view { background: none; }
  .sheet { width: 210mm; max-width: none; min-height: 297mm; margin: 0; }
  .sheet a { text-decoration: none; }
  .postcard { margin: 0; break-after: page; }
  .postcard a { text-decoration: none; }
}

/* --- privacy page ---------------------------------------------------------- */

.prose h2 { margin-top: var(--space-xl); font-size: var(--fs-xl); }
.prose ul { padding-left: var(--space-lg); }
.prose li { margin-bottom: var(--space-xs); }

/* --- larger screens -------------------------------------------------------- */

@media (min-width: 760px) {
  .container { padding: 0 var(--space-lg); }
  .section { padding: var(--space-2xl) 0; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .check { padding: var(--space-xl); }
}

@media (min-width: 900px) {
  .hero h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
  .hero { padding: var(--space-2xl) 0; }
  .hero-grid { grid-template-columns: 1fr 300px; align-items: center; }
  .split { grid-template-columns: 3fr 2fr; }
  .split-reverse { grid-template-columns: 2fr 3fr; }
  .split-reverse > figure { order: 0; }
  .numbers { grid-template-columns: repeat(4, 1fr); }
  .number .figure { font-size: var(--fs-3xl); }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .timeline li { grid-template-columns: 11rem 12rem 1fr; }
}