:root{
  --paper:#FCFBF9;
  --ink:#191614;
  --ink-deep:#100E0C;
  --grey:#6B655E;
  --grey-inv:#9A9187;
  --rule:#E4DFD8;
  --rule-inv:#2E2823;
  --sand:#EDE4D8;
  --accent:#A8442A;
  --accent-inv:#C9613F;

  --serif:"Fraunces",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --gutter:clamp(1.25rem,5vw,5rem);
  --max:76rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .25vw,1.1rem);
  line-height:1.6;font-feature-settings:"ss01";overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.32;mix-blend-mode:multiply;
  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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
h1,h2,h3{
  font-family:var(--serif);font-weight:400;
  font-variation-settings:"SOFT" 20,"WONK" 1,"opsz" 96;
  line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance;
}
h1 i,h2 i{font-style:italic;font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 120}
a{color:inherit}
p{margin:0}
img,video{display:block;max-width:100%}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Kopfzeile ---------- */
.masthead{
  position:sticky;top:0;z-index:60;
  background:transparent;
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background-color .35s ease,color .35s ease;
}
.masthead.is-stuck{border-bottom-color:var(--rule);background:color-mix(in srgb,var(--paper) 88%,transparent)}
.masthead.on-dark{
  background:color-mix(in srgb,var(--ink-deep) 88%,transparent);
  color:var(--paper);border-bottom-color:var(--rule-inv);
}
/* Nur fuer die Navigation IN der Kopfleiste. Auf schmalen Schirmen ist sie
   eine eigene helle Flaeche - dort haette helle Schrift auf hellem Grund
   gestanden, egal welcher Abschnitt gerade hinter der Leiste liegt. */
@media(min-width:64.0625rem){
  .masthead.on-dark .nav a{color:var(--grey-inv)}
  .masthead.on-dark .nav a:hover,.masthead.on-dark .nav a:focus-visible{color:var(--paper)}
}
.masthead.on-dark .wordmark em{color:var(--accent-inv)}
.masthead .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding-block:1.3rem}
.wordmark{
  /* Grotesk wie in der Logodatei. Sobald die echte Schrift feststeht, hier tauschen. */
  font-family:var(--sans);font-weight:700;
  font-size:1.2rem;letter-spacing:-.035em;text-decoration:none;white-space:nowrap;
}
.wordmark em{font-style:italic;color:var(--accent);transition:color .35s ease}
.nav{display:flex;gap:clamp(.85rem,2vw,1.75rem);font-size:.9rem}
.nav a{position:relative;text-decoration:none;color:var(--grey);padding-block:.15rem;white-space:nowrap;transition:color .25s ease}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover,.nav a:focus-visible{color:var(--ink)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  padding-block:clamp(4.5rem,15vh,9.5rem) clamp(3.5rem,9vh,6rem);
  overflow:hidden;
  /* Grau-Beige oben, laeuft nach unten ins Papierweiss aus */
  background:linear-gradient(180deg,#EFE8DC 0%,#F6F2EA 46%,var(--paper) 88%);
}
/* Extra Korn nur im Hero */
.hero-grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E");
}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none}
.hero::before{
  width:46rem;height:34rem;top:-14rem;right:-10rem;
  background:radial-gradient(circle,rgba(120,104,86,.26),transparent 68%);
  animation:drift-a 52s ease-in-out infinite alternate;
}
/* Der warme Fleck folgt dem Zeiger, wenn einer da ist, und wandert sonst
   von allein weiter. Gesteuert wird er per Transform aus dem Skript. */
.hero-glow{
  position:absolute;left:0;top:0;z-index:-1;
  width:clamp(26rem,58vw,46rem);aspect-ratio:5/4;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(168,68,42,.22),rgba(168,68,42,.08) 42%,transparent 68%);
  filter:blur(64px);
  transform:translate3d(30%,72%,0) translate(-50%,-50%);
  transition:opacity .6s ease;
}
.hero-glow.is-near{opacity:1}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5rem,4rem,0) scale(1.12)}}

.hero h1{
  font-size:clamp(2.7rem,1.4rem + 5.6vw,6rem);max-width:15ch;
  /* Waermerer, tieferer Ton als der Fliesstext - hebt sich ab, ohne zu schreien */
  color:#33261C;
}
.hero .lede{margin-top:2rem;max-width:44ch;font-size:clamp(1.05rem,1rem + .35vw,1.25rem);color:var(--grey);line-height:1.55}
.hero-actions{margin-top:2.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.75rem}
.hero-meta{
  position:relative;margin-top:clamp(3rem,8vh,5rem);padding-top:1.25rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;
  font-size:.9rem;color:var(--grey);
}
.hero-meta i{font-family:var(--serif);font-style:italic;font-size:1rem}

/* ---------- Buttons & Links ---------- */
.btn{
  --fill:var(--accent);
  position:relative;isolation:isolate;display:inline-block;
  padding:.85rem 1.6rem;border:1px solid currentColor;border-radius:2px;
  font-size:.96rem;font-weight:500;text-decoration:none;overflow:hidden;
  transition:color .3s ease,border-color .3s ease;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);transform:translateY(101%);transition:transform .4s cubic-bezier(.2,.7,.25,1)}
.btn:hover,.btn:focus-visible{color:var(--paper);border-color:var(--fill)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.textlink{position:relative;text-decoration:none;font-size:.96rem;color:var(--grey);padding-bottom:.2rem;transition:color .25s ease}
.textlink::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .38s cubic-bezier(.2,.7,.3,1);
}
.textlink:hover,.textlink:focus-visible{color:var(--ink)}
.textlink:hover::after,.textlink:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ---------- Bänder ---------- */
.band{padding-block:clamp(4rem,10vh,7rem)}
.band + .band{border-top:1px solid var(--rule)}
.band-head{display:grid;gap:1rem;margin-bottom:clamp(2.25rem,6vh,3.5rem)}
@media(min-width:56rem){.band-head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:3rem;align-items:end}}
.band-head h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.2rem);max-width:15ch}
.band-head p{color:var(--grey);max-width:44ch}

/* ---------- Showreel ---------- */
.reel-head{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;margin-bottom:1.5rem}
.reel-head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.reel-head span{font-family:var(--serif);font-style:italic;color:var(--grey);font-size:1.05rem}
.player{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  overflow:hidden;background:var(--ink-deep);border-radius:2px;
  padding:0;border:0;cursor:pointer;
}
.player img{transition:transform .9s cubic-bezier(.2,.7,.3,1),filter .6s ease}
.player:hover img,.player:focus-visible img{transform:scale(1.03);filter:brightness(1.06)}
.player img{width:100%;height:100%;object-fit:cover}
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:5rem;height:5rem;border-radius:50%;
  border:1px solid rgba(252,251,249,.55);
  background:rgba(16,14,12,.35);backdrop-filter:blur(6px);
  color:#FCFBF9;display:grid;place-items:center;
  transition:background-color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.16,.86,.26,1);
}
.player:hover .play,.player:focus-visible .play{
  background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.09);
}
.play svg{width:1.1rem;height:1.1rem;margin-left:.18rem;fill:currentColor}
.reel-caption{margin-top:1rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;font-size:.9rem;color:var(--grey)}

/* ---------- Disziplinen, dunkles Band ---------- */
.disciplines-band{background:var(--ink-deep);color:var(--paper);padding-block:clamp(4rem,10vh,6.5rem) 0}
.disciplines-band .band-head h2{color:var(--paper)}
.disciplines-band .band-head p{color:var(--grey-inv)}
.disciplines{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule-inv);margin-top:clamp(2rem,5vh,3rem)}
@media(min-width:44rem){.disciplines{grid-template-columns:repeat(2,1fr)}}
@media(min-width:78rem){.disciplines{grid-template-columns:repeat(4,1fr)}}
.tile{
  position:relative;isolation:isolate;
  min-height:clamp(23rem,62vh,40rem);
  padding:clamp(1.75rem,3vw,2.5rem);text-decoration:none;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  border-right:1px solid var(--rule-inv);border-bottom:1px solid var(--rule-inv);
}
.tile img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) brightness(.5);transform:scale(1.02);
  transition:transform .8s cubic-bezier(.2,.7,.3,1),filter .6s ease;
}
.tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(16,14,12,.94) 10%,rgba(16,14,12,.3) 62%,rgba(16,14,12,.55));
}
.tile:hover img,.tile:focus-visible img{transform:scale(1.08);filter:grayscale(0) brightness(.85)}
.tile h3{font-size:clamp(1.5rem,1.2rem + .9vw,2.05rem);color:var(--paper)}
.tile p{
  margin-top:.6rem;font-size:.92rem;color:var(--grey-inv);max-width:32ch;
  opacity:0;transform:translateY(.5rem);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1);
}
.tile:hover p,.tile:focus-visible p{opacity:1;transform:translateY(0)}
@media(hover:none){.tile p{opacity:1;transform:none}}

/* ---------- Studio ---------- */
.studio-grid{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:56rem){.studio-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.studio-text p{max-width:56ch;color:var(--grey)}
.studio-text p + p{margin-top:1.25rem}
.studio-text strong{color:var(--ink);font-weight:500}
.studio-portrait{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;margin-bottom:2rem}
.facts{margin:0;padding:0}
.facts div{display:flex;justify-content:space-between;gap:1.5rem;padding-block:.85rem;border-top:1px solid var(--rule);font-size:.94rem}
.facts dt{color:var(--grey)}
.facts dd{margin:0;text-align:right}

/* ---------- Stimmen ---------- */
.quotes{display:grid;gap:0;border-top:1px solid var(--rule)}
@media(min-width:52rem){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{
  padding:2rem 1.75rem 2rem 0;border-bottom:1px solid var(--rule);
  display:flex;flex-direction:column;gap:1.5rem;
}
@media(min-width:52rem){
  .quote{padding-inline:1.75rem;border-right:1px solid var(--rule)}
  .quote:first-child{padding-left:0}
  .quote:last-child{border-right:0;padding-right:0}
}
.quote blockquote{
  margin:0;font-family:var(--serif);font-style:italic;
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 30;
  font-size:1.1rem;line-height:1.45;
}
.quote footer{margin-top:auto;font-size:.9rem;line-height:1.4}
.quote footer span{display:block;color:var(--grey)}


/* ---------- Kundenleiste als Laufband ---------- */
.clients{padding-block:clamp(3.5rem,9vh,5.5rem);border-top:1px solid var(--rule);overflow:hidden}
.clients h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin-bottom:clamp(2rem,5vh,3rem)}

.marquee{
  position:relative;width:100%;
  /* Raender ausblenden, damit nichts hart abgeschnitten wirkt */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{display:flex;width:max-content}
.anim .marquee-track{animation:slide 42s linear infinite}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.logo-row{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;flex-shrink:0;
  gap:clamp(3rem,7vw,6rem);
  padding-right:clamp(3rem,7vw,6rem);
}
.logo-row li{flex-shrink:0}
.logo-row span{
  display:block;white-space:nowrap;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem);
  font-weight:500;letter-spacing:-.015em;color:var(--grey);
  transition:color .35s ease;
}
.logo-row img{
  display:block;height:clamp(1.6rem,1.3rem + .9vw,2.4rem);width:auto;
  filter:grayscale(1);opacity:.5;
  transition:opacity .35s ease,filter .35s ease;
}
.logo-row li:hover span{color:var(--ink)}
.logo-row li:hover img{opacity:1;filter:grayscale(0)}

.clients-note{margin-top:clamp(2rem,5vh,3rem);font-size:.86rem;color:var(--grey)}

@media(prefers-reduced-motion:reduce){
  .anim .marquee-track{animation:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{overflow-x:auto}
}

/* ---------- Kontakt ---------- */
/* Gleicher Grund wie der Kopfbereich: Grau-Beige mit Korn und dem
   beweglichen warmen Fleck. Dunkel bleibt nur noch die Fusszeile. */
.contact{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0%,#F4EEE4 46%,#EFE8DC 100%);
  color:var(--ink);
  padding-block:clamp(4.5rem,12vh,7.5rem);
  border-top:1px solid var(--rule);
}
.contact-grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.3'/%3E%3C/svg%3E");
}
.contact-glow{
  position:absolute;left:0;top:0;z-index:-1;
  width:clamp(24rem,55vw,44rem);aspect-ratio:5/4;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(168,68,42,.22),rgba(168,68,42,.08) 44%,transparent 70%);
  filter:blur(64px);
  transform:translate3d(28%,58%,0) translate(-50%,-50%);
}
.contact h2{font-size:clamp(2.1rem,1.4rem + 3vw,4rem);max-width:14ch;color:#33261C}
.contact p{margin-top:1.75rem;max-width:44ch;color:var(--grey)}
.contact-mail{
  display:inline-block;margin-top:2.5rem;
  font-family:var(--serif);font-variation-settings:"SOFT" 25,"WONK" 1,"opsz" 60;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);letter-spacing:-.02em;text-decoration:none;
  color:var(--ink);
  border-bottom:1px solid var(--rule);padding-bottom:.35rem;
  transition:color .3s ease,border-color .3s ease;
}
.contact-mail:hover,.contact-mail:focus-visible{color:var(--accent);border-color:var(--accent)}
.contact-meta{
  margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.25rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:1.5rem 3rem;font-size:.92rem;color:var(--grey);
}
.contact-meta dt{color:var(--ink);margin-bottom:.3rem}
.contact-meta dd{margin:0}
.contact-meta a{text-decoration:none;transition:color .25s ease}
.contact-meta a:hover,.contact-meta a:focus-visible{color:var(--accent)}

