/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Technical Authority Edition (Fixed AAWP Layouts, Big Icons & Centered Menu)
Author: Tom Usborne & AI Partner
Template: generatepress
Version: 13.0.0 (Layout & Icon Restoration)
*/

/* ============================================================
   1. VARIABLEN
   ============================================================ */
:root {
  --base: #f5f5f5;
  --bg-body: #eaeff5;
  --text-main: #334155;
  --primary: #0056b3;            
  --primary-hover: #003d80;
  --accent: #0aa19a;              
  --anthracite: #2D3A3A;        
  --border-color: #d1d5db;
  
  /* AAWP & Features */
  --ribbon-bestseller-bg: #fbbf24;
  --ribbon-bestseller-text: #000000;
  --ribbon-sale-bg: #dc2626;
  --ribbon-sale-text: #ffffff;
  --ribbon-tip-bg: #e67e22;
  --highlight-purple: #0aa19a;
  --highlight-purple-dark: #087f7a;
  --highlight-purple-bg: #f0fdfd;
  --highlight-purple-border: #bfeceb;
  --warning-bg: #fff8f0;
  --warning-border: #e67e22;
  --warning-text-strong: #d35400;
  --contrast: var(--anthracite);
  --contrast-2: var(--text-main);
  --contrast-3: var(--border-color);
  --signal: var(--primary); 
}

/* ============================================================
   2. TYPOGRAFIE
   ============================================================ */

/* Allgemeine Überschriften */
h1, h2, h3, h4, h5, h6,
h1.entry-title, h2.entry-title,
.tool-card h3 { 
    color: var(--anthracite) !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.5px;
}

/* FIX: Webseitentitel WEISS & GROSS */
.site-header .main-title a, 
h1.main-title a,
.navigation-branding .main-title a {
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    font-size: 28px !important;
    text-decoration: none !important;
    letter-spacing: 1px;
    opacity: 1 !important;
}
.site-description {
    color: #cccccc !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
}

