/* ============================================================
   JAWOLLJA 2026 — v2 "Highfield-clean"
   Dunkle, medienlastige Festival-Site. Brandfarben bleiben,
   aber als gezielte Akzente statt Farbblöcke.
   Schriften: Alte Haas Grotesk + uglyhandwritten.
   ============================================================ */

@import url('https://fonts.cdnfonts.com/css/alte-haas-grotesk');
@import url('https://fonts.cdnfonts.com/css/uglyhandwritten');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Caveat:wght@600;700&display=swap');

:root{
  /* brand */
  --dunkelgruen:#415A20; --hellgruen:#D4E660; --sonnengelb:#FFC533; --sand:#FFE299;
  --lavendel:#8890FB; --rose:#FBA8BD; --koralle:#DF686D; --dunkelrot:#B7332A;

  /* base */
  --night:#0e120a;        /* near-black, grün getönt */
  --night-2:#161b0f;
  --night-3:#1d2415;
  --paper:#f7f5ec;
  --paper-2:#edeadd;
  --fg-light:#f3f2e8;
  --fg-dark:#13160d;
  --muted-l:rgba(243,242,232,.62);
  --muted-d:#6c6c5f;
  --hair-l:rgba(243,242,232,.14);
  --hair-d:rgba(19,22,13,.12);

  --font-head:'Alte Haas Grotesk','Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-hand:'uglyhandwritten','Caveat',cursive;

  --wrap:1280px;
  --pad:clamp(20px,5vw,72px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--night);color:var(--fg-light);
  font-family:var(--font-head);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.hand{font-family:var(--font-hand);}

h1,h2,h3{font-weight:700;line-height:.96;letter-spacing:-.015em;margin:0;text-transform:uppercase;}

/* logo mask helpers (—wm aus brand-assets.css; monogram als svg-mask) */
.wm{ -webkit-mask:var(--wm) left center/contain no-repeat; mask:var(--wm) left center/contain no-repeat;
     aspect-ratio:6.335/1; background:var(--fg-light); display:block; }
.mono{ -webkit-mask:url(assets/monogram.svg) center/contain no-repeat; mask:url(assets/monogram.svg) center/contain no-repeat;
     aspect-ratio:234/286; background:var(--fg-light); display:inline-block; }

/* ---------- eyebrow / buttons ---------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:11px;color:var(--koralle);margin:0 0 18px;}
.eyebrow::before{content:"";width:30px;height:2px;background:currentColor;}

.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;padding:15px 26px;border-radius:2px;border:2px solid transparent;cursor:pointer;
  transition:transform .14s ease, background .14s ease, color .14s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn--sun{background:var(--sonnengelb);color:#3a2900;}
.btn--sun:hover{background:#ffd35e;}
.btn--koralle{background:var(--koralle);color:#fff;}
.btn--ghost-l{border-color:var(--fg-light);color:var(--fg-light);}
.btn--ghost-l:hover{background:var(--fg-light);color:var(--night);}
.btn--ghost-d{border-color:var(--fg-dark);color:var(--fg-dark);}
.btn--ghost-d:hover{background:var(--fg-dark);color:var(--paper);}

/* ============================================================ NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;}
.nav.is-solid{background:rgba(14,18,10,.9);backdrop-filter:saturate(140%) blur(12px);border-color:var(--hair-l);}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px;}
.nav__brand{display:flex;align-items:center;gap:12px;}
.nav__brand .mono{height:30px;background:var(--koralle);}
.nav__brand .wm{height:18px;width:114px;}
.nav__links{display:flex;align-items:center;gap:30px;}
.nav__links a{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;position:relative;white-space:nowrap;color:var(--fg-light);}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--koralle);transition:right .2s ease;}
.nav__links a:not(.btn):hover::after{right:0;}
.nav__links .btn{padding:11px 20px;}
.nav__social{display:flex;align-items:center;gap:14px;}
.nav__social a{display:inline-flex;opacity:.8;}
.nav__social a:hover{opacity:1;}
.nav__social svg{width:18px;height:18px;fill:currentColor;}
.nav-toggle{display:none;background:none;border:1.5px solid var(--fg-light);border-radius:3px;width:46px;height:40px;cursor:pointer;align-items:center;justify-content:center;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:var(--fg-light);position:relative;}
.nav-toggle span::before{position:absolute;top:-6px;}
.nav-toggle span::after{position:absolute;top:6px;}

/* ============================================================ HERO */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--night);}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media video{width:100%;height:100%;object-fit:cover;}
/* Fallback-„Poster" solange kein Video da ist: bewegter Brand-Verlauf */
.hero__fallback{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 20% 10%, rgba(136,144,251,.55), transparent 55%),
  radial-gradient(120% 90% at 90% 20%, rgba(255,197,51,.45), transparent 50%),
  radial-gradient(140% 120% at 70% 100%, rgba(223,104,109,.6), transparent 55%),
  linear-gradient(160deg, #1c2a10, #0e120a 70%);
  background-size:200% 200%;animation:heroMove 22s ease-in-out infinite;}
