/*
 * ============================================================
 * TBI SERVICE GMBH
 * custom.css
 *
 * Joomla 6
 * Helix Ultimate
 * SP Page Builder Pro
 * ============================================================
 */


/* ============================================================
   SEITEN-CSS LADEN
   ============================================================ */

@import url("./home.css");
@import url("./leistungen.css");
@import url("./unternehmen.css");
@import url("./referenzen.css");
@import url("./karriere.css");
@import url("./kontakt.css");


/* ============================================================
   VARIABLEN
   ============================================================ */

:root {
    --tbi-navy: #03243a;
    --tbi-navy-deep: #021b2c;
    --tbi-green: #1f7a45;

    --tbi-text: #0b2235;
    --tbi-muted: #667785;

    --tbi-light: #f5f7f8;
    --tbi-white: #ffffff;

    --tbi-border: rgba(11,34,53,.12);

    --tbi-container: 1320px;

    --tbi-radius: 4px;
}


/* ============================================================
   ALLGEMEIN
   ============================================================ */

.tbi-container {
    width: min(
        calc(100% - 40px),
        var(--tbi-container)
    );

    margin-inline: auto;
}


.tbi-section {
    padding-block: 72px;
}


/* ============================================================
   HEADER
   ============================================================ */

#sp-header {
    height: auto;

    background: #ffffff;

    box-shadow:
        0 1px 0 rgba(3,36,58,.08);

    transition:
        box-shadow .2s ease,
        background-color .2s ease;
}


#sp-header .container,
#sp-header .container-fluid {
    max-width: var(--tbi-container);

    margin: 0 auto;
}


/* ============================================================
   LOGO
   ============================================================ */

#sp-header .logo {
    display: flex;
    align-items: center;

    min-height: 88px;
}


#sp-header .logo img {
    display: block;

    width: 215px;
    height: auto;
    max-width: 100%;
    max-height: 86px;
    object-fit: contain;
}


/* ============================================================
   MENÜ
   ============================================================ */

#sp-menu {
    display: flex;
    align-items: center;
}


.sp-megamenu-parent {
    display: flex;
    align-items: center;

    gap: 2px;

    margin: 0;
    padding: 0;
}


.sp-megamenu-parent > li {
    position: relative;

    margin: 0;
    padding: 0;
}


.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 88px;

    padding: 0 14px;

    font-size: 15px;
    font-weight: 500;
    line-height: 1;

    color: var(--tbi-text);

    text-decoration: none;

    transition:
        color .2s ease;
}


/* ============================================================
   MENÜ HOVER
   ============================================================ */

.sp-megamenu-parent
> li
> a:not(.menu-contact):hover {
    color: var(--tbi-navy);
}


.sp-megamenu-parent
> li
> a:not(.menu-contact)::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 20px;

    height: 1px;

    background: var(--tbi-navy);

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform .2s ease;
}


.sp-megamenu-parent
> li
> a:not(.menu-contact):hover::after {
    transform: scaleX(1);
}


/* ============================================================
   AKTIVES MENÜ
   ============================================================ */

.sp-megamenu-parent
> li.active
> a:not(.menu-contact),

.sp-megamenu-parent
> li.current-item
> a:not(.menu-contact) {
    color: var(--tbi-navy);

    font-weight: 600;
}


.sp-megamenu-parent
> li.active
> a:not(.menu-contact)::after,

.sp-megamenu-parent
> li.current-item
> a:not(.menu-contact)::after {
    transform: scaleX(1);
}


/* ============================================================
   KONTAKT BUTTON IM MENÜ
   ============================================================ */

