/* =============================================================
   summit.tirol — a BAD Reality Studios experience
   Design system & layout
   ============================================================= */

/* ---------- Fonts (self-hosted, kein externes CDN) ---------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrumentserif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/instrumentserif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/instrumentserif-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --ink:#08080a;
  --ink-2:#0e0e11;
  --ink-3:#15151a;
  --paper:#f2f0eb;
  --paper-2:#e8e5de;
  --stone:#8b8781;

  /* Akzentfarbe, je nach Untergrund. Auf Schwarz die BAD Reality Studios
     Primary; auf Off-White ein tiefes Blau, weil reines #fcdf00 dort nur
     auf 1,2:1 Kontrast käme. --action bleibt immer die Primary: sie liegt
     ausschließlich als Fläche unter dunkler Schrift (Buttons im Hover). */
  --action:#fcdf00;
  --accent-on-ink:#fcdf00;
  --accent-on-paper:#163a70;
  --accent:var(--accent-on-ink);

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --fs-display:clamp(3rem,11.4vw,12.5rem);
  --fs-md:clamp(2.35rem,6.6vw,7.5rem);
  --fs-sm:clamp(1.7rem,3.6vw,3.75rem);
  --fs-lead:clamp(1.0625rem,.95rem + .55vw,1.5rem);
  --fs-body:clamp(1rem,.96rem + .18vw,1.125rem);
  --fs-micro:.6875rem;

  --pad-x:clamp(1.25rem,4.6vw,6rem);
  --pad-y:clamp(5.5rem,12vh,11rem);
  --gutter:clamp(1rem,1.8vw,2rem);
  --maxw:1620px;

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:1.05s;

  --fg:var(--paper);
  --bg:var(--ink);
  --dim:rgba(242,240,235,.56);
  --line:rgba(242,240,235,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:var(--fs-body);font-weight:400;
  line-height:1.55;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-variant-ligatures:common-ligatures;
}
img,video,canvas{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,p,ul,ol,figure,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--action);color:var(--ink)}
:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:1px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:.75rem;left:.75rem;z-index:200;padding:.75rem 1.25rem;background:var(--paper);color:var(--ink);transform:translateY(-160%);transition:transform .3s var(--ease)}
.skip:focus{transform:none}

/* ---------- Theme surfaces ---------- */
.sect--ink{background:var(--ink);color:var(--paper);--fg:var(--paper);--bg:var(--ink);--dim:rgba(242,240,235,.56);--line:rgba(242,240,235,.16);--accent:var(--accent-on-ink)}
.sect--paper{background:var(--paper);color:var(--ink);--fg:var(--ink);--bg:var(--paper);--dim:rgba(8,8,10,.58);--line:rgba(8,8,10,.14);--accent:var(--accent-on-paper)}

/* ---------- Layout primitives ---------- */
.shell{width:min(100% - var(--pad-x) * 2,var(--maxw));margin-inline:auto}
.shell-wide{width:min(100% - var(--pad-x),1920px);margin-inline:auto}
.sect{padding-block:var(--pad-y)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}

/* ---------- Type ---------- */
.display{
  font-family:var(--sans);font-weight:500;font-size:var(--fs-md);
  line-height:.92;letter-spacing:-.038em;text-wrap:balance;
}
.hero__title{font-size:var(--fs-display);line-height:.88;letter-spacing:-.045em}
.contact__title{font-size:clamp(2.6rem,7.6vw,8.5rem);line-height:.9;letter-spacing:-.042em}
.display--md{font-size:var(--fs-md)}
.display--sm{font-size:var(--fs-sm);line-height:.98;letter-spacing:-.03em}
.display em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.07em;letter-spacing:-.012em;color:var(--accent);
}
.lead{font-size:var(--fs-lead);line-height:1.4;letter-spacing:-.015em;color:var(--fg);max-width:38ch}
p{color:var(--dim);max-width:56ch}
.micro{
  font-size:var(--fs-micro);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;line-height:1.4;color:var(--dim);
}
.sect__idx{margin-bottom:clamp(2rem,5vh,4rem)}
.sect__idx span{opacity:.45;padding-inline:.35em}

/* ---------- Buttons & links ---------- */
.btn{
  --btn-fg:var(--ink);--btn-bg:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 1.9rem;border-radius:2px;
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease);
}
.btn--solid{background:var(--btn-bg);color:var(--btn-fg)}
.btn--solid::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--action);
  transform:translateY(101%);transition:transform .6s var(--ease);
}
.btn--solid:hover::after,.btn--solid:focus-visible::after{transform:none}
.btn--ghost{border:1px solid var(--line);color:var(--fg)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--action);border-color:var(--action);color:var(--ink)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  padding-block:.9em;border-bottom:1px solid var(--line);color:var(--fg);
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.link-arrow span{transition:transform .5s var(--ease);display:inline-block}
.link-arrow:hover{border-color:var(--fg)}
.link-arrow:hover span{transform:translateX(.45em)}

