@charset "UTF-8";

/* 

  Diese CSS-Datei definiert das mobile Styling der Seite

*/

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

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

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

  h2 { font-size: 5rem; }
  #single #team .col_xl_4 .img_team { padding: 0 1rem 0 0; }
}

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

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

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

  #themen .col_themen { width: calc(4/12*100% - (1 - 4/12)*20px); }
  #themen a .overlay h4,
  #themen a .overlay h6 { font-size: 1.8rem; }
  #themen a:hover .overlay_text { left: 4vw; right: 4vw; }
  #themen .col_themen a .overlay_text { font-size: 1.3rem; left: 4vw; right: 4vw; }
}

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

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

  header .logo { padding: 0 7.2vw 0 6vw; }
  header .skew_overlay { position: absolute; left: -22px; top: 0; bottom: 0; width: 30px; height: 86px; }
}

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

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

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

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

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

  .text.col2, .text .col2 { column-count: 1; column-gap:0; }

  h2 { font-size: 4.2vw; }
  h6 { font-size: 1.15rem; }

  hr { margin: 4vw 0; }

  header .logo { padding-left: 6vw; }

  #slider .wp-block-file__button, .wp-block-button__link { font-size: 1.15rem !important; }

  #themen .col_themen { width: calc(6/12*100% - (1 - 6/12)*20px); }

  #blog .col_s_sp_6 { margin-top: 25px; margin-bottom: 25px }
  #blog { padding: 8vw 6vw calc(8vw - 25px); background: #1d3342 url('../images/bg_news_tablet.jpg') center center no-repeat; background-size: cover; background-attachment: scroll; }

  #wahlkampf { background: #1d3342 url('../images/bg_wahlkampf_tablet.jpg') center center no-repeat; background-size: cover; background-attachment: scroll; }

  #abbinder .col_s_12 { margin-bottom: 50px }

  #page .col_l_4.bg-sand-image,
  #single .col_l_4.bg-sand-hell,
  #single .col_l_4.bg-sand-image { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox;	display: flex; justify-content: space-between; flex-flow: row wrap; }
  #page .col_l_4 .marbot3vw, #single .col_l_4 .marbot3vw { margin-bottom: 0; }

  #event .col_s_sp_3 { width: calc(3/12*100% - (1 - 3/12)*20px); }

  footer #member hr { margin: 3vw 0; width: 50px; }

}

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

  .hide, .hidestart { opacity: 1; margin-left: 0; margin-right: 0; }
  .bottom a.btn { position: absolute; bottom: 25px; left: 25px; }

  h1 { font-size: 3.5rem; }
  h2 { font-size: 4.7vw; }
  h3 { font-size: 2.2rem; }

  #team h5 { font-size: 1.4rem; }

  .text.content h1 { font-size: 2.4rem; }

  hr { margin: 30px 0; }

  #slider .wp-block-file__button, #slider .wp-block-button__link { font-size: 1.25rem !important; margin-top: 0rem !important; }

  #slider h6 p { display: none; }
  #slider .wp-block-file__button, .wp-block-button__link { font-size: 1.35rem !important; }

  #themen .col_l_sp_4 img.img_normal { display: none; }
  #themen .col_l_sp_4 img.img_mobile { display: block; }
  #themen a .overlay h4 { font-size: 1.9rem; }
  #themen a .overlay > div.center { margin: 0 20px; }
  #themen a .overlay h6 { font-size: 1.6rem; }
  #themen a:hover .overlay_text { top: 70%; left: 4vw; right: 4vw; opacity: 1; }
  #themen .col_themen a .overlay_text { font-size: 1.1rem; }
  #themen a .overlay_arrow,
  #themen .col_themen a .overlay_arrow { right: 25px; bottom: 25px; }

  #blog .col_xs_12 { margin-top: 15px; margin-bottom: 15px }
  #blog .pad2vw { padding: 25px; }
  #blog .padtop1vw { padding-top: 10px; }
  #blog .padbot1vw { padding-bottom: 10px; }
  #blog { padding: 8vw 6vw calc(8vw - 15px); background: #1d3342 url('../images/bg_news_mobile.jpg') center center no-repeat; background-size: cover; background-attachment: scroll; }

  #team { padding: 8vw 6vw; }

  #abbinder .col_xs_12 { margin-top: 20px; margin-bottom: 20px }
  #abbinder .pad2vw { padding: 25px; }

  #mitglied h2 { font-size: 6.5vw; margin-bottom: .75em; }
  #event .border-left { width: calc(1/2*100% - (1 - 1/2)*3rem); margin: 1rem 0; }
  #unterbezirke table.marbot4vw { margin-bottom: 6vw; }

  #event .col_xs_sp_6 { width: calc(6/12*100% - (1 - 6/12)*20px); }
}
  
@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: 600px) {
  .wp-block-media-text .wp-block-media-text__content { padding: 1.55rem 0 0 0; }
}

