// Shared article content for the blog post redesigns.
// All three directions read from this so they're truly comparing layout, not text.

const ARTICLE = {
  category: "Marktanalyse",
  title: "Nasdaq 100 Kursprognose 2026: Wo könnte der Index in den nächsten 12 Monaten stehen?",
  dek: "Eine datengetriebene Einordnung für Swing- und Daytrader — mit Saisonalität, Marktbreite und drei realistischen Szenarien für die kommenden Quartale.",
  date: "27. April 2026",
  updated: "Aktualisiert vor 2 Tagen",
  readMin: 9,
  author: {
    name: "Karsten Kagels",
    role: "CEO & Head of Trading",
    initials: "KK",
    color: "#0052FF",
    image: "assets/karsten-kagels.jpg",
    bio: "Karsten ist CEO und Head of Trading bei Kagels Trading. Spezialisiert auf Swing- und Position-Trading über mehrere Zeitebenen hinweg — Forex, Futures und Aktien. Er gründete Kagels Trading, um deutschsprachigen Tradern fundierte Werkzeuge an die Hand zu geben."
  },
  reviewer: {
    name: "Christian Möhrer",
    role: "Chart Analyse · Optionshandel",
    initials: "CM",
    color: "#0e2b5d",
    image: "assets/christian-moehrer.webp"
  },
  toc: [
  { id: "ueberblick", label: "Überblick: Wo steht der Nasdaq 100?" },
  { id: "saisonalitaet", label: "Saisonalität & Marktphasen" },
  { id: "breite", label: "Marktbreite und Sektorrotation" },
  { id: "szenarien", label: "Drei Szenarien für 2026" },
  { id: "setup", label: "Konkrete Setups für Swing-Trader" },
  { id: "risiko", label: "Risikohinweise" },
  { id: "fazit", label: "Fazit" }],

  tags: ["Nasdaq 100", "Index-Trading", "Prognose 2026", "Swing Trading"]
};

