/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */

/* =========================================
   Zahlungsart Überweisung: Text durch eigenes Logo ersetzen
   ========================================= */

input[name="Zahlungsart"][value="1"] + label .content .title {
    display: inline-block;
    width: 105px;
    height: 18px;
    background-image: url("ueberweisung.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 105px auto;

    font-size: 0;
    color: transparent;
    vertical-align: middle;
}

/* =========================================
   Abstand unter Überweisung an die PayPal-Zeilen angleichen
   ========================================= */

.checkout-payment-method:has(input[name="Zahlungsart"][value="1"]) {
    margin-bottom: 0px;
}

/* =========================================
   Unterüberschrift "Versandart" im Checkout ausblenden
   ========================================= */

#checkout-shipping-payment > .h2 {
    display: none !important;
}

/* =========================================
   Zeile "Versand nach" einrücken
   ========================================= */

#checkout-shipping-payment .checkout-shipping-form-change {
    margin-left: 15px;
}

/* =========================================
   Überflüssige Bezeichnungen bei PayPal-Zahlungsarten ausblenden
   ========================================= */

#za_ppc_paylater_name,
#za_ppc_sepa_name,
#za_ppc_card_name {
    display: none !important;
}


/* =========================================
   Alle Gebühren exakt untereinander ausrichten
   ========================================= */

#fieldset-payment .checkout-payment-method {
    position: relative;
}

#fieldset-payment .checkout-payment-method-badge {
    position: absolute !important;
    left: 150px !important;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    white-space: nowrap;
}

/* =========================================
   Nur den MwSt.-Hinweis im Footer ausblenden
   ========================================= */

.footnote-vat {
    display: none !important;
}

/* =========================================
   Aufpreise bei den Auswahlmöglichkeiten im Konfigurator ausblenden
   ========================================= */

.config-item .badge.border-primary.badge-light {
    display: none !important;
}
/* =========================================================
   HERSTELLER-ÜBERSICHT
   Nur in Sektionaltore, Rolltore und Schwingtore
   Kategorienamen unter den Logos ausblenden
   ========================================================= */

body:has(.breadcrumb-item.last.active a[href$="/Sektionaltore"])
    .content-cats-small .caption,
body:has(.breadcrumb-item.last.active a[href$="/Rolltore"])
    .content-cats-small .caption,
body:has(.breadcrumb-item.last.active a[href$="/Schwingtore"])
    .content-cats-small .caption {
    display: none !important;
}

/* =========================================
   JTL-KONFIGURATOR – FESTE MENGENANZEIGE AUSBLENDEN
   ========================================= */

.config-item .cfg-item-qty:not(:has(input.quantity)) {
    display: none !important;
}

/* =========================================
   Konfigurationsgruppen NUR im linken Konfigurator hervorheben
   ========================================= */

/* =========================================================
   KONFIGURATIONSGRUPPEN – HELLER CONTAINER MIT DUNKLER KOPFZEILE
   ========================================================= */

.cfg-group-list-wrapper .cfg-group {
    background-color: #f7f3ec !important;
    border: 1px solid #19164e !important;
    border-radius: 8px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    overflow: hidden !important;
}


/* Kopfbereich / Überschrift */
.cfg-group-list-wrapper .cfg-group .legend,
.cfg-group-list-wrapper .cfg-group .cfg-group-title,
.cfg-group-list-wrapper .cfg-group > .h5,
.cfg-group-list-wrapper .cfg-group > h3,
.cfg-group-list-wrapper .cfg-group > h4 {
    background-color: #19164e !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    border: none !important;
}


/* Bereich unter der Überschrift */
.cfg-group-list-wrapper .cfg-group .cfg-group-inner,
.cfg-group-list-wrapper .cfg-group .cfg-group-content,
.cfg-group-list-wrapper .cfg-group > .row,
.cfg-group-list-wrapper .cfg-group > .inner {
    padding: 16px !important;
}

