/* =========================================================================
   EXIT24 – Stylesheet
   Marken-Grundlage (Brand Identity): Exit Yellow #EEFA9F, Exit Black #1E1E1E,
   Wortmarke in „Institut", Headings/Slogan in Space Grotesk Bold (Versalien),
   Body in Space Grotesk Regular, Border-Radius 10px, Trennlinien 0,5px @ 35 %.
   Flach: keine Schatten, Verläufe oder Konturen. Akzent sparsam einsetzen.
   ========================================================================= */

/* ---- Schriften ---------------------------------------------------------- */
@font-face {
  font-family: 'Institut';
  src: url('/static/fonts/Institut.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/SpaceGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/SpaceGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
/* Handschriftlicher Mini-Akzent (Claim). ACHTUNG: Glyphen ~2,7× größer als font-size –
   daher klein ansetzen (~13px nominal ≈ 34px optisch). */
@font-face {
  font-family: 'Kid Marker';
  src: url('/static/fonts/KidMarker.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ---- Token -------------------------------------------------------------- */
:root {
  --yellow: #EEFA9F;
  --black: #1E1E1E;
  --paper: #FFFFFF;
  --paper-2: #FAFAF6;        /* minimal abgesetzte Fläche */
  --ink-08: rgba(30, 30, 30, 0.08);
  --ink-12: rgba(30, 30, 30, 0.12);
  --ink-35: rgba(30, 30, 30, 0.35);   /* Trennlinie laut Brandbook */
  --ink-60: rgba(30, 30, 30, 0.60);   /* gedämpfter Text */
  --yellow-35: rgba(238, 250, 159, 0.35);

  --radius: 10px;            /* Brand: 10px */
  --hair: 0.5px solid var(--ink-35);

  --display: 'Institut', 'Space Grotesk', system-ui, sans-serif;
  --sans: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1140px;
  --space: 24px;

  /* Abstands-Skala (Design-Übernahme): konsistenter vertikaler Rhythmus. */
  --s1: 8px;
  --s2: 14px;
  --s3: 24px;
  --s4: 40px;
  --s5: clamp(80px, 10vw, 140px);   /* großzügiger Sektionsabstand (padding-block) */

  /* ---- Design-Übernahme (Prototyp): dunkel/editorial, strikt zweifarbig ---- */
  --exit-yellow: #EEFA9F;            /* = --yellow; Akzent nur als Fläche/Text auf Schwarz */
  --exit-black: #1E1E1E;             /* = --black */
  --white: #FFFFFF;
  --off-white: #F4F4EE;              /* helle Sektionsflächen & Text auf Dunkel (Prototyp) */
  --black-900: #161616;              /* dunkle Sektionen / Body / Footer */
  --black-950: #0E0E0E;              /* tiefste Tiefe (Divider/Mockups) */
  --ink-70: rgba(30, 30, 30, 0.66);  /* Fließtext gedämpft auf Hell */
  --paper-70: rgba(244, 244, 238, 0.72); /* Fließtext auf Dunkel */
  --hair-dark: rgba(30, 30, 30, 0.35);   /* Hairline auf Hell (= --ink-35) */
  --hair-light: rgba(250, 250, 246, 0.35); /* Hairline auf Dunkel */

  --display-marker: 'Kid Marker', 'Space Grotesk', cursive; /* handschriftlicher Akzent */

  /* EINE Bewegungssprache */
  --ease: cubic-bezier(.22, .61, .18, 1);
  --dur: .35s;
}

/* ---- Reset / Grundlagen ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Das HTML-Attribut `hidden` muss zuverlässig ausblenden. Ohne diese Regel überschreibt
   jede Komponentenregel mit explizitem display (z. B. .btn { display:inline-flex })
   die Browser-Standardregel [hidden]{display:none} – das Element bleibt sichtbar, obwohl
   das Skript es per `hidden` ausgeblendet hat (z. B. „Premium werden" ohne Klick-Handler,
   wenn die Online-Zahlung deaktiviert ist). Ersetzt die früheren Einzelpatches. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15.3px;
  line-height: 1.6;
  color: var(--black);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 700; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Sichtbarer Tastatur-Fokus (Quality-Floor) */
:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-black :focus-visible,
.result :focus-visible,
.site-footer :focus-visible { outline-color: var(--yellow); }

/* Skip-Link */
.skip-link {
  position: absolute; left: 12px; top: -48px;
  background: var(--black); color: var(--yellow);
  padding: 10px 14px; border-radius: var(--radius);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-size: 11px; text-decoration: none; z-index: 50; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---- Typo-Hilfen -------------------------------------------------------- */
.eyebrow {
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; font-size: 11px; color: var(--ink-60);
  margin: 0 0 14px;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700; letter-spacing: .01em; text-transform: uppercase;
  line-height: 1;
}
.muted { color: var(--ink-60); }
.nowrap { white-space: nowrap; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: 11.7px;
  padding: 14px 22px; border-radius: var(--radius);
  border: 1px solid var(--black); background: var(--black); color: var(--yellow);
  cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease, transform .05s ease;
}
.btn:hover { background: #000; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--black); }
.btn--ghost:hover { background: var(--black); color: var(--yellow); }
.btn--yellow { background: var(--yellow); color: var(--black); border-color: var(--black); }
.btn--yellow:hover { background: #e6f57f; }
.btn--block { width: 100%; }
.btn--sm { padding: 9px 14px; font-size: 11px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Schmale Screens: lange, GROSSGESCHRIEBENE + gesperrte Button-Beschriftungen (z. B.
   „Verbindlich annehmen & Daten speichern") passen sonst nicht in eine Zeile und brechen
   unschön um. Auf Mobil daher volle Breite (je Button eine Zeile) + etwas engere Sperrung. */
@media (max-width: 560px) {
  .btn { letter-spacing: .02em; font-size: 11px; padding: 13px 16px; }
  .btn--sm { font-size: 11px; padding: 8px 12px; }
  .form-actions .btn, .dash__actions .btn, .doc-row__actions .btn { flex: 1 1 100%; width: 100%; }
}
.on-black .btn--ghost { color: var(--yellow); border-color: var(--yellow); }
.on-black .btn--ghost:hover { background: var(--yellow); color: var(--black); }

/* ---- Badges / Pills ----------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: 11px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--black);
}
.badge--test { background: var(--yellow); color: var(--black); }
.badge--draft { background: transparent; color: var(--black); }
.badge--dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--black); display: inline-block;
}

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--paper); border-bottom: var(--hair);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 16px;
}
.brand-link { text-decoration: none; color: var(--black); display: inline-flex; align-items: baseline; gap: 10px; }
.brand-link .wordmark { font-size: 23.4px; }
.brand-tag {
  font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: 10px; color: var(--ink-60);
}
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav-link {
  text-decoration: none; color: var(--black); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: 11.3px;
  padding: 9px 12px; border-radius: var(--radius);
}
.nav-link:hover { background: var(--ink-08); }
.nav-sep { width: 0.5px; height: 22px; background: var(--ink-35); margin: 0 4px; }

/* Mobile-Navigation (Hamburger). Standard AUS – greift NUR ≤760px; Desktop bleibt unverändert. */
.nav-toggle, .nav-burger { display: none; }
@media (max-width: 760px) {
  .site-header__inner { position: relative; }
  /* fokussierbare, aber unsichtbare Checkbox (kein JS nötig) */
  .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  /* Burger-Button (Farbe folgt dem Header-Theme via currentColor) */
  .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 40px; padding: 9px 10px; flex: none; cursor: pointer;
    border: .5px solid var(--hair-light); border-radius: 10px; background: transparent; color: inherit; }
  .nav-burger span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Aufklapp-Panel (immer dunkel + lesbar, unabhängig vom Header-Zustand) */
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 16px;
    background: #161616; border-bottom: .5px solid var(--hair-light); box-shadow: 0 20px 44px rgba(0,0,0,.5); }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav .nav-link { color: var(--off-white); font-size: 13.5px; padding: 14px 12px;
    text-transform: none; letter-spacing: .01em; font-weight: 600; border-radius: 8px; }
  .nav .nav-link:hover { background: rgba(250,250,246,.10); }
  .nav .nav-sep { display: none; }
  .nav .btn { width: 100%; justify-content: center; margin-top: 8px; }
}

/* ---- Hero (Signature: der Kaufpreisrechner ist die These) --------------- */
.hero { background: var(--yellow); color: var(--black); border-bottom: 1px solid var(--black); }
.hero__inner {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
  padding: 72px 24px 76px;
}
.hero__copy { max-width: 520px; }
.slogan {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: .005em; font-size: clamp(38px, 6vw, 68px); line-height: 0.98;
}
.slogan span { display: block; }
.hero__sub { margin-top: 22px; font-size: 16.2px; max-width: 44ch; color: rgba(30,30,30,.82); }
.hero__meta {
  margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.hero__rule { height: 0.5px; background: rgba(30,30,30,.35); margin: 26px 0 0; }

/* Rechner-Karte */
.calc-card {
  background: var(--paper); border: 1px solid var(--black); border-radius: var(--radius);
  padding: 26px;
}
.calc-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.calc-card__title { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; }
.calc-card__hint { font-size: 11.7px; color: var(--ink-60); margin: 0 0 18px; }

/* ---- Formularelemente --------------------------------------------------- */
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-label {
  display: block; font-weight: 700; font-size: 11.3px;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px;
}
.field-label .req { color: var(--black); }
.input, .select, .textarea {
  /* 14px: passt auch in schmale Felder (2-Spalten-Masken, Jahres-/Kennzahlen-Grids),
     ohne dass Eingaben abgeschnitten wirken; 16px war dort zu groß. */
  width: 100%; font-family: var(--sans); font-size: 12.6px; color: var(--black);
  background: var(--paper); border: 1px solid var(--ink-35); border-radius: var(--radius);
  padding: 11px 13px; line-height: 1.4; transition: border-color .15s ease;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--black); outline: 2px solid var(--black); outline-offset: 1px; }
/* iOS-Zoom-Regel (16px auf Mobil) steht am DATEIENDE, damit sie spätere, spezifischere
   Feld-Overrides (.contract-data .input, input.field) sicher übersteuert. */
.textarea { resize: vertical; min-height: 96px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%), linear-gradient(135deg, var(--black) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.input-affix { position: relative; }
.input-affix .affix { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-60); font-size: 12.6px; pointer-events: none; }
.input-affix .input { padding-right: 38px; }
.hint { font-size: 11.3px; color: var(--ink-60); margin-top: 6px; }
.field-error { color: var(--black); font-size: 11.3px; font-weight: 700; margin-top: 6px; display: none; }
.field.has-error .input, .field.has-error .select { border-color: var(--black); border-width: 1.5px; }
.field.has-error .field-error { display: block; }

.checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 12.6px; line-height: 1.45; }
.checkbox input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--black); flex: none; }
.checkbox a { font-weight: 700; }

.form-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---- Ergebnis-Reveal (Premium-Variante: Gelb auf Schwarz) --------------- */
.result {
  background: var(--black); color: var(--paper); border-radius: var(--radius);
  padding: 28px; margin-top: 22px;
}
.result[hidden] { display: none; }
.result__eyebrow { color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; margin-bottom: 14px; }
.result__range { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price {
  font-family: var(--display); font-weight: 700; color: var(--yellow);
  font-size: clamp(34px, 6vw, 56px); line-height: 1; letter-spacing: .01em;
}
.price--mid { font-size: clamp(44px, 8vw, 76px); }
.price-sep { color: rgba(255,255,255,.5); font-size: 25.2px; }
.result__line { margin-top: 6px; color: rgba(255,255,255,.78); font-size: 12.6px; }
.result__mid-label { color: rgba(255,255,255,.6); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; margin: 18px 0 4px; }
.result__meta {
  margin-top: 18px; padding-top: 16px; border-top: 0.5px solid rgba(255,255,255,.25);
  display: flex; gap: 22px; flex-wrap: wrap; font-size: 11.7px; color: rgba(255,255,255,.8);
}
.result__meta b { color: var(--paper); }
.result__cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Hinweis-/Vorbehaltsblock */
.disclaimer {
  margin-top: 18px; border: 1px solid var(--yellow); border-radius: var(--radius);
  padding: 14px 16px;
}
.disclaimer__title { color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-bottom: 8px; }
.disclaimer ul { margin: 0; padding-left: 18px; }
.disclaimer li { font-size: 11.7px; color: rgba(255,255,255,.82); margin-bottom: 5px; }
.disclaimer li:first-child:where(.is-test) { color: var(--yellow); font-weight: 700; }

/* ---- Sektionen / Prozess ------------------------------------------------ */
.section { padding: clamp(48px, 7vw, 80px) 0; border-bottom: var(--hair); }
.section--tight { padding: 48px 0; }
.section__head { max-width: 620px; margin-bottom: 40px; }
.section__title { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.01em; }
.section__lead { margin-top: 14px; color: var(--ink-60); font-size: 16.2px; }

/* Echter Ablauf in drei Schritten -> nummerierte Marker sind hier sachgerecht */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 0.5px solid var(--ink-35); border-radius: var(--radius); overflow: hidden; list-style: none; margin: 0; padding: 0; }
.step { padding: 28px 26px; border-right: 0.5px solid var(--ink-35); }
.step:last-child { border-right: none; }
.step__num, .step__no { font-family: var(--display); font-weight: 700; font-size: 27px; color: var(--black); display: inline-block; padding: 0 0 6px; }
.step__num::after, .step__no::after { content: ''; display: block; width: 30px; height: 4px; background: var(--yellow); margin-top: 8px; }
.step__title { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; margin: 14px 0 8px; }
.step__text { color: var(--ink-60); font-size: 13.5px; }

/* Trust-Reihe */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trust__item { border-left: 3px solid var(--yellow); padding-left: 16px; }
.trust__item h4 { text-transform: uppercase; letter-spacing: .04em; font-size: 12.6px; margin-bottom: 6px; }
.trust__item p { color: var(--ink-60); font-size: 13.1px; }

/* Lead-/Kontaktbereich */
.lead-band { background: var(--paper-2); }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.form-card { background: var(--paper); border: 1px solid var(--black); border-radius: var(--radius); padding: 26px; }

/* ---- Alerts / Hinweise -------------------------------------------------- */
.alert { border-radius: var(--radius); padding: 13px 16px; font-size: 13.1px; border: 1px solid var(--black); margin-bottom: 16px; }
.alert--ok { background: var(--yellow); }
.alert--err { background: var(--paper); border-width: 1.5px; }
.alert--info { background: var(--paper-2); border-color: var(--ink-35); }
.alert[hidden] { display: none; }

/* Globaler Test-/Entwurfshinweis-Streifen */
.notice-strip {
  background: var(--black); color: var(--yellow);
  font-size: 11.3px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  text-align: center; padding: 8px 16px;
}
.notice-strip a { color: var(--yellow); }

/* ---- Auth-Seiten -------------------------------------------------------- */
.auth-wrap { min-height: calc(100vh - 69px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside { background: var(--black); color: var(--paper); padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.auth-aside .wordmark { color: var(--yellow); font-size: 37.8px; }
.auth-aside__slogan { color: var(--off-white); font-weight: 700; text-transform: none; letter-spacing: -.01em; margin-top: 18px; font-size: 18px; }
.auth-aside p { color: rgba(255,255,255,.75); margin-top: 18px; max-width: 38ch; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 27px; margin-bottom: 8px; }
.auth-card__sub { color: var(--ink-60); margin-bottom: 26px; }
.auth-switch { margin-top: 20px; font-size: 12.6px; color: var(--ink-60); }
.auth-switch a { font-weight: 600; color: var(--paper-70); text-decoration: underline; text-underline-offset: 2px; }
.auth-switch a:hover { color: var(--off-white); }

/* ---- Dashboards (Portal / Admin / Berater) ------------------------------ */
.dash { padding: 40px 0 72px; }
.dash__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.dash__title { font-size: clamp(24px, 3vw, 34px); }
.dash__role { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--ink-60); margin-bottom: 6px; }
.dash__tabs { display: flex; gap: 4px; border-bottom: var(--hair); margin: 22px 0 28px; flex-wrap: wrap; }
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: 11.3px; padding: 12px 14px; cursor: pointer; color: var(--ink-60);
}
.tab[aria-selected="true"] { color: var(--black); border-bottom-color: var(--black); }
.tab:hover { color: var(--black); }

.panel { border: 0.5px solid var(--ink-35); border-radius: var(--radius); background: var(--paper); }
.panel + .panel { margin-top: 18px; }
.panel__head { padding: 16px 20px; border-bottom: var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel__head h3 { font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; }
.panel__body { padding: 20px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.stat { border: 0.5px solid var(--ink-35); border-radius: var(--radius); padding: 16px 18px; }
.stat__num { font-family: var(--display); font-weight: 700; font-size: 27px; }
.stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-60); margin-top: 2px; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.1px; }
table.data th, table.data td { text-align: left; padding: 12px 16px; border-bottom: 0.5px solid var(--ink-35); vertical-align: top; }
table.data th { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-60); font-weight: 700; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--paper-2); }
.row-link { cursor: pointer; }
.cell-strong { font-weight: 700; }
.mono { font-variant-numeric: tabular-nums; }

/* Status-Pills (funktional, monochrom + Akzent) */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ink-35); white-space: nowrap; }
.status--entwurf { border-color: var(--ink-35); color: var(--ink-60); }
.status--daten_vollstaendig,
.status--in_pruefung,
.status--due_diligence,
.status--indikatives_angebot { background: var(--yellow); border-color: var(--black); color: var(--black); }
.status--abgeschlossen { background: var(--black); color: var(--yellow); border-color: var(--black); }
.status--abgelehnt { color: var(--ink-60); border-style: dashed; }

/* Detail-Layout */
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 4px 16px; font-size: 13.1px; }
.kv dt { color: var(--ink-60); }
.kv dd { margin: 0; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 0.5px solid var(--ink-35); font-size: 12.6px; }
.doc-item:last-child { border-bottom: none; }
.doc-meta { color: var(--ink-60); font-size: 11.3px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 10px 0 10px 18px; border-left: 2px solid var(--ink-12); position: relative; font-size: 12.6px; }
.timeline li::before { content: ''; position: absolute; left: -5px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); border: 1px solid var(--black); }
.timeline time { color: var(--ink-60); font-size: 11px; display: block; }

.empty { text-align: center; color: var(--ink-60); padding: 40px 16px; border: 0.5px dashed var(--ink-35); border-radius: var(--radius); }
.empty h4 { color: var(--black); text-transform: uppercase; letter-spacing: .05em; font-size: 12.6px; margin-bottom: 8px; }

.inline-form { display: grid; gap: 12px; }
.inline-form .field { margin-bottom: 0; }

