body {
  margin: 0 auto;
  width: 100%;
  margin-left: auto;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
  overflow: scroll;
  z-index: -1;
} 

/* Hintergrud Animation */
.bg {
  animation:slide 5s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #bec2ac 50%, #ded6c8 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:6s;
}

.bg3 {
  animation-duration:7s;
}

@keyframes slide {
  0% {transform:translateX(-25%);}
  100% {transform:translateX(25%);}
}

h3 {
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
  color: rgba(155, 139, 126, 1);
  font-size: 21pt;
  text-shadow: 1px 1px 2px rgba(250, 248, 245, 0);
  line-height: 1.2;
  text-align: center;
  letter-spacing: 3px;
  display: inline;
}

h4 {
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
  color: rgba(134, 138, 116, 1);
  font-size: 20pt;
  line-height: 0;
  letter-spacing: 3px;
  display: inline;
}

b{
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: rgba(134, 138, 116, 1); 
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 0;
}

hr{
  border: 1px solid rgba(255,255,255,0); 
  width: 1px; 
  font-size: 10px;}

p{
  margin: 0px 0px}

a:link {
  text-decoration:none;
  color: rgba(18, 18, 18, 1);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-align: center;
  font-size: 20px;
  line-height: 26px;
}

a:visited {text-decoration: none; color: rgba(250, 250, 246, 1);}
a:hover, a:active {text-decoration: none;color: rgba(250, 250, 246, 1);}

/* Header */
.header {
  background: rgba(250, 248, 245, 0.35);
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  backdrop-filter:blur(10px);
  border: 1.1px solid rgba(255, 255, 255, 0.2);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  text-align: center;
}

.header li a {
  display: block;
  padding: 12px 0px;
  text-decoration: none;
  font-size: 26px;
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 2px;
   color: rgba(134, 138, 116, 1);
}

.header li a:hover, .header li a:active{
  background-color: rgba(174,178,156, 0.8);
  color: white;
}

.header .logo {
  text-decoration: none;
  margin: 0px 30px 0px 0px;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* menu */
.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .3s ease-out;
}

