@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  body { -webkit-text-size-adjust: 100%; }
  .wrap { width: calc(100% - 32px); }

  .topbar, .subpage-bar {
    height: 72px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .topbar .logo, .subpage-bar .logo { width: 128px; height: 50px; }
  .mobile-menu { min-width: 44px; min-height: 44px; padding: 5px; cursor: pointer; }
  .topbar.open {
    height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: rgba(5,5,5,.985);
  }
  .topbar.open .logo { position: absolute; top: max(8px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); display: block; width: 128px; height: 50px; }
  .topbar.open .mobile-menu { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
  .topbar.open nav { position: absolute; top: clamp(96px, 16vh, 138px); left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); width: auto; margin: 0; gap: 10px; justify-self: stretch; align-items: center; text-align: center; }
  .topbar.open nav a { display: block; width: 100%; padding: 7px 0; font-size: clamp(33px, 10vw, 46px); line-height: 1; text-align: center; }
  .topbar.open + main .hero-sound,
  .topbar.open + main .hero-skip,
  .topbar.open + main .scroll-hint { visibility: hidden; }
  .subpage-bar nav { top: 72px; max-height: calc(100dvh - 72px); overflow-y: auto; padding: 20px 18px calc(26px + env(safe-area-inset-bottom)); }
  .subpage-bar nav a { width: 100%; padding: 9px 0; font-size: 18px; }

  .landing { min-height: 100svh !important; }
  .landing::before {
    display: none;
  }
  .landing-stage {
    z-index: 1;
    inset: 0;
    width: 100vw;
    height: 100svh;
    aspect-ratio: auto;
    transform: none;
    transform-origin: center;
  }
  .landing-bg {
    content: url('Cosmix Fotos--COSMIX_HERO_MOBILE.webp');
    object-fit: cover;
    object-position: center;
  }
  .hero-screen {
    left: 30.8%;
    top: 36.65%;
    width: 38.4%;
    height: 11.55%;
  }
  .landing-shade { z-index: 2; background: linear-gradient(to bottom,rgba(0,0,0,.2),transparent 35%,transparent 64%,rgba(0,0,0,.42)); }
  .hero-sound, .hero-skip {
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: auto;
    width: clamp(42px, 11vw, 48px);
    height: clamp(42px, 11vw, 48px);
    transform: none;
  }
  .hero-sound { right: max(16px, env(safe-area-inset-right)); }
  .hero-skip { right: calc(max(16px, env(safe-area-inset-right)) + 56px); }
  .hero-sound:hover, .hero-skip:hover { transform: none; }
  .scroll-hint { bottom: calc(10px + env(safe-area-inset-bottom)); }

  .commercials { padding-top: 74px; padding-bottom: 88px; }
  .commercials > header { margin-bottom: 32px; gap: 13px; }
  .commercials > header span { margin-bottom: 7px; }
  .commercials > header h1 { font-size: clamp(44px, 15vw, 64px); }
  .commercials > header p { max-width: 290px; font-size: 12px; line-height: 1.55; text-transform: uppercase; letter-spacing: .05em; }
  #werbung .video-grid { gap: 14px; }
  #werbung .spot-control { left: 12px; bottom: 12px; width: 44px; height: 44px; }
  #werbung .spot-label { left: 67px; bottom: 27px; font-size: 12px; }
  #werbung .spot-fullscreen { right: 12px; bottom: 12px; width: 44px; height: 44px; }
  .more, .award-toggle { width: 100%; min-height: 52px; justify-content: center; margin-top: 38px; }

  .clients { padding: 34px 0; }
  .clients > p { margin-bottom: 24px; }
  .block { padding-top: 82px; padding-bottom: 88px; }
  .heading { margin-bottom: 38px; }
  .heading em { margin-bottom: 14px; }
  .heading h1, .heading h2 { font-size: clamp(44px, 14vw, 62px); line-height: .9; }
  .heading > p { margin-top: 22px; font-size: 15px; line-height: 1.55; }
  .poster-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 10px; }
  .poster h3 { margin-top: 11px; font-size: clamp(16px, 4.7vw, 19px); line-height: 1.05; overflow-wrap: anywhere; }
  .poster p { font-size: 10px; }

  #awards { padding-top: 82px; padding-bottom: 88px; }
  #awards .award-intro { gap: 28px; padding-bottom: 34px; }
  #awards .award-intro h2 { font-size: clamp(38px, 12vw, 52px); }
  .award-item { grid-template-columns: 44px 1fr; gap: 10px; padding: 19px 0; }

  #team .team { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 10px; }
  #team .team h3 { margin: 11px 0 5px; font-size: clamp(18px, 5.4vw, 23px); overflow-wrap: anywhere; }
  #team .team p { min-height: 2.6em; font-size: 9px; line-height: 1.35; }
  #team .team-mail { margin-top: 4px; max-width: 100%; font-size: 9px; overflow-wrap: anywhere; }
  #team .team-mail { display: inline-flex; min-height: 44px; align-items: center; padding-block: 8px; }

  footer.wrap, .page-footer {
    height: auto;
    min-height: 0;
    padding-top: 27px;
    padding-bottom: calc(27px + env(safe-area-inset-bottom));
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    line-height: 1.5;
  }
  .footer-links, .page-footer-links { width: 100%; justify-content: space-between; gap: 12px; }
  .footer-links a, .page-footer-links a { display: inline-flex; min-height: 44px; align-items: center; padding-block: 8px; }

  dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
  dialog > button { position: fixed; right: 22px; top: 22px; width: 46px; height: 46px; }
  .modal-inner { display: block; }
  .modal-inner img { height: min(52dvh, 520px); }
  .modal-copy { padding: 27px 20px 38px; }
  .modal-copy h2 { margin: 10px 0 16px; font-size: clamp(39px, 13vw, 58px); }

  .contact-page, .about-page { padding-top: 72px; }
  .contact-hero, .about-hero { padding-top: 34px; padding-bottom: 56px; gap: 38px; }
  .contact-identity h1, .about-identity h1 { font-size: clamp(42px, 13vw, 64px); }
  .contact-actions a { min-height: 62px; grid-template-columns: 62px 1fr; }
  .about-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .about-facts div { padding: 12px 10px; }
  .about-facts div + div { padding-left: 10px; border-top: 0; border-left: 1px solid var(--line); }
  .about-facts strong { font-size: clamp(20px, 7vw, 28px); }
  .about-facts span { font-size: 8px; line-height: 1.35; }
  .about-intro { gap: 42px; padding: 60px 0 72px; }
  .about-photo { width: min(72vw, 300px); margin: 0 auto; }
  .about-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .about-photo figcaption { margin-top: 9px; text-align: left; }
  .about-lead { margin-top: 18px; font-size: 16px; line-height: 1.68; }
  .green-production { gap: 28px; padding: 28px 20px; }
  .about-services { gap: 62px; padding: 74px 0 82px; }
  .map-link { aspect-ratio: 1 / 1; }
  .map-link img { transform: scale(1.9); }
  .map-link span { right: 12px; bottom: 12px; }
  .service { padding: 24px 0; }
  .about-direct { flex-direction: column; align-items: flex-start; gap: 15px; }
  .studio-directory { padding: 72px 0 78px; }
  .studios-layout { gap: 38px; }
  .studio-floor { padding: 25px 0; }

  .contact-primary { margin-top: 0; }
  .contact-block { padding: 26px 0 30px; }
  .contact-records section { padding: 28px 0 30px !important; }
  .contact-social { gap: 18px; padding: 30px 0 48px; }

  .legal-page { padding: 112px 0 68px; }
  .legal-header { margin-bottom: 42px; }
  .legal-header h1 { font-size: clamp(46px, 15vw, 68px); }
  .legal-section { padding: 26px 20px; }
  .legal-section h2 { font-size: 24px; }
}

@media (max-width: 370px) {
  .poster-grid, #team .team { grid-template-columns: 1fr; }
  .poster, #team .team article { max-width: none; }
  #team .team p { min-height: 0; }
  .about-facts { grid-template-columns: 1fr; }
  .about-facts div + div { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 900px) and (orientation: landscape) {
  .landing { min-height: 560px !important; }
  .topbar.open nav { top: 76px; display: grid; grid-template-columns: 1fr 1fr; }
  .topbar.open nav a { font-size: 30px; }
}