/*
 * Canonical responsive shell for the fixed navigation and cinematic heroes.
 * This file loads last and intentionally owns only header/hero geometry.
 */
:root {
  --shell-safe-top: env(safe-area-inset-top, 0px);
  --shell-header-content: 72px;
  --shell-header-height: calc(var(--shell-header-content) + var(--shell-safe-top));
  --shell-viewport: 100svh;
  --shell-hero-home-desktop: clamp(780px, 100svh, 980px);
  --shell-hero-page-desktop: clamp(720px, 92svh, 920px);
  --shell-hero-home-mobile: clamp(620px, 100svh, 760px);
  --shell-hero-page-mobile: clamp(600px, 92svh, 720px);
}

@supports not (height: 100svh) {
  :root {
    --shell-viewport: 100vh;
  }
}

body.has-cinematic-hero {
  padding-top: 0 !important;
}

body.has-cinematic-hero .site-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 100 !important;
  min-height: var(--shell-header-height) !important;
  padding: var(--shell-safe-top) 0 0 !important;
}

body.has-cinematic-hero .nav-shell {
  width: min(1180px, calc(100% - 2rem)) !important;
  height: var(--shell-header-content) !important;
  min-height: var(--shell-header-content) !important;
  align-items: center !important;
}

body.has-cinematic-hero .brand,
body.has-cinematic-hero .brand img {
  align-self: center !important;
}

body.has-cinematic-hero .brand {
  display: flex !important;
  align-items: center !important;
}

body.has-cinematic-hero .brand img {
  object-fit: contain !important;
  object-position: center !important;
}

