/* ============================================================================
   NUMP Productions — Design
   ----------------------------------------------------------------------------
   Farben und Ton stammen aus dem Mediakit. Wenn du eine Farbe ändern willst,
   ändere sie unten bei ":root" — sie gilt dann überall.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   SCHRIFTEN — die aus eurem Mediakit, lokal gehostet.
   Bewusst NICHT per Link von Google oder Fontshare geladen: das überträgt die
   IP jedes Besuchers an einen fremden Server und ist in Deutschland
   abmahnfähig (LG München, 2022). Die Dateien liegen in assets/fonts/.
   Lizenz: ITF Free Font License, kommerzielle Nutzung erlaubt.
   --------------------------------------------------------------------------- */
@font-face{font-family:"Clash Display"; src:url("../assets/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap}
@font-face{font-family:"Clash Display"; src:url("../assets/fonts/ClashDisplay-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:"General Sans"; src:url("../assets/fonts/GeneralSans-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"General Sans"; src:url("../assets/fonts/GeneralSans-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"General Sans"; src:url("../assets/fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap}

:root{
  /* --- Farben --- */
  --ink:        #0B0B0D;   /* Grundschwarz */
  --ink-2:      #131316;   /* etwas heller, für abgesetzte Flächen */
  --paper:      #F5F3EF;   /* Off-White, Textfarbe auf dunkel */
  --violet:     #7C2DF5;   /* Hauptakzent */
  --violet-lt:  #8B4DFF;   /* Akzent auf dunklem Grund */
  --lavender:   #C9B6F5;   /* zarter Akzent */
  --muted:      rgba(245,243,239,.58);
  --line:       rgba(245,243,239,.13);

  /* --- Schrift ---
     "Clash Display" und "General Sans" sind die Schriften aus eurem Mediakit.
     Solange sie nicht lokal eingebunden sind, greifen die Systemschriften
     dahinter — die Seite sieht dann leicht anders, aber sauber aus.
     Einbinden: siehe README.md, Abschnitt "Schriften". */
  --display: "Clash Display", "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Maße --- */
  --maxw: 1280px;
  --pad-x: clamp(20px, 5vw, 72px);
  --pad-y: clamp(88px, 13vh, 168px);
  --radius: 18px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.6,.05,.28,.91);
}

/* --- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:clamp(15px,1.05vw,17px); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--violet); color:#fff}

:focus-visible{outline:2px solid var(--violet-lt); outline-offset:3px; border-radius:4px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); width:100%}
.section{padding-block:var(--pad-y); position:relative}

.skip{
  position:fixed; top:8px; left:8px; z-index:400; padding:10px 16px;
  background:var(--violet); color:#fff; border-radius:8px;
  transform:translateY(-160%); transition:transform .2s var(--ease);
}
.skip:focus{transform:none}

/* --- Typografie ---------------------------------------------------------- */
.label{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin:0 0 clamp(20px,3vw,34px);
}
.h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.4rem,7.4vw,6.4rem); line-height:1.1; letter-spacing:-.01em;
  margin:0 0 clamp(26px,4vw,52px); text-wrap:balance;
}
.h2 em{display:block; font-style:normal; color:var(--violet-lt)}
.lead{
  font-size:clamp(1.02rem,1.5vw,1.32rem); line-height:1.5; max-width:62ch;
  color:rgba(245,243,239,.82); margin:0 0 clamp(30px,4vw,56px);
}
.eyebrow{
  font-size:clamp(12px,1.1vw,14px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--lavender); margin:0 0 22px;
}

/* Wörter, die einzeln hereinfliegen (JS setzt .is-in) */
.w{display:inline-block; will-change:transform,opacity}
[data-split].is-ready .w{
  opacity:0; transform:translateY(.72em) rotate(2deg);
  transition:opacity .62s var(--ease), transform .78s var(--ease);
  transition-delay:calc(var(--wi) * 34ms);
}
[data-split].is-ready.is-in .w{opacity:1; transform:none}

/* Einfache Einblendung */
[data-reveal]{opacity:0; transform:translateY(26px); will-change:transform,opacity}
[data-reveal].is-in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .9s var(--ease)}

/* ---------------------------------------------------------------------------
   FILMISCHE BEWEGUNG
   Bilder sollen sich verhalten wie Aufnahmen, nicht wie Kacheln:
   sie ziehen auf wie ein Vorhang und stehen danach nie ganz still.
   --------------------------------------------------------------------------- */

/* Vorhang-Aufblende: Der Rahmen gibt das Bild von unten nach oben frei,
   während das Bild selbst leicht zurückzoomt. Wirkt wie eine Kamerafahrt,
   nicht wie ein eingeblendetes Kästchen. */
.frame{position:relative; overflow:hidden; clip-path:inset(0 0 100% 0); will-change:clip-path}
.frame.is-in{clip-path:inset(0 0 0% 0); transition:clip-path 1.15s var(--ease-io)}
.frame>img{transform:scale(1.16); transition:transform 1.6s var(--ease)}
.frame.is-in>img{transform:scale(1)}

/* Ken-Burns: unmerklich langsamer Zoom mit Schwenk. Der Trick der
   Dokumentarfilmer — ein Standbild wirkt dadurch wie eine Einstellung. */
@keyframes kenburns{
  0%   {transform:scale(1.04) translate3d(0,0,0)}
  50%  {transform:scale(1.13) translate3d(-1.4%,-1.1%,0)}
  100% {transform:scale(1.04) translate3d(0,0,0)}
}
.kb{animation:kenburns 34s ease-in-out infinite; will-change:transform}
.kb--slow{animation-duration:52s}

/* Bild wandert beim Scrollen innerhalb seines festen Rahmens.
   Das Bild ist absichtlich höher als der Ausschnitt — JavaScript verschiebt
   es, der Rahmen bleibt stehen. Das erzeugt Tiefe statt Stapelgefühl. */
.movein{overflow:hidden; position:relative}
.movein>img{height:126%; width:100%; object-fit:cover; position:absolute; inset:-13% 0 auto 0; will-change:transform}

/* Videoplätze — bis Filmmaterial da ist, liegt hier das Foto darunter.
   Kommt später ein Video dazu, deckt es das Bild einfach ab. */