/* ---------- Media ---------- */
.media{position:relative;overflow:hidden;background:var(--ink-2)}
.media__poster,.media__video{width:100%;height:100%;object-fit:cover}
.media__video{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.media__video.is-playing{opacity:1}
.media--fill{position:absolute;inset:0}
.media--fill .media__poster{position:absolute;inset:0}
.media--portrait{aspect-ratio:3/4}
.media--cinema{aspect-ratio:1280/534}
@media (max-width:700px){.media--cinema{aspect-ratio:16/11}}
.media--case{aspect-ratio:3/2}

/* Reveal mask for media blocks (Vorhang statt clip-path:
   ein geclipptes Element wird vom IntersectionObserver nicht erfasst) */
.js [data-reveal-media]::after{
  content:"";position:absolute;inset:-1px;z-index:2;background:var(--bg);
  transform-origin:50% 100%;transition:transform 1.3s var(--ease);
}
.js [data-reveal-media].is-in::after{transform:scaleY(0)}
.js [data-reveal-media] .media__poster{transform:scale(1.12);transition:transform 1.9s var(--ease)}
.js [data-reveal-media].is-in .media__poster{transform:none}

.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reveals ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.l{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.js [data-reveal-lines] .t{display:block;transform:translateY(108%);transition:transform 1.2s var(--ease)}
.js [data-reveal-lines].is-in .t{transform:none}
.js [data-reveal-lines].is-in .l:nth-child(2) .t{transition-delay:.09s}
.js [data-reveal-lines].is-in .l:nth-child(3) .t{transition-delay:.18s}
.js [data-reveal-lines].is-in .l:nth-child(4) .t{transition-delay:.27s}

/* =============================================================
   HEADER
   ============================================================= */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,2vh,1.6rem) var(--pad-x);
  color:var(--paper);
  transition:color .5s var(--ease),transform .6s var(--ease);
}
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  inset:0 0 -70px 0;
  background:linear-gradient(to bottom,rgba(8,8,10,.72) 0%,rgba(8,8,10,.42) 45%,rgba(8,8,10,0) 100%);
  opacity:1;transition:opacity .6s var(--ease);
}
.site-head.is-light{color:var(--ink);--accent:var(--accent-on-paper)}
.site-head.is-light::before{opacity:0}

.brand{display:flex;align-items:center;gap:clamp(.55rem,1.2vw,1rem)}
.brand__home{display:flex;align-items:center;gap:clamp(.5rem,1vw,.85rem)}

/* Signet: Haarlinien-Grat über einer Horizontlinie in einem offenen Ring.
   Der Ring hat seine Lücke genau in Gipfelrichtung, der Akzentpunkt sitzt auf
   dem Gipfel und greift den Punkt in „summit.tirol" auf. Alle Stärken bewusst
   unter 1.1 — die Marke soll als Fineline neben dem Schriftzug stehen. */
.brand__sig{flex:0 0 auto;width:clamp(27px,2.3vw,34px);line-height:0}
.brand__sig svg{display:block;width:100%;height:auto;overflow:visible}
.brand__sig-ring,.brand__sig-ridge,.brand__sig-base{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.brand__sig-ring{
  stroke-width:.72;opacity:.34;stroke-dasharray:.96 .04;stroke-dashoffset:.17;
  transform-box:fill-box;transform-origin:50% 50%;
  transition:transform 1.2s var(--ease),opacity .5s var(--ease);
}
.brand__sig-base{stroke-width:.62;opacity:.38;transition:opacity .4s var(--ease)}
.brand__sig-ridge{stroke-width:.9;transition:stroke-width .4s var(--ease)}
.brand__sig-dot{
  fill:var(--accent);transform-box:fill-box;transform-origin:50% 50%;
  transition:transform .55s var(--ease);
}
.brand__home:hover .brand__sig-ring,.brand__home:focus-visible .brand__sig-ring{transform:rotate(-120deg);opacity:.55}
.brand__home:hover .brand__sig-base,.brand__home:focus-visible .brand__sig-base{opacity:.55}
.brand__home:hover .brand__sig-dot,.brand__home:focus-visible .brand__sig-dot{transform:scale(1.45)}
.brand__home:hover .brand__sig-ridge,.brand__home:focus-visible .brand__sig-ridge{stroke-width:1.1}

/* Einmaliger Auftritt beim Laden: die Marke fährt auf, Horizont und Grat
   zeichnen sich nacheinander. Hover läuft über Transitions auf Ring und Punkt —
   die tragen bewusst keine Animation, sonst würde deren Endzustand die
   Transition überschreiben. */
.js .brand__sig svg{animation:sigIn 1s var(--ease) both}
.js .brand__sig-base{stroke-dasharray:1;stroke-dashoffset:1;animation:sigDraw 1s var(--ease) .2s forwards}
.js .brand__sig-ridge{stroke-dasharray:1;stroke-dashoffset:1;animation:sigDraw 1.3s var(--ease) .35s forwards}
@keyframes sigIn{from{opacity:0;transform:translateY(3px) scale(.92)}to{opacity:1;transform:none}}
@keyframes sigDraw{to{stroke-dashoffset:0}}
.brand__mark{
  font-size:clamp(.95rem,1.15vw,1.15rem);font-weight:500;letter-spacing:-.03em;white-space:nowrap;
}
.brand__mark i{font-style:normal;color:var(--accent)}
.brand__mark span:last-child{opacity:.7}
.brand__mark--lg{font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.04em;display:block}
.brand__rule{width:clamp(18px,2.4vw,42px);height:1px;background:currentColor;opacity:.3}
.brand__by{display:flex;align-items:center;gap:.55rem;transition:opacity .4s var(--ease)}
.brand__by:hover,.brand__by:focus-visible{opacity:.65}
.brand__by .micro{font-size:.5625rem;letter-spacing:.2em;color:inherit;opacity:.45}
.brand__logo{width:clamp(96px,9vw,132px);height:auto;filter:invert(1);opacity:.95}
.site-head.is-light .brand__logo{filter:none;opacity:.75}
@media (max-width:720px){.brand__rule,.brand__by{display:none}}

.site-nav{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.25rem)}
.site-nav__cta{
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  padding:.6em 0;border-bottom:1px solid transparent;transition:border-color .4s var(--ease);
}
.site-nav__cta:hover{border-color:currentColor}
@media (max-width:640px){.site-nav__cta{display:none}}

