/* ===================================================================== Theme: Portal --------------------------------------------------------------------- Der Bildershop im Design des Bergstrasse-Portals (Inhaber 26.09.2026: "den Style Guide fuer den Bildershop an den Style Guide von unserem Portal angleichen"). Aktiv ueber in base.html; der Styleguide kann zum Vergleich zurueckschalten. QUELLE: static/portal.css im Portal-Repo, Stand fffd2fc50bb0 (dieselbe Kennung traegt die Mockup-Vorlage vom 26.09.2026; 130 Tokens, keine Abweichung). Neben jedem Wert steht das Portal-Token, aus dem er stammt -- beim naechsten Abgleich wird dort nachgesehen, nicht hier geraten. Nur Schicht 2 (--ba-*) wird ueberschrieben; app.css bleibt, wie sie aus dem Uebergabepaket kam. Drei Portal-Regeln, die hier Werte entscheiden: - Die Hauptaktion ist neutral-schwarz, nicht bunt. - Orange ist fuer Verzug reserviert -- der Warenkorb-Zaehler ist keiner und wird deshalb dunkel, nicht orange. - Kein Gewicht 700 in neuen Bausteinen; die Obergrenze ist 600. Der Mandanten-Akzent (--accent, Bergstrasse gruen) gehoert Logo und Marke. Der Bildershop hat beides nicht -- er kommt deshalb nicht vor. ===================================================================== */ [data-theme="portal"] { /* ---------- Rohwerte: Portal-Palette (--p-*) ---------- */ --ba-ref-p-neutral-0: #FFFFFF; --ba-ref-p-neutral-50: #F7F7F8; --ba-ref-p-neutral-100: #F1F1F3; --ba-ref-p-neutral-150: #E9E9EC; --ba-ref-p-neutral-200: #E3E3E7; --ba-ref-p-neutral-300: #D3D4D9; --ba-ref-p-neutral-500: #83868F; --ba-ref-p-neutral-600: #696C75; --ba-ref-p-neutral-700: #4A4D55; --ba-ref-p-neutral-800: #2A2D34; --ba-ref-p-neutral-900: #17191E; --ba-ref-p-blue-50: #E6EDFC; --ba-ref-p-blue-600: #2258D6; --ba-ref-p-blue-700: #1A44A8; --ba-ref-p-neutral-400: #A8AAB2; --ba-ref-p-red-50: #FDE9E7; --ba-ref-p-red-100: #FBD8D5; --ba-ref-p-red-600: #D0342C; --ba-ref-p-red-700: #A5261F; --ba-ref-p-scrim-rgb: 14 16 20; --ba-ref-p-schiene: #E9EBEE; /* .segmented-Schiene (portal.css, roh) */ /* ---------- Flaechen, Text, Linien ---------- */ --ba-color-bg: var(--ba-ref-p-neutral-50); /* --c-bg */ --ba-color-surface: var(--ba-ref-p-neutral-0); /* --c-surface */ --ba-color-surface-muted: var(--ba-ref-p-neutral-100); /* --c-surface-sunken */ --ba-color-text: var(--ba-ref-p-neutral-900); /* --c-text */ --ba-color-text-muted: var(--ba-ref-p-neutral-600); /* --c-text-muted */ --ba-color-border: var(--ba-ref-p-neutral-200); /* --c-border */ --ba-color-border-subtle: var(--ba-ref-p-neutral-150); /* Der Rand eines Bedienelements ist --c-border-strong, nicht die Trennlinienfarbe -- die ist auf Weiss praktisch unsichtbar. */ --ba-color-border-control: var(--ba-ref-p-neutral-300); /* --c-border-strong */ --ba-color-border-dashed: var(--ba-ref-p-neutral-300); /* --c-border-dashed */ /* Nebenaktion (.knopf-rand): weiss mit kraeftigem Rahmen */ --ba-color-border-strong: var(--ba-ref-p-neutral-300); /* --c-border-strong */ /* ---------- Aktionen ---------- */ --ba-color-primary: var(--ba-ref-p-neutral-900); /* --c-primary-solid */ --ba-color-primary-hover: var(--ba-ref-p-neutral-800); /* --c-primary-solid-hover */ --ba-color-on-primary: var(--ba-ref-p-neutral-0); /* --c-primary-fg */ /* Getoente Flaechen (Hinweisbox, Kategorie-Vorschlag, Ablage beim Ziehen): Das sind Hinweise -- im Portal "info", nicht die Aktionsfarbe. */ --ba-color-primary-subtle: var(--ba-ref-p-blue-50); /* --c-info-surface */ --ba-color-on-primary-subtle: var(--ba-ref-p-blue-700); /* --c-info-fg */ /* Zaehler am Warenkorb: kein Verzug, also nicht orange */ --ba-color-attention: var(--ba-ref-p-neutral-900); --ba-color-on-attention: var(--ba-ref-p-neutral-0); /* Farbe ist Bedeutung, nie Schmuck: Ein Preis ist kein Zustand. */ --ba-color-price: var(--ba-ref-p-neutral-900); --ba-color-link: var(--ba-ref-p-neutral-900); --ba-color-link-hover: var(--ba-ref-p-neutral-700); /* Der Fokusring ist im Portal immer blau, bei jedem Mandanten. */ --ba-color-focus: var(--ba-ref-p-blue-600); /* --c-focus-ring */ /* "Ausgewaehlt" ist kein Status: dunkel gefuellt, nicht gruen. */ --ba-color-selected: var(--ba-ref-p-neutral-900); --ba-color-on-selected: var(--ba-ref-p-neutral-0); --ba-color-inverse: var(--ba-ref-p-neutral-900); --ba-color-on-inverse: var(--ba-ref-p-neutral-0); --ba-color-disabled: var(--ba-ref-p-neutral-150); --ba-color-on-disabled: var(--ba-ref-p-neutral-500); --ba-color-danger: var(--ba-ref-p-red-700); /* --c-danger-fg */ --ba-color-scrim: rgb(var(--ba-ref-p-scrim-rgb) / 0.38); /* --c-scrim */ /* Destruktiv: .btn--danger in Ruhe, .btn.loesch-armed scharf */ --ba-color-danger-solid: var(--ba-ref-p-red-600); /* --c-danger-solid */ --ba-color-on-danger-solid: var(--ba-ref-p-neutral-0); /* --c-text-inverse */ --ba-color-danger-surface: var(--ba-ref-p-red-50); /* --c-danger-surface */ --ba-color-danger-border: var(--ba-ref-p-red-100); /* --c-danger-border */ /* Aufgeklapptes Menue: .portal-dropdown .dropdown-menu (Milchglas) */ --ba-color-menu: rgb(244 245 247 / 0.35); --ba-color-menu-border: rgb(0 0 0 / 0.08); --ba-color-menu-hover: rgb(0 0 0 / 0.12); --ba-shadow-menu: 0 12px 32px rgb(0 0 0 / 0.16); --ba-color-grip: var(--ba-ref-p-neutral-400); /* Segment = Portal-.segmented: graue Schiene, die gewaehlte Ansicht ist ein WEISSES Feld mit feinem Schatten. Dunkel gefuellt ist im Portal nur die aktive Filter-Pille -- ein Segment schaltet um, es filtert nicht. */ --ba-color-segment-track: var(--ba-ref-p-schiene); --ba-color-segment-text: var(--ba-ref-p-neutral-600); /* --label-color */ --ba-color-segment-on: var(--ba-ref-p-neutral-0); /* --surface */ --ba-color-on-segment-on: var(--ba-ref-p-neutral-900); /* --text */ --ba-color-segment-count: var(--ba-ref-p-neutral-600); /* .segmented .n */ --ba-shadow-segment-on: 0 1px 2px rgb(16 24 40 / 0.09), 0 0 0 1px rgb(16 24 40 / 0.04); --ba-weight-segment-count: 400; /* --w-regular */ --ba-segment-pad: 3px; --ba-segment-gap: 2px; --ba-segment-item-height: 30px; --ba-segment-item-pad: 15px; --ba-radius-segment: 9px; --ba-radius-segment-on: 6px; /* --c-text-subtle */ /* ---------- Schrift ---------- */ /* Inter wie im Portal, selbst ausgeliefert (schriften.css). Inter hat keine Breitenachse -- die Streckung der Archivo-Titel entfaellt. */ --ba-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ba-font-stretch-display: 100%; --ba-font-stretch-brand: 100%; --ba-weight-bold: 600; /* --w-semibold */ --ba-weight-black: 600; /* Die Portal-Skala ist kompakter (Fliesstext 14 statt 16). */ --ba-text-3xs: 11px; /* --t-2xs */ --ba-text-2xs: 12px; /* --t-xs */ --ba-text-xs: 13px; /* --t-sm */ --ba-text-sm: 13.5px; /* --t-md */ --ba-text-md: 14px; /* --t-base */ --ba-text-base: 14px; /* --t-base */ --ba-text-lg: 16px; /* --t-lg */ --ba-text-xl: 16px; /* --t-lg */ --ba-text-2xl: 20px; /* --t-xl */ --ba-text-3xl: 24px; /* --t-2xl */ --ba-text-display: 24px; /* --t-2xl (schmal) */ --ba-text-display-lg: 29px; /* --t-page-title */ --ba-tracking-display: -0.02em; /* .page-title */ /* ---------- Groessen ---------- */ --ba-size-control: 36px; /* --h-control */ --ba-size-button-lg: 36px; /* --h-control */ --ba-size-header: 56px; /* Kopfzeile mobil */ --ba-size-control-sm: 30px; /* --h-control-sm */ --ba-size-checkbox: 20px; /* form-check 20 x 20 */ /* ---------- Form ---------- */ --ba-radius-sm: 6px; /* --r-xs */ --ba-radius-md: 8px; /* --r-sm */ --ba-radius-lg: 10px; /* --r-md */ }