:root{
  --ember:#b95733;
  --ember-dark:#934229;
  --gold:#d6b477;
  --night:#080b09;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"DM Sans",sans-serif;background:#000;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img,video{display:block;width:100%}
.hero{
  position:relative;
  height:100svh;
  min-height:820px;
  overflow:hidden;
  color:#fff;
  background:var(--night);
  z-index:2;
}

/* MEDIA */
.hero-media{position:absolute;inset:0}
.hero-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.035);
  filter:saturate(.92) contrast(1.07) brightness(.80);
  animation:heroBreath 18s ease-in-out infinite alternate;
}
.hero-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(5,7,6,.50) 0%,
      rgba(5,7,6,.08) 27%,
      rgba(5,7,6,.14) 48%,
      rgba(5,7,6,.64) 73%,
      rgba(5,7,6,.95) 100%
    ),
    radial-gradient(circle at 50% 37%,rgba(0,0,0,.00),rgba(0,0,0,.40) 80%);
}
.hero-grain{
  position:absolute;
  inset:0;
  opacity:.07;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}

@keyframes heroBreath{
  0%{transform:scale(1.035) translate3d(0,0,0)}
  100%{transform:scale(1.065) translate3d(0,-0.6%,0)}
}

/* subtle intro choreography */
.nav,
.date-badge,
.hero h1,
.subline,
.counter-stage,
.cta-area,
.cta-note{
  opacity:0;
  transform:translateY(18px);
  animation:fadeUp .85s cubic-bezier(.22,.7,.2,1) forwards;
}
.nav{animation-delay:.08s}
.date-badge{animation-delay:.20s}
.hero h1{animation-delay:.32s}
.subline{animation-delay:.43s}
.counter-stage{animation-delay:.56s}
.cta-area{animation-delay:.68s}
.cta-note{animation-delay:.76s}
@keyframes fadeUp{
  to{opacity:1;transform:translateY(0)}
}

/* NAV */
.nav{
  position:absolute;
  top:0; left:0; right:0;
  z-index:10;
  padding:22px 42px 0;
}
body.menu-open .nav{z-index:170}
.nav-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
}
.nav-side{display:flex;align-items:center;gap:32px}
.nav-right{justify-content:flex-end}
.nav a{
  font-size:15px;
  font-weight:600;
  color:rgba(255,255,255,.82);
}
.logo{
  width:162px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.22));
}
.ticket-nav{
  position:relative;
  overflow:hidden;
  padding:13px 20px;
  border-radius:999px;
  background:var(--ember);
  color:#fff!important;
  box-shadow:0 12px 32px rgba(185,87,51,.28);
}
.ticket-nav::after,
.cta-primary::after{
  content:"";
  position:absolute;
  top:-50%;
  bottom:-50%;
  width:30%;
  left:-40%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shine 4.2s ease-in-out infinite;
}
@keyframes shine{
  0%,56%{left:-45%;opacity:0}
  64%{opacity:1}
  83%{left:125%;opacity:0}
  100%{left:125%;opacity:0}
}

/* CENTER */
.hero-center{
  position:relative;
  z-index:5;
  height:100%;
  width:min(100% - 40px,1120px);
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:82px;
}
.date-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(10,13,11,.56);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  color:#f0d7aa;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.hero h1{
  margin:0;
  max-width:980px;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:clamp(56px,6.4vw,94px);
  font-weight:400;
  line-height:.95;
  letter-spacing:.005em;
  text-transform:uppercase;
  text-shadow:0 12px 42px rgba(0,0,0,.30);
}
.hero h1 .line{display:block}
.hero h1 .accent{
  color:#f0d4aa;
}

.subline{
  max-width:690px;
  margin:16px auto 0;
  font-size:16px;
  line-height:1.6;
  color:rgba(255,255,255,.70);
}


/* HERO HEADLINE UPDATE */
.hero-title{
  max-width:1180px!important;
  width:min(100%,1180px);
  font-size:clamp(48px,5.6vw,82px)!important;
  line-height:.94!important;
  letter-spacing:.002em!important;
}
.hero-title .line{
  display:block;
  white-space:nowrap;
}
.hero-title .headline-second{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:5px;
}
.hero-title .accent{
  color:#f0d4aa;
}
.no1-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:68px;
  height:68px;
  padding:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),transparent 26%),
    linear-gradient(135deg,#b95733,#d17b4b);
  color:#fff;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:21px;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  transform:rotate(4deg);
  box-shadow:0 12px 28px rgba(185,87,51,.30);
  border:2px solid rgba(255,255,255,.16);
  position:relative;
}

