/* ==========================================================================
   landing.css — LP-spezifische Styles (nur index.html)
   Kvoto Landing Page · v1.0 (2026-06-13)

   Enthält ausschließlich Selektoren, die NICHT in kvoto.css abgedeckt sind:
   Hero, Browser-Mockup, Split-Screen, Mini-Mail, VS-Karten, Stat-Bar,
   Problem/Solution/Features/Steps/Example/Diff/Pricing/Proof/Trust/
   Founding/Final-Sektionen sowie LP-spezifische Animationen.

   Ladereihenfolge: kvoto.css ZUERST, dann landing.css (LP-Spezifisches gewinnt).
   ========================================================================== */


/* ---------- Hero ----------
   Dunkler Grund + Glow-Overlay kommen aus kvoto.css (.hero-dark).
   Hier nur Split-Grid-Layout + helle Typo-Overrides für den Mockup-Hero. */
.hero {
  position: relative;
  min-height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0 56px;
}
@media (max-width: 768px) {
  .hero { min-height: calc(100svh - 60px); padding: 40px 0 48px; }
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr 1.16fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
}

.hero__copy { max-width: 600px; }

.hero h1 {
  font-size: clamp(33px, 5.1vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: 22px;
}
.hero h1 .accent { color: #6cc4e0; }

.hero__sub {
  font-size: clamp(16px, 1.55vw, 18.5px);
  color: rgba(255, 255, 255, 0.74);
  margin-top: 24px;
  line-height: 1.72;
  max-width: 560px;
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero__trust {
  margin-top: 18px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__trust svg { width: 15px; height: 15px; color: #6cc4e0; flex: none; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 7px 15px 7px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6cc4e0;
  box-shadow: 0 0 0 3px rgba(108, 196, 224, 0.20);
}

/* ---------- Hero visual: split-screen configurator ---------- */
.hero__visual { position: relative; }

.browser {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
}
.browser__dots { display: flex; gap: 6px; }
.browser__dots i {
  width: 11px; height: 11px; border-radius: 50%; display: block;
}
.browser__dots i:nth-child(1){ background:#f87171; }
.browser__dots i:nth-child(2){ background:#fbbf24; }
.browser__dots i:nth-child(3){ background:#34d399; }
.browser__url {
  flex: 1;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--slate-500);
  display: flex; align-items: center; gap: 7px;
  overflow: hidden; white-space: nowrap;
}
.browser__url svg { width: 12px; height: 12px; color: var(--teal); flex:none; }

.split { display: grid; grid-template-columns: 0.92fr 1.08fr; min-height: 380px; }
@media (max-width: 480px){ .split { grid-template-columns: 1fr; } }

.split__form {
  padding: 18px 16px;
  background: #fff;
  border-right: 1px solid var(--slate-200);
}
@media (max-width: 480px){ .split__form { border-right: 0; border-bottom: 1px solid var(--slate-200); } }

.split__label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--slate-500);
  font-family: var(--font-head);
  margin-bottom: 5px;
  display: block;
}
.fld {
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--slate-800);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}
.fld--active {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(12, 79, 110,0.13);
  background: #fff;
}
.fld svg { width: 13px; height: 13px; color: var(--slate-400); }
.fld .mono { font-size: 11.5px; color: var(--slate-600); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.seg {
  display: flex; gap: 4px; background: var(--slate-100);
  border-radius: 8px; padding: 3px; margin-bottom: 12px;
}
.seg span {
  flex: 1; text-align: center; font-size: 10.5px; font-weight: 600;
  padding: 5px; border-radius: 6px; color: var(--slate-500);
}
.seg span.on { background: #fff; color: var(--slate-900); box-shadow: var(--shadow-soft); }

/* Mini live email preview inside hero */
.split__preview {
  background: var(--slate-50);
  padding: 16px 14px;
  display: flex;
  align-items: stretch;
}
.mini-mail {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 9px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: floaty 7s ease-in-out infinite;
}
.mini-mail__top {
  background: var(--slate-900);
  padding: 10px 13px;
  display: flex; align-items: center; gap: 8px;
}
.mini-mail__logo {
  width: 22px; height: 22px; border-radius: 6px; background: rgba(12, 79, 110,0.18);
  display: grid; place-items: center; color: var(--teal); flex:none;
}
.mini-mail__logo svg { width: 13px; height: 13px; }
.mini-mail__top b { color:#fff; font-size: 11px; font-family: var(--font-head); }
.mini-mail__top span { color: var(--slate-400); font-size: 9px; display:block; }
.mini-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; padding: 8px; }
.mini-gallery img { width: 100%; height: 38px; object-fit: cover; border-radius: 4px; }
.mini-mail__body { padding: 4px 13px 13px; font-size: 10.5px; }
.mini-line {
  display:flex; justify-content: space-between; padding: 4px 0;
  border-bottom: 1px dashed var(--slate-200); color: var(--slate-600);
}
.mini-line .mono { color: var(--slate-700); }
.mini-total {
  display:flex; justify-content: space-between; margin-top: 7px;
  padding-top: 8px; border-top: 2px solid var(--slate-900);
  font-weight: 700; color: var(--slate-900); font-size: 12px;
}
.mini-total .mono { color: var(--teal); }
.mini-badge {
  display:inline-flex; align-items:center; gap:5px;
  background: var(--teal-50); color: var(--teal-dark);
  font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  margin-top: 9px; font-family: var(--font-head);
  border: 1px solid var(--teal-100);
}
.mini-badge svg { width: 10px; height: 10px; }

/* live caret blink on active field value */
.caret::after {
  content:"";
  display:inline-block; width:1px; height:11px;
  background: var(--teal); margin-left:1px;
  vertical-align: -1px;
  animation: blink 1.05s steps(1) infinite;
}

/* before/after chips under hero visual */
.vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}
@media (max-width: 480px){ .vs { gap: 8px; } }
.vs-card {
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--slate-200);
}
.vs-card--before {
  background: var(--slate-100);
  color: var(--slate-500);
}
.vs-card--before .vs-ico { background: var(--slate-200); color: var(--slate-500); }
.vs-card--after {
  background: #fff;
  border-color: var(--teal-100);
  box-shadow: 0 6px 20px rgba(12, 79, 110,0.12);
}
.vs-card--after .vs-ico { background: var(--teal-50); color: var(--teal); }
.vs-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
}
.vs-ico svg { width: 17px; height: 17px; }
.vs-stamp { font-family: var(--font-mono); font-weight: 700; font-size: 15px; line-height: 1; }
.vs-card--before .vs-stamp { color: var(--slate-500); }
.vs-card--after .vs-stamp { color: var(--teal-dark); }
.vs-card small { font-size: 10px; display: block; line-height: 1.3; margin-top: 2px; }
.vs-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--slate-900); color: #fff;
  display: grid; place-items: center; flex: none;
}
.vs-arrow svg { width: 16px; height: 16px; }

/* ---------- Stat bar ---------- */
.stats {
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 820px){ .stats__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .stats__grid { grid-template-columns: 1fr; } }

.stat {
  padding: 40px 28px;
  border-right: 1px solid var(--slate-200);
}
.stats__grid .stat:last-child { border-right: 0; }
@media (max-width: 820px){
  .stat:nth-child(2){ border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom: 1px solid var(--slate-200); }
}
@media (max-width: 460px){
  .stat { border-right: 0; border-bottom: 1px solid var(--slate-200); }
  .stat:last-child { border-bottom: 0; }
}
/* Stat-Zahlen: JetBrains Mono GROSS */
.stat__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 60px);
  color: var(--brand-primary);
  letter-spacing: -0.035em;
  line-height: 0.98;
  display: flex;
  align-items: baseline;
  gap: 1px;
  flex-wrap: wrap;
}
/* Praefix/Suffix kleiner als die countUp-Zahl */
.stat__num .u {
  font-size: 0.44em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-primary);
  white-space: nowrap;
}
.stat__num .u--pre { margin-right: 2px; }
.stat__label {
  margin-top: 15px;
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.55;
}
.stats__foot {
  text-align: center;
  padding: 18px 24px 0;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate-500);
  font-family: var(--font-head);
}

/* ---------- Problem section ---------- */
.problem { background: #fff; }
.problem__grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 920px){ .problem__grid { grid-template-columns: 1fr; gap: 40px; } }

.problem p + p { margin-top: 18px; }
.problem strong { color: var(--slate-900); font-weight: 600; }

/* Belegter Faktenblock (Reaktionszeit-Effekt, mit Quelle).
   Eigener Name (NICHT .fact — das ist schon die Angebots-Eckdaten-Kachel). */
.stat-fact {
  margin-top: 26px;
  padding: 20px 24px;
  background: var(--brand-primary-l);
  border-left: 3px solid var(--brand-accent);
  border-radius: 12px;
}
.stat-fact__lead {
  font-size: clamp(15.5px, 1.6vw, 18px);
  color: var(--slate-900);
  line-height: 1.55;
  font-weight: 500;
}
.stat-fact__lead strong { color: var(--slate-900); font-weight: 700; }
.stat-fact__num { color: var(--amber-800); font-weight: 800; }
.stat-fact__sub {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--slate-700);
  line-height: 1.6;
}
.stat-fact__src {
  margin-top: 12px;
  font-size: 12px;
  color: var(--slate-500);
}

/* B2B-Buchender explizit + Trust-Trio (Beispiel-Abschnitt) */
.example__persona {
  max-width: 740px;
  margin-top: 16px;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--slate-600);
  line-height: 1.62;
}
.example__persona strong { color: var(--slate-900); font-weight: 600; }
.trust-trio {
  list-style: none;
  margin: 22px 0 4px;
  padding: 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.trust-trio li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  padding: 9px 17px 9px 13px;
  font-size: 14px;
  color: var(--slate-700);
  box-shadow: var(--shadow-soft);
}
.trust-trio li strong { color: var(--slate-900); font-weight: 600; }
.trust-trio svg { width: 17px; height: 17px; color: var(--teal); flex: none; }
@media (max-width: 560px) {
  .trust-trio { flex-direction: column; gap: 10px; }
}

/* Interaktiver Mini-ROI-Rechner (Pricing-Abschnitt) */
.roi-calc {
  max-width: 600px;
  margin: 0 auto 22px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-card);
  text-align: left;
}
.roi-calc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.roi-calc__q {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--slate-800);
}
.roi-calc__count {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--teal);
  flex: none;
}
.roi-calc__range {
  width: 100%;
  margin: 15px 0 16px;
  accent-color: var(--teal);
  cursor: pointer;
}
.roi-calc__out {
  text-align: center;
  border-top: 1px solid var(--slate-200);
  padding-top: 15px;
}
.roi-calc__big {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(27px, 4vw, 36px);
  color: var(--amber-800);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.roi-calc__lbl {
  display: block;
  margin: 6px auto 0;
  max-width: 460px;
  font-size: 13.5px;
  color: var(--slate-600);
  line-height: 1.5;
}

/* Mobile-Pitch: „Angebot von unterwegs" + Handy-Mockup */
.mobile-pitch { background: var(--slate-50); border-top: 1px solid var(--slate-200); }
.mobile-pitch__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 860px) {
  .mobile-pitch__grid { grid-template-columns: 1fr; gap: 36px; justify-items: center; }
  .mobile-pitch__text { text-align: center; }
}
.mpitch__list { list-style: none; margin: 22px 0 0; padding: 0; }
.mpitch__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 12px;
  font-size: 15px;
  color: var(--slate-700);
  line-height: 1.5;
}
@media (max-width: 860px) { .mpitch__list li { text-align: left; } }
.mpitch__list svg { width: 19px; height: 19px; color: var(--teal); flex: none; margin-top: 1px; }

/* Phone-Frame */
.phone {
  width: 244px;
  margin: 0 auto;
  background: var(--slate-900);
  border-radius: 36px;
  padding: 10px;
  box-shadow: var(--shadow-float);
  position: relative;
}
.phone__cam {
  position: absolute;
  top: 19px; left: 50%; transform: translateX(-50%);
  width: 44px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 2;
}
.phone__screen {
  background: #fff;
  border-radius: 27px;
  overflow: hidden;
  padding-top: 28px;
}
.phone__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--slate-100);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--slate-500);
  border-bottom: 1px solid var(--slate-200);
}
.phone__bar svg { width: 11px; height: 11px; color: var(--teal); flex: none; }
.phone__body { padding: 14px 14px 16px; }
.psplit__label {
  display: block;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--slate-500); font-weight: 700; font-family: var(--font-head);
  margin: 11px 0 4px;
}
.psplit__label:first-child { margin-top: 0; }
.pfld {
  border: 1px solid var(--slate-200); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: var(--slate-800); background: #fff;
}
.pfld--active { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(12, 79, 110, 0.10); }
.pmail {
  margin-top: 14px; padding: 11px 12px;
  background: var(--brand-primary-l); border-radius: 10px;
}
.pmail__row, .pmail__total {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--slate-700); padding: 3px 0;
}
.pmail__total {
  border-top: 1px solid var(--teal-100); margin-top: 4px; padding-top: 6px;
  font-weight: 700; color: var(--slate-900);
}
.psend {
  margin-top: 13px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--teal); color: #fff;
  border-radius: 9px; padding: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
}
.psend svg { width: 15px; height: 15px; flex: none; }

/* App-Screenshot-Anmutung: iOS-Statusleiste + App-Header (installierte PWA) */
.phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1px 16px 5px;
  font-family: var(--font-head); font-weight: 700; font-size: 11px; color: var(--slate-900);
}
.phone__sig { display: inline-flex; align-items: center; gap: 5px; color: var(--slate-900); }
.phone__sig svg { height: 10px; width: auto; display: block; }
.phone__appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid var(--slate-200);
}
.phone__logo { height: 16px; width: auto; display: block; }
.phone__ava { width: 22px; height: 22px; border-radius: 50%; background: var(--teal-50); border: 1px solid var(--teal-100); }
.mpitch__cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 22px;
  font-family: var(--font-head); font-weight: 700; font-size: 14.5px;
  color: var(--teal); text-decoration: none;
  transition: color .18s var(--ease), gap .18s var(--ease);
}
.mpitch__cta:hover { color: var(--teal-dark); gap: 12px; }
.mpitch__cta svg { width: 17px; height: 17px; flex: none; }

/* The messy "before" card */
.mess {
  position: relative;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 26px;
  transform: rotate(-1.4deg);
  box-shadow: var(--shadow-md);
}
.mess__doc {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 22px;
  filter: grayscale(1);
  opacity: 0.92;
}
.mess__doc .h { height: 9px; background: var(--slate-300); border-radius: 4px; margin-bottom: 9px; }
.mess__doc .h.w70 { width: 70%; }
.mess__doc .h.w50 { width: 50%; }
.mess__doc .h.w85 { width: 85%; }
.mess__doc .h.short { height: 7px; background: var(--slate-200); }
.mess__row {
  display:flex; justify-content: space-between; margin-top: 14px;
  padding-top: 12px; border-top: 1px dashed var(--slate-300);
}
.mess__row .h { margin: 0; }
.mess__stamp {
  position: absolute;
  top: 14px; right: 14px;
  background: #fff;
  border: 2px solid var(--red-500);
  color: var(--red-500);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  padding: 7px 13px;
  border-radius: 9px;
  transform: rotate(8deg);
  box-shadow: var(--shadow-soft);
}
.mess__tags { display:flex; gap:8px; flex-wrap: wrap; margin-top: 18px; }
.mess__tag {
  font-size: 11px; font-weight: 600; color: var(--slate-500);
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: 999px; padding: 5px 11px;
  display:flex; align-items:center; gap:6px;
}
.mess__tag svg { width: 12px; height: 12px; color: var(--red-500); }

/* ---------- Solution section ---------- */
.solution {
  background:
    radial-gradient(900px 400px at 15% 0%, rgba(12, 79, 110,0.05), transparent 60%),
    linear-gradient(to bottom, var(--slate-50), #fff);
}
.solution__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 920px){ .solution__grid { grid-template-columns: 1fr; gap: 40px; } }
.solution p + p { margin-top: 18px; }
.solution strong { color: var(--slate-900); font-weight: 600; }

.flowtag {
  display:inline-flex; align-items:center; gap: 8px;
  margin-top: 26px;
  background: var(--slate-900); color:#fff;
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  padding: 10px 16px; border-radius: 999px;
}
.flowtag svg { width: 15px; height: 15px; color: var(--teal); }

/* Reuse browser/split for solution but bigger preview */
.sol-visual .browser { box-shadow: var(--shadow-float); }
.sol-out {
  display:flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid var(--slate-200); background:#fff;
}
.sol-out span {
  flex:1; text-align:center; font-size: 10.5px; font-weight: 700;
  padding: 8px; border-radius: 8px;
  font-family: var(--font-head);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.sol-out span svg { width: 13px; height: 13px; }
.sol-out .s1 { background: var(--teal); color:#fff; }
.sol-out .s2 { background: var(--slate-100); color: var(--slate-700); }
.sol-out .s3 { background: var(--slate-100); color: var(--slate-700); }

/* ---------- Features bento ---------- */
.features { background: #fff; }
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 52px;
}
@media (max-width: 980px){ .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .bento { grid-template-columns: 1fr; } }

/* Features = grosser Mockup + Checkmark-Liste der Feature-Ueberschriften */
/* Funktionen = EINE Kachel: Mockup links, Feature-Checkliste rechts */
.feature-one { margin-top: 52px; padding: 30px; }
.feature-one:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--slate-200); }
.feature-one__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  align-items: center;
}
@media (max-width: 860px){ .feature-one__grid { grid-template-columns: 1fr; gap: 26px; } }
.feature-one__visual h3 { font-size: 19px; }
.feature-one .browser { margin-top: 16px; }
.feature-one .split { min-height: 300px; }

.flist { list-style: none; width: 100%; display: flex; flex-direction: column; }
.flist li {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 2px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 17px; letter-spacing: -0.01em; color: var(--slate-900);
  border-bottom: 1px solid var(--slate-200);
}
.flist li:last-child { border-bottom: 0; }
.flist li svg { width: 21px; height: 21px; flex: none; color: var(--teal); stroke-width: 3; }

.fcard {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
  position: relative;
  overflow: hidden;
}
.fcard:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--slate-300);
  transform: translateY(-3px);
}
.fcard__ico {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--teal-50);
  color: var(--teal);
  display: grid; place-items: center;
  margin-bottom: 16px;
  border: 1px solid var(--teal-100);
}
.fcard__ico svg { width: 22px; height: 22px; }
.fcard h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.fcard p { margin-top: 9px; font-size: 13.5px; color: var(--slate-600); line-height: 1.6; }

/* checkmark bullets inside feature cards */
.fbul { list-style: none; margin: 13px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fbul li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--slate-600); line-height: 1.45; }
.fbul li svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--teal); stroke-width: 3; }

/* Big live-preview card spans 2 cols + 2 rows */
.fcard--feature {
  grid-column: span 2;
  grid-row: span 2;
  background: #fff;
  border-color: var(--slate-200);
  color: var(--slate-900);
  display: flex;
  flex-direction: column;
  padding: 26px;
}
@media (max-width: 560px){ .fcard--feature { grid-column: span 1; grid-row: span 1; } }
.fcard--feature::after { content: none; }
.fcard--feature h3 { color: var(--slate-900); font-size: 19px; position: relative; }
.fcard--feature p { color: var(--slate-600); position: relative; }
.fcard__mock {
  margin-top: auto;
  position: relative;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  padding: 13px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 11px;
  box-shadow: 0 12px 30px rgba(17,19,24,0.10);
}
@media (max-width: 420px){ .fcard__mock { grid-template-columns: 1fr; } }
/* left: mini configurator form (helles App-Fenster, klar lesbar) */
.fmock-form { display:flex; flex-direction:column; gap:5px; min-width:0; }
.fmf-cap { font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--slate-500); }
.fmf-fld {
  font-size:11.5px; font-weight:600; color: var(--slate-800);
  background:#fff; border:1px solid var(--slate-300);
  border-radius:6px; padding:6px 9px; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fmf-fld--on { border-color: var(--teal); background: var(--teal-50); color: var(--teal-dark); box-shadow: 0 0 0 2px rgba(12, 79, 110,0.14); }
.fmock-form .mono { color: inherit; font-weight:700; }

/* right: gerenderte Mail mit echter Summe */
.fmock-mail { background:#fff; border:1px solid var(--slate-200); border-radius:8px; overflow:hidden; min-width:0; box-shadow: 0 2px 8px rgba(17,19,24,0.07); }
.fmock-mail .fm-top { background: var(--slate-800); height:22px; display:flex; align-items:center; padding:0 10px; gap:5px; }
.fmock-mail .fm-top i { width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,0.35); display:block; }
.fmock-mail .fm-top b { font-family: var(--font-mono); font-size:8.5px; font-weight:600; color: rgba(255,255,255,0.72); margin-left:auto; }
.fmock-mail .fm-imgs { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; padding:7px; }
.fmock-mail .fm-imgs img { width:100%; height:30px; object-fit:cover; border-radius:4px; }
.fmock-mail .fm-body { padding:9px 11px 11px; }
.fmm-cap { display:block; font-size:10.5px; font-weight:700; color: var(--slate-800); margin-bottom:7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fmm-row { display:flex; justify-content:space-between; gap:6px; font-size:10.5px; color: var(--slate-600); margin:4px 0; }
.fmm-row .mono { color: var(--slate-600); font-weight:600; }
.fmm-total { display:flex; justify-content:space-between; gap:6px; font-size:12px; font-weight:800; color: var(--slate-900); border-top:1px solid var(--slate-200); margin-top:7px; padding-top:7px; }
.fmm-total .mono { color: var(--teal); }
.fcard--feature .fcard__out { display:flex; gap:6px; margin-top:14px; position:relative; }
.fcard--feature .fcard__out span {
  font-size: 10.5px; font-weight: 700; font-family: var(--font-head);
  padding: 7px 11px; border-radius: 8px; display:flex; align-items:center; gap:5px;
}
.fcard--feature .fcard__out span svg { width:12px; height:12px; }
.fcard--feature .fcard__out .o1 { background: var(--teal); color:#fff; }
.fcard--feature .fcard__out .o2 { background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--slate-200); }
.fcard--feature .fcard__out .o3 { background: var(--slate-100); color: var(--slate-600); border: 1px solid var(--slate-200); }

/* number format mono inside feature copy */
.fcard .mono { color: var(--teal); font-weight: 600; }

/* ---------- How it works ---------- */
.how { background: var(--slate-50); border-top: 1px solid var(--slate-200); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 56px;
  position: relative;
}
@media (max-width: 860px){ .steps { grid-template-columns: 1fr; gap: 34px; max-width: 360px; margin-inline: auto; } }

/* dashed timeline through the badge centers */
.steps::before {
  content:"";
  position: absolute;
  top: 27px; left: 17%; right: 17%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 8px, transparent 8px 16px);
  opacity: 0.45;
  z-index: 0;
}
@media (max-width: 860px){ .steps::before { display: none; } }

.step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 8px;
}
.step__num {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--teal);
  color: var(--slate-900);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 19px;
  box-shadow: 0 6px 18px rgba(12, 79, 110,0.16);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.step:hover .step__num { transform: translateY(-3px); box-shadow: 0 11px 26px rgba(12, 79, 110,0.24); }
.step__time {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--teal-dark); letter-spacing: .03em;
  margin-bottom: 8px;
}
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 7px; letter-spacing: -0.01em; }
.step p { font-size: 13.5px; color: var(--slate-600); line-height: 1.6; max-width: 30ch; margin-inline: auto; }
.step .mono { color: var(--slate-700); font-weight: 600; }

/* ---------- Example offer / big email ---------- */
.example { background: #fff; }
.example__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 52px;
  align-items: start;
  margin-top: 44px;
}
@media (max-width: 1000px){ .example__grid { grid-template-columns: 1fr; gap: 38px; } }
.example__text p + p { margin-top: 16px; }
.example__text strong { color: var(--slate-900); font-weight: 600; }
.keysentence {
  margin-top: 24px;
  background: var(--slate-900);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
}
.keysentence::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width: 4px; background: var(--teal);
}
.keysentence .accent { color: var(--teal); }

/* The real email render */
.mailframe {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}
.mail__toolbar {
  display:flex; align-items:center; gap: 9px;
  padding: 12px 16px; background: var(--slate-100);
  border-bottom: 1px solid var(--slate-200);
}
.mail__toolbar .dots { display:flex; gap:6px; }
.mail__toolbar .dots i { width:11px;height:11px;border-radius:50%; display:block; }
.mail__toolbar .dots i:nth-child(1){background:#f87171;}
.mail__toolbar .dots i:nth-child(2){background:#fbbf24;}
.mail__toolbar .dots i:nth-child(3){background:#34d399;}
.mail__toolbar .from {
  font-size: 12px; color: var(--slate-500); font-family: var(--font-mono);
  display:flex; align-items:center; gap: 7px;
}
.mail__toolbar .from svg { width: 13px; height: 13px; color: var(--teal); }

.mail__head {
  background: var(--slate-900);
  padding: 22px 26px;
  display:flex; align-items:center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.mail__brand { display:flex; align-items:center; gap: 11px; }
.mail__brand .m {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(12, 79, 110,0.16);
  display:grid; place-items:center; color: var(--teal); border:1px solid rgba(12, 79, 110,0.3);
}
.mail__brand .m svg { width: 22px; height: 22px; }
.mail__brand b { color:#fff; font-family: var(--font-head); font-size: 17px; }
.mail__brand span { color: var(--slate-400); font-size: 11.5px; display:block; }
.mail__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--teal); background: rgba(12, 79, 110,0.12);
  padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(12, 79, 110,0.25);
}
.mail__subject {
  padding: 16px 26px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--slate-50);
}
.mail__subject small { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--slate-500); font-weight: 700; font-family: var(--font-head); }
.mail__subject b { display:block; margin-top: 4px; color: var(--slate-900); font-size: 15px; font-family: var(--font-head); }

.mail__gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 18px 26px;
}
.mail__gallery img { width:100%; height: 92px; object-fit: cover; border-radius: 8px; }
@media (max-width: 480px){ .mail__gallery img { height: 64px; } }

.mail__facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 4px 26px 18px;
}
@media (max-width: 560px){ .mail__facts { grid-template-columns: 1fr 1fr; } }
.fact {
  background: var(--slate-50); border:1px solid var(--slate-200);
  border-radius: 9px; padding: 11px 12px;
}
.fact small { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-500); font-weight: 700; display:block; font-family: var(--font-head); }
.fact b { font-size: 13px; color: var(--slate-900); font-family: var(--font-head); display:block; margin-top: 3px; }