.slot{position:relative; overflow:hidden}
.slot>video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.slot>img{position:relative; z-index:0}

/* Sektionen greifen ineinander, statt sauber gestapelt zu sein.
   Der weiche Farbverlauf an der Kante lässt den Übergang verschwimmen. */
.section{position:relative}
.section::before{
  content:""; position:absolute; inset:auto 0 100% 0; height:clamp(60px,10vh,140px);
  background:linear-gradient(to top, var(--ink), transparent); pointer-events:none; z-index:1;
}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  --bg:var(--violet);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:100px; background:var(--bg); color:#fff;
  font-weight:600; font-size:15px; letter-spacing:.01em; position:relative;
  overflow:hidden; isolation:isolate; transition:transform .4s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--violet-lt);
  transform:translateY(101%); transition:transform .46s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:none}
.btn--ghost{--bg:transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--paper)}
.btn--ghost::after{background:rgba(245,243,239,.09)}
.btn--sm{padding:10px 20px; font-size:13.5px}
.btn--wide{width:100%; padding-block:17px}

/* --- Navigation ----------------------------------------------------------- */
.progress{
  position:fixed; inset:0 auto auto 0; height:2px; width:0; z-index:220;
  background:linear-gradient(90deg,var(--violet),var(--lavender));
}
.nav{
  position:fixed; inset:0 0 auto 0; z-index:200; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:20px var(--pad-x);
  transition:padding .35s var(--ease), background .35s var(--ease), backdrop-filter .35s;
}
.nav.is-stuck, .nav--solid{
  padding-block:12px; background:rgba(11,11,13,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav.is-hidden{transform:translateY(-100%); transition:transform .4s var(--ease)}
.nav__logo{display:flex; align-items:center; gap:11px}
.nav__mark{
  width:26px; height:26px; border-radius:7px; flex:none;
  background:linear-gradient(140deg,var(--violet),var(--lavender));
}
.nav__wordmark{display:flex; flex-direction:column; line-height:.92}
.nav__name{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.005em}
.nav__sub{font-size:7.5px; letter-spacing:.44em; text-transform:uppercase; color:var(--muted); margin-top:3px}
.nav__links{display:flex; gap:clamp(16px,2.4vw,34px); font-size:14px; font-weight:500}
.nav__links a{color:rgba(245,243,239,.74); transition:color .25s}
.nav__links a:hover, .nav__links a.is-active{color:var(--paper)}
.nav__right{display:flex; align-items:center; gap:14px}
.lang{
  font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--muted);
  padding:7px 11px; border-radius:100px; box-shadow:inset 0 0 0 1px var(--line);
  transition:color .25s, box-shadow .25s;
}
.lang:hover{color:var(--paper); box-shadow:inset 0 0 0 1px var(--violet-lt)}

.burger{display:none; width:38px; height:38px; position:relative}
.burger span{
  position:absolute; left:9px; width:20px; height:1.6px; background:var(--paper);
  transition:transform .34s var(--ease), opacity .2s;
}
.burger span:first-child{top:16px}
.burger span:last-child{top:22px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

.mobilenav{
  position:fixed; inset:0; z-index:190; background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
}
/* Ohne diese Zeile bliebe das Menü immer sichtbar — display:flex würde das
   hidden-Attribut überstimmen. */
.mobilenav[hidden]{display:none}
.mobilenav a{
  font-family:var(--display); font-weight:600; font-size:clamp(2rem,9vw,3rem);
  letter-spacing:-.008em; padding:6px 0;
}

/* --- Hero ----------------------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--pad-x) + 60px) var(--pad-x) clamp(58px,9vh,110px);
  overflow:hidden;
}
.hero__media{position:absolute; inset:-6% 0 0; z-index:0; will-change:transform}
.hero__img{width:100%; height:112%; object-fit:cover; object-position:center 38%}
/* Der Schleier MUSS über dem Video liegen (z-index 2), sonst ist der Text
   auf hellen Stellen des Films unlesbar. */
.hero__veil{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.62) 38%, rgba(11,11,13,.88) 72%, rgba(11,11,13,.98) 100%),
    radial-gradient(120% 76% at 76% 8%, rgba(124,45,245,.26), transparent 62%);
}
/* Das Filmmaterial selbst wird entsättigt und abgedunkelt — es ist
   Hintergrund, nicht Hauptdarsteller. Sonst kämpft es mit der Schrift. */
.hero__media .vid, .hero__media .hero__img{filter:grayscale(.55) brightness(.62) contrast(1.08)}
.hero__inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto}
.hero__h1{
  font-family:var(--display); font-weight:700; margin:0 0 clamp(22px,2.6vw,34px);
  /* Clash Display läuft breiter als die Systemschrift — daher kleiner gesetzt,
     sonst bricht "memories" um oder stößt an den Rand. */
  font-size:clamp(2.3rem,7.6vw,6.4rem); line-height:1.02; letter-spacing:-.012em;
}
.hero__line{
  display:block; opacity:0; transform:translateY(.5em);
  animation:heroIn .95s var(--ease) forwards;
  animation-delay:calc(180ms + var(--li) * 130ms);
}
.hero__line:nth-child(2){color:var(--violet-lt)}
@keyframes heroIn{to{opacity:1; transform:none}}
.hero__sub{
  font-size:clamp(1.04rem,1.6vw,1.42rem); line-height:1.46; max-width:54ch;
  margin:0 0 clamp(28px,3.6vw,44px); color:rgba(245,243,239,.9);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}
.hero__scroll{
  position:absolute; right:var(--pad-x); bottom:clamp(58px,9vh,110px); z-index:2;
  display:flex; align-items:center; gap:12px; font-size:10.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll i{display:block; width:1px; height:52px; background:linear-gradient(var(--lavender),transparent); animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.55); transform-origin:top}50%{opacity:1; transform:scaleY(1)}}

/* --- Laufband -------------------------------------------------------------- */
.ticker{
  border-block:1px solid var(--line); padding-block:19px; overflow:hidden;
  background:var(--ink-2);
}
.ticker__track{
  display:flex; align-items:center; gap:28px; width:max-content;
  will-change:transform; font-family:var(--display); font-weight:600;
  font-size:clamp(1.05rem,2.2vw,1.7rem); letter-spacing:0; white-space:nowrap;
}
.ticker__track i{color:var(--violet-lt); font-style:normal; font-size:.62em}