.menu-btn{display:flex;align-items:center;gap:.7rem;padding:.6em 0;min-height:44px}
.menu-btn__label{font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.18em}
.menu-btn__bars{display:grid;gap:5px;width:22px}
.menu-btn__bars i{
  display:block;height:1px;background:currentColor;
  transform-origin:50% 50%;transition:transform .45s var(--ease);
}
/* Beide Balken wandern in die Mitte (3px) und kreuzen sich zu einem echten X. */
.menu-btn[aria-expanded="true"] .menu-btn__bars i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu-btn:hover .menu-btn__bars i:first-child{transform:translateY(-1px)}
.menu-btn:hover .menu-btn__bars i:last-child{transform:translateY(1px)}
.menu-btn[aria-expanded="true"]:hover .menu-btn__bars i:first-child{transform:translateY(3px) rotate(135deg)}
.menu-btn[aria-expanded="true"]:hover .menu-btn__bars i:last-child{transform:translateY(-3px) rotate(45deg)}

/* ---------- Overlay nav ---------- */
.overlay-nav{
  position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--paper);
  display:flex;align-items:flex-end;
  padding:calc(var(--pad-x) + 4rem) var(--pad-x) var(--pad-x);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .9s var(--ease),visibility 0s linear .9s;
}
.overlay-nav.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition-delay:0s,0s}
.overlay-nav__inner{width:min(100%,var(--maxw));margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:3rem}
.overlay-nav__list{display:grid;gap:clamp(.35rem,1.2vh,1rem)}
.overlay-nav__list a{
  display:flex;align-items:baseline;gap:clamp(.8rem,2vw,2rem);
  font-size:clamp(2rem,5.6vw,5.5rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;
  opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .8s var(--ease),color .4s var(--ease);
}
.overlay-nav.is-open .overlay-nav__list a{opacity:1;transform:none}
.overlay-nav__list li:nth-child(1) a{transition-delay:.12s}
.overlay-nav__list li:nth-child(2) a{transition-delay:.17s}
.overlay-nav__list li:nth-child(3) a{transition-delay:.22s}
.overlay-nav__list li:nth-child(4) a{transition-delay:.27s}
.overlay-nav__list li:nth-child(5) a{transition-delay:.32s}
.overlay-nav__list li:nth-child(6) a{transition-delay:.37s}
.overlay-nav__list li:nth-child(7) a{transition-delay:.42s}
.overlay-nav__list a:hover .lbl{color:var(--accent)}
.overlay-nav__list .idx{font-size:var(--fs-micro);letter-spacing:.2em;color:var(--dim);font-weight:500}
.overlay-nav__meta{display:grid;gap:.35rem;text-align:right}
.overlay-nav__meta p{color:var(--dim);max-width:none}
.overlay-nav__meta a:hover{color:var(--paper)}
@media (max-width:820px){.overlay-nav__meta{text-align:left}}

/* =============================================================
   01 — HERO
   ============================================================= */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--pad-x) + 5rem) var(--pad-x) clamp(2rem,5vh,4rem);
  overflow:hidden;isolation:isolate;
}
.hero__media{
  position:absolute;inset:-10% 0;z-index:-1;
  will-change:transform;transform-origin:50% 40%;
  backface-visibility:hidden;
}
/* Langsames Heranfahren beim Laden — läuft einmal und überlagert sich
   mit der Scroll-Skalierung, die auf .hero__media liegt. */
