/* ─────────────────────────────────────────────────────────────
   wb-theme.css — devmaker "Workbench"
   Gemeinsamer Stil für alle Workbench-Seiten. Einbinden NACH
   Tailwind + daisyUI, plus Inter + JetBrains Mono.
   ──────────────────────────────────────────────────────────── */

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* Dark-first — weiches Slate, ruhiger Teal-Akzent */
[data-theme="dm_wb_dark"] {
  color-scheme: dark;
  --b1: 24% 0.014 248; --b2: 27% 0.016 248; --b3: 31% 0.018 248; --bc: 95% 0.006 250;
  --p: 72% 0.10 192; --pc: 16% 0.02 248; --s: 70% 0.05 248; --sc: 16% 0.02 248;
  --a: 72% 0.10 192; --ac: 16% 0.02 248; --n: 27% 0.016 248; --nc: 82% 0.01 252;
  --rounded-box: 0.5rem; --rounded-btn: 0.375rem; --rounded-badge: 0.25rem;
  --color-ink: oklch(96% 0.006 250); --color-dim: oklch(76% 0.012 252); --color-mute: oklch(62% 0.014 252);
  --color-line: oklch(36% 0.015 248); --color-line-soft: oklch(31% 0.014 248);
  --color-accent: oklch(74% 0.11 192); --color-paper: oklch(24% 0.014 248); --color-surface: oklch(27% 0.016 248);
  --code-bg: oklch(20% 0.014 248); --img-filter: saturate(0.9) brightness(0.97);
}
/* Light — warmes Neutral-Papier, Akzent abgedunkelt für Kontrast */
[data-theme="dm_wb_light"] {
  color-scheme: light;
  --b1: 98.5% 0.003 250; --b2: 97% 0.004 250; --b3: 93% 0.005 250; --bc: 22% 0.016 250;
  --p: 52% 0.10 205; --pc: 99% 0.003 250; --s: 46% 0.05 250; --sc: 99% 0.003 250;
  --a: 52% 0.10 205; --ac: 99% 0.003 250; --n: 96% 0.004 250; --nc: 38% 0.018 250;
  --rounded-box: 0.5rem; --rounded-btn: 0.375rem; --rounded-badge: 0.25rem;
  --color-ink: oklch(22% 0.016 250); --color-dim: oklch(44% 0.015 252); --color-mute: oklch(58% 0.012 252);
  --color-line: oklch(89% 0.005 250); --color-line-soft: oklch(93% 0.004 250);
  --color-accent: oklch(50% 0.11 205); --color-paper: oklch(98.5% 0.003 250); --color-surface: oklch(100% 0 0);
  --code-bg: oklch(96% 0.005 250); --img-filter: saturate(0.95);
}

html, body { background: var(--color-paper); }
body { font-family: var(--font-sans); color: var(--color-ink); -webkit-font-smoothing: antialiased; }

.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--color-ink); text-wrap: balance; }
.dek { font-family: var(--font-sans); font-weight: 400; color: var(--color-dim); line-height: 1.55; text-wrap: pretty; }
.kicker { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; color: var(--color-accent); }
.label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-mute); }
.meta { font-family: var(--font-mono); font-size: 12px; color: var(--color-mute); }

.rule { border-color: var(--color-line); }
.rule-soft { border-color: var(--color-line-soft); }
.surface { background: var(--color-surface); border: 1px solid var(--color-line); }

.cat-dot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; flex-shrink: 0; background: var(--cat, var(--color-accent)); }
[data-cat="linux"]           { --cat: oklch(62% 0.10 178); }
[data-cat="3d-druck"]        { --cat: oklch(64% 0.11 42);  }
[data-cat="home-automation"] { --cat: oklch(60% 0.10 150); }
[data-cat="elektronik"]      { --cat: oklch(60% 0.11 292); }
[data-cat="homelab"]         { --cat: oklch(64% 0.10 200); }
[data-cat="software-web"]    { --cat: oklch(62% 0.12 22);  }

.ph { background: var(--color-surface); filter: var(--img-filter); object-fit: cover; display: block; }
.link-quiet { color: var(--color-ink); text-decoration: none; transition: color .15s; }
.link-quiet:hover { color: var(--color-accent); }
.story-title { transition: color .15s; }
a:hover .story-title { color: var(--color-accent); }