/* --- Wer wir sind ---------------------------------------------------------- */
.who__grid{display:grid; gap:clamp(34px,5vw,72px); grid-template-columns:1fr}
@media (min-width:900px){ .who__grid{grid-template-columns:1.25fr .85fr; align-items:start} }
.who__body p{margin:0 0 1.15em; font-size:clamp(1rem,1.28vw,1.16rem); color:rgba(245,243,239,.8)}
.stats{list-style:none; margin:0; padding:0; display:grid; gap:2px; background:var(--line); border-radius:var(--radius); overflow:hidden}
.stat{background:var(--ink-2); padding:26px 24px}
.stat__v{display:block; font-family:var(--display); font-weight:700; font-size:clamp(2.1rem,4.4vw,3.1rem); line-height:1.06; letter-spacing:-.01em; color:var(--violet-lt)}
.stat__l{display:block; margin-top:9px; font-size:13.5px; color:var(--muted); line-height:1.42}

/* --- Gepinnte Leistungs-Sektion ------------------------------------------- */
/* Am Rechner: Die Sektion bleibt stehen und die Karten laufen seitlich durch.
   Auf dem Handy (unten): normale Liste untereinander.                        */
.pin{position:relative}
.pin__sticky{position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:clip; padding-block:clamp(70px,10vh,110px) 0}
.pin__head{margin-bottom:clamp(22px,3.4vh,44px)}
.h2--pin{font-size:clamp(2rem,5.4vw,4.4rem); margin:0}
.h2--pin em{display:inline; color:var(--violet-lt)}
.pin__track{display:flex; gap:clamp(18px,2.4vw,34px); padding-inline:var(--pad-x); will-change:transform}
.svc{
  flex:0 0 clamp(280px,74vw,560px); background:var(--ink-2); border-radius:var(--radius);
  overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); display:flex; flex-direction:column;
}
.svc__media{aspect-ratio:16/9; overflow:hidden}
.svc__img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.svc:hover .svc__img{transform:scale(1.05)}
.svc__text{padding:clamp(22px,2.6vw,34px)}
.svc__n{font-size:11px; letter-spacing:.26em; color:var(--violet-lt)}
.svc__title{font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.5vw,2rem); letter-spacing:-.008em; margin:10px 0 4px}
.svc__tag{margin:0 0 14px; color:var(--lavender); font-size:14.5px}
.svc__body{margin:0; color:var(--muted); font-size:15px; line-height:1.6}
.pin__bar{margin:clamp(24px,3vh,40px) var(--pad-x) 0; height:2px; background:var(--line); border-radius:2px}
.pin__bar span{display:block; height:100%; width:0; background:var(--violet-lt); border-radius:2px}

/* --- Projekte -------------------------------------------------------------- */
/* Projekte als Bildraster — das Bild ist die Hauptsache, der Text die
   Bildunterschrift. Vorher war es umgekehrt, und die Sektion sah aus wie
   ein Inhaltsverzeichnis. */
.projs{list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,2.6vw,38px)}
@media (min-width:820px){
  .projs{grid-template-columns:repeat(2,1fr)}
  /* Rhythmus: das erste und jedes vierte Projekt gehen über die volle Breite */
  .proj:nth-child(4n+1){grid-column:1/-1}
}
.proj{margin:0}
.proj__hit{display:block; width:100%; text-align:left; position:relative}
.proj__media{
  display:block; position:relative; width:100%; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden; margin-bottom:clamp(14px,1.6vw,22px);
  background:var(--ink-2);
}
.proj:nth-child(4n+1) .proj__media{aspect-ratio:21/9}
.proj__img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.proj__media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent 42%, rgba(11,11,13,.72) 100%);
}
.proj__row{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px}
.proj__n{font-size:12px; color:var(--violet-lt); letter-spacing:.16em}
.proj__client{
  font-family:var(--display); font-weight:700; letter-spacing:-.01em; line-height:1.1;
  font-size:clamp(1.35rem,2.6vw,2.2rem); transition:color .3s; flex:1 1 auto;
}
.proj__kind{color:var(--muted); font-size:14px}
.proj__year{color:var(--muted); font-size:13px; letter-spacing:.08em}
.proj__go{color:var(--violet-lt); font-size:19px; transition:transform .38s var(--ease)}
.proj__teaser{display:block; color:var(--muted); font-size:14.5px; max-width:70ch; margin-top:8px}
@media (hover:hover){
  .proj__hit:hover .proj__img{transform:scale(1.04)}
  .proj__hit:hover .proj__client{color:var(--violet-lt)}
  .proj__hit:hover .proj__go{transform:translateX(8px)}
}

