/* ==========================================================================
   SCHNELLE Shop – Katalogseiten (Liste, Kategorie, Suche, Detail)
   Ergänzt app.css; nutzt ausschließlich die dortigen Tokens. Mobile zuerst,
   zweispaltiges Layout ab 992 px. Keine Inline-Styles, kein JavaScript außer
   Bootstrap-Collapse für die Panels unterhalb von 992 px. Alle Selektoren sind mit
   `main` qualifiziert, weil app.css über die Importmap erst nach dem stylesheets-Block
   geladen wird und gleich spezifische Regeln sonst verlieren würden.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kopfbereich und Layout
   -------------------------------------------------------------------------- */
main .catalog-intro--compact { padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.5rem, 3vw, 2rem); }
main .catalog-intro--compact .shop-breadcrumbs { margin-bottom: 1rem; }
main .catalog-intro--compact h1 { margin-bottom: .5rem; font-size: var(--shop-text-3xl); }
main .catalog-intro--compact .shop-intro { font-size: var(--shop-text-base); }
main .catalog-section--layout { padding-top: 1.5rem; }
main .catalog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
main .catalog-main { min-width: 0; }
main .catalog-layout.catalog-layout--overview { grid-template-columns: minmax(0, 1fr); }
.catalog-overview-banner { margin: 0; height: clamp(10rem, 24vw, 22rem); overflow: hidden; background: var(--shop-surface); }
.catalog-overview-banner img { width: 100%; height: 100%; object-fit: cover; }
main .category-content.category-content--overview { margin-top: 0; padding-top: 0; border-top: 0; }

/* --------------------------------------------------------------------------
   2. Kategoriebaum (Seitenleiste, unterhalb 992 px als Aufklapp-Panel)
   -------------------------------------------------------------------------- */
