/*
Theme Name: HHC Street Fire
Theme URI: https://hip-hop-company.de/
Author: Hip Hop Company Stuttgart
Description: Eigenes Theme der Hip Hop Company Stuttgart – Design "Street Fire" (Schwarz, Orange, Rot). Inhalte in inc/data.php.
Version: 1.0.3
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: hhc
*/

@font-face{font-family:Anton;src:url(assets/fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(assets/fonts/space-grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}

:root{
  --bg:#0a0a0b; --bg2:#141416; --line:#27272b; --text:#f3f3ee; --mute:#a2a2a6;
  --neon:#ff6a13; --red:#e3121b; --fire:linear-gradient(90deg,#ffb000,#ff6a13 40%,#e3121b);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --display:Anton,Impact,"Arial Narrow",sans-serif; --body:"Space Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:90px}
html.intro-on{overflow:hidden}
body{background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.wrap.narrow{width:min(820px,100% - 32px)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--neon);color:#000;padding:10px 14px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

/* ---------- INTRO (nur Startseite, einmal pro Sitzung) ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;transition:clip-path .7s var(--ease-io);clip-path:inset(0 0 0 0)}
.intro[hidden]{display:none}
.intro.is-out{clip-path:inset(0 0 100% 0)}
.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 55%,rgba(255,106,19,.2),transparent 70%);opacity:0;animation:glow 1.6s .9s ease-out forwards}
@keyframes glow{0%{opacity:0}30%{opacity:1}45%{opacity:.4}60%{opacity:1}100%{opacity:.7}}
.logo-anim{position:relative;width:min(560px,82vw);aspect-ratio:1000/769}
.logo-anim img{position:absolute;inset:0;width:100%;height:100%}
.l-dancer{clip-path:polygon(0 0,100% 0,100% 34%,35% 34%,35% 66%,100% 66%,100% 100%,0 100%);opacity:0;transform:translateY(-40%) rotate(-8deg);filter:blur(6px);animation:drop .7s .75s var(--ease-out) forwards}
.l-h1{clip-path:inset(35% 46% 35.5% 35.5%)}.l-h2{clip-path:inset(35% 24% 35.5% 57%)}.l-c{clip-path:inset(35% 1.5% 35.5% 78%)}
.l-h1,.l-h2,.l-c{opacity:0;transform:scale(1.5);filter:blur(8px);animation:slam .38s var(--ease-out) forwards}
.l-h1{animation-delay:.15s}.l-h2{animation-delay:.27s}.l-c{animation-delay:.39s}
@keyframes slam{to{opacity:1;transform:none;filter:none}}
@keyframes drop{to{opacity:1;transform:none;filter:none}}
.logo-anim::after{content:"";position:absolute;inset:0;background:url(assets/img/logo.png) center/contain no-repeat;filter:drop-shadow(0 0 18px var(--neon));opacity:0;animation:flash .9s 1.25s forwards}
@keyframes flash{0%{opacity:0}15%{opacity:.9}30%{opacity:.1}45%{opacity:.8}100%{opacity:.35}}
.intro__tag{position:absolute;bottom:14vh;left:0;right:0;text-align:center;font:500 13px/1 var(--body);letter-spacing:.4em;text-transform:uppercase;color:var(--mute);opacity:0;animation:slam .5s 1.3s var(--ease-out) forwards}
.intro__skip{position:absolute;right:20px;bottom:20px;background:none;border:1px solid var(--line);color:var(--mute);font:500 13px var(--body);padding:10px 16px;border-radius:99px;cursor:pointer}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;padding:12px max(16px,calc(50% - 600px));background:rgba(10,10,11,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav__logo img{height:40px;width:auto}
.nav nav{margin-left:auto}
.nav ul{display:flex;gap:22px;list-style:none;padding:0;font-weight:500;font-size:15px}
.nav ul a{text-decoration:none;opacity:.8;transition:opacity .15s ease}
@media (hover:hover){.nav ul a:hover{opacity:1}}
.nav__toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);font:600 14px var(--body);padding:10px 14px;cursor:pointer}
.nav .hhc-btn{padding:12px 16px;font-size:13px}
@media (max-width:1020px){
  .nav__toggle{display:block}
  .nav ul{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 16px;
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .25s var(--ease-out)}
  .nav ul a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:18px;opacity:1}
  .nav.is-open ul{opacity:1;transform:none;pointer-events:auto}
}
@media (max-width:520px){.nav .hhc-btn{display:none}}

.hhc-btn{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;background:var(--neon);color:#050505;font:700 15px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;padding:16px 22px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);text-decoration:none;transition:transform .16s var(--ease-out),background-color .15s ease}
.hhc-btn:active{transform:scale(.97)}
@media (hover:hover){.hhc-btn:hover{background:#fff}}
.hhc-btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
@media (hover:hover){.hhc-btn.ghost:hover{background:var(--text);color:#050505}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:calc(100svh - 65px);display:grid;align-items:end;padding:100px 0 64px;isolation:isolate;overflow:hidden}
.hero__img{position:absolute;inset:0;z-index:-2}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
@media (min-width:900px){.hero__img{left:30%}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,11,.2) 0%,rgba(10,10,11,.1) 40%,var(--bg) 96%),linear-gradient(90deg,rgba(10,10,11,.9),transparent 65%)}
.hero--sub{min-height:72svh}
.intro-done .hero__img img{animation:zoom 1.6s var(--ease-out) both}
@keyframes zoom{from{transform:scale(1.08)}}
.kicker{font:700 13px/1.3 var(--body);letter-spacing:.28em;text-transform:uppercase;color:var(--neon);display:flex;gap:12px;align-items:center}
.kicker::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.hero h1{font:400 clamp(52px,9.5vw,150px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:18px 0 22px}
.hero--sub h1{font-size:clamp(46px,7.5vw,112px)}
.hero h1 .line{display:block}
.hero h1 .o{color:transparent;-webkit-text-stroke:2px var(--text)}
.hero h1 .g,.big em,.hero h1 em{font-style:normal;width:fit-content;background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em{display:inline}
.lead{max-width:34em;font-size:19px;color:#d8d8d2}
.lead a{color:var(--neon)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.intro-done .hero .line{animation:up .8s var(--ease-out) both}
.intro-done .hero .line:nth-child(2){animation-delay:.07s}.intro-done .hero .line:nth-child(3){animation-delay:.14s}
@keyframes up{from{opacity:0;transform:translateY(40%)}}
.sticker{position:absolute;right:max(16px,calc(50% - 600px));top:14%;width:150px;aspect-ratio:1;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;text-align:center;
  font:400 26px/.95 var(--display);text-transform:uppercase;transform:rotate(12deg);box-shadow:0 10px 30px rgba(227,18,27,.45)}
.sticker small{display:block;font:700 11px var(--body);letter-spacing:.12em}
@media (max-width:700px){.sticker{width:100px;font-size:18px;top:8%}}

.page-head{padding:90px 0 50px}
.page-head .lead{margin-top:6px}

/* ---------- MARQUEE ---------- */
.marquee{background:var(--fire);color:#050505;overflow:hidden;transform:rotate(-2deg);margin:10px -20px 0}
.marquee div{display:flex;gap:40px;width:max-content;padding:14px 0;font:400 32px/1 var(--display);text-transform:uppercase;animation:mq 26s linear infinite}
.marquee span::after{content:"✦";margin-left:40px}
@keyframes mq{to{transform:translateX(-50%)}}

section{padding:100px 0}
section.pad0{padding-top:0}
h2.big,h1.big{font:400 clamp(44px,7.5vw,100px)/.92 var(--display);text-transform:uppercase;margin:14px 0 36px}
h1.big{margin-bottom:18px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.stats div{padding:34px 28px;border-right:1px solid var(--line)}
.stats div:last-child{border:0}
.stats b{display:block;font:400 64px/1 var(--display)}
.stats span{color:var(--mute)}
@media (max-width:700px){.stats{grid-template-columns:1fr}.stats div{border-right:0;border-bottom:1px solid var(--line)}}

/* Zielgruppen-Karten */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--bg2);text-decoration:none}
.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .4s ease,transform .6s var(--ease-out)}
.card span{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.88))}
.card small{color:var(--neon);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.card b{display:block;font:400 38px/1 var(--display);text-transform:uppercase}
@media (hover:hover){.card:hover img{filter:none;transform:scale(1.04)}}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}}

/* Stundenplan */
.hhc-class{display:grid;grid-template-columns:110px 150px 1fr auto;gap:24px;align-items:center;padding:26px 12px;border-top:1px solid var(--line);transition:background-color .2s ease}
.hhc-class:last-child{border-bottom:1px solid var(--line)}
@media (hover:hover){.hhc-class:hover{background:var(--bg2)}}
.hhc-class__day span{font:400 44px/1 var(--display);color:var(--neon)}
.hhc-class__day small{display:block;color:var(--mute);font-size:13px}
.hhc-class__time{font:400 30px/1 var(--display)}.hhc-class__time span{color:var(--mute)}
.hhc-class h3{font:700 22px/1.2 var(--body);text-transform:uppercase}
.hhc-class p{color:var(--mute);margin-top:4px}
.hhc-tag{display:inline-block;background:var(--red);color:#fff;font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;margin-right:6px;vertical-align:2px}
@media (max-width:820px){.hhc-class{grid-template-columns:70px 1fr;gap:6px 16px}.hhc-class__time{grid-column:2}.hhc-class__body{grid-column:1/-1}.hhc-class .hhc-btn{grid-column:1/-1;justify-content:center;margin-top:10px}}

/* Crew */
.crew{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:18px}
.crew figure{position:relative;overflow:hidden;background:var(--bg2);aspect-ratio:3/4}
.crew figure.wide{aspect-ratio:auto}
.crew img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .4s ease,transform .6s var(--ease-out)}
@media (hover:hover){.crew figure:hover img{filter:none;transform:scale(1.03)}}
.crew figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.crew b{font:400 40px/1 var(--display);text-transform:uppercase;display:block}
.crew small{color:var(--neon);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
@media (max-width:820px){.crew{grid-template-columns:1fr 1fr}.crew figure.wide{grid-column:1/-1;aspect-ratio:16/10}}

/* Preise */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hhc-tier.is-kids{border-color:var(--red)}
.hhc-tier.is-kids .hhc-tier__badge{background:var(--red);color:#fff}
@media (max-width:1100px){.tiers{grid-template-columns:1fr 1fr}}
.hhc-tier{position:relative;border:1px solid var(--line);padding:30px;background:var(--bg2)}
.hhc-tier.is-hot{border-color:var(--neon);box-shadow:0 0 0 1px var(--neon),0 0 40px rgba(255,106,19,.14)}
.hhc-tier__badge{position:absolute;top:-12px;left:30px;background:var(--neon);color:#000;font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px}
.hhc-tier h3{font:400 38px/1 var(--display);text-transform:uppercase}
.hhc-tier__note{color:var(--mute)}
.hhc-tier__price{font:400 72px/1 var(--display);margin:22px 0}
.hhc-tier__price .from,.hhc-tier__price .per{font:500 14px var(--body);color:var(--mute);margin:0 6px}
.hhc-tier__price .eur{font-size:36px}
.hhc-tier ul{list-style:none;padding:0}
.hhc-tier li{display:flex;justify-content:space-between;padding:9px 0;border-top:1px dashed var(--line);color:var(--mute)}
.hhc-tier li b{color:var(--text)}
.fine{color:var(--mute);margin-top:22px;font-size:15px}
@media (max-width:820px){.tiers{grid-template-columns:1fr}}

/* Probetraining-Band */
.trial{position:relative;isolation:isolate;background:url(assets/img/buehne-1000.jpg) center/cover}
.trial::before{content:"";position:absolute;inset:0;background:rgba(10,10,11,.84);z-index:-1}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s;margin-bottom:40px;padding:0}
.steps li{list-style:none;border-top:3px solid var(--neon);padding-top:18px}
.steps li::before{counter-increment:s;content:"0" counter(s);font:400 48px/1 var(--display);color:var(--neon);display:block;margin-bottom:8px}
.steps b{font-size:20px;display:block}
.steps span{color:#d0d0ca}
@media (max-width:820px){.steps{grid-template-columns:1fr}}

/* Fließtext-Blöcke */
.prose-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.prose h2{font:400 32px/1.05 var(--display);text-transform:uppercase;margin-bottom:10px}
.prose p{color:#cfcfca}
@media (max-width:900px){.prose-grid{grid-template-columns:1fr}}

/* FAQ */
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--neon);font-size:26px;line-height:1;transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:#cfcfca;margin-top:10px}

/* Kontakt */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.contact address{font-style:normal;font-size:22px;line-height:1.5}
.contact a{color:var(--neon);text-decoration:none}
.anfahrt{margin-top:22px;padding-left:18px;color:#cfcfca}
.map{position:relative;display:block;overflow:hidden}
.map img{aspect-ratio:4/3;object-fit:cover;width:100%}
.map span{position:absolute;inset:auto 0 0;padding:14px;background:rgba(0,0,0,.78);font-size:15px;color:var(--text)}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* Rechtstexte */
.legal h2{font:700 22px/1.3 var(--body);margin:32px 0 10px}
.legal h3{font:700 18px/1.3 var(--body);margin:24px 0 8px}
.legal p,.legal li{color:#d0d0ca;margin-bottom:12px}
.legal a{color:var(--neon)}

/* Footer */
.foot{border-top:1px solid var(--line);padding:60px 0 30px;color:var(--mute);font-size:15px}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot__grid img{width:110px;height:auto;margin-bottom:14px}
.foot__grid a{display:block;text-decoration:none;padding:3px 0}
.foot__grid p a{display:inline;color:var(--text)}
@media (hover:hover){.foot__grid a:hover{color:var(--text)}}
.foot__h{color:var(--text);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px;margin-bottom:8px}
.foot__legal{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;border-top:1px solid var(--line);margin-top:40px;padding-top:20px}
.foot__legal a{text-decoration:none}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr}}

.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.rv.in,.no-js .rv{opacity:1;transform:none}

/* ---------- Buchungsdialog ---------- */
.hhc-dialog{margin:auto;border:0;padding:0;background:transparent;color:var(--text);max-width:min(560px,100% - 24px);width:100%;max-height:92vh}
.hhc-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.hhc-dialog[open] .hhc-sheet{animation:pop .25s var(--ease-out)}
.hhc-dialog.is-closing .hhc-sheet{opacity:0;transform:scale(.97);transition:opacity .15s ease,transform .15s ease}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(10px)}}
.hhc-sheet{position:relative;background:var(--bg2);border:1px solid var(--neon);padding:30px}
.hhc-sheet h2{font:400 42px/1 var(--display);text-transform:uppercase;margin:6px 0}
.hhc-sheet__kicker{color:var(--neon);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.hhc-sheet__meta{color:var(--mute);font-size:15px}
.hhc-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--mute);font-size:30px;cursor:pointer;line-height:1;padding:4px 8px}
.hhc-dates{border:0;padding:0;margin:22px 0;display:grid;gap:8px}
.hhc-dates legend{font-weight:700;margin-bottom:8px}
.hhc-date{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);cursor:pointer;transition:border-color .15s ease}
.hhc-date:has(input:checked){border-color:var(--neon);background:rgba(255,106,19,.07)}
.hhc-date.is-full{opacity:.4;cursor:not-allowed}
.hhc-date input{accent-color:var(--neon)}
.hhc-date__d{font-weight:700}.hhc-date__f{color:var(--mute);font-size:14px}
.hhc-dots{display:flex;gap:4px}.hhc-dots i{width:8px;height:8px;border-radius:50%;background:var(--neon)}.hhc-dots i.on{background:var(--line)}
.hhc-loading{color:var(--mute);padding:18px 0}
.hhc-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hhc-fields label{display:grid;gap:6px;font-size:13px;color:var(--mute)}
.hhc-fields label:first-child{grid-column:1/-1}
.hhc-fields input{width:100%;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--text);font:16px var(--body);padding:12px;border-radius:0}
.hhc-fields input:focus{outline:2px solid var(--neon);outline-offset:-1px}
.hhc-hp{position:absolute;left:-9999px}
.hhc-check{display:flex;gap:10px;margin:16px 0;font-size:14px;color:var(--mute)}
.hhc-check a{color:var(--neon)}
.hhc-err{color:#ff6b6b;margin-bottom:12px;font-size:15px}
.hhc-submit{width:100%;justify-content:center}
.hhc-submit[disabled]{opacity:.6;cursor:wait}
.hhc-fine{color:var(--mute);font-size:13px;text-align:center;margin-top:12px}
.hhc-done p{margin-top:12px}
@media (max-width:520px){.hhc-fields{grid-template-columns:1fr}.hhc-sheet{padding:24px 18px}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.2s!important}.marquee div{animation:none}}