/* ═══════════════════════════════════════════════════════════════════ LUMEDENT — DESIGN-TOKENS (helles Theme) Stand: 2026-08-10 Einbinden VOR allen anderen Stylesheets: Die Variablennamen kollidieren bewusst NICHT mit app.css (dort: --bg, --accent, --text-1). Beide Dateien können parallel existieren, solange die App noch dunkel ist. ═══════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────── 1 · SCHRIFTEN Self-hosted, kein CDN (DSGVO). IBM Plex Sans bewusst OHNE Italic-Datei: Kursiv ist damit technisch nicht verfügbar, nicht nur unerwünscht. Der Browser täuscht keine Kursive vor, er nutzt schlicht die aufrechte Schrift. ─────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/src/fonts/ibm-plex-sans-latin-w100_700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond: ausschließlich für den Logotype. Nirgends sonst. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/src/fonts/cormorant-garamond-latin-w300_400_600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ─────────────────────────────────────────────────────────────────── 2 · FARBEN Drei Rollen, strikt getrennt — das ist der Kern des Systems: NAVY = Marke (Tinte, dunkle Flächen, Primär-CTA) PETROL = Funktion (Links, Fokus, Info) MESSING= Akzent (Logo, Highlights, GKV) Die Website invertiert die Visitenkarte: dort Navy-Fläche mit Messing-Logo, hier Papier-Fläche mit Navy-Tinte. Kontrastwerte in Kommentaren gelten gegen --paper (#FFFFFF). ─────────────────────────────────────────────────────────────────── */ /* Marken-Navy */ --navy: #152A4B; --navy-2: #1F3A60; /* Hover, Flächen mit Tiefe */ --navy-3: #2B4670; /* Linien auf Navy */ --on-navy: #FFFFFF; /* 14.3:1 */ --on-navy-2: rgba(255,255,255,.72); --on-navy-3: rgba(255,255,255,.58); /* Papier — Weiß mit Navy-Stich, nie neutralgrau */ --paper: #FFFFFF; --paper-2: #F4F6FA; /* ruhige Sektionsfläche */ --paper-3: #E9EDF4; /* Trennflächen, Zebra */ /* Tinte — vollständig aus dem Navy abgeleitet */ --ink: #152A4B; /* 14.3:1 — Überschriften */ --ink-2: #414F68; /* 8.2:1 — Fließtext */ --ink-3: #646F87; /* 5.0:1 — Meta, Labels. Untergrenze. */ --line: #E1E6EF; /* Standard-Trennlinie */ --line-2: #C9D1DF; /* betonte Kante, Button-Rand */ /* Petrol — funktional. Bewusst NICHT #3B82F6 (Sonias Revier). */ --primary: #0E6379; /* 6.7:1 */ --primary-600: #0B5265; --primary-700: #084252; --primary-50: #EAF2F5; --primary-line:#BCD5DE; /* Messing — Markenakzent. Als Fläche hell, als Text abgedunkelt. */ --brass: #C9A84C; /* Logo, Flächen, Striche */ --brass-hi: #E4C878; --brass-ink: #8A6B1A; /* 5.0:1 — Messing als Text */ --brass-50: #FBF7EC; --brass-line: #E8D9A8; /* Kassenarten — Konvention aus der App: GKV messing, PKV violett */ --gkv-ink: #8A6B1A; --gkv-bg: #FBF7EC; --gkv-line: #E8D9A8; --pkv-ink: #6A45B5; /* 6.7:1 */ --pkv-bg: #F4F0FC; --pkv-line: #DCD0F2; /* Status — gedeckt, nie signalgrell */ --ok-ink: #1F7A5C; /* 4.9:1 */ --ok-bg: #EDF7F3; --ok-line: #BFE0D3; --warn-ink: #8A5A0B; /* 5.3:1 */ --warn-bg: #FDF6E9; --warn-line: #EBD6AC; --err-ink: #B3242C; /* 5.9:1 */ --err-bg: #FDF0F0; --err-line: #F2C4C6; /* ─────────────────────────────────────────────────────────────────── 3 · TYPOGRAFIE Eine Familie, Hierarchie über Größe und Gewicht statt über Schriftwechsel. Gewichte: 400 Fließtext, 500 Betonung/UI, 600 Überschriften. 700 nur für Kleinstlabels. Nie 800/900. Regel für Laufweite: große Grade brauchen NEGATIVE Laufweite (sonst zerfallen sie), Kleinstlabels POSITIVE (sonst verkleben sie). ─────────────────────────────────────────────────────────────────── */ --font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-logo: 'Cormorant Garamond', Georgia, serif; --fs-display: clamp(38px, 4.9vw, 62px); --fs-h2: clamp(27px, 3.1vw, 40px); --fs-h3: 20px; --fs-h4: 17px; --fs-lead: 18px; /* Vorspann, Hero-Text */ --fs-body: 16px; --fs-sm: 14px; --fs-xs: 13px; --fs-label: 11.5px; /* Uppercase-Kleinstlabel */ --lh-tight: 1.06; /* Display */ --lh-head: 1.18; /* H2/H3 */ --lh-body: 1.62; --lh-loose: 1.72; /* lange Fließtexte */ --ls-display: -0.028em; --ls-head: -0.02em; --ls-body: 0; --ls-label: 0.09em; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; /* ─────────────────────────────────────────────────────────────────── 4 · ABSTÄNDE — 4-px-Raster Sektionsabstände sind absichtlich groß: Weißraum trägt die Hierarchie, damit keine Rahmen und Farbflächen dafür nötig sind. ─────────────────────────────────────────────────────────────────── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10:128px; --gutter: var(--s6); /* Seitenrand Desktop */ --maxw: 1200px; /* ─────────────────────────────────────────────────────────────────── 5 · RADIEN „Leicht abgerundet". Buttons sind KEINE Pillen (999px) — das ist die Signatur generischer KI-Landingpages. Pills nur für echte Chips/Tags, wo die Form eine Bedeutung trägt. ─────────────────────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r: 10px; /* Buttons, Inputs */ --r-lg: 14px; /* Karten */ --r-xl: 20px; /* Modals, große Flächen */ --r-pill: 999px; /* ─────────────────────────────────────────────────────────────────── 6 · SCHATTEN Navy-getönt statt neutralschwarz — dadurch trägt selbst der Schatten einen Anteil der Markenfarbe. Flach und knapp: große weiche Glows sind ein KI-Marker. ─────────────────────────────────────────────────────────────────── */ --sh-1: 0 1px 2px rgba(21,42,75,.08); --sh-2: 0 1px 3px rgba(21,42,75,.09), 0 4px 12px rgba(21,42,75,.07); --sh-3: 0 2px 6px rgba(21,42,75,.07), 0 14px 34px rgba(21,42,75,.11); --sh-navy: 0 1px 2px rgba(21,42,75,.30), 0 6px 18px -6px rgba(21,42,75,.42); /* ─────────────────────────────────────────────────────────────────── 7 · BEWEGUNG Kurz und beiläufig. Nichts soll „auffahren". ─────────────────────────────────────────────────────────────────── */ --ease: cubic-bezier(.2,.7,.3,1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms; } /* ═══════════════════════════════════════════════════════════════════ 8 · TYPO-KLASSEN Größe, Zeilenhöhe und Laufweite gehören zusammen — deshalb als Klasse statt als drei einzelne Variablen am Einsatzort. ═══════════════════════════════════════════════════════════════════ */ .t-display { font-size: var(--fs-display); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--ink); } .t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semi); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--ink); } .t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: 1.3; letter-spacing: -0.012em; color: var(--ink); } .t-h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: 1.35; letter-spacing: -0.008em; color: var(--ink); } .t-lead { font-size: var(--fs-lead); font-weight: var(--fw-normal); line-height: var(--lh-body); color: var(--ink-2); } .t-body { font-size: var(--fs-body); font-weight: var(--fw-normal); line-height: var(--lh-body); color: var(--ink-2); } .t-sm { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); } .t-xs { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3); } .t-label { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); } /* Zahlen und Abrechnungscodes: gleiche Ziffernbreite, damit untereinander stehende Codes eine saubere Spalte bilden. */ .t-num { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* ═══════════════════════════════════════════════════════════════════ 9 · BUTTONS ═══════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font-family: inherit; font-size: 15px; font-weight: var(--fw-medium); line-height: 1; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; padding: 13px 20px; border-radius: var(--r); border: 1px solid transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur) var(--ease); } .btn-sm { padding: 9px 15px; font-size: 14px; border-radius: var(--r); } .btn-lg { padding: 16px 26px; font-size: 16px; } .btn-block { width: 100%; } /* Primär — Marken-Navy, dieselbe Fläche wie die Visitenkarte */ .btn-primary { background: var(--navy); color: var(--on-navy); border-color: var(--navy); box-shadow: var(--sh-navy); } .btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* Sekundär — die Standardwahl neben einem Primär-CTA */ .btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line-2); box-shadow: var(--sh-1); } .btn-secondary:hover { background: var(--paper-2); border-color: var(--ink-3); } /* Tertiär — für Fälle, wo schon zwei Buttons stehen */ .btn-ghost { background: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--paper-2); color: var(--ink); } /* Nur für den seltenen Marken-Moment. Text auf Messing ist IMMER dunkel, nie weiß — auf Gold hat Weiß keinen ausreichenden Kontrast. */ .btn-brass { background: var(--brass); color: var(--navy); border-color: #BE9B3C; } .btn-brass:hover { background: var(--brass-hi); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; } .btn .arr { transition: transform var(--dur) var(--ease); } .btn:hover .arr { transform: translateX(2px); } /* ═══════════════════════════════════════════════════════════════════ 10 · KARTEN ═══════════════════════════════════════════════════════════════════ */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); } .card-pad { padding: var(--s5); } /* Nur für tatsächlich klickbare Karten. Statische Karten dürfen nicht auf Hover reagieren — das verspricht eine Interaktion, die es nicht gibt. */ .card-link { cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .card-link:hover { border-color: var(--line-2); box-shadow: var(--sh-3); transform: translateY(-2px); } .card-featured { border-color: var(--navy); box-shadow: var(--sh-3); } /* ═══════════════════════════════════════════════════════════════════ 11 · BADGES & CHIPS Badge = eckig (Zustand/Kategorie), Chip = Pille (Filter/Tag). Die Form unterscheidet die Bedeutung. ═══════════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: var(--fw-semi); letter-spacing: .05em; padding: 3px 9px; border-radius: var(--r-xs); border: 1px solid; } .badge-gkv { background: var(--gkv-bg); color: var(--gkv-ink); border-color: var(--gkv-line); } .badge-pkv { background: var(--pkv-bg); color: var(--pkv-ink); border-color: var(--pkv-line); } .badge-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); } .badge-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); } .badge-err { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); } .badge-neutral { background: var(--paper-2); color: var(--ink-2); border-color: var(--line); } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 6px 13px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-2); cursor: pointer; transition: all var(--dur) var(--ease); } .chip:hover { border-color: var(--ink-3); color: var(--ink); } .chip[aria-pressed="true"], .chip.on { background: var(--navy); color: var(--on-navy); border-color: var(--navy); } /* ═══════════════════════════════════════════════════════════════════ 12 · FORMULARE ═══════════════════════════════════════════════════════════════════ */ .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); } .input { font-family: inherit; font-size: 15px; color: var(--ink); padding: 12px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line-2); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .input::placeholder { color: var(--ink-3); } .input:hover { border-color: var(--ink-3); } .input:focus { outline: none; border-color: var(--primary); /* Ring in --primary-line statt --primary-50: der hellere Ton war auf weisser Flaeche nicht zu erkennen — Tastaturnutzer sahen nicht, wo sie stehen. */ box-shadow: 0 0 0 3px var(--primary-line); } .input[aria-invalid="true"] { border-color: var(--err-ink); } .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--err-bg); } /* ═══════════════════════════════════════════════════════════════════ 13 · GRUNDLAGEN ═══════════════════════════════════════════════════════════════════ */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } /* Fokus ist Pflicht, nicht Dekoration (WCAG 2.4.11). Petrol statt Messing, weil Messing auf Weiß zu kontrastschwach dafür ist. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-xs); } .logo-lume { font-family: var(--font-logo); font-weight: 600; color: var(--brass); letter-spacing: -0.5px; } .logo-dent { font-family: var(--font-logo); font-weight: 300; color: var(--ink); letter-spacing: 3px; } /* Auf Navy-Flächen dreht sich die Tinte um. */ .on-navy { background: var(--navy); color: var(--on-navy); } .on-navy .t-display, .on-navy .t-h2, .on-navy .t-h3, .on-navy .t-h4 { color: var(--on-navy); } .on-navy .t-body, .on-navy .t-lead, .on-navy .t-sm { color: var(--on-navy-2); } .on-navy .t-xs, .on-navy .t-label { color: var(--on-navy-3); } .on-navy .logo-dent { color: var(--on-navy); } .on-navy :focus-visible { outline-color: var(--brass-hi); } /* Icons: einheitliche Strichstärke ist wichtiger als einheitliche Größe — unterschiedlich dicke Striche lassen ein Set zusammen- gewürfelt wirken. */ .ico { flex-shrink: 0; stroke-width: 1.5; } .ico-brass { color: var(--brass); } @media (max-width: 560px) { :root { --gutter: var(--s5); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }