@charset "UTF-8";

/* 

  Diese CSS-Datei definiert das mobile Styling der Seite

*/

/* -----  Min. 1600  --------------------------------------------------- */

@media all and ( min-width: 1600px ) {
  .hide1500 { display: none; }
  .show1500 { display: block; }
}

/* -----  Min. 2000  --------------------------------------------------- */

@media all and ( min-width: 2000px ) {
  .hide2000 { display: none; }
  .show2000 { display: block; }

  article#service #service-box.col_l_4 { min-height: 18vw; }

}

/* -----  Max. 1500  --------------------------------------------------- */

@media all and (max-width: 1500px) {
  .hide1500 { display: none; }
  .show1500 { display: block; }

}

/* -----  Max. 1200  --------------------------------------------------- */

@media all and (max-width: 1200px) {
  .hide1500 { display: none; }
  .show1500 { display: block; }

  hr { margin: 4vw 0; }

  article#start section .h1 { font-size: 6vw; }
}

/* -----  Max. 1024  --------------------------------------------------- */

@media all and (max-width: 1024px) {
  .hide1024 { display: none; }
  .show1024 { display: block; }

  .content h1 { font-size: calc(var(--hvw-size) * 0.63); }

  .anibg { left: -30%; right: 40%; }

  article#service section { background-size: 65% auto; }
  article section.content h1 .square { top: 0.3rem; width: 1.5rem; height: 3.5vw; }
  article#news section { padding-bottom: 4vw; }
  article#news .col_l_sp_4.content { margin-bottom: 4vw; }
  article#single-services .col_l_8 { margin-top: 0; padding-top: 6vw; }
  article#single-services-head section > div.padbot7vw { padding-bottom: 4vw; }
  #sidebox .pad3vw, #sidebox .pad4vw { padding: 6vw; }
}

@media all and (orientation: landscape) and (max-width: 1024px) {
}
  
@media all and (orientation: portrait) and (max-width: 1024px) {
}
  
/* -----  Max. 768  ---------------------------------------------------- */
  
@media all and ( max-width: 768px ) {
  .hide768 { display: none; }
  .show768 { display: block; }

  :root {
    --hvw-size: 4.5vw;
    --hrem-size: 2.2rem;
    --h-lineheight: 1em;
    --h-marbot: 1em;
  }

  .content h1 { font-size: var(--hrem-size); }
  .content h2 { font-size: calc(var(--hrem-size) * 0.9); }
  .content .h3 { font-size: calc(var(--hrem-size) * 0.72); }
  .content .h5 { font-size: calc(var(--hrem-size) * 0.65); }
  .content .h6 { font-size: calc(var(--hrem-size) * 0.52); }

  h1.wp-block-heading { font-size: calc(var(--hrem-size) * 0.65); }
  h2.wp-block-heading { font-size: calc(var(--hrem-size) * 0.65); }
  h3.wp-block-heading { font-size: calc(var(--hrem-size) * 0.57); }
  h4.wp-block-heading { font-size: calc(var(--hrem-size) * 0.48); }
  h5.wp-block-heading { font-size: calc(var(--hrem-size) * 0.48); }
  h6.wp-block-heading { font-size: calc(var(--hrem-size) * 0.48); }

  hr { margin: 30px 0; }
  .anibg { left: -20%; right: 25%; }

  article#start section { height: 50vh; }
  article#start section .h1 { font-size: 8vw; }
  article#start section .h4 { font-size: 1.65rem; }

  article#service section { background-size: 75% auto; }
  article#service .col_l_4.pad4vw { padding: 3vw; font-size: 1rem; line-height: 1.4rem; }
  article section.content h1 .square { top: 0.3rem; width: 1.1rem; height: 1.9rem; }
  article section.content h2 .square, article section.content .h2 .square { width: 1.1rem; height: 1.8rem; }

  article#misc #slide_content .slide { min-height: 200px; width: 100%; -webkit-transition: min-height 0.3s ease; -ms-transition: min-height 0.3s ease; -moz-transition: min-height 0.3s ease; -o-transition: min-height 0.3s ease; transition: min-height 0.3s ease; }
  article#misc #slide_content.active .slide.active { width: 100%; min-height: 300px; }
  article#misc #slide_content.active .slide.inactive { width: 100%; min-height: 200px; }

  article#misc .slide:hover { cursor: pointer; }
  article#misc .slide .slide_overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: .85; }
  article#misc .slide:hover .slide_overlay { left: 0; opacity: .65; -webkit-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
  article#misc .slide.active .slide_overlay { left: calc(100% - 15px); -webkit-transition: left .2s linear; -ms-transition: left .2s linear; transition: left .2s linear; }

  article#misc .slide .title h1 { font-size: 2rem; }
  article#misc #slide_content i.icon-arrow-right { font-size: 1.8rem; }
  article#misc #slide_content.active .slide.inactive .title h1 { font-size: 2rem; }
  article#misc #slide_content.active i.icon-arrow-right { font-size: 1.8rem; }

  article#single-news-head section .pad6vw { padding: 4vw 6vw; }
  article#single-news .col_l_6.padtop9vw { margin-top: 0; padding-top: 6vw; }
  article#single-news .overlay, article#single-services .overlay, article#page .overlay, article#news .overlay { height: 20vw; }
  article#single-services .col_l_8 { padding: 30px 15px; }

}
  
