/* familie-tokens.css — die eine Quelle fuer Farbe, Schrift und Abstand der OceanSphere-Familie. * Stand 20.09.2026, Grundlage: Familien-Stilblatt v1. * * Wird NACH der jeweiligen App-CSS geladen (os-industrial.css, public.css, supplysphere.css, * blog_base-Inline, ...) und belegt deren Variablen neu. Darum aendert sie nur das Kleid: * keine Struktur, keine Breiten, keine URLs. Sie liegt EINMAL auf dem Server * (/apps/familie-design/static/) und wird per Symlink in jede App eingehaengt — nie kopieren. * * Warum es diese Datei braucht: os-industrial.css lag fuenfmal auseinandergelaufen vor, und * body.os{} (Klassenselektor) ueberstimmte seit 09.09. jede warm angelegte Palette der Apps. * Diese Datei gewinnt, weil sie zuletzt kommt und dieselbe Spezifitaet benutzt. * * Alle Textfarben sind gegen ihren Grund gerechnet (WCAG): Tinte 13,8:1, Tinte-2 7,4:1, * Meta 5,2:1, Gold-Text 5,2:1, Gold-hell auf Navy 7,8:1. Gold #B88A3E ist Flaeche und * Knopf, nie Textfarbe auf hellem Grund (3,1:1). */ :root { /* ---- Familienwerte ------------------------------------------------ */ /* 20.09., 10:30 — Joshua: „wir machen jetzt einfach alles beige" — zu Recht. Das Papier war als Waerme gedacht, machte aber auf den kachelreichen Seiten (Bibliothek, Halle) die Kaesten-in-Kaesten erst richtig sichtbar. Jetzt: fast weiss, EIN Ton, keine zweite Flaeche. Waerme kommt aus Tinte, Serife und Gold, nicht aus dem Grund. */ --fam-papier: #FDFCFA; --fam-papier-2: #FDFCFA; --fam-karte: #FFFFFF; --fam-tinte: #1E2A32; --fam-tinte-2: #46545D; --fam-meta: #5E6A73; --fam-linie: #DDD6C6; --fam-linie-2: #EBE6DA; --fam-navy: #0E2A3B; --fam-navy-2: #16384C; --fam-navy-3: #1F4A63; --fam-gold: #B88A3E; --fam-gold-text: #856326; --fam-gold-hell: #D9B877; --fam-gold-soft: #F6EEDC; --fam-gold-linie: #EBDCB8; --fam-ok: #1F7A4D; --fam-ok-soft: #E8F3EA; --fam-warn: #B3541E; --fam-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --fam-sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fam-radius: 8px; --fam-radius-klein: 4px; --fam-schatten: 0 1px 2px rgba(14, 42, 59, .05), 0 10px 28px -20px rgba(14, 42, 59, .35); --fam-mass: 68ch; /* ---- os-industrial.css (Verzeichnis, Redaktion, Halle, Bibliothek, Marktplatz) ---- */ --os-bg: var(--fam-papier); --os-bg-2: var(--fam-papier-2); --os-ink: var(--fam-tinte); --os-ink-2: var(--fam-tinte-2); --os-steel: var(--fam-meta); --os-line: var(--fam-linie); --os-line-2: var(--fam-linie-2); --os-gold-2: var(--fam-gold-text); /* ---- Altes Hausschema (base.html des Verzeichnisses, engines_base, supplysphere.css) ---- */ --cream: var(--fam-papier); --paper: var(--fam-karte); --ink: var(--fam-tinte); --muted: var(--fam-meta); --line: var(--fam-linie); --gold2: var(--fam-gold-hell); --muted-text: var(--fam-meta); --gold-text: var(--fam-gold-text); /* ---- Bibliothek: — Inline-Stil, aber die Variable dahinter gehoert uns. ---- */ --ocean-50: var(--fam-papier); /* ---- Mutterseite (oceansphere-service.com, --ink-*-Palette) ---- */ --bg: var(--fam-papier); --text: var(--fam-tinte); --ink-500: var(--fam-meta); /* ---- ShipMind ---- */ --white: var(--fam-papier); --text-body: var(--fam-tinte-2); --text-dark: var(--fam-tinte); } /* ---- Grundschrift: 16 px, 1,6. Gleiche Spezifitaet wie body.os in os-industrial.css, spaeter geladen, also gewinnt diese Regel. ---- */ body, body.os, body.m-maritime { background: var(--fam-papier); color: var(--fam-tinte); font-size: 16px; line-height: 1.6; } /* ---- Redaktion: der maritime Block setzte Ueberschriften bewusst auf Inter (10.09.). Das nehmen wir zurueck — Serife fuer Titel ist die Familien-DNA. Die acht anderen Mandanten haben die Klasse m-maritime nicht und bleiben unberuehrt. ---- */ /* `html body…` = eine Stufe mehr Spezifitaet als `body.m-maritime h1` im Inline-Block der Redaktion und als `.os-hero h1` in os-industrial.css. Gemessen am 20.09.: ohne diese Stufe blieb jede Ueberschrift Inter, obwohl die Datei zuletzt lud. */ html body.os h1, html body.os h2, html body.os h3, html body.m-maritime h1, html body.m-maritime h2, html body.m-maritime h3, html body.m-maritime .title { /* !important, weil base.html des Verzeichnisses (Z. 32) Inter mit !important erzwingt — ein Relikt der „Industrial"-Phase vom 10.09. Beim Umschalten wird diese Zeile dort entfernt, dann kann das !important hier wieder weg. */ font-family: var(--fam-serif) !important; font-weight: 600; letter-spacing: .005em; color: var(--fam-navy); } /* Ueberschriften auf dunklem Grund bleiben weiss. Gemessen 20.09.: die Startseite des Verzeichnisses nutzt `.hero` (nicht `.os-hero`) — ohne diese Zeile stand die Hero- Ueberschrift Navy auf Navy. Alle bekannten dunklen Flaechen der Familie: */ html body.os .hero h1, html body.os .hero h2, html body.os .hero h3, html body.os .os-hero h1, html body.os .os-hero h2, html body.os .pkopf h1, html body.os .pkopf h2, html body.os .pkopf h3, html body.os .navy h1, html body.os .navy h2, html body.os .navy h3, html body.os [class*="dunkel"] h1, html body.os [class*="dunkel"] h2, html body.m-maritime .hero h1, html body.m-maritime .hero h2 { color: #fff; } /* Heller Zweittext, der nur auf dunklem Grund gedacht war, darf auf Papier nicht landen: --os-steel-2 (#8ea6b4) ist auf Papier 2,3:1. Auf hellem Grund Meta, auf Navy bleibt hell. */ html body.os .os-hero, html body.os .hero, html body.os .pkopf { --os-steel-2: #8ea6b4; --fam-meta: #B9CBD7; } html body.os { --os-steel-2: var(--fam-meta); } html body.os h4, html body.m-maritime h4 { color: var(--fam-navy); } /* Kachel-Zweittext: .85rem waren 13,6 px — unter der Lesegrenze fuer laufenden Text. */ html body.os .firm p, html body.os .firm .meta, html body.os .tile .n { font-size: .92rem; } /* ---- Karten und Kacheln: weiss auf Papier, warmer Rand ---- */ body.os .card, body.os .firm, body.os .tile, body.m-maritime .card { background: var(--fam-karte); border-color: var(--fam-linie); } /* ---- Etiketten: Gold weich statt Beigegrau; ein leeres Etikett nimmt keinen Platz ---- */ body.os .tag, body.m-maritime .badge { background: var(--fam-gold-soft); border-color: var(--fam-gold-linie); color: var(--fam-gold-text); } body.os .tag:empty, body.m-maritime .badge:empty { display: none; } /* ---- Links in Gold-Text (5,2:1), nicht im hellen Gold (3,1:1) ---- */ body.os main a:not(.btn):not(.chip):not(.tile):not(.os-btn):not(.card), body.m-maritime main a:not(.btn):not(.chip):not(.tile):not(.os-btn):not(.card) { color: var(--fam-gold-text); } body.os .hidden-contact { color: var(--fam-gold-text); font-style: normal; letter-spacing: 0; } /* ---- Zweittext, Meta ---- */ body.os .muted, body.os .meta, body.m-maritime .card-meta, body.m-maritime .article-meta { color: var(--fam-meta); } /* ---- Lesbare Zeilenlaenge — nur dort, wo Fliesstext sicher als Artikel laeuft ---- */ body.m-maritime article.full p, body.m-maritime article.full li, body.os .artikel p, body.os .wissen-text p { max-width: var(--fam-mass); } /* ---- Redaktion: Seitennummerierung mit 22 Links lief als Flex-Zeile ohne Umbruch 11 px ueber den rechten Rand (gemessen 20.09., scrollWidth 1291 bei 1280). ---- */ html body.m-maritime .pagination { flex-wrap: wrap; } /* ---- Kein Scroll-Einflug. Messlatte 20.09.: keine der Vorbildseiten (Wärtsilä, Everllence, Alfa Laval, Kongsberg) blendet Inhalte beim Scrollen ein — nur wir. Quelle ist EIN Mechanismus: os-motion.js setzt `html.js` und `.is-in`, os-industrial.css haelt `[data-reveal]` bis dahin bei opacity 0 / translateY(14px). Gleiche Spezifitaet, spaeter geladen ⇒ diese Regel gewinnt; das Skript laeuft leer. Zaehler (`[data-count]`) bleiben. ---- */ html.js [data-reveal] { opacity: 1; transform: none; transition: none; } /* ---- Hauptknopf: dunkle Schrift auf Gold (5,1:1) statt weiss auf Gold (3,1:1). Der Kontrastscan vom 20.09. fand „Request a part" auf jeder Seite unter 3,5:1. ---- */ html body.os .btn-gold, html body.m-maritime .btn-gold, html body.os .os-btn:not(.os-btn-ghost):not(.os-btn-navy), html body.os a.os-btn.os-btn-gold { background: var(--fam-gold); border-color: #A37A33; color: #2B2006; }