/*
        FONTS

@font-face {
  font-family: Belgrano;
  src: url(fonts/Belgrano-Regular.ttf);
  font-weight: normal;
}
*/

@font-face {
  font-family: Outfit;
  src: url(fonts/Outfit-VariableFont_wght.ttf);
}

@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-Thin.ttf);
  font-weight: 100;
}
@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-ExtraLight.ttf);
  font-weight: 200;
}
@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-Light.ttf);
  font-weight: 300;
}
@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-Medium.ttf);
  font-weight: 500;
}
@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-SemiBold.ttf);
  font-weight: 600;
}
@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-Bold.ttf);
  font-weight: 700;
}
@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-ExtraBold.ttf);
  font-weight: 800;
}
@font-face {
  font-family: Outfit;
  src: url(fonts/static/Outfit-Black.ttf);
  font-weight: 900;
}

@font-face{
  font-family: Belgrano; 
  src: url(fonts/Belgrano-Regular.ttf);
  font-weight: 400;
}



/*
	CUSTOM VAR
*/

html{
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
  width: 0px;
}

:root{
    --object-fit: cover;
    --font-family: Outfit;
    --video-height: 800px;
    --stripe-size: 150px;
    --bottom-stripe: 60px;
    --black: #222110;
}

/*
        HTML Elemente
*/

em{
    white-space: nowrap;
    font-style: normal;
}

.pageParent{
  grid-row: 6 / span 1;
}

span.pageParentTitle{
  display: inline-block;
  font-size: 21px;
  padding-bottom: 5px;
  border-bottom: 2px solid white;
}



.pageTitleDiv{
  grid-row: 5 / span 2;
}

.pageTitleAlbumDiv{
  grid-row: 8 / span 1;
}

div#galleryControll{
  grid-row: 10 / span 1;
}

h1{
     display: inline-block;
     font-family: Outfit;
     font-size: 38px;
     letter-spacing: 4px;
     font-weight: normal;
     text-align: center;
     position: relative;
}

h1#pageTitle:before{
  content: "";
  position: absolute;
  width: 80%;
  height: 2px;
  bottom: -3px;
  left: 10%;
  border-bottom: 2px solid white;
}

h1#albumTitle{
  font-size: 44px;
  text-transform: uppercase;
  margin: 0;
}

h1#pageTitle{
  font-family: Belgrano;
}

h2{
     font-family: Outfit;
     font-size: 32px;
     letter-spacing: 4px;
    font-weight: normal;
}

h2.albumNameHeader{
     font-size: 28px;
     font-weight: normal;
     letter-spacing: 4px;
     color: #FFFFFF;
     text-transform: uppercase;
}
table{
     font-size: 21px;
     line-height: 42px;
     margin-left: -40px;
     margin-top: -60px;
}
p{
     font-family: Outfit;
     font-size: 21px;
     line-height: 42px;
     max-width: 876px;
     margin: 0 auto;
}

.rahmen{
  font-family: Belgrano;
}

.rahmen p{
    font-size: 18px;
    line-height: 25px;
}
p#contentField{
  font-size: 24px;
  grid-row: 7 / span 5;  
}


/*
	HTML Structure
*/

*{
	box-sizing: border-box;
}

body{	
    margin: 0;
    background-color: black;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--font-family);
}

.page{
    display: grid;
    min-height: 100vh;
    width: 100vw;
    background-color: black;
    grid-template-rows: 120px 1fr var(--bottom-stripe);
    max-height: 100vh;
    overflow-x: hidden;
    scrollbar-width: none;
    /*grid-template-columns: repeat(12, 1fr);*/

    scroll-behavior: smooth;
}

.page::-webkit-scrollbar {
  display: none;
  width: 0px;
}

#dynamic{
   margin-bottom: 240px;
}

/*
   NAVIGATION
*/

.navigation-bar{
     position: fixed;
     z-index: 9999;
     height: 120px;
     width: 100%;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     padding: 0 50px;
     background-color: var(--black);
}

.navigation-logo{
     align-self: center;
     justify-self: center;
     grid-column: 6 / 8;
}
.navigation-logo img{
     height: 98.97px;
}
#logoMenu{
     cursor: pointer;
}

