/* Zaster Radar 2.0 – Precision Orbit
   Die bestehenden Produktzustände bleiben erhalten. Dieses Layer führt die
   gewählte visuelle Richtung zentral und schrittweise ein. */

/* Token: assets/tokens.css (eine Familie fuer alle Seiten, Phase 2). */

body {
  background:
    radial-gradient(circle at 74% -10%, var(--zr2-surface-tint), transparent 31rem),
    var(--zr2-canvas);
}

input,
select,
textarea {
  border-color: var(--zr2-control-border) !important;
}

.zr-shell {
  overflow-x: clip;
  font-family: var(--zr2-font-body);
}

.zr-primary-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zr2-space-2);
  border: 0;
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-action) !important;
  color: var(--zr2-action-ink) !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--zr2-shadow-action);
  transition:
    transform var(--zr2-duration-fast) var(--zr2-ease-standard),
    box-shadow var(--zr2-duration-fast) var(--zr2-ease-standard),
    background var(--zr2-duration-fast) var(--zr2-ease-standard);
}

.zr-primary-button:hover {
  background: var(--zr2-action-hover) !important;
  color: var(--zr2-action-ink) !important;
  transform: translateY(-1px);
  box-shadow: var(--zr2-shadow-action-hover);
}

.zr-primary-button:active {
  transform: translateY(0);
}

.zr-rail-wrap {
  border-color: var(--zr2-line) !important;
  background: color-mix(in srgb, var(--zr2-canvas), transparent 4%) !important;
}

.zr-rail-grid {
  max-width: var(--zr2-content) !important;
}

.zr-journey-step.is-active {
  border-color: var(--zr2-line-strong);
  background: var(--zr2-action-tint);
}

.zr-hero {
  position: relative;
  isolation: isolate;
  max-width: var(--zr2-content);
  min-height: min(810px, calc(100vh - 112px));
  margin: 0 auto;
  padding: clamp(var(--zr2-space-9), 7vw, var(--zr2-space-11)) var(--zr2-space-6) clamp(var(--zr2-space-9), 8vw, var(--zr2-space-12));
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  grid-template-areas:
    "kopf haus"
    "copy haus";
  gap: var(--zr2-space-2) var(--zr2-space-8);
  align-items: start;
  align-content: center;
}

.zr-hero-kopf { grid-area: kopf; }

.zr-hero > .zr-hero-copy { grid-area: copy; }

.zr-haus-panel { grid-area: haus; }

.zr-hero-copy {
  position: relative;
  z-index: var(--zr2-z-content);
}

.zr-hero::before {
  content: "";
  position: absolute;
  z-index: var(--zr2-z-underlay);
  width: 720px;
  height: 720px;
  right: -170px;
  top: -150px;
  border-radius: var(--zr2-radius-pill);
  background: radial-gradient(circle, var(--zr2-surface-tint), transparent 66%);
  pointer-events: none;
}

.zr-hero-copy {
  min-width: 0;
  align-self: center;
}

.zr-hero-eyebrow,
.zr-section-eyebrow {
  margin: 0;
  font-family: var(--zr2-font-body);
  font-size: var(--zr2-type-caption);
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.4;
}

.zr-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--zr2-space-2);
  color: var(--zr2-action);
}

.zr-hero-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--zr2-radius-pill);
  background: currentColor;
}

html[data-zr-theme="light"] .zr-header-top > a span,
html[data-zr-theme="light"] .zr-hero-eyebrow {
  color: var(--zr2-trust) !important;
}

.zr-hero h1 {
  margin: var(--zr2-space-6) 0 var(--zr2-space-6);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-display-hero);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.02;
  text-wrap: balance;
}

.zr-hero-lead {
  max-width: 37rem;
  margin: 0 0 var(--zr2-space-7);
  color: var(--zr2-body);
  font-size: var(--zr2-type-title);
  line-height: 1.68;
}

.zr-hero-lead strong {
  color: var(--zr2-ink);
  font-weight: 720;
}

.zr-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--zr2-space-4);
  flex-wrap: wrap;
  margin: 0 0 var(--zr2-space-4);
}

/* Sichtpruefung 06.09.2026: der Knopf fuellt die Textspalte, Text mittig. */
.zr-hero-actions .zr-primary-button {
  width: 100%;
}

.zr-primary-button {
  min-height: 56px;
  padding: var(--zr2-space-4) var(--zr2-space-6);
  font-size: var(--zr2-type-body);
}

.zr-primary-button svg {
  width: 18px;
  height: 18px;
  transition: transform var(--zr2-duration-fast) var(--zr2-ease-standard);
}

.zr-primary-button:hover svg,
.zr-primary-button:focus-visible svg {
  transform: translateX(3px);
}

.zr-method-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--zr2-muted);
  font-size: var(--zr2-type-small);
  font-weight: 700;
  text-decoration: none;
}

.zr-method-link:hover {
  color: var(--zr2-ink);
}

/* Direkt unter dem Knopf, in Fliesstextgroesse und Tinte: hier wird
   "Kostenlos" tatsaechlich gelesen (05.09.2026). */
.zr-trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zr2-space-2) var(--zr2-space-4);
  margin: 0;
  padding: 0;
  color: var(--zr2-body);
  list-style: none;
}

.zr-trust-line li {
  display: inline-flex;
  align-items: center;
  gap: var(--zr2-space-2);
  font-size: var(--zr2-type-body);
  font-weight: 600;
}

.zr-trust-line li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--zr2-radius-pill);
  background: var(--zr2-trust);
  box-shadow: 0 0 12px var(--zr2-trust-tint-strong);
}

.zr-haus-panel {
  height: auto;
  align-self: center;
  min-width: 0;
  position: relative;
  z-index: var(--zr2-z-content);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zr2-line-strong);
  border-radius: var(--zr2-radius-product);
  padding: var(--zr2-space-6);
  background:
    linear-gradient(150deg, var(--zr2-surface-tint), transparent 40%),
    radial-gradient(circle at 48% 42%, var(--zr2-surface-tint), transparent 42%),
    var(--zr2-haus-panel);
  box-shadow: var(--zr2-shadow-surface);
}

.zr-orbit-head,
.zr-haus-buehne,
.zr-orbit-footnote {
  position: relative;
  z-index: var(--zr2-z-content);
}

.zr-orbit-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--zr2-space-2) var(--zr2-space-4);
  align-items: flex-start;
}

/* Betreiberentscheidung 28.08.2026: die Ueberschrift steht einzeilig ueber dem
   Bild. Eine Breitenkappe wuerde sie wieder umbrechen. Kommentare gehoeren vor
   die Regel, nicht hinein: sonst kleben sie am naechsten Eigenschaftsnamen. */
.zr-orbit-head h2 {
  max-width: none;
  margin: var(--zr2-space-2) 0 0;
  color: var(--zr2-haus-ink);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-display-section);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.zr-orbit-live {
  display: inline-flex;
  align-items: center;
  gap: var(--zr2-space-2);
  color: var(--zr2-haus-body);
  font-family: var(--zr2-font-body);
  font-size: var(--zr2-type-label);
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
}

.zr-orbit-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--zr2-radius-pill);
  background: var(--zr2-action);
}

.zr-orbit-footnote {
  margin: var(--zr2-space-2) 2px 0;
  color: var(--zr2-haus-muted);
  font-size: var(--zr2-type-label);
  line-height: 1.45;
}

.zr-orbit-footnote a {
  color: var(--zr2-haus-body);
}

/* Kopfbereich in drei Baendern: Ueberschrift, Haus, Text darunter.
   Betreiberentscheidung vom 28.08.2026 — das Haus bekommt die volle Breite. */
.zr-hero-kopf {
  position: relative;
  z-index: var(--zr2-z-content);
  min-width: 0;
}

/* Betreiberwunsch 28.08.2026: der Umbruch faellt nach "du". Auf schmalen
   Geraeten bricht die Zeile natuerlich, sonst stuende "du" allein. */
