styles.css

header {
    text-align: center;
    margin-bottom: 2rem;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 2rem auto;
    padding: 0 1rem;
    background-color: #f9f9f9;
}
footer {
    text-align: center;
}
img {
    max-width: 80%;
    height: auto;
}
h1 {
    color: #333,
}
p {
    font-size: 18px;
}
#subtitle, #ToC {
    color: #333;
}
h2, h3, h4 {
    color: #007BFF;
    text-align: center;
}
#navToC {
    margin: 0 auto;
    width: fit-content;
}
#navToC ol {
    counter-reset: section; /* Reset der Zähler */
}

#navToC ol > li {
    counter-increment: section; /* Erhöht die Sektion */
    list-style-type: none; /* Entfernt den Standardlistenstil */
}

#navToC ol > li::before {
    content: counters(section, ".") " "; /* Fügt z. B. 2.1, 2.2 hinzu */
}

.map-container {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.map-container div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

iframe {
    width: 90%;
    height: 400px;
    border: none;
    display: block;
    margin: 0 auto;
    background-color: #007BFF;
}
a {
    color: #007BFF;
}

.button-link {
    display: inline-block;
    background-color: #007BFF; /* Button background */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding for size */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    font-size: 18px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

.button-link:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.color-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    border: 1px solid #000;
    opacity: 0.5;
}
/* Farbe der Bullets für Bus Stops */
.color-box.bus + ul li::marker {
    content: "●";
    color: #969696;
}
.color-box.bus {
    background-color: #333333;
}

/* Farbe der Bullets für Subway Stations */
.color-box.subway + ul li::marker {
    content: "●";
    color: #afafaf;
}
.color-box.subway {
    background-color: #666666;
}

/* Farbe der Bullets für Football Stadiums */
.color-box.soccer + ul li::marker {
    content: "●";
    color: #84a3c2; /* Steel blue for Football stadiums */
}
.color-box.soccer {
    background-color: #104E8B;
}

/* Farbe der Bullets für Big Event Places */
.color-box.event + ul li::marker {
    content: "●";
    color: #8bc4fc; /* Sky blue for Big event places */
}
.color-box.event {
    background-color: #1E90FF;
}

/* Farbe der Bullets für Sightseeings */
.color-box.sightseeing + ul li::marker {
    content: "●";
    color: #c29f7c; /* Gold for Sightseeings */
}
.color-box.sightseeing {
    background-color: #8B4500;
}

/* Farbe der Bullets für Royal Parks */
.color-box.park + ul li::marker {
    content: "●";
    color: #afe37c; /* Lime green for Royal parks */
}
.color-box.park {
    background-color: #66CD00;
}