@charset "UTF-8";

/* 

  Diese CSS-Datei definiert das mobile Styling der Seite

*/

/* -----  Min. 1400  --------------------------------------------------- */

@media all and ( min-width: 1400px ) {
  .hide1600 { display: none !important; }
  .show1600 { display: block !important; }
}

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

@media all and ( min-width: 2000px ) {
  .hide2000 { display: none !important; }
  .show2000 { display: block !important; }
  #blog a.bottom { width: calc(3/12*100% - (1 - 3/12)*40px); }
  #team h5 { font-size: 1.2vw; }
}

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

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

  #team .text .box-team .overlay-team { font-size: 1rem; line-height: 1.3em; }
  .text ul.kooperationen li { width: calc(6/12*100% - (1 - 6/12)*30px); }
  #single img.nachhaltig, #veranstaltung img.nachhaltig { bottom: -30px; left: 6vw; width: 60px; }
}

/* -----  Max. 1300  --------------------------------------------------- */

@media all and (max-width: 1300px) {
  .hide1300 { display: none !important; }
  .show1300 { display: block !important; }
}

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

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

  .logo_zz { padding: 10px 20px; }
  #team h5 { font-size: 2.5vw; }

  .wp-block-aab-group-accordion h4.aagb__accordion_title { font-size: 1.75vw;  }
  header a.stoerer { max-width: 50vw; font-size: 1.15rem; }
}

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

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

  header .suche { position: absolute; top: 15px; right: 0; width: 50%; }

  h2 { font-size: 2.1rem; }
  h3 { font-size: 1.9rem; }
  h5 { font-size: 1.35rem; }
  hr { margin: 3vw 0 3vw; }

  #claim.pad6vw { padding: 8vw 6vw 6vw; }
  #claim .col_l_6 { width: 65%; }
  #claim h2 { font-size: 2.5rem; }

  #team .pad150rem { padding: 1rem; }
  #team .mar150_0rem { margin: 12px 0; }
  #team .col_m_sp_6 { width: calc(6/12*100% - (1 - 6/12)*25px); }
  #team hr.small { margin: 1rem 0; }
  
  #owl-blog .col_l_4, #owl-blog .col_l_8 { width: 100%; }
  #owl-blog .col_l_8 { padding: 1.5rem 0 0 0; }
  
  #support.padtop4vw { padding-top: 5vw; }
  #support.padbot3vw { padding-bottom: 5vw; }

  #angebote_start .col_s_12 .pad4vw { padding: 6vw; }

  #themen .col_l_4 { border-bottom: 1px solid #ffffff; }
  #themen .col_l_4:nth-child(5), #themen .col_l_4:nth-child(6) { border-bottom: none; }
  #themen .col_l_4:nth-child(3n) { border-right: 1px solid #ffffff; }
  #themen .col_l_4:nth-child(2n) { border-right: none; }
  #themen h3 { font-size: 3vw; }

  ul#toggle-view .panel .border-right { border-right: 0; }

  #wildcard .col_l_4 .pad4vw { padding: calc(4vw + 15px) 4vw; }
  #wildcard .col_l_4 .pad1vw { padding: 20px; }

  #blog a.bottom { width: calc(6/12*100% - (1 - 6/12)*20px); margin-bottom: 20px; }

  .wp-block-aab-group-accordion h4.aagb__accordion_title { font-size: 1.2rem; }

  #sidebar .col_l_4 img { padding-right: 0; padding-bottom: 15px; }

  header a.stoerer { font-size: 1rem; }
}

