/* * SERVBOTICS CUSTOM STYLES
 * Alle Anpassungen für Farben, Navigation, Footer & Module
 */

/* =========================================
   1. GLOBALE FARBEN & ELEMENTE
   ========================================= */
:root {
    --serv-blue: #00b2dc;
    --serv-orange: #eb5f1e;
    --serv-dark: #333333;
    --serv-light-gray: #f9f9f9;
    --serv-white: #ffffff;
}

/* Buttons */
.btn, 
.header-btn-2 .btn {
    background-color: var(--serv-blue) !important;
    border-color: var(--serv-blue) !important;
    color: #ffffff !important;
}

.btn:hover, 
.header-btn-2 .btn:hover {
    background-color: #ffffff !important;
    color: var(--serv-white) !important;
}

/* Überschriften & Icons */
.section-title .sub-title, 
.section-title2 .sub-title {
    color: var(--serv-blue) !important;
}

.features-icon img, 
.features-icon i {
    color: var(--serv-blue) !important;
}

/* "Nach oben" Pfeil */
.progress-wrap {
    box-shadow: inset 0 0 0 2px rgba(0, 178, 220, 0.2) !important;
}
.progress-wrap::after {
    color: var(--serv-blue) !important;
}
.progress-wrap svg.progress-circle path {
    stroke: var(--serv-blue) !important;
}


/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */

/* Hauptmenü Links */
.header-menu .main-menu li.active-menu > a {
    color: var(--serv-dark) !important; 
}

.header-menu .main-menu li:hover > a {
    color: var(--serv-orange) !important;
}

/* Dropdown Menü */
.header-menu .main-menu li .sub-menu {
    border-top: 3px solid var(--serv-orange) !important; 
}

.header-menu .main-menu li .sub-menu li:hover > a {
    color: var(--serv-orange) !important;
}
.header-menu .main-menu li .sub-menu li:hover > a::before {
    background: var(--serv-orange) !important;
}

/* Wenn ein Unterpunkt aktiv ist */
.header-menu .main-menu li .sub-menu li.active > a {
     color: var(--serv-dark) !important;
}


/* =========================================
   3. FOOTER
   ========================================= */

.footer-widget-title {
    color: var(--serv-dark) !important;
}

/* Hover-Effekte im Footer */
.footer-widget-2 .widget-link .link li a:hover,
.widget-info ul li .info-text a:hover {
    color: var(--serv-orange) !important;
    padding-left: 10px; /* Kleiner Rutscher nach rechts */
}


//* =========================================
   BASIS (Gilt für alle)
   ========================================= */
#sticky-contact-bar {
    position: fixed;
    z-index: 99999;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sticky-item {
    margin: 0;
    padding: 0;
}

.sticky-link {
    text-decoration: none;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
}

/* =========================================
   DESKTOP ANSICHT (ab 769px)
   Rechtsbündig, vertikal, klappt einzeln aus
   ========================================= */
@media (min-width: 769px) {
    #sticky-contact-bar {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column; /* Untereinander */
        align-items: flex-end;  /* WICHTIG: Alles rechtsbündig */
        gap: 5px;
    }

    .sticky-item {
        width: auto; /* Breite passt sich Inhalt an */
    }

    .sticky-link {
        width: 50px; /* Startbreite (geschlossen) */
        height: 50px;
        border-radius: 5px 0 0 5px;
        box-shadow: -2px 2px 8px rgba(0,0,0,0.1);
        overflow: hidden; /* Text verstecken */
        white-space: nowrap;
        justify-content: flex-start; /* Inhalt linksbündig im Button */
        transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s;
    }

    .sticky-icon {
        font-size: 20px;
        color: #00b2dc;
        min-width: 50px; /* Feste Breite für Icon */
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sticky-text {
        font-weight: 600;
        font-size: 14px;
        padding-right: 15px;
        opacity: 0;
        transition: opacity 0.2s ease-in;
    }

    /* Hover Desktop */
    .sticky-link:hover {
        width: 260px; /* Ausfahren */
        background: #00b2dc;
    }
    
    .sticky-link:hover .sticky-icon {
        color: #fff;
    }
    
    .sticky-link:hover .sticky-text {
        opacity: 1;
        color: #fff;
    }

    /* Highlight Button Desktop */
    .sticky-link.highlight {
        background: #00b2dc;
    }
    .sticky-link.highlight .sticky-icon {
        color: #fff;
    }
    .sticky-link.highlight:hover {
        background: #009ec4;
    }
}

