@charset "UTF-8";

/* 

  Diese CSS-Datei definiert das mobile Styling der Seite

*/


/* -----  Max. 1200  --------------------------------------------------- */
  
@media all and (max-width: 1200px) {
}

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

@media all and (max-width: 1024px) {
  .hidetablet { display: none }
}

@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 ) {
.hidetablet { display: none; }
section { padding: 80px 30px; }
#headerbild section { padding: 100px 30px 30px; }
#headerbild h2 { font-size: 3.8rem; }
h4 p { font-size: 1.1rem; line-height: 1.4em; }
#start h2 { padding: 20px; font-size: 2.5rem; }
#start .overlay { bottom: 28%; left: 60px; right: 60px; }
section#slider { padding: 80px 30px 40px; }
#slider .text { text-align: center; }
.text p { margin-bottom: 1em; line-height: 1.6rem; }
#angebot { padding: 80px 30px 50px; }
#angebot .flexbox2_6 { width: calc(3/6*100% - (1 - 3/6)*30px); }
.flexbox2_6 { width: 100%; margin-bottom: 40px; }
.flexbox2_6#infos { width: 100%; margin-bottom: 40px; }
.flexbox3_6 { width: 100%; margin-bottom: 40px; }
.flexbox4_6 { width: 100%; margin-bottom: 40px; }
.contentbox .flexbox2_6 { margin-bottom: 0px; }
.contentbox .flexbox3_6 { margin-bottom: 0px; }
.contentbox .flexbox4_6 { margin-bottom: 0px; }
#infos h3.bg-gold { padding: 5px 30px; }
#infos h3.bg-gold { padding: 5px 30px; }
#infos .flexbox2_6 { width: calc(2/6*100% - (1 - 2/6)*30px); }
.contentbox { padding: 30px; }
.bottom a.btn { position: relative; bottom: 30px; left: 30px; }
.bottom_nopad a.btn { position: relative; bottom: 0px; left: 0px; }
table.kursplan tbody tr td { padding: 10px; }
table.kursplan tbody tr td p { font-size: .85rem; line-height: 1.3em; }
#abbinder section { padding: 50px 30px 10px; }
.sidebar { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox;	display: flex; justify-content: space-between; flex-flow: row wrap; }
.sidebar .image { width: calc(1/2*100% - (1 - 1/2)*30px); }
footer .contentbox { padding: 30px; }
}
  
@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: 600px) {
  .hidephone { display: none; }
  h1 { font-size: 1.3rem; line-height: 1.3em; margin-bottom: 0.5em; }
  h2 { font-size: 3rem; margin-bottom: 0.3em; }
  #slider h2 { margin-bottom: 1.1rem; }
  h4 p { font-size: 1rem; line-height: 1.4em; }
  h3 { margin-bottom: 0.5em; }
  h3 p { font-size: 2.4rem; line-height: 1.05em; }
  a.btn { display: block; text-align: center; }
  .bottom a.btn { width: calc(100% - 30px); }
  .shadow { box-shadow: none; }
  #start .overlay { bottom: 26%; }
  #start .meldung { padding: 15px; font-size: 1rem; }
  header { padding: 56px 0 10px; }
  header img.logo { max-width: 120px; }
  #headerbild section { padding: 40px 15px; }
  #headerbild h2 { font-size: 3.3rem; }
  .text, .text p { font-size: .95rem; line-height: 1.4rem; }
  .fade, .hide { opacity: 1; margin-left: 0px; margin-right: 0px; }
  section { padding: 40px 15px; }
  section#angebot { padding: 40px 15px 25px; }
  section#slider { padding: 40px 15px 0px; }
  #abbinder section { padding: 40px 15px 0px; }
  #angebot .flexbox2_6.bg-leightviolet { margin-bottom: 15px; }
  #angebot .flexbox2_6.bg-leightgreen { margin-bottom: 15px; }
  #angebot .flexbox2_6 { width: calc(3/6*100% - (1 - 3/6)*15px); }
  #angebot .flexbox2_6.kontakt { width: 100%; }
  #angebot .flexbox2_6#infos { width: 100% !important; }
  .angebotsbox { padding: 15px; }
  .contentbox { padding: 15px; }
  .contentbox .flexbox2_6 { width: 100%; }
  .contentbox .flexbox3_6 { width: 100%; }
  .contentbox img { margin-bottom: 1rem; }
  .contentbox .flexbox4_6 { width: 100%; }
  #infos .flexbox2_6 { width: 100%; }
  #infos.flexbox3_6 { margin-bottom: 15px; }
  #infos h3.bg-gold { font-size: 2rem; line-height: 1.05em; padding: 10px 15px; }
  #infos h3.bg-gold { font-size: 2rem; line-height: 1.05em; padding: 10px 15px; }
  .flexbox4_6#infos { margin-bottom: 15px; }
  .flexbox2_6#infos { margin-bottom: 15px; }
  .bottom a.btn { bottom: 15px; left: 15px; }
  table tbody tr td { padding: 8px 0; }
  table tbody tr td p { font-size: .8rem; line-height: 1.3em; }
  table.kursplan.desktop { display: none; }
  table.kursplan.mobile { display: table; }
  table.kursplan tbody tr td { padding: 8px 0 8px 8px; border-right: 1px solid #e3e3e3; }
  table.kursplan tbody tr td p { font-size: 1rem; line-height: 1.3em; }
  .sidebar .image { width: 100%; }
  footer .contentbox { padding: 15px; }
  footer ul { margin-bottom: 0.5rem; }
  footer ul li { padding-right: 7px; margin-right: 7px; }
  footer ul li a { font-size: 0.8rem; line-height: 1em; }
  footer .right { text-align: left; font-size: 0.85rem; }
}

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

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

/* -----  Max. 400  ---------------------------------------------------- */
  
@media all and (max-width: 400px) {
  #start h2 { padding: 15px; font-size: 2rem; }
  #start .overlay { bottom: 22%; left: 30px; right: 30px; }
  #angebot .flexbox2_6 { width: 100%; }
  table.kursplan tbody tr td p { font-size: .83rem; line-height: 1.3em; }
}