.zr-hero-kopf h1 {
  max-width: none;
  /* Die Groesse kommt aus der Hero-Stufe (assets/tokens.css), die genau fuer
     diesen Zweispalter bemessen ist. */
  line-height: 1.06;
  margin: var(--zr2-space-4) 0 var(--zr2-space-4);
}

.zr-hero > .zr-hero-copy {
  align-self: start;
  max-width: 62ch;
}

/* Kurzstart-Meilenstein: Ergebnis zuerst, eine Empfehlung ---------------- */
.zr-quick-ergebnis {
  margin: var(--zr2-space-1) 0 var(--zr2-space-3);
  font-size: var(--zr2-type-body);
  font-weight: 720;
  color: var(--zr2-ink);
}

.zr-quick-next {
  display: flex;
  align-items: center;
  gap: var(--zr2-space-2) var(--zr2-space-4);
  flex-wrap: wrap;
  margin: var(--zr2-space-4) 0 var(--zr2-space-1);
}

.zr-quick-alt {
  background: none;
  border: none;
  padding: var(--zr2-space-2) 2px;
  color: var(--zr2-muted);
  font: inherit;
  font-size: var(--zr2-type-small);
  font-weight: 680;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.zr-quick-alt:hover { color: var(--zr2-body); }

.zr-quick-alt:focus-visible { outline: 2px solid var(--zr2-action); outline-offset: 2px; }

.zr-quick-mehr {
  margin: var(--zr2-space-2) 0 var(--zr2-space-2);
  font-size: var(--zr2-type-caption);
  color: var(--zr2-muted);
}

/* Opt-outs als leise Zeile unter den Antwortkarten ---------------------- */
.zr-quiz-optouts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zr2-space-2) var(--zr2-space-4);
  margin: var(--zr2-space-2) 0 var(--zr2-space-4);
}

/* Ausweichoptionen (F10): bewusst leiser als die Antwortknoepfe, aber mit
   voller Tippflaeche von 44 px. Werte und Logik bleiben unveraendert. */
.zr-fullcheck-optout {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0 2px;
  color: var(--zr2-muted);
  font: inherit;
  font-size: var(--zr2-type-caption);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.zr-fullcheck-optout[aria-pressed="true"] { color: var(--zr2-trust); }

.zr-fullcheck-optout:focus-visible { outline: 2px solid var(--zr2-action); outline-offset: 2px; }

.zr-ratgeber-teaser {
  margin: var(--zr2-space-4) 0 0;
  font-size: var(--zr2-type-small);
  color: var(--zr2-muted);
}

.zr-ratgeber-teaser a { color: var(--zr2-trust); }

/* Betreiberwunsch 28.08.2026: das FAQ bleibt als einzige benannte
   Ausnahme mittig zentriert. */
.zr-faq-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--zr2-space-10) var(--zr2-space-6);
}

/* Beleg, Finanzierung und Moment-Chips im Kopfbereich ------------------- */
/* Eigene Sektion direkt unter dem Hero (05.09.2026): Titel, ein Absatz,
   das Rechtsfenster und die drei Zeilen. */
.zr-moment {
  margin: 0;
  max-width: none;
  font-size: var(--zr2-type-body);
  line-height: 1.65;
  color: var(--zr2-body);
}

.zr-moment h2 {
  max-width: none;
  margin: 0 0 var(--zr2-space-4);
  color: var(--zr2-ink);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-display-section);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.06;
  text-wrap: balance;
}

.zr-moment-satz {
  margin: 0 0 var(--zr2-space-1);
  max-width: none;
}
.zr-moment-recht {
  margin: var(--zr2-space-4) 0 0;
  max-width: 56ch;
  font-size: var(--zr2-type-small);
  line-height: 1.6;
  color: var(--zr2-muted);
}
.zr-moment-recht a { color: var(--zr2-body); }

.zr-moment-nummer {
  flex: 0 0 auto;
  margin-right: 2px;
  font-family: var(--zr2-font-data);
  font-size: var(--zr2-type-caption);
  font-weight: 600;
  color: var(--zr2-muted);
}

.zr-moment-nummer::after {
  content: "/";
  margin-left: var(--zr2-space-2);
  color: var(--zr2-faint);
}

/* Mobiler Ersatz fuer das Haus: unter 901px ist es reines Bild, die Chips
   uebernehmen die Bedienung mit voller Tippgroesse. */
.zr-haus-chips {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zr2-space-2);
  margin: var(--zr2-space-4) 0 0;
}

.zr-haus-chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--zr2-space-2) var(--zr2-space-2);
  border: 1px solid var(--zr2-trust-tint);
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-surface-tint);
  color: var(--zr2-haus-ink);
  font: inherit;
  font-size: var(--zr2-type-small);
  font-weight: 720;
  cursor: pointer;
}

.zr-haus-chip:focus-visible { outline: 2px solid var(--zr2-action); outline-offset: 2px; }

.zr-haus-chip.is-start {
  grid-column: 1 / -1;
  background: var(--zr2-action);
  border-color: var(--zr2-action);
  color: var(--zr2-action-ink);
  font-weight: 780;
}

/* --- Finanzhaus im Kopfbereich ---------------------------------------- */
.zr-haus-buehne {
  position: relative;
  aspect-ratio: 1600 / 820;
  margin: var(--zr2-space-4) 0 0;
  border-radius: var(--zr2-radius-card);
  overflow: hidden;
}

/* background-size: 100% 100% ist das Gegenstueck zu preserveAspectRatio="none"
   in der Trefferebene. Mit cover verrutschen Bild und Flaechen gegeneinander. */
