/* ==========================================================================
   Designschicht der Selbstlern-Kurse (seit 23.09.2026)
   --------------------------------------------------------------------------
   Wird vom Build (flpro/scripts/build-schulungen-static.js) NACH dem Inline-Style
   jeder Kursseite eingebunden und überlagert ihn: gleiche Spezifität, spätere
   Regel gewinnt. Inhalte, IDs und das Kurs-JS (navigate, Quiz, Zertifikat)
   bleiben unberührt. Was nur mit JS geht (Gehirn, Nervenbahn-Knoten,
   Stufenpfad, Lightbox), fügt kurs.js ein — alles mit Präfix kd-.
   Farben: --cat = Kategorie des Kurses (setzt der Build), sonst Lime.
   Die Gehirn-Engine liest --fl-primary/--fl-accent/--fl-hero-text.
   ========================================================================== */
:root {
  --cat: #bce941;
  --border-hi: #2f6a88;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fl-primary: #7cc4f0;
  --fl-accent: #bce941;
  --fl-hero-text: #e8ebf0;
}
html { scrollbar-color: var(--border-hi) var(--bg); }
body {
  background:
    radial-gradient(1000px 560px at 88% -6%, rgba(124,196,240,0.11), transparent 60%),
    radial-gradient(760px 480px at 20% 0%, color-mix(in srgb, var(--cat) 9%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: var(--accent); color: #071b36; }

/* ── Rahmen ─────────────────────────────────────────────────────────────── */
.app { grid-template-columns: 288px minmax(0, 1fr); }
.view-container { max-width: 960px; padding: 20px 44px 120px; }

/* ── Sidebar als Nervenbahn ─────────────────────────────────────────────── */
.sidebar { background: linear-gradient(180deg, #06192f 0%, #041326 100%); padding: 22px 0 0; scrollbar-width: thin; }
.brand { padding: 0 22px 20px; }
.kd-marke { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.kd-badge { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #071b36; display: grid; place-items: center; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.4px; flex-shrink: 0; }
.kd-marke-text { font-size: 0.74rem; line-height: 1.3; color: var(--text-dim); }
.kd-marke-text b { display: block; color: var(--text); font-size: 0.8rem; font-weight: 600; }
.brand-title { background: none; -webkit-text-fill-color: currentColor; color: #fff; font-size: 1.22rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.25; }
.brand-sub { font-size: 0.8rem; margin-top: 4px; }
.brand-back { margin-top: 14px; padding: 6px 12px; border: 1px solid var(--border-hi); border-radius: 999px; color: var(--text-dim); font-size: 0.78rem; transition: color .2s, border-color .2s; }
.brand-back:hover { color: var(--text); border-color: var(--accent); }

.nav { padding: 16px 14px 18px; }
.nav-sep { padding: 16px 10px 6px; font-size: 0.68rem; letter-spacing: 0.09em; color: #7f9fbf; opacity: 1; font-weight: 700; }
.nav-item { position: relative; gap: 12px; padding: 7px 10px 7px 8px; margin-bottom: 4px; border-radius: 12px; border-left: 0; line-height: 1.35; transition: background .2s, color .2s; }
.nav-item:hover { background: rgba(124,196,240,0.07); }
.nav-item.active { background: linear-gradient(90deg, color-mix(in srgb, var(--cat) 15%, transparent), transparent 85%); border-left: 0; color: #fff; }
.nav-num { position: relative; z-index: 1; width: 28px; height: 28px; background: var(--bg); border: 1.5px solid var(--border-hi); color: var(--text-dim); font-size: 0.74rem; transition: background .3s, border-color .3s, color .3s, box-shadow .3s; }
.nav-num svg { width: 14px; height: 14px; }
/* Axon zum nächsten Knoten — nur zwischen den Kernstufen */
.nav-item.kd-stufe::before { content: ""; position: absolute; left: 21px; top: 35px; height: 18px; width: 1.5px; background: var(--border-hi); transition: background .4s; }
.nav-item.kd-stufe-letzte::before { display: none; }
.nav-item.done .nav-num { background: color-mix(in srgb, var(--cat) 22%, var(--bg)); border-color: var(--cat); color: var(--cat); }
.nav-item.done.kd-stufe::before { background: color-mix(in srgb, var(--cat) 70%, transparent); }
.nav-item.active .nav-num { background: var(--cat); border-color: var(--cat); color: #071b36; box-shadow: 0 0 0 5px color-mix(in srgb, var(--cat) 18%, transparent), 0 0 18px color-mix(in srgb, var(--cat) 45%, transparent); animation: kd-puls 2.6s ease-in-out infinite; }
@keyframes kd-puls { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cat) 8%, transparent), 0 0 26px color-mix(in srgb, var(--cat) 55%, transparent); } }

.sidebar-progress { padding: 16px 22px; }
.progress-track { height: 5px; background: rgba(124,196,240,0.14); }
.progress-fill { background: linear-gradient(90deg, var(--cat), var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--cat) 50%, transparent); }
.progress-text { font-variant-numeric: tabular-nums; }
.book-cta { border-left: 1px solid var(--border); border-radius: 14px; margin: auto 14px 14px; }
.sidebar-foot { padding: 14px 22px 18px; }

/* ── Kurs-Leiste (Nervenzellen, dauerhaft oben) + Abbinder ─────────────── */
.kd-band { position: relative; height: 40px; margin: 6px 44px 0; }
.kd-abbinder { display: flex; justify-content: center; padding: 8px 24px 40px; opacity: .85; }
.kd-abbinder .fl-kon-frag { width: min(100%, 420px); aspect-ratio: 4 / 1; }
.fl-kon-frag, .fl-kon-stage { position: relative; }
.fl-kon-frag > canvas, .fl-kon-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── Umschalter (OS / Tool) ─────────────────────────────────────────────── */
.os-switch, .tool-switch { background: rgba(6,25,47,0.86); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); padding: 10px 44px; }
.os-seg, .tool-seg { border-radius: 999px; border-color: var(--border-hi); }
.os-seg button, .tool-seg button { padding: 7px 16px; }
.os-seg button[aria-pressed="true"], .tool-seg button[aria-pressed="true"] { background: var(--cat); color: #071b36; }

/* ── Kopf jeder Ansicht ─────────────────────────────────────────────────── */
header.hero { text-align: left; padding: 30px 0 34px; margin-bottom: 40px; border-bottom: 1px solid var(--border); }
.stage-label { background: none; color: var(--cat); padding: 0; border-radius: 0; font-size: 0.8rem; letter-spacing: 0.08em; margin-bottom: 14px; }
.stage-label.final { background: none; color: var(--accent-3); }
h1 { background: none; -webkit-text-fill-color: currentColor; color: #fff; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.12; text-wrap: balance; margin-bottom: 14px; }
.subtitle { margin: 0; max-width: 62ch; font-size: 1.1rem; }

/* Stufenpfad im Kopf: wo stehe ich im Kurs? */
.kd-pfad { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.kd-pfad-knoten { display: flex; align-items: center; }
.kd-pfad-knoten button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid var(--border-hi); background: var(--bg); cursor: pointer; position: relative; transition: transform .2s var(--ease-out), background .3s, border-color .3s; }
.kd-pfad-knoten button + button { margin-left: 16px; }
.kd-pfad-knoten button + button::before { content: ""; position: absolute; right: 100%; top: 50%; width: 17.5px; height: 1.5px; background: var(--border-hi); margin-right: 0; transform: translateY(-50%); }
.kd-pfad-knoten button.an { background: color-mix(in srgb, var(--cat) 35%, var(--bg)); border-color: var(--cat); }
.kd-pfad-knoten button.an + button::before, .kd-pfad-knoten button.an + button.an::before { background: color-mix(in srgb, var(--cat) 65%, transparent); }
.kd-pfad-knoten button.hier { background: var(--cat); border-color: var(--cat); transform: scale(1.35); box-shadow: 0 0 12px color-mix(in srgb, var(--cat) 60%, transparent); }
.kd-pfad-knoten button:hover { transform: scale(1.3); border-color: var(--cat); }
.kd-pfad-text { color: var(--text-dim); font-size: 0.84rem; font-variant-numeric: tabular-nums; }

/* Startseite des Kurses: Kopf mit Gehirn */
header.hero.kd-home { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 10px 36px; align-items: center; padding-top: 18px; }
.kd-home-text { min-width: 0; }
.kd-gehirn-buehne { position: relative; justify-self: center; width: min(100%, 400px); }
.kd-gehirn-buehne::before { content: ""; position: absolute; inset: 8% 4% 12%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cat) 16%, transparent), rgba(124,196,240,0.06) 60%, transparent); filter: blur(14px); pointer-events: none; }
.kd-gehirn { width: 100%; aspect-ratio: 5 / 4; }
.kd-fakten { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 22px; color: var(--text-dim); font-size: 0.9rem; }
.kd-fakten span { padding: 0 14px; border-left: 1px solid var(--border); }
.kd-fakten span:first-child { padding-left: 0; border-left: 0; }
.kd-fakten b { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Inhalt ─────────────────────────────────────────────────────────────── */
section.subsection { margin-bottom: 52px; }
h2 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
h2 .num { width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 1.5px solid var(--cat); color: var(--cat); font-size: 0.88rem; }
h2 .num.kd-syn { border: 0; width: 32px; height: 20px; border-radius: 0; }
h2 .num.kd-syn svg { width: 32px; height: 20px; }
h2 + p.lead { max-width: 68ch; }
h3 { letter-spacing: -0.005em; }
a.doc-link { text-underline-offset: 3px; }
code.inline, .osc { border-radius: 6px; }

.landing-intro { border-radius: 20px; padding: 28px 30px; background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 7%, var(--bg-card)), var(--bg-card)); }
.landing-intro h3 { color: #fff; font-size: 1.15rem; }
.landing-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.stage-card { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px 20px; transition: transform .35s var(--ease-out), border-color .3s, box-shadow .35s; }
.stage-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cat); opacity: .55; }
.stage-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cat) 60%, var(--border)); box-shadow: 0 22px 40px -24px rgba(0,0,0,0.85); }
.stage-card-num { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1.5px solid var(--cat); color: var(--cat); }
.stage-card.kd-done .stage-card-num { background: var(--cat); color: #071b36; }
.stage-card.kd-done::after { content: "besucht"; position: absolute; top: 18px; right: 18px; font-size: 0.7rem; font-weight: 700; color: var(--cat); letter-spacing: 0.04em; }

.callout { border: 1px solid rgba(124,196,240,0.26); border-left-width: 1px; border-radius: 14px; background: rgba(124,196,240,0.07); padding: 16px 20px; }
.callout.warn { border-color: rgba(251,191,36,0.34); }
.callout.error { border-color: rgba(248,113,113,0.36); }
.callout.tip { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.checklist { border: 1px solid color-mix(in srgb, var(--cat) 45%, transparent); border-radius: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 8%, transparent), rgba(124,196,240,0.04)); }
.checklist h3 { color: var(--cat); }
.check-item input[type="checkbox"] { accent-color: var(--cat); }
.steps li { border-radius: 14px; }
.steps li::before { background: var(--cat); }
.feat-card { border-radius: 16px; transition: border-color .25s, transform .3s var(--ease-out); }
.feat-card:hover { border-color: color-mix(in srgb, var(--cat) 45%, var(--border)); }

