/* affilinode – Karte, waagerechte Box, Grid und Liste. Benötigt frontend.css */

/* Karte */
.acp-tile{display:flex;flex-direction:column;height:100%}
.acp-t-product-card>.acp-tile{max-width:24rem}
.acp-tile>:not(.acp-tile__top){padding-inline:1.15rem}
.acp-tile__top{display:flex;flex-direction:column}
.acp-tile .acp-notice{border-radius:var(--acp-radius) var(--acp-radius) 0 0}
.acp-tile__media{position:relative;padding:.75rem .75rem 0}
.acp .acp-tile__img{aspect-ratio:4/3}
.acp-tile__flags{position:absolute;top:1.2rem;left:1.2rem;z-index:1;display:flex;align-items:center;gap:.35rem}
.acp-tile__head{padding-top:1rem;align-content:start}
.acp-tile__facts{padding-top:.8rem;padding-bottom:1rem;font-size:.875rem;align-self:start}
.acp-tile__buy{display:grid;align-content:start;gap:.35rem;margin-top:auto;padding-top:.9rem!important;border-top:1px solid var(--acp-line);margin-inline:1.15rem;padding-inline:0!important}
.acp-tile__cta{display:grid;align-content:start;gap:.5rem;padding-top:.75rem;padding-bottom:1.15rem}
.acp-tile .acp-foot{padding-inline:1.15rem}
.acp-tile .acp-price{font-size:1.5rem}

