/* V6.86 technical refinement — shared main-section stage system.
   Image selection and the approved CTA designs remain in home.css/core.css.
   The shared classes own stage geometry, transparency and responsive layout.
   Important declarations isolate this component from the historical core cascade. */
:root {
  --main-stage-height: clamp(580px, 50vw, 780px);
  --main-stage-fade-left: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0,0,0,.05) 28%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.68) 57%, #000 76%, #000 100%);
  --main-stage-fade-bottom: linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.9) 61%, rgba(0,0,0,.58) 77%, rgba(0,0,0,.18) 91%, transparent 100%);
  --main-stage-copy-width: min(38vw, 560px);
  --main-stage-spacing: clamp(64px, 6vw, 104px);
}
.hk-main-stage.hk-main-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center !important;
  min-height: var(--main-stage-height) !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(64px, 6vw, 96px) var(--page-gutter) clamp(82px, 7vw, 112px) !important;
  overflow: hidden !important;
  scroll-margin-top: var(--nav-height, 114px);
}
.hk-main-stage.hk-main-stage .hk-main-stage__media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  background-color: transparent !important;
  -webkit-mask-image: var(--main-stage-fade-left), var(--main-stage-fade-bottom) !important;
  mask-image: var(--main-stage-fade-left), var(--main-stage-fade-bottom) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
  pointer-events: none;
}
.hk-main-stage .hk-main-stage__media > [data-stage-slide],
.hk-main-stage img.hk-main-stage__media {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: right top !important;
  background-size: cover !important;
  background-position: right top !important;
}
.hk-main-stage .hk-main-stage__content {
  position: relative;
  text-shadow: none !important;
  z-index: 1;
  grid-column: 1;
  align-self: center;
  width: var(--main-stage-copy-width) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.hk-main-stage .hk-main-stage__content > * { margin-block: 0 !important; text-shadow: none !important; }
.hk-main-stage .hk-main-stage__content :is(h2, h3) {
  max-width: 16ch !important;
  font-size: var(--hk-type-stage) !important;
  line-height: 1.08 !important;
}
.hk-main-stage .hk-main-stage__content > p:not(.eyebrow) {
  max-width: 45ch;
  font-size: clamp(16px, 1.12vw, 20px);
  line-height: 1.62;
}
.hk-main-stage .hk-main-stage__content > .button { margin-top: 8px !important; }
.hk-main-stage .hk-stage-showcase__shade,
.hk-main-stage .company-intro-v640__shade,
.hk-main-stage.company-location-v643__stage::after { display: none !important; }

/* One shared geometry for the three section headers and their card grids. */
.hk-stage-context .hk-main-stage + .hk-card-matrix-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.hk-main-stage--light { color: var(--hk-steel, #183149) !important; }
.hk-main-stage--light .hk-main-stage__content h2 { color: var(--hk-steel, #183149) !important; }
.hk-main-stage--light .hk-main-stage__content > p:not(.eyebrow) { color: #526573 !important; }
.hk-main-stage--dark { color: #fff; }
.hk-main-stage--dark .hk-main-stage__content h2 { color: #fff !important; }
.hk-main-stage--dark .hk-main-stage__content > p:not(.eyebrow) { color: rgba(255,255,255,.76) !important; }

/* Location: one bounded header, followed by a compact two-column location block. */
.company-location-v643::before { display: none !important; }
.company-location-v643 .company-location-v643__stage { background: #f4f7f9 !important; }
.company-location-v643 .company-location-v643__body {
  padding: clamp(42px, 4vw, 64px) var(--page-gutter) clamp(64px, 6vw, 92px) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  gap: clamp(28px, 4vw, 64px) !important;
}
.company-location-v643 .company-location-v643__body article {
  min-height: 0;
  padding: 0 !important;
}
.company-location-v643 .company-location-v643__body::before { display: none; }
.company-location-v643 .location-map-v643 {
  min-width: 0;
  min-height: 360px !important;
  height: clamp(360px, 29vw, 440px) !important;
}
.company-location-v643 .location-map-v643 iframe { width: 100%; height: 100%; min-height: 0 !important; }

/* Quality uses the same stage as all other main sections, with its original photo. */
#qualitaet { padding: 0 0 var(--main-stage-spacing) !important; }
#qualitaet::before { display: none !important; }
.quality-main-stage .hk-main-stage__media {
  background: url('../Bilder/v686/quality-measure-inspection-v686.webp') right top / cover no-repeat;
}
#qualitaet .quality-grid { width: calc(100% - 2 * var(--page-gutter)); margin-inline: var(--page-gutter); }

@media (max-width: 1100px) {
  :root { --main-stage-copy-width: min(52vw, 560px); }
  .company-location-v643 .company-location-v643__body { grid-template-columns: 1fr !important; }
  .company-location-v643 .location-map-v643 { width: 100%; }
}
@media (max-width: 760px) {
  :root {
    --main-stage-height: 0px;
    --main-stage-copy-width: 100%;
    --main-stage-fade-left: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 28%, #000 65%, #000 100%);
    --main-stage-fade-bottom: linear-gradient(180deg, #000 0%, #000 18%, rgba(0,0,0,.65) 37%, rgba(0,0,0,.16) 57%, transparent 73%);
  }
  .hk-main-stage.hk-main-stage { padding: 250px var(--page-gutter) 54px !important; }
  .hk-main-stage.hk-main-stage .hk-main-stage__media { height: 400px !important; }
  .hk-main-stage .hk-main-stage__content { max-width: 600px !important; gap: 16px; }
  .hk-main-stage .hk-main-stage__content :is(h2, h3) { font-size: clamp(2rem, 7.8vw, 2.75rem) !important; }
  .hk-main-stage .hk-main-stage__content :is(h2, h3) br { display: none; }
.process-bridge-v648 .process-bridge-v648__media { min-height: 280px !important; }
.company-location-v643 .location-map-v643 { min-height: 340px !important; height: 340px !important; }
}


/* Keep the existing horizontal metric strip inside its viewport at tablet widths. */
.counter-strip[data-compound="HK-S04"] { overflow-x: auto; }


/* History and Milestones use the same stage geometry and true alpha fades.
   The two historical stage images are generated photographic reconstructions. */
.company-history-v641 {
  padding: 0 0 clamp(72px, 8vw, 124px) !important;
}
.company-history-v641::before,
.company-history-v641::after,
.company-story-v641__header::before,
.company-story-v641__header::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.company-history-v641__heading.hk-main-stage {
  width: 100% !important;
  max-width: none !important;
}
.company-history-v641__summary {
  width: min(calc(100% - 2 * var(--page-gutter)), 1820px) !important;
}
.company-history-v641__scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  transform: none;
}
.company-story-v641__header.hk-main-stage {
  background: transparent !important;
}
.company-story-v641__timeline {
  margin-top: 0 !important;
}
.company-story-v641__header .hk-main-stage__content {
  text-shadow: none !important;
}
/* The wide regional panorama fills the entire stage; shared masks blend it left/down. */
.company-location-v643__stage.hk-main-stage img.hk-main-stage__media {
  object-position: right center !important;
}
@media (max-width: 760px) {
  .company-location-v643__stage.hk-main-stage img.hk-main-stage__media {
    height: 250px !important;
    --main-stage-fade-bottom: linear-gradient(180deg, #000 0%, #000 45%, rgba(0,0,0,.7) 72%, transparent 100%);
  }
}


/* V6.86t12/t18: viewport-height introduction, with smaller uncropped 3:2 photos. */
@media (min-width: 1101px) {
  #unternehmen .company-intro-v640.hk-main-stage {
    min-height: calc(100svh - var(--nav-height, 114px)) !important;
  }
  #unternehmen .company-intro-v640 .company-intro-v640__media {
    inset: 0 0 auto auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: 86% !important;
    aspect-ratio: 3 / 2;
  }
  #unternehmen .company-intro-v640 .company-intro-v640__slide {
    background-color: transparent !important;
    background-size: contain !important;
    background-position: right top !important;
  }
}

/* V6.86t17: keep the wide desktop industry photographs in their original 3:2 framing. */
@media (min-width: 1440px) {
  #branchen.hk-main-stage {
    min-height: clamp(720px, 48vw, 1120px) !important;
    --main-stage-fade-left: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 10%, rgba(0,0,0,.45) 26%, rgba(0,0,0,.85) 42%, #000 58%, #000 100%);
    --main-stage-fade-bottom: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.92) 70%, rgba(0,0,0,.6) 83%, rgba(0,0,0,.2) 94%, transparent 100%);
  }
  #branchen.hk-main-stage .hk-main-stage__media {
    inset: 0 0 auto auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    aspect-ratio: 3 / 2;
  }
  #branchen.hk-main-stage .hk-main-stage__media > [data-stage-slide] {
    background-size: contain !important;
    background-position: right top !important;
    background-repeat: no-repeat !important;
  }
}

/* V6.86t18: complete company photos on phones, with soft stage edges. */
@media (max-width: 760px) {
  #unternehmen .company-intro-v640 .company-intro-v640__media {
    inset: 0 0 auto auto !important;
    width: min(100%, 600px) !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    --main-stage-fade-bottom: linear-gradient(180deg, #000 0%, #000 48%, rgba(0,0,0,.85) 66%, rgba(0,0,0,.4) 84%, transparent 100%);
  }
  #unternehmen .company-intro-v640 .company-intro-v640__slide {
    background-size: contain !important;
    background-position: right top !important;
    background-color: transparent !important;
  }
}

/* V6.86t21: softer company photo fades reveal more detail without enlarging the images.
   Each slide retains its own mask edge; tablets preserve a darker text area. */

#unternehmen .company-intro-v640 .company-intro-v640__media {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
#unternehmen .company-intro-v640 .company-intro-v640__slide {
  -webkit-mask-image: var(--main-stage-fade-left), var(--main-stage-fade-bottom) !important;
  mask-image: var(--main-stage-fade-left), var(--main-stage-fade-bottom) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}