.terminal-block, .window-frame, .code-block, .video-frame, .anatomy, .cmdmap-wrap, .compare, .flow, .sketch { border-radius: 16px; }
.terminal-block, .window-frame, .code-block, .video-frame { box-shadow: 0 20px 44px -28px rgba(0,0,0,0.9); }
.terminal-bar, .window-bar, .video-frame .vf-bar { background: linear-gradient(180deg, #081f3a, #06192f); }
img.kd-zoom { cursor: zoom-in; transition: filter .3s; }
img.kd-zoom:hover { filter: brightness(1.06); }

/* ── Weiter / Zurück ─────────────────────────────────────────────────────── */
.stage-nav { margin-top: 60px; padding-top: 0; border-top: 0; gap: 14px; align-items: stretch; }
.stage-nav button { border-radius: 14px; padding: 14px 20px; }
.stage-nav .next { background: var(--accent); color: #071b36; }
.stage-nav .next.kd-weiter { flex: 0 1 460px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; text-align: left; padding: 18px 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 20%, var(--bg-card)), var(--bg-card) 75%); border: 1px solid color-mix(in srgb, var(--cat) 55%, var(--border)); color: var(--text); font-weight: 400; box-shadow: 0 18px 40px -26px rgba(0,0,0,0.9); transition: transform .3s var(--ease-out), border-color .3s; }
.stage-nav .next.kd-weiter:hover { transform: translateY(-3px); border-color: var(--cat); }
.kd-weiter small { grid-column: 1; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; color: var(--cat); }
.kd-weiter b { grid-column: 1; font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: #fff; }
.kd-weiter i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cat); color: #071b36; font-weight: 700; transition: transform .3s var(--ease-out); }
.kd-weiter:hover i { transform: translateX(4px); }

/* ── Quiz + Zertifikat-Einleitung ───────────────────────────────────────── */
.quiz-card { border-radius: 20px; padding: 32px; }
.quiz-pip { background: rgba(124,196,240,0.18); }
.quiz-pip.done { background: var(--cat); }
.quiz-option { border-radius: 12px; border-width: 1.5px; }
.quiz-btn { background: var(--accent); }
.quiz-result-card { border-radius: 22px; border-width: 1.5px; }
.quiz-score, .quiz-result-card.failed .quiz-score { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); }
.quiz-result-card.failed .quiz-score { color: var(--warn); }
.cert-intro { border-radius: 18px; }

