.burger-icon span {
    background-color: white;
}

.offcanvas-active .burger-icon span {
    background-color: #FFFFFF !important;
}

/* Zwingt das Hamburger-Menü, schon bei Laptops/Tablets (unter 1200px) zu erscheinen */
@media (max-width: 1199px) {
    /* Versteckt das breite Desktop-Menü */
    .sp-megamenu-parent {
        display: none !important;
    }
    
    /* Zeigt das Hamburger-Icon (die 3 Striche) an */
    #offcanvas-toggler {
        display: flex !important; 
        align-items: center;
    }
}

/* Zielt auf die Social Icons in der Liste */
ul.social-icons li [class*="fa-"] {
    font-size: 35px; /* Ändern Sie 30px auf Ihre gewünschte Größe (z.B. 24px, 36px) */
    line-height: 1.5; /* Optional: Stellt sicher, dass das Icon zentriert bleibt */
}

/* Ändert den Fokusring des Primary Buttons in TVI-Lila */
.btn-primary:focus, 
.btn-primary.focus,
.sppb-btn-primary:focus {
    /* Die 0.5 am Ende ist 50% Transparenz */
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important;
    outline: none !important;
}

/* Menütitel in ALL CAPS und weiss */

.sp-menu-heading,
.mod-menu__heading,
.nav-header,
.offcanvas-menu .offcanvas-inner ul.menu > li > ul li a,
.offcanvas-menu .offcanvas-inner ul.menu > li > a {
    color: white; /* Helle Farbe für gute Lesbarkeit */
    text-transform: uppercase !important; /* Alle Zeichen in Großbuchstaben */
    font-size: 20px !important; /* Einheitliche Schriftgröße */
}
#sp-menu ul li a {
    text-transform: uppercase !important;
    font-size: 20px !important;
}

/* Erhöht den vertikalen Abstand der Unterpunkte im Off-Canvas Menü */
.mod-menu__sub.menu-child li {
    padding-bottom: 10px; /* Abstand nach unten */
}

/* Nur Top-Level Einträge im Off-Canvas vergrößern */
.offcanvas-menu .offcanvas-inner ul.menu > li > a, 
.offcanvas-menu .offcanvas-inner ul.menu > li > span {
    font-size: 22px !important; /* Hier den gewünschten Wert eintragen */
    line-height: 1.4;            /* Optional: Zeilenabstand für bessere Lesbarkeit */
    display: block;             /* Stellt sicher, dass das gesamte Feld klickbar ist */
}

