*{
    margin: 0;
    padding: 0;
    width: auto;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Füllt mindestens die volle Bildschirmhöhe */
  margin: 0;
}

.header {
    padding: 75px 0; /* Padding oben/unten 75px, links/rechts 0 für präzises Margin */
    height: 75px; 
    width: 100%;
    background-image: url("bannerZ.jpeg");
    background-size: cover; /* 'cover' füllt den Header meist schöner aus als 'auto' */
    background-position: center;
    
    /* Flexbox für die Positionierung des Logos */
    display: flex;
    align-items: center; /* Zentriert das Logo vertikal innerhalb der 75px Höhe */
    box-sizing: border-box; /* Wichtig, damit Padding die Gesamtgröße nicht sprengt */
}

.logo {
    height: 140px; /* Testweise feste Höhe statt 100% */
    width: auto;
    display: block; /* Stellt sicher, dass es als Block-Element behandelt wird */
}

.logo-link {
    margin-left: 25%; /* Margin jetzt hier, damit die Position bleibt */
    display: flex;    /* Hilft bei der vertikalen Ausrichtung */
    align-items: center;
    text-decoration: none;
}

.navbar { /*Navbar oben*/
    background-color: black; 
    padding: 16px; /*Erstellt Innenraum zw. Inhalt und Rand (16px) -> skaliert automatisch*/
    display: flex;
    justify-content: center;
    position: sticky; /* Navbar bleibt oben beim scrollen */
    top: 0;
    width: 100%;
   z-index: 1000;
}

.nav-links { /*Liste der Links*/
    list-style-type: none; 
    display: flex; 
    gap: 30px; /*Abstand zwischen den Links*/ 
    margin: 0; 
    padding: 0;
    font-size: 20px;
}

.nav-links li {
    position: relative;
}

.nav-links a {/*Styling der Links*/
    padding-bottom: 4px;
    color: white; 
    text-decoration: none; 
    font-weight: bold;
    display: block;
}

.nav-links a:hover {
    color: red;
}
/*   .nav-links a:hover {opacity: 1;} */

.dropdown-content { /*versteckt*/
    visibility: hidden;
    position: absolute; /*Position direkt unterm Reiter*/
    background-color: rgb(0, 0, 0);
    width: 150px;
    list-style: none;
    padding: 5; 
}

.dropside-content {
    visibility: hidden;
    position: absolute; /* Positioniert es exakt rechts oben neben das Fußball-LI */
    top: 0;
    left: 100%; 
    background-color: rgb(10, 10, 10);
    list-style: none;
    padding-left: 3px;
    padding-bottom: 3px;
    margin: 0;
    min-width: 150px;
}

.dropdown-content li {
    position: relative;
}

.dropdown:hover .dropdown-content { /* Menü anziegen, wenn man über das Eltern-li hovert */
    visibility: visible;
}

.dropdown-content li:hover > .dropside-content {
    visibility: visible;
}

/* Grundsätzliches Styling für den Hamburger (auf Desktop versteckt) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle span {
    width: 30px;
    height: 5px;
    background-color: white;
}

/* --- MOBILE STYLES (768px) --- */
@media (max-width: 768px) {
        .links, .rechts {
        display: none;
    }

    .mitte {
        width: 100%;
    }
    
   .navbar {
        padding: 32px;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;

    }

    .nav-links {
       flex-direction: column; /*untereinander*/ 
       align-items: center;
    }

       .nav-links li {
        width: 100%;
    }

    .menu-toggle {
        display: flex;
        position: absolute; 
        right: 20px;
        top: 8px;
    }

    .nav-links {
        display: none; /* Erstmal verstecken */
        flex-direction: column;
        width: 100%;
        text-align: left;
        padding-top: 20px;
    }

    .nav-links.active {
        display: flex; /* Anzeigen, wenn geklickt */
    }

    /* Menü-Struktur untereinander statt nebeneinander */
    .dropdown-content, .dropside-content {
        display: none; /* Mit display:none statt visibility arbeiten */
        position: static; 
        width: 100%;
        background-color: #1a1a1a;
        padding-left: 20px;
    }

    /* Wenn "open" Klasse gesetzt ist (via JS) */
    .dropdown-content.open, .dropside-content.open {
        display: block;
    }

 

    /* Hover auf Mobile deaktivieren (verwirrt nur) */
    .dropdown:hover .dropdown-content, 
    .dropdown-content li:hover > .dropside-content {
        visibility: visible; /* bleibt für Desktop, wird aber durch display:none übersteuert */
    }

    .strip-container {
        flex-wrap: wrap; /* Bilder rutschen untereinander, wenn der Platz nicht reicht */
        gap: 20px;
    }
    
    .strip-container img {
        max-height: 60px; /* Auf dem Handy etwas kleiner */
    }

}

.main {
    display: flex;
    flex-wrap: wrap; /*erlaubt den Umbruch in die nächste Zeile*/
    flex: 1; /*Footer bleibt am Boden*/
}

.widget {
   flex: 1; 
}

.dropdown:hover .dropdown-content { /* Menü anziegen, wenn man über das Eltern-li hovert */
    visibility: visible;
}


div {
 display: block;
 unicode-bidi: isolate;   
}

p {
    margin-top: 3px;
}

a{
    padding-bottom: 4px;
    color: white; 
    text-decoration: none; 
    font-weight: bold;
    display: block;
}

h1 {
    color: red;
    font-size:30px; 
    text-align: center;
    margin-top: 30px;} 

h2 {
    font-size: 25px;
    margin-top: 30px;
    margin-bottom: 10px;
    color: red;
}

h3 {
    margin-top: 20px;
    color: red;  
}

.footer {
    padding: 20px; 
    background-color: black;
    position: bottom;
    align-items: center;
}

