@charset "UTF-8";

:root {
	color-scheme: light;

	/* Hintergründe & Oberflächen (Light) */
	--color-bg-main: oklch(0.96 0.009 76);
	--color-surface-base: oklch(0.99 0.004 80);
	--color-surface-muted: oklch(0.92 0.012 78);
	--color-surface-raised: oklch(0.99 0.004 80);

	/* Texte (Light) */
	--color-text-main: oklch(0.18 0.012 74);
	--color-text-muted: oklch(0.40 0.012 75);

	/* Dekoration (Light) */
	--color-border-base: oklch(0.85 0.012 77);

	/* Akzent- / Brand-Farbe (Light) */
	--color-accent-brand: oklch(0.44 0.111 189);
	--color-accent-hover: oklch(0.35 0.090 189);

	/* Layout-Konstanten */
	--max-width-content: 1180px;
	--max-width-narrow: 780px;
	--border-radius-main: 16px;
	--shadow-main: 0 10px 30px rgba(31, 28, 23, 0.08);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		/* Hintergründe & Oberflächen (Dark) */
		--color-bg-main: oklch(0.15 0.004 74);
		--color-surface-base: oklch(0.19 0.007 75);
		--color-surface-muted: oklch(0.23 0.011 74);
		--color-surface-raised: oklch(0.26 0.014 74);

		/* Texte (Dark) */
		--color-text-main: oklch(0.95 0.008 81);
		--color-text-muted: oklch(0.73 0.014 79);

		/* Dekoration (Dark) */
		--color-border-base: oklch(0.28 0.013 74);

		/* Akzent- / Brand-Farbe (Dark) */
		--color-accent-brand: oklch(0.65 0.090 191);
		--color-accent-hover: oklch(0.53 0.085 191);

		--shadow-main: 0 14px 34px rgba(0, 0, 0, 0.35);
	}
}

/* Basis-Reset */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Scrollverhalten */
html {
	height: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background-color: var(--color-bg-main);
	color: var(--color-text-main);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	transition: background-color 0.3s ease, color 0.3s ease;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}

/* Header-Struktur */
.novaropro-main-contact-phone {
	background-color: var(--color-surface-base);
	border-bottom: 1px solid var(--color-border-base);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: var(--shadow-main);
}
.novaropro-main-header-inner {
	max-width: var(--max-width-content);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	height: 90px; /* Feste Höhe für stabiles mobiles Aligning */
}

/* Logo Bereich */
#novaropro-main-brand-logo {
	display: block !important;
	height: 65px !important;    /* Auf deine gewünschten 60px angehoben */
	width: auto !important;      /* Berechnet die Breite reaktiv anhand der SVG-viewBox */
	max-height: 100% !important;
}

/* --- Active State für den Scroll-Spy --- */
.novaropro-main-nav-menu a.is-active {
	color: var(--color-accent-brand);
	font-weight: 600; /* Macht den Text leicht fetter für stärkere Signalwirkung */
	position: relative;
}

/* Optional: Ein feiner Unterstrich unter dem aktiven Menüpunkt */
.novaropro-main-nav-menu a.is-active::after {
	content: "";
	position: absolute;
	bottom: 24px; /* Platziert den Strich präzise unter dem Text */
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--color-accent-brand);
}

.novaropro-main-nav-menu a[aria-current="page"] {
    color: var(--color-accent-brand);
    font-weight: 700;
}

/* Mobiler Hamburger-Button (standardmäßig versteckt) */
.novaropro-main-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 150;
}
.novaropro-main-hamburger {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-text-main);
	position: relative;
	transition: background-color 0.2s ease;
}
.novaropro-main-hamburger::before, .novaropro-main-hamburger::after {
	content: "";
	position: absolute;
	width: 24px;
	height: 2px;
	background-color: var(--color-text-main);
	left: 0;
	transition: transform 0.2s ease, top 0.2s ease;
}
.novaropro-main-hamburger::before { top: -6px; }
.novaropro-main-hamburger::after { top: 6px; }

/* novaropro-main-hamburger-Animation bei "open" */
.novaropro-main-menu-toggle[aria-expanded="true"] .novaropro-main-hamburger { background-color: transparent; }
.novaropro-main-menu-toggle[aria-expanded="true"] .novaropro-main-hamburger::before { transform: rotate(45deg); top: 0; }
.novaropro-main-menu-toggle[aria-expanded="true"] .novaropro-main-hamburger::after { transform: rotate(-45deg); top: 0; }

main {
	flex: 1 0 auto;
}

/* RESPONSIVE LAYOUT-REGELN */