.no1-badge::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.30);
}

@media(max-width:760px){
  .hero-title{
    font-size:clamp(38px,10.4vw,56px)!important;
  }
  .hero-title .line{
    white-space:normal;
  }
  .hero-title .headline-second{
    gap:10px;
    flex-wrap:nowrap;
  }
  .no1-badge{
    width:52px;
    min-width:52px;
    height:52px;
    padding:0;
    font-size:16px;
    border-radius:50%;
  }
}

/* COUNTER STAGE */
.counter-stage{
  position:relative;
  width:min(100%,820px);
  margin-top:28px;
  padding:22px 26px 20px;
  background:rgba(7,10,8,.40);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  backdrop-filter:blur(12px);
  box-shadow:0 16px 46px rgba(0,0,0,.17);
  overflow:hidden;
  box-shadow:inset 0 18px 34px rgba(58,38,22,.035);
}
.counter-stage::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,210,162,.45),transparent);
}
.counter-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(240,210,162,.06),transparent 48%);
}
.counter-label{
  margin-bottom:14px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#f0d2a2;
}
.counter{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.counter-item{
  padding:0 18px;
  border-right:1px solid rgba(255,255,255,.11);
}
.counter-item:last-child{border-right:0}
.counter-value{
  display:block;
  transform:translateY(8px);
  opacity:0;
  animation:counterIn .7s cubic-bezier(.22,.7,.2,1) forwards;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:clamp(48px,5vw,76px);
  line-height:.9;
  letter-spacing:.02em;
  color:#fff;
}
@keyframes counterIn{
  to{transform:translateY(0);opacity:1}
}
.counter-item:nth-child(1) .counter-value{animation-delay:.72s}
.counter-item:nth-child(2) .counter-value{animation-delay:.78s}
.counter-item:nth-child(3) .counter-value{animation-delay:.84s}
.counter-item:nth-child(4) .counter-value{animation-delay:.90s}

.counter-name{
  display:block;
  margin-top:8px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

/* CTA + BUBBLE */
.cta-area{
  position:relative;
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.cta-primary{
  position:relative;
  overflow:hidden;
  min-height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 31px;
  border-radius:999px;
  background:var(--ember);
  color:#fff;
  font-size:15px;
  font-weight:700;
  box-shadow:0 16px 42px rgba(185,87,51,.30);
  transition:.2s;
}
.cta-primary:hover{
  transform:translateY(-2px);
  background:var(--ember-dark);
}
.early-bubble{
  position:absolute;
  right:-112px;
  top:50%;
  transform:translateY(-50%) rotate(3deg);
  animation:bubbleFloat 3.8s ease-in-out infinite;
  min-width:105px;
  padding:12px 13px;
  border-radius:16px;
  background:#f1d7a7;
  color:#3b2418;
  box-shadow:0 16px 35px rgba(0,0,0,.22);
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
  line-height:1.25;
}
.early-bubble::before{
  content:"";
  position:absolute;
  left:-8px;
  top:50%;
  width:16px;
  height:16px;
  background:#f1d7a7;
  transform:translateY(-50%) rotate(45deg);
}
.cta-note{
  margin-top:9px;
  font-size:11px;
  color:rgba(255,255,255,.5);
}
.cta-note b{color:#fff}

@keyframes bubbleFloat{
  0%,100%{transform:translateY(-50%) rotate(3deg)}
  50%{transform:translateY(calc(-50% - 5px)) rotate(1deg)}
}

.cta-primary{
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.cta-primary:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 20px 48px rgba(185,87,51,.38);
}
.ticket-nav{
  transition:transform .25s ease, box-shadow .25s ease;
}
.ticket-nav:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(185,87,51,.34);
}
.nav-side a:not(.ticket-nav){
  position:relative;
}
.nav-side a:not(.ticket-nav)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-6px;
  height:1px;
  background:#f0d2a2;
  transition:right .25s ease;
}
.nav-side a:not(.ticket-nav):hover::after{right:0}

/* MOBILE NAV TOGGLE */
.nav-toggle{
  position:relative;
  z-index:160;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  cursor:pointer;
  transition:.25s ease;
}
.nav-toggle:hover{background:rgba(255,255,255,.12)}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:#fff;
  transition:transform .3s ease,opacity .3s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(6,9,7,.97);
  backdrop-filter:blur(16px);
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .3s ease,transform .3s ease;
}
.mobile-menu.open{opacity:1;pointer-events:auto;transform:none}
.mobile-menu nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-bottom:36px;
}
.mobile-menu nav a{
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:34px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:#fff;
  padding:11px 0;
}
.mobile-menu .cta-primary{font-size:15px}