.hero__media .media--fill{animation:heroSettle 2.6s cubic-bezier(.16,1,.3,1) both}
@keyframes heroSettle{from{transform:scale(1.07)}to{transform:none}}
/* Zieht die Bühne beim Wegscrollen ins Schwarz der nächsten Section. */
.hero__fade{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}
.hero.is-parked .hero__media,
.hero.is-parked .hero__body,
.hero.is-parked .hero__foot{will-change:auto}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(8,8,10,.94) 0%,rgba(8,8,10,.62) 32%,rgba(8,8,10,.34) 62%,rgba(8,8,10,.72) 100%),
    linear-gradient(to right,rgba(8,8,10,.72),rgba(8,8,10,.12) 68%),
    rgba(8,8,10,.16);
}
.hero__body{
  position:relative;max-width:min(100%,var(--maxw));margin-inline:auto;width:100%;
  will-change:transform,opacity;
}
.js .hero__title{will-change:transform}
.hero__brandline{
  font-size:var(--fs-micro);font-weight:500;text-transform:uppercase;letter-spacing:.22em;
  color:rgba(242,240,235,.72);margin-bottom:clamp(1.25rem,3vh,2.25rem);
}
.hero__title{margin-bottom:clamp(1.5rem,4vh,2.75rem);max-width:14ch}
.hero__disciplines{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55em;max-width:none;
  font-size:clamp(.8rem,.75rem + .35vw,1rem);font-weight:500;letter-spacing:.06em;
  color:rgba(242,240,235,.82);text-transform:none;
}
.hero__disciplines i{font-style:normal;opacity:.45}
.hero__region{
  margin-left:.35em;padding-left:1em;border-left:1px solid rgba(242,240,235,.25);
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.2em;color:rgba(242,240,235,.6);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,4vh,2.75rem)}
@media (max-width:520px){.hero__actions{gap:.6rem}.hero__actions .btn{flex:1 0 100%}}
.hero__foot{
  position:relative;display:flex;align-items:center;gap:.9rem;
  max-width:min(100%,var(--maxw));margin:clamp(2.5rem,7vh,5rem) auto 0;width:100%;
  will-change:opacity;
}
.hero__foot-note{color:rgba(242,240,235,.5)}
.scroll-hint{display:block;width:1px;height:38px;background:rgba(242,240,235,.25);position:relative;overflow:hidden}
.scroll-hint i{position:absolute;inset:0;background:var(--paper);animation:scrollLine 2.6s var(--ease) infinite}
@keyframes scrollLine{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (max-width:640px){
  .hero{min-height:100svh}
  .hero__title{max-width:none}
}

/* =============================================================
   02 — EXPERIENCE
   ============================================================= */
.experience__grid{row-gap:clamp(2rem,5vh,4rem)}
.experience .sect__idx{grid-column:1/-1}
.experience__title{grid-column:1/9}
.experience__media{grid-column:9/13;grid-row:2/4;align-self:start}
.experience__text{grid-column:2/8;display:grid;gap:1.15rem;margin-top:clamp(1rem,4vh,3rem)}
.experience__media figcaption{margin-top:.9rem}
.sig{
  color:var(--fg);font-weight:600;letter-spacing:.16em;margin-top:1rem;
  padding-top:1.25rem;border-top:1px solid var(--line);max-width:none;
}
@media (max-width:900px){
  .experience__title{grid-column:1/-1}
  .experience__media{grid-column:1/-1;grid-row:auto;max-width:26rem}
  .experience__text{grid-column:1/-1}
}

/* =============================================================
   03 — FILM
   ============================================================= */
.film{padding-block:var(--pad-y)}
.film__title{margin-bottom:clamp(2.5rem,7vh,5rem)}
.film__band{width:min(100% - var(--pad-x),2200px);margin-inline:auto}
.film__foot{margin-top:clamp(2.5rem,6vh,4.5rem);row-gap:2.5rem}
.film__lead{grid-column:1/7}
.terms{
  grid-column:8/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gutter);align-content:start;
}
.terms li{
  padding:1.05em 0;border-top:1px solid var(--line);
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  color:var(--fg);
}
@media (max-width:900px){
  .film__lead{grid-column:1/-1}
  .terms{grid-column:1/-1}
}

/* =============================================================
   04 — DRONE
   ============================================================= */
.drone{position:relative;height:260vh;background:var(--ink);color:var(--paper);--dim:rgba(242,240,235,.6);--line:rgba(242,240,235,.16);--accent:var(--accent-on-ink)}
.drone__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.drone__media{position:absolute;inset:0;will-change:transform}
.drone__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(8,8,10,.95) 6%,rgba(8,8,10,.45) 46%,rgba(8,8,10,.2) 72%,rgba(8,8,10,.6) 100%),
    linear-gradient(to right,rgba(8,8,10,.66),rgba(8,8,10,0) 60%);
}
.drone__copy .sect__idx{color:rgba(242,240,235,.72)}
.drone__copy{position:relative;padding-bottom:clamp(2rem,5vh,3.5rem)}
.drone__copy .lead{margin-top:clamp(1.25rem,3vh,2rem)}
.drone__uses{
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  width:min(100% - var(--pad-x) * 2,var(--maxw));margin:0 auto clamp(1.5rem,4vh,2.5rem);
  border-top:1px solid var(--line);
}
.drone__uses li{
  padding:1.1rem .5rem 0 0;display:grid;gap:.4rem;align-content:start;
  opacity:.28;transition:opacity .7s var(--ease),transform .7s var(--ease);transform:translateY(8px);
}
.drone__uses li.is-on{opacity:1;transform:none}
.drone__uses .lbl{font-size:clamp(.8rem,1vw,1.05rem);font-weight:500;letter-spacing:-.01em}
.drone__uses .idx{color:var(--accent)}
@media (max-width:820px){
  .drone{height:220vh}
  .drone__uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .drone__uses li{padding-block:.85rem;border-bottom:1px solid var(--line)}
  .drone__uses li:nth-last-child(-n+1){border-bottom:0}
}

/* =============================================================
   05 — 360
   ============================================================= */