.mail__table { padding: 4px 26px 22px; }
.ptable { width: 100%; border-collapse: collapse; }
.ptable td { padding: 9px 0; font-size: 13px; border-bottom: 1px solid var(--slate-100); color: var(--slate-600); }
.ptable td:last-child { text-align: right; font-family: var(--font-mono); color: var(--slate-800); font-weight: 600; }
.ptable .muted td { color: var(--slate-400); font-size: 12px; }
.ptable .discount td:last-child { color: var(--teal-dark); }
.ptable .sep td { border-bottom: 2px solid var(--slate-200); padding-bottom: 4px; }
.ptable .grand td {
  padding-top: 14px; font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--slate-900);
  border-bottom: 0;
}
.ptable .grand td:last-child { font-family: var(--font-mono); color: var(--slate-900); font-size: 17px; }
.ptable .vat td { font-size: 11.5px; color: var(--slate-500); padding-top: 2px; border-bottom: 0; }
.ptable .vat td:last-child { color: var(--slate-500); }
.ptable .deposit td { color: var(--slate-500); }
.ptable .deposit td:last-child { color: var(--slate-600); }

.mail__terms {
  padding: 14px 26px 6px; display: grid; gap: 9px;
  border-top: 1px solid var(--slate-100);
}
.mterm { font-size: 12px; line-height: 1.45; }
.mterm b {
  display: block; font-family: var(--font-head);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--amber-800); margin-bottom: 1px;
}
.mterm span { color: var(--slate-600); }

.mail__foot {
  background: var(--slate-50); border-top: 1px solid var(--slate-200);
  padding: 16px 26px; display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 12px;
}
.mail__foot small { font-size: 11px; color: var(--slate-500); line-height: 1.5; }
.mail__foot .lang { display:flex; gap: 5px; }
.mail__foot .lang span {
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; font-family: var(--font-mono);
}
.mail__foot .lang .on { background: var(--teal); color: #fff; }
.mail__foot .lang .off { background: var(--slate-200); color: var(--slate-500); }

/* float anchor for mailframe */
.mailfloat { position: relative; }
.mailfloat .float-note {
  position: absolute; top: -16px; right: -10px; z-index: 3;
  background: #fff; border: 1px solid var(--teal-100);
  box-shadow: var(--shadow-md);
  border-radius: 999px; padding: 8px 14px;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--teal-dark);
  display:flex; align-items:center; gap:7px;
}
.mailfloat .float-note svg { width: 14px; height: 14px; }
@media (max-width: 480px){ .mailfloat .float-note { display:none; } }

/* ---------- Differentiation ---------- */
.diff {
  background: var(--slate-50);
  border-top: 1px solid var(--slate-200);
}
.diff__grid { display:grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items:center; }
@media (max-width: 920px){ .diff__grid { grid-template-columns: 1fr; gap: 38px; } }
.diff p + p { margin-top: 18px; }
.diff strong { color: var(--slate-900); font-weight: 600; }

.compare { display:flex; flex-direction: column; gap: 12px; }
.crow {
  display:flex; align-items:center; gap: 14px;
  background:#fff; border:1px solid var(--slate-200);
  border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-soft);
}
.crow__ico { width: 40px; height: 40px; border-radius: 10px; flex:none; display:grid; place-items:center; }
.crow--no .crow__ico { background: var(--slate-100); color: var(--slate-400); }
.crow--yes { border-color: var(--teal-100); box-shadow: 0 6px 20px rgba(12, 79, 110,0.10); }
.crow--yes .crow__ico { background: var(--teal-50); color: var(--teal); }
.crow__ico svg { width: 20px; height: 20px; }
.crow b { font-family: var(--font-head); font-size: 14.5px; color: var(--slate-900); display:block; }
.crow span { font-size: 12.5px; color: var(--slate-500); display:block; margin-top: 2px; }
.crow--no b { color: var(--slate-500); }

/* ---------- Pricing ---------- */
.pricing { background: #fff; }
.pricing__intro {
  max-width: 720px; margin: 22px auto 0; text-align: center;
  color: var(--slate-600); font-size: 15.5px; line-height: 1.7;
}
.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 52px;
  align-items: stretch;
}
@media (max-width: 1000px){ .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .tiers { grid-template-columns: 1fr; } }

.tier {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
  position: relative;
}
.tier:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--slate-300); }
.tier__name { font-family: var(--font-head); font-weight: 800; font-size: 17px; color: var(--slate-900); letter-spacing: -0.01em; }
.tier__units { font-size: 12px; color: var(--slate-500); margin-top: 4px; font-weight: 500; }
.tier__price { margin-top: 16px; display:flex; align-items: baseline; gap: 4px; min-height: 46px; }
.tier__price b { font-family: var(--font-mono); font-weight: 700; font-size: clamp(34px, 4vw, 42px); color: var(--slate-900); letter-spacing: -0.03em; line-height: 1; }
.tier__price .per { font-size: 13px; color: var(--slate-500); font-weight: 500; }
/* Beta: Preisbetraege verborgen — Coming-soon-Pill anstelle des Betrags */
.tier__price--soon { align-items: center; }
.tier__soon {
  display: inline-flex; align-items: center;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  color: var(--slate-700);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.tier--featured .tier__soon {
  background: var(--brand-accent-l);
  border-color: #f3d9b0;
  color: var(--amber-800);
}
/* Beta: Hinweis anstelle des Billing-Toggles */
.pricing__coming-note {
  margin: 26px auto 0; max-width: 640px; text-align: center;
  font-size: 13px; color: var(--slate-500); font-weight: 500;
}
/* PAngV: netto gross (im Preis), brutto klein darunter */
.tier__gross {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--slate-500);
  line-height: 1.45;
  min-height: 17px;
}
.tier__gross .mono { color: var(--slate-600); font-weight: 600; }
/* Jahres-Ersparnis-Zeile unter dem Preis (nur sichtbar im Jahres-Modus) */
.tier__save {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-head);
  color: var(--amber-800);
  display: inline-flex; align-items: center; gap: 6px;
  letter-spacing: 0.01em;
}
.tier__save svg { width: 13px; height: 13px; }
.tier__desc { margin-top: 16px; font-size: 13px; color: var(--slate-600); line-height: 1.6; }

/* Feature-Liste je Tier */
.tier__incl {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--slate-200);
  font-size: 12px; font-weight: 700; color: var(--slate-700);
  font-family: var(--font-head); letter-spacing: 0.01em;
}
.tier__feats { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tier__feats li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--slate-600); line-height: 1.45; }
.tier__feats li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brand-primary); }
.tier__feats li .mono { color: var(--slate-700); font-weight: 600; }
.tier--featured .tier__feats li svg { color: var(--brand-primary); }
.tier .btn { margin-top: 22px; width: 100%; }

.tier--featured {
  border: 2px solid var(--brand-primary);
  box-shadow: 0 20px 56px rgba(12, 79, 110, 0.20);
  transform: translateY(-8px);
}
.tier--featured:hover { transform: translateY(-12px); }
@media (max-width: 1000px){ .tier--featured, .tier--featured:hover { transform: none; } }
.tier__badge {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--amber-800);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(169, 100, 20, 0.40);
  white-space: nowrap;
}

