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

.an-soon{ display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--w); background:#FFF4E2;
  border-radius:999px; padding:.4rem .8rem; }
.an-soon::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--w); }

/* Ein Bild im ruhigen Rahmen, wie ein Fenster des Backends */
.an-frame{ position:relative; margin:0; border-radius:var(--r-l); overflow:hidden; background:#F5F4F0;
  border:1px solid var(--line); box-shadow:var(--sh-3); }
.an-frame img{ display:block; width:100%; height:auto; }
.an-hero{ position:relative; margin-top:2.6rem; }
.an-hero .an-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; }
.an-hero .an-phone img{ display:block; width:100%; height:auto; }
.an-cap{ margin-top:.9rem; font-size:.88rem; color:var(--ink-2); }

/* Bildzeilen: Text neben Bild, abwechselnd */
.an-rows{ display:grid; gap:clamp(4rem,8vw,6.5rem); }
.an-row{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.an-row.an-flip{ grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); }
.an-row.an-flip .an-copy{ order:2; }
.an-copy h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.12; }
.an-copy > p{ color:var(--ink-2); margin-top:1rem; font-size:1.02rem; }
.an-copy .hand-note{ margin-top:.8rem; }
.an-points{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.7rem; }
.an-points li{ position:relative; padding-left:1.8rem; color:var(--ink-2); }
.an-points li b{ color:var(--ink); font-weight:600; }
.an-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; }

/* Preis-Kacheln */
.an-prices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:2.4rem; }
.an-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); }
.an-price.an-hi{ border-color:var(--v); box-shadow:var(--sh-v); }
.an-price h3{ font-size:1.05rem; }
.an-price .an-num{ font-family:var(--disp); font-size:2.4rem; font-weight:700; letter-spacing:-.03em; line-height:1; }
.an-price .an-num small{ font-size:.9rem; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.an-price p{ color:var(--ink-2); font-size:.94rem; }
.an-price .btn{ margin-top:auto; }
.an-price s{ color:var(--ink-3); }

/* Kleine Fakten unter den Datenschutz-Karten */
.an-facts{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:2rem; }
.an-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){
  .an-row, .an-row.an-flip{ grid-template-columns:minmax(0,1fr); }
  .an-row.an-flip .an-copy{ order:0; }
  .an-hero .an-phone{ display:none; }
}

/* Anleitung: vier Kästen mit je drei Schritten, darunter die Legende */
.an-plays{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:1.2rem; }
.an-plays ol{ list-style:none; counter-reset:an; padding:0; margin:1rem 0 0; display:grid; gap:.9rem; }
.an-plays li{ counter-increment:an; position:relative; padding-left:2rem; color:var(--ink-2); font-size:.95rem; }
.an-plays li::before{ content:counter(an); position:absolute; left:0; top:.1em; width:1.4rem; height:1.4rem; border-radius:50%;
  background:var(--v-soft); color:var(--v); font-size:.78rem; font-weight:700; display:grid; place-items:center; }
.an-plays li b{ color:var(--ink); font-weight:600; }
.an-keys-head{ margin-top:clamp(3rem,6vw,4.5rem); }
.an-keys-head h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
.an-keys{ list-style:none; padding:0; margin:1.6rem auto 0; max-width:920px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:.8rem 2rem; }
.an-keys li{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:.9rem; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m,14px); padding:.75rem 1rem; color:var(--ink-2); font-size:.93rem; }
.an-keys li b{ color:var(--ink); font-weight:600; }
.an-key{ justify-self:center; font-weight:700; font-size:.82rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.an-up{ background:#E5F2EA; color:#1D6B42; border-radius:6px; padding:.15rem .45rem; }
.an-down{ background:#FAEBE8; color:#A8321F; border-radius:6px; padding:.15rem .45rem; }
.an-bar{ width:64px; height:7px; border-radius:4px; background:linear-gradient(90deg,#2A4BB0 62%,#E6E3DC 62%); }
.an-heat{ width:64px; height:14px; border-radius:4px; background:linear-gradient(90deg,rgb(40,90,230),rgb(40,208,176),rgb(245,226,59),rgb(240,138,36),rgb(215,38,61)); }
.an-pin{ width:26px; height:26px; border-radius:50%; background:#1B1D22; color:#fff; display:grid; place-items:center; }
.an-scroll{ width:64px; height:30px; border-radius:4px; border:1px solid var(--line); background:linear-gradient(180deg,rgba(20,22,30,.04),rgba(20,22,30,.6)); }
.an-num{ color:var(--ink); font-size:.95rem; }