.h8-hero,
.h8-hero-inner,
.h8-hero-item,
.tj-hero-section,
.hero-section,
.hero-area,
.egolas-home08-video-root {
  position: relative !important;
  overflow: hidden !important;
}

.egolas-home08-video-root {
  background: transparent !important;
  isolation: isolate !important;
}

.egolas-home08-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
}

.egolas-home08-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* EGOLAS v25: Startseitenvideo auf iPhone ohne Abdunklung sichtbar machen.
   Das Video liegt bewusst über dem dunklen Theme-Hintergrund, der Inhalt liegt darüber. */
.h8-hero.egolas-home08-video-root,
.h8-hero.egolas-home08-video-root .h8-hero-inner,
.h8-hero.egolas-home08-video-root .h8-hero-item,
.h8-hero-inner.egolas-home08-video-root,
.h8-hero-item.egolas-home08-video-root,
.egolas-home08-video-root.h8-hero,
.egolas-home08-video-root .h8-hero-inner,
.egolas-home08-video-root .h8-hero-item {
  background: transparent !important;
  background-color: transparent !important;
}

.h8-hero.egolas-home08-video-root::before,
.h8-hero.egolas-home08-video-root::after,
.h8-hero.egolas-home08-video-root .h8-hero-inner::before,
.h8-hero.egolas-home08-video-root .h8-hero-inner::after,
.h8-hero.egolas-home08-video-root .h8-hero-item::before,
.h8-hero.egolas-home08-video-root .h8-hero-item::after,
.h8-hero-item.egolas-hero-video-active::before,
.h8-hero-item.egolas-hero-video-active::after,
.h8-hero.egolas-hero-video-active .h8-hero-item::before,
.h8-hero.egolas-hero-video-active .h8-hero-item::after,
.h8-hero-inner.egolas-hero-video-active .h8-hero-item::before,
.h8-hero-inner.egolas-hero-video-active .h8-hero-item::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.h8-hero .h8-hero-bg-image,
.h8-hero img.h8-hero-bg-image,
.h8-hero [class*="bg-image"],
.h8-hero [style*="background-image"],
.egolas-home08-video-root .h8-hero-bg-image,
.egolas-home08-video-root img.h8-hero-bg-image,
.egolas-home08-video-root [class*="bg-image"],
.egolas-home08-video-root [style*="background-image"] {
  opacity: 0 !important;
  visibility: hidden !important;
}

.h8-hero > *:not(.egolas-home08-video):not(.egolas-home08-video-overlay),
.h8-hero-inner > *:not(.egolas-home08-video):not(.egolas-home08-video-overlay),
.h8-hero-item > *:not(.egolas-home08-video):not(.egolas-home08-video-overlay),
.egolas-home08-video-root > *:not(.egolas-home08-video):not(.egolas-home08-video-overlay),
.egolas-home08-video-root .container,
.egolas-home08-video-root .h8-hero-item-wrapper,
.egolas-home08-video-root .h8-hero-content,
.egolas-home08-video-root .h8-hero-box,
.h8-hero .container,
.h8-hero .h8-hero-item-wrapper,
.h8-hero .h8-hero-content,
.h8-hero .h8-hero-box,
.h8-hero .swiper,
.h8-hero .swiper-wrapper,
.h8-hero .swiper-slide {
  position: relative !important;
  z-index: 3 !important;
}

