@charset "UTF-8";

/* 

  Diese CSS-Datei definiert das mobile Styling der Seite

*/

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

@media all and ( min-width: 1600px ) {
  .hide1600 { display: none; visibility: hidden; }
  .show1600 { display: block; visibility: visible; }

  #zertifikate .row .col_l_zert .zert_image { height: 150px; }
  #zertifikate .row .col_l_zert .zert_image div img,
  #zertifikate .row .col_l_zert .zert_image a img { max-height: 150px; }
}

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

@media all and ( min-width: 2000px ) {

  #welcome #owl h1.overlay { left: 1.5vw; font-size: 2.9vw; letter-spacing: -0.1rem; line-height: 0.65em; }
  #welcome #owl a i { font-size: 1.75vw; right: 15px; bottom: 15px; }

  #referenzen #owl h1.overlay { left: 1vw; bottom: 1vw; font-size: 1.7vw; letter-spacing: -0.1rem; }
  #referenzen #owl a i { right: 15px; bottom: 15px; font-size: 2vw; }

  .hide2000 { display: none; visibility: hidden; }
  .show2000 { display: block; visibility: visible; }
}

/* -----  Max. 1400  --------------------------------------------------- */

@media all and (max-width: 1440px) {
  .hide1440 { display: none; visibility: hidden; }
  .show1440 { display: block; visibility: visible; }

  section { padding: 8vw 6vw; }
  #blog.start .col_l_sp_3:nth-child(5) { display: none; }
  #zertifikate .row .col_l_zert { width: calc(100% / 4); }
  #zertifikate .caption { font-size: 1rem; line-height: 1.35rem; text-align: center; }

}

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

@media all and (max-width: 1200px) {
  .hide1200 { display: none; visibility: hidden; }
  .show1200 { display: block; visibility: visible; }
}

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

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

  header#single .slogan h1 { font-size: 4vw; }
  header#single .slogan h4 { font-size: 1.4rem; margin-bottom: 1.3rem; }

  #parallax.bg_para { height: 60vh; background-attachment: scroll; }

  #referenzen #owl h1.overlay { left: 4vw; bottom: 4vw; font-size: 7vw; letter-spacing: -0.1rem; }
  #referenzen #owl a i { font-size: 6.3vw; right: 3vw; bottom: 3vw; }

  #zertifikate .row .col_l_zert .zert_image { height: 120px; }
  #zertifikate .row .col_l_zert .zert_image div img,
  #zertifikate .row .col_l_zert .zert_image a img { max-height: 120px; }

}

@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; visibility: hidden; }
  .show768 { display: block; visibility: visible; }

  h1 { font-size: 5vw; }
  h2 { font-size: 3vw; }
  h3 { font-size: 2.3vw; }
  h4 { font-size: 1.85rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.15rem; }

  .content h1 { font-size: 2.2rem; }
  .content h2 { font-size: 2.0rem; }
  .content h3 { font-size: 1.6rem; }
  .content h4 { font-size: 1.4rem; }
  .content h5 { font-size: 1.3rem; }
  .content h6 { font-size: 1.1rem; }

  hr { margin: 30px 0; }
  .round { border-radius: 10px; }
  .roundtop { border-radius: 10px 10px 0 0; }
  #toggle-view .toggle-row .panel { padding: 4vw; }

  header#start,
  header#single.service { height: calc(100% - 76px); margin: 0 20px 20px; border-radius: 15px; }
  header#start .slogan, header#start .slogan.visible { left: 20px; right: 20px; bottom: 40px; font-size: 8.25vw; line-height: 1.1em; }
  header#page { margin: 0 20px 20px; border-radius: 15px; padding: 20px; }
  header#page a img.logos { max-width: 200px; min-width: 130px; }
  header#single.service img.icon { width: 20vw; margin-bottom: 2vw; }
  header#single a img.logos { top: 20px; right: 20px; max-width: 200px; min-width: 130px; }
  header#single .slogan h1 { font-size: 5vw; }

  .icon-scroll { display: none; }

  #start #video-mobile { display: block; width: 100%; height: calc(100vh - 50px); position: absolute; top: 0; left: 0; border-radius: 15px; }
  #start #video { display: none; }

  section { padding: 40px; }

  #services .col_l_sp_6.pad2vw.mar25_0 { padding: 20px; margin: 15px 0; }
  #parallax section { max-width: 66%; }
  #parallax h2 { padding: 20px 20px 20px 40px; font-size: 4.2vw; }

  #referenzen #owl { padding: 0 40px; }
  #referenzen #owl .owl-nav  { left: 40px; width: calc(100% - 80px); }
  #referenzen #owl h1.overlay { left: 30px; bottom: 30px; font-size: 6.5vw; letter-spacing: 0; }
  #referenzen #owl a i { right: 25px; bottom: 25px; margin-right: 0; }
  #referenzen .pad2vw { padding: 4vw 4vw 3vw; }
  #referenzen .bottom.round { margin: 10px 0; }
  #referenzen .bottom a.btn { bottom: 4vw; left: 4vw; }
  
  #zertifikate .row .col_l_zert { width: calc(100% / 3); }

  #page #toggle-view .toggle-row .head { font-size: 1.1rem; }

  #contact .col_l_sp_3 { margin-bottom: 6vw; }

}
  
