/* Globale Styles für das Modul */
.bd_compare_module h2,
.bd_compare_teaser {
    text-align: center;
    max-width: var(--wide, 960px); /* Fallback für --wide hinzugefügt */
    margin: 0 auto;
    /* Optional: Abstand nach unten zur Boxen-Sektion */
    margin-bottom: 2em;
}

.bd_compare_boxes {
    margin-top: 2em; /* Kann entfernt werden, wenn oben schon margin-bottom ist */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Zentriert die Zeilen, wenn sie nicht die volle Breite einnehmen (z.B. bei 3 Boxen die einzelne in der zweiten Zeile) */
    gap: 2rem;
}

.bd_compare_box {
    /* Basis-Styling, das für alle Größen gilt, aber von Media Queries überschrieben werden kann */
    background-color: #fff;
    color: #111;
    padding: 2rem;
    box-shadow: var(--box-shadow, 0 4px 8px rgba(0,0,0,0.1));
    border-radius: var(--border-radius, 8px);
    transition: all 0.3s ease;
    box-sizing: border-box; /* WICHTIG: padding und border werden in die Breite/Höhe einbezogen */

    /* Desktop: Standardmäßig zwei Boxen pro Zeile */
    /* flex-grow | flex-shrink | flex-basis */
    flex: 0 1 calc(50% - 1rem); /* Erläuterung siehe unten */

    min-width: 280px; /* Verhindert, dass Boxen zu schmal werden, wenn der Container sehr eng wird, bevor der Mobile-Breakpoint greift */
    max-width: 500px; /* Verhindert, dass eine einzelne Box (z.B. die dritte) auf sehr breiten Bildschirmen zu breit wird */
}

/* Erläuterung zu flex: 0 1 calc(50% - 1rem);
   - flex-grow: 0 -> Die Box soll nicht über ihre flex-basis hinaus wachsen, um freien Platz zu füllen.
                     Das ist wichtig, damit nicht z.B. die dritte Box allein die ganze Breite einnimmt.
   - flex-shrink: 1 -> Die Box darf schrumpfen, wenn nicht genug Platz ist (bis zur min-width).
   - flex-basis: calc(50% - 1rem) -> Die ideale Breite.
     Bei einem `gap` von `2rem` zwischen den Boxen:
     Wenn wir zwei Boxen haben, gibt es einen Gap zwischen ihnen (2rem).
     Jede Box soll (100% der Containerbreite - 2rem Gap) / 2 einnehmen.
     Das ist gleichbedeutend mit 50% - (2rem / 2) = 50% - 1rem.
*/

.bd_compare_box:hover,
.bd_compare_box:focus-within {
    transform: translateY(-5px);
}

.bd_compare_box h3, /* Gilt für alle h3 innerhalb, also auch für H2, H4 etc., wenn das der gewählte Tag ist */
.bd_compare_box h2,
.bd_compare_box h4,
.bd_compare_box h5,
.bd_compare_box h6,
.bd_compare_box strong.box-title-is-strong { /* Eigene Klasse für strong als Titel */
    margin-top: 0;
    font-size: 1.5rem; /* Anpassen, falls verschiedene Tags unterschiedliche Größen haben sollen */
    margin-bottom: 1rem;
    color: var(--primary, #70c337);
}

.bd_compare_box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bd_compare_box li {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    display: flex;
    align-items: center; /* Vertikal zentrieren Icon und Text */
    gap: 0.7rem;
    color: #333;
}

.bd_compare_box li i {
    font-size: 1.2rem;
    color: var(--primary, #70c337);
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft, wenn der Text lang ist */
}

.bd_compare_box li span {
    flex: 1; /* Der Text nimmt den restlichen Platz ein */
}

/* Responsives Design für kleinere Bildschirme */
@media (max-width: 768px) {
    .bd_compare_module {
        padding: 2rem 1rem; /* Etwas Padding für das Gesamtmodul auf Mobile */
    }

    .bd_compare_box {
        flex-basis: 100%; /* Jede Box nimmt die volle verfügbare Breite ein */
        min-width: 100%;  /* Stellt sicher, dass es die volle Breite ist, überschreibt vorherige min-width */
        max-width: none;  /* Überschreibt vorherige max-width, damit 100% greift */
    }
}

/* Fokus sichtbar machen für Barrierefreiheit */
.bd_compare_box:focus-within {
    outline: 2px solid #2196F3; /* Deutliche Fokus-Farbe */
    outline-offset: 2px; /* Etwas Abstand vom Rand */
}