@font-face {
  font-family: "Rubik";
  font-weight: 100 900;
  src:
    local('Rubik'),          
    local('Rubik-Light'),
    url("../font/Rubik-VariableFont_wght.woff2") format("woff2 supports variations"),
    url("../font/Rubik-VariableFont_wght.woff2") format("woff2-variations");
    font-display: swap;
}

@font-face {
  font-family: "Geist";
  font-weight: 100 900;
  src:
    local('Geist'),          
    local('Geist Regular'),
    url("../font/Geist-VariableFont_wght.woff2") format("woff2 supports variations"),
    url("../font/Geist-VariableFont_wght.woff2") format("woff2-variations");
    font-display: swap;
}

:root{
  
  --c-primary:          hsl(40, 63%, 84%);
  --c-secondary:        #f8f8f8;
  --c-contrast:         #28719f;
  --c-secondary-dark:   hsl(346 100% 11%);
  --c-secondary-light:  hsl(346 100% 21% / 0.2);
  --c-dark:             hsl(0, 0%, 15%);
  --c-dark-light:       hsl(0, 0%, 9%);
  --c-light:            hsl(33, 29%, 94%);

  --c-btn-primary:    hsl(4, 28%, 46%);
  --c-btn-secondary:  hsl(4, 28%, 20%);
  
  --font-rubik:     1rem "Rubik", sans-serif;
  --font-geist:     1rem "Geist", sans-serif;

  --b-radius-l:   1rem;
  --b-radius-m:   0.5rem;
  --b-radius-s:   0.25rem;

  --distance-xxl: 3.6rem;
  --distance-xl:  2.4rem;
  --distance-l:   1.2rem;
  --distance-m:   0.8rem;
  --distance-s:   0.4rem;
  --distance-xs:  0.2rem;

  --card-prizes-height: 5rem;

  --skew-deg: 2.075deg; 
}

*, 
*::before, 
*::after{ 
  box-sizing: border-box;
  margin:0;
}

