/* ═══════════════════════════════════════════════════════════════════ HIG-Gruppe — DESIGN TOKENS Source of truth for every value on the site. No raw hex or px may appear outside this file (.loop/PRINCIPLES.md §3). Portiert aus exploration-v2 / hig-draft-1 (Entwurf 1). Status: die Kundin fand die Richtung gut („geht in die richtige Richtung") — NICHTS ist formell freigegeben. Werte dürfen sich begründet weiterentwickeln; jede Änderung wandert ins Protokoll DESIGN §13, Namen bleiben stabil. Siehe DESIGN §1–§4. ═══════════════════════════════════════════════════════════════════ */ @font-face{font-family:Jakarta;src:url(../fonts/jakarta-latin.woff2)format("woff2");font-weight:200 800;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:Jakarta;src:url(../fonts/jakarta-latinext.woff2)format("woff2");font-weight:200 800;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ /* ── Colour ────────────────────────────────────────────────────── Atlas runs deep-green + mint + white. HIG has no green, so the roles map to their own brand: deep = warm dark, the only dark surface left stone = warm sand, standing in for Atlas's mint tint signal = #DB0F18, sampled from HIG's own logo Revised 2026-08-01: v2.0 mapped Atlas's *coloured* anchor onto a neutral near-black, which drained the colour out of the whole page. Now the dark surfaces are mostly replaced by HIG red, every neutral is warmed, and a cream field carries whole sections. */ --c-white: #FFFFFF; --c-cream: #FBF6EE; /* large soft section fields */ /* Flächenton, 2026-08-06 vom Kunden aus sechs Kandidaten gewählt („Kühles Grau", vorher das warme Sand #F5EDE0 / #EBE0CE). ACHTUNG — das bricht bewusst die Regel drei Absätze weiter oben: „every neutral is warmed" gilt für diesen Ton nicht mehr. --c-cream und --c-line sind weiterhin warm, der Flächenton ist es nicht. Wo beide aneinanderstossen — Kachel auf Cremefeld, Hairline um eine Kachel — steht jetzt kühl neben warm. Das ist die Entscheidung, kein Versehen. Wer den Ton erneut anfasst, entscheidet mit, ob Cream und Line mitgehen. */ --c-stone: #F1F2F1; /* nested boxes + tint cards */ --c-stone-2:#E2E4E3; /* uncovered LPH segments */ --c-line: #EDE5D8; /* 2026-08-17 (Simon): Kante von BEDIENELEMENTEN, nicht von Flaechen. --c-line misst auf Weiss nur ~1,2:1. Als Trennung zwischen Feldern ist das genau richtig (§6: die Haarlinie soll leise sein), als Begrenzung eines Eingabefelds nicht: WCAG 1.4.11 verlangt 3:1, damit ein Feld ueberhaupt als Feld erkennbar ist. Deshalb ein eigenes Token statt --c-line zu verdunkeln — sonst haette sich das ganze Flaechenbild mitverschoben. Der Wert ist NICHT frei gewaehlt: er ist die exakte arithmetische Mitte zwischen --c-muted (#6F645E) und --c-muted-d (#B3A79E), also die fehlende Sprosse derselben warmen Leiter — (111+179)/2, (100+167)/2, (94+158)/2 = 145, 133, 126. Gemessen: 3,58:1 auf Weiss, 3,33:1 auf --c-cream, 3,19:1 auf --c-stone. Auf allen drei Untergruenden ueber der Schwelle, auf Stone am knappsten; wer einen vierten Untergrund einfuehrt, misst nach. Die drei Zustaende des Felds sind drei Stufen derselben Leiter, jede dunkler als die vorige: --c-field 3,58:1 → --c-muted 5,74:1 (Hover) → --c-signal 5,13:1 (Fokus, plus der Umriss aus base.css). */ --c-field: #91857E; /* 2026-08-16 (Simon): #2B1F1D las sich als muffiges Braun statt als Dunkel. Jetzt tiefer und fast neutral — nur noch eine Spur Wärme, die zu --c-ink passt. Gleichzeitig ist die ROLLE geschrumpft: --c-deep trägt keine grossen Flächen mehr (Footer ist hell, die dunklen Zahlen-Blöcke tragen jetzt --red-900). Übrig bleiben kleine, funktionale Einsätze: Hero-Backdrop hinter dem Foto, LPH-Balken, Skip-Link, Pfeil-/Icon-Konturen. Siehe DESIGN §2/§13. */ --c-deep: #181312; /* warm near-black — klein und funktional, nie Fläche */ --c-ink: #241C1A; /* warm near-black, text */ /* Der gedaempfte Textton auf hellem Grund. Misst 5,74:1 auf Weiss und 5,33:1 auf --c-cream — AA fuer jede Textgroesse. Das ist der Ton fuer ALLES Nebensaechliche, das trotzdem gelesen werden soll: Credits, Nummern, Tabellenkoepfe, Platzhalter, Beitexte. */ --c-muted: #6F645E; /* 2026-08-17 (Simon): ROLLE KORRIGIERT. Dieser Ton stand an ~38 Stellen als Textfarbe auf Weiss und misst dort nur 2,35:1 (auf Cream 2,18:1) — ein klarer Verstoss gegen DESIGN §12 / PRINCIPLES §4. Er war nie als heller Text gemeint; das „-d" stand fuer „auf Dunkel", wo er stimmt: 7,84:1 auf --c-deep, 6,18:1 auf --red-900. REGEL: nie Text auf hellem Grund. Erlaubt sind (a) gedaempfter Text AUF dunklen Flaechen und (b) rein dekorative Grafik auf Hell, die keine Aussage traegt. Das sind noch VIER Stellen: die Aufzaehlungspunkte von .minilist und .semcard__dot (zweimal) sowie die Hover-Kante von .job. Alles andere nimmt --c-muted, Kanten von Bedienelementen nehmen --c-field. (Die .field-Hover-Kante stand bis 2026-08-17 ebenfalls hier; seit die Ruhekante --c-field traegt, waere dieser Ton heller als sie.) */ --c-muted-d:#B3A79E; --c-signal: #DB0F18; --c-signal-d:#A80C12; /* ── Marken-Leiter (Phase 1, /marke) ───────────────────────────── Systematische Tints/Shades des Markenrots — für Styleguide, Print und künftige Zustände (Diagramme, Hover-Stufen). Aus dem Anker gemischt (Weiß bzw. Schwarz); drei Stufen decken sich bewusst mit den Rollen-Tokens: 50 = --c-signal-soft, 600 = --c-signal, 700 = --c-signal-d. --c-signal-l ist KEIN Leiterwert — er ist der AA-taugliche Rotton AUF dunklen Flächen (s. u.). */ --red-50: #FDEBE9; --red-100:#F9D9DA; --red-200:#F3B2B5; --red-300:#EE8C90; --red-400:#E8656B; --red-500:#E13A42; --red-600:#DB0F18; --red-700:#A80C12; --red-800:#88090F; --red-900:#58060A; --c-signal-l:#FF6B62; /* red ON dark surfaces — #DB0F18 is only 3.2:1 against --c-deep and fails AA for small text */ --c-signal-soft:#FDEBE9; /* = --red-50. Seit 2026-08-14 ohne UI-Verwendung (Simon: keine weichen Farbflaechen als Hintergrund) */ /* ── Type ── */ --f: Jakarta, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* Schriftgewichte — EINE Quelle fuer die ganze Site. 2026-08-14 (Simon): Ueberschriften eine Stufe leichter, Display 500 / Titel 600. 2026-08-17 (Simon): 500 ist jetzt das MAXIMUM, auch in Klein-Elementen. Der Bestand lief dort auf 600/700; fett-schwarz neben Signalrot und Grau las sich hart. Das System kennt nur noch zwei Stufen — 400 Fliesstext, 500 alles Betonte. Unterschieden wird ueber Groesse, Farbe, Laufweite und Versalien, also mit denselben Mitteln, die DESIGN §6 ohnehin als Trennsprache nennt. Die vier Rollen zeigen weiterhin AUF WAS ein Wert wirkt, auch wo sie denselben Zahlenwert tragen: wer Titel wieder anheben will, aendert --fw-title, ohne die Mikrolabels mitzuziehen. EINZIGE Ausnahme im ganzen Projekt: die Logo-Nachbauten auf /marke (.mk-lock__tile span, .mk-lock__hig) tragen 800 — sie ZEIGEN die Wortmarke, sie setzen keinen Text. Siehe DESIGN §3/§13. */ --fw-body: 400; /* Fliesstext, bewusst leichte Nebenangaben */ --fw-display: 500; /* Hero, H1/H2, grosse Sektionstitel */ --fw-title: 500; /* Karten-, Zeilen-, Panel-Titel */ --fw-strong: 500; /* alles uebrige Betonte: Versal-Mikrolabels, Kuerzel, Links, Preise, Zahlen, strong */ --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base:1rem; --t-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem); --t-xl: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); /* 2026-08-17 (Simon): die Skala war oben zu laut zum Scannen. --t-2xl 3,5rem → 3rem (56 → 48px), --t-3xl 5,25rem → 4rem (84 → 64px). Die Kappe von --t-3xl wurde ab 1327px Viewport erreicht, das heisst JEDER Rechner sah dieselben 84px — auf einem Kursblatt sind das vier Zeilen Riesensatz, bevor der erste Inhalt kommt. Siehe DESIGN §3/§13. */ --t-2xl: clamp(1.875rem, 1.45rem + 1.9vw, 3rem); --t-3xl: clamp(2.25rem, 1.5rem + 2.6vw, 4rem); /* Der Hero ist eine eigene ROLLE, keine Überschrift wie jede andere: er steht auf einem Foto, über die volle Breite, als einziges Element im ersten Bildschirm. Er trägt deshalb weiter die alten --t-3xl-Werte, während .h1 auf Unterseiten kleiner wird. Getrennte Rollen bekommen getrennte Tokens — dieselbe Lehre wie bei --fw-* und --c-field. EINZIGER Verwender: .hero__h1 in components.css. */ --t-hero: clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem); --t-num: clamp(3rem, 2rem + 5vw, 5rem); /* ── Space ── */ --s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.25rem; --s-6:1.5rem;--s-8:2rem;--s-10:2.5rem;--s-12:3rem;--s-16:4rem;--s-20:5rem; /* 2026-08-17 (Simon): Kappe 7,5rem → 6rem (120 → 96px). Der vertikale Rhythmus war der zweite Grund, warum sich die Seite schwer scannen liess — zwei Sektionsgrenzen kosteten allein 240px. */ --section-y: clamp(3.5rem, 6vw, 6rem); /* 1320 → 1700 on 2026-08-05: the reference runs its content much wider — its headline starts ~145px into a 1900px viewport, ours started at ~330px. 1700 is the max-width INCLUDING the gutter, so the content box is 1620 and lands at ~140px on 1900, which is the reference's inset. Below ~1780px nothing moves: the gutter already governs there. 2026-08-17 (Simon, 27" bei innerWidth 1920): 1700 → 1512. Der obige Wert war an einer FREMDEN Referenz gemessen, nicht am Lesen. Auf 1920 ergab er 150px Rand und eine 1620px-Inhaltsbreite; die Raster wurden dadurch flach und breit (5 Standort-Boxen à 300px, 4 Seminarkarten à 390px), und Kopfzeilen zogen sich über die halbe Tischbreite. 1512 ist die gängige Design-Canvas-Breite: Rand 244px, Inhalt 1432px, Boxen à 265px, Karten à 343px. Die Innenmasse (.sec-head 60rem, .sd-text 68ch) bleiben unangetastet — sie begrenzten den Fliesstext schon vorher, die Breite fehlte den RASTERN. Siehe DESIGN §5/§13. */ --shell: 1512px; --gutter: clamp(1.25rem, 3.5vw, 2.5rem); /* Cap lowered 7.5rem → 4.5rem on 2026-08-05: the client read the stat blocks as sitting too high into the hero. They still straddle the edge — they just bite ~35px less on a wide screen. */ --overlap: clamp(0rem, -4rem + 9vw, 4.5rem); /* ── Shape — soft is the whole point of this direction ── */ /* Tightened ~30% on 2026-08-06 at the client's request: every container read as too rounded. The ratio between the three steps is unchanged, so cards, nested boxes and images still relate the same way — they just sit a little crisper. --r-pill stays 999px: it shapes buttons, dots and tick rings, which are meant to be fully round. */ --r-card: 15px; --r-sm: 10px; --r-img: 12px; --r-pill: 999px; --sh-card: 0 18px 44px -20px rgba(29,29,27,.20); --sh-float:0 30px 70px -28px rgba(29,29,27,.38); /* 2026-08-17 — der Grund hinter einem Modal (::backdrop). Abgeleitet, nicht gewaehlt: es ist --c-deep (#181312) bei 58 %. Der Wert hat eine Aufgabe: er muss die Seite so weit zuruecknehmen, dass das weisse Modal darauf ruhig steht, ohne sie auszuloeschen — hinter dem Scrim soll erkennbar bleiben, WO man ist. Er ist kein Flaechenton im Sinne von DESIGN §2 (dort geht es um Fuellungen eigener Elemente), sondern eine Abdunklung des Dahinter. */ --c-scrim: rgba(24,19,18,.58); /* ── Glass — the large red panels ──────────────────────────────── Added 2026-08-06: the big red containers now read as tinted glass over whatever sits behind them instead of a flat fill. brightness(.55) is doing ACCESSIBILITY work, not decoration. Two of the three panels float over a photograph, and white body text on a 78% red wash over a bright sky measures 3.9:1 — under AA. Knocking the backdrop down first pins the composite at ~5.4:1 against white and darker against anything else, so the text passes no matter what photograph is swapped in later. Raise --glass-signal's alpha and the brightness together, never one on its own. --glass-signal is --c-signal (#DB0F18) at 78%. It cannot be derived from the token, so the two must be kept in sync by hand. */ --glass-signal: rgba(219,15,24,.78); --glass-backdrop: blur(18px) saturate(150%) brightness(.55); --glass-edge: rgba(255,255,255,.22); --sh-glass: 0 26px 64px -30px rgba(29,29,27,.50), inset 0 1px 0 rgba(255,255,255,.18); /* A light glass counterpart lived here briefly, for the frosted intro panel over the group photograph. The panel was dropped the same day — it covered a face — and the tokens went with it rather than sit here unused. Recipe if it is ever wanted again: rgba(255,255,255,.72) over blur(22px) saturate(140%) brightness(1.25), and the text must be --c-ink, not --c-muted, which measures 3.4:1 on that composite. */ /* ── Motion — signature "Aufblenden" ── */ --ease: cubic-bezier(.22,1,.36,1); --dur: .7s; --dur-ui: .22s; } /* The stat-card overlap collapses fluidly, but below 760 the hero restacks entirely and the overlap has to be exactly 0, not "near 0". Lives here rather than in a component file so --overlap has exactly one owner. */ @media (max-width:760px){ :root{--overlap:0rem} }