.tour{padding-block:var(--pad-y);background:var(--ink);color:var(--paper)}
.tour__head{row-gap:clamp(1.5rem,4vh,2.5rem)}
.tour .sect__idx{grid-column:1/-1}
.tour__title{grid-column:1/8}
.tour__intro{grid-column:8/13;align-self:end;padding-bottom:.35rem}
@media (max-width:900px){.tour__title,.tour__intro{grid-column:1/-1}}

.tour__viewer{margin-top:clamp(2.5rem,6vh,4.5rem)}
.pano{
  position:relative;aspect-ratio:16/9;max-height:82svh;overflow:hidden;
  background:#0b0b0e;border:1px solid var(--line);
  touch-action:pan-y;cursor:grab;
}
.pano.is-dragging{cursor:grabbing}
.pano__canvas{position:absolute;inset:0;width:100%;height:100%}
.pano__hotspots{position:absolute;inset:0;pointer-events:none}
.pano__chrome{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}
.pano__chrome > *{pointer-events:auto}
.pano__topbar{display:flex;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.2vw,1.75rem);pointer-events:none}
.pano__scene{color:var(--paper);letter-spacing:.22em}
.pano__note{color:rgba(242,240,235,.45)}
.pano__hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.7rem;color:rgba(242,240,235,.8);
  padding:.7rem 1.1rem;background:rgba(8,8,10,.42);backdrop-filter:blur(6px);
  transition:opacity .6s var(--ease);pointer-events:none;
}
.pano__hint.is-gone{opacity:0}
.pano__hint-icon{width:26px;height:1px;background:currentColor;position:relative}
.pano__hint-icon::before,.pano__hint-icon::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor}
.pano__hint-icon::before{left:0;transform:rotate(-135deg)}
.pano__hint-icon::after{right:0;transform:rotate(45deg)}
.pano__scenes{
  display:flex;gap:.4rem;flex-wrap:wrap;padding:clamp(1rem,2.2vw,1.75rem);
  background:linear-gradient(to top,rgba(8,8,10,.75),rgba(8,8,10,0));
}
.pano__scenes button{
  min-height:38px;padding:.5rem .95rem;border:1px solid rgba(242,240,235,.2);border-radius:2px;
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(242,240,235,.7);transition:color .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease);
}
.pano__scenes button:hover{color:var(--action);border-color:var(--action)}
.pano__scenes button[aria-current="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.pano__spot{
  position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
  width:44px;height:44px;display:grid;place-items:center;
}
.pano__spot::before{content:"";width:11px;height:11px;border:1px solid var(--paper);border-radius:50%;background:rgba(242,240,235,.18);transition:transform .4s var(--ease),background-color .4s var(--ease)}
.pano__spot::after{content:"";position:absolute;width:11px;height:11px;border:1px solid rgba(242,240,235,.6);border-radius:50%;animation:spotPulse 2.8s var(--ease) infinite}
.pano__spot:hover::before{transform:scale(1.5);background:var(--paper)}
.pano__spot span{position:absolute;left:calc(100% - 6px);white-space:nowrap;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);opacity:0;transform:translateX(-4px);transition:opacity .4s var(--ease),transform .4s var(--ease);text-shadow:0 1px 12px rgba(0,0,0,.8)}
.pano__spot:hover span,.pano__spot:focus-visible span{opacity:1;transform:none}
@keyframes spotPulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.pano__fallback{padding:2rem;color:var(--dim)}

@media (max-width:760px){
  .pano{aspect-ratio:4/5;max-height:72svh}
  .pano__topbar{flex-direction:column;gap:.25rem;padding:1rem 1rem .5rem}
  .pano__note{opacity:.8}
  .pano__hint{top:auto;bottom:5.25rem;transform:translateX(-50%);font-size:.625rem;white-space:nowrap}
  .pano__scenes{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding:1rem;
  }
  .pano__scenes::-webkit-scrollbar{display:none}
  .pano__scenes li{flex:0 0 auto}
  .pano__spot span{display:none}
}

.tour__foot{margin-top:clamp(2.5rem,6vh,4rem);row-gap:2.5rem}
.tour__rooms{
  grid-column:1/8;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--gutter);align-content:start;
}
.tour__rooms li{
  padding:1.05em 0;border-top:1px solid var(--line);
  font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--fg);
}
.tour__cta{grid-column:9/13;display:grid;gap:1.25rem;align-content:start}
@media (max-width:900px){.tour__rooms,.tour__cta{grid-column:1/-1}}

/* =============================================================
   06 — THREE PERSPECTIVES
   ============================================================= */
