/* site.css — Sparticle Loop. Tokens 1:1 aus dem Design-System
   (assets/Sparticle Loop Design System/tokens/), Komponenten-Styles destilliert
   aus den JSX-Quellen. SUBSTITUTION FLAG (readme.md des DS): Google Fonts als
   Naechstbestes — vor dem Deploy self-hosten (Phasenplan Phase 4). */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- tokens ---------- */
:root{
--slate-0:#0E1216;--slate-1:#141A21;--slate-2:#1B232C;--slate-3:#243040;
--grey-100:#EAEFF4;--grey-300:#B4C0CB;--grey-500:#8494A2;--grey-600:#5D6B78;--grey-700:#39434D;
--copper-200:#EFC9A8;--copper-300:#E3AD7F;--copper-400:#D6935B;--copper-500:#C57A40;--copper-600:#9C5A2B;--copper-700:#71401E;
/* Light-Theme = Marmor mit Roségold, Farben aus assets/originals/
   hero-marble-original.png gemessen (Canvas-Sampling, nicht geschaetzt):
   Stein #EFF0F2 / #E9E9EC / #D6D6DB / #C3C4C9 / #989296,
   Metall #FBECE1 / #DFC5BA / #B48B7E / #6A453B.
   Der Stein ist kuehl-neutral, deshalb ist auch die Textrampe kuehl (die alte
   warme Papier-Rampe passte zum Schiefer-Render, nicht zum Marmor). */
--marble-0:#F1F2F4;--marble-1:#E7E8EC;--marble-2:#D6D6DB;--marble-vein:#C9CBD2;--marble-deep:#989296;
--rose-200:#FBECE1;--rose-300:#DFC5BA;--rose-400:#B48B7E;--rose-500:#9C7062;--rose-600:#8A5A4A;--rose-700:#6A453B;
/* Kuehle Textrampe, gemessen gegen die drei Marmorgruende:
   ink-1 14.75 · ink-2 7.98 · ink-3 5.34 (4.89 auf --surface-raised) */
--ink-1:#1B1F26;--ink-2:#434A55;--ink-3:#5C646F;
--surface-page:var(--slate-0);--surface-card:var(--slate-1);--surface-raised:var(--slate-2);
--text-body:var(--grey-100);--text-muted:var(--grey-300);--text-faint:var(--grey-500);
--accent:var(--copper-400);--accent-strong:var(--copper-300);--accent-deep:var(--copper-600);
--line-hairline:#2A3542;--grid-line:rgba(151,169,186,0.08);--track-line:rgba(151,169,186,0.05);
--focus-ring:var(--copper-400);
--code-bg:#0B0F13;--code-text:#D7DEE5;
/* Akzent auf --surface-raised: der normale Akzent reisst dort im Light-Theme
   AA (4.43:1), deshalb ein eigener Token je Grund. */
--accent-on-raised:var(--copper-400);
--code-comment:#7C8B98;--code-lineno:#6B7D8F;   /* 4.54:1 auf dem dunklen code-bg */
--hero-render:url('/img/hero-render.jpg');      /* Light-Theme tauscht auf Marmor */
--glow-copper:0 0 24px rgba(214,147,91,0.10);
--glow-copper-strong:0 0 40px rgba(214,147,91,0.16);
--font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
--font-body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
--text-xs:12px;--text-sm:13.5px;--text-base:17px;--text-lg:20px;--text-xl:25px;--text-2xl:32px;--text-3xl:42px;
--leading-tight:1.15;--leading-snug:1.35;--leading-body:1.65;
--tracking-wide:0.08em;--tracking-caps:0.14em;
--measure:70ch;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--radius-1:2px;--radius-2:4px;
--hairline:1px solid var(--line-hairline);
/* +20% gegenueber der Vorlage (760/1080) auf Wunsch */
--content-max:912px;--page-max:1296px;
--ease-precise:cubic-bezier(0.2,0,0,1);--dur-fast:120ms;--dur-base:240ms;--dur-slow:400ms;
}
:root[data-theme="light"]{
--surface-page:var(--marble-0);--surface-card:#F8F9FA;--surface-raised:var(--marble-1);
--text-body:var(--ink-1);--text-muted:var(--ink-2);--text-faint:var(--ink-3);
/* Roségold als Akzent: rose-600 traegt AA auf allen drei Gruenden
   (5.15 Seite · 5.47 Karte · 4.71 erhoehte Flaeche) */
--accent:var(--rose-600);--accent-strong:var(--rose-700);--accent-deep:var(--rose-500);
--accent-on-raised:var(--rose-700);      /* 6.79:1 auf --surface-raised */
--line-hairline:var(--marble-vein);--grid-line:rgba(90,96,110,0.10);--track-line:rgba(90,96,110,0.06);
--focus-ring:var(--rose-600);
--code-bg:#20262D;--code-text:#D7DEE5;
--code-comment:#7E8E9B;                  /* 4.52:1 auf dem hellen code-bg */
--code-lineno:#8492A0;
--glow-copper:0 0 24px rgba(138,90,74,0.14);
--glow-copper-strong:0 0 36px rgba(138,90,74,0.20);
--hero-render:url('/img/hero-render-light.jpg');
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{background:var(--surface-page)}
body{margin:0;font-family:var(--font-body);color:var(--text-body);font-size:var(--text-base);line-height:var(--leading-body)}
a{color:var(--accent)}
a:hover{color:var(--accent-strong)}
::selection{background:var(--accent-deep);color:#fff}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.accent{color:var(--accent)}
.shell{max-width:var(--page-max);margin:0 auto;padding:0 32px}
.content-col{max-width:calc(var(--content-max) + 64px)}
#bg{position:fixed;inset:0;z-index:0}
#bg sl-shader,#bg sl-field,#bg .deep-space{position:absolute;inset:0}
/* Weltraum-Tiefe: Vignette plus zwei sehr schwache Kupfer-Bloeme. Bewusst
   unter 15% Deckung, damit es Tiefe gibt und keine Sci-Fi-Tapete. Ueber prefs
   abschaltbar. Die Design-Vorlage verbietet Starfields ausdruecklich; das hier
   ist auf Wunsch bewusst hinzugefuegt und deshalb schaltbar gehalten. */
.deep-space{opacity:0;transition:opacity var(--dur-slow) var(--ease-precise);pointer-events:none;
  background:
    radial-gradient(58% 42% at 74% 16%,rgba(214,147,91,0.10),transparent 62%),
    radial-gradient(46% 38% at 14% 82%,rgba(151,169,186,0.09),transparent 64%),
    radial-gradient(120% 100% at 50% 42%,transparent 44%,rgba(0,0,0,0.55) 100%)}
.js[data-space="on"] .deep-space{opacity:1}
:root[data-theme="light"] .deep-space{background:
    radial-gradient(58% 42% at 74% 16%,rgba(138,90,74,0.09),transparent 62%),
    radial-gradient(46% 38% at 14% 82%,rgba(90,96,110,0.07),transparent 64%),
    radial-gradient(120% 100% at 50% 42%,transparent 48%,rgba(70,74,86,0.16) 100%)}
.page{position:relative;z-index:1}
.grain{position:fixed;inset:-100px;z-index:40;pointer-events:none;opacity:0.045;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E")}
.graph-grid{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:24px 24px}
/* Scroll-Reveal nur wenn JS laeuft: ohne JS bleibt jeder Inhalt sichtbar.
   Sonst waeren Artefakt und Retro-Sektion fuer No-JS-Leser unsichtbar. */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity 0.7s var(--ease-precise),transform 0.7s var(--ease-precise)}
.js .rv.on{opacity:1;transform:none}

/* Die Marke als tintbare Maske (Mark.jsx): background=currentColor unter der Maske.
   Seitenverhaeltnisse exakt aus den Bilddateien: 192x127 bzw. 256x169. */
.mark{display:inline-block;width:var(--mark-size,32px);aspect-ratio:192/127;background:currentColor;
  -webkit-mask:url('/img/mark-192.png') center/contain no-repeat;mask:url('/img/mark-192.png') center/contain no-repeat;vertical-align:middle}
.mark-accent{color:var(--accent)}
.mark-paws{aspect-ratio:256/169;
  -webkit-mask-image:url('/img/mark-paws-256.png');mask-image:url('/img/mark-paws-256.png')}
.mark-footer{width:52px;color:var(--text-faint);opacity:0.75}

/* Quanten-Verzerrung: SVG-Displacement, sehr klein gehalten. Der Seed wird von
   fx.js alle paar Sekunden neu gesetzt, dadurch "zittert" die Kontur wie
   Vakuumrauschen, ohne zu wabern. Ueber prefs abschaltbar, reduced-motion aus. */
.js[data-distort="on"] .mark-quantum{filter:url(#sl-quantum)}
.sl-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Skip-Link: unsichtbar bis fokussiert */
.skip-link{position:fixed;top:-48px;left:16px;z-index:60;background:var(--surface-card);color:var(--accent);
  border:1px solid var(--accent-deep);border-radius:var(--radius-1);padding:8px 14px;
  font-family:var(--font-mono);font-size:12px;text-decoration:none;transition:top var(--dur-fast) var(--ease-precise)}
.skip-link:focus-visible{top:12px}

/* ---------- header ---------- */
.site-header{border-bottom:var(--hairline);background:var(--surface-page);position:relative}
.header-row{display:flex;align-items:flex-start;gap:20px;padding-top:20px;padding-bottom:20px}
/* Marke als Block: Zeichen und Name in einer Zeile, Tagline darunter */
.brand-block{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--text-body)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand-name{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-0.015em;white-space:nowrap}
.brand .mark{--mark-size:60px}
.brand-tag{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);letter-spacing:0.02em;padding-left:74px}
.site-nav{margin-left:auto;display:flex;gap:22px;align-items:baseline;padding-top:8px}
.nav-link{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:var(--tracking-wide);white-space:nowrap;text-decoration:none;color:var(--text-faint);border-bottom:1px solid transparent;padding-bottom:2px;transition:color var(--dur-fast) var(--ease-precise)}
.nav-link:hover{color:var(--accent)}
.nav-link.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.ghost-btn{font-family:var(--font-mono);font-size:12px;background:none;cursor:pointer;border:var(--hairline);border-radius:var(--radius-1);color:var(--text-faint);padding:3px 9px;transition:color var(--dur-fast) var(--ease-precise),border-color var(--dur-fast) var(--ease-precise)}
.ghost-btn:hover{color:var(--accent);border-color:var(--accent)}

/* Design-Panel (fable-switcher-Muster: Draft -> Save -> Revert) */
.prefs{position:absolute;right:32px;top:calc(100% + 8px);z-index:30;width:300px;max-height:min(78vh,660px);overflow-y:auto;
  background:var(--surface-card);border:var(--hairline);border-radius:var(--radius-2);box-shadow:var(--glow-copper-strong);padding:16px 18px}
.pref-group{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:var(--tracking-caps);
  color:var(--text-faint);margin:14px 0 8px;padding-bottom:4px;border-bottom:var(--hairline)}
.pref-group:first-of-type{margin-top:4px}
.prefs h2{font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--accent);margin:0 0 12px}
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.pref-row label{flex:1}
.pref-row input[type=range]{flex:1.4;accent-color:var(--accent)}
.pref-row input[type=checkbox]{accent-color:var(--accent)}
.pref-val{width:4ch;text-align:right;color:var(--text-faint)}
.pref-hint{color:var(--accent);font-size:10px;text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.pref-actions{display:flex;gap:8px;margin-top:14px;align-items:center}
.pref-state{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.pref-state.is-dirty{color:var(--accent)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:var(--hairline);min-height:380px;display:flex;align-items:center}
/* Das Render als Hintergrundbild statt <img>: so tauscht das Theme die Datei
   (Schiefer im Dunkeln, Marmor im Hellen) ohne zweites Element im DOM. */
/* Das Element ist absichtlich hoeher als der Hero: so liegt die weiche Zone der
   Maske ausserhalb des sichtbaren Bereichs und es entsteht keine Rechteckkante. */
.hero-render{position:absolute;right:-90px;top:-120px;width:780px;max-width:74%;height:640px;
  /* Angeschnittenes Detail statt ganzer Marke: die Pfoten-Bahn und der
     Kreuzungspunkt gross im Bild, der Rest laeuft aus dem Hero heraus. */
  background:var(--hero-render) 52% 46%/cover no-repeat;opacity:0.9;pointer-events:none;will-change:transform;
  -webkit-mask-image:radial-gradient(78% 68% at 58% 46%,#000 38%,transparent 76%);mask-image:radial-gradient(78% 68% at 58% 46%,#000 38%,transparent 76%)}
/* Signatur im Hero: nur die kleine Marke, wie ein Steinmetzzeichen in der Ecke.
   Rein dekorativ (aria-hidden), deshalb kein Text und kein Schildchen. */
.hero-sig{position:absolute;right:26px;bottom:18px;z-index:2;display:flex;pointer-events:none}
.hero-sig .mark{--mark-size:34px;color:var(--accent);opacity:0.85}
.hero-copy{position:relative;z-index:1;padding:64px 0 58px;max-width:58%}
.kicker{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-faint);margin-bottom:18px}
.hero-h1{font-family:var(--font-display);font-size:50px;font-weight:600;line-height:1.08;letter-spacing:-0.02em;margin:0 0 18px;text-wrap:balance}
.hero-p{font-size:16.5px;line-height:1.6;color:var(--text-muted);margin:0 0 26px;max-width:46ch;text-wrap:pretty}
.hero-stats{display:flex;gap:26px;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);flex-wrap:wrap}

/* ---------- home ---------- */
.home-grid{display:grid;grid-template-columns:1fr 300px;gap:48px;padding-top:36px}
.loop-head{display:flex;align-items:baseline;gap:16px;margin-bottom:6px}
.h-display{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;margin:0;letter-spacing:-0.01em}
.loop-sub{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.loop-desc{font-size:15px;color:var(--text-muted);margin:0 0 24px;max-width:62ch;line-height:1.6}
.loop-list{display:flex;flex-direction:column;gap:16px}
.side{display:flex;flex-direction:column;gap:28px}
.side-h{font-family:var(--font-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--text-faint);margin:0 0 10px}
.rubric-links{display:flex;flex-direction:column}
.rubric-link{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 2px;border-bottom:var(--hairline);text-decoration:none}
.rubric-name{font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--text-body)}
.rubric-link:hover .rubric-name{color:var(--accent)}
.rubric-sub{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);text-align:right}
.side-card{border:var(--hairline);border-radius:var(--radius-2);padding:16px 18px}
.side-stats{font-family:var(--font-mono);font-size:12px;line-height:2;color:var(--text-muted)}
.side-stats span{color:var(--text-faint)}

/* ---------- post card (PostCard.jsx inkl. Quanten-Jitter) ---------- */
.sl-postcard{position:relative;display:block;border:var(--hairline);border-radius:var(--radius-2);background:var(--surface-card);padding:22px 26px;text-decoration:none;color:var(--text-body);transition:border-color var(--dur-base) var(--ease-precise),box-shadow var(--dur-base) var(--ease-precise),transform var(--dur-base) var(--ease-precise)}
.sl-postcard:hover{border-color:var(--accent-deep);box-shadow:var(--glow-copper);transform:translateY(-1px)}
.sl-postcard:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--accent-deep)}
.sl-postcard .meta{font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}
.sl-title{position:relative;display:block;font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:var(--leading-snug);margin:8px 0 10px;letter-spacing:-0.01em}
.sl-g{position:absolute;inset:0;opacity:0;pointer-events:none;color:var(--accent)}
.sl-base{display:block}
.sl-jit .sl-g1{animation:slJit1 0.38s steps(3,jump-none) 1}
.sl-jit .sl-g2{animation:slJit2 0.38s steps(3,jump-none) 1}
.sl-jit .sl-base{animation:slJitB 0.38s steps(3,jump-none) 1}
@keyframes slJit1{0%{opacity:0;transform:none}30%{opacity:0.38;transform:translate(-2px,-1px)}65%{opacity:0.18;transform:translate(1px,-2px)}100%{opacity:0;transform:none}}
@keyframes slJit2{0%{opacity:0;transform:none}35%{opacity:0.3;transform:translate(2px,1px)}70%{opacity:0.14;transform:translate(-1px,2px)}100%{opacity:0;transform:none}}
@keyframes slJitB{0%{opacity:1}40%{opacity:0.8}100%{opacity:1}}
.sl-tldr{display:block;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:62ch}
.sl-foot{display:block;margin-top:14px}

/* ---------- tags & meta ---------- */
.tag{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-faint);border:var(--hairline);border-radius:var(--radius-1);padding:2px 8px;display:inline-block;text-decoration:none}
.tag-accent{color:var(--accent);border-color:var(--accent-deep)}
.tag-tab{padding:5px 12px;font-size:12px}
.tab-row{display:flex;gap:10px;margin:40px 0 18px}
.meta{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);letter-spacing:0.02em}
.meta-sep{color:var(--line-hairline)}