/* Fließtext NORMAL */
p, 
p.gb-headline-text, 
.entry-content p,
.tool-card p {
    text-transform: none !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

/* Größen */
h1, h1.entry-title { font-size: clamp(1.5rem, 4vw, 2.2rem) !important; margin-bottom: 20px; }
h2, .entry-content h2 { font-size: clamp(1.25rem, 3.5vw, 1.7rem) !important; margin-top: 40px !important; margin-bottom: 15px !important; border-left: 5px solid var(--primary); padding-left: 15px; }
h3, .entry-content h3 { font-size: clamp(1.1rem, 3vw, 1.4rem) !important; margin-top: 30px !important; margin-bottom: 10px !important; }
h4, .entry-content h4 { font-size: clamp(1.0rem, 2.5vw, 1.2rem) !important; margin-top: 20px !important; color: var(--text-main) !important; }
h2.entry-title a, h3.entry-title a { text-decoration: none; color: var(--anthracite) !important; transition: color 0.2s ease; }
h2.entry-title a:hover, h3.entry-title a:hover { color: var(--primary) !important; }

/* ============================================================
   3. HEADER & MENU (GLOBAL)
   ============================================================ */
.top-bar { background: var(--anthracite); color: #fff; font-size: 13px; text-align: center; padding: 6px 12px; font-weight: 600; letter-spacing: 0.5px; }
.top-bar a { color: #fff; text-decoration: underline; }

.site-header, .header-main, .gb-container.header-wrap { background-color: var(--anthracite) !important; border-bottom: none; width: 100% !important; }

/* FIX: Header Logo Container zentriert */
.site-header .inside-header {
    width: 100% !important;
    max-width: 1200px !important; 
    margin-left: auto !important;    
    margin-right: auto !important;    
    padding: 20px 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.site-header .header-image, .site-logo img, .header-image.is-logo-image, .brand img { max-height: 70px !important; width: auto !important; height: auto !important; margin: 0; display: block; filter: brightness(1.05) contrast(1.02) drop-shadow(0 2px 4px rgba(0,0,0,0.05)); mix-blend-mode: normal; }

.navigation-search, .navigation-search input { background-color: #2D3A3A !important; color: #ffffff !important; border: none !important; }

.main-navigation { background-color: var(--anthracite, #263238) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: relative; z-index: 1000; }
.main-navigation .menu-toggle { color: #ffffff !important; }

/* ============================================================
   4. DESKTOP & TABLET MENÜ (Fixes)
   ============================================================ */
@media (min-width: 769px) {
    
    /* 1. CONTAINER FIX: ZENTRIERUNG */
    .main-navigation .inside-navigation {
        display: flex !important;
        justify-content: center !important; /* ZENTRIERT DAS MENÜ */
        align-items: center !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 40px !important;
        position: relative !important;
        box-sizing: border-box !important;
        float: none !important;
    }
    
    /* Liste Reset */
    .main-navigation .main-nav > ul {
        padding-left: 0 !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Links Style */
    .main-navigation .main-nav > ul > li > a { 
        color: #ffffff !important; 
        font-weight: 700; 
        text-transform: uppercase; 
        font-size: 14px; 
        letter-spacing: 0.5px;
        padding: 0 25px 0 0; 
        margin-right: 5px; 
        line-height: 70px; 
        transition: all 0.2s ease-in-out; 
        position: relative; 
    }

    /* Hover & Active State */
    .main-navigation .main-nav > ul > li:hover > a, 
    .main-navigation .main-nav > ul > li.sfHover > a, 
    .main-navigation .main-nav > ul > li[class*="current-menu-"] > a { 
        color: #ffffff !important; 
        background-color: transparent !important; 
        box-shadow: inset 0 -4px 0 var(--accent, #5da696) !important; 
    }
    
    /* --- MEGA MENÜ --- */
    
    .main-navigation .main-nav > ul > li.mega-menu-auto { position: static !important; }

    /* Dropdown Kasten */
    .main-navigation .main-nav > ul > li.mega-menu-auto > ul {
        position: absolute !important;
        left: 0 !important; 
        right: 0 !important;
        top: 100% !important;
        width: 100% !important; 
        max-width: 100% !important;
        background-color: #ffffff !important;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2) !important;
        padding: 30px 20px !important;
        border-top: 3px solid var(--accent);
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important; 
        opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s; pointer-events: none;
    }
    
    .main-navigation .main-nav li:hover > ul, .main-navigation .main-nav li.sfHover > ul { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; cursor: default !important; }

    /* Spalten */
    .main-navigation .main-nav > ul > li.mega-menu-auto > ul > li {
        width: 25% !important; 
        min-width: 200px !important; 
        display: block !important;
        padding: 0 20px !important;
        border-right: 1px solid #e2e8f0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
        position: relative !important;
        background: transparent !important;
        height: auto !important; 
    }
    .main-navigation .main-nav > ul > li.mega-menu-auto > ul > li:last-child { border-right: none !important; }
    
    /* Überschriften */
    .main-navigation .main-nav > ul > li > ul > li > a { 
        color: var(--anthracite, #333) !important; 
        font-weight: 800 !important; 
        border-bottom: 2px solid var(--accent, #5da696) !important; 
        padding-bottom: 10px !important; 
        margin-bottom: 15px !important; 
        display: block !important; 
        pointer-events: none; 
        white-space: nowrap !important; 
    }
    .main-navigation .main-nav > ul > li > ul > li > a:after, 
    .main-navigation .main-nav > ul > li > ul > li > a .dropdown-menu-toggle { display: none !important; }
    
    /* --- EBENE 3 (Sichtbarkeit Fix) --- */
    .main-navigation .main-nav > ul > li.mega-menu-auto > ul > li > ul { 
        position: static !important; 
        display: block !important; 
        visibility: visible !important; 
        opacity: 1 !important; 
        left: auto !important; 
        top: auto !important;
        height: auto !important;
        width: 100% !important;
        background: transparent !important; 
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }
    
    .main-navigation .main-nav > ul > li > ul > li > ul > li { 
        display: block !important; 
        width: 100% !important; 
        margin: 0 !important; 
        border: none !important; 
        position: static !important;
    }
    
    .main-navigation .main-nav > ul > li > ul > li > ul > li > a { 
        color: #555555 !important; 
        font-size: 15px !important; 
        font-weight: 500 !important; 
        padding: 6px 0 !important; 
        display: block !important; 
        width: 100%; 
        line-height: 1.5 !important; 
        border: none !important; 
        background: transparent !important;
        text-transform: none !important;
    }
    
    .main-navigation .main-nav > ul > li > ul > li > ul > li > a:hover { 
        color: var(--accent, #5da696) !important; 
        transform: translateX(5px); 
        background: transparent !important; 
    }
}

/* ============================================================
   5. MOBILE MENU (iPhone Fix - Keine Auswirkung auf Desktop)
   ============================================================ */
@media (max-width: 768px) {
    /* 1. Hintergrund & Farben für Mobile erzwingen */
    .main-navigation, 
    .main-navigation ul, 
    .main-navigation .main-nav > ul > li, 
    .main-navigation .main-nav > ul > li > a { 
        background-color: #2D3A3A !important; 
        color: #ffffff !important; 
    }

    /* 2. DER IPHONE FIX: Links klickbar machen */
    /* Wir stellen sicher, dass der Link die volle Fläche einnimmt und obenauf liegt */
    .main-navigation .main-nav ul li a {
        pointer-events: auto !important;
        visibility: visible !important;
        display: block !important;
        position: relative !important;
        z-index: 999 !important; /* Liegt über allen anderen Elementen */
    }

    /* Verhindert, dass Icons den Klick abfangen */
    .main-navigation .main-nav ul li a * {
        pointer-events: none !important;
    }

    /* 3. Menü-Toggle (Hamburger) klickbar halten */
    .menu-toggle {
        display: flex !important;
        cursor: pointer !important;
        z-index: 1000 !important;
    }

    /* 4. Dropdown-Logik für Mobile (Sichtbarkeit bei Klick) */
    .main-navigation.toggled .main-nav ul,
    .main-navigation.toggled .main-nav > ul > li > ul,
    .main-navigation.toggled .main-nav > ul > li > ul > li > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        height: auto !important;
        pointer-events: auto !important;
    }

    /* 5. Styling der mobilen Menüpunkte (Optik wie gewünscht) */
    .main-navigation .main-nav > ul > li > a {
        font-size: 16px !important;
        font-weight: 800 !important;
        padding: 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        background-color: rgba(0,0,0,0.2) !important;
    }

    .main-navigation .main-nav > ul > li > ul > li > a {
        font-size: 15px !important;
        font-weight: 700 !important;
        padding: 15px 20px 5px 40px !important; 
        color: var(--accent) !important; 
        text-transform: uppercase;
    }

    .main-navigation .main-nav > ul > li > ul > li > ul li a {
        padding: 8px 20px 8px 40px !important;
        font-size: 14px !important;
        color: #ddd !important;
        text-transform: none !important;
    }

    /* Deaktiviert die Pfeile auf Mobile, da wir das Menü direkt ausklappen */
    .dropdown-menu-toggle { display: none !important; }
}
/* ============================================================
   6. NAVIGATION UNTEN (RESTORED)
   ============================================================ */
#nav-below { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 30px !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; margin-top: 40px; margin-bottom: 20px; }
.nav-previous, .nav-next { width: 48% !important; min-width: 280px; flex-grow: 1; float: none !important; margin: 0 !important; display: flex !important; }
#nav-below .gp-icon { display: none !important; }
.nav-previous span, .nav-next span { width: 100% !important; }
.nav-previous a, .nav-next a { display: flex !important; flex-direction: column; justify-content: center; width: 100% !important; height: 100% !important; box-sizing: border-box !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 25px !important; text-decoration: none !important; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.02); color: #334155 !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.5 !important; }
.nav-previous a { border-left: 5px solid #cbd5e1 !important; text-align: left; align-items: flex-start; }
.nav-next a { border-right: 5px solid #cbd5e1 !important; text-align: right; align-items: flex-end; }
.nav-previous a:hover { border-left-color: var(--primary) !important; transform: translateY(-3px); box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1); }
.nav-next a:hover { border-right-color: var(--primary) !important; transform: translateY(-3px); box-shadow: 0 10px 20px -5px rgba(0,0,0,0.1); }
.nav-previous a::before { content: "« Vorheriger Artikel"; display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #94a3b8; margin-bottom: 8px; letter-spacing: 0.5px; }
.nav-next a::before { content: "Nächster Artikel »"; display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; letter-spacing: 0.5px; }
@media (max-width: 768px) {
    .nav-previous, .nav-next { width: 100% !important; margin-bottom: 15px !important; }
    .nav-next a { text-align: left !important; align-items: flex-start !important; border-right: 1px solid #e2e8f0 !important; border-left: 5px solid #cbd5e1 !important; }
    .nav-next a:hover { border-left-color: var(--primary) !important; }
}

/* ============================================================
   7. FEATURE CARDS & INFO BOXES (ICONS FIXED)
   ============================================================ */
/* Box Design (Ränder, Schatten) */
.tech-highlight-box { background-color: var(--highlight-purple-bg); border: 1px solid var(--highlight-purple-border); border-left: 6px solid var(--highlight-purple); border-radius: 8px; padding: 25px 30px; margin: 40px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex !important; align-items: flex-start !important; gap: 30px !important; width: 100%; box-sizing: border-box; }
.tech-warning-box { background-color: var(--warning-bg); border-left: 6px solid var(--warning-border); border-radius: 6px; padding: 20px; margin: 30px 0; box-shadow: 0 2px 8px rgba(230, 126, 34, 0.15); display: flex !important; align-items: flex-start !important; gap: 15px !important; width: 100%; box-sizing: border-box; }
.feature-card { flex: 1; min-width: 280px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 25px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border-top: 4px solid #ccc; display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.2s; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.1); }

/* --- ICON REPARATUR (Alles schön groß) --- */

/* 1. Feature Cards (Die 4 Boxen auf der Startseite) */
.feature-card .gb-icon, .feature-card .gb-icon svg, .feature-card-icon svg {
    width: 48px !important; 
    height: 48px !important; 
    font-size: 48px !important; /* Sicherheit für FontAwesome */
    display: block !important;
    margin-bottom: 15px !important;
    color: inherit !important;
}

/* 2. Info & Warning Boxen (In Artikeln) */
.tech-icon-circle {
    flex-shrink: 0; 
    width: 60px !important; 
    height: 60px !important; 
    border-radius: 50% !important; 
    background-color: #ffffff !important; 
    color: var(--highlight-purple) !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
}
.tech-icon-circle .gb-icon, .tech-icon-circle .gb-icon svg {
    width: 32px !important; 
    height: 32px !important; 
    font-size: 32px !important;
}

.tech-warning-box > .gb-icon, .tech-warning-box > .gb-icon svg {
    width: 40px !important; 
    height: 40px !important; 
    font-size: 40px !important;
    color: var(--warning-border);
}

/* Greift auf das SVG direkt innerhalb der Kreise zu */
.tech-icon-circle svg {
    width: 32px !important; 
    height: 32px !important; 
}

/* Greift auf das SVG direkt innerhalb der Warnbox zu */
.tech-warning-box svg {
    width: 40px !important; 
    height: 40px !important; 
    fill: var(--warning-border) !important; /* Nutzt fill statt color für SVGs */
}

/* Texte in den Boxen */
.tech-text-wrapper, .tech-warning-wrapper { flex-grow: 1; }
.tech-text-wrapper strong, .tech-warning-wrapper strong { display: block; margin-bottom: 5px; font-size: 1.1em; }
.feature-card .gb-headline-text { font-size: 1.1em !important; font-weight: 800 !important; margin-bottom: 10px; margin-top: 5px; }

/* Feature Card Farben */
.feature-card.makita { border-top-color: #008d9e; color: #008d9e; }
.feature-card.bosch { border-top-color: var(--primary); color: var(--primary); }
.feature-card.einhell { border-top-color: #d00000; color: #d00000; }
.feature-card.gardena { border-top-color: #F4811F; color: #F4811F; }

/* ============================================================
   8. AAWP STYLE REPAIR (FORCE MODE)
   ============================================================ */

/* 1. BUTTONS: ZWINGEND WEISS */
body .aawp .aawp-button, body .aawp-button, a.aawp-button {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    display: inline-block !important; 
}
body .aawp .aawp-button:visited, body .aawp .aawp-button span, body .aawp .aawp-button a { color: #ffffff !important; }
body .aawp .aawp-button:hover { background-color: var(--primary-hover) !important; color: #ffffff !important; transform: translateY(-2px); }

/* 2. GRID REPARATUR (3 SPALTEN) */
.my-aawp-grid .aawp { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 30px !important; 
    width: 100% !important; 
}
.my-aawp-grid .aawp-product { 
    width: 100% !important; 
    max-width: 100% !important; 
    margin: 0 !important; 
    float: none !important; 
    clear: none !important;
    background: #fff !important; 
    border: 1px solid #e2e8f0 !important; 
    border-bottom: 4px solid #e2e8f0 !important; 
    border-radius: 8px !important; 
    padding: 20px !important; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    text-align: center !important; 
    justify-content: space-between !important; 
    height: 100% !important; 
    box-sizing: border-box !important;
}
.my-aawp-grid .aawp-product__thumb { width: 100%; margin-bottom: 15px; height: 160px; display: flex; align-items: center; justify-content: center; }
.my-aawp-grid .aawp-product__thumb img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.my-aawp-grid .aawp-product__title { font-size: 15px !important; font-weight: 700; line-height: 1.4; margin-bottom: 10px; min-height: 45px; }
.my-aawp-grid .aawp-product__price { font-size: 22px !important; color: var(--primary); font-weight: 800; margin-bottom: 15px; }
.my-aawp-grid .aawp-button { width: 100% !important; box-sizing: border-box !important; }
.my-aawp-grid .aawp-product__description, .my-aawp-grid .aawp-product__meta { display: none !important; }
@media (max-width: 768px) { .my-aawp-grid .aawp { grid-template-columns: 1fr !important; gap: 20px !important; } }

/* 3. HORIZONTALE BOXEN (LAYOUT FIX) */
.aawp-product--horizontal {
    display: grid !important;
    grid-template-columns: 180px 1fr 220px !important; /* Bild | Text | Preis+Button */
    align-items: center !important;
    gap: 30px !important;
    background-color: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-left: 6px solid var(--highlight-purple) !important;
    border-radius: 8px !important;
    padding: 25px !important;
    margin: 30px 0 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
    position: relative;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.aawp-product--horizontal:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; }

/* Elemente in der Horizontalen Box */
.aawp-product--horizontal .aawp-product__thumb { width: 100% !important; float: none !important; margin: 0 !important; text-align: center; }
.aawp-product--horizontal .aawp-product__thumb img { max-width: 100% !important; height: auto; mix-blend-mode: multiply; }
.aawp-product--horizontal .aawp-product__content { width: 100% !important; float: none !important; margin: 0 !important; }
.aawp-product--horizontal .aawp-product__title { font-size: 1.25em !important; font-weight: 700; color: #333; margin-bottom: 10px; text-decoration: none; line-height: 1.4; display: block; }
.aawp-product--horizontal .aawp-product__description ul { list-style: none !important; padding: 0 !important; margin: 10px 0 !important; }
.aawp-product--horizontal .aawp-product__description li { margin-bottom: 5px; font-size: 0.95em; color: #555; }
.aawp-product--horizontal .aawp-product__footer { width: 100% !important; float: none !important; margin: 0 !important; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aawp-product--horizontal .aawp-product__pricing { margin-bottom: 15px; font-size: 1.4em; font-weight: 800; color: var(--primary); }
.aawp-product--horizontal .aawp-button { width: 100% !important; }

/* Mobile für Horizontal Box */
@media (max-width: 768px) {
    .aawp-product--horizontal { grid-template-columns: 1fr !important; text-align: center; gap: 20px !important; }
    .aawp-product--horizontal .aawp-product__description ul { text-align: left; display: inline-block; }
}

/* ============================================================
   9. STARTSEITE & HERO
   ============================================================ */
body.home .grid-container, body.home .site-content, body.home #page { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
body.home .site-content { margin-top: 0 !important; }

/* ============================================================
   HERO BUTTONS - MARKEN STYLES
   ============================================================ */

/* ============================================================
   HERO BUTTONS - MARKEN STYLES (Kombiniert mit bosch-style)
   ============================================================ */

/* ============================================================
   MARKEN-DESIGNS (HERO & BUTTONS) - FINALER FIX
   ============================================================ */

/* 1. ÜBERSCHRIFTEN & TEXTE (Immer Weiß auf Dunkel) */
.hero-section h1, 
.hero-section p:not(.hero-tagline), 
.hero-section .gb-headline-text:not(.hero-tagline) { 
    color: #ffffff !important; 
    text-shadow: 0 2px 20px rgba(0,0,0,0.8) !important; 
}

/* 2. DER STANDARD-STIL (Deine Hauptfarben) */
.hero-section .gb-button { 
    background-color: #0aa19a !important; 
    color: #ffffff !important; 
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 1px !important; 
    border-radius: 50px !important; 
    padding: 18px 40px !important; 
    box-shadow: 0 10px 30px rgba(10, 161, 154, 0.4) !important; 
    transition: all 0.3s ease !important; 
    border: 2px solid #0aa19a !important; 
}

/* Der ursprüngliche Hover-Effekt: Transparent werden & Leuchten */
.hero-section .gb-button:hover { 
    background-color: transparent !important; 
    color: #ffffff !important; 
    transform: translateY(-3px); 
    box-shadow: 0 15px 40px rgba(10, 161, 154, 0.6) !important; 
}

/* 3. BOSCH-STREIFEN (Blaues Design) */
.hero-section.bosch-style .gb-button { 
    background-color: #0056b3 !important; 
    border-color: #0056b3 !important;
    box-shadow: 0 10px 30px rgba(0, 86, 179, 0.4) !important;
}

.hero-section.bosch-style .gb-button:hover { 
    background-color: transparent !important;
    border-color: #0056b3 !important; /* Bleibt Blau für sauberen Look */
    box-shadow: 0 15px 40px rgba(0, 86, 179, 0.6) !important;
}

/* 4. MAKITA-STREIFEN (Türkis/Teal Design) */
.hero-section.makita-style .gb-button { 
    background-color: #008d9e !important; 
    border-color: #008d9e !important;
    box-shadow: 0 10px 30px rgba(0, 141, 158, 0.4) !important;
}

.hero-section.makita-style .gb-button:hover { 
    background-color: transparent !important;
    border-color: #008d9e !important;
    box-shadow: 0 15px 40px rgba(0, 141, 158, 0.6) !important;
}

/* 5. GARDENA-STREIFEN (Orange Design) */
.hero-section.gardena-style .gb-button { 
    background-color: #F4811F !important; 
    border-color: #F4811F !important;
    box-shadow: 0 10px 30px rgba(244, 129, 31, 0.4) !important;
}

.hero-section.gardena-style .gb-button:hover { 
    background-color: transparent !important;
    border-color: #F4811F !important;
    box-shadow: 0 15px 40px rgba(244, 129, 31, 0.6) !important;
}

/* 6. EINHELL-STREIFEN (Rotes Design) */
.hero-section.einhell-style .gb-button { 
    background-color: #d00000 !important; 
    border-color: #d00000 !important;
    box-shadow: 0 10px 30px rgba(208, 0, 0, 0.4) !important;
}

.hero-section.einhell-style .gb-button:hover { 
    background-color: transparent !important;
    border-color: #d00000 !important;
    box-shadow: 0 15px 40px rgba(208, 0, 0, 0.6) !important;
}

/* 7. FESTOOL-STREIFEN (Dunkelblau/Grün) */
.hero-section.festool-style .gb-button { 
    background-color: #003359 !important; 
    border-color: #003359 !important;
    box-shadow: 0 10px 30px rgba(0, 51, 89, 0.4) !important;
}

.hero-section.festool-style .gb-button:hover { 
    background-color: transparent !important;
    border-color: #003359 !important;
    box-shadow: 0 15px 40px rgba(0, 51, 89, 0.6) !important;
}
/* ============================================================
   TOOL CARDS - STANDARD & MARKEN-STYLES
   ============================================================ */

/* 1. STANDARD (Deine Hauptfarben: Anthrazit & Türkis) */
.tool-card { 
    background-color: #ffffff !important; 
    box-sizing: border-box !important; 
    padding: 25px; 
    border-radius: 8px; 
    border-bottom: 4px solid #e2e8f0; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    transition: all 0.3s ease; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    justify-content: flex-start; 
    text-decoration: none !important; 
    color: var(--text-main); 
}

/* Standard Hover: Deine Akzentfarbe Türkis */
.tool-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); 
    border-bottom-color: var(--accent) !important; /* Türkis */
}

.tool-card h3, 
.tool-card .gb-headline-text { 
    font-weight: 800 !important; 
    margin-top: 15px; 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    font-size: 16px !important; 
    color: var(--anthracite) !important; 
    letter-spacing: 0.5px; 
    line-height: 1.3; 
}

.tool-card p:not(.gb-headline-text) { 
    text-transform: none !important; 
    font-size: 15px !important; 
    color: #555; 
    line-height: 1.6; 
}

/* Icon Standard-Zustand */
.tool-card .gb-icon, 
.tool-card .gb-icon svg { 
    color: #334155 !important; 
    fill: currentColor !important; 
    width: 50px !important; 
    height: 50px !important; 
    margin: 0 auto; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: color 0.3s ease;
}

/* Icon Hover Standard: Türkis */
.tool-card:hover .gb-icon, 
.tool-card:hover .gb-icon svg { 
    color: var(--accent) !important; 
}


/* 2. MARKEN-ZUSATZKLASSEN (Spezifische Farben) */

/* BOSCH: Rand Blau, Icon Rot */
.tool-card.bosch-style:hover { border-bottom-color: #0056b3 !important; }
.tool-card.bosch-style:hover .gb-icon svg { color: #E30613 !important; }

/* MAKITA: Rand Türkis/Teal, Icon Rot */
.tool-card.makita-style:hover { border-bottom-color: #008d9e !important; }
.tool-card.makita-style:hover .gb-icon svg { color: #d00000 !important; }

/* EINHELL: Rand Rot, Icon Anthrazit */
.tool-card.einhell-style:hover { border-bottom-color: #d00000 !important; }
.tool-card.einhell-style:hover .gb-icon svg { color: #2D3A3A !important; }

/* GARDENA: Rand Orange, Icon Blau/Türkis */
.tool-card.gardena-style:hover { border-bottom-color: #F4811F !important; }
.tool-card.gardena-style:hover .gb-icon svg { color: #009698 !important; }

/* FESTOOL: Rand Dunkelblau, Icon Grün */
.tool-card.festool-style:hover { border-bottom-color: #003359 !important; }
.tool-card.festool-style:hover .gb-icon svg { color: #83b81a !important; }

/* Hero Logos */
.hero-logos, .logo-container { display: flex !important; justify-content: center !important; align-items: center !important; gap: 30px !important; flex-wrap: nowrap !important; margin: 0 auto; width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 10px; }
.logo-container::-webkit-scrollbar { display: none; }
.logo-container { -ms-overflow-style: none; scrollbar-width: none; }
.hero-logos img, .logo-container img { max-width: 110px !important; max-height: 45px !important; width: auto !important; height: auto !important; flex-shrink: 0 !important; filter: grayscale(100%) invert(1) brightness(200%) contrast(150%) !important; opacity: 0.9 !important; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; margin: 0 !important; padding: 5px !important; border-radius: 6px !important; }
.hero-logos img:hover, .logo-container img:hover { filter: none !important; opacity: 1 !important; background-color: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important; transform: scale(1.1) !important; cursor: pointer; }

@media (min-width: 601px) and (max-width: 1024px) {
    .hero-logos, .logo-container { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; justify-items: center !important; width: 100% !important; padding: 20px !important; box-sizing: border-box !important; }
    .hero-logos img, .logo-container img { min-width: 120px !important; width: 100% !important; max-width: 180px !important; height: auto !important; max-height: 60px !important; object-fit: contain !important; }
}
@media (max-width: 600px) {
    .hero-logos, .logo-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; justify-items: center !important; padding: 10px 25px 30px 25px !important; width: 100% !important; box-sizing: border-box !important; }
    .hero-logos img, .logo-container img { width: auto !important; max-width: 90% !important; height: auto !important; max-height: 45px !important; object-fit: contain !important; }
}
.blend-image img { mix-blend-mode: multiply; opacity: 0.9; }

/* ============================================================
   AAWP SPECIAL REPAIR CODE (Nur für Boxen & Grid)
   ============================================================ */

/* 1. DIE HORIZONTALE BOX (PRODUKT-BOX IM ARTIKEL) */
body .aawp-product--horizontal {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 25px !important;
    background: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-left: 6px solid var(--accent, #0aa19a) !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Bild-Bereich */
body .aawp-product--horizontal .aawp-product__thumb {
    flex: 0 0 160px !important; /* Feste Breite für das Bild */
    width: 160px !important;
    margin: 0 !important;
}

/* Inhalts-Bereich (Text) */
body .aawp-product--horizontal .aawp-product__content {
    flex: 1 1 auto !important; /* Nimmt den restlichen Platz ein */
    padding: 0 10px !important;
    margin: 0 !important;
}

/* Button & Preis Bereich (Footer) */
body .aawp-product--horizontal .aawp-product__footer {
    flex: 0 0 200px !important; /* Feste Breite für Button-Bereich */
    width: 200px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border-left: 1px solid #f0f0f0 !important;
    padding-left: 20px !important;
    margin: 0 !important;
}

/* 2. DAS BESTSELLER GRID (STARTSEITE) */
.my-aawp-grid .aawp {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.my-aawp-grid .aawp-product--vertical {
    flex: 1 1 calc(33.333% - 20px) !important; /* Erzwingt 3 Spalten */
    max-width: calc(33.333% - 20px) !important;
    min-width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #fff !important;
    padding: 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
    box-sizing: border-box !important;
    border-bottom: 4px solid #e2e8f0 !important;
}

/* 3. BUTTON-TEXTFARBE ZWANG (WEISS) */
body .aawp .aawp-button, 
body .aawp-button, 
body .aawp-product .aawp-button {
    background-color: var(--primary, #0056b3) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 15px !important;
    width: 100% !important;
    text-align: center !important;
    display: block !important;
}

/* Verhindert, dass besuchte Links den Text schwarz machen */
body .aawp .aawp-button:visited, 
body .aawp .aawp-button span,
body .aawp .aawp-button--buy {
    color: #ffffff !important;
}

/* Hover Effekt */
body .aawp .aawp-button:hover {
    background-color: var(--primary-hover, #003d80) !important;
    color: #ffffff !important;
}

/* 4. MOBILE ANPASSUNG */
@media (max-width: 768px) {
    body .aawp-product--horizontal {
        flex-direction: column !important;
        text-align: center !important;
    }
    body .aawp-product--horizontal .aawp-product__footer {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #f0f0f0 !important;
        padding-top: 20px !important;
        padding-left: 0 !important;
    }
    .my-aawp-grid .aawp-product--vertical {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   11. EASY TABLE OF CONTENTS (ez-toc) PRO LOOK
   ============================================================ */

/* Der Haupt-Container */
#ez-toc-container {
    background-color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-left: 5px solid var(--accent) !important; /* Dein Türkis-Akzent */
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    padding: 25px !important;
    margin: 40px 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Titel des Inhaltsverzeichnisses */
#ez-toc-container .ez-toc-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

#ez-toc-container .ez-toc-title {
    font-family: inherit;
    font-size: 20px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--anthracite) !important;
    letter-spacing: 0.5px;
    margin: 0 !important;
}

/* Die Liste der Links */
#ez-toc-container nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Haupteinträge (H2) */
#ez-toc-container nav ul li {
    margin-bottom: 8px !important;
    font-weight: 600;
}

/* Untereinträge (H3, H4) */
#ez-toc-container nav ul ul {
    margin-top: 5px !important;
    margin-left: 20px !important; /* Einrückung */
}

#ez-toc-container nav ul ul li {
    font-weight: 400 !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

/* Link-Styling */
#ez-toc-container a {
    color: var(--text-main) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    display: inline-block;
    padding: 2px 0;
}

/* Hover-Effekt */
#ez-toc-container a:hover {
    color: var(--accent) !important;
    transform: translateX(5px); /* Kleiner Slide-Effekt */
}

/* Die kleinen Zahlen (Nummerierung) falls aktiviert */
#ez-toc-container .ez-toc-counter {
    color: var(--accent) !important;
    font-weight: 800;
    margin-right: 8px;
}

/* Toggle-Button (Das Icon zum Ein-/Ausklappen) */
.ez-toc-pull-right {
    float: none !important;
}

.ez-toc-title-toggle {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 5px !important;
    transition: all 0.2s ease;
}

.ez-toc-title-toggle:hover {
    background: #edf2f7 !important;
}