/* * Kiwikorb — die Oberfläche. * * Eine dünne Schicht über Filament, absichtlich ohne Build-Schritt: im Betrieb * soll niemand etwas kompilieren müssen, um eine Farbe zu ändern. * * Drei Regeln, aus denen alles Weitere folgt: * * 1. ZAHLEN STEHEN UNTEREINANDER. Das ist ein Handelssystem; auf jedem Bildschirm * stehen Beträge, Mengen und Prozentsätze. Mit Proportionalziffern springen die * Spalten, und man vergleicht mit dem Lineal statt mit dem Auge. * 2. FARBE BEDEUTET ETWAS. Die Fläche ist ruhig und beinahe einfarbig. Wo Farbe * auftaucht, ist sie eine Aussage: offen, überfällig, storniert, bezahlt. * 3. GRIFFIG. Bedient wird das am frühen Morgen, oft auf einem Tablet in der * Halle. Zeilen und Knöpfe sind dafür groß genug. */ /* Drei Grautöne, aus denen die ganze Oberfläche gezeichnet wird. Filament setzt die Nachtansicht als Klasse `dark` auf das -Element — dort, und nur dort, werden sie umgedreht. */ :root { --kk-linie: color-mix(in oklch, var(--gray-950) 10%, transparent); --kk-linie-zart: color-mix(in oklch, var(--gray-950) 6%, transparent); --kk-flaeche: color-mix(in oklch, var(--gray-950) 3%, transparent); --kk-warn: var(--warning-600); --kk-gut: var(--success-600); --kk-schlecht: var(--danger-600); } .dark { --kk-linie: color-mix(in oklch, var(--gray-50) 14%, transparent); --kk-linie-zart: color-mix(in oklch, var(--gray-50) 8%, transparent); --kk-flaeche: color-mix(in oklch, var(--gray-50) 5%, transparent); --kk-warn: var(--warning-400); --kk-gut: var(--success-400); --kk-schlecht: var(--danger-400); } /* ------------------------------------------------------------- 1. Ziffern */ .fi-ta-cell, .fi-ta-text-item-label, .fi-in-text, .fi-input, .fi-stats-overview-stat-value, .fi-badge-label, .kk-zahl { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } /* Beträge rechtsbündig sind nur die halbe Miete: sie brauchen auch Luft zum Rand, sonst kleben sie am Spaltenstrich. */ .fi-ta-cell.fi-align-end .fi-ta-text-item-label { padding-inline-end: 0.125rem; letter-spacing: -0.005em; } /* ------------------------------------------------------- 2. Ruhige Fläche */ .fi-topbar { box-shadow: none; border-bottom: 1px solid var(--kk-linie); backdrop-filter: saturate(1.4) blur(6px); } .fi-sidebar { border-inline-end: 1px solid var(--kk-linie); box-shadow: none; } .fi-sidebar-group-label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; font-weight: 600; } /* Der aktive Eintrag wird nicht mit einer Kachel unterlegt, sondern mit einem Strich markiert — er soll auffindbar sein, nicht laut. */ .fi-sidebar-item-active .fi-sidebar-item-btn { background: color-mix(in oklch, var(--primary-500) 8%, transparent); box-shadow: inset 3px 0 0 0 var(--primary-600); border-radius: 0.375rem; } .fi-sidebar-item-btn { border-radius: 0.375rem; padding-block: 0.5rem; } /* Karten und Tabellen: eine Linie statt eines Schattens. */ .fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat { box-shadow: none; border: 1px solid var(--kk-linie); } .fi-section-header { border-bottom: 1px solid var(--kk-linie-zart); } /* --------------------------------------------------------- 3. Tabellen */ .fi-ta-header-cell { font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; opacity: 0.65; padding-block: 0.625rem; } .fi-ta-row { border-top: 1px solid var(--kk-linie-zart); } .fi-ta-row:hover { background: var(--kk-flaeche); } /* Zeilenhöhe für die Bedienung mit dem Finger. */ .fi-ta-cell > .fi-ta-cell-content { padding-block: 0.75rem; } /* Die Belegnummer ist der Anker jeder Zeile — sie darf sich abheben. */ .fi-ta-cell-nummer .fi-ta-text-item-label { font-weight: 600; letter-spacing: 0.01em; } /* ------------------------------------------------------------ 4. Bedienung */ .fi-btn { border-radius: 0.5rem; font-weight: 600; letter-spacing: 0.005em; } /* Zeilenaktionen sind auf dem Tablet die kleinsten Ziele der ganzen Anwendung. Sie bekommen deshalb mehr Fläche, ohne größer auszusehen. */ .fi-ta-actions .fi-btn { padding-block: 0.5rem; padding-inline: 0.5rem; margin-block: -0.25rem; } .fi-badge { border-radius: 0.375rem; font-weight: 600; letter-spacing: 0.01em; } /* Eingabefelder: ruhig im Ruhezustand, deutlich im Fokus. */ .fi-input-wrp { box-shadow: none; border: 1px solid var(--kk-linie); border-radius: 0.5rem; } .fi-input-wrp:focus-within { border-color: var(--primary-600); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary-500) 18%, transparent); } /* --------------------------------------------------------------- 5. Kopf */ .fi-header-heading { letter-spacing: -0.02em; font-weight: 650; } /* Die Wortmarke im Kopf trägt das Grün, sonst nichts. */ .kk-marke { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 680; font-size: 1.0625rem; letter-spacing: -0.025em; } .kk-marke svg { flex: none; color: var(--primary-600); } /* ------------------------------------------------------------ 6. Sonstiges */ /* Leere Listen sollen nicht wie ein Fehler aussehen. */ .fi-ta-empty-state-icon-ctn { opacity: 0.4; } /* Der Anmeldebildschirm ist das Erste, was man sieht. */ .fi-simple-layout .fi-simple-main { border: 1px solid var(--kk-linie); box-shadow: none; } /* ------------------------------------------------------- 7. Die Schrittleiste Der Arbeitstag der Tagesdisposition ist eine Reihenfolge, keine Auswahl. Deshalb steht er als nummerierte Leiste da: erledigte Schritte treten zurück, der fällige ist der einzige mit einem gefüllten Knopf. */ /* Entweder alle vier nebeneinander oder alle vier untereinander. Ein Umbruch auf drei plus einen sieht aus wie ein Fehler und zerreißt die Reihenfolge. */ .kk-schritte { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--kk-linie); border-radius: 0.75rem; overflow: hidden; } .kk-schritt { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.125rem; min-width: 0; } .kk-schritt + .kk-schritt { border-top: 1px solid var(--kk-linie-zart); } @media (min-width: 75rem) { .kk-schritte { grid-template-columns: repeat(4, 1fr); } .kk-schritt + .kk-schritt { border-top: none; border-inline-start: 1px solid var(--kk-linie-zart); } } /* Der fällige Schritt bekommt die einzige Fläche der ganzen Leiste — und einen Strich an der Kante, an der die Leiste gerade läuft. */ .kk-schritt-faellig { background: color-mix(in oklch, var(--primary-500) 6%, transparent); box-shadow: inset 3px 0 0 0 var(--primary-600); } @media (min-width: 75rem) { .kk-schritt-faellig { box-shadow: inset 0 3px 0 0 var(--primary-600); } } .kk-schritt-kopf { display: flex; align-items: center; gap: 0.5rem; } .kk-schritt-nummer { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--kk-linie); opacity: 0.65; } .kk-schritt-faellig .kk-schritt-nummer { background: var(--primary-600); border-color: var(--primary-600); color: #fff; opacity: 1; } .kk-schritt-erledigt .kk-schritt-nummer { background: color-mix(in oklch, var(--success-500) 15%, transparent); border-color: color-mix(in oklch, var(--success-500) 35%, transparent); color: var(--success-600); opacity: 1; } .kk-schritt-titel { font-weight: 600; font-size: 0.875rem; line-height: 1.25; } .kk-schritt-stand { font-size: 0.8125rem; opacity: 0.7; font-variant-numeric: tabular-nums; } .kk-schritt-fuss { margin-top: auto; padding-top: 0.25rem; } /* ------------------------------------------------------------ 8. Aussagen Farbe steht in dieser Anwendung nie zur Zierde. Drei Töne sind der ganze Vorrat: etwas ist offen, etwas ist gut, etwas ist schief. In der Nachtansicht werden sie eine Stufe heller, sonst versinken sie im Grund. Es gibt sie als Klasse und als Variable — die Variable, weil einige Ansichten die Farbe an einer Bedingung im Inline-Stil festmachen und dort keine Klasse greifen kann. */ .kk-warn { color: var(--kk-warn); } .kk-gut { color: var(--kk-gut); } .kk-schlecht { color: var(--kk-schlecht); }