:root{
  --bg:#0b1320; --card:#0e1a2b; --ink:#e6eefc; --muted:#9fb2d7; --line:#20304e;
  --sev-allclear:#16a34a;
  --sev-minor:#facc15; --sev-moderate:#f59e0b; --sev-severe:#ef4444; --sev-extreme:#7c3aed;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f9fc; --card:#111827; --ink:#e6eefc; --muted:#c7d2fe; --line:#374151; }
}

html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.wp-app{min-height:100vh; display:flex; flex-direction:column}

/* Header + Filter */
.wp-header{display:flex; align-items:center; gap:18px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--card)}
.wp-header h1{margin:0; font-size:1.4rem; font-weight:900}
.wp-filters{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.wp-filters label{font-size:.95rem}

/* Lesbare Selects (dunkler Hintergrund, helle Schrift) */
.wp-filters select{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--ink);
  appearance:auto;
  outline:none;
}
.wp-filters select option{ background:#0f172a; color:#e5e7eb; } /* Dropdown selbst */
.wp-filters select:focus{ box-shadow:0 0 0 2px #ffffff33; }
.wp-filters .srcs{display:flex; gap:10px; border:1px dashed var(--line); border-radius:12px; padding:6px 10px}
.wp-filters .btn{padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer}

/* Layout */
.wp-main{display:grid; grid-template-columns: 2fr 1fr; gap:16px; padding:16px; height: calc(100vh - 120px);}
.wp-map{position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden}
#map{width:100%; height:100%; min-height: calc(92vh - 140px)}
.wp-side{min-height:0; overflow:auto}
.wp-list{display:grid; gap:12px}

/* Overlay (Legende + Timeline) */
.wp-overlay{ position:absolute; inset:12px auto auto 12px; z-index:400; display:flex; flex-direction:column; gap:8px; }
.overlay-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.legend{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:999px; border:1px solid var(--line);
  background:rgba(0,0,0,.25); backdrop-filter: blur(4px);
}
.lg-title{opacity:.85; margin-right:4px}
.lg-item{display:inline-flex; align-items:center; gap:6px; font-size:.9rem}
.lg-swatch{display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid #0006}
.lg-green{background: var(--sev-allclear)}
.lg-yellow{background: var(--sev-minor)}
.lg-orange{background: var(--sev-moderate)}
.lg-red{background: var(--sev-severe)}
.lg-violet{background: var(--sev-extreme)}
.timeline{ display:flex; flex-wrap:wrap; gap:6px; }

/* Cards / Chips */
.wp-card{background:var(--card); border:1px solid var(--line); border-left:6px solid transparent; border-radius:14px; padding:10px 12px}
.wp-hl{margin:.2rem 0 .4rem; font-weight:800; font-size:1.05rem}
.wp-meta{display:flex; flex-wrap:wrap; gap:6px; color:var(--muted); font-size:.9rem}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.06)
}
.chip-green{ background: rgba(22,163,74,.15); border-color: rgba(22,163,74,.5); color:#bbf7d0; }

.wp-link{display:inline-block; margin-top:8px; font-weight:700; text-decoration:none; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--ink)}
.wp-link:hover{background:var(--ink); color:var(--card)}

/* Farben an Cards/Marker */
.wp-card.sev-allclear{ border-left-color: var(--sev-allclear); }
.wp-card.sev-minor{ border-left-color: var(--sev-minor); }
.wp-card.sev-moderate{ border-left-color: var(--sev-moderate); }
.wp-card.sev-severe{ border-left-color: var(--sev-severe); }
.wp-card.sev-extreme{ border-left-color: var(--sev-extreme); }

.wp-dot{ width:14px; height:14px; border-radius:50%; border:2px solid #0004; background:#ccc }
.wp-dot.sev-allclear{ background: var(--sev-allclear); }
.wp-dot.sev-minor{ background: var(--sev-minor); }
.wp-dot.sev-moderate{ background: var(--sev-moderate); }
.wp-dot.sev-severe{ background: var(--sev-severe); }
.wp-dot.sev-extreme{ background: var(--sev-extreme); }

/* Footer */
.wp-footer{padding:10px 16px; border-top:1px solid var(--line); background:var(--card); color:var(--muted)}

/* Detail */
.wp-detail{max-width:1100px; margin:0 auto; padding:16px}
.d-hdr{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.d-title{margin:0; font-size:1.6rem; font-weight:900}
.btn{padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink); text-decoration:none}
.d-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.d-body{margin-top:16px}
.d-body h2{margin-top:18px}
.d-meta{line-height:1.6}
.d-note{margin-top:12px; color:var(--muted); font-size:.92rem}

/* Responsive */
@media (max-width: 1100px){
  .wp-main{grid-template-columns: 1fr; height:auto}
  #map{min-height:50vh}
  .wp-overlay{inset:8px auto auto 8px}
  .legend{padding:4px 8px}
  .lg-item{font-size:.85rem}
}