/* input(1800,15): run-time error CSS1019: Unexpected token, found 'selector(' input(1800,43): run-time error CSS1025: Expected comma or open brace, found ')' input(1853,15): run-time error CSS1019: Unexpected token, found 'selector(' input(1853,43): run-time error CSS1025: Expected comma or open brace, found ')' input(1887,15): run-time error CSS1019: Unexpected token, found 'selector(' input(1887,43): run-time error CSS1025: Expected comma or open brace, found ')' input(1945,15): run-time error CSS1019: Unexpected token, found 'selector(' input(1945,43): run-time error CSS1025: Expected comma or open brace, found ')' */ /* ============================================================ Design Theme — Bootstrap 5 Override Layer Loaded AFTER bootstrap.min.css, BEFORE site.css. Overrides Bootstrap defaults with the design convention. Original Bootstrap classes and utilities remain functional. ============================================================ */ /* ----- Fonts (self-hosted) ----- */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/dm-sans-latin.woff2?v=QyNMTAkUEHr_cFXhC2j7BQbJCEM') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/dm-sans-latin-ext.woff2?v=H2PoLy693DtyCKScC1OWzf_iP8c') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/heebo-latin.woff2?v=BIVG0V_--dpapL8YOTCZiIHSAu0') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/heebo-latin-ext.woff2?v=ueincPhTmRjQvXjLKtSZ7T_sW7g') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Reserve scrollbar gutter so closing modals / offcanvas doesn't cause a visual width shift of the fixed navbar. */ html { scrollbar-gutter: stable; } /* Bootstrap adds overflow:hidden + padding-right to when a modal opens. With scrollbar-gutter:stable on the gutter is already reserved, so the extra padding-right creates a double gap. Also lock overflow so scroll events don't fall through to the page. */ html:has(body.modal-open) { overflow: hidden; } body.modal-open { padding-right: 0 !important; } /* ----- Design Tokens ----- */ :root { /* Brand / Anthrazit-Teal Scale */ --color-brand-900: #19272B; --color-brand-800: #20282D; --color-brand-700: #263037; --color-brand-600: #22302D; /* Sage */ --color-sage-300: #D5DEDE; --color-sage-200: #EFEFEF; /* Neutrals */ --color-neutral-100: #F7F7F7; /* Text */ --color-text-primary: #263037; --color-text-body: #54595F; --color-text-secondary: #7A7A7A; --color-text-muted: #85979B; --color-text-muted-light: #BCC3C5; --color-text-disabled: #CCCCCC; /* Borders */ --color-border-light: #CCCCCC; --color-border-subtle: rgba(255, 255, 255, 0.22); /* Overlays */ --color-overlay-dark: rgba(0, 0, 0, 0.5); --color-overlay-light: rgba(255, 255, 255, 0.2); --color-overlay-glass: rgba(239, 239, 239, 0.37); /* ----- Bootstrap Root Overrides ----- */ --bs-primary: #D5DEDE; --bs-primary-rgb: 213, 222, 222; --bs-secondary: #20282D; --bs-secondary-rgb: 32, 40, 45; --bs-light: #F7F7F7; --bs-light-rgb: 247, 247, 247; --bs-dark: #19272B; --bs-dark-rgb: 25, 39, 43; --bs-body-font-family: 'Heebo', sans-serif; --bs-body-font-size: 1rem; --bs-body-color: #54595F; --bs-body-color-rgb: 84, 89, 95; --bs-body-bg: #FFFFFF; --bs-heading-color: #263037; --bs-link-color: #20282D; --bs-link-color-rgb: 32, 40, 45; --bs-link-hover-color: #19272B; --bs-link-hover-color-rgb: 25, 39, 43; --bs-border-color: #CCCCCC; } /* ----- Dark Mode Tokens ----- */ [data-bs-theme="dark"] { --color-text-primary: #E6E9EC; --color-text-body: #C8CDD1; --color-text-secondary: #9BA3AA; --color-text-muted: #7A8289; --color-text-muted-light: #5A6167; --color-text-disabled: #4A5056; --color-border-light: #2E3740; --color-border-subtle: rgba(255, 255, 255, 0.08); --color-neutral-100: #1A2126; --color-sage-300: #3A4650; --color-sage-200: #2E3740; --bs-body-bg: #14191D; --bs-body-color: #C8CDD1; --bs-body-color-rgb: 200, 205, 209; --bs-heading-color: #E6E9EC; --bs-border-color: #2E3740; --bs-link-color: #E6E9EC; --bs-link-color-rgb: 230, 233, 236; --bs-link-hover-color: #FFFFFF; --bs-link-hover-color-rgb: 255, 255, 255; } /* =========================================================== TYPOGRAPHY =========================================================== */ h1, h2, h3, .h1, .h2, .h3 { font-family: 'DM Sans', sans-serif; font-weight: 400; line-height: 1.2; } h4, h5, h6, .h4, .h5, .h6 { font-family: 'DM Sans', sans-serif; } /* Let headings inherit text color in dark/colored sections */ .text-white, .text-light { --bs-heading-color: inherit; } h1, .h1 { font-size: 2.9375rem; } h2, .h2 { font-size: 2.3125rem; } h3, .h3 { font-size: 1.5625rem; } h4, .h4 { font-size: 1.25rem; font-weight: 700; } .text-muted { color: var(--color-text-secondary) !important; } /* =========================================================== BUTTONS =========================================================== */ .btn { font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; font-weight: 400; border-radius: var(--bs-border-radius-pill, 50px); padding: 0.75rem 1.75rem; transition: background-color 0.2s ease, background-image 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; } .btn-sm { padding: 0.5rem 1.25rem; font-size: 0.8125rem; } .btn-lg { padding: 0.9375rem 2.1875rem; font-size: 1rem; } /* ----- Shared 3D depth + lift (all buttons except .btn-link) ----- */ .btn:not(.btn-link) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.08), 0 2px 4px rgba(25,39,43,0.15) !important; } .btn:not(.btn-link):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.12), 0 4px 10px rgba(25,39,43,0.25) !important; transform: translateY(-1px); } .btn:not(.btn-link):active, .btn:not(.btn-link).active, .btn:not(.btn-link):focus:active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(25,39,43,0.12) !important; transform: translateY(0); } /* Gradient overlay on solid (non-outline, non-link) variants */ .btn-primary, .btn-secondary, .btn-dark, .btn-light, .btn-danger, .btn-warning, .btn-info { background-image: linear-gradient(to bottom, rgba(255,255,255,0.22) 0%, rgba(0,0,0,0.08) 100%); } /* Success — inverted: starts with the darker "pressed-in" gradient */ .btn-success { background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.18) 100%); } .btn-dark:active, .btn-dark.active, .btn-light:active, .btn-light.active { background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(255,255,255,0.05) 100%); } /* Outline variants: no overlay at rest (transparent bg), but apply the same 3D gradient once filled on hover/active */ .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-light:hover { background-image: linear-gradient(to bottom, rgba(255,255,255,0.22) 0%, rgba(0,0,0,0.08) 100%); } .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-dark:active, .btn-outline-dark.active, .btn-outline-light:active, .btn-outline-light.active { background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(255,255,255,0.05) 100%); } /* Primary (Dark → Sage on hover) */ .btn-primary { --bs-btn-bg: var(--color-brand-800); --bs-btn-border-color: var(--color-brand-800); --bs-btn-color: #fff; --bs-btn-hover-bg: #B0BBBB; --bs-btn-hover-border-color: #A1ACAC; --bs-btn-hover-color: var(--color-text-primary); --bs-btn-active-bg: #A1ACAC; --bs-btn-active-border-color: #94A0A0; --bs-btn-active-color: var(--color-text-primary); --bs-btn-disabled-bg: var(--color-brand-800); --bs-btn-disabled-border-color: var(--color-brand-800); --bs-btn-disabled-color: #fff; } /* Dark-on-hover group — secondary switches from sage to dark, the others stay dark */ .btn-secondary:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover { background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.18) 100%); } /* Success — on hover goes to the lighter "raised" gradient */ .btn-success:hover { background-image: linear-gradient(to bottom, rgba(255,255,255,0.22) 0%, rgba(0,0,0,0.08) 100%); } /* Primary: dark → sage on hover, so keep a light gradient overlay */ .btn-primary:hover { background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0.08) 100%); } .btn-primary:active, .btn-primary.active { background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(255,255,255,0.05) 100%); } .btn-secondary:active, .btn-secondary.active, .btn-success:active, .btn-success.active, .btn-danger:active, .btn-danger.active, .btn-warning:active, .btn-warning.active, .btn-info:active, .btn-info.active { background-image: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.05) 100%); } .btn-outline-primary { --bs-btn-color: var(--color-text-primary); --bs-btn-border-color: var(--color-sage-300); --bs-btn-hover-bg: var(--color-sage-300); --bs-btn-hover-border-color: var(--color-sage-300); --bs-btn-hover-color: var(--color-text-primary); --bs-btn-active-bg: var(--color-sage-200); --bs-btn-active-border-color: var(--color-sage-200); --bs-btn-active-color: var(--color-text-primary); } /* Secondary (Sage → Dark on hover) */ .btn-secondary { --bs-btn-bg: #B0BBBB; --bs-btn-border-color: #A1ACAC; --bs-btn-color: var(--color-text-primary); --bs-btn-hover-bg: var(--color-brand-800); --bs-btn-hover-border-color: var(--color-brand-900); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--color-brand-900); --bs-btn-active-border-color: var(--color-brand-900); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--color-sage-300); --bs-btn-disabled-border-color: var(--color-sage-300); --bs-btn-disabled-color: var(--color-text-primary); } .btn-outline-secondary { --bs-btn-color: var(--color-text-secondary); --bs-btn-border-color: var(--color-border-light); --bs-btn-hover-bg: var(--color-sage-300); --bs-btn-hover-border-color: var(--color-sage-300); --bs-btn-hover-color: var(--color-text-primary); } /* Dark */ .btn-dark { --bs-btn-bg: var(--color-brand-800); --bs-btn-border-color: var(--color-brand-800); --bs-btn-hover-bg: var(--color-brand-900); --bs-btn-hover-border-color: var(--color-brand-900); } /* Success — same brand-800 at rest & hover; only the gradient flips for a subtle "pressed → raised" effect without pushing the teal undertone of brand-900 */ .btn-success { --bs-btn-bg: var(--color-brand-800); --bs-btn-border-color: var(--color-brand-800); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--color-brand-800); --bs-btn-hover-border-color: var(--color-brand-800); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--color-brand-900); --bs-btn-active-border-color: var(--color-brand-900); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--color-brand-800); --bs-btn-disabled-border-color: var(--color-brand-800); --bs-btn-disabled-color: #fff; } /* Danger / Warning / Info — dark brand look */ .btn-danger, .btn-warning, .btn-info { --bs-btn-bg: var(--color-brand-800); --bs-btn-border-color: var(--color-brand-800); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--color-brand-900); --bs-btn-hover-border-color: var(--color-brand-900); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--color-brand-900); --bs-btn-active-border-color: var(--color-brand-900); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--color-brand-800); --bs-btn-disabled-border-color: var(--color-brand-800); --bs-btn-disabled-color: #fff; } .btn-outline-dark { --bs-btn-color: var(--color-brand-700); --bs-btn-border-color: var(--color-brand-700); --bs-btn-hover-bg: var(--color-brand-800); --bs-btn-hover-border-color: var(--color-brand-800); --bs-btn-hover-color: #fff; } /* Light */ .btn-light { --bs-btn-bg: var(--color-neutral-100); --bs-btn-border-color: var(--color-neutral-100); --bs-btn-color: var(--color-text-primary); --bs-btn-hover-bg: var(--color-sage-200); --bs-btn-hover-border-color: var(--color-sage-200); } /* Link */ .btn-link { --bs-btn-color: var(--color-brand-800); --bs-btn-hover-color: var(--color-brand-900); text-decoration: none; } .btn-link:hover { text-decoration: underline; } /* Dark mode: brand-800 link color is too dark on dark surfaces (invisible). Fall back to the light link tokens defined for the dark theme. */ [data-bs-theme="dark"] .btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); } /* =========================================================== ALERTS =========================================================== */ /* Info alert: sage palette instead of Bootstrap blue, matches branding */ .alert-info { --bs-alert-color: var(--color-text-primary); --bs-alert-bg: var(--color-sage-200); --bs-alert-border-color: var(--color-sage-300); --bs-alert-link-color: var(--color-brand-800); } /* Nur echte Text-Links im Info-Alert branden/unterstreichen — Buttons (a.btn) behalten ihr eigenes Button-Styling (kein Unterstrich, eigene Textfarbe). */ .alert-info a:not(.btn) { color: var(--color-brand-800); text-decoration: underline; } .alert-info a:not(.btn):hover { color: var(--color-brand-900); } /* =========================================================== ACCORDION =========================================================== */ /* Bootstrap bakes --bs-accordion-active-bg/-color from the SCSS $primary at compile time, so overriding --bs-primary at runtime doesn't recolor the active accordion button — it stays Bootstrap blue. Force the brand palette. */ .accordion { --bs-accordion-active-color: var(--color-brand-800); --bs-accordion-active-bg: color-mix(in srgb, var(--color-brand-800) 10%, white); --bs-accordion-btn-focus-border-color: var(--color-brand-700); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(38, 48, 55, 0.15); } /* Bootstrap's accordion chevron is an inline SVG with the active-color baked into a `stroke='%230c63e4'` URL — recolor by overriding the icon URL. */ .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' fill='%2320282D'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } [data-bs-theme="dark"] .accordion { --bs-accordion-active-color: var(--color-text-primary); --bs-accordion-active-bg: rgba(230, 233, 236, 0.08); } [data-bs-theme="dark"] .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' fill='%23E6E9EC'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* =========================================================== FORMS =========================================================== */ .form-control, .form-select { color: var(--color-text-body); border-color: var(--color-border-light); } .form-control:focus, .form-select:focus { border-color: var(--color-brand-700); box-shadow: 0 0 0 0.2rem rgba(38, 48, 55, 0.15); } .form-control::placeholder { color: var(--color-text-disabled); } .form-label { color: var(--color-text-primary); font-weight: 500; } .form-check-input:checked { background-color: var(--color-brand-800); border-color: var(--color-brand-800); } .form-check-input:focus { border-color: var(--color-brand-700); box-shadow: 0 0 0 0.2rem rgba(38, 48, 55, 0.15); } .form-switch .form-check-input:checked { background-color: var(--color-brand-800); border-color: var(--color-brand-800); } /* =========================================================== CARDS =========================================================== */ .card { border-color: var(--color-border-light); border-radius: var(--bs-border-radius-lg, 0.5rem); } .card-header { background-color: var(--color-neutral-100); border-bottom-color: var(--color-border-light); } .card-footer { border-top-color: var(--color-border-light); } /* =========================================================== NAVBAR =========================================================== */ .navbar { font-family: 'DM Sans', sans-serif; font-size: 1rem; } .navbar-brand { font-family: 'DM Sans', sans-serif; font-weight: 700; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto; } body > header { /* No fixed positioning here: iOS Safari and Chrome Android visibly stutter position:fixed elements while the URL bar slides in/out, so scrolling up on every public page caused the nav to judder. The inner .public-static-nav is already position: sticky; top: 0 and pins itself smoothly via the browser compositor. */ position: relative; z-index: 1030; } header > .navbar { background-color: var(--color-brand-800); border-bottom-color: transparent !important; transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; --bs-navbar-color: rgba(255, 255, 255, 0.85); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; --bs-navbar-padding-y: 1rem; --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Transparent state — applied via JS on pages with hero */ header > .navbar.navbar-transparent { background-color: transparent; border-bottom-color: transparent !important; box-shadow: none !important; } header > .navbar hr { border-color: var(--color-border-subtle); } /* =========================================================== DASHBOARD LAYOUT (Sidebar, Topbar, Footer) =========================================================== */ .app-sidebar { width: 220px; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } /* Collapsed: sidebar slides out completely, content expands. !important noetig: das Markup traegt die Bootstrap-Utilities px-2 und border-end, die selbst !important sind — ohne Gegen-!important behaelt die unsichtbare Sidebar 1rem Padding + 1px Border Layout-Breite und schiebt den Content nach rechts (asymmetrischer Viewport-Abstand). */ html.sidebar-collapsed .app-sidebar { width: 0; min-width: 0; padding-left: 0 !important; padding-right: 0 !important; border-right-color: transparent !important; border-right-width: 0 !important; visibility: hidden; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; } html.sidebar-collapsed .app-sidebar > * { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .app-sidebar > * { transition: opacity 0.2s ease 0.1s; } /* Topbar toggle icon: rotates subtly when collapsed for visual feedback */ #desktopSidebarToggle { transition: transform 0.3s ease, color 0.2s ease; } html.sidebar-collapsed #desktopSidebarToggle { transform: rotate(180deg); } .app-sidebar .sidebar-brand { padding: .5rem .75rem 1rem; display: flex; align-items: center; gap: .5rem; font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--color-text-primary); text-decoration: none; flex-shrink: 0; } .app-sidebar .sidebar-brand img { max-height: 40px; } .app-sidebar .sidebar-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .app-sidebar .sidebar-footer { flex-shrink: 0; padding-top: .75rem; border-top: 1px solid var(--color-border-light); margin-top: .5rem; } .app-sidebar .nav-link { padding: .3rem .75rem; color: #495057; font-size: .85rem; } .app-sidebar .nav-link:hover { background: #e9ecef; border-radius: .25rem; } .app-sidebar .nav-link.active { color: var(--color-brand-800); font-weight: 500; background: color-mix(in srgb, var(--color-brand-800) 10%, white); border-radius: .25rem; } .sidebar-heading { font-size: .65rem; letter-spacing: .05em; } .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.5rem .75rem; } .app-topbar .topbar-actions { display: flex; align-items: center; gap: 1rem; margin-left: auto; } .app-topbar .sidebar-toggle, .app-topbar .topbar-icon-link { background: transparent; border: 0; padding: .25rem; color: var(--color-text-secondary); font-size: 1rem; display: inline-flex; align-items: center; transition: opacity 0.2s ease, color 0.2s ease; } .app-topbar .sidebar-toggle { opacity: 0.55; } /* Nur das Icon dimmen, nie das Unread-Badge, das im selben Link steckt */ .app-topbar .topbar-icon-link > i { opacity: 0.55; transition: opacity 0.2s ease; } .app-topbar .sidebar-toggle:hover, .app-topbar .topbar-icon-link:hover { opacity: 1; color: var(--color-text-primary); } .app-topbar .topbar-icon-link:hover > i { opacity: 1; } .app-topbar .sidebar-toggle { font-size: 1.9rem; opacity: 0.75; } .app-topbar #desktopSidebarToggle i { transition: transform 0.2s ease; } html:not(.sidebar-collapsed) .app-topbar #desktopSidebarToggle i { transform: rotate(90deg); } .app-topbar-divider, .app-footer-divider { margin: 0 1.5rem; border-color: var(--color-border-light); opacity: 1; } .app-footer { padding: .75rem 1.5rem 1rem; background-color: transparent; color: var(--color-text-secondary); font-family: 'DM Sans', sans-serif; --bs-heading-color: var(--color-text-primary); } .app-footer a { color: var(--color-text-secondary); } .app-footer a:hover { color: var(--color-text-primary); } /* =========================================================== SITE FOOTER =========================================================== */ footer { background-color: var(--color-brand-900); color: #fff; --bs-heading-color: #fff; } footer h6 { color: var(--color-text-muted); /* #85979B */ } footer a { color: #fff; } footer a:hover { color: rgba(255, 255, 255, 0.7); } /* Bottom bar (after hr): muted */ footer hr ~ * { color: var(--color-text-muted); /* #85979B */ } footer hr ~ * a { color: var(--color-text-muted); } footer hr ~ * a:hover { color: #fff; } footer hr { border-color: var(--color-border-subtle); } footer .dropdown-menu { --bs-dropdown-bg: var(--color-brand-800); --bs-dropdown-color: var(--color-text-muted-light); --bs-dropdown-link-color: var(--color-text-muted-light); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.1); --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--color-brand-700); --bs-dropdown-border-color: var(--color-border-subtle); } /* =========================================================== DROPDOWNS =========================================================== */ .dropdown-menu { border-color: var(--color-border-light); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08); } /* Scrollbar track inside dropdowns: fill with menu bg instead of transparent, otherwise the rounded corners show the page background through the scrollbar. */ .dropdown-menu::-webkit-scrollbar-track, .dropdown-menu ::-webkit-scrollbar-track, .dropdown-menu::-webkit-scrollbar-track-piece, .dropdown-menu ::-webkit-scrollbar-track-piece, .dropdown-menu::-webkit-scrollbar-corner, .dropdown-menu ::-webkit-scrollbar-corner { background-color: var(--bs-dropdown-bg); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--color-neutral-100); color: var(--color-text-primary); } .dropdown-item.active, .dropdown-item:active { background-color: var(--color-brand-800); color: #fff; } /* =========================================================== TABLES =========================================================== */ .table { color: var(--color-text-body); } .table > :not(caption) > * > * { border-bottom-color: var(--color-border-light); } .table > thead { color: var(--color-text-primary); } /* Long price lists scroll inside their own box instead of stretching the page; the header stays pinned while the rows scroll underneath. The th background must be opaque (sections using this sit on --color-sage-200) or scrolled rows shine through the sticky header. */ .price-table-scroll { max-height: min(60vh, 560px); overflow-y: auto; } .price-table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--color-sage-200); /* Sticky cells drop out of the table's border layout, so the head/body divider is redrawn as a shadow that scrolls with the header. */ border-bottom: 0; box-shadow: inset 0 -1px 0 var(--color-border-light); } /* =========================================================== PAGINATION =========================================================== */ .page-link { color: var(--color-brand-800); border-color: var(--color-border-light); } .page-link:hover { color: var(--color-brand-900); background-color: var(--color-neutral-100); border-color: var(--color-border-light); } .page-item.active .page-link { background-color: var(--color-brand-800); border-color: var(--color-brand-800); } /* Dark-mode override: the light-mode rules above paint the text in --color-brand-800 (#20282D), which is nearly the body background in dark mode and renders the inactive pager numbers invisible. Shift inactive text to the readable body/primary tokens; the .active item keeps its light-mode treatment because the dark pill on the dark page still reads as "selected". */ [data-bs-theme="dark"] .page-link { color: var(--color-text-body); } [data-bs-theme="dark"] .page-link:hover { color: var(--color-text-primary); background-color: var(--color-neutral-100); } /* =========================================================== NAV TABS & PILLS =========================================================== */ .nav-tabs .nav-link, .nav-pills .nav-link { color: var(--color-brand-800); } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus, .nav-pills .nav-link:hover, .nav-pills .nav-link:focus { color: var(--color-brand-900); } /* ---- 3D nav-tabs ---- */ .nav-tabs { --bs-nav-tabs-border-color: var(--color-border-light); } .nav-tabs .nav-link { border: 1px solid transparent; border-radius: .5rem .5rem 0 0; transition: background-color 0.2s ease, background-image 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .nav-tabs .nav-link:hover:not(.active):not(.disabled) { background-color: color-mix(in srgb, var(--bs-primary) 20%, transparent); border-color: transparent; } .nav-tabs .nav-link.active { position: relative; z-index: 1; color: var(--color-text-primary); background-color: var(--bs-body-bg); border-color: var(--color-border-light) var(--color-border-light) var(--bs-body-bg); background-image: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 45%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 -1px 3px rgba(25,39,43,0.04); } .nav-pills .nav-link { transition: background-color 0.2s ease, background-image 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--bs-primary); color: var(--color-text-primary); font-weight: 500; background-image: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.08) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.1), 0 2px 4px rgba(25,39,43,0.15); } /* =========================================================== AREA SWITCHER (Sidebar: Mein Bereich / Admin / Support) =========================================================== */ .area-switcher { font-size: 0.8rem; } .area-switcher .area-switcher-tab { color: var(--color-text-secondary); transition: background-color 0.2s ease, background-image 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .area-switcher .area-switcher-tab:hover { color: var(--color-text-primary); } .area-switcher .area-switcher-tab.active { background-color: var(--bs-primary); color: var(--color-text-primary); font-weight: 600; background-image: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, rgba(0,0,0,0.08) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.1), 0 2px 4px rgba(25,39,43,0.15); } /* =========================================================== PRICING PLANS — card grid with featured center =========================================================== */ /* Pricing switcher tabs */ .pricing-switcher { background-color: var(--color-neutral-100); font-size: 0.9rem; } .pricing-switcher-tab { border: none; background: transparent; padding: 0.5rem 1.5rem; border-radius: 0.25rem; color: var(--color-text-secondary); font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .pricing-switcher-tab:hover { color: var(--color-text-primary); } .pricing-switcher-tab.active { background-color: #fff; color: var(--color-brand-900); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .plan-header-free { background-color: transparent; color: var(--color-brand-800); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .plan-header-free h3 { color: var(--color-brand-800); } .plan-header-default { background-color: var(--color-sage-300); color: var(--color-brand-800); } .plan-header-default h3 { color: var(--color-brand-800); } /* Package cards: gradient step from white/dark-bg (smallest) to sage (largest). The card sets --pkg-t (0 .. 1) inline; header and button share the same ramp. */ .plan-card-package { --pkg-header-start: #FFFFFF; } [data-bs-theme="dark"] .plan-card-package { --pkg-header-start: var(--color-neutral-100); } .plan-header-package { background-color: color-mix(in srgb, var(--pkg-header-start, #FFFFFF) calc((1 - var(--pkg-t, 1)) * 100%), var(--color-sage-300)); color: var(--color-brand-800); } .plan-header-package h3 { color: var(--color-brand-800); } /* Package action button: same ramp as header (white → sage), subtle sage border, consistent dark text so every step stays legible. */ .btn-package { background-color: color-mix(in srgb, var(--pkg-header-start, #FFFFFF) calc((1 - var(--pkg-t, 1)) * 100%), var(--color-sage-300)); border-color: var(--color-sage-300); color: var(--color-brand-800); transition: filter 0.15s ease, box-shadow 0.15s ease; } .btn-package:hover, .btn-package:focus-visible { filter: brightness(0.94); color: var(--color-brand-800); border-color: var(--color-sage-300); } .btn-package.disabled, .btn-package:disabled { opacity: 0.6; } /* Dark mode: the ramp (#1A2126 → #3A4650) is dark end-to-end, so the dark brand-800 label loses contrast — switch the button text to the light foreground (matches the package header text above). The ramp background itself already adapts via --pkg-header-start on `.plan-card-package`. */ [data-bs-theme="dark"] .btn-package, [data-bs-theme="dark"] .btn-package:hover, [data-bs-theme="dark"] .btn-package:focus-visible { color: var(--color-text-primary); } .plan-header-featured { background-color: var(--color-brand-800); color: var(--color-sage-300); } .plan-header-featured h3 { color: var(--color-sage-300); } .plan-header-featured .btn { background-color: var(--color-sage-300); color: var(--color-brand-800); border-color: var(--color-sage-300); } .plan-header-featured .btn:hover { background-color: #c5d0d0; color: var(--color-brand-800); } .plan-header-featured .btn:disabled { background-color: var(--color-sage-300); color: var(--color-brand-800); opacity: 0.6; } /* Dark mode plan headers — readable titles + clear background differentiation between free / default / featured (mirrors the light-mode contrast pattern). Selectors include `.card-header` to outrank the generic `[data-bs-theme="dark"] .card-header` rule defined further below. */ [data-bs-theme="dark"] .card-header.plan-header-free { background-color: transparent; color: var(--color-text-primary); border-bottom-color: var(--color-border-light); } [data-bs-theme="dark"] .card-header.plan-header-free h3 { color: var(--color-text-primary); } [data-bs-theme="dark"] .card-header.plan-header-default { background-color: var(--color-sage-300); color: var(--color-text-primary); } [data-bs-theme="dark"] .card-header.plan-header-default h3 { color: var(--color-text-primary); } [data-bs-theme="dark"] .card-header.plan-header-featured { background-color: color-mix(in srgb, var(--color-sage-300) 55%, white); color: var(--color-brand-900); } [data-bs-theme="dark"] .card-header.plan-header-featured h3 { color: var(--color-brand-900); } [data-bs-theme="dark"] .card-header.plan-header-featured .btn { background-color: var(--color-brand-800); color: var(--color-text-primary); border-color: var(--color-brand-800); } [data-bs-theme="dark"] .card-header.plan-header-featured .btn:hover { background-color: var(--color-brand-700); color: var(--color-text-primary); border-color: var(--color-brand-700); } [data-bs-theme="dark"] .card-header.plan-header-featured .btn:disabled { background-color: var(--color-brand-800); color: var(--color-text-primary); } /* Package-ramp header in dark mode: keep the dark→sage ramp (otherwise the generic `[data-bs-theme="dark"] .card-header` rule paints it flat near-black) and switch to light text, since the dark-mode ramp (#1A2126 → #3A4650) is dark end-to-end. */ [data-bs-theme="dark"] .card-header.plan-header-package { background-color: color-mix(in srgb, var(--pkg-header-start, var(--color-neutral-100)) calc((1 - var(--pkg-t, 1)) * 100%), var(--color-sage-300)); color: var(--color-text-primary); } [data-bs-theme="dark"] .card-header.plan-header-package h3 { color: var(--color-text-primary); } /* Plan card hover */ .plan-card-default .card, .plan-card-featured .card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .plan-card-default .card:hover, .plan-card-featured .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } /* Featured (center) card: visually lifted as a whole */ .plan-card-featured { transform: translateY(0.75rem); } @media (max-width: 767.98px) { .plan-card-featured { transform: none; } } /* =========================================================== LIST GROUPS =========================================================== */ .list-group-item { border-color: var(--color-border-light); color: var(--color-text-body); } .list-group-item.active { background-color: var(--color-brand-800); border-color: var(--color-brand-800); } /* =========================================================== MODALS =========================================================== */ .modal-content { border-color: var(--color-border-light); border-radius: var(--bs-border-radius-lg, 0.5rem); } .modal-header { border-bottom-color: var(--color-border-light); } .modal-footer { border-top-color: var(--color-border-light); } /* =========================================================== PROGRESS BARS =========================================================== */ .progress { border-radius: var(--bs-border-radius-pill, 50px); } .progress-bar { background-color: var(--color-brand-800); } /* =========================================================== BADGES =========================================================== */ .badge { font-family: 'DM Sans', sans-serif; font-weight: 500; } /* .bg-primary resolves to light sage (--bs-primary) in BOTH themes, so the default light badge text washes out (light-on-light). Force dark brand text for contrast. --color-brand-800 stays dark in both themes, so this reads correctly in light and dark mode. */ .badge.bg-primary { color: var(--color-brand-800) !important; } /* =========================================================== ALERTS =========================================================== */ .alert { border-radius: var(--bs-border-radius, 0.375rem); } /* =========================================================== BREADCRUMBS =========================================================== */ .breadcrumb-item a { color: var(--color-brand-800); } .breadcrumb-item.active { color: var(--color-text-secondary); } /* =========================================================== TOASTS & MISC =========================================================== */ .toast { border-color: var(--color-border-light); } /* =========================================================== PAGE HEADER — compact parallax banner for sub-pages =========================================================== */ .page-header { position: relative; overflow: hidden; color: #fff; margin-top: -80px; padding-top: calc(80px + 3rem); padding-bottom: 3rem; /* Same gradient + parallax dot grid as the hero */ background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0) fixed, linear-gradient(135deg, #19272B 0%, #20282D 40%, #263037 100%); background-size: 32px 32px, 100% 100%; border-bottom: 1px solid transparent; border-image: linear-gradient(to right, transparent, rgba(213, 222, 222, 0.3), transparent) 1; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .page-header .container { position: relative; z-index: 1; } .page-header-title { font-size: 2.75rem; font-weight: 400; margin-bottom: 0.5rem; color: #fff; } .page-header-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 0; max-width: 600px; margin-left: auto; margin-right: auto; } /* iOS doesn't support background-attachment: fixed */ @media (max-width: 767.98px) { .page-header { background-attachment: scroll, scroll; padding-top: calc(80px + 2.5rem); padding-bottom: 2.5rem; } .page-header-title { font-size: 2rem; } } /* ── Page header with background image overlay ── */ .page-header--has-image { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; } .page-header--has-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(25, 39, 43, 0.88) 0%, rgba(32, 40, 45, 0.84) 40%, rgba(38, 48, 55, 0.75) 100%); z-index: 0; } /* =========================================================== HERO CAROUSEL =========================================================== */ .hero-carousel { position: relative; overflow: hidden; color: #fff; --bs-heading-color: #fff; /* Base gradient (stars live on their own .hero-stars layer) */ background: linear-gradient(135deg, #19272B 0%, #20282D 40%, #263037 100%); } .hero-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.6; -webkit-mask-image: radial-gradient(ellipse 550px 780px at 50% 28%, transparent 0%, transparent 40%, #000 90%); mask-image: radial-gradient(ellipse 550px 780px at 50% 28%, transparent 0%, transparent 40%, #000 90%); } /* Star container — parallax lives here so the wrapper's mask stays fixed. `contain` scopes layout/paint invalidation to this subtree so the 19 looping star animations don't force the rest of the hero to re-evaluate. */ .hero-stars-field { position: absolute; inset: 0; transform: translate3d(0, var(--dots-offset, 0), 0); will-change: transform; contain: layout paint style; } /* Individual stars — fixed px size so they don't grow on 5K/ultrawide. */ .star { position: absolute; width: 14px; height: 14px; --rot: 0deg; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.7); animation: star-twinkle 4.5s ease-in-out infinite; } /* Rotation variety so they don't all point up */ .star:nth-child(5n+1) { --rot: 0deg; } .star:nth-child(5n+2) { --rot: 22deg; } .star:nth-child(5n+3) { --rot: 47deg; } .star:nth-child(5n+4) { --rot: 13deg; } .star:nth-child(5n) { --rot: 68deg; } /* Size variety — small/medium/large cycled */ .star:nth-child(3n) { width: 6px; height: 6px; } .star:nth-child(3n+1) { width: 8px; height: 8px; } .star:nth-child(3n+2) { width: 11px; height: 11px; } /* Independent twinkle timings per star. Negative delays = animation is already mid-flight on page load, no initial "come to life" pop. */ .star:nth-child(1) { animation-duration: 3.8s; animation-delay: -0.7s; } .star:nth-child(2) { animation-duration: 5.2s; animation-delay: -1.2s; } .star:nth-child(3) { animation-duration: 4.3s; animation-delay: -2.5s; } .star:nth-child(4) { animation-duration: 6.1s; animation-delay: -0.8s; } .star:nth-child(5) { animation-duration: 3.5s; animation-delay: -3.1s; } .star:nth-child(6) { animation-duration: 5.5s; animation-delay: -1.8s; } .star:nth-child(7) { animation-duration: 4.0s; animation-delay: -2.2s; } .star:nth-child(8) { animation-duration: 4.8s; animation-delay: -0.4s; } .star:nth-child(9) { animation-duration: 5.0s; animation-delay: -2.8s; } .star:nth-child(10) { animation-duration: 4.2s; animation-delay: -1.5s; } .star:nth-child(11) { animation-duration: 5.6s; animation-delay: -0.6s; } .star:nth-child(12) { animation-duration: 4.4s; animation-delay: -2.0s; } .star:nth-child(13) { animation-duration: 3.9s; animation-delay: -2.6s; } .star:nth-child(14) { animation-duration: 5.3s; animation-delay: -1.0s; } .star:nth-child(15) { animation-duration: 4.7s; animation-delay: -1.9s; } .star:nth-child(16) { animation-duration: 5.8s; animation-delay: -0.3s; } .star:nth-child(17) { animation-duration: 3.6s; animation-delay: -2.3s; } .star:nth-child(18) { animation-duration: 5.1s; animation-delay: -2.7s; } .star:nth-child(19) { animation-duration: 4.5s; animation-delay: -1.4s; } @keyframes star-twinkle { 0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.7); } 50% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1.3); } } /* Animated gradient orbs */ .hero-carousel::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle at 20% 40%, rgba(213, 222, 222, 0.07) 0%, transparent 50%), radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.04) 0%, transparent 40%), radial-gradient(circle at 60% 75%, rgba(213, 222, 222, 0.06) 0%, transparent 45%); animation: orb-drift 30s ease-in-out infinite; z-index: 0; pointer-events: none; } /* Vignette — dark edges, normal center, parallax */ .hero-carousel::after { content: ''; position: absolute; inset: -100px; background: radial-gradient(ellipse at center, transparent 25%, rgba(25, 39, 43, 0.65) 60%, rgba(25, 39, 43, 0.92) 100%); z-index: 0; pointer-events: none; transform: translateY(var(--vignette-offset, 0)); } /* XL: strong side darkening under the carousel controls */ @media (min-width: 1200px) { .hero-carousel::after { background: linear-gradient(to right, rgba(25, 39, 43, 0.95) 0%, rgba(25, 39, 43, 0.8) 8%, rgba(25, 39, 43, 0.35) 18%, rgba(25, 39, 43, 0) 28%, rgba(25, 39, 43, 0) 72%, rgba(25, 39, 43, 0.35) 82%, rgba(25, 39, 43, 0.8) 92%, rgba(25, 39, 43, 0.95) 100% ), radial-gradient(ellipse at center, transparent 25%, rgba(25, 39, 43, 0.65) 60%, rgba(25, 39, 43, 0.92) 100%); } } /* Particles crown overlay */ #particles-crown { position: absolute; top: -100px; left: -100px; right: -100px; bottom: -100px; z-index: 0; opacity: 0; transition: opacity 1s ease; } #particles-crown.loaded { opacity: 1; } #particles-crown canvas { pointer-events: none; } /* Register the float offset as a real so it can be keyframe-animated. Without @property, CSS custom properties can't be interpolated. */ @property --crown-float { syntax: ''; inherits: false; initial-value: 0px; } /* Static crown wireframe. Scroll parallax comes in via --crown-scroll (set from JS), float bob comes from the @keyframes below — both composed in a single transform so they don't fight each other. */ #particles-crown.static-only { opacity: 0.1; background-image: url('/img/crown.svg?v=xOeo6MzFEYvCiqREJkpmCtNEEN0'); background-position: center; background-repeat: no-repeat; background-size: 2240px 1959px; filter: brightness(0) invert(1); will-change: transform; transform: translate3d(0, calc(var(--crown-scroll, 0px) + var(--crown-float, 0px)), 0); animation: crown-float 10s ease-in-out infinite; -webkit-mask-image: radial-gradient(ellipse 550px 780px at 50% 28%, transparent 0%, transparent 40%, #000 90%); mask-image: radial-gradient(ellipse 550px 780px at 50% 28%, transparent 0%, transparent 40%, #000 90%); } @keyframes crown-float { 0%, 100% { --crown-float: -22px; } 50% { --crown-float: 22px; } } .hero-carousel .carousel-inner, .hero-carousel .carousel-indicators, .hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next { z-index: 1; } @keyframes orb-drift { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); } 25% { transform: translate(40px, -60px) rotate(90deg) scale(1.1); } 50% { transform: translate(-30px, 40px) rotate(180deg) scale(0.95); } 75% { transform: translate(50px, 20px) rotate(270deg) scale(1.05); } } /* Disable parallax on mobile (iOS doesn't support background-attachment: fixed) */ @media (max-width: 767.98px) { .hero-carousel { background-attachment: scroll, scroll; } } /* Scale crown overlay down on small viewports */ @media (max-width: 767.98px) { #particles-crown { transform: scale(0.8); transform-origin: center; } } @media (max-width: 575.98px) { #particles-crown { transform: scale(0.65); } } .hero-carousel .carousel-item { /* svh = small viewport height: stays stable while the mobile URL/bottom bar shows or hides. Plain 100vh tracks the largest extent on iOS and the dynamic extent on Chrome Android, so the slide grew/shrank during the address-bar animation and caused visible jitter on scroll. */ min-height: 100vh; min-height: 100svh; } .hero-carousel .carousel-item > .container { min-height: 100vh; min-height: 100svh; padding-top: 5rem; padding-bottom: 8rem; transform: translate3d(0, var(--slide-offset, 0), 0); will-change: transform; } .hero-carousel .carousel-indicators { bottom: 4rem; z-index: 2; } .hero-carousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background: transparent; opacity: 1; padding: 0; cursor: pointer; } .hero-carousel .carousel-indicators .active { background: #fff; border-color: #fff; } .hero-carousel .carousel-inner { user-select: none; -webkit-user-select: none; } .hero-carousel .carousel-item h1 { font-weight: 600; letter-spacing: -0.015em; color: transparent; /* Two stacked gradients (clipped to text): 1) moving highlight sweep on top 2) static chrome "horizon": top sky reflection, dark horizon line, bottom ground reflection — the classic metallic anatomy, but with cool neutral tones for a modern look. */ background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 100% ), linear-gradient( 180deg, #f1f4f5 0%, #ffffff 22%, #f6f8f9 42%, #c2cacf 52%, #e0e5e8 62%, #ffffff 80%, #d5dbde 100% ); background-size: 300% 100%, 100% 100%; background-position: 0% 50%, 0 0; background-repeat: no-repeat, no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.32)); transform-origin: center; will-change: transform, background-position; animation: heroTitleShine 12s ease-in-out infinite, heroTitleBreath 10s ease-in-out infinite; } @keyframes heroTitleShine { 0% { background-position: 0% 50%, 0 0; } 50% { background-position: 100% 50%, 0 0; } 100% { background-position: 0% 50%, 0 0; } } /* Very subtle breathing — scale + tiny float so the text feels alive */ @keyframes heroTitleBreath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.5px) scale(1.012); } } @media (prefers-reduced-motion: reduce) { .hero-carousel .carousel-item h1 { animation: none; background-position: 30% 50%, 0 0; transform: none; } } /* =========================================================== PAGE-LOAD INTRO (signed-out users only, pages with hero) Staged: hero title → hero body text → navbar Body gets .intro-anim class from _Layout.cshtml only when !isSignedIn, so the animation plays exactly once on full page load. =========================================================== */ @keyframes heroIntroFade { from { opacity: 0; } to { opacity: 1; } } @keyframes heroIntroRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes navIntroDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* H1 keeps its existing shine + breath; we add a fade-in as a third track. Redeclared here because CSS animation lists are replaced, not merged. Scoped to :first-child (initial slide) so swapping .active on subsequent slides doesn't re-trigger the intro. */ body.intro-anim .hero-carousel .carousel-item:first-child h1 { animation: heroTitleShine 12s ease-in-out infinite, heroTitleBreath 10s ease-in-out infinite, heroIntroFade 0.9s ease-out 0.15s both; } body.intro-anim .hero-carousel .carousel-item:first-child .lead, body.intro-anim .hero-carousel .carousel-item:first-child .btn, body.intro-anim .hero-carousel .carousel-item:first-child .badge { animation: heroIntroRise 0.9s ease-out 0.55s both; } body.intro-anim:has(.hero-carousel) header > .navbar { animation: navIntroDrop 0.7s ease-out 1.25s both; } @media (prefers-reduced-motion: reduce) { body.intro-anim .hero-carousel .carousel-item:first-child h1, body.intro-anim .hero-carousel .carousel-item:first-child .lead, body.intro-anim .hero-carousel .carousel-item:first-child .btn, body.intro-anim .hero-carousel .carousel-item:first-child .badge, body.intro-anim:has(.hero-carousel) header > .navbar { animation: none; } } .hero-carousel .carousel-item .lead { color: rgba(255, 255, 255, 0.75); max-width: 600px; } /* Scroll-down button */ .hero-scroll-down { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 1; display: inline-flex; color: rgba(255, 255, 255, 0.6); text-decoration: none; animation: scroll-bounce 2s ease-in-out infinite; transition: color 0.3s ease, opacity 0.4s ease; } .hero-scroll-down.hidden { opacity: 0; pointer-events: none; } .hero-scroll-down:hover { color: #fff; } .hero-scroll-down svg { width: 32px; height: 32px; } @keyframes scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } /* Outline-light button on hero */ .hero-carousel .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.33); --bs-btn-hover-bg: rgba(255, 255, 255, 0.12); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5); --bs-btn-hover-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, 0.2); --bs-btn-active-border-color: rgba(255, 255, 255, 0.6); --bs-btn-active-color: #fff; } @media (max-width: 767.98px) { .hero-carousel .carousel-item h1 { font-size: 3rem; } .hero-carousel .carousel-item .lead { font-size: 1.35rem; } } @media (max-width: 575.98px) { .hero-carousel .carousel-item h1 { font-size: 2.75rem; } .hero-carousel .carousel-item .lead { font-size: 1.25rem; } } /* =========================================================== SCROLLBARS — sleek, minimal, pill thumb =========================================================== */ /* Firefox only — scoped so it does NOT disable webkit pseudo-element styling in Chrome/Edge 121+ (new CSS Scrollbars Styling spec: if scrollbar-width or scrollbar-color is set, ::-webkit-scrollbar rules are ignored). */ @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-brand-800) 25%, transparent) transparent; } } /* WebKit / Chromium / Edge / Safari */ ::-webkit-scrollbar { width: 10px; height: 10px; } /* Remove arrow buttons */ ::-webkit-scrollbar-button { display: none; width: 0; height: 0; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece { background: transparent; border: 0; } ::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--color-brand-800) 22%, transparent); border-radius: 999px; transition: background-color 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--color-brand-800) 45%, transparent); } ::-webkit-scrollbar-thumb:active { background-color: color-mix(in srgb, var(--color-brand-800) 70%, transparent); } ::-webkit-scrollbar-corner { background: transparent; } /* Main page scrollbar: track blends with sidebar background */ html::-webkit-scrollbar-track, html::-webkit-scrollbar-track-piece { background: #f8f9fa; } [data-bs-theme="dark"] html::-webkit-scrollbar-track, [data-bs-theme="dark"] html::-webkit-scrollbar-track-piece { background: #1A2126; } @supports not selector(::-webkit-scrollbar) { html { scrollbar-color: color-mix(in srgb, var(--color-brand-800) 25%, transparent) #f8f9fa; } [data-bs-theme="dark"] html { scrollbar-color: rgba(255, 255, 255, 0.25) #1A2126; } } /* Dark backgrounds: invert to light thumb */ .navbar-dark *, .dropdown-menu-dark *, [data-bs-theme="dark"] * { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } .navbar-dark ::-webkit-scrollbar-thumb, .dropdown-menu-dark ::-webkit-scrollbar-thumb, [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.22); } .navbar-dark ::-webkit-scrollbar-thumb:hover, .dropdown-menu-dark ::-webkit-scrollbar-thumb:hover, [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.45); } /* Sidebar: macOS-style — hidden at rest, fades in elegantly on area hover. No scroll-gutter: lets nav-links fill the full sidebar width when the content fits. The 5px webkit scrollbar overlays content only when needed. */ .app-sidebar .sidebar-scroll { transition: scrollbar-color 0.35s ease; } @supports not selector(::-webkit-scrollbar) { .app-sidebar .sidebar-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; } } .app-sidebar:hover .sidebar-scroll, .app-sidebar .sidebar-scroll:focus-within { scrollbar-color: rgba(32, 40, 45, 0.35) transparent; } [data-bs-theme="dark"] .app-sidebar:hover .sidebar-scroll, [data-bs-theme="dark"] .app-sidebar .sidebar-scroll:focus-within { scrollbar-color: rgba(230, 233, 236, 0.35) transparent; } .app-sidebar .sidebar-scroll::-webkit-scrollbar { width: 5px; } .app-sidebar .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } /* Thumb: effective 3px pill (5px - 2*1px transparent padding), fully transparent at rest — fades in when the mouse enters the sidebar. Solid rgba(brand) instead of color-mix(... transparent): the latter rendered inconsistently across Chromium versions (occasional yellowish system-accent fallback during the hover transition). */ .app-sidebar .sidebar-scroll::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 999px; border: 1px solid transparent; background-clip: padding-box; transition: background-color 0.35s ease; } .app-sidebar:hover .sidebar-scroll::-webkit-scrollbar-thumb, .app-sidebar .sidebar-scroll:focus-within::-webkit-scrollbar-thumb { background-color: rgba(32, 40, 45, 0.35); } .app-sidebar .sidebar-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(32, 40, 45, 0.6); } [data-bs-theme="dark"] .app-sidebar:hover .sidebar-scroll::-webkit-scrollbar-thumb, [data-bs-theme="dark"] .app-sidebar .sidebar-scroll:focus-within::-webkit-scrollbar-thumb { background-color: rgba(230, 233, 236, 0.35); } [data-bs-theme="dark"] .app-sidebar .sidebar-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(230, 233, 236, 0.6); } /* DataTables scroll containers (legacy + v2) */ /* scrollbar-width/-color for DataTables scroll areas, Firefox-only so Chrome keeps using the ::-webkit-scrollbar rules below */ @supports not selector(::-webkit-scrollbar) { .dataTables_scrollBody, .dataTables_scrollHead, .dataTables_scrollFoot, div.dt-scroll-body, div.dt-scroll-head, div.dt-scroll-foot { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-brand-800) 22%, transparent) transparent; } } .dataTables_scrollBody::-webkit-scrollbar, .dataTables_scrollHead::-webkit-scrollbar, .dataTables_scrollFoot::-webkit-scrollbar, div.dt-scroll-body::-webkit-scrollbar, div.dt-scroll-head::-webkit-scrollbar, div.dt-scroll-foot::-webkit-scrollbar { width: 6px; height: 6px; } .dataTables_scrollBody::-webkit-scrollbar-button, .dataTables_scrollHead::-webkit-scrollbar-button, .dataTables_scrollFoot::-webkit-scrollbar-button, div.dt-scroll-body::-webkit-scrollbar-button, div.dt-scroll-head::-webkit-scrollbar-button, div.dt-scroll-foot::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .dataTables_scrollBody::-webkit-scrollbar-track, .dataTables_scrollHead::-webkit-scrollbar-track, .dataTables_scrollFoot::-webkit-scrollbar-track, div.dt-scroll-body::-webkit-scrollbar-track, div.dt-scroll-head::-webkit-scrollbar-track, div.dt-scroll-foot::-webkit-scrollbar-track { background: transparent; } .dataTables_scrollBody::-webkit-scrollbar-thumb, .dataTables_scrollHead::-webkit-scrollbar-thumb, .dataTables_scrollFoot::-webkit-scrollbar-thumb, div.dt-scroll-body::-webkit-scrollbar-thumb, div.dt-scroll-head::-webkit-scrollbar-thumb, div.dt-scroll-foot::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--color-brand-800) 22%, transparent); border-radius: 999px; transition: background-color 0.2s ease; } .dataTables_scrollBody::-webkit-scrollbar-thumb:hover, .dataTables_scrollHead::-webkit-scrollbar-thumb:hover, .dataTables_scrollFoot::-webkit-scrollbar-thumb:hover, div.dt-scroll-body::-webkit-scrollbar-thumb:hover, div.dt-scroll-head::-webkit-scrollbar-thumb:hover, div.dt-scroll-foot::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--color-brand-800) 45%, transparent); } /* =========================================================== THEME TOGGLE (sun/moon button in topbar) =========================================================== */ .theme-toggle { background: transparent; border: 0; padding: 0 0.35rem; color: var(--color-text-secondary); font-size: 0.95rem; opacity: 0.6; cursor: pointer; display: inline-flex; align-items: center; line-height: 1; transition: opacity 0.2s ease, color 0.2s ease, transform 0.3s ease; } .theme-toggle:hover { opacity: 1; color: var(--color-text-primary); transform: rotate(-12deg); } /* Footer vertical divider between copyright and theme toggle */ .app-footer .footer-sep { display: inline-block; width: 1px; height: 0.9em; background-color: currentColor; opacity: 0.35; } /* Icon swap: show the icon representing the action that the click performs */ .theme-icon-light, .theme-icon-dark { display: none; } /* Light mode → show moon (click to go dark) */ [data-bs-theme="light"] .theme-icon-dark, html:not([data-bs-theme="dark"]) .theme-icon-dark { display: inline-block; } /* Dark mode → show sun (click to go light) */ [data-bs-theme="dark"] .theme-icon-light { display: inline-block; } /* =========================================================== DARK MODE — Dashboard overrides =========================================================== */ [data-bs-theme="dark"] body { background-color: var(--bs-body-bg); } /* Sidebar */ [data-bs-theme="dark"] .app-sidebar.bg-light { background-color: #1A2126 !important; border-right-color: var(--color-border-light) !important; } [data-bs-theme="dark"] .app-sidebar .sidebar-brand { color: var(--color-text-primary); } [data-bs-theme="dark"] .app-sidebar .nav-link { color: #A8B0B7; } [data-bs-theme="dark"] .app-sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } [data-bs-theme="dark"] .app-sidebar .nav-link.active { color: #fff; background: color-mix(in srgb, var(--color-brand-800) 55%, transparent); } [data-bs-theme="dark"] .app-sidebar .sidebar-footer { border-top-color: var(--color-border-light); } /* Area switcher pill container */ [data-bs-theme="dark"] .area-switcher.bg-white { background-color: #1C242A !important; border-color: var(--color-border-light) !important; } [data-bs-theme="dark"] .area-switcher .area-switcher-tab { color: var(--color-text-secondary); } [data-bs-theme="dark"] .area-switcher .area-switcher-tab:hover { color: #fff; } [data-bs-theme="dark"] .area-switcher .area-switcher-tab.active { background-color: var(--color-brand-700); color: #fff; background-image: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.2) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4); } /* Nav pills — same treatment */ [data-bs-theme="dark"] .nav-pills .nav-link { color: var(--color-text-body); } [data-bs-theme="dark"] .nav-pills .nav-link.active, [data-bs-theme="dark"] .nav-pills .show > .nav-link { background-color: var(--color-brand-700); color: #fff; background-image: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(0,0,0,0.2) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4); } /* Nav tabs */ [data-bs-theme="dark"] .nav-tabs { border-bottom-color: var(--color-border-light); } [data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--color-text-body); } [data-bs-theme="dark"] .nav-tabs .nav-link:hover:not(.active):not(.disabled) { background-color: rgba(255, 255, 255, 0.03); } [data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: #1C242A; border-color: var(--color-border-light) var(--color-border-light) #1C242A; color: #fff; background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, transparent 45%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 -1px 3px rgba(0,0,0,0.15); } /* Cards */ [data-bs-theme="dark"] .card { background-color: #1C242A; border-color: var(--color-border-light); color: var(--color-text-body); } [data-bs-theme="dark"] .card-header { background-color: #1A2126; border-bottom-color: var(--color-border-light); color: var(--color-text-primary); } [data-bs-theme="dark"] .card-footer { background-color: #1A2126; border-top-color: var(--color-border-light); } /* Forms */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #1C242A; border-color: var(--color-border-light); color: var(--color-text-primary); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #1C242A; border-color: var(--color-text-secondary); color: var(--color-text-primary); box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--color-text-muted); } /* Invalid-Rand muss die graue Dark-Border oben schlagen. Beide Selektoren haben Spezifizitaet (0,2,0); da branding.css nach bootstrap.css laedt, wuerde Bootstraps .is-invalid sonst durch die Dark-.form-control-Regel ueberschrieben und der rote Rand bliebe im Dark-Mode aus. */ [data-bs-theme="dark"] .form-control.is-invalid, [data-bs-theme="dark"] .was-validated .form-control:invalid, [data-bs-theme="dark"] .form-select.is-invalid, [data-bs-theme="dark"] .was-validated .form-select:invalid { border-color: var(--bs-form-invalid-border-color); } /* Disabled/readonly inputs: visually distinct from editable fields in dark mode */ [data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-control[readonly], [data-bs-theme="dark"] .form-select:disabled { background-color: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.06); color: var(--color-text-muted); opacity: 0.85; cursor: not-allowed; } /* Tables */ [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--color-text-body); --bs-table-border-color: var(--color-border-light); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.05); color: var(--color-text-body); } /* Dropdowns */ [data-bs-theme="dark"] .dropdown-menu { background-color: #1C242A; border-color: var(--color-border-light); color: var(--color-text-body); } [data-bs-theme="dark"] .dropdown-item { color: var(--color-text-body); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: var(--color-text-primary); } [data-bs-theme="dark"] .dropdown-divider { border-top-color: var(--color-border-light); } [data-bs-theme="dark"] .dropdown-header { color: var(--color-text-secondary); } /* Topbar / Footer dividers */ [data-bs-theme="dark"] .app-topbar-divider, [data-bs-theme="dark"] .app-footer-divider { border-color: var(--color-border-light); } [data-bs-theme="dark"] .app-footer { color: var(--color-text-secondary); } /* Modal */ [data-bs-theme="dark"] .modal-content { background-color: #1C242A; border-color: var(--color-border-light); color: var(--color-text-body); } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: var(--color-border-light); } /* Badges — keep dark-brand badges readable */ [data-bs-theme="dark"] .badge.bg-secondary { background-color: var(--color-brand-700) !important; color: #fff; } /* Borders / subtle backgrounds */ [data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start, [data-bs-theme="dark"] .border-end { border-color: var(--color-border-light) !important; } [data-bs-theme="dark"] .bg-white { background-color: #1C242A !important; } [data-bs-theme="dark"] hr { border-color: var(--color-border-light); opacity: 1; } /* Text utilities */ [data-bs-theme="dark"] .text-dark { color: var(--color-text-primary) !important; } /* Exception: .text-dark paired with a deliberately light surface (e.g. .badge.bg-light.text-dark) must keep its dark text. .bg-light stays light in dark mode, so flipping the text to --color-text-primary (light) would render light-on-light and make the badge unreadable. Restore Bootstrap's normal .text-dark colour for that combination. */ [data-bs-theme="dark"] .bg-light.text-dark { color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity, 1)) !important; } [data-bs-theme="dark"] .text-muted { color: var(--color-text-muted) !important; } /* Secondary button: sage bg stays, but text needs to stay dark for contrast (in dark mode --color-text-primary flips to light, which washes out on sage) */ [data-bs-theme="dark"] .btn-secondary { --bs-btn-color: #19272B; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #19272B; } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-hover-color: #19272B; } /* Primary button: flip to sage in dark mode — dark-brand would vanish on dark bg. Sage (rest) → dark (hover), mirror of light-mode behaviour. */ [data-bs-theme="dark"] .btn-primary { --bs-btn-bg: #B0BBBB; --bs-btn-border-color: #A1ACAC; --bs-btn-color: #19272B; --bs-btn-hover-bg: var(--color-brand-700); --bs-btn-hover-border-color: var(--color-brand-700); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--color-brand-900); --bs-btn-active-border-color: var(--color-brand-900); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: #B0BBBB; --bs-btn-disabled-border-color: #A1ACAC; --bs-btn-disabled-color: #19272B; } /* Gradient overlay flip: sage rest = raised look, dark hover = pressed look */ [data-bs-theme="dark"] .btn-primary { background-image: linear-gradient(to bottom, rgba(255,255,255,0.22) 0%, rgba(0,0,0,0.08) 100%); } [data-bs-theme="dark"] .btn-primary:hover { background-image: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.18) 100%); } [data-bs-theme="dark"] .btn-primary:active, [data-bs-theme="dark"] .btn-primary.active { background-image: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(255,255,255,0.05) 100%); } /* ===== Public navbar user dropdown button ===== Outline-light look, with avatar tight to the left curve, and a primary-style hover (dark fill, white text). */ .navbar-user-btn { padding-left: 0.55rem; padding-right: 0.7rem; line-height: 1.15; } .navbar-user-btn:hover, .navbar-user-btn:focus, .navbar-user-btn.show { background-color: var(--color-brand-800); border-color: var(--color-brand-800); color: #fff; } .navbar-user-btn:active, .navbar-user-btn.active { background-color: var(--color-brand-900); border-color: var(--color-brand-900); color: #fff; } /* Dark mode: primary flips to sage, so mirror that on the user button */ [data-bs-theme="dark"] .navbar-user-btn:hover, [data-bs-theme="dark"] .navbar-user-btn:focus, [data-bs-theme="dark"] .navbar-user-btn.show { background-color: #B0BBBB; border-color: #A1ACAC; color: var(--color-brand-900); } [data-bs-theme="dark"] .navbar-user-btn:active, [data-bs-theme="dark"] .navbar-user-btn.active { background-color: #A1ACAC; border-color: #94A0A0; color: var(--color-brand-900); } /* ============================================================= Public mobile navigation — custom burger + offcanvas drawer ============================================================= */ /* Burger button */ .public-nav-burger { background: transparent; border: 0; padding: 0.5rem; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; position: relative; z-index: 2; } .public-nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.9); transition: transform 0.25s ease, opacity 0.2s ease, background-color 0.3s ease; transform-origin: center; } .public-nav-burger:hover span { background: #fff; } /* Transparent navbar variant keeps bars subtle */ header > .navbar.navbar-transparent .public-nav-burger span { background: rgba(255, 255, 255, 0.85); } /* Burger-to-X morph when offcanvas is open */ .public-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .public-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: translateX(-6px); } .public-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Offcanvas drawer — clean light surface */ .public-mobile-nav { width: min(86vw, 340px); border: 0; background: var(--bs-body-bg); color: var(--color-text-primary); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18); } /* Top bar with brand on the left and close button on the right */ .public-mobile-nav-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; flex-shrink: 0; border-bottom: 1px solid var(--color-border-light); } /* Brand inside the offcanvas topbar lives on a light surface, so swap the metallic chrome (light gradient + sweep animation, designed for the dark sticky-nav) for a solid dark silhouette that reads against --bs-body-bg. */ .public-mobile-nav-topbar .metallic-crown { background-image: none; background-color: var(--color-brand-800); filter: none; animation: none; } .public-mobile-nav-topbar .public-sticky-brand-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--color-brand-800); -webkit-text-fill-color: var(--color-brand-800); animation: none; } .public-mobile-nav-close { background: transparent; border: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-secondary); border-radius: 50%; transition: color 0.2s, background-color 0.2s, transform 0.2s; flex-shrink: 0; } .public-mobile-nav-close:hover { color: var(--color-text-primary); background: color-mix(in srgb, var(--color-brand-900) 8%, transparent); transform: rotate(90deg); } .public-mobile-nav-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 0 1.25rem; } /* Top: auth / user card area */ .public-mobile-nav-auth { padding: 1.25rem 1.25rem 1.25rem; border-bottom: 1px solid var(--color-border-light); display: grid; gap: 0.9rem; } .public-mobile-user-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.25rem 1rem; } .public-mobile-user-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .public-mobile-user-avatar--initial { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-brand-800); color: #fff; font-weight: 600; font-size: 1rem; } /* =========================================================== AVATAR 3D LOOK =========================================================== */ .avatar-3d { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14), 0 4px 10px -2px rgba(0, 0, 0, 0.22), 0 8px 18px -4px rgba(0, 0, 0, 0.18); } .avatar-3d--glossy { background-image: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.28) 100%); } [data-bs-theme="dark"] .avatar-3d { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.55), 0 8px 18px -4px rgba(0, 0, 0, 0.45); } .public-mobile-user-meta { line-height: 1.2; min-width: 0; } .public-mobile-user-name { font-weight: 600; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .public-mobile-user-role { font-size: 0.8rem; color: var(--color-text-secondary); } /* Link list */ .public-mobile-nav-links { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; padding-top: 0.5rem; } .public-mobile-nav-links a { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; color: var(--color-text-primary); font-size: 1.15rem; font-weight: 500; text-decoration: none; border-left: 2px solid transparent; position: relative; transition: color 0.2s, background-color 0.2s, border-color 0.2s, padding-left 0.25s ease; } .public-mobile-nav-links a svg { opacity: 0; transform: translateX(-6px); transition: opacity 0.25s ease, transform 0.25s ease; color: var(--color-brand-800); } .public-mobile-nav-links a:hover, .public-mobile-nav-links a:focus { color: var(--color-brand-900); background: color-mix(in srgb, var(--color-brand-900) 5%, transparent); border-left-color: var(--color-brand-800); padding-left: 1.75rem; } .public-mobile-nav-links a:hover svg, .public-mobile-nav-links a:focus svg { opacity: 1; transform: translateX(0); } /* Backdrop: slightly darker, softer blur feel */ .offcanvas-backdrop.show { opacity: 0.6; } @media (prefers-reduced-motion: reduce) { .public-mobile-nav.show .public-mobile-nav-links a { animation: none; } .public-mobile-nav-close:hover { transform: none; } } /* =========================================================== LANDING PAGE — public homepage sections =========================================================== */ .landing-section { padding-top: 6rem; padding-bottom: 6rem; /* Clip horizontal bleed (e.g. the showcase window that slides off-screen on mobile) so it doesn't trigger a page-level horizontal scrollbar. */ overflow-x: clip; } /* Bump container side-padding on xs viewport — Bootstrap default 12px feels too tight on phones. Scoped to public pages so the dashboard isn't affected. */ @media (max-width: 575.98px) { body.public-page .container { --bs-gutter-x: 2rem; } } @media (max-width: 767.98px) { .landing-section { padding-top: 4rem; padding-bottom: 4rem; } } /* ── Blog post sections (alternating backgrounds, tighter padding) ── */ .post-section { padding-top: 4rem; padding-bottom: 4rem; overflow-x: clip; } .post-section-sm { padding-top: 2rem; padding-bottom: 2rem; overflow-x: clip; } @media (max-width: 767.98px) { .post-section { padding-top: 3rem; padding-bottom: 3rem; } .post-section-sm { padding-top: 1.5rem; padding-bottom: 1.5rem; } } .landing-lead { color: var(--color-text-body); font-size: 1.15rem; line-height: 1.65; font-weight: 400; } .landing-section-head { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: 4rem; } .landing-section-head h2 { font-size: 2rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 0.75rem; letter-spacing: -0.01em; } @media (min-width: 768px) { .landing-section-head h2 { font-size: 2.25rem; } } .landing-section-head p { color: var(--color-text-body); font-size: 1.1rem; margin: 0; } /* Public homepage navigation — two-nav pattern (hero overlay + sticky reveal) */ .public-hero-nav { position: absolute; top: var(--maint-banner-h, 0px); left: 0; right: 0; z-index: 50; padding: 1.25rem 0; color: #fff; } .public-sticky-nav { position: fixed; top: var(--maint-banner-h, 0px); left: 0; right: 0; z-index: 1030; padding: 0.75rem 0; background: var(--color-brand-800); border-bottom: 1px solid transparent; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease; will-change: transform, opacity; } .public-sticky-nav.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Static main nav for non-homepage public pages — same look as the sticky-nav, but always visible (sticky to top, no slide-in). */ /* Maintenance banner: a sticky bar pinned above everything, including the sticky header. --maint-banner-h is set by the banner's own script to its rendered height (0 when no banner) so the header below sticks flush beneath it. Stays above the nav (z 1030) but below offcanvas (1045) / modals (1055). */ .maintenance-banner { position: sticky; top: 0; z-index: 1040; } /* Keep the admin's rich-HTML message compact inside the bar. */ .maintenance-banner-body p { margin: 0; } .maintenance-banner-body ul, .maintenance-banner-body ol { margin: 0.25rem 0; display: inline-block; text-align: left; } .maintenance-banner-body a { text-decoration: underline; } /* Close button sits in the corner, OUT of the flow, so the content stays centered across the full width. Symmetric padding keeps the centered text clear of the button on narrow screens. */ .maintenance-banner-close { position: absolute; top: 0.5rem; right: 0.75rem; z-index: 2; } .maintenance-banner--dismissible .maintenance-banner-body { padding-left: 2rem; padding-right: 2rem; } .public-static-nav { position: sticky; top: var(--maint-banner-h, 0px); z-index: 1030; padding: 0.75rem 0; background: var(--color-brand-800); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); /* Promote to its own compositor layer so the browser doesn't repaint the nav each frame while resizing the viewport (URL-bar slide animation in Chromium-based browsers like Brave is jankier than Safari's). */ transform: translateZ(0); will-change: transform; } .public-nav-brand { display: inline-flex; align-items: center; text-decoration: none; } .public-hero-nav .public-nav-brand img { height: 32px; width: auto; filter: brightness(0) invert(1); } .public-sticky-nav .public-nav-brand img { height: 32px; width: auto; filter: brightness(0) invert(1); } /* Sticky-nav brand: naked crown stacked above "kral" wordmark */ .public-sticky-brand { flex-direction: column; align-items: center; gap: 6px; line-height: 1; } .public-sticky-brand img { height: 22px !important; } .public-sticky-brand .metallic-crown { width: 22px; height: 22px; -webkit-mask-image: var(--logo-2, url('/brand/logo-2.svg?v=32wpiECa_B8KBNCoxTFOX5b6ot4')); mask-image: var(--logo-2, url('/brand/logo-2.svg?v=32wpiECa_B8KBNCoxTFOX5b6ot4')); } /* Mobile (collapsed nav): icon left, "kral" right — horizontal layout. Icon size override must come AFTER the base rule above to win the cascade. */ @media (max-width: 991.98px) { .public-sticky-brand { flex-direction: row; gap: 0.5rem; } .public-sticky-brand .metallic-crown { width: 27px; height: 27px; } } .public-sticky-brand-text, .footer-brand-text { font-family: 'DM Sans', sans-serif; font-weight: 600; letter-spacing: 0.1em; color: transparent; background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 100% ), linear-gradient( 180deg, #f1f4f5 0%, #ffffff 22%, #f6f8f9 42%, #c2cacf 52%, #e0e5e8 62%, #ffffff 80%, #d5dbde 100% ); background-size: 300% 100%, 100% 100%; background-position: 0% 50%, 0 0; background-repeat: no-repeat, no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: heroTitleShine 12s ease-in-out infinite; } .public-sticky-brand-text { font-size: 1.05rem; } .footer-brand-text { font-size: 1.5rem; } /* Footer brand: boxed crown + "kral" wordmark, both with metallic chrome */ .footer-brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; line-height: 1; } .footer-brand .metallic-crown { width: 34px; height: 34px; -webkit-mask-image: var(--logo-2, url('/brand/logo-2.svg?v=32wpiECa_B8KBNCoxTFOX5b6ot4')); mask-image: var(--logo-2, url('/brand/logo-2.svg?v=32wpiECa_B8KBNCoxTFOX5b6ot4')); /* Override the chrome gradient + animation: solid muted fill + 1px light shadow below = engraved into the dark footer surface. */ background-image: none; background-color: var(--color-text-muted); animation: none; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.08)); } .footer-brand .footer-brand-text { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--color-text-muted); -webkit-text-fill-color: var(--color-text-muted); animation: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } /* Business footer brand — keep h5's default sizing, just apply the engraved muted treatment (color + light-edge text-shadow). */ .footer-brand-business { color: var(--color-text-muted); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } /* "kral.ai" + spaced-uppercase "ENTERPRISE" lockup (matches the navbar brand). Grid column is sized by the wordmark; the tag stretches to it and spreads its letters edge-to-edge via flex space-between. */ .footer-brand-lockup { display: inline-grid; justify-items: stretch; line-height: 1; } .footer-brand-tag { display: flex; justify-content: space-between; margin-top: 0.34rem; font-size: 0.52rem; font-weight: 500; letter-spacing: normal; text-transform: uppercase; color: inherit; opacity: 0.8; } /* App brand-mark for utility surfaces (Dashboard sidebar, Auth pages). Solid brand color, no chrome gradient, no shine animation — keeps the internal UI quiet so it doesn't compete with the actual content. The color comes from --brand-color (set per theme by the layout). */ .app-brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; line-height: 1; } .app-brand .metallic-crown { width: 26px; height: 26px; -webkit-mask-image: var(--logo-2, url('/brand/logo-2.svg?v=32wpiECa_B8KBNCoxTFOX5b6ot4')); mask-image: var(--logo-2, url('/brand/logo-2.svg?v=32wpiECa_B8KBNCoxTFOX5b6ot4')); /* Override metallic chrome anatomy: solid brand color, no animation. */ background-image: none; background-color: var(--brand-color, #20282D); filter: none; animation: none; } .app-brand-text { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; color: var(--brand-color, #20282D); } .footer-tagline { font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 1rem; } /* Social-Icons: gleiche gedaempfte Farbe wie die Footer-Tagline (Icons nutzen fill="currentColor"), leichte Aufhellung beim Hover als Affordance. */ .footer-social a { color: rgba(255, 255, 255, 0.6); transition: color 0.15s ease; } .footer-social a:hover { color: rgba(255, 255, 255, 0.9); } /* Auf dem Handy etwas mehr Luft unter der Icon-Leiste. */ @media (max-width: 767.98px) { .footer-social { margin-bottom: 1.5rem; } } /* Filter must live on the parent — the crown itself uses mask-image which clips any drop-shadow on the same element. Applied to the wrapper, the shadow casts off the masked crown silhouette and isn't clipped. */ /* Stacked drop-shadows projected downward — each layer further down with more blur and lower alpha, forming a tapered funnel of shadow beneath the crown. Parent filter so the mask on .metallic-crown doesn't clip it. */ .public-hero-nav .public-nav-brand { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.8)) drop-shadow(0 40px 55px rgba(0, 0, 0, 0.55)); } /* Mobile: der weit nach unten projizierte Funnel-Schatten (40px Offset + 55px Blur) reicht ueber die Hero-Bar hinaus und wird unten abgeschnitten. Auf schmalen Viewports einen flacheren Schatten verwenden, der innerhalb der Bar bleibt. */ @media (max-width: 991.98px) { .public-hero-nav .public-nav-brand { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8)) drop-shadow(0 5px 9px rgba(0, 0, 0, 0.5)); } } /* Metallic chrome crown — same gradient anatomy & sweep animation as the hero H1 */ .metallic-crown { display: inline-block; width: 30px; height: 32px; -webkit-mask-image: var(--logo-1, url('/brand/logo-1.svg?v=u9N1K9aelyJUuTIHIcmCBE2YbBE')); mask-image: var(--logo-1, url('/brand/logo-1.svg?v=u9N1K9aelyJUuTIHIcmCBE2YbBE')); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 100% ), linear-gradient( 180deg, #f1f4f5 0%, #ffffff 22%, #f6f8f9 42%, #c2cacf 52%, #e0e5e8 62%, #ffffff 80%, #d5dbde 100% ); background-size: 300% 100%, 100% 100%; background-position: 0% 50%, 0 0; background-repeat: no-repeat, no-repeat; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.32)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); animation: heroTitleShine 12s ease-in-out infinite; } /* Inverted-triangle spotlight beam projected downward from the crown. Lives on the parent , not on the masked .metallic-crown (mask would clip it). */ .public-hero-nav .public-nav-brand { position: relative; } /* Funnel beam from the top of the hero, projecting down — identical anatomy to the crown funnel, just relocated to the slider's top edge. */ .hero-top-funnel { position: absolute; top: -8px; left: 50%; width: 600px; height: 540px; transform: translate3d(-50%, 0, 0); background: linear-gradient( to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.10) 22%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.02) 70%, rgba(255, 255, 255, 0) 100% ); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; pointer-events: none; mix-blend-mode: screen; filter: blur(8px); z-index: 1; will-change: transform; } /* Phones: the 600px-wide funnel beam dominates the narrow hero, so dial its intensity back — reads as a soft glow instead of a bright white cone. */ @media (max-width: 767.98px) { .hero-top-funnel { opacity: 0.8; } } .public-nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; align-items: center; } .public-nav-links a { font-family: 'DM Sans', sans-serif; font-size: 0.95rem; text-decoration: none; padding: 0.4rem 0; transition: opacity 0.2s ease, color 0.2s ease; } .public-hero-nav .public-nav-links a, .public-sticky-nav .public-nav-links a, .public-static-nav .public-nav-links a { color: rgba(255, 255, 255, 0.85); } .public-hero-nav .public-nav-links a:hover, .public-sticky-nav .public-nav-links a:hover, .public-static-nav .public-nav-links a:hover { color: #fff; } .public-nav-auth { display: flex; align-items: center; gap: 0.75rem; } .public-nav-auth .navbar-nav { flex-direction: row; gap: 0.25rem; align-items: center; } .public-nav-auth .nav-link { font-family: 'DM Sans', sans-serif; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); padding: 0.4rem 0.75rem; transition: color 0.2s ease; } .public-nav-auth .nav-link:hover { color: #fff; } /* Provider strip — standalone bar, no label, taller for hover-pop headroom. Asymmetric padding: more room at bottom so logos don't feel glued to section edge. */ .provider-strip { padding: 3rem 0 5rem; background: var(--color-sage-200); } .provider-strip-label { text-align: center; color: var(--color-text-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.25rem; } /* Marquee: infinite left-scrolling logo strip with fade edges. Cells give every logo the same visual footprint regardless of intrinsic width. Edge fades are done with pseudo-elements (not mask-image) so vertical hover-lift isn't clipped. */ .provider-marquee { overflow-x: clip; overflow-y: visible; position: relative; } .provider-marquee::before, .provider-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; pointer-events: none; z-index: 3; } .provider-marquee::before { left: 0; background: linear-gradient(to right, var(--color-sage-200), transparent); } .provider-marquee::after { right: 0; background: linear-gradient(to left, var(--color-sage-200), transparent); } .provider-marquee-track { display: flex; align-items: center; gap: 1.5rem; width: max-content; /* Dauer = Provider-Anzahl * Sekunden-pro-Logo, gesetzt via --provider-count (inline aus dem Page-Model). Haelt das Scroll-Tempo konstant, egal wie viele Brands aktiv sind. Default 16 = 90s wie zuvor. */ animation: provider-marquee-scroll calc(var(--provider-count, 16) * 5.625s) linear infinite; } @keyframes provider-marquee-scroll { from { transform: translateX(0); } /* Scrollt genau eine Kopie-Breite; --marquee-shift wird inline aus der dynamischen Kopien-Anzahl berechnet (4 Kopien = -25%). */ to { transform: translateX(var(--marquee-shift, -25%)); } } .provider-logo-cell { position: relative; flex-shrink: 0; width: 170px; height: 56px; display: flex; justify-content: center; align-items: center; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: default; } .provider-logo-cell:hover { transform: translateY(-5px) scale(1.1); } .provider-logo-cell:hover .provider-logo { opacity: 1; } .provider-caption { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(-4px); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 500; color: var(--color-brand-800); letter-spacing: -0.005em; pointer-events: none; white-space: nowrap; } .provider-logo-cell:hover .provider-caption { opacity: 1; transform: translateX(-50%) translateY(0); } .provider-logo { max-width: 140px; max-height: 38px; width: auto; height: auto; opacity: 0.5; filter: brightness(0) saturate(100%); transition: opacity 0.35s ease; display: block; pointer-events: none; } /* Tablet (< 992px): step down from desktop */ @media (max-width: 991.98px) { .provider-strip { padding: 2.25rem 0 3.75rem; } .provider-marquee-track { gap: 1.25rem; animation-duration: calc(var(--provider-count, 16) * 5s); } .provider-logo-cell { width: 150px; height: 48px; } .provider-logo { max-width: 118px; max-height: 32px; } } /* Small (< 768px): smaller still */ @media (max-width: 767.98px) { .provider-strip { padding: 1.75rem 0 3rem; } .provider-marquee::before, .provider-marquee::after { width: 50px; } .provider-marquee-track { gap: 1rem; animation-duration: calc(var(--provider-count, 16) * 4.375s); } .provider-logo-cell { width: 130px; height: 44px; } .provider-logo { max-width: 100px; max-height: 28px; } } /* Mobile (< 576px): smallest */ @media (max-width: 575.98px) { .provider-strip { padding: 1.5rem 0 2.5rem; } .provider-marquee::before, .provider-marquee::after { width: 35px; } .provider-marquee-track { gap: 0.75rem; animation-duration: calc(var(--provider-count, 16) * 3.75s); } .provider-logo-cell { width: 110px; height: 40px; } .provider-logo { max-width: 85px; max-height: 24px; } } @media (prefers-reduced-motion: reduce) { .provider-marquee-track { animation: none; } .provider-logo-cell { transition: none; } .provider-logo-cell:hover { transform: none; } } /* Product visual showcase — framed browser-window mockup as hero image placeholder */ .showcase-window { max-width: 960px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border-light); border-radius: 14px; box-shadow: 0 1px 2px rgba(32, 40, 45, 0.04), 0 20px 50px rgba(32, 40, 45, 0.12); overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 16 / 9; } .showcase-window-chrome { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: #F4F5F7; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; } .showcase-window-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .showcase-window-dot--red { background: #FF5F57; } .showcase-window-dot--yellow { background: #FFBD2E; } .showcase-window-dot--green { background: #28CA42; } .showcase-window-url { flex: 1; text-align: center; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; letter-spacing: -0.005em; color: var(--color-text-muted); padding: 0.2rem 0.85rem; margin: 0 auto; max-width: 280px; background: #fff; border: 1px solid var(--color-border-light); border-radius: 999px; } .showcase-window-body { flex: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 30% 20%, rgba(213, 222, 222, 0.35), transparent 55%), radial-gradient(ellipse at 80% 90%, rgba(32, 40, 45, 0.04), transparent 60%), repeating-linear-gradient(45deg, transparent 0 38px, rgba(32, 40, 45, 0.015) 38px 39px); } .showcase-img { display: block; width: 100%; height: auto; transition: opacity 0.6s ease; } /* JS adds .is-loading while the (lazy) image is still loading, then removes it on load so the image fades in. transition:none here avoids a fade-out flash when the class is first applied. */ .showcase-img.is-loading { opacity: 0; transition: none; } @media (prefers-reduced-motion: reduce) { .showcase-img { transition: none; } } /* Image-backed window hugs the screenshot's own ratio instead of a fixed 16:9 (the placeholders on the Features page keep the default aspect-ratio). */ .showcase-window--media { aspect-ratio: auto; } .showcase-window--media .showcase-window-body { display: block; } .showcase-placeholder { text-align: center; padding: 2rem; color: var(--color-text-muted); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .showcase-placeholder-icon { color: var(--color-brand-800); opacity: 0.3; margin-bottom: 0.35rem; } .showcase-placeholder-label { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brand-800); opacity: 0.55; } .showcase-placeholder-sub { font-size: 0.88rem; color: var(--color-text-muted); max-width: 260px; margin: 0 auto; line-height: 1.5; } @media (max-width: 991.98px) { /* Showcase slides off the left edge, but stays compact enough that its 16:9 height doesn't blow up the section. Right edge anchored to col-7's right edge; negative left margin pushes a smaller overflow off-screen. */ .showcase-window { width: 95vw; max-width: none; margin-left: calc(100% - 95vw); } } @media (max-width: 767.98px) { .showcase-window { border-radius: 10px; } .showcase-window-chrome { padding: 0.55rem 0.75rem; gap: 0.35rem; } .showcase-window-dot { width: 9px; height: 9px; } .showcase-window-url { font-size: 0.7rem; padding: 0.15rem 0.6rem; max-width: 180px; } } /* Minimalist feature grid — alternative to the vertical tabs */ .feature-minimal { text-align: left; } .feature-minimal-icon { display: inline-flex; justify-content: center; align-items: center; width: 48px; height: 48px; background: var(--color-sage-300); border-radius: 0.65rem; margin-bottom: 1.1rem; color: var(--color-brand-800); } .feature-minimal-title { font-family: 'DM Sans', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--color-brand-800); letter-spacing: -0.005em; margin: 0 0 0.5rem; line-height: 1.25; } .feature-minimal-body { color: var(--color-text-body); font-size: 0.95rem; line-height: 1.55; margin: 0; } @media (max-width: 767.98px) { .feature-minimal { text-align: center; } } /* FAQ quick-nav cards stay centered on every viewport */ .faq-quicknav .feature-minimal { text-align: center; } /* Capability section — vertical Bootstrap pills + content panel */ .capability-tabs { gap: 2rem; } .capability-tabs-nav { flex-shrink: 0; min-width: 260px; max-width: 300px; display: flex; gap: 0.35rem; } .capability-tab-btn { background: transparent; border: 1px solid transparent; border-radius: 0.6rem; padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.75rem; text-align: left; color: var(--color-brand-800); font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: -0.005em; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; cursor: pointer; width: 100%; flex-shrink: 0; } .capability-tab-btn:hover { background-color: var(--color-sage-200); } .capability-tab-btn.active { background-color: var(--color-sage-300); border-color: var(--color-sage-300); font-weight: 600; } .capability-tab-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-brand-800); opacity: 0.6; transition: opacity 0.2s ease; } .capability-tab-btn.active .capability-tab-icon, .capability-tab-btn:hover .capability-tab-icon { opacity: 1; } .capability-tab-label { flex: 1; } .capability-tabs-content { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--color-border-light); border-radius: 0.75rem; padding: 2.5rem; min-height: 320px; } .capability-panel-icon { display: inline-flex; justify-content: center; align-items: center; width: 56px; height: 56px; background: var(--color-sage-300); border-radius: 0.75rem; margin-bottom: 1.5rem; color: var(--color-brand-800); } .capability-tabs-content h3 { font-family: 'DM Sans', sans-serif; font-size: 1.65rem; font-weight: 600; color: var(--color-brand-800); letter-spacing: -0.015em; margin-bottom: 0.75rem; line-height: 1.2; } .capability-tabs-content p { color: var(--color-text-body); font-size: 1.05rem; line-height: 1.65; margin: 0; max-width: 640px; } @media (max-width: 767.98px) { .capability-tabs { gap: 1.5rem; } .capability-tabs-nav { min-width: 0; max-width: none; width: 100%; flex-direction: row !important; justify-content: center; gap: 0.4rem; } .capability-tab-btn { width: 48px; height: 48px; padding: 0; justify-content: center; flex-shrink: 0; } .capability-tab-label { display: none; } .capability-tab-icon { opacity: 0.75; } .capability-tabs-content { padding: 1.75rem 1.5rem; min-height: 0; } .capability-tabs-content h3 { font-size: 1.35rem; } .capability-tabs-content p { font-size: 1rem; } .capability-panel-icon { width: 48px; height: 48px; margin-bottom: 1.15rem; } } /* Principles section — 2-column split, numbered stacked items on right */ .principle-heading h2 { font-family: 'DM Sans', sans-serif; font-size: 2.25rem; font-weight: 700; color: var(--color-text-primary); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.85rem; } .principle-heading p { color: var(--color-text-body); font-size: 1.15rem; line-height: 1.6; margin: 0; max-width: 420px; } @media (min-width: 992px) { .principle-heading { position: sticky; top: 2rem; } .principle-heading h2 { font-size: 2.5rem; } } .principle-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2.25rem; } /* Compact bullet list used inside .principle-heading on the Features page — reads as a "what you get" recap below the descriptive paragraph. */ .principle-list-inline { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; color: var(--color-text-body); } .principle-list-inline li { position: relative; padding-left: 1.25rem; } .principle-list-inline li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-800); opacity: 0.55; } .principle-item { display: flex; align-items: flex-start; gap: 1.25rem; } .principle-number { flex-shrink: 0; width: 48px; height: 48px; background: var(--color-sage-300); color: var(--color-brand-800); border-radius: 0.65rem; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em; } .principle-content { flex: 1; min-width: 0; } .principle-content h3 { font-family: 'DM Sans', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--color-brand-800); letter-spacing: -0.01em; margin: 0 0 0.5rem; line-height: 1.25; } .principle-content p { color: var(--color-text-body); font-size: 1rem; line-height: 1.6; margin: 0; } @media (max-width: 991.98px) { .principle-heading { margin-bottom: 2.5rem; } } @media (max-width: 767.98px) { .principle-heading h2 { font-size: 1.85rem; } .principle-heading p { font-size: 1rem; } .principle-list { gap: 1.75rem; } .principle-item { gap: 1rem; } .principle-number { width: 40px; height: 40px; font-size: 0.95rem; border-radius: 0.5rem; } .principle-content h3 { font-size: 1.1rem; } } /* Branded Bootstrap tooltip (used on marquee logos etc.) */ .tooltip-inner { background-color: var(--color-brand-800); color: var(--color-sage-300); font-family: 'DM Sans', sans-serif; font-size: 0.825rem; font-weight: 500; letter-spacing: -0.005em; padding: 0.4rem 0.75rem; border-radius: 0.4rem; } .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--color-brand-800); } .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--color-brand-800); } /* Capability cards — sage-header + body, matches PlanCard design language */ .capability-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--color-border-light); border-radius: 0.6rem; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .capability-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(32, 40, 45, 0.09); } .capability-card-head { display: flex; align-items: center; gap: 0.65rem; background: var(--color-sage-300); padding: 0.95rem 1.25rem; } .capability-card-head svg { flex-shrink: 0; stroke: var(--color-brand-800); } .capability-card-head h3 { color: var(--color-brand-800); margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.005em; } .capability-card-body { padding: 1.15rem 1.25rem 1.35rem; color: var(--color-text-body); line-height: 1.6; flex-grow: 1; } .capability-card-body p { margin: 0; } /* Step cards — numbered, for "Wie es funktioniert" */ .step-card { position: relative; padding: 1.75rem 1.5rem 1.5rem; border-radius: 0.6rem; background: #fff; border: 1px solid var(--color-border-light); height: 100%; transition: transform 0.2s ease, box-shadow 0.2s ease; } .step-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(32, 40, 45, 0.09); } .step-card-number { position: absolute; top: 0.9rem; right: 1.25rem; font-size: 2.6rem; font-weight: 800; color: var(--color-sage-300); line-height: 1; letter-spacing: -0.03em; user-select: none; } .step-card h3 { color: var(--color-brand-800); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.6rem; padding-right: 2.5rem; } .step-card p { color: var(--color-text-body); margin: 0; line-height: 1.6; } /* Differentiator cards — left accent for the "how it's built" section */ .differentiator-card { padding: 1.35rem 1.5rem 1.35rem 1.75rem; background: #fff; border-left: 3px solid var(--color-sage-300); border-top: 1px solid var(--color-border-light); border-right: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light); border-radius: 0 0.5rem 0.5rem 0; height: 100%; transition: border-left-color 0.2s ease, transform 0.2s ease; } .differentiator-card:hover { border-left-color: var(--color-brand-800); transform: translateY(-2px); } .differentiator-card h3 { color: var(--color-brand-800); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.55rem; } .differentiator-card p { color: var(--color-text-body); margin: 0; line-height: 1.6; } /* Final CTA — matches the typewriter gray for visual continuity. Bottom gradient mirrors the typewriter's top gradient, easing into the dark footer. */ .final-cta { padding: 7rem 0 8rem; background: linear-gradient(to bottom, rgba(25, 39, 43, 0.05) 0%, rgba(25, 39, 43, 0.01) 30px, transparent 60px), linear-gradient(to top, rgba(25, 39, 43, 0.18) 0%, rgba(25, 39, 43, 0.04) 40px, transparent 90px), #E9ECEF; text-align: center; } .final-cta h2 { color: var(--color-brand-800); font-size: 2.25rem; font-weight: 700; margin-bottom: 1.5rem; letter-spacing: -0.01em; } .final-cta p { color: var(--color-text-body); font-size: 1.1rem; margin-bottom: 2.5rem; } @media (max-width: 767.98px) { .final-cta { padding: 5rem 0 5.5rem; } .final-cta h2 { font-size: 1.75rem; } } /* Blog cards on landing */ .blog-card-landing { border: 1px solid var(--color-border-light); border-radius: 0.6rem; background: #fff; height: 100%; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-card-landing:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(32, 40, 45, 0.09); } .blog-card-landing-media { display: block; height: 180px; overflow: hidden; background: var(--color-sage-200); } .blog-card-landing-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .blog-card-landing:hover .blog-card-landing-media img { transform: scale(1.03); } .blog-card-landing-media--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-sage-200) 0%, var(--color-sage-300) 100%); color: rgba(32, 40, 45, 0.28); } .blog-card-landing-media--placeholder svg { width: 56px; height: 56px; transition: transform 0.3s ease; } .blog-card-landing:hover .blog-card-landing-media--placeholder svg { transform: scale(1.05); } .blog-card-landing .card-body { padding: 1.25rem 1.25rem 0.5rem; flex-grow: 1; } .blog-card-landing h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.35; } .blog-card-landing h3 a { color: var(--color-brand-800); text-decoration: none; } .blog-card-landing h3 a:hover { color: var(--color-brand-600); } .blog-card-landing .card-body p { color: var(--color-text-body); font-size: 0.95rem; margin: 0; line-height: 1.55; } .blog-card-landing .card-meta { padding: 0.5rem 1.25rem 1.15rem; color: var(--color-text-muted); font-size: 0.85rem; } /* Dark variant of landing section — used by the blog teaser */ .landing-section-dark { background: linear-gradient(135deg, var(--color-brand-800) 0%, var(--color-brand-900) 100%); } .landing-section-dark .landing-section-head h2 { color: var(--color-sage-300); } .landing-section-dark .landing-section-head p { color: rgba(213, 222, 222, 0.7); } .landing-section-dark .blog-card-landing { background: #3A4046; border-color: rgba(255, 255, 255, 0.08); } .landing-section-dark .blog-card-landing:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); } .landing-section-dark .blog-card-landing h3 a { color: var(--color-sage-300); } .landing-section-dark .blog-card-landing h3 a:hover { color: #fff; } .landing-section-dark .blog-card-landing .card-body p { color: rgba(213, 222, 222, 0.72); } .landing-section-dark .blog-card-landing .card-meta { color: rgba(213, 222, 222, 0.5); } /* Brand wordmark — wraps every in-copy mention of the brand name. Dark chrome treatment: same anatomy as the hero metallic (sweep + chrome gradient) but inverted tones so it reads on light section backgrounds. */ .brand-mark { letter-spacing: 0.02em; font-weight: 500; color: transparent; background-image: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 100% ), linear-gradient( 180deg, #19272B 0%, #2c3a40 28%, #6b7d85 52%, #2c3a40 76%, #19272B 100% ); background-size: 300% 100%, 100% 100%; background-position: 0% 50%, 0 0; background-repeat: no-repeat, no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)); animation: heroTitleShine 12s ease-in-out infinite; } /* Typewriter band — hero heading + subtitle + animated prompt line. Top gradient eases the hard edge between the dark slider and the light gray. */ .typewriter-section { background: linear-gradient(to bottom, rgba(25, 39, 43, 0.18) 0%, rgba(25, 39, 43, 0.04) 40px, transparent 90px), #E9ECEF; padding: 5.5rem 0 5rem; } @media (max-width: 767.98px) { .typewriter-section { padding: 4rem 0 3.5rem; } /* Enterprise pages (.bx-page) only: more breathing room top and bottom */ .bx-page .typewriter-section { padding: 6rem 0 5.5rem; } } .typewriter-heading { font-family: 'DM Sans', sans-serif; font-size: 2.75rem; font-weight: 600; color: var(--color-brand-800); letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 1rem; text-align: center; } .typewriter-subtitle { font-family: 'Heebo', sans-serif; font-size: 1.15rem; color: var(--color-brand-800); opacity: 0.72; max-width: 620px; margin: 0 auto 3rem; line-height: 1.55; text-align: center; } .typewriter-line { text-align: center; font-family: 'DM Sans', sans-serif; font-size: 1.75rem; font-weight: 400; color: var(--color-brand-800); letter-spacing: -0.015em; line-height: 1.2; margin: 0; } @media (max-width: 767.98px) { .typewriter-heading { font-size: 1.85rem; } .typewriter-subtitle { font-size: 1rem; margin-bottom: 2.25rem; } .typewriter-line { font-size: 1.25rem; } } .typewriter-prefix { display: inline-block; color: var(--color-brand-800); opacity: 0.35; margin-right: 0.35em; font-weight: 400; } .typewriter-cursor { display: inline-block; width: 0.6em; height: 3px; background: var(--color-brand-800); margin-left: 4px; vertical-align: -0.08em; animation: typewriter-blink 1s step-end infinite; } @keyframes typewriter-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .typewriter-cursor { animation: none; opacity: 0.5; } }