/* Fonts */

@font-face {
  font-family: 'bignoo';
  src: url('../fonts/big_noodle_titling_oblique-webfont.woff2') format('woff2'), url('../fonts/big_noodle_titling_oblique-webfont.woff') format('woff');
}


@font-face {
    font-family: 'abeezeeitalic';
    src: url('../fonts/abeezee-italic-webfont.woff2') format('woff2'),
         url('abeezee-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'abeezeeregular';
    src: url('../fonts/abeezee-regular-webfont.woff2') format('woff2'),
         url('../fonts/abeezee-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/* Farben
Lila: R=199 G=122 B=244 // #C77AF4
Blau: R=0 G=27 B=244 // #001BF4
*/


/* Hello. */

body {
color: #000;
background: #ffffff;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
-webkit-hyphenate-limit-chars: 10 4 4;
-webkit-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-last: always;
-moz-hyphens: auto;
-moz-hyphenate-limit-chars: 10 4 4;
-moz-hyphenate-limit-lines: 2;
-moz-hyphenate-limit-last: always;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: 10 4 4;
-ms-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-last: always;
hyphens: auto;
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
}

h1 {
font-family: bignoo;
font-weight: normal;
font-style: normal;
font-size: 2.4em;
letter-spacing: 0.04em;
line-height: 1.03em;
margin-left: -40px;
position: relative;
}

h2 {
font-family: abeezeeregular;
font-weight: normal;
font-style: normal;
font-size: 1.4em;
letter-spacing: 0.02em;
line-height: 1.05em;
margin-top: -20px;
margin-left: -40px;
margin-bottom: 40px;
position: relative;
}

strong {
font-family: abeezeeregular;
font-weight: 900;
font-style: black;
}

italic {
font-family: abeezeeitalic;
font-weight: 400;
font-style: italic;
}

p {
font-family: abeezeeregular;
font-weight: 400;
font-style: normal;
font-size: 1.4em;
line-height: 1.1em;
}

p.imp {
font-family: abeezeeregular;
font-weight: normal;
font-style: normal;
font-size: 1.2em;
line-height: 1.0em;
}

.sc-content li {
font-family: abeezeeregular;
font-weight: normal;
font-style: normal;
font-size: 1.2em;
line-height: 1.4em;
}

p.navi {
font-family: bignoo;
font-weight: normal;
font-style: normal;
font-size: 2.0em;
letter-spacing: 0.02em;
line-height: 0.05em;
display: inline;
margin: 0px;
underline: none;
}

p.navii {
font-family: bignoo;
font-weight: normal;
font-style: normal;
font-size: 2.0em;
letter-spacing: 0.02em;
line-height: 1.05em;
display: inline;
margin: 0px;
underline: none;
}

.lang p.navii {
font-family: bignoo;
font-weight: normal;
font-style: normal;
font-size: 2.0em;
letter-spacing: 0.02em;
line-height: 1.05em;
display: inline;
margin: 0px;
white-space: nowrap;
underline: none;
}

.de-active p.navii {
font-family: bignoo;
font-weight: normal;
font-style: normal;
font-size: 2.0em;
line-height: 1.05em;
letter-spacing: 0.02em;
display: inline;
margin: 0px;
white-space: nowrap;
underline: none;
}

.en-active p.navii {
font-family: bignoo;
font-weight: normal;
font-style: normal;
font-size: 2.0em;
line-height: 1.05em;
letter-spacing: 0.02em;
display: inline;
margin: 0px;
white-space: nowrap;
underline: none;
}

.de-inactive p.navii {
font-family: bignoo;
font-weight: normal;
font-style: normal;
font-size: 2.0em;
line-height: 1.05em;
letter-spacing: 0.02em;
display: inline;
margin: 0px;
white-space: nowrap;
underline: none;
}

.en-inactive p.navii {
font-family: bignoo;
font-weight: normal;
font-style: normal;
font-size: 2.0em;
line-height: 1.05em;
letter-spacing: 0.02em;
display: inline;
margin: 0px;
white-space: nowrap;
underline: none;
}

.neon-blue {
  color: #ffffff;
 text-shadow: 0 0 13px #001BF4, 0 0 12px #001BF4, 0 0 15px #001BF4, 0 0 16px #001BF4 , 0 0 19px #001BF4 , 0 0 10px #001BF4 , 0 0 12px #001BF4 ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.neon-blue:hover { 
    text-shadow: 0 0 10px #C77AF4, 0 0 18px #C77AF4, 0 0 20px #C77AF4, 0 0 17px #ff00de , 0 0 22px #ff00de , 0 0 14px #ff00de , 0 0 11px #ff00de ;
}

.neon-lilac:hover { 
	color: #ffffff;
    text-shadow: 0 0 10px #9D50F5, 0 0 18px #9D50F5, 0 0 20px #9D50F5, 0 0 17px #ff00de , 0 0 22px #ff00de , 0 0 14px #ff00de , 0 0 11px #ff00de ;
	  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.logo-glow {
  color: #ffffff;
 box-shadow: 0 0 13px #001BF4, 0 0 12px #001BF4, 0 0 15px #001BF4, 0 0 16px #001BF4 , 0 0 19px #001BF4 , 0 0 10px #001BF4 , 0 0 12px #001BF4 ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.logo-glow:hover { 
    box-shadow: 0 0 10px #C77AF4, 0 0 18px #C77AF4, 0 0 20px #C77AF4, 0 0 17px #ff00de , 0 0 22px #ff00de , 0 0 14px #ff00de , 0 0 11px #ff00de ;
}


/* Navigation */

.logo {
  top: 0;
  left: 0;
  padding-top: -20px;
  padding-left: 0px;
  position: fixed;
  z-index: 99;
}

.logo-img {
  width: 28vw;
  max-width: 450px;
  min-width: 220px;
}

.header {
top: 0;
left: 0;
position: fixed;
background: #fff;
height: 70px;
box-shadow: 0 0 20px 20px #fff;
opacity: 0.95;
z-index: 89;
width: 100vw;
display: block;
}

.navigation {
  top: 0;
  right: 0;
  margin-top: 30px;
  margin-right: 30px;
  z-index: 100;
  width: 70vw;
  position: fixed;
}

.nav1 {
  display: grid;
  grid-template-columns: fit-content(18%) fit-content(18%) fit-content(18%) fit-content(18%) fit-content(18%);
  grid-template-rows: 1;
  column-gap: 8%;
  justify-content: end;
  margin-top: 10px;
}

.impressum {
top: 0;
left: 0;
margin-top: 50vh;
margin-left: -50px;
position: fixed;
z-index: 80;
font-size: 0.5em;
transform: rotate(-90deg);
}

.sprachswitch-1 {
  bottom: 0;
  left: 0;
  margin-bottom: 20px;
  margin-left: 40px;
  position: fixed;
  z-index: 90;
  display: block;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 0 20px 20px #fff;
  opacity: 0.95;
}

.sprachswitch-2 {
  bottom: 0;
  right: 0;
  margin-bottom: 20px;
  margin-right: 40px;
  text-align: right;
  position: fixed;
  z-index: 90;
  display: block;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 0 20px 20px #fff;
  opacity: 0.95;
}

.langgrid {
  display: grid;
  grid-template-columns: fit-content(100%) fit-content(100%) fit-content(100%);
  grid-template-rows: 1;
}


/* Index */

.index-image {
  top: 0;
  margin-top: 25vh;
  margin-left: 5vw;
  width: 50vw;
  position: fixed;
}

.index-image img {
  width: 50vw;
}

.sc-content img {
  width: 45vw;
  max-width: 800px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.spacer img {
  margin-bottom: 130px;
}

.index-text {
  margin-top: 45vh;
  margin-left: 60vw;
  margin-bottom: 150px;
  width: 30vw;
  position: relative;
}

.spacer img {
  margin-bottom: 130px;
}


/* Projekte */

.projekte {
  top: 0;
  margin-top: 25vh;
  margin-left: 27vw;
  width: 50vw;
  position: relative;
  margin-bottom: 180px;
}


/* About */

.about-grid {
  top: 0;
  margin-top: 30vh;
  margin-left: 10vw;
  width: 65vw;
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  column-gap: 10%;
}

.about-text {
  margin-top: 120px;
  margin-left: 20vw;
  margin-bottom: 150px;
  width: 65vw;
  position: relative;
}


/* Team */

.team-grid {
  top: 0;
  margin-top: 6vh;
  margin-left: 10vw;
  width: 65vw;
  position: relative;
  display: grid;
  grid-template-columns: 30% 30% 30%;
  column-gap: 15%;
  margin-bottom: 120px;
}

img.team {
  width: 15vw !important;
  max-width: 800px;
  margin-bottom: 50px !important;
  margin-top: 160px !important;
}


/* Akkordeon */

.akkordeon {
  max-width: 100%;
}

.toggle {
  display: none;
}

.option {
  position: relative;
  margin-bottom: 1em;
}

.offer,
.description {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  transition: all 0.2s;
}

.offer {
  top: 0%;
  padding-left: 5%;
}

.offer:after, .offer:before {
  content: '';
  position: absolute;
  left: 0%;
  top: 0%;
  margin-top: 10px;
  margin-left: -20px;
  width: 5px;
  height: 1.6em;
  background-color: black;
  transition: all 0.2s;
}

.offer:after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.description {
  padding-left: 10%;
  max-height: 0;
  overflow: hidden;
}

.toggle:checked + .offer + .description {
  max-height: 50%;
}

.toggle:checked + .offer:before {
  -webkit-transform: rotate(90deg) !important;
          transform: rotate(90deg) !important;
		  
}

.caption {
  font-family: bignoo;
  font-weight: normal;
  font-style: normal;
  font-size: 2.4em;
  letter-spacing: 0.04em;
  line-height: 1.2em;
  hyphens: none !important;
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 4px;
  cursor: pointer;
}


/* Mainframe */

.desktop {
  display: block;
}

.mobile {
  display: none;
}

.video-container-wrapper {
max-width: 100%;
width: 700px;
left: 0;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Links */

a:link {
color: inherit;
text-decoration-color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.09em;
text-underline-offset: 2px;
}

a:visited {
color: inherit;
text-decoration-color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.09em;
text-underline-offset: 2px;;
}

a:hover {
color: inherit;
text-decoration-color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.09em;
text-underline-offset: 2px;
}

a:active {
color: inherit;
text-decoration-color: inherit;
text-decoration: underline;
text-decoration-thickness: 0.09em;
text-underline-offset: 2px;
}

a.nav:link {
display: inline-block;
position: relative;
color: inherit;
text-decoration: none;
}

a.nav:visited {
color: inherit;
text-decoration: none;
}

a.nav:hover {
color: inherit;
text-decoration: none;
}

a.nav:active {
color: inherit;
text-decoration: none;
}

h1 a:link {
color: inherit;
text-decoration: none !important;
}

h1 a.:visited {
color: inherit;
text-decoration: none !important;
}

h1 a:hover {
color: inherit;
text-decoration: none !important;
	color: #ffffff;
    text-shadow: 0 0 10px #C77AF4, 0 0 18px #C77AF4, 0 0 20px #C77AF4, 0 0 17px #ff00de , 0 0 22px #ff00de , 0 0 14px #ff00de , 0 0 11px #ff00de ;
	  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

h1 a:active {
color: inherit;
text-decoration: none !important;
}

h2 a:link {
color: inherit;
text-decoration: none !important;
}

h2 a.:visited {
color: inherit;
text-decoration: none !important;
}

h2 a:hover {
color: inherit;
text-decoration: none !important;
}

h2 a:active {
color: inherit;
text-decoration: none !important;
}

.en-active a:link {
display: inline-block;
position: relative;
color: inherit;
text-decoration: none;
}

.en-active a.:visited {
color: inherit;
text-decoration: none;
}

.en-active a:hover {
color: inherit;
text-decoration: none;
}

.en-active a:active {
color: inherit;
text-decoration: none;
}

.de-active a:link {
display: inline-block;
position: relative;
color: inherit;
text-decoration: none;
}

.de-active a.:visited {
color: inherit;
text-decoration: none;
}

.de-active a:hover {
color: inherit;
text-decoration: none;
}

.de-active a:active {
color: inherit;
text-decoration: none;
}

.en-inactive a:link {
display: inline-block;
position: relative;
color: inherit;
text-decoration: none;
}

.en-inactive a.:visited {
color: inherit;
text-decoration: none;
}

.en-inactive a:hover {
color: inherit;
text-decoration: none;
}

.en-inactive a:active {
color: inherit;
text-decoration: none;
}

.de-inactive a:link {
display: inline-block;
position: relative;
color: inherit;
text-decoration: none;
}

.de-inactive a.:visited {
color: inherit;
text-decoration: none;
}

.de-inactive a:hover {
color: inherit;
text-decoration: none;
}

.de-inactive a:active {
color: inherit;
text-decoration: none;
}


/* Mobile Menue */

.mobilemenue {
  display: none;
}

#menuToggle
{
  display: block;
  position: fixed;
  top: 10px;
  right: 10px;
  height: 50px;
  width:  50px;
  background: #ffffff;
  border: none;
  -webkit-border-radius: 50% 50% 50% 50%;
  -moz-border-radius: 50% 50% 50% 50%;
  border-radius: 50% 50% 50% 50%;
  display: inline-block;
  z-index: 101;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 50px;
  height: 50px;
  position: fixed;
  top: 10px;
  right: 10px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 102; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

#menuToggle span
{
  top: 14px;
  right: -9px;
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #000000;
  border-radius: 3px;
  z-index: 101;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #000000;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menuToggle a
{
  text-decoration: none;
  color: inherit;
  transition: color 0.1s ease;
  font-size: 2.2em;
  line-height: 1.3em;
}

#menuToggle a:hover
{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 4px;
}

#menu
{
  position: fixed;
  width: 100vw;
  height: 100vh;
  margin-top: 0px;
  top: 0;
  left: 0;
  background: #ffffff;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  padding-right: 20vw;
  padding-left: 15vw;
  padding-top: 5px;
  overflow: hidden;
  z-index: 100;
  transition: background 0.6s ease-in 0s !important;
  transition: color 0.4s ease-in-out 0s !important;
}

#menu li
{
  padding-top: 25px;
}

#menuToggle input:checked ~ ul
{
	transform: none;
}


/* Mobile Ansicht */


@media all and (max-width: 800px) {


.navigation {
  display: none;
}

.mobilemenue {
  display: block;
  z-index: 190;
}

.logo {
  top: 0;
  left: 0;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
  position: fixed;
  max-height: 50px;
  z-index: 99;
}

.logo-img {
  width: 80px;
  display: block;
}

.impressum {
margin-top: 70px;
margin-left: 30vw;
margin-bottom: 130px;
position: relative;
z-index: 80;
font-size: 0.5em;
transform: rotate(0deg);
}

.sprachswitch-1 {
  margin-bottom: 60px;
  margin-left: 20px;
}

.sprachswitch-2 {
  left: 0;
  margin-bottom: 20px;
  margin-right: 0px;
  margin-left: 20px;
  text-align: left;
}

/* Index */

.index-image {
  margin-top: 10vh;
  width: 75vw;
  position: relative !important;
}

.sc-content img {
  width: 75vw;
}

.index-text {
  margin-top: 5vh;
  margin-left: 30vw;
  width: 60vw;
  position: relative;
}


/* Projekte */

.projekte {
  margin-top: 20vh;
  margin-left: 15vw;
  width: 75vw;
  margin-bottom: 100px;
}


/* About */

.about-grid {
  top: 0;
  margin-top: 20vh;
  margin-left: 15vw;
  width: 65vw;
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  column-gap: 10%;
}

.about-text {
  margin-top: 100px;
  margin-left: 15vw;
  margin-bottom: 150px;
  width: 65vw;
  position: relative;
}


/* Team */

.team-grid {
  top: 0;
  margin-top: 5vh;
  margin-left: 15vw;
  width: 75vw;
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  column-gap: 15%;
  margin-bottom: 120px;
}

img.team {
  width: 50vw !important;
  max-width: 800px;
  margin-top: 130px !important;
  margin-bottom: 20px !important;
}


/* Font */

p.navii {
font-size: 1.5em;
letter-spacing: 0.02em;
line-height: 1.05em;
}

.lang p.navii {
font-size: 1.5em;
letter-spacing: 0.02em;
line-height: 1.05em;
}

.de-active p.navii {
font-size: 1.5em;
letter-spacing: 0.02em;
line-height: 1.05em;
}

.en-active p.navii {
font-size: 1.5em;
letter-spacing: 0.02em;
line-height: 1.05em;
}

.de-inactive p.navii {
font-size: 1.5em;
letter-spacing: 0.02em;
line-height: 1.05em;
}

.en-inactive p.navii {
font-size: 1.5em;
letter-spacing: 0.02em;
line-height: 1.05em;
}


.desktop {
  display: none;
}

.mobile {
  display: block;
}

}