import { useState, useEffect, useRef } from “react”;

/* ─── palette ─── */
const C = {
bg: “#0b0f1a”,
surface: “#111827”,
card: “#1a2235”,
cardAlt: “#1e293b”,
border: “#2a3550”,
accent: “#38bdf8”,
accentDim: “#0c4a6e”,
green: “#34d399”,
greenDim: “#064e3b”,
orange: “#fb923c”,
orangeDim: “#7c2d12”,
pink: “#f472b6”,
pinkDim: “#831843”,
purple: “#a78bfa”,
purpleDim: “#4c1d95”,
red: “#f87171”,
yellow: “#fbbf24”,
text: “#e2e8f0”,
textDim: “#94a3b8”,
textMuted: “#64748b”,
};

const HF_META = {
2: { color: C.accent, icon: “📦”, title: “Beschaffung”, sub: “Handlungsfeld 2” },
5: { color: C.green, icon: “👥”, title: “Personal”, sub: “Handlungsfeld 5” },
6: { color: C.orange, icon: “💰”, title: “Investition & Finanzierung”, sub: “Handlungsfeld 6” },
7: { color: C.purple, icon: “📊”, title: “Wertströme”, sub: “Handlungsfeld 7” },
};

/* ─── reusable components ─── */
const Badge = ({ children, color = C.accent }) => (
<span style={{ background: `${color}20`, color, border: `1px solid ${color}40`, borderRadius: 6, padding: “2px 8px”, fontSize: 11, fontWeight: 700, whiteSpace: “nowrap” }}>{children}</span>
);

const Formula = ({ label, formula, note }) => (

  <div style={{ background: "#0d1117", border: `1px dashed ${C.accent}60`, borderRadius: 10, padding: "10px 16px", margin: "8px 0" }}>
    {label && <div style={{ fontSize: 11, color: C.textDim, marginBottom: 3, fontWeight: 600 }}>{label}</div>}
    <div style={{ fontSize: 14, fontFamily: "'Courier New', monospace", color: C.accent, fontWeight: 700, lineHeight: 1.6 }}>{formula}</div>
    {note && <div style={{ fontSize: 11, color: C.textMuted, marginTop: 3, fontStyle: "italic" }}>{note}</div>}
  </div>
);

const Example = ({ title, children }) => (

  <div style={{ background: "linear-gradient(135deg,#064e3b,#0c4a6e)", borderRadius: 12, padding: "14px 18px", margin: "10px 0", border: "1px solid #155e75" }}>
    <div style={{ fontSize: 11, fontWeight: 800, color: C.green, marginBottom: 6, letterSpacing: 1.5, textTransform: "uppercase" }}>📝 {title}</div>
    <div style={{ fontSize: 13.5, color: "#d1fae5", lineHeight: 1.7 }}>{children}</div>
  </div>
);

const Warn = ({ children }) => (

  <div style={{ background: `${C.orange}12`, border: `1px solid ${C.orange}30`, borderRadius: 10, padding: "10px 16px", margin: "8px 0", fontSize: 12, color: C.orange }}>
    ⚠️ {children}
  </div>
);

const Tip = ({ children }) => (

  <div style={{ background: `${C.yellow}10`, border: `1px solid ${C.yellow}25`, borderRadius: 10, padding: "10px 16px", margin: "8px 0", fontSize: 12, color: C.yellow }}>
    💡 {children}
  </div>
);

const Def = ({ term, children }) => (

  <div style={{ margin: "6px 0", fontSize: 13.5, color: C.text, lineHeight: 1.6 }}>
    <strong style={{ color: C.accent }}>{term}:</strong> {children}
  </div>
);

const Bullet = ({ children, icon = “▸” }) => (

  <div style={{ display: "flex", gap: 8, marginBottom: 5, fontSize: 13.5, color: C.text, lineHeight: 1.6 }}>
    <span style={{ color: C.accent, flexShrink: 0, marginTop: 1 }}>{icon}</span>
    <span>{children}</span>
  </div>
);

const FlowBox = ({ text, color = C.accent, bg, small }) => (

  <div style={{ background: bg || C.card, border: `2px solid ${color}`, borderRadius: 10, padding: small ? "6px 12px" : "10px 16px", textAlign: "center", fontSize: small ? 12 : 13, color: C.text, fontWeight: 600 }}>{text}</div>
);
const FlowArrow = ({ label }) => (
  <div style={{ textAlign: "center", color: C.textMuted, fontSize: 11, margin: "2px 0" }}>
    {label ? <>{label}<br /></> : null}<span style={{ color: C.accent, fontSize: 18 }}>↓</span>
  </div>
);

const Diagram = ({ title, children }) => (

  <div style={{ background: "#0b0f1a", borderRadius: 12, padding: 16, margin: "10px 0", border: `1px solid ${C.border}` }}>
    {title && <div style={{ textAlign: "center", fontSize: 13, fontWeight: 700, color: C.textDim, marginBottom: 10 }}>{title}</div>}
    {children}
  </div>
);

const TBL = ({ headers, rows, compact }) => (

  <div style={{ overflowX: "auto", margin: "10px 0", borderRadius: 10, border: `1px solid ${C.border}` }}>
    <table style={{ width: "100%", borderCollapse: "collapse", fontSize: compact ? 12 : 13 }}>
      <thead>
        <tr>{headers.map((h, i) => (
          <th key={i} style={{ background: C.accentDim, color: C.accent, padding: compact ? "6px 8px" : "8px 12px", textAlign: "left", fontWeight: 700, borderBottom: `2px solid ${C.accent}`, whiteSpace: "nowrap" }}>{h}</th>
        ))}</tr>
      </thead>
      <tbody>{rows.map((row, i) => (
        <tr key={i} style={{ background: i % 2 === 0 ? C.card : C.cardAlt }}>
          {row.map((cell, j) => (
            <td key={j} style={{ padding: compact ? "5px 8px" : "8px 12px", borderBottom: `1px solid ${C.border}`, color: j === 0 ? C.text : C.textDim, fontWeight: j === 0 ? 600 : 400, lineHeight: 1.5 }}>{cell}</td>
          ))}
        </tr>
      ))}</tbody>
    </table>
  </div>
);

