/* ============================================================================ xaweho · WHMCS Style-Override (Six 8.13) Visuelle Parität zu xaweho.de — Inter, Korall-Orange (#f48a69), Ink-Palette. Greift nur, wenn gesetzt ist (Hook). Die Klasse wird vom JS gesetzt, sobald #header und #main-menu zu einer einzigen Bar verschmolzen sind. ============================================================================ */ /* ---------- Design Tokens ------------------------------------------------- */ :root { --x-brand-50: #fff7f2; --x-brand-100: #feeedf; --x-brand-200: #fcdabe; --x-brand-300: #fbc09d; --x-brand-400: #ffbc7d; --x-brand-500: #f48a69; --x-brand-600: #de6e50; --x-brand-700: #b85a41; --x-brand-800: #934734; --x-brand-900: #6e342a; --x-ink-50: #fafafa; --x-ink-100: #f3f3f3; --x-ink-200: #e5e5e5; --x-ink-300: #d4d4d4; --x-ink-400: #a3a3a3; --x-ink-500: #737373; --x-ink-600: #54595f; --x-ink-700: #404040; --x-ink-800: #262626; --x-ink-900: #171717; --x-ink-950: #0a0a0a; --x-success: #10b981; --x-success-bg: #ecfdf5; --x-warning: #f59e0b; --x-warning-bg: #fef3c7; --x-danger: #dc2626; --x-danger-bg: #fef2f2; --x-radius-button: 0.375rem; --x-radius-card: 0.75rem; --x-radius-pill: 9999px; --x-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05); --x-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10); --x-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10); --x-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10); --x-shadow-brand: 0 1px 2px 0 rgba(244,138,105,0.30); --x-font-sans: "Inter","Segoe UI",system-ui,-apple-system,sans-serif; --x-font-mono: "JetBrains Mono","Menlo","Consolas",monospace; --x-container: 1152px; --x-header-height: 80px; } /* ============================================================================ AGGRESSIVE FONT ENFORCEMENT Six setzt font-family: Raleway / Open Sans / Helvetica per Element fest. Wir überschreiben mit globaler Regel — gewinnt durch hohe Spezifität. ============================================================================ */ html.xaweho-active body, html.xaweho-active body * { font-family: var(--x-font-sans) !important; } html.xaweho-active code, html.xaweho-active pre, html.xaweho-active .text-monospace, html.xaweho-active kbd, html.xaweho-active samp, html.xaweho-active code *, html.xaweho-active pre *, html.xaweho-active kbd *, html.xaweho-active samp * { font-family: var(--x-font-mono) !important; } /* Icons-Schriftarten nicht überschreiben! */ html.xaweho-active .fa, html.xaweho-active .fas, html.xaweho-active .far, html.xaweho-active .fab, html.xaweho-active .fal, html.xaweho-active .fad, html.xaweho-active .glyphicon, html.xaweho-active [class*=" fa-"], html.xaweho-active [class^="fa-"] { font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome", "Glyphicons Halflings" !important; } /* ============================================================================ BASE — Body / Container / Typography ============================================================================ */ html.xaweho-active { scroll-behavior: smooth; } .xaweho-active body { background: var(--x-ink-50) !important; color: var(--x-ink-900) !important; font-size: 15px !important; line-height: 1.6 !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; overflow-x: hidden !important; /* Safety-Net: niemals horizontal scrollen */ } .xaweho-active html { overflow-x: hidden !important; } .xaweho-active .container { max-width: var(--x-container) !important; padding-left: 20px !important; padding-right: 20px !important; width: 100% !important; } @media (min-width: 1200px) { .xaweho-active .container { width: 100% !important; max-width: var(--x-container) !important; } } .xaweho-active h1, .xaweho-active h2, .xaweho-active h3, .xaweho-active h4, .xaweho-active h5, .xaweho-active h6, .xaweho-active .h1, .xaweho-active .h2, .xaweho-active .h3, .xaweho-active .h4, .xaweho-active .h5, .xaweho-active .h6 { color: var(--x-ink-900) !important; letter-spacing: -0.015em !important; font-weight: 700 !important; line-height: 1.2 !important; } .xaweho-active h1, .xaweho-active .h1 { font-size: 2.25rem !important; } .xaweho-active h2, .xaweho-active .h2 { font-size: 1.75rem !important; } .xaweho-active h3, .xaweho-active .h3 { font-size: 1.375rem !important; } .xaweho-active h4, .xaweho-active .h4 { font-size: 1.125rem !important; font-weight: 600 !important; } .xaweho-active h5, .xaweho-active .h5 { font-size: 1rem !important; font-weight: 600 !important; } .xaweho-active h1 small, .xaweho-active h2 small, .xaweho-active h3 small, .xaweho-active .h1 small, .xaweho-active .h2 small, .xaweho-active .h3 small { color: var(--x-ink-500) !important; font-weight: 400 !important; font-size: 0.6em !important; } .xaweho-active p { color: var(--x-ink-800); } .xaweho-active small, .xaweho-active .small { color: var(--x-ink-500); } .xaweho-active a { color: var(--x-brand-600); text-decoration: none; } .xaweho-active a:hover, .xaweho-active a:focus { color: var(--x-brand-700); text-decoration: none; } .xaweho-active hr { border-top-color: var(--x-ink-200); } .xaweho-active code { background: var(--x-ink-100); color: var(--x-ink-800); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; } .xaweho-active pre { background: var(--x-ink-900); color: var(--x-ink-100); border-radius: var(--x-radius-card); border: 0; padding: 1rem 1.25rem; } /* ============================================================================ HEADER — #header + #main-menu zu EINER xaweho-Bar verschmolzen ---------------------------------------------------------------------------- Das xaweho-onload-Script bewegt: - #header .logo → #main-menu .navbar-header - #header .top-nav → #main-menu .navbar-main > .container (als 3. Kind) Danach: #header.style.display = 'none', body.classList += 'xaweho-header-merged' Falls JS deaktiviert / Seite vor JS rendert: Header bleibt sichtbar im Two-Bar-Modus aber zumindest xaweho-farbig. ============================================================================ */ /* --- #header (Top-Bar mit Logo + Account-Links) -------------------------- */ .xaweho-active #header { background: rgba(255,255,255,0.95) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--x-ink-200); position: sticky; top: 0; z-index: 1030; padding: 0; box-shadow: none; } .xaweho-active #header > .container { display: flex; align-items: center; min-height: var(--x-header-height); gap: 24px; } .xaweho-active #header .logo { order: 1; flex-shrink: 0; display: inline-flex; align-items: center; padding: 0; margin: 0; } .xaweho-active #header .logo img { height: 44px; width: auto; max-width: 240px; display: block; } .xaweho-active #header .top-nav { order: 3; margin: 0 0 0 auto; padding: 0; list-style: none; display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .xaweho-active #header .top-nav > li { margin: 0; padding: 0; display: inline-flex; } .xaweho-active #header .top-nav > li > a { padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--x-ink-700) !important; border-radius: var(--x-radius-button); transition: all .15s ease; display: inline-flex; align-items: center; text-decoration: none; } .xaweho-active #header .top-nav > li > a:hover { background: var(--x-ink-100); color: var(--x-ink-950) !important; } .xaweho-active #header .top-nav > li.primary-action > a, .xaweho-active #header .top-nav > li > a.btn { background: var(--x-brand-500) !important; color: #fff !important; padding: 9px 18px !important; font-weight: 600 !important; border: 0 !important; border-radius: var(--x-radius-button) !important; box-shadow: var(--x-shadow-brand) !important; } .xaweho-active #header .top-nav > li.primary-action > a:hover, .xaweho-active #header .top-nav > li > a.btn:hover { background: var(--x-brand-600) !important; } /* --- #main-menu (Navigations-Bar) --------------------------------------- */ .xaweho-active #main-menu { margin: 0 !important; padding: 0 !important; } .xaweho-active #main-menu .navbar, .xaweho-active #main-menu .navbar-main, .xaweho-active #main-menu .navbar-default { background: rgba(255,255,255,0.95) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0 !important; border-bottom: 1px solid var(--x-ink-200) !important; border-radius: 0 !important; margin: 0 !important; min-height: var(--x-header-height) !important; box-shadow: none !important; position: sticky; top: 0; z-index: 1030; } /* Wenn die Bars verschmolzen sind: #main-menu wird zur ECHTEN Header-Bar */ .xaweho-active.xaweho-header-merged #header { display: none !important; } .xaweho-active #main-menu .navbar > .container, .xaweho-active #header > .container { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; min-height: var(--x-header-height); gap: 16px; min-width: 0 !important; max-width: 1320px !important; /* Header etwas weiter als Content (1152px), um alle Nav-Items zu fassen */ } .xaweho-active #main-menu .navbar-header { display: flex !important; align-items: center !important; float: none !important; margin: 0 !important; flex-shrink: 0; } .xaweho-active #main-menu .navbar-header .logo, .xaweho-active #main-menu .navbar-header > .logo, .xaweho-active #main-menu .navbar-header a.logo { display: inline-flex !important; align-items: center !important; padding: 0 !important; margin: 0 24px 0 0 !important; height: auto !important; line-height: 1 !important; } .xaweho-active #main-menu .navbar-header .logo img, .xaweho-active #main-menu .navbar-header img, .xaweho-active #main-menu a.logo img, .xaweho-active #main-menu .navbar-header .logo > img { height: 48px !important; max-height: 48px !important; min-height: 48px !important; width: auto !important; max-width: 280px !important; display: block !important; padding: 0 !important; margin: 0 !important; } .xaweho-active #main-menu .navbar-collapse { flex: 1 1 auto !important; display: flex !important; align-items: center !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; gap: 0; min-width: 0 !important; /* Erlaubt flex-shrink unter Content-Size */ } .xaweho-active #main-menu .navbar-nav, .xaweho-active #main-menu .navbar-header, .xaweho-active #main-menu .top-nav, .xaweho-active #header .top-nav { min-width: 0 !important; } .xaweho-active #main-menu .navbar-nav > li, .xaweho-active #main-menu .top-nav > li { min-width: 0; } .xaweho-active #main-menu .navbar-collapse .navbar-nav { margin: 0 !important; padding: 0 !important; } /* Account-Navbar (Konto-Dropdown) RECHTS ausrichten — sitzt direkt vor .top-nav */ .xaweho-active #main-menu .navbar-collapse .navbar-nav.navbar-right, .xaweho-active #main-menu .navbar-nav.navbar-right { margin-left: auto !important; margin-right: 0 !important; float: none !important; display: flex !important; align-items: center; } .xaweho-active #main-menu .navbar-nav { float: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center; } .xaweho-active #main-menu .navbar-nav > li { float: none !important; position: relative; } .xaweho-active #main-menu .navbar-nav > li > a { padding: 28px 9px !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--x-ink-700) !important; background: transparent !important; text-transform: none !important; letter-spacing: 0 !important; border: 0 !important; transition: color .15s ease; display: flex; align-items: center; gap: 4px; white-space: nowrap; line-height: 1.4; } .xaweho-active #main-menu .navbar-nav > li.active > a::after, .xaweho-active #main-menu .navbar-nav > .open > a::after { left: 9px !important; right: 9px !important; } .xaweho-active #main-menu .navbar-nav > li > a:hover, .xaweho-active #main-menu .navbar-nav > li > a:focus { color: var(--x-ink-950) !important; background: transparent !important; } .xaweho-active #main-menu .navbar-nav > li.active > a, .xaweho-active #main-menu .navbar-nav > .open > a { color: var(--x-brand-600) !important; background: transparent !important; } .xaweho-active #main-menu .navbar-nav > li.active > a::after, .xaweho-active #main-menu .navbar-nav > .open > a::after { content: ''; position: absolute; bottom: 0; left: 14px; right: 14px; height: 2px; background: var(--x-brand-500); border-radius: 1px; } .xaweho-active #main-menu .navbar-nav > li > a .caret { border-top-color: currentColor; margin-left: 2px; } /* Dropdowns */ .xaweho-active .dropdown-menu { border: 1px solid var(--x-ink-200) !important; border-radius: var(--x-radius-card) !important; box-shadow: var(--x-shadow-xl) !important; padding: 8px !important; margin-top: 6px !important; min-width: 260px !important; background: #fff !important; } .xaweho-active .dropdown-menu > li > a { padding: 10px 14px !important; font-size: 14px !important; color: var(--x-ink-800) !important; border-radius: 8px !important; background: transparent !important; font-weight: 500 !important; white-space: normal !important; transition: all .15s ease; } .xaweho-active .dropdown-menu > li > a:hover, .xaweho-active .dropdown-menu > li > a:focus { background: var(--x-brand-50) !important; color: var(--x-brand-700) !important; } .xaweho-active .dropdown-menu > li.nav-divider { margin: 6px 4px; padding: 0; background: var(--x-ink-100); height: 1px; list-style: none; overflow: hidden; } .xaweho-active .dropdown-menu > li.nav-divider > a { display: none; } .xaweho-active .dropdown-menu .divider { background-color: var(--x-ink-100); margin: 6px 4px; } /* Top-Nav (von JS in die navbar verschoben) — funktioniert auch ohne Merge */ .xaweho-active #main-menu .top-nav, .xaweho-active #header .top-nav { list-style: none; margin: 0 0 0 8px !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important; } .xaweho-active #main-menu .top-nav > li, .xaweho-active #header .top-nav > li { display: inline-flex !important; margin: 0 !important; padding: 0 !important; float: none !important; } .xaweho-active #main-menu .top-nav > li > a, .xaweho-active #header .top-nav > li > a { padding: 8px 10px !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--x-ink-700) !important; background: transparent !important; background-color: transparent !important; background-image: none !important; border-radius: var(--x-radius-button) !important; transition: all .15s ease; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; border: 0 !important; box-shadow: none !important; } .xaweho-active #main-menu .top-nav > li > a:hover, .xaweho-active #header .top-nav > li > a:hover { background: var(--x-ink-100) !important; background-color: var(--x-ink-100) !important; color: var(--x-ink-950) !important; text-decoration: none !important; } /* DER WICHTIGSTE FIX: "Warenkorb ansehen" als brand-Button. Maximum specificity, alle möglichen Wege das ".btn" wegzubekommen. */ .xaweho-active li.primary-action > a, .xaweho-active li.primary-action > a.btn, .xaweho-active .top-nav li.primary-action > a, .xaweho-active .top-nav > li.primary-action > a, .xaweho-active .top-nav > li.primary-action > a.btn, .xaweho-active .top-nav > li > a.btn, .xaweho-active #header .top-nav .btn, .xaweho-active #main-menu .top-nav .btn, .xaweho-active ul.top-nav li.primary-action a { background: var(--x-brand-500) !important; background-color: var(--x-brand-500) !important; background-image: none !important; color: #fff !important; padding: 8px 14px !important; font-size: 13.5px !important; font-weight: 600 !important; border: 0 !important; border-radius: var(--x-radius-button) !important; box-shadow: var(--x-shadow-brand) !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap; } .xaweho-active li.primary-action > a:hover, .xaweho-active li.primary-action > a:focus, .xaweho-active li.primary-action > a.btn:hover, .xaweho-active .top-nav li.primary-action > a:hover, .xaweho-active .top-nav > li > a.btn:hover, .xaweho-active ul.top-nav li.primary-action a:hover { background: var(--x-brand-600) !important; background-color: var(--x-brand-600) !important; color: #fff !important; } /* Mobile-Toggle */ .xaweho-active #main-menu .navbar-toggle { border: 1px solid var(--x-ink-300) !important; background: #fff !important; border-radius: var(--x-radius-button) !important; margin: 0 0 0 8px !important; padding: 8px 10px !important; order: 99; } .xaweho-active #main-menu .navbar-toggle .icon-bar { background: var(--x-ink-700) !important; width: 20px !important; height: 2px !important; } .xaweho-active #main-menu .navbar-toggle:hover, .xaweho-active #main-menu .navbar-toggle:focus { background: var(--x-ink-100) !important; } /* Mobile breakpoint */ @media (max-width: 991px) { .xaweho-active #main-menu .navbar > .container { flex-wrap: wrap !important; min-height: 64px; gap: 8px; } .xaweho-active #main-menu .navbar, .xaweho-active #main-menu .navbar-main { min-height: 64px !important; } .xaweho-active #main-menu .navbar-header .logo img { height: 38px; } .xaweho-active #main-menu .navbar-collapse { flex: 1 0 100% !important; order: 100; border-top: 1px solid var(--x-ink-200) !important; margin: 0 -20px !important; padding: 8px 20px !important; background: #fff; } .xaweho-active #main-menu .navbar-collapse.collapse:not(.in) { display: none !important; } .xaweho-active #main-menu .navbar-collapse.in { display: block !important; } .xaweho-active #main-menu .navbar-nav { display: block !important; } .xaweho-active #main-menu .navbar-nav > li > a { padding: 12px 0 !important; } .xaweho-active #main-menu .navbar-nav > li.active > a::after { display: none !important; } .xaweho-active #main-menu .dropdown-menu { box-shadow: none !important; border: 0 !important; background: var(--x-ink-50) !important; border-radius: 8px !important; margin: 4px 0 8px 12px !important; padding: 4px !important; } .xaweho-active.xaweho-header-merged #main-menu .top-nav { margin-left: auto !important; order: 50; } .xaweho-active.xaweho-header-merged #main-menu .top-nav > li:not(.primary-action) > a { display: none; } .xaweho-active.xaweho-header-merged #main-menu .top-nav > li.primary-action > a { padding: 7px 14px !important; font-size: 13px !important; } } /* ============================================================================ SEKUNDÄR-NAV (Service-Tabs etc.) ============================================================================ */ .xaweho-active .navbar-secondary { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--x-ink-200) !important; border-radius: 0 !important; min-height: 48px; margin-bottom: 0; box-shadow: none !important; } .xaweho-active .navbar-secondary .nav > li > a { color: var(--x-ink-600) !important; font-weight: 500; font-size: 14px; padding: 14px 16px !important; background: transparent !important; } .xaweho-active .navbar-secondary .nav > li > a:hover { color: var(--x-ink-900) !important; } .xaweho-active .navbar-secondary .nav > li.active > a { color: var(--x-brand-600) !important; background: transparent !important; border-bottom: 2px solid var(--x-brand-500); margin-bottom: -1px; } /* ============================================================================ BUTTONS ============================================================================ */ .xaweho-active .btn { border-radius: var(--x-radius-button) !important; font-weight: 600 !important; border: 1px solid transparent !important; padding: 8px 16px !important; font-size: 14px !important; line-height: 1.4 !important; transition: all .15s ease !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: var(--x-shadow-sm) !important; text-shadow: none !important; } .xaweho-active .btn:focus, .xaweho-active .btn.focus { outline: 0 !important; box-shadow: 0 0 0 3px rgba(244, 138, 105, 0.25), var(--x-shadow-sm) !important; } .xaweho-active .btn-primary, .xaweho-active .btn-success { background-color: var(--x-brand-500) !important; border-color: var(--x-brand-500) !important; color: #fff !important; background-image: none !important; box-shadow: var(--x-shadow-brand) !important; } .xaweho-active .btn-primary:hover, .xaweho-active .btn-primary:focus, .xaweho-active .btn-primary:active, .xaweho-active .btn-primary.active, .xaweho-active .btn-success:hover, .xaweho-active .btn-success:focus, .xaweho-active .btn-success:active, .xaweho-active .btn-success.active, .xaweho-active .open > .btn-primary.dropdown-toggle { background-color: var(--x-brand-600) !important; border-color: var(--x-brand-600) !important; color: #fff !important; background-image: none !important; } .xaweho-active .btn-primary[disabled], .xaweho-active .btn-primary.disabled, .xaweho-active .btn-success[disabled], .xaweho-active .btn-success.disabled { background-color: var(--x-brand-300) !important; border-color: var(--x-brand-300) !important; opacity: 1 !important; } .xaweho-active .btn-default { background: #fff !important; border-color: var(--x-ink-300) !important; color: var(--x-ink-800) !important; background-image: none !important; } .xaweho-active .btn-default:hover, .xaweho-active .btn-default:focus, .xaweho-active .btn-default:active, .xaweho-active .open > .btn-default.dropdown-toggle { background: var(--x-ink-100) !important; border-color: var(--x-ink-400) !important; color: var(--x-ink-900) !important; } .xaweho-active .btn-info { background-color: var(--x-ink-800) !important; border-color: var(--x-ink-800) !important; color: #fff !important; background-image: none !important; } .xaweho-active .btn-info:hover, .xaweho-active .btn-info:focus { background-color: var(--x-ink-950) !important; border-color: var(--x-ink-950) !important; } .xaweho-active .btn-warning { background-color: var(--x-brand-400) !important; border-color: var(--x-brand-400) !important; color: var(--x-ink-900) !important; background-image: none !important; } .xaweho-active .btn-warning:hover, .xaweho-active .btn-warning:focus { background-color: var(--x-brand-500) !important; border-color: var(--x-brand-500) !important; color: #fff !important; } .xaweho-active .btn-danger { background-color: var(--x-danger) !important; border-color: var(--x-danger) !important; color: #fff !important; background-image: none !important; } .xaweho-active .btn-danger:hover, .xaweho-active .btn-danger:focus { background-color: #b91c1c !important; border-color: #b91c1c !important; } .xaweho-active .btn-link { color: var(--x-brand-600) !important; box-shadow: none !important; font-weight: 500 !important; } .xaweho-active .btn-link:hover { color: var(--x-brand-700) !important; } .xaweho-active .btn-lg, .xaweho-active .btn-group-lg > .btn { padding: 12px 24px !important; font-size: 16px !important; } .xaweho-active .btn-sm, .xaweho-active .btn-group-sm > .btn { padding: 6px 12px !important; font-size: 12.5px !important; } .xaweho-active .btn-xs, .xaweho-active .btn-group-xs > .btn { padding: 3px 8px !important; font-size: 11.5px !important; } /* ============================================================================ FORMS ============================================================================ */ .xaweho-active .form-control { border: 1px solid var(--x-ink-300) !important; border-radius: var(--x-radius-button) !important; box-shadow: none !important; height: auto !important; padding: 10px 12px !important; font-size: 14px !important; color: var(--x-ink-900) !important; background: #fff !important; transition: border-color .15s ease, box-shadow .15s ease; line-height: 1.5; } .xaweho-active .form-control:focus { border-color: var(--x-brand-500) !important; box-shadow: 0 0 0 3px rgba(244,138,105,0.15) !important; outline: 0 !important; } .xaweho-active .form-control::placeholder { color: var(--x-ink-400); } .xaweho-active .input-group-addon, .xaweho-active .input-group-btn .btn-default { background: var(--x-ink-100) !important; border-color: var(--x-ink-300) !important; color: var(--x-ink-700) !important; border-radius: var(--x-radius-button) !important; } .xaweho-active label, .xaweho-active .control-label { font-weight: 600 !important; color: var(--x-ink-800) !important; font-size: 14px !important; margin-bottom: 6px !important; } .xaweho-active .help-block, .xaweho-active .form-text { color: var(--x-ink-500) !important; } .xaweho-active .has-error .form-control { border-color: var(--x-danger) !important; } .xaweho-active .has-error .control-label, .xaweho-active .has-error .help-block { color: var(--x-danger) !important; } .xaweho-active .has-success .form-control { border-color: var(--x-success) !important; } .xaweho-active .has-success .control-label { color: var(--x-success) !important; } .xaweho-active .checkbox label, .xaweho-active .radio label { font-weight: 400 !important; color: var(--x-ink-800) !important; } /* ============================================================================ PANELS / WELLS ============================================================================ */ .xaweho-active .panel { background: #fff !important; border: 1px solid var(--x-ink-200) !important; border-radius: var(--x-radius-card) !important; box-shadow: var(--x-shadow-sm) !important; margin-bottom: 24px !important; } .xaweho-active .panel-heading { background: #fff !important; border-bottom: 1px solid var(--x-ink-200) !important; border-top-left-radius: var(--x-radius-card) !important; border-top-right-radius: var(--x-radius-card) !important; padding: 16px 20px !important; font-weight: 600 !important; color: var(--x-ink-900) !important; } .xaweho-active .panel-title { font-size: 1rem !important; font-weight: 600 !important; color: var(--x-ink-900) !important; } .xaweho-active .panel-body { padding: 20px !important; } .xaweho-active .panel-footer { background: var(--x-ink-50) !important; border-top: 1px solid var(--x-ink-200) !important; border-bottom-left-radius: var(--x-radius-card) !important; border-bottom-right-radius: var(--x-radius-card) !important; padding: 14px 20px !important; color: var(--x-ink-600); } .xaweho-active .panel-primary { border-color: var(--x-brand-500) !important; } .xaweho-active .panel-primary > .panel-heading { background: var(--x-brand-500) !important; color: #fff !important; border-bottom-color: var(--x-brand-500) !important; } .xaweho-active .panel-primary > .panel-heading .panel-title { color: #fff !important; } .xaweho-active .panel-info { border-color: var(--x-brand-200) !important; } .xaweho-active .panel-info > .panel-heading { background: var(--x-brand-50) !important; color: var(--x-brand-800) !important; border-bottom-color: var(--x-brand-200) !important; } .xaweho-active .panel-success { border-color: #a7f3d0 !important; } .xaweho-active .panel-success > .panel-heading { background: var(--x-success-bg) !important; color: #065f46 !important; border-bottom-color: #a7f3d0 !important; } .xaweho-active .panel-warning { border-color: #fde68a !important; } .xaweho-active .panel-warning > .panel-heading { background: var(--x-warning-bg) !important; color: #78350f !important; border-bottom-color: #fde68a !important; } .xaweho-active .panel-danger { border-color: #fecaca !important; } .xaweho-active .panel-danger > .panel-heading { background: var(--x-danger-bg) !important; color: #991b1b !important; border-bottom-color: #fecaca !important; } .xaweho-active .well { background: #fff !important; border: 1px solid var(--x-ink-200) !important; border-radius: var(--x-radius-card) !important; box-shadow: none !important; padding: 20px !important; } /* ============================================================================ TILES (WHMCS 8 Dashboard) ============================================================================ */ .xaweho-active .tile, .xaweho-active .tile-bordered, .xaweho-active .tile-action { background: #fff !important; border: 1px solid var(--x-ink-200) !important; border-radius: var(--x-radius-card) !important; box-shadow: var(--x-shadow-sm) !important; transition: all .15s ease; padding: 20px !important; } .xaweho-active .tile:hover, .xaweho-active .tile-bordered:hover, .xaweho-active .tile-action:hover { border-color: var(--x-brand-300) !important; box-shadow: var(--x-shadow-md) !important; transform: translateY(-1px); } .xaweho-active .tile .number-highlight, .xaweho-active .tile h3 { color: var(--x-ink-900) !important; font-weight: 700 !important; } .xaweho-active .tile .tile-bottom, .xaweho-active .tile-bottom { border-top: 1px solid var(--x-ink-200) !important; background: var(--x-ink-50) !important; margin: 16px -20px -20px !important; padding: 12px 20px !important; border-bottom-left-radius: var(--x-radius-card); border-bottom-right-radius: var(--x-radius-card); color: var(--x-ink-600); font-size: 13px; } .xaweho-active .tile-bottom a { color: var(--x-brand-600) !important; font-weight: 500 !important; } .xaweho-active .tile i.fa, .xaweho-active .tile i.fas, .xaweho-active .tile i.far { color: var(--x-brand-500) !important; } /* ============================================================================ PAGE HEADER (Six's .header-lined) ============================================================================ */ .xaweho-active .header-lined { border-bottom: 1px solid var(--x-ink-200) !important; padding: 0 0 16px !important; margin: 32px 0 24px !important; } .xaweho-active .header-lined h1, .xaweho-active .header-lined h2 { font-size: 1.875rem !important; font-weight: 700 !important; margin: 0 !important; color: var(--x-ink-900) !important; } .xaweho-active .header-lined h1 small, .xaweho-active .header-lined h2 small { display: block !important; margin-top: 6px !important; color: var(--x-ink-500) !important; font-size: 14px !important; font-weight: 400 !important; } .xaweho-active .section-title, .xaweho-active .h1.section-title { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--x-ink-900) !important; border-bottom: 1px solid var(--x-ink-200) !important; padding-bottom: 12px !important; margin: 32px 0 20px !important; } .xaweho-active .page-header { border-bottom: 1px solid var(--x-ink-200) !important; padding: 0 0 16px !important; margin: 24px 0 24px !important; } .xaweho-active .page-header h1, .xaweho-active .page-header .h1 { font-size: 1.875rem !important; margin: 0 !important; } /* ============================================================================ LOGIN CONTAINER ============================================================================ */ .xaweho-active .logincontainer { background: #fff !important; padding: 36px !important; border: 1px solid var(--x-ink-200) !important; border-radius: var(--x-radius-card) !important; box-shadow: var(--x-shadow-md) !important; max-width: 480px !important; margin: 48px auto !important; } .xaweho-active .logincontainer .header-lined { margin-top: 0 !important; } .xaweho-active .login-form .form-group { margin-bottom: 16px; } /* ============================================================================ MAIN-BODY / CONTENT-WRAPPER ============================================================================ */ .xaweho-active #main-body { padding: 32px 0 60px !important; } .xaweho-active .main-content { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================================ TABLES ============================================================================ */ .xaweho-active .table-container, .xaweho-active .table-responsive { border: 1px solid var(--x-ink-200); border-radius: var(--x-radius-card); overflow: hidden; background: #fff; margin-bottom: 24px; } .xaweho-active .table { margin-bottom: 0 !important; background: #fff; color: var(--x-ink-900); } .xaweho-active .table > thead > tr > th { background: var(--x-ink-50) !important; border-bottom: 1px solid var(--x-ink-200) !important; border-top: 0 !important; color: var(--x-ink-600) !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; padding: 12px 16px !important; vertical-align: middle; } .xaweho-active .table > tbody > tr > td { border-top: 1px solid var(--x-ink-200) !important; padding: 14px 16px !important; vertical-align: middle; color: var(--x-ink-800); } .xaweho-active .table > tbody > tr:first-child > td { border-top: 0 !important; } .xaweho-active .table-hover > tbody > tr:hover { background: var(--x-ink-50) !important; } .xaweho-active .table-striped > tbody > tr:nth-of-type(odd) { background: #fff; } .xaweho-active .table-striped > tbody > tr:nth-of-type(even) { background: var(--x-ink-50); } /* ============================================================================ ALERTS / LABELS / BADGES ============================================================================ */ .xaweho-active .alert { border: 1px solid !important; border-radius: var(--x-radius-card) !important; padding: 14px 18px !important; font-size: 14px; } .xaweho-active .alert-success { background: var(--x-success-bg) !important; border-color: #a7f3d0 !important; color: #065f46 !important; } .xaweho-active .alert-info { background: var(--x-brand-50) !important; border-color: var(--x-brand-200) !important; color: var(--x-brand-800) !important; } .xaweho-active .alert-warning { background: var(--x-warning-bg) !important; border-color: #fde68a !important; color: #78350f !important; } .xaweho-active .alert-danger { background: var(--x-danger-bg) !important; border-color: #fecaca !important; color: #991b1b !important; } .xaweho-active .alert a { color: inherit !important; text-decoration: underline !important; font-weight: 600 !important; } .xaweho-active .label, .xaweho-active .badge { font-weight: 600 !important; padding: 3px 9px !important; border-radius: var(--x-radius-pill) !important; font-size: 11.5px !important; letter-spacing: 0.02em !important; } .xaweho-active .label-default { background: var(--x-ink-100) !important; color: var(--x-ink-700) !important; } .xaweho-active .label-primary { background: var(--x-brand-500) !important; color: #fff !important; } .xaweho-active .label-success { background: #d1fae5 !important; color: #065f46 !important; } .xaweho-active .label-info { background: var(--x-brand-100) !important; color: var(--x-brand-700) !important; } .xaweho-active .label-warning { background: #fef3c7 !important; color: #78350f !important; } .xaweho-active .label-danger { background: #fee2e2 !important; color: #991b1b !important; } .xaweho-active .badge { background: var(--x-brand-500) !important; color: #fff !important; } /* ============================================================================ BREADCRUMBS / TABS / PILLS / PAGINATION ============================================================================ */ .xaweho-active .breadcrumb { background: transparent !important; padding: 8px 0 20px !important; font-size: 13px !important; color: var(--x-ink-500) !important; border-radius: 0 !important; margin-bottom: 0 !important; } .xaweho-active .breadcrumb > li + li::before { content: '›' !important; color: var(--x-ink-400) !important; padding: 0 8px !important; } .xaweho-active .breadcrumb > li > a { color: var(--x-ink-600) !important; } .xaweho-active .breadcrumb > li > a:hover { color: var(--x-brand-600) !important; } .xaweho-active .breadcrumb > .active { color: var(--x-ink-900) !important; font-weight: 500 !important; } .xaweho-active .nav-tabs { border-bottom: 1px solid var(--x-ink-200) !important; margin-bottom: 20px; } .xaweho-active .nav-tabs > li { margin-bottom: -1px; } .xaweho-active .nav-tabs > li > a { border: 0 !important; border-radius: 0 !important; color: var(--x-ink-600) !important; background: transparent !important; padding: 12px 18px !important; font-weight: 500 !important; margin-right: 4px !important; border-bottom: 2px solid transparent !important; } .xaweho-active .nav-tabs > li > a:hover { color: var(--x-ink-900) !important; border-bottom-color: var(--x-ink-300) !important; } .xaweho-active .nav-tabs > li.active > a, .xaweho-active .nav-tabs > li.active > a:hover { color: var(--x-brand-600) !important; border-bottom: 2px solid var(--x-brand-500) !important; font-weight: 600 !important; } .xaweho-active .nav-pills > li > a { border-radius: var(--x-radius-button) !important; color: var(--x-ink-700) !important; font-weight: 500 !important; } .xaweho-active .nav-pills > li.active > a { background: var(--x-brand-500) !important; color: #fff !important; } .xaweho-active .pagination > li > a, .xaweho-active .pagination > li > span { color: var(--x-ink-700) !important; background: #fff !important; border-color: var(--x-ink-200) !important; } .xaweho-active .pagination > .active > a, .xaweho-active .pagination > .active > span { background: var(--x-brand-500) !important; border-color: var(--x-brand-500) !important; color: #fff !important; } /* ============================================================================ MODALS ============================================================================ */ .xaweho-active .modal-content { border: 1px solid var(--x-ink-200) !important; border-radius: var(--x-radius-card) !important; box-shadow: var(--x-shadow-xl) !important; } .xaweho-active .modal-header { border-bottom: 1px solid var(--x-ink-200) !important; padding: 16px 20px !important; } .xaweho-active .modal-title { font-weight: 600 !important; } .xaweho-active .modal-body { padding: 20px !important; } .xaweho-active .modal-footer { border-top: 1px solid var(--x-ink-200) !important; padding: 14px 20px !important; } .xaweho-active .modal-backdrop.in { opacity: 0.6 !important; background: var(--x-ink-900) !important; } /* ============================================================================ LIST GROUPS / SIDEBAR ============================================================================ */ .xaweho-active .list-group-item { border: 1px solid var(--x-ink-200) !important; background: #fff !important; color: var(--x-ink-800) !important; padding: 12px 16px !important; } .xaweho-active .list-group-item.active, .xaweho-active .list-group-item.active:hover, .xaweho-active .list-group-item.active:focus { background: var(--x-brand-500) !important; border-color: var(--x-brand-500) !important; color: #fff !important; } .xaweho-active .list-group-item:hover { background: var(--x-ink-50) !important; } .xaweho-active .list-group-item.active:hover { background: var(--x-brand-600) !important; } /* ============================================================================ ORDER / CART ============================================================================ */ .xaweho-active .order-summary { background: #fff !important; border: 1px solid var(--x-ink-200) !important; border-radius: var(--x-radius-card) !important; padding: 20px !important; box-shadow: var(--x-shadow-sm) !important; } /* ============================================================================ UTILITIES ============================================================================ */ .xaweho-active .text-primary { color: var(--x-brand-600) !important; } .xaweho-active .text-success { color: var(--x-success) !important; } .xaweho-active .text-warning { color: #78350f !important; } .xaweho-active .text-danger { color: var(--x-danger) !important; } .xaweho-active .text-muted { color: var(--x-ink-500) !important; } .xaweho-active .text-info { color: var(--x-brand-700) !important; } .xaweho-active .bg-primary { background-color: var(--x-brand-500) !important; color: #fff !important; } .xaweho-active .progress { background: var(--x-ink-100) !important; border-radius: var(--x-radius-pill) !important; box-shadow: none !important; height: 8px !important; } .xaweho-active .progress-bar { background: var(--x-brand-500) !important; } .xaweho-active .progress-bar-success { background: var(--x-success) !important; } .xaweho-active .progress-bar-warning { background: var(--x-warning) !important; } .xaweho-active .progress-bar-danger { background: var(--x-danger) !important; } .xaweho-active .number-highlight { font-size: 2rem !important; font-weight: 700 !important; color: var(--x-ink-900) !important; } /* Back-to-top arrow in Six's original footer (we hide that anyway, but extra) */ .xaweho-active .back-to-top { display: none !important; } /* "Powered by WHMCompleteSolution" — freistehender

direkt in .main-content. Mit :has() unterstützt von Safari 15.4+, Chrome 105+, Firefox 121+ (>97% global). */ .xaweho-active .main-content > p:has(a[href*="whmcs.com"]), .xaweho-active p:has(> a[href*="whmcs.com"]), .xaweho-active p.powered-by { display: none !important; } /* JS-Fallback wird zusätzlich in xaweho_theme.php gesetzt. */ /* ============================================================================ FOOTER (Six-Original verstecken, xaweho-Footer formatieren) ============================================================================ */ .xaweho-active #footer:not(#xaweho-footer) { display: none !important; } .xaweho-active #xaweho-footer.xaweho-footer { background: var(--x-ink-950) !important; color: var(--x-ink-300) !important; border-top: 1px solid var(--x-ink-800); margin-top: 60px; padding: 0; font-size: 14px; } .xaweho-active .xaweho-footer .container { max-width: var(--x-container) !important; padding: 0 20px !important; } .xaweho-active .xaweho-footer .xaweho-footer-cols { padding: 48px 0; display: flex; flex-wrap: wrap; gap: 32px 24px; margin: 0; } .xaweho-active .xaweho-footer .xaweho-footer-cols > [class*="col-"] { padding: 0; flex: 1 1 160px; } .xaweho-active .xaweho-footer .xaweho-footer-brand { flex: 2 1 280px !important; } .xaweho-active .xaweho-footer h4 { color: #fff !important; font-size: 13px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 0 0 14px !important; } .xaweho-active .xaweho-footer ul.list-unstyled li { padding: 4px 0; } .xaweho-active .xaweho-footer a { color: var(--x-ink-300) !important; text-decoration: none !important; transition: color .15s ease; } .xaweho-active .xaweho-footer a:hover, .xaweho-active .xaweho-footer a:focus { color: #fff !important; } .xaweho-active .xaweho-footer-brand .xaweho-footer-logo { height: 32px; width: auto; margin-bottom: 16px; display: block; } .xaweho-active .xaweho-footer-brand p { color: var(--x-ink-300) !important; line-height: 1.6; margin: 0; } .xaweho-active .xaweho-footer-bottom { border-top: 1px solid var(--x-ink-800) !important; padding: 20px 0 24px; font-size: 12px; color: var(--x-ink-400) !important; } .xaweho-active .xaweho-footer-bottom a { color: var(--x-ink-400) !important; } .xaweho-active .xaweho-footer-bottom a:hover { color: #fff !important; } .xaweho-active .xaweho-footer-vat { margin-top: 8px; color: var(--x-ink-500) !important; font-size: 11.5px; } @media (max-width: 767px) { .xaweho-active .xaweho-footer .xaweho-footer-cols { padding: 32px 0 8px; } .xaweho-active .xaweho-footer-bottom .text-right { text-align: left !important; margin-top: 4px; } } /* ============================================================================ PRINT ============================================================================ */ @media print { .xaweho-active #header, .xaweho-active #main-menu, .xaweho-active #footer, .xaweho-active #xaweho-footer, .xaweho-active .breadcrumb { display: none !important; } .xaweho-active body { background: #fff !important; } }