.navigation-control{
  align-self: center;
  grid-column: 10 / 13;
  display: flex;
  font-size: 21px;
  justify-content: space-between;
  gap: 20px;
  margin-left: auto;
}

.navigation-lang-mob{
   display: none;
}

.navigation-reservation{
    align-self: center;
    grid-column: 1 / span 1;
    justify-self: end;
    color: white;
}

.navigation-reservation a{
    color: white;
    text-decoration: none;
}

.navigation-reservation a:hover{
    text-shadow: 1px 0px #ffffff;
}

.navigation-lang{
  align-self: center;
  grid-column: 2 /span 1;
  justify-self: end;
  color: white;
}
.navigation-lang a{
  color: white;
  text-decoration: none;
}

.navigation-lang a:hover{
  text-shadow: 1px 0px #ffffff;
}

.burgerContainer{
  align-self: center;
  grid-column: 3/ span 1;
  justify-self: end;
  position: relative;
  width: 30px;
  height: 36px;
}

.burgerContainer:hover{
  cursor: pointer;
}

.navigation-burger,
.navigation-burger::before,
.navigation-burger::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
  top: 8px;
  left: 0;
}

.navigation-burger::before {
  content: '';
  margin-top: 0px;
}

.navigation-burger::after {
  content: '';
  margin-top: 8px;
}

/*
  ************************************************************************
*/



/*
   Seiten-Inhalt
*/

.levels{
    /*
    grid-column: 1 / 13;
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    max-height: 100%;
    overflow: hidden;*/
    display: grid;
    width: 100vw;
}
.level-1{
    grid-area: 1 / 1 / 4 / 2;
    display: grid;
}

.background-1{
    grid-area: 1 / 1 / 4 / 2;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index:10;

    --videoRatio: calc(16 / 9);
    padding: 0;
    margin: 0;

    overflow: hidden;
    position: relative;
}

.level-2{
   display: grid;
   grid-area: 1 / 1 / 4 / 2;
   grid-template-rows: var(--stripe-size) 1fr 1fr var(--stripe-size);
   z-index:100;

   grid-auto-flow: row;
   grid-template-columns: repeat(12, 1fr);
}

.level-2 .background-2{
    grid-area: 1 / 1 / 5 / 13;
    /*background-image: linear-gradient(#707070, #000000);*/
    z-index: 200;
    backdrop-filter: brightness(0.85);
}

.level-2 .foreground-2{
    grid-area: 1 / 2 / 5 / 12;
    color: white;
    z-index: 300;
    position: relative;
}

.level-2 .foreground-2 > div:first-of-type{
    /*margin-top: calc(100vh - 890px)!important;*/
    display: grid;
    grid-template-rows: repeat(12, 1fr);
    height: 83vh;
    text-align: center;
}

.level-2 .foreground-2 > div.albumControll{
  display: grid;
  grid-template-rows: repeat(12, 1fr);
  height: 40vh;
  text-align: center;
}

.arrowDownWrap{
    /*margin-top: 50px;*/
    grid-row: 12 / span 1;
}

#arrowDown > svg{
/*
    transform: rotate(0deg);
    animation: wiggle 3000ms infinite;
*/
}

.svg-arrow{
   fill: transparent;
   width: 22px;
   stroke: white;
   stroke-width: 8px;
}


.navi-title{
    color: white;
    z-index: 1;
    align-self: end;
    margin-left: 100px;
    margin-bottom: 0px;
    font-size: 27px;
    font-weight: 500;
    letter-spacing: 4px;
}

.navigation-menu{
    display: none;
    height: calc(100% - 180px)!important;
}

.navigation-menu.active{
    display: block;
    position: fixed;
    z-index: 9999;
    width: 100%;
}

.navigation-menu[closing] ul{
     animation: fadeOutNavi 100ms forwards;
}


.navigation-menu[closing] #reservationsmenu{
     animation: fadeOutNavi 100ms forwards;
}

.navigation-menu-list{
   display: grid;
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   z-index: 2;
   background-color: black;
}

.navgation-menu-item{
    list-style: none;
    height: 100%;
    background-size: cover!important;
    background-repeat: no-repeat;
    grid-template-rows: calc(100% - 5px);
    display: grid;
}

.navgation-menu-item:hover{
    filter: brightness(1.1);
    cursor:pointer;
}