/* Einzelne Komponenten weiterhin weiß */
.cfg-group-list-wrapper .cfg-group .config-item {
    background-color: #ffffff !important;
}

/* Rahmen um einzelne Artikel im Konfigurator */
.cfg-group-list-wrapper .cfg-group .config-item {
    background-color: #ffffff !important;
    border: 1px solid #aaaaaa !important;
    border-radius: 4px;
    margin-bottom: 6px;
}


/* =========================================
   Hinweis "Bitte wählen Sie genau eine Komponente." ausblenden
   ========================================= */

.cfg-group-list-wrapper .js-group-badge-checked {
    display: none !important;
}

/* Box "Ihre Konfiguration" – grauer Hintergrund mit Rahmen */
#product-configuration-sidebar,
#product-configuration-sidebar .panel,
#product-configuration-sidebar .panel-heading,
#product-configuration-sidebar .config-table,
#product-configuration-sidebar .panel-footer {
    background-color: #e8e8e8 !important;
}

/* Außenrahmen um die komplette Konfigurationsbox */
#product-configuration-sidebar {
    border: 1px solid #888888 !important;
    border-radius: 4px !important;
    padding: 12px !important;
}

/* Artikeldetails: "Bitte treffen Sie eine Auswahl" ausblenden */
.price_label.price_on_application {
    display: none !important;
}

/* Artikeldetails: "Sofort bestellbar" inkl. Symbol ausblenden */
.delivery-status {
    display: none !important;
}

/* Oberen Produktbereich farblich hinterlegen */
#product-offer {
    border-radius: 4px !important;
    padding: 25px !important;
}
/* =========================================================
   ABDUNKLUNG BEIM KATEGORIENMENÜ DEAKTIVIEREN
   ========================================================= */

.modal-backdrop.show {
    opacity: 0 !important;
}

/* =========================================================
   KATEGORIENMENÜ KOPFZEILE
   Menü optisch von der Seite abheben
   ========================================================= */

header .dropdown-menu {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* =========================================================
   HEADER – Höhe Desktop und vertikale Ausrichtung
   ========================================================= */

@media (min-width: 992px) {
    #jtl-nav-wrapper {
        min-height: 116px;
    }

    #jtl-nav-wrapper .navbar {
        min-height: 116px;
        align-items: center !important;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper {
        min-height: 116px;
        display: flex;
        align-items: center;
    }
}

/* =========================================================
   HEADER – Hauptkategorien
   ========================================================= */

@media (min-width: 992px) {

   #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #252a38;
}

    #jtl-nav-wrapper .navbar-nav > .nav-item > .dropdown-toggle::after {
        display: none !important;
    }
}
/* =========================================================
   HEADER – Grauer Balken oberhalb
   ========================================================= */

@media (min-width: 992px) {
    #header-top-bar {
        height: 34px;
        min-height: 34px;
        background-color: #f5f6f8;
        border-bottom: 1px solid #e3e7ee;
    }
}
/* =========================================================
   STARTSEITE – Hero Untertext
   ========================================================= */

.tx-hero-lead {
    max-width: 620px;
}
/* =========================================================
   STARTSEITE – Kategorie-Slider
   ========================================================= */

.tx-category-card .slider-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================================
   STARTSEITE – Kategorie-Karten
   ========================================================= */

.tx-category-card {
    overflow: hidden;
}

/* =========================================================
   STARTSEITE – Kategorie-Slider
   ========================================================= */

.tx-category-card .slider-pause-controls-inside {
    display: none !important;
}

/* =========================================================
   STARTSEITE – Warum Torexperten Text vertikal zentrieren
   ========================================================= */

.tx-why-card-text p {
    margin-bottom: 0;
}

/* =========================================================
   STARTSEITE – Warum Torexperten rote Kante
   ========================================================= */

.tx-why-cards {
    border-left: 3px solid #BA2025 !important;
}

/* =========================================================
   STARTSEITE – B2B Zugang rote Kante
   ========================================================= */
