/* ==========================================================================
   elico.overview – Vorstellungsseite /tools/overview/
   Ergänzt style.css + site.css. Farben nur über Tokens (Aufbau wie tools/funnel/seite.css).
   Keine farbigen Einzelkanten: Akzente über Fläche oder Rahmen rundum.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.ovl-marke{display:inline-block;margin:0 0 18px;font:700 clamp(26px,2.4vw,34px)/1 var(--font-head);letter-spacing:-.024em;color:var(--ink-text);white-space:nowrap}
.ovl-marke span{color:var(--brand)}
.ovl-marke b{font-weight:700;color:var(--ink-muted)}
.ovl .h1-zusatz{display:block;font-size:clamp(24px,2.6vw,40px);font-weight:600;letter-spacing:-.015em;line-height:1.15;margin-top:.4em;color:var(--ink-text)}

/* Eingabe Domain oder URL (im dunklen Hero und im dunklen Ablauf) */
.ovl-suche{display:flex;align-items:center;gap:10px;width:100%;max-width:560px;margin:28px 0 0;padding:6px 6px 6px 18px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);border:1px solid var(--ink-line);transition:border-color var(--t),box-shadow var(--t)}
.ovl-suche:focus-within{border-color:rgba(var(--brand-rgb),.65);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.18)}
.ovl-suche-ic{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:var(--ink-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ovl-suche input{flex:1;min-width:0;padding:12px 0;border:0;outline:0;background:none;color:var(--ink-text);font:500 16px/1.2 var(--font-body)}
.ovl-suche input::placeholder{color:var(--ink-muted);opacity:.8}
.ovl-suche .btn{flex:0 0 auto}

/* Hero-Grafik: das Tool im Kleinen */
.ovl-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.ovl-svg text{font-family:var(--font-head);font-weight:700}
.ovl-svg .ovl-win{fill:var(--ink-2);stroke:var(--ink-line)}
.ovl-svg .ovl-sep{stroke:var(--ink-line);fill:none}
.ovl-svg .ovl-dot{fill:rgba(255,255,255,.14)}
.ovl-svg .ovl-wm{font-size:14px;fill:var(--ink-text);letter-spacing:-.02em}
.ovl-svg .ovl-wm .p{fill:var(--brand)}
.ovl-svg .ovl-wm .n{fill:var(--ink-muted)}
.ovl-svg .ovl-title{font-size:11.5px;font-weight:500;fill:var(--ink-muted)}
.ovl-svg .ovl-btn{fill:none;stroke:var(--ink-line)}
.ovl-svg .ovl-btn-t{font-size:10px;fill:var(--ink-text)}
.ovl-svg .ovl-card{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.1)}
.ovl-svg .ovl-k-l{font-size:8.5px;letter-spacing:.1em;fill:var(--ink-muted)}
.ovl-svg .ovl-k-v{font-size:24px;letter-spacing:-.02em;fill:var(--ink-text)}
.ovl-svg .ovl-k-v.is-plus{fill:var(--ok)}
.ovl-svg .ovl-delta{fill:var(--ok);fill-opacity:.16}
.ovl-svg .ovl-delta-t{font-size:9.5px;fill:var(--ok)}
.ovl-svg .ovl-grid{stroke:rgba(255,255,255,.07);fill:none}
.ovl-svg .ovl-stop-a{stop-color:var(--brand);stop-opacity:.35}
.ovl-svg .ovl-stop-b{stop-color:var(--brand);stop-opacity:0}
.ovl-svg .ovl-area{fill:url(#ovl-flaeche)}
.ovl-svg .ovl-line{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ovl-svg .ovl-punkt{fill:var(--brand);stroke:var(--ink-2);stroke-width:2}
.ovl-svg .ovl-ax{font-family:var(--font-body);font-weight:500;font-size:9px;fill:var(--ink-muted)}
.ovl-svg .ovl-kw{font-family:var(--font-body);font-weight:500;font-size:11px;fill:var(--ink-text)}
.ovl-svg .ovl-pos,.ovl-svg .ovl-zahl{font-size:11px;fill:var(--ink-text)}
.ovl-svg .ovl-up{font-size:9.5px;fill:var(--ok)}
.ovl-svg .ovl-neu{font-size:9.5px;fill:var(--info)}

html.js .lp-hero-visual .ovl-kpi,html.js .lp-hero-visual .ovl-row{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.35s + var(--i,0) * .12s)}
html.js .lp-hero-visual.is-in .ovl-kpi,html.js .lp-hero-visual.is-in .ovl-row{opacity:1;transform:none}
html.js .lp-hero-visual .ovl-line{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--ease) .6s}
html.js .lp-hero-visual.is-in .ovl-line{stroke-dashoffset:0}
html.js .lp-hero-visual .ovl-area,html.js .lp-hero-visual .ovl-punkt{opacity:0;transition:opacity .8s var(--ease) 1.6s}
html.js .lp-hero-visual.is-in .ovl-area,html.js .lp-hero-visual.is-in .ovl-punkt{opacity:1}

/* --- Kennzahlen unter dem Hero ------------------------------------------ */
.ovl-stats .stat .num em{font-size:.62em;margin-left:2px}

/* --- Karten -------------------------------------------------------------- */
.ovl-karten .card{padding:30px 28px}
.ovl-karten .icon-ring{margin-bottom:18px}
.ovl-karten .h3{font-size:21px;margin-bottom:8px}
.ovl-karten p{color:var(--muted);font-size:15.5px;margin:0}
.ovl-extras{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.ovl-extras .pill svg{width:15px;height:15px;color:var(--brand-text)}

/* --- Ablauf: Eingabe noch einmal ---------------------------------------- */
.ovl-start{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px}
.ovl-start .ovl-suche{margin:0}
.ovl-start .meta{margin:0;color:var(--ink-muted)}

/* --- Für wen ------------------------------------------------------------- */
.ovl-fuer{padding:30px 28px;display:flex;flex-direction:column}
.ovl-fuer .icon-ring{margin-bottom:18px}
.ovl-fuer .h3{font-size:21px;margin-bottom:8px}
.ovl-fuer p{color:var(--muted);font-size:15.5px;margin:0 0 18px}
.ovl-fuer .ovl-frage{margin:auto 0 0;padding:12px 16px;border-radius:var(--r-md);background:var(--surface-2);font:500 14.5px/1.45 var(--font-head);color:var(--text)}

/* --- Was die Zahlen bedeuten -------------------------------------------- */
.ovl-ehrlich{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:36px 40px;margin-top:48px}
.ovl-ehrlich .icon-ring{width:64px;height:64px}
.ovl-ehrlich .icon-ring svg{width:28px;height:28px}
.ovl-ehrlich .h3{color:var(--ink-text);margin-bottom:6px}
.ovl-ehrlich p{margin:0;max-width:640px}
.ovl-ehrlich ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-family:var(--font-head);font-weight:500;font-size:14px;color:var(--ink-text)}
.ovl-ehrlich li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ovl-ehrlich li svg{width:16px;height:16px;color:var(--brand)}

/* --- FAQ ------------------------------------------------------------------ */
.ovl-faq{max-width:860px;margin:0 auto}

@media (max-width:1024px){
  .ovl-ehrlich{grid-template-columns:auto 1fr}
  .ovl-ehrlich ul{grid-column:1 / -1;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 24px}
}
@media (max-width:720px){
  .ovl-ehrlich{grid-template-columns:1fr;padding:28px 22px;gap:18px}
  .ovl-ehrlich ul{grid-template-columns:1fr}
  .ovl-karten .card,.ovl-fuer{padding:24px 22px}
}
@media (max-width:460px){
  .ovl-suche{flex-wrap:wrap;padding:8px;border-radius:var(--r-lg)}
  .ovl-suche-ic{margin-left:8px}
  .ovl-suche input{padding:10px 0}
  .ovl-suche .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html.js .lp-hero-visual .ovl-kpi,html.js .lp-hero-visual .ovl-row,html.js .lp-hero-visual .ovl-area,html.js .lp-hero-visual .ovl-punkt{transition:none;opacity:1;transform:none}
  html.js .lp-hero-visual .ovl-line{transition:none;stroke-dashoffset:0}
}