/* ══════════════════════════════════════════════
   LexUp Wizard — Crisp White Basis + 10 Varianten
   Flat only: keine Verläufe, kein Glow
   ══════════════════════════════════════════════ */

:root {
  --bg: #eef1f6;
  --ink: #0e1e3a;
  --muted: #5e6776; /* auf dem grauen Seitengrund gemessen: 4,8:1 */
  --accent: #2f6bff;
  --orange: #ff6b2c;

  --card-border: #e6eaf2;
  --ghost: #e6edfb;
  --sky: #eaf1ff;
  --sky-border: #d7e4ff;

  --field-bg: #f4f6fa;
  --field-bg-hover: #edf1f7;
  --field-border: transparent;
  --field-focus-bg: #ffffff;
  --field-focus-border: #2f6bff;
  --field-radius: 14px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Wörter wie „Sachverständigengutachten" sprengen sonst schmale Spalten */
.choice-txt b, .choice-txt em,
.wegpunkt-txt b, .wegpunkt-txt em,
.card-head h2, .card-head p,
.result-facts li, .danach-liste b, .danach-liste em,
.payer b, .verdict-txt b, .verdict-txt span {
  overflow-wrap: break-word;
  hyphens: auto;
}

html, body { height: 100%; }

body {
  font-family: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: #101828;
  -webkit-font-smoothing: antialiased;
}

/* ───────────── Sidebar — Dock mit vertikalen Labels (fix) ───────────── */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 88px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 0;
  z-index: 10;
}

.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e6eaf2;
  border-radius: 24px;
  padding: 12px 10px;
  box-shadow: 0 20px 44px -18px rgba(14, 30, 58, 0.18);
}

.step {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 9px 5px;
  border-radius: 15px;
  transition: background 0.3s var(--ease);
  z-index: 1;
}

.step-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef2fb;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all 0.35s var(--ease);
}

.step-icon svg { width: 17px; height: 17px; }

.step.is-active { background: #eef3ff; }
.step.is-active .step-icon { background: var(--ink); color: #ffffff; }
.step.is-done .step-icon { background: var(--sky); color: var(--accent); }

/* Vertikales Mikro-Label unter jedem Icon */
.step::after {
  content: attr(data-label);
  writing-mode: vertical-rl;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5e6776;
  transition: color 0.3s var(--ease);
}
.step.is-active::after { color: var(--ink); }
.step.is-done::after { color: var(--accent); }

/* Pseudo-Schritt: Fertig (Check am Dock-Ende) */
.step-finish {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid #f0f3f8;
  border-radius: 0 0 15px 15px;
  cursor: default;
}
.step-finish .step-icon { background: #f2f4f8; color: #6b7688; }
.step-finish.is-done { background: transparent; }
.step-finish.is-done .step-icon { background: var(--accent); color: #ffffff; }
.step-finish.is-done::after { color: var(--accent); }

/* ───────────── Content ───────────── */

.page { margin-left: 88px; padding: 92px 56px 90px; max-width: 1268px; }

.page-head { margin-bottom: 56px; }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

.page-head h1 {
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink);
}

.page-head h1 .accent { color: var(--accent); }

.subline { margin-top: 14px; font-size: 16px; color: var(--muted); max-width: 480px; }

/* ───────────── Slider ───────────── */

.slider { overflow: hidden; border-radius: 26px; padding-top: 8px; touch-action: pan-y; }

.slider-track {
  display: flex;
  gap: 26px;
  align-items: stretch;
  transition: transform 0.65s var(--ease);
  will-change: transform;
  cursor: grab;
}

.slider-track.is-dragging { transition: none; cursor: grabbing; }

.slide { flex: 0 0 74%; display: flex; flex-direction: column; gap: 22px; }

/* ───────────── Karte — Folder Tab ───────────── */

.card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 6px 26px 26px 26px;
  margin-top: 30px;
  padding: 52px 56px 44px;
  box-shadow: 0 28px 56px -34px rgba(16, 24, 40, 0.28);
  display: flex;
  flex-direction: column;
  user-select: none;
  overflow: visible;
  transition: transform 0.65s var(--ease), opacity 0.65s var(--ease);
}

.slide:not(.is-current) .card { transform: scale(0.98); opacity: 0.8; }

.card-tab {
  position: absolute;
  top: -38px;
  left: -1px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 12px 12px 0 0;
}

.card-tab i { width: 7px; height: 7px; background: var(--orange); border-radius: 2px; }
.card-tab svg { width: 15px; height: 15px; }

.card-ghost {
  position: absolute;
  top: 18px;
  right: 40px;
  font-size: 108px;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--ghost);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

.card-head { position: relative; margin-bottom: 38px; z-index: 1; }
.card-head h2 { font-size: 33px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); }
.card-head p { margin-top: 8px; font-size: 15px; color: var(--muted); }

/* ── Felder (Basis: Classic Soft) ── */

.field-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 26px;
  margin-bottom: 40px;
  z-index: 1;
}

.field { display: flex; flex-direction: column-reverse; gap: 9px; position: relative; }
.field--wide { grid-column: 1 / -1; }

.field > span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a7b0bf;
  padding-left: 0;
  transition: color 0.25s var(--ease);
}

.field:focus-within > span { color: var(--orange); }

.field input,
.field textarea,
.field select {
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #101828;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #dfe5ee;
  border-radius: 0;
  padding: 8px 0 14px;
  outline: none;
  resize: none;
  width: 100%;
  transition: all 0.25s var(--ease);
}

.field input:hover,
.field textarea:hover,
.field select:hover { background: transparent; border-bottom-color: #9db9ff; }

.field input::placeholder,
.field textarea::placeholder { color: #c9d2e2; font-weight: 400; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  background: transparent;
  border-bottom-color: var(--orange);
  caret-color: var(--orange);
}

/* ── Select (Dropdown) ── */

.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

/* ── Range (Slider) ── */

.field .range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #dfe9ff;
  border: none;
  border-radius: 4px;
  padding: 0;
  margin: 18px 0 10px;
  cursor: pointer;
}

.field .range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(14, 30, 58, 0.3);
  cursor: grab;
  transition: transform 0.2s var(--ease);
}
.field .range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.field .range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(14, 30, 58, 0.3);
  cursor: grab;
}

.range-val { float: right; font-weight: 800; color: var(--orange); }

