/* Volume-Map-View — Port von volume-map/web/style.css (minimal-invasiv).
   Entfernt gegenueber dem Original: :root-Token (kommen aus base.css),
   globale Resets/body/Header-Styles (macht base.css bzw. Shell) und die
   Finder-/Statuszeilen-Styles (Elemente leben jetzt in der Shell).
   Alias-Check: die Alt-CSS nutzt --bg, --panel, --text, --muted, --border,
   --glow — alle liefert base.css direkt bzw. ueber die Alias-Bruecke,
   daher ist hier KEIN eigener :root-Alias-Block noetig.
   NEU am Ende: View-Layout, Toolbar-Zeile, Earnings-Marker (earn-today/
   earn-soon), Legenden-Marker und Tooltip-Earnings-Zeile — Optik gemaess
   mockups/variante-b-nordlicht.html. */

/* ------------------------------------------------- View-Layout (NEU) */
/* base.css macht den Body bewusst nicht zur Flex-Spalte (Earnings ist eine
   normale Scroll-Seite). Die Map-View bekommt ihre Hoehe darum selbst:
   Viewport minus Shell-Header (~60 px, sticky); Toolbar oben, #map = Rest. */
#view-map {
  position: relative;          /* Anker fuer #radar und #status */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
}

/* Toolbar-Zeile (ersetzt die alte Header-.controls-Zeile; Grund wie Mockup) */
.map-toolbar {
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(19, 26, 42, .35);
}

/* --------------------------------------------------------- Controls */
.controls { display: flex; align-items: center; gap: 14px; }

.pulse-hint .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--glow));
  vertical-align: -1px;
  animation: pulse 1.6s ease-in-out infinite;
}

#period-select {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
#period-select button {
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--muted);
  background: #1f232d;
  border: none;
  border-right: 1px solid var(--border);
  padding: 5px 10px;
  cursor: pointer;
}
#period-select button:last-child { border-right: none; }
#period-select button:hover:not(:disabled):not(.active) { background: #262a35; }
#period-select button.active { background: #2e3341; color: var(--text); }
#period-select button:disabled { opacity: .4; cursor: default; }

.legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legend .grad {
  width: 110px; height: 10px; border-radius: 5px;
  background: linear-gradient(to right, #f63538, #414554, #30cc5a);
}
/* NEU: Legenden-Eintraege fuer die Earnings-Marker (Optik: Mockup) */
.legend .lg-mk { display: flex; align-items: center; gap: 6px; margin-left: 8px; white-space: nowrap; }
.legend .mk-today,
.legend .mk-soon {
  width: 12px; height: 12px; border-radius: 3px;
  background-color: var(--surface-3);
}
.legend .mk-today { /* gefuellte Ecke — wie .tile.earn-today */
  background-image: linear-gradient(315deg, var(--warn) 7px, transparent 7.5px);
}
.legend .mk-soon { /* hohle Ecke — wie .tile.earn-soon */
  background-image: linear-gradient(315deg, transparent 5px, var(--warn) 5.5px,
    var(--warn) 7px, transparent 7.5px);
}
.legend .mk-news { /* blaues Dreieck oben rechts — wie .tile.news::after */
  width: 12px; height: 12px; border-radius: 3px;
  background-color: var(--surface-3);
  background-image: linear-gradient(225deg, var(--accent) 7px, transparent 7.5px);
}

#pulse-toggle, #vol-toggle, #focus-toggle, #radar-toggle {
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text);
  background: #262a35;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
}
#pulse-toggle:hover, #vol-toggle:hover, #focus-toggle:hover,
#radar-toggle:hover { background: #2e3341; }

/* Divergenz-Radar-Panel — Position geaendert: absolut in der View statt fixed
   unter dem alten App-Header; 56 px ≈ Toolbar-Hoehe */
#radar {
  position: absolute;
  top: 56px;
  right: 10px;
  bottom: 10px;
  width: 330px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
