/* =================================================================
   filmfirma.net - "Schwarzfilm"
   Cineastisches Schwarz/Violett-Theme. Multi-Page.
   Display: Big Shoulders Display · Body: Manrope (beide lokal)
   ================================================================= */

/* ---------- Fonts (lokal, kein externer Server) ---------- */
@font-face{font-family:"Big Shoulders";src:url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Big Shoulders";src:url("../fonts/big-shoulders-display-latin-ext-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Big Shoulders";src:url("../fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Big Shoulders";src:url("../fonts/big-shoulders-display-latin-ext-900-normal.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-ext-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1E9F,U+1EF2-1EFF,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}

/* ---------- Tokens ---------- */
:root{
  --void:      oklch(0.145 0.008 300);
  --pitch:     oklch(0.195 0.010 300);
  --pitch-2:   oklch(0.245 0.011 300);
  --edge:      oklch(0.32 0.012 300);
  --bone:      oklch(0.945 0.010 300);
  --ash:       oklch(0.705 0.014 300);
  --ash-dim:   oklch(0.545 0.014 300);
  --beam:      oklch(0.665 0.175 300);
  --beam-deep: oklch(0.560 0.180 300);
  --beam-soft: oklch(0.665 0.175 300 / .16);
  --sp-2:4px;  --sp-3:8px;  --sp-4:12px; --sp-5:16px;
  --sp-6:24px; --sp-7:32px; --sp-8:48px; --sp-9:64px; --sp-10:96px;
  --wrap:1240px;
  --display:"Big Shoulders","Arial Narrow",sans-serif;
  --body:"Manrope",system-ui,-apple-system,sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-sharp: cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--beam);color:var(--void)}

/* Filmkorn */
body::after{
  content:"";position:fixed;inset:-50%;pointer-events:none;z-index:2;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,1%)}
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-6)}

/* ---------- Typo ---------- */
h1,h2,h3,.display{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  line-height:.92;letter-spacing:.005em;margin:0 0 var(--sp-5);
}
h1{font-size:clamp(3.2rem,9vw,7.5rem)}
h2{font-size:clamp(2.4rem,5.5vw,4.4rem)}
h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;line-height:1}
p{margin:0 0 var(--sp-5);max-width:68ch}
.lead{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--ash);max-width:60ch;line-height:1.65}

.slate{
  display:flex;align-items:center;gap:var(--sp-4);
  font-family:var(--body);font-size:.72rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--beam);
  margin-bottom:var(--sp-6);
}
.slate::after{content:"";height:1px;flex:1;max-width:120px;background:var(--edge)}
.tc{font-variant-numeric:tabular-nums;color:var(--ash-dim);letter-spacing:.12em}

/* ---------- Header ---------- */
.top{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-5) var(--sp-6);
  mix-blend-mode:difference;
}
.top.bare{justify-content:flex-end}
.top .logo{height:26px;width:auto}
.burger{
  --b:2px;
  position:relative;width:48px;height:34px;background:none;border:0;cursor:pointer;
  display:grid;align-content:center;gap:7px;padding:0;
}
.burger i{
  display:block;height:var(--b);width:100%;background:var(--bone);
  transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s;
}
.burger i:nth-child(2){width:64%;margin-left:auto}
.burger:hover i:nth-child(2){width:100%}
body.nav-open .burger i:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.nav-open .burger i:nth-child(2){opacity:0;width:0}
body.nav-open .burger i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* ---------- Menü: Shutter-Blades ---------- */
.shutter{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;grid-template-rows:repeat(5,1fr)}
.shutter b{
  display:block;background:var(--pitch);transform:scaleX(0);will-change:transform;
  transition:transform .62s var(--ease-sharp);
  margin:-0.5px 0;
  box-shadow:0 0 0 1px var(--pitch);
}
.shutter b:nth-child(odd){transform-origin:left}
.shutter b:nth-child(even){transform-origin:right}
body.nav-open .shutter b{transform:scaleX(1)}
body.nav-open .shutter b:nth-child(1){transition-delay:0s}
body.nav-open .shutter b:nth-child(2){transition-delay:.06s}
body.nav-open .shutter b:nth-child(3){transition-delay:.12s}
body.nav-open .shutter b:nth-child(4){transition-delay:.18s}
body.nav-open .shutter b:nth-child(5){transition-delay:.24s}
body:not(.nav-open) .shutter b:nth-child(1){transition-delay:.24s}
body:not(.nav-open) .shutter b:nth-child(2){transition-delay:.18s}
body:not(.nav-open) .shutter b:nth-child(3){transition-delay:.12s}
body:not(.nav-open) .shutter b:nth-child(4){transition-delay:.06s}
body:not(.nav-open) .shutter b:nth-child(5){transition-delay:0s}