.footertext {
    color: white; 
    text-align: center;
    font-size: 1rem;
}

.footerbild{
    width: 28px;
}

.msgbox {
    margin: 5px;
    margin-left: 0;
    width: 50%;
    height: 250px;
    padding: 10px;
    
}

.sponsorenReihe { /*Sponsoren Wand*/
    display: flex; /*Flexbox*/
    flex-wrap: wrap; /*Das ist der entscheidende Teil für den Zeilenumbruch*/
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding: 20px 0;
}

.sponsorenRahmen {
    border: 2px solid grey;
    border-radius: 18px;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
    width: 300px;
    height: 300px;
    display: flex; /*Zentiert Logo innerhalb des Logo*/
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Sorgt dafür, dass Border/Padding die 300px nicht vergrößern */
    background-color: white;
}

.sponsorenLogo {
    padding: 3px;
    max-width: 100%; /*verhindert, dass das Logo aus dem Rahmen bricht*/
    max-height: 100%;
    height: auto;
    object-fit: contain; /*behält Proportionen*/
}

.kontakteReihe {
    display: flex; /*Flexbox*/
    flex-wrap: wrap; /*Das ist der entscheidende Teil für den Zeilenumbruch*/
    justify-content: center;
    width: 100%;
    gap: 10px;
    padding: 20px 0;
}

.kontakteRahmen {
    width: 300px;
    height: 400px;

}

.kontakteFotos {
    border-radius: 18px;
    padding: 5 px;
    max-width: 100%; /*verhindert, dass das Logo aus dem Rahmen bricht*/
    max-height: auto;
    height: auto;
    object-fit: contain; /*behält Proportionen*/
}



/*Über uns*/

.ueber-uns {
    padding: 50px 10%;
    text-align: center;
    /*background-color: #f9f9f9;*/ /* Leichter Kontrast zum weißen Hintergrund */
}

.werte-reihe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

.wert-box {
background: white;
    border-bottom: 4px solid #cc0000;
    padding: 30px;
    width: 250px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;

    /* NEU: Die Box wird selbst zum Flex-Container */
    display: flex;
    flex-direction: column; 
    align-items: center; /* Zentriert den Inhalt horizontal */
}

.wert-bild {
width: 190px;
    height: auto !important; /* Verhindert das Stauchen */
    
    /* DER TRICK: Schiebt das Bild ganz nach unten */
    margin-top: auto; 
    
    padding-top: 20px; /* Optionaler Abstand zum Text darüber */
}

.wert-box:hover {
    transform: translateY(-10px);
}




/*Galeria*/
.galerie {
    border-bottom: 3px solid rgb(0, 0, 0);
    margin: 2px;
    gap: 20px;          /* Erzeugt automatisch Abstand zwischen den Karten */
    justify-content: center; /* Zentriert die Karten, falls in einer Zeile Platz übrig ist */
    align-items: center;
}

details {
    background: #f4f4f4;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
}

summary {
    font-weight: bold;
    font-size: 1.2rem;
    outline: none;
    list-style: none; /* Entfernt den Standard-Pfeil (optional) */
    color: red;
}

/* Optional: Ein eigener Pfeil, der sich dreht */
summary::before {
    content: "▶ ";
    display: inline-block;
    transition: transform 0.3s;
}

details[open] summary::before {
    transform: rotate(90deg);
}

.collapsible-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 15px;
}

.galerieBilder {
    width: 100%;
    max-width: 400px;

    height: auto;

    display: block;
    object-fit: contain;
}




/*Für die Sponsorenleiste unten*/
.strip-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    align-items: center;
    gap: 30px;
}

.strip-container img {
/* Breite begrenzt, Höhe passt sich an */
    max-width: 180px; 
    height: 80px;
    /* Sicherheitshalber, falls Flexbox drückt: */
    flex-shrink: 0; 
    
}

.strip-container img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

details {
    background: #f4f4f4;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
}




/* Grundstyling News-Card im index*/
.news-container {
    display: flex;        /* Aktiviert Flexbox */
    flex-wrap: wrap;    /* Erlaubt den Umbruch in die nächste Zeile */
    gap: 20px;          /* Erzeugt automatisch Abstand zwischen den Karten */
    justify-content: center; /* Zentriert die Karten, falls in einer Zeile Platz übrig ist */
    padding: 20px;
    width: 100%;        /* Nutzt den verfügbaren Platz */
}

.news-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  overflow: hidden; /* Damit das Bild oben die Rundung nicht überdeckt */
  transition: transform 0.3s ease;
  margin-top: 10px;
  margin-bottom: 10px;
  flex: 1 1 300px;
  max-width: 400px;
}

.news-card:hover {
  transform: translateY(-5px); /* Kleiner "Lift" beim Drüberfahren */
}

/* Bild-Styling */
.news-image {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Verhindert Verzerrung */
}

/* Text-Container */
.news-content {
  padding: 20px;
}

.news-headline {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
  color: #333;
}

.news-excerpt {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Button-Styling */
.news-button {
  display: inline-block;
  background-color: #ff0000;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.2s;
}

.news-button:hover {
  background-color: #0056b3;
}




/*Grundaufbau main*/
.mitte {
    background-color: rgb(245, 245, 245);
    flex: 1 1 70%;
    padding: 20px;
    border-bottom: 1px solid lightgray;
}

.links{
background-color: rgb(245, 245, 245);
    flex: 1 1 15%;
    
}

.rechts {
    background-color: rgb(245, 245, 245);
    flex: 1 1 15%;

}

.sponsoren-leiste {
    width: 100%;
    background-color: #fff; /* Hintergrundfarbe nach Wunsch */
    padding: 20px 0;        /* Abstand nach oben/unten */
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}