/* ---------- Fuß ---------- */
/* Gleicher Grund wie das Disziplinen-Band, damit Kontakt und Fuss
   als ein dunkler Block zusammenlaufen. Die Haarlinie trennt sie leicht. */
.foot{background:var(--ink-deep);color:var(--grey-inv)}
.foot .wrap{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;
  padding-block:1.75rem;font-size:.86rem;
  border-top:1px solid var(--rule-inv);
}
.foot nav{display:flex;gap:1.5rem}
.foot a{text-decoration:none;transition:color .25s ease}
.foot a:hover,.foot a:focus-visible{color:var(--accent-inv)}
.foot :focus-visible{outline-color:var(--accent-inv)}


/* ---------- Textanimation ---------- */
/* Nur aktiv, wenn JS läuft. Ohne JS bleibt alles sichtbar. */
.w{display:inline-block}

/* Hero: Zeilen steigen als Ganzes aus einer Maske. Kein Ticken pro Wort. */
.anim .reveal .w{overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.anim .reveal .wi{display:inline-block;transform:translateY(115%);will-change:transform}
.anim .reveal.is-in .wi{
  transform:none;
  transition:transform 1.25s cubic-bezier(.16,.86,.26,1);
}

/* Begleittexte: weich aus der Unschärfe */
.anim .lift{opacity:0;transform:translateY(.9rem);filter:blur(7px)}
.anim .lift.is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.16,.86,.26,1),filter 1.2s ease;
}

/* Studio-Absatz: weicher Lichtverlauf über den Text, an den Scrollstand gekoppelt */
.anim .scrolltext .w{opacity:.2;transition:opacity .5s linear}

/* Linie über den Hero-Angaben zieht sich auf */
.hero-meta::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--rule);transform:scaleX(1);transform-origin:left;
}
.anim .hero-meta::before{transform:scaleX(0)}
.anim .hero-meta.is-in::before{transform:scaleX(1);transition:transform 1.6s cubic-bezier(.18,.82,.22,1) .3s}

@media(prefers-reduced-motion:reduce){
  .anim .reveal .wi{transform:none !important}
  .anim .lift{opacity:1 !important;transform:none !important;filter:none !important}
  .anim .scrolltext .w{opacity:1 !important}
  .anim .hero-meta::before{transform:scaleX(1) !important}
}

/* ---------- Weitere Hover-Reaktionen ---------- */
.wordmark em{display:inline-block;font-style:normal;transition:color .35s ease,transform .55s cubic-bezier(.16,.86,.26,1)}
.wordmark:hover em,.wordmark:focus-visible em{transform:scale(1.75)}

.hero-meta span{transition:color .35s ease}
.hero-meta span:hover{color:var(--ink)}

.tile h3{position:relative;align-self:flex-start}
.tile h3::after{
  content:"";position:absolute;left:0;bottom:-.18em;width:100%;height:1px;
  background:var(--accent-inv);transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.16,.86,.26,1);
}
.tile:hover h3::after,.tile:focus-visible h3::after{transform:scaleX(1)}

.facts div{
  padding-inline:.75rem;margin-inline:-.75rem;
  transition:background-color .4s ease;
}
.facts div dd{transition:color .35s ease}
.facts div:hover{background:var(--sand)}
.facts div:hover dd{color:var(--accent)}

.quote{position:relative}
.quote::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .8s cubic-bezier(.16,.86,.26,1);
}
@media(min-width:52rem){.quote:first-child::before{left:-.9rem}}
.quote:hover::before{transform:scaleY(1)}
.quote footer{transition:color .35s ease}