/* ── Segmented Control ── */

.seg {
  display: flex;
  background: #edf2fb;
  border-radius: 999px;
  padding: 5px;
  gap: 5px;
}

.seg label { flex: 1; position: relative; }

.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg .opt {
  display: block;
  text-align: center;
  padding: 11px 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.seg .opt:hover { color: var(--accent); }
.seg input:checked + .opt { background: var(--accent); color: #ffffff; }
.seg input:focus-visible + .opt { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Toggle ── */

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #edf2fb;
  border-radius: 999px;
  padding: 13px 14px 13px 24px;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}

.toggle:hover { background: #e3ecfa; }

.toggle .t-text { font-size: 14px; font-weight: 600; color: var(--ink); }

.toggle input { position: absolute; opacity: 0; pointer-events: none; }

.toggle .track {
  flex: 0 0 auto;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #d8e2f5;
  transition: background 0.25s var(--ease);
}

.toggle .track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  transition: left 0.25s var(--ease);
}

.toggle input:checked ~ .track { background: var(--orange); }
.toggle input:checked ~ .track::after { left: 23px; }
.toggle input:focus-visible ~ .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Buttons ── */

.card-actions {
  position: relative;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  z-index: 1;
}

.btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 16px 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s var(--ease);
}

.btn svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }

.btn-next, .btn-submit { background: var(--ink); color: #fff; margin-left: auto; }
.btn-next:hover, .btn-submit:hover { background: var(--orange); transform: translateY(-1px); }
.btn-next:hover svg, .btn-submit:hover svg { transform: translateX(3px); }

.btn-ghost { background: transparent; color: var(--muted); padding: 16px 20px; }
.btn-ghost:hover { color: var(--accent); }

/* ───────────── Info-Box (hell, Crisp White) ───────────── */

.infobox {
  background: #ffffff;
  border: 1px solid #e6eaf2;
  border-radius: 24px;
  padding: 22px 28px 26px;
  color: var(--ink);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px 24px;
  transition: transform 0.65s var(--ease), opacity 0.65s var(--ease);
}

.infobox-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  background: #2a5fe0; /* etwas dunkler: weiß darauf misst 5,2:1 */
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  white-space: nowrap;
}

.infobox-body { display: flex; flex-wrap: wrap; gap: 10px; min-height: 36px; align-items: center; }
.infobox-empty { font-size: 14px; color: var(--muted); }

.chip {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--sky);
  border: 1px solid var(--sky-border);
  border-radius: 999px;
  padding: 9px 16px;
  animation: chipIn 0.35s var(--ease);
}

.chip b { color: var(--accent); font-weight: 700; margin-right: 4px; }
.chip--count { display: none; }

@keyframes chipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.infobox-progress {
  grid-column: 1 / -1;
  height: 4px;
  background: #e9edf4;
  border-radius: 4px;
  overflow: hidden;
}

.infobox-progress-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 4px; transition: width 0.5s var(--ease); }

/* ══════════════════════════════════════════════
   SOCIAL PROOF UNTER DEM DOCK — Avatare + Zähler
   ══════════════════════════════════════════════ */

.dock-mods { margin-top: 18px; display: flex; flex-direction: column; align-items: center; }

.sp { text-align: center; max-width: 76px; }

.sp b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.sp span {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

/* 02 · Avatare */
.sp-faces { display: flex; justify-content: center; margin-bottom: 8px; }
.sp-faces i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  font-style: normal;
  color: #ffffff;
}
.sp-faces i:nth-child(1) { background: var(--ink); }
.sp-faces i:nth-child(2) { background: var(--accent); margin-left: -8px; }
.sp-faces i:nth-child(3) { background: #b9d0f7; color: var(--ink); margin-left: -8px; }

/* ───────────── Responsive ───────────── */

@media (max-width: 1024px) {
  .card { padding: 46px 34px 34px; }
}

@media (max-width: 900px) {

  /* Inhalt */
  .page { padding-top: 84px; padding-bottom: 64px; }
  .page-head { margin-bottom: 36px; }
  .subline { font-size: 14.5px; }

  .slider { border-radius: 20px; }

  .card {
    margin-top: 26px;
    padding: 38px 22px 26px;
    border-radius: 6px 20px 20px 20px;
  }
  .card-tab { top: -34px; padding: 10px 16px; font-size: 10px; gap: 8px; }
  .card-ghost { font-size: 62px; top: 12px; right: 18px; }
  .card-head { margin-bottom: 28px; }
  .card-head h2 { font-size: 24px; }
  .card-head p { font-size: 13.5px; }

  .field-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .field input, .field textarea, .field select { font-size: 17px; }

  .card-actions { gap: 8px; }
  .btn { padding: 14px 24px; font-size: 14px; }

  .infobox { grid-template-columns: 1fr; gap: 12px; padding: 16px 20px 20px; border-radius: 18px; }
  .infobox-tag { justify-self: start; }
}

@media (max-width: 430px) {
  .dock-mods { display: none; }
  .page { padding: 80px 12px 56px; }
}

/* ══════════════════════════════════════════════
   KOSTENÜBERNAHME-CHECK — Entscheidungsbaum
   Auswahlkacheln · Ergebniskarte · Dock-Zustände
   ══════════════════════════════════════════════ */

:root {
  --muted-strong: #6b7688;
  --ok: #17845b;
  --ok-soft: #e8f6f0;
}

/* Slide, die nicht auf dem aktuellen Pfad liegt */
.slide.is-off { display: none; }

/* Slider-Höhe folgt der aktiven Karte (JS setzt den Wert) */
.slider { transition: height 0.5s var(--ease); }

/* Kartenbreite = Breite der Live-Einschätzung darunter. Eine Quelle für beide,
   damit die Box exakt unter der Karte sitzt — auch an den Umbruchpunkten. */
:root { --slide-w: 64%; }

@media (max-width: 1180px) { :root { --slide-w: 74%; } }

.slide { flex-basis: var(--slide-w); }
.slide[data-card="result"] { transition: flex-basis 0.6s var(--ease); }

/* Die Karte behält ihre eigene Höhe; die Bühne richtet sich nach der aktuellen
   Karte (siehe syncHeight). Eine höhere Vorschau blendet unten aus. */
.slide { align-self: flex-start; }

/* Die Vorschau endet bündig mit der aktuellen Karte (Wert aus syncHeight()).
   Beschnitten wird per clip-path statt overflow — sonst fiele der Karteireiter
   weg, der oberhalb der Karte sitzt. */
.slide.is-preview .card { overflow: visible; }

/* ── Vorschau auf den nächsten Schritt ──
   Die echte nächste Karte läuft rechts mit, damit man sieht, was kommt.
   Sie tritt zurück und löst sich zum Rand hin auf, statt hart abzubrechen. */

.slider {
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--slide-w) + 2%), rgba(0, 0, 0, 0.5) calc(var(--slide-w) + 16%), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(var(--slide-w) + 2%), rgba(0, 0, 0, 0.5) calc(var(--slide-w) + 16%), transparent 100%);
}