.tx-b2b-container-rechts {
    border-left: 3px solid #BA2025 !important;
}

/* =========================================================
   FOOTER – Obere CI-Kante
   ========================================================= */
#footer {
    border-top: 3px solid #19164E !important;
}

/* =========================================================
   ARTIKELSEITE – ENDLOSER PREMIUM-HINTERGRUND V6
   Warmes Creme / Beige mit weichen Bändern
   ========================================================= */

body[data-page="1"] #content-wrapper {
    position: relative;

    background-color: #f8f4ed;

    background-image:

    /* =====================================================
       EBENE 1 – breite warme Bänder
       ===================================================== */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 2600' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='black'/%3E%3Cstop offset='9%25' stop-color='white'/%3E%3Cstop offset='91%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='black'/%3E%3C/linearGradient%3E%3Cmask id='m1'%3E%3Crect width='1600' height='2600' fill='url(%23f1)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m1)' fill='none' stroke-linecap='round'%3E%3Cpath d='M-350 180 C120 520 430 690 760 640 C1090 590 1370 330 1900 170' stroke='%23d9cbb9' stroke-width='150' opacity='.46'/%3E%3Cpath d='M-420 720 C80 1050 460 1160 820 1000 C1180 840 1430 570 1920 520' stroke='%23eadfd2' stroke-width='105' opacity='.68'/%3E%3Cpath d='M-360 1510 C130 1310 470 1380 820 1660 C1160 1930 1460 1890 1920 1580' stroke='%23d6c5b0' stroke-width='175' opacity='.34'/%3E%3Cpath d='M-350 2220 C100 2420 490 2450 840 2230 C1190 2010 1490 2040 1900 2360' stroke='%23eee5da' stroke-width='135' opacity='.70'/%3E%3C/g%3E%3C/svg%3E"),

    /* =====================================================
       EBENE 2 – helle transparente Gegenwellen
       ===================================================== */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 3300' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='black'/%3E%3Cstop offset='8%25' stop-color='white'/%3E%3Cstop offset='92%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='black'/%3E%3C/linearGradient%3E%3Cmask id='m2'%3E%3Crect width='1600' height='3300' fill='url(%23f2)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m2)' fill='none' stroke-linecap='round'%3E%3Cpath d='M-450 520 C80 240 470 300 830 620 C1180 930 1490 910 1960 570' stroke='%23ffffff' stroke-width='82' opacity='.55'/%3E%3Cpath d='M-430 1260 C80 1510 450 1490 820 1210 C1180 940 1490 1010 1930 1360' stroke='%23f1e9df' stroke-width='145' opacity='.50'/%3E%3Cpath d='M-420 2120 C80 1840 450 1900 830 2260 C1170 2580 1490 2520 1930 2140' stroke='%23ffffff' stroke-width='72' opacity='.52'/%3E%3Cpath d='M-420 2910 C80 3170 480 3110 850 2800 C1210 2500 1510 2580 1950 3020' stroke='%23e1d4c4' stroke-width='120' opacity='.30'/%3E%3C/g%3E%3C/svg%3E"),

    /* =====================================================
       EBENE 3 – lange feine Architektur-Linien
       ===================================================== */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 4100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='black'/%3E%3Cstop offset='7%25' stop-color='white'/%3E%3Cstop offset='93%25' stop-color='white'/%3E%3Cstop offset='100%25' stop-color='black'/%3E%3C/linearGradient%3E%3Cmask id='m3'%3E%3Crect width='1600' height='4100' fill='url(%23f3)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m3)' fill='none' stroke-linecap='round'%3E%3Cpath d='M-520 350 C0 760 390 860 810 690 C1200 530 1510 240 2030 180' stroke='%23cbbba7' stroke-width='32' opacity='.23'/%3E%3Cpath d='M-520 410 C0 820 390 920 810 750 C1200 590 1510 300 2030 240' stroke='%23ffffff' stroke-width='18' opacity='.48'/%3E%3Cpath d='M-520 1750 C20 1430 450 1510 850 1870 C1230 2210 1560 2130 2040 1690' stroke='%23d8c9b7' stroke-width='42' opacity='.22'/%3E%3Cpath d='M-500 1820 C30 1500 450 1580 850 1940 C1230 2280 1560 2200 2040 1760' stroke='%23ffffff' stroke-width='16' opacity='.40'/%3E%3Cpath d='M-520 3280 C0 3620 410 3680 830 3410 C1200 3170 1530 3190 2040 3570' stroke='%23cfbfac' stroke-width='38' opacity='.20'/%3E%3Cpath d='M-520 3340 C0 3680 410 3740 830 3470 C1200 3230 1530 3250 2040 3630' stroke='%23ffffff' stroke-width='16' opacity='.38'/%3E%3C/g%3E%3C/svg%3E"),

    /* =====================================================
       GRUNDFARBE
       ===================================================== */
    linear-gradient(
        135deg,
        #fffdf9 0%,
        #faf6ef 24%,
        #f3ede4 52%,
        #f8f4ed 76%,
        #fffdf9 100%
    );


    /* Unterschiedliche Höhen = keine erkennbare Wiederholung */
    background-size:
        100% 2600px,
        100% 3300px,
        100% 4100px,
        100% 100%;


    /* Ebenen gegeneinander versetzt */
    background-position:
        center 0,
        center -920px,
        center -1850px,
        center top;


    /* Endlose Wiederholung nach unten */
    background-repeat:
        repeat-y,
        repeat-y,
        repeat-y,
        no-repeat;
}