/* ---------- Vorspann ---------- */
/* Ohne JS gibt es keinen Vorspann: die Seite steht sofort. */
.intro{display:none}
.anim .intro{
  display:grid;place-items:center;
  position:fixed;inset:0;z-index:200;
  background:transparent;
  transition:opacity .5s ease;
}
.intro-bg{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#EFE8DC 0%,#F6F2EA 52%,var(--paper) 100%);
  transition:opacity .75s ease;
}
.intro-bg::after{
  content:"";position:absolute;inset:0;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23i)' opacity='.3'/%3E%3C/svg%3E");
}
/* Der Grund faehrt als Vorhang nach oben weg, statt zu verblassen.
   Eine gerichtete Bewegung wirkt ruhiger als ein Ausblenden. */
.intro-bg{transition:transform 1s cubic-bezier(.66,0,.2,1)}
.intro-bg.is-gone{transform:translateY(-100%)}
.anim .intro.is-gone{opacity:0;pointer-events:none}

.intro-mark{position:relative;transform-origin:0 50%}

/* Die Marke kommt aus der Unschaerfe und zieht sich dabei von weiter
   Sperrung auf ihre normale Laufweite zusammen. Das negative margin-right
   gleicht den Leerraum hinter dem letzten Zeichen aus, damit sie
   waehrend der ganzen Bewegung mittig bleibt. */
.intro-mark-in{
  display:block;
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.8rem,4.6vw,3rem);color:var(--ink);
  letter-spacing:.34em;margin-right:-.34em;
  opacity:0;filter:blur(11px);
}
.intro-mark.is-in .intro-mark-in{
  letter-spacing:-.035em;margin-right:.035em;
  opacity:1;filter:blur(0);
  transition:
    letter-spacing 1s cubic-bezier(.16,.84,.24,1),
    margin-right   1s cubic-bezier(.16,.84,.24,1),
    opacity         .85s ease,
    filter         1.05s ease;
}

/* Der Punkt setzt sich zuletzt, ohne Ueberschwingen. */
.intro-mark-in em{
  display:inline-block;font-style:normal;color:var(--accent);
  transform:scale(0);transform-origin:50% 62%;
}
.intro-mark.is-in .intro-mark-in em{
  transform:scale(1);
  transition:transform .85s cubic-bezier(.16,.84,.24,1) .5s;
}

/* Abgang der grossen Marke nach oben */
.intro-mark.is-leaving{
  transform:translateY(-46vh);opacity:0;
  transition:transform .62s cubic-bezier(.5,0,.32,1),opacity .46s ease .1s;
}

/* Danach faehrt die Kopfleiste von oben herein ... */
.anim.has-intro .masthead{transform:translateY(-101%)}
.anim.bar-in .masthead,.anim.intro-done .masthead{
  transform:none;transition:transform .6s cubic-bezier(.2,.78,.24,1);
}

/* ... dann setzt sich die Wortmarke an ihren Platz ... */
.anim.has-intro .wordmark{opacity:0;transform:translateY(-.55em)}
.anim.mark-in .wordmark,.anim.intro-done .wordmark{
  opacity:1;transform:none;
  transition:opacity .42s ease,transform .58s cubic-bezier(.16,.86,.26,1);
}

/* ... und zuletzt tauchen die Navigationspunkte kurz hintereinander auf. */
.anim.has-intro .nav a{opacity:0;transform:translateY(-.35em)}
.anim.nav-in .nav a,.anim.intro-done .nav a{
  opacity:1;transform:none;
  transition:opacity .3s ease,transform .38s cubic-bezier(.16,.86,.26,1);
}
.anim.nav-in .nav a:nth-child(1){transition-delay:0ms}
.anim.nav-in .nav a:nth-child(2){transition-delay:45ms}
.anim.nav-in .nav a:nth-child(3){transition-delay:90ms}
.anim.nav-in .nav a:nth-child(4){transition-delay:135ms}
.anim.nav-in .nav a:nth-child(5){transition-delay:180ms}
.anim.nav-in .nav a:nth-child(6){transition-delay:225ms}
.anim.nav-in .nav a:nth-child(7){transition-delay:270ms}
.anim.has-intro .burger{opacity:0}
.anim.mark-in .burger,.anim.intro-done .burger{opacity:1;transition:opacity .4s ease}

/* Waehrend des Vorspanns nicht scrollen */
html.anim:not(.intro-done),html.anim:not(.intro-done) body{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .anim .intro{display:none}
  .anim .masthead{transform:none}
  .anim .wordmark{opacity:1;transform:none}
  .anim .nav a{opacity:1;transform:none}
  .anim .burger{opacity:1}
  html.anim:not(.intro-done),html.anim:not(.intro-done) body{overflow:visible}
}

