/* ============================================================
   resamp — Responsive / responsive.css
   Mobile is treated as a first-class premium surface, not a
   squeezed desktop. Loaded last so it wins the cascade.
   ============================================================ */

/* ---------- ≤ 1200px ------------------------------------ */
@media (max-width: 1200px) {
  .work-grid .span-7, .work-grid .span-5 { grid-column: span 6; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤ 1024px (tablet) --------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }

  /* Nav collapses to the burger */
  .nav, .site-header__cta .btn { display: none; }
  .burger { display: block; }

  .hero__bottom { grid-template-columns: 1fr; gap: 2rem; }
  .hero__mark { display: none; }

  .split-feature { grid-template-columns: 1fr; }
  .split-feature__media { order: -1; }

  .contact-grid { grid-template-columns: 1fr; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-layout .section-head { position: static; }

  .footer-cta__grid { grid-template-columns: 1fr; align-items: start; }
  .footer-main { grid-template-columns: 1fr 1fr; }

  .page-hero__grid { grid-template-columns: 1fr; }
  .leistung-intro { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento .b-6 { grid-column: span 4; }
  .about-hero-media .a { grid-column: span 6; }
  .about-hero-media .b { grid-column: span 6; margin-top: 0; }
  .about-hero-media .c { grid-column: span 12; }
}

/* ---------- ≤ 768px (mobile) ---------------------------- */
@media (max-width: 768px) {
  /* Hero sits directly under the header instead of being pushed to the
     bottom of a full-height screen (removes the big top gap on phones). */
  :root { --header-h: 64px; }
  .site-header .brand__logo { height: 30px; }
  .hero { min-height: auto; justify-content: flex-start; padding-top: calc(var(--header-h) + 1.4rem); padding-bottom: 3rem; }
  .hero__grid { gap: 1.8rem; }
  /* Cap display headline sizes so long single words never exceed the
     viewport (root cause of the horizontal drag). */
  .hero__title { font-size: clamp(2.6rem, 13vw, 4.2rem); }

  /* Video-Hero (Startseite): Inhalt kompakter, damit der Titel beim Einblenden
     nicht unter den (fixierten) Header rutscht — Meta ausblenden, Titel/Lead/
     Buttons kleiner. */
  .hero--video .hero__aside { display: none; }
  .hero--video .hero__title { font-size: clamp(2rem, 9vw, 2.9rem); }
  .hero--video .hero__lead { font-size: var(--step-0); line-height: 1.45; }
  .hero--video .hero__grid { gap: 1.1rem; }
  .hero--video .hero__actions { margin-top: 1rem; gap: .7rem; }
  .hero--video .hero__actions .btn { padding: .78rem 1.15rem; font-size: var(--step-0); }
  .hero--video .hero__content { padding-bottom: clamp(1.2rem, 4vh, 2rem); }
  .page-hero__title { font-size: clamp(2.2rem, 9.5vw, 3.4rem); }
  .display-xl, .display-lg { font-size: clamp(2.6rem, 12vw, 4rem); }
  h1 { font-size: clamp(2.3rem, 10vw, 3.4rem); }
  h2 { font-size: clamp(2rem, 8vw, 3rem); }
  /* Any display text may break a too-long word rather than overflow. */
  .hero__title, .page-hero__title, .footer-cta h2, .cta h2, .quote, .manifesto__text { overflow-wrap: break-word; }

  .stats-band { grid-template-columns: 1fr 1fr; }
  .services__head { grid-template-columns: 1fr; align-items: start; }
  .services__note { justify-self: start; }

  .svc-row { grid-template-columns: auto 1fr; gap: 1rem; }
  .svc-row__meta { display: none; }
  .svc-row__title { font-size: var(--step-2); }

  .work-grid > *, .work-grid .span-7, .work-grid .span-5 { grid-column: span 12; }
  .work-grid .offset { margin-top: 0; }

  .other-services, .deliverables, .form__row { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* Process becomes a vertical, un-pinned stack (no scroll hijack) */
  .process__pin { position: static; height: auto; display: block; padding-block: 2rem; }
  .process__track { flex-direction: column; transform: none !important; padding-inline: 0; }
  .process__rail, .process__progress, .process__count { display: none; }
  .step-card { min-width: 0; width: 100%; }

  .cta { border-radius: var(--r-lg); }
  .manifesto__foot { flex-direction: column; align-items: flex-start; }
}

/* ---------- ≤ 560px ------------------------------------- */
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; gap: 1.6rem; }
  .stats-band { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .b-6, .bento .b-4 { grid-column: span 2; }
  .hero__eyebrow { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .hero__meta-row { gap: 1.6rem; }
  .btn--lg { width: 100%; justify-content: center; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  /* Video-Hero: die zwei CTAs nebeneinander & kompakt statt zwei volle Reihen */
  .hero--video .hero__actions .magnetic,
  .hero--video .hero__actions > .btn { flex: 1 1 auto; }
  .hero--video .hero__actions .btn--lg { width: 100%; padding: .74rem .8rem; font-size: var(--step--1); }
  .to-top { width: 48px; height: 48px; }
}

/* ---------- Fine-pointer only enhancements -------------- */
@media (hover: hover) and (pointer: fine) {
  /* reserved: interactions that only make sense with a mouse */
}

/* ---------- Reduce grain cost on small/hi-dpi ----------- */
@media (max-width: 768px) {
  body::after { opacity: .03; }
}