const ArticleBody = ({ withPullQuote = true, withCTA = true, withCallout = true }) =>
<>
    <section id="ueberblick">
      <h2>Überblick: Wo steht der Nasdaq 100?</h2>
      <p>
        Der Nasdaq 100 hat das erste Quartal 2026 mit einer auffälligen Mischung aus
        Stärke an der Spitze und Schwäche in der Breite beendet. Während die zehn
        größten Indexschwergewichte den Großteil der Performance trugen, hinkten
        zwei Drittel der Mitglieder dem Index hinterher.
      </p>
      <p>
        Für Trader bedeutet das: Wir müssen Trendrichtung und Marktbreite zusammen
        denken. Ein Index, der vor allem von wenigen Aktien getragen wird, ist
        anfällig — auch wenn der Chart nach oben zeigt.
      </p>
      <ChartFigure
      label="Wochenchart Nasdaq 100 — Q1 2026"
      caption="Höhere Hochs auf Wochenbasis, aber abnehmende Schlussstärke. Die obere Trendlinie wurde zweimal getestet, ohne nachhaltigen Ausbruch." />
    
    </section>

    {withCallout &&
  <Callout title="Kernaussage">
        Der Index handelt im oberen Drittel seiner historischen Bewertungsbandbreite.
        Eine Konsolidierung im zweiten Quartal ist wahrscheinlicher als ein direkter
        Ausbruch — und genau hier liegen die besseren Setups.
      </Callout>
  }

    <section id="saisonalitaet">
      <h2>Saisonalität &amp; Marktphasen</h2>
      <p>
        Die statistische Auswertung der letzten 25 Jahre zeigt für April bis Mitte
        Mai eine durchschnittlich positive Drift, gefolgt von einer Schwächephase
        zwischen Juni und September. 2026 trifft dieses Muster auf einen Markt,
        der bereits erhöhte Bewertungen und ein verlangsamtes Gewinnwachstum
        eingepreist hat.
      </p>
      <ul>
        <li>April–Mai: positiver Bias, kurze Long-Setups bevorzugt</li>
        <li>Juni–September: erhöhte Volatilität, Range-Trading sinnvoll</li>
        <li>Oktober–Dezember: historisch stärkste Phase, aber abhängig von der Zinspolitik</li>
      </ul>
    </section>

    {withPullQuote &&
  <PullQuote>
        Die wichtigste Frage ist nicht, <em>wohin</em> der Nasdaq läuft —
        sondern, ob die Marktbreite mitgeht.
      </PullQuote>
  }

    <section id="breite">
      <h2>Marktbreite und Sektorrotation</h2>
      <p>
        Der prozentuale Anteil der Nasdaq-100-Aktien über ihrem 200-Tage-Schnitt
        liegt aktuell bei 58 % — deutlich unter dem Wert von Dezember 2025
        (74 %). Das ist kein Crashsignal, aber ein Hinweis darauf, dass die
        Rallye selektiver wird.
      </p>
      <ChartFigure
      label="Marktbreite — Anteil &gt; 200-Tage-Linie"
      caption="Negative Divergenz: Der Index notiert höher, die Marktbreite niedriger."
      variant="breadth" />
    
      <p>
        Sektorrotation ist die Folge. Halbleiter und Software bleiben führend,
        Konsumtitel und Reise-Werte holen auf, defensive Sektoren laufen seitwärts.
      </p>
    </section>

    {withCTA && <ProductCTA />}

    <section id="szenarien">
      <h2>Drei Szenarien für 2026</h2>
      <ScenarioTable />
      <p>
        Wir gewichten das Basisszenario aktuell mit ca. 55 %. Das bedeutet: Wir
        planen Setups für eine Range, halten aber Ausbruchspläne in beide
        Richtungen bereit.
      </p>
    </section>

    <section id="setup">
      <h2>Konkrete Setups für Swing-Trader</h2>
      <p>
        Im aktuellen Marktumfeld haben sich zwei Setups bewährt: Pullback-Käufe
        zum 20er EMA in Trendphasen und Range-Mittelpunkts-Trades, wenn die
        Volatilität fällt.
      </p>
      <ChartFigure
      label="Setup-Beispiel — Pullback zum 20er EMA"
      caption="Markiert: Long-Einstieg, Stop unter dem letzten Swing-Tief, Take Profit am vorherigen Hoch."
      variant="setup" />
    
    </section>

    <section id="risiko">
      <h2>Risikohinweise</h2>
      <p>
        Index-Trading birgt Verlustrisiken. Die hier dargestellten Szenarien sind
        Wahrscheinlichkeits-Einschätzungen, keine Vorhersagen. Ergebnisse variieren
        je nach Marktphase, Hebel und Risikomanagement. Handle nur mit Kapital,
        dessen Verlust Du verkraften kannst.
      </p>
    </section>

    <section id="fazit">
      <h2>Fazit</h2>
      <p>
        Der Nasdaq 100 bleibt strukturell aufwärts gerichtet, aber das einfache
        Trend-Folgen reicht 2026 nicht mehr aus. Wer Marktbreite, Saisonalität und
        Sektorrotation in seine Entscheidungen einbezieht, hat einen klaren
        Vorteil — egal ob Swing- oder Daytrader.
      </p>
    </section>
  </>;


// ---------- Inline content components ----------

const ChartFigure = ({ label, caption, variant = "trend" }) =>
<figure style={{
  margin: "32px 0", border: "1px solid #EEF0F3", borderRadius: 14,
  overflow: "hidden", background: "#fff", boxShadow: "0px 0px 28px 3px rgba(61,61,61,0.06)"
}}>
    <ChartPlaceholder variant={variant} />
    <figcaption style={{
    padding: "14px 20px", borderTop: "1px solid #EEF0F3",
    fontSize: 14, color: "#5B616E", lineHeight: 1.5
  }}>
      <strong style={{ color: "#0A0B0D", fontWeight: 700 }}>{label}.</strong> {caption}
    </figcaption>
  </figure>;


