/* ═══════════════════════════════════════════════════════════════════════════ LBW digital — Stilblatt Weiß überwiegt · Nacht ist die Zäsur · Werkgrün ist der einzige Akzent ═══ MITTELWEG, 26.08. ════════════════════════════════════════════════════ Ansage: „die farben vom grünen, aber die eleganz und eckige vom anderen." Geblieben ist deshalb die FORM der schwarz-orangen Runde — `border-radius:0` ausser bei Punkten und Pillen, kein `box-shadow`, dieselbe Schriftleiter, dieselben drei Abstandsstufen, dieselben Scroll-Beobachter in main.js. Zurueckgekommen sind die FARBWERTE der gruenen Marke. Keiner davon ist hier gemischt worden; jeder steht in 01-marke/MARKENHANDBUCH.html, in 07-marketing/print/broschuere/ALT-broschuere-vorlage.html oder in der Werkgruen-/Tinte-Leiter von 06-software/app/ui-bausteine/ci/tokens.css. Gemessen (WCAG 2.1, sRGB, Python; im Browser mit pruefe-kontrast.js belegt): #3BA064 auf Weiss 3,28 : 1 Flaechen, Linien, Balken. NIE Text auf Hell. #3BA064 auf #F4F6F4 3,02 : 1 ✔ knapp ueber 3 — die Grenze, s. u. #3BA064 auf #020C09 6,04 : 1 ✔ derselbe Wert traegt im dunklen Block ALS TEXT #007032 auf Weiss 6,24 : 1 ✔ die Textfassung fuer Verweise im Fliesstext Weiss auf #005A20 8,46 : 1 ✔ so und nicht anders wird der Knopf gebaut #101C15 auf Weiss 17,52 : 1 ✔ Fliesstext #4A6153 auf Weiss 6,72 : 1 ✔ Nebentext #4A6153 auf #F4F6F4 6,19 : 1 ✔ derselbe Nebentext auf Papier #DCE7DE auf #020C09 15,61 : 1 ✔ Text im dunklen Block #98AB9F auf #020C09 8,18 : 1 ✔ Nebentext im dunklen Block WER HIER EINE FARBE AENDERT, RECHNET SIE NACH. Und misst im Browser erst, nachdem `transition: none` gesetzt ist — sonst liest man Zwischenfarben (reproduzierbar 1.00, 1.03, 1.05, 1.78; alles Messfehler). ═══ EIN AKZENT FUER BEIDE GRUENDE — DAS IST DER TRICK ════════════════════ Gruen auf Weiss ist tueckisch: der Markenwert Werkgruen #008A4B sieht als Flaeche gut aus, traegt aber im dunklen Block als Text nur 4,47 : 1 und faellt damit knapp durch AA. #3BA064 (Werk-500 derselben Leiter) liegt genau im Fenster, das BEIDE Bedingungen erfuellt: hell genug fuer 3 : 1 gegen Weiss, dunkel genug fuer 4,5 : 1 gegen Nacht. Deshalb braucht der dunkle Block KEINEN eigenen Akzentwert — eine Variable, ein Ton, ueberall. ═══ DAS ORANGE DER MARKE BLEIBT DEM ZEICHEN ══════════════════════════════ #E07C1E gehoert dem Punkt in „digital." und wird hier NICHT als Bedienfarbe nachgebaut — die Logodateien entstehen aus 01-marke/corporate-design/ werkzeug/. Zwei Stellen im Blatt fuehren es trotzdem als KATEGORIE-Farbe (Aufmass-Hauptflaeche, GBU-Ampel „mittleres Risiko"): dort ist Gruen keine Option, weil daneben schon ein Gruen mit anderer Bedeutung steht. Beide Stellen sind unten einzeln begruendet. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* Grundfarben — hell. Jeder Wert steht so im Markenhandbuch („Papier", „Tinte", „Grau") oder auf einer Sprosse der Tinte-Leiter aus app/ui-bausteine/ci/tokens.css — die Neutralen der gruenen Marke sind nicht kaltgrau, sondern minimal gruenstichig (Farbton 158,3°). */ --w:#FFFFFF; /* Markenhandbuch „Papier" */ /* Zurueckgenommen, aber lesbar: 5,18 : 1 auf Weiss, 4,77 : 1 auf Papier. Fuer Zustaende, die „geht nicht" sagen sollen, ohne unleserlich zu werden (gesperrte Tage im Kalender). Markenhandbuch „Grau". */ --grau-leise:#63706A; --papier:#F4F6F4; /* Tinte-Leiter ti-50 */ --linie:#D3DCD6; /* Tinte-Leiter ti-200 */ --linie-stark:#B7C6BD; /* Tinte-Leiter ti-300 — 1,78 : 1, dekorativ */ --tinte:#101C15; /* Markenhandbuch „Tinte" — 17,52 : 1 auf Weiss */ --grau:#4A6153; /* Tinte-Leiter ti-700 — 6,72 : 1 / 6,19 : 1 */ /* Zäsur — dunkel. Markenhandbuch „Nacht" und „Panel"; der Textwert ist --nebel aus der Broschuerenvorlage, die Linie deren --randlind. */ --schwarz:#020C09; --schwarz-2:#08201A; --d-text:#DCE7DE; /* 15,61 : 1 auf Nacht */ --d-grau:#98AB9F; /* Tinte-Leiter ti-400 — 8,18 : 1 */ --d-linie:rgba(143,233,168,.30); /* Mint 30 % — Broschuere --randlind */ /* ═══ AKZENT — ZWEI WERTE, UND DER UNTERSCHIED IST EINE REGEL ══════════ Alle vier Akzentwerte sind Sprossen EINER Leiter, der Werkgruen-Leiter aus app/ui-bausteine/ci/tokens.css (Farbton 154,0°, Markenwert #008A4B): werk-500 #3BA064 Flaeche werk-700 #007032 Text auf Hell werk-800 #005A20 Knopf werk-900 #004714 gedrueckter Knopf Gemessen: #3BA064 auf Weiss 3,28 : 1, auf Papier 3,02 : 1 (reicht fuer Flaechen und Linien, NICHT fuer Text auf Hell), auf #020C09 6,04 : 1 — im dunklen Block traegt derselbe Wert also auch als Schrift. GRUEN IST AUF HELL EINE FLAECHENFARBE, KEINE SCHRIFTFARBE. Knoepfe, Striche, Balken, Punkte, Kartenkanten — ja. Ueberschriften, Etiketten, Zahlen im Fliesstext — nein. --akzent-text bleibt fuer die wenigen Stellen, an denen ein Verweis wirklich Farbe braucht. GRENZE, offen benannt: 3,02 : 1 auf --papier ist die knappste Zahl im Blatt. Wer --papier je dunkler zieht, prueft diese Paarung zuerst. */ --akzent:#3BA064; /* Flächen, Linien, Balken, Punkte, Grafik */ --akzent-text:#007032; /* Verweise und Auszeichnung auf Hell — 6,24 : 1 */ /* ═══ WARUM DER KNOPF EIN EIGENES GRUEN HAT ═════════════════════════════ Ansage von damals, unveraendert gueltig: „wenn button farbig dann schrift weiß". Mit --akzent ist das nicht zu haben — Weiss auf #3BA064 sind 3,28 : 1, und die Knopfschrift ist 16 px bei Schnitt 600, gilt also nicht als gross. Gefordert wären 4,5. Zwei Wege gäbe es: die Schrift grösser und fetter machen, bis die Ausnahme für grosse Schrift greift (3,0) — dann stünde die Lesbarkeit auf „gerade eben zulässig". Oder die FLÄCHE dunkler nehmen. Hier die Fläche: #005A20 (werk-800, dieselbe Leiter, derselbe Farbton), Weiss darauf 8,46 : 1. ✔ AA mit Luft. Die helle Flächenfarbe bleibt unangetastet: Linien, Balken, das Netz im Hero und die Markierung im Luftbild tragen weiter --akzent. Ein Knopf ist der einzige Ort, an dem Schrift AUF dem Gruen steht. */ --akzent-knopf:#005A20; --akzent-tief:#004714; /* gedrückter/überfahrener Knopf — werk-900 */ --akzent-lasur:rgba(59,160,100,.28); /* Textmarker-Streifen unter Wörtern */ /* Hauchflaeche hinter Hinweisen und belegten Tagen. War als Literal #FFEFE8 an sechs Stellen eingestreut, jetzt hier: werk-50 der gruenen Leiter. Tinte darauf 16,15 : 1, --akzent-tief darauf 10,13 : 1. */ --akzent-hauch:#EFF8F1; /* Warnfarbe. Bleibt Warnfarbe, wird nie zur Bedienfarbe. */ --rot:#C0392B; /* Schrift — zwei, mehr nicht. Ubuntu ausschliesslich in der Wortmarke. */ --f:"Geist","Helvetica Neue",Arial,sans-serif; --fu:"Ubuntu",var(--f); /* ═══ DIE SCHRIFTLEITER — ACHT STUFEN, MEHR GIBT ES NICHT ═══════════════ Geprüft von `pruefe-schriftleiter.py`: jede `font-size` im Blatt muss eine dieser Variablen benutzen. Ein fester Wert daneben ist ein Fehler, kein Sonderfall. --fs-zahl liegt bewusst DEUTLICH unter --fs-h2 (nicht drei Pixel; das liest niemand als zwei Stufen). riese nur die eine Kennzahl im Hero display nur die h1 h2 Abschnittsüberschrift — genau eine je Abschnitt zahl Ziffern über kleiner Unterschrift, Schrittnummern lead Lead-Absatz, Zitat, Kartenüberschrift body Fliesstext klein Bildunterschrift, Fussnote, Attrappen-Innenleben label Etikett/Kicker, versal, gesperrt */ --fs-riese:clamp(2.8rem,5.4vw,4.6rem); --fs-display:clamp(2.3rem,4.6vw,4.1rem); --fs-h2:clamp(1.7rem,2.9vw,2.55rem); --fs-zahl:clamp(1.3rem,1.9vw,1.65rem); --fs-lead:clamp(1.06rem,1.3vw,1.28rem); --fs-body:1rem; --fs-klein:.8125rem; --fs-label:.6875rem; /* ═══ DREI ABSTANDSSTUFEN, MEHR NICHT ═══════════════════════════════════ Die alte Seite hatte vierzehn verschiedene senkrechte Abstaende zwischen 11 und 48 px. Das war die Beanstandung „keine gigantische abstände". Hier gibt es drei, und sie heissen nach ihrer Rolle. */ --a-gross:44px; /* zwischen Bloecken innerhalb eines Abschnitts */ --a-mittel:32px; /* zwischen Ueberschrift und Text, zwischen Karten */ --a-klein:16px; /* innerhalb eines Blocks */ /* Raster */ --rand:clamp(20px,5vw,72px); --mass:1240px; /* aeussere Breite */ --text:720px; /* DIE Textachse. Jeder Fliesstext haengt hier. */ --sekt:clamp(72px,8.5vw,132px); /* Abschnittsluft oben und unten */ } /* ── Grundlage ────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0;background:var(--w);color:var(--tinte); font-family:var(--f);font-size:var(--fs-body);font-weight:400; line-height:1.65;letter-spacing:-.005em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg{max-width:100%} /* height:auto ist Pflicht, sobald ein width/height traegt — sonst streckt der Browser das Bild auf die Attributhoehe. Einmal gemessen: 210 x 896 statt 210 x 183. */ img{height:auto;display:block} h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.1} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit} /* Sprungmarke fuer die Tastatur */ .skip{position:absolute;left:-9999px;top:0;z-index:200} .skip:focus{left:var(--rand);top:12px;background:var(--akzent-knopf);color:#fff; padding:10px 16px;border-radius:0;font-size:var(--fs-klein);font-weight:600} :focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:0} /* ── Breiten ──────────────────────────────────────────────────────────────── */ .wrap{max-width:var(--mass);margin-inline:auto;padding-inline:var(--rand)} /* EINE Textachse. Die alte Seite hatte drei Bloecke in drei Breiten — die Beanstandung „der text links bündig" war in Wahrheit eine Achsenfrage. */ .schmal{max-width:var(--text)} /* ── Abschnittsbänder ─────────────────────────────────────────────────────── */ .band{padding-block:var(--sekt);position:relative} .band--papier{background:var(--papier)} .band--dunkel{background:var(--schwarz);color:var(--d-text)} /* ═══ DAS TOPO-MUSTER ══════════════════════════════════════════════════════ EINE Datei für beide Richtungen: `assets/img/topo.webp` ist eine Graustufen-Zeichnung — weisse Höhenlinien auf schwarzem Grund, aus der Marken-Textur (01-marke/muster/textur-topo.jpg) erzeugt und entfärbt. Auf DUNKEL wird sie mit `screen` aufgelegt: Schwarz bleibt schwarz, die Linien hellen auf. Auf HELL wird sie erst invertiert und dann mit `multiply` aufgelegt: Weiss bleibt weiss, die Linien dunkeln ab. Deshalb genügt eine Datei. Zwei wären zwei Wahrheiten — und eine davon wäre irgendwann falsch eingefärbt. Ohne Alphakanal, weil der bei WebP teuer ist: die Graustufenfassung wiegt 60 KB, dieselbe Zeichnung mit Alpha wog 120 KB bei gleicher Kantenlänge. `pointer-events:none` ist Pflicht — die Ebene liegt über dem Grund, aber der Inhalt darüber (`> .wrap { position:relative }`), sonst frisst sie jeden Klick. */ /* `footer.fuss`, NICHT `footer`. GEMESSEN am 26.08.: das Kundenzitat in #referenz trägt ein