/* =========================================================
   das techno cafe — Tuesday · Outdoor & Afterwork, Wien
   One-of-one bespoke. Dark techno-nightlife.
   Display: Anton  ·  Text: Space Grotesk
   Accent: brand gradient (peach → orange → magenta)
   ========================================================= */

:root{
  --bg:        #08070a;
  --bg-2:      #0e0c12;
  --surface:   #15121b;
  --surface-2: #1d1926;
  --line:      #2a2533;
  --text:      #f4f1f7;
  --muted:     #a39db3;
  --muted-2:   #756f83;

  --neon:      #ff5c2b;   /* dominant: hot orange */
  --neon-2:    #ff2d8a;   /* magenta */
  --neon-3:    #ffb347;   /* warm peach */
  --grad:      linear-gradient(100deg, #ffb347 0%, #ff5c2b 42%, #ff2d8a 100%);

  --ff-display: 'Anton', 'Arial Narrow', sans-serif;
  --ff-text:    'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1140px;
  --pad: clamp(20px, 5vw, 56px);
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-text);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block: clamp(64px, 11vw, 130px); position:relative; }

/* ---------- type ---------- */
h1,h2,h3{ margin:0; font-family:var(--ff-display); font-weight:400; line-height:.98; letter-spacing:.01em; text-transform:uppercase; }
h2{ font-size:clamp(2rem, 5.6vw, 3.6rem); }
h3{ font-size:clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing:.02em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--ff-text);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.72rem;
  color:var(--neon-3);
  margin:0 0 1.1em;
}
.eyebrow-line{ display:inline-flex; align-items:center; gap:.7em; }
.eyebrow-line::before{ content:""; width:34px; height:2px; background:var(--grad); display:inline-block; }

.lead{ font-size:1.12rem; color:#e7e3ee; }
.section-sub{ color:var(--muted); max-width:54ch; margin-top:.9em; }

/* gradient text helper */
.accent{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding:.92em 1.5em;
  font-family:var(--ff-text); font-weight:600;
  font-size:.92rem; letter-spacing:.04em;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
  text-transform:uppercase;
}
.btn-neon{
  background:var(--grad); color:#0a0509; font-weight:700;
  box-shadow:0 0 0 0 rgba(255,92,43,.0);
}
.btn-neon:hover{ transform:translateY(-2px); box-shadow:0 10px 34px -8px rgba(255,45,138,.55), 0 0 22px -4px rgba(255,92,43,.5); }
.btn-ghost{
  background:transparent; color:var(--text);
  border-color:var(--line);
}
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--neon); color:#fff; }

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(8,7,10,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, padding .3s ease;
}
.site-header.scrolled{ background:rgba(8,7,10,.9); border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:1rem; }

.brand{ display:flex; flex-direction:column; line-height:1.05; }
.brand-mark{ font-family:var(--ff-display); font-size:1.18rem; letter-spacing:.04em; text-transform:lowercase; }
.brand-sub{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:3px; }

.nav{ display:flex; align-items:center; gap:1.6rem; }
.nav a{ font-size:.86rem; font-weight:500; letter-spacing:.04em; color:var(--muted); transition:color .2s ease; }
.nav a:hover{ color:var(--text); }
.nav .nav-cta{
  color:#0a0509; background:var(--grad); font-weight:700;
  padding:.6em 1.15em; border-radius:999px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
}
.nav .nav-cta:hover{ color:#0a0509; filter:brightness(1.06); }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  background:transparent; border-radius:10px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--text); transition:transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,9,14,.98); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    padding:0 var(--pad);
    max-height:0; overflow:hidden;
    transition:max-height .32s ease, padding .32s ease;
  }
  .nav.open{ max-height:480px; padding-block:14px 22px; }
  .nav a{ padding:.85em 0; font-size:1rem; border-bottom:1px solid var(--line); }
  .nav a:last-child{ border-bottom:0; }
  .nav .nav-cta{ margin-top:14px; text-align:center; }
}

