/* ============================================================ KASTNER HUB · UI-LAYER ------------------------------------------------------------ WICHTIG — Schichtung: 1. kastner_tokens.css (Marke, aus dem Brand-Paket) --kbh-* 2. kastner_hub.css (DIESE DATEI, Hub-Semantik) --c-* / --sp-* / --fs-* Diese Datei DUPLIZIERT die Marke nicht, sie SETZT DARAUF AUF. Alle Markenwerte werden per var(--kbh-…) referenziert. Die Hex-Werte hinter dem Komma sind nur Notnagel, falls die Brand-Datei mal nicht geladen ist — sie entsprechen exakt dem Markenmanual v1.1 (01.07.2026). Quelle der Wahrheit bleibt kastner_brand.json. Ändert sich dort ein Wert -> kastner_tokens.css neu erzeugen. Diese Datei bleibt unangetastet. Version 1.0 · Juli 2026 ============================================================ */ :root { /* ========================================================== 1 · MARKE (nur referenziert, nie neu definiert) ========================================================== */ --k-blue: var(--kbh-blue, #006293); /* Primär */ --k-saffron: var(--kbh-saffron, #e1ba2a); /* Akzent */ --k-grapefruit: var(--kbh-grapefruit, #ed6a5a); /* Akzent */ --k-charcoal: var(--kbh-charcoal, #313238); /* Text */ --k-logoblack: var(--kbh-black, #171717); /* nur Logo */ --k-white: var(--kbh-white, #ffffff); /* Tints — kanonisch aus dem Styleguide (Manual, Abschnitt 4). Charcoal-Staffel ist bewusst 50/20/7 %, nicht 75/50/25 %. */ --k-blue-75: var(--kbh-blue-75, #4089AE); --k-blue-50: var(--kbh-blue-50, #80B1C9); --k-blue-10: var(--kbh-blue-10, #E6EFF4); --k-saffron-75: var(--kbh-saffron-75, #E9CB5F); --k-saffron-50: var(--kbh-saffron-50, #F0DD95); --k-saffron-25: var(--kbh-saffron-25, #F8EECA); --k-grapefruit-75: var(--kbh-grapefruit-75, #F28F83); --k-grapefruit-50: var(--kbh-grapefruit-50, #F6B5AD); --k-grapefruit-25: var(--kbh-grapefruit-25, #FADAD6); --k-charcoal-50: var(--kbh-charcoal-50, #98999C); --k-charcoal-20: var(--kbh-charcoal-20, #D6D6D7); --k-charcoal-7: var(--kbh-charcoal-7, #F1F1F1); /* ========================================================== 2 · SEMANTIK — das benutzen die Module. Nie --k-blue direkt im Modul, immer --c-action usw. ========================================================== */ /* Flächen */ /* Hub-Entscheidung: --kbh-color-bg ist Weiß (Website-Logik). Im Hub liegen weiße Karten auf einem leicht getönten Grund, sonst verschwinden sie. Daher App-Hintergrund = Charcoal 7 %, Karten = Weiß (= --kbh-color-bg). */ --c-bg: var(--k-charcoal-7); /* Seitenhintergrund */ --c-surface: var(--k-white); /* Karten, Panels */ --c-surface-alt: var(--k-blue-10); /* hervorgehoben */ --c-line: var(--k-charcoal-20); /* Rahmen, Trenner */ /* Text */ --c-text: var(--k-charcoal); --c-text-muted: var(--k-charcoal-50); --c-text-invert: var(--k-white); --c-text-link: var(--k-blue); /* Aktion Hover hellt auf (Blue 75 %) statt eine neue dunklere Farbe zu erfinden — bleibt damit innerhalb der definierten Tint-Leiter. */ --c-action: var(--k-blue); --c-action-hover: var(--k-blue-75); --c-action-soft: var(--k-blue-10); --c-focus: var(--k-blue); /* Status Die Marke hat KEIN Grün. „Erledigt" läuft über Blau. Regel aus dem Manual: Blue dominiert, Saffron/Grapefruit nur sparsam für wichtige Details. */ --c-status-offen-bg: var(--k-charcoal-20); --c-status-offen: var(--k-charcoal); --c-status-aktiv-bg: var(--k-saffron-25); --c-status-aktiv: var(--k-charcoal); --c-status-fertig-bg: var(--k-blue-10); --c-status-fertig: var(--k-blue); --c-status-alarm-bg: var(--k-grapefruit-25); --c-status-alarm: var(--k-charcoal); /* ========================================================== 3 · TYPOGRAFIE — Staffel aus dem Manual (Abschnitt 5) Headline = Swear Display MEDIUM (500), nicht Bold. Subline/Eyebrow = Myriad Pro Bold, Tracking 0.15em. Copy = Myriad Pro Regular. ========================================================== */ /* Die kompletten Stacks stehen in kastner_tokens.css — hier nur durchreichen. Inhalt dort: headline: "swear-display", "Swear Display", "Fraunces", Georgia, serif text: "myriad-pro", "Myriad Pro", "Source Sans 3", Helvetica, Arial, sans-serif */ --font-display: var(--kbh-font-headline, "swear-display", "Swear Display", "Fraunces", Georgia, serif); --font-sans: var(--kbh-font-text, "myriad-pro", "Myriad Pro", "Source Sans 3", Helvetica, Arial, sans-serif); --fw-display: 500; /* Swear Display Medium */ --fw-copy: 400; /* Myriad Pro Regular */ --fw-bold: 700; /* Myriad Pro Bold */ /* Verhältnis laut Styleguide fixiert: H1 : Copy = 4 : 1, Subline = Copy. H1 skaliert auf dem iPad mit — 64px feste Größe bricht im Hochformat. */ --fs-h1: clamp(2.5rem, 6vw, 4rem); /* 40 – 64 px */ --fs-h2: clamp(1.75rem, 4vw, 2.5rem);/* 28 – 40 px */ --fs-h3: 1.75rem; /* 28 px */ --fs-h4: 1.375rem; /* 22 px */ --fs-eyebrow: 1rem; /* 16 px */ --fs-copy: 1rem; /* 16 px – Basis */ --fs-caption: 0.8125rem; /* 13 px */ --lh-h1: 1.1; --lh-h2: 1.15; --lh-h3: 1.2; --lh-h4: 1.3; --lh-eyebrow: 1.4; --lh-copy: 1.5; --lh-caption: 1.45; --ls-eyebrow: var(--kbh-subline-tracking, 0.15em); /* Tracking 150 */ --ls-default: 0; /* ========================================================== 4 · ABSTÄNDE · FORM · iPad ========================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(49,50,56,.06), 0 4px 12px rgba(49,50,56,.05); --shadow-modal: 0 8px 40px rgba(49,50,56,.20); --touch-min: 44px; /* iPad: alles Antippbare mindestens so groß */ --w-content: 1140px; --w-text: 64ch; --header-h: 64px; /* Schutzzone ums Logo = ½ Logohöhe. Manual, Abschnitt 6. */ --logo-h: 32px; --logo-safezone: 16px; } /* ============================================================ Basis ============================================================ */ body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-weight: var(--fw-copy); font-size: var(--fs-copy); line-height: var(--lh-copy); -webkit-text-size-adjust: 100%; } h1, h2, h3, .headline { font-family: var(--font-display); font-weight: var(--fw-display); /* Medium – bewusst nicht Bold */ letter-spacing: var(--ls-default); color: var(--c-text); margin: 0 0 var(--sp-3); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--k-blue); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); } /* H4 wechselt laut Manual die Familie: Myriad Pro Bold */ h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-h4); margin: 0 0 var(--sp-2); } /* Subline / Eyebrow – der Kicker über Überschriften */ .eyebrow { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-action); } .caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-muted); } a { color: var(--c-text-link); } :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }