body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    cursor: none; /* Versteckt den Standard-Cursor */
}

/* Wettercode-Bild oben rechts */
.weather-image {
    position: absolute;
    top: 5vw;
    right: 5vw;
    width: 9vw;
    height: auto;
    display: none;
    z-index: 1; /* Sicherstellen, dass das Wetterbild über den Bratwürsten ist */
}

.wurst-image {
    position: absolute; /* Absolute Positionierung für die Bratwürste */
    width: 2vw;
    height: auto;
    z-index: -1; /* Setzt die Bratwürste hinter andere Elemente */
}

/* Schriftarten */
@font-face {
    font-family: 'KadwaBold';
    src: url('fonts/Kadwa-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'KadwaRegular';
    src: url('fonts/Kadwa-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Titel */
h1 {
    position: absolute;
    bottom: 16vw;
    left: 5vw;
    font-family: 'KadwaBold';
    font-size: 4.5vw;
    margin: 0;
    color: #000;
    z-index: 1; /* Sicherstellen, dass der Titel über den Bratwürsten ist */
}

/* Platzhalter für den Satz */
#dataDisplay {
    font-family: 'KadwaRegular';
    font-size: 2vw; /* Schriftgröße proportional zur Breite des Bildschirms */
    color: #000;
    position: absolute;
    bottom: 11vw;
    left: 5vw;
    line-height: 1.2;
    z-index: 1; /* Sicherstellen, dass der Platzhalter über den Bratwürsten ist */
}

/* Eingabefelder für Datum und Uhrzeit sowie Button */
#fetchControls {
    position: absolute;
    bottom: 7vw;
    left: 5vw; /* Gleicher Abstand wie beim Titel und Text */
    font-family: 'Kadwa';
    font-size: 1.5vw; /* Schriftgröße proportional zur Breite des Bildschirms */
    display: flex;
    align-items: center;
    gap: 2vw; /* Abstand zwischen den Elementen */
    z-index: 1; /* Sicherstellen, dass die Steuerungselemente über den Bratwürsten sind */
}

/* Rundes Design für Input-Felder und Button */
#fetchControls input {
    padding: 1.5vw; /* Platz in den Eingabefeldern proportional */
    font-size: 1.5vw; /* Schriftgröße für Eingabefelder proportional */
    width: 25vw; /* Breite der Eingabefelder proportional zur Breite des Bildschirms */
    max-width: 300px; /* Maximalbreite für Eingabefelder */
    font-family: 'Kadwa';
    border-radius: 20px;
    border: 1px solid #000;
}

#fetchButton {
    padding: 1.5vw 3vw; /* Platz im Button proportional */
    font-size: 1.5vw; /* Gleiche Schriftgröße wie die Eingabefelder */
    background-color: white;
    color: black;
    border: 1px solid #000;
    cursor: pointer;
    border-radius: 20px;
    font-family: 'Kadwa';
    width: 25vw; /* Breite des Buttons proportional zur Breite des Bildschirms */
    max-width: 300px; /* Maximalbreite für den Button */
}

#fetchButton:hover {
    background-color: #c6c4c4;
}

/* Hover-Effekte für den Senftube */
#fetchControls:hover ~ #senftube,
#fetchButton:hover ~ #senftube {
    display: none;
}

/* Senftube */
#senftube {
    position: absolute;
    width: 2.5vw;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1; /* Sicherstellen, dass der Senftube über den Bratwürsten ist */
}

/* RESPONSIVE DESIGN */

