.app {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    height: calc(100vh - 5rem);
    display: block;
    --app-col-gap: 1rem;
    padding: 1rem 1rem clamp(1.5rem, 3vw, 2rem);
    --panel-head-height: 3.75rem;
}

.b-directory-layout {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--app-col-gap);
    align-items: start;
    min-height: 0;
}

.app__results {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app__results-head {
    flex: 0 0 auto;
    padding: 0 0 0.65rem;
    margin-bottom: 0.35rem;
}

.app__results-head-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 2rem;
}

.app__results-subtitle {
    font-size: 12px;
    color: rgba(35, 24, 16, 0.62);
    margin: 0;
}

.app__results-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
    /* verhindert Abschneiden der Karten-Schatten links/rechts (overflow) */
    scrollbar-gutter: stable;
}

@media (min-width: 901px) {
    .app {
        height: auto;
    }

    .b-directory-layout {
        min-height: 0;
    }

    .app__results {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .app__results-scroll {
        overflow: visible;
        padding-right: 0;
        scrollbar-gutter: auto;
    }

    body.page-app .app__results-scroll {
        padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
    }

    .panel.filters .panel-body {
        overflow: visible;
        max-height: 3200px;
        opacity: 1;
        pointer-events: auto;
    }

    /* Einklappen nur mobil (Sheet); auf Desktop immer volle Sidebar */
    #filtersToggle.filters__toggle {
        display: none !important;
    }
}

/* Linkes Panel: Inhaltshöhe */
.panel.filters {
    box-sizing: border-box;
    width: 380px;
    max-width: 100%;
    min-width: 260px;
    align-self: start;
    position: static;
    margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
    height: auto;
    grid-template-rows: var(--panel-head-height, 3.75rem) auto;
    overflow: hidden;
    transition: box-shadow 0.35s ease;
}

.filters__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.filters__heading {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 400;
}

.filters__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(111, 78, 55, 0.22);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.9);
    color: var(--cta);
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.filters__toggle:hover {
    background: var(--hover-bg);
}

.filters__toggle:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.filters__toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

.filters__toggle-icon--expand {
    display: none;
}

.filters__toggle-icon--sheet {
    display: none;
}

.filters-body-slot {
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.filters-sheet-backdrop {
    display: none;
}

.filters-sheet__header {
    display: none;
}

.filters-sheet__frame {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.panel.filters .filters-sidebar-foot {
    flex-shrink: 0;
    padding: 0.5rem 0.65rem 0.65rem;
    border-top: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.92));
}

.panel.filters .filters-reset__btn {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(111, 78, 55, 0.2);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.88);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.25;
    color: rgba(35, 24, 16, 0.72);
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.panel.filters .filters-reset__btn .ph {
    font-size: 0.95rem;
    line-height: 1;
    color: var(--cta);
    opacity: 0.88;
}

.panel.filters .filters-reset__btn:hover {
    background: var(--hover-bg);
    border-color: rgba(111, 78, 55, 0.3);
    color: var(--cta);
}

.panel.filters .filters-reset__btn:hover .ph {
    opacity: 1;
}

.panel.filters .filters-reset__btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.panel.filters .filters-reset__btn:active {
    background: rgba(111, 78, 55, 0.08);
}

