body {
    font-family: 'montserrat';
    margin-left: 50px;
    margin-right: 50px;
}

@media screen and (max-width: 768px) {
    body {
        margin-left: 10px;
        margin-right: 10px;
    }
}


/* Tabellenstil */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

/* Zellen-Styling */
th, td {
    padding: 10px;
    border: 1px solid #42a5f5;
}

/* Hintergrundfarbe für jede zweite Zeile */
tr:nth-child(even) {
    background-color: #e1f5fe;
}

/* Kopfzeilen-Hintergrund */
th {
    background-color: #0d47a1;
    color: white;
}

#karte-container {
    position: relative;
    width: 100%;
    max-width: 800px; /* Beschr채nke die Breite */
    margin: 0 auto;
}

#karte {
    width: 100%;
    height: auto;
}

.arrow {
    position: absolute;
}

#waedenswil-arrow {
    left: 15%;
    top: 29%;
}

#schmerikon-arrow {
    left: 40%;
    top: 29%;
}

#glarus-arrow {
    left: 54%;
    top: 68%;
}

#quinten-arrow {
    left: 68%;
    top: 48%;
}

#badragaz-arrow {
    left: 96%;
    top: 71%;
}

/* Beaufort Farben */
.beaufort-0 { fill: #04a3ff; }
.beaufort-1 { fill: #3db4d0; }
.beaufort-2 { fill: #54bba0; }
.beaufort-3 { fill: #67c46f; }
.beaufort-4 { fill: #77cc3d; }
.beaufort-5 { fill: #c2c902; }
.beaufort-6 { fill: #eac702; }
.beaufort-7 { fill: #eab102; }
.beaufort-8 { fill: #eb8602; }
.beaufort-9 { fill: #d55c02; }
.beaufort-10 { fill: #ba3310; }
.beaufort-11 { fill: #9e1214; }
.beaufort-12 { fill: #7b1562; }

/* Beaufort Farben */
        .beaufort-0 { color: #04a3ff; }
        .beaufort-1 { color: #3db4d0; }
        .beaufort-2 { color: #54bba0; }
        .beaufort-3 { color: #67c46f; }
        .beaufort-4 { color: #77cc3d; }
        .beaufort-5 { color: #c2c902; }
        .beaufort-6 { color: #eac702; }
        .beaufort-7 { color: #eab102; }
        .beaufort-8 { color: #eb8602; }
        .beaufort-9 { color: #d55c02; }
        .beaufort-10 { color: #ba3310; }
        .beaufort-11 { color: #9e1214; }
        .beaufort-12 { color: #7b1562; }

.pfeil {
    width: 40px;
    height: 40px;
    transform-origin: center;
}

/* Scrollbarer Tabellen-Container */
.table-container {
    width: 100%;
    overflow-x: auto; /* Ermöglicht horizontales Scrollen */
}

/* Entfernt den horizontalen Overflow von der Tabelle */
table {
    min-width: 600px; /* Oder eine andere Mindestbreite, falls gewünscht */
    width: 100%;
}

.icons {
    width: 150px !important;
    height: 150px !important;
}