@media (max-width: 600px){
  :root{
    --pad: 1rem;
    --gap: .85rem;
    --h1: clamp(1.85rem, 8vw, 2.35rem);
    --h2: clamp(1.35rem, 6vw, 1.75rem);
    --h3: clamp(1.08rem, 4.6vw, 1.25rem);
    --p: 1rem;
    --micro: .9rem;
  }

  html, body{overflow-x: hidden}
  body{line-height: 1.6; -webkit-text-size-adjust: 100%}
  .container{width:min(100%, calc(100% - 1.1rem*2))}
  .section{padding-block: 1.6rem}
  .card{padding: .95rem}
  p{line-height: 1.65; letter-spacing:.002em}
  h1{line-height:1.06}
  h2{line-height:1.12}
  h3{line-height:1.22}

  .header{
    z-index: 80;
    backdrop-filter: blur(.65rem);
    background: rgba(255,255,255,.92);
  }

  .nav{
    position:relative;
    padding-block: .66rem;
    gap: .55rem;
  }

  .brand{gap:.55rem; min-width:0}
  .brand img{height: 2rem}
  .brand .wordmark strong{font-size:.95rem}
  .brand .wordmark span{display:none}

  .nav-toggle{
    display:inline-grid;
    place-content:center;
    gap:.22rem;
    width:2.6rem;
    height:2.6rem;
    border-radius:999px;
    border:.0625rem solid rgba(11,79,120,.22);
    background: rgba(255,255,255,.92);
    color: var(--c-dark);
    box-shadow: 0 .4rem 1rem rgba(6,46,70,.10);
    cursor:pointer;
    z-index:95;
  }

  .nav-toggle span{
    display:block;
    width:1.05rem;
    height:.12rem;
    border-radius:999px;
    background: var(--c-dark);
    transition: transform .24s var(--ease), opacity .24s var(--ease);
  }

  body.nav-open .nav-toggle span:nth-child(1){transform: translateY(.34rem) rotate(45deg)}
  body.nav-open .nav-toggle span:nth-child(2){opacity:0}
  body.nav-open .nav-toggle span:nth-child(3){transform: translateY(-.34rem) rotate(-45deg)}

  .links{
    position:fixed;
    top:0;
    right:0;
    height:100dvh;
    width:min(84vw, 19rem);
    z-index:90;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:.32rem;
    padding:4.6rem .9rem 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,249,255,.94));
    border-left:.0625rem solid rgba(11,79,120,.14);
    box-shadow: -1rem 0 2rem rgba(6,46,70,.15);
    transform: translateX(105%);
    transition: transform .28s var(--ease);
    overflow-y:auto;
  }

  body.nav-open .links{transform: translateX(0)}

  body.nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:75;
    background: rgba(6,46,70,.28);
  }

  .links a,
  .links .btn{
    width:100%;
    min-height:2.7rem;
    justify-content:flex-start;
    border-radius:.85rem;
    padding:.72rem .82rem;
    font-size:.98rem;
  }

  .hero-index,
  .hero-services,
  .about-minimal-hero{min-height: auto}

  .hero-shell,
  .services-panel,
  .about-hero-shell{
    padding: 1rem;
    border-radius: 1rem;
  }

  .hero-index .hero-shell,
  .hero-services .services-panel,
  .about-minimal-hero .about-hero-shell{margin-top:.25rem}

  .hero-top,
  .services-panel .content{flex-direction:column; align-items:stretch}
  .hero-top > .card,
  .services-panel .content > .card{min-width:0; width:100%}

  .hero-top > .card{order:2}

  .services-panel .content > .card{order:-1}
  .about-editorial-side{order:-1}

  .hero-copy{max-width:none; gap:.75rem}
  .hero-copy .chips{gap:.4rem}
  .hero-copy .kicker,
  .services-panel .kicker,
  .about-hero-copy .chip{font-size:.82rem}

  .hero-copy .chips .chip,
  .about-hero-points .chip{padding:.45rem .62rem}

  .card .chips{display:none !important}

  .hero-logo-wave,
  .hero-aqua-orb,
  .about-hero-mark,
  .decor{display:none !important}

  .wave-divider{opacity:.22; animation:none}

  .grid.auto,
  .gallery,
  .about-principles-grid,
  .about-timeline-grid,
  .about-proof-grid,
  .about-editorial-grid,
  .about-region-wrap,
  .about-hero-shell{grid-template-columns:1fr !important}

  .marquee-item{width:min(78vw, 18rem)}
  .marquee-track{padding:.8rem; gap:.65rem}
  .marquee-cap{padding:.72rem}
  .filters{overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:.2rem; flex-wrap:nowrap}
  .pill{white-space:nowrap}

  .btn,
  button,
  input,
  textarea{font-size:1rem}

  .btn{min-height:2.9rem; padding:.82rem 1rem}
  input, textarea{padding:.85rem .9rem}
  textarea{min-height:8.2rem}

  .form{gap:.6rem}

  .about-image-frame{min-height: 17.5rem; padding:1rem}
  .about-image-frame strong{font-size:1rem}

  .about-proof-grid{grid-template-columns:1fr 1fr !important}
  .about-proof{padding:.75rem .65rem}

  .about-timeline{padding:1rem}
  .about-step{padding:.82rem}

  .quickstart-track{grid-template-columns:1fr !important}
  .quickstart-track::before{display:none !important}
  .quickstart-step{justify-items:start; text-align:left; grid-template-columns:auto 1fr; column-gap:.65rem; align-items:center}

  .footer .foot,
  .site-footer .footer-grid{grid-template-columns:1fr !important}

  .footer .card,
  .site-footer .card{padding:1rem}

  .hero-refs .card > .mt[style*="justify-content:space-between"]{
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }

  .hero-refs .card .btn.primary{width:100%; justify-content:center}

  .calendly-inline-widget{height:560px !important}

  body.page-index .hero-copy p,
  body.page-leistungen .services-panel .content p,
  body.page-ueber .about-hero-copy p,
  body.page-referenzen .hero-refs p,
  body.page-kontakt .hero-contact p{font-size:.98rem}

  body.page-index .hero-shell .grid.auto{margin-top:1rem !important}
  body.page-index .quickstart-track{margin-top:.75rem}

  body.page-leistungen .services-panel .content{padding:1rem}
  body.page-leistungen .services-panel .content > .card{order:-1}

  body.page-referenzen .stars{font-size:1rem}
  body.page-referenzen .quote .small{font-size:.84rem}

  body.page-kontakt .details{gap:.45rem}
  body.page-kontakt .hero-contact .grid.auto > .card{padding:1rem}
}

@media (max-width: 480px){
  .container{width:min(100%, calc(100% - .85rem*2))}
  .brand img{height:1.85rem}
  .hero-shell,
  .services-panel,
  .about-hero-shell,
  .card{border-radius:.9rem}
  .links{width:min(88vw, 18rem)}

  .about-proof-grid{grid-template-columns:1fr !important}
  .btn{min-height:2.75rem}
  .marquee-item{width:min(84vw, 17rem)}
  .calendly-inline-widget{height:520px !important}
}
