/* Top-10-Karussell (30.10.2026): die meistgesuchten Vapes nach Google-Suchvolumen DE. Weiß, große Rangziffern, wischbar. Alles auf .tt begrenzt. */
.tt{
  --tt-ink:#14161d; --tt-ink-2:#444b5a; --tt-muted:#5f6677; --tt-line:#e3e6ee; --tt-soft:#f3f4f8;
  --tt-pink:#ff3d71; --tt-pink-ink:#b21746; --tt-ease:cubic-bezier(.23,1,.32,1); --tt-gate:0;
  --tt-card:clamp(232px,21vw,296px); --tt-gap:clamp(14px,1.8vw,26px);
  --tt-edge:max(20px,calc((100% - var(--maxw,1280px)) / 2 + 32px));
  margin-block:clamp(52px,6vw,84px);overflow-x:clip;color:var(--tt-ink);
}
.tt,.tt *{box-sizing:border-box}
:where(.tt) :where(h2,p,ol,li){margin:0;padding:0}
:where(.tt) :where(ol){list-style:none}
:where(.tt) :where(a){color:inherit;text-decoration:none}
.tt :focus-visible{outline:3px solid var(--tt-ink);outline-offset:3px}

.tt-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(14px,2vw,26px)}
.tt-head h2{font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:clamp(30px,1.25rem + 2.3vw,48px);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:var(--tt-ink);text-wrap:balance}
.tt-head h2 span{color:var(--tt-pink)}
.tt-head p{max-width:72ch;margin-top:10px;font-size:15px;line-height:1.55;color:var(--tt-ink-2)}
.tt-nav{display:flex;gap:10px;flex:none}
.tt-btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1.5px solid var(--tt-ink);border-radius:50%;background:#fff;color:var(--tt-ink);cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease,transform .16s var(--tt-ease)}
.tt-btn svg{width:20px;height:20px}
.tt-btn:active:not(:disabled){transform:scale(.94)}
.tt-btn:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){.tt-btn:not(:disabled):hover{background:var(--tt-ink);color:#fff}}

/* Spur: läuft bis an den Bildschirmrand, erste Karte bündig mit dem Container */
.tt-track{display:flex;gap:var(--tt-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--tt-edge);padding:8px var(--tt-edge) 18px;scrollbar-width:none;cursor:grab}
.tt-track::-webkit-scrollbar{display:none}
.tt-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.tt-track.is-dragging .tt-card{pointer-events:none}
.tt-item{flex:none;width:var(--tt-card);scroll-snap-align:start;transition:opacity .6s ease,transform .7s var(--tt-ease);transition-delay:calc((var(--i) * 60ms + 80ms) * var(--tt-gate))}
.tt-item.wide{width:calc(var(--tt-card) + var(--tt-card) * .16)}

.tt-card{position:relative;display:grid;grid-template-columns:var(--tt-num,30%) minmax(0,1fr);grid-template-rows:auto auto;column-gap:0;height:100%;-webkit-tap-highlight-color:transparent}
.tt-item.wide .tt-card{--tt-num:39%}
.tt-rank{grid-column:1 / span 2;grid-row:1;align-self:end;justify-self:start;position:relative;z-index:0;margin:0 0 -.12em -.04em;font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:calc(var(--tt-card) * .62);font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff;-webkit-text-stroke:4px var(--tt-ink);transition:color .25s ease;user-select:none}
.tt-tile{grid-column:2;grid-row:1;position:relative;z-index:1;display:block;aspect-ratio:4/5;border-radius:16px;background:var(--tt-soft);overflow:hidden;box-shadow:0 1px 0 #14161d0a;transition:transform .3s var(--tt-ease),box-shadow .3s ease}
.tt-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3%;transition:transform .45s var(--tt-ease)}
.tt-meta{grid-column:2;grid-row:2;display:block;padding:12px 2px 0}
.tt-brand{display:block;font-size:12.5px;font-weight:700;color:var(--tt-muted)}
.tt-name{display:block;margin-top:2px;font-family:var(--font-display,'Plus Jakarta Sans','Manrope',system-ui,sans-serif);font-size:17px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--tt-ink)}
.tt-price{display:block;margin-top:6px;font-size:15px;font-weight:800;color:var(--tt-ink);font-variant-numeric:tabular-nums}
.tt-price small{font-size:.8em;font-weight:700}
.tt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.tt-card:active .tt-tile{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .tt-card:hover .tt-tile{transform:translateY(-4px);box-shadow:0 16px 28px #14161d1a}
  .tt-card:hover .tt-tile img{transform:scale(1.05)}
  .tt-card:hover .tt-rank{color:var(--tt-pink)}
}
.tt-card:focus-visible{outline:none}
.tt-card:focus-visible .tt-tile{outline:3px solid var(--tt-ink);outline-offset:3px}
.tt-card:focus-visible .tt-rank{color:var(--tt-pink)}

/* Auftritt beim Hineinscrollen */
.tt.is-entering{--tt-gate:1}
.tt.is-pre .tt-item{opacity:0;transform:translateY(26px);transition:none}

@media (max-width:767.98px){
  .tt{--tt-card:clamp(196px,60vw,240px)}
  .tt-head{display:block}
  .tt-head p{font-size:14.5px}
  .tt-nav{display:none}
  .tt-track{cursor:auto}
  .tt-rank{-webkit-text-stroke-width:3px}
  .tt-name{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .tt *{transition:none!important}
  .tt.is-pre .tt-item{opacity:1;transform:none}
}