/* =========================================================
   Maxima homepage · compact conversion layout · 2026-10-18
   Seven sections instead of sixteen. One primary goal:
   "Kostenlose Besichtigung anfragen". Navy carries structure,
   green only marks the primary action and confirmations.
   Builds on styles.css + home.css (tokens --ink, --signal).
   ========================================================= */
.home-v5{--mx-soft:#f4f7f2;--mx-line:#d5dee3;--mx-ease:cubic-bezier(.19,1,.22,1)}

/* ---------- Shared ---------- */
.mx-section{padding:clamp(3.5rem,6vw,5.5rem) 0;border-bottom:1px solid var(--mx-line)}
.mx-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.62fr);gap:clamp(1.5rem,5vw,5rem);align-items:end;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.mx-head h2{margin:.55rem 0 0;font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1}
.mx-head p{margin:0;color:#4b5d70}
.home-v5 .hp-btn:active{transform:translate(0,0);box-shadow:none}
.home-v5 .hp-btn:focus-visible,.home-v5 a:focus-visible,.home-v5 summary:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

/* ---------- Hero ---------- */
.mx-hero{border-bottom:1px solid var(--ink);background:#fff}
.mx-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,4vw,4rem);align-items:center;padding:clamp(2.6rem,5vw,4.6rem) 0}
.mx-hero h1{margin:.7rem 0 1rem;font-size:clamp(2.5rem,4.6vw,4.4rem);line-height:.98;max-width:760px}
.mx-hero-services{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:0 0 1.1rem;padding:0;list-style:none}
.mx-hero-services a{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .7rem;border:1px solid var(--ink);
  color:var(--ink);font-size:.86rem;font-weight:800;background:#fff;
  transition:background-color .2s ease,color .2s ease;
}
.mx-hero-services a::before{content:"";width:7px;height:7px;background:var(--signal)}
.mx-hero-services a:hover{background:var(--ink);color:#fff}
.mx-lead{max-width:600px;margin:0 0 1.5rem;color:#40536b;font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.6}
.mx-hero-cta{display:grid;gap:.9rem;justify-items:start}
.mx-btn-main{min-height:58px;padding:1rem 1.6rem;font-size:1.02rem}
.mx-hero-direct{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.mx-hero-direct a{display:grid;font-weight:800;color:var(--ink);font-size:.95rem;line-height:1.25}
.mx-hero-direct a span{color:#5f6b75;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.mx-hero-direct a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:4px;text-decoration-thickness:2px}
.mx-hero-facts{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1.6rem 0 0;padding:1rem 0 0;list-style:none;border-top:1px solid var(--mx-line);font-size:.86rem;font-weight:700;color:var(--ink)}
.mx-hero-facts li{display:flex;align-items:center;gap:.45rem}
.mx-hero-facts li::before{
  content:"";width:15px;height:15px;flex:0 0 15px;border-radius:50%;
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.5 2.5L12 5.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
.mx-hero-facts a span{color:#e2a400;letter-spacing:.05em}
.mx-hero-media{position:relative;margin:0;overflow:hidden;border:1px solid var(--ink);background:#e8edf0;aspect-ratio:4/3}
.mx-hero-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;translate:var(--px,0px) var(--py,0px);scale:1.04}
.mx-hero-media figcaption{position:absolute;left:0;bottom:0;padding:.55rem .8rem;background:var(--ink);color:#fff;font-size:.74rem;font-weight:700}

/* ---------- Leistungen ---------- */
.mx-service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.mx-service{position:relative;display:flex;flex-direction:column;padding:1.6rem 1.4rem 1.5rem 0}
.mx-service+.mx-service{padding-left:1.4rem;border-left:1px solid var(--mx-line)}
.mx-no{color:var(--signal);font-family:Georgia,serif;font-size:1.1rem;font-weight:700}
.mx-service h3{margin:.4rem 0 .6rem;font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.05}
.mx-service h3 a{background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 2px no-repeat;transition:background-size .45s var(--mx-ease)}
.mx-service h3 a:hover{background-size:100% 2px}
.mx-service>p{margin:0 0 1rem;font-size:.94rem}
.mx-service ul{margin:0 0 1.2rem;padding:0;list-style:none;display:grid;gap:.3rem;font-size:.9rem;font-weight:700}
.mx-service ul a{color:var(--ink)}
.mx-service ul a::before{content:"→ ";color:var(--signal)}
.mx-service ul a:hover{text-decoration:underline}
.mx-service-cta{margin-top:auto;align-self:flex-start;padding-bottom:2px;border-bottom:2px solid var(--signal);font-weight:900;font-size:.9rem;color:var(--ink)}

/* ---------- Echte Ergebnisse ---------- */
.mx-work-section{background:var(--mx-soft)}
.mx-work{position:relative;margin:0;overflow:hidden;background:#dfe6e9;border:1px solid var(--ink)}
.mx-work img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--mx-ease)}
.mx-work:hover img{transform:scale(1.03)}
.mx-work figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding:.75rem .9rem;background:linear-gradient(180deg,transparent,rgba(11,47,99,.92) 45%);color:#fff}
.mx-work figcaption span,.mx-work figcaption strong{display:block}
.mx-work figcaption span{font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#cfe8b9}
.mx-work figcaption strong{font-size:.98rem}
.mx-work figcaption a{flex:0 0 auto;font-size:.78rem;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.mx-work-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(150px,15vw,215px);gap:12px}
.mx-work-grid .mx-work{grid-column:span 2}
.mx-work-grid .mx-work:first-child{grid-column:span 4;grid-row:span 2}
.mx-work-grid .mx-work:nth-child(n+4) figcaption a{display:none}
.mx-more{display:inline-block;margin-top:1.2rem}

/* ---------- Vertrauen ---------- */
.mx-trust-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem)}
.mx-reviews h2{margin:.55rem 0 1.4rem;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1}
.mx-score{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-top:1px solid var(--ink);color:var(--ink)}
.mx-score strong{font-family:Georgia,serif;font-size:3.2rem;font-weight:500;line-height:1}
.mx-score span{display:grid;font-weight:800}
.mx-score b{color:#e2a400;letter-spacing:.08em;font-size:1.1rem}
.mx-score-small strong{font-size:2rem}
.mx-score:hover span{text-decoration:underline;text-underline-offset:4px}
.mx-review-more{margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--mx-line);font-size:.86rem}
.mx-review-more a{font-weight:800;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mx-clients ul{margin:.9rem 0 1.2rem;padding:0;list-style:none;border-top:2px solid var(--ink)}
.mx-clients li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--mx-line)}
.mx-clients strong{font-family:Georgia,serif;font-size:1.22rem;font-weight:500;color:var(--ink);line-height:1.2}
.mx-clients li span{color:#5f6b75;font-size:.85rem}

/* ---------- Einsatzgebiet ---------- */
.mx-area{background:var(--mx-soft)}
.mx-area-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.mx-area h2{margin:.55rem 0 1rem;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1}
.mx-area-note{margin-top:1.2rem;padding:1rem 1.1rem;border-left:3px solid var(--signal);background:#fff;color:#40536b}
.mx-area-note a{font-weight:800;color:var(--ink)}
.mx-map{max-width:620px;justify-self:end;width:100%}
.mx-map .hp-map-city circle,.mx-map .hp-map-city text{transition:fill .2s ease,font-weight .2s ease}
.mx-map .hp-map-city:hover circle{fill:var(--signal)}

/* ---------- Anfrage ---------- */
.mx-contact{background:var(--ink);color:#fff;padding:clamp(3.5rem,6vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.mx-contact .hp-kicker{color:#cfe8b9}
.mx-contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.mx-contact h2{margin:.55rem 0 1.4rem;color:#fff;font-size:clamp(2.2rem,4.2vw,3.7rem);line-height:1}
.mx-steps{counter-reset:step;margin:0 0 1.6rem;padding:0;list-style:none;display:grid;gap:.15rem}
.mx-steps li{counter-increment:step;display:grid;grid-template-columns:2.4rem 1fr;column-gap:.4rem;padding:.75rem 0;border-top:1px solid rgba(255,255,255,.18)}
.mx-steps li::before{content:"0" counter(step);grid-row:1/3;color:var(--signal);font-family:Georgia,serif;font-size:1.15rem}
.mx-steps strong{font-size:1.02rem}
.mx-steps span{color:#c9d6e3;font-size:.9rem}
.mx-btn-signal{background:var(--signal);border-color:var(--signal);color:var(--ink);min-height:56px;padding:1rem 1.5rem;font-size:1rem}
.home-v5 .mx-btn-signal:hover{box-shadow:4px 4px 0 #fff}
.mx-contact-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.6rem;margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.mx-contact-lines div:last-child{grid-column:1/-1}
.mx-contact-lines dt{color:#9fb3c8;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.mx-contact-lines dd{margin:.2rem 0 0;font-weight:700;font-size:.95rem;overflow-wrap:anywhere}
.mx-contact-lines a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
.mx-contact-lines a:hover{text-decoration-color:var(--signal)}
.mx-callback{padding:clamp(1.4rem,3vw,2rem);background:#fff;color:var(--text);border:1px solid #fff}
.mx-callback h3{margin:0 0 .4rem;font-size:1.6rem;color:var(--ink)}
.mx-callback>p{margin:0 0 1rem;font-size:.92rem}
.mx-callback .hp-callback-form{margin:0;padding:0;border:0;background:none;box-shadow:none}
.mx-costcheck{margin-top:clamp(2rem,4vw,3rem);border:1px solid rgba(255,255,255,.28)}
.mx-costcheck summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;cursor:pointer;list-style:none;color:#dfe9f2;font-size:.95rem}
.mx-costcheck summary::-webkit-details-marker{display:none}
.mx-costcheck summary strong{color:#fff;margin-right:.35rem}
.mx-costcheck summary i{font-style:normal;font-size:1.4rem;color:var(--signal);transition:transform .3s var(--mx-ease)}
.mx-costcheck[open] summary i{transform:rotate(45deg)}
.mx-costcheck-body{padding:clamp(1rem,3vw,1.6rem);background:#fff;color:var(--text);border:0}

/* ---------- FAQ ---------- */
.mx-faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,5rem)}
.mx-faq h2{margin:.55rem 0 1rem;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1}

/* ---------- Mobile quick bar (homepage only) ---------- */
.mx-mbar{display:none}

/* ---------- Tablet ---------- */
@media(max-width:1060px){
  .mx-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx-service:nth-child(3){padding-left:0;border-left:0}
  .mx-service:nth-child(n+3){border-top:1px solid var(--mx-line)}
}
@media(max-width:900px){
  .mx-hero-grid{grid-template-columns:1fr;gap:1.6rem;padding-top:1.4rem}
  .mx-hero-media{order:-1;aspect-ratio:2/1}
  .mx-head,.mx-trust-grid,.mx-area-grid,.mx-contact-grid,.mx-faq-grid{grid-template-columns:1fr}
  .mx-map{justify-self:stretch;max-width:none}
}

/* ---------- Mobile ---------- */
@media(max-width:620px){
  .home-v5 .noticebar{display:none}

  .mx-section{padding:2.6rem 0}
  .mx-head{gap:.6rem;margin-bottom:1.3rem}
  .mx-head h2{font-size:2rem}
  .mx-head p{font-size:.92rem}

  .mx-hero-grid{gap:1.1rem;padding:0 0 1.6rem}
  .mx-hero-media{margin:0 -13px;border-left:0;border-right:0;border-top:0}
  .mx-hero-media figcaption{font-size:.66rem;padding:.4rem .6rem}
  .mx-hero h1{font-size:clamp(1.85rem,8.4vw,2.3rem);line-height:1.02;margin:.5rem 0 .75rem}
  .mx-hero .hp-kicker{font-size:.64rem}
  .mx-hero-services{gap:.3rem;margin-bottom:.9rem}
  .mx-hero-services a{padding:.32rem .5rem;font-size:.76rem}
  .mx-lead{display:none}
  .mx-hero-cta{justify-items:stretch;gap:.7rem}
  .mx-btn-main{width:100%;min-height:54px;font-size:1rem}
  .mx-hero-direct{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4rem}
  .mx-hero-direct a{padding:.5rem .55rem;border:1px solid var(--mx-line);font-size:.8rem}
  .mx-hero-direct a span{font-size:.6rem}
  .mx-hero-facts{margin-top:1rem;padding-top:.8rem;gap:.35rem 1rem;font-size:.78rem}

  .mx-service-grid{grid-template-columns:1fr}
  .mx-service,.mx-service+.mx-service{padding:1.15rem 0;border-left:0}
  .mx-service:nth-child(n+2){border-top:1px solid var(--mx-line)}
  .mx-service h3{font-size:1.45rem;margin:.25rem 0 .4rem}
  .mx-service>p{font-size:.88rem;margin-bottom:.6rem}
  .mx-service ul{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-bottom:.8rem;font-size:.82rem}

  .mx-work-grid{
    grid-template-columns:none;grid-auto-rows:auto;grid-auto-flow:column;grid-auto-columns:84%;
    margin:0 -13px;padding:0 13px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 13px;scrollbar-width:none;
  }
  .mx-work-grid::-webkit-scrollbar{display:none}
  .mx-work-grid .mx-work,.mx-work-grid .mx-work:first-child{grid-column:auto;grid-row:auto;height:300px;scroll-snap-align:start}
  .mx-work-grid .mx-work:nth-child(n+4) figcaption a{display:inline}
  .mx-work figcaption{flex-direction:column;align-items:flex-start;gap:.35rem}

  .mx-reviews h2{font-size:1.9rem;margin-bottom:1rem}
  .mx-score strong{font-size:2.6rem}
  .mx-clients li{grid-template-columns:1fr;gap:.1rem;padding:.7rem 0}
  .mx-clients strong{font-size:1.08rem}

  .mx-area h2{font-size:1.9rem}
  .mx-map .hp-map{max-height:300px}

  .mx-contact{padding:2.8rem 0 2rem}
  .mx-contact h2{font-size:2.1rem}
  .mx-btn-signal{width:100%}
  .mx-contact-lines{grid-template-columns:1fr 1fr;gap:.9rem 1rem}
  .mx-costcheck summary{font-size:.86rem}

  .mx-faq h2{font-size:1.9rem}

}


/* ---------- Quick bar replaces the side tab up to tablet width ---------- */
@media(max-width:980px){
  .home-v5 .contact-dock{display:none}
  .home-v5{padding-bottom:74px}
  .mx-mbar{
    position:fixed;z-index:60;left:0;right:0;bottom:0;
    display:grid;grid-template-columns:1fr 54px 54px;gap:6px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--ink);
    transform:translateY(110%);transition:transform .35s var(--mx-ease);
  }
  .mx-mbar.is-visible{transform:none}
  .mx-mbar a{display:flex;align-items:center;justify-content:center;min-height:50px;border:1px solid var(--ink);font-weight:900;color:var(--ink)}
  .mx-mbar-main{background:var(--ink);color:#fff!important;font-size:.95rem}
  .mx-mbar-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
  .mx-mbar-wa{background:var(--signal);border-color:var(--signal)!important}
  .mx-mbar-wa svg{fill:var(--ink);stroke:none}
  .mx-mbar a:active{transform:scale(.97)}
}
@media(min-width:621px) and (max-width:980px){
  .mx-mbar{left:50%;right:auto;width:min(560px,calc(100% - 32px));transform:translate(-50%,130%);border:1px solid var(--ink);bottom:16px}
  .mx-mbar.is-visible{transform:translate(-50%,0)}
}

/* ---------- Motion: controlled, once, transform/opacity only ---------- */
.mx-hero-media img{animation:mxSettle 1.6s var(--mx-ease) both}
.mx-hero-services li{animation:mxRise .6s var(--mx-ease) both}
.mx-hero-services li:nth-child(1){animation-delay:.15s}
.mx-hero-services li:nth-child(2){animation-delay:.24s}
.mx-hero-services li:nth-child(3){animation-delay:.33s}
.mx-hero-services li:nth-child(4){animation-delay:.42s}
.mx-hero-cta{animation:mxRise .7s var(--mx-ease) .5s both}
[data-reveal].is-pending{opacity:0;transform:translate3d(0,18px,0)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity .6s ease-out,transform .9s var(--mx-ease)}
.mx-service-grid>[data-reveal].is-in:nth-child(2){transition-delay:.06s}
.mx-service-grid>[data-reveal].is-in:nth-child(3){transition-delay:.12s}
.mx-service-grid>[data-reveal].is-in:nth-child(4){transition-delay:.18s}
@keyframes mxSettle{from{scale:1.12}to{scale:1.04}}
@keyframes mxRise{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .mx-hero-media img,.mx-hero-services li,.mx-hero-cta{animation:none!important}
  .mx-hero-media img{scale:1;translate:none}
  [data-reveal].is-pending{opacity:1;transform:none}
  .mx-work img,.mx-costcheck summary i,.mx-mbar,.mx-service h3 a{transition:none!important}
  .home-v5 .hp-btn:hover{transform:none}
}