/* 1. DYNAMIC BRAND VARIABLES */
/* Default to Handel Red when no specific class is present */
body { --bs-primary: #ff4100; --bs-primary-dark: #ff4100; }

/* Segment Overrides based on body class */
body.handel { --bs-primary: #ff4100; --bs-primary-dark: #ff4100; } 
body.bft    { --bs-primary: #F96E2D; --bs-primary-dark: #F96E2D; } 
body.wtl    { --bs-primary: #0c3a6d; --bs-primary-dark: #0c3a6d; } 

/* 2. DYNAMIC BRAND BACKGROUNDS (CLEAN BOXED LOOK) */
body {
  background-color: var(--bs-primary) !important;
  margin: 0;
  padding: 0;
}

/* THE FIX FOR THE 1PX LINE: Gradient Overlap */
html {
  background: linear-gradient(
    to bottom, 
    var(--bs-primary) 0, 
    var(--bs-primary) 181px, 
    #f0f0f0 180px, 
    #f0f0f0 236px, 
    var(--bs-primary) 235px,
    var(--bs-primary) 100%
  ) no-repeat fixed !important;
}

/* Main content container - Background set to brand color to hide header side-line */
.t4-wrapper {
  background-color: var(--bs-primary) !important; 
  max-width: 1240px; 
  margin: 0 auto;
  /* Removed borders and box-shadow to prevent the red from looking darker */
  box-shadow: none !important; 
  border: none !important; 
}

/* 3. HEADER & NAVIGATION */
.header-block {
  background-color: var(--bs-primary) !important;
  padding: 1rem 0;
  border: none !important;
}

#t4-mainnav {
  background-color: #f0f0f0 !important;
  border-bottom: 1px solid #cccccc;
}

/* 4. MENU LINK STYLING (TOP MENU) */
#t4-mainnav .nav-link {
  color: #333333 !important;
  font-weight: 600; 
  padding: 12px 20px !important;
}

/* Active Top Menu Tab - White background */
#t4-mainnav .nav-item.active > .nav-link,
#t4-mainnav .nav-item.current > .nav-link {
  color: var(--bs-primary) !important;
  background-color: #ffffff !important;
  border-bottom: none;
}

/* 5. SIDEBAR MENU STYLING (REFINED FONT & SPACING) */
.t4-module .nav-link {
  border-radius: 4px !important;
  margin-bottom: 2px;
  padding: 8px 12px 8px 18px !important; 
  color: var(--bs-primary) !important; 
  font-weight: 400 !important; 
  transition: background-color 0.2s ease;
}

/* Hover effect for sidebar links */
.t4-module .nav-link:hover {
  background-color: #f0f0f0 !important;
  color: var(--bs-primary) !important;
}

/* Sidebar Active highlight */
.t4-module .nav-item.active > .nav-link,
.t4-module .nav-item.current > .nav-link {
  background-color: var(--bs-primary-dark) !important;
  color: #ffffff !important;
  font-weight: 600 !important; 
}

/* 6. CONTENT LINK STYLING */
#t4-main-body a:not(.btn):not(.nav-link) {
    color: var(--bs-primary) !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

#t4-main-body a:not(.btn):not(.nav-link):hover {
    text-decoration: underline;
    filter: brightness(85%);
}

/* 7. BREADCRUMB STYLING (BRANDED WITH BLACK ENDING) */
#t4-breadcrumbs { 
    background-color: #f7f7f7 !important; 
    border-bottom: 1px solid #eee; 
    font-size: 0.85rem;
}

/* Brand color for icon and initial links */
#t4-breadcrumbs .breadcrumb-item a, 
#t4-breadcrumbs .breadcrumb-item .fa-home,
#t4-breadcrumbs .mod-breadcrumbs a {
    color: var(--bs-primary) !important;
}