/* FOOT */
.bottom-micro{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:6;
  display:flex;
  justify-content:center;
  gap:24px;
  padding:15px 18px 17px;
  font-size:11px;
  color:rgba(255,255,255,.55);
  background:linear-gradient(180deg,rgba(8,10,9,0),rgba(8,10,9,.68));
}
.bottom-micro b{color:#fff}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .nav,.date-badge,.hero h1,.subline,.counter-stage,.cta-area,.cta-note,.counter-value{
    opacity:1!important;
    transform:none!important;
  }
}

@media(max-width:980px){
  .nav{padding:18px 20px 0}
  .nav-grid{grid-template-columns:1fr auto}
  .nav-left{display:none}
  .nav-right a:not(.ticket-nav){display:none}
  .nav-right{gap:12px}
  .nav-toggle{display:flex}
  .logo{width:140px}
  .early-bubble{right:-84px}
}
@media(max-width:420px){
  .ticket-nav{padding:11px 14px;font-size:13px}
  .logo{width:118px}
}
@media(max-width:760px){
  .hero{min-height:850px}
  .hero-center{justify-content:flex-end;padding:140px 0 118px}
  .hero h1{font-size:clamp(46px,13vw,64px)}
  .subline{font-size:15px}
  .counter-stage{width:100%;padding:18px 10px;border-radius:14px}
  .counter-item{padding:0 6px}
  .counter-value{font-size:32px}
  .cta-area{display:flex;flex-direction:column;gap:10px}
  .early-bubble{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    border-radius:999px;
    padding:9px 13px;
  }
  .early-bubble::before{display:none}
  .bottom-micro{display:none}
}

/* MARQUEE / HERO TRANSITION */
.marquee-wrap{
  position:relative;
  height:0;
  z-index:30;
  overflow:visible;
  pointer-events:none;
}

/*
  WICHTIG:
  - Das Band ist deutlich breiter als der Viewport.
  - Dadurch deckt die Rotation links und rechts immer vollständig ab.
  - body/html schneiden horizontal sauber ab.
  - Der Hero bleibt hinter dem Band sichtbar, die Intro-Sektion startet direkt darunter.
*/
.marquee{
  position:absolute;
  top:0;
  left:50%;
  width:116vw;
  height:100px;
  overflow:hidden;
  transform:translate(-50%,-62%) rotate(-2.15deg);
  transform-origin:center center;

  background:linear-gradient(
    90deg,
    #9e4329 0%,
    #b95733 34%,
    #d07649 64%,
    #a8472d 100%
  );

  color:#fff;
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(91,34,19,.28);

  box-shadow:
    0 22px 46px rgba(56,22,12,.26),
    0 5px 18px rgba(0,0,0,.14);

  pointer-events:auto;
  z-index:40;
}

/* Seiten-Fades bewusst innerhalb des überbreiten Bandes */
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:9vw;
  min-width:90px;
  z-index:3;
  pointer-events:none;
}
.marquee::before{
  left:0;
  background:linear-gradient(90deg,rgba(137,52,31,.96),transparent);
}
.marquee::after{
  right:0;
  background:linear-gradient(-90deg,rgba(145,55,33,.96),transparent);
}

.marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  min-height:100px;
  gap:30px;
  padding:0 8vw;
  animation:marqueeMove 30s linear infinite;
}
.marquee:hover .marquee-track{
  animation-play-state:paused;
}

.marquee-track span{
  white-space:nowrap;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:26px;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:#fff8f0;
  text-shadow:0 1px 0 rgba(85,28,16,.16);
}
.marquee-track i{
  font-style:normal;
  font-size:20px;
  color:#f5d8a5;
  text-shadow:0 0 16px rgba(245,216,165,.34);
}

/* Nieten bleiben optisch im sichtbaren Bereich */
.marquee .stud{
  position:absolute;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f0d39e;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    0 2px 8px rgba(86,29,16,.28);
  transform:translateY(-50%);
  z-index:4;
}
.marquee .stud-left{left:6vw}
.marquee .stud-right{right:6vw}

