/* ==========================================================================
   1. BASIS-LAYOUT & WRAPPER
   ========================================================================== */
.saison-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px; 
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

.spalte-dg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 620px;
}

.spalte-dg h1 {
    border-bottom: 3px solid #333;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.runden_ergebnisse_box { 
    font-family: Arial, sans-serif; 
    width: 99%; 
    margin: 0 0 40px 0; 
    border: 1px solid #eee; 
    background: #fff; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    min-height: 250px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ==========================================================================
   2. TEAM-SPEZIFISCHE FARBEN (Übersichten & Matrix-Header)
   ========================================================================== */

/* Team 1: Gold-Orange */
.runden_ergebnisse_ueberschrift1 { background-color: #ffdd8d !important; color: #414042; }
.runden_ergebnisse_runde1 { color: #ffdd8d !important; background-color: #414042; font-weight: bold; width: 70px; vertical-align: middle; text-align: center; height: 30px; font-size: 0.9rem; }
.loader1 { border-top-color: #ffdd8d !important; box-shadow: 0 0 5px rgba(255, 203, 137, 0.2); }
.matrix-left1 { color: #ffdd8d !important; background-color: #000; }
.matrix-center1, .matrix-right1 { background-color: #ffdd8d !important; color: #000; }

/* Team 2: Blau */
.runden_ergebnisse_ueberschrift2 { background-color: #b1deff !important; color: #414042; }
.runden_ergebnisse_runde2 { color: #b1deff !important; background-color: #414042; font-weight: bold; width: 70px; vertical-align: middle; text-align: center; height: 30px; font-size: 0.9rem; }
.loader2 { border-top-color: #b1deff !important; box-shadow: 0 0 5px rgba(190, 207, 255, 0.2); }
.matrix-left2 { color: #b1deff !important; background-color: #000; }
.matrix-center2, .matrix-right2 { background-color: #b1deff !important; color: #000; }

/* Team 3: Grün */
.runden_ergebnisse_ueberschrift3 { background-color: #d8e9c3 !important; color: #414042; }
.runden_ergebnisse_runde3 { color: #d8e9c3 !important; background-color: #414042; font-weight: bold; width: 70px; vertical-align: middle; text-align: center; height: 30px; font-size: 0.9rem; }
.loader3 { border-top-color: #d8e9c3 !important; box-shadow: 0 0 5px rgba(211, 200, 249, 0.2); }
.matrix-left3 { color: #d8e9c3 !important; background-color: #000; }
.matrix-center3, .matrix-right3 { background-color: #d8e9c3 !important; color: #000; }

/* Team 4: Lila */
.runden_ergebnisse_ueberschrift4 { background-color: #eccbc4 !important; color: #414042; }
.runden_ergebnisse_runde4 { color: #eccbc4 !important; background-color: #414042; font-weight: bold; width: 70px; vertical-align: middle; text-align: center; height: 30px; font-size: 0.9rem; }
.loader4 { border-top-color: #eccbc4 !important; box-shadow: 0 0 5px rgba(177, 210, 161, 0.2); }
.matrix-left4 { color: #eccbc4 !important; background-color: #000; }
.matrix-center4, .matrix-right4 { background-color: #eccbc4 !important; color: #000; }

/* Gemeinsame Eigenschaften für Header-Zellen */
.matrix_header1, .matrix_header2, .matrix_header3, .matrix_header4 {
	display: flex; justify-content: space-between; align-items: stretch; border-bottom: 2px solid #000; width: 100%;
}
.matrix_header1 {background-color: #ffdd8d;}
.matrix_header2 {background-color: #b1deff;}
.matrix_header3 {background-color: #d8e9c3;}
.matrix_header4 {background-color: #eccbc4;}


.matrix_header-cell-left1, .matrix_header-cell-left2, .matrix_header-cell-left3, .matrix_header-cell-left4, .matrix_header-cell-center, .matrix_header-cell-right {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: 1.2em; border-top: 1px solid #000;
}
.matrix_header-cell-left1 {flex: 0 0 auto; padding: 0 5px; background-color: #000; color: #ffdd8d; border-left: 1px solid #000}
.matrix_header-cell-left2 {flex: 0 0 auto; padding: 0 5px; background-color: #000; color: #b1deff; border-left: 1px solid #000}
.matrix_header-cell-left3 {flex: 0 0 auto; padding: 0 5px; background-color: #000; color: #d8e9c3; border-left: 1px solid #000}
.matrix_header-cell-left4 {flex: 0 0 auto; padding: 0 5px; background-color: #000; color: #eccbc4; border-left: 1px solid #000}
.matrix_header-cell-center { flex: 1; word-break: break-word; padding: 5px; color: #000;}
.matrix_header-cell-right { flex: 0 0 auto; border-right: 1px solid #000; padding: 0 5px; color: #000;}

/* ==========================================================================
   3. TABELLEN-DETAILS (ERGEBNIS-BOX)
   ========================================================================== */
.runden_ergebnisse_tabelle { width: 100%; border-collapse: collapse; flex-grow: 1; }
.runden_ergebnisse_spielfrei {text-align: center; width: 90.5%; font-weight: bold; font-size: 0.9rem;}
.runden_ergebnisse_mannschaft-l { font-weight: bold; text-align: right; width: 44%; font-size: 0.9rem; }
.runden_ergebnisse_mannschaft-r { font-weight: bold; text-align: left; width: 44%; font-size: 0.9rem; }
.runden_ergebnisse_spieler-l { font-size: 0.9em; text-align: right; }
.runden_ergebnisse_spieler-r { font-size: 0.9em; text-align: left; }
.runden_ergebnisse_gesamt-l { font-weight: bold; text-align: right; font-size: 0.9em; border-top: 1px black solid; }
.runden_ergebnisse_gesamt-r { font-weight: bold; text-align: left; font-size: 0.9em; border-top: 1px black solid; }
.runden_ergebnisse_leer { text-align: center; width: 20px; font-weight: bold; }
.runden_ergebnisse_link { color: #0066cc; text-decoration: none; font-weight: bold; font-size: 0.8em; }
.runden_ergebnisse_link:hover { text-decoration: underline; }

/* ==========================================================================
   3.1. TABELLEN-DETAILS (Info-Icon und Tooltip)
   ========================================================================== */
/* Container für das Icon */
.info-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    color: #eb0101; /* Blaues Info-Icon */
    font-weight: bold;
    font-size: 1.1em;
}

/* Der eigentliche Tooltip-Text (versteckt) */
.info-tooltip .tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 100;
    bottom: 125%; /* Über dem Icon anzeigen */
    left: 50%;
    margin-left: -100px; /* Zentrieren */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.85em;
    font-weight: normal;
    line-height: 1.3;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

/* Der kleine Pfeil unten am Tooltip */
.info-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Anzeigen beim Drüberfahren */
.info-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ==========================================================================
   4. POP-UP & MATRIX-DETAILS
   ========================================================================== */
.matrix-popup-overlay { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); overflow-y: auto; }
.matrix-popup-content1, .matrix-popup-content2, .matrix-popup-content3, .matrix-popup-content4 {
	background-color: #fff;
	margin: 2% auto;
	padding: 30px 20px 20px 20px;
	width: 95%; max-width: 850px;
	border-radius: 10px; position: relative;
	box-shadow: 0 5px 30px rgba(0,0,0,0.5);
}
.matrix-popup-content1 {border: 5px solid #ffdd8d;}
.matrix-popup-content2 {border: 5px solid #b1deff;}
.matrix-popup-content3 {border: 5px solid #d8e9c3;}
.matrix-popup-content4 {border: 5px solid #eccbc4;}
.matrix-popup-bemerkung {background-color: #f9f9f9; border-top: 1px solid #000; padding: 10px;}

.close-btn { position: absolute; right: 18px; top: -2px; font-size: 35px; font-weight: bold; color: #ff0000; cursor: pointer; line-height: 1; transition: transform 0.2s ease; }
.close-btn:hover { transform: scale(1.2); color: #b30000; }

.matrix_passnr, .matrix_passnr-R { text-align: left; border-top: 1px solid #ddd; width: 144px; }
.matrix_passnr { border-right: 1px solid #ddd; }
.matrix_doppel-wrapper { display: flex; align-items: center; width: 100%; }
.matrix_doppel-14 { flex: 1; text-align: right; padding-right: 10px; word-wrap: break-word; }
.matrix_doppel-divider { flex: 0 0 auto; font-weight: bold; text-align: center; width: 20px; }
.matrix_doppel-AD { flex: 1; text-align: left; padding-left: 10px; word-wrap: break-word; }

/* ==========================================================================
   5. LADE-ANIMATION & SCHATTEN
   ========================================================================== */
.matrix-loader { border: 4px solid #f3f3f3; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading-container { text-align: center; padding: 30px; }

.matrix-wrapper-mobile { position: relative; width: 100%; }
.matrix-wrapper-mobile::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; background: linear-gradient(to left, rgba(0,0,0,0.15), rgba(0,0,0,0)); opacity: var(--shadow-opacity, 0); transition: opacity 0.3s ease; pointer-events: none; z-index: 10; }

/* ==========================================================================
   6. MOBILE OPTIMIERUNG
   ========================================================================== */
@media screen and (max-width: 1200px) {
    .saison-wrapper { flex-direction: column; align-items: center; }
    .spalte-dg { min-width: 100%; width: 100%; }
    .runden_ergebnisse_box { width: 98%; max-width: 620px; min-height: auto; margin-bottom: 20px; }
}

@media screen and (max-width: 600px) {
    .matrix-popup-content1, .matrix-popup-content2, .matrix-popup-content3, .matrix-popup-content4 { width: 96%; margin: 2% auto; padding: 40px 5px 10px 5px; }
    div[id^="content_"] { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #ddd; }
    .table_eingabe { min-width: 750px; table-layout: fixed; }
    .matrix_header-cell-center, .matrix_header-cell-left1, .matrix_header-cell-left2, .matrix_header-cell-left3, .matrix_header-cell-left4, .matrix_header-cell-right { font-size: 0.9em; }
	.matrix-wrapper-mobile { --shadow-opacity: 1; }
	.matrix-wrapper-mobile::before { content: '⟷ seitlich wischen'; display: block; text-align: right; font-size: 10px; color: #999; margin-top: 5px; }
}