.egolas-home08-video-root .egolas-home08-video-overlay,
.h8-hero-item.egolas-hero-video-active .egolas-home08-video-overlay,
.h8-hero.egolas-hero-video-active .egolas-home08-video-overlay,
.h8-hero-inner.egolas-hero-video-active .egolas-home08-video-overlay {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/*
 * Wichtig:
 * Der Kontakt-Kreis darf NICHT position:relative bekommen.
 * Er muss absolut im Hero-Bereich sitzen, sonst springt er unter den Text.
 */
.h8-hero .circle-text-wrap,
.h8-hero-item-wrapper .circle-text-wrap {
  position: absolute !important;
  width: 160px !important;
  height: 160px !important;
  right: 40px !important;
  left: auto !important;
  inset-inline-end: 40px !important;
  inset-inline-start: auto !important;
  bottom: 90px !important;
  z-index: 1000 !important;
}

.h8-hero .circle-text-wrap .desc,
.h8-hero-item-wrapper .circle-text-wrap .desc {
  max-width: 112px !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .h8-hero .circle-text-wrap,
  .h8-hero-item-wrapper .circle-text-wrap {
    right: 24px !important;
    inset-inline-end: 24px !important;
    bottom: 70px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .h8-hero .circle-text-wrap,
  .h8-hero-item-wrapper .circle-text-wrap {
    right: 20px !important;
    inset-inline-end: 20px !important;
    bottom: 40px !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .h8-hero .circle-text-wrap,
  .h8-hero-item-wrapper .circle-text-wrap {
    right: 18px !important;
    inset-inline-end: 18px !important;
    bottom: 30px !important;
  }
}

@media (max-width: 575px) {
  .h8-hero .circle-text-wrap,
  .h8-hero-item-wrapper .circle-text-wrap {
    width: 120px !important;
    height: 120px !important;
    right: 15px !important;
    inset-inline-end: 15px !important;
    bottom: 25px !important;
  }
}

/* EGOLAS mobile hero title fix
   Loaded after bexon-core.css via functions.php, so it safely overrides the original H8 hero sizes. */
@media (max-width: 767px) {
  .h8-hero .h8-hero-content .h8-hero-title,
  .h8-hero-content .h8-hero-title {
    font-size: clamp(36px, 8.5vw, 48px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media (max-width: 390px) {
  .h8-hero .h8-hero-content .h8-hero-title,
  .h8-hero-content .h8-hero-title {
    font-size: 34px !important;
  }
}

/* EGOLAS mobile hero subtitle/asterisk text spacing fix
   Moves the small text below the mobile hero title down so it no longer sits inside/over the title. */
@media (max-width: 767px) {
  .h8-hero .h8-hero-content .h8-hero-title {
    margin-bottom: 138px !important;
  }

  .h8-hero .h8-hero-content .h8-hero-title .title-year,
  .h8-hero-content .h8-hero-title .title-year {
    top: calc(100% + 42px) !important;
    margin-top: 0 !important;
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    max-width: min(92vw, 350px) !important;
    width: min(92vw, 350px) !important;
    display: block !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
  }
}

@media (max-width: 390px) {
  .h8-hero .h8-hero-content .h8-hero-title {
    margin-bottom: 155px !important;
  }

  .h8-hero .h8-hero-content .h8-hero-title .title-year,
  .h8-hero-content .h8-hero-title .title-year {
    top: calc(100% + 48px) !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
  }
}


/* EGOLAS subpage/page-header video
   Replaces the dark breadcrumb/header background on pages such as AGB, Kontakt, Datenschutz, etc. */
.tj-page-header {
  position: relative !important;
  overflow: hidden !important;
  background-color: #0c1e21 !important;
}

.tj-page-header.egolas-page-header-video-active {
  background-image: none !important;
  background-blend-mode: normal !important;
}

.tj-page-header.egolas-page-header-video-active .egolas-home08-video {
  z-index: 0 !important;
}

.tj-page-header.egolas-page-header-video-active .egolas-home08-video-overlay {
  z-index: 1 !important;
  background: linear-gradient(
    180deg,
    rgba(12, 30, 33, 0.58) 0%,
    rgba(12, 30, 33, 0.38) 52%,
    rgba(12, 30, 33, 0.56) 100%
  ) !important;
}

.tj-page-header.egolas-page-header-video-active .container,
.tj-page-header.egolas-page-header-video-active .row,
.tj-page-header.egolas-page-header-video-active .tj-page-header-content,
.tj-page-header.egolas-page-header-video-active .tj-page-title,
.tj-page-header.egolas-page-header-video-active .tj-page-navs {
  position: relative !important;
  z-index: 2 !important;
}

.tj-page-header.egolas-page-header-video-active .page-header-overlay {
  display: none !important;
}

@media (min-width: 1025px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 360px !important;
  }
}

@media (max-width: 1024px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 260px !important;
  }
}

@media (max-width: 575px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 240px !important;
  }
}

/* EGOLAS subpage header v2
   Moves the page title/breadcrumb lower and removes the dark video veil on subpages. */
.tj-page-header.egolas-page-header-video-active .egolas-home08-video-overlay {
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

.tj-page-header.egolas-page-header-video-active .tj-page-header-content {
  transform: translateY(42px) !important;
}

@media (max-width: 1024px) {
  .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: translateY(28px) !important;
  }
}

@media (max-width: 575px) {
  .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: translateY(20px) !important;
  }
}

/* EGOLAS subpage header mobile v3
   On phones the white mobile navigation overlaps the page title. This creates enough top space
   and places the title/breadcrumb lower inside the video area. */
@media (max-width: 767px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 310px !important;
    padding-top: 112px !important;
    padding-bottom: 38px !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .tj-page-header.egolas-page-header-video-active .container,
  .tj-page-header.egolas-page-header-video-active .row {
    width: 100% !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: none !important;
    margin-top: 28px !important;
    padding-top: 0 !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-title,
  .tj-page-header.egolas-page-header-video-active .tj-page-title h1,
  .tj-page-header.egolas-page-header-video-active h1 {
    font-size: clamp(34px, 11vw, 48px) !important;
    line-height: 1.05 !important;
    margin-bottom: 14px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-navs,
  .tj-page-header.egolas-page-header-video-active .breadcrumb,
  .tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper {
    margin-top: 0 !important;
  }
}

@media (max-width: 575px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 300px !important;
    padding-top: 104px !important;
    padding-bottom: 34px !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    margin-top: 34px !important;
  }
}

@media (max-width: 390px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 295px !important;
    padding-top: 100px !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    margin-top: 38px !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-title,
  .tj-page-header.egolas-page-header-video-active .tj-page-title h1,
  .tj-page-header.egolas-page-header-video-active h1 {
    font-size: 38px !important;
  }
}

/* EGOLAS subpage header tablet + landscape v4
   Keeps the page title below the floating white navigation on tablets and in landscape view. */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 380px !important;
    padding-top: 165px !important;
    padding-bottom: 62px !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .tj-page-header.egolas-page-header-video-active .container,
  .tj-page-header.egolas-page-header-video-active .row,
  .tj-page-header.egolas-page-header-video-active .col-lg-12 {
    width: 100% !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-title,
  .tj-page-header.egolas-page-header-video-active .tj-page-title h1,
  .tj-page-header.egolas-page-header-video-active h1 {
    font-size: clamp(42px, 7vw, 68px) !important;
    line-height: 1.05 !important;
    margin-bottom: 16px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-navs,
  .tj-page-header.egolas-page-header-video-active .breadcrumb,
  .tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper {
    margin-top: 0 !important;
  }
}

@media only screen and (max-width: 767px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 345px !important;
    padding-top: 150px !important;
    padding-bottom: 45px !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-title,
  .tj-page-header.egolas-page-header-video-active .tj-page-title h1,
  .tj-page-header.egolas-page-header-video-active h1 {
    font-size: clamp(32px, 10vw, 48px) !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
  }
}

@media only screen and (orientation: landscape) and (max-height: 700px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 335px !important;
    padding-top: 150px !important;
    padding-bottom: 42px !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-title,
  .tj-page-header.egolas-page-header-video-active .tj-page-title h1,
  .tj-page-header.egolas-page-header-video-active h1 {
    font-size: clamp(34px, 9vh, 54px) !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-navs,
  .tj-page-header.egolas-page-header-video-active .breadcrumb,
  .tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper {
    margin-top: 0 !important;
  }
}

@media only screen and (orientation: landscape) and (max-height: 520px) {
  .tj-page-header.egolas-page-header-video-active {
    min-height: 315px !important;
    padding-top: 142px !important;
    padding-bottom: 34px !important;
  }

  .tj-page-header.egolas-page-header-video-active .tj-page-title,
  .tj-page-header.egolas-page-header-video-active .tj-page-title h1,
  .tj-page-header.egolas-page-header-video-active h1 {
    font-size: clamp(32px, 8vh, 46px) !important;
  }
}

/* EGOLAS subpage breadcrumb readability v5
   Makes the breadcrumb text readable on the video header. */
.tj-page-header.egolas-page-header-video-active .tj-page-navs,
.tj-page-header.egolas-page-header-video-active .tj-page-navs a,
.tj-page-header.egolas-page-header-video-active .breadcrumb,
.tj-page-header.egolas-page-header-video-active .breadcrumb a,
.tj-page-header.egolas-page-header-video-active .breadcrumb li,
.tj-page-header.egolas-page-header-video-active .breadcrumb li a,
.tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper,
.tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper a {
  color: #ffffff !important;
}

.tj-page-header.egolas-page-header-video-active .tj-page-navs a:hover,
.tj-page-header.egolas-page-header-video-active .breadcrumb a:hover,
.tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper a:hover {
  color: #ffffff !important;
  opacity: 0.9 !important;
}

.tj-page-header.egolas-page-header-video-active .tj-page-navs .current,
.tj-page-header.egolas-page-header-video-active .breadcrumb .active,
.tj-page-header.egolas-page-header-video-active .breadcrumb-item.active,
.tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper .current {
  color: #ffffff !important;
}

.tj-page-header.egolas-page-header-video-active .tj-page-navs i,
.tj-page-header.egolas-page-header-video-active .breadcrumb i,
.tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper i {
  color: var(--tj-color-theme-primary, #3aaa35) !important;
}

/* Slightly stronger glass background so white breadcrumb text stays readable on bright video frames. */
.tj-page-header.egolas-page-header-video-active .tj-page-navs,
.tj-page-header.egolas-page-header-video-active .breadcrumb,
.tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper {
  background: rgba(7, 22, 24, 0.28) !important;
}

/* EGOLAS subpage header cutout v7
   Der Header soll auf Unterseiten denselben ausgeschnittenen H8-Look wie auf der Startseite behalten.
   Diese Regeln stellen die Theme-Deko-Flächen wieder her, statt sie auszublenden. */
body:not(.home) .header-area.h8-header.header-absolute,
body:not(.front-page) .header-area.h8-header.header-absolute {
  overflow: visible !important;
  box-shadow: none !important;
}

body:not(.home) .header-area.h8-header.header-absolute .header-wrapper,
body:not(.front-page) .header-area.h8-header.header-absolute .header-wrapper {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 7px !important;
}

@media (min-width: 1025px) {
  body:not(.home) .header-area.h8-header.header-absolute,
  body:not(.front-page) .header-area.h8-header.header-absolute {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding-bottom: 15px !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    inset-inline-start: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    max-width: 1382px !important;
    height: 100% !important;
    margin: 0 auto !important;
    background-color: var(--tj-color-grey-1, #ecf0f0) !important;
    border-radius: 12px !important;
    border-start-start-radius: 0 !important;
    border-start-end-radius: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::before,
  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::after,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::before,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::after {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    width: 13px !important;
    height: 13px !important;
    background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23ecf0f0"></path></svg>') !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::before,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::before {
    inset-inline-start: -13px !important;
    transform: rotate(90deg) !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::after,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::after {
    inset-inline-end: -13px !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute::before,
  body:not(.home) .header-area.h8-header.header-absolute::after,
  body:not(.front-page) .header-area.h8-header.header-absolute::before,
  body:not(.front-page) .header-area.h8-header.header-absolute::after {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  body:not(.home) .header-area.h8-header.header-absolute,
  body:not(.front-page) .header-area.h8-header.header-absolute {
    background-color: var(--tj-color-grey-1, #ecf0f0) !important;
    border-radius: 12px !important;
    border-start-start-radius: 0 !important;
    border-start-end-radius: 0 !important;
    overflow: visible !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape {
    display: none !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute::before,
  body:not(.home) .header-area.h8-header.header-absolute::after,
  body:not(.front-page) .header-area.h8-header.header-absolute::before,
  body:not(.front-page) .header-area.h8-header.header-absolute::after {
    content: "" !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    width: 13px !important;
    height: 13px !important;
    background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23ecf0f0"></path></svg>') !important;
    background-repeat: no-repeat !important;
    background-size: 13px 13px !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute::before,
  body:not(.front-page) .header-area.h8-header.header-absolute::before {
    inset-inline-start: -13px !important;
    transform: rotate(90deg) !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute::after,
  body:not(.front-page) .header-area.h8-header.header-absolute::after {
    inset-inline-end: -13px !important;
  }
}

/* EGOLAS subpage header corners v8
   Entfernt die kleinen äußeren grauen Eck-Haken auf Unterseiten,
   lässt aber die ausgeschnittene H8-Headerfläche wie auf der Startseite bestehen. */
@media (min-width: 1025px) {
  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape {
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::before,
  body:not(.home) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::after,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::before,
  body:not(.front-page) .header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
  }
}

@media (max-width: 1024px) {
  body:not(.home) .header-area.h8-header.header-absolute,
  body:not(.front-page) .header-area.h8-header.header-absolute {
    border-radius: 0 0 12px 12px !important;
    overflow: hidden !important;
  }

  body:not(.home) .header-area.h8-header.header-absolute::before,
  body:not(.home) .header-area.h8-header.header-absolute::after,
  body:not(.front-page) .header-area.h8-header.header-absolute::before,
  body:not(.front-page) .header-area.h8-header.header-absolute::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: none !important;
  }
}


/* =========================================================
   EGOLAS v11: GTranslate auf Startseite im Header anzeigen
   ========================================================= */
body.home #egolas-home-gtranslate-fallback,
body.front-page #egolas-home-gtranslate-fallback {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 2147483000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.home #egolas-home-gtranslate-fallback.egolas-gtranslate-source-empty,
body.front-page #egolas-home-gtranslate-fallback.egolas-gtranslate-source-empty {
  display: none !important;
}

body.home .egolas-gtranslate-header-slot,
body.front-page .egolas-gtranslate-header-slot {
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin-left: 14px !important;
  margin-right: 14px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  position: relative !important;
  z-index: 9999 !important;
}

body.home .egolas-gtranslate-header-slot .gtranslate_wrapper,
body.home .egolas-gtranslate-header-slot .gt_switcher_wrapper,
body.home .egolas-gtranslate-header-slot .gt_float_switcher,
body.front-page .egolas-gtranslate-header-slot .gtranslate_wrapper,
body.front-page .egolas-gtranslate-header-slot .gt_switcher_wrapper,
body.front-page .egolas-gtranslate-header-slot .gt_float_switcher {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 9999 !important;
}

body.home .egolas-gtranslate-header-slot select,
body.front-page .egolas-gtranslate-header-slot select {
  min-width: 96px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(12, 30, 33, 0.12) !important;
  background-color: #ffffff !important;
  color: #0c1e21 !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  line-height: 42px !important;
}

body.home .egolas-gtranslate-header-slot .gt_float_switcher,
body.front-page .egolas-gtranslate-header-slot .gt_float_switcher {
  border-radius: 999px !important;
  box-shadow: none !important;
  border: 1px solid rgba(12, 30, 33, 0.10) !important;
  background: #ffffff !important;
  overflow: visible !important;
}

body.home .egolas-gtranslate-header-slot .gt_float_switcher .gt-selected,
body.front-page .egolas-gtranslate-header-slot .gt_float_switcher .gt-selected,
body.home .egolas-gtranslate-header-slot .gt_float_switcher .gt-selected .gt-current-lang,
body.front-page .egolas-gtranslate-header-slot .gt_float_switcher .gt-selected .gt-current-lang {
  background: #ffffff !important;
  border-radius: 999px !important;
  color: #0c1e21 !important;
}

body.home .egolas-gtranslate-header-slot a,
body.front-page .egolas-gtranslate-header-slot a {
  color: #0c1e21 !important;
}

@media (max-width: 1199px) {
  body.home .egolas-gtranslate-header-slot,
  body.front-page .egolas-gtranslate-header-slot {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
}

@media (max-width: 991px) {
  body.home .egolas-gtranslate-header-slot,
  body.front-page .egolas-gtranslate-header-slot {
    display: none !important;
  }

  body.home #egolas-home-gtranslate-fallback,
  body.front-page #egolas-home-gtranslate-fallback {
    right: 14px !important;
    bottom: 84px !important;
    max-width: calc(100vw - 28px) !important;
  }
}

@media (max-width: 480px) {
  body.home #egolas-home-gtranslate-fallback,
  body.front-page #egolas-home-gtranslate-fallback {
    right: 10px !important;
    bottom: 76px !important;
    max-width: calc(100vw - 20px) !important;
  }
}


/* =========================================================
   EGOLAS v12: Startseiten-GTranslate in Menüfläche ausrichten
   Ziel: Search-Button und grüner CTA sitzen auf Startseite und Unterseiten gleich.
   ========================================================= */
@media (min-width: 992px) {
  body.home .header-area.h8-header.header-absolute .menu-area,
  body.front-page .header-area.h8-header.header-absolute .menu-area {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
  }

  body.home .header-area.h8-header.header-absolute .menu-area .egolas-gtranslate-header-slot,
  body.front-page .header-area.h8-header.header-absolute .menu-area .egolas-gtranslate-header-slot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 8px !important;
    min-width: auto !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 9999 !important;
  }

  body.home .header-area.h8-header.header-absolute .header-right-item,
  body.front-page .header-area.h8-header.header-absolute .header-right-item {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
  }

  body.home .header-area.h8-header.header-absolute .egolas-gtranslate-header-slot .gtranslate_wrapper,
  body.home .header-area.h8-header.header-absolute .egolas-gtranslate-header-slot .gt_switcher_wrapper,
  body.home .header-area.h8-header.header-absolute .egolas-gtranslate-header-slot .gt_float_switcher,
  body.front-page .header-area.h8-header.header-absolute .egolas-gtranslate-header-slot .gtranslate_wrapper,
  body.front-page .header-area.h8-header.header-absolute .egolas-gtranslate-header-slot .gt_switcher_wrapper,
  body.front-page .header-area.h8-header.header-absolute .egolas-gtranslate-header-slot .gt_float_switcher {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
  }
}

@media only screen and (min-width: 1201px) and (max-width: 1399px) {
  body.home .header-area.h8-header.header-absolute .menu-area .egolas-gtranslate-header-slot,
  body.front-page .header-area.h8-header.header-absolute .menu-area .egolas-gtranslate-header-slot {
    margin-left: 6px !important;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  body.home .header-area.h8-header.header-absolute .menu-area .egolas-gtranslate-header-slot,
  body.front-page .header-area.h8-header.header-absolute .menu-area .egolas-gtranslate-header-slot {
    margin-left: 4px !important;
  }
}

/* =========================================================
   EGOLAS v20: Mobile horizontal overflow fix
   Ziel: Auf Handy/Tablet darf die Seite nicht horizontal verschiebbar sein.
   Wichtig: Desktop-Layout bleibt unverändert.
   ========================================================= */
@media (max-width: 1024px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #page,
  .site,
  .site-content,
  .site-main,
  main,
  .wrapper,
  .page-wrapper,
  .body-wrapper,
  .tj-wrapper,
  .elementor,
  .elementor-section,
  .elementor-container,
  .elementor-widget-wrap,
  .container,
  .container-fluid,
  .row,
  .h8-hero,
  .h8-hero-inner,
  .h8-hero-item,
  .tj-page-header,
  .header-area,
  .header-wrapper {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .h8-hero,
  .tj-page-header.egolas-page-header-video-active,
  .elementor-section,
  .elementor-container {
    overflow-x: hidden !important;
  }

  img,
  video,
  iframe {
    max-width: 100% !important;
  }

  .egolas-home08-video {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Häufige Ursache bei diesem Theme: mobile Header-/Offcanvas-Elemente
     oder dekorative Headerflächen ragen wenige Pixel über den Viewport hinaus. */
  .header-area.h8-header.header-absolute,
  .header-area.h8-header.header-absolute .header-wrapper,
  .header-area.h8-header.header-absolute .site_logo,
  .header-area.h8-header.header-absolute .menu-bar,
  .header-area.h8-header.header-absolute .mobile-menu,
  .header-area.h8-header.header-absolute .mean-container,
  .header-area.h8-header.header-absolute .mean-bar,
  .header-area.h8-header.header-absolute .mean-nav,
  .mobile-menu-area,
  .mobile-menu-wrapper,
  .tj-offcanvas-area,
  .tj-offcanvas,
  .offcanvas-area,
  .offcanvas__area,
  .offcanvas__wrapper,
  .offcanvas-wrapper,
  .sidebar-menu,
  .sidebar__area {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .tj-offcanvas-area,
  .tj-offcanvas,
  .offcanvas-area,
  .offcanvas__area,
  .sidebar__area {
    overflow-x: hidden !important;
  }
}

@media (max-width: 575px) {
  .container,
  .container-fluid,
  .elementor-section,
  .elementor-container {
    max-width: 100% !important;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Das offene Hamburger-Menü darf nicht breiter als der sichtbare Bildschirm werden. */
  .tj-offcanvas-area,
  .tj-offcanvas,
  .offcanvas-area,
  .offcanvas__area,
  .sidebar__area {
    width: min(320px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* =========================================================
   EGOLAS v21: Horizontales Scrollen mobil hart deaktivieren
   Keine Design-Änderung, nur X-Overflow sperren.
   ========================================================= */
@media (max-width: 1024px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
    touch-action: pan-y !important;
  }

  @supports (overflow: clip) {
    html,
    body {
      overflow-x: clip !important;
    }
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  body > *,
  #page,
  .site,
  .site-content,
  .site-main,
  main,
  .wrapper,
  .page-wrapper,
  .body-wrapper,
  .tj-wrapper,
  .elementor,
  .elementor-location-header,
  .elementor-location-footer,
  .elementor-section-wrap,
  .elementor-section,
  .elementor-container,
  .elementor-column,
  .elementor-widget-wrap,
  .e-con,
  .e-con-inner,
  .container,
  .container-fluid,
  .row,
  .header-area,
  .header-wrapper,
  .h8-hero,
  .h8-hero-inner,
  .h8-hero-item,
  .tj-page-header {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  /* Elemente, die häufig unabsichtlich über 100vw hinausragen */
  .swiper,
  .swiper-wrapper,
  .slick-slider,
  .slick-list,
  .slick-track,
  .marquee,
  .tj-marquee,
  .tj-slider,
  .tj-slider-wrapper,
  .hero-wrapper,
  .section-wrapper,
  .section-inner,
  .wp-site-blocks {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  img,
  video,
  iframe,
  object,
  embed {
    max-width: 100% !important;
  }

  .egolas-home08-video,
  .h8-hero video,
  .tj-page-header video {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
  }

  /* Hamburger/Offcanvas darf sichtbar sein, aber nie die Seite horizontal verbreitern. */
  .tj-offcanvas-area,
  .tj-offcanvas,
  .offcanvas-area,
  .offcanvas__area,
  .offcanvas__wrapper,
  .offcanvas-wrapper,
  .mobile-menu-area,
  .mobile-menu-wrapper,
  .sidebar-menu,
  .sidebar__area,
  .mean-container,
  .mean-bar,
  .mean-nav {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 575px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  body > *,
  #page,
  .site,
  .body-wrapper,
  .page-wrapper,
  .tj-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   EGOLAS v22: Kreis-/Progress-Widgets nicht verzerren
   Hintergrund: Der harte Mobile-Overflow-Fix darf Canvas/SVG/Input-
   Elemente von Kreis-Progress-Widgets nicht auf Seitenbreite ziehen.
   ========================================================= */
@media (max-width: 1024px) {
  .progress-circle,
  .tj-progress-circle,
  .h4-progress-item .progress-circle,
  .elementor-widget .progress-circle,
  .elementor-widget-container .progress-circle,
  .tj-progress-wrapper .progress-circle,
  .tj-circle-progress,
  .circle-progress {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    box-sizing: content-box !important;
  }

  .progress-circle canvas,
  .tj-progress-circle canvas,
  .h4-progress-item .progress-circle canvas,
  .elementor-widget .progress-circle canvas,
  .elementor-widget-container .progress-circle canvas,
  .tj-circle-progress canvas,
  .circle-progress canvas,
  canvas.knob,
  canvas.dial {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  .progress-circle svg,
  .tj-progress-circle svg,
  .h4-progress-item .progress-circle svg,
  .elementor-widget .progress-circle svg,
  .elementor-widget-container .progress-circle svg,
  .tj-circle-progress svg,
  .circle-progress svg {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
  }

  .progress-circle input,
  .tj-progress-circle input,
  .h4-progress-item .progress-circle input,
  .elementor-widget .progress-circle input,
  .elementor-widget-container .progress-circle input,
  input.knob,
  input.dial {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
}

/* =========================================================
   EGOLAS v23: Back-to-top button wieder rund machen
   Ursache der ovalen Form: Der harte Mobile-Overflow-Fix aus v21/v22
   hat direkte body-Kinder auf width:100% gesetzt. Der Theme-Button
   #tj-back-to-top ist ein direktes body-Kind und wurde dadurch breit.
   Diese Regel korrigiert nur diesen Button und seine innere Anzeige.
   ========================================================= */
@media (max-width: 1024px) {
  body > #tj-back-to-top,
  #tj-back-to-top,
  #tj-back-to-top.active {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: 20px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 20px !important;
    bottom: 20px !important;
    overflow: visible !important;
    display: grid !important;
    place-items: center !important;
  }

  #tj-back-to-top .return,
  #tj-back-to-top-percentage {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  #tj-back-to-top-percentage {
    display: grid !important;
    place-items: center !important;
  }
}

/* Fallback für andere mögliche Back-to-top-Klassen, falls ein Plugin/Theme-Alias aktiv ist. */
@media (max-width: 575px) {
  body > .back-to-top,
  body > .scroll-to-top,
  body > .scroll-top,
  body > .scroll-up,
  body > .progress-wrap {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    left: auto !important;
    right: 20px !important;
    inset-inline-start: auto !important;
    inset-inline-end: 20px !important;
  }
}

/* EGOLAS v26: Unterseiten-Video auf iPhone bündig mit dem Menü starten lassen.
   Vorher begann der Page-Header ca. 30px über der weißen mobilen Navigation,
   dadurch war oberhalb des Menüs ein sichtbarer Video-Streifen zu sehen. */
@media only screen and (max-width: 767px) {
  body:not(.home):not(.front-page) .tj-page-header.egolas-page-header-video-active {
    margin-top: 30px !important;
  }
}

@media only screen and (max-width: 390px) {
  body:not(.home):not(.front-page) .tj-page-header.egolas-page-header-video-active {
    margin-top: 30px !important;
  }
}

/* =========================================================
   EGOLAS v28: GTranslate im mobilen Hamburger-Menü der Startseite
   Basis bleibt v26; es werden keine globalen Sprachfarben-Regeln aus v27 übernommen.
   ========================================================= */
body.home #egolas-home-gtranslate-fallback.egolas-gtranslate-source-empty,
body.front-page #egolas-home-gtranslate-fallback.egolas-gtranslate-source-empty {
  display: none !important;
}

@media (max-width: 991px) {
  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 0 0 22px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    position: relative !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
  }

  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gtranslate_wrapper,
  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher_wrapper,
  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher,
  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gtranslate_wrapper,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher_wrapper,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5 !important;
    max-width: 100% !important;
  }

  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot select,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot select {
    width: auto !important;
    min-width: 128px !important;
    max-width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background-color: #ffffff !important;
    color: #0c1e21 !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }

  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher,
  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher {
    border-radius: 10px !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher .gt-selected,
  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher .gt-selected .gt-current-lang,
  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher .gt_selected,
  body.home .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher .gt_selected a,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher .gt-selected,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher .gt-selected .gt-current-lang,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher .gt_selected,
  body.front-page .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher .gt_selected a {
    background: #ffffff !important;
    color: #0c1e21 !important;
  }
}

/* =========================================================
   EGOLAS v29: Unterseiten-Sprachoption im Hamburger-Menü wie Startseite
   Wichtig: nur innerhalb der mobilen Hamburger-Fläche, keine globalen GTranslate-Farbregeln.
   ========================================================= */
@media (max-width: 991px) {
  body .hamburger-area .egolas-gtranslate-mobile-menu-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 0 0 22px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    position: relative !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
  }

  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gtranslate_wrapper,
  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher_wrapper,
  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher,
  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5 !important;
    max-width: 100% !important;
  }

  body .hamburger-area .egolas-gtranslate-mobile-menu-slot select {
    width: auto !important;
    min-width: 128px !important;
    max-width: 100% !important;
    height: 46px !important;
    line-height: 46px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background-color: #ffffff !important;
    color: #0c1e21 !important;
    padding: 0 14px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }

  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher,
  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher {
    border-radius: 10px !important;
    box-shadow: none !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: #ffffff !important;
    overflow: visible !important;
  }

  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher .gt-selected,
  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_float_switcher .gt-selected .gt-current-lang,
  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher .gt_selected,
  body .hamburger-area .egolas-gtranslate-mobile-menu-slot .gt_switcher .gt_selected a {
    background: #ffffff !important;
    color: #0c1e21 !important;
  }
}

/* =========================================================
   EGOLAS v30: Unterseiten-Video oben wie Startseite unter den mobilen Header ziehen
   Ziel: Auf Unterseiten soll das Video bereits hinter/oberhalb des weißen Menüs beginnen,
   wie auf der Startseite. Der Titel bleibt unterhalb des Menüs lesbar.
   ========================================================= */
@media only screen and (max-width: 767px) {
  body:not(.home):not(.front-page) .tj-page-header.egolas-page-header-video-active {
    margin-top: -60px !important;
    padding-top: 210px !important;
    padding-bottom: 48px !important;
    min-height: 370px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: transparent !important;
  }

  body:not(.home):not(.front-page) .tj-page-header.egolas-page-header-video-active .egolas-home08-video {
    top: 0 !important;
    height: 100% !important;
    object-position: center top !important;
  }

  body:not(.home):not(.front-page) .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media only screen and (max-width: 390px) {
  body:not(.home):not(.front-page) .tj-page-header.egolas-page-header-video-active {
    margin-top: -60px !important;
    padding-top: 204px !important;
    min-height: 360px !important;
  }
}

/* =========================================================
   EGOLAS v31: Unterseiten-Header mobil optisch wie Startseite
   Ziel: Der weiße mobile Header ist wieder schmal/inset wie auf der Startseite,
   und das Video läuft sichtbar hinter/um den Menübereich weiter.
   ========================================================= */
@media only screen and (max-width: 767px) {
  body:not(.home):not(.front-page) .header-area.h8-header.header-absolute {
    top: 12px !important;
    inset-inline-start: 50% !important;
    inset-inline-end: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 78% !important;
    max-width: 78% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-bottom: 12px !important;
    border-radius: 0 0 12px 12px !important;
    background-color: var(--tj-color-grey-1, #ecf0f0) !important;
    overflow: visible !important;
  }

  body:not(.home):not(.front-page) .header-area.h8-header.header-absolute .header-wrapper {
    width: auto !important;
    max-width: inherit !important;
    margin: 0 !important;
    padding: 15px 12px !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  body:not(.home):not(.front-page) .tj-page-header.egolas-page-header-video-active {
    width: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    margin-top: -60px !important;
    border-radius: 12px !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  body:not(.home):not(.front-page) .header-area.h8-header.header-absolute {
    width: 86% !important;
    max-width: 86% !important;
  }
}

@media only screen and (max-width: 390px) {
  body:not(.home):not(.front-page) .tj-page-header.egolas-page-header-video-active {
    width: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    margin-top: -60px !important;
  }
}

/* =========================================================
   EGOLAS v32: Unterseiten-Mobile-Header optisch wie Startseite
   Der JS-Fallback setzt egolas-v32-header-shell/card auf die real vorhandenen
   Header-Wrapper, weil die Unterseiten je nach Template andere Klassen nutzen.
   ========================================================= */
@media only screen and (max-width: 767px) {
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-shell {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    inset-inline-start: 50% !important;
    inset-inline-end: auto !important;
    transform: translateX(-50%) !important;
    width: 78% !important;
    max-width: 78% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 12px 12px !important;
    background: var(--tj-color-grey-1, #ecf0f0) !important;
    background-color: var(--tj-color-grey-1, #ecf0f0) !important;
    border-radius: 0 0 12px 12px !important;
    overflow: visible !important;
    box-shadow: none !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 80px !important;
    margin: 0 !important;
    padding: 15px 12px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .site_logo,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .site-logo,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .logo {
    max-width: 62% !important;
    flex: 0 1 auto !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card img {
    max-width: 100% !important;
    height: auto !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    width: calc(100% - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    margin-top: -92px !important;
    padding-top: 206px !important;
    padding-bottom: 48px !important;
    min-height: 374px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-color: transparent !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .egolas-home08-video {
    top: 0 !important;
    height: 100% !important;
    object-position: center top !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-shell {
    width: 86% !important;
    max-width: 86% !important;
  }
}

@media only screen and (max-width: 390px) {
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-shell {
    width: 78% !important;
    max-width: 78% !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -92px !important;
    padding-top: 202px !important;
    min-height: 365px !important;
  }
}

/* =========================================================
   EGOLAS v33: Unterseiten-Hero mobil etwas höher/kompakter
   Ziel: Der Titel- und Breadcrumb-Bereich sitzt näher am mobilen Menü,
   damit der obere Video-Header noch mehr wie die Startseite wirkt.
   ========================================================= */
@media only screen and (max-width: 767px) {
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -98px !important;
    padding-top: 184px !important;
    padding-bottom: 40px !important;
    min-height: 348px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    margin-top: 0 !important;
    transform: translateY(-8px) !important;
  }
}

@media only screen and (max-width: 390px) {
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -98px !important;
    padding-top: 180px !important;
    min-height: 340px !important;
  }
}

/* =========================================================
   EGOLAS v34: Unterseiten-Mobile-Header Höhe an Startseite angleichen
   Ziel: Die weiße Menükarte auf Unterseiten hat mobil die gleiche kompakte Höhe
   wie auf der Startseite. Das Video beginnt weiterhin oben hinter dem Menü.
   ========================================================= */
@media only screen and (max-width: 767px) {
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-shell {
    top: 0 !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 0 12px 12px !important;
    border-radius: 0 0 12px 12px !important;
    overflow: visible !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 12px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .site_logo,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .site-logo,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .logo {
    display: flex !important;
    align-items: center !important;
    max-width: 62% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 38px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .menu_bar,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .menu-bar,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .mobile_menu_bar,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .hamburger-menu,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .hamburger-btn,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card .tj-menu-bar,
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card [class*="menu-bar"],
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card [class*="hamburger"] {
    flex: 0 0 auto !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    margin: 0 !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -104px !important;
    padding-top: 174px !important;
    padding-bottom: 34px !important;
    min-height: 318px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    margin-top: 0 !important;
    transform: translateY(-12px) !important;
  }
}

@media only screen and (max-width: 390px) {
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -104px !important;
    padding-top: 170px !important;
    min-height: 312px !important;
  }
}


/* =========================================================
   EGOLAS v35: Unterseiten-Headerhöhe nach Referenzbild feinjustieren
   Ziel: Der mobile Unterseiten-Header sitzt höher/kompakter im Video,
   damit der obere Bereich nicht mehr wie ein separater Block wirkt.
   ========================================================= */
@media only screen and (max-width: 767px) {
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-shell {
    top: -12px !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 0 12px 12px !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 12px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -116px !important;
    padding-top: 158px !important;
    padding-bottom: 28px !important;
    min-height: 292px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    margin-top: 0 !important;
    transform: translateY(-18px) !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-title,
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-title h1,
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active h1 {
    margin-bottom: 10px !important;
  }
}

@media only screen and (max-width: 390px) {
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-shell {
    top: -12px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -116px !important;
    padding-top: 154px !important;
    padding-bottom: 26px !important;
    min-height: 286px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: translateY(-18px) !important;
  }
}


/* =========================================================
   EGOLAS v36: Unterseiten-Header deutlich höher/kompakter
   Ziel nach Referenz: Titel/Breadcrumb viel näher unter die Menükarte ziehen
   und die mobile Page-Header-Höhe spürbar reduzieren.
   ========================================================= */
@media only screen and (max-width: 767px) {
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-shell {
    top: -14px !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    padding: 0 12px 12px !important;
    z-index: 99999 !important;
  }

  body.egolas-v32-mobile-subpage-header .egolas-v32-header-card {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -138px !important;
    padding-top: 132px !important;
    padding-bottom: 16px !important;
    min-height: 238px !important;
    max-height: 238px !important;
    height: 238px !important;
    margin-bottom: 36px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(-34px) !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-title,
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-title h1,
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active h1 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.04 !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-navs,
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .breadcrumb,
  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .breadcrumb-wrapper {
    margin-top: 0 !important;
  }
}

@media only screen and (max-width: 390px) {
  body.egolas-v32-mobile-subpage-header .egolas-v32-header-shell {
    top: -14px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active {
    margin-top: -138px !important;
    padding-top: 128px !important;
    padding-bottom: 14px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    height: 230px !important;
    margin-bottom: 34px !important;
  }

  body.egolas-v32-mobile-subpage-header .tj-page-header.egolas-page-header-video-active .tj-page-header-content {
    transform: translateY(-36px) !important;
  }
}