:root {
    --bg-color: #0f172a;
    --panel-bg: rgba(30, 41, 59, 0.95);
    --border-color: #475569;
    --highlight: #38b2ac;
    --text-main: #f8fafc;
}

body, html {
    margin: 0; padding: 0; background: var(--bg-color); color: var(--text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden; height: 100vh; user-select: none;
}
#game-ui { display: flex; flex-direction: column; height: 100%; }

.hidden { display: none !important; }

/* --- Auth Overlay --- */
#auth-overlay {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    gap: 24px; flex-wrap: wrap; padding: 20px; box-sizing: border-box;
    background: radial-gradient(circle at 50% 30%, #1e293b 0%, var(--bg-color) 70%); z-index: 100;
}
.auth-box {
    width: 320px; background: var(--panel-bg); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 30px; box-shadow: 0 10px 25px rgba(0,0,0,0.8);
}
.auth-box h1 { margin: 0 0 20px 0; font-size: 1.4rem; text-align: center; color: var(--highlight); }

#bankruptcy-overlay {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 4, 4, 0.92); z-index: 300;
}
#bankruptcy-overlay .auth-box { border-color: #f87171; text-align: center; }
#bankruptcy-overlay h1 { color: #f87171; }
#bankruptcy-overlay p { color: #cbd5e1; font-size: 0.9rem; }

#maintenance-warning-overlay {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 4, 4, 0.85); z-index: 300;
}
#maintenance-warning-overlay .auth-box { border-color: #facc15; text-align: left; max-width: 420px; }
#maintenance-warning-overlay h1 { color: #facc15; text-align: center; }
#maintenance-warning-overlay p { color: #cbd5e1; font-size: 0.9rem; }
.maintenance-warning-list { margin: 10px 0; padding-left: 20px; color: #f1f5f9; font-size: 0.85rem; }
.maintenance-warning-list li { margin-bottom: 4px; }

.park-maintenance-warning {
    position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%;
    background: #ef4444; color: #fff; font-weight: bold; font-size: 0.75rem; line-height: 18px;
    text-align: center; border: 2px solid var(--bg-color, #0f172a); box-shadow: 0 1px 4px rgba(0,0,0,0.6);
    z-index: 2;
}

.leaderboard-box { max-height: 420px; overflow-y: auto; }
.leaderboard-box-alltime { width: 480px; }
.leaderboard-subtitle { margin: -12px 0 14px 0; color: #94a3b8; font-size: 0.75rem; text-align: center; }
.leaderboard-table-wrap { overflow-x: auto; }
.leaderboard-table-alltime { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.leaderboard-table-alltime th {
    text-align: left; color: #94a3b8; font-weight: normal; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 0 6px 6px 6px; border-bottom: 1px solid var(--border-color);
}
.leaderboard-table-alltime td { padding: 6px; border-bottom: 1px solid rgba(71, 85, 105, 0.4); white-space: nowrap; }
.leaderboard-table-alltime tbody tr:last-child td { border-bottom: none; }
.leaderboard-rank { color: #94a3b8; font-weight: bold; }
.leaderboard-table-alltime .leaderboard-value { color: var(--highlight); font-weight: bold; font-variant-numeric: tabular-nums; }
.leaderboard-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.leaderboard-list li {
    counter-increment: rank; display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid rgba(71, 85, 105, 0.4); font-size: 0.9rem;
}
.leaderboard-list li:last-child { border-bottom: none; }
.leaderboard-list li::before {
    content: counter(rank) '.'; color: #94a3b8; margin-right: 10px; font-weight: bold; min-width: 18px;
}
.leaderboard-name { flex: 1; }
.leaderboard-value { color: var(--highlight); font-weight: bold; font-variant-numeric: tabular-nums; }
.leaderboard-empty { color: #64748b; font-size: 0.85rem; justify-content: center; }
.leaderboard-empty::before { content: none; }
.auth-error {
    background: rgba(248, 113, 113, 0.15); border: 1px solid #f87171; color: #fecaca;
    border-radius: 4px; padding: 8px 10px; margin-bottom: 14px; font-size: 0.85rem;
}
#auth-form { display: flex; flex-direction: column; gap: 12px; }
#auth-form input {
    background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 4px;
    color: var(--text-main); padding: 10px 12px; font-size: 0.95rem;
}
#auth-form input:focus { outline: none; border-color: var(--highlight); }
.auth-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* --- Top Bar --- */
#top-bar {
    height: 60px; background: var(--panel-bg); border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center; 
    padding: 0 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); z-index: 10;
}
.top-left { display: flex; align-items: center; gap: 8px; }
#menu-btn {
    background: none; border: 1px solid var(--border-color); border-radius: 4px;
    cursor: pointer; padding: 8px; display: flex; align-items: center;
    transition: background 0.2s; fill: var(--text-main); width: 40px; height: 40px;
}
#menu-btn:hover { background: rgba(255,255,255,0.1); }
.icon-btn {
    background: none; border: 1px solid var(--border-color); border-radius: 4px;
    cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; color: var(--text-main); width: 40px; height: 40px; font-size: 1.1rem;
}
.icon-btn:hover { background: rgba(255,255,255,0.1); }
.icon-btn:disabled { opacity: 0.6; cursor: default; }

/* --- Tutorial-Slideshow (roadmap_phasen.md Phase 13.2) --- */
#tutorial-overlay {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(4, 8, 16, 0.9); z-index: 400;
}
#tutorial-box {
    position: relative; width: min(90vw, 1000px); max-height: 90vh;
    background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 8px;
    padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.8); box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
