@charset "utf-8"; 
/* CSS Document */

/* Logo ausblenden */
span.logo {
    display: none !important;
}

/* NAV icons zentrieren*/
nav.sp-megamenu-wrapper {
    justify-content: center !important; 
}

.sp-menu-heading {
  color: #858487;
}

/* Zielt auf die Social Icons in der Liste */
ul.social-icons li [class*="fa-"] {
    font-size: 30px; /* Ä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 */
}

/* PING PONG LAYOUT */
.illubox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}

.illubox img {
    /*Bild*/
    width: 100%;
    /*outline: 1px solid #51A2B3;*/
    padding: 15px 25px;
}

.illubox p {
    /*Textblock*/
    /*color: #374d5d;*/
    line-height: 200%;
    padding: 10px 25px;
}

.illubox h2 {
    /*Überschrift*/
    color: #0999e2;
    /*font-size: 1.9rem;*/
    /*font-weight: 600;*/
    padding: 10px 25px;
}

@media (min-width:800px) {
    .illubox > div {
        width: 50%;
    }
    .illubox:nth-child(even) {
        flex-direction: row-reverse;
    }
}

/* HIGHLIGHT BOXEN */

.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 */
    margin: 30px auto;   /* Vertikaler Abstand und horizontale Zentrierung */
    max-width: 1200px;   /* Maximale Breite des Containers */
}

.info-box {
    /* Das Flex-Property erzwingt die gleiche Breite auf Desktop */
    flex: 1 1 0;
    min-width: 0; /* Wichtig für korrekte Berechnung */

    /* ---------------------------------------------------- */
    /* STYLING (Moderner, Vereins-Look) */
    /* ---------------------------------------------------- */
    background-color: #ffffff;
    border: 2px solid #e0e0e0; /* NEUE FARBE: Dickerer Rahmen für mehr Kontrast */
    border-radius: 12px;    /* Abgerundete Ecken */
    padding: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* NEUE FARBE: Deutlicherer Schatten */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
}

/* Visueller Effekt beim Hover */
.info-box:hover {
    transform: translateY(-5px); /* NEU: Box "hebt" sich stärker ab */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    border-color: #099ae2; /* NEUE FARBE: Rahmen wird beim Hover blau */
}

/* INHALT & TYPOGRAFIE */
.info-box h3 {
    color: #000000; /* NEUE FARBE: Kräftiges Blau (Sportfarbe) */
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 700;
}

.info-box .current-position {
    display: block !important;
    font-size: 3.5em !important;
    font-weight: bold !important;
    margin: 5px 0;
    color: #099ae2;
}

.info-box .game-subtitle {
    font-size: 1.1em;
    color: #555555;
    margin-bottom: 5px;
    font-weight: 500;
}

/* 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: 12px;
    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: #ffffff;
}

/* Kopfzeile (Header) */
.volleyball-standings th {
    background-color: #000000; /* Leicht grauer Hintergrund für Header */
    color: #ffffff;
    font-weight: bold;
    text-align: center; /* TH-Text zentriert, um zu den TDs zu passen */
    padding: 10px 8px;
    border-bottom: 2px solid #ccc;
    font-size: 13px;
    /*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: 13px;
    color: #444;
}

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

/* Hervorhebung der Mannschaftszeile (ID 312: TV Immenstadt) */
.volleyball-standings .highlight-team {
    background-color: #b6d4e3 !important; /* Helles Gelb als Hervorhebung */
    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: 12px;
    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: 14px;
}

/* 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: 0.9em;
    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.2em;
}

/* 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: 1em;
    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;
    }
}

/* KONTAKTFORMULAR */
#contact-form fieldset legend {
    display: none;
}

/* Zielt auf alle H2-Überschriften auf der Seite mit der ID itemid-103 */
.itemid-103 h2 {
    display: none;
}

/* Zielt auf das <legend>-Element innerhalb des Kontaktformulars (.com-contact__default fieldset legend) 
   auf der Seite mit der ID itemid-103 */
.itemid-103 .com-contact__default fieldset legend {
    display: none;
}

/* Google Maps Eintrag */
/* CSS für den responsiven Container */
.map-responsive-container {
    /* 100% Breite des Eltern-Containers */
     width: 100%;
    /* Verhältnis-Trick: 56.25% ergibt ein 16:9 Seitenverhältnis (450px Höhe bei 800px Breite) */
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    /* Zentrieren, falls der Elternelement zentriert ist */
    margin-left: auto;
    margin-right: auto;
    border: 2px solid ; /* 3 Pixel dicker, durchgezogener grauer Rahmen */
    border-radius: 5px;
}

/* Stil für den iFrame selbst, damit er den Container füllt */
.map-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Optional: Rahmen entfernt, da er im Original-Tag nicht enthalten war */
    border: 0;
    border-radius: 5px;
}