/* =========================================================
   V34 — Responsive-Fix + Referenzgalerien + Footer/Privacy
   ========================================================= */
html,body{max-width:100%;overflow-x:hidden;overflow-y:auto}
img{max-width:100%}

/* Einheitliche Navigation, ohne notebook-bedingtes horizontales Aufziehen */
@media(min-width:1051px){
  .site-header{grid-template-columns:auto minmax(0,1fr) auto!important;gap:clamp(16px,2vw,34px)!important;padding-left:clamp(22px,4vw,64px)!important;padding-right:clamp(22px,4vw,64px)!important}
  .main-nav{justify-self:center!important;margin-left:0!important;gap:4px!important;min-width:0!important}
  .main-nav> a,.main-nav .services-trigger,.main-nav .nav-legal-trigger{font-size:14px!important;font-weight:850!important;min-height:42px!important;padding:0 12px!important;line-height:1!important;white-space:nowrap}
  .nav-services,.nav-legal{display:flex;align-items:center}
}
@media(max-width:1450px) and (min-width:1051px){
  .header-actions .social-btn{display:none!important}
  .main-nav> a,.main-nav .services-trigger,.main-nav .nav-legal-trigger{font-size:13.5px!important;padding:0 10px!important}
  .brand.dm-brand .brand-mark{width:62px!important;height:62px!important;max-width:62px!important}
  .brand-copy strong{font-size:18px!important}
}
@media(max-width:1180px) and (min-width:1051px){
  .site-header{display:grid!important;grid-template-columns:1fr auto 1fr!important}
  .menu-toggle{display:block!important;grid-column:2;grid-row:1;justify-self:center}
  .header-actions{grid-column:3;grid-row:1}
  .brand{grid-column:1;grid-row:1}
  .main-nav{display:none!important;position:absolute!important;top:104px!important;left:20px!important;right:20px!important;margin:0!important;flex-direction:column!important;align-items:stretch!important;background:#111!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:18px!important;padding:18px!important;box-shadow:0 24px 80px rgba(0,0,0,.35)!important;max-height:calc(100vh - 150px);overflow:auto}
  .main-nav.open{display:flex!important}
  .main-nav> a,.main-nav .services-trigger,.main-nav .nav-legal-trigger{justify-content:flex-start!important;width:100%!important;font-size:17px!important;padding:11px 12px!important}
  .nav-services,.nav-legal{display:block!important;width:100%}
  .service-dropdown-cms,.nav-legal-menu{position:static!important;display:none!important;width:100%!important;box-shadow:none!important;margin-top:6px!important}
  .nav-services.open .service-dropdown-cms,.nav-legal.open .nav-legal-menu{display:grid!important}
}


/* Dropdowns öffnen auf Desktop ausschließlich verzögert per JS. */
@media(min-width:1181px){
  .nav-services:hover .service-dropdown-cms{opacity:0!important;pointer-events:none!important;transform:translate(-50%,-8px)!important}
  .nav-services.open .service-dropdown-cms{opacity:1!important;pointer-events:auto!important;transform:translate(-50%,0)!important}
  .nav-legal:hover .nav-legal-menu,.nav-legal:focus-within .nav-legal-menu{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(8px)!important}
  .nav-legal.open .nav-legal-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important}
}

/* Scrollen per Mausrad/Trackpad immer freigeben, außer eine Galerie ist wirklich geöffnet. */
html{overflow-y:auto!important}
body:not(.dm-lightbox-open){overflow-y:auto!important}