#radar .radar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-weight: 650;
  font-size: 13.5px;
}
#radar-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
#radar-close:hover { color: var(--text); }
#radar-body { overflow-y: auto; padding: 6px 12px 12px; }
.radar-sec h4 {
  margin: 12px 0 2px;
  font-size: 12.5px;
  color: var(--text);
  position: relative;
  cursor: pointer;      /* Rubrik klappt auf/zu */
  user-select: none;
}
.radar-caret {
  display: inline-block; width: 14px;
  color: var(--muted); font-size: 11px;
}
.radar-sec:not(.open) h4 { margin-bottom: 6px; }
.radar-cat-body[hidden] { display: none; }
.radar-q {
  display: inline-block;
  margin-left: 6px;
  width: 13px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  border-radius: 50%;
  background: #2e3341;
  color: #fff; /* weiss statt muted — besser sichtbar (Daniel) */
  font-size: 9.5px;
  cursor: pointer;
  vertical-align: 1px;
}
.radar-q:hover { background: #3a4152; color: var(--text); }
.radar-info {
  display: none;
  /* fixed statt absolute: entgeht dem overflow-Clipping des scrollenden
     Radar-Bodys; Position (links neben dem Panel) setzt map.js inline */
  position: fixed;
  width: 292px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: #232733;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
  z-index: 60; /* ueber Shell-Header (50) und Tooltip (55) */
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}
.radar-info b { color: rgb(var(--glow)); }
/* Infobox erscheint NUR per Klick aufs Fragezeichen (nicht per Hover —
   der Hover stoerte das Auf-/Zuklappen der Rubrik) */
.radar-info.show { display: block; }
.radar-hint { font-size: 10.5px; color: var(--muted); margin-bottom: 5px; line-height: 1.4; }
.radar-row {
  display: flex;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  align-items: baseline;
}
.radar-row:hover { background: #262a35; }
.radar-row b { min-width: 48px; }
.radar-row span { color: var(--muted); font-size: 11.5px; }
.radar-empty {
  color: var(--muted);
  font-size: 11.5px;
  font-style: italic;
  padding: 4px 6px;
}
#pulse-toggle.off { color: var(--muted); }
#focus-toggle.active {
  color: rgb(var(--glow));
  border-color: rgba(var(--glow), .5);
}

/* ------------------------------------------------------------------ Map */
#map { position: relative; flex: 1; overflow: hidden; }

.sector-label {
  position: absolute;
  z-index: 1; /* ueber den Kacheln — die stehen frueher im DOM */
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #d6dae2;
  background: #262a35;
  border-radius: 2px;
  padding: 0 6px;
  cursor: pointer;
  transition: left .5s ease, top .5s ease, width .5s ease,
              background-color .15s ease;
}
.sector-label:hover { background: #343a4a; color: #fff; }

.tile {
  position: absolute;
  overflow: hidden;
  /* Trennlinie als eigener Innenrand: Nachbarkacheln stossen direkt an,
     jede Kante rendert identisch — kein Lücken-Raster-Effekt bei Zoom/DPI */
  box-shadow: inset 0 0 0 1px var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* Klick oeffnet den TradingView-Chart */
  transition: left .5s ease, top .5s ease, width .5s ease, height .5s ease,
              background-color .5s ease, opacity .3s ease;
}

/* Fokus-Modus: alles ohne Puls stark abdunkeln (Layout bleibt zur
   Orientierung stehen); Hover holt eine Kachel kurz zurueck */
body.focus-pulse .tile:not(.pulse) { opacity: .12; }
body.focus-pulse .tile:not(.pulse):hover { opacity: 1; }
.tile:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); z-index: 3; }

.tile .tk { font-weight: 700; line-height: 1.05; }
.tile .pc { font-size: .72em; opacity: .85; line-height: 1.2; }

/* Volumen ebbt ab (mom < 0.85): matter, dickerer dunkler Rand, Label gedimmt */
.tile.ebb { box-shadow: inset 0 0 0 2px var(--bg); }
.tile.ebb .tk, .tile.ebb .pc { opacity: .7; }

/* Volumen zieht an: die ganze Kachel "atmet" ueber die Deckkraft (dunkler
   Seitenhintergrund scheint durch). Tempo (--pd) und Tiefe des Dips (--dip)
   kommen momentum-abhaengig aus map.js. */
.tile.pulse {
  animation: tilepulse var(--pd, 1.6s) ease-in-out infinite;
}