.sp-megamenu-parent
> li
> a.menu-contact {
    min-height: 40px;

    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: 20px;

    padding: 0 18px;

    border: 1px solid var(--tbi-navy);
    border-radius: 4px;

    background: var(--tbi-navy);

    color: #ffffff !important;

    font-size: 14px;
    font-weight: 600;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.sp-megamenu-parent
> li
> a.menu-contact::after {
    display: none !important;
}


.sp-megamenu-parent
> li
> a.menu-contact:hover {
    background: #0a3048;
    border-color: #0a3048;

    color: #ffffff !important;

    transform: translateY(-1px);
}


.sp-megamenu-parent
> li.active
> a.menu-contact,

.sp-megamenu-parent
> li.current-item
> a.menu-contact {
    background: var(--tbi-green);
    border-color: var(--tbi-green);
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.sp-megamenu-parent .sp-dropdown {
    padding-top: 8px;
}


.sp-megamenu-parent .sp-dropdown-inner {
    min-width: 220px;

    padding: 10px;

    border: 1px solid rgba(3,36,58,.08);
    border-radius: 4px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(3,36,58,.12);
}


.sp-megamenu-parent .sp-dropdown li > a {
    display: block;

    padding: 11px 14px;

    border-radius: 3px;

    font-size: 14px;
    font-weight: 500;

    color: var(--tbi-text);

    transition:
        background-color .2s ease,
        color .2s ease;
}


.sp-megamenu-parent .sp-dropdown li > a:hover {
    background: #f3f6f7;

    color: var(--tbi-navy);
}


/* ============================================================
   HAMBURGER
   ============================================================ */

#offcanvas-toggler {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-left: 34px;

    border-radius: 4px;

    color: var(--tbi-navy);

    transition:
        background-color .2s ease;
}


#offcanvas-toggler:hover {
    background: #f2f5f6;
}


/* ============================================================
   STICKY HEADER
   ============================================================ */

#sp-header.header-sticky {
    background: rgba(255,255,255,.97);

    box-shadow:
        0 8px 28px rgba(3,36,58,.08);

    backdrop-filter: blur(10px);
}


/* ============================================================
   HELIX FOOTER + EIGENER VORFOOTER
   ============================================================
   Tatsächlicher DOM laut Browser-Inspector:

   #sp-footer
     > .container
       > .container-inner
         > .row
           > #sp-footer1
             > .sp-column
               > .sp-module
                 > .sp-module-content
                   > .mod-custom
                     > .tbi-footer

   Der störende obere Balken kam von der Helix-Regel auf
   #sp-footer .container-inner (padding + border-top).
   ============================================================ */

#sp-footer {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--tbi-navy-deep) !important;

    color: rgba(255,255,255,.58) !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Helix-Außencontainer komplett öffnen */

#sp-footer > .container,
#sp-footer > .container-fluid {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/*
 * ENTSCHEIDENDE KORREKTUR:
 * template.css setzt hier standardmäßig padding: 30px 0
 * und border-top. Genau das erzeugt den sichtbaren Balken.
 */

#sp-footer .container-inner {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-top: 0 !important;

    box-shadow: none !important;
}


/* Bootstrap-/Helix-Zeile ohne Außenabstände */

#sp-footer .row {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Footer-Spalte auf volle Breite */

#sp-footer #sp-footer1,
#sp-footer [id^="sp-footer"] {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 100% !important;
}


/* Nur die Wrapper um das Custom-Modul neutralisieren */

#sp-footer #sp-footer1 > .sp-column,
#sp-footer #sp-footer1 .sp-module,
#sp-footer #sp-footer1 .sp-module-content,
#sp-footer #sp-footer1 .mod-custom,
#sp-footer #sp-footer1 .custom {
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Keine Helix-Pseudo-Elemente als Trennlinie */

#sp-footer .container-inner::before,
#sp-footer .container-inner::after {
    content: none !important;
    display: none !important;
}


/* Eigener Vorfooter bleibt normal navy */

#sp-footer .tbi-footer,
#sp-footer .tbi-footer-main {
    margin-top: 0 !important;

    background: var(--tbi-navy) !important;

    border-top: 0 !important;
    box-shadow: none !important;
}


/* Helix-Text / Copyright */

#sp-footer,
#sp-footer p,
#sp-footer span,
#sp-footer div {
    font-size: 11px;
    line-height: 1.4;
}


#sp-footer a {
    color: rgba(255,255,255,.62) !important;

    text-decoration: none;

    transition: color .2s ease;
}


#sp-footer a:hover,
#sp-footer a:focus {
    color: #ffffff !important;

    text-decoration: none;
}


/* Eigene alte Copyright-Zeile ausblenden:
   der echte Helix-Footer übernimmt Copyright + Rechtliches. */

.tbi-footer-bottom {
    display: none !important;
}


/* ============================================================
   FOOTER WRAPPER
   ============================================================ */

