/*
 * ----------------------------------------------------
 * GRUNDDEFINITIONEN & FARBSCHEMA (DUNKEL)
 * ----------------------------------------------------
 */

:root {
    /* Benutzerdefinierte Farbschema Variablen */
    --color-dark-bg: #1A1A1A;      /* Neues, tieferes Schwarz für den Hintergrund */
    --color-text-light: #F7F7F7;   /* Heller Text (Basis) */
    --color-text-secondary: #AAAAAA; /* Sekundärer Text/Akzent */
    --color-border: #333333;       /* Dunkler, dezenter Rahmen */

    /* Bootstrap Overrides zur Konsistenz */
    --bs-body-bg: var(--color-dark-bg);
    --bs-body-color: var(--color-text-light);
    --bs-gray-400: var(--color-border);
    --bs-gray-600: var(--color-text-secondary);
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.7; /* Verbessert die Lesbarkeit des Fließtextes */
}

/* Stellt sicher, dass das Bootstrap bg-black wirklich schwarz ist */
.bg-black {
    background-color: #000000 !important;
}

/*
 * ----------------------------------------------------
 * PRELOADER STYLES
 * ----------------------------------------------------
 */

#preloader {
    /* Übernimmt den gesamten Viewport */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-dark-bg); /* Nutzt Ihren dunklen Hintergrund */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Stellt sicher, dass er über allen anderen Elementen liegt */
    transition: opacity 0.5s ease; /* Sanftes Ausblenden */
}

/* Container für Spinner und Text */
.loader-content {
    text-align: center;
    color: var(--color-text-light);
    font-family: 'Inter', sans-serif;
}

/* Spinner Animation (Minimalistische Variante) */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.2); /* Heller, transparenter Rand */
    border-top: 4px solid var(--color-text-light); /* Sichtbarer Rand */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite; /* Animation starten */
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Klasse, die nach dem Laden hinzugefügt wird, um den Loader auszublenden */
.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

/*
 * ----------------------------------------------------
 * TYPOGRAFIE & HEADER
 * ----------------------------------------------------
 */

.font-heading {
    font-family: 'Bevan', serif !important;
}
 
.title-xl {
    /* Responsive Schriftgröße, passt sich der Breite an */
    font-size: calc(1.5rem + 5.5vw);
    line-height: 1;
}

/*
 * ----------------------------------------------------
 * NAVIGATION & FOOTER
 * ----------------------------------------------------
 */

/* Navigations-Links */
.nav-link {
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 4px;
    padding: 8px 15px; 
    color: var(--color-text-light) !important; /* Stellt sicher, dass die Links hell sind */
}

.nav-link:hover {
    color: var(--color-dark-bg) !important; 
    background-color: rgba(255, 255, 255, 0.6); 
}

/* Home Branding */
.navbar-brand.font-heading {
    color: #FFFFFF !important; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); 
    transition: color 0.3s ease;
}

.navbar-brand.font-heading:hover {
    color: var(--bs-gray-600) !important; 
}

/* Hamburger Toggler Farbe */
.navbar-toggler {
    border-color: var(--color-border);
}

.navbar-toggler-icon {
    /* Setzt das Icon auf Hellgrau/Weiß (SVG Data URI) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f7f7f7' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Footer Links */
footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--color-text-light) !important;
}

/*
 * ----------------------------------------------------
 * TEXT-MASKING EFFEKTE
 * ----------------------------------------------------
 */

.text-masking-effect-1,
.text-masking-effect-2 {
    /* WICHTIG: Hintergrundbild direkt auf den Text anwenden */
    background-size: cover;
    background-position: center;

    /* Text transparent machen und den Hintergrund nur im Text anzeigen */
    color: transparent; 
    background-clip: text; 
    -webkit-background-clip: text; 
}

.text-masking-effect-1 {
    background-image: url('https://m240i.de/images/ccar15.jpg');
    /* Komplexer Schatten */
    filter: drop-shadow(2px 2px 1px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 1px rgba(255, 255, 255, 0.6)) drop-shadow(-2px 2px rgba(255, 255, 255, 0.6)) drop-shadow(2px -2px rgba(255, 255, 255, 0.6)); 
}

.text-masking-effect-2 {
    background-image: url('https://m240i.de/images/ccar14.jpg');
    /* Einfacher Schatten */
    filter: drop-shadow(2px 2px 1px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 1px rgba(255, 255, 255, 0.6)); 
}

.ueberschrift1 {
	color: #000;
	filter: drop-shadow(2px 2px 1px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 1px rgba(255, 255, 255, 0.6));
}

.ueberschrift {
	color: #000;
    background-image: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(102, 0, 0, 1) 51%, rgba(0, 0, 0, 1) 54%, rgba(18, 18, 18, 1) 58%, rgba(155, 155, 155, 1) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;

	filter: drop-shadow(2px 2px 1px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 1px rgba(255, 255, 255, 0.6));
}