/* ---- Billing toggle (Monatlich / Jaehrlich, Default = jaehrlich) ---- */
.billing-toggle {
  display: inline-flex; align-items: center; gap: 0;
  margin: 30px auto 0;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  padding: 4px;
  position: relative;
}
.billing-toggle__opt {
  position: relative; z-index: 1;
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 13.5px;
  color: var(--slate-600);
  padding: 9px 20px; border-radius: 999px;
  transition: color .25s var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
}
.billing-toggle__opt[aria-pressed="true"] { color: #fff; }
.billing-toggle__opt:hover:not([aria-pressed="true"]) { color: var(--slate-900); }
.billing-toggle__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  border-radius: 999px;
  background: var(--brand-primary);
  box-shadow: 0 4px 12px rgba(12, 79, 110, 0.30);
  transition: transform .28s var(--ease), width .28s var(--ease);
  z-index: 0;
}
.billing-toggle__save {
  font-size: 10.5px; font-weight: 700;
  background: var(--brand-accent-l); color: var(--amber-800);
  padding: 2px 7px; border-radius: 999px; letter-spacing: 0.01em;
}
.billing-toggle__opt[aria-pressed="true"] .billing-toggle__save {
  background: rgba(255,255,255,0.22); color: #fff;
}

/* ---- ROI call-out box (Amber) ueber den Cards ---- */
.roi-box {
  max-width: 760px; margin: 36px auto 0;
  background: var(--brand-accent-l);
  border: 1px solid #f3d9b0;
  border-radius: var(--radius);
  padding: 18px 24px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow-soft);
}
.roi-box__ico {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  background: var(--brand-accent); color: #fff;
  display: grid; place-items: center;
}
.roi-box__ico svg { width: 22px; height: 22px; }
.roi-box p { font-size: 14px; color: var(--slate-700); line-height: 1.55; }
.roi-box p strong { color: var(--amber-800); font-weight: 700; }
.roi-box .mono { font-family: var(--font-mono); font-weight: 700; color: var(--amber-800); }
@media (max-width: 560px){ .roi-box { flex-direction: column; text-align: center; gap: 12px; } }

/* ---- Founding-Rabatt-Hinweis dezent ueber Cards ---- */
.pricing__founding-note {
  max-width: 760px; margin: 14px auto 0; text-align: center;
  font-size: 12.5px; color: var(--slate-500);
}
.pricing__founding-note a { color: var(--amber-800); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Risikoumkehr-Zeile unter den Cards ---- */
.risk-reversal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  margin: 30px auto 0; max-width: 820px;
}
.risk-reversal span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--slate-700);
}
.risk-reversal svg { width: 16px; height: 16px; color: var(--brand-primary); flex: none; }

.pricing__note {
  margin-top: 34px;
  max-width: 760px;
  margin-left: auto; margin-right: auto;
  text-align: center;
}
.pricing__note .secure {
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 13px; color: var(--slate-600); font-weight: 500;
  background: var(--slate-50); border:1px solid var(--slate-200);
  padding: 9px 16px; border-radius: 999px;
}
.pricing__note .secure svg { width: 15px; height: 15px; color: var(--teal); }
.pricing__note .anchor {
  margin-top: 18px; font-size: 14px; color: var(--slate-600); line-height: 1.65;
}
.pricing__note .anchor strong { color: var(--slate-900); font-weight: 600; }

/* ---------- Final CTA ---------- */
.final {
  background: var(--slate-900);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.final::before {
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(600px 300px at 50% 0%, rgba(12, 79, 110,0.18), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
.final__inner { position: relative; max-width: 680px; margin: 0 auto; }
.final__mark {
  width: 60px; height: 60px; border-radius: 16px;
  background: rgba(12, 79, 110,0.16); border: 1px solid rgba(12, 79, 110,0.35);
  color: var(--teal);
  display: grid; place-items: center;
  margin: 0 auto 26px;
  box-shadow: 0 0 0 8px rgba(12, 79, 110,0.05);
}
.final__mark svg { width: 30px; height: 30px; }
.final h2 { color:#fff; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1; }
.final h2 .accent { color: var(--teal); }
.final p {
  color: var(--slate-300);
  font-size: 17px;
  line-height: 1.7;
  margin-top: 22px;
}
.final .btn { margin-top: 32px; }
.final__trust {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--slate-400);
  max-width: 540px; margin-left:auto; margin-right:auto;
  line-height: 1.6;
}

/* ---------- Branchenbeweis (industry proof) ---------- */
.proof { background: #fff; }
.proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 50px;
}
@media (max-width: 820px){ .proof__grid { grid-template-columns: 1fr; } }
.qa {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.qa:hover { box-shadow: var(--shadow-md); border-color: var(--slate-300); transform: translateY(-3px); }
.qa h3 {
  font-size: 16px; font-weight: 700; letter-spacing: -0.015em;
  display: flex; align-items: flex-start; gap: 11px; line-height: 1.35;
}
.qa h3 .qa__q {
  flex: none; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
  background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-dark);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px;
}
.qa p { margin-top: 11px; font-size: 13.5px; color: var(--slate-600); line-height: 1.65; }
.qa p strong { color: var(--slate-900); font-weight: 600; }
.qa .mono { color: var(--teal-dark); font-weight: 600; }

.signalwords {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; gap: 9px;
  justify-content: center;
}
.signalwords .sw {
  font-size: 12px; font-weight: 600; color: var(--slate-600);
  background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: 999px; padding: 7px 14px;
  font-family: var(--font-head);
}

/* ---------- Trust strip ---------- */
.trust { background: var(--slate-50); border-top: 1px solid var(--slate-200); }
.trust__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 920px){ .trust__grid { grid-template-columns: 1fr; gap: 36px; } }
.trust p + p { margin-top: 18px; }
.trust strong { color: var(--slate-900); font-weight: 600; }

.trust__badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tbadge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-soft);
}
.tbadge__ico {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal);
  display: grid; place-items: center;
}
.tbadge__ico svg { width: 20px; height: 20px; }
.tbadge b { font-family: var(--font-head); font-size: 13.5px; color: var(--slate-900); display: block; }
.tbadge span { font-size: 11.5px; color: var(--slate-500); display: block; margin-top: 1px; }

