:root { --navy:#17365d; --blue:#2f5f91; --paper:#f4f0e5; --gold:#d8aa4e; --ink:#1f2b38; --muted:#65717f; }
* { box-sizing:border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#e7e0d0; color:var(--ink); font-family:"Segoe UI", Arial, sans-serif; }
button { font:inherit; }
.app { height:100vh; display:grid; grid-template-rows:auto 1fr; }
header { background:linear-gradient(110deg,#132e50,#234f7a); color:white; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; padding:14px 22px; box-shadow:0 2px 12px #0005; z-index:2; }
.title h1 { margin:0; font-family:Georgia,serif; font-size:clamp(24px,2.2vw,40px); letter-spacing:.01em; }
.title p { margin:4px 0 0; color:#dbe8f3; font-size:clamp(13px,1vw,18px); }
.filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.filters button, .timeline-button, .story-button, .map-controls button, .close { border:1px solid #ffffff55; border-radius:8px; color:white; background:#ffffff16; padding:10px 14px; min-height:44px; cursor:pointer; }
.filters button.active, .timeline-button.active, .story-button.active { background:var(--gold); color:#17263a; border-color:#f4d995; font-weight:700; }
.main { min-height:0; display:grid; grid-template-columns:minmax(0, 2.15fr) minmax(330px, .85fr); gap:0; }
.map-area { position:relative; min-width:0; min-height:0; background:#c9c0aa; overflow:hidden; }
#map-shell { width:100%; height:100%; display:grid; place-items:center; touch-action:none; cursor:grab; }
#map-shell:active { cursor:grabbing; }
#map-shell[hidden] { display:none; }
#grove-map { display:block; width:100%; height:100%; max-width:100%; max-height:100%; background:#efe9da; }
#grove-map [id^="lot-"] { cursor:pointer; transform-box:fill-box; transform-origin:center; outline:none !important; }
#grove-map [id^="lot-"] > * { opacity:0 !important; pointer-events:all; transition:opacity .16s ease, fill-opacity .16s ease, stroke-width .16s ease; vector-effect:non-scaling-stroke; }
#grove-map [id^="lot-"]:hover > *, #grove-map [id^="lot-"]:focus-visible > *, #grove-map [id^="lot-"].selected > * { opacity:1 !important; fill-opacity:.14 !important; stroke:#ffcc43 !important; stroke-width:5 !important; filter:drop-shadow(0 1px 2px #0009); }
#grove-map [id^="lot-"].filter-match > * { opacity:1 !important; fill-opacity:.42 !important; stroke:#17365d !important; stroke-width:2.5 !important; }
#grove-map [id^="lot-"].color-westclox > * { fill:#007c91 !important; }
#grove-map [id^="lot-"].color-developer > * { fill:#d97706 !important; }
#grove-map [id^="lot-"].color-roth > * { fill:#c23b22 !important; }
#grove-map [id^="lot-"].color-linnig > * { fill:#276fbf !important; }
#grove-map [id^="lot-"].color-vollmer > * { fill:#7a4eab !important; }
#grove-map [id^="lot-"].color-carus > * { fill:#b33f78 !important; }
#grove-map [id^="lot-"].filter-match.selected > *, #grove-map [id^="lot-"].filter-match:focus-visible > * { fill-opacity:.30 !important; stroke:#ffcc43 !important; stroke-width:5 !important; }
#grove-map [id^="lot-"].filtered-out { pointer-events:none; }
#grove-map [id^="lot-"].timeline-built > * { opacity:1 !important; fill:#2f6f7e !important; fill-opacity:.34 !important; stroke:#17365d !important; stroke-width:2.5 !important; }
#grove-map [id^="lot-"].timeline-current > * { opacity:1 !important; fill:#f2c84b !important; fill-opacity:.72 !important; stroke:#7b3f00 !important; stroke-width:5 !important; filter:drop-shadow(0 1px 3px #0008); }
#grove-map [id^="lot-"].timeline-built.selected > *, #grove-map [id^="lot-"].timeline-current.selected > * { stroke:#ffcc43 !important; stroke-width:6 !important; }
.filter-legend { position:absolute; left:16px; top:16px; display:flex; flex-wrap:wrap; gap:8px 14px; max-width:calc(100% - 32px); padding:10px 13px; border-radius:9px; background:#f4f0e5ee; color:#17263a; box-shadow:0 2px 10px #0004; font-size:14px; font-weight:700; pointer-events:none; }
.filter-legend[hidden] { display:none; }
.filter-legend span { display:flex; align-items:center; gap:6px; }
.swatch { width:18px; height:18px; border:2px solid #17365d; border-radius:4px; }
.swatch.color-westclox { background:#007c91; }.swatch.color-developer { background:#d97706; }.swatch.color-roth { background:#c23b22; }.swatch.color-linnig { background:#276fbf; }.swatch.color-vollmer { background:#7a4eab; }.swatch.color-carus { background:#b33f78; }
.timeline-panel { position:absolute; top:16px; left:50%; transform:translateX(-50%); width:min(640px,calc(100% - 32px)); padding:13px 16px; border-radius:12px; background:#132e50ee; color:white; box-shadow:0 4px 18px #0006; text-align:center; }
.timeline-panel[hidden] { display:none; }
.timeline-year { font-family:Georgia,serif; font-size:clamp(26px,3vw,42px); font-weight:700; color:#f3d477; line-height:1; }
.timeline-status { min-height:22px; margin:7px 0 10px; font-size:15px; }
.timeline-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
.timeline-controls button { min-height:44px; border:1px solid #ffffff66; border-radius:7px; padding:8px 13px; background:#ffffff18; color:white; font:inherit; font-weight:650; cursor:pointer; }
.timeline-controls .primary { background:#d8aa4e; color:#17263a; border-color:#f4d995; }
.story-visual { position:absolute; inset:0; display:grid; place-items:center; padding:14px; background:#f7edd5; }
.story-visual[hidden] { display:none; }
.story-visual img { display:block; width:100%; height:100%; object-fit:contain; }
.map-controls { position:absolute; left:16px; bottom:16px; display:flex; gap:7px; padding:6px; border-radius:10px; background:#132e50dd; box-shadow:0 3px 14px #0005; }
.map-controls[hidden] { display:none; }
.map-controls button { font-size:20px; min-width:46px; padding:8px 12px; }
.details { min-height:0; overflow-y:auto; background:var(--paper); border-left:5px solid var(--navy); box-shadow:-5px 0 16px #0002; }
.panel-inner { padding:clamp(20px,2vw,36px); }
.welcome-mark { width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:white; font-size:30px; margin-bottom:20px; }
.details h2 { font-family:Georgia,serif; color:var(--navy); font-size:clamp(25px,2.1vw,38px); line-height:1.08; margin:4px 0 8px; }
.details h3 { color:var(--navy); font-family:Georgia,serif; font-size:23px; margin:26px 0 8px; }
.details p { font-size:clamp(16px,1.12vw,20px); line-height:1.52; }
.story-panel p { font-size:clamp(14px,.94vw,17px); line-height:1.43; }
.story-panel h2 { margin-bottom:14px; }
.story-portrait { display:block; width:min(62%,230px); max-height:245px; object-fit:contain; margin:0 auto 16px; border-radius:8px; box-shadow:0 2px 10px #0003; background:white; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; color:var(--blue); font-weight:700; font-size:14px !important; margin:0; }
.owner { font-weight:650; color:#3d4b59; margin:0 0 16px; }
.badges { display:flex; flex-wrap:wrap; gap:7px; margin:17px 0; }
.badge { display:inline-block; padding:6px 10px; border-radius:999px; background:#d8e3ed; color:#24384d; font-size:14px; font-weight:700; }
.badge.westclox { background:#f1cf6f; }.badge.family { background:#d9c8e8; }.badge.developer { background:#bfe0c7; }.badge.neutral { background:#dce2e7; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:18px 0; }
.facts div { background:white; border:1px solid #d6d1c5; border-radius:8px; padding:10px; }
.facts dt { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.facts dd { margin:4px 0 0; font-size:16px; font-weight:700; }
.photos { display:grid; gap:12px; }.photos figure { margin:0; }.photos img { width:100%; max-height:300px; object-fit:contain; background:#ddd7ca; border-radius:8px; }.photos figcaption { font-size:13px; color:var(--muted); margin-top:5px; }
.placeholder { color:var(--muted); font-style:italic; }
.close { float:right; background:var(--navy); border:0; margin:0 0 12px 12px; }
@media (max-width:1000px) { header { grid-template-columns:1fr; }.filters { justify-content:flex-start; }.main { grid-template-columns:1.6fr 1fr; }.facts { grid-template-columns:1fr; } }