/* =========================================================
   SEHR BREITE BILDSCHIRME
   ========================================================= */

@media (min-width: 1800px) {

    body[data-page="1"] #content-wrapper {
        background-size:
            1920px 2600px,
            1920px 3300px,
            1920px 4100px,
            100% 100%;
    }

}


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

@media (max-width: 991.98px) {

    body[data-page="1"] #content-wrapper {

        background-size:
            1450px 2600px,
            1650px 3300px,
            1800px 4100px,
            100% 100%;

        background-position:
            40% 0,
            60% -850px,
            45% -1700px,
            center top;
}
}

/* =========================================================
   ARTIKELSEITE – Shoplogo vor fremden Artikel-CSS schützen
   ========================================================= */
header .navbar-brand img,
header .logo-wrapper img,
#header-top-bar + header img {
    width: auto !important;
    max-width: none !important;
    height: 60px !important;
}

/* =========================================================
   ARTIKELSEITE – JTL-Beschreibungscontainer
   ========================================================= */
body[data-page="1"] #result-wrapper > .container:has(> #tabAccordion) {
    width: calc(100% - 40px) !important;
    max-width: 1650px !important;
    margin-top: 25px !important;
}

/* =========================================================
   ARTIKELSEITE – Rahmen um das große Artikelbild + roter Bereich
   ========================================================= */

body[data-page="1"] .js-gallery-images .inner {
    border: 1px solid #19164e !important;
    border-radius: 4px !important;
    overflow: hidden;
}

/* =========================================================
   ARTIKELSEITE – 3 VISUELLE HAUPTBEREICHE
   Keine Änderung der JTL-Innenbreiten / kein zusätzliches Padding
   ========================================================= */
/* Abstand zwischen Artikelbereich und Konfigurator */
body[data-page="1"] #cfg-container {
    margin-top: 18px !important;
}

/* =========================================================
   1. OBERER ARTIKELBEREICH
   Produktbilder + Produktinformationen als gemeinsamer Bereich
   ========================================================= */

body[data-page="1"] #product-offer > .product-gallery,
body[data-page="1"] #product-offer > .product-info {
    background-color: #e3eaf0 !important;
}

/* Linke Hälfte */
body[data-page="1"] #product-offer > .product-gallery {
    border-radius: 4px 0 0 4px !important;
    padding-top: 15px !important;

    box-shadow:
        inset 1px 0 #cbd3da,
        inset 0 1px #cbd3da,
        inset 0 -1px #cbd3da;
}

