/* ============================================================
   Clubjournal 2026 — TC Amberg am Schanzl
   Nacht-Tennis Scroll-Experience. Alles unter #cj26 gescoped.
   Brand: #1a1a1a / #2d2d2d / Logo-Gelb #f2e616 / #fff / #ccc
   Motion-Disziplin: nur transform/opacity, ease-out, <300ms UI.
   ============================================================ */

#cj26{
  --bg:#1a1a1a; --bg2:#2d2d2d; --acc:#f2e616; --white:#fff; --grey:#cccccc;
  --maxw:1180px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --ff-d:'Work Sans',system-ui,sans-serif;
  --ff-b:'Open Sans',system-ui,sans-serif;
  position:relative;
  background:var(--bg);
  color:var(--grey);
  font-family:var(--ff-b);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
#cj26 *{box-sizing:border-box}
#cj26 h1,#cj26 h2,#cj26 h3{font-family:var(--ff-d);color:var(--white);margin:0;line-height:1.05;font-weight:600}
#cj26 p{margin:0 0 1em}
#cj26 a{color:var(--acc);text-decoration:none}

/* ---- Layout primitives ---- */
#cj26 .cj-sec{position:relative;padding:clamp(64px,11vh,140px) 24px;overflow:hidden}
#cj26 .cj-wrap{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
#cj26 .cj-eyebrow{font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.22em;
  font-size:13px;font-weight:600;color:var(--acc);margin:0 0 18px}
#cj26 .cj-h2{font-size:clamp(30px,5vw,58px);text-transform:uppercase;letter-spacing:.04em}
#cj26 .cj-rule{width:64px;height:3px;background:var(--acc);margin:18px 0 34px;transform-origin:left}
#cj26 .cj-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.75;max-width:62ch;color:var(--grey)}

/* ---- Floodlight cone (per section, subtle) ---- */
#cj26 .cj-sec.cj-flood::before{
  content:"";position:absolute;top:-10%;left:50%;width:140%;height:120%;
  transform:translateX(-50%);pointer-events:none;z-index:0;opacity:0;
  transition:opacity 1.1s var(--ease-out);
  background:radial-gradient(120% 80% at 50% 0%,rgba(242,230,22,.10),rgba(242,230,22,.03) 38%,transparent 66%);
}
#cj26 .cj-sec.cj-flood.cj-lit::before{opacity:1}

/* ---- Global baseline + tennis ball (scroll progress) ---- */
#cj26-base{position:fixed;left:0;bottom:0;width:100%;height:3px;z-index:60;pointer-events:none;
  background:rgba(255,255,255,.06)}
#cj26-base i{position:absolute;left:0;bottom:0;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--acc),#c9c30f);box-shadow:0 0 12px rgba(242,230,22,.5)}
#cj26-ball{position:fixed;left:0;bottom:-7px;width:26px;height:26px;border-radius:50%;z-index:61;pointer-events:none;
  background:radial-gradient(circle at 38% 34%,#f5ef6a,#e9e000 42%,#b9b200 100%);
  box-shadow:0 0 14px rgba(242,230,22,.45),inset 0 0 0 1px rgba(0,0,0,.12);
  transform:translateX(-50%)}
#cj26-ball::before,#cj26-ball::after{content:"";position:absolute;top:3px;bottom:3px;width:9px;
  border:1.4px solid rgba(255,255,255,.85);border-radius:50%}
#cj26-ball::before{left:-2px;border-right:none}
#cj26-ball::after{right:-2px;border-left:none}

/* ---- Reveal helper ---- */
#cj26 .cj-rev{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
#cj26 .cj-rev.cj-in{opacity:1;transform:none}

/* ============================================================
   S01 HERO
   ============================================================ */
