/* Wrapper */
.wessel-branch-grid {
    display: flex;
    justify-content: center;
    padding: 22px 0;
    background: #ffffff;
}

.wessel-branch-grid__inner {
    max-width: 1200px;
}

/* Grid: 3 Spalten Desktop */
.wessel-branch-grid__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Card-Basis */
.branch-card {
    position: relative;
    display: block;
    padding: 28px 28px 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(0, 17, 40, 0.12);
    text-decoration: none;
    overflow: hidden;
    color: #001945;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.2s ease;
}

/* Grün-Overlay (liegt über Bild, unter Content) */
.branch-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #bfd635;          /* Wessel-Grün */
    opacity: 0;                   /* Standard: unsichtbar */
    z-index: 1;
    transition: opacity 0.25s ease;
}

/* Hintergrundbild-Layer (für Hover) */
.branch-card__bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.branch-card__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Inhaltsebene */
.branch-card__inner {
    position: relative;
    z-index: 2; /* über Bild & Overlay */
}

/* Icon oben links */
.branch-card__icon {
    margin-bottom: 16px;
    position: relative;
    width: 40px;
    height: 40px;
}

.branch-card__icon img {
    position: absolute;
    inset: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
   
}

/* Standard: Base-Icon sichtbar, Hover-Icon unsichtbar */
.branch-card__icon-base {
    opacity: 1;
}




/* Titel */
.branch-card__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
}

/* Text */
.branch-card__text {
    min-height: 90px;
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 18px;
}

/* Entdecken-Link unten */
.branch-card__link {
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.branch-card__link-icon {
    padding-bottom: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #bfd635;
    color: #001945;
    font-size: 12px;
}

/* --- Hover-Effekte --- */
.branch-card:hover {
    /* Hintergrundfarbe kann weiß bleiben, Grün kommt über ::before */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

/* Grün-Overlay stark einblenden */
.branch-card:hover::before {
    opacity: 0.75;    /* dominiert die Optik */
}

/* Hintergrundbild nur sehr dezent durchscheinen lassen */
.branch-card:hover .branch-card__bg {
    opacity: 0.35;    /* vorher 0.75 – jetzt viel schwächer */
}

/* Icon-Transition:
   - Base ausblenden
   - Hover-Icon einblenden und rotieren
*/
.branch-card:hover .branch-card__icon-base {
    opacity: 0;
    transform: rotate(-90deg);
}

.branch-card:hover .branch-card__icon-hover {
    opacity: 1;
    transform: rotate(0deg);
}

/* Falls kein Hover-Icon angegeben:
   rotiere einfach das Base-Icon leicht */
.branch-card:hover .branch-card__icon img:only-child {
    transform: rotate(15deg);
}

/* Responsive: 2 Spalten / 1 Spalte */
@media (max-width: 1024px) {
    .wessel-branch-grid__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .wessel-branch-grid__grid {
        grid-template-columns: 1fr;
    }
}