* {
     --blue: #354256;
 }

 @font-face {
     font-family: 'Raleway';
     src: "Raleway-Medium.ttf";
     font-weight: normal;
     font-style: normal;
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

 }

 a {
     color: var(--blue);
     text-decoration: none;
 }

 #burger {
     z-index: 99px
 }

 a.link {
     border-bottom: 3px dotted var(--blue);
     text-decoration: none;
 }

 body {
     background-image: url('img/bg.webp');
     height: 100vh;
     margin: 0;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center top;

 }

 @media (orientation: portrait) {
     body {
         background-image: url("img/bg.webp");
         background-position: center center;
     }
 }

 html {
     scroll-behavior: smooth;
 }

 html,
 body {
     overflow-x: hidden;
     margin: 0;
     padding: 0;
 }

 @media screen and (max-width:767px) {
     .desktoponly {
         display: none
     }
 }

 @media screen and (min-width:768px) {
     .mobileonly {
         display: none
     }
 }

 main {
     margin-top: 4em;
     margin-left: 2vw
 }

 main h2 {
     background-color: var(--blue);
     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
     font-family: Raleway, sans-serif;
     position: relative;
     display: block;
     width: fit-content;
     padding: 3vw;
     color: #aaa;
     font-size: clamp(2rem, 6vw, 3rem);
     margin-top: 0.9vh;
     border-radius: 5px;
     opacity: 0.8;
     border-radius: 20vh;
 }

 main h2 a {
     color: white
 }

 main h2.left {
     margin-right: auto;
     margin-left: 0;
 }

 main h2.right {
     margin-left: auto;
     margin-right: 0;
 }


 #lisa {
     position: absolute;
     right: 1vw;
     top: 1vh;
     width: 38vw;
     border-radius: 3vh;
 }

 .hero {
     margin: 0 0 0 2vw;
     padding: 2vw;
     border: 1px dottet yellow;
     font-size: 6.0vw;
     font-family: Raleway, sans-serif;
     font-weight: bold;
     -webkit-text-stroke: 0.25vw #4B2C4D;
     color: transparent;
     border-radius: 2vw;
     background: linear-gradient(to bottom,
             rgba(0, 0, 0, 0),
             rgba(0, 0, 0, 0.6));
     width: 52vw;
 }

 .hero h1 {
     font-size: 6vw
 }

 .hero-subtext {
     margin: 0px;
     padding: 0;
     font-size: 0.75em;
 }

 .hero-longtext {
     margin-top: 2vh;
     font-size: clamp(0.7rem, 3vw, 2rem);
     -webkit-text-stroke-width: 0;
     -webkit-text-stroke-color: transparent;
     color: white;
     font-weight: normal;
     line-height: 1.2em;
 }

 h1,
 p {
     padding: 0;
     margin: 0
 }

 footer {
     text-align: center;
     font-family: Arial;
     background: black;
     color: silver;
     padding: 0.5em 1em;
     font-size: 10pt;
 }

 footer a {
     color: silver;

 }

 /* Initial versteckt */
 main h2 {
     opacity: 0;
     transition: transform 1s cubic-bezier(.25, .8, .25, 1), opacity 1s ease;

 }

 /* Startposition links */
 main h2.left {
     transform: translateX(-60px);
 }

 /* Startposition rechts */
 main h2.right {
     transform: translateX(60px);
 }

 /* Wenn aktiv → sichtbar + normale Position */
 main h2.show {
     transform: translateX(0);
     opacity: 0.8;
     /* dein ursprünglicher Wert */
 }

 .image-wrapper {
     position: relative;
     display: inline-block;
 }

 .image-wrapper img {
     display: block;
     width: 100%;
     height: auto;
 }

 /* VK Overlay */


 .vk-link img {
     width: 32px;
     height: 32px;
 }

 /* Standard: versteckt */
 .vk-link {
     display: none;
 }

 /* Nur Mobile */
 @media (max-width: 768px) {
     .vk-link {
         position: absolute;
         top: 3.5vh;
         left: 1vh;
         background: rgba(53, 66, 86, 0.85);
         /* #354256 mit Transparenz */
         padding: 10px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
     }
 }