/* ═══════════════════════════════════════════════════════════════════════════
   Zevbros Growth — Produktseite (growth.html). Baut auf site.css auf:
   dieselben Farben, Schriften und Bausteine; hier nur, was die Seite
   zusätzlich braucht — Bildzeilen, Bildrahmen, drei Preis-Kacheln.
   ═══════════════════════════════════════════════════════════════════════════ */

.gr-frame{ position:relative; margin:0; border-radius:var(--r-l); overflow:hidden; background:#F5F4F0;
  border:1px solid var(--line); box-shadow:var(--sh-3); }
.gr-frame img{ display:block; width:100%; height:auto; }
.gr-hero{ position:relative; margin-top:2.6rem; }
.gr-hero .gr-phone{ position:absolute; right:-1.2rem; bottom:-2.2rem; width:min(23%,220px);
  border-radius:26px; overflow:hidden; border:7px solid #0C0E14; box-shadow:var(--sh-3); background:#F5F4F0; }
.gr-hero .gr-phone img{ display:block; width:100%; height:auto; }
.gr-cap{ margin-top:.9rem; font-size:.88rem; color:var(--ink-2); }

.gr-rows{ display:grid; gap:clamp(4rem,8vw,6.5rem); }
.gr-row{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.gr-row.gr-flip{ grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); }
.gr-row.gr-flip .gr-copy{ order:2; }
.gr-copy h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.12; }
.gr-copy > p{ color:var(--ink-2); margin-top:1rem; font-size:1.02rem; }
.gr-copy .hand-note{ margin-top:.8rem; }
.gr-points{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem; }
.gr-points li{ position:relative; padding-left:1.8rem; color:var(--ink-2); }
.gr-points li b{ color:var(--ink); font-weight:600; }
.gr-points li::before{ content:""; position:absolute; left:0; top:.42em; width:1rem; height:1rem; border-radius:50%;
  background:var(--v-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.6' fill='none' stroke='%235B3DF5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }

/* Drei Stufen */
.gr-prices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.2rem; margin-top:2.4rem; }
.gr-price{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:1.7rem 1.6rem;
  display:flex; flex-direction:column; gap:.6rem; box-shadow:var(--sh-1); }
.gr-price.gr-hi{ border-color:var(--v); box-shadow:var(--sh-v); }
.gr-price .gr-badge{ position:absolute; top:-.75rem; left:1.4rem; background:var(--v); color:#fff; font-size:.74rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; border-radius:999px; padding:.3rem .7rem; }
.gr-price h3{ font-size:1.05rem; }
.gr-price .gr-num{ font-family:var(--disp); font-size:2.4rem; font-weight:700; letter-spacing:-.03em; line-height:1; }
.gr-price .gr-num small{ font-size:.9rem; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.gr-price .gr-deal{ color:var(--ink-2); font-size:.9rem; }
.gr-price .gr-deal b{ color:var(--ink); }
.gr-price ul{ list-style:none; padding:0; margin:.4rem 0 .8rem; display:grid; gap:.45rem; }
.gr-price li{ position:relative; padding-left:1.4rem; color:var(--ink-2); font-size:.94rem; }
.gr-price li::before{ content:"✓"; position:absolute; left:0; color:var(--v); font-weight:700; }
.gr-price .btn{ margin-top:auto; }
.gr-fine{ margin-top:1.4rem; text-align:center; color:var(--ink-2); font-size:.92rem; }

.gr-facts{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:2rem; }
.gr-facts span{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:.45rem .9rem; font-size:.88rem; color:var(--ink-2); }

@media (max-width:860px){
  .gr-row, .gr-row.gr-flip{ grid-template-columns:minmax(0,1fr); }
  .gr-row.gr-flip .gr-copy{ order:0; }
  .gr-hero .gr-phone{ display:none; }
}