/* ============================================================ KASTNER HUB · KOMPONENTEN-KIT (UI) ------------------------------------------------------------ WICHTIG — Schichtung: 1. kastner_tokens.css (Marke) --kbh-* 2. kastner_hub.css (Hub-Semantik) --c-* / --sp-* / --fs-* 3. kastner_ui.css (DIESE DATEI, Komponenten) Klassen + --ui-* Diese Datei definiert KEINE eigenen Farb- oder Schriftwerte. Alles wird über var(--k-…/--c-…/--sp-…/--fs-…) referenziert; Transparenzen entstehen per color-mix() aus Marken-Tokens. MODULE benutzen nur die Klassen hieraus (plus --c-* / --sp-* / --fs-*), nie --k-* direkt. Reihenfolge im : tokens.css -> hub.css -> ui.css. Umsetzung des abgestimmten UI-Mockups vom 16.07.2026: Kopfzeile (blau), Buttons primary/secondary/ghost/danger, Kennzahlkarten, Status- & Material-Chips, Formular mit Erfassungszeile, Tabelle mit Stückzahl-Stepper, Dialog. Version 1.2.1 · 10.08.2026 Änderung ggü. 1.2: BUGFIX — im Kommentar oben standen die Token- Muster ohne Leerzeichen direkt hintereinander (Stern gefolgt von Schrägstrich). Diese Zeichenfolge beendete den Kommentar vorzeitig, der Browser verwarf daraufhin den kompletten :root-Block mit allen --ui-*-Variablen (Kopfzeile grau statt blau, Primär-Button ohne Saffron, Felder ohne Rahmen — auf allen Geräten). Jetzt mit Leerzeichen entschärft. Sonst keinerlei Änderung. MERKE: In CSS-Kommentaren nie Stern+Schrägstrich ohne Leerzeichen schreiben. Änderung ggü. 1.1: Kopfzeile zeigt jetzt das Querlogo (Weiß) statt der Text-Wortmarke „Kastner · Hub" (Entscheidung 28.07., siehe Projektstand Version 10/11). Unter 700px wird der Nutzerblock ausgeblendet, nur der Abmelden-Button bleibt sichtbar — das breite Querlogo (14:1) braucht auf schmalen Screens sonst zu viel Platz. ============================================================ */ :root { /* -------------------------------------------------------- Komponenten-Semantik (Kandidaten für kastner_hub.css v1.1, bewusst erst mal hier gebündelt): Primary-Button = Saffron-Fläche mit Charcoal-Text (Entscheidung Stefan 16.07. — kein Braun, Marke hat keins). Hover bleibt in der Tint-Leiter: Saffron 75 %. -------------------------------------------------------- */ --ui-primary-bg: var(--k-saffron); --ui-primary-bg-hover: var(--k-saffron-75); --ui-primary-text: var(--k-charcoal); --ui-header-bg: var(--k-blue); --ui-header-text: var(--k-white); /* Ghost-Button lebt AUF der blauen Kopfzeile: halbtransparentes Weiß, aus dem Weiß-Token gemischt. */ --ui-ghost-bg: color-mix(in srgb, var(--k-white) 14%, transparent); --ui-ghost-bg-hover: color-mix(in srgb, var(--k-white) 26%, transparent); --ui-ghost-border: color-mix(in srgb, var(--k-white) 40%, transparent); /* Dialog-Overlay: Charcoal ~45 %, aus dem Token gemischt. */ --ui-overlay: color-mix(in srgb, var(--k-charcoal) 45%, transparent); /* Formularfelder: 1,5px-Rahmen laut Mockup. Radius nutzt --radius-sm (8px) — Mockup sagt „~9px", 4px-Raster gewinnt. */ --ui-field-border-w: 1.5px; } /* ============================================================ 1 · KOPFZEILE — Original Blue, Querlogo (Weiß) ------------------------------------------------------------ Bis v1.1 stand hier eine Text-Wortmarke „Kastner · Hub". Seit 28.07.2026 zeigt die Kopfzeile stattdessen das echte Querlogo (kastner_logo_quer_weiss_min.svg), Modulname bleibt als kleine Zeile darunter. Einbindung über header.php, nicht mehr per Hand in jedem Modul. ============================================================ */ .hub-header { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: var(--sp-2); gap: var(--sp-4); padding: var(--sp-2) var(--sp-5); background: var(--ui-header-bg); color: var(--ui-header-text); } /* Links: Logo + Modul-Untertitel */ .hub-header__brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hub-header__logo { display: block; height: 24px; width: auto; } .hub-header__module { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption); color: color-mix(in srgb, var(--ui-header-text) 75%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Rechts: Nutzer + Aktionen */ .hub-header__actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; margin-left: auto; } .hub-header__user { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; } .hub-header__user-name { font-size: var(--fs-copy); font-weight: var(--fw-bold); line-height: 1.2; color: var(--ui-header-text); } .hub-header__user-role { font-size: var(--fs-caption); line-height: 1.2; color: color-mix(in srgb, var(--ui-header-text) 75%, transparent); } /* Mobil-Fix (28.07.): Querlogo hat 14:1 Seitenverhältnis und braucht auf schmalen Screens fast die volle Breite — Nutzerblock weicht, nur der Abmelden-Button bleibt. Gleicher Breakpoint wie .capture-row. */ @media (max-width: 700px) { .hub-header__user { display: none; } } /* ============================================================ 2 · BUTTONS ------------------------------------------------------------ primary – Saffron-Fläche, Charcoal-Text (Hauptaktion) secondary – weiße Fläche, blauer Text, feiner Rahmen (neutrale Aktion auf hellem Grund) ghost – halbtransparent weiß, AUF der blauen Kopfzeile danger – weiße Fläche, Grapefruit-Text, feiner Rahmen ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--touch-min); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-copy); line-height: 1; cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; } .btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; } /* Primary — Saffron */ .btn--primary { background: var(--ui-primary-bg); border-color: var(--ui-primary-bg); color: var(--ui-primary-text); } .btn--primary:hover:not(:disabled) { background: var(--ui-primary-bg-hover); border-color: var(--ui-primary-bg-hover); } .btn--primary:active:not(:disabled) { background: var(--ui-primary-bg); } /* Secondary — weiß, blauer Text, feiner Rahmen */ .btn--secondary { background: var(--c-surface); border-color: var(--c-line); color: var(--c-action); } .btn--secondary:hover:not(:disabled) { background: var(--c-action-soft); border-color: var(--c-action); } /* Ghost — für die blaue Kopfzeile */ .btn--ghost { background: var(--ui-ghost-bg); border-color: var(--ui-ghost-border); color: var(--ui-header-text); } .btn--ghost:hover:not(:disabled) { background: var(--ui-ghost-bg-hover); } /* Danger — weiß, Grapefruit-Text, feiner Rahmen */ .btn--danger { background: var(--c-surface); border-color: var(--k-grapefruit); color: var(--k-grapefruit); } .btn--danger:hover:not(:disabled) { background: var(--k-grapefruit); border-color: var(--k-grapefruit); color: var(--c-text-invert); } /* Größen / Sonderformen */ .btn--sm { min-height: 36px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-caption); } .btn--block { width: 100%; } .btn--icon-only { padding: var(--sp-3); width: var(--touch-min); } /* ============================================================ 3 · KENNZAHLKARTEN — weiße Karte, dünner Rahmen ============================================================ */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); } .kpi-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); } .kpi-card__label { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-text-muted); } /* „groß und fett" — Myriad Pro Bold; Swear Display hat laut Manual nur Medium, deshalb hier bewusst die Textschrift. */ .kpi-card__value { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--c-text); font-variant-numeric: tabular-nums; } .kpi-card__hint { font-size: var(--fs-caption); color: var(--c-text-muted); } /* ============================================================ 4 · CHIPS — Pillenform ------------------------------------------------------------ Status: fertig/gezählt = helles Blau (KEIN Grün), offen = neutrales Grau. Dazu aktiv/alarm aus der Hub-Semantik. Material-Tags: Acetat blau, 3D-Druck saffron, Titan grau, „ohne Federscharnier" grapefruit. ============================================================ */ .chip { display: inline-flex; align-items: center; gap: var(--sp-1); height: 28px; padding: 0 var(--sp-3); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; } /* Status */ .chip--offen { background: var(--c-status-offen-bg); color: var(--c-status-offen); } .chip--aktiv { background: var(--c-status-aktiv-bg); color: var(--c-status-aktiv); } .chip--fertig { background: var(--c-status-fertig-bg); color: var(--c-status-fertig); } .chip--alarm { background: var(--c-status-alarm-bg); color: var(--c-status-alarm); } /* Material-Tags */ .chip--acetat { background: var(--k-blue-10); color: var(--k-blue); } .chip--druck3d { background: var(--k-saffron-25); color: var(--k-charcoal); } .chip--titan { background: var(--k-charcoal-20); color: var(--k-charcoal); } /* Federscharnier: blau = mit FS, grapefruit = ohne */ .chip--fs-mit { background: var(--k-blue-10); color: var(--k-blue); } .chip--fs-ohne { background: var(--k-grapefruit-25); color: var(--k-charcoal); } /* ============================================================ 5 · FORMULAR ------------------------------------------------------------ Labels klein/fett/gedämpft ÜBER dem Feld. Felder mit 1,5px-Rahmen, Radius --radius-sm. Erfassungszeile: Grid mit Speichern-Button am Ende. ============================================================ */ .field { display: flex; flex-direction: column; gap: var(--sp-1); } .field > label { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-bold); color: var(--c-text-muted); } .field__hint { font-size: var(--fs-caption); color: var(--c-text-muted); } .field__error { font-size: var(--fs-caption); color: var(--k-grapefruit); } .input, .select, .textarea { min-height: var(--touch-min); padding: var(--sp-2) var(--sp-3); border: var(--ui-field-border-w) solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-copy); box-sizing: border-box; width: 100%; } .textarea { min-height: calc(var(--touch-min) * 2); resize: vertical; } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; border-color: var(--c-focus); } .input--error, .select--error, .textarea--error { border-color: var(--k-grapefruit); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--c-bg); color: var(--c-text-muted); cursor: not-allowed; } /* Checkbox / Radio — Touch-Ziel über den Wrapper */ .check, .radio { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch-min); cursor: pointer; font-size: var(--fs-copy); } .check input, .radio input { width: 20px; height: 20px; accent-color: var(--c-action); } /* Erfassungszeile: Felder im Grid, Speichern-Button am Ende. Spaltenanzahl steuert das Modul über --capture-cols. */ .capture-row { display: grid; grid-template-columns: repeat(var(--capture-cols, 4), minmax(0, 1fr)) auto; gap: var(--sp-3); align-items: end; } @media (max-width: 700px) { .capture-row { grid-template-columns: 1fr 1fr; } .capture-row .btn { grid-column: 1 / -1; } } /* ============================================================ 6 · TABELLE — weiße Karte ohne Innenabstand ============================================================ */ .table-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); overflow: hidden; } .table-card__scroll { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-copy); } table.data th, table.data td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--c-line); } table.data th { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--c-text-muted); white-space: nowrap; } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: var(--c-action-soft); } table.data td.num { text-align: right; font-variant-numeric: tabular-nums; } table.data .row-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; } /* Stückzahl-Stepper: − / Zahl / + */ .stepper { display: inline-flex; align-items: center; gap: var(--sp-1); } .stepper__btn { min-width: var(--touch-min); min-height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; border: var(--ui-field-border-w) solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-action); font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .stepper__btn:hover:not(:disabled) { background: var(--c-action-soft); border-color: var(--c-action); } .stepper__btn:disabled { opacity: .4; cursor: not-allowed; } .stepper__value { min-width: 48px; text-align: center; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; } /* ============================================================ 7 · DIALOG — Overlay Charcoal ~45 %, Karte mittig ============================================================ */ .dialog-overlay { position: fixed; inset: 0; background: var(--ui-overlay); display: flex; align-items: center; justify-content: center; padding: var(--sp-5); z-index: 1000; } .dialog { background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .dialog--lg { max-width: 720px; } .dialog__header { padding: var(--sp-5) var(--sp-5) var(--sp-3); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); } .dialog__title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--c-text); margin: 0; } .dialog__close { min-height: var(--touch-min); min-width: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--radius-sm); color: var(--c-text-muted); font-size: var(--fs-h4); cursor: pointer; } .dialog__close:hover { background: var(--c-bg); color: var(--c-text); } .dialog__body { padding: var(--sp-2) var(--sp-5) var(--sp-4); overflow-y: auto; } /* Primary-Button volle Breite unten */ .dialog__footer { padding: var(--sp-3) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); } .dialog__footer .btn--primary { width: 100%; } @media (max-width: 600px) { .dialog-overlay { padding: 0; align-items: flex-end; } .dialog { max-width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } }