/* ================================================================
docuFORM – NEXOWARE CI Rebranding
Custom CSS Override für Canvas Theme (SemicolonWeb)
Basierend auf: Nexoware_Design-Manual_v2.pdf
Zielseite: docuform.de (HTML5 / Canvas Theme)
Einbindung in NACH style.css, VOR custom.css:
================================================================ */
/* ================================================================
1. CI-FARBEN & SCHRIFTEN
Design Manual S.21-23, S.28-29
================================================================ */
:root {
/* --- Primärfarben (S.21) --- */
--nxw-deep-blue: #151D2E;
--nxw-deep-blue-rgb: 21, 29, 46;
--nxw-bold-orange: #FF4602;
--nxw-bold-orange-rgb: 255, 70, 2;
/* --- Sekundärfarben (S.22) --- */
--nxw-light-blue: #DCE5ED;
--nxw-light-blue-rgb: 220, 229, 237;
--nxw-white: #FFFFFF;
/* --- Tertiärfarben (S.23, nur Diagramme) --- */
--nxw-tertiary-blue: #708FFF;
--nxw-tertiary-green: #31F08F;
--nxw-tertiary-yellow: #FFC859;
--nxw-tertiary-purple: #D266FF;
/* --- Canvas Theme Color Overrides --- */
--cnvs-themecolor: var(--nxw-bold-orange);
--cnvs-themecolor-rgb: var(--nxw-bold-orange-rgb);
--cnvs-body-font: 'Aeonik Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--cnvs-primary-font: 'Aeonik Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--cnvs-secondary-font: 'Aeonik Pro', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--cnvs-heading-color: var(--nxw-deep-blue);
/* --- Bootstrap Overrides --- */
--bs-link-color: var(--nxw-deep-blue);
--bs-link-hover-color: var(--nxw-bold-orange);
--bs-primary: var(--nxw-bold-orange);
--bs-primary-rgb: var(--nxw-bold-orange-rgb);
}
/* ================================================================
2. GRUNDLEGENDE TYPOGRAFIE (Design Manual S.28-30)
Medium (500) für Überschriften
Regular (400) für Fließtext
SemiBold (600) für Auszeichnungen
================================================================ */
body {
font-family: var(--cnvs-body-font) !important;
color: var(--nxw-deep-blue);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--cnvs-primary-font) !important;
font-weight: 500;
color: var(--nxw-deep-blue);
}
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .h1, .dark .h2, .dark .h3, .dark .h4 {
color: var(--nxw-white) !important;
}
::selection {
background: var(--nxw-bold-orange);
color: var(--nxw-white);
}
::-moz-selection {
background: var(--nxw-bold-orange);
color: var(--nxw-white);
}
/* ================================================================
3. HEADER / NAVIGATION – Deep Blue
Canvas Theme: #header, #header-wrap, .menu-item, .menu-link
Berücksichtigt: header.dark (index) + header.transparent-header (Unterseiten)
================================================================ */
/* Alle Header-Varianten → Deep Blue */
#header,
#header-wrap,
#header.dark #header-wrap,
#header.sticky-header #header-wrap,
#header.transparent-header.sticky-header #header-wrap {
background-color: var(--nxw-deep-blue) !important;
}
.header-wrap-clone {
background-color: var(--nxw-deep-blue) !important;
}
/* Transparent Header: auch Deep Blue als Standard */
#header.transparent-header {
background-color: var(--nxw-deep-blue);
}
/* Nav-Links → Weiß, Hover → Bold Orange */
.menu-container > .menu-item > .menu-link {
color: rgba(255, 255, 255, 0.9) !important;
font-family: var(--cnvs-primary-font) !important;
font-weight: 500;
transition: color 0.3s ease;
}
.menu-container > .menu-item:hover > .menu-link,
.menu-container > .menu-item.current > .menu-link {
color: var(--nxw-bold-orange) !important;
}
/* Mega-Menu Rahmen → Orange Top-Border */
.mega-menu-content {
border-top: 2px solid var(--nxw-bold-orange) !important;
}
/* Mega-Menu: Überschriften (h5) im hellen Bereich → Deep Blue */
.mega-menu-content h5,
.mega-menu-content .not-dark h5,
.mega-menu-content .fbox-content h5 {
color: var(--nxw-deep-blue) !important;
}
/* Mega-Menu: Beschreibungstexte → bleiben dunkel */
.mega-menu-content .fbox-content p,
.mega-menu-content .text-black-50 {
color: rgba(21, 29, 46, 0.55) !important;
}
/* Mega-Menu: Rechte Spalte (Weitere Kategorien) */
.mega-menu-content .bg-light .menu-link div,
.mega-menu-content .bg-light a,
.mega-menu-content .mega-menu-column.bg-light .menu-link div,
.mega-menu-content .mega-menu-column.bg-light .sub-menu-container .menu-link div {
color: var(--nxw-deep-blue) !important;
}
.mega-menu-content .bg-light .menu-link:hover div,
.mega-menu-content .mega-menu-column.bg-light .menu-link:hover div {
color: var(--nxw-bold-orange) !important;
}
/* Mega-Menu: "Weitere Kategorien" Titel */
.mega-menu-content .mega-menu-title .menu-link div,
.mega-menu-content .mega-menu-title > a div {
color: var(--nxw-deep-blue) !important;
font-weight: 600;
}
/* "Demoversion anfragen" Button im Mega-Menu */
.mega-menu-content .button.bg-color {
background-color: var(--nxw-bold-orange) !important;
color: var(--nxw-white) !important;
border: none;
}
.mega-menu-content .button.bg-color:hover {
background-color: #E63E00 !important;
}
/* Bold Orange CTA Button (allgemein) */
.btn-nxw-orange {
background-color: var(--nxw-bold-orange) !important;
color: var(--nxw-white) !important;
border: none !important;
border-radius: 50px;
padding: 10px 28px;
font-weight: 500;
transition: background-color 0.3s ease;
}
.btn-nxw-orange:hover {
background-color: #E63E00 !important;
color: var(--nxw-white) !important;
}
/* Alle CTA Buttons generell → Bold Orange Pill */
.btn-secondary,
.btn-primary,
.button.bg-color,
.button.button-rounded,
.button.button-large,
a.btn-secondary,
a.btn-primary,
a.button.bg-color,
a.button.button-rounded {
background-color: var(--nxw-bold-orange) !important;
color: var(--nxw-white) !important;
border: none !important;
border-radius: 50px !important;
padding: 10px 28px !important;
font-weight: 500;
transition: background-color 0.3s ease;
}
.btn-secondary:hover,
.btn-primary:hover,
.button.bg-color:hover,
.button.button-rounded:hover,
.button.button-large:hover,
a.btn-secondary:hover,
a.btn-primary:hover,
a.button.bg-color:hover,
a.button.button-rounded:hover {
background-color: #E63E00 !important;
color: var(--nxw-white) !important;
}
/* ================================================================
HELLE ABSCHNITTE: Light Blue #DCE5ED statt hellgrau #F5F5F5
================================================================ */
/* Helle Sektionen generell */
body,
.content-wrap,
.bg-light,
.bg-transparent,
.section:not(.dark):not(.bg-color-primary),
#content > .content-wrap > .section:not(.dark),
#content,
section#content {
background-color: var(--nxw-light-blue) !important;
}
/* Footer-Übergang: kein weißer Bereich */
#footer {
background-color: var(--nxw-deep-blue) !important;
}
/* Kein Abstand zwischen Content und Footer */
.content-wrap {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#content {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Shape Divider Fills: F5F5F5 → Light Blue */
.shape-divider-fill[fill="#F5F5F5"],
.shape-divider-fill[fill="#f5f5f5"] {
fill: var(--nxw-light-blue) !important;
}
/* Mega-Menu Feature-Box Hover-Pfeile */
.primary-menu:not(.on-click) .menu-item.mega-menu-small > .mega-menu-content .feature-box .bi-arrow-right {
opacity: 0;
transition: all .3s ease;
}
.primary-menu:not(.on-click) .menu-item > .mega-menu-content .feature-box:hover .bi-arrow-right {
opacity: 1;
transform: translateX(10px);
color: var(--nxw-bold-orange) !important;
}
.primary-menu:not(.on-click) .menu-item.mega-menu-small > .mega-menu-content .mega-menu-column {
padding: 20px 0;
}
@media (min-width: 992px) {
.primary-menu .menu-item.mega-menu-small > .mega-menu-content {
width: 660px;
left: auto;
right: 0;
border: 0;
border-top: 2px solid var(--nxw-bold-orange);
border-radius: 0 0 8px 8px;
box-shadow: 0px 10px 70px rgba(21, 29, 46, 0.25);
margin-top: -15px !important;
overflow: hidden;
}
.primary-menu:not(.on-click) .menu-item.mega-menu-small > .mega-menu-content .mega-menu-column {
padding: 30px;
}
}
/* Sub-Menu Hintergrund (Rechte Spalte im Mega-Menu) */
.mega-menu-content .bg-light,
.mega-menu-content .mega-menu-column.bg-light {
background-color: var(--nxw-light-blue) !important;
}
/* Sicherstellen: Links in der rechten Mega-Menu-Spalte sind dunkel */
.mega-menu-content .bg-light .sub-menu-container .menu-item .menu-link {
color: var(--nxw-deep-blue) !important;
}
.mega-menu-content .bg-light .sub-menu-container .menu-item .menu-link:hover {
color: var(--nxw-bold-orange) !important;
}
/* Kontakt-Button in der Navigation */
.menu-container > .menu-item > a.menu-link.btn-kontakt {
background-color: var(--nxw-bold-orange) !important;
color: var(--nxw-white) !important;
border-radius: 5px;
padding: 8px 20px !important;
margin-left: 10px;
transition: all 0.3s ease;
}
.menu-container > .menu-item > a.menu-link.btn-kontakt:hover {
background-color: #E63E00 !important;
color: var(--nxw-white) !important;
}
/* Hamburger Mobile → Weiß */
.cnvs-hamburger-inner,
.cnvs-hamburger-inner::before,
.cnvs-hamburger-inner::after {
background-color: var(--nxw-white) !important;
}
/* Navigation: Capitalize statt Uppercase */
.primary-menu .menu-link,
.primary-menu .menu-link div,
.menu-container > .menu-item > a.menu-link,
.mega-menu-content .menu-link div,
#header .primary-menu .menu-link {
text-transform: capitalize !important;
}
/* Hero Hintergrundbild vertikal spiegeln */
/* ================================================================
4. HERO-BEREICH – Visionflow Overlay
Klasse: .hero-keyvisual (Startseite), .hero-unterseiten (Unterseiten)
SVG: images/keyvisual-nexoware-unterseiten-centron.svg
================================================================ */
.hero-keyvisual,
.hero-unterseiten {
position: relative;
overflow: visible;
}
/* Hero Überschriften: responsive Größe */
.hero-keyvisual h1,
.hero-keyvisual h2,
.hero-keyvisual .display-4,
.hero-unterseiten h1,
.hero-unterseiten h2,
.hero-unterseiten .display-4 {
font-size: clamp(2rem, 0.8816rem + 3.5789vw, 6.25rem) !important;
line-height: 1.1;
}
/* Hero Text immer weiß */
.hero-keyvisual h2,
.hero-keyvisual h2 span,
.hero-keyvisual .slider-title,
.hero-keyvisual .text.color.white,
.hero-keyvisual .text.white {
color: var(--nxw-white) !important;
}
.hero-keyvisual::before,
.hero-keyvisual::after,
.hero-unterseiten::after,
.hero-unterseiten::before {
display: none !important;
}
.visionflow-divider {
position: relative;
width: 100%;
margin-top: -39vw;
margin-bottom: -1px;
z-index: 10;
pointer-events: none;
line-height: 0;
font-size: 0;
background: transparent;
}
.visionflow-divider svg {
display: block;
width: 100%;
height: auto;
}
/* Alte HTML-Elemente ausblenden */
.visionflow-wrapper,
.hero-visionflow,
.hero-visionflow-solid {
display: none !important;
}
/* Alle Inhalte im Hero über dem Overlay */
.hero-keyvisual > *,
.hero-unterseiten > * {
position: relative;
z-index: 2;
}
/* Cert-Logos im Hero */
.hero-keyvisual .cert-logos,
.cert-logos {
position: absolute;
bottom: 100px;
left: 30px;
display: flex;
gap: 30px;
align-items: center;
z-index: 2;
}
/* Hero Hintergrund (Startseite) */
.hero-keyvisual {
background-color: var(--nxw-deep-blue) !important;
}
/* ================================================================
5. CANVAS THEME – Farbklassen-Overrides
================================================================ */
/* Primäre Sektion → Deep Blue */
.section.dark.bg-color-primary,
.bg-color-primary {
background-color: var(--nxw-deep-blue) !important;
}
/* Canvas .bg-color (Theme Color) → Bold Orange */
.bg-color {
background-color: var(--nxw-bold-orange) !important;
}
/* Hero Features Bar */
.hero-features.bg-color {
background-color: var(--nxw-bold-orange) !important;
}
/* Canvas .color Klasse → Bold Orange Text */
.color:not(.white) {
color: var(--nxw-bold-orange) !important;
}
/* ================================================================
6. BUTTONS (Design Manual S.25)
================================================================ */
.button,
a.button {
font-family: var(--cnvs-primary-font) !important;
font-weight: 500;
transition: all 0.3s ease;
}
/* Submit/CTA Buttons */
.button.bg-dark,
.button.button-dark {
background-color: var(--nxw-deep-blue) !important;
border-color: var(--nxw-deep-blue) !important;
}
.button.bg-dark:hover,
.button.button-dark:hover {
background-color: var(--nxw-bold-orange) !important;
border-color: var(--nxw-bold-orange) !important;
}
/* Canvas .button-color → Bold Orange */
.button.button-color,
.button.bg-color {
background-color: var(--nxw-bold-orange) !important;
border-color: var(--nxw-bold-orange) !important;
}
.button.button-color:hover,
.button.bg-color:hover {
background-color: #E63E00 !important;
border-color: #E63E00 !important;
}
/* ================================================================
7. CARDS / MODUL-KACHELN
================================================================ */
.card {
border-radius: 8px;
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(21, 29, 46, 0.15);
}
/* ================================================================
8. PRODUKTKARTEN (Startseite) – Weiß mit Deep Blue Text
================================================================ */
.gradient-mps, .gradient-gpc, .gradient-f2p,
.gradient-mcs, .gradient-atlas, .gradient-oms {
background: var(--nxw-white) !important;
color: var(--nxw-deep-blue) !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.gradient-mps:hover, .gradient-gpc:hover, .gradient-f2p:hover,
.gradient-mcs:hover, .gradient-atlas:hover, .gradient-oms:hover {
box-shadow: 0 6px 24px rgba(0,0,0,0.12);
transform: translateY(-3px);
}
/* Card-Text → Deep Blue */
.gradient-mps h3, .gradient-gpc h3, .gradient-f2p h3,
.gradient-mcs h3, .gradient-atlas h3, .gradient-oms h3,
.gradient-mps .card-title, .gradient-gpc .card-title, .gradient-f2p .card-title,
.gradient-mcs .card-title, .gradient-atlas .card-title, .gradient-oms .card-title {
color: var(--nxw-deep-blue) !important;
}
.gradient-mps .card-text, .gradient-gpc .card-text, .gradient-f2p .card-text,
.gradient-mcs .card-text, .gradient-atlas .card-text, .gradient-oms .card-text {
color: var(--nxw-deep-blue) !important;
opacity: 0.8;
}
/* Icons in Karten → Orange */
.gradient-mps i, .gradient-gpc i, .gradient-f2p i,
.gradient-mcs i, .gradient-atlas i, .gradient-oms i {
color: var(--nxw-bold-orange) !important;
}
/* Card SVG-Icons (#333) → Bold Orange via CSS filter
filter berechnet: #333333 → #FF4602 */
.card .card-body img[src$=".svg"],
[class*="gradient-"] img[src$=".svg"] {
filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(4500%) hue-rotate(14deg) brightness(101%) contrast(107%);
}
/* i-plain Icons in Karten (z.B. Driverless bi-award-fill) */
[class*="gradient-"] .i-plain,
[class*="gradient-"] .i-plain i {
color: var(--nxw-bold-orange) !important;
}
/* Gradient-Text (Animated Headlines) */
.gradient-text.gradient-red-yellow {
background: linear-gradient(to right, var(--nxw-bold-orange), #FFC859);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-text.gradient-blue-green {
background: linear-gradient(to right, #1689BA, #31F08F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-text.gradient-ocean {
background: linear-gradient(to right, #0D518B, #1BAEDA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ================================================================
9. FOOTER – Deep Blue (Design Manual S.25)
Aktuell: style="background-color: hsl(204, 39%, 81%);"
→ Wird per CSS auf Deep Blue überschrieben
================================================================ */
#footer {
background-color: var(--nxw-deep-blue) !important;
color: var(--nxw-light-blue);
}
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5,
#footer .h1, #footer .h3 {
color: var(--nxw-white) !important;
}
#footer p,
#footer .text-black-50,
#footer span:not(.__cf_email__) {
color: rgba(220, 229, 237, 0.7) !important;
}
#footer a {
color: rgba(255, 255, 255, 0.8) !important;
transition: color 0.3s ease;
}
#footer a:hover {
color: var(--nxw-bold-orange) !important;
}
#footer .widget_links a {
color: rgba(255, 255, 255, 0.7) !important;
}
#footer .widget_links a:hover {
color: var(--nxw-bold-orange) !important;
}
/* Social Icons */
#footer .social-icon {
background-color: rgba(255, 255, 255, 0.1) !important;
border-color: transparent !important;
}
#footer .social-icon:hover {
background-color: var(--nxw-bold-orange) !important;
}
#footer .social-icon i {
color: var(--nxw-white) !important;
}
/* Trennlinien */
#footer .line {
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Footer Big Contacts */
#footer .footer-big-contacts {
color: rgba(255, 255, 255, 0.7);
}
#footer .footer-big-contacts span {
color: rgba(255, 255, 255, 0.5) !important;
}
#footer .text-contrast-400 {
color: rgba(255, 255, 255, 0.3) !important;
}
/* Formular im Footer */
#footer .form-control,
#footer .border-form-control {
background-color: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
color: var(--nxw-white) !important;
}
#footer .form-control::placeholder {
color: rgba(255, 255, 255, 0.3);
}
#footer .form-control:focus {
border-color: var(--nxw-bold-orange) !important;
box-shadow: 0 0 0 0.2rem rgba(255, 70, 2, 0.15);
}
#footer label {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Submit Button im Footer */
#footer .button {
background-color: var(--nxw-bold-orange) !important;
border-color: var(--nxw-bold-orange) !important;
color: var(--nxw-white) !important;
}
#footer .button:hover {
background-color: #E63E00 !important;
border-color: #E63E00 !important;
}
/* Copyrights → see section 11a */
/* ================================================================
10. ACCORDION / FAQ
================================================================ */
.accordion .accordion-header .accordion-title {
font-family: var(--cnvs-primary-font) !important;
font-weight: 500;
color: var(--nxw-deep-blue);
}
.accordion .accordion-header:hover .accordion-title {
color: var(--nxw-bold-orange);
}
/* ================================================================
11. CANVAS-SPEZIFISCHE OVERRIDES
================================================================ */
/* Emphasis Title (animierter Hero-Text) */
.emphasis-title h1,
.emphasis-title h2 {
font-family: var(--cnvs-primary-font) !important;
}
/* Heading-Block Border */
.heading-block.border-color::after {
border-color: var(--nxw-bold-orange) !important;
}
/* GoToTop */
#gotoTop {
background-color: var(--nxw-deep-blue);
}
#gotoTop:hover {
background-color: var(--nxw-bold-orange) !important;
}
/* Badge */
.badge-primary,
.badge-bg.badge-primary {
background-color: var(--nxw-bold-orange) !important;
}
/* Before-Heading */
.before-heading {
font-family: var(--cnvs-secondary-font) !important;
}
/* Feature Boxes */
.fbox-content h3 {
font-family: var(--cnvs-primary-font) !important;
}
/* Tabs */
.tab-nav li a.tab-active {
border-bottom-color: var(--nxw-bold-orange) !important;
color: var(--nxw-bold-orange) !important;
}
/* Cookie Consent Override */
.cc-window.cc-banner {
background-color: var(--nxw-deep-blue) !important;
}
.cc-btn.cc-allow {
background-color: var(--nxw-bold-orange) !important;
color: var(--nxw-white) !important;
}
/* ================================================================
11a. DIVERSE FIXES
================================================================ */
/* span.h6 im dunklen Bereich → Bold Orange statt unsichtbar */
.dark span.h6,
.section.dark span.h6,
.bg-color-primary span.h6 {
color: var(--nxw-bold-orange) !important;
font-weight: 600;
}
/* Hero: Mercury Logo weiß filtern + Subtitle ohne Badge-Hintergrund */
.mercury-hero-logo {
filter: brightness(0) invert(1);
}
.hero-subtitle {
display: inline-block;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
font-weight: 400;
letter-spacing: 1px;
margin-left: 15px;
vertical-align: middle;
}
/* Print anytime, anywhere – Deep Blue auf hellem Hintergrund */
.emphasis-title h2.display-4 {
color: var(--nxw-deep-blue) !important;
}
/* Copyrights: kein Kasten, kein eigener Hintergrund */
#copyrights {
background-color: transparent !important;
background: transparent !important;
border: none !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
padding: 15px 0;
color: rgba(255, 255, 255, 0.4) !important;
}
/* Kontakt-Button: höhere Spezifität für Canvas Theme Override */
.primary-menu .menu-container > .menu-item > a.menu-link.btn-kontakt,
nav.primary-menu .menu-container > .menu-item > a.btn-kontakt,
.menu-container > .menu-item > a.btn-kontakt {
background-color: var(--nxw-bold-orange) !important;
color: var(--nxw-white) !important;
border-radius: 50px !important;
padding: 8px 22px !important;
margin-left: 10px;
line-height: 1.5 !important;
transition: all 0.3s ease;
}
.primary-menu .menu-container > .menu-item > a.menu-link.btn-kontakt:hover,
nav.primary-menu .menu-container > .menu-item > a.btn-kontakt:hover,
.menu-container > .menu-item > a.btn-kontakt:hover {
background-color: #E63E00 !important;
color: var(--nxw-white) !important;
transform: translateY(-1px);
}
/* Visionflow: per ::after auf .hero-keyvisual (docbee-Ansatz) */
/* Vergleichstabelle GPC Header */
.table thead th[style*="nxw-bold-orange"] {
color: #ffffff !important;
}
/* ================================================================
11b. ICONS – Alle in Bold Orange
Mega-Menu Icon-Boxen, Feature-Box Pfeile, i-plain Icons
================================================================ */
/* Mega-Menu: Icon-Boxen – alle auf Orange-Hintergrund (10% Opacity) */
.mega-menu-content .feature-box .square,
.mega-menu-content .feature-box i.square {
background-color: rgba(255, 70, 2, 0.1) !important;
color: var(--nxw-bold-orange) !important;
}
/* Mega-Menu: Alle Pfeil-Icons → Bold Orange */
.mega-menu-content .feature-box .bi-arrow-right {
color: var(--nxw-bold-orange) !important;
}
/* Allgemeine Bootstrap Icon-Farben → Bold Orange
NUR für Icons (i, span mit Icon-Klassen), NICHT für Text-Elemente */
i.text-primary,
i.text-success,
i.text-info,
i.text-warning,
i.text-danger,
i.text-secondary,
span.text-primary,
span.text-success,
span.text-info,
span.text-warning,
span.text-danger,
span.text-secondary {
color: var(--nxw-bold-orange) !important;
}
/* Bootstrap bg-* für Icon-Quadrate → Orange transparent */
.square.bg-primary,
.square.bg-success,
.square.bg-info,
.square.bg-warning,
.square.bg-danger,
.square.bg-secondary {
background-color: rgba(255, 70, 2, 0.1) !important;
}
/* i-plain Icons (z.B. Driverless Printing Karte) */
.i-plain {
color: var(--nxw-bold-orange) !important;
}
/* Feature-Box Icons auf Unterseiten */
.fbox-icon i,
.feature-box .fbox-icon i {
color: var(--nxw-bold-orange) !important;
}
/* Check-Circle Icons (MPS Hero Features etc.) */
.bi-check-circle-fill,
.bi-check-circle {
color: var(--nxw-bold-orange) !important;
}
/* Accordion Plus/Minus Icons */
.accordion .accordion-icon i {
color: var(--nxw-bold-orange) !important;
}
.accordion .accordion-icon .gradient-text {
background: none !important;
-webkit-text-fill-color: var(--nxw-bold-orange) !important;
color: var(--nxw-bold-orange) !important;
}
/* ================================================================
11c. REFERENZKUNDEN-SEKTION – Light Blue Hintergrund statt Dark
================================================================ */
/* Die gesamte Sektion um die Referenzkunden herum (container mt-6)
liegt in .section.dark.bg-color-primary – wir müssen den
Referenz-Bereich heller machen */
/* Referenzkunden-Box selbst → Light Blue statt #F1F1F1 */
.section.dark .section.rounded-6 {
background-color: var(--nxw-light-blue) !important;
}
/* ================================================================
12. UTILITY-KLASSEN
================================================================ */
.text-deep-blue { color: var(--nxw-deep-blue) !important; }
.text-bold-orange { color: var(--nxw-bold-orange) !important; }
.text-light-blue { color: var(--nxw-light-blue) !important; }
.bg-deep-blue { background-color: var(--nxw-deep-blue) !important; }
.bg-bold-orange { background-color: var(--nxw-bold-orange) !important; }
.bg-light-blue { background-color: var(--nxw-light-blue) !important; }
.accent-line {
width: 60px;
height: 3px;
background-color: var(--nxw-bold-orange);
display: block;
margin: 15px 0;
}
/* ================================================================
13. RESPONSIVE
================================================================ */
@media (max-width: 991.98px) {
/* Mobile Navigation → Deep Blue */
.primary-menu .menu-container {
background-color: var(--nxw-deep-blue) !important;
}
.primary-menu .menu-container .menu-item > .menu-link {
color: rgba(255, 255, 255, 0.85) !important;
}
.primary-menu .menu-container .menu-item:hover > .menu-link {
color: var(--nxw-bold-orange) !important;
}
/* Kontakt-Button auf Mobile: volle Breite */
.menu-container > .menu-item > a.menu-link.btn-kontakt {
margin-left: 0;
margin-top: 10px;
text-align: center;
border-radius: 5px;
}
/* Sub-Menu mobile */
.primary-menu .sub-menu-container,
.primary-menu .mega-menu-content {
background-color: rgba(21, 29, 46, 0.95) !important;
}
/* Mega-Menu Inhalt auf Mobile: alle Texte weiß */
.primary-menu .mega-menu-content h5,
.primary-menu .mega-menu-content .fbox-content h5,
.primary-menu .mega-menu-content .feature-box h5 {
color: var(--nxw-white) !important;
}
.primary-menu .mega-menu-content p,
.primary-menu .mega-menu-content .fbox-content p,
.primary-menu .mega-menu-content .text-black-50 {
color: rgba(255, 255, 255, 0.6) !important;
}
.primary-menu .mega-menu-content a,
.primary-menu .mega-menu-content .feature-box {
color: var(--nxw-white) !important;
}
/* Rechte Spalte (Weitere Kategorien) auf Mobile */
.primary-menu .mega-menu-content .bg-light,
.primary-menu .mega-menu-content .mega-menu-column.bg-light {
background-color: rgba(255, 255, 255, 0.08) !important;
}
.primary-menu .mega-menu-content .bg-light .menu-link,
.primary-menu .mega-menu-content .bg-light .menu-link div,
.primary-menu .mega-menu-content .bg-light a,
.primary-menu .mega-menu-content .mega-menu-column.bg-light .menu-link div,
.primary-menu .mega-menu-content .mega-menu-column.bg-light .sub-menu-container .menu-link div,
.primary-menu .mega-menu-content .mega-menu-title .menu-link div,
.primary-menu .mega-menu-content .mega-menu-title > a div,
.primary-menu .mega-menu-content .bg-light .sub-menu-container .menu-item .menu-link {
color: rgba(255, 255, 255, 0.85) !important;
}
.primary-menu .mega-menu-content .bg-light .menu-link:hover div {
color: var(--nxw-bold-orange) !important;
}
/* Demoversion-Button im Mobile Mega-Menu */
.primary-menu .mega-menu-content .button {
color: var(--nxw-white) !important;
}
.primary-menu .sub-menu-container .menu-link {
color: rgba(255, 255, 255, 0.7) !important;
}
.primary-menu .sub-menu-container .menu-link:hover {
color: var(--nxw-bold-orange) !important;
}
/* Hero Visionflow auf Tablet */
.visionflow-divider {
opacity: 0.9;
}
.cert-logos {
position: relative;
bottom: auto;
left: auto;
justify-content: center;
padding: 20px;
}
}
@media (max-width: 767.98px) {
/* Hero auf Mobile: halbe Höhe */
.hero-keyvisual {
min-height: 70vh !important;
background-position: 70% center !important;
}
/* Hero H2 weiter nach oben */
.hero-keyvisual .vertical-middle,
.hero-keyvisual .slider-inner {
padding-top: 80px !important;
align-items: flex-start !important;
}
.hero-keyvisual h2,
.hero-keyvisual h1 {
margin-top: 0 !important;
}
/* Visionflow auf Mobile */
.visionflow-divider {
opacity: 0.85;
}
/* Zertifikate: gleicher Abstand, zentriert */
.cert-logos {
flex-wrap: wrap;
gap: 15px;
}
.cert-logos img {
height: 80px !important;
}
/* Cert-Bilder in Content-Section: gleicher Abstand */
#content .text-center img {
display: block;
margin: 10px auto !important;
}
/* MPS / Unterseiten Hero: mehr Abstand zwischen h2 und p */
.hero-unterseiten h2,
#content h2 {
margin-bottom: 1.2rem;
}
/* Unterseiten: Hero-Bild weiter rechts */
.parallax-bg,
.hero-unterseiten {
background-position: 75% center !important;
}
/* Parallax-Bild auf mobile: rechteren Ausschnitt zeigen */
.parallax.scroll-detect img.parallax-bg {
object-position: 75% center;
}
/* Print anytime Section: weniger Leerraum */
.min-vh-60 {
min-height: 40vh !important;
}
}
/* ================================================================
14. PRINT
================================================================ */
@media print {
#header, #footer, .hero-keyvisual::after, #gotoTop {
display: none !important;
}
body { color: #000; }
}