@media all and (orientation: landscape) and (max-width: 768px) {
}
  
@media all and (orientation: portrait) and (max-width: 768px) {
}
  
/* -----  Max. 600  ---------------------------------------------------- */
  
@media all and (max-width: 550px) {
  .hide550 { display: none; }
  .show550 { display: block; }

  .content .h2 { font-size: calc(var(--hrem-size) * 0.82); }
  .content h2 { font-size: calc(var(--hrem-size) * 0.8); }

  h1.wp-block-heading { font-size: calc(var(--hrem-size) * 0.65); }
  h2.wp-block-heading { font-size: calc(var(--hrem-size) * 0.65); }
  h3.wp-block-heading { font-size: calc(var(--hrem-size) * 0.57); }
  h4.wp-block-heading { font-size: calc(var(--hrem-size) * 0.48); }
  h5.wp-block-heading { font-size: calc(var(--hrem-size) * 0.48); }
  h6.wp-block-heading { font-size: calc(var(--hrem-size) * 0.48); }

  article#welcome section h1 { font-size: 1.7rem; }

  .anibg { left: -20%; right: 10%; }

  .content.text figure.alignleft, .content.text figure.alignright { width: 100%; margin-left: 0; margin-right: 0; }
  .content.text figure.alignleft.size-full.is-resized, .content.text figure.alignright.size-full.is-resized { margin-left: 0; }

  article, footer { padding-left: 15px; }
  section, section.pad6vw { padding: 30px 15px; }

  header section { padding: 15px; }
  header section img.logo { height: 90px; max-height: 90px; min-height: 90px; }

  article section .pad6vw { padding: 30px 15px; }
  article#page-head section .pad6vw,
  article#single-news-head section .pad6vw { padding: 30px 15px 30px 30px; }
  article section .padtop6vw, article section .padtop8vw { padding-top: 85px; }
  article section .padbot2vw{ padding-bottom: 25px; }
  article section.content h1 .square { top: 0.3rem; left: -30px; width: 15px; height: 1.5rem; }
  article section.content h2 .square, article section.content .h2 .square { left: -30px; width: 15px; height: 1.5rem; }

  article#start section, .owl-item div { height: 300px; }
  article#start section .text { height: 150px; left: 30px; }
  article#start section .bg-green { height: 150px; width: 15px; }
  article#start section .h1 { font-size: 10vw; }
  article#start section .h4 { font-size: 1.35rem; }

  article#service section { background-size: auto 35%; }
  article#service .col_l_4.pad4vw { padding: 15px; font-size: 1rem; line-height: 1.4rem; }
  article#service .col_l_4.pad4vw h2 { margin-bottom: 0; width: 100%; }
  article#service #service-box.col_l_4 a.btn_themen { right: 15px; bottom: 15px; font-size: 1.5rem; }

  article#misc #slide_content .slide { min-height: 180px; width: 100%; -webkit-transition: min-height 0.3s ease; -ms-transition: min-height 0.3s ease; -moz-transition: min-height 0.3s ease; -o-transition: min-height 0.3s ease; transition: min-height 0.3s ease; }
  article#misc #slide_content.active .slide.active { width: 100%; min-height: 350px; }
  article#misc #slide_content.active .slide.inactive { width: 100%; min-height: 180px; }

  article#misc .slide .title h1 { position: absolute; top: 20px; bottom: 20px; left: 20px; right: 20px; font-size: 1.5rem; }
  article#misc #slide_content i.icon-arrow-right { bottom: 25px; right: 20px; font-size: 1.2rem; }
  article#misc #slide_content.active .slide.inactive .title h1 { font-size: 1.5rem; }
  article#misc #slide_content.active i.icon-arrow-right { font-size: 1.2rem; }

  article#misc .slide .slide_content h4 { font-size: 1rem; line-height: 1.35em; }

  article#news section { padding-bottom: 0; }
  article#news .col_l_sp_4.content { margin-bottom: 30px; }
  article#news .col_l_sp_4 .pad150rem { padding: 15px; }
  article#news .bottom { padding-bottom: 27px !important; }
  article#news .bottom a.btn { bottom: 15px; left: 15px; }
  article#news.bg-green .col_l_sp_4 .pad150rem { padding: 15px 5px; }
  article#news.bg-green .bottom a.btn { left: 5px; }

  article#single-news .overlay, article#single-services .overlay, article#page .overlay, article#news .overlay { width: 15px; height: 30vw; }
  article#single-news .col_l_6.padtop9vw, #sidebox .pad3vw, #sidebox .pad4vw { padding: 30px 15px; }


}

@media all and (orientation: landscape) and (max-width: 550px) {
}

@media all and (orientation: portrait) and (max-width: 550px) {
}

/* -----  Max. 400  ---------------------------------------------------- */
  
@media all and (max-width: 450px) {
  .hide450 { display: none; }
  .show450 { display: block; }
}