/* ---- Rechtstexte -------------------------------------------------------- */
.legal-banner { background: var(--yellow); border: 1px solid var(--black); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 28px; font-size: 13.1px; }
.legal-banner strong { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.legal-doc { max-width: 760px; }
.legal-doc h1 { font-size: 30.6px; margin-bottom: 6px; }
.legal-doc h2 { font-size: 19.8px; margin: 32px 0 10px; }
.legal-doc h3 { font-size: 15.3px; margin: 22px 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.legal-doc p, .legal-doc li { color: rgba(30,30,30,.86); }
.legal-doc ul { padding-left: 20px; }
.legal-meta { color: var(--ink-60); font-size: 11.7px; margin-top: 4px; }
.legal { padding: 56px 0 84px; }
.container--narrow { max-width: 860px; }
.legal-doc__head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: var(--hair); }
.legal-doc__body { margin-top: 8px; }
.legal-doc ol { padding-left: 22px; }
.legal-doc li { margin: 5px 0; }
.legal-doc p { margin: 12px 0; line-height: 1.65; }

/* Fehlerseite */
.errorpage { padding: 90px 0 110px; }
.errorpage__inner { text-align: center; }
.errorpage__code { font-family: var(--display); font-size: 79.2px; line-height: 1; color: var(--ink-35); }
.errorpage__title { font-size: 23.4px; margin: 10px 0 8px; }
.errorpage__actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--black); color: rgba(255,255,255,.72); padding: 56px 0 40px; }
.site-footer .wordmark { color: var(--yellow); font-size: 27px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-about { margin-top: 14px; max-width: 34ch; }
.footer-col h5 { color: var(--paper); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-bottom: 14px; }
.footer-col a { display: block; text-decoration: none; color: rgba(255,255,255,.72); padding: 5px 0; font-size: 12.6px; }
.footer-col a:hover { color: var(--yellow); }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 0.5px solid rgba(255,255,255,.25); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11.3px; }
.footer-disclaimer { max-width: 70ch; color: rgba(255,255,255,.6); }

/* ---- Utilities ---------------------------------------------------------- */
.stack-12 > * + * { margin-top: 12px; }
.stack-20 > * + * { margin-top: 20px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-c { text-align: center; }
.hide { display: none !important; }

/* ---- Bewegung: Reveal, Hero-Auftakt, flüssiger Seitenfluss --------------- */
@keyframes reveal-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.animate-reveal { animation: reveal-up .28s ease both; }

/* Ruhiger Hero-Auftakt beim Laden (CSS-only: kein Flash, kein JS, gestaffelt) */
@keyframes hero-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero__lead { animation: hero-rise .6s cubic-bezier(.22,.61,.36,1) both; }
.hero--funnel .funnel-card { animation: hero-rise .6s cubic-bezier(.22,.61,.36,1) .08s both; }
.hero--funnel .trust-row { animation: hero-rise .6s cubic-bezier(.22,.61,.36,1) .16s both; }

/* Dashboards (Verkäuferportal, Admin, Beraterbereich): ruhiger einmaliger
   Einblend-Auftakt beim Laden – dieselbe Bewegungssprache wie der Hero, ohne
   Scroll-Observer (async geladene Inhalte erscheinen sicher in der Fläche). */
.dash { animation: hero-rise .5s cubic-bezier(.22,.61,.36,1) both; }

/* Scroll-Reveal: fließende Übergänge im Seitenverlauf. opacity:0 gilt NUR, wenn
   <html class="reveal-on"> per JS gesetzt wurde – ohne JS / bei reduced-motion
   bleibt jeder Inhalt sofort sichtbar (kein verstecktes Content-Risiko). */
[data-reveal], [data-reveal-group] > * {
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal-group] > * { transition-delay: var(--d, 0ms); }
.reveal-on [data-reveal], .reveal-on [data-reveal-group] > * { opacity: 0; transform: translateY(24px); }
.reveal-on [data-reveal].is-in, .reveal-on [data-reveal-group].is-in > * { opacity: 1; transform: none; }

/* Sanftes Smooth-Scroll für Anker, mit Versatz unter dem Sticky-Header */
html { scroll-behavior: smooth; }
#rechner, #ablauf, #faq { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px 56px; }
  .hero__copy { max-width: none; }
  .lead-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .auth-wrap { grid-template-columns: 1fr; min-height: 0; }
  .auth-aside { padding: 40px 32px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 14.4px; }
  .section { padding: 48px 0; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 0.5px solid var(--ink-35); }
  .step:last-child { border-bottom: none; }
  .trust { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .kv dt { margin-top: 8px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .nav-link { padding: 8px 8px; font-size: 11px; }
  .brand-link .wordmark { font-size: 19.8px; }
  .brand-tag { display: none; }
}

/* =========================================================================
   Handwerks-Funnel
   ========================================================================= */
.hero--funnel { text-align: center; }
.hero--funnel .hero__lead { max-width: 720px; margin: 0 auto; }
.hero__h1 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.01em; margin: 10px 0 14px; }
.hero--funnel .hero__sub { max-width: 60ch; margin-left: auto; margin-right: auto; }
.hero--funnel .hero__meta { justify-content: center; }

.funnel-card { background: var(--paper); border: var(--hair); border-radius: var(--radius); padding: 28px clamp(18px, 4vw, 36px); max-width: 660px; margin: 28px auto 0; text-align: left; }

.funnel-progress { display: flex; gap: 6px; justify-content: space-between; margin-bottom: 22px; }
.funnel-progress__step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; }
.funnel-progress__dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; border: var(--hair); background: var(--paper); color: var(--ink-60); }
.funnel-progress__lab { font-size: 11px; color: var(--ink-35); letter-spacing: 0.02em; }
.funnel-progress__step.is-active .funnel-progress__dot { background: var(--yellow); border-color: var(--black); color: var(--black); }
.funnel-progress__step.is-active .funnel-progress__lab { color: var(--black); font-weight: 600; }
.funnel-progress__step.is-done .funnel-progress__dot { background: var(--black); border-color: var(--black); color: var(--yellow); }

.funnel-step { animation: funnelIn 0.22s ease; }
@keyframes funnelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.funnel-q { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 3vw, 26px); line-height: 1.2; margin: 0 0 6px; }
.funnel-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: var(--ink-60); margin: 0 0 4px; }
.funnel-help { color: var(--ink-60); font-size: 12.6px; margin: 0 0 16px; }
.funnel-note { color: var(--ink-60); font-size: 11.7px; margin: 10px 0 0; }
.funnel-lead-in { margin: 16px 0 0; }

.opt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.opt-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.opt { font: inherit; text-align: left; background: var(--paper); border: var(--hair); border-radius: var(--radius); padding: 13px 15px; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; color: var(--black); }
.opt:hover { border-color: var(--black); }
.opt.is-selected { border-color: var(--black); background: var(--yellow-35); box-shadow: inset 0 0 0 1px var(--black); }

.funnel-extra { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.funnel-details summary { cursor: pointer; color: var(--ink-60); font-size: 12.6px; }
.funnel-exact-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.funnel-exact-row .field { flex: 1; }
.funnel-exact-row .affix { color: var(--ink-60); }
.funnel-unknown { align-self: flex-start; background: none; border: none; color: var(--ink-60); text-decoration: underline; cursor: pointer; font: inherit; padding: 2px 0; }
.funnel-unknown:hover { color: var(--black); }

.funnel-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.funnel-nav .btn { margin-left: auto; }
.funnel-back, .funnel-skip { background: none; border: none; color: var(--ink-60); cursor: pointer; font: inherit; padding: 6px 0; }
.funnel-back:hover, .funnel-skip:hover { color: var(--black); }

.funnel-loading { text-align: center; padding: 26px 0; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink-12); border-top-color: var(--black); margin: 0 auto 14px; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.corridor { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px; }
.corridor__val { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 5vw, 40px); }
.corridor__dash { color: var(--ink-35); font-size: 25.2px; }

.funnel-central { text-align: center; }
.central__value { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 7vw, 58px); line-height: 1; padding: 14px 18px; display: inline-block; background: var(--yellow); border-radius: var(--radius); margin: 10px 0 8px; }
.central__range { color: var(--ink-60); margin: 0; }

.funnel-disclaimer { margin-top: 20px; border-top: var(--hair); padding-top: 12px; }
.funnel-disclaimer summary { cursor: pointer; color: var(--ink-60); font-size: 11.7px; }
.funnel-disclaimer ul { margin: 10px 0 0; padding-left: 18px; }
.funnel-disclaimer li { color: var(--ink-60); font-size: 11px; margin-bottom: 6px; }

.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-label { font-weight: 600; font-size: 12.6px; }
.form-hint { color: var(--ink-60); font-size: 11px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.6px; color: var(--ink-60); margin: 8px 0; cursor: pointer; }
.consent input { margin-top: 3px; }
/* Online-Annahmestrecke: mehrere einzeln zu setzende Bestätigungen + Verbraucher-Zweig */
.consent-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.consent-branch { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 2px 1.6rem; padding: 10px 14px; border-left: 2px solid var(--hairline, rgba(0,0,0,.14)); background: rgba(0,0,0,.03); border-radius: 8px; }
.consent-branch[hidden] { display: none; }
/* Stammdaten-Maske + Ein-Klick-Annahme */
.contract-data { margin: 8px 0 14px; }
/* Kompaktere Felder in der Vertragsdaten-Maske (Standard-Input 16px ist hier zu groß) */
.contract-data .field { margin-bottom: 12px; }
.contract-data .field-label { font-size: 11.5px; margin-bottom: 5px; }
.contract-data .input { font-size: 12.6px; padding: 9px 11px; line-height: 1.45; height: auto; }
.consent--accept { padding: 12px 14px; border: 1px solid var(--hairline, rgba(0,0,0,.16)); border-radius: 10px; background: rgba(238,250,159,.10); }
/* „Meine Verträge"-Zeile im Portal */
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.doc-row__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.form-error { color: #B00020; font-size: 12.6px; margin: 8px 0 0; }

/* Kompakte, gut sichtbare Eingaben im Funnel (Umsatz, Gewinn, Mitarbeiter) */
.funnel-step .input { font-size: 16.2px; font-weight: 600; padding: 12px 14px; }
.funnel-step .input-affix { margin-top: 4px; }
.funnel-step .input-affix .affix { font-size: 13.5px; font-weight: 600; color: var(--ink-60); }
/* Segmentierter Umschalter Euro/Prozent – kompakt statt zwei großer Buttons */
.seg { display: flex; border: 1px solid var(--ink-35); border-radius: var(--radius); overflow: hidden; margin: 4px 0 10px; }
.seg button { flex: 1; border: none; background: var(--paper); padding: 9px 12px; font: inherit; font-weight: 600; color: var(--ink-60); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--ink-35); }
.seg button.is-selected { background: var(--yellow); color: var(--black); }
.seg button:hover { color: var(--black); }

.funnel-done { text-align: center; }
.done-check { width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); color: var(--black); display: grid; place-items: center; font-size: 27px; font-weight: 700; margin: 0 auto 14px; }

/* ---- Fragebogen: erweiterte Eingabetypen -------------------------------- */
/* Mehrjahres-Geldfelder (Umsatz/Gewinn) */
.year-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.year-field { display: flex; flex-direction: column; gap: 6px; }
.year-label { font-weight: 600; font-size: 11.7px; color: var(--ink-60); }
/* Mehrfachauswahl-Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { font: inherit; font-size: 12.6px; background: var(--paper); border: var(--hair); border-radius: 999px; padding: 8px 14px; cursor: pointer; color: var(--black); transition: border-color .12s, background .12s; }
.chip:hover { border-color: var(--black); }
.chip.is-selected { border-color: var(--black); background: var(--yellow); }
/* Ja/Nein-Folgefeld */
.yesno-detail { margin-top: 12px; }
/* Drag-&-Drop-Uploadzone */
.upload-zone { margin-top: 12px; border: 1.5px dashed var(--ink-35); border-radius: var(--radius); padding: 18px; background: var(--paper-2); text-align: center; transition: border-color .15s, background .15s; }
.upload-zone.is-dragover { border-color: var(--black); background: var(--yellow-35); }
.upload-hint { color: var(--ink-60); font-size: 12.6px; margin: 0; }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: var(--black); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.upload-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.upload-list li { font-size: 12.2px; color: var(--black); }
@media (max-width: 560px) { .year-grid { grid-template-columns: 1fr; } }

/* „So geht es weiter" – zwei Wege nach der Bewertung */
.next-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0 6px; text-align: left; }
.next-card { border: var(--hair); border-radius: var(--radius); padding: 20px; background: var(--paper); }
.next-card--accent { border-color: var(--black); }
.next-card h3 { font-size: 15.3px; margin-bottom: 6px; }
.next-card__lead { color: var(--ink-60); font-size: 12.6px; margin: 0 0 14px; }
.next-card__list { list-style: none; margin: 0 0 14px; padding: 0; }
.next-card__list li { font-size: 12.2px; color: var(--ink-60); padding: 3px 0 3px 20px; position: relative; }
.next-card__list li::before { content: '✓'; position: absolute; left: 0; color: var(--black); font-weight: 700; }
.slot-row { display: flex; gap: 8px; margin-top: 6px; }
.slot-row .select { flex: 1; }
.next-ok { color: var(--black); font-weight: 700; font-size: 12.6px; margin: 6px 0 0; }
.next-secondary { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
@media (max-width: 560px) { .next-steps { grid-template-columns: 1fr; } }

.trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; padding: 0; margin: 22px 0 0; color: var(--ink-60); font-size: 12.6px; }
.trust-row li::before { content: "✓ "; color: var(--black); font-weight: 700; }

.gewerke-grid { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 16px 0 0; }
.gewerke-chip { border: var(--hair); border-radius: 999px; padding: 8px 14px; font-size: 12.6px; background: var(--paper); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 18px; }
.section--alt { background: var(--paper-2); }
.btn--lg { padding: 15px 28px; font-size: 14.4px; }

.narrow-page { max-width: 660px; }
.verify-box { text-align: center; border: var(--hair); border-radius: var(--radius); padding: 40px 28px; background: var(--paper); }
.verify-box h1 { font-family: var(--display); }

.table-wrap { overflow-x: auto; margin-top: 16px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.6px; }
.data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: var(--hair); vertical-align: middle; }
.data-table th { color: var(--ink-60); font-weight: 600; white-space: nowrap; }
/* Aktionsspalten: Buttons UNTEREINANDER statt nebeneinander – nebeneinander zwingt die
   Spalte (bei white-space:nowrap) auf die Summe beider Breiten und lässt die Tabelle
   insgesamt breiter als der Viewport werden (horizontales Scrollen). Gestapelt bleibt
   die Spaltenbreite auf den breitesten Einzel-Button begrenzt. */
.row-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Marktplatz-Tabelle: FESTE Spaltenbreiten (table-layout: fixed) statt browserseitig
   geschätzter Breiten – bei automatischem Layout blieb die Tabelle trotz nur 4 Spalten
   breiter als der Container (Inhalte "wollten" mehr Platz, als tatsächlich da war) und
   erzwang horizontales Scrollen. Mit festen Prozentbreiten summiert sich alles auf 100 %,
   Inhalte brechen bei Bedarf innerhalb ihrer Zelle um. */
.data-table--market { table-layout: fixed; }
.data-table--market .col-betrieb { width: 17%; }
.data-table--market .col-kennzahlen { width: 40%; }
.data-table--market .col-profil { width: 19%; }
.data-table--market .col-aktion { width: 24%; }
.data-table--market td { vertical-align: top; padding-top: 14px; padding-bottom: 14px; }
/* Luft zwischen Profil-Badge („Premium-Profil") und der Inhaltszeile darunter. */
.data-table--market td .badge { display: inline-block; margin-bottom: 6px; }
.field--xs { padding: 6px 8px; font-size: 11.7px; }

.faq-item { border-bottom: var(--hair); padding: 14px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { color: var(--ink-60); margin: 10px 0 0; }

@media (max-width: 560px) {
  .form-grid-2 { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr; }
  .funnel-progress__lab { display: none; }
}

/* =========================================================================
   Admin: Lead-Filter, Conversion-Funnel-Report, Käuferansicht (MVP 2)
   ========================================================================= */
.filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .filter-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .filter-grid { grid-template-columns: 1fr; } }

/* Generische Karte (wird auf Startseite und in der Käuferansicht genutzt) */
.card { border: 0.5px solid var(--ink-35); border-radius: var(--radius); background: var(--paper); padding: 20px; }
.card h3 { font-size: 15.3px; margin-bottom: 8px; }
.card > p { color: var(--ink-60); font-size: 13.1px; }

/* Funnel-Auswertung */
.funnel-report { list-style: none; margin: 0; padding: 0; }
.funnel-report__row { padding: 12px 0; border-bottom: 0.5px solid var(--ink-35); }
.funnel-report__row:last-child { border-bottom: none; }
.funnel-report__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.6px; margin-bottom: 8px; }
.funnel-report__label { font-weight: 700; }
.funnel-report__num { color: var(--ink-60); font-variant-numeric: tabular-nums; }
.funnel-report__drop { color: var(--black); font-weight: 700; margin-left: 8px; }
.funnel-report__bar { height: 10px; background: var(--ink-08); border-radius: 999px; overflow: hidden; }
.funnel-report__bar > span { display: block; height: 100%; background: var(--yellow); border-right: 1px solid var(--black); }

/* Anonymisierte Käuferansicht */
.market-card__eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--ink-60); margin-bottom: 6px; }
.market-card .kv { margin-top: 10px; grid-template-columns: 130px 1fr; }
.market-card__ref { margin-top: 12px; padding-top: 10px; border-top: 0.5px solid var(--ink-35); color: var(--ink-60); font-size: 11.3px; }

/* =========================================================================
   Modernisierung: Seitenfluss, Abschluss-CTA, Vertrauens-Komponenten
   (flacher Swiss-Style bleibt – Akzent Gelb sparsam, Bewegung dezent)
   ========================================================================= */

/* Hero bekommt ruhige vertikale Luft, damit der Auftakt atmet */
.hero--funnel { padding: clamp(40px, 5vw, 60px) 0 clamp(44px, 6vw, 68px); }

/* Lesespalten für undefinierte Container (vorher ungestylt) */
.datentrust, .faq { max-width: 760px; }
.faq-item p { max-width: 64ch; }
.faq-item[open] summary { color: var(--black); }
.link { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: var(--ink-60); }

/* Trust-Reihe unter dem Funnel: klar lesbar (nicht gedämpft), gelbe Kreis-Häkchen */
.trust-row { color: var(--black); }
.trust-row li { display: inline-flex; align-items: center; }
.trust-row li::before {
  content: '✓'; display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-right: 8px; border-radius: 50%;
  background: var(--yellow); color: var(--black); font-size: 11px; font-weight: 700;
}

/* „Warum EXIT24“-Karten: flache Hover-Reaktion (Brand: keine Deko-Schatten). */
.card { transition: border-color .18s ease, transform .18s ease; }
.card:hover { border-color: var(--black); transform: translateY(-3px); }
.card--trust { border-left: 3px solid var(--yellow); }

/* Gewerke-Chips: sparsame Hover-Reaktion */
.gewerke-chip { transition: border-color .15s ease, background .15s ease; }
.gewerke-chip:hover { border-color: var(--black); background: var(--paper-2); }

/* Abschluss-CTA: schwarzes Band, das ruhig in den schwarzen Footer überfließt.
   Macht das Schwarz zur dramaturgischen Schluss-Zone statt zur harten Kante. */
.cta { background: var(--black); color: var(--paper); padding: clamp(56px, 8vw, 88px) 0; text-align: center; }
.cta__inner { max-width: 680px; margin: 0 auto; }
.cta h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.01em; }
.cta h2::before { content: ''; display: block; width: 40px; height: 4px; background: var(--yellow); margin: 0 auto 20px; }
.cta p { color: rgba(255, 255, 255, .72); font-size: 16.2px; margin: 14px 0 26px; }
.cta :focus-visible { outline-color: var(--yellow); }
/* feine Naht zwischen CTA und Footer, statt Doppel-Schwarz ohne Kante */
.site-footer { border-top: 0.5px solid rgba(255, 255, 255, .18); }