/* ---------- Untere Kante: gestufte Unschaerfe ---------- */
/* Drei Lagen mit zunehmender Staerke ergeben einen Verlauf statt einer Kante. */
.edge-blur{
  position:fixed;left:0;right:0;bottom:0;height:5.5rem;
  z-index:55;pointer-events:none;
}
.edge-blur span{
  position:absolute;left:0;right:0;bottom:0;display:block;
}
.edge-blur span:nth-child(1){
  height:100%;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 22%,transparent 78%);
  mask-image:linear-gradient(to top,#000 0,#000 22%,transparent 78%);
}
.edge-blur span:nth-child(2){
  height:64%;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 25%,transparent 85%);
  mask-image:linear-gradient(to top,#000 0,#000 25%,transparent 85%);
}
.edge-blur span:nth-child(3){
  height:32%;
  backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 30%,transparent 92%);
  mask-image:linear-gradient(to top,#000 0,#000 30%,transparent 92%);
}
/* Am Seitenende ausblenden, damit der Fuss lesbar bleibt */
.edge-blur{opacity:1;transition:opacity .45s ease}
.edge-blur.is-off{opacity:0}
@supports not (backdrop-filter:blur(2px)){.edge-blur{display:none}}

/* ---------- Zugänglichkeit ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
.on-dark :focus-visible,.disciplines-band :focus-visible,.foot :focus-visible{outline-color:var(--accent-inv)}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100;text-decoration:none}
.skip:focus{left:.5rem}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   Unterseiten
   ========================================================================== */

/* Kopfbereich der Unterseiten: gleiche Bühne wie auf der Startseite,
   nur flacher, weil hier schon Inhalt erwartet wird. */
.hero--sub{padding-block:clamp(3.5rem,11vh,7rem) clamp(2.5rem,7vh,4.5rem)}
.hero--sub h1{font-size:clamp(2.3rem,1.3rem + 4.2vw,4.6rem);max-width:17ch}
.crumb{
  margin-bottom:1.5rem;font-size:.9rem;color:var(--grey);
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;
}
.crumb a{text-decoration:none;transition:color .25s ease}
.crumb a:hover,.crumb a:focus-visible{color:var(--ink)}
.crumb i{font-family:var(--serif);font-style:italic;opacity:.6}

/* Breites Bild unter dem Kopfbereich */
.hero-figure{margin:0}
.hero-figure img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:2px}
@media(max-width:52rem){.hero-figure img{aspect-ratio:16/10}}
.hero-figure figcaption{margin-top:.85rem;font-size:.88rem;color:var(--grey)}

/* Fließtext auf den Unterseiten */
.prose{max-width:64ch}
.prose p{color:var(--grey)}
.prose p + p{margin-top:1.15rem}
.prose h3{
  font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem);
  margin-top:2.75rem;margin-bottom:.9rem;
}
.prose h3:first-child{margin-top:0}
.prose strong{color:var(--ink);font-weight:500}
.prose ul{margin:1.15rem 0 0;padding:0;list-style:none}
.prose li{
  padding:.55rem 0 .55rem 1.5rem;position:relative;
  border-top:1px solid var(--rule);color:var(--grey);
}
.prose li::before{
  content:"";position:absolute;left:0;top:1.25em;
  width:.5rem;height:1px;background:var(--accent);
}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.prose a:hover{color:var(--accent)}

/* Zwei Spalten: Text links, Randangaben rechts */
.split{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:56rem){.split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}

/* Ablauf in Schritten. Nummern nur hier, weil es wirklich eine Folge ist. */
.steps{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--rule)}
@media(min-width:56rem){.steps{grid-template-columns:repeat(2,1fr)}}
.step{
  counter-increment:step;position:relative;
  padding:1.75rem 1.5rem 1.75rem 0;border-bottom:1px solid var(--rule);
}
@media(min-width:56rem){
  .step{padding-inline:1.75rem;border-right:1px solid var(--rule)}
  .step:nth-child(odd){padding-left:0}
  .step:nth-child(even){border-right:0;padding-right:0}
}
.step h3{font-size:1.2rem;margin-bottom:.55rem;display:flex;gap:.85rem;align-items:baseline}
.step h3::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--sans);font-size:.78rem;font-weight:500;
  color:var(--accent);letter-spacing:.04em;
}
.step p{color:var(--grey);font-size:.97rem;max-width:44ch}

