/* ── Selbst gehostete Schriften (DSGVO: keine externen CDN-Aufrufe) ── */
/* Geist (Display + Body) */
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url("../fonts/geist-400.woff2") format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url("../fonts/geist-500.woff2") format("woff2")}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url("../fonts/geist-600.woff2") format("woff2")}
@font-face{font-family:"Geist";font-weight:700;font-display:swap;src:url("../fonts/geist-700.woff2") format("woff2")}
/* Space Mono (Mono-Labels) */
@font-face{font-family:"Space Mono";font-weight:400;font-display:swap;src:url("../fonts/space-mono-400.woff2") format("woff2")}
/* Barlow Condensed (Film-Credits) */
@font-face{font-family:"Barlow Condensed";font-weight:300;font-display:swap;src:url("../fonts/barlow-condensed-300.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url("../fonts/barlow-condensed-500.woff2") format("woff2")}
:root{
  --fvw:1vw;
  --bg:#000000;
  --panel:#050505;
  --fg:#f4f4f3;
  --muted:rgba(244,244,243,.56);
  --faint:rgba(244,244,243,.32);
  --hair:rgba(244,244,243,.12);
  --hair-soft:rgba(244,244,243,.07);
  --mx:clamp(20px,calc(5 * var(--fvw)),84px);
  --font-display:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,Menlo,monospace;
  --tracking-extra:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  letter-spacing:var(--tracking-extra);
  overflow-x:hidden;
}
::selection{background:#fff;color:#000}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;letter-spacing:inherit}
img{display:block}

/* ---- type helpers ---- */
.label{
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}
.dim{color:var(--muted)}
.link{transition:color .25s ease;border-bottom:1px solid var(--hair);padding-bottom:1px}
.link:hover{color:#fff;border-color:#fff}

/* ---- nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--mx);
  pointer-events:none;
  transition:background .35s ease,backdrop-filter .35s ease;
}
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:220px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.62) 0%,rgba(0,0,0,.46) 30%,rgba(0,0,0,.24) 55%,rgba(0,0,0,.08) 78%,rgba(0,0,0,0) 100%);
  opacity:1;transition:opacity .35s ease;
}
.nav.is-scrolled::before{opacity:0}
.nav>*{pointer-events:auto}
.nav-mark{
  display:flex;align-items:center;gap:11px;text-align:left;
  font-family:var(--font-display);
  font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.05em;color:#fff;
}
.nav-mark-divider{width:1px;height:24px;background:rgba(255,255,255,.22);flex-shrink:0;}
.nav-mark-sub{
  font-family:var(--font-mono);font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.78);line-height:1.45;
}
.nav-links{display:flex;align-items:center;gap:clamp(18px,calc(2.4 * var(--fvw)),34px)}
.nav-link{
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(255,255,255,.6);transition:color .25s ease;
}
.nav-link:hover,.nav-link.is-on{color:#fff}
.nav-link.is-on{position:relative}
@keyframes navLangFadeIn{from{opacity:0}to{opacity:1}}
.lang-fade{animation:navLangFadeIn .6s ease}
@media (prefers-reduced-motion:reduce){.lang-fade{animation:none}}
.nav-right{display:flex;align-items:center;gap:clamp(18px,calc(2.4 * var(--fvw)),34px)}
.lang-toggle{
  display:flex;align-items:center;gap:7px;
  background:none;border:0;cursor:pointer;padding:0;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;outline:none;
}
.lang-toggle:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:4px}
.nav-link,.mob-menu-link{-webkit-tap-highlight-color:transparent}
.nav-link:focus-visible,.mob-menu-link:focus-visible{outline:1px solid rgba(255,255,255,.5);outline-offset:3px}
.lang-opt{
  font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  color:rgba(255,255,255,.6);transition:color .25s ease;
}
.lang-opt.is-on{color:#fff}
.lang-sep{font-size:11px;color:rgba(255,255,255,.22)}
@media (max-width:900px){
  .nav-right{gap:14px}
}

/* ---- layout ---- */
.main{min-height:100vh}
.page{padding:clamp(120px,16vh,200px) var(--mx) clamp(80px,12vh,140px);max-width:1400px;margin:0 auto}

/* ================= HERO ================= */
.hero{
  min-height:100vh;
  padding:clamp(108px,13vh,150px) var(--mx) clamp(48px,7vh,80px);
  max-width:1640px;margin:0 auto;
}
.hero-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  max-height:calc(100vh - 220px);
  background:var(--panel);overflow:hidden;
  /* Wie in der Referenz liegt das Hero-Bild dauerhaft auf einer GPU-Ebene (das ist
     der "gute", nicht abgesoffene Look). Referenz nutzt dafuer will-change auf allen
     5 .hero-layer -> das hat hier geflackert. Stattdessen EINE stabile Ebene auf dem
     Rahmen: gleicher Farb-/Gamma-Look, aber ohne das 5-Ebenen-Flackern. */
  will-change:transform;
  cursor:pointer; /* Hero-Bild ist klickbar -> aktives Projekt (nur Startseite) */
}

/* Kein dauerhaftes will-change: permanente GPU-Ebenen verursachen rhythmisches
   Neuzeichnen/Flackern im Ruhezustand. Die Opacity-Ueberblendung laeuft auch ohne. */
.hero-layer{position:absolute;inset:0;opacity:0}
.hero-layer.is-active{opacity:1}
.hero-layer[data-trans="crossfade"]{transition:opacity .95s cubic-bezier(.4,0,.2,1)}
.hero-layer[data-trans="cut"]{transition:none}
.hero-layer[data-trans="dissolve"]{
  transition:opacity 1.3s ease,transform 1.3s ease,filter 1.3s ease;
  transform:scale(1.045);filter:blur(7px)
}
.hero-layer[data-trans="dissolve"].is-active{transform:scale(1);filter:blur(0)}


.hero-list{list-style:none;display:flex;flex-direction:column;gap:clamp(11px,calc(1.5 * var(--fvw)),20px)}
.hero-item{
  display:grid;grid-template-columns:auto;gap:3px;
  transition:opacity .4s ease;outline:none;
}
.hero-list:hover .hero-item{opacity:.3}
.hero-list:hover .hero-item:hover,.hero-item.is-on{opacity:1}
.hero-item:not(.is-on){opacity:.62}
.hero-item-cat{color:var(--faint);transition:color .3s ease}
.hero-item.is-on .hero-item-cat{color:var(--muted)}
.hero-item-ttl{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(19px,calc(2.3 * var(--fvw)),33px);
  line-height:1.02;
  letter-spacing:-.01em;
  text-wrap:balance;
}
.hero-item-yr{margin-top:2px}


/* ================= STILL (image / placeholder) ================= */
.still{position:absolute;inset:0;width:100%;height:100%}
.still--img .still-base{width:100%;height:100%;object-fit:cover;object-position:center}

/* placeholder */
.still--ph{
  display:flex;align-items:center;justify-content:center;
  background:#0a0a0a;border:1px solid var(--hair-soft);
}
.still--ph .ph-grid{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.045) 0 1px,transparent 1px 11px);
}
.ph-cap{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:16px}
.ph-cap .mono{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}


/* ---- TEXT FX — halation glow + neutral grain, only while hovering a bright text element (group: --txt-*) ---- */
.fxtext{position:relative;display:inline-block;transition:text-shadow .4s ease}
/* grain is clipped to the glyphs themselves — no rectangle exists, so it can never show as a box */
.fxtext::after{
  content:attr(data-fx);
  position:absolute;inset:0;pointer-events:none;
  font:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;white-space:inherit;
  color:transparent;-webkit-text-fill-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='gt'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.15' intercept='-0.34'/%3E%3CfeFuncG type='linear' slope='1.15' intercept='-0.34'/%3E%3CfeFuncB type='linear' slope='1.15' intercept='-0.34'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gt)'/%3E%3C/svg%3E");
  background-size:130px 130px;-webkit-background-clip:text;background-clip:text;
  mix-blend-mode:overlay;
  opacity:0;transition:opacity .4s ease;
}
.fxtext:hover{
  text-shadow:
    0 0 4px rgb(255 116 64 / calc(var(--txt-halation) * .65)),
    0 0 12px rgb(255 80 42 / calc(var(--txt-halation) * .45)),
    0 0 26px rgb(255 58 30 / calc(var(--txt-halation) * .28));
}
.fxtext:hover::after{opacity:0}

/* ================= WORK GRID ================= */
.grid-wrap{display:flex;align-items:center;min-height:100vh;padding:0 var(--mx);max-width:1640px;margin:0 auto}

.grid{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  justify-content:center;
  width:100%;
}
.grid > .tile{
  flex:0 0 calc((100% - 4px) / 3);
}
.tile{display:flex;flex-direction:column;gap:16px;text-align:left}
.tile-media{position:relative;width:100%;aspect-ratio:2/1;background:var(--panel);overflow:hidden}
.tile-media .still-base{transition:transform .9s cubic-bezier(.2,0,.1,1),filter .5s ease;filter:brightness(.92)}
.tile:hover .still-base{transform:scale(1.045);filter:brightness(1)}
.tile-cat{color:var(--faint)}
.tile-ttl{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(17px,calc(1.5 * var(--fvw)),22px);line-height:1.06;letter-spacing:-.005em;
  transition:color .3s ease;
}
.tile:hover .tile-ttl{color:#fff}
.tile-sub{font-size:10.5px}
.tile-hover-overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(12px,calc(1.5 * var(--fvw)),20px);background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.1) 55%,transparent 100%);opacity:0;transition:opacity .35s ease}
.tile:hover .tile-hover-overlay{opacity:1}
.tile-hover-overlay .tile-cat{color:rgba(255,255,255,.5);margin-bottom:3px}
.tile-hover-overlay .tile-ttl{font-family:var(--font-display);font-weight:600;font-size:clamp(15px,calc(1.4 * var(--fvw)),20px);line-height:1.05;color:#fff}
.tile-hover-overlay .tile-sub{color:rgba(255,255,255,.48);margin-top:3px}

/* ================= ABOUT ================= */
.about-lead{max-width:1100px;margin-bottom:clamp(16px,calc(2 * var(--fvw)),24px);display:flex;flex-direction:column;gap:22px}
.about-statement{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(28px,calc(4.6 * var(--fvw)),62px);line-height:1.04;letter-spacing:-.02em;
  text-wrap:balance;max-width:16ch;
}
.about-bio{display:flex;flex-direction:column;gap:20px;max-width:64ch}
.about-bio p{font-size:clamp(15px,calc(1.15 * var(--fvw)),18px);line-height:1.65;color:rgba(244,244,243,.82)}
.about-bio-more{display:none;background:none;border:none;padding:0;color:rgba(244,244,243,.55);font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.14em;cursor:pointer;transition:color .25s ease;align-self:flex-start;margin-top:-4px}
.about-bio-more:hover{color:#fff}
/* On desktop: always show all paragraphs */
@media(max-width:768px){.about-bio-more{display:inline-block}}
@media(max-width:768px){.bio-linebreak{display:none}}

.about-social{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:8px}
.about-social a{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);transition:color .25s ease}
.about-social a:hover{color:#fff}
.portrait-cap{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
/* ================= CONTACT ================= */
.contact-lead{display:flex;flex-direction:column;gap:18px}
.contact-mail{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(26px,calc(5 * var(--fvw)),68px);letter-spacing:-.02em;line-height:1;
  transition:opacity .25s ease;align-self:flex-start;
}
.contact-mail:hover{opacity:1}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,calc(4 * var(--fvw)),64px);max-width:900px}
.contact-block{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--hair);padding-top:18px}
.contact-val{font-size:15px}
.contact-social{display:flex;flex-direction:column;gap:9px;align-items:flex-start}

