/* 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 strong em { font-style:normal; color:var(--gold-hell); }
.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-knopf .kurz { display:none; }
.kopf-nav a:focus-visible, .knopf:focus-visible, .fach:focus-visible, .probe:focus-visible, .beispiel:focus-visible, .design-knopf:focus-visible {
  outline:3px solid var(--gold-hell); outline-offset:3px; }
/* Hell/Dunkel (design.js, Betreiber 06.10.2026: „Dunkelmodus wie die Lernwerkstatt“) */
.design-knopf { flex:none; width:40px; height:40px; display:grid; place-items:center; padding:0; border-radius:12px; cursor:pointer;
  color:#d7e4ef; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); }
.design-knopf[hidden] { display:none; }
.design-knopf:hover { background:rgba(255,255,255,.14); color:#fff; }
.design-knopf svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* 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 (rechts): echte Ausschnitte aus Musterprüfungen und Lernvideos (einblicke/) */
.werkbank { position:relative; height:420px; }
.stueck { position:absolute; margin:0; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -26px rgba(0,0,0,.9);
  border:1px solid rgba(255,255,255,.14); }
.stueck img { display:block; width:100%; height:auto; }
.stueck figcaption { position:absolute; left:10px; bottom:10px; padding:4px 9px; border-radius:8px; font:700 .72rem/1.2 "Inter", sans-serif;
  color:var(--navy); background:var(--gold-hell); box-shadow:0 6px 16px -8px rgba(0,0,0,.6); }
.blatt { left:2%; top:0; width:54%; transform:rotate(-4deg); }
.video { right:0; top:16%; width:60%; transform:rotate(3deg); z-index:2; }
.diagramm { left:12%; bottom:0; width:52%; transform:rotate(1.5deg); z-index:3; }
.siegel-reihe { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; }
.siegel-reihe li { display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 9px; border-radius:999px; font-size:.88rem; font-weight:700;
  color:#e6edf5; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); }
.siegel-reihe li::before { content:""; width:16px; height:16px; border-radius:50%; flex:none;
  background:var(--gold-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a45' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Abschnitte */
.einblicke, .faecher, .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; } }

/* Einblicke: Galerie echter Ausschnitte (Spalten = ruhiges Mauerwerk aus Bildern unterschiedlicher Höhe) */
.galerie { columns:3 300px; column-gap:16px; }
.probe { display:block; break-inside:avoid; margin:0 0 16px; border-radius:16px; overflow:hidden; text-decoration:none; color:var(--text);
  background:var(--karte); border:1px solid var(--rand); box-shadow:var(--schatten); transition:transform .2s, border-color .2s; }
.probe img { display:block; width:100%; height:auto; background:#fff; border-bottom:1px solid var(--rand); }
.probe-text { display:block; padding:12px 16px 14px; font-size:.92rem; color:var(--leise); }
.probe-text b { display:block; color:var(--akzent); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }
.probe:hover { transform:translateY(-3px); border-color:var(--akzent); }

/* KI: Inhalt des Info-Fensters im Generator, hier mit Beispielen */
.ki { max-width:1140px; margin:72px auto 0; padding:48px 40px; border-radius:24px; color:#e6edf5;
  background:radial-gradient(700px 320px at 100% 0, rgba(240,199,102,.16), transparent 60%), linear-gradient(160deg, #0b2a45, #061826); }
.ki-kopf { max-width:760px; }
.ki .abschnitt-kicker { display:flex; align-items:center; gap:8px; }
.ki .abschnitt-kicker svg { width:18px; height:18px; fill:var(--gold-hell); }
.ki h2 { color:#fff; }
.ki h2 span { color:var(--gold-hell); }
.ki-kopf p:not(.abschnitt-kicker) { color:#c4d3e1; margin:14px 0 0; }
.ki-kacheln { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:28px 0 0; }
.ki-kachel { padding:20px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.ki-kachel svg { width:30px; height:30px; fill:none; stroke:var(--gold-hell); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ki-kachel h3 { margin:10px 0 6px; color:#fff; font-size:1.15rem; }
.ki-kachel p { margin:0; color:#b7c8d8; font-size:.93rem; }
.ki-zwischen { margin:36px 0 14px; color:#fff; font-size:1.3rem; }
.beispiele { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.beispiel { display:flex; flex-direction:column; border-radius:16px; overflow:hidden; text-decoration:none; color:#b7c8d8; font-size:.9rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:transform .2s, border-color .2s; }
.beispiel img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; background:#fff; }
.beispiel img.oben { object-position:top; }
.beispiel b { display:block; margin:12px 16px 2px; color:#fff; font:800 1.1rem/1.2 "Bricolage Grotesque", sans-serif; }
.beispiel span { display:block; margin:0 16px 16px; }
.beispiel:hover { transform:translateY(-3px); border-color:var(--gold-hell); }
.ki-auch { margin:18px 0 22px; color:#c4d3e1; }
@media (prefers-reduced-motion: reduce) { .probe, .beispiel { transition:none; } .probe:hover, .beispiel:hover { transform:none; } }

.strecke { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; }
.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; }
.vergleich { margin:26px 0 0; border-radius:18px; overflow:hidden; border:1px solid var(--rand); background:var(--karte); box-shadow:var(--schatten); }
.v-zeile { display:grid; grid-template-columns:minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.4fr); }
.v-zeile > * { padding:12px 18px; border-top:1px solid var(--rand); }
.v-zeile b { color:var(--text); }
.v-zeile span:nth-child(2) { color:var(--leise); }
.v-zeile span:nth-child(3) { color:var(--text); font-weight:600; }
.v-zeile span:nth-child(3)::before { content:"✓ "; color:var(--akzent); font-weight:800; }
.v-kopf > * { border-top:0; font:800 .8rem/1.3 "Inter", sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--leise); }
.v-kopf span:nth-child(3) { color:var(--akzent); }
.v-kopf span:nth-child(3)::before { content:none; }
.fazit { margin:30px 0 0; text-align:center; font:800 clamp(1.4rem, 3vw, 2rem)/1.2 "Bricolage Grotesque", sans-serif; letter-spacing:-.02em; }

.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: 1080px) { .kopf-nav a[href="#pruefstrecke"] { display:none; } }
@media (max-width: 980px) {
  .buehne { grid-template-columns:minmax(0, 1fr); padding-top:48px; }
  .werkbank { height:400px; max-width:560px; }
  .fach-raster { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ki { margin:72px 20px 0; padding:32px 28px; }
  .ki-kacheln { grid-template-columns:minmax(0, 1fr); }
  .beispiele { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .strecke { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kopf-nav a:not(.kopf-knopf) { padding:8px 8px; }
}
@media (max-width: 560px) {
  .marke small { display:none; }
  .top { gap:10px; padding:10px 16px; }
  .kopf-nav a:not(.kopf-knopf) { display:none; }
  .kopf-knopf .lang { display:none; } .kopf-knopf .kurz { display:inline; }
  .buehne { padding:36px 16px 56px; }
  .werkbank { height:300px; }
  .stueck figcaption { font-size:.64rem; left:6px; bottom:6px; }
  .fach-raster, .strecke, .beispiele { grid-template-columns:minmax(0, 1fr); }
  .einblicke, .faecher, .qualitaet { padding:56px 16px 0; }
  .ki { margin:56px 16px 0; padding:26px 18px; }
  .v-zeile { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
  .v-zeile b { grid-column:1 / -1; padding-bottom:0; }
  .v-zeile b + span, .v-zeile b ~ span { border-top:0; }
  .v-kopf span:first-child { display:none; }
}