@media all and (max-width: 550px) {
  .hide550 { display: none !important; }
  .show550 { display: block !important; }
  
  h1 { font-size: 2.3rem; }
  h1.marbot4vw { margin-bottom: 1em; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.7rem; }
  h4 { font-size: 1.5rem; }
  #team h5.skewx { font-size: 1.2rem; margin-left: 0px; }
  h5.padbot2vw { padding-bottom: .75em; }

  .text.content h1 { font-size: 2.1rem; }
  .text.content h2 { font-size: 1.9rem; }
  .text.content h3 { font-size: 1.6rem; }
  .text.content h4 { font-size: 1.3rem; }
  .text.content h5 { font-size: 1.2rem; }
  .text.content h6 { font-size: 1rem; }

  .owl-dots { left: 25px; bottom: 20px; }
  .owl-nav { bottom: 20px; right: 25px; }

  .text { line-height: 1.3em; }

  #toggle-view div.boxklappmenu > span { position: absolute; right:6vw; top: calc(6vw + 7px); color: #1d3342; font-size: 1.15rem; }
  #toggle-view div.boxklappmenu.pad6vw { padding: 6vw !important; }

  #top { bottom: 3vw; }
  #top.visible { right: 3vw; }
  #top a.mitmachen { padding: 12px 10px; font-size: 12px; }

  form input[type=text] { padding: 9px 12px; }
  form input[type=submit], form select { padding: 10px; }

  #slider .wp-block-file__button, #slider .wp-block-button__link { font-size: 1.15rem !important; margin-top: .2rem !important; }

  #slider h2.marbot100rem { font-size: 1.9rem; margin: 12px 0; }
  #slider .wp-block-file__button, .wp-block-button__link {
    font-size: 1rem !important;
    line-height: 1rem !important; 
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }

  header .logo { padding: 15px 0; text-align: center; display: block; }
  header .logo img { width: 200px; height: auto; margin-right: 15px; }
  
  #themen .col_themen { width: 100%; }
  #themen img.img_normal { display: none; }
  #themen img.img_mobile { display: block; }
  #themen h3 { margin-bottom: .5em; }
  #themen a:hover .overlay_text { top: 60%; left: 4vw; right: 4vw; opacity: 1; }
  #themen a .overlay h6 { font-size: 1.9em; }
  #themen .col_themen a .overlay_text { font-size: 1.3rem; }
  #themen a:hover .overlay h6 { margin-bottom: 20%; }

  #themen div { text-align: left; }
  #themen a .overlay,
  #themen a:hover .overlay { background: none; }
  #themen a .overlay h4,
  #themen a .overlay h6 { font-size: 1.75rem; margin-left: 6vw; }
  #themen .overlay_arrow { display: none;  }
  #themen a .overlay_text,
  #themen .col_themen a .overlay_text { 
    position: relative;
    left: inherit;
    top: inherit;
    right: inherit;
    margin: 0 6vw 0 12vw; 
    opacity: 1; 
    font-size: 1.1rem; 
    background: rgba(0,136,147,.8);
    display: inline-block;
    -moz-transform:skewX(-10deg); /* Firefox 3.6 Firefox 4 */
    -webkit-transform:skewX(-10deg); /* Safari */
    -o-transform:skewX(-10deg); /* Opera */
    -ms-transform:skewX(-10deg); /* IE9 */
    transform:skewX(-10deg); /* W3C */
  }
  #themen a .overlay_text p {
    padding: 5px 10px;
    -moz-transform:skewX(10deg); /* Firefox 3.6 Firefox 4 */
    -webkit-transform:skewX(10deg); /* Safari */
    -o-transform:skewX(10deg); /* Opera */
    -ms-transform:skewX(10deg); /* IE9 */
    transform:skewX(10deg); /* W3C */
  }
  #themen a:hover .overlay h4,
  #themen a:hover .overlay h6 { margin-bottom: 0; }
  #themen a:hover .overlay_text { top: unset; left: unset; right: unset; }

  #blog h3 { margin-bottom: 1em; }

  #mitglied h2 { font-size: 10vw; margin-bottom: .75em; }

  #team .col_l_12.marbot3vw { margin-bottom: 6vw; }
  #filter form.row { margin-top: 15px; }
   #team_start { padding: 8vw 6vw; }

  #single .col_l_4.bg-sand-hell { display: block; }
  #page .col_l_4 .marbot3vw, #single .col_l_4 .marbot3vw { margin-bottom: 6vw; }

  #unterbezirke h4 { padding: .2rem 1rem; font-size: 1.5rem; }
  #unterbezirke a.skewx { margin: 0 7px 0 0; padding: .2rem .4rem; }
  #unterbezirke a i { font-size: 17px; }
  #unterbezirke .marbot3vw { margin-bottom: 6vw; }
  #unterbezirke table.marbot4vw { margin-bottom: 40px; }


  footer .padbot4vw { padding-bottom: 8vw; }
  footer .padtop4vw { padding-top: 8vw; }
  footer #footer { border-right: 6vw solid #1d3342; background: #1d3342 url('../images/signet.png') center right no-repeat; background-size: 40px 40px; }
  footer ul.footer { margin-bottom: 15px; }
  footer .col_xxs_12.right { text-align: left; }
  
}

@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; }

  .text.content h1 { font-size: 1.9rem; }
  .text.content h2 { font-size: 1.75rem; }

  #themen a .overlay h4,
  #themen a .overlay h6 { font-size: 1.5rem; }
  #themen a .overlay_text,
  #themen .col_themen a .overlay_text { font-size: .95rem; }

  #unterbezirke a.skewx { margin: 0 5px 0 0; }
  #unterbezirke a i { font-size: 16px; }
  #unterbezirke .textsmall { font-size: .9rem; }
}