/* ================= CASE STUDY ================= */
.case{position:relative}
.case-back{display:inline-block;white-space:nowrap;margin-bottom:clamp(26px,calc(3 * var(--fvw)),44px);color:var(--muted);transition:color .25s ease}
.case-back:hover{color:#fff}
.case-hero{position:relative;width:100%;aspect-ratio:2/1;max-height:74vh;background:var(--panel);overflow:hidden;border-radius:4px}
.case-hero[data-ratio="16/9"]{aspect-ratio:16/9}
.case-head{display:flex;flex-direction:column;gap:14px;padding:clamp(32px,calc(4 * var(--fvw)),56px) 0 4px}
.case-cat{}
.case-ttl{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,calc(6.5 * var(--fvw)),92px);line-height:.98;letter-spacing:-.025em;text-wrap:balance}
.case-aka{}
.case-body{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,calc(6 * var(--fvw)),100px);padding-bottom:clamp(48px,calc(6 * var(--fvw)),84px);border-top:1px solid var(--hair);padding-top:clamp(34px,calc(4 * var(--fvw)),52px)}
.case-syn{font-size:clamp(16px,calc(1.35 * var(--fvw)),20px);line-height:1.62;color:rgba(244,244,243,.84);max-width:54ch}
.case-meta{display:flex;flex-direction:column}
.meta-row{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:8px 0;border-top:1px solid var(--hair-soft);font-size:14px}
.meta-row dt{color:var(--muted);padding-top:2px}
/* additional-stills drop gallery */
.case-gallery{padding-bottom:clamp(24px,calc(3 * var(--fvw)),40px)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:0}
.gallery-slot{position:relative;width:100%;aspect-ratio:2/1;background:var(--panel);overflow:hidden;cursor:pointer;transition:opacity .2s ease}

