/* Knight Shot — Table tennis flagship (/table-tennis/), 08.11.2026. Builds on ks.css tokens.
   Daylight stage (cream) instead of the felt-green night: the light is the sun from above (warm band),
   one warm accent = brass on the action + the fold handle. Hero: real RS Barcelona photo (far) ·
   the folding table drawn to scale (mid, input-driven) · floor area as the type gesture (front). */

.tt{background:var(--cream)}
.tt-hdr{background:linear-gradient(180deg,rgba(243,239,230,.96) 0%,rgba(243,239,230,.82) 60%,rgba(243,239,230,0));color:var(--paper-ink)}
.tt-hdr .logo,.tt-hdr .lnk{text-shadow:none;color:var(--paper-ink)}
.tt-hdr .logo small{color:#6d6a5f}
.tt-hdr .lnk:hover{color:#8a6a24}

.tt-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--paper-ink);padding:110px 0 36px;background:#F1EBDF}
.tt-in{max-width:1440px;margin-inline:auto;padding-inline:var(--mx);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,64px);align-items:end;min-height:min(70vh,640px)}
.tt-h1{font-family:var(--font-d);font-weight:760;font-variation-settings:"FLAR" 40;letter-spacing:-.025em;line-height:.98;
  font-size:clamp(2.2rem,3.6vw,3.3rem);color:var(--paper-ink)}