.menu{
  position:fixed;inset:0;z-index:55;display:flex;align-items:center;
  padding:0 var(--sp-6);visibility:hidden;
}
body.nav-open .menu{visibility:visible}
.menu ol{list-style:none;margin:0 auto;padding:0;width:100%;max-width:var(--wrap)}
.menu li{overflow:hidden;border-top:1px solid var(--edge)}
.menu li:last-child{border-bottom:1px solid var(--edge)}
.menu a{
  display:flex;align-items:baseline;gap:var(--sp-6);
  padding:clamp(10px,1.6vh,20px) 0;
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,5.2rem);line-height:1;color:var(--bone);
  transform:translateY(115%);transition:transform .7s var(--ease),color .25s;
}
body.nav-open .menu a{transform:translateY(0)}
body.nav-open .menu li:nth-child(1) a{transition-delay:.30s}
body.nav-open .menu li:nth-child(2) a{transition-delay:.36s}
body.nav-open .menu li:nth-child(3) a{transition-delay:.42s}
body.nav-open .menu li:nth-child(4) a{transition-delay:.48s}
body.nav-open .menu li:nth-child(5) a{transition-delay:.54s}
.menu a:hover,.menu a:focus-visible{color:var(--beam);outline:0}
.menu a .idx{
  font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.2em;
  color:var(--ash-dim);flex:0 0 auto;
}
.menu a:hover .idx{color:var(--beam)}
.menu a[aria-current]{color:var(--beam)}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;background:var(--beam);color:var(--void);
  font-family:var(--body);font-weight:800;font-size:.86rem;
  letter-spacing:.14em;text-transform:uppercase;border:0;cursor:pointer;
  overflow:hidden;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--bone);z-index:-1;
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn.hollow{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.hollow::before{background:var(--beam)}
.btn.hollow:hover{color:var(--void)}

/* ---------- Hero (bildschirmhoch, Collage als Cover) ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;padding:clamp(110px,16vh,170px) 0 clamp(56px,9vh,100px);
}
.hero .plate{position:absolute;inset:0;z-index:0}
.hero .plate img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(.2) contrast(1.06) brightness(.72) saturate(.95);
  transform:scale(1.06);animation:platePush 2.4s var(--ease) .1s both;
}
@keyframes platePush{from{transform:scale(1.14);filter:grayscale(.8) contrast(1.25) brightness(.42)}}
.hero .plate::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, oklch(0.145 0.008 300 / .9) 0%, oklch(0.145 0.008 300 / .55) 45%, oklch(0.145 0.008 300 / .28) 100%),
    linear-gradient(to top, var(--void) 3%, oklch(0.145 0.008 300 / 0) 46%),
    linear-gradient(to bottom, oklch(0.145 0.008 300 / .72) 0%, oklch(0.145 0.008 300 / 0) 22%);
}
.hero .inner{position:relative;z-index:1;width:100%}

.hero .bigmark{
  width:min(880px,88vw);height:auto;margin:0 0 clamp(24px,3.5vh,44px);
  filter:drop-shadow(0 10px 40px oklch(0.145 0.008 300 / .85));
  animation:focusPull 1.5s var(--ease) .2s both;
}
@keyframes focusPull{
  0%  {opacity:0;filter:blur(26px) drop-shadow(0 10px 40px oklch(0.145 0.008 300 / .85));transform:scale(1.05)}
  55% {opacity:1}
  100%{opacity:1;filter:blur(0) drop-shadow(0 10px 40px oklch(0.145 0.008 300 / .85));transform:scale(1)}
}

.reveal{overflow:hidden;display:block}
.reveal > *{display:block;transform:translateY(110%);animation:liftIn .95s var(--ease) both}
.hero h1{
  font-size:clamp(2.7rem,7.4vw,6.1rem);
  margin-bottom:var(--sp-6);max-width:17ch;
  text-shadow:0 4px 30px oklch(0.145 0.008 300 / .7);
}
.hero h1 .y{color:var(--beam)}
.hero h1 .reveal:nth-of-type(1) > *{animation-delay:.85s}
.hero h1 .reveal:nth-of-type(2) > *{animation-delay:.95s}
@keyframes liftIn{to{transform:translateY(0)}}

.hero .sub{display:flex;gap:var(--sp-7);flex-wrap:wrap;align-items:flex-end;
  animation:fadeUp .9s var(--ease) 1.2s both}
.hero .lead{color:var(--bone);text-shadow:0 2px 20px oklch(0.145 0.008 300 / .9)}
.hero .cta{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-6)}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}}

.hero .bars b{
  position:absolute;left:0;right:0;height:13vh;background:var(--void);z-index:2;pointer-events:none;
  animation:barOut 1.1s var(--ease) .15s both;
}
.hero .bars b:first-child{top:0;transform-origin:top}
.hero .bars b:last-child{bottom:0;transform-origin:bottom}
@keyframes barOut{from{transform:scaleY(1)}to{transform:scaleY(0)}}

/* ---------- Kamera-Sucher ---------- */
.viewfinder{
  position:absolute;
  top:clamp(88px,12vh,124px);right:clamp(44px,6vw,96px);
  bottom:clamp(44px,7vh,84px);left:clamp(44px,6vw,96px);
  z-index:3;pointer-events:none;
  animation:fadeUp .8s var(--ease) 1.4s both;
}
.vf-corner{position:absolute;width:clamp(30px,3.4vw,46px);height:clamp(30px,3.4vw,46px)}
.vf-corner::before,.vf-corner::after{content:"";position:absolute;background:var(--bone);opacity:.95}
.vf-corner::before{width:100%;height:6px}
.vf-corner::after{width:6px;height:100%}
.vf-corner.tl{top:0;left:0}
.vf-corner.tr{top:0;right:0}
.vf-corner.tr::after{right:0}.vf-corner.tr::before{right:0}
.vf-corner.bl{bottom:0;left:0}
.vf-corner.bl::before{bottom:0}
.vf-corner.br{bottom:0;right:0}
.vf-corner.br::before{bottom:0;right:0}.vf-corner.br::after{right:0}
.vf-cross{position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%);opacity:.5}
.vf-cross::before,.vf-cross::after{content:"";position:absolute;background:var(--bone)}
.vf-cross::before{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.vf-cross::after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}
.vf-rec{
  position:absolute;top:18px;right:calc(clamp(30px,3.4vw,46px) + 22px);
  display:flex;align-items:center;gap:12px;
  font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,2.6vw,2.1rem);
  letter-spacing:.14em;color:var(--bone);text-shadow:0 2px 14px oklch(0.145 0.008 300 / .8);
}
.vf-rec::before{
  content:"";width:clamp(14px,1.6vw,20px);height:clamp(14px,1.6vw,20px);border-radius:50%;
  background:#e5352b;box-shadow:0 0 16px #e5352b;animation:blink 1.4s steps(2) infinite;
}
@keyframes blink{50%{opacity:.2}}

