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

body {
    background-color: #A2CC8F;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

header {
    position: relative;
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding-left: 1vw;
    padding-top: 1vw;
    box-sizing: border-box;
}

h1 {
    margin-top: 1.9vw;
    font-weight: 980;
    font-size: 8vw;
    z-index: 2;
    position: relative;
    font-family: 'Raleway', sans-serif;
    margin-bottom: 0vw;
    line-height: 0.8;
    padding-left: 0vw;
}

h2 {
    width: 70%;
    font-weight: 596;
    font-size: 1.3vw; 
    z-index: 2;
    position: relative;
    font-family: 'Raleway', sans-serif;
    line-height: 1.2;
    padding-top: 1vw;
    padding-left: 0.6vw;
}

h3 {
    font-weight: 1000;
    font-size: 1.5vw;
    z-index: 2;
    position: relative;
    font-family: 'Raleway', sans-serif;
    margin-top: 0vw;
    line-height: 0.7;
    padding-left: 0.5vw;
}

#svgPaddingContainer {
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 5vw;
}

#svgContainer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible; /* Damit das SVG über den Container hinaus sichtbar bleibt */
    z-index: 3; /* SVG-Hintergrund */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    padding-top: 12vw; /* Add top padding */
}

svg {
    width: 100%;
    height: auto;
    overflow: visible; /* Damit das SVG über den Container hinaus sichtbar bleibt */
}

main {
    margin-top: 50vh;
    z-index: 8; /* Über dem SVG */
}

.controls-container {
    position: absolute;
    top: 50%; /* Adjusted to be relative to the viewport width */
    left: 50%;
    transform: translate(-50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
}

.styled-element {
    background-color: #F1F1C0;
    border: 0.2vw solid #A2CC8F;
    border-radius: 0.8vw;
    padding: 1vw;
    font-size: calc(12px + 0.8vw);
    margin: 1vw 0;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    text-align: center;
    color: #333;
}

#random-destination {
    display: flex;
    flex-direction: column;
    background-color: #F1F1C0;
    border-radius: 0.8vw;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: calc(12px + 0.8vw);
    width: 20vw;
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1vw;
}

#generate-destination {
    display: flex;
    flex-direction: column;
    background-color: #F1F1C0;
    border-radius: 0.8vw;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: calc(12px + 0.8vw);
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1vw;
}

.train1 {
    transition: transform 1s;
    z-index: 5;
}

.train2 {
    transition: transform 1s;
    z-index: 0;
}

.train3 {
    transition: transform 1s;
    z-index: 1;
}

#city-selector {
    font-size: calc(14px + 0.8vw);
    padding: 0.5vw 1vw;
    background-color: #F1F1C0;
    border: 0.2vw solid #A2CC8F;
    border-radius: 0.8vw;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    color: #333;
}

.footer-button-container {
    display: flex;
    justify-content: center;
    padding: 2vw;
    z-index: 1;
    padding-bottom: 2vw;
}



@media (max-width: 768px) {
    h1 {
        margin-top: 1.9vw;
        font-size: calc(16px + 4vw);
    }
    h2 {
        font-size: calc(7px + 0.7vw);
    }
    h3 {
        font-size: 2.6vw;
    }
    
    #svgContainer {
    height: 50vh;
    }
    
    svg {
        width: 100%;
        height: 100%;
    }
    
    .controls-container {
        top: 23%; /* Adjusted to be relative to the viewport width */
        left: 50%;
    }
    
    #random-destination {
        font-size: 2.4vw;
        width: 25vw;
    }
    
    #generate-destination {
        font-size: 2.4vw;
    }
    
    #city-selector {
        font-size: 2.4vw;
    }

    .footer-button-container {
        position: fixed; /* Fixiert den Footer-Container am unteren Rand */
        bottom: 10%;
        width: 100%; /* Stellt sicher, dass der Footer die gesamte Breite einnimmt */
        padding-bottom: 1vw; /* Minimaler Abstand am unteren Rand */
    }
    
}