/* --- Projekt-Detail (Overlay) ---------------------------------------------- */
.sheets{position:fixed; inset:0; z-index:300; pointer-events:none}
.sheets.is-open{pointer-events:auto}
.sheets__scrim{position:absolute; inset:0; background:rgba(6,6,8,.72); backdrop-filter:blur(6px); opacity:0; transition:opacity .4s var(--ease)}
.sheets.is-open .sheets__scrim{opacity:1}
.sheet{
  position:absolute; inset:0 0 0 auto; width:min(760px,100%); background:var(--ink-2);
  overflow-y:auto; overscroll-behavior:contain; transform:translateX(100%);
  transition:transform .56s var(--ease); box-shadow:-30px 0 80px rgba(0,0,0,.5);
}
.sheet[hidden]{display:none}
.sheet.is-open{transform:none}
.sheet__inner{padding:clamp(28px,5vw,64px)}
.sheet__close{
  position:sticky; top:0; float:right; width:44px; height:44px; border-radius:50%;
  background:rgba(245,243,239,.08); display:grid; place-items:center; font-size:15px;
  transition:background .25s; z-index:2;
}
.sheet__close:hover{background:var(--violet)}
.sheet__h{font-family:var(--display); font-weight:700; font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.012em; line-height:1.06; margin:0 0 22px}
.sheet__body p{margin:0 0 1.1em; color:rgba(245,243,239,.82)}
.sheet__facts{display:grid; gap:1px; background:var(--line); border-radius:12px; overflow:hidden; margin:30px 0}
.sheet__facts>div{background:var(--ink); padding:16px 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.sheet__facts dt{color:var(--muted); font-size:13px; margin:0}
.sheet__facts dd{margin:0; font-weight:600; font-size:14px}
.sheet__gallery{display:grid; gap:10px; margin-bottom:30px}
@media (min-width:620px){ .sheet__gallery{grid-template-columns:repeat(2,1fr)} .sheet__gallery img:first-child{grid-column:1/-1} }
.sheet__img{border-radius:12px; aspect-ratio:3/2; object-fit:cover; width:100%}

/* --- Ablauf ---------------------------------------------------------------- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:clamp(28px,3.4vw,44px)}
@media (min-width:880px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{position:relative; padding-top:28px}
.step__line{position:absolute; inset:0 0 auto 0; height:1px; background:var(--line)}
.step__line::after{content:""; position:absolute; inset:0 auto 0 0; width:0; background:var(--violet-lt); transition:width 1.1s var(--ease) .1s}
.step.is-in .step__line::after{width:38%}
.step__n{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.2em; color:var(--violet-lt)}
.step__t{font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.3vw,1.75rem); letter-spacing:-.008em; margin:12px 0 12px}
.step__b{margin:0; color:var(--muted); font-size:15px; line-height:1.62}

/* --- Wo -------------------------------------------------------------------- */
.where{overflow:hidden; isolation:isolate}
.where__bg{position:absolute; inset:-14% 0; z-index:-1; will-change:transform}
.where__img{width:100%; height:100%; object-fit:cover; opacity:.2; filter:grayscale(.5)}
.where::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,var(--ink),transparent 30%,var(--ink))}
.where__giant{
  font-family:var(--display); font-weight:700; margin:0 0 clamp(28px,4vw,50px);
  font-size:clamp(2.6rem,10vw,8rem); line-height:1.02; letter-spacing:-.015em;
}
.where__w{display:block}
.where__w:nth-child(even){color:var(--violet-lt); padding-left:clamp(20px,7vw,150px)}

/* --- Team ------------------------------------------------------------------ */
.people{display:grid; gap:clamp(26px,3.4vw,46px)}
@media (min-width:760px){ .people{grid-template-columns:repeat(2,1fr)} }
.person{margin:0}
.person__media{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; margin-bottom:20px}
.person__img{width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .6s var(--ease), transform 1.2s var(--ease)}
.person:hover .person__img{filter:none; transform:scale(1.03)}
.person__n{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.01em; margin:0}
.person__r{margin:4px 0 12px; color:var(--violet-lt); font-size:14px; letter-spacing:.03em}
.person__b{margin:0; color:var(--muted); font-size:15px}

/* --- Partner --------------------------------------------------------------- */
.partners{padding-block:clamp(50px,7vh,86px); border-block:1px solid var(--line); background:var(--ink-2)}
.partners__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:clamp(26px,5vw,72px)}
.partners__list li{font-family:var(--display); font-weight:600; font-size:clamp(1rem,1.8vw,1.4rem); letter-spacing:0; color:rgba(245,243,239,.42); transition:color .3s}
.partners__list li:hover{color:var(--paper)}
.partners__list img{filter:grayscale(1) brightness(2); opacity:.5; transition:opacity .3s}
.partners__list li:hover img{opacity:1}

