/* --- Farben und Variablen --- */
:root {
    /* Deine Farben aus dem Foto */
    --primary-color: #7898A6; /* Staubiges Blau (Hover & Akzente) */
    --primary-hover: #5A7581; 
    --secondary-color: #D4C0A4; /* Beige */
    --text-dark: #2F2B28; /* Dunkles Graubraun für Text */
    --text-nav: #333333; /* Klassisches Dunkelgrau für die Navigation (Dornheim-Stil) */
    --bg-light: #F5F4F0; 
    --dark-bg-color: #3C3734; 
}

/* Grundeinstellungen & Schriftarten */
body {
    /* Dein gewünschter Font-Stack (Calibri Prio, dann System) */
    font-family: Calibri, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-dark);
    background-color: white; 
    padding-top: 86px; /* Etwas mehr Platz, da die Navigationsleiste jetzt höher ist */
    font-size: 1.1rem; 
}

/* Das hier brauchst du weiterhin, um den Browser-Standard zu zähmen */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 400 !important; 
}
/* Eigene Abstands-Klasse */
.py-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* =========================================
   NAVIGATIONSLEISTE (Dornheim-Stil)
   ========================================= */
.navbar {
    background-color: #ffffff !important; /* Hartes Weiß wie im Beispiel */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Dezenter, moderner Schatten */
    padding-top: 1rem;    /* Mehr Luft nach oben */
    padding-bottom: 1rem; /* Mehr Luft nach unten */
    transition: all 0.3s ease;
}

/* Der Firmenname / das Logo */
.navbar-brand {
    font-weight: 400;
    color: var(--text-nav) !important;
    font-size: 1.5rem;
    letter-spacing: -0.5px; /* Wirkt technischer/moderner */
}
/* Logo in der Navbar */
.logo-img {
    height: 30px; /* Passt perfekt in die Navigationsleiste */
    width: auto;  /* Breite passt sich automatisch an, damit nichts verzerrt */
    display: block; /* Verhindert kleine Abstands-Fehler */
}

/* Die Menü-Links */
.nav-link {
    font-weight: 400;
    color: var(--text-nav) !important; /* Dunkles Grau statt Braun für die Leiste */
    font-size: 1.05rem;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    transition: color 0.2s ease;
}

/* Hover-Effekt: Hier bringen wir dein "Staubiges Blau" ins Spiel */
.nav-link:hover, .nav-link.active {
    color: var(--primary-color) !important;
}

/* Button "Sprache" oder "Kontakt" in der Leiste */
.navbar .btn-outline-secondary {
    border-color: #e0e0e0;
    color: var(--text-nav);
}
.navbar .btn-outline-secondary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}
/* --- Untermenü-Design --- */
/* Die Links im Untermenü */
.dropdown-item {
    font-weight: 400; /* Schön schlank bleiben */
    color: var(--text-dark);
    padding: 0.5rem 1.5rem; /* Etwas mehr Luft */
    transition: all 0.2s ease;
}
/* Hover-Effekt im Untermenü: Dein Blau als Hintergrund */
.dropdown-item:hover {
    /*background-color: var(--primary-color);*/
    background-color: color-mix(in srgb, var(--primary-color), transparent 50%);
    color: white;
}

/***********************************************/
/*              Akkordeon-Styling              */
/***********************************************/
/* --- Akkordeon Design --- */

/* Jedes einzelne Element bekommt einen leichten Schatten und Hintergrund */
.accordion-item {
    background-color: #fff; /* Oder var(--bg-light) für Beige */
    box-shadow: 0 2px 15px rgba(0,0,0,0.05); /* Sehr weicher Schatten */
}

/* Der Button im normalen Zustand (zugeklappt) */
.accordion-button {
    background-color: #fff;
    color: var(--text-dark);
    font-weight: 400 !important;/* Nicht zu fett */
    padding: 1.2rem 1.5rem; /* Mehr Platz zum Klicken */
    border: none; /* Keine grauen Linien */
    box-shadow: none !important; /* Entfernt den blauen Leucht-Rahmen beim Klicken */
}

/* Der Button im aufgeklappten Zustand (Aktiv) */
.accordion-button:not(.collapsed) {
    /* Hintergrund: Dein Blau, aber ganz hell (10% Deckkraft) */
    background-color: color-mix(in srgb, var(--primary-color), transparent 90%);
    
    /* Textfarbe: Dein Blau */
    color: var(--primary-color);
    
    /* Der kleine Pfeil rechts wird automatisch von Bootstrap eingefärbt, 
       aber wir entfernen den hässlichen unteren Rand */
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05); 
}

/* Der Innenraum (Body) */
.accordion-body {
    padding: 1.5rem;
    line-height: 1.6; /* Bessere Lesbarkeit */
    border-top: 1px solid rgba(0,0,0,0.03); /* Ganz feine Trennlinie */
}

/* Kleines Detail: Icon im Button beim Hover leicht bewegen */
.accordion-button:hover i {
    transform: translateX(3px);
    transition: transform 0.2s ease;
}



/* =========================================
   RESTLICHES DESIGN (Dein Foto-Farbschema)
   ========================================= */

/* Buttons */
.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transition: all 0.3s ease;
    padding: 0.6rem 1.5rem; /* Etwas größere Buttons */
    font-weight: 400;
}

