/* A short viewport must never push the home heading behind the fixed header. */
.hero-transition > .hero { height:auto; min-height:100svh; }

/* Browser bars, display scaling and zoom can leave a laptop only 500–800px high. */
@media (min-width:761px) and (max-height:800px) {
  :root { --notebook-header-height:88px; --notebook-title:clamp(42px,min(4.4vw,8.8svh),64px); }

  html .header, html .header.is-scrolled { height:var(--notebook-header-height); }
  .header:not(.is-scrolled) { background:#050607; }
  .header:not(.is-scrolled) .services-menu { background:#24272a; backdrop-filter:none; -webkit-backdrop-filter:none; }

  .hero-transition > .hero {
    position:relative;
    padding-top:calc(var(--notebook-header-height) + 40px);
    /* Leave room for the existing first-visit consent banner. */
    padding-bottom:120px;
  }
  html[lang] .hero h1 { font-size:min(80px,9.5cqw); }
  html[lang="de"] .hero h1 { font-size:min(64px,6.5cqw); }
  .hero .hero-support { margin-top:32px; font-size:17px; line-height:1.5; }
  .hero .hero-bottom { margin-top:40px; }
  .hero .hero-actions .cut-button { min-height:56px; padding:15px 22px; font-size:16px; }

  .about-page .page-hero {
    min-height:0;
    padding-top:calc(var(--notebook-header-height) + 40px);
    padding-bottom:64px;
    gap:36px;
  }
  .about-page .page-hero h1, .about-page .about-hero h1,
  .prices-page .prices-hero h1, .blog-page .blog-hub-hero h1,
  .blog-page .article-heading h1, .legal-page .legal-main h1 { font-size:var(--notebook-title); }
  .about-page .page-hero .page-hero-lead { margin-top:24px; font-size:17px; }
  .about-page .page-hero .page-hero-actions { margin-top:28px; }
  .about-page .page-hero .page-hero-actions .cut-button { min-height:54px; padding:15px 20px; font-size:16px; }
  .about-page .page-hero.service-hero .page-hero-visual { height:auto; min-height:0; }
  .about-page .page-hero.service-hero .page-hero-visual .service-art { width:min(80%,42svh,360px); }
  .kontakt-page .kontakt-hero-gallery { height:clamp(300px,55svh,440px); }

  .about-page .about-hero {
    padding-top:calc(var(--notebook-header-height) + 40px);
    padding-bottom:64px;
  }
  .about-page .about-hero-transition > .about-hero { position:relative; }
  .about-page .about-hero-lead { margin-top:24px; font-size:17px; }
  .about-page .about-hero-actions { margin-top:28px; }
  .prices-page .prices-hero { padding-top:calc(var(--notebook-header-height) + 40px); padding-bottom:56px; }
  .blog-page .blog-main { padding-top:var(--notebook-header-height); }
  .blog-hub-page .blog-hub-hero { padding-block:56px; }
  .blog-page .article-heading { margin-top:48px; }
  .legal-page .legal-main { padding-top:calc(var(--notebook-header-height) + 56px); }

  /* Keep the workers' existing mosaic slots independent of page-hero spacing. */
  .workers-page .workers-hero.page-hero { gap:16px; }
  .workers-page .workers-hero .workers-hero-note .page-hero-lead,
  .workers-page .workers-hero .workers-hero-action .page-hero-actions { margin-top:0; }
}

@media (min-width:761px) and (max-width:1100px) and (max-height:800px) {
  html[lang] .hero h1 { font-size:min(72px,7.4vw,9.5cqw); }
  html[lang="de"] .hero h1 { font-size:min(58px,5.7vw,6.5cqw); }
}

/* A scaled desktop notebook should not switch to a full-screen illustration first. */
@media (min-width:1001px) and (max-width:1100px) and (max-height:800px) and (pointer:fine) {
  .about-page .page-hero.service-hero, .kontakt-page .page-hero {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:32px;
  }
  .about-page .page-hero.service-hero .page-hero-visual { order:0; justify-content:center; }
}