img, 
picture, 
video, 
canvas, 
svg{
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select{
  font: inherit;
  border:none;
  outline:none;
}

:focus:not(:focus-visible) {
  outline: none;
}

a{
  text-decoration:none;
  color:var(--c-contrast);
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6{
  overflow-wrap: break-word;
}

ul{
  list-style: outside disc;
  padding:0 0 0 var(--distance-l);
  margin:0 0 var(--distance-m) 0;
}

ul li::marker, 
ol li::marker {
  color: var(--c-contrast);
}

a.btn{
  display:flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding:var(--distance-m) var(--distance-xl);
  border-radius: 3rem;
  cursor:pointer;
  font: 400 var(--font-rubik);
  letter-spacing: 0.1rem;
  color: var(--c-dark);
  background: hsl(66, 90%, 72%);
  transition: all .5s ease;
  &:hover{
      background: hsl(115, 50%, 56%);
  }
}

html{
  width:100%;
  height:100vh;
  font:400 var(--font-geist);
  scroll-behavior: smooth;
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: url("../layout/bg-start-720-1x.jpg");
  background-image:image-set(url(../layout/bg-start-720-1x.jpg) 1x,
		                          url(../layout/bg-start-720-2x.jpg) 2x,
                              url(../layout/bg-start-720-3x.jpg) 3x); 
}

header{
  position: fixed;
  z-index:10;
  top:0;
  left:10%;
  width:80%;
  height:auto;
  display: flex;
  justify-content: center;
  padding-bottom: var(--distance-l);
  & img{
    width: min(100%, 600px);
    filter: drop-shadow(0px 2px 5px #000);
  }
}

body{
  height:100dvh;
  width:100%;
	display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overscroll-behavior: none;
  color:var(--c-light);
}

main{
  width: 100%;
  display:grid;
  grid-template-columns: 1fr;
  place-content: center;
  justify-items: center;
  align-items: start;
  padding-top:min(calc(90dvw / 5.7 + var(--distance-l)), calc(124px + var(--distance-l))); /*Errechnen wie hoch der Header ist, B/H = 5.7, max-width header > img 600Px   / 5.7 ≈ 130,5*/
} 

#start{
  min-height:max(calc(100dvh - 90dvw / 5.7 + var(--distance-l)), calc(100dvh - 124px + var(--distance-l)));
  width:100dvw;
  scroll-margin-top:min(calc(90dvw / 5.7 + var(--distance-l)), calc(124 + var(--distance-l)));
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & #flex-container{
    height:100%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    row-gap:2rem;
    padding-bottom:min(calc(90vw / 5.7 + var(--distance-l)), calc(124px + var(--distance-l)));
  }
  & h1{
    font:600 var(--font-rubik);
    font-size: clamp(2rem, 10dvw, 6rem);
    font-variant: small-caps;
    text-align: center;
    & span{
      position:relative;
      display:inline-block;
      &::after{
        content: "";
        position:absolute;
        left:-5%;
        top:calc(100% - var(--distance-m));
        width:110%;
        height: var(--distance-m);
        background:no-repeat center center/cover url(../layout/highlight.svg);
      }
    }
  }
}

.start-divider{
  display:block;
  width:100%;
  background: var(--c-contrast);
  opacity: 0.5;
  height: 1vh;
  backdrop-filter: blur(5px);
}

section{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  scroll-margin-top:min(calc(90vw / 5.7 + var(--distance-l)), calc(124px + var(--distance-l))); /*Errechnen wie hoch der Header ist, B/H = 4.6, max-width header > img 600Px   / 4.6 ≈ 130,5*/
  color: var(--c-dark);
  font:400 var(--font-geist);
  background-color: var(--c-secondary);
  &:last-of-type{
    padding-bottom:var(--distance-xxl);
  }
  &#impress{
    min-height:100vh;
  }
  & .body{
    width: min(100%, 800px);
    display: grid;
    justify-content: start;
    align-items: center;
    padding:var(--distance-l);
    overflow-wrap: break-word;
    word-break: break-word;
    &.top-border{
      border-top:1px solid hsl(0 0% 0% / 0.1);
    }
    &.btm-border{
      border-bottom:1px solid hsl(0 0% 100% / 1);
    }
    & h2{
      width:100%;
      font-size:clamp(1.25rem, 1.935vw + 0.79rem, 2rem);
      line-height:1.2;
      font-weight:500;
      letter-spacing: 0.1rem;
      margin-bottom: var(--distance-m);
    }
    & p{
      line-height:1.5;
      color: var(--c-dark-light);
      margin-top:0;
      margin-bottom: var(--distance-m);
      &:last-of-type,
      &.no-margin-b{
        margin:0;
      }
      &.disclaimer{
        font-size:0.8rem;
        margin-top:var(--distance-m);
      }
      & b{
        font-weight:500;
      }
    }
    & table{
      font-size:0.8rem;
      width:auto;
      margin-bottom:var(--distance-m);
      & th{
        background:var(--c-contrast);
        text-align:left;
        padding:var(--distance-s);
        color:var(--c-light);
        border-radius: var(--b-radius-s);
      }
      & tr:hover td{
        background:var(--c-primary);
      }
      & tr:last-of-type td{
        border-top:1px solid hsl(0 0% 0% / 0.1);
      }
    }
    & .two_column{
      display:grid;
      grid-template-columns: 1fr 1fr;
      justify-content: center;
      align-items: center;
      margin-bottom:var(--distance-m);
      & .maps a.btn{
        margin:0 auto;
        width:180px;
        color:var(--c-light);
        background-color: var(--c-contrast);
      &:hover{
        background-color: var(--c-btn-secondary);
      }
    }
    
    }
  }
}

#home img{
  margin: 0 auto;
  border-radius: var(--b-radius-s);
  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.08),
              0px 5px 4px rgba(3, 7, 18, 0.06),
              0px 12px 9px rgba(3, 7, 18, 0.05),
              0px 20px 15px rgba(3, 7, 18, 0.03),
              0px 32px 24px rgba(3, 7, 18, 0.02);
  margin-bottom: var(--distance-m);
}