/* Für kleine Bildschirme (typischerweise Mobiltelefone) */
@media only screen and (max-width: 639px) {
    body {
        font-size: 2.5vw; /* Schriftgröße proportional zur Breite des Bildschirms */
        padding: 2vw; /* Abstand proportional zur Breite des Bildschirms */
        overflow: hidden; /* Verhindert das Scrollen */
    }

    h1 {
        font-size: 10vw; /* Überschrift proportional zur Breite des Bildschirms */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-bottom: 0.5em; /* Abstand unter der Überschrift */
    }

    #dataDisplay {
        font-size: 3vw; /* Schriftgröße für den Datenanzeigebereich proportional */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-top: 1vw; /* Abstand oben */
        text-align: left; /* Links ausrichten */
    }

    #fetchControls {
        margin-left: 5vw; /* Gleicher linker Abstand wie andere Elemente */
        display: flex;
        flex-direction: row; /* Zeilenanordnung */
        justify-content: flex-start; /* Links ausrichten */
        margin-top: 2vw; /* Abstand oben */
    }

    #fetchControls input {
        margin-right: 1vw; /* Abstand zwischen den Eingabefeldern */
        padding: 1vw; /* Platz in den Eingabefeldern proportional */
        max-width: 180px; /* Maximalbreite für Eingabefelder */
        width: 25vw; /* Breite der Eingabefelder proportional zur Breite des Bildschirms */
        font-size: 2.5vw; /* Schriftgröße proportional zur Breite des Bildschirms */
        height: 3vw; /* Höhe der Eingabefelder */
    }

    #fetchButton {
        padding: 1vw 2vw; /* Platz im Button proportional */
        font-size: 2.5vw; /* Schriftgröße für den Button proportional */
        width: 25vw; /* Breite des Buttons proportional zur Breite des Bildschirms */
        max-width: 180px; /* Maximalbreite für den Button */
    }

    .weather-image {
        max-width: 12vw; /* Maximalbreite für Wetterbilder proportional */
    }

    #senftube {
        width: 6vw; /* Größe der Senftube proportional */
    }
}

/* Für grosse Handys */
@media only screen and (min-width: 640px) and (max-width: 767px) {
    body {
        font-size: 2.5vw; /* Schriftgröße proportional zur Breite des Bildschirms */
        padding: 2vw; /* Abstand proportional zur Breite des Bildschirms */
        overflow: hidden; /* Verhindert das Scrollen */
    }

    h1 {
        font-size: 10vw; /* Überschrift proportional zur Breite des Bildschirms */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-bottom: 0.5em; /* Abstand unter der Überschrift */
    }

    #dataDisplay {
        font-size: 3vw; /* Schriftgröße für den Datenanzeigebereich proportional */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-top: 1vw; /* Abstand oben */
        text-align: left; /* Links ausrichten */
    }

    #fetchControls {
        margin-left: 5vw; /* Gleicher linker Abstand wie andere Elemente */
        display: flex;
        flex-direction: row; /* Zeilenanordnung */
        justify-content: flex-start; /* Links ausrichten */
        margin-top: 2vw; /* Abstand oben */
    }

    #fetchControls input {
        margin-right: 1vw; /* Abstand zwischen den Eingabefeldern */
        padding: 1vw; /* Platz in den Eingabefeldern proportional */
        max-width: 180px; /* Maximalbreite für Eingabefelder */
        width: 25vw; /* Breite der Eingabefelder proportional zur Breite des Bildschirms */
    }

    #fetchButton {
        padding: 1vw 2vw; /* Platz im Button proportional */
        font-size: 1.5vw; /* Schriftgröße für den Button proportional */
        width: 25vw; /* Breite des Buttons proportional zur Breite des Bildschirms */
        max-width: 180px; /* Maximalbreite für den Button */
    }

    /* Stil für Wetterbilder */
    .weather-image {
        max-width: 12vw; /* Maximalbreite für Wetterbilder proportional */
    }

    #senftube {
        width: 6vw; /* Größe der Senftube proportional */
    }
}

/* Für Tablets */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 2.5vw; /* Schriftgröße proportional zur Breite des Bildschirms */
        padding: 2vw; /* Abstand proportional zur Breite des Bildschirms */
    }

    h1 {
        font-size: 6vw; /* Überschrift proportional zur Breite des Bildschirms */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-bottom: 0.5em; /* Abstand unter der Überschrift */
    }

    #dataDisplay {
        font-size: 2.5vw; /* Schriftgröße für den Datenanzeigebereich proportional */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-top: 2vw; /* Abstand oben */
        text-align: left; /* Links ausrichten */
    }

    #fetchControls {
        margin-left: 5vw; /* Gleicher linker Abstand wie andere Elemente */
        display: flex;
        flex-direction: row; /* Zeilenanordnung */
        justify-content: flex-start; /* Links ausrichten */
        margin-top: 2vw; /* Abstand oben */
    }

    #fetchControls input {
        margin-right: 1vw; /* Abstand zwischen den Eingabefeldern */
        padding: 1vw; /* Platz in den Eingabefeldern proportional */
        max-width: 180px; /* Maximalbreite für Eingabefelder */
        width: 25vw; /* Breite der Eingabefelder proportional zur Breite des Bildschirms */
    }

    #fetchButton {
        padding: 1vw; /* Platz im Button proportional */
        font-size: 1.5vw; /* Schriftgröße für den Button proportional */
        width: 25vw; /* Breite des Buttons proportional zur Breite des Bildschirms */
        max-width: 180px; /* Maximalbreite für den Button */
    }

    /* Stil für Wetterbilder */
    .weather-image {
        max-width: 12vw; /* Maximalbreite für Wetterbilder proportional */
    }

    #senftube {
        width: 3vw; /* Größe der Senftube proportional */
    }
}

