/* Grundlegende Stile */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
    display: flex;
    flex-direction: column; /* Für Sticky Footer */
    min-height: 100vh; /* Für Sticky Footer */
}

/* Header */
.website-header {
    background-color: #89CFF0;
    color: #fff;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Wichtig für Responsivität */
}

.website-header .logo img {
    height: 50px; /* Beispielgröße */
}

/* Navigation */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Desktop: Menü nebeneinander */
}

.main-navigation ul li {
    margin-left: 20px;
}

.main-navigation a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block;
}

.main-navigation a:hover {
    background-color: #555;
    border-radius: 5px;
}

/* Mobiles Menü (standardmäßig versteckt) */
.mobile-menu-toggle {
    display: none; /* Auf Desktop versteckt */
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Inhaltsbereich */
.content-area {
    flex-grow: 1; /* Nimmt den restlichen Platz ein für Sticky Footer */
    padding: 20px;
}

.content-section {
    display: none; /* Standardmäßig alle Inhaltsbereiche verstecken */
}

.content-section.active {
    display: block; /* Aktiven Inhaltsbereich anzeigen */
}

.content-container {
    display: flex;
    gap: 20px; /* Abstand zwischen den Containern */
    flex-wrap: wrap; /* Wichtig für Responsivität: Umbruch auf neue Zeile */
}

.content-box {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    flex: 1; /* Nimmt gleichen Platz ein, falls genug Platz vorhanden */
    min-width: 300px; /* Mindestbreite, damit sie nicht zu klein werden */
    box-sizing: border-box; /* Padding und Border werden in die Breite einbezogen */
}

/* Footer */
.website-footer {
    background-color: #ffffff;
    color: #000000;
    text-align: center;
    padding: 1rem;
    width: 100%; /* Sicherstellen, dass der Footer die volle Breite einnimmt */
}

/* Sponsoren Bilder - Anfang */
.sponsoren-bild {
            width: 100px; /* Breite der Sponsoren-Bilder anpassen */
            height: auto;
            margin-right: 15px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 5px;
        }
 
 .sponsoren-bild2 {
            width: 100px; /* Breite der Sponsoren-Bilder anpassen */
            height: auto;
            background-color: black;
            margin-left: 15px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 5px;				
        }
        
.sponsoren-bild3 {
            width: 275px; /* Breite der Sponsoren-Bilder anpassen */
            height: auto;
            background-color: black;
            margin-left: 15px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 5px;				
        }  
/* Sponsoren Bilder - Ende */

/* Schrift im Impressum - Anfang */        
.schrift {
 font-size: .8em;
 color: black;
}
/* Schrift im Impressum - Ende */

/* Schrift im Terminebereich - Anfang */
.font {
			font-family: Arial, sans-serif;
			text-align: left;
			font-size: 1em;
 			color: black;
}

.heimspiel {
			font-family: Arial, sans-serif;
			text-align: left;
			font-size: 1em;
 			color: red;
}

.ms2 {
			font-family: Arial, sans-serif;
			text-align: left;
			font-size: 1em;
 			color: darkblue;
}

.ms3 {
			font-family: Arial, sans-serif;
			text-align: left;
			font-size: 1em;
 			color: green;
}

.ms4 {
			font-family: Arial, sans-serif;
			text-align: left;
			font-size: 1em;
 			color: brown;
}

.runden {

            color: greenyellow; 
            font-weight: bold;
            font-size: 1em;

            /* Leichter 3D-Effekt mit Schatten */
            /* text-shadow: [horizontaler-versatz] [vertikaler-versatz] [unschärfe] [farbe]; */
            text-shadow: 
                2px 2px 0px #0056b3, /* Ein etwas dunklerer Blauton, leicht versetzt */
                3px 3px 0px #004085, /* Ein noch dunklerer Ton, weiter versetzt */
                4px 4px 5px rgba(0, 0, 0, 5.0); /* Ein weicher, schwarzer Schatten für die Tiefe */

}
       
/* Schrift im Terminebereich - Ende */

/* Bilder - Anfang */

.bilder {
				width: 80%; /* Nimmt 50% des Containers ein */
				display: block; /* Wichtig für margin: auto; */
  				margin: 0 auto; /* Zentriert horizontal */
  				/* 3D-Effekt (Beispiel) */
  				transform: rotateX(20deg) rotateY(30deg);
  				box-shadow: 10px 10px 10px #888888;
}

/* Bilder - Ende */

/* Wichtiger Hinweis auf der Startseite - Anfang */
.wichtiger-hinweis {
  background-color: #fff3cd; /* Ein helles, warmes Gelb für Aufmerksamkeit */
  border: 1px solid #ffe08a; /* Ein etwas dunklerer Rand, der zur Hintergrundfarbe passt */
  border-left: 5px solid #ffc107; /* Ein markanter linker Rand für zusätzlichen Akzent */
  border-radius: 5px; /* Leicht abgerundete Ecken */
  padding: 15px; /* Innenabstand für den Inhalt */
  margin-bottom: 20px; /* Abstand zum nächsten Element */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Dezenter Schatten für einen "erhabenen" Effekt */
  font-family: Arial, sans-serif; /* Eine leicht lesbare Schriftart */
  color: #664d03; /* Eine dunkle Textfarbe, die gut lesbar ist */
}

.wichtiger-hinweis p {
  margin: 0; /* Entfernt den Standard-Margin des Absatzes */
  line-height: 1.6; /* Zeilenhöhe für bessere Lesbarkeit */
}

.wichtiger-hinweis strong {
  color: #ffc107; /* Hebt das "Achtung!" noch stärker hervor */
}
/* Wichtiger Hinweis auf der Startseite - Ende */

/* Gestaltung der Links auf der Kreis Veranstaltungsseite - Anfang  */

/* --- Spezifische Styling-Regeln für #main-link-list --- */
        #main-link-list {
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
            padding: 0;
            width: 80%;
            max-width: 300px;
            margin: 0 auto; /* Kein zusätzlicher unterer Abstand mehr nötig */
        }

        #main-link-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #main-link-list li {
            border-bottom: 1px solid #eee;
            padding: 10px 10px;
        }

        #main-link-list li:last-child {
            border-bottom: none;
        }

        /* --- Gemeinsame Basis-Styles für ALLE Links in #main-link-list --- */
        #main-link-list a {
            text-decoration: none;
            font-weight: bold;
            display: block;
            transition: all 0.3s ease;
            color: #3498db; /* Standardfarbe für alle Links */
        }

        #main-link-list a:hover {
            background-color: #f0f8ff; /* Helleres Blau beim Hover */
            color: #2980b9; /* Dunklere Farbe beim Hover */
            border-radius: 4px;
        }

        #main-link-list a:visited {
            color: #8e44ad; /* Standardfarbe für besuchte Links */
        }

        #main-link-list a:focus {
            outline: 2px solid #3498db;
            outline-offset: 2px;
        }
/* Gestaltung der Links auf der Kreis Veranstaltungsseite - Ende  */        
          

/* Responsive Design für mobile Geräte (Breakpoints anpassen!) */
@media (max-width: 768px) {
    .website-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .main-navigation {
        width: 100%;
    }

    .mobile-menu-toggle {
        display: block; /* Zeige Toggle auf Mobilgeräten */
        align-self: flex-end; /* Rechtsbündig im Header */
    }

    .main-navigation .menu-list {
        display: none; /* Menü standardmäßig versteckt */
        flex-direction: column;
        width: 100%;
        background-color: #444; /* Hintergrund für aufgeklapptes Menü */
    }

    .main-navigation .menu-list.active {
        display: flex; /* Menü anzeigen, wenn aktiv */
    }

    .main-navigation ul li {
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .main-navigation a {
        padding: 1rem;
        border-bottom: 1px solid #555; /* Trennlinien für Menüpunkte */
    }

    .content-container {
        flex-direction: column; /* Div-Container untereinander */
    }

    .content-box {
        min-width: unset; /* Auf mobilen Geräten keine Mindestbreite */
        width: 100%; /* Volle Breite */
    }
}