@keyframes marqueeMove{
  to{transform:translateX(-50%)}
}
/* INTRO STORY */
.intro-section{
  position:relative;
  background:#f2ece2;
  color:#171a16;
  padding:150px 0 145px;
  overflow:hidden;
  z-index:1;
}
.intro-wrap{
  width:min(calc(100% - 52px),1280px);
  margin:auto;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:84px;
  align-items:center;
}
.intro-copy .eyebrow{
  display:block;
  margin-bottom:18px;
  color:#a54d2e;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.intro-copy h2{
  margin:0;
  max-width:680px;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:clamp(48px,5.2vw,76px);
  font-weight:400;
  line-height:.98;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.intro-copy h2 span{
  display:block;
  color:#b95733;
}
.intro-copy .lead{
  margin:26px 0 0;
  max-width:620px;
  font-size:19px;
  line-height:1.7;
  color:#565b55;
}
.intro-copy .mini-facts{
  display:flex;
  flex-wrap:wrap;
  gap:18px 26px;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid rgba(23,26,22,.12);
}
.intro-copy .mini-facts span{
  font-size:12px;
  color:#666a65;
}
.intro-copy .mini-facts b{
  color:#1a1d19;
}
.intro-visual{
  position:relative;
  min-height:620px;
}
.intro-visual .img-main{
  position:absolute;
  inset:0 8% 6% 0;
  overflow:hidden;
  border-radius:22px;
}
.intro-visual .img-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.03);
}
.intro-visual .img-small{
  position:absolute;
  right:0;
  bottom:0;
  width:42%;
  aspect-ratio:.82;
  overflow:hidden;
  border-radius:18px;
  border:8px solid #f2ece2;
  box-shadow:0 22px 55px rgba(0,0,0,.14);
}
.intro-visual .img-small img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.intro-visual .caption{
  position:absolute;
  left:22px;
  bottom:24px;
  z-index:3;
  padding:10px 13px;
  border-radius:999px;
  background:rgba(14,18,15,.66);
  color:#fff;
  backdrop-filter:blur(10px);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.intro-orb{
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  right:-80px;
  top:-60px;
  background:radial-gradient(circle,#d1a76d 0%,rgba(209,167,109,.18) 40%,transparent 72%);
  filter:blur(2px);
  opacity:.45;
}
.section-reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.22,.7,.2,1),transform .85s cubic-bezier(.22,.7,.2,1);
}
.section-reveal.in{
  opacity:1;
  transform:none;
}
@media(max-width:980px){
  .intro-wrap{grid-template-columns:1fr;gap:55px}
  .intro-visual{min-height:520px}
}
@media(max-width:700px){
  .marquee{width:122vw;height:78px;transform:translate(-50%,-58%) rotate(-1.6deg)}.marquee-track{min-height:78px;gap:18px;padding:0 11vw;animation-duration:24s}
  .marquee-track span{font-size:19px}
  .intro-section{padding:120px 0 100px}
  .intro-wrap{width:min(calc(100% - 28px),1280px)}
  .intro-copy h2{font-size:clamp(42px,12vw,62px)}
  .intro-copy .lead{font-size:17px}
  .intro-visual{min-height:430px}
  .intro-visual .img-main{inset:0 4% 7% 0}
  .intro-visual .img-small{width:46%}
}