.zr-haus-foto {
  position: absolute;
  inset: 0;
  background-image: url("visual/zr-bahnstadt-dunkel-1600.webp");
  background-image: image-set(
    url("visual/zr-bahnstadt-dunkel-1600.avif") type("image/avif"),
    url("visual/zr-bahnstadt-dunkel-1600.webp") type("image/webp")
  );
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

html[data-zr-theme="light"] .zr-haus-foto {
  background-image: url("visual/zr-bahnstadt-hell-1600.webp");
  background-image: image-set(
    url("visual/zr-bahnstadt-hell-1600.avif") type("image/avif"),
    url("visual/zr-bahnstadt-hell-1600.webp") type("image/webp")
  );
}

/* LCP-Befund 29.08.2026: das mobile LCP ist der Hero-Text; das 1600er-
   Preload nahm ihm auf gedrosselten Verbindungen die Bandbreite.
   Bis 700px reicht die halbierte Fassung (Ambient-Motiv hinter der
   Chip-Leiste; bewusster Schaerfe-Kompromiss bei hohem DPR). Die
   Media-Bedingung muss wortgleich zur Preload-Entscheidung im
   Theme-Skript bleiben, sonst laedt der Browser beide Fassungen. */
@media (max-width: 700px) {
  .zr-haus-foto {
    background-image: url("visual/zr-bahnstadt-dunkel-800.webp");
    background-image: image-set(
      url("visual/zr-bahnstadt-dunkel-800.avif") type("image/avif"),
      url("visual/zr-bahnstadt-dunkel-800.webp") type("image/webp")
    );
  }

  html[data-zr-theme="light"] .zr-haus-foto {
    background-image: url("visual/zr-bahnstadt-hell-800.webp");
    background-image: image-set(
      url("visual/zr-bahnstadt-hell-800.avif") type("image/avif"),
      url("visual/zr-bahnstadt-hell-800.webp") type("image/webp")
    );
  }
}

.zr-haus-karte {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.zr-haus-flaeche {
  cursor: pointer;
}

/* Die Trefferflaeche bleibt unsichtbar; sichtbar wird nur das Licht.
   pointer-events: fill haelt sie trotz fill-opacity 0 anklickbar. */
.zr-haus-mark {
  fill: var(--zr2-licht);
  fill-opacity: 0;
  pointer-events: fill;
  transition:
    fill-opacity var(--zr2-duration-fast) var(--zr2-ease-standard),
    stroke-opacity var(--zr2-duration-fast) var(--zr2-ease-standard);
}

.zr-haus-schein {
  fill: var(--zr2-licht);
  opacity: 0;
  filter: blur(11px);
  pointer-events: none;
  transition: opacity var(--zr2-duration-state) var(--zr2-ease-standard);
}

.zr-haus-flaeche:hover .zr-haus-schein,
.zr-haus-flaeche:focus-visible .zr-haus-schein {
  opacity: .34;
}

/* Geortete Punkte (Kritik Teil 3): sobald das Haus im Bild ist, leuchten
   die Fenster der Reihe nach kurz auf und bleiben schwach erleuchtet.
   Die Klasse setzt assets/rahmen.js ueber einen IntersectionObserver;
   --zr-ortung ist die Reihenfolge je Flaeche aus dem Markup. */
@keyframes zr2-ortung {
  0% { opacity: .07; }
  40% { opacity: .32; }
  100% { opacity: .07; }
}

.zr-haus-panel.is-geortet .zr-haus-schein {
  opacity: .07;
  animation: zr2-ortung var(--zr2-duration-signature) var(--zr2-ease-standard);
  animation-delay: calc(var(--zr-ortung, 0) * var(--zr2-stagger-step) * 2);
}

/* Zeigerbedienung bekommt nur Licht, Tastaturbedienung zusaetzlich einen
   sichtbaren Rahmen: ohne ihn waere die Fokusposition nicht erkennbar. */
.zr-haus-flaeche:focus {
  outline: none;
}

.zr-haus-flaeche:focus-visible .zr-haus-mark {
  fill-opacity: .07;
  stroke: var(--zr2-action);
  stroke-width: 3;
}

/* Der Kontur-Hinterdruck haelt die Beschriftung ueber jedem Bildbereich
   lesbar; ohne ihn misst das helle Thema nur 4,20 zu 1. */
.zr-haus-label {
  fill: var(--zr2-haus-label-ink);
  font-family: var(--zr2-font-body);
  font-size: var(--zr2-type-heading);
  font-weight: 750;
  paint-order: stroke;
  stroke: var(--zr2-haus-halo);
  stroke-width: 7;
  stroke-linejoin: round;
  pointer-events: none;
}

html[data-zr-theme="light"] .zr-haus-label {
  fill: var(--zr2-haus-label-ink);
  stroke: var(--zr2-haus-halo);
}

/* Kennzahlen (Kritik Teil 3): grosse Ziffern als Gestaltungselement,
   Ziffern tabellarisch in der Datenschrift, Einheit und Erklaerung in der
   Textschrift. */
.zr-kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zr2-space-4);
  list-style: none;
  margin: var(--zr2-space-7) 0 var(--zr2-space-8);
  padding: 0;
}

.zr-kennzahl {
  display: grid;
  gap: var(--zr2-space-2);
  padding: var(--zr2-space-5) var(--zr2-space-6);
  border: 1px solid var(--zr2-line-solid);
  border-radius: var(--zr2-radius-card);
  background: var(--zr2-surface);
}

.zr-kennzahl-wert {
  display: flex;
  align-items: baseline;
  gap: var(--zr2-space-2);
  color: var(--zr2-ink);
  line-height: 1;
}

.zr-zahl {
  font-family: var(--zr2-font-data);
  font-variant-numeric: tabular-nums;
}

.zr-kennzahl-wert .zr-zahl {
  font-size: var(--zr2-type-display-zahl);
  font-weight: 500;
  letter-spacing: -.02em;
}

.zr-kennzahl-einheit {
  font-size: var(--zr2-type-lead);
  color: var(--zr2-body);
}

.zr-kennzahl-text {
  font-size: var(--zr2-type-small);
  line-height: 1.5;
  color: var(--zr2-muted);
}

.zr-kennzahl-text a {
  color: var(--zr2-trust);
  font-weight: 600;
}

#anders {
  background: linear-gradient(180deg, transparent, var(--zr2-surface-tint)) !important;
}

.zr-intro-head {
  max-width: none;
  margin-bottom: var(--zr2-space-7);
}

.zr-section-eyebrow {
  color: var(--zr2-trust);
}

.zr-intro-head h2 {
  max-width: none;
  margin: var(--zr2-space-2) 0 var(--zr2-space-4);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-display-section);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.06;
  text-wrap: balance;
}

.zr-intro-head > p:last-child {
  max-width: none;
  margin: 0;
  color: var(--zr2-body);
  font-size: var(--zr2-type-body);
  line-height: 1.65;
}

.zr-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--zr2-line-solid);
  border-bottom: 1px solid var(--zr2-line-solid);
  margin-bottom: var(--zr2-space-7);
}

.zr-process-step {
  min-width: 0;
  padding: var(--zr2-space-6) var(--zr2-space-5) var(--zr2-space-6) 0;
}

.zr-process-step + .zr-process-step {
  border-left: 1px solid var(--zr2-line-solid);
  padding-left: var(--zr2-space-5);
}

.zr-process-step span {
  display: block;
  margin-bottom: var(--zr2-space-6);
  color: var(--zr2-trust);
  font-family: var(--zr2-font-data);
  font-size: var(--zr2-type-label);
  font-weight: 750;
  letter-spacing: .12em;
}

.zr-process-step strong {
  display: block;
  margin-bottom: var(--zr2-space-2);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-title);
  font-weight: 400;
}

.zr-process-step p {
  margin: 0;
  color: var(--zr2-muted);
  font-size: var(--zr2-type-caption);
  line-height: 1.5;
}

.zr-card-icon {
  margin: 0 0 var(--zr2-space-4);
  pointer-events: none;
}

.zr-founder-intro {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--zr2-line-solid);
  background:
    radial-gradient(circle at 14% 42%, var(--zr2-trust-tint), transparent 31rem),
    var(--zr2-surface-sunken);
}

.zr-founder-intro > .zr2-container {
  padding: clamp(var(--zr2-space-7), 4vw, var(--zr2-space-8)) var(--zr2-space-6);
}

.zr-founder-strip {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: clamp(var(--zr2-space-7), 5vw, var(--zr2-space-9));
  align-items: center;
  border: 1px solid var(--zr2-line-strong);
  border-radius: var(--zr2-radius-product);
  padding: clamp(var(--zr2-space-4), 2.6vw, var(--zr2-space-7));
  background: linear-gradient(135deg, var(--zr2-surface-tint), var(--zr2-surface-tint));
}

.zr-founder-visual {
  position: relative;
  margin: 0;
  min-width: 0;
}

.zr-founder-picture {
  display: block;
}

.zr-founder-strip .zr-founder-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  min-height: 0;
  border: 1px solid var(--zr2-trust-tint-strong);
  border-radius: var(--zr2-radius-card);
  object-fit: cover;
  object-position: center 14%;
  box-shadow: 0 6px 18px var(--zr2-shadow-color);
}

.zr-founder-visual figcaption {
  margin-top: var(--zr2-space-2);
  color: var(--zr2-muted);
  font-family: var(--zr2-font-body);
  font-size: var(--zr2-type-label);
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.4;
  text-align: center;
}

.zr-founder-copy {
  min-width: 0;
  max-width: 650px;
}

.zr-founder-copy h2 {
  margin: 0 0 var(--zr2-space-3);
  color: var(--zr2-ink);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-display-section);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.06;
}

.zr-founder-strip a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--zr2-trust);
  font-size: var(--zr2-type-small);
  font-weight: 760;
  line-height: 1.35;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: normal;
}

.zr-founder-strip a:hover,
.zr-founder-strip a:focus-visible {
  color: var(--zr2-trust-hover);
}

.zr-section-pad {
  max-width: var(--zr2-content) !important;
}

.zr2-container {
  width: min(100%, var(--zr2-content));
  margin: 0 auto;
  padding: clamp(var(--zr2-space-9), 8vw, var(--zr2-space-12)) var(--zr2-space-6);
}

.zr-result-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zr2-space-4);
}

.zr-final-cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--zr2-line-strong);
  background:
    radial-gradient(circle at 80% 25%, var(--zr2-glow), transparent 25rem),
    var(--zr2-haus-panel);
  text-align: center;
}

.zr-final-cta .zr2-container {
  max-width: 860px;
}

.zr-final-cta h2 {
  margin: var(--zr2-space-3) auto;
  color: var(--zr2-haus-ink);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-display-section);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.06;
}

.zr-final-cta p:not(.zr-section-eyebrow) {
  max-width: 56ch;
  margin: 0 auto var(--zr2-space-7);
  color: var(--zr2-haus-body);
  line-height: 1.65;
}

.zr-result-dashboard {
  display: grid;
  gap: var(--zr2-space-4);
}

.zr-result-product-title {
  display: inline-flex;
  align-items: center;
  gap: var(--zr2-space-2);
  width: fit-content;
  margin: 0 0 var(--zr2-space-2);
  color: var(--zr2-ink);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-title);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.zr-result-product-title::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--zr2-radius-pill);
  background: var(--zr2-action);
  box-shadow: 0 0 0 5px var(--zr2-glow);
}

.zr-dashboard-group,
.zr-results-more {
  border: 1px solid var(--zr2-line-solid);
  border-radius: var(--zr2-radius-card);
  background: var(--zr2-surface-inset);
  padding: var(--zr2-space-5);
}

.zr-dashboard-group.is-now {
  border-color: var(--zr2-line-strong);
  background: linear-gradient(145deg, var(--zr2-action-tint), var(--zr2-surface-inset));
}

.zr-dashboard-kicker {
  margin: 0 0 var(--zr2-space-2) !important;
  color: var(--zr2-trust) !important;
  font-family: var(--zr2-font-body);
  font-size: var(--zr2-type-label) !important;
  font-weight: 750;
  letter-spacing: .01em;
}

.zr-dashboard-group > h4 {
  margin: 0 0 var(--zr2-space-1);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-lead);
  font-weight: 400;
}

.zr-dashboard-group > p:not(.zr-dashboard-kicker),
.zr-results-more > p {
  margin: 0 0 var(--zr2-space-4);
  color: var(--zr2-muted);
  font-size: var(--zr2-type-caption);
  line-height: 1.55;
}

.zr-dashboard-group .zr-fullcheck-results {
  margin-top: var(--zr2-space-4);
}

.zr-dashboard-group .zr-fullcheck-result > span {
  color: var(--zr2-faint);
  font-family: var(--zr2-font-data);
}

.zr-dashboard-group .zr-fullcheck-result p {
  margin: 3px 0 0;
  color: var(--zr2-muted);
  font-size: var(--zr2-type-caption);
  line-height: 1.5;
}

.zr-dashboard-group .zr-fullcheck-result a {
  font-size: var(--zr2-type-caption);
  font-weight: 750;
}

.zr-dashboard-empty,
.zr-plan-neutral {
  display: grid;
  gap: var(--zr2-space-1);
  margin-top: var(--zr2-space-4);
  border: 1px solid var(--zr2-line-strong);
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-surface);
  padding: var(--zr2-space-4) var(--zr2-space-4);
}

.zr-dashboard-empty strong,
.zr-plan-neutral strong {
  font-size: var(--zr2-type-small);
}

.zr-dashboard-empty span,
.zr-plan-neutral p {
  margin: 0;
  color: var(--zr2-muted);
  font-size: var(--zr2-type-caption);
  line-height: 1.5;
}

.zr-dashboard-empty.is-unclear {
  border-color: var(--zr2-control-border);
  background: var(--zr2-surface-inset);
}

.zr-dashboard-empty.is-urgent {
  border-color: var(--zr2-critical-line);
  background: var(--zr2-critical-surface);
}

.zr-check-area-card.is-open {
  border-color: var(--zr2-control-border);
  border-style: dashed;
}

.zr-result-choice-grid article {
  border: 1px solid var(--zr2-line-solid);
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-surface);
  padding: var(--zr2-space-4);
}

.zr-result-choice-grid article > span {
  display: block;
  margin-bottom: var(--zr2-space-2);
  color: var(--zr2-trust);
  font-family: var(--zr2-font-body);
  font-size: var(--zr2-type-label);
  font-weight: 750;
  letter-spacing: .01em;
}

.zr-result-choice-grid article > strong {
  display: block;
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-title);
  font-weight: 400;
}

.zr-result-choice-grid article > p {
  margin: var(--zr2-space-2) 0 var(--zr2-space-4);
  color: var(--zr2-muted);
  font-size: var(--zr2-type-caption);
  line-height: 1.5;
}

.zr-result-choice-grid article > a,
.zr-result-choice-grid button,
.zr-csv-import button,
.zr-csv-file {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-action);
  color: var(--zr2-action-ink);
  padding: var(--zr2-space-2) var(--zr2-space-4);
  font: inherit;
  font-size: var(--zr2-type-caption);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.zr-result-choice-grid article > div,
.zr-csv-actions,
.zr-csv-confirm {
  display: flex;
  gap: var(--zr2-space-2);
  flex-wrap: wrap;
}

.zr-result-choice-grid .is-secondary,
.zr-csv-import .is-secondary {
  border: 1px solid var(--zr2-control-border);
  background: transparent;
  color: var(--zr2-ink);
}

.zr-clear-area-list {
  display: flex;
  gap: var(--zr2-space-2);
  flex-wrap: wrap;
}

.zr-clear-area-list > span {
  display: grid;
  gap: 2px;
  border: 1px solid var(--zr2-line-solid);
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-surface);
  padding: var(--zr2-space-2) var(--zr2-space-3);
}

.zr-clear-area-list strong {
  font-size: var(--zr2-type-caption);
}

.zr-clear-area-list small {
  color: var(--zr2-muted);
  font-size: var(--zr2-type-label);
}

.zr-results-more summary,
.zr-csv-unknown summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--zr2-ink);
  font-weight: 800;
  cursor: pointer;
}

.zr-check-feedback {
  margin: calc(-1 * var(--zr2-space-2)) 0 var(--zr2-space-4);
  color: var(--zr2-trust);
  font-size: var(--zr2-type-label);
  font-weight: 700;
}

/*
 * Four-question orientation marker. It signals progress without presenting
 * the partial answers as a result or success state.
 */
.zr-quick-milestone {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--zr2-space-4);
  border: 1px solid var(--zr2-action-tint-strong);
  border-radius: var(--zr2-radius-card);
  padding: clamp(var(--zr2-space-5), 4vw, var(--zr2-space-7));
  background:
    radial-gradient(circle at 100% 0, var(--zr2-glow), transparent 16rem),
    linear-gradient(145deg, var(--zr2-surface), var(--zr2-surface));
  color: var(--zr2-ink);
}

.zr-quick-milestone::before {
  content: "";
  width: 64px;
  height: 2px;
  border-radius: var(--zr2-radius-pill);
  background: var(--zr2-action);
}

.zr-quick-milestone h3,
.zr-quick-milestone h4 {
  max-width: 28ch;
  margin: 0;
  color: var(--zr2-ink);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-display-section);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.12;
  text-wrap: balance;
}

.zr-quick-milestone p {
  max-width: 60ch;
  margin: 0;
  color: var(--zr2-body);
  line-height: 1.6;
}

.zr-quick-milestone .zr-dashboard-kicker {
  color: var(--zr2-action) !important;
}

.zr-quick-milestone-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--zr2-space-2);
  width: fit-content;
  color: var(--zr2-action);
  font-family: var(--zr2-font-body);
  font-size: var(--zr2-type-label);
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.4;
}

.zr-quick-milestone-meta > span {
  border: 1px solid var(--zr2-action-tint-strong);
  border-radius: var(--zr2-radius-pill);
  padding: var(--zr2-space-2) var(--zr2-space-2);
  background: var(--zr2-action-tint);
}

