/* Hoeckle homepage refinements v686
   One authoritative layer for page-specific components. */

/* Einblicke CTAs use the global button language. */
.company-insight-card-v644{outline:none}
.company-insight-card-v644__cta{width:fit-content;pointer-events:none}
.company-insight-card-v644:hover .company-insight-card-v644__cta,
.company-insight-card-v644:focus-visible .company-insight-card-v644__cta{
  color:#fff!important;
  border-color:rgba(242,140,40,.58)!important;
  background:var(--v656-steel,#10283b)!important;
  box-shadow:inset 0 -2px 0 var(--v656-orange,#f28c28),0 14px 32px rgba(7,19,30,.16)!important
}
.company-insight-card-v644:hover .company-insight-card-v644__cta .button__arrow,
.company-insight-card-v644:focus-visible .company-insight-card-v644__cta .button__arrow{
  color:var(--v656-orange,#f28c28)!important;
  transform:translateX(3px)
}
.company-insight-card-v644:focus-visible{outline:2px solid var(--hk-orange);outline-offset:4px}

/* A quiet, readable status for the upcoming anniversary. */
.company-story-v641__coming-soon {
  display: inline-block;
  margin-inline-start: .65rem;
  padding: .3em .65em;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px;
  color: rgba(255,255,255,.86);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: none;
  vertical-align: middle;
}

/* Milestone poster format retained from the approved v685 composition. */
.company-story-v641__media.is-anniversary-poster{
  width:min(100%,440px)!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:2 / 3;
  align-self:center!important;
  justify-self:center!important;
  border-radius:2px!important;
  background-color:transparent!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  box-shadow:0 28px 70px rgba(0,0,0,.34)!important
}
.company-story-v641__media.is-anniversary-poster::after{
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:2px!important
}

/* Company stage: a calm, exact seven-second crossfade with current imagery. */
#unternehmen .company-intro-v640__slide{
  background-color:#07131e!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  transform:none!important;
  transition:opacity 1200ms cubic-bezier(.4,0,.2,1)!important
}
#unternehmen .company-intro-v640__slide--t20-building{
  background-image:url("../Bilder/company-v686t20/building-through-foliage.webp")!important;
  background-position:center 52%!important
}
#unternehmen .company-intro-v640__slide--t12-robot{
  background-image:url("../Bilder/amt-v686t9/amt-02.webp")!important;
  background-position:center 50%!important
}
#unternehmen .company-intro-v640__slide--t20-grinding{
  background-image:url("../Bilder/company-v686t20/grinding.webp")!important;
  background-position:center 52%!important
}

/* History cards: dedicated semantic mappings avoid nth-child cascade conflicts. */
#unternehmen .company-history-v641__summary .company-history-card{
  background-color:#07131e!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%,cover!important
}
#unternehmen .company-history-v641__summary .company-history-card--origin{
  background-image:
    linear-gradient(180deg,rgba(7,19,30,.01) 0%,rgba(7,19,30,.12) 48%,rgba(7,19,30,.92) 100%),
    url("../Bilder/v686/history-repair-1920s-v686.webp")!important;
  background-position:center,center!important
}
#unternehmen .company-history-v641__summary .company-history-card--specialization{
  background-image:
    linear-gradient(180deg,rgba(7,19,30,.01) 0%,rgba(7,19,30,.13) 46%,rgba(7,19,30,.91) 100%),
    url("../Bilder/milestones/history-series-assembly-v681.webp")!important;
  background-position:center,center 48%!important
}
#unternehmen .company-history-v641__summary .company-history-card--austria{
  background-image:
    linear-gradient(180deg,rgba(7,19,30,.01) 0%,rgba(7,19,30,.12) 44%,rgba(7,19,30,.9) 100%),
    url("../Bilder/milestones/13_moderne_architektur_mit_unternehmensflaggen.webp")!important;
  background-position:center,center 52%!important
}

/* Philosophy card now fills edge to edge with a real precision-workshop image. */
#unternehmen .company-principles-v640 .company-principle--philosophy{
  background-color:#07131e!important;
  background-image:
    linear-gradient(180deg,rgba(7,19,30,.01),rgba(7,19,30,.88)),
    url("../Bilder/v686/company-philosophy-precision-v686t5.webp")!important;
  background-position:center,center 48%!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%,cover!important
}