/* --- Desktop Ansicht (Breite Bildschirme) --- */
@media (min-width: 992px) {
	.novaropro-main-submenu-toggle-btn {
		display: none; /* Hamburger unsichtbar machen */
	}
	.novaropro-main-nav-inner {
		display: flex;
		align-items: center;
		gap: 32px;
	}
	.novaropro-main-nav-menu {
		display: flex;
		list-style: none;
		align-items: center;
		gap: 24px;
	}
	.novaropro-main-nav-menu a {
		color: var(--color-text-main);
		text-decoration: none;
		font-weight: 500;
		font-size: 0.95rem;
		padding: 32px 0;
		display: inline-block;
		transition: color 0.2s ease;
	}
	.novaropro-main-nav-menu a:hover {
		color: var(--color-accent-brand);
	}
	.novaropro-main-has-submenu {
		position: relative;
	}
	.novaropro-main-submenu-trigger-wrap {
		display: flex;
		align-items: center;
	}
	.novaropro-main-submenu {
		position: absolute;
		top: 100%;
		right: 0;
		background-color: var(--color-surface-raised);
		border: 1px solid var(--color-border-base);
		border-radius: var(--border-radius-main);
		box-shadow: var(--shadow-main);
		list-style: none;
		width: 380px;
		padding: 12px 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}
	.novaropro-main-submenu li a {
		display: block;
		padding: 10px 20px;
		font-size: 0.9rem;
		line-height: 1.4;
		font-weight: normal;
		transition: background-color 0.2s ease, color 0.2s ease;
	}
	.novaropro-main-submenu li a:hover {
		background-color: var(--color-surface-muted);
		color: var(--color-accent-brand);
	}
	.novaropro-main-has-submenu:hover .novaropro-main-submenu,
	.novaropro-main-has-submenu.is-active .novaropro-main-submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.novaropro-main-nav-actions {
		border-left: 1px solid var(--color-border-base);
		padding-left: 20px;
	}
	.novaropro-main-language-switcher {
		display: flex;
		gap: 12px;
		font-size: 0.85rem;
		font-weight: bold;
	}
	.novaropro-main-language-switcher__link {
		color: var(--color-text-muted);
		text-decoration: none;
	}
	.novaropro-main-language-switcher__link.is-active {
		color: var(--color-accent-brand);
	}
}

/* --- Mobile Ansicht (Smartphones & Tablets) --- */
@media (max-width: 991px) {
	.novaropro-main-menu-toggle {
		display: block; /* Hamburger sichtbar machen */
	}
	.novaropro-main-site-nav {
		position: absolute;
		top: 90px;
		left: 0;
		width: 100%;
		background-color: var(--color-surface-base);
		border-bottom: 1px solid var(--color-border-base);
		box-shadow: var(--shadow-main);
		max-height: 0;
		overflow-y: auto;
		visibility: hidden;
		transition: max-height 0.3s ease-in-out, visibility 0.3s;
	}
	/* Wenn Navigation geöffnet ist */
	.novaropro-main-site-nav.is-open {
		max-height: calc(100vh - 90px);
		visibility: visible;
	}
	.novaropro-main-nav-inner {
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.novaropro-main-nav-menu {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 8px;
	}
	.novaropro-main-nav-menu li {
		width: 100%;
		list-style: none;
	}
	.novaropro-main-nav-menu a {
		color: var(--color-text-main);
		text-decoration: none;
		font-weight: 500;
		display: block;
		padding: 12px 0;
		border-bottom: 1px solid var(--color-surface-muted);
	}
	.novaropro-main-nav-menu a.is-active::after {
		bottom: 4px;
		height: 1px;
	}
	.novaropro-main-submenu-trigger-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.novaropro-main-submenu-toggle-btn {
		background: var(--color-surface-muted);
		border: none;
		color: var(--color-text-main);
		font-size: 1rem;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.2s ease;
	}
	/* Dreht den Pfeil um, wenn geöffnet */
	.novaropro-main-has-submenu.is-active .novaropro-main-submenu-toggle-btn {
		transform: rotate(180deg);
	}
	/* KORREKTUR: Display:none fliegt raus, um die CSS-Transition zu ermöglichen */
	.novaropro-main-submenu {
		background-color: var(--color-surface-muted);
		border-radius: calc(var(--border-radius-main) / 2);
		padding: 0;               /* Verhindert unschöne Abstände im geschlossenen Zustand */
		margin-top: 0;
		max-height: 0;            /* Startzustand: Vollständig kollabiert */
		overflow: hidden;         /* Schneidet den Inhalt im geschlossenen Zustand sauber ab */
		visibility: hidden;
		opacity: 0;               /* Zusätzlicher Einblende-Effekt */
		transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease, visibility 0.25s;
	}

	/* Aktiv-Zustand: Wenn das Submenü per JavaScript geöffnet wird */
	.novaropro-main-has-submenu.is-active .novaropro-main-submenu {
		display: block;           /* Überschreibt potenziellen Desktop-Zustand */
		max-height: 500px;        /* Großzügiger Maximalwert für die Aufklapp-Animation */
		opacity: 1;
		visibility: visible;
		padding: 8px 0;           /* Holt das Padding erst im geöffneten Zustand zurück */
		margin-top: 8px;
	}

	.novaropro-main-submenu li a {
		padding: 10px 16px;
		font-size: 0.9rem;
		border-bottom: none;
		color: var(--color-text-muted);
	}
	.novaropro-main-nav-actions {
		padding-top: 16px;
		border-top: 1px solid var(--color-border-base);
		width: 100%;
	}
	.novaropro-main-language-switcher {
		display: flex;
		gap: 20px;
		font-size: 1rem;
	}
	.novaropro-main-language-switcher__link {
		color: var(--color-text-muted);
		text-decoration: none;
	}
	.novaropro-main-language-switcher__link.is-active {
		color: var(--color-accent-brand);
		font-weight: bold;
	}
}

/* --- Footer Layout & Styling --- */
.novaropro-main-site-footer {
	background-color: var(--color-surface-base);
	border-top: 1px solid var(--color-border-base);
	padding: 60px 20px 40px 20px;
	margin-top: auto; /* Schiebt den Footer nach unten, falls wenig Inhalt da ist */
	flex-shrink: 0;
}

.novaropro-main-footer-inner {
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 80px;
    flex-wrap: wrap;
}

.novaropro-main-footer-col--brand {
    flex: 1;
}

.novaropro-main-footer-col:not(.novaropro-main-footer-col--brand) {
    flex: 0 0 auto;
}


.novaropro-main-footer-col {
	display: flex;
	flex-direction: column;
}

.novaropro-main-footer-brand {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-text-main);
	margin-bottom: 16px;
}