.topbar { border-bottom: 1px solid var(--color-line); background: color-mix(in oklch, var(--color-paper) 86%, transparent); backdrop-filter: blur(10px); }
.accent-line { height: 1px; background: var(--color-line); }
.maxw { max-width: 1180px; margin: 0 auto; }
.maxw-narrow { max-width: 760px; margin: 0 auto; }

.chip { font-family: var(--font-mono); font-size: 11px; color: var(--color-dim); border: 1px solid var(--color-line); border-radius: 4px; padding: 3px 9px; cursor: pointer; transition: all .15s; }
.chip:hover { color: var(--color-accent); border-color: var(--color-accent); }
.chip[data-active] { background: var(--color-accent); color: var(--pc,#000); border-color: var(--color-accent); }

/* Buttons */
.btn-accent { font-family: var(--font-mono); font-size: 13px; font-weight: 500; padding: 0 1.25rem; height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: var(--rounded-btn); background: var(--color-accent); color: var(--pc,#000); border: none; cursor: pointer; }
.btn-ghost { font-family: var(--font-mono); font-size: 13px; padding: 0 1.25rem; height: 2.75rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: var(--rounded-btn); background: transparent; color: var(--color-dim); border: 1px solid var(--color-line); cursor: pointer; transition: all .15s; }
.btn-ghost:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* Forms */
.field-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-mute); margin-bottom: .5rem; display: block; }
.input { width: 100%; font-size: 14.5px; padding: 0 .85rem; height: 2.75rem; border-radius: var(--rounded-btn); background: var(--color-paper); border: 1px solid var(--color-line); color: var(--color-ink); outline: none; transition: border-color .15s; font-family: var(--font-sans); }
.input:focus { border-color: var(--color-accent); }
textarea.input { height: auto; padding: .75rem .85rem; line-height: 1.6; resize: vertical; }

/* Prose / legal */
.prose { font-size: 17px; line-height: 1.7; color: var(--color-ink); }
.prose p { margin: 0 0 1.25rem; color: var(--color-dim); }
.prose h2 { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); margin: 2.25rem 0 .9rem; scroll-margin-top: 6rem; }
.prose h2 .n { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-accent); font-weight: 500; margin-right: 0.5rem; }
.prose h3 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; color: var(--color-ink); margin: 1.6rem 0 .5rem; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--code-bg); border: 1px solid var(--color-line-soft); border-radius: 4px; padding: 1px 6px; color: var(--color-accent); }
.prose strong { color: var(--color-ink); font-weight: 600; }
.prose a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--color-accent) 40%, transparent); }
.prose ul { margin: 0 0 1.25rem; padding-left: 1.1rem; color: var(--color-dim); }
.prose li { margin: 0 0 .45rem; }

.legal-card { border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-surface); padding: 1.1rem 1.35rem; margin: 0 0 1.4rem; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--color-dim); }
.legal-card .l { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--color-accent); margin-bottom: .5rem; }

.toc { position: sticky; top: 6rem; font-family: var(--font-mono); font-size: 12px; line-height: 1.9; }
.toc a { color: var(--color-mute); display: block; text-decoration: none; }
.toc a:hover { color: var(--color-ink); }

/* Card */
.card-link { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: border-color .15s; }
.card-link:hover { border-color: color-mix(in oklch, var(--color-accent) 40%, var(--color-line)); }

.preview-tag { position: fixed; bottom: 14px; right: 16px; z-index: 70; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--color-mute); padding: 5px 11px; border-radius: 6px; background: color-mix(in oklch, var(--color-paper) 90%, transparent); border: 1px solid var(--color-line); }

/* Home-spezifisch (aus Editorial Workbench_v2 inline-style übernommen) */
.idx { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--color-mute); }
.accent-line { height: 1px; background: var(--color-line); }

/* Mobile-Menü (Burger) — geschlossen; offen via .open; auf lg+ immer aus */
.nav-mobile { display: none; flex-direction: column; }
.nav-mobile.open { display: flex; }
@media (min-width: 1280px) { .nav-mobile, .nav-mobile.open { display: none !important; } }

