/* 1. GRUNDGERÜST */
#koehn-hero-v3 {
  --kh-orange: #ea5302;
  --kh-width: 1280px;
  position: relative !important;
  isolation: isolate;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 650px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--kh-orange);
  color: #fff;
}
#koehn-hero-v3,
#koehn-hero-v3 *,
#koehn-hero-v3 *::before,
#koehn-hero-v3 *::after { box-sizing: border-box; }

/* 2. SLIDES */


/* 3. HINTERGRUND UND ÜBERLAGERUNG */
#koehn-hero-v3 .kh3-background,
#koehn-hero-v3 .kh3-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}
#koehn-hero-v3 .kh3-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  background: linear-gradient(
    90deg,
    #ea5302 0%,
    rgba(234,83,2,.98) 25%,
    rgba(234,83,2,.88) 45%,
    rgba(234,83,2,.35) 75%,
    rgba(234,83,2,.05) 100%
  );
}

/* 4. INHALTSRASTER */
#koehn-hero-v3 .kh3-inner {
  position: relative !important;
  z-index: 2;
  display: grid !important;
  grid-template-columns: minmax(0,52%) minmax(0,48%) !important;
  grid-template-rows: minmax(0,1fr);
  align-items: stretch !important;
  direction: ltr !important;
  width: calc(100% - 64px) !important;
  max-width: var(--kh-width) !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
#koehn-hero-v3 .kh3-content {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 5;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 20px 35px 100px 0 !important;
  color: #fff !important;
  text-align: left !important;
}

/* 5. ÜBERSCHRIFTEN UND BESCHREIBUNG */
#koehn-hero-v3 .kh3-eyebrow {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: auto !important;
  min-height: 20px !important;
  margin: 0 0 17px !important;
  padding: 0 !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 1.4px !important;
  text-align: left !important;
  text-transform: uppercase !important;
}
#koehn-hero-v3 .kh3-eyebrow-line {
  display: block !important;
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #fff !important;
  transform: none !important;
}
#koehn-hero-v3 h2.kh3-title {
  display: block !important;
  width: 100% !important;
  max-width: 610px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 19px !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(34px,3.2vw,51px) !important;
  font-weight: 900 !important;
  line-height: 1.09 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
  text-transform: none !important;
  white-space: normal !important;
  transform: none !important;
}
#koehn-hero-v3 p.kh3-description {
  display: block !important;
  width: 100% !important;
  max-width: 470px !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.96) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* 6. LEISTUNGSKÄSTCHEN: HTML benötigt .kh3-features > span */
#koehn-hero-v3 .kh3-features {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 550px !important;
  margin: 0 0 25px !important;
  padding: 0 !important;
}
#koehn-hero-v3 .kh3-features > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 5px !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* 7. BUTTON */
#koehn-hero-v3 a.kh3-button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
  width: 215px !important;
  min-width: 215px !important;
  max-width: 215px !important;
  height: 60px !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 0 22px !important;
  gap: 15px !important;
  border: 1px solid #fff !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--kh-orange) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .2s ease, color .2s ease;
}
#koehn-hero-v3 a.kh3-button > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: Arial,sans-serif !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}
#koehn-hero-v3 a.kh3-button:hover {
  background: transparent !important;
  color: #fff !important;
}

/* 8. TEAMFOTO UND SIEGEL */
#koehn-hero-v3 .kh3-visual {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 3;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
#koehn-hero-v3 .kh3-team {
  position: absolute !important;
  z-index: 2;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  right: -4% !important;
  bottom: 0 !important;
  top: auto !important;
  left: auto !important;
  width: 110% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  transform: none !important;
}
#koehn-hero-v3 .kh3-seal {
  position: absolute !important;
  z-index: 8 !important;
  display: block !important;
  width: 185px !important;
  height: 185px !important;
  max-width: none !important;
  left: calc(50% - 155px) !important;
  top: 18% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: none !important;
  filter: none !important;
}

/* 9. VIDEO-SLIDE UND STANDBILD */
#koehn-hero-v3 .kh3-video-slide { background: #30251f; }
#koehn-hero-v3 .kh3-video-fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
#koehn-hero-v3 .kh3-video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
#koehn-hero-v3 .kh3-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(30,23,20,.75),
    rgba(30,23,20,.45) 50%,
    rgba(30,23,20,.08)
  );
}
#koehn-hero-v3 .kh3-video-slide h2.kh3-title {
  font-size: clamp(42px,4vw,65px) !important;
}

/* 10. NAVIGATION */
#koehn-hero-v3 .kh3-navigation {
  position: absolute !important;
  z-index: 20 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 25px !important;
  top: auto !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
#koehn-hero-v3 .kh3-nav-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: calc(100% - 64px) !important;
  max-width: var(--kh-width) !important;
  height: 48px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