/* ── Handy-Menü ─────────────────────────────────────────────────────────── */
.mobile-menu-btn { border-radius: 999px; padding: 9px 16px; background: rgba(13,41,73,0.92); backdrop-filter: blur(8px); border-color: var(--border-hi); font-weight: 600; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.kd-lb { border: 0; padding: 0; margin: auto; width: min(1180px, 100vw - 32px); max-width: none; max-height: calc(100vh - 32px); background: transparent; color: var(--text); overflow: visible; }
.kd-lb::backdrop { background: rgba(3,12,24,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kd-lb[open] { animation: kd-lb-auf .35s var(--ease-out); }
@keyframes kd-lb-auf { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.kd-lb-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.kd-lb-zahl { color: var(--text-dim); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.kd-rund { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-hi); background: rgba(13,41,73,0.9); color: var(--text); display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; transition: border-color .2s; }
.kd-rund:hover { border-color: var(--accent); }
.kd-rund:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kd-lb-zu { margin-left: auto; }
.kd-lb-buehne { position: relative; display: flex; align-items: center; justify-content: center; background: var(--code-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; height: min(74vh, 720px); touch-action: pan-y; }
.kd-lb-buehne img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; background: #fff0; }
.kd-lb-zur, .kd-lb-vor { position: absolute; top: 50%; transform: translateY(-50%); }
.kd-lb-zur { left: 12px; }
.kd-lb-vor { right: 12px; }
.kd-lb-text { margin-top: 12px; color: var(--text-dim); font-size: 0.92rem; max-width: 90ch; }

/* ── Schmale Bildschirme ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  header.hero.kd-home { grid-template-columns: 1fr; }
  .kd-gehirn-buehne { order: -1; width: min(70%, 300px); margin-bottom: -6px; }
}
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { width: 288px; }
  .view-container { padding: 16px 18px 80px; }
  .kd-band { margin: 56px 18px 0; height: 34px; }
  .sidebar { padding-top: 72px; } /* Platz für die feste Menü-Taste */
  .os-seg button, .tool-seg button { padding: 6px 11px; font-size: 0.8rem; }
  .os-switch, .tool-switch { padding-left: 116px; padding-right: 16px; min-height: 62px; }
  .os-switch ~ .kd-band, .tool-switch ~ .kd-band { margin-top: 4px; }
  header.hero { padding-top: 18px; }
  .stage-nav { flex-wrap: wrap; }
  .stage-nav .next.kd-weiter { flex: 1 1 100%; }
  .kd-lb { width: calc(100vw - 16px); }
  .kd-lb-buehne { height: 60vh; }
  .kd-lb-zur, .kd-lb-vor { display: none; }
}

/* ── Zertifikat auf schmalen Flächen ────────────────────────────────────── */
/* Die Kurse bauen die Urkunde als festes Querformat (aspect-ratio 1.414/1, overflow:hidden,
   Innenabstand 60px 70px, Name mind. 320px, Unterschriften als Flex-Reihe). Das passt nur in
   voller Breite: 872px = 960px − 2 × 44px der .view-container oben. Schmaler schnitt
   overflow:hidden alles unter der festen Höhe ab — bei 375px blieben 240px für rund 1080px
   Inhalt, Name, Datum und Unterschrift fehlten, die Unterschriften ragten rechts hinaus.
   Mit Sidebar traf das auch Fenster von 769 bis 1225px. Deshalb fragt das hier die Breite
   der Urkunde ab (Container), nicht die des Fensters. Nur Bildschirm: der Druck (A4 quer,
   @media print der Kurse) bleibt unverändert. */
@media screen {
  :has(> .certificate) { container-type: inline-size; }
  /* clip statt hidden: kein Scroll-Container mehr, damit wirkt aspect-ratio nur noch als
     Mindesthöhe und die Urkunde wächst mit dem Inhalt; das MUSTER bleibt beschnitten. */
  @container (width < 872px) {
    .certificate { overflow: clip; }
  }
  /* Handy und schmale Fenster mit Sidebar: Hochformat, Ränder und Schrift zurückgenommen,
     Siegel über Datum und Unterschrift. */
  @container (width < 560px) {
    .certificate { aspect-ratio: auto; padding: 48px 20px 44px; }
    .certificate::before { inset: 10px; }
    .certificate::after { inset: 14px; }
    .cert-corner { width: 26px; height: 26px; }
    .cert-corner.tl { top: 20px; left: 20px; }
    .cert-corner.tr { top: 20px; right: 20px; }
    .cert-corner.bl { bottom: 20px; left: 20px; }
    .cert-corner.br { bottom: 20px; right: 20px; }
    .cert-inner { padding: 4px 8px; }
    .cert-issuer-mark { gap: 10px; }
    .cert-issuer-badge { width: 42px; height: 42px; flex-shrink: 0; font-size: 0.95rem; }
    .cert-title { font-size: clamp(1.45rem, 9cqi, 2.6rem); letter-spacing: 2px; }
    .cert-subtitle { font-size: 0.72rem; letter-spacing: 2px; }
    .cert-middle { gap: 10px; }
    .cert-name { min-width: min(320px, 100%); max-width: 100%; font-size: clamp(1.6rem, 8.5cqi, 2.8rem); padding: 4px 6px 10px; }
    .cert-course { font-size: 0.95rem; }
    .cert-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding-top: 16px; align-items: start; }
    .cert-seal { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    .cert-sig-line { overflow-wrap: anywhere; }
    .certificate.muster::after, .cert-watermark { font-size: 3rem; }
  }
}

/* ── Druck: nur das Zertifikat ──────────────────────────────────────────── */
/* Die Kurs-Styles blenden beim Druck .app aus — und damit auch das Zertifikat darin
   (leere Seite, in allen Kursen bis 23.09.2026) — und schalten zugleich ALLE Ansichten
   sichtbar. Hier: Rahmen sichtbar, Sidebar weg, nur die Zertifikat-Ansicht. */
@media print {
  .kd-band, .kd-abbinder, .kd-lb, .kd-gehirn-buehne, .kd-pfad { display: none !important; }
  /* nur in Kursen mit Zertifikat-Ansicht; Akademie-Lektionen drucken die ganze Lektion */
  body:has(#view-cert) .app { display: block !important; }
  body:has(#view-cert) .sidebar, body:has(#view-cert) .mobile-menu-btn, body:has(#view-cert) .os-switch, body:has(#view-cert) .tool-switch { display: none !important; }
  body:has(#view-cert) .view { display: none !important; }
  body:has(#view-cert) #view-cert { display: block !important; animation: none !important; }
  body:has(#view-cert) { background: white !important; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item.active .nav-num { animation: none; }
}
@media (forced-colors: active) {
  .nav-num, .stage-card, .kd-pfad-knoten button { border: 1px solid CanvasText; }
  .brand-title, h1, .quiz-score { color: CanvasText; }
}