/**
 *
 * directory
 * 
 * browser-reset
 * font-family (@font-face)
 * css-variables (:root)
 * basic elements
 * structure (layout grid)
 * header
 * navigation
 * content
 * sidebar
 * footer
 * templates
 * special content (plugins)
 * @media tablet
 * @media desktop
 *
 */


/**
 * browser-reset
 */

@import url(assets/css/normalize.css);

* {
   box-sizing: border-box;
}

/**
 * font-family (@font-face)
 */

/* montserrat-300 - latin */
@font-face {
   font-family: 'Montserrat';
   font-weight: 300;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/montserrat-v26-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
   font-family: 'Montserrat';
   font-weight: 400;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
   font-family: 'Montserrat';
   font-weight: 500;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/montserrat-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin */
@font-face {
   font-family: 'Montserrat';
   font-weight: 600;
   font-style: normal;

   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
   src: url('assets/fonts/montserrat-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* kalam-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: 'Kalam';
   font-style: normal;
   font-weight: 400;
   src: url('assets/fonts/kalam-v16-latin-regular.eot'); /* IE9 Compat Modes */
   src: url('assets/fonts/kalam-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('assets/fonts/kalam-v16-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('assets/fonts/kalam-v16-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('assets/fonts/kalam-v16-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('assets/fonts/kalam-v16-latin-regular.svg#Kalam') format('svg'); /* Legacy iOS */
 }

 /* kaushan-script-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: 'Kaushan Script';
   font-style: normal;
   font-weight: 400;
   src: url('assets/fonts/kaushan-script-v16-latin-regular.eot'); /* IE9 Compat Modes */
   src: url('assets/fonts/kaushan-script-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('assets/fonts/kaushan-script-v16-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('assets/fonts/kaushan-script-v16-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('assets/fonts/kaushan-script-v16-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('assets/fonts/kaushan-script-v16-latin-regular.svg#KaushanScript') format('svg'); /* Legacy iOS */
 }

 /* quando-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: 'Quando';
   font-style: normal;
   font-weight: 400;
   src: url('assets/fonts/quando-v16-latin-regular.eot'); /* IE9 Compat Modes */
   src: url('assets/fonts/quando-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('assets/fonts/quando-v16-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('assets/fonts/quando-v16-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('assets/fonts/quando-v16-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('assets/fonts/quando-v16-latin-regular.svg#Quando') format('svg'); /* Legacy iOS */
 }

/* ultra-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: 'Ultra';
   font-style: normal;
   font-weight: 400;
   src: url('assets/fonts/ultra-v23-latin-regular.eot'); /* IE9 Compat Modes */
   src: url('assets/fonts/ultra-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('assets/fonts/ultra-v23-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url('assets/fonts/ultra-v23-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url('assets/fonts/ultra-v23-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url('assets/fonts/ultra-v23-latin-regular.svg#Ultra') format('svg'); /* Legacy iOS */
 }

/**
 * css-variables (:root)
 */

:root {
   --font-01: 'Montserrat';
   --font-02: 'Kalam';
   --font-03: 'Kaushan Script';
   --font-04: 'Quando';
   --font-05: 'Ultra';
   --color-01: rgb(255, 255, 255);
   --color-02: rgb(0, 0, 0);
   --color-03: #f9f826;
   --color-04: #1377a7;
   --color-05: #c10622;
}

/**
 * basic elements
 */

.head__icon {
   width: 50px;
}

html, body {
   overflow-x: hidden;
}

body {
   font-family: var(--font-01);
   margin: 0;
   padding: 0;
   width: 100%;
   text-align: center;
   background-color: var(--color-02);
}

h3 {
   font-size: 3rem;
   padding-top: 5%;
   margin: 0;
   color: var(--color-03);
   font-family: var(--font-03);
}

hr {
   width: 70%;
   height: 2px;
   background-color: white;
   border: none;
   margin-bottom: 5%;
}

.background__01 {
   width: 100%;
   height: auto;
   background-color: var(--font-02);
   background-attachment: fixed;
   background-size: cover;
   z-index: 1;
}

/**
 * structure (layout grid)
 */

/**
 * header
 */

#index__header {
   position: fixed;
   z-index: 1000;
   width: 100%;
   height: auto;
   background-color: var(--color-03);
   top: 0;
   left: 0;
   padding: 1rem 1rem;
   font-size: 10%;
   font-family: var(--font-01);
   font-weight: 400;
}

.hidden {
   opacity: 0;
   transition-duration: 0.5s;
}

.index__header__all {
   display: flex;
   flex-direction: row;
}

.index__header__title {
   text-align: left;
}

.index__header__title a {
   color: rgb(255, 255, 255);
   text-decoration: none;
}

.index__header__title a:hover {
   -webkit-filter: invert(1);
    filter: invert(1);
    transition: all 800ms;
}

/**
 * navigation
 */

.index__header__nav-main__mobile {
   font-size: 1rem;
   font-family: var(--font-03);
}

.index__header__nav-main__mobile ul {
   list-style: none;
   margin-top: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
}

.index__header__nav-main__mobile ul li {
   margin: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.index__header__nav-main__mobile ul li a {
   text-decoration: none;
   color: var(--color-02);
}

/**
 * content
 */

#confetti-container {
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 980;
}

#button__konfetti {
   position: fixed;
   bottom: 10%;
   left: 2rem;
   font-family: var(--font-03);
   color: var(--color-03);
   Padding: 7px;
   border-color: var(--color-04);
   background-color: var(--color-04);
   border-style: solid;
   border-radius: 5px;
}

#button__konfetti:hover {
   color: var(--color-04);
   border-color: none;
   background-color: var(--color-03);
   
}

#index__home {
   min-height: 100vh;
   background-color: var(--color-02);
   background-size: cover;
   background-attachment: fixed;
   position: relative;
}

.index__home__content {
   display: flex;
   flex-direction: column;
   margin-top: 40%;
}

.index__home__img-01 {
   display: none;
}

.index__home__img-02 {
   width: 100%;
   position: fixed;
   background-position: center;
}

p {
   margin: 0rem;
}

.headliner {
   font-family: var(--font-04);
   color: var(--color-03);
   font-weight: bold;
   line-height: 500%;
   text-shadow: 4px 4px var(--color-04);
   position: relative;
   margin-top: 10%;
   margin-bottom: 30%;
}

.zahl_3 {
   font-size: 500%;
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   }
   @-webkit-keyframes fadeInDown {
   0% {
   opacity: 0;
   -webkit-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
   }
   100% {
   opacity: 1;
   -webkit-transform: none;
   transform: none;
   }
   }
   @keyframes fadeInDown {
   0% {
   opacity: 0;
   -webkit-transform: translate3d(0, -100%, 0);
   transform: translate3d(0, -100%, 0);
   }
   100% {
   opacity: 1;
   -webkit-transform: none;
   transform: none;
   }
}

.deutsch_schrift {
   font-size: 300%;
   animation-delay: 1s;
   -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

.tichu_schrift {
   animation-delay: 2s;
   font-family: var(--font-05);
   font-weight: bolder;
   font-size: 300%;
   -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
  -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  20% {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(1.03, 1.03, 1.03);
  transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
  -webkit-transform: scale3d(.97, .97, .97);
  transform: scale3d(.97, .97, .97);
  }
  100% {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
}

.booster_schrift {
   font-family: var(--font-03);
   color: var(--color-05);
   font-size: 300%;
   animation-delay: 3s;
   -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rotateIn {
  0% {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate3d(0, 0, 1, -200deg);
  transform: rotate3d(0, 0, 1, -200deg);
  opacity: 0;
  }
  100% {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: none;
  transform: none;
  opacity: 1;
  }
}


.meister {
   font-size: 300%;
   animation-delay: 4s;
   -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInLeft {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

.innenschaft {
   font-size: 300%;
   animation-delay: 4s;
   -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
}

#index__countdown {
   z-index: 900;
   position: sticky;
   top:0;
   left: 0;
   width: 100%;
}

.countdown {
    text-align: center;
    font-family: var(--font-03);
    margin-top: 1rem;
    color: var(--color-04);
    background-color: var(--color-03);
}

.countdown h1 {
    font-size: 2em;
    padding: 0.35rem;
}

.index__uebergang {
   background-position: center;
   background-image: url(assets/img/background-scaled.jpg);
   background-size: contain;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-color: var(--color-02);
   z-index: 30;
   position: relative;
   min-height: 100vh;
}

.phoenix__img img{
   height: 15rem;
   justify-content: space-between;
   margin-top: 40%;
}

/* -- ANREISE --*/

#index__anreise {
   background-color: var(--color-02);
   z-index: 990;
   min-height: 100vh;
   top: 0;
   left: 0;
   position: sticky;
   text-align: cente;
}

.index__anreise__content a{
   text-decoration: none;
   color: var(--color-03);
   font-family: var(--font-03);
   font-size: 1.5rem;
   border-radius: 20rem;
   border-color: var(--color-03);
   border-style: solid;
   padding: 0 1rem;
   
}

.index__anreise__content a:hover{
   color: var(--color-02);
   background-color: var(--color-03);   
}

.haus__susemihl {
   margin-top: 10%;
   margin-bottom: 10%;
   width: 100%;
   height: auto;
   -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

/* -- ZEITPLAN --*/

#index__zeitplan {
   background-color: var(--color-03);
   z-index: 991;
   position: relative;
   min-height: 100vh;
   top: 0;
}

.zeitplan__title {
   color: var(--color-02);
}

 
 /* Timeline Container */
 .timeline {
   background: var(--color-03);
   padding: 40px;
   justify-content: center;
   display: flex;
 }
 
 /* Card container */
 .card__01 {
   position: relative;
   max-width: 400px;
 }
 
 /* setting padding based on even or odd */
 .card__01:nth-child(odd) {
   padding: 30px 0 30px 30px;
 }
 .card__01:nth-child(even) {
   padding: 30px 30px 30px 0;
 }
 /* Global ::before */
 .card__01::before {
   content: "";
   position: absolute;
   width: 50%;
   border: solid var(--color-05);
 }
 
 /* Setting the border of top, bottom, left */
 .card__01:nth-child(odd)::before {
   left: 0px;
   top: -4.5px;
   bottom: -4.5px;
   border-width: 5px 0 5px 5px;
   border-radius: 50px 0 0 50px;
 }
 
 /* Setting the border of top, bottom, right */
 .card__01:nth-child(even)::before {
   right: 0;
   top: 0;
   bottom: 0;
   border-width: 5px 5px 5px 0;
   border-radius: 0 50px 50px 0;
 }
 
 /* Removing the border if it is the first card */
 .card__01:first-child::before {
   border-top: 0;
   border-top-left-radius: 0;
 }
 
 /* Removing the border if it is the last card  and it's odd */
 .card__01:last-child:nth-child(odd)::before {
   border-bottom: 0;
   border-bottom-left-radius: 0;
 }
 
 /* Removing the border if it is the last card  and it's even */
 .card__01:last-child:nth-child(even)::before {
   border-bottom: 0;
   border-bottom-right-radius: 0;
 }
 
 /* Information about the timeline */
 .info {
   display: flex;
   flex-direction: column;
   background: var(--color-0);
   color: var(--color-02);
   border-radius: 10px;
   padding: 10px;
   text-align: left;
   line-height: 3rem;
 }

 .info li {
   font-size: 1.2rem;
 }
 
 /* Title of the card */
 .title {
   color: var(--color-04);
   position: relative;
   justify-content: left;
 }
 
 /* Timeline dot  */
 .title::before {
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   background: var(--color-04);
   border-radius: 999px;
   border: 3px solid var(--color-04);
 }
 
 /* text right if the card is even  */
 .card__01:nth-child(even) > .info > .title {
   text-align: left;
 }
 
 /* setting dot to the left if the card is odd */
 .card__01:nth-child(odd) > .info > .title::before {
   left: -45px;
 }
 
 /* setting dot to the right if the card is odd */
 .card__01:nth-child(even) > .info > .title::before {
   right: -45px;
 }

/* -- REGELN --*/

#index__regeln {
   background-position: center;
   background-image: url(assets/img/background-scaled.jpg);
   background-size: contain;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-color: var(--color-02);
   z-index: 992;
   position: relative;
   min-height: 100vh;
   color: var(--color-03);
   padding: 1rem 2rem 1rem 2rem;
}

.text__regeln {
   text-align: left;
   font-size: 1.2rem;
   font-weight: bolder;
   margin-bottom: 4rem;
   padding-left: 10%;
   padding-right: 10%;
}

h4 {
   font-family: var(--font-03);
   font-size: 2.5rem;
   color: var(--color-05);
   text-shadow: 2px 2px var(--color-04);
   text-align: left;
   margin-top: 0;
   margin-bottom: 1rem;
}

.regeln__bird {
   width: 80%;
}


/* --TEAMS-- */


#index__teams {
   background-color: var(--color-03);
   z-index: 993;
   position: relative;
   min-height: 100vh;
   top: 0;
   align-items: center;
}

.teams__title {
   color: var(--color-02);
}

.text-blk {
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   line-height: 25px;
 }
 
 .responsive-cell-block {
   min-height: 75px;
 }
 
 .responsive-container-block {
   min-height: 75px;
   height: fit-content;
   width: 100%;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   display: flex;
   flex-wrap: wrap;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   justify-content: space-evenly;
 }
 
 .outer-container {
   padding-top: 10px;
   padding-right: 80px;
   padding-bottom: 10px;
   padding-left: 80px;
 }
 
 .inner-container {
   max-width: 1320px;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
   margin-top: 50px;
   margin-right: auto;
   margin-bottom: 50px;
   margin-left: auto;
 }
 
 .name {
   font-size: 18px;
   font-weight: 800;
   line-height: 24px;
   padding-top: 15px;
   padding-right: 10px;
   padding-bottom: 5px;
   padding-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
 }
 
 .position {
   line-height: 24px;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
 }
 
 .card {
   display: block;
   flex-direction: column;
   align-items: center;
   padding-top: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   padding-left: 10px;
 }
 
 .card-img {
   width: auto;
   height: 230px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   max-width: 300px;
 }

 .card:hover {
   height: 270px;
   -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes flip {
  0% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  }
  40% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  }
  50% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  80% {
  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
  transform: perspective(400px) scale3d(.95, .95, .95);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  100% {
  -webkit-transform: perspective(400px);
  transform: perspective(400px);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  }
  @keyframes flip {
  0% {
  -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  }
  40% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
  }
  50% {
  -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  80% {
  -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
  transform: perspective(400px) scale3d(.95, .95, .95);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
  100% {
  -webkit-transform: perspective(400px);
  transform: perspective(400px);
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  }
   transition: all 800ms;
 }
 
 .card-container {
   display: inline-block;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 40px;
   margin-left: 0px;
 }
 
 .headings-container {
   padding-top: 0px;
   padding-right: 10px;
   padding-bottom: 0px;
   padding-left: 0px;
 }
 
 .team-members-container {
   display: flex;
   flex-wrap: wrap;
 }


/* --GALERIE--*/

#index__galerie {
   background-color: var(--color-02);
   z-index: 994;
   position: relative;
   min-height: 100vh;
}

* {
   box-sizing: border-box;
 }
 
 /* Position the image container (needed to position the left and right arrows) */
 .gallery__container {
   position: absolute;
   justify-content: center;
   padding-top: 20%;
   padding-bottom: 20%;
 }
 
 /* Hide the images by default */
 .mySlides {
   display: none;
 }
 
 /* Add a pointer when hovering over the thumbnail images */
 .cursor {
   cursor: pointer;
 }
 
 /* Next & previous buttons */
 .prev,
 .next {
   cursor: pointer;
   position: relative;
   top: 40%;
   width: auto;
   padding: 30px;
   margin-top: -50px;
   color: rgb(255, 255, 255);
   font-weight: bold;
   font-size: 40px;
   border-radius: 0 3px 3px 0;
   user-select: none;
   -webkit-user-select: none;
   
 }
 
 /* Position the "next button" to the right */
 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 
 /* On hover, add a black background color with a little bit see-through */
 .prev:hover,
 .next:hover {
   background-color: rgba(255, 255, 255, 0.8);
 }
 
 /* Number text (1/3 etc) */
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: relative;
 }
 
 .row:after {
   content: "";
   display: table;
   clear: both;
 }
 
 /* Six columns side by side */
 .column {
   float: left;
   width: 16.66%;
 }
 
 /* Add a transparency effect for thumnbail images */
 .demo {
   opacity: 0.6;
 }
 
 .active,
 .demo:hover {
   opacity: 1;
 }


 /**
* @media desktop
*/

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

 .gallery__container {
   position: relative;
   min-height: 100vh;
   padding-top: 0;
   padding-bottom: 5%;
 }

}

/* --ORGA-MÄUSE--*/

#orga-maeuse {
   z-index: 994;
   position: relative;
   min-height: 100vh;
}

.orga-m-headline {
   position: relative;
   min-width: 100%;
   z-index: 996;
}

.orga-m-headline h3 {
   color: var(--color-02);
}

.background_animation {
   position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 995;
}

.orga-m-content {
   position: relative;
   min-width: 100%;
   z-index: 996;
   justify-content: center;
   padding-top: 50%;
}

.orga-m-content img {
   width: 100%;
}

svg {
   width: 100vw;
   height: 100vh;
   z-index: 996;
   position: relative;
}

.orga-team {
   width: 100%;
}

.wuff {
   display: none;
}

/*--SPONSOREN--*/

#index__sponsoren {
   background-color: var(--color-03);
   z-index: 995;
   position: fixed;
   bottom: 0;
   height: auto;
   width: 100%;
}

.sponsoren_01 {
   width: 10%;
   margin: 0.5rem;
}

form input, textarea {
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-size: 15px;
   margin-bottom: 10px;
   border-radius: 2px;
   border: 2px solid;
}

form input {
   width: 552px;
   height: 30px;
}

form textarea {
   width: 550px;
   height: 200px;
   resize: none;
}

.input__text {
   padding-left: 20 px;
}

/**
 * sidebar
 */

/**
 * footer
 */

/**
 * templates
 */

/**
 * @media big phone
 */

 @media (max-width: 500px) {
   .heading-text {
     text-align: left;
     line-height: 65px;
   }
 
   .sub-heading-text {
     color: rgb(122, 122, 122);
     text-align: left;
   }
 
   .name {
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     padding-top: 10px;
     padding-right: 0px;
     padding-bottom: 5px;
     padding-left: 0px;
   }
 
   .position {
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 10px;
     padding-left: 0px;
   }
 
   .inner-container {
     margin-top: 80px;
     margin-right: 0px;
     margin-bottom: 50px;
     margin-left: 0px;
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
   }
 
   .card {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
 
   .outer-container {
     padding-top: 10px;
     padding-right: 20px;
     padding-bottom: 10px;
     padding-left: 20px;
   }
 
   .card-img {
     width: 100%;
   }
 
   .heading-text {
     font-size: 40px;
     line-height: 45px;
   }
 
   .card-img {
     min-width: auto;
   }
 }


/**
 * @media tablet
 */

@media screen and (min-width: 769px) {
   
   #index__header {
      height: 50px;
   }

   .index__header__nav-main__mobile ul li {
      margin: 0;
   }

   .index__home__img-01 {
      transition: all 1500ms;
      width: 60%;
      position: fixed;
      display: block;
   }
   
   .index__home__img-02 {
      display: none;
   }
   
   .index__home__img-01:hover {
      -webkit-filter: invert(1);
       filter: invert(1);
       transition: all 1500ms;
       width: 70%;
   }
   
   .index__home__img-02:hover {
      -webkit-filter: invert(1);
       filter: invert(1);
       transition: all 1500ms;
       width: 55%;
   }

   .phoenix__img img{
      height: 25rem;
      padding: 0rem 3rem;
      margin-top: 50%;
   }

   .position {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
   }

   .name {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
   }

   .heading-text {
      text-align: center;
      padding-top: 10px;
      padding-right: 0px;
      padding-bottom: 10px;
      padding-left: 0px;
   }

   .sub-heading-text {
      text-align: center;
      color: rgb(122, 122, 122);
      max-width: 500px;
      margin-top: 0px;
      margin-right: auto;
      margin-bottom: 0px;
      margin-left: auto;
   }

   .team-members-container {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      margin-top: 30px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
   }

   .card {
      display: flex;
   }

   .card-img {
      max-width: 300px;
      min-width: 250px;
   }

   .headings-container {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
   }

   .card {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
   }

   .heading-text {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
   }

   .inner-container {
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
   }
}

/**
 * @media desktop
 */

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

   /*basic adjustment*/

   hr {
      width: 30rem;
      height: 1px;
      background-color: white;
      border: none;
      margin-bottom: 5%;
   }

   /*header*/

   /* #index__header {
      position: fixed;
      z-index: 1000;
      width: 100%;
      height: 50px;
      background-color: var(--color-03);
      top: 0;
      left: 0;
      padding: 1rem 3rem;
      font-size: 1rem;
      font-family: var(--font-01);
      font-weight: 400;
      transition-duration: 0.5s;
   } */
   
   .hidden {
      opacity: 0;
      transition-duration: 0.5s;
   }
   
   .index__header__all {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: stretch;
   }
   
   .index__header__title {
      text-align: left;
   }
   
   .index__header__title a {
      color: rgb(255, 255, 255);
      text-decoration: none;
   }
   
   .index__header__title a:hover {
      -webkit-filter: invert(1);
       filter: invert(1);
       transition: all 800ms;
   }

   /* navigation */

   .index__header__nav-main__mobile ul li {
      margin: 0;
   }

   .index__header__nav-main__mobile ul li a:hover {
      font-size: 2rem;
      transition: all 1500ms;
   }

   /* content */

   #confetti-container {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 980;
   }
   
   #button__konfetti {
      position: fixed;
      bottom: 10%;
      left: 2rem;
      font-family: var(--font-03);
      color: var(--color-04);
      Padding: 7px;
      border-color: var(--color-04);
      background-color: rgba(255, 255, 255, 0);
      border-style: solid;
      border-radius: 5px;
   }
   
   #button__konfetti:hover {
      color: var(--color-04);
      border-color: none;
      background-color: var(--color-03);
      
   }

   #index__home {
      min-height: 100vh;
      background-color: var(--color-02);
      background-size: cover;
      background-attachment: fixed;
      position: relative;
      margin-top: 0;
   }
   
   .index__home__content {
      display: flex;
      flex-direction: column;
      margin-top: 0;
      align-items: center;
   }

   .index__home__img-01 {
      transition: all 1500ms;
      width: 60%;
      position: fixed;
      display: block;
      padding-top: 5%;
   }
   
   .index__home__img-02 {
      display: none;
   }
   
   .index__home__img-01:hover {
      -webkit-filter: invert(1);
       filter: invert(1);
       transition: all 1500ms;
       width: 70%;
   }
   
   .index__home__img-02:hover {
      -webkit-filter: invert(1);
       filter: invert(1);
       transition: all 1500ms;
       width: 55%;
   }

   .headliner {
      line-height: 600%;
      margin-top: 5%;
      margin-bottom: 0;
   }
   
   .zahl_3 {
      font-size: 600%;
   }
   
   .deutsch_schrift {
      font-size: 400%;
   }
   
   .tichu_schrift {
      font-size: 600%;
   }
   
   .booster_schrift {
      font-size: 700%;
   }
   
   .meister, .innenschaft {
      font-size: 400%;
   }

   .index__uebergang {
      background-image: url(assets/img/background-scaled.jpg);
      background-size: cover;
      background-attachment: fixed;
      z-index: 30;
      position: relative;
      min-height: 40rem;
   }
   
   .phoenix__img img{
      height: 40rem;
      padding: 2rem 6rem;
   }

   #index__anreise {
      padding-bottom: 10%;
   }

   .haus__susemihl {
      margin-bottom: 2rem;
      width: 40%;
      margin-top: 0;
   }

   .susemihl__link {
      margin-top: 2rem;
   }

   .name {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 10px;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-left: 0px;
   }
   
   .position {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 0px;
   }
   
   .card-img {
      width: 100%;
      min-width: 100%;
      height: 250px;
      min-height: 230px;
      max-height: 230px;
   }

   #index__regeln {
      background-image: url(assets/img/background-scaled.jpg);
      background-size: cover;
      background-attachment: fixed;
      z-index: 992;
      position: relative;
      min-height: 50rem;
      color: var(--color-03);
      padding: 0 12rem 4rem 12rem;
   }
   
   .text__regeln {
      text-align: left;
      font-size: 1.2rem;
   }

   .orga-m-content {
      position: relative;
      width: 100%;
      z-index: 996;
      justify-content: center;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: row;
   }
   
   .orga-m-content img {
      width: 80%;
      
   }

   .wuff {
      display: block;
      width: 30%;
   }

   .sponsoren_01 {
      width: 5%;
      margin: 0.5rem;
   }
    
}