main .catalog-tree-toggle, main .catalog-filters-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 2.875rem; padding: .6rem .9rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); color: var(--shop-ink); background: var(--shop-canvas); font-family: var(--shop-font); font-size: var(--shop-text-sm); font-weight: 700; text-align: left; }
main .catalog-tree-toggle:hover, main .catalog-filters-toggle:hover { border-color: var(--shop-navy); color: var(--shop-navy); }
main .catalog-tree-toggle .shop-icon, main .catalog-filters-toggle .shop-icon { transition: transform var(--shop-transition); }
main .catalog-tree-toggle[aria-expanded="true"] .catalog-tree-toggle__chevron, main .catalog-filters-toggle[aria-expanded="true"] .shop-icon { transform: rotate(180deg); }
main .catalog-tree-toggle__text { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; min-width: 0; }
main .catalog-tree-toggle__current { color: var(--shop-text-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main .catalog-tree-panel { margin-top: .75rem; }
main .catalog-tree { overflow: hidden; background: var(--shop-canvas); }
main .catalog-tree li { margin: 0; }
main .catalog-tree a { position: relative; }
main .catalog-tree a .shop-icon { color: var(--shop-text-muted); transition: transform var(--shop-transition); }
main .catalog-tree a[aria-expanded="true"] .shop-icon { transform: rotate(180deg); color: var(--shop-navy); }
main .catalog-tree li.is-open > a { color: var(--shop-navy); border-bottom-color: transparent; }
main .catalog-tree ul { padding: .15rem 0 .6rem; background: var(--shop-surface); border-bottom: 1px solid var(--shop-line); }
main .catalog-tree ul a { padding-left: 1.75rem; }
main .catalog-tree ul a::before { content: ""; position: absolute; top: 50%; left: .9rem; width: .35rem; height: .35rem; border-radius: 50%; background: var(--shop-line-strong); transform: translateY(-50%); }
main .catalog-tree ul a[aria-current="page"]::before, main .catalog-tree ul a:hover::before { background: var(--shop-accent); }
main .catalog-tree a:focus-visible { z-index: 1; outline-offset: -3px; }
main .catalog-tree__all { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   3. Werkzeugleiste: Trefferzahl, Suchformular und Sortierung (L-12)
   Die Anordnung folgt der Breite der Werkzeugleiste (Container Query), nicht dem Viewport: Die Hauptspalte ist je
   nach Design und Filterposition unterschiedlich breit (im Design „schnelle-kompakt“ mit Filter in der Seitenleiste
   wurde der Platzhalter der Suche abgeschnitten). Trefferzahl und Seitenangabe stehen untereinander – ohne
   Trennpunkt, der beim Umbruch allein vor „Seite 1 von 1“ stand.
     schmal:  Treffer / Suche / Sortierung untereinander
     ≥ 36rem: Treffer | Sortierung, darunter die Suche über die volle Breite (ohne Sortierung: Treffer | Suche)
     ≥ 62rem: Treffer | Suche | Sortierung in einer Zeile
   -------------------------------------------------------------------------- */
main .catalog-toolbar { container-type: inline-size; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--shop-line); }
main .catalog-toolbar__grid { display: grid; grid-template-areas: "meta" "search" "sort"; grid-template-columns: minmax(0, 1fr); align-items: end; gap: .75rem 1.5rem; }
main .catalog-toolbar .catalog-meta { display: flex; grid-area: meta; flex-direction: column; gap: .1rem; min-width: 0; padding: 0; margin: 0; border: 0; }
main .catalog-toolbar .catalog-meta strong { color: var(--shop-ink); font-size: var(--shop-text-lg); font-weight: 800; }
main .catalog-toolbar .catalog-meta .catalog-meta__page { color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
main .catalog-toolbar .catalog-search { grid-area: search; width: 100%; min-width: 0; max-width: none; margin: 0; }
main .catalog-toolbar .catalog-search input { min-width: 0; border-color: var(--shop-line-strong); text-overflow: ellipsis; }
main .catalog-sort { display: grid; grid-area: sort; gap: .35rem; min-width: 0; margin: 0; }
main .catalog-sort label { color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 700; white-space: nowrap; }
main .catalog-sort__control { display: flex; min-width: 0; }
main .catalog-sort select { flex: 1 1 auto; min-width: 0; min-height: 2.875rem; padding: .55rem 2.25rem .55rem .75rem; border: 1px solid var(--shop-line-strong); border-right: 0; border-radius: var(--shop-radius) 0 0 var(--shop-radius); color: var(--shop-ink); background: var(--shop-canvas) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233d4b58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right .7rem center / 1rem; font: inherit; appearance: none; }
main .catalog-sort select:focus-visible { border-color: var(--shop-navy); outline: 3px solid var(--shop-navy-focus); outline-offset: 0; }
main .catalog-sort__apply { flex: 0 0 auto; min-height: 2.875rem; padding: .55rem .95rem; border: 1px solid var(--shop-navy); border-radius: 0 var(--shop-radius) var(--shop-radius) 0; color: var(--shop-navy); background: var(--shop-canvas); font-weight: 700; }
main .catalog-sort__apply:hover { color: var(--shop-text-on-dark); background: var(--shop-navy); }
/* Sehr schmal: Suchknopf nur mit Symbol (Text bleibt für Hilfstechnik), damit der Platzhalter ins Feld passt. */
@container (max-width: 29.99rem) {
    main .catalog-toolbar .catalog-search input { padding-inline: .65rem; }
    main .catalog-toolbar .catalog-search button { padding-inline: .8rem; }
    main .catalog-toolbar .catalog-search button span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
@container (min-width: 36rem) {
    main .catalog-toolbar__grid { grid-template-areas: "meta search"; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }
    main .catalog-toolbar__grid--sort { grid-template-areas: "meta sort" "search search"; grid-template-columns: minmax(0, 1fr) auto; }
    main .catalog-toolbar__grid--no-meta { grid-template-areas: "search"; grid-template-columns: minmax(0, 1fr); }
    main .catalog-toolbar__grid--sort.catalog-toolbar__grid--no-meta { grid-template-areas: "sort" "search"; }
    main .catalog-sort { display: flex; align-items: center; gap: .6rem; }
    main .catalog-sort__control { flex: 0 1 auto; }
    main .catalog-sort select { flex: 0 1 auto; width: 13.5rem; }
}
@container (min-width: 62rem) {
    main .catalog-toolbar__grid--sort { grid-template-areas: "meta search sort"; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem) auto; }
    main .catalog-toolbar__grid--sort.catalog-toolbar__grid--no-meta { grid-template-areas: "search sort"; grid-template-columns: minmax(20rem, 1fr) auto; }
}
main .catalog-search-hint { margin: 1rem 0 0; color: var(--shop-text-muted); font-size: var(--shop-text-sm); }

/* --------------------------------------------------------------------------
   4. Filterleiste (ohne JavaScript bedienbar) und aktive Filter
   -------------------------------------------------------------------------- */
main .catalog-filters { padding: 1rem; }
main .catalog-filters-heading { margin-bottom: 0; }
main .catalog-filters-heading h2 { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--shop-text-base); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
main .catalog-filters-heading h2 .shop-badge { font-style: normal; letter-spacing: 0; text-transform: none; }
main .catalog-filters-toggle { width: auto; min-height: 2.5rem; padding: .4rem .75rem; font-size: var(--shop-text-xs); }
main .catalog-filter-panel { padding-top: 1rem; }
main .catalog-filter-groups { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem 1.5rem; margin-bottom: 1rem; }
main .catalog-filter-groups fieldset { padding: .85rem 1rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
main .catalog-filter-groups legend { float: none; width: auto; padding: 0; margin-bottom: .35rem; font-size: var(--shop-text-xs); letter-spacing: .08em; text-transform: uppercase; }
main .catalog-filter-option { display: flex; align-items: center; gap: .6rem; min-height: 2.5rem; }
main .catalog-filter-option input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin: 0; accent-color: var(--shop-navy); }
main .catalog-filter-option label { display: flex; flex: 1 1 auto; align-items: center; min-height: 2.5rem; margin: 0; padding: 0; color: var(--shop-text); font-size: var(--shop-text-sm); font-weight: 500; cursor: pointer; }
main .catalog-filter-option input:checked + label { color: var(--shop-navy); font-weight: 700; }
main .catalog-filter-groups select { width: 100%; min-height: 8rem; padding: .35rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); color: var(--shop-ink); background: var(--shop-canvas); font: inherit; font-size: var(--shop-text-sm); }
main .catalog-filter-groups select option { padding: .4rem .5rem; }
main .catalog-filters__hint { margin: .35rem 0 0; color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
main .catalog-filters-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
main .catalog-filters-actions .shop-button-primary { min-width: 9rem; }
main .catalog-active-filters { margin: 0 0 1.25rem; }
main .catalog-active-filters > span { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
main .catalog-active-filters a { border-radius: 999px; border: 1px solid transparent; }
main .catalog-active-filters a:hover, main .catalog-active-filters a:focus-visible { color: var(--shop-text-on-dark); background: var(--shop-navy); }
main .catalog-active-filters a b { display: inline-grid; width: 1.1rem; height: 1.1rem; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .55); color: var(--shop-navy); font-size: .8rem; line-height: 1; }
main .catalog-active-filters a:hover b { background: var(--shop-canvas); }
main .catalog-active-filters__reset { margin-left: auto; color: var(--shop-ink); background: transparent !important; border-color: var(--shop-line-strong) !important; }
main .catalog-active-filters__reset:hover { color: var(--shop-text-on-dark) !important; background: var(--shop-ink) !important; }

/* --------------------------------------------------------------------------
   5. Produktraster und Karte
   -------------------------------------------------------------------------- */
main .catalog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; }
main .catalog-grid > li { min-width: 0; }
main .catalog-card { transform: none; }
main .catalog-card:hover { transform: translateY(-2px); }
main .catalog-card-visual { display: block; color: inherit; aspect-ratio: 4 / 3; }
main .catalog-card-visual:focus-visible { outline-offset: -3px; }
main .catalog-card-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
main .catalog-card-placeholder, main .product-gallery__placeholder { display: block; width: 100%; height: 100%; color: var(--shop-line-strong); }
main .catalog-card-placeholder .catalog-card-placeholder__mark, main .product-gallery__placeholder .catalog-card-placeholder__mark { fill: var(--shop-canvas); stroke: currentColor; stroke-width: 1.2; }
main .catalog-card-placeholder .catalog-card-placeholder__sun, main .product-gallery__placeholder .catalog-card-placeholder__sun { fill: var(--shop-navy-soft); stroke: var(--shop-navy); stroke-width: 1.2; }
main .catalog-card-placeholder .catalog-card-placeholder__hill, main .product-gallery__placeholder .catalog-card-placeholder__hill { fill: var(--shop-surface-strong); stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
main .catalog-card-badges:empty { display: none; }
main .catalog-card-visual > span:only-child { position: absolute; inset: 0; margin: auto; } /* Kürzel-Platzhalter (CMS-Produktraster) mittig statt oben links (a62) */
main .catalog-card-body { gap: .3rem; padding: 1rem 1rem 1.1rem; }
.catalog-card-specs { display: grid; gap: .55rem; margin: .65rem 0; font-size: var(--shop-text-xs); line-height: 1.4; }
.catalog-card-specs dt { font-weight: 700; color: var(--shop-ink); }
.catalog-card-specs dd { margin: 0; color: var(--shop-text-muted); overflow-wrap: anywhere; }
.catalog-card-availability, .catalog-card-store { margin: .2rem 0 0; }
.catalog-card-availability .shop-badge, .catalog-card-store .shop-badge { white-space: normal; text-align: left; }
.catalog-card-delivery, .catalog-card-net-price, .catalog-card-base-price, .catalog-card-list-price { margin: .1rem 0; color: var(--shop-text-muted); font-size: var(--shop-text-xs); line-height: 1.45; overflow-wrap: anywhere; }
main .catalog-card h2 { font-size: var(--shop-text-base); font-weight: 700; color: var(--shop-ink); }
main .catalog-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .35rem; margin: 0; font-size: var(--shop-text-lg); font-weight: 800; }
main .catalog-card-price__prefix { font-size: var(--shop-text-sm); font-weight: 600; color: var(--shop-text-muted); }
main .catalog-card-price__vat { flex-basis: 100%; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 500; }
main .catalog-card-price--on-request { font-size: var(--shop-text-base); font-style: italic; font-weight: 700; color: var(--shop-navy); }
main .catalog-card-actions { gap: .5rem; padding-top: .85rem; }
main .catalog-card-actions .shop-button-secondary, main .catalog-card-actions .shop-button-primary { flex: 1 1 100%; min-height: 2.75rem; padding-inline: .6rem; letter-spacing: .01em; } /* „Zur Anfrage hinzufügen“ passt in schmale Karten einzeilig (a62) */
main .catalog-card-actions .shop-button-secondary .shop-icon, main .catalog-card-actions .shop-button-primary .shop-icon { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   6. Seitennavigation, Leerzustände
   -------------------------------------------------------------------------- */
main .catalog-pagination { margin-top: 2rem; }
main .catalog-pagination .catalog-pagination__label { display: none; }
main .catalog-pagination .shop-pagination__ellipsis { border-color: transparent; color: var(--shop-text-muted); }
main .catalog-pagination a.catalog-pagination__arrow, main .catalog-pagination span.catalog-pagination__arrow { gap: .35rem; padding-right: .9rem; padding-left: .9rem; }
main .catalog-empty { margin-top: .5rem; }
main .catalog-empty .shop-empty__icon { color: var(--shop-navy); }
main .catalog-empty-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.5rem; color: var(--shop-navy); font-size: var(--shop-text-sm); font-weight: 700; }

/* --------------------------------------------------------------------------
   7. Produktdetail: Galerie, Titelblock, Datenblatt, Anfrage-Panel
   -------------------------------------------------------------------------- */
main .product-detail .shop-breadcrumbs { margin-bottom: 1rem; }
main .product-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
main .product-gallery { display: grid; gap: .75rem; }
main .product-gallery__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main .product-gallery__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: linear-gradient(160deg, var(--shop-surface) 0%, var(--shop-surface-strong) 100%); }
main .product-gallery__slide { position: absolute; inset: 0; display: none; margin: 0; }
main .product-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--shop-canvas); }
main .product-gallery__slide:first-child, main .product-gallery__slide.is-single { display: block; }
main .product-gallery__radio:checked ~ .product-gallery__stage .product-gallery__slide { display: none; }
main .product-gallery__radio:nth-of-type(1):checked ~ .product-gallery__stage .product-gallery__slide:nth-child(1),
main .product-gallery__radio:nth-of-type(2):checked ~ .product-gallery__stage .product-gallery__slide:nth-child(2),
main .product-gallery__radio:nth-of-type(3):checked ~ .product-gallery__stage .product-gallery__slide:nth-child(3),
main .product-gallery__radio:nth-of-type(4):checked ~ .product-gallery__stage .product-gallery__slide:nth-child(4),
main .product-gallery__radio:nth-of-type(5):checked ~ .product-gallery__stage .product-gallery__slide:nth-child(5),
main .product-gallery__radio:nth-of-type(6):checked ~ .product-gallery__stage .product-gallery__slide:nth-child(6),
main .product-gallery__radio:nth-of-type(7):checked ~ .product-gallery__stage .product-gallery__slide:nth-child(7),
main .product-gallery__radio:nth-of-type(8):checked ~ .product-gallery__stage .product-gallery__slide:nth-child(8) { display: block; }
main .product-gallery__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
main .product-gallery__thumbs label { display: block; width: 4.5rem; height: 4.5rem; padding: 0; overflow: hidden; border: 2px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); cursor: pointer; transition: border-color var(--shop-transition); }
main .product-gallery__thumbs label:hover { border-color: var(--shop-line-strong); }
main .product-gallery__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
main .product-gallery__radio:nth-of-type(1):checked ~ .product-gallery__thumbs label:nth-child(1),
main .product-gallery__radio:nth-of-type(2):checked ~ .product-gallery__thumbs label:nth-child(2),
main .product-gallery__radio:nth-of-type(3):checked ~ .product-gallery__thumbs label:nth-child(3),
main .product-gallery__radio:nth-of-type(4):checked ~ .product-gallery__thumbs label:nth-child(4),
main .product-gallery__radio:nth-of-type(5):checked ~ .product-gallery__thumbs label:nth-child(5),
main .product-gallery__radio:nth-of-type(6):checked ~ .product-gallery__thumbs label:nth-child(6),
main .product-gallery__radio:nth-of-type(7):checked ~ .product-gallery__thumbs label:nth-child(7),
main .product-gallery__radio:nth-of-type(8):checked ~ .product-gallery__thumbs label:nth-child(8) { border-color: var(--shop-navy); }
main .product-gallery__radio:nth-of-type(1):focus-visible ~ .product-gallery__thumbs label:nth-child(1),
main .product-gallery__radio:nth-of-type(2):focus-visible ~ .product-gallery__thumbs label:nth-child(2),
main .product-gallery__radio:nth-of-type(3):focus-visible ~ .product-gallery__thumbs label:nth-child(3),
main .product-gallery__radio:nth-of-type(4):focus-visible ~ .product-gallery__thumbs label:nth-child(4),
main .product-gallery__radio:nth-of-type(5):focus-visible ~ .product-gallery__thumbs label:nth-child(5),
main .product-gallery__radio:nth-of-type(6):focus-visible ~ .product-gallery__thumbs label:nth-child(6),
main .product-gallery__radio:nth-of-type(7):focus-visible ~ .product-gallery__thumbs label:nth-child(7),
main .product-gallery__radio:nth-of-type(8):focus-visible ~ .product-gallery__thumbs label:nth-child(8) { outline: 3px solid var(--shop-navy-focus); outline-offset: 2px; }
main .product-gallery__placeholder { padding: 12%; }