#koehn-hero-v3 .kh3-dots,
#koehn-hero-v3 .kh3-arrows {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}
#koehn-hero-v3 .kh3-dots button,
#koehn-hero-v3 .kh3-arrows button {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial,sans-serif !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer !important;
}
#koehn-hero-v3 .kh3-dots button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#koehn-hero-v3 .kh3-dots button::before { content: none !important; }
#koehn-hero-v3 .kh3-dots button::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 32px !important;
  height: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.45) !important;
  box-shadow: none !important;
  transform: translate(-50%,-50%) !important;
}
#koehn-hero-v3 .kh3-dots button.is-active::after {
  background: #fff !important;
}
#koehn-hero-v3 .kh3-arrows button {
  border: 1px solid #fff !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 400 !important;
}
#koehn-hero-v3 .kh3-arrows button::before,
#koehn-hero-v3 .kh3-arrows button::after { content: none !important; }
#koehn-hero-v3 .kh3-arrows button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial,sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}
#koehn-hero-v3 .kh3-arrows button:hover {
  background: #fff !important;
  color: var(--kh-orange) !important;
}
#koehn-hero-v3 button:focus-visible,
#koehn-hero-v3 a:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}

/* 11. TABLET */
@media screen and (min-width: 768px) and (max-width: 1100px) {
  #koehn-hero-v3 { height: 610px; }
  #koehn-hero-v3 .kh3-inner {
    grid-template-columns: minmax(0,55%) minmax(0,45%) !important;
  }
  #koehn-hero-v3 h2.kh3-title {
    font-size: clamp(33px,3.7vw,42px) !important;
  }
  #koehn-hero-v3 .kh3-team {
    width: 110% !important;
    height: 90% !important;
  }
  #koehn-hero-v3 .kh3-seal {
    width: 125px !important;
    height: 125px !important;
    left: calc(50% - 110px) !important;
    top: 20% !important;
  }
  #koehn-hero-v3 .kh3-features > span {
    font-size: 11px !important;
    padding: 6px 9px !important;
  }
  #koehn-hero-v3 .kh3-video-slide h2.kh3-title {
    font-size: 44px !important;
  }
}

/* 12. MOBILE – KOMPAKTES DESIGN (BIS 767 PX) */
@media screen and (max-width: 767px) {
  #koehn-hero-v3 {
    height: 540px !important;
    min-height: 540px !important;
    background: var(--kh-orange) !important;
  }

  /* Bild unten sichtbar, Orange oben */
  #koehn-hero-v3 .kh3-background {
    object-position: center bottom !important;
  }
  #koehn-hero-v3 .kh3-overlay {
    background: linear-gradient(
      to bottom,
      rgba(234,83,2,1) 0%,
      rgba(234,83,2,1) 42%,
      rgba(234,83,2,.95) 58%,
      rgba(234,83,2,.6) 76%,
      rgba(234,83,2,0) 100%
    ) !important;
  }

  /* Inhalt von oben nach unten; Teamfoto separat unten */
  #koehn-hero-v3 .kh3-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: calc(100% - 36px) !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  #koehn-hero-v3 .kh3-content {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 22px 0 0 !important;
    text-align: left !important;
  }
  #koehn-hero-v3 .kh3-eyebrow {
    gap: 7px !important;
    margin: 0 0 10px !important;
    font-size: 9px !important;
    letter-spacing: .7px !important;
  }
  #koehn-hero-v3 .kh3-eyebrow-line {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 2px !important;
  }
  #koehn-hero-v3 h2.kh3-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    font-size: clamp(23px,6vw,29px) !important;
    line-height: 1.08 !important;
  }
  #koehn-hero-v3 p.kh3-description {
    width: 100% !important;
    margin: 0 0 12px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  #koehn-hero-v3 .kh3-features {
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
  }
  #koehn-hero-v3 .kh3-features > span {
    min-height: 25px !important;
    padding: 5px 7px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
  }
  #koehn-hero-v3 a.kh3-button {
    width: 165px !important;
    min-width: 165px !important;
    max-width: 165px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    font-size: 11px !important;
  }

  /* Teamfoto am unteren Sliderrand */
  #koehn-hero-v3 .kh3-visual {
    position: absolute !important;
    z-index: 3 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 185px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #koehn-hero-v3 .kh3-team {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
  }

  /* Auszeichnung rechts oben */
  #koehn-hero-v3 .kh3-seal {
    position: absolute !important;
    z-index: 10 !important;
    width: 115px !important;
    height: 115px !important;
    top: 65px !important;
    right: 5px !important;
    bottom: auto !important;
    left: auto !important;
    object-fit: contain !important;
    filter: none !important;
  }

  /* Navigation über dem Teamfoto */
  #koehn-hero-v3 .kh3-navigation {
    bottom: 192px !important;
  }
  #koehn-hero-v3 .kh3-nav-inner {
    width: calc(100% - 36px) !important;
    justify-content: space-between !important;
  }

  /* Slide 2: Textgröße auf Mobilgeräten korrigieren */
  #koehn-hero-v3 .kh3-video-slide h2.kh3-title {
    font-size: clamp(23px,6vw,29px) !important;
    line-height: 1.08 !important;
  }
  #koehn-hero-v3 .kh3-video-slide .kh3-inner {
    justify-content: center !important;
  }
  #koehn-hero-v3 .kh3-video-slide .kh3-content {
    padding: 0 0 65px !important;
  }
  #koehn-hero-v3 .kh3-video-slide .kh3-visual {
    display: none !important;
  }
  #koehn-hero-v3 .kh3-video-overlay {
    background: linear-gradient(
      to bottom,
      rgba(30,23,20,.85),
      rgba(30,23,20,.65) 55%,
      rgba(30,23,20,.2)
    ) !important;
  }
}