.tt-k{margin-top:20px;font-size:.88rem;font-weight:600;color:#5d5b52}
.tt-area{display:flex;align-items:baseline;gap:.12em;font-family:var(--font-d);font-weight:800;font-variation-settings:"FLAR" 60;
  letter-spacing:-.05em;line-height:.84;font-size:clamp(6.5rem,13vw,12.5rem);color:#13213a;margin:4px 0 10px -.03em}
.tt-area span{font-size:.3em;letter-spacing:-.01em;color:#1F4E8C;font-weight:740}
.tt-dim{color:#4a4a42;font-size:1.04rem;max-width:42ch;min-height:3.1em}
.tt-ctl{margin-top:18px;display:grid;gap:12px;max-width:460px}
.tt-seg{display:inline-flex;padding:4px;border-radius:999px;background:#E4DCCB;gap:4px;justify-self:start}
.tt-seg button{min-height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:#4a4a42;font:600 .92rem var(--font-u);cursor:pointer;
  transition:background var(--dur-tap),color var(--dur-tap)}
.tt-seg button[aria-pressed="true"]{background:#13213a;color:#F6F2E8}
.tt-range input{width:100%;height:40px;accent-color:#B08A3A;cursor:pointer}
.tt-hint{font-size:.88rem;color:#6d6a5f}
.tt-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tt-ghost{background:transparent;color:var(--paper-ink);border-color:rgba(19,32,23,.25)}
.tt-ghost:hover{border-color:var(--paper-ink)}
.tt-visit .tt-ghost,.tt-design .tt-ghost{color:var(--paper-ink)}

/* the room: wall, window light falling in from the left, oak floor. The light is the hero's light source. */
.tt-in{position:relative}
.tt-room{position:absolute;top:-120px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;overflow:hidden}
.tt-floor{position:absolute;left:0;right:0;bottom:0;height:27%;
  background:linear-gradient(180deg,#d9c7a6 0%,#cdb690 40%,#bfa57c 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.tt-win{position:absolute;left:46%;top:16%;width:20%;height:44%;border-radius:3px;
  background:linear-gradient(90deg,transparent calc(50% - 3px),rgba(205,190,160,.9) calc(50% - 3px),rgba(205,190,160,.9) calc(50% + 3px),transparent calc(50% + 3px)),
    linear-gradient(180deg,transparent calc(40% - 3px),rgba(205,190,160,.9) calc(40% - 3px),rgba(205,190,160,.9) calc(40% + 3px),transparent calc(40% + 3px)),
    linear-gradient(180deg,#fffdf6,#fff6e2);
  box-shadow:0 0 0 12px #e2d6bf,0 0 110px 40px rgba(255,240,200,.6)}
.tt-sun{position:absolute;left:47%;bottom:0;width:26%;height:27%;transform:skewX(32deg);transform-origin:top left;
  background:linear-gradient(180deg,rgba(255,244,214,.0),rgba(255,244,214,.55) 40%,rgba(255,240,205,.35));filter:blur(6px)}
.tt-scene{position:relative;align-self:end;aspect-ratio:600/440;width:min(100%,640px);justify-self:center;margin-bottom:-6px;touch-action:pan-y;cursor:ew-resize}
.tt-st{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0}
.tt-scene::after{content:"";position:absolute;left:14%;right:10%;bottom:9%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(60,40,15,.35),transparent);z-index:-1}
.tt-st[data-s="0"]{opacity:1}
.tt-foot{position:absolute;left:50%;bottom:7%;height:16%;width:86%;transform:translateX(-50%) scaleX(1);transform-origin:center;border-radius:50%;
  background:radial-gradient(closest-side,rgba(203,162,83,.32),rgba(203,162,83,.12) 70%,transparent);outline:2px dashed rgba(156,122,52,.55);outline-offset:-2px}
.tt-drag{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font-size:.78rem;font-weight:600;color:#5d4a26;white-space:nowrap;
  background:rgba(255,250,238,.85);border-radius:999px;padding:.3em .9em}
.tt-prod{position:absolute;left:-2%;top:0;display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:12px;background:rgba(19,33,58,.92);color:#F6F2E8;
  box-shadow:0 20px 40px -20px rgba(19,33,58,.6);transition:transform var(--dur-ui) var(--ease)}
.tt-prod:hover{transform:translateY(-2px)}
.tt-prod-k{font-size:.75rem;color:#b9c3d6;font-weight:600}
.tt-prod-n{font-weight:700;font-size:.92rem}
.tt-prod-p{font-family:var(--font-d);font-weight:740;font-size:1.1rem;white-space:nowrap}
.tt-prod-p s{font-family:var(--font-u);font-weight:500;font-size:.78rem;color:#b9c3d6;margin-left:4px}
.tt .btn{border-radius:10px}
.tt-pick{position:relative;z-index:1;max-width:1440px;margin:clamp(28px,4vh,44px) auto 0;padding-inline:var(--mx)}
.tt-pick-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.tt-pick-k{font-family:var(--font-d);font-weight:740;font-size:1.25rem}
.tt-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

/* product cards on cream */
.fgrid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px}
.fcard{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(19,32,23,.08);border-radius:16px;overflow:hidden;color:var(--paper-ink);
  transition:border-color var(--dur-ui),transform var(--dur-ui) var(--ease)}
.fcard:hover{border-color:#B08A3A;transform:translateY(-3px)}
.fc-img{aspect-ratio:4/3;background:#fff;display:grid;place-items:center}
.fc-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.fc-b{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px;flex:1}
.fc-brand{font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:#8a6a24;font-weight:700}
.fc-n{font-size:.92rem;line-height:1.3;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fc-p{font-family:var(--font-d);font-weight:740;font-size:1.12rem}
.fc-was{font-family:var(--font-u);font-weight:500;font-size:.78rem;color:#7a776c;margin-left:6px}

.tt .sec{color:var(--paper-ink)}
.tt .lead{color:#4a4a42}
.tt .op::before{background:linear-gradient(90deg,transparent,#B08A3A)}
.tt .idx{color:#6d6a5f}
.tt-size{background:#F3EFE6;border-top:1px solid rgba(19,32,23,.07)}
.tt-size-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center}
.tt-size .lead{margin-top:16px}
.tt-faq{margin-top:22px;display:grid;gap:14px;max-width:54ch}
.tt-faq div{border-top:1px solid rgba(19,32,23,.12);padding-top:12px}
.tt-faq dt{font-weight:700}
.tt-faq dd{color:#4a4a42;margin-top:3px}
.tt-plan{margin:0;background:#fff;border-radius:var(--r);padding:clamp(16px,3vw,30px);box-shadow:0 30px 60px -40px rgba(40,30,10,.35)}
.tt-plan svg{width:100%;height:auto}
.tt-plan .pl{font:600 12px var(--font-u);fill:#4a4a42}
.tt-plan .pl.b{fill:#8a6a24;font-weight:700}
.tt-plan figcaption{font-size:.84rem;color:#6d6a5f;margin-top:10px}

.tt-design{background:#E9E2D3}
.tt-design-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:center}
.tt-window{margin:0}
.tt-window img{width:100%;height:auto;border-radius:var(--r);box-shadow:0 40px 80px -45px rgba(40,30,10,.5)}
.tt-design .lead{margin:16px 0 22px}
.tt-gear{background:#F3EFE6}
.tt-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:28px}
.tt-more{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.tt-more a{color:#8a6a24;font-weight:600;border-bottom:1px solid rgba(176,138,58,.5)}
.tt-visit{background:#EFE9DC;border-top:1px solid rgba(19,32,23,.07)}
.tt-visit-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center}

@media (prefers-reduced-motion:reduce){ .fcard,.tt-seg button{transition:none} }
@media (max-width:1100px){
  .tt-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .tt-in,.tt-size-grid,.tt-design-grid,.tt-head,.tt-visit-in{grid-template-columns:1fr}
  .tt-in{min-height:0}
  .tt-scene{margin-top:10px}
  .tt-win{left:62%;width:24%;height:30%}
  .tt-floor{height:26%}
}
@media (max-width:620px){
  .tt-hero{padding:92px 0 32px}
  .tt-in{display:flex;flex-direction:column;align-items:stretch}
  .tt-copy{display:contents}
  .tt-h1{order:1;font-size:2.1rem}
  .tt-k{order:2;margin-top:8px}
  .tt-area{order:3;font-size:5.6rem}
  .tt-dim{order:4;min-height:0;font-size:.98rem}
  .tt-ctl{order:5;margin-top:12px}
  .tt-scene{order:6}
  .tt-cta{order:7}
  .tt-prod{display:none}
  .tt-win{display:none}
  .tt-sun{left:56%;width:40%}
  .tt .tt-hdr{background:rgba(243,239,230,.97);padding-bottom:14px;border-bottom:1px solid rgba(19,32,23,.08)}
  .tt-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--mx)*-1);padding-inline:var(--mx);scrollbar-width:none}
  .tt-strip .fcard{flex:0 0 62%;scroll-snap-align:start}
  .tt .fgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--mx)*-1);padding-inline:var(--mx);scrollbar-width:none}
  .tt .fgrid .fcard{flex:0 0 62%;scroll-snap-align:start}
  .tt .sec{padding:56px 0}
  .tt-cta .btn{flex:1 1 100%;justify-content:center}
  .tt-strip,.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tt-hdr .btn{font-size:.85rem}
}
@media (max-width:420px){
  .tt-hdr{gap:10px}
  .tt-hdr .logo small{letter-spacing:.1em}
  .tt-hdr .btn{padding:.55em .9em;font-size:.82rem}
}
.tt-design-grid>*,.tt-size-grid>*,.tt-head>*,.tt-visit-in>*,.tt-in>*{min-width:0}

/* Touch targets ≥ 44 px (Welle 08.11.2026 nachmittag) */
@media (max-width:1024px){.tt-more a{min-width:44px;display:inline-block}.tt-range input{height:44px}.tt-seg button,.tt-ctl button{min-height:44px}.tt-more a{border-bottom:0;padding-block:11px;margin-block:-11px;background:linear-gradient(rgba(176,138,58,.5),rgba(176,138,58,.5)) left 0 bottom 11px/100% 1px no-repeat}}

/* ---- Welle r5 08.11.2026: phone page length <= 6 screens. Only <= 620 px, desktop untouched.
   Tighter hero, the three size facts as a rail, narrower product cards in the existing rails. ---- */
@media (max-width:620px){
  .tt-hero{padding:80px 0 24px}
  .tt-k{margin-top:6px}
  .tt-area{font-size:5rem;margin:2px 0 6px}
  .tt-ctl{margin-top:8px;gap:6px}
  .tt-cta{margin-top:14px;gap:10px}
  .tt-pick{margin-top:22px}
  .tt-pick-head{margin-bottom:10px}
  .tt-strip .fcard,.tt .fgrid .fcard{flex:0 0 47%}
  .tt-strip[hidden]{display:none}   /* the Indoor/Outdoor toggle sets [hidden]; the rail display must not override it */
  .tt-strip,.tt .fgrid{overscroll-behavior-x:contain;scroll-padding-inline:var(--mx);padding-block:4px 6px}
  .tt-strip .fcard:focus-visible,.tt .fgrid .fcard:focus-visible{outline-offset:-3px}
  .fc-img img{padding:8px}
  .fc-b{padding:10px 12px 12px}
  .tt .sec{padding:44px 0}
  .tt .op{margin-bottom:16px}
  .tt-size .lead{margin-top:12px}
  .tt-faq{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;max-width:none;
    margin:18px calc(var(--mx)*-1) 0;padding:4px var(--mx) 6px;scroll-padding-inline:var(--mx);scrollbar-width:none}
  .tt-faq::-webkit-scrollbar{display:none}
  .tt-faq div{flex:0 0 82%;scroll-snap-align:start;border:1px solid rgba(19,32,23,.1);border-radius:14px;background:#fff;padding:14px 16px}
  .tt-faq dd{font-size:.94rem;line-height:1.5}
  .tt-plan{padding:14px}
  .tt-window img{aspect-ratio:16/10;object-fit:cover}
  .tt-design .lead{margin:12px 0 16px}
  .tt-head{margin-bottom:16px}
  .tt-more{margin-top:14px}
  .tt-visit-in{gap:14px}
}
/* r5 pass 2 (phones): tighter rhythm and lead type */
@media (max-width:620px){
  .tt .sec{padding:40px 0}
  .tt .lead{font-size:1rem;line-height:1.5}
  .tt-dim{font-size:.94rem}
  .tt-plan figcaption{margin-top:6px}
}
@media (max-width:620px){
  .tt .sec{padding:36px 0}
  .tt .op{margin-bottom:12px}
  .tt-pick{margin-top:18px}
  .tt-design-grid{gap:20px}
  .tt-size-grid{gap:20px}
}
.tt-strip[hidden]{display:none}   /* r5: the Indoor/Outdoor toggle hid nothing at >= 621 px (both rows showed) */