.tbi-footer {
    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 0;

    background: var(--tbi-navy);

    color: #ffffff;

    overflow: hidden;
}


/* ============================================================
   FOOTER HAUPTBEREICH
   ============================================================ */

.tbi-footer-main {
    width: 100%;

    margin: 0;

    padding: 42px 0 48px;

    background: var(--tbi-navy);
}


/* ============================================================
   FOOTER INNENCONTAINER
   ============================================================ */

.tbi-footer-inner {
    width: calc(100% - 64px);

    max-width: var(--tbi-container);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(300px,1.45fr)
        minmax(180px,.7fr)
        minmax(280px,1fr);

    gap: 72px;

    align-items: start;
}


/* ============================================================
   FOOTER BRAND
   ============================================================ */

.tbi-footer-brand {
    max-width: 380px;
}


.tbi-footer-logo {
    display: inline-block;

    margin: 0 0 22px;

    text-decoration: none;
}


.tbi-footer-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 190px;
}


.tbi-footer-brand p {
    max-width: 340px;

    margin: 0;

    font-size: 14px;
    line-height: 1.65;

    color:
        rgba(255,255,255,.68);
}


/* ============================================================
   FOOTER TITEL
   ============================================================ */

.tbi-footer-title {
    margin: 2px 0 20px;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: .16em;
    text-transform: uppercase;

    color:
        rgba(255,255,255,.48);
}


/* ============================================================
   FOOTER NAVIGATION
   ============================================================ */

.tbi-footer-nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.tbi-footer-nav a {
    display: inline-block;

    font-size: 14px;
    line-height: 1.5;

    color:
        rgba(255,255,255,.78);

    text-decoration: none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.tbi-footer-nav a:hover {
    color: #ffffff;

    transform:
        translateX(3px);
}


/* ============================================================
   FOOTER KONTAKT
   ============================================================ */

.tbi-footer-contact {
    min-width: 0;
}


.tbi-footer-address {
    margin: 0 0 18px;

    font-size: 14px;
    line-height: 1.65;

    color:
        rgba(255,255,255,.68);
}


.tbi-footer-contact
> a:not(.tbi-footer-contact-button) {
    display: block;

    width: fit-content;

    margin: 0 0 8px;

    font-size: 14px;
    line-height: 1.5;

    color:
        rgba(255,255,255,.87);

    text-decoration: none;

    transition:
        color .2s ease;
}


.tbi-footer-contact
> a:not(.tbi-footer-contact-button):hover {
    color: #ffffff;
}


/* ============================================================
   FOOTER KONTAKT BUTTON
   ============================================================ */

.tbi-footer-contact-button,
.tbi-footer-contact a.tbi-footer-contact-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 42px;

    margin-top: 16px;

    padding: 0 18px;

    border:
        1px solid rgba(255,255,255,.28);

    border-radius: 3px;

    background: transparent;

    color: #ffffff !important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1;

    text-decoration: none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.tbi-footer-contact-button span,
.tbi-footer-contact a.tbi-footer-contact-button span {
    color: inherit !important;

    font-size: 18px;

    transition:
        transform .2s ease;
}


/* Hover */

.tbi-footer-contact-button:hover,
.tbi-footer-contact-button:focus,
.tbi-footer-contact a.tbi-footer-contact-button:hover,
.tbi-footer-contact a.tbi-footer-contact-button:focus {
    background: #ffffff !important;

    border-color: #ffffff !important;

    color: #03243a !important;

    text-decoration: none !important;

    transform: translateY(-2px);
}


/* Text + Pfeil beim Hover */

.tbi-footer-contact-button:hover span,
.tbi-footer-contact-button:focus span,
.tbi-footer-contact a.tbi-footer-contact-button:hover span,
.tbi-footer-contact a.tbi-footer-contact-button:focus span {
    color: #03243a !important;
}


/* Pfeilbewegung */

.tbi-footer-contact-button:hover span:last-child,
.tbi-footer-contact-button:focus span:last-child {
    transform: translateX(4px);
}


/* ============================================================
   FOOTER BOTTOM
   ============================================================ */

.tbi-footer-bottom {
    width: 100%;

    margin: 0;

    padding: 0;

    border-top:
        1px solid rgba(255,255,255,.10);

    background: var(--tbi-navy);
}


.tbi-footer-bottom-inner {
    width: calc(100% - 64px);

    max-width: var(--tbi-container);

    min-height: 58px;

    margin: 0 auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    font-size: 11px;

    color:
        rgba(255,255,255,.45);
}


/* ============================================================
   FOOTER RECHTLICHES
   ============================================================ */

.tbi-footer-legal {
    display: flex;

    align-items: center;

    gap: 22px;
}


.tbi-footer-legal a {
    color:
        rgba(255,255,255,.58);

    text-decoration: none;

    transition:
        color .2s ease;
}


.tbi-footer-legal a:hover {
    color: #ffffff;
}


/* ============================================================
   VERHINDERT RESTABSTÄNDE NACH DEM FOOTER
   ============================================================ */

.tbi-footer + * {
    margin-top: 0 !important;
}


body,
.body-wrapper,
#sp-main-body {
    margin-bottom: 0;
}