#cj26-hero{height:100svh;min-height:600px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;overflow:hidden}
#cj26-hero .cj-bg{position:absolute;inset:0;z-index:0}
#cj26-hero .cj-bg video,#cj26-hero .cj-bg img{width:100%;height:100%;object-fit:cover;display:block}
#cj26-hero .cj-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,26,26,.55) 0%,rgba(26,26,26,.25) 40%,rgba(26,26,26,.85) 100%)}
#cj26-hero .cj-hero-in{position:relative;z-index:2;max-width:1320px}
#cj26-hero .cj-eyebrow{color:var(--acc);opacity:0;transform:translateY(10px);transition:.6s var(--ease-out)}
#cj26-hero.cj-go .cj-eyebrow{opacity:1;transform:none}
#cj26-hero h1{font-size:clamp(40px,11vw,132px);letter-spacing:.03em;text-transform:uppercase;line-height:.92;white-space:nowrap}
#cj26-hero h1 .cj-year{display:block;color:var(--acc);font-size:clamp(60px,16vw,200px);line-height:.9;
  text-shadow:0 0 40px rgba(242,230,22,.25)}
#cj26-hero h1 .ch{display:inline-block;opacity:0;transform:translateY(40px);will-change:transform,opacity}
#cj26-hero.cj-go .cj-year{animation:cjGlow 1.2s var(--ease-out) .5s both}
@keyframes cjGlow{0%{opacity:0;transform:translateY(30px) scale(.96)}60%{text-shadow:0 0 70px rgba(242,230,22,.6)}100%{opacity:1;transform:none}}
#cj26-hero .cj-sub{margin-top:22px;font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.18em;
  font-size:clamp(11px,1.5vw,15px);color:var(--white);opacity:0;transform:translateY(12px);transition:.7s var(--ease-out) .9s}
#cj26-hero.cj-go .cj-sub{opacity:.92;transform:none}
#cj26-hero .cj-sub b{color:var(--acc);font-weight:600}
#cj26-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;text-align:center;
  font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--white);opacity:0;transition:.7s 1.4s}
#cj26-hero.cj-go #cj26-cue{opacity:.7}
#cj26-cue span{display:block;width:1px;height:38px;margin:8px auto 0;background:linear-gradient(var(--acc),transparent);
  animation:cjCue 1.8s var(--ease-io) infinite}
@keyframes cjCue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============================================================
   S02 GRUSSWORTE
   ============================================================ */
#cj26 .cj-grid-gruss{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
#cj26 .cj-card{background:var(--bg2);border:1px solid rgba(242,230,22,.14);border-radius:6px;padding:54px 22px 24px;position:relative;display:flex;flex-direction:column}
#cj26 .cj-card .cj-q{font-family:var(--ff-d);font-weight:600;color:var(--white);font-size:clamp(15px,1.05vw,18px);
  line-height:1.45;margin:0 0 16px;flex:1 0 auto}
#cj26 .cj-card .cj-q::before{content:"\201E";position:absolute;top:12px;left:22px;font-family:var(--ff-d);font-weight:600;
  font-size:44px;line-height:1;color:var(--acc)}
#cj26 .cj-card .cj-by{font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--acc);font-weight:600}
#cj26 .cj-card .cj-role{font-size:13px;color:#9a9a9a;margin-top:3px}
/* Editorial-Karte = gleichwertig zu den anderen drei (4-spaltiges Grid) */

/* ============================================================
   S03 HECKMANN 90
   ============================================================ */
#cj26-heck{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center}
#cj26-heck .cj-num{font-family:var(--ff-d);font-weight:600;color:var(--acc);font-size:clamp(120px,22vw,260px);
  line-height:.8;letter-spacing:-.02em;text-shadow:0 0 50px rgba(242,230,22,.18)}
#cj26-heck .cj-clip{position:relative}
#cj26 .cj-clip img{width:100%;border-radius:6px;display:block;box-shadow:0 24px 60px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.08)}
#cj26 .cj-clip.cj-tilt img{transform:rotate(-2deg)}

/* ============================================================
   S04 TEAMS / counters + horizontal track
   ============================================================ */
