/* Launch-Schnitt 20.10.2026: echte Links statt Vorschaudialog, ruhigere Hinweise. Wird zuletzt geladen. */
/* Eine helle Fläche (--stage) und eine dunkle Fläche statt sechs Tönen. */
:root{--surface-dark:#202923}
.stock-visual,.margin-visual{background:var(--stage)}
.sale-section,.closing{background:var(--surface-dark)}
/* Nur die BMW-Karte bleibt schräg; Kalkulation und Verkaufsunterlagen stehen gerade (Mujo 20.10.). */
.cost-sheet,.sale-panel{transform:none}
.product-page .product-figure,.product-page .product-costs,.product-page .product-documents,.product-page .product-dashboard{background:var(--stage)}
.header-login{display:none;font-size:13px}
.header-login:hover{text-decoration:underline;text-underline-offset:5px}

.price-list article .plan-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding-inline:8px;font-size:14px;font-weight:500;white-space:nowrap}
.price-list article .plan-link span{font-size:20px;line-height:1}
.price-list article .plan-link:hover{color:var(--green)}

/* Hauptbutton im dunklen Verkaufsabschnitt, gleiche Form wie im Abschluss. */
.sale-cta{display:inline-flex;align-items:center;gap:24px;min-height:48px;margin-top:35px;padding:13px 22px;border-radius:100px;background:#f4f5f4;color:#191d1a;font-size:14px;font-weight:500;line-height:1.5}
.sale-cta span{font-size:18px;line-height:1}
.sale-cta:hover{background:var(--stage)}
.sale-cta:focus-visible{outline:2px solid var(--stage);outline-offset:5px}

.product-page .product-hero-actions>a.hero-primary{text-decoration:none;padding-block:15px}

.stage-caption{font-size:11px}
.sale-copy .step-number{letter-spacing:0}
.faq-list p a{text-decoration:underline;text-underline-offset:3px}
.demo-more{margin:14px 0 0;font-size:12px;color:var(--app-sub)}

@media(max-width:760px){
  .header-login{display:block;margin-left:auto;margin-right:16px;padding-left:12px;font-size:12px}
  .sale-cta{margin-top:24px;font-size:13px;padding:13px 20px}
  .price-list article>.plan-link{margin-left:auto}
  .product-page .product-hero-actions>a.hero-primary{padding-block:14px}
  .stage-caption{flex-direction:column;gap:4px;font-size:10px}
  .stage-caption>span:first-child,.stage-caption>span:last-child{max-width:none;text-align:left}
}
/* Kopf mit Logo, Anmelden und "Kostenlos testen" einzeilig halten. */
@media(max-width:420px){
  .site-header .logo{width:100px;height:auto}
  .header-login{margin-right:12px}
  .header-cta{white-space:nowrap;padding-inline:12px}
  .header-cta span{display:none}
}
@media(max-width:340px){
  .site-header .logo{width:90px}
  .header-login{margin-right:10px;padding-left:10px}
  .header-cta{padding-inline:10px}
}