.aart-mb { --aart-accent: #8F000A; --aart-line: #E7E3DC; font-family: inherit; color: #252525; max-width: 1280px; margin: 0 auto; }
.aart-mb * { box-sizing: border-box; }
.aart-mb__bar { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.aart-mb__search { flex: 1 1 280px; padding: 12px 14px; border: 1px solid var(--aart-line); font-size: 1rem; }
.aart-mb__search:focus, .aart-mb__sort:focus { outline: none; border-color: var(--aart-accent); }
.aart-mb__sort { padding: 12px 14px; border: 1px solid var(--aart-line); background: #fff; font-size: .95rem; }
.aart-mb__reset { padding: 12px 16px; border: 1px solid var(--aart-line); background: #fff; cursor: pointer; font-size: .9rem; }
.aart-mb__reset:hover { border-color: var(--aart-accent); }

.aart-mb__layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.aart-mb__facets { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 8px; }
.aart-mb__facet { border: 1px solid var(--aart-line); background: #fff; }
.aart-mb__facet > summary { cursor: pointer; padding: 11px 13px; font-weight: 600; font-size: .9rem; list-style: none; }
.aart-mb__facet > summary::-webkit-details-marker { display: none; }
.aart-mb__facet > summary::after { content: "+"; float: right; color: #999; }
.aart-mb__facet[open] > summary::after { content: "–"; }
.aart-mb__facetbox { max-height: 240px; overflow: auto; padding: 6px 13px 12px; display: flex; flex-direction: column; gap: 7px; border-top: 1px solid #eee; }
.aart-mb__opt { display: flex; align-items: center; gap: 8px; font-size: .85rem; cursor: pointer; line-height: 1.3; }
.aart-mb__opt input { accent-color: var(--aart-accent); flex: 0 0 auto; }
.aart-mb__opt span:first-of-type { flex: 1; }
.aart-mb__cnt { color: #9a9a9a; font-size: .72rem; }

.aart-mb__meta { color: #777; font-size: .85rem; margin: 0 0 14px; }
.aart-mb__grid { display: grid; grid-template-columns: repeat(var(--aart-mb-cols, 4), 1fr); gap: 18px; }
.aart-mb__item { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
/* Karte = div mit zwei Links: Bild+Titel in den Konfigurator, Name auf die Kuenstlerseite. */
.aart-mb__link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; }
.aart-mb__imgwrap { aspect-ratio: 1 / 1; background: #f4f4f2; border: 1px solid #e7e3dc; overflow: hidden; display: flex; }
.aart-mb__img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.aart-mb__item:hover .aart-mb__img { transform: scale(1.04); }
.aart-mb__title { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.aart-mb__artist { font-size: .78rem; color: #888; text-decoration: none; align-self: flex-start; }
a.aart-mb__artist:hover, a.aart-mb__artist:focus-visible { color: var(--aart-accent); text-decoration: underline; }

.aart-mb__more-wrap { text-align: center; margin-top: 28px; }
.aart-mb__more { padding: 13px 28px; border: 0; background: var(--aart-accent); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.aart-mb__more:hover { background: #720008; }
.aart-mb__loading, .aart-mb__empty { color: #777; padding: 14px 0; }

@media (max-width: 820px) {
    .aart-mb__layout { grid-template-columns: 1fr; gap: 18px; }
    .aart-mb__facets { position: static; }
    .aart-mb__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Akustik-Konfigurator: Motivbrowser-Layout */
.aart-konfigurator-scope .aart-mb {
    --aart-brand-green: #001d18;
    padding-bottom: clamp(56px, 6vw, 88px);
}

.aart-konfigurator-scope .aart-mb__layout {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
}

.aart-konfigurator-scope .aart-mb__facets {
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #b8bcb9 transparent;
    padding-right: 19px;
    padding-bottom: 20px;
    border-right: 1px solid var(--aart-line);
}

body.admin-bar .aart-konfigurator-scope .aart-mb__facets {
    top: 56px;
    max-height: calc(100vh - 80px);
}

.aart-konfigurator-scope .aart-mb__facets::-webkit-scrollbar {
    width: 6px;
}

.aart-konfigurator-scope .aart-mb__facets::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: #b8bcb9;
}

.aart-konfigurator-scope .aart-mb__item,
.aart-konfigurator-scope .aart-mb__link,
.aart-konfigurator-scope .aart-mb__link:hover,
.aart-konfigurator-scope .aart-mb__item:hover,
.aart-konfigurator-scope .aart-mb__item:focus,
.aart-konfigurator-scope .aart-mb__item:focus-visible,
.aart-konfigurator-scope .aart-mb__title,
.aart-konfigurator-scope .aart-mb__artist {
    text-decoration: none !important;
}

.aart-konfigurator-scope .aart-mb__more-wrap {
    margin-top: 36px;
}

.aart-konfigurator-scope .aart-mb__more {
    min-width: 220px;
    min-height: 48px;
    padding: 14px 28px;
    border: 0 !important;
    border-radius: 0 !important;
    background: #8f000a !important;
    color: #fff !important;
    font-family: "Quicksand", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none !important;
    transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

.aart-konfigurator-scope .aart-mb__more:hover {
    background: var(--aart-brand-green) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.aart-konfigurator-scope .aart-mb__more:focus-visible {
    outline: 2px solid #8f000a !important;
    outline-offset: 3px;
}

@media (max-width: 820px) {
    .aart-konfigurator-scope .aart-mb {
        padding-bottom: 56px;
    }

    .aart-konfigurator-scope .aart-mb__layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .aart-konfigurator-scope .aart-mb__facets,
    body.admin-bar .aart-konfigurator-scope .aart-mb__facets {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
        scrollbar-gutter: auto;
        padding-right: 0;
        padding-bottom: 16px;
        border-right: 0;
    }
}

/* Akustik-Konfigurator: Filter und Toolbar bündig */
.aart-konfigurator-scope .aart-mb {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas:
        "filters toolbar"
        "filters motives";
    column-gap: 32px;
    row-gap: 18px;
    align-items: start;
}

.aart-konfigurator-scope .aart-mb__bar {
    grid-area: toolbar;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(190px, 220px) auto;
    gap: 12px;
    align-items: stretch;
    min-width: 0;
    margin-bottom: 0;
}

.aart-konfigurator-scope .aart-mb__layout {
    display: contents;
}

.aart-konfigurator-scope .aart-mb__facets {
    grid-area: filters;
    width: 260px;
}

.aart-konfigurator-scope .aart-mb__main {
    grid-area: motives;
    min-width: 0;
}

.aart-konfigurator-scope .aart-mb__search,
.aart-konfigurator-scope .aart-mb__sort {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

.aart-konfigurator-scope .aart-mb__sort {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 52px !important;
    background-color: #fff !important;
    background-image:
        linear-gradient(45deg, transparent 50%, #001d18 50%),
        linear-gradient(135deg, #001d18 50%, transparent 50%) !important;
    background-position:
        calc(100% - 28px) 50%,
        calc(100% - 23px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}

.aart-konfigurator-scope .aart-mb__reset {
    width: auto !important;
    min-height: 48px;
    margin: 0 !important;
    white-space: nowrap;
}

@media (max-width: 1100px) and (min-width: 821px) {
    .aart-konfigurator-scope .aart-mb {
        grid-template-columns: 240px minmax(0, 1fr);
        column-gap: 24px;
    }

    .aart-konfigurator-scope .aart-mb__facets {
        width: 240px;
    }

    .aart-konfigurator-scope .aart-mb__bar {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 200px);
    }

    .aart-konfigurator-scope .aart-mb__reset {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 820px) {
    .aart-konfigurator-scope .aart-mb {
        display: block;
    }

    .aart-konfigurator-scope .aart-mb__bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 18px;
    }

    .aart-konfigurator-scope .aart-mb__layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .aart-konfigurator-scope .aart-mb__facets,
    .aart-konfigurator-scope .aart-mb__main {
        grid-area: auto;
        width: auto;
    }

    .aart-konfigurator-scope .aart-mb__reset {
        justify-self: start;
    }
}

/* Akustik-Dropdown: Pfeil mit festem Randabstand */
.aart-konfigurator-scope .aart-mb select.aart-mb__sort {
    padding-right: 52px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001d18' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 18px center !important;
    background-size: 12px 7px !important;
    background-repeat: no-repeat !important;
}

/* Akustik: neutraler Toolbar-Rand und roter Button-Hover */
.aart-konfigurator-scope .aart-mb .aart-mb__bar {
    border: 0 !important;
    box-shadow: none !important;
}

.aart-konfigurator-scope .aart-mb button.aart-mb__more:hover {
    background: #720008 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Akustik: kompakte Filter ohne verschachtelte Scrollfalle */
.aart-konfigurator-scope .aart-mb .aart-mb__facets {
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
}

.aart-konfigurator-scope .aart-mb .aart-mb__facetbox {
    max-height: min(310px, calc(100vh - 300px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: auto;
    scrollbar-width: thin;
}

@media (max-width: 820px) {
    .aart-konfigurator-scope .aart-mb .aart-mb__facetbox {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Akustik: komplette Filtersektion im Viewport halten */
.aart-konfigurator-scope .aart-mb .aart-mb__facets {
    position: sticky !important;
    top: 24px !important;
    align-self: start;
    height: fit-content;
    max-height: calc(100vh - 48px);
    overflow: visible;
    z-index: 2;
}

body.admin-bar .aart-konfigurator-scope .aart-mb .aart-mb__facets {
    top: 56px !important;
    max-height: calc(100vh - 80px);
}

@media (max-width: 820px) {
    .aart-konfigurator-scope .aart-mb .aart-mb__facets,
    body.admin-bar .aart-konfigurator-scope .aart-mb .aart-mb__facets {
        position: static !important;
        top: auto !important;
        height: auto;
        max-height: none;
        z-index: auto;
    }
}

/* Akustik: Sticky-Abstand unter dem festen Elementor-Header */
.aart-konfigurator-scope .aart-mb .aart-mb__facets {
    top: 160px !important;
    max-height: calc(100vh - 184px);
}

body.admin-bar .aart-konfigurator-scope .aart-mb .aart-mb__facets {
    top: 192px !important;
    max-height: calc(100vh - 216px);
}

/* -110px zusaetzlich: Platz fuer den "Eigenes Motiv hochladen"-Block unter den
   Filtern — sonst haengt er auf flachen Viewports dauerhaft unterm Fold (sticky). */
.aart-konfigurator-scope .aart-mb .aart-mb__facetbox {
    max-height: clamp(120px, calc(100vh - 541px), 310px) !important;
}

body.admin-bar .aart-konfigurator-scope .aart-mb .aart-mb__facetbox {
    max-height: clamp(120px, calc(100vh - 573px), 310px) !important;
}

@media (max-width: 820px) {
    .aart-konfigurator-scope .aart-mb .aart-mb__facets,
    body.admin-bar .aart-konfigurator-scope .aart-mb .aart-mb__facets {
        top: auto !important;
        max-height: none;
    }

    .aart-konfigurator-scope .aart-mb .aart-mb__facetbox,
    body.admin-bar .aart-konfigurator-scope .aart-mb .aart-mb__facetbox {
        max-height: none !important;
    }
}

/* ============================================================================
   Standalone-Motivbrowser (z. B. Galerie-Seite): Filter links buendig oben,
   Such-/Sortierleiste schmaler rechts direkt ueber den Motiven; Filter bleiben
   beim Scrollen unter dem fixen Header sichtbar; kein Rand oben; Innenabstand
   oben/unten.
   WICHTIG: Alle Regeln sind per :not(.aart-konfigurator-scope *) strikt vom
   Konfigurator-Scope isoliert — der eingebettete Browser auf den Konfigurator-
   Seiten (wandbild/akustik/outdoor/soundbild) bleibt zu 100% beim Scope-Design
   (kein Durchsickern von Breite/Padding/Select/Hover, s. Audit 15.07.2026).
   ========================================================================== */
.aart-mb:not(.aart-konfigurator-scope *) {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-areas:
        "filters toolbar"
        "filters motives";
    column-gap: 32px;
    row-gap: 18px;
    align-items: start;
    padding-top: 30px;
    padding-bottom: 50px;
}

.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__bar {
    grid-area: toolbar;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 220px) auto;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 0;
    border-top: 0 !important;
}

.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__layout { display: contents; }

/* hoehere Spezifitaet, um Overrides aus aart-configurator-branding.css zu schlagen.
   top = Header (137px) + Abstand vom Seitenanfang (~40px), damit der Abstand ueber
   den Filtern beim Scrollen exakt so bleibt wie ganz oben. */
.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__facets {
    grid-area: filters;
    width: 260px;
    position: sticky;
    top: 177px;
    align-self: start;
    max-height: calc(100vh - 201px);
    overflow: visible;
}

.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__main { grid-area: motives; min-width: 0; }

.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__search,
.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__sort { width: 100%; min-width: 0; margin: 0; }

.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__reset { width: auto; margin: 0; white-space: nowrap; }

/* Dropdown-Pfeil mit festem Innenabstand (>= 10px vom rechten Rand) */
.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__bar select.aart-mb__sort {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 40px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001d18' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 15px center !important;
    background-size: 12px 7px !important;
    background-repeat: no-repeat !important;
}

/* Buttons: Hover wie im Akustik-Konfigurator (rot #720008 statt gruen) + leichter Lift.
   Hoehere Spezifitaet, um den gruenen Hover aus aart-configurator-branding.css zu schlagen. */
.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__more:hover {
    background: #720008 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__reset:hover {
    background: #720008 !important;
    border-color: #720008 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

/* Filter-Boxen: den Dropdown-Ausloeser (summary) samt +/- -Marker vertikal mittig
   in der Box zentrieren (Flex statt Float). */
.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__facet > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.aart-mb:not(.aart-konfigurator-scope *) .aart-mb__facet > summary::after {
    float: none !important;
}

@media (max-width: 820px) {
    .aart-mb:not(.aart-konfigurator-scope *) {
        display: block;
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .aart-mb:not(.aart-konfigurator-scope *) .aart-mb__bar {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 18px;
    }

    /* Einspaltig als normaler Fluss statt als Grid. Grund: die Kinder tragen aus
       dem Desktop-Layout benannte grid-area-Zuweisungen. Wird hier wieder ein Grid
       aufgemacht, ohne diese Namen zurueckzusetzen, gibt es keine passenden
       grid-template-areas mehr und beide Kinder landen in derselben impliziten
       Zelle: der Filterblock legt sich ueber die Motivkarten. Genau so sah es bei
       390 px Breite aus. Der Konfigurator-Zweig weiter oben macht es richtig und
       setzt grid-area auf auto. */
    .aart-mb:not(.aart-konfigurator-scope *) .aart-mb__layout {
        display: block;
    }

    .aart-mb:not(.aart-konfigurator-scope *) .aart-mb__facets,
    .aart-mb:not(.aart-konfigurator-scope *) .aart-mb__main {
        grid-area: auto;
        width: auto;
        min-width: 0;
    }

    .aart-mb:not(.aart-konfigurator-scope *) .aart-mb__facets {
        position: static;
        max-height: none;
        top: auto;
        margin-bottom: 18px;
    }
}

/* ============================================================================
   Kacheltitel/Kuenstlerzeile: niemals unterstreichen — das Theme setzt
   ".page-content a {underline}" (Spezifitaet 0,1,1) und gewinnt sonst auf
   Seiten OHNE Konfigurator-Scope (z. B. /tapeten/, /galerie/). 18.07.2026
   ========================================================================== */
.aart-mb .aart-mb__item,
.aart-mb .aart-mb__item:hover,
.aart-mb .aart-mb__item:focus,
.aart-mb .aart-mb__item:visited,
.aart-mb .aart-mb__link,
.aart-mb .aart-mb__link:hover,
.aart-mb .aart-mb__link:focus,
.aart-mb .aart-mb__link:visited,
.aart-mb .aart-mb__title,
.aart-mb .aart-mb__artist {
    text-decoration: none !important;
}
/* Titel erbt die Textfarbe, der Kuenstlername bleibt grau; beides gegen die
   Linkfarbe des Themes (.page-content a, Spezifitaet 0,1,1). Der Kuenstlerlink
   darf beim Zeigen unterstreichen, damit man ihn als Link erkennt. */
.aart-mb .aart-mb__link, .aart-mb .aart-mb__link:visited { color: inherit; }
.aart-mb .aart-mb__artist, .aart-mb .aart-mb__artist:visited { color: #888; }
.aart-mb a.aart-mb__artist:hover, .aart-mb a.aart-mb__artist:focus-visible { color: var(--aart-accent); text-decoration: underline !important; }

/* ============================================================================
   "Eigenes Motiv hochladen" — Direktzugang unter den Filtern (alle
   Motiv-Uebersichten: Akustik/Wandbild/Outdoor/Sound/Galerie/Tapeten).
   CD-Primaerbutton (rot, eckig, Quicksand) wie "Weitere Motive laden".
   ========================================================================== */
.aart-mb .aart-mb__upload {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--aart-line, #e7e3dc);
}
.aart-mb .aart-mb__upload-note {
    margin: 0 0 8px;
    font-size: .85rem;
    color: #696966;
}
.aart-mb .aart-mb__upload-btn,
.aart-konfigurator-scope .aart-mb a.aart-mb__upload-btn {
    display: block;
    text-align: center;
    padding: 13px 16px;
    border: 0 !important;
    border-radius: 0 !important;
    background: #8f000a !important;
    color: #fff !important;
    font-family: "Quicksand", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.aart-mb .aart-mb__upload-btn:hover,
.aart-mb .aart-mb__upload-btn:focus,
.aart-konfigurator-scope .aart-mb a.aart-mb__upload-btn:hover,
.aart-konfigurator-scope .aart-mb a.aart-mb__upload-btn:focus {
    background: #720008 !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.aart-mb .aart-mb__upload-btn:focus-visible {
    outline: 2px solid #8f000a !important;
    outline-offset: 3px;
}

/* Standalone-Sticky-Spalte (Galerie/Tapeten): offene Filterbox viewport-abhaengig
   einkuerzen, damit der Upload-Block auch auf flachen Bildschirmen sichtbar bleibt
   (Aside: top 177 + 4 Summaries + Upload-Block ≈ 490px Fixanteil). */
/* Nur am Desktop: dort ist die Spalte sticky und muss in den Viewport passen.
   Auf dem Handy steht der Filterblock im normalen Fluss, ein Hoehendeckel machte
   daraus eine 240px-Scrollbox mitten in der Seite. */
@media (min-width: 821px) {
    .aart-mb:not(.aart-konfigurator-scope *) .aart-mb__facetbox {
        max-height: clamp(110px, calc(100vh - 550px), 240px);
    }
}