/* Startseite der Lehrmanufaktur – Farben wie Fachseiten/Generator (Navy, Gold), Schriften Bricolage Grotesque + Inter (lokal).
   Hell/dunkel per System oder per Wahl (theme.js setzt data-theme). Keine externen Ressourcen. */
:root {
  --bg:#eef2f7; --karte:#fff; --text:#0e1e30; --leise:#56677c; --rand:#d9e2ec; --akzent:#0f6c9c; --gold:#e2ad3f; --gold-hell:#f3cd70;
  --navy:#0b2a45; --navy-tief:#061826; --schatten:0 18px 40px -22px rgba(8,29,51,.45); color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#07121e; --karte:#0e1c2c; --text:#e6edf5; --leise:#8fa2b8; --rand:#1f3349; --akzent:#4fb3e0;
    --schatten:0 18px 40px -22px rgba(0,0,0,.8); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg:#07121e; --karte:#0e1c2c; --text:#e6edf5; --leise:#8fa2b8; --rand:#1f3349; --akzent:#4fb3e0;
  --schatten:0 18px 40px -22px rgba(0,0,0,.8); color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.6 "Inter", system-ui, sans-serif; }
a { color:var(--akzent); }
h1, h2, h3 { font-family:"Bricolage Grotesque", "Inter", sans-serif; letter-spacing:-.02em; }

/* Kopf */
.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:10px max(20px, calc(50% - 570px));
  background:rgba(6,24,38,.92); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08); }