main .product-summary { display: grid; gap: 1rem; align-content: start; }
main .product-summary .shop-eyebrow { margin-bottom: 0; }
main .product-summary h1 { max-width: none; margin-bottom: 0; font-size: var(--shop-text-2xl); }
main .product-summary .catalog-card-badges { position: static; }
main .product-summary__teaser { margin: 0; color: var(--shop-text); font-size: var(--shop-text-base); line-height: 1.65; }
main .product-summary__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
main .product-summary__meta li { display: inline-flex; align-items: center; gap: .4rem; }
main .product-summary__meta .shop-icon { width: 1rem; height: 1rem; }
main .product-summary__meta a, main .product-inquiry__links a { display: inline-flex; align-items: center; min-height: 1.5rem; } /* Zielgröße 24 px (a62) */

/* Preisblock der Detailseite: Stückpreis, UVP, MwSt.-Hinweis, Staffeltabelle, Verfügbarkeit, Warenkorb-Formular */
main .product-price { display: grid; gap: .5rem; margin: 0; padding: 1.1rem 1.25rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); }
main .product-price__main { margin: 0; font-size: var(--shop-text-2xl); font-weight: 800; line-height: 1.15; color: var(--shop-ink); }
main .product-price__main.product-price--on-request { font-size: var(--shop-text-lg); font-style: italic; font-weight: 700; color: var(--shop-navy); }
main .product-price__prefix { font-size: var(--shop-text-sm); font-weight: 600; color: var(--shop-text-muted); }
main .product-price__list { margin: 0; color: var(--shop-text-muted); font-size: var(--shop-text-sm); font-weight: 500; }
main .product-price__list s { text-decoration: line-through; }
main .product-price__vat { display: block; margin-top: -.35rem; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 500; }
main .product-price__offline { margin: 0; color: var(--shop-text); font-size: var(--shop-text-sm); font-weight: 600; }
main .product-price__variants-hint { margin: 0; font-size: var(--shop-text-sm); }
main .product-price__variants-hint a { color: var(--shop-navy); font-weight: 700; }
main .product-scale-prices { width: 100%; max-width: 22rem; margin: .25rem 0 0; border-collapse: collapse; font-size: var(--shop-text-sm); }
main .product-scale-prices caption { caption-side: top; padding: 0 0 .35rem; text-align: left; color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
main .product-scale-prices th, main .product-scale-prices td { padding: .35rem 0; border-bottom: 1px solid var(--shop-line); text-align: left; font-weight: 500; color: var(--shop-text); }
main .product-scale-prices thead th { color: var(--shop-text-muted); font-size: var(--shop-text-xs); }
main .product-scale-prices .is-numeric { padding-left: .75rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
main .product-scale-prices tbody td { font-weight: 700; color: var(--shop-ink); }
main .product-scale-prices tbody tr:last-child th, main .product-scale-prices tbody tr:last-child td { border-bottom: 0; }
main .product-availability { margin: 0; }
main .product-cart-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: .25rem 0 0; padding-top: .85rem; border-top: 1px solid var(--shop-line); }
main .product-cart-add label { display: block; margin-bottom: .3rem; color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
main .product-cart-add input[type="number"] { display: block; width: 6rem; min-height: 2.875rem; padding: .65rem .85rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); background: var(--shop-canvas); color: var(--shop-ink); font-family: var(--shop-font); font-size: var(--shop-text-base); line-height: 1.4; }
main .product-cart-add .shop-button-accent { flex: 1 1 auto; }

main .product-variants { margin-top: 0; }
main .product-variants p { margin: 0 0 .25rem; color: var(--shop-text-muted); font-size: var(--shop-text-sm); }
main .product-variants li a { color: var(--shop-ink); font-weight: 700; text-decoration: none; }
main .product-variants li a:hover { color: var(--shop-navy); text-decoration: underline; }
main .product-variants li.is-current { background: var(--shop-navy-soft); }
main .product-variants li.is-current strong { color: var(--shop-navy); }

main .product-inquiry { display: grid; gap: .85rem; padding: 1.25rem; border: 1px solid var(--shop-line); border-top: .3rem solid var(--shop-accent); border-radius: var(--shop-radius); background: var(--shop-surface); scroll-margin-top: 1rem; }
main .product-inquiry h2 { margin: 0; font-size: var(--shop-text-lg); }
main .product-inquiry p { margin: 0; color: var(--shop-text); font-size: var(--shop-text-sm); }
main .product-inquiry .product-inquiry-add { margin-top: 0; }
main .product-inquiry .product-inquiry-add label { color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
main .product-inquiry .product-inquiry-add input[type="number"] { width: 6rem; background: var(--shop-canvas); }
main .product-inquiry .product-inquiry-add .shop-button-primary { flex: 1 1 auto; }
main .product-inquiry__links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--shop-text-sm); }
main .product-inquiry__links a { color: var(--shop-navy); font-weight: 700; }