/* Vertrauenszeile auf Login/Registrierung (greift das .trust__item-Muster auf) */
.auth-trust { display: flex; gap: 9px; align-items: flex-start; font-size: 11.7px; color: var(--ink-60); border-left: 3px solid var(--yellow); padding-left: 12px; margin: -6px 0 22px; }
.auth-trust__icon { flex: none; }

/* Bestätigungs-/Abmelde-Box: Zustände sichtbar unterscheiden */
.verify-box .done-check { margin: 0 auto 16px; }
.verify-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 25.2px; font-weight: 700; margin: 0 auto 16px; border: 1px solid var(--black); }
.verify-mark--neutral { background: var(--paper-2); color: var(--ink-60); }
.verify-mark--warn { background: var(--paper); color: var(--black); border-style: dashed; }

/* Ergebnis-Wiederansicht (/ergebnis): Inline-Styles ersetzt durch Klassen */
.price--sm { font-size: clamp(28px, 4vw, 38px); }
.fineprint { color: var(--ink-60); font-size: 12.2px; margin-top: 16px; }

/* ---- Abstands-Hilfsklassen (ersetzen verstreute Inline-Styles) ---------- */
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); } .mt-4 { margin-top: var(--s4); }
.mb-1 { margin-bottom: var(--s1); } .mb-2 { margin-bottom: var(--s2); } .mb-3 { margin-bottom: var(--s3); }
.m-0 { margin: 0; }
.text-sm { font-size: 11.7px; }
.field--flush { margin-bottom: 0; }

/* Detailseiten: zusammenhängende, ruhige Kopfzone + dezenter Zurück-Link */
.detail-grid { margin-top: var(--s3); }
.dash__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.backlink { color: inherit; text-decoration: none; }
.backlink:hover { text-decoration: underline; text-underline-offset: 2px; }
.funnel-card--wide { max-width: none; }
.notice-strip--inline { border-radius: var(--radius); margin-bottom: var(--s3); }

/* Typo-Feinschliff: einheitliche Laufweite großer Überschriften */
.dash__title { letter-spacing: -.01em; }

/* =========================================================================
   DESIGN-ÜBERNAHME — globaler Dunkel/Editorial-Look (komplette App)
   Strikt zweifarbig (Schwarz/Off-White + Gelb-Akzent). Steht bewusst am
   Dateiende und überschreibt die früheren hellen Regeln (Kaskade). Alle
   JS-Hooks/Klassennamen bleiben unverändert – nur Optik.
   ========================================================================= */
body { background: var(--exit-black); color: var(--off-white); }
::selection { background: var(--exit-yellow); color: var(--exit-black); }
h1, h2, h3, h4 { color: var(--off-white); }
:focus-visible { outline-color: var(--exit-yellow); }

/* Gedämpfter Text → hell auf Dunkel (statt dunkelgrau) */
.muted, .hint, .funnel-help, .funnel-note, .section__lead, .step__text, .dash__role,
.stat__label, .doc-meta, .auth-card__sub, .auth-switch, .legal-meta, .fineprint,
.next-card__lead, .next-card__list li, .form-hint, .central__range, .funnel-report__num,
.market-card__eyebrow, .footer-disclaimer, .faq-item p { color: var(--paper-70); }
.kv dt { color: var(--paper-70); }

/* Header: dunkel, Blur, Hairline; beim Scrollen kompakter (CSS-Scroll-Timeline, kein JS) */
.site-header { background: rgba(22, 22, 22, .92); border-bottom: .5px solid var(--hair-light);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.brand-link { color: var(--off-white); align-items: center; gap: 12px; }
.site-header .wordmark { color: var(--off-white); }
/* Slogan direkt hinter der Wortmarke (Hairline-Trenner), erst ab 1040px sichtbar */
.brand-rule { display: none; width: .5px; align-self: stretch; min-height: 22px; background: var(--hair-light); }
.brand-slogan { display: none; font-family: var(--sans); font-weight: 700; text-transform: none;
  letter-spacing: .005em; font-size: 11.7px; color: var(--off-white); white-space: nowrap; }
@media (min-width: 1040px) { .brand-rule, .brand-slogan { display: inline-block; } }
.nav-link { color: var(--off-white); }
.nav-link:hover { background: rgba(250, 250, 246, .10); }
.nav-sep { background: var(--hair-light); }
@supports (animation-timeline: scroll()) {
  @keyframes hdr-shrink {
    to { min-height: 52px; }
  }
  @keyframes hdr-bg {
    to { background: rgba(14,14,14,.97); border-bottom-color: var(--hair-light); }
  }
  .site-header__inner { animation: hdr-shrink both linear; animation-timeline: scroll(root); animation-range: 0 140px; }
  .site-header { animation: hdr-bg both linear; animation-timeline: scroll(root); animation-range: 0 140px; }
  .site-header .wordmark { transition: font-size var(--dur) var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header__inner, .site-header { animation: none !important; }
}

/* Buttons */
.btn { background: var(--exit-black); color: var(--exit-yellow); border: 1px solid var(--exit-yellow); border-radius: var(--radius); transition: transform var(--dur) var(--ease), background var(--dur); }
.btn:hover { background: var(--exit-black); }
.btn--yellow, .btn--primary { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); }
.btn--yellow:hover, .btn--primary:hover { background: var(--exit-yellow); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--off-white); border: .5px solid var(--hair-light); }
.btn--ghost:hover { background: rgba(250, 250, 246, .08); border-color: var(--off-white); color: var(--off-white); }

/* Formularelemente dunkel */
.input, .select, .textarea { background-color: var(--black-900); color: var(--off-white); border: .5px solid var(--hair-light); }
.input::placeholder, .textarea::placeholder { color: rgba(250, 250, 246, .45); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--exit-yellow); outline-color: var(--exit-yellow); }
.field-label, .form-label { color: var(--paper-70); }
/* Auch native Selects (z. B. Termin/Fragebogen mit class="field") dunkel + eigener Pfeil.
   WICHTIG: background-color statt -shorthand, sonst werden Pfeil-Position/-Größe zurückgesetzt
   und die Pfeil-Gradients kacheln über das ganze Feld (Grafikfehler). */
/* Text-Eingaben mit class="field" (Funnel-Kontakt, Termin): gleiche Maße wie select.field –
   ohne diese Regel fallen sie auf den Browser-Standard (19px hoch, 13px Schrift) zurück
   und das Rollen-Auswahlfeld wirkt wie ein Ausreißer. */
input.field, textarea.field {
  padding: 12px 16px; min-height: 44px; font-family: var(--sans); font-size: 13.5px;
  border-radius: var(--radius); box-sizing: border-box;
}
.select, select.field {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: var(--black-900); color: var(--off-white); border: .5px solid var(--hair-light);
  border-radius: var(--radius); padding: 12px 36px 12px 16px; min-height: 44px; font-family: var(--sans); font-size: 13.5px;
  background-image: linear-gradient(45deg, transparent 50%, var(--off-white) 50%), linear-gradient(135deg, var(--off-white) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select.field:focus { border-color: var(--exit-yellow); outline: 2px solid var(--exit-yellow); outline-offset: 1px; }
/* Aufklapp-Optionen lesbar: helle Liste mit dunklem Text. Vermeidet das
   „schwarz auf schwarz"-Problem, das entsteht, wenn Browser die Textfarbe der
   Option nicht aus der dunklen Feldfarbe ableiten (Windows/Chromium). */
.select option, select.field option { background: #ffffff; color: #1e1e1e; }
.checkbox, .consent { color: var(--paper-70); }
.checkbox input, .consent input { accent-color: var(--exit-yellow); }

/* Panels / Karten dunkel */
.panel, .card { background: var(--black-900); border: .5px solid rgba(238, 250, 159, .22); color: var(--off-white); }
.panel + .panel { margin-top: 18px; }
.panel__head { border-bottom: .5px solid var(--hair-light); }
.card > p, .card p { color: var(--paper-70); }
.card:hover { border-color: rgba(238, 250, 159, .5); }
.card--trust { border-left: 3px solid var(--exit-yellow); }

/* Tabellen / Listen / Stats */
table.data th, table.data td, .data-table th, .data-table td { border-bottom-color: var(--hair-light); }
table.data th, .data-table th { color: var(--paper-70); }
table.data tbody tr:hover { background: rgba(250, 250, 246, .05); }
.stat { background: var(--black-900); border-color: var(--hair-light); }
.doc-item { border-bottom-color: var(--hair-light); }
.timeline li { border-left-color: var(--hair-light); }
.timeline li::before { background: var(--exit-yellow); border-color: var(--exit-black); }
.empty { border-color: var(--hair-light); color: var(--paper-70); }
.empty h4 { color: var(--off-white); }

/* Tabs / Status */
.dash__tabs { border-bottom-color: var(--hair-light); }
.tab { color: var(--paper-70); }
.tab[aria-selected="true"] { color: var(--off-white); border-bottom-color: var(--exit-yellow); }
.tab:hover { color: var(--off-white); }
.status { border-color: var(--hair-light); color: var(--paper-70); }

/* Alerts */
.alert { background: var(--black-900); border-color: var(--hair-light); color: var(--off-white); }
.alert--ok { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); }
.alert--err { background: var(--black-950); border-color: var(--exit-yellow); color: var(--off-white); }
.alert--info { background: var(--black-900); border-color: var(--hair-light); }

/* Sektionen / Divider */
.section { border-bottom-color: var(--hair-light); }
.section--alt { background: var(--black-900); }
.hr, hr { border-top-color: var(--hair-light); }

/* Hero (Startseite): dunkel statt Gelb (Porträt-Hintergrund folgt im Hero-Schritt) */
.hero, .hero--funnel { background: var(--exit-black); color: var(--off-white); border-bottom: none; }
.hero__h1, .hero__sub, .eyebrow { color: var(--off-white); }

/* Funnel-Karte + Auswahl */
.funnel-card { background: var(--black-900); border: .5px solid rgba(238, 250, 159, .22); box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }
.funnel-q, .funnel-kicker { color: var(--off-white); }
/* „Zurück"/„Überspringen" auf der dunklen Karte hell statt dunkel (sonst schwarz auf schwarz). */
.funnel-back, .funnel-skip { color: var(--paper-70); }
.funnel-back:hover, .funnel-skip:hover { color: var(--off-white); }
.opt { background: var(--exit-black); color: var(--exit-yellow); border: .5px solid rgba(244,244,238,.16); font-weight: 700;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur), transform var(--dur) var(--ease); }
.opt:hover { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); transform: translateY(-2px); }
.opt.is-selected { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); box-shadow: none; }
.seg { border-color: var(--hair-light); }
.seg button { background: var(--black-900); color: var(--paper-70); }
.seg button + button { border-left-color: var(--hair-light); }
.seg button.is-selected { background: var(--exit-yellow); color: var(--exit-black); }
.funnel-progress__dot { background: var(--black-900); border: .5px solid var(--hair-light); color: var(--paper-70); }
.funnel-progress__lab { color: var(--paper-70); }
.corridor__val { color: var(--off-white); }
.corridor__dash { color: var(--paper-70); }
.central__value { background: var(--exit-yellow); color: var(--exit-black); box-shadow: 0 0 40px rgba(238, 250, 159, .25); }
.year-label { color: var(--paper-70); }
.upload-zone { background: var(--black-950); border-color: var(--hair-light); }
.upload-hint { color: var(--paper-70); }
.chips .chip, .gewerke-chip { background: var(--black-900); color: var(--off-white); border-color: var(--hair-light); }
.chip.is-selected { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); }
.gewerke-chip:hover { background: var(--black-950); border-color: var(--exit-yellow); }

/* „So geht es weiter"-Karten / Trust-Reihe */
.next-card { background: var(--black-900); border-color: var(--hair-light); }
.next-card--accent { border-color: var(--exit-yellow); }
.next-card__list li::before, .trust-row li::before { background: var(--exit-yellow); color: var(--exit-black); }
.trust-row { color: var(--off-white); }
.next-ok { color: var(--exit-yellow); }

/* Auth-Seiten */
.auth-card h1 { color: var(--off-white); }
.auth-aside { background: var(--black-950); }
.auth-trust { color: var(--paper-70); border-left-color: var(--exit-yellow); }

/* Bestätigungs-/Fehler-/Rechtsseiten */
.verify-box { background: var(--black-900); border-color: var(--hair-light); }
/* Alle Texte der dunklen Bestätigungsbox hell – .step-list fällt sonst auf ihren
   Fast-Schwarz-Fallback zurück (--ink ist nicht definiert) → unsichtbar auf Dunkel. */
.verify-box h1, .verify-box h2, .verify-box strong { color: var(--off-white); }
.verify-box p, .verify-box .step-list, .verify-box .step-list li { color: var(--paper-70); }
.verify-mark--neutral { background: var(--black-950); color: var(--paper-70); border-color: var(--hair-light); }
.verify-mark--warn { background: var(--black-900); color: var(--off-white); border-color: var(--hair-light); }
.errorpage__code { color: rgba(250, 250, 246, .25); }
.legal-doc p, .legal-doc li { color: var(--paper-70); }
.legal-banner { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); }
.legal-banner strong { color: var(--exit-black); }

/* Abschluss-CTA als Gelb-Band (Spec): schwarzer Text */
.cta { background: var(--exit-yellow); color: var(--exit-black); }
.cta h2 { color: var(--exit-black); }
.cta h2::before { background: var(--exit-black); }
.cta p { color: rgba(30, 30, 30, .72); }
.cta .btn { background: var(--exit-black); color: var(--exit-yellow); border-color: var(--exit-black); }
.cta :focus-visible { outline-color: var(--exit-black); }

/* Funnel-Auswertung (Balken) */
.funnel-report__row { border-bottom-color: var(--hair-light); }
.funnel-report__bar { background: rgba(250, 250, 246, .12); }
.funnel-report__bar > span { background: var(--exit-yellow); border-right-color: var(--exit-black); }
.funnel-report__drop { color: var(--exit-yellow); }

/* Links als dezenter Akzent */
.link { color: var(--off-white); }
.link:hover { color: var(--exit-yellow); }
.market-card__ref { border-top-color: var(--hair-light); color: var(--paper-70); }

/* =========================================================================
   EDITORIAL-STARTSEITE — 1:1-Übernahme aus dem Prototyp
   (Hero mit Porträt + Glow + Kid-Marker-Claim, Bildbänder, Hell/Dunkel-
   Wechsel, Laptop-Mockup, Testimonial, Divider, CTA). Reine Optik.
   ========================================================================= */

/* Gelb-Akzent nur auf dunklem Grund */
.accent-y { color: var(--exit-yellow); }
.eyebrow--accent { color: var(--exit-yellow); }
.section--light .eyebrow { color: rgba(30,30,30,.55); }

/* Startseite: breiterer Editorial-Raster (Prototyp = 1280px) */
body[data-page="home"] .container { max-width: 1280px; }

/* ---- Logo (Wortmarke → echtes SVG, Gelb↔Schwarz-Crossfade) ---- */
.brand-logo { position: relative; display: inline-block; height: 30px; flex: none; }
.brand-logo img { display: block; height: 100%; width: auto; }
.brand-logo__b { position: absolute; left: 0; top: 0; opacity: 0; }
.footer-logo { height: 34px; width: auto; display: block; }

/* ---- Hero: vollflächiges Porträt + Glow-Blobs ---- */
.hero--funnel { position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(120px, 14vh, 148px) 0 clamp(64px, 8vw, 90px); }
.hero__media { position: absolute; inset: 0; z-index: 0; opacity: .82;
  background: var(--exit-black) url('/static/img/ed-portrait-front.jpg') no-repeat center 18% / cover; }
.hero__veil { position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(14,14,14,.42) 0%, rgba(14,14,14,0) 30%, rgba(14,14,14,.18) 100%),
    radial-gradient(ellipse at center, rgba(30,30,30,.06), rgba(30,30,30,.55) 86%); }
.hero__blob { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.hero__blob--1 { top: -180px; right: -160px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(238,250,159,.16), rgba(238,250,159,0) 62%); filter: blur(8px); }
.hero__content { position: relative; z-index: 1; }

/* Hero-Badges (Modell / Testwerte) in Gelb – gut sichtbar auf Dunkel */
.badge--test { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); }
.badge--test.badge--dot::before { background: var(--exit-black); }
.badge--draft { background: transparent; color: var(--exit-yellow); border-color: rgba(238,250,159,.5); }
/* Widerspruch, der Aufmerksamkeit braucht (z. B. gelistet, aber Freigabe widerrufen). */
.badge--warn { background: #e5484d; color: #fff; border-color: #e5484d; }

/* Headline */
body[data-page="home"] .hero--funnel .hero__lead { max-width: 1080px; }
.hero__h1 { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 7.2vw, 100px); line-height: .96;
  letter-spacing: -.02em; margin: 0; color: var(--off-white); text-wrap: balance; }
.hero--funnel .hero__sub { color: rgba(244,244,238,.72); font-size: 16.2px; line-height: 1.6; max-width: 620px;
  margin: 26px auto 0; }

/* Funnel-Karte im Prototyp-Stil */
.funnel-card { max-width: 780px; margin: 42px auto 0; text-align: left; }
.funnel-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.funnel-card__eyebrow { font-size: 11.7px; letter-spacing: .16em; text-transform: uppercase; color: var(--exit-yellow); font-weight: 700; }
.funnel-card__meta { font-size: 11.7px; color: rgba(244,244,238,.5); }

/* Glow-Blob + Pill-Puls (reduced-motion-sicher) */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes glowPulse { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__blob--1 { animation: floatY 11s ease-in-out infinite; }
  .pill__dot { animation: glowPulse 3.2s ease-in-out infinite; }
}

/* ---- Editorial-Bildbänder ---- */
.band { padding: clamp(86px, 10vw, 140px) 0; position: relative; }
.band__grid { max-width: 1280px; margin: 0 auto; padding: 0 26px; display: grid; align-items: center; gap: clamp(36px, 5vw, 70px); }
.band__media { position: relative; overflow: hidden; margin: 0; background: var(--black-900); }
.band__media picture, .divider picture { display: contents; }
.band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band__media--rounded { border-radius: var(--radius); min-height: 560px; }
.band__title { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.6vw, 66px); line-height: 1.0;
  letter-spacing: -.02em; margin: 0; color: var(--off-white); }
.band__text { font-size: 15.3px; line-height: 1.66; color: rgba(244,244,238,.7); margin: 24px 0 0; max-width: 460px; }
.band--ergebnis .band__text { max-width: 440px; }

