/* Shared V6.86 palette. #172229 is the original Karriere/Footer midtone,
   now used as a solid surface rather than a steel gradient. */
:root {
  --hk-dark-solid: #172229;
  --hk-dark: var(--hk-dark-solid);
  --hk-steel-bg: var(--hk-dark-solid);
  --hk-dark-steel-bg: var(--hk-dark-solid);
  --v644-blue: var(--hk-dark-solid);
  --v644-blue-deep: var(--hk-dark-solid);
  --v648-dark: var(--hk-dark-solid);
  --v648-steel: var(--hk-dark-solid);
  --v656-dark: var(--hk-dark-solid);
  --v656-steel: var(--hk-dark-solid);
  --v659-dark: var(--hk-dark-solid);
  --v659-steel: var(--hk-dark-solid);
}
/* Plain surfaces only: photographic layers keep their transparent fades. */
.site-header,
.site-footer,
.section--dark:not(#kontakt),
.section--career-dark-v648,
.hk-main-stage--dark,
.company-story-v641,
.counter-strip[data-compound="HK-S04"],
.hk-stage-context--branches::before,
.hk-reference-marquee,
#technologie .split-stage__panel,
.request-contact-v637 {
  background: var(--hk-dark-solid) !important;
}

/* The same full-section composition for Karriere and Produkt trifft Prozess. */
:is(#karriere, #produkt-prozess).hk-career-cta {
  display: grid !important;
  align-items: center !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 100svh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(86px, 9vh, 148px) var(--page-gutter) !important;
  background: var(--hk-dark-solid) !important;
}
:is(#karriere, #produkt-prozess).hk-career-cta .hk-career-cta__layout {
  display: grid;
  align-self: center;
  align-items: stretch;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
  gap: 0 !important;
  width: min(calc(100% - 2 * var(--page-gutter)), 1280px) !important;
  max-width: 1280px !important;
  min-height: clamp(360px, 30vw, 460px) !important;
  margin-inline: auto !important;
  border: 0 !important;
  border-radius: 8px !important;
  clip-path: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  background: #fff !important;
}
:is(#karriere, #produkt-prozess).hk-career-cta :is(.hk-career-cta__media, .hk-career-cta__panel) {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(360px, 30vw, 460px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
:is(#karriere, #produkt-prozess).hk-career-cta .hk-career-cta__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(12px, 1.4vw, 18px) !important;
  padding: clamp(28px, 3vw, 44px) clamp(30px, 3vw, 48px) !important;
  color: var(--hk-steel) !important;
  background: #fff !important;
}
#produkt-prozess .process-bridge-v648__media {
  background: url('../Bilder/process/02_präzisionsbearbeitung_in_der_metallindustrie.webp') center / cover no-repeat !important;
}
#produkt-prozess .process-bridge-v648__copy > * { margin-block: 0; }
#produkt-prozess .process-bridge-v648__copy h2 {
  color: var(--hk-steel) !important;
  font-size: clamp(2rem, 2.25vw, 3rem) !important;
  line-height: 1.04 !important;
  max-width: 100% !important;
  overflow-wrap: normal;
  hyphens: manual;
}
#produkt-prozess .process-bridge-v648__copy > p:not(.eyebrow) {
  max-width: 38ch;
  color: var(--hk-muted) !important;
  font-size: clamp(.96rem, .94vw, 1.08rem);
  line-height: 1.52;
}
:is(#karriere, #produkt-prozess).hk-career-cta .hk-career-cta__panel .button {
  color: #fff !important;
  background: var(--hk-dark-solid) !important;
  border-color: var(--hk-dark-solid) !important;
}
:is(#karriere, #produkt-prozess).hk-career-cta .hk-career-cta__panel .button:is(:hover, :focus-visible) {
  border-color: var(--hk-orange) !important;
}

@media (max-width: 1100px) {
  :is(#karriere, #produkt-prozess).hk-career-cta .hk-career-cta__layout {
    width: min(calc(100% - 2 * var(--page-gutter)), 760px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }
  :is(#karriere, #produkt-prozess).hk-career-cta :is(.hk-career-cta__media, .hk-career-cta__panel) {
    min-height: 320px !important;
  }
}
@media (max-width: 760px) {
  :is(#karriere, #produkt-prozess).hk-career-cta .hk-career-cta__layout { width: 100% !important; }
}

/* Explicit legacy surfaces that do not consume the shared background tokens. */
.company-intro-v640,
.company-story-v641,
#kontakt .request-contact-v637,
#kontakt .project-assistant-card,
.faq-simple-cta,
.news-hero,
.location-map-v643,
#referenzband.hk-reference-marquee,
#referenzband .hk-reference-marquee__group,
#referenzband .hk-reference-marquee__card {
  background: var(--hk-dark-solid) !important;
}
#referenzband.hk-reference-marquee::before { background: none !important; }
/* Dark controls on light surfaces use the same colour, retaining orange hover accents. */
body .hero__panel .button,
body .hk-main-stage--light .button,
body .product-master-card .product-master-card__inquiry,
body .company-location-v643 .button,
#kontakt .request-form-v637 .button {
  color: #fff !important;
  border-color: var(--hk-dark-solid) !important;
  background: var(--hk-dark-solid) !important;
}
#produkt-prozess .process-bridge-v648__copy h2::after {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 18px;
  background: var(--hk-orange);
}

