@import url('https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap');

body, html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Lexend Deca';
    font-size: clamp(20px, 2vw, 40px); /* passt sich automatisch an */
}

.main-left {
    box-sizing: border-box;
    padding: 10px;
    width: 65%;
    height: 100%;
    float: left;
}

.main-right {
    box-sizing: border-box;
    padding: 10px;
    width: 35%;
    height: 100%;
    float: left;
}

.vert-2 {
    box-sizing: border-box;
    height: 50%;
    width: 100%;
}

.clock {
    line-height: 25vh;
    text-align: center;
    font-size: clamp(60px, 8vw, 120px); /* dynamisch skalierbar */
}

.date {
    text-align: center;
}

.map {
    border: none;
    width: 100%;
    height: 50%;
}

.headline {
    font-size: clamp(30px, 4vw, 80px);
}

.level {
    font-size: clamp(20px, 3vw, 60px);
    font-weight: bold;
    color: red;
}

.info {
    font-size: clamp(14px, 1.5vw, 30px);
    color: #999;
}

.personal-names {
    font-size: clamp(16px, 2vw, 32px);
    color: #333;
}

/* Optional: Feinjustierung für extrem große Bildschirme */
@media screen and (min-width: 3000px) {
    body {
        font-size: 90px;
    }
    .clock {
        font-size: 200px;
    }
    .headline {
        font-size: 140px;
    }
    .level {
        font-size: 100px;
    }
    .info {
        font-size: 65px;
    }
    .personal-names {
        font-size: 70px;
    }
}