.persp{background:var(--paper);color:var(--ink);padding-block:var(--pad-y)}
.persp__sticky{width:min(100% - var(--pad-x) * 2,var(--maxw));margin-inline:auto}
.persp__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.persp__list{display:grid;gap:clamp(2.5rem,6vh,5rem)}
.persp__item{display:grid;grid-template-columns:auto 1fr;gap:.5rem clamp(1.5rem,4vw,4rem);align-items:baseline}
.persp__idx{color:var(--stone);font-weight:500}
.persp__label{
  grid-column:2;font-size:var(--fs-micro);font-weight:600;text-transform:uppercase;letter-spacing:.2em;color:var(--stone);
}
.persp__line{grid-column:2}
.persp__visuals{position:relative;aspect-ratio:4/5;background:var(--paper-2);overflow:hidden}
/* Ohne JS bzw. ohne Scroll-Choreografie bleibt nur das erste Visual stehen. */
html:not(.can-sticky) .persp__visual:not(:first-child){display:none}
.persp__visual{position:absolute;inset:0;margin:0}
.persp__visual img{width:100%;height:100%;object-fit:cover}
.persp__sum{
  margin-top:clamp(3rem,8vh,6rem);padding-top:clamp(1.5rem,4vh,2.5rem);
  border-top:1px solid var(--line);color:var(--ink);
}
.persp__progress{display:none}
@media (max-width:820px){
  .persp__stage{grid-template-columns:1fr;gap:clamp(1.5rem,4vh,2.5rem)}
  .persp__visuals{aspect-ratio:16/11;order:-1}
}

/* JS-enhanced sticky mode */
.js.can-sticky .persp{height:320vh;padding-block:0}
@media (max-width:820px){.js.can-sticky .persp{height:250vh}}
.js.can-sticky .persp__sticky{
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(4.5rem,11vh,7rem);
}
.js.can-sticky .persp__stage{flex:0 1 auto}
.js.can-sticky .persp__list{display:block;position:relative;min-height:clamp(11rem,26vh,17rem)}
.js.can-sticky .persp__item{
  position:absolute;inset:auto 0 auto 0;top:50%;translate:0 -50%;
  opacity:0;transition:opacity .55s var(--ease);will-change:opacity,transform;
}
.js.can-sticky .persp__item.is-active{opacity:1}
.js.can-sticky .persp__visual{
  opacity:0;transform:scale(1.06);
  transition:opacity .8s var(--ease),transform 1.2s var(--ease);
}
.js.can-sticky .persp__visual.is-active{opacity:1;transform:none}
.js.can-sticky .persp__sum{
  margin-top:clamp(2rem,5vh,3rem);opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
.js.can-sticky .persp__sum.is-in{opacity:1;transform:none}
.js.can-sticky .persp__progress{
  display:block;height:1px;background:var(--line);margin-top:clamp(1.5rem,4vh,2.5rem);position:relative;
}
.js.can-sticky .persp__progress span{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink);transition:width .2s linear}

/* =============================================================
   07 — SHOWCASE
   ============================================================= */
.work{padding-block:var(--pad-y) 0;background:var(--ink);color:var(--paper);--dim:rgba(242,240,235,.56);--line:rgba(242,240,235,.16)}
.work__head{margin-bottom:clamp(2.5rem,6vh,4rem)}
.work__scroller{padding-bottom:var(--pad-y)}
.work__sticky{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.work__sticky::-webkit-scrollbar{display:none}
.work__rail{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.5rem);padding-inline:var(--pad-x);width:max-content}
.case{flex:0 0 auto;width:clamp(17rem,40vw,44rem);scroll-snap-align:center}
.case--end{width:clamp(15rem,26vw,26rem);display:flex;align-items:center}
.case__link{display:block}
.case .media{background:var(--ink-3)}
.case .media__poster{transition:transform 1.4s var(--ease)}
.case__link:hover .media__poster{transform:scale(1.05)}
.case__meta{display:grid;grid-template-columns:auto 1fr;gap:.15rem 1.25rem;padding-top:1.25rem;align-items:baseline}
.case__no{grid-row:1/3;color:var(--accent)}
.case__name{font-size:clamp(1.15rem,1.9vw,1.9rem);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.case__place{grid-column:2}
.case__tags{grid-column:2;display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.7rem}
.case__tags li{color:var(--dim)}
.case__tags li + li::before{content:"·";margin-right:.9rem;opacity:.5}
.case__end{display:grid;gap:1rem;justify-items:start;padding-right:var(--pad-x)}
.case__end .display{color:var(--paper)}

/* JS-enhanced horizontal pin — nur ab Tablet/Desktop.
   Mobil bleibt der native, gesnappte Querscroll erhalten. */
@media (min-width:821px){
  .js.can-sticky .work__scroller{padding-bottom:0}
  .js.can-sticky .work__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;scroll-snap-type:none}
  .js.can-sticky .work__rail{will-change:transform}
}
@media (max-width:820px){
  .case{width:min(82vw,26rem)}
  .case--end{width:min(64vw,20rem)}
  .work__rail{align-items:stretch}
  .case .media,.media--case{aspect-ratio:4/5}
}

/* =============================================================
   08 — WHY IT MATTERS
   ============================================================= */