// Tiny SVG chart that *looks* like a real trading chart placeholder.
const ChartPlaceholder = ({ variant }) => {
  if (variant === "breadth") {
    return (
      <svg viewBox="0 0 800 240" style={{ display: "block", width: "100%", height: "auto", background: "#FAFBFE" }}>
        <defs>
          <linearGradient id="cg1" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#0052FF" stopOpacity="0.18" />
            <stop offset="100%" stopColor="#0052FF" stopOpacity="0" />
          </linearGradient>
        </defs>
        {[40, 90, 140, 190].map((y) =>
        <line key={y} x1="40" x2="780" y1={y} y2={y} stroke="#EEF0F3" strokeWidth="1" />
        )}
        <path d="M40 80 L120 70 L200 90 L280 60 L360 75 L440 110 L520 130 L600 145 L680 160 L760 155"
        fill="none" stroke="#0052FF" strokeWidth="2.5" />
        <path d="M40 80 L120 70 L200 90 L280 60 L360 75 L440 110 L520 130 L600 145 L680 160 L760 155 L760 220 L40 220 Z"
        fill="url(#cg1)" />
        <text x="50" y="55" fontSize="11" fill="#5B616E" fontFamily="ui-monospace, monospace">74%</text>
        <text x="700" y="170" fontSize="11" fill="#ed0f0f" fontFamily="ui-monospace, monospace">58%</text>
      </svg>);

  }
  if (variant === "setup") {
    return (
      <svg viewBox="0 0 800 240" style={{ display: "block", width: "100%", height: "auto", background: "#FAFBFE" }}>
        {[40, 90, 140, 190].map((y) =>
        <line key={y} x1="40" x2="780" y1={y} y2={y} stroke="#EEF0F3" strokeWidth="1" />
        )}
        {/* candles */}
        {Array.from({ length: 28 }).map((_, i) => {
          const x = 60 + i * 25;
          const up = i % 3 !== 0;
          const top = 60 + Math.sin(i * 0.6) * 30 + i * 1.4;
          const h = 18 + Math.abs(Math.cos(i * 0.4)) * 18;
          return (
            <g key={i}>
              <line x1={x + 4} x2={x + 4} y1={top - 6} y2={top + h + 6} stroke={up ? "#11ba82" : "#ed0f0f"} strokeWidth="1" />
              <rect x={x} y={top} width="8" height={h} fill={up ? "#11ba82" : "#ed0f0f"} />
            </g>);

        })}
        {/* EMA */}
        <path d="M50 130 Q200 100 400 110 T760 90" fill="none" stroke="#FFD814" strokeWidth="2.5" />
        {/* entry marker */}
        <circle cx="540" cy="120" r="6" fill="#0052FF" stroke="#fff" strokeWidth="2" />
        <text x="552" y="118" fontSize="11" fill="#0A0B0D" fontWeight="700">Long</text>
        <line x1="540" x2="780" y1="160" y2="160" stroke="#ed0f0f" strokeDasharray="4 3" />
        <text x="700" y="156" fontSize="10" fill="#ed0f0f">Stop</text>
        <line x1="540" x2="780" y1="60" y2="60" stroke="#11ba82" strokeDasharray="4 3" />
        <text x="700" y="56" fontSize="10" fill="#11ba82">TP</text>
      </svg>);

  }
  // trend (default)
  return (
    <svg viewBox="0 0 800 240" style={{ display: "block", width: "100%", height: "auto", background: "#FAFBFE" }}>
      <defs>
        <linearGradient id="cg2" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#0052FF" stopOpacity="0.16" />
          <stop offset="100%" stopColor="#0052FF" stopOpacity="0" />
        </linearGradient>
      </defs>
      {[40, 90, 140, 190].map((y) =>
      <line key={y} x1="40" x2="780" y1={y} y2={y} stroke="#EEF0F3" strokeWidth="1" />
      )}
      <path d="M40 180 L120 160 L200 175 L280 140 L360 150 L440 110 L520 125 L600 90 L680 110 L760 80"
      fill="none" stroke="#0052FF" strokeWidth="2.5" />
      <path d="M40 180 L120 160 L200 175 L280 140 L360 150 L440 110 L520 125 L600 90 L680 110 L760 80 L760 220 L40 220 Z"
      fill="url(#cg2)" />
      {/* trendline upper */}
      <line x1="120" x2="760" y1="140" y2="60" stroke="#0e2b5d" strokeDasharray="4 4" strokeWidth="1.2" />
      <circle cx="600" cy="90" r="5" fill="#FFD814" stroke="#0A0B0D" strokeWidth="1.2" />
      <text x="610" y="86" fontSize="11" fill="#0A0B0D" fontWeight="700">Test 2</text>
    </svg>);

};

const Callout = ({ title, children }) =>
<aside style={{
  background: "#FFF9ED", border: "1px solid #FFD814",
  borderLeft: "5px solid #FFD814", borderRadius: 14,
  padding: "20px 24px", margin: "32px 0",
  display: "flex", gap: 16, alignItems: "flex-start"
}}>
    <div style={{
    width: 32, height: 32, borderRadius: 8, background: "#FFD814",
    color: "#0A0B0D", display: "flex", alignItems: "center", justifyContent: "center",
    fontWeight: 700, fontSize: 18, flex: "none"
  }}>★</div>
    <div>
      <div style={{ fontWeight: 700, fontSize: 15, letterSpacing: 1, color: "#0A0B0D", marginBottom: 6, textTransform: "uppercase" }}>{title}</div>
      <div style={{ fontSize: 17, lineHeight: 1.6, color: "#0A0B0D" }}>{children}</div>
    </div>
  </aside>;