#prices{
  --c-card-descr:   linear-gradient(180deg,rgba(237, 237, 237, 1) 0%, rgba(217, 217, 217, 1) 100%);
  --c-card-shadow:  hsl(0 0% 0% / 0.5);
  --c-card-open:    hsl(219 28% 27%);
  --c-card-closed:  hsl(219 28% 17%);

  & dl{
    margin:var(--distance-m);
    & dt{
      font-weight: 500;
      padding:var(--distance-s);
      border-radius:var(--b-radius-s);
      color:var(--c-light);
      background-color: var(--c-card-open);
      &.extra{
        background-color:var(--c-card-closed);
      }
    }
    & dd{
      padding:0 var(--distance-s);
      font-weight:400;
      font-size:0.8rem;
      margin-bottom:var(--distance-m);
    }
  }
  & .price-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--distance-m);
    & p{
      margin:0;
    }
  }
  & article{
    width:min(100%, 350px);
    min-height:5rem;
    display:grid;
    justify-content: space-evenly;
    
    align-items: stretch;
    grid-template-columns: 4rem 1fr 4rem 4rem;
    grid-template-areas: "  icon description open closed";
    & .icon{
      grid-area: icon;
      display:flex;
      justify-content: center;
      align-items: center;
      border-radius:var(--b-radius-s);
      background-color:var(--c-contrast);
      & svg{
        width:3.5rem;
        aspect-ratio: 1/1;
        padding:var(--distance-s);
        fill: var(--c-light);
      }
    }
    & .info{
      grid-area: description;
      height:90%;
      align-self: center;
      padding:var(--distance-s);
      background: var(--c-card-descr);
      & span{
        display: block;
        font-size:0.8rem;
      }
      & .title{
        font-weight:500;
        line-height:1.5;
      }
      & .desc{
        line-height: 1;
        height:1rem;
        color: var(--c-dark-light);
      }
    }
    & :is(.open,.closed){
      display:flex;
      flex-direction: column;
      justify-content: center;
      color: var(--c-light);
      padding:var(--distance-s);
      border-radius: var(--b-radius-s);
      background-color:var(--c-card-open);
      & span{
        display:block;
        text-align: center;
        font-weight:600;
        &:not(:nth-child(2)),
        & small{
          font-weight:400;
          font-size:0.6rem;
          line-height: 1;  
        }
      }
    }
    & .open{
      grid-area: open;
      height:100%;
    }
    & .closed{
      grid-area: closed;
      height:90%;
      align-self: center;
      background-color: var(--c-card-closed);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

footer{
  width: 100%;
  padding:var(--distance-l);
  background: var(--c-dark);
  text-align: center;
  font-weight:300;
  font-size:0.8rem;
}

@media (width <= 600px) OR (hover:none){
  .menue{
    display:none;
  }
  .mobile{
    position:fixed;
    z-index: 30;
    bottom: 1rem;
    left:0;
    width: 100%;
    display:flex;
    justify-content: center;
    & nav{
      width: min(90%,400px);
      height:3rem;
      padding: var(--distance-s);
      background: hsl(0 0% 15% / 0.6);
      backdrop-filter: blur(5px);
      border:1px solid hsl(0 0% 15% / 0.8);
      border-radius:var(--b-radius-m);
      display:flex;
      & a,
      & a:active{
        width:100%;
        height:100%;
        display:flex;
        flex-grow: 0;
        justify-content: center;
        fill:none;
        stroke:var(--c-light);
        stroke-width:40;
        border-right: 1px solid var(--c-light);
        &:last-child{
          border:none;
        } 
      }  
    }
  }
}

@media (width > 600px) AND (hover: hover) {
  .mobile{
    display:none;
  }
  main > section,
  main > div{
    width:100%;
    padding-left:40px;
    padding-right: 40px;
  }
  .menue{
    position:fixed;
    z-index: 30;
    height:250px;
    left:6px;
    top: calc(50% - 125px);
    display:flex;
    flex-direction: column;
    & nav{
      height:100%;
      width:100%;
      display:flex;
      flex-direction: column;
      justify-content:space-between;
      & a,
      & a:active{
        color:var(--c-light);
        font:500 var(--font-geist);
        background:hsl(0 0% 15% / 0.8);
        border-radius: var(--b-radius-m);
        display:flex;
        justify-content: flex-start;
        align-items: center;
        height:3rem;
        width:3rem;
        fill:none;
        stroke:hsl(33 29% 94% / 0.8);
        stroke-width:40;
        & svg{
          width:3rem;
          padding:6px;
          aspect-ratio: 1/1;
        }
        & span{
          width:0px;
          overflow:hidden;
        } 
      }
      & a:hover{
        width:auto;
        & svg{
          stroke: none;
          fill: var(--c-light);
        }
        & span{
          width:auto;
          padding:var(--distance-s);
        }
      } 
    }
  }
}

@media (width <= 1024px) {
  html{
    background-image: url("../layout/bg-start-1024-1x.jpg");
    background-image: image-set(url(../layout/bg-start-1024-1x.jpg) 1x,
		                            url(../layout/bg-start-1024-2x.jpg) 2x,
                                url(../layout/bg-start-1024-3x.jpg) 3x); 
  }
}

@media (width <= 1920px) {
   html{
    background-image: url("../layout/bg-start-1920-1x.jpg");
    background-image: image-set(url(../layout/bg-start-1920-1x.jpg) 1x,
	  	                          url(../layout/bg-start-1920-2x.jpg) 2x,
                                url(../layout/bg-start-max.jpg) 3x); 
  }
}

@media (width > 1920px){
  html{
    background-image:url("../layout/bg-start-3840-1x.jpg");
    background-image: image-set(url(../layout/bg-start-3840-1x.jpg) 1x,
		                            url(../layout/bg-start-max.jpg) 2x); 
  }  
}