.navigation-menu-list a{
    text-decoration: none;
}

.navigation-menu-list :nth-child(1) li{
  background: url("images/WELCOME.jpg");
}

.navigation-menu-list :nth-child(2) li{
  background: url("images/HISTORY.jpg");
}

.navigation-menu-list :nth-child(3) li{
  background: url("images/GALLERY.jpg");
}

.navigation-menu-list :nth-child(4) li{
  background: url("images/EVENTS-CATERING.jpg");
}

.navigation-menu-list :nth-child(5) li{
  background: url("images/MENU.jpg");
}

.navigation-menu-list :nth-child(6) li{
  background: url("images/ABOUTUS.jpg");
}

iframe{
 /*background: url("images/iframe-background.png") center center no-repeat;*/
}



/*
#background-video{
	height: 100vh;
	width: 100vw;
	max-width: 1920px;
	object-fit: var(--object-fit);
	justify-self: center;
}*/

#background-video::-webkit-media-controls-fullscreen-button {
    display: none;
}

/*
     Balken
*/
.bottom{
    background-color: var(--black);
    z-index: 9999;
    position: fixed;
    
    width: 100%;
    height: var(--bottom-stripe);
    bottom: 0px;

    
   display: grid;
   align-content: center; 
   grid-auto-flow: column;
   align-items: center;
}

ul.footer{
   font-family: Outfit;
   font-size: 16px;
   color: white;
   flex-direction: row;
   justify-content: center;
   gap: 24px;
   opacity: 1;
   padding-left: 0px;

  display: flex;
  justify-self: center;
}

ul.rechtliches{
   font-family: Outfit;
   font-size: 16px;
   color: white;
   flex-direction: row;
   justify-content: center;
   gap: 24px;
   opacity: 1;
   padding-left: 0px;
   liste-style-type: none;

  display: flex;
  position: absolute;
  left: 50px;
  list-style-type: none;
}

.rechtliches a{
  color: #fff;
  text-decoration: none;
}

.rechtliches a:hover{
  text-shadow: 1px 0px #ffffff;
}

ul.footer li:first-child{
   list-style: none;
}

.footer a{
  color: #fff;
  text-decoration: none;
}

.socialFooter{
  position: absolute;
  height: var(--bottom-stripe);
  right: 50px;
  display: flex;
  gap: 5px;
  font-size: 25px;
  align-items: center;
  opacity: 1;
}

.socialFooter a{
  color: white;
}





/*
        Rahmen
*/

.rahmenWrap, .galleryWrap, .teamWrap{
   max-width: 1920px;
   margin: 0 auto;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   gap: 50px;
   margin-top: 240px;
}

.jobWrap{
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  margin-bottom: 100px;
  margin-top: 240px;
}

.jobInserat{
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   align-items: center;
   padding: 25px 0px;
}
.jobInserat:hover{
   background-color: rgba(255, 255, 255, 0.1);
}

.jobInserat a{
   color: white;
   text-decoration: none;
   font-weight: bold;
   font-size: 21px;
}

.jobsButton{
   font-size: 28px;
   color: white;
   text-decoration: none;
}

.galleryWrap{
   margin-bottom: 240px;
}

.rahmen{
   max-width: 653px;
   min-height: 462px;
   height: auto;
   width: 100%;
   background-repeat: no-repeat;	
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   text-align: center;
   margin-top: 60px;
}

.zusatzImg{
   height: auto;
   width: auto;
   background-repeat: no-repeat;
   margin-top: 60px;
   align-self: flex-start;
   max-width: 100%;
}

.zusatzImg:only-of-type{
   align-self: center;
}

.rahmen p a{
   color: white;
   text-decoration: none;
   white-space: nowrap;
}

