/* ==========================================================================
   V7 – Struktur der Vorlage, Design von V6
   Lädt NACH v4.css und v6.css. Ergänzt nur, was die neue Struktur braucht.
   ========================================================================== */

/* --- Nummeriertes Sektions-Label (01, 02, 03) --------------------------- */
.eyebrow .num{
  font-family:var(--font-d);font-size:12px;font-weight:700;letter-spacing:.06em;
  color:var(--ink);background:transparent;border:1px solid var(--line);
  padding:3px 8px;border-radius:5px;margin-right:2px;
}

/* --- Zentrierter Hero ohne Mockup --------------------------------------
   In der Vorlage steht im Hero nur Text, das Produktbild kommt erst im
   Abschnitt darunter. Das macht den Einstieg ruhiger.                    */
.hero-c{text-align:center;max-width:780px;margin:0 auto;padding:10px 0 6px}
.hero-c .pill{margin-bottom:22px}
.hero-c h1{max-width:none}
.hero-c .sub{margin:22px auto 30px;max-width:54ch}
.hero-c .hero-btns{justify-content:center}
.hero-c .hero-metrics{justify-content:center;gap:44px;margin-top:36px}
.hero-c .hm{text-align:center}
.hero-c .hm .l{max-width:none}

/* --- „So funktioniert's": Text links, Handy rechts ---------------------- */
.howto{display:grid;grid-template-columns:1fr 300px;gap:60px;align-items:center}
.howto h3{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;margin-bottom:14px}
.howto>div>p{font-size:16px;color:var(--muted);line-height:1.62;margin-bottom:22px;max-width:50ch}

/* --- Kompakte Vorteils-Kacheln ohne Rahmen ------------------------------
   In der Vorlage sind die sechs Vorteile sehr knapp – ein Titel, ein Satz. */
.ugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ucard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.ucard .ui-ico{
  width:30px;height:30px;border-radius:9px;background:var(--forest);color:var(--lime);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.ucard .ui-ico svg{width:15px;height:15px}
.ucard h4{font-size:16px;letter-spacing:-.02em;margin-bottom:6px}
.ucard p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* --- Drei Schritte, groß und ruhig -------------------------------------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:1.5px solid var(--ink);padding-top:28px}
.step3 .sn{
  font-family:var(--font-d);font-size:13px;font-weight:700;
  width:30px;height:30px;border-radius:9px;background:var(--lime);color:var(--forest);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.step3 h4{font-size:18px;letter-spacing:-.025em;margin-bottom:7px}
.step3 p{font-size:14.5px;color:var(--muted);line-height:1.55;max-width:34ch}

@media(max-width:900px){
  .howto{grid-template-columns:1fr;gap:34px}
  .howto .phone-wrap{order:-1}
  .ugrid,.steps3{grid-template-columns:1fr;gap:14px}
  .steps3{padding-top:22px}
  .hero-c .hero-metrics{gap:26px}
}