/* Welle 1 (03.10.2026): Header ein-/ausblenden, schlichter Menue-Button,
   halbhohes Menue-Panel, Liquid-Rand nur Desktop, Typografie-Hierarchie. */

/* 1. Header blendet beim Runterscrollen aus (Steuerung in apple-design.js) */
.site-header{transition:translate .28s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.site-header.is-hidden:not(:focus-within){translate:0 calc(-100% - 1.5rem);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}}

/* 2-4. Mobil/Touch: kein Shader-Rand, flache Buttons */
@media (max-width:767px),(hover:none){
  .liquid-button__shader,.liquid-rim-button>.liquid-button__shader,.liquid-button__ripple{display:none!important}
  .site-menu-toggle{border:0;box-shadow:none;background:transparent}
  #hero .hero-ctas .liquid-button,.case-ctas .liquid-button{backdrop-filter:none;-webkit-backdrop-filter:none;background:#2e6bff;box-shadow:0 4px 12px #2e6bff26}
  #hero .liquid-button::before,.case-ctas .liquid-button::before{inset:0;background:linear-gradient(180deg,#2e6bff,#245bdc);box-shadow:none}
  #hero .liquid-button::after,.case-ctas .liquid-button::after{content:none}
  #hero .hero-ctas .liquid-button[href="./kundenergebnisse.html"],.case-ctas .liquid-button.liquid-button--secondary{background:#fff;color:var(--ink,#14181f);box-shadow:inset 0 0 0 1px #d3d8e2}
  #hero .liquid-button[href="./kundenergebnisse.html"]::before,.case-ctas .liquid-button.liquid-button--secondary::before{inset:1px;background:#fff;box-shadow:none}
  #hero .liquid-button[href="#termin"]:hover::before,.case-ctas .liquid-button.liquid-button--primary:hover::before{background:linear-gradient(180deg,#2e6bff,#245bdc)}
  #hero .hero-ctas .liquid-button:hover,.case-ctas .liquid-button:hover{transform:none}
}

/* 3. Mobiles Menue: Panel von oben, hoechstens halbe Bildschirmhoehe */
@media (max-width:767px){
  .site-mobile-menu{top:0;right:0;left:0;bottom:auto;width:100%;height:auto;max-height:50vh;max-height:50dvh;padding:4.6rem 1.25rem .75rem;gap:0;overflow-y:auto;overscroll-behavior:contain;border-left:0;border-radius:0 0 22px 22px;box-shadow:0 18px 40px #14181f2e;transform:translate3d(0,-105%,0);transition:transform .34s cubic-bezier(.22,1,.36,1);touch-action:pan-y}
  .site-mobile-menu.is-open{transform:translate3d(0,0,0)}
  .site-mobile-menu:before{content:none}
  .site-mobile-menu a{min-height:40px;padding-block:8px;font-size:17px}
  .site-mobile-menu .site-mobile-menu__cta{min-height:46px;margin-top:10px;padding:.7rem 1rem;font-size:15px;border-radius:999px;box-shadow:none}
  .site-mobile-menu .site-mobile-menu__tel{min-height:38px;margin-top:6px;padding-block:6px;font-size:1.05rem}
  .site-mobile-menu .site-mobile-menu__mail{min-height:34px;padding-block:4px}
  .site-menu-overlay{top:0}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.site-mobile-menu{transition:none}}

/* 5. Footer: nur noch zwei Spalten (Kontakt, Rechtliches) */
.site-footer .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:767px){.site-footer .footer-col:first-child{grid-column:auto}.site-footer .footer-cols{gap:1.2rem 1rem}.site-footer .footer-col a{font-size:.88rem}}

/* 6. Typografie-Hierarchie mobil */
@media (max-width:767px){
  main .sec-title{font-size:clamp(2.1rem,9.5vw,2.5rem);font-weight:800;line-height:1}
  main .sec-sub,main .sec-sub p,main .beleg-lead{font-size:15px;font-weight:400;line-height:1.6;color:#5d6470}
  #stats .sec-sub,#stats .sec-sub p{color:#5d6470}
  #team .team-card h3{font-size:1.3rem;font-weight:700}
}
@media (max-width:380px){.site-footer .footer-col a{font-size:.78rem}}