/* Preserve the original steel shading in the navigation only. */
.site-header {
  --hk-steel-bg:
    radial-gradient(ellipse 28% 170% at 18% 0%, rgba(255,255,255,.15), transparent 70%),
    radial-gradient(ellipse 28% 170% at 88% 0%, rgba(255,255,255,.10), transparent 72%),
    linear-gradient(100deg, #0e151a 0%, #24343d 42%, #0e151a 100%);
  --hk-dark-steel-bg: var(--hk-steel-bg);
  background: var(--hk-steel-bg) !important;
}

/* Keep the navigation accent inside the viewport, including the mobile menu. */
.site-header::after { left: 0; right: 0; }

/* V6.86t7: compact project action aligned beside the existing FAQ control. */
.site-header .main-nav .nav-cta.button{min-height:36px!important;height:36px;padding:8px 11px!important;gap:8px;border:1px solid rgba(255,255,255,.1)!important;border-radius:999px;color:rgba(255,255,255,.82)!important;background:rgba(255,255,255,.025)!important;box-shadow:none!important;font-size:clamp(13px,.82vw,15px)!important;font-weight:650;line-height:1;letter-spacing:.03em;white-space:nowrap;transition:color 240ms ease,border-color 240ms ease,background-color 240ms ease,transform 240ms cubic-bezier(.22,1,.36,1),box-shadow 240ms ease}
.site-header .main-nav .nav-cta.button::before{content:"";position:absolute;inset:0;width:auto;height:auto;opacity:0;padding:0;border:0;border-radius:inherit;pointer-events:none;background:linear-gradient(112deg,transparent 12%,rgba(242,140,40,.14) 48%,transparent 82%)!important;transform:translateX(-80%);transition:opacity 240ms ease,transform .62s cubic-bezier(.22,1,.36,1)}
.site-header .main-nav .nav-cta.button > span{position:relative;z-index:1}
.site-header .main-nav .nav-cta.button .button__arrow{color:rgba(255,255,255,.44);font-size:12px;transform:none;transition:color 240ms ease,transform 240ms cubic-bezier(.22,1,.36,1)}
.site-header .main-nav .nav-cta.button:is(:hover,:focus-visible){color:#fff!important;border-color:rgba(242,140,40,.48)!important;background:rgba(255,255,255,.055)!important;box-shadow:0 0 18px rgba(242,140,40,.1)!important;transform:translateY(-1px)!important}
.site-header .main-nav .nav-cta.button:is(:hover,:focus-visible)::before{opacity:1;transform:translateX(80%)}
.site-header .main-nav .nav-cta.button:is(:hover,:focus-visible) .button__arrow{color:#f28c28;transform:translateX(2px)}
@media(min-width:1041px){
.site-header{column-gap:clamp(10px,.85vw,16px)}
.site-header .main-nav{min-width:0;gap:clamp(10px,1vw,18px);padding-inline-start:clamp(0px,calc((100vw - 1100px) * .4),80px)}
.site-header .main-nav .nav-cta.button{flex-shrink:0;margin-left:auto}
}
@media(min-width:1041px) and (max-width:1280px){.site-header .main-nav .nav-cta.button{height:34px;min-height:34px!important;padding:7px 9px!important}}
@media(max-width:1040px){.site-header .main-nav .nav-cta.button{min-height:44px!important;height:auto;margin-left:0;padding:11px 14px!important}}
@media(prefers-reduced-motion:reduce){.site-header .main-nav .nav-cta.button,.site-header .main-nav .nav-cta.button::before,.site-header .main-nav .nav-cta.button .button__arrow{transition:none}}

@media(min-width:1041px) and (max-width:1099px){
.site-header .main-nav{gap:8px}
.site-header .main-nav > a:not(.nav-cta){font-size:14px}
}

/* V6.86t9: a finer underline, close to each navigation label. */
.site-header .main-nav > a:not(.nav-cta)::after,
.site-header .language-link::after {
  bottom: -7px;
  height: 1.5px;
  background: rgba(242, 140, 40, .68);
  box-shadow: none;
}