:root {
  --bg: #050b14;
  --bg-2: #071420;
  --panel: rgba(10, 24, 38, 0.82);
  --panel-strong: rgba(13, 36, 56, 0.96);
  --line: rgba(118, 213, 255, 0.22);
  --line-strong: rgba(118, 213, 255, 0.52);
  --text: #f5f7fb;
  --muted: #9fb5c8;
  --accent: #5ee7ff;
  --accent-2: #14b8d4;
  --accent-3: #55efc4;
  --gold: #f5b84b;
  --land-a: #173f5e;
  --land-b: #0e6b8d;
  --land-c: #0c334c;
  --land-stroke: rgba(147, 226, 255, 0.52);
  --country-stroke: rgba(191, 240, 255, 0.19);
  --map-glow-a: #5ee7ff;
  --map-glow-b: #1b9ed4;
  --map-glow-c: #031120;
  --dot-core: #ffffff;
  --dot-main: #5ee7ff;
  --dot-hot: #f5b84b;
  --dot-stroke: rgba(255,255,255,.92);
  --dot-shadow: rgba(94,231,255,.72);
  --paper-line: rgba(255,255,255,0);
  --scanline-opacity: 0;
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[data-theme="intel-green"] {
  --bg: #010805;
  --bg-2: #02140b;
  --panel: rgba(0, 24, 12, 0.82);
  --panel-strong: rgba(0, 35, 17, 0.96);
  --line: rgba(73, 255, 153, 0.25);
  --line-strong: rgba(73, 255, 153, 0.58);
  --text: #eafff1;
  --muted: #89caa0;
  --accent: #39ff88;
  --accent-2: #00c866;
  --accent-3: #b2ff73;
  --gold: #d8ff72;
  --land-a: #042914;
  --land-b: #0b5e2d;
  --land-c: #02200f;
  --land-stroke: rgba(84, 255, 156, 0.74);
  --country-stroke: rgba(110, 255, 170, 0.24);
  --map-glow-a: #39ff88;
  --map-glow-b: #008542;
  --map-glow-c: #001309;
  --dot-core: #eafff1;
  --dot-main: #39ff88;
  --dot-hot: #d8ff72;
  --dot-stroke: rgba(225,255,237,.96);
  --dot-shadow: rgba(57,255,136,.86);
  --paper-line: rgba(255,255,255,0);
  --scanline-opacity: .22;
}

body[data-theme="intel-red"] {
  --bg: #100103;
  --bg-2: #190407;
  --panel: rgba(36, 5, 8, 0.82);
  --panel-strong: rgba(49, 7, 10, 0.96);
  --line: rgba(255, 76, 76, 0.25);
  --line-strong: rgba(255, 76, 76, 0.58);
  --text: #fff2f2;
  --muted: #d59a9a;
  --accent: #ff4b4b;
  --accent-2: #c9122e;
  --accent-3: #ff9f43;
  --gold: #ffcf5a;
  --land-a: #3c090d;
  --land-b: #8f1722;
  --land-c: #240306;
  --land-stroke: rgba(255, 85, 85, 0.78);
  --country-stroke: rgba(255, 160, 160, 0.25);
  --map-glow-a: #ff4b4b;
  --map-glow-b: #9e001a;
  --map-glow-c: #160105;
  --dot-core: #fff4f4;
  --dot-main: #ff3535;
  --dot-hot: #ffcf5a;
  --dot-stroke: rgba(255,245,245,.96);
  --dot-shadow: rgba(255,53,53,.86);
  --paper-line: rgba(255,255,255,0);
  --scanline-opacity: .23;
}

body[data-theme="old-map"] {
  --bg: #20160c;
  --bg-2: #312312;
  --panel: rgba(79, 55, 28, 0.78);
  --panel-strong: rgba(93, 65, 33, 0.94);
  --line: rgba(91, 55, 20, 0.22);
  --line-strong: rgba(91, 55, 20, 0.42);
  --text: #2c1d0f;
  --muted: #684824;
  --accent: #9b5f20;
  --accent-2: #6d3e14;
  --accent-3: #d09a48;
  --gold: #7c4715;
  --land-a: #c98f43;
  --land-b: #b57c38;
  --land-c: #8e5a25;
  --land-stroke: rgba(86, 50, 20, 0.62);
  --country-stroke: rgba(70, 40, 16, 0.23);
  --map-glow-a: #dca85a;
  --map-glow-b: #a66a2b;
  --map-glow-c: #4d321b;
  --dot-core: #fff1bf;
  --dot-main: #4a2608;
  --dot-hot: #b23a18;
  --dot-stroke: rgba(255,238,178,.92);
  --dot-shadow: rgba(91,48,13,.68);
  --paper-line: rgba(74, 45, 20, 0.36);
  --scanline-opacity: 0;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: var(--font);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 34%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 28%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 52%, var(--bg) 100%);
}
button, select, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell { width: min(1380px, calc(100% - 28px)); margin: 0 auto; padding: 22px 0 44px; }
.glass-card {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018)), var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 16px; border-radius:24px; margin-bottom:18px; }
.brand { display:inline-flex; align-items:center; gap:12px; }
.brand-mark { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; color:var(--bg); background:linear-gradient(135deg,var(--accent),var(--accent-3)); font-weight:950; letter-spacing:-.08em; }

