@import url("fonts/fonts.css");
/* Auravox – Website. Dunkle Bühne, Gold als einziger Akzent, viel Luft. */
:root{
  --ink:#121212; --ink-2:#1B1B1B; --line:#2E2B27; --text:#EDE8E1; --muted:#B4ADA2;
  --gold:#C9A46A; --gold-2:#E2C48E; --on-gold:#17120A;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font);font-weight:300;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--gold)}
a:hover{color:var(--gold-2)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.eyebrow{font-size:.72rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);font-weight:400;margin:0 0 14px}
h1,h2,h3{font-weight:300;line-height:1.2;margin:0;text-wrap:balance}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:.01em}
h3{font-size:1.05rem;font-weight:400;letter-spacing:.04em}
p{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:2px;border:1px solid var(--gold);background:var(--gold);color:var(--on-gold);font:inherit;font-weight:400;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--on-gold)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:rgba(201,164,106,.12);color:var(--gold-2)}
.btn:disabled{opacity:.5;cursor:wait}

/* Kopf */
.top{position:sticky;top:0;z-index:10;background:rgba(18,18,18,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.brand img{width:34px;height:34px}
.brand span{letter-spacing:.42em;font-size:.88rem}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--muted);text-decoration:none;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.nav a:hover{color:var(--text)}
.nav .btn{min-height:40px;padding:8px 16px;font-size:.72rem}
@media (max-width:760px){.nav a:not(.btn){display:none}}

/* Hero */
.hero{padding-block:72px 88px;text-align:center;border-bottom:1px solid var(--line)}
.hero .logo{width:min(220px,52vw);height:auto;display:block;margin:0 auto 40px}
.hero h1{font-size:clamp(1.9rem,5vw,3.4rem);max-width:18ch;margin:0 auto}
.hero p.lead{max-width:58ch;margin:22px auto 0;color:var(--muted);font-size:1.05rem}
.hero .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}

section.block{padding-block:84px;border-bottom:1px solid var(--line)}
.head{max-width:640px;margin-bottom:44px}
.head p{color:var(--muted);margin-top:14px}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.service{background:var(--ink);padding:32px 28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.service ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.95rem}
.service li::before{content:"";display:inline-block;width:14px;height:1px;background:var(--gold);vertical-align:middle;margin-right:10px}
@media (max-width:860px){.services{grid-template-columns:minmax(0,1fr)}}

/* Warum */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px}
.why div{min-width:0;display:flex;flex-direction:column;gap:8px}
.why p{color:var(--muted)}
@media (max-width:700px){.why{grid-template-columns:minmax(0,1fr)}}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{border-top:1px solid var(--gold);padding-top:18px;min-width:0;display:flex;flex-direction:column;gap:8px}
.steps li::before{counter-increment:s;content:"0" counter(s);color:var(--gold);font-size:.8rem;letter-spacing:.2em}
.steps p{color:var(--muted);font-size:.95rem}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Model-Band */
.band{background:var(--ink-2)}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band p{color:var(--muted);margin-top:8px;max-width:52ch}

/* Kontakt */
.contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.contact div{border:1px solid var(--line);padding:24px;min-width:0}
.contact .label{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.contact .val{font-size:1.05rem;overflow-wrap:anywhere;user-select:all}
@media (max-width:760px){.contact{grid-template-columns:minmax(0,1fr)}}

/* Fuß */
footer{padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:.82rem}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--muted)}

/* Textseiten */
.doc{padding-block:56px 80px;max-width:760px}
.doc h1{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:28px}
.doc h2{font-size:1.15rem;font-weight:400;margin:32px 0 10px;color:var(--gold)}
.doc p,.doc li{color:var(--muted)}
.doc p+p{margin-top:10px}
.todo{background:rgba(201,164,106,.14);color:var(--gold-2);padding:0 4px}