/* Last item (current page) turns solid black */
#t4-breadcrumbs .breadcrumb-item.active,
#t4-breadcrumbs .breadcrumb-item:last-child,
#t4-breadcrumbs .breadcrumb-item:last-child a,
#t4-breadcrumbs .mod-breadcrumbs li:last-child,
#t4-breadcrumbs .mod-breadcrumbs li:last-child a {
    color: #000000 !important;
    font-weight: 400 !important;
}

/* 8. ARTICLE CLEANUP */
/* Hide article metadata (Author, Hits, Date) */
.article-aside, .article-info {
    display: none !important;
}

/* Remove Prev and Next article navigation buttons */
.pagenavigation {
    display: none !important;
}

/* 9. FOOTER STYLING (MATCHING BREADCRUMB STYLE) */
#t4-footer {
    background-color: #f7f7f7 !important; 
    padding: 10px 0 !important;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    font-size: 0.85rem; 
}

/* Align links to the right */
#t4-footer .t4-section-inner {
    display: flex;
    justify-content: flex-end;
}

/* Style the legal links in the footer */
#t4-footer a {
    color: var(--bs-primary) !important; 
    text-decoration: none;
    font-weight: 400;
}

#t4-footer a:hover {
    text-decoration: underline;
}

/* Hide default Joomla copyright text and back-to-top button */
.mod-footer .footer1, 
.mod-footer .footer2,
#back-to-top {
    display: none !important;
}

/* 10. UTILITY OVERRIDES */
.bg-primary { background-color: var(--bs-primary) !important; }
.text-primary { color: var(--bs-primary) !important; }

/* Keep main content solid white against the brand-colored wrapper */
#t4-main-body { 
    background-color: #ffffff !important; 
}

/* 11. HOMEPAGE-ONLY BREADCRUMB FORCING (REFINED) */
.mod-breadcrumbs.breadcrumb li.active:first-child:only-child::after {
    content: " Mineralölhandel";
    color: #000000 !important;
    font-weight: 400 !important;
    vertical-align: middle;
}

.mod-breadcrumbs.breadcrumb li.active:first-child:only-child .icon.fa-home {
    display: inline-block !important;
    color: #000000 !important;
    margin-right: 5px;
}

/* 12. FULL-WIDTH TOP MENU BREAKOUT */
#t4-mainnav {
    width: 100vw !important; /* Forces bar to 100% of the screen width */
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background-color: #f0f0f0 !important; /* Your light gray menu background */
    border-bottom: 1px solid #cccccc;
}

/* Ensure the menu items stay within the 1240px content container */
#t4-mainnav .container-lg {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* 13. FULL-WIDTH FOOTER BREAKOUT */
#t4-footer {
    width: 100vw !important; /* Forces bar to 100% of the screen width */
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    background-color: #f7f7f7 !important; /* Matches breadcrumb gray */
    border-top: 1px solid #eeeeee;
    padding: 10px 0 !important;
}

/* Ensure footer links stay within the 1240px content box */
#t4-footer .container, 
#t4-footer .container-lg,
#t4-footer .t4-section-inner {
    max-width: 1240px !important;
    margin: 0 auto !important;
    display: flex;
    justify-content: flex-end; /* Keeps AGB/Privacy on the right */
    padding-left: 15px;
    padding-right: 15px;
}

/* 14. FORMULA-ÖLE GRID STYLING (Modern Div Breakout) */
.formula-grid {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 20px;
}

/* Base styling for each row */
.striped-row {
    border-bottom: 1px solid #dee2e6;
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile */
    align-items: stretch;
}

.striped-row:last-child {
    border-bottom: none;
}

/* Force Zebra Stripes: Odd rows white, Even rows light gray */
.striped-row:nth-of-type(odd) {
    background-color: #ffffff !important;
}

.striped-row:nth-of-type(even) {
    background-color: #f8f9fa !important;
}

/* Column Vertical Line (Desktop only) */
@media (min-width: 768px) {
    .formula-grid .border-end-md {
        border-right: 1px solid #dee2e6;
    }
}