.novaropro-main-footer-title {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-main);
	margin-bottom: 20px;
}

.novaropro-main-footer-text {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-bottom: 16px;
}

.novaropro-main-footer-copyright {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-top: auto; /* Schiebt das Copyright nach ganz unten in der Spalte */
}

.novaropro-main-footer-links {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.novaropro-main-footer-links a {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.novaropro-main-footer-links a:hover {
	color: var(--color-accent-brand);
}

/* --- Mobile Anpassung für den Footer --- */
@media (max-width: 991px) {
	.novaropro-main-footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
	.novaropro-main-footer-col--brand {
		grid-column: span 2;
		margin-bottom: 16px;
	}
}

@media (max-width: 767px) {
    .novaropro-main-footer-inner {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 576px) {
	.novaropro-main-footer-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.novaropro-main-footer-col--brand {
		grid-column: span 1;
	}
	.novaropro-main-footer-copyright {
		margin-top: 16px;
	}
}

/* --- Scroll to Top Button --- */
.novaropro-main-scroll-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 48px;
	height: 48px;
	background-color: var(--color-surface-raised);
	color: var(--color-text-main);
	border: 1px solid var(--color-border-base);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-main);
	cursor: pointer;
	z-index: 99;
	
	/* Zustand: Standardmäßig unsichtbar und leicht nach unten verschoben */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Internes Pfeil-Icon */
.novaropro-main-scroll-to-top svg {
	width: 20px;
	height: 20px;
}

/* Klasse wird per JavaScript vergeben, sobald gescrollt wird */
.novaropro-main-scroll-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Hover- & Fokus-Zustand im Corporate Tech-Teal */
.novaropro-main-scroll-to-top:hover,
.novaropro-main-scroll-to-top:focus-visible {
	background-color: var(--color-accent-brand);
	color: var(--color-surface-base);
	border-color: var(--color-accent-brand);
	transform: translateY(-2px); /* Schiebt den Button beim Hover leicht hoch */
	outline: none;
}

/* Tastatur-Umrandung (Barrierefreiheit) */
.novaropro-main-scroll-to-top:focus-visible {
	box-shadow: 0 0 0 3px var(--color-accent-hover);
}

/* Falls der Nutzer Animationen deaktiviert hat */
@media (prefers-reduced-motion: reduce) {
	.novaropro-main-scroll-to-top {
		transition: none;
	}
}