/* SPIELTAG COUNTDOWN */
.countdown-container {
    background-color: #181818BF;
    color: #fff;
    padding: 20px;
    /*border-radius: 5px;*/
    text-align: center;
    font-family: sans-serif;
    max-width: 400px;
    margin: 0 auto;
}
.countdown-header {
    margin: 0 0 15px 0;
    font-size: 1.8em;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
}
.countdown-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 1.6em;
}
.bvv-color { color: #9d57b4; font-weight: bold; } /* Dein Lila */
.ek-color { color: #099ae5; font-weight: bold; } /* EK Blau */
.countdown-time { color: #fff; }

/* Matchday Styles */

@keyframes pulse-matchday {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0px rgba(128, 173, 148, 0);
    }
    50% {
        transform: scale(1.05); /* 5% vergrößern */
        text-shadow: 0 0 20px rgba(128, 173, 148, 0.8); /* grünlich Glühen */
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 0px rgba(128, 173, 148, 0);
    }
}

.matchday-hidden { display: none; }
.matchday-visible { 
    display: block; 
    margin-top: 20px;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 2px;
    animation: pulse-matchday 2s infinite ease-in-out;
}


/* STAT Boxen (z.B. Siege, Niederlagen, etc.) */
.boxes-wrapper {
    display: flex;  /* Aktiviert das Flexbox-Layout */
    flex-wrap: wrap;    /* Erlaubt das Umbrechen auf kleine Bildschirme */
    gap: 20px;   /* Abstand zwischen den Boxen */
    justify-content: center;    /* Zentriert die Boxen */
    max-width: 1200px;   /* Maximale Breite des Containers */
}

.info-box {
    /* Das Flex-Property erzwingt die gleiche Breite auf Desktop */
 
    color: #099ae2;
    flex: 1 1 0;
    min-width: 0;
    padding: 0px;
    text-align: center;
	transition: transform 0.3s ease;
    margin-bottom: 0px;
}

/* Visueller Effekt beim Hover */
.info-box:hover {
    /*transform: translateY(-5px); */
}

/* INHALT & TYPOGRAFIE */
.info-box .matchup-text {
  font-size: 1.2em;
  font-weight: bold;
  display: block;
}

.info-box .current-position {
    display: block !important;
    font-size: 2.5em !important;
    font-weight: bold !important;
}

.info-box .stat {
    display: block !important;
    font-size: 1.7em !important;
    font-weight: bold !important;
}

.info-box .set-scores {
  font-size: 1em;
  display: block;
}

/* Für Bildschirme, die kleiner als 1024px sind (Tablets/Handys) */
@media (max-width: 1023px) {
    .boxes-wrapper {
        gap: 15px; /* Etwas weniger Abstand auf kleinen Screens */
    }

    .info-box {
    /* Auf kleinen Bildschirmen nehmen Boxen 100% der Breite ein */
        flex: 1 1 100%;
    }
}



/* EK TABELLE */
/* Genereller Container-Stil */
.volleyball-standings {
    font-family: inherit;
    padding: 10px;
    border-radius: 0px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow-x: auto; /* Wichtig für kleine Bildschirme, damit die Tabelle scrollbar ist */
}

/* Tabellenstil */
.volleyball-standings table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background-color: #ffffff33;
}

/* Kopfzeile (Header) */
.volleyball-standings th {
    background-color: #181818B3;
    color: #ffffff;
    font-weight: bold;
    text-align: center; /* TH-Text zentriert, um zu den TDs zu passen */
    padding: 10px 8px;
    border-bottom: 2px solid #ffffff33;
    font-size: 16px;
    text-transform: uppercase;
}

/* Linke Zelle (# Rang) */
.volleyball-standings th:first-child,
.volleyball-standings .rank-cell {
    width: 30px; 
    text-align: center;
}

/* Mannschafts-Spalte linksbündig */
.volleyball-standings th.mannschaft,
.volleyball-standings .mannschaft-cell {
    text-align: left;
}

/* Tabellenzeilen und Datenzellen */
.volleyball-standings td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    color: #FFFFFF;
}

/* Streifen-Effekt */
.volleyball-standings tr:nth-child(even) {
    background-color: #fcfcfc33; 
}

/* Hervorhebung der Mannschaftszeile (ID 312: TV Immenstadt) */
.volleyball-standings .highlight-team {
    background-color: #099ae2B3 !important;
    /* border-left: 5px solid #099ae2; Linke Akzentlinie */
    font-weight: bold;
    color: #000;
}

/* Zentrierung für alle numerischen Spalten (Spiele, Siege, Punkte, Sätze, Quotienten, Bälle) */
.volleyball-standings .center-cell {
    text-align: center;
    /* Optional: Leichter Font-Weight für wichtige Spalten */
    /* font-weight: 500; */
}

/* EK SPIELE */
/* Container für die Spieleliste */
.volleyball-games-list {
    font-family: inherit;
    padding: 10px;
}

/* Stil für einen einzelnen Spieleintrag */
.volleyball-games-list .game-entry {
    display: flex; /* Für nebeneinanderliegende Elemente */
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    margin-bottom: 8px;
    border-radius: 0px;
    background-color: #ffffff;
    /*box-shadow: 0 1px 2px rgba(0,0,0,0.05);*/
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-left: 5px solid #ccc; /* Standard-Akzent */
    font-size: 16px;
}

/* Datums- und Zeitangaben */
.volleyball-games-list .game-date-time {
    flex-basis: 150px;
    font-weight: bold;
    color: #555;
    margin-right: 15px;
}
.volleyball-games-list .game-date-time .time {
    display: block;
    font-size: 1.0em;
    font-weight: normal;
    color: #777;
}

