/* Kino-Design: baut auf fg.css auf und ersetzt Schrift, Navigation und Startseite */
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-style:normal;font-weight:400 500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-style:normal;font-weight:500;font-display:swap}
:root{--bg:#050505;--bg-elev:#101010;--bg-elev-2:#1a1a1a;--label:#f4f1ec;--label-2:rgba(244,241,236,.7);--label-3:rgba(244,241,236,.46);--sep:rgba(244,241,236,.14);--r-xl:16px;--r-l:12px;--r-m:10px;--k-gut:clamp(20px,4.4vw,64px);--k-ease:cubic-bezier(.16,1,.3,1);--k-box:calc((100vh - 100vw/2.39)/2)}
html{background:var(--bg)}
body{font-family:Inter,system-ui,sans-serif;letter-spacing:0;overflow-x:clip}
::selection{background:var(--accent);color:#14100b}
.serif,.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6,.prose blockquote{font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.025em}
.serif i{color:var(--accent)}
.fg-form,.fg-form label,.fg-form input,.fg-form textarea,.fg-form button{font-family:Inter,system-ui,sans-serif}
.mono,.eyebrow{font:500 11px/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--label-2)}
.fg-kino main{padding-bottom:0}

/* Navigation: keine Leiste, ein dunkler Verlauf hält die Schrift auf jedem Bild lesbar */
.nav{top:0;padding:18px var(--k-gut) 52px;background:linear-gradient(180deg,rgba(0,0,0,.84),rgba(0,0,0,.52) 55%,transparent);pointer-events:none}
.nav a{pointer-events:auto}
.nav-in{max-width:none;height:auto;padding:0;border-radius:0;background:none;box-shadow:none}
.nav-links{gap:28px}
.nav-links a{position:relative;padding:6px 0;border-radius:0;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--k-ease)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a.on{background:none;color:#fff}
body.admin-bar .nav{top:32px}

/* Buttons: eckig, in Mono-Schrift */
.btn,.fg-form .wpcf7-submit,.page-head .back,.consent-btn{min-height:46px;padding:0 20px;border-radius:0;border:1px solid transparent;font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;box-shadow:none;transition:background-color .2s,color .2s,border-color .2s}
.btn-sm{min-height:38px;padding:0 14px}
.btn-lg{min-height:52px;padding:0 24px}
.btn-primary,.cta-band .btn,.fg-form .wpcf7-submit{background:#fff;color:#050505;border-color:#fff}
.btn-ghost,.btn-tinted,.page-head .back{background:rgba(5,5,5,.72);color:#fff;border-color:#fff;box-shadow:none}
.page-head .back{min-height:38px;padding:0 14px 0 10px;backdrop-filter:none;-webkit-backdrop-filter:none}
.btn:active,.fg-form .wpcf7-submit:active,.page-head .back:active{transform:scale(.98)}
@media (hover:hover){
  .btn-primary:hover,.cta-band .btn:hover,.fg-form .wpcf7-submit:hover{transform:none;filter:none;box-shadow:none;background:var(--accent);border-color:var(--accent);color:#050505}
  .btn-ghost:hover,.btn-tinted:hover,.page-head .back:hover{transform:none;box-shadow:none;background:#fff;border-color:#fff;color:#050505}
}
.fg-form .wpcf7-list-item label{border-radius:0}
.seg{border-radius:0}
.seg button{border-radius:0;font:500 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase}

/* Start: Breitbild, das sich beim Scrollen zum Vollbild öffnet */
.k-stage{position:relative;height:190vh}
.k-frame{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
.k-bg{position:absolute;top:0;left:0;height:100%;width:118%;max-width:none;object-fit:cover;object-position:50% 55%;transform:scale(calc(1.1 - .1*var(--p,0)));will-change:transform}
.k-frame::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62) 78%),linear-gradient(90deg,rgba(0,0,0,.3),transparent 55%)}
.k-bar{position:absolute;left:0;right:0;height:calc(var(--k-box) + 1px);background:var(--bg);z-index:2;will-change:transform}
.k-bar-t{top:0;transform:translateY(calc(-100%*var(--p,0)))}
.k-bar-b{bottom:0;transform:translateY(calc(100%*var(--p,0)))}
.k-copy,.k-sub{position:absolute;z-index:3;transform:translateY(calc(var(--k-box)*var(--p,0)*.8))}
.k-copy{left:var(--k-gut);right:var(--k-gut);bottom:calc(var(--k-box) + clamp(20px,3.4vw,48px))}
.k-copy h1{font-size:clamp(64px,10.4vw,176px);line-height:.92;margin:0;text-shadow:0 2px 40px rgba(0,0,0,.25)}
.k-copy .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.k-copy b{display:block;font-weight:400;animation:k-rise 1.3s var(--k-ease) both}
.k-copy .ln+.ln b{animation-delay:.14s}
@keyframes k-rise{from{transform:translateY(112%)}to{transform:none}}
@keyframes k-fade{from{opacity:0}to{opacity:1}}
.k-sub{right:var(--k-gut);bottom:calc(var(--k-box) + clamp(26px,3.8vw,56px));width:min(320px,26vw);font-size:15px;color:rgba(255,255,255,.86);animation:k-fade 1s .55s both}
.k-slate{position:absolute;z-index:3;left:var(--k-gut);right:var(--k-gut);bottom:calc(var(--k-box)/2);transform:translateY(50%);display:flex;justify-content:space-between;opacity:calc(1 - var(--p,0)*3)}

/* Haltung */
.k-say{padding:clamp(110px,17vw,240px) var(--k-gut);max-width:1320px;margin:auto}
.k-say p{font-size:clamp(36px,5.1vw,84px);line-height:1.06}
.k-say .w{opacity:.16;transition:opacity .25s}
.k-say .w.on{opacity:1}

/* Arbeiten: Szenen schieben sich beim Scrollen übereinander */
.k-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 var(--k-gut) 34px}
.k-head h2{font-size:clamp(44px,6.4vw,104px);line-height:1}
.k-head p{color:var(--label-2);max-width:42rem;margin-top:18px}
.k-scene{position:sticky;top:0;display:block;height:100vh;height:100svh;overflow:hidden;background:#000;border-top:1px solid #000}
.k-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--k-ease)}
.k-scene:hover>img{transform:scale(1.025)}
.k-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.46) 52%,transparent 84%)}
.k-cap,.card .meta{text-shadow:0 2px 22px rgba(0,0,0,.6)}
.k-cap{position:absolute;z-index:2;left:var(--k-gut);right:var(--k-gut);top:50%;transform:translateY(-50%)}
.k-cap h3{font-size:clamp(52px,8.6vw,148px);line-height:.94;color:#fff}
.k-cap .mono{margin-bottom:.9em;color:#fff}
.k-scene.tall{background:#0b0b0b}
.k-scene.tall>img{left:auto;right:0;width:50%}
.k-scene.tall::after{background:linear-gradient(90deg,#0b0b0b 50%,transparent 50%)}
.k-scene.tall .k-cap{right:calc(50% + var(--k-gut))}
.k-all{position:relative;display:flex;justify-content:center;padding:64px var(--k-gut) 0;background:var(--bg)}

/* Leistungen */
.k-svc{padding:clamp(100px,13vw,190px) var(--k-gut) 0}
.k-svc .k-head{padding-left:0;padding-right:0}
.k-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:34px 0 40px;border-top:1px solid var(--sep)}
.k-row h3{font-size:clamp(56px,8vw,132px);line-height:1}
.k-row p{color:var(--label-3);margin-top:14px;font-size:16px}
.k-row ul{list-style:none;align-self:end;font-size:clamp(18px,1.7vw,24px);line-height:1.5;color:var(--label-2)}

/* Über mich */
.k-me{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);padding:clamp(100px,13vw,190px) var(--k-gut);align-items:end}
.k-me figure{aspect-ratio:4/5;overflow:hidden;border-radius:6px}
.k-me figure img{display:block;width:100%;height:100%;object-fit:cover}
.k-me h2{font-size:clamp(44px,5.6vw,92px);line-height:1;margin:16px 0 22px}
.k-me p{color:var(--label-2);max-width:34rem}
.k-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;padding-top:22px;border-top:1px solid var(--sep);font-size:15px}
.k-facts b{display:block;font-weight:500}
.k-facts span{color:var(--label-3)}

/* Ablauf */
.k-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px);padding:0 var(--k-gut) clamp(100px,13vw,190px)}
.k-steps>div{border-top:1px solid var(--sep);padding-top:18px}
.k-steps h4{font-size:clamp(30px,3vw,44px);margin:34px 0 10px;line-height:1.05}
.k-steps p{color:var(--label-2);font-size:16px}