.velum-logo-link { gap: 11px; }
.velum-logo-mark { color: var(--bg); }
.velum-logo-mark svg { display: block; width: 26px; height: 26px; }
.velum-logo-mark path { vector-effect: non-scaling-stroke; }
.brand-copy { display: grid; gap: 2px; }
.brand strong, .brand small { display:block; }
.brand small { color:var(--muted); margin-top:2px; }
.top-actions { display:flex; align-items:center; gap:12px; }
.theme-picker, .speed-control, .timeline-control { display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:800; }
select { min-height:42px; padding:0 40px 0 14px; color:var(--text); border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 82%, transparent); }
body[data-theme="old-map"] select { color:#2c1d0f; background:rgba(245,224,174,.72); }

.hero { display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:stretch; padding:clamp(22px,3.4vw,42px); border-radius:var(--radius-xl); margin-bottom:18px; }
.eyebrow { margin:0 0 10px; color:var(--gold); font-weight:900; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:12px; font-size:clamp(3.2rem,8vw,7.4rem); line-height:.9; letter-spacing:-.085em; }
.subtitle { margin-bottom:14px; color:var(--accent); font-size:clamp(1.3rem,3vw,2.35rem); font-weight:900; letter-spacing:-.04em; }
.intro { max-width:820px; margin-bottom:0; color:var(--muted); font-size:1.07rem; line-height:1.7; }
.today-card { border-radius:26px; padding:26px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); background:rgba(255,255,255,.045); }
.today-label { color:var(--gold); font-weight:950; letter-spacing:.14em; text-transform:uppercase; }
.today-card strong { margin:12px 0; color:var(--accent); font-size:clamp(2.4rem,4.6vw,4rem); line-height:.96; letter-spacing:-.08em; }
.today-card span:last-child { color:var(--muted); line-height:1.45; }