/* Rechte Hälfte */
body[data-page="1"] #product-offer > .product-info {
    border-radius: 0 4px 4px 0 !important;
    padding-top: 15px !important;

    box-shadow:
        inset -1px 0 #cbd3da,
        inset 0 1px #cbd3da,
        inset 0 -1px #cbd3da;
}


/* =========================================================
   2. KONFIGURATOR LINKS
   Gesamter Bereich der Konfigurationsgruppen
   ========================================================= */

body[data-page="1"] #cfg-container > .col-lg-8 {
    border-radius: 4px !important;

    
}


/* =========================================================
   3. "IHRE KONFIGURATION" RECHTS
   ========================================================= */

body[data-page="1"] #product-configuration-sidebar {
    background-color: #e3eaf0 !important;
    border-radius: 4px !important;

    /* ebenfalls ohne Veränderung der Boxbreite */
    outline: 1px solid #888888;
    outline-offset: -1px;
}

body[data-page="1"] #product-configuration-sidebar .panel,
body[data-page="1"] #product-configuration-sidebar .panel-heading,
body[data-page="1"] #product-configuration-sidebar .config-table,
body[data-page="1"] #product-configuration-sidebar .panel-footer {
    background-color: transparent !important;
}

/* Rechte Konfigurationsbox am Ende bündig mit letzter Gruppe */
@media (min-width: 992px) {
    body[data-page="1"] #cfg-container > .col-lg-4 {
        padding-bottom: 18px !important;
    }
}
/* =========================================
   KONFIGURATIONSGRUPPEN
   ========================================= */

.cfg-group-list-wrapper .cfg-group {
    background-color: #eef2f6 !important;
    border: 1px solid #757575 !important;
    border-radius: 4px;

    /* oben / links / rechts jeweils exakt 16px */
    padding: 16px 16px 18px 16px !important;

    margin-bottom: 18px !important;
}


/* =========================================
   GRUPPENÜBERSCHRIFT – blauer Balken
   ========================================= */

.cfg-group-list-wrapper .cfg-group > .hr-sect.h3 {
    background-color: #19164e !important;
    color: #ffffff !important;

    /* Abstand nach unten zu den Artikeln */
    margin: 0 0 0px 0 !important;

    padding: 12px 16px !important;

    border: none !important;
    border-radius: 4px !important;

    display: block !important;
    width: 100% !important;

    text-align: center !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}


/* Originale Linien links/rechts der Überschrift entfernen */
.cfg-group-list-wrapper .cfg-group > .hr-sect.h3::before,
.cfg-group-list-wrapper .cfg-group > .hr-sect.h3::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   KATEGORIEÜBERSICHT – HERSTELLERLOGOS KOMPAKTER
   Nur Sektionaltore, Rolltore und Schwingtore
   Vertikalen Abstand zwischen den Logo-Reihen verkleinern
   ========================================================= */

body:has(.breadcrumb-item.last.active a[href$="/Sektionaltore"])
    .subcategories-image,
body:has(.breadcrumb-item.last.active a[href$="/Rolltore"])
    .subcategories-image,
body:has(.breadcrumb-item.last.active a[href$="/Schwingtore"])
    .subcategories-image {
    height: 150px !important;
}

/* =========================================================
   KATEGORIESEITEN – WARMER SEITENHINTERGRUND
   Gilt für alle Kategorieseiten
   ========================================================= */

body[data-page="2"] #content-wrapper {
    background-color: #f8f4ed !important;
}

/* =========================================================
   KATEGORIESEITEN – HEADER DEUTLICHER ABGRENZEN
   Weiße Kopfzeile mit feiner Schattenkante
   ========================================================= */

body[data-page="2"] #jtl-nav-wrapper {
    background-color: #ffffff !important;
    border-bottom: 1px solid #d9dce2 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07) !important;
}