/* STARS DER KULINARIK */
.stars-section{
  position:relative;
  padding:135px 0 145px;
  background:#111611;
  color:#fff;
  overflow:hidden;
}
.stars-section::before{
  content:"";
  position:absolute;
  width:480px;
  height:480px;
  border-radius:50%;
  right:-220px;
  top:-180px;
  background:radial-gradient(circle,rgba(185,87,51,.17),transparent 68%);
  pointer-events:none;
}
.stars-head{
  width:min(calc(100% - 52px),1280px);
  margin:0 auto 52px;
  display:grid;
  grid-template-columns:1fr .64fr;
  gap:70px;
  align-items:end;
}
.stars-head .eyebrow{
  display:block;
  margin-bottom:16px;
  color:#d8b377;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.stars-head h2{
  margin:0;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:clamp(48px,5.3vw,78px);
  font-weight:400;
  line-height:.97;
  text-transform:uppercase;
}
.stars-head h2 span{
  display:block;
  color:#d47a49;
}
.stars-head p{
  margin:0;
  max-width:520px;
  color:rgba(255,255,255,.58);
  font-size:15px;
  line-height:1.75;
}
.stars-controls{
  width:min(calc(100% - 52px),1280px);
  margin:0 auto 18px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
.stars-arrow{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  color:#fff;
  cursor:pointer;
  transition:.25s;
}
.stars-arrow:hover{
  background:#b95733;
  border-color:#b95733;
  transform:translateY(-2px);
}
.stars-viewport{
  overflow:hidden;
  cursor:grab;
}
.stars-viewport:active{cursor:grabbing}
.stars-track{
  width:max-content;
  display:flex;
  gap:18px;
  padding-left:max(26px,calc((100vw - 1280px)/2));
  padding-right:52px;
  transition:transform .6s cubic-bezier(.22,.7,.2,1);
  will-change:transform;
}
.star-card{
  position:relative;
  flex:0 0 clamp(275px,24vw,360px);
  height:520px;
  overflow:hidden;
  border-radius:20px;
  background:#252a26;
  transform:translateZ(0);
}
.star-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.86) contrast(1.03);
  transition:transform .7s cubic-bezier(.22,.7,.2,1),filter .35s ease;
}
.star-card:hover img{
  transform:scale(1.055);
  filter:saturate(.96) contrast(1.04);
}
.star-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 35%,rgba(8,11,9,.18) 55%,rgba(8,11,9,.93) 100%);
}
.star-index{
  position:absolute;
  left:20px;
  top:18px;
  z-index:3;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:13px;
  color:#f1d4a6;
  letter-spacing:.08em;
}
.star-content{
  position:absolute;
  left:22px;
  right:22px;
  bottom:22px;
  z-index:3;
}
.star-content small{
  display:block;
  margin-bottom:8px;
  color:#dfb77d;
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.star-content h3{
  margin:0 0 8px;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:33px;
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}
.star-content p{
  margin:0;
  max-width:270px;
  color:rgba(255,255,255,.64);
  font-size:12px;
  line-height:1.55;
}
.stars-progress{
  width:min(calc(100% - 52px),1280px);
  height:2px;
  margin:28px auto 0;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.stars-progress span{
  display:block;
  width:22%;
  height:100%;
  background:linear-gradient(90deg,#b95733,#df9d65);
  transform-origin:left;
  transition:transform .45s ease;
}

@media(max-width:980px){
  .stars-head{grid-template-columns:1fr;gap:25px}
}
@media(max-width:700px){
  .stars-section{padding:95px 0 105px}
  .stars-head,
  .stars-controls,
  .stars-progress{width:min(calc(100% - 28px),1280px)}
  .stars-controls{justify-content:flex-start}
  .stars-track{padding-left:14px;padding-right:28px}
  .star-card{flex-basis:78vw;height:470px}
}

/* LIGHTBOX */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,7,6,.94);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox-figure{
  position:relative;
  max-width:90vw;
  max-height:82vh;
}
.lightbox img{
  display:block;
  width:auto;
  height:auto;
  max-width:90vw;
  max-height:82vh;
  border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0;
  transform:scale(.98);
  transition:opacity .25s ease,transform .25s ease;
}
.lightbox img.show{opacity:1;transform:scale(1)}
.lightbox-caption{
  position:absolute;
  left:0;
  right:0;
  bottom:-34px;
  text-align:center;
  color:rgba(255,255,255,.72);
  font-size:12px;
  letter-spacing:.04em;
}
.lightbox-counter{
  position:absolute;
  top:22px;
  right:26px;
  z-index:3;
  color:rgba(255,255,255,.5);
  font-size:12px;
  letter-spacing:.08em;
}
.lightbox-btn{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  transition:.25s;
  z-index:3;
}
.lightbox-btn:hover{background:#b95733;border-color:#b95733}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-close{
  position:fixed;
  top:22px;
  left:26px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:.25s;
  z-index:3;
}
.lightbox-close:hover{background:#b95733;border-color:#b95733}
@media(max-width:700px){
  .lightbox-btn{width:42px;height:42px;font-size:17px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .lightbox-close{left:12px;top:12px}
  .lightbox-counter{top:16px;right:16px}
}

/* CAMPING */
.camping-section{
  position:relative;
  padding:135px 0 145px;
  background:var(--night);
  color:#fff;
  overflow:hidden;
}
.camping-wrap{
  width:min(calc(100% - 52px),1280px);
  margin:auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.camping-visual{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.camping-visual img{width:100%;height:100%;object-fit:cover}
.camping-badge{
  position:absolute;
  left:20px;
  top:20px;
  padding:12px 18px;
  border-radius:16px;
  background:rgba(8,11,9,.66);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
}
.camping-badge b{
  display:block;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:26px;
  line-height:1;
  color:#f0d4aa;
}
.camping-badge span{
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.camping-copy .eyebrow{
  display:block;
  margin-bottom:16px;
  color:#d8b377;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.camping-copy h2{
  margin:0;
  max-width:560px;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:clamp(40px,4.6vw,62px);
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}
.camping-copy h2 span{color:#d47a49}
.camping-copy .lead{
  margin:22px 0 0;
  max-width:520px;
  font-size:16px;
  line-height:1.75;
  color:rgba(255,255,255,.62);
}
.camping-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:11px 24px;
  margin:28px 0 34px;
  padding:0;
  list-style:none;
  max-width:560px;
}
.camping-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.68);
}
.camping-list li svg{flex:0 0 auto;width:15px;height:15px;margin-top:3px;color:#d8b377}
@media(max-width:980px){
  .camping-wrap{grid-template-columns:1fr;gap:42px}
  .camping-visual{aspect-ratio:16/10}
}
@media(max-width:700px){
  .camping-section{padding:95px 0 105px}
  .camping-list{grid-template-columns:1fr}
}

/* INSTAGRAM */
.instagram-section{
  position:relative;
  padding:130px 0 140px;
  background:#f2ece2;
  color:#171a16;
  text-align:center;
}
.instagram-section .eyebrow{
  display:block;
  margin-bottom:16px;
  color:#a54d2e;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.instagram-section h2{
  margin:0 auto;
  max-width:760px;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:clamp(40px,4.8vw,68px);
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}
.instagram-section h2 span{color:#b95733}
.instagram-handle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:26px 0 44px;
  padding:13px 24px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(23,26,22,.12);
  color:#171a16;
  font-weight:700;
  font-size:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  transition:.25s ease;
}
.instagram-handle:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.10)}
.instagram-handle svg{width:19px;height:19px}
.instagram-grid{
  width:min(calc(100% - 52px),1100px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
}
.instagram-item{
  position:relative;
  display:block;
  aspect-ratio:1;
  border-radius:14px;
  overflow:hidden;
}
.instagram-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92);
  transition:transform .6s cubic-bezier(.22,.7,.2,1);
}
.instagram-item:hover img{transform:scale(1.08)}
.instagram-item::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(8,11,9,0);
  transition:background .3s ease;
}
.instagram-item:hover::after{background:rgba(8,11,9,.32)}
.instagram-item svg{
  position:absolute;
  inset:0;
  margin:auto;
  width:24px;
  height:24px;
  color:#fff;
  opacity:0;
  transition:opacity .3s ease;
}
.instagram-item:hover svg{opacity:1}
@media(max-width:760px){
  .instagram-section{padding:95px 0 105px}
  .instagram-grid{grid-template-columns:repeat(3,1fr);width:min(calc(100% - 28px),1280px)}
}

/* PARTNER & SPONSOREN */
.partners-section{
  position:relative;
  padding:130px 0 130px;
  background:#111611;
  color:#fff;
  text-align:center;
}
.partners-section .eyebrow{
  display:block;
  margin-bottom:16px;
  color:#d8b377;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.partners-section h2{
  margin:0 auto 52px;
  max-width:760px;
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:clamp(40px,4.8vw,68px);
  font-weight:400;
  line-height:1;
  text-transform:uppercase;
}
.partners-section h2 span{color:#d47a49}
.partners-grid{
  width:min(calc(100% - 52px),1280px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
.partner-logo{
  aspect-ratio:1;
  border-radius:16px;
  background:#f6f1e7;
  display:grid;
  place-items:center;
  padding:16px;
  transition:.3s ease;
}
.partner-logo:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.28)}
.partner-logo img{width:100%;height:100%;object-fit:contain}
@media(max-width:980px){
  .partners-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:700px){
  .partners-section{padding:90px 0 90px}
  .partners-grid{grid-template-columns:repeat(3,1fr);gap:10px;width:min(calc(100% - 28px),1280px)}
  .partners-section h2{padding:0 14px}
}