#tutorial-close-btn {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    color: #94a3b8; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
#tutorial-close-btn:hover { color: var(--text-main); }
#tutorial-slide-wrap { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; }
#tutorial-slide-img {
    max-width: min(80vw, 880px); max-height: 74vh; object-fit: contain; border-radius: 4px;
    background: rgba(0,0,0,0.25);
}
.tutorial-nav-btn {
    background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 50%;
    color: var(--text-main); cursor: pointer; width: 40px; height: 40px; font-size: 1.4rem;
    flex-shrink: 0; line-height: 1;
}
.tutorial-nav-btn:hover:not(:disabled) { background: rgba(56, 178, 172, 0.25); border-color: var(--highlight); }
.tutorial-nav-btn:disabled { opacity: 0.3; cursor: default; }
#tutorial-counter { color: #94a3b8; font-size: 0.85rem; }

.top-center { display: flex; gap: 8px; }
.stat-box {
    background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color);
    border-radius: 6px; padding: 4px 8px; display: flex; flex-direction: column;
    min-width: 88px; text-align: right; transition: border-color 0.2s, background 0.2s;
}
.stat-box.clickable { cursor: pointer; }
.stat-box.clickable:hover { border-color: var(--highlight); background: rgba(56, 178, 172, 0.1); }
.stat-label { font-size: 0.65rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; text-align: left;}
.stat-val { font-size: 1.1rem; font-weight: bold; color: #e2e8f0; }

.top-right { display: flex; align-items: center; gap: 15px; }
.date-container { font-weight: bold; font-size: 1.1rem; color: var(--highlight); }
.time-controls { display: flex; background: rgba(15, 23, 42, 0.8); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-color);}
.time-btn { background: transparent; border: none; border-right: 1px solid var(--border-color); color: #94a3b8; padding: 8px 12px; cursor: pointer; font-size: 0.9rem; transition: 0.2s; }
.time-btn:last-child { border-right: none; }
.time-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.time-btn.active { background: var(--highlight); color: #1a202c; font-weight: bold; }

/* --- Map Area --- */
#map-area { flex: 1; position: relative; background: #0b1120; }
#map-viewport { width: 100%; height: 100%; overflow: hidden; position: relative; cursor: grab; }
#map-viewport:active { cursor: grabbing; }
#map-layer { position: absolute; width: 800px; height: 1000px; transform-origin: top left; }
#map-container { position: absolute; width: 100%; top:0; left:0; }
#map-container svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 15px rgba(0,0,0,0.5)); }
#map-container svg path { fill: #1e293b; stroke: #0f172a; stroke-width: 1px; transition: fill 0.2s; cursor: pointer;}
#map-container svg path:hover { fill: #2d3748; }
#map-container svg path.active-region { fill: #3182ce; stroke: #fff; stroke-width: 2px; }

/* --- PNG Markers & Hybrid Logic --- */
#markers-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

.park-marker {
    position: absolute; transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
    cursor: pointer; pointer-events: auto;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.6); transition: transform 0.2s;
    border: 2px solid;
    /* overflow bewusst NICHT hidden - sonst wird das Warn-Badge (das leicht
       ueber den Rand hinausragt) abgeschnitten. Das Clipping fuer die
       Icon-Grafiken uebernimmt stattdessen .marker-visual. */
}
.park-marker:hover { transform: translate(-50%, -50%) scale(1.15); z-index: 5; }

.marker-visual {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
    display: flex; justify-content: center; align-items: center;
}

/* Status-Farben */
.state-AVAILABLE { background: #334155; border-color: #94a3b8; }
.state-OWNED { background: #1e3a8a; border-color: #60a5fa; }
.state-ACTIVE { background: #064e3b; border-color: #34d399; }

/* Bilder innerhalb der Marker */
.park-img { width: 75%; height: 75%; object-fit: contain; }

/* Mix/Hybrid Container (Split Screen) */
.mix-container {
    position: absolute; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
}
.mix-left { clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); } /* Schneidet rechte Hälfte ab */
.mix-right { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); } /* Schneidet linke Hälfte ab */

/* Animationen für PNGs */
@keyframes spin { 100% { transform: rotate(360deg); } }
.spin-anim { animation: spin 3s linear infinite; }

/* --- Universelles Popup-System: zwei Slots (links/rechts), scrollbar --- */
.side-popup {
    position: fixed; top: 76px; width: 340px; max-height: calc(100vh - 96px);
    background: var(--panel-bg); border: 1px solid var(--border-color);
    border-radius: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    backdrop-filter: blur(8px); display: flex; flex-direction: column;
    transition: opacity 0.2s, transform 0.2s; z-index: 20;
}
.popup-left { left: 20px; }
.popup-right { right: 20px; }
.side-popup.hidden { opacity: 0; pointer-events: none; }
.popup-left.hidden { transform: translateX(-10px); }
.popup-right.hidden { transform: translateX(10px); }
.popup-header {
    background: rgba(0,0,0,0.4); padding: 12px 15px; display: flex; justify-content: space-between;
    align-items: center; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.popup-header h2 { margin: 0; font-size: 1.1rem; color: #f8fafc; }
.popup-header button { background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; font-weight: bold; }
.popup-header button:hover { color: #f87171; }
.popup-content { padding: 20px; font-size: 0.95rem; overflow-y: auto; flex: 1; min-height: 0; }
.popup-content p { margin: 8px 0; }
.popup-content strong { color: var(--highlight); }

.ledger-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ledger-table th { text-align: left; color: #94a3b8; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.5px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); }
.ledger-table td { padding: 6px 0; border-bottom: 1px solid rgba(71, 85, 105, 0.4); }
.ledger-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.assignment-card {
    background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); border-radius: 4px;
    padding: 10px; margin-bottom: 8px;
}
.assignment-card-title { margin: 0 0 6px 0; font-size: 0.85rem; font-weight: bold; }
.assignment-card select {
    width: 100%; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 4px;
    color: var(--text-main); padding: 7px 8px; font-size: 0.85rem;
}
.assignment-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px; font-size: 0.75rem; color: #94a3b8; gap: 8px;
}
.assignment-card-meta .btn-secondary {
    width: auto; flex-shrink: 0; padding: 5px 10px; font-size: 0.72rem;
}

#fleet-park-select {
    width: 100%; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 4px;
    color: var(--text-main); padding: 8px 10px; font-size: 0.85rem; margin-bottom: 10px;
}

.period-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.period-tab {
    flex: 1; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 4px;
    color: #94a3b8; padding: 6px 4px; font-size: 0.72rem; cursor: pointer; text-transform: uppercase;
    letter-spacing: 0.5px; font-family: inherit;
}
.period-tab:hover { border-color: var(--highlight); }
.period-tab.active { background: var(--highlight); color: #1a202c; font-weight: bold; border-color: var(--highlight); }

.loan-amount-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.loan-amount-row input[type="number"] {
    flex: 1; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color); border-radius: 4px;
    color: var(--text-main); padding: 8px 10px; font-size: 0.9rem;
}
.loan-preview {
    background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-color); border-radius: 4px;
    padding: 10px 12px; margin-bottom: 12px;
}
.loan-preview p { margin: 3px 0; font-size: 0.85rem; }

/* Popup Footer & Buttons */
.popup-footer { padding: 0 20px 20px 20px; display: flex; gap: 10px; flex-direction: column; flex-shrink: 0; }
.popup-footer:empty { padding: 0; }
.btn-primary, .btn-secondary {
    width: 100%; padding: 10px; border: none; border-radius: 4px;
    cursor: pointer; font-weight: bold; text-transform: uppercase; transition: 0.2s;
}
.btn-primary { background: #2563eb; color: white; }
.btn-primary:hover { background: #3b82f6; }
.btn-secondary { background: #475569; color: white; }
.btn-secondary:hover { background: #64748b; }

/* --- Park-Builder --- */
#park-builder-area { flex: 1; display: flex; flex-direction: column; background: #0b1120; min-height: 0; }

#builder-header {
    height: 56px; background: var(--panel-bg); border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 16px; padding: 0 15px; flex-shrink: 0;
}
#builder-header .btn-secondary { width: auto; padding: 8px 14px; }
#btn-toggle-delete-mode.active { background: #dc2626; color: #fff; }
#btn-toggle-delete-mode.active:hover { background: #ef4444; }
#builder-header h2 { margin: 0; flex: 1; font-size: 1.05rem; color: var(--highlight); }
#builder-header .stat-box { min-width: 140px; }

/* Slider-Toggle (roadmap_phasen.md Phase 11.1) - fuer die Einflusszonen,
   generisch genug fuer weitere zukuenftige An/Aus-Einstellungen. */
.switch-label {
    display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-main);
    cursor: pointer; user-select: none; flex-shrink: 0;
}
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute; inset: 0; background: #475569; border-radius: 20px; transition: background 0.15s;
}
.switch-slider::before {
    content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px;
    background: white; border-radius: 50%; transition: transform 0.15s;
}
.switch input:checked + .switch-slider { background: var(--highlight); }
.switch input:checked + .switch-slider::before { transform: translateX(16px); }

/* Anlagen-Transparenz-Regler (roadmap_phasen.md Phase 14.1) */
.opacity-slider-label {
    display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-main);
    user-select: none; flex-shrink: 0;
}
.opacity-slider-label input[type="range"] { width: 80px; accent-color: var(--highlight); }
#asset-opacity-display { min-width: 34px; color: #94a3b8; font-variant-numeric: tabular-nums; }

#builder-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* Bebaubarkeits-Legende (roadmap_phasen.md Phase 11.2) */
#builder-legend {
    flex-shrink: 0; background: var(--panel-bg); border-top: 1px solid var(--border-color);
    padding: 8px 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
    font-size: 0.75rem; color: #cbd5e1;
}
.legend-group-label { color: #94a3b8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-hint { color: #94a3b8; font-style: italic; font-size: 0.72rem; }
.legend-ctrl-hint { margin-left: auto; color: #94a3b8; font-style: italic; font-size: 0.72rem; text-align: right; }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(255,255,255,0.2); }
.legend-swatch-empty {
    background-image:
        linear-gradient(45deg, #475569 25%, transparent 25%), linear-gradient(-45deg, #475569 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #475569 75%), linear-gradient(-45deg, transparent 75%, #475569 75%);
    background-size: 6px 6px; background-position: 0 0, 0 3px, 3px -3px, -3px 0; background-color: #1e293b;
}

#build-palette {
    width: 230px; flex-shrink: 0; background: var(--panel-bg); border-right: 1px solid var(--border-color);
    padding: 14px; overflow-y: auto;
}
#build-palette h3 {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: #94a3b8;
    margin: 16px 0 8px 0;
}
#build-palette h3:first-child { margin-top: 0; }
.palette-empty { font-size: 0.8rem; color: #64748b; margin: 0 0 10px 0; }
.palette-item {
    display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%;
    text-align: left; background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-color);
    border-radius: 4px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer;
    color: var(--text-main); font-family: inherit; text-transform: none;
}
.palette-item:hover { border-color: var(--highlight); }
.palette-item.selected { border-color: var(--highlight); background: rgba(56, 178, 172, 0.18); }
.palette-icon {
    width: 34px; height: 34px; object-fit: cover; border-radius: 3px; flex-shrink: 0;
    background: rgba(0, 0, 0, 0.25);
}
.palette-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.palette-name { font-weight: bold; font-size: 0.85rem; }
.palette-price { font-size: 0.75rem; color: #94a3b8; }

#park-grid-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: grab; }
#park-grid-viewport:active { cursor: grabbing; }
#park-grid {
    position: relative; display: grid; background: rgba(20, 33, 51, 0.6); border: 1px solid var(--border-color);
    flex-shrink: 0; transform-origin: center center;
}
.grid-cell { border: 1px solid rgba(71, 85, 105, 0.35); box-sizing: border-box; cursor: pointer; }
.grid-cell:hover { background: rgba(56, 178, 172, 0.15); }

.grid-asset {
    position: absolute; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    font-size: 16px; pointer-events: none; box-sizing: border-box;
    opacity: var(--asset-opacity, 1); transition: opacity 0.15s;
}
.grid-asset.substation { font-size: 18px; }
.grid-asset.turbine, .grid-asset.solar, .grid-asset.storage { pointer-events: auto; cursor: pointer; }
.grid-asset.turbine:hover, .grid-asset.solar:hover, .grid-asset.storage:hover { filter: brightness(1.3); outline: 1px solid #f87171; }
.grid-asset.broken { background: rgba(248, 113, 113, 0.25); border-radius: 50%; filter: grayscale(0.5); }
.asset-visual { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.asset-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

#builder-info-panel {
    width: 260px; flex-shrink: 0; background: var(--panel-bg); border-left: 1px solid var(--border-color);
    padding: 14px; overflow-y: auto;
}
.info-panel-close {
    float: right; background: none; border: none; color: #94a3b8; font-size: 1rem; cursor: pointer; line-height: 1;
}
.info-panel-close:hover { color: var(--text-main); }
.info-panel-img { width: 100%; max-height: 130px; object-fit: cover; border-radius: 4px; margin-bottom: 10px; background: rgba(0, 0, 0, 0.25); }
.info-panel-title { margin: 0 0 10px 0; font-size: 0.95rem; color: var(--highlight); clear: both; }
.info-row {
    display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; padding: 5px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.info-row span:first-child { color: #94a3b8; }
.info-row span:last-child { text-align: right; font-weight: bold; }
.info-panel-subtitle { margin: 12px 0 4px 0; font-size: 0.72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; }
.info-panel-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.info-panel-table td { padding: 2px 4px; border-bottom: 1px solid rgba(148, 163, 184, 0.08); }
.info-panel-table td.num { text-align: right; }
.info-panel-table tr.current-month { color: var(--highlight); font-weight: bold; }
.efficiency-badge {
    position: absolute; bottom: -6px; right: -6px; font-size: 0.55rem; line-height: 1.2;
    background: #1e293b; border: 1px solid var(--border-color); border-radius: 3px; padding: 0 2px; color: #fbbf24;
}
.wear-malus {
    position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);
    font-size: 0.6rem; font-weight: bold; line-height: 1; color: #f87171; white-space: nowrap;
}

.cable-layer { position: absolute; top: 0; left: 0; pointer-events: none; }

/* Kabel als duenne Leitungen (roadmap_phasen.md Phase 7.4b-Feinschliff) -
   .cable-level-* liefert nur die Stroke-Farbe (Auslastung), Strichstaerke/
   -art kommt inline (line_width) bzw. ueber .cable-wire-dashed/-solid
   (Kabelstufe). Fuer die isolierte Punkt-Darstellung (<circle>) und die
   Park-Details-Mini-Vorschau (.mini-cable-cell, Rechtecke) wird zusaetzlich
   eine Fuellfarbe pro Stufe definiert. */
.cable-wire { fill: none; stroke-linecap: round; }
.cable-wire-dashed { stroke-dasharray: 6 4; }
.cable-wire-solid { stroke-dasharray: none; }
.cable-level-yellow { stroke: #facc15; }
.cable-level-orange { stroke: #fb923c; }
.cable-level-red { stroke: #f87171; }
circle.cable-wire.cable-level-yellow { fill: #facc15; }
circle.cable-wire.cable-level-orange { fill: #fb923c; }
circle.cable-wire.cable-level-red { fill: #f87171; }

.mini-cable-cell.cable-level-yellow { fill: rgba(250, 204, 21, 0.4); stroke: rgba(250, 204, 21, 0.7); }
.mini-cable-cell.cable-level-orange { fill: rgba(251, 146, 60, 0.45); stroke: rgba(251, 146, 60, 0.85); }
.mini-cable-cell.cable-level-red { fill: rgba(248, 113, 113, 0.5); stroke: rgba(248, 113, 113, 0.9); }

.turbine-zone {
    fill: rgba(96, 165, 250, 0.06); stroke: rgba(96, 165, 250, 0.45);
    stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none;
}
.turbine-zone.has-turbine-overlap { stroke: rgba(248, 113, 113, 0.85); }
.turbine-zone.has-solar-overlap { fill: rgba(250, 204, 21, 0.18); }

/* --- Mini-Grid-Vorschau (Park-Details, read-only) --- */
.mini-grid {
    position: relative; background: rgba(20, 33, 51, 0.6); border: 1px solid var(--border-color);
    border-radius: 4px; max-width: 100%; overflow: hidden;
}
.mini-terrain-cell { position: absolute; }
.mini-cable-layer { position: absolute; top: 0; left: 0; }
.mini-cable-cell { stroke-width: 0.5; }
.mini-asset { position: absolute; border-radius: 1px; }
.mini-substation { background: #f87171; border-radius: 50%; }