/* Formular */
.form{display:flex;flex-direction:column;gap:40px;margin-top:8px}
fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:16px}
legend{padding:0;margin-bottom:18px;font-size:1.05rem;font-weight:400;letter-spacing:.04em;width:100%;border-bottom:1px solid var(--line);padding-bottom:10px}
legend small{color:var(--gold);letter-spacing:.2em;margin-right:12px;font-size:.75rem}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f > span{font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.f > span b{color:var(--gold);font-weight:400}
input,select,textarea{font:inherit;font-size:16px;color:var(--text);background:var(--ink-2);border:1px solid var(--line);border-radius:2px;padding:12px 14px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
.checks{display:flex;flex-wrap:wrap;gap:10px 22px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;cursor:pointer;min-height:28px}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--gold);flex-shrink:0}
.check.wide{color:var(--muted);font-size:.9rem}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:560px){.photos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.photo{position:relative;aspect-ratio:3/4;border:1px dashed #4A453E;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:10px;cursor:pointer;color:var(--muted);font-size:.85rem;overflow:hidden;max-width:100%}
.photo:hover{border-color:var(--gold)}
.photo b{color:var(--text);font-weight:400}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo.done{border-style:solid;border-color:var(--gold)}
.hint{color:var(--muted);font-size:.9rem}
.msg{padding:14px 16px;border:1px solid var(--line);font-size:.95rem}
.msg.err{border-color:#B5524F;color:#F2A9A6}
.success{text-align:center;padding-block:40px;display:flex;flex-direction:column;align-items:center;gap:16px}
.success img{width:64px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Hero mit Video */
.hero-media{position:relative;overflow:hidden;min-height:min(92vh,860px);display:flex;align-items:center;padding-block:96px 112px;border-bottom:1px solid var(--line);isolation:isolate}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:#121212 url("assets/img/hero-poster.jpg") center/cover}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,18,18,.55) 0%,rgba(18,18,18,.35) 40%,rgba(18,18,18,.85) 100%)}
.hero-inner{position:relative;width:100%}
.scroll-hint{position:absolute;left:50%;bottom:28px;width:22px;height:36px;margin-left:-11px;border:1px solid rgba(237,232,225,.45);border-radius:12px}
.scroll-hint::after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;background:var(--gold);border-radius:1px;animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* Bilder in Leistungen */
.service-img{margin:-32px -28px 6px;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.service-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.service:hover .service-img img{transform:scale(1.04)}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gallery figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-2);min-width:0}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease,filter .8s ease;filter:saturate(.9)}
.gallery figure:hover img{transform:scale(1.05);filter:saturate(1)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 14px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text);background:linear-gradient(transparent,rgba(18,18,18,.8))}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* sanftes Einblenden beim Scrollen */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.scroll-hint::after{animation:none}.service-img img,.gallery img{transition:none}}

/* Sprachumschalter */
.nav a.lang{display:inline-flex!important;align-items:center;min-height:40px;padding:0 4px;font-size:.74rem;letter-spacing:.2em;color:var(--gold)}
.nav a.lang:hover{color:var(--gold-2)}
@media (max-width:420px){.nav{gap:12px}.nav .btn{padding:8px 12px;letter-spacing:.14em;white-space:nowrap}}

