/* Self-hosted League Spartan (GDPR fix: no external Google Fonts request) */
@font-face {
  font-family: 'Spartan';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../../assets/fonts/spartan-latin-ext-100.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spartan';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../../assets/fonts/spartan-latin-100.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -10;
}

.datenschutz {
  display: flex;
  height: 330vh;
  justify-content: space-around;
  align-items: stretch;
  animation: expand .8s ease forwards;
  position: relative;
  font-size: 9pt;
  font-family: 'Spartan', sans-serif;
  transition: all .8s ease;
}

.impressum {
  display: flex;
  height: 150vh;
  justify-content: space-around;
  align-items: stretch;
  animation: expand .8s ease forwards;
  position: relative;
  font-size: 9pt;
  font-family: 'Spartan', sans-serif;
  transition: all .8s ease;
}

.container_content {
 width: 80%;
}

.container_content_inner {
  width: 90%;
  margin-left: 40px;
}
    
.container_img {
  width: 100%;
  animation: slideIn 1.5s ease-in-out forwards;
}

.par {
  height: auto;
  overflow: hidden;
}

p{
  line-height: 28px;
  transform: translateY(300px);
  animation: slideUp .8s ease-in-out forwards .8s;
}

img.fit-picture {
  max-width: 10%;
  height: auto;
   --a: 8deg; /* control the angle of rotation (the smaller, the better) */
  width: 250px;
  aspect-ratio: 1;
  border-radius: 20px;
  transform: perspective(400px) rotate3d(var(--r,1,-1),0,calc(var(--i,1)*var(--a)));
  -webkit-mask: 
    linear-gradient(135deg,#000c 40%,#000,#000c 60%)
    100% 100%/250% 250%;
  transition: .4s;
  cursor: pointer;
}

.alt {
  --r: 1,1;
  -webkit-mask: 
    linear-gradient(45deg,#000c 40%,#000,#000c 60%)
    0 100%/250% 250%;
}
img.fit-picture:hover {
  --i: -1;
  -webkit-mask-position: 0 0;
}
.alt:hover {
  -webkit-mask-position: 100% 0;
}

li{
  line-height: 28px;
  transform: translateY(300px);
  animation: slideUp .8s ease-in-out forwards .8s;
}


}

.btns_more {
  background: transparent;
  border: 1px solid var(--contrast-color);
  border-radius: 50px;
  padding: 8px 12px;
  font-size: 16px;
  text-transform: uppercase;
  position: relative;
  margin-top: 15px;
  outline: none;
  transform: translateY(50px);
  animation: slideUp .8s ease-in-out  forwards 1s;
}

.title {
  overflow: hidden;
  height: auto;
}

h2 {
    font-size: 20px;
    color: var(--contrast-color);
    margin-bottom: 20px;
    transform: translateY(100px);
    animation: slideUp .8s ease forwards .5s;
}

@keyframes slideIn {
  0% {
    transform: translateX(500px) scale(.2);
  }
  100% {
    transform: translateX(0px) scale(1);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(300px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes expand {
  0% {
    transform: translateX(1400px);
  }
  100% {
    transform: translateX(0px);
  }
}