.V1{
   /*background-image: url("images/rahmen/RAHMEN-1.svg");*/
   border: 80px solid;
   border-image-source: url("images/rahmen/RAHMEN-1.svg");
   border-image-slice: 80 fill;
   border-image-repeat: round;
}
.V2{
     /* background-image: url("images/rahmen/RAHMEN-2.svg");*/
   border: 80px solid;
   border-image-source: url("images/rahmen/RAHMEN-2.svg");
   border-image-slice: 80 fill;
   border-image-repeat: round;
}
.V3{
   /*background-image: url("images/rahmen/RAHMEN-3.svg");*/
   border: 80px solid;
   border-image-source: url("images/rahmen/RAHMEN-3.svg");
   border-image-slice: 80 fill;
   border-image-repeat: round;
}
.V4{
   /*background-image: url("images/rahmen/RAHMEN-4.svg");*/
   border: 80px solid;
   border-image-source: url("images/rahmen/RAHMEN-4.svg");
   border-image-slice: 80 fill;
   border-image-repeat: round;
}
.V5{
   /*background-image: url("images/rahmen/RAHMEN-5.svg");*/
   border: 80px solid;
   border-image-source: url("images/rahmen/RAHMEN-5.svg");
   border-image-slice: 80 fill;
   border-image-repeat: round;
}



.rahmen p a[href$=".pdf"]{
  color: white;
  text-decoration: none;
  font-size: 38px;
  font-weight: normal;
  letter-spacing: 4px;
  line-height: 52px;
  white-space: break-spaces;
}
.rahmen p a[href$=".pdf"]::after{
  content: "(PDF)";
  display: block;
  white-space: break-spaces;
  font-size: 18px;
}


/*
        Zusatz-Inhalt
*/
.zusatzInhaltWrap{
   max-width: 1920px;
   margin: 0 auto;
   margin-top: 200px;
   margin-bottom: 50px;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: center;
   gap: 50px;
   margin-top: 240px;
}

.zusatzInhalt{
   align-self: center;
   display: flex;
   flex-direction: row;
   gap: 50px;
   width: 100%;
   justify-content: space-evenly;

   line-height: 32px;
   text-align: center;
   margin-top: 60px;
   flex-wrap: wrap;
}

.break{
   flex-basis: 100%;
}

.zusatzInhalt p{
   text-align: center;
   line-height: 42px;
}

.reservationsBtn{
    display: none;
}

.zusatzInhalt p > a, .zusatzInhalt p > em > a{
    color: white;
    text-decoration: none;
}

.zusatzInhalt a:hover, .rahmen a:hover, .footer a:hover{
    text-shadow: 1px 0px #ffffff;
}

/*
.zusatzInhalt.history{
   flex-direction: column;
}*/

.zusatzInhalt.history h1{
   text-align: center;
}

a.reservationsbutton{
   color: white;
   text-decoration: none;
   width: 100%;
   font-size: 24px;
}
a.reservationsbutton span{
   margin-left: 9px;
}

a.reservationsbutton:after {
    content: "";
    width: 100%;
    display: block;
    height: 100px;
    background:url("images/RESERVATIONSBUTTONGENERELL.svg") no-repeat;
    background-position: center bottom;
    margin-top: -60px;
}

a#reservationsmenu{
  position: fixed;
  bottom: calc((100% - 180px) / 6)!important;
  right: 120px;
  opacity: 1;
}

.reservationsWrap{
  margin-top: 250px;
}

a.reservationsLink{
  color: white;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;   
/*
  transform: rotate(0deg);
  animation: wiggle 3000ms infinite;
*/
}

a.reservationsLink:hover{
   scale: 1.2;
}

a.reservationsLink span{
  font-size: 27px;
  margin-left: 3px;
}

a.reservationsLink:after {
  content: "";
  width: 330px;
  display: block;
  height: 100px;
  background: url("images/RESERVATIONMENU.svg") no-repeat;
  background-position: center bottom;
  margin-top: -50px;
/*
    transform: rotate(0deg);
    animation: wiggle 3000ms infinite;
*/
}

/*
        Team
*/

.team{
   display: flex;
   flex-direction: column;
}
.team img{
   margin-bottom: 15px;
   width: 100%;
   height: auto;
}
.team p{
   width: 85%;
   text-align: left;
   line-height: 21px;
}
.team p:nth-of-type(2){
   font-size: 16px;
}

/*
        Gallery
*/


.galleryAlbum{
  text-transform: uppercase;
}

.galleryAlbum a, a.sitelink{
   font-size: 38px;
   color: white;
   text-decoration: none;
}

.galleryAlbumDetail{
   margin-top: 60px;
   margin-bottom: 120px;
   display: flex;
   flex-wrap: wrap;
   gap: 25px;
   justify-content: center;
}

