/* =========================================================================
 * produkte-masonry.css — Variante für /produkte mit UIkit-Masonry-Grid
 *   - basiert inhaltlich auf produkte.css
 *   - liefert zusätzlich die Masonry-/Skeleton-spezifischen Regeln
 *   - ersetzt UIkit's padding-/negative-margin-Gutter durch echtes
 *     flex-`gap`, damit kein Padding INNERHALB der Karten als weißer
 *     "linker Rand" sichtbar wird
 * ========================================================================= */

.filters__item {
    font-family: MarkPro, Montserrat, sans-serif;
    color: var(--darkgrey);
    text-transform: none;
}

.category .text {
    color: #999393;
}

@media (max-width: 1200px) {
    .wrapper__base {
        max-width: 95%;
    }
}

@media (min-width: 1800px) {
    .wrapper__base {
        max-width: 80%;
    }

    .fadecard__item {
        width: calc(25% - 2em);
    }

    .fadecard__cols > * {
        width: calc(25% - 2em);
    }
}

.content__intro {
    background-color: #fcf4e9;
}

.content__intro > div {
    padding: 1em;
}

.page-products_search {
    border: 0;
    border-bottom: 1px solid #eae4d5
}

.page-products_search__filters-n-cats {
    margin-top: 0;
}

.category, .filialen_filter {
    padding: 0.3em 0.6em;
    font-size: 1.0em;
}

.filialen_filter {
    padding: 0.1em 0.6em;
}

.products-empty-state {
    display: none;
    margin: 2em auto;
    max-width: 46em;
    padding: 1.2em 1.4em;
    text-align: center;
    color: var(--darkgrey);
    background: #fcf4e9;
    border: 1px solid #eae4d5;
}

.products-empty-state p {
    margin: 0;
}

.page-products_search__filters-n-cats {
    margin-bottom: 0;
}

.uk-search-default {
    width: 100%;
}

.page-products_search input {
    width: 100%;
}

li.category.jQ-category.active .text {
    color: white;
}

@media screen and (max-width: 900px) {
    .category, .filialen_filter {
        padding: 0.1em 0.5em;
        font-size: 0.85em;
    }
}

@media (min-width: 801px) {
    .produkte-select {
        display: none !important;
    }
}

@media (max-width: 800px) {
    .produkte-select {
        display: block;
    }

    .produkte-filterbuttons {
        display: none;
    }

    #search-label-hergestelltohne {
        display: none;
    }
}

.uk-search-default {
    width: 100%;
}

.uk-search-default .uk-search-input {
    padding-left: 40px;
}

.lagerhinweis {
    color: black;
    background: #ffffff6b;
    border-radius: 6px;
    padding: 0 6px;
    margin-top: 12px;
    display: block;
    font-size: 0.8rem;
}


@media screen and (max-width: 768px) {
    .uk-search-default {
        position: relative;
    }

    .uk-search-default [uk-search-icon] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        z-index: 1;
        pointer-events: none; /* verhindert, dass das Icon Klicks blockiert */
    }

    .page-products_search.clear {
        /*padding: 10px 0;*/
    }
}

@media (max-width: 480px) {
    .page-products_search input {
        margin-left: 0;
    }
}

.card--text--headline {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}


.anker-boxen {
    width: clamp(55px, 12vw, 120px);
    width: auto;
    margin: 0;
    position: absolute;
    top: 0px;
    right: 0;
    z-index: 100;
    border: 1px solid #e0d7c1;

    padding: .75em 1.25em;
    white-space: nowrap;
    color: #fff;
    background-color: #b2071b;
    outline: 0;
    text-decoration: none;
    transition: background .2s linear;
    margin-top: 4px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .1);
}


.anker-boxen a {
    text-decoration: none;
}

.anker-boxen a:hover {
    background-color: #b2071b;
    color: #fff;
}

.anker-boxen img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1000px) {
    .anker-boxen {
        position: static;
        padding: .55em .75em;
    }
}

@media (max-width: 680px) {
    .anker-boxen {
        /*width: clamp(75px, 22vw, 150px);*/
    }
}