/* Trust-Tabelle */
.trust__table {
  width: 100%; border-collapse: collapse; margin-top: 26px;
  background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.trust__table tr { border-bottom: 1px solid var(--slate-100); }
.trust__table tr:last-child { border-bottom: 0; }
.trust__table th {
  text-align: left; vertical-align: top;
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  color: var(--slate-700); padding: 13px 14px 13px 16px;
  white-space: nowrap; width: 38%;
}
.trust__table td {
  padding: 13px 16px 13px 6px; font-size: 13px; color: var(--slate-600); line-height: 1.5;
}
.trust__table td strong { color: var(--slate-900); font-weight: 600; }
.trust__table .mono { font-family: var(--font-mono); font-weight: 600; color: var(--slate-700); }
@media (max-width: 480px){
  .trust__table th, .trust__table td { display: block; width: auto; white-space: normal; }
  .trust__table th { padding-bottom: 2px; }
  .trust__table td { padding-top: 0; padding-left: 16px; padding-bottom: 13px; }
}

.callcard {
  background: var(--slate-900); color: #fff;
  border-radius: var(--radius-lg); padding: 30px 32px;
  box-shadow: var(--shadow-float);
  position: relative; overflow: hidden;
}
.callcard::after {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 18px 18px; pointer-events: none;
}
.callcard__ico {
  width: 50px; height: 50px; border-radius: 13px; position: relative;
  background: rgba(12, 79, 110,0.16); border: 1px solid rgba(12, 79, 110,0.35); color: var(--teal);
  display: grid; place-items: center; margin-bottom: 18px;
}
.callcard__ico svg { width: 26px; height: 26px; }
.callcard small {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: var(--slate-400); font-family: var(--font-head); position: relative;
}
.callcard__num {
  display: inline-block; margin-top: 8px; position: relative;
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(22px, 3vw, 28px); color: #fff; letter-spacing: -0.01em;
}
.callcard__num:hover { color: var(--teal); }
.callcard p { color: var(--slate-300); font-size: 13.5px; margin-top: 12px; position: relative; line-height: 1.6; }

/* ---------- Founder + Founding-Member section ---------- */
.founding {
  background:
    radial-gradient(800px 360px at 80% 0%, rgba(12, 79, 110, 0.06), transparent 60%),
    var(--white);
  border-top: 1px solid var(--slate-200);
}
.founding__card {
  background: #fff;
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 44px rgba(12, 79, 110, 0.12);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: stretch;
}
@media (max-width: 920px){ .founding__card { grid-template-columns: 1fr; gap: 34px; padding: 30px 26px; } }
.founding__tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--amber-50); color: var(--amber-800);
  border: 1px solid #f3d9b0;
  font-family: var(--font-head); font-weight: 700; font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.founding__tag svg { width: 14px; height: 14px; }
.founding h2 { font-size: clamp(24px, 3.2vw, 32px); }
.founding p { margin-top: 16px; color: var(--slate-600); font-size: 15px; line-height: 1.7; }
.founding p strong { color: var(--slate-900); font-weight: 600; }

/* Vertikale Trennlinie zwischen Gruender (links) und Founding (rechts) */
.founding__col--left {
  padding-right: 44px;
  border-right: 1px solid var(--slate-200);
  display: flex; flex-direction: column;
  min-width: 0;
}
@media (max-width: 920px){
  .founding__col--left {
    padding-right: 0; padding-bottom: 30px;
    border-right: 0; border-bottom: 1px solid var(--slate-200);
  }
}

/* ---- Gruender-Block ---- */
.founder { display: flex; align-items: center; gap: 18px; margin-top: 4px; }
.founder__photo {
  width: 96px; height: 96px; flex: none; border-radius: 50%;
  border: 2px solid var(--brand-accent);
  padding: 3px; background: #fff;
}
.founder__photo img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
/* Sauberer Foto-PLATZHALTER */
.founder__ph {
  width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--brand-primary-l), #d9e8f1 70%);
  color: var(--brand-primary);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 30px;
  letter-spacing: -0.02em; position: relative; overflow: hidden;
}
.founder__ph svg { width: 46px; height: 46px; opacity: 0.92; }
.founder__id b {
  font-family: var(--font-head); font-weight: 800; font-size: 18px;
  color: var(--slate-900); display: block; letter-spacing: -0.01em;
}
.founder__id .role { font-size: 13px; color: var(--slate-600); display: block; margin-top: 3px; line-height: 1.4; }
.founder__link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--brand-primary);
}
.founder__link:hover { color: var(--brand-primary-d); text-decoration: underline; text-underline-offset: 2px; }
.founder__link svg { width: 15px; height: 15px; }
.founder__quote {
  margin-top: 22px; font-size: 15px; color: var(--slate-700); line-height: 1.7;
  border-left: 3px solid var(--brand-accent); padding-left: 16px;
}
.founder__quote strong { color: var(--slate-900); font-weight: 600; }

/* ---- Founding-Member (rechts): Zaehler + Perks + CTA + Deadline ---- */
.founding__col--right { display: flex; flex-direction: column; min-width: 0; }
.counter { margin-bottom: 22px; }
.counter__bar-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--slate-700);
}
.counter__num {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 46px); color: var(--brand-primary);
  letter-spacing: -0.03em; line-height: 1;
}
.counter__of { font-family: var(--font-mono); font-size: 18px; color: var(--slate-500); font-weight: 600; }
.counter__track {
  margin-top: 12px; height: 9px; border-radius: 999px;
  background: var(--slate-100); border: 1px solid var(--slate-200); overflow: hidden;
}
.counter__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-primary), #1e6f93);
  border-radius: 999px;
  transition: width 1.1s var(--ease);
}
.founding__perks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.founding__perks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; color: var(--slate-700); line-height: 1.5;
}
.founding__perks li b { color: var(--slate-900); font-weight: 600; font-family: var(--font-head); }
.founding__perks .pico {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--brand-primary);
  display: grid; place-items: center;
}
.founding__perks .pico svg { width: 15px; height: 15px; }
.founding__cta { margin-top: 24px; }
.founding__cta .btn { width: 100%; white-space: normal; }
.founding__deadline {
  margin-top: 12px; font-size: 12.5px; color: var(--slate-500);
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
}
.founding__deadline svg { width: 14px; height: 14px; color: var(--brand-accent); flex: none; }

/* ---- Testimonial-Placeholder-Grid ---- */
.testimonials-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 28px;
}
@media (max-width: 820px){ .testimonials-grid { grid-template-columns: 1fr; } }
.tcard {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-card);
}
.tcard__stars { display: flex; gap: 3px; color: var(--brand-accent); margin-bottom: 12px; }
.tcard__stars svg { width: 15px; height: 15px; }
.tcard__text { font-size: 14px; color: var(--slate-700); line-height: 1.6; }
.tcard__who { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.tcard__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-primary-l); flex: none; }
.tcard__who b { font-family: var(--font-head); font-size: 13.5px; color: var(--slate-900); display: block; }
.tcard__who span { font-size: 12px; color: var(--slate-500); display: block; }

/* ---- LP-spezifische cta-micro-Overrides (ergaenzen kvoto.css) ---- */
.tier .cta-micro { margin-top: 12px; font-size: 11.5px; align-items: flex-start; }
.tier .cta-micro svg { margin-top: 2px; }

/* ---- Hero-Visual Glow-Halo (auf das Browser-Mockup im Hero) ---- */
.hero__visual .browser { animation: glow-pulse 4s ease-in-out infinite; }

