:root {
	--cnvs-themecolor: #00387b;
	--cnvs-themecolor-rgb: 00, 056, 123;
}

:root {
  /* Social Colors */
  --cnvs-color-email3:	#bc1a00;
  --cnvs-color-email3-rgb:	188, 026, 000;
}

.btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}

/* Hauptmenü: Menüpunkte in Großbuchstaben */
.menu-container > .menu-item > .menu-link,
.menu-container > .menu-item > .menu-link > div,
.menu-container > .menu-item > .menu-link span {
	text-transform: uppercase;
}

/* FAQ: Accordion-Icons dezent grau */
#faq .accordion-icon i,
#faq .accordion-icon .text-success,
#faq .accordion-icon .text-danger {
	color: #666 !important;
}

/* ------------------------------------------------------------
   INOPCO Corporate Design
   Primärfarben: Blau #00387B | Rot #BC1A00 | Gelb #BCA200
------------------------------------------------------------ */

:root {
	--inopco-blue: #00387B;
	--inopco-red: #BC1A00;
	--inopco-yellow: #BCA200;
	--inopco-light-grey: #F5F6F7;
	--inopco-border-grey: #E6E8EB;
}


/* Bereiche: Branchen und FAQ in leichtem Grau */
#branchen .bg-theme-light,
#faq .bg-theme-light {
	background-color: var(--inopco-light-grey) !important;
}


/* Optional: leichte visuelle Trennung */
#branchen,
#industries {
	border-top: none !important;
	border-bottom: 1px solid var(--inopco-border-grey, #E6E8EB);
}


/* ------------------------------------------------------------
   Link-Hover: Rot nur für normale Textlinks
   Aktive Navigation, Buttons und dunkle/blaue Flächen bleiben weiß
------------------------------------------------------------ */

a:not(.button):not(.btn):not(.menu-link):not(.top-phone):not(.social-icon):hover {
	color: var(--inopco-red, #BC1A00);
}


/* Hauptmenü: normaler Hover rot */
.menu-container > .menu-item:not(.current) > .menu-link:hover {
	color: var(--inopco-red, #BC1A00) !important;
}


/* Aktive Menüpunkte bleiben weiß */
.menu-container > .menu-item.current > .menu-link,
.menu-container > .menu-item.current > .menu-link:hover,
.menu-container > .menu-item.current > .menu-link > div,
.menu-container > .menu-item.current > .menu-link:hover > div,
.menu-container > .menu-item.active > .menu-link,
.menu-container > .menu-item.active > .menu-link:hover,
.menu-container > .menu-item.active > .menu-link > div,
.menu-container > .menu-item.active > .menu-link:hover > div {
	color: #fff !important;
}


/* Links auf dunklen/blauen Flächen bleiben weiß */
.dark a:hover,
.bg-color a:hover,
.bg-theme a:hover,
.hero-features a:hover,
#footer a:hover,
#copyrights a:hover {
	color: #fff !important;
}


/* Buttons bleiben lesbar */
.button:hover,
.btn:hover,
.top-phone:hover {
	background-color: var(--inopco-red, #BC1A00) !important;
	border-color: var(--inopco-red, #BC1A00) !important;
	color: #fff !important;
}


/* Buttons / CTA-Hover im Corporate Design */
.button:hover,
.btn:hover,
.top-phone:hover {
	background-color: var(--inopco-red) !important;
	border-color: var(--inopco-red) !important;
	color: #fff !important;
}


/* Feature-Box Icons Hover im Corporate Design */
.feature-box:hover .fbox-icon i {
	color: var(--inopco-red) !important;
}

/* ------------------------------------------------------------
   Hero-Features: Text auf blauem Hintergrund weiß halten
------------------------------------------------------------ */

.hero-features,
.hero-features *,
.hero-features .fbox-content,
.hero-features .fbox-content h3,
.hero-features .fbox-content p,
.hero-features .fbox-icon i {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

/* ------------------------------------------------------------
   INOPCO: Kontrastoptimierung für PageSpeed / Accessibility
------------------------------------------------------------ */

:root {
	--inopco-blue: #00387B;
	--inopco-red: #BC1A00;
	--inopco-text: #1f2933;
	--inopco-muted: #4b5563;
	--inopco-light-grey: #F5F6F7;
}


/* Kontrast: helle Bereiche */
.text-muted,
.heading-block > span,
.subtitle {
	color: var(--inopco-muted, #4b5563) !important;
}

main .feature-box:not(.fbox-dark) .fbox-content p {
	color: var(--inopco-muted, #4b5563) !important;
}

/* Footer: Text und Links auf dunklem Hintergrund */
#footer,
#footer p,
#footer li,
#footer .widget,
#footer .footer-widgets-wrap,
#footer .footer-widgets-wrap li,
#footer .footer-widgets-wrap p,
#copyrights,
#copyrights p,
#copyrights .text-white-50,
#copyrights .copyright-links {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

/* Footer-Menü und Footer-Links */
#footer a,
#footer a:visited,
#footer .footer-widgets-wrap a,
#footer .footer-widgets-wrap a:visited,
#footer .copyright-links a,
#footer .copyright-links a:visited,
#footer .footer-link,
#footer .footer-link:visited {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

#footer a:hover,
#footer a:focus,
#footer .footer-widgets-wrap a:hover,
#footer .footer-widgets-wrap a:focus,
#footer .copyright-links a:hover,
#footer .copyright-links a:focus,
#footer .footer-link:hover,
#footer .footer-link:focus {
	color: #FFFFFF !important;
	opacity: 1 !important;
	text-decoration: underline;
}

#footer .footer-copy,
#footer .copyright-links,
#footer .copyright-links a {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

/* Links im Content kontrastreich */
main a,
#leistung a,
#faq a,
#branchen a,
#kompetenz a {
	color: var(--inopco-blue);
}

main a:hover,
#leistung a:hover,
#faq a:hover,
#branchen a:hover,
#kompetenz a:hover {
	color: var(--inopco-red);
	text-decoration: underline;
}


/* FAQ-Icons neutral und kontrastreich */
#faq .accordion-icon i,
#faq .accordion-icon .text-success,
#faq .accordion-icon .text-danger {
	color: #4b5563 !important;
}


/* Aktive List-Group / Tabs lesbar halten */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
	background-color: var(--inopco-blue) !important;
	border-color: var(--inopco-blue) !important;
	color: #fff !important;
}

.list-group-item.active i {
	color: #fff !important;
}


/* Buttons: klare Kontraste */
.button,
.btn-primary {
	background-color: var(--inopco-blue);
	border-color: var(--inopco-blue);
	color: #fff !important;
}

.button:hover,
.btn-primary:hover {
	background-color: var(--inopco-red) !important;
	border-color: var(--inopco-red) !important;
	color: #fff !important;
}

/* Footer-Menü: Kontrast für PageSpeed erzwingen */
#footer .footer-widgets-wrap .widget ul li a,
#footer .footer-widgets-wrap .widget ul li a div,
#footer .footer-widgets-wrap .widget ul li a:visited,
#footer .footer-widgets-wrap .widget ul li a:visited div {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

#footer .footer-widgets-wrap .widget ul li a:hover,
#footer .footer-widgets-wrap .widget ul li a:hover div,
#footer .footer-widgets-wrap .widget ul li a:focus,
#footer .footer-widgets-wrap .widget ul li a:focus div {
	color: #FFFFFF !important;
	opacity: 1 !important;
	text-decoration: underline;
}

#footer .footer-menu a {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

#footer .footer-menu a:hover,
#footer .footer-menu a:focus {
	color: #FFFFFF !important;
	text-decoration: underline;
}

/* ------------------------------------------------------------
   Footer: maximaler Kontrast für PageSpeed / Accessibility
------------------------------------------------------------ */

#footer,
#footer *,
#footer p,
#footer li,
#footer .widget,
#footer .footer-widgets-wrap,
#footer .footer-widgets-wrap *,
#copyrights,
#copyrights *,
#copyrights p,
#copyrights .copyright-links {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

#footer a,
#footer a:visited,
#footer a span,
#footer a div,
#footer .footer-widgets-wrap a,
#footer .footer-widgets-wrap a:visited,
#footer .copyright-links a,
#footer .copyright-links a:visited {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

#footer a:hover,
#footer a:focus,
#footer .footer-widgets-wrap a:hover,
#footer .footer-widgets-wrap a:focus,
#footer .copyright-links a:hover,
#footer .copyright-links a:focus {
	color: #FFFFFF !important;
	opacity: 1 !important;
	text-decoration: underline;
}

.project-card-img {
	width: 100%;
	aspect-ratio: 640 / 420;
	height: auto;
	object-fit: cover;
	display: block;
}

.project-compliance-hero {
	background: linear-gradient(135deg, #f5f6f7 0%, #ffffff 55%, #eef3f8 100%);
	border-bottom: 1px solid #e6e8eb;
}

.project-kpi {
	border-left: 4px solid var(--inopco-blue, #00387B);
	background: #ffffff;
	padding: 1.25rem;
	height: 100%;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.compliance-panel {
	background: var(--inopco-blue, #00387B);
	color: #ffffff;
	padding: 2rem;
	border-radius: 0.75rem;
	height: 100%;
}

.compliance-panel h3,
.compliance-panel p,
.compliance-panel li {
	color: #ffffff !important;
}

.compliance-step {
	position: relative;
	padding: 1.5rem;
	border: 1px solid #e6e8eb;
	border-radius: 0.75rem;
	background: #ffffff;
	height: 100%;
}

.compliance-step .step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--inopco-blue, #00387B);
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 1rem;
}

.scope-card {
	border: 1px solid #e6e8eb;
	border-radius: 0.75rem;
	padding: 1.5rem;
	height: 100%;
	background: #ffffff;
}

.scope-card i {
	font-size: 2rem;
	color: var(--inopco-blue, #00387B);
}

.result-strip {
	background: #f5f6f7;
	border-left: 4px solid var(--inopco-red, #BC1A00);
	padding: 1.5rem;
}