/* --- BASIS & RESET --- */
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin: 0; padding: 0; overflow-x: hidden; background-color: #f4f4f4; color: #333; }

/* --- NAVIGATION --- */
.menubar { position: fixed; top: 0; width: 100%; z-index: 1000; background: #ff3333; height: 50px; }
nav { padding: 0 15px; display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; height: 100%; }
.menu { list-style: none; display: flex; margin: 0; padding: 0; width: 100%; justify-content: space-around; }
.menu a { text-decoration: none; color: white; padding: 15px; display: block; font-weight: bold; }
.menu a:hover { background: #cd2626; }
.menu-toggle { display: none; cursor: pointer; font-size: 28px; color: white; }

.submenu { display: none; position: absolute; background: #ff3333; list-style: none; padding: 0; width: 180px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.dropdown:hover .submenu { display: block; }



/* --- HOMESCREEN --- */
.homescreen { position: relative; margin-top: 2.5vw; width: 100%; overflow: hidden; line-height: 0; }
.homescreen img { width: 100%; height: auto; display: block; }
.Wellkom {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 30, 30, 0.95);
    
    /* Box-Größe flexibel halten */
    padding: 15px 30px; 
    width: 100%;          /* Wichtig: Nutzt auf kleinen Screens 90% der Breite */
    max-width: 600px;    /* Deckelt die Breite auf großen Screens */
    min-width: auto;     /* Entfernt die starre Mindestbreite */
    
    border: none;
    border-radius: 8px;
    text-align: center;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    
    /* Verhindert, dass die Box den Inhalt abschneidet */
    display: flex;
    justify-content: center;
    align-items: center;
}

.Wellkom h1 {
    color: white;
    margin: 0;
    
    /* Dynamische Schriftgröße: 
       Mindestens 16px, skaliert mit 4% der Bildschirmbreite, maximal 32px */
    font-size: clamp(10px, 2vw, 32px); 
    
    /* Zeilenabstand für Umbrüche korrigieren */
    line-height: 1.2; 
    
    /* Text-Transformation und Umbruch-Einstellung */
    word-wrap: break-word;
    hyphens: auto;
    text-transform: uppercase;
}
/* --- LAYOUT CONTAINER --- */
.main-container {
    max-width: 100% !important; /* Nutzt fast die gesamte Bildschirmbreite, genau wie der Spielplan oben */
    width: 100%;
    margin: 0 auto;
    padding: 0;
    
}


/* 1. Ergebnisse über die KOMPLETTE Breite des Containers */
.full-width-section-outer {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #fff;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
/* 2. Der innere Inhalt wird auf die max-Breite (z.B. 1200px) begrenzt und zentriert */
.full-width-content {
    width: 95%; /* Nutzt fast die gesamte Bildschirmbreite */
    max-width: 1800px; /* Begrenzung für extrem breite Monitore */
    margin: 0 auto;
}

.widget-scroll-box {
    width: 100%;
    height: 650px; /* Höhe für ca. 8 Spiele */
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
}

/* 2. DREI-SPALTEN-SYSTEM (darunter) */
.three-column-layout { display: flex; gap: 20px; align-items: stretch; width:100%;margin-top:30px}
.column { background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.sidebar-left { flex: 0 0 250px;  }
.news-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Dies verhindert, dass die Spalte durch ihren Inhalt wächst */
    min-width: 0;
    max-height: calc(100vh + 400px); /* Optionaler Sicherheitsanker: Begrenzung auf Bildschirmhöhe minus Puffer */
}
.sidebar-right { flex: 0 0 250px;  text-align: center; }

.news-scroll-box {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    /* SCROLL-LOGIK */
    overflow-y: auto !important; /* Erzwingt den Scrollbalken */
    flex: 1;
    min-height: 0; /* Zwingt Flexbox, den Inhalt zu verkleinern */
    
    padding: 15px;
}

.Social {
    width: 100%;           /* Nutzt die volle Breite des Containers */
    text-align: center;    /* Zentriert alle Inhalte (die Icons) in der Mitte */
    display: block;        /* Stellt sicher, dass der Container als Block fungiert */
    margin-bottom: 15px;
}

.Social a {
    display: inline-block; /* Erlaubt den Icons, nebeneinander zu stehen und zentriert zu werden */
    margin: 0 5px;         /* Erzeugt einen kleinen Abstand zwischen den Icons */
    text-decoration: none;
}

.Social img.ein {
    width: 45px;           /* Die Größe deiner Icons */
    height: auto;
    vertical-align: middle; /* Verhindert kleine Versätze nach unten */
}

/* Statische Galeriebox bündig zu den News */
.gallery-static-box {
    width: 100%;
    height: auto; /* Gleiche Höhe wie News & Spielplan */
    background: #f9f9f9;
    border: 1px solid #C8C8C8;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gallery-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gallery-preview-image {
    width: 100%;
    height: 300px; /* Obere Hälfte Bild */
    background-size: cover;
    background-position: center;
    position: relative;
}

.gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}

.gallery-link:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay span {
    color: white;
    font-weight: bold;
    border: 2px solid white;
    padding: 10px 15px;
}

.gallery-info {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gallery-info strong {
    color: #ff3333;
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
}

.gallery-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.gallery-button {
    display: block;
    background: #ff3333;
    color: white;
    padding: 12px;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 15px;
    transition: 0.2s;
}

.gallery-link:hover .gallery-button {
    background: #cc0000;
}



/* --- DESIGN ELEMENTE --- */
.h5, .h4 { color: white; background: #ff3333; padding: 10px; text-align: center; font-weight: bold; margin-bottom: 15px; border-radius: 4px; font-size: 16px; }
.h6 {color: white; background: #ff3333; padding: 10px; text-align: center; font-weight: bold; margin-bottom: 15px; border-radius: 4px; font-size: 25px; }
.h7{color: black; padding: 10px; font-weight: bold; margin-bottom: 15px; border-radius: 4px; font-size: 20px;}
img.ein { width: 45px; margin: 5px; }
img.zwei { width: 100%; max-width: 220px; border-radius: 5px; }
a.two { color: #C40808; text-decoration: underline; font-weight: normal; line-height: 2.2; display: inline-block; }
/* --- Download-Links Anpassung --- */
a.three {
    display: block;           /* Macht aus dem Link einen ganzen Block/Balken */
    color: #C40808;           /* Dein gewohntes Rot */
    text-decoration: none;
    font-weight: normal;      /* Nicht mehr fett */
    font-size: 14px;          /* Etwas kleiner */
    
    background-color: #f2f2f2; /* Hellgrauer Hintergrund */
    margin-bottom: 8px;       /* Abstand zwischen den Blöcken */
    padding: 10px 15px;       /* Innenabstand, damit der Text nicht am Rand klebt */
    border-radius: 4px;       /* Leicht abgerundete Ecken */
    
    border-left: 4px solid #ff3333; /* Optional: Ein roter Streifen links als Akzent */
    transition: all 0.2s ease-in-out;
    width: 100%;              /* Nutzt die volle Breite der Sidebar */
}

/* Effekt beim Drüberfahren (Hover) */
a.three:hover {
    background-color: #e8e8e8; /* Hintergrund wird beim Hover etwas dunkler */
    color: black;
    transform: translateX(5px); /* Kleiner Bewegungseffekt nach rechts */
}



/* --- RESPONSIVE ANPASSUNGEN --- */
@media (max-width: 1024px) {
    .three-column-layout {
        display: flex;
        flex-direction: column; /* Stapelt die Elemente untereinander */
    }

    /* News sollen ganz nach oben (Order 1) */
    .news-section {
        order: 1;
        width: 100%;
    }

    /* Social Media & Downloads rutschen darunter (Order 2) */
    .sidebar-left {
        order: 2;
        width: 100%;
    }

    /* Der Vereinsshop kommt ganz nach unten (Order 3) */
    .sidebar-right {
        order: 3;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .menu { display: none; flex-direction: column; position: absolute; top: 50px; left: 0; width: 100%; background: #ff3333; }
    .menu.active { display: flex; }
    .menu-toggle { display: block; }
    .homescreen {margin-top:12vw}
    .Wellkom {width:50%;height:50%}
    
}

@media (min-width: 1201px) {
    .full-width-content {
        max-width: 95%; /* Fast bis zum Rand bei sehr großen Bildschirmen */
    }
}

/* --- FOOTER --- */
.footer-container {
    background-color: #f9f9f9;
    padding: 40px 0;
    border-top: 1px solid #C8C8C8;
    width: 100%;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    padding: 0 20px;
}

.footer-left {
    flex: 1;
    text-align: left;
}

.footer-right {
    flex: 2;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-form input, 
.contact-form textarea {
    padding: 12px;
    border: 1px solid #C8C8C8;
    border-radius: 5px;
    font-family: inherit;
    width: 100%;
}

.captcha-box {
    background: #eee;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
}

.submit-button {
    background-color: #ff3333;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.submit-button:hover {
    background-color: #cc0000;
}

.form-error {
    background-color: #ffd2d2;
    color: #d8000c;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #d8000c;
    font-size: 14px;
}

.form-success {
    background-color: #dff2bf;
    color: #4f8a10;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    border: 1px solid #4f8a10;
    font-size: 14px;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    .footer-left {
        text-align: center;
        margin-bottom: 30px;
    }
}

/* Der äußere Footer-Balken */
.footer {
    background-color: #333; /* Dunkler Hintergrund für den Abschluss */
    color: white;
    padding: 15px 0;
    width: 100%;
}


/* Container für den Slider */
.sponsor-slider {
    width: 100%;
    overflow: hidden; /* Alles, was über den Rand geht, verstecken */
    background: #333;
    padding: 20px 0;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    display: flex;
}

/* Der Pfad, auf dem die Logos laufen */
.sponsor-track {
    display: flex;
    width: calc(250px * 28); /* Breite eines Logos * Anzahl der Logos (inkl. Duplikate) */
    animation: scroll 55s linear infinite;
}

/* Pause beim Drüberfahren mit der Maus */
.sponsor-track:hover {
    animation-play-state: paused;
}

/* Einzelnes Sponsor-Logo */
.sponsor-track a {
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
}

.sponsor-track img {
    max-width: 150px;
    height: auto;
    
    transition: filter 0.3s;
}



/* Die Animation */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 14)); } /* Schiebe um die Hälfte der Logos nach links */
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .sponsor-track a {
        width: 150px;
    }
    @keyframes scroll {
        100% { transform: translateX(calc(-150px * 4)); }
    }
}

/* Der Inhalts-Container */
.footer-bottom-content {
    max-width: 1200px; /* Gleiche Breite wie der Rest der Seite */
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Links nach links, Rechts nach rechts */
    align-items: center;
    padding: 0 20px;
}

/* Die Link-Liste am linken Rand */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 25px; /* Abstand zwischen Start und Impressum */
}

.footer-links li a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.2s;
}

.footer-links li a:hover {
    color: #ff3333; /* Vereins-Rot beim Drüberfahren */
}

/* Der Copyright-Hinweis am rechten Rand */
.copy-right {
    margin: 0;
    font-size: 14px;
    color: #ccc;
}

/* Mobile Optimierung: Untereinander stapeln, wenn es zu eng wird */
@media (max-width: 600px) {
    .footer-bottom-content {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}



/* Scrollbar Styling */
/* --- Scrollbar mit Pfeilen --- */

/* 1. Grundbreite der Scrollbar */
::-webkit-scrollbar {
    width: 14px; /* Etwas breiter, damit die Pfeile gut klickbar sind */
}

/* 2. Die Spur (Track) */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* 3. Der Schieber (Thumb) */
::-webkit-scrollbar-thumb {
    background: #C8C8C8;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: #A0A0A0;
}


/* 4. DIE PFEILE (Buttons) */
::-webkit-scrollbar-button:single-button {
    background-color: #f1f1f1;
    display: block;
    background-size: 10px;
    background-repeat: no-repeat;
    height: 14px;
    width: 14px;
}

/* Pfeil nach OBEN */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-position: center 4px;
    /* Ein einfaches Dreieck als Hintergrundbild (SVG) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ff1e1e'><polygon points='50,0 0,100 100,100'/></svg>");
}

/* Pfeil nach UNTEN */
::-webkit-scrollbar-button:single-button:vertical:increment {
    background-position: center 2px;
    /* Ein umgedrehtes Dreieck als Hintergrundbild (SVG) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23ff1e1e'><polygon points='50,100 0,0 100,0'/></svg>");
}

/* Effekt beim Drüberfahren über die Pfeile */
::-webkit-scrollbar-button:single-button:hover {
    background-color: #e0e0e0;
}

/* --- Fallback für Firefox (unterstützt leider keine Buttons/Pfeile) --- */
* {
    scrollbar-width: thin;
    scrollbar-color: #C8C8C8 #f1f1f1;
}




/* Grundsätzliche Absicherung für die News-Box */
.news-scroll-box {
    width: 100%;
    overflow-x: hidden; /* Verhindert horizontales Scrollen der ganzen Seite */
}

.news-scroll-box table {
    width: 100% !important;
    table-layout: fixed; /* Zwingt die Tabelle, in der Breite zu bleiben */
    border-collapse: collapse;
}

.news-scroll-box td.zeile1 {
    width: 100%;
    word-wrap: break-word;      /* Bricht lange Wörter (wie URLs) um */
    overflow-wrap: break-word;   /* Moderne Variante für Umbrüche */
    box-sizing: border-box;     /* Padding wird in die Breite eingerechnet */
    padding: 20px;
    border-bottom: 1px solid #ddd; /* Dezente Trennlinie */
    line-height: 1.6;
    background-color: #ffffff; /* Standard: Weiß */
}
/* Jeder zweite Beitrag bekommt den hellgrauen Hintergrund */
.news-scroll-box tr:nth-child(even) td.zeile1 {
    background-color: #f9f9f9; /* Hellgrau */
}

/* Hover-Effekt: Der Beitrag wird leicht hervorgehoben, wenn man drüberfährt */
.news-scroll-box tr:hover td.zeile1 {
    background-color: #f2f2f2;
    transition: background-color 0.3s ease;

}

/* Bilder innerhalb der News absichern */
.news-scroll-box img {
    max-width: 100% !important; /* Bild darf niemals breiter als der Text sein */
    height: auto !important;
    display: block;
    margin: 15px auto;          /* Zentriert das Bild sauber */
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Den <center> Tag bändigen (der oft Probleme macht) */
.news-scroll-box center {
    width: 100%;
    display: block;
}



@media (max-width: 768px) {
    /* Die Tabelle als Block anzeigen, damit sie nicht starr bleibt */
    .news-scroll-box table, 
    .news-scroll-box tbody, 
    .news-scroll-box tr, 
    .news-scroll-box td {
        display: block !important;
        width: 100% !important;
    }

    .news-scroll-box td.zeile1 {
        padding: 15px !important;
        font-size: 14px; /* Etwas kleinere Schrift für mehr Übersicht */
    }

    /* Falls du <br> Tags hast, die zu viel Platz fressen */
    .news-scroll-box br {
        content: "";
        display: block;
        margin: 5px 0;
    }
}



/* Container-Styling */
.team-section {
   flex: 1; /* Nimmt automatisch 100% des verbleibenden Platzes ein */
    min-width: 0; /* Verhindert, dass die Spalte bei großem Inhalt das Layout sprengt */
}
.team-header {
    margin-top: -18px;
}


/* Mannschaftsfoto */
.team-main-image {
    width: 80%;
    display: block;        /* Macht das Bild zu einem Block-Element */
    margin-left: auto;     /* Schiebt den linken Außenabstand auf Maximum */
    margin-right: auto;    /* Schiebt den rechten Außenabstand auf Maximum */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
   
}



/* Info-Grid (Trainer & Zeiten) */
.team-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.info-card {
    background: #f9f9f9;
    padding: 20px;
    border-left: 5px solid #ff3333;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.info-card h3 {
    margin-top: 0;
    color: #333;
}

.trainer-mail-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background: #ff3333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
}

.trainer-mail-btn:hover {
    background: #cc0000;
}

.training-card ul {
    list-style: none;
    padding-left: 0;
}

.training-card li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

/* Widget Bereich */
.team-widgets {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.widget-container h3 {
    border-left: 5px solid #333;
    padding-left: 10px;
    margin-bottom: 15px;
}




/*Impressum & Satzung & Chronik */

.title { margin-top: -18px;}


/* Container für die gesamte Event-Tabelle */

.event-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Gemeinsame Stile für Kopfzeile und Datenzeilen */
.event-header, .event-row {
    display: flex;
    width: 100%;
    box-sizing: border-box; /* Wichtig, damit Padding die 100% nicht überschreitet */
    padding: 15px;
    border-bottom: 1px solid #eee;
    align-items: center;
}

/* Styling der Kopfzeile */
.event-header {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

.events-title { margin-top: -18px;
}

/* Spalten-Verteilung korrigiert */
.event-col {
    padding: 0 10px;
    box-sizing: border-box;
    align-items: center; /* Zentriert den Inhalt innerhalb der Spalte */
    line-height: 1.2;    /* Erzwingt gleiche Texthöhe */
}

.event-col.date { flex: 1; } /* Feste Breite für Datum */
.event-col.title { flex: 2; }        /* Titel bekommt mehr Platz */
.event-col.info { flex: 1; }         /* Info bekommt den Rest */

/* WICHTIG: Damit die Main-Spalte selbst wächst */
.column.events-section {
    flex: 1; /* Nimmt automatisch 100% des verbleibenden Platzes ein */
    width: 100%;
    min-width: 0; /* Verhindert, dass die Spalte bei großem Inhalt das Layout sprengt */
}

.content-wrapper {
    flex: 1; /* Nimmt den GESAMTEN restlichen Platz ein */
    min-width: 0; /* Wichtig für Flexbox-Berechnungen */
    width: 100%;
}


/* 1. DER FARBVERLAUF (Zebra-Effekt) */
/* Jede gerade Zeile bekommt einen ganz leichten Grauton */
.event-row:nth-child(even) {
    background-color: #fcfcfc;
}

/* Jede ungerade Zeile bekommt ein sehr helles Rot/Weiß passend zum Verein */
.event-row:nth-child(odd) {
    background-color: #ffffff;
}

/* Hover-Effekt bleibt, damit man sieht, wo man gerade mit der Maus ist */
.event-row:hover {
    background-color: #f1f1f1 !important;
}

/* 2. MOBILE OPTIMIERUNG & BESCHRIFTUNGEN */
@media (max-width: 768px) {
    .event-header {
        display: none; /* Kopfzeile versteckt */
    }

    .event-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        border-bottom: 2px solid #eee;
    }

    .event-col {
        width: 100%;
        padding: 5px 0;
        display: block; /* Damit die Labels über/vor dem Text stehen */
    }

    /* Wir fügen hier die Labels ein, die nur mobil erscheinen */
    .event-col.date::before {
        content: "Datum: ";
        font-weight: bold;
        color: #333;
        display: inline-block;
        width: 100px;
    }

    .event-col.title::before {
        content: "Event: "4;
        font-weight: bold;
        color: #333;
        display: inline-block;
        width: 100px;
    }

    .event-col.info::before {
        content: "Ort: ";
        font-weight: bold;
        color: #333;
        display: inline-block;
        width: 100px;
    }

    .event-col.date {
        font-size: 1.1em;
        margin-bottom: 5px;
    }
}

/* =========================================
   VORSTAND
   ========================================= */

/* Container für die gesamte Vorstand-Tabelle */
.vorstand-table {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Gemeinsame Stile für Kopfzeile und Datenzeilen */
.vorstand-header,
.vorstand-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    border-bottom: 1px solid #eee;
    align-items: center;
}

/* Styling der Kopfzeile */
.vorstand-header {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

/* Spalten */
.vorstand-col {
    padding: 0 10px;
    box-sizing: border-box;
    align-items: center;
    line-height: 1.2;
}

/* Spalten-Verteilung */
/* Genau wie bei der bisherigen Event-Tabelle */
.vorstand-col.position {
    flex: 1;
}

.vorstand-col.name {
    flex: 2;
}

.vorstand-col.contact {
    flex: 1;
}


/* Main-Spalte */
.column.vorstand-section {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.content-wrapper {
    flex: 1;
    min-width: 0;
    width: 100%;
}


/* =========================================
   ZEBRA-EFFEKT
   ========================================= */

.vorstand-row:nth-child(even) {
    background-color: #fcfcfc;
}

.vorstand-row:nth-child(odd) {
    background-color: #ffffff;
}


/* Hover-Effekt */
.vorstand-row:hover {
    background-color: #f1f1f1 !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    /* Kopfzeile auf Mobilgeräten ausblenden */
    .vorstand-header {
        display: none;
    }

    /* Zeile untereinander darstellen */
    .vorstand-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        border-bottom: 2px solid #eee;
    }

    .vorstand-col {
        width: 100%;
        padding: 5px 0;
        display: block;
    }


    /* Mobile Beschriftungen */

    .vorstand-col.position::before {
        content: "Position: ";
        font-weight: bold;
        color: #333;
        display: inline-block;
        width: 100px;
    }

    .vorstand-col.name::before {
        content: "Name: ";
        font-weight: bold;
        color: #333;
        display: inline-block;
        width: 100px;
    }

    .vorstand-col.contact::before {
        content: "Kontakt: ";
        font-weight: bold;
        color: #333;
        display: inline-block;
        width: 100px;
    }


    .vorstand-col.position {
        font-size: 1.1em;
        margin-bottom: 5px;
    }
}


/* Styling für das Sponsoren-Grid */
.sponsoren-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Erzeugt Spalten automatisch */
    gap: 20px;
    margin-top: 20px;
}

.sponsor-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sponsor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.sponsor-card img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.sponsor-intro h1 {
    color: #ff3333;
    margin-bottom: 10px;
}


/* Ändert die Schriftart nur für den Camp-Details-Bereich */
.camp-details {
    font-family: Arial, Helvetica, sans-serif;
    /* Damit die fette Schrift, wie im Bild, auch fett ist */
    font-weight: normal; 
}

/* Fettet die h3/h4 Überschriften und fettgedruckte Begriffe extra an, 
   damit es dem Bild entspricht */
.camp-details h3, .camp-details h4, .camp-details b {
    font-weight: bold;
}