/* ---------- Kundenlogo-Wand ---------- */
.wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:1px;background:var(--edge);border:1px solid var(--edge);margin-top:var(--sp-7);
}
.wall figure{
  margin:0;background:var(--void);display:grid;place-items:center;
  padding:var(--sp-6) var(--sp-5);min-height:112px;transition:background .35s var(--ease);
}
.wall figure:hover{background:var(--pitch)}
.wall img{
  max-height:44px;width:auto;max-width:100%;opacity:.55;
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.wall figure.tall img{max-height:78px}
.wall figure.xl img{max-height:104px}
.wall figure:hover img{opacity:1;transform:scale(1.05)}

/* ---------- Sections ---------- */
section{padding:clamp(72px,11vh,132px) 0;position:relative}
.rule{height:1px;background:var(--edge);border:0;margin:0}

.split{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--sp-9);align-items:start}
.pillars{display:grid;gap:var(--sp-6)}
.pillar{border-top:1px solid var(--edge);padding-top:var(--sp-5)}
.pillar h3{color:var(--beam);margin-bottom:var(--sp-3)}
.pillar p{color:var(--ash);font-size:.97rem;margin:0}

.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);margin-top:var(--sp-8)}
.fig .n{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;color:var(--bone)}
.fig .l{font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim);margin-top:var(--sp-3)}

/* ---------- Seiten-Header ---------- */
.phead{padding:clamp(120px,18vh,190px) 0 clamp(40px,6vh,70px);border-bottom:1px solid var(--edge);position:relative}
.phead h1{font-size:clamp(2.8rem,7.5vw,6rem);margin-bottom:var(--sp-5)}
.phead .lead{margin:0}