/* Teilen-Menü (Desktop-Fallback, wenn kein nativer Share-Sheet) */
.share-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:30; min-width:184px; background:var(--color-surface); border:1px solid var(--color-line); border-radius:8px; padding:6px; display:flex; flex-direction:column; gap:2px; box-shadow:0 10px 28px color-mix(in oklch, var(--color-paper) 40%, transparent); }
.share-menu[hidden] { display:none; }
.share-menu__item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; font-size:14px; color:var(--color-dim); text-decoration:none; background:none; border:0; text-align:left; width:100%; cursor:pointer; font-family:inherit; }
.share-menu__item:hover { background:color-mix(in oklch, var(--color-accent) 12%, transparent); color:var(--color-ink); }

/* Artikel-Detail */
.read-progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--color-accent); width: 0; z-index: 40; }
.figframe img { display:block; width:100%; filter:var(--img-filter); }

/* Legal/About/Contact (Wiederverwendung der v1-Inhalte unter v2-Chrome) */
.legal-page { max-width: 860px; margin: 0 auto; padding: 0.5rem 0 3rem; }
.legal-prose { font-size: 17px; line-height: 1.7; color: var(--color-ink); }
.legal-prose p { margin: 0 0 1.25rem; color: var(--color-dim); }
.legal-prose h2 { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 600; letter-spacing:-0.02em; color: var(--color-ink); margin: 2.25rem 0 .9rem; scroll-margin-top: 6rem; }
.legal-prose h3 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; color: var(--color-ink); margin: 1.6rem 0 .5rem; }
.legal-prose a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--color-accent) 40%, transparent); }
.legal-prose ul, .legal-prose ol { margin: 0 0 1.25rem; padding-left: 1.1rem; color: var(--color-dim); }
.legal-prose li { margin: 0 0 .45rem; }
.legal-prose strong { color: var(--color-ink); font-weight: 600; }
.legal-prose code { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); border:1px solid var(--color-line-soft); border-radius:4px; padding:1px 6px; color: var(--color-accent); }
/* Nummerierte Legal-H2 (Impressum/Datenschutz) — wie Guides/Legal-Design (01, 02 …).
   Nur v2 (wb-theme.css ist v2-only); v1 nutzt seinen ##-Amber-Prefix unberührt. */
.legal-prose--numbered { counter-reset: legal-h2; }
.legal-prose--numbered h2 { counter-increment: legal-h2; }
.legal-prose--numbered h2::before { content: counter(legal-h2, decimal-leading-zero); font-family: var(--font-mono); font-size: .85rem; font-weight: 500; color: var(--color-accent); margin-right: .6rem; }
.legal-toc { position: sticky; top: 6rem; font-family: var(--font-mono); font-size: 12px; line-height: 1.9; }
.legal-toc a { color: var(--color-mute); display:block; text-decoration:none; }
.legal-toc a:hover { color: var(--color-ink); }
.kicker-prompt { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing:.04em; color: var(--color-accent); }

/* Legal-Layout (2-spaltig: Inhalt + sticky TOC rechts) — v2-Port aus terminal-editorial.css */
.legal-layout { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 3rem; max-width: 1100px; margin: 0 auto; align-items: start; padding: 2.5rem 1rem 4rem; }
.legal-layout > .legal-page { grid-column: 1; grid-row: 1; max-width: 820px; margin: 0; padding: 0; }
.legal-toc-wrap { grid-column: 2; grid-row: 1; position: sticky; top: 6rem; }
.legal-toc-label { font-family: var(--font-mono); font-size: .75rem; color: var(--color-accent); margin-bottom: .75rem; }
@media (max-width: 1024px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .legal-toc-wrap { display: none; }
}