/* SUNSET (Linear Gradient Effekt) */
.sunset {
    background-image: linear-gradient(0deg, rgba(255, 170, 0, 1) 0%, rgba(102, 48, 0, 1) 51%, rgba(0, 0, 0, 1) 54%, rgba(128, 181, 255, 1) 58%, rgba(43, 54, 255, 1) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(2px 2px 1px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 1px rgba(128, 128, 128, 0.9));
}

/* BMW (Linear Gradient Effekt) */
.bmw {
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(102, 102, 102, 1) 51%, rgba(0, 0, 0, 1) 54%, rgba(120, 120, 120, 1) 58%, rgba(50, 50, 50, 1) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(2px 2px 1px rgba(255, 255, 255, 0.6)) drop-shadow(-2px -2px 1px rgba(128, 128, 128, 0.9));
}


/*
 * ----------------------------------------------------
 * CONTENT LAYOUT & BILDER
 * ----------------------------------------------------
 */

/* Lückenloses Layout */
.content-block {
    margin-bottom: 0 !important;
    margin-top: -1px; 
    /* Setzt einen feinen Rahmen um den Block */
    border: 1px solid var(--color-border); 
}

/* Hover-Effekt */
.content-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0;
    padding: 0;
}

.content-item:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4); /* Heller Schatten auf dunklem BG */
    z-index: 10;
}

/* Mobile Trennung (Vertikal) */
.content-item:not(:last-child) > div {
    border-bottom: 1px solid var(--bs-gray-400); 
}

/* Bilder im Content-Block */
.content-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt den Container ohne Verzerrung */
    display: block; 
}


/*
 * ----------------------------------------------------
 * RESPONSIVE & DESKTOP KORREKTUREN (MIN-WIDTH: 768PX)
 * ----------------------------------------------------
 */

@media (min-width: 768px) {
    
    /* 1. Navbar Korrektur (Menü rechts) */
    .navbar-collapse {
        flex-grow: 0 !important; /* Wichtig für die Rechtsausrichtung des Menüs */
    }

    /* 2. Gleiche Höhe für Bild- & Text-Container */
    .content-block {
        display: flex; 
    }
    
    .content-item > div {
        height: 100%; /* Das innere div nimmt die volle Höhe ein */
        display: flex; 
        flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: left;
    }
	
	.content-item > div.bg-black ul {
    	/* Stellt sicher, dass die Liste eine maximale Breite hat, um mit zentriert zu werden */
    	max-width: 80%; /* Oder ein fixer Wert wie 500px, je nach gewünschter Textbreite */
    	margin-left: 0;
    	padding-left: 0;
    	list-style-position: inside; /* Stellt sicher, dass die Bullet Points mit zentriert werden */
	}

    /* 3. Horizontaler Hover-Effekt (Lift) */
    .content-item:hover {
        transform: translateY(-3px); 
    }

    /* 4. Interne Trennung (Horizontal auf Desktop) */
    .content-item > div {
        border-bottom: none !important; /* Entfernt die mobile Trennlinie */
    }

    .col-md-6:not(:last-child) .bg-black { 
        border-right: 1px solid var(--color-border); /* Fügt die rechte Trennlinie hinzu */
    }

    /* Optional: Abstand der Nav-Links auf Desktop/Tablet */
    .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* --- SCROLL TO TOP BUTTON --- */

#scrollTopButton {
    /* Feste Positionierung in der unteren rechten Ecke */
    position: fixed;
    bottom: 20px;
    right: 20px;
    
    /* Größe und Styling */
    width: 50px;
    height: 50px;
    padding: 0;
    
    /* Farben aus dem Schema nutzen */
    border: 1px solid var(--color-border);
    background-color: var(--color-dark-bg);
    color: var(--color-text-light);
    
    /* Zentriert den Pfeil im Button */
    display: flex; 
    justify-content: center;
    align-items: center;

    /* Optik und Schicht-Ebene */
    opacity: 0.7;
    font-size: 1.5rem;
    transition: opacity 0.3s, background-color 0.3s;
    z-index: 1000;
    
    /* WICHTIG: Erster Zustand wird durch JS auf display: none gesetzt */
}

#scrollTopButton:hover {
    opacity: 1;
    background-color: #000000; /* Reines Schwarz bei Hover */
    cursor: pointer;
}


/*
 * ----------------------------------------------------
 * MOBILE KORREKTUREN (MAX-WIDTH: 767.98PX)
 * ----------------------------------------------------
 */

@media (max-width: 767.98px) {
    
    /* Reduziert vertikalen Abstand um die H1-Titel */
    .container.my-5 {
        margin-bottom: 2rem !important; 
        margin-top: 2rem !important;
    }

    /* Reduziert das Padding in den Text-Blöcken leicht */
    .content-item > div.bg-black {
        padding: 1rem !important; 
    }

    /* Stellt sicher, dass die Links auf Mobile rechtsbündig sind, wenn das Menü offen ist */
    .navbar-nav {
        text-align: right; 
        padding-right: 15px;
    }
}