/* Grid: 1 → 2 → 3 → 4 Spalten nach Containerbreite, begrenzt durch columns; letzte Reihe linksbündig */
.acp .acp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin:0;padding:0;list-style:none}
.acp .acp-grid__item{display:grid;margin:0;padding:0;min-width:0}
@container acp (min-width:30rem){.acp .acp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container acp (min-width:52rem){.acp .acp-grid:is(.acp-grid--c3,.acp-grid--c4){grid-template-columns:repeat(3,minmax(0,1fr))}}
@container acp (min-width:68rem){.acp .acp-grid--c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@supports (grid-template-rows:subgrid){
.acp .acp-grid__item{grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.acp-grid__item>.acp-tile{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.acp-grid__item .acp-tile__buy{margin-top:0}
}

/* Karussell (#80): waagerechte Reihe mit Scroll-Snap, ohne JavaScript per Wischen/Scrollen/Tab; Knöpfe erst mit
   carousel.js. Feste Kartenbreite je Containerbreite (wie das Grid) – nichts springt beim Laden oder Blättern. */
.acp .acp-carousel{position:relative}
.acp .acp-carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:1.25rem;margin:0;padding:.25rem .125rem 1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin}
@container acp (min-width:30rem){.acp .acp-carousel__track{grid-auto-columns:calc((100% - 1.25rem)/2)}}
@container acp (min-width:52rem){.acp .acp-carousel:is(.acp-carousel--c3,.acp-carousel--c4) .acp-carousel__track{grid-auto-columns:calc((100% - 2.5rem)/3)}}
@container acp (min-width:68rem){.acp .acp-carousel--c4 .acp-carousel__track{grid-auto-columns:calc((100% - 3.75rem)/4)}}
.acp .acp-carousel__slide{display:grid;min-width:0;scroll-snap-align:start}
.acp-carousel__slide>.acp-tile{height:100%}
@media (prefers-reduced-motion:no-preference){.acp .acp-carousel__track{scroll-behavior:smooth}}
.acp .acp-carousel__controls{display:flex;justify-content:flex-end;gap:.5rem;margin:0 0 .75rem}
.acp .acp-carousel__controls[hidden]{display:none}
.acp .acp-carousel__btn{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;margin:0;padding:0;border:1px solid var(--acp-border);border-radius:999px;background:var(--acp-bg);color:var(--acp-text);font:inherit;cursor:pointer}
.acp .acp-carousel__btn:hover{border-color:var(--acp-accent);color:var(--acp-accent)}
.acp .acp-carousel__btn:focus-visible{outline:2px solid var(--acp-accent);outline-offset:2px}
.acp .acp-carousel__btn[aria-disabled=true]{opacity:.45;cursor:default;border-color:var(--acp-border);color:var(--acp-text)}
.acp-carousel__prev .acp-i{transform:scaleX(-1)}
[dir=rtl] .acp-carousel__prev .acp-i{transform:none}
[dir=rtl] .acp-carousel__next .acp-i{transform:scaleX(-1)}
.acp-carousel__rotation .acp-i--play,.acp-carousel__rotation.is-paused .acp-i--pause{display:none}
.acp-carousel__rotation.is-paused .acp-i--play{display:block}
@media (forced-colors:active){.acp .acp-carousel__btn{border-color:ButtonText}.acp .acp-carousel__btn[aria-disabled=true]{color:GrayText;border-color:GrayText}}

/* Waagerechte Box */
.acp-hz__grid{display:grid;grid-template-columns:7.5rem minmax(0,1fr);grid-template-areas:"media info" "buy buy";gap:1rem 1.1rem;padding:1rem}
.acp-hz__media{grid-area:media;position:relative;align-self:start}
.acp .acp-hz__img{aspect-ratio:1;--acp-in:7%}
.acp-hz__media .acp-rank{position:absolute;top:-.4rem;left:-.4rem;z-index:1;box-shadow:0 0 0 3px var(--acp-bg)}
.acp-hz__info{grid-area:info;display:grid;align-content:start;gap:.3rem;min-width:0}
.acp .acp-facts{display:grid;gap:.2rem;margin-top:.3rem;font-size:.8125rem}
.acp-facts li{display:flex;gap:.4rem;align-items:flex-start}
.acp-facts .acp-i{width:1.05em;height:1.05em;margin-top:.15em;color:var(--acp-ok)}
.acp-facts__label{color:var(--acp-muted)}
.acp-hz__buy{grid-area:buy;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding-top:.85rem;border-top:1px solid var(--acp-line)}
.acp-hz__price{display:grid;gap:.15rem;min-width:0}
.acp-hz .acp-price{font-size:1.5rem}
.acp .acp-hz__ship,.acp .acp-tile__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .7rem;font-size:.8125rem;color:var(--acp-muted)}
.acp-hz__ship .acp-dot,.acp-tile__meta .acp-dot{display:none}
.acp .acp-hz__btn{flex:1 1 11rem;max-width:100%}
.acp-hz .acp-status{padding:.55rem .8rem;flex:1}
@container acp (min-width:36rem){
.acp-hz__grid{grid-template-columns:9.5rem minmax(0,1fr) minmax(13rem,18rem);grid-template-areas:"media info buy";align-items:center;gap:1.25rem;padding:1.1rem 1.25rem}
.acp-hz__media{align-self:center}
.acp-hz__buy{flex-direction:column;align-items:stretch;justify-content:center;gap:.65rem;padding:0 0 0 1.25rem;border-top:0;border-left:1px solid var(--acp-line);align-self:stretch}
.acp .acp-hz__btn{flex:none;width:100%;white-space:nowrap}
.acp-hz .acp-status{flex:none}
}
@container acp (min-width:36rem) and (max-width:44rem){.acp-hz__grid{grid-template-columns:7.5rem minmax(0,1fr) 11.5rem}.acp-hz .acp-facts{display:none}}

/* Liste */
.acp-list__head{margin-bottom:1.1rem}
.acp .acp-list__title{margin:0;font-size:clamp(1.25rem,1.1rem + .8cqi,1.625rem);font-weight:750;line-height:1.25;letter-spacing:-.01em;color:var(--acp-text)}
.acp .acp-list__desc{margin-top:.35rem;color:var(--acp-muted)}
.acp .acp-rows{display:grid;gap:.85rem;margin:0;padding:0;list-style:none}
.acp .acp-rows__item{margin:0;padding:0}
.acp-list>.acp-disc{margin-top:1rem}
.acp-sp__group+.acp-sp__group{margin-top:1.75rem}
.acp .acp-sp__label{margin:0 0 .75rem;font-size:1.0625rem;font-weight:700;line-height:1.3;color:var(--acp-text)}
/* Ersatzteile in der Produktbox [ac_product spare_parts="1"] */
.acp-spares{margin:0 var(--acp-pad) 1rem;border-top:1px solid var(--acp-border);padding-top:.75rem}
.acp-spares__summary{cursor:pointer;font-weight:650;color:var(--acp-text);list-style:none}
.acp-spares__summary::-webkit-details-marker{display:none}
.acp-spares__summary::before{content:"▸";display:inline-block;margin-right:.375rem;transition:transform .15s}
.acp-spares[open] .acp-spares__summary::before{transform:rotate(90deg)}
.acp-spares__group+.acp-spares__group{margin-top:1rem}
.acp .acp-spares__label{margin:.75rem 0 .5rem;font-size:.9375rem;font-weight:650;color:var(--acp-muted)}
.acp-spares__fits{margin:0 var(--acp-pad) .75rem;color:var(--acp-muted);font-size:.875rem}
.acp-spares__fits-label{font-weight:650;color:var(--acp-text)}
/* „Darum passt es“ in Karten und Zeilen (partials/reasons.php): Produktberater und Alternativen */
.acp .acp-reasons{display:grid;gap:.2rem;margin:.4rem 0 0;padding:0;list-style:none;font-size:.875rem}
.acp .acp-reasons__title{margin:.5rem 0 0;font-weight:700;font-size:.8125rem}
.acp .acp-reasons li{display:flex;gap:.4rem;align-items:baseline}
.acp-reasons svg{flex:none;width:.9rem;height:.9rem;color:var(--acp-ok);transform:translateY(.12rem)}
.acp .acp-reasons li.acp-reasons__trade{color:var(--acp-muted)}
.acp-reasons .acp-reasons__trade svg{color:var(--acp-muted)}
/* Alternativen [affilinode_alternatives] bzw. unter der Produktbox (alternatives="1") */
.acp-alts--box{margin-top:1.25rem}
.acp .acp-alts .acp-list__title{font-size:clamp(1.125rem,1rem + .6cqi,1.375rem)}