/* 
    Document   : layout
    Created on : 04.06.2015, 11:49:12
    Author     : Martin
    Description:
        Purpose of the stylesheet follows.
*/

root { 
    display: block;
}

.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}

/* columns of same height styles */

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-height {
  display: table-cell;
  float: none !important;
}

.container.absolute {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    /* wie Footer/Hinweis: Container-Gutter 12px + Spalten-Padding 22px */
    padding-left: 12px;
    padding-right: 12px;
}

/* Legacy BS3-Containerbreite (BS5 xl = 1140px) */
@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1170px;
    }
}

/* BS5 column padding (replaces BS3 col-xs/sm/md/lg lists) */
.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}
.row > [class*="col"] {
    padding-right: 22px;
    padding-left: 22px;
}

.row > [class*="col"].small-padding {
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
}

.row > [class*="col"].no-padding {
    padding: 0;
}

.row > [class*="col"].right-padding {
    padding-left: 0;
}

.row > [class*="col"].left-padding {
    padding-right: 0;
}

.row > [class*="col"].right {
    margin-left: auto;
}

#map-box {
    width: 100%;
    height: 750px;
}

@media (max-width: 1200px){
    #map-box {
        height: 500px;
    }
}

@media (min-width: 768px) {
    .col-md-height {
        display: table-cell;
        float: none !important;
    }
}

@media (max-width: 768px) {
    #map-box {
        height: 300px;
    }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
}


@media (min-width: 992px) {
  .col-lg-height {
    display: table-cell;
    float: none !important;
  }
}
@media (min-width: 1200px) {
  .col-xl-height {
    display: table-cell;
    float: none !important;
  }
}

@media (max-width: 1199px) {
    #slider {
        top: 0;
        padding-top: 0;
    }

    #slider .container.absolute {
        top: 0px;
    }
}

/*
 * CLS: #slider-bg ist position:absolute und trägt nicht zur Flusshöhe bei.
 * Ohne frühe min-height springt #slider erst nach imagesLoaded/setSliderHeight —
 * main rutscht nach unten (Lighthouse CLS ~0,56 auf body.start > main).
 * Werte spiegeln legacy/main.js setSliderHeight().
 */
@media (min-width: 1401px) {
    .start #slider,
    .home #slider {
        min-height: max(950px, 100vh);
        min-height: max(950px, 100dvh);
    }
}

@media (max-width: 1400px) {
    .start #slider,
    .home #slider {
        /* Bild ~80vw, Ratio 866×944, plus #slider padding-top 80px */
        min-height: calc(80vw * 944 / 866 + 80px);
    }
}

@media (max-width: 1199px) {
    .start #slider,
    .home #slider {
        min-height: calc(80vw * 944 / 866);
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    .start #slider,
    .home #slider {
        min-height: 0;
    }
}

/*
 * Wie Legacy: width/height auto — sonst verzerren HTML-width + max-height
 * (z. B. 866×350 auf Mobile). aspect-ratio nur als CLS-Reserve.
 */
#slider-images img {
    display: inline-block;
    max-width: 100%;
    height: auto !important;
    width: auto !important;
    aspect-ratio: 866 / 944;
}

#slider-images li {
    display: none;
}

#slider-images li.active,
#slider-images li:first-child {
    display: block;
}

/* Nur ein Slide sichtbar, wenn .active gesetzt ist */
#slider-images:has(li.active) li:first-child:not(.active) {
    display: none;
}

/* Bugfix Banner */

@media (max-width:1200px){

  #slider-images img {
    max-height: 800px;
  }
}

@media (max-width:991px){

  #slider-images img {
    max-height: 600px;
  }
}

@media (max-width:768px){

  #slider-images img {
    max-height: 350px;
  }

}

@media (max-width:500px){

  .start h1, 
  .home h1 
  {
    margin-top: 50px;
    margin-bottom: 50px !important;
  }

}

@media (max-width:768px) and (orientation: landscape){

  .start #slider-bg, .home #slider-bg {
    display: none !important;
  }

}

#sub-navigation {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #EEEEEE;
}

.home #sub-navigation {
  border-bottom-width: 0;
  margin-bottom: 0px;
  border-top: 1px solid #EEEEEE;
  padding-top: 30px;
}

#sub-navigation .container {
  
}

#sub-navigation .container .row {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

#sub-navigation .container .left,
#sub-navigation .container .right {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

#sub-navigation .container .left > a {
  display: inline-block;
  margin: 30px 0;
}

#sub-navigation .container .left a img,
#sub-navigation .container .left a .logo-img {
    width: 190px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 463 / 145;
}

/* Home-Teaser: feste Fläche (Preset 700×400) bevor das Bild lädt */
.teaser-media {
    aspect-ratio: 700 / 400;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.teaser-media > a {
    display: block;
    width: 100%;
    height: 100%;
}

.teaser-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
}


#sub-navigation .container .right {

}

#sub-navigation .container .right ul {

}

#sub-navigation .container .right ul li {

}

/* Extra Bootstrap-Abstände (Standard endet bei m-5 = 3rem / 48px) */
.mt-6 { margin-top: 2rem !important; }        /* 32px */
.mb-6 { margin-bottom: 2rem !important; }
.mt-7 { margin-top: 2.5rem !important; }      /* 40px */
.mb-7 { margin-bottom: 2.5rem !important; }
.mt-8 { margin-top: 3.75rem !important; }     /* 60px */
.mb-8 { margin-bottom: 3.75rem !important; }
.mt-10 { margin-top: 5rem !important; }       /* 80px */
.mb-10 { margin-bottom: 5rem !important; }
.mt-12 { margin-top: 6.25rem !important; }    /* 100px */
.mb-12 { margin-bottom: 6.25rem !important; }