/* ============================================================ sirwis – zentrales Design-System (hell, professionell) Inspiriert von Fintech-/Marktplatz-UIs (Stripe, Wise, Upwork, Fiverr) ============================================================ */ :root { --bg: #ffffff; --bg-subtle: #f8fafc; --bg-muted: #f1f5f9; --text: #0f172a; --text-soft: #475569; --text-muted: #64748b; --border: #e6e8ee; --border-strong: #cbd5e1; --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #eef2ff; --accent: #06b6d4; --success: #16a34a; --success-light: #dcfce7; --warning: #b45309; --warning-light: #fef3c7; --danger: #dc2626; --danger-light: #fee2e2; --ring: rgba(79, 70, 229, 0.16); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08); --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.12); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 22px; --maxw: 1120px; /* Seitenbreiten — Spiegel der SPA-Tokens; neue Seiten verwenden diese statt eigener px-Deckel. */ --w-form: 480px; --w-reading: 820px; --w-content: 1440px; --w-work: 2080px; --page-gutter: clamp(24px, 2.5vw, 48px); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Typo-Skala (EINE Quelle) — dieselben Tokens wie in der SPA (index.css). */ --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --surface: #ffffff; --surface-trans: rgba(255, 255, 255, 0.82); color-scheme: light; } /* Dark-Theme — site-weit über [data-theme="dark"] auf (Boot-Snippet + theme.js). Überschreibt dieselben Token-Namen; alles Token-basierte flippt automatisch. Flächen mit hartcodiertem #fff wurden auf var(--surface) umgestellt, damit auch sie mitflippen. */ :root[data-theme="dark"] { --bg: #0b1220; --bg-subtle: #0f172a; --bg-muted: #1e293b; --surface: #131c2e; --surface-trans: rgba(11, 18, 32, 0.82); --text: #e2e8f0; --text-soft: #aab6c8; --text-muted: #8b97a8; --border: #243349; --border-strong: #364862; --primary: #4f46e5; --primary-dark: #818cf8; --primary-light: #252a52; --accent: #22d3ee; --success: #22c55e; --success-light: #143123; --warning: #fbbf24; --warning-light: #3a2e12; --danger: #f87171; --danger-light: #3a1b1b; --ring: rgba(99, 102, 241, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.6); color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* Layout */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; } .section { padding: 80px 0; } .section-sm { padding: 48px 0; } .bg-subtle { background: var(--bg-subtle); } .bg-muted { background: var(--bg-muted); } .text-center { text-align: center; } /* Typography */ h1, h2, h3, h4 { color: var(--text); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .display { font-size: clamp(34px, 5.2vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.07; } .h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.025em; } .h3 { font-size: 20px; font-weight: 700; } .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--text-soft); } .muted { color: var(--text-muted); } .eyebrow { color: var(--primary); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .grad-text { background: linear-gradient(120deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Brand */ .brand { font-weight: 800; font-size: 22px; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 9px; color: var(--text); } .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1; padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-dark); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-subtle); } .btn-ghost { background: transparent; color: var(--text-soft); } .btn-ghost:hover { background: var(--bg-subtle); color: var(--text); } .btn-danger { background: var(--surface); color: var(--danger); border-color: #fecaca; } .btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 12px; } .btn-sm { padding: 8px 14px; font-size: 14px; border-radius: 8px; } .btn-block { width: 100%; } /* Nav */ .site-nav { position: sticky; top: 0; z-index: 50; background: var(--surface-trans); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .site-nav .inner { /* Voll-Seitenbreite fürs Menü (Amazon-Muster, Owner-Wunsch Teil 330): der Header nutzt die ganze Breite (nur schmale Seitenränder), der Seiteninhalt darunter bleibt in seinem --maxw-Container zentriert. Hält den öffentlichen Header deckungsgleich mit dem SPA-Header (SiteNav.css .swnav-inner). */ max-width: none; display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 14px; } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-link { padding: 8px 12px; border-radius: 8px; color: var(--text-soft); font-weight: 500; font-size: 15px; } .nav-link:hover { background: var(--bg-subtle); color: var(--text); } .nav-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; } @media (max-width: 720px) { .nav-hide-mobile { display: none; } } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); } .card-hover { transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } /* Forms */ .field { margin-bottom: 18px; } .label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 7px; } .label .opt { color: var(--text-muted); font-weight: 400; } .input, .select, .textarea { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--text); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .textarea { resize: vertical; min-height: 120px; } .input::placeholder, .textarea::placeholder { color: #94a3b8; } .input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); } /* a11y: sichtbarer Tastatur-Fokus auf allen interaktiven Elementen (nicht nur Inputs) — AGENTS.md verlangt einen :focus-visible-Ersatz für entferntes outline. Nur bei Tastatur-Fokus, damit Maus-Klicks keinen Ring zeigen. */ a:focus-visible, button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible, summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; } /* a11y: Skip-Link „Zum Inhalt springen" (WCAG 2.4.1). Per nav.js auf jeder Seite injiziert; visuell versteckt, bis er Tastatur-Fokus erhält. Das Sprungziel (erstes
/Hero/Abschnitt) bekommt dort id + tabindex=-1. */ .skip-link { position: absolute; left: 8px; top: -56px; z-index: 1000; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 8px; } /* Per Skip-Link fokussiertes Sprungziel zeigt keinen Ring (Container, nicht Bedienelement). */ [tabindex="-1"]:focus { outline: none; } /* a11y: Bewegungsreduktion respektieren (WCAG 2.3.3) — AGENTS.md verlangt einen prefers-reduced-motion-Block, wo Animationen/Transitionen laufen. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .select option { color: var(--text); } /* Einheitlicher Select-Chevron für ALLE statischen