@keyframes tilepulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: var(--dip, .85); }
}

/* beim Hovern stillhalten, damit Tooltip + Kachel ruhig lesbar sind */
.tile.pulse:hover { animation-play-state: paused; opacity: 1; }

/* Finder-/Radar-Treffer: blitzt DREIMAL kraeftig blau auf (steht NACH
   .pulse, damit der Flash eine laufende Puls-Animation verdraengt) */
.tile.flash {
  z-index: 4;
  animation: findflash .75s ease-in-out 3;
}
@keyframes findflash {
  0%, 100% { }
  40%, 60% {
    box-shadow: inset 0 0 0 4px rgb(var(--glow)),
                0 0 34px 12px rgba(var(--glow), .95);
    filter: brightness(1.7);
  }
}

/* Blinkender Hinweis-Punkt in der Legende */
@keyframes pulse {
  0%, 100% { opacity: .2; }
  50%      { opacity: 1; }
}

/* Toggle aus: Kacheln stehen still, Hinweis-Punkt auch */
body.no-pulse .tile.pulse { animation: none; }
body.no-pulse .pulse-hint .dot { animation: none; opacity: .4; }

/* NEU – Earnings-Marker (Muster: News-/Cross-Marker; Optik: Mockup
   Variante B, nach unten rechts verlegt). Bewusst als background-image
   statt Pseudo-Element: ::before (Cross) und ::after (News) sind belegt,
   so beissen sich die Marker auch kombiniert nicht. Das inline gesetzte
   background-color der Kachel scheint durch die transparenten Flaechen. */
.tile.earn-today {
  /* heute: VOLL gefuellte gelbe Ecke unten rechts */
  background-image:
    linear-gradient(315deg, var(--warn) 11px, transparent 11.5px);
}
.tile.earn-soon {
  /* <= 7 Tage: NICHT gefuellte gelbe Ecke — nur die Diagonale als Band,
     innen scheint die Kachelfarbe durch */
  background-image:
    linear-gradient(315deg, transparent 8.5px, var(--warn) 9px,
      var(--warn) 11px, transparent 11.5px);
}

/* -------------------------------------------------------- Tooltip/Status */
#tooltip {
  position: fixed;
  z-index: 55; /* ueber dem Sticky-Shell-Header (z-index 50) */
  /* 300 -> 340px: mit Earnings- + Insider-Block wurde der Tooltip sonst
     zu lang; die Canvas-Charts (width:100%) wachsen automatisch mit */
  max-width: 340px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden; /* nie horizontal scrollen — Inhalte schrumpfen mit */
  background: #232733f2;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
