/*	Author: Sascha Milivojevic (info@hey-sascha.de):
   
		------------------------------------------------------
   
		B On AIR v1 stylesheet
  
		----------------------------------------------------*/
		
/*	CSS Imports
  
		----------------------------------------------------*/
        
@import url('fonts/fonts.css');

/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #A41916;
    color: #FDFDFD;
    text-shadow: none;
}

::selection {
    color: #FDFDFD;
    background: #A41916;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

  
html, body {
  width: 100% !important;
  margin: 0  !important;
  padding: 0  !important;
}

@media screen and (max-width: 780px) {
html, body {
  position: relative;
  overflow-x:hidden;}
}

@supports (-webkit-overflow-scrolling: touch) {
html, body {
  position: relative;
  overflow-x:hidden;} 
}

body {
  overflow-x: hidden;
}
  
div img, figure img {
  max-width: 100%;
  width: auto\9; /* ie8 */} 
  
video {
  /* override other styles to make responsive */
  width: 100%    !important;
  height: auto   !important;
}
audio::-webkit-media-controls-panel {
  background-color: #ed812c;
} 
audio::-webkit-media-controls-play-button {
  background-color: #FFF;
  border-radius: 50%;}
audio::-webkit-media-controls-current-time-display {
  color: #000;
}
audio::-webkit-media-controls-time-remaining-display {
  color: #000;
}
audio::-webkit-media-controls-mute-button {
color: #000;
  
}
/* ==========================================================================
   COLORS
   ========================================================================== */
body, .headroom, .call-to-action, .infobox .content, .bonus, footer {background-color:#FDFDFD; }

body, p, h3 { color: #000;} 
.wortmarke, h2, h4, h5, h6 { color: #000; } 
ul.kontakt { margin: 0; padding: 0;}
main a, footer a, .menu a { color:#ed812c; text-decoration: none; position: relative; }
footer a { color:#fff; text-decoration: none; position: relative; }
main a:after, footer a:after, .menu a:after {
    content:"";
    width: 0%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ed812c;
    z-index: -1;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 0.5s ease-in-out;}
main a:hover:after, footer a:hover:after, .menu a:hover:after { width: 100%; }
.submenu li a, .copyright a { color: #000; }


.menu ul li a {color: #000; }
#hamburger-icon span { background-color: #000000; }
.navigationn ul li a, .language-switcher a, .language-switcher { color:#000;}
.stoerer { 
    width: 55px;
    height: 50px;
    padding: 10px 5px 15px 5px;
    position: fixed; 
    right: -30px;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: #ed812c;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;  }
  
.stoerer:hover {width: 66px; right: -33px;}
.stoerer img {  margin: 10px 0; }
.boaicon2 { width: 40px; margin: 0 10px;}
/* ==========================================================================
   Fontstyling
   ========================================================================== */
body { font-family:"Open Sans", sans serif; font-size: 100%;}
 
h1, h2, h3, h4, h5, h6, strong, b, .button { font-weight: 500; line-height: 1.3em; width: 100%;} 
i, em, blockquote, .language-switcher a.active, .menu ul li.current_page_item a  { font-style: normal;} 
p { font-weight: 400;}
h1, h2 { font-size: 2.3vw; font-weight: 500; }

h2 { margin-bottom: 0.5em; color: #ed812c; }
.news h2 { text-align: center;}
h3 {font-size: 1.7vw;  }
p, div, main li, h4, h5 { font-size: 1.4vw;}
p { margin-top: 0 !important;}
.menu ul li, .language-switcher { font-size: 24px;}
footer p { font-size: 18px;}
h5, h6 { margin: 0 0 25px 0; }
.menu h5 { color: #ed812c;}
h6 { font-size: 14px; color: #ed812c;}
.slogan blockquote { font-size: 3.3vw; text-align: center;}
.ticker-item h1 { font-weight: 400; font-size: 75px;}
.ticker-item h2 { font-weight: 400; font-size: 75px;  border: none; }
.ticker-item h1, .ticker-item h2 {
  line-height: 1em;
  margin: 0;
  color: #FFF;}


@media screen and (max-width: 1680px) {
h1, h2, .slogan blockquote { font-size: 38px;}
p, div, main li, h3, h5 { font-size: 28px;}
}

@media screen and (max-width: 780px) {
h1, h2, .slogan blockquote { font-size: 35px;}
p, div, main li, h3, h5 { font-size: 26px;}
.ticker-item h1, .ticker-item h2 { font-size: 45px;   }
.menu ul li, .language-switcher { font-size: 20px;}
} 

@media screen and (max-width: 480px) {
h1, h2, .slogan blockquote { font-size: 31px;}
p, div, main li, h3, h5 { font-size: 23px;}
.ticker-item h1, .ticker-item h2 { font-size: 45px;   }
.menu ul li, .language-switcher { font-size: 20px;}
}  

/* ==========================================================================
   Flex Layout
   ========================================================================== */
.flex-row, .flex-column, .flex-row-reverse, .flex-column-reverse { display: flex; flex-wrap: wrap;}   
.flex-row { flex-direction: row; }
.flex-row-reverse  { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }
/* 
 justify-content
 This defines the alignment along the main axis. -> horizontal zueinander
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right
*/
.j-center { justify-content: center; }
.j-start { justify-content: flex-start; }
.j-end { justify-content: flex-end; }
.j-between { justify-content: space-between; }
.j-evenly { justify-content: space-evenly; }
.j-around { justify-content: space-around; }
/* 
 align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line. -> zueinander in der gleichen Zeile/Spalte bei unterschiedlicher Containerhöhe
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline 
*/
.ai-stretch { align-items: stretch; }
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.ai-end { align-items: flex-end; }
.ai-baseline { align-items: baseline; }
/* 
 align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline 
*/
.ac-stretch { align-content: stretch; }
.ac-center { align-content: center; }
.ac-start { align-content: flex-start; }
.ac-end { align-content: flex-end; }
.ac-baseline { align-content: baseline; }
.ac-between { align-content: space-between; }
.ac-evenly { align-content: space-evenly; }
.ac-around { align-content: space-around; }

/* ==========================================================================
   Position
   ========================================================================== */

.relative { position: relative; }
.sticky { position: -webkit-sticky; position: sticky; top: 0; }
.fixed { position: fixed; }
.absolute { position: absolute;}

/* ==========================================================================
   Flexbox Spalten Layout
   ========================================================================== */
  .einspaltig>.grid-item { flex-basis:100%; }
 .zweispaltig>.grid-item { flex-basis:48%; }
 .dreispaltig>.grid-item { flex-basis:30.66%;}
 .vierspaltig>.grid-item { flex-basis:25%; }              
.fuenfspaltig>.grid-item { flex-basis:20%;}

.zweispaltig.asymetric>.grid-item:nth-child(even) { flex-basis: 30%;}
.zweispaltig.asymetric>.grid-item:nth-child(odd) { flex-basis: 66%;}
 
.zweispaltig.asymetric2>.grid-item:nth-child(even) { flex-basis: 66%;}
.zweispaltig.asymetric2>.grid-item:nth-child(odd) { flex-basis: 30%;}

.zweispaltig.asymetric3>.grid-item:nth-child(even) { flex-basis: 75%;}
.zweispaltig.asymetric3>.grid-item:nth-child(odd) { flex-basis: 24%;}

.zweispaltig.asymetric4>.grid-item:nth-child(even) { flex-basis: 24%;}
.zweispaltig.asymetric4>.grid-item:nth-child(odd) { flex-basis: 75%;}

@media screen and (max-width: 104em) {.fuenfspaltig>.grid-item { flex-basis:25%; } }
@media screen and (max-width: 94em) { .fuenfspaltig>.grid-item, .vierspaltig>.grid-item { flex-basis:33.33%; } }
@media screen and (max-width: 79em) { 
.fuenfspaltig>.grid-item, 
.vierspaltig>.grid-item, 
.dreispaltig>.grid-item, 
.zweispaltig.asymetric3>.grid-item:nth-child(even),
.zweispaltig.asymetric4>.grid-item:nth-child(odd) { flex-basis: 72%;}
.zweispaltig.asymetric3>.grid-item:nth-child(odd) { flex-basis: 19%;}
.zweispaltig.asymetric>.grid-item:nth-child(even) { flex-basis: 40%;}
.zweispaltig.asymetric>.grid-item:nth-child(odd) { flex-basis: 75%;} 
.zweispaltig.asymetric2>.grid-item:nth-child(even) { flex-basis: 75%;}
.zweispaltig.asymetric2>.grid-item:nth-child(odd) { flex-basis: 40%;} }


@media screen and (max-width: 63em) { 
.zweispaltig.asymetric>.grid-item:nth-child(even) { flex-basis: 66%;}
.zweispaltig.asymetric>.grid-item:nth-child(odd) { flex-basis: 100%;}
 
.zweispaltig.asymetric2>.grid-item:nth-child(even) { flex-basis: 100%;}
.zweispaltig.asymetric2>.grid-item:nth-child(odd) { flex-basis: 66%;}

.zweispaltig.asymetric3>.grid-item:nth-child(even) { flex-basis: 100%;}
.zweispaltig.asymetric3>.grid-item:nth-child(odd) { flex-basis: 50%;}

.zweispaltig.asymetric4>.grid-item:nth-child(even) { flex-basis: 50%;}
.zweispaltig.asymetric4>.grid-item:nth-child(odd) { flex-basis: 100%;}
}
@media screen and (max-width: 49em) {
 .zweispaltig>.grid-item { flex-basis:100%; }
 .zweispaltig.asymetric>.grid-item:nth-child(even) { flex-basis: 100%; margin-top: 20px;}
.zweispaltig.asymetric>.grid-item:nth-child(odd) { flex-basis: 100%;}
 
.zweispaltig.asymetric2>.grid-item:nth-child(even) { flex-basis: 100%;}
.zweispaltig.asymetric2>.grid-item:nth-child(odd) { flex-basis: 66%;}

.zweispaltig.asymetric3>.grid-item:nth-child(even) { flex-basis: 100%;}
.zweispaltig.asymetric3>.grid-item:nth-child(odd) { flex-basis: 50%;}

.zweispaltig.asymetric4>.grid-item:nth-child(even) { flex-basis: 50%;}
.zweispaltig.asymetric4>.grid-item:nth-child(odd) { flex-basis: 100%;}
 }

/* ==========================================================================
   White Space Padding Margins
   ========================================================================== */
.lytpadding { padding: 24px; }    
.txtpadding { padding-left: 24px; padding-right: 24px; }
@media screen and (max-width: 48em) { 
.txtpadding { padding-left: 12px; padding-right: 12px; }
.lytpadding { padding: 12px; } 
}

.whiteSpace { margin: 15vh 0; }
.whiteSpaceTop { margin-top: 15vh; }
.whiteSpaceBottom { margin-bottom: 15vh; }

figure { margin: 0 0 1.5em 0; padding: 0;}
h1, h2, h3, h4, h5, h6 { margin-top: 0;}
.news h3.title { margin-bottom: 10px;}
.newshead span.date { margin-bottom: 10px; }
.newshead span.category { margin-bottom: 5px; }
/* ==========================================================================
   Layout Wrapper
   ========================================================================== */
.border-red {border: 1px solid red;}
.border-red-top {border-top: 1px solid red;}
.border-blue {border: 1px solid blue;}
.border-blue-top {border-top: 1px solid blue;} 
.border-white {border: 1px solid white;}
.border-white-top {border-top: 1px solid white;}
.border-black {border: 1px solid black;}
.border-black-top {border-top: 1px solid black;}  

/* ==========================================================================
   Horizontal Scroll
   ========================================================================== */
/*
.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto; }

.scrolling-wrapper-flexbox > .card {
    flex: 0 0 auto;}

.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;}
 
*/

/* ==========================================================================
   Layout Wrapper
   ========================================================================== */
.page {
  width: 100%;
  padding: 0 60px 45px 60px;
  margin: 0 auto;
  /*transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);*/
}
    
.page.pushed { height: 100vh; overflow-y: hidden; border-bottom: 1px solid red;}
  
@media screen and (max-width: 680px) { 
.page {   padding: 0 15px 45px 15px; } 
}



/*  .page.pushed { margin-top: 350px;}    */
     
/* ==========================================================================
   Layout Header
   ========================================================================== */    
header { 
  width: 100%; 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;}
      


.opener {
  cursor: pointer;
  z-index: 9999;
  width: 45px;
  height: 30px;
  position: relative;}
  
.bildmarke {
    width: 105px;
    z-index: 9999;}
    
.wortmarke {
    padding-right: 35px;}
.ticker-wrap {
  height: auto;
  z-index: 8999;
  margin: 0; 
  padding: 0;
  position: absolute;
  bottom: 40px; }

.ticker {
    
  width: 100vw;
  display: inline-block; 
  white-space: nowrap;
  padding-right: 0;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite; 
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: ticker;
          animation-name: ticker;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;}

.ticker-item {
  display: inline-block;
  padding: 0px;
  margin: 0;}


    
@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(90%, 0, 0);
    transform: translate3d(90%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-3900px, 0, 0);
    transform: translate3d(-3900px, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(90%, 0, 0);
    transform: translate3d(90%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-3900px, 0, 0);
    transform: translate3d(-3900px, 0, 0);
  }
}  
  
/* ==========================================================================
   Layout Main
   ========================================================================== */
main {}

.intro { 
    width: 100%;
    height: calc(100vh - 130px);
    z-index: -1;
    padding: 0;
    margin-bottom: 10rem;
    position: relative;}
    
.claim {margin-bottom: 10rem;}
.imagefilm, .service { margin-bottom: 15rem;}
.first { margin-top: 10vh; margin-bottom: 5vh;}
.grafikpa, .content { margin-bottom: 5vh;}
.intro img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
  
.vita {
    margin-top: 60px;
    }
    
section { width: 100%; }

@media screen and (max-width: 680px) { 
.intro { height: 75vh; margin-bottom: 40px;}
.claim {margin-bottom: 40px;}
.imagefilm, .faq { margin-bottom: 60px;}
.first { margin-top: 40px; margin-bottom: 20px;}
.grafikpa, .content { margin-bottom: 40px;}
.bildmarke {  width: 90px;}
}

/* ==========================================================================
    Panel
   ========================================================================== */  
.accordion-btn { width: 100%; cursor:pointer; padding: 10px 0; }
.accordion-btn h3 { color: #000; margin: 0; padding: 10px 0; font-weight: 400; border-bottom: 0px solid #eee;}
.accordion-btn h3:after {
    content: "+";
    font-size: 1em;
    font-weight: 100;
    color: #ed812c;
    float: right;
    margin-left: 5px;
    font-weight: 700;
}
.accordion-btn.active h3:after {
    content: "-";
}

/* Panel Styles */
.panel {
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 0.5s all ease-in-out;
  opacity: 0;}

/* Show Panel onclick */
.panel.show {
  opacity: 1;
  height: auto;
  padding: 25px 0;}
  
@media screen and (max-width: 680px) { 
.accordion-btn {padding: 0px; }
}

/* ==========================================================================
    carousel
   ========================================================================== */
.carousel { position: relative; width:100%; padding: 40px 0; background-color: #FFF;}

.carousel-cell {
  width: 100%;
  height: auto;
  margin-right: 20vw;
}

.carousel-cell .audio {
    width: 50%;
    text-align: center;
    margin: 0 auto;
}

@media screen and (max-width: 680px) { 
.carousel-cell .audio { width: 75%; }
}

.carousel-cell h3 { text-align: center; }

/* no circle */
.flickity-button, .flickity-button:hover {
  background: #ed812c;
}
/* big previous & next buttons */
.flickity-prev-next-button {
  width: 70px;
  height: 70px;
}
/* icon color */
.flickity-button-icon {
  fill: #FFF;
}
/* hide disabled button */
.flickity-button:disabled {
  display: none;
}

.probeicon { width: 90px; margin: 0 auto 25px auto;}
@media screen and (max-width: 680px) { 
.flickity-prev-next-button {
  width: 40px;
  height: 40px;
}
.flickity-prev-next-button.next { right: -10px;}
.flickity-prev-next-button.previous {left: -10px;}
}
     
/* ==========================================================================
   Layout Footer
   ========================================================================== */ 
footer { 
padding: 50px 15px;
width: 100%;
background-color: #C36925;}

footer p { color: #FFF; text-align: center; line-height: 3em;}


/* ==========================================================================
   Animated Hamburger Icon Version 1
   ========================================================================== */  
#hamburger-icon {
  width: 45px;
  height: 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}       
  
#hamburger-icon span {
  display: block;
  height: 6px;
  width: 100%;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;}

#hamburger-icon.open span {
  -webkit-box-shadow: 0 0 0 0;
  -moz-box-shadow: 0 0 0 0;
  box-shadow: 0 0 0 0;}

#hamburger-icon span:nth-child(1) { top: 0px;}
#hamburger-icon span:nth-child(2),#hamburger-icon span:nth-child(3) { top:13px; }
#hamburger-icon span:nth-child(4) { top: 26px; }

#hamburger-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%; }
  
#hamburger-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  }

#hamburger-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

}

#hamburger-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;  }  
    
/* ==========================================================================
   animated hamburger icon  Version 2
   ========================================================================== */ 
#hamburger-icon2 {
  width: 23px;
  height: 23px;
  margin: 0 auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer; }
  
#hamburger-icon2 span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;}
  
  #hamburger-icon2.open span {
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;}
  
  #hamburger-icon2 span:nth-child(1) {
    top: 0px;
    left: 0; }
  
  hamburger-icon2 span:nth-child(2), #nav-icon3 span:nth-child(3) {
    top:7px;
    left: -10px; }
  
  #hamburger-icon2 span:nth-child(4) {
    top: 14px;
    left: 0; }
  
  #hamburger-icon2.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;}
    
.opener:hover #hamburger-icon2 span:nth-child(2), 
.opener:hover #hamburger-icon2 span:nth-child(3) {
    left: 0;}
  
  #hamburger-icon2.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  #hamburger-icon2.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  
  #hamburger-icon2.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
    
/* ==========================================================================
   animated hamburger icon  Version 2
   ========================================================================== */

nav.menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: auto;
    min-height: 100vh;
    padding: 60px 0;
    background-color: #FEFEFE;
    z-index: 21;
    transform: translateX(105%);
    transition: transform .8s cubic-bezier(.25,.05,.1,.94);
    z-index:9990;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}   
  
nav.menu.expanded { 
  transform: translateX(0);}
  
nav.menu .grid-item { padding: 0 10%; }
  
nav.menu ul {
  z-index: 9999;
  width: 100%; 
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: flex-start;       
  padding:0;
  margin: 0;}
  
nav.menu ul ul {
   display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: start; 
  margin-bottom: 20px;   }
  
nav.menu ul li{
  width: 100%;
  line-height: 1.85em;
  text-align: left;
  list-style: none; }
  
ul.hidden { display: none;}
  
.language-switcher {
  width: 100%;
  padding: 25px 0;}

.language-switcher a {
  text-decoration: none;}

nav.menu ul.kontakt { margin-top: 0px;}

@media screen and (max-width: 680px) { 
nav.menu { width: 100%; }
}

.menu-hauptnavigation-container { width: 100%; }