/* ============================================================ Jägerprüfung Quiz – Design-System: Variablen & Reset Aesthetic: Dark Editorial Hunting — präzise, geerdet, edel Fonts: "Playfair Display" (Display) + "DM Sans" (Body) ============================================================ */ /* Fonts werden per im jeder HTML-Seite geladen (non-blocking) */ /* ── CSS-Variablen ────────────────────────────────────────── */ :root { /* Primärpalette: Tiefes Waldgrün */ --c-bg: #0d1410; /* fast schwarzes Waldgrün */ --c-bg-2: #111a14; /* Karten-Hintergrund */ --c-bg-3: #162018; /* erhöhte Elemente */ --c-bg-4: #1c2a1e; /* hover-Zustand */ /* Grüne Akzente */ --c-green-900: #0a2412; --c-green-800: #0f3318; --c-green-700: #174d24; --c-green-600: #1f6930; --c-green-500: #2a8840; /* Primär-Akzent */ --c-green-400: #3aaa54; /* Hover */ --c-green-300: #5ec877; /* Hell-Akzent */ --c-green-200: #93dba6; --c-green-100: #cff0d8; /* Goldene Akzente (Trophäen, Highlights) */ --c-gold-500: #b8860b; --c-gold-400: #d4a017; --c-gold-300: #e8bc3a; --c-gold-200: #f5d478; --c-gold-glow: rgba(212, 160, 23, 0.15); /* Semantische Farben */ --c-correct: #2ea84e; --c-correct-bg: rgba(46, 168, 78, 0.12); --c-wrong: #c0392b; --c-wrong-bg: rgba(192, 57, 43, 0.12); --c-warn: #e67e22; --c-warn-bg: rgba(230, 126, 34, 0.12); --c-info: #2980b9; /* Text */ --c-text-primary: #e8f0e9; --c-text-secondary: #8fa894; --c-text-muted: #566b5c; --c-text-inverse: #0d1410; /* Borders */ --c-border: rgba(42, 136, 64, 0.18); --c-border-hover: rgba(42, 136, 64, 0.45); --c-border-active: var(--c-green-500); /* Glow-Effekte */ --glow-green: 0 0 20px rgba(42, 136, 64, 0.35), 0 0 60px rgba(42, 136, 64, 0.12); --glow-green-sm: 0 0 8px rgba(42, 136, 64, 0.4); --glow-gold: 0 0 20px rgba(212, 160, 23, 0.35); --glow-card: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4); /* Typografie */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --font-mono: 'DM Mono', 'Courier New', monospace; /* Schriftgrößen (fluid) */ --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem; --fs-5xl: 3.75rem; /* Abstände */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* Radius */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px; /* Übergänge */ --t-fast: 150ms ease; --t-mid: 250ms ease; --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --t-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Layout */ --max-w: 1100px; --max-w-sm: 640px; --max-w-md: 768px; --sidebar-w: 260px; --header-h: 64px; } /* ── CSS-Reset ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 400; line-height: 1.6; color: var(--c-text-primary); background-color: var(--c-bg); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Noise-Textur-Overlay (subtile Körnung über allem) */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; } input, textarea, select { font-family: inherit; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.25; font-weight: 600; } /* ── Scrollbar ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--c-bg); } ::-webkit-scrollbar-thumb { background: var(--c-green-700); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--c-green-500); } /* ── Textauswahl ──────────────────────────────────────────── */ ::selection { background: rgba(42, 136, 64, 0.35); color: var(--c-green-100); }