.why__grid{row-gap:clamp(2rem,5vh,3.5rem)}
.why .sect__idx{grid-column:1/-1}
.why__title{grid-column:1/8}
.why__lead{grid-column:8/13;align-self:end;padding-bottom:.4rem}
.index{grid-column:1/-1;margin-top:clamp(2rem,6vh,4.5rem);border-top:1px solid var(--line)}
.index__row{
  display:grid;grid-template-columns:5rem minmax(0,26ch) minmax(0,1fr);
  gap:.5rem clamp(1.5rem,4vw,4rem);align-items:baseline;
  padding-block:clamp(1.5rem,3.2vh,2.35rem);border-bottom:1px solid var(--line);
}
.index__no{color:var(--accent)}
.index__t{font-size:clamp(1.05rem,1.6vw,1.5rem);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.index__d{color:var(--dim);max-width:52ch}
@media (max-width:900px){
  .why__title,.why__lead{grid-column:1/-1}
  .index__row{grid-template-columns:2.75rem 1fr;gap:.35rem 1rem}
  .index__d{grid-column:2}
}

/* =============================================================
   09 — STUDIO
   ============================================================= */
.studio{padding-block:var(--pad-y);background:var(--ink);color:var(--paper)}
.studio__inner{display:grid;justify-items:start}
.studio__logo{margin-bottom:clamp(2rem,5vh,3.5rem)}
.studio__logo a{display:inline-block;transition:opacity .4s var(--ease)}
.studio__logo a:hover{opacity:.7}
.studio__logo img{width:clamp(190px,26vw,380px);filter:invert(1)}
.studio__title{margin-bottom:clamp(2rem,5vh,3.25rem);max-width:16ch}
.studio__text{display:grid;gap:1.15rem;max-width:60ch}
.studio__sig{color:var(--fg);font-weight:500;letter-spacing:-.01em}
.studio__sig span{color:var(--accent);padding-inline:.35em}
.studio__claim{
  margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.5rem;border-top:1px solid var(--line);
  width:100%;max-width:none;letter-spacing:.34em;color:var(--dim);
}
.studio__claim i{font-style:normal;color:var(--accent);padding-inline:.2em}
.studio__link{margin-top:1.5rem}

/* =============================================================
   10 — CONTACT
   ============================================================= */
.contact{padding-block:var(--pad-y);background:var(--paper);color:var(--ink)}
.contact__title{margin-bottom:clamp(3rem,8vh,6rem);max-width:16ch}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:start;
}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr;gap:2.5rem}}

.contact__direct{display:grid;gap:.35rem;align-content:start}
.contact__direct > .micro{margin-bottom:1rem}
.contact__mail a,.contact__tel a{
  display:inline-block;font-weight:500;letter-spacing:-.035em;line-height:1.05;
  padding-bottom:.1em;position:relative;
}
.contact__mail a{font-size:clamp(1.75rem,4.2vw,3.4rem)}
.contact__tel a{font-size:clamp(1.3rem,2.6vw,2.1rem);color:var(--dim)}
.contact__mail a::after,.contact__tel a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease);
}
.contact__mail a:hover::after,.contact__tel a:hover::after,
.contact__mail a:focus-visible::after,.contact__tel a:focus-visible::after{transform:none}
.contact__tel{margin-top:.6rem}
.contact__hint{margin-top:2rem;font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.012em;max-width:44ch}

.contact__card{
  display:grid;gap:.9rem;align-content:start;
  padding-top:1.5rem;border-top:1px solid var(--line);
}
.contact__addr{color:var(--fg);line-height:1.8;max-width:none}
.contact__hours{color:var(--dim);padding-top:1.25rem;margin-top:.35rem;border-top:1px solid var(--line)}
.contact__hours span{padding-inline:.35em;opacity:.5}

.contact__topics{margin-top:clamp(3.5rem,9vh,6rem)}
.contact__topics > .micro{margin-bottom:1.5rem}
.topics{border-top:1px solid var(--line)}
.topics a{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(1.1rem,2.6vh,1.75rem);border-bottom:1px solid var(--line);
  transition:padding-left .6s var(--ease);
}
.topics__lbl{
  font-size:clamp(1.15rem,2.6vw,2.35rem);font-weight:500;letter-spacing:-.032em;line-height:1.1;
}
.topics__arrow{
  font-size:clamp(1rem,1.6vw,1.5rem);color:var(--stone);
  transition:transform .6s var(--ease),color .5s var(--ease);
}
.topics a:hover,.topics a:focus-visible{padding-left:clamp(.5rem,1.6vw,1.5rem)}
.topics a:hover .topics__arrow,.topics a:focus-visible .topics__arrow{transform:translateX(.35em);color:var(--ink)}
.topics__note{margin-top:1.5rem;letter-spacing:.02em;text-transform:none;font-size:.8125rem;color:var(--dim)}