main .product-details { display: grid; gap: 2rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
main .product-details > section { min-width: 0; }
main .product-details h2 { margin-bottom: 1rem; font-size: var(--shop-text-xl); }
main .product-description { max-width: 70ch; }
main .product-description p:last-child { margin-bottom: 0; }
main .shop-datasheet-wrap { border: 1px solid var(--shop-line); border-radius: var(--shop-radius); overflow: hidden; }
main .shop-datasheet-wrap .shop-table { border-collapse: collapse; }
main .shop-datasheet-wrap .shop-table th[scope="row"] { width: 38%; color: var(--shop-text-muted); font-weight: 600; background: var(--shop-surface); }
main .shop-datasheet-wrap .shop-table tbody tr:last-child th, main .shop-datasheet-wrap .shop-table tbody tr:last-child td { border-bottom: 0; }
main .shop-datasheet-wrap .shop-table td { color: var(--shop-ink); font-weight: 600; }
main .shop-datasheet-wrap .shop-table thead th { white-space: normal; }

/* Artikelstammdaten (E-34) und erlaubte Aktionen (E-35): Kurztext, Grundpreis, Lieferzeit, Anfragearten, Downloads */
main .product-summary__short { margin: 0; color: var(--shop-text); font-size: var(--shop-text-base); font-weight: 600; line-height: 1.55; }
main .product-price__base { margin: -.2rem 0 0; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
main .product-delivery { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--shop-text); font-size: var(--shop-text-sm); font-weight: 600; }
main .product-delivery .shop-icon { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; color: var(--shop-navy); }
main .product-inquiry__types { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
main .product-downloads { margin-top: 1.75rem; }
main .product-downloads__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
main .product-downloads__link { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .7rem .85rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); color: var(--shop-ink); font-weight: 700; text-decoration: none; }
main .product-downloads__link:hover { border-color: var(--shop-navy); color: var(--shop-navy); }
main .product-downloads__link:focus-visible { outline: 3px solid var(--shop-navy-focus); outline-offset: 2px; }
main .product-downloads__icon { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; color: var(--shop-accent); }
main .product-downloads__title { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
main .product-downloads__meta { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; white-space: nowrap; }
main .catalog-card-short { display: -webkit-box; margin: 0; overflow: hidden; color: var(--shop-text-muted); font-size: var(--shop-text-sm); line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* --------------------------------------------------------------------------
   8. Responsive Anpassungen
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
    main .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    main .catalog-card-actions .shop-button-secondary, main .catalog-card-actions .shop-button-primary { flex-basis: 100%; }
}

@media (min-width: 576px) {
    main .product-inquiry .product-inquiry-add .shop-button-primary { flex: 0 1 auto; min-width: 14rem; }
    main .product-cart-add .shop-button-accent { flex: 0 1 auto; min-width: 14rem; }
}

@media (min-width: 768px) {
    main .catalog-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    main .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
    main .catalog-pagination .catalog-pagination__label { display: inline; }
}

@media (min-width: 992px) {
    main .catalog-layout { grid-template-columns: 16.5rem minmax(0, 1fr); gap: 2.5rem; }
    main .catalog-sidebar { position: sticky; top: 1rem; }
    main .catalog-tree-panel { margin-top: 0; }
    main .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    main .catalog-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    main .product-detail-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; }
    main .product-summary h1 { font-size: var(--shop-text-3xl); }
    main .product-details { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } /* gleiche Spalten wie Galerie/Kaufbox (a62) */
    [data-layout-product-gallery="left"] main .product-gallery { position: sticky; top: 1rem; } /* kein leerer Raum unter der Galerie neben langen Kaufspalten (a62) */
}

@media (min-width: 1200px) {
    main .catalog-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: 3rem; }
}

