/* ============================================================ FABRIKAT STARTER-KIT · ui.css — DAS FUNDAMENT (nicht editieren) ------------------------------------------------------------ Token-Skalen (aus theme.css abgeleitet) + Reset + Basis-Elemente + Layout-Utilities + Komponenten. Jede Regel folgt den Fabrikat-Design- Prinzipien: feste Spacing-Skala, echte Typo-Hierarchie, OKLCH-Farbe, Hairline vor Schatten, sparsame zweckgebundene Motion, alle States, prefers-reduced-motion. Lädt NACH theme.css. Einbinden: ============================================================ */ /* Alle Tokens stehen unter :where(:root) = Spezifität 0. Damit gewinnt JEDE Angabe aus theme.css (auch der Dark-Block und jedes hier definierte Token wie --canvas, --ink, --danger), obwohl ui.css später lädt. Mit einem schlichten :root würde ui.css alles überschreiben, was theme.css an diesen Tokens setzt — der Dark-Block war so wirkungslos. */ :where(:root) { /* ---- Akzent-Skala (parametrisch aus theme.css --accent-h/c/l) ---- */ --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h)); --accent-hover: oklch(calc(var(--accent-l) - 0.055) var(--accent-c) var(--accent-h)); --accent-active: oklch(calc(var(--accent-l) - 0.10) var(--accent-c) var(--accent-h)); --accent-bright: oklch(calc(var(--accent-l) + 0.12) calc(var(--accent-c) * 0.9) var(--accent-h)); --accent-wash: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.10); --accent-line: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / 0.32); --on-accent: oklch(0.99 0.004 var(--accent-h)); /* Text auf Akzent-Fläche */ /* Akzent als SCHRIFT (Links, Ghost-Knopf, Badge): gedeckelte Helligkeit, damit sie auf hellem Grund und auf --accent-wash für JEDE Markenfarbe >= 4.5:1 hält. Mit --accent selbst lagen Badge/Ghost-Hover/Links bei hellen Grün-, Türkis- und Rottönen bis 3.0:1 (gemessen 08.10.2026, 12 Farbtöne x --accent-l 0.45–0.60). Dark setzt in theme.css eine Untergrenze statt Deckel. */ --accent-ink: oklch(min(var(--accent-l), 0.48) var(--accent-c) var(--accent-h)); /* ---- Flächen (Light-optimiert, getönt via --neutral-*; Dark = theme-Override) ---- */ --canvas: oklch(0.985 var(--neutral-c) var(--neutral-h)); /* Grund */ --surface: oklch(1 var(--neutral-c) var(--neutral-h)); /* Karten/Panels */ --raised: oklch(0.972 var(--neutral-c) var(--neutral-h)); /* Insets/Hover */ --sunk: oklch(0.955 var(--neutral-c) var(--neutral-h)); /* Footer/Wells */ /* ---- Ink / Text (Kontrast ≥ AA; leicht getönt, nie pures Grau) ---- */ --ink: oklch(0.23 calc(var(--neutral-c) + 0.004) var(--neutral-h)); /* Body, ~13:1 */ --ink-soft: oklch(0.42 calc(var(--neutral-c) + 0.004) var(--neutral-h)); /* sekundär */ --ink-faint: oklch(0.52 var(--neutral-c) var(--neutral-h)); /* Labels, ~4.6:1 */ /* ---- Hairlines ---- */ --line: oklch(0.90 var(--neutral-c) var(--neutral-h)); --line-soft: oklch(0.935 var(--neutral-c) var(--neutral-h)); --line-strong: oklch(0.86 var(--neutral-c) var(--neutral-h)); /* ---- Semantik (Ampel) ---- */ --success: oklch(0.55 0.12 150); --warn: oklch(0.66 0.13 75); --danger: oklch(0.56 0.16 28); --success-wash: oklch(0.55 0.12 150 / 0.10); --warn-wash: oklch(0.66 0.13 75 / 0.12); --danger-wash: oklch(0.56 0.16 28 / 0.10); /* ---- Spacing-Skala (feste Stufen × Dichte; nie Zufalls-Margins) ---- */ --sp-1: calc(4px * var(--density)); --sp-2: calc(8px * var(--density)); --sp-3: calc(12px * var(--density)); --sp-4: calc(16px * var(--density)); --sp-5: calc(24px * var(--density)); --sp-6: calc(32px * var(--density)); --sp-7: calc(48px * var(--density)); --sp-8: calc(64px * var(--density)); --sp-9: calc(96px * var(--density)); --sp-10: calc(128px * var(--density)); /* ---- Typo-Skala (fluid via clamp; gedeckelt bei 6rem — ausser dem Hero, siehe --display-*) ---- */ --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.25rem, 1.6vw, 1.4rem); --text-2xl: clamp(1.5rem, 2.4vw, 1.85rem); --text-3xl: clamp(1.9rem, 3.4vw, 2.5rem); --text-4xl: clamp(2.4rem, 5vw, 3.4rem); --text-5xl: clamp(3rem, 7vw, 4.6rem); --text-6xl: clamp(3.4rem, 8.5vw, 6rem); /* Deckel für alles ausser dem Hero-Markenwort/-Satz */ /* ---- Display-Deckel je Dosis: NUR für das Markenwort/den Satz im Hero einer Marken-/ Marketingseite. Die Grösse folgt der gemessenen Zeile (Formel in 16-art-direction), der Deckel verhindert nur das Schreien. ---- */ --display-ruhe: 6rem; --display-akzent: 8.5rem; --display-buehne: 14rem; /* ---- Fokus / Textauswahl: Standard ist der Akzent. Ein Look mit dem Akzent NUR auf dem Primärknopf setzt in theme.css alle drei auf Tinte/Fläche (--ink, --ink, --canvas). ---- */ --fokus: var(--accent); --auswahl: var(--accent); --auswahl-text: var(--on-accent); /* ---- Radius (aus theme --radius) ---- */ --r-sm: calc(var(--radius) * 0.6); --r-md: var(--radius); --r-lg: calc(var(--radius) * 1.5); --r-pill: 999px; /* ---- Motion (eigene Kurven; CSS-Defaults sind zu schwach) ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out, exponentiell */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-1: 120ms; /* Feedback (Press/Toggle) */ --dur-2: 220ms; /* State (Menü/Tooltip) */ --dur-3: 320ms; /* Layout (Modal/Drawer) */ /* ---- z-index (semantisch, nie willkürlich 9999) ---- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* ---- Schatten (definiert, ≤8px Blur — NICHT weicher Nebel) ---- */ --shadow-1: 0 1px 2px oklch(0.2 0.02 var(--neutral-h) / 0.06); --shadow-2: 0 6px 16px -8px oklch(0.2 0.02 var(--neutral-h) / 0.18); --measure: 68ch; /* Lesezeilen-Länge 65–75ch */ --container: 1140px; } /* Schrift auf der Akzent-FÜLLUNG (Primär-Knopf, Markierung) wählt sich selbst: Weiß, solange die Füllung dunkel genug ist, sonst Schwarz. Entschieden wird an der echten WCAG-Leuchtdichte Y der Füllung (aus srgb-linear), Schwelle 0.1791 = Punkt, an dem Weiß und Schwarz gleich viel Kontrast haben (je >= 4.58:1). Mit festem Weiß fiel der Knopf bei hellen Grün-, Türkis- und Rottönen unter 4.5:1 (gemessen 08.10.2026: 15 von 48 Farbkombinationen). Die Markenfarbe der Füllung bleibt unverändert. --accent-hover (Hover des Primär-Knopfs) bewegt sich von der Schrift WEG (bei weißer Schrift dunkler, bei schwarzer heller), sonst sänke der Kontrast beim Darüberfahren. --accent-active nutzt das Kit selbst nicht; es folgt derselben Richtung nur, damit eigenes CSS, das es verwendet, lesbar bleibt. round() macht den Schaltwert exakt 0 oder 1: ohne es lag in einem schmalen Band um die Schwelle ein Zwischenwert vor, also GRAUE Schrift mit ~2.4:1 (Diff-Review 08.10.2026, im Browser nachgewiesen bei Y = 0.17905). Ohne Relative Color Syntax oder round() (alte Browser) greifen die festen Werte oben. */ @supports (color: color(from red srgb-linear r g b)) and (width: calc(round(nearest, 1.4, 1) * 1px)) { :where(:root) { --on-accent: color(from var(--accent) srgb-linear round(nearest, clamp(0, (0.1791 - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 10000, 1), 1) round(nearest, clamp(0, (0.1791 - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 10000, 1), 1) round(nearest, clamp(0, (0.1791 - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 10000, 1), 1)); --accent-gegen: color(from var(--accent) srgb-linear round(nearest, clamp(0, ((0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) - 0.1791) * 10000, 1), 1) round(nearest, clamp(0, ((0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) - 0.1791) * 10000, 1), 1) round(nearest, clamp(0, ((0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) - 0.1791) * 10000, 1), 1)); --accent-hover: color-mix(in oklch, var(--accent) 90%, var(--accent-gegen)); --accent-active: color-mix(in oklch, var(--accent) 82%, var(--accent-gegen)); } } /* ============================================================ RESET (modern, minimal) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; } body { min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video, canvas, picture { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } p, h1, h2, h3, h4 { overflow-wrap: break-word; } :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--auswahl); color: var(--auswahl-text); } /* ============================================================ BASIS-ELEMENTE ============================================================ */ body { background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; /* großzügig für Fließtext */ } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.02em; /* Display enger, Boden -0.04em */ text-wrap: balance; /* gegen Schusterjungen in Headings */ color: var(--ink); font-weight: 650; } h1 { font-size: var(--text-4xl); letter-spacing: -0.03em; } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { text-wrap: pretty; } p, li { max-width: var(--measure); } /* Lesbarkeit; bei breiten Layouts überschreiben */ a { color: var(--accent-ink); text-decoration: none; } /* Links im Fließtext unterstrichen: nicht nur über Farbe erkennbar (WCAG 1.4.1). */ a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--accent-line); transition: text-decoration-color var(--dur-1) var(--ease); } a:not([class]):hover { text-decoration-color: var(--accent); } /* Navigation, Kopf- und Fußzeile: kein Strich — dort sagt der Ort schon, dass es Links sind. :where() hält die Spezifität bei a:not([class]), eigenes CSS des Kunden gewinnt weiter. */ :where(nav, header, footer, [role="navigation"]) a:not([class]) { text-decoration: none; } strong, b { font-weight: 650; color: var(--ink); } small { font-size: var(--text-sm); } hr { border: none; border-top: 1px solid var(--line); margin-block: var(--sp-6); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } .mono { font-family: var(--font-mono); } .eyebrow { /* Marken-Voice EINMAL ok — NICHT über jeden Abschnitt streuen (AI-Tell) */ font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } /* ============================================================ LAYOUT-UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(var(--sp-4), 4vw, var(--sp-8)); } .section { padding-block: clamp(var(--sp-7), 8vh, var(--sp-9)); } .stack > * + * { margin-top: var(--sp-4); } /* vertikaler Rhythmus */ .stack-lg > * + * { margin-top: var(--sp-6); } .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* responsives Grid ohne Breakpoints */ .grid-auto { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .measure { max-width: var(--measure); } .center { text-align: center; margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ BUTTON — alle States, Press-Feedback, GPU-Transitions ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: 600; font-size: var(--text-sm); line-height: 1; padding: 0.85em 1.4em; border-radius: var(--r-md); border: 1.5px solid transparent; transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); } .btn:active { transform: scale(0.97); } /* reagiert auf Druck */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn-ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent-line); } .btn-subtle { background: var(--raised); color: var(--ink); border-color: var(--line); } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-2); transform: translateY(-1px); } .btn-ghost:hover { background: var(--accent-wash); transform: translateY(-1px); } .btn-subtle:hover { background: var(--surface); border-color: var(--line-strong); } } /* ============================================================ FORM-FELDER — Label, Input, States (focus/error/success), Hint ============================================================ */ .field { display: grid; gap: var(--sp-2); } .field > label { font-size: var(--text-sm); font-weight: 600; color: var(--ink); } .field .hint { font-size: var(--text-sm); color: var(--ink-faint); } .input, .field input, .field textarea, .field select { width: 100%; padding: 0.7em 0.85em; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); /* Placeholder ebenfalls ≥4.5:1 */ } .input:focus, .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .field input:user-invalid, .field .is-error input, .input.is-error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-wash); } .field .error-text { font-size: var(--text-sm); color: var(--danger); } /* ============================================================ CARD — Hairline zuerst, Schatten nur bewusst (kein Ghost-Card-Mix) ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(var(--sp-5), 3vw, var(--sp-6)); } .card-raised { box-shadow: var(--shadow-1); } /* dann KEINE betonte Border zusätzlich */ .card-interactive { transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } @media (hover: hover) and (pointer: fine) { .card-interactive:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow-2); } } /* ============================================================ BADGE / TAG ============================================================ */ .badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; padding: 0.32em 0.7em; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent-ink); border: 1px solid var(--accent-line); } /* ============================================================ ALERT — volle Border + Leading-Space (KEIN Side-Stripe = AI-Tell) ============================================================ */ .alert { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); background: var(--raised); color: var(--ink-soft); } .alert strong { color: var(--ink); } .alert-info { background: var(--accent-wash); border-color: var(--accent-line); } .alert-success { background: var(--success-wash); border-color: var(--success); } .alert-warn { background: var(--warn-wash); border-color: var(--warn); } .alert-danger { background: var(--danger-wash); border-color: var(--danger); } /* ============================================================ NAV (schlicht, horizontal; Link-Unterstrich wächst aus links) ============================================================ */ .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-5); padding-block: var(--sp-4); } /* umbrechen statt überlaufen (grosse Schrift) */ .nav-links { display: flex; gap: var(--sp-5); align-items: center; list-style: none; } .nav-links a { position: relative; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 500; transition: color var(--dur-1) var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease); } @media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { transform: scaleX(1); } } /* ============================================================ MARKETING-BAUSTEINE — Hero/Kopf einer Marken- oder Marketingseite (zusammen mit buehne.css; Bühne + Komposition nach 16-art-direction) ============================================================ */ /* Display: Schrift, Satz und Umbruch. Die GRÖSSE setzt die Seite (Formel, Deckel --display-*). */ .display { font-family: var(--font-display); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: normal; hyphens: manual; max-width: none; } .display--wort { white-space: nowrap; } /* Markenwort: nie umbrechen */ /* Etikett: Versal-Typografie (Fristzeile, Kicker-Text, Navigation). Bewusst NICHT .eyebrow — das ist das Hero-Label, das design_review zählt. */ .etikett { font-family: var(--font-label, var(--font-body)); font-size: 0.75rem; font-weight: 560; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; max-width: none; } /* Hero-Knöpfe */ .btn-hero { min-height: 3.25rem; padding: 0 2rem; font-size: var(--text-base); } .btn-kontur { background: transparent; color: var(--ink); border-color: currentColor; } .btn-text { padding-inline: 0; border: 0; border-radius: 0; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; text-decoration-color: var(--accent); } @media (hover: hover) and (pointer: fine) { .btn-kontur:hover { background: var(--accent-wash); transform: translateY(-1px); } .btn-text:hover { text-decoration-thickness: 2px; } } /* Sprunglink: erstes Element im body, sichtbar nur bei Tastaturfokus */ .sprung { position: absolute; left: var(--sp-3); top: var(--sp-3); z-index: var(--z-toast); padding: 0.75em 1em; border-radius: var(--r-sm); background: var(--ink); color: var(--canvas); font-size: var(--text-sm); font-weight: 600; transform: translateY(-200%); } .sprung:focus-visible { transform: none; } /* Mobil-Menü, ohne JavaScript bedienbar (Popover-API): Esc und Klick daneben schliessen nativ. Bruch bei 900 px wie Bühne und Bild-Pipeline. Wird das Gerät mit offenem Menü auf Desktop-Breite gedreht, bleibt das Popover in der obersten Ebene: das kleine Modul-Skript am Ende von index.html schliesst es (beim Umbau MITNEHMEN, sonst liegt das offene Menü auf Desktop über der Wortmarke). Der Schleier ist dort schon aus. */ .nav-menue { display: none; } @media (min-width: 900px) { .nav-links::backdrop { display: none; } .nav-links[popover] { display: flex; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; } } @media (max-width: 899px) { .nav-links[popover]:not(:popover-open) { display: none; } .nav-menue { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--r-md); } .nav-menue-zeichen { display: block; width: 18px; height: 10px; border-block: 2px solid currentColor; } .nav-links:popover-open { position: fixed; inset: 4.5rem 12px auto 12px; width: auto; height: auto; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: var(--sp-2) 0; background: var(--canvas); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); } .nav-links:popover-open li { max-width: none; } .nav-links:popover-open a { display: block; padding: 0.85rem 1.25rem; font-size: var(--text-xl); color: var(--ink); } .nav-links:popover-open a::after { display: none; } .nav-links::backdrop { background: oklch(0.2 0.02 var(--neutral-h) / 0.6); } } /* Browser ohne Popover-API (Safari < 17): Liste umbrechend sichtbar statt Überlauf im Kopf */ @supports not selector(:popover-open) { .nav-menue { display: none !important; } .nav-links[popover] { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible; } } /* Ruhe-Dosis (): keine Mikrobewegung an Knöpfen und Links */ html[data-dosis="ruhe"] { scroll-behavior: auto; } html[data-dosis="ruhe"] .btn:active { transform: none; } html[data-dosis="ruhe"] .nav-links a::after { transition: none; } /* ============================================================ REDUCED MOTION (Pflicht-Alternative, nicht optional) ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }