.gbi-wrap,
.gbi-wrap * {
    box-sizing: border-box;
}

.gbi-wrap {
    /* Logo-Farbwelt: Aubergine + warmes Cremegelb. */
    --gbi-green: #74216f;
    --gbi-green-dark: #5d1759;
    --gbi-green-soft: #fff4bf;
    --gbi-cream: #ffffff;
    --gbi-paper: #ffffff;
    --gbi-ink: #302a30;
    --gbi-muted: #716a71;
    --gbi-status-bg: #fff9df;
    --gbi-status-open: #547a35;
    --gbi-status-closed: #944754;
    --gbi-shadow: none;
    --gbi-max-width: 1080px;
    --gbi-outer-padding: 28px;
    --gbi-panel-padding: 0px;
    --gbi-card-gap: 16px;
    --gbi-card-padding: 24px;
    --gbi-panel-radius: 0px;
    --gbi-card-radius: 12px;
    --gbi-columns-desktop: 3;
    --gbi-columns-tablet: 2;
    width: 100%;
    margin: 0;
    padding: var(--gbi-outer-padding) 18px;
    color: var(--gbi-ink);
    font-family: inherit;
    line-height: 1.55;
}

.gbi-panel {
    width: min(100%, var(--gbi-max-width));
    margin: 0 auto;
    padding: var(--gbi-panel-padding);
    background: var(--gbi-cream);
    border: 0;
    border-radius: var(--gbi-panel-radius);
    box-shadow: var(--gbi-shadow);
}

/* Öffnungsstatus: kompakt, zusammenhängend und ohne auseinandergezogene Grid-Spalten. */
.gbi-live-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 clamp(24px, 3.2vw, 34px);
    padding: 13px 16px;
    background: var(--gbi-status-bg);
    border: 1px solid color-mix(in srgb, var(--gbi-green) 20%, transparent);
    border-left: 4px solid var(--gbi-green);
    border-radius: max(9px, var(--gbi-card-radius));
}

.gbi-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--gbi-muted);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gbi-muted) 10%, transparent);
}

.gbi-live-status--open .gbi-status-dot {
    background: var(--gbi-status-open);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gbi-status-open) 12%, transparent);
}

.gbi-live-status--closed .gbi-status-dot {
    background: var(--gbi-status-closed);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--gbi-status-closed) 11%, transparent);
}

.gbi-live-status--setup {
    border-style: dashed;
    background: #fafafa;
}

.gbi-status-copy {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
}