/* Tablets (hochkant und quer) */
@media (min-width: 577px) and (max-width: 768px) {
    h1 {
        margin-top: 2vw;
        font-size: calc(16px + 4vw);
    }
    h2 {
        font-size: 2vw;
    }
    h3 {
        font-size: 2.6vw;
    }

    
    #svgContainer {
    height: 60vh;
    }
    
    svg {
        width: 100%;
        height: 100%;
    }
    
    .controls-container {
        top: 23%; /* Adjusted to be relative to the viewport width */
        left: 50%;
    }
    
    #random-destination {
        font-size: 2.4vw;
        width: 25vw;
    }
    
    #generate-destination {
        font-size: 2.4vw;
    }
    
    #city-selector {
        font-size: 2.4vw;
    }

    .footer-button-container {
        position: fixed; /* Fixiert den Footer-Container am unteren Rand */
        bottom: 10%;
        width: 100%; /* Stellt sicher, dass der Footer die gesamte Breite einnimmt */
        padding-bottom: 1vw; /* Minimaler Abstand am unteren Rand */
        align-items: center;
        left: -5%;
    }
    
}

/* Tablets (quer) und kleine Desktops */
@media (min-width: 769px) and (max-width: 992px) {
    
    h1 {
        margin-top: 2vw;
        font-size: 10vw;
    }
    h2 {
        font-size: 2.3vw;
    }
    h3 {
        font-size: 2.8vw;
    }

    
    #svgContainer {
    height: 60vh;
    }
    
    svg {
        width: 100%;
        height: 100%;
    }
    
    .controls-container {
        top: 23%; /* Adjusted to be relative to the viewport width */
        left: 50%;
    }
    
    #random-destination {
        font-size: 2.4vw;
        width: 25vw;
    }
    
    #generate-destination {
        font-size: 2.4vw;
    }
    
    #city-selector {
        font-size: 2.4vw;
    }

    .footer-button-container {
        position: fixed; /* Fixiert den Footer-Container am unteren Rand */
        bottom: 10%;
        width: 100%; /* Stellt sicher, dass der Footer die gesamte Breite einnimmt */
        padding-bottom: 1vw; /* Minimaler Abstand am unteren Rand */
        align-items: center;
        left: -5%;
    }
    
}

/* Normale Desktops */
@media (min-width: 993px) and (max-width: 1200px) {
    #svgContainer {
        padding-top: 13vw; /* Add top padding */
    }

    svg {
        width: 100%;
        height: 95%;
    }

    .train1, .train2, .train3 {
        transform: scale(1); /* Originalgröße */
    }

    .styled-element {
        font-size: calc(10px + 1vw); /* Proportional zur Bildschirmbreite */
        padding: 0.8vw; /* Proportional zur Bildschirmbreite */
        border-radius: 0.8vw; /* Proportional zur Bildschirmbreite */
    }

    .controls-container {
        top: 50%; /* Adjusted to be relative to the viewport width */
        left: 50%;
    }

    #random-destination {
        font-size: calc(10px + 1vw); /* Proportional zur Bildschirmbreite */
        width: 25vw; /* Proportional zur Bildschirmbreite */
    }

    #generate-destination {
        font-size: calc(10px + 1vw); /* Proportional zur Bildschirmbreite */
    }

    #city-selector {
        font-size: calc(10px + 1vw); /* Proportional zur Bildschirmbreite */
        padding: 0.4vw 0.8vw; /* Proportional zur Bildschirmbreite */
    }

    .footer-button-container {
        padding: 1vw; /* Proportional zur Bildschirmbreite */
    }
}

/* Große Desktops und Widescreens */
@media (min-width: 1201px) {
    #svgContainer {
        padding-top: 13vw; /* Add top padding */
    }

    svg {
        width: 100%;
        height: 95%;
    }

    .train1, .train2, .train3 {
        transform: scale(1.1); /* Leicht vergrößert */
    }

    .styled-element {
        font-size: calc(10px + 0.8vw); /* Proportional zur Bildschirmbreite */
        padding: 0.6vw; /* Proportional zur Bildschirmbreite */
        border-radius: 0.6vw; /* Proportional zur Bildschirmbreite */
    }

    .controls-container {
        top: 25vw; /* Adjusted to be relative to the viewport width */
        left: 50%;
    }

    #random-destination {
        font-size: calc(10px + 0.8vw); /* Proportional zur Bildschirmbreite */
        width: 20vw; /* Proportional zur Bildschirmbreite */
    }

    #generate-destination {
        font-size: calc(10px + 0.8vw); /* Proportional zur Bildschirmbreite */
    }

    #city-selector {
        font-size: calc(10px + 0.8vw); /* Proportional zur Bildschirmbreite */
        padding: 0.3vw 0.6vw; /* Proportional zur Bildschirmbreite */
    }

    .footer-button-container {
        padding: 0.8vw; /* Proportional zur Bildschirmbreite */
    }
}