/* Standort panorama: full width, no cover crop and therefore substantially less zoom. */
.company-location-v643::before{
  background-position:center,center,center bottom!important;
  background-repeat:no-repeat,no-repeat,no-repeat!important;
  background-size:100% 100%,100% 100%,100% auto!important
}

/* Products and processes: explicit, non-overlapping v686 stage sets. */

#produkte .hk-stage-showcase__slide,
#prozesse .hk-stage-showcase__slide{
  background-color:#e9eef1!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important
}
#produkte .hk-stage-showcase__slide--products-v686-01{
  background-image:url("../Bilder/v686/product-stage-01-crankshafts-v686.webp")!important
}
#produkte .hk-stage-showcase__slide--products-v686-02{
  background-image:url("../Bilder/v686/product-stage-02-connecting-rods-v686.webp")!important
}
#produkte .hk-stage-showcase__slide--products-v686-03{
  background-image:url("../Bilder/v686/product-stage-03-crankshaft-macro-v686.webp")!important
}
/* Process stage: heat treatment first, followed by the selected in-house processes. */
#prozesse .hk-stage-showcase__slide--processes-t9-03{
  background-image:url("../Bilder/media-3x2/process-haerten.webp")!important;
  background-position:center 50%!important
}
#prozesse .hk-stage-showcase__slide--processes-t9-02{
  background-image:url("../Bilder/process/27_nadelpraegung.webp")!important;
  background-position:center 50%!important
}
#prozesse .hk-stage-showcase__slide--processes-t9-01{
  background-image:url("../Bilder/process/01_präzisionsfräsen_eines_kurbelwellenkomponenten.webp")!important;
  background-position:center 50%!important
}
#prozesse .hk-stage-showcase__slide--processes-t9-04{
  background-image:url("../Bilder/process/22_präzision_in_der_metallbearbeitung.webp")!important;
  background-position:center 50%!important
}
#prozesse .hk-stage-showcase__slide--processes-t9-07{
  background-image:url("../Bilder/v686/process-cracking-assembly-v686.webp")!important;
  background-position:center 50%!important
}
#prozesse .hk-stage-showcase__slide--processes-t9-08{
  background-image:url("../Bilder/process/wuchten_webp.webp")!important;
  background-position:center 50%!important
}
#prozesse .hk-stage-showcase__slide--processes-t9-09{
  background-image:url("../Bilder/process/03_industriekomponente_in_präziser_handhabung.webp")!important;
  background-position:center 50%!important
}
#prozesse .hk-stage-showcase__slide--processes-t9-10{
  background-image:url("../Bilder/process/20_präzisionsmessung_in_der_fertigung.webp")!important;
  background-position:center 50%!important
}
#prozesse .hk-stage-showcase__slide--processes-t9-11{
  background-image:url("../Bilder/v686/process-laser-marking-v686.webp")!important;
  background-position:center 50%!important
}


/* Technology: fine drawings and original AMT photography, with calm crossfades. */
#technologie [data-tech-slider]{
  position:relative;
  overflow:hidden;
  background:#07131e!important
}
#technologie [data-tech-slider] .split-stage__slide{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  opacity:0!important;
  transform:none!important;
  animation:none!important;
  background-color:#07131e;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  transition:opacity 1100ms cubic-bezier(.4,0,.2,1)!important;
  will-change:opacity
}
#technologie [data-tech-slider] .split-stage__slide.is-active{
  z-index:1;
  opacity:1!important;
  transform:none!important
}
/* V6.86t21: alternate manufacturing, hall drawings and selected AMT photographs. */
#technologie .split-stage__slide--tech-t21-machining{
  background-image:url("../Bilder/v686/technology-precision-line-v686.webp")!important;
  background-position:60% center!important
}
#technologie .split-stage__slide--tech-t21-hall-overview{
  background-image:url("../Bilder/blueprints-v686t9/production-hall-overview-original.webp")!important;
  background-position:center!important
}
#technologie .split-stage__slide--tech-t11-robot{
  background-image:url("../Bilder/amt-v686t9/amt-02.webp")!important;
  background-position:56% 48%!important
}
#technologie .split-stage__slide--tech-t21-machine-setup{
  background-image:url("../Bilder/v686/technology-machine-setup-v686.webp")!important;
  background-position:54% center!important
}
#technologie .split-stage__slide--tech-t21-hall-interior{
  background-image:url("../Bilder/blueprints-v686t9/production-hall-original.webp")!important;
  background-position:center!important
}
#technologie .split-stage__slide--tech-t11-precision-macro{
  background-image:url("../Bilder/amt-v686t9/amt-06.webp")!important;
  background-position:center!important
}
#technologie .split-stage__slide--tech-t21-production-detail{
  background-image:url("../Bilder/v686/production-light-v686.webp")!important;
  background-position:center!important
}
#technologie .split-stage__slide--tech-t11-employee-detail{
  background-image:url("../Bilder/amt-v686t9/amt-25.webp")!important;
  background-position:44% center!important
}
#technologie [data-tech-slider]::before{
  background:
    linear-gradient(90deg,rgba(7,19,30,.02) 0%,transparent 68%,rgba(7,19,30,.11) 100%),
    linear-gradient(180deg,rgba(7,19,30,.02) 0%,transparent 72%,rgba(7,19,30,.06) 100%)!important
}
#technologie [data-tech-slider]::after{
  background:linear-gradient(90deg,transparent 0%,transparent 94%,rgba(16,35,49,.1) 100%)!important
}

