@charset "UTF-8";

/* 

  Diese CSS-Datei definiert das mobile Styling der Seite

*/
/* -----------------------------  ab 1800  -------------------------------- */

@media screen and (min-width: 1800px) {

  img.logo50 { top: 50%; left: 50%; margin-left: -190px; margin-top: -360px; width: 380px; height: 380px; }

  .boxstart.bg-dunkelblau-light,
  .boxstart.bg-rot-light,
  .boxstart.bg-gelbgruen-light {
      padding: 130px 0;
  }
  
  .boxstart h2 {
      font-size: 70px;
  }
  
  .boxstart {
      font-size: 26px;
  }
  
  }
  
  /* -----------------------------  bis 1024  -------------------------------- */
  
  @media screen and (max-width: 1024px) {

  .hide1024 { display: none; }
  img.logo50 { top: 150px; left: 50%; margin-left: -10vw; width: 20vw; height: 20vw; }
  .video-container { display: none; }
  .video-mobile { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent url('../movies/Snapshots/ksb_mood.jpg') center center no-repeat; background-size: cover; }
  .stoerer, .stoerer50 { top: 130px; }
  .stoerer a h3 { font-size: 20px; margin: 0; padding: 10px 30px 10px 20px; }

  }
  
  /* -----------------------------  bis 959  -------------------------------- */
  
  @media screen and (max-width: 1000px) {
  
.header { padding: 0 30px; }
.logo { width: 210px; }
.boxstart h2 { font-size: 30px; }
  
  .boxstart { font-size: 18px; }
  .pagecontenthead { padding: 0 30px; }
  .dreispaltig {
      -moz-columns: 2;
      -webkit-columns: 2;
      columns: 2;
      -moz-column-gap: 50px;
      -webkit-column-gap: 50px;
      column-gap: 50px;
  }
  
  }
  
  /* -----------------------------  bis 800  -------------------------------- */
  
  @media screen and (max-width: 920px) {
  

  .header { padding: 20px 30px; }
  img.logo50 { top: 50%; left: 50%; margin-left: -130px; margin-top: -200px; width: 260px; height: 260px; }
  .hidepad,
  #spende { display: none; }
    .boxstart { width: 50% }
    .boxstart.bg-rot-light { left: 50%; }
    .content, .slider, .footer { padding: 30px; }
    .pagecontent .content { padding: 170px 30px 80px; }
    #news.pagecontent .col_l_sp_4 { margin-bottom: 30px; }
    
  }
  
  /* -----------------------------  bis 550  -------------------------------- */
  
  @media screen and (max-width: 550px) {
  
  .hidephone,
  .stoerer a h3 { font-size: 15px; margin: 0; padding: 8px 20px 8px 15px; }
  img.logo50 { top: 200px; left: 50%; margin-left: -80px; margin-top: 0; width: 160px; height: 160px; }
  .bg-dunkelblau-light,
  .bg-rot-light,
  .bg-gelbgruen-light {
      display:none;
  }
  
  .welcomemobile {
      display: inline-block;
      position: absolute;
      left: 0;
      bottom: 40px;
      font-size: 1.5em;
      line-height: 1.3em;
      padding: 10px 15px 10px 20px;
      background: rgba(174,204,83,0.75);
  }
  
  h1 { font-size: 33px; font-weight: 600; line-height: 1.2em; margin-bottom: 0.75em; }
  h2 { font-size: 24px; font-weight: 300; padding-bottom: 1em; line-height: 1.2em; }
  
  .zweispaltig {
      -moz-columns: 1;
      -webkit-columns: 1;
      columns: 1;
      -moz-column-gap: 0px;
      -webkit-column-gap: 0px;
      column-gap: 0px;
  }
  
  .dreispaltig {
      -moz-columns: 1;
      -webkit-columns: 1;
      columns: 1;
      -moz-column-gap: 0px;
      -webkit-column-gap: 0px;
      column-gap: 0px;
  }

  .content .alignleft img,
  .content img.alignleft,
  .content .alignright img,
  .content img.alignright,
  .pagecontent img.alignleft, 
  .pagecontent .alignleft img
  .pagecontent img.alignright, 
  .pagecontent .alignright img { margin: 0 0 1em; width: 100%; float: none; }
  
  .header { padding: 15px 20px; }
  .pagecontenthead { padding: 0 20px; }
  .pagecontenthead h3 { font-size: 14px; }
  .content, .slider, .footer { padding: 30px 20px; }
  .pagecontent .content { padding: 150px 20px 50px; }
  #ueberuns .content .col_l_sp_6 img,
  .kinder.content .col_l_sp_8 img,
  .eltern.content .col_l_sp_8 img { display: none; }
  .stoerer, .stoerer50 { top: 120px; }
  .stoerer50 { min-width: 150px; }
  .pagespenden .content { padding: 10px; font-size: 19px; line-height: 1.3em; }
  .box50.main { width: 100%; }  
  .copyright { padding: 0; }
  #kontakt { width: 100%; }
  .contentSlider, .boxcontent { margin: 0; padding: 10px; }
  .gallery-item { width: 50%; }  
  .bg-dunkelgruen { display: block; }
  .menu-hauptnavigation-container { float: none; }
  .footer .copycontent { padding-top:10px; }
  
  
  }