/* =========================================
   MOBILE ANSICHT (bis 768px)
   Unten fixiert, volle Breite, horizontal
   ========================================= */
@media (max-width: 768px) {
    #sticky-contact-bar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 60px;
        transform: none; /* Kein vertikales Zentrieren */
        
        display: flex;
        flex-direction: row; /* Nebeneinander */
        align-items: stretch; /* Höhe füllen */
        justify-content: space-between; /* Verteilen */
        
        box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
    }

    .sticky-item {
        flex: 1; /* Jeder Button nimmt gleich viel Platz (1/3) */
        border-right: 1px solid #eee;
    }
    
    .sticky-item:last-child {
        border-right: none;
    }

    .sticky-link {
        width: 100%;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        justify-content: center; /* Zentriert Icon */
        flex-direction: column;
    }

    .sticky-icon {
        font-size: 24px;
        color: #00b2dc;
        width: auto;
        height: auto;
        margin: 0;
        display: block;
    }

    .sticky-text {
        display: none !important; /* Text weg */
    }

    /* Highlight Button Mobil */
    .sticky-link.highlight {
        background: #00b2dc;
    }
    .sticky-link.highlight .sticky-icon {
        color: #fff;
    }
}


/* =========================================
   5. PRICING SECTION (Preistabelle)
   ========================================= */

/* =========================================
   "AB"-PREIS DARSTELLUNG (Extra klein)
   ========================================= */

.single-pricing .pricing-price .price small {
    font-size: 40% !important;   /* Deutlich kleiner (ca. 1/3 der Zahl) */
    font-weight: 400 !important; /* Dünnere Schrift für mehr Kontrast */
    margin-right: 4px;
    vertical-align: middle;      /* Mittig zur Zahl */
    /* Alternative: 'top' oder 'baseline', falls es Ihnen mittig nicht gefällt */
    opacity: 0.8;                /* Leicht ausgegraut, wirkt edler */
}

/* Grund-Box */
.pricing-section .single-pricing {
    border-top: 7px solid var(--serv-blue);
    border-radius: 10px;
    background: #fff;
    height: 100%; 
    margin-top: 0 !important;
}

