/* HOME-spezifisch */
/* HERO · XXL video */
.bigword{position:absolute;right:4vw;bottom:9vh;text-align:right;line-height:.9;
  font-family:var(--disp);font-weight:300;letter-spacing:.03em;text-transform:uppercase;color:rgba(238,243,246,.95);
  font-size:clamp(58px,12.5vw,160px);animation:rise 1.8s cubic-bezier(.2,.7,.2,1) both}
.bigword .l2{display:block;color:var(--ice)}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.micro{position:absolute;left:4vw;bottom:11vh;animation:rise 1.8s .2s cubic-bezier(.2,.7,.2,1) both}
.micro ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.micro li{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
.micro .tag{font-size:14px;color:var(--mut);border-top:1px solid var(--line);padding-top:13px;max-width:230px;letter-spacing:.01em}
.eyebrow{position:absolute;top:15vh;right:4vw;text-align:right;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut2);line-height:1.8;animation:rise 1.6s both}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}
@media(max-width:720px){.bigword{right:5vw;bottom:13vh;font-size:clamp(50px,18vw,120px)}.micro{bottom:auto;top:24vh;left:5vw}.eyebrow{top:10vh}.soundtgl{top:10vh}}

/* ENTER band */
.enter{max-width:none;margin:0;padding:clamp(70px,12vh,140px) 4.5vw clamp(60px,9vh,110px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:clamp(36px,5vw,80px);align-items:center}
.enter .st .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin-bottom:20px}
.enter .st h2{font-size:clamp(30px,4.9vw,76px);line-height:1.12;font-weight:300;letter-spacing:-.01em}
.enter .st p{color:var(--mut2);font-size:16px;line-height:1.7;margin-top:22px;max-width:450px}
.enter .st .lead{font-size:16.5px;line-height:1.78;max-width:540px;margin-top:28px}
.enter .st .estline{margin-top:36px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}
.choices{display:flex;flex-direction:column;gap:14px}
.choice{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink);padding:20px 22px;border-radius:4px;transition:all .45s cubic-bezier(.2,.7,.2,1)}
.choice .cl{display:flex;flex-direction:column;gap:4px}
.choice .ct{font-size:16px;font-weight:600;letter-spacing:.02em}
.choice .cs{font-size:12.5px;color:var(--mut);letter-spacing:.01em}
.choice .cmeta{font-size:11px;letter-spacing:.03em;margin-top:6px;font-weight:600}
.choice.member .cmeta{color:#2d5061}
.choice.fan .cmeta{color:var(--fan)}
.choice.look .cmeta{color:var(--sand)}
.choice .arr{font-size:18px;transition:transform .45s;flex:none}
.choice:hover .arr{transform:translateX(6px)}
/* Member = ICE (main), filled, animated cold border */
.choice.member{color:#121a21;border-color:transparent;overflow:hidden;background:linear-gradient(135deg,#eef2f5,#c3ccd3 46%,#a7b2bc 56%,#dbe2e7);box-shadow:0 16px 44px -18px rgba(205,213,221,.5)}
.choice.member .cs{color:rgba(18,26,33,.72)}
.choice.member .cl,.choice.member .arr{position:relative;z-index:2}
.choice.member::after{content:"";position:absolute;top:0;left:-65%;width:48%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);transform:skewX(-18deg);animation:sheen 4.2s ease-in-out infinite}
@keyframes sheen{0%{left:-65%}50%{left:135%}100%{left:135%}}
.choice.member::before{content:"";position:absolute;inset:0;border-radius:4px;padding:1.5px;background:conic-gradient(from var(--a),transparent,#ffffff,transparent 42%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3.8s linear infinite;opacity:1}
@keyframes spin{to{--a:360deg}}
.choice.member:hover{filter:brightness(1.05)}
/* Fan = rose/purple */
.choice.fan .ct{color:var(--fan)}
.choice.fan .arr{color:var(--fan)}
.choice.fan:hover{border-color:var(--fan);background:rgba(154,146,212,.08)}
/* Keep looking = sand (the surfer) */
.choice.look .ct{color:var(--sand)}
.choice.look .arr{color:var(--sand)}
.choice.look:hover{border-color:var(--sand);background:rgba(205,191,159,.09)}
@media(max-width:820px){.enter{grid-template-columns:1fr;gap:38px;padding-left:6vw;padding-right:6vw}}

/* BIG slab = „Hero 2“ (Lederkleid-Bild). Formatfüllend: Bild im Original-Seitenverhältnis (3:2), oben verankert → Kopf bleibt im Bild.
   Text wie bei VanessaPur links unten, mit dunklem Verlauf von links/unten für klare Lesbarkeit. */
.slab{position:relative;height:min(100svh,66.67vw);min-height:540px;overflow:hidden;background:#06090d;border-top:1px solid var(--line)}
.slab .bg{position:absolute;inset:0;background:#06090d var(--sp,50% 0%)/cover no-repeat;transform-origin:var(--so,68% 0%);transform:scale(var(--z,1));transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.slab:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,9,13,.9) 0%,rgba(6,9,13,.7) 26%,rgba(6,9,13,.25) 52%,rgba(6,9,13,0) 70%),
             linear-gradient(0deg,rgba(6,9,13,.92) 0%,rgba(6,9,13,.45) 24%,rgba(6,9,13,0) 48%)}
.slab .cap{position:absolute;z-index:3;left:5vw;right:auto;bottom:10vh;text-align:left;max-width:min(560px,88vw);padding:0;color:#eef3f6;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.slab .cap h2{font-size:clamp(34px,5.4vw,76px);line-height:1.04;font-weight:300;letter-spacing:-.01em}
.slab .cap p{color:#c9d3dc;font-size:16px;margin-top:18px;letter-spacing:.01em}
.slab .cap .lead{max-width:480px;margin:22px 0 0;line-height:1.75;font-size:16px}
.slab .cap .estline{margin-top:28px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#9fb0bf}
@media(max-width:720px){
  .slab{height:88svh;min-height:520px}
  .slab .bg{background-position:var(--spm,72% 0%)}
  .slab:after{background:linear-gradient(0deg,rgba(6,9,13,.96) 0%,rgba(6,9,13,.82) 34%,rgba(6,9,13,.2) 62%,rgba(6,9,13,0) 78%)}
  .slab .cap{left:6vw;bottom:7vh}
}

/* reels */
.reelstrip{padding:clamp(66px,11vh,130px) 6vw;text-align:center}
.reelstrip .k{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--sand);margin-bottom:12px}
.reelstrip h3{font-size:clamp(24px,3.6vw,38px);margin-bottom:38px;font-weight:300}
.reelstrip .hint{color:var(--mut2);margin-top:34px;font-size:15px;line-height:1.6;max-width:540px;margin-left:auto;margin-right:auto}
.reels{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;max-width:880px;margin:0 auto}
.reel{position:relative;width:155px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;cursor:pointer;background:#0a0e13;border:1px solid var(--line);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.reel:hover{transform:translateY(-8px)}
.reel img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .5s,transform .7s}
.reel:hover img{opacity:1;transform:scale(1.06)}
.reel .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.reel .pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;opacity:.85}
.reel .cap{position:absolute;left:9px;right:9px;bottom:8px;font-size:11px;color:#fff;font-weight:600;letter-spacing:.02em}
.morelink{margin-top:50px}
.morelink a{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ice-br);border-bottom:1px solid rgba(127,196,224,.4);padding-bottom:6px;display:inline-flex;gap:11px;transition:gap .4s}
.morelink a:hover{gap:17px}


.choice{font-family:inherit;text-decoration:none}
a.choice{color:var(--ink)}
a.choice.member{color:#121a21}
.choice.fan .ct{color:var(--fan)}

/* Drei Türen: Fan und Preview leicht farbig unterlegt (soft/abgedunkelt), The Court bleibt Platin */
.choice.fan{background:linear-gradient(135deg,rgba(154,146,212,.17),rgba(154,146,212,.05));border-color:rgba(154,146,212,.34)}
.choice.fan:hover{background:linear-gradient(135deg,rgba(154,146,212,.26),rgba(154,146,212,.09));border-color:var(--fan)}
.choice.look{background:linear-gradient(135deg,rgba(205,191,159,.16),rgba(205,191,159,.05));border-color:rgba(205,191,159,.32)}
.choice.look:hover{background:linear-gradient(135deg,rgba(205,191,159,.25),rgba(205,191,159,.09));border-color:var(--sand)}
html[data-theme="light"] .choice.fan{background:linear-gradient(135deg,rgba(95,85,168,.13),rgba(95,85,168,.04));border-color:rgba(95,85,168,.35)}
html[data-theme="light"] .choice.look{background:linear-gradient(135deg,rgba(139,122,85,.14),rgba(139,122,85,.04));border-color:rgba(139,122,85,.35)}

/* Großer animierter Button zum freien Fenster (FREE hervorgehoben) */
.morelink{margin-top:46px}
.morelink a.freebtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:22px 44px;min-width:min(86vw,420px);border:0;border-bottom:0;border-radius:4px;
  font-size:clamp(15px,2.2vw,19px);font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#14122a;
  background:linear-gradient(135deg,#d8d4f4,#9a92d4 55%,#b3add9);box-shadow:0 18px 50px -18px rgba(154,146,212,.7);transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .3s,gap .4s,box-shadow .35s;animation:fbreath 3.6s ease-in-out infinite}
.morelink a.freebtn:hover{transform:translateY(-2px);filter:brightness(1.06);gap:26px;box-shadow:0 22px 60px -16px rgba(154,146,212,.9)}
.morelink a.freebtn .fbl,.morelink a.freebtn .fba{position:relative;z-index:2}
.morelink a.freebtn .fba{font-size:1.3em;line-height:1}
.morelink a.freebtn .fr{display:inline-block;padding:3px 10px 2px;margin:0 2px;border-radius:3px;background:#14122a;color:#ebe9fb;font-weight:800;letter-spacing:.2em;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
.morelink a.freebtn::after{content:"";position:absolute;top:0;left:-65%;width:48%;height:100%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);animation:sheen 3.6s ease-in-out infinite}
.morelink a.freebtn::before{content:"";position:absolute;inset:0;border-radius:4px;padding:1.5px;z-index:1;pointer-events:none;background:conic-gradient(from var(--a),transparent,#ffffff,transparent 42%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3.8s linear infinite}
@keyframes fbreath{0%,100%{box-shadow:0 18px 50px -18px rgba(154,146,212,.55)}50%{box-shadow:0 18px 64px -12px rgba(154,146,212,.95)}}
@media(prefers-reduced-motion:reduce){.morelink a.freebtn,.morelink a.freebtn::after,.morelink a.freebtn::before{animation:none}}


/* ===== Drei Türen v2 (03.10.2026+): Headline oben über die volle Breite, darunter drei Kacheln nebeneinander.
   Leiter von links nach rechts = Zonen-Eskalation der CI: Gast (Sand) → Fan (Purple) → Inner Circle (Platin, breiteste Kachel).
   Typo wie der Schriftzug: Archivo, dünn, Versalien, weit gesetzt. Keine bunten Verläufe mehr — nur Linie + zarte Tönung. ===== */
.enter{display:block;padding:clamp(70px,12vh,140px) 4.5vw clamp(60px,9vh,110px)}
.enter .st{max-width:1560px;margin:0 0 clamp(44px,6.5vw,86px)}
.enter .st h2{font-size:clamp(30px,4.4vw,70px)}
.choices{display:grid;grid-template-columns:1fr 1fr 1.55fr;gap:clamp(12px,1.4vw,20px);align-items:stretch}
.choice{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;min-height:clamp(220px,19vw,300px);padding:clamp(22px,2vw,30px);border-radius:3px;
  background:var(--tint,transparent);border:1px solid var(--line);border-top:2px solid var(--tc,var(--line))}
.choice .cl{flex:1;display:flex;flex-direction:column;gap:7px}
.choice .ck{font-size:10.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);margin-bottom:auto;padding-bottom:clamp(26px,3.4vw,56px)}
.choice .ct{font-family:var(--disp);font-weight:300;font-size:clamp(19px,1.95vw,31px);line-height:1.12;letter-spacing:.07em;text-transform:uppercase}
.choice .cs{font-size:13px;line-height:1.45;letter-spacing:.01em}
.choice .cmeta{font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.55;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.choice .arr{position:absolute;top:clamp(18px,1.7vw,26px);right:clamp(20px,1.9vw,28px);font-size:20px;line-height:1}
.choice.look{--tc:var(--sand);--tint:rgba(205,191,159,.055);order:1}
.choice.fan{--tc:var(--fan);--tint:rgba(154,146,212,.06);order:2}
.choice.member{--tc:transparent;order:3;border:0;min-height:clamp(220px,19vw,300px)}
html[data-theme="light"] .choice.look{--tint:rgba(139,122,85,.07)}
html[data-theme="light"] .choice.fan{--tint:rgba(95,85,168,.06)}
.choice.fan,.choice.look,html[data-theme="light"] .choice.fan,html[data-theme="light"] .choice.look{background:var(--tint);border-color:var(--line);border-top-color:var(--tc)}
.choice.fan:hover,.choice.look:hover,html[data-theme="light"] .choice.fan:hover,html[data-theme="light"] .choice.look:hover{background:var(--tint);border-color:var(--tc)}
.choice.fan:hover{box-shadow:0 18px 44px -26px rgba(154,146,212,.8)}
.choice.look:hover{box-shadow:0 18px 44px -26px rgba(205,191,159,.8)}
.choice.fan .ct{color:var(--fan-br)}.choice.look .ct{color:var(--sand)}
.choice.fan .cmeta,.choice.look .cmeta{color:var(--mut2)}
.choice.fan .cmeta{border-top-color:rgba(154,146,212,.28)}.choice.look .cmeta{border-top-color:rgba(205,191,159,.3)}
/* Member = Platin gefüllt, animierter Rahmen bleibt (::before/::after oben) */
.choice.member .ck{color:rgba(18,26,33,.58)}
.choice.member .ct{font-weight:400;color:#0f161c;font-size:clamp(21px,2.3vw,36px)}
.choice.member .cmeta{color:#2d5061;border-top-color:rgba(18,26,33,.2)}
.choice.look:hover .arr{transform:translateY(5px)}
@media(max-width:1100px){
  .choices{grid-template-columns:1fr 1fr}
  .choice.member{grid-column:1/-1;order:1;min-height:200px}
  .choice.fan{order:2}.choice.look{order:3}
}
@media(max-width:820px){
  .enter{padding-left:6vw;padding-right:6vw}
  .choices{grid-template-columns:1fr;gap:12px}
  .choice,.choice.member{min-height:0}
  .choice .ck{padding-bottom:22px}
  .choice .ct{font-size:clamp(20px,6vw,26px)}
  .choice.member .ct{font-size:clamp(22px,6.4vw,28px)}
  .choice.member{order:1}.choice.fan{order:2}.choice.look{order:3}
}
.choice.member .arr{position:absolute;z-index:2;color:#0f161c}
.choice.member{padding:calc(clamp(22px,2vw,30px) + 2px) calc(clamp(22px,2vw,30px) + 1px) clamp(22px,2vw,30px)}
@media(max-width:820px){.choice.member{padding:24px 23px 22px}}


/* ===== Schaufenster-Streifen v2: gleiche Wucht wie Enter-Band und Hero 2 =====
   Headline links groß (wie oben), vier Reels über die volle Breite (9:16, groß), darunter Hinweis links + großer Button rechts. */
.reelstrip{padding:clamp(70px,11vh,140px) 4.5vw clamp(70px,11vh,130px);text-align:left;border-top:1px solid var(--line)}
.reelstrip .k{font-size:11px;letter-spacing:.3em;margin-bottom:20px;color:var(--sand)}
.reelstrip h3{font-size:clamp(30px,4.4vw,70px);line-height:1.1;letter-spacing:-.01em;margin:0 0 clamp(36px,5vw,70px);max-width:1200px}
.reels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,22px);max-width:none;margin:0;justify-content:stretch}
.reel{width:auto;border-radius:3px;border:1px solid var(--line);border-top:2px solid var(--sand)}
.reel:hover{transform:translateY(-10px)}
.reel img{opacity:.92}
.reel .ov{background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(6,9,13,.82))}
.reel .pl{inset:auto;top:50%;left:50%;width:clamp(46px,4.6vw,76px);height:clamp(46px,4.6vw,76px);margin:calc(clamp(46px,4.6vw,76px)/-2) 0 0 calc(clamp(46px,4.6vw,76px)/-2);border:1px solid rgba(255,255,255,.7);border-radius:50%;
  background:rgba(6,9,13,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:clamp(14px,1.4vw,22px);padding-left:.15em;opacity:.95;transition:transform .45s,background .45s,border-color .45s}
.reel:hover .pl{transform:scale(1.1);background:rgba(205,191,159,.22);border-color:var(--sand)}
.reel .cap{left:clamp(12px,1.4vw,22px);right:clamp(12px,1.4vw,22px);bottom:clamp(12px,1.4vw,22px);font-family:var(--disp);font-size:clamp(11px,1.15vw,17px);font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.reelstrip .after{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,70px);margin-top:clamp(34px,4.6vw,64px)}
.reelstrip .hint{margin:0;max-width:560px;font-size:clamp(15px,1.25vw,18px);text-align:left}
.reelstrip .morelink{margin:0;flex:none}
.reelstrip .morelink a.freebtn{padding:clamp(20px,2vw,28px) clamp(30px,3.4vw,60px);min-width:0}
@media(max-width:900px){
  .reelstrip{padding-left:6vw;padding-right:6vw}
  .reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reelstrip .after{flex-direction:column;align-items:stretch;text-align:center}
  .reelstrip .hint{text-align:left;max-width:none}
  .reelstrip .morelink a.freebtn{display:flex;min-width:0;width:100%}
}
