/* ============================================================ HostingPlus — Design Tokens -------------------------------------------------------------- Alle Werte wurden 1:1 aus den Prototypen extrahiert. Diese Datei ist die Single Source of Truth für Farben, Radien, Schatten, Typo-Stack. Bei Abweichungen zwischen dieser Datei und den HTML-Prototypen gilt DIESE Datei. -------------------------------------------------------------- Einbindung in der neuen App: oder als Tailwind-Preset (siehe README § Tailwind-Mapping). ============================================================ */ :root { /* ---------- Brand: Red (Primary CTA / Akzent) ---------- */ --red: #D81818; --red-soft: #FCEAEA; --red-hover: #B91313; /* ---------- Brand: Teal (Primary / Headlines / Dark UI) ---------- */ --teal: #075858; --teal-soft: #E6F0F0; --teal-hover: #053F3F; /* ---------- Ink (Text-Stufen) ---------- */ --ink: #0D3838; /* Default body text, H1–H3 */ --ink-2: #194848; /* Secondary body */ --ink-3: #3F5858; /* Captions, metadata */ --mid: #6B6B72; /* Muted labels */ /* ---------- Dark-Surfaces (Portal-Dark-Header, Footer) ---------- */ --surface-dark: #0A4747; --surface-dark-2: #0D5454; /* ---------- Lines (Borders, Dividers) ---------- */ --line: #E7E5E0; --line-2: #D7D5CF; /* ---------- Paper (App-BG, subtle panels) ---------- */ --paper: #FAFAF8; --paper-2: #F2F0EA; /* ---------- Cream (warm section BG) ---------- */ --cream: #F2E8D5; --cream-2: #EADFC6; /* ---------- White ---------- */ --white: #FFFFFF; /* ---------- Semantic: Success / Amber / Mustard ---------- */ --green: #15803D; /* WCAG-AA tauglich auf weissem BG (Kontrast 4.79) */ --green-bg: #1F8A4C; /* Hellere Variante fuer farbige Backgrounds/Pills */ --green-soft: #E6F4EC; --amber: #C58B1B; /* warning state */ --amber-soft: #FAF1DE; /* ---------- Mustard (Highlight: „Beliebteste Wahl", Sterne) ---------- */ --mustard: #D9A42E; --mustard-soft: #FBF2D9; --mustard-ink: #8A6410; /* ---------- Radius ---------- */ --radius: 10px; /* Buttons, Inputs, kleine Cards */ --radius-lg: 14px; /* große Cards, Modals */ /* ---------- Schatten ---------- */ --shadow-sm: 0 1px 0 rgba(11,11,12,.04), 0 1px 2px rgba(11,11,12,.04); --shadow-md: 0 1px 0 rgba(11,11,12,.04), 0 6px 20px -8px rgba(11,11,12,.12); --shadow-lg: 0 2px 0 rgba(11,11,12,.04), 0 30px 60px -30px rgba(11,11,12,.25); /* ---------- Typo-Stacks ---------- */ --font-sans: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- Spacing (Verwendung als Referenz, NICHT im CSS verwendet) ---------- */ /* Siehe README § Spacing-System für die Scale. */ } /* ============================================================ Dark Mode — wird über [data-theme="dark"] auf oder aktiviert. Nur im Kundenportal relevant. ============================================================ */ [data-theme="dark"] { --ink: #F5F5F2; --ink-2: #E4E4DF; --ink-3: #B8B8B2; --mid: #8A8A84; --surface-dark: #0A3838; --surface-dark-2: #0D4747; --line: #262629; --line-2: #35353A; --paper: #0B0B0D; --paper-2: #131316; --cream: #1A1612; --cream-2: #221C14; --white: #17171A; --red-soft: #2A0F11; --teal-soft: #0F2424; --green-soft: #0F2418; --amber-soft: #2A2010; --mustard-soft: #2A2210; --shadow-sm: 0 1px 0 rgba(0,0,0,.3); --shadow-md: 0 8px 24px -10px rgba(0,0,0,.6); --shadow-lg: 0 30px 60px -30px rgba(0,0,0,.8); } /* ============================================================ Globaler Reset + Typografie-Basis Diese 3 Regeln sind verpflichtend zu übernehmen. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--font-serif); color: var(--teal); letter-spacing: -0.015em; line-height: 1.05; font-weight: 400; /* Instrument Serif wirkt schon kräftig bei 400 */ } h1 em, h2 em, h3 em { font-style: italic; color: var(--red); } code, kbd, pre, .mono { font-family: var(--font-mono); } /* ============================================================ Accessibility — Skip-Link (WCAG 2.2 / BFSG) Wird beim Tab-Fokus sichtbar oben links eingeblendet. ============================================================ */ .skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 10000; } .skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; padding: 12px 20px; background: var(--paper, #fff); color: var(--ink, #111); border: 2px solid var(--red, #e21b23); border-radius: 8px; font: 600 14px/1.2 var(--font-sans, system-ui, sans-serif); text-decoration: none; box-shadow: 0 6px 24px rgba(0,0,0,.18); outline: none; } /* Visually-hidden helper: Inhalt fuer Screenreader, optisch unsichtbar. Auf Fokus sichtbar machen, falls auf Interaktiv-Element angewendet. */ .visually-hidden, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .visually-hidden:focus, .sr-only:focus { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }