/* ============================================================ fiberONE — Bootstrap 5 Theme (Dark + Light, umschaltbar) Einbinden NACH bootstrap.min.css (getestet mit Bootstrap 5.3.x): Theme-Steuerung: - Ohne JS & ohne Attribut → Dark (Default). - fiberone-theme.js setzt automatisch nach Browser-Präferenz und merkt manuelle Wahl. - Manuell: fiberoneTheme.set('light' | 'dark' | 'auto') fiberoneTheme.toggle() ============================================================ */ /* Fonts. ACHTUNG: Ein CSS-@import wirkt nur, wenn es ganz oben in der final ausgelieferten Stylesheet-Datei steht. Wenn dein Build mehrere CSS-Dateien konkateniert, rutscht dieses @import nach unten und Browser IGNORIEREN es → Dosis & Co. fehlen. Robuster: die Fonts zusätzlich per im laden (siehe README § Schriften). Das @import hier ist nur der Fallback. */ /* @import url("https://fonts.googleapis.com/css2?family=Dosis:wght@500;600;700;800&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap"); */ /* ------------------------------------------------------------ 1a. Marken-Konstanten (themenunabhängig) ------------------------------------------------------------ */ :root { --f1-cyan: #39C2FF; /* Markenfarbe — funktioniert auf beiden Themes */ --f1-cyan-deep: #0E7FBF; /* tiefere Variante für Text/Links auf Hell */ --f1-beam: #AEE4FF; /* Photon-Weißblau */ --f1-accent: #2FD3C2; /* Sekundärakzent — Teal/Aqua, "zweite Wellenlänge" */ --f1-on-brand: #04212F; /* dunkle Schrift auf Cyan-Button */ /* Semantische Statusfarben — auf die fiberONE-Welt abgestimmt (statt Bootstrap-Standardgrün/-rot/-gelb), damit Portal & Website nahtlos sind. */ --f1-success: #35C98A; /* grün — online / verfügbar */ --f1-warning: #EAB13D; /* amber — Achtung */ --f1-danger: #FF5D6B; /* rose-rot — Fehler (NICHT das Konkurrenz-Rot) */ --f1-info: #5AB0EC; /* azur — Hinweis */ --f1-on-status: #0A1208; /* dunkle Schrift auf hellen Statusflächen */ /* Konkurrenz-Palette — NUR für Vergleichs-/Chart-Kontexte, nie als UI. */ --f1-magenta: #E20074; --f1-red: #E60000; --f1-display: "Dosis", system-ui, sans-serif; --f1-body: "Instrument Sans", system-ui, sans-serif; --f1-mono: "IBM Plex Mono", ui-monospace, monospace; --f1-glow: 0 6px 30px rgba(57, 194, 255, 0.5); --f1-glow-soft: 0 4px 22px rgba(57, 194, 255, 0.4); color-scheme: dark; } /* ------------------------------------------------------------ 1b. THEME-UMSCHALTUNG — reines CSS, KEIN JavaScript nötig. • Standard: folgt automatisch dem Browser (prefers-color-scheme). • Manuell erzwingen ohne JS, drei Wege: a) / "dark" (z. B. server-seitig) b) ein angehaktes Steuerelement mit id="f1-th-light" bzw. id="f1-th-dark" irgendwo im DOM (:has()-Toggle, siehe README) fiberone-theme.js ist damit OPTIONAL (nur für persistenten In-Page-Toggle). Hinweis: Die Light-Werte stehen zweimal — einmal als erzwungener Zustand, einmal im @media-Block (Auto). Bei Änderungen BEIDE Stellen anpassen. ------------------------------------------------------------ */ /* DARK — Default + erzwungenes Dark */ :root, [data-bs-theme="dark"], :root:has(#f1-th-dark:checked) { --f1-bg: #04070F; --f1-panel: #0A1120; --f1-panel-2: #0D1526; --f1-line: rgba(142, 205, 255, 0.13); --f1-line-strong: rgba(142, 205, 255, 0.28); --f1-txt: #F2F7FC; --f1-muted: rgba(226, 240, 252, 0.64); --f1-muted-2: rgba(226, 240, 252, 0.42); --f1-emphasis: #ffffff; --f1-accent-text: var(--f1-cyan); /* Eyebrows, Links, Emphasis */ --f1-teal-text: #4FE0CF; /* Teal-Text/Outline auf Dunkel */ --f1-link: var(--f1-cyan); --f1-link-hover: var(--f1-beam); --f1-lit-color: var(--f1-beam); /* .f1-lit Headline-Akzent */ --f1-lit-shadow: 0 0 28px rgba(57, 194, 255, 0.55); --f1-badge-text: var(--f1-beam); --f1-translucent: rgba(255, 255, 255, 0.05); /* Form-Felder, Track */ --f1-ghost-bg: rgba(255, 255, 255, 0.04); --f1-ghost-hover: rgba(57, 194, 255, 0.08); --f1-tint: rgba(57, 194, 255, 0.10); --f1-hover-row: rgba(57, 194, 255, 0.05); --f1-nav-bg: rgba(4, 7, 15, 0.82); --f1-backdrop: rgba(2, 5, 12, 1); --f1-backdrop-opacity: 0.72; --f1-success-text: #57DDA1; --f1-warning-text: #F4C868; --f1-danger-text: #FF8A92; --f1-info-text: #8FCDF5; color-scheme: dark; } /* LIGHT — erzwungen (Attribut oder :has-Toggle) */ [data-bs-theme="light"], :root:has(#f1-th-light:checked) { --f1-bg: #EEF4FA; --f1-panel: #FFFFFF; --f1-panel-2: #E6EEF7; --f1-line: rgba(14, 127, 191, 0.16); --f1-line-strong: rgba(14, 127, 191, 0.30); --f1-txt: #07182A; --f1-muted: rgba(12, 30, 50, 0.66); --f1-muted-2: rgba(12, 30, 50, 0.46); --f1-emphasis: #04101D; --f1-accent-text: var(--f1-cyan-deep); --f1-teal-text: #0E8C7E; --f1-link: var(--f1-cyan-deep); --f1-link-hover: #0A6296; --f1-lit-color: var(--f1-cyan-deep); --f1-lit-shadow: 0 0 22px rgba(57, 194, 255, 0.35); --f1-badge-text: var(--f1-cyan-deep); --f1-translucent: rgba(12, 30, 50, 0.035); --f1-ghost-bg: rgba(12, 30, 50, 0.02); --f1-ghost-hover: rgba(57, 194, 255, 0.10); --f1-tint: rgba(57, 194, 255, 0.12); --f1-hover-row: rgba(57, 194, 255, 0.07); --f1-nav-bg: rgba(255, 255, 255, 0.85); --f1-backdrop: rgba(7, 24, 42, 1); --f1-backdrop-opacity: 0.5; --f1-success-text: #178A57; --f1-warning-text: #8A5E10; --f1-danger-text: #C13742; --f1-info-text: #1C6CA8; color-scheme: light; } /* AUTO — dem Browser folgen, solange NICHTS erzwungen ist (kein JS) */ @media (prefers-color-scheme: light) { :root:not([data-bs-theme]):not(:has(#f1-th-dark:checked)):not(:has(#f1-th-light:checked)) { --f1-bg: #EEF4FA; --f1-panel: #FFFFFF; --f1-panel-2: #E6EEF7; --f1-line: rgba(14, 127, 191, 0.16); --f1-line-strong: rgba(14, 127, 191, 0.30); --f1-txt: #07182A; --f1-muted: rgba(12, 30, 50, 0.66); --f1-muted-2: rgba(12, 30, 50, 0.46); --f1-emphasis: #04101D; --f1-accent-text: var(--f1-cyan-deep); --f1-teal-text: #0E8C7E; --f1-link: var(--f1-cyan-deep); --f1-link-hover: #0A6296; --f1-lit-color: var(--f1-cyan-deep); --f1-lit-shadow: 0 0 22px rgba(57, 194, 255, 0.35); --f1-badge-text: var(--f1-cyan-deep); --f1-translucent: rgba(12, 30, 50, 0.035); --f1-ghost-bg: rgba(12, 30, 50, 0.02); --f1-ghost-hover: rgba(57, 194, 255, 0.10); --f1-tint: rgba(57, 194, 255, 0.12); --f1-hover-row: rgba(57, 194, 255, 0.07); --f1-nav-bg: rgba(255, 255, 255, 0.85); --f1-backdrop: rgba(7, 24, 42, 1); --f1-backdrop-opacity: 0.5; --f1-success-text: #178A57; --f1-warning-text: #8A5E10; --f1-danger-text: #C13742; --f1-info-text: #1C6CA8; color-scheme: light; } } /* ------------------------------------------------------------ 2. Design-Tokens → Bootstrap-CSS-Variablen (themenunabhängig — referenziert die --f1-* von oben) ------------------------------------------------------------ */ :root { --bs-body-bg: var(--f1-bg); --bs-body-color: var(--f1-txt); --bs-body-font-family: var(--f1-body); --bs-body-font-size: 1.0625rem; /* 17px */ --bs-body-line-height: 1.65; --bs-secondary-color: var(--f1-muted); --bs-tertiary-color: var(--f1-muted-2); --bs-secondary-bg: var(--f1-panel); --bs-tertiary-bg: var(--f1-panel-2); --bs-emphasis-color: var(--f1-emphasis); --bs-primary: var(--f1-cyan); --bs-primary-rgb: 57, 194, 255; --bs-primary-text-emphasis: var(--f1-accent-text); --bs-primary-bg-subtle: var(--f1-tint); --bs-primary-border-subtle: rgba(57, 194, 255, 0.4); --bs-secondary: var(--f1-accent); --bs-secondary-rgb: 47, 211, 194; --bs-info: var(--f1-info); --bs-info-rgb: 90, 176, 236; /* Semantische Status — fiberONE-Töne, inkl. -rgb / -emphasis / -subtle, damit .text-bg-*, .alert-*, .text-* etc. NICHT mehr Bootstrap-Standard sind. */ --bs-success: var(--f1-success); --bs-success-rgb: 53, 201, 138; --bs-success-text-emphasis: var(--f1-success-text); --bs-success-bg-subtle: rgba(53, 201, 138, 0.12); --bs-success-border-subtle: rgba(53, 201, 138, 0.4); --bs-warning: var(--f1-warning); --bs-warning-rgb: 234, 177, 61; --bs-warning-text-emphasis: var(--f1-warning-text); --bs-warning-bg-subtle: rgba(234, 177, 61, 0.12); --bs-warning-border-subtle: rgba(234, 177, 61, 0.4); --bs-danger: var(--f1-danger); --bs-danger-rgb: 255, 93, 107; --bs-danger-text-emphasis: var(--f1-danger-text); --bs-danger-bg-subtle: rgba(255, 93, 107, 0.12); --bs-danger-border-subtle: rgba(255, 93, 107, 0.4); --bs-info-text-emphasis: var(--f1-info-text); --bs-info-bg-subtle: rgba(90, 176, 236, 0.12); --bs-info-border-subtle: rgba(90, 176, 236, 0.4); --bs-dark: var(--f1-panel); --bs-dark-rgb: 10, 17, 32; --bs-light: var(--f1-txt); --bs-light-rgb: 242, 247, 252; --bs-border-color: var(--f1-line); --bs-border-color-translucent: var(--f1-line); --bs-border-radius: 0.75rem; /* 12px — Controls */ --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 1.25rem; /* 20px — Cards */ --bs-border-radius-xl: 1.5rem; --bs-border-radius-pill: 50rem; --bs-link-color: var(--f1-link); --bs-link-color-rgb: 57, 194, 255; --bs-link-hover-color: var(--f1-link-hover); --bs-link-hover-color-rgb: 174, 228, 255; --bs-link-decoration: none; --bs-code-color: var(--f1-accent-text); --bs-font-monospace: var(--f1-mono); --bs-focus-ring-width: 2px; --bs-focus-ring-opacity: 1; --bs-focus-ring-color: var(--f1-cyan); --bs-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02); --bs-box-shadow-sm: none; --bs-box-shadow-lg: var(--f1-glow-soft); --bs-heading-color: var(--f1-txt); } ::selection { background: rgba(57, 194, 255, 0.35); } /* ------------------------------------------------------------ 3. Typografie ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .card-title, .modal-title, .offcanvas-title, .alert-heading, .popover-header { font-family: var(--f1-display); font-weight: 700; letter-spacing: 0.005em; } h1, .h1 { line-height: 1.04; } h2, .h2 { line-height: 1.12; } p, .lead { color: var(--f1-muted); } .lead { font-size: 1.125rem; font-weight: 400; } .text-body-secondary { color: var(--f1-muted) !important; } .text-body-tertiary { color: var(--f1-muted-2) !important; } /* "Lit"-Headline-Akzent: ans Netz. */ .f1-lit { color: var(--f1-lit-color); text-shadow: var(--f1-lit-shadow); } /* Mono-Eyebrow über Headlines:

…

*/ .f1-eyebrow { font-family: var(--f1-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--f1-accent-text); display: flex; align-items: center; gap: 10px; } .f1-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; } .f1-eyebrow.f1-eyebrow-accent { color: var(--f1-accent); } /* Daten/Zahlen immer tabellarisch in Mono */ .font-monospace, code, kbd, samp { font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ 4. Buttons — Pill-Form, Cyan-CTA mit Glow, Ghost-Outline ------------------------------------------------------------ */ .btn { border-radius: var(--bs-border-radius-pill); font-weight: 600; padding: 0.875rem 1.625rem; /* NICHT color/background transitionen: sonst bleiben Ghost-Buttons beim Theme-Wechsel auf den alten Farbwerten hängen (Chromium-Restyle-Bug). */ transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.2s ease; } .btn-sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; } .btn-lg { padding: 0.9375rem 1.875rem; font-size: 1rem; } .btn-primary { --bs-btn-bg: var(--f1-cyan); --bs-btn-color: var(--f1-on-brand); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--f1-cyan); --bs-btn-hover-color: var(--f1-on-brand); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--f1-cyan); --bs-btn-active-color: var(--f1-on-brand); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--f1-cyan); --bs-btn-disabled-color: var(--f1-on-brand); --bs-btn-disabled-border-color: transparent; } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--f1-glow); } .btn-primary:active { transform: translateY(0); box-shadow: none; } /* Neutraler Ghost-Button (Original .btn-ghost) — light/dark Outline */ .btn-outline-light, .btn-outline-dark { --bs-btn-color: var(--f1-txt); --bs-btn-bg: var(--f1-ghost-bg); --bs-btn-border-color: var(--f1-line-strong); --bs-btn-hover-color: var(--f1-txt); --bs-btn-hover-bg: var(--f1-ghost-hover); --bs-btn-hover-border-color: var(--f1-cyan); --bs-btn-active-color: var(--f1-txt); --bs-btn-active-bg: var(--f1-ghost-hover); --bs-btn-active-border-color: var(--f1-cyan); font-weight: 500; } /* Farbige Outline-Buttons je Semantik — Rahmen+Text in der Farbe, Füllung beim Hover. */ .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info { --bs-btn-bg: transparent; font-weight: 500; } .btn-outline-primary { --bs-btn-color: var(--f1-accent-text); --bs-btn-border-color: var(--f1-cyan); --bs-btn-hover-bg: var(--f1-cyan); --bs-btn-hover-border-color: var(--f1-cyan); --bs-btn-hover-color: var(--f1-on-brand); --bs-btn-active-bg: var(--f1-cyan); --bs-btn-active-border-color: var(--f1-cyan); --bs-btn-active-color: var(--f1-on-brand); } .btn-outline-secondary { --bs-btn-color: var(--f1-teal-text); --bs-btn-border-color: var(--f1-accent); --bs-btn-hover-bg: var(--f1-accent); --bs-btn-hover-border-color: var(--f1-accent); --bs-btn-hover-color: #042A24; --bs-btn-active-bg: var(--f1-accent); --bs-btn-active-border-color: var(--f1-accent); --bs-btn-active-color: #042A24; } .btn-outline-success { --bs-btn-color: var(--f1-success-text); --bs-btn-border-color: var(--f1-success); --bs-btn-hover-bg: var(--f1-success); --bs-btn-hover-border-color: var(--f1-success); --bs-btn-hover-color: var(--f1-on-status); --bs-btn-active-bg: var(--f1-success); --bs-btn-active-border-color: var(--f1-success); --bs-btn-active-color: var(--f1-on-status); } .btn-outline-danger { --bs-btn-color: var(--f1-danger-text); --bs-btn-border-color: var(--f1-danger); --bs-btn-hover-bg: var(--f1-danger); --bs-btn-hover-border-color: var(--f1-danger); --bs-btn-hover-color: var(--f1-on-status); --bs-btn-active-bg: var(--f1-danger); --bs-btn-active-border-color: var(--f1-danger); --bs-btn-active-color: var(--f1-on-status); } .btn-outline-warning { --bs-btn-color: var(--f1-warning-text); --bs-btn-border-color: var(--f1-warning); --bs-btn-hover-bg: var(--f1-warning); --bs-btn-hover-border-color: var(--f1-warning); --bs-btn-hover-color: var(--f1-on-status); --bs-btn-active-bg: var(--f1-warning); --bs-btn-active-border-color: var(--f1-warning); --bs-btn-active-color: var(--f1-on-status); } .btn-outline-info { --bs-btn-color: var(--f1-info-text); --bs-btn-border-color: var(--f1-info); --bs-btn-hover-bg: var(--f1-info); --bs-btn-hover-border-color: var(--f1-info); --bs-btn-hover-color: var(--f1-on-status); --bs-btn-active-bg: var(--f1-info); --bs-btn-active-border-color: var(--f1-info); --bs-btn-active-color: var(--f1-on-status); } /* Solide neutrale Buttons */ .btn-light { --bs-btn-bg: #E6EEF7; --bs-btn-border-color: transparent; --bs-btn-color: #07182A; --bs-btn-hover-bg: #DCE7F2; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #07182A; --bs-btn-active-bg: #D2DFEE; --bs-btn-active-border-color: transparent; --bs-btn-active-color: #07182A; } .btn-dark { --bs-btn-bg: var(--f1-panel-2); --bs-btn-border-color: var(--f1-line-strong); --bs-btn-color: var(--f1-txt); --bs-btn-hover-bg: var(--f1-panel); --bs-btn-hover-border-color: var(--f1-cyan); --bs-btn-hover-color: var(--f1-txt); --bs-btn-active-bg: var(--f1-panel); --bs-btn-active-border-color: var(--f1-cyan); --bs-btn-active-color: var(--f1-txt); } .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover, .btn-light:hover, .btn-dark:hover { transform: translateY(-2px); } .btn-secondary { --bs-btn-bg: var(--f1-accent); --bs-btn-color: #042A24; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--f1-accent); --bs-btn-hover-color: #042A24; --bs-btn-hover-border-color: transparent; } .btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(47, 211, 194, 0.45); } /* Solide Status-Buttons — müssen explizit gesetzt werden (kompiliertes Bootstrap verdrahtet ihre Hintergründe fest, ignoriert die --bs-*-Variablen). */ .btn-success { --bs-btn-bg: var(--f1-success); --bs-btn-border-color: transparent; --bs-btn-color: var(--f1-on-status); --bs-btn-hover-bg: var(--f1-success); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--f1-on-status); --bs-btn-active-bg: var(--f1-success); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--f1-on-status); } .btn-warning { --bs-btn-bg: var(--f1-warning); --bs-btn-border-color: transparent; --bs-btn-color: var(--f1-on-status); --bs-btn-hover-bg: var(--f1-warning); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--f1-on-status); --bs-btn-active-bg: var(--f1-warning); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--f1-on-status); } .btn-danger { --bs-btn-bg: var(--f1-danger); --bs-btn-border-color: transparent; --bs-btn-color: var(--f1-on-status); --bs-btn-hover-bg: var(--f1-danger); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--f1-on-status); --bs-btn-active-bg: var(--f1-danger); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--f1-on-status); } .btn-info { --bs-btn-bg: var(--f1-info); --bs-btn-border-color: transparent; --bs-btn-color: var(--f1-on-status); --bs-btn-hover-bg: var(--f1-info); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--f1-on-status); --bs-btn-active-bg: var(--f1-info); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--f1-on-status); } .btn-success:hover, .btn-warning:hover, .btn-danger:hover, .btn-info:hover { transform: translateY(-2px); } .btn-link { --bs-btn-color: var(--f1-link); --bs-btn-hover-color: var(--f1-link-hover); text-decoration: none; } /* ------------------------------------------------------------ 5. Cards — Panel, Hairline, 20px Radius, Hover-Lift ------------------------------------------------------------ */ .card { --bs-card-bg: var(--f1-panel); --bs-card-border-color: var(--f1-line); --bs-card-border-radius: var(--bs-border-radius-lg); --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px); --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--f1-txt); --bs-card-color: var(--f1-txt); --bs-card-spacer-y: 1.75rem; --bs-card-spacer-x: 1.75rem; transition: border-color 0.25s ease, transform 0.25s ease; } a.card:hover, .card.f1-hover:hover { border-color: var(--f1-line-strong); transform: translateY(-3px); } .card .card-title { font-family: var(--f1-display); font-weight: 700; color: var(--f1-txt); } .card .card-text { color: var(--f1-muted); font-size: 0.96875rem; } .card-header, .card-footer { border-color: var(--f1-line); } /* Hervorgehobene Karte (Original .plan.hot):
*/ .f1-card-hot { border-color: var(--f1-cyan) !important; background: linear-gradient(180deg, rgba(57, 194, 255, 0.07), var(--f1-panel) 45%) !important; } /* Verschachtelte Karte (2. Ebene) */ .f1-card-nested { --bs-card-bg: var(--f1-panel-2); } /* ------------------------------------------------------------ 6. Formulare — transluzente Felder, Cyan-Fokus ------------------------------------------------------------ */ .form-control, .form-select { background: var(--f1-translucent); border-color: var(--f1-line-strong); color: var(--f1-txt); border-radius: var(--bs-border-radius); padding: 0.875rem 1.125rem; transition: border-color 0.2s ease; } .form-control::placeholder { color: var(--f1-muted-2); } .form-control:focus, .form-select:focus { /* background: var(--f1-translucent); border-color: var(--f1-cyan); color: var(--f1-txt); box-shadow: none; */ color: var(--f1-txt); background: var(--f1-nav-bg); } .form-select { /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2339C2FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); */ /* color: var(--f1-txt); background: var(--f1-nav-bg); */ border-color: var(--f1-line-strong); color: var(--f1-txt); background: var(--f1-nav-bg); } .select2-selection--default { border-color: var(--f1-line-strong); color: var(--f1-txt); background: var(--f1-nav-bg); } /* 1. Hintergrund der geschlossenen Select-Box anpassen */ .select2-container--default .select2-search { border-color: var(--f1-line-strong); color: var(--f1-txt); background: var(--f1-nav-bg); } .select2-container--default .select2-search--dropdown { border-color: var(--f1-line-strong); color: var(--f1-txt); background: var(--f1-nav-bg); } .select2-container--default .select2-selection__rendered { /* background-color: #f0f4f8 !important; /* Gewünschte Hintergrundfarbe */ /* border: 1px solid #ccc; */ border-color: var(--f1-line-strong); color: var(--f1-txt); background: var(--f1-nav-bg); } .select2-container--default .select2-selection--single { /* background-color: #f0f4f8 !important; /* Gewünschte Hintergrundfarbe */ /* border: 1px solid #ccc; */ border-color: var(--f1-line-strong); color: var(--f1-txt); background: var(--f1-nav-bg); } /* 2. Hintergrund des geöffneten Dropdown-Menüs (Ergebnisliste) anpassen */ .select2-container--default .select2-results > .select2-results__options { /* background-color: #ff0000; */ border-color: var(--f1-line-strong); color: var(--f1-txt); background: var(--f1-nav-bg); } /* 3. Hintergrund der Option, über die man gerade mit der Maus fährt (Hover) */ .select2-container--default .select2-results__option--highlighted[aria-selected] { /* background-color: #00ff00 !important; /* Standard ist oft blau */ /* color: white; */ border-color: var(--f1-line-strong); color: var(--f1-txt); background: var(--f1-nav-bg); } .form-label { color: var(--f1-muted); font-size: 0.9375rem; } .form-text { color: var(--f1-muted-2); } .form-check-input { background-color: var(--f1-translucent); border-color: var(--f1-line-strong); } .form-check-input:checked { background-color: var(--f1-cyan); border-color: var(--f1-cyan); } .form-check-input:focus { border-color: var(--f1-cyan); box-shadow: 0 0 0 0.2rem rgba(57, 194, 255, 0.25); } .form-switch .form-check-input:checked { box-shadow: 0 0 10px rgba(57, 194, 255, 0.5); } .input-group-text { background: var(--f1-panel-2); border-color: var(--f1-line-strong); color: var(--f1-muted); font-family: var(--f1-mono); font-size: 0.8125rem; } /* ------------------------------------------------------------ 7. Badges — Mono-Kapseln ------------------------------------------------------------ */ .badge { font-family: var(--f1-mono); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.6875rem; padding: 0.375rem 0.875rem; border-radius: var(--bs-border-radius-pill); } .badge.text-bg-primary { background-color: var(--f1-cyan) !important; color: var(--f1-on-brand) !important; } /* Outline-Kapsel mit Faser-Punkt: fiberONE 1G */ .f1-badge-outline { background: rgba(57, 194, 255, 0.12); border: 1px solid rgba(57, 194, 255, 0.4); color: var(--f1-badge-text); display: inline-flex; align-items: center; gap: 8px; } .f1-badge-outline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--f1-cyan); box-shadow: 0 0 8px rgba(57, 194, 255, 0.9); } .f1-badge-accent { background: rgba(47, 211, 194, 0.12); border: 1px solid rgba(47, 211, 194, 0.42); color: var(--f1-accent); } /* ------------------------------------------------------------ 8. Navbar — geblurrt, Hairline unten ------------------------------------------------------------ */ .navbar { background: var(--f1-nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--f1-line); min-height: 68px; } .navbar-brand { font-family: var(--f1-display); font-weight: 700; font-size: 1.4375rem; letter-spacing: 0.03em; color: var(--f1-txt); } .navbar-brand b, .navbar-brand strong { color: var(--f1-cyan); font-weight: 800; } .navbar-nav .nav-link { color: var(--f1-muted); font-size: 0.9375rem; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--f1-txt); } .navbar-toggler { border-color: var(--f1-line-strong); } /* ------------------------------------------------------------ 9. Accordion — FAQ-Stil (Hairlines, Dosis, Cyan-Plus) ------------------------------------------------------------ */ .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--f1-line); --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-btn-color: var(--f1-txt); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--f1-accent-text); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-body-color: var(--f1-muted); } .accordion-item { border-left: 0; border-right: 0; } .accordion-button { font-family: var(--f1-display); font-weight: 600; font-size: 1.1875rem; padding: 1.5rem 0.25rem; box-shadow: none !important; } .accordion-button:hover { color: var(--f1-accent-text); } /* Chevron einheitlich auf Cyan einfärben (themensicher) */ .accordion-button::after, .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2339C2FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .accordion-body { padding: 0 0.25rem 1.625rem; max-width: 64ch; } /* ------------------------------------------------------------ 10. Modal — Panel + starke Hairline (Glow-Ring optional) ------------------------------------------------------------ */ .modal-content { background: var(--f1-panel); border: 1px solid var(--f1-line-strong); border-radius: 1.375rem; color: var(--f1-txt); } .modal-backdrop { --bs-backdrop-bg: var(--f1-backdrop); --bs-backdrop-opacity: var(--f1-backdrop-opacity); } .modal-header, .modal-footer { border-color: var(--f1-line); } .modal-title { font-family: var(--f1-display); font-weight: 700; } /* btn-close: Default-Theme ist Dark → helles Glyph; in Light zurücksetzen */ .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } [data-bs-theme="light"] .btn-close, :root:has(#f1-th-light:checked) .btn-close { filter: none; } @media (prefers-color-scheme: light) { :root:not([data-bs-theme]):not(:has(#f1-th-dark:checked)):not(:has(#f1-th-light:checked)) .btn-close { filter: none; } } /* Umlaufender Glow-Rand — NUR für EIN Modal pro Seite verwenden (Signature!) */ @property --f1-ga { syntax: ""; inherits: true; initial-value: 0deg; } @keyframes f1-ga-spin { to { --f1-ga: 360deg; } } .f1-glow-run { --f1-ga: 0deg; border-color: transparent !important; background: linear-gradient(var(--f1-panel), var(--f1-panel)) padding-box, conic-gradient(from var(--f1-ga), rgba(142, 205, 255, 0.16) 0% 70%, rgba(57, 194, 255, 0.75) 86%, #AEE4FF 91%, rgba(57, 194, 255, 0.75) 96%, rgba(142, 205, 255, 0.16) 100%) border-box !important; animation: f1-ga-spin 5s linear infinite; } /* ------------------------------------------------------------ 11. Weitere Komponenten ------------------------------------------------------------ */ /* Tabellen: Daten in Mono, Hairlines */ .table { --bs-table-bg: transparent; --bs-table-border-color: var(--f1-line); --bs-table-color: var(--f1-muted); --bs-table-striped-bg: var(--f1-translucent); --bs-table-striped-color: var(--f1-txt); --bs-table-hover-bg: var(--f1-hover-row); --bs-table-hover-color: var(--f1-txt); } .table thead th { font-family: var(--f1-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f1-muted-2); font-weight: 500; } /* List group */ .list-group { --bs-list-group-bg: var(--f1-panel); --bs-list-group-border-color: var(--f1-line); --bs-list-group-color: var(--f1-muted); --bs-list-group-action-hover-bg: var(--f1-ghost-hover); --bs-list-group-action-hover-color: var(--f1-txt); --bs-list-group-active-bg: rgba(57, 194, 255, 0.16); --bs-list-group-active-border-color: var(--f1-cyan); --bs-list-group-active-color: var(--f1-accent-text); } /* Alerts */ .alert-primary { --bs-alert-bg: var(--f1-tint); --bs-alert-border-color: rgba(57, 194, 255, 0.4); --bs-alert-color: var(--f1-accent-text); } .alert-warning { --bs-alert-bg: var(--f1-translucent); --bs-alert-border-color: var(--f1-line-strong); --bs-alert-color: var(--f1-muted); } /* Progress — Faser-Balken */ .progress { --bs-progress-bg: var(--f1-translucent); --bs-progress-height: 10px; --bs-progress-border-radius: 50rem; --bs-progress-bar-bg: var(--f1-cyan); } .progress-bar { background: linear-gradient(90deg, var(--f1-cyan-deep), var(--f1-cyan)); box-shadow: 0 0 14px rgba(57, 194, 255, 0.5); } /* Pagination */ .pagination { --bs-pagination-bg: var(--f1-ghost-bg); --bs-pagination-border-color: var(--f1-line-strong); --bs-pagination-color: var(--f1-muted); --bs-pagination-hover-bg: var(--f1-ghost-hover); --bs-pagination-hover-color: var(--f1-txt); --bs-pagination-hover-border-color: var(--f1-cyan); --bs-pagination-active-bg: rgba(57, 194, 255, 0.16); --bs-pagination-active-border-color: var(--f1-cyan); --bs-pagination-active-color: var(--f1-accent-text); --bs-pagination-focus-box-shadow: none; } /* Nav-Pills → Speed-Pills */ .nav-pills { --bs-nav-pills-link-active-bg: rgba(57, 194, 255, 0.16); --bs-nav-pills-link-active-color: var(--f1-accent-text); --bs-nav-link-color: var(--f1-muted); --bs-nav-link-hover-color: var(--f1-txt); } .nav-pills .nav-link { font-family: var(--f1-mono); font-size: 0.8125rem; border: 1px solid var(--f1-line-strong); border-radius: 50rem; padding: 0.4375rem 1rem; margin-right: 0.5rem; } .nav-pills .nav-link.active { border-color: var(--f1-cyan); } /* Tooltips & Popovers */ .tooltip { --bs-tooltip-bg: var(--f1-panel-2); --bs-tooltip-color: var(--f1-txt); } .popover { --bs-popover-bg: var(--f1-panel-2); --bs-popover-border-color: var(--f1-line-strong); --bs-popover-header-bg: transparent; --bs-popover-header-color: var(--f1-txt); --bs-popover-body-color: var(--f1-muted); } /* Dropdown */ .dropdown-menu { --bs-dropdown-bg: var(--f1-panel-2); --bs-dropdown-border-color: var(--f1-line-strong); --bs-dropdown-color: var(--f1-muted); --bs-dropdown-link-color: var(--f1-muted); --bs-dropdown-link-hover-bg: var(--f1-ghost-hover); --bs-dropdown-link-hover-color: var(--f1-txt); --bs-dropdown-link-active-bg: rgba(57, 194, 255, 0.16); --bs-dropdown-link-active-color: var(--f1-accent-text); --bs-dropdown-border-radius: var(--bs-border-radius); } /* Toasts */ .toast { --bs-toast-bg: var(--f1-panel-2); --bs-toast-border-color: var(--f1-line-strong); --bs-toast-color: var(--f1-muted); --bs-toast-header-bg: transparent; --bs-toast-header-color: var(--f1-txt); --bs-toast-header-border-color: var(--f1-line); } /* hr */ hr { border-color: var(--f1-line-strong); opacity: 1; } /* Scrollbar (WebKit) */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--f1-bg); } ::-webkit-scrollbar-thumb { background: var(--f1-line-strong); border-radius: 50rem; border: 3px solid var(--f1-bg); } /* Theme-Umschalter (Segmented Control) — optional. Button- ODER (no-JS) Label-Variante. */ .f1-theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--f1-line-strong); border-radius: 50rem; background: var(--f1-ghost-bg); } .f1-theme-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .f1-theme-switch button, .f1-theme-switch label { border: 0; background: transparent; cursor: pointer; width: 34px; height: 30px; border-radius: 50rem; line-height: 1; margin: 0; color: var(--f1-muted); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .f1-theme-switch button:hover, .f1-theme-switch label:hover { color: var(--f1-txt); } .f1-theme-switch button[aria-pressed="true"], .f1-theme-switch input:checked + label { background: rgba(57, 194, 255, 0.16); color: var(--f1-accent-text); } .f1-theme-switch svg { width: 16px; height: 16px; } /* ------------------------------------------------------------ 13. fiberONE Farb-Utilities (eigene Klassen) Explizit nutzbar — unabhängig von Bootstraps primary/secondary. Reagieren auf Hell/Dunkel, wo es sinnvoll ist. ------------------------------------------------------------ */ /* Textfarben */ .text-f1-cyan { color: var(--f1-cyan) !important; } .text-f1-accent { color: var(--f1-accent) !important; } .text-f1-beam { color: var(--f1-beam) !important; } .text-f1-strong { color: var(--f1-txt) !important; } .text-f1-muted { color: var(--f1-muted) !important; } .text-f1-muted-2 { color: var(--f1-muted-2) !important; } /* kontraststark auf Hell automatisch tiefer */ .text-f1-brand { color: var(--f1-accent-text) !important; } .text-f1-success { color: var(--f1-success-text) !important; } .text-f1-warning { color: var(--f1-warning-text) !important; } .text-f1-danger { color: var(--f1-danger-text) !important; } .text-f1-info { color: var(--f1-info-text) !important; } .text-f1-magenta { color: var(--f1-magenta) !important; } .text-f1-red { color: var(--f1-red) !important; } /* Hintergrundflächen */ .bg-f1-page { background-color: var(--f1-bg) !important; } .bg-f1-panel { background-color: var(--f1-panel) !important; } .bg-f1-panel-2 { background-color: var(--f1-panel-2) !important; } .bg-f1-cyan { background-color: var(--f1-cyan) !important; color: var(--f1-on-brand); } .bg-f1-accent { background-color: var(--f1-accent) !important; color: #042A24; } .bg-f1-tint { background-color: var(--f1-tint) !important; } /* Rahmen / Hairlines */ .border-f1 { border: 1px solid var(--f1-line) !important; } .border-f1-strong { border: 1px solid var(--f1-line-strong) !important; } .border-f1-cyan { border: 1px solid var(--f1-cyan) !important; } /* Surface-Helfer: fertige Panel-Fläche (Bg + Hairline + Radius) */ .f1-surface { background: var(--f1-panel); border: 1px solid var(--f1-line); border-radius: var(--bs-border-radius-lg); color: var(--f1-txt); } .f1-surface-2 { background: var(--f1-panel-2); border: 1px solid var(--f1-line); border-radius: var(--bs-border-radius-lg); color: var(--f1-txt); } /* Glow-Helfer */ .f1-glow { box-shadow: var(--f1-glow); } /* ------------------------------------------------------------ 14. Reduced Motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .btn, .card { transition: none; } .btn-primary:hover, .btn-secondary:hover { transform: none; } .f1-glow-run { animation: none; } }