/* CTA auf der Referenzseite sauber zentriert statt links aus dem Viewport zu laufen. */
.cta-v11{padding:0 7vw 96px!important;background:#f7f5f0!important;color:#111312!important}
.cta-v11-box{width:min(1180px,100%);margin:0 auto;padding:34px 38px;border-radius:22px;background:#252b27;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:28px;box-shadow:0 20px 55px rgba(17,19,18,.10)}
.cta-v11-box>div{min-width:0}
.cta-v11-box h2{margin:0 0 8px;font-size:clamp(28px,3vw,42px);line-height:1.08;color:#fff}
.cta-v11-box p{margin:0;color:#d8ded9;font-size:15px;line-height:1.65}
.cta-v11-box .btn{flex:0 0 auto}

/* Referenzen: stabile Container auf jeder Bildschirmgröße */
.references-overview,.work-compare-section,.cta-v11{width:100%;min-width:0}
.references-overview .section-title,.work-compare-section .section-title{width:min(920px,100%);margin-left:auto;margin-right:auto}
.work-page-grid,.work-compare-list{width:min(1180px,100%)!important;max-width:1180px!important;margin-left:auto!important;margin-right:auto!important;min-width:0!important}
.work-card{display:block;color:inherit;text-decoration:none;min-width:0}
.work-card-copy{min-width:0}
.work-card-copy h2,.work-card-copy p{overflow-wrap:anywhere}
.work-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;font-weight:900;color:#fff}
.work-card-link i{font-size:10px;transition:transform .2s ease}.work-card:hover .work-card-link i{transform:translateX(4px)}
.work-compare-card{width:100%!important;min-width:0!important}
.work-compare-card>*{min-width:0}
.ba-compare{min-width:0!important}
.work-compare-copy h3{font-size:clamp(27px,2.7vw,40px)!important}

/* Kategoriegallerie */
.reference-gallery-page{background:#f7f5f0;color:#111312}
.gallery-hero{padding:190px 7vw 72px;background:linear-gradient(180deg,#eef1eb 0,#f7f5f0 100%)}
.gallery-hero-inner{width:min(1180px,100%);margin:auto}
.gallery-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:32px;color:#4e5e50;font-size:12px;font-weight:900}
.gallery-hero h1{max-width:900px;margin:8px 0 16px;font-family:Sora,Manrope,sans-serif;font-size:clamp(44px,6vw,78px);line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.gallery-hero p:last-child{max-width:760px;color:#687169;font-size:16px;line-height:1.7}
.reference-gallery-section{padding:18px 7vw 100px}
.reference-gallery-grid{width:min(1180px,100%);margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.reference-photo{position:relative;display:block;aspect-ratio:4/3;padding:0;border:0;border-radius:18px;overflow:hidden;background:#dfe4dc;cursor:zoom-in;box-shadow:0 12px 34px rgba(17,19,18,.07)}
.reference-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.reference-photo>span{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:rgba(17,19,18,.72);color:#fff;backdrop-filter:blur(8px);opacity:0;transform:translateY(4px);transition:.25s}
.reference-photo:hover img{transform:scale(1.035)}
.reference-photo:hover>span{opacity:1;transform:none}
.gallery-empty{grid-column:1/-1;padding:42px;border:1px dashed #cfd6cc;border-radius:18px;text-align:center;color:#69716b;background:#fff}
.gallery-cta{width:min(1180px,calc(100% - 14vw));margin:0 auto 100px;padding:32px 34px;border-radius:22px;background:#252b27;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:28px}
.gallery-cta h2{margin:0 0 6px;font-size:30px}.gallery-cta p{margin:0;color:#cbd2cd}

.dm-lightbox{position:fixed;inset:0;z-index:4000;display:none;align-items:center;justify-content:center;padding:44px 80px;background:rgba(8,10,9,.94);backdrop-filter:blur(10px)}
.dm-lightbox.is-open{display:flex}
.dm-lightbox figure{margin:0;max-width:min(1280px,calc(100vw - 190px));max-height:calc(100vh - 90px);display:flex;flex-direction:column;align-items:center;gap:10px}
.dm-lightbox figure img{display:block;max-width:100%;max-height:calc(100vh - 130px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.dm-lightbox figcaption{color:#d7ddd8;font-size:12px}
.dm-lightbox-close,.dm-lightbox-prev,.dm-lightbox-next{position:absolute;border:0;background:rgba(255,255,255,.10);color:#fff;cursor:pointer;display:grid;place-items:center;border-radius:999px;backdrop-filter:blur(8px)}
.dm-lightbox-close{top:22px;right:22px;width:48px;height:48px;font-size:20px}
.dm-lightbox-prev,.dm-lightbox-next{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:18px}.dm-lightbox-prev{left:20px}.dm-lightbox-next{right:20px}
body.dm-lightbox-open{overflow:hidden}

/* Footer: Mail + Öffnungszeiten */
.footer-opening{display:grid;gap:3px;margin-top:9px;padding-top:11px;border-top:1px solid rgba(255,255,255,.09)}
.footer-opening strong{font-size:12px;color:#fff}.footer-opening span{font-size:13px!important;color:#bbb!important}
.footer-area{line-height:1.5}

/* generelles Skalieren */
@media(max-width:980px){
  .reference-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery-hero{padding-top:165px}
}
@media(max-width:760px){
  .cta-v11{padding:0 20px 72px!important}
  .cta-v11-box{padding:26px 24px;flex-direction:column;align-items:flex-start}
  .cta-v11-box .btn{width:100%}

  .work-compare-section{padding:70px 20px 80px!important}
  .references-overview{padding-left:20px!important;padding-right:20px!important}
  .work-page-grid{gap:14px!important}
  .work-card{min-height:300px!important}
  .work-compare-card{padding:11px!important;gap:16px!important;border-radius:18px!important}
  .work-compare-copy{padding:8px 5px 10px!important}
  .work-compare-copy h3{font-size:28px!important}
  .gallery-hero{padding:150px 20px 54px}
  .gallery-hero h1{font-size:clamp(40px,12vw,58px)}
  .reference-gallery-section{padding:12px 20px 72px}
  .reference-gallery-grid{grid-template-columns:1fr;gap:14px}
  .reference-photo{border-radius:15px;aspect-ratio:4/3}
  .reference-photo>span{opacity:1;transform:none}
  .gallery-cta{width:calc(100% - 40px);margin-bottom:80px;padding:24px;flex-direction:column;align-items:flex-start}.gallery-cta .btn{width:100%}
  .dm-lightbox{padding:70px 12px 30px}.dm-lightbox figure{max-width:100%;max-height:100%}.dm-lightbox figure img{max-height:calc(100vh - 120px)}.dm-lightbox-prev{left:10px}.dm-lightbox-next{right:10px}.dm-lightbox-prev,.dm-lightbox-next{width:42px;height:42px;background:rgba(17,19,18,.55)}
}
@media(max-width:520px){
  .section-title h2,.intro h2,.contact h2{font-size:clamp(31px,10vw,43px)!important;letter-spacing:-1.2px!important}
  .sub-hero h1{font-size:clamp(36px,11vw,50px)!important}
  .work-card-copy h2{font-size:23px!important}
}

/* Rechtliche Seiten lesbarer */
.legal-page .legal-wrap{max-width:1040px}
.legal-page .legal-card p,.legal-page .legal-card li{font-size:16px!important;line-height:1.78!important}
.legal-page .legal-card h2{font-size:28px!important;line-height:1.2}

/* =========================================================
   V36 — harter Scroll-/Referenzen-/Mobile-Fix
   ========================================================= */

/* Nur das Dokument selbst scrollt. Das verhindert festhängende/nested
   Scroll-Container, bei denen der Scrollbalken funktioniert, das Mausrad aber nicht. */
html{
  overflow-x:hidden!important;
  overflow-y:scroll!important;
  overscroll-behavior-y:auto!important;
}
body:not(.dm-lightbox-open){
  overflow-x:hidden!important;
  overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
  touch-action:auto!important;
}
html.dm-lightbox-open,
body.dm-lightbox-open{
  overflow:hidden!important;
}

/* Referenzen-CTA: unabhängig von älteren Styles immer im sichtbaren Viewport. */
#main>.cta-v11{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 max(20px,7vw) 96px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:stretch!important;
  background:#f7f5f0!important;
  transform:none!important;
  left:auto!important;
  right:auto!important;
}
#main>.cta-v11>.cta-v11-box{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1180px!important;
  margin:0!important;
  transform:none!important;
  left:auto!important;
  right:auto!important;
}

/* Desktop: Dropdown erst durch die 2-Sekunden-JS-Klasse öffnen.
   Ein normaler Klick auf Leistungen bleibt ein echter Seitenlink. */
@media(min-width:1181px){
  .nav-services>.services-trigger{cursor:pointer!important}
}

/* Tablet / Touch: übersichtliche Direktlinks statt schwer bedienbarer Hover-Menüs. */
@media(max-width:1180px){
  .nav-services .service-dropdown-cms,
  .nav-legal .nav-legal-menu{
    display:none!important;
  }
  .nav-legal-trigger{
    display:flex!important;
  }
}

/* ---------- Smartphone ---------- */
@media(max-width:760px){
  /* Obere Laufschrift auf Handy als ruhige, lesbare Einsatzgebietszeile. */
  .topbar-track{
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    animation:none!important;
    justify-content:center!important;
    gap:0!important;
    padding:0 10px!important;
    box-sizing:border-box!important;
  }
  .topbar-track>span{display:none!important}
  .topbar-track>span:nth-child(2){
    display:inline-flex!important;
    width:auto!important;
    max-width:100%!important;
    justify-content:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:11px!important;
    line-height:1!important;
  }

  /* Header kompakter und ohne seitliches Drücken. */
  .site-header{
    top:30px!important;
    height:82px!important;
    padding:0 14px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 42px 46px!important;
    gap:9px!important;
    box-sizing:border-box!important;
  }
  .brand.dm-brand{
    grid-column:1!important;
    min-width:0!important;
    max-width:100%!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .brand.dm-brand .brand-mark{
    width:44px!important;
    height:44px!important;
    max-width:44px!important;
  }
  .brand-copy{min-width:0!important;max-width:100%!important}
  .brand-copy strong{
    display:block!important;
    max-width:100%!important;
    font-size:13px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .brand-copy small{
    font-size:6.5px!important;
    letter-spacing:.22em!important;
    margin-top:5px!important;
    white-space:nowrap!important;
  }
  .menu-toggle{
    grid-column:2!important;
    justify-self:center!important;
    width:40px!important;
    padding:0 4px!important;
  }
  .menu-toggle span{height:3px!important;margin:6px 0!important}
  .header-actions{
    grid-column:3!important;
    justify-self:end!important;
    gap:0!important;
  }
  .header-actions .social-btn:not(.wa),
  .header-actions .header-cta{display:none!important}
  .header-actions .social-btn.wa{
    display:grid!important;
    width:44px!important;
    height:44px!important;
    font-size:20px!important;
  }
  .main-nav{
    top:82px!important;
    left:12px!important;
    right:12px!important;
    max-height:calc(100vh - 132px)!important;
  }

  /* Start-Hero: kein abgeschnittener Google-Kasten mehr. */
  .hero{
    min-height:auto!important;
    display:block!important;
    padding:128px 20px 48px!important;
  }
  .hero-content{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .hero-brand-mini{margin-bottom:14px!important;padding:7px 11px 7px 8px!important}
  .hero-brand-mini img{width:32px!important;height:32px!important}
  .hero-kicker{
    max-width:100%!important;
    padding:8px 11px!important;
    font-size:10px!important;
    letter-spacing:.08em!important;
  }
  .hero h1{
    margin:18px 0 14px!important;
    font-size:clamp(35px,10.6vw,48px)!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
  }
  .hero p{font-size:16px!important;line-height:1.58!important}
  .hero-badges{gap:7px!important;margin-top:14px!important}
  .hero-badges span{padding:8px 10px!important;font-size:11px!important}
  .hero-points{margin-top:18px!important;gap:7px!important}
  .hero-points span{font-size:14px!important;padding-bottom:5px!important}
  .hero-actions{margin-top:22px!important;gap:10px!important}
  .hero-actions .btn{min-width:0!important;min-height:50px!important;padding:12px 16px!important}
  .hero-eyecatcher{
    position:relative!important;
    right:auto!important;
    left:auto!important;
    bottom:auto!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin:18px 0 0!important;
    padding:15px 16px!important;
    transform:none!important;
  }
  .hero-eyecatcher:hover{transform:none!important}
  .hero-eyecatcher-score strong{font-size:38px!important}
  .hero-eyecatcher-stars{font-size:16px!important}
  .hero-eyecatcher-foot{font-size:10px!important}

  /* Referenzen unten garantiert innerhalb der Handybreite. */
  #main>.cta-v11{
    padding:0 20px 72px!important;
  }
  #main>.cta-v11>.cta-v11-box{
    width:100%!important;
    max-width:100%!important;
    padding:24px 20px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:18px!important;
  }
  #main>.cta-v11>.cta-v11-box h2{font-size:30px!important}
  #main>.cta-v11>.cta-v11-box .btn{width:100%!important;min-width:0!important}

  /* Untere Kontaktleiste etwas kompakter, damit weniger Inhalt verdeckt wird. */
  body:not(.dm-lightbox-open){padding-bottom:66px!important}
  .mobile-contact-bar{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    gap:5px!important;
    padding:6px!important;
    border-radius:16px!important;
  }
  .mobile-contact-bar a{
    min-height:42px!important;
    padding:0 6px!important;
    gap:5px!important;
    font-size:12px!important;
    border-radius:11px!important;
    white-space:nowrap!important;
  }
}

@media(max-width:390px){
  .site-header{grid-template-columns:minmax(0,1fr) 38px 42px!important;padding:0 10px!important;gap:7px!important}
  .brand.dm-brand .brand-mark{width:40px!important;height:40px!important;max-width:40px!important}
  .brand-copy strong{font-size:12px!important}
  .brand-copy small{font-size:6px!important}
  .header-actions .social-btn.wa{width:40px!important;height:40px!important}
  .hero{padding-left:18px!important;padding-right:18px!important}
  .mobile-contact-bar a{font-size:11px!important}
}

/* =========================================================
   V37 — Responsive Final
   Desktop ab 1025 px bleibt bewusst unverändert.
   Optimierung: 1024 / 768 / 430 / 375 / 320 px
   ========================================================= */

/* ---------- Große Tablets / Querformat: bis 1024 px ---------- */
@media (max-width:1024px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:clip!important;
  }
  body:not(.dm-lightbox-open){
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  main,section,header,footer,
  .site-header,.site-footer,
  .hero,.sub-hero,.section-white,.section-dark,.contact,
  .intro-grid,.home-owner-inner,.hp-home-services,.hp-home-services-cta,
  .contact-premium,.detail-grid,.service-compare-inner,.about-grid-v15,
  .work-page-grid,.work-compare-list,.work-compare-card,
  .premium-service-grid,.premium-service-card,.premium-service-content,
  .all-services-grid,.quality-points-grid,.reference-gallery-grid,
  .gallery-hero-inner,.gallery-cta,.legal-inner{
    min-width:0!important;
    max-width:100%;
  }

  img,video,iframe,svg,canvas{
    max-width:100%!important;
  }

  .site-header{
    padding-left:clamp(20px,4vw,40px)!important;
    padding-right:clamp(20px,4vw,40px)!important;
  }
  .brand.dm-brand{min-width:0!important;max-width:calc(100% - 120px)!important}
  .brand-copy{min-width:0!important}
  .brand-copy strong,.brand-copy small{max-width:100%!important}
  .main-nav{
    left:clamp(18px,4vw,40px)!important;
    right:clamp(18px,4vw,40px)!important;
    width:auto!important;
    max-width:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }

  .hero{
    padding-left:clamp(34px,6vw,64px)!important;
    padding-right:clamp(34px,6vw,64px)!important;
  }
  .hero-content{min-width:0!important}
  .hero h1,.sub-hero h1,.section-title h2,.intro h2,
  .home-owner-copy h2,.detail-copy h2,.service-compare-copy h2,
  .about-copy-v15 h2,.gallery-hero h1,.legal-inner h1{
    overflow-wrap:normal;
    word-break:normal;
    hyphens:auto;
  }

  .section-white,.section-dark,.contact,.home-owner,.service-compare,
  .about-main,.legal-page,.all-services-page,.work-compare-section,
  .references-overview,.reference-gallery-section{
    padding-left:clamp(34px,6vw,64px)!important;
    padding-right:clamp(34px,6vw,64px)!important;
  }

  .sub-hero,.gallery-hero{
    padding-left:clamp(34px,6vw,64px)!important;
    padding-right:clamp(34px,6vw,64px)!important;
  }

  .contact-premium,.detail-grid,.service-compare-inner,.about-grid-v15,
  .home-owner-inner,.work-compare-card{
    width:100%!important;
  }
  .contact-premium>* ,.detail-grid>* ,.service-compare-inner>* ,
  .about-grid-v15>* ,.home-owner-inner>* ,.work-compare-card>*{
    min-width:0!important;
  }

  .form-dark,
  .form-dark input,.form-dark textarea,.form-dark select,
  .upload-box,.contact-methods,.contact-methods>*{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .site-footer{
    padding-left:clamp(34px,6vw,64px)!important;
    padding-right:clamp(34px,6vw,64px)!important;
  }
  .footer-brand,.footer-col{min-width:0!important}
  .footer-col a,.footer-col span,.footer-brand p{
    overflow-wrap:anywhere;
  }
  .floating-whatsapp{display:none!important}
}

/* ---------- Standard-Tablets / iPad: bis 768 px ---------- */
@media (max-width:768px){
  :root{--dm-mobile-pad:28px}

  .topbar{
    height:30px!important;
    font-size:12px!important;
  }
  .topbar-track{
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
    animation:none!important;
    justify-content:center!important;
    gap:0!important;
    padding:0 12px!important;
  }
  .topbar-track>span{display:none!important}
  .topbar-track>span:nth-child(2){
    display:inline-flex!important;
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:11px!important;
    line-height:1!important;
  }

  .site-header{
    top:30px!important;
    height:82px!important;
    padding:0 var(--dm-mobile-pad)!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px 46px!important;
    gap:12px!important;
  }
  .brand.dm-brand{
    grid-column:1!important;
    min-width:0!important;
    max-width:100%!important;
    gap:10px!important;
    overflow:hidden!important;
  }
  .brand.dm-brand .brand-mark{
    width:46px!important;
    height:46px!important;
    max-width:46px!important;
    flex:0 0 46px!important;
  }
  .brand-copy{min-width:0!important;overflow:hidden!important}
  .brand-copy strong{
    display:block!important;
    font-size:14px!important;
    line-height:1.08!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .brand-copy small{
    display:block!important;
    margin-top:5px!important;
    font-size:6.5px!important;
    letter-spacing:.22em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .menu-toggle{
    grid-column:2!important;
    justify-self:center!important;
    width:42px!important;
    padding:0 4px!important;
  }
  .menu-toggle span{height:3px!important;margin:6px 0!important}
  .header-actions{
    grid-column:3!important;
    justify-self:end!important;
    gap:0!important;
  }
  .header-actions .social-btn:not(.wa),.header-actions .header-cta{display:none!important}
  .header-actions .social-btn.wa{
    display:grid!important;
    width:44px!important;
    height:44px!important;
    font-size:20px!important;
  }
  .main-nav{
    top:82px!important;
    left:16px!important;
    right:16px!important;
    width:auto!important;
    max-height:calc(100dvh - 128px)!important;
    padding:16px!important;
    border-radius:16px!important;
    gap:3px!important;
  }
  .main-nav> a,.main-nav .services-trigger,.main-nav .nav-legal-trigger{
    width:100%!important;
    justify-content:flex-start!important;
    padding:11px 12px!important;
    font-size:16px!important;
    line-height:1.2!important;
  }

  .hero{
    min-height:auto!important;
    display:block!important;
    padding:132px var(--dm-mobile-pad) 54px!important;
  }
  .hero-content{
    width:100%!important;
    max-width:660px!important;
    margin:0!important;
  }
  .hero-brand-mini{margin-bottom:14px!important}
  .hero-kicker{
    max-width:100%!important;
    white-space:normal!important;
    line-height:1.35!important;
  }
  .hero h1{
    max-width:680px!important;
    margin:18px 0 14px!important;
    font-size:clamp(42px,7.3vw,58px)!important;
    line-height:1.02!important;
    letter-spacing:-.04em!important;
  }
  .hero p{max-width:62ch!important;font-size:17px!important;line-height:1.6!important}
  .hero-badges{gap:8px!important;margin-top:16px!important}
  .hero-badges span{padding:9px 12px!important;font-size:12px!important}
  .hero-points{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px 16px!important;
    margin-top:18px!important;
  }
  .hero-points span{font-size:14px!important;line-height:1.35!important}
  .hero-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    margin-top:22px!important;
  }
  .hero-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:50px!important;
    padding:12px 15px!important;
  }
  .hero-scroll-note{display:none!important}
  .hero-eyecatcher{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:420px!important;
    margin:20px 0 0!important;
    padding:16px 18px!important;
    transform:none!important;
  }
  .hero-eyecatcher:hover{transform:none!important}
  .hero-eyecatcher-score strong{font-size:40px!important}

  .sub-hero{
    min-height:auto!important;
    padding:142px var(--dm-mobile-pad) 58px!important;
  }
  .sub-hero-content{width:100%!important;max-width:680px!important}
  .sub-hero h1{
    font-size:clamp(40px,8vw,58px)!important;
    letter-spacing:-.04em!important;
    text-wrap:balance;
  }
  .sub-hero p{font-size:17px!important;line-height:1.62!important}

  .section-white,.section-dark,.contact,.home-owner,.service-compare,
  .about-main,.legal-page,.all-services-page,.work-compare-section,
  .references-overview,.reference-gallery-section{
    padding-left:var(--dm-mobile-pad)!important;
    padding-right:var(--dm-mobile-pad)!important;
  }
  .section-white,.section-dark,.contact{padding-top:64px!important;padding-bottom:64px!important}
  .section-title{max-width:100%!important;margin-bottom:36px!important;text-align:left!important}
  .section-title h2,.intro h2,.contact h2{
    font-size:clamp(34px,7vw,48px)!important;
    line-height:1.06!important;
    letter-spacing:-.035em!important;
  }
  .section-title p,.intro-grid p:last-child{font-size:16px!important;line-height:1.65!important}

  .intro-grid,.home-owner-inner,.contact-premium,.detail-grid,.service-compare-inner,
  .about-grid-v15,.work-compare-card{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  .home-owner{padding-top:64px!important;padding-bottom:64px!important}
  .home-owner-copy h2{max-width:none!important;font-size:clamp(34px,7vw,48px)!important}

  .hp-home-services{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .hp-home-service{height:290px!important;min-height:290px!important}
  .hp-home-service-content{left:22px!important;right:22px!important;bottom:22px!important}
  .hp-home-service-content h3{font-size:25px!important}
  .hp-home-service-content li{font-size:13px!important}
  .hp-home-services-cta{
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:22px!important;
  }
  .hp-home-services-cta .btn{width:100%!important;min-width:0!important}

  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .quality-points-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .ref-stage,.service-slideshow{height:auto!important;min-height:0!important;aspect-ratio:16/10!important}
  .ref-thumbs,.service-thumbs{max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain}
  .thumb{flex:0 0 92px!important}

  .work-page-grid,.review-page-grid,.premium-service-grid,.all-services-grid{
    grid-template-columns:1fr!important;
  }
  .work-card{min-height:320px!important}
  .work-compare-section{padding-top:68px!important;padding-bottom:76px!important}
  .work-compare-card{padding:14px!important;border-radius:20px!important}
  .ba-compare{aspect-ratio:4/3!important}

  .premium-service-card:last-child:nth-child(odd){display:flex!important;grid-template-columns:none!important;min-height:0!important}
  .premium-service-media,.premium-service-card:last-child:nth-child(odd) .premium-service-media{height:auto!important;aspect-ratio:16/9!important}
  .premium-service-content,.premium-service-card:last-child:nth-child(odd) .premium-service-content{padding:24px!important}
  .premium-service-actions{width:100%!important}

  .contact-premium{gap:34px!important}
  .contact-copy>p{font-size:17px!important;line-height:1.62!important}
  .contact-methods>a,.contact-methods>div{
    grid-template-columns:52px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .contact-methods i{width:52px!important;height:52px!important}
  .form-dark{padding:24px!important;border-radius:18px!important}
  .form-dark .form-row{grid-template-columns:1fr!important}
  .form-dark input,.form-dark textarea,.form-dark select{font-size:16px!important}

  .about-visual-v15{min-height:420px!important}
  .service-detail{padding:64px var(--dm-mobile-pad) 72px!important}
  .detail-grid,.detail-copy,.service-side,.service-slideshow{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .detail-grid h2{font-size:clamp(32px,7vw,44px)!important}
  .service-compare{padding-top:64px!important;padding-bottom:64px!important}

  .review-showcase-head{width:calc(100% - 56px)!important}
  .review-coverflow{height:560px!important}
  .review-slide{width:calc(100vw - 72px)!important;max-width:620px!important;padding:30px!important}

  .gallery-hero{padding:145px var(--dm-mobile-pad) 54px!important}
  .reference-gallery-section{padding-top:12px!important;padding-bottom:72px!important}
  .reference-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .gallery-cta{width:calc(100% - (2 * var(--dm-mobile-pad)))!important;max-width:none!important}

  .legal-page{padding-top:140px!important;padding-bottom:72px!important}
  .legal-inner,.legal-wrap{width:100%!important;max-width:100%!important}
  .legal-inner h1,.legal-wrap h1{font-size:clamp(38px,8vw,54px)!important;letter-spacing:-.04em!important}
  .legal-card{padding:24px!important}

  .site-footer{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:28px 34px!important;
    padding:42px var(--dm-mobile-pad) calc(28px + env(safe-area-inset-bottom))!important;
  }
  .footer-brand{grid-column:1/-1!important}
  .footer-brand .dm-footer-logo{width:min(260px,100%)!important}
  .footer-bottom,.footer-credit{grid-column:1/-1!important}

  body:not(.dm-lightbox-open){padding-bottom:calc(68px + env(safe-area-inset-bottom))!important}
  .mobile-contact-bar{
    left:10px!important;
    right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    padding:6px!important;
    gap:5px!important;
    border-radius:16px!important;
  }
  .mobile-contact-bar a{
    min-width:0!important;
    min-height:42px!important;
    padding:0 7px!important;
    gap:5px!important;
    border-radius:11px!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
  }
  .mobile-contact-bar a i{flex:0 0 auto}
}

/* ---------- Moderne Smartphones: bis 430 px ---------- */
@media (max-width:430px){
  :root{--dm-mobile-pad:20px}

  .site-header{
    padding:0 14px!important;
    grid-template-columns:minmax(0,1fr) 40px 44px!important;
    gap:8px!important;
  }
  .brand.dm-brand{gap:8px!important}
  .brand.dm-brand .brand-mark{width:42px!important;height:42px!important;max-width:42px!important;flex-basis:42px!important}
  .brand-copy strong{font-size:13px!important}
  .brand-copy small{font-size:6px!important;letter-spacing:.20em!important}
  .menu-toggle{width:38px!important}
  .header-actions .social-btn.wa{width:42px!important;height:42px!important}

  .hero{padding-top:128px!important;padding-bottom:48px!important}
  .hero-brand-mini{padding:7px 10px 7px 8px!important}
  .hero-brand-mini img{width:32px!important;height:32px!important}
  .hero-brand-mini span{font-size:10px!important}
  .hero-kicker{font-size:10px!important;letter-spacing:.08em!important;padding:8px 10px!important}
  .hero h1{
    max-width:100%!important;
    font-size:clamp(36px,10.5vw,46px)!important;
    line-height:1.03!important;
  }
  .hero p{font-size:16px!important;line-height:1.58!important}
  .hero-badges{display:grid!important;grid-template-columns:1fr 1fr!important}
  .hero-badges span{justify-content:center!important;text-align:center!important;font-size:11px!important;padding:8px 9px!important}
  .hero-badges span:last-child:nth-child(odd){grid-column:1/-1!important}
  .hero-points{grid-template-columns:1fr!important;gap:7px!important}
  .hero-points span{font-size:14px!important;padding-bottom:6px!important}
  .hero-actions{grid-template-columns:1fr!important}
  .hero-actions .btn{min-height:50px!important;font-size:14px!important}
  .hero-eyecatcher{max-width:100%!important;margin-top:18px!important;padding:15px 16px!important;border-radius:17px!important}
  .hero-eyecatcher-score strong{font-size:38px!important}
  .hero-eyecatcher-foot{font-size:10px!important;line-height:1.4!important}

  .sub-hero{padding-top:132px!important;padding-bottom:50px!important}
  .sub-hero h1{font-size:clamp(36px,10vw,46px)!important}
  .sub-hero p{font-size:16px!important}

  .section-white,.section-dark,.contact{padding-top:58px!important;padding-bottom:58px!important}
  .section-title{margin-bottom:32px!important}
  .section-title h2,.intro h2,.contact h2,.home-owner-copy h2,
  .service-compare-copy h2,.about-copy-v15 h2{
    font-size:clamp(31px,9vw,40px)!important;
    line-height:1.07!important;
  }

  .hp-home-services{grid-template-columns:1fr!important;gap:14px!important}
  .hp-home-service{height:285px!important;min-height:285px!important}
  .hp-home-service-content h3{font-size:27px!important}

  .why-grid,.quality-points-grid{grid-template-columns:1fr!important}
  .home-owner-visual{min-height:330px!important}
  .home-owner-portrait{width:145px!important;height:200px!important}

  .work-card{min-height:285px!important}
  .work-card-copy{left:18px!important;right:18px!important;bottom:17px!important}
  .work-card-copy h2{font-size:22px!important}
  .work-compare-copy h3{font-size:27px!important}
  .ba-chip{top:10px!important;padding:7px 9px!important;font-size:9px!important}
  .ba-chip.before{left:10px!important}.ba-chip.after{right:10px!important}
  .ba-handle::after{width:42px!important;height:42px!important}

  .premium-service-content,.premium-service-card:last-child:nth-child(odd) .premium-service-content{padding:22px 20px!important}
  .premium-service-copy h3{font-size:25px!important}
  .premium-service-copy ul{grid-template-columns:1fr!important}
  .premium-service-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .premium-service-actions .btn,.premium-service-actions a.btn.premium-secondary{width:100%!important;min-width:0!important}

  .contact-methods>a,.contact-methods>div{grid-template-columns:48px minmax(0,1fr)!important;gap:12px!important}
  .contact-methods i{width:48px!important;height:48px!important}
  .contact-methods strong{font-size:15px!important}
  .contact-methods small{font-size:12px!important}
  .form-dark{padding:20px!important}
  .form-dark h3{font-size:27px!important}

  .service-detail{padding-top:58px!important;padding-bottom:64px!important}
  .detail-grid{gap:26px!important}
  .detail-grid h2{font-size:clamp(30px,8.5vw,38px)!important}
  .detail-grid p,.check-list li{font-size:16px!important}
  .service-slideshow{aspect-ratio:4/3!important}

  .review-showcase-head{width:calc(100% - 40px)!important}
  .review-showcase-head h2{font-size:clamp(34px,9vw,44px)!important}
  .review-coverflow{height:560px!important}
  .review-slide{width:calc(100vw - 40px)!important;min-height:350px!important;padding:26px 22px!important}
  .review-slide blockquote{font-size:18px!important}

  .reference-gallery-grid{grid-template-columns:1fr!important}
  .gallery-hero{padding-top:132px!important}
  .gallery-hero h1{font-size:clamp(36px,10vw,46px)!important}
  .gallery-cta{width:calc(100% - 40px)!important;padding:22px!important;flex-direction:column!important;align-items:stretch!important}
  .gallery-cta .btn{width:100%!important;min-width:0!important}

  .legal-page{padding-top:130px!important}
  .legal-inner h1,.legal-wrap h1{font-size:clamp(36px,10vw,44px)!important}
  .legal-card{padding:20px!important;border-radius:16px!important}
  .legal-page .legal-card h2{font-size:24px!important}
  .legal-page .legal-card p,.legal-page .legal-card li{font-size:15px!important;line-height:1.7!important}

  .site-footer{
    grid-template-columns:1fr!important;
    gap:24px!important;
    padding-top:38px!important;
  }
  .footer-brand,.footer-col,.footer-bottom,.footer-credit{grid-column:1!important}
  .footer-credit{text-align:left!important}

  .mobile-contact-bar a{font-size:11.5px!important}
}

/* ---------- Kompakte Smartphones: bis 375 px ---------- */
@media (max-width:375px){
  :root{--dm-mobile-pad:18px}

  .site-header{
    padding:0 10px!important;
    grid-template-columns:minmax(0,1fr) 36px 40px!important;
    gap:6px!important;
  }
  .brand.dm-brand .brand-mark{width:38px!important;height:38px!important;max-width:38px!important;flex-basis:38px!important}
  .brand-copy strong{font-size:11.5px!important}
  .brand-copy small{font-size:5.5px!important;letter-spacing:.16em!important}
  .menu-toggle{width:34px!important;padding:0 3px!important}
  .menu-toggle span{margin:5px 0!important}
  .header-actions .social-btn.wa{width:38px!important;height:38px!important;font-size:18px!important}

  .topbar-track>span:nth-child(2){font-size:10px!important}
  .hero{padding-top:124px!important}
  .hero h1{font-size:36px!important;letter-spacing:-.035em!important}
  .hero-kicker{font-size:9px!important}
  .hero-badges{grid-template-columns:1fr!important}
  .hero-badges span:last-child:nth-child(odd){grid-column:auto!important}

  .sub-hero h1{font-size:35px!important}
  .section-title h2,.intro h2,.contact h2,.home-owner-copy h2,
  .service-compare-copy h2,.about-copy-v15 h2{font-size:31px!important}

  .hp-home-service{height:270px!important;min-height:270px!important}
  .hp-home-service-content{left:19px!important;right:19px!important;bottom:19px!important}
  .hp-home-service-content h3{font-size:25px!important}

  .premium-service-copy h3{font-size:23px!important}
  .premium-service-short,.premium-service-copy li{font-size:13px!important}

  .form-dark{padding:18px!important}
  .form-dark input,.form-dark textarea,.form-dark select{font-size:16px!important}
  .contact-methods>a,.contact-methods>div{grid-template-columns:44px minmax(0,1fr)!important}
  .contact-methods i{width:44px!important;height:44px!important}

  .mobile-contact-bar{left:6px!important;right:6px!important;padding:5px!important;gap:4px!important}
  .mobile-contact-bar a{min-height:40px!important;padding:0 5px!important;font-size:10.5px!important}
  .mobile-contact-bar a i{font-size:12px!important}
}

/* ---------- Sehr kleine Smartphones: bis 320 px ---------- */
@media (max-width:320px){
  :root{--dm-mobile-pad:14px}

  .site-header{
    padding:0 8px!important;
    grid-template-columns:minmax(0,1fr) 34px 38px!important;
    gap:5px!important;
  }
  .brand.dm-brand{gap:6px!important}
  .brand.dm-brand .brand-mark{width:34px!important;height:34px!important;max-width:34px!important;flex-basis:34px!important}
  .brand-copy strong{font-size:10.5px!important}
  .brand-copy small{font-size:5px!important;letter-spacing:.12em!important}
  .menu-toggle{width:32px!important}
  .header-actions .social-btn.wa{width:36px!important;height:36px!important}
  .main-nav{left:8px!important;right:8px!important;padding:13px!important}
  .main-nav> a,.main-nav .services-trigger,.main-nav .nav-legal-trigger{font-size:15px!important;padding:10px!important}

  .topbar-track>span:nth-child(2){font-size:9.5px!important}
  .hero{padding-top:122px!important;padding-bottom:44px!important}
  .hero h1{font-size:32px!important}
  .hero p{font-size:15px!important}
  .hero-brand-mini{max-width:100%!important}
  .hero-kicker{width:100%!important;justify-content:flex-start!important}
  .hero-actions .btn{font-size:13px!important;padding-left:10px!important;padding-right:10px!important}
  .hero-eyecatcher-score strong{font-size:34px!important}

  .sub-hero{padding-top:126px!important}
  .sub-hero h1{font-size:32px!important}
  .sub-hero p{font-size:15px!important}

  .section-title h2,.intro h2,.contact h2,.home-owner-copy h2,
  .service-compare-copy h2,.about-copy-v15 h2{font-size:29px!important}
  .section-title p,.intro-grid p:last-child,.contact-copy>p{font-size:15px!important}

  .home-owner-visual{min-height:285px!important}
  .home-owner-portrait{width:125px!important;height:172px!important;border-width:4px!important}

  .hp-home-service{height:255px!important;min-height:255px!important}
  .hp-home-service-content h3{font-size:23px!important}
  .hp-home-service-content li{font-size:12.5px!important}

  .work-card{min-height:260px!important}
  .work-card-copy h2{font-size:20px!important}
  .work-compare-copy h3{font-size:24px!important}

  .premium-service-content,.premium-service-card:last-child:nth-child(odd) .premium-service-content{padding:18px 16px!important}
  .premium-service-copy h3{font-size:22px!important}

  .detail-grid,.detail-copy,.service-side,.service-slideshow{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .detail-grid h2{font-size:28px!important;overflow-wrap:anywhere!important}
  .detail-grid p,.check-list li{font-size:15px!important}

  .contact-methods>a,.contact-methods>div{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important}
  .contact-methods i{width:40px!important;height:40px!important;font-size:15px!important}
  .contact-methods strong{font-size:14px!important}
  .contact-methods small{font-size:11px!important}
  .form-dark{padding:16px!important}
  .form-dark h3{font-size:24px!important}

  .review-slide{width:calc(100vw - 28px)!important;padding:22px 18px!important}
  .review-slide blockquote{font-size:17px!important}

  .legal-card{padding:16px!important}
  .legal-inner h1,.legal-wrap h1{font-size:32px!important}

  body:not(.dm-lightbox-open){padding-bottom:0!important}
  .mobile-contact-bar{display:none!important}
}

/* =========================================================
   V38 — Mobile Hero / Google-Karte / Kontaktleiste
   Nur Mobilansicht. Desktop bleibt unverändert.
   ========================================================= */
@media (max-width:760px){
  /* Der Bewertungslink ist ein <a>. Sobald er mobil relativ positioniert
     wird, muss er explizit block/grid sein, sonst zerfällt die weiße Karte
     in einzelne Inline-Fragmente. */
  .hero-eyecatcher{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "google google"
      "score stars"
      "foot foot"!important;
    align-items:center!important;
    column-gap:14px!important;
    row-gap:8px!important;
    width:100%!important;
    max-width:420px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    isolation:isolate!important;
    text-decoration:none!important;
    background:#fff!important;
    border:1px solid rgba(255,255,255,.78)!important;
    box-shadow:0 18px 46px rgba(0,0,0,.22)!important;
  }
  .hero-eyecatcher-top{
    grid-area:google!important;
    min-width:0!important;
    margin:0!important;
  }
  .hero-eyecatcher-score{
    grid-area:score!important;
    min-width:0!important;
    margin:0!important;
  }
  .hero-eyecatcher-stars{
    grid-area:stars!important;
    margin:0!important;
    justify-self:end!important;
    white-space:nowrap!important;
  }
  .hero-eyecatcher-foot{
    grid-area:foot!important;
    min-width:0!important;
    margin:0!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }

  /* Die Leiste bleibt erreichbar, nimmt mobil aber deutlich weniger Sichtfläche ein. */
  .mobile-contact-bar{
    min-height:0!important;
    padding:5px!important;
    gap:4px!important;
    border-radius:15px!important;
    background:rgba(18,20,19,.90)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.24)!important;
  }
  .mobile-contact-bar a{
    min-height:39px!important;
    height:39px!important;
    padding:0 7px!important;
    border-radius:11px!important;
    font-size:11.5px!important;
    line-height:1!important;
  }
}

@media (max-width:430px){
  .hero-eyecatcher{
    max-width:none!important;
    margin-top:20px!important;
    padding:16px 17px!important;
    border-radius:17px!important;
  }
  .hero-eyecatcher-label{
    font-size:10px!important;
    letter-spacing:.085em!important;
  }
  .hero-eyecatcher-score strong{
    font-size:40px!important;
    line-height:.95!important;
  }
  .hero-eyecatcher-score span{
    font-size:12px!important;
    padding-bottom:3px!important;
  }
  .hero-eyecatcher-stars{
    font-size:16px!important;
    letter-spacing:1px!important;
  }
  .hero-eyecatcher-foot{
    font-size:10.5px!important;
    line-height:1.35!important;
  }

  .mobile-contact-bar{
    left:10px!important;
    right:10px!important;
    bottom:calc(7px + env(safe-area-inset-bottom))!important;
  }
  .mobile-contact-bar a{
    font-size:11px!important;
    gap:4px!important;
  }
}

@media (max-width:375px){
  .hero-eyecatcher{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "google"
      "score"
      "stars"
      "foot"!important;
    row-gap:7px!important;
  }
  .hero-eyecatcher-stars{justify-self:start!important}
  .mobile-contact-bar a{font-size:10.5px!important;padding:0 4px!important}
}

/* =========================================================
   V41 — Mobile Hero ruhiger und luftiger
   Gilt ausschließlich auf Smartphones. Desktop bleibt unverändert.
   ========================================================= */
@media (max-width:430px){
  /* Doppelte Marken-/Ortsinfos stehen bereits im Header/Topbar. */
  .hero-brand-mini,
  .hero-kicker{
    display:none!important;
  }

  .hero{
    padding-top:132px!important;
    padding-bottom:52px!important;
  }
  .hero-content{
    max-width:100%!important;
  }
  .hero h1{
    margin:0 0 20px!important;
    max-width:100%!important;
    font-size:clamp(34px,9.2vw,40px)!important;
    line-height:1.07!important;
    letter-spacing:-.035em!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-wrap:balance!important;
  }
  .hero p{
    margin:0!important;
    max-width:100%!important;
    font-size:15.5px!important;
    line-height:1.58!important;
    hyphens:none!important;
    -webkit-hyphens:none!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  /* Die Service-Chips wiederholen die Leistungsübersicht weiter unten. */
  .hero-badges{
    display:none!important;
  }

  .hero-points{
    margin-top:26px!important;
    gap:10px!important;
  }
  .hero-points span{
    padding:0 0 9px!important;
    font-size:14.5px!important;
    line-height:1.35!important;
  }

  .hero-actions{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
    gap:9px!important;
    margin-top:26px!important;
  }
  .hero-actions .btn{
    min-height:49px!important;
    padding:10px 10px!important;
    font-size:12px!important;
    line-height:1.15!important;
    white-space:normal!important;
    text-align:center!important;
  }

  /* Bewertung kompakt statt als großer eigener Block. */
  .hero-eyecatcher{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    grid-template-areas:
      "top top"
      "score stars"
      "foot foot"!important;
    align-items:center!important;
    gap:8px 12px!important;
    margin-top:24px!important;
    padding:15px 16px!important;
    border-radius:18px!important;
  }
  .hero-eyecatcher-top{
    grid-area:top!important;
    margin:0!important;
  }
  .hero-eyecatcher-score{
    grid-area:score!important;
    align-items:baseline!important;
  }
  .hero-eyecatcher-score strong{
    font-size:34px!important;
    letter-spacing:-1.5px!important;
  }
  .hero-eyecatcher-score span{
    padding-bottom:0!important;
    font-size:12px!important;
  }
  .hero-eyecatcher-stars{
    grid-area:stars!important;
    justify-self:end!important;
    margin:0!important;
    font-size:15px!important;
    letter-spacing:1px!important;
    white-space:nowrap!important;
  }
  .hero-eyecatcher-foot{
    grid-area:foot!important;
    margin:0!important;
    font-size:10.5px!important;
    line-height:1.35!important;
  }

  /* Auf kleinen Handys verdeckt die feste Leiste zu viel Inhalt.
     Call/WhatsApp/Anfrage bleiben im Hero und Footer erreichbar. */
  .mobile-contact-bar{
    display:none!important;
  }
  body:not(.dm-lightbox-open){
    padding-bottom:0!important;
  }
}

@media (max-width:359px){
  .hero{
    padding-top:126px!important;
  }
  .hero h1{
    font-size:32px!important;
  }
  .hero p{
    font-size:15px!important;
  }
  .hero-actions{
    grid-template-columns:1fr!important;
  }
  .hero-actions .btn{
    font-size:13px!important;
  }
  .hero-eyecatcher{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "top"
      "score"
      "stars"
      "foot"!important;
  }
  .hero-eyecatcher-stars{
    justify-self:start!important;
  }
}


/* =========================================================
   V42 — Mobile Hero: kürzer, ruhiger, luftiger
   Nur Smartphones bis 430 px. Desktop/Tablet bleiben unverändert.
   ========================================================= */
.hero-title-mobile,
.hero-text-mobile{display:none}

@media (max-width:430px){
  .hero-title-desktop,
  .hero-text-desktop{display:none!important}
  .hero-title-mobile{display:block!important}
  .hero-text-mobile{display:block!important}

  .hero{
    padding-top:136px!important;
    padding-bottom:46px!important;
  }
  .hero-media::after{
    background:
      linear-gradient(180deg,rgba(27,31,28,.48) 0%,rgba(27,31,28,.68) 42%,rgba(27,31,28,.82) 100%),
      linear-gradient(90deg,rgba(27,31,28,.58),rgba(27,31,28,.34))!important;
  }
  .hero-video,
  .hero-bg-fallback{
    object-position:62% center!important;
    background-position:62% center!important;
  }
  .hero h1{
    max-width:11.5ch!important;
    margin:0 0 22px!important;
    font-size:clamp(36px,10.4vw,44px)!important;
    line-height:1.02!important;
    letter-spacing:-.043em!important;
    text-wrap:balance!important;
  }
  .hero p.hero-text-mobile{
    max-width:34ch!important;
    margin:0!important;
    font-size:16px!important;
    line-height:1.62!important;
    color:rgba(255,255,255,.92)!important;
  }

  .hero-points{
    margin-top:30px!important;
    gap:10px!important;
  }
  .hero-points span{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-height:46px!important;
    padding:11px 13px!important;
    border:1px solid rgba(255,255,255,.17)!important;
    border-radius:13px!important;
    background:rgba(20,24,21,.25)!important;
    backdrop-filter:blur(7px)!important;
    -webkit-backdrop-filter:blur(7px)!important;
    font-size:14px!important;
    line-height:1.25!important;
  }
  .hero-points span i{
    flex:0 0 auto!important;
    width:18px!important;
    text-align:center!important;
  }

  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:24px!important;
  }
  .hero-actions .btn{
    min-height:54px!important;
    width:100%!important;
    padding:12px 16px!important;
    border-radius:14px!important;
    font-size:13px!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  .hero-actions .btn-outline{
    background:rgba(17,19,18,.24)!important;
    border-color:rgba(255,255,255,.38)!important;
  }

  .hero-eyecatcher{
    margin-top:24px!important;
    padding:17px 18px!important;
    border-radius:18px!important;
  }
  .hero-eyecatcher-top{margin-bottom:2px!important}
  .hero-eyecatcher-score strong{font-size:36px!important}
  .hero-eyecatcher-foot{font-size:11px!important}
}

@media (max-width:375px){
  .hero{
    padding-top:132px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .hero h1{
    max-width:12ch!important;
    font-size:clamp(34px,10.2vw,39px)!important;
  }
  .hero p.hero-text-mobile{
    font-size:15.5px!important;
    line-height:1.58!important;
  }
  .hero-points span{
    min-height:44px!important;
    padding:10px 12px!important;
    font-size:13.5px!important;
  }
}

@media (max-width:330px){
  .hero{
    padding-top:128px!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .hero h1{
    font-size:32px!important;
    max-width:11.5ch!important;
  }
  .hero p.hero-text-mobile{font-size:15px!important}
  .hero-actions .btn{font-size:12.5px!important}
}

/* =========================================================
   V43 — Mobile Feinschliff
   Nur Smartphones bis 430 px. Desktop/Tablet bleiben unverändert.
   ========================================================= */
@media (max-width:430px){
  /* Keine unschönen Worttrennungen in Überschriften. */
  .hero h1,
  .sub-hero h1,
  .section-title h2,
  .intro h2,
  .home-owner-copy h2,
  .service-compare-copy h2,
  .work-card-copy h2,
  .premium-service-copy h3,
  .detail-grid h2,
  .about-copy-v15 h2{
    -webkit-hyphens:none!important;
    hyphens:none!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    text-wrap:balance!important;
  }

  /* Hero etwas ruhiger und mit natürlicheren Umbrüchen. */
  .hero{
    padding-bottom:42px!important;
  }
  .hero h1{
    max-width:15ch!important;
    margin-bottom:20px!important;
    font-size:clamp(35px,9.25vw,40px)!important;
    line-height:1.035!important;
    letter-spacing:-.038em!important;
  }
  .hero p.hero-text-mobile{
    max-width:32ch!important;
    font-size:15.5px!important;
    line-height:1.68!important;
  }

  /* Die drei Vorteile wirken als eine ruhige Einheit statt als drei Boxen. */
  .hero-points{
    gap:0!important;
    margin-top:28px!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:16px!important;
    background:rgba(18,22,19,.22)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
  }
  .hero-points span{
    min-height:48px!important;
    padding:12px 14px!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.13)!important;
    border-radius:0!important;
    background:transparent!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    font-size:14px!important;
  }
  .hero-points span:last-child{
    border-bottom:0!important;
  }
  .hero-points span i{
    width:20px!important;
  }
  .hero-actions{
    margin-top:20px!important;
    gap:9px!important;
  }
  .hero-actions .btn{
    min-height:52px!important;
    border-radius:13px!important;
  }
  .hero-eyecatcher{
    margin-top:20px!important;
  }

  /* Einleitung: bessere Zeilenumbrüche + weniger unnötiger Leerraum. */
  .intro{
    padding-top:54px!important;
    padding-bottom:56px!important;
  }
  .intro-grid{
    gap:22px!important;
  }
  .intro .eyebrow{
    margin-bottom:14px!important;
    line-height:1.45!important;
  }
  .intro h2{
    max-width:12.5ch!important;
    font-size:clamp(31px,8.5vw,36px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  .intro-grid p:last-child{
    max-width:35ch!important;
    margin:0!important;
    font-size:15.5px!important;
    line-height:1.72!important;
  }

  /* Auch die restlichen mobilen Überschriften etwas eleganter umbrechen. */
  .section-title h2,
  .home-owner-copy h2,
  .service-compare-copy h2,
  .about-copy-v15 h2{
    font-size:clamp(30px,8.4vw,36px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
  }
  .section-title p{
    line-height:1.7!important;
  }
}

@media (max-width:375px){
  .hero h1{
    max-width:14.5ch!important;
    font-size:34px!important;
  }
  .hero p.hero-text-mobile{
    max-width:31ch!important;
    font-size:15px!important;
  }
  .intro h2,
  .section-title h2,
  .home-owner-copy h2,
  .service-compare-copy h2,
  .about-copy-v15 h2{
    font-size:30px!important;
  }
}

@media (max-width:330px){
  .hero h1{
    max-width:100%!important;
    font-size:31px!important;
  }
  .intro h2,
  .section-title h2,
  .home-owner-copy h2,
  .service-compare-copy h2,
  .about-copy-v15 h2{
    font-size:28px!important;
  }
}