/* --- 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 */
}
.logo-img {
    height: 50px;        /* Größer als vorher, damit der Schriftzug gleich groß wirkt */
    width: auto;
    margin-top:    -15px;   /* 15px nach oben ziehen */
    margin-bottom: -15px;   /* 15px nach unten ziehen */
    margin-left:   0px;   /* 50px nach links ziehen */
    margin-right:  0px;   /* 50px nach rechts ziehen */ /* Zieht den Whitespace-Rand optisch ein */
}

/* 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) {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}
/* Chevron-Pfeil weiß wenn offen */
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}
/* Inline-Icon neben dem Label weiß wenn offen */
.accordion-button:not(.collapsed) i {
    color: rgba(255,255,255,0.85) !important;
}

/* 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 */
}

/* Geöffnetes Akkordeon-Element: weicher Schatten rundum */
.accordion-item:has(.accordion-collapse.show) {
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 -2px 12px rgba(0,0,0,0.06) !important;
    position: relative;
    z-index: 2;
}

/* 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;
}

.btn-outline-primary-custom {
    background-color: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transition: all 0.3s ease;
    padding: 0.6rem 1.5rem;
    font-weight: 400;
}

.btn-outline-primary-custom:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    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-section--slim {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.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;
}

/* Produkt-Karten (Startseite: "Unsere Produkte") */
.product-card {
    background-color: var(--bg-light);
    border: 1px solid rgba(47, 43, 40, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0.5rem 1.25rem rgba(47, 43, 40, 0.12) !important;
}

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

/* Polaroid-Hero (Forschungs-Unterseiten) */
.polaroid {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.75rem rgba(47, 43, 40, 0.18);
    max-width: 460px;
    padding: 16px 16px 0;
}

.polaroid-img {
    border-radius: 0.25rem;
    overflow: hidden;
    aspect-ratio: 1.6 / 1;
}

.polaroid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.polaroid-caption {
    padding: 1rem 0.5rem 1.4rem;
    text-align: center;
}

.polaroid-caption .caption-title {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.35rem;
}

.polaroid-caption .caption-meta {
    display: block;
    font-size: 0.85rem;
    color: #6c757d;
}

.polaroid-caption .caption-credit {
    display: block;
    font-size: 0.7rem;
    color: #adb5bd;
    margin-top: 0.6rem;
}

/* KI-Section Prozess-Cards */
.ki-step-card {
    transition: box-shadow 0.25s ease;
}
.ki-step-card:hover {
    box-shadow: 0 1rem 2rem rgba(47, 43, 40, 0.13) !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;

}

/* Screenshots: horizontaler Swipe auf Mobilgeräten, Grid ab Tablet */
@media (max-width: 767.98px) {
    .screenshots-scroll {
        flex-wrap: nowrap;
        align-items: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 0.75rem;
        padding-bottom: 0.75rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .screenshots-scroll .card {
        height: auto !important;
    }
    .screenshots-scroll > .col {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: start;
    }
    .screenshots-scroll .card-img-top {
        height: auto !important;
        aspect-ratio: 8 / 5;
        object-fit: cover;
    }
    .screenshots-scroll::-webkit-scrollbar {
        height: 6px;
    }
    .screenshots-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 4px;
    }
    .screenshots-hint {
        display: block;
    }
}
.screenshots-hint {
    display: none;
}

/* Anatomy-Screenshots: gemischte Aspect Ratios, gleiche Höhe, natürliche Breite */
.anatomy-screenshots {
    --shot-height: 360px;
}
.anatomy-screenshots .anatomy-shot {
    height: var(--shot-height);
    width: auto;
    display: block;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(47, 43, 40, 0.08);
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.anatomy-screenshots .anatomy-shot:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(47, 43, 40, 0.13);
}
@media (max-width: 991.98px) {
    .anatomy-screenshots {
        --shot-height: 300px;
    }
}
@media (max-width: 767.98px) {
    .anatomy-screenshots {
        --shot-height: 260px;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        padding-bottom: 0.75rem;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .anatomy-screenshots .anatomy-shot {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    .anatomy-screenshots::-webkit-scrollbar {
        height: 6px;
    }
    .anatomy-screenshots::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.15);
        border-radius: 4px;
    }
}


/****** 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);
}
/* Dezenter hellgrauer Rahmen für Free/Professional –
   gleiche Breite (2px) wie der blaue Rahmen der Premium-Karte */
.border-light-custom {
    border: 2px solid #eaeaea;
}
/* Hover-Effekt für die Preis-Karten – identisch zu den Service-Cards */
#pricing .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#pricing .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(47, 43, 40, 0.08) !important;
}
/* 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 – deaktiviert, damit alle Karten gleich groß sind */
        z-index: 10;
    }
}

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

