@charset "utf-8";

:root {
   --global-palette1: #AC8C66;
   --global-palette2:#CAAA84;
   --global-palette8:#f5f5f5;
}

/* ** Scrollbar ** */
/* scrollbar width */
::-webkit-scrollbar {width: 12px;}
/* Track Background */
::-webkit-scrollbar-track {background: var(--global-palette8); }
/* Handle main color */
::-webkit-scrollbar-thumb {background: var(--global-palette1);}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: var(--global-palette2);}
/* ** Scrollbar END ** */

html {box-sizing: border-box;}
*,
*::before,
*::after {
  box-sizing: inherit;
}
/* Trennzeichen - Zeilenumbruch per Gedankenstrich erzwingen */
body {
   hyphens: auto!important; 
   padding: 0; 
   margin: 0; 
   font-family: 'Lexend', sans-serif;
   font-weight: 400;
   font-size: 0.90rem;   
   overflow-x: hidden;
   overflow-y: scroll;}
/* Klasse ausblenden */
.unvis {display: none!important;}


#wrapper {
   background-image: url('../img/kueche-liberta.jpg');
   background-repeat: no-repeat;
   background-position: left top;   /* left top on desktop */
   min-height:1020px;             /* optional min height I Phone 5*/
   max-height: 1020px;
   width: auto;
   min-width: 100%;
   box-sizing: border-box;
   border:none;
   overflow: hidden;
 }
 
 #wrapper-light {
   background-image: url('../img/kueche-liberta-light.jpg');
   background-repeat: no-repeat;
   background-position: left top;  /* left top on desktop */
   min-height:1020px;             /* optional min height I Phone 5*/
   max-height: 1020px;
   width: auto;
   min-width: 100%;
   box-sizing: border-box;
   border:none;
   overflow-x: hidden;
   overflow-y: scroll;
 }

 .home {
   display: block;
   position: absolute;
   width: 268px;
   height: 44px;
   padding: 0;
   margin: 0 auto;
   text-align: center;
}
.home a {display: block; width: 100%; height: 100%;text-decoration: none;}

 .impressum {
    display: block;
    position: absolute;
    width: 61px;
    height: 59px;
    padding: 39px 0 0 0;
    margin: 0 auto;
    text-align: center;
}
.datenschutz {
   display: block;
   position: absolute;
   width: 61px;
   height: 59px;
   padding: 39px 0 0 0;
   margin: 0 auto;
   text-align: center;
}

.impressum a, .datenschutz a {
   display: block;
   width: 100%;
   height: 100%;
   font-weight: 500;
   font-size: 10px;
   letter-spacing: -0.5px;
   color: #f0f0f0;
   text-decoration: none;
   line-height: 12px;
   transition: all 0.4s ease-in-out;
}
.impressum a:hover, .datenschutz a:hover {
   text-decoration: underline;
}


.address {
    display: flex;
    flex-direction: row;
    position:absolute;
    font-weight: 300;
    color: #A4A4A4;
    background: rgba(255,255,255,0.10);
}

.address .right {
   display: block;
   text-align: right;
   width: auto;
}
.address .left {
   display: block;
   text-align: left;
   white-space: nowrap;
   min-width: 160px;
}

.address .right strong,
.address .left strong {
   font-weight: 500;
}

.address .left h1 {
   font-family: 'Lexend', sans-serif;
   font-size: 1.00rem;   
   font-weight: 600;
   margin: 0;
   padding: 0;
}
.address .left h1 span {
   font-family: 'Lexend', sans-serif;
   font-size: 0.90rem;   
   font-weight: 300;
   margin: 0;
   padding: 0;
}

.address a {
   font-weight: 300;
   color: #A4A4A4;
   text-decoration: none;
   transition: all 0.4s ease-in-out;
}
.address a:hover {
   font-weight: 500;
   color: #313131;
   text-decoration: underline;   
}

.content {
   position: absolute;
   display: block;
   top: 150px;
   left: 0;   
   padding: 1.00rem;
}

@media (min-width: 1921px) {
   .home {top: 28px; left: 160px;}
   .impressum {top: 78px; left: 165px;}
   .datenschutz {top: 78px; left: 231px;}
   .address {top:150px; left:640px; width:336px;}
   .content {margin: 0rem auto 1rem 5.00%; width: calc( 1277px - 10.00% );}
}
@media (max-width: 1920.98px) {
   .home {top: 28px; left: 160px;}
   .impressum {top: 78px; left: 165px;}
   .datenschutz {top: 78px; left: 231px;}
   .address {top:150px; left:640px; width:336px;}
   .content {margin: 0rem auto 1rem 5.00%; width: calc( 1277px - 10.00% );}
}


 /* Mobile: force 100vh height and shift focal point to 70% from left */
 @media (max-width: 1138.98px) {
   #wrapper,  #wrapper-light {
     height: 100vh;                /* full viewport height on phones */
     min-height:1022px;
     background-position: -120px center; /* horizontal focal point at 70% 230px*/
     overflow: hidden;
   }
   .home {left: 40px;}
   .impressum {top: 80px; left: 45px;}
   .datenschutz {top: 80px; left: 111px;}
   .address {top:150px; left:520px; width:336px;}
   .content {margin: 0rem auto 1rem 5.00%; max-width: calc( 100vw - 10.00% );}
 }

 @media (max-width: 835.98px) {
   .address {top:150px; left: calc( 100vw - 340px ); width:330px; background: rgba(255,255,255,0.90);}
   .content {margin: 0rem auto 1rem 17px; max-width: 800px;}
 }
 @media (max-width: 768.98px) {
   .content {margin: 0; max-width: 99.8vw; padding: 5px; }
 }

 @media (max-width: 441.98px) {
   .address {top:150px; left:20px; width: calc( 100vw - 40px); background: rgba(255,255,255,0.90);}
 }
 @media (max-width: 361.98px) {
   .address {top:150px; left: 10px; width: calc( 100vw - 20px); background: rgba(255,255,255,0.90);}
 }