body {
    background-color: black;
    color: white;
}

/* Sprachumschalter zentriert unten */
.lang-switch {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
}

.lang-switch a {
    color: white;
    background: transparent;
    text-decoration: none;
    font-family: "Lato", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: transform 0.3s ease;
    display: inline-block;
    transform-origin: center bottom;
}

.lang-switch a:hover {
    transform: scale(1.6);
    text-decoration: none;
}

.typing {
    width: 70%;
    position: fixed;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -70%);
    color: #fff;
    text-align: center;
    z-index: 100;
}

.line1 {
	display: block;
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-size: 3.25vw;
    letter-spacing: 0.4em;
}

.line2 {
	display: block;
    font-family: "Lato", sans-serif;
    font-weight: 500;
    font-size: 4.75vw;
    letter-spacing: 0.225em;
}

.line2 {
  transition: transform 0.5s ease; /* Sanfter Übergang */
}

.line2:hover {
  transform: scale(1.15); /* Bildvergrößerung */
}

.line3 {
	display: block;
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-size: 3.25vw;
    letter-spacing: 0.48em;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .typing {
        width: 80%;
        top: auto;
        bottom: 30%;
        transform: translate(-50%, 0);
    }
    .line1 {
        font-size: 5.5vw;
    }
    .line2 {
        font-size: 7.5vw;
    }
    .line3 {
        font-size: 5.5vw;
    }
}

@media screen and (max-width: 480px) and (orientation: portrait) {
    .typing {
        width: 90%;
        top: auto;
        bottom: 30%;
        transform: translate(-50%, 0);
    }
    .line1, .line2, .line3 {
        font-size: 5vw;
        letter-spacing: 0.1em;
    }
}

@media screen and (max-width: 1440px) {
    .typing {
        width: 70%;
        top: 60%;
        transform: translate(-50%, -60%);
    }
    .line1 {
        font-size: 2.75vw;
    }
    .line2 {
        font-size: 4.0vw;
    }
    .line3 {
        font-size: 2.75vw;
    }
}

@media screen and (max-width: 1024px) {
    .typing {
        width: 80%;
        top: 60%;
        transform: translate(-50%, -60%);
    }
    .line1 {
        font-size: 4.5vw;
    }
    .line2 {
        font-size: 6.5vw;
    }
    .line3 {
        font-size: 4.5vw;
    }
}

@media screen and (max-width: 768px) {
    .typing {
        width: 90%;
        top: 60%;
        transform: translate(-50%, -60%);
    }
    .line1, .line2, .line3 {
        font-size: 5.5vw;
        letter-spacing: 0.2em;
    }
}