/* ============================================================ JOBCENTER INSIGHTS — GEMEINSAMES DESIGN-SYSTEM (R0) Richtung: „Moderne Frische" — Apfelgrün-Marke, behördennah-seriös, aber lebendiger: weiche Verläufe, dezentes Glas, sanfte Schatten, ruhige Mikro-Interaktionen. Gilt für alle drei Seiten (jobcenter-insights.de / member. / tickets.). Vanilla CSS, keine externen Schriften/CDNs. Segoe UI als System-Font. ============================================================ */ :root { /* ---- Marke (Apfelgrün) ---- */ --brand-50: #f3fae4; --brand-100: #e6f5c8; --brand-200: #cfe89a; --brand-300: #b3da63; --brand-400: #9bd02e; --brand: #93ce18; /* Primär */ --brand-600: #7ab012; --brand-700: #64b400; /* Verlaufs-Ende */ --brand-800: #4c8500; --brand-900: #3a6600; --brand-gradient: linear-gradient(135deg, #93ce18 0%, #64b400 100%); --brand-gradient-soft: linear-gradient(135deg, #a6da3a 0%, #74c40a 100%); /* ---- Neutrale (kühl, modern) ---- */ --ink-900: #0f172a; /* Überschriften */ --ink-700: #1e293b; --ink-600: #334155; /* Fließtext */ --ink-500: #52606d; --ink-400: #94a3b8; /* gedämpft */ --line: #e6e9ee; /* Rahmen */ --line-soft:#eef1f5; --surface: #ffffff; /* Karten */ --surface-2:#f7f9fb; --bg: #f5f7fa; /* Seitenhintergrund */ /* ---- Status ---- */ --success: #43c46b; --success-bg: #e9f9ef; --warning: #f4b740; --warning-bg: #fff7e6; --danger: #ff6348; --danger-bg: #fdecea; --info: #4facfe; --info-bg: #eaf5ff; /* ---- Typografie ---- */ --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --fs-eyebrow: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 18px; --fs-h3: clamp(18px, 2.2vw, 22px); --fs-h2: clamp(24px, 3.4vw, 34px); --fs-h1: clamp(32px, 5vw, 54px); --lh: 1.6; --tracking-eyebrow: .12em; /* ---- Abstände (4er-Raster) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---- Radien ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- Elevation (weiche, geschichtete Schatten) ---- */ --sh-1: 0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05); --sh-2: 0 4px 14px rgba(15,23,42,.08); --sh-3: 0 14px 34px rgba(15,23,42,.12); --sh-brand: 0 10px 26px rgba(100,180,0,.28); --ring: 0 0 0 4px rgba(147,206,24,.18); /* ---- Bewegung ---- */ --t-fast: .15s ease; --t: .22s cubic-bezier(.22,.61,.36,1); /* ---- Layout ---- */ --maxw: 1180px; --maxw-narrow: 820px; } /* ============================================================ BASIS — bewusst NICHT-invasiv ------------------------------------------------------------ tokens.css liefert NUR Tokens (:root) + opt-in .ds-* Bausteine + Utilities. Es überschreibt KEINE blanken Element-Stile (h1/h2/h3/p/a/ body) der Host-Seite — sonst würden bestehende Layouts/Farben/Abstände zerschossen (z. B. weiße Hero-Überschriften würden dunkel). Greenfield-Seiten (preview.html, Tickets-Seite) bringen ihre eigene Basis mit ODER nutzen direkt die .ds-* Klassen. ============================================================ */ /* Optionaler Voll-Reset NUR für Seiten, die ihn explizit wollen: aktiviert die Design-System-Typografie. */ .ds-base { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh); color: var(--ink-600); -webkit-font-smoothing: antialiased; } .ds-base h1, .ds-base h2, .ds-base h3 { color: var(--ink-900); line-height: 1.2; margin: 0 0 var(--sp-3); } .ds-base h1 { font-size: var(--fs-h1); letter-spacing: -.02em; font-weight: 800; } .ds-base h2 { font-size: var(--fs-h2); letter-spacing: -.01em; font-weight: 800; } .ds-base h3 { font-size: var(--fs-h3); font-weight: 700; } .ds-base p { margin: 0 0 var(--sp-4); } .ds-base a { color: var(--brand-800); text-decoration: none; transition: color var(--t-fast); } .ds-base a:hover { color: var(--brand-600); } .ds-base img { max-width: 100%; display: block; } /* box-sizing nur auf die Bausteine selbst (kein globaler *-Reset) */ [class*="ds-"] { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { .ds-reveal, .ds-btn, .ds-card { transition: none; } } /* ============================================================ LAYOUT-HILFEN ============================================================ */ .ds-container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); } .ds-narrow { max-width: var(--maxw-narrow); } .ds-section { padding: var(--sp-9) 0; } .ds-stack > * + * { margin-top: var(--sp-4); } .ds-grid { display: grid; gap: var(--sp-5); } .ds-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ds-grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .ds-center { text-align: center; } /* Weicher Mesh-/Glow-Hintergrund (Marke, sehr dezent) */ .ds-mesh { background: radial-gradient(40% 50% at 12% 8%, rgba(147,206,24,.16), transparent 60%), radial-gradient(36% 48% at 88% 18%, rgba(100,180,0,.12), transparent 58%), radial-gradient(50% 60% at 50% 100%, rgba(67,196,107,.08), transparent 60%), var(--bg); } /* ============================================================ TYPO-DETAILS ============================================================ */ .ds-eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-800); } .ds-lead { font-size: var(--fs-lg); color: var(--ink-500); } .ds-muted { color: var(--ink-400); } .ds-gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ BUTTONS ============================================================ */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font: inherit; font-weight: 700; font-size: var(--fs-base); padding: 12px 22px; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); text-decoration: none; } .ds-btn:hover { transform: translateY(-2px); } .ds-btn:active { transform: translateY(0); } .ds-btn--primary { background: var(--brand-gradient); color: #fff; box-shadow: var(--sh-brand); } .ds-btn--primary:hover { box-shadow: 0 13px 30px rgba(100,180,0,.36); color: #fff; } .ds-btn--ghost { background: rgba(255,255,255,.7); color: var(--ink-700); border-color: var(--line); box-shadow: var(--sh-1); } .ds-btn--ghost:hover { border-color: var(--brand-300); background: #fff; } .ds-btn--outline { background: transparent; color: var(--brand-800); border-color: var(--brand-300); } .ds-btn--outline:hover { background: var(--brand-50); } .ds-btn--sm { padding: 8px 16px; font-size: var(--fs-sm); } .ds-btn--lg { padding: 15px 28px; font-size: var(--fs-lg); } /* ============================================================ KARTEN ============================================================ */ .ds-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .ds-card h3 { transition: color var(--t-fast); } .ds-card--hover:hover { transform: translateY(-4px); border-color: var(--brand-400); box-shadow: 0 16px 36px rgba(100,180,0,.20), 0 4px 12px rgba(100,180,0,.10); } .ds-card--hover:hover h3 { color: var(--brand-700); } .ds-card--hover:hover .ds-card__icon { border-color: var(--brand-300); background: linear-gradient(135deg, var(--brand-100), #fff); } .ds-card__icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--r-md); background: linear-gradient(135deg, var(--brand-50), #fff); border: 1px solid var(--brand-100); margin-bottom: var(--sp-3); transition: background var(--t), border-color var(--t); } .ds-card__icon img { width: 30px; height: 30px; object-fit: contain; } /* Glas-Variante */ .ds-glass { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.85); border-radius: var(--r-lg); box-shadow: var(--sh-2); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); } /* ============================================================ BADGES / PILLEN ============================================================ */ .ds-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-800); } .ds-badge--success { background: var(--success-bg); color: #1b7a3d; } .ds-badge--warning { background: var(--warning-bg); color: #946400; } .ds-badge--danger { background: var(--danger-bg); color: #b3341f; } .ds-badge--info { background: var(--info-bg); color: #1a6fb0; } .ds-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ============================================================ FORM-ELEMENTE (Basis) ============================================================ */ .ds-field { display: grid; gap: 6px; } .ds-label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700); } .ds-input, .ds-select, .ds-textarea { font: inherit; width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: #fff; color: var(--ink-700); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } /* ============================================================ DEKO / TRENNER ============================================================ */ .ds-divider { height: 1px; background: var(--line); border: 0; margin: var(--sp-6) 0; } .ds-kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; color: var(--ink-600); } /* Sanftes Einblenden beim Scrollen (Klasse via JS toggeln: .is-in) */ .ds-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--t), transform .6s var(--t); } .ds-reveal.is-in { opacity: 1; transform: none; }