/* NEU: Styling für das Link-Tag, das das Element umschließt */
        .custom-card-link {
            text-decoration: none;
            color: inherit; /* Vererbt die Textfarbe, damit sie nicht blau wird */
            display: block; /* Sorgt dafür, dass der Link die volle Höhe/Breite einnimmt */
            height: 100%; /* Wichtig, damit der Link das h-100 der Spalte füllt */
        }

        /* NEU: Hover-Effekt für den Link */
        .custom-card-link:hover .custom-card {
            box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* Stärkerer Schatten beim Hovern */
            transform: translateY(-2px); /* Leichtes Anheben */
        }
     .custom-card-link:hover {
            text-decoration: none; /* Stellt sicher, dass auch beim Hovern kein Unterstrich erscheint */
        }
        /* Das benutzerdefinierte Element, das die rote Box und den Text enthält.
          d-flex richtet die Kinder (Icon-Feld und Text-Body) nebeneinander aus.
          align-items-center zentriert sie vertikal zueinander.
          h-100 sorgt dafür, dass alle Elemente in einer Zeile die gleiche Höhe annehmen.
        */
        .custom-card {
            /* background-color: #ffffff; <-- ENTFERNT. Hintergrund wird auf Kinder verschoben. */
            border-radius: 0.375rem; /* Standard-Bootstrap-Rundung */
            overflow: hidden; /* Stellt sicher, dass die abgerundeten Ecken sichtbar sind */
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Leichter Schatten */
            transition: all 0.2s ease-in-out; /* NEU: Für den Hover-Effekt */
        }

        /* Das linke "Feld" für das Icon.
          flex-shrink: 0 verhindert, dass es schrumpft.
          width und aspect-ratio definieren es als perfektes Quadrat (100px x 100px).
          d-flex... zentriert den Inhalt (das Placeholder-Bild) darin.
        */
        .custom-card-icon-field {
            flex-shrink: 0;
            width: 100px; 
            aspect-ratio: 1 / 1; /* Erzwingt ein quadratisches Verhältnis */
            background-color: #060002; /* Roter Hintergrund, ähnlich dem Bild */
        }

        /* Das Placeholder-Bild selbst. 
          Es wird kleiner als das rote Feld gemacht, um den Look aus dem Bild zu treffen.
        */
        .custom-card-icon-field img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block; /* NEU: Verhindert Subpixel-Lücken/weiße Ränder */
        }

        /* Der Text-Container rechts */
        .custom-card-body {
            padding: 1rem 1.25rem; /* Innenabstand für den Text */
            background-color: #ffffff; /* NEU: Weißer Hintergrund hier statt auf .custom-card */
        }

        /* Styling für die obere, graue Textzeile */
        .custom-card-body .text-muted {
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: block; /* Sorgt für korrekten Zeilenumbruch */
            line-height: 1.4;
        }

        /* Styling für die Haupt-Textzeilen (jetzt mit Klasse statt h6) */
.custom-card-body .custom-card-line {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 0; /* Stellt sicher, dass p-Tags keinen oberen Abstand haben */
    margin-bottom: 0;
    line-height: 1.4;
}

/* Die rote Hervorhebung für die untere Zeile (kann gleich bleiben) */
.custom-card-body .text-highlight, .custom-card-line {
    color: #b30000; 
}





.mm-link-cards-outer p.h2 {
padding-bottom: 10px;
color:#ffffff;

}