/* ---------- Referenz-Kacheln ---------- */
.reels{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:22px;background:transparent;border:0}
.reel{background:var(--void);position:relative;display:flex;flex-direction:column;border:1px solid var(--edge)}
.reel .frame{
  position:relative;aspect-ratio:16/9;width:100%;border:0;padding:0;cursor:pointer;
  background:var(--pitch);overflow:hidden;display:block;
}
.reel .frame img{
  width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2) brightness(.72);
  transition:filter .5s var(--ease),transform .8s var(--ease);
}
.reel .frame:hover img{filter:grayscale(0) contrast(1.05) brightness(.95);transform:scale(1.04)}
.reel .frame::after{
  content:"";position:absolute;left:var(--sp-5);bottom:var(--sp-5);
  width:44px;height:44px;background:var(--beam);
  clip-path:polygon(0 0,100% 50%,0 100%);
  transform:translateY(6px);opacity:0;transition:.4s var(--ease);
}
.reel .frame:hover::after{transform:translateY(0);opacity:1}
.reel .frame.empty{cursor:default;display:grid;place-items:center}
.reel .frame.empty::before{
  content:"KEIN CLIP HINTERLEGT";font-size:.66rem;font-weight:800;letter-spacing:.2em;
  color:var(--ash-dim);font-family:var(--body);
}
.reel .frame.empty::after{display:none}
.reel .cap{padding:var(--sp-5);display:flex;gap:var(--sp-4);align-items:baseline}
.reel .cap .no{font-size:.68rem;font-weight:800;letter-spacing:.16em;color:var(--beam);flex:0 0 auto}
.reel .cap strong{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.3rem;line-height:1;display:block}
.reel .cap span{display:block;font-size:.85rem;color:var(--ash-dim);margin-top:4px}

.chips{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-7)}
.chip{
  padding:9px 18px;border:1px solid var(--edge);background:transparent;color:var(--ash);
  font-family:var(--body);font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:.25s var(--ease);
}
.chip:hover{border-color:var(--ash-dim);color:var(--bone)}
.chip[aria-pressed="true"]{background:var(--beam);border-color:var(--beam);color:var(--void)}

.clients{margin-top:64px;padding-top:36px;border-top:1px solid var(--edge)}

/* ---------- Leistungen ---------- */
.modules{border-top:1px solid var(--edge)}
.module{
  display:grid;grid-template-columns:90px 1fr 1.4fr;gap:var(--sp-6);
  padding:var(--sp-7) 0;border-bottom:1px solid var(--edge);align-items:start;
  transition:background .4s var(--ease);
}
.module:hover{background:var(--pitch)}
.module .no{font-family:var(--display);font-weight:900;font-size:2rem;color:var(--beam);line-height:1}
.module h3{margin:0}
.module ul{margin:0;padding:0;list-style:none;color:var(--ash);font-size:.96rem;columns:2;column-gap:var(--sp-7)}
.module ul li{padding-left:18px;position:relative;margin-bottom:6px;break-inside:avoid}
.module ul li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--beam)}
.module p{color:var(--ash);font-size:.96rem;margin:0}

