/* Layout: ruhige, luftige Spalte; Filmbild-Rahmen (16:9) mit Timecode als einziges Leitmotiv */
:root{
  --paper:#FFFFFF; --ink:#151817; --muted:#5F6664; --line:#E4E7E5;
  --screen:#0F1413; --screen-fg:#E9ECE8; --accent:#1F4A44; --gold:#1F4A44;
  color-scheme:light;
  --display:"Alegreya Sans", "Gill Sans", system-ui, sans-serif;
  --body:"Alegreya", Georgia, "Times New Roman", serif;
  --label:"Lato", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.7;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.wrap{max-width:1120px;margin:0 auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:300;text-wrap:balance;margin:0;line-height:1.12}
p{margin:0}
.kicker{font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.draft{font-family:var(--label);font-size:12px;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);
  padding-block:10px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}
.draft b{color:var(--gold);font-weight:500}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px;flex-wrap:wrap}
.mark{font-family:var(--label);font-size:16px;letter-spacing:.38em;text-transform:uppercase;text-decoration:none;line-height:1.5}
.mark span{display:block}
nav{display:flex;gap:28px;flex-wrap:wrap;font-family:var(--label);font-size:11px;letter-spacing:.25em;text-transform:uppercase}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--accent)}

.hero{display:grid;gap:28px;padding-block:56px 40px}
.hero h1{font-size:clamp(40px,7vw,84px);max-width:14ch}
.hero h1 em{color:var(--accent)}
.lede{max-width:52ch;color:var(--muted);font-size:18px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--label);font-size:11px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;text-decoration:none;padding:17px 30px;border:1px solid var(--ink);border-radius:0;background:none;color:var(--ink);cursor:pointer}
.btn.solid{background:none;color:var(--ink)}
.btn:hover{border-color:var(--accent);background:var(--accent);color:#fff}

.frame{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--screen);color:var(--screen-fg);border-radius:2px;overflow:hidden;display:grid;place-items:center}
.frame::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%, rgba(63,120,110,.30), transparent 60%),radial-gradient(ellipse at 80% 80%, rgba(31,74,68,.35), transparent 60%)}
.frame .tc,.frame .lbl{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.12em;opacity:.75}
.frame .tc{top:14px;left:16px}
.frame .lbl{bottom:14px;left:16px;right:16px;display:flex;justify-content:space-between;gap:8px;text-transform:uppercase}
.play{position:relative;width:64px;height:64px;border:1px solid rgba(233,236,232,.6);border-radius:50%;display:grid;place-items:center}
.play::after{content:"";border-left:14px solid var(--screen-fg);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.showreel{margin-bottom:96px}

section{padding-block:72px;border-top:1px solid var(--line)}
.sec-head{display:grid;gap:12px;margin-bottom:40px}
.sec-head h2{font-size:clamp(30px,4.4vw,48px)}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px}
.svc{display:grid;gap:16px;align-content:start;min-width:0}
.svc h3{font-size:30px}
.svc p{color:var(--muted)}
.svc ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{display:flex;justify-content:space-between;gap:16px;padding-block:12px;border-bottom:1px solid var(--line)}
.svc li span{font-family:var(--label);font-size:12px;color:var(--muted);white-space:nowrap}

.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filter button{font-family:var(--label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--muted);padding:8px 14px;border-radius:2px;cursor:pointer}
.filter button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:36px 28px}
.work{display:grid;gap:12px;text-decoration:none;min-width:0}
.work h3{font-size:22px}
.work .meta{font-family:var(--label);font-size:12px;color:var(--muted);letter-spacing:.06em}
.work .play{width:48px;height:48px}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;gap:8px;counter-increment:s}
.steps li::before{content:"0" counter(s);font-family:var(--label);font-size:12px;color:var(--gold)}
.steps h3{font-size:24px}
.steps p{color:var(--muted);font-size:15px}

.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px;align-items:start}
.about p{color:var(--muted);max-width:58ch}
.about .facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted)} .facts dd{margin:0;font-family:var(--display);font-weight:300;font-size:24px}

.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:48px}
.direct{display:grid;gap:20px;align-content:start}
.direct .row{display:grid;gap:4px}
.direct .val{font-family:var(--display);font-weight:300;font-size:28px;user-select:all;word-break:break-word}
.copy{justify-self:start;font-family:var(--label);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--muted);padding:6px 10px;border-radius:2px;cursor:pointer}
form{display:grid;gap:16px;min-width:0}
label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 0;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--accent)}
select option{background:var(--paper)}
.note{font-family:var(--label);font-size:12px;color:var(--gold)}

footer{border-top:1px solid var(--line);padding-block:32px 48px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.work .frame{transition:transform .5s ease}.work:hover .frame{transform:scale(1.015)}}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
button.frame{border:0;padding:0;cursor:pointer;width:100%;font:inherit}
.hp{position:absolute;left:-9999px}
.legal{max-width:68ch;padding-block:40px 80px;display:grid;gap:18px}
.legal h1{font-size:clamp(34px,5vw,52px)} .legal h2{font-size:26px;margin-top:18px}
.legal p,.legal li{color:var(--muted)}
footer nav{font-size:11px}
.about-left{display:grid;gap:36px;min-width:0}
.portrait{margin:0;max-width:420px}
.portrait img{display:block;width:100%;height:auto;max-width:100%}
.legal .firm{font-family:var(--label);font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:-6px}
/* Scroll-Effekte: Elemente gleiten beim Scrollen mit leichtem Federn herein */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s ease,transform 1s cubic-bezier(.22,1.25,.36,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.portrait.reveal{transform:translateY(38px) scale(.97)}
.portrait.reveal.in{transform:none}
@media (prefers-reduced-motion:reduce){.reveal,.portrait.reveal{opacity:1;transform:none;transition:none}}
/* Fotos in der Arbeiten-Galerie */
.photo{position:relative;aspect-ratio:4/3;max-width:100%;width:100%;background:var(--line);overflow:hidden;border:0;padding:0;display:block;font:inherit;cursor:zoom-in}
div.photo{cursor:default;background:linear-gradient(135deg,#EEF1EF,#E1E7E4)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .lbl{position:absolute;bottom:14px;left:16px;right:16px;display:flex;justify-content:space-between;gap:8px;font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(10,14,13,.92);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));cursor:zoom-out}
.lightbox img{max-width:100%;max-height:90vh;object-fit:contain}
.lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));background:none;border:0;color:#fff;font-size:36px;line-height:1;cursor:pointer}
.lightbox[hidden]{display:none!important}