@keyframes heroMove{0%,100%{background-position:0% 0%,100% 0%,50% 100%,0 0}50%{background-position:30% 20%,70% 30%,40% 80%,0 0}}
.hero__media::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(14,18,10,.55) 0%, rgba(14,18,10,.15) 35%, rgba(14,18,10,.55) 78%, rgba(14,18,10,.96) 100%);}
.hero__pattern{position:absolute;inset:0;z-index:1;opacity:.05;
  -webkit-mask:linear-gradient(#000,#000);background:url(assets/pattern.svg) center/520px repeat;mix-blend-mode:soft-light;}

.hero__in{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(34px,6vw,72px);}
.hero__top{position:absolute;top:calc(74px + clamp(18px,5vw,46px));left:0;right:0;z-index:2;}
.hero__date{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-weight:700;letter-spacing:.04em;
  font-size:clamp(13px,1.5vw,16px);text-transform:uppercase;color:var(--fg-light);}
.hero__date .sep{width:6px;height:6px;border-radius:50%;background:var(--sonnengelb);}
.hero__logo{width:min(92vw,980px);aspect-ratio:6.335;
  -webkit-mask:var(--wm) left center/contain no-repeat;mask:var(--wm) left center/contain no-repeat;
  background:var(--fg-light);}
.hero__tag{font-family:var(--font-hand);font-size:clamp(24px,4vw,42px);color:var(--sonnengelb);margin:6px 0 0;transform:rotate(-1.5deg);}
.hero__row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;margin-top:26px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;}

/* countdown */
.count{display:flex;gap:14px;}
.count__u{text-align:center;min-width:62px;}
.count__u b{display:block;font-size:clamp(30px,4.4vw,52px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.count__u span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-l);margin-top:6px;}
.count__u + .count__u{border-left:1px solid var(--hair-l);padding-left:14px;}

.hero__scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;color:var(--muted-l);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:7px;}
.hero__scroll i{width:1px;height:30px;background:linear-gradient(var(--fg-light),transparent);animation:scrolldown 1.8s ease-in-out infinite;}
@keyframes scrolldown{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ============================================================ FACTS BAR */
.facts{background:var(--night-2);border-block:1px solid var(--hair-l);}
.facts__in{display:flex;flex-wrap:wrap;}
.fact{flex:1 1 200px;padding:22px var(--pad);border-left:1px solid var(--hair-l);}
.fact:first-child{border-left:0;}
.fact dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--koralle);font-weight:700;}
.fact dd{margin:6px 0 0;font-size:clamp(16px,1.8vw,20px);font-weight:700;text-transform:uppercase;letter-spacing:.01em;}

/* ============================================================ SECTION SHELL */
.sec{padding-block:clamp(64px,9vw,128px);position:relative;}
.sec--paper{background:var(--paper);color:var(--fg-dark);}
.sec--paper .eyebrow{color:var(--dunkelrot);}
.sec__head{max-width:820px;margin-bottom:clamp(34px,5vw,60px);}
.sec__head h2{font-size:clamp(34px,7vw,84px);}
.sec__head p{font-size:clamp(16px,1.9vw,20px);margin:18px 0 0;max-width:60ch;color:var(--muted-l);}
.sec--paper .sec__head p{color:var(--muted-d);}

/* ============================================================ INTRO */
.intro__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(30px,6vw,80px);align-items:end;}
.intro__lead{font-size:clamp(26px,4vw,52px);line-height:1.08;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;}
.intro__lead em{font-style:normal;color:var(--koralle);}
.intro__side p{color:var(--muted-d);font-size:16px;}
.intro__side .hand{font-size:30px;color:var(--dunkelrot);display:block;margin-top:8px;}