@media (max-width:760px){
  /* Komfortable Touch-Ziele für die beiden Hauptkontakte */
  .contact__mail a,.contact__tel a{display:inline-flex;align-items:center;min-height:48px;padding-block:.4rem}
  .contact__mail a::after,.contact__tel a::after{bottom:.55rem}
  .contact__tel{margin-top:.15rem}
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-foot{background:var(--ink);color:var(--paper);--dim:rgba(242,240,235,.5);--line:rgba(242,240,235,.14);--accent:var(--accent-on-ink);padding-block:clamp(3.5rem,9vh,7rem) clamp(2rem,5vh,3rem)}
.site-foot__inner{display:grid;gap:clamp(2.5rem,6vh,4.5rem)}
.site-foot__brand{display:grid;gap:.75rem;justify-items:start}
.site-foot__claim{color:var(--dim);font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.2em}
.site-foot__logo-link{display:inline-block;transition:opacity .4s var(--ease)}
.site-foot__logo-link:hover{opacity:.65}
.site-foot__logo{width:clamp(150px,16vw,230px);filter:invert(1);opacity:.8;margin-top:1.25rem}
.site-foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem var(--gutter);padding-top:clamp(2rem,5vh,3rem);border-top:1px solid var(--line)}
.site-foot__cols > div{display:grid;gap:.4rem;align-content:start}
.site-foot__cols .micro{margin-bottom:.35rem}
.site-foot__cols p{color:var(--paper);max-width:none;font-size:.9375rem}
.site-foot__cols i{font-style:normal;color:var(--accent);padding-inline:.15em}
.site-foot__cols a{border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.site-foot__cols a:hover{border-color:currentColor}
.site-foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:clamp(1.5rem,4vh,2.5rem);border-top:1px solid var(--line)}
.site-foot__legal nav{display:flex;gap:1.75rem}
.site-foot__legal a{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.2em;color:var(--dim);transition:color .4s var(--ease)}
.site-foot__legal a:hover{color:var(--paper)}
@media (max-width:820px){.site-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =============================================================
   ZURÜCK NACH OBEN
   ============================================================= */
.to-top{
  position:fixed;z-index:80;
  right:max(var(--pad-x),env(safe-area-inset-right));
  bottom:max(clamp(1.25rem,3vh,2.25rem),env(safe-area-inset-bottom));
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  background:rgba(8,8,10,.88);color:var(--paper);
  border:1px solid rgba(242,240,235,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .5s,
             background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.to-top__icon{display:block;line-height:0;transition:transform .5s var(--ease)}
.to-top:hover,.to-top:focus-visible{background:var(--action);border-color:var(--action);color:var(--ink)}
.to-top:hover .to-top__icon{transform:translateY(-3px)}
/* Über dem offenen Menü hat der Knopf nichts verloren. */
.overlay-nav.is-open ~ .to-top{opacity:0;visibility:hidden;transform:translateY(12px)}
@media (max-width:640px){
  .to-top{width:48px;height:48px;right:clamp(1rem,4vw,1.5rem)}
}

/* =============================================================
   MOTION PREFERENCES
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js [data-reveal],.js [data-reveal-lines] .t{opacity:1 !important;transform:none !important}
  .js [data-reveal-media]::after{display:none}
  .js [data-reveal-media] .media__poster{transform:none !important}
  .js.can-sticky .persp{height:auto;padding-block:var(--pad-y)}
  .js.can-sticky .persp__sticky{position:static;height:auto;display:block}
  .js.can-sticky .persp__list{display:grid;min-height:0}
  .js.can-sticky .persp__item{position:static;opacity:1;translate:none}
  .js.can-sticky .persp__visual{opacity:1;transform:none}
  .js.can-sticky .persp__sum{opacity:1;transform:none;margin-top:clamp(3rem,8vh,6rem)}
  .js.can-sticky .work__sticky{position:static;height:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .drone{height:auto}
  .drone__stage{position:static;height:auto;min-height:80svh;padding-top:40svh}
  .drone__uses li{opacity:1;transform:none}
  .scroll-hint i{animation:none;transform:translateY(0)}
  .to-top,.to-top__icon{transform:none !important}
  .hero__media,.hero__media .media--fill,.hero__body,.hero__title{transform:none !important;animation:none !important}
  .hero__fade{opacity:0 !important}
  .hero__body,.hero__foot{opacity:1 !important}
  .pano__spot::after{animation:none;opacity:0}
}

/* =============================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ============================================================= */
.legal{background:var(--paper);color:var(--ink);--fg:var(--ink);--bg:var(--paper);--dim:rgba(8,8,10,.6);--line:rgba(8,8,10,.14);--accent:var(--accent-on-paper);min-height:100svh}
.legal .site-head{color:var(--ink)}
.legal .site-head::before{opacity:0}
.legal .brand__logo{filter:none;opacity:.75}
.legal__inner{padding-block:calc(var(--pad-y) * .7) var(--pad-y)}
.legal__title{margin-bottom:clamp(2.5rem,7vh,4.5rem)}
.legal__grid{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,.72fr);gap:clamp(2rem,5vw,5rem)}
@media (max-width:820px){.legal__grid{grid-template-columns:1fr;gap:2rem}}
.legal__toc{align-self:start;position:sticky;top:6rem;display:grid;gap:.55rem;align-content:start}
@media (max-width:820px){.legal__toc{position:static}}
.legal__toc a{font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.18em;color:var(--dim);padding-block:.35em;transition:color .4s var(--ease)}
.legal__toc a:hover{color:var(--ink)}
.legal__body{display:grid;gap:clamp(2rem,5vh,3.25rem);max-width:70ch}
.legal__body section{display:grid;gap:.85rem;scroll-margin-top:7rem}
.legal__body h2{font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:500;letter-spacing:-.025em;line-height:1.2;padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.legal__body h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-top:.5rem}
.legal__body p,.legal__body li{color:var(--dim);max-width:70ch}
.legal__body ul{display:grid;gap:.45rem;padding-left:1.1rem}
.legal__body li{list-style:disc}
.legal__body a{border-bottom:1px solid var(--line);transition:border-color .4s var(--ease)}
.legal__body a:hover{border-color:var(--ink)}
.legal__body strong{color:var(--ink);font-weight:600}
.legal__meta{margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.5rem;border-top:1px solid var(--line)}