/* whisper-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Whisper';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/whisper-v5-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* rubik-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/rubik-v28-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* rubik-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/rubik-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* rubik-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/rubik-v28-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

html, * {
    margin:0;
    padding:0;
}

div { box-sizing: border-box;}

  body {
    font-family: 'Rubik', sans-serif;
    font-size: 1em;
    margin: 0;
    padding: 0;
    background:#f0f0f0 url('../img/12_web.jpg') center center;
    background-size: cover;
  }

.span-12 { display:inline-block; width:100%; margin:0; padding:1em; box-sizing: border-box; }
.span-8 { display:inline-block; width:6.67%; margin:0; padding:1em; box-sizing: border-box; }
.span-6 { display:inline-block; width:50%; margin:0; padding:1em; box-sizing: border-box; }
.span-4 { display:inline-block; width:33.33%; margin:0; padding:1em; box-sizing: border-box; }
.span-3 { display:inline-block; width:25%; margin:0; padding:1em; box-sizing: border-box; }
.whisper { font-family:'Whisper', serif; }
.light { font-weight:300; }
p { line-height:1.6em; }
  p b { font-weight: 500; }
  .blue { color: #394a76; }
  .white { color: #ffffff; }
  .center { text-align:center; }
  .error { background: #de6a49; color:white; border: 1px dotted #de6a49; border-radius:.4em; padding:.8em; }
  .success { background:#5e6a49; color:white; border: 1px dotted #5e6a49; border-radius:.4em; padding:.8em; }
  .no-padding { padding: 0 !important; }

  .p-1 { padding: .2em; }
  .px-1 { padding-left: .4em; padding-right: .4em; }
  .py-1 { padding-top: .4em; padding-bottom: .4em; }
  .p-2 { padding: .8em; }
  .px-2 { padding-left: .8em; padding-right: .8em; }
  .py-2 { padding-top: .8em; padding-bottom: .8em; }
  .p-3 { padding: 1.2em; }
  .px-3 { padding-left: 1.2em; padding-right: 1.2em; }
  .py-3 { padding-top: 1.2em; padding-bottom: 1.2em; }
  .p-4 { padding: 1.6em; }
  .px-4 { padding-left: 1.6em; padding-right: 1.6em; }
  .py-4 { padding-top: 1.6em; padding-bottom: 1.6em; }

  .m-1 { margin: .2em; }
  .mx-1 { margin-left: .4em; margin-right: .4em; }
  .my-1 { margin-top: .4em; margin-bottom: .4em; }
  .m-2 { margin: .8em; }
  .mx-2 { margin-left: .8em; margin-right: .8em; }
  .my-2 { margin-top: .8em; margin-bottom: .8em; }
  .m-3 { margin: 1.2em; }
  .mx-3 { margin-left: 1.2em; margin-right: 1.2em; }
  .my-3 { margin-top: 1.2em; margin-bottom: 1.2em; }
  .m-4 { margin: 1.6em; }
  .mx-4 { margin-left: 1.6em; margin-right: 1.6em; }
  .my-4 { margin-top: 1.6em; margin-bottom: 1.6em; }

.wrapper {
    display:block;
    max-width: 1200px;
    margin: 0 auto;
    background:#ffffffcc;
    padding: 0;
}

  input[type=text], textarea {
    border-radius: .5em;
    padding: .6em 1em;
    border: .5px solid silver;
    font-size: 1em;
    box-sizing: border-box;
  }

  label {
    padding: .6em 1em;
  }
  button {
    padding: .6em 1em;
  }

.daten {
    display:block;
}

#navbar { list-style-type: none; width:100%; background:#394a76; }
#navbar li { display:inline-block; }
#navbar li a { display: block; color:white; padding: 0.8em 1.2em; text-decoration: none; }
#navbar li a:hover { background-color:#ffffff22; }

  .teilnahme {
    display:inline-block;
  }
  .teilnahme > label {
    display: block;
    width: 100%;
  }

  .alter {
    display:block;
    margin-left: 2em;
  }
  .alter > label {
    display: block;
  }

  /* CSS */
.button-9 {
  appearance: button;
  backface-visibility: hidden;
  background-color: #394a76;
  border-radius: 6px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  font-size: 100%;
  height: 40px;
  line-height: 1.15;
  margin: 12px 0 0;
  outline: none;
  overflow: hidden;
  padding: 10px 25px;
  position: relative;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /*width: 100%;*/
}

.button-9:disabled {
  cursor: default;
}

.button-9:focus {
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}

.mobilenav {
    overflow: hidden;
    background-color: #333;
    position: relative;
    z-index: 99;
    /*min-height:2.8em !important;*/
    width:100%;
    box-sizing: border-box;
  }
  
  .mobilenav #mobilelinks {
    display: none;
  }

  .mobilenav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

  #mobilelinks a { display:block; color:white; background:#303030; text-decoration: none; padding:.8em 1.2em; }
  #mobilelinks a:hover, #mobilelinks a:target { color:#303030; background:white; }

@media screen and (max-width: 800px) {
    .span-12, .span-8, .span-6, .span-4, .span-3  { width:100%; margin:0; padding:1em; }
    .center-on-mobile { text-align:center; }
    .screen-only { display:none !important; }
    .mobile-only { display:block !important; }
}

@media screen and (min-width: 801px) {
    .center-on-screen { text-align:center; }
    .screen-only { display:block !important; }
    .mobile-only { display:none !important; }
}