/* menu icon */
.header .menu-icon {
  cursor: pointer;
  display: block;
  float: left;
  padding: 36px 20px;
  position: relative;
  user-select: none;
}
.header .menu-icon .navicon {
  background: rgba(250, 145, 120, 1);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 20px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: rgba(250, 145, 120, 1);
  content: '';
  display: block;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
  height: 100%
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */
.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 550px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

.main{
  position: absolute;
  margin: 0 auto;    	
  width: 100%; 
  height: auto;
  top: 110px;
}

.text {
  position: relative;
  top: 0;
  max-width: 550px;
  display: block;
  align-items: center;
  justify-content: center;
  clear:both;
  padding: 18px 0px 18px 0px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 60px;
  font-optical-sizing: auto;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;  
  background: rgba(250, 248, 245, 0.15);
  backdrop-filter:blur(10px);
  border: 1.1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

@media only screen and 
(max-width: 480px){ 
  .text {
   position: relative;
   top: 0;
   width: 340px;
  }
  .text-imp {
   position: relative;
   top: 0;
   width: 340px;
  }    
  body {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
  overflow: scroll;
  z-index: -1;
 }    
}

@media only screen and 
(min-width: 481px) and
(max-width: 768px){
  .text {
   position: relative;
   top: 0;
   width: 400px;
  }
   .text-imp {
   position: relative;
   top: 0;
   width: 80%;
  }
  body {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
  overflow: scroll;
  z-index: -1;
 }
}

@media only screen and 
(min-width: 769px) and
(max-width: 1279px){
  .text {
   position: relative;
   top: 0;
   width: 480px;
  }
  .text-imb {
   position: relative;
   top: 0;
   width: 80%;
  }
}

@media only screen and 
(min-width: 1280px) and
(max-width: 2560px){
  .text {
   position: relative;
   top: 0;
   width: 480px;
  }
   .text-imp {
   position: relative;
   top: 0;
   width: 750px;
  } 
 .menu-img {
  width: 550px;
 }
}

.text-inner {
  position: relative;
  top: 0;
  max-width: 500px;
  display: block;
  align-items: center;
  justify-content: center;
  clear:both;
  padding: 0px 18px 0px 18px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 0px;
  color: rgba(18, 18, 18, 1);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  background: rgba(255, 255, 255, 0);
}

.text-inner a:link{
 text-decoration:none;
  color: rgba(18, 18, 18, 1);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
}
  
.text-inner a:hover,.text-inner a:visited{ 
  color: rgba(18, 18, 18, 1);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
}

.text-imp {
  position: relative;
  top: 0;
  max-width: 750px;
  display: block;
  align-items: center;
  justify-content: center;
  clear:both;
  padding: 18px 0px 18px 0px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 60px;
  font-optical-sizing: auto;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;  
  background: rgba(250, 248, 245, 0.15);
  backdrop-filter: blur(10px);
  border: 1.1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.text-inner-imp {
  position: relative;
  top: 0;
  max-width: 750px;
  display: block;
  align-items: center;
  justify-content: center;
  clear:both;
  padding: 0px 18px 0px 18px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 0px;
  color: rgba(18, 18, 18, 1);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  text-align: center;
  font-size: 12px;
  line-height: 14px;
  background: rgba(255, 255, 255, 0);
}

.imp-bold-gb{
color: rgba(67, 67, 58, 1);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
}

.imp-bold{
  color: rgba(67, 67, 58, 1);
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  font-size: 12px;
  line-height: 14px;
}

.footer {
  position: fixed;
  bottom: 0;
  width:100%;
  height: 35px; 
  box-shadow:-0 -2px 10px rgba(0,0,0,0.1);
  background: rgba(250, 248, 245, 0.35);
  backdrop-filter:blur(10px);
  border: 1.1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.footer h2{
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: rgba(134, 138, 116, 1);
  font-size: 11pt;
  text-align: center;
  letter-spacing: 2px;
}
.footer h2:hover {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: rgba(250, 145, 120, 1);
  font-size: 11pt;
  text-align: center;
  letter-spacing: 2px;
}

/* Slider Galerie */
.galerie-slide {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0px;
  overflow-x: scroll;
  padding: 0px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background: rgba(174, 178, 156, 0);
  }

.bild {
  display: flex;
  flex-direction: column;
  padding: 0px;
  margin-top: 2px;
  margin-bottom: 8px;
  margin-left: 2px;
  margin-right: 2px;
  border: 8px solid rgba(250, 248, 245, 1);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px, 
              rgba(0, 0, 0, 0.3) 0px 1px 2px;
}

.gallery-image { 
  width: 250px; 
  height: 250px; 
  object-fit: cover;
}

@media only screen and 
(min-width: 769px) and
(max-width: 1279px){
   .gallery-image {
    width: 360px;
    height: 280px;
    object-fit: cover;
  }
}

@media only screen and 
(min-width: 1280px) and
(max-width: 2560px){
   .gallery-image {
    width: 360px;
    height: 280px;
    object-fit: cover;
  }
}

.bild:not(:last-child) {
  margin-right: 6px;
}

.bild .bild-content {
  margin: 0;
  max-width: 60%;
}

.galerie-slide::-webkit-scrollbar {
  height: 8px;
  background: rgba(55,55,55, 0.1);
}

.galerie-slide::-webkit-scrollbar-thumb,
.galerie-slide::-webkit-scrollbar-track {
  border-radius: 92px;
}

/*scrollbar salmon*/
.galerie-slide::-webkit-scrollbar-thumb {
  background: rgba(250, 145, 120, 1);
}

.galerie-slide::-webkit-scrollbar-track {
  background: var(--thumb);
}

/* Popup Fenster Bilder */
.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(250, 248, 245, 0.95);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-content {
    position: relative;
    width: 90%;
    height: auto;
    max-width: 500px;
    max-height: 80%;
    border-radius: 4px;
    overflow: hidden;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal.show {
    display: flex;
    opacity: 1;
}

.close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #000;
    font-size: 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.close:hover {
    transform: rotate(45deg);
}

/* Button Box MK */
.button-mk {
  width: 145px;
  height: 62px;
  margin: 0 auto;
  box-shadow: 1px 1px 5px rgba(10, 10, 10, 0.35), -1px -1px 5px rgba(255,255,255, 0.1), inset 1px 1px 3px rgba(10, 10, 10, 0.4), inset -1px -1px 3px rgba(250, 250, 250, 0.6);
  background-color: rgba(250, 248, 245, 0.1);
  border-radius: 6px;
  border: solid 2px rgba(250, 248, 245, 0.1);
  outline: none;
}

.button-mk:hover {
  box-shadow: 1px 1px 5px rgba(10, 10, 10, 0.35), -1px -1px 5px rgba(255,255,255, 0.1), inset 4px 4px 6px rgba(10, 10, 0, 0.25), inset -4px -4px 6px rgba(250, 250, 250, 0.4);
  cursor: pointer;
}

.mk {
  position: absolute; 
  width: 145px;
  height: 60px;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(178, 182, 160, 1);
  font-size: 38px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;  
  font-optical-sizing: auto;
  text-shadow: rgba(5, 5, 5, 0.65) -0.8px 0.8px 1px;
  letter-spacing: -2.6px;  
}

.mk:hover {
  color: rgba(255, 150, 125, 1);
  font-size: 38px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;  
  font-optical-sizing: auto;
  text-shadow: rgba(5, 5, 5, 0.65) -0.8px 0.8px 1px;
  letter-spacing: -2.6px; 
}

/* Button Box AK */
.button-ak {
  width: 145px;
  height: 85px;
  margin: 0 auto;
  box-shadow: 1px 1px 5px rgba(10, 10, 10, 0.35), -1px -1px 5px rgba(255,255,255, 0.1), inset 1px 1px 3px rgba(10, 10, 10, 0.4), inset -1px -1px 3px rgba(250, 250, 250, 0.6);
  background-color: rgba(250, 248, 245, 0.1);
  border-radius: 6px;
  border: solid 2px rgba(250, 248, 245, 0.1);
  outline: none;
  color: rgba(161, 164, 142, 1);
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  cursor: pointer;
}

.button-ak:hover {
  box-shadow: 1px 1px 5px rgba(10, 10, 10, 0.35), -1px -1px 5px rgba(255,255,255, 0.1), inset 4px 4px 6px rgba(10, 10, 0, 0.25), inset -4px -4px 6px rgba(250, 250, 250, 0.4);
  cursor: pointer;
}

/* Abendkarte Text */
.ak {
  position: absolute;
  width: 145px;
  height: 45px;
  outline: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(178, 182, 160, 1);
  font-size: 37px;
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;  
  font-optical-sizing: auto;
  text-shadow: rgba(5, 5, 5, 0.65) -0.8px 0.8px 1px;
  letter-spacing: -2.6px;  
  margin-top: 5px;
}

.trennstrich {
  position: absolute;
  width: 5px;
  height: 35px; 
  color: rgba(250, 145, 120, 1);
  font-size: 25px;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  margin-right: 14px;
  margin-top: 8px;

    
} 

/* DEU | ENGL */
.sk-lang {
  position: absolute; 
  width: 145px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 45px;
  margin-left: 1px;
}

.deu a {
  width: 80px;
  height:50px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.deu:before {
  content: 'DEU';
  color: rgba(154, 158, 136, 1);
  font-size: 20px;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
  text-align: center;
}
.deu:hover:before {
  color: rgba(250, 145, 120, 1);
  display: block;
  font-size: 20px;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
}

.engl a {
  width: 80px;
  height:50px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.engl:before {
  content: 'ENGL';
  color: rgba(154, 158, 136, 1);
  font-size: 20px;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
  text-align: center;
}
.engl:hover:before {
  color: rgba(250, 145, 120, 1);
  display: block;
  font-size: 20px;
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;

  letter-spacing: 1px;
}

/* BUTTON TELEFON */
.icon-tel{
  background-image: url("../images/mobile-gruen.png");
  background-size: 45px;
  width: 45px;
  height: 45px;
  outline: none;
  cursor: pointer;
  margin: 0 auto;
  object-fit: contain;
  animation: call 2.5s ease infinite;
  perspective: 1000px;
}

@keyframes call {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  1% { transform: translate(-1px, -2px) rotate(-5deg); }
  2% { transform: translate(-5px, 0px) rotate(2deg); }
  3% { transform: translate(3px, 2px) rotate(0deg); }
  4% { transform: translate(1px, -1px) rotate(-2deg); }
  5% { transform: translate(-1px, 2px) rotate(5deg); }
  6% { transform: translate(-3px, 1px) rotate(0deg); }
  7% { transform: translate(5px, 2px) rotate(-2deg); }
  8% { transform: translate(-1px, -1px) rotate(1deg); }
  9% { transform: translate(3px, 0px) rotate(0deg); }
  10% { transform: translate(1px, -1px) rotate(-1deg); }
  13% { transform: translate(-5px, 0px) rotate(5deg); }
  16% { transform: translate(1px, 1px) rotate(2deg); }
  18% { transform: translate(-2px, -0px) rotate(2deg); }
  22% { transform: translate(0px, 2px) rotate(1deg); }
  25% { transform: translate(1px, 1px) rotate(0deg); }
  28% { transform: translate(-1px, -0px) rotate(0deg); }
  30% { transform: translate(0px, 0px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

.icon-tel:hover, .icon-tel:visited{
  content: url("../images/mobile-coral.png");
  background-size: 45px;
  width: 45px;
  height: 45px;
  outline: none;
  cursor: pointer;
  margin: 0 auto;
  object-fit: contain;
  animation: none;
}

/* TYPEWRITER */
.benvenuti {
  width: 340px;
  margin: 0 auto;
  left: 0;
 right: 0;
}

h1 {
  font-size: 30px;
  color: rgba(155, 139, 126, 1);
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 4px;
  line-height: 0.6;
}

/* Typewriter effect 1 */
@keyframes typing {
  0%, 30% { content: ""; }
  1.5%, 28.5% { content: "B"; }
  3%, 27% { content: "BE"; }
  4.5%, 25.5% { content: "BEN"; }
  6%, 24% { content: "BENV"; }
  7.5%, 22.5% { content: "BENVE"; }
  9%, 21% { content: "BENVEN"; }
  10.5%, 19.5% { content: "BENVENU"; }
  12%, 18% { content: "BENVENUT"; }
  13.5%, 16.5% { content: "BENVENUTI"; }

  33%, 68% { content: ""; }
  34%, 66% { content: "W"; }
  36%, 65% { content: "WI"; }
  37%, 63.5% { content: "WIL"; }
  39%, 62% { content: "WILL"; }
  40.5%, 60% { content: "WILLK"; }
  42%, 59% { content: "WILLKO"; }
 43%, 56% { content: "WILLKOM"; }
  45%, 55% { content: "WILLKOMM"; }
  46%, 53% { content: "WILLKOMME"; }
  49%, 52% { content: "WILLKOMMEN"; }
  
  71%, 95% { content: ""; }
  72.5%, 93.5% { content: "W"; }
  74%, 92% { content: "WE"; }
  75.5%, 90.5% { content: "WEL"; }
  77%, 89% { content: "WELC"; }
  78.5%, 87.5% { content: "WELCO"; }
  80%, 86% { content: "WELCOM"; }
  81.5%, 84.5% { content: "WELCOME"; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.typewriter {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing 18s infinite;
}
.typewriter::after {
  content: "";
  border-right: 3px solid var(--caret);
  animation: blink 0.5s linear infinite;
  border-color: rgba(250, 145, 120, 1);
}

.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}

.typewriter.nocaret::after {
  border-right: 0;
}

@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }
 
    
@keyframes sequencePopup {
    0%, 100% { content: "BENVENUTI"; }
    25% { content: "WILLKOMMEN"; }
    50% { content: "WELCOME"; }
  }

  .typewriter::before {
    content: "developer";
    animation: sequencePopup 18s linear infinite;
  }
}

/* INTRO ZITAT*/
.ws-hinten { 
  display: block;
  position: fixed; 
  overflow: scroll; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 99999; 
  background: rgba(250, 248, 245, 1);
  text-align: center;
}

.ws-vorne { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;  
  background: rgba(250, 248, 245, 0.15);
  backdrop-filter:blur(10px);
  border: 1.1px solid rgba(255, 255, 255, 0.2);
  animation: intro 2.5s;
  text-align: center;
  } 

@keyframes intro {
   0% { transform: translate(-100%, 0) }
   100% { transform: translate(0px, 0px) }
}

.wst-logo { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 30%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.ws-logo { 
  position: relative;
  overflow: hidden; 
 width: 100%; 
  height: auto; 
  text-align: center;
  animation: move-logo 3s;
}


@keyframes move-logo {
    0% { opacity: 0; transform: scale(0.7);}
   40% { opacity: 0; transform: scale(0.7);}
  100% { opacity: 1; transform: scale(1);}
}

.wst-zitat { 
  position: absolute; 
  left: 0; 
  top: 30%; 
  width: 100%; 
  height: 40%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.ws-zitat { 
  position: relative;
  overflow: hidden; 
  width: 100%; 
  height: auto;
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
  color: rgba(134, 138, 116, 1);
  font-size: 19pt;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 3px;
  display: inline;
  animation: shake-zitat 4s;
}

@keyframes shake-zitat {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0;}
  10% { transform: translate(0, 0) rotate(0deg); opacity: 0;}
  35% { transform: translate(0, 0) rotate(8deg); opacity: 0;}
  60% { transform: translate(-5px, 0) rotate(-5deg); opacity: 0.95;}
  86% { transform: translate(3px, 0) rotate(3deg); opacity: 1;}
 100% { transform: translate(0, 0) rotate(0deg); opacity: 1;}
}

.wst-close { 
  position: absolute; 
  left: 0; 
  top: 80%; 
  width: 100%; 
  height: 30%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.ws-close {
  animation: shake-close 3s;
  width: 100%; 
  height: 80%;
}

@keyframes shake-close {
  0% { transform: translate(0, 100%) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.ws-close a {
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-style: normal;
  color: rgba(255, 145, 130, 1);
  font-size: 20pt;
  text-align: center;
  letter-spacing: 2.5px;
    display: inline;
  animation: shake-close 3s;
  
}





/* FONTS
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900
.roboto-condensed-<uniquifier> {
  font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.fira-sans-condensed-thin {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 100;
  font-style: normal;
}
.fira-sans-condensed-extralight {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.fira-sans-condensed-light {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.fira-sans-condensed-regular {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.fira-sans-condensed-medium {
  font-family: "Fira Sans Condensed", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.fredericka-the-great-regular {
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
}
*/