/* Für Desktops */
@media only screen and (min-width: 1024px) and (max-width: 1919px) {
    body {
        font-size: 2vw; /* Schriftgröße proportional zur Breite des Bildschirms */
        padding: 2vw; /* Abstand proportional zur Breite des Bildschirms */
    }

    h1 {
        font-size: 5vw; /* Überschrift proportional zur Breite des Bildschirms */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-bottom: 0.3em; /* Abstand unter der Überschrift */
    }

    #dataDisplay {
        font-size: 2vw; /* Schriftgröße für den Datenanzeigebereich proportional */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-top: 2vw; /* Abstand oben */
        text-align: left; /* Links ausrichten */
    }

    #fetchControls {
        margin-left: 5vw; /* Gleicher linker Abstand wie andere Elemente */
        display: flex;
        flex-direction: row; /* Zeilenanordnung */
        justify-content: flex-start; /* Links ausrichten */
        margin-top: 2vw; /* Abstand oben */
    }

    #fetchControls input {
        margin-right: 1vw; /* Abstand zwischen den Eingabefeldern */
        padding: 1vw; /* Platz in den Eingabefeldern proportional */
        max-width: 150px; /* Maximalbreite für Eingabefelder */
        max-height: 15px;
        font-size: 1.2vw; /* Schriftgröße für Eingabefelder proportional */
    }

    #fetchButton {
        padding: 0.4vw; /* Platz im Button proportional */
        font-size: 1.2vw; /* Schriftgröße für den Button proportional */
        max-width: 160px; /* Maximalbreite für den Button */
    }

    /* Stil für Wetterbilder */
    .weather-image {
        max-width: 10vw; /* Maximalbreite für Wetterbilder proportional */
    }

    #senftube {
        width: 2.5vw; /* Größe der Senftube proportional */
    }
}

/* Für große Bildschirme */
@media only screen and (min-width: 1920px) {
    body {
        font-size: 1.8vw; /* Schriftgröße proportional zur Breite des Bildschirms */
        padding: 2.5vw; /* Abstand proportional zur Breite des Bildschirms */
    }

    h1 {
        font-size: 4.5vw; /* Überschrift proportional zur Breite des Bildschirms */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-bottom: 0.5em; /* Abstand unter der Überschrift */
    }

    #dataDisplay {
        font-size: 1.8vw; /* Schriftgröße für den Datenanzeigebereich proportional */
        margin-left: 5vw; /* Gleicher Abstand wie andere Elemente */
        margin-top: 2.5vw; /* Abstand oben */
        text-align: left; /* Links ausrichten */
    }

    #fetchControls {
        margin-left: 5vw; /* Gleicher linker Abstand wie andere Elemente */
        display: flex;
        flex-direction: row; /* Zeilenanordnung */
        justify-content: flex-start; /* Links ausrichten */
        margin-top: 3vw; /* Abstand oben */
    }

    #fetchControls input {
        margin-right: 1.5vw; /* Abstand zwischen den Eingabefeldern */
        padding: 1.2vw; /* Platz in den Eingabefeldern proportional */
        max-width: 200px; /* Maximalbreite für Eingabefelder */
    }

    #fetchButton {
        padding: 1.2vw 2.5vw; /* Platz im Button proportional */
        font-size: 1.4vw; /* Schriftgröße für den Button proportional */
        width: 200px; /* Breite des Buttons */
        max-width: 200px; /* Maximalbreite für den Button */
    }

    /* Stil für Wetterbilder */
    .weather-image {
        max-width: 12vw; /* Maximalbreite für Wetterbilder proportional */
    }

    #senftube {
        width: 3vw; /* Größe der Senftube proportional */
    }
}