/* Links and Typography inside grid */
.formula-grid a {
    color: var(--bs-primary) !important;
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.formula-grid a strong {
    font-size: 1.05rem;
    display: block;
    margin-bottom: 5px;
}

/* Description Text Color */
.formula-grid .col-md-8 {
    color: #4a4a4a;
    font-size: 0.95rem;
}

/* 15. PHOCA GALERIE BRANDING & CLEANUP */
/* Verhindert das Ausblenden von Menüpunkten in der Sidebar */
.com_phocagallery #phocagallery .phocagallery-box-file:hover {
    border-color: var(--bs-primary) !important;
}

.com_phocagallery #phocagallery a {
    color: var(--bs-primary) !important;
}

/* Versteckt leere Navigations-Kacheln NUR innerhalb der Galerie-Ansicht */
.com_phocagallery .pg-category-viewbft .pg-item-box:first-child:not(:has(img)),
.com_phocagallery .pg-category-viewhandel .pg-item-box:first-child:not(:has(img)) {
    display: none !important;
}

/* Versteckt technische Dateinamen unter den Bildern */
.com_phocagallery .pg-item-box-title.image {
    display: none !important;
}

/* 16. HIDE PHOCA GALLERY BACK BUTTON TILE */
/* Specifically targets the 'up' or 'back' arrow container */
.phocagallery-box-file-first, 
.pg-cv-backbutton {
    display: none !important;
}

/* Optional: Clean up filenames and metadata under images for a professional look */
.pg-cv-name {
    display: none !important; /* Hides long technical filenames like Fuhrpark_1_... */
}

/* 17. HIDE PHOCA GALLERY FOOTER LINKS */
#phocagallery div[style*="text-align:right"] {
    display: none !important;
}

/* 18. PHOCA GALERIE PAGINATION BRANDING */
/* Set the color of the numbers and arrows */
.pg-cv-pagination .page-link {
    color: var(--bs-primary) !important;
    border-color: #dee2e6;
}

/* Set the background of the active page (the one the user is on) */
.pg-cv-pagination .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

/* Hover effect on page numbers */
.pg-cv-pagination .page-link:hover {
    background-color: #f8f9fa;
    color: var(--bs-primary) !important;
}

/* 19. REMOVE REDUNDANT GALLERY TILES */
/* Hides the 'Up' arrow tile in sub-categories to prevent landing on empty parents */
.pg-cv-backbutton, 
.phocagallery-box-file-first {
    display: none !important;
}

/* 20. PAGINATION BRANDING */
#phocagallery .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

#phocagallery .page-link {
    color: var(--bs-primary) !important;
}

/* 21. REMOVE SVG FOLDER ICONS FROM BFT OVERVIEW */
/* Target the specific class shown in your F12 inspector */
svg.ph-si.ph-si-category {
    display: none !important;
}

/* Ensure the text is centered and aligned correctly after the icon is gone */
.pg-category-box-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Brand the sub-category text for BFT */
.pg-category-box-title a {
    color: var(--bs-primary) !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* 24. CONTEXT-SPECIFIC BREADCRUMB CLEANUP */

/* Hide the 3rd breadcrumb ONLY on gallery pages (Galerie BFT intermediate step) */
.com_phocagallery .mod-breadcrumbs li.mod-breadcrumbs__item:nth-child(3) {
    display: none !important;
}

/* Ensure breadcrumbs behave normally on all other pages (like Products) */
body:not(.com_phocagallery) .mod-breadcrumbs li.mod-breadcrumbs__item {
    display: inline-block !important;
}

/* Optional: If you want to hide it completely from the path for a cleaner look */
.mod-breadcrumbs li.mod-breadcrumbs__item:nth-child(3) { display: none !important; }

/* 25. FIX GALLERY WRAPPING BELOW MENU */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Ensure the main container doesn't force a wrap */
    .t4-row.row {
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    /* Force the gallery area to take up the remaining space */
    .t4-col.col-md {
        flex: 1 !important;
        min-width: 0; /* Prevents overflow */
    }

    /* Slightly shrink the gallery boxes to fit the tighter space */
    #phocagallery .pg-item-box, 
    #phocagallery .pg-category-box {
        max-width: 100% !important;
    }
}