const Section = ({ id, title, emoji, color, children, defaultOpen = true }) => {
const [open, setOpen] = useState(defaultOpen);
return (
<div id={id} style={{ background: C.surface, borderRadius: 16, marginBottom: 16, border: `1px solid ${C.border}`, overflow: “hidden”, boxShadow: “0 4px 24px #00000040” }}>
<div onClick={() => setOpen(!open)} style={{ padding: “16px 20px”, cursor: “pointer”, display: “flex”, alignItems: “center”, justifyContent: “space-between”, background: `linear-gradient(135deg,${color}18,${color}05)`, borderBottom: open ? `1px solid ${C.border}` : “none”, userSelect: “none” }}>
<div style={{ display: “flex”, alignItems: “center”, gap: 10 }}>
<span style={{ fontSize: 22 }}>{emoji}</span>
<span style={{ fontSize: 15, fontWeight: 800, color }}>{title}</span>
</div>
<span style={{ color: C.textMuted, fontSize: 20, transition: “transform .2s”, transform: open ? “rotate(180deg)” : “rotate(0)” }}>▾</span>
</div>
{open && <div style={{ padding: “16px 20px” }}>{children}</div>}
</div>
);
};

const SubHead = ({ children, color = C.accent }) => (

  <div style={{ fontSize: 14, fontWeight: 800, color, margin: "16px 0 8px", display: "flex", alignItems: "center", gap: 6 }}>
    <div style={{ width: 4, height: 18, borderRadius: 2, background: color }} />
    {children}
  </div>
);

const CardRow = ({ items, color = C.accent }) => (

  <div style={{ display: "flex", gap: 8, flexWrap: "wrap", margin: "8px 0" }}>
    {items.map((item, i) => (
      <div key={i} style={{ flex: "1 1 160px", minWidth: 140, background: `${color}10`, border: `1px solid ${color}30`, borderRadius: 12, padding: "10px 14px" }}>
        {item.icon && <div style={{ fontSize: 22, marginBottom: 2 }}>{item.icon}</div>}
        <div style={{ fontSize: 13, fontWeight: 700, color }}>{item.title}</div>
        <div style={{ fontSize: 12, color: C.textDim, marginTop: 2, lineHeight: 1.5 }}>{item.desc}</div>
      </div>
    ))}
  </div>
);

/* ─── HF HEADER ─── */
const HFHeader = ({ id }) => {
const m = HF_META[id];
return (
<div id={`hf-${id}`} style={{ background: `linear-gradient(135deg,${m.color}30,${m.color}08)`, borderRadius: 18, padding: “24px 28px”, marginBottom: 20, marginTop: id !== 2 ? 32 : 0, border: `1px solid ${m.color}40`, boxShadow: `0 8px 40px ${m.color}15` }}>
<div style={{ fontSize: 12, color: `${m.color}aa`, fontWeight: 700, letterSpacing: 3, textTransform: “uppercase” }}>{m.sub}</div>
<div style={{ fontSize: 26, fontWeight: 900, color: “#fff”, display: “flex”, alignItems: “center”, gap: 12, marginTop: 4 }}>
<span>{m.icon}</span> {m.title}
</div>
</div>
);
};

/* ════════════════════════════════════════════════════════════════
MAIN APP
════════════════════════════════════════════════════════════════ */
export default function App() {
const [activeHF, setActiveHF] = useState(null);
const [searchTerm, setSearchTerm] = useState(””);
const [progress, setProgress] = useState({});
const contentRef = useRef(null);

const toggleProgress = (key) => {
setProgress(p => ({ …p, [key]: !p[key] }));
};

const sectionDone = (key, label) => (
<label style={{ display: “flex”, alignItems: “center”, gap: 6, cursor: “pointer”, fontSize: 12, color: progress[key] ? C.green : C.textMuted, margin: “4px 0”, userSelect: “none” }}>
<input type=“checkbox” checked={!!progress[key]} onChange={() => toggleProgress(key)} style={{ accentColor: C.green }} />
{progress[key] ? “✅” : “⬜”} {label}
</label>
);

const scrollTo = (id) => {
document.getElementById(id)?.scrollIntoView({ behavior: “smooth”, block: “start” });
};

const hfs = [2, 5, 6, 7];

return (
<div style={{ minHeight: “100vh”, background: C.bg, color: C.text, fontFamily: “‘Segoe UI’,-apple-system,sans-serif” }}>
{/* ─── TOP NAV ─── */}
<nav style={{ position: “sticky”, top: 0, zIndex: 100, background: “#0b0f1aee”, backdropFilter: “blur(12px)”, borderBottom: `1px solid ${C.border}`, padding: “10px 16px” }}>
<div style={{ maxWidth: 900, margin: “0 auto”, display: “flex”, alignItems: “center”, gap: 12, flexWrap: “wrap” }}>
<div style={{ display: “flex”, alignItems: “center”, gap: 8, marginRight: “auto” }}>
<span style={{ fontSize: 20 }}>🍪</span>
<span style={{ fontWeight: 900, fontSize: 15, color: “#fff” }}>bwl.cookietv.de</span>
</div>
<div style={{ display: “flex”, gap: 6, flexWrap: “wrap” }}>
<button onClick={() => { setActiveHF(null); window.scrollTo({ top: 0, behavior: “smooth” }); }} style={{ background: !activeHF ? `${C.accent}30` : “transparent”, border: `1px solid ${!activeHF ? C.accent : C.border}`, borderRadius: 8, padding: “5px 12px”, cursor: “pointer”, color: !activeHF ? C.accent : C.textDim, fontSize: 12, fontWeight: 700 }}>
Alle
</button>
{hfs.map(id => {
const m = HF_META[id];
return (
<button key={id} onClick={() => { setActiveHF(id); setTimeout(() => scrollTo(`hf-${id}`), 50); }} style={{ background: activeHF === id ? `${m.color}30` : “transparent”, border: `1px solid ${activeHF === id ? m.color : C.border}`, borderRadius: 8, padding: “5px 12px”, cursor: “pointer”, color: activeHF === id ? m.color : C.textDim, fontSize: 12, fontWeight: 700 }}>
{m.icon} HF {id}
</button>
);
})}
</div>
</div>
</nav>

```
  <div style={{ maxWidth: 900, margin: "0 auto", padding: "24px 16px" }} ref={contentRef}>
    {/* ─── HERO ─── */}
    <div style={{ textAlign: "center", marginBottom: 30, padding: "20px 0" }}>
      <div style={{ fontSize: 12, letterSpacing: 4, color: C.textMuted, fontWeight: 700, marginBottom: 6 }}>HÖHERE HANDELSSCHULE NRW</div>
      <h1 style={{ fontSize: 32, fontWeight: 900, color: "#fff", margin: "0 0 8px", lineHeight: 1.2 }}>BWL mit Rechnungswesen</h1>
      <p style={{ fontSize: 15, color: C.textDim, margin: 0 }}>Kompletter Lernzettel · Handlungsfelder 2, 5, 6 & 7 · mit Beispielen & Schaubildern</p>
      <div style={{ display: "flex", gap: 8, justifyContent: "center", marginTop: 16, flexWrap: "wrap" }}>
        {hfs.map(id => {
          const m = HF_META[id];
          return (
            <div key={id} onClick={() => { setActiveHF(id); setTimeout(() => scrollTo(`hf-${id}`), 50); }} style={{ background: `${m.color}15`, border: `1px solid ${m.color}35`, borderRadius: 12, padding: "12px 20px", cursor: "pointer", transition: "transform .15s" }}>
              <div style={{ fontSize: 24 }}>{m.icon}</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: m.color, marginTop: 4 }}>HF {id}</div>
              <div style={{ fontSize: 12, color: C.textDim }}>{m.title}</div>
            </div>
          );
        })}
      </div>
    </div>

    {/* ═══════════════════════════════════════════════════
       HF 2: BESCHAFFUNG
       ═══════════════════════════════════════════════════ */}
    {(!activeHF || activeHF === 2) && (<>
      <HFHeader id={2} />

      {/* AS 2.1 */}
      <Section title="2.1 Beschaffungsplanung & Marktforschung" emoji="🔍" color={C.accent}>
        <SubHead>Beschaffungsziele – Die 5 R's</SubHead>
        <Diagram>
          <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 8 }}>
            {[{ t: "Richtige Menge", d: "Nicht zu viel (Lagerkosten!), nicht zu wenig (Lieferengpass!)" }, { t: "Richtige Qualität", d: "Passt die Ware zu unseren Anforderungen?" }, { t: "Richtiger Zeitpunkt", d: "Wann brauchen wir die Ware?" }, { t: "Günstiger Preis", d: "Bester Preis bei guter Qualität" }, { t: "Richtiger Ort", d: "Lieferung an den richtigen Standort" }].map((r, i) => (
              <div key={i} style={{ background: `${C.accent}12`, border: `1px solid ${C.accent}30`, borderRadius: 12, padding: "10px 14px", flex: "1 1 130px", minWidth: 130, textAlign: "center" }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: C.accent }}>{r.t}</div>
                <div style={{ fontSize: 11, color: C.textDim, marginTop: 3 }}>{r.d}</div>
              </div>
            ))}
          </div>
        </Diagram>

        <SubHead>Beschaffungsmarktforschung</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim, lineHeight: 1.7 }}>
          Bevor ein Unternehmen einkauft, muss es den Beschaffungsmarkt analysieren. Dabei werden Informationen über <strong style={{ color: C.text }}>Lieferanten, Preise, Qualitäten, Lieferbedingungen und Marktentwicklungen</strong> gesammelt.
        </p>
        <Def term="Primärforschung">Eigene Untersuchungen, z.B. Anfragen bei Lieferanten, Messebesuche, Betriebsbesichtigungen</Def>
        <Def term="Sekundärforschung">Auswertung vorhandener Daten, z.B. Branchenverzeichnisse, Internet, Fachzeitschriften, Lieferantenkartei</Def>
        <Tip>Bei der Beschaffungsmarktforschung müssen auch <strong>Nachhaltigkeit und fairer Handel</strong> berücksichtigt werden – z.B. kurze Transportwege, umweltfreundliche Verpackung, faire Arbeitsbedingungen beim Lieferanten.</Tip>

        <SubHead>Bezugsquellen ermitteln</SubHead>
        <CardRow color={C.accent} items={[
          { icon: "📋", title: "Lieferantenkartei", desc: "Bestehende Kontakte und Erfahrungen aus früheren Bestellungen" },
          { icon: "🌐", title: "Internet", desc: "Lieferantenportale, Preisvergleiche, Branchenverzeichnisse" },
          { icon: "🏢", title: "Messen", desc: "Direkte Kontakte, Produktproben, Verhandlungen vor Ort" },
          { icon: "📨", title: "Anfragen", desc: "Gezielt bei potenziellen Lieferanten Angebote einholen" },
        ]} />

        <SubHead>Quantitativer Angebotsvergleich (Bezugskalkulation)</SubHead>
        <p style={{ fontSize: 13, color: C.textDim, marginBottom: 8 }}>Der <strong style={{ color: C.text }}>Bezugspreis</strong> (= Einstandspreis) ist der wahre Preis, den du für die Ware zahlst – inklusive aller Abzüge und Zusatzkosten. Nur so kannst du Lieferanten fair vergleichen!</p>

        <Diagram title="Bezugskalkulation – Schritt für Schritt">
          <FlowBox text="Listeneinkaufspreis (LEP) – steht im Katalog/Angebot" color={C.accent} />
          <FlowArrow label="– Lieferantenrabatt (z.B. Mengenrabatt)" />
          <FlowBox text="= Zieleinkaufspreis (ZEP)" color={C.textDim} />
          <FlowArrow label="– Lieferantenskonto (bei schneller Zahlung)" />
          <FlowBox text="= Bareinkaufspreis (BEP)" color={C.textDim} />
          <FlowArrow label="+ Bezugskosten (Fracht, Verpackung, Versicherung, Zoll)" />
          <FlowBox text="= Bezugspreis (Einstandspreis) ← DAS ist dein Vergleichspreis!" color={C.green} bg={C.greenDim} />
        </Diagram>

        <Example title="Angebotsvergleich – Welcher Lieferant ist günstiger?">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div>
              <strong style={{ color: C.accent }}>Lieferant A:</strong><br />
              <span style={{ fontFamily: "monospace", fontSize: 13, lineHeight: 2 }}>
                10.000,00 € LEP<br />
                <span style={{ color: C.pink }}>– 1.500,00 € Rabatt (15%)</span><br />
                = 8.500,00 € ZEP<br />
                <span style={{ color: C.pink }}>–   170,00 € Skonto (2%)</span><br />
                = 8.330,00 € BEP<br />
                <span style={{ color: C.orange }}>+   250,00 € Fracht</span><br />
                = <strong style={{ color: C.green }}>8.580,00 € Bezugspreis</strong>
              </span>
            </div>
            <div>
              <strong style={{ color: C.orange }}>Lieferant B:</strong><br />
              <span style={{ fontFamily: "monospace", fontSize: 13, lineHeight: 2 }}>
                9.500,00 € LEP<br />
                <span style={{ color: C.pink }}>– 950,00 € Rabatt (10%)</span><br />
                = 8.550,00 € ZEP<br />
                <span style={{ color: C.pink }}>– 256,50 € Skonto (3%)</span><br />
                = 8.293,50 € BEP<br />
                <span style={{ color: C.orange }}>+ 400,00 € Fracht</span><br />
                = <strong style={{ color: C.green }}>8.693,50 € Bezugspreis</strong>
              </span>
            </div>
          </div>
          <div style={{ marginTop: 10, padding: "8px 12px", background: "#0b0f1a", borderRadius: 8, textAlign: "center" }}>
            ✅ <strong>Lieferant A ist günstiger</strong> – obwohl B einen niedrigeren Listenpreis hat! Erst der Bezugspreis zeigt die Wahrheit.
          </div>
        </Example>

        <Tip>Neben dem Preis gibt es auch den <strong>qualitativen Angebotsvergleich</strong>: Qualität, Zuverlässigkeit, Lieferzeit, Zahlungsbedingungen, Nachhaltigkeit, Service – nutze dafür eine Nutzwertanalyse (Punktbewertung).</Tip>

        <SubHead>Beschaffungswege</SubHead>
        <TBL headers={["Weg", "Wie?", "Vorteile", "Nachteile"]}
          rows={[
            ["Direkter Bezug", "Hersteller → Unternehmen", "Günstig bei großen Mengen, kein Zwischenhändler", "Hohe Mindestmengen, lange Lieferzeit"],
            ["Indirekter Bezug", "Über Großhandel", "Kleine Mengen möglich, schnelle Lieferung, Beratung", "Teurer durch Handelsspanne"],
          ]} />
        <Tip>Ökologischer Aspekt: Kurze Transportwege = weniger CO₂. Regionale Lieferanten können trotz höherem Preis nachhaltiger sein!</Tip>

        <SubHead>Beschaffungsverfahren</SubHead>
        <TBL headers={["Verfahren", "So funktioniert's", "Passt wenn...", "Beispiel"]}
          rows={[
            ["Bestellrhythmus-verfahren", "Feste Zeitabstände, wechselnde Mengen", "Gleichmäßiger Verbrauch, planbarer Bedarf", "Jeden 1. des Monats: Büromaterial bestellen"],
            ["Bestellpunkt-verfahren", "Bestellen sobald Meldebestand erreicht", "Unregelmäßiger Verbrauch", "Lager fällt auf 150 Stk → automatische Bestellung"],
            ["Just-in-Time (JiT)", "Lieferung genau zum Bedarfszeitpunkt", "Hohe Planbarkeit, enge Lieferanten-Bindung", "Autobau: Sitze kommen 2h vor Einbau"],
            ["Fertigungs-synchron", "Material kommt direkt in die Produktion", "Kein eigenes Lager gewünscht", "Ähnlich JiT, aber noch enger getaktet"],
          ]} />

        <SubHead>Make-or-Buy-Entscheidung</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Soll das Unternehmen etwas <strong style={{ color: C.text }}>selbst herstellen (Make)</strong> oder <strong style={{ color: C.text }}>zukaufen (Buy)</strong>?</p>
        <TBL headers={["", "Make (Eigenfertigung)", "Buy (Fremdbezug)"]}
          rows={[
            ["Wann?", "Know-how vorhanden, Kapazität frei", "Kein Know-how, billiger extern"],
            ["Vorteil", "Unabhängig, Qualitätskontrolle", "Flexibel, weniger Fixkosten"],
            ["Nachteil", "Hohe Fixkosten, Risiko", "Abhängigkeit vom Lieferanten"],
          ]} />
        <Example title="Beispiel">
          Eine Bäckerei backt Brötchen <strong>selbst (Make)</strong>, kauft aber die Verpackung extern ein <strong>(Buy)</strong> – weil eine eigene Verpackungsmaschine zu teuer wäre.
        </Example>

        <SubHead>Beschaffungscontrolling</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Die Wirtschaftlichkeit der Beschaffung wird anhand von Kennziffern überprüft:</p>
        <Formula label="Durchschnittlicher Lagerbestand" formula="∅ Lagerbestand = (Anfangsbestand + Endbestand) ÷ 2" />
        <Formula label="Umschlagshäufigkeit" formula="Umschlagshäufigkeit = Jahresverbrauch ÷ ∅ Lagerbestand" note="Je höher, desto effizienter wird das Lager genutzt" />
        <Formula label="Durchschnittliche Lagerdauer" formula="∅ Lagerdauer = 360 ÷ Umschlagshäufigkeit" note="Je kürzer, desto weniger Kapital ist gebunden" />

        {sectionDone("2.1", "AS 2.1 – Beschaffungsplanung verstanden")}
      </Section>

      {/* AS 2.2 */}
      <Section title="2.2 Lagerhaltung, Optimale Bestellmenge & Buchungen" emoji="🏭" color={C.accent}>
        <SubHead>Lagerkennziffern im Überblick</SubHead>
        <Diagram title="Lagerbestandsverlauf (Sägezahn-Diagramm)">
          <svg viewBox="0 0 440 220" style={{ width: "100%", maxWidth: 460, display: "block", margin: "0 auto" }}>
            <defs><linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#38bdf8" stopOpacity="0.25" /><stop offset="100%" stopColor="#38bdf8" stopOpacity="0.02" /></linearGradient></defs>
            <rect x="50" y="18" width="370" height="28" rx="6" fill="#0c4a6e" stroke="#38bdf8" strokeWidth="1" />
            <text x="235" y="37" textAnchor="middle" fill="#38bdf8" fontSize="12" fontWeight="bold">Höchstbestand = 500 Stk</text>
            <polygon points="50,50 230,155 230,50 410,155 410,50" fill="url(#areaGrad)" />
            <line x1="50" y1="50" x2="230" y2="155" stroke="#38bdf8" strokeWidth="2.5" />
            <line x1="230" y1="50" x2="410" y2="155" stroke="#38bdf8" strokeWidth="2.5" strokeDasharray="4" />
            <line x1="230" y1="155" x2="230" y2="50" stroke="#34d399" strokeWidth="2" />
            <text x="238" y="100" fill="#34d399" fontSize="10" fontWeight="bold">Lieferung!</text>
            <rect x="50" y="120" width="370" height="24" rx="6" fill="#7c2d1233" stroke="#fb923c" strokeWidth="1" />
            <text x="235" y="137" textAnchor="middle" fill="#fb923c" fontSize="11" fontWeight="bold">⚡ Meldebestand = 150 Stk → JETZT BESTELLEN!</text>
            <rect x="50" y="160" width="370" height="24" rx="6" fill="#83184322" stroke="#f472b6" strokeWidth="1" />
            <text x="235" y="177" textAnchor="middle" fill="#f472b6" fontSize="11" fontWeight="bold">🛡️ Mindestbestand = 50 Stk (Sicherheitspuffer)</text>
            <text x="140" y="95" fill="#38bdf888" fontSize="10">Verbrauch</text>
            <text x="320" y="95" fill="#38bdf855" fontSize="10">neuer Zyklus</text>
            <line x1="50" y1="198" x2="230" y2="198" stroke="#64748b" strokeWidth="1" />
            <text x="140" y="212" textAnchor="middle" fill="#64748b" fontSize="10">Lieferzeit</text>
          </svg>
        </Diagram>

        <Def term="Höchstbestand">Maximale Lagermenge, die das Lager aufnehmen kann (Kapazitätsgrenze)</Def>
        <Def term="Mindestbestand (= Sicherheitsbestand)">Reserve-Puffer für Lieferverzögerungen oder unerwartet hohen Verbrauch. Soll nie unterschritten werden!</Def>
        <Def term="Meldebestand">Bei Erreichen wird eine neue Bestellung ausgelöst</Def>
        <Def term="Dispositiver Bestand">= Lagerbestand + offene Bestellungen − Vormerkungen (reservierte Ware)</Def>

        <Formula label="Meldebestand berechnen" formula="Meldebestand = Tagesverbrauch × Lieferzeit (Tage) + Mindestbestand" />
        <Example title="Beispiel Meldebestand">
          Tagesverbrauch: <strong>20 Stück</strong> · Lieferzeit: <strong>5 Tage</strong> · Mindestbestand: <strong>50 Stück</strong><br />
          → Meldebestand = 20 × 5 + 50 = <strong style={{ color: C.accent }}>150 Stück</strong><br />
          <em>Heißt: Wenn nur noch 150 Stück da sind → sofort neue Bestellung raus! Dann reichen die 150 Stück für 5 Tage Lieferzeit + 50 als Sicherheit.</em>
        </Example>

        <SubHead>Optimale Bestellmenge</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Das Ziel: <strong style={{ color: C.text }}>Gesamtkosten aus Bestell- und Lagerkosten minimieren.</strong> Wenig bestellen = oft bestellen = hohe Bestellkosten. Viel bestellen = hohe Lagerkosten.</p>
        <Diagram title="Das Prinzip der optimalen Bestellmenge">
          <svg viewBox="0 0 400 180" style={{ width: "100%", maxWidth: 400, display: "block", margin: "0 auto" }}>
            <line x1="50" y1="150" x2="380" y2="150" stroke="#475569" strokeWidth="1" />
            <line x1="50" y1="150" x2="50" y2="20" stroke="#475569" strokeWidth="1" />
            <text x="215" y="172" textAnchor="middle" fill="#94a3b8" fontSize="10">Bestellmenge →</text>
            <text x="20" y="85" fill="#94a3b8" fontSize="10" transform="rotate(-90,20,85)">Kosten →</text>
            <path d="M70,40 Q140,100 200,120 Q280,135 370,140" fill="none" stroke="#f472b6" strokeWidth="2" />
            <text x="350" y="130" fill="#f472b6" fontSize="10">Lagerkosten</text>
            <path d="M70,140 Q140,115 200,95 Q280,75 370,40" fill="none" stroke="#38bdf8" strokeWidth="2" />
            <text x="310" y="35" fill="#38bdf8" fontSize="10">Bestellkosten</text>
            <path d="M70,100 Q130,80 200,72 Q250,72 300,80 Q350,95 370,105" fill="none" stroke="#34d399" strokeWidth="2.5" />
            <text x="295" y="94" fill="#34d399" fontSize="10" fontWeight="bold">Gesamtkosten</text>
            <circle cx="220" cy="72" r="5" fill="#34d399" />
            <line x1="220" y1="72" x2="220" y2="150" stroke="#34d399" strokeWidth="1" strokeDasharray="4" />
            <text x="220" y="165" textAnchor="middle" fill="#34d399" fontSize="10" fontWeight="bold">Optimum!</text>
          </svg>
        </Diagram>

        <Formula label="Andlersche Formel" formula="Optimale Bestellmenge = √( (200 × Jahresbedarf × Bestellkosten) ÷ (Einstandspreis × Lagerhaltungskostensatz%) )" />
        <Example title="Beispiel">
          Jahresbedarf: <strong>3.600 Stk</strong> · Bestellkosten: <strong>50 €/Bestellung</strong> · Einstandspreis: <strong>10 €/Stk</strong> · Lagerkostensatz: <strong>20%</strong><br />
          → opt. Bestellmenge = √((200 × 3.600 × 50) ÷ (10 × 20)) = √(36.000.000 ÷ 200) = √180.000 ≈ <strong style={{ color: C.accent }}>424 Stück</strong><br />
          → Bestellhäufigkeit = 3.600 ÷ 424 ≈ <strong>8,5 mal pro Jahr</strong>
        </Example>

        <SubHead>ABC-Analyse</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim, marginBottom: 8 }}>Sortiert alle Beschaffungsgüter nach Wert – damit du weißt, worauf du dich konzentrieren musst:</p>
        <Diagram>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {[
              { l: "A", pct: "~70-80% Wert", qty: "nur ~15% der Artikelzahl", color: C.red, desc: "Wenige teure Teile → intensive Betreuung, genaue Planung, Angebotsvergleiche, JiT prüfen", ex: "z.B. teure Rohstoffe, Elektronikbauteile" },
              { l: "B", pct: "~15-20% Wert", qty: "~25% der Artikelzahl", color: C.orange, desc: "Mittlere Bedeutung → normaler Aufwand, regelmäßige Bestellungen", ex: "z.B. Verpackungsmaterial, Werkzeuge" },
              { l: "C", pct: "~5-10% Wert", qty: "~60% der Artikelzahl", color: C.green, desc: "Viele billige Teile → vereinfachte Beschaffung, große Mengen auf Vorrat", ex: "z.B. Schrauben, Büroklammern, Reinigungsmittel" },
            ].map(item => (
              <div key={item.l} style={{ flex: "1 1 180px", background: `${item.color}10`, border: `1px solid ${item.color}30`, borderRadius: 14, padding: "14px 16px" }}>
                <div style={{ fontSize: 32, fontWeight: 900, color: item.color }}>{item.l}</div>
                <div style={{ fontSize: 12, fontWeight: 700, color: item.color }}>{item.pct}</div>
                <div style={{ fontSize: 11, color: C.textDim }}>{item.qty}</div>
                <div style={{ fontSize: 12, color: C.text, marginTop: 6, lineHeight: 1.5 }}>{item.desc}</div>
                <div style={{ fontSize: 11, color: C.textMuted, marginTop: 4, fontStyle: "italic" }}>{item.ex}</div>
              </div>
            ))}
          </div>
        </Diagram>

        <SubHead>Buchungen im Beschaffungsbereich</SubHead>
        <Warn>Immer die <strong>Umsatzsteuer</strong> beachten! Beim Einkauf buchst du die <strong>Vorsteuer</strong> (19% oder 7%).</Warn>

        <Example title="Einkauf Rohstoffe auf Ziel (= Rechnung)">
          Rohstoffe für 2.000 € netto + 19% USt = 2.380 € brutto<br /><br />
          <strong style={{ color: C.accent }}>Aufwand für Rohstoffe 2.000 €</strong> &nbsp;/&nbsp; <strong style={{ color: C.accent }}>Vorsteuer 380 €</strong><br />
          &nbsp;&nbsp;&nbsp;an <strong style={{ color: C.pink }}>Verbindlichkeiten aLL 2.380 €</strong>
        </Example>
        <Example title="Bezugskosten (z.B. Frachtkosten)">
          Frachtrechnung: 200 € netto + 38 € USt = 238 €<br /><br />
          <strong style={{ color: C.accent }}>Bezugskosten 200 €</strong> &nbsp;/&nbsp; <strong style={{ color: C.accent }}>Vorsteuer 38 €</strong><br />
          &nbsp;&nbsp;&nbsp;an <strong style={{ color: C.pink }}>Verb. aLL 238 €</strong>
        </Example>
        <Example title="Rücksendung von Rohstoffen (500 € netto)">
          <strong style={{ color: C.accent }}>Verbindlichkeiten aLL 595 €</strong><br />
          &nbsp;&nbsp;&nbsp;an <strong style={{ color: C.pink }}>Aufw. f. Rohstoffe 500 €</strong> &nbsp;/&nbsp; <strong style={{ color: C.pink }}>Vorsteuer 95 €</strong><br />
          <em style={{ fontSize: 12 }}>Rücksendung = Storno → alles wird umgedreht!</em>
        </Example>
        <Example title="Erhaltener Nachlass (Preisnachlass 300 € netto)">
          <strong style={{ color: C.accent }}>Verbindlichkeiten aLL 357 €</strong><br />
          &nbsp;&nbsp;&nbsp;an <strong style={{ color: C.pink }}>Aufw. f. Rohstoffe 300 €</strong> &nbsp;/&nbsp; <strong style={{ color: C.pink }}>Vorsteuer 57 €</strong><br />
          <em style={{ fontSize: 12 }}>Nachlass mindert den Aufwand und die Vorsteuer!</em>
        </Example>

        {sectionDone("2.2", "AS 2.2 – Lagerhaltung & Buchungen verstanden")}
      </Section>
    </>)}

    {/* ═══════════════════════════════════════════════════
       HF 5: PERSONAL
       ═══════════════════════════════════════════════════ */}
    {(!activeHF || activeHF === 5) && (<>
      <HFHeader id={5} />

      <Section title="5.1 Arbeitsvertrag, Kündigung & Mitbestimmung" emoji="📋" color={C.green}>
        <SubHead color={C.green}>Rechtsquellen-Pyramide</SubHead>
        <Diagram title="Von oben (stärker) nach unten (schwächer)">
          {[
            { t: "🇪🇺 EU-Recht (z.B. Arbeitszeitrichtlinie)", w: 0 },
            { t: "📜 Grundgesetz (z.B. Art. 12 Berufsfreiheit)", w: 10 },
            { t: "⚖️ Gesetze (BGB, HGB, KSchG, BetrVG, JArbSchG, MuSchG, BBiG)", w: 20 },
            { t: "🤝 Tarifvertrag (zwischen Gewerkschaft & Arbeitgeberverband)", w: 30 },
            { t: "🏢 Betriebsvereinbarung (Betriebsrat & Arbeitgeber)", w: 40 },
            { t: "📝 Einzelarbeitsvertrag (AG & AN individuell)", w: 50 },
            { t: "👆 Weisungsrecht / Direktionsrecht des AG", w: 60 },
          ].map((item, i) => (
            <div key={i} style={{ background: `${C.green}${Math.max(5, 22 - i * 3).toString(16).padStart(2, '0')}`, border: `1px solid ${C.green}30`, borderRadius: 8, padding: "7px 14px", marginBottom: 3, fontSize: 12.5, color: i < 3 ? C.green : C.textDim, fontWeight: i < 3 ? 700 : 400, marginLeft: item.w, marginRight: item.w, textAlign: "center" }}>
              {item.t}
            </div>
          ))}
          <div style={{ textAlign: "center", fontSize: 11, color: C.textMuted, marginTop: 6 }}>Günstigkeitsprinzip: Eine niedrigere Stufe darf nur dann abweichen, wenn es für den AN <em>besser</em> ist!</div>
        </Diagram>

        <SubHead color={C.green}>Wichtige Inhalte eines Arbeitsvertrags</SubHead>
        <CardRow color={C.green} items={[
          { title: "Vertragsparteien", desc: "Name AG + AN" },
          { title: "Beginn & Dauer", desc: "Befristet oder unbefristet" },
          { title: "Probezeit", desc: "Max. 6 Monate, 2 Wochen Kündigungsfrist" },
          { title: "Tätigkeit / Ort", desc: "Was & wo wird gearbeitet" },
          { title: "Arbeitszeit", desc: "Max. 8h/Tag, Ausnahme 10h (ArbZG)" },
          { title: "Vergütung", desc: "Gehalt/Lohn, Zuschläge, Sonderzahlungen" },
          { title: "Urlaub", desc: "Min. 24 Werktage (BUrlG)" },
          { title: "Kündigungsfrist", desc: "Gesetzlich: 4 Wochen zum 15./Monatsende" },
        ]} />

        <SubHead color={C.green}>Kündigung</SubHead>
        <TBL headers={["", "Ordentliche Kündigung", "Außerordentliche Kündigung"]}
          rows={[
            ["Form", "Schriftlich!", "Schriftlich!"],
            ["Frist", "4 Wochen zum 15. oder Monatsende (steigt mit Betriebszugehörigkeit)", "Sofort (fristlos)"],
            ["Grund nötig?", "Ab 10 MA ja (KSchG) – 3 Gründe möglich", "Immer! Nur bei wichtigem Grund"],
            ["Gründe", "Personenbedingt / Verhaltensbedingt / Betriebsbedingt", "z.B. Diebstahl, Arbeitsverweigerung, Betrug"],
            ["Frist f. außer.", "–", "Innerhalb von 2 Wochen nach Kenntnis"],
            ["Betriebsrat", "Muss vorher angehört werden (§102 BetrVG)!", "Muss vorher angehört werden!"],
          ]} />

        <Example title="Sonderkündigungsschutz – Diese Personen können nicht einfach gekündigt werden">
          🤰 <strong>Schwangere</strong> und Mütter bis 4 Monate nach Entbindung (MuSchG)<br />
          ♿ <strong>Schwerbehinderte</strong> – Zustimmung des Integrationsamts nötig<br />
          🏛️ <strong>Betriebsratsmitglieder</strong> – nur außerordentlich + mit Zustimmung BR<br />
          👶 <strong>Elternzeit</strong> – Kündigungsschutz während der Elternzeit<br />
          👷 <strong>Auszubildende</strong> – nach der Probezeit nur außerordentlich kündbar
        </Example>

        <SubHead color={C.green}>Folgen des Arbeitsplatzverlustes</SubHead>
        <Bullet>Einkommensverlust → Arbeitslosengeld I (12 Monate, ca. 60-67% vom Netto)</Bullet>
        <Bullet>Psychische Belastung, sozialer Abstieg, Verlust sozialer Kontakte</Bullet>
        <Bullet>Bei längerer Arbeitslosigkeit: ALG II (Bürgergeld) als Grundsicherung</Bullet>

        <SubHead color={C.green}>Mitwirkung & Mitbestimmung (BetrVG)</SubHead>
        <Def term="Betriebsrat">Wird von AN gewählt (ab 5 MA möglich), vertritt deren Interessen</Def>
        <TBL headers={["Recht", "Bedeutung", "Beispiel"]}
          rows={[
            ["Informationsrecht", "BR wird informiert", "Einstellungen, wirtschaftliche Lage"],
            ["Anhörungsrecht", "BR darf Stellung nehmen", "Vor jeder Kündigung (§102)"],
            ["Mitwirkungsrecht", "BR berät mit, AG entscheidet", "Gestaltung der Arbeitsplätze"],
            ["Mitbestimmungsrecht", "AG braucht Zustimmung des BR", "Arbeitszeit, Urlaub, Sozialeinrichtungen"],
          ]} />

        {sectionDone("5.1", "AS 5.1 – Arbeitsvertrag & Kündigung verstanden")}
      </Section>

      <Section title="5.2 Entgeltabrechnung & Sozialversicherung" emoji="💶" color={C.green}>
        <SubHead color={C.green}>Lohnformen</SubHead>
        <TBL headers={["Lohnform", "Bezahlung nach...", "Vorteil", "Nachteil", "Beispiel"]}
          rows={[
            ["Zeitlohn", "Arbeitszeit", "Einfach, planbar, kein Zeitdruck", "Kein Leistungsanreiz", "Bürokaufleute, Lehrkräfte"],
            ["Akkordlohn", "Produzierte Menge", "Hoher Leistungsanreiz", "Qualität kann leiden, Stress", "Fließbandarbeit"],
            ["Prämienlohn", "Grundlohn + Prämie", "Qualität + Leistung belohnt", "Komplexe Berechnung", "Maschinenbediener + Qualitätsprämie"],
          ]} />

        <SubHead color={C.green}>Vom Brutto zum Netto – Schritt für Schritt</SubHead>
        <Diagram>
          <FlowBox text="Bruttogehalt (z.B. 3.000 €)" color={C.green} bg={C.greenDim} />
          <FlowArrow label="– Lohnsteuer (abhängig von Steuerklasse)" />
          <FlowArrow label="– Kirchensteuer (8 oder 9% der LSt, nur bei Kirchenmitgliedern)" />
          <FlowArrow label="– Solidaritätszuschlag (5,5% der LSt, Freigrenze beachten)" />
          <FlowArrow label="– AN-Anteil Sozialversicherung (KV + RV + AV + PV)" />
          <FlowBox text="= Nettogehalt" color={C.accent} />
          <FlowArrow label="– evtl. Vorschüsse, Pfändungen / + evtl. VWL-AG-Anteil" />
          <FlowBox text="= Auszahlungsbetrag (was auf dem Konto ankommt!)" color={C.green} bg={C.greenDim} />
        </Diagram>

        <SubHead color={C.green}>Die 5 Säulen der Sozialversicherung</SubHead>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", margin: "8px 0" }}>
          {[
            { name: "Kranken-\nversicherung", pct: "~14,6% + Zusatzbeitrag", icon: "🏥", who: "AN/AG je 50%", covers: "Arztbesuche, Krankengeld, Medikamente" },
            { name: "Renten-\nversicherung", pct: "18,6%", icon: "👴", who: "AN/AG je 50%", covers: "Altersrente, Erwerbsminderung" },
            { name: "Arbeitslosen-\nversicherung", pct: "2,6%", icon: "📋", who: "AN/AG je 50%", covers: "ALG I bei Jobverlust" },
            { name: "Pflege-\nversicherung", pct: "3,4%", icon: "🩺", who: "AN/AG je 50%*", covers: "Pflegebedürftigkeit im Alter" },
            { name: "Unfall-\nversicherung", pct: "variabel", icon: "⚠️", who: "100% AG!", covers: "Arbeitsunfälle, Berufskrankheiten" },
          ].map(sv => (
            <div key={sv.name} style={{ flex: "1 1 110px", minWidth: 110, background: C.card, border: `1px solid ${C.border}`, borderRadius: 12, padding: "10px 8px", textAlign: "center" }}>
              <div style={{ fontSize: 24 }}>{sv.icon}</div>
              <div style={{ fontSize: 11, fontWeight: 700, color: C.green, whiteSpace: "pre-line", lineHeight: 1.3 }}>{sv.name}</div>
              <div style={{ fontSize: 12, color: C.accent, fontWeight: 700, margin: "3px 0" }}>{sv.pct}</div>
              <div style={{ fontSize: 10, color: C.textMuted }}>{sv.who}</div>
              <div style={{ fontSize: 10, color: C.textDim, marginTop: 3, lineHeight: 1.3 }}>{sv.covers}</div>
            </div>
          ))}
        </div>
        <div style={{ fontSize: 11, color: C.textMuted }}>*Kinderlose ab 23 Jahren zahlen einen Zuschlag bei der PV</div>

        <Example title="Rechenbeispiel Entgeltabrechnung">
          <div style={{ fontFamily: "monospace", fontSize: 13, lineHeight: 2 }}>
            Bruttogehalt:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3.000,00 €<br />
            <span style={{ color: C.pink }}>– Lohnsteuer:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  350,00 €</span><br />
            <span style={{ color: C.pink }}>– Kirchensteuer:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   28,00 €</span><br />
            <span style={{ color: C.pink }}>– Soli:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    0,00 €</span><br />
            <span style={{ color: C.pink }}>– KV (7,3%+0,8%):&nbsp;&nbsp;&nbsp;&nbsp;  243,00 €</span><br />
            <span style={{ color: C.pink }}>– RV (9,3%):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  279,00 €</span><br />
            <span style={{ color: C.pink }}>– AV (1,3%):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   39,00 €</span><br />
            <span style={{ color: C.pink }}>– PV (1,7%):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   51,00 €</span><br />
            = <strong style={{ color: C.green }}>Nettogehalt:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2.010,00 €</strong>
          </div>
        </Example>

        <SubHead color={C.green}>Buchungen Personal</SubHead>
        <Example title="Gehaltsbuchung">
          <strong style={{ color: C.green }}>Gehälter 3.000 €</strong><br />
          &nbsp;&nbsp;an <strong style={{ color: C.pink }}>Bank 2.010 €</strong> (Auszahlung)<br />
          &nbsp;&nbsp;an <strong style={{ color: C.pink }}>Verb. ggü. Finanzamt 378 €</strong> (LSt + KiSt + Soli)<br />
          &nbsp;&nbsp;an <strong style={{ color: C.pink }}>Verb. ggü. SV-Träger 612 €</strong> (AN-Anteile SV)<br /><br />
          <em>Zusätzlich die AG-Anteile:</em><br />
          <strong style={{ color: C.green }}>AG-Anteile zur SV 612 €</strong><br />
          &nbsp;&nbsp;an <strong style={{ color: C.pink }}>Verb. ggü. SV-Träger 612 €</strong>
        </Example>

        <SubHead color={C.green}>Soziale Sicherung & private Vorsorge</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Die gesetzliche Rente allein reicht oft nicht! Deshalb gibt es das <strong style={{ color: C.text }}>3-Schichten-Modell:</strong></p>
        <Bullet>Schicht 1: Gesetzliche Rente + Rürup-Rente (Basisversorgung)</Bullet>
        <Bullet>Schicht 2: Betriebliche Altersvorsorge + Riester-Rente (gefördert)</Bullet>
        <Bullet>Schicht 3: Private Vorsorge (Lebensversicherung, Fonds, ETFs, Immobilien)</Bullet>
        {sectionDone("5.2", "AS 5.2 – Entgeltabrechnung verstanden")}
      </Section>

      <Section title="5.3 Ausbildung & Personalentwicklung" emoji="🎓" color={C.green}>
        <SubHead color={C.green}>Das Duale System</SubHead>
        <Diagram title="Duale Ausbildung = 2 Lernorte">
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <div style={{ flex: "1 1 180px", background: `${C.accent}15`, border: `2px solid ${C.accent}40`, borderRadius: 14, padding: 16, textAlign: "center" }}>
              <div style={{ fontSize: 28 }}>🏢</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: C.accent }}>Betrieb</div>
              <div style={{ fontSize: 12, color: C.textDim, marginTop: 4 }}>Praktische Ausbildung<br />3-4 Tage pro Woche<br />Ausbilder bildet aus<br />Ausbildungsordnung (Bund)</div>
            </div>
            <div style={{ flex: "1 1 180px", background: `${C.green}15`, border: `2px solid ${C.green}40`, borderRadius: 14, padding: 16, textAlign: "center" }}>
              <div style={{ fontSize: 28 }}>🏫</div>
              <div style={{ fontSize: 14, fontWeight: 700, color: C.green }}>Berufsschule</div>
              <div style={{ fontSize: 12, color: C.textDim, marginTop: 4 }}>Theoretische Ausbildung<br />1-2 Tage pro Woche<br />Lehrkräfte unterrichten<br />Rahmenlehrplan (Land)</div>
            </div>
          </div>
        </Diagram>

        <SubHead color={C.green}>Ausbildungsvertrag (BBiG)</SubHead>
        <Bullet>Muss <strong>vor Beginn</strong> der Ausbildung schriftlich geschlossen werden</Bullet>
        <Bullet>Inhalte: Ausbildungsberuf, Beginn/Dauer, Vergütung, Arbeitszeit, Urlaub, Probezeit (1-4 Monate)</Bullet>
        <Bullet>Rechte des Azubis: Vergütung, Ausbildungsmittel, Freistellung für Berufsschule, Zeugnis</Bullet>
        <Bullet>Pflichten des Azubis: Lernpflicht, Sorgfaltspflicht, Berichtsheft führen, Weisungen befolgen</Bullet>
        <Bullet>Kündigung: In Probezeit jederzeit fristlos, danach nur noch außerordentlich (wichtiger Grund)</Bullet>

        <SubHead color={C.green}>Weiterbildung & lebenslanges Lernen</SubHead>
        <TBL headers={["Art", "Ziel", "Beispiel"]}
          rows={[
            ["Anpassungs-\nfortbildung", "Wissen aktualisieren", "Neue Software lernen, Gesetzes-änderungen"],
            ["Aufstiegs-\nfortbildung", "Höhere Position erreichen", "Meister, Fachwirt, Betriebswirt"],
            ["Umschulung", "Neuen Beruf lernen", "Wenn alter Beruf keine Zukunft hat"],
          ]} />
        <Tip>Durch Digitalisierung und Strukturwandel ist <strong>lebenslanges Lernen</strong> heute unverzichtbar – wer sich nicht weiterbildet, verliert den Anschluss!</Tip>

        {sectionDone("5.3", "AS 5.3 – Ausbildung verstanden")}
      </Section>

      <Section title="5.4 Führung, Beurteilung & Personalerhaltung" emoji="👔" color={C.green}>
        <SubHead color={C.green}>Führungsstile</SubHead>
        <TBL headers={["Stil", "Chef entscheidet...", "Vorteile", "Nachteile", "Passt wenn..."]}
          rows={[
            ["Autoritär", "...allein", "Schnelle Entscheidungen, klare Linie", "Demotivation, keine Kreativität", "Krise, unerfahrene MA"],
            ["Kooperativ", "...gemeinsam mit MA", "Motivation, bessere Ideen, Teamgefühl", "Langsame Entscheidungen", "Erfahrene MA, kreative Aufgaben"],
            ["Laissez-faire", "MA entscheiden selbst", "Maximale Freiheit, Eigeninitiative", "Chaos möglich, wenig Kontrolle", "Hochqualifizierte Experten"],
          ]} />

        <SubHead color={C.green}>Führungsinstrumente</SubHead>
        <Bullet>Mitarbeitergespräche, Zielvereinbarungen, Feedbackgespräche</Bullet>
        <Bullet>Delegation, Job Rotation, Job Enlargement, Job Enrichment</Bullet>
        <Bullet>Leistungsbeurteilung, Potenzialanalyse</Bullet>

        <SubHead color={C.green}>Arbeitszeugnisse</SubHead>
        <TBL headers={["", "Einfaches Zeugnis", "Qualifiziertes Zeugnis"]}
          rows={[
            ["Inhalt", "Nur Art & Dauer der Tätigkeit", "Zusätzlich: Leistung, Verhalten, Sozialverhalten"],
            ["Wann?", "Jeder AN hat Anspruch", "Auf Verlangen des AN"],
            ["Wichtig", "Wahrheitspflicht", "Wohlwollend formuliert (Geheimcodes!)"],
          ]} />
        <Example title="Zeugnis-Geheimcode – Was wirklich gemeint ist">
          ⭐⭐⭐ „...stets zur vollsten Zufriedenheit..." = <strong style={{ color: C.green }}>Note 1 (sehr gut)</strong><br />
          ⭐⭐ „...stets zur vollen Zufriedenheit..." = <strong style={{ color: C.accent }}>Note 2 (gut)</strong><br />
          ⭐ „...zur vollen Zufriedenheit..." = Note 3 (befriedigend)<br />
          ⚠️ „...zur Zufriedenheit..." = Note 4 (ausreichend)<br />
          ❌ „...hat sich bemüht..." = <strong style={{ color: C.red }}>Note 6 (ungenügend!)</strong>
        </Example>

        <SubHead color={C.green}>Fluktuation minimieren</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Hohe Fluktuation (= viele MA gehen) ist teuer! So hält man gute Mitarbeiter:</p>
        <CardRow color={C.green} items={[
          { icon: "💰", title: "Faire Vergütung", desc: "Leistungsgerechte Bezahlung, Boni, Prämien" },
          { icon: "🌱", title: "Entwicklung", desc: "Weiterbildung, Aufstiegschancen, Karrierepfade" },
          { icon: "☀️", title: "Betriebsklima", desc: "Gute Atmosphäre, Teamevents, Wertschätzung" },
          { icon: "⚖️", title: "Work-Life-Balance", desc: "Flexible Arbeitszeit, Homeoffice, Teilzeit" },
        ]} />
        {sectionDone("5.4", "AS 5.4 – Personalführung verstanden")}
      </Section>
    </>)}

    {/* ═══════════════════════════════════════════════════
       HF 6: INVESTITION & FINANZIERUNG
       ═══════════════════════════════════════════════════ */}
    {(!activeHF || activeHF === 6) && (<>
      <HFHeader id={6} />

      <Section title="6.1 Finanzierungsarten im Überblick" emoji="🗂️" color={C.orange}>
        <Diagram title="Die 4 Felder der Finanzierung">
          <div style={{ display: "grid", gridTemplateColumns: "auto 1fr 1fr", gap: 6 }}>
            <div /><div style={{ textAlign: "center", fontWeight: 700, fontSize: 12, color: C.accent, padding: 6 }}>Innenfinanzierung<br /><span style={{ fontSize: 10, color: C.textDim }}>Geld kommt von innen</span></div>
            <div style={{ textAlign: "center", fontWeight: 700, fontSize: 12, color: C.pink, padding: 6 }}>Außenfinanzierung<br /><span style={{ fontSize: 10, color: C.textDim }}>Geld kommt von außen</span></div>
            <div style={{ background: `${C.green}20`, borderRadius: 8, padding: 8, fontSize: 12, fontWeight: 700, color: C.green, display: "flex", alignItems: "center", justifyContent: "center" }}>Eigen-<br />kapital</div>
            <div style={{ background: `${C.accent}10`, borderRadius: 8, padding: 10, border: `1px solid ${C.accent}25` }}><div style={{ fontSize: 13, fontWeight: 700, color: C.accent }}>Selbstfinanzierung</div><div style={{ fontSize: 11, color: C.textDim }}>Gewinne einbehalten (nicht ausschütten)</div></div>
            <div style={{ background: `${C.pink}10`, borderRadius: 8, padding: 10, border: `1px solid ${C.pink}25` }}><div style={{ fontSize: 13, fontWeight: 700, color: C.pink }}>Beteiligungsfinanzierung</div><div style={{ fontSize: 11, color: C.textDim }}>Neue Gesellschafter, Aktienemission</div></div>
            <div style={{ background: `${C.orange}20`, borderRadius: 8, padding: 8, fontSize: 12, fontWeight: 700, color: C.orange, display: "flex", alignItems: "center", justifyContent: "center" }}>Fremd-<br />kapital</div>
            <div style={{ background: `${C.accent}10`, borderRadius: 8, padding: 10, border: `1px solid ${C.accent}25` }}><div style={{ fontSize: 13, fontWeight: 700, color: C.accent }}>Umschichtung / Rückstellungen</div><div style={{ fontSize: 11, color: C.textDim }}>Alte Anlage verkaufen, Abschreibungsgegenwerte</div></div>
            <div style={{ background: `${C.pink}10`, borderRadius: 8, padding: 10, border: `1px solid ${C.pink}25` }}><div style={{ fontSize: 13, fontWeight: 700, color: C.pink }}>Kreditfinanzierung</div><div style={{ fontSize: 11, color: C.textDim }}>Bankdarlehen, Anleihen, Lieferantenkredit</div></div>
          </div>
        </Diagram>

        <SubHead color={C.orange}>Investitionsarten</SubHead>
        <TBL headers={["Art", "Zweck", "Beispiel"]}
          rows={[
            ["Gründungsinvestition", "Erstausstattung bei Unternehmensgründung", "Büroausstattung, erste Maschinen"],
            ["Ersatzinvestition", "Alte Anlage ersetzen (gleiche Kapazität)", "Defekter Drucker → neuer Drucker"],
            ["Erweiterungsinvestition", "Kapazität erhöhen", "Zweite Produktionslinie aufbauen"],
            ["Rationalisierungsinvestition", "Kosten senken / Effizienz steigern", "Roboter ersetzt Handarbeit"],
          ]} />

        <SubHead color={C.orange}>Finanzierungsziele & -regeln</SubHead>
        <Def term="Liquidität">Jederzeit zahlungsfähig sein (Rechnungen, Löhne, Miete)</Def>
        <Def term="Rentabilität">Das eingesetzte Kapital soll Gewinn bringen</Def>
        <Def term="Sicherheit">Risiko der Investition soll überschaubar sein</Def>
        <Formula label="Goldene Bilanzregel" formula="Anlagevermögen ≤ Eigenkapital + langfristiges Fremdkapital" note="= Langfristiges Vermögen muss langfristig finanziert sein!" />
        <Formula label="Goldene Finanzierungsregel (Fristenkongruenz)" formula="Kapitalbindungsdauer = Kapitalüberlassungsdauer" note="= Geld muss genauso lange verfügbar sein, wie es gebunden ist!" />
        <Example title="Beispiel Fristenkongruenz">
          ✅ Maschine (10 Jahre Nutzung) mit 10-Jahres-Darlehen finanziert → passt!<br />
          ❌ Maschine (10 Jahre Nutzung) mit Kontokorrentkredit (kurzfristig!) → GEFÄHRLICH!
        </Example>
      </Section>

      <Section title="6.2 Statische Investitionsrechnung" emoji="📊" color={C.orange}>
        <Warn>Statische Verfahren nutzen <strong>Durchschnittswerte</strong> pro Periode – sie berücksichtigen NICHT den Zeitwert des Geldes (100 € heute ≠ 100 € in 5 Jahren).</Warn>

        <SubHead color={C.orange}>1. Kostenvergleichsrechnung</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Fragt: <strong style={{ color: C.text }}>Welche Alternative verursacht die geringsten Kosten?</strong></p>
        <Formula formula="Gesamtkosten = Fixkosten + variable Kosten (= kv × Menge)" />
        <Formula formula="Fixkosten = Abschreibung + kalk. Zinsen + sonstige fixe Kosten" />
        <Formula label="Kalk. Zinsen" formula="Kalk. Zinsen = (Anschaffungskosten ÷ 2) × Zinssatz" note="Durch 2, weil im Durchschnitt nur die halbe Investitionssumme gebunden ist" />
        <Example title="Beispiel">
          <strong>Maschine A:</strong> AK 80.000 €, Nutzung 8 Jahre, variable Kosten 5 €/Stk, 10.000 Stk/Jahr, Zinssatz 6%<br />
          AfA = 80.000 ÷ 8 = 10.000 € · Kalk. Zinsen = 40.000 × 6% = 2.400 €<br />
          Fixkosten = 12.400 € · Variable = 50.000 €<br />
          <strong style={{ color: C.orange }}>Gesamtkosten = 62.400 €</strong><br /><br />
          <strong>Maschine B:</strong> AK 120.000 €, Nutzung 10 Jahre, variable Kosten 3,50 €/Stk<br />
          AfA = 12.000 € · Kalk. Zinsen = 60.000 × 6% = 3.600 €<br />
          Fixkosten = 15.600 € · Variable = 35.000 €<br />
          <strong style={{ color: C.green }}>Gesamtkosten = 50.600 € ✅ günstiger!</strong>
        </Example>

        <SubHead color={C.orange}>2. Gewinnvergleichsrechnung</SubHead>
        <Formula formula="Gewinn = Erlöse – Gesamtkosten" />
        <Tip>Nutze die Gewinnvergleichsrechnung, wenn die Alternativen <strong>unterschiedliche Erlöse</strong> erzielen (z.B. verschiedene Kapazitäten).</Tip>

        <SubHead color={C.orange}>3. Rentabilitätsrechnung</SubHead>
        <Formula formula="Rentabilität = (Gewinn ÷ durchschnittl. Kapitaleinsatz) × 100" />
        <Formula label="Durchschn. Kapitaleinsatz" formula="∅ Kapital = Anschaffungskosten ÷ 2" />
        <Example title="Beispiel">
          Gewinn: 8.000 € · AK: 60.000 € → ∅ Kapital = 30.000 €<br />
          Rentabilität = (8.000 ÷ 30.000) × 100 = <strong style={{ color: C.orange }}>26,7%</strong><br />
          → Vergleiche mit Marktzins: wenn Bankzins nur 4% → Investition lohnt sich!
        </Example>

        <SubHead color={C.orange}>4. Amortisationsrechnung</SubHead>
        <Formula formula="Amortisationszeit = Anschaffungskosten ÷ jährlicher Rückfluss" />
        <Formula label="Jährlicher Rückfluss" formula="Rückfluss = Gewinn + Abschreibungen" note="Abschreibungen sind kein Geldabfluss → werden zum Gewinn addiert" />
        <Example title="Beispiel">
          AK: 60.000 € · Gewinn: 8.000 €/Jahr · AfA: 12.000 €/Jahr<br />
          Rückfluss = 8.000 + 12.000 = 20.000 €<br />
          Amortisation = 60.000 ÷ 20.000 = <strong style={{ color: C.orange }}>3 Jahre</strong><br />
          → Nach 3 Jahren hat sich die Investition „bezahlt gemacht"
        </Example>
        {sectionDone("6.2", "Statische Investitionsrechnung verstanden")}
      </Section>

      <Section title="6.3 Fremdfinanzierung im Detail" emoji="🏦" color={C.orange}>
        <SubHead color={C.orange}>Darlehensarten</SubHead>
        <Diagram>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {[
              { name: "Fälligkeitsdarlehen", color: C.pink, desc: "Während der Laufzeit: NUR Zinsen zahlen. Am Ende: gesamte Tilgung auf einen Schlag!", rate: "Rate = nur Zinsen (konstant), dann BUMM! 💥", plus: "Niedrige laufende Belastung", minus: "Höchste Zinsbelastung insgesamt, Risiko am Ende" },
              { name: "Ratendarlehen", color: C.accent, desc: "Gleichbleibende Tilgung + sinkende Zinsen (weil Restschuld sinkt) = sinkende Gesamtrate", rate: "Rate wird immer kleiner 📉", plus: "Schnelle Tilgung, weniger Zinsen gesamt", minus: "Anfangs hohe Belastung" },
              { name: "Annuitätendarlehen", color: C.green, desc: "Immer die gleiche Rate (Annuität). Tilgungsanteil steigt, Zinsanteil sinkt über die Zeit.", rate: "Rate bleibt immer gleich 📏", plus: "Planbar! Beliebteste Form", minus: "Anfangs viel Zinsen, wenig Tilgung" },
            ].map(d => (
              <div key={d.name} style={{ flex: "1 1 200px", background: `${d.color}10`, border: `1px solid ${d.color}30`, borderRadius: 14, padding: 14 }}>
                <div style={{ fontSize: 14, fontWeight: 800, color: d.color, marginBottom: 6 }}>{d.name}</div>
                <div style={{ fontSize: 12, color: C.text, lineHeight: 1.5, marginBottom: 6 }}>{d.desc}</div>
                <div style={{ fontSize: 11, color: d.color, fontStyle: "italic", marginBottom: 6 }}>{d.rate}</div>
                <div style={{ fontSize: 11, color: C.textDim }}>✅ {d.plus}</div>
                <div style={{ fontSize: 11, color: C.textDim }}>❌ {d.minus}</div>
              </div>
            ))}
          </div>
        </Diagram>

        <SubHead color={C.orange}>Kurzfristige Fremdfinanzierung</SubHead>
        <TBL headers={["", "Lieferantenkredit", "Kontokorrentkredit"]}
          rows={[
            ["Was?", "Zahlungsziel nutzen (z.B. 30 Tage)", "Überziehungsrahmen auf dem Geschäftskonto"],
            ["Kosten", "Skontoverzicht = SEHR teuer!", "Hohe Zinsen (8-15% p.a.)"],
            ["Vorteil", "Automatisch, keine Beantragung", "Super flexibel, sofort verfügbar"],
            ["Nachteil", "Skontoverlust oft > Kreditzinsen", "Teuer bei dauerhafter Nutzung"],
          ]} />
        <Formula label="Effektivzins bei Skontoverzicht" formula="Effektivzins = (Skonto% ÷ (100% – Skonto%)) × (360 ÷ (Zahlungsziel – Skontofrist)) × 100" />
        <Example title="Beispiel: Skonto nutzen oder nicht?">
          Rechnung: 10.000 €, Zahlungsziel 30 Tage, 2% Skonto bei Zahlung in 10 Tagen<br /><br />
          Effektivzins wenn du Skonto <strong>NICHT</strong> nutzt:<br />
          = (2 ÷ 98) × (360 ÷ 20) × 100 = <strong style={{ color: C.red }}>36,7% p.a.!</strong><br /><br />
          Kontokorrentkredit der Bank: z.B. <strong style={{ color: C.green }}>12% p.a.</strong><br />
          → <strong>Immer Skonto mitnehmen!</strong> Lieber den Bankkredit nutzen – ist viel billiger! 💰
        </Example>

        <SubHead color={C.orange}>Kreditsicherheiten</SubHead>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", margin: "8px 0" }}>
          <div style={{ flex: "1 1 220px", background: `${C.accent}10`, border: `1px solid ${C.accent}25`, borderRadius: 14, padding: 14 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: C.accent, marginBottom: 6 }}>👤 Personensicherheiten</div>
            <Def term="Bürgschaft">Eine dritte Person haftet, wenn der Schuldner nicht zahlen kann</Def>
            <Bullet icon="•"><strong>Selbstschuldnerische:</strong> Bank kann sofort den Bürgen fordern</Bullet>
            <Bullet icon="•"><strong>Ausfallbürgschaft:</strong> Erst muss die Bank alles beim Schuldner versucht haben</Bullet>
          </div>
          <div style={{ flex: "1 1 220px", background: `${C.orange}10`, border: `1px solid ${C.orange}25`, borderRadius: 14, padding: 14 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: C.orange, marginBottom: 6 }}>🏠 Sachsicherheiten</div>
            <Def term="Grundschuld/Hypothek">Immobilie als Sicherheit (Grundbucheintrag)</Def>
            <Def term="Sicherungsübereignung">Bewegliche Sachen (Auto, Maschine) – Besitz bleibt beim Schuldner</Def>
            <Def term="Pfandrecht">Sache wird an Gläubiger übergeben (z.B. Pfandleiher)</Def>
          </div>
        </div>

        <SubHead color={C.orange}>Leasing vs. Kreditkauf</SubHead>
        <TBL headers={["Kriterium", "Leasing", "Kreditkauf"]}
          rows={[
            ["Eigentum?", "❌ Nein, nur Nutzung (Miete)", "✅ Ja, geht sofort/nach Tilgung über"],
            ["Bilanz", "Nicht im AV → bessere Bilanzkennzahlen", "Im AV → wird abgeschrieben"],
            ["Steuerlich", "Leasingraten = Betriebsausgabe", "AfA + Zinsen = Betriebsausgabe"],
            ["Gesamtkosten", "Oft teurer insgesamt", "Meist günstiger auf Gesamtdauer"],
            ["Flexibilität", "Am Ende: neues Modell möglich", "Eigentum bleibt dauerhaft"],
            ["Wann sinnvoll?", "Schneller Wertverlust (IT, Fahrzeuge)", "Langfristige Nutzung (Gebäude, Maschinen)"],
          ]} />
        {sectionDone("6.3", "AS 6.1 – Investition & Finanzierung komplett")}
      </Section>
    </>)}

    {/* ═══════════════════════════════════════════════════
       HF 7: WERTSTRÖME
       ═══════════════════════════════════════════════════ */}
    {(!activeHF || activeHF === 7) && (<>
      <HFHeader id={7} />

      <Section title="7.1 Jahresabschluss & Bilanz" emoji="📋" color={C.purple}>
        <SubHead color={C.purple}>Was ist der Jahresabschluss?</SubHead>
        <Def term="Jahresabschluss">Zusammenfassung aller Geschäftsvorfälle eines Geschäftsjahres. Er zeigt: Wie steht das Unternehmen finanziell da?</Def>
        <Bullet><strong>Bestandteile:</strong> Bilanz + GuV (Gewinn- und Verlustrechnung)</Bullet>
        <Bullet>Bei <strong>Kapitalgesellschaften</strong> (GmbH, AG) zusätzlich: <strong>Anhang</strong> + <strong>Lagebericht</strong></Bullet>
        <Bullet><strong>Aufgaben:</strong> Information (Gesellschafter, Gläubiger, Finanzamt), Dokumentation, Gewinnermittlung, Besteuerung</Bullet>

        <SubHead color={C.purple}>Bilanzaufbau – Das große Bild</SubHead>
        <Diagram title="Bilanz = Foto des Unternehmens an einem Stichtag (z.B. 31.12.)">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3 }}>
            <div style={{ background: `${C.accent}18`, borderRadius: "14px 0 0 0", padding: 14, borderRight: `2px solid ${C.border}` }}>
              <div style={{ fontWeight: 900, color: C.accent, fontSize: 15 }}>AKTIVA</div>
              <div style={{ fontSize: 11, color: C.textDim }}>Wo steckt das Geld? (Mittelverwendung)</div>
            </div>
            <div style={{ background: `${C.purple}18`, borderRadius: "0 14px 0 0", padding: 14 }}>
              <div style={{ fontWeight: 900, color: C.purple, fontSize: 15 }}>PASSIVA</div>
              <div style={{ fontSize: 11, color: C.textDim }}>Woher kommt das Geld? (Mittelherkunft)</div>
            </div>
            <div style={{ background: `${C.accent}08`, padding: 12, borderRight: `2px solid ${C.border}` }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.accent }}>A. Anlagevermögen 🏭</div>
              <div style={{ fontSize: 11, color: C.textDim, paddingLeft: 8, lineHeight: 1.6 }}>I. Immaterielle VG (Lizenzen, Software)<br />II. Sachanlagen (Grundstücke, Gebäude, Maschinen, BGA, Fuhrpark)<br />III. Finanzanlagen (Beteiligungen, Wertpapiere AV)</div>
            </div>
            <div style={{ background: `${C.purple}08`, padding: 12 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.green }}>A. Eigenkapital 💪</div>
              <div style={{ fontSize: 11, color: C.textDim, paddingLeft: 8, lineHeight: 1.6 }}>I. Gezeichnetes Kapital (Stammkapital)<br />II. Kapitalrücklagen<br />III. Gewinnrücklagen<br />IV. Gewinn-/Verlustvortrag<br />V. Jahresüberschuss/-fehlbetrag</div>
            </div>
            <div style={{ background: `${C.accent}08`, borderRadius: "0 0 0 14px", padding: 12, borderRight: `2px solid ${C.border}` }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.accent }}>B. Umlaufvermögen 🔄</div>
              <div style={{ fontSize: 11, color: C.textDim, paddingLeft: 8, lineHeight: 1.6 }}>I. Vorräte (RHB, unfertige/fertige Erzeugnisse, Waren)<br />II. Forderungen aLuL<br />III. Wertpapiere UV<br />IV. Kasse, Bank, Schecks</div>
            </div>
            <div style={{ background: `${C.purple}08`, borderRadius: "0 0 14px 0", padding: 12 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.orange }}>B. Rückstellungen</div>
              <div style={{ fontSize: 11, color: C.textDim, paddingLeft: 8 }}>(ungewisse Verbindlichkeiten, z.B. Prozesskosten)</div>
              <div style={{ fontSize: 13, fontWeight: 700, color: C.pink, marginTop: 8 }}>C. Verbindlichkeiten 📑</div>
              <div style={{ fontSize: 11, color: C.textDim, paddingLeft: 8, lineHeight: 1.6 }}>Langfristig: Bankdarlehen<br />Kurzfristig: Verb. aLL, Verb. ggü. Finanzamt/SV</div>
            </div>
          </div>
          <div style={{ textAlign: "center", marginTop: 10, fontSize: 14, fontWeight: 800, color: C.text }}>Summe Aktiva = Summe Passiva (IMMER!)</div>
        </Diagram>

        <SubHead color={C.purple}>Bewertungsvorschriften</SubHead>
        <Bullet><strong>Anschaffungskosten:</strong> Kaufpreis + Nebenkosten (Transport, Montage) – Preisminderungen (Rabatt, Skonto)</Bullet>
        <Bullet><strong>Niederstwertprinzip (Aktiva):</strong> Beim AV darf man nur bei dauerhafter Wertminderung abschreiben. Beim UV muss zum niedrigsten Wert bewertet werden (Vorsichtsprinzip!)</Bullet>
        <Bullet><strong>Höchstwertprinzip (Passiva):</strong> Schulden immer zum höchsten in Frage kommenden Betrag ansetzen</Bullet>

        {sectionDone("7.1a", "Jahresabschluss & Bilanzaufbau verstanden")}
      </Section>

      <Section title="7.2 Abschreibungen" emoji="📉" color={C.purple}>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Anlagen (Maschinen, Fahrzeuge, BGA) verlieren mit der Zeit an Wert. Diesen <strong style={{ color: C.text }}>Wertverlust</strong> erfassen wir buchhalterisch als <strong style={{ color: C.text }}>Abschreibung (AfA = Absetzung für Abnutzung)</strong>.</p>
        <Formula label="Lineare Abschreibung (gleichmäßig)" formula="Jährliche AfA = Anschaffungskosten ÷ Nutzungsdauer" />
        <Formula label="AfA-Satz in Prozent" formula="AfA-Satz = 100% ÷ Nutzungsdauer" />

        <Example title="Vollständiges Beispiel">
          LKW: Kaufpreis 80.000 € + 2.000 € Überführung – 2.000 € Rabatt = <strong>80.000 € AK</strong><br />
          Nutzungsdauer: <strong>8 Jahre</strong><br /><br />
          AfA pro Jahr = 80.000 ÷ 8 = <strong style={{ color: C.purple }}>10.000 €</strong><br />
          AfA-Satz = 100% ÷ 8 = <strong>12,5%</strong><br /><br />
          <strong>Buchung am Jahresende:</strong><br />
          <strong style={{ color: C.purple }}>Abschreibungen auf Sachanlagen 10.000 €</strong><br />
          &nbsp;&nbsp;an <strong style={{ color: C.pink }}>Fuhrpark 10.000 €</strong><br /><br />
          <strong>Buchwerte über die Jahre:</strong><br />
          Jahr 1: 70.000 € → Jahr 2: 60.000 € → ... → Jahr 8: 0 € (= voll abgeschrieben)
        </Example>
        {sectionDone("7.2", "Abschreibungen verstanden")}
      </Section>

      <Section title="7.3 Bilanzkennziffern" emoji="🔢" color={C.purple}>
        <p style={{ fontSize: 13.5, color: C.textDim, marginBottom: 10 }}>Mit Kennziffern analysierst du die wirtschaftliche Lage eines Unternehmens – wie ein Arzt, der den Patienten durchleuchtet! 🩺</p>

        <SubHead color={C.accent}>Vermögens- & Kapitalstruktur</SubHead>
        <Formula label="Anlagenquote (wie viel % steckt langfristig fest?)" formula="Anlagenquote = (Anlagevermögen ÷ Gesamtvermögen) × 100" />
        <Formula label="Umlaufquote" formula="Umlaufquote = (Umlaufvermögen ÷ Gesamtvermögen) × 100" />
        <Formula label="Eigenkapitalquote (je höher, desto sicherer/unabhängiger)" formula="EK-Quote = (Eigenkapital ÷ Gesamtkapital) × 100" note="Richtwert: > 30% gilt als solide" />
        <Formula label="Fremdkapitalquote" formula="FK-Quote = (Fremdkapital ÷ Gesamtkapital) × 100" />
        <Formula label="Verschuldungsgrad" formula="Verschuldungsgrad = (Fremdkapital ÷ Eigenkapital) × 100" note="< 200% gilt als unbedenklich" />

        <SubHead color={C.green}>Liquidität – Kann das Unternehmen seine Rechnungen zahlen?</SubHead>
        <TBL headers={["Grad", "Formel", "Was wird verglichen?", "Richtwert"]}
          rows={[
            ["1. Grad\n(Barliquidität)", "Flüssige Mittel ÷ kurzfr. Verb. × 100", "Nur Kasse + Bank", "> 20%"],
            ["2. Grad\n(Quick Ratio)", "(Flüss. Mittel + Ford.) ÷ kurzfr. Verb. × 100", "+ kurzfristige Forderungen", "> 100%"],
            ["3. Grad\n(Current Ratio)", "Umlaufvermögen ÷ kurzfr. Verb. × 100", "Gesamtes UV", "> 120%"],
          ]} />
        <Example title="Beispiel Liquiditätsanalyse">
          Kasse/Bank: <strong>30.000 €</strong> · Forderungen: <strong>70.000 €</strong> · Vorräte: <strong>50.000 €</strong> · kurzfr. Verb.: <strong>80.000 €</strong><br /><br />
          Liq. 1. Grades = 30.000 ÷ 80.000 × 100 = <strong style={{ color: C.orange }}>37,5%</strong> ✅ (über 20%)<br />
          Liq. 2. Grades = 100.000 ÷ 80.000 × 100 = <strong style={{ color: C.green }}>125%</strong> ✅ (über 100%)<br />
          Liq. 3. Grades = 150.000 ÷ 80.000 × 100 = <strong style={{ color: C.green }}>187,5%</strong> ✅ (über 120%)<br /><br />
          → Alle drei Werte im grünen Bereich – das Unternehmen ist zahlungsfähig! ✅
        </Example>

        <SubHead color={C.orange}>Rentabilität – Lohnt sich der Einsatz?</SubHead>
        <Formula label="Eigenkapitalrentabilität" formula="EK-Rent. = (Gewinn ÷ Eigenkapital) × 100" note="Sollte über dem Marktzins liegen, sonst besser Geld zur Bank!" />
        <Formula label="Gesamtkapitalrentabilität" formula="GK-Rent. = ((Gewinn + FK-Zinsen) ÷ Gesamtkapital) × 100" note="Zeigt die Effizienz des gesamten Kapitaleinsatzes" />
        <Formula label="Umsatzrentabilität" formula="Umsatz-Rent. = (Gewinn ÷ Umsatzerlöse) × 100" note="Wie viel Cent Gewinn pro Euro Umsatz?" />
        <Example title="Beispiel">
          EK: 200.000 € · FK: 300.000 € · Gewinn: 40.000 € · FK-Zinsen: 15.000 € · Umsatz: 800.000 €<br /><br />
          EK-Rent. = 40.000 ÷ 200.000 × 100 = <strong style={{ color: C.orange }}>20%</strong><br />
          GK-Rent. = 55.000 ÷ 500.000 × 100 = <strong>11%</strong><br />
          Umsatz-Rent. = 40.000 ÷ 800.000 × 100 = <strong>5%</strong> (= 5 Cent Gewinn pro Euro Umsatz)
        </Example>
        {sectionDone("7.3", "Bilanzkennziffern verstanden")}
      </Section>

      <Section title="7.4 Kosten- & Leistungsrechnung (KLR)" emoji="🧾" color={C.purple}>
        <SubHead color={C.purple}>Warum KLR?</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Die <strong style={{ color: C.text }}>Finanzbuchhaltung (FiBu)</strong> erfasst alle Geschäftsvorfälle für externe Zwecke (Finanzamt, Gläubiger). Die <strong style={{ color: C.text }}>KLR</strong> ist ein <strong style={{ color: C.text }}>internes</strong> Werkzeug für:</p>
        <Bullet>Preiskalkulation: Was muss das Produkt kosten?</Bullet>
        <Bullet>Wirtschaftlichkeitskontrolle: Arbeiten wir effizient?</Bullet>
        <Bullet>Entscheidungsgrundlage: Make-or-Buy, Annahme von Zusatzaufträgen, Preisuntergrenzen</Bullet>

        <SubHead color={C.purple}>Aufwand ≠ Kosten – Die Abgrenzung</SubHead>
        <Diagram>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", justifyContent: "center" }}>
            {[
              { t: "Neutraler Aufwand", color: C.pink, icon: "❌", sub: "= Aufwand, aber KEINE Kosten", items: ["Betriebsfremd: Spende, Miete Privathaus", "Periodenfremd: Steuernachzahlung Vorjahr", "Außerordentlich: Brandschaden, Diebstahl"] },
              { t: "Zweckaufwand = Grundkosten", color: C.green, icon: "✅", sub: "= Aufwand UND Kosten", items: ["Materialverbrauch", "Löhne & Gehälter", "Abschreibungen (planmäßig)", "Miete für Betriebsräume"] },
              { t: "Kalkulatorische Kosten", color: C.accent, icon: "🔄", sub: "= Kosten, aber KEIN Aufwand", items: ["Kalk. Unternehmerlohn (Einzelunternehmer)", "Kalk. Miete (eigenes Gebäude)", "Kalk. Zinsen (auf EK)", "Kalk. Abschreibung (Wiederbeschaffung)"] },
            ].map(item => (
              <div key={item.t} style={{ flex: "1 1 180px", background: `${item.color}10`, border: `1px solid ${item.color}30`, borderRadius: 14, padding: 14 }}>
                <div style={{ fontSize: 22 }}>{item.icon}</div>
                <div style={{ fontSize: 13, fontWeight: 700, color: item.color }}>{item.t}</div>
                <div style={{ fontSize: 11, color: item.color, marginBottom: 6 }}>{item.sub}</div>
                {item.items.map((it, i) => <div key={i} style={{ fontSize: 11, color: C.textDim, lineHeight: 1.5 }}>• {it}</div>)}
              </div>
            ))}
          </div>
        </Diagram>

        <SubHead color={C.purple}>Kostenarten: Einzel- vs. Gemeinkosten</SubHead>
        <TBL headers={["", "Einzelkosten", "Gemeinkosten"]}
          rows={[
            ["Definition", "Direkt einem Produkt zurechenbar", "Nicht direkt zurechenbar → Verteilung nötig"],
            ["Beispiel", "Fertigungsmaterial, Fertigungslöhne", "Miete, Strom, Gehalt Geschäftsführer, Heizung"],
            ["Verrechnung", "Direkt auf Kostenträger", "Über Zuschlagssätze (BAB)"],
          ]} />

        <SubHead color={C.purple}>3 Stufen der KLR</SubHead>
        <Diagram>
          <FlowBox text="① KOSTENARTENRECHNUNG" color={C.accent} />
          <div style={{ textAlign: "center", fontSize: 12, color: C.textDim, margin: "4px 0" }}>WELCHE Kosten? → Material, Personal, Abschreibungen, Zinsen, Miete...</div>
          <FlowArrow />
          <FlowBox text="② KOSTENSTELLENRECHNUNG (BAB)" color={C.green} />
          <div style={{ textAlign: "center", fontSize: 12, color: C.textDim, margin: "4px 0" }}>WO entstanden? → Materiallager, Fertigung, Verwaltung, Vertrieb</div>
          <div style={{ textAlign: "center", fontSize: 11, color: C.green, margin: "2px 0" }}>→ Gemeinkosten werden über den BAB auf Kostenstellen verteilt</div>
          <div style={{ textAlign: "center", fontSize: 11, color: C.green, margin: "2px 0" }}>→ Dann GK-Zuschlagssätze berechnen: z.B. MGK-Zuschlag = (MGK ÷ Fertigungsmaterial) × 100</div>
          <FlowArrow />
          <FlowBox text="③ KOSTENTRÄGERRECHNUNG (Kalkulation)" color={C.orange} />
          <div style={{ textAlign: "center", fontSize: 12, color: C.textDim, margin: "4px 0" }}>WOFÜR? → Wie teuer ist EIN Produkt? → Zuschlagskalkulation</div>
        </Diagram>

        <SubHead color={C.purple}>Zuschlagskalkulation (Vollkostenrechnung)</SubHead>
        <Diagram title="Vom Fertigungsmaterial zum Listenverkaufspreis">
          <FlowBox text="Fertigungsmaterial (Einzelkosten)" color={C.textDim} />
          <FlowArrow label="+ Materialgemeinkosten (MGK-Zuschlag %)" />
          <FlowBox text="= Materialkosten" color={C.accent} />
          <FlowArrow label="+ Fertigungslöhne (Einzelkosten)" />
          <FlowArrow label="+ Fertigungsgemeinkosten (FGK-Zuschlag %)" />
          <FlowBox text="= Fertigungskosten" color={C.accent} />
          <div style={{ textAlign: "center", fontSize: 11, color: C.textMuted }}>Materialkosten + Fertigungskosten =</div>
          <FlowBox text="= Herstellkosten" color={C.green} bg={C.greenDim} />
          <FlowArrow label="+ Verwaltungsgemeinkosten (VwGK-Zuschlag %)" />
          <FlowArrow label="+ Vertriebsgemeinkosten (VtGK-Zuschlag %)" />
          <FlowBox text="= Selbstkosten" color={C.orange} bg={C.orangeDim} />
          <FlowArrow label="+ Gewinnzuschlag %" />
          <FlowBox text="= Barverkaufspreis" color={C.textDim} />
          <FlowArrow label="+ Kundenskonto (im Hundert!)" />
          <FlowBox text="= Zielverkaufspreis" color={C.textDim} />
          <FlowArrow label="+ Kundenrabatt (im Hundert!)" />
          <FlowBox text="= Listenverkaufspreis (netto)" color={C.pink} bg={C.pinkDim} />
          <FlowArrow label="+ 19% Umsatzsteuer" />
          <FlowBox text="= Bruttoverkaufspreis" color={C.pink} />
        </Diagram>

        <Example title="Beispiel Zuschlagskalkulation">
          <div style={{ fontFamily: "monospace", fontSize: 13, lineHeight: 1.9 }}>
            Fertigungsmaterial:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200,00 €<br />
            <span style={{ color: C.accent }}>+ MGK (20% von 200):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 40,00 €</span><br />
            = Materialkosten:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;240,00 €<br />
            Fertigungslöhne:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100,00 €<br />
            <span style={{ color: C.accent }}>+ FGK (150% von 100):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;150,00 €</span><br />
            = Fertigungskosten:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;250,00 €<br />
            = <strong>Herstellkosten:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;490,00 €</strong><br />
            <span style={{ color: C.accent }}>+ VwGK (10%):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 49,00 €</span><br />
            <span style={{ color: C.accent }}>+ VtGK (5%):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 24,50 €</span><br />
            = <strong>Selbstkosten:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;563,50 €</strong><br />
            <span style={{ color: C.green }}>+ Gewinn (15%):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 84,53 €</span><br />
            = Barverkaufspreis:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;648,03 €<br />
            + Skonto (2% im Hundert):&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 13,22 €<br />
            = Zielverkaufspreis:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;661,25 €<br />
            + Rabatt (10% im Hundert):&nbsp;&nbsp;&nbsp;&nbsp; 73,47 €<br />
            = <strong style={{ color: C.pink }}>Listenverkaufspreis:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;734,72 € (netto)</strong>
          </div>
        </Example>
        <Warn><strong>Im Hundert rechnen</strong> bei Skonto & Rabatt! Weil der Kunde von einem höheren Preis abzieht. Formel: Aufschlag = Betrag × Prozentsatz ÷ (100 – Prozentsatz)</Warn>

        <SubHead color={C.purple}>Teilkostenrechnung (Deckungsbeitragsrechnung)</SubHead>
        <p style={{ fontSize: 13.5, color: C.textDim }}>Anders als die Vollkostenrechnung werden hier <strong style={{ color: C.text }}>nur die variablen Kosten</strong> auf das Produkt verrechnet. Die Fixkosten werden als Block vom Gesamtergebnis abgezogen.</p>

        <Formula label="Deckungsbeitrag pro Stück" formula="DB = Verkaufspreis – variable Stückkosten" note="= Was bleibt übrig, um Fixkosten zu decken und Gewinn zu machen?" />
        <Formula label="Betriebsergebnis" formula="Betriebsergebnis = Σ aller DB – gesamte Fixkosten" />
        <Formula label="Break-even (Gewinnschwelle)" formula="Break-even-Menge = Fixkosten ÷ DB pro Stück" note="= Ab welcher Stückzahl machen wir keinen Verlust mehr?" />

        <Example title="Beispiel Break-even">
          Verkaufspreis: <strong>50 €/Stk</strong> · Variable Kosten: <strong>30 €/Stk</strong> · Fixkosten: <strong>10.000 €/Monat</strong><br /><br />
          DB = 50 – 30 = <strong>20 € pro Stück</strong><br />
          Break-even = 10.000 ÷ 20 = <strong style={{ color: C.purple }}>500 Stück</strong><br /><br />
          <strong>Bedeutung:</strong><br />
          • Bei 400 Stk: Ergebnis = 400 × 20 – 10.000 = <strong style={{ color: C.red }}>–2.000 € (Verlust!)</strong><br />
          • Bei 500 Stk: Ergebnis = 500 × 20 – 10.000 = <strong>0 € (Break-even)</strong><br />
          • Bei 700 Stk: Ergebnis = 700 × 20 – 10.000 = <strong style={{ color: C.green }}>+4.000 € (Gewinn! 🎉)</strong>
        </Example>

        <SubHead color={C.purple}>Preisuntergrenzen</SubHead>
        <TBL headers={["", "Kurzfristige PUG", "Langfristige PUG"]}
          rows={[
            ["= ?", "Variable Stückkosten", "Selbstkosten pro Stück"],
            ["Warum?", "Solange Preis > var. Kosten → DB positiv → Fixkosten-Beitrag", "Alle Kosten müssen langfristig gedeckt sein"],
            ["Wann?", "Sonderaufträge, Kapazität nicht ausgelastet", "Dauerhafter Normalpreis"],
          ]} />
        <Example title="Beispiel Preisuntergrenze">
          Variable Kosten: <strong>30 €/Stk</strong> · Selbstkosten: <strong>45 €/Stk</strong><br /><br />
          → Ein Kunde bietet einen Großauftrag für <strong>35 €/Stk</strong> an.<br />
          → Kurzfristige PUG: 30 € → <strong style={{ color: C.green }}>Ja, annehmen! DB = 5 €</strong> (hilft Fixkosten zu decken!)<br />
          → Langfristig darf der Preis aber nicht unter 45 € fallen.
        </Example>

        <SubHead color={C.purple}>Voll- vs. Teilkostenrechnung</SubHead>
        <TBL headers={["Kriterium", "Vollkostenrechnung", "Teilkostenrechnung"]}
          rows={[
            ["Verrechnet", "Alle Kosten (fix + variabel)", "Nur variable Kosten"],
            ["Fixkosten", "Werden auf Produkte verteilt (anteilig)", "Werden als Block abgezogen"],
            ["Preisuntergrenze", "Langfristig = Selbstkosten", "Kurzfristig = variable Kosten"],
            ["Vorteil", "Alle Kosten gedeckt, vollständige Kalkulation", "Zeigt echten Produktbeitrag, flexible Entscheidungen"],
            ["Nachteil", "Fixkostenschlüsselung ist oft willkürlich", "Fixkosten werden ignoriert → Gefahr"],
            ["Anwendung", "Langfristige Preiskalkulation", "Kurzfristige Entscheidungen, Zusatzaufträge"],
          ]} />

        <SubHead color={C.purple}>Nachhaltigkeit in der KLR</SubHead>
        <Bullet><strong>Ökobilanz:</strong> Erfassung der Umweltauswirkungen eines Produkts über den gesamten Lebenszyklus (Rohstoffe → Produktion → Nutzung → Entsorgung)</Bullet>
        <Bullet><strong>Umweltaudit:</strong> Freiwillige Überprüfung und Zertifizierung des betrieblichen Umweltschutzes (z.B. EMAS, ISO 14001)</Bullet>
        <Bullet>Diese Aspekte können in die KLR integriert werden, z.B. als Umweltkosten oder CO₂-Bepreisung</Bullet>

        {sectionDone("7.4", "AS 7.1 – KLR komplett verstanden")}
      </Section>
    </>)}

    {/* ─── FOOTER ─── */}
    <div style={{ textAlign: "center", padding: "30px 0 40px", borderTop: `1px solid ${C.border}`, marginTop: 24 }}>
      <div style={{ fontSize: 20, marginBottom: 6 }}>🍀</div>
      <div style={{ fontSize: 14, color: C.text, fontWeight: 600 }}>Viel Erfolg bei der Vorklausur!</div>
      <div style={{ fontSize: 12, color: C.textMuted, marginTop: 6 }}>bwl.cookietv.de · Handlungsfelder 2, 5, 6 & 7 · HöHa NRW</div>
      <div style={{ fontSize: 11, color: C.textMuted, marginTop: 2 }}>Basiert auf dem offiziellen Bildungsplan NRW (2018)</div>
    </div>
  </div>
</div>
```

);
}