/* ################################################# FARBEN
 
 grau #737373; 
 blau #74ACC8;
 rose #C89D9D;
 oliv #777569;
 hell #F8F8F8;
 */

/* ################################################# DESKTOP */

@media only screen and (max-width: 1500px) {
    .pfad .limit2 {
        padding: 0 40px;
    }
    .image_slider_text {
        padding: 40px;
    }

.image_slider .slideshow.v3zu1v .slick-prev,
.image_slider .slideshow.v3zu1v .slick-next {
  top:14vw;
}
.image_slider .slideshow.v3zu2v .slick-prev,
.image_slider .slideshow.v3zu2v .slick-next {
  top:30vw;
}
.image_slider .slideshow.v16zu9v .slick-prev,
.image_slider .slideshow.v16zu9v .slick-next {
  top:23vw;
}

}

/* ################################################# TABLET quer */

@media only screen and (max-width: 1200px) {
    .hero {
      margin-bottom: 40px;
    }
    .card-foto .text .inhalt {
        padding: 64px 64px;
        width: 100%;
    }
    .hero_text .limit2 {
      padding: 0 64px;
  }
  .pfad , .film, .film_selfhosted, .kacheln, .formular .limit, footer .limit, .image .limit2, .image_slider .limit2, .yumpu .limit2 {
    padding: 0 64px;
}
.abstand_oben_negativ {
  margin-top:-10px;
}
  .limit {
    /* max-width:680px; */
  }
  .text .limit {
      padding: 16px 20px;
  }
  header .limit {
    max-width:880px;
  }
  .text_image_icon .limit2.spalten .spalte:first-child {
    padding: 48px 32px 36px 64px;
  }
  .text_image_icon .limit2.spalten .spalte:last-child {
    padding: 48px 64px 36px 32px;
  }
  .formular .limit > h2 {
    text-align: center;
  }
.image_slider .slideshow.v3zu1v .slick-prev,
.image_slider .slideshow.v3zu1v .slick-next {
  top:12vw;
}
.image_slider .slideshow.v3zu2v .slick-prev,
.image_slider .slideshow.v3zu2v .slick-next {
  top:28vw;
}
.image_slider .slideshow.v16zu9v .slick-prev,
.image_slider .slideshow.v16zu9v .slick-next {
  top:21vw;
}
.maps_image .nolimit {
  padding: 0 64px;
}

footer .limit {
  max-width:760px;
  padding-bottom: 40px;
}
footer .limit div {
width: 40%;
}
}

/* ################################################# TABLET quer */

@media only screen and (max-width: 960px) {
    #menu_extra {
      height:46px;
    }
    #menu_extra ul {
      height: 46px;
      padding: 0px 16px;
      margin-top: 8px;
  }
    .text_image_icon .spalten {
        flex-direction: column;
    }

    .kontaktformular .spalten div:first-child {
        margin-right: 0px;
    }
    .kontaktformular .spalten div:last-child {
        margin-left: 0px;
    }
    .card-foto.foto-text {
        flex-direction: column;
    }
    .card-foto.text-foto {
        flex-direction: column;
    }
    .card-foto.foto-text .foto {
        width:100%;
        padding-right: 30%;
    }
    .card-foto.text-foto .foto {
        width:100%;
        padding-left: 30%;
    }

    .card-foto.foto-text .text {
        width:100%;
        padding-left: 20%;
        margin: 0;
    }
        .card-foto.text-foto .text {
        width:100%;
        padding-right: 20%;
        margin: 0;
    }    
    .card-foto.text-foto .text.oben-foto-hoeher,
    .card-foto.foto-text .text.oben-foto-hoeher {
        margin-top:-80px;
    }
    .card-foto .text .inhalt {
        padding: 32px 64px;
        width: 100%;
    }
    .maps .foto.mobil,
    .maps_image .foto.mobil {
        display: block;
    }
    .maps .foto.desktop,
    .maps_image .foto.desktop {
        display: none;
    }
    /* .hero_foto img.desktop,
    .hero_foto img.iphone {
        display: none;
    }
    .hero_foto img.ipad {
        display: block;
    } */
    .hero_text .limit2 p,
    .hero_text .limit2 h1, 
    .hero_text .limit2 .f1 {
        font-size: 40px;
        line-height: 48px;
    }
    .card-foto .text .inhalt .button {
      font-size: 16px;
    }
    .maps_image .nolimit {
      padding: 0;
    }
    .eingerueckt {
          hyphens: auto;
          hyphenate-limit-chars: auto 5;
          hyphenate-limit-lines: 2;
    }
}

/* ################################################# TABLET hoch */