/* Dunkler CTA-Abschnitt (etwas aufgehellte Variante der Footer-Farbe) */
.bg-dark-lighter {
    background-color: var(--dark-bg-color);
    background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
}

/***************************************************/
/*            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 */
    }
}
/* Dezente Placeholder-Farbe in Formularfeldern */
::placeholder {
    color: #b0b8bc !important;
    opacity: 1;
}

/* Zwischenüberschriften in Feature-Vergleichstabellen */
tr.tbl-section-header > td {
    background-color: color-mix(in srgb, var(--primary-color) 25%, #f8f9fa 75%) !important;
}

/* Kleine Animation für das Einblenden (sieht edler aus) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   FORSCHUNGSPROJEKTE
   ========================================= */
section#projekte {
    background-color: var(--bg-white) !important;
}

.projekt-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
    border: 1px solid rgba(120, 152, 166, 0.18) !important;
    border-top: 3px solid transparent !important;
    overflow: hidden;
}

.projekt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(47, 43, 40, 0.11) !important;
    border-top-color: var(--primary-color) !important;
}

.projekt-section-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

/* Zebra-Stripes: volle Breite durch negatives Margin */
.projekt-sub {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0.85rem 1.5rem;
}
.projekt-sub-tinted {
    background-color: rgba(120, 152, 166, 0.09);
}
@media (min-width: 992px) {
    .projekt-sub {
        margin-left: -3rem;
        margin-right: -3rem;
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* Fördermittelgeber-Logos: grau, bei Hover farbig */
.projekt-sub img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}
.projekt-sub:hover img {
    filter: grayscale(0%);
}

/* Trennlinie zwischen den zwei Spalten im kombinierten Streifen */
@media (min-width: 768px) {
    .projekt-sub-right-col {
        border-left: 1px solid rgba(120, 152, 166, 0.25);
        padding-left: 1.25rem;
    }
}

/* Projektbilder: grau, bei Hover farbig */
.projekt-img-float img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}
.projekt-img-float:hover img {
    filter: grayscale(0%);
}

/* Bild rechts im Text fließen lassen */
.projekt-img-float {
    float: right;
    width: 175px;
    margin: 0.2rem 0 1rem 1.5rem;
    position: relative;
    transition: transform 0.4s ease;
}
.projekt-img-float:hover {
    transform: scale(1.08);
    z-index: 5;
}
.projekt-img-float .ratio {
    border-radius: 0.375rem;
    overflow: hidden;
}
.projekt-img-float figcaption {
    font-size: 0.62rem;
    color: #999;
    text-align: right;
    margin-top: 0.25rem;
    letter-spacing: 0.3px;
}
@media (max-width: 991.98px) {
    .projekt-img-float {
        float: none;
        width: 140px;
        margin: 0 auto 1rem;
        display: block;
    }
}

/* =========================================================================
   [CONSULTING-PORT] Mobile Abstände + CTA-Buttons
   -------------------------------------------------------------------------
   Übernommen von dornheim.consulting/style.css (Stand: Vergleich Juli 2026).
   BEI BEDARF KOMPLETT ENTFERNBAR: einfach alles zwischen
   "CONSULTING-PORT BEGIN" und "CONSULTING-PORT END" (inkl. dieser Kommentare)
   löschen – dann ist die Datei wieder wie vorher.

   BEWUSST NICHT portiert (damit der tech-Look erhalten bleibt):
     - dunkles Mobil-Menü (.navbar-collapse Hintergrund/weiße Links)
     - Entfernen des Hero-Text-Glows (radialer Lichtschein bleibt erhalten)
   HINWEIS: body padding-top 65px setzt das kleinere Logo (22px) voraus –
   beides gehört zusammen, sonst rutscht Inhalt unter die Navbar.
   ========================================================================= */
