/* Dorsten Icon Box Widget Styles - Mit höherer Spezifität */

/* WICHTIG: Keine Unterstreichung bei Icon Box Links - Höchste Priorität */
a.dorsten-icon-box,
a.dorsten-icon-box:link,
a.dorsten-icon-box:visited,
a.dorsten-icon-box:hover,
a.dorsten-icon-box:active,
a.dorsten-icon-box:focus,
.dorsten-icon-box-wrapper > a,
.dorsten-icon-box-wrapper > a:link,
.dorsten-icon-box-wrapper > a:visited,
.dorsten-icon-box-wrapper > a:hover,
.dorsten-icon-box-wrapper > a:active,
.dorsten-icon-box-wrapper > a:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-style: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    border-bottom-style: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-text-decoration: none !important;
    -moz-text-decoration: none !important;
}

/* Auch für alle Kind-Elemente */
a.dorsten-icon-box *,
a.dorsten-icon-box:hover *,
.dorsten-icon-box-wrapper > a *,
.dorsten-icon-box-wrapper > a:hover * {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Font Awesome Icons Fix für Icon Box - Höchste Spezifität */
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon .fa,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon .fas,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon .far,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon .fab,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon [class*="fa-"],
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon [class^="fa-"],
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon i[class*="fa-"],
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon i[class^="fa-"],
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .fa,
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .fas,
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .far,
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .fab,
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon [class*="fa-"],
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon [class^="fa-"],
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon i[class*="fa-"],
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon i[class^="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* Regular Icons - Höchste Spezifität */
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon .far,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon i.far,
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .far,
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon i.far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

/* Brand Icons - Höchste Spezifität */
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon .fab,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon i.fab,
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .fab,
.elementor-widget-dorsten_icon_box .dorsten-icon-box-icon i.fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* Spezifische Icon-Fix für häufig verwendete Icons */
.dorsten-icon-box-icon .fa-arrow-alt-circle-down:before,
.dorsten-icon-box-icon i.fa-arrow-alt-circle-down:before,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon .fa-arrow-alt-circle-down:before,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon i.fa-arrow-alt-circle-down:before {
    content: "\f358" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Alternative: Falls das Icon als Solid Icon verwendet werden soll */
.dorsten-icon-box-icon .fa-arrow-alt-circle-down,
.dorsten-icon-box-icon i.fa-arrow-alt-circle-down,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon .fa-arrow-alt-circle-down,
body.elementor-default .elementor .elementor-widget-container .dorsten-icon-box-icon i.fa-arrow-alt-circle-down {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Override für alle Font Awesome Icons in Icon Box mit maximaler Spezifität */
body.elementor-default .elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .fa,
body.elementor-default .elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .fas,
body.elementor-default .elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .far,
body.elementor-default .elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .fab,
body.elementor-default .elementor-widget-dorsten_icon_box .dorsten-icon-box-icon i[class*="fa-"],
body.elementor-default .elementor-widget-dorsten_icon_box .dorsten-icon-box-icon i[class^="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Fallback: Force alle FA Icons als Solid zu rendern wenn Regular nicht funktioniert */
body.elementor-default .elementor-widget-dorsten_icon_box .dorsten-icon-box-icon .far,
body.elementor-default .elementor-widget-dorsten_icon_box .dorsten-icon-box-icon i.far {
    font-weight: 900 !important;
}

/* Debug: Sichtbarkeit forcieren */
.dorsten-icon-box-icon i:before {
    display: inline-block !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Dorsten Icon Box Widget Styles - Mit höherer Spezifität */
.elementor-widget-dorsten_icon_box .elementor-widget-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.elementor-widget-dorsten_icon_box .dorsten-icon-box-wrapper,
.dorsten-icon-box-wrapper {
    width: calc(25% - 20px); /* Standard: 4 pro Zeile */
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1024px) {
    .elementor-widget-dorsten_icon_box .dorsten-icon-box-wrapper,
    .dorsten-icon-box-wrapper {
        width: calc(33.333% - 20px); /* Tablet: 3 pro Zeile */
    }
}

@media (max-width: 767px) {
    .elementor-widget-dorsten_icon_box .elementor-widget-container {
        gap: 10px;
    }
    .elementor-widget-dorsten_icon_box .dorsten-icon-box-wrapper,
    .dorsten-icon-box-wrapper {
        width: calc(50% - 10px); /* Mobile: 2 pro Zeile */
    }
}

@media (max-width: 479px) {
    .elementor-widget-dorsten_icon_box .dorsten-icon-box-wrapper,
    .dorsten-icon-box-wrapper {
        width: calc(100% - 10px); /* Kleine Geräte: 1 pro Zeile */
    }
}

.elementor-widget-dorsten_icon_box .dorsten-icon-box,
.dorsten-icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 20px;
    position: relative;
    width: 100%;
    /* Quadratisches Format durch Aspect-Ratio */
    aspect-ratio: 1 / 1;
    /* Hintergrund nutzt jetzt CSS-Variable für flexible zentrale Steuerung */
    background-color: rgba(122, 122, 122, 0.15);
    color: #575756;
    transition: background-color 0.3s ease, color 0.3s ease; /* Nur Farbe animieren */
    overflow: hidden;
    border-radius: 0;
    box-sizing: border-box; /* Verhindert, dass Padding die Größe verändert */
}

/* Hover-Effekte mit hoher Spezifität */
.elementor-widget-dorsten_icon_box .dorsten-icon-box:hover,
.dorsten-icon-box:hover {
    /* Standard Hover-Farbe aus Customizer (Webseitenfarbe) */
    background-color: var(--farbe-verlinkung, var(--farbe-dorsten-gruen, #80B022));
    transform: none; /* Keine Verschiebung */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Hover-Farben - Defaults, werden von Elementor {{WRAPPER}}-Selektoren überschrieben */
.dorsten-icon-box:hover .dorsten-icon-box-title,
.dorsten-icon-box:hover .dorsten-icon-box-description {
    color: #ffffff;
}

.dorsten-icon-box:hover i,
.dorsten-icon-box:hover .dorsten-icon-box-icon i {
    color: #ffffff;
}

/* Elementor SVG Font Icons im Hover */
.dorsten-icon-box:hover .dorsten-icon-box-icon .e-font-icon-svg {
    fill: #ffffff;
}

.dorsten-icon-box:hover svg,
.dorsten-icon-box:hover .dorsten-icon-box-icon svg,
.dorsten-icon-box:hover svg path {
    color: #ffffff;
    fill: #ffffff;
}

/* Nur für Custom-Upload-SVGs (nicht FA SVG-Icons) den Invertfilter anwenden */
.dorsten-icon-box:hover .dorsten-icon-box-icon svg:not(.e-font-icon-svg) image {
    filter: brightness(0) invert(1);
}

/* Elementor-spezifische Link-Styles unterdrücken - mit maximaler Spezifität */
body .elementor a.dorsten-icon-box,
body .elementor-widget-container a.dorsten-icon-box,
body .elementor a.dorsten-icon-box:link,
body .elementor-widget-container a.dorsten-icon-box:link,
body .elementor a.dorsten-icon-box:visited,
body .elementor-widget-container a.dorsten-icon-box:visited,
body .elementor a.dorsten-icon-box:hover,
body .elementor-widget-container a.dorsten-icon-box:hover,
body .elementor a.dorsten-icon-box:active,
body .elementor-widget-container a.dorsten-icon-box:active,
body .elementor a.dorsten-icon-box:focus,
body .elementor-widget-container a.dorsten-icon-box:focus,
body .elementor-widget-dorsten_icon_box a.dorsten-icon-box,
body .elementor-widget-dorsten_icon_box a.dorsten-icon-box:hover,
body .elementor-widget-dorsten_icon_box a.dorsten-icon-box:link,
body .elementor-widget-dorsten_icon_box a.dorsten-icon-box:visited,
body .elementor-widget-dorsten_icon_box a.dorsten-icon-box:active,
body .elementor-widget-dorsten_icon_box a.dorsten-icon-box:focus {
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.dorsten-icon-box-content {
    position: relative;
    z-index: 2; /* Über dem Bild */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Wieder auf space-between ändern */
    width: 100%;
    height: 100%;
}

.dorsten-icon-box-icon {
    font-size: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding-top: 30px; /* Angepasster Platz für quadratisches Layout */
    flex: 1;
}

.dorsten-icon-box-icon i,
.dorsten-icon-box-icon svg {
    color: inherit; /* Von Elementor-Controls gesteuert, Fallback via .dorsten-icon-box */
    transition: color 0.3s ease, fill 0.3s ease;
    width: auto;
    height: auto;
    font-size: 4.5rem; /* Sicherstellen der Größe für i-Elemente */
}

/* Elementor SVG Font Icons (e-font-icon-svg) Support */
.dorsten-icon-box-icon .e-font-icon-svg {
    fill: currentColor;
    width: 1em;
    height: 1em;
}

.dorsten-icon-box-icon svg {
    width: 4.5rem; /* Feste Breite für SVG-Icons */
    height: 4.5rem; /* Feste Höhe für SVG-Icons */
    fill: currentColor; /* Von Elementor-Controls gesteuert */
}

/* Hover Icon-Farben werden über Elementor-Controls gesteuert - hier keine festen Werte */

.dorsten-icon-box-title {
    font-size: inherit;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    padding: 0 10px 20px 10px;
    transition: color 0.3s ease;
    color: var(--farbe-dorsten-grau, #575756);
    text-align: center;
    width: 100%;
    max-height: 80px; /* Begrenzt die Höhe für gleichmäßige quadratische Boxen */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.dorsten-icon-box-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Unter dem Content */
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.dorsten-icon-box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dorsten-icon-box:hover .dorsten-icon-box-image {
    opacity: 0.2;
}

/* Responsives Design */
/* Tablet-Größen */
@media screen and (max-width: 1024px) {
    .dorsten-icon-box-icon {
        font-size: 4rem;
        padding-top: 10px;
    }

    .dorsten-icon-box-icon i,
    .dorsten-icon-box-icon svg {
        font-size: 4rem;
    }

    .dorsten-icon-box-icon svg {
        width: 4rem;
        height: 4rem;
    }
}

/* Mobile Geräte */
@media screen and (max-width: 767px) {
    .dorsten-icon-box {
        padding: 15px;
    }

    .dorsten-icon-box-icon {
        font-size: 3.5rem;
    }

    .dorsten-icon-box-icon i,
    .dorsten-icon-box-icon svg {
        font-size: 3.5rem;
    }

    .dorsten-icon-box-icon svg {
        width: 3.5rem;
        height: 3.5rem;
    }

    .dorsten-icon-box-title {
        font-size: inherit;
        padding-bottom: 10px;
    }
}

/* Kleine mobile Geräte */
@media screen and (max-width: 479px) {
    .dorsten-icon-box {
        padding: 12px;
    }

    .dorsten-icon-box-icon {
        font-size: 3rem;
    }

    .dorsten-icon-box-icon i,
    .dorsten-icon-box-icon svg {
        font-size: 3rem;
    }

    .dorsten-icon-box-icon svg {
        width: 3rem;
        height: 3rem;
    }

    .dorsten-icon-box-title {
        font-size: inherit;
        padding-bottom: 8px;
    }
}

/* Unterstützung für Elementor SVG-Icons */
.elementor-icon svg {
    height: auto;
}

/* Spezifische Regel gegen Unterlinien bei Links */
a.dorsten-icon-box,
a.dorsten-icon-box:hover,
a.dorsten-icon-box:focus,
a.dorsten-icon-box:active,
.dorsten-icon-box-wrapper a,
.dorsten-icon-box-wrapper a:hover,
.dorsten-icon-box-wrapper a:focus,
.dorsten-icon-box-wrapper a:active {
    text-decoration: none;
    border-bottom: none;
    border: none;
}

/* Zusätzliche Regeln für Links und Hover-Effekte */
.dorsten-icon-box,
.dorsten-icon-box:hover,
.dorsten-icon-box:focus,
.dorsten-icon-box:active,
.dorsten-icon-box a,
.dorsten-icon-box a:hover,
.dorsten-icon-box a:focus,
.dorsten-icon-box a:active,
.elementor-element .elementor-widget-dorsten_icon_box a,
.elementor-element .elementor-widget-dorsten_icon_box a:hover,
.elementor-element .elementor-widget-dorsten_icon_box a:focus,
.elementor-element .elementor-widget-dorsten_icon_box a:active {
    text-decoration: none;
    transform: none;
    border: none;
    outline: none;
}

/* Elementor-Overrides: Stelle sicher, dass Titel-Styles nicht von Seitencss überschrieben werden */
.elementor .elementor-widget-dorsten_icon_box .dorsten-icon-box-title,
[data-elementor-type] .elementor-widget-dorsten_icon_box .dorsten-icon-box-title {
    font-size: inherit;
    margin-top: 0;
}