.uk-lightbox-toolbar {
    background: transparent;
}

.uk-lightbox li.uk-active {
    border-top: none;
}

@media (max-width: 500px) {
    .anker-boxen {
        margin-top: 0px;
    }
}


/* =========================================================================
 *  Produkt-Grid (UIkit Masonry)
 * ========================================================================= */

/* UIkit's Standard-Gutter funktioniert über margin-left:-30px am Container
   plus padding-left:30px an jedem direkten Kind. Das Padding sitzt damit
   INNERHALB der Karte – sobald die Karten keinen vollflächigen Hintergrund
   haben (bei uns: nur das <figure> mit cremefarbenem Skeleton füllt den
   Content-Bereich, der Padding-Streifen davor bleibt durchsichtig), sieht
   es so aus, als hätte jede Karte einen weißen Rand links. Reduziert man
   das Padding auf 0, verschwindet der Gap mit.

   Lösung – horizontal: UIkit's Padding-Mechanik überschreiben und echtes
   flex-`column-gap` verwenden (.uk-grid ist bereits display:flex). Der
   Abstand liegt damit ZWISCHEN den Karten, nicht in ihnen. Die Karten-
   Breiten werden so neu gerechnet, dass n × width + (n-1) × gap = 100%.

   Vertikal NICHT: dort bleiben wir bei UIkit's eigenem Mechanismus
   (margin-top auf den von UIkit eingesetzten .uk-grid-margin-Items),
   denn die Masonry-Höhenberechnung liest genau diesen margin-top aus,
   um die Container-Höhe zu setzen. row-gap wäre für UIkit unsichtbar
   und würde dazu führen, dass der "Mehr zeigen"-Button und das letzte
   Item einer kürzeren Spalte in den Bereich darüber rutschen, weil der
   Container um (rows-1) × row-gap zu kurz gerechnet wäre. */
#product_grid.uk-grid {
    margin-left: 0;
    column-gap: 1.25em;
}

#product_grid.uk-grid > * {
    padding-left: 0;
}

#product_grid.uk-grid > .uk-grid-margin {
    margin-top: 1.25em;
}

/* 2 Spalten ab @s (640 px) */
@media (min-width: 640px) {
    #product_grid.uk-grid.uk-child-width-1-2\@s > * {
        width: calc((100% - 1.25em) / 2);
    }
}

/* 3 Spalten ab @m (960 px) */
@media (min-width: 960px) {
    #product_grid.uk-grid.uk-child-width-1-3\@m > * {
        width: calc((100% - 2 * 1.25em) / 3);
    }
}

/* 4 Spalten ab @l (1200 px); etwas größerer Abstand */
@media (min-width: 1200px) {
    #product_grid.uk-grid {
        column-gap: 1.5em;
    }
    #product_grid.uk-grid > .uk-grid-margin {
        margin-top: 1.5em;
    }
    #product_grid.uk-grid.uk-child-width-1-4\@l > * {
        width: calc((100% - 3 * 1.5em) / 4);
    }
}

/* Karten sind direkte uk-grid-Kinder. UIkit positioniert sie für die
   Masonry-Ansicht über CSS-Transforms; ein eigenes margin-bottom würde
   den Reflow stören und mit uk-grid-margin doppeln. */
#product_grid > article.card.vers__listed-product {
    margin-bottom: 0;
}

/* Skeleton-Hintergrund für Produkt-Thumbnails.
   Den Platz reserviert der <img>-Tag selbst über width/height (748x509);
   der dezente Shimmer hier ist nur sichtbar, solange das Bild noch lädt –
   sobald es gezeichnet ist, deckt es den Skeleton vollständig ab. */
.card.vers__listed-product .card--thumb {
    background-color: #faf8f4;
    background-image: linear-gradient(110deg, #faf8f4 0%, #f4ecd5 50%, #faf8f4 100%);
    background-size: 200% 100%;
    animation: anker-thumb-skeleton 1.6s linear infinite;
}

@keyframes anker-thumb-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .card.vers__listed-product .card--thumb {
        animation: none;
    }
}