@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; visibility: hidden; }
  .show550 { display: block; visibility: visible; }

  h1 { font-size: 6vw; }
  h2 { font-size: 3.5vw; }
  h3 { font-size: 2.8vw; }
  h4 { font-size: 1.85rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.15rem; }

  .content h1 { font-size: 2rem; }
  .content h2 { font-size: 1.7rem; }
  .content h3 { font-size: 1.4rem; }
  .content h4 { font-size: 1.3rem; }
  .content h5 { font-size: 1.2rem; }
  .content h6 { font-size: 1.1rem; }

  .content h1.padbot3vw.font-red { font-size: 1.75rem; }

  h1.herotitlestart { margin-bottom: 10px; }

  .text { font-size: 1rem; line-height: 1.4em; }
  #toggle-view .toggle-row .panel { padding: 20px; }

  .content.text figure.alignleft.size-full,
  .content.text figure.alignright.size-full { width: 100%; margin: 0 0 1.4em 0; }
  .content.text figure.alignleft.size-full.is-resized,
  .content.text figure.alignright.size-full.is-resized { width: auto; margin: 0 0 1.4em 0; }
  
  header#start a img.logos {  top: 20px; right: 20px; min-width: calc(50vw - 40px); }
  header#start .slogan, header#start .slogan.visible { bottom: 30px; font-size: 12vw; }
  header#single .mar0_100rem { padding-top: 40px; }
  header#single a img.logos { top: 20px; right: 20px; max-width: 150px; min-width: 150px; }
  header#single.service img.icon { width: 40%; max-width: 170px; margin-bottom: 20px; }
  header#single .slogan { left: 20px; right: 20px; bottom: 30px; width: calc(100% - 40px); }
  header#single .slogan h1 { font-size: 2rem; }

  section { padding: 40px 20px !important; }

  #stroke.pad6_0vw { padding: 0 0; }

  #services .col_l_2 { text-align: center; }
  #services .col_l_2 img { max-width: 40%; margin-bottom: 15px; }
  #services .col_l_9 hr.large { margin: 20px 0; }

  #parallax section { max-width: 75%; margin: 0 !important; padding: 0 !important; }
  #parallax h2 { padding: 15px 15px 15px 20px; font-size: 6vw; }

  #referenzen #owl { padding: 0; }
  #referenzen #owl .owl-nav  { left: 0; width: 100%; }
  #referenzen #owl h1.overlay { left: 20px; bottom: 20px; }
  #referenzen #owl a i { right: 15px; bottom: 15px; }
  #referenzen section.padtop0 { padding-top: 40px !important; }
  #referenzen .pad2vw { padding: 4vw; }
  #referenzen section.padtop0 { padding-top: 0 !important; }

  #zertifikate .row .col_l_zert { width: calc(100% / 2); }
  #zertifikate .caption { font-size: .9rem; line-height: 1.35rem; text-align: center; }

  #contact .col_l_sp_3 { margin-bottom: 30px; }

  #page #toggle-view .toggle-row .head { font-size: 1.1rem; line-height: 1.35em; margin: 0; padding: 14px 35px 14px 20px; }
  #page .zertifikat.is-layout-flex { display: block; }
  #page .zertifikat.is-layout-flex .wp-block-column:first-child,
  #page .zertifikat.is-layout-flex .wp-block-column:last-child { flex-basis: 100% !important; }
  #page .zertifikat.is-layout-flex .wp-block-column:first-child img { width: 50%; }
  #page section.padbot0 { padding-bottom: 40px !important; }

  footer { padding: 20px; }
  footer ul { margin: 0 0 10px !important; }
  footer ul li { margin-right: 10px; }
  footer ul li:last-child { margin-right: 0; }

}

@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: 400px) {
  .hide450 { display: none; visibility: hidden; }
  .show450 { display: block; visibility: visible; }

.content h1.padbot3vw.font-red { font-size: 1.6rem; }

}