@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url("fonts/poppins-light.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/poppins-regular.woff") format("woff")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/poppins-medium.woff") format("woff")}
:root{
  /* ELNA: Schwarz, Weiss, Orange. Ein dunkler Grund wie das Leuchtlogo, Weiss fuer Text, Orange als einziger Akzent. */
  --black:#0D0D0C;
  --panel:#161615;
  --line:#2A2926;
  --white:#F6F3EE;
  --mute:#A6A199;
  --orange:#D98A47;
  --display:"Poppins","Avenir Next","Segoe UI",sans-serif;
  --body:"Poppins","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--black);color:var(--white);font:300 16px/1.7 var(--body)}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:.04em;text-wrap:balance;margin:0}
p{margin:0}
.eyebrow{font:500 12px/1.4 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--orange)}
.mute{color:var(--mute)}
.small{font-size:14px}
.ph{color:var(--orange)}

/* Navigation */
nav.top{position:sticky;top:0;z-index:20;background:#0E0E0C;border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;gap:24px;height:76px}
nav.top .logo img{height:56px;width:auto}
nav.top .links{display:flex;gap:26px;margin-left:auto;font:400 14px var(--display);letter-spacing:.12em;text-transform:uppercase}
nav.top .links a{text-decoration:none;color:var(--mute);padding:6px 0;border-bottom:1px solid transparent}
nav.top .links a:hover{color:var(--white)}
nav.top .links a[aria-current="page"]{color:var(--white);border-bottom-color:var(--orange)}
.lang{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.lang button{background:none;border:0;color:var(--mute);font:500 12px var(--display);letter-spacing:.14em;padding:7px 10px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--orange);color:var(--black)}
.menu{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--white);font-size:18px;width:40px;height:36px;cursor:pointer}
@media (max-width:900px){
  .menu{display:block}
  nav.top .links{display:none;position:absolute;top:76px;left:0;right:0;background:#0E0E0C;flex-direction:column;gap:0;padding:8px clamp(16px,4vw,40px) 16px;border-bottom:1px solid var(--line)}
  nav.top .links.open{display:flex}
  nav.top .links a{padding:12px 0;border-bottom:1px solid var(--line)}
  nav.top .logo img{height:44px}
}

/* Einstieg */
.hero{position:relative;min-height:min(84vh,800px);display:flex;align-items:flex-end;overflow:hidden}
.hero.small{min-height:min(62vh,600px)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,12,.05) 35%,rgba(13,13,12,.94))}
.hero .wrap{position:relative;z-index:1;padding-bottom:60px;width:100%}
.hero h1{font-size:clamp(38px,6vw,76px);line-height:1.04;max-width:15ch;margin:14px 0 18px}
.hero p{max-width:54ch;color:#E2DDD4;font-size:19px}
.hero .cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero .back{display:inline-block;margin-bottom:18px;color:var(--mute);text-decoration:none;font:400 14px var(--display);letter-spacing:.1em}
.hero .back:hover{color:var(--white)}
.tag{position:absolute;right:16px;bottom:14px;z-index:1;font-size:12px;color:var(--mute)}
.btn{display:inline-block;padding:13px 22px;border:1px solid var(--orange);font:500 13px var(--display);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--white)}
.btn.fill{background:var(--orange);color:var(--black)}
.btn:hover{filter:brightness(1.08)}

.pagehead{padding:96px 0 40px}
.pagehead h1{font-size:clamp(36px,5vw,64px);line-height:1.05;margin:14px 0 20px}
.intro{font-size:20px;line-height:1.55;max-width:62ch;color:#E2DDD4}

/* Abschnitte */
section{padding:80px 0;border-top:1px solid var(--line)}
.pagehead+section{border-top:0;padding-top:20px}
.lead{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:end;margin-bottom:40px}
.lead h2{font-size:clamp(30px,4vw,50px);line-height:1.08;margin-top:12px}
.lead p{color:var(--mute);max-width:60ch}
h2.sub{font-size:26px;margin-bottom:24px}
@media (max-width:860px){.lead{grid-template-columns:1fr;gap:16px}}

/* Projektkarten */
.projects{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.proj{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);transition:border-color .2s}
.proj:hover{border-color:var(--orange)}
.proj .img{overflow:hidden;aspect-ratio:16/10}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.proj:hover img{transform:scale(1.03)}
.proj .txt{padding:24px 24px 26px;display:grid;gap:10px}
.proj h3{font-size:32px}
.proj p{color:var(--mute)}
.proj .more{font:500 13px var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-top:6px}
@media (max-width:760px){.projects{grid-template-columns:1fr}}

/* Kennzahlen */
.figures{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px}
.figures div{padding:18px 16px;border-right:1px solid var(--line)}
.figures div:last-child{border-right:0}
.figures b{display:block;font:300 30px/1.15 var(--display);font-variant-numeric:tabular-nums;color:var(--white)}
.figures span{font-size:13px;color:var(--mute)}
@media (max-width:860px){.figures{grid-template-columns:repeat(3,1fr)}.figures div:nth-child(3){border-right:0}.figures div:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:440px){.figures{grid-template-columns:repeat(2,1fr)}.figures div{border-right:0;border-bottom:1px solid var(--line)}}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.gallery button{all:unset;cursor:zoom-in;position:relative;overflow:hidden;grid-column:span 4;aspect-ratio:16/9;background:var(--panel)}
.gallery button.wide{grid-column:span 8;grid-row:span 2;aspect-ratio:auto}
.gallery button.half{grid-column:span 6}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery button:hover img{transform:scale(1.03)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;font-size:13px;background:linear-gradient(transparent,rgba(13,13,12,.88))}
.gallery button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery button,.gallery button.half{grid-column:span 1}.gallery button.wide{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}}

