/* css/ubahn-cards.css */

/* --- GRID-CONTAINER FÜR KARTEN --- */
.line-container,
.station-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

/* --- VEREINHEITLICHTES KARTEN-DESIGN (Cards & Stations) --- */
.ubahn-card, 
.station-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px; 
}

.station-card {
    border: 1px dashed #adadad;
}

.line-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.line-badge {
    color: white;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 1.2rem;
    font-family: sans-serif;
}

/* --- ÖFFI-FARBEN BADGES --- */
.u1-badge { background-color: #e1141c; }
.u2-badge { background-color: #a862a5; }
.u3-badge { background-color: #f58220; }
.u4-badge { background-color: #009640; }
.u6-badge { background-color: #94613c; }
.bim-badge { background-color: #9c0005; }
.bus-badge { background-color: #00568c; }
.badner-badge { background-color: #003366; border-right: 6px solid #ffcc00; }

/* --- BUTTONS & ZUSTÄNDE (BASIS) --- */
.ubahn-card button,
.station-card button {
    width: 100%;
    padding: 12px;
    background-color: #333333;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    margin-top: auto; 
    transition: background-color 0.15s ease;
    font-size: 0.95rem;
}

.station-card button {
    background-color: #007bff; 
}

.ubahn-card button,
.station-card button {
    width: 100%;
    padding: 12px;
    background-color: #333333;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    margin-top: auto; 
    /* HIER ERGÄNZT: transform hinzugefügt für das geschmeidige Klicken */
    transition: background-color 0.15s ease, transform 0.05s ease; 
    font-size: 0.95rem;
}

.locked {
    background-color: #f4f4f4;
    opacity: 0.65;
}
.locked button {
    background-color: #b51c1c !important;
}

.station-card button.purchased {
    background-color: #6c757d !important;
    cursor: not-allowed;
}

/* --- NEU: INDIVIDUELLE LINIENFARBEN FÜR KAUF-BUTTONS --- */
/* Leuchten erst auf, wenn das JavaScript die Klasse '.affordable' (Geld reicht aus) vergibt */
.u1-theme button.affordable, .u1-theme #u1-buy-btn.affordable { background-color: #e1141c !important; color: white; }
.u2-theme button.affordable, .u2-theme #u2-buy-btn.affordable { background-color: #a862a5 !important; color: white; }
.u3-theme button.affordable, .u3-theme #u3-buy-btn.affordable { background-color: #f58220 !important; color: white; }
.u4-theme button.affordable, .u4-theme #u4-buy-btn.affordable { background-color: #009640 !important; color: white; }
.u6-theme button.affordable, .u6-theme #u6-buy-btn.affordable { background-color: #94613c !important; color: white; }

.bim-theme button.affordable, .bim-theme #bim-buy-btn.affordable { background-color: #9c0005 !important; color: white; }
.bus-theme button.affordable, .bus-theme #bus-buy-btn.affordable { background-color: #00568c !important; color: white; }
.badner-theme button.affordable, .badner-theme #badner-buy-btn.affordable { background-color: #003366 !important; color: white; }

/* Abdunkeln beim Drüberfahren (Hover) */
.u1-theme button.affordable:hover { background-color: #b31016 !important; }
.u2-theme button.affordable:hover { background-color: #8c4e89 !important; }
.u3-theme button.affordable:hover { background-color: #d9701a !important; }
.u4-theme button.affordable:hover { background-color: #007a33 !important; }
.u6-theme button.affordable:hover { background-color: #7d4a2f !important; }
.bim-theme button.affordable:hover { background-color: #7d0004 !important; }
.bus-theme button.affordable:hover { background-color: #003d63 !important; }
.badner-theme button.affordable:hover { background-color: #001f3d !important; }

/* --- INFO-TEXT POSITIONIERUNG --- */
.card-info-text {
    margin-top: 5px;
    margin-bottom: auto; 
    text-align: left;
}

.card-info-text p {
    margin: 5px 0;
    color: #333;
    font-size: 0.95rem;
}

.ubahn-card p[id$="-status"] {
    margin: 15px 0;
    font-weight: bold;
    color: #b51c1c;
}