/* ---- Pill typewriter: rotierende Kategorie (JS wechselt Text) ---- */
.pill__rotator {
  display: inline-block;
  white-space: nowrap;
  color: var(--amber-800);
  font-weight: 700;
  padding-right: 4px;
  border-right: 1.5px solid var(--brand-accent);
  animation: tw-caret 0.9s steps(1) infinite;
  transition: opacity .18s var(--ease);
}
.pill__rotator.swap { opacity: 0; }

/* ---- Before/After wipe-lr: enthuellt die "After"-Karte beim Scroll ---- */
.vs-card--after {
  position: relative;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease);
}
.vs.in .vs-card--after { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  /* statt Animationen: Endzustaende sofort sichtbar */
  .hero__visual .browser { animation: none; }
  .pill__rotator { animation: none; border-right: 0; width: auto; }
  .vs-card--after { clip-path: none; transition: none; }
}

/* ---------- LP-spezifische Keyframes ---------- */
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
/* Hero-Visual-Halo: sehr dezenter Puls alle 4s */
@keyframes glow-pulse {
  0%,100% { box-shadow: var(--shadow-float); }
  50%     { box-shadow: var(--shadow-float), var(--shadow-glow); }
}
/* typewriter-Pill: Caret-Blink */
@keyframes tw-caret {
  0%,100% { border-right-color: var(--brand-accent); }
  50%     { border-right-color: transparent; }
}


/* ==========================================================================
   REDESIGN 2026-06-15 — bildgeführte, kürzere Startseite
   Neue/zusammengeführte Sektionen: show (Vorher/Nachher mit echter Mail),
   niche (Für Monteure gemacht), pricing--teaser, trust-strip, echte Fotos.
   ========================================================================== */

/* ---- Echte Fotos in den Mockup-Galerien (object-fit ist Basis schon gesetzt) ---- */
.mini-gallery--photo img { height: 46px; }
.mail__gallery--photo img { background: var(--slate-100); }

/* ---- Sektion 3: "Ihr Angebot im Posteingang" (Problem+Lösung+Beispiel) ---- */
.show__grid {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: 52px;
  align-items: start;
  margin-top: 48px;
}
@media (max-width: 1000px){ .show__grid { grid-template-columns: 1fr; gap: 36px; } }
.show__text .lead { margin-top: 0; }
.show__text .stat-fact { margin-top: 24px; }
.show__buyer-lead {
  margin-top: 26px;
  font-size: 15px;
  color: var(--slate-600);
  font-weight: 500;
}
.show__text .trust-trio { margin-top: 14px; flex-direction: column; align-items: stretch; gap: 10px; }
.show__text .keysentence { margin-top: 24px; }

/* ---- Sektion 4: "Für Monteurunterkünfte gemacht" ---- */
.niche { background: var(--brand-primary-l); border-top: 1px solid var(--teal-100); }

.apt-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 48px 0 40px;
}
.apt-gallery figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--slate-200);
}
.apt-gallery img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.apt-gallery figure:hover img { transform: scale(1.05); }
@media (max-width: 760px){
  .apt-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 36px 0 32px; }
}

.nichegrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 920px){ .nichegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .nichegrid { grid-template-columns: 1fr; } }

.nichecard {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.nichecard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--teal-100); }
.nichecard__ico {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--teal-50); border: 1px solid var(--teal-100); color: var(--teal-dark);
  display: grid; place-items: center; margin-bottom: 16px;
}
.nichecard__ico svg { width: 22px; height: 22px; }
.nichecard h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -0.015em; }
.nichecard p { margin-top: 9px; font-size: 13.5px; color: var(--slate-600); line-height: 1.6; }
.nichecard p strong { color: var(--slate-900); font-weight: 600; }

.niche__noportal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  justify-content: center; text-align: center;
  margin: 32px auto 0; max-width: 760px;
  font-size: 15px; color: var(--slate-700); line-height: 1.6;
}
.niche__noportal > svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
.niche__noportal strong { color: var(--slate-900); font-weight: 700; }
.niche__more {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  color: var(--teal-dark); white-space: nowrap;
}
.niche__more svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.niche__more:hover svg { transform: translateX(3px); }

/* ---- Sektion 8: Preise-Teaser (statt 4 Tarif-Karten) ---- */
.pricing--teaser .roi-calc { margin-top: 44px; }
.pricing__teaser-cta { text-align: center; margin-top: 30px; }
.pricing__teaser-cta .cta-micro { margin-top: 16px; }
.pricing__teaser-cta .cta-micro a { color: var(--teal-dark); font-weight: 600; }

/* ---- Sektion 10: kompakter Trust-Strip (statt großer Tabelle) ---- */
.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 28px;
  max-width: 920px; margin: 40px auto 0;
  padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.14);
}
.trust-strip span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: rgba(255,255,255,0.78); font-weight: 500;
}
.trust-strip svg { width: 17px; height: 17px; color: #6cc4e0; flex: none; }
.trust-strip a { color: #fff; font-weight: 600; }
@media (max-width: 600px){
  .trust-strip { flex-direction: column; align-items: flex-start; gap: 13px; }
}

/* ---- FAQ-Footer-Zeile ---- */
.faq__more {
  text-align: center; margin: 32px auto 0; max-width: 720px;
  font-size: 14.5px; color: var(--slate-600);
}
.faq__more a { color: var(--teal-dark); font-weight: 600; }

/* ---- Hero: Onboarding-in-10-Min-Stepper ---- */
.hero-onboard {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-onboard__head {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.13em; color: #eab464;
  margin-bottom: 20px;
}
.hero-onboard__head svg { width: 16px; height: 16px; }
.hero-onboard__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.hero-onboard__steps li {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.88); font-size: 14.5px; font-weight: 600;
  line-height: 1.3; font-family: var(--font-head); letter-spacing: -0.01em;
}
.hero-onboard__steps .n {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: rgba(108,196,224,0.15); border: 1px solid rgba(108,196,224,0.45);
  color: #6cc4e0; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
}
.hero-onboard__steps small {
  display: block; margin-top: 2px;
  color: rgba(255,255,255,0.5); font-size: 12px; font-weight: 500;
  font-family: var(--font-body); letter-spacing: 0;
}
@media (max-width: 760px) {
  .hero-onboard__steps { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
}
@media (max-width: 430px) {
  .hero-onboard__steps { grid-template-columns: 1fr; gap: 13px; }
}

/* ---- Mobile-App-Hero: Phone mit Live-Angebot (2x2-Galerie, Eckdaten, grünem Senden) ---- */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 10px; overflow: hidden; }
.pgrid img { width: 100%; height: 56px; object-fit: cover; display: block; }
.pfacts { margin-top: 11px; }
.pfacts__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 11px; padding: 4px 0; border-bottom: 1px solid var(--slate-100);
}
.pfacts__row:last-child { border-bottom: 0; }
.pfacts__row > span { color: var(--slate-500); }
.pfacts__row b { color: var(--slate-900); font-weight: 700; text-align: right; }
.psend--green { background: var(--green-600); }