/* sanftes Parallax (CSP-konform, reduced-motion-sicher) */
@keyframes parY { from { transform: translateY(-7%) scale(1.16); } to { transform: translateY(7%) scale(1.16); } }
.parallax { animation: parY linear both; animation-timeline: view(); animation-range: cover; will-change: transform; }
@supports not (animation-timeline: view()) { .parallax { animation: none; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .parallax { animation: none !important; transform: none !important; } }

/* Band „Ihr Lebenswerk" (dunkel, vollflächiges Bild links) */
.band--lebenswerk { padding: 0; background: var(--black); border-top: .5px solid rgba(244,244,238,.16); border-bottom: .5px solid rgba(244,244,238,.16); }
.band--lebenswerk .band__grid { padding: 0; gap: 0; align-items: stretch; grid-template-columns: .8fr 1.2fr; }
.band--lebenswerk .band__media { min-height: 540px; border-right: .5px solid rgba(244,244,238,.16); }
.band__media-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,22,22,.05), rgba(22,22,22,0) 45%, rgba(22,22,22,.5) 100%); }
.band--lebenswerk .band__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(44px, 6vw, 86px); }
.eyebrow--accent { display: inline-block; margin-bottom: 22px; letter-spacing: .22em; }

/* Kennzahlen */
.kpis { display: flex; gap: 34px; margin-top: 40px; flex-wrap: wrap; }
.kpi--sep { border-left: .5px solid rgba(244,244,238,.3); padding-left: 34px; }
.kpi__num { font-family: var(--display); font-weight: 800; font-size: 30.6px; line-height: 1; color: var(--exit-yellow); }
.kpi__lab { font-size: 11.7px; color: rgba(244,244,238,.55); margin-top: 7px; }

/* ---- Helle Sektionen ---- */
.section--light { background: var(--off-white); color: var(--exit-black); border-bottom: none; }
.section--light h2, .section--light h3, .section--light h4, .section--light .section__title { color: var(--exit-black); }
.section--light p, .section--light li { color: var(--ink-70); }
.section--light .link { color: var(--exit-black); }
.section--light .link:hover { color: var(--exit-black); opacity: .7; }

/* „So funktioniert es" (hell, Bild links) */
.band--how .band__grid--how { grid-template-columns: .64fr 1.36fr; align-items: stretch; }
.how__intro { max-width: 560px; margin-bottom: 44px; }
.how__title { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4vw, 56px); line-height: 1.02;
  letter-spacing: -.015em; margin: 14px 0 0; }
.steps--proto { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 40px; row-gap: 0; list-style: none; margin: 0; padding: 0; }
.pstep { padding: 28px 0 30px; border-top: .5px solid var(--hair-dark); }
.pstep__no { font-family: var(--display); font-weight: 800; font-size: 37.8px; color: rgba(30,30,30,.18); line-height: 1; display: block; }
.pstep h3 { font-family: var(--sans); font-weight: 700; font-size: 17.1px; margin: 16px 0 9px; letter-spacing: -.01em; }
.pstep p { font-size: 13.5px; line-height: 1.6; color: rgba(30,30,30,.66); margin: 0; max-width: 300px; }
@media (max-width: 600px) { .steps--proto { grid-template-columns: 1fr; } }
/* dezenter Übergang ins folgende dunkle Band (wie Prototyp) */
.band--how { position: relative; }
.band--how .band__grid--how { position: relative; z-index: 1; }
.band--how::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,30,30,0), rgba(14,14,14,.55)); }

/* ---- Ergebnis-Showcase + Laptop-Mockup ---- */
.band--ergebnis { background: var(--exit-black); overflow: hidden; }
.band--ergebnis .band__grid--ergebnis { grid-template-columns: .92fr 1.08fr; gap: 64px; }
.ergebnis__title { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.02;
  letter-spacing: -.015em; margin: 14px 0 22px; color: var(--off-white); }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { position: relative; padding-left: 31px; font-size: 13.5px; color: rgba(244,244,238,.82); }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 5px;
  background: var(--exit-yellow); color: var(--exit-black); display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; }
.laptop__lid { background: var(--black-950); border: .5px solid rgba(238,250,159,.25); border-radius: 14px 14px 4px 4px;
  padding: 16px; box-shadow: 0 50px 100px rgba(0,0,0,.6); }
.laptop__bar { display: flex; gap: 6px; margin-bottom: 14px; }
.laptop__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(244,244,238,.2); }
.laptop__screen { background: var(--black-900); border-radius: 8px; padding: 30px 28px; border: .5px solid rgba(244,244,238,.08); }
.laptop__eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,244,238,.5); }
.laptop__range { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 18px; }
.laptop__val { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.4vw, 46px); color: var(--exit-yellow); line-height: 1; }
.laptop__rest { font-size: 16.2px; color: rgba(244,244,238,.5); }
.laptop__corridor { height: 9px; border-radius: 100px; background: rgba(244,244,238,.1); position: relative; overflow: hidden; }
.laptop__corridor span { position: absolute; top: 0; bottom: 0; left: 28%; right: 18%; background: var(--exit-yellow); border-radius: 100px; }
.laptop__scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: rgba(244,244,238,.4); }
.laptop__foot { margin-top: 22px; padding-top: 18px; border-top: .5px solid rgba(244,244,238,.12);
  display: flex; justify-content: space-between; font-size: 11.7px; color: rgba(244,244,238,.6); }
.laptop__base { height: 9px; background: var(--black-950); border-radius: 0 0 10px 10px; margin: 0 -10px;
  border: .5px solid rgba(238,250,159,.12); border-top: none; }
.laptop__cap { text-align: center; font-size: 11px; color: rgba(244,244,238,.35); margin-top: 14px; letter-spacing: .04em; }

/* ---- Vertrauen (hell) ---- */
.vertrauen__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 56px; }
.vertrauen__title { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.02;
  letter-spacing: -.015em; margin: 14px 0 0; max-width: 620px; }
