/* ==========================================================================
   1. GLOBALER HINTERGRUND & LAYOUT
   ========================================================================== */

/* Setzt den echten Inhalts-Hintergrund der gesamten Plattform auf ein helles Grau */
.site-wrapper,
body.site,
body.site-contact-page {
    background-color: #f4f5f7 !important;
}

/* ==========================================================================
   2. HEADER-BEREICH (KOPFZEILE) - GILT FÜR ALLE SEITEN INKL. KONTAKT
   ========================================================================== */

/* Gestaltet den Header-Balken durchgehend weiß, offen und freundlich */
header.header,
.site-contact-page header.header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    border-bottom: 3px solid #a31d24 !important; /* Das Naumburger Rot als feine Linie */
}

/* Absolute Farberzwingung für den linken Marken- und Logo-Textbereich (Dunkelgrau) */
header.header .navbar-brand,
header.header .navbar-brand a,
header.header .navbar-brand span,
header.header .site-title,
header.header .brand,
.navbar-brand .site-title,
.navbar-brand .site-description,
.site-contact-page header.header .navbar-brand * {
    color: #222222 !important;
}

/* Den kleinen Slogan unter dem Firmennamen gezielt auf ein lesbares Grau setzen */
header.header .site-description,
.navbar-brand .site-description,
.site-contact-page .navbar-brand .site-description {
    color: #555555 !important;
}

/* ==========================================================================
   3. HAUPTMENÜ (RECHTE SEITE IM HEADER)
   ========================================================================== */

/* --- 1. DESKTOP-LAYOUT (Logo und Menü zwingend nebeneinander) --- */

/* Gibt dem gesamten Header-Inhalt die volle Flexibilität und Breite */
header.header .navbar,
header.header .container-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Schiebt das Logo ganz nach links, das Menü ganz nach rechts */
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

/* Verhindert radikal, dass der Firmenname umbricht, und gibt ihm den nötigen Platz */
header.header .navbar-brand,
header.header .brand-container {
    white-space: nowrap !important; /* Verbietet den Zeilenumbruch im Namen */
    flex-shrink: 0 !important;      /* Verhindert, dass das Menü das Logo zusammendrückt */
}

/* Zwingt den einklappbaren Menü-Block, auf Desktop flach ganz rechts zu bleiben */
header.header .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}

/* Holt die einzelnen Links nebeneinander auf eine saubere Achse */
header.header .navbar-nav,
header.header .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Macht die Schrift im Menü dezent, schlank und professionell */
header.header .mod-menu a,
header.header .nav-link,
.site-contact-page header.header .mod-menu a {
    font-weight: 500 !important;
    font-size: 1.02rem !important;
    color: #444444 !important;
    text-decoration: none !important;
    padding: 6px 4px !important;
    transition: all 0.2s ease;
}

/* Farbwechsel beim Drüberfahren (Hover) und für die aktive Seite */
header.header .mod-menu a:hover,
header.header .nav-link:hover,
header.header .mod-menu .active > a,
.site-contact-page header.header .mod-menu a:hover {
    color: #a31d24 !important;
}

/* Entfernt störende Pfeilsymbole */
header.header .mod-menu .nav-item::after,
header.header .mod-menu .dropdown-toggle::after,
header.header .mod-menu span.icon-chevron-down {
    display: none !important;
    content: "" !important;
}


/* --- 2. MOBIL-LAYOUT (Greift nur auf Smartphones / Tablets) --- */
@media (max-width: 991.98px) {
    /* Erlaubt dem Logo-Namen auf dem Smartphone das normale Umbrechen, damit er nicht aus dem Bildschirm ragt */
    header.header .navbar-brand,
    header.header .brand-container {
        white-space: normal !important;
    }

    header.header .navbar {
        flex-direction: row !important;
        justify-content: space-between !important;
        position: relative !important;
        align-items: center !important;
    }

    /* Versteckt das Menü mobil, bis der Hamburger geklickt wird */
    header.header .navbar-collapse {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        padding: 20px 0 !important;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05) !important;
        border-top: 1px solid #eeeeee !important;
        z-index: 999 !important;
    }
    
    /* Blendet das Menü mobil ein, wenn es aktiv/geöffnet ist */
    header.header .navbar-collapse.show {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ordnet die Menüpunkte mobil mittig untereinander an */
    header.header .navbar-nav,
    header.header .mod-menu {
        flex-direction: column !important;
        gap: 18px !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Der Button selbst zeichnet jetzt die 3 Querstriche und sitzt fest rechts */
    header.header .navbar-toggler {
        display: block !important;
        border: 2px solid #a31d24 !important; /* Roter Rahmen */
        border-radius: 4px !important;
        width: 44px !important;
        height: 36px !important;
        cursor: pointer !important;
        margin-left: auto !important; /* Schiebt ihn ganz nach rechts */
        
        /* Erzeugt 3 messerscharfe dunkle Striche im Inneren des Buttons */
        background: linear-gradient(
            to bottom, 
            transparent 6px, 
            #222222 6px, #222222 8px, 
            transparent 8px, transparent 14px, 
            #222222 14px, #222222 16px, 
            transparent 16px, transparent 22px, 
            #222222 22px, #222222 24px, 
            transparent 24px
        ) no-repeat center center !important;
        background-size: 22px 30px !important;
    }

    /* Blendet das unkooperative Standard-Icon von Joomla vollständig aus */
    header.header .navbar-toggler-icon {
        display: none !important;
    }
}

/* Blendet den Handy-Button auf dem echten PC/Laptop komplett aus */
@media (min-width: 992px) {
    header.header .navbar-toggler {
        display: none !important;
    }
}

/* ==========================================================================
   4. INHALTS-ELEMENTE (CARDS & BUTTONS AUF DER START-/LEISTUNGSSEITE)
   ========================================================================== */

/* Den weißen Hintergrund für die Kacheln sichern */
.card {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
}

/* Die Outline-Buttons im Firmen-Rot stylen */
.btn-outline-danger {
    color: #a31d24 !important;
    border-color: #a31d24 !important;
    transition: all 0.3s ease;
}

.btn-outline-danger:hover {
    background-color: #a31d24 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   5. SCHRIFTARTEN & TYPOGRAFIE-KERNE
   ========================================================================== */

/* Erzwingt Roboto auf der gesamten Plattform */
body, p, li, span, a, h1, h2, h3, .page-header h1 {
    font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
}

/* Setzt die Text-Eigenschaften für Fließtext */
body {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: #333333 !important;
}

/* Sprengt die Cassiopeia-Schriftgrößen-Sperre für die Hauptüberschrift */
h1, .page-header h1, h1.display-5 {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    display: block !important;
}

/* Richtet die Überschriften in den Kacheln aus */
h3.card-title, .card h3 {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
}

/* ==========================================================================
   6. KONTAKTSEITE & FORMULAR
   ========================================================================== */

/* Die weiße Kachel kompakt, elegant zentrieren und in Spaltenstruktur zwingen */
.site-contact-page .main-content,
.com-contact,
.com-contact__container {
    background-color: #ffffff !important;
    padding: 35px 40px !important; /* Weniger Innenabstand für ein flacheres Design */
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    margin-top: 30px !important;
    margin-bottom: 50px !important;
    max-width: 700px !important; /* Noch etwas schmaler für perfekte Lesbarkeit */
    margin-left: auto !important;  
    margin-right: auto !important; 
    
    /* Aktiviert die Reihenfolge-Steuerung für die inneren Blöcke */
    display: flex !important;
    flex-direction: column !important;
}

/* Blendet den großen, doppelten Firmennamen oben auf dieser Seite komplett aus */
.site-contact-page h1, 
.com-contact h1,
.com-contact__title {
    display: none !important;
}

/* Blendet alle doppelten Überschriften (inkl. Kontaktformular & Weitere Informationen) komplett aus */
.com-contact h2,
.com-contact__miscinfo h2,
.com-contact h3,
.com-contact legend,
.com-contact__form h3,
#contact-form h3,
.com-contact__miscinfo h3,
.site-contact-page h2,
.site-contact-page h3 {
    display: none !important;
}

/* Schiebt den Block "Weitere Informationen" mathematisch nach ganz oben und schließt das Loch */
.com-contact__miscinfo,
div[role="tabpanel"],
.com-contact fieldset + div.row,
header + .row {
    order: 1 !important;
    margin-bottom: 5px !important; /* Auf 5px reduziert für perfekten Anschluss an die Boxen */
}

/* Setzt das eigentliche Formular in der Reihenfolge nach unten */
.com-contact__form,
#contact-form {
    order: 2 !important;
}

/* Entfernt überschüssige Joomla-Standardabstände im Infoblock */
.com-contact__miscinfo dl,
.com-contact__miscinfo dd,
.com-contact__miscinfo dt {
    margin: 0 !important;
    padding: 0 !important;
}

/* Entfernt das kleine Standard-Icon vor dem Einleitungstext */
.com-contact__miscinfo .icon-info,
.com-contact__miscinfo span[class^="icon-"],
.com-contact__miscinfo .fa {
    display: none !important;
}

/* Gestaltet den nach oben geschobenen Einleitungstext dezent, harmonisch und lesbar */
.com-contact__miscinfo,
.com-contact__miscinfo p,
.com-contact__description,
.com-contact p.text-muted {
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    color: #444444 !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

/* Macht die Eingabefelder deutlich flacher und die Tipp-Schrift kleiner */
.contact-form input[type="text"], 
.contact-form input[type="email"], 
.contact-form textarea {
    border: 1px solid #ced4da !important;
    padding: 8px 12px !important; /* Flachere, klassische Boxen */
    border-radius: 4px !important;
    background-color: #f8f9fa !important;
    margin-bottom: 14px !important;
    font-size: 0.9rem !important; /* Kleine, feine Tippschrift */
    color: #333333 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease-in-out !important;
}

/* Dezenter Fokus-Effekt bei Klick */
.contact-form input:focus, 
.contact-form textarea:focus {
    border-color: #a31d24 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(163, 29, 36, 0.1) !important;
    outline: none !important;
}

/* Die normalen Beschriftungen (Name, E-Mail etc.) dezent über den Feldern formatieren */
.contact-form .control-group:not(:has(input[type="checkbox"])) label, 
.contact-form .control-group:not(:has(input[type="checkbox"])) .control-label {
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    color: #555555 !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* --- DATENSCHUTZ-CHECKBOX UND TEXT REPARIEREN --- */

/* Verhindert radikal, dass das Label die Checkbox überlagert und blockiert */
.contact-form .control-group:has(input[type="checkbox"]) label,
.contact-form label[for="jform_contact_email_copy"] {
    display: inline !important; 
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Zwingt das Kontrollkästchen, sichtbar, unblockiert und anklickbar zu sein */
.contact-form input[type="checkbox"],
#jform_contact_email_copy {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    margin-right: 8px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin-top: -3px !important;
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
}

/* Gestaltet den Datenschutz-Hinweistext angenehm klein, lesbar und unaufdringlich */
.contact-form .control-group p,
.contact-form .text-muted,
.contact-form fieldset + div,
.contact-form .checkbox + span,
.contact-form .control-group:has(input[type="checkbox"]) {
    font-size: 0.8rem !important; /* Sehr kleine Rechtstexte */
    line-height: 1.4 !important;
    color: #666666 !important;
}

/* Den Absende-Button kompakt und stimmig einpassen */
.contact-form button.btn-primary,
.contact-form .btn-primary {
    background-color: #a31d24 !important;
    border-color: #a31d24 !important;
    color: #ffffff !important;
    padding: 10px 30px !important; /* Kompaktere Button-Größe */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 10px !important;
}

.contact-form button.btn-primary:hover,
.contact-form .btn-primary:hover {
    background-color: #222222 !important;
    border-color: #222222 !important;
}

/* ==========================================================================
   7. FOOTER-BEREICH (RECHTSICHERHEIT)
   ========================================================================== */

/* Färbt den gesamten Footer-Balken in ein edles Anthrazit und erzwingt minimale Höhe */
footer.footer, 
.footer,
.container-footer {
    background-color: #222222 !important;
    padding: 0 !important; /* Setzt den äußeren Rahmen-Abstand komplett auf Null */
    border-top: 3px solid #a31d24 !important; /* Feine rote Trennlinie */
}

/* Bricht die CSS-Grid-Abstände des Cassiopeia-Menümoduls im Footer auf ein Minimum herab */
footer.footer .grid-child,
.container-footer .grid-child {
    padding-top: 10px !important;    /* Minimaler Abstand nach oben */
    padding-bottom: 10px !important; /* Minimaler Abstand nach unten */
    margin: 0 auto !important;
}

/* Zwingt das Menü, sich waagerecht und exakt in der Mitte anzuordnen */
footer.footer .mod-menu,
.footer .mod-menu,
footer.footer ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Entfernt Aufzählungspunkte im Fußbereich komplett */
footer.footer .mod-menu li,
.footer .mod-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style-type: none !important;
}

/* Macht die Links unten glasklar lesbar (Hellgrau auf dunklem Grund) */
footer.footer .mod-menu a,
.footer .mod-menu a,
footer.footer .nav-link,
.footer .nav-link {
    color: #aaaaaa !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    transition: color 0.2s ease;
}

/* Hover-Effekt im Fußbereich */
footer.footer .mod-menu a:hover,
.footer .mod-menu a:hover,
footer.footer .nav-link:hover {
    color: #ffffff !important;
}

/* Copyright- und Systemtexte im Footer zentrieren und enger an die Links rücken */
footer.footer .mod-custom,
footer.footer p {
    color: #777777 !important;
    text-align: center !important;
    margin-top: 6px !important; /* Von 15px auf 6px verringert für weniger Abstand nach oben */
    font-size: 0.85rem !important;
}

/* Zentriert den gesamten Modul-Container im Footer-Bereich */
footer.footer .container,
footer.footer .grid-child,
.footer .container-component {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* Zentriert das IHK-Siegel im Footer und passt die Größe dezent an */
footer.footer .footer-ihk-siegel,
.footer .footer-ihk-siegel {
    text-align: center !important;
    margin-top: 12px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

footer.footer .footer-ihk-siegel img,
.footer .footer-ihk-siegel img {
    max-width: 85px !important; /* Dezent und unaufdringlich im Footer */
    height: auto !important;
    opacity: 0.85 !important; /* Lässt es edel mit dem dunklen Hintergrund verschmelzen */
    transition: opacity 0.2s ease;
}

footer.footer .footer-ihk-siegel img:hover {
    opacity: 1 !important;
}
/* Zwingt das Menü und das Bild-Modul im Footer, untereinander statt nebeneinander zu stehen */
footer.footer .grid-child,
.container-footer .grid-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important; /* Abstand zwischen den Links und dem Siegel */
}

/* Zentriert das IHK-Siegel im Footer und kontrolliert die Bildgröße strikt */
footer.footer .footer-ihk-siegel,
.footer .footer-ihk-siegel {
    text-align: center !important;
    margin-top: 10px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important; /* Setzt Bild und neuen Text sauber untereinander */
    align-items: center !important;
}

/* Zwingt das Siegel-Bild auf PC UND Smartphone unfehlbar auf eine kleine, edle Größe */
footer.footer .footer-ihk-siegel img,
.footer .footer-ihk-siegel img {
    max-width: 65px !important;  /* Perfekte, dezente Größe */
    width: 65px !important;      /* Erzwingt die Breite auf allen Handys und Browsern */
    height: auto !important;
    opacity: 0.85 !important;    /* Lässt es elegant mit dem dunklen Grund verschmelzen */
    transition: opacity 0.2s ease;
    display: inline-block !important;
}

/* Hover-Effekt: Bild leuchtet beim Drüberfahren voll auf */
footer.footer .footer-ihk-siegel img:hover,
.footer .footer-ihk-siegel img:hover {
    opacity: 1 !important;
}

/* Gestaltet Ihren neuen Begleittext unter dem Siegel dezent und passend */
footer.footer .footer-ihk-siegel .ihk-subtext,
.footer .footer-ihk-siegel .ihk-subtext {
    color: #777777 !important;   /* Gleiches unaufdringliches Grau wie der restliche Footer */
    font-size: 0.82rem !important;/* Schön klein und elegant */
    font-weight: 500 !important;
    margin-top: 8px !important;  /* Abstand zwischen Grafik und Text */
    margin-bottom: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

/* Zwingt das Menü und das neue Siegel-Modul im Footer, untereinander statt nebeneinander zu stehen */
footer.footer .grid-child,
.container-footer .grid-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;        /* Abstand zwischen den Menü-Links und dem Siegel */
}