/* ============================================================
   16. TOOL CARDS (Startseite / Kategorie) - REPARIERT
   ============================================================ */
a.tool-card {
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    border-bottom: 4px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px 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;
}

a.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-bottom-color: var(--brand-main); /* Zieht die Farbe aus dem Theme */
}

a.tool-card h3.gb-headline {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
    text-transform: none !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    color: #1e293b !important; 
}

a.tool-card p.gb-headline {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    text-transform: none !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
}

a.tool-card .gb-icon svg {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto;
    transition: all 0.3s ease;
    color: var(--brand-main) !important; /* Zieht die Farbe aus dem Theme */
}

a.tool-card:hover .gb-icon svg {
    color: var(--brand-hover) !important; /* Zieht die Hover-Farbe aus dem Theme */
    transform: scale(1.1); 
}

/* 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;
}