.vertrauen__intro { max-width: 340px; font-size: 13.5px; line-height: 1.6; color: rgba(30,30,30,.66); margin: 0; }
.vertrauen__head .eyebrow { letter-spacing: .22em; }
.partners .eyebrow { letter-spacing: .18em; color: rgba(30,30,30,.5); }
.trust-cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: .5px solid var(--hair-dark); border-bottom: .5px solid var(--hair-dark); }
.tcol { padding: 40px 30px 44px; border-right: .5px solid rgba(30,30,30,.18); }
.tcol:first-child { padding-left: 0; }
.tcol:last-child { padding-right: 0; border-right: none; }
.tcol__mark { width: 30px; height: 30px; border-radius: 8px; background: var(--exit-black); color: var(--exit-yellow);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.tcol h3 { font-family: var(--sans); font-weight: 700; font-size: 17.1px; margin: 22px 0 10px; color: var(--exit-black); }
.tcol p { font-size: 13.5px; line-height: 1.6; color: rgba(30,30,30,.66); margin: 0; max-width: 280px; }

.vertrauen__lower { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; margin-top: 48px; }
.quote { background: var(--exit-black); color: var(--off-white); border-radius: var(--radius); overflow: hidden;
  display: grid; grid-template-columns: .46fr 1fr; margin: 0; }
.quote__media { position: relative; min-height: 300px; border-right: .5px solid rgba(244,244,238,.16); }
.quote__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.quote__body { padding: clamp(28px, 3.2vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.quote__mark { font-family: var(--display); font-size: 63px; color: var(--exit-yellow); line-height: .4; height: 34px; display: block; }
.vertrauen .quote__text { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.36;
  letter-spacing: -.01em; margin: 0 0 24px; color: var(--off-white); }
.vertrauen .quote__name { font-weight: 700; font-size: 11px; color: var(--off-white); }
.vertrauen .quote__role { font-size: 11.7px; color: rgba(244,244,238,.55); }
.partners { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.partners__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.partner-ph { min-height: 60px; padding: 8px 14px; text-align: center; border-radius: var(--radius); border: .5px solid rgba(30,30,30,.25);
  background: repeating-linear-gradient(45deg, rgba(30,30,30,.03) 0 7px, transparent 7px 14px);
  display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: .04em; color: rgba(30,30,30,.62);
  text-decoration: none; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
a.partner-ph:hover, a.partner-ph:focus-visible { border-color: var(--exit-black); color: var(--exit-black); background: rgba(238,250,159,.28); }
.partners__note { font-size: 11px; line-height: 1.55; color: rgba(30,30,30,.5); margin: 6px 0 0; }
.partners__links { font-size: 11px; margin: 4px 0 0; }

/* ---- Kinematischer Divider ---- */
.divider { position: relative; overflow: hidden; isolation: isolate; background: var(--black-950);
  min-height: clamp(440px, 62vh, 660px); display: flex; align-items: center; justify-content: center; text-align: center;
  border-bottom: none; }
.divider__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%; opacity: .7; }
.divider__veil { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(14,14,14,.2), rgba(14,14,14,.9) 80%); }
.divider__content { position: relative; z-index: 1; max-width: 880px; padding: 0 26px; }
.divider__title { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; line-height: 1.1;
  font-size: clamp(28px, 4.4vw, 60px); color: var(--off-white); margin: 20px 0 0; text-wrap: balance; }

/* ---- CTA ---- */
.btn--lg { padding: 19px 38px; font-size: 14.4px; }
.btn--invert { background: var(--exit-black); color: var(--exit-yellow); border-color: var(--exit-black); }
.btn--invert:hover { background: var(--exit-black); transform: translateY(-3px); }


/* ---- Funnel-Zentralzahl: pulsierender Glow (wie Prototyp-Klimax) ---- */
@keyframes centralGlow { 0%,100% { box-shadow: 0 0 40px rgba(238,250,159,.28); } 50% { box-shadow: 0 0 78px rgba(238,250,159,.55); } }
.central__value { box-shadow: 0 0 48px rgba(238,250,159,.3); }
@media (prefers-reduced-motion: no-preference) { .central__value { animation: centralGlow 3.6s ease-in-out infinite; } }

/* ---- Abschluss-CTA: große Institut-Headline (wie Prototyp) ---- */
.cta { padding: clamp(80px, 9vw, 130px) 0; }
.cta__inner { max-width: 880px; }
.cta h2 { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5.6vw, 80px); line-height: .98; letter-spacing: -.02em; }
.cta h2::before { display: none; }
.cta p { font-size: 16.2px; max-width: 520px; margin: 22px auto 34px; }

/* ---- Footer (Prototyp: #161616, prominenter Slogan) ---- */
.site-footer { background: var(--black-900); }
.footer-top { grid-template-columns: 1.6fr 1fr 1fr; }
.footer-slogan { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: -.01em;
  text-transform: none; color: var(--off-white); margin-top: 22px; }
.footer-logo { margin: 0; }

/* ---- Kontakt & Über uns ------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
.contact-address { font-style: normal; line-height: 1.6; }
.contact-cta { margin-top: 40px; padding: 32px; border-radius: var(--radius);
  background: var(--black-900); border: .5px solid var(--hair-light); color: var(--off-white); text-align: center; }
.contact-cta h2 { color: var(--off-white); margin: 0 0 8px; }
.contact-cta p { margin: 0 auto 20px; max-width: 520px; color: var(--paper-70); }
.contact-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.about-person { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: center;
  margin: 36px 0; }
.about-person__media img { width: 100%; height: auto; border-radius: var(--radius); display: block;
  object-fit: cover; }
.about-person__text h2 { margin: 0 0 4px; }
.about-person__role { color: var(--paper-70); font-weight: 600; margin: 0 0 16px; }
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0; }
.about-value { padding: 22px; border: .5px solid var(--hair-light); border-radius: var(--radius); }
.about-value h3 { margin: 0 0 8px; }
.about-value p { margin: 0; color: var(--paper-70); font-size: 13.5px; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
  .about-person { grid-template-columns: 1fr; }
  .about-person__media { max-width: 300px; }
  .about-values { grid-template-columns: 1fr; }
}

/* ---- Responsive: Bänder stapeln ---- */
@media (max-width: 900px) {
  /* Footer wieder einspaltig: die Prototyp-Regel oben (.footer-top 3-spaltig, ohne
     Media-Query) überschreibt sonst den Mobil-Kollaps und der Footer läuft seitlich
     über den Viewport hinaus. Hier – nach der Prototyp-Regel – gewinnt der Kollaps. */
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .band--lebenswerk .band__grid, .band--how .band__grid--how, .band--ergebnis .band__grid--ergebnis,
  .vertrauen__lower, .quote, .trust-cols { grid-template-columns: 1fr; }
  .band--lebenswerk .band__media { min-height: 320px; border-right: none; border-bottom: .5px solid var(--hair-light); }
  .band--how .band__media--rounded { min-height: 320px; }
  .quote__media { min-height: 240px; border-right: none; border-bottom: .5px solid rgba(244,244,238,.16); }
  .tcol { border-right: none; border-bottom: .5px solid rgba(30,30,30,.18); padding: 28px 0; }
  .tcol:last-child { border-bottom: none; }
}

/* ---- Header der Startseite: transparent über Hero → hell beim Scrollen ---- */
body[data-page="home"] .site-header { background: transparent; border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Nav-Links auf der Startseite im Prototyp-Stil: Satzschrift, leicht, Opacity-Hover */
body[data-page="home"] .nav-link { text-transform: none; font-weight: 400; letter-spacing: .01em; font-size: 12.6px; opacity: .78; }
body[data-page="home"] .nav-link:hover { opacity: 1; background: transparent; }
@supports (animation-timeline: scroll()) {
  body[data-page="home"] .site-header { animation: home-hdr both linear; animation-timeline: scroll(root); animation-range: 0 90px; }
  body[data-page="home"] .nav-link, body[data-page="home"] .brand-slogan,
  body[data-page="home"] .brand-slogan .accent-y { animation: home-ink both linear; animation-timeline: scroll(root); animation-range: 0 90px; }
  body[data-page="home"] .brand-logo__y { animation: fade-out both linear; animation-timeline: scroll(root); animation-range: 0 90px; }
  body[data-page="home"] .brand-logo__b { animation: fade-in both linear; animation-timeline: scroll(root); animation-range: 0 90px; }
  @keyframes home-hdr { to { background: rgba(244,244,238,.92); border-bottom-color: rgba(30,30,30,.18); } }
  @keyframes home-ink { to { color: #1E1E1E; } }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes fade-in { to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .site-header { background: rgba(244,244,238,.95); border-bottom: .5px solid rgba(30,30,30,.18); }
  body[data-page="home"] .nav-link, body[data-page="home"] .brand-slogan,
  body[data-page="home"] .brand-slogan .accent-y { color: #1E1E1E; }
  body[data-page="home"] .brand-logo__y { opacity: 0; }
  body[data-page="home"] .brand-logo__b { opacity: 1; }
}

/* =========================================================================
   ANONYMER M&A-TEASER (/portal/teaser) — One-Pager als „Dokument-Blatt".
   Helles Blatt (druck-/PDF-sicher) mit dunklen Marken-Bändern und dunklen
   Diagramm-Panels (gelb/off-white). print-color-adjust:exact erhält die Farben.
   ========================================================================= */
.teaser-toolbar { background: var(--black-900); border-bottom: .5px solid var(--hair-light); }
.teaser-toolbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; }

.teaser { max-width: 920px; margin: 28px auto; background: var(--off-white); color: var(--exit-black);
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* 1 · Kopf-Band */
.teaser__head { background: var(--exit-black); color: var(--off-white); padding: 22px clamp(22px,4vw,40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.teaser__logo { height: 28px; width: auto; display: block; }
.teaser__head-meta { text-align: right; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--paper-70); }
.teaser__confidential { font-family: var(--sans); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: var(--exit-yellow); }

.teaser__body { padding: clamp(24px,4vw,44px); }
.teaser__headline { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; line-height: 1.05;
  font-size: clamp(24px,3.4vw,40px); color: var(--exit-black); margin: 6px 0 22px; max-width: 26ch; }
.teaser__body .eyebrow--accent { color: #8a9a3e; } /* Gelb wäre auf Hell zu blass → gedämpftes Oliv */

/* 3 · Kachel-Raster */
.teaser-tiles { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.t-tile { border: .5px solid var(--hair-dark); border-radius: var(--radius); padding: 12px 14px; background: var(--white); }
.t-tile__lab { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 5px; }
.t-tile__val { display: block; font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--exit-black); line-height: 1.25; }
.t-tile--accent { background: var(--exit-yellow); border-color: var(--exit-yellow); }
.t-tile--accent .t-tile__lab { color: rgba(30,30,30,.66); }

/* Zwei-Spalten-Bereiche */
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,3vw,28px); margin-bottom: 4px; }
@media (max-width: 680px) { .teaser-grid { grid-template-columns: 1fr; } }

.teaser-block { margin: 0 0 22px; }
.teaser-block__title { font-family: var(--sans); font-weight: 700; font-size: 11.7px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--exit-black); margin: 0 0 12px; padding-bottom: 8px; border-bottom: .5px solid var(--hair-dark); }
.teaser-desc { font-size: 13.1px; line-height: 1.65; color: var(--ink-70); margin: 0 0 10px; }

/* 4 · Investment-Highlights */
.teaser-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.teaser-checks li { position: relative; padding-left: 26px; font-size: 12.6px; line-height: 1.4; color: var(--exit-black); }
.teaser-checks li::before { content: '✓'; position: absolute; left: 0; top: -1px; width: 18px; height: 18px;
  background: var(--exit-yellow); color: var(--exit-black); border-radius: 5px; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }

/* Diagramm-Panels (dunkel → gelbe SVGs poppen) */
.teaser-chart { background: var(--black-950); border: .5px solid rgba(238,250,159,.22); border-radius: var(--radius);
  padding: 16px; margin: 0 0 8px; }
.teaser-chart--center { display: flex; justify-content: center; }
.teaser-chart svg { width: 100%; height: auto; display: block; }
.teaser-chart--center svg { width: auto; max-width: 200px; }
.teaser-chart__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.teaser-trend svg { height: 18px; width: auto; }

.chip--ghost { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  border: .5px solid rgba(244,244,238,.3); color: var(--off-white); font-size: 11px; font-weight: 700; background: transparent; }
.teaser-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.teaser-chips .chip--ghost { border-color: var(--hair-dark); color: var(--ink-70); }

.teaser-kv { font-size: 12.2px; color: var(--ink-70); margin: 12px 0 4px; }
.teaser-kv strong { color: var(--exit-black); }
.teaser-kv-list { list-style: none; margin: 0; padding: 0; }
.teaser-kv-list li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: .5px solid var(--hair-dark); font-size: 12.6px; }
.teaser-kv-list li span { color: var(--ink-70); }
.teaser-kv-list li b { color: var(--exit-black); }

/* 11 · Unterlagen */
.teaser-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.teaser-docs li { display: flex; align-items: center; gap: 10px; font-size: 12.6px; color: var(--exit-black); }
.teaser-docs__mark { width: 20px; height: 20px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.teaser-docs .is-yes .teaser-docs__mark { background: var(--exit-yellow); color: var(--exit-black); }
.teaser-docs .is-no { color: var(--ink-70); }
.teaser-docs .is-no .teaser-docs__mark { background: rgba(30,30,30,.08); color: rgba(30,30,30,.5); }

.teaser-note { font-size: 11.5px; line-height: 1.5; color: var(--ink-70); margin: 8px 0 0; }

/* 12 · Fuß-Band */
.teaser__foot { background: var(--exit-black); color: var(--paper-70); padding: 20px clamp(22px,4vw,40px); font-size: 11.5px; line-height: 1.55; }
.teaser__foot strong { color: var(--off-white); }
.teaser__foot-meta { margin: 8px 0 0; color: rgba(244,244,238,.5); }

/* ---- Alleinauftrag: gebrandetes Kopf-Band + scrollbarer Vertragstext ---- */
.mandate-head { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap;
  background: var(--exit-black); border: .5px solid rgba(244,244,238,.16); border-radius: var(--radius);
  padding: clamp(18px, 3vw, 26px) clamp(20px, 3.4vw, 32px); margin: 0 0 22px; }
.mandate-head__logo { height: 30px; width: auto; display: block; flex: none; }
.mandate-head__title { flex: 1 1 240px; }
.mandate-head__title .dash__title { color: var(--off-white); margin: 4px 0 0; }
.mandate-head__title .eyebrow--accent { margin-bottom: 0; }
.mandate-head__slogan { font-family: var(--sans); font-weight: 700; font-size: 11.7px; letter-spacing: -.01em;
  color: var(--off-white); margin: 8px 0 0; }
.legal-doc--scroll { max-height: 360px; overflow-y: auto; padding: 16px 18px; margin: 4px 0 6px;
  background: var(--black-950); border: .5px solid rgba(244,244,238,.18); border-radius: var(--radius); }
/* Einheitliche Schrift im Vertragskasten: Überschriften in der Textschrift (nicht in
   der Display-/Logoschrift) und Listen in derselben Größe wie Absätze. */
.legal-doc--scroll .legal-h { font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--off-white); margin: 14px 0 6px; }
.legal-doc--scroll .legal-h:first-child { margin-top: 0; }
.legal-doc--scroll p { color: var(--paper-70); font-size: 12.6px; line-height: 1.6; margin: 0 0 6px; }
.legal-doc--scroll ul, .legal-doc--scroll ol { margin: 0 0 6px; }
.legal-doc--scroll li { color: var(--paper-70); font-size: 12.6px; line-height: 1.6; margin: 3px 0; }
.legal-doc--scroll .legal-bullet { padding-left: 6px; }
.legal-doc--scroll .legal-gap { height: 6px; }

/* ---- Druck / „Als PDF speichern" ---- */
@media print {
  body { background: #fff; }
  .site-header, .site-footer, .teaser-toolbar, .skip-link { display: none !important; }
  main, #main { padding: 0 !important; margin: 0 !important; }
  .teaser { box-shadow: none; margin: 0; max-width: none; border-radius: 0; }
  .teaser-block, .t-tile, .teaser-chart, .teaser-grid, .teaser__head, .teaser__foot { page-break-inside: avoid; break-inside: avoid; }
  .teaser__headline { page-break-after: avoid; }
  @page { size: A4; margin: 12mm; }
}

/* =========================================================================
   Tier1–3 Verkäufer-Journey: Stepper, Kapitel-Nav, Mandat-Kernpunkte,
   gestapelte Freigaben, Upload-Aktionen, Funnel-Feinheiten.
   ========================================================================= */

/* Kleiner Hinweistext unter Feldern (z. B. €/%-Sperre bei profitYears). */
.field-hint { font-size: 11.3px; color: var(--paper-70, #6b6b66); margin: 6px 0 0; }

/* Mandat: „Das Wichtigste auf einen Blick" auf der Auftrags-Seite. */
.mandate-points { background: var(--black-950); border: .5px solid rgba(244,244,238,.18);
  border-radius: var(--radius); padding: 14px 18px; }
.mandate-points__title { font-family: var(--display); font-weight: 800; font-size: 13.5px;
  color: var(--off-white); margin: 0 0 8px; }
.mandate-points ul { margin: 0; padding-left: 18px; }
.mandate-points li { color: var(--paper-70); font-size: 12.6px; line-height: 1.6; margin: 0 0 6px; }
.mandate-points strong { color: var(--off-white); }

/* Verkäufer-Fortschrittsleiste (Portal). */
.stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
/* Aktions-Zeile im „Ihr Zugang"-Panel: Luft zur Infobox darüber + sauberer
   Button-Abstand (vorher klebten „Zum Marktplatz"/„Meine Käufe" an der Box). */
#kaeufer-action { margin-top: 16px; }
#kaeufer-action:empty { margin-top: 0; }
#kaeufer-action .btn { margin-right: 10px; margin-bottom: 6px; }
.stepper__step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border: .5px solid rgba(30,30,30,.18); border-radius: 999px; background: #fff;
  color: var(--ink, #1e1e1e); font-size: 11.7px; font-weight: 600; opacity: .6; }
.stepper__step.is-done { opacity: 1; }
.stepper__step.is-active { opacity: 1; border-color: var(--ink, #1e1e1e); box-shadow: 0 0 0 1px var(--ink,#1e1e1e); }
.stepper__dot { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--black-900,#161616); color: var(--exit-yellow,#EEFA9F);
  font-size: 11px; font-weight: 700; }
.stepper__step.is-active .stepper__dot { background: var(--exit-yellow,#EEFA9F); color: var(--black-900,#161616); }

/* Fragebogen: Kapitel-Navigation. */
.q-chapters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.q-chip { font: inherit; cursor: pointer; padding: 5px 11px; border-radius: 999px;
  border: .5px solid rgba(30,30,30,.2); background: transparent; color: var(--ink,#1e1e1e);
  font-size: 11.3px; opacity: .72; }
.q-chip:hover { opacity: 1; }
.q-chip.is-active { opacity: 1; border-color: var(--ink,#1e1e1e); font-weight: 700; }
.q-chip.is-done { background: rgba(238,250,159,.5); opacity: 1; }

/* Gestapelte Freigabe-Zeilen mit Erklärtext (Prospekt). */
.consent--stacked { align-items: flex-start; gap: 10px; margin: 0 0 10px; }
.consent--stacked input { margin-top: 3px; }

/* Heute-Cockpit: Kachel mit Handlungsbedarf hervorheben (gelber Rand). */
.stat--warn { border: 1.5px solid var(--exit-yellow); }

/* Datums- und Zeitfelder (2026-07-30). Der Browser rendert hier eigene Platzhalter
   („tt.mm.jjjj --:--") plus ein Kalendersymbol. Ohne eigene Regeln wurde das Feld zu
   schmal, der Platzhalter abgeschnitten und das Symbol auf dunklem Grund unsichtbar.
   Deshalb: genug Mindestbreite für den vollen Platzhalter, gleiche Maße wie die übrigen
   Eingabefelder und ein aufgehelltes Kalendersymbol. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  min-height: 44px;
  min-width: 11.5rem;                 /* trägt „tt.mm.jjjj --:--" plus Symbol */
  padding: 10px 12px;
  font-family: var(--sans);
  line-height: 1.3;
}
input[type="datetime-local"] { min-width: 14.5rem; }   /* Datum UND Uhrzeit */
/* Das Kalendersymbol ist standardmäßig dunkel und auf unserem dunklen Feld unsichtbar. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6);
  cursor: pointer;
  opacity: .85;
}
/* Im Chat-Widget ist der Platz knapp: dort darf das Feld die Zeile füllen. */
.chatw__input[type="datetime-local"] { min-width: 0; width: 100%; }

/* Bestätigungs-Kasten (2026-07-30): Der Kasten ist zentriert, seine Knopfzeile war es
   nicht – `.form-actions` ist ein Flex-Container und schob den Knopf nach links. */
.verify-box .form-actions { justify-content: center; }

/* Auswertungs-Diagramme (2026-07-29): serverseitig gerendertes SVG in einem Panel.
   Bewusst mit eigener Hülle statt .teaser-chart – die ist auf den Kundenteaser
   abgestimmt (eigener Rahmen, Fußzeile) und würde hier fremd wirken. */
.chart-wrap { width: 100%; overflow-x: auto; }
.chart-wrap svg { width: 100%; height: auto; display: block; min-width: 320px; }

/* Anklickbare Kennzahl (2026-07-29). Vorher sahen tote <div>-Kacheln und verlinkte
   Kacheln zeichengleich aus – man konnte nicht sehen, was ein Klick bewirkt. Jetzt
   trägt nur die verlinkte Kachel Zeiger, Unterstreichungsfreiheit und Hover-Zustand. */
a.stat--link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
a.stat--link:hover { background: rgba(250, 250, 246, .06); }
/* Der gelbe Rand bedeutet „hier wartet Arbeit" – der Hover darf ihn nicht überschreiben. */
a.stat--link:hover:not(.stat--warn) { border-color: var(--off-white); }
a.stat--link:focus-visible { outline: 2px solid var(--exit-yellow); outline-offset: 2px; }

/* Passwortfeld mit Augen-Umschalter (von app.js initPasswordToggles gebaut).
   Gelber Chip mit schwarzem Auge (Nutzer-Wunsch): auf hellen UND dunklen Feldern
   klar sichtbar – pures Gelb auf Weiß wäre unsichtbar. */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 34px; }
.pw-toggle { position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  width: 19px; height: 17px; display: grid; place-items: center;
  border: 0; border-radius: 5px; background: var(--exit-yellow); color: var(--exit-black);
  cursor: pointer; padding: 0; }
.pw-toggle:hover { filter: brightness(.94); }
.pw-toggle:focus-visible { outline: 2px solid var(--exit-black); outline-offset: 1px; }

/* Freigaben: Status-Übersicht (Standard) + versteckter Ändern/Widerruf-Bereich. */
.freigabe-summary { margin: 4px 0 0; }
.freigabe-status { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.freigabe-status li { display: flex; align-items: center; gap: 9px; color: var(--paper-70); font-size: 12.6px; }
.freigabe-status__mark { display: inline-flex; width: 18px; justify-content: center; color: var(--paper-70); font-weight: 600; }
.freigabe-status__mark.is-on { color: var(--exit-yellow); }
.freigabe-edit { margin-top: 12px; padding-top: 14px; border-top: .5px solid var(--hair-light); }
.freigabe-edit .consent--stacked:first-of-type { margin-top: 4px; }
/* Aufgeklappte Freigaben: erst die Status-Übersicht, dann abgesetzt die Schalter. */
.freigabe-edit .freigabe-status { margin-top: 0; margin-bottom: 14px; }

/* Ablage-Aufklapper (Käuferportal 2026-07-27): ruhige Verwaltung unter dem Weg.
   Sieht aus wie ein Panel, ist aber ein <details> – zugeklappt zeigt es nur eine
   Zusammenfassungszeile, statt dauerhaft ein ganzes Formular auszubreiten. */
.ablage-panel { background: var(--panel, #161616); border: .5px solid var(--hair-light); border-radius: var(--radius); overflow: hidden; }
.ablage-panel__kopf { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ablage-panel__kopf::-webkit-details-marker { display: none; }
.ablage-panel__kopf > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ablage-panel__kopf::after { content: '⌄'; color: var(--paper-70); font-size: 16.2px; line-height: 1; flex: 0 0 auto; transition: transform .15s ease; }
.ablage-panel[open] .ablage-panel__kopf::after { transform: rotate(180deg); }
.ablage-panel__kopf:hover { background: rgba(238,250,159,.05); }
.ablage-panel > .panel__body { border-top: .5px solid var(--hair-light); }

/* „Teaser bearbeiten": zweiter Weg (Angaben/Fragebogen) im selben Panel, klar abgesetzt. */
.teaser-edit__angaben { margin-top: 4px; padding-top: 14px; border-top: .5px solid var(--hair-light); }
.teaser-edit__angaben .btn { margin-top: 10px; }
/* „Abbrechen" im dunklen Panel: .link-btn ist standardmäßig schwarz (heller Grund). */
#teaser-edit-body .link-btn { color: var(--paper-70); font-weight: 600; align-self: start; }

/* Upload-Liste: Entfernen-Aktion + „noch keine Datei". */
.link-btn.upload-del { margin-left: 10px; color: #b23; font-size: 11.3px; }
.upload-empty { color: var(--paper-70,#6b6b66); font-size: 11.7px; list-style: none; }

/* Registrierungs-Bestätigung: Schrittliste. */
.step-list { margin: 8px 0 14px; padding-left: 20px; color: var(--ink,#1e1e1e); font-size: 12.6px; line-height: 1.7; }
/* Auf dunklen Dashboard-Seiten (Käuferbereich/Transaktionsraum) wäre die dunkle
   Tinte unlesbar – dort hell rendern (Nutzer-Feedback: Stepper war nicht lesbar). */
.dash .step-list { color: var(--paper-70, rgba(244,244,238,.78)); }
.dash .step-list li { margin: 2px 0; }

/* Funnel-Ergebniskarte: Zwischenüberschriften + optionale Einordnung. */
.next-steps__title { font-family: var(--display); font-weight: 800; font-size: 15.3px; margin: 22px 0 4px; }
.next-steps__lead { color: var(--paper-70); font-size: 12.6px; margin: 0 0 12px; }
.funnel-qualify { margin-top: 22px; padding-top: 16px; border-top: .5px solid rgba(244,244,238,.18); }

/* Alleinauftrag: „Wir finden einen Käufer / kostenlos"-Callout. */
.mandate-free { border: .5px solid rgba(238,250,159,.4); border-left: 3px solid var(--exit-yellow);
  background: rgba(238,250,159,.06); border-radius: var(--radius); padding: 14px 18px; margin: 16px 0 0; }
.mandate-free__lead { color: var(--off-white); font-size: 14.4px; margin: 0 0 6px; }
.mandate-free__cost { color: var(--paper-70); font-size: 12.6px; line-height: 1.6; margin: 0; }
.mandate-free .accent-y { font-weight: 800; }

/* Teaser-Werkzeugleiste: Aktionen rechts gruppiert. */
.teaser-toolbar__actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Ergebnis-Schritt: prominenter „Käufer finden"-CTA (separater nächster Schritt). */
.funnel-cta { margin-top: 22px; padding-top: 18px; border-top: .5px solid rgba(244,244,238,.18); text-align: center; }
.funnel-cta__title { font-family: var(--display); font-weight: 800; font-size: clamp(18px,2.6vw,22px); color: var(--off-white); margin: 0 0 4px; }
.funnel-cta__sub { color: var(--exit-yellow); font-weight: 700; font-size: 12.6px; margin: 0 0 14px; }
.funnel-cta__btn { font-size: 14.4px; padding: 14px 28px; }

/* =========================================================================
   Portal-Roadmap („roter Faden"), nächster Schritt, Teaser-Abschlussinfo.
   ========================================================================= */
a.stepper__step { text-decoration: none; cursor: pointer; }
a.stepper__step:hover { border-color: var(--exit-yellow); }

/* Prominenter „nächster Schritt" im Portal. */
.next-step { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--radius);
  background: rgba(238,250,159,.10); border: .5px solid rgba(238,250,159,.4);
  color: var(--off-white); font-size: 12.6px; }
.next-step .link { color: var(--exit-yellow); }

/* Schritt-Übersicht (was erledigt / was ansteht). */
.roadmap { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.roadmap__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: .5px solid var(--hair-light); }
.roadmap__item:first-child { border-top: none; }
.roadmap__mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: rgba(244,244,238,.10); color: var(--paper-70); border: .5px solid var(--hair-light); }
.roadmap__item.is-done .roadmap__mark { background: var(--exit-yellow); color: var(--black-900); border-color: var(--exit-yellow); }
.roadmap__item.is-current .roadmap__mark { background: var(--off-white); color: var(--black-900); border-color: var(--off-white); }
.roadmap__body { display: flex; flex-direction: column; gap: 2px; }
.roadmap__title { font-weight: 700; color: var(--off-white); font-size: 12.6px; }
.roadmap__item.is-todo .roadmap__title { color: var(--paper-70); font-weight: 600; }
.roadmap__title .link { color: inherit; }
.roadmap__desc { color: var(--paper-70); font-size: 11.7px; }

/* Teaser-Abschluss: „so geht es weiter" (auf dunklem Seitenhintergrund). */
.next-info { margin: 16px 0 0; padding: 16px 20px; border-radius: var(--radius);
  border: .5px solid rgba(238,250,159,.4); border-left: 3px solid var(--exit-yellow); background: rgba(238,250,159,.06); }
.next-info__title { font-family: var(--display); font-weight: 800; font-size: 15.3px; color: var(--off-white); margin: 0 0 8px; }
.next-info__list { margin: 0; padding-left: 18px; color: var(--paper-70); font-size: 12.6px; line-height: 1.6; }
.next-info__list li { margin: 0 0 5px; }
.next-info__list strong { color: var(--off-white); }
.next-info__list .link { color: var(--exit-yellow); }
.next-info__lead { color: var(--paper-70); font-size: 12.6px; line-height: 1.6; margin: 0 0 14px; }
.next-info__lead strong { color: var(--off-white); }
.next-info__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.next-info__status { margin: 8px 0 0; }

/* =========================================================================
   KÄUFERBEREICH — Startseiten-Weiche, anonymer Marktplatz, NDA-Zustimmung
   ========================================================================= */
/* Verkäufer/Käufer-Weiche auf der Startseite: helle Einladung im dunklen Layout. */
.buyer-switch { background: var(--off-white); color: var(--exit-black); padding: clamp(28px, 5vw, 48px) 0; }
.buyer-switch__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.buyer-switch__eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: rgba(30,30,30,.55); }
.buyer-switch__title { color: var(--exit-black); font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.6vw, 28px); margin: 6px 0 8px; max-width: 22ch; }
.buyer-switch__sub { color: rgba(30,30,30,.7); font-size: 13.5px; line-height: 1.55; max-width: 58ch; margin: 0; }
.buyer-switch__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.buyer-switch .btn--ghost { color: var(--exit-black); border-color: rgba(30,30,30,.3); }
.buyer-switch .btn--ghost:hover { border-color: var(--exit-black); }

/* Anonymer Marktplatz: klickbare Profilkarten */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
a.market-card { display: block; color: inherit; text-decoration: none; }
.market-card h3 { margin: 0 0 4px; font-size: 16.2px; }
.market-card__cta { display: inline-block; margin-top: 14px; padding-top: 10px; border-top: .5px solid var(--hair-light);
  color: var(--exit-yellow); font-weight: 700; font-size: 12.2px; }

/* NDA-Zustimmung */
.nda-accept { margin: 22px 0 8px; padding: 18px 20px; border: .5px solid var(--hair-light);
  border-left: 3px solid var(--exit-yellow); border-radius: var(--radius); background: rgba(238,250,159,.06); }
.nda-accept .consent { align-items: flex-start; }

/* =========================================================================
   ABO-PAKETE (M&A-Berater / Partner) — Startseite & Beraterbereich
   ========================================================================= */
.partner-plans { padding: clamp(48px, 7vw, 88px) 0; }
.partner-plans__head { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.partner-plans__title { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 32px); margin: 8px 0 10px; }
.partner-plans__sub { color: var(--paper-70); font-size: 13.5px; line-height: 1.6; }
.partner-plans__head .buyer-switch__eyebrow { color: var(--exit-yellow); }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 6px;
  border: .5px solid var(--hair-light); border-radius: var(--radius); background: rgba(244,244,238,.03); padding: 24px 22px; }
.plan-card--featured { border-color: var(--exit-yellow); }
.plan-card.is-selected { border-color: var(--exit-yellow); background: rgba(238,250,159,.07); }
.plan-card__badge { position: absolute; top: -11px; left: 22px; background: var(--exit-yellow); color: var(--black-900);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; }
.plan-card__name { font-family: var(--display); font-weight: 800; font-size: 18px; margin: 4px 0 0; }
.plan-card__tagline { color: var(--paper-70); font-size: 12.2px; margin: 0; }
.plan-card__price { font-size: 19.8px; font-weight: 800; color: var(--off-white); margin: 10px 0 2px; }
.plan-card__muster { font-size: 11px; font-weight: 600; color: var(--paper-70); border: .5px solid var(--hair-light); border-radius: 999px; padding: 2px 7px; vertical-align: middle; }
.plan-card__quota { color: var(--exit-yellow); font-weight: 700; font-size: 12.6px; margin: 0 0 8px; }
.plan-card__features { list-style: none; margin: 4px 0 18px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.plan-card__features li { position: relative; padding-left: 22px; color: var(--paper-70); font-size: 12.6px; line-height: 1.45; }
.plan-card__features li::before { content: '✓'; position: absolute; left: 0; color: var(--exit-yellow); font-weight: 800; }
.plan-card__cta { margin-top: auto; }

/* =========================================================================
   ADMIN — Bereichs-Kacheln (Verkäufer/Käufer/System), Marktplatz-Filter,
   eingebetteter Teaser im Verkäuferprospekt
   ========================================================================= */
.admin-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 22px 0 30px; }
.admin-area__title { font-size: 11.7px; text-transform: uppercase; letter-spacing: .08em; color: var(--paper-70); margin: 0 0 10px; }
.admin-area__tiles { display: flex; flex-direction: column; gap: 8px; }
.admin-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: .5px solid var(--hair-light);
  border-radius: var(--radius); background: rgba(244,244,238,.03); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.admin-tile:hover { border-color: var(--exit-yellow); transform: translateY(-2px); }
.admin-tile { position: relative; }
.admin-tile__t { font-weight: 700; color: var(--off-white); font-size: 13.5px; }
.admin-tile__d { color: var(--paper-70); font-size: 11.7px; }
/* Handlungszähler: kleine Pille oben rechts; „offen" = gelb, Konflikt = warnrot. */
.admin-tile__badge { position: absolute; top: 10px; right: 12px; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 10px; background: var(--exit-yellow); color: var(--black);
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
.admin-tile__badge--warn { background: #e5484d; color: #fff; }

/* Marktplatz-Filterleiste */
.market-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 16px 0 12px;
  padding: 14px 16px; border: .5px solid var(--hair-light); border-radius: var(--radius); background: rgba(244,244,238,.03); }
.market-filters__field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.market-filters__field--grow { flex: 1 1 220px; }
.market-filters__field label { font-size: 11px; color: var(--paper-70); font-weight: 600; }
.market-filters .input { min-width: 150px; }

/* Eingebetteter Teaser im Verkäuferprospekt (Admin) */
.teaser-embed { margin: 0 0 8px; padding: 16px; border: .5px solid var(--hair-light); border-radius: var(--radius); background: rgba(244,244,238,.03); }
.teaser-embed__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.teaser-embed__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.teaser-embed__cell { border: .5px solid var(--hair-light); border-radius: 10px; padding: 10px; background: rgba(0,0,0,.15); }
.teaser-embed__cell.is-wide { grid-column: 1 / -1; }
.teaser-embed__cell svg { width: 100%; height: auto; display: block; }

/* =========================================================================
   HERO — KINEMATISCHER REDESIGN (überschreibt frühere .hero--funnel-Regeln)
   Strikt zweifarbig (#EEFA9F / #1E1E1E) auf Tiefen-Schwarz #0E0E0E, Off-White
   #F4F4EE. Radius 10px, Hairlines 0,5px. Einheitliche Easing cubic-bezier(.22,.61,.18,1).
   Scope: ausschließlich .hero--funnel. Funnel-Logik unverändert – nur visuell.
   ========================================================================= */
.hero--funnel {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  background: #0E0E0E; color: #F4F4EE; text-align: left; border-bottom: none;
  padding: 150px 26px 84px;
}

/* 1) Bild full-bleed – STATISCH, OHNE Überzoomung. Die frühere inset:-7%/scale(1.05)-
   Überzoomung (Relikt der entfernten Kenburns-Animation) schnitt das Motiv rechts ab
   (die offene Hand der „Übergabe") – Nutzer-Feedback 2026-07-14. */
.hero--funnel .hero__media {
  position: absolute; inset: 0; z-index: 0; opacity: 1; background: #0E0E0E; overflow: hidden;
}
.hero--funnel .hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 44%; filter: brightness(1.78) contrast(1.02) saturate(1.05);
}
/* Hintergrund-Video im Hero – liegt über dem Bild-Fallback, unter dem Veil (z2).
   Spielt einmal; danach wird es ausgeblendet (is-ended) und das Bild darunter erscheint. */
.hero--funnel .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 40%; filter: brightness(1.15) contrast(1.02) saturate(1.05); z-index: 1;
  transition: opacity 1.2s ease;
}
.hero--funnel .hero__video.is-ended { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero--funnel .hero__video { display: none; } }

/* 3) Lesbarkeits-Scrims + dezente Vignette */
.hero--funnel .hero__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(14,14,14,.42) 30%, rgba(14,14,14,.04) 54%, rgba(14,14,14,.12) 100%),
    linear-gradient(180deg, rgba(14,14,14,.4) 0%, rgba(14,14,14,0) 26%, rgba(14,14,14,0) 62%, #0E0E0E 100%);
  box-shadow: inset 0 0 200px rgba(0,0,0,.36);
}

/* 4) Film-Grain (sehr dezent, leicht animiert) */
.hero--funnel .hero__grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: heroGrain 7s steps(4) infinite;
}

/* 5) Gelb-Ambiente oben rechts (weich, schwebend) */
.hero--funnel .hero__blob--1 {
  position: absolute; z-index: 2; top: -160px; right: -120px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238,250,159,.18), rgba(238,250,159,0) 64%); filter: blur(10px); pointer-events: none;
}

/* Inhalt über allen Ebenen */
.hero--funnel .hero__content { position: relative; z-index: 6; max-width: none; width: 100%; padding: 0; }
.hero--funnel .hero__grid {
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: 48px; align-items: center;
}
body[data-page="home"] .hero--funnel .hero__lead { max-width: 560px; margin: 0; animation: none; }

/* Eyebrow-Pille */
.hero--funnel .pill {
  margin-bottom: 26px; background: rgba(14,14,14,.5); backdrop-filter: blur(8px);
  border: .5px solid rgba(238,250,159,.35); color: #EEFA9F;
  opacity: 0; animation: heroFadeUp .7s cubic-bezier(.22,.61,.18,1) .14s both;
}

/* Headline mit Zeilen-Wipe */
.hero--funnel .hero__h1 {
  font-family: var(--display); font-weight: 800; line-height: .94; letter-spacing: -.025em;
  font-size: clamp(48px, 6.6vw, 98px); color: #F4F4EE; margin: 0; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.hero--funnel .hero__line { display: block; overflow: hidden; padding-bottom: .02em; }
.hero--funnel .hero__line-in { display: block; transform: translateY(112%); animation: heroMaskUp .9s cubic-bezier(.22,.61,.18,1) both; }
.hero--funnel .hero__line:nth-child(1) .hero__line-in { animation-delay: .14s; }
.hero--funnel .hero__line:nth-child(2) .hero__line-in { animation-delay: .26s; }
.hero--funnel .hero__h1 .accent-y { color: #EEFA9F; }

/* Hairline + Nutzen-Satz */
.hero--funnel .hero__rule-wrap { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.hero--funnel .hero__rule-draw {
  display: block; width: 64px; height: 1px; background: #EEFA9F; transform: scaleX(0); transform-origin: left center;
  animation: heroDrawX .8s cubic-bezier(.22,.61,.18,1) .34s both;
}
.hero--funnel .hero__sub {
  color: rgba(244,244,238,.84); font-size: 15.3px; line-height: 1.6; max-width: 460px; margin: 0; text-align: left;
  opacity: 0; animation: heroFadeUp .7s cubic-bezier(.22,.61,.18,1) .5s both;
}
.hero--funnel .hero__meta { margin-top: 24px; opacity: 0; animation: heroFadeUp .7s cubic-bezier(.22,.61,.18,1) .58s both; }

/* RECHTS — Funnel-Glaskarte (dunkel) */
.hero--funnel .funnel-card {
  background: rgba(14,14,14,.64); border: .5px solid rgba(238,250,159,.26); border-radius: 10px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 40px 90px rgba(0,0,0,.6);
  padding: 24px; max-width: none; margin: 0; text-align: left; color: #F4F4EE;
  opacity: 0; animation: heroFadeUp .8s cubic-bezier(.22,.61,.18,1) .42s both;
}
.hero--funnel .funnel-card__meta { color: rgba(244,244,238,.5); }

/* Funnel-Innenleben dunkeltauglich (Schritt-für-Schritt, alle Phasen) */
.hero--funnel .funnel-q { color: #F4F4EE; }
.hero--funnel .funnel-kicker,
.hero--funnel .funnel-help,
.hero--funnel .funnel-note,
.hero--funnel .funnel-progress__lab,
.hero--funnel .funnel-disclaimer summary,
.hero--funnel .funnel-disclaimer li { color: rgba(244,244,238,.62); }
.hero--funnel .funnel-progress__dot {
  background: rgba(244,244,238,.06); border: .5px solid rgba(238,250,159,.22); color: rgba(244,244,238,.7);
}
.hero--funnel .funnel-progress__step.is-active .funnel-progress__dot { background: #EEFA9F; border-color: #EEFA9F; color: #1E1E1E; }
.hero--funnel .funnel-progress__step.is-active .funnel-progress__lab { color: #F4F4EE; }
.hero--funnel .funnel-progress__step.is-done .funnel-progress__dot { background: #1E1E1E; border-color: rgba(238,250,159,.5); color: #EEFA9F; }

/* Gewerk-/Auswahl-Buttons: dunkel-transparent → Hover: Gelb-Füllung, Schwarz-Text */
.hero--funnel .opt {
  background: rgba(244,244,238,.04); border: .5px solid rgba(238,250,159,.2); color: #F4F4EE; border-radius: 10px;
  transition: background .14s cubic-bezier(.22,.61,.18,1), color .14s, transform .14s, box-shadow .14s, border-color .14s;
}
.hero--funnel .opt:hover {
  background: #EEFA9F; color: #1E1E1E; border-color: #EEFA9F; transform: translateY(-2px);
  box-shadow: 0 12px 26px -10px rgba(238,250,159,.5);
}
.hero--funnel .opt.is-selected { background: rgba(238,250,159,.16); border-color: #EEFA9F; color: #F4F4EE; box-shadow: inset 0 0 0 1px rgba(238,250,159,.5); }
/* Sekundärbutton „Alle 16 Gewerke anzeigen" (Outline, Hairline) */
.hero--funnel .funnel-more {
  display: block; width: 100%; margin-top: 10px; padding: 12px 15px; border-radius: 10px;
  background: transparent; border: .5px solid rgba(238,250,159,.3); color: #EEFA9F;
  font: inherit; text-align: center; cursor: pointer;
  transition: background .14s cubic-bezier(.22,.61,.18,1), border-color .14s;
}
.hero--funnel .funnel-more:hover { background: rgba(238,250,159,.08); border-color: #EEFA9F; }

/* Eingaben/Selects/Textarea auf Dunkel */
.hero--funnel .funnel-card .input,
.hero--funnel .funnel-card .select,
.hero--funnel .funnel-card textarea {
  background: rgba(244,244,238,.05); border: .5px solid rgba(238,250,159,.22); color: #F4F4EE; border-radius: 10px;
}
.hero--funnel .funnel-card .input::placeholder, .hero--funnel .funnel-card textarea::placeholder { color: rgba(244,244,238,.4); }
.hero--funnel .funnel-card .input:focus,
.hero--funnel .funnel-card .select:focus,
.hero--funnel .funnel-card textarea:focus { outline: none; border-color: #EEFA9F; box-shadow: 0 0 0 2px rgba(238,250,159,.18); }
.hero--funnel .funnel-card .affix { color: rgba(244,244,238,.6); }
.hero--funnel .funnel-back, .hero--funnel .funnel-skip, .hero--funnel .funnel-unknown { color: rgba(244,244,238,.6); }
.hero--funnel .funnel-back:hover, .hero--funnel .funnel-skip:hover, .hero--funnel .funnel-unknown:hover { color: #F4F4EE; }
.hero--funnel .funnel-disclaimer { border-top-color: rgba(238,250,159,.18); }
/* Segment-Umschalter (Gewinn: Betrag/Marge) auf Dunkel */
.hero--funnel .funnel-card .seg button { background: rgba(244,244,238,.04); border: .5px solid rgba(238,250,159,.2); color: #F4F4EE; }
.hero--funnel .funnel-card .seg button.is-selected { background: #EEFA9F; color: #1E1E1E; border-color: #EEFA9F; }

/* Vertrauens-Zeile + Scroll-Indikator */
.hero--funnel .trust-row {
  justify-content: flex-start; color: rgba(244,244,238,.55); margin-top: 40px;
  opacity: 0; animation: heroFadeUp .7s cubic-bezier(.22,.61,.18,1) .7s both;
}
.hero--funnel .trust-row li::before { color: #EEFA9F; }
.hero--funnel .hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 6;
  color: rgba(244,244,238,.5); font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  opacity: 0; animation: heroFadeIn 1s ease 1s both;
}
.hero--funnel .hero__mouse { width: 22px; height: 34px; border: .5px solid rgba(238,250,159,.45); border-radius: 12px; position: relative; }
.hero--funnel .hero__mouse-dot { position: absolute; left: 50%; top: 7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #EEFA9F; animation: heroScrollDot 1.8s cubic-bezier(.22,.61,.18,1) infinite; }

/* Keyframes (hero-namespaced, kollidieren nicht mit bestehenden).
   heroKenburns wurde entfernt – das Hero-Bild ist bewusst statisch. */
@keyframes heroMaskUp   { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes heroDrawX    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes heroFadeUp   { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroGrain    { 0% { transform: translate(0,0); } 50% { transform: translate(-3%,2%); } 100% { transform: translate(0,0); } }
@keyframes heroScrollDot { 0% { transform: translateY(0); opacity: 0; } 30%,70% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* Responsiv: einspaltig auf schmalen Viewports */
@media (max-width: 900px) {
  .hero--funnel { padding: 120px 20px 72px; min-height: auto; }
  .hero--funnel .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  body[data-page="home"] .hero--funnel .hero__lead { max-width: none; }
  .hero--funnel .hero__sub { max-width: none; }
  .hero--funnel .hero__scroll { display: none; }
}

/* Bewegung respektieren: alles ruhig stellen, Inhalte sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  .hero--funnel *, .hero--funnel *::before, .hero--funnel *::after { animation: none !important; transition: none !important; }
  .hero--funnel .hero__line-in { transform: none !important; }
  .hero--funnel .hero__rule-draw { transform: scaleX(1) !important; }
  .hero--funnel .pill, .hero--funnel .hero__sub, .hero--funnel .hero__meta,
  .hero--funnel .funnel-card, .hero--funnel .trust-row, .hero--funnel .hero__scroll { opacity: 1 !important; }
}

/* =========================================================================
   FUNNEL-OVERLAY — Vollbild, Seite pro Schritt (Design-Vorlage „EXIT24 Prototyp")
   Eingabe-Schritte hell (#F4F4EE), Korridor/Kontakt/Ergebnis dunkel (#1E1E1E).
   Strikt zweifarbig, Radius 10px, Hairlines 0,5px. Eigenständig (nicht im Hero-Scope).
   ========================================================================= */
#funnel-progress:empty { display: none; }      /* alter Stepper in der Hero-Karte entfällt */

.funnel-ov {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  font-family: var(--sans); animation: funnelFade .4s ease both;
}
.funnel-ov--light { background: #F4F4EE; color: #1E1E1E; }
.funnel-ov--dark  { background: #1E1E1E; color: #F4F4EE; }

/* Top-Leiste: Zeitstrahl mittig (zur Geltung), Schließen rechts absolut. */
.funnel-ov__top { flex: none; position: relative; display: flex; align-items: center; justify-content: center; padding: 22px 70px; border-bottom: .5px solid rgba(244,244,238,.16); }
.funnel-ov__track { width: 100%; max-width: 560px; height: 6px; border-radius: 100px; overflow: hidden; background: rgba(244,244,238,.12); }
.funnel-ov__bar { height: 100%; width: 6%; background: #EEFA9F; border-radius: 100px; transition: width .5s cubic-bezier(.22,.61,.18,1); }
.funnel-ov__close { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; background: transparent; cursor: pointer; font-size: 16.2px; line-height: 1; border: .5px solid rgba(244,244,238,.2); color: #F4F4EE; transition: background .25s; }
.funnel-ov__close:hover { background: rgba(127,127,127,.12); }

.funnel-ov__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
/* Jede Phase ist eine eigene, zentrierte „Seite" mit Slide-In. */
.funnel-ov .funnel-step { flex: 1; display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 880px; margin: 0 auto; padding: 48px 26px; animation: funnelSlideIn .45s cubic-bezier(.22,.61,.18,1) both; }
.funnel-ov .funnel-reveal { align-items: center; text-align: center; }
.funnel-ov .funnel-central, .funnel-ov .funnel-corridor { max-width: 920px; }

/* Schritt-Kopf */
.funnel-ov .funnel-kicker { font-size: 11.7px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin: 0 0 14px; }
.funnel-ov .funnel-kicker { color: rgba(244,244,238,.5); }
.funnel-ov .funnel-q { font-family: var(--display); font-weight: 800; font-size: clamp(30px,4.4vw,52px); line-height: 1.04; letter-spacing: -.015em; margin: 0; }
.funnel-ov .funnel-help { font-size: 14.4px; margin: 14px 0 34px; }
.funnel-ov--light .funnel-help { color: rgba(30,30,30,.6); }
.funnel-ov--dark  .funnel-help { color: rgba(244,244,238,.6); }
.funnel-ov .funnel-eyebrow { font-size: 11.7px; letter-spacing: .2em; text-transform: uppercase; color: #EEFA9F; font-weight: 700; }

/* Auswahl-Kacheln (Bänder + Gewerk-Grid + Liste) – hell */
.funnel-ov .band-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.funnel-ov .opt-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.funnel-ov .opt-list { display: flex; flex-direction: column; gap: 12px; }
.funnel-ov .opt, .funnel-ov .band-opt {
  text-align: left; padding: 18px 16px; border-radius: 10px; cursor: pointer;
  background: rgba(244,244,238,.04); color: #F4F4EE; border: .5px solid rgba(238,250,159,.2);
  font-family: var(--sans); font-weight: 700; font-size: 13.5px;
  transition: all .3s cubic-bezier(.22,.61,.18,1); display: block; }
.funnel-ov .opt:hover, .funnel-ov .band-opt:hover { background: #EEFA9F; color: #1E1E1E; border-color: #EEFA9F; transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(238,250,159,.5); }
.funnel-ov .opt.is-selected { background: rgba(238,250,159,.16); color: #F4F4EE; border-color: #EEFA9F; }
.funnel-ov .band-opt__label { display: block; font-weight: 700; font-size: 14.4px; }
.funnel-ov .band-opt__sub { display: block; font-weight: 400; font-size: 11.7px; margin-top: 5px; color: rgba(244,244,238,.55); }
.funnel-ov .opt:hover .band-opt__sub, .funnel-ov .band-opt:hover .band-opt__sub { color: rgba(30,30,30,.7); }

/* Navigation (Zurück/Überspringen) */
.funnel-ov .funnel-nav { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.funnel-ov .funnel-nav--center { justify-content: center; }
.funnel-ov .funnel-back, .funnel-ov .funnel-skip { background: none; border: none; cursor: pointer; font: inherit; font-size: 12.6px; padding: 8px 0; }
.funnel-ov--light .funnel-back, .funnel-ov--light .funnel-skip { color: rgba(30,30,30,.6); }
.funnel-ov--dark  .funnel-back, .funnel-ov--dark  .funnel-skip { color: rgba(244,244,238,.55); }
.funnel-ov .funnel-skip { margin-left: auto; border: .5px solid rgba(244,244,238,.3); border-radius: 10px; padding: 11px 22px; }

/* Korridor-Reveal (dunkel, animiert) */
.funnel-ov .reveal__lead { font-size: 15.3px; color: rgba(244,244,238,.6); margin: 16px 0 30px; max-width: 520px; }
.funnel-ov .reveal__lead strong, .funnel-ov .central__sub strong { color: #F4F4EE; }
.funnel-ov .reveal__hint { font-size: 11.7px; color: rgba(244,244,238,.4); margin-top: 18px; max-width: 460px; }
.funnel-ov .corridor__row { display: flex; align-items: baseline; justify-content: center; gap: clamp(12px,2vw,26px); flex-wrap: wrap;
  font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.funnel-ov .corridor__num { color: #EEFA9F; font-size: clamp(40px,9vw,108px); }
.funnel-ov .corridor__bis { color: rgba(244,244,238,.4); font-size: clamp(22px,3vw,40px); }
.funnel-ov .corridor__bar { width: min(560px,90%); height: 10px; border-radius: 100px; background: rgba(244,244,238,.1); position: relative; overflow: hidden; margin: 40px auto 0; }
.funnel-ov .corridor__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 8%; background: #EEFA9F; border-radius: 100px; transition: width 1.2s cubic-bezier(.22,.61,.18,1); }
.funnel-ov .corridor__scale { display: flex; justify-content: space-between; width: min(560px,90%); margin: 10px auto 0; font-size: 11.7px; color: rgba(244,244,238,.45); }

/* Zentralzahl-Finale (Glow + hochzählende Zahl) */
.funnel-ov .funnel-central { position: relative; }
.funnel-ov .central__glow { position: absolute; width: min(720px,92%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(238,250,159,.16), rgba(238,250,159,0) 60%); animation: funnelGlow 4s ease-in-out infinite; }
.funnel-ov .central__meta { position: relative; font-size: 14.4px; color: rgba(244,244,238,.6); margin: 14px 0 26px; }
.funnel-ov .central__big { position: relative; font-family: var(--display); font-weight: 800; font-size: clamp(58px,15vw,180px); line-height: .92; letter-spacing: -.03em; color: #EEFA9F; text-shadow: 0 0 60px rgba(238,250,159,.35); }
.funnel-ov .central__sub { position: relative; font-size: 14.4px; color: rgba(244,244,238,.65); margin: 28px 0 0; max-width: 480px; line-height: 1.6; }
/* Hinweis „Bericht kommt per Mail“ auf der Ergebniskarte. Steht bewusst zwischen Zahl
   und Haupt-Aktion: Der Verkäufer soll wissen, dass noch ein Klick im Postfach wartet,
   ohne dass es wie eine Fehlermeldung aussieht. */
.funnel-ov .bericht-hinweis { position: relative; margin: 28px auto 0; max-width: 480px; padding: 16px 18px;
  border: .5px solid rgba(244,244,238,.2); border-radius: 10px; background: rgba(244,244,238,.05); }
.funnel-ov .bericht-hinweis__text { font-size: 12.6px; line-height: 1.6; color: rgba(244,244,238,.7); margin: 0 0 12px; }
.funnel-ov .bericht-hinweis__text strong { color: #F4F4EE; }
.funnel-ov .bericht-hinweis .btn--sm { padding: 10px 18px; font-size: 11.7px; }
.funnel-ov .bericht-hinweis .form-hint { font-size: 11.7px; color: rgba(244,244,238,.6); margin: 10px 0 0; }
.funnel-ov--light .bericht-hinweis { border-color: rgba(30,30,30,.18); background: rgba(30,30,30,.04); }
.funnel-ov--light .bericht-hinweis__text { color: rgba(30,30,30,.7); }
.funnel-ov--light .bericht-hinweis__text strong { color: #1E1E1E; }
.funnel-ov--light .bericht-hinweis .form-hint { color: rgba(30,30,30,.6); }

.funnel-ov .central__actions { position: relative; display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; justify-content: center; }

/* Buttons im Overlay */
.funnel-ov .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 32px; border-radius: 10px; border: none; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; transition: all .35s cubic-bezier(.22,.61,.18,1); }
.funnel-ov .btn, .funnel-ov .btn--yellow { background: #EEFA9F; color: #1E1E1E; }
.funnel-ov .btn:hover, .funnel-ov .btn--yellow:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(238,250,159,.3); }
.funnel-ov .btn--ghost { background: transparent; border: .5px solid rgba(244,244,238,.25); color: #F4F4EE; }
.funnel-ov--light .btn--ghost { border-color: rgba(30,30,30,.3); color: #1E1E1E; }
.funnel-ov .btn--ghost:hover { border-color: #EEFA9F; box-shadow: none; }

/* Breiten je Seite (Overlay ist durchgehend dunkel) */
.funnel-ov .funnel-contact { max-width: 600px; }
.funnel-ov .funnel-done { max-width: 980px; }

/* Eingabefelder (Umsatz/Gewinn/Kontakt) auf Dunkel */
.funnel-ov .field, .funnel-ov .input, .funnel-ov .select, .funnel-ov textarea {
  background: #161616; border: .5px solid rgba(244,244,238,.2); color: #F4F4EE; border-radius: 10px; }
.funnel-ov .field::placeholder, .funnel-ov .input::placeholder { color: rgba(244,244,238,.4); }
.funnel-ov .field:focus, .funnel-ov .input:focus, .funnel-ov .select:focus, .funnel-ov textarea:focus { outline: none; border-color: #EEFA9F; box-shadow: 0 0 0 2px rgba(238,250,159,.18); }
.funnel-ov .input-affix { display: flex; align-items: center; gap: 8px; }
.funnel-ov .affix { color: rgba(244,244,238,.6); font-weight: 700; }
.funnel-ov .form-label { color: rgba(244,244,238,.85); }
.funnel-ov .form-hint, .funnel-ov .funnel-note { color: rgba(244,244,238,.55); }
.funnel-ov .consent { color: rgba(244,244,238,.7); }
.funnel-ov .funnel-disclaimer summary, .funnel-ov .funnel-disclaimer li { color: rgba(244,244,238,.6); }
.funnel-ov .funnel-disclaimer { border-top-color: rgba(244,244,238,.16); }

/* Gewinn-Umschalter (€ / %) */
.funnel-ov .seg { display: inline-flex; border: .5px solid rgba(238,250,159,.28); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.funnel-ov .seg button { background: transparent; border: none; color: rgba(244,244,238,.7); font: inherit; font-weight: 700; padding: 11px 18px; cursor: pointer; transition: background .2s, color .2s; }
.funnel-ov .seg button.is-selected { background: #EEFA9F; color: #1E1E1E; }

/* „So geht es weiter": zwei breitere, cleane Karten */
.funnel-ov .funnel-done .funnel-q { text-align: center; }
.funnel-ov .funnel-done .next-steps__lead { text-align: center; color: rgba(244,244,238,.7); max-width: 620px; margin: 12px auto 8px; }
.funnel-ov .next-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; align-items: start; }
.funnel-ov .next-card { background: #161616; border: .5px solid rgba(244,244,238,.14); border-radius: 12px; padding: 30px; }
.funnel-ov .next-card--accent { border-color: rgba(238,250,159,.4); background: rgba(238,250,159,.04); }
.funnel-ov .next-card h3 { font-family: var(--display); font-weight: 800; font-size: 19.8px; margin: 0 0 12px; color: #F4F4EE; }
.funnel-ov .next-card__lead { color: rgba(244,244,238,.7); font-size: 12.6px; line-height: 1.65; margin: 0; }
.funnel-ov .next-card__list { margin: 16px 0 20px; padding-left: 18px; color: rgba(244,244,238,.78); font-size: 12.6px; line-height: 1.5; }
.funnel-ov .next-card__list li { margin-bottom: 7px; }
.funnel-ov .next-card .btn { width: 100%; justify-content: center; }
.funnel-ov .next-steps__title, .funnel-ov .next-card a:not(.btn) { color: #F4F4EE; }
.funnel-ov .next-card a.btn--yellow { color: #1E1E1E; }   /* Button-Text dunkel auf Gelb (lesbar) */
.funnel-ov .slot-row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.funnel-ov .slot-row .select { width: 100%; }
.funnel-ov .slot-wrap { margin-bottom: 14px; }
@media (max-width: 760px) { .funnel-ov .next-steps { grid-template-columns: 1fr; } }

/* Keyframes */
@keyframes funnelFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes funnelSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes funnelGlow { 0%,100% { opacity: .45; } 50% { opacity: .85; } }

/* Mobile */
@media (max-width: 720px) {
  .funnel-ov .band-grid { grid-template-columns: 1fr 1fr; }
  .funnel-ov .opt-grid { grid-template-columns: 1fr 1fr; }
  .funnel-ov .funnel-step { padding: 32px 20px; }
}

/* Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .funnel-ov, .funnel-ov *, .funnel-ov *::before, .funnel-ov *::after { animation: none !important; transition: none !important; }
  .funnel-ov .corridor__fill { width: 100% !important; }
}

/* =========================================================================
   ROLE-LANDING — öffentliche Bereichs-Seiten /fuer-verkaeufer & /fuer-kaeufer
   ========================================================================= */
.rolelanding { background: var(--exit-black); color: var(--off-white); padding: clamp(70px, 12vh, 130px) 26px; min-height: 64vh; display: flex; align-items: center; }
.rolelanding__inner { width: 100%; max-width: 720px; margin: 0 auto; text-align: center; }
.rolelanding .eyebrow--accent { color: var(--exit-yellow); }
.rolelanding__title { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 64px); line-height: 1.03; letter-spacing: -.02em; margin: 16px 0 0; color: var(--off-white); text-wrap: balance; }
.rolelanding__title .accent-y { color: var(--exit-yellow); }
.rolelanding__sub { font-size: 16.2px; line-height: 1.6; color: var(--paper-70); max-width: 560px; margin: 18px auto 0; }
.rolelanding__points { list-style: none; padding: 0; margin: 30px auto 0; max-width: 520px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.rolelanding__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: rgba(244,244,238,.85); }
.rolelanding__points li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--exit-yellow); color: var(--exit-black); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rolelanding__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.rolelanding .btn--ghost { border: .5px solid rgba(244,244,238,.3); color: var(--off-white); }
.rolelanding .btn--ghost:hover { border-color: var(--exit-yellow); }
.rolelanding__cta-link { display: inline-block; margin-top: 20px; color: var(--exit-yellow); font-weight: 700; text-decoration: none; }
.rolelanding__cta-link:hover { text-decoration: underline; }
.rolelanding__secondary { margin-top: 26px; font-size: 12.6px; color: rgba(244,244,238,.6); }
.rolelanding__secondary a { color: var(--exit-yellow); }

/* =========================================================================
   MOBILE-AUFRÄUMEN (≤760px) — schlanke, fokussierte Handy-Ansicht der Startseite.
   Greift NUR in dieser Media Query → Desktop bleibt unverändert.
   ========================================================================= */
@media (max-width: 760px) {
  /* Hero: weniger Deko, kompakter, Fokus auf den Kaufpreisrechner */
  .hero--funnel { padding: 88px 18px 36px; }
  .hero--funnel .hero__grain,
  .hero--funnel .hero__blob,
  .hero--funnel .hero__meta { display: none; }
  .hero--funnel .hero__h1 { font-size: 34.2px; line-height: 1.0; }
  .hero--funnel .hero__sub { font-size: 13.5px; margin-top: 14px; }
  .hero--funnel .pill { margin-bottom: 16px; }
  .hero--funnel .hero__rule-wrap { margin-top: 16px; gap: 12px; }
  .hero--funnel .funnel-card { padding: 18px; }

  /* Überladene/dekorative Sektionen auf dem Handy ausblenden (Inhalt bleibt für Desktop). */
  .buyer-switch,
  .partner-plans,
  .band--lebenswerk,
  .band--ergebnis,
  .divider { display: none; }

  /* Verbleibende Sektionen enger setzen (kürzere, ruhigere Seite). */
  .band--how, .vertrauen, .cta { padding-top: 44px; padding-bottom: 44px; }
}

/* ---- Vollbild-Opener (Video-Intro der Startseite) --------------------------------------
   Liegt fix ÜBER dem Sticky-Header (z-index 300 > 120). Schließen: .is-closing gleitet den
   Layer in 1 s nach oben aus dem Viewport; app.js setzt danach hidden. Einmal pro Sitzung. */
#opener {
  position: fixed; inset: 0; z-index: 300; background: #0E0E0E;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
  box-shadow: inset 0 0 240px rgba(0, 0, 0, .7); /* dezente innere Vignette */
}
#opener[hidden] { display: none; }
#opener.is-closing { transform: translateY(-100%); }
body.opener-open { overflow: hidden; } /* Scroll-Lock, solange der Opener sichtbar ist */

.opener__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.opener__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(14,14,14,.52), rgba(14,14,14,.52)),
              radial-gradient(ellipse at center, rgba(14,14,14,0) 0%, rgba(14,14,14,.62) 100%); }
.opener__glow { position: absolute; top: -140px; right: -120px; width: 480px; height: 480px;
  border-radius: 50%; background: radial-gradient(circle, rgba(238,250,159,.1) 0%, rgba(238,250,159,0) 70%);
  filter: blur(12px); animation: floatY 9s ease-in-out infinite; pointer-events: none; }

.opener__bar { position: relative; display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 44px); animation: fadeIn .8s cubic-bezier(.22,.61,.18,1) .2s both; }
.opener__logo { height: 26px; width: auto; display: block; }
.opener__skip { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244,244,238,.55); background: none; border: 0; padding: 8px 0; cursor: pointer; transition: color .15s ease; }
.opener__skip:hover, .opener__skip:focus-visible { color: #F4F4EE; }

.opener__center { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 0 20px; }
.opener__eyebrow { color: var(--exit-yellow); font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 18px; animation: fadeUp .8s cubic-bezier(.22,.61,.18,1) .35s both; }
.opener__headline { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 6.4vw, 92px);
  line-height: .96; color: #F4F4EE; margin: 0; letter-spacing: -.01em; text-transform: none; }
.opener__line { display: block; overflow: hidden; padding-bottom: .06em; /* Unterlängen nicht abschneiden */ }
.opener__line-inner { display: inline-block; transform: translateY(112%); animation: maskUp .9s cubic-bezier(.22,.61,.18,1) both; }
.opener__line:nth-child(1) .opener__line-inner { animation-delay: .5s; }
.opener__line:nth-child(2) .opener__line-inner { animation-delay: .64s; }
.opener__accent { color: var(--exit-yellow); }
.opener__sub { color: rgba(244,244,238,.72); font-size: 15.3px; margin: 22px 0 0;
  animation: fadeUp .8s cubic-bezier(.22,.61,.18,1) .85s both; }
.opener__cta { margin-top: 34px; font-family: var(--sans); font-weight: 700; font-size: 12.6px;
  text-transform: uppercase; letter-spacing: .08em; padding: 20px 44px; border-radius: 10px; border: 0;
  background: var(--exit-yellow); color: #1E1E1E; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease; animation: fadeUp .8s cubic-bezier(.22,.61,.18,1) 1s both; }
.opener__cta:hover, .opener__cta:focus-visible { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(238,250,159,.28); }
.opener__foot { position: relative; text-align: center; color: rgba(244,244,238,.4); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; margin: 0; padding: 0 0 26px;
  animation: fadeIn .8s cubic-bezier(.22,.61,.18,1) 1.2s both; }

@keyframes maskUp { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* floatY existiert bereits weiter oben (Hero) und wird wiederverwendet. */

/* Reduzierte Bewegung: keine Animationen/Übergänge, Inhalte sofort sichtbar; app.js zeigt
   dann das Poster-Standbild statt des Videos und schließt ohne Slide. */
@media (prefers-reduced-motion: reduce) {
  #opener, .opener__glow, .opener__bar, .opener__eyebrow, .opener__line-inner,
  .opener__sub, .opener__cta, .opener__foot { animation: none !important; transition: none !important; }
  .opener__line-inner { transform: none; }
  #opener.is-closing { display: none; }
}

/* ---- Marktplatz: gestufter Zugriff (Sperr-Zeilen, Plan-Banner) --------------------------- */
.market-plan { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; border: .5px solid var(--hair-light); border-radius: var(--radius);
  padding: 12px 16px; margin: 14px 0; background: var(--black-900); }
.market-plan__info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Gesperrt = gedimmt, aber LESBAR (Betreiber-Entscheidung: Kennzahlen sichtbar,
   nur der volle Teaser ist gesperrt). Aktionsspalten bleiben voll deckend. */
.market-row--locked td { opacity: .75; }
.market-row--locked td:last-child, .market-row--locked td:nth-last-child(2) { opacity: 1; }
/* Sperr-Hinweis darf UMBRECHEN (white-space:nowrap ließ den Text in die Nachbarspalte laufen). */
.lock-note { color: var(--paper-70); font-size: 11.3px; line-height: 1.5; display: inline-block; }

/* Marktplatz-Seite breiter (Nutzer-Wunsch): der Bildschirmplatz war ungenutzt. */
body[data-page="kaeufer-markt"] .container { max-width: 1320px; }

/* ==== Öffentliche Terminbuchung /termin (dunkles Panel) ==================== */
/* Terminart-Karten */
.tb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.tb-type { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 3px;
  background: var(--exit-black); color: var(--off-white); border: .5px solid rgba(244,244,238,.16);
  border-radius: var(--radius); padding: 14px 15px; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur), transform var(--dur) var(--ease); }
.tb-type:hover { border-color: var(--exit-yellow); transform: translateY(-2px); }
.tb-type.is-selected { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); }
.tb-type__name { font-weight: 700; font-size: 1rem; }
.tb-type__desc { font-size: .82rem; opacity: .8; }
.tb-type.is-selected .tb-type__desc { opacity: .9; }
.tb-type__dur { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-top: 2px; }

/* Kalender + Zeiten nebeneinander */
.tb-picker { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 24px; margin-top: 8px; align-items: start; }
.tb-picker--stack { grid-template-columns: 1fr; gap: 16px; } /* schmale Kontexte (Funnel-Karte) */
.tb-cal { user-select: none; }
.tb-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tb-cal__month { font-weight: 700; color: var(--off-white); text-transform: capitalize; }
.tb-cal__nav { width: 36px; height: 36px; border-radius: 8px; background: var(--exit-black); color: var(--off-white);
  border: .5px solid rgba(244,244,238,.16); cursor: pointer; font-size: 1.15rem; line-height: 1; }
.tb-cal__nav:hover:not(:disabled) { border-color: var(--exit-yellow); color: var(--exit-yellow); }
.tb-cal__nav:disabled { opacity: .3; cursor: default; }
.tb-cal__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 6px; }
.tb-cal__wd span { text-align: center; font-size: .72rem; letter-spacing: .04em; color: var(--paper-70); text-transform: uppercase; }
.tb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.tb-cal__blank { aspect-ratio: 1; }
.tb-cal__day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font: inherit; font-size: .92rem;
  border-radius: 8px; background: rgba(244,244,238,.05); color: var(--off-white);
  border: .5px solid rgba(244,244,238,.14); cursor: pointer; transition: background var(--dur), color var(--dur), border-color var(--dur); }
.tb-cal__day:hover:not(:disabled) { border-color: var(--exit-yellow); }
.tb-cal__day.is-selected { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); font-weight: 700; }
.tb-cal__day:disabled { background: transparent; border-color: transparent; color: var(--paper-70); opacity: .32; cursor: default; }

/* Uhrzeiten (gruppiert Vormittag/Nachmittag) */
.tb-times__day { margin: 0 0 12px; color: var(--off-white); }
.tb-times__hint { padding-top: 6px; }
.tb-times__group { margin-bottom: 16px; }
.tb-times__grouptitle { margin: 0 0 8px; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--paper-70); }
.tb-times__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.tb-time { font: inherit; text-align: center; background: var(--exit-black); color: var(--off-white);
  border: .5px solid rgba(244,244,238,.16); border-radius: 8px; padding: 10px 6px; cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur); }
.tb-time:hover { border-color: var(--exit-yellow); transform: translateY(-1px); }
.tb-time.is-selected { background: var(--exit-yellow); color: var(--exit-black); border-color: var(--exit-yellow); font-weight: 700; }

@media (max-width: 640px) {
  .tb-types { grid-template-columns: 1fr; }
  .tb-picker { grid-template-columns: 1fr; }
}

/* ==== Unterlagen-Checkliste im Verkäufer-Transaktionsraum (dunkles Dashboard) ==== */
.dd-count { font-weight: 400; opacity: .7; font-size: .85em; }
.dd-list { list-style: none; margin: 6px 0 0; padding: 0; }
.dd-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-top: .5px solid var(--hair-light); flex-wrap: wrap; }
.dd-item:first-child { border-top: none; }
.dd-item__info { display: flex; flex-direction: column; gap: 3px; min-width: 220px; flex: 1 1 260px; }
.dd-item__name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dd-item__desc { font-size: .85rem; color: var(--paper-70); }
.dd-item__file { font-size: .85rem; color: var(--exit-yellow); word-break: break-word; }
.dd-req { font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px;
  border-radius: 999px; border: .5px solid var(--hair-light); color: var(--paper-70); font-weight: 600; }
.dd-item.is-done .dd-req { color: var(--exit-yellow); border-color: rgba(238, 250, 159, .4); }
.dd-item__actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.dd-up { cursor: pointer; }
.dd-up.is-busy { opacity: .6; pointer-events: none; }

/* ---- iOS-Zoom-Schutz (MUSS die letzte Feld-Regel der Datei bleiben) --------------------
   iOS Safari zoomt beim Fokussieren automatisch in Formularfelder mit < 16px hinein und
   bleibt gezoomt. Auf schmalen Screens daher ALLE Felder auf 16px – inklusive der
   Vertragsdaten-Maske (.contract-data .input, sonst 14px) und der Funnel-Kontaktfelder
   (input/select mit Klasse .field, haben sonst gar keine font-size-Regel). Steht bewusst
   am Dateiende, damit keine spätere/spezifischere Regel sie übersteuert. */
@media (max-width: 620px) {
  .input, .select, .textarea,
  input.field, select.field, textarea.field,
  .contract-data .input { font-size: 14.4px; }
}

/* Suchauftrag (Käuferbereich): kompaktes Gewerke-Raster + Checkbox-Zeilen */
.sg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px; }
.sg-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12.6px; cursor: pointer; }
.sg-item input { margin-top: 3px; accent-color: var(--yellow, #EEFA9F); }
@media (max-width: 720px) { .sg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sg-grid { grid-template-columns: 1fr; } }

/* Öffentliche Erklärseiten (Methodik, Käufer-Konditionen) */
.section .h3 { font-size: 18px; margin: 0 0 8px; }
.methodik-steps { display: grid; gap: 10px; padding-left: 20px; margin: 0 0 10px; }
.methodik-calc { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.preis-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.preis-card { background: #fff; color: var(--exit-black, #1E1E1E); border: .5px solid rgba(238, 250, 159, .22); border-radius: 12px; padding: 18px; }
/* Globale Heading-/Muted-Farben (helle Schrift für dunkle Seiten) gezielt überstimmen –
   sonst bleibt die Überschrift auf der weißen Karte weiß auf weiß. */
.preis-card:not(.preis-card--dark) .h3 { color: var(--exit-black, #1E1E1E); }
.preis-card .muted { color: var(--ink-60, #6B6B66); }
.preis-card--dark { background: var(--exit-black, #1E1E1E); color: var(--off-white, #F4F4EE); }
.preis-card__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--exit-yellow, #EEFA9F); color: var(--exit-black, #1E1E1E); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px; }
.preis-card__preis { font-size: 23.4px; font-weight: 800; margin: 6px 0 2px; }
.preis-card ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.faq-block details { border-bottom: 1px solid var(--hairline, #DDDCD4); padding: 10px 0; }
.faq-block summary { font-weight: 700; cursor: pointer; }
.faq-block p { margin: 8px 0 0; }
@media (max-width: 720px) { .preis-cards { grid-template-columns: 1fr; } }

/* Startseiten-Band „Transparente Konditionen" (HELLE Sektion zwischen dunklem
   Abschluss-Divider und gelbem CTA – erhält den Hell/Dunkel-Wechsel der Seite).
   Gelbe 0-€-Verkäuferkarte als Blickfang, Käufer-Karte dunkel auf Hell (wie die
   Panels). Typo nach Vorgabe: Titel/Preise var(--display) 800, Text Space Grotesk.
   Selektoren bewusst mit .kond-Präfix: die section--light-Regeln (p/li/link auf
   Dunkeltext) dürfen die DUNKLE Käufer-Karte nicht überstimmen. */
.kond { padding: 76px 0; }
.kond__intro { max-width: 680px; }
.kond__title { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.02; margin: 10px 0 0; }
.kond__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.kond-card { background: var(--black-900); border: .5px solid rgba(238, 250, 159, .22); border-radius: 10px; padding: 26px; color: var(--off-white); }
.kond .kond-card__tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,244,238,.55); margin-bottom: 12px; }
.kond .kond-card__preis { font-family: var(--display); font-weight: 800; font-size: 36px; line-height: 1; color: var(--exit-yellow); }
.kond .kond-card__einheit { font-family: var(--sans); font-size: 12.6px; font-weight: 400; color: rgba(244,244,238,.55); }
.kond p.kond-card__sub { margin: 8px 0 14px; font-size: 11.7px; color: rgba(244,244,238,.7); }
.kond .kond-card__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.kond .kond-card__list li { color: rgba(244,244,238,.85); }
.kond .kond-card--gelb { background: var(--exit-yellow); border-color: var(--hair-dark); color: var(--exit-black); }
.kond .kond-card--gelb .kond-card__tag { color: rgba(30,30,30,.55); }
.kond .kond-card--gelb p.kond-card__sub { color: var(--ink-60); }
.kond .kond-card--gelb .kond-card__preis { color: var(--exit-black); }
.kond .kond-card--gelb .kond-card__list li { color: var(--exit-black); }
.kond .kond-card .link { color: var(--exit-yellow); }
.kond p.kond__fuss { margin: 18px 0 0; font-size: 11.7px; color: var(--ink-60); }
.kond .kond__fuss .link { color: inherit; }
@media (max-width: 720px) { .kond { padding: 56px 0; } .kond__cards { grid-template-columns: 1fr; } .kond .kond-card__preis { font-size: 30.6px; } }

/* Fragebogen: Hinweis, wenn „Weiter" ohne Eingabe geklickt wird (kein stilles Scheitern) */
.q-error { color: var(--black); font-weight: 700; font-size: 11.7px; }

/* Upload-Bereiche auf dunklem Grund (Fragebogen Q27/28, Portal-Uploads): Dateinamen,
   „Datei wählen" und „Entfernen" waren schwarz auf schwarz – helle Gegenstücke. */
.upload-list li { color: var(--paper-70, rgba(244,244,238,.7)); }
.upload-hint .link-btn { color: var(--exit-yellow); }
.link-btn.upload-del { color: #E05252; }

/* Fragebogen-Abschluss: Luft um den Veröffentlichen-Button und die Hinweise */
.funnel-done .btn--yellow { margin: 18px auto 12px; display: inline-block; }
.funnel-done .form-hint { margin: 0 0 10px; }
.funnel-done .muted { margin: 0 0 18px; }
.funnel-done > .btn--ghost { margin-top: 4px; }

/* Kaufinteressenten-Panel (Verkäufer): Bewerberkarten mit Foto und Zuschlag */
.bewerber { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: .5px solid rgba(238,250,159,.16); }
.bewerber:last-child { border-bottom: none; }
.bewerber__foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bewerber__foto--leer { display: inline-flex; align-items: center; justify-content: center; background: var(--exit-yellow); color: var(--exit-black); font-weight: 800; font-size: 19.8px; }
.bewerber__body { flex: 1; min-width: 0; }
.bewerber__text { margin: 8px 0; font-size: 12.6px; color: rgba(244,244,238,.85); white-space: pre-wrap; }
.bewerber__act { flex: 0 0 auto; display: grid; gap: 8px; justify-items: end; }
@media (max-width: 640px) { .bewerber { flex-wrap: wrap; } .bewerber__act { width: 100%; justify-items: start; } }

/* Schwebendes Chat-Widget (Phase 2 Bewerbungsmodell): Launcher + Panel unten rechts */
#chat-fab-mount { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chatw__fab { position: relative; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--exit-yellow); color: var(--exit-black); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chatw__fab:hover { transform: scale(1.05); }
.chatw__badge { position: absolute; top: -4px; right: -4px; background: var(--exit-black); color: var(--exit-yellow); border: 1.5px solid var(--exit-yellow); border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.chatw__toast { border: .5px solid rgba(238,250,159,.4); background: var(--black-900); color: var(--off-white); border-radius: 10px; padding: 10px 14px; font-size: 11.7px; cursor: pointer; max-width: 260px; text-align: left; }
.chatw__panel { width: min(340px, calc(100vw - 36px)); max-height: min(480px, 70vh); background: var(--black-900); border: .5px solid rgba(238,250,159,.3); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; color: var(--off-white); }
.chatw__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: .5px solid rgba(238,250,159,.16); }
.chatw__head strong { flex: 1; font-size: 12.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatw__close, .chatw__back { background: none; border: none; color: var(--off-white); font-size: 16.2px; cursor: pointer; padding: 0 4px; }
.chatw__list { overflow-y: auto; }
/* Rechts 46px Innenabstand: Text (Name + Vorschau) läuft nie unter den
   Ungelesen-Badge; der Badge sitzt vertikal mittig mit klarer Luft zum Text. */
.chatw__row { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: .5px solid rgba(244,244,238,.08); padding: 11px 46px 11px 14px; cursor: pointer; color: var(--off-white); position: relative; }
.chatw__row:hover { background: rgba(238,250,159,.06); }
.chatw__row-label { display: block; font-weight: 700; font-size: 12.2px; }
.chatw__row-meta { display: block; font-size: 11px; color: rgba(244,244,238,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatw__dot { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: var(--exit-yellow); color: var(--exit-black); border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.chatw__leer { padding: 16px 14px; font-size: 11.7px; color: rgba(244,244,238,.6); margin: 0; }
.chatw__msgs { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.chatw__msg { max-width: 85%; background: rgba(244,244,238,.08); border-radius: 10px 10px 10px 3px; padding: 8px 11px; font-size: 12.2px; white-space: pre-wrap; word-break: break-word; align-self: flex-start; }
.chatw__msg--ich { background: var(--exit-yellow); color: var(--exit-black); border-radius: 10px 10px 3px 10px; align-self: flex-end; }
.chatw__form { display: flex; gap: 8px; padding: 10px 12px; border-top: .5px solid rgba(238,250,159,.16); }
.chatw__input { flex: 1; background: rgba(244,244,238,.06); border: .5px solid rgba(244,244,238,.2); border-radius: 8px; color: var(--off-white); padding: 8px 10px; font: inherit; font-size: 12.2px; }
.chatw__input:focus { outline: none; border-color: var(--exit-yellow); }
/* Hinweiszeile in der Konversationsliste (2026-07-30): sagt, ob hier der Assistent
   sofort antwortet oder ein echter Mensch sitzt. */
.chatw__row-hint { display: block; font-size: 11px; color: var(--exit-yellow); opacity: .85; }
/* „Profil ↗" im Kopf der offenen Unterhaltung. */
.chatw__profil { margin-left: auto; margin-right: 6px; font-size: 11.5px; white-space: nowrap;
  color: var(--exit-yellow); text-decoration: none; border: .5px solid rgba(238,250,159,.45);
  border-radius: 6px; padding: 3px 7px; }
.chatw__profil:hover { border-color: var(--exit-yellow); }
@media print { #chat-fab-mount { display: none; } }

/* Chat-Widget: Avatare (Bewerber-Foto/Initiale; Käufer sieht neutrales „V") */
.chatw__row { display: flex; align-items: center; gap: 10px; }
.chatw__row-body { flex: 1; min-width: 0; display: block; }
.chatw__ava { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--exit-yellow); color: var(--exit-black); font-weight: 800; font-size: 12.6px; display: inline-flex; align-items: center; justify-content: center; }
.chatw__ava--anon { background: #2A2A28; color: rgba(244,244,238,.8); border: .5px solid rgba(238,250,159,.35); }
.chatw__head .chatw__ava { width: 28px; height: 28px; font-size: 11px; }
/* EXIT24-Support-Draht (Kathrin Winter) hebt sich dezent vom Rest der Liste ab. */
.chatw__row--support { background: rgba(238,250,159,.05); }
.chatw__row--support .chatw__ava { border: 1.5px solid var(--exit-yellow); }

/* Portal-Neuordnung 2026-07-23: Kontextkarten + Stepper-Zähler + Bewerber-Detail */
.kontext-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kontext-karten:has(> :only-child) { grid-template-columns: 1fr; }
.kontext-karte { display: block; border-radius: 10px; padding: 16px 18px; text-decoration: none; background: var(--black-900); border: .5px solid rgba(238,250,159,.25); color: var(--off-white); }
.kontext-karte strong { display: block; font-size: 14.4px; margin: 2px 0 6px; color: inherit; }
.kontext-karte__tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,244,238,.5); }
.kontext-karte__text { display: block; font-size: 11.7px; color: rgba(244,244,238,.7); }
.kontext-karte--gelb { background: var(--exit-yellow); border-color: var(--exit-yellow); color: var(--exit-black); }
.kontext-karte--gelb .kontext-karte__tag { color: rgba(30,30,30,.55); }
.kontext-karte--gelb .kontext-karte__text { color: rgba(30,30,30,.7); }
.kontext-karte__avatare { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.kontext-karte__ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.kontext-karte__ava--ini { background: var(--exit-black); color: var(--exit-yellow); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.kontext-karte__avatare .kontext-karte__text { margin-left: 8px; margin-top: 0; }
.stepper__dot { position: relative; }
.stepper__count { position: absolute; top: -7px; right: -9px; background: var(--exit-yellow); color: var(--exit-black); border: 1.5px solid var(--exit-black); border-radius: 999px; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; }
.bewerber--karte { width: 100%; text-align: left; background: var(--black-900); border: .5px solid rgba(238,250,159,.22); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; color: var(--off-white); }
.bewerber--karte:hover { border-color: rgba(238,250,159,.5); }
.bewerber--detail { background: var(--black-900); border: .5px solid rgba(238,250,159,.22); border-radius: 10px; padding: 20px; }
.bewerber__foto--gross { width: 96px; height: 96px; font-size: 32.4px; }
@media (max-width: 720px) { .kontext-karten { grid-template-columns: 1fr; } .bewerber__foto--gross { width: 64px; height: 64px; font-size: 23.4px; } }

/* Chat-Widget: Terminabstimmung im Thread (📅) */
.chatw__cal { background: none; border: none; cursor: pointer; font-size: 13.5px; padding: 0 2px; }
.chatw__cal-box { border-bottom: .5px solid rgba(238,250,159,.16); padding: 10px 14px; display: grid; gap: 8px; max-height: 180px; overflow-y: auto; }
.chatw__cal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.3px; color: rgba(244,244,238,.85); }
.chatw__cal-form { display: flex; gap: 8px; }

/* Portal-Ergänzungen 2026-07-24: Teaser-Resonanz-Kacheln + Beratungs-Anker */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat-kachel { background: var(--black-900); border: .5px solid rgba(238,250,159,.22); border-radius: 10px; padding: 16px 18px; }
.stat-kachel__num { font-family: var(--display); font-weight: 800; font-size: 28.8px; line-height: 1; color: var(--exit-yellow); }
.stat-kachel__lab { font-size: 11.3px; color: rgba(244,244,238,.7); margin-top: 6px; }
.berater-anker { display: flex; align-items: center; gap: 16px; background: var(--black-900); border: .5px solid rgba(238,250,159,.22); border-radius: 12px; padding: 16px 18px; }
.berater-anker__foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.berater-anker__body { flex: 1; min-width: 0; }
.berater-anker__tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,244,238,.5); margin: 0 0 2px; }
.berater-anker__body strong { display: block; font-size: 14.4px; }
.berater-anker__text { font-size: 11.7px; color: rgba(244,244,238,.7); margin: 4px 0 10px; }
.berater-anker__act { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 620px) { .stat-strip { grid-template-columns: 1fr; } .berater-anker { flex-direction: column; text-align: center; } }

/* Gäste-Chat „Kathrin Winter" (2026-07-27): Kontaktformular im Widget-Panel */
.chatw__gast-kontakt { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; }
.chatw__gast-kontakt .chatw__input { width: 100%; }

/* --- Bildlupe: Profilfoto groß ansehen (2026-07-28) ------------------------- */
.bildlupe { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible; }
.bildlupe::backdrop { background: rgba(0, 0, 0, .82); }
.bildlupe__bild { display: block; max-width: 92vw; max-height: 88vh; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6); object-fit: contain; }
.bildlupe__zu { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(238, 250, 159, .35); background: var(--exit-black); color: var(--exit-yellow);
  font-size: 19.8px; line-height: 1; cursor: pointer; }
.bildlupe__zu:hover { background: var(--exit-yellow); color: var(--exit-black); }

/* Anklickbares Profilfoto: Zeiger + dezenter Fokusring, ohne das Rund zu brechen. */
.foto-lupe { cursor: zoom-in; border: 0; padding: 0; background: none; border-radius: 50%; }
.foto-lupe:focus-visible { outline: 2px solid var(--exit-yellow); outline-offset: 2px; }

/* Käuferprofil-Kopf: Avatar neben Name/Firma, wie in sozialen Netzwerken. */
.profil-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.profil-kopf__ava { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  background: var(--exit-yellow); color: var(--exit-black); font-weight: 800; font-size: 25.2px;
  display: inline-flex; align-items: center; justify-content: center; }
.profil-kopf__aktion { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 520px) { .profil-kopf__ava { width: 56px; height: 56px; font-size: 19.8px; } }