/* Blaauw Empire · Handel (handel.html): seitenspezifische Ergänzungen.
   Tokens, Hero, Kapitel, Kacheln, Chips, Steps, FAQ, CTA kommen aus css/site.css.
   Hier nur: <picture>-Schichtung, Kapitel-Knöpfe, Sortiment-Platzhalter, Lieferwege. */

/* <picture> soll sich wie ein nacktes <img> verhalten (Hero, Kapitel, CTA-Band) */
.cine-hero .media picture,.chapter .media picture,.cta-band .bg picture{display:contents}
/* Sobald das Video läuft (site.js setzt .has-video), tritt das Standbild zurück – wie auf der Startseite */
.cine-hero .media.has-video img{opacity:0;transition:transform 2.2s cubic-bezier(.16,1,.3,1),opacity 1.6s ease 1.2s}
.chapter .media.has-video img{opacity:0;transition:opacity 1.6s ease 1.2s}

/* Kapitel: Knöpfe unter dem Versprechen */
.chapter .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.chapter .txt .eyebrow{margin-bottom:2px}

/* Sortiment: Raster-Kopf */
#sort-tools{margin-top:0}
/* Chips: Tapfläche ≥ 44 px ohne sichtbare Änderung (site.css-Chip ist 33 px hoch) */
#sort-tools .chip{position:relative}
#sort-tools .chip::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
#produkte{min-height:220px}
#produkte .fleet-empty a{color:var(--gold)}

/* Sortiment: Platzhalter- und Produktkacheln */
.tile .ph-pic{position:relative;aspect-ratio:16/10;border:1px dashed rgba(200,169,90,.35);border-radius:4px;display:grid;place-items:center;margin:0 0 22px;overflow:hidden;color:rgba(200,169,90,.8);background:linear-gradient(180deg,rgba(30,77,183,.10),rgba(4,7,15,0))}
.tile .ph-pic svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tile .ph-pic .scan{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,169,90,.9),transparent);opacity:.7;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .tile .ph-pic .scan{animation:scan 6s cubic-bezier(.45,0,.55,1) infinite}
  .tile:nth-child(3n+2) .ph-pic .scan{animation-delay:-2s}
  .tile:nth-child(3n) .ph-pic .scan{animation-delay:-4s}
}
@keyframes scan{0%{top:0}50%{top:100%}100%{top:0}}
.tile .pic{aspect-ratio:16/10;overflow:hidden;border-radius:4px;margin:0 0 22px;background:#06091a}
.tile .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.tile:hover .pic img{transform:scale(1.06)}
.tile .demo-tag{margin-bottom:14px}
.tile .cat{display:block;font:600 10px/1 var(--fb);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.tile .meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin-top:18px;font:600 10px/1.3 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tile .meta b{display:block;color:#fff;font:600 14px/1.3 var(--fb);letter-spacing:0;text-transform:none;margin-top:5px}
.tile .btn.small{padding:16px 22px;font-size:12px;margin-top:20px} /* 12 + 2·16 = 44 px Tapfläche */
.tile.ph{display:flex;flex-direction:column}
.tile.ph .demo-tag{align-self:flex-start}
.tile.ph .btn{align-self:flex-start}
.tile.ph p{flex:1}

/* Lieferung und Abholung */
.weg{position:relative;border:1px solid var(--line);border-radius:4px;padding:clamp(26px,3.4vw,44px);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));overflow:hidden;height:100%}
.weg::before{content:"";position:absolute;left:0;top:0;width:44px;height:1px;background:var(--gold)}
.weg .ic{width:42px;height:42px;color:var(--gold);margin-bottom:22px}
.weg .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.weg h3{font:400 clamp(24px,2.4vw,34px)/1.15 var(--fd);color:#fff;margin:0 0 12px}
.weg p{color:var(--muted);margin:0 0 22px;max-width:40ch}
.weg .cities{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;font:400 clamp(20px,2.1vw,30px)/1.25 var(--fd);color:#fff}
.weg .cities li+li::before{content:"·";color:var(--gold);margin:0 16px}
.weg .note{font-size:13px;color:var(--muted);margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
@media (max-width:600px){
  .weg .cities{display:grid;gap:8px}
  .weg .cities li+li::before{content:"";display:inline-block;width:16px;height:1px;background:var(--gold);vertical-align:middle;margin:0 12px 0 0}
}

/* Reduzierte Bewegung: Platzhalter ruhig, Bilder sofort sichtbar */
@media (prefers-reduced-motion:reduce){
  .tile .ph-pic .scan{display:none}
  .tile:hover .pic img{transform:none}
}