:root {
   font-size: 16px;

   --width: 200px;
   --height: 434px;

   --color-text: #212121;
   --color-background: #fefefe;
   --color-light: #efefef;
   --color-primary: #274C77;

   --animation-y: -30px
}

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

a {
   color: var(--color-primary);
}

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: var(--color-text);
   background-color: var(--color-background);
}

#logo {
   visibility: hidden;
   position: fixed;
   top: var(--animation-y);
   right: 0;
   background-color: var(--color-text);
   color: var(--color-background);
   padding: 0.4rem;
   font-size: 0.8rem;
   border-radius: 0 0 0 4px;
   opacity: 0.8;
}

.slideIn {
   animation: slideIn 0.5s ease-in;
   animation-fill-mode: both;
}

@keyframes slideIn {
   from {
      top: var(--animation-y);
   }
   to {
      top: 0;
   }
}

.image--container {
   position: fixed;;
   left: 0;
   top: 0;
   display: flex;
   width: 50%;
   height: 100vh;
   justify-content: center;
   align-items: center;
}

.image--container.datenschutz {
   background: url(/assets/images/datenschutz.jpg) no-repeat center center;
   background-size: cover;
}

.image--container.datenschutz img {
   display: none;
}

.image--container img {
   width: var(--width);
   height: var(--height);
   border-radius: 24px;
   box-shadow: 8px 16px 32px -10px rgba(66, 68, 90, 1);
}

.layout {
   height: 100vh;
   width: 50%;
   margin-left: 50%;
   line-height: 2;
   padding: 2rem;
}

.layout h2 {
   font-size: 2rem;
   font-weight: bolder;
   letter-spacing: -2px;
}

.layout section {
   min-height: 100vh;
   padding: 3rem 0;
}

.layout section#intro {
   padding-top: 20vh;
}
.layout section#datenschutz, .layout section#impressum {
   line-height: 1.5;
   font-size: 0.9rem;
}

.layout section ul {
   padding-left: 1rem;
}

.layout section .card {
   background-color: var(--color-light);
   border-radius: 0.5rem;
   padding: 1rem;

}

.layout .store {
   padding-top: 1rem;
   width: 200px;
}

.mobile {
   display: none;
}

@media screen and (max-width: 500px) {
   .image--container {
      display: none;
   }

   .layout {
      width: 100%;
      margin-left: 0;
   }

   .layout section {
      min-height: auto;
      padding: 1rem 0;
      line-height: 1.5 !important;
      font-size: 1rem !important;
   }

   .layout section h2 {
      font-size: 1.28rem;
      letter-spacing: normal;
   }

   .mobile {
      display: block;
      width: 70%;
      margin: 0 auto;
      margin-top: 2rem;
      margin-bottom: 2rem;
      border-radius: 24px;
      box-shadow: 8px 16px 32px -10px rgba(66, 68, 90, 1);
   }

   .layout section#intro {
      padding-top: 0;
   }
}