#hero-alt{display:none}
body.hero-v2 #hero-alt{display:block!important}
body.hero-v2 .hero-container{display:none!important;position:fixed!important;top:-300vh!important;left:-300vw!important;visibility:hidden!important;pointer-events:none!important;}
#hero-alt{position:relative;width:calc(100% - 56px);height:calc(100vh - 56px);min-height:600px;margin:28px;border-radius:clamp(22px,2.2vw,36px);overflow:hidden;background:#fff;-webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#000 100%);mask-image:radial-gradient(circle,#fff 100%,#000 100%);-webkit-transform:translateZ(0);transform:translateZ(0);}
@media (max-width:900px){
  nav[aria-label="Hauptnavigation"]{padding-left:20px!important;padding-right:20px!important;}
  nav[aria-label="Hauptnavigation"] > div[style*="calc(60px + 35vw)"],
  nav[aria-label="Hauptnavigation"] > div[style*="71.5vw"]{display:none!important;}
}
@media (max-width:640px){
  nav[aria-label="Hauptnavigation"][class*="left-[60px]"]{
    left:16px!important;
    right:16px!important;
  }
  nav[aria-label="Hauptnavigation"][class*="left-[60px]"] > a{
    margin-left:6px!important;
  }
  nav[aria-label="Hauptnavigation"][class*="left-[60px]"] > div:last-child{
    margin-right:2px!important;
  }
}
nav[aria-label="Hauptnavigation"] > div:has(img.no-zoom){display:none!important;}
@media (max-width:640px){
  #about div[style*="repeat(4, 1fr)"]{
    width:92%!important;
    grid-template-columns:repeat(2,1fr)!important;
    row-gap:clamp(16px,3vh,24px)!important;
  }
}
/* reviews slider runs edge to edge on mobile (cancels the section padding),
   cards start on the heading line; extra bottom room so the card shadow isn't clipped */
@media (max-width:768px){
  #reviews > div.reviews-wrap{
    margin-left:-20px!important;
    margin-right:-20px!important;
    padding:24px 40px 44px!important;
    margin-bottom:-44px!important;
  }
}
@media (max-width:480px){
  #reviews > div.reviews-wrap{
    margin-left:-16px!important;
    margin-right:-16px!important;
    padding-left:36px!important;
    padding-right:36px!important;
  }
}
@media (max-width:768px){
  footer div[style*="grid-template-columns: 1fr 1fr 1fr"]{
    grid-template-columns:1fr!important;
    gap:clamp(28px,5vh,40px)!important;
  }
  footer[style*="margin: 40px 60px 0px"]{
    margin-left:16px!important;
    margin-right:16px!important;
  }
}
@media (max-width:768px){
  #faq{
    padding-left:20px!important;
    padding-right:20px!important;
  }
  #faq > div[style*="42fr 58fr"]{
    grid-template-columns:1fr!important;
  }
}
@media (max-width:768px){
  #leistungen div[style*="calc(21.5vw"]{
    padding-left:0!important;
  }
  #leistungen div[style*="border-radius: 120px"]{
    border-radius:60px clamp(18px,2vw,34px) clamp(18px,2vw,34px) clamp(18px,2vw,34px)!important;
  }
}
@media (max-width:768px){
  #about div[style*="border-radius: 240px"]{
    border-radius:120px clamp(22px,2.8vw,52px) clamp(22px,2.8vw,52px) clamp(22px,2.8vw,52px)!important;
    aspect-ratio:auto!important;
    height:calc((100vw - 40px) / 1.22 + 35px)!important;
  }
  #about div[style*="border-radius: 240px"] img{
    height:100%!important;
  }
  /* room below the frame for the overhanging stats box + its shadow,
     otherwise #leistungen (z-index 2) cuts the shadow off */
  #about > div.about-photo{
    margin-bottom:100px!important;
  }
}
@media (max-width:480px){
  #about div[style*="border-radius: 240px"]{
    height:calc((100vw - 32px) / 1.22 + 35px)!important;
  }
}
/* ===== SHORT HEIGHT: tighter hero padding (both layouts) ===== */
@media (min-width:769px) and (max-height:780px){
  #hero-alt{min-height:0!important}
  #hero-alt > div[style*="justify-content: space-between"]{
    padding-top:clamp(90px,12vh,120px)!important;
    padding-bottom:24px!important;
  }
}
@media (min-width:769px) and (max-height:640px){
  #hero-alt > div[style*="justify-content: space-between"]{padding-top:90px!important}
}
@media (min-width:769px) and (max-height:540px){
  #hero-alt > div[style*="justify-content: space-between"]{padding-top:56px!important}
  #hero-content{gap:clamp(10px,1.6vh,18px)!important}
}
/* Side-by-side layout (gallery bottom-right). Toggled by JS only when the stacked layout
   cannot keep a 30px gap even with a smaller gallery and without the divider */