#sp-main-body {
    padding-bottom: 0;
}


/* ============================================================
   KLEINER DESKTOP
   ============================================================ */

@media (max-width: 1199px) {

    .sp-megamenu-parent
    > li
    > a,

    .sp-megamenu-parent
    > li
    > span {
        padding-left: 10px;

        padding-right: 10px;

        font-size: 14px;
    }


    .sp-megamenu-parent
    > li
    > a.menu-contact {
        margin-left: 14px;
    }


    #offcanvas-toggler {
        margin-left: 24px;
    }


    .tbi-footer-inner {
        gap: 46px;

        grid-template-columns:
            1.3fr .7fr 1fr;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991px) {

    #sp-header .logo {
        min-height: 74px;
    }


    #sp-header .logo img {
        width: 175px;
        max-height: 72px;
    }


    #offcanvas-toggler {
        margin-left: auto;
    }


    .offcanvas-menu {
        background: #ffffff;
    }


    .offcanvas-menu
    .offcanvas-inner {
        padding: 30px;
    }


    .offcanvas-menu
    .menu > li > a {
        display: block;

        padding: 13px 0;

        border-bottom:
            1px solid rgba(3,36,58,.08);

        font-size: 17px;

        font-weight: 500;

        color:
            var(--tbi-text);
    }


    .offcanvas-menu
    .menu
    > li
    > a.menu-contact {
        display: flex;

        align-items: center;
        justify-content: center;

        min-height: 46px;

        margin-top: 20px;

        padding: 0 20px;

        border: 0;

        border-radius: 4px;

        background:
            var(--tbi-navy);

        color:
            #ffffff !important;
    }


    /* FOOTER */

    .tbi-footer-main {
        padding:
            50px 0 44px;
    }


    .tbi-footer-inner {
        width:
            calc(100% - 48px);

        grid-template-columns:
            1fr 1fr;

        gap:
            42px 55px;
    }


    .tbi-footer-brand {
        grid-column:
            1 / -1;

        max-width: 430px;
    }


    .tbi-footer-bottom-inner {
        width:
            calc(100% - 48px);
    }

}


/* ============================================================
   SMARTPHONE
   ============================================================ */

@media (max-width: 600px) {

    .tbi-container {
        width:
            min(
                calc(100% - 32px),
                var(--tbi-container)
            );
    }


    .tbi-section {
        padding-block: 44px;
    }


    #sp-header .logo img {
        width: 150px;
        max-height: 64px;
    }


    .offcanvas-menu
    .offcanvas-inner {
        padding: 24px;
    }


    /* FOOTER */

    .tbi-footer-main {
        padding:
            42px 0 38px;
    }


    .tbi-footer-inner {
        width:
            calc(100% - 40px);

        grid-template-columns:
            1fr;

        gap: 34px;
    }


    .tbi-footer-brand {
        grid-column: auto;

        max-width: none;
    }


    .tbi-footer-logo img {
        max-width: 165px;
    }


    .tbi-footer-title {
        margin-bottom: 14px;
    }


    .tbi-footer-bottom-inner {
        width:
            calc(100% - 40px);

        min-height: 0;

        display: block;

        padding:
            20px 0;
    }


    .tbi-footer-legal {
        margin-top: 11px;

        gap: 18px;
    }

}

/* ============================================================
   HELIX ABSCHLUSSZEILE UNTER DEM EIGENEN VORFOOTER
   ============================================================ */

/*
 * Der eigene .tbi-footer bleibt als Vorfooter volle Breite.
 * Die eigentliche Helix-Copyright-Zeile darunter bekommt wieder
 * einen eigenen zentrierten 1320px-Innencontainer.
 */

#sp-footer #sp-footer1 > .sp-column {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* Custom-Modul = Vorfooter volle Breite */

#sp-footer #sp-footer1 > .sp-column > .sp-module,
#sp-footer #sp-footer1 > .sp-column > .sp-module .sp-module-content,
#sp-footer #sp-footer1 > .sp-column > .sp-module .mod-custom {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Helix Copyright / eigener HTML-Copyrightblock */

#sp-footer .sp-copyright,
#sp-footer .tbi-helix-footer-row {
    width: calc(100% - 64px) !important;
    max-width: var(--tbi-container) !important;
    min-height: 58px;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 30px;

    color: rgba(255,255,255,.45) !important;

    background: transparent !important;

    font-size: 11px !important;
    line-height: 1.4 !important;
}


/* Falls der Copyright-Inhalt nicht als .sp-copyright,
   sondern direkt als HTML im Footer ausgegeben wird */

#sp-footer .tbi-helix-footer-copy {
    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap;

    color: rgba(255,255,255,.45) !important;
}


#sp-footer .tbi-helix-footer-links {
    display: flex !important;
    align-items: center !important;

    gap: 22px;

    margin: 0 0 0 auto !important;
    padding: 0 !important;
}


#sp-footer .tbi-helix-footer-links a {
    color: rgba(255,255,255,.58) !important;

    text-decoration: none !important;
}


#sp-footer .tbi-helix-footer-links a:hover,
#sp-footer .tbi-helix-footer-links a:focus {
    color: #ffffff !important;
}


/* Wenn Impressum / Datenschutz direkt innerhalb von .sp-copyright liegen */

#sp-footer .sp-copyright a {
    margin-left: 22px;

    color: rgba(255,255,255,.58) !important;

    text-decoration: none !important;
}


/* Die Abschlusszeile liegt auf dem dunkleren Helix-Hintergrund */

#sp-footer .sp-copyright,
#sp-footer .tbi-helix-footer-row {
    position: relative;
    z-index: 2;
}


/* Mobile */

@media (max-width: 700px) {

    #sp-footer .sp-copyright,
    #sp-footer .tbi-helix-footer-row {
        width: calc(100% - 40px) !important;
        min-height: 0;

        padding: 16px 0 !important;

        flex-wrap: wrap;

        gap: 8px 18px;
    }


    #sp-footer .tbi-helix-footer-links {
        margin-left: 0 !important;
    }


    #sp-footer .sp-copyright a {
        margin-left: 16px;
    }

}

/* ============================================================
   FIX: SCHMALER BALKEN OBERHALB DES VORFOOTERS
   Joomla Frontend-Editing kann vor dem Footer-Modul einen
   jmodedit-Link / eine leere Inline-Zeile erzeugen.
   Dadurch bekommt .sp-column trotz padding:0 eine sichtbare Höhe.
   ============================================================ */

/* Frontend-Edit-Icon im Footer aus dem Layout nehmen */
#sp-footer .jmodedit,
#sp-footer a.jmodedit,
#sp-footer .btn.jmodedit {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    overflow: hidden !important;
}


/* Wrapper selbst dürfen keine eigene Text-/Zeilenhöhe erzeugen */
#sp-footer #sp-footer1 > .sp-column,
#sp-footer #sp-footer1 > .sp-column > .sp-module,
#sp-footer #sp-footer1 > .sp-column > .sp-module > .sp-module-content,
#sp-footer #sp-footer1 > .sp-column > .sp-module > .sp-module-content > .mod-custom {
    line-height: 0 !important;
}


/* Im eigentlichen Vorfooter normale Zeilenhöhe wiederherstellen */
#sp-footer .tbi-footer,
#sp-footer .tbi-footer-main,
#sp-footer .tbi-footer-inner,
#sp-footer .tbi-footer-inner * {
    line-height: normal;
}


/* Vorfooter muss direkt am vorherigen Inhalt beginnen */
#sp-footer .tbi-footer {
    display: block !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    vertical-align: top;
}