/* Aktive Box (Mitte) */
.pricing-section .single-pricing.active {
    border-top: 0;
    background: linear-gradient(-25deg, #54d6eb 0%, var(--serv-blue) 100%) !important;
    transform: none !important;
    margin-top: 0 !important;
}

/* Preise & Währung */
.pricing-price .price {
    font-size: 38px !important; 
    color: var(--serv-blue) !important;
    font-weight: 700;
}
.pricing-price .currency {
    color: var(--serv-blue) !important;
    font-size: 30px !important;
    vertical-align: top;
    line-height: 1.5;
}

/* Farben umkehren bei aktiver Box */
.single-pricing.active .pricing-price .price, 
.single-pricing.active .pricing-price .currency,
.single-pricing.active .pricing-price p,
.single-pricing.active .pricing-content .pricing-list li,
.single-pricing.active .pricing-content .pricing-list li i {
    color: #ffffff !important;
}

/* Listen-Elemente */
.pricing-list li i {
    color: var(--serv-blue); 
}

/* Button Links */
.pricing-btn .pricing-contact {
    color: var(--serv-blue) !important;
}
.single-pricing.active .pricing-btn .pricing-contact {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Button in aktiver Karte (Orange) */
.single-pricing.active .pricing-btn .btn {
    background-color: var(--serv-orange) !important;
    border-color: var(--serv-orange) !important;
    color: #ffffff !important;
}
.single-pricing.active .pricing-btn .btn:hover {
    background-color: #ffffff !important;
    color: var(--serv-white) !important;
    border-color: #ffffff !important;
}


/* =========================================
   6. IMPRESSUM & DATENSCHUTZ (Kacheln)
   ========================================= */
   
/* Layout Fix für gleiche Höhe */
.features-wrap-3 .col-lg-4 {
    display: flex;
}

.single-item.legal-box { /* Neue Klasse nutzen oder bestehende überschreiben */
    width: 100%;
    height: 100%;
    text-align: left !important;
    align-items: flex-start !important;
    padding: 40px 30px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

/* Icons starr ausrichten */
.single-item .features-icon {
    height: 60px; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.single-item .features-icon i {
    font-size: 45px;
    color: var(--serv-blue);
    line-height: 1;
}

/* Inhalt */
.single-item .features-content {
    width: 100%;
}

.single-item .features-content .title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    margin-top: 0;
    line-height: 1.4;
    min-height: 28px; /* Erzwingt gleiche Höhe für alle Titel */
}

.single-item .features-content p {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* Rechtstexte (Haftung, DSGVO) */
.legal-text-block h3 { margin-top: 40px; margin-bottom: 15px; color: #333; font-size: 22px; }
.legal-text-block h4 { margin-top: 25px; margin-bottom: 10px; font-size: 18px; font-weight: bold; }
.legal-text-block p { margin-bottom: 15px; color: #555; line-height: 1.8; font-size: 16px; }
.legal-text-block ul { list-style: disc; padding-left: 20px; margin-bottom: 20px; }
.legal-text-block ul li { margin-bottom: 10px; color: #555; font-size: 16px; }


            /* 1. Info-Icons (Telefon, Mail, Pin) */
            .contact-info-section .contact-info-wrap .single-contact-info .info-icon {
                background: #00b2dc !important; /* ServBotics Blau */
                color: #ffffff !important;
            }

            /* 2. Text-Links in den Info-Boxen (z.B. die E-Mail Adresse) */
            .contact-info-section .contact-info-wrap .single-contact-info .info-content p,
            .contact-info-section .contact-info-wrap .single-contact-info .info-content p a {
                color: #00b2dc !important;
                text-decoration-color: #00b2dc !important;
            }

            /* 3. Formular Überschriften (Sub-Title) */
            .contact-form-section .contact-wrap .contact-form .contact-form-wrap .heading-wrap .sub-title {
                color: #00b2dc !important;
            }

            /* 4. Formular Fokus-Rahmen (wenn man ins Feld klickt) */
            .contact-form-section .contact-wrap .contact-form-wrap .single-form .form-control:focus {
                border-color: #00b2dc !important;
            }

            /* 5. "Nachricht senden" Button */
            .contact-form-section .contact-wrap .contact-form-wrap .form-btn .btn {
                background-color: #00b2dc !important;
                border-color: #00b2dc !important;
                color: #ffffff !important;
            }

            /* Button Hover Effekt */
            .contact-form-section .contact-wrap .contact-form-wrap .form-btn .btn:hover {
                background-color: #ffffff !important;
                color: #00b2dc !important;
            }

  /* Spezielles Styling für das Select-Feld, damit es wie die Inputs aussieht */
        select.form-control {
            background-color: #f6f7f9;
            border: 1px solid transparent;
            border-radius: 0;
            height: 55px;
            color: #4c4d56; /* Textfarbe wie in anderen Feldern */
            padding-left: 15px;
            font-size: 14px;
            cursor: pointer;
            
                       /* Standard-Pfeil erzwingen oder anpassen */
            appearance: none; 
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c4d56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
        }



/* Produkt Karte Container */
/* =========================================
   7. PRODUKT ÜBERSICHT (Filter & Grid)
   ========================================= */

/* Filter Buttons */
.portfolio-filter {
    margin-bottom: 50px;
}

.portfolio-filter button {
    background: transparent;
    border: 2px solid #e5e5e5;
    border-radius: 30px;
    padding: 8px 25px;
    margin: 0 5px 10px;
    font-weight: 700;
    color: #333;
    font-family: "Manrope", sans-serif;
    transition: all 0.3s ease;
    cursor: pointer;
}

.portfolio-filter button:hover,
.portfolio-filter button.active {
    background-color: var(--serv-blue); /* Nutzt deine Variable */
    border-color: var(--serv-blue);
    color: #fff;
}

/* Produkt Karte Container */
/* =========================================
   7. PRODUKT ÜBERSICHT (Filter & Grid)
   ========================================= */

/* Filter Buttons */
.portfolio-filter {
    margin-bottom: 50px;
}

.portfolio-filter button {
    background: transparent;
    border: 2px solid #e5e5e5;
    border-radius: 30px;
    padding: 8px 25px;
    margin: 0 5px 10px;
    font-weight: 700;
    color: #333;
    font-family: "Manrope", sans-serif;
    transition: all 0.3s ease;
    cursor: pointer;
}

.portfolio-filter button:hover,
.portfolio-filter button.active {
    background-color: var(--serv-blue); /* Nutzt deine Variable */
    border-color: var(--serv-blue);
    color: #fff;
}

/* =========================================
   7. PRODUKT ÜBERSICHT (Filter & Grid)
   ========================================= */

/* Filter Buttons */
.portfolio-filter {
    margin-bottom: 50px;
}

.portfolio-filter button {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: transparent;
    border: none; /* Outline entfernt */
    border-radius: 5px; 
    padding: 10px 30px; /* Etwas mehr Padding für bessere Klickbarkeit */
    margin: 0 5px 10px;
    font-weight: 700;
    font-size: 16px; /* Schriftgröße erhöht */
    color: #333;
    font-family: "Manrope", sans-serif;
    transition: all 0.3s ease;
    cursor: pointer;
    /* box-shadow entfernt */
}

/* Hover & Active State */
.portfolio-filter button:hover,
.portfolio-filter button.active {
    background-color: var(--serv-blue); /* ServBotics Blau */
    color: #ffffff;
    /* box-shadow entfernt */
}

/* WICHTIG: Abstand zwischen den Grid-Spalten */
/* Wir geben dem Container-Element (Spalte) den Abstand, nicht der Karte */
.portfolio-item {
    margin-bottom: 50px;
}

        /* Einheitliche Kartenhöhe */
        .single-product-item {
            height: 100%;
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #ebebeb;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .single-product-item:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transform: translateY(-5px);
            border-color: #00b2dc;
        }

    /* Bild-Bereich */
        .product-img {
            height: 240px;
            background: #f9f9f9;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

.product-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

    /* Badges (Grau Transparent wie gewünscht) */
        .product-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background-color: rgba(50, 50, 50, 0.6);
            color: #fff;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: 600;
            text-transform: uppercase;
        }

/* Wir überschreiben alle spezifischen Farben hart mit Grau */
.product-badge.reinigung,
.product-badge.service,
.product-badge.transport { 
    background-color: rgba(50, 50, 50, 0.6) !important; 
}

/* Produkt Inhalt */
.product-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-content .manufacturer {
    font-size: 13px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.product-content .title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

/* Technische Daten Liste */
.product-content .specs {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    flex-grow: 1; /* Schiebt den Button nach unten */
}

.product-content .specs li {
    font-size: 14px;
    color: #555;
    margin-bottom: 6px;
    display: flex;
    align-items: start;
}

.product-content .specs li i {
    color: var(--serv-blue);
    margin-right: 8px;
    margin-top: 4px;
    font-size: 12px;
}

/* Link Button - Größer */
.product-content .btn-link {
    color: var(--serv-blue);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 18px; /* Vergrößert von 16px auf 18px */
}

.product-content .btn-link i {
    margin-left: 5px;
    transition: transform 0.2s;
}

.product-content .btn-link:hover i {
    transform: translateX(5px);
}
* =========================================
   8. KONTAKTSEITE & FORMULAR
   ========================================= */

/* Info-Icons (Telefon, Mail, Pin) */
.contact-info-section .contact-info-wrap .single-contact-info .info-icon {
    background: #00b2dc !important; 
    color: #ffffff !important;
}

/* Links in Info-Boxen (z.B. E-Mail) */
.contact-info-section .contact-info-wrap .single-contact-info .info-content p,
.contact-info-section .contact-info-wrap .single-contact-info .info-content p a {
    color: #00b2dc !important;
    text-decoration-color: #00b2dc !important;
}

/* Formular Überschriften (Sub-Title) */
.contact-form-section .contact-wrap .contact-form .contact-form-wrap .heading-wrap .sub-title {
    color: #00b2dc !important;
}

/* Formular Fokus-Rahmen (Blauer Rand bei Klick) */
.contact-form-section .contact-wrap .contact-form-wrap .single-form .form-control:focus,
.contact-form-section .contact-wrap .contact-form-wrap .single-form select:focus {
    border-color: #00b2dc !important;
    outline: none;
    box-shadow: none;
}

/* "Nachricht senden" Button */
.contact-form-section .contact-wrap .contact-form-wrap .form-btn .btn {
    background-color: #00b2dc !important;
    border-color: #00b2dc !important;
    color: #ffffff !important;
}

.contact-form-section .contact-wrap .contact-form-wrap .form-btn .btn:hover {
    background-color: #ffffff !important;
    color: #fff !important;
    border-color: #00b2dc !important;
}

/* Dropdown-Menü (Select) Styling */
/* Damit es genauso aussieht wie die Textfelder */
select.form-control {
    background-color: #f6f7f9;
    border: 1px solid transparent;
    border-radius: 0;
    height: 55px;
    color: #4c4d56;
    padding-left: 15px;
    font-size: 14px;
    cursor: pointer;
    /* Standard-Pfeil ausblenden */
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Eigener Pfeil als SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c4d56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
}

/* =========================================
   FORMULAR SELECT STYLING (Vorschlaghammer-Methode)
   ========================================= */

/* 1. Grundstyling: Fetter Text */
.single-form .form-control {
    font-weight: 700 !important;
    color: #00b2dc !important;
}

/* 2. FOCUS STATUS (Wenn man reinklickt) */
/* Wir nutzen '.single-form .form-control:focus', das ist spezifischer als nur '.form-control:focus' */
.single-form .form-control:focus {
    /* Harter blauer Rahmen */
    border-color: #00b2dc !important;
    
    /* Dickerer blauer Leucht-Schatten (3px breit) */
    box-shadow: 0 0 0 3px rgba(0, 178, 220, 0.3) !important;
    
    /* Standard-Browser-Rahmen killen */
    outline: 0 none !important;
}

/* 3. Optgroups (Überschriften) in Blau */
optgroup {
    font-weight: 800;
    color: #00b2dc;
    font-style: normal;
}
/* DSGVO Text Fix: Normale Groß-/Kleinschreibung erzwingen */
.form-check-label {
    text-transform: none !important;
}


/* =========================================
   MOBILE FOOTER ACCORDION
   ========================================= */

/* Nur auf Mobile/Tablet anwenden */
@media (max-width: 991px) {
    
    /* Überschriften klickbar machen */
    .footer-widget-title {
        cursor: pointer;
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(0,0,0,0.05); /* Leichte Trennlinie */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Das Plus-Icon (+) hinzufügen */
    .footer-widget-title::after {
        content: '+'; 
        font-family: "Helvetica Neue", Arial, sans-serif; /* Standard Schriftart für das Symbol */
        font-weight: 300;
        font-size: 24px;
        color: #00b2dc; /* ServBotics Blau */
        transition: transform 0.3s ease;
    }

    /* Wenn das Menü offen ist (Bootstrap setzt aria-expanded="true") */
    .footer-widget-title[aria-expanded="true"]::after {
        content: '-'; /* Oder Rotation: transform: rotate(45deg); */
        transform: rotate(0deg); 
        font-size: 28px; /* Minus etwas größer wirken lassen */
        line-height: 20px;
    }

    /* Abstände der Listen im offenen Zustand */
    .widget-link ul, 
    .widget-info ul {
        margin-bottom: 20px;
        padding-top: 10px;
    }
}

/* Auf Desktop: Klick-Cursor und Icons entfernen */
@media (min-width: 992px) {
    .footer-widget-title {
        pointer-events: none; /* Nicht klickbar */
    }
    .footer-widget-title::after {
        display: none; /* Kein Icon */
    }
}

/* =========================================
   PREIS BADGE (KLEINER)
   ========================================= */

.product-img {
    position: relative; 
}

.product-price {
    position: absolute;
    bottom: 15px;       /* Etwas näher am Rand */
    right: 15px;        /* Etwas näher am Rand */
    
    background-color: #00b2dc; /* ServBotics Blau */
    color: #fff;
    
    /* HIER GEÄNDERT: Kleineres Padding und Schrift */
    padding: 3px 10px;  
    font-size: 12px;    
    
    font-weight: 700;
    border-radius: 3px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
/* =========================================
   HOVER-EFFEKT: PFEIL IN ORANGE
   ========================================= */

/* 1. Wenn man über den Text "Details ansehen" fährt */
.btn-link:hover i {
    color: #ff6600 !important; /* <--- HIER IHREN ORANGE HEX-CODE EINFÜGEN */
    transform: translateX(5px); /* Kleiner Bewegungseffekt nach rechts */
    transition: all 0.3s ease;
}

/* 2. OPTIONAL: Wenn man über die ganze Kachel fährt (da diese verlinkt ist) */
/* Damit leuchtet der Pfeil auch, wenn man nur auf das Bild geht */
.single-product-item:hover .btn-link i {
    color: #ff6600 !important; /* <--- HIER IHREN ORANGE HEX-CODE EINFÜGEN */
    transform: translateX(5px);
    transition: all 0.3s ease;
}


/* =========================================
   SERVICE NETZWERK (FINAL: MITTIG & ZENTRIERT)
   ========================================= */

/* 1. Die H3 Überschrift */
.service-network-header {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 700;
}

/* 2. Container unsichtbar machen & Linie darunter */
#servicePartnerAccordion .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2); 
}

/* 3. Button (Bundesland) - Vertikal mittig & Linksbündig */
#servicePartnerAccordion .accordion-button,
#servicePartnerAccordion .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #ffffff !important; /* Immer Weiß */
    font-weight: 600;
    box-shadow: none;
    
    /* WICHTIG: Symmetrisches Padding für vertikale Mitte */
    padding: 12px 0; 
    
    /* Flexbox erzwingt Zentrierung */
    display: flex;
    align-items: center; 
    text-align: left;
}

/* 4. ICON - ZUSTAND: GESCHLOSSEN (WEISS) */
#servicePartnerAccordion .accordion-button::after {
    filter: brightness(0) invert(1); 
    background-size: 1.25rem;
    margin-left: auto; /* Schiebt Icon nach ganz rechts */
    transition: transform 0.3s ease-in-out, background-image 0.3s ease;
}

/* 5. ICON - ZUSTAND: OFFEN (SCHWARZ) */
#servicePartnerAccordion .accordion-button:not(.collapsed)::after {
    filter: none; 
    /* Schwarz eingefärbtes SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg);
}

/* 6. ABSTANDS-FIX: Inhalt rückt nah an den Titel */
#servicePartnerAccordion .accordion-body {
    padding: 5px 0 20px 0; /* Oben nur 5px Abstand */
    margin-top: 0;
}

/* 7. LISTE: Keine Punkte, weißer Text */
ul.loc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.loc-list li {
    color: #ffffff !important;
    font-size: 15px;
    padding-left: 0;
    margin-bottom: 4px;
    line-height: 1.4;
}

ul.loc-list li::before {
    display: none; 
}

/* Hintergrund bewegt sich gar nicht (weder beim Scrollen noch beim Ausklappen) */
.section, 
.footer-section {
    background-attachment: fixed !important;
    background-position: center center !important;
    background-size: cover !important;
}

/* =========================================
   FIX: PREIS-ABSTAND MOBILE (Auf die Spalten)
   ========================================= */

@media (max-width: 767px) {
    /* Wir zielen hier direkt auf die Spalten (col-...), die die Pricing-Boxen enthalten */
    .pricing-content-wrap .row > div {
        margin-bottom: 40px !important; /* Deutlicher Abstand nach unten */
    }

    /* Damit unter der allerletzten Box (Flotte) kein unnötiger Rand entsteht */
    .pricing-content-wrap .row > div:last-child {
        margin-bottom: 0 !important;
    }
}

/* --- Pricing Liste: Sauberer Umbruch (Icon links fixiert) --- */
.pricing-list li {
    display: flex;          /* Aktiviert Flexbox: Icon und Text nebeneinander */
    align-items: flex-start; /* Ausrichtung oben bündig (wichtig bei Mehrzeilern) */
    line-height: 1.5;       /* Angenehmer Zeilenabstand */
    margin-bottom: 12px;    /* Abstand zwischen den Listenpunkten */
}

.pricing-list li i {
    flex: 0 0 25px;         /* Icon bekommt feste Breite von 25px */
    max-width: 25px;        
    margin-right: 0;        /* Margin wird durch Flex-Gap oder Breite geregelt */
    color: #5149f3;         /* Ihre Icon-Farbe (aus vorherigem Kontext) */
    margin-top: 4px;        /* Schiebt das Icon optisch perfekt zur ersten Textzeile */
}

.pricing-list li span {
    display: block;         /* Text verhält sich wie ein Block */
    flex: 1;                /* Nimmt den restlichen Platz ein */
}