@media (min-width: 1400px) {
    main .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    main .catalog-card, main .catalog-card:hover { transform: none; transition: none; }
    main .catalog-tree a .shop-icon, main .catalog-tree-toggle .shop-icon, main .catalog-filters-toggle .shop-icon { transition: none; }
}

/* ==========================================================================
   Kategoriekopf und Kategorie-Aktionen (E-36) – eigener Abschnitt der
   Kategorie-/Aktionsinhalte; Produktregeln stehen oberhalb.
   ========================================================================== */
main .catalog-category-header { display: grid; gap: 1.25rem; align-items: center; }
main .catalog-category-header__text { min-width: 0; }
main .catalog-category-description { max-width: 68ch; margin-top: .75rem; color: var(--shop-text-muted); }
main .catalog-category-description p { margin-bottom: .75rem; }
main .catalog-category-description p:last-child { margin-bottom: 0; }
main .catalog-category-image { margin: 0; overflow: hidden; border-radius: var(--shop-radius-lg); background: var(--shop-navy-soft); }
main .catalog-category-image img { display: block; width: 100%; height: auto; max-height: 18rem; object-fit: cover; }

main .catalog-promotions { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
main .catalog-promotion { position: relative; display: grid; overflow: hidden; border-radius: var(--shop-radius); color: var(--shop-text-on-dark); background: var(--shop-navy); }
main .catalog-promotion__picture img { display: block; width: 100%; height: 100%; max-height: 14rem; object-fit: cover; }
main .catalog-promotion__body { display: grid; gap: .4rem; align-content: center; justify-items: start; padding: 1.25rem 1.5rem; }
main .catalog-promotion__eyebrow { margin: 0; color: var(--shop-text-on-dark); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
main .catalog-promotion__title { margin: 0; color: var(--shop-text-on-dark); font-size: var(--shop-text-xl); font-style: italic; font-weight: 800; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
main .catalog-promotion__text { margin: 0; color: var(--shop-text-on-dark-muted); font-size: var(--shop-text-sm); line-height: 1.5; }
main .catalog-promotion__link { margin-top: .25rem; color: var(--shop-text-on-dark); font-size: var(--shop-text-sm); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
main .catalog-promotion__link:hover, main .catalog-promotion__link:focus-visible { color: var(--shop-text-on-dark); text-decoration-thickness: 2px; }
main .catalog-promotion__link:focus-visible { outline-color: var(--shop-text-on-dark); }
/* Zielgröße mindestens 24 px auch auf Telefonen (Design-Review-Prüfung in tests/E2E/themes.spec.ts; a68) */
main .catalog-promotion__link { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.5rem; }

@media (min-width: 768px) {
    main .catalog-category-header--image { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; }
    main .catalog-promotion--image { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    main .catalog-promotion--image .catalog-promotion__picture img { max-height: none; min-height: 10rem; }
}
/* Ende Abschnitt E-36 */

/* --------------------------------------------------------------------------
   E-43: Blockinhalt an Artikeln (unter der Beschreibung) und Kategorien (unter dem Raster).
   Grundgestaltung der Blöcke kommt aus app.css/content.css; hier nur Abstände und Raster.
   -------------------------------------------------------------------------- */
main .content-blocks { margin-top: 2rem; }
main .content-blocks > :first-child { margin-top: 0; }
main .content-blocks > h2 { margin: 2rem 0 1rem; font-size: var(--shop-text-xl); }
main .content-blocks > h3 { margin: 1.5rem 0 .75rem; font-size: var(--shop-text-lg); }
main .content-blocks .content-product-grid, main .content-blocks .content-category-grid { margin: 2rem 0; }
main .category-content { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--shop-line); }
@media (min-width: 992px) {
    /* Die Artikelbeschreibung ist eine halbe Spalte: Raster zweispaltig statt drei-/vierspaltig. */
    main .product-content .content-product-grid .col-lg-4, main .product-content .content-category-grid .col-lg-3 { flex: 0 0 auto; width: 50%; }
}
/* Ende Abschnitt E-43 */

/* === E-47/E-48: Variantenwahl, Vorteile, Lieferumfang, Mietkonditionen, Medienlinks (Anfang) === */
main .product-variant-select { display: grid; gap: .6rem; padding: 1rem 1.25rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-surface); scroll-margin-top: 1rem; }
main .product-variant-select__heading { margin: 0; font-size: var(--shop-text-base); }
main .product-variant-select__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
main .product-variant-select__field { display: grid; gap: .3rem; flex: 1 1 10rem; min-width: 0; }
main .product-variant-select__field label { color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
main .product-variant-select__field select { width: 100%; min-height: 2.875rem; padding: .55rem .75rem; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-radius); background: var(--shop-canvas); color: var(--shop-ink); font-family: var(--shop-font); font-size: var(--shop-text-base); }
main .product-variant-select__field select:focus-visible { outline: 3px solid var(--shop-navy-focus); outline-offset: 2px; }
main .product-variant-select__submit { flex: 0 0 auto; min-height: 2.875rem; }
main .product-variant-select__status:empty { display: none; }
main .product-variant-select__message { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; color: var(--shop-text); font-size: var(--shop-text-sm); font-weight: 600; }
main .product-variant-select__message.is-unavailable { color: var(--shop-danger, #a4232f); }
main .product-variant-select__message.is-resolved { color: var(--shop-ink); }
main .product-variant-select__message a { color: var(--shop-navy); font-weight: 700; }
main .product-variant-select__sku { color: var(--shop-text-muted); font-weight: 500; }
main .product-variants__table th, main .product-variants__table td { white-space: normal; overflow-wrap: normal; }
main .product-variants__table thead th { letter-spacing: .04em; }
@media (max-width: 575.98px) {
    /* Schmale Telefone: kleinere Schrift statt Trennung mitten im Wort („GEW/ICHT“), Umbruch nur an Bindestrichen (a62) */
    main .product-variants__table { font-size: var(--shop-text-xs); }
    main .product-variants__table th, main .product-variants__table td { padding: .6rem .45rem; }
    main .product-variants__table thead th { font-size: .6875rem; letter-spacing: 0; hyphens: auto; overflow-wrap: anywhere; } /* Kopf darf notfalls trennen, damit die Tabelle nicht seitlich scrollt */
}
main .product-variants__table th[scope="row"] a { color: var(--shop-ink); font-weight: 700; text-decoration: none; }
main .product-variants__table th[scope="row"] a:hover, main .product-variants__table th[scope="row"] a:focus { color: var(--shop-navy); text-decoration: underline; }
main .product-variants__table tr.is-current th, main .product-variants__table tr.is-current td { background: var(--shop-navy-soft); }
main .product-advantages { display: grid; gap: .5rem; }
main .product-advantages__heading { margin: 0; font-size: var(--shop-text-base); }
main .product-advantages__list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; font-size: var(--shop-text-sm); }
main .product-advantages__list li { display: flex; align-items: flex-start; gap: .5rem; color: var(--shop-text); }
main .product-advantages__list .shop-icon { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--shop-success); stroke-width: 2.5; }
main .product-scope__list { max-width: 70ch; margin: 0; padding-left: 1.25rem; }
main .product-scope__list li { margin-bottom: .25rem; }
main .product-rental__terms { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--shop-text); font-size: var(--shop-text-sm); font-weight: 600; }
main .product-media-links { margin-top: 1.75rem; }
main .product-media-links__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
main .product-media-links__link { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .7rem .85rem; border: 1px solid var(--shop-line); border-radius: var(--shop-radius); background: var(--shop-canvas); color: var(--shop-ink); font-weight: 700; text-decoration: none; }
main .product-media-links__link:hover { border-color: var(--shop-navy); color: var(--shop-navy); }
main .product-media-links__link:focus-visible { outline: 3px solid var(--shop-navy-focus); outline-offset: 2px; }
main .product-media-links__icon { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; color: var(--shop-navy); }
main .product-media-links__title { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
main .product-media-links__meta { color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; white-space: nowrap; }
/* === E-47/E-48 (Ende) === */

/* --------------------------------------------------------------------------
   Beziehungen und Pfand (E-47, E-49): Boxen „Passendes Zubehör“ / „Das könnte Sie auch interessieren“
   unter den Artikeldetails (Karten mit h3), Pfandhinweis am Preis und auf der Karte.
   -------------------------------------------------------------------------- */
main .product-relations { margin-top: clamp(2rem, 5vw, 3.5rem); }
main .product-relations__heading { margin-bottom: 1rem; font-size: var(--shop-text-xl); }
main .catalog-card h3 { margin: 0; font-size: var(--shop-text-base); font-weight: 700; line-height: 1.3; color: var(--shop-ink); }
main .product-price__deposit { margin: -.2rem 0 0; color: var(--shop-text); font-size: var(--shop-text-sm); font-weight: 600; }
main .catalog-card-price__deposit { margin: 0; color: var(--shop-text-muted); font-size: var(--shop-text-xs); font-weight: 600; }

/* Mietformular der Artikelseite (E-50/E-51): Zeitraum, Anzahl, Zubehör, Lieferart, Haftungsbegrenzung */
main .product-rental { display: grid; gap: .85rem; padding: 1.25rem; border: 1px solid var(--shop-line); border-top: .3rem solid var(--shop-navy); border-radius: var(--shop-radius); background: var(--shop-canvas); scroll-margin-top: 1rem; }
main .product-rental h2 { margin: 0; font-size: var(--shop-text-lg); }
main .product-rental__lead { margin: 0; color: var(--shop-text); font-size: var(--shop-text-sm); }
main .product-rental-add { display: grid; gap: 1rem; }
main .product-rental-add__group { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
main .product-rental-add__row > .shop-field { align-content: start; min-width: 0; }
main .product-rental-add .shop-field__error { overflow-wrap: anywhere; }
main .product-rental-add__group legend { float: none; width: auto; padding: 0; margin-bottom: .35rem; color: var(--shop-ink); font-size: var(--shop-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
main .product-rental-add__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
main .product-rental-add .shop-field__label, main .product-rental-add__quantity label { font-size: var(--shop-text-xs); letter-spacing: .08em; text-transform: uppercase; }
main .product-rental-add input[type="date"] { min-width: 0; width: 100%; }
main .product-rental-add__quantity input[type="number"] { width: 6rem; }
main .product-rental-add__accessory-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
main .product-rental-add__accessory { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: .25rem .75rem; }
main .product-rental-add__accessory label { margin: 0; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 600; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
main .product-rental-add__accessory .shop-field__error { grid-column: 1 / -1; }
main .product-rental-add__accessory input[type="number"] { width: 5rem; }
main .product-rental-add__choices { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
main .product-rental-add__choice { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin: 0; color: var(--shop-ink); font-size: var(--shop-text-sm); font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
main .product-rental-add__choice input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--shop-navy); } /* Zielgröße 24 px (a62) */
main .product-rental-add__liability { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: .85rem 1rem; border-left: .25rem solid var(--shop-navy); border-radius: var(--shop-radius); background: var(--shop-navy-soft); }
main .product-rental-add__liability .shop-icon { color: var(--shop-navy); }
main .product-rental-add__liability p { margin: 0; }
main .product-rental-add__liability-title { color: var(--shop-navy); font-size: var(--shop-text-sm); font-weight: 700; }
main .product-rental-add__liability-text { color: var(--shop-text); font-size: var(--shop-text-xs); line-height: 1.5; white-space: pre-line; }
main .product-rental-add__submit { justify-content: center; width: 100%; }
main .product-rental-add__error-summary:focus { outline: 3px solid var(--shop-danger); outline-offset: 2px; }
main .product-rental__variants { margin: 0; font-size: var(--shop-text-sm); font-weight: 600; }


/* ==========================================================================
   Layoutvarianten des Shop-Designs (Paket P8, docs/Themes_01.md) und Slot-Bereiche
   der Katalogseiten. Die Varianten hängen an data-*-Attributen am <body>
   (templates/base.html.twig); Standard = bisheriges Aussehen (Filter oben,
   Galerie links, vier Artikel je Reihe ab 1400 px).
   ========================================================================== */
main .catalog-slot--before-list { margin-bottom: 1.5rem; }
main .catalog-slot--after-list { margin-top: 2rem; }
main .catalog-slot--sidebar { margin-top: 1.5rem; }
main .catalog-slot > :first-child, main .product-slot > :first-child, main .product-aside > :first-child { margin-top: 0; }
main .catalog-slot > :last-child, main .product-slot > :last-child, main .product-aside > :last-child { margin-bottom: 0; }
main .product-slot, main .product-aside { margin-top: 1.5rem; }
main .catalog-category-header__aside { min-width: 0; }

/* Filter in der Seitenleiste („sidebar“): eine Spalte unter dem Kategoriebaum, aktive Filter darunter. */
main .catalog-filters--sidebar { margin-top: 1rem; }
main .catalog-filters--sidebar .catalog-filter-groups { grid-template-columns: minmax(0, 1fr); }
main .catalog-filters--sidebar + .catalog-active-filters { margin: 1rem 0 0; }
main .catalog-filters--sidebar + .catalog-active-filters .catalog-active-filters__reset { margin-left: 0; }

/* Galerie oben („top“): Bilder in voller Breite (flacheres Format), Preis und Kauf darunter. */
@media (min-width: 768px) {
    [data-layout-product-gallery="top"] main .product-detail-grid { grid-template-columns: minmax(0, 1fr); }
    [data-layout-product-gallery="top"] main .product-gallery__stage { aspect-ratio: 16 / 9; }
}

@media (min-width: 992px) {
    /* Die Seitenleiste mit Filtern ist oft höher als das Fenster; mitlaufen würde den unteren Teil verdecken. */
    [data-layout-category-filter="sidebar"] main .catalog-sidebar { position: static; }
    [data-layout-product-gallery="top"] main .product-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    [data-layout-product-gallery="top"] main .product-gallery__stage { max-height: 34rem; }
    [data-layout-product-gallery="top"] main .product-summary { max-width: 56rem; }
    [data-listing-columns="3"] main .catalog-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Artikel je Reihe: „3“ bleibt auch auf breiten Bildschirmen bei drei Spalten (Standard „4“ ab 1400 px). */
@media (min-width: 1400px) {
    [data-listing-columns="3"] main .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}