/* ---- Trailer play button (centered on case hero) ---- */
.trailer-btn{
  position:absolute;inset:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;
  cursor:pointer;
}
.trailer-btn-ring{
  width:76px;height:76px;border-radius:50%;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(0,0,0,.16);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease,border-color .3s ease,transform .3s cubic-bezier(.4,0,.2,1);
}
.trailer-btn-ring svg{width:26px;height:26px;margin-left:3px;fill:#fff;transition:fill .3s ease}
.trailer-btn:hover .trailer-btn-ring{background:rgba(255,255,255,.94);border-color:#fff;transform:scale(1.07)}
.trailer-btn:hover .trailer-btn-ring svg{fill:#000}
.trailer-btn-label{color:#fff;opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.55)}

/* ---- Video lightbox (GDPR 2-click) ---- */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,calc(4 * var(--fvw)),52px)}
.lb-backdrop{position:absolute;inset:0;border:none;cursor:pointer;background:rgba(0,0,0,.86);backdrop-filter:blur(7px);animation:lbFade .3s ease}
.lb-window{position:relative;z-index:2;width:min(calc(96 * var(--fvw)),1760px);animation:lbRise .42s cubic-bezier(.4,0,.2,1);background:#000}
.lb-close{position:absolute;top:-32px;right:0;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.66);transition:color .25s ease}
.lb-close:hover{color:#fff}
.lb-frame{position:relative;width:auto;max-width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--hair);max-height:85vh}.lb-frame--reel{aspect-ratio:2/1;overflow:hidden}
.lb-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}.lb-frame--reel .lb-iframe{top:-6%;height:112%}
.lb-consent{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;text-align:center}

.lb-consent::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.74)}
.lb-consent-inner{position:relative;z-index:2;max-width:520px;padding:clamp(22px,calc(4 * var(--fvw)),40px);display:flex;flex-direction:column;align-items:center;gap:15px}
.lb-consent-kicker{color:rgba(255,255,255,.5)}
.lb-consent-ttl{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,calc(2.4 * var(--fvw)),28px);letter-spacing:-.01em;color:#fff}
.lb-consent-txt{font-size:13px;line-height:1.62;color:rgba(255,255,255,.66);max-width:46ch}
.lb-remember{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted);cursor:pointer;text-transform:uppercase;letter-spacing:.08em}
.lb-remember input{accent-color:#fff;width:13px;height:13px;cursor:pointer}
.lb-consent-actions{display:flex;align-items:center;gap:20px;margin-top:4px}
.lb-load{
  background:#fff;color:#000;border:1px solid #fff;
  padding:12px 26px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  transition:background .25s ease,color .25s ease;
}
.lb-load:hover{background:transparent;color:#fff}
.lb-privacy{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.62)}
.lb-privacy:hover{color:#fff}
.lb-consent-note{margin-top:4px;font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.4)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.case-next{display:flex;flex-direction:column;gap:0;padding-bottom:clamp(48px,calc(6 * var(--fvw)),84px)}
.case-next-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.case-next-item{display:flex;flex-direction:column;gap:0;text-align:left;padding:0;transition:opacity .25s ease}
.case-next-item:hover{opacity:1}
.case-next-ttl{font-family:var(--font-display);font-weight:600;font-size:clamp(16px,calc(1.6 * var(--fvw)),22px);line-height:1.05}

/* ================= FOOTER ================= */
.foot{padding:clamp(36px,calc(5 * var(--fvw)),60px) var(--mx);border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:12px;max-width:1640px;margin:0 auto}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.foot-legal{display:flex;align-items:center;gap:clamp(14px,calc(2 * var(--fvw)),26px);flex-wrap:wrap}
.foot-legal .link{background:none;border:none;border-bottom:1px solid var(--hair);padding:0 0 1px;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.02em}

/* ================= FILMOGRAFIE / VITA ================= */
.filmo{border-top:1px solid var(--hair);margin-top:clamp(28px,calc(3.5 * var(--fvw)),48px);padding-top:clamp(30px,calc(3.5 * var(--fvw)),48px)}
.filmo-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(22px,calc(2.6 * var(--fvw)),38px)}
.filmo-title{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,calc(2.6 * var(--fvw)),34px);letter-spacing:-.02em;line-height:.96}
.filmo-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.filmo-row{border-bottom:1px solid var(--hair-soft)}
.filmo-open{display:grid;width:100%;text-align:left;grid-template-columns:74px minmax(0,1.3fr) minmax(0,0.7fr) minmax(0,1.5fr);column-gap:clamp(12px,calc(2 * var(--fvw)),28px);row-gap:0;align-items:baseline;padding:clamp(8px,calc(1 * var(--fvw)),12px) 0;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.filmo-open:hover{transform:translateX(14px)}
.filmo-open--static{cursor:default}
.filmo-open--static:hover{transform:none}
.filmo-open--static .filmo-ttl{color:inherit}
.filmo-year{padding-top:2px;font-size:13px;color:var(--fg)}
.filmo-ttl{font-family:var(--font-display);font-weight:600;font-size:clamp(14px,calc(1.2 * var(--fvw)),19px);line-height:1.1;letter-spacing:-.01em;transition:color .3s ease}
.filmo-open:hover .filmo-ttl{color:#fff}
.filmo-role{font-size:13px}
.filmo-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;min-height:34px}
.filmo-meta-wrap{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 0.4em;font-size:11px;font-family:var(--font-mono);color:var(--muted)}
.filmo-meta{font-size:11px;font-family:var(--font-mono);color:var(--muted);text-align:right}
.filmo-seg{white-space:nowrap}
.filmo-seg:not(:last-child)::after{content:" ·"}
.filmo-seg.is-eol::after{display:none}
.filmo-prod{font-size:11px;font-family:var(--font-mono);color:var(--muted);overflow-wrap:break-word;text-align:right}
/* ================= LEGAL ================= */
.legal{max-width:820px}
.legal .case-back{margin-bottom:clamp(34px,calc(5 * var(--fvw)),60px)}
.legal-block{margin-bottom:clamp(56px,calc(8 * var(--fvw)),104px);scroll-margin-top:clamp(88px,12vh,120px)}
.legal-block .label{display:block;margin-bottom:18px}
.legal-intro{font-size:clamp(16px,calc(1.4 * var(--fvw)),21px);line-height:1.55;color:rgba(244,244,243,.84);max-width:60ch;margin-bottom:clamp(26px,calc(3 * var(--fvw)),40px);text-wrap:pretty}
.legal-note{margin-top:22px;line-height:1.7;font-size:11px;letter-spacing:.03em}
.legal-en-notice{max-width:60ch;line-height:1.6;font-size:12px;letter-spacing:.02em;margin-bottom:clamp(34px,calc(5 * var(--fvw)),60px);padding:14px 16px;border:1px solid var(--hair);border-radius:2px}
.legal-sections{display:flex;flex-direction:column;gap:clamp(26px,calc(3 * var(--fvw)),40px)}
.legal-sec{display:grid;grid-template-columns:minmax(160px,1fr) 2fr;gap:24px;border-top:1px solid var(--hair-soft);padding-top:22px}
.legal-sec-t{padding-top:3px}
.legal-sec-d{display:flex;flex-direction:column;gap:9px}
.legal-sec-d p{font-size:14.5px;line-height:1.62;color:rgba(244,244,243,.82);max-width:62ch;text-wrap:pretty}

/* ================= RESPONSIVE ================= */
@media (max-width:960px){.grid > .tile{flex:0 0 calc((100% - 2px) / 2)}}
@media (max-width:560px){.grid > .tile{flex:0 0 100%}}
@media (max-width:880px){
  .case-body{grid-template-columns:1fr;gap:30px}
  .contact-grid{grid-template-columns:1fr;gap:28px}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .case-next-row{grid-template-columns:1fr}
  .legal-sec{grid-template-columns:1fr;gap:8px}
  .filmo-open{grid-template-columns:52px 1fr;gap:5px 16px}
  .filmo-role{grid-column:2;text-align:left}
  .filmo-right{grid-column:2;align-items:flex-start;text-align:left}
  .filmo-meta-wrap{justify-content:flex-start}
  .filmo-prod{text-align:left}
}
@media (max-width:560px){
  .nav{padding:18px var(--mx)}
  .nav-mark{font-size:11px;letter-spacing:.14em}
  .nav-links{gap:16px}
}

/* ══ V2 STYLES ══ */
.nav.is-scrolled{background:rgba(0,0,0,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero-pin{height:100vh}
.hero-full{position:sticky!important;top:0;height:100vh!important;overflow:hidden;padding:0!important;max-width:none!important;margin:0!important;min-height:unset!important}
.hero-full .hero-frame{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:unset;background:var(--bg)}
.hero-gradient{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.84) 0%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.04) 100%)}
.hero-overlay{position:absolute;bottom:0;left:0;right:0;z-index:5;padding:0 var(--mx) clamp(30px,4.5vh,58px)}
.hero-full .hero-list{list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:clamp(16px,calc(2.2 * var(--fvw)),44px);border-top:1px solid rgba(255,255,255,.13);padding-top:clamp(14px,calc(1.8 * var(--fvw)),22px)}
.hero-full .hero-item{display:flex;flex-direction:column;gap:2px;opacity:.48;cursor:pointer;outline:none;transition:opacity .32s ease}
.hero-full .hero-item.is-on,.hero-full .hero-item:hover{opacity:1}
.hero-full .hero-item-cat{color:rgba(255,255,255,.4);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.22em}
.hero-full .hero-item-ttl{font-family:var(--font-display);font-weight:600;font-size:clamp(14px,calc(1.5 * var(--fvw)),21px);line-height:1.06;letter-spacing:-.01em;color:#fff}
.hero-full .hero-item-yr{font-size:10px;color:rgba(255,255,255,.32);letter-spacing:.06em}
.grid-wrap{background:var(--bg);position:relative;z-index:1;padding-bottom:clamp(40px,6vh,80px);min-height:calc(100vh - 160px)}
.foot{background:var(--bg);position:relative;z-index:1}
.stills-lb-win{position:relative;z-index:2;width:min(calc(96 * var(--fvw)),1760px);display:flex;flex-direction:column;align-items:center;animation:lbRise .42s cubic-bezier(.4,0,.2,1)}
.stills-lb-inner{display:flex;flex-direction:column;align-items:flex-end;width:min(calc(96 * var(--fvw)),1760px);max-width:min(calc(96 * var(--fvw)),1760px);gap:8px}
.stills-lb-close{align-self:flex-end;display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.66);transition:color .25s ease}
.stills-lb-close:hover{color:#fff}
.stills-lb-frame{position:relative;background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;border:1px solid var(--hair)}
.stills-lb-img{display:block;width:100%;height:auto;max-height:85vh;object-fit:contain}
.stills-lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);color:#fff;font-size:20px;transition:background .2s ease,border-color .2s ease}
.stills-lb-nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}
.stills-lb-prev{left:14px}
.stills-lb-next{right:14px}
.stills-lb-counter{padding:8px 0 0;text-align:right;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.35)}
.stills-lb-empty{width:100%;min-height:300px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.28);font-size:12px;letter-spacing:.12em}
.case-next-head{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--hair);padding-top:22px;margin-bottom:clamp(18px,calc(2.2 * var(--fvw)),30px)}
.case-next-arrows{display:flex;gap:10px}
.case-next-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--muted);transition:border-color .2s ease,color .2s ease}
.case-next-arrow:hover:not(:disabled){border-color:rgba(255,255,255,.6);color:#fff}
.case-next-arrow:disabled{opacity:.2;cursor:default}
.case-next-thumb{position:relative;width:100%;aspect-ratio:2/1;background:var(--panel);overflow:hidden;margin-bottom:0}
.case-next-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,0,.1,1)}
.case-next-item:hover .case-next-thumb img{transform:scale(1.04)}
.case-next-thumb-overlay{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(12px,calc(1.5 * var(--fvw)),20px);background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.1) 55%,transparent 100%);opacity:0;transition:opacity .35s ease}
.case-next-item:hover .case-next-thumb-overlay{opacity:1}
.case-next-thumb-overlay .case-next-cat{color:rgba(255,255,255,.5);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;margin-bottom:3px;display:block}
.case-next-thumb-overlay .case-next-ttl{font-family:var(--font-display);font-weight:600;font-size:clamp(14px,calc(1.4 * var(--fvw)),20px);line-height:1.04;color:#fff}
.film-credits-section{padding:clamp(28px,calc(3.5 * var(--fvw)),48px) 0;border-top:1px solid var(--hair);text-align:center}
.film-credits-body{max-width:960px;margin:0 auto;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;text-align:center;line-height:1.55;word-break:break-word}
.film-credit-job{font-size:9px;font-weight:300;color:rgba(244,244,243,.38);letter-spacing:.01em}
.film-credit-name{font-size:16px;font-weight:500;color:rgba(244,244,243,.96);letter-spacing:0em}
.laurels-section{padding:4px 0;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.laurels-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,calc(2 * var(--fvw)),26px)}
.laurel-wrap{height:120px;flex-shrink:0;display:flex;align-items:center;text-decoration:none;transition:filter .4s ease}
.laurel-wrap[href]:hover{filter:drop-shadow(0 0 5px rgba(255,116,64,.62)) drop-shadow(0 0 16px rgba(255,80,42,.3));cursor:pointer}
.laurel-slot-wrap{height:120px;width:120px;overflow:hidden;flex-shrink:0;background:transparent;display:flex;align-items:center;justify-content:center}
.case-atmo{position:absolute;top:0;left:0;right:0;height:80vh;overflow:hidden;background:transparent;pointer-events:none;z-index:0}
.case-atmo-fade{position:absolute;inset:0;background:linear-gradient(to bottom,var(--case-bg-overlay,rgba(0,0,0,0)) 0%,rgba(0,0,0,.55) 62%,#000 100%)}
.case-atmo-back{position:absolute;top:clamp(70px,9vh,98px);left:var(--mx);z-index:5;display:inline-block;white-space:nowrap;color:rgba(244,244,243,.6);transition:color .25s ease}
.case-atmo-back:hover{color:#fff}
.case-atmo-back{pointer-events:auto}
.case-main{padding:clamp(96px,12vh,140px) var(--mx) clamp(70px,11vh,130px);max-width:1640px;margin:0 auto;position:relative;z-index:1}
.case-hero-overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;padding:clamp(16px,calc(2 * var(--fvw)),28px);background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.12) 55%,transparent 100%);opacity:0;transition:opacity .38s ease;pointer-events:none}
.case-hero:hover .case-hero-overlay{opacity:1}
.case-hero-overlay-inner{display:flex;flex-direction:column;gap:3px}
.case-hero-overlay-cat{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.5)}
.case-hero-overlay-ttl{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,calc(3.2 * var(--fvw)),52px);line-height:1.02;color:#fff;letter-spacing:-.01em}
.page.about{position:relative;padding-top:clamp(200px,28vh,320px)}
.about-bg{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:70vh;z-index:0;pointer-events:none;overflow:hidden}
.about-bg-inner{position:absolute;inset:0}
.about-bg-inner img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.about-bg-fade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 62%,#000 100%)}
.about-grid,.awards-block,.filmo{position:relative;z-index:1}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,calc(35 * var(--fvw)),520px);gap:clamp(40px,calc(7 * var(--fvw)),110px);align-items:stretch;margin-bottom:clamp(40px,calc(6 * var(--fvw)),80px)}
.about-text{display:flex;flex-direction:column;gap:clamp(12px,calc(1.4 * var(--fvw)),20px)}
.about-portrait-sticky{position:relative;align-self:start;margin:0;margin-top:80px;display:flex;flex-direction:column;gap:12px}
.portrait-slot-full{position:relative;width:100%;aspect-ratio:3/4;min-height:320px;background:var(--panel);overflow:hidden;border-radius:4px}
.awards-block{margin-top:clamp(28px,calc(4 * var(--fvw)),52px);padding-top:0;border-top:none}
.awards-block + .filmo{margin-top:clamp(8px,calc(1.2 * var(--fvw)),16px)}
.awards-block .filmo-open:hover{transform:none;cursor:default}
.awards-block .filmo-open{grid-template-columns:74px minmax(0,1.3fr) minmax(0,0.7fr) minmax(0,1.5fr)}
.filmo-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(14px,calc(1.8 * var(--fvw)),24px)}
.filmo-list{min-height:0}
.filmo-filter{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;padding:5px 13px;border:1px solid var(--hair);color:var(--muted);transition:border-color .2s ease,color .2s ease}
.filmo-filter:hover{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.75)}
.filmo-filter.is-on{border-color:rgba(255,255,255,.72);color:#fff}
/* Mobile Filter-Dropdown */
.filmo-select{
  display:none;
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.82);
  padding:9px 36px 9px 14px;
  font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.12em;
  font-family:var(--font-body);
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='rgba(255,255,255,0.5)' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  margin-bottom:clamp(14px,calc(1.8 * var(--fvw)),24px);
}
.contact-page{height:100vh;overflow:hidden;display:flex;flex-direction:column;width:100%}
.contact-photo-col{flex:1 1 0;min-height:0;position:relative;overflow:hidden;width:100%}
.contact-info-col{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,calc(2.5 * var(--fvw)),32px);padding:clamp(16px,2.2vh,32px) var(--mx);width:100%;max-width:1640px;margin:0 auto;align-self:center}
.contact-page .foot{flex-shrink:0;padding-top:clamp(8px,1.4vh,18px);padding-bottom:clamp(8px,1.4vh,18px);width:100%;box-sizing:border-box}
@media(max-height:680px){.contact-mail{font-size:clamp(20px,calc(3.8 * var(--fvw)),44px)!important}.contact-info-col{gap:clamp(10px,1.5vh,20px)!important;padding:clamp(10px,1.5vh,18px) var(--mx)!important}}
@media(max-width:768px){.contact-photo-col{flex:1 1 0;min-height:120px}.contact-info-col{padding:20px var(--mx)}}