/* Film + Plan */
.media,.plans{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line)}
.card video{width:100%;aspect-ratio:16/9;background:#000}
.card .cap{padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card .cap h3{font-size:18px;letter-spacing:.06em}
.card .cap span{font-size:13px}
.plan{margin:0;background:#fff;border:1px solid var(--line)}
.plan img{width:100%;height:auto;cursor:zoom-in;padding:12px}
.plan figcaption{background:var(--panel);color:var(--mute);font-size:13px;padding:10px 12px}
.plans+p{margin-top:14px}
@media (max-width:860px){.media,.plans{grid-template-columns:1fr}}

.next{padding:0}
.next a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:44px 0;text-decoration:none}
.next .nn{font:300 clamp(28px,4vw,46px) var(--display);letter-spacing:.04em}
.next a:hover .nn{color:var(--orange)}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.services div{padding:26px 22px 26px 0;border-right:1px solid var(--line)}
.services div+div{padding-left:22px}
.services div:last-child{border-right:0}
.services h3{font-size:21px;margin:10px 0}
.services p{color:var(--mute);font-size:15px}
.services .n{font:400 13px var(--display);color:var(--orange);letter-spacing:.2em}
@media (max-width:860px){.services{grid-template-columns:1fr 1fr}.services div{border-right:0;padding:22px 0!important;border-bottom:1px solid var(--line)}}
@media (max-width:440px){.services{grid-template-columns:1fr}}
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s}
.process li{counter-increment:s;border-top:2px solid var(--orange);padding-top:18px}
.process li::before{content:counter(s,decimal-leading-zero);font:300 34px var(--display);color:var(--orange);display:block;margin-bottom:8px}
.process h3{font-size:20px;margin-bottom:8px}
.process p{color:var(--mute);font-size:15px}
@media (max-width:860px){.process{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.process{grid-template-columns:1fr}}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:640px){.strip{grid-template-columns:1fr}}

.brand{background:#0E0E0C;border-top:1px solid var(--line)}
.brand img{width:100%;max-width:1400px;margin:0 auto;height:auto}
.cta-band{text-align:center}
.cta-band .wrap{display:grid;justify-items:center;gap:16px}
.cta-band h2{font-size:clamp(30px,4vw,48px)}
.cta-band p{color:var(--mute);max-width:56ch}

/* Kontakt + Recht */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:start}
.box{background:var(--panel);border:1px solid var(--line);padding:28px;margin:0}
.box dt{color:var(--mute);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:18px}
.box dt:first-child{margin-top:0}
.box dd{margin:4px 0 0;font-size:18px}
.ctimg img{width:100%;aspect-ratio:16/10;object-fit:cover}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.legaltext{display:grid;gap:14px;max-width:70ch}
.legaltext h2{font-size:30px;margin-top:40px}

/* Fusszeile */
footer{border-top:1px solid var(--line);padding:36px 0 52px;color:var(--mute);font-size:14px;background:#0E0E0C}
footer .row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer .flogo{height:46px;width:auto}
footer .legal{display:flex;gap:22px;flex-wrap:wrap}
footer .legal a{color:var(--white);text-underline-offset:3px}
footer .fine{margin-top:20px;display:grid;gap:6px;max-width:82ch}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(8,8,7,.96);display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb img{max-height:84vh;width:auto;max-width:100%;background:#fff}
.lb .t{position:absolute;left:24px;bottom:18px;color:var(--mute);font-size:14px}
.lb button{position:absolute;background:none;border:1px solid var(--line);color:var(--white);width:46px;height:46px;font-size:20px;cursor:pointer}
.lb .x{top:18px;right:18px}.lb .p{left:18px;top:50%}.lb .n{right:18px;top:50%}