/* ==================================================================================
   BABYLUGG - WARENKORB
   ==================================================================================
   Nutzt die bestehenden Design-Tokens (--bl-*) aus dem Haupt-Stylesheet. Alle
   Klassen sind mit .blwk- praefixiert, damit sie sich nicht mit bestehendem CSS
   ins Gehege kommen koennen.
   ================================================================================== */

/* --- Schwebender Warenkorb-Knopf ------------------------------------------------ */

.blwk-knopf {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9000;

    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.875rem 1.25rem;
    border: none;
    border-radius: var(--bl-radius-full, 9999px);

    background: var(--bl-primary, #2A9F87);
    color: #fff;
    font-family: var(--bl-font-family-base, sans-serif);
    font-size: var(--bl-font-size-base, 1rem);
    font-weight: var(--bl-font-weight-semibold, 600);

    box-shadow: var(--bl-shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
    cursor: pointer;

    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.blwk-knopf:hover { transform: translateY(-2px); box-shadow: var(--bl-shadow-xl); }
.blwk-knopf:focus-visible { outline: 3px solid var(--bl-secondary, #591670); outline-offset: 2px; }

/* Ohne Inhalt bleibt der Knopf unsichtbar und nicht bedienbar */
.blwk-knopf[hidden] { display: none; }

.blwk-knopf__zahl {
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .375rem;
    border-radius: var(--bl-radius-full, 9999px);
    background: #fff;
    color: var(--bl-primary, #2A9F87);
    font-size: var(--bl-font-size-sm, .875rem);
    font-weight: var(--bl-font-weight-bold, 700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Abdunklung hinter der Schublade --------------------------------------------- */

.blwk-hintergrund {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.blwk-hintergrund.blwk-offen { opacity: 1; pointer-events: auto; }

/* --- Schublade ------------------------------------------------------------------- */

.blwk-schublade {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9600;

    width: min(28rem, 100vw);
    height: 100dvh;

    display: flex;
    flex-direction: column;

    background: var(--bl-bg-primary, #fff);
    box-shadow: var(--bl-shadow-xl);

    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);

    font-family: var(--bl-font-family-base, sans-serif);
    color: var(--bl-text-primary, #000);
}

.blwk-schublade.blwk-offen { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
    .blwk-schublade, .blwk-hintergrund, .blwk-knopf { transition: none; }
}

.blwk-kopf {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.blwk-kopf h2 {
    margin: 0;
    font-family: var(--bl-font-family-heading, sans-serif);
    font-size: var(--bl-font-size-xl, 1.25rem);
    font-weight: var(--bl-font-weight-bold, 700);
}

.blwk-schliessen {
    border: none;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    padding: .25rem .5rem;
    cursor: pointer;
    color: var(--bl-text-secondary, #424242);
    border-radius: var(--bl-radius-sm);
}
.blwk-schliessen:hover { background: rgba(0, 0, 0, .06); }

.blwk-inhalt {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}

/* --- Mietzeitraum ---------------------------------------------------------------- */

.blwk-zeitraum {
    background: var(--bl-bg-tertiary, #FAFAFA);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--bl-radius-md, .5rem);
    padding: .875rem 1rem;
    margin-bottom: 1rem;
}

.blwk-zeitraum__titel {
    font-size: var(--bl-font-size-xs, .75rem);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bl-text-tertiary, #757575);
    margin-bottom: .25rem;
}

.blwk-zeitraum__wert {
    font-weight: var(--bl-font-weight-semibold, 600);
}

.blwk-zeitraum__tage {
    color: var(--bl-text-secondary, #424242);
    font-size: var(--bl-font-size-sm, .875rem);
}

/* --- Positionen ------------------------------------------------------------------ */

.blwk-liste { list-style: none; margin: 0; padding: 0; }

.blwk-position {
    display: grid;
    grid-template-columns: 4rem 1fr auto;
    gap: .75rem;
    align-items: start;
    padding: .875rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.blwk-position__bild {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--bl-radius-md, .5rem);
    background: var(--bl-bg-tertiary, #FAFAFA);
}

.blwk-position__name {
    font-weight: var(--bl-font-weight-semibold, 600);
    margin: 0 0 .2rem;
    line-height: 1.3;
}

.blwk-position__detail {
    font-size: var(--bl-font-size-sm, .875rem);
    color: var(--bl-text-secondary, #424242);
    margin: 0;
}

.blwk-position__preis {
    text-align: right;
    font-weight: var(--bl-font-weight-semibold, 600);
    white-space: nowrap;
}

.blwk-position__entfernen {
    display: block;
    margin-top: .35rem;
    border: none;
    background: none;
    padding: 0;
    font-size: var(--bl-font-size-sm, .875rem);
    color: var(--bl-error, #e74c3c);
    cursor: pointer;
    text-decoration: underline;
}

.blwk-position--nicht-verfuegbar { opacity: .6; }

.blwk-position__warnung {
    grid-column: 1 / -1;
    margin: .4rem 0 0;
    padding: .5rem .75rem;
    border-radius: var(--bl-radius-sm, .375rem);
    background: rgba(231, 76, 60, .1);
    color: var(--bl-error-dark, #c0392b);
    font-size: var(--bl-font-size-sm, .875rem);
}

/* --- Zubehörvorschläge ----------------------------------------------------------- */

.blwk-zubehoer { margin-top: 1.5rem; }

.blwk-zubehoer__titel {
    font-family: var(--bl-font-family-heading, sans-serif);
    font-size: var(--bl-font-size-lg, 1.125rem);
    font-weight: var(--bl-font-weight-bold, 700);
    margin: 0 0 .25rem;
}

.blwk-zubehoer__untertitel {
    font-size: var(--bl-font-size-sm, .875rem);
    color: var(--bl-text-secondary, #424242);
    margin: 0 0 .75rem;
}

.blwk-zubehoer__liste {
    display: grid;
    gap: .625rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blwk-vorschlag {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .625rem;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: var(--bl-radius-md, .5rem);
    background: var(--bl-bg-primary, #fff);
}

.blwk-vorschlag__bild {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--bl-radius-sm, .375rem);
    background: var(--bl-bg-tertiary, #FAFAFA);
}

.blwk-vorschlag__name {
    font-size: var(--bl-font-size-sm, .875rem);
    font-weight: var(--bl-font-weight-semibold, 600);
    margin: 0;
    line-height: 1.3;
}

.blwk-vorschlag__preis {
    font-size: var(--bl-font-size-xs, .75rem);
    color: var(--bl-text-tertiary, #757575);
    margin: 0;
}

.blwk-vorschlag__hinzu {
    border: 1px solid var(--bl-primary, #2A9F87);
    background: transparent;
    color: var(--bl-primary, #2A9F87);
    border-radius: var(--bl-radius-full, 9999px);
    padding: .375rem .875rem;
    font-size: var(--bl-font-size-sm, .875rem);
    font-weight: var(--bl-font-weight-semibold, 600);
    cursor: pointer;
    white-space: nowrap;
}

.blwk-vorschlag__hinzu:hover { background: var(--bl-primary, #2A9F87); color: #fff; }

/* --- Fußbereich mit Summen ------------------------------------------------------- */

.blwk-fuss {
    flex: 0 0 auto;
    border-top: 1px solid rgba(0, 0, 0, .1);
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--bl-bg-primary, #fff);
}

.blwk-summe {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--bl-font-size-sm, .875rem);
    color: var(--bl-text-secondary, #424242);
    margin-bottom: .35rem;
}

.blwk-summe--rabatt { color: var(--bl-success, #27ae60); }

.blwk-summe--gesamt {
    margin-top: .625rem;
    padding-top: .625rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    font-size: var(--bl-font-size-lg, 1.125rem);
    font-weight: var(--bl-font-weight-bold, 700);
    color: var(--bl-text-primary, #000);
}

.blwk-kaution-hinweis {
    font-size: var(--bl-font-size-xs, .75rem);
    color: var(--bl-text-tertiary, #757575);
    margin: .35rem 0 .75rem;
}

.blwk-weiter {
    width: 100%;
    padding: .875rem 1rem;
    border: none;
    border-radius: var(--bl-radius-md, .5rem);
    background: var(--bl-primary, #2A9F87);
    color: #fff;
    font-family: var(--bl-font-family-base, sans-serif);
    font-size: var(--bl-font-size-base, 1rem);
    font-weight: var(--bl-font-weight-bold, 700);
    cursor: pointer;
}

.blwk-weiter:hover:not(:disabled) { background: var(--bl-primary-dark, #228973); }
.blwk-weiter:disabled { opacity: .5; cursor: not-allowed; }

/* --- Leerzustand und Hinweise ---------------------------------------------------- */

.blwk-leer {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bl-text-secondary, #424242);
}

.blwk-leer__symbol { font-size: 3rem; margin-bottom: .75rem; }

.blwk-hinweis {
    padding: .75rem 1rem;
    border-radius: var(--bl-radius-md, .5rem);
    background: rgba(231, 76, 60, .1);
    color: var(--bl-error-dark, #c0392b);
    font-size: var(--bl-font-size-sm, .875rem);
    margin-bottom: .75rem;
}

.blwk-laedt {
    text-align: center;
    padding: 1.5rem;
    color: var(--bl-text-tertiary, #757575);
    font-size: var(--bl-font-size-sm, .875rem);
}

/* --- Kurze Rückmeldung beim Hinzufügen ------------------------------------------- */

.blwk-toast {
    position: fixed;
    left: 50%;
    bottom: 5.5rem;
    transform: translateX(-50%) translateY(1rem);
    z-index: 9700;

    padding: .75rem 1.25rem;
    border-radius: var(--bl-radius-full, 9999px);
    background: var(--bl-secondary, #591670);
    color: #fff;
    font-size: var(--bl-font-size-sm, .875rem);
    font-weight: var(--bl-font-weight-semibold, 600);
    box-shadow: var(--bl-shadow-lg);

    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.blwk-toast.blwk-sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==================================================================================
   KNÖPFE AUF PRODUKTKACHELN UND IM PRODUKT-MODAL
   ==================================================================================
   Orientiert sich am bestehenden Design: Pillenform (Radius 24px), Grünton der
   Seite, weiche Schatten mit farbigem Anteil.
   ================================================================================== */

/* --- Knopf auf der Produktkachel ------------------------------------------------- */

.blwk-karten-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: .75rem;
    padding: 11px 18px;

    border: 2px solid var(--primary-color, #2A9F87);
    border-radius: 24px;
    background: transparent;
    color: var(--primary-color, #2A9F87);

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;

    cursor: pointer;
    transition: background-color .2s cubic-bezier(.4, 0, .2, 1),
                color .2s cubic-bezier(.4, 0, .2, 1),
                box-shadow .2s cubic-bezier(.4, 0, .2, 1),
                transform .2s cubic-bezier(.4, 0, .2, 1);
}

.blwk-karten-knopf:hover {
    background: var(--primary-color, #2A9F87);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 159, 135, .28),
                0 2px 4px rgba(42, 159, 135, .16);
}

.blwk-karten-knopf:focus-visible {
    outline: 3px solid var(--secondary-color, #591670);
    outline-offset: 2px;
}

.blwk-karten-knopf:active { transform: translateY(0); }

/* Bereits im Warenkorb: gefüllt, ruhiger Zustand */
.blwk-karten-knopf.blwk-drin {
    background: rgba(42, 159, 135, .12);
    border-color: rgba(42, 159, 135, .35);
    color: var(--primary-color, #2A9F87);
    cursor: default;
}
.blwk-karten-knopf.blwk-drin:hover {
    background: rgba(42, 159, 135, .12);
    color: var(--primary-color, #2A9F87);
    transform: none;
    box-shadow: none;
}

/* Zubehörartikel: Warenkorb ist hier die Hauptaktion, deshalb gefüllt */
.blwk-karten-knopf.blwk-haupt {
    background: var(--primary-color, #2A9F87);
    color: #fff;
    box-shadow: 0 2px 8px rgba(42, 159, 135, .25),
                0 1px 3px rgba(42, 159, 135, .15);
}
.blwk-karten-knopf.blwk-haupt:hover { background: #228973; }

/* --- Knopf im Produkt-Modal ------------------------------------------------------ */

.blwk-modal-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 16px 32px;

    border: 2px solid var(--primary-color, #2A9F87);
    border-radius: 24px;
    background: #fff;
    color: var(--primary-color, #2A9F87);

    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    max-width: 100%;
    box-sizing: border-box;

    cursor: pointer;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

.blwk-modal-knopf:hover {
    background: var(--primary-color, #2A9F87);
    color: #fff;
    box-shadow: 0 4px 14px rgba(42, 159, 135, .3);
}

.blwk-modal-knopf.blwk-drin {
    background: rgba(42, 159, 135, .12);
    border-color: rgba(42, 159, 135, .35);
    cursor: default;
}
.blwk-modal-knopf.blwk-drin:hover {
    background: rgba(42, 159, 135, .12);
    color: var(--primary-color, #2A9F87);
    box-shadow: none;
}

/* ==================================================================================
   "MACHE DIE MIETE KOMPLETT" IM PRODUKT-MODAL
   ================================================================================== */

.blwk-komplett {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #F1F3F4;
}

.blwk-komplett[hidden] { display: none; }

.blwk-komplett__kopf {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.blwk-komplett__titel {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-color, #591670);
}

.blwk-komplett__untertitel {
    margin: 0 0 16px;
    font-size: 14px;
    color: #757575;
}

.blwk-komplett__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blwk-komplett__karte {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #F1F3F4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1),
                transform .3s cubic-bezier(.4, 0, .2, 1);
}

.blwk-komplett__karte:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .08);
}

.blwk-komplett__bild {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #FAFAFA;
    display: block;
}

.blwk-komplett__text {
    padding: 12px 12px 0;
    flex: 1 1 auto;
}

.blwk-komplett__name {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #000;
}

.blwk-komplett__preis {
    margin: 0;
    font-size: 14px;
    color: var(--primary-color, #2A9F87);
    font-weight: 600;
}

.blwk-komplett__knopf {
    margin: 10px 12px 12px;
    padding: 9px 14px;
    border: 2px solid var(--primary-color, #2A9F87);
    border-radius: 24px;
    background: transparent;
    color: var(--primary-color, #2A9F87);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

.blwk-komplett__knopf:hover { background: var(--primary-color, #2A9F87); color: #fff; }

.blwk-komplett__knopf.blwk-drin {
    background: rgba(42, 159, 135, .12);
    border-color: rgba(42, 159, 135, .35);
    cursor: default;
}
.blwk-komplett__knopf.blwk-drin:hover {
    background: rgba(42, 159, 135, .12);
    color: var(--primary-color, #2A9F87);
}

@media (max-width: 480px) {
    .blwk-komplett__liste { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .blwk-komplett__titel { font-size: 18px; }
}

@media (max-width: 480px) {
    .blwk-schublade { width: 100vw; }
    .blwk-knopf { right: 1rem; bottom: 1rem; padding: .75rem 1rem; }
}

/* --- Formular-Label Kontrast ---------------------------------------------------- */
#blwkKasse label,
.blwk-schublade label {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ==================================================================================
   ZEITRAUM- UND ZEITFENSTER-FELDER IM WARENKORB
   ==================================================================================
   Diese Felder standen zuvor mit Inline-Angaben im JavaScript und ragten auf dem
   Handy rechts ueber den tuerkisen Kasten hinaus.

   Ursache: width: 100% zusammen mit Innenabstand und Rahmen - auf der
   Hauptseite ist box-sizing NICHT global auf border-box gesetzt. Die
   tatsaechliche Breite war damit 100% plus rund 20px. Zusaetzlich haben
   Raster-Elemente von sich aus min-width: auto und koennen deshalb nicht unter
   ihre Inhaltsbreite schrumpfen - Datumsfelder haben auf dem Handy eine recht
   grosse Eigenbreite.

   Beides ist hier geloest: border-box fuer die Felder, minmax(0, 1fr) fuer die
   Spalten und min-width: 0 fuer die Zellen.
   ================================================================================== */

.blwk-zeitraum__raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.blwk-zeitraum__feld {
    min-width: 0;   /* erlaubt das Schrumpfen unter die Inhaltsbreite */
}

.blwk-zeitraum__feld label {
    display: block;
    margin-bottom: .25rem;
    font-size: .82rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blwk-zeitraum__feld input[type="date"],
.blwk-zeitraum__feld select {
    box-sizing: border-box;   /* ohne dies laufen die Felder ueber den Rand */
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;

    min-height: 42px;
    padding: .5rem .6rem;
    border: none;
    border-radius: 8px;

    background: #ffffff;
    color: #111111;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;

    /* Verhindert, dass iOS das Feld beim Antippen heranzoomt, und nimmt den
       Datumsfeldern ihre uebergrosse Eigenbreite. */
    -webkit-appearance: none;
    appearance: none;
}

.blwk-zeitraum__feld select {
    /* Eigener Pfeil, da appearance: none den Standardpfeil entfernt */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;

    /* Knapper gesetzt, damit "10:00 - 11:00 Uhr" auch in einer schmalen Spalte
       vollstaendig lesbar bleibt und nicht abgeschnitten wird. */
    padding-left: .5rem;
    padding-right: 1.35rem;
    font-size: .82rem;
    letter-spacing: -.01em;
}

.blwk-zeitraum__fehler {
    margin: .5rem 0 0;
    font-size: .875rem;
    font-weight: 700;
    color: #ffebee;
}

.blwk-zeitraum__fehler:empty {
    display: none;
}

/* Auf sehr schmalen Geraeten untereinander statt gequetscht nebeneinander */
@media (max-width: 340px) {
    .blwk-zeitraum__raster {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ==================================================================================
   WAAGERECHTES UEBERLAUFEN DER FENSTER VERHINDERN
   ==================================================================================
   Symptome auf dem Handy: Das Produktfenster sass oben nicht mittig, weiter
   unten (bei den Empfehlungen) dagegen schon, und oben war nur die LINKE Ecke
   abgerundet.

   Beides ist dasselbe Problem: Ein Kind lief waagerecht ueber die Breite hinaus.
   Dadurch wurde der Scrollbereich breiter als der Bildschirm, das Fenster
   erschien nach links verschoben, und seine rechte Ecke lag ausserhalb des
   sichtbaren Bereichs - deshalb wirkte nur links abgerundet.

   Ursache sind wieder Raster- und Flex-Elemente, die von sich aus min-width:
   auto haben und nicht unter ihre Inhaltsbreite schrumpfen: lange Produktnamen,
   Bildunterschriften, die Empfehlungskarten.
   ================================================================================== */

.modal {
    overflow-x: hidden;
}

.modal-content {
    max-width: 100%;
    overflow-x: hidden;
}

/* Raster- und Flex-Kinder duerfen schrumpfen */
.product-detail-layout,
.product-detail-layout > *,
.product-detail-info,
.modal-buttons > *,
.recommendations-grid,
.recommendations-grid > *,
.blwk-komplett__liste,
.blwk-komplett__liste > * {
    min-width: 0;
}

/* Lange Woerter umbrechen statt die Breite zu sprengen */
.product-detail-info h2,
.product-detail-info p,
.recommendation-details h4,
.blwk-komplett__name {
    overflow-wrap: anywhere;
}

/* Bilder nie breiter als ihr Behaelter */
.modal-content img {
    max-width: 100%;
    height: auto;
}

/* Empfehlungen: mitwachsendes Raster statt fester Breiten */
.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 12px;
}

@media (max-width: 768px) {
    .recommendations-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
        gap: 10px;
    }
}