/* Die zwei Schriften, selbstgehostet aus /static/schrift/ — dieselben Dateien, die tools/bauen.js in die Demo einbettet. Bis 2026-09-11 nannte `--sans` hier Inter und NIEMAND lud es: diese Seiten liefen die ganze Zeit in der Systemschrift, waehrend die Anwendung daneben Inter zeigte. Eine Schrift, die man nur deklariert, ist keine. */ @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap; src:url('/static/schrift/source-sans-3-latin-roman.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap; src:url('/static/schrift/source-sans-3-latin-ext-roman.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap; src:url('/static/schrift/jetbrains-mono-latin-roman.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* tokens.css — Farben, Schrift, Reset und die zwei Dinge, die jede Seite teilt: der Sprunglink und der Knopf. sanitaetshaus.css setzt darauf auf (--dim, --border, die Schriftfamilie); ohne diese Datei stünde die Seite in Serifen ohne Raster. ⚠ Dieser Kopf behauptete bis zum 2026-09-11, das Blog-Layout sei beim Herauslösen (08.09.2026) drüben geblieben. Es ist mitgekommen und lag hier tot: .page, .hero, .tools, .tool-list, .blog-list-*, .foot und die ganze Syntax-Palette — 23 von 48 Klassen, die KEINE Seite benutzt, 4.539 von 10.638 Byte, auf jeder Seite mit ausgeliefert. Dazu ein Abschnittskopf „Site nav", unter dem nie eine Regel stand. Die Probe in test/repo.test.js zählt das jetzt nach, damit es nicht wieder wächst. */ /* martymonero — base styles. Tokens + reset + page chrome. Same token architecture as the hexenwerkzeug lab theme (blog.css / admin.css consume these names); the palette is this site's own: warm copper on near-black. */ :root { color-scheme: dark; /* Background layers — every panel/card picks one. */ --bg: #0a0a0b; --surface: #131316; --surface-2: #18181d; --elevated: #1f1f25; --border: #26262d; --border-strong:#2f2f37; /* Text hierarchy — color alone signals weight. */ --text: #e8e8ec; --dim: #8a8a93; --faint: #5a5a63; /* Accent + semantic */ --accent: #fb923c; --accent-d: #f97316; --accent-dim: rgba(251, 146, 60, 0.10); --blue: #60a5fa; --purple: #c084fc; --amber: #f59e0b; --cyan: #22d3ee; --rose: #fb7185; --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --radius: 8px; --radius-sm: 4px; --gap: 0.75rem; } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; } :where(html) { font: 14px/1.5 var(--sans); color: var(--text); background: var(--bg); tab-size: 2; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } :where(body) { margin: 0; min-block-size: 100dvh; } :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; } :where(p, ul, ol, dl, pre, figure) { margin: 0; } :where(ul, ol) { padding: 0; list-style: none; } :where(a) { color: var(--accent); text-decoration: none; } :where(a:hover) { text-decoration: underline; text-underline-offset: 3px; } :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :where(code, kbd, samp, pre) { font-family: var(--mono); font-size: 0.92em; } :where(:not(pre) > code) { background: var(--surface); border: 1px solid var(--border); padding: 0.05em 0.4em; border-radius: var(--radius-sm); color: var(--accent); } :where(pre) { background: #08080a; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; overflow: auto; color: var(--dim); line-height: 1.7; } :where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } :where(::selection) { background: var(--accent); color: var(--bg); } /* Scrollbar that doesn't fight the theme. */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: #3f3f46; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Skip link — first focusable element on every page. */ .skip-link { position: absolute; inset-inline-start: 0.5rem; inset-block-start: 0.5rem; padding: 0.4rem 0.75rem; background: var(--accent); color: var(--bg); border-radius: var(--radius-sm); transform: translateY(-200%); z-index: 100; } .skip-link:focus { transform: none; } /* ─── Buttons — opt-in via .btn; semantic