.gbi-status-kicker {
    color: var(--gbi-green-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.gbi-status-copy strong {
    color: var(--gbi-ink);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.35;
}

.gbi-live-status--open .gbi-status-copy strong { color: var(--gbi-status-open); }
.gbi-live-status--closed .gbi-status-copy strong { color: var(--gbi-status-closed); }

.gbi-status-copy > span:last-child:not(.gbi-status-kicker) {
    color: var(--gbi-muted);
    font-size: 13.5px;
    line-height: 1.4;
}

.gbi-status-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 7px 10px;
    color: var(--gbi-green-dark) !important;
    background: rgba(255,255,255,.65);
    border: 1px solid color-mix(in srgb, var(--gbi-green) 17%, transparent);
    border-radius: 999px;
    text-decoration: none !important;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

.gbi-status-link:hover,
.gbi-status-link:focus-visible {
    color: #fff !important;
    background: var(--gbi-green-dark);
    border-color: var(--gbi-green-dark);
    text-decoration: none !important;
}

.gbi-intro {
    max-width: 760px;
    margin: 0 auto clamp(24px, 3.2vw, 34px);
}

.gbi-intro--center { text-align: center; }
.gbi-intro--left { margin-left: 0; margin-right: 0; text-align: left; }

.gbi-kicker,
.gbi-card-eyebrow {
    display: block;
    margin: 0 0 7px;
    color: var(--gbi-green-dark);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.gbi-intro h2 {
    margin: 0;
    color: var(--gbi-ink);
    font-family: inherit;
    font-size: clamp(27px, 2.8vw, 38px);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.gbi-intro p {
    max-width: 660px;
    margin: 11px auto 0;
    color: var(--gbi-muted);
    font-size: clamp(15px, 1.35vw, 16.5px);
    line-height: 1.65;
}

.gbi-intro--left p { margin-left: 0; margin-right: 0; }

.gbi-grid {
    display: grid;
    grid-template-columns: repeat(var(--gbi-columns-desktop), minmax(0, 1fr));
    gap: var(--gbi-card-gap);
    align-items: stretch;
}

.gbi-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 238px;
    flex-direction: column;
    padding: var(--gbi-card-padding);
    color: var(--gbi-ink);
    background: var(--gbi-paper);
    border: 1px solid color-mix(in srgb, var(--gbi-green) 16%, #d9d5d9);
    border-top: 3px solid var(--gbi-green);
    border-radius: var(--gbi-card-radius);
    box-shadow: 0 5px 18px rgba(55, 33, 54, .045);
}

.gbi-card--style-soft {
    background: color-mix(in srgb, var(--gbi-green-soft) 38%, var(--gbi-paper));
    border-color: color-mix(in srgb, var(--gbi-green) 20%, #e7e1d3);
    border-top-color: var(--gbi-green);
}

/* Hervorhebung bewusst hell: Logo-Creme statt einer schweren dunklen Vollfläche. */
.gbi-card--style-accent {
    color: var(--gbi-ink);
    background: color-mix(in srgb, var(--gbi-green-soft) 72%, #fff);
    border-color: color-mix(in srgb, var(--gbi-green) 28%, #eadfa8);
    border-top-color: var(--gbi-green-dark);
    box-shadow: 0 8px 24px rgba(93, 23, 89, .075);
}

.gbi-card-top {
    display: flex;
    min-height: 36px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.gbi-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--gbi-green-dark);
    background: var(--gbi-green-soft);
    border: 1px solid color-mix(in srgb, var(--gbi-green) 13%, transparent);
    border-radius: max(8px, calc(var(--gbi-card-radius) - 3px));
}

.gbi-card--style-accent .gbi-icon {
    color: var(--gbi-green-dark);
    background: rgba(255,255,255,.72);
    border-color: color-mix(in srgb, var(--gbi-green) 15%, transparent);
}

.gbi-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gbi-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 9px;
    color: #fff8d7;
    background: var(--gbi-green-dark);
    border: 1px solid var(--gbi-green-dark);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.gbi-card--style-accent .gbi-card-eyebrow { color: var(--gbi-green-dark); }

.gbi-card h3 {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: clamp(19px, 1.65vw, 23px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.012em;
}

.gbi-card > p {
    margin: 10px 0 18px;
    color: var(--gbi-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.gbi-card--style-accent > p { color: #5f555f; }

.gbi-card > .gbi-card-note {
    margin: -9px 0 18px;
    color: color-mix(in srgb, var(--gbi-muted) 88%, var(--gbi-green));
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
}

.gbi-card--style-accent > .gbi-card-note {
    color: #766776;
}

.gbi-opening-output {
    margin: -2px 0 16px;
    padding: 9px 11px;
    color: var(--gbi-green-dark);
    background: var(--gbi-green-soft);
    border-radius: max(7px, calc(var(--gbi-card-radius) - 3px));
    font-size: 13.5px;
}

.gbi-opening-output > *:first-child { margin-top: 0 !important; }
.gbi-opening-output > *:last-child { margin-bottom: 0 !important; }

.gbi-button {
    display: inline-flex;
    width: 100%;
    min-height: 41px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 9px 12px;
    color: var(--gbi-green-dark) !important;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--gbi-green) 28%, #e2dce2);
    border-radius: max(7px, calc(var(--gbi-card-radius) - 3px));
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 750;
    line-height: 1.25;
    transition: transform .16s ease, color .16s ease, background-color .16s ease, border-color .16s ease;
}

.gbi-button:hover,
.gbi-button:focus-visible {
    color: #fff !important;
    background: var(--gbi-green-dark);
    border-color: var(--gbi-green-dark);
    transform: translateY(-1px);
}

.gbi-card--style-accent .gbi-button {
    color: #fff8d7 !important;
    background: var(--gbi-green-dark);
    border-color: var(--gbi-green-dark);
}

.gbi-card--style-accent .gbi-button:hover,
.gbi-card--style-accent .gbi-button:focus-visible {
    color: #fff !important;
    background: var(--gbi-green);
    border-color: var(--gbi-green);
}

@supports not (color: color-mix(in srgb, black 10%, transparent)) {
    .gbi-card--style-soft { background: #fffbea; }
    .gbi-card--style-accent { background: var(--gbi-green-soft); }
    .gbi-icon, .gbi-opening-output { background: var(--gbi-green-soft); }
    .gbi-live-status { border-color: #e4d7a4; }
    .gbi-live-status--open .gbi-status-dot { box-shadow: 0 0 0 4px rgba(84, 122, 53, .12); }
    .gbi-live-status--closed .gbi-status-dot { box-shadow: 0 0 0 4px rgba(148, 71, 84, .12); }
}

@media (max-width: 900px) {
    .gbi-grid { grid-template-columns: repeat(var(--gbi-columns-tablet), minmax(0, 1fr)); }
    .gbi-card { min-height: 226px; }
}

@media (max-width: 680px) {
    .gbi-wrap {
        padding-left: 15px;
        padding-right: 15px;
    }

    .gbi-live-status {
        flex-wrap: wrap;
        gap: 9px 11px;
        padding: 12px 13px;
    }

    .gbi-status-copy { flex-basis: calc(100% - 24px); }

    .gbi-status-link {
        margin-left: 21px;
        padding: 5px 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .gbi-status-link:hover,
    .gbi-status-link:focus-visible {
        color: var(--gbi-green) !important;
        background: transparent;
        text-decoration: underline !important;
        text-underline-offset: 3px;
    }

    .gbi-grid { grid-template-columns: 1fr; }
    .gbi-card { min-height: 0; }
    .gbi-button { margin-top: 10px; }
}

@media (max-width: 420px) {
    .gbi-status-copy {
        display: block;
    }

    .gbi-status-kicker,
    .gbi-status-copy strong,
    .gbi-status-copy > span:last-child:not(.gbi-status-kicker) {
        display: block;
    }

    .gbi-status-copy strong { margin-top: 2px; }
    .gbi-status-copy > span:last-child:not(.gbi-status-kicker) { margin-top: 2px; }
    .gbi-intro h2 { font-size: 27px; }
    .gbi-card { padding: max(18px, calc(var(--gbi-card-padding) - 3px)); }
}

/* ========================================================================== 
   v2.4 - robustes Einbettungs-/Responsive-Raster
   --------------------------------------------------------------------------
   Der Infobereich wird in ein fremdes Theme eingebettet. Einige Themes setzen
   Clearfix-Pseudoelemente, Floats oder feste Breiten auf Grid-/Article-Elemente.
   Die folgenden Regeln kapseln ausschließlich die Layout-Geometrie des Plugins,
   ohne die Typografie des Themes zu überschreiben.
   ========================================================================== */

.gbi-wrap {
    --gbi-card-min: 250px;
    overflow: clip;
}

.gbi-wrap .gbi-panel {
    container-name: gbi-panel;
    container-type: inline-size;
}

/* Fremde Clearfix-Pseudoelemente dürfen niemals zu Grid-Items werden. */
.gbi-wrap .gbi-grid::before,
.gbi-wrap .gbi-grid::after {
    content: none !important;
    display: none !important;
}

/* Layout-Reset gegen Theme-Regeln für article / grid / columns. */
.gbi-wrap .gbi-grid {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    gap: var(--gbi-card-gap) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}

.gbi-wrap .gbi-grid > .gbi-card {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    place-self: stretch !important;
}

/*
 * Automatik ist der Standard: Entscheidend ist die Breite des eingebetteten
 * Plugin-Bereichs, nicht die Monitorbreite. Dadurch funktioniert der Block
 * auch in schmaleren Theme-Containern auf einem großen Bildschirm korrekt.
 */
.gbi-wrap[data-gbi-layout="auto"] .gbi-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gbi-card-min)), 1fr)) !important;
}

/* Manuelles Raster bleibt als Expertenoption erhalten. */
.gbi-wrap[data-gbi-layout="manual"] .gbi-grid {
    grid-template-columns: repeat(var(--gbi-columns-desktop), minmax(0, 1fr)) !important;
}

/* Inhaltsbereiche sollen nicht durch globale Theme-Regeln aus dem Takt geraten. */
.gbi-wrap .gbi-card-top,
.gbi-wrap .gbi-status-copy {
    width: auto !important;
    max-width: none !important;
    float: none !important;
}

.gbi-wrap .gbi-card h3,
.gbi-wrap .gbi-card p,
.gbi-wrap .gbi-card-eyebrow,
.gbi-wrap .gbi-kicker {
    float: none !important;
    clear: none !important;
}

/* Container Queries reagieren auf die echte Breite des Blocks. */
@container gbi-panel (max-width: 760px) {
    .gbi-wrap[data-gbi-layout="manual"] .gbi-grid {
        grid-template-columns: repeat(var(--gbi-columns-tablet), minmax(0, 1fr)) !important;
    }

    .gbi-wrap .gbi-live-status {
        flex-wrap: wrap;
    }
}

@container gbi-panel (max-width: 620px) {
    .gbi-wrap .gbi-live-status {
        gap: 9px 11px;
        padding: 12px 13px;
    }

    .gbi-wrap .gbi-status-copy {
        flex-basis: calc(100% - 24px);
    }

    .gbi-wrap .gbi-status-link {
        margin-left: 21px;
        padding: 5px 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .gbi-wrap .gbi-card {
        min-height: 0;
    }
}

@container gbi-panel (max-width: 430px) {
    .gbi-wrap .gbi-status-copy {
        display: block;
    }

    .gbi-wrap .gbi-status-kicker,
    .gbi-wrap .gbi-status-copy strong,
    .gbi-wrap .gbi-status-copy > span:last-child:not(.gbi-status-kicker) {
        display: block;
    }

    .gbi-wrap .gbi-status-copy strong,
    .gbi-wrap .gbi-status-copy > span:last-child:not(.gbi-status-kicker) {
        margin-top: 2px;
    }
}

/* Fallback für ältere Browser ohne Container Queries. */
@media (max-width: 900px) {
    .gbi-wrap[data-gbi-layout="manual"] .gbi-grid {
        grid-template-columns: repeat(var(--gbi-columns-tablet), minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .gbi-wrap[data-gbi-layout="manual"] .gbi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* v2.4.1: Im Automatikmodus übernimmt Flexbox die Platzierung. Damit wird
   eine unvollständige letzte Reihe automatisch zentriert (z. B. 2 + 1 Karten),
   statt optisch nach links zu kippen. */
.gbi-wrap[data-gbi-layout="auto"] .gbi-grid {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
}

.gbi-wrap[data-gbi-layout="auto"] .gbi-grid > .gbi-card {
    flex: 1 1 var(--gbi-card-min) !important;
    max-width: 360px !important;
}

/* Unterhalb dieser echten Containerbreite ist eine einzelne Spalte ruhiger
   und besser lesbar als zwei sehr schmale Karten. */
@container gbi-panel (max-width: 700px) {
    .gbi-wrap[data-gbi-layout="auto"] .gbi-grid > .gbi-card {
        flex-basis: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 700px) {
    .gbi-wrap[data-gbi-layout="auto"] .gbi-grid > .gbi-card {
        flex-basis: 100% !important;
        max-width: none !important;
    }
}

/* Flex-Zeilen bekommen identische Kartenhöhen. */
.gbi-wrap[data-gbi-layout="auto"] .gbi-grid > .gbi-card {
    height: auto !important;
    align-self: stretch !important;
}

/* ========================================================================== 
   v2.5 - ausklappbarer Sortimentsueberblick
   ========================================================================== */
.gbi-wrap .gbi-assortment {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: clamp(18px, 2.4vw, 26px) 0 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    overflow: hidden;
    color: var(--gbi-ink);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--gbi-green) 20%, #ded8de);
    border-radius: var(--gbi-card-radius);
    box-shadow: 0 5px 18px rgba(55, 33, 54, .035);
}

.gbi-wrap .gbi-assortment > summary {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 17px 19px !important;
    float: none !important;
    clear: both !important;
    list-style: none !important;
    cursor: pointer;
    color: var(--gbi-ink) !important;
    background: color-mix(in srgb, var(--gbi-green-soft) 36%, #fff);
    border: 0 !important;
    border-left: 4px solid var(--gbi-green) !important;
    border-radius: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
}

.gbi-wrap .gbi-assortment > summary::-webkit-details-marker {
    display: none !important;
}

.gbi-wrap .gbi-assortment > summary::before,
.gbi-wrap .gbi-assortment > summary::after {
    content: none !important;
    display: none !important;
}

.gbi-wrap .gbi-assortment > summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gbi-green) 24%, transparent);
    outline-offset: -3px;
}

.gbi-wrap .gbi-assortment-icon {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: var(--gbi-green-dark) !important;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--gbi-green) 16%, #eadfa8);
    border-radius: 10px;
}

.gbi-wrap .gbi-assortment-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.gbi-wrap .gbi-assortment-summary-copy {
    display: block !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.gbi-wrap .gbi-assortment-kicker {
    display: block !important;
    margin: 0 0 2px !important;
    color: var(--gbi-green-dark) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
}

.gbi-wrap .gbi-assortment-summary-copy > strong {
    display: block !important;
    margin: 0 !important;
    color: var(--gbi-ink) !important;
    font-family: inherit !important;
    font-size: clamp(17px, 1.55vw, 20px) !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    letter-spacing: -.01em !important;
}

.gbi-wrap .gbi-assortment-lead {
    display: block !important;
    margin: 3px 0 0 !important;
    color: var(--gbi-muted) !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

.gbi-wrap .gbi-assortment-action {
    display: inline-flex !important;
    min-height: 36px !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 0 auto !important;
    padding: 8px 12px !important;
    color: var(--gbi-green-dark) !important;
    background: rgba(255,255,255,.78);
    border: 1px solid color-mix(in srgb, var(--gbi-green) 24%, #e2dce2);
    border-radius: 999px;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.gbi-wrap .gbi-assortment-action-close {
    display: none !important;
}

.gbi-wrap .gbi-assortment[open] .gbi-assortment-action-open {
    display: none !important;
}

.gbi-wrap .gbi-assortment[open] .gbi-assortment-action-close {
    display: inline !important;
}

.gbi-wrap .gbi-assortment-chevron {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    flex: 0 0 8px !important;
    margin: -3px 1px 0 0 !important;
    border-right: 1.8px solid currentColor !important;
    border-bottom: 1.8px solid currentColor !important;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform .18s ease;
}

.gbi-wrap .gbi-assortment[open] .gbi-assortment-chevron {
    margin-top: 3px !important;
    transform: rotate(225deg);
}

.gbi-wrap .gbi-assortment-body {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: clamp(20px, 2.5vw, 28px) !important;
    float: none !important;
    clear: both !important;
    background: color-mix(in srgb, var(--gbi-green-soft) 16%, #fff);
    border-top: 1px solid color-mix(in srgb, var(--gbi-green) 13%, #e7e1e7);
}

.gbi-wrap .gbi-assortment-grid {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)) !important;
    gap: 26px 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.gbi-wrap .gbi-assortment-grid::before,
.gbi-wrap .gbi-assortment-grid::after {
    content: none !important;
    display: none !important;
}

.gbi-wrap .gbi-assortment-group {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.gbi-wrap .gbi-assortment-group h3 {
    display: block !important;
    margin: 0 0 10px !important;
    padding: 0 0 8px !important;
    color: var(--gbi-green-dark) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: .005em !important;
    border-bottom: 2px solid color-mix(in srgb, var(--gbi-green-soft) 88%, #fff) !important;
}

.gbi-wrap .gbi-assortment-group ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.gbi-wrap .gbi-assortment-group li {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 4px 0 4px 15px !important;
    color: var(--gbi-muted) !important;
    font-size: 13.75px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    list-style: none !important;
}

.gbi-wrap .gbi-assortment-group li::before {
    content: '' !important;
    position: absolute !important;
    top: .79em !important;
    left: 1px !important;
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    margin: 0 !important;
    background: var(--gbi-green) !important;
    border-radius: 50% !important;
}

.gbi-wrap .gbi-assortment-note {
    display: block !important;
    margin: 22px 0 0 !important;
    padding: 13px 15px !important;
    color: var(--gbi-muted) !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid color-mix(in srgb, var(--gbi-green) 10%, #e7e1e7) !important;
    border-radius: 9px !important;
    font-size: 12.75px !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

@supports not (color: color-mix(in srgb, black 10%, transparent)) {
    .gbi-wrap .gbi-assortment { border-color: #ded2dc; }
    .gbi-wrap .gbi-assortment > summary { background: #fffbea; }
    .gbi-wrap .gbi-assortment-body { background: #fffdf4; }
}

@container gbi-panel (max-width: 650px) {
    .gbi-wrap .gbi-assortment > summary {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 15px !important;
    }

    .gbi-wrap .gbi-assortment-summary-copy {
        flex-basis: calc(100% - 58px) !important;
    }

    .gbi-wrap .gbi-assortment-action {
        margin-left: 56px !important;
    }

    .gbi-wrap .gbi-assortment-body {
        padding: 20px 17px !important;
    }

    .gbi-wrap .gbi-assortment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 23px 20px !important;
    }
}

@container gbi-panel (max-width: 440px) {
    .gbi-wrap .gbi-assortment-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .gbi-wrap .gbi-assortment-action {
        width: calc(100% - 56px) !important;
        justify-content: space-between !important;
    }
}

@media (max-width: 650px) {
    .gbi-wrap .gbi-assortment > summary {
        flex-wrap: wrap !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gbi-wrap .gbi-assortment-chevron {
        transition: none;
    }
}

/* ========================================================================== 
   v2.6 - vorbereiteter Genossenschafts-Hinweis (nur bei expliziter Aktivierung)
   ========================================================================== */
.gbi-wrap .gbi-cooperative {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-flow: row wrap !important;
    align-items: stretch !important;
    gap: clamp(18px, 2.4vw, 30px) !important;
    margin: clamp(18px, 2.4vw, 26px) 0 0 !important;
    padding: clamp(22px, 3vw, 32px) !important;
    float: none !important;
    clear: both !important;
    color: var(--gbi-ink) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--gbi-green-soft) 52%, #fff), #fff 64%) !important;
    border: 1px solid color-mix(in srgb, var(--gbi-green) 22%, #ddd4dd) !important;
    border-top: 3px solid var(--gbi-green) !important;
    border-radius: var(--gbi-card-radius) !important;
    box-shadow: 0 7px 24px rgba(93, 23, 89, .045) !important;
}

.gbi-wrap .gbi-cooperative::before,
.gbi-wrap .gbi-cooperative::after {
    content: none !important;
    display: none !important;
}

.gbi-wrap .gbi-cooperative-copy {
    display: block !important;
    min-width: 0 !important;
    flex: 1 1 540px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.gbi-wrap .gbi-cooperative-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    margin: 0 0 13px !important;
    padding: 0 !important;
}

.gbi-wrap .gbi-cooperative-icon {
    display: inline-flex !important;
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1px 0 0 !important;
    color: var(--gbi-green-dark) !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid color-mix(in srgb, var(--gbi-green) 18%, #eadfa8) !important;
    border-radius: 10px !important;
}

.gbi-wrap .gbi-cooperative-icon svg {
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.gbi-wrap .gbi-cooperative-kicker {
    display: block !important;
    margin: 0 0 5px !important;
    color: var(--gbi-green-dark) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
}

.gbi-wrap .gbi-cooperative h3 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--gbi-ink) !important;
    font-family: inherit !important;
    font-size: clamp(20px, 2vw, 27px) !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
    letter-spacing: -.018em !important;
}

.gbi-wrap .gbi-cooperative-text {
    display: block !important;
    max-width: 720px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--gbi-muted) !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

.gbi-wrap .gbi-cooperative-action {
    display: flex !important;
    min-width: min(100%, 270px) !important;
    flex: 0 1 310px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: clamp(16px, 2vw, 20px) !important;
    float: none !important;
    color: var(--gbi-ink) !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid color-mix(in srgb, var(--gbi-green) 15%, #e6dde6) !important;
    border-radius: max(9px, calc(var(--gbi-card-radius) - 2px)) !important;
}

.gbi-wrap .gbi-cooperative-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    color: #fff !important;
    background: var(--gbi-green-dark) !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

.gbi-wrap .gbi-cooperative-action p {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--gbi-muted) !important;
    font-size: 12.75px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.gbi-wrap .gbi-cooperative-button {
    display: inline-flex !important;
    width: 100% !important;
    min-height: 40px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 2px 0 0 !important;
    padding: 10px 13px !important;
    color: #fff !important;
    background: var(--gbi-green-dark) !important;
    border: 1px solid var(--gbi-green-dark) !important;
    border-radius: 8px !important;
    font-size: 12.75px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

.gbi-wrap .gbi-cooperative-button:hover,
.gbi-wrap .gbi-cooperative-button:focus-visible {
    color: #fff !important;
    background: var(--gbi-green) !important;
    border-color: var(--gbi-green) !important;
    text-decoration: none !important;
}

@supports not (color: color-mix(in srgb, black 10%, transparent)) {
    .gbi-wrap .gbi-cooperative {
        background: #fffbea !important;
        border-color: #d8bdd5 !important;
    }
    .gbi-wrap .gbi-cooperative-action {
        border-color: #e7dce6 !important;
    }
}

@container gbi-panel (max-width: 780px) {
    .gbi-wrap .gbi-cooperative-copy,
    .gbi-wrap .gbi-cooperative-action {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: none !important;
    }
}

@media (max-width: 780px) {
    .gbi-wrap .gbi-cooperative-copy,
    .gbi-wrap .gbi-cooperative-action {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: none !important;
    }
}

@container gbi-panel (max-width: 440px) {
    .gbi-wrap .gbi-cooperative {
        padding: 18px !important;
    }
    .gbi-wrap .gbi-cooperative-heading {
        gap: 11px !important;
    }
    .gbi-wrap .gbi-cooperative-icon {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }
    .gbi-wrap .gbi-cooperative h3 {
        font-size: 20px !important;
    }
}

/* ========================================================================== 
   v2.6.1 - Icon-Ausrichtung gegen Theme-CSS absichern
   ========================================================================== */
.gbi-wrap .gbi-card-top {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    text-align: left !important;
}

.gbi-wrap .gbi-card-top > .gbi-icon {
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex: 0 0 38px !important;
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
}

.gbi-wrap .gbi-card-top > .gbi-badge {
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin: 0 0 0 auto !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
}

.gbi-wrap .gbi-card-top > span:empty {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Auch der Sortiment-Header bleibt links sauber an derselben Innenkante. */
.gbi-wrap .gbi-assortment-icon {
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
}

/* ========================================================================== 
   v2.6.2 - Kartenkopf absolut verankern
   Verhindert, dass Theme-Clearfix/Pseudoelemente oder fremde Flex-Regeln
   einzelne Icons in Karten ohne Badge horizontal zentrieren.
   ========================================================================== */
.gbi-wrap .gbi-card .gbi-card-top {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    inset: auto !important;
    transform: none !important;
    text-align: left !important;
}

.gbi-wrap .gbi-card .gbi-card-top::before,
.gbi-wrap .gbi-card .gbi-card-top::after {
    content: none !important;
    display: none !important;
}

.gbi-wrap .gbi-card .gbi-card-top > .gbi-icon {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

.gbi-wrap .gbi-card .gbi-card-top > .gbi-badge {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
}