/* input(1753,15): run-time error CSS1019: Unexpected token, found 'selector(' input(1753,43): run-time error CSS1025: Expected comma or open brace, found ')' input(1806,15): run-time error CSS1019: Unexpected token, found 'selector(' input(1806,43): run-time error CSS1025: Expected comma or open brace, found ')' input(1840,15): run-time error CSS1019: Unexpected token, found 'selector(' input(1840,43): run-time error CSS1025: Expected comma or open brace, found ')' input(1898,15): run-time error CSS1019: Unexpected token, found 'selector(' input(1898,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; } /* =========================================================== 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); } .alert-info a { color: var(--color-brand-800); text-decoration: underline; } .alert-info a: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; opacity: 0.55; transition: opacity 0.2s ease, color 0.2s ease; } .app-topbar .sidebar-toggle:hover, .app-topbar .topbar-icon-link:hover { opacity: 1; color: var(--color-text-primary); } .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; } .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); } /* 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; } /* =========================================================== 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; } [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: 0; left: 0; right: 0; z-index: 50; padding: 1.25rem 0; color: #fff; } .public-sticky-nav { position: fixed; top: 0; 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). */ .public-static-nav { position: sticky; top: 0; 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); } /* 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; } }