.zr-quick-milestone small {
  color: var(--zr2-muted);
  font-size: var(--zr2-type-label);
  line-height: 1.5;
}

.zr-quick-milestone .zr-primary-button,
.zr-quick-milestone > button {
  width: fit-content;
  min-height: 52px;
  justify-self: start;
  border: 0;
  border-radius: var(--zr2-radius-control);
  padding: var(--zr2-space-3) var(--zr2-space-5);
  background: var(--zr2-action);
  box-shadow: var(--zr2-shadow-action);
  color: var(--zr2-action-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform var(--zr2-duration-fast) var(--zr2-ease-standard),
    box-shadow var(--zr2-duration-fast) var(--zr2-ease-standard),
    background var(--zr2-duration-fast) var(--zr2-ease-standard);
}

.zr-quick-milestone .zr-primary-button:hover,
.zr-quick-milestone > button:hover {
  background: var(--zr2-action-hover);
  box-shadow: var(--zr2-shadow-action-hover);
  transform: translateY(-1px);
}

.zr-quick-milestone .zr-primary-button:focus-visible,
.zr-quick-milestone > button:focus-visible {
  outline: 3px solid var(--zr2-ink);
  outline-offset: 3px;
}

.zr-quick-milestone .zr-primary-button:active,
.zr-quick-milestone > button:active {
  transform: translateY(0);
}

.zr-csv-import {
  margin: 0 0 var(--zr2-space-4);
  border: 1px solid var(--zr2-line-strong);
  border-radius: var(--zr2-radius-card);
  background: var(--zr2-surface);
  padding: clamp(var(--zr2-space-4), 3vw, var(--zr2-space-6));
}

.zr-csv-import-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--zr2-space-6);
}

.zr-csv-import-head h3 {
  margin: 0 0 var(--zr2-space-2);
  font-family: var(--zr2-font-display-serif);
  font-size: var(--zr2-type-lead);
  font-weight: 400;
}

.zr-csv-import-head > div > p:last-child {
  max-width: 65ch;
  margin: 0;
  color: var(--zr2-muted);
  font-size: var(--zr2-type-caption);
  line-height: 1.55;
}

.zr-csv-import-head > button {
  flex: 0 0 auto;
}

.zr-csv-panel {
  margin-top: var(--zr2-space-5);
  border-top: 1px solid var(--zr2-line-solid);
  padding-top: var(--zr2-space-5);
}

.zr-csv-file {
  position: relative;
  overflow: hidden;
}

.zr-csv-file:focus-within {
  outline: 3px solid var(--zr2-ink);
  outline-offset: 3px;
}

.zr-csv-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.zr-csv-status,
.zr-csv-error {
  margin: var(--zr2-space-4) 0 0;
  border-radius: var(--zr2-radius-control);
  padding: var(--zr2-space-3) var(--zr2-space-3);
  font-size: var(--zr2-type-caption);
  line-height: 1.5;
}

.zr-csv-status {
  background: var(--zr2-surface-ghost);
  color: var(--zr2-body);
}

.zr-csv-error {
  border: 1px solid var(--zr2-critical-line);
  background: var(--zr2-critical-surface);
  color: var(--zr2-body);
}

.zr-csv-groups {
  display: grid;
  gap: var(--zr2-space-2);
  margin-top: var(--zr2-space-3);
}

.zr-csv-groups article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--zr2-space-1) var(--zr2-space-4);
  border: 1px solid var(--zr2-line-solid);
  border-radius: var(--zr2-radius-control);
  padding: var(--zr2-space-3) var(--zr2-space-4);
}

.zr-csv-groups article > div {
  display: grid;
  gap: 2px;
}

.zr-csv-groups span,
.zr-csv-groups p,
.zr-csv-groups small {
  color: var(--zr2-muted);
  font-size: var(--zr2-type-label);
}

.zr-csv-groups p {
  grid-column: 1 / -1;
  margin: 0;
}

.zr-csv-groups small {
  grid-column: 1 / -1;
}

.zr-csv-unknown {
  margin-top: var(--zr2-space-2);
}

.zr-csv-unknown ul {
  display: grid;
  gap: var(--zr2-space-1);
  margin: 0 0 var(--zr2-space-3);
  padding: 0;
  list-style: none;
}

.zr-csv-unknown li {
  display: flex;
  justify-content: space-between;
  gap: var(--zr2-space-3);
  color: var(--zr2-muted);
  font-size: var(--zr2-type-label);
}

.zr-cost-editor,
.zr-tool,
.zr-contact-form {
  box-shadow: none !important;
}

/*
 * Quiet Financial Intelligence motion grammar.
 * Every hook is visible by default. JavaScript opts in only after mount, and
 * every automatic sequence has a finite end state.
 */
.zr-motion-item {
  opacity: 1;
  transform: none;
  clip-path: none;
  will-change: auto;
}

html.zr-motion-ready .zr-motion-item {
  opacity: 0;
  transform: translateY(var(--zr2-distance-reveal));
  clip-path: none;
  will-change: opacity, transform;
  transition:
    opacity var(--zr2-duration-reveal) var(--zr2-ease-reveal),
    transform var(--zr2-duration-reveal) var(--zr2-ease-reveal);
}

html.zr-motion-ready .zr-motion-item.is-visible {
  opacity: 1;
  transform: none;
  clip-path: none;
  will-change: auto;
}

@keyframes zr2-signal-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes zr2-founder-uncover {
  from { clip-path: inset(0 100% 0 0 round 18px); }
  to { clip-path: inset(0 0 0 0 round 18px); }
}

@keyframes zr2-path-draw-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes zr2-path-draw-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes zr2-path-draw-grid {
  from { clip-path: inset(0 100% 100% 0); opacity: 0; }
  to { clip-path: inset(0); opacity: 1; }
}

@keyframes zr2-roadmap-signal {
  0% { top: 38px; opacity: 0; }
  12% { opacity: 1; }
  88%, 100% { top: calc(100% - 48px); opacity: 1; }
}

@keyframes zr2-final-signal {
  from { transform: translateX(-135%) skewX(-18deg); opacity: 0; }
  18% { opacity: .45; }
  to { transform: translateX(235%) skewX(-18deg); opacity: 0; }
}

html.zr-motion-ready .zr-hero-copy.is-visible > .zr-hero-eyebrow,
html.zr-motion-ready .zr-hero-copy.is-visible > h1,
html.zr-motion-ready .zr-hero-copy.is-visible > .zr-hero-lead,
html.zr-motion-ready .zr-hero-copy.is-visible > .zr-hero-actions,
html.zr-motion-ready .zr-hero-copy.is-visible > .zr-trust-line {
  animation: zr2-signal-enter var(--zr2-duration-reveal) var(--zr2-ease-reveal) both;
}

html.zr-motion-ready .zr-hero-copy.is-visible > h1 { animation-delay: 90ms; }
html.zr-motion-ready .zr-hero-copy.is-visible > .zr-hero-lead { animation-delay: 180ms; }
html.zr-motion-ready .zr-hero-copy.is-visible > .zr-trust-line { animation-delay: 270ms; }
html.zr-motion-ready .zr-hero-copy.is-visible > .zr-hero-actions { animation-delay: 360ms; }

html.zr-motion-ready .zr-founder-strip.is-visible .zr-founder-picture {
  animation: zr2-founder-uncover var(--zr2-duration-reveal) var(--zr2-ease-reveal) both;
}

html.zr-motion-ready .zr-founder-strip.is-visible .zr-founder-copy > * {
  animation: zr2-signal-enter var(--zr2-duration-reveal) var(--zr2-ease-reveal) both;
}

html.zr-motion-ready .zr-founder-strip.is-visible .zr-founder-copy > :nth-child(1) { animation-delay: 80ms; }
html.zr-motion-ready .zr-founder-strip.is-visible .zr-founder-copy > :nth-child(2) { animation-delay: 135ms; }
html.zr-motion-ready .zr-founder-strip.is-visible .zr-founder-copy > :nth-child(3) { animation-delay: 190ms; }
html.zr-motion-ready .zr-founder-strip.is-visible .zr-founder-copy > :nth-child(4) { animation-delay: 245ms; }

.zr-process-grid {
  position: relative;
}
/* Hero: Portraet und die drei Zusagen neben dem Knopf (Umbau 06.09.2026).
   Vorher standen sie im Gruenderblock, zwei Bildschirme unter dem Knopf. */
/* Sichtpruefung von Roman am 06.09.2026: kein Portraet im Hero, er stellt
   sich im Gruenderblock vor. Die Zusagen stehen allein. */
.zr-hero-vertrauen {
  display: grid;
  gap: var(--zr2-space-4);
  align-items: start;
  margin-top: var(--zr2-space-6);
  padding-top: var(--zr2-space-4);
  border-top: 1px solid var(--zr2-line);
}

.zr-hero-zusagen {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--zr2-space-2);
  font-size: var(--zr2-type-small);
  line-height: 1.5;
  color: var(--zr2-body);
}

.zr-hero-zusagen a {
  display: inline;
  min-height: 0;
  padding-block: var(--zr2-space-1);
  color: var(--zr2-trust);
}

/* Moment: drei Karten mit Bereich, Frist und Weg in den Check. Die
   Paragrafen stehen wortgleich auf /methodik#kuendigungsfenster. */
.zr-moment-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zr2-space-3);
  margin-top: var(--zr2-space-6);
}

.zr-moment-karte {
  display: grid;
  gap: var(--zr2-space-2);
  padding: var(--zr2-space-4) var(--zr2-space-4);
  border: 1px solid var(--zr2-line);
  border-radius: var(--zr2-radius-card);
  background: var(--zr2-surface);
  color: var(--zr2-ink);
  text-decoration: none;
  transition: background var(--zr2-duration-fast) var(--zr2-ease-standard), border-color var(--zr2-duration-fast) var(--zr2-ease-standard);
}

.zr-moment-karte:hover {
  background: var(--zr2-surface-raised);
  border-color: var(--zr2-line-strong);
}

.zr-moment-karte:focus-visible {
  outline: 2px solid var(--zr2-action);
  outline-offset: 2px;
}

.zr-moment-karte strong {
  font-family: var(--zr2-font-display-serif);
  font-weight: 400;
  font-size: var(--zr2-type-title);
}

.zr-moment-frist {
  font-size: var(--zr2-type-small);
  line-height: 1.5;
  color: var(--zr2-body);
}

.zr-moment-weiter {
  font-size: var(--zr2-type-small);
  font-weight: 700;
  color: var(--zr2-trust);
}

.zr-anders-weiter {
  margin: 0;
}

.zr-process-grid::after {
  content: "";
  position: absolute;
  z-index: var(--zr2-z-control);
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--zr2-action), var(--zr2-trust), transparent 92%);
  box-shadow: 0 0 18px var(--zr2-glow);
  transform: none;
  transform-origin: left center;
  pointer-events: none;
}

html.zr-motion-ready .zr-process-grid.is-visible::after {
  animation: zr2-path-draw-x var(--zr2-duration-reveal) var(--zr2-ease-orbit) both;
}

html.zr-motion-ready .zr-process-grid.is-visible .zr-process-step {
  animation: zr2-signal-enter var(--zr2-duration-reveal) var(--zr2-ease-reveal) both;
}

html.zr-motion-ready .zr-process-grid.is-visible .zr-process-step:nth-child(2) { animation-delay: 90ms; }
html.zr-motion-ready .zr-process-grid.is-visible .zr-process-step:nth-child(3) { animation-delay: 180ms; }
html.zr-motion-ready .zr-process-grid.is-visible .zr-process-step:nth-child(4) { animation-delay: 270ms; }

.zr-cost-fill {
  transition-duration: var(--zr2-duration-state) !important;
  transition-timing-function: var(--zr2-ease-standard) !important;
}

.zr-fullcheck-option {
  transition:
    transform var(--zr2-duration-micro) var(--zr2-ease-standard),
    border-color var(--zr2-duration-micro) var(--zr2-ease-standard),
    background var(--zr2-duration-micro) var(--zr2-ease-standard),
    color var(--zr2-duration-micro) var(--zr2-ease-standard) !important;
}

.zr-fullcheck-option:active {
  transform: translateY(1px) scale(.995);
}

html.zr-motion-ready .zr-quick-milestone.is-visible > * {
  animation: zr2-signal-enter var(--zr2-duration-reveal) var(--zr2-ease-reveal) both;
}

html.zr-motion-ready .zr-quick-milestone.is-visible > :nth-child(2) { animation-delay: 55ms; }
html.zr-motion-ready .zr-quick-milestone.is-visible > :nth-child(3) { animation-delay: 110ms; }
html.zr-motion-ready .zr-quick-milestone.is-visible > :nth-child(4) { animation-delay: 165ms; }
html.zr-motion-ready .zr-quick-milestone.is-visible > :nth-child(5) { animation-delay: 220ms; }
html.zr-motion-ready .zr-quick-milestone.is-visible > :nth-child(6) { animation-delay: 275ms; }
html.zr-motion-ready .zr-quick-milestone.is-visible > :nth-child(7) { animation-delay: 330ms; }

html.zr-motion-ready .zr-result-dashboard .zr-dashboard-group,
html.zr-motion-ready .zr-fullcheck-results /* Ein Schritt statt elf (Nutzertests 07.09.2026): der erste Schritt traegt
   Anleitung und Knopf, die uebrigen liegen zugeklappt darunter. */
.zr-schritt-eins {
  display: grid;
  gap: var(--zr2-space-3);
  padding: var(--zr2-space-5);
  border: 1px solid var(--zr2-line-bold);
  border-left: 3px solid var(--zr2-action);
  border-radius: var(--zr2-radius-lg);
  background: var(--zr2-surface);
}

.zr-schritt-eins-kicker {
  margin: 0;
  font-size: var(--zr2-type-caption);
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--zr2-trust);
}

.zr-schritt-eins-titel {
  display: block;
  font-family: var(--zr2-font-display-serif);
  font-weight: 400;
  font-size: var(--zr2-type-heading);
  line-height: 1.15;
}

.zr-schritt-eins-grund {
  margin: 0;
  font-size: var(--zr2-type-body);
  line-height: 1.6;
  color: var(--zr2-muted);
}

.zr-schritt-eins-anleitung {
  display: grid;
  gap: var(--zr2-space-1);
  margin: 0;
  padding: var(--zr2-space-4);
  border-radius: var(--zr2-radius-md);
  background: var(--zr2-surface-quiet);
  font-size: var(--zr2-type-small);
  line-height: 1.55;
}

.zr-schritt-eins-anleitung dt {
  font-weight: 650;
  color: var(--zr2-trust);
}

.zr-schritt-eins-anleitung dd {
  margin: 0 0 var(--zr2-space-2);
  color: var(--zr2-muted);
}

.zr-schritt-eins-anleitung dd:last-child {
  margin-bottom: 0;
}

.zr-schritt-eins-knopf {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--zr2-space-2);
  min-height: 44px;
  padding: 0 var(--zr2-space-5);
  border-radius: var(--zr2-radius-pill);
  background: var(--zr2-action);
  color: var(--zr2-action-ink);
  font-weight: 650;
  text-decoration: none;
}

.zr-schritt-eins-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zr2-space-3);
}

.zr-schritt-eins-fertig {
  min-height: 44px;
  padding: 0 var(--zr2-space-4);
  border: 1px solid var(--zr2-line-bold);
  border-radius: var(--zr2-radius-pill);
  background: transparent;
  color: var(--zr2-trust);
  font-family: inherit;
  font-size: var(--zr2-type-small);
  font-weight: 600;
  cursor: pointer;
}

