/* Schriften selbst gehostet (fonts/, aus @fontsource 5.3.0, Lizenz SIL OFL 1.1 – siehe fonts/LIZENZEN.txt): keine Aufrufe zu Google (Datenschutz, CSP font-src nur self). Zeichensatz „latin“ deckt Umlaute, ß und € ab. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/inter-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/playfair-display-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/playfair-display-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/playfair-display-latin-700-normal.woff2') format('woff2'); } /* ============================================================ KLUGE BEAUTY – Design Tokens Farbwelt: Sonnenuntergang – warm, leuchtkräftig, atmosphärisch Bedienelemente: #009acd · #7ac5cd · #a2cd5a Atmosphäre: #ff8247 · #ff5fa2 · #ffd84d · #fff9f0 ============================================================ */ :root { /* Hintergrund & Oberflächen */ --kb-bg: #fff9f0; --kb-bg-accent: #fff0de; --kb-surface: rgba(255, 252, 245, 0.94); --kb-surface-soft: #fff4e8; --kb-surface-strong: #fffaf4; /* Text */ --kb-text-primary: #2b150a; --kb-text-secondary: #8c5c3a; /* Akzent – Sonnenuntergang Orange/Pink */ --kb-accent: #ff8247; --kb-accent-hover: #e0662e; --kb-accent-light: #ffeede; --kb-accent-strong: #c44a1a; --kb-highlight: #ff5fa2; --kb-warm: #ffd84d; /* Bedienelemente */ --kb-ctrl-primary: #009acd; --kb-ctrl-primary-hover: #007ba8; --kb-ctrl-secondary: #7ac5cd; --kb-ctrl-success: #a2cd5a; /* Rahmen & Sidebar */ --kb-border-soft: #f5d8b8; --kb-border-grey: #9ca3af; --kb-sidebar-bg: linear-gradient(180deg, #fff9f0 0%, #ffe8cc 100%); --kb-sidebar-border: #f0c090; --kb-sidebar-text: #3d1808; /* Status */ --kb-success: #a2cd5a; --kb-warning: #ffd84d; --kb-danger: #ff5fa2; /* Radien */ --kb-radius-card: 18px; --kb-radius-button: 999px; --kb-radius-input: 14px; /* Schatten */ --kb-shadow-card: 0 4px 18px rgba(180, 80, 20, 0.08); --kb-shadow-card-hover: 0 10px 28px rgba(180, 80, 20, 0.15); /* Abstände */ --kb-spacing-section: 2.75rem; --kb-spacing-card: 1.5rem; /* Typografie */ --kb-font-display: 'Playfair Display', Georgia, serif; --kb-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Nur für .kb-admin-shell (Verwaltungsoberfläche, s. u.) – bewusst nicht global, damit das bereits abgenommene Dashboard/die Community-Oberfläche unangetastet bleiben. Begrenzte, großzügige Lesebreite statt auf 27"/34"-Monitoren randlos auseinandergezogener Inhalte (unlesbar lange Zeilen, ausgedünnte Formularraster). */ --kb-content-max-width: 1600px; } .kb-list-thumbnail-column { width: 60px; } .kb-avatar-column { width: 56px; } .glow-coming-soon-title { font-size: 0.98rem; margin: 0.55rem 0 0.25rem; } .kb-preview-panel { position: relative; } .content-hub-grid--preview { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } /* ============================================================ Basis ============================================================ */ html, body { font-family: var(--kb-font-body); background: var(--kb-bg); color: var(--kb-text-primary); font-size: 0.95rem; line-height: 1.6; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; background-image: radial-gradient(ellipse at top, rgba(255, 212, 77, 0.18) 0%, transparent 55%), radial-gradient(ellipse at center, rgba(255, 130, 71, 0.13) 0%, transparent 60%), radial-gradient(ellipse at bottom, rgba(255, 95, 162, 0.10) 0%, transparent 55%); background-attachment: fixed; } /* ============================================================ Typografie ============================================================ */ h1, h2, h3 { font-family: var(--kb-font-display); font-weight: 700; color: var(--kb-text-primary); letter-spacing: -0.02em; } h1 { font-size: 2.1rem; margin-bottom: 0.35rem; } h2 { font-size: 1.55rem; } h3 { font-size: 1.2rem; } h4, h5, h6 { font-weight: 600; color: var(--kb-text-primary); } .text-muted { color: var(--kb-text-secondary) !important; } /* Uppercase Kicker / Labels */ .kb-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kb-text-secondary); } /* ============================================================ Links ============================================================ */ a, .btn-link { color: var(--kb-ctrl-primary); text-decoration: none; transition: color 0.18s ease; } a:hover, .btn-link:hover { color: var(--kb-ctrl-primary-hover); } /* ============================================================ Buttons ============================================================ */ /* Zentraler Verlauf-Button-Stil: alle "gefüllten" Verlauf-Buttons (Hinzufügen, Zurück/Schließen-Navigation, Bearbeiten-Altstil) teilen sich Form/Schatten/ Hover-Mechanik aus EINER Stelle statt sie mehrfach nahezu textgleich zu wiederholen. Nur die Verlauf-/Schattenfarbe unterscheidet sich je Button- Rolle, über die --kb-btn-grad-*-Variablen im zweiten Regelblock darunter. Neuer Verlauf-Button: Klasse hier in den Selektor aufnehmen + eigenen --kb-btn-grad-*-Block definieren, statt die Formregeln zu kopieren. Der Rahmen ist bewusst weiß statt grau – hebt sich klarer vom Verlauf ab als ein neutraler Grauton, einheitlich über alle Button-Rollen hinweg, statt je Verlauf einen eigenen dunkleren Farbton zu führen. Speichern/Abbrechen NICHT hier: die gelten als "Arbeitsknöpfe" (interne Formular-Aktionen) und nutzen stattdessen den zurückhaltenderen .kb-action-btn-Stil weiter unten, siehe KbSaveButton.razor. */ .btn-primary, .btn-secondary, .btn-outline-primary, .kb-action-btn--add { background: linear-gradient(135deg, var(--kb-btn-grad-from) 0%, var(--kb-btn-grad-to) 100%); border: 1px solid #fff; color: #fff; border-radius: var(--kb-radius-button); font-weight: 600; letter-spacing: 0.02em; padding: 0.55rem 1.35rem; box-shadow: 0 10px 20px var(--kb-btn-grad-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .btn-primary:hover, .btn-primary:focus, .btn-secondary:hover, .btn-secondary:focus, .btn-outline-primary:hover, .btn-outline-primary:focus, .kb-action-btn--add:hover, .kb-action-btn--add:focus { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px var(--kb-btn-grad-shadow-hover); color: #fff; } .btn-primary:active, .btn-secondary:active, .btn-outline-primary:active, .kb-action-btn--add:active { transform: translateY(0); } .btn-primary:disabled, .btn-secondary:disabled, .btn-outline-primary:disabled, .kb-action-btn--add:disabled { background: var(--kb-border-soft); border-color: var(--kb-border-soft); color: var(--kb-text-secondary); box-shadow: none; filter: none; transform: none; } /* Farbrolle je Button-Typ – einzige Stelle, die für einen neuen Verlauf-Button angepasst werden muss (Form/Rahmen/Hover/Disabled kommen aus dem Block oben). */ .btn-primary, .btn-secondary, .btn-outline-primary, .kb-action-btn--add { --kb-btn-grad-from: var(--kb-warm); --kb-btn-grad-to: var(--kb-accent); --kb-btn-grad-shadow: rgba(255, 130, 71, 0.28); --kb-btn-grad-shadow-hover: rgba(255, 130, 71, 0.36); } .btn-outline-danger { border-radius: var(--kb-radius-button); font-weight: 500; } .btn-sm { font-size: 0.8rem; padding: 0.3rem 0.85rem; } /* ============================================================ Aktions-Buttons für editierbare Listen (Vorschlag, zunächst nur auf Kategorien) – zentraler, konsistenter Stil für Hinzufügen/Bearbeiten/ Aktivieren/Deaktivieren/CSV-Import/-Export: pro Aktionstyp eine feste Icon+Text-Kombination und eine eigene, klar unterscheidbare Farbe. Bewusst als NEUE, additive Klassen statt die bestehenden .btn-outline-*- Overrides zu ändern – so bleibt der Vorschlag auf dieser einen Seite isoliert testbar, ohne alle anderen Listen sofort mitzuändern. Begründung (CLAUDE.md §5 – research-basiert): - Icon + Text statt Icon-only: "Icon Usability" (Nielsen Norman Group) – reine Icon-Buttons sind für seltene/uneindeutige Aktionen schwer erkennbar, Text eliminiert die Mehrdeutigkeit vollständig. - Eine Farbe pro Aktionstyp, konsistent über alle Zeilen/Seiten hinweg: Fitts's Law (vorhersagbare Zielposition/-erscheinung beschleunigt wiederholte Interaktion) plus Material Design's Rollenfarben-Prinzip (destruktiv/warnend/bestätigend/neutral werden nie verwechselt). - "Bearbeiten" bewusst NICHT wie "Hinzufügen" eingefärbt (aktuell beide .btn-outline-primary → identisch zum Primary-Verlauf, siehe oben): pro Ansicht soll nur die primäre CTA (Hinzufügen) as such hervorstechen, alle Zeilen-Aktionen bleiben zurückhaltender (Material Design: "emphasis hierarchy" – nicht jede Aktion kann gleich betont sein). ============================================================ */ /* Keine eckigen Knöpfe (verbindliche Regel, CLAUDE.md §4): Jeder Bootstrap-Knopf in jeder Größe bekommt den Pill-Radius – auch Varianten ohne eigene Regel (btn-outline-secondary, btn-danger, btn-link …). Eigene Knopf-Stile nutzen ebenfalls var(--kb-radius-button); runde Symbolknöpfe (gleiche Breite und Höhe) ergeben so einen Kreis. ButtonShapeTests prüft beides. */ .btn, .btn-sm, .btn-lg { --bs-btn-border-radius: var(--kb-radius-button); border-radius: var(--kb-radius-button); } .kb-action-btn { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: var(--kb-radius-button); font-weight: 600; white-space: nowrap; } .kb-action-btn .bi { font-size: 0.95em; } /* .kb-action-btn--add: Farbe/Verlauf/Rahmen/Schatten kommen jetzt aus dem zentralen Verlauf-Button-Stil weiter oben (siehe "Zentraler Verlauf-Button- Stil"); hier nur noch Layout-Klasse .kb-action-btn (s.o.) plus diese Farbrolle nötig – kein eigener Regelblock mehr. */ /* Arbeitsknöpfe (Bearbeiten/Aktivieren/Deaktivieren/Speichern/Abbrechen): Hintergrund im Ruhezustand ist bewusst ein ganz sanfter Ton der jeweiligen Schriftfarbe (nicht mehr komplett transparent) – macht die Fläche des Buttons schon vor dem Hover sichtbar/greifbar, bleibt aber deutlich zurückhaltender als die knalligen Funktionsknöpfe. Hover vertieft denselben Farbton weiter, statt auf eine andere Nuance zu wechseln. */ /* --import und --export teilen sich den Regelblock mit --edit (identisches "Arbeitsknopf"-Layout, blau): CSV-Import/Vorlagen-Download sind wie Bearbeiten/Speichern eine interne Formular-/Listen-Aktion, die etwas öffnet/ausführt - keine Funktionsknopf-Farbe (Orange) nötig, dieselbe blaue Rolle wie jede andere "öffnet/führt aus"-Aktion. */ .kb-action-btn--edit, .kb-action-btn--import, .kb-action-btn--export { background: rgba(0, 154, 205, 0.08); border: 1px solid rgba(0, 154, 205, 0.35); color: var(--kb-ctrl-primary); } .kb-action-btn--edit:hover, .kb-action-btn--import:hover, .kb-action-btn--export:hover { background: rgba(0, 154, 205, 0.18); border-color: var(--kb-ctrl-primary); color: var(--kb-ctrl-primary-hover); } /* --save teilt sich den Regelblock mit --activate (identisches "Arbeitsknopf"- Layout wie Bearbeiten, nur grün statt blau): Speichern ist inhaltlich eine bestätigende Aktion wie Aktivieren, daher dieselbe Farbe/Form statt eines eigenen Grün-Tons. */ .kb-action-btn--activate, .kb-action-btn--save { background: rgba(74, 122, 26, 0.08); border: 1px solid rgba(162, 205, 90, 0.45); color: #4a7a1a; /* gleicher lesbarer Grünton wie .kb-status-pill--success */ } .kb-action-btn--activate:hover, .kb-action-btn--save:hover { background: rgba(74, 122, 26, 0.2); border-color: #4a7a1a; } /* --cancel teilt sich den Regelblock mit --deactivate (identisches "Arbeitsknopf"-Layout wie Deaktivieren): Abbrechen ist wie Deaktivieren eine zurückhaltende "Nicht fortfahren"-Aktion. */ .kb-action-btn--deactivate, .kb-action-btn--cancel { background: rgba(128, 95, 0, 0.08); border: 1px solid rgba(255, 216, 77, 0.5); color: #805f00; /* gleicher lesbarer Gelbton wie .kb-status-pill--warning */ } .kb-action-btn--deactivate:hover, .kb-action-btn--cancel:hover { background: rgba(128, 95, 0, 0.2); border-color: #805f00; } /* --remove: eigene "Entfernen"-Rolle für unwiderrufliches Löschen (z. B. eine Set-Position), getrennt von --deactivate/amber (reversibel). Bewusst gedämpft statt rot: In einer Tabelle stünde sonst in jeder Zeile ein roter Knopf und zöge den Blick von den Daten ab. Erkennbar bleibt die Rolle am Mülleimer-Symbol und am Text; Rot erscheint erst im Bestätigungsdialog, wo die Entscheidung fällt (KbConfirmDialog, btn-danger) – so warnt die Farbe genau einmal an der richtigen Stelle (Refactoring UI „Destructive actions“; NN/g „Confirmation Dialogs“). */ .kb-action-btn--remove { background: transparent; border: 1px solid var(--kb-border-grey); color: var(--kb-text-secondary); } .kb-action-btn--remove:hover { background: rgba(140, 92, 58, 0.10); border-color: var(--kb-text-secondary); } /* Deaktiviert überschreibt bewusst die Farbrolle (--save/--import/...) komplett auf ein neutrales Grau statt sie nur per opacity abzudunkeln: eine grün/blau/amber-Fläche bei 50% Deckkraft sieht noch immer nach ihrer Farbe aus und wirkt eher "blass aktiv" als eindeutig "gerade nicht bedienbar". Reihenfolge in der Datei sorgt für den Vorrang (gleiche Selektor-Spezifität, diese Regel steht nach den Farbrollen-Regeln oben). */ .kb-action-btn:disabled, .kb-action-btn:disabled:hover { background: rgba(156, 163, 175, 0.15); border-color: rgba(156, 163, 175, 0.4); color: var(--kb-border-grey); opacity: 1; filter: none; transform: none; cursor: not-allowed; } /* Icon-only-Variante für die beiden Seiten-Aktionen (Hinzufügen/CSV-Import) im Listen-Header - Zeilen-Aktionen (Bearbeiten/Aktivieren/Deaktivieren) bleiben Icon+Text, siehe app.css-Kommentar oben. Tooltip (title) + aria-label sind hier Pflicht, nicht optional, um den Verzicht auf sichtbaren Text auszugleichen (NN/g "Icon Usability"). */ .kb-action-btn--icon-only { width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; } .kb-action-btn--icon-only .bi { font-size: 1.1em; } /* Symbolknöpfe ohne Text in Tabellenzeilen (KbRowActionButton: Bearbeiten, Aktivieren, Deaktivieren, Löschen): feste, gleiche Größe als Kreis (Radius 999px bei gleicher Breite/Höhe), unabhängig von der Symbolgröße – alle Knöpfe einer Zeile sind gleich groß und gleichmäßig rund. */ .kb-action-btn--row-icon { width: 2rem; height: 2rem; padding: 0; justify-content: center; } .kb-action-btn--row-icon .bi { font-size: 1.15em; line-height: 1; } /* Das Pause-Symbol (Deaktivieren) wirkt bei gleicher Schriftgröße kleiner als Stift/Häkchen/ Mülleimer – daher etwas größer; die feste Knopfgröße oben bleibt davon unberührt. */ .kb-action-btn--row-icon .bi-pause-circle { font-size: 1.35em; } /* Rand in der Symbolfarbe wie bei Bearbeiten/Löschen (~35 % Deckkraft der Symbolfarbe) – statt des hellgelben bzw. hellgrünen Rands von --deactivate/--activate, der als Symbolknopf farblich abwich. Nur für die runden Zeilenknöpfe; Speichern/Abbrechen in Dialogen bleiben unverändert. */ .kb-action-btn--row-icon.kb-action-btn--deactivate { border-color: rgba(128, 95, 0, 0.35); } .kb-action-btn--row-icon.kb-action-btn--deactivate:hover { border-color: #805f00; } .kb-action-btn--row-icon.kb-action-btn--activate { border-color: rgba(74, 122, 26, 0.35); } .kb-action-btn--row-icon.kb-action-btn--activate:hover { border-color: #4a7a1a; } /* Einladen: runder, gefüllter orangefarbener Symbolknopf – die Aktion, die im Zugang als Nächstes ansteht, soll herausstechen (Material Design „emphasis hierarchy“). Dunkleres Orange, damit das weiße Symbol mindestens 3:1 Kontrast hat (WCAG 1.4.11 Nicht-Text-Kontrast). */ .kb-action-btn--invite { background: var(--kb-accent-hover); border: 1px solid var(--kb-accent-hover); color: #fff; } .kb-action-btn--invite:hover, .kb-action-btn--invite:focus-visible { background: var(--kb-accent-strong); border-color: var(--kb-accent-strong); color: #fff; } /* Horizontales/oberes Padding kommt bewusst NICHT mehr von hier, sondern vom Karten-Padding des umgebenden KbSectionCard-Bodys (der gesamte Karteninhalt - Titel, Listen-Header, Tabelle - soll gleichmäßig eingerückt sein statt nur die Tabelle) - nur der Abstand zur Tabelle darunter bleibt hier zentral geregelt. */ .kb-list-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--kb-border-soft); } /* Trägt eine KbSectionCard zusätzlich Titel+Icon (z. B. Farben/Düfte), reicht der Titel-eigene margin-bottom (.kb-journey-title, 0.65rem) allein nicht als Abstand zur Suchmaske - hier zentral über den Geschwister-Selektor ergänzt statt an jeder Verwendungsstelle einzeln nachzujustieren. Betrifft automatisch jede künftige Liste mit Titel+Icon, nicht die (häufigeren) Listen ohne Titel wie Categories/Collections. */ .kb-card-heading + .kb-list-header { margin-top: 0.75rem; } .kb-list-header-title { font-weight: 600; color: var(--kb-text-primary); } .kb-list-header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } /* KbSearchBar bringt für den Normalfall (freistehend über einer Tabelle) ein mb-3 mit; im Listen-Header sitzt sie in derselben Flex-Zeile wie die Icon-Buttons – der Abstand nach unten würde ihre Margin-Box höher als die Buttons machen und sie dadurch trotz align-items:center optisch nach oben verschieben. Hier gezielt aufgehoben, ohne die anderen KbSearchBar-Stellen (Products/Sellers/Customers, freistehend) zu beeinflussen. */ .kb-list-header .kb-search-bar { margin-bottom: 0; } /* Zentraler Button-Style für kleine CTA-Links in Dashboard-Kacheln (z.B. "Alle Rankings ansehen"). Einzige Quelle für den Orange-Verlauf-Look dieser Kachel-CTAs – neue Kacheln binden ihn per class="kb-cta-btn" ein, statt die Optik erneut zu deklarieren. Rahmen weiß statt grau, analog zum großen Verlauf-Button-Stil weiter oben (.btn-primary etc.) – hebt sich klarer vom Verlauf ab. */ .kb-cta-btn { display: inline-block; background: linear-gradient(135deg, var(--kb-warm) 0%, var(--kb-accent) 100%); border: 1px solid #fff; color: #fff; font-size: 0.82rem; font-weight: 700; text-decoration: none; padding: 0.4rem 0.95rem; border-radius: var(--kb-radius-button); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; } .kb-cta-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28); color: #fff; } .kb-card-heading { display: flex; align-items: center; gap: 0.75rem; } .kb-card-heading .kb-card-icon { margin-bottom: 0; } .kb-quick-access-card .kb-card-body { position: relative; min-height: 3.25rem; padding: 0.7rem 6.75rem 0.7rem 4rem; } .kb-quick-access-card .kb-card-heading { display: block; } .kb-quick-access-card .kb-journey-title { margin-bottom: 0; } .kb-quick-access-card .kb-card-icon { position: absolute; top: 50%; left: 1.15rem; transform: translateY(-50%); } .kb-quick-access-card .kb-card-description { margin: 0.35rem 0 0; font-size: 0.82rem; line-height: 1.35; } .kb-quick-access-button { position: absolute; top: 50%; right: 1.15rem; transform: translateY(-50%); } .kb-dashboard-card-column > .glow-hero { flex: 1; width: 100%; height: auto; margin-bottom: 0; } .kb-dashboard-card-column > .kb-journey-card { width: 100%; } .kb-event-countdown-card .kb-card-body { position: relative; } .kb-event-countdown-toggle { position: absolute; right: 1.15rem; bottom: 1rem; } .kb-today-focus .kb-card-body { position: relative; } .kb-daily-impulse-customers-button { position: absolute; top: 1rem; right: 1rem; } .kb-dashboard-focus-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem; } .kb-dashboard-focus-heading h1, .kb-dashboard-focus-heading h2 { margin: 0; } .kb-dashboard-focus-heading h1 { font-size: 1.6rem; } .kb-dashboard-focus-heading h2 { font-size: 1.2rem; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.15rem rgba(0, 154, 205, 0.28); outline: none; } /* ============================================================ Karten ============================================================ */ .kb-card { background: var(--kb-surface-strong); border: 1px solid var(--kb-border-soft); border-radius: var(--kb-radius-card); box-shadow: var(--kb-shadow-card); } .kb-card-body { padding: var(--kb-spacing-card); } .kb-journey-card { height: 100%; transition: transform 0.18s ease, box-shadow 0.18s ease; } .kb-journey-card:hover { transform: translateY(-2px); box-shadow: var(--kb-shadow-card-hover); } .kb-journey-card--active { border-color: rgba(255, 130, 71, 0.34); background: rgba(255, 130, 71, 0.05); } .kb-journey-card--done { border-color: rgba(162, 205, 90, 0.42); background: rgba(162, 205, 90, 0.06); } .kb-journey-card--planned { background: var(--kb-surface-strong); } .kb-journey-card--preview { background: rgba(255, 252, 245, 0.82); border-color: rgba(255, 130, 71, 0.24); } /* Heute im Fokus – bewusst einzige Karte mit diesem Look auf der Heute-Seite (Von-Restorff-Effekt). Kein Verlauf (das ist die Optik des Hero direkt darüber) – stattdessen flache Fläche + kräftiger Akzentstreifen, damit die Karte sich von Hero UND allen anderen Karten abhebt. */ .kb-focus-card { border: 1px solid var(--kb-border-soft); border-left: 6px solid var(--kb-accent); background: var(--kb-accent-light); box-shadow: 0 8px 26px rgba(180, 80, 20, 0.12); } .kb-focus-card .kb-card-icon { font-size: 2.1rem; } .kb-journey-status { margin-bottom: 0.5rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kb-text-secondary); } .kb-journey-title { margin: 0 0 0.65rem; font-size: 1.1rem; } .kb-card-icon { margin-bottom: 0.8rem; font-size: 1.75rem; line-height: 1; } .kb-card-description { margin: 0 0 1rem; color: var(--kb-text-secondary); font-size: 0.9rem; line-height: 1.55; } .card { background-color: var(--kb-surface); border: 1px solid var(--kb-border-soft); border-radius: var(--kb-radius-card); box-shadow: var(--kb-shadow-card); transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .card:hover { box-shadow: var(--kb-shadow-card-hover); transform: translateY(-2px); border-color: rgba(255, 130, 71, 0.28); } .card-header { background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, var(--kb-surface-soft) 100%); border-bottom: 1px solid var(--kb-border-soft); border-radius: var(--kb-radius-card) var(--kb-radius-card) 0 0 !important; font-weight: 600; color: var(--kb-text-primary); padding: 0.9rem var(--kb-spacing-card); } .card-body { padding: var(--kb-spacing-card); } .card-subtitle { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--kb-text-secondary) !important; } /* ============================================================ Tabellen ============================================================ */ .table { color: var(--kb-text-primary); border-color: var(--kb-border-soft); } .table thead th { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-text-secondary); border-bottom: 2px solid var(--kb-border-soft); padding: 0.85rem 0.75rem; background-color: var(--kb-surface); } .table tbody td { padding: 0.85rem 0.75rem; vertical-align: middle; border-color: var(--kb-border-soft); } .table-hover > tbody > tr:hover > * { background-color: #fff3e0; color: var(--kb-text-primary); } .table-light { --bs-table-bg: var(--kb-surface-soft); --bs-table-border-color: var(--kb-border-soft); } /* ============================================================ Badges / Status ============================================================ */ .badge { border-radius: 6px; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.3em 0.7em; } .bg-success { background-color: var(--kb-success) !important; } .bg-warning { background-color: var(--kb-warning) !important; color: #fff !important; } .bg-danger { background-color: var(--kb-danger) !important; } .bg-info { background-color: var(--kb-surface-soft) !important; color: var(--kb-text-primary) !important; border: 1px solid var(--kb-border-soft); } .bg-secondary { background-color: var(--kb-border-soft) !important; color: var(--kb-text-secondary) !important; } .text-dark { color: var(--kb-text-primary) !important; } /* ============================================================ Formulare ============================================================ */ .form-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; color: var(--kb-text-primary); margin-bottom: 0.3rem; } .form-control, .form-select { background-color: rgba(255, 255, 255, 0.9); border: 1px solid var(--kb-border-soft); border-radius: var(--kb-radius-input); color: var(--kb-text-primary); padding: 0.55rem 0.9rem; font-size: 0.9rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .form-control:focus, .form-select:focus { border-color: var(--kb-ctrl-primary); box-shadow: 0 0 0 0.15rem rgba(0, 154, 205, 0.20); background-color: var(--kb-surface); } .form-control::placeholder { color: var(--kb-text-secondary); opacity: 0.7; } .form-check-input:checked { background-color: var(--kb-ctrl-primary); border-color: var(--kb-ctrl-primary); } /* ============================================================ Alerts ============================================================ */ .alert-danger { background-color: #fdf2f2; border-color: #f5d0cc; color: var(--kb-danger); border-radius: var(--kb-radius-card); } .alert-success { background-color: #f2faf5; border-color: #c8e6d0; color: var(--kb-success); border-radius: var(--kb-radius-card); } /* Fehlerzusammenfassung eines Formulars (KbErrorSummary): gleiche Fehlerfarben wie .alert-danger, links eine kräftige Kante als Blickfang (GOV.UK „Error summary“); Links zum jeweiligen Feld. */ .kb-error-summary { background-color: #fdf2f2; border: 1px solid #f5d0cc; border-left: 4px solid var(--kb-danger); border-radius: var(--kb-radius-card); padding: 0.75rem 1rem; margin-bottom: 1rem; } .kb-error-summary:focus { outline: 2px solid var(--kb-danger); outline-offset: 2px; } .kb-error-summary-title { font-size: 1rem; font-weight: 600; color: var(--kb-text-primary); margin: 0 0 0.35rem; } .kb-error-summary-list { margin: 0; padding-left: 1.1rem; } .kb-error-summary-list a { color: var(--kb-danger); text-decoration: underline; } /* ============================================================ Validierung ============================================================ */ .valid.modified:not([type=checkbox]) { outline: 2px solid var(--kb-success); outline-offset: 1px; } .invalid { outline: 2px solid var(--kb-danger); outline-offset: 1px; } .validation-message { color: var(--kb-danger); font-size: 0.8rem; margin-top: 0.25rem; } /* ============================================================ Inhalt ============================================================ */ .content { padding-top: 1.75rem; } .kb-page-intro { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem; margin-bottom: 2.5rem; } .kb-page-intro-copy { max-width: 48rem; } .kb-page-intro-copy p { margin-bottom: 0; color: var(--kb-text-secondary); font-size: 0.98rem; line-height: 1.65; } .kb-eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; margin-bottom: 0.9rem; border-radius: 999px; background: rgba(255, 130, 71, 0.10); color: var(--kb-accent-strong); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .kb-eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: linear-gradient(135deg, var(--kb-warm) 0%, var(--kb-accent) 50%, var(--kb-highlight) 100%); box-shadow: 0 0 0 4px rgba(255, 130, 71, 0.14); } .kb-section-card { background: linear-gradient(160deg, rgba(255, 252, 245, 0.96) 0%, rgba(255, 238, 210, 0.92) 100%); border: 1px solid rgba(255, 130, 71, 0.12); } .kb-stat-value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--kb-text-primary); } .kb-stat-caption { margin-top: 0.5rem; color: var(--kb-text-secondary); font-size: 0.85rem; } .kb-page-shell { display: flex; flex-direction: column; gap: 1.5rem; } /* Opt-in für die Verwaltungsoberfläche (Produkte/Discovery/Übersetzungen/Abonnements/…, siehe kb-admin-shell weiter unten) – bewusst NICHT auf .kb-page-shell selbst, damit das bereits von der Kundin abgenommene Dashboard ("Heute"-Startseite) und die übrige Community-/Coaching-Oberfläche unverändert bleiben, die dieselbe Klasse nutzen. */ .kb-admin-shell { width: 100%; max-width: var(--kb-content-max-width); margin-inline: auto; } /* Tabellenzeilen bleiben auch bei viel Weißraum auf großen Bildschirmen scannbar – nur innerhalb .kb-admin-shell, betrifft also nur die Verwaltungsoberfläche. */ .kb-admin-shell .table > tbody > tr:hover > * { background-color: var(--kb-surface-soft); } /* Lange Listen bekommen einen begrenzten, eigenen Scroll-Bereich mit fixiertem Tabellenkopf, statt die ganze Seite endlos nach unten zu ziehen – Filter/Aktionen oberhalb bleiben sichtbar, ohne dass Admin selbst hochscrollen muss. Sowohl .kb-table-wrap (älterer Seiten-Konvention) als auch Bootstraps .table-responsive (neuere Seiten) werden abgedeckt – beide sind bereits auf jeder Listen-Tabelle im Einsatz, hier also ohne Markup-Änderung je Seite. Kurze Tabellen bleiben unverändert: max-height greift nur, wenn der Inhalt sie tatsächlich überschreitet. */ .kb-admin-shell .kb-table-wrap, .kb-admin-shell .table-responsive { max-height: min(65vh, 760px); overflow-y: auto; } .kb-admin-shell .kb-table-wrap thead th, .kb-admin-shell .table-responsive thead th { position: sticky; top: 0; z-index: 1; background-color: var(--kb-surface-strong); box-shadow: 0 1px 0 var(--kb-border-soft); } /* Zwei gleichwertige, unabhängige Abschnitte (z. B. Export/Import, Plan-Verwaltung/ Neuanlage) nebeneinander statt gestapelt, sobald genug Breite vorhanden ist – nutzt den auf großen Bildschirmen zusätzlich verfügbaren Platz aktiv statt ihn ungenutzt zu lassen. Fällt unterhalb von ~900px automatisch auf eine Spalte zurück. */ .kb-admin-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.5rem; align-items: start; } /* Mehrzeiliger Freitext in einer Tabellenzelle (z. B. Beschreibung aus einem Textfeld): Zeilenumbrüche der Eingabe bleiben erhalten, lange Zeilen brechen um; die Mindestbreite verhindert, dass die Spalte neben kurzen Nachbarspalten zu einem schmalen Streifen wird. */ .kb-cell-multiline { white-space: pre-line; min-width: 14rem; } /* Reihenfolge per Ziehen (Griff) oder ▲/▼ in Tabellenzeilen (z. B. Varianten eines Produkts). Die Linie zeigt beim Ziehen, wo die Zeile landet (NN/g "Drag-and-Drop": Vorschau der Zielposition). */ .kb-drag-handle { cursor: grab; color: var(--kb-text-secondary); padding: 0 0.25rem; } .kb-drag-handle:active { cursor: grabbing; } .kb-order-btn { padding: 0 0.3rem; line-height: 1.2; color: var(--kb-text-secondary); } .kb-order-btn:disabled { visibility: hidden; } tr.kb-drop-before > td { box-shadow: inset 0 3px 0 var(--kb-accent); } tr.kb-drop-after > td { box-shadow: inset 0 -3px 0 var(--kb-accent); } /* Einrückung je Ebene in Baumtabellen (KbTreeTable setzt --kb-tree-depth an jeder Zeile). Alles, was zu einer Zeile gehört – Knöpfe, Bild, Farbpunkt und Name – rückt gemeinsam ein, damit die Ebene auch in den Spalten vor dem Namen sichtbar ist (NN/g „Tree Views“: Einrückung zeigt die Hierarchie). */ .kb-tree-indent { padding-left: calc(var(--kb-tree-depth, 0) * 1.5rem); } .kb-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .kb-page-intro-progress { min-width: min(100%, 18rem); } .kb-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; } .kb-section-heading h2 { margin: 0.2rem 0 0; font-size: 1.35rem; } .kb-surface-panel { padding: 1.25rem; border-radius: 1.25rem; background: #fff8f0; border: 1px solid rgba(255, 130, 71, 0.10); box-shadow: 0 4px 16px rgba(180, 80, 20, 0.05); } .kb-today-focus { background: linear-gradient(140deg, rgba(255, 252, 245, 0.98) 0%, rgba(255, 238, 210, 0.92) 100%); } .kb-today-focus h2 { font-size: clamp(1.6rem, 3vw, 2rem); } .kb-today-focus p { max-width: 38rem; font-size: 1rem; line-height: 1.65; } .kb-surface-panel-muted { background: rgba(255, 255, 255, 0.62); } .kb-filter-row { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; } .kb-filter-field { min-width: 220px; } .kb-data-card { overflow: hidden; } .kb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .kb-table-wrap .table { margin-bottom: 0; } /* Opt-in (zusätzlich zu .table-sm) für Listen mit besonders vielen Zeilen auf wenig Raum, z. B. die Variantenliste im Produkt-Bearbeiten-Dialog - kleinere Schrift und engere Zeilenhöhe als .table-sm allein (0.25rem Zellpadding) bietet. */ .kb-table-dense { font-size: 0.8125rem; } .kb-table-dense > :not(caption) > * > * { padding: 0.15rem 0.4rem; } .kb-empty-state { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.35rem 1.5rem; border-radius: 1.1rem; background: rgba(255, 252, 245, 0.80); border: 1px dashed rgba(255, 130, 71, 0.22); color: var(--kb-text-secondary); } .kb-empty-state-icon { font-size: 1.5rem; line-height: 1; } .kb-empty-state-title { margin: 0 0 0.3rem; font-size: 1rem; color: var(--kb-text-primary); } /* Knopf für den nächsten Schritt im Leerzustand (KbEmptyState/KbNoResults). */ .kb-empty-state-action { margin-top: 0.75rem; } .kb-empty-state-action .bi { margin-right: 0.35rem; } .kb-empty-state-description { margin: 0; } .kb-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .kb-detail-item { padding: 1rem; border-radius: 1rem; background: rgba(255, 252, 245, 0.78); border: 1px solid rgba(255, 130, 71, 0.10); } .kb-detail-item strong { display: block; margin-bottom: 0.3rem; } .kb-status-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1.2; } .kb-status-pill--success { background: rgba(162, 205, 90, 0.16); border-color: rgba(162, 205, 90, 0.32); color: #4a7a1a; } .kb-status-pill--warning { background: rgba(255, 216, 77, 0.18); border-color: rgba(255, 216, 77, 0.35); color: #805f00; } .kb-status-pill--error { background: rgba(255, 95, 162, 0.12); border-color: rgba(255, 95, 162, 0.24); color: var(--kb-danger); } .kb-status-pill--info { background: rgba(0, 154, 205, 0.10); border-color: rgba(0, 154, 205, 0.22); color: var(--kb-ctrl-primary); } .kb-status-pill--neutral { background: rgba(180, 80, 20, 0.07); border-color: var(--kb-border-soft); color: var(--kb-text-secondary); } .kb-clickable-row { cursor: pointer; } .kb-clickable-row:hover > * { background-color: #fff3e0 !important; } .kb-clickable-row { cursor: pointer; } .kb-list-thumbnail { width: 48px; height: 48px; border-radius: 0.4rem; object-fit: cover; } .kb-list-thumbnail-placeholder { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 0.4rem; background: var(--kb-surface-soft); color: var(--kb-text-secondary); font-size: 0.7rem; } .kb-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .kb-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kb-text-secondary); color: #fff; font-size: 0.85rem; font-weight: 600; } .kb-detail-scroll { max-height: 70vh; overflow: auto; } .kb-detail-image { width: 100%; max-height: 220px; object-fit: cover; } h1:focus { outline: none; } /* ============================================================ Code-Elemente ============================================================ */ code { font-size: 0.8rem; color: var(--kb-accent-strong); background-color: var(--kb-accent-light); padding: 0.1em 0.45em; border-radius: 4px; } /* ============================================================ Blazor Error Boundary ============================================================ */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "Ein Fehler ist aufgetreten."; } /* ============================================================ Sonstiges ============================================================ */ .darker-border-checkbox.form-check-input { border-color: var(--kb-border-soft); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--kb-text-secondary); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ============================================================ Responsive – keine horizontalen Scrollprobleme ============================================================ */ @media (max-width: 640.98px) { .table-responsive-always { overflow-x: auto; -webkit-overflow-scrolling: touch; } h1 { font-size: 1.65rem; } .card-body { padding: 1rem; } .kb-page-intro { margin-bottom: 1.5rem; } .kb-page-actions, .kb-filter-row { align-items: stretch; } .kb-filter-field { min-width: 100%; } } /* ============================================================ KbAlert – einheitliche Feedback-Meldungen ============================================================ */ .kb-alert { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.75rem 1rem; border-radius: var(--kb-radius); margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.45; border-left: 4px solid transparent; } .kb-alert-error { background: #fff0f3; border-color: #e05c7a; color: #7a1530; } .kb-alert-success { background: #f0faf3; border-color: #3aaa6e; color: #1a5c38; } .kb-alert-warning { background: #fffbeb; border-color: #f0b429; color: #7a4c00; } .kb-alert-info { background: #f0f6ff; border-color: #4a90d9; color: #1a3d6b; } .kb-alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.05rem; } .kb-alert-text { flex: 1; } .kb-alert-close { background: none; border: none; cursor: pointer; padding: 0; font-size: 0.85rem; color: inherit; opacity: 0.6; line-height: 1; flex-shrink: 0; } .kb-alert-close:hover { opacity: 1; } /* ============================================================ KbErrorBoundary – Fehler-Fallback im Inhaltsbereich ============================================================ */ .kb-error-boundary { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem 1.75rem; background: #fff0f3; border: 1px solid #f5c6d0; border-left: 4px solid #e05c7a; border-radius: var(--kb-radius); margin: 1.5rem 0; } .kb-error-boundary-icon { font-size: 1.5rem; flex-shrink: 0; } .kb-error-boundary-body strong { display: block; color: #7a1530; font-size: 1rem; margin-bottom: 0.35rem; } .kb-error-boundary-body p { color: #7a1530; font-size: 0.88rem; margin-bottom: 0.75rem; } /* ============================================================ GLOW HUB � Neue Komponentenstyles ============================================================ */ /* GlowHero – kein Card-Look, kein Abstand zur Topbar: bricht per negativem Margin aus dem Padding von .content-shell/.content aus, damit sie randlos direkt unter der Suchleiste liegt und von der linken bis zur rechten Kante des Inhaltsbereichs reicht. Platzhalter- Hintergrundbild (Sonnenuntergang-Verlauf statt echtem Foto, siehe Absprache): heller Überzug links sorgt für lesbaren Text, die Farbe wird zum rechten Rand hin kräftiger. */ .glow-hero { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem; /* Negativer Margin hebt exakt das Padding von .content-shell + .content auf (siehe MainLayout.razor.css), damit die Hero bis an die Kanten des Inhaltsbereichs reicht und ohne Lücke direkt unter der Topbar beginnt. */ margin: -1.5rem -2.25rem 1.5rem; padding: 2.25rem; border-radius: 0; min-height: 15rem; overflow: hidden; position: relative; background-image: linear-gradient(90deg, rgba(255,249,240,0.94) 0%, rgba(255,249,240,0.72) 28%, rgba(255,249,240,0.20) 55%, rgba(255,249,240,0) 72%), radial-gradient(circle at 82% 28%, rgba(255,224,140,0.9) 0%, rgba(255,224,140,0) 24%), linear-gradient(180deg, #ffe9c7 0%, #ffc48c 30%, #ff9a5c 55%, #ff8247 75%, #c44a1a 100%); background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 641px) { .glow-hero { margin: -1.75rem -3rem 1.5rem -3.5rem; padding: 2.25rem 3rem 2.25rem 3.5rem; } } .glow-hero-content { display: flex; flex-direction: column; gap: 0.9rem; max-width: 46rem; position: relative; } .glow-hero-greeting { display: flex; align-items: flex-start; gap: 1rem; } .glow-hero-sparkle { font-size: 2.2rem; line-height: 1; filter: drop-shadow(0 2px 8px rgba(255,216,77,0.45)); } .glow-hero-title { font-family: var(--kb-font-display); font-size: 2rem; font-weight: 700; color: var(--kb-text-primary); margin: 0; letter-spacing: -0.02em; } .glow-hero-subtitle { margin: 0.3rem 0 0; color: var(--kb-text-secondary); font-size: 1.02rem; line-height: 1.6; } .glow-hero-quote { font-family: var(--kb-font-display); font-style: italic; color: #000; font-size: 1rem; padding-left: 1rem; border-left: 3px solid var(--kb-accent); margin-top: 0.5rem; } .glow-hero-quote-mark { font-size: 1.4rem; color: var(--kb-accent); margin-right: 0.25rem; vertical-align: middle; } .glow-hero-actions { display: flex; align-items: center; gap: 0.75rem; position: relative; } /* KpiCard – bewusst quadratisch (aspect-ratio), unabhängig von der Höhe benachbarter Kacheln in derselben Zeile, damit sie nicht in die Höhe gezogen wird. */ .kpi-card { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1 / 1; /* min-height:auto würde sonst per Flex-Item-Defaultverhalten den Inhalt vor das aspect-ratio stellen und die Karte in die Höhe ziehen - deshalb explizit 0. */ min-height: 0; overflow: hidden; padding: 1.1rem; background: var(--kb-surface); border: 1px solid var(--kb-border-soft); border-radius: var(--kb-radius-card); box-shadow: var(--kb-shadow-card); transition: box-shadow 0.18s ease, transform 0.18s ease; } .kpi-card:hover { box-shadow: var(--kb-shadow-card-hover); transform: translateY(-2px); } .kpi-card--highlighted { background: linear-gradient(135deg, rgba(255,216,77,0.10) 0%, rgba(255,130,71,0.12) 100%); border-color: rgba(255,130,71,0.25); } /* Heute-Seite: 2x2-Raster statt einspaltigem Stapel – 2 KPI-Karten pro Zeile, 2 Zeilen insgesamt. Jede Karte bekommt dadurch die doppelte Höhe (und Breite) gegenüber dem vorherigen 4er-Stapel, genug Platz für Inhalt + Padding. min-height (statt height) an der Leaderboard-Höhe orientiert: reicht der Platz trotzdem nicht, wächst das Raster höher als Leaderboard, statt Karten zusammenzuquetschen und den Inhalt per overflow:hidden abzuschneiden (das hat vorher jedes Padding unsichtbar gemacht). Die "1fr"-Zeilen respektieren dabei automatisch die Mindesthöhe des Karteninhalts (kein min-height:0-Override mehr nötig). */ .kb-kpi-stack { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; min-height: 100%; gap: 1rem; } .kb-kpi-stack > .kpi-card { aspect-ratio: auto; position: relative; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; gap: 1.25rem; padding-top: 2.25rem; padding-bottom: 2.25rem; } .kb-kpi-stack > .kpi-card > .kpi-card-text { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 0; min-width: 0; padding-right: 2.6rem; } /* Label, Wert und Caption schwarz; Trend (inkl. "ggü. gestern") komplett grau. */ .kb-kpi-stack > .kpi-card .kpi-card-label, .kb-kpi-stack > .kpi-card .kpi-card-value, .kb-kpi-stack > .kpi-card .kpi-card-caption { color: #000; } .kb-kpi-stack > .kpi-card .kpi-card-trend, .kb-kpi-stack > .kpi-card .kpi-card-trend-suffix { color: var(--kb-text-secondary); } /* Das Icon wird aus dem Header herausgelöst (position:absolute) und oben rechts über der gesamten Karte verankert – deshalb braucht .kpi-card position:relative weiter oben. */ .kb-kpi-stack > .kpi-card .kpi-card-icon-badge { position: absolute; top: 1.5rem; right: 1.4rem; background: linear-gradient(135deg, var(--kb-warm) 0%, var(--kb-accent) 100%); color: #fff; } /* Sparkline behält ihr flaches Original-Seitenverhältnis (100:32) bei, statt verzerrt zu werden, und erscheint einfach zentriert in der rechten Kartenhälfte. */ .kb-kpi-stack > .kpi-card > .kpi-card-sparkline-wrap { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; height: 100%; margin: 0; } .kb-kpi-stack > .kpi-card > .kpi-card-sparkline-wrap > .kpi-card-sparkline { width: 100%; height: auto; aspect-ratio: 100 / 32; } /* Immer der orange Grundton statt trendabhängig Grün/Rot/Grau, nur im Stapel-Kontext. Größere Punkte + dickere Linie, damit die "Zeitverlauf"-Grafik klar erkennbar bleibt. */ .kb-kpi-stack .kpi-card-sparkline polyline { stroke: var(--kb-accent-strong); fill: none; } .kb-kpi-stack .kpi-card-sparkline circle { stroke: var(--kb-accent-strong); fill: var(--kb-accent-strong); } .kb-kpi-stack .kpi-card-sparkline polyline { stroke-width: 2.5; } .kb-kpi-stack .kpi-card-sparkline circle { r: 2.4; } /* Leichter Verlauf unter der Linie: oben schwach orange, nach unten hin transparent auslaufend. */ .kb-kpi-stack .kpi-card-sparkline-stop-start { stop-opacity: 0.22; } .kb-kpi-stack .kpi-card-sparkline-stop-end { stop-opacity: 0; } /* Das Schließen der Fläche erzeugt links (und rechts) eine senkrechte Kante zur Grundlinie – sähe sonst wie eine Y-Achse aus. Per Masken-Verlauf an den seitlichen Rändern ausblenden. */ .kb-kpi-stack .kpi-card-sparkline-area { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); } /* Standard-Kontext (Grid auf anderen Seiten): Wrapper unsichtbar, Kinder verhalten sich wie direkte Kinder von .kpi-card (display:flex; flex-direction:column). */ .kpi-card-text { display: contents; } .kpi-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } .kpi-card-label { font-size: 0.78rem; font-weight: 600; color: var(--kb-text-primary); line-height: 1.25; } .kpi-card-icon-badge { flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; } .kpi-card-icon-badge--warm, .kpi-card-icon-badge--rose { background: var(--kb-accent-light); color: var(--kb-accent-strong); } .kpi-card-value { font-family: var(--kb-font-display); font-size: 1.5rem; font-weight: 700; color: var(--kb-text-primary); line-height: 1.1; } .kpi-card-caption { margin-top: 0.35rem; font-size: 0.78rem; color: var(--kb-text-secondary); } .kpi-card-trend { margin-top: 0.3rem; font-size: 0.78rem; font-weight: 600; } .kpi-card-trend--up { color: #4a7a1a; } .kpi-card-trend--down { color: var(--kb-danger); } .kpi-card-trend--neutral { color: var(--kb-text-secondary); } .kpi-card-trend-suffix { color: var(--kb-text-secondary); font-weight: 500; } /* "Mein Lernpfad" + Founder-Message + Countdown – ersetzt die Bootstrap-Grid-Spalten durch feste Prozentbreiten, damit Lernpfad (28%) + Founder (42%) = 70% der Zeilenbreite ergeben. Countdown füllt den Rest und wird per align-items:stretch auf dieselbe Höhe wie Founder gestreckt (siehe .kb-countdown-card height:100%). Unter 992px stapeln die Karten. */ .kb-lernpfad-founder-row { display: flex; flex-direction: column; gap: 1rem; } .kb-lernpfad-founder-row > .kb-col-fill { flex: 1 1 auto; min-width: 0; } @media (min-width: 992px) { .kb-lernpfad-founder-row { flex-direction: row; align-items: stretch; } .kb-lernpfad-founder-row > .kb-col-lernpfad { flex: 0 0 28%; width: 28%; } .kb-lernpfad-founder-row > .kb-col-founder { flex: 0 0 42%; width: 42%; } } /* ProgressCard */ .progress-card { display: flex; flex-direction: column; height: 100%; padding: 1rem 1.1rem; background: var(--kb-surface); border: 1px solid var(--kb-border-soft); border-radius: var(--kb-radius-card); box-shadow: var(--kb-shadow-card); } /* "Mein Lernpfad" auf der Heute-Seite – Seitenverhältnis 1,5:1. Bei 28% Zeilenbreite (siehe .kb-lernpfad-founder-row) ergibt das exakt dieselbe Höhe wie die Founder-Karte (2,25:1 bei 42% Zeilenbreite): 28/1,5 = 42/2,25. */ .progress-card--photo { height: auto; aspect-ratio: 1.5; background-size: contain; background-position: center; background-repeat: no-repeat; } .progress-card-cta { margin-top: auto; align-self: flex-start; } .progress-card-header { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.85rem; } .progress-card-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; } .progress-card-label { font-weight: 600; font-size: 0.92rem; color: var(--kb-text-primary); } .progress-card-subtitle { font-size: 0.78rem; color: var(--kb-text-secondary); margin-top: 0.15rem; } .progress-card-percent { margin-left: auto; font-family: var(--kb-font-display); font-size: 1.2rem; font-weight: 700; color: var(--kb-accent-strong); white-space: nowrap; } .progress-card-bar-wrap { height: 6px; border-radius: 999px; background: rgba(180,80,20,0.10); overflow: hidden; margin-bottom: 0.6rem; } .progress-card-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--kb-warm) 0%, var(--kb-accent) 50%, var(--kb-highlight) 100%); transition: width 0.6s ease; } .progress-card-caption { font-size: 0.78rem; color: var(--kb-text-secondary); } /* IncentiveCard */ .incentive-card { border-radius: var(--kb-radius-card); overflow: hidden; background: var(--kb-surface); border: 1px solid var(--kb-border-soft); box-shadow: var(--kb-shadow-card); transition: box-shadow 0.2s ease, transform 0.2s ease; } .incentive-card:hover { box-shadow: var(--kb-shadow-card-hover); transform: translateY(-3px); } .incentive-card-visual { position: relative; height: 120px; background: linear-gradient(135deg, rgba(255,216,77,0.25) 0%, rgba(255,130,71,0.30) 50%, rgba(255,95,162,0.20) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .incentive-card-emoji { font-size: 3.5rem; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15)); } .incentive-card-overlay { position: absolute; bottom: 0.6rem; right: 0.75rem; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: var(--kb-accent-strong); letter-spacing: 0.05em; } .incentive-card-body { padding: var(--kb-spacing-card); } .incentive-card-title { font-family: var(--kb-font-display); font-size: 1.35rem; font-weight: 700; color: var(--kb-text-primary); margin: 0.4rem 0 0.5rem; } .incentive-card-missing { font-size: 0.95rem; color: var(--kb-text-secondary); margin-bottom: 0.75rem; } .incentive-card-missing strong { color: var(--kb-accent-strong); font-weight: 700; } .incentive-card-progress-wrap { height: 8px; border-radius: 999px; background: rgba(180,80,20,0.10); overflow: hidden; margin-bottom: 0.5rem; } .incentive-card-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--kb-warm) 0%, var(--kb-accent) 60%, var(--kb-highlight) 100%); transition: width 0.7s ease; } .incentive-card-meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--kb-text-secondary); margin-bottom: 0.5rem; } .incentive-card-deadline { font-weight: 600; color: var(--kb-accent-strong); } /* GlowComingSoon */ .glow-coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; gap: 0.6rem; } .glow-coming-soon-icon { font-size: 2.5rem; opacity: 0.7; } .glow-coming-soon-title { font-family: var(--kb-font-display); font-size: 1.1rem; font-weight: 700; color: var(--kb-text-primary); margin: 0; } .glow-coming-soon-text { color: var(--kb-text-secondary); font-size: 0.88rem; margin: 0; } .glow-coming-soon-badge { display: inline-block; padding: 0.25rem 0.85rem; border-radius: 999px; background: rgba(255,130,71,0.10); color: var(--kb-accent-strong); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(255,130,71,0.18); } /* Glow Quick Access Cards */ .glow-quick-card { display: flex; align-items: center; gap: 0.85rem; min-height: 6.25rem; padding: 1rem 1.1rem; border-radius: var(--kb-radius-card); background: var(--kb-surface-soft); border: 1px solid var(--kb-border-soft); transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .glow-quick-card:hover { background: rgba(255,248,235,1); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(180,80,20,0.09); } .glow-quick-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; } .glow-quick-title { font-weight: 600; font-size: 0.95rem; color: var(--kb-text-primary); } .glow-quick-desc { font-size: 0.82rem; color: var(--kb-text-secondary); margin-top: 0.2rem; line-height: 1.45; } /* Glow Wall / Community Wins */ .glow-wall { display: flex; flex-direction: column; gap: 0.75rem; } .glow-win-item { padding: 1rem 0; border-bottom: 1px solid var(--kb-border-soft); } .glow-win-item:first-child { padding-top: 0; } .glow-win-item:last-child { padding-bottom: 0; border-bottom: none; } .glow-win-item--highlight { padding-left: 0.85rem; border-left: 3px solid var(--kb-accent); } .glow-win-item--sm { display: flex; align-items: center; gap: 0.75rem; } .glow-win-badge { font-size: 0.78rem; font-weight: 700; color: var(--kb-accent-strong); background: rgba(255,130,71,0.08); padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; } .glow-win-author { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--kb-text-secondary); margin: 0.35rem 0 0.5rem; text-transform: uppercase; } .glow-win-text { font-size: 0.88rem; color: var(--kb-text-primary); margin: 0; } /* Glow Start Days */ .glow-start-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .glow-day-card { display: none; } .glow-day-card:hover { transform: translateY(-2px); } .glow-day-card--done { border-color: rgba(162,205,90,0.35); background: rgba(162,205,90,0.05); } .glow-day-card--active { border-color: rgba(255,130,71,0.30); background: rgba(255,130,71,0.05); } .glow-day-card--locked { opacity: 0.6; } .glow-day-number { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kb-text-secondary); margin-bottom: 0.4rem; } .glow-day-title { font-family: var(--kb-font-display); font-size: 1.1rem; font-weight: 700; color: var(--kb-text-primary); margin-bottom: 0.85rem; } .glow-day-checklist { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .glow-day-checklist li { font-size: 0.88rem; color: var(--kb-text-secondary); padding-left: 0.25rem; } .glow-day-checklist li.done { color: #4a7a1a; font-weight: 600; } /* Academy Category Cards */ .academy-category-content { height: 100%; } .academy-category-content::before { content: ""; display: block; width: 2.5rem; height: 0.25rem; margin-bottom: 1rem; border-radius: 999px; background: var(--cat-color, var(--kb-accent)); } .academy-cat-icon { font-size: 2rem; margin-bottom: 0.75rem; } .academy-category-content h3 { font-size: 1.1rem; margin-bottom: 0.5rem; } .academy-category-content p { font-size: 0.85rem; color: var(--kb-text-secondary); margin-bottom: 0.75rem; } .academy-cat-count { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-text-secondary); display: block; margin-bottom: 1rem; } /* Content Hub Grid */ .content-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .content-asset-card { min-height: 15rem; padding: 1.35rem; border-radius: var(--kb-radius-card); background: var(--kb-surface); border: 1px solid var(--kb-border-soft); box-shadow: var(--kb-shadow-card); display: flex; flex-direction: column; gap: 0.85rem; transition: transform 0.18s ease, box-shadow 0.18s ease; } .content-asset-card:hover { transform: translateY(-2px); box-shadow: var(--kb-shadow-card-hover); } .content-asset-card--coming-soon { opacity: 0.72; } .content-asset-preview { font-size: 2.5rem; text-align: center; padding: 0.75rem; background: var(--kb-surface-soft); border-radius: 12px; line-height: 1; } .content-asset-info { flex: 1; } .content-asset-title { font-weight: 600; font-size: 0.92rem; color: var(--kb-text-primary); margin-top: 0.2rem; } /* Community Pills */ .glow-community-pill { display: flex; align-items: center; padding: 0.6rem 1rem; border-radius: 12px; background: var(--kb-surface-soft); border: 1px solid var(--kb-border-soft); font-weight: 600; font-size: 0.88rem; color: var(--kb-text-primary); cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; gap: 0.5rem; } .glow-community-pill:hover { background: rgba(255,248,235,1); transform: translateX(2px); } .coming-soon-pill { opacity: 0.6; cursor: default; } .coming-soon-pill:hover { transform: none; } /* ============================================================ Neue Seiten � gemeinsame Komponenten-Styles ============================================================ */ .kb-section-title { font-family: var(--kb-font-display); font-size: 1.25rem; color: var(--kb-text-primary); margin-top: var(--kb-spacing-section); margin-bottom: 1rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--kb-border-soft); } /* Module Card (SkinCareCode, Academy-�hnlich) */ .kb-module-card { border-radius: var(--kb-radius-card) !important; box-shadow: var(--kb-shadow-card); background: var(--kb-surface); transition: box-shadow 0.2s, transform 0.2s; } .kb-module-card:hover { box-shadow: var(--kb-shadow-card-hover); transform: translateY(-2px); } .kb-module-icon { font-size: 2rem; margin-bottom: 0.5rem; } /* Tool Card (BeautyCoachTools) */ .kb-tool-card { border-radius: var(--kb-radius-card) !important; box-shadow: var(--kb-shadow-card); background: var(--kb-surface); transition: box-shadow 0.2s, transform 0.2s; } .kb-tool-card:hover { box-shadow: var(--kb-shadow-card-hover); transform: translateY(-2px); } .kb-tool-icon { font-size: 2rem; margin-bottom: 0.5rem; } /* Event Card */ .kb-event-card { border-radius: var(--kb-radius-card) !important; box-shadow: var(--kb-shadow-card); background: var(--kb-surface); transition: box-shadow 0.2s, transform 0.2s; } .kb-event-card:hover { box-shadow: var(--kb-shadow-card-hover); transform: translateY(-2px); } .kb-event-badge { display: inline-block; background: var(--kb-accent); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.7rem; border-radius: 999px; } .kb-event-badge--online { background: var(--kb-ctrl-primary); } .kb-event-badge--retreat { background: var(--kb-highlight); } .kb-event-countdown { font-size: 0.85rem; color: var(--kb-text-secondary); margin-top: 0.5rem; } /* Automation Flow */ .kb-automation-flow { display: flex; flex-direction: column; gap: 0; margin-top: 1rem; } .kb-automation-step { display: flex; align-items: flex-start; gap: 1rem; background: var(--kb-surface-soft); border-radius: var(--kb-radius-card); padding: 1rem 1.25rem; border-left: 4px solid var(--kb-border-soft); } .kb-automation-step--planned { border-left-color: var(--kb-warm); opacity: 0.85; } .kb-automation-step-icon { font-size: 1.5rem; flex-shrink: 0; } .kb-automation-connector { text-align: center; color: var(--kb-text-secondary); font-size: 1.1rem; padding: 0.2rem 0; margin-left: 1.5rem; } /* Page Intro mit Fortschritt nebeneinander */ .kb-page-intro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem; margin-bottom: var(--kb-spacing-section); } .kb-page-intro-copy { flex: 1 1 300px; } .kb-page-intro-progress { flex: 0 1 280px; } .kb-page-actions { flex: 0 1 auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .kb-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kb-accent); margin-bottom: .4rem; } /* ?? GlowWinCard ??????????????????????????????????????? */ .glow-win-card { background: var(--kb-card-bg, #fff); border-radius: var(--kb-radius); padding: 1.1rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: .45rem; } .glow-win-card--highlight { border-left: 4px solid var(--kb-accent); } .glow-win-card--sm { padding: .7rem .9rem; font-size: .9rem; } .glow-win-badge { font-size: 1.4rem; } .glow-win-author { font-weight: 700; font-size: .9rem; color: var(--kb-ctrl-primary); } .glow-win-text { margin: 0; font-size: .92rem; color: var(--kb-text-secondary, #555); } /* ?? CommunityGroupPill ???????????????????????????????? */ .glow-community-pill { display: flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border-radius: var(--kb-radius); cursor: pointer; transition: background .15s; font-size: .9rem; } .glow-community-pill:hover { background: rgba(var(--kb-accent-rgb, 224,82,82), .07); } .glow-community-pill--active { background: rgba(var(--kb-accent-rgb, 224,82,82), .13); font-weight: 600; } .glow-pill-icon { font-size: 1rem; } .glow-pill-name { flex: 1; } .glow-pill-count { font-size: .75rem; background: var(--kb-accent); color: #fff; border-radius: 999px; padding: 0 .45rem; } /* ?? ContentAssetCard ?????????????????????????????????? */ .content-asset-card { background: var(--kb-card-bg, #fff); border-radius: var(--kb-radius); padding: 1rem 1rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: .55rem; } .content-asset-preview { font-size: 2.2rem; text-align: center; padding: .6rem 0; background: var(--kb-surface-subtle, #fdf6f0); border-radius: calc(var(--kb-radius) - 2px); } .content-asset-info { flex: 1; } .content-asset-title { font-weight: 600; font-size: .92rem; margin-top: .2rem; } .kb-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--kb-accent); } /* ?? AcademyCategoryCard ??????????????????????????????? */ .academy-category-card { background: var(--kb-card-bg, #fff); border-radius: var(--kb-radius); padding: 1.5rem 1.4rem; box-shadow: 0 2px 8px rgba(0,0,0,.06); border-top: 4px solid var(--cat-color, var(--kb-accent)); display: flex; flex-direction: column; gap: .6rem; } .academy-cat-icon { font-size: 2rem; } .academy-category-card h3 { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--cat-color, var(--kb-accent)); } .academy-category-card p { margin: 0; font-size: .9rem; color: var(--kb-text-secondary, #555); } .academy-cat-count { font-size: .78rem; background: rgba(0,0,0,.07); border-radius: 999px; padding: .2rem .65rem; align-self: flex-start; } /* ?? KbFilterBar ??????????????????????????????????????? */ .kb-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.5rem; } .kb-filter-search { flex: 1 1 220px; max-width: 340px; } .kb-filter-buttons { display: flex; flex-wrap: wrap; gap: .4rem; } /* Nicht gewählte Option (KbChoiceGroup): dieselbe Pillenform und Größe wie die gewählte (.btn-primary oben), nur grau – so liest sich die Gruppe als ein Umschalter statt als gemischte Knopfarten. */ .kb-filter-buttons .btn-outline-secondary { border-radius: var(--kb-radius-button); padding: 0.55rem 1.35rem; font-weight: 600; letter-spacing: 0.02em; background: #f1efed; border: 1px solid #d9d5d1; color: #6b6560; box-shadow: none; } .kb-filter-buttons .btn-outline-secondary:hover, .kb-filter-buttons .btn-outline-secondary:focus { background: #e6e2de; border-color: #cbc6c1; color: #4a4540; } /* ============================================================ KbSearchBar – Suchfeld mit Lupe-Icon, Löschen-Knopf und Trefferzahl-Badge. Lupe-Icon links im selben Look wie das (nicht-funktionale) Suchfeld in der TopBar (.kb-topbar-search-icon: 🔍, 0.6 Opazität, vertikal zentriert) – dieselbe Suchfeld-Optik soll app-weit wiedererkennbar sein, nicht zwei verschiedene Varianten. Löschen-Knopf sitzt IM Eingabefeld (rechts, per padding-right auf .form-control Platz geschaffen); die Trefferzahl ist bewusst KEIN Fließtext mehr ("X Treffer"), sondern eine kompakte graue Badge am oberen rechten Rand des Suchfelds – reduziert visuelles Rauschen, Zahl bleibt aber über aria-label weiterhin als "X Treffer" hörbar. ============================================================ */ .kb-search-bar { position: relative; display: inline-block; width: 100%; max-width: 320px; margin-bottom: 1rem; } .kb-search-icon { position: absolute; top: 50%; left: 0.9rem; transform: translateY(-50%); opacity: 0.6; font-size: 0.9rem; pointer-events: none; } .kb-search-bar .form-control { padding-left: 2.2rem; padding-right: 2.25rem; } .kb-search-clear { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; background: transparent; border: none; border-radius: 999px; color: var(--kb-text-secondary); line-height: 1; } .kb-search-clear .bi { font-size: 0.85rem; } .kb-search-clear:hover { background: var(--kb-surface-soft); color: var(--kb-text-primary); } .kb-search-badge { position: absolute; top: -0.5rem; right: -0.5rem; min-width: 1.35rem; padding: 0.15rem 0.4rem; border-radius: 999px; background: var(--kb-border-grey); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } /* ============================================================ KbColorSwatch – runder Farbmuster-Kreis für einen Hex-Code (Farben-Liste, Live-Vorschau in Farben-Bearbeiten). Größe kommt als Inline-Style von der Komponente (variiert je Verwendungsstelle), Form/Rahmen/Platzhalter sind hier zentral. ============================================================ */ .kb-color-swatch { display: inline-block; border-radius: 50%; border: 1px solid #ccc; } .kb-color-swatch--empty { border-style: dashed; } /* ============================================================ KbImageThumbnail / KbImageUpload – Vorschaubild in Listen (nur Anzeige) und klickbarer Bild-Upload im Bearbeiten-Formular (Farben/Düfte). Größe kommt als Inline-Style von der Komponente (variiert je Verwendungsstelle - kleine Liste vs. größere Upload-Vorschau). ============================================================ */ .kb-image-thumbnail { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--kb-radius-input); border: 1px solid var(--kb-border-soft); background: var(--kb-surface-soft); overflow: hidden; flex-shrink: 0; } .kb-image-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .kb-image-thumbnail-placeholder { color: var(--kb-border-grey); font-size: 1.1rem; } /* Natives