/* ================================================================ theme.css — Globales Design-System Enthält: Typscale, 5 Akzentfarben, Neutral-Tokens (Light/Dark), Buttons, Info-Panels, Blog-Entries, Level-Dots, Page-Intro Section-spezifische Farben & Textschnitte: biologie/theme.css etc. ================================================================ */ /* ── 1. FONTS & TYPSCALE ─────────────────────────────────────── */ :root { --font-display: 'IBM Plex Mono', 'Courier New', monospace; --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; /* Typscale — clamp(min, fluid, max) */ --t-display: clamp(2.2rem, 5vw, 3.5rem); /* Hero-Überschriften */ --t-h1: clamp(1.6rem, 3vw, 2.4rem); /* Seitentitel */ --t-h2: clamp(1.1rem, 2vw, 1.5rem); /* Abschnittstitel */ --t-h3: 1.05rem; /* Karten-Titel */ --t-body: 0.875rem; /* Fließtext */ --t-small: 0.78rem; /* Bildunterschriften */ --t-caption: 0.68rem; /* Meta, Tooltips */ --t-label: 0.6rem; /* Uppercase-Labels */ --t-micro: 0.46rem; /* Mini-Etiketten (z.B. Elementkarten) */ } /* ── 2. AKZENTFARBEN — unveränderlich, kein Light/Dark-Wechsel ─ */ :root { --accent-blue: #4d8aff; /* Physik / Adenin / Quark */ --accent-red: #ff5577; /* Kernchemie / Thymin / Lepton */ --accent-green: #00e06a; /* Radioaktivität / Guanin / Boson */ --accent-amber: #ffb02e; /* Kernchemie-Gold / Cytosin / Hadron */ --accent-purple: #a855f7; /* Epigenetik / Higgs */ /* Kurzaliase */ --a1: var(--accent-blue); --a2: var(--accent-red); --a3: var(--accent-green); --a4: var(--accent-amber); --a5: var(--accent-purple); } /* ── 3. NEUTRAL-TOKENS: DARK (Standard) ─────────────────────── */ /* Alle Seiten außer dem DNA-Scroll sind dark-first. */ /* Light-Overrides folgen direkt darunter. */ :root { --bg: #0d0f14; --bg-soft: #151820; --panel: #1a1e28; --ink: #e2e8f2; --ink-dim: rgba(226, 232, 242, .48); --line: rgba(255, 255, 255, .08); --shadow: rgba(0, 0, 0, .5); --selection: rgba(77, 138, 255, .35); } /* ── 4. NEUTRAL-TOKENS: LIGHT ────────────────────────────────── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #ffffff; --bg-soft: #f4f6f9; --panel: #eef1f5; --ink: #14181f; --ink-dim: #636c7a; --line: #dfe3e9; --shadow: rgba(20, 24, 31, .12); --selection: rgba(77, 138, 255, .2); } } /* Explizite Overrides per JS-Toggle (data-theme auf ) */ :root[data-theme="light"] { --bg: #ffffff; --bg-soft: #f4f6f9; --panel: #eef1f5; --ink: #14181f; --ink-dim: #636c7a; --line: #dfe3e9; --shadow: rgba(20, 24, 31, .12); --selection: rgba(77, 138, 255, .2); } :root[data-theme="dark"] { --bg: #0d0f14; --bg-soft: #151820; --panel: #1a1e28; --ink: #e2e8f2; --ink-dim: rgba(226, 232, 242, .48); --line: rgba(255, 255, 255, .08); --shadow: rgba(0, 0, 0, .5); --selection: rgba(77, 138, 255, .35); } /* ── 5. BASISSTILE ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } ::selection { background: var(--selection); color: var(--ink); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ── 6. TYPOGRAFIE-HELFER ────────────────────────────────────── */ .t-display { font-family: var(--font-display); font-size: var(--t-display); line-height: 1.08; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; } .t-h1 { font-family: var(--font-display); font-size: var(--t-h1); line-height: 1.15; font-weight: 600; letter-spacing: -.03em; text-wrap: balance; } .t-h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 600; letter-spacing: -.02em; } .t-label { font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); } .t-caption { font-family: var(--font-display); font-size: var(--t-caption); color: var(--ink-dim); line-height: 1.5; } .t-mono { font-family: var(--font-display); } /* ── 7. PAGE-INTRO ───────────────────────────────────────────── */ .page-intro { text-align: center; padding: 32px 0 60px; } .page-intro h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 600; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; } .page-intro p { margin-top: 10px; font-size: var(--t-body); color: var(--ink-dim); max-width: 52ch; margin-left: auto; margin-right: auto; line-height: 1.6; } .page-eyebrow { font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 1em; } /* ── 8. BUTTONS ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 6px; border: 1px solid transparent; font-family: var(--font-display); font-size: var(--t-caption); font-weight: 500; letter-spacing: .06em; cursor: pointer; text-decoration: none; transition: background .18s, border-color .18s, color .18s, opacity .18s; white-space: nowrap; line-height: 1; } .btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; } /* Primär — gefüllt mit Akzentfarbe */ .btn-primary { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); } .btn-primary:hover { opacity: .88; } /* Sekundär — subtiler Rand */ .btn-secondary { background: var(--panel); color: var(--ink); border-color: var(--line); } .btn-secondary:hover { background: var(--bg-soft); border-color: var(--ink-dim); } /* Ghost — nur Kontur */ .btn-ghost { background: transparent; color: var(--ink-dim); border-color: var(--line); } .btn-ghost:hover { color: var(--ink); border-color: var(--ink-dim); } /* Inaktiv / deaktiviert */ .btn-inactive, .btn[disabled] { background: transparent; color: var(--ink-dim); border-color: var(--line); opacity: .45; cursor: default; pointer-events: none; } /* Akzent-Varianten über Modifikatoren */ .btn--red { --accent-blue: var(--accent-red); } .btn--green { --accent-blue: var(--accent-green); } .btn--amber { --accent-blue: var(--accent-amber); } .btn--purple { --accent-blue: var(--accent-purple); } /* ── 9. INFO-PANEL ───────────────────────────────────────────── */ .info-panel { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent-blue); border-radius: 6px; padding: 14px 18px; font-size: var(--t-small); color: var(--ink-dim); line-height: 1.65; } .info-panel strong { color: var(--ink); font-weight: 500; } .info-panel--red { border-left-color: var(--accent-red); } .info-panel--green { border-left-color: var(--accent-green); } .info-panel--amber { border-left-color: var(--accent-amber); } .info-panel--purple { border-left-color: var(--accent-purple); } /* ── 10. BLOG-ENTRY (Themen-Übersicht) ──────────────────────── */ .blog-list { display: flex; flex-direction: column; gap: 0; max-width: 1100px; margin: 0 auto; } .blog-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; border-top: 1px solid var(--line); min-height: 320px; } .blog-entry:last-child { border-bottom: 1px solid var(--line); } .blog-text { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .blog-entry.flip .blog-text { order: 2; } .blog-sketch { position: relative; overflow: hidden; background: rgba(255, 255, 255, .02); border-left: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .blog-entry.flip .blog-sketch { order: 1; border-left: none; border-right: 1px solid var(--line); } .blog-sketch svg { width: 100%; height: 100%; max-height: 280px; } .blog-num { font-family: var(--font-display); font-size: var(--t-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-dim); } .blog-title { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); text-wrap: balance; } .blog-teaser { font-size: var(--t-body); color: var(--ink-dim); line-height: 1.65; max-width: 44ch; } .blog-link { font-family: var(--font-display); font-size: var(--t-caption); color: var(--accent-blue); text-decoration: none; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 6px; transition: opacity .18s; } .blog-link:hover { opacity: .75; } @media (max-width: 768px) { .blog-entry { grid-template-columns: 1fr; min-height: auto; } .blog-entry.flip .blog-text, .blog-entry.flip .blog-sketch { order: unset; } .blog-sketch { border-left: none; border-right: none; border-top: 1px solid var(--line); min-height: 220px; } .blog-entry.flip .blog-sketch { border-right: none; } .blog-text { padding: 32px 24px; } } /* ── 11. LEVEL-DOTS ──────────────────────────────────────────── */ .level-dots { display: flex; gap: 5px; align-items: center; } .level-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .level-dot.on { background: var(--accent-blue); } .level-dots[data-color="red"] .level-dot.on { background: var(--accent-red); } .level-dots[data-color="green"] .level-dot.on { background: var(--accent-green); } .level-dots[data-color="amber"] .level-dot.on { background: var(--accent-amber); } .level-dots[data-color="purple"] .level-dot.on { background: var(--accent-purple); } /* ── 12. KACHEL / CARD ───────────────────────────────────────── */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; } .card-title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; color: var(--ink); } .card-body { font-size: var(--t-small); color: var(--ink-dim); line-height: 1.65; } /* Fortschrittsbalken: Struktur + Basis-Gradient leben in nav.css (nav.js erzeugt das Element dort) */