.zr-schritt-eins-werkzeug {
  margin: 0;
  font-size: var(--zr2-type-small);
  color: var(--zr2-muted);
}

.zr-schritt-eins-werkzeug a {
  color: var(--zr2-trust);
  font-weight: 600;
}

.zr-empfehlung-hinweis {
  margin: 0;
  padding: var(--zr2-space-3) var(--zr2-space-4);
  border-radius: var(--zr2-radius-md);
  background: var(--zr2-surface-quiet);
  font-size: var(--zr2-type-small);
  line-height: 1.6;
  color: var(--zr2-body);
}

.zr-empfehlung-zurueck,
.zr-schritt-vorziehen {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--zr2-trust);
  text-decoration: underline;
  cursor: pointer;
}

.zr-schritt-vorziehen {
  font-size: var(--zr2-type-small);
  margin-top: var(--zr2-space-1);
  min-height: 44px;
}

.zr-beispiel-hinweis {
  margin: 0 0 var(--zr2-space-4);
  padding: var(--zr2-space-3) var(--zr2-space-4);
  border-left: 3px solid var(--zr2-trust);
  border-radius: 0 var(--zr2-radius-md) var(--zr2-radius-md) 0;
  background: var(--zr2-surface-quiet);
  font-size: var(--zr2-type-small);
  line-height: 1.6;
  color: var(--zr2-body);
}

.zr-schritt-fertig {
  display: grid;
  gap: var(--zr2-space-2);
  padding: var(--zr2-space-5);
  border: 1px solid var(--zr2-line-bold);
  border-left: 3px solid var(--zr2-trust);
  border-radius: var(--zr2-radius-lg);
  background: var(--zr2-surface-quiet);
}

.zr-schritt-fertig strong {
  font-family: var(--zr2-font-display-serif);
  font-weight: 400;
  font-size: var(--zr2-type-lead);
}

.zr-schritt-fertig p {
  margin: 0;
  font-size: var(--zr2-type-small);
  line-height: 1.6;
  color: var(--zr2-muted);
}

.zr-schritt-erledigt-zaehler {
  margin: var(--zr2-space-3) 0 0;
  font-size: var(--zr2-type-small);
  color: var(--zr2-muted);
}

.zr-weitere-schritte {
  margin-top: var(--zr2-space-4);
}

.zr-weitere-schritte > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: var(--zr2-type-small);
  font-weight: 600;
  color: var(--zr2-trust);
}

.zr-weitere-schritte[open] > summary {
  margin-bottom: var(--zr2-space-3);
}

.zr-fullcheck-result {
  animation: zr2-signal-enter var(--zr2-duration-reveal) var(--zr2-ease-reveal) both;
}

html.zr-motion-ready .zr-fullcheck-results .zr-fullcheck-result:nth-child(2) { animation-delay: 55ms; }
html.zr-motion-ready .zr-fullcheck-results .zr-fullcheck-result:nth-child(3) { animation-delay: 110ms; }
html.zr-motion-ready .zr-fullcheck-results .zr-fullcheck-result:nth-child(4) { animation-delay: 165ms; }

.zr-faq-list {
  display: grid;
  gap: var(--zr2-space-2);
}

.zr-faq-item {
  overflow: hidden;
  border: 1px solid var(--zr2-line-solid);
  border-radius: var(--zr2-radius-control);
  background: var(--zr2-surface);
}

.zr-faq-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  justify-content: space-between;
  gap: var(--zr2-space-4);
  align-items: baseline;
  border: 0;
  padding: var(--zr2-space-4) var(--zr2-space-4);
  background: none;
  color: var(--zr2-ink);
  font: inherit;
  font-size: var(--zr2-type-body);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.zr-faq-trigger:hover {
  color: var(--zr2-trust);
}

.zr-faq-trigger:focus-visible {
  outline: 2px solid var(--zr2-trust);
  outline-offset: -3px;
}

.zr-faq-sign {
  color: var(--zr2-faint);
  font-family: var(--zr2-font-data);
  transform: rotate(0);
  transition: transform var(--zr2-duration-state) var(--zr2-ease-standard);
}

.zr-faq-trigger[aria-expanded="true"] .zr-faq-sign {
  transform: rotate(45deg);
}

.zr-faq-answer {
  display: grid;
  grid-template-rows: 1fr;
}

/* Review-Befund 28.08.2026: die Antworten standen statisch offen (Default
   1fr), trugen aber aria-hidden=true - beim spaeten Mount kollabierte das
   FAQ unter dem Leser. Zu ist der ehrliche Anfangszustand, und auch ohne
   zr-motion-ready (reduzierte Bewegung) stimmt der Zustand jetzt. */
.zr-faq-answer[aria-hidden="true"] {
  grid-template-rows: 0fr;
}

html.zr-motion-ready .zr-faq-answer {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--zr2-duration-state) var(--zr2-ease-standard);
}

html.zr-motion-ready .zr-faq-answer.is-open {
  grid-template-rows: 1fr;
}

.zr-faq-answer > div {
  min-height: 0;
  overflow: hidden;
}

.zr-faq-answer p {
  margin: 0;
  padding: 0 var(--zr2-space-4) var(--zr2-space-4);
  color: var(--zr2-body);
  font-size: var(--zr2-type-small);
  line-height: 1.65;
}

.zr-final-cta::after {
  content: "";
  position: absolute;
  z-index: var(--zr2-z-base);
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 22%;
  background: linear-gradient(90deg, transparent, var(--zr2-glow), transparent);
  opacity: 0;
  pointer-events: none;
}

.zr-final-cta > .zr2-container {
  position: relative;
  z-index: var(--zr2-z-content);
}

html.zr-motion-ready .zr-final-cta.is-visible::after {
  animation: zr2-final-signal var(--zr2-duration-signature) var(--zr2-ease-orbit) both;
}

/*
 * Progressive reveal: content is in its final state unless JavaScript first
 * opts the document into `zr-reveal-ready`, preventing hidden no-JS content.
 */
.zr-reveal {
  opacity: 1;
  transform: none;
}

html.zr-reveal-ready .zr-reveal,
html[data-zr-reveal-ready="true"] .zr-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--zr2-duration-reveal) var(--zr2-ease-reveal),
    transform var(--zr2-duration-reveal) var(--zr2-ease-reveal);
  will-change: opacity, transform;
}

html.zr-reveal-ready .zr-reveal.is-visible,
html[data-zr-reveal-ready="true"] .zr-reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (max-width: 900px) {
  .zr-hero-umbruch {
    display: none;
  }
  .zr-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kopf"
      "copy"
      "haus";
  }

  /* Messwert 390px: 7px-Beschriftung, Tippziele unter 24px. Das Haus wird
     reines Bild, die Chip-Leiste uebernimmt. */
  .zr-haus-karte { pointer-events: none; }

  .zr-haus-label { display: none; }

  .zr-haus-chips { display: grid; }

  .zr-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: var(--zr2-space-8);
    padding-top: var(--zr2-space-8);
  }

  .zr-hero-copy {
    max-width: 680px;
  }

  .zr-hero h1 {
    max-width: 12ch;
  }

  .zr-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zr-process-step:nth-child(3) {
    border-left: 0;
  }

  .zr-process-step:nth-child(n+3) {
    border-top: 1px solid var(--zr2-line-solid);
  }

  .zr-process-grid::after {
    top: -1px;
    left: 0;
    width: 100%;
    height: 100%;
    background:
      linear-gradient(90deg, var(--zr2-action), var(--zr2-trust)) top / 100% 2px no-repeat,
      linear-gradient(var(--zr2-trust), var(--zr2-trust-tint-strong)) right top / 2px 50% no-repeat,
      linear-gradient(270deg, var(--zr2-trust-tint), var(--zr2-trust)) right 50% / 100% 2px no-repeat;
    transform: none;
    transform-origin: center;
  }

  html.zr-motion-ready .zr-process-grid.is-visible::after {
    animation-name: zr2-path-draw-grid;
  }

}