/* Verweise auf die übrigen Disziplinen */
.siblings{display:grid;gap:0;border-top:1px solid var(--rule)}
@media(min-width:52rem){.siblings{grid-template-columns:repeat(3,1fr)}}
.sibling{
  position:relative;display:block;text-decoration:none;
  padding:1.6rem 1.25rem 1.6rem 0;border-bottom:1px solid var(--rule);
  transition:background-color .4s ease,padding-left .4s cubic-bezier(.2,.7,.3,1);
}
@media(min-width:52rem){
  .sibling{padding-inline:1.5rem;border-right:1px solid var(--rule)}
  .sibling:first-child{padding-left:0}
  .sibling:last-child{border-right:0;padding-right:0}
}
.sibling:hover,.sibling:focus-visible{background:var(--sand)}
.sibling span{display:block;font-size:.87rem;color:var(--grey);margin-bottom:.35rem}
.sibling h3{font-size:1.25rem}

/* Rechtsseiten */
.legal{padding-block:clamp(3rem,8vh,5rem) clamp(4rem,10vh,7rem)}
.legal .prose{max-width:70ch}
.legal dl{margin:1.15rem 0 0}
.legal dl div{
  display:grid;gap:.15rem 1.5rem;padding-block:.7rem;
  border-top:1px solid var(--rule);font-size:.96rem;
}
@media(min-width:44rem){.legal dl div{grid-template-columns:12rem minmax(0,1fr)}}
.legal dt{color:var(--grey)}
.legal dd{margin:0}
.todo{
  display:inline-block;padding:.1rem .45rem;border-radius:2px;
  background:var(--sand);color:var(--accent);
  font-size:.82rem;font-weight:500;
}
.notice{
  margin-top:2.5rem;padding:1.25rem 1.4rem;
  border:1px solid var(--rule);border-left:2px solid var(--accent);
  border-radius:2px;font-size:.93rem;color:var(--grey);max-width:64ch;
}
.notice strong{color:var(--ink);font-weight:500}

/* Aktiver Navigationspunkt */
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.masthead.on-dark .nav a[aria-current="page"]{color:var(--paper)}

/* Zwischenueberschrift in zweispaltigen Bloecken */
.split-title{
  font-family:var(--serif);font-weight:400;
  font-variation-settings:"SOFT" 25,"WONK" 1,"opsz" 40;
  font-size:1.2rem;letter-spacing:-.015em;margin-bottom:1rem;
}

/* ==================================================================
   MOBIL: Menue und Feinschliff
   ================================================================== */

/* ---------- Menueknopf und Menueflaeche (schmale Schirme) ----------
   Beides liegt bewusst NICHT in der Kopfleiste, sondern direkt im Dokument.
   Die Kopfleiste hat backdrop-filter und ist klebend positioniert; beides
   macht sie zum Bezugsrahmen fuer fest positionierte Kinder und laesst sie
   beim Sperren des Scrollens auf ihre Ursprungsposition zurueckfallen.
   Eine eigene Ebene auf Dokumentebene hat diese Abhaengigkeiten nicht. */

.burger{
  display:none;
  position:fixed;top:.95rem;right:max(1rem,calc(var(--gutter) - .6rem));
  z-index:320;
  width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:50%;
  background:none;color:var(--ink);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:.38rem;
}
.burger span{
  display:block;width:1.35rem;height:1.5px;background:currentColor;border-radius:1px;
  transition:transform .4s cubic-bezier(.16,.86,.26,1),opacity .25s ease;
}
.burger.on-dark{color:var(--paper)}
.burger[aria-expanded="true"]{color:var(--ink)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(.44rem) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-.44rem) rotate(-45deg)}

.menu{
  display:none;
  position:fixed;inset:0;z-index:310;
  flex-direction:column;
  padding:5.5rem var(--gutter) 3rem;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Feste Farben: in dunklen Abschnitten sind mehrere Tokens umdefiniert. */
  background:#FCFBF9;
  background-image:linear-gradient(180deg,#EFE8DC 0%,#F7F3EB 42%,#FCFBF9 100%);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s;
}
.menu::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='mn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23mn)' opacity='.3'/%3E%3C/svg%3E");
}
.menu.is-open{opacity:1;visibility:visible}

