body { font-family: Arial, sans-serif; background: #f4f6f9; padding: 20px; color: #333; margin: 0; }
.container { max-width: 1100px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
h1 { font-size: 22px; border-bottom: 2px solid #0056b3; padding-bottom: 10px; color: #0056b3; margin-top: 0; }
h2.section-title { font-size: 14px; color: #777; margin-top: 25px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }

/* 2-Spalten-Raster für die Autos */
#active-cars, #unregistered-cars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 15px;
}
@media (min-width: 768px) {
    #active-cars, #unregistered-cars { grid-template-columns: 1fr 1fr; }
}

/* Flache Fahrzeug-Karte - Radikale Fixierung gegen jede Bewegung */
.car-card { 
    display: flex !important; 
    align-items: flex-start !important; 
    justify-content: space-between !important; 
    padding: 12px 15px !important; 
    background: #ffffff !important; /* IMMER reines Weiss für alle Zustände */
    border-radius: 6px !important; 
    border: 1px solid #ddd !important; 
    position: relative !important; 
    box-sizing: border-box !important; 
    
    /* Zwingt JEDE Karte auf eine exakt identische, unveränderliche Höhe */
    height: 145px !important; 
    min-height: 145px !important;
    max-height: 145px !important;
    overflow: hidden !important;
}

/* Status-Rahmen (NUR der linke Rand färbt sich, der Hintergrund bleibt starr Weiss) */
.car-card.state-inaktiv { border-left: 5px solid #7f8c8d !important; background: #ffffff !important; }
.car-card.state-schwach { border-left: 5px solid #f39c12 !important; background: #ffffff !important; }
.car-card.state-kritisch { border-left: 5px solid #c0392b !important; background: #ffffff !important; }
.car-card.state-optimal { border-left: 5px solid #2ecc71 !important; background: #ffffff !important; }

.car-info h2 { margin: 0 0 4px 0; font-size: 16px; color: #1a1a1a; cursor: pointer; display: inline-block; }
.car-info h2:hover { color: #0056b3; text-decoration: underline; }
.car-info p { margin: 2px 0; font-size: 13px; color: #444; }

/* Warntexte fest unten links verankert */
.warn-text { 
    color: #b83232 !important; 
    font-size: 11px !important; 
    font-weight: bold !important; 
    position: absolute !important; 
    bottom: 26px !important; /* Leicht erhöht, damit die MAC-Adresse darunter passt */
    left: 15px !important; 
    margin: 0 !important; 
}

/* MAC-Adresse sauber linksbündig unter dem Funk-Text / Warntext platziert */
.mac-info { 
    font-family: monospace !important; 
    font-size: 10px !important; 
    color: #777 !important; 
    background: #eee !important; 
    padding: 2px 5px !important; 
    border-radius: 3px !important; 
    position: absolute !important; 
    bottom: 10px !important; /* Schön bündig am unteren Rand */
    left: 15px !important;   /* Sauber linksbündig ausgerichtet */
    right: auto !important;  /* Deaktiviert die Positionierung auf der rechten Seite */
}


.right-box { display: flex !important; align-items: center !important; gap: 12px !important; margin-left: auto !important; padding-top: 2px !important; }
.ampel { width: 35px; height: 35px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 6px rgba(0,0,0,0.2); }
.status-optimal { background-color: #2ecc71 !important; box-shadow: 0 0 10px #2ecc71 !important; }
.status-schwach { background-color: #f39c12 !important; box-shadow: 0 0 10px #f39c12 !important; }
.status-kritisch { background-color: #e74c3c !important; box-shadow: 0 0 10px #e74c3c !important; }

/* FIX: Offline-Punkt zeigt ein absolut stilles, dauerhaftes ROT ohne Blinken oder Grau-Wechsel */
.status-inaktiv { 
    background-color: #e74c3c !important; /* Ändert die Farbe von Grau auf das identische Kritisch-Rot */
    animation: none !important; /* Killt den Wechsel / das Blinken komplett */
    box-shadow: 0 0 10px #e74c3c !important; 
}

.btn-delete { background: none; border: none; cursor: pointer; font-size: 14px; opacity: 0.6; transition: opacity 0.2s; }
.btn-delete:hover { opacity: 1; }
.hint-box { margin-top: 20px; padding: 10px; background: #eef2f7; border-radius: 6px; font-size: 12px; text-align: center; color: #555; }