/* --- Kontakt & Formular ----------------------------------------------------- */
.contact__giant{
  font-family:var(--display); font-weight:700; margin:0 0 clamp(22px,3vw,38px);
  font-size:clamp(2.2rem,7vw,5.6rem); line-height:1.1; letter-spacing:-.012em;
}
.contact__giant em{display:block; font-style:normal; color:var(--violet-lt)}
.contact__grid{display:grid; gap:clamp(34px,4vw,64px)}
@media (min-width:940px){ .contact__grid{grid-template-columns:1.15fr .85fr; align-items:start} }
.form{display:grid; gap:16px}
.f2{display:grid; gap:16px}
@media (min-width:560px){ .f2{grid-template-columns:1fr 1fr} }
.field{margin:0; display:grid; gap:7px}
.field label{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--paper); background:var(--ink-2);
  border:1px solid var(--line); border-radius:11px; padding:13px 15px;
  transition:border-color .25s, background .25s;
}
.field textarea{resize:vertical; min-height:118px}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size:5px 5px; background-repeat:no-repeat}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--violet-lt); background:var(--ink); outline:none}
.field.is-bad input, .field.is-bad select, .field.is-bad textarea{border-color:#FF5C5C}
.field .err{color:#FF8080; font-size:12.5px; margin:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__note{margin:2px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5}
.form__msg{margin:0; font-size:14.5px; min-height:1.4em}
.form__msg.is-ok{color:var(--lavender)}
.form__msg.is-err{color:#FF8080}
.contact__direct .label{margin-bottom:16px}
.contact__big{
  display:block; font-family:var(--display); font-weight:600;
  font-size:clamp(1.05rem,2.1vw,1.6rem); letter-spacing:-.005em; margin-bottom:12px;
  transition:color .25s; overflow-wrap:anywhere;
}
.contact__big:hover{color:var(--violet-lt)}
.contact__city{color:var(--muted); font-size:14px; margin-top:22px}

/* --- Fußzeile --------------------------------------------------------------- */
.foot{padding-block:clamp(48px,7vh,86px); border-top:1px solid var(--line)}
.foot__tag{font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,3.2vw,2.2rem); letter-spacing:-.008em; margin:0 0 clamp(30px,4vw,52px); color:var(--lavender)}
.foot__row{display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted)}
.foot__links{display:flex; gap:22px}
.foot__links a{transition:color .25s}
.foot__links a:hover{color:var(--paper)}

/* --- Rechtsseiten ------------------------------------------------------------ */
.legal{padding-top:calc(var(--pad-y) + 40px)}
.legal h2{font-family:var(--display); font-size:clamp(1.2rem,2.4vw,1.6rem); letter-spacing:0; margin:38px 0 12px}
.legal p, .legal li{color:rgba(245,243,239,.8); max-width:74ch}
.legal a{color:var(--violet-lt); text-decoration:underline; text-underline-offset:3px}
.legal .todo{background:rgba(124,45,245,.14); border-left:3px solid var(--violet); padding:14px 18px; border-radius:0 10px 10px 0}

/* --- Filmkorn & Mauszeiger ---------------------------------------------------- */
.grain{
  position:fixed; inset:-50%; z-index:250; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%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");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}   20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}    60%{transform:translate(-3%,-2%)}
  80%{transform:translate(2%,4%)}
}
.cursor-ring, .cursor-dot{position:fixed; top:0; left:0; z-index:260; pointer-events:none; border-radius:50%; mix-blend-mode:difference}
.cursor-ring{width:32px; height:32px; box-shadow:inset 0 0 0 1px rgba(245,243,239,.6); transition:width .3s var(--ease), height .3s var(--ease), background .3s}
.cursor-dot{width:4px; height:4px; background:var(--paper)}

/* ============================================================================
   Handy und Tablet: Das gepinnte Seitwärts-Scrollen wird zur normalen Liste.
   Die Seite behält Inhalt und Ton, verliert nur die aufwendige Bewegung.
   ============================================================================ */
@media (max-width:960px){
  .nav__links{display:none}
  .burger{display:block}
  .pin{height:auto !important}
  .pin__sticky{position:static; height:auto; padding-block:var(--pad-y)}
  .pin__track{transform:none !important; flex-direction:column; gap:20px; max-width:var(--maxw); margin-inline:auto}
  .svc{flex:1 1 auto}
  .pin__bar{display:none}
  .hero__scroll{display:none}
  .sheet{width:100%}
  .where__w:nth-child(even){padding-left:clamp(14px,5vw,40px)}
}
@media (max-width:560px){
  .proj__row{grid-template-columns:auto 1fr}
  .proj__year, .proj__go{display:none}
}

/* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt eine
   ruhige Seite ohne Animation. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  [data-reveal], [data-split].is-ready .w, .hero__line{opacity:1 !important; transform:none !important}
  .grain{display:none}
  .pin{height:auto !important}
  .pin__sticky{position:static; height:auto}
  .pin__track{transform:none !important; flex-direction:column}
}

/* Wenn JavaScript aus ist: alles trotzdem sichtbar. */
.no-js [data-reveal], .no-js .hero__line{opacity:1 !important; transform:none !important}
.no-js .pin{height:auto !important}
.no-js .pin__sticky{position:static; height:auto}
.no-js .pin__track{flex-direction:column}

/* ============================================================================
   NEUER AUFBAU  (überschreibt weiter oben Stehendes — späteres CSS gewinnt)
   ============================================================================ */

/* --- Hero: ein Knopf statt zwei, Text weiter unten ------------------------- */
.hero{align-items:flex-end}
.hero__inner{padding-bottom:clamp(10px,2vh,30px)}
.hero__sub{
  font-size:clamp(1.05rem,1.5vw,1.35rem); max-width:44ch; color:rgba(245,243,239,.88);
  margin:0 0 clamp(26px,3vw,38px);
}
.btn--big{padding:18px 38px; font-size:16px}
.btn__label{position:relative; z-index:1; display:inline-block; will-change:transform}

/* --- 2 · Logo-Band --------------------------------------------------------- */
.band{
  border-block:1px solid var(--line); background:var(--ink-2);
  padding-block:clamp(26px,3.4vh,44px); overflow:hidden;
}
.band__label{
  text-align:center; margin:0 0 clamp(16px,2vh,26px);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
}
.band__viewport{
  overflow:hidden;
  /* Kanten ausblenden, damit das Band nicht abgeschnitten wirkt */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.band__track{display:flex; align-items:center; gap:clamp(40px,6vw,96px); width:max-content; will-change:transform}
.band__item{display:flex; align-items:center; flex:none}
.band__item img{height:34px; width:auto; filter:grayscale(1) brightness(2.2); opacity:.5; transition:opacity .3s}
.band__item:hover img{opacity:1}
.band__item--text{
  font-family:var(--display); font-weight:600; font-size:clamp(1rem,1.7vw,1.35rem);
  letter-spacing:0; color:rgba(245,243,239,.4); white-space:nowrap; transition:color .3s;
}
.band__item--text:hover{color:var(--paper)}

/* --- 3 · Arbeiten: versetztes Raster, damit fünf nicht nach Lücke aussehen -- */
.projs{display:grid; gap:clamp(20px,3vw,44px); grid-template-columns:1fr}
@media (min-width:820px){
  .projs{grid-template-columns:repeat(6,1fr)}
  .proj:nth-child(1){grid-column:span 6}          /* groß, volle Breite */
  .proj:nth-child(2){grid-column:span 4}
  .proj:nth-child(3){grid-column:span 2}
  .proj:nth-child(4){grid-column:span 2}
  .proj:nth-child(5){grid-column:span 4}
}
.proj__media{aspect-ratio:16/9}
.proj:nth-child(1) .proj__media{aspect-ratio:21/9}
.proj:nth-child(3) .proj__media,
.proj:nth-child(4) .proj__media{aspect-ratio:4/5}
.proj__row{gap:6px 16px; margin-top:2px}
.proj__client{font-size:clamp(1.2rem,2.2vw,1.9rem)}
.proj__teaser{margin-top:6px; font-size:14px}

/* --- 4 · Leistungen: normales Raster statt gepinnter Sektion --------------- */
.svcs{list-style:none; margin:0; padding:0; display:grid; gap:clamp(24px,3vw,46px)}
@media (min-width:700px){ .svcs{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .svcs{grid-template-columns:repeat(4,1fr)} }
.svc{background:none; box-shadow:none; border-radius:0; display:block}
.svc__media{aspect-ratio:4/3; border-radius:var(--radius); margin-bottom:18px}
.svc__img{width:100%; height:100%; object-fit:cover}
.svc__title{font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,2vw,1.6rem);
  letter-spacing:-.008em; margin:0 0 6px}
.svc__time{
  margin:0 0 10px; font-size:12.5px; letter-spacing:.06em; color:var(--violet-lt);
  display:inline-block; padding:5px 11px; border-radius:100px;
  background:rgba(124,45,245,.14); box-shadow:inset 0 0 0 1px rgba(139,77,255,.3);
}
.svc__body{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}

/* --- 5 · Ablauf: Tagesangabe als Zeitstrahl ------------------------------- */
@media (min-width:880px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step__day{
  font-family:var(--display); font-weight:700; font-size:clamp(1.1rem,1.8vw,1.5rem);
  letter-spacing:0; color:var(--violet-lt); display:block;
}
.step__t{font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.25rem);
  letter-spacing:0; margin:10px 0 8px}
.step__b{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}

/* --- 6 · Für wen ----------------------------------------------------------- */
.forwho__list{list-style:none; margin:0; padding:0; max-width:74ch}
.forwho__list li{
  display:flex; gap:16px; align-items:baseline;
  padding:clamp(16px,2vw,24px) 0; border-bottom:1px solid var(--line);
  font-size:clamp(1.05rem,1.7vw,1.42rem); line-height:1.4; color:rgba(245,243,239,.88);
}
.forwho__list li span{color:var(--violet-lt); flex:none}
.forwho__list li:first-child{border-top:1px solid var(--line)}

/* --- 7 · Wir --------------------------------------------------------------- */
.person__media{aspect-ratio:4/5}

/* --- Sektionsabstände etwas enger, die Seite soll nicht ausufern ----------- */
.section{padding-block:clamp(72px,10vh,132px)}

/* --- Performance: was nicht im Bild ist, wird nicht gerechnet -------------- */
.section, .band{content-visibility:auto; contain-intrinsic-size:auto 700px}
.hero{content-visibility:visible}

/* --- Handy: nur der Hero bewegt sich, die Kacheln bleiben Standbilder ------ */
@media (max-width:820px){
  .proj__media, .proj:nth-child(n) .proj__media{aspect-ratio:16/10}
  .proj .vid{display:none}          /* spart Datenvolumen und Akku */
  .band__track{gap:36px}
}

/* ============================================================================
   LADEANIMATION — steht auf 43 % der ausgezeichneten Seiten.
   Sie überbrückt die Sekunde, in der Schrift und Hero-Video geladen werden,
   und ist der erste Eindruck. Ohne JavaScript wird sie nie eingeblendet.
   ============================================================================ */
.loader{
  position:fixed; inset:0; z-index:500; background:var(--ink);
  display:grid; place-items:center; pointer-events:none;
}
.loader__num{
  font-family:var(--display); font-weight:700;
  font-size:clamp(4rem,16vw,13rem); letter-spacing:-.015em; line-height:1.06;
  color:var(--paper); font-variant-numeric:tabular-nums;
}
.loader__num sup{font-size:.28em; vertical-align:super; color:var(--violet-lt); margin-left:.06em}
.loader__bar{
  position:absolute; inset:auto 0 0 0; height:2px; background:var(--violet-lt);
  transform-origin:0 50%; transform:scaleX(0);
}
/* Wegblenden: Vorhang zieht nach oben weg, Zahl fällt mit */
.loader.is-done{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s cubic-bezier(.76,0,.24,1);
}
.loader.is-done .loader__num{
  transform:translateY(-24%); opacity:0;
  transition:transform .8s cubic-bezier(.76,0,.24,1), opacity .5s;
}
/* Solange geladen wird, soll nichts scrollen */
body.is-loading{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  body.is-loading{overflow:auto}
}

/* ============================================================================
   BAUSTELLENSEITE — Video, Logo, ein Satz. Sonst nichts.
   ============================================================================ */
.soon{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden}
.soon__media{position:absolute; inset:0; z-index:0}
.soon__vid, .soon__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.5) brightness(.55) contrast(1.06);
}
.soon__vid{z-index:1}
.soon__img{z-index:0}
.soon__veil{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg, rgba(11,11,13,.78) 0%, rgba(11,11,13,.55) 45%, rgba(11,11,13,.9) 100%),
    radial-gradient(90% 70% at 50% 45%, rgba(124,45,245,.20), transparent 65%);
}
.soon__inner{
  position:relative; z-index:3; text-align:center;
  padding:var(--pad-x); max-width:min(92vw, 900px);
}
.soon__logo{display:inline-flex; align-items:center; gap:16px; margin-bottom:clamp(38px,7vh,80px)}
.soon__mark{
  width:clamp(38px,5vw,54px); height:clamp(38px,5vw,54px); border-radius:clamp(10px,1.4vw,15px);
  background:linear-gradient(140deg,var(--violet),var(--lavender)); flex:none;
}
.soon__word{display:flex; flex-direction:column; line-height:1.02; text-align:left}
.soon__name{
  font-family:var(--display); font-weight:700; letter-spacing:-.008em;
  font-size:clamp(2rem,4.6vw,3.4rem); color:var(--paper);
}
.soon__sub{
  font-size:clamp(8px,.85vw,10px); letter-spacing:.46em; text-transform:uppercase;
  color:var(--muted); margin-top:6px;
}
.soon__text{
  font-family:var(--display); font-weight:600; margin:0;
  font-size:clamp(1.5rem,4.4vw,3.2rem); line-height:1.08; letter-spacing:-.01em;
  color:var(--paper); text-wrap:balance;
}
.soon__text--en{
  margin-top:clamp(12px,1.6vh,20px);
  font-size:clamp(.95rem,1.7vw,1.35rem); font-weight:500;
  letter-spacing:0; color:var(--violet-lt);
}
/* Beim Laden sanft hereinkommen, ohne JavaScript */
.soon__logo{animation:soonIn 1s cubic-bezier(.16,1,.3,1) both}
.soon__text{animation:soonIn 1s cubic-bezier(.16,1,.3,1) .22s both}
.soon__text--en{animation:soonIn 1s cubic-bezier(.16,1,.3,1) .38s both}
@keyframes soonIn{from{opacity:0; transform:translateY(1.4rem)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .soon__logo, .soon__text, .soon__text--en{animation:none}
  .soon__vid{display:none}
}

/* ============================================================================
   MEDIAKIT-FLUSS — Logo groß, Bildflächen, Kontakt am Ende.
   Keine Navigation. Die Flächen gehen ineinander über, statt aneinander
   zu stoßen: jede hat oben und unten einen Verlauf ins Schwarz.
   ============================================================================ */
.flow{background:var(--ink)}

.fl{
  position:relative; min-height:100svh; display:grid; align-items:center;
  padding:clamp(90px,14vh,150px) var(--pad-x); overflow:clip; isolation:isolate;
}
.fl__bg{position:absolute; inset:0; z-index:-2}
.fl__img, .fl__vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) brightness(.5) contrast(1.05);
}
.fl__vid{z-index:1}
.fl__img{z-index:0}