.slide.is-preview .card {
  opacity: 0.7;
  filter: grayscale(0.55);
  box-shadow: none;
}

.slide.is-preview .card-tab { background: #667080; }
.slide.is-preview .card-tab i { background: #cdd5e2; }

/* Die Live-Einschätzung steht fest unter dem Slider und wandert nicht mit */
.infobox { width: var(--slide-w); margin-top: 22px; }

/* Fließtext darf nicht unter die Geisterzahl laufen */
.card-head { padding-right: 150px; }

/* Verlinkte Buttons (Ergebnis-CTA) tragen keine Unterstreichung */
.btn { text-decoration: none; }

/* Sekundärbuttons brauchen lesbaren Kontrast, nicht nur Zurückhaltung */
.btn-ghost { color: var(--muted-strong); }

/* ── Auswahlkacheln ── */

.choices {
  position: relative;
  display: grid;
  gap: 16px;
  margin-bottom: 38px;
  z-index: 1;
}

.choices--2 { grid-template-columns: 1fr 1fr; }
.choices--4 { grid-template-columns: 1fr 1fr; }

.choice {
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  padding: 20px 22px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.choice:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px rgba(14, 30, 58, 0.45);
}

.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.choice:active { transform: translateY(0); }

.choice-ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--sky);
  color: var(--accent);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.choice-ico svg { width: 21px; height: 21px; }

.choice--neutral .choice-ico { background: #f1f3f8; color: var(--muted-strong); }

.choice-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.choice-txt b { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.choice-txt em { font-size: 13.5px; font-style: normal; color: var(--muted-strong); line-height: 1.35; }

.choice.is-picked {
  border-color: var(--accent);
  background: #f7faff;
  transform: translateY(0);
}
.choice.is-picked .choice-ico { background: var(--accent); color: #ffffff; }
.choice.is-picked .choice-txt em { color: #5e6776; } /* auf dem hellblauen Grund gemessen */

/* Hinweiszeile in der Fußleiste der Karte */
.card-hint {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-strong);
}

/* ── Ergebniskarte ── */

.result-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 30px;
  z-index: 1;
}

.result-head .card-head { margin-bottom: 0; }
.result-head .card-head p { font-size: 15.5px; line-height: 1.55; color: var(--muted-strong); max-width: 54ch; }

.result-facts {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 26px;
  margin-bottom: 38px;
  padding: 22px 0 0;
  border-top: 1px solid #f0f3f8;
  list-style: none;
  z-index: 1;
}

.result-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.result-facts li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--orange);
}

.btn-restart { padding: 16px 20px; }
.btn-restart svg { width: 15px; height: 15px; }
.btn-restart:hover svg { transform: rotate(-25deg); }

/* ── Dock: übersprungener Schritt + Icon-Varianten ── */

.step.is-skipped { opacity: 0.4; }
.step.is-skipped .step-icon { background: #f2f4f8; color: #c3cbd8; }
.step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Die Überschrift ist nur Fokusziel nach dem Kartenwechsel. Der Ring erscheint
   deshalb nur, wenn tatsächlich per Tastatur navigiert wurde — nach einem
   Mausklick wäre er ein Rahmen ohne Anlass. */
.card-head h2:focus { outline: none; }
body.via-tastatur .card-head h2:focus {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 4px;
}

.step-icon .ico-var { display: none; }
.step[data-variant="schuld"] .ico-var[data-var="schuld"],
.step[data-variant="schaden"] .ico-var[data-var="schaden"],
.step[data-variant="hoehe"] .ico-var[data-var="hoehe"],
.step[data-variant="deckung"] .ico-var[data-var="deckung"] { display: block; }

/* ── Vertrauenszeile unter dem Slider ── */

/* ── Wer weniger Bewegung will, bekommt weniger Bewegung ── */

@media (prefers-reduced-motion: reduce) {
  .slider,
  .slider-track,
  .card,
  .infobox,
  .choice,
  .infobox-progress-fill,
  .step-icon { transition-duration: 0.01ms; }
  .chip { animation: none; }
}

/* ── Vertrauenszeile unter dem Slider ── */

.trustline {
  margin-top: 34px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5b6678; /* auf dem grauen Seitengrund gemessen: 5,2:1 */
}

/* ── Responsive ── */

/* Zwei Spalten lohnen erst, wenn jede Kachel lesbaren Text trägt.
   Darunter zerfiele „Volles Sachverständigengutachten" in vier Zeilen. */
@media (max-width: 1100px) {
  .choices--2,
  .choices--4 { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .choices--4 { gap: 14px; }
  .choice { padding: 18px; gap: 14px; }
}

@media (max-width: 900px) {
  :root { --slide-w: 84%; }

  /* schmalerer Abstand, damit für die Vorschau-Kachel Platz bleibt */
  .slider-track { gap: 14px; }

  .choices { gap: 12px; margin-bottom: 28px; }
  .choices--2, .choices--4 { grid-template-columns: 1fr; }
  .choice { padding: 16px 18px; border-radius: 14px; }
  .choice-ico { width: 40px; height: 40px; border-radius: 12px; }
  .choice-ico svg { width: 19px; height: 19px; }
  .choice-txt b { font-size: 15.5px; }
  .choice-txt em { font-size: 13px; }

  .card-hint { display: none; }
  .card-head { padding-right: 74px; }

  .result-head { flex-direction: column; gap: 18px; margin-bottom: 24px; }
  .result-head .card-head p { font-size: 14px; }
  .result-facts { grid-template-columns: 1fr; gap: 10px; padding-top: 18px; margin-bottom: 28px; }

  .card-actions { flex-wrap: wrap; }
  .btn-restart { padding: 14px 16px; }

  .trustline { margin-top: 26px; font-size: 10.5px; letter-spacing: 0.1em; }
}

@media (max-width: 430px) {
  :root { --slide-w: 86%; }
}

/* ══════════════════════════════════════════════
   VORLÄUFIGE EINSCHÄTZUNG — Urteil statt Merkzettel
   ══════════════════════════════════════════════ */

.verdict {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.verdict-ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #f1f3f8;
  color: var(--muted-strong);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.verdict-ico svg { width: 22px; height: 22px; }

.verdict-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.verdict-txt b {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

.verdict-txt span { font-size: 14px; color: var(--muted-strong); line-height: 1.4; }

/* Farbe folgt der Aussage, nicht der Dekoration */
.infobox[data-tone="gegner"] .verdict-ico { background: var(--ok-soft); color: var(--ok); }
.infobox[data-tone="quote"] .verdict-ico { background: var(--sky); color: var(--accent); }
.infobox[data-tone="kasko"] .verdict-ico { background: var(--sky); color: var(--accent); }
.infobox[data-tone="selbst"] .verdict-ico { background: #fff1e9; color: var(--orange); }

/* ── Zahler-Anzeige ── */

.payers {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid #e6eaf2;
  border-radius: 999px;
  padding: 8px 15px 8px 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted-strong);
  background: #ffffff;
  transition: all 0.35s var(--ease);
}

.payer i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dfe5ee;
  transition: all 0.35s var(--ease);
}

/* kommt in Frage */
.payer.is-open { color: var(--muted-strong); border-color: #d7deea; }
.payer.is-open i { background: #b9c3d4; }

/* trägt die Kosten */
.payer.is-on { color: var(--ink); border-color: var(--accent); background: #f7faff; }
.payer.is-on i { background: var(--accent); box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.15); }

.payer[data-payer="selbst"].is-on { border-color: var(--orange); background: #fff6f1; }
.payer[data-payer="selbst"].is-on i { background: var(--orange); box-shadow: 0 0 0 4px rgba(255, 107, 44, 0.15); }

/* fällt weg — zurückgenommen über Rahmen und Fläche, nicht über Deckkraft:
   der Text muss lesbar bleiben */
.payer.is-out { border-color: #eef1f6; background: #fafbfd; }
.payer.is-out b,
.payer.is-out em { color: #666f7e; } /* auf der hellen Fläche gemessen: 4,8:1 */
.payer.is-out b { font-weight: 600; }
.payer.is-out i { background: #e6eaf2; }

/* Jede Marke sagt in Worten, woran man ist — Farbe allein trägt die Aussage nicht */
.payer b { font-weight: 700; }

.payer em {
  margin-left: 2px;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  color: var(--muted-strong);
  white-space: nowrap;
}
.payer.is-on em { color: var(--accent); }
.payer[data-payer="selbst"].is-on em { color: var(--orange); }
.payer.is-out em { color: var(--muted-strong); }

/* In der Ergebniskarte steht der Zustand rechts am Rand der Marke */
.payers--gross .payer { justify-content: space-between; gap: 12px; }
.payers--gross .payer b { margin-right: auto; }

/* Statuszeile über der Ergebnis-Überschrift — sie ersetzt das große Symbol,
   das neben langen Überschriften unruhig wirkte. */

.result-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  border-radius: 999px;
  padding: 8px 16px 8px 13px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: #eef2fb;
  color: var(--ink);
}

.result-status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted-strong);
}

.card--result.tone-good .result-status { background: var(--ok-soft); color: #10593f; }
.card--result.tone-good .result-status::before { background: var(--ok); }

.card--result.tone-warn .result-status { background: #fff1e9; color: #8a4a24; }
.card--result.tone-warn .result-status::before { background: var(--orange); }

/* ══════════════════════════════════════════════
   DER WEG DER RECHNUNG — die Ergebnis-Visualisierung
   Schaden → Gutachten → Kostenträger. Die Topologie
   unterscheidet die sechs Fälle, nicht bloß die Farbe.
   ══════════════════════════════════════════════ */

.route {
  position: relative;
  margin: 0 0 34px;
  padding: 26px 28px 22px;
  border: 1px solid var(--card-border);
  border-radius: 22px;
  background: #f7f9fc;
  z-index: 1;
}

.route-label {
  display: block;
  margin-bottom: 22px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #616a79; /* auf der getönten Panelfläche gemessen: 4,9:1 */
}

.route-bahn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr) 104px minmax(0, 1.15fr);
  align-items: center;
  gap: 0;
}

/* ── Station ── */

.wegpunkt {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 14px 16px;
  border: 1.5px solid var(--card-border);
  border-radius: 16px;
  background: #ffffff;
}

.wegpunkt-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eef2fb;
  color: var(--muted-strong);
}
.wegpunkt-ico svg { width: 19px; height: 19px; }

.wegpunkt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wegpunkt-txt b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; }
.wegpunkt-txt em { font-size: 13px; font-style: normal; color: #616a79; line-height: 1.35; }

/* Das Ziel trägt die Aussage — es steht kräftiger da als der Weg dorthin */
.wegpunkt--ziel { padding: 16px 18px; border-width: 2px; }
.wegpunkt--ziel .wegpunkt-ico { width: 44px; height: 44px; border-radius: 13px; }
.wegpunkt--ziel .wegpunkt-txt b { font-size: 15.5px; }

.wegpunkt.ton-gut { border-color: var(--ok); background: var(--ok-soft); }
.wegpunkt.ton-gut .wegpunkt-ico { background: #ffffff; color: var(--ok); }
.wegpunkt.ton-gut .wegpunkt-txt em { color: #33604f; }

.wegpunkt.ton-selbst { border-color: var(--orange); background: #fff6f1; }
.wegpunkt.ton-selbst .wegpunkt-ico { background: #ffffff; color: var(--orange); }
.wegpunkt.ton-selbst .wegpunkt-txt em { color: #7d411e; }

.wegpunkt.ton-offen { border-style: dashed; border-color: #c3cbd8; background: #ffffff; }
.wegpunkt.ton-offen .wegpunkt-ico { background: #f1f3f8; color: var(--muted-strong); }

/* ── Verbindung ── */

.weg { position: relative; display: block; height: 100%; min-height: 62px; }

/* Die Linie darf die Zeilenhöhe nicht selbst bestimmen: Als Fließelement
   meldet das SVG seine Eigenhöhe (~150px) an die Zeile — bei einem einzigen
   Ziel schwebt die Station dann in 177px leerer Höhe. Absolut gelöst füllt
   sie die Verbindung, und die Zeile richtet sich nach den Stationen. */
.weg .weg-linie {
  position: absolute;
  inset: 0;
}

/* Das Etikett benennt, was hier entlangläuft */
.weg-etikett {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  /* sitzt über der Linie, damit die Verbindung durchläuft */
  transform: translate(-50%, -170%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  border: 1.5px solid var(--card-border);
  border-radius: 999px;
  background: #ffffff;
  padding: 5px 10px 5px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-strong);
}
.weg-etikett svg { width: 12px; height: 12px; }

/* Nur die letzte Verbindung trägt das Etikett */
.route-bahn > .weg:first-of-type .weg-etikett { display: none; }

/* Richtungspfeil an jeder Station, zu der der Weg führt */
.wegpunkt--mitte::before,
.wegpunkt--ziel::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left-color: #c3cbd8;
  border-right: 0;
}

.wegpunkt--ziel.ton-gut::before { border-left-color: var(--ok); }
.wegpunkt--ziel.ton-selbst::before { border-left-color: var(--orange); }
.wegpunkt--ziel.ton-offen::before { border-left-color: #c3cbd8; }

/* Etikett an der Zielkarte: sagt in einem Wort, was dort passiert */
.wegpunkt-badge {
  margin-left: auto;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #e3e7ef;
  color: #4f5766;
  white-space: nowrap;
}

.wegpunkt.ton-gut .wegpunkt-badge { background: var(--ok); color: #ffffff; }
.wegpunkt.ton-selbst .wegpunkt-badge { background: #ffe0cf; color: #7d411e; }
.wegpunkt.ton-offen .wegpunkt-badge { background: #e3e7ef; color: #4f5766; }

.weg-linie { width: 100%; height: 100%; overflow: visible; }
.weg-linie path {
  fill: none;
  stroke: #c3cbd8;
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.weg-linie.weg-offen path { stroke-dasharray: 3 7; }
.weg-linie .weg-neben { stroke: #f0c3a8; }

.wegziele { display: grid; grid-auto-rows: 1fr; gap: 10px; min-width: 0; }

.route-fussnote {
  max-width: 66ch;
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #616a79;
}

/* Herkunft und Einordnung des Rechenstands — dieselbe Zeile wie in den
   Engine-Werkzeugen (controls.css). Steht hier unter der Aktionszeile,
   darum mehr Abstand nach oben; die Engine-Seiten ziehen controls.css
   danach und behalten ihre eigenen Abstände. */
.ergebnis-stand {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7688;
  max-width: 62ch;
}

.ergebnis-stand:empty {
  display: none;
}

/* ── Aufklappbarer Hinweis „Hinweise zu diesen Werkzeugen" ──
   Liegt hier statt in controls.css, damit er auf jeder Seite funktioniert —
   der Kostenübernahme-Check lädt controls.css nicht. */

.tool-hinweis {
  margin: 8px 0 26px;
  max-width: 62ch;
}

.tool-hinweis summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--card-border);
  border-radius: 999px;
  background: #ffffff;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted-strong);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.tool-hinweis summary::-webkit-details-marker {
  display: none;
}

.tool-hinweis summary svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.tool-hinweis summary .hinweis-pfeil {
  width: 14px;
  height: 14px;
  color: var(--muted-strong);
  transition: transform 0.2s var(--ease);
}

.tool-hinweis summary:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.tool-hinweis summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.tool-hinweis[open] summary {
  border-color: var(--accent);
  color: var(--ink);
}

.tool-hinweis[open] summary .hinweis-pfeil {
  transform: rotate(180deg);
}

.tool-hinweis-text {
  padding: 16px 6px 0;
  font-size: 14px;
  line-height: 1.6;
  /* Nicht --muted-strong (#6b7688): auf dem Seitengrund gemessen 4,06:1 und
     damit unter der Anforderung für Fließtext dieser Größe. --muted liegt
     bei 4,8:1. */
  color: var(--muted);
}

.tool-hinweis-text p + p {
  margin-top: 10px;
}

/* ── Was jetzt passiert ── */

.danach {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid #f0f3f8;
  z-index: 1;
}

.danach-label {
  display: block;
  margin-bottom: 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

.danach-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: danach;
}

.danach-liste li {
  counter-increment: danach;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 32px;
  position: relative;
}

.danach-liste li::before {
  content: counter(danach);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.danach-liste b { font-size: 14px; font-weight: 700; color: var(--ink); }
.danach-liste em { font-size: 13px; font-style: normal; color: var(--muted-strong); line-height: 1.35; }

/* Im Finale gibt es keinen nächsten Schritt und keine Zwischeneinschätzung mehr.
   Nur die Ergebniskarte wächst — die Karten davor behalten ihre Breite, sonst
   verschiebt sich die Track-Position und der Wechsel ruckelt. */
body.is-finale .slide[data-card="result"] { flex-basis: 100%; }
body.is-finale .slider { -webkit-mask-image: none; mask-image: none; }
body.is-finale .infobox { display: none; }

/* Zweispaltig: links die Erzählung, rechts der Kostenträger-Bescheid */
body.is-finale .card--result {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-rows: auto auto auto;
  column-gap: 52px;
  align-content: start;
  padding: 62px 64px 52px;
}

body.is-finale .result-head { grid-column: 1 / -1; grid-row: 1; gap: 30px; margin-bottom: 34px; }
body.is-finale .route { grid-column: 1 / -1; grid-row: 2; }
body.is-finale .result-facts { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; gap: 13px; align-self: start; }
body.is-finale .danach { grid-column: 2; grid-row: 3; align-self: start; }
body.is-finale .card-actions { grid-column: 1 / -1; grid-row: 4; margin-top: 30px; }

/* Auf der breiten Bühne stehen die drei Stationen nebeneinander */
body.is-finale .danach-liste { grid-template-columns: 1fr; gap: 14px; }

body.is-finale .result-head .card-head h2 { font-size: 40px; line-height: 1.08; }
body.is-finale .result-head .card-head p { font-size: 16.5px; }
/* Im Finale sagt der Reiter, worum es geht — die Geisterzahl würde nur
   hinter dem Bescheid-Panel hervorlugen und Platz kosten. */
body.is-finale .card-ghost { display: none; }
body.is-finale .card-head { padding-right: 0; }

/* Erst unter dieser Breite lohnen zwei Spalten nicht mehr */
@media (max-width: 720px) {
  body.is-finale .card--result { grid-template-columns: 1fr; }
  body.is-finale .result-head,
  body.is-finale .route,
  body.is-finale .result-facts,
  body.is-finale .danach,
  body.is-finale .card-actions { grid-column: 1; grid-row: auto; }
  body.is-finale .result-facts { margin-bottom: 30px; }
}

@media (max-width: 900px) {
  .verdict { grid-column: 1 / -1; gap: 13px; }
  .verdict-ico { width: 40px; height: 40px; border-radius: 12px; }
  .verdict-ico svg { width: 19px; height: 19px; }
  .verdict-txt b { font-size: 18px; }
  .verdict-txt span { font-size: 13px; }

  .payer { font-size: 12.5px; padding: 7px 12px 7px 10px; gap: 7px; }
  .payers { gap: 6px; }

  .result-verdict { margin-bottom: 26px; padding-top: 18px; }
  .payers--gross .payer { font-size: 12.5px; padding: 9px 14px 9px 11px; }

  body.is-finale .card--result { padding: 40px 22px 28px; }
      body.is-finale .result-head .card-head h2 { font-size: 26px; }
  body.is-finale .result-head .card-head p { font-size: 14.5px; }
  body.is-finale .card-ghost { font-size: 68px; }
  body.is-finale .result-facts { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   SEITENBREITE — dieselbe Rinne wie lx-lx.de
   Container 1280 px zentriert, Rand 32 / 22 / 16 px
   (gemessen an #lexup-hdr .bar-in der Live-Seite)
   ══════════════════════════════════════════════ */

:root { --deckel: 1280px; --rinne: 32px; }

@media (max-width: 1180px) { :root { --rinne: 22px; } }
@media (max-width: 980px) { :root { --rinne: 16px; } }

.page {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--deckel);
  padding-left: var(--rinne);
  padding-right: var(--rinne);
}

/* Das Dock steht links neben der Rinne — aber nur, solange dort Platz ist:
   1280 Container + zweimal 88 px Dock = 1456 px. */
@media (min-width: 1456px) {
  .sidebar { left: calc((100% - var(--deckel)) / 2 - 88px); }
}

/* Darunter wird es zur Kopfleiste, sonst läge es über dem Inhalt */
@media (max-width: 1455px) {
  /* Sidebar wird zur Top-Bar */
  .sidebar {
    inset: 0 0 auto 0;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    /* Inhalt der Leiste bündig zur Rinne, Fläche über die volle Breite */
    padding: 10px max(var(--rinne), calc((100% - var(--deckel)) / 2 + var(--rinne)));
    background: #ffffff;
    border-bottom: 1px solid #e6eaf2;
  }

  .steps {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .step { flex-direction: row; gap: 7px; padding: 7px 9px; min-height: 44px; border-radius: 999px; }
  .step-icon { width: 30px; height: 30px; }
  .step-icon svg { width: 14px; height: 14px; }

  /* Labels nur beim aktiven Schritt, horizontal */
  .step::after {
    display: none;
    writing-mode: horizontal-tb;
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .step.is-active::after { display: block; }

  .step-finish {
    margin-top: 0;
    padding-top: 5px;
    border-top: none;
    border-left: 1px solid #eef1f6;
    margin-left: 2px;
    padding-left: 11px;
    border-radius: 0 999px 999px 0;
  }

  /* Social Proof kompakt rechts in der Bar */
  .dock-mods { margin-top: 0; margin-left: auto; }
  .sp { max-width: none; display: flex; align-items: center; gap: 8px; }
  .sp-faces { margin-bottom: 0; }
  .sp-faces i { width: 21px; height: 21px; font-size: 8px; }
  .sp-faces i:nth-child(2),
  .sp-faces i:nth-child(3) { margin-left: -7px; }
  .sp b { font-size: 13px; }
  .sp span { display: none; }

}

/* Auf dem Handy ist die Kopfleiste flacher — dort greift der 900er-Block */
@media (min-width: 901px) and (max-width: 1455px) {
  .page { padding-top: 116px; }
}

/* 🔴 Die Kopfleiste muss ins Fenster passen — auch mit sechs Schritten.
   Die Werkzeuge haben unterschiedlich viele Schritte; bei sechs plus
   Ergebnis war die Leiste 364 px breit (Gegencheck 396 px) und ragte bei
   320 px um 60 px, beim Gegencheck schon bei 390 px um 22 px aus dem Bild.
   Statt zu scrollen (was man übersieht) wird sie kompakter: Der Zähler
   weicht, Symbole und Abstände schrumpfen. Die Touchhöhe bleibt bei 44 px.

   Diese Regeln müssen NACH dem 1455er-Block stehen — dort werden `.step`
   und `.step-icon` für die Kopfleiste gesetzt, und bei gleicher Spezifität
   gewinnt die spätere Regel. Weiter oben stehend blieben sie wirkungslos. */
@media (max-width: 500px) {
  .sidebar .dock-mods { display: none; }
}

@media (max-width: 430px) {
  .sidebar { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .steps { gap: 2px; }
  .step { padding: 5px 6px; gap: 5px; min-height: 44px; }
  .step-icon { width: 26px; height: 26px; border-radius: 9px; }
  .step-icon svg { width: 13px; height: 13px; }
  .step-finish { margin-left: 1px; padding-left: 7px; }
}

/* Ganz schmale Geräte: Das Etikett des aktiven Schritts kostet mehr Breite,
   als es an Orientierung bringt — die Symbole zeigen den Fortschritt selbst. */
@media (max-width: 360px) {
  .step.is-active::after { display: none; }
  .step { padding: 5px; }
}

/* Sieben Schritte plus Rückweg-Logo sprengen 320px auch verdichtet. Damit
   nichts aus dem Bild ragt, darf die Schrittleiste im Notfall waagerecht
   wischen — sichtbar bleibt sie trotzdem, weil die Schritte weiter links
   beginnen und der aktive beim Weitergehen herangeholt wird. */
@media (max-width: 430px) {
  .sidebar .steps {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Waagerecht wischen gehört der Leiste, senkrecht der Seite */
    touch-action: pan-x pan-y;
    /* Der Rand darf nicht abgeschnitten wirken */
    padding-right: 2px;
  }
  .sidebar .steps::-webkit-scrollbar { display: none; }
  .sidebar .step { flex: 0 0 auto; }
}

/* ── Der Rechnungsweg auf schmalen Bühnen: senkrecht ── */

@media (max-width: 1100px) {
  .route { padding: 20px 18px 18px; }
  .route-bahn { grid-template-columns: 1fr; }

  /* Senkrecht verbindet eine Linie die Stationen — ein gedrehtes SVG
     würde sich über die ganze Karte legen. */
  .weg { position: relative; height: 34px; min-height: 0; }
  .weg-linie { display: none; }

  /* Die Verbindung mit Etikett braucht mehr Höhe: Bei 34px klebt die Pille
     fast an den Stationen, während die schlichte Verbindung luftig wirkt —
     ein sichtbar ungleicher Rhythmus. */
  .route-bahn > .weg:not(:first-of-type) { height: 48px; }

  .weg-etikett { left: 32px; transform: translate(6%, -50%); padding: 4px 9px 4px 7px; font-size: 10px; }

  .wegpunkt--mitte::before,
  .wegpunkt--ziel::before {
    left: 32px;
    top: -8px;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #c3cbd8;
    border-bottom: 0;
    border-left-width: 7px;
    border-left-color: transparent;
  }
  .wegpunkt--ziel.ton-gut::before { border-top-color: var(--ok); border-left-color: transparent; }
  .wegpunkt--ziel.ton-selbst::before { border-top-color: var(--orange); border-left-color: transparent; }
  .weg::before {
    content: "";
    position: absolute;
    left: 32px;
    top: -2px;
    bottom: -2px;
    width: 2.5px;
    border-radius: 2px;
    background: #c3cbd8;
  }
  .weg--offen::before {
    background: repeating-linear-gradient(to bottom, #c3cbd8 0 3px, transparent 3px 10px);
  }

  /* Zwei Ziele stehen untereinander und teilen sich einen Anschluss */
  .wegziele { gap: 10px; position: relative; }
  .route[data-art="gabel"] .wegziele::before,
  .route[data-art="abzweig"] .wegziele::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 32px;
    top: 24px;
    bottom: 24px;
    width: 2.5px;
    border-radius: 2px;
    background: #dfe5ee;
  }

  /* Der Abzweig zur Selbstbeteiligung bleibt auch senkrecht ein Nebenweg */
  .route[data-art="abzweig"] .wegziele::before {
    background: linear-gradient(to bottom, #dfe5ee 46%, #f0c3a8 46%);
  }
  .wegpunkt { padding: 12px 14px; gap: 11px; }
  .wegpunkt-ico { width: 36px; height: 36px; border-radius: 11px; }
  .wegpunkt-txt b { font-size: 13.5px; }
  .wegpunkt-txt em { font-size: 12.5px; }
  .route-fussnote { font-size: 13px; }

  .danach-liste { grid-template-columns: 1fr; gap: 12px; }
}

/* Das Badge der Zielstation quetscht auf schmalen Karten den Stationsnamen
   („kein Versiche-rer") — es bekommt eine eigene Zeile, wie in den
   Engine-Werkzeugen (controls.css) längst üblich. 47px = 36px Icon + 11px Lücke. */
@media (max-width: 700px) {
  .wegpunkt--ziel { flex-wrap: wrap; }
  .wegpunkt--ziel .wegpunkt-txt { flex: 1 1 auto; }
  .wegpunkt--ziel .wegpunkt-badge { order: 3; margin-left: 47px; margin-top: 2px; }
}

/* Dieselbe Umbruchmechanik im waagerechten Bereich: Solange die Bahn in
   Spalten läuft, nimmt ein langes Etikett dem Stationsnamen die Breite und
   zerreißt ihn (gemessen: „Wertminderung" auf vier Zeilen in 35 px). Der
   Zwilling dieser Regel steht in controls.css für die Engine-Werkzeuge —
   diese hier deckt den Kostenübernahme-Check ab, der controls.css nicht lädt.
   Beide müssen zusammen gepflegt werden. */
@media (min-width: 701px) {
  .wegpunkt--ziel { flex-wrap: wrap; }
  .wegpunkt--ziel .wegpunkt-txt { flex: 1 1 12ch; }
  .wegpunkt--ziel .wegpunkt-badge { order: 3; margin-left: 53px; margin-top: 3px; }
}

/* Nur für Screenreader: beschreibt die Verzweigung, die das Bild zeigt */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════
   KLEINSTGERÄTE UND FLACHE FENSTER
   ══════════════════════════════════════════════ */

@media (max-width: 380px) {
  .card { padding: 34px 16px 22px; }
  .card-tab { padding: 9px 13px; font-size: 9.5px; letter-spacing: 0.1em; }
  .card-head h2 { font-size: 22px; }

  .choice { padding: 14px; gap: 12px; }
  .choice-ico { width: 36px; height: 36px; border-radius: 11px; }
  .choice-ico svg { width: 17px; height: 17px; }

  /* Die Aktionszeile bekommt eine eigene Reihe für den Hauptknopf */
  .card-actions { flex-wrap: wrap; row-gap: 12px; }
  .btn-submit, .btn-next { width: 100%; justify-content: center; margin-left: 0; }

  .wegpunkt { padding: 11px 12px; gap: 10px; flex-wrap: wrap; }
  .wegpunkt-badge { margin-left: 46px; }
  .route { padding: 18px 14px 16px; }
}

/* Flache Fenster (Handy quer, stark gezoomt): weniger Höhe verbrauchen */
@media (max-height: 560px) and (min-width: 480px) {
  /* Die Kopfleiste liegt fest über dem Inhalt — ihr Platz muss bleiben */
  .page { padding-top: 82px; padding-bottom: 32px; }
  .page-head { margin-bottom: 22px; }
  .page-head h1 { font-size: clamp(24px, 3vw, 32px); }
  .subline { display: none; }
  .card { margin-top: 26px; padding: 30px 26px 22px; }
  .card-head { margin-bottom: 20px; }
  .card-head h2 { font-size: 23px; }
  .choices { margin-bottom: 20px; }
  .choice { padding: 12px 14px; }
  .trustline { display: none; }
}

/* Auf mittleren Bühnen läuft die Route senkrecht — dort zählt jede Zeile */
@media (min-width: 601px) and (max-width: 1100px) {
  .route { padding: 22px 22px 20px; }
  .wegpunkt { padding: 12px 15px; }
  .wegpunkt-ico { width: 38px; height: 38px; }
  .weg { height: 22px; }
  .route-label { margin-bottom: 16px; }
  .route-fussnote { margin-top: 14px; }

  body.is-finale .result-head { margin-bottom: 26px; }
  body.is-finale .route { margin-bottom: 26px; }
  body.is-finale .card--result { padding: 46px 34px 34px; column-gap: 34px; }
}




/* Senkrechtes Dock: Das Logo steht über den Schritten, mit Abstand und
   Trennlinie — sonst klebt es an der ersten Station. */


/* Kopfleiste: Das Logo steht links vor den Schritten, mit einer senkrechten
   Trennlinie — dieselbe Sprache wie die Ergebnis-Station am anderen Ende. */




/* Auf ganz schmalen Geräten zählt jeder Punkt Breite für die Schritte. */


/* Auf dem Verteiler gibt es kein Dock — dort steht der Rückweg über der
   Überschrift, im Textfluss der Seite. */





/* ═══════════════════════════════════════════════════════════════════════
   13.08.2026 — Kopf und Fuß der Website tragen jetzt auch die Werkzeuge.
   Bis hierher liefen sie als eigene Insel: kein Menü, kein Fuß, nur ein
   Logo als Rückweg. Steht am Dateiende, weil die Bestandsregeln fuer
   .sidebar und .page dieselbe Spezifitaet haben.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Hoehe der globalen Kopfleiste, gemessen an /_lx/lx-header.css (.bar-in).
     Dieselben Stufen wie dort. */
  --lx-kopf: 66px;
}
@media (min-width: 981px){ :root{ --lx-kopf: 82px } }

/* `height:100%` auf body deckelte die Seite auf Fensterhoehe — der Fuss
   darunter waere abgeschnitten worden. */
html, body{ height: auto; min-height: 100%; }

/* Der Kopf ist halbdurchsichtig und klebt. Alles, was bei top:0 klebt,
   laeuft dahinter durch und faerbt ihn ein — deshalb beginnt das Dock
   unter ihm, nicht am Fensterrand. */
.sidebar{ top: var(--lx-kopf); }

@media (max-width: 1455px){
  /* Die Leiste war `fixed` am Fensterrand und `.page` glich das mit
     92 px Innenabstand aus. Jetzt klebt sie unter dem Kopf und steht im
     Fluss — der Ausgleich faellt damit weg. */
  .sidebar{
    position: sticky;
    inset: auto;
    top: var(--lx-kopf);
  }
  .page{ padding-top: 34px; }
}

/* Ab 1456 px steht das Dock senkrecht neben der Seite. Es ist ueber die
   Fensterhoehe zentriert — ohne Abzug der Kopfleiste sitzt es zu tief. */
@media (min-width: 1456px){
  .sidebar{ bottom: 0; height: auto; }
  .page{ padding-top: 56px; }
}

/* Der Fuss ist ein eigener Block hinter .page. Am Rechner liegt links das
   88 px breite Dock — der Fuss zieht sich seine Rinne selbst und darf
   deshalb nicht mit eingerueckt werden. */
#lx-ftr-mount{ margin-left: 0; position: relative; z-index: 12; }

/* ── Bühne erst zeigen, wenn sie steht ──
   Der Slider ist im HTML leer; erst engine.js (bzw. app.js) baut die Karten und
   setzt die Höhe. Malt der Browser vorher, ist die Bühne 8 px hoch und alles
   darunter rutscht danach um rund 870 px nach unten — gemessen am 03.09.2026
   als CLS 0,30 bis 0,51 auf acht Rechnerseiten. Solange die Klasse "bereit"
   fehlt, bleiben Bühne und alles darunter unsichtbar; unsichtbare Elemente
   erzeugen keinen Layoutsprung. Ohne JavaScript greift die Regel nicht
   (html.hat-js). Klemmt das Skript, macht die Notfall-Animation nach 3 s
   trotzdem sichtbar. */
@keyframes lx-buehne-notfall { to { visibility: visible; } }

html.hat-js #slider:not(.bereit),
html.hat-js #slider:not(.bereit) ~ * {
  visibility: hidden;
  animation: lx-buehne-notfall 0s linear 3s forwards;
}

/* ── Platz fuer die Rechner freihalten (09.09.2026) ──
      Der Regler-Bereich ist vor dem Aufbau nur 8 px hoch. Sobald das Skript
      ihn fuellt, waechst er auf 417 bis 1420 px und schiebt Auswertung und
      Fusszeile nach unten. Am Desktop gemessen: Layoutsprung zwischen 0,31
      und 0,53 auf acht von neun Rechnern -- am Handy faellt es nicht auf,
      weil dort nichts Sichtbares darunter steht.
      Die Mindesthoehe haelt den Platz frei, bis der Inhalt steht. Die Werte
      sind die je Rechner gemessenen Endhoehen; sie gelten nur, solange die
      Marke `bereit` fehlt, und verschwinden mit ihr. */
html.hat-js #slider:not(.bereit) { min-height: 610px; }
html.hat-js body.page-id-407 #slider:not(.bereit),
html.hat-js body.page-id-408 #slider:not(.bereit) { min-height: 890px; }
html.hat-js body.page-id-409 #slider:not(.bereit) { min-height: 540px; }
html.hat-js body.page-id-406 #slider:not(.bereit) { min-height: 540px; }
html.hat-js body.page-id-405 #slider:not(.bereit) { min-height: 415px; }

@media (max-width: 700px) {
  html.hat-js #slider:not(.bereit) { min-height: 560px; }
  html.hat-js body.page-id-407 #slider:not(.bereit),
  html.hat-js body.page-id-408 #slider:not(.bereit) { min-height: 1400px; }
  html.hat-js body.page-id-409 #slider:not(.bereit) { min-height: 705px; }
  html.hat-js body.page-id-406 #slider:not(.bereit) { min-height: 550px; }
  html.hat-js body.page-id-405 #slider:not(.bereit) { min-height: 490px; }
}