/* Bühne im Scheinwerferlicht (Startseite) */
.stage-hero{border-bottom:1px solid var(--line)}
.stage{position:relative;width:100%;height:min(76vh,700px);min-height:440px;overflow:hidden;background:#0F0D12;touch-action:pan-y;user-select:none;-webkit-user-select:none}
@media (max-width:640px){.stage{height:auto;aspect-ratio:3/4;min-height:0;max-height:82vh}}
.stage .backdrop{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 22px,rgba(0,0,0,.12) 22px 46px),radial-gradient(120% 80% at 50% 0%,#1D1922 0%,#0F0D12 60%)}
.stage .floor{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,#221C16 0%,#1A1612 30%,#0B0908 100%);border-top:1px solid #2A231C}
.stage .floor::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7%,rgba(0,0,0,.25) 7% 7.2%)}
.stage .item{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text);text-decoration:none;padding:8px;opacity:var(--o,1);transition:transform .5s cubic-bezier(.2,.8,.2,1);min-width:44px;min-height:44px}
.stage .item .s{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-2);white-space:nowrap}
.stage .item .t{font-weight:300;font-size:clamp(1.1rem,2.4vw,2.05rem);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.stage .item.on,.stage .item:focus-visible{transform:translate(-50%,-100%) scale(1.08)}
.stage .item:hover{color:var(--text)}
.stage .dark{position:absolute;inset:0;pointer-events:none;opacity:0}
.stage.live .dark{opacity:1;background:radial-gradient(ellipse var(--rx,300px) var(--ry,280px) at var(--x,50%) var(--y,60%),rgba(0,0,0,0) 0%,rgba(0,0,0,0) 35%,rgba(4,3,5,var(--dim,.9)) 100%)}
.stage .light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.stage .claim{position:absolute;left:50%;top:20%;transform:translateX(-50%);margin:0;font-weight:300;font-style:italic;font-size:clamp(2.2rem,6vw,4.6rem);letter-spacing:.04em;color:var(--text);opacity:var(--co,1);pointer-events:none;white-space:nowrap}
.stage .rig{position:absolute;left:50%;top:-6px;width:44px;height:26px;transform:translateX(-50%);background:linear-gradient(#3A332B,#17130F);border-radius:0 0 10px 10px;border:1px solid #4A4036}
.stage .tip{position:absolute;right:16px;bottom:12px;margin:0;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);pointer-events:none;transition:opacity .4s}
.stage-text{text-align:center;padding-block:56px 72px}
.stage-text .logo{width:min(200px,50vw);height:auto;display:block;margin:0 auto 32px}
.stage-text h1{font-size:clamp(1.8rem,4.6vw,3.1rem);max-width:20ch;margin:0 auto}
.stage-text p.lead{max-width:58ch;margin:20px auto 0;color:var(--muted);font-size:1.05rem}
.stage-text .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
@media (prefers-reduced-motion:reduce){.stage .item{transition:none}}

/* Model-Bewerbung mit Sofortbildkamera */
.model-apply .ma-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:48px;align-items:center}
@media (max-width:860px){.model-apply .ma-grid{grid-template-columns:minmax(0,1fr)}}
.ma-text p{color:var(--muted);margin-top:12px;max-width:52ch}
.ma-text .ma-mail{font-size:.9rem}
.ma-cam{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.pol-cam{position:relative;width:340px;max-width:100%;height:540px}
.pol-cam canvas{position:absolute;left:0;top:0;width:100%;height:300px;display:block;z-index:3;cursor:pointer}
.pol-shadow{position:absolute;left:50%;top:262px;width:70%;height:30px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.65),rgba(0,0,0,0) 70%);z-index:1;pointer-events:none}
.pol-nogl{position:absolute;left:0;right:0;top:110px;text-align:center;color:var(--muted);font-size:.85rem;padding:0 16px}
.pol-clip{position:absolute;left:50%;top:240px;width:236px;height:290px;transform:translateX(-50%);overflow:hidden;z-index:2;pointer-events:none}
.pol-photo{position:absolute;left:18px;top:0;width:200px;transform:translateY(-102%);background:#F4F1EA;padding:12px 12px 40px;box-shadow:0 10px 24px rgba(0,0,0,.5);transition:transform 2.2s cubic-bezier(.35,.6,.3,1)}
.pol-photo.out{transform:translateY(6px) rotate(-1.5deg)}
.pol-img{position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:#222}
.pol-img img,.pol-img canvas{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.8) contrast(.6) brightness(.7);transition:filter 6s ease}
.pol-dev{position:absolute;inset:0;background:linear-gradient(160deg,#2B3328,#3D3A2E 60%,#2A2722);opacity:1;transition:opacity 6s ease;z-index:1}
.pol-photo.developed .pol-dev{opacity:0}
.pol-photo.developed .pol-img img,.pol-photo.developed .pol-img canvas{filter:none}
.pol-cap{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-style:italic;font-weight:300;font-size:.95rem;color:#2B2622;opacity:0;transition:opacity 1s 4s}
.pol-photo.developed .pol-cap{opacity:1}
.pol-ctl{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pol-ctl .btn{min-height:44px;padding:10px 16px;font-size:.72rem;letter-spacing:.16em}
.pol-note{font-size:.8rem;color:var(--muted);text-align:center;margin:0;max-width:36ch}
.pol-flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:50;transition:opacity .45s ease-out}
.pol-flash.on{opacity:.92;transition:none}
.ma-form{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.ma-form .photo span{font-size:.8rem}
.photo.done b,.photo.done span{position:relative;z-index:1;background:rgba(18,18,18,.7);padding:2px 8px}
.snap{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:16px}
.snap-box{display:flex;flex-direction:column;gap:14px;align-items:center;max-width:640px;width:100%}
.snap video{width:100%;max-height:70vh;object-fit:cover;transform:scaleX(-1);background:#000;border:1px solid var(--line)}
.snap-ctl{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media (prefers-reduced-motion:reduce){.pol-photo,.pol-img img,.pol-img canvas,.pol-dev{transition:none}}

/* Kontaktformular */
.contact-form{margin-top:36px;max-width:760px;gap:18px}

/* Landingpage: Bühne füllt den Bildschirm, Bereiche als eigene Seiten */
.stage-hero .stage{height:calc(100vh - 65px);height:calc(100svh - 65px);min-height:460px;max-height:none}
@media (max-width:640px){.stage-hero .stage{aspect-ratio:auto;height:calc(100svh - 65px);max-height:none}}
.stage .claim-sub{position:absolute;left:50%;top:calc(20% + clamp(3rem,7vw,5.6rem));transform:translateX(-50%);margin:0;font-size:.72rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);white-space:nowrap;opacity:var(--co,1);pointer-events:none}
.viewbar{padding-top:22px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--gold);text-decoration:none;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
.back:hover{color:var(--gold-2)}
.stage-text.intro{padding-block:28px 40px}
.view section.block:first-of-type{border-top:0}

/* Galerie als freie Bühnenplätze: Licht geht nacheinander an, Markierung am Boden, Einladung zur Bewerbung */
.gallery .spot{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#0C0B0D;color:var(--text);text-decoration:none;min-width:0;border:1px solid var(--line)}
.gallery .spot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.25;transform:scale(1.02);transition:opacity 1.4s ease var(--d,0s),transform .8s ease}
.gallery .spot.in img{opacity:1;transform:none}
.gallery .spot:hover img{transform:scale(1.05);filter:brightness(1.25)}
.gallery .spot .mark{position:absolute;left:50%;bottom:26%;width:52%;transform:translateX(-50%);opacity:0;transition:opacity .9s ease calc(var(--d,0s) + .7s)}
.gallery .spot.in .mark{opacity:1}
.gallery .spot .cat{position:absolute;left:16px;right:16px;bottom:46px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase}
.gallery .spot .free,.gallery .spot .go{position:absolute;left:16px;right:16px;bottom:18px;font-size:.88rem;font-style:italic;color:var(--gold-2);transition:opacity .35s ease}
.gallery .spot .go{opacity:0;font-style:normal;letter-spacing:.06em}
.gallery .spot:hover .free,.gallery .spot:focus-visible .free{opacity:0}
.gallery .spot:hover .go,.gallery .spot:focus-visible .go{opacity:1}
@media (prefers-reduced-motion:reduce){.gallery .spot img,.gallery .spot .mark{transition:none}}
@media (max-width:560px){.gallery .spot .mark{bottom:36%;width:60%}.gallery .spot .cat{bottom:42px;letter-spacing:.22em}}

/* Hinweis im freien Platz unter der Kamera, verschwindet wenn das Foto herauskommt */
.pol-hint{position:absolute;left:50%;top:330px;transform:translateX(-50%);width:260px;margin:0;text-align:center;font-size:.85rem;line-height:1.9;color:var(--muted);z-index:1;transition:opacity .4s}
.pol-hint .n{display:inline-grid;place-items:center;width:1.5em;height:1.5em;margin-right:.4em;border:1px solid var(--gold,#c9a35c);border-radius:50%;font-size:.75rem;color:var(--gold,#c9a35c)}
.pol-hint .arr{display:block;margin-top:.6rem;font-size:1.3rem;color:var(--gold,#c9a35c);animation:polArr 1.6s ease-in-out infinite}
@keyframes polArr{50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.pol-hint .arr{animation:none}}
.pol-hint.off{opacity:0}