const PullQuote = ({ children }) =>
<blockquote style={{
  margin: "40px 0", padding: "0 0 0 24px",
  borderLeft: "4px solid #0052FF",
  fontSize: 26, lineHeight: 1.4, fontWeight: 600, color: "#0e2b5d",
  fontStyle: "normal"
}}>
    {children}
  </blockquote>;


const ProductCTA = () =>
<aside style={{
  margin: "40px 0",
  background: "linear-gradient(135deg, #0052FF 0%, #003ACC 60%, #113355 100%)",
  color: "#fff", borderRadius: 16, padding: "28px 32px",
  display: "flex", alignItems: "center", gap: 24,
  boxShadow: "0px 4px 18px rgba(0,82,255,0.25)"
}}>
    <div style={{
    width: 56, height: 56, borderRadius: 14, background: "rgba(255,216,20,0.18)",
    display: "flex", alignItems: "center", justifyContent: "center",
    fontSize: 26, color: "#FFD814", flex: "none"
  }}>↗</div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ color: "#FFD814", fontSize: 13, letterSpacing: 1.5, fontWeight: 700, marginBottom: 4 }}>EMPFEHLUNG</div>
      <div style={{ fontSize: 20, fontWeight: 600, lineHeight: 1.3, marginBottom: 4 }}>
        Setze diese Analyse direkt um — mit unseren Daytrading-Signalen.
      </div>
      <div style={{ fontSize: 15, opacity: 0.85 }}>
        Mehrfach täglich präzise Einstiege für Nasdaq, DAX &amp; Co. — 14 Tage testen.
      </div>
    </div>
    <a href="#" style={{
    background: "#FFD814", color: "#0A0B0D", textDecoration: "none",
    fontWeight: 700, fontSize: 15, padding: "12px 22px", borderRadius: 12,
    whiteSpace: "nowrap", flex: "none",
    boxShadow: "0px 4px 15px 4px rgba(255,216,20,0.18)"
  }}>Jetzt testen</a>
  </aside>;


const ScenarioTable = () => {
  const rows = [
  { name: "Bullisch", pct: "25 %", target: "+12 % bis Jahresende", color: "#11ba82", desc: "Marktbreite dreht, Halbleiter führen, Zinsfantasie" },
  { name: "Basis", pct: "55 %", target: "Range ±6 %", color: "#0052FF", desc: "Konsolidierung, Sektorrotation, kein Trend" },
  { name: "Bärisch", pct: "20 %", target: "−10 % im H2", color: "#ed0f0f", desc: "Bewertungs-Reset, Earnings-Enttäuschungen" }];

  return (
    <div style={{ margin: "24px 0 32px", border: "1px solid #EEF0F3", borderRadius: 14, overflow: "hidden" }}>
      {rows.map((r, i) =>
      <div key={r.name} style={{
        display: "grid",
        gridTemplateColumns: "140px 90px 1fr",
        gap: 20, alignItems: "center",
        padding: "18px 22px",
        background: i % 2 ? "#FAFBFE" : "#fff",
        borderTop: i ? "1px solid #EEF0F3" : "none"
      }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: r.color }} />
            <strong style={{ fontSize: 16, color: "#0A0B0D" }}>{r.name}</strong>
          </div>
          <div style={{ fontFamily: "ui-monospace, monospace", fontSize: 18, fontWeight: 700, color: r.color }}>{r.pct}</div>
          <div style={{ fontSize: 15, color: "#3D3D3D", lineHeight: 1.5 }}>
            <strong style={{ color: "#0A0B0D" }}>{r.target}.</strong> {r.desc}.
          </div>
        </div>
      )}
    </div>);

};

// ---------- Top webinar / announcement bar ----------