.marke { display:flex; align-items:center; gap:10px; color:#e6edf5; text-decoration:none; margin-right:auto; }
.marke strong { display:block; font:800 1.15rem/1.1 "Bricolage Grotesque", sans-serif; }
.marke small { display:block; color:#9fb6c9; font-size:.78rem; }
.kopf-nav { display:flex; align-items:center; gap:6px; }
.kopf-nav a { color:#d7e4ef; text-decoration:none; font-weight:600; font-size:.92rem; padding:8px 12px; border-radius:10px; }
.kopf-nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.kopf-nav a.kopf-knopf { background:linear-gradient(180deg, var(--gold-hell), var(--gold)); color:var(--navy); }
.kopf-nav a:focus-visible, .knopf:focus-visible, .fach:focus-visible { outline:3px solid var(--gold-hell); outline-offset:3px; }

/* Bühne */
.buehne { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:40px; align-items:center;
  padding:72px max(20px, calc(50% - 570px)) 84px; color:#e6edf5;
  background:radial-gradient(1200px 500px at 85% -10%, rgba(15,108,156,.45), transparent 60%), linear-gradient(170deg, #0b2a45, #061826 70%); }
.schein { position:absolute; inset:auto -10% -40% 40%; height:420px; background:radial-gradient(closest-side, rgba(240,199,102,.18), transparent); pointer-events:none; }
.kicker { display:inline-block; margin:0 0 18px; padding:6px 12px; border-radius:999px; font-size:.8rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-hell); background:rgba(240,199,102,.1); border:1px solid rgba(240,199,102,.28); }
.buehne h1 { margin:0; font-size:clamp(2.2rem, 5.2vw, 3.6rem); line-height:1.05; font-weight:800; }
.buehne h1 span { color:var(--gold-hell); }
.lead { max-width:560px; margin:20px 0 28px; font-size:1.1rem; color:#c4d3e1; }
.aktionen { display:flex; flex-wrap:wrap; gap:12px; }
.knopf { display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:12px; font-weight:700; text-decoration:none;
  color:var(--navy); background:linear-gradient(180deg, var(--gold-hell), var(--gold)); box-shadow:0 10px 26px -12px rgba(226,173,63,.9); }
.knopf svg { width:20px; height:20px; }
.knopf:hover { filter:brightness(1.05); }
.knopf.zweit { color:#e6edf5; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); box-shadow:none; }

/* Werkbank (Schaubild rechts) */
.werkbank { position:relative; height:380px; }
.blatt { position:absolute; left:4%; top:0; width:62%; padding:16px 16px 12px; border-radius:14px; background:#f8fafc; color:#0e1e30;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.8); transform:rotate(-4deg); }
.blatt-kopf { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:.82rem; }
.siegel { padding:2px 7px; border-radius:6px; background:var(--navy); color:var(--gold-hell); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.zeile { display:flex; align-items:center; gap:8px; margin:7px 0; }
.zeile i { width:16px; height:14px; border:1px solid #9aabbd; border-radius:3px; font:700 .62rem/12px "Inter", sans-serif; text-align:center; font-style:normal; color:#33475b; }
.zeile span { flex:1; height:7px; border-radius:4px; background:#d6dfe8; }
.zeile.kurz span { flex:.6; }
.graph { width:100%; height:auto; margin:6px 0; color:#7d8fa3; }
.video { position:absolute; right:0; top:46%; width:58%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; transform:rotate(3deg);
  background:linear-gradient(135deg, #12344f, #0a1c2c 60%), #0b2a45; box-shadow:0 30px 60px -26px rgba(0,0,0,.9); border:1px solid rgba(255,255,255,.12); }
.folge { position:absolute; right:10px; top:10px; display:flex; flex-direction:column; align-items:center; padding:4px 9px; border-radius:8px;
  background:var(--gold-hell); color:var(--navy); font:700 .55rem/1.1 "Inter", sans-serif; letter-spacing:.08em; }
.folge b { font:800 1.05rem/1 "Bricolage Grotesque", sans-serif; letter-spacing:0; }
.play { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:var(--navy); }
.play svg { width:22px; height:22px; margin-left:3px; }
.video-titel { position:absolute; left:12px; bottom:10px; font:800 1rem/1.1 "Bricolage Grotesque", sans-serif; color:#fff; }
.karte-mini { position:absolute; left:0; bottom:0; width:36%; height:120px; display:flex; align-items:flex-end; gap:8px; padding:14px 14px 26px;
  border-radius:14px; background:#fffdf6; box-shadow:0 24px 50px -26px rgba(0,0,0,.85); transform:rotate(2deg); }
.balken { flex:1; height:var(--h); border-radius:4px 4px 0 0; background:#9ebdd4; }
.balken.gold { background:var(--gold); }
.karte-mini small { position:absolute; left:14px; bottom:6px; font-size:.68rem; color:#56677c; font-weight:600; }

/* Abschnitte */
.faecher, .generator, .qualitaet { max-width:1140px; margin:0 auto; padding:72px 20px 0; }
.abschnitt-kopf { max-width:720px; margin-bottom:26px; }
.abschnitt-kicker { margin:0 0 6px; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--akzent); }
.abschnitt-kicker.gold { color:var(--gold-hell); }
h2 { margin:0; font-size:clamp(1.6rem, 3.2vw, 2.2rem); line-height:1.15; }
.abschnitt-kopf p:not(.abschnitt-kicker) { color:var(--leise); margin:10px 0 0; }

.fach-raster { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.fach { display:flex; flex-direction:column; gap:6px; padding:22px; border-radius:18px; background:var(--karte); border:1px solid var(--rand);
  color:var(--text); text-decoration:none; box-shadow:var(--schatten); transition:transform .2s, border-color .2s; }
.fach:hover { transform:translateY(-3px); border-color:var(--akzent); }
.fach h3 { margin:6px 0 0; font-size:1.3rem; }
.fach p { margin:0; color:var(--leise); font-size:.94rem; flex:1; }
.fach-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(160deg, #0e4a66, #0b2a45); }
.fach-icon svg { width:24px; height:24px; fill:none; stroke:var(--gold-hell); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.fach-weiter { margin-top:8px; font-weight:700; font-size:.9rem; color:var(--akzent); }
.fach-weiter::after { content:" →"; }
.fach.leise { border-style:dashed; }   /* „im Aufbau“: gestrichelt statt blass (axe: Kontrast, 06.10.2026) */
@media (prefers-reduced-motion: reduce) { .fach { transition:none; } .fach:hover { transform:none; } }

.generator { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:32px; align-items:center; margin-top:72px; padding:40px;
  border-radius:24px; color:#e6edf5; background:radial-gradient(700px 300px at 100% 0, rgba(240,199,102,.16), transparent 60%), linear-gradient(160deg, #0b2a45, #061826); }
.generator h2 { color:#fff; }
.gen-text p:not(.abschnitt-kicker) { color:#c4d3e1; margin:12px 0 22px; }
.arten { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.arten li { padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.arten b { display:block; color:#fff; }
.arten span { font-size:.84rem; color:#9fb6c9; }

.strecke { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; counter-reset:none; }
.strecke li { position:relative; padding:20px; border-radius:16px; background:var(--karte); border:1px solid var(--rand); color:var(--leise); font-size:.94rem; }
.strecke b { display:block; margin:8px 0 4px; color:var(--text); font:800 1.15rem/1.2 "Bricolage Grotesque", sans-serif; }
.nr { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--navy); color:var(--gold-hell); font-weight:800; }

.fuss { max-width:1140px; margin:72px auto 0; padding:24px 20px 40px; display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  color:var(--leise); font-size:.9rem; border-top:1px solid var(--rand); }
.fuss nav { display:flex; gap:18px; }
.fuss a { color:var(--leise); }

/* Tablet und Handy */
@media (max-width: 980px) {
  .buehne { grid-template-columns:minmax(0, 1fr); padding-top:48px; }
  .werkbank { height:320px; max-width:520px; }
  .fach-raster { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .generator { grid-template-columns:minmax(0, 1fr); padding:28px; }
  .strecke { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .marke small { display:none; }
  .kopf-nav a:not(.kopf-knopf) { display:none; }
  .buehne { padding:36px 16px 56px; }
  .werkbank { height:260px; }
  .video-titel { font-size:.85rem; }
  .fach-raster, .strecke { grid-template-columns:minmax(0, 1fr); }
  .arten li { padding:10px 12px; }
  .faecher, .qualitaet { padding:56px 16px 0; }
  .generator { margin:56px 16px 0; padding:24px 18px; }
}