/* Der Übergang: oben und unten ins Schwarz auslaufen lassen.
   Dadurch ist keine Kante zwischen zwei Flächen zu sehen. */
.fl__veil{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(180deg,
      var(--ink) 0%, rgba(11,11,13,.55) 22%,
      rgba(11,11,13,.45) 50%,
      rgba(11,11,13,.6) 78%, var(--ink) 100%),
    radial-gradient(100% 70% at 50% 50%, rgba(124,45,245,.13), transparent 70%);
}

.fl__in{
  position:relative; z-index:3; width:100%;
  max-width:var(--maxw); margin-inline:auto; text-align:center;
}
.fl__in--mitte{display:grid; place-items:center}

/* --- Einstieg: nur das Logo ------------------------------------------------ */
.fl--ein{min-height:100svh}
.ein__logo{
  width:clamp(220px,32vw,440px); height:auto;
  filter:drop-shadow(0 18px 60px rgba(0,0,0,.6));
  animation:einIn 1.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes einIn{from{opacity:0; transform:translateY(2rem) scale(.94)} to{opacity:1; transform:none}}
.ein__hint{
  position:absolute; inset:auto 0 clamp(28px,5vh,54px) 0; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}
.ein__hint i{display:block; width:1px; height:44px; background:linear-gradient(var(--lavender),transparent); animation:cue 2.2s var(--ease) infinite}

/* --- Kapitel --------------------------------------------------------------- */
.fl__label{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--lavender); margin:0 0 clamp(20px,3vh,34px);
}
.fl__num{
  font-family:var(--display); font-weight:700; font-size:13px;
  letter-spacing:.22em; color:var(--violet-lt); margin:0 0 18px;
}
.fl__h{
  font-family:var(--display); font-weight:700; margin:0;
  font-size:clamp(2.1rem,6.4vw,5.4rem); line-height:1.06; letter-spacing:-.012em;
  text-wrap:balance;
}
.fl__h span{display:block}
.fl__h em{display:block; font-style:normal; color:var(--violet-lt)}
.fl__h--s{font-size:clamp(1.7rem,4.4vw,3.4rem)}
.fl__p{
  margin:clamp(22px,3vh,36px) auto 0; max-width:58ch;
  font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.5; color:rgba(245,243,239,.86);
}