/* News image: clean full-bleed team photo, without the former white gradient. */
#aktuelles .split-stage__media--news{
  background-image:url("../Bilder/v686/apprentices-career-v686.webp")!important;
  background-position:center 42%!important;
  background-repeat:no-repeat!important;
  background-size:cover!important
}

/* Insight cards use independent, slow crossfades. */
.company-insight-card-v644__media,
.company-insight-card-v644__slide{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%
}
.company-insight-card-v644__media{z-index:0;overflow:hidden;background:#07131e}
.company-insight-card-v644__slide{
  opacity:0!important;
  transform:none!important;
  animation:none!important;
  background-color:#07131e;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  transition:opacity 1200ms cubic-bezier(.4,0,.2,1)!important
}
.company-insight-card-v644__slide.is-active{opacity:1!important}
.company-insight-card-v644__slide--process-01{background-image:url("../Bilder/v686/process-stage-01-milling-v686.webp")}
.company-insight-card-v644__slide--process-02{background-image:url("../Bilder/v686/technology-machine-setup-v686.webp")}
.company-insight-card-v644__slide--process-03{background-image:url("../Bilder/v686/quality-measure-workshop-v686.webp")}
.company-insight-card-v644__slide--technology-01{background-image:url("../Bilder/v686/insight-technology-v686.webp")}
.company-insight-card-v644__slide--technology-02{background-image:url("../Bilder/v686/technology-crane-v686.webp")}
.company-insight-card-v644__slide--technology-03{background-image:url("../Bilder/v686/production-light-v686.webp")}
.company-insight-card-v644__slide--career-01{background-image:url("../Bilder/v686/apprentices-career-v686.webp");background-position:center 42%}
.company-insight-card-v644__slide--career-02{background-image:url("../Bilder/v686/career-young-worker-v686.webp");background-position:center 34%}
.company-insight-card-v644__slide--career-03{background-image:url("../Bilder/v686/career-workshop-portrait-v686.webp");background-position:center 28%}
.company-insight-card-v644:hover .company-insight-card-v644__slide{transform:scale(1.012)!important;transition:opacity 1200ms cubic-bezier(.4,0,.2,1),transform 900ms cubic-bezier(.22,1,.36,1)!important}
.company-insight-card-v644__shade{z-index:1}
.company-insight-card-v644__content{z-index:2}

/* Reference band: clear typography and a quiet, one-at-a-time dissolve. */
.hk-reference-marquee[data-variant="precision-index"]{
  --reference-fade-duration:1200ms;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--hk-dark-solid,#172229)!important;
  border-block:1px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important
}
.hk-reference-marquee[data-variant="precision-index"]::before,
.hk-reference-marquee[data-variant="precision-index"]::after,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__group::before,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot::before,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot::after,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__card::before,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__card::after{
  content:none!important;
  display:none!important
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__track{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  transform:none!important;
  animation:none!important;
  will-change:auto
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__group{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--reference-count),minmax(0,1fr));
  gap:0!important;
  width:100%;
  height:100%;
  padding:0 clamp(12px,2vw,36px)!important;
  background:var(--hk-dark-solid,#172229)
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot[data-logo]{
  position:relative;
  grid-column:var(--reference-column);
  grid-row:1;
  display:none;
  width:auto!important;
  min-width:0!important;
  height:100%!important;
  padding:0!important;
  flex-basis:auto!important
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot.is-visible,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot.is-entering,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot.is-leaving{display:block}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot.is-entering{z-index:3}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot.is-leaving{z-index:2}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__card{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
  overflow:hidden;
  border:0!important;
  border-radius:0!important;
  background:var(--hk-dark-solid,#172229)!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__statement,
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__statement.is-mechanical-source{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  align-content:center;
  align-items:center;
  justify-items:center;
  gap:7px;
  width:100%!important;
  height:100%!important;
  padding:16px 12px!important;
  opacity:1!important;
  visibility:visible!important;
  text-align:center!important
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__statement strong{
  color:rgba(242,140,40,.82)!important;
  font-size:clamp(9px,.66vw,11px)!important;
  font-weight:500!important;
  line-height:1.2!important;
  letter-spacing:.12em!important;
  text-transform:uppercase;
  white-space:nowrap
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__statement > span{
  max-width:100%;
  color:rgba(255,255,255,.86)!important;
  font-family:var(--hk-font-display,var(--hk-font))!important;
  font-size:clamp(14px,1.05vw,18px)!important;
  font-weight:430!important;
  line-height:1.2!important;
  letter-spacing:-.012em!important;
  white-space:nowrap
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__mechanical-half{display:none!important}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot.is-leaving .hk-reference-marquee__card{
  animation:hk-reference-dissolve-out var(--reference-fade-duration) ease-in-out both!important
}
.hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot.is-entering .hk-reference-marquee__card{
  animation:hk-reference-dissolve-in var(--reference-fade-duration) ease-in-out both!important
}
@keyframes hk-reference-dissolve-out{
  0%{opacity:1}
  45%,100%{opacity:0}
}
@keyframes hk-reference-dissolve-in{
  0%,55%{opacity:0}
  100%{opacity:1}
}
@media (max-width:1047px){
  .hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__statement > span{
    font-size:clamp(14px,1.6vw,17px)!important
  }
}
@media (max-width:559px){
  .hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__statement strong{font-size:10px!important}
  .hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__statement > span{font-size:17px!important}
}
@media (prefers-reduced-motion:reduce){
  #technologie [data-tech-slider] .split-stage__slide,
  .company-intro-v640__slide,
  .company-insight-card-v644__slide{transition:none!important;transform:none!important}
  #technologie [data-tech-slider] .split-stage__slide.is-active,
  .company-insight-card-v644__slide.is-active{opacity:1!important}
  .hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot .hk-reference-marquee__card,
  .hk-reference-marquee[data-variant="precision-index"] .hk-reference-marquee__slot .hk-reference-marquee__card::after{
    animation:none!important;
    transform:none!important;
    filter:none!important
  }
}

/* V6.86t12: milestone years and three unretouched scans from the Hoeckle archive. */
#unternehmen .company-history-v641__summary .company-history-card__date {
  position: absolute; z-index: 2; inset: 20px 20px auto auto;
  margin: 0; width: auto; height: auto; padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 3px;
  background: rgba(23,34,41,.82); color: #fff; font-family: inherit;
  font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
#unternehmen .company-history-v641__summary .company-history-card--archive {
  display: flex; flex-direction: column; justify-content: flex-start !important;
  aspect-ratio: auto !important; padding: 0 !important; background: #172229 !important;
}
#unternehmen .company-history-card__archive-media {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: clamp(280px,27vw,400px); flex: 0 0 auto;
  padding: 16px; background: #e8e6df;
}
#unternehmen .company-history-card__archive-media img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
#unternehmen .company-history-card__archive-copy { padding: clamp(24px,2vw,34px); }
#unternehmen .company-history-card__archive-copy h4 { line-height: 1.15; text-wrap: balance; }
#unternehmen .company-history-card__archive-copy p { font-size: 15px; line-height: 1.65; }

/* V6.86t19: Austrian alpine house replaces the roadside sign in the motorcycle stage photo. */
#branchen .hk-stage-showcase__slide--branches-02 {
  background-image: url("../Bilder/branches-v686t19/motorcycle-alpine-house-austria.webp") !important;
}

@media (max-width: 760px) {
  #branchen.hk-main-stage .hk-stage-showcase__slide--branches-02 { background-position: right 35% !important; }
}