/* ============================================================ LINE-UP */
.lineup{background:var(--night);}
.lineup__day{border-top:1px solid var(--hair-l);padding-top:26px;margin-top:40px;}
.lineup__day:first-of-type{margin-top:8px;}
.lineup__dh{display:flex;align-items:baseline;gap:16px;margin-bottom:18px;}
.lineup__dh .dot{width:13px;height:13px;border-radius:50%;flex:none;align-self:center;}
.lineup__dh b{font-size:clamp(22px,3vw,34px);text-transform:uppercase;}
.lineup__dh span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-l);}
.lineup__acts{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline;}
.lineup__acts a,.lineup__acts span{font-size:clamp(26px,5vw,62px);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  color:var(--fg-light);transition:color .14s ease;line-height:1.02;}
.lineup__acts a:hover{color:var(--sonnengelb);}
.lineup__acts .sm{font-size:clamp(15px,1.6vw,20px);color:var(--muted-l);align-self:center;font-weight:500;letter-spacing:.02em;text-transform:none;}
.lineup__foot{margin-top:38px;font-family:var(--font-hand);font-size:clamp(22px,3vw,34px);color:var(--sonnengelb);}

/* ============================================================ GALLERY */
.gallery{background:var(--night-2);}
.gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:12px;}
.tile{position:relative;overflow:hidden;border-radius:3px;background:var(--night-3);}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.tile:hover img{transform:scale(1.05);}
.tile--ph{display:flex;align-items:center;justify-content:center;}
.tile--ph span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,242,232,.5);}
.tile.big{grid-column:span 2;grid-row:span 2;}
.tile.wide{grid-column:span 2;}
.tile.c1{background:linear-gradient(135deg,var(--lavendel),#5b63d6);}
.tile.c2{background:linear-gradient(135deg,var(--koralle),var(--dunkelrot));}
.tile.c3{background:linear-gradient(135deg,var(--sonnengelb),#e0962a);}
.tile.c4{background:linear-gradient(135deg,var(--hellgruen),var(--dunkelgruen));}
.tile.c5{background:linear-gradient(135deg,var(--rose),var(--koralle));}
.tile.c6{background:linear-gradient(135deg,var(--dunkelgruen),#243a10);}

/* ============================================================ PLACES */
.places{background:var(--paper);color:var(--fg-dark);}
.places__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair-d);border:1px solid var(--hair-d);}
.place{background:var(--paper);padding:26px 22px 70px;position:relative;min-height:188px;transition:background .16s ease, color .16s ease;}
.place::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:var(--accent,var(--koralle));}
.place .num{position:absolute;right:18px;top:20px;font-size:14px;font-weight:700;color:var(--muted-d);letter-spacing:.1em;}
.place h3{font-size:clamp(20px,2.2vw,27px);margin-top:14px;}
.place p{font-size:14px;color:var(--muted-d);margin:10px 0 0;}
.place:hover{background:var(--accent);color:#fff;}
.place:hover p,.place:hover .num{color:rgba(255,255,255,.85);}

/* ============================================================ PROGRAMM */
.program{background:var(--night);}
.prog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.prog{border:1px solid var(--hair-l);border-radius:3px;padding:24px;background:var(--night-2);transition:border-color .16s ease, transform .16s ease;}
.prog:hover{border-color:var(--accent,var(--koralle));transform:translateY(-3px);}
.prog .k{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--night);background:var(--accent,var(--sonnengelb));padding:4px 10px;border-radius:2px;}
.prog h3{font-size:20px;margin:14px 0 8px;}
.prog p{font-size:14px;color:var(--muted-l);margin:0;}

/* ============================================================ INFOS */
.infos{background:var(--paper);color:var(--fg-dark);}
.infos__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair-d);border:1px solid var(--hair-d);}
.info{background:var(--paper);padding:30px;}
.info h3{font-size:20px;display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.info h3 .b{width:13px;height:13px;border-radius:50%;}
.info p,.info li{font-size:15px;color:var(--muted-d);}
.info ul{margin:0;padding-left:18px;}
.info li{margin:5px 0;}

/* ============================================================ MEMBERS CTA */
.cta{background:var(--dunkelgruen);color:var(--paper);position:relative;overflow:hidden;}
.cta__in{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;position:relative;z-index:1;}
.cta .eyebrow{color:var(--sonnengelb);}
.cta h2{font-size:clamp(32px,5.5vw,68px);color:var(--paper);}
.cta p{font-size:18px;color:#e7ecd9;max-width:48ch;margin:18px 0 28px;}
.cta__mono{position:absolute;right:-40px;bottom:-60px;width:360px;height:440px;background:rgba(255,255,255,.06);
  -webkit-mask:url(assets/monogram.svg) center/contain no-repeat;mask:url(assets/monogram.svg) center/contain no-repeat;z-index:0;}
.cta__lock{font-size:13px;letter-spacing:.04em;color:#cdd8bd;display:flex;align-items:center;gap:9px;margin-top:14px;}

/* ============================================================ FOOTER */
.colorstrip{display:flex;height:10px;}
.colorstrip i{flex:1;}
.footer{background:var(--night);color:var(--fg-light);padding-block:clamp(48px,7vw,80px) 30px;}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;}
.footer .wm{height:26px;width:165px;margin-bottom:16px;}
.footer__brand p{color:var(--muted-l);font-size:14px;max-width:34ch;}
.footer h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sonnengelb);margin:0 0 14px;}
.footer__col a{display:block;padding:5px 0;color:var(--muted-l);font-size:14px;transition:color .14s ease;}
.footer__col a:hover{color:var(--fg-light);}
.footer__social{display:flex;gap:14px;margin-top:6px;}
.footer__social a{opacity:.7;}
.footer__social a:hover{opacity:1;}
.footer__social svg{width:20px;height:20px;fill:currentColor;}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:46px;padding-top:22px;
  border-top:1px solid var(--hair-l);font-size:12px;color:var(--muted-l);letter-spacing:.04em;}