#tooltip h3 { margin: 0 0 4px; font-size: 13px; }
:is(#tooltip, .sw-panel) .row { display: flex; justify-content: space-between; gap: 18px; }
:is(#tooltip, .sw-panel) .tt-radar { text-align: right; } /* mehrere Muster duerfen umbrechen */
:is(#tooltip, .sw-panel) .row span:first-child { color: var(--muted); }
:is(#tooltip, .sw-panel) .up { color: #4fdd82; }
:is(#tooltip, .sw-panel) .down { color: #ff6b6e; }

:is(#tooltip, .sw-panel) .curve { margin-top: 9px; }
:is(#tooltip, .sw-panel) .curve canvas {
  display: block;
  /* flexibel statt fix 272px: wenn der vertikale Scrollbalken Platz frisst,
     schrumpft der Chart mit, statt einen horizontalen Balken zu erzeugen */
  width: 100%;
  height: 52px;
  background: #1b1e26;
  border-radius: 4px;
}
:is(#tooltip, .sw-panel) .curve canvas + canvas { margin-top: 4px; }
:is(#tooltip, .sw-panel) .curve-cap {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10.5px;
  margin-top: 3px;
}

/* NEU – Earnings-Zeile im Tooltip (Optik: .tt-earn aus dem Mockup) */
:is(#tooltip, .sw-panel) .tt-earn {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--warn-soft);
  border: 1px solid rgba(255, 180, 84, .28);
}
:is(#tooltip, .sw-panel) .tt-earn .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--warn);
  margin-bottom: 2px;
}
:is(#tooltip, .sw-panel) .tt-earn .val { font-size: 12px; color: var(--text); }
:is(#tooltip, .sw-panel) .tt-earn .val b { font-family: var(--font-num); font-weight: 600; }

/* NEU – Link zur Earnings-Historie, direkt unter der Naechste-Earnings-Box
   (data-nav faengt der Router ab) */
:is(#tooltip, .sw-panel) .tt-foot {
  display: block;
  margin: 6px 0 2px;
  font-size: 12px;
  color: var(--accent-2);
  text-decoration: none;
  cursor: pointer;
}
:is(#tooltip, .sw-panel) .tt-foot:hover { color: var(--accent); text-decoration: none; }

/* Insider-Block im Tooltip (unter dem Earnings-Link) */
:is(#tooltip, .sw-panel) .tt-ins {
  margin-top: 9px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
:is(#tooltip, .sw-panel) .tt-ins .lbl {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}
:is(#tooltip, .sw-panel) .tt-ins .ti-sum { text-transform: none; letter-spacing: 0; font-size: 11px; }
:is(#tooltip, .sw-panel) .ti-row { margin: 4px 0; }
:is(#tooltip, .sw-panel) .ti-l1 {
  color: var(--ink-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
:is(#tooltip, .sw-panel) .ti-l1 b { font-family: var(--font-num); font-weight: 600; }
:is(#tooltip, .sw-panel) .ti-l2 { font-size: 12px; }
:is(#tooltip, .sw-panel) .ti-fd { color: var(--muted); font-size: 10.5px; }
:is(#tooltip, .sw-panel) .ti-more { color: var(--muted); font-size: 10.5px; margin-top: 3px; }



/* Signal-Barcode im Tooltip */
:is(#tooltip, .sw-panel) .sig-box {
  margin-top: 9px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
:is(#tooltip, .sw-panel) .sig-head {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .7px;
  border-left: 3px solid var(--accent);
  padding-left: 7px;
  margin-bottom: 5px;
}
:is(#tooltip, .sw-panel) .sig-row { display: flex; align-items: center; margin-top: 2px; }
:is(#tooltip, .sw-panel) .sig-lbl { width: 96px; font-size: 10.5px; color: var(--muted); position: relative; }
:is(#tooltip, .sw-panel) .sig-lbl.has-info { cursor: help; text-decoration: underline dotted #4a4f5c; }
/* kleines ? hinter den MACD-Zeilen — Hover auf Text UND ? oeffnet die
   Infobox (beides liegt im selben .sig-lbl.has-info:hover) */
:is(#tooltip, .sw-panel) .sig-q {
  display: inline-block; /* unterbricht auch die dotted-Unterstreichung */
  margin-left: 4px;
  width: 11px; height: 11px; line-height: 11px;
  text-align: center;
  border-radius: 50%;
  background: #2e3341;
  color: #fff; /* weiss statt muted — besser sichtbar (Daniel) */
  font-size: 8.5px;
  font-style: normal;
  vertical-align: 1px;
}
:is(#tooltip, .sw-panel) .sig-lbl.has-info:hover .sig-q { background: #3a4152; color: var(--text); }
:is(#tooltip, .sw-panel) .sig-info {
  display: none;
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  width: 262px;
  background: #232733;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text);
  z-index: 7;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55);
}
:is(#tooltip, .sw-panel) .sig-lbl.has-info:hover .sig-info { display: block; }
:is(#tooltip, .sw-panel) .sig-info b { color: rgb(var(--glow)); }
:is(#tooltip, .sw-panel) .sig-info .sig-combo { border-collapse: collapse; margin-top: 6px; }
:is(#tooltip, .sw-panel) .sig-info .sig-combo td {
  padding: 2px 6px 2px 0;
  vertical-align: top;
  color: var(--muted);
}
:is(#tooltip, .sw-panel) .sig-info .sig-combo td:first-child { white-space: nowrap; }
:is(#tooltip, .sw-panel) .sig-info .sig-combo i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 2px;
}
:is(#tooltip, .sw-panel) .sig-info .sig-combo i.bull { background: #30cc5a; }
:is(#tooltip, .sw-panel) .sig-info .sig-combo i.bear { background: #f63538; }
:is(#tooltip, .sw-panel) .sig-combo-cap { margin-top: 4px; font-size: 9.5px; color: var(--muted); }
:is(#tooltip, .sw-panel) .sig-cells { display: flex; gap: 1px; align-items: center; }
:is(#tooltip, .sw-panel) .sig-cells i { width: 4px; height: 9px; border-radius: 1px; background: #2a2e3a; }
:is(#tooltip, .sw-panel) .sig-cells i.bull { background: #30cc5a; }
:is(#tooltip, .sw-panel) .sig-cells i.bear { background: #f63538; }
:is(#tooltip, .sw-panel) .sig-cells i.lv { margin-left: 4px; width: 5px; }
/* Detailfenster (beide Varianten): Signale in Ueberblick-Schriftgroesse
   und entzerrte LED-Balken — das breitere Fenster gibt den Platz her.
   #stockwin noetig, um die ID-Spezifitaet von :is(#tooltip, …) zu
   ueberstimmen; der Kachel-Tooltip bleibt kompakt */
#stockwin .sig-row { margin-top: 5px; }
#stockwin .sig-lbl { width: 138px; font-size: 12.5px; }
#stockwin .sig-cells { gap: 2.5px; }
#stockwin .sig-cells i { width: 6px; height: 12px; border-radius: 1.5px; }
#stockwin .sig-cells i.lv { margin-left: 9px; width: 7px; }

/* News-Marker: frische Meldung (<= 3 h) an der Kachel */
/* News: gefuelltes blaues Dreieck oben rechts — als background-image wie
   die Earnings-Ecken, damit es identisch von Eckenrundung und 1px-Fuge
   beschnitten wird (als ::after ragte es ueber die Kachel hinaus).
   Kombi-Regeln: News + Earnings-Marker gleichzeitig (gegenueberliegende
   Ecken, mehrere Backgrounds kommasepariert). */
.tile.news {
  background-image:
    linear-gradient(225deg, var(--accent) 11px, transparent 11.5px);
}
.tile.news.earn-today {
  background-image:
    linear-gradient(225deg, var(--accent) 11px, transparent 11.5px),
    linear-gradient(315deg, var(--warn) 11px, transparent 11.5px);
}
.tile.news.earn-soon {
  background-image:
    linear-gradient(225deg, var(--accent) 11px, transparent 11.5px),
    linear-gradient(315deg, transparent 8.5px, var(--warn) 9px,
      var(--warn) 11px, transparent 11.5px);
}

:is(#tooltip, .sw-panel) .news-box {
  margin-top: 9px;
  border-top: 1px solid var(--border);
  padding-top: 7px;
}
/* Breiten-Limit NUR im schmalen Tooltip — im Fenster volle Kartenbreite */
#tooltip .news-box { max-width: 272px; }
:is(#tooltip, .sw-panel) .news-item {
  display: block;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.35;
  margin-top: 5px;
}
:is(#tooltip, .sw-panel) .news-item:hover { color: rgb(var(--glow)); }
:is(#tooltip, .sw-panel) .news-age { color: #ffc866; font-size: 10.5px; margin-right: 6px; }
:is(#tooltip, .sw-panel) .news-sum {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin: 1px 0 2px;
}

#status {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--muted);
  font-size: 14px;
}

.hidden { display: none !important; }

/* ============================================================
   Aktien-Detailfenster (Rechtsklick auf Kachel) — Experiment:
   alle Tooltip-Inhalte in Kategorien, mit Platz und X zum Schliessen.
   Die Inhalts-Styles (curve/sig/news/rows) gelten via :is(#tooltip,
   .sw-panel) automatisch auch hier. */
#stockwin { position: fixed; inset: 0; z-index: 80; }
#stockwin.hidden { display: none; }
.sw-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 12, 21, .62);
  backdrop-filter: blur(3px);
}
.sw-panel {
  position: relative;
  margin: 4vh auto;
  /* 880 -> 1020px: im Ueberblick brachen sonst lange Zeilen um
     (Kaufdruck-Label, Short-Interest-Einordnung) */
  width: min(1020px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.5;
}
.sw-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sw-title b { font-size: 20px; font-family: var(--font-num); }
.sw-title .sw-name { color: var(--text); margin-left: 8px; }
.sw-sec {
  font-style: normal; color: var(--muted); font-size: 11px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 8px; margin-left: 8px; white-space: nowrap;
}
.sw-price { margin-left: auto; font-family: var(--font-num); font-size: 15px; white-space: nowrap; }
#sw-tv {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 0; margin-left: 4px;
  align-self: center; display: inline-flex;
}
#sw-tv svg { width: 17px; height: 17px; display: block; }
#sw-tv:hover { color: var(--accent); }
#sw-close {
  background: none; border: none; color: var(--muted);
  font-size: 22px; cursor: pointer; line-height: 1; padding: 0 2px;
  align-self: center;
}
#sw-close:hover { color: var(--text); }
.sw-desc {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}
.sw-ind { font-style: normal; color: var(--muted); white-space: nowrap; }
.sw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 12px;
}
.sw-card {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
}
.sw-wide { grid-column: 1 / -1; }
.sw-cat { /* Sektions-Ueberschrift — gleiche Hervorhebung wie im Tooltip */
  margin: 0 0 10px;
  font-size: 11px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--accent-2); font-weight: 700;
  border-left: 3px solid var(--accent);
  padding-left: 8px;
}
.sw-empty { color: var(--muted); font-style: italic; font-size: 12px; }
/* Tooltip-Trennlinien der eingebetteten Boxen im Fenster unterdruecken */
.sw-panel .sig-box, .sw-panel .news-box, .sw-panel .tt-ins {
  border-top: none; margin-top: 0; padding-top: 0;
}
.sw-panel .tt-earn { margin-top: 0; }
/* Insider-Vollliste */
.swi-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.swi-row {
  display: grid;
  /* Stück@Kurs-Spalte breit genug fuer "40.000 Stk. @ 1.158,38 $" (sonst
     stiess der Kurs am Gesamtwert an), + mehr Luft zwischen den Spalten */
  grid-template-columns: 66px minmax(0, 1fr) 54px 186px 92px 96px;
  gap: 14px; align-items: baseline;
  padding: 3px 6px; border-radius: 5px; font-size: 12px;
}
.swi-row:nth-child(odd) { background: rgba(255, 255, 255, .025); }
.swi-d { font-family: var(--font-num); color: var(--ink-2); white-space: nowrap; }
.swi-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text); }
.swi-n small { color: var(--muted); font-size: 11px; }
.swi-a { font-weight: 600; }
.swi-sh, .swi-v { font-family: var(--font-num); text-align: right; white-space: nowrap; }
.swi-fd { color: var(--muted); font-size: 10.5px; text-align: right; white-space: nowrap; }
.swi-more { color: var(--muted); font-size: 11px; margin-top: 4px; }
@media (max-width: 860px) {
  .sw-grid { grid-template-columns: 1fr; }
  .swi-row { grid-template-columns: 60px minmax(0, 1fr) 50px 90px; }
  .swi-sh, .swi-fd { display: none; }
}

/* Erklaerzeile unter dem Kurschart: gestrichelte Referenzlinie */
:is(#tooltip, .sw-panel) .curve-ref {
  text-align: center;
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

/* Verlauf-Beschriftungen im Detailfenster (big-Modus von curveHtml) */
.sw-panel .cv-lbl {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin: 10px 0 4px;
}
.sw-panel .cv-lbl:first-child { margin-top: 0; }
.sw-panel .cv-lbl .cv-note {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-2);
}

/* Einheitlicher Radar-Marker: Punkt mit Ring oben links (News-Blau),
   wenn die Aktie in MINDESTENS einer Radar-Rubrik steckt — ersetzt die
   frueheren Einzelmarker (GC-Dreiecke, Insider-$) */
.tile.radar::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: radial-gradient(circle, var(--accent) 2px, transparent 2.6px);
  box-shadow: 0 0 3px rgba(0, 0, 0, .6);
}
.legend .mk-radar { /* Punkt mit Ring — wie .tile.radar::before */
  width: 12px; height: 12px; border-radius: 3px;
  background-color: var(--surface-3);
  position: relative;
}
.legend .mk-radar::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1.2px solid var(--accent);
  background: radial-gradient(circle, var(--accent) 1.4px, transparent 1.9px);
}

/* Radar-Block am Tooltip-Ende: alle aktuell aktiven Muster */
:is(#tooltip, .sw-panel) .tt-radar-box {
  margin-top: 9px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
:is(#tooltip, .sw-panel) .tt-radar-box .lbl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .7px;
  border-left: 3px solid var(--accent);
  padding-left: 7px;
  margin-bottom: 5px;
}
:is(#tooltip, .sw-panel) .ttr-item { font-size: 12px; margin: 2px 0; }

/* Suchfenster-Label an den Radar-Rubrik-Ueberschriften */
.radar-zeit {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .2px;
  white-space: nowrap;
  vertical-align: 1px;
}
.radar-tail { white-space: nowrap; } /* Zeit-Pille + ? brechen gemeinsam um */

/* Kennzahlen-Zeile unter jedem aktiven Radar-Muster */
:is(#tooltip, .sw-panel) .ttr-det {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin: 0 0 4px;
}

/* Short-Interest-Zeile im Detailfenster: ?-Infobox wie bei den MACD-
   Signalen (gemeinsame .sig-q/.sig-info-Bausteine), aber ohne die feste
   96px-Breite der Signal-Labels; die Zeile ist die LETZTE der Ueberblick-
   Karte, daher oeffnet die Box nach oben (sig-info-Default) */
:is(#tooltip, .sw-panel) .si-lbl {
  position: relative;
  cursor: help;
  text-decoration: underline dotted #4a4f5c;
  white-space: nowrap;
}
:is(#tooltip, .sw-panel) .si-lbl:hover .sig-q { background: #3a4152; color: var(--text); }
:is(#tooltip, .sw-panel) .si-lbl .sig-info {
  /* breit statt hoch: der lange Erklaertext soll beim Oeffnen nach oben
     nicht aus dem Panel ragen */
  width: min(520px, 82vw);
  white-space: normal; /* nowrap des Labels NICHT in den Fliesstext erben */
}
:is(#tooltip, .sw-panel) .si-lbl:hover .sig-info { display: block; }
/* Wertefeld darf umbrechen, bleibt dabei aber rechtsbuendig (wie .tt-radar) */
:is(#tooltip, .sw-panel) .si-val { text-align: right; }
/* mittlere Einwertung der Ampel (durchschnittlich geshortet) */
:is(#tooltip, .sw-panel) .mid { color: var(--warn); }

/* ---- Analysten-Kursziel-Karte (Detailfenster) ---- */
.sw-panel .an-cols { display: flex; gap: 22px; }
.sw-panel .an-cols > div { flex: 1; min-width: 0; }
.sw-panel .an-bar {
  display: flex; height: 13px; border-radius: 7px; overflow: hidden;
  background: #262b38; margin: 2px 0 9px;
}
.sw-panel .an-bar i { display: block; height: 100%; }
.sw-panel .an-bar .an-above { background: #30cc5a; }
.sw-panel .an-bar .an-below { background: #f63538; }
.sw-panel .an-bar i + i { border-left: 2px solid var(--surface); }
.sw-panel .an-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 0;
}
.sw-panel .an-dot.up { background: #30cc5a; }
.sw-panel .an-dot.down { background: #f63538; }
.sw-panel .an-rt-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 2px 0 4px;
}
.sw-panel .an-rt-lbl + .row, .sw-panel .an-rt-lbl:not(:first-child) { margin-top: 8px; }
/* Rating-Balken: gleiche Pixelhoehe wie der Verteilungsbalken (13px) */
.sw-panel .an-bar.an-rt { margin-bottom: 5px; }
.sw-panel .rt-sb { background: #1f9e4a; }
.sw-panel .rt-b { background: #30cc5a; }
.sw-panel .rt-h { background: #8a8f9c; }
.sw-panel .rt-s { background: #f6a35a; }
.sw-panel .rt-ss { background: #f63538; }
.sw-panel .an-rt-cap { font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.sw-panel .an-pq { font-family: var(--font-num); font-weight: 600; color: var(--text); }
/* ?-Knopf in der Kartenueberschrift: Punkt-Unterstreichung nur am ?;
   die Infobox darf Uppercase/Spacing/Gewicht der h4 NICHT erben */
.sw-panel .an-q { margin-left: 6px; text-decoration: none; }
.sw-panel .an-q .sig-info {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* ---- Kursziel-Verlauf (Scatter, 12 Monate) ---- */
.sw-panel .an-chart { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.sw-panel .an-chart .sw-cat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sw-panel .an-chart-hint {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: 11px; color: var(--muted);
}
.sw-panel .ac-svg { display: block; width: 100%; height: auto; }
.ac-grid { stroke: #2b3140; stroke-width: 1; }
.ac-xt { stroke: #23283442; }
.ac-ylbl { fill: var(--muted); font-size: 10.5px; font-family: var(--font-num); text-anchor: end; }
.ac-xlbl { fill: var(--muted); font-size: 10.5px; text-anchor: middle; }
.ac-ref { stroke: #e8edf6; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .55; }
/* tatsächlicher Kurs = helles Blau der Letzte-15-Min-Volumenbalken;
   Ø-Prognose = Grau der unbestimmten Volumenbalken */
.ac-px { fill: none; stroke: #7dd3fc; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ac-fc { fill: none; stroke: #5c6373; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ac-dot { stroke: #0d1220; stroke-width: .8; }
.ac-dot:hover { stroke: #fff; stroke-width: 1.4; }
.ac-cur { fill: #e8edf6; stroke: #0d1220; stroke-width: 1; }
.sw-panel .an-chart-lg {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px;
  font-size: 11px; color: var(--ink-2);
}
.sw-panel .ac-lg { display: inline-flex; align-items: center; gap: 6px; }
.sw-panel .ac-lg i {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
/* gestrichelte Linie mit weisser Raute am Ende = aktueller Kurs
   (i.-Selektor schlaegt `.ac-lg i { border-radius:50% }`) */
.sw-panel .ac-lg i.ac-lg-cur {
  position: relative; width: 20px; height: 0; border-radius: 0;
  border-top: 1.4px dashed #e8edf6;
}
.sw-panel .ac-lg i.ac-lg-cur::after {
  content: ""; position: absolute; right: -3px; top: -3.6px;
  width: 6px; height: 6px; background: #e8edf6;
  transform: rotate(45deg); border-radius: 1px;
}
/* i.ac-lg-px: hoehere Spezifitaet als `.ac-lg i { border-radius:50% }`,
   sonst rendert der gerade Linien-Swatch als Bogen */
.sw-panel .ac-lg i.ac-lg-px {
  width: 16px; height: 0; border-radius: 0;
  border-top: 2.4px solid #7dd3fc;
}
.sw-panel .ac-lg i.ac-lg-fc {
  width: 16px; height: 0; border-radius: 0;
  border-top: 2.4px solid #5c6373;
}

/* ---- Score-Rad (Detailfenster aus der Risikomatrix) ---- */
.sw-panel .swheel { display: block; width: 100%; max-width: 440px; margin: 2px auto 0; }
/* volle Breite (sw-wide): Rad darf groesser atmen */
.sw-panel .sw-wide .swheel { max-width: 720px; }
.sw-panel .sw-wide .swheel-cap { text-align: center; }
.sw-panel .swl { font-size: 11px; fill: #c3cde2; }
.sw-panel .sw-lead { fill: none; stroke: #39466a; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.sw-panel .swl-p { fill: #4fdd82; font-weight: 700; }
.sw-panel .swl-n { fill: #ff6b6e; font-weight: 700; }
.sw-panel .swl-grp {
  font-size: 8.5px; fill: #7183a3; font-weight: 700; letter-spacing: .1em;
}
.sw-panel .sw-num { font-size: 21px; font-weight: 800; }
.sw-panel .sw-numcap {
  font-size: 8px; fill: #7183a3; font-weight: 700; letter-spacing: .14em;
}
.sw-panel .swheel-cap {
  margin-top: 6px; font-size: 10px; color: var(--muted); line-height: 1.45;
}