/* ============================================================
   10. - 12. SMART DESIGN SYSTEM (Layout + Farben kombiniert)
   ============================================================ */

/* --- 1. DIE LOGIK (Das Gehirn) --- */
.feature-card,
.tech-warning-box,
.tech-highlight-box,
.aawp-product--horizontal {
    /* Standard-Fallback */
    --brand-hex: #64748b; 

    /* Automatische Berechnung */
    --bg-color: color-mix(in srgb, var(--brand-hex), white 92%);
    --border-color: color-mix(in srgb, var(--brand-hex), white 40%);
    --icon-bg: #ffffff;
    --text-strong: var(--brand-hex);
}

/* --- 2. DIE FARB-DEFAULTS --- */
.feature-card { --brand-hex: #dd9933; }
.tech-warning-box { --brand-hex: #e67e22; }
.tech-highlight-box { --brand-hex: #0aa19a; }
.aawp-product--horizontal { --brand-hex: #1a3a7a; }

/* --- 3. MARKEN-FARBEN (Klassen) --- */
.makita { --brand-hex: #008d9e !important; }
.bosch  { --brand-hex: #008851 !important; }
.einhell{ --brand-hex: #d00000 !important; }
.stihl  { --brand-hex: #ea580c !important; }
.blau   { --brand-hex: #2196f3 !important; }


/* ============================================================
   LAYOUT: FEATURE CARDS
   ============================================================ */
.features-container {
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
    justify-content: space-between; 
    margin-bottom: 50px !important;
}

.feature-card {
    flex: 1; 
    min-width: 280px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start;
    padding: 30px 25px;
    
    background: #ffffff; 
    border: 1px solid #eeeeee;
    border-radius: 8px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    
    /* Farbiger Streifen oben */
    border-top: 4px solid var(--brand-hex) !important; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15); 
}

/* Feature Card Icons */
.feature-card-icon {
    display: flex !important; 
    align-items: center; 
    margin-bottom: 20px !important; 
    padding: 0 !important; 
    line-height: 1 !important;
    color: var(--brand-hex) !important; 
}

.feature-card-icon svg, 
.feature-card .gb-icon svg {
    width: 80px !important; 
    height: 80px !important; 
    display: block; 
    fill: currentColor !important; 
    color: inherit !important;
}

/* Feature Card Text */
.feature-card h3, 
.feature-card .gb-headline-text { 
    color: #222 !important; 
    margin-bottom: 15px; 
    font-weight: 800 !important; 
    font-size: 1.1rem; 
    line-height: 1.3; 
    text-transform: uppercase;
}

.feature-card p:not(.feature-card-icon) { 
    font-size: 0.95rem; 
    line-height: 1.6; 
    color: #666; 
    margin: 0; 
}


/* ============================================================
   B) WARN- & HIGHLIGHT-BOXEN (Final Clean Fix)
   ============================================================ */

/* 1. Die Box selbst */
.tech-warning-box, .tech-highlight-box {
    display: flex !important;
    align-items: flex-start !important;
    gap: 30px !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
    
    border-radius: 8px;
    padding: 25px 30px !important;
    margin: 40px 0 !important;
    
    /* Farben & Schatten */
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color);
    border-left: 6px solid var(--brand-hex) !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-warning-box:hover, .tech-highlight-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.15) !important;
}

/* 2. DAS GROSSE HAUPT-ICON (Links oben) */
/* Wir zielen SEHR spezifisch auf das erste Icon, das NICHT in einem Link ist */
.tech-warning-circle, 
.tech-icon-circle,
.tech-warning-box > .gb-headline:first-child .gb-icon, 
.tech-highlight-box > .gb-headline:first-child .gb-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    
    width: 60px !important;
    height: 60px !important;
    
    /* Der weiße Kreis */
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    
    color: var(--brand-hex) !important;
	fill: currentColor !important;
}

/* SVG Größe im Haupt-Icon */
.tech-warning-box > .gb-headline:first-child .gb-icon svg,
.tech-highlight-box > .gb-headline:first-child .gb-icon svg {
    width: 32px !important; 
    height: 32px !important; 
    opacity: 1 !important;
    fill: currentColor !important;
}

/* Duotone Schatten im Haupt-Icon */
.tech-warning-box > .gb-headline:first-child .gb-icon svg path[opacity],
.tech-highlight-box > .gb-headline:first-child .gb-icon svg path[opacity] {
    opacity: 0.4 !important;
}


/* 3. TEXT-BEREICH */
.tech-warning-wrapper, .tech-text-wrapper {
    flex-grow: 1; width: 100%; color: #444; line-height: 1.6;
}

/* 4. ÜBERSCHRIFTEN (Außerhalb von Links) */
.tech-warning-wrapper h3,
.tech-text-wrapper h3,
.tech-text-wrapper > .gb-headline:not(:has(a)) {
    color: var(--brand-hex) !important;
    font-weight: 800 !important;
    font-size: 1.1em !important;
    margin-bottom: 10px !important;
    display: block !important;
}


/* 5. LINKS & DIE KLEINEN PFEILE */

/* Der Link selbst */
.tech-warning-wrapper a, .tech-text-wrapper a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important; /* Abstand Pfeil <-> Text */
    
    color: var(--brand-hex) !important; /* Textfarbe = Brand */
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Hover Effekt */
.tech-warning-wrapper a:hover, .tech-text-wrapper a:hover {
    color: #111111 !important; /* Wird dunkel */
    border-bottom-color: var(--brand-hex);
    transform: translateX(5px);
}

/* DAS PFEIL ICON (Muss sich unterordnen!) */
.tech-warning-wrapper a .gb-icon,
.tech-text-wrapper a .gb-icon {
    width: auto !important; 
    height: auto !important;
    
    /* ZWINGEND: Kein Kreis! */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    
    padding: 0 !important;
    margin: 0 !important;
    
    /* Farbe erben */
    color: inherit !important;
    display: flex !important;
}

/* Das SVG im Pfeil */
.tech-warning-wrapper a .gb-icon svg,
.tech-text-wrapper a .gb-icon svg {
    width: 1.2em !important; 
    height: 1.2em !important;
    
    /* ZWINGEND: Farbe vom Link nehmen */
    fill: currentColor !important;
    opacity: 1 !important;
}

/* Mobile Anpassung */
@media (max-width: 600px) {
    .tech-warning-box, .tech-highlight-box {
        flex-direction: column !important; align-items: center !important;
        text-align: center !important; padding: 20px !important;
    }
    .tech-text-wrapper a { justify-content: center !important; }
}

/* ============================================================
   FIX: PFEILE IN DER LINKBOX (Ohne IDs)
   ============================================================ */

/* 1. Den Pfeil ansprechen (Egal welche ID!) */
.tech-text-wrapper .gb-headline .gb-icon svg {
    /* Größe anpassen */
    width: 1em !important; 
    height: 1em !important;
    
    /* FARBE ERZWINGEN (Nimmt die Farbe der Box, z.B. Petrol) */
    fill: var(--brand-hex) !important;
    color: var(--brand-hex) !important;
    
    /* Animation vorbereiten */
    transition: all 0.2s ease;
}

/* 2. Hover-Effekt (Wenn man über die Zeile fährt) */
.tech-text-wrapper .gb-headline:hover .gb-icon svg {
    /* Farbe wird dunkel */
    fill: #111111 !important; 
    
    /* Pfeil bewegt sich nach rechts */
    transform: translateX(5px); 
}
/* ============================================================
   C) PROJEKT-DASHBOARD (Brute Force Fix)
   ============================================================ */

/* 1. Haupt-Container */
.projekt-dashboard {
    /* Deine Farbe */
    --brand-hex: #64748b; 

    /* Farben berechnen */
    --bg-color: color-mix(in srgb, var(--brand-hex), white 93%);
    --nav-bg: color-mix(in srgb, var(--brand-hex), white 88%);
    --border-color: color-mix(in srgb, var(--brand-hex), white 60%);

    /* Box Style */
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    margin: 40px 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 2. TITEL (Groß & Mittig) */
.dash-title {
    padding: 30px 20px 0 20px !important;
    margin-bottom: 30px !important;
    text-align: center !important;
    color: var(--brand-hex) !important;
    
    font-weight: 800 !important; /* Fett */
    font-size: 1.6em !important; 
    text-transform: uppercase !important;
    line-height: 1 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
}

/* TITEL ICON - ZWANGSGRÖSSE */
/* Wir sprechen jede mögliche SVG-Klasse an */
.dash-title .gb-icon, 
.dash-title .gb-shape,
.dash-title svg {
    font-size: 45px !important; /* Basisgröße */
    line-height: 0 !important;
    display: block !important;
    width: 45px !important;
    height: 45px !important;
    color: var(--brand-hex) !important;
    fill: currentColor !important;
}


/* 3. GRID WRAPPER */
.dash-grid-wrapper {
    margin-bottom: 35px !important;
    padding: 0 30px !important;
}

/* 4. GRID ITEM */
.dash-item {
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important; /* Erzwingt zentrierten Text für alle Kinder */
    gap: 5px !important; 
}

/* GRID ICONS - ZWANGSGRÖSSE & ABSOLUTE ZENTRIERUNG */
.dash-icon {
    display: flex !important;
    justify-content: center !important; /* Zentriert das Icon horizontal */
    align-items: center !important;
    width: 100% !important; /* Nimmt die volle Breite der Box ein */
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
}

.dash-icon .gb-shape,
.dash-icon .gb-icon,
.dash-icon svg {
    color: var(--brand-hex) !important;
    fill: currentColor !important;
    display: block !important;
    width: 40px !important; /* Nur die Grafik wird 40px groß */
    height: 40px !important;
    line-height: 1 !important;
    margin: 0 !important; 
}

/* LABEL ("Länge") */
.dash-label {
    font-size: 0.75em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* WERT ("50 Meter") */
.dash-value {
    font-size: 1.25em !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}


/* 5. FOOTER (Grau) */
.dash-footer {
    background-color: var(--nav-bg) !important;
    border-top: 1px solid var(--border-color) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
}

/* FOOTER TEXT ("Die wichtigsten Inhalte") */
.dash-footer-text, 
.dash-footer-text p {
    font-size: 0.9em !important; /* Kleiner als vorher */
    font-weight: 700 !important;
    color: var(--brand-hex) !important;
    margin: 0 !important;
}


/* 6. BUTTONS (Weiß -> Blau) */
a.dash-btn {
    /* Normal: Weißer Hintergrund, Farbiger Text */
    background-color: #ffffff !important;
    color: var(--brand-hex) !important;
    border: 1px solid var(--border-color) !important;
    
    /* Schrift & Größe */
    font-size: 0.85em !important;
    font-weight: 600 !important; /* Etwas feiner */
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    transition: all 0.2s ease !important;
}

/* Icon IM Button */
a.dash-btn .gb-icon, 
a.dash-btn svg {
    width: 1.2em !important; /* Relativ zur Schriftgröße */
    height: 1.2em !important;
    margin-right: 6px !important;
    color: inherit !important;
    display: inline-block !important;
    fill: currentColor !important;
}

/* Hover: Blau mit weißer Schrift */
a.dash-btn:hover {
    background-color: var(--brand-hex) !important;
    color: #ffffff !important;
    border-color: var(--brand-hex) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Mobile */
@media (max-width: 600px) {
    .dash-grid-wrapper { display: flex !important; flex-wrap: wrap !important; }
    /* FIX: text-align: center hinzugefügt */
    .dash-item { width: 50% !important; margin-bottom: 25px !important; text-align: center !important; } 
    .dash-footer { flex-direction: column !important; gap: 15px !important; }
    a.dash-btn { width: 100% !important; justify-content: center !important; }
}

/* ============================================================
   -tl-dr
   ============================================================ */

/* 1. Haupt-Container */
.tl-dr {
    /* Deine Farbe */
    --brand-hex: #E35205; /* Ich habe hier mal das starke Orange eingesetzt */

    /* Farben berechnen */
    --bg-color: color-mix(in srgb, var(--brand-hex), white 93%);
    --nav-bg: color-mix(in srgb, var(--brand-hex), white 88%);
    --border-color: color-mix(in srgb, var(--brand-hex), white 60%);

    /* Box Style */
    background-color: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    margin: 40px 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 2. TITEL (Linksbündig) */
.tl-dr-title {
    padding: 25px 20px 20px 20px !important;
    margin-bottom: 0 !important; /* Abstand nach unten weg, damit es an den Text anschließt */
    text-align: left !important;
    color: var(--brand-hex) !important;
    
    font-weight: 800 !important;
    font-size: 1.4em !important; 
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    
    display: flex !important;
    align-items: center !important; /* Zentriert Icon und Text auf einer horizontalen Linie */
    justify-content: flex-start !important; /* DAS MACHT ES LINKSBÜNDIG */
    gap: 15px !important;
}

/* 3. TITEL ICON - ZWANGSGRÖSSE */
.tl-dr-title .gb-icon, 
.tl-dr-title .gb-shape,
.tl-dr-title svg {
    font-size: 40px !important; 
    line-height: 0 !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    color: var(--brand-hex) !important;
    fill: currentColor !important;
    flex-shrink: 0 !important; /* Verhindert, dass das Icon gequetscht wird */
}

/* 4. Inhalt (Textbereich) */
.tl-dr-content {
    background-color: var(--nav-bg) !important;
    border-top: none !important; 
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 20px 25px 20px !important;
    text-align: left !important;
    display: block !important;
}

/* 5. Die Text-Typografie */
.tl-dr-content-text, 
.tl-dr-content-text p {
    font-size: 1.05em !important; 
    font-weight: 500 !important; /* Normales Gewicht für bessere Lesbarkeit */
    line-height: 1.6 !important;
    color: #334155 !important; /* Ein tiefes Grau liest sich viel besser als bunt */
    margin: 0 !important;
}

/* ============================================================
   3. TECH-CARDS (Lexikon & Info-Karten) - FINALE KORREKTUR
   ============================================================ */

.tech-card {
    background-color: #ffffff !important;
    padding: 35px 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05) !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 5px solid var(--brand-main, #0aa19a) !important; 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none !important;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Icons */
.tech-card .gb-icon svg {
    width: 45px !important;
    height: 45px !important;
    color: var(--brand-main, #0aa19a) !important;
    margin-bottom: 20px !important;
}

/* NUR DIE ÜBERSCHRIFT (H3) */
.tech-card h3.gb-headline {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important; /* Hier bleibt es fett */
    font-size: 1.15rem !important;
    text-transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    color: #1e293b !important;
}

/* NUR DER FLIESSTEXT (P) - Verhindert das "Über-Fetten" */
.tech-card p.gb-headline {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important; /* Zwingt den Text auf normal */
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 !important;
    text-transform: none !important;
}

/* Spezial-Zustand: WARNUNG */
.tech-card.warning-card {
    border-top-color: var(--brand-hover, #E35205) !important;
}
.tech-card.warning-card .gb-icon svg {
    color: var(--brand-hover, #E35205) !important;
}

/* ============================================================
   4. FAQ ACCORDION STYLING
   ============================================================ */
.gb-accordion__item {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gb-accordion__item:hover {
    border-color: var(--brand-main) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.gb-accordion__toggle {
    padding: 20px 25px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
}

/* Das Icon beim Aufklappen einfärben */
.gb-accordion__item-open .gb-accordion__icon svg {
    color: var(--brand-main) !important;
}

.gb-accordion__content {
    background-color: #f8fafc !important; /* Leichte Abhebung des Antwort-Bereichs */
    padding: 25px !important;
    border-top: 1px solid #f1f5f9;
}

/* ============================================================
   QUERY LOOP BILDER (Kein Abschneiden mehr!)
   ============================================================ */
img.loop-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* Sorgt für exakt gleich hohe Boxen auf allen Geräten */
    
    /* DAS ZAUBERWORT: */
    object-fit: contain !important; /* Bild wird IMMER komplett angezeigt */
    object-position: center !important; /* Bild sitzt exakt in der Mitte */
    
    /* DER BILDERRAHMEN-EFFEKT: */
    background-color: #f8fafc !important; /* Helles, technisches Grau als Hintergrund */
    padding: 10px !important; /* Etwas Luft, damit das Bild nicht am Rand klebt */
    box-sizing: border-box !important;
    border-radius: 8px !important;
}

/* ============================================================
   5. QUERY LOOP BILDER & KARTEN (Der Premium Hover-Fix)
   ============================================================ */

/* 1. DIE KARTE SELBST (Verhindert das Ausbrechen des Bildes) */
body .is-loop-template-item > div,
body .is-loop-template-item > article {
    overflow: hidden !important; 
    border-radius: 8px !important; /* Hält die Ecken strikt rund */
    
    /* Der wichtigste Hack: Zwingt den Browser, das Bild beim Zoom abzuscheiden */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    isolation: isolate; 
    
    /* Weiche Animation für das "Hochhüpfen" der ganzen Karte */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 2. DAS BILD (Nahtlos Edge-to-Edge) */
body .is-loop-template-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; 
    object-fit: cover !important; 
    object-position: center !important; 
    background-color: transparent !important; 
    padding: 0 !important; 
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important; /* Die Rundung wird jetzt komplett von der Karte gesteuert */
    
    /* Weicher Bild-Zoom */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; 
}

/* 3. DER HOVER-EFFEKT (Karte hüpft hoch + Bild zoomt) */
body .is-loop-template-item:hover > div,
body .is-loop-template-item:hover > article {
    transform: translateY(-6px) !important; /* Ganze Karte schwebt nach oben */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important; /* Weicher Schatten */
}
/*
body .is-loop-template-item:hover img {
    transform: scale(1.05) !important; 
}*/

/* ============================================================
   PREMIUM OPTIK FÜR BEITRAGS-BILDER (Clean & Soft Shadow)
   ============================================================ */
.pro-article-img {
    /* Kein harter Rahmen mehr */
    border: none !important; 
    
    /* Deutlich weichere, modernere Abrundung */
    border-radius: 16px !important;
    
    /* Tiefer, weicher Kino-Schatten (lässt das Bild schweben) */
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15) !important;
    
    /* Etwas mehr Abstand zum Text, damit das Bild wirkt */
    margin-top: 30px !important;
    margin-bottom: 40px !important;
    
    /* Stellt sicher, dass das Bild die volle Breite nutzt */
    width: 100% !important;
    height: auto !important;
    display: block !important;
}