@import url('//fonts.googleapis.com/css?family=Roboto:400,700i');
/* --------------------------------------------------
   reset
-------------------------------------------------- */

* {
    box-sizing: border-box;
    outline: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html,body{
  max-height: 100vh;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

::selection {
    background: black;
    color: white;
}

::-moz-selection {
    background: black;
    color: white;
}

html {
    font-size: 16px;
}

@media only screen and (min-width : 600px) {
    html {
        font-size: 17px;
    }
}

@media only screen and (min-width : 800px) {
    html {
        font-size: 18px;
    }
}

@media only screen and (min-width: 1000px) {
    html {
        font-size: 19px;
    }
}

@media only screen and (min-width: 1200px) {
    html {
        font-size: 20px;
    }
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.section {
    padding-top: 10vh;
    min-height: 100vh;

    position: relative;
}

.section_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

h1, h2, h3, .headline {
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: .7em;
}

h1 {
    font-size: 8.125rem;
}

h2 {
    font-size: 1.875rem;
}

h3 {
    font-size: 1.25rem;
    font-style: normal;
    padding: 0.5rem;
    text-transform: uppercase;
}

p {
    margin: 1.6rem 0;
}

p:first-child {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

a {
    text-decoration: none;
    font-weight: bold;
    color: black;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}


/* --------------------------------------------------
   general layout
-------------------------------------------------- */

body {
    background: none;
    background-size: cover;
    background-attachment: fixed;
}

.content {
    max-width: 60rem;
    margin: 0 auto;
    margin-bottom: -10vh;
}

.teaser {
    margin: 0 auto;
    background: #2df3d1;
    background: -moz-linear-gradient(-45deg, #2df3d1 0%, #52489c 100%);
    background: -webkit-linear-gradient(-45deg, #2df3d1 0%,#52489c 100%);
    background: linear-gradient(135deg, #2df3d1 0%,#52489c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2df3d1', endColorstr='#52489c',GradientType=1 );
}

/* --------------------------------------------------
   hero
-------------------------------------------------- */

.hero {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3EF1D1;
}

.teaser-hero {
    height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.teaser-hero img{
  width:100%;
}

@media only screen and (min-width: 400px) {
    .teaser-hero img {
        width: 80%;
    }
}

.zahl {
    display: block;
    width: 100vw;
    height: auto;
    text-align: center;
}
.zahl h1 {
    margin-bottom: 0 !important;
    font-size: 8rem;
}

@media only screen and (min-width : 300px) {
  .zahl h1 {
      font-size: 10rem ;
  }
}

@media only screen and (min-width : 450px) {
  .zahl h1 {
      font-size: 12rem;
  }
}

@media only screen and (min-width : 600px) {
  .zahl h1 {
      font-size: 14rem;
  }
}

@media only screen and (min-width : 900px) {
  .zahl h1 {
      font-size: 16rem;
  }
}

@media only screen and (min-width : 1000px) {
  .zahl h1 {
      font-size: 18rem;
  }
}
@media only screen and (min-width : 1200px) {
  .zahl h1 {
      font-size: 20rem;
  }
}

/* --------------------------------------------------
   block1
-------------------------------------------------- */

.block1 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    max-height: 100vh;
}

.block1 .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10000;
    background: red;
    display: none;
}

.block1 li {
    width: 50%;
}

@media only screen and (min-width: 300px) {
    .block1 li {
        width: 100%;
    }
}

@media only screen and (min-width: 600px) {
    .block1 li {
        width: calc(100%/2);
    }
}

@media only screen and (min-width: 900px) {
    .block1 li {
        width: calc(100%/3)
    }
}

.block1 li:nth-child(5) a {
    background-color: grey;
}

.block1 li:nth-child(6) a {
    background-color: blue;
}

.block1 li:nth-child(7) a {
    background-color: pink;
}

.block1 li:nth-child(8) a {
    background-color: green;
}

.block1 li:nth-child(9) a {
    background-color: orange;
}

.block1 li:nth-child(10) a {
    background-color: red;
}

.block1 a {
    display: block;
    height: 11.5rem;
    color: white;
    position: relative;
    text-align: center;
    padding: 1rem;
    transition: all .3s ease;
    overflow: hidden;
}

.zahlen-zahl {
    font-size: 4.5rem;
}

.zahlen-text {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    font-size: 1.25rem;
}

.block1 p.quelle {
    color: white;
    text-shadow: 0 4px 4px rgba(0, 0, 0, .5);
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 5rem;
}


/* --------------------------------------------------
   block2
-------------------------------------------------- */

.block2 {
    background: #840032;
    margin-bottom: 5rem;
}

.argument {
    background: white;
    padding: 2rem;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .5);
    margin: 1rem auto;
    max-width: 30rem;
}

.argument .icon {
    display: block;
    margin: 1rem auto;
}

.argument h2 {
    text-align: center;
}

@media only screen and (min-width: 1000px) {
    .block2 {
        display: flex;
        justify-content: space-around;
    }
    .argument {
        width: 45%;
        margin: 0;
    }
}


/* --------------------------------------------------
   block3
-------------------------------------------------- */

.block3 {
    margin-bottom: 5rem;
    background: #840032;
}

.argument {
    background: white;
    padding: 2rem;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .5);
    margin: 1rem auto;
    max-width: 30rem;
}

.argument .icon {
    display: block;
    margin: 1rem auto;
}

.argument h2 {
    text-align: center;
}

@media only screen and (min-width: 1000px) {
    .block3 {
        display: flex;
        justify-content: space-around;
    }
    .argument {
        width: 45%;
        margin: 0;
    }
}


/* --------------------------------------------------
   block4
-------------------------------------------------- */

.block4 {
    max-width: 40rem;
    margin: 0 auto;
    padding: 0 3rem;
    color: white;
    text-shadow: 0 3px 3px rgba(0, 0, 0, .5);
    text-align: center;
}


/* --------------------------------------------------
   block5
-------------------------------------------------- */

.block {
    background: #840032;
}

.block5 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 5rem 0;
}

.block5 li {
    width: 50%;
    height: 11.5rem;
    color: white;
    position: relative;
    text-align: center;
    padding: 1rem;
    background-size: cover;
    background-position: 50% 50%;
}

@media only screen and (min-width: 600px) {
    .block5 li {
        width: 33%;
    }
}

@media only screen and (min-width: 900px) {
    .block5 li {
        width: 25%;
    }
}

.beruf-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    font-size: 1.25rem;
    background: rgba(0, 0, 0, .75);
}


/* --------------------------------------------------
   zitate
-------------------------------------------------- */

.zitate ul {
    list-style: none;
    margin: 5rem 0;
}

.zitate li {
    display: flex;
    max-width: 30rem;
    margin: 0 auto;
}

.zitat-portrait {
    flex: 2;
    padding-right: 1rem;
}

.zitat-portrait img {
    display: block;
    width: 100%;
    height: auto;
    border: 4px solid white;
    border-radius: 50%;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .5);
}

.zitat-inhalt {
    flex: 5;
    background: white;
    padding: 1rem;
    margin-top: 1rem;
    font-style: italic;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .5);
}