/* 26. DEZENTES TOP-MENÜ HIGHLIGHTING FÜR MARKEN */

/* Highlight für "BFT Tankstelle" (ID 217), wenn man sich im BFT-Bereich befindet */
body.bft #t4-megamenu-menu-oben .nav-item[data-id="217"] > a {
    background-color: #f8f9fa !important; /* Helles Grau wie im Standard-Aktivzustand */
    color: var(--bs-primary) !important;  /* Marken-Orange für den Text */
    font-weight: 600;
}

/* Highlight für "Mineralölhandel" (ID 216), wenn man sich im Handel-Bereich befindet */
body.handel #t4-megamenu-menu-oben .nav-item[data-id="216"] > a {
    background-color: #f8f9fa !important;
    color: var(--bs-primary) !important;  /* Marken-Rot für den Text */
    font-weight: 600;
}

/* 28. FINAL MINIMALIST PAGINATION CLEANUP */

/* Hides the "Page X of Y" text found in your F12 inspection */
.pagination-centered .counter.pull-right {
    display: none !important;
}

/* Ensures the remaining buttons are perfectly centered */
.pagination-centered {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    float: none !important;
}

/* Optional: Add some space above the buttons for better balance */
.pagination-centered .pagination {
    margin-top: 20px !important;
}

/* 30. WTL-STYLE CONTACT (ALIGNED WITH ICONS) */

/* Grundausrichtung des Containers */
.com_contact .t4-col.col-md {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Einspaltiges Layout & Reihenfolge */
.plain-style .row {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
}

/* Adresse (Contact) oben positionieren */
.plain-style .col-md-5 {
    order: 1 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    margin-bottom: 40px !important;
}

/* Formular bündig darunter */
.plain-style .col-md-7 {
    order: 2 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
}

/* --- ICON STYLING (WTL-STIL) --- */

/* --- KORRIGIERTES ICON STYLING (WTL-STIL) --- */

/* Gemeinsames Styling für alle Kontakt-Icons */
.contact-address span[itemprop]::before {
    /* WICHTIG: Exakte Bezeichnung für Font Awesome 6 */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-right: 15px;
    color: var(--bs-primary);
    display: inline-block;
    width: 20px;
    text-align: center;
    font-style: normal; /* Verhindert Kursivsetzung */
}

/* Spezifische Codes (Unicode) für die Icons */
.contact-street::before { content: "\f3c5" !important; }    /* Map Marker */
.contact-suburb::before { content: "\f015" !important; }    /* Haus */
.contact-telephone::before { content: "\f095" !important; } /* Telefon */
.contact-fax::before { content: "\f1ac" !important; }       /* Fax */

/* ========================================================================
   31. BFT FORM STYLING (SIDE-BY-SIDE BREEZING LOOK)
   ======================================================================== */

/* 1. Container Ausrichtung: Label links, Feld rechts */
#visform1 .form-group.row {
    display: flex !important;
    flex-direction: row !important; /* Zwingt Elemente nebeneinander */
    flex-wrap: wrap !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

/* 2. Label-Spalte (links) */
#visform1 label.asterix-ancor,
#visform1 label {
    flex: 0 0 30% !important; /* Label nimmt 30% Breite ein */
    max-width: 30% !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    padding-right: 20px !important;
    text-align: left !important;
    color: #333 !important;
}

/* 3. Eingabefeld-Spalte (rechts) */
#visform1 .col-9, 
#visform1 .col-sm-9,
#visform1 .form-control {
    flex: 0 0 70% !important; /* Feld nimmt die restlichen 70% ein */
    max-width: 70% !important;
    width: 70% !important;
    margin-left: 0 !important; /* Entfernt den fehlerhaften Einzug */
}

/* Spezial-Fix für Kalender-Input-Gruppen */
#visform1 .input-group {
    flex: 0 0 70% !important;
    max-width: 70% !important;
}