/* ── Artikel-Body (StreamField-Blöcke) im Workbench-Look ──────────────── */
/* Tailwind-Typography (prose/prose-invert) auf v2-Tokens mappen → korrekt in Light & Dark */
.wb-article .prose, .wb-article .prose-invert {
  --tw-prose-body: var(--color-dim); --tw-prose-invert-body: var(--color-dim);
  --tw-prose-headings: var(--color-ink); --tw-prose-invert-headings: var(--color-ink);
  --tw-prose-links: var(--color-accent); --tw-prose-invert-links: var(--color-accent);
  --tw-prose-bold: var(--color-ink); --tw-prose-invert-bold: var(--color-ink);
  --tw-prose-code: var(--color-accent); --tw-prose-invert-code: var(--color-accent);
  --tw-prose-bullets: var(--color-mute); --tw-prose-invert-bullets: var(--color-mute);
  --tw-prose-hr: var(--color-line); --tw-prose-invert-hr: var(--color-line);
  --tw-prose-quotes: var(--color-ink); --tw-prose-invert-quotes: var(--color-ink);
  --tw-prose-quote-borders: var(--color-accent); --tw-prose-invert-quote-borders: var(--color-accent);
  --tw-prose-th-borders: var(--color-line); --tw-prose-invert-th-borders: var(--color-line);
  --tw-prose-td-borders: var(--color-line-soft); --tw-prose-invert-td-borders: var(--color-line-soft);
  max-width: none;
}
.wb-article > * + * { margin-top: 0; }

/* Callout-Block (BEM aus unserem callout_block) */
.callout { border:1px solid var(--color-line); border-left:3px solid var(--color-accent); background:var(--color-surface); border-radius:8px; padding:16px 18px; margin:1.6rem 0; }
.callout--tip { border-left-color: var(--color-success); }
.callout--warning { border-left-color: var(--color-warning); }
.callout__title { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--color-accent); margin-bottom:6px; }
.callout--warning .callout__title { color: var(--color-warning); }
.callout__body { font-size:15px; color:var(--color-dim); line-height:1.6; }
.callout__body :where(p):last-child { margin-bottom:0; }

/* Code-Block (StreamField code_block → .codeblock-Override, Workbench-Design) */
.codeblock { background:var(--code-bg); border:1px solid var(--color-line); border-radius:8px; overflow:hidden; margin:1.6rem 0; }
.codeblock__bar { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid var(--color-line-soft); font-family:var(--font-mono); font-size:11px; color:var(--color-mute); }
.codeblock__bar .d { width:8px; height:8px; border-radius:50%; flex:none; }
.codeblock__lang { color:var(--color-mute); }
.codeblock pre { margin:0; padding:16px 18px; overflow-x:auto; background:none; border:0; border-radius:0; font-family:var(--font-mono); font-size:13px; line-height:1.7; color:var(--color-dim); }
.codeblock pre code { background:none; border:none; padding:0; color:inherit; font-size:inherit; text-shadow:none; }

/* Fallback fuer blanke <pre> in Richtext (liegen in .prose, nicht in .codeblock) */
.wb-article .prose pre { background:var(--code-bg); border:1px solid var(--color-line); border-radius:8px; padding:16px 18px; overflow-x:auto; font-family:var(--font-mono); font-size:13px; line-height:1.7; color:var(--color-dim); margin:1.6rem 0; }

/* Callout: kein Icon im v2 (Design nutzt nur das Mono-Label) */
.wb-article .callout { display:block; }
.wb-article .callout__icon { display:none; }

/* Artikel-TOC (rechte Sidebar) */
.toc .label { margin-bottom:.75rem; }
.toc a { padding:.1rem 0; }
.toc a.is-active { color:var(--color-accent); }

/* ── Guides-Index (Guides_v2): Level-Pills, Curriculum-Steps, Progress ─── */
.level { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--lv-line, var(--color-line)); color: var(--lv, var(--color-dim)); background: var(--lv-bg, transparent); }
.level::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lv, var(--color-dim)); }
.lv-beginner { --lv: oklch(70% 0.12 150); --lv-line: oklch(70% 0.12 150 / .4); --lv-bg: oklch(70% 0.12 150 / .1); }
.lv-inter    { --lv: oklch(76% 0.12 75);  --lv-line: oklch(76% 0.12 75 / .4);  --lv-bg: oklch(76% 0.12 75 / .1); }
.lv-expert   { --lv: oklch(68% 0.14 22);  --lv-line: oklch(68% 0.14 22 / .4);  --lv-bg: oklch(68% 0.14 22 / .1); }

.step { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--color-line-soft); }
.step__n { font-family: var(--font-mono); font-size: 12px; color: var(--color-mute); width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 6px; }
.step__title { font-size: 14.5px; color: var(--color-ink); }

.bar { height: 4px; border-radius: 999px; background: var(--color-line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--color-accent); }