const WebinarBar = () => (
  <div style={{
    background: "linear-gradient(90deg, #0e2b5d 0%, #113355 50%, #0e2b5d 100%)",
    color: "#fff",
    padding: "10px 20px",
    fontSize: 14,
    textAlign: "center"
  }}>
    <a href="#" style={{
      display: "inline-flex", alignItems: "center", gap: 14,
      color: "#fff", textDecoration: "none", flexWrap: "wrap",
      justifyContent: "center"
    }}>
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
        <span style={{
          width: 8, height: 8, borderRadius: 999, background: "#ed0f0f",
          boxShadow: "0 0 0 4px rgba(237,15,15,0.22)"
        }} />
        <span style={{
          color: "#FFD814", fontWeight: 700, letterSpacing: 1.5,
          fontSize: 11, textTransform: "uppercase"
        }}>Live-Webinar</span>
      </span>
      <span style={{ fontWeight: 600 }}>
        Inflation &amp; Kurseinbruch — 27. April 2026, 19:00 Uhr
      </span>
      <span style={{ color: "#FFD814", fontWeight: 700, whiteSpace: "nowrap" }}>
        Jetzt anmelden ›
      </span>
    </a>
  </div>
);

// ---------- Site header — production replica (kagels-trading.de) ----------

const KT_NAV = [
  { label: "Trader Wissen",          href: "https://www.kagels-trading.de/trading-blog/" },
  { label: "Daytrading Signale",     href: "https://www.kagels-trading.de/trading-signale/daytrading-signale/" },
  { label: "Swingtrading Signale",   href: "https://www.kagels-trading.de/trading-signale/swing-trading-handelssignale/" },
  { label: "TradingView Indikatoren",href: "https://www.kagels-trading.de/tradingview-indikatoren/" },
  { label: "Traden lernen",          href: "https://www.kagels-trading.de/traden-lernen/" },
  { label: "Das Team",               href: "https://www.kagels-trading.de/ueber-uns/" }
];

const CaretDown = () => (
  <svg viewBox="0 0 330 512" width="10" height="10" aria-hidden="true" style={{ marginLeft: 6, opacity: 0.65 }}>
    <path fill="currentColor" d="M305.913 197.085c0 2.266-1.133 4.815-2.833 6.514L171.087 335.593c-1.7 1.7-4.249 2.832-6.515 2.832s-4.815-1.133-6.515-2.832L26.064 203.599c-1.7-1.7-2.832-4.248-2.832-6.514s1.132-4.816 2.832-6.515l14.162-14.163c1.7-1.699 3.966-2.832 6.515-2.832 2.266 0 4.815 1.133 6.515 2.832l111.316 111.317 111.316-111.317c1.7-1.699 4.249-2.832 6.515-2.832s4.815 1.133 6.515 2.832l14.162 14.163c1.7 1.7 2.833 4.249 2.833 6.515z" />
  </svg>
);

