/* Dorsten Contact Box Styles */
.dorsten-contact-box {
    position: relative;
    background-color: #575756; /* Dorsten Dunkelgrau */
    /* Padding wird jetzt von Elementor kontrolliert - Fallback für alte Installationen */
    padding: 2.5rem 1.5rem 0;
    aspect-ratio: 1 / 1; /* Quadratisches Verhältnis 1:1 */
    width: 100%;
    color: #ffffff; /* Weiße Schrift für bessere Lesbarkeit (Standard) */
    display: flex;
    flex-direction: column;
    /* margin-bottom entfernt damit Elementor Abstände funktionieren */
}

/*
 * Wichtig: Standardfarbe Weiß, aber über Elementor änderbar
 * Der globale Elementor-Reset setzt in Widgets eine Textfarbe (#575756) auf alle Kinder.
 * Damit unsere Box trotzdem standardmäßig weiß ist UND über die Container/Spalten-Textfarbe
 * in Elementor überschrieben werden kann, setzen wir:
 * 1) explizit Weiß auf die Box
 * 2) und zwingen die Kinder auf Vererbung (inherit) mit höherer Spezifität
 *    als der globale Reset – aber ohne !important.
 * Dadurch greifen Inline-Styles/Bedienelemente von Elementor weiterhin.
 */
.elementor .elementor-widget-container .dorsten-contact-box {
    color: #ffffff; /* Default: Weiß */
}
.elementor .elementor-widget-container .dorsten-contact-box * {
    color: inherit; /* Von der Box (oder Elementor Inline-Farbe) erben */
}

.dorsten-contact-box::after {
    content: "";
    position: absolute;
    right: -50px;
    top: -55px;
    height: 300px;
    width: 250px;
    background-image: url('../images/logo/wappen_dorsten_weiss.svg') !important;
    background-repeat: no-repeat !important;
    background-position: top right !important;
    background-size: contain;
    opacity: .15;
    pointer-events: none;
}

.dorsten-contact-content {
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 4.5rem; /* Platz für den Footer */
}

.dorsten-contact-info {
    margin-bottom: 1rem;
}

.dorsten-contact-box p {
    margin: 0 0 .5rem;
}

.dorsten-contact-footer {
    background: #95C11F; /* Dorsten Grün */
    position: absolute !important;
    left: -1.5rem !important; /* Über das linke Padding hinweg */
    bottom: 0 !important; /* Direkt am unteren Rand der Kachel */
    right: -1.5rem !important; /* Über das rechte Padding hinweg */
    padding: 0 !important;
    width: calc(100% + 3rem) !important; /* 100% + 2x 1.5rem Padding */
    box-sizing: border-box !important;
    /* margin entfernt damit Elementor es kontrollieren kann */
}

.dorsten-contact-footer p {
    padding: 1.1rem 1.5rem !important;
    color: inherit; /* Von der Box/Eltern erben, damit Elementor überschreiben kann */
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* margin entfernt damit Elementor es kontrollieren kann */
}

.dorsten-contact-box a {
    color: inherit; /* Links erben die Textfarbe (Standard Weiß, via Elementor änderbar) */
    background-image: none; /* keinen globalen Gradient-Unterstrich in der Box */
    text-decoration: none !important;
    transition: opacity 0.3s ease;
}

/* Gegen Elementor-Global-Linkfarben: Links in der Kontaktbox bleiben standardmäßig weiß (erbend) */
.elementor .elementor-widget-container .dorsten-contact-box a {
    color: inherit;
}

/* Tel/Mailto in der Box: Weiß als Default, trotz globalem !important */
.dorsten-contact-box a[href^="tel:"],
.dorsten-contact-box a[href^="mailto:"] {
    color: inherit !important;
    background-image: none !important;
}

.elementor .elementor-widget-container .dorsten-contact-box a[href^="tel:"],
.elementor .elementor-widget-container .dorsten-contact-box a[href^="mailto:"] {
    color: inherit !important;
    background-image: none !important;
}

.dorsten-contact-box a:hover {
    text-decoration: underline !important;
    opacity: 0.8;
}

/* Icon Styles für E-Mail und Telefon */
.dorsten-contact-box a[href^="mailto:"]::before {
    content: "\f0e0";
    font-family: var(--dorsten-font-fallback, "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome", sans-serif);
    font-weight: 900;
    margin-right: 6px;
    color: currentColor; /* Icon folgt der Textfarbe */
    display: inline-block;
}

.dorsten-contact-box a[href^="tel:"]::before {
    content: "\f095";
    font-family: var(--dorsten-font-fallback, "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome", sans-serif);
    font-weight: 900;
    margin-right: 6px;
    color: currentColor; /* Icon folgt der Textfarbe */
    display: inline-block;
}

/* Contact Text Links - immer weiß */
.dorsten-contact-text a,
.dorsten-contact-text a:visited,
.dorsten-contact-text a:hover,
.dorsten-contact-text a:active,
.dorsten-contact-text a:focus {
    color: #fff !important;
    text-decoration: none !important;
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 767px) {
    .dorsten-contact-box {
        aspect-ratio: auto; /* Quadrat aufheben, damit der gesamte Inhalt sichtbar ist */
        min-height: auto;
        padding-bottom: 0; /* Footer regelt sich selbst */
    }

    .dorsten-contact-content {
        padding-bottom: 5rem; /* Genug Platz für den Footer-Balken */
    }
}

/* Block-11 Margin-Fix */
#block-11 {
    margin-top: -4px !important;
}