/* Die drei Schritte aus dem Mediakit */
.fl__steps{
  list-style:none; margin:clamp(34px,5vh,60px) 0 0; padding:0;
  display:grid; gap:clamp(16px,2.4vw,32px);
}
@media (min-width:760px){ .fl__steps{grid-template-columns:repeat(3,1fr)} }
.fl__steps li{
  font-family:var(--display); font-weight:600; letter-spacing:0;
  font-size:clamp(1rem,1.7vw,1.35rem); color:var(--paper);
  padding-top:16px; border-top:1px solid var(--line);
}
.fl__steps li span{display:block; font-size:12px; letter-spacing:.2em; color:var(--violet-lt); margin-bottom:8px}

/* --- Kontakt --------------------------------------------------------------- */
.fl--kontakt{min-height:auto; padding-block:clamp(100px,15vh,170px)}
.kf{
  max-width:620px; margin:clamp(38px,5vh,60px) auto 0;
  display:grid; gap:14px; text-align:left;
}
.kf__row{display:grid; gap:14px}
@media (min-width:560px){ .kf__row{grid-template-columns:1fr 1fr} }
.kf__f{margin:0; display:grid; gap:7px}
.kf__f label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.kf__f input, .kf__f select, .kf__f textarea{
  width:100%; font:inherit; font-size:15px; color:var(--paper);
  background:rgba(11,11,13,.55); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; backdrop-filter:blur(6px); transition:border-color .25s, background .25s;
}
.kf__f textarea{resize:vertical; min-height:110px}
.kf__f select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size:5px 5px; background-repeat:no-repeat}
.kf__f input:focus, .kf__f select:focus, .kf__f textarea:focus{border-color:var(--violet-lt); background:rgba(11,11,13,.8); outline:none}
.kf__f.is-bad input, .kf__f.is-bad select, .kf__f.is-bad textarea{border-color:#FF5C5C}
.kf__note{margin:2px 0 0; font-size:12.5px; color:var(--muted); line-height:1.5}
.kf__btn{
  width:100%; padding:16px 30px; border-radius:100px; background:var(--violet); color:#fff;
  font-weight:600; font-size:15.5px; transition:background .3s, transform .3s var(--ease);
}
.kf__btn:hover{background:var(--violet-lt); transform:translateY(-2px)}
.kf__msg{margin:0; font-size:14.5px; min-height:1.4em}
.kf__msg.is-ok{color:var(--lavender)}
.kf__msg.is-err{color:#FF8080}

/* --- Sprachumschalter: das einzige Element über dem Inhalt -----------------
   Liegt fest oben rechts und scrollt mit. Bewusst zurückhaltend, damit der
   Einstieg das Logo bleibt; der dunkle Schleier darunter hält ihn auf jedem
   Bild lesbar. Auf dem Handy etwas kleiner und näher am Rand. */
.sprache{
  position:fixed; top:clamp(14px,2.4vh,26px); right:clamp(14px,3vw,34px); z-index:40;
  display:flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(11,11,13,.42); border:1px solid rgba(245,243,239,.14);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.sprache a{
  color:rgba(245,243,239,.55); transition:color .22s;
}
.sprache a:hover{color:var(--paper)}
.sprache a.is-hier{color:var(--paper); cursor:default}
.sprache span{color:rgba(245,243,239,.24)}
@media (max-width:600px){
  .sprache{padding:6px 11px; font-size:11.5px; gap:6px}
}
@media (prefers-reduced-motion:no-preference){
  .sprache{transition:opacity .3s}
}

/* --- Fuß: klein, anklickbar ------------------------------------------------ */
.fuss{
  padding:clamp(48px,8vh,84px) var(--pad-x); text-align:center;
  border-top:1px solid var(--line); background:var(--ink);
}
.fuss__satz{
  font-family:var(--display); font-weight:600; letter-spacing:-.005em;
  font-size:clamp(1rem,2.4vw,1.7rem); color:var(--lavender);
  margin:0 0 clamp(26px,4vh,44px);
}
.fuss__links{display:flex; flex-wrap:wrap; justify-content:center; gap:14px clamp(20px,3vw,38px)}
.fuss__links a{
  font-size:13.5px; color:var(--muted); transition:color .25s;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.fuss__links a:hover{color:var(--paper); border-bottom-color:var(--violet-lt)}
.fuss__c{margin:clamp(24px,3.5vh,38px) 0 0; font-size:12px; color:rgba(245,243,239,.35)}

/* --- Handy ----------------------------------------------------------------- */
@media (max-width:820px){
  .fl__vid{display:none}          /* nur der Einstieg bewegt sich */
  .fl--ein .fl__vid{display:block}
  .fl{min-height:88svh; padding-block:clamp(70px,11vh,110px)}
}
@media (prefers-reduced-motion:reduce){
  .ein__logo{animation:none}
  .fl__vid{display:none}
}

/* --- Leistungen kompakt in der Fläche (statt eigener Bildschirme) --------- */
.fl__leist{
  list-style:none; margin:clamp(30px,4.5vh,52px) 0 0; padding:0;
  display:grid; gap:clamp(14px,2vw,26px);
}
@media (min-width:680px){ .fl__leist{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .fl__leist{grid-template-columns:repeat(4,1fr)} }
.fl__leist li{
  padding-top:14px; border-top:1px solid var(--line); text-align:left;
}
.fl__leist-n{display:block; font-size:11px; letter-spacing:.2em; color:var(--violet-lt); margin-bottom:8px}
.fl__leist-t{
  display:block; font-family:var(--display); font-weight:600; letter-spacing:0;
  font-size:clamp(1rem,1.5vw,1.22rem); color:var(--paper); margin-bottom:4px;
}
.fl__leist-z{display:block; font-size:13.5px; color:var(--muted); line-height:1.45}

/* Der Mediakit-Dreiklang zum Abschluss einer Fläche */
.fl__schluss{
  margin:clamp(32px,4.5vh,56px) 0 0;
  font-family:var(--display); font-weight:700; letter-spacing:-.008em;
  font-size:clamp(1.2rem,2.8vw,2.1rem); color:var(--lavender);
}

/* Die Flächen dürfen jetzt mitwachsen, damit nichts abgeschnitten wird */
.fl--kap{min-height:100svh; height:auto}

/* --- Ansprechpartner: zwei Kästen in der Mitte ---------------------------- */
/* Bewusst Flex statt Raster: bei einem Raster bleibt die letzte Reihe links
   kleben, sobald die Anzahl nicht aufgeht (drei Leute in vier Spalten). Mit
   Flex und "justify-content:center" steht jede Reihe mittig — egal wie viele
   Leute in flow.js stehen. */
.team{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(18px,2.6vw,32px);
  margin:clamp(34px,5vh,58px) auto 0; max-width:1180px;
}
.team__k{width:100%; max-width:380px}
@media (min-width:620px){  .team__k{width:calc(50% - 20px); max-width:330px} }
@media (min-width:1040px){ .team__k{width:265px} }
/* Platzhalter, solange ein Porträt fehlt */
.team__leer{
  display:grid; place-items:center; width:100%; height:100%;
  font-family:var(--display); font-weight:700; font-size:2.6rem;
  color:rgba(245,243,239,.16); background:var(--ink-2);
}
.team__k{
  margin:0; padding:clamp(14px,1.6vw,20px);
  background:rgba(11,11,13,.55); border:1px solid var(--line);
  border-radius:var(--radius); backdrop-filter:blur(8px);
  text-align:left; transition:border-color .3s, transform .4s var(--ease);
}
.team__k:hover{border-color:rgba(139,77,255,.45); transform:translateY(-3px)}
.team__bild{
  aspect-ratio:4/5; overflow:hidden; border-radius:calc(var(--radius) - 6px);
  margin-bottom:14px; background:var(--ink-2);
}
.team__bild img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25) contrast(1.03); transition:filter .5s, transform .8s var(--ease);
}
.team__k:hover .team__bild img{filter:none; transform:scale(1.04)}
.team__n{
  font-family:var(--display); font-weight:700; letter-spacing:-.008em;
  font-size:clamp(1.15rem,1.9vw,1.5rem); margin:0;
}
.team__r{margin:3px 0 8px; font-size:12.5px; letter-spacing:.08em; color:var(--violet-lt)}
.team__t{margin:0; font-size:13.5px; line-height:1.5; color:var(--muted)}

/* --- Ansprechpartner-Kästen auf dem Rechner größer ------------------------ */
@media (min-width:900px){
  .team{max-width:900px; gap:clamp(24px,3vw,40px)}
  .team__k{padding:clamp(18px,1.8vw,24px)}
  .team__n{font-size:clamp(1.35rem,2.2vw,1.8rem)}
  .team__r{font-size:13.5px}
  .team__t{font-size:14.5px}
}

/* --- Wortabstand -----------------------------------------------------------
   Die Anzeigeschrift setzt Wörter sehr dicht. Bei den großen Zeilen liest sich
   das wie eine einzige lange Reihe, obwohl die Buchstaben selbst passen.
   Deshalb hier NUR der Abstand zwischen den Wörtern — die Laufweite der
   Buchstaben bleibt, wie sie ist. Willst du es weiter aufmachen: die Werte
   unten erhöhen (.2em ist schon sehr luftig). */
.fl__h, .h2, .hero__h1, .soon__word{ word-spacing:.16em }
.fl__leist-t, .fl__schluss, .fl__steps li, .team__n, .fuss__satz,
.sheet__h, .proj__t, .svc__title, .step__t, .person__n, .foot__tag{ word-spacing:.1em }
.fl__p, .lead, .hero__sub, .fl__label, .kf__btn{ word-spacing:.06em }