const ClockIcon = ({ size = 14 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true" style={{ flex: "none" }}>
    <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.6" />
    <path d="M12 7v5l3 2" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const SearchIcon = () => (
  <svg viewBox="0 0 512 512" width="18" height="18" aria-hidden="true">
    <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z" />
  </svg>
);

const SiteHeader = () => (
  <header style={{
    background: "#fff",
    borderBottom: "1px solid #EEF0F3",
    position: "sticky", top: 0, zIndex: 50
  }}>
    <div style={{
      maxWidth: 1280, margin: "0 auto",
      padding: "0 20px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      height: 80, boxSizing: "border-box", gap: 32
    }}>
      <a href="https://www.kagels-trading.de/" style={{ display: "flex", alignItems: "center", flex: "none" }}>
        <img src="assets/kt-logo.png" alt="Kagels Trading" style={{ height: 40, width: "auto", display: "block" }} />
      </a>

      <nav style={{ display: "flex", alignItems: "center", gap: 22, flexWrap: "nowrap" }}>
        {KT_NAV.map(({ label, href }) => (
          <a key={label} href={href} style={{
            display: "inline-flex", alignItems: "center",
            color: "#0A0B0D", fontWeight: 600, fontSize: 15,
            textDecoration: "none", whiteSpace: "nowrap",
            padding: "8px 0"
          }}>
            {label}<CaretDown />
          </a>
        ))}
        <a href="#" aria-label="Suche öffnen" style={{
          color: "#0A0B0D", display: "inline-flex", alignItems: "center",
          padding: "8px 0", marginLeft: 4
        }}>
          <SearchIcon />
        </a>
      </nav>
    </div>
  </header>
);


const Avatar = ({ initials, color, image, alt, size = 40 }) => {
  const frame = {
    width: size, height: size, borderRadius: 999, flex: "none",
    boxShadow: "0 0 0 2px #fff, 0 0 0 3px #EEF0F3", overflow: "hidden"
  };
  if (image) {
    return (
      <img src={image} alt={alt || initials || ""} style={{
        ...frame, objectFit: "cover", display: "block"
      }} />
    );
  }
  return (
    <div style={{
      ...frame, background: `linear-gradient(135deg, ${color} 0%, #0e2b5d 100%)`,
      color: "#fff", display: "flex", alignItems: "center", justifyContent: "center",
      fontWeight: 700, fontSize: size * 0.36
    }}>{initials}</div>
  );
};


const ShareBar = ({ vertical = false, sticky = false }) => {
  const items = [
  { label: "X", icon: "𝕏" },
  { label: "LinkedIn", icon: "in" },
  { label: "Facebook", icon: "f" },
  { label: "Link", icon: "↗" }];

  return (
    <div style={{
      display: "flex", flexDirection: vertical ? "column" : "row",
      gap: 10, ...(sticky ? { position: "sticky", top: 90 } : {})
    }}>
      {items.map((i) =>
      <button key={i.label} title={`Teilen: ${i.label}`} style={{
        width: 40, height: 40, borderRadius: 12, border: "1px solid #EEF0F3",
        background: "#fff", color: "#0A0B0D",
        fontWeight: 700, fontSize: 14, cursor: "pointer",
        display: "flex", alignItems: "center", justifyContent: "center"
      }}>{i.icon}</button>
      )}
    </div>);

};

const AffiliateDisclaimer = () => (
  <div style={{
    margin: "32px 0 0",
    padding: "14px 18px",
    background: "#F5F8FF",
    border: "1px solid #EEF0F3",
    borderLeft: "3px solid #C8C8C8",
    borderRadius: 8,
    fontSize: 13, lineHeight: 1.6, color: "#5B616E"
  }}>
    <span style={{
      fontWeight: 700, letterSpacing: 1, textTransform: "uppercase",
      color: "#0A0B0D", fontSize: 11, marginRight: 6
    }}>
      Affiliate Offenlegung:
    </span>
    Dieser Artikel könnte Werbelinks enthalten.{" "}
    <a href="#" style={{ color: "#0052FF", fontWeight: 600, textDecoration: "none" }}>
      Mehr erfahren in unserem Affiliate Disclaimer.
    </a>
  </div>
);

const RelatedCard = ({ tag, title, read, image, alt }) => (
  <a href="#" style={{
    display: "block", textDecoration: "none", color: "inherit",
    borderRadius: 14, overflow: "hidden", border: "1px solid #EEF0F3",
    background: "#fff", boxShadow: "0px 0px 28px 3px rgba(61,61,61,0.06)"
  }}>
    <img src={image} alt={alt || title} style={{
      display: "block", width: "100%", height: 180, objectFit: "cover"
    }} />
    <div style={{ padding: 20 }}>
      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.5, color: "#0052FF", marginBottom: 8 }}>{tag}</div>
      <div style={{ fontSize: 18, fontWeight: 600, lineHeight: 1.35, color: "#0A0B0D", marginBottom: 8 }}>{title}</div>
      <div style={{ fontSize: 13, color: "#5B616E" }}>{read} Min. Lesezeit</div>
    </div>
  </a>
);

const RelatedSection = () =>
<section style={{ borderTop: "1px solid #EEF0F3", padding: "60px 0 40px" }}>
    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 32 }}>
      <h2 style={{ margin: 0, fontSize: 32, fontWeight: 600, color: "#0A0B0D" }}>Weiterlesen</h2>
      <a href="#" style={{ color: "#0052FF", fontWeight: 600, fontSize: 15, textDecoration: "none" }}>Alle Artikel ›</a>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
      <RelatedCard image="assets/related-dax.jpg"        tag="MARKTANALYSE" title="DAX im Mai: Saisonalität trifft auf erhöhte Volatilität" read={7} />
      <RelatedCard image="assets/related-tradingview.jpg" tag="STRATEGIE"    title="Pullback-Setup zum 20er EMA — wann es funktioniert (und wann nicht)" read={11} />
      <RelatedCard image="assets/related-trading212.jpg"  tag="RISIKO"       title="Positionsgrößen richtig berechnen — der 1%-Hebel-Mythos" read={6} />
    </div>
  </section>;


Object.assign(window, {
  ARTICLE, ArticleBody, ChartFigure, Callout, PullQuote, ProductCTA,
  ScenarioTable, SiteHeader, WebinarBar, Avatar, ShareBar, RelatedCard, RelatedSection,
  ClockIcon, AffiliateDisclaimer
});