/* --- Variablen & Basis --- */
:root { 
	--petrol: #1a7a85; 
	--petrol-dark: #145e66;
}
body { 
	font-family: 'Inter', sans-serif; 
	scroll-behavior: smooth; 
	color: #374151; /* Einheitliches Dunkelgrau */
	line-height: 1.7;
}

/* --- Typografie --- */
h1, h2, h3, h4, h5, h6, .font-serif { 
	font-family: 'Playfair Display', serif; 
}

/* --- Farb-Hilfsklassen --- */
.text-petrol { color: var(--petrol); }
.bg-petrol { background-color: var(--petrol); }
.nav-link:hover { color: var(--petrol); }

/* --- Buttons --- */
.btn-petrol { 
	background-color: var(--petrol); 
	transition: all 0.3s ease; 
}
.btn-petrol:hover { 
	background-color: var(--petrol-dark); 
	transform: translateY(-2px); 
}

/* --- Spezial-Listen (für Über mich) --- */
.special-list li { 
	margin-bottom: 1.2rem; 
	position: relative; 
	padding-left: 1.5rem; 
}
.special-list li::before { 
	content: ""; position: absolute; left: 0; top: 0.5rem; 
	width: 7px; height: 7px; border-radius: 50%; background-color: var(--petrol); 
}
.inst-text { 
	display: block; font-size: 0.85rem; color: #6b7280; margin-top: 0.1rem; 
}

/* --- Custom Scrollbar (für Listen) --- */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--petrol); border-radius: 10px; }

/* --- Wartungsmodus --- */
.maintenance-overlay { display: none; }
body.maintenance-mode .maintenance-overlay {
	display: flex; position: fixed; inset: 0; background: white; z-index: 9999;
	flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
body.maintenance-mode main, body.maintenance-mode nav, body.maintenance-mode footer { display: none; }

/* --- Mobile Menu Animation --- */
#mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* --- Back to Top Button --- */
#backToTop { 
	position: fixed; bottom: 32px; right: 32px; 
	background-color: var(--petrol); color: white; 
	padding: 12px; border-radius: 9999px; 
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	z-index: 50; transition: all 0.3s ease;
	opacity: 0; pointer-events: none; border: none; cursor: pointer;
}
#backToTop.visible { opacity: 1 !important; pointer-events: auto !important; }
#backToTop:hover { background-color: var(--petrol-dark); transform: translateY(-3px); }