#galleryControll{
   display: flex;
   justify-content: center;
   text-transform: uppercase;
}

.space{
  width: 50px;
}

#galleryControll a{
   display: flex; 
   color: white;
   align-items: center;
   text-decoration: none;
   font-size: 25px;
}

.gallery-cell{
   display: flex;
   flex-direction: column;
   text-align: center;
}

.gallery-cell, .gallery-cell img{
   /*max-width: 480px;*/
}

.galleryDownload{
  width: 100%;
  background-color: white;
  padding: 5px;
  color: black;
  text-decoration: none;
}

.galleryDownload:hover{
  text-decoration: underline;
}

.sl-close{
   top: 150px!important;
}

/*
	Helpers
*/

.justifyright{
    text-align: right;
}
.justifyleft{
    text-align: left;
}
.hidden{
	filter: blur(20px)!important;
	z-index: -1;
}

.deco{
        gap: 0px;
}

.deco img{
        /* bildlinks, bildrechts anhängen
        background-color: black;*/
}

.deco::before{
content: '';
display: block;
background: url("images/BILD.LINKS.svg") center center no-repeat;
width: 24px;
margin-right: -12px;
z-index: 9999;
}

.deco::after{
content: '';
display: block;
background: url("images/BILD.RECHTS.svg") center center no-repeat;
width: 24px;
margin-left: -12px;
z-index: 9999;
}

/*
      ALENO
*/
iframe.aleno-reservations {
  border: none;
  bottom: 0;
  height: 100%;
  left: 0;
  min-height: 400px;
  min-width: 300px;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 2147483647;
}

iframe.aleno-reservation .ui.dimmer{
  background: none!important;
}

#aleno-popup + .ui.dimmer .popup-modal{
    background: red!important;
}


/*
       Animation
*/

@keyframes fadeOutNavi{
    0%{
    opacity: 1;
    }

    100%{
    opacity: 0;
    }
}
/*
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}*/



@media(max-width: 1500px) {

#openinghours{
     width: 45%!important;
}
    .navigation-control{
        grid-column: 8 / 13;
    }

}

@media(max-width: 1050px) {
  .zusatzInhalt > p > br, .rahmen p br{
    display: none;
  }
  h1#albumTitle{
  font-size: 36px;
  text-transform: uppercase;
  margin: 0;
 }
}

@media(max-width: 950px) {


  ul.footer{
    justify-content: left;
  }
  .socialFooter{
    right: 10px;
  }
}

@media(max-width: 850px) {

.jobInserat a{
   font-size: 18px;
}

#openinghours{
     width: 100%!important;
}

  p#contentField{
    font-size: 21px;
  }
}