.btn-primary-custom:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--bg-light) 0%, #E8F0F4 100%);
    /* Dein neues Bild als Hintergrund */
    /*background-image: url('assets/images/karrieretitelbild.png');*/
    /* Skaliert das Bild so, dass es immer den ganzen Bereich füllt */
    background-size: cover;
    /* Zentriert das Bild (oder 'top center', falls Köpfe oben abgeschnitten werden) */
    background-position: top center ;
    background-repeat: no-repeat;
    
    min-height: 80vh;
}
.hero-content-box {
    /* Ein weißer Hintergrund mit 90% Deckkraft (oder 0.95) */
    background-color: rgba(255, 255, 255, 0.2);
    
    /* Damit es nicht so "draufgeklatscht" aussieht: */
    backdrop-filter: blur(10px); /* Weichzeichner für den Hintergrund (Milchglas-Effekt) */
}

/* Service Karten */
section#services.bg-light {
    background-color: var(--bg-light) !important; 
}

.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eaeaea; 
    background: white;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(47, 43, 40, 0.08) !important;
}

/* Screenshots-Section */
section#screenshots.bg-light {
    /*background-color: color-mix(in srgb, var(--primary-color), transparent 50%);*/
    /*background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);*/
    background-color: var(--bg-light) !important; 

}


/****** Pricing Sektion ******/

section#pricing.bg-light {
    /*background-color: color-mix(in srgb, var(--primary-color), transparent 50%);*/
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);

}
/* Eigene Rahmenfarbe für die Premium-Box (falls du keine Klasse dafür hast) */
.border-primary-custom {
    border: 2px solid var(--primary-color);
}
/* Hintergrundfarbe für das "Empfehlung"-Badge */
.bg-primary-custom {
    background-color: var(--primary-color);
    color: white;
}
/* Damit die Check-Icons in der Liste sauber untereinander stehen, 
   selbst wenn der Text mal zweizeilig wird */
.list-unstyled li {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    font-weight: 300; /* Schön dünn, wie du es magst */
}
/* Psychologischer Trick: Die mittlere Karte auf großen Bildschirmen 
   leicht vergrößern (skalieren), damit sie wichtiger wirkt */
@media (min-width: 992px) {
    .card.border-primary-custom {
        transform: scale(1.05); /* 5% größer */
        z-index: 10;
    }
}

/* Text-Farbe für Icons */
.text-primary-custom {
    color: var(--primary-color) !important;
}

/***************************************************/
/*            Einstellungen für Footer             */
/***************************************************/

footer.bg-dark {
    background-color: var(--dark-bg-color) !important; 
    /*color: var(--bg-light) !important;*/
    color: color-mix(in srgb, var(--bg-light), transparent 50%);
}

/* Speziell für die Überschriften im Footer: */
/* Gilt für ALLE Überschriften, solange sie im Footer stecken */
footer.bg-dark h1, 
footer.bg-dark h2, 
footer.bg-dark h3, 
footer.bg-dark h4, 
footer.bg-dark h5, 
footer.bg-dark h6 {
    color: var(--primary-color) !important; /* Überschreibt Bootstrap-Grau */
    /*color: red;*/
    font-weight: 300 !important;      /* Zwingt sie dünn zu sein */
    letter-spacing: 0.5px;
    margin-bottom: 1.2rem;
}
/*********************************************/
/*         Responsive Anpassungen            */
/*********************************************/

@media (max-width: 991px) {
    .navbar-collapse {
        /* Auf dem Handy einen weißen Hintergrund für das Menü erzwingen */
        background-color: #ffffff;
        padding: 1rem;
        border-top: 1px solid #eee;
        margin-top: 1rem;
    }
    
    .hero-section {
        min-height: auto;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .hero-section h1 {
        font-size: 2.5rem;
    }
}
/* --- Handy & Tablet Optimierung (alles unter 992px Breite) --- */
@media (max-width: 991px) {
    
    .hero-section {
        /* 1. Bild-Position ändern */
        /* Auf dem Handy ist das Motiv meistens oben wichtig (Köpfe). 
           'top center' verhindert, dass wir nur Jacken oder leere Wände sehen. */
        background-position: top center !important;
        
        /* 2. Höhe anpassen */
        /* 85vh ist auf dem Handy oft zu hoch. Wir lassen den Inhalt die Höhe bestimmen */
        min-height: auto !important;
        padding-top: 100px; /* Platz für Menü */
        padding-bottom: 60px;
    }

    /* 3. Text-Sicherung (Der "Geheimtipp") */
    /* Da wir auf dem Handy nie wissen, welcher Teil des Bildes hinter dem Text liegt,
       legen wir einen ZARTEN weißen Schleier NUR hinter den Text-Block.
       Kein Kasten, sondern eher wie ein weicher Lichtschein. */
    .hero-section .col-lg-7 {
        background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
        padding: 20px;
        border-radius: 20px;
    }
    
    /* Schriftgröße etwas kleiner machen, damit es nicht so wuchtig wirkt */
    .hero-section h1 {
        font-size: 2.5rem; /* Kleiner als auf Desktop */
    }
}
/* =======================================================
   OPTIONAL: Hover-Effekt für Desktop (wie bei Dornheim)
   ======================================================= */
@media (min-width: 992px) {
    /* Wenn man über das Nav-Item fährt, zeige das Menü */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* Korrigiert kleinen Ruckler */
        animation: fadeIn 0.3s ease; /* Sanftes Einblenden */
    }
}
/* Kleine Animation für das Einblenden (sieht edler aus) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}