/* >>> CONSULTING-PORT BEGIN */
@media (max-width: 991px) {

    /* A) Layout & Abstände */
    .container, .container-fluid { padding-left: 20px !important; padding-right: 20px !important; }
    .row { margin-left: 0 !important; margin-right: 0 !important; }
    /* Kernstück: große Section-Abstände auf Mobil deutlich reduzieren */
    .py-6, .py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

    /* Navbar auf Mobil kompakter + weniger weißer Streifen darüber.
       WICHTIG: Das tech-Logo ist größer als das consulting-Logo und hat am
       Basis-Stil negative Margins (-15px). Daher hier eigener, sauberer Wert
       statt der 22px von consulting (die machten das Logo winzig).
       >>> STELLSCHRAUBE Logo-Größe: height unten anpassen (z.B. 32-44px).
           Größeres Logo => höhere Leiste. body padding-top ggf. mitziehen. */
    .navbar { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .navbar-toggler {
        font-size: 0.9rem !important; padding: 0.25rem 0.5rem !important;
        border-color: rgba(0, 0, 0, 0.1) !important;   /* dezenter, heller Rahmen */
    }
    /* Beim Klick/Fokus: statt fettem dunklen Rand nur ein zarter hellgrauer Ring */
    .navbar-toggler:focus,
    .navbar-toggler:active {
        outline: none !important;
        box-shadow: 0 0 0 0.15rem rgba(0, 0, 0, 0.08) !important;
    }
    .logo-img {
        height: 36px !important;
        margin-top: 0 !important; margin-bottom: 0 !important;
    }
    body { padding-top: 58px !important; }

    /* B) Ausgeklapptes Menü: Menüpunkte + Sprach-Button zentrieren.
       Das Markup hat ms-5 (am <ul>) und ms-3 (am Sprach-Button-<li>) fest
       gesetzt – die wirken auf ALLEN Größen und schieben auf Mobil nach rechts.
       Lösung analog dornheim.consulting: Desktop-Abstände hier neutralisieren
       und mittig ausrichten. (Desktop >=992px bleibt unberührt.) */
    .navbar-collapse .navbar-nav {
        margin-left: 0 !important;
        align-items: center !important;
    }
    .navbar-collapse .navbar-nav .nav-item.ms-3 {
        margin-left: 0 !important;
        margin-top: 0.75rem !important;
    }

    /* C) Hero Section kompakter */
    header.hero-section {
        min-height: auto !important; height: auto !important;
        display: block !important;
        padding-top: 30px !important; padding-bottom: 30px !important;
        margin-top: 0 !important; margin-bottom: 0 !important;
    }
    .hero-section .row { --bs-gutter-y: 0 !important; }
    .hero-section .col-lg-7 {
        margin-bottom: 1rem !important; padding-bottom: 0 !important;
    }
    .hero-section .col-lg-7 .d-flex {
        display: block !important; width: 100%;
        padding-bottom: 0 !important; margin-bottom: 0 !important;
    }
    .hero-section .col-lg-5 { margin-top: 0 !important; padding-top: 0 !important; }
    .hero-section .col-lg-5 img { margin-top: 0 !important; }

    /* D) CTA-Buttons: vollbreit, gestapelt, mit Abstand dazwischen */
    .btn, .btn-lg {
        padding-top: 0.6rem !important; padding-bottom: 0.6rem !important;
        font-size: 1rem !important; width: 100% !important;
        display: block; margin-bottom: 0.75rem !important; min-height: auto !important;
    }
    /* Outline-Button auf dunklem CTA-Hintergrund lesbar halten */
    .btn-outline-dark { border: 1px solid #ccc; background-color: transparent; color: var(--text-dark); }
    /* Icon im Button: Abstand + saubere Ausrichtung */
    .btn i { margin-left: 8px; vertical-align: middle; }

    /* E) Service-Cards: p-5 (3rem/48px) ist auf Mobil zu viel Innen-Padding.
       Auf 1.25rem (20px) = Seitenrand der Seite reduzieren (nicht groesser).
       >>> STELLSCHRAUBE: fuer noch schmaleres Padding z.B. 1rem (16px). */
    .service-card .card-body { padding: 1.25rem !important; }
}
/* <<< CONSULTING-PORT END */