@media (max-width: 900px) {
    body.page-app {
        /* Platz unter der Ergebnisliste: fixe FABs + mittlerer Scroll-top + Schatten (iPhone-Safe-Area) */
        --app-results-fab-clearance: max(10rem, calc(env(safe-area-inset-bottom, 0px) + 8.5rem));
    }

    .b-directory-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
    }

    .app {
        padding: 1rem 0.55rem clamp(1.5rem, 3vw, 2rem);
    }

    /* App-Seite: kein verschachtelter Viewport-Scroll — .site-scroll scrollt, Header scrollt mit */
    body.page-app .app {
        height: auto;
        min-height: 0;
    }

    body.page-app .app__results {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body.page-app .app__results-scroll {
        flex: 0 1 auto;
        min-height: 0;
        overflow: visible;
        padding-right: 0;
        scrollbar-gutter: auto;
        padding-bottom: var(--app-results-fab-clearance);
    }

    /* Zähler + Toggle nur in der Topbar; Sheet-Trigger bleibt im DOM */
    body.page-app .panel.filters .panel-head {
        display: none !important;
    }

    /* Ohne sichtbaren Panel-Kopf: keine feste erste Grid-Zeile (sonst ~3.75rem leerer Streifen) */
    body.page-app .panel.filters {
        grid-template-rows: minmax(0, auto);
        margin-bottom: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .panel.filters {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-bottom: 0.65rem;
        transition: none;
        overflow: visible;
        align-self: stretch;
        /* backdrop-filter erzeugt eine fixed-CB → Sheet würde im Panel statt am Viewport kleben */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .filters-body-slot {
        height: 0;
        min-height: 0;
        flex: 0 0 auto;
        overflow: visible;
    }

    .filters-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        /* Über .farm-feature-tooltip (12000) und Karten-Overlays, unter dem Sheet */
        z-index: 12400;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: rgba(35, 24, 16, 0.42);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.22s ease,
            visibility 0.22s ease;
    }

    html.app--filters-sheet-open .filters-sheet-backdrop:not([hidden]) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .filters-sheet__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex: 0 0 auto;
        padding: 0.65rem 0.65rem 0.75rem;
        margin: 0;
        border-bottom: 1px solid var(--border-soft);
        background: var(--bg);
        box-shadow: 0 1px 0 rgba(45, 28, 18, 0.06);
    }

    .filters-sheet__title {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--text);
    }

    .filters-sheet__close {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        border: 1px solid rgba(111, 78, 55, 0.22);
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.95);
        color: var(--cta);
        cursor: pointer;
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    .filters-sheet__close:hover {
        background: var(--hover-bg);
    }

    .filters-sheet__close:focus-visible {
        outline: none;
        box-shadow: var(--ring);
    }

    .filters-sheet__close .ph {
        font-size: 1.15rem;
        line-height: 1;
    }

    /* Sheet-Rahmen: Kopf fix, nur der Formularbereich scrollt → nichts über dem Titel */
    .panel.filters #filtersSheetFrame.filters-sheet__surface {
        position: fixed;
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        bottom: 0;
        padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: 28rem;
        margin-inline: auto;
        max-height: min(56vh, 480px);
        height: auto;
        display: flex;
        flex-direction: column;
        transform: translate3d(0, 108%, 0);
        opacity: 0;
        pointer-events: none;
        transition:
            transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
            opacity 0.24s ease;
        z-index: 12450;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow:
            0 -12px 40px rgba(45, 28, 18, 0.18),
            0 -2px 8px rgba(45, 28, 18, 0.08);
        background-color: var(--bg);
        isolation: isolate;
        overflow: hidden;
    }

    .panel.filters #filterPanelBody.filters-sheet__scroll {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .panel.filters .filters-sidebar-foot {
        padding: 0.45rem 0.55rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.94);
    }

    html.app--filters-sheet-open .panel.filters #filtersSheetFrame.filters-sheet__surface {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        pointer-events: auto;
    }

    .filters__toggle-icon--collapse,
    .filters__toggle-icon--expand {
        display: none !important;
    }

    .filters__toggle-icon--sheet {
        display: inline !important;
    }

    .filters__toggle {
        width: auto;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0 0.65rem;
    }

    .app .sub__checks.grid-cols-3 {
        grid-template-columns: 1fr 1fr;
    }

    .app .sub__checks.grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 380px) {
    .app .sub__checks.grid-cols-3 {
        grid-template-columns: 1fr;
    }

    .app .sub__checks.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

html.app--filters-sheet-open {
    overflow: hidden;
}

/* Panels */

    .panel {
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-lg);
        background: rgba(255,255,255,.85);
        backdrop-filter: blur(10px);
        box-shadow: var(--shadow);
        overflow: hidden;
        min-height: 0;
        display: grid;
        grid-template-rows: var(--panel-head-height, 3.75rem) minmax(0, 1fr);
        height: 100%;
    }

    .panel-head {
        padding: 0 12px;
        border-bottom: 1px solid var(--border-soft);
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
        position: relative;
        display: flex;
        align-items: center;
        min-height: 0;
        box-sizing: border-box;
    }

    .panel-head .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-width: 0;
        width: 100%;
    }

    .panel-head h2 {
        margin: 0;
        font-size: 1rem;
        letter-spacing: 1px;
        color: var(--muted);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 400;
    }

    .panel-body {
        padding: 0.5rem;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        height:  100%;
    }

    .panel.filters .panel-body {
        height: auto;
        min-height: 0;
        transition:
            max-height 0.44s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.32s ease,
            padding 0.36s cubic-bezier(0.4, 0, 0.2, 1),
            gap 0.36s ease;
    }

@media (prefers-reduced-motion: reduce) {
    .panel.filters,
    .panel.filters .panel-body,
    .filters__toggle,
    .panel.filters #filtersSheetFrame.filters-sheet__surface,
    .filters-sheet-backdrop {
        transition: none !important;
    }
}

/* Field */

    .field {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        border: 1px solid var(--border-soft);
        background: rgba(255,255,255,.90);
        border-radius: var(--radius);
        box-shadow: var(--shadow-2);
    }

    .field:hover {
        border: 1px solid var(--border);
    }

    .field div {
        width: 100%;
    }

    #filterPanelBody .checks,
    #filterPanelBody .sub__checks {
        grid-template-columns: 1fr;
    }