/* Matchup (Heim vs. Gast) */
.volleyball-games-list .game-matchup {
    flex-grow: 1;
    text-align: center;
    color: #333;
    font-weight: 500;
}
.volleyball-games-list .game-matchup .vs {
    font-weight: normal;
    color: #aaa;
    margin: 0 8px;
}

/* Hervorhebung der eigenen Mannschaft (TV Immenstadt) */
.volleyball-games-list .highlight-team {
    font-weight: bold;
    color: #099ae2; /* Blaue Akzentfarbe */
}

/* Ergebnis-Anzeige */
.volleyball-games-list .game-result {
    flex-basis: 100px;
    font-weight: bold;
    text-align: right;
    font-size: 1.5em;
}

/* 1. Zustand: Spiel ist noch offen (ausgegraut) */
.volleyball-games-list .game-upcoming {
    opacity: 0.6; /* Transparenz für ausgegrauten Effekt */
    border-left-color: #aaa;
}
.volleyball-games-list .game-upcoming .game-result {
    color: #777;
    font-size: 1.2em;
    font-weight: normal;
}

/* 2. Zustand: Spiel gewonnen */
.volleyball-games-list .game-win {
    border-left-color: #4CAF50; /* Grüner Akzent */
}
.volleyball-games-list .game-win .game-result {
    color: #4CAF50;
}

/* 3. Zustand: Spiel verloren */
.volleyball-games-list .game-loss {
    border-left-color: #F44336; /* Roter Akzent */
}
.volleyball-games-list .game-loss .game-result {
    color: #F44336;
}

/* Responsive Anpassung für sehr kleine Bildschirme */
@media (max-width: 600px) {
    .volleyball-games-list .game-entry {
        flex-wrap: wrap;
    }
    .volleyball-games-list .game-date-time,
    .volleyball-games-list .game-result {
        flex-basis: auto;
        width: 50%;
        margin-bottom: 5px;
    }
    .volleyball-games-list .game-result {
        text-align: left;
    }
    .volleyball-games-list .game-matchup {
        width: 100%;
        order: 3; /* Erzwingt die Matchup-Zeile ganz nach unten */
        text-align: left;
        padding-top: 5px;
    }
}

/* --- NÄCHSTE BVV SPIELE --- */

/* Erzwungene Formatierung für die JS-Ausgabe */
#output-next-games .upcoming-game-item {
    text-align: left !important;
    padding: 10px 0 !important;
}

#output-next-games .game-title {
    color: #099ae2 !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    margin: 0 0 8px 0 !important;
    display: block !important;
}

#output-next-games .game-date, 
#output-next-games .game-time {
    color: #ffffff !important;
    margin: 4px 0 !important;
    font-size: 0.95em !important;
    display: flex !important;
    align-items: center !important;
}

#output-next-games .icon {
    color: #099ae2 !important;
    margin-right: 10px !important;
    width: 20px !important;
    display: inline-block !important;
    text-align: center !important;
}

#output-next-games .game-separator {
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin: 15px 0 !important;
}

/* --- BVV TABELLE IM VEREINS-DESIGN --- */

/* 1. Genereller Container & Responsive Verhalten */
.vapiclass {
    font-family: inherit; /* Deine Webseiten-Schriftart nutzen */
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow-x: auto; /* Scrollbalken auf kleinen Handys */
    background-color: transparent !important; /* Standard-Hintergrund entfernen */
}

/* 2. Die Tabelle selbst */
.vapiclass table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    background-color: #ffffff33 !important; /* Dein halb-transparenter Hintergrund */
    border: none !important;
}

