body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1DA1F2; /* Helles Grau für den Hintergrund */
}

header {
    background-color: #001f3f; /* Dunkelblau für den Header */
    color: white;
    padding: 20px;
    text-align: center;
}

.logo {
    max-width: 150px; /* Logo-Größe anpassen */
}

.navbar {
    margin-top: 10px; /* Abstand zum Titel */
}

.navbar ul {
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Elemente zentrieren */
    list-style-type: none; /* Entfernt Aufzählungszeichen */
    padding: 0; /* Entfernt Innenabstand */
    margin: 0; /* Entfernt Außenabstand */
}

.navbar li {
    margin: 0 15px; /* Abstand zwischen den Menüpunkten */
}

.navbar a {
    display: inline-block; /* Macht Links klickbar */
    color: #ffffff; /* Weiß für die Links */
    padding: 10px 15px; /* Innenabstand */
    text-decoration: none; /* Entfernt Unterstreichung */
    transition: background-color 0.3s, transform 0.3s; /* Sanfter Übergang für Hintergrund- und Transformationsfarbe */
    border-radius: 5px; /* Abgerundete Ecken hinzufügen */
}

.navbar a:hover,
.navbar a:focus { /* Fokuszustand hinzugefügt */
    background-color: #0074d9; /* Hellblau bei Hover/Fokus */
    transform: translateY(-2px); /* Leichte vertikale Verschiebung bei Hover */
}

.content {
    display: flex;
    padding: 20px;
}

.main-section {
    flex: 3; /* Hauptbereich nimmt 3 Teile ein */
    margin-right: 20px; /* Abstand zwischen Hauptbereich und Sidebar */
}

.section {
    background-color: white; /* Weißer Hintergrund für die Abschnitte */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 20px;
    transition: transform 0.3s; /* Animation hinzufügen */
}

.section:hover {
    transform: scale(0.98); /* Nur leicht verkleinern bei Hover */
}

.live-broadcast {
    background: linear-gradient(45deg, #245678, #0074d9, #4a90e2); /* Farbverlauf für die Live-Sendung */
    color: white; /* Textfarbe bleibt weiß */
}

.live-broadcast h2 {
    color: white; /* Weiß für die Überschrift in der Live-Sendung */
}

h2 {
    color: #333; /* Dunkelgrau für andere Überschriften */
}

.cta-button {
    background-color: #0074d9; /* Hellblau für Schaltflächen */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s; /* Sanfter Übergang für die Schaltfläche */
    margin-right: 10px; /* Abstand zwischen Schaltflächen */
}

.cta-button:hover {
    background-color: #0056a3; /* Dunkleres Blau bei Hover */
}

.sidebar {
    flex: 1; /* Sidebar nimmt 1 Teil ein */
    background-color: #001f3f; /* Dunkelblau für die Sidebar */
    color: white;
    padding: 20px;
    border-radius: 5px;
}

.sidebar h2 {
    color: #ffffff; /* Weiß für die Überschrift */
}

.sidebar ul {
    list-style-type: none;
    padding: 0;
}

.sidebar li a {
    color: #ffffff; /* Weiß für die Links */
    padding: 10px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s; /* Sanfter Übergang für die Sidebar-Links */
    border-radius: 5px; /* Abgerundete Ecken für Sidebar-Links */
}

.sidebar li a[href="live-stream/live.html"] {
    background-color: #0074d9; /* Hellblau für den aktiven Link */
    font-weight: bold; /* Fettdruck für den aktiven Link */
    border: 2px solid #ffffff; /* Weißer Rahmen für den aktiven Link */
}

.sidebar li a[href="live-stream/live.html"]:hover,
.sidebar li a[href="live-stream/live.html"]:focus { /* Fokuszustand hinzugefügt */
    background-color: #0056a3; /* Dunkleres Blau bei Hover/Fokus */
}

footer {
    background-color: #001f3f; /* Dunkelblau für den Footer */
    color: white;
    text-align: center;
    padding: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column; /* Navigation bei kleinen Bildschirmen stapeln */
        margin: 10px 0; /* Abstand nach oben und unten */
    }
    .navbar li {
        margin: 10px 0; /* Abstand zwischen den vertikalen Menüpunkten */
    }
}