/* Descriptions */

    .description {
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.2rem;
        margin-bottom: 0.2rem;
        color: var(--muted);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .field:hover .description__label {
        color: var(--text);
    }

    .description__label {
        font-size: 0.8rem;
        display: flex;
        justify-content: start;
        align-items: center;   
        gap: 0.25rem;
    }

    .description__label i {
        font-size: 1rem;
    }

    .description__value {
        color: var(--cta);
        font-size: 0.9rem;
        font-weight: 400;
        padding: 0.125rem 0.5rem;
        border-radius: var(--radius-sm);
        background: var(--bg2);
        border-color: rgba(111,78,55,.12);
        display: flex;
        align-items: baseline;
        gap: 0.125rem;
    }

    .description__value i {
        font-size: 0.7rem;
    }


/* Selects */
    
    .select {
        position: relative;
        display: inline-block;
    }

    .select select {
        background: rgba(255,255,255,.85);
        border: 1px solid rgba(111,78,55,.22);
        border-radius: var(--radius-sm);
        padding: 0.75rem 2.25rem 0.75rem 1rem;
        width: 100%;
        color:var(--text);
        outline:none;
        appearance: none;          /* Standard */
        -webkit-appearance: none;  /* Safari */
        -moz-appearance: none;     /* Firefox */
        padding-right: 2.25rem;    /* Platz für Pfeil */
    }

    .select select:hover {
        box-shadow: var(--ring);
        cursor: pointer;
    }

    .select::after {
        content: "";
        position: absolute;
        right: .75rem;
        top: 45%;
        width: .3rem;
        height: .3rem;
        transform: translateY(-50%) rotate(45deg);
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        pointer-events: none;      /* Klick geht durchs Icon */
        opacity: 0.7;
        color: var(--cta);
    }

    .select select:disabled {
        opacity: 0.5;                 /* sonst wirkt’s oft ausgegraut */
        background: #f3f4f6;
        color: #6b7280;
        border-color: rgba(0,0,0,.15);
        cursor: not-allowed;
    }

/* Checkboxes */

    .checks {
        display: grid;
        gap: 0rem;
    }

    .check {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0.4rem;
        user-select:none;
        padding: 0.25rem 0;
        border-radius: var(--radius-sm);
        border: 1px solid rgba(255,255,255,0);
    }

    .check:hover {
        cursor: pointer;
        color: var(--text);
        border: 1px solid var(--bg2);
    }

    .check input {
        width: 1rem;
        height: 1rem;
        accent-color: var(--cta)
    }

    .check span {
        color: var(--muted);
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .check span i {
        font-size: 16px;
    }

    .check:hover span {
        color: var(--text);
    }

    [data-feature-filters].checks {
        align-items: stretch;
    }

    [data-feature-filters] .check {
        width: 100%;
        min-width: 0;
    }

    [data-feature-filters] .check span {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    [data-feature-filters] .check span i {
        margin-left: auto;
        flex-shrink: 0;
    }

/* Subchecks */

    .sub__check-header {
        background: var(--bg2);
        padding-left: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .filter-section__head {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font: inherit;
        text-align: inherit;
        color: inherit;
        cursor: pointer;
    }

    .filter-section__head:hover .description__label,
    .filter-section__head:hover .filter-section__chevron {
        color: var(--text);
    }

    .filter-section__head:focus-visible {
        outline: none;
        border-radius: var(--radius-sm);
        box-shadow: 0 0 0 2px rgba(111, 78, 55, 0.22);
    }

    .filter-section__chevron {
        flex-shrink: 0;
        font-size: 0.95rem;
        line-height: 1;
        color: var(--muted);
        transition: transform 0.2s ease;
    }

    .filter-section__head[aria-expanded="true"] .filter-section__chevron {
        transform: rotate(180deg);
    }

    @media (prefers-reduced-motion: reduce) {
        .filter-section__chevron {
            transition: none;
        }
    }

    .variety-group {
        margin-bottom: 0.25rem;
    }

    .variety-group:last-child {
        margin-bottom: 0;
    }

    .variety-group__head {
        display: flex;
        align-items: stretch;
        gap: 0;
        position: relative;
        z-index: 2;
        background: var(--bg2);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }

    .variety-group__family {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.28rem 0.45rem 0.28rem 0.25rem;
        background: transparent;
        border-radius: 0;
    }

    .variety-group__family .coffee_familiy {
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        accent-color: var(--cta);
    }

    .variety-group__family-label {
        flex: 1 1 auto;
        min-width: 0;
        margin-bottom: 0 !important;
        cursor: pointer;
    }

    .variety-group__toggle {
        position: relative;
        z-index: 1;
        flex-shrink: 0;
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        margin: 0;
        padding: 0;
        border: 0;
        border-left: 1px solid rgba(111, 78, 55, 0.12);
        border-radius: 0;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
    }

    .variety-group__toggle:hover {
        background: rgba(111, 78, 55, 0.07);
        color: var(--cta);
    }

    .variety-group__toggle:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 2px rgba(111, 78, 55, 0.22);
    }

    .variety-group__toggle .ph {
        font-size: 1rem;
        line-height: 1;
        transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .variety-group__toggle[aria-expanded="true"] .ph {
        transform: rotate(180deg);
    }

    .variety-group__panel {
        position: relative;
        z-index: 0;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.32s cubic-bezier(0.33, 1, 0.68, 1);
    }

    /* Geschlossen: transformiertes Panel-Innere kann die Kopfzeile überlagern — keine Pointer-Events. */
    .variety-group:not(.is-open) > .variety-group__panel {
        pointer-events: none;
    }

    .variety-group.is-open > .variety-group__panel {
        grid-template-rows: 1fr;
    }

    .variety-group__panel-inner {
        min-height: 0;
        overflow: hidden;
    }

    .variety-group__panel-inner > .sub__checks {
        padding-left: 0.25rem;
        padding-top: 0.25rem;
        opacity: 0;
        transform: none;
        transition:
            opacity 0.24s ease 0.05s,
            transform 0.3s cubic-bezier(0.33, 1, 0.68, 1) 0.02s;
    }

    .variety-group.is-open .variety-group__panel-inner > .sub__checks {
        opacity: 1;
        transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
        .variety-group__panel {
            transition-duration: 0.01ms;
        }

        .variety-group__panel-inner > .sub__checks {
            transition: none;
        }

        .variety-group__toggle .ph {
            transition: none;
        }

        .variety-group.is-open .variety-group__panel-inner > .sub__checks {
            transform: none;
        }
    }

    .sub__checks {
        display: grid;
        padding-left: 0.25rem;
    }

    .sub__check {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 0.4rem;
        user-select:none;
        padding: 0.25rem 0;
        border-radius: var(--radius-sm);
        border: 1px solid rgba(255,255,255,0);
    }

    .sub__check:hover {
        cursor: pointer;
        color: var(--text);
        border: 1px solid var(--bg2);
    }
    
    .sub__check input {
        width: 1rem;
        height: 1rem;
        accent-color: var(--cta)
    }

    .sub__check span {
        font-size:  0.8rem;
        color: var(--muted);
    }

    .sub__check:hover span {
        color: var(--text);
    }
    


/* Range */

    .range-single,
    .range-dual {
        position: relative;
        width: 100%;
        height: 1.75rem;
        margin-top: 0.15rem;
    }

    .range-single::before,
    .range-dual::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 6px;
        transform: translateY(-50%);
        border-radius: 999px;
        background: rgba(111, 78, 55, 0.18);
        pointer-events: none;
    }

    .range-single__fill,
    .range-dual__fill {
        position: absolute;
        top: 50%;
        height: 6px;
        transform: translateY(-50%);
        border-radius: 999px;
        background: var(--cta);
        pointer-events: none;
        z-index: 1;
    }

    .range-single__input,
    .range-dual__input {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1.75rem;
        margin: 0;
        padding: 0;
        background: transparent;
        pointer-events: none;
        -webkit-appearance: none;
        appearance: none;
        top: 0;
    }

    .range-dual__input--min {
        z-index: 3;
    }

    .range-dual__input--max {
        z-index: 4;
    }

    .range-single__input {
        z-index: 3;
    }

    .range-single__input::-webkit-slider-runnable-track,
    .range-dual__input::-webkit-slider-runnable-track {
        height: 6px;
        background: transparent;
        border: 0;
    }

    .range-single__input::-moz-range-track,
    .range-dual__input::-moz-range-track {
        height: 6px;
        background: transparent;
        border: 0;
    }

    .range-single__input::-webkit-slider-thumb,
    .range-dual__input::-webkit-slider-thumb {
        -webkit-appearance: none;
        pointer-events: auto;
        width: 1.125rem;
        height: 1.125rem;
        margin-top: -5px;
        border-radius: 50%;
        border: 2px solid #fff;
        background: var(--cta);
        box-shadow: 0 1px 4px rgba(45, 28, 18, 0.22);
        cursor: grab;
    }

    .range-single__input::-moz-range-thumb,
    .range-dual__input::-moz-range-thumb {
        pointer-events: auto;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 50%;
        border: 2px solid #fff;
        background: var(--cta);
        box-shadow: 0 1px 4px rgba(45, 28, 18, 0.22);
        cursor: grab;
    }

    .range-single__input:active::-webkit-slider-thumb,
    .range-dual__input:active::-webkit-slider-thumb {
        cursor: grabbing;
    }

    .range-single__input:active::-moz-range-thumb,
    .range-dual__input:active::-moz-range-thumb {
        cursor: grabbing;
    }

    .range-single__input:focus-visible::-webkit-slider-thumb,
    .range-dual__input:focus-visible::-webkit-slider-thumb {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(111, 78, 55, 0.35);
    }

    .range-single__input:focus-visible::-moz-range-thumb,
    .range-dual__input:focus-visible::-moz-range-thumb {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(111, 78, 55, 0.35);
    }

/* Scrollbars */

    .panel-body::-webkit-scrollbar,
    .cards::-webkit-scrollbar,
    .app__results-scroll::-webkit-scrollbar {
        width:10px
    }

    .panel-body::-webkit-scrollbar-thumb,
    .cards::-webkit-scrollbar-thumb,
    .app__results-scroll::-webkit-scrollbar-thumb {
        background:rgba(111,78,55,.18);
        border-radius:999px;
        border: 2px solid rgba(255,255,255,.6)
    }

/* Results */

    .hit {
        background: inherit !important;
        color: inherit !important;
    }
    .hit .farm__kpi_value,
    .hit .farm__kpi_description {
        color: inherit !important;
    }

    .farms__list {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        /* kein eigener „Kasten“ — nur die Cards zeichnen */
        background: transparent;
        box-shadow: none;
    }

    .farms__list[aria-busy="true"] {
        cursor: progress;
    }

    .farms__loading {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Doppelrahmen wie Panel-Ecke: außen halbtransparentes „Glas“, innen deckendes Weiß */
    .farm__element {
        --farm-frame: 11px;
        position: relative;
        padding: var(--farm-frame);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-lg);
        background: rgba(255, 255, 255, 0.52);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        /* Ruhe: kein Außenschatten (kein Streifen zwischen Cards) */
        box-shadow: none;
        /* visible: Tooltips (fixed) nicht am Kartenrahmen abschneiden (backdrop-filter + overflow) */
        overflow: visible;
        transition:
            border-color 0.22s ease,
            box-shadow 0.22s ease;
    }

    a.farm__card-link {
        display: block;
        text-decoration: none;
        color: inherit;
        border-radius: calc(var(--radius-lg) - var(--farm-frame, 11px));
        outline: none;
    }

    a.farm__card-link:focus-visible {
        box-shadow: 0 0 0 2px var(--text);
    }

    a.farm__card-link--nohref {
        cursor: not-allowed;
    }

    .farm__element-surface {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        min-height: 0;
        overflow: visible;
        border-radius: calc(var(--radius-lg) - var(--farm-frame));
        background: #fff;
        box-shadow: inset 0 0 0 1px rgba(65, 44, 29, 0.05);
    }

    .farm__element:hover {
        border-color: rgba(111, 78, 55, 0.28);
        /* kleiner als --shadow; weicher zweiter Layer */
        box-shadow:
            0 4px 14px rgba(61, 40, 24, 0.07),
            0 8px 22px rgba(61, 40, 24, 0.06);
    }

    .farm-result-enter {
        animation: farm-result-enter 180ms ease-out both;
        animation-delay: var(--farm-enter-delay, 0ms);
    }

    .farm__element--skeleton {
        pointer-events: none;
    }

    .farm__element--skeleton .farm__element-surface {
        min-height: 13rem;
    }

    .farm-skeleton {
        display: block;
        border-radius: var(--radius-sm);
        background: linear-gradient(90deg, rgba(111, 78, 55, 0.08), rgba(111, 78, 55, 0.14), rgba(111, 78, 55, 0.08));
        background-size: 220% 100%;
        animation: farm-skeleton-shimmer 1.2s ease-in-out infinite;
    }

    .farm-skeleton--image {
        width: 100%;
        height: 100%;
        min-height: 13rem;
        border-radius: calc(var(--radius-lg) - var(--farm-frame));
    }

    .farm__element--skeleton .farm__image .farm-skeleton--image {
        position: absolute;
        inset: 0;
        min-height: 0;
        height: 100%;
        border-radius: 0;
    }

    .farm__element--skeleton .farm__image-caption .farm-skeleton--caption-title {
        width: min(72%, 15rem);
        height: 1.02rem;
        margin: 0 0 0.32rem;
        border-radius: 0.28rem;
    }

    .farm__element--skeleton .farm__image-caption .farm-skeleton--caption-sub {
        width: min(58%, 12rem);
        height: 0.78rem;
        margin: 0;
        border-radius: 0.28rem;
    }

    .farm__inline-facts--skeleton {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem 1rem;
        margin-top: 0.12rem;
    }

    .farm-skeleton--inline-fact {
        display: inline-block;
        width: 4.75rem;
        height: 1.02rem;
        border-radius: 999px;
    }

    .farm__element--skeleton .farm__card-cta {
        margin: 0;
    }

    .farm-skeleton--cta-line {
        display: inline-block;
        width: 7.5rem;
        height: 0.92rem;
        border-radius: 0.35rem;
    }

    .farm-skeleton--title {
        width: min(70%, 22rem);
        height: 1.45rem;
        margin-bottom: 0.75rem;
    }

    .farm-skeleton--subtitle {
        width: min(48%, 16rem);
        height: 0.9rem;
    }

    .farm-skeleton--pill {
        width: 6rem;
        height: 1.6rem;
        border-radius: 999px;
        flex-shrink: 0;
    }

    .farm__image {
        flex: 0 0 clamp(15rem, 24%, 20rem);
        width: clamp(15rem, 24%, 20rem);
        min-width: 15rem;
        min-height: 0;
        position: relative;
        overflow: hidden;
        align-self: stretch;
        /* wie .farm__element-surface: innere Rundung links (surface hat overflow:visible) */
        border-top-left-radius: calc(var(--radius-lg) - var(--farm-frame, 11px));
        border-bottom-left-radius: calc(var(--radius-lg) - var(--farm-frame, 11px));
    }

    .farm__image img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: sepia(0.3);
        transition: 240ms ease;
    }

    .farm__image--placeholder {
        background:
            linear-gradient(145deg, var(--bg2), rgba(111, 78, 55, 0.08)),
            radial-gradient(circle at 38% 32%, rgba(111, 78, 55, 0.1), transparent 52%);
    }

    .farm__image-ph {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(111, 78, 55, 0.32);
        font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    }

    .farm__image-ph .ph {
        line-height: 1;
    }

    /* Titel im Bild nur auf schmalen Viewports; Desktop siehe .farm__header-titles */
    .farm__image-caption {
        display: none;
    }

    .farm__element:hover img {
        filter: sepia(0);
    }

    @media (max-width: 900px) {
        .farm__element-surface {
            flex-direction: column;
            align-items: stretch;
        }

        .farm__image {
            flex: 0 0 auto;
            width: 100%;
            min-width: 0;
            max-width: none;
            align-self: stretch;
            aspect-ratio: 16 / 10;
            min-height: 10.5rem;
            border-top-left-radius: calc(var(--radius-lg) - var(--farm-frame, 11px));
            border-top-right-radius: calc(var(--radius-lg) - var(--farm-frame, 11px));
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .farm__image-caption {
            display: block;
            position: absolute;
            inset-inline: 0;
            bottom: 0;
            z-index: 2;
            padding: 1.1rem 0.85rem 0.6rem;
            background: linear-gradient(
                180deg,
                transparent 0%,
                rgba(24, 16, 10, 0.38) 42%,
                rgba(24, 16, 10, 0.76) 100%
            );
            color: #fffaf3;
            text-align: left;
            pointer-events: none;
        }

        .farm__image-caption .farm__title {
            font-size: clamp(1.06rem, 4.25vw, 1.3rem);
            font-weight: 700;
            line-height: 1.2;
            color: #fffaf3;
            margin: 0;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .farm__image-caption .farm__subtitle {
            font-size: clamp(0.8rem, 3.15vw, 0.88rem);
            line-height: 1.28;
            color: rgba(255, 250, 243, 0.9);
            padding-bottom: 0;
            margin-top: 0.12rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .farm__header-titles {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
            display: block;
        }

        .farm__details {
            padding: 0.9rem 1rem 2.1rem 1rem;
        }

        .farm-skeleton--image {
            border-radius: 0;
            border-top-left-radius: calc(var(--radius-lg) - var(--farm-frame, 11px));
            border-top-right-radius: calc(var(--radius-lg) - var(--farm-frame, 11px));
        }
    }

    .farm__details {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
        /* Platz für Merklisten-Icon oben + Hover-CTA unten */
        padding: 1rem 2.85rem 2.15rem 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .farm__header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .farm__header-titles {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .farm__title {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .farm__subtitle {
        font-size: 0.9rem;
        padding-bottom: 0.15rem;
    }

    .farm__inline-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem 1rem;
        margin-top: 0.1rem;
    }

    .farm__inline-facts--features {
        margin-top: 0.2rem;
    }

    .farm__inline-facts--features .farm__feature--tip {
        margin: 0;
    }

    .farm__inline-fact {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.88rem;
        color: var(--muted);
        line-height: 1.3;
        cursor: pointer;
    }

    .farm__inline-fact .ph {
        font-size: 0.95rem;
        color: var(--cta);
    }

    .farm__inline-fact:hover,
    .farm__inline-fact:focus-visible {
        color: var(--text);
    }

    .farm__inline-fact:focus-visible {
        outline: none;
        box-shadow: var(--ring);
        border-radius: 0.35rem;
        padding-inline: 0.15rem;
    }

    .farm__features {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.4rem 0.45rem;
        max-width: 100%;
    }

    .farm__feature {
        background: var(--hover-bg);
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-sm);
        color: var(--muted);
        border: 1px solid rgba(255, 255, 255, 0);
    }

    /* Nur Icon; gleiche Grundfläche wie .farm__kpi (bg2); Iconfarbe wie KPI-Wert (cta) */
    .farm__feature--tip {
        margin: 0;
        min-width: 2.125rem;
        min-height: 2.125rem;
        padding: 0.35rem;
        font: inherit;
        line-height: 1;
        cursor: pointer;
        flex-shrink: 0;
        border-radius: var(--radius-sm);
        background: var(--bg2);
        color: var(--cta);
        border: 1px solid transparent;
        box-shadow: none;
        position: relative;
        outline: none;
    }

    .farm__feature--tip .pi {
        font-size: 1.05rem;
        display: block;
        color: inherit;
    }

    .farm__feature--tip:hover,
    .farm__feature--tip:focus-visible {
        background: rgba(111, 78, 55, 0.08);
        border-color: rgba(111, 78, 55, 0.14);
    }

    .farm__feature--tip:focus-visible {
        box-shadow: var(--ring);
    }

    /* Feature-Tooltip: siehe beanivo-design.css (.farm-feature-tooltip) */

    .farm__element-divider {
        border-top: 1px dotted var(--border-soft);
        margin: 0.125rem 0;
        opacity: 0;
    }

    .farm__varieties {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.38rem;
    }

    .farm__variety {
        background: var(--bg2);
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.18rem;
        padding: 0.18rem 0.55rem;
        border-radius: var(--radius-sm);
        font-weight: 700;
        color: var(--cta);
    }

    .farm__variety .pi,
    .farm__variety .ph {
        font-size: 0.82rem;
    }

    .farm__variety.farm__meta-tip {
        cursor: help;
    }

    @media (min-width: 901px) {
        .farm__variety--extra {
            display: none !important;
        }

        /* Volle Breite bis knapp an die rechte Kartenkante (Details-Padding rechts aufheben) */
        .farm__element-divider + .farm__chip-scroller-wrap {
            margin-right: -2.85rem;
            width: calc(100% + 2.85rem);
            max-width: none;
        }
    }

    /* Horizontales Scroll: innerer Track; Fade fix auf farm__chip-scroller-wrap */
    .farm__chip-scroller-wrap {
        position: relative;
        max-width: 100%;
    }

    .farm__chip-scroller {
        max-width: 100%;
    }

    @media (max-width: 900px) {
        .farm__chip-scroller-wrap:has(.farm__inline-facts--features) {
            display: none !important;
        }

        .farm__variety--more {
            display: none !important;
        }

        .farm__element-divider {
            margin-top: 0.1rem;
            margin-bottom: 0;
        }

        .farm__element-divider + .farm__chip-scroller-wrap {
            margin-top: -0.35rem;
            margin-right: -1rem;
            width: calc(100% + 1rem);
            max-width: none;
        }

        .farm__chip-scroller {
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            -ms-overflow-style: none;
            margin-inline: -0.25rem;
            padding-inline: 0.25rem;
            padding-bottom: 0.3rem;
        }

        /* Letzter Chip aus dem Fade scrollen (Fade ~2.75rem); Ziel: bis etwa Kartenmitte */
        .farm__element-divider + .farm__chip-scroller-wrap .farm__chip-scroller {
            padding-right: max(3.35rem, calc(50% - 1.35rem));
        }

        .farm__chip-scroller::-webkit-scrollbar {
            display: none;
            height: 0;
        }

        .farm__chip-scroller-wrap::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 2.75rem;
            z-index: 2;
            pointer-events: none;
            background:
                linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0) 100%),
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 256 256'%3E%3Cpath fill='%236f4e37' fill-opacity='0.45' d='M184.49 128.49l-80 80a12 12 0 0 1-17-17L159 128 87.51 56.51a12 12 0 0 1 17-17l80 80a12 12 0 0 1 0 17z'/%3E%3C/svg%3E")
                no-repeat
                right 0.28rem
                center /
                0.95rem
                0.95rem;
        }

        .farm__chip-scroller > .farm__varieties {
            flex-wrap: nowrap;
            gap: 0.42rem;
            margin-inline: 0;
            padding-inline: 0;
            padding-bottom: 0;
        }

        .farm__variety {
            flex-shrink: 0;
            white-space: nowrap;
            border-radius: 999px;
            padding: 0.28rem 0.62rem;
        }
    }

    .farm__kpis {
        display: none;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }

    .farm__kpi {
        border-radius: var(--radius-sm);
        padding: 0.75rem 1rem;
        background: var(--bg2);
    }

    .farm__kpi_value {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--cta);
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .farm__kpi_description {
        font-size: 0.8rem;
        color: var(--cta);
    }

    .farm__kpi_value--harvest {
        font-size: 1.2rem;
        line-height: 1.35;
        align-items: center;
        font-weight: 700;
    }

    .farm__kpi_value--harvest span {
        font-size: 0.88rem;
        line-height: 1.35;
        font-weight: 600;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .farm__harvest-summary {
        border-radius: var(--radius-sm);
        padding: 0.75rem 1rem;
        background: var(--bg2);
    }

    .farm__inline-fact--harvest .ph {
        color: var(--cta);
    }

    .farm__inline-fact--harvest-inactive,
    .farm__inline-fact--harvest-inactive .ph {
        color: var(--muted);
    }

    .farm__inline-fact--harvest-inactive {
        opacity: 0.9;
    }

    .farm__inline-fact--harvest-inactive:hover,
    .farm__inline-fact--harvest-inactive:focus-visible {
        color: var(--muted);
    }

    .farm__card-cta {
        position: absolute;
        right: 0.75rem;
        bottom: 0.6rem;
        display: flex;
        align-items: center;
        gap: 0.2rem;
        margin: 0;
        max-width: calc(100% - 1.5rem);
        font-size: 0.88rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--cta);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translateY(3px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    .farm__element:hover .farm__card-cta,
    .farm__element:focus-within .farm__card-cta {
        opacity: 1;
        transform: translateY(0);
    }

    @media (max-width: 900px) {
        /* Nach Basis-.farm__details / .farm__card-cta: sonst überschreiben die unscoped Regeln die mobilen Werte */
        .farm__details {
            padding: 0.9rem 1rem 1.05rem 1rem;
        }

        .farm__element .farm__card-cta,
        .farm__element:hover .farm__card-cta,
        .farm__element:focus-within .farm__card-cta {
            position: static;
            right: auto;
            bottom: auto;
            align-self: flex-end;
            margin-top: 0.25rem;
            margin-bottom: 0;
            max-width: 100%;
            opacity: 1;
            transform: translateY(0);
        }
    }

    .farm__card-cta-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .farm__card-cta-arrow {
        font-size: 0.85em;
        flex-shrink: 0;
    }

    .farm__wishlist-btn {
        position: absolute;
        top: calc(var(--farm-frame) + 0.55rem);
        right: calc(var(--farm-frame) + 0.55rem);
        z-index: 4;
        box-sizing: border-box;
        width: 2.45rem;
        height: 2.45rem;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(65, 44, 29, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        color: var(--cta);
        box-shadow: 0 1px 3px rgba(45, 28, 18, 0.12);
        cursor: pointer;
        line-height: 0;
        opacity: 0;
        transform: translateY(4px) scale(0.96);
        -webkit-tap-highlight-color: transparent;
        transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            background 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease;
    }

    .farm__element:hover .farm__wishlist-btn,
    .farm__element:focus-within .farm__wishlist-btn,
    .farm__wishlist-btn.is-added {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .farm__wishlist-btn:hover,
    .farm__wishlist-btn:focus-visible {
        background: #fff;
        border-color: rgba(111, 78, 55, 0.28);
        outline: none;
    }

    .farm__wishlist-btn:focus-visible {
        box-shadow: var(--ring);
    }

    .farm__wishlist-btn-icon {
        font-size: 1.2rem;
        line-height: 1;
    }

    .farm__wishlist-btn.is-added {
        color: var(--cta);
        background: rgba(255, 255, 255, 0.98);
    }

    @media (hover: none) {
        .farm__wishlist-btn {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Merklisten-Seite: entfernen (Prohibit) statt Lesezeichen */
    .farm__wishlist-btn--ban {
        color: rgba(150, 48, 38, 0.95);
    }

    .farm__wishlist-btn--ban:hover,
    .farm__wishlist-btn--ban:focus-visible {
        color: rgba(120, 36, 30, 0.98);
    }

    /* ——— Merkliste: Kaffeebohnen-Konfetti (JS) ——— */
    .wishlist-bean-confetti {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10000;
        pointer-events: none;
        line-height: 0;
        color: var(--cta);
        filter: drop-shadow(0 1px 2px rgba(45, 28, 18, 0.2));
    }

    .wishlist-bean-confetti .ph {
        display: block;
    }

    @keyframes farm-wishlist-btn-pop {
        0% {
            transform: scale(1);
        }
        35% {
            transform: scale(0.94);
        }
        65% {
            transform: scale(1.06);
        }
        100% {
            transform: scale(1);
        }
    }

    .farm__wishlist-btn--pop {
        animation: farm-wishlist-btn-pop 0.38s cubic-bezier(0.34, 1.35, 0.64, 1);
    }


    @media (prefers-reduced-motion: reduce) {
        .wishlist-bean-confetti {
            display: none !important;
        }

        .farm__wishlist-btn--pop {
            animation: none;
        }
    }


/* BACKUP */

/* Filters */

/*
select,input[type="range"] {
    width:100%
}

select,.multiselect,
input[type="text"] {
    background:rgba(255,255,255,.85);
    border:1px solid rgba(111,78,55,.22);
    border-radius:14px;
    padding:10px 12px;
    color:var(--text);
    outline:none;
}

select:focus,
.multiselect:focus-within,
input[type="text"]:focus {
    box-shadow:var(--ring);
    border-color:rgba(111,78,55,.35)
}

.checks {
    display:flex;
    flex-direction:column;
    gap:10px
}

.check {
    display:flex;
    align-items:center;
    justify-content:start;
    gap:10px;
    font-size:13px;
    color:rgba(35,24,16,.86);
    user-select:none;
}

.check input {
    width:16px;
    height:16px;
    accent-color:var(--cta)
}

#varietiesList {
    margin-top: 12px;
}

.range-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}

.range-row.one {
    grid-template-columns:1fr
}

.range-chip {
    font-size:12px;
    color:rgba(35,24,16,.85);
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(111,78,55,.18);
    background:var(--hover-bg);
    width:fit-content;
}

.filters-foot {
    padding:12px 14px;
    border-top:1px solid var(--border-soft);
    background:rgba(255,255,255,.75);
    display:flex;
    gap:10px;
}

.filter-description  {
    font-size: 11px;
    color: rgba(35,24,16,.62);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}


.inline-prices {
    display:flex;
    flex-direction:column;
    gap:6px;
    border-top:1px dashed rgba(111,78,55,.22);
    padding-top:8px;
}

.price-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    color:rgba(35,24,16,.80)
}

.price-row strong {
    color:rgba(35,24,16,.92)
}

*/

/* Mit globalem Site-Scroll (Footer): App-Höhe aus Flex statt fester Viewport-Höhe */
body.has-site-scroll .app {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

/* „Nach oben“: Einblend von unten + Fade (Klasse app-scroll-top--shown, siehe farm-list.js) */
button.app-scroll-top[hidden] {
    display: none !important;
    pointer-events: none;
}

.app-scroll-top {
    position: fixed;
    left: 50%;
    bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
    z-index: 11500;
    box-sizing: border-box;
    width: 3.1rem;
    height: 3.1rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(65, 44, 29, 0.18);
    background: rgba(255, 252, 248, 0.96);
    color: var(--cta);
    box-shadow:
        0 4px 18px rgba(45, 28, 18, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.55) inset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translate(-50%, 0.85rem);
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.32, 0.72, 0, 1),
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.18s ease;
}

.app-scroll-top.app-scroll-top--shown {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.app-scroll-top:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(65, 44, 29, 0.26);
    box-shadow:
        0 6px 22px rgba(45, 28, 18, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

.app-scroll-top:focus-visible {
    outline: none;
    box-shadow: var(--ring), 0 4px 18px rgba(45, 28, 18, 0.12);
}

.app-scroll-top .pi {
    font-size: 1.2rem;
    line-height: 1;
}

html.app--filters-sheet-open .app-scroll-top {
    display: none !important;
}

html.nav-drawer-open .app-scroll-top {
    display: none !important;
}

/* Mobile App: Filter-FAB unten rechts, Merkliste unten links + weicher Verlauf am unteren Rand */
.app-filter-fab,
.app-wishlist-fab,
.app-results-edge-fade {
    display: none;
}

@media (max-width: 900px) {
    body.page-app .site-scroll {
        scroll-padding-bottom: var(--app-results-fab-clearance);
    }

    body.page-app .app-results-edge-fade {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
        height: calc(6rem + env(safe-area-inset-bottom, 0px));
        pointer-events: none;
        z-index: 11380;
        background: linear-gradient(
            to top,
            var(--bg) 0%,
            rgba(252, 249, 245, 0.92) 28%,
            rgba(252, 249, 245, 0) 100%
        );
    }

    html.b-editorial body.page-app .app-results-edge-fade {
        display: block;
        background: linear-gradient(
            to top,
            #fff 0%,
            rgba(255, 255, 255, 0.92) 28%,
            rgba(255, 255, 255, 0) 100%
        );
    }

    body.page-app .app-filter-fab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: max(0.85rem, env(safe-area-inset-right, 0px));
        bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        z-index: 11620;
        box-sizing: border-box;
        width: 3.35rem;
        height: 3.35rem;
        padding: 0;
        margin: 0;
        border-radius: 999px;
        border: 1px solid var(--cta-btn-border);
        background: var(--cta-btn-gradient);
        color: var(--cta-btn-text);
        box-shadow:
            0 6px 22px rgba(45, 28, 18, 0.24),
            0 0 0 1px rgba(255, 255, 255, 0.35) inset;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            filter 0.18s ease;
    }

    body.page-app .app-filter-fab:hover {
        filter: brightness(1.03);
        box-shadow:
            0 8px 26px rgba(45, 28, 18, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.45) inset;
    }

    body.page-app .app-filter-fab:focus-visible {
        outline: none;
        box-shadow: var(--ring), 0 6px 22px rgba(45, 28, 18, 0.22);
    }

    body.page-app .app-filter-fab .ph {
        font-size: 1.28rem;
        line-height: 1;
    }

    body.page-app .app-wishlist-fab[hidden] {
        display: none !important;
    }

    body.page-app .app-wishlist-fab {
        position: fixed;
        left: max(0.85rem, env(safe-area-inset-left, 0px));
        bottom: max(1rem, env(safe-area-inset-bottom, 0px));
        z-index: 11620;
        box-sizing: border-box;
        width: 3.35rem;
        height: 3.35rem;
        padding: 0;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(65, 44, 29, 0.18);
        background: rgba(255, 252, 248, 0.96);
        color: var(--cta);
        text-decoration: none;
        box-shadow:
            0 6px 22px rgba(45, 28, 18, 0.18),
            0 0 0 1px rgba(255, 255, 255, 0.55) inset;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            box-shadow 0.18s ease,
            background 0.18s ease,
            filter 0.18s ease;
    }

    body.page-app .app-wishlist-fab:hover {
        background: rgba(255, 255, 255, 1);
        filter: brightness(1.02);
        box-shadow:
            0 8px 26px rgba(45, 28, 18, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    }

    body.page-app .app-wishlist-fab:focus-visible {
        outline: none;
        box-shadow: var(--ring), 0 6px 22px rgba(45, 28, 18, 0.16);
    }

    body.page-app .app-wishlist-fab .ph {
        font-size: 1.28rem;
        line-height: 1;
    }

    body.page-app .app-wishlist-fab__badge {
        position: absolute;
        top: 0.12rem;
        right: 0.12rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.28rem;
        height: 1.28rem;
        padding: 0 0.32rem;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.02em;
        color: #fff;
        background: var(--cta);
        box-shadow: 0 0 0 2px rgba(255, 252, 248, 0.95);
        pointer-events: none;
        transform: translate(22%, -22%);
    }

    body.page-app .app-wishlist-fab__badge[hidden] {
        display: none !important;
    }
}

html.app--filters-sheet-open body.page-app .app-filter-fab,
html.app--filters-sheet-open body.page-app .app-wishlist-fab,
html.app--filters-sheet-open body.page-app .app-results-edge-fade {
    display: none !important;
}

html.nav-drawer-open body.page-app .app-filter-fab,
html.nav-drawer-open body.page-app .app-wishlist-fab,
html.nav-drawer-open body.page-app .app-results-edge-fade {
    display: none !important;
}

@keyframes farm-result-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes farm-skeleton-shimmer {
    from {
        background-position: 120% 0;
    }
    to {
        background-position: -120% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-scroll-top {
        transition-duration: 0.01ms;
    }

    body.page-app .app-filter-fab {
        transition-duration: 0.01ms;
    }

    body.page-app .app-wishlist-fab {
        transition-duration: 0.01ms;
    }

    .farm-result-enter,
    .farm-skeleton {
        animation: none;
    }
}