.zitat-name {
    font-style: normal;
    font-size: .8rem;
}

@media only screen and (min-width: 900px) {
    .zitate ul {
        overflow: auto;
    }
    .zitate li {
        float: left;
        width: 50%;
        padding: 0 3%;
        margin: 0;
    }
}

footer {
    padding: 2rem;
    background: rgba(255, 255, 255, .8);
    color: #333;
    text-align: center;
    font-size: .7rem;
}

footer img {
    width: 50%;
}


/* --------------------------------------------------
-------------------------------------------------------
  APP APP APP APP APP APP APP APP APP APP APP
--------------------------------------------------------
-------------------------------------------------- */

.app {
    font-family: arial, sans-serif;
    color: black;
}

.lila{
  background: #52489B;
}

.aqua{
  background: #2DF3D1;
}

.grad_vert {
      margin: 0 auto;
      background: #2df3d1;
      background: -moz-linear-gradient(top, #2df3d1 0%, #52489c 100%);
      background: -webkit-linear-gradient(top, #2df3d1 0%,#52489c 100%);
      background: linear-gradient(top, #2df3d1 0%,#52489c 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2df3d1', endColorstr='#52489c',GradientType=1 );
}

.grad_84{
  background: #2df3d1;
  background: -moz-linear-gradient(top, #2df3d1 0%, #409db6 84%, #52489c 100%);
  background: -webkit-linear-gradient(top, #2df3d1 0%,#409db6 84%,#52489c 100%);
  background: linear-gradient(to bottom, #2df3d1 0%,#409db6 84%,#52489c 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2df3d1', endColorstr='#52489c',GradientType=0 );
}

.appmenu{
    position: fixed;
    width: 100%;
    height: 10vh;
    top: 0;
    left: 0;
    z-index: 500;
    line-height: 10vh;
}
.appmenu .menu{
  width: 100vw;
  display: flex;
  justify-content: space-between;
  z-index:2000;
}

.appmenu .menu_list {
  display: inline-block;
  height: 10vh;
  line-height: 10vh;
}

.back{
  opacity: 0 !important;
}

.start .section_container{
  margin: 10vh 0 0 0;
}

.button button{
  width: 100%;
  transform: scale(0.8) translateY(-7vh);
}

.button button:hover{
  width: 100%;
  transform: scale(0.8) translateY(-7vh);
}

.appmenu .menu_list .back{
  width: calc(20vw - 1.5rem);
}

.appmenu .menu_list .logo{
  width: calc(60vw - 1.5rem);

}

.appmenu .menu_list .info{
    width: calc(20vw - 1.5rem);
}

.appmenu .backimg{
  height: 10vh;
  transform: scale(0.5);
}

.appmenu .logoimg{
  width: 100%;
  padding: 6% 0;
}

.appmenu .infoimg{
  height: 10vh;
  transform: scale(0.5);
}

.info_overlay{
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(82,72,156,0.90);
  top: 0;
  left: 0;
  padding: 1rem;
  margin-top: -10vh;
  padding-top: 10vh;
  display: none;
}

.info_list{
  padding: 1rem 0 0 0px;
  width: 100%;
  display:inline-block;
}

.info_text{
  line-height: 1.2rem;
  font-size: 1rem;
  padding: 0 1rem;
  display: block;
  float: left;
  color: #fff;
}

.info_text:first-child {
    margin: 1rem 0 0 0;
}

.info_close{
  padding: 0 1rem;
}

.start {}

.app1 {

}

.app1 .section_container{
  margin: 0vh 0 0 0;
}

.btn{
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.25rem;
    border-radius: 0.3125rem;
    display: inline-block;
    width: 80%;
    margin: 0.5rem 10%;
}

.btn:hover{
  background: rgba(0,0,0,0);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.25rem;
  border-radius: 0.3125rem;
  display: inline-block;
  width: 80%;
  margin: 0.5rem 10%;
}

.btn_captcha, .btn_captcha:hover{
  background: #fff;
  color: #2DF3D1;
  margin: 0.5rem 0;
}

.btn_info{
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  width: 100%;
  background: #2DF3D1;
  color: #fff;
  text-transform: uppercase;
  transform: scale(0.8);
}

.btn_info:hover{
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  width: 100%;
  background: #2DF3D1;
  color: #fff;
  text-transform: uppercase;
  transform: scale(0.8);
}

.nextmenu{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: block;
  height: 10vh;
  line-height: 10vh;
  float: left;
}

.nextmenu::before{
  width: 90%;
  height: 10vh;
  line-height: 10vh;
  display: block;
  line-height: 10vh;
  float: left;
  content: ' ';
  opacity: 0;
}

.btn_next, .btn_next:hover{
  width: 10vw;
  background: none;
  padding: 0;
  margin: 0;
  height: 10vh;
  float: left;
  margin: 0 -5vw;
}

.btn_next_img{
  height: 10vh;
  line-height: 10vh;
}


.btn_start, .btn_start:hover{
  background: none;
  padding:0;
  margin:0;
}

.btn_app2, .btn_app2:hover{
  background: #fff;
  color: #2DF3D1;
}

.btn_app4, .btn_app4:hover{
  width: 100%;
  background: #fff;
  color: #2DF3D1;
  margin: 0.5rem 0;
}

.btn_app6, .btn_app6:hover{
  width: 100%;
  background: #fff;
  color: #2DF3D1;
  margin: 0.5rem 0;
}

.btn_lila{
  width: 100%;
  border-radius: 0.3125rem;
  display: inline-block;
  background: #52489B !important;
}

 .btn_nobg{
   border-radius: 0.3125rem;
   background: #52489B !important;
   display: block;
   margin: 0 auto;
}

.btn_lila:hover{
  margin: 0.5rem 10%;
  border-radius: 0.3125rem;
  display: inline-block;
  background: #52489B !important;
  margin: 0.5rem auto !important;
}

.btn_nobg:hover{
  border-radius: 0.3125rem;
  display: block;
  background: #52489B !important;
  margin: 0 auto;
}

.app2{}

  .app2 .section_container{
    margin: 0vh 0 0 0;
  }

  .socialmedia{
    width: 50vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .socialmedia_link{
    display: inline-block;
    max-height: 10vh;
  }

  .socialmedia_link a img{
    height: 10vh;
  }

  .twitter{}
  .instagram{}
  .facebook{}

.app3{
  min-height: 100vh;
  overflow-x: scroll;
}

.app3 .section_container{
  margin: 0vh 0 0 0;
}

  input{
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.25rem;
    border-radius: 0.3125rem;
    display: inline-block;
    margin: 0.5rem 10%;
    outline:none;
    display: none; /* wieder entfernen ? */
  }

  input[type="submit"]{
    display: none;
  }

  .send, .send:hover{
      background: none;
      padding: 0;
      margin: 0;
      height: 10vh;
      float: left;
  }

  input:checked + label {
  background: #52489B !important;
  }

  label{
    width: 80vw;
    background: rgba(255,255,255,0.2);
    font-family: 'Roboto', sans-serif;
    font-weight:normal;
    font-size: 1.25rem;
    border-radius: 0.3125rem;
    display: inline-block;
    margin: 0.5rem 10%;

    -webkit-box-shadow: inset 0.1875rem 0.1875rem 0 0 #fff, inset -0.1875rem -0.1875rem 0 0 #fff, inset -0.1875rem 0.1875rem 0 0 #fff, inset 0.1875rem -0.1875rem 0 0 #fff;
    box-shadow: inset 0.1875rem 0.1875rem 0 0 #fff, inset -0.1875rem -0.1875rem 0 0 #fff, inset -0.1875rem 0.1875rem 0 0 #fff, inset 0.1875rem -0.1875rem 0 0 #fff;

    padding: 0.5rem;
    color: #fff;
  }

.app4 {
  min-height: 100vh;
  overflow-x: scroll;
}

.app4 .section_container{
  margin: 0 0 0 0;
}

.app5 {}

  .app5 .section_container{
    margin: 0vh 0 0 0;
  }

.app6 {
  min-height: 100vh;
  overflow-x: scroll;
}

.app6 .section_container{
  margin: 5vh 0 0 0;
}

.hilfe_menu{
  width: 100vw;

}

.hilfe_list{
  width: 80vw;
  margin: 0.5rem 10%;
  display: inline-block;
  background: rgba(255,255,255,0.2);
  border-radius: 0.3125rem;
}

.hilfe_list h3{
  background: #fff;
  color: #52489B;
  margin: 0;
  border-radius: 0.3125rem;
  padding: 1rem;
  text-align: left;
  text-transform: none;
}

.hilfe_icon span{
  width: 90%;
  display: block;
  float: left;
  font-size: 1.25rem;
  font-style: normal;
  color: #52489B;
  margin: 0;
  text-align: left;
  text-transform: none;
  line-height: 1.75rem;
}

.hilfe_icon{

}

.phone_icon{
  display: block;
  width: 10%;
}

.hilfe_link{
  width: 80vw;
  font-family: 'Roboto', sans-serif;
  font-weight:normal;

  border-radius: 0.3125rem;
  display: inline-block;

  color: #fff;

  font-size: 1.0625rem;
  padding: 0.5rem 1rem;
}

.app7 {
  min-height: 100vh;
  overflow-x: scroll;
}

.app7 .section_container{
  margin: 50vh 0 0 0;
}


  .bundesland_menu{

  }

  .bundesland_list{
    display: inline-block;
    margin-bottom: 0.75rem;
  }

  .bundesland_link{
    text-align: center;
    width: 80vw;
    background: rgba(255,255,255,0.2);
    font-family: 'Roboto', sans-serif;
    font-weight:normal;
    font-size: 1.25rem;
    border-radius: 0.3125rem;
    display: inline-block;
    margin: 0 auto;
    padding: 0.5rem;
    color: #fff;
  }

.app8 {
  min-height: 100vh;
  overflow-x: scroll;
}

.app8 .section_container{
  margin: 0vh 0 0 0;
}

.app9 {}


/* BUTTON */

button{
    padding: 1rem;
    border: 0;
    color: inherit;
    cursor: default;
    font: inherit;
    line-height: normal;
    overflow: visible;
    -webkit-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

button:hover {
    background: grey;
}


/* COUNTER */

/* Custom Checkbox
.form_counter:checked::before,
input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
		zoom: 0.5;
}

.form_counter:checked,
input[type="checkbox"] + label::before {
    content: url('http://keinekleinigkeit.de/img/checkbox.png');
}

input[type="checkbox"]:checked + label::before {
    content: url('http://keinekleinigkeit.de/img/checkbox-checked.png');
}
*/

.form_counter{
	width: 100%;
	margin: 0 auto;
}

.form_wrapper{
  width: 100vw;
  margin-top:15vh;
}


.count {
  text-align: center;
  margin: 0.5rem;
}

.subcount label{
  -webkit-box-shadow:none;
  box-shadow: none;
}

}
.subcount1, .subcount2, .subcount3, .subcount4 {
    display: none !important; /* Wieder auf block stellen */
}


/* BUTTON ANIMATION */
.st0{fill:#DADADA;}
.st1{fill:#B2B2B2;}
.st2{fill:url(/app.css#gradient);}


          .pushthegrey {
            transform: scale(1);
            transform-origin: center center;
            animation: grey 1s ease-in infinite alternate;
      }


@keyframes grey {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.90);
  }
}


.pushthebutton {
  transform: scale(1);
  transform-origin: bottom right;
  animation: push 1s ease-in infinite alternate;
}


@keyframes push {
from {
transform: scale(1);
}
to {
transform: scale(0.95);
}
}

.pushtheletters {
transform: scale(1);
transform-origin: bottom right;
animation: letters 1s ease-in infinite alternate;
}


@keyframes letters {
from {
transform: scale(1);
}
to {
transform: scale(0.95);
}
}


/* CAPTCHA STYLING */

.captcha_modal{
  display:none;
  position: fixed;
  z-index: 99;
  top:0;
  bottom:0;
}

.captcha_container {
  position: absolute;
  z-index: 999;
  width: 100vw;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}