.control-panel { display:grid; grid-template-columns:auto auto 1fr; gap:16px; align-items:center; padding:16px; border-radius:24px; margin-bottom:18px; }
.button-row { display:flex; gap:10px; flex-wrap:wrap; }
.primary-btn, .ghost-btn { min-height:46px; border-radius:999px; border:1px solid var(--line); }
.primary-btn { padding:0 24px; border-color:color-mix(in srgb, var(--accent) 75%, transparent); color:var(--bg); font-weight:950; background:linear-gradient(135deg,var(--accent),var(--accent-3)); box-shadow:0 18px 42px color-mix(in srgb, var(--accent) 22%, transparent); }
.ghost-btn { padding:0 20px; color:var(--text); background:rgba(255,255,255,.055); }
body[data-theme="old-map"] .ghost-btn { color:#2c1d0f; background:rgba(245,224,174,.38); }
.timeline-control input { width:100%; min-width:220px; accent-color:var(--accent); }

.stage-grid { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:18px; margin-bottom:18px; }
.map-card { border-radius:var(--radius-xl); padding:18px; overflow:hidden; }
.map-toolbar { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:14px; }
.map-toolbar h2 { margin:0; font-size:clamp(1.45rem,2.8vw,2.65rem); letter-spacing:-.06em; }
.map-legend { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; color:var(--muted); font-size:.88rem; font-weight:800; }
.map-legend span { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.legend-dot { display:inline-block; border-radius:999px; background:var(--dot-main); box-shadow:0 0 12px var(--dot-main); }
.legend-dot.small { width:7px; height:7px; }
.legend-dot.medium { width:11px; height:11px; }
.legend-dot.large { width:16px; height:16px; background:var(--dot-hot); box-shadow:0 0 16px var(--dot-hot); }
.map-frame { position:relative; overflow:hidden; min-height:520px; border-radius:26px; border:1px solid var(--line); background:var(--bg); }
#worldMap { display:block; width:100%; height:auto; min-height:520px; position:relative; z-index:1; }
.cluster-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; mix-blend-mode:screen; }
body[data-theme="old-map"] .cluster-canvas { mix-blend-mode:multiply; }
.map-scene { transform-origin:0 0; transform-box:view-box; will-change:transform; transform:translate3d(0,0,0) scale(1); backface-visibility:hidden; contain:paint; }
.ocean { fill:color-mix(in srgb, var(--bg) 94%, #000); }
.ocean-vignette { fill:url(#oceanGlow); }
.paper-overlay { fill:url(#paperTexture); opacity:1; pointer-events:none; }
.graticule path { fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:4 10; opacity:.58; }
.continent-layer { filter:drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 18%, transparent)); }
.country-land { fill:url(#landGradient); stroke:var(--country-stroke); stroke-width:.65; vector-effect:non-scaling-stroke; fill-rule:evenodd; transition:fill .25s ease, stroke .25s ease; }
.continent-antarctica .country-land { opacity:.62; }
.continent-layer .country-land:hover { stroke:var(--land-stroke); stroke-width:1.15; }
.route-layer path { fill:none; stroke:var(--line-strong); stroke-width:1.2; stroke-dasharray:6 12; opacity:.28; }
.cluster-halo-layer circle { fill:var(--dot-main); filter:url(#strongGlow); }
.population-dots circle { filter:url(#strongGlow); transform-box:fill-box; transform-origin:center; }
.active-cluster-labels text { fill:var(--text); font-size:15px; font-weight:900; paint-order:stroke; stroke:var(--bg); stroke-width:4; }
.global-pulse { fill:var(--dot-main); opacity:.18; filter:url(#strongGlow); }
.scanlines { position:absolute; inset:0; z-index:3; pointer-events:none; opacity:var(--scanline-opacity); background:repeating-linear-gradient(to bottom, rgba(255,255,255,.22) 0 1px, transparent 1px 5px); mix-blend-mode:screen; }
.map-caption { position:absolute; z-index:5; left:18px; right:18px; bottom:18px; display:grid; gap:6px; padding:16px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb, var(--bg) 74%, transparent); backdrop-filter:blur(12px); }
.map-caption strong { color:var(--accent); font-size:1.12rem; }
.map-caption span { color:var(--muted); line-height:1.45; }

.metrics { border-radius:var(--radius-xl); padding:16px; display:grid; gap:12px; }
.metric { min-height:118px; padding:18px; border-radius:22px; border:1px solid var(--line); background:rgba(255,255,255,.042); display:flex; flex-direction:column; justify-content:center; }
.metric span { color:var(--muted); font-weight:850; }
.metric strong { margin-top:10px; color:var(--text); font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.04; letter-spacing:-.07em; }
.primary-metric strong { color:var(--accent); }
.note-metric { min-height:150px; justify-content:start; }
.note-metric p { margin:10px 0 0; color:var(--muted); line-height:1.55; }

.chart-section { border-radius:var(--radius-xl); padding:clamp(18px,3vw,30px); margin-bottom:18px; }
.chart-header { display:grid; grid-template-columns:1fr minmax(260px,430px); gap:20px; align-items:end; margin-bottom:16px; }
.chart-header h2 { margin-bottom:0; font-size:clamp(1.55rem,3.5vw,3rem); letter-spacing:-.06em; }
.chart-header p:last-child { color:var(--muted); line-height:1.65; margin-bottom:0; }
.chart-wrap { overflow:hidden; border-radius:22px; border:1px solid var(--line); background:radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%), rgba(2,8,15,.56); }
#populationChart { display:block; width:100%; height:auto; }
.grid-line { stroke:color-mix(in srgb, var(--muted) 16%, transparent); stroke-width:1; }
.axis-label, .tick-label { fill:var(--muted); font-size:15px; font-weight:800; }
.tick-label { font-size:13px; }
.area-path { fill:url(#areaGradient); }
.line-path { fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:url(#lineGlow); }
.marker { fill:var(--bg); stroke:var(--accent); stroke-width:3; }
.marker.milestone { stroke:var(--gold); }
.callout-box { fill:color-mix(in srgb, var(--bg) 88%, transparent); stroke:var(--line-strong); stroke-width:1; }
.callout-box.gold { stroke:var(--gold); }
.callout-text { fill:var(--text); font-size:15px; font-weight:900; }
.callout-small { fill:var(--muted); font-size:13px; font-weight:800; }
.active-dot { fill:var(--gold); stroke:var(--dot-core); stroke-width:4; filter:url(#lineGlow); }

.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; }
.info-grid article { border-radius:var(--radius-xl); padding:24px; }
.letter { width:44px; height:44px; display:inline-grid; place-items:center; margin-bottom:18px; border-radius:999px; border:2px solid var(--gold); color:var(--gold); font-weight:950; font-size:1.25rem; }
.info-grid article:nth-child(2) .letter { border-color:var(--accent); color:var(--accent); }
.info-grid article:nth-child(3) .letter { border-color:var(--accent-3); color:var(--accent-3); }
.info-grid h3 { margin-bottom:12px; font-size:1.35rem; letter-spacing:-.04em; }
.info-grid p { margin-bottom:0; color:var(--muted); line-height:1.62; }
.milestones { border-radius:var(--radius-xl); padding:24px; margin-bottom:18px; }
.milestones h2 { margin-bottom:16px; font-size:clamp(1.4rem,2.8vw,2.2rem); letter-spacing:-.06em; }
.milestone-chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { display:inline-flex; gap:10px; align-items:center; min-height:54px; padding:10px 14px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); font-weight:900; }
.chip::before { content:"●"; color:var(--accent); font-size:1.2rem; }
.footer-note { border-radius:var(--radius-xl); padding:22px 24px; color:var(--muted); line-height:1.65; }
.footer-note p { margin-bottom:8px; }
.footer-note p:last-child { margin-bottom:0; }
.footer-note strong { color:var(--gold); }

@media (max-width: 1100px) {
  .hero, .stage-grid, .chart-header { grid-template-columns:1fr; }
  .today-card { min-height:190px; }
  .metrics { grid-template-columns:repeat(3,1fr); }
  .note-metric { grid-column:1 / -1; min-height:auto; }
}
@media (max-width: 780px) {
  .app-shell { width:min(100% - 18px, 1380px); padding-top:10px; }
  .topbar, .control-panel, .map-toolbar { align-items:stretch; flex-direction:column; }
  .topbar, .map-toolbar { display:flex; }
  .control-panel { display:flex; }
  .theme-picker, .speed-control, .timeline-control { width:100%; justify-content:space-between; }
  .theme-picker select, .speed-control select { width:min(280px,55vw); }
  .button-row { width:100%; }
  .primary-btn, .ghost-btn { flex:1; }
  .metrics, .info-grid { grid-template-columns:1fr; }
  .map-frame { min-height:420px; }
  #worldMap { min-height:420px; }
  h1 { font-size:clamp(3rem,17vw,5.2rem); }
}
.pop-dot { fill: var(--dot-main); stroke: var(--dot-stroke); stroke-width: .85; filter: drop-shadow(0 0 7px var(--dot-shadow)); vector-effect: non-scaling-stroke; }
.pop-dot.hot { fill: var(--dot-hot); stroke: var(--dot-core); filter: drop-shadow(0 0 10px var(--dot-hot)); }
.pop-halo { fill: var(--dot-main); opacity: .18; vector-effect: non-scaling-stroke; }
.pop-halo.hot { fill: var(--dot-hot); }

/* v4: dynamische Meilensteine und Kontinent-Fokus */
.map-tools { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.map-reset-btn {
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--text);
  background:rgba(255,255,255,.055);
  font-weight:900;
  opacity:.95;
}
.map-reset-btn:disabled { opacity:.38; cursor:not-allowed; }
body[data-theme="old-map"] .map-reset-btn { color:#2c1d0f; background:rgba(245,224,174,.42); }
.continent { cursor:pointer; transition:opacity .65s ease, filter .65s ease; }
.continent .country-land { transition:opacity .65s ease, fill .35s ease, stroke .35s ease; }
.map-frame.is-focused .continent:not(.is-focused) { opacity:.045; filter:none; pointer-events:none; }
.map-frame.is-focused .continent.is-focused { opacity:1; filter:drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 34%, transparent)); }
.map-frame.is-focused .route-layer,
.map-frame.is-focused .cluster-halo-layer,
.map-frame.is-focused .population-dots,
.map-frame.is-focused .active-cluster-labels,
.map-frame.is-focused .global-pulse { opacity:.18; transition:opacity .75s ease; }
.map-frame:not(.is-focused) .route-layer,
.map-frame:not(.is-focused) .cluster-halo-layer,
.map-frame:not(.is-focused) .population-dots,
.map-frame:not(.is-focused) .active-cluster-labels,
.map-frame:not(.is-focused) .global-pulse { transition:opacity .75s ease; }
.focus-badge {
  position:absolute;
  z-index:5;
  left:18px;
  top:18px;
  max-width:min(420px, calc(100% - 36px));
  display:grid;
  gap:5px;
  padding:14px 16px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.3);
}
.focus-badge strong { color:var(--accent); font-size:1.08rem; }
.focus-badge span { color:var(--muted); line-height:1.35; font-weight:750; }
.reveal-marker,
.reveal-label { opacity:0; transform:translateY(8px); transition:opacity .55s ease, transform .55s ease; }
.reveal-marker.is-visible,
.reveal-label.is-visible { opacity:1; transform:translateY(0); }
.chip { opacity:.35; transform:translateY(3px); transition:opacity .45s ease, transform .45s ease, border-color .45s ease, background .45s ease; }
.chip.is-visible { opacity:1; transform:translateY(0); border-color:color-mix(in srgb, var(--accent) 46%, transparent); background:color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.04)); }
.chip.is-current { box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 22px color-mix(in srgb, var(--gold) 20%, transparent); }
@media (max-width:720px) {
  .map-tools { align-items:stretch; }
  .map-reset-btn { width:100%; }
}

/* v5: nahtlose Landflächen, dezenter Fokus und kompaktere Typografie */
.country-land {
  stroke: color-mix(in srgb, var(--land-b) 88%, var(--land-c));
  stroke-width: 1.15;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
  shape-rendering: geometricPrecision;
}
.continent-layer .country-land:hover {
  stroke: color-mix(in srgb, var(--land-stroke) 70%, var(--land-b));
  stroke-width: 1.35;
}
.map-toolbar h2 {
  font-size: clamp(1.02rem, 1.55vw, 1.48rem);
  letter-spacing: -0.035em;
}
.map-toolbar { margin-bottom: 10px; }
.map-legend { font-size: .76rem; gap: 7px; }
.map-legend span { padding: 6px 8px; }
.metric { min-height: 92px; padding: 14px; border-radius: 18px; }
.metric span { font-size: .78rem; }
.metric strong {
  margin-top: 6px;
  font-size: clamp(1.18rem, 2.1vw, 1.78rem);
  letter-spacing: -.045em;
}
.note-metric { min-height: 116px; }
.note-metric p { font-size: .86rem; line-height: 1.42; }
.chart-section { padding: clamp(14px, 2.1vw, 22px); }
.chart-header { margin-bottom: 10px; gap: 14px; }
.chart-header h2 {
  font-size: clamp(1.1rem, 2vw, 1.72rem);
  letter-spacing: -.04em;
}
.chart-header p:last-child { font-size: .9rem; line-height: 1.48; }
.axis-label { font-size: 12px; }
.tick-label { font-size: 11px; }
.callout-box { opacity: .92; }
.callout-text { font-size: 11px; }
.callout-small { font-size: 10px; }
.active-dot { stroke-width: 3; }
.info-grid { gap: 12px; }
.info-grid article { padding: 16px; border-radius: 22px; }
.letter {
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  font-size: 1rem;
}
.info-grid h3 { font-size: 1.02rem; margin-bottom: 7px; }
.info-grid p { font-size: .86rem; line-height: 1.45; }
.milestones { padding: 17px; }
.milestones h2 { font-size: clamp(1.05rem, 2vw, 1.55rem); margin-bottom: 10px; }
.chip { min-height: 42px; padding: 7px 11px; font-size: .84rem; border-radius: 13px; }
.focus-badge {
  left: 18px;
  top: 18px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  max-width: none;
  pointer-events: none;
}
.focus-badge strong {
  display: inline-block;
  color: var(--accent);
  font-size: clamp(1.05rem, 2.3vw, 1.55rem);
  font-weight: 950;
  letter-spacing: -.035em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent), 0 2px 10px rgba(0,0,0,.55);
}
.focus-badge span { display: none; }
.active-cluster-labels text { font-size: 11px; stroke-width: 3; }
.pop-dot { stroke-width: .45; }
.pop-halo { opacity: .14; }
@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metric strong { font-size: clamp(1.05rem, 4vw, 1.55rem); }
}
@media (max-width: 780px) {
  .map-toolbar h2 { font-size: 1.05rem; }
  .chart-header h2 { font-size: 1.18rem; }
  .metric { min-height: 86px; }
}


/* v6: kontrastreichere Cluster je Farbschema und flüssigerer Kontinent-Zoom */
body[data-theme="intel-green"] .legend-dot { background: var(--dot-main); box-shadow: 0 0 16px var(--dot-main), 0 0 28px rgba(57,255,136,.42); }
body[data-theme="intel-red"] .legend-dot { background: var(--dot-main); box-shadow: 0 0 16px var(--dot-main), 0 0 28px rgba(255,53,53,.42); }
body[data-theme="old-map"] .legend-dot { background: var(--dot-main); box-shadow: 0 0 10px rgba(70,38,8,.45); }
body[data-theme="old-map"] .legend-dot.large { background: var(--dot-hot); box-shadow: 0 0 13px rgba(178,58,24,.48); }
body[data-theme="old-map"] .pop-dot { stroke-width: .7; }
body[data-theme="old-map"] .pop-halo { opacity: .20; }
.map-frame.is-map-animating .continent,
.map-frame.is-map-animating .country-land,
.map-frame.is-map-animating .route-layer,
.map-frame.is-map-animating .cluster-halo-layer,
.map-frame.is-map-animating .population-dots,
.map-frame.is-map-animating .active-cluster-labels { pointer-events: none; }
.map-frame.is-focused .route-layer,
.map-frame.is-focused .cluster-halo-layer,
.map-frame.is-focused .population-dots,
.map-frame.is-focused .active-cluster-labels,
.map-frame.is-focused .global-pulse { opacity:.24; transition:opacity .35s ease; }

/* v7: Old-Sand-Lesbarkeit, kantigere Oberfläche, reine Epochenanzeige, stärkerer Kontinent-Fokus */
:root {
  --radius-xl: 18px;
  --radius-lg: 12px;
  --radius-md: 8px;
}
body[data-theme="old-map"] {
  --bg: #23170b;
  --bg-2: #3b2814;
  --panel: rgba(238, 204, 137, 0.78);
  --panel-strong: rgba(252, 226, 165, 0.92);
  --line: rgba(60, 33, 9, 0.40);
  --line-strong: rgba(48, 25, 6, 0.64);
  --text: #1a0f05;
  --muted: #3a2410;
  --accent: #ffffff;
  --accent-2: #4b2607;
  --accent-3: #f5d27a;
  --gold: #2b1605;
  --dot-core: #fff8da;
  --dot-main: #3a1604;
  --dot-hot: #ffefe0;
  --dot-stroke: rgba(255,255,255,.98);
  --dot-shadow: rgba(255,255,255,.45);
}
.topbar,
.control-panel,
.today-card,
.map-card,
.map-frame,
.metrics,
.metric,
.chart-section,
.chart-wrap,
.info-grid article,
.milestones,
.footer-note,
.map-caption,
.map-legend span,
.chip,
select,
.primary-btn,
.ghost-btn,
.map-reset-btn {
  border-radius: var(--radius-md) !important;
}
.hero { border-radius: var(--radius-xl) !important; }
.brand-mark,
.letter { border-radius: 8px !important; }
body[data-theme="old-map"] h1,
body[data-theme="old-map"] h2,
body[data-theme="old-map"] h3,
body[data-theme="old-map"] .brand strong,
body[data-theme="old-map"] .today-label,
body[data-theme="old-map"] .metric span,
body[data-theme="old-map"] .theme-picker,
body[data-theme="old-map"] .speed-control,
body[data-theme="old-map"] .timeline-control,
body[data-theme="old-map"] .map-legend,
body[data-theme="old-map"] .footer-note,
body[data-theme="old-map"] .info-grid p,
body[data-theme="old-map"] .chart-header p:last-child,
body[data-theme="old-map"] .intro,
body[data-theme="old-map"] .brand small {
  color: var(--text) !important;
}
body[data-theme="old-map"] .subtitle,
body[data-theme="old-map"] .eyebrow,
body[data-theme="old-map"] .today-card strong,
body[data-theme="old-map"] .metric strong,
body[data-theme="old-map"] .info-grid h3,
body[data-theme="old-map"] .milestones h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(43, 22, 5, .72), 0 0 2px rgba(0,0,0,.9);
}
body[data-theme="old-map"] .glass-card {
  background: linear-gradient(145deg, rgba(255,241,196,.82), rgba(201,139,61,.50)), var(--panel);
  border-color: rgba(58, 31, 8, .58);
}
body[data-theme="old-map"] .map-card,
body[data-theme="old-map"] .map-frame {
  background: #3b2814;
}
body[data-theme="old-map"] .active-cluster-labels text,
body[data-theme="old-map"] .focus-badge strong,
body[data-theme="old-map"] .map-caption strong,
body[data-theme="old-map"] .map-caption span {
  fill: #ffffff;
  color: #ffffff !important;
  stroke: #2b1605;
  text-shadow: 0 2px 10px rgba(0,0,0,.82), 0 0 2px rgba(0,0,0,1);
}
body[data-theme="old-map"] .map-caption {
  border: 0 !important;
  background: linear-gradient(90deg, rgba(42,22,5,.64), rgba(42,22,5,.22));
  box-shadow: none;
  backdrop-filter: blur(5px);
}
.map-caption {
  gap: 3px;
  padding: 11px 13px;
  border-radius: var(--radius-md) !important;
}
.map-caption strong {
  font-size: .98rem;
  letter-spacing: -.02em;
}
.map-caption span {
  font-size: .83rem;
  line-height: 1.32;
}
.map-frame.is-focused .continent:not(.is-focused) { opacity:.025; }
.map-frame.is-focused .continent.is-focused { filter:drop-shadow(0 0 24px color-mix(in srgb, var(--accent) 48%, transparent)); }
.map-frame.is-focused .route-layer,
.map-frame.is-focused .cluster-halo-layer,
.map-frame.is-focused .population-dots,
.map-frame.is-focused .active-cluster-labels,
.map-frame.is-focused .global-pulse { opacity:.16; }
body[data-theme="old-map"] .primary-btn { color:#1a0f05; }
body[data-theme="old-map"] .ghost-btn,
body[data-theme="old-map"] .map-reset-btn,
body[data-theme="old-map"] select { color:#1a0f05 !important; background:rgba(255,241,196,.78); }

/* v8: GPU-freundlicher Kontinent-Zoom */
#worldMap { overflow:hidden; transform:translateZ(0); }
.map-frame { contain:layout paint; }
.map-frame.is-map-animating .continent-layer,
.map-frame.is-map-animating .continent,
.map-frame.is-map-animating .country-land,
.map-frame.is-map-animating .cluster-halo-layer circle,
.map-frame.is-map-animating .population-dots circle,
.map-frame.is-map-animating .global-pulse {
  filter:none !important;
}
.map-frame.is-map-animating .active-cluster-labels,
.map-frame.is-map-animating .route-layer,
.map-frame.is-map-animating .cluster-halo-layer {
  opacity:.08 !important;
}
.map-frame.is-map-animating .population-dots {
  opacity:.36 !important;
}
.map-frame.is-map-animating .graticule {
  opacity:.22;
}

/* v9: Old-Sand Lesbarkeit für Kartenüberschrift, Legende und dynamische Zeitstrahl-Infofenster */
body[data-theme="old-map"] .map-toolbar h2 {
  color: #ffd86a !important;
  text-shadow: 0 2px 10px rgba(43, 22, 5, .88), 0 0 2px rgba(0,0,0,.95);
}

body[data-theme="old-map"] .map-legend {
  color: #ffd86a !important;
}

body[data-theme="old-map"] .map-legend span {
  color: #ffd86a !important;
  border-color: rgba(255, 216, 106, .72) !important;
  background: rgba(42, 22, 5, .46) !important;
  box-shadow: 0 0 0 1px rgba(43, 22, 5, .32), 0 8px 20px rgba(42, 22, 5, .28);
  text-shadow: 0 1px 6px rgba(0,0,0,.82);
}

body[data-theme="old-map"] .chart-wrap {
  background:
    radial-gradient(circle at 78% 25%, rgba(255, 216, 106, .16), transparent 34%),
    linear-gradient(145deg, rgba(68, 36, 9, .88), rgba(32, 18, 6, .94)) !important;
  border-color: rgba(255, 216, 106, .48) !important;
}

body[data-theme="old-map"] .axis-label,
body[data-theme="old-map"] .tick-label {
  fill: #fff4c7 !important;
  paint-order: stroke;
  stroke: rgba(32, 18, 6, .85);
  stroke-width: 3px;
}

body[data-theme="old-map"] .grid-line {
  stroke: rgba(255, 216, 106, .18) !important;
}

body[data-theme="old-map"] .callout-box {
  fill: rgba(38, 20, 5, .94) !important;
  stroke: rgba(255, 216, 106, .78) !important;
}

body[data-theme="old-map"] .callout-box.gold {
  stroke: #ffffff !important;
}

body[data-theme="old-map"] .callout-small {
  fill: #ffd86a !important;
  paint-order: stroke;
  stroke: rgba(18, 9, 2, .9);
  stroke-width: 2.4px;
}

body[data-theme="old-map"] .callout-text {
  fill: #ffffff !important;
  paint-order: stroke;
  stroke: rgba(18, 9, 2, .92);
  stroke-width: 2.8px;
}

body[data-theme="old-map"] .marker {
  fill: #2b1605 !important;
  stroke: #ffd86a !important;
}

body[data-theme="old-map"] .marker.milestone {
  stroke: #ffffff !important;
}

/* V10: freie Karten-Navigation wie bei Karten-Apps */
.map-frame {
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.map-frame.is-panning {
  cursor: grabbing;
}
.map-nav-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.map-nav-btn {
  min-width: 36px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.map-nav-btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.map-nav-btn.wide {
  min-width: 58px;
  padding: 0 10px;
  font-size: .78rem;
  letter-spacing: .03em;
}
.map-frame.is-user-zooming .cluster-halo-layer circle,
.map-frame.is-user-zooming .population-dots circle,
.map-frame.is-panning .cluster-halo-layer circle,
.map-frame.is-panning .population-dots circle {
  filter: none;
}
.map-frame.is-user-zooming .active-cluster-labels,
.map-frame.is-panning .active-cluster-labels {
  opacity: .45;
}
body[data-theme="old-map"] .map-nav-controls {
  background: rgba(54,31,12,.58);
  border-color: rgba(255,212,92,.55);
}
body[data-theme="old-map"] .map-nav-btn {
  color: #fff9df;
  background: rgba(62,34,13,.72);
  border-color: rgba(255,220,94,.7);
  text-shadow: 0 1px 3px rgba(0,0,0,.75);
}
body[data-theme="old-map"] .map-nav-btn:hover {
  border-color: #ffe778;
}
@media (max-width: 720px) {
  .map-nav-controls { width: 100%; justify-content: center; }
  .map-nav-btn { flex: 1; }
}


/* v12: Die 500 Bevölkerungspunkte werden performanter auf Canvas gezeichnet.
   Die alten SVG-Punktlayer bleiben im DOM nur als Fallback-Anker leer. */
.cluster-halo-layer,
.population-dots { display:none; }
.map-frame.is-map-animating .cluster-canvas,
.map-frame.is-user-zooming .cluster-canvas,
.map-frame.is-panning .cluster-canvas { opacity:.86; }

/* v13: Zoomabhängige Cluster-Namen als separate Label-Ebene über dem Canvas.
   Die Weltkarte bleibt SVG-scharf, die 500 Punkte bleiben Canvas-performant. */
.cluster-label-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;
}
.cluster-name-label {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(var(--label-x, 0px), var(--label-y, 0px), 0);
  color: #f7fbff;
  font-size: clamp(10px, 0.78vw, 13px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 9px rgba(0,0,0,.92),
    0 0 15px color-mix(in srgb, var(--accent) 42%, transparent);
  opacity: var(--label-opacity, .95);
  will-change: transform, opacity;
  transition: opacity .18s ease;
}
.cluster-name-label::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: var(--dot-main);
  box-shadow: 0 0 9px var(--dot-main);
}
.cluster-name-label.is-hot {
  color: #fff7d4;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 12px rgba(0,0,0,.9),
    0 0 16px color-mix(in srgb, var(--dot-hot) 60%, transparent);
}
.cluster-name-label.is-hot::before {
  background: var(--dot-hot);
  box-shadow: 0 0 11px var(--dot-hot);
}
.map-frame.is-user-zooming .cluster-name-label,
.map-frame.is-panning .cluster-name-label,
.map-frame.is-map-animating .cluster-name-label {
  opacity: calc(var(--label-opacity, .95) * .55);
}
body[data-theme="intel-green"] .cluster-name-label {
  color: #b8ffd0;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,255,108,.75);
}
body[data-theme="intel-red"] .cluster-name-label {
  color: #ffe4df;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(255,59,48,.82);
}
body[data-theme="old-map"] .cluster-name-label {
  color: #fff7d1;
  text-shadow:
    0 1px 2px rgba(30,13,4,.98),
    0 0 9px rgba(30,13,4,.95),
    0 0 15px rgba(255,211,91,.55);
}
body[data-theme="old-map"] .cluster-name-label::before {
  background: #ffe071;
  box-shadow: 0 0 10px rgba(255,224,113,.9);
}
@media (max-width: 720px) {
  .cluster-name-label { font-size: 10px; }
}


/* v16: kompakte Kartenleiste, ausgelagerte Epocheninfo und kleinere KPI-Höhen */
.compact-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.map-title {
  margin: 0;
  white-space: nowrap;
  font-size: .82rem;
  letter-spacing: .18em;
}
.compact-map-toolbar .map-tools {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.compact-map-toolbar .map-legend {
  flex-wrap: nowrap;
  gap: 6px;
  font-size: .72rem;
  white-space: nowrap;
}
.compact-map-toolbar .map-legend span {
  padding: 5px 7px;
  border-radius: 8px !important;
}
.compact-map-toolbar .map-nav-controls {
  flex: 0 0 auto;
}
.compact-map-toolbar .map-reset-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: .78rem;
}
.metrics {
  gap: 9px;
  padding: 12px;
}
.metric:not(.note-metric) {
  min-height: 74px;
  padding: 11px 13px;
}
.metric:not(.note-metric) span {
  font-size: .72rem;
  line-height: 1.15;
}
.metric:not(.note-metric) strong {
  margin-top: 4px;
  font-size: clamp(1.02rem, 2vw, 1.46rem);
  line-height: 1.02;
}
.epoch-metric {
  min-height: 154px;
  padding: 14px;
  justify-content: flex-start;
}
.epoch-metric span {
  color: var(--accent);
  font-size: .9rem;
  font-weight: 950;
  line-height: 1.18;
}
.epoch-metric p {
  margin: 8px 0 0;
  font-size: .9rem;
  line-height: 1.43;
}
.focus-badge strong:empty {
  display: none;
}
body[data-theme="old-map"] .epoch-metric span {
  color: #ffe16c !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
}
body[data-theme="old-map"] .epoch-metric p {
  color: #fff7d6 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
@media (max-width: 1180px) {
  .compact-map-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .compact-map-toolbar .map-tools {
    flex-basis: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .compact-map-toolbar .map-legend {
    flex-wrap: wrap;
    white-space: normal;
  }
}
@media (max-width: 780px) {
  .metric:not(.note-metric) {
    min-height: 64px;
  }
  .epoch-metric {
    min-height: 126px;
  }
  .compact-map-toolbar .map-tools {
    gap: 7px;
  }
  .compact-map-toolbar .map-reset-btn,
  .compact-map-toolbar .map-nav-controls {
    width: auto;
  }
}


/* v18: Los-Chronos-Logo sichtbar im Stil der Velum-Kopfleiste */
.los-chronos-logo-link {
  gap: 12px;
  min-width: max-content;
}
.los-chronos-logo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 11px 7px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 13px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    color-mix(in srgb, var(--panel-strong) 78%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.2);
}
.los-chronos-logo-c {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  font-weight: 1000;
  font-size: 1.05rem;
  letter-spacing: -.08em;
  line-height: 1;
}
.los-chronos-logo-word {
  font-weight: 1000;
  font-size: 1.05rem;
  letter-spacing: -.055em;
  line-height: 1;
}
body[data-theme="old-map"] .los-chronos-logo {
  color: #fff7d6;
  border-color: rgba(255,220,94,.65);
  background: rgba(54,31,12,.72);
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
body[data-theme="old-map"] .los-chronos-logo-c {
  color: #2b1605;
  background: linear-gradient(135deg, #ffe081, #b86e24);
}

/* v18: Der gesamte Kartenrahmen nimmt Zoom/Pan-Gesten an.
   Canvas und Labels bleiben weiterhin nicht-interaktiv, damit sie nie die Karte blockieren. */
.map-frame { touch-action: none; }
.cluster-canvas,
.cluster-label-layer,
.scanlines { pointer-events: none !important; }

/* v20: exaktes los-chronos Logo aus dem Velum-/Startseiten-Asset */
.los-chronos-logo-link {
  gap: 12px;
}
.los-chronos-logo-img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
  border-radius: 0;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  background: transparent;
  flex: 0 0 auto;
}
body[data-theme="old-map"] .los-chronos-logo-img {
  filter: none;
}