#cj26-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:8px 0 56px}
#cj26-stats .cj-stat{text-align:center;padding:22px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(242,230,22,.12);border-radius:6px}
#cj26-stats .cj-stat b{display:block;font-family:var(--ff-d);font-weight:600;color:var(--acc);font-size:clamp(34px,4.6vw,56px);line-height:1}
#cj26-stats .cj-stat span{display:block;margin-top:8px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--grey)}
#cj26-track{display:flex;gap:22px;will-change:transform}
#cj26-track .cj-team{flex:0 0 clamp(260px,30vw,360px);background:var(--bg2);border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);transition:transform .3s var(--ease-out)}
#cj26-track .cj-team img{width:100%;aspect-ratio:1239/1651;object-fit:cover;display:block;opacity:.95}
#cj26-track .cj-team .cj-tb{padding:20px 22px 24px}
#cj26-track .cj-team .cj-tag{font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--acc);font-weight:600}
#cj26-track .cj-team h3{font-size:22px;margin:6px 0 8px;text-transform:uppercase}
#cj26-track .cj-team p{font-size:14px;line-height:1.6;margin:0;color:var(--grey)}
#cj26 .cj-pin{position:relative}
#cj26 .cj-pin .cj-hint{font-family:var(--ff-d);text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:#8a8a8a;margin-top:20px}

/* ============================================================
   S05 TENNISBASE
   ============================================================ */
#cj26-base-sec{position:relative}
#cj26-base-sec .cj-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
#cj26-base-sec .cj-bg img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.05)}
#cj26-base-sec .cj-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,26,26,.92) 0%,rgba(26,26,26,.72) 55%,rgba(26,26,26,.5) 100%)}
#cj26-base-sec .cj-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
#cj26-base-sec .cj-pull{font-family:var(--ff-d);font-weight:600;color:var(--white);
  font-size:clamp(26px,4vw,52px);line-height:1.08;text-transform:uppercase;letter-spacing:.01em}
#cj26-base-sec .cj-pull .w{display:inline-block;opacity:0;transform:translateY(24px);will-change:transform,opacity}
#cj26-base-sec .cj-pull em{color:var(--acc);font-style:normal}
#cj26-base-sec .cj-bignum{font-family:var(--ff-d);font-weight:600;color:var(--acc);font-size:clamp(50px,8vw,96px);line-height:1;margin-top:8px}

/* ============================================================
   S06 GALERIE marquee
   ============================================================ */
#cj26-gal{padding-left:0;padding-right:0}
#cj26-gal .cj-wrap{max-width:none;padding:0 24px}
#cj26 .cj-marquee{position:relative;overflow:hidden;margin-top:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#cj26 .cj-row{display:flex;gap:18px;width:max-content;will-change:transform}
#cj26 .cj-row+.cj-row{margin-top:18px}
#cj26 .cj-tileimg{flex:0 0 auto;height:clamp(150px,20vw,230px);border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);background:var(--bg2);transition:transform .3s var(--ease-out)}
#cj26 .cj-tileimg img{height:100%;width:auto;display:block;object-fit:cover}
@media(hover:hover){#cj26 .cj-tileimg:hover{transform:scale(1.04)}#cj26 .cj-tileimg:hover{border-color:rgba(242,230,22,.5)}}

/* ============================================================
   S07 FLIPBOOK
   ============================================================ */
#cj26-flip-sec{text-align:center}
#cj26-flipwrap{position:relative;margin:26px auto 0;max-width:1040px;min-height:340px;display:flex;justify-content:center}
#cj26-flip{touch-action:pan-y}
#cj26-flip .stf__parent{margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#cj26-flip-fallback{display:none}
#cj26-flip-fallback img{width:min(82%,420px);border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08)}
#cj26 .cj-flip-ctrl{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap}
#cj26 .cj-btn{font-family:var(--ff-d);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:14px;
  padding:13px 26px;border-radius:4px;border:2px solid var(--acc);color:var(--acc);background:transparent;cursor:pointer;
  transition:background .18s var(--ease-out),color .18s var(--ease-out),transform .12s var(--ease-out);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:270px;text-align:center}
#cj26 .cj-btn:hover{background:var(--acc);color:#1a1a1a}
#cj26 .cj-btn:active{transform:scale(.97)}
#cj26 .cj-btn--solid{background:var(--acc);color:#1a1a1a}
#cj26 .cj-btn--solid:hover{filter:brightness(1.08)}
#cj26 .cj-btn--ghost{border-color:rgba(255,255,255,.3);color:var(--white)}
#cj26 .cj-btn--ghost:hover{background:rgba(255,255,255,.1);color:var(--white)}
#cj26 .cj-pageno{font-family:var(--ff-d);letter-spacing:.1em;font-size:13px;color:#9a9a9a;min-width:96px}