/* 3. Kopfzeile (Header) */
.vapiclass th {
    background-color: #181818B3 !important; /* Dein dunkler Header */
    color: #ffffff !important;
    font-weight: bold !important;
    text-align: center !important; /* Alles zentrieren */
    padding: 10px 8px !important;
    border-bottom: 2px solid #ffffff33 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* 4. Tabellen-Zellen (Standard) */
.vapiclass td {
    padding: 8px !important;
    border-bottom: 1px solid #eee !important;
    font-size: 16px !important;
    color: #FFFFFF !important; /* Weiße Schrift für die Tabelle */
    text-align: center !important; /* Zahlen zentrieren */
    background-color: transparent !important;
}

/* 5. Mannschaftsname (Spalte 2 oder 3) linksbündig */
/* BVV setzt den Teamnamen meist in die 2. oder 3. Spalte. 
   Wir erzwingen Linksbündigkeit für Text-Inhalte */
.vapiclass td[align="left"], 
.vapiclass td.text-left,
.vapiclass td:nth-child(2) { 
    text-align: left !important;
}
.vapiclass th:nth-child(2) {
    text-align: left !important;
}

/* 6. Streifen-Effekt (Zebra-Look) */
.vapiclass tr:nth-child(even) td {
    background-color: #fcfcfc33 !important; 
}

/* 7. Hervorhebung DEIN Team (TV Immenstadt) */
/* Der BVV nutzt die Klasse .teammarker für das eigene Team */
.vapiclass .teammarker td,
.vapiclass tr.teammarker td {
    background-color: #9d57b4B3 !important; /* Team Akzentfarbe */
    /*color: #000000 !important;  Schwarze Schrift wie gewünscht */
    font-weight: bold !important;
}

/* --- BVV SPIELPLAN --- */

#mein-spielplan {
    width: 100%;
    overflow-x: auto; /* Aktiviert horizontales Scrollen */
    -webkit-overflow-scrolling: touch; /* Weiches Scrollen auf iOS */
    display: block;
}

#mein-spielplan table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0 4px;
}

#mein-spielplan td {
    padding: 10px;
    background: transparent;
    font-family: inherit;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    white-space: nowrap; /* Verhindert, dass Text umbricht (alles bleibt in einer Zeile) */
    vertical-align: middle;
}

/* Dezentere Bänderung: Nur jede zweite Zeile ganz leicht aufhellen */
#mein-spielplan table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* Hover-Effekt für bessere Lesbarkeit */
#mein-spielplan table tr:hover td {
    /* background: rgba(255, 255, 255, 0.11) !important; */
}

/* Der linke Rand (Indikator für Sieg/Niederlage) */
#mein-spielplan table tr {
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

#mein-spielplan table tr.game-win {
    border-left: 4px solid #4CAF50 !important;
}

#mein-spielplan table tr.game-loss {
    border-left: 4px solid #F44336 !important;
}

#mein-spielplan table tr.game-upcoming {
    border-left: 4px solid rgba(255,255,255,0.2) !important;
}

/* 1. Tabelle auf "getrennt" schalten, damit Zeilenabstände möglich sind */
#mein-spielplan table {
    border-collapse: separate !important;
    border-spacing: 0 4px !important; /* Kleiner Abstand zwischen den Zeilen */
}

/* 2. Den farbigen Rand auf die ERSTE ZELLE verschieben (das ist der Fix!) */
#mein-spielplan table tr.game-win td:first-child {
    border-left: 5px solid #4CAF50 !important;
}

#mein-spielplan table tr.game-loss td:first-child {
    border-left: 5px solid #F44336 !important;
}

#mein-spielplan table tr.game-upcoming td:first-child {
    border-left: 5px solid rgba(255,255,255,0.2) !important;
}

/* 3. Den (unsichtbaren) Rand von der Zeile selbst entfernen, um Konflikte zu vermeiden */
#mein-spielplan table tr {
    border-left: none !important;
}

/* --- BVV LADE-ANIMATION --- */
.bvv-loading-container {
    text-align: center;
    padding: 40px;
    /*background: #f9f9f9;*/
    /*border: 1px solid #eee;*/
    color: #9d57b4;
    /*font-family: sans-serif;*/
}

.bvv-spinner {
    border: 5px solid #f3f3f3; /* Hellgrauer Rand */
    border-top: 5px solid #9d57b4; /* Dein Vereins-Blau */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto; /* Zentriert und Abstand zum Text */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Kleiner Spinner für Statistik-Werte */
.bvv-spinner-small {
    border: 3px solid rgba(255, 255, 255, 0.2); /* Hellgrauer Rand */
    border-top: 3px solid #9d57b4; 
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: bvv-spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes bvv-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Optional: Damit der Text während des Ladens nicht springt */
.info-box .stat {
    min-height: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
}