@media (max-width: 760px) {
  .zr-moment-karten { grid-template-columns: 1fr; }

  .zr-kennzahlen {
    grid-template-columns: 1fr;
    gap: var(--zr2-space-3);
    margin: var(--zr2-space-6) 0 var(--zr2-space-7);
  }
  .zr-quick-next {
    flex-direction: column;
    align-items: stretch;
  }

  .zr-hero {
    padding: var(--zr2-space-8) var(--zr2-space-4) var(--zr2-space-9);
  }

  .zr-hero h1 {
    max-width: 13ch;
    margin: var(--zr2-space-4) 0 var(--zr2-space-4);
    line-height: .96;
  }

  .zr-header-cta {
    min-height: 44px;
  }

  .zr-hero-lead {
    margin-bottom: var(--zr2-space-6);
    font-size: var(--zr2-type-body);
  }

  .zr-hero-actions {
    display: grid;
    align-items: stretch;
    gap: var(--zr2-space-1);
  }

  .zr-primary-button {
    width: 100%;
  }

  .zr-method-link {
    justify-content: center;
  }

  .zr-trust-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--zr2-space-2) var(--zr2-space-4);
  }

  .zr-haus-panel {
    border-radius: var(--zr2-radius-product);
    padding: var(--zr2-space-5);
  }

  .zr-orbit-head h2 {
    font-size: var(--zr2-type-lead);
  }

  .zr-orbit-live {
    font-size: var(--zr2-type-label);
  }

  .zr-process-grid {
    grid-template-columns: 1fr;
  }

  .zr-process-step,
  .zr-process-step + .zr-process-step {
    border-left: 0;
    padding: var(--zr2-space-5) 0 var(--zr2-space-5) var(--zr2-space-4);
  }

  .zr-process-step + .zr-process-step {
    border-top: 1px solid var(--zr2-line-solid);
  }

  .zr-process-grid::after {
    left: -1px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(var(--zr2-action), var(--zr2-trust), transparent 92%);
    transform: none;
    transform-origin: center top;
    clip-path: none;
  }

  html.zr-motion-ready .zr-process-grid.is-visible::after {
    animation-name: zr2-path-draw-y;
  }

  .zr-founder-intro > .zr2-container {
    padding: var(--zr2-space-7) var(--zr2-space-4);
  }

  .zr-founder-strip {
    grid-template-columns: clamp(116px, 32vw, 148px) minmax(0, 1fr);
    gap: var(--zr2-space-4);
    border-radius: var(--zr2-radius-product);
    padding: var(--zr2-space-4);
  }

  .zr-founder-strip .zr-founder-portrait {
    border-radius: var(--zr2-radius-card);
  }

  .zr-founder-visual figcaption {
    margin-top: var(--zr2-space-2);
    font-size: var(--zr2-type-label);
  }

  .zr-founder-copy h2 {
    margin-bottom: var(--zr2-space-2);
    font-size: var(--zr2-type-display-section);
  }

  .zr-founder-strip a {
    font-size: var(--zr2-type-caption);
  }

  .zr2-container {
    padding: var(--zr2-space-9) var(--zr2-space-4);
  }

  .zr-csv-import-head {
    align-items: stretch;
    flex-direction: column;
  }

  .zr-result-choice-grid {
    grid-template-columns: 1fr;
  }

  .zr-result-choice-grid article > div,
  .zr-csv-confirm {
    display: grid;
  }

  .zr-result-choice-grid button,
  .zr-result-choice-grid article > a,
  .zr-csv-confirm button,
  .zr-csv-import-head > button {
    width: 100%;
  }

  .zr-quick-milestone {
    padding: var(--zr2-space-5);
  }

  .zr-quick-milestone .zr-primary-button,
  .zr-quick-milestone > button {
    width: 100%;
    justify-self: stretch;
  }

}

@media (max-width: 480px) {
  .zr-header-top > .zr-brand-lockup .zr-brand-word {
    display: none;
  }

  .zr-founder-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .zr-founder-strip .zr-founder-portrait {
    aspect-ratio: 16 / 10;
    object-position: center 8%;
  }

  .zr-founder-visual figcaption {
    text-align: left;
  }

}

@media (max-width: 390px) {
  .zr-brand-lockup {
    gap: var(--zr2-space-2);
    font-size: var(--zr2-type-title);
  }

  .zr-brand-lockup svg {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .zr-trust-line {
    grid-template-columns: 1fr;
  }

  .zr-haus-panel {
    margin-inline: -2px;
    padding: var(--zr2-space-4);
  }

  .zr-orbit-live {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zr-haus-mark,
  .zr-haus-schein {
    transition: none;
    animation: none;
  }

  html {
    scroll-behavior: auto !important;
  }

  .zr-shell,
  .zr-shell *,
  .zr-shell *::before,
  .zr-shell *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  html.zr-reveal-ready .zr-reveal,
  html[data-zr-reveal-ready="true"] .zr-reveal {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  html.zr-motion-ready .zr-motion-item {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto;
  }

  html.zr-motion-ready .zr-motion-item.is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    will-change: auto;
  }

  .zr-founder-visual,
  .zr-hero-copy > *,
  .zr-process-step,
  .zr-process-grid::after,
  .zr-final-cta::after {
    animation: none !important;
  }

  .zr-process-grid::after {
    transform: none !important;
    clip-path: none !important;
  }
}

@media print {
  body {
    background: var(--zr2-print-paper);
  }
}

.zr-quick-milestone-meta strong {
  font-family: var(--zr2-font-data);
}

/* Inline-Ikonografie: 16 Motive in derselben Monoline wie die Kartenvisuale. */
.zr-icon {
  display: block;
  flex: none;
  width: 48px;
  height: 48px;
  color: inherit;
  opacity: .9;
}

.zr-icon > * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

@media (max-width: 760px) {
  /* Handy: Weissraum abgeben, der nur auf breiten Schirmen traegt. Alle Werte
     auf 375px nachgemessen. Der Text bleibt unangetastet, ebenso die
     Schriftgroessen: index.html fuehrt bei Zeile 646 ein h3 mit 26px inline,
     ein kleineres h2 wuerde die Rangfolge umkehren. */

  /* Der einzige Abschnitt ohne mobile Ueberschreibung: 80px oben und unten
     plus 24px seitlich um einen Block, der hier nur 339px breit ist. */
  .zr-faq-wrap { padding: var(--zr2-space-8) var(--zr2-space-4); }

  /* 15ch kappten die Ueberschrift auf 266px, obwohl der Container 339px bot.
     Auf dem Desktop haelt die Kappe die Zeile kurz, hier erzwingt sie nur
     Umbrueche: gemessen sieben Zeilen fuer einen einzigen Satz. */
  .zr-intro-head h2 { max-width: none; }

  /* 22px Abstand unter einer 10px grossen Ziffer, viermal auf der Seite. */
  .zr-process-step span { margin-bottom: var(--zr2-space-2); }
  .zr-process-grid { margin-bottom: var(--zr2-space-4); }

}

/* ============================================================
   Touch-Ziele auf Mobilgeraeten (04.09.2026)
   Gemessen auf der Startseite bei 390px Breite: sechs Textlinks
   hatten 13 bis 25 Pixel Tipphoehe. Die WCAG-Empfehlung 2.5.8
   nennt 24px als Minimum, Apple und Google nennen 44px. Der
   Block hebt die antippbare Flaeche auf 44px, ohne die Optik zu
   aendern: er zentriert den Text in der groesseren Flaeche und
   gleicht den Zuwachs mit negativem Aussenabstand aus, damit die
   Zeilenabstaende im Text gleich bleiben.
   ============================================================ */
@media (max-width: 760px) {
  main p > a,
  main li > a,
  main div > a:not([class]),
  .zr-orbit-footnote > a,}