/* ============================================================
   Duo Visions GbR – Enhance-Layer
   Scroll-Reveal, Nav-Verhalten, Burger-Menü, Hero-Tiefe,
   Button-Shine, Focus-Stile. Lädt NACH styles.css.
   Alles unter html.enh (wird im <head> gesetzt, außer bei
   prefers-reduced-motion → dann bleibt alles sofort sichtbar).
   ============================================================ */

/* ---- Scroll-Reveal: Grundzustand (nur wenn html.enh) ---- */
html.enh .hero-copy > *,
html.enh .hero-art,
html.enh .section-head,
html.enh .products-grid .card,
html.enh .about-body,
html.enh .about .container > div:first-child,
html.enh .cards .fcard,
html.enh .steps .step,
html.enh .prices .price,
html.enh .split > *,
html.enh .panel,
html.enh .pill-list,
html.enh .faq details,
html.enh .cta-band,
html.enh .flow,
html.enh .products-foot,
html.enh main.legal > .eyebrow,
html.enh main.legal > h1,
html.enh main.legal > .updated,
html.enh main.legal > .status-chip,
html.enh main.legal section{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
html.enh .reveal-in{opacity:1 !important;transform:none !important}

/* ---- Nav: verschlankt & Schatten beim Scrollen ---- */
nav.nav{transition:background .3s ease,box-shadow .3s ease}
nav.nav .container{transition:height .3s ease}
nav.nav.scrolled{background:rgba(238,241,246,.92);box-shadow:0 10px 30px -18px rgba(16,44,82,.5)}
nav.nav.scrolled .container{height:58px}

/* ---- Burger-Menü (mobil) ---- */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:4px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:12px;
  cursor:pointer;color:var(--ink);flex:0 0 auto;
}
.nav-toggle span{position:relative;width:18px;height:2px;background:currentColor;border-radius:2px;transition:background .2s ease}
.nav-toggle span:before,.nav-toggle span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease}
.nav-toggle span:before{top:-6px}
.nav-toggle span:after{top:6px}
nav.nav.open .nav-toggle span{background:transparent}
nav.nav.open .nav-toggle span:before{transform:translateY(6px) rotate(45deg)}
nav.nav.open .nav-toggle span:after{transform:translateY(-6px) rotate(-45deg)}

@media(max-width:780px){
  .nav-toggle{display:inline-flex}
  nav.nav{position:sticky}
  nav.nav .container{position:relative}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;gap:0;
    background:rgba(238,241,246,.98);backdrop-filter:saturate(1.3) blur(10px);
    border-bottom:1px solid var(--line);
    padding:6px 24px 16px;
    box-shadow:0 20px 40px -24px rgba(16,44,82,.5);
  }
  nav.nav.open .nav-links{display:flex}
  .nav-links li{width:100%;border-top:1px solid var(--line)}
  .nav-links a{display:block;padding:14px 2px;font-size:1rem}
  .nav-cta{padding:9px 14px;font-size:.86rem}
}
@media(max-width:400px){
  .nav-cta{display:none}
}

/* ---- Hero-Tiefe & Bewegung ---- */
header.hero{isolation:isolate}
html.enh header.hero:after{
  content:"";position:absolute;z-index:-1;
  width:min(560px,70vw);height:min(560px,70vw);
  top:-220px;right:-140px;border-radius:50%;
  background:radial-gradient(circle,rgba(111,217,174,.28),rgba(20,201,214,.12) 45%,transparent 70%);
  filter:blur(18px);
  animation:dv-drift 16s ease-in-out infinite;
  pointer-events:none;
}
html.enh .hero-art img{animation:dv-float 7s ease-in-out infinite}

/* dezente Bewegung im Produkt-Hero-Flow */
html.enh .flow-step .ic{animation:dv-pulse 4.5s ease-in-out infinite}
html.enh .flow-step:nth-child(3) .ic{animation-delay:.6s}
html.enh .flow-step:nth-child(5) .ic{animation-delay:1.2s}

/* ---- Button-Shine ---- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary:after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;
}
.btn-primary:hover:after{left:150%}

/* ---- Produktkarten: etwas mehr Wertigkeit ---- */
.card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease}
.card:hover{border-color:rgba(60,127,208,.3)}
.card-cta{transition:gap .2s ease}
.card:hover .card-cta{gap:11px}

/* ---- Focus-Stile (Barrierefreiheit) ---- */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn-primary:focus-visible,
.btn-ghost:focus-visible,.btn-outline:focus-visible,.btn-ink:focus-visible,.nav-cta:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;border-radius:8px;
}

/* ---- Keyframes ---- */
@keyframes dv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes dv-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.08)}}
@keyframes dv-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ---- Reduced Motion: alles ruhig & sofort sichtbar ---- */
@media (prefers-reduced-motion: reduce){
  html.enh *{animation:none !important}
  html.enh .hero-copy > *,html.enh .hero-art,html.enh .section-head,
  html.enh .products-grid .card,html.enh .about-body,html.enh .cards .fcard,
  html.enh .steps .step,html.enh .prices .price,html.enh .split > *,
  html.enh .panel,html.enh .pill-list,html.enh .faq details,html.enh .cta-band,
  html.enh .flow,html.enh .products-foot,html.enh main.legal section{
    opacity:1;transform:none;transition:none;
  }
}