/* Kontakt: ganz unten, mit dem Formular */
.k-end{position:relative;overflow:hidden;padding:clamp(120px,13vw,190px) var(--k-gut) clamp(50px,6vw,90px)}
.k-end-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.4}
.k-end::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--bg),transparent 34%,rgba(5,5,5,.8))}
.k-end-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:clamp(32px,6vw,96px);align-items:start}
.k-end h1,.k-end h2{font-size:clamp(68px,10.6vw,190px);line-height:.92;color:#fff}
.k-end-text p{max-width:30rem;margin-top:26px;font-size:clamp(17px,1.5vw,20px);color:rgba(255,255,255,.86)}
.k-end-text ul{list-style:none;margin-top:22px;font-size:15px;color:rgba(255,255,255,.7)}
.k-end-text li{padding:9px 0;border-top:1px solid rgba(255,255,255,.18)}
.k-form{background:rgba(8,8,8,.84);border-radius:var(--r-xl);padding:clamp(20px,2.6vw,36px)}
.fg-form input[type=text],.fg-form input[type=email],.fg-form textarea{background:rgba(255,255,255,.07)}
.fg-form .one-half{width:calc(50% - 8px)}
.site-footer{max-width:none;padding:20px var(--k-gut) 28px;margin:0;border-top:1px solid var(--sep)}

/* Unterseiten */
.wrap{max-width:none;padding:0 var(--k-gut)}
.page-head{max-width:1100px;padding:clamp(130px,14vw,190px) 0 clamp(36px,4vw,56px)}
.page-head h1,.s-head h1{font-size:clamp(56px,9vw,150px);line-height:.96;margin-top:14px}
.page-head .eyebrow{margin-top:26px}
.page-head .back{margin-bottom:0}
.lead-muted,.project-intro{max-width:44rem;font-size:clamp(18px,1.6vw,22px);line-height:1.4}
.page-top section.s:first-child{padding-top:clamp(130px,14vw,190px)}
.s-head{align-items:flex-end}
.s-head h2{font-size:clamp(44px,6.4vw,104px);line-height:1}
.seg{background:none;box-shadow:inset 0 0 0 1px var(--sep);padding:4px}
.seg button{background:none}
.seg button[aria-pressed="true"]{background:#fff;color:#050505;box-shadow:none}

/* Portfolio-Kacheln: Titel links mittig wie auf der Startseite */
.grid{gap:clamp(6px,.8vw,12px)}
.card{border-radius:6px}
.card::after{background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.4) 60%,rgba(0,0,0,.08))}
.card .meta{left:clamp(16px,2.2vw,30px);right:clamp(16px,2.2vw,30px);bottom:auto;top:50%;transform:translateY(-50%);align-items:center}
.card .kind{font:500 11px/1.2 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.card h3{font-size:clamp(30px,3.4vw,56px);line-height:1;margin:0}
.card .play{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:1px solid rgba(255,255,255,.55)}
@media (hover:hover){.card:hover,.card:focus-visible{transform:none;box-shadow:none}}

/* Projektseiten */
.project-body{padding-bottom:clamp(40px,6vw,90px)}
.inline-video,.fg-stage,.isotope-item a{border-radius:6px}
.inline-video .mouse-action{background:rgba(8,8,8,.7);backdrop-filter:none;-webkit-backdrop-filter:none}
.project-body p{font-size:18px}
.fg-nav,.fg-count{background:rgba(8,8,8,.8);backdrop-filter:none;-webkit-backdrop-filter:none}
.k-next{display:flex;align-items:center;gap:clamp(14px,2vw,24px);padding:14px 0;border-top:1px solid var(--sep);border-bottom:1px solid var(--sep)}
.k-next-img{flex:none;width:clamp(96px,10vw,140px);aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:#111}
.k-next-img img{display:block;width:100%;height:100%;object-fit:cover}
.k-next-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.k-next-txt .serif{font-size:clamp(24px,2.4vw,34px);line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-next-go{flex:none;font-size:20px;color:var(--label-2);transition:transform .25s var(--k-ease),color .2s}
.k-next:hover .k-next-go{transform:translateX(4px);color:var(--accent)}

/* Abschluss-Band mit Anfrage */
.cta-band{margin:0;padding:clamp(70px,10vw,140px) 0 clamp(50px,6vw,90px);border-radius:0;background:none;align-items:flex-end}
.cta-band h2{font-size:clamp(52px,8.4vw,144px);line-height:.96;margin-top:0}
.cta-band p{font-size:clamp(17px,1.5vw,20px);margin-top:18px}

/* Textseiten, Beiträge, Liste */
.prose{max-width:44rem;padding-bottom:clamp(60px,8vw,110px)}
.prose h2,.prose h1{font-size:clamp(32px,3.2vw,46px);line-height:1.08}
.prose h3{font-size:clamp(25px,2.4vw,32px)}
.post-grid{gap:clamp(14px,2vw,28px)}
.post-card{background:none;border-radius:0}
.post-card .ph{border-radius:6px}
.post-card .body{padding:14px 0 0}
.post-card .t{font-size:clamp(26px,2.6vw,36px);line-height:1.08}
.post-card:hover{transform:none}
.post-cover{border-radius:6px;max-width:none}
.page-head.empty{max-width:none;min-height:80vh;justify-content:flex-end;padding-bottom:clamp(50px,6vw,90px)}
.pager{padding-bottom:60px}

/* Einblenden beim Erreichen */
.js .r{opacity:0;transform:translateY(26px);transition:opacity .9s var(--k-ease),transform .9s var(--k-ease)}
.js .r.in{opacity:1;transform:none}

@media (hover:none),(max-width:820px){
  .nav{padding:12px 16px 40px}
  body.admin-bar .nav{top:46px}
  .nav-in img{height:24px}
  .nav-links{display:none}
  .nav-in>.btn{margin-left:auto}
  /* Handy: Bild steht fest, die Seite gleitet darüber. Keine Bewegung pro Scroll-Schritt, darum ruckelfrei. */
  .k-stage{height:100vh;height:100svh;clip-path:inset(0)}
  .k-frame{position:static;height:100%;background:none}
  .k-bg{position:fixed;top:0;width:100%;height:100vh;height:100lvh;object-position:66% 50%;transform:none;will-change:auto;animation:k-settle 2.4s var(--k-ease) both}
  @keyframes k-settle{from{scale:1.08}to{scale:1}}
  .k-frame::before{background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 30%,transparent 42%,rgba(0,0,0,.84))}
  .k-bar,.k-slate{display:none}
  .k-copy,.k-sub{left:var(--k-gut);right:var(--k-gut);width:auto;transform:none}
  .k-copy{bottom:150px}
  .k-sub{bottom:44px}
  .k-copy h1{font-size:clamp(66px,20.5vw,120px)}
  .k-say .w{opacity:1}
}
@media (max-width:820px){
  .k-head{flex-direction:column;align-items:flex-start}
  .k-cap h3{font-size:clamp(50px,15.4vw,92px)}
  .k-scene.tall>img{width:100%}
  .k-scene::after,.k-scene.tall::after{background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.5) 70%,rgba(0,0,0,.34))}
  .k-scene.tall .k-cap{right:var(--k-gut)}
  .k-row,.k-me,.k-steps,.k-end-in{grid-template-columns:1fr}
  .k-row{gap:18px}
  .k-me{align-items:start}
  .k-facts{grid-template-columns:1fr}
  .fg-form .one-half{width:100%}
  .card h3{font-size:clamp(24px,7vw,34px)}
  .s-head{flex-direction:column;align-items:flex-start}
  .cta-band{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .k-copy b,.k-sub,.k-bg{animation:none}
  .k-bg{transform:none}
  .k-say .w{opacity:1}
  .js .r{opacity:1;transform:none}
}