/* 13. KLEINE SMARTPHONES */
@media screen and (max-width: 380px) {
  #koehn-hero-v3 {
    height: 564px !important;
    min-height: 564px !important;
  }
  #koehn-hero-v3 h2.kh3-title {
    font-size: 23px !important;
  }
  #koehn-hero-v3 .kh3-seal {
    width: 105px !important;
    height: 105px !important;
    top: 65px !important;
  }
  #koehn-hero-v3 .kh3-visual {
    height: 175px !important;
  }
  #koehn-hero-v3 .kh3-navigation {
    bottom: 182px !important;
  }
}

/* 14. REDUZIERTE BEWEGUNG */
@media (prefers-reduced-motion: reduce) {
  #koehn-hero-v3 .kh3-slide,
  #koehn-hero-v3 a.kh3-button {
    transition: none !important;
  }
}

/* =========================================================
   HÖRAKUSTIK KÖHN – HERO V3 – DESIGNFIX 10.11.2026
   Als LETZTEN Block zur bestehenden bereinigten CSS ergänzen.
   Keine bisherigen Regeln ersetzen.
   ========================================================= */

/* Video-Slide: Inhalt ausgewogen vertikal zentrieren */
@media (min-width: 768px) {
  #koehn-hero-v3 .kh3-video-slide .kh3-content {
    justify-content: center !important;
    padding: 20px 35px 40px 0 !important;
  }
  #koehn-hero-v3 .kh3-video-slide h2.kh3-title {
    max-width: 610px !important;
    margin-bottom: 18px !important;
    line-height: 1.08 !important;
  }
  #koehn-hero-v3 .kh3-video-slide p.kh3-description {
    margin-bottom: 24px !important;
  }
}

/* Videotext links besser lesbar, Bild rechts bleibt sichtbar */
#koehn-hero-v3 .kh3-video-overlay {
  background: linear-gradient(90deg,
    rgba(30, 23, 20, .82) 0%,
    rgba(30, 23, 20, .65) 32%,
    rgba(30, 23, 20, .20) 73%,
    rgba(30, 23, 20, .05) 100%) !important;
}

/* Navigation: Punkte links, Pfeile rechts */
@media (min-width: 768px) {
  #koehn-hero-v3 .kh3-navigation {
    bottom: 26px !important;
    height: 48px !important;
  }
  #koehn-hero-v3 .kh3-nav-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    height: 48px !important;
  }
  #koehn-hero-v3 .kh3-dots,
  #koehn-hero-v3 .kh3-arrows {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    margin: 0 !important;
  }
  #koehn-hero-v3 .kh3-arrows {
    gap: 10px !important;
    margin-left: auto !important;
  }
}

/* Mobil: ursprüngliche kompakte Positionierung beibehalten */
@media (max-width: 767px) {
  #koehn-hero-v3 .kh3-video-overlay {
    background: linear-gradient(to bottom,
      rgba(30,23,20,.82) 0%,
      rgba(30,23,20,.67) 55%,
      rgba(30,23,20,.20) 100%) !important;
  }
  #koehn-hero-v3 .kh3-nav-inner {
    justify-content: space-between !important;
  }
  #koehn-hero-v3 .kh3-arrows {
    margin-left: auto !important;
    gap: 8px !important;
  }
}

/* KOEHN_V4_VISIBILITY_GUARD */
#koehn-hero-v3 .kh3-slide:not(.is-active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#koehn-hero-v3 .kh3-slide.is-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* KOEHN_SLIDE1_SEAL_FIX */
@media screen and (min-width: 1101px) {
    #koehn-hero-v3 .kh3-slide:first-child .kh3-seal {
        left: 56% !important;
        top: 20% !important;
        width: 155px !important;
        height: 155px !important;
    }
}

/* KOEHN_MOBILE_SEAL_POSITION_FIX */
@media screen and (max-width: 767px) {
    #koehn-hero-v3 .kh3-slide:first-child .kh3-seal {
        transform: translateY(-45px) !important;
    }
}

/* KOEHN_SLIDE2_MOBILE_BUTTON_FIX */
@media screen and (max-width: 767px) {

    #koehn-hero-v3 .kh3-video-slide a.kh3-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 12px 14px !important;
        white-space: nowrap !important;
    }

    #koehn-hero-v3 .kh3-video-slide a.kh3-button span {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}