/* One viewport, three stable rows: header clearance, copy, facts. */
body.has-cinematic-hero .hero-v2,
body.has-cinematic-hero .page-hero {
  width: 100% !important;
  min-height: var(--shell-hero-page-desktop) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

/*
 * Older cinematic/mobile layers used more specific selectors to pull heroes
 * underneath a non-fixed header. The header is fixed now, so keep every hero
 * on the same viewport origin and reserve its space inside the hero grid.
 */
body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic,
body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic,
body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic,
body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic {
  min-height: var(--shell-hero-page-desktop) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic {
  min-height: var(--shell-hero-home-desktop) !important;
}

body.has-cinematic-hero .hero-frame,
body.has-cinematic-hero .page-hero--cinematic {
  width: 100% !important;
  min-height: inherit !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

body.has-cinematic-hero .hero-frame > img {
  min-height: 0 !important;
  height: 100% !important;
}

body.has-cinematic-hero .hero-shell,
body.has-cinematic-hero .page-hero-shell {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-rows: var(--shell-header-height) minmax(0, 1fr) auto !important;
  width: min(1180px, calc(100% - 2rem)) !important;
  min-height: 100% !important;
  height: 100% !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

body.has-cinematic-hero .hero-content,
body.has-cinematic-hero .page-hero-copy {
  position: static !important;
  inset: auto !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: start !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  padding-block: clamp(0.75rem, 2.4vh, 1.75rem) !important;
}

body.has-cinematic-hero .hero-spec,
body.has-cinematic-hero .page-hero-spec {
  position: static !important;
  inset: auto !important;
  grid-row: 3 !important;
  align-self: end !important;
  justify-self: end !important;
  width: min(620px, 100%) !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.has-cinematic-hero .hero-spec > div,
body.has-cinematic-hero .page-hero-spec > div {
  min-width: 0 !important;
}

body.has-cinematic-hero .page-hero h1,
body.has-cinematic-hero .page-hero-copy h1 {
  font-size: clamp(3.2rem, 6.4vw, 6.2rem) !important;
  line-height: 0.89 !important;
  max-width: 10ch !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Low laptop screens: preserve the composition by scaling, never by clipping. */
@media (min-width: 721px) and (max-height: 780px) {
  :root {
    --shell-header-content: 64px;
  }

  body.has-cinematic-hero .nav-shell {
    min-height: var(--shell-header-content) !important;
  }

  body.has-cinematic-hero .hero-content,
  body.has-cinematic-hero .page-hero-copy {
    padding-block: 0.55rem !important;
  }

  body.has-cinematic-hero .hero-content h1 {
    font-size: clamp(3rem, 8.5vh, 5rem) !important;
  }

  body.has-cinematic-hero .page-hero h1,
  body.has-cinematic-hero .page-hero-copy h1 {
    font-size: clamp(2.8rem, 8.2vh, 4.7rem) !important;
    line-height: 0.9 !important;
  }

  body.has-cinematic-hero .hero-kicker,
  body.has-cinematic-hero .page-hero .section-label {
    margin-bottom: 0.6rem !important;
  }

  body.has-cinematic-hero .hero-content p,
  body.has-cinematic-hero .page-hero-copy p {
    margin-top: 0.7rem !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
  }

  body.has-cinematic-hero .hero-actions {
    margin-top: 0.85rem !important;
    margin-bottom: 0 !important;
  }

  body.has-cinematic-hero .hero-spec > div,
  body.has-cinematic-hero .page-hero-spec > div {
    min-height: 74px !important;
    padding: 0.7rem 1rem !important;
  }

  body.has-cinematic-hero .hero-spec strong,
  body.has-cinematic-hero .page-hero-spec strong {
    font-size: clamp(1.8rem, 5vh, 2.65rem) !important;
  }
}

@media (min-width: 721px) and (max-height: 620px) {
  :root {
    --shell-header-content: 58px;
  }

  body.has-cinematic-hero .hero-content h1 {
    font-size: clamp(2.6rem, 8vh, 4rem) !important;
  }

  body.has-cinematic-hero .page-hero h1,
  body.has-cinematic-hero .page-hero-copy h1 {
    font-size: clamp(2.35rem, 7.8vh, 3.75rem) !important;
  }

  body.has-cinematic-hero .hero-content p,
  body.has-cinematic-hero .page-hero-copy p {
    max-width: 58ch !important;
    margin-top: 0.45rem !important;
    font-size: 0.84rem !important;
    line-height: 1.3 !important;
  }

  body.has-cinematic-hero .hero-actions {
    margin-top: 0.55rem !important;
  }

  body.has-cinematic-hero .button {
    min-height: 40px !important;
  }

  body.has-cinematic-hero .hero-spec > div,
  body.has-cinematic-hero .page-hero-spec > div {
    min-height: 60px !important;
    padding: 0.45rem 0.8rem !important;
  }
}

/* Tablet navigation has one deterministic breakpoint. */
@media (max-width: 920px) {
  :root {
    --shell-header-content: 64px;
  }

  body.has-cinematic-hero .nav-shell {
    grid-template-columns: minmax(58px, 72px) 1fr auto auto !important;
    gap: 0.55rem !important;
    width: min(1180px, calc(100% - 1rem)) !important;
  }

  body.has-cinematic-hero .desktop-nav {
    display: none !important;
  }

  body.has-cinematic-hero .mobile-nav {
    display: block !important;
  }

  body.has-cinematic-hero .nav-phone {
    grid-column: 3 !important;
    min-height: 38px !important;
    padding-inline: 0.8rem !important;
  }

  body.has-cinematic-hero .mobile-nav {
    grid-column: 4 !important;
  }
}

@media (max-width: 720px) {
  :root {
    --shell-header-content: 64px;
  }

  body.has-cinematic-hero .site-header {
    background: linear-gradient(180deg, rgba(7, 17, 29, 0.98), rgba(14, 31, 48, 0.88)) !important;
  }

  body.has-cinematic-hero .nav-shell {
    grid-template-columns: minmax(58px, 68px) 1fr auto auto !important;
    width: calc(100% - 1rem) !important;
  }

  body.has-cinematic-hero .brand,
  body.has-cinematic-hero .brand img {
    width: 60px !important;
    max-width: 60px !important;
    height: 56px !important;
  }

  body.has-cinematic-hero .hero-shell,
  body.has-cinematic-hero .page-hero-shell {
    grid-template-rows: var(--shell-header-height) minmax(0, 1fr) auto !important;
    width: calc(100% - 2rem) !important;
  }

  body.has-cinematic-hero.home-page .hero-v2,
  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic,
  body.has-cinematic-hero.home-page .hero-frame {
    min-height: var(--shell-hero-home-mobile) !important;
    height: auto !important;
  }

  body.has-cinematic-hero.page-leistungen .page-hero,
  body.has-cinematic-hero.page-ueber-uns .page-hero,
  body.has-cinematic-hero.page-kontakt .page-hero,
  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic {
    min-height: var(--shell-hero-page-mobile) !important;
    height: auto !important;
  }

  body.has-cinematic-hero .hero-content,
  body.has-cinematic-hero .page-hero-copy {
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(0.35rem, 1.2vh, 0.8rem) 0 !important;
  }

  body.has-cinematic-hero .hero-kicker,
  body.has-cinematic-hero .page-hero .section-label {
    margin-bottom: 0.75rem !important;
    font-size: clamp(0.68rem, 2.8vw, 0.78rem) !important;
  }

  body.has-cinematic-hero .hero-content h1 {
    max-width: 7ch !important;
    font-size: clamp(2.7rem, 12vw, 3.6rem) !important;
    line-height: 0.89 !important;
  }

  body.has-cinematic-hero .page-hero h1,
  body.has-cinematic-hero .page-hero-copy h1 {
    max-width: 7.4ch !important;
    font-size: clamp(2.35rem, 10vw, 3.05rem) !important;
    line-height: 0.92 !important;
    text-wrap: pretty !important;
  }

  body.has-cinematic-hero .hero-content p,
  body.has-cinematic-hero .page-hero-copy p {
    max-width: 34ch !important;
    margin-top: 0.72rem !important;
    font-size: clamp(0.9rem, 3.5vw, 1rem) !important;
    line-height: 1.38 !important;
  }

  body.has-cinematic-hero .hero-actions {
    gap: 0.6rem !important;
    margin-top: 0.95rem !important;
    margin-bottom: 0 !important;
  }

  body.has-cinematic-hero .hero-actions .button {
    min-height: 46px !important;
  }

  body.has-cinematic-hero .hero-spec,
  body.has-cinematic-hero .page-hero-spec {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-self: stretch !important;
    width: 100% !important;
  }

  body.has-cinematic-hero .hero-spec > div,
  body.has-cinematic-hero .page-hero-spec > div {
    min-height: 68px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0.58rem 0.58rem !important;
  }

  body.has-cinematic-hero .hero-spec > div:first-child,
  body.has-cinematic-hero .page-hero-spec > div:first-child {
    border-left: 0 !important;
  }

  body.has-cinematic-hero .hero-spec strong,
  body.has-cinematic-hero .page-hero-spec strong {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
  }

  body.has-cinematic-hero .hero-spec span,
  body.has-cinematic-hero .page-hero-spec span {
    margin-top: 0.15rem !important;
    font-size: clamp(0.58rem, 2.45vw, 0.74rem) !important;
    line-height: 1.2 !important;
  }
}

/*
 * Final mobile authority. These selectors deliberately outrank the historic
 * cinematic and mobile-hotfix files so screen geometry never depends on load
 * order or on an IntersectionObserver firing inside the first viewport.
 */
@media (max-width: 720px) {
  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-frame,
  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic {
    min-height: inherit !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-shell,
  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic .page-hero-shell,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic .page-hero-shell,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic .page-hero-shell {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-rows: var(--shell-header-height) minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    gap: 0 !important;
    width: calc(100% - 2rem) !important;
    min-height: 100% !important;
    height: 100% !important;
    padding: 0 !important;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-content,
  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic .page-hero-copy,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic .page-hero-copy,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic .page-hero-copy {
    position: static !important;
    inset: auto !important;
    grid-row: 2 !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(0.35rem, 1.2vh, 0.8rem) 0 !important;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-content h1 {
    max-width: 7ch !important;
    font-size: clamp(2.7rem, 12vw, 3.6rem) !important;
    line-height: 0.89 !important;
  }

  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic h1,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic h1,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic h1 {
    max-width: 7.4ch !important;
    font-size: clamp(2.35rem, 10vw, 3.05rem) !important;
    line-height: 0.92 !important;
    text-wrap: pretty !important;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-content p,
  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic .page-hero-copy p,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic .page-hero-copy p,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic .page-hero-copy p {
    max-width: 34ch !important;
    margin-top: 0.72rem !important;
    font-size: clamp(0.9rem, 3.6vw, 1rem) !important;
    line-height: 1.38 !important;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-actions {
    gap: 0.6rem !important;
    margin-top: 0.85rem !important;
    margin-bottom: 0 !important;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-spec,
  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic .page-hero-spec,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic .page-hero-spec,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic .page-hero-spec {
    position: static !important;
    inset: auto !important;
    grid-row: 3 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-self: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-spec > div,
  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic .page-hero-spec > div,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic .page-hero-spec > div,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic .page-hero-spec > div {
    min-height: 68px !important;
    border-top: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0.58rem !important;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-spec > div:first-child,
  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic .page-hero-spec > div:first-child,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic .page-hero-spec > div:first-child,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic .page-hero-spec > div:first-child {
    border-left: 0 !important;
  }

  body.has-cinematic-hero.page-kontakt .page-hero-phone {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  body.has-cinematic-hero.page-kontakt .page-hero-phone strong {
    font-size: clamp(0.98rem, 4.1vw, 1.28rem) !important;
    line-height: 1 !important;
  }

  body.has-cinematic-hero.page-kontakt .page-hero-spec {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.95fr) !important;
  }
}

/* Short phones retain the full-screen hero but use a denser composition. */
@media (max-width: 720px) and (max-height: 740px) {
  :root {
    --shell-header-content: 58px;
    --shell-hero-home-mobile: clamp(580px, 100svh, 700px);
    --shell-hero-page-mobile: clamp(560px, 92svh, 660px);
  }

  body.has-cinematic-hero .hero-content h1 {
    font-size: clamp(2.35rem, 11.2vw, 3.05rem) !important;
  }

  body.has-cinematic-hero .page-hero h1,
  body.has-cinematic-hero .page-hero-copy h1 {
    font-size: clamp(2.05rem, 9.8vw, 2.7rem) !important;
  }

  body.has-cinematic-hero .hero-content p,
  body.has-cinematic-hero .page-hero-copy p {
    margin-top: 0.55rem !important;
    font-size: 0.86rem !important;
    line-height: 1.32 !important;
  }

  body.has-cinematic-hero .hero-actions {
    margin-top: 0.65rem !important;
  }

  body.has-cinematic-hero .hero-actions .button {
    min-height: 40px !important;
  }

  body.has-cinematic-hero .hero-spec > div,
  body.has-cinematic-hero .page-hero-spec > div {
    min-height: 58px !important;
    padding: 0.45rem 0.55rem !important;
  }

  body.has-cinematic-hero .hero-spec strong,
  body.has-cinematic-hero .page-hero-spec strong {
    font-size: 1.45rem !important;
  }
}

/* Landscape phones and very shallow windows need a horizontal compact mode. */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --shell-header-content: 54px;
    --shell-hero-home-desktop: clamp(520px, 100svh, 640px);
    --shell-hero-page-desktop: clamp(500px, 96svh, 600px);
  }

  body.has-cinematic-hero .hero-shell,
  body.has-cinematic-hero .page-hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 44%) !important;
    grid-template-rows: var(--shell-header-height) minmax(0, 1fr) !important;
    column-gap: 1rem !important;
  }

  body.has-cinematic-hero .hero-content,
  body.has-cinematic-hero .page-hero-copy {
    grid-row: 2 !important;
    grid-column: 1 !important;
    align-self: center !important;
    padding: 0 0 0.45rem !important;
  }

  body.has-cinematic-hero .hero-spec,
  body.has-cinematic-hero .page-hero-spec {
    grid-row: 2 !important;
    grid-column: 2 !important;
    align-self: end !important;
  }

  body.has-cinematic-hero .hero-content h1,
  body.has-cinematic-hero .page-hero h1,
  body.has-cinematic-hero .page-hero-copy h1 {
    font-size: clamp(2rem, 8vh, 2.8rem) !important;
  }

  body.has-cinematic-hero .hero-content p,
  body.has-cinematic-hero .page-hero-copy p {
    margin-top: 0.4rem !important;
    font-size: 0.76rem !important;
  }

  body.has-cinematic-hero .hero-actions {
    flex-direction: row !important;
    margin-top: 0.45rem !important;
  }

  body.has-cinematic-hero .hero-actions .button {
    width: auto !important;
    min-height: 36px !important;
  }
}

/* Final stabilization layer: canonical hero sizing and spacing across pages/devices. */
:root {
  --hero-home-desktop-final: clamp(700px, 90svh, 860px);
  --hero-page-desktop-final: clamp(640px, 84svh, 780px);
  --hero-home-mobile-final: clamp(730px, 100svh, 840px);
  --hero-page-mobile-final: clamp(640px, 92svh, 740px);
}

body.has-cinematic-hero .site-header {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic {
  min-height: var(--hero-home-desktop-final) !important;
}

body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic,
body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic,
body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic {
  min-height: var(--hero-page-desktop-final) !important;
}

body.has-cinematic-hero .hero-shell,
body.has-cinematic-hero .page-hero-shell {
  grid-template-rows: var(--shell-header-height) minmax(0, 1fr) auto !important;
  width: min(1180px, calc(100% - 2rem)) !important;
}

body.has-cinematic-hero .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.has-cinematic-hero .brand img {
  align-self: center !important;
  object-fit: contain !important;
  object-position: center !important;
}

body.has-cinematic-hero .hero-content,
body.has-cinematic-hero .page-hero-copy {
  align-self: center !important;
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  padding-block: clamp(1rem, 3vh, 1.8rem) !important;
}

body.has-cinematic-hero.home-page .hero-content {
  padding-top: clamp(1.1rem, 3vh, 1.9rem) !important;
}

body.has-cinematic-hero .hero-spec,
body.has-cinematic-hero .page-hero-spec {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 620px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

body.has-cinematic-hero.home-page .hero-spec {
  max-width: 640px !important;
}

body.has-cinematic-hero .page-hero h1,
body.has-cinematic-hero .page-hero-copy h1 {
  max-width: 8.5ch !important;
}

body.has-cinematic-hero.page-kontakt .page-hero-phone strong {
  letter-spacing: -0.03em !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  :root {
    --shell-header-content: 62px;
  }

  body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic {
    min-height: var(--hero-home-mobile-final) !important;
  }

  body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic,
  body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic,
  body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic {
    min-height: var(--hero-page-mobile-final) !important;
  }

  body.has-cinematic-hero .nav-shell {
    width: calc(100% - 1rem) !important;
    min-height: var(--shell-header-content) !important;
    height: var(--shell-header-content) !important;
    grid-template-columns: 58px 1fr auto auto !important;
    align-items: center !important;
  }

  body.has-cinematic-hero .brand {
    width: 58px !important;
    max-width: 58px !important;
    min-height: 58px !important;
    justify-content: center !important;
  }

  body.has-cinematic-hero .brand img {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
  }

  body.has-cinematic-hero .hero-shell,
  body.has-cinematic-hero .page-hero-shell {
    width: calc(100% - 1rem) !important;
  }

  body.has-cinematic-hero .hero-content,
  body.has-cinematic-hero .page-hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    align-self: center !important;
    padding-top: clamp(1rem, 2.2vh, 1.4rem) !important;
    padding-bottom: clamp(0.9rem, 1.8vh, 1.25rem) !important;
  }

  body.has-cinematic-hero .hero-content h1 {
    font-size: clamp(2.7rem, 10.4vw, 3.8rem) !important;
    max-width: 6.3ch !important;
    line-height: 0.92 !important;
  }

  body.has-cinematic-hero .page-hero h1,
  body.has-cinematic-hero .page-hero-copy h1 {
    font-size: clamp(2.4rem, 9.4vw, 3.25rem) !important;
    max-width: 7.6ch !important;
    line-height: 0.92 !important;
  }

  body.has-cinematic-hero .hero-content p,
  body.has-cinematic-hero .page-hero-copy p {
    max-width: 30ch !important;
    font-size: 0.98rem !important;
    line-height: 1.34 !important;
  }

  body.has-cinematic-hero .hero-spec > div,
  body.has-cinematic-hero .page-hero-spec > div {
    min-height: 76px !important;
    padding: 0.72rem 0.84rem !important;
  }

  body.has-cinematic-hero .hero-spec strong,
  body.has-cinematic-hero .page-hero-spec strong {
    font-size: clamp(1.55rem, 8vw, 2rem) !important;
  }

  body.has-cinematic-hero.page-kontakt .page-hero-spec {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.95fr) !important;
  }

  body.has-cinematic-hero.page-kontakt .page-hero-phone strong {
    font-size: clamp(1.28rem, 5.8vw, 1.72rem) !important;
  }

  body.has-cinematic-hero .hero-v2.hero-v2--cinematic .hero-spec,
  body.has-cinematic-hero .page-hero.page-hero--cinematic .page-hero-spec {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

/*
 * Shared heading anchor. Copy length must not decide where the page title starts.
 * A fixed label slot also absorbs the two-line home kicker on narrow screens.
 */
:root {
  --hero-heading-label-slot: 2.75rem;
  --hero-heading-copy-offset: clamp(4.5rem, 9vh, 6.5rem);
}

body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-content,
body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic .page-hero-copy,
body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic .page-hero-copy,
body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic .page-hero-copy {
  align-self: start !important;
  padding: var(--hero-heading-copy-offset) 0 0 !important;
}

body.has-cinematic-hero.home-page .hero-v2.hero-v2--cinematic .hero-content > .hero-kicker,
body.has-cinematic-hero.page-leistungen .page-hero.page-hero--cinematic .page-hero-copy > .section-label,
body.has-cinematic-hero.page-ueber-uns .page-hero.page-hero--cinematic .page-hero-copy > .section-label,
body.has-cinematic-hero.page-kontakt .page-hero.page-hero--cinematic .page-hero-copy > .section-label {
  min-height: var(--hero-heading-label-slot) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
}

@media (max-width: 720px) {
  :root {
    --hero-heading-copy-offset: clamp(6.5rem, 20vh, 10.25rem);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --hero-heading-label-slot: 2.25rem;
    --hero-heading-copy-offset: clamp(1rem, 6vh, 2rem);
  }
}