/* SINOVO – responsive.css : Mobile First Anpassungen (Desktop-Basis in style.css) */

html,body{max-width:100%;overflow-x:hidden}

/* ---- < 1024px : Hero einspaltig -> zuerst Hero-Text, dann Formular, dann Visual ---- */
@media (max-width:1024px){
  .hero{padding-top:clamp(1.5rem,5vw,3rem)}
  .hero__grid{grid-template-columns:1fr;grid-template-areas:"copy" "form";gap:1.6rem}
  .hero__form-wrap{position:static}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  /* Warum Odoo: Text zuerst, Visual darunter (bessere Lesereihenfolge mobil) */
  .why-grid{grid-template-columns:1fr;gap:38px}
  .why-text{order:1}
  .why-visual{order:2;max-width:480px;margin-inline:auto;width:100%}
  .odoo-panel{transform:none} /* keine 3D-Neigung auf Touch */
  .odoo-panel:hover{transform:none}
  .logogrid{grid-template-columns:repeat(3,1fr)}
  .testi-grid{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .site-footer__brand{grid-column:1 / -1}
}

/* ---- < 900px : Vollbild-Menü ---- */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .site-header__phone span{display:none}
  .header-cta{display:none}
  .trustbar__grid{grid-template-columns:1fr 1fr;gap:.7rem;padding:1.2rem 0}
  .trustbar__item{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:.9rem 1rem;box-shadow:var(--shadow-sm)}
  .trustbar__ico{background:var(--teal-tint);border-color:var(--teal-border)}
  .nav-backdrop{display:none}

  /* WICHTIG: backdrop-filter auf dem Header entfernen – sonst wird der Header
     zum Containing-Block für das position:fixed Vollbild-Menü (füllt sonst nur die Header-Höhe). */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.94)}

  .site-nav{
    position:fixed;inset:0;z-index:120;margin:0;
    display:flex;flex-direction:column;align-items:stretch;
    background:var(--white);
    opacity:0;visibility:hidden;transform:translateY(-14px);
    transition:opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s;
    overflow-y:auto;overscroll-behavior:contain;
  }
  .site-nav.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s;}

  .site-nav__bar{display:flex;align-items:center;justify-content:space-between;
    padding:1.05rem clamp(1.1rem,5vw,2rem);border-bottom:1px solid var(--border)}
  .site-nav__logo{font-size:1.4rem}
  .nav-close{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--border);
    border-radius:12px;background:var(--white);color:var(--ink);cursor:pointer;transition:background .2s ease, transform .3s ease}
  .nav-close:hover{background:var(--grey-100)}
  .nav-close:active{transform:rotate(90deg)}
  .nav-close i{width:1.45em;height:1.45em}

  .site-nav__links{display:flex;flex-direction:column;gap:0;flex:1;
    padding:clamp(1rem,4vw,2rem) clamp(1.1rem,5vw,2rem)}
  .site-nav__link{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.05rem .2rem;border-bottom:1px solid var(--grey-100);border-radius:0;
    font-family:var(--font-head);font-size:clamp(1.5rem,6vw,2rem);font-weight:500;color:var(--ink);
    opacity:0;transform:translateY(16px);transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), color .15s}
  .site-nav__link i{display:block;width:1em;height:1em;color:var(--grey-400);transition:transform .2s ease, color .15s}
  .site-nav__link:hover{color:var(--ink)}
  .site-nav__link:hover i{color:var(--teal-dark);transform:translateX(4px)}
  .site-nav.is-open .site-nav__link{opacity:1;transform:none}
  .site-nav.is-open .site-nav__link:nth-child(1){transition-delay:.08s}
  .site-nav.is-open .site-nav__link:nth-child(2){transition-delay:.14s}
  .site-nav.is-open .site-nav__link:nth-child(3){transition-delay:.20s}
  .site-nav.is-open .site-nav__link:nth-child(4){transition-delay:.26s}
  .site-nav.is-open .site-nav__link:nth-child(5){transition-delay:.32s}

  .site-nav__cta{display:flex;flex-direction:column;gap:.9rem;
    padding:1.2rem clamp(1.1rem,5vw,2rem) clamp(1.6rem,6vw,2.4rem);border-top:1px solid var(--border);
    opacity:0;transform:translateY(16px);transition:opacity .4s ease .34s, transform .5s cubic-bezier(.16,1,.3,1) .34s}
  .site-nav.is-open .site-nav__cta{opacity:1;transform:none}
  .site-nav__cta .btn{width:100%}
  .site-nav__phone{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-weight:600;color:var(--ink);padding:.4rem}
  .site-nav__phone i{width:1.1em;height:1.1em;color:var(--grey-500)}
}

/* Menü offen: Body-Scroll sperren (ergänzt JS overflow:hidden) */
body.nav-open{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  .site-nav,.site-nav__link,.site-nav__cta{transition-duration:.001ms!important}
  .site-nav__link,.site-nav__cta{opacity:1!important;transform:none!important}
}

/* ---- < 768px : Ablauf als Timeline, weitere Stapelung ---- */
@media (max-width:768px){
  body{font-size:16px}
  .section{padding:clamp(2.6rem,8vw,4rem) 0}

  /* Ablauf 1·2·3·4 -> vertikale Timeline (Zahl links, Inhalt rechts, Flexbox = robust) */
  .steps{grid-template-columns:1fr;gap:0;row-gap:0;padding-top:.4rem}
  .step{display:flex;align-items:flex-start;gap:1rem;text-align:left;
        padding:0 0 1.9rem;background:transparent;border:none;box-shadow:none;position:relative}
  .step:not(:last-child)::before{content:"";position:absolute;left:21px;top:48px;bottom:0;width:2px;background:var(--border)}
  .step__num{position:static;transform:none;inset:auto;flex:0 0 44px;width:44px;height:44px;font-size:1.1rem}
  .step__body{flex:1;min-width:0;padding-top:2px}
  .step__ico{display:none}
  .step h3{min-height:40px;display:flex;align-items:center;margin-bottom:.4rem;font-size:1.14rem}
  .step__dur{margin:0 0 .6rem;white-space:nowrap}
  .step p{margin:0}

  .stats{grid-template-columns:1fr 1fr;gap:.5rem}
  .finalcta__inner{grid-template-columns:1fr;gap:1.5rem}
  .finalcta__action{align-items:stretch}
  .cookie-banner{padding:.7rem}
  .cookie-banner__content{flex-direction:column;align-items:stretch;gap:1rem;padding:1.2rem}
  .cookie-banner__actions{flex-direction:column-reverse}
  .cookie-btn{width:100%}
  .sticky-cta{display:flex}
  .site-footer__bottom-inner{flex-direction:column;align-items:flex-start}
}

/* ---- < 600px : Hero straffen ---- */
@media (max-width:600px){
  .hero{padding-top:1.1rem}
  .hero__title{margin:.7rem 0 .7rem}
  .hero__lead{font-size:1.02rem}
  .hero__pills{gap:.4rem;margin:1rem 0}
  .pill{font-size:.8rem;padding:.38rem .7rem}
  .pill--secondary{display:none} /* redundant zur H1, spart eine Zeile */
  .hero__cta{margin-top:.2rem;gap:.6rem}
  .hero__microtrust{margin-top:.75rem;font-size:.85rem}
  .hero__grid{gap:1.2rem}
}

/* ---- < 560px ---- */
@media (max-width:560px){
  .cards-grid{grid-template-columns:1fr}
  .trustbar__grid{grid-template-columns:1fr}
  .odoo-float.f1{right:0}
  .odoo-float.f2{left:0}
  .logogrid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .rev-summary{width:100%;justify-content:center;text-align:center}
  .form-row{grid-template-columns:1fr}
  /* Konfigurator-Buttons stapeln: primär oben (voll breit), Zurück darunter */
  .lead-nav{flex-direction:column-reverse;gap:.55rem}
  .lead-nav .btn{width:100%}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .site-footer__grid{grid-template-columns:1fr}
  .lead-card{border-radius:20px;padding:1.15rem}
  .section__head{margin-bottom:1.8rem}
}

/* ---- < 380px : sehr kleine Geräte ---- */
@media (max-width:380px){
  .choice-grid{gap:.45rem}
  .choice__box{padding:.8rem .4rem;min-height:92px}
  .lead-card{padding:1rem}
  .lead-nav{gap:.45rem}
  .btn{padding:.85rem 1rem}
}

/* Sticky-CTA weicht dem Cookie-Banner */
body.cookie-banner-visible .sticky-cta{transform:translateY(140%)}