/* ============================================================
   /state-of-geo/verlauf — Verlaufs-Dashboard. Gescoped unter
   body.state-of-geo-verlauf-page. Nutzt die globalen Design-Tokens
   und dieselbe Bild-/Farbwelt wie state_of_geo.css.
   ============================================================ */

body.state-of-geo-verlauf-page {
  background: var(--bg-obsidian, #04050a);
  color: var(--ink-primary, #f0eee6);
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.state-of-geo-verlauf-page {
  --sog-card: rgba(255, 255, 255, 0.03);
  --sog-border: rgba(255, 255, 255, 0.09);
  --sog-muted: var(--ink-muted, rgba(240, 238, 230, 0.62));
}
.state-of-geo-verlauf-page *,
.state-of-geo-verlauf-page *::before,
.state-of-geo-verlauf-page *::after { box-sizing: border-box; }

.sog-v { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; }

/* Hero */
.sog-v-hero { padding: 64px 0 12px; text-align: center; }
.sog-v-eyebrow {
  display: inline-block; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #c4b5fd;
  border: 1px solid var(--sog-border); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 18px;
}
.sog-v-h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 800; margin: 0 0 14px; line-height: 1.05; }
.sog-v-h1 .sog-accent {
  background: linear-gradient(135deg, #7c3aed, #a855f7 45%, #ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sog-v-intro { max-width: 680px; margin: 0 auto; color: var(--sog-muted); font-size: 15px; }
.sog-v-back { display: inline-block; margin-top: 16px; font-size: 14px; color: #a78bfa; text-decoration: none; }
.sog-v-back:hover { text-decoration: underline; }

/* Sektionen */
.sog-v-section { margin: 44px 0 0; }
.sog-v-h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.sog-v-sub { color: var(--sog-muted); font-size: 14px; margin: 0 0 18px; }

/* Chart-Karte */
.sog-v-card {
  border: 1px solid var(--sog-border); border-radius: 16px;
  background: var(--sog-card); padding: 18px 18px 8px;
}
.sog-v-svg { width: 100%; height: auto; display: block; }
.sog-v-grid { stroke: rgba(255,255,255,0.07); stroke-width: 1; }
.sog-v-axislbl { fill: var(--sog-muted); font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.sog-v-axistitle { fill: var(--sog-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Legende */
.sog-v-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sog-v-legitem {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-primary, #f0eee6);
  background: rgba(255,255,255,0.04); border: 1px solid var(--sog-border);
  border-radius: 999px; padding: 5px 11px; cursor: pointer;
  font-family: inherit; transition: opacity .15s, background .15s;
}
.sog-v-legitem:hover { background: rgba(255,255,255,0.08); }
.sog-v-legitem.sog-v-off { opacity: 0.38; }
.sog-v-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Unternehmens-Detail: Liste + Chart nebeneinander */
.sog-v-company { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.sog-v-search {
  width: 100%; padding: 11px 14px; margin-bottom: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--sog-border);
  border-radius: 10px; color: var(--ink-primary, #f0eee6); font-family: inherit; font-size: 14px;
}
.sog-v-search::placeholder { color: var(--sog-muted); }
.sog-v-list {
  max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--sog-border); border-radius: 12px; padding: 8px; background: var(--sog-card);
}
.sog-v-domitem {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  text-align: left; width: 100%; padding: 8px 10px; border: 0; cursor: pointer;
  background: transparent; border-radius: 8px; color: var(--ink-primary, #f0eee6); font-family: inherit;
}
.sog-v-domitem:hover { background: rgba(255,255,255,0.05); }
.sog-v-domitem.sog-v-active { background: rgba(168,85,247,0.16); }
.sog-v-domname { font-size: 13.5px; font-weight: 600; }
.sog-v-domurl { font-size: 12px; color: var(--sog-muted); font-family: 'JetBrains Mono', monospace; }
.sog-v-detail { min-height: 200px; }
.sog-v-domtitle { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.sog-v-hint { color: var(--sog-muted); font-size: 14px; padding: 24px 4px; }

/* Empty-State */
.sog-v-empty {
  margin: 44px 0; padding: 48px 24px; text-align: center;
  border: 1px dashed var(--sog-border); border-radius: 16px; background: var(--sog-card);
}
.sog-v-empty h2 { font-size: 20px; margin: 0 0 8px; }
.sog-v-empty p { color: var(--sog-muted); font-size: 15px; margin: 0; }
.sog-v-empty strong { color: var(--ink-primary, #f0eee6); }

@media (max-width: 780px) {
  .sog-v-company { grid-template-columns: 1fr; }
  .sog-v-list { max-height: 260px; }
}