/* 4. Markenfarbe: BFT Orange (#ff6600) */
#visform1 .form-control:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25) !important;
}

/* 5. Button & Pflichtfelder */
#visform1 .vis_mandatory,
#visform1 div.required .asterix-ancor:after {
    color: #ff6600 !important;
}

.visforms-btn-submit {
    background-color: #ff6600 !important;
    color: white !important;
    padding: 12px 40px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border: none !important;
    border-radius: 4px !important;
    margin-left: 30% !important; /* Richtet den Button am Anfang der Felder aus */
}

/* 6. Mobil-Optimierung: Untereinander stapeln auf kleinen Bildschirmen */
@media (max-width: 768px) {
    #visform1 .form-group.row { flex-direction: column !important; align-items: flex-start !important; }
    #visform1 label, #visform1 .form-control, #visform1 .col-9, #visform1 .input-group {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .visforms-btn-submit { margin-left: 0 !important; width: 100% !important; }
}

/* Final Polish for the BFT Submit Button */
#visform1 .btn-bft-orange {
    background-color: #ff6600 !important;
    border: none !important;
    color: white !important;
    padding: 12px 40px !important;
    
    /* 1. Reset Text Style: Removes all caps */
    text-transform: none !important; 
    font-weight: 400 !important; 
    border-radius: 4px !important;
    
    /* 2. Position: Forces the button to sit on the right */
    display: inline-block !important;
    cursor: pointer;
}

/* 3. Container Alignment: Pushes the button field to the right */
#visform1 .col-sm-9.field12, 
#visform1 .col-9.field12 {
    text-align: right !important; /* Moves button under the end of input fields */
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ========================================================================
   34. BFT SUCCESS MESSAGE - FULL WIDTH ALIGNMENT
   ======================================================================== */

/* 1. Reset the container to allow full width */
#visformscontainer.visforms-form-message {
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important; /* Removes the 30% gap to allow full width */
    margin-left: 0 !important;
}

/* 2. Styling the box to span 100% */
.bft-success-box {
    background-color: #fff5ee !important; 
    border: 1px solid #ff6600 !important;
    border-left: 8px solid #ff6600 !important;
    padding: 40px !important; /* Increased padding for a spacious full-width look */
    border-radius: 4px !important;
    margin-top: 20px;
    width: 100% !important; /* Forces the box to match the form width */
    box-sizing: border-box !important;
    text-align: left !important;
}

/* 3. Ensure the text inside remains clean */
.bft-success-box h3 {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    color: #ff6600 !important;
    font-weight: 700 !important;
    font-size: 1.6rem !important;
}

.bft-success-box p {
    margin-bottom: 0 !important;
    font-size: 1.15rem !important;
}

/* ========================================================================
   49. BRANDED BOX TOGGLES - RESTORED DESIGN
   Restores the solid background boxes for header navigation
   ======================================================================== */

@media (max-width: 991px) {
    /* 1. Mainnav Toggler - Dynamic Brand Colors */
    .header-block .navbar-toggler {
        border: none !important;
        padding: 10px 15px !important;
        border-radius: 4px !important;
        margin-right: 10px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* WTL Blue */
    body.wtl .header-block .navbar-toggler { background-color: #002d5a !important; color: #fff !important; }
    
    /* Handel Red */
    body.handel .header-block .navbar-toggler { background-color: #d7191c !important; color: #fff !important; }
    
    /* BFT Orange */
    body.bft .header-block .navbar-toggler { background-color: #ff6600 !important; color: #fff !important; }

    /* 2. Off-canvas Toggler - Secondary Branding */
    #triggerButton.t4-offcanvas-toggle {
        background-color: #333333 !important; /* Dark neutral box */
        color: #ffffff !important;
        border: none !important;
        padding: 10px 15px !important;
        border-radius: 4px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 3. Ensure Icons are white and bold inside the boxes */
    .header-block .fa-bars {
        color: #ffffff !important;
        font-size: 1.3rem !important;
    }
}

body.item-292 .moduletable {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}