@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 !important; }
  .show768 { display: block !important; }

  hr { margin: 30px 0; }

  header .padtop2vw { padding-top: 25px; }
  header .padbot3vw { padding-bottom: 25px; }

  .logo img, #page .logo img { min-width:230px; }
  .logo_zz { padding: 8px 20px 8px 15px; }
  .logo_zz img { width: 90px; height: auto; }

  #claim h2 { font-size: 2.2rem; }

  #support img { max-height: 130px; }

  #blog .padbot75em { padding-bottom: 1.2em; }
  #blog.padtop4vw { padding-top: 6vw; }
  #blog.padbot3vw { padding-bottom: 6vw; }

  #sidebar, #team #sidebar { border: 0; }
  #sidebar.pad4vw { padding: 6vw; }
  #sidebar.padtop6vw { padding-top: 0; }
  #weiterbildung #sidebar.padtop6vw { padding-top: 6vw; }
  #team #sidebar.padtop6vw { padding-top: 6vw; }
  #team .box-team .overlay-team { position: relative; height: auto; padding: 15px; }
  #team .box-team .overlay-team { opacity: 1; bottom: 0; height: 100%; color: #ffffff !important; cursor: context-menu; }
  #team .box-team .overlay-team .author { opacity: 1; margin-top: 1rem; }
  #team h5 { font-size: 25px; }
  #sidebar .marbot3vw { margin-bottom: 6vw; }
  #sidebar ul li { padding-bottom: 15px; margin-bottom: 15px; }
  #sidebar ul li .col_xs_10 { font-size: 1.35rem; }

  #page .overlay-start { right: 0; }

  #angebote .col_l_12.padbot3vw { padding-bottom: 40px; }

  #themen h6 { font-size: 18px; }
  
  footer .col_xs_12 { text-align: left; padding: 5px 0; }
  footer .padtop2vw { padding-top: 20px; }
  footer .padbot2vw { padding-bottom: 20px; }

  #sidebar .col_l_4 img { padding-right: 20px; }

  #single img.nachhaltig { top: -10vw; left: 6vw; width: 10vw; }
  #veranstaltung img.nachhaltig { bottom: 0; left: 6vw; width: 10vw; }

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

  header .suche { width: 65%; }

  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.45rem; }

  .logo img, #page .logo img { min-width:200px; }
  .logo_zz { padding: 8px 6vw 8px 10px; }
  .logo_zz img { width: 80px; }

  .text { font-size: 1.05rem; line-height: 1.4em; }
  .text .regular, .text.regular { font-size: 1rem; line-height: 1.3rem; }
  .text ul.kooperationen li { width: 100%; }

  #claim .col_l_6 { width: 100%; }
  #claim h2 { font-size: 1.85rem; }

  #angebot .marbot50 { margin-bottom: 30px; }
  #angebot > div > i { position: absolute; top: -35px; left: 50%; margin: 0 0 0 -35px; width: 70px; height: 70px; font-size: 36px; padding: 10px; }
  #angebot .pad3vw { padding: 20px; }
  .bottom { position: relative; padding-bottom: 85px !important; }
  .bottom a.btn { position: absolute; bottom: 20px; left: 20px; }

  #blog .col_xxs_12 { width: 100%; }
  #blog .padbot75em { padding-bottom: 0; }
  #blog.padtop4vw { padding-top: 30px; }
  #blog.padbot3vw { padding-bottom: 30px; }
  #blog .owl-dots { padding-top: 20px; }
  #blog a.bottom { width: 100%; margin-bottom: 20px; }
  #team h5 { font-size: 25px; }
  #team .col_xxs_12 { width: 100%; }
  #termine_start .marbot200rem { margin-bottom: 1.5rem; }
  #angebote_start .col_s_12 .pad4vw { padding: 40px 6vw; }

  #support .row.right { justify-content: space-between; flex-flow: row wrap; }
  #support img { max-height: 110px; }

  #themen .col_l_4 { border-right: none; border-bottom: 1px solid #ffffff; padding: 20px; }
  #themen .quadrat { position: relative; width: auto; height: auto; padding: 0 40px 0 0; }
  #themen h3 { font-size: 23px; }
  #themen h6 { font-size: 18px; }
  #themen hr.small { margin: 1rem 0; }
  #themen .col_l_4:nth-child(5), #themen .col_l_4:nth-child(6) { border-bottom: none; }
  #themen .col_l_4:nth-child(2n),  #themen .col_l_4:nth-child(3n) { border-right: none; }
  #themen .col_l_4:last-child { border-bottom: none; }

  .wp-block-aab-group-accordion h4.aagb__accordion_title { font-size: 1.1rem; }
  .wp-block-column .wp-block-media-text__content { padding: 1rem 0 0 0; }

  #sidebar #sidebar-contact { margin-top: 20px; padding-bottom: 25px; }
  #sidebar #sidebar-contact .martop2vw { margin-top: 25px; }
  #sidebar .col_l_4 img { padding-right: 0; padding-bottom: 15px; }

  #single img.nachhaltig { top: -60px; left: 6vw; width: 60px; }
  #veranstaltung img.nachhaltig { bottom: 0; left: 6vw; width: 60px; }

}

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

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

/* -----  Max. 400  ---------------------------------------------------- */
  
@media all and (max-width: 450px) {
  .hide450 { display: none !important; }
  .show450 { display: block !important; }
  #team h5 { font-size: 20px; }
  .logo img, #page .logo img { min-width:180px; }
}