/* ===================================================================== Kernlot — Marken- und Maßwerte Übernommen aus ostfriesland-team-web/css/site.css (Zeile 1–180): dort steckt die Arbeit, die man nicht zweimal macht — Hell/Dunkel in zwei Schreibweisen, modusstabile Flächen, zwei Fokusringe, eine Typo-Skala statt zehn Zwischengrößen, Bewegung als Token. Getauscht sind nur die Markenwerte: Kernlot ist nicht der Handwerksbetrieb und darf nicht so aussehen. Kein Navy, kein Klinker. Zwei Grundregeln, die sich durch alles ziehen: 1. FLÄCHE UND MODUS. --ink kippt im Dunkelmodus auf Hell. Jede Fläche, die dunkel BLEIBEN muss (Auftakt, Merkkasten, Fuß), benutzt --panel und die dazugehörigen --on-panel-*. Wer var(--ink) als Hintergrund einsetzt, baut weißen Text auf weißem Grund. 2. OHNE JAVASCRIPT MUSS ALLES LESBAR SEIN. Verborgen wird nur unter html.js, und die Klasse setzt ein Schnipsel im . ===================================================================== */ :root{ /* --- Farbe, Licht ------------------------------------------------- */ --ink:#16211f; /* Graphit mit Grünstich: Text und dunkle Kanten */ --ink-soft:#33433f; --paper:#f4f6f5; /* kühles Off-White, kein Creme */ --surface:#ffffff; --surface-2:#e9edeb; --muted:#4d635d; /* Sekundärtext auf Papier */ --faint:#5f7269; /* leiseste Stufe — hält 4,5:1 auf --surface */ /* Die Marke ist ein tiefes Grünblau. Es ist nicht dekorativ gewählt: die Seite verkauft Nachweisbarkeit, und Grün liest sich als geprüft. Wichtiger ist, was es NICHT ist — nicht das Navy der Baufirma und nicht das Hellblau der bisherigen internen Preisseite. */ --marke:#0b6b5e; --marke-2:#0e8375; --marke-fest:#0b6b5e; /* als Fläche unter weißem Text: 5,6:1 */ --marke-fest-hover:#0e8375; /* Ocker ist die Signatur — Haarlinie, Ziffer, Schlussstein. NIE Fläche hinter Text, und nie für Fehler: was die Marke kennzeichnet, darf nicht gleichzeitig Alarm bedeuten. */ --signal:#b4661d; --signal-hell:#e0a45f; --line:#d3dad7; --line-soft:#e4e9e7; --line-strong:#7d8c87; /* Rahmen von Bedienelementen — 3:1 Pflicht */ --ok:#2f7d55; --warn:#8a6410; --fehler:#a3232b; /* --- Modusstabile dunkle Fläche ----------------------------------- */ --panel:#0f1a17; --on-panel:#e9efec; --on-panel-mut:#b3c3bd; --on-panel-faint:#8ba098; --panel-line:#22332e; --panel-chip:#2c403a; --panel-rand:#6b857d; /* Umriss auf dunkler Fläche, sonst unsichtbar */ --panel-marke:#5fc4b1; /* Link/Marke AUF dunkel — anderer Wert als oben */ /* Fokus: zwei Ringe, damit er auf jedem Grund trägt. */ --focus-ring:var(--ink); --focus-halo:var(--paper); --schatten-s:0 1px 2px rgba(22,33,31,.06), 0 2px 8px rgba(22,33,31,.05); --schatten-m:0 6px 22px rgba(22,33,31,.10); /* --- Schrift ------------------------------------------------------ */ /* Bewusst ohne eigene Schriftdatei: die Seite lädt nichts von fremden Hosts, und ein Systemstapel ist auf jedem Gerät sofort da. Eine Hausschrift wäre hier eine Zehntelsekunde Ladezeit gegen ein bisschen Eigenart — für eine Seite, die Nachweise verkauft, kein guter Tausch. */ --font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono:ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* Zwei Mikrolabel-Stufen statt zehn Zwischengrößen. */ --step--2:0.72rem; --step--1:0.83rem; --step-0:1.06rem; --step-1:1.25rem; --step-2:1.6rem; --step-3:clamp(1.85rem, 1.3rem + 2.4vw, 2.9rem); --step-4:clamp(2.3rem, 1.5rem + 3.6vw, 3.7rem); --step-hero:clamp(2.2rem, 6.6vw, 4.6rem); --sperr-label:.15em; /* --- Maß ---------------------------------------------------------- */ --wrap:1140px; --kopf-h:64px; --gasse:clamp(20px, 5vw, 56px); --fuge:6px; /* alle Abstände sind Vielfache davon */ --sp-2:calc(var(--fuge)*2); --sp-3:calc(var(--fuge)*4); --sp-4:calc(var(--fuge)*6); --sp-5:calc(var(--fuge)*10); --sp-6:calc(var(--fuge)*16); --sp-7:calc(var(--fuge)*22); --radius:3px; /* fast scharfe Kante als Aussage */ --radius-rund:999px; /* --- Bewegung ----------------------------------------------------- */ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --d-druck:140ms; --d-hover:160ms; --d-tafel:220ms; --d-zustand:260ms; --d-einblenden:460ms; } /* Dunkel steht zweimal da, und das ist Absicht: einmal für die Systemeinstellung, einmal für den Umschalter. Wer nur das eine pflegt, hat einen Umschalter, der in einer Richtung nichts tut. */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --ink:#e9efec; --ink-soft:#c3cfcb; --paper:#0d1613; --surface:#131f1c; --surface-2:#182723; --muted:#9db3ac; --faint:#8ba098; --marke:#4fb6a4; --marke-2:#6fcdbb; --marke-fest:#0e7a6c; --marke-fest-hover:#129684; --signal:#d99a4e; --signal-hell:#e8b877; --line:#26332f; --line-soft:#1d2a26; --line-strong:#5d6f69; --ok:#55b57f; --warn:#c79a3a; --fehler:#e08a90; --focus-ring:#ffffff; --focus-halo:var(--paper); --schatten-s:0 1px 2px rgba(0,0,0,.4); --schatten-m:0 8px 26px rgba(0,0,0,.45); }} :root[data-theme="dark"]{ --ink:#e9efec; --ink-soft:#c3cfcb; --paper:#0d1613; --surface:#131f1c; --surface-2:#182723; --muted:#9db3ac; --faint:#8ba098; --marke:#4fb6a4; --marke-2:#6fcdbb; --marke-fest:#0e7a6c; --marke-fest-hover:#129684; --signal:#d99a4e; --signal-hell:#e8b877; --line:#26332f; --line-soft:#1d2a26; --line-strong:#5d6f69; --ok:#55b57f; --warn:#c79a3a; --fehler:#e08a90; --focus-ring:#ffffff; --focus-halo:var(--paper); --schatten-s:0 1px 2px rgba(0,0,0,.4); --schatten-m:0 8px 26px rgba(0,0,0,.45); } /* Auf den modusstabilen dunklen Flächen zählt nicht der Modus, sondern der Grund: der Ring ist dort warm statt weiß und trägt gegen #0f1a17. */ .auftakt,.tafel-dunkel,.fuss{--focus-ring:#ffd9a8;--focus-halo:var(--panel)}