@media only screen and (max-width: 720px) {
    *,
    .ansprechpartner a.link {
        font-size: 18px;
        line-height: 24px;
    }

    body {
        padding-top: 64px;
        padding-top: 0;
    }
    header {
        padding: 0;
        height: auto;
        max-height:inherit;
        box-shadow: 0 0 0;
        position: relative;
    }
    #menu_mobil_head {
    position: relative;
    }
    #menu_mobil_button {
      position: relative;
      top: auto;
      right:auto;
      left:calc(50% - 32px);
    }
    #menu_mobil {
    position: relative;
    top:auto;
    box-shadow: 0 0 0;
    margin-bottom:20px;
    }
    
    body.sticky header, 
    header.fixed {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        max-height: inherit;
        background-color: white;
        box-shadow: 0 0 0;
        padding: 0px;
        transition: all 0.5s;
    }
    
    h1,
    .f1 {
        font-size: 40px;
        line-height: 48px;
        margin-bottom: 8px;
    }
    h2,
    .f2 {
        font-size: 31px;
        line-height: 40px;
        margin-bottom: 0px;
    }
    h3,
    .f3 {
        font-size: 25px;
        line-height: 32px;
        margin-bottom: 32px;
    }
    h4,
    .f4 {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 28px;
        font-weight: 700;
    }
    h5,
    .f5 {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 28px;
    }
    h6,
    .f6 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 24px;
    }
    .text .limit {
        padding: 16px 20px;
    }
    .text.ansprechpartner {
        padding-left:20px;
        padding-right:20px;
    }
    .spalten {
      flex-direction: column;
  }
  
    .abstand_oben_unten {
          padding: 32px 0 32px 0;
        }
    .ansprechpartner {
      padding:0 20px;
      margin-top: 40px;
    }
    .ansprechpartner a.link {
      /* margin-left:5vw; */
    }
    .eingerueckt {
      padding-left: 80px;
      /* padding-right: 60px; */
          hyphens: auto;
          hyphenate-limit-chars: auto 5;
          hyphenate-limit-lines: 2;
    }
    
    #menu_desktop,
    #menu_extra {
        display: none;
        height: 0;
    }
    #menu_mobil_button,
    #menu_mobil_head,
    #menu_mobil {
        display: block;
    }
    footer .limit {
      flex-direction: column;
      padding-bottom: 40px;
    }
    footer .limit div {
      text-align: center !important;
      width:100%;
    }
    footer .limit .footerlogo {
        align-self: center;
        width: 160px;
        margin-bottom: 0px;
    }
}

/* ################################################# SMARTPHONE */

@media only screen and (max-width: 640px) {
    *,
    .ansprechpartner a.link {
        font-size: 16px;
        line-height: 23px;
    }
    .eingerueckt {
      padding-left: 40px;
    }
    h1,
    .f1 {
        font-size: 25px;
        line-height: 32px;
        margin-bottom: 32px;
    }
    h2,
    .f2 {
        font-size: 31px;
        line-height: 40px;
        margin-bottom: 0px;
    }
    h3,
    .f3 {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 28px;
        /* font-weight: 700; */
    }
    h4,
    .f4 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 24px;
    }
    h5,
    .f5 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 24px;
    }
    h6,
    .f6 {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 24px;
    }
    .abstand_oben_unten {
          padding: 16px 0 16px 0;
        }

    /* .hero_foto img.desktop,
    .hero_foto img.ipad {
        display: none;
    }
    .hero_foto img.iphone {
        display: block;
    } */
    .hero_text .limit2 p {
        font-weight: 600;
        font-size: 25px;
        line-height: 32px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: white;
    }
    .hero_text .limit2 h1, 
    .hero_text .limit2 .f1  {
        font-size: 25px;
        line-height: 32px;
    }
    .foto_kachel_link .foto img.desktop {
          display: none;
        }
    .foto_kachel_link .foto img.iphone {
          display: block;
        }
    .image_slider_slide img.desktop {
        display: none;
    }
    .image_slider_slide img.iphone {
        display: block;
    }
.image_slider .slideshow .slick-prev,
.image_slider .slideshow .slick-next  {
        width: 24px;
        height: 40px;
    }
    .image_slider .slideshow.v3zu1v .slick-prev,
    .image_slider .slideshow.v3zu1v .slick-next,
    .image_slider .slideshow.v3zu2v .slick-prev,
    .image_slider .slideshow.v3zu2v .slick-next,
    .image_slider .slideshow.v16zu9v .slick-prev,
    .image_slider .slideshow.v16zu9v .slick-next {
      top:28vw;
    }
    .card-foto.foto-text {
        flex-direction: column;
    }
    .card-foto.text-foto {
        flex-direction: column;
    }
    .card-foto.foto-text .foto {
        padding-right: 0;
    }
    .card-foto.text-foto .foto {
        padding-left: 0;
    }

    .card-foto.foto-text .text {
        padding-left: 0;
        margin: 0;
    }
        .card-foto.text-foto .text {
        padding-right: 0;
        margin: 0;
    }    
    .card-foto.text-foto .text.oben-foto-hoeher,
    .card-foto.foto-text .text.oben-foto-hoeher {
        margin-top:0;
    }
    .card-foto .text .inhalt {
        padding: 32px;
        width: 100%;
    }
    .maps .limit {
        padding: 32px;
    }
    .text_image_icon .limit,
    .text_image_icon .limit2 .spalte {
        padding: 32px 32px 0 32px;
    }
    .pfad , .film, .film_selfhosted, .kacheln, .formular .limit, .hero_text .limit2 {
        padding: 0 32px;
    }
    .text_image_icon .limit2.spalten .spalte:first-child {
      padding: 16px 32px 16px 32px;
    }
    .text_image_icon .limit2.spalten .spalte:last-child {
      padding: 16px 32px 16px 32px;
    }
    .text .limit {
      padding: 16px 20px;
      padding: 32px;
  }
    .image .limit2, .image_slider .limit2, .yumpu .limit2 {
      padding: 0;
    }
    .abstand_oben_negativ {
      margin-top:0;
    }
    .pfad ul.rex-breadcrumb li:first-child {
        display: none;
    }
    .maps_image .nolimit {
      padding: 0 32px;
    }
    #container_kacheln {
    padding: 0 60px;
    gap: 20px;
    }
    .kachel {
        max-width: 100%;
    }
   
}