@media (min-width:769px){
  #hero-alt.hero-compact{min-height:0!important}
  #hero-alt.hero-compact #hero-gallery-wrap{
    position:absolute!important;
    right:clamp(8px,3.5vw,34px)!important;
    bottom:clamp(24px,3vh,40px)!important;
    z-index:3!important;
    align-items:flex-end!important;
  }
  #hero-alt.hero-compact #hero-content{
    max-width:56%!important;
    position:absolute!important;
    left:clamp(8px,3.5vw,34px)!important;
    top:clamp(90px,12vh,120px)!important;
    bottom:auto!important;
  }
}
@media (min-width:769px) and (max-height:640px){
  #hero-alt.hero-compact #hero-gallery-wrap{right:24px!important;bottom:20px!important}
  #hero-alt.hero-compact #hero-content{left:24px!important;top:90px!important}
}
@media (min-width:769px) and (max-height:540px){
  #hero-alt.hero-compact #hero-gallery-wrap{right:20px!important;bottom:16px!important}
  #hero-alt.hero-compact #hero-content{left:20px!important;top:56px!important}
}
/* Transparent nav */
body.hero-v2 nav.fixed:not([class*="rounded-"]){background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;padding-top:50px!important;}
body.hero-v2 nav.fixed:not([class*="rounded-"]) > a path{fill:white!important;}
body.hero-v2 nav.fixed:not([class*="rounded-"]) a:not(nav>a){color:white!important;}
body.hero-v2 nav.fixed:not([class*="rounded-"]) svg path{fill:white!important;}
body.hero-v2 nav.fixed:not([class*="rounded-"]) :is(button,a).rounded-full{border-color:rgba(255,255,255,0.55)!important;color:white!important;}
body.hero-v2 nav.fixed:not([class*="rounded-"]) button span.block{background:white!important;}
/* Scrolled nav — restore dark */
body.hero-v2 nav.fixed[class*="rounded-"]{background:rgba(255,255,255,0.97)!important;box-shadow:0 2px 16px rgba(0,0,0,0.09)!important;backdrop-filter:blur(30px)!important;}
body.hero-v2 nav.fixed[class*="rounded-"] > a path{fill:#111!important;}
body.hero-v2 nav.fixed[class*="rounded-"] a{color:#111!important;}
body.hero-v2 nav.fixed[class*="rounded-"] svg path{fill:#111!important;}
body.hero-v2 nav.fixed[class*="rounded-"] :is(button,a).rounded-full{border-color:#111!important;color:#111!important;}
body.hero-v2 nav.fixed[class*="rounded-"] button span.block{background:#111!important;}
nav svg.nav-pin *{fill:none!important;stroke:#111!important;}
body.hero-v2 nav.fixed:not([class*="rounded-"]) svg.nav-pin *{fill:none!important;stroke:#fff!important;}
body.hero-v2 nav.fixed[class*="rounded-"] svg.nav-pin *{fill:none!important;stroke:#111!important;}
#hero-alt *{font-family:'Instrument Sans',sans-serif}
/* ===== HERO-ALT MOBILE ===== */
@media(max-width:768px){
  /* hero: no phone/address row on phones; DocFinder logo and reviews on one line */
  #hero-alt .hero-contact{display:none!important}
  #hero-alt .hero-reviews{flex-direction:row!important;align-items:center!important;gap:12px!important;flex-wrap:wrap}
  #hero-alt #hero-content{margin-top:130px!important}
  /* parallax image strip: tiles are only ~55-150px wide here, 36px made them pills */
  section div[style*="border-radius: 36px"][style*="will-change"]{border-radius:20px!important}
  /* burger menu: same frame as the hero video (12px inset, 22px radius) */
  /* compact menu on phones so links, contact and hours fit without clipping */
  .menu-drawer .menu-head{height:60px!important}
  .menu-drawer{overflow-y:auto!important}
  .menu-drawer .menu-links{flex:1 0 auto!important;overflow:visible!important;padding:0 28px 10px!important}
  .menu-drawer .menu-links a{font-size:24px!important;padding:6px 0!important}
  .menu-drawer .menu-foot{grid-template-columns:1fr!important;gap:12px!important;padding:12px 28px!important}
  .menu-drawer .menu-foot p{margin-bottom:6px!important}
  .menu-drawer .menu-foot > div:last-child > div{padding:2px 0!important;font-size:12.5px!important}
  .menu-drawer .menu-cta{padding:8px 28px 16px!important}
  .menu-drawer{
    top:12px!important;
    right:12px!important;
    bottom:12px!important;
    left:12px!important;
    width:auto!important;
    border-radius:22px!important;
  }
  #hero-alt{
    width:calc(100% - 24px)!important;
    height:auto!important;
    min-height:calc(100vh - 24px)!important;
    min-height:calc(100svh - 24px)!important;
    margin:12px!important;
    border-radius:22px!important;
  }
  /* Wrapper: reduce huge top padding, allow content to stack */
  #hero-alt > div[style*="justify-content: space-between"]{
    padding:100px 22px 30px!important;
    gap:24px!important;
    /* in flow instead of absolute: the hero grows with its content, so the gallery is never clipped */
    position:relative!important;
    inset:auto!important;
    min-height:calc(100vh - 24px);
    min-height:calc(100svh - 24px);
  }
  /* Text content block: full width instead of 50% */
  #hero-alt div[style*="max-width: 50%"]{
    max-width:100%!important;
  }
  /* Gallery card: full width on mobile */
  #hero-alt div[style*="width: clamp(280px, 28vw, 420px)"]{
    width:100%!important;
    max-width:340px!important;
  }
  /* Gradient: make it vertical so text stays readable when stacked */
  #hero-alt > div[style*="linear-gradient(90deg"]{
    background:linear-gradient(180deg,rgba(90,90,90,0.85) 0%,rgba(60,60,60,0.4) 45%,rgba(40,40,40,0) 75%)!important;
  }
  /* Headline sizing */
  #hero-alt h1{
    font-size:clamp(28px,8vw,42px)!important;
    line-height:1.1!important;
  }
  /* Desktop line-break doesn't fit mobile width; let it wrap naturally instead */
  #hero-alt h1 br{
    display:none!important;
  }
  #hero-alt .hero-divider{
    display:none!important;
  }
}
@media(max-width:480px){
  #hero-alt > div[style*="justify-content: space-between"]{
    padding:90px 18px 24px!important;
  }
}
/* Mobile nav over the hero: same side inset as the hero content (card margin + content padding), 6px higher */
@media(max-width:768px){
  body.hero-v2 nav.fixed:not([class*="rounded-"]){
    padding-left:34px!important;
    padding-right:34px!important;
    padding-top:44px!important;
  }
  /* burger has 4px inner padding; pull it out so its lines end on the content edge */
  body.hero-v2 nav.fixed:not([class*="rounded-"]) > div:last-child > button:last-child{
    margin-right:-4px!important;
  }
}
@media(max-width:480px){
  body.hero-v2 nav.fixed:not([class*="rounded-"]){
    padding-left:30px!important;
    padding-right:30px!important;
  }
}
/* Sticky (scrolled) mobile nav bar: logo and burger on the same lines as the hero content, so the icons have room */
@media(max-width:640px){
  nav[aria-label="Hauptnavigation"][class*="left-[60px]"]{
    padding-left:14px!important;
    padding-right:10px!important;
  }
  nav[aria-label="Hauptnavigation"][class*="left-[60px]"] > a{margin-left:0!important;}
  nav[aria-label="Hauptnavigation"][class*="left-[60px]"] > div:last-child{margin-right:0!important;}
}
@media(min-width:481px) and (max-width:640px){
  nav[aria-label="Hauptnavigation"][class*="left-[60px]"]{
    padding-left:18px!important;
    padding-right:14px!important;
  }
}
/* very narrow phones: slightly smaller logo so it never runs into the icons */
@media(max-width:374px){
  nav[aria-label="Hauptnavigation"] > a svg{height:24px!important;}
}

/* Desktop: text block (DocFinder to buttons) 40px lower; not in the side-by-side layout */
@media (min-width:769px){
  #hero-alt #hero-content{margin-top:40px}
  #hero-alt.hero-compact #hero-content{margin-top:0!important}
}