/* ---------- post page ---------- */
.crumb{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--accent);text-decoration:none;display:inline-block;margin-top:36px}
.post-h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;line-height:var(--leading-tight);letter-spacing:-0.015em;margin:10px 0 22px;text-wrap:balance}
.post-h1 + .tldr{margin-top:0}
.content-col .meta{margin-top:22px}
.tldr{border:var(--hairline);border-radius:var(--radius-2);padding:16px 20px;background:var(--surface-card);margin:0 0 28px}
.tldr-label{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent)}
.tldr p{font-size:16px;line-height:1.6;color:var(--text-body);margin:8px 0 0;max-width:62ch}
.post-body{max-width:var(--measure)}
.post-body p{margin:0 0 20px;text-wrap:pretty}
.post-body h2,.post-body h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;margin:34px 0 14px}
.post-body h2{font-size:var(--text-xl)}
.post-body h3{font-size:var(--text-lg)}
.post-body blockquote{margin:0 0 20px;padding:2px 0 2px 18px;border-left:2px solid var(--accent-deep);color:var(--text-muted)}
.post-body ul,.post-body ol{margin:0 0 20px;padding-left:24px}
/* Marken-Bullets (Vorlage: "the mark recurs functionally - list bullets") */
.post-body ul{list-style:none;padding-left:6px}
.post-body ul>li{padding-left:30px;position:relative}
.post-body ul>li::before{content:'';position:absolute;left:0;top:0.42em;width:20px;height:13px;background:var(--accent);
  -webkit-mask:url('/img/mark-192.png') center/contain no-repeat;mask:url('/img/mark-192.png') center/contain no-repeat}
.post-body li{margin:0 0 6px}
.post-body code{font-family:var(--font-mono);font-size:0.88em;background:var(--surface-raised);border:var(--hairline);border-radius:var(--radius-1);padding:1px 5px}
.post-body img{max-width:100%;height:auto;border:var(--hairline);border-radius:var(--radius-2)}
.follow-up{display:flex;align-items:center;gap:14px;margin:30px 0;padding:14px 18px;border:var(--hairline);border-radius:var(--radius-2);text-decoration:none}
.follow-up span{font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.fu-label{color:var(--text-faint);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.post-nav{display:flex;justify-content:space-between;gap:16px;border-top:var(--hairline);padding:18px 0 8px;font-family:var(--font-mono);font-size:12px;margin-top:40px}
.post-nav a{color:var(--accent);text-decoration:none}

.progress-mark{position:fixed;top:66vh;right:28px;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:20}
.pm-stack{position:relative;display:inline-block;line-height:0}
.pm-base{color:var(--text-faint);opacity:0.3}
.pm-fill{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.pm-pct{font-family:var(--font-mono);font-size:10px;color:var(--text-faint)}

/* ---------- artifacts & code (Artifact.jsx / CodeBlock.jsx) ---------- */
.artifact{margin:28px 0}
.artifact-frame{border:var(--hairline);border-radius:var(--radius-2);overflow:hidden}
/* Labels sind laut Vorlage lowercase mono; nur das stdout/kind-Tag rechts ist caps */
.artifact-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 14px;background:var(--surface-raised);border-bottom:var(--hairline);font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:0.04em}
.artifact-head span:last-child{text-transform:uppercase}
.artifact-head .artifact-file{text-transform:none;color:var(--text-muted)}
.artifact-pre{margin:0;padding:16px 20px;background:var(--code-bg);color:var(--code-text);font-family:var(--font-mono);font-size:13.5px;line-height:1.65;overflow-x:auto;tab-size:2}
.figcap{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);margin-top:8px}
/* Bild-Tafeln: heller Grund, weil die Story-SVGs fuer helle Flaechen gebaut sind */
.artifact-img-wrap{background:#F4F5F7;line-height:0}
.artifact-img{display:block;width:100%;height:auto}
.figno{color:var(--accent)}
.code-scroll{background:var(--code-bg);overflow-x:auto}
.code-pre{margin:0;padding:14px 0;font-family:var(--font-mono);font-size:13.5px;line-height:1.7;color:var(--code-text);min-width:max-content;tab-size:2}
.c-row{display:flex;padding:0 20px 0 0}
.c-row.c-hl{background:rgba(214,147,91,0.08)}
.c-no{width:5ch;flex:none;text-align:right;padding-right:1.5ch;color:var(--code-lineno);user-select:none;white-space:pre}
.c-hl .c-no{color:#D6935B}
.c-com{color:var(--code-comment);font-style:italic}
.c-str{color:#E3AD7F}
.c-kw{color:#C9D4DD;font-weight:600}
.c-num{color:#EFC9A8}

/* ---------- differently (Differently.jsx) ---------- */
.differently{border-top:1px solid var(--accent-deep);background:var(--surface-raised);border-radius:0 0 var(--radius-2) var(--radius-2);padding:24px 28px;margin:36px 0}
.differently h2{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--accent-on-raised)}
.differently div{font-size:16px;line-height:1.65;color:var(--text-body);max-width:62ch}

/* ---------- rubric pages (RubricItem.jsx) ---------- */
.rubric-list{border-top:var(--hairline);margin-top:8px}
.rubric-item{display:grid;grid-template-columns:30px 1fr;gap:18px;align-items:start;padding:20px 4px;border-bottom:var(--hairline);text-decoration:none;color:var(--text-body)}
.rubric-item:has(.thumb){grid-template-columns:150px 1fr}
.rubric-item.is-last{border-bottom:none}
.ri-mark{color:var(--text-faint);margin-top:5px;transition:color var(--dur-fast) var(--ease-precise)}
.rubric-item:hover .ri-mark{color:var(--accent)}
.ri-title{display:block;font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.3;transition:color var(--dur-fast) var(--ease-precise)}
.rubric-item:hover .ri-title{color:var(--accent)}
.ri-desc{display:block;font-size:15px;line-height:1.6;color:var(--text-muted);margin:6px 0 8px;max-width:58ch}
.ri-meta{display:inline-block;font-family:var(--font-mono);font-size:12px;color:var(--text-faint);margin-right:10px}
.ri-tag{vertical-align:1px}
.ri-pending{font-style:italic}
.rubric-item.is-stub{cursor:default}
.thumb{width:150px;height:94px;display:flex;align-items:center;justify-content:center;background:var(--surface-card);border:var(--hairline);border-radius:var(--radius-1)}
.thumb span{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);text-align:center;line-height:1.5}

/* ---------- footer (SiteFooter.jsx) ---------- */
.site-footer{margin-top:var(--space-9);border-top:var(--hairline)}
.footer-col{display:flex;flex-direction:column;gap:26px;padding-top:36px;padding-bottom:44px}
.footer-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer-tag{font-family:var(--font-mono);font-size:13px;color:var(--text-muted)}
.footer-about{margin-left:auto;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
.footer-center{display:flex;flex-direction:column;align-items:center;gap:14px}
.cat-cmds{font-family:var(--font-mono);font-size:12px;line-height:1.7;display:flex;flex-wrap:wrap;justify-content:center;column-gap:24px;row-gap:10px;max-width:560px;color:var(--text-faint)}
.cat-cmds span{white-space:nowrap;transition:color var(--dur-fast) var(--ease-precise)}
.cat-cmds span:hover{color:var(--accent)}
.footer-copy{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);text-align:center}

/* ---------- Scroll-Effekt: Emissionslinie am oberen Rand ----------
   Zwei Ebenen, beide scroll-gebunden: eine kupferne Fortschrittslinie und
   darunter ein schwaches Spektrallinien-Muster, das mit dem Fortschritt
   heller wird. Instrumenten-Anmutung statt Fortschrittsbalken. Wird von
   fx.js ueber --sl-progress gesetzt und ist ueber prefs abschaltbar. */
.scroll-line{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none;opacity:0;
  transition:opacity var(--dur-base) var(--ease-precise)}
.js[data-scrollfx="on"] .scroll-line{opacity:1}
.scroll-line::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 60%,var(--accent-strong));
  transform:scaleX(var(--sl-progress,0));transform-origin:0 50%;
  box-shadow:var(--glow-copper)}
.scroll-line::after{content:'';position:absolute;inset:0;opacity:calc(0.25 + var(--sl-progress,0) * 0.55);
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:1px 100%;
  background-position:11% 0,24% 0,38% 0,57% 0,71% 0,93% 0;color:var(--accent-strong)}

/* ---------- 404 ---------- */
.nf{padding-top:64px}
.nf-cmds{justify-content:flex-start;max-width:100%;margin:26px 0 34px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .home-grid{grid-template-columns:1fr;gap:36px}
  .hero-copy{max-width:100%}
  /* Das Render wandert aus dem Textbereich nach oben rechts und wird blasser:
     Fliesstext auf einem Foto ist schlecht lesbar und der Kontrast dort ist
     nicht pruefbar. */
  .hero-render{opacity:0.3;max-width:78%;height:360px;top:-90px;right:-60px}
  .progress-mark{display:none}
}
@media (max-width:680px){
  /* Hero-Render auf Mobil: oben mittig im Hintergrund. Die Maske laeuft nach
     ~260px aus und der Text startet erst darunter (padding-top), damit er nie
     auf dem Foto liegt — Kontrast auf Bildgrund waere nicht pruefbar. */
  .hero-render{display:block;width:520px;max-width:none;height:420px;
    top:-70px;right:auto;left:calc(50% - 260px);opacity:0.55;
    -webkit-mask-image:radial-gradient(300px 240px at 50% 34%,#000 30%,transparent 68%);
    mask-image:radial-gradient(300px 240px at 50% 34%,#000 30%,transparent 68%)}
  .hero{min-height:0}
  .hero-copy{padding-top:252px;padding-bottom:44px}
  .hero-sig{position:static;align-self:flex-start;margin-top:18px}
}
@media (max-width:680px){
  .shell{padding:0 20px}
  /* mehr Luft: Oberkante -> Logo und Header -> erster Inhalt */
  .header-row{flex-wrap:wrap;row-gap:12px;padding-top:30px;padding-bottom:24px}
  .content-col .crumb{margin-top:44px}
  .brand .mark{--mark-size:44px}
  .brand-name{font-size:21px}
  .brand-tag{padding-left:0;white-space:normal}
  .site-nav{margin-left:0;flex-wrap:wrap;gap:14px;width:100%;padding-top:0}
  .hero-sig{right:20px;bottom:12px}
  .hero-h1{font-size:34px}
  .post-h1{font-size:30px}
  .prefs{right:20px;left:20px;width:auto}
  .rubric-item:has(.thumb){grid-template-columns:1fr}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .sl-g{display:none}
  .sl-jit .sl-base{animation:none}
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important}
}