/* ---------- Preise ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)}
.plan{background:var(--void);padding:var(--sp-7) var(--sp-6);display:flex;flex-direction:column;transition:background .4s var(--ease)}
.plan:hover{background:var(--pitch)}
.plan.lead-plan{background:var(--pitch)}
.plan.lead-plan:hover{background:var(--pitch-2)}
.plan .tag{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:var(--sp-5)}
.plan.lead-plan .tag{color:var(--beam)}
.plan h3{margin-bottom:var(--sp-3)}
.plan .len{font-size:.85rem;color:var(--ash-dim);margin-bottom:var(--sp-6)}
.plan .amount{
  font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,4.4vw,3.6rem);
  line-height:.9;color:var(--beam);
}
.plan .vat{font-size:.72rem;color:var(--ash-dim);letter-spacing:.1em;text-transform:uppercase;margin-top:var(--sp-3)}
.plan ul{list-style:none;margin:var(--sp-6) 0 0;padding:0;font-size:.92rem;color:var(--ash)}
.plan li{padding-left:20px;position:relative;margin-bottom:9px}
.plan li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--ash-dim)}
.plan li.key{color:var(--bone);font-weight:700}
.plan li.key::before{background:var(--beam);height:2px;top:.65em}
.plan .go{margin-top:auto;padding-top:var(--sp-7)}
.finePrint{margin-top:32px;font-size:.9rem;color:var(--ash-dim)}

/* ---------- Ablauf ---------- */
.steps{margin-top:var(--sp-8);border-top:1px solid var(--edge)}
.step{display:grid;grid-template-columns:120px 1fr;gap:var(--sp-6);padding:var(--sp-7) 0;border-bottom:1px solid var(--edge)}
.step .n{font-family:var(--display);font-weight:900;font-size:3rem;line-height:.8;color:var(--edge);transition:color .4s}
.step:hover .n{color:var(--beam)}
.step p{color:var(--ash);margin:0;font-size:.98rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--edge);max-width:900px}
details{border-bottom:1px solid var(--edge)}
summary{
  list-style:none;cursor:pointer;padding:var(--sp-6) 0;display:flex;gap:var(--sp-5);
  align-items:center;justify-content:space-between;
  font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.35rem;line-height:1.05;
  transition:color .25s;
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--beam)}
summary .pl{position:relative;width:16px;height:16px;flex:0 0 auto}
summary .pl::before,summary .pl::after{content:"";position:absolute;background:var(--beam);transition:transform .4s var(--ease)}
summary .pl::before{inset:7px 0;height:2px}
summary .pl::after{inset:0 7px;width:2px}
details[open] summary .pl::after{transform:rotate(90deg) scaleX(0)}
details p{color:var(--ash);font-size:.97rem;padding-bottom:var(--sp-6);margin:0;max-width:70ch}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-9);align-items:start}
form{display:grid;gap:var(--sp-5)}
.field{display:grid;gap:6px}
label{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-dim)}
input,textarea{
  background:transparent;border:0;border-bottom:1px solid var(--edge);
  padding:12px 0;color:var(--bone);font:inherit;font-size:1.02rem;
  transition:border-color .3s;
}
input:focus,textarea:focus{outline:0;border-color:var(--beam)}
textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0;height:0}
.formnote{font-size:.8rem;color:var(--ash-dim);max-width:52ch}
#status{font-size:.9rem;font-weight:700;min-height:1.4em}
.coords{border-top:1px solid var(--edge)}
.coords div{padding:var(--sp-6) 0;border-bottom:1px solid var(--edge)}
.coords .k{font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin-bottom:6px}
.coords .v{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.7rem;line-height:1}
.coords .v a:hover{color:var(--beam)}

/* ---------- CTA-Band ---------- */
.band{background:var(--beam);color:var(--void);padding:clamp(56px,9vh,96px) 0}
.band h2{color:var(--void);margin-bottom:var(--sp-6)}
.band p{color:oklch(0.24 0.06 300);max-width:56ch}
.band .btn{background:var(--void);color:var(--beam)}
.band .btn::before{background:oklch(0.30 0.03 300)}

