/* =========================================================================
   Halo strategy section — REDESIGN.
   Chart-led layout that reuses the dashboard-mock vocabulary of the page
   (spline curve + gradient fill, range pills, KPI tiles, accent glow) so it
   reads as a sibling of the hero / models / depth sections instead of a
   near-duplicate of the .depth two-column item grid below it.
   Theme-aware via the existing design tokens. Drop-in replacement for the
   previous halo.css.
   ========================================================================= */
.halo { position: relative; overflow: hidden; }

/* =========================================================================
   Home-page section background rhythm.
   Inserting the Halo section between "So funktioniert's" (bg) and "Datentiefe"
   (soft) broke the page's strict bg/soft alternation. Flipping the tail would
   run into the GLOBAL soft footer (and every other page), so instead we flip
   the four home-only sections ABOVE Halo. Halo, Datentiefe, CTA and the shared
   footer stay exactly as they are.
   Resulting cadence (single border line at every seam):
     stat=bg · Features=soft · Modelle=bg · How=soft · Halo=bg ·
     Datentiefe=soft · CTA=bg · Footer=soft
   These selectors are home-only (#produkt/#how ids, .stat-band/.models), so
   loading site-wide is harmless. Overrides the vendored quantdesk.css; this
   file is linked after it in App.razor. (If you ever wonder why Features/
   Modelle look swapped, it's here — not quantdesk.css.)
   ========================================================================= */
.stat-band { background: transparent; border-bottom: 0; }   /* soft -> bg (keep top rule under hero) */
.models    { background: transparent; border-top: 0; border-bottom: 0; }   /* soft -> bg */
#produkt,
#how {
  background: var(--bg-soft);                                /* bg -> soft */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---- two-column layout (copy | chart) ---- */
.halo-inner {
  display: grid;
  grid-template-columns: 1.02fr 1.18fr;
  gap: 56px;
  align-items: center;
}
.halo-copy, .halo-visual { min-width: 0; }
.halo-copy { max-width: 560px; }

/* ---- benefit rows (replaces the old boxed .depth-item grid) ---- */
.halo-benefits { display: flex; flex-direction: column; gap: 13px; }
.halo-benefit { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.5; }
.halo-benefit .hb-ico {
  width: 27px; height: 27px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-strong);
  margin-top: 1px;
}
.halo-benefit .hb-ico svg { width: 15px; height: 15px; }
.halo-benefit b { font-weight: 600; color: var(--text); }
.halo-benefit span > span { color: var(--text-3); }

.halo-cta { margin-top: 28px; }
.halo-fine { margin-top: 22px; font-size: 12.5px; color: var(--text-3); max-width: 520px; }

/* ---- chart panel ---- */
.halo-panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden; padding: 20px;
}
.halo-panel .glow {
  position: absolute; width: 280px; height: 280px; border-radius: 50%;
  filter: blur(60px); opacity: 0.18; top: -130px; right: -90px;
  background: var(--accent); pointer-events: none;
}
.halo-phead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.halo-phead .pt { font-size: 12.5px; font-weight: 600; color: var(--text-2); letter-spacing: 0.01em; }

.halo-legend { position: relative; display: flex; gap: 18px; margin-bottom: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.halo-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.halo-legend .ln-solid { width: 18px; height: 3px; border-radius: 2px; background: var(--accent); display: inline-block; }
.halo-legend .ln-dash { width: 18px; height: 0; border-top: 2px dashed var(--text-3); display: inline-block; }

.halo-chart { position: relative; width: 100%; height: 200px; }
.halo-chart svg { width: 100%; height: 100%; display: block; }
.halo-line {
  fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 6px 10px var(--glow));
  --len: 1600;
  stroke-dasharray: 1600; stroke-dashoffset: 1600;  /* draw-on, mirrors .spline-path */
}
/* This site's JS only adds `.reveal` to the hero `.mock`; the IntersectionObserver
   adds `.in` to every `.fade-up`. Hook the draw-on to `.halo-visual.in` so it
   actually fires here without touching the shared quantdesk.js. */
.halo-visual.in .halo-line { animation: drawline 1.8s cubic-bezier(.6,.05,.2,1) .25s forwards; }
.halo-index { fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* crash annotation overlay (HTML, positioned over the chart) */
/* Aligned to the chart's deepest index crash (SVG x=84 → 23.3%), which sits
   just before the 2010 tick — i.e. the 2008/2009 financial crisis. Dot y's
   follow that segment: index y=184 (92%), Halo y=157 (78.5%). */
.halo-marker { position: absolute; inset: 0; pointer-events: none; }
.halo-marker .vline { position: absolute; left: 23.3%; top: 9%; bottom: 0; width: 0; border-left: 1px dashed var(--border-strong); }
.halo-marker .lab { position: absolute; left: 23.3%; top: 1%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9.5px; color: var(--text-3); white-space: nowrap; }
.halo-marker .dot { position: absolute; left: 23.3%; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); transform: translate(-50%, -50%); }
.halo-marker .dot.index { top: 92%; background: var(--neg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--neg) 22%, transparent); }
.halo-marker .dot.halo { top: 78.5%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.halo-axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }

/* drawdown comparison tiles */
.halo-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.halo-dd-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 13px; }
.halo-dd-tile.is-halo { border-color: var(--accent-line); }
.halo-dd-tile .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.halo-dd-tile.is-halo .l { color: var(--accent-strong); }
.halo-dd-tile .v { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin-top: 3px; color: var(--neg); }
.halo-dd-tile.is-halo .v { color: var(--accent-strong); }
.halo-dd-tile .s { font-family: var(--font-mono); font-size: 10.5px; margin-top: 1px; color: var(--text-3); }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .halo-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Respect reduced-motion: show the Halo line immediately, no draw-on. */
@media (prefers-reduced-motion: reduce) {
  .halo-line { stroke-dashoffset: 0; }
  .halo-visual.in .halo-line { animation: none; }
}