/* Fullscreen overlay reader */
#cj26-fs{position:fixed;inset:0;z-index:99999;background:rgba(10,10,10,.96);display:none;flex-direction:column;
  align-items:center;justify-content:center;padding:20px}
#cj26-fs.cj-on{display:flex}
#cj26-fs .cj-fsclose{position:absolute;top:18px;right:22px;font-size:30px;color:#fff;background:none;border:none;cursor:pointer;line-height:1}

/* ============================================================
   S08 SPONSOREN
   ============================================================ */
#cj26-spon .cj-spon-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
#cj26-spon .cj-spon{flex:1 1 auto;min-width:200px;text-align:center;padding:30px 26px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);border-radius:6px;opacity:0;transform:translateY(20px) scale(.97);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),border-color .25s,color .25s,background .25s}
#cj26-spon .cj-spon.cj-in{opacity:1;transform:none}
#cj26-spon .cj-spon b{font-family:var(--ff-d);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:#bdbdbd;font-size:clamp(16px,2vw,22px);transition:color .25s}
#cj26-spon .cj-spon small{display:block;margin-top:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#777}
@media(hover:hover){#cj26-spon .cj-spon:hover{border-color:rgba(242,230,22,.5)}#cj26-spon .cj-spon:hover b{color:var(--acc)}}

/* ============================================================
   S09 ARCHIV + Finale
   ============================================================ */
#cj26-arch .cj-arch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#cj26-arch .cj-ac{background:var(--bg2);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.07);
  transition:transform .3s var(--ease-out),border-color .25s}
#cj26-arch .cj-ac img{width:100%;display:block;aspect-ratio:1/1.414;object-fit:cover}
#cj26-arch .cj-ac .cj-acb{padding:16px 18px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px}
#cj26-arch .cj-ac .cj-acy{font-family:var(--ff-d);font-weight:600;color:var(--white);font-size:20px}
@media(hover:hover){#cj26-arch .cj-ac:hover{transform:translateY(-5px);border-color:rgba(242,230,22,.5)}}
#cj26-finale{text-align:center;padding-bottom:clamp(80px,14vh,160px)}
#cj26-finale .cj-motto{font-family:var(--ff-d);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(24px,4vw,46px);color:var(--white);margin-top:10px}
#cj26-finale .cj-motto em{color:var(--acc);font-style:normal}
#cj26-finale .cj-sig{margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  #cj26 .cj-grid-gruss{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  #cj26 .cj-grid-gruss{grid-template-columns:1fr}
}
@media(max-width:980px){
  #cj26-heck{grid-template-columns:1fr;gap:26px;text-align:center}
  #cj26-heck .cj-num{font-size:clamp(110px,40vw,200px)}
  #cj26-stats{grid-template-columns:repeat(2,1fr)}
  #cj26-base-sec .cj-wrap{grid-template-columns:1fr;gap:28px}
  #cj26-base-sec .cj-bg::after{background:linear-gradient(180deg,rgba(26,26,26,.78),rgba(26,26,26,.92))}
  #cj26-arch .cj-arch-grid{grid-template-columns:1fr;max-width:360px;margin:0 auto}
}
/* Teams track stacks below the desktop pin breakpoint (>=1024 pins) */
@media(max-width:1023px){
  #cj26-track{flex-direction:column;align-items:stretch}
  #cj26-track .cj-team{flex:1 1 auto}
  #cj26 .cj-pin .cj-hint{display:none}
}
#cj26-fs-book{margin:0 auto}
@media(max-width:768px){
  #cj26-base,#cj26-ball{display:none}
  #cj26-hero{height:88svh}
  #cj26-stats{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   REDUCED MOTION — snap to final state, no movement
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  #cj26 *{animation:none!important;transition:none!important}
  #cj26 .cj-rev{opacity:1!important;transform:none!important}
  #cj26-hero .cj-eyebrow,#cj26-hero .cj-sub,#cj26-cue{opacity:1!important;transform:none!important}
  #cj26-hero h1 .ch,#cj26-base-sec .cj-pull .w{opacity:1!important;transform:none!important}
  #cj26-hero h1 .cj-year{opacity:1!important}
  #cj26-spon .cj-spon{opacity:1!important;transform:none!important}
  #cj26-base i{transform:scaleX(1)!important}
}