/* =========================================================
   KOCH – LEISTUNGEN HERO
   TYPO3 / BOOTSTRAP PACKAGE / NO FRAME
   ========================================================= */

.koch-hero-slider{
  --koch-blue:#005987;
  --koch-dark:#30343a;

  position:relative;
  left:50%;

  width:100vw;
  max-width:none!important;

  height:390px;
  min-height:390px;

  margin-left:-50vw!important;
  margin-right:0!important;
  padding:0!important;

  overflow:hidden;
  isolation:isolate;

  background:#eef4f7;
  font-family:Arial,Helvetica,sans-serif;
  box-sizing:border-box;
}

.koch-hero-slider *,
.koch-hero-slider *::before,
.koch-hero-slider *::after{
  box-sizing:border-box;
}

/* =========================================================
   BILDBEREICH
   ========================================================= */

.koch-hero-slider__image{
  position:absolute;
  inset:0;
  z-index:1;

  width:100%;
  height:100%;

  margin:0;
  padding:0;

  overflow:hidden;
}

/* Gemeinsame Grundeinstellungen für beide Bilder */

.koch-hero-slider .koch-hero-slider__image img{
  position:absolute;
  display:block;

  margin:0;
  padding:0;

  max-width:none!important;
}

/* =========================================================
   HINTERGRUND – UNSCHARF
   ========================================================= */

.koch-hero-slider .koch-hero-slider__image
.koch-hero-slider__background{
  inset:-20px;

  width:calc(100% + 40px);
  height:calc(100% + 40px);

  object-fit:cover;
  object-position:58% 55%;

  filter:blur(14px);
  opacity:.75;

  z-index:1;
}

/* =========================================================
   VORDERGRUND – SCHARF UND VOLLSTÄNDIG
   ========================================================= */

.koch-hero-slider .koch-hero-slider__image
.koch-hero-slider__foreground{
  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center center;

  filter:none;
  opacity:1;

  z-index:2;
}

/* =========================================================
   INHALT
   ========================================================= */

.koch-hero-slider__content{
  position:relative;
  z-index:3;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;

  width:100%;
  max-width:1320px;

  height:100%;
  min-height:0;

  margin:0 auto;
  padding:40px 60px;
}

/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.koch-hero-slider__headline{
  margin:0;
  padding:0;

  color:var(--koch-dark);

  font-family:Arial,Helvetica,sans-serif;
  text-transform:uppercase;

  line-height:1.12;
  letter-spacing:.08em;
}

/* =========================================================
   UNSERE + LEISTUNGEN
   ========================================================= */

.koch-hero-slider__line{
  display:table;
  width:auto;

  margin:0;
  padding:7px 14px 6px;

  background:rgba(255,255,255,.9);

  color:var(--koch-dark);

  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(28px,2.55vw,46px);
  font-weight:800;
  line-height:1.12;

  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

.koch-hero-slider__line + .koch-hero-slider__line{
  margin-top:8px;
}

/* =========================================================
   EINFACH VIELFÄLTIG!
   ========================================================= */

.koch-hero-slider__subline{
  display:table;
  width:auto;

  margin-top:10px;
  padding:7px 14px 6px;

  background:var(--koch-blue);
  color:#fff;

  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(24px,2.2vw,39px);
  font-weight:800;
  line-height:1.12;

  box-shadow:0 5px 10px rgba(0,0,0,.20);

  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* =========================================================
   TYPO3 / BOOTSTRAP PACKAGE
   ECHTE BROWSERBREITE
   ========================================================= */

.frame .koch-hero-slider{
  position:relative;
  left:50%;

  width:100vw;
  max-width:none!important;

  margin-left:-50vw!important;
  margin-right:0!important;
}

/* =========================================================
   GROSSE MONITORE
   ========================================================= */

@media(min-width:1600px){

  .koch-hero-slider{
    height:410px;
    min-height:410px;
  }

}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1199.98px){

  .koch-hero-slider{
    height:340px;
    min-height:340px;
  }

  .koch-hero-slider__content{
    padding:38px 45px;
  }

  .koch-hero-slider .koch-hero-slider__image
  .koch-hero-slider__background{
    object-position:60% 53%;
  }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767.98px){

  .koch-hero-slider{
    height:300px;
    min-height:300px;
  }

  .koch-hero-slider__content{
    padding:40px 24px;
  }

  .koch-hero-slider .koch-hero-slider__image
  .koch-hero-slider__background{
    object-position:67% 52%;
  }

  .koch-hero-slider__headline{
    letter-spacing:.045em;
  }

  .koch-hero-slider__line{
    padding:6px 10px 5px;
    font-size:27px;
  }

  .koch-hero-slider__line + .koch-hero-slider__line{
    margin-top:6px;
  }

  .koch-hero-slider__subline{
    margin-top:8px;
    padding:7px 10px 6px;
    font-size:22px;
  }

}