@media(max-width: 800px) {


  

  .level-2 .foreground-2 > div:first-of-type{
    height: 75vh;
  }
  .level-2 .foreground-2 > div.albumControll{
    height: 40vh;
  }

  .pageTitleDiv{
    grid-row: 1 / span 1;
  }
  p#contentField{
    grid-row: 2 / span 5;
  }
  .arrowDownWrap{
    grid-row: 10 / span 1;
    margin-top: 30px;
  }

   .level-2 .foreground-2 > div:first-of-type{
      /*margin-top: calc(100vh - 700px) !important;*/
    }

    .reservationsBtn{
        background-color: var(--black);
        position: fixed;
        width: 100%;
        height: 102px;
        bottom: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 9999;
        color: white;
        opacity: 1;
    }
    .reservationsBtn a{
        align-self: center;
        color: white;
        text-decoration: none;
    }
    
    a.sitelink{
        font-size: 21px;     
    }
    p#contentField{
        font-size: 18px;
        line-height: 23px;
        text-align: center;
    }

    .navi-title{
        text-align: center;
        margin-left: 0;
        align-self: center;
        font-weight: 500;
    }
    #reservationsmenu{
        display: none;
    }

    .navigation-menu{
        height: calc(100% - 222px)!important;
    }
    
    .navigation-lang-mob{
           grid-column: 1/5;
           align-self: center;
           display: block;
           color: white;
           margin-left: -30px;
    }
    
    .navigation-lang-mob a{
        text-decoration: none;
        color: white;
    }
    
    
    .navigation-reservation{
        display: none;
    }

    #background-video{
        object-fit: contain;   
    }
    
    #galleryControll a{
        font-size: 18px;
    }
    
    .navigation-lang{
        display: none;
    }

    .navigation-control{
        margin-right: -30px!important;
    }
   .zusatzInhalt{
      flex-direction: column;
      gap: 0px;
    }
    .bottom{
        height: 190px;
        position: relative!important;
        grid-auto-flow: row;
        gap: 0px;
    }
    .rechtliches{
        position: relative!important;
        left: 0px!important;
        order: 1;
    }
    .socialFooter{
       position: relative!important;
    }
    ul.footer{
        flex-direction: column;
        list-style: none;
        gap: 5px;
    }
    h1{
        font-size: 26px;
        letter-spacing: 1px;
    }
    p{
        font-size: 18px;
    }
    .zusatzInhaltWrap{
        margin-bottom: 120px;
    }
    .zusatzInhalt{
        width: 100%;
    }
    .galleryAlbum a{
      font-size: 21px;
    }

    .rahmen{
        margin-top: 50px;
        min-height: 275px;
    }
    .rahmen p{
        font-size: 18px;
        line-height: 23px;
        width: 90%!important; 
    }
    .rahmen p a[href$=".pdf"]{
        font-size: 21px;
        line-height: 42px;
    }
 
      
    .zusatzImg{
        height: auto;
        align-self: center;
    }
    .zusatzInhalt img{
        max-width: 100%;
        object-fit: contain;
    }

    .galleryAlbumDetail{
        flex-direction: column;
    }
    .galleryAlbumDetail img{
        max-width: 100%;
    }
   .V1{
     border: 40px solid;
     border-image-source: url("images/rahmen/RAHMEN-1.svg");
     border-image-slice: 40 fill;
     border-image-repeat: round;
   }
.V2{
   border: 40px solid;
   border-image-source: url("images/rahmen/RAHMEN-2.svg");
   border-image-slice: 40 fill;
   border-image-repeat: round;
}
.V3{
   border: 50px solid;
   border-image-source: url("images/rahmen/RAHMEN-3.svg");
   border-image-slice: 40 fill;
   border-image-repeat: round;
}
.V4{
   border: 40px solid;
   border-image-source: url("images/rahmen/RAHMEN-4.svg");
   border-image-slice: 40 fill;
   border-image-repeat: round;
}
.V5{
   border: 40px solid;
   border-image-source: url("images/rahmen/RAHMEN-5.svg");
   border-image-slice: 40 fill;
   border-image-repeat: round;
}

.socialFooter{
   align-items: center;
   justify-content: center;
   height: 20px;
   position: 
}
}

}


@media(max-width: 320px) {
    
  .level-2 .foreground-2 > div:first-of-type{
      /*margin-top: calc(100vh - 500px) !important;*/
  }
  p{
      font-size: 16px;
  }  
  .rahmen p{
      font-size: 16px;
  }
  
  ul.footer{
      padding-left: 10px;
  }
  .socialFooter{
      right: 5px;
      align-items: center;
  }
  .navi-title{
      font-size: 24px;
  }
  
}


.level-1 {
 /* CHANGE THIS IF THE VIDEO CHANGES */
/*
     --videoRatio: calc(16 / 9);
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 70vh;
    overflow: hidden;
    position: relative;
*/
}



/* to start with assume that the viewport is wide enough for the video taking up full width the height will be at least 100vh */
iframe {
    padding: 0;
    margin: 0;
    position: relative;
    --w: 130vw;
    --h: calc((var(--w) / var(--videoRatio)));
    height: var(--h);
    width: var(--w);
    top: calc(50% - (var(--h) / 2));
    left: -15vw;
    width: var(--w);
    height: var(--h);
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 16/9) {/*the viewport is too narrow for the full video */
  iframe {
    --h: 100vh;
    --w: calc(var(--h) * var(--videoRatio));
    top: 0;
    left: calc(50% - (var(--w) / 2))!important;
  }
}

#install-button{
   display: none!important;
}
.hidden{
   display: none!important;
}
span.trennzeichen{
   margin: 0 5px 0 5px;
}
span.trennzeichen-en{
   margin: 0 5px 0 5px;
}
span.uhrzeit{
   float: right;
}
span.ruhetag{
   float: right;
}