.footer__bottom a{color:var(--muted-l);}
.footer__bottom a:hover{color:var(--fg-light);}

/* ============================================================ MEMBERS PAGE */
.mhero{background:var(--dunkelgruen);color:var(--paper);position:relative;overflow:hidden;
  padding-block:clamp(110px,13vw,160px) clamp(40px,6vw,64px);border-bottom:1px solid var(--hair-l);}
.mhero .eyebrow{color:var(--sonnengelb);}
.mhero h1{font-size:clamp(38px,8vw,88px);color:var(--paper);}
.mhero p{color:#e7ecd9;max-width:60ch;margin-top:16px;font-size:clamp(16px,1.9vw,19px);}
.mhero__mono{position:absolute;right:-40px;top:-30px;width:300px;height:366px;background:rgba(255,255,255,.06);
  -webkit-mask:url(assets/monogram.svg) center/contain no-repeat;mask:url(assets/monogram.svg) center/contain no-repeat;}
.mtools{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;position:relative;z-index:1;}
.tt-sec{background:var(--night);padding-block:clamp(40px,6vw,72px);}
.frame-wrap{background:#fff;border:1px solid var(--hair-l);border-radius:3px;overflow:hidden;margin-top:24px;}
.frame-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 10px 12px 18px;border-bottom:1px solid var(--hair-d);background:var(--paper-2);}
.frame-bar b{font-family:var(--font-head);font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-dark);}
.fsbtn{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:var(--night);color:var(--paper);
  border:none;border-radius:2px;padding:10px 18px;transition:background .15s ease;}
.fsbtn:hover{background:var(--koralle);}
.frame-wrap iframe{width:100%;height:1400px;border:0;display:block;background:#faf9f5;}
.frame-wrap:fullscreen{background:#fff;border-radius:0;}
.frame-wrap:fullscreen .frame-bar{position:sticky;top:0;z-index:2;}
.frame-wrap:fullscreen iframe{height:calc(100vh - 48px);}
.frame-wrap:-webkit-full-screen{background:#fff;}
.frame-wrap:-webkit-full-screen iframe{height:calc(100vh - 48px);}
.mnote{font-size:14px;color:var(--muted-l);margin-top:12px;}
.mnote a{color:var(--sonnengelb);}

/* ============================================================ REVEAL
   Progressive enhancement: nur wenn JS aktiv ist (html.js) wird versteckt,
   sonst sind alle Inhalte sofort sichtbar. */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.js [data-reveal].in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
  .hero__fallback,.hero__scroll i{animation:none;}
}

/* ============================================================ RESPONSIVE */
@media (max-width:1000px){
  .intro__grid,.cta__in{grid-template-columns:1fr;align-items:start;}
  .gallery__grid{grid-template-columns:repeat(2,1fr);}
  .places__grid,.prog__grid{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;gap:30px 20px;}
}
@media (max-width:760px){
  .nav__links{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(14,18,10,.97);border-bottom:1px solid var(--hair-l);padding:8px var(--pad) 20px;
    transform:translateY(-130%);transition:transform .25s ease;}
  .nav__links.is-open{transform:translateY(0);}
  .nav__links a:not(.btn){padding:15px 0;border-bottom:1px solid var(--hair-l);font-size:15px;}
  .nav__links a:not(.btn)::after{display:none;}
  .nav__links .btn{margin-top:14px;justify-content:center;}
  .nav-toggle{display:inline-flex;}
  .nav__social{display:none;}
  .infos__grid,.prog__grid,.places__grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;}
  .hero__row{align-items:flex-start;flex-direction:column;}
  .count{order:-1;}
}