/* ── Page transitions ── */
@keyframes pageFadeIn{from{opacity:0}to{opacity:1}}
@keyframes pageFadeOut{from{opacity:1}to{opacity:0}}
.page-enter{animation:pageFadeIn .48s cubic-bezier(.4,0,.2,1) both}
.page-exit{animation:pageFadeOut .28s cubic-bezier(.4,0,.2,1) both;pointer-events:none}

@media(max-width:880px){.about-grid{grid-template-columns:1fr}.about-portrait-sticky{position:static}.hero-full .hero-list{gap:12px 18px}.case-next-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.case-next-row{grid-template-columns:1fr}.gallery-grid{grid-template-columns:repeat(2,1fr)!important}.hero-full .hero-list{gap:10px 14px}}

/* ═══════════════════════════════════════════════════
   HAMBURGER NAV (nur Mobile)
   ═══════════════════════════════════════════════════ */
.nav-hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5.5px;
  width:28px;height:28px;
  cursor:pointer;z-index:60;
  background:none;border:none;padding:0;
  flex-shrink:0;
}
.nav-hamburger span{
  display:block;width:22px;height:1.5px;
  background:rgba(255,255,255,.82);border-radius:1px;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s ease;
}
.nav-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-menu{
  position:fixed;inset:0;z-index:48;
  background:rgba(0,0,0,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,4vh,34px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.mob-menu.is-open{opacity:1;visibility:visible}
.mob-menu-link{
  font-family:var(--font-display);
  font-size:clamp(28px,calc(7 * var(--fvw)),42px);
  font-weight:600;letter-spacing:-.02em;
  color:rgba(255,255,255,.48);
  background:none;border:none;cursor:pointer;padding:0;
  transition:color .2s ease;
}
.mob-menu-link:hover,.mob-menu-link.is-on{color:#fff}

/* ═══════════════════════════════════════════════════
   MOBILE — max-width: 768px
   ═══════════════════════════════════════════════════ */
@media(max-width:768px){
  :root{--mx:20px}
  .nav{padding:18px var(--mx)}
  .nav-links{display:none!important}
  .nav-hamburger{display:flex!important}
  .nav-mark{flex-direction:column!important;align-items:flex-start!important;gap:1px!important}
  .nav-mark-divider{display:none!important}
  /* Hero-Banner auf Work-Seite ausblenden */
  .hero-pin{display:none!important}
  .main{min-height:auto}
  .about-bg{height:640px}
  .case-atmo{height:calc(104 * var(--fvw))}
  /* Work-Grid */
  .grid-wrap{min-height:auto;padding:104px var(--mx) 40px;align-items:flex-start}
  /* Tile-Overlay immer sichtbar auf Mobile */
  .tile-hover-overlay{opacity:1!important}
  .grid>.tile{flex:0 0 100%!important}
  /* About */
  .page.about{padding-top:clamp(110px,16vh,160px)}
  .about-statement{font-size:clamp(24px,calc(7.5 * var(--fvw)),38px)}
  /* Contact */
  .contact-page{height:auto;overflow-y:auto;flex-direction:column}
  .contact-photo-col{flex:0 0 220px;height:220px;max-width:100%}
  .contact-info-col{padding:20px var(--mx);gap:12px}
  .contact-mail{font-size:clamp(16px,calc(5 * var(--fvw)),26px);white-space:normal;max-width:100%;overflow:hidden}
  .mail-p1,.mail-p2{display:block}
  .contact-grid{grid-template-columns:1fr;gap:20px;max-width:100%}
  /* Case */
  .case-main{padding:86px var(--mx) 60px}
  .case-ttl{font-size:clamp(24px,calc(7.5 * var(--fvw)),44px)}
  .case-hero{max-height:calc(50 * var(--fvw))}
  /* Footer */
  .foot{padding:24px var(--mx)}
  .foot-row{flex-direction:column;align-items:flex-start;gap:6px}
  .foot-legal{gap:12px}
  /* Lightbox */
  .lightbox{padding:8px}
  .lb-window{width:calc(100vw - 16px)!important}
  .lb-close{top:-26px;font-size:9px}
  .stills-lb-win{width:calc(100vw - 16px)!important}
  .stills-lb-inner{max-width:calc(100vw - 16px)}
  .stills-lb-img{max-height:calc(56 * var(--fvw))}
  /* Laurels */
  .laurels-row{flex-wrap:wrap;justify-content:center;gap:10px}
  .laurel-wrap{height:68px}
  .laurel-slot-wrap{height:68px;width:68px}
  /* Credits kleiner */
  .film-credits-body{padding:0 4px;line-height:.85}
  .film-credit-name{font-size:9px}
  .film-credit-job{font-size:6px}
  /* More Work */
  .case-next-item{width:50%!important}
  .case-next-thumb-overlay{opacity:1!important;padding:8px 10px}
  .case-next-thumb-overlay .case-next-ttl{font-size:13px}
  .case-next-thumb-overlay .case-next-cat{font-size:7px;margin-bottom:1px}
  /* Awards mobile */
  .awards-block .filmo-open{grid-template-columns:52px 1fr!important;gap:2px 12px}
  .awards-block .filmo-ttl{display:none!important}
  .awards-block .filmo-role{grid-column:2!important;text-align:left!important}
  .awards-block .filmo-meta{grid-column:2!important;text-align:left!important}
  /* Filter Dropdown */
  .filmo-filters{display:none!important}
  .filmo-select{display:block!important}
  /* DSGVO Consent Dialog */
  .lb-frame--consent{aspect-ratio:unset;height:auto}
  .lb-consent{position:relative;inset:auto;text-align:left;overflow:hidden}
  .lb-consent-inner{padding:20px 16px;gap:10px;max-width:100%;width:100%;box-sizing:border-box;align-items:flex-start}
  .lb-consent-kicker{text-align:left}
  .lb-consent-ttl{font-size:15px;text-align:left}
  .lb-consent-txt{font-size:11px;max-width:100%;text-align:left}
  .lb-consent-actions{flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .lb-load{text-align:center;padding:14px 20px;width:100%;box-sizing:border-box}
  .lb-privacy{text-align:center}
  .lb-remember{flex-wrap:wrap}
}

@keyframes imgFadeIn{from{opacity:0}to{opacity:1}}
img{opacity:0;transition:opacity .45s ease}
img.img-visible{opacity:1}
/* Hero-Bilder: von der generischen Einblendung ausgenommen (siehe main.js).
   Nur die Ebenen-Ueberblendung (.hero-layer) animiert sie — sonst Flackern. */
/* Hero-Bilder wie in der Referenz: kein Farbfilter, kein generisches Einblenden. */
.hero-frame .still-base{opacity:1;transition:none}


/* Container-query scaling: makes vw-based typography/spacing resolve against the
   .site frame (390px in mobile preview) instead of the real browser window. */


/* ── Static export additions ── */
/* Sprachumschaltung: <html lang="de"> zeigt .de, versteckt .en (und umgekehrt) */
html[lang="de"] .en{display:none !important}
html[lang="en"] .de{display:none !important}
/* Sprachwechsel: NUR die tatsaechlich wechselnden Textinhalte faden aus/ein —
   das sind die Sprach-Spans .de/.en (ihr Inhalt wird beim Wechsel getauscht).
   Statische Texte (z. B. Eigennamen, Jahreszahlen, nicht uebersetzte Titel),
   Bilder und alle anderen Elemente bleiben unveraendert stehen.
   (main.js setzt .lang-anim auf <html>.) */
.de,.en{transition:opacity .2s ease}
html.lang-anim .de,html.lang-anim .en{opacity:0}

.gallery-slot img,.case-atmo>img,.about-bg-inner img,.portrait-slot-full img,.contact-photo-col>img{width:100%;height:100%;object-fit:cover;display:block}
.case-atmo>img{position:absolute;inset:0;object-position:center top}
.laurel-slot-wrap img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;margin:auto}
.hero-item:focus-visible .hero-item-ttl{text-decoration:underline;text-underline-offset:4px}
.tile{cursor:pointer}