/* ============ HERO ============ */
.hero{
  position:relative; overflow:hidden;
  padding-top:clamp(70px, 13vw, 130px);
  padding-bottom:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #19121e 0%, var(--bg) 60%);
}
.hero-noise{
  position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.hero-glow{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; opacity:.5; }
.hero-glow-a{ width:520px; height:520px; top:-120px; left:-100px; background:radial-gradient(circle, rgba(255,92,43,.55), transparent 70%); }
.hero-glow-b{ width:480px; height:480px; bottom:-160px; right:-120px; background:radial-gradient(circle, rgba(255,45,138,.45), transparent 70%); }

.hero-inner{ position:relative; z-index:2; text-align:center; padding-bottom:clamp(54px, 9vw, 96px); }
.hero .eyebrow{ color:var(--neon-3); }
.hero-title{
  font-size:clamp(4.2rem, 20vw, 13rem);
  line-height:.82;
  letter-spacing:.005em;
  margin:.06em 0 .32em;
}
.hero-title .line{ display:block; }
.hero-lede{ font-size:clamp(1.05rem, 2.3vw, 1.32rem); color:#d9d4e2; max-width:58ch; margin-inline:auto; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:1.9em; }
.hero-meta{ margin-top:1.7em; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-2); }

/* marquee */
.marquee{
  position:relative; z-index:2; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,92,43,.06), rgba(255,45,138,.04));
  padding-block:.7em;
}
.marquee-track{
  display:inline-flex; align-items:center; gap:1.4rem; white-space:nowrap;
  font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(1rem, 2.4vw, 1.5rem); color:var(--text);
  will-change:transform; animation:marquee 26s linear infinite;
}
.marquee-track .star{ color:var(--neon); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ============ STORY ============ */
.story{ background:var(--bg-2); }
.story-grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px, 6vw, 72px); align-items:start; }
.badge{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:148px; height:148px; border-radius:50%;
  background:var(--surface); border:2px solid transparent;
  background-image:linear-gradient(var(--surface),var(--surface)), var(--grad);
  background-origin:border-box; background-clip:padding-box, border-box;
  text-align:center;
  box-shadow:0 0 40px -10px rgba(255,92,43,.4);
}
.badge-num{ font-family:var(--ff-display); font-size:3.1rem; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.badge-txt{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:6px; line-height:1.3; }
.story-body h2{ margin-bottom:.5em; max-width:16ch; }
.story-body p{ color:var(--muted); }
.story-body .lead{ color:#e7e3ee; }

@media (max-width: 720px){
  .story-grid{ grid-template-columns:1fr; }
  .story-head{ display:flex; }
}

/* ============ JEDEN DIENSTAG / CONCEPT ============ */
.concept{ background:var(--bg); }
.section-head{ max-width:var(--maxw); margin-bottom:clamp(34px, 6vw, 56px); }
.section-head h2{ margin-top:.1em; }

.concept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.concept-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 26px 32px;
  position:relative; overflow:hidden;
  transition:transform .22s ease, border-color .25s ease, box-shadow .3s ease;
}
.concept-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad); opacity:.0; transition:opacity .3s ease;
}
.concept-card:hover{ transform:translateY(-4px); border-color:#3a3247; box-shadow:0 18px 40px -22px rgba(0,0,0,.8); }
.concept-card:hover::before{ opacity:1; }
.c-num{ font-family:var(--ff-display); font-size:1.4rem; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.concept-card h3{ margin:.5em 0 .55em; }
.concept-card p{ color:var(--muted); font-size:.97rem; margin:0; }

@media (max-width: 760px){ .concept-grid{ grid-template-columns:1fr; } }

.lineup-cta{
  margin-top:30px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(120deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:30px clamp(24px,4vw,40px);
}
.lineup-cta-text h3{ margin-bottom:.4em; }
.lineup-cta-text p{ color:var(--muted); margin:0; max-width:48ch; }

/* ============ GALERIE ============ */
.gallery-section{ background:var(--bg-2); }
.gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; }
.card{
  margin:0; position:relative; cursor:pointer;
  border-radius:12px; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  outline:none;
  transition:transform .2s ease, border-color .25s ease, box-shadow .3s ease;
}
.card:hover, .card:focus-visible{ transform:translateY(-3px); border-color:var(--neon); box-shadow:0 14px 34px -18px rgba(255,45,138,.5); }
.card-media{ aspect-ratio:4/5; overflow:hidden; background:#000; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease, filter .3s ease; filter:saturate(1.05); }
.card:hover .card-media img{ transform:scale(1.05); }
.card::after{
  content:"⤢"; position:absolute; right:10px; bottom:8px;
  font-size:.85rem; color:#fff; opacity:0; transition:opacity .25s ease;
  background:rgba(0,0,0,.5); width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.card:hover::after, .card:focus-visible::after{ opacity:1; }

.gallery-foot{ margin-top:30px; color:var(--muted); font-size:.98rem; }
.gallery-foot a{ color:var(--neon-3); border-bottom:1px solid rgba(255,179,71,.35); padding-bottom:1px; }
.gallery-foot a:hover{ color:#fff; }

/* ============ KONTAKT ============ */
.contact{ background:var(--bg); text-align:center; }
.contact-inner{ max-width:760px; margin-inline:auto; }
.contact h2{ margin-bottom:.45em; }
.contact-lede{ color:var(--muted); max-width:56ch; margin-inline:auto; }
.contact-actions{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin:1.8em 0 2.4em; }
.contact-facts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  text-align:left;
}
.contact-facts li{ background:var(--surface); padding:18px 22px; }
.cf-label{ display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--neon-3); margin-bottom:6px; }
.cf-value{ display:block; color:#e7e3ee; font-size:.98rem; }
@media (max-width: 560px){ .contact-facts{ grid-template-columns:1fr; } }

/* ============ FOOTER ============ */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-block:clamp(48px,7vw,72px) 28px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; }
.footer-brand{ display:flex; flex-direction:column; }
.footer-col .cf-label{ color:var(--neon-3); }
.footer-col p{ color:var(--muted); font-size:.94rem; margin:0; }
.footer-col a{ color:var(--muted); border-bottom:1px solid var(--line); }
.footer-col a:hover{ color:var(--text); }
.footer-base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(34px,5vw,52px); padding-top:22px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--muted-2); letter-spacing:.03em;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 460px){ .footer-grid{ grid-template-columns:1fr; } }

/* ============ STICKY MOBILE CTA ============ */
.sticky-cta{
  display:none;
  position:fixed; left:14px; right:14px; bottom:14px; z-index:70;
  background:var(--grad); color:#0a0509; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; font-size:.9rem;
  padding:.95em 1em; border-radius:999px; text-align:center;
  align-items:center; justify-content:center; gap:.5em;
  box-shadow:0 12px 34px -10px rgba(255,45,138,.6);
}
.sticky-ig{ font-size:1.1em; }
@media (max-width: 860px){ .sticky-cta{ display:flex; } body{ padding-bottom:78px; } }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,4,7,.94); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  padding:24px;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lb-inner{ margin:0; max-width:min(560px, 92vw); text-align:center; }
.lb-inner img{
  max-width:100%; max-height:78vh; width:auto; margin-inline:auto;
  border-radius:12px; border:1px solid var(--line);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
}
.lb-cap{ margin-top:14px; }
.lb-note{ display:block; color:var(--muted); font-size:.95rem; }
.lb-close,.lb-nav{
  position:fixed; background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:#fff; cursor:pointer; border-radius:999px;
  width:48px; height:48px; font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .15s ease;
}
.lb-close:hover,.lb-nav:hover{ background:rgba(255,92,43,.25); }
.lb-close{ top:18px; right:18px; }
.lb-nav{ top:50%; transform:translateY(-50%); }
.lb-prev{ left:14px; }
.lb-next{ right:14px; }
@media (max-width:560px){ .lb-nav{ width:42px; height:42px; } }