/* Hauptcontainer Hintergrund anpassen */
.alternate-background {
    background-color: #1a1a1a !important;
    color: #ffffff;
    border: none;
}

/* Die Renn-Tabelle/Karte */
.race-table {
    width: 100%;
    background: #262626; /* Dunklerer Hintergrund für die Karte */
    border-radius: 10px;
    border: 1px solid #444;
    overflow: hidden;
    margin-bottom: 25px;
    color: #eee;
}

/* Header der Karte (Rennname) */
.race-table thead th {
    background: #333;
    color: #fff;
    border-bottom: 2px solid #e21b1b; /* Roter Akzent wie im Header */
    padding: 15px;
    font-size: 1.3rem;
}

/* Container für das Grid */
.race-grid-wrapper {
    display: flex;
    flex-wrap: wrap; /* Erlaubt den Umbruch auf mobilen Geräten */
    flex-direction: row;
    background: #262626;
    width: 100%;
}

/* Linke Seite: Strecken-Infos */
.track-info-side {
    flex: 1 1 300px; /* Wächst, schrumpft, Basis 300px */
    padding: 20px;
    border-right: 1px solid #444;
    background-color: #2d2d2d;
}

/* Rechte Seite: Teilnehmer */
.participants-side {
    flex: 1.2 1 350px; /* Wächst, schrumpft, Basis 350px */
    padding: 15px;
    background-color: #262626;
}

/* Speziell für schmale Bildschirme (Mobil) */
@media (max-width: 768px) {
    .track-info-side {
        border-right: none;
        border-bottom: 1px solid #444; /* Trennlinie nun horizontal */
    }
    
    .race-grid-wrapper {
        flex-direction: column; /* Erzwingt das Stapeln untereinander */
    }
}

/* Textelemente */
.label2 {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #aaa; /* Hellgrau für Labels */
    letter-spacing: 1px;
}

.value {
    font-weight: bold;
    font-size: 1.05rem;
    color: #ffffff; /* Weiß für die wichtigen Werte */
}

.status-highlight .value {
    color: #00aaff; /* Ein leuchtendes Blau für den Status */
}

/* Teilnehmer-Karten im Dark Mode */
.member-card {
    background: #333 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    margin-bottom: 6px;
    transition: transform 0.2s;
}

.member-card:hover {
    border-color: #e21b1b !important;
    /*transform: scale(1.01);*/
}

.member-card.even { background-color: #383838 !important; }

.rank-bg {
    color: rgba(255, 255, 255, 0.05); /* Sehr dezente Zahl im Hintergrund */
}

/* Formular-Elemente oben */
.controls-section {
    background: #2d2d2d;
    border: 1px solid #444;
    color: #fff;
}

#raceInput {
    background: #1a1a1a;
    border: 1px solid #555;
    color: #fff;
}

.filter-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	background: #151922;
	padding: 20px 30px;
	border-radius: 12px;
	margin-bottom: 40px;
	align-items: center;
	border: 1px solid #1c222d;
}

/* Container für Infos + Thumbnail */
.track-details-container {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 10px;
}

/* Vertikale Liste für MPS, Fee etc. */
.stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.stat-item {
    border-bottom: 1px solid #444;
    padding-bottom: 2px;
}

/* Thumbnail Styling */
.track-thumb {
    width: 100px;
    height: 100px;
    background: #1a1a1a;
    border: 1px solid #555;
    border-radius: 4px;
    object-fit: cover;
}

/* Container für alle Teilnehmer-Karten */
.participants-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    width: 100%;
}

/* Einzelne Teilnehmer-Karte */
.member-card {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid #444;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap; /* Erlaubt den Zeilenumbruch */
    justify-content: space-between;
    align-items: center;
    position: relative;
    background-color: #333;
    overflow: hidden;
}

/* Abwechselnde Hintergrundfarben für bessere Lesbarkeit */
.member-card.even {
    background-color: #2d2d2d;
}

/* Linke Seite (Name/Auto) */
.member-info {
    flex: 1; /* Nimmt verfügbaren Platz links ein */
    z-index: 1;
}

.member-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    display: block;
}

.member-model {
    font-size: 0.75rem;
    color: #aaa;
	display: block;
}

/* Rechte Seite (Zeit) */
.member-time-box {
    text-align: right;
    flex: 0 0 auto;
    z-index: 1;
}

.member-time {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #00aaff; /* Highlight-Farbe für die Zeit */
}

/* Die neue Zeile für Powerups */
.member-powerup-box {
    width: 100%; /* Erzwingt den Umbruch in eine neue Zeile */
    text-align: center;
    margin-top: 5px;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.05); /* Dezente Trennung */
    z-index: 1;
}

.member-powerups {
    font-size: 0.75rem;
    color: #00ffcc; /* Ein leuchtendes Cyan für die Powerups */
    font-style: italic;
}

/* Große Rang-Nummer im Hintergrund */
.member-rank-bg {
    position: absolute;
    opacity: 0.07;
	top: 0px;
    font-size: 1.8rem;
    right: 45%;
    font-weight: 900;
    color: #fff;
    pointer-events: none;
    z-index: 0;
}

/* Gold für Platz 1 */
.member-card:nth-child(1) {
    border-color: #ffd700 !important;
}
.member-card:nth-child(1) .member-rank-bg {
    color: #ffd700;
    opacity: 0.15;
}
.member-card:nth-child(1) .member-time {
    color: #ffd700;
}

/* Silber für Platz 2 */
.member-card:nth-child(2) {
    border-color: #c0c0c0 !important;
}
.member-card:nth-child(2) .member-rank-bg {
    color: #c0c0c0;
    opacity: 0.15;
}

/* Bronze für Platz 3 */
.member-card:nth-child(3) {
    border-color: #cd7f32 !important;
}
.member-card:nth-child(3) .member-rank-bg {
    color: #cd7f32;
    opacity: 0.15;
}

/* Animation für den Führenden (optional) */
.member-card:nth-child(1) {
    box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.powerup-icon {
    width: 28px;               /* Etwas größer für bessere Sichtbarkeit */
    height: 28px;
    margin: 2px;
    padding: 2px;              /* Abstand zwischen Bild und Rahmen */
    
    /* Rahmen & Hintergrund */
    background-color: #000000; /* Schwarzer Hintergrund im Rahmen */
    border: 1px solid #555;    /* Dezenter grauer Rahmen */
    border-radius: 6px;        /* Abgerundete Ecken */
    
    vertical-align: middle;
    object-fit: contain;       /* Verhindert Verzerrung des Icons */
    
    /* Optische Effekte */
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.1s, border-color 0.1s;
}

.powerup-icon:hover {
    transform: scale(1.2);
    border-color: #00ffcc;     /* Rahmen leuchtet beim Hovern in Cyan */
}