/* All rights reserved and belonging to GBZ Emmaus */
/* Code written by daijobu (http://www.daijobu.de) */

:root { font-size: 1.5em; }
* {
  box-sizing: border-box;
  margin: 0;
  font-family: 'OpenSans-Light', sans-serif; }
.filter {
  background-color: rgba(0,0,0,0.4);
  height: 100%;
  transition: ease background-color 0.75s; }
h1 {
  font-size: 1.5em;
  font-weight: normal;
  margin-bottom: 2%; }
a, label {
  outline: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.35s; }
a:hover, label:hover { opacity: 0.5; }
a:active, label:active {
  opacity: 0.2;
  transition: opacity 0s; }
strong { font-weight: bold; }
em { font-style: italic; }
address { font-style: normal; }

body {
  background: #262c34 url('../img/gruppenbild.jpg') no-repeat fixed 50% 50%;
  background-size: cover;
  color: #fff;
  height: 100%; }

.container {
  margin: 0 5% 5%;
  display: block; }
.flexibel {
  display: flex;
  flex-direction: row; }
.flexibel > * { flex: 1; }
.flexibel > :first-child { margin-right: 5%; }
.text { color: #111; }
.text .wrapper { padding: 10%; }
.nounderline { text-decoration: none; }

#facebook {
  display: block;
  position: fixed;
  z-index: 1;
  right: 1.7em;
  top: 1.7em; }
#facebook:hover, #emk:hover { opacity: 0.7; }
#facebook:active, #emk:active { opacity: 0.5; }
#facebook img {
  height: 3.2em;
  width: 3.2em; }

#logo {
  display: block;
  width: 18em;
  margin: 0 auto; }
#gelesen { display: none; }
#gelesen:checked ~ #meldung { display: none; }
#meldung {
  font-size: 1.1em;
  position: relative;
  margin: 0% 22.5% 6.5%;
  padding: 3.5%;
  text-align: left;
  background-color: rgba(255,255,255,0.9); }
label[for=gelesen] {
  position: absolute;
  top: 1%;
  right: 2.5%; }

#hallo { background-color: #fff; }

#ausklappen, #ausklappen1 { display: none; }
#ausklappen:checked ~ #hallo { padding: 5% 10%; }
#ausklappen:checked ~ #hallo h1::before { content: '\2192\00a0'; }
#ausklappen:checked ~ #hallo p { display: none; }
#ausklappen:checked ~ #vision { padding: 10%; }
#ausklappen:not(:checked) ~ #vision h1::before { content: '\2192\00a0'; }
#ausklappen:checked ~ #vision p { display: block; }

#vision {
  margin-top: 5%;
  background: #313843;
  color: #fff;
  padding: 5% 10%; }
#vision p { display: none; }

  #kalender {
    background: #313843 url('../img/kalender.jpg') no-repeat 50% 50%;
    background-size: cover; }
    #kalender .wrapper { padding: 10%; }
    #kalender .wrapper:first-child { padding-bottom: 0;}

  #slider {
    position: relative;
    overflow: hidden;
    text-align: center; }
    #slider input { display: none; }
    #wrapper {
      width: 300%;
      transition: margin-left 0.55s; }
    #one:checked   ~ #wrapper { margin-left: 0; }
    #two:checked   ~ #wrapper { margin-left: -100%; }
    #three:checked ~ #wrapper { margin-left: -200%; }
      .slide {
        display: inline-block;
        width: 33.33%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover; }
      #sone   { background-image: url('../img/elbwiesen.jpg'); }
      #stwo   { background-image: url('../img/tischtennis.jpg'); }
      #sthree { background-image: url('../img/essen.jpg'); }
        .slide label img { width: 10%; margin: 18.9% 0; }
        .left, .right {
          display: inline;
          padding: 50% 0; /* Rätsel */
          width: 20%;
          background: rgba(0,0,0,0.15); }
        .left:hover, .right:hover {
          background: rgba(0,0,0,0.4);
          opacity: 1; }
        .left:active, .right:active {
          background: rgba(0,0,0,0.6);
          opacity: 1; }
        .left { margin-right: 80% }
          .left  img { transform: rotate(90deg); }
          .right img { transform: rotate(270deg); }
    .circlebox {
      width: 100%;
      position: absolute;
      display: inline-block;
      right: 0;
      bottom: 1em;
      left: 0; }
      .circlebox label {
        display: inline-block;
        height: 0.7em;
        width: 0.7em;
        border: 1px solid #fff;
        border-radius: 50%; }
      #one:checked   ~ .circlebox label[for=one],
      #two:checked   ~ .circlebox label[for=two],
      #three:checked ~ .circlebox label[for=three],
      #four:checked  ~ .circlebox label[for=four] { background: #fff; }
      .circlebox label:hover { background-color: rgba(255,255,255, 0.3); }
      .circlebox label:active { background-color: rgba(255,255,255, 0.2); }

  #gmap { color: #111; }

  #kontakt { background-color: #F5F6F7; }
    #kontakt .wrapper { padding: 8% 15% 10%; }
      #betreff { margin-top: 5%; }

      input, textarea {
        display: block;
        width: 100%;
        margin-top: 2.5%;
        padding: 1.5%;
        background-color: inherit;
        border: 0;
        border-bottom: 2px solid #262c34;
        font-size: inherit; }
      textarea { border-left: 2px solid #262c34; }
      input[type="submit"] {
        border: 2px solid #262c34;
        margin-top: 5%; }
      input[type="submit"]:hover, input[type="submit"]:active {
        background-color: #262c34;
        color: #F5F6F7;
        cursor: pointer; }

  #impressum {
    font-size: 0.8em;
    text-shadow: 0 0 5px #111;
    color: #fff;
    padding: 0 2.5% 3%; }
    #impressum .filter { padding: 3% 0; }
      .parted {
        display: inline-block;
        width: 33.3%;
        vertical-align: middle;
        text-align: center; }
        .parted img { height: 6em; }

  @media ( max-width: 1000px ) {
    .container { margin: 0; }
    .flexibel { display: block; }
    .flexibel > :first-child { margin: 0; }
    #facebook { position: absolute; }
    #logo { width: 50%; }
    #meldung {
      background-color: #F5F6F7;
      margin: 0;
      padding: 10%;
    }
    label[for=gelesen] { top: 7.5%; right: 5%; }
    #vision { margin: 0; }
    #kalender { background/*-image*/: none /*url('../img/3.jpg')*/;}
    #kalender .filter { background-color: rgba(0,0,0,0); }
    #kalender .wrapper {
      display: inline-block;
      width: 50%; }
    #slider { display: none; }

    #kontakt .wrapper { padding: 5% 10%; }
    #kontakt .content { display: none; }
    #ausklappen1:not(:checked) ~ h1::before { content: '\2192\00a0'; }
    #ausklappen1:checked ~ h1::before { content: '\2190\00a0'; }
    #ausklappen1:checked ~ .wrapper { padding: 10%; }
    #ausklappen1:checked ~ .content { display: block; }

    #impressum {
      padding: 5%;
    }
  }
  @media ( max-width: 800px ) {
    #logo { width: 70%; }
    .parted {
      width: 50%;
     }
     .parted:last-child {
       width: 100%;
       margin: 3.5% 0;
     }
  }
  @media ( max-width: 600px ) {
    .parted {
      margin: 3.5% 0;
      width: 100%; }
  }
  /*
*/