.menu-mark{
  position:absolute;top:1.3rem;left:var(--gutter);
  font-family:var(--sans);font-weight:700;font-size:1.2rem;letter-spacing:-.035em;
  color:#17140F;text-decoration:none;
}
.menu-mark em{font-style:normal;color:var(--accent)}

.menu-list{display:flex;flex-direction:column;margin:auto 0}
.menu-list a{
  position:relative;
  font-family:var(--serif);font-weight:400;
  font-variation-settings:"SOFT" 25,"WONK" 1,"opsz" 48;
  font-size:clamp(1.55rem,1.1rem + 2.4vw,2.4rem);
  letter-spacing:-.02em;line-height:1.1;color:#17140F;text-decoration:none;
  padding-block:.7rem;border-bottom:1px solid rgba(23,20,15,.13);
  opacity:0;transform:translateY(.7rem);
}
.menu.is-open .menu-list a{
  opacity:1;transform:none;
  transition:opacity .45s ease,transform .55s cubic-bezier(.16,.86,.26,1);
}
.menu.is-open .menu-list a:nth-child(1){transition-delay:.05s}
.menu.is-open .menu-list a:nth-child(2){transition-delay:.10s}
.menu.is-open .menu-list a:nth-child(3){transition-delay:.15s}
.menu.is-open .menu-list a:nth-child(4){transition-delay:.20s}
.menu.is-open .menu-list a:nth-child(5){transition-delay:.25s}
.menu.is-open .menu-list a:nth-child(6){transition-delay:.30s}
.menu.is-open .menu-list a:nth-child(7){transition-delay:.35s}
.menu-list a[aria-current="page"]{color:var(--accent)}

@media(max-width:64rem){
  .nav{display:none}
  .burger{display:flex}
  .menu{display:flex}
  /* Scrollsperre, die auch auf iOS haelt: der Body wird festgestellt und
     die Position per Skript gesetzt, statt nur overflow zu kappen. */
  body.menu-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
}
@media(max-width:64rem) and (max-height:34rem){
  .menu-list a{font-size:1.25rem;padding-block:.45rem}
  .menu-list{margin:0}
}

/* ---------- Feinschliff auf kleinen Schirmen ---------- */
@media(max-width:40rem){
  .hero-meta{justify-content:flex-start;gap:.3rem 1.4rem}
  .reel-head{flex-wrap:wrap;gap:.4rem 1.5rem}
  .edge-blur{height:3.25rem}
  .contact-meta{gap:1.25rem 2rem}
  .foot .wrap{flex-direction:column;gap:.75rem}
  .contact-mail{word-break:break-word}
  .band-head{margin-bottom:2rem}
  .quote{padding-right:0}
  .facts div{padding-inline:.5rem;margin-inline:-.5rem}
}

/* Zeigergesteuerte Effekte brauchen einen Zeiger */
@media(hover:none){
  .hero-glow,.contact-glow{opacity:.85}
}

/* ---------- Showreel-Overlay ---------- */
.lightbox{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  padding:clamp(1rem,5vw,3.5rem);
  background:rgba(10,9,8,.92);
  opacity:0;transition:opacity .35s ease;
}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox-stage{
  width:min(100%,72rem);aspect-ratio:16/9;
  background:#000;border-radius:2px;overflow:hidden;
  transform:scale(.97);transition:transform .45s cubic-bezier(.16,.86,.26,1);
}
.lightbox.is-open .lightbox-stage{transform:none}
.lightbox-stage iframe{display:block;width:100%;height:100%;border:0}
.lightbox-close{
  position:absolute;top:clamp(.75rem,2.5vw,1.75rem);right:clamp(.75rem,2.5vw,1.75rem);
  width:3rem;height:3rem;border-radius:50%;
  border:1px solid rgba(244,241,236,.35);background:transparent;
  color:#F4F1EC;cursor:pointer;display:grid;place-items:center;
  transition:background-color .3s ease,border-color .3s ease,transform .4s cubic-bezier(.16,.86,.26,1);
}
.lightbox-close svg{width:1.05rem;height:1.05rem;stroke:currentColor;stroke-width:1.4;fill:none}
.lightbox-close:hover,.lightbox-close:focus-visible{
  background:var(--accent-inv);border-color:var(--accent-inv);transform:rotate(90deg);
}
html.lightbox-open,html.lightbox-open body{overflow:hidden}

.muted{color:var(--grey);font-size:.88em}