/* ---------- Legal ---------- */
.legal{max-width:78ch;color:var(--ash)}
.legal h2{margin-top:var(--sp-9)}
.legal h3{font-family:var(--body);font-weight:800;text-transform:none;font-size:1.05rem;color:var(--bone);letter-spacing:0;margin:var(--sp-7) 0 var(--sp-3);line-height:1.4}
.legal a{color:var(--beam);text-decoration:underline;text-underline-offset:3px}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--edge);padding:var(--sp-7) 0}
.fbar{display:flex;align-items:center;gap:var(--sp-7);flex-wrap:wrap}
.fmark{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.fmark img{height:46px;width:auto;opacity:.9;transition:opacity .3s var(--ease)}
.fmark:hover img{opacity:1}
footer nav{
  display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;margin:0 auto;
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
footer nav a{color:var(--ash-dim);transition:color .25s var(--ease)}
footer nav a:hover{color:var(--beam)}
footer nav .dot{width:3px;height:3px;border-radius:50%;background:var(--edge);flex:0 0 auto}
footer nav .ext::after{content:" \2197";color:var(--beam)}
.copy{font-size:.72rem;color:var(--ash-dim);letter-spacing:.12em;flex:0 0 auto;margin:0}

/* ---------- Sprachumschalter ---------- */
.menu .lang{margin-top:var(--sp-8);display:flex;gap:12px;align-items:center;font-family:var(--body);font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.menu .lang a{color:var(--ash-dim);transition:color .25s var(--ease)}
.menu .lang a:hover{color:var(--beam)}
.menu .lang a.on{color:var(--bone)}
.menu .lang span{color:var(--ash-dim);opacity:.45}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:80;background:oklch(0.10 0.006 300 / .96);display:none;place-items:center;padding:clamp(16px,4vw,56px)}
.lb.on{display:grid}
/* Breite ist das Kleinere aus 92vw und der Breite, die bei 84vh Höhe ein 16:9-Bild ergibt.
   So passt der Player immer komplett in den Bildschirm und bleibt groß. */
.lb .box{position:relative;width:min(92vw, calc(84vh * 16 / 9));aspect-ratio:16/9}
.lb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lb .x{position:absolute;top:-40px;right:0;background:none;border:0;color:var(--bone);cursor:pointer;
  font-family:var(--body);font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.lb .x:hover{color:var(--beam)}

/* ---------- Scroll-Reveal ---------- */
.rise{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .split{grid-template-columns:1fr;gap:var(--sp-8)}
  .contact{grid-template-columns:1fr;gap:var(--sp-8)}
  .figs{grid-template-columns:repeat(2,1fr)}
  .module{grid-template-columns:60px 1fr;gap:var(--sp-5)}
  .module ul{columns:1;grid-column:1/-1}
  .module p{grid-column:1/-1}
  .step{grid-template-columns:70px 1fr}
  footer nav{margin:0}
  .fbar{gap:var(--sp-6)}
}

@media (max-width:640px){
  body{font-size:16px;line-height:1.62}
  .wrap{padding:0 20px}
  .top{padding:var(--sp-4) 20px}
  .burger{width:42px;height:30px;gap:6px}
  .menu{padding:0 20px}
  .menu a{gap:var(--sp-5);padding:12px 0;font-size:clamp(2rem,10vw,2.8rem)}
  .menu a .idx{font-size:.62rem}
  .hero{min-height:auto;padding:96px 0 var(--sp-8);align-items:flex-start}
  .hero .bigmark{width:100%;margin-bottom:var(--sp-6)}
  .viewfinder{top:78px;right:16px;bottom:20px;left:16px}
  .vf-rec{font-size:1.3rem}
  .hero h1{max-width:none;margin-bottom:var(--sp-5)}
  .hero .sub{gap:var(--sp-5)}
  .hero .cta{margin-top:var(--sp-5);gap:10px}
  section{padding:var(--sp-9) 0}
  .phead{padding:120px 0 var(--sp-7)}
  h2{margin-bottom:var(--sp-4)}
  .btn{padding:14px 22px;font-size:.78rem;letter-spacing:.12em}
  .figs{grid-template-columns:repeat(2,1fr);gap:var(--sp-6) var(--sp-5);margin-top:var(--sp-7)}
  .fig .l{font-size:.64rem;letter-spacing:.14em}
  .wall{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .wall figure{min-height:82px;padding:var(--sp-5) var(--sp-4)}
  .wall img{max-height:30px}
  .wall figure.tall img{max-height:52px}
  .wall figure.xl img{max-height:64px}
  .reels{grid-template-columns:1fr}
  .reel .cap{padding:var(--sp-5) var(--sp-4)}
  .chips{gap:6px}
  .chip{padding:8px 13px;font-size:.66rem;letter-spacing:.1em}
  .module{grid-template-columns:44px 1fr;gap:var(--sp-4);padding:var(--sp-6) 0}
  .module .no{font-size:1.5rem}
  .plans{grid-template-columns:1fr}
  .plan{padding:var(--sp-6) var(--sp-5)}
  .step{grid-template-columns:52px 1fr;gap:var(--sp-4);padding:var(--sp-6) 0}
  .step .n{font-size:2.1rem}
  summary{font-size:1.1rem;padding:var(--sp-5) 0}
  .coords .v{font-size:1.25rem;word-break:break-word}
  .coords div{padding:var(--sp-5) 0}
  footer{padding:var(--sp-6) 0}
  .fbar{flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
  footer nav{gap:var(--sp-4);font-size:.7rem}
  footer nav .dot{display:none}
  .lb{padding:16px}
  .lb .x{top:-36px;font-size:.66rem}
}

@media (max-width:400px){
  .wrap{padding:0 16px}
  .figs{grid-template-columns:1fr;gap:var(--sp-5)}
  .wall{grid-template-columns:repeat(2,1fr)}
  .hero .cta{flex-direction:column;align-items:stretch}
  .hero .cta .btn{justify-content:center}
}

@media (hover:none){
  .wall img{opacity:.85}
  .reel .frame img{filter:grayscale(.35) contrast(1.1) brightness(.85)}
  .reel .frame::after{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .rise{opacity:1;transform:none}
  .menu a{transform:none}
  .reveal > *{transform:none}
  .hero .plate img{transform:none}
  body::after{display:none}
}