/* ============================================================ Black4st — Design Tokens & Type Source: black4st.de Elementor Global Kit #6, live-verified 2026-05-29/30. Dark workshop aesthetic — high contrast, ONE orange accent. ============================================================ */ /* AB-Sandbox — "Heritage Precision". TWO purposeful faces: IBM Plex Sans for everything (headlines via weight+caps+tracking) + IBM Plex Mono ONLY for numbers/technical readouts. Warm graphite, burnished-copper accent (logo-harmonic). */ /* Schriften: lokal via assets/fonts/fonts.css, eingebunden in functions.php */ :root { /* ---- Color: surfaces (warm graphite — premium, not cool blue-black) ---- */ --color-bg: #090808; /* page background — deep neutral graphite */ --color-surface: #151412; /* raised panels, payment box */ --color-surface-subtle: rgba(255,248,236,0.04); /* subtle warm cards */ --color-border-subtle: rgba(255,248,236,0.10); /* warm hairlines */ /* ---- Color: text (warm bone, not cool grey) ---- */ /* ZWEI Textebenen, mehr nicht — siehe „Textkonzept" unten. Überschriften hell, alles Laufende eine Stufe darunter in warmem Taupe. */ --color-text: #ECE6DC; /* headings only */ --color-text-muted: #A69C8C; /* warm taupe — ALL running copy, meta, labels */ --color-text-body: var(--color-text-muted); /* alias: running copy */ --color-text-strong: #FFFFFF; /* highlights only (badge text) */ /* ---- Color: accent (the ONE brand color — burnished copper, harmonises with the logo orange) ---- SINGLE SOURCE OF TRUTH as RGB components. Same warm hue family as the logo's #FA6012, but deeper/patinated. */ --accent-rgb: 208 106 44; --color-accent: rgb(var(--accent-rgb)); /* #D06A2C — burnished copper: CTAs, focus, active */ --color-text-on-accent: #1F1304; /* deep espresso ON copper — high contrast */ --color-accent-soft: #ECA672; /* warm amber — hover / secondary accent */ /* the bright copper SPARK — primary action (CTA) + current location (active nav). Near the logo orange. */ --accent-bright-rgb: 230 120 46; --color-accent-bright: rgb(var(--accent-bright-rgb)); /* #E6782E */ /* accent alpha scale — every translucent orange derives from the one hue above */ --accent-faint: rgb(var(--accent-rgb) / 0.05); /* faint fills */ --accent-tint: rgb(var(--accent-rgb) / 0.10); /* active card fill */ --accent-fill: rgb(var(--accent-rgb) / 0.16); /* control fills */ --accent-ring: rgb(var(--accent-rgb) / 0.22); /* focus / active ring */ --accent-line: rgb(var(--accent-rgb) / 0.32); /* compatible borders */ --accent-glow: rgb(var(--accent-rgb) / 0.50); /* button / glow shadows */ --accent-strong: rgb(var(--accent-rgb) / 0.60); /* strong control borders */ /* ---- Color: status — drei Zustände, alle aus der Kupfer-Materialwelt ---- Verdigris ist oxidiertes Kupfer, Amber erhitztes. Nur das Rot fällt heraus, weil eine Warnung nicht in der Markenfamilie verschwinden darf. Textfarben auf dunklem Grund; die Badge-Gründe darunter tragen weißen Text. */ --color-ok: #74A78F; /* Verdigris — vorrätig, bestätigt, „passt" */ --color-warn: #ECA672; /* Amber — geringer Bestand, Nachlieferung, Hinweis */ --color-error: #FB9494; /* soft red — ausverkauft, Fehler, Pflichtfeld */ --color-patina: var(--color-ok); /* alias, historischer Name */ /* Badge-Gründe (weißer Text darauf) */ --color-success: #008000; /* "in stock" + sale; white text 5.14:1 */ --color-danger: #CC0000; /* "out of stock"; white text 5.89:1 */ /* ---- Type: IBM Plex Sans everywhere + IBM Plex Mono for numbers/technical only ---- */ --font-display: 'IBM Plex Sans', sans-serif; /* headlines — 700, uppercase, tight tracking */ --font-body: 'IBM Plex Sans', sans-serif; /* body, labels, buttons */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ONLY prices, specs, part numbers */ --font-sub: var(--font-body); /* ---- Type scale (fluid) ---- */ --fs-h1: clamp(2.1rem, 4vw, 3.4rem); /* page title — 48px @1200. Ruhiger als zuvor (64.8px): die Stufe darf führen, nicht dominieren. */ --fs-h2: clamp(1.6rem, 3vw, 2.3rem); /* sub-heading */ --fs-h3: 1.5rem; --fs-h4: 1.15rem; /* 18.4px — sub-section inside running copy */ --fs-h5: 1rem; /* 16px — matches body, set apart by caps + tracking */ --fs-h6: 0.85rem; /* 13.6px — label tier, muted */ --fs-price: 1.25rem; /* 20px, 700 */ --fs-body: 1rem; /* 16px — body default (overrides Kit 1.1rem) */ /* ---- Utility-Stufen unterhalb des Fließtexts (2026-08-05) ---- Für Farben galt die Token-Architektur von Anfang an, für Größen nie: `site.css` setzte `font-size` 90× hart und nur 8× über einen Token — in 30 verschiedenen Werten, abgestuft in 0,02rem-Schritten (0,32 px). Zwischen `0.95`, `0.96` und `0.98` liegt kein sichtbarer Unterschied, nur eine Entscheidung, die niemand mehr nachvollziehen kann. Diese drei Stufen decken die Cluster ab, die dabei tatsächlich entstanden sind. `--fs-nav` und `--fs-small` bleiben als benannte Sonderfälle bestehen; für alles andere gilt die Skala. Gefunden von `design/bin/verify-design`. */ --fs-sm: 0.875rem; /* 14px — Sekundärtext, Meta am Element */ --fs-xs: 0.74rem; /* 11,84px — Labels, Kapitälchen, Tabellenköpfe. Nicht 0.75rem: Das Brandbook führt 0.74rem bereits als Label-Ebene „in der Chrome" (Kicker, Fußzeilen-Spaltenköpfe). Der Token folgt der dokumentierten Größe, damit die Umstellung nichts verschiebt. */ --fs-2xs: 0.625rem; /* 10px — Mikrotypografie */ --fs-nav: 0.8rem; /* 12.8px — header nav acronyms (caps, tracked): deliberate utility tier below body */ --fs-small: 0.7rem; /* meta / small print */ /* ---- Display-Stufen (2026-08-05) ---- Die vier fluiden Großgrößen, die im gelieferten Design tatsächlich vorkamen. Sie standen als acht verschiedene clamp()-Ausdrücke im CSS — zwischen `clamp(1.3rem, 2.6vw, 1.95rem)` und `clamp(1.55rem, 2.6vw, 2.05rem)` liegen 0,8 px, also keine Entscheidung, sondern Drift. Gefunden von design/bin/verify-tokens. */ --fs-d1: clamp(1.9rem, 3.4vw, 2.7rem); /* 30–43px — Hero-Code, Mono-Großschrift */ --fs-d2: clamp(1.5rem, 3.2vw, 2.5rem); /* 24–40px — Markenband-Claim */ --fs-d3: clamp(1.45rem, 2.5vw, 2rem); /* 23–32px — Sektionstitel, PDP-Titel, Preis in der Buy-Box */ --fs-d4: clamp(1.25rem, 2.2vw, 1.6rem); /* 20–26px — Gruppenüberschrift */ --fs-stat: 1.9rem; /* 30,4px — Kennzahl, fix statt fluid: eine Zahl soll nicht mitatmen */ /* ---- Fluide Stufen, die eine fixe nicht ersetzen kann ---- Ein clamp() auf eine feste Stufe zu ziehen ändert nicht den Endwert, sondern das Verhalten DAZWISCHEN. Gemessen an sechs Fensterbreiten: `.page-head h1` verlor bei 1024 px 10,2 px, die Konfigurator-Schiene gewann 2,2 px — bei ihr bricht schon heute „SRS-X Elite · Connector" um. Deshalb tragen diese vier ihren Verlauf weiter, statt auf die nächste feste Stufe gezwungen zu werden. */ --fs-h1-page: clamp(2rem, 5vw, 3.4rem); /* Seitenkopf — steiler als --fs-h1 */ --fs-md: clamp(1rem, 1.45vw, 1.22rem); /* zwischen Body und h4: Hero-Unterzeile, Datenblatt-Überschrift */ --fs-rail: clamp(0.74rem, 0.95vw, 0.9rem); /* Konfigurator: Modellname */ --fs-rail-sm: clamp(0.68rem, 0.85vw, 0.78rem); /* Konfigurator: Marke, Tag */ --fs-price-lg: clamp(1.5rem, 2.2vw, 1.9rem); /* Preis in der Buy-Box — flacher als die Titelstufe daneben */ --lh-body: 1.5; --lh-copy: 1.65; /* running copy — a touch more air than UI text */ /* ---- Spacing & layout ---- */ --container-max: 1200px; /* desktop content width */ --container-tablet:1024px; --content-read: 560px; /* readable column for lists/forms */ --section-gap: var(--space-lg); /* row/widget gap */ --container-pad: var(--space-xs); /* ---- Abstands-Skala (2026-08-05) ---- Vorher: 297 feste Längen in 30 verschiedenen Werten, lückenlos in 2-px-Schritten von 1 bis 52 px — ein Kontinuum, keine Gestaltung. Gewählt wurde das 4er-Raster mit feineren Schritten unterhalb von 8 px: 126 Werte bleiben unverändert, keiner wandert mehr als 4 px. `--gap-s`, `--gap-m`, `--section-gap` und `--container-pad` standen hier seit dem Elementor-Erbe und wurden nirgends benutzt; sie zeigen jetzt auf die Skala. */ --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 56px; --gap-s: var(--space-sm); /* list/card items */ --gap-m: var(--space-md); /* icon ↔ label */ --card-pad: 0.85rem 1.1rem; --btn-pad: 1rem 2rem; /* 16/32px */ /* ---- Radius scale ---- consolidated to TWO real radii; input/btn alias them */ --radius-badge: 4px; /* small — badges, inputs */ --radius-input: var(--radius-badge); /* = 4px (was 5) */ --radius-card: 9px; /* medium — cards, panels, buttons (was 8) */ --radius-btn: var(--radius-card); /* = 9px (was 10) */ --radius-hair: 2px; /* Haarlinien: Zierstriche, Scrollbar-Daumen */ --radius-lg: 16px; /* großflächige Rahmen (Lightbox) */ --radius-pill: 999px; /* Pillenform — Schalter, Reiter, Chips */ --radius-round: 50%; /* Kreis — Punkte, Knöpfe, Portraits */ } /* ============================================================ Semantic base styles ============================================================ */ /* Sagt dem Browser, dass die Seite dunkel ist. Ohne das zeichnet das Betriebssystem alles Native hell: die aufgeklappte Liste einer Auswahl, Bildlaufleisten, Datumswähler und den automatisch ausgefüllten Feldhintergrund. Diese Flächen sind mit CSS nicht erreichbar — `select option { background: … }` greift dort schlicht nicht. Eine Zeile, die mehr Wirkung hat als jede Feldgestaltung. */ :root { color-scheme: dark; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; } /* Überschriften brechen um, statt die Seite zu sprengen. Im Entwurf sind alle Überschriften kurz und handverlesen. Im Shop stehen dort deutsche Komposita, die niemand kürzen darf: „Allgemeine Geschäftsbedingungen" ist bei 390 px Viewport 426 px breit und schob die ganze Seite waagerecht auf. `hyphens` trennt sauber (die Sprache steht auf ), `overflow-wrap` fängt ab, was auch dann nicht passt — etwa eine lange URL in einem Rechtstext. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { hyphens: auto; overflow-wrap: break-word; } h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; text-transform: uppercase; color: var(--color-text); line-height: 1.1; letter-spacing: 0.01em; } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; text-transform: uppercase; color: var(--color-text); line-height: 1.15; } h3, .h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; text-transform: uppercase; color: var(--color-text); } /* h4–h6 continue the scale downwards. Without them the browser defaults take over (h4 = 1em bold, h5/h6 even smaller and non-caps), which breaks the hierarchy wherever headings appear outside a styled section — WooCommerce and Germanized output h4/h5, and the block editor lets authors use them in running copy. */ h4, .h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text); line-height: 1.25; } h5, .h5 { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text); line-height: 1.3; } /* h6 sits at label level — same treatment as the footer column headings. */ h6, .h6 { font-family: var(--font-body); font-size: var(--fs-h6); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); line-height: 1.35; } .sub-heading { font-family: var(--font-sub); font-size: var(--fs-h2); font-weight: 600; color: var(--color-text); } /* ============================================================ TEXTKONZEPT — bewusst schlank ------------------------------------------------------------ Laufender Text kennt EINE Größe und EINE Farbe. Keine Zwischengrößen für Einleitungen, keine dritte Helligkeitsstufe, keine Farbwechsel innerhalb eines Absatzes. Hierarchie entsteht ausschließlich über Überschriften — Größe, Versalien, Gewicht —, nicht über abgestufte Fließtextfarben. Betonung (`strong`) ändert NUR das Gewicht, nie die Farbe. Ein Fettdruck in anderer Farbe zerreißt die Zeile, und wenn jeder zweite Satz eine Auszeichnung trägt, betont am Ende nichts mehr. Fett ist die Ausnahme, nicht der Normalfall. Kupfer ist die einzige Farbe im Text — und sie hat feste Rollen, statt zu dekorieren: .kicker / .hero-fullname Label über der Überschrift .eyebrow zurückhaltende Variante (Karten) a Links im Fließtext .accent Hervorhebung EINZELNER Wörter im Satz `.accent` ist der Ersatz für den Fettdruck: Ein hervorgehobenes Wort in der Markenfarbe trägt weiter als ein fetter Halbsatz — und weil es auffällt, setzt man es sparsam. Fett bleibt für den seltenen Fall, dass ein Begriff betont werden muss, ohne die Aufmerksamkeit der Akzentfarbe zu beanspruchen. ============================================================ */ p, li, dd, dt, td, th, blockquote, figcaption { color: var(--color-text-muted); font-size: var(--fs-body); line-height: var(--lh-copy); } /* Betonung: nur Gewicht. Farbe erbt vom Absatz. */ strong, b { font-weight: 600; color: inherit; } /* Hervorhebung einzelner Wörter — die dokumentierte Alternative zum Fettdruck. Gilt überall, auch in Überschriften und im Block-Editor. */ .accent { color: var(--color-accent); } /* Links führen — die einzige Farbe im Fließtext. */ :where(p, li, dd, td, blockquote) a { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; } :where(p, li, dd, td, blockquote) a:hover { color: var(--color-accent-soft); } .text-muted { color: var(--color-text-muted); } .small, small { font-size: var(--fs-small); color: var(--color-text-muted); } .price { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-price); color: var(--color-text); letter-spacing: 0.01em; font-variant-numeric: tabular-nums slashed-zero; } /* Content / body-text links: orange + underline (mandatory for contrast). */ .content a, a.content-link { color: var(--color-accent-bright); text-decoration: underline; text-underline-offset: 0.15em; } /* Menu-style links (header/footer): light grey, no underline. */ .nav a, .footer a { color: var(--color-text); text-decoration: none; } .nav a:hover, .footer a:hover { color: var(--color-accent-soft); } /* ============================================================ Components ============================================================ */ /* Primary button / CTA */ .btn { display: inline-block; background: var(--color-accent); color: var(--color-text-on-accent); font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body); text-transform: uppercase; text-decoration: none; border: none; border-radius: var(--radius-btn); padding: var(--btn-pad); cursor: pointer; transition: transform 300ms ease; } .btn:hover { transform: scale(1.05); } .btn:active { transform: scale(1.0); } .btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-subtle); } .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent-soft); } /* Dark card / list item */ .card { background: var(--color-surface-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-card); padding: var(--card-pad); } /* Raised panel */ .panel { background: var(--color-surface); border-radius: var(--radius-card); padding: var(--space-lg) var(--space-xl); } /* Badges */ .badge { display: inline-block; border-radius: var(--radius-badge); padding: 0.2em 0.5em; color: var(--color-text-strong); font-weight: 700; font-size: var(--fs-small); } .badge-success { background: var(--color-success); } /* sale / in stock */ .badge-danger { background: var(--color-danger); } /* out of stock */ /* Input — primary dark style (WooCommerce), preferred for new designs */ .input { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-accent); border-radius: var(--radius-input); padding: var(--space-xs) var(--space-sm); font-family: var(--font-body); font-size: var(--fs-body); } .input::placeholder { color: var(--color-text-muted); } .input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* Top-bar USP band */ .top-bar { background: var(--color-accent); color: var(--color-text-on-accent); font-weight: 700; text-transform: uppercase; font-size: var(--fs-small); letter-spacing: 0.03em; }