/* =====================================================
   WEIT-WEG.DE – STABIL RESPONSIVE CSS
   Container-basiertes 3-Slot-System
===================================================== */


/* =====================================================
   BASIS – HEADER
===================================================== */

#tr_header {
    width: 100%;
    padding: 20px 0;
    background: #ffffff;
    position: relative;
    z-index: 1000;
}

#tr_header .header_left {
    display: flex;
    align-items: center;
}

#tr_header .main-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

#tr_header .header_right {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-left: auto;
}

#tr_header .call_us {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

#tr_header .green_btn,
#tr_header .yellow_btn {
    padding: 10px 26px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#tr_header .header__hamburger {
    display: none;
}



/* =====================================================
   ≥ 1280px – DESKTOP
===================================================== */

@media (min-width: 1200px) {

    #tr_header .main-menu {
        display: flex;
    }

    #tr_header .header__hamburger {
        display: none;
    }

    #tr_header .green_btn,
    #tr_header .yellow_btn {
        display: inline-flex;
    }

}



/* =====================================================
  TABLET
   Stabil • kein space-between • kein Reflow
===================================================== */

@media (min-width: 768px) and (max-width: 1199px)  {

    /* Desktop-Elemente aus */
    #tr_header .main-menu,
    #tr_header .green_btn,
    #tr_header .yellow_btn {
        display: none !important;
    }

    /* Header */
    #tr_header {
        padding: 16px 0;
    }

    /* Container bleibt Referenz */
    #tr_header .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* -------------------------------------------------
       Bootstrap Grid im Header komplett neutralisieren
    ------------------------------------------------- */

    #tr_header .row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        /* WICHTIG */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #tr_header .row > .col,
    #tr_header .row > .col-auto {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* -------------------------------------------------
       Layout-Struktur
    ------------------------------------------------- */

    /* Logo */
    #tr_header .col-auto {
        flex: 0 0 auto !important;
    }

    #tr_header .site_logo img {
    width: 170px !important;
    height: auto !important;
    display: block;
       transform: translateY(4px);
    }

#tr_header .mean-push {
    display: none !important;
}
    /* Rechte Seite */
    #tr_header .row > .col {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #tr_header .header_right {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Telefon */
    #tr_header .call_us {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        white-space: nowrap;
        min-width: 0 !important;
    }

    /* Icon fixieren */
    #tr_header .ph-headset {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        line-height: 22px !important;
        font-size: 12px !important;
        flex: 0 0 22px !important;
    }

    /* Hamburger */
    #tr_header .header__hamburger {
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
    }


}
/* =====================================================
  MOBILE HEADER (Bootstrap neutralisiert)
===================================================== */

@media (max-width: 767px) {

    /* Desktop-Elemente aus */
    #tr_header .main-menu,
    #tr_header .green_btn,
    #tr_header .yellow_btn {
        display: none !important;
    }

    /* Header */
    #tr_header {
        padding: 16px 0;
    }

    /* Container bleibt Referenz */
    #tr_header .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* -------------------------------------------------
       Bootstrap Grid im Header komplett neutralisieren
    ------------------------------------------------- */

    #tr_header .row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        /* WICHTIG */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #tr_header .row > .col,
    #tr_header .row > .col-auto {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* -------------------------------------------------
       Layout-Struktur
    ------------------------------------------------- */

    /* Logo */
    #tr_header .col-auto {
        flex: 0 0 auto !important;
    }

    #tr_header .site_logo img {
    width: 120px !important;
    height: auto !important;
    display: block;
       transform: translateY(4px);
    }

#tr_header .mean-push {
    display: none !important;
}
    /* Rechte Seite */
    #tr_header .row > .col {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    #tr_header .header_right {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Telefon */
    #tr_header .call_us {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        font-size: 12px;
        white-space: nowrap;
        min-width: 0 !important;
    }

    /* Icon fixieren */
    #tr_header .ph-headset {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        line-height: 22px !important;
        font-size: 12px !important;
        flex: 0 0 22px !important;
    }

    /* Hamburger */
    #tr_header .header__hamburger {
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

}
/* =====================================================
   ≤ 500px – SEHR KLEIN
===================================================== */

@media (max-width: 500px) {

    #tr_header {
        padding: 14px 16px;
    }

    #tr_header .site_logo img {
        max-height: 34px;
    }

}



/* =====================================================
   SLIDER FIX
===================================================== */

@media (max-width: 1279px) {

    .slider_item {
        height: auto !important;
        min-height: auto !important;
        padding: 100px 0 140px 0 !important;
    }

    .tour_btn {
        display: none;
    }

}



/* =====================================================
   MOBILE HEADLINE
===================================================== */

@media (max-width: 900px) {

    .slider_item h1.heading {
        font-size: 36px;
        line-height: 1.2;
    }

}

@media (max-width: 500px) {

    .slider_item h1.heading {
        font-size: 30px;
    }

}