#unternehmen .company-intro-v640.hk-main-stage {
 --main-stage-fade-left: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.035) 8%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.55) 44%, rgba(0,0,0,.78) 58%, rgba(0,0,0,.94) 74%, #000 90%, #000 100%);
 --main-stage-fade-bottom: linear-gradient(180deg, #000 0%, #000 50%, rgba(0,0,0,.94) 63%, rgba(0,0,0,.70) 78%, rgba(0,0,0,.27) 92%, transparent 100%);
}

@media (min-width:761px) and (max-width:1100px) {
 #unternehmen .company-intro-v640.hk-main-stage {
 --main-stage-fade-left: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.025) 12%, rgba(0,0,0,.08) 26%, rgba(0,0,0,.20) 40%, rgba(0,0,0,.44) 55%, rgba(0,0,0,.74) 72%, rgba(0,0,0,.93) 88%, #000 100%);
 }
}
@media (max-width:760px) {
 #unternehmen .company-intro-v640.hk-main-stage {
 --main-stage-fade-left: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 10%, rgba(0,0,0,.36) 23%, rgba(0,0,0,.64) 38%, rgba(0,0,0,.87) 55%, rgba(0,0,0,.98) 74%, #000 90%, #000 100%);
 }
}

/* V6.86t24: restrained technical surface on the dark side of the company stage. */
@media (min-width: 1101px) {
  #unternehmen .company-intro-v640.hk-main-stage::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 70%;
    z-index: 0;
    background: url("../Bilder/structure-v686t24/company-technical-surface.svg") center / cover no-repeat, radial-gradient(ellipse at 58% 42%, rgba(120,157,176,.045), transparent 66%);
    opacity: .65;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 60%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 78%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    pointer-events: none;
  }
}