/* ══════════════ MONOCHROME SYSTEM ══════════════ */
:root{
  --void:#060708;
  --void-rgb:6,7,8;
  --surf:#0D0F11;
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);
  --edge:rgba(255,255,255,.12);
  --edge-2:rgba(255,255,255,.22);
  --txt:#F2F4F6;
  --dim:#767D83;
  --dim-2:#4A5055;
  --glow:0 0 28px rgba(255,255,255,.28);

  --disp:'Anybody','Helvetica Neue',Arial,sans-serif;
  --body:'Sora',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --axis:clamp(900px,94vw,1240px);
  --gut:clamp(20px,5vw,60px);
  --r:18px;
  --r-lg:30px;

  /* ── Metallisches Orange: der Akzent, der der Seite Druck gibt ── */
  --acc:#FF6A1A;
  --acc-soft:#FFA766;
  --acc-deep:#B23C00;
  --acc-glow:rgba(255,106,26,.34);
  --metal:linear-gradient(115deg,#8A3200 0%,#FF6A1A 18%,#FFD9B3 38%,#FF8A2B 52%,
          #A63700 72%,#FF6A1A 88%,#FFC08F 100%);
  --metal-line:linear-gradient(90deg,rgba(255,106,26,0) 0%,var(--acc) 30%,#FFD9B3 50%,
          var(--acc) 70%,rgba(255,106,26,0) 100%);
}
:root[data-theme="light"]{
  --void:#F2F3F4; --void-rgb:242,243,244; --surf:#E8EAEB; --glass:rgba(0,0,0,.045); --glass-2:rgba(0,0,0,.07);
  --edge:rgba(0,0,0,.13); --edge-2:rgba(0,0,0,.24); --txt:#0A0B0C; --dim:#5D6368; --dim-2:#9AA0A5;
  --glow:0 0 28px rgba(0,0,0,.18);
  --acc:#E4520A; --acc-soft:#B23C00; --acc-glow:rgba(228,82,10,.22);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--txt);font-family:var(--body);font-size:16px;font-weight:300;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .5s,color .5s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--disp);text-transform:uppercase;line-height:.92;
  letter-spacing:-.02em;text-wrap:balance;font-weight:800;font-variation-settings:'wdth' 108}
:focus-visible{outline:1.5px solid var(--txt);outline-offset:4px}
::selection{background:var(--txt);color:var(--void)}

/* outlined word = the monochrome accent */
.out{color:transparent;-webkit-text-stroke:1.4px var(--txt);paint-order:stroke fill}
@supports not (-webkit-text-stroke:1px black){.out{color:var(--dim)}}

/* ══════════════ METALL — die Signatur ══════════════ */
.metal{background:var(--metal);background-size:260% 100%;-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:sweep 9s linear infinite}
@keyframes sweep{0%{background-position:0% 50%}100%{background-position:260% 50%}}
.acc{color:var(--acc)}
/* handschriftlich wirkender Akzent, wie im Entwurf */
.script{font-family:var(--disp);font-style:italic;font-weight:500;text-transform:none;
  font-variation-settings:'wdth' 88;letter-spacing:-.01em;
  background:var(--metal);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:sweep 11s linear infinite}

/* Eyebrow mit Metall-Haarlinie */
.tag.hair{display:inline-flex;align-items:center;gap:12px}
.tag.hair::before,.tag.hair::after{content:"";width:26px;height:1px;background:var(--metal-line)}
.mid .tag.hair{justify-content:center}

/* ══════════════ PRELOADER ══════════════ */
.pre{display:none;position:fixed;inset:0;z-index:200;place-items:center;background:var(--void);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),visibility .5s}
.js .pre{display:grid}
html:not(.preloading) .pre{opacity:0;visibility:hidden;pointer-events:none}
.pre-in{width:min(560px,76vw);display:grid;justify-items:center;gap:clamp(16px,2.4vw,26px);text-align:center}
.pre-lab{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.38em;
  text-transform:uppercase;color:var(--dim)}
.pre-num{font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.84;
  font-size:clamp(64px,15vw,168px);font-variant-numeric:tabular-nums;
  background:var(--metal);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:sweep 6s linear infinite}
.pre-num i{font-style:normal;font-size:.3em;margin-left:5px;vertical-align:1.5em;letter-spacing:0}
.pre-track{width:100%;height:3px;border-radius:999px;background:var(--edge);overflow:hidden}
.pre-track b{display:block;height:100%;width:0%;border-radius:999px;
  background:var(--metal);background-size:260% 100%;
  box-shadow:0 0 18px var(--acc-glow),0 0 44px var(--acc-glow);
  animation:sweep 6s linear infinite}

/* Ueberblendung: waehrend das Overlay verschwindet, kommt der Inhalt hoch.
   Gleiche Dauer, gleiche Kurve, kein Versatz — sonst sieht man dazwischen
   eine leere schwarze Flaeche statt einer Blende. */
/* Nur diese drei blenden auf. Ein pauschales body>* wuerde auch das
   Menue-Overlay sichtbar machen, das sich selbst ueber opacity versteckt. */
html.preloading main,html.preloading header,html.preloading .ambient{opacity:0}
main,header,.ambient{transition:opacity .5s cubic-bezier(.22,1,.36,1)}
html.preloading .hero-in{transform:translateY(28px)}
.hero-in{transition:transform 1s cubic-bezier(.22,1,.36,1)}
html:not(.preloading) .pre-in{transform:scale(1.07);opacity:0}
.pre-in{transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .4s ease}
html.preloading body{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .js .pre{display:none}
  html.preloading main,html.preloading header,html.preloading .ambient{opacity:1}
  html.preloading .hero-in{transform:none}
  html.preloading body{overflow:visible}
}

/* ══════════════ STAT-REIHE ══════════════ */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge);
  border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;margin-top:clamp(30px,4vw,48px)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--void);padding:clamp(16px,2.2vw,24px) clamp(14px,2vw,22px);text-align:left}
.stat b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.6vw,44px);
  line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}

.wrap{max-width:var(--axis);margin-inline:auto;padding-inline:var(--gut);position:relative}
.mid{text-align:center}
.pad{padding-block:clamp(74px,10vw,150px)}
.lead{color:var(--dim);font-size:clamp(14.5px,1.4vw,17px);max-width:52ch;margin-inline:auto;font-weight:300}
.tag{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:var(--dim-2);margin-bottom:clamp(18px,2.6vw,28px)}

/* ══════════════ GLASS ══════════════ */
.glass{background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);
  backdrop-filter:blur(22px) brightness(1.06);-webkit-backdrop-filter:blur(22px) brightness(1.06);
  position:relative;overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 34%,transparent 62%)}
:root[data-theme="light"] .glass::before{background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.1) 40%,transparent 68%)}

/* soft out-of-focus orbs — the "Unschärfe" */
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(255,255,255,.15),transparent 68%)}
:root[data-theme="light"] .orb{background:radial-gradient(circle,rgba(0,0,0,.1),transparent 68%)}

/* ══════════════ READING PROGRESS ══════════════ */
.prog{position:fixed;top:0;left:0;height:1.5px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:var(--txt);z-index:99;opacity:.85}

/* ══════════════ BUTTONS ══════════════ */
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;position:relative;overflow:hidden;border:1px solid var(--edge);color:var(--txt);
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:color .4s,border-color .4s,box-shadow .4s}
.btn>*{position:relative;z-index:2}
.btn::after{content:"";position:absolute;inset:0;z-index:1;background:var(--txt);
  transform:translateY(101%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.btn:hover{color:var(--void);border-color:var(--txt);box-shadow:var(--glow)}
.btn:hover::after{transform:translateY(0)}
.btn--solid{background:var(--txt);color:var(--void);border-color:var(--txt)}
.btn--solid::after{background:transparent;border:1px solid var(--txt)}
.btn--solid:hover{color:var(--txt);background:transparent}
.acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,3.6vw,40px)}

/* ══════════════ HEADER ══════════════ */
header{position:fixed;inset:14px var(--gut) auto;z-index:70;display:flex;justify-content:center;pointer-events:none}
.bar{pointer-events:auto;display:flex;align-items:center;gap:clamp(12px,2.4vw,26px);
  height:56px;padding:0 10px 0 20px;border-radius:999px;width:100%;max-width:var(--axis);
  background:var(--glass);border:1px solid var(--edge);
  backdrop-filter:blur(26px) brightness(1.08);-webkit-backdrop-filter:blur(26px) brightness(1.08);
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease}
.bar.dense{background:rgba(9,9,10,.72);border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 44px -28px rgba(0,0,0,.9);
  backdrop-filter:blur(30px) saturate(1.2);-webkit-backdrop-filter:blur(30px) saturate(1.2)}
:root[data-theme="light"] .bar.dense{background:rgba(247,248,249,.78);border-color:rgba(0,0,0,.12);
  box-shadow:0 18px 44px -30px rgba(0,0,0,.34)}
.brand{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:'wdth' 96;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;flex:none}
.brand img{flex:none}
@media(max-width:600px){.brand .bn{display:none}.brand img{width:44px;height:auto}}
.bar nav{display:none;gap:clamp(12px,1.8vw,24px);margin-inline:auto}
@media(min-width:900px){.bar nav{display:flex}}
.bar nav a{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.bar nav a:hover{color:var(--txt)}
.tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
@media(min-width:900px){.bar nav+.tools{margin-inline-start:0}}
.tbtn{background:none;border:0;cursor:pointer;color:var(--dim);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;padding:8px 4px;transition:color .3s}
.tbtn:hover{color:var(--txt)}
.burger{width:44px;height:38px;border-radius:999px;border:1px solid var(--edge);background:transparent;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--txt);transition:border-color .3s,box-shadow .3s;flex:none}
.burger:hover{border-color:var(--edge-2);box-shadow:var(--glow)}
.burger i{display:block;height:1.5px;width:15px;background:currentColor;transition:width .3s,transform .4s}
.burger i:last-child{width:9px}
.burger:hover i:last-child{width:15px}

/* ══════════════ FULLSCREEN NAV ══════════════ */
.ov{position:fixed;inset:0;z-index:95;background:rgba(6,7,8,.72);
  backdrop-filter:blur(30px) brightness(.7);-webkit-backdrop-filter:blur(30px) brightness(.7);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .55s}
:root[data-theme="light"] .ov{background:rgba(242,243,244,.72);backdrop-filter:blur(30px) brightness(1.1)}
.ov.on{opacity:1;pointer-events:auto}
.ovclose{position:absolute;top:22px;right:var(--gut);background:none;border:0;cursor:pointer;color:var(--txt);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.ovclose svg{stroke:currentColor;stroke-width:1.5;transition:transform .5s}
.ovclose:hover svg{transform:rotate(90deg)}
.navlist{list-style:none;margin:0;padding:0;width:100%;text-align:center}
.navlist li{overflow:hidden}
.nitem{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,8.6vw,112px);line-height:1.02;letter-spacing:-.03em;font-variation-settings:'wdth' 112;
  padding-block:clamp(1px,.5vw,6px);position:relative;
  transform:translateY(108%);transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .35s}
.ov.on .nitem{transform:translateY(0)}
.nitem .w{display:block;position:relative;overflow:hidden}
.nitem .w span{display:block;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.nitem .w .b{position:absolute;inset:0;color:transparent;-webkit-text-stroke:1.4px var(--txt);transform:translateY(100%)}
.nitem:hover .w .a{transform:translateY(-100%)}
.nitem:hover .w .b{transform:translateY(0)}
.navlist:hover .nitem{opacity:.25}
.navlist .nitem:hover{opacity:1}
.nitem em{position:absolute;left:0;top:50%;translate:0 -50%;font-family:var(--mono);font-style:normal;
  font-size:10px;letter-spacing:.2em;color:var(--dim);opacity:0;transition:opacity .35s,translate .4s}
.nitem:hover em{opacity:1;translate:8px -50%}
@media(max-width:840px){.nitem em{display:none}}
.ovfoot{position:absolute;bottom:26px;left:var(--gut);right:var(--gut);display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.ovfoot a:hover{color:var(--txt)}

/* ══════════════ HERO ══════════════ */
.hero{position:relative;min-height:clamp(600px,96svh,940px);display:grid;place-items:center;overflow:hidden;
  padding-block:clamp(120px,15vw,180px) clamp(60px,8vw,100px)}
/* Die geschweifte Rauchgrafik ueber dem Hero ist entfernt — die Abdunklung
   kommt jetzt allein von .hero-vid::before und .hero-vid::after. */
.hero-in{position:relative;z-index:3;width:100%}
h1{font-size:clamp(30px,7.4vw,106px);font-variation-settings:'wdth' 96;letter-spacing:-.028em;line-height:.9;
  overflow-wrap:break-word}
.scrollcue{margin-top:clamp(40px,6vw,74px);display:inline-flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim-2)}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(var(--edge-2),transparent);position:relative}
.scrollcue i::after{content:"";position:absolute;top:0;left:-1.5px;width:4px;height:4px;border-radius:50%;
  background:var(--txt);animation:drop 2.4s cubic-bezier(.5,0,.5,1) infinite}
@keyframes drop{0%{transform:translateY(0);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(42px);opacity:0}}
.hero-in{text-align:center;max-width:var(--axis)}
.hero-in h1{max-width:15ch;margin-inline:auto}
.hero-in .lead{max-width:50ch;margin-inline:auto}
.hero-in .acts{justify-content:center}
.hero-in .scrollcue{margin-top:clamp(26px,3.4vw,44px)}
/* senkrechte Stichwortleiste rechts, wie im Entwurf */
.hero-side{position:absolute;right:var(--gut);top:50%;translate:0 -50%;z-index:3;margin:0;padding:0;
  list-style:none;display:none;text-align:right;border-right:1px solid var(--edge);padding-right:14px}
@media(min-width:1100px){.hero-side{display:block}}
.hero-side li{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim-2);padding-block:7px}
.hero-side li:first-child{color:var(--acc)}

/* Primärbutton mit Metallfläche */
.btn--metal{border-color:transparent;color:#120A04}
.btn--metal::after{background:var(--metal);background-size:260% 100%;transform:none;
  animation:sweep 9s linear infinite}
.btn--metal:hover{color:#120A04;border-color:transparent;box-shadow:0 0 34px var(--acc-glow)}
.btn--metal:hover::after{transform:none}

/* ══════════════ HALTUNG ══════════════ */
.manifest{position:relative;isolation:isolate}
/* Weicher Auslauf vom Hero in den ersten Absatz. Der Hero endet in einer
   deckenden Flaeche; ohne diesen Verlauf traefe sie hart auf den Farbschleier
   der Seite. Jetzt laeuft das Dunkel ueber die Sektionsgrenze hinaus aus. */
.manifest::before{content:"";position:absolute;top:-1px;left:0;right:0;z-index:-1;
  height:clamp(160px,22vw,340px);pointer-events:none;
  background:linear-gradient(to bottom,
    rgb(var(--void-rgb)) 0%,
    rgba(var(--void-rgb),.92) 18%,
    rgba(var(--void-rgb),.62) 44%,
    rgba(var(--void-rgb),.26) 72%,
    rgba(var(--void-rgb),0) 100%)}
.man{display:grid;gap:clamp(24px,4vw,56px);align-items:start}
@media(min-width:900px){
  .man{grid-template-columns:1.05fr .95fr}
  /* die rechte Spalte sitzt bewusst tiefer, das wirkt lockerer */
  .man-t{padding-top:clamp(84px,12vw,220px)}
}
.man-h{font-size:clamp(28px,5.6vw,72px);letter-spacing:-.03em}
.man-t p{color:var(--dim);font-size:clamp(14.5px,1.45vw,17px);line-height:1.72}
.man-claim{margin-top:22px;padding-top:22px;border-top:1px solid var(--edge);
  color:var(--txt)!important;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' 100;letter-spacing:-.015em;
  font-size:clamp(17px,2.2vw,26px);line-height:1.15}

/* ══════════════ MARQUEE ══════════════ */
.marq{border-block:1px solid var(--edge);overflow:hidden;padding-block:clamp(15px,2.2vw,26px);
  position:relative;z-index:3;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marq-t{display:flex;width:max-content;animation:slide 44s linear infinite;position:relative;z-index:3}
.marq:hover .marq-t{animation-play-state:paused}
.marq span{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-variation-settings:'wdth' 104;
  font-size:clamp(19px,2.9vw,40px);letter-spacing:-.018em;padding-inline:clamp(14px,2.2vw,30px);white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px var(--edge-2);paint-order:stroke fill}
.marq span i{font-style:normal;color:var(--acc);-webkit-text-stroke:0;margin-left:clamp(16px,2.4vw,32px);
  font-size:.4em;vertical-align:middle}
@supports not (-webkit-text-stroke:1px black){.marq span{color:var(--dim-2)}}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══════════════ PROCESS MAP ══════════════ */
.proc{position:relative}
.flow{list-style:none;margin:0;padding:0;position:relative;z-index:2;text-align:left}
.fstep{display:grid;grid-template-columns:repeat(12,1fr)}
.fstep>.scard{grid-column:1/span 12}
@media(min-width:800px){
  .fstep>.scard{grid-column:1/span 7}
  .fstep:nth-child(even)>.scard{grid-column:6/span 7}
}
.scard{padding:clamp(20px,2.6vw,32px) clamp(20px,2.8vw,34px);border-radius:var(--r-lg);
  opacity:.3;transform:translateY(22px) scale(.985);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),
             border-color .6s,box-shadow .6s}
.fstep.on>.scard{opacity:1;transform:none;border-color:rgba(var(--a-warm),.34);
  box-shadow:0 0 0 1px rgba(var(--a-warm),.08),0 26px 60px -34px rgba(0,0,0,.9)}
:root[data-theme="light"] .fstep.on>.scard{box-shadow:0 22px 50px -32px rgba(0,0,0,.35)}
.scard .n{font-family:var(--mono);font-size:10px;letter-spacing:.26em;display:block;margin-bottom:11px;
  color:var(--dim-2);transition:color .6s}
.fstep.on>.scard .n{color:var(--acc)}
.scard h3{font-size:clamp(19px,2.5vw,30px);font-variation-settings:'wdth' 104}
.scard p{color:var(--dim);font-size:13.5px;margin-top:11px;max-width:46ch}

/* die leuchtende Verbindung zwischen zwei Karten */
.wire{display:block;width:100%;height:clamp(52px,7.4vw,92px);overflow:visible;grid-column:1/-1}
.wire path{fill:none;stroke:var(--acc);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.15s cubic-bezier(.22,1,.36,1)}
.wire circle{fill:var(--acc);opacity:0;transition:opacity .5s .5s}
.fstep.on .wire path{stroke-dashoffset:0}
.fstep.on .wire circle{opacity:1}
.fstep.on .wire{filter:drop-shadow(0 0 7px var(--acc-glow))}

/* ══════════════ PILLARS — tilting glass cards ══════════════ */
.pills{display:grid;gap:14px;perspective:1200px}
@media(min-width:640px){.pills{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.pills{grid-template-columns:repeat(4,1fr)}}
.pill{padding:0;transform-style:preserve-3d;transition:box-shadow .5s,border-color .5s;will-change:transform}
.pill:hover{border-color:var(--edge-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.8),var(--glow)}
.pill-v{position:relative;height:clamp(120px,13vw,152px);overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.pill-v img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12);
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .6s}
.pill:hover .pill-v img{transform:scale(1.07)}
.pill-v::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--surf),transparent 66%)}
.pill-b{padding:16px 18px 20px;text-align:center;position:relative;z-index:2}
.pill h3{font-size:clamp(14px,1.55vw,18px);font-variation-settings:'wdth' 100;letter-spacing:-.01em}
.pill .n{font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--dim-2);display:block;margin-bottom:8px}
.pill ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.pill li{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--edge);border-radius:999px;padding:4px 8px}

/* ══════════════ VOLLBREITE BÄNDER ══════════════ */
.band{position:relative;overflow:hidden;display:grid;align-items:center;
  min-height:clamp(420px,52vw,660px);padding-block:clamp(56px,8vw,110px);isolation:isolate}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(1) contrast(1.16) brightness(.46)}
:root[data-theme="light"] .band>img{filter:grayscale(1) contrast(1.02) brightness(1.18);opacity:.5}
.band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--void) 4%,color-mix(in srgb,var(--void) 62%,transparent) 44%,transparent 76%),
             linear-gradient(to bottom,var(--void),transparent 22%,transparent 74%,var(--void)),
             radial-gradient(70% 90% at 92% 50%,rgba(var(--a-warm),.22),transparent 62%)}
.band-in{position:relative;z-index:2;max-width:var(--axis)}
.band-h{font-size:clamp(30px,6.4vw,84px);letter-spacing:-.032em;max-width:13ch}
.band-in .lead{max-width:44ch;margin-top:clamp(16px,2.2vw,24px)}
.band-l{list-style:none;margin:clamp(24px,3.4vw,42px) 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:clamp(12px,2vw,28px);font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.band-l li{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.band-l li:not(:last-child)::after{content:"";width:18px;height:1px;background:var(--metal-line)}
.band--founder::after{background:linear-gradient(80deg,var(--void) 6%,color-mix(in srgb,var(--void) 58%,transparent) 48%,transparent 82%),
             linear-gradient(to bottom,var(--void),transparent 22%,transparent 72%,var(--void)),
             radial-gradient(60% 80% at 84% 46%,rgba(var(--a-warm),.2),transparent 60%)}
.sign{margin-top:clamp(22px,3vw,34px);font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(14px,1.7vw,19px);font-variation-settings:'wdth' 100;letter-spacing:-.01em}
.sign span{display:block;margin-top:6px;font-family:var(--mono);font-weight:400;font-size:9.5px;
  letter-spacing:.2em;color:var(--dim);text-transform:uppercase}

/* ══════════════ WORK TILES ══════════════ */
.tiles{display:grid;gap:14px}
@media(min-width:720px){.tiles{grid-template-columns:repeat(6,1fr)}}
.tile{position:relative;border-radius:var(--r);overflow:hidden;display:block;grid-column:span 6;
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s}
@media(min-width:720px){
  .tile--lg{grid-column:span 4}.tile--sm{grid-column:span 2}.tile--md{grid-column:span 3}
}
.tile:hover{transform:translateY(-6px);box-shadow:0 36px 64px -34px rgba(0,0,0,.9)}
.tile-m{position:relative;overflow:hidden;aspect-ratio:var(--ar,16/10)}
.tile-m img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.82);
  transition:filter .6s;will-change:transform}
.tile:hover .tile-m img{filter:grayscale(1) contrast(1.18) brightness(1.02)}
.tile-c{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;padding:12px 14px;border-radius:13px;
  background:rgba(10,11,12,.42);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px) brightness(1.1);-webkit-backdrop-filter:blur(16px) brightness(1.1);
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.tile-c b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(12px,1.5vw,17px);font-variation-settings:'wdth' 100;letter-spacing:-.01em;color:#fff}
.tile-c span{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.tile-c .go{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.3);flex:none;
  display:grid;place-items:center;transition:.35s}
.tile:hover .tile-c .go{background:#fff;border-color:#fff;transform:rotate(45deg)}
.tile:hover .tile-c .go svg{stroke:#0A0B0C}
.tile-c .go svg{stroke:#fff;width:11px;height:11px;transition:stroke .35s}

/* ══════════════ 3D SCREENS ══════════════ */
.stage{perspective:1600px;padding-block:clamp(26px,4vw,52px);display:flex;justify-content:center;
  align-items:center;gap:clamp(10px,1.6vw,26px);flex-wrap:wrap}
.scr{position:relative;width:clamp(210px,26vw,330px);aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  border:1px solid var(--edge);transform-style:preserve-3d;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.95);transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .6s}
.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.6) contrast(1.1)}
.scr:nth-child(1){transform:rotateY(21deg) rotateX(4deg) rotateZ(-1.6deg) translateZ(-56px)}
.scr:nth-child(2){transform:rotateX(3deg) translateZ(40px) scale(1.06);z-index:3}
.scr:nth-child(3){transform:rotateY(-21deg) rotateX(4deg) rotateZ(1.6deg) translateZ(-56px)}
.scr:hover{transform:rotateY(0) rotateX(0) rotateZ(0) translateZ(70px) scale(1.08);z-index:5;
  box-shadow:0 50px 90px -34px rgba(0,0,0,1),var(--glow)}
.scr .sheen{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 32%,transparent 58%)}
.ui{position:absolute;inset:0;z-index:3}
.ui rect,.ui line,.ui circle{stroke:rgba(255,255,255,.55);fill:none;stroke-width:1}
.ui .f{fill:rgba(255,255,255,.16);stroke:none}
.ui .s{fill:rgba(255,255,255,.62);stroke:none}
.scr .lab{position:absolute;left:12px;bottom:10px;z-index:5;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}

/* ══════════════ REELS ══════════════ */
.fan{display:flex;justify-content:center;align-items:center;gap:clamp(8px,1.1vw,15px);
  overflow-x:auto;padding-block:10px 20px;scrollbar-width:none}
.fan::-webkit-scrollbar{display:none}
.fan figure{margin:0;flex:none;position:relative;width:clamp(112px,14vw,176px);aspect-ratio:9/16;
  border-radius:14px;overflow:hidden;border:1px solid var(--edge);
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.fan img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85)}
.fan figure:nth-child(1){transform:rotate(-3.4deg) translateY(18px) scale(.9)}
.fan figure:nth-child(2){transform:rotate(-1.6deg) translateY(7px) scale(.96)}
.fan figure:nth-child(3){transform:scale(1.05);z-index:3}
.fan figure:nth-child(4){transform:rotate(1.6deg) translateY(7px) scale(.96)}
.fan figure:nth-child(5){transform:rotate(3.4deg) translateY(18px) scale(.9)}
.fan figure:hover{transform:scale(1.1) translateY(-8px);z-index:5;box-shadow:0 30px 50px -22px rgba(0,0,0,.9),var(--glow)}
.fan figcaption{position:absolute;left:8px;right:8px;bottom:8px;padding:5px 8px;border-radius:8px;text-align:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:#fff;
  background:rgba(10,11,12,.45);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px)}

/* ══════════════ NUMBERS ══════════════ */
.nums{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:900px){.nums{grid-template-columns:repeat(4,1fr)}}
.nm{padding:clamp(20px,2.8vw,32px) 14px;text-align:center}
.nm b{display:block;font-family:var(--disp);font-weight:800;font-variation-settings:'wdth' 112;
  font-size:clamp(32px,5.4vw,66px);line-height:.86;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.nm span{display:block;margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* ══════════════ CONTACT ══════════════ */
.big{font-size:clamp(30px,6.8vw,96px);font-variation-settings:'wdth' 108;letter-spacing:-.034em;line-height:.92}
.clines{display:grid;gap:10px;margin-top:clamp(26px,3.6vw,44px)}
@media(min-width:720px){.clines{grid-template-columns:repeat(3,1fr)}}
.cl{padding:18px;text-align:center;transition:border-color .4s,box-shadow .4s,transform .4s}
.cl:hover{border-color:var(--edge-2);box-shadow:var(--glow);transform:translateY(-4px)}
.cl b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(13px,1.6vw,18px);
  font-variation-settings:'wdth' 100}
.cl span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  display:block;margin-top:7px}
form{display:grid;gap:12px;max-width:560px;margin:clamp(28px,3.6vw,46px) auto 0;text-align:left;
  padding:clamp(20px,3vw,34px)}
.frow{display:grid;gap:12px}
@media(min-width:520px){.frow{grid-template-columns:1fr 1fr}}
label{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);
  display:block;margin-bottom:7px}
input,textarea,select{width:100%;font-family:var(--body);font-size:14.5px;font-weight:300;color:var(--txt);
  background:transparent;border:0;border-bottom:1px solid var(--edge);border-radius:0;padding:9px 2px;transition:border-color .3s}
textarea{resize:vertical;min-height:72px}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--txt)}
select option{background:var(--surf);color:var(--txt)}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:11px;color:var(--dim);line-height:1.5}
.consent input{width:14px;height:14px;flex:none;margin-top:2px;accent-color:var(--txt);border-bottom:0}
.fmsg{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;border:1px dashed var(--edge-2);padding:11px;color:var(--dim)}

/* ══════════════ FOOTER ══════════════ */
footer{border-top:1px solid var(--edge);overflow:hidden;max-width:100%;padding-block:clamp(32px,4.6vw,56px) 24px;text-align:center}
.fnav{display:flex;flex-wrap:wrap;gap:clamp(12px,2.2vw,26px);justify-content:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.fnav a:hover{color:var(--txt)}
.legal{margin-top:20px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--dim-2);line-height:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ══════════════ REVEAL (JS-gated so no-JS stays visible) ══════════════ */
.js [data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.js [data-rv].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js [data-rv]{opacity:1;transform:none}
}

/* ══════════════ AKZENTE — nur für Bewegung, Hover und Hintergrund ══════════════ */
:root{
  --a-warm:255,106,42;      /* Orange   */
  --a-cool:27,106,112;      /* Petrol   */
  --a-amber:240,168,92;     /* Amber    */
  --a-str:.14;              /* Deckkraft im Dunkeln */
  --glow-warm:0 0 30px rgba(var(--a-warm),.34);
}
:root[data-theme="light"]{ --a-str:.10; --glow-warm:0 0 28px rgba(var(--a-warm),.26); }

/* driftende Verlaufsflächen hinter allem — sehr leise */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient b{position:absolute;display:block;border-radius:50%;filter:blur(90px);
  opacity:var(--a-str);will-change:transform;animation:float var(--d,30s) ease-in-out infinite alternate}
.ambient b:nth-child(1){background:radial-gradient(circle,rgba(var(--a-warm),1),transparent 66%);
  width:58vw;height:58vw;left:-12vw;top:-8vw;--d:34s}
.ambient b:nth-child(2){background:radial-gradient(circle,rgba(var(--a-cool),1),transparent 66%);
  width:52vw;height:52vw;right:-10vw;top:24vh;--d:41s;animation-delay:-8s}
.ambient b:nth-child(3){background:radial-gradient(circle,rgba(var(--a-amber),1),transparent 68%);
  width:44vw;height:44vw;left:18vw;bottom:-14vw;--d:37s;animation-delay:-16s}
@keyframes float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6%,-5%,0) scale(1.16)}}
main{position:relative;z-index:2}

/* Hover greift den Verlauf auf statt reinem Weiß */
.btn:hover{box-shadow:var(--glow-warm)}
.pill:hover,.cl:hover,.scr:hover,.fan figure:hover{box-shadow:0 26px 54px -28px rgba(0,0,0,.85),var(--glow-warm)}
.tile:hover{box-shadow:0 34px 62px -32px rgba(0,0,0,.9),0 0 34px rgba(var(--a-warm),.22)}


/* ══════════════ HERO-VIDEO ══════════════ */
.hero-vid{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Das Showreel ist 9:16 — deshalb wird der Rahmen in Hochformat-Proportion
   ueber den Hero hinaus skaliert, damit nie schwarze Balken stehen bleiben. */
.hero-vid iframe{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:max(100vw,calc(100vh * 16 / 9));height:max(100vh,calc(100vw * 9 / 16));border:0;
  filter:grayscale(1) contrast(1.08);opacity:1}
/* Das Video laeuft voll durch — gedimmt wird es nur von einer schwarzen
   Flaeche darueber, nicht ueber Deckkraft oder Helligkeit. */
.hero-vid::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(0,0,0,.66)}
:root[data-theme="light"] .hero-vid::before{background:rgba(242,243,244,.74)}
.hero-vid::after{content:"";position:absolute;inset:0;z-index:3;
  background:radial-gradient(74% 66% at 50% 46%,transparent 0%,var(--void) 92%),
             linear-gradient(to bottom,var(--void),transparent 16%,
               transparent 58%,rgba(var(--void-rgb),.55) 82%,var(--void) 100%)}

/* ══════════════ USP-BLÖCKE — gleich groß, nebeneinander, kräftig ══════════════ */
.usps{display:grid;gap:14px;align-items:stretch}
@media(min-width:620px){.usps{grid-template-columns:repeat(2,1fr)}}
/* Fuenf Saeulen: ab Tablet drei, ab grossem Bildschirm alle fuenf nebeneinander */
@media(min-width:1040px){.usps{grid-template-columns:repeat(5,1fr);gap:11px}}
@media(min-width:1040px){.usp-v{height:clamp(130px,11vw,160px)}
  .usp-b{padding:15px 14px 18px;gap:10px}
  .usp h3{font-size:clamp(14px,1.15vw,16px);min-height:2.4em}
  .usp p{font-size:12.5px}
  .usp li{font-size:8px;padding:3px 8px}}
.usp{display:flex;flex-direction:column;min-height:100%;padding:0;overflow:hidden;
  border-radius:var(--r);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .45s}
.usp:hover{transform:translateY(-8px);border-color:rgba(var(--a-warm),.45);
  box-shadow:0 34px 60px -30px rgba(0,0,0,.85),0 0 40px rgba(var(--a-warm),.2)}
.usp-v{position:relative;height:clamp(150px,15.5vw,196px);overflow:hidden;flex:none}
.usp-v img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) contrast(1.05);
  transition:transform .85s cubic-bezier(.16,1,.3,1),filter .6s}
.usp:hover .usp-v img{filter:saturate(1.2) contrast(1.1) brightness(1.06)}
.usp:hover .usp-v img{transform:scale(1.08)}
.usp-v::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--void) 4%,transparent 74%),
             linear-gradient(120deg,rgba(var(--a-warm),.20),transparent 62%)}
.usp-n{position:absolute;left:16px;top:13px;z-index:3;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.24em;color:rgba(255,255,255,.72)}
.usp-b{padding:18px 18px 22px;display:flex;flex-direction:column;gap:12px;flex:1;text-align:center}
.usp h3{font-size:clamp(15px,1.7vw,19px);font-variation-settings:'wdth' 100;letter-spacing:-.012em;
  line-height:1.16;min-height:2.32em;display:block}
.usp h3 span{display:block}
.usp h3 span+span{color:var(--dim);font-weight:700}
.usp:hover h3 span+span{color:rgba(var(--a-warm),1)}
.usp p{color:var(--dim);font-size:13px;margin:0}
.usp ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.usp li{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--edge);border-radius:999px;padding:4px 9px;transition:border-color .3s,color .3s}
.usp:hover li{border-color:rgba(var(--a-warm),.32);color:var(--txt)}

/* ══════════════ REFERENZ-VIDEOS ══════════════ */
.refs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.ref{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--edge);
  background:var(--surf);display:block;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .4s}
.ref:hover{transform:translateY(-6px);border-color:rgba(var(--a-warm),.4);
  box-shadow:0 32px 58px -30px rgba(0,0,0,.9),0 0 34px rgba(var(--a-warm),.18)}
.ref.portrait{grid-row:span 2}
.ref-m{position:relative;overflow:hidden;background:#000}
.ref.landscape .ref-m{aspect-ratio:16/9}
.ref.portrait  .ref-m{aspect-ratio:9/16}
.ref-m iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(1) contrast(1.1) brightness(.82);transition:filter .5s}
/* Kachel und Video haben dasselbe Seitenverhaeltnis (data-ar steuert die
   Kachelform), deshalb genuegt inset:0 — ohne container-type, das in
   Kombination mit filter auf einem iframe das Bild schwarz laesst. */
.ref:hover .ref-m iframe{filter:grayscale(.15) contrast(1.05) brightness(1)}
.ref-c{padding:13px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ref-c b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:14px;
  font-variation-settings:'wdth' 100;letter-spacing:-.012em}
.ref-c span{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ref-c em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:rgba(var(--a-warm),.95);
  display:block;margin-top:5px}

/* ══════════════ NEWS ══════════════ */
.news{display:grid;gap:16px}
@media(min-width:760px){.news{grid-template-columns:repeat(3,1fr)}}
.post{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;border:1px solid var(--edge);
  background:var(--surf);text-align:left;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .45s}
.post:hover{transform:translateY(-6px);border-color:rgba(var(--a-warm),.4);
  box-shadow:0 30px 56px -30px rgba(0,0,0,.85),0 0 32px rgba(var(--a-warm),.16)}
.post-m{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;flex:none}
.post-m iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(1) contrast(1.1) brightness(.78);transition:filter .5s}
/* 9:16 in einer 16:9-Kachel: hochskalieren und mittig beschneiden */
.post-m iframe[data-ar="9-16"]{inset:auto;left:0;top:50%;width:100%;height:316%;
  transform:translateY(-50%)}
.post:hover .post-m iframe{filter:grayscale(.2) brightness(.96)}
.post-b{padding:17px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.post .meta{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);
  display:flex;gap:9px;align-items:center}
.post .meta i{font-style:normal;width:3px;height:3px;border-radius:50%;background:rgba(var(--a-warm),.9);display:block}
.post h3{font-size:clamp(15px,1.8vw,19px);font-variation-settings:'wdth' 100;letter-spacing:-.014em}
.post p{color:var(--dim);font-size:13px;margin:0}
.post .more{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt);display:flex;align-items:center;gap:7px}
.post .more::after{content:"";width:16px;height:1px;background:currentColor;transition:width .35s}
.post:hover .more::after{width:28px}

/* Artikel-Ansicht */
.reader{position:fixed;inset:0;z-index:95;background:color-mix(in srgb,var(--void) 92%,transparent);
  backdrop-filter:blur(26px);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .45s}
.reader.on{opacity:1;pointer-events:auto}
.reader-in{max-width:min(720px,100%);margin:0 auto;padding:clamp(70px,10vw,110px) var(--gut) 80px}
.reader h2{font-size:clamp(26px,5vw,52px);margin-bottom:14px}
.reader .meta{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim-2);margin-bottom:22px}
.reader .body{color:var(--dim);font-size:16px;line-height:1.75;white-space:pre-line;text-align:left}
.reader .vid{aspect-ratio:16/9;margin:26px 0;border-radius:var(--r);overflow:hidden;background:#000}
.reader .vid.tall{aspect-ratio:9/16;max-width:min(100%,380px);margin-inline:auto}
.reader .vid iframe{width:100%;height:100%;border:0}
.reader .close{position:fixed;top:22px;right:var(--gut);z-index:3;background:none;border:0;cursor:pointer;
  color:var(--txt);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px}
.reader .close svg{stroke:currentColor;stroke-width:1.5;transition:transform .5s}
.reader .close:hover svg{transform:rotate(90deg)}

/* ══════════════ KONTAKT — leichter, ohne Kasten ══════════════ */
form.bare{background:none;border:0;backdrop-filter:none;padding:0;max-width:640px;gap:22px}
form.bare::before{display:none}
form.bare label{font-family:var(--body);font-size:12px;font-weight:300;letter-spacing:.01em;
  text-transform:none;color:var(--dim-2);margin-bottom:4px}
form.bare input,form.bare textarea,form.bare select{font-size:16px;font-weight:300;padding:8px 0;
  border-bottom-color:var(--edge);background:none}
form.bare input:focus,form.bare textarea:focus,form.bare select:focus{border-bottom-color:rgba(var(--a-warm),.8)}
form.bare .frow{gap:22px}
form.bare .consent{font-size:11.5px;color:var(--dim-2)}
.cl{border:0;border-top:1px solid var(--edge);border-radius:0;background:none;backdrop-filter:none;
  padding:20px 4px;text-align:left;display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.cl:last-of-type{border-bottom:1px solid var(--edge)}
.cl:hover{transform:none;box-shadow:none;border-top-color:rgba(var(--a-warm),.55)}
.cl b{font-family:var(--body);font-weight:400;text-transform:none;font-size:clamp(17px,2.2vw,23px);
  letter-spacing:-.01em;transition:color .3s}
.cl:hover b{color:rgba(var(--a-warm),1)}
.cl span{font-family:var(--body);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--dim-2);margin:0}
.clines{grid-template-columns:1fr!important;gap:0;margin-top:clamp(24px,3vw,38px)}

/* ══════════════ LOGO ══════════════ */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{height:19px;width:auto;display:block}
:root[data-theme="light"] .brand img{filter:invert(1)}

/* ══════════════ UNTERSCHIED — was uns anders macht ══════════════ */
.diffs{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(34px,4.4vw,56px);text-align:left}
@media(min-width:720px){.diffs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.diffs{grid-template-columns:repeat(3,1fr)}}
.diff{background:var(--void);padding:clamp(22px,2.8vw,34px);display:flex;flex-direction:column;gap:9px;
  transition:background .4s}
.diff:hover{background:var(--surf)}
.diff em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--acc)}
.diff b{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(14px,1.6vw,18px);
  font-variation-settings:'wdth' 100;letter-spacing:-.012em;line-height:1.12}
.diff span{color:var(--dim);font-size:13.5px;line-height:1.55}
.diff:last-child{grid-column:1/-1}
@media(min-width:1100px){.diff:last-child{grid-column:auto}}

/* ══════════════ BOGEN AUS SCREENS ══════════════ */
.arc{display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,2.4vw,34px);
  padding-block:clamp(16px,2.6vw,34px) clamp(24px,3.4vw,46px);flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;perspective:1400px}
.arc::-webkit-scrollbar{display:none}
.arc figure{margin:0;flex:none;position:relative;width:clamp(132px,16vw,212px);aspect-ratio:9/16;
  border-radius:16px;overflow:hidden;border:1px solid var(--edge);background:#000;
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .4s}
.arc figure iframe,.arc figure img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.84);transition:filter .5s}
.arc figure:hover iframe,.arc figure:hover img{filter:grayscale(.1) contrast(1.04) brightness(1)}
.arc figure:nth-child(1){transform:rotate(-3.2deg) translateY(26px)}
.arc figure:nth-child(2){transform:rotate(-1.2deg) translateY(2px)}
.arc figure:nth-child(3){transform:rotate(1.2deg) translateY(2px)}
.arc figure:nth-child(4){transform:rotate(3.2deg) translateY(26px)}
.arc figure:hover{transform:translateY(-10px) scale(1.06) rotate(0);z-index:5;
  border-color:rgba(var(--a-warm),.5);box-shadow:0 34px 58px -26px rgba(0,0,0,.92),0 0 40px var(--acc-glow)}
.arc figcaption{position:absolute;left:8px;right:8px;bottom:8px;padding:6px 9px;border-radius:9px;text-align:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:rgba(10,11,12,.5);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px);z-index:3}

/* ══════════════ PARTNERWAND ══════════════ */
.wall{display:flex;flex-wrap:wrap;justify-content:center;gap:0;margin-top:clamp(30px,4vw,52px);
  border-top:1px solid var(--edge);border-left:1px solid var(--edge)}
.wall span{flex:1 1 190px;min-width:164px;padding:clamp(20px,2.6vw,32px) 14px;text-align:center;
  border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(14px,1.55vw,20px);font-variation-settings:'wdth' 84;
  letter-spacing:-.005em;color:var(--txt);opacity:.5;
  display:flex;align-items:center;justify-content:center;line-height:1.05;
  position:relative;overflow:hidden;
  transition:opacity .35s,color .35s,background .35s,letter-spacing .45s}
.wall span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--metal);background-size:260% 100%;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.wall span:hover::after{transform:scaleX(1)}
.wall span:hover{opacity:1;color:var(--acc);letter-spacing:.005em;
  background:color-mix(in srgb,var(--acc) 8%,transparent)}

/* ══════════════ WELTKARTE ══════════════ */
.map{position:relative;width:100%;max-width:1060px;margin-inline:auto;aspect-ratio:1800/698;
  margin-top:clamp(28px,3.8vw,48px)}
.map__dots,.map__line{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;
  background-size:contain}
.map__dots{background-image:url(/img/worldmap-dots-v4.png);opacity:.14}
.map__line{background-image:url(/img/worldmap-line-v4.png);opacity:.3;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.12))}
:root[data-theme="light"] .map__dots{filter:invert(1);opacity:.26}
:root[data-theme="light"] .map__line{filter:invert(1);opacity:.42}
.map{cursor:crosshair}
.map__dots,.map__line{transition:opacity .7s ease,filter .7s ease}
.map:hover .map__dots{opacity:.24}
.map:hover .map__line{opacity:.46;filter:drop-shadow(0 0 9px rgba(var(--a-warm),.28))}
.map i{position:absolute;border-radius:50%;background:var(--acc);
  translate:-50% -50%;animation:ping 3.6s ease-out infinite;animation-delay:var(--d,0s);
  transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),
             opacity .45s,box-shadow .45s}
/* eine unsichtbare, groessere Trefferflaeche, damit man die feinen Punkte trifft */
.map i::before{content:"";position:absolute;inset:-11px;border-radius:50%}
/* Gewichtung: wo oefter, da groesser und heller */
.map i.w1{width:3px;height:3px;opacity:.5;box-shadow:0 0 5px rgba(var(--a-warm),.42)}
.map i.w2{width:4.5px;height:4.5px;opacity:.68;box-shadow:0 0 8px rgba(var(--a-warm),.55)}
.map i.w3{width:7px;height:7px;opacity:.9;background:var(--metal);background-size:260% 100%;
  box-shadow:0 0 13px rgba(var(--a-warm),.7),0 0 30px rgba(var(--a-warm),.26)}
.map i.w3::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(var(--a-warm),.34);animation:halo 3.6s ease-out infinite;animation-delay:inherit;
  transition:inset .45s cubic-bezier(.22,1,.36,1),border-color .45s}
/* beim Ueberfahren wachsen die Orte und gluehen */
.map:hover i{opacity:.92}
.map i:hover{z-index:6;animation-play-state:paused}
.map i.w1:hover{width:9px;height:9px;opacity:1;box-shadow:0 0 16px rgba(var(--a-warm),.9),0 0 40px rgba(var(--a-warm),.4)}
.map i.w2:hover{width:12px;height:12px;opacity:1;box-shadow:0 0 20px rgba(var(--a-warm),.95),0 0 48px rgba(var(--a-warm),.45)}
.map i.w3:hover{width:17px;height:17px;opacity:1;box-shadow:0 0 26px rgba(var(--a-warm),1),0 0 64px rgba(var(--a-warm),.5)}
.map i.w3:hover::after{inset:-10px;border-color:rgba(var(--a-warm),.7)}
@keyframes ping{0%{transform:scale(.68)}50%{transform:scale(1)}100%{transform:scale(.68)}}
@keyframes halo{0%{transform:scale(.6);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

/* ══════════════ FAQ ══════════════ */
.faq{max-width:840px;margin:clamp(30px,4vw,52px) auto 0;text-align:left;
  border-top:1px solid var(--edge)}
.faq details{border-bottom:1px solid var(--edge)}
.faq summary{list-style:none;cursor:pointer;padding:clamp(17px,2.2vw,24px) 40px clamp(17px,2.2vw,24px) 0;
  position:relative;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-variation-settings:'wdth' 98;letter-spacing:-.012em;font-size:clamp(13.5px,1.6vw,18px);
  line-height:1.24;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acc)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;
  background:currentColor;translate:0 -50%;transition:.4s}
.faq summary::before{content:"";position:absolute;right:11.75px;top:50%;width:1.5px;height:13px;
  background:currentColor;translate:0 -50%;transition:.4s}
.faq details[open] summary{color:var(--acc)}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq p{color:var(--dim);font-size:14.5px;line-height:1.72;padding:0 30px clamp(20px,2.6vw,28px) 0;margin:0}

/* ══════════════ GRÜNDER ══════════════ */
.founder{display:grid;justify-items:center;gap:clamp(20px,3vw,34px);text-align:center}
/* Das Portrait schiebt sich nach unten hinter die Ueberschrift und
   laeuft dabei frueher aus — dadurch sitzt er tiefer im Bild. */
.founder__ph{width:clamp(180px,24vw,300px);position:relative;z-index:0;
  margin-bottom:clamp(-132px,-7.4vw,-36px)}
.founder > div:not(.founder__ph){position:relative;z-index:2}
.founder__ph img{width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 92%);
  mask-image:linear-gradient(to bottom,#000 58%,transparent 92%)}
.founder__ph::after{content:"";position:absolute;inset:auto 0 6% 0;height:60%;z-index:-1;
  background:radial-gradient(60% 60% at 50% 70%,rgba(var(--a-warm),.28),transparent 70%);filter:blur(28px)}

/* ══════════════ LEAD-STRECKE ══════════════ */
.flowbox{max-width:720px;margin:clamp(30px,4vw,50px) auto 0;text-align:left}
.fsteps{display:flex;gap:8px;margin-bottom:clamp(22px,3vw,32px);justify-content:center}
.fsteps b{flex:1;max-width:120px;height:2px;border-radius:2px;background:var(--edge);position:relative;
  transition:background .5s}
.fsteps b.on{background:var(--metal);background-size:260% 100%;box-shadow:0 0 12px var(--acc-glow);
  animation:sweep 6s linear infinite}
.pane{display:none}
.pane.on{display:block;animation:fadeup .6s cubic-bezier(.22,1,.36,1) both}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pane h3{font-size:clamp(19px,2.6vw,30px);text-align:center;margin-bottom:clamp(18px,2.4vw,26px)}
.opts{display:grid;gap:10px}
@media(min-width:600px){.opts{grid-template-columns:repeat(2,1fr)}}
.opt{text-align:left;padding:clamp(15px,2vw,20px);border-radius:var(--r);cursor:pointer;
  border:1px solid var(--edge);background:var(--glass);color:var(--txt);font:inherit;
  display:flex;flex-direction:column;gap:5px;transition:border-color .35s,background .35s,transform .35s}
.opt:hover{border-color:rgba(var(--a-warm),.55);transform:translateY(-3px)}
.opt.sel{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.opt b{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:13.5px;
  font-variation-settings:'wdth' 100;letter-spacing:-.01em}
.opt span{font-size:12px;color:var(--dim)}
.back{margin-top:16px;background:none;border:0;cursor:pointer;color:var(--dim);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 0}
.back:hover{color:var(--txt)}
.fine{font-size:11px;color:var(--dim-2);line-height:1.55;margin-top:14px;text-align:center}
.fine a{text-decoration:underline;text-underline-offset:2px}

/* ══════════════ SCHNELLKONTAKT RECHTS ══════════════ */
.quick{position:fixed;right:clamp(10px,1.4vw,18px);top:50%;translate:0 -50%;z-index:80;
  display:grid;gap:9px}
@media(max-width:760px){.quick{top:auto;bottom:14px;right:14px;translate:0;grid-auto-flow:column}}
.quick a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);transition:border-color .35s,background .35s,transform .35s}
.quick a:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);transform:scale(1.08)}
.quick svg{width:17px;height:17px;stroke:var(--txt);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.quick a:hover svg{stroke:var(--acc)}

/* ══════════════ GROSSER FOOTER ══════════════ */
.fbig{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.86;
  font-size:min(10.6vw,152px);letter-spacing:-.045em;font-variation-settings:'wdth' 96;
  text-align:center;margin-block:clamp(26px,4vw,52px) clamp(18px,2.4vw,30px);
  background:var(--metal);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:sweep 12s linear infinite;
  opacity:.9;white-space:nowrap}

/* Navigation etwas glasiger */
.bar{background:color-mix(in srgb,var(--surf) 26%,transparent);
  backdrop-filter:blur(30px) saturate(1.35) brightness(1.06);
  -webkit-backdrop-filter:blur(30px) saturate(1.35) brightness(1.06)}

/* ══════════════ UNTERSEITEN ══════════════ */
.probs{list-style:none;margin:clamp(28px,3.6vw,46px) auto 0;padding:0;max-width:840px;
  display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  border-radius:var(--r-lg);overflow:hidden;text-align:left}
@media(min-width:760px){.probs{grid-template-columns:repeat(2,1fr)}}
.probs li{background:var(--void);padding:clamp(18px,2.4vw,26px);color:var(--dim);
  font-size:14.5px;line-height:1.55;position:relative;padding-left:clamp(40px,4vw,52px)}
.probs li::before{content:"\201E";position:absolute;left:clamp(16px,1.8vw,22px);top:clamp(12px,1.6vw,18px);
  font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;color:var(--acc);opacity:.7}
.ticks{list-style:none;margin:clamp(26px,3.4vw,44px) auto 0;padding:0;max-width:840px;
  display:grid;gap:10px;text-align:left}
@media(min-width:680px){.ticks{grid-template-columns:repeat(2,1fr)}}
.ticks li{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:var(--r);
  border:1px solid var(--edge);background:var(--glass);font-size:14px;transition:border-color .35s}
.ticks li:hover{border-color:rgba(var(--a-warm),.45)}
.ticks li::before{content:"";flex:none;width:7px;height:7px;margin-top:6px;border-radius:50%;
  background:var(--metal);background-size:260% 100%;box-shadow:0 0 10px var(--acc-glow)}
.band-in.mid .tag.hair{justify-content:center}
.band-in.mid .acts{justify-content:center}

/* ══════════════ NEWSLETTER IM FUSS ══════════════ */
/* Leise Zeile unter der Wortmarke — kein Block, nur ein Angebot. */
.nl{max-width:430px;margin:clamp(4px,.9vw,12px) auto clamp(22px,3vw,34px);
  text-align:center;display:grid;gap:11px}
.nl-row{border-bottom:1px solid var(--edge);padding-bottom:6px;transition:border-color .4s}
.nl-row:focus-within{border-bottom-color:var(--acc)}
.nl-row input{background:transparent;border:0;text-align:left;color:var(--txt)}
.nl-row input::placeholder{color:var(--dim-2)}
.nl label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim-2);line-height:1.7;margin:0}
.nl-row{display:flex;gap:10px;align-items:center;justify-content:center}
.nl-row input{flex:1 1 auto;min-width:0;font-family:var(--body);font-size:14px;font-weight:300;
  padding:6px 0;text-align:left}
.nl-row input:focus{outline:none}
.nl-row .txtbtn{flex:none;font-size:15px;letter-spacing:-.01em;padding:0}
.nl-row .txtbtn svg{width:15px;stroke-width:2.2}
.nl-msg{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--acc);margin:0}

/* ══════════════ DAS SIND WIR — acht USPs mit Druck ══════════════ */
.usp8{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);
  border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(34px,4.4vw,56px);text-align:left}
@media(min-width:720px){.usp8{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.usp8{grid-template-columns:repeat(4,1fr)}}
.u8{background:var(--void);padding:clamp(22px,2.6vw,32px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:9px;min-height:clamp(180px,17vw,230px);
  transition:background .45s}
.u8::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--metal);background-size:260% 100%;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.u8:hover::before{transform:scaleX(1)}
.u8:hover{background:var(--surf)}
.u8-i{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:var(--dim-2);transition:color .4s}
.u8:hover .u8-i{color:var(--acc)}
.u8-big{font-family:var(--disp);font-weight:800;line-height:.82;letter-spacing:-.045em;
  font-size:clamp(46px,6.4vw,86px);display:block;margin-block:2px 4px;white-space:nowrap}
.u8-big i{font-style:normal;font-size:.26em;margin-left:.22em;vertical-align:.9em;letter-spacing:.04em}
.u8-ico{display:block;margin-block:2px 4px;height:clamp(46px,6.4vw,86px);display:flex;align-items:center}
.u8-ico svg{width:clamp(40px,5.2vw,68px);height:auto;fill:none;stroke:url(#mg);stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;color:var(--acc);stroke:currentColor;opacity:.95;
  filter:drop-shadow(0 0 14px var(--acc-glow))}
.u8-ico svg path[d^="M13.2"]{fill:currentColor;stroke:none}
.u8 h3{font-size:clamp(15px,1.7vw,20px);font-variation-settings:'wdth' 100;letter-spacing:-.012em;line-height:1.14}
.u8 p{color:var(--dim);font-size:13.5px;line-height:1.55;margin:0}
.u8--wide{justify-content:flex-start}
@media(min-width:1080px){.u8--wide{grid-column:span 2}}
.usp8 + .acts{margin-top:clamp(28px,3.6vw,44px)}

/* ══════════════ PARTNERWAND — Logoplätze ══════════════ */
.wall span img{max-height:34px;max-width:100%;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.66;transition:opacity .35s,filter .35s}
:root[data-theme="light"] .wall span img{filter:brightness(0)}
.wall span:hover img{opacity:1;
  filter:brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(-13deg)}

/* ══════════════ MOBIL: Anfragestrecke und Bogen ══════════════ */
@media(max-width:620px){
  .flowbox{max-width:100%}
  .fsteps b{max-width:none}
  .opts{grid-template-columns:1fr}
  .opt{padding:14px 15px}
  .ref-c{flex-direction:column;align-items:center;text-align:center;gap:7px;padding:15px 14px 18px}
  .ref-c>div{width:100%;display:grid;gap:5px;justify-items:center}
  .ref-c b{font-size:15px}
  .ref-c em{display:block}
  .ref-c .go{margin-top:1px;opacity:.75}
  .cl{flex-direction:column;align-items:center;text-align:center;gap:5px;padding:16px 2px}
  .cl b{font-size:17px;word-break:break-word}
  form.bare .frow{grid-template-columns:1fr;gap:18px}
  .arc{padding-inline:var(--gut);margin-inline:calc(var(--gut) * -1);
       scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)}
  .arc figure{scroll-snap-align:center}
  .arc figure:nth-child(1),.arc figure:nth-child(4){transform:rotate(0) translateY(16px)}
  .arc figure:nth-child(2),.arc figure:nth-child(3){transform:rotate(0) translateY(0)}
  .quick a{width:38px;height:38px}
}
/* ══════════════ MOBIL: Kundennamen als Wortwolke ══════════════ */
@media(max-width:760px){
  .wall{border:0;gap:7px 6px;margin-top:clamp(26px,5vw,38px);align-items:center}
  .wall span{flex:0 0 auto;min-width:0;border:1px solid var(--edge);border-radius:999px;
    padding:8px 13px;font-size:12px;letter-spacing:.005em;opacity:.72;line-height:1;
    background:color-mix(in srgb,var(--surf) 92%,transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    animation:bub 7s ease-in-out infinite;will-change:transform}
  .wall span::after{display:none}
  .wall span img{max-height:17px}
  /* Groessen springen, damit die Wolke lebt */
  .wall span:nth-child(5n+1){font-size:15.5px;padding:10px 16px;opacity:.9}
  .wall span:nth-child(4n+3){font-size:11px;padding:7px 11px;opacity:.62}
  /* ein Teil traegt den orangen Glanz */
  .wall span:nth-child(3n+2){color:var(--acc);opacity:.96;
    border-color:color-mix(in srgb,var(--acc) 44%,transparent);
    background:color-mix(in srgb,var(--acc) 11%,transparent);
    box-shadow:0 0 20px -6px var(--acc-glow)}
  /* und ein paar Namen stehen in Metall */
  .wall span:nth-child(6n+4){opacity:1;border-color:color-mix(in srgb,var(--acc) 32%,transparent);
    background-image:var(--metal);background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:bub 7s ease-in-out infinite,sweep 9s linear infinite}
  /* versetzte Bewegung, damit nichts im Gleichschritt wippt */
  .wall span:nth-child(2n){animation-delay:-1.4s}
  .wall span:nth-child(3n){animation-delay:-2.9s}
  .wall span:nth-child(5n){animation-delay:-4.3s}
  .wall span:nth-child(7n){animation-delay:-5.6s}
  .wall span:active{opacity:1;transform:scale(.96)}
}
@keyframes bub{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.wall span{animation:none!important}}

section[id]{scroll-margin-top:96px}

/* ══════════════ TEXTBUTTON HELL ══════════════ */
.txtbtn--plain span{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--txt);-webkit-text-fill-color:var(--txt);animation:none;transition:color .35s}
.txtbtn--plain svg{stroke:var(--txt);filter:none;transition:stroke .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.txtbtn--plain:hover span{color:var(--acc);-webkit-text-fill-color:var(--acc)}
.txtbtn--plain:hover svg{stroke:var(--acc);filter:drop-shadow(0 0 12px var(--acc-glow))}

/* ══════════════ MAUSZEIGER ══════════════ */
.cur,.curr{display:none}
@media(hover:hover) and (pointer:fine){
  html.cursor-on,html.cursor-on *{cursor:none}
  .cur,.curr{display:block;position:fixed;left:0;top:0;z-index:400;pointer-events:none;
    border-radius:50%;translate:-50% -50%;will-change:transform}
  .cur{width:8px;height:8px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.45);
    transition:width .4s cubic-bezier(.22,1,.36,1),height .4s cubic-bezier(.22,1,.36,1),
               background .4s,box-shadow .4s,opacity .3s}
  .curr{width:32px;height:32px;border:1px solid rgba(255,255,255,.34);background:transparent;
    transition:width .55s cubic-bezier(.22,1,.36,1),height .55s cubic-bezier(.22,1,.36,1),
               background .5s,border-color .5s,opacity .3s}
  :root[data-theme="light"] .cur{background:#111;box-shadow:0 0 12px rgba(0,0,0,.3)}
  :root[data-theme="light"] .curr{border-color:rgba(0,0,0,.28)}
  html.cur-hot .cur{width:6px;height:6px;background:var(--acc);
    box-shadow:0 0 18px var(--acc-glow)}
  html.cur-hot .curr{width:76px;height:76px;
    background:color-mix(in srgb,var(--acc) 17%,transparent);
    border-color:color-mix(in srgb,var(--acc) 58%,transparent)}
  html.cur-out .cur,html.cur-out .curr{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  html.cursor-on,html.cursor-on *{cursor:auto}
  .cur,.curr{display:none!important}
}

/* ══════════════ DREI GROSSE PROJEKTE ══════════════ */
.refs--big{grid-template-columns:1fr;gap:clamp(16px,2.2vw,26px)}
@media(min-width:760px){.refs--big{grid-template-columns:repeat(3,1fr)}}
.refs--big .ref.portrait{grid-row:auto}
.refs--big .ref-c{padding:clamp(16px,1.7vw,22px)}
.refs--big .ref-c b{font-size:clamp(15px,1.5vw,19px)}
.refs--big .ref-c span{font-size:9px}
.refs--big .ref-c em{font-size:10px}
@media(min-width:760px){
  .refs--big .ref-m{aspect-ratio:4/3!important}
  .refs--big .ref.portrait .ref-m iframe{height:230%;top:50%;transform:translateY(-50%)}
}

/* ══════════════ PARTNERLISTE AB TABLET — dezent und gleichmaessig ══════════════ */
@media(min-width:761px){
  .wall{border:0;justify-content:center;align-items:baseline;
    gap:clamp(11px,1.35vw,18px) clamp(26px,3.3vw,54px);
    max-width:1060px;margin:clamp(34px,4.4vw,58px) auto 0;
    padding-block:clamp(8px,1.2vw,16px)}
  .wall span{flex:0 0 auto;min-width:0;border:0;padding:0;background:none;transform:none;
    font-family:var(--disp);font-weight:700;font-variation-settings:'wdth' 98;
    font-size:clamp(13px,1.26vw,18px);letter-spacing:.055em;line-height:1.5;
    color:var(--txt);opacity:.36;
    transition:opacity .45s,color .45s,letter-spacing .55s cubic-bezier(.22,1,.36,1)}
  .wall span::after{display:none}
  .wall span img{max-height:26px;opacity:.5}
  .wall span:hover{opacity:1;color:var(--acc);letter-spacing:.085em;
    background:none;transform:none;text-shadow:0 0 26px var(--acc-glow)}
  .wall span:hover img{opacity:1}
}


/* ══════════════ WORTMARKE IM FUSS ══════════════ */
footer.wrap{container-type:inline-size}
svg.fbig{display:block;width:100%;height:auto;overflow:visible;
  margin-block:clamp(26px,4vw,52px) clamp(18px,2.4vw,30px);opacity:.9}
svg.fbig text{font-family:var(--disp);font-weight:800;font-size:120px;
  letter-spacing:-.045em;font-variation-settings:'wdth' 104}

/* ══════════════ NACH OBEN ══════════════ */
.totop{position:fixed;left:var(--gut);bottom:22px;z-index:65;
  width:46px;height:46px;border-radius:999px;display:grid;place-items:center;
  border:1px solid var(--edge);background:color-mix(in srgb,var(--surf) 62%,transparent);
  backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  color:var(--txt);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s,visibility .45s,transform .45s cubic-bezier(.22,1,.36,1),
             border-color .35s,box-shadow .35s,color .35s}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 0 28px -6px var(--acc-glow);transform:translateY(-3px)}
.totop svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.totop:hover svg{transform:translateY(-2px)}
.totop i{position:absolute;inset:-1px;border-radius:999px;pointer-events:none;
  background:conic-gradient(from -90deg,var(--acc) calc(var(--p,0) * 1turn),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  opacity:.75}
@media(max-width:760px){
  .totop{left:10px;bottom:68px;width:40px;height:40px}
  .totop svg{width:15px;height:15px}
}

/* ══════════════ HERO-VIDEO ALS DATEI ══════════════ */
.hero-vid video{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:max(100vw,calc(100vh * 16 / 9));height:max(100vh,calc(100vw * 9 / 16));
  object-fit:cover;border:0;filter:grayscale(1) contrast(1.08)}

.doc-lang{max-width:74ch;margin:0 auto;text-align:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;line-height:1.9;
  color:var(--dim-2);border:1px solid var(--edge);border-radius:var(--r);
  padding:clamp(12px,1.6vw,18px) clamp(14px,2vw,24px)}

/* ══════════════ BILDWELT — Bento-Board ══════════════ */
/* Aufbau nach Vorlage: Wortmarke hochkant links, grosses Motiv oben,
   hohe Bildspalte rechts, Akzentfeld mit Kennzahl, Pfeilkachel, Textfeld. */
.bento{display:grid;gap:clamp(7px,.72vw,11px);margin-top:clamp(26px,3.4vw,44px);
  padding:clamp(7px,.72vw,11px);border:1px solid var(--edge);border-radius:clamp(18px,1.8vw,26px);
  background:color-mix(in srgb,var(--surf) 55%,transparent);
  grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(112px,23vw,150px)}
.bt{position:relative;overflow:hidden;border-radius:clamp(12px,1.15vw,17px);
  background:var(--void);border:0;padding:0;margin:0;display:block;
  transition:box-shadow .45s,transform .55s cubic-bezier(.22,1,.36,1),background .45s}
button.bt,a.bt{cursor:pointer}
.bt img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s;filter:saturate(1.02)}
button.bt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.84) 2%,rgba(0,0,0,.14) 46%,transparent 74%);
  opacity:.92;transition:opacity .45s}
button.bt:hover{transform:translateY(-3px);box-shadow:0 0 42px -14px var(--acc-glow)}
button.bt:hover img{transform:scale(1.06);filter:saturate(1.14) brightness(1.05)}
button.bt:hover::after{opacity:1}
.bt:focus-visible{outline:1.5px solid var(--acc);outline-offset:3px}
.bt-c{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:left;
  padding:clamp(10px,1.2vw,16px) clamp(11px,1.3vw,18px);
  transform:translateY(7px);opacity:.92;
  transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s}
button.bt:hover .bt-c{transform:none;opacity:1}
.bt-c b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(11px,1.1vw,15px);letter-spacing:-.008em;font-variation-settings:'wdth' 98;color:#fff}
.bt-c i{display:block;margin-top:2px;font-style:normal;font-family:var(--mono);
  font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.58)}

/* Wortmarke hochkant */
.bt--mark{display:grid;place-items:center;border:1px solid var(--edge);
  background:color-mix(in srgb,var(--void) 86%,transparent)}
.bt--mark span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.6vw,23px);letter-spacing:.06em;font-variation-settings:'wdth' 104;
  background:var(--metal);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:sweep 11s linear infinite}

/* Akzentfeld mit Kennzahl */
.bt--accent{background:linear-gradient(135deg,#FF6A1A 0%,#E1520B 48%,#B23C00 100%);
  padding:clamp(15px,1.7vw,24px);display:flex;flex-direction:column;justify-content:space-between;
  color:#1A0A02;text-align:left;gap:10px}
.bt-claim{margin:0;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(11.5px,1.15vw,16px);line-height:1.12;letter-spacing:-.012em;
  font-variation-settings:'wdth' 100;color:#190900;max-width:18ch}
.bt-num{margin:0;font-family:var(--disp);font-weight:900;line-height:.8;
  font-size:clamp(36px,4.3vw,62px);letter-spacing:-.05em;color:#fff;
  text-shadow:0 10px 40px rgba(0,0,0,.28)}
.bt-num i{font-style:normal;font-size:.3em;margin-left:.1em;vertical-align:.55em;letter-spacing:0}
.bt-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(8px,1vw,14px)}
.bt-sub{margin:0 0 .35em;flex:0 1 auto;max-width:12ch;text-align:right;
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;line-height:1.45;
  text-transform:uppercase;color:rgba(25,9,0,.74)}

/* Pfeilkachel */
.bt--go{display:grid;place-items:center;border:1px solid var(--edge);
  background:color-mix(in srgb,var(--void) 86%,transparent);color:var(--txt)}
.bt--go svg{width:clamp(20px,2vw,28px);height:auto;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.bt--go:hover{color:var(--acc);box-shadow:0 0 36px -12px var(--acc-glow);
  background:color-mix(in srgb,var(--acc) 9%,transparent)}
.bt--go:hover svg{transform:translate(3px,-3px)}

/* Textfeld */
.bt--info{border:1px solid var(--edge);background:color-mix(in srgb,var(--void) 86%,transparent);
  padding:clamp(14px,1.6vw,22px);display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  text-align:left}
.bt--info ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.bt--info li{position:relative;padding-left:14px;color:var(--dim);
  font-size:clamp(11.5px,1.05vw,13.5px);line-height:1.4}
.bt--info li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;
  border-radius:50%;background:var(--acc)}
.bt--info .txtbtn{align-self:flex-start;font-size:clamp(13px,1.25vw,17px)}
.bt--info .txtbtn svg{width:15px}

/* Handy: zwei Spalten. Wortmarke und Pfeilkachel entfallen,
   die Kopfzeile traegt dort bereits den Titel. */
@media(max-width:999.98px){
  .bt--mark,.bt--go{display:none}
  .bt--accent,.bt--info{grid-column:span 2}
  .bt--set,.bt--studio{grid-column:span 2}
  .bt--crowd,.bt--drone{grid-row:span 2}
}

@media(min-width:1000px){
  .bento{grid-template-columns:clamp(46px,4.4vw,64px) repeat(5,1fr);
    grid-auto-rows:clamp(118px,9.6vw,158px)}
  .bt--mark{grid-column:1;grid-row:1/7}
  .bt--mark span{writing-mode:vertical-rl;transform:rotate(180deg)}
  .bt--set   {grid-column:2/5;grid-row:1/3}
  .bt--crowd {grid-column:5/7;grid-row:1/4}
  .bt--accent{grid-column:2/4;grid-row:3}
  .bt--go    {grid-column:4;  grid-row:3}
  .bt--lens  {grid-column:2;  grid-row:4}
  .bt--edit  {grid-column:3/5;grid-row:4}
  .bt--drone {grid-column:5/7;grid-row:4/6}
  .bt--stage {grid-column:2/5;grid-row:5}
  .bt--team  {grid-column:2;  grid-row:6}
  .bt--info  {grid-column:3/5;grid-row:6}
  .bt--studio{grid-column:5/7;grid-row:6}
}

/* ══════════════ LIGHTBOX ══════════════ */
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(4,5,6,.9);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s;padding:clamp(16px,4vw,54px)}
:root[data-theme="light"] .lb{background:rgba(238,239,241,.92)}
.lb.on{opacity:1;visibility:visible}
.lb-in{margin:0;max-width:min(1200px,92vw);max-height:86vh;display:grid;gap:12px;justify-items:center}
.lb-in img{max-width:100%;max-height:78vh;width:auto;height:auto;display:block;
  border-radius:var(--r);border:1px solid var(--edge);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9);transform:scale(.97);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.lb.on .lb-in img{transform:none}
.lb-in figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim-2);text-align:center}
.lb-x,.lb-nav{position:absolute;background:none;border:1px solid var(--edge);border-radius:999px;
  cursor:pointer;color:var(--txt);display:grid;place-items:center;
  transition:color .3s,border-color .3s,box-shadow .3s,transform .4s}
.lb-x{top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);width:42px;height:42px}
.lb-nav{top:50%;translate:0 -50%;width:46px;height:46px}
.lb-prev{left:clamp(10px,2vw,26px)}
.lb-next{right:clamp(10px,2vw,26px)}
.lb-x:hover,.lb-nav:hover{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 0 26px -8px var(--acc-glow)}
.lb-prev:hover{transform:translate(-3px,-50%)}
.lb-next:hover{transform:translate(3px,-50%)}
.lb-x svg,.lb-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:620px){.lb-nav{width:38px;height:38px}.lb-in img{max-height:66vh}}

/* ══════════════ FILTER DER REFERENZSEITE ══════════════ */
.filters{display:grid;gap:clamp(10px,1.4vw,16px);margin-bottom:clamp(18px,2.4vw,28px)}
.frow2{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap}
.flab{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim-2);flex:none;min-width:58px}
.fchips{display:flex;flex-wrap:wrap;gap:7px}
.chip{background:none;border:1px solid var(--edge);border-radius:999px;cursor:pointer;
  padding:7px 14px;line-height:1;color:var(--dim);
  font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:11px;
  font-variation-settings:'wdth' 92;letter-spacing:.01em;
  transition:color .3s,border-color .3s,background .3s,box-shadow .3s}
.chip:hover{color:var(--txt);border-color:var(--edge-2)}
.chip.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 52%,transparent);
  background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:0 0 20px -6px var(--acc-glow)}
.refcount{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim-2);margin:0 0 clamp(14px,1.8vw,20px)}
@media(max-width:620px){
  .frow2{gap:8px}
  .flab{min-width:100%}
  .chip{font-size:10.5px;padding:6px 12px}
}

/* ══════════════ RECHTSSEITEN ══════════════ */
.doc{padding-block:clamp(40px,6vw,86px)}
.doc-in{max-width:74ch;margin-inline:auto;text-align:left}
.doc-in h2{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,2.4vw,27px);line-height:1.08;letter-spacing:-.02em;
  margin-top:clamp(34px,4.4vw,58px);margin-bottom:clamp(12px,1.6vw,18px);
  padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--edge);
  display:flex;gap:.6em;align-items:baseline}
.doc-in h2:first-child{margin-top:0;border-top:0;padding-top:0}
.doc-in h2 i{font-style:normal;font-family:var(--mono);font-size:.5em;letter-spacing:.14em;
  color:var(--acc);flex:none}
.doc-in h3{font-size:clamp(14px,1.7vw,18px);margin-top:clamp(22px,2.6vw,30px);margin-bottom:8px;
  font-variation-settings:'wdth' 100;letter-spacing:-.01em}
.doc-in p{color:var(--dim);font-size:14.5px;line-height:1.66;margin:0 0 12px}
.doc-in a{color:rgba(var(--a-warm),1);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;word-break:break-word}
.doc-in ul,.doc-in ol{color:var(--dim);font-size:14.5px;line-height:1.66;
  margin:0 0 14px;padding-left:1.15em}
.doc-in li{margin-bottom:5px}
.doc-row{display:grid;grid-template-columns:auto 1fr;gap:10px clamp(12px,1.6vw,20px);
  margin-bottom:11px;align-items:baseline}
.doc-row b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--acc);
  padding-top:3px}
.doc-row p{margin:0}
.doc-card{border:1px solid var(--edge);border-radius:var(--r);background:var(--surf);
  padding:clamp(18px,2.4vw,28px);margin-bottom:clamp(16px,2vw,22px)}
.doc-card p{margin:0 0 6px;color:var(--txt);font-size:15px}
.doc-card p:last-child{margin-bottom:0}
.doc-note{border-left:2px solid var(--acc);padding:2px 0 2px 16px;margin:clamp(18px,2.4vw,26px) 0}
.doc-note p{color:var(--dim-2);font-size:13px;margin:0}
.doc-meta{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);margin-bottom:clamp(20px,2.6vw,30px);text-align:center}
@media(max-width:620px){
  .doc-in{max-width:100%}
  .doc-in p,.doc-in ul,.doc-in ol{font-size:14px}
  .doc-row{grid-template-columns:1fr;gap:2px}
  .doc-row b{padding-top:0}
}

/* Auf dem Handy nehmen sich die Schnellkontakte zurueck */
@media(max-width:760px){
  .quick{gap:7px;right:10px;bottom:10px}
  .quick a:nth-child(4){display:none}
  .quick a{background:color-mix(in srgb,var(--void) 72%,transparent)}
  body{padding-bottom:56px}
}

/* ══════════════ SENDEN — Textbutton statt Kapsel ══════════════ */
.sendbtn{justify-self:center;background:none;border:0;cursor:pointer;padding:6px 2px;
  display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,20px);
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,4.6vw,56px);line-height:1;letter-spacing:-.035em;
  font-variation-settings:'wdth' 92;
  background-image:var(--metal);background-size:260% 100%;-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:sweep 8s linear infinite;transition:gap .4s}
.sendbtn svg{flex:none;width:clamp(28px,3.8vw,46px);height:auto;
  fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 10px var(--acc-glow))}
.sendbtn:hover{gap:clamp(18px,2.4vw,30px)}
.sendbtn:hover svg{transform:translateX(6px)}
.sendbtn:disabled{opacity:.45;cursor:progress}
.sendbtn:focus-visible{outline:1.5px solid var(--acc);outline-offset:8px;border-radius:6px}

/* ══════════════ TEXTBUTTON — Lets-talk-Stil statt Kapsel ══════════════ */
.acts{align-items:center;gap:clamp(12px,2vw,26px)}
.txtbtn{background:none;border:0;padding:4px 2px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,16px);
  font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(21px,3vw,38px);line-height:1;letter-spacing:-.032em;
  font-variation-settings:'wdth' 92;white-space:nowrap;
  transition:gap .4s cubic-bezier(.22,1,.36,1)}
.txtbtn span{background-image:var(--metal);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:sweep 8s linear infinite}
.txtbtn svg{flex:none;width:clamp(22px,2.6vw,33px);height:auto;
  fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 10px var(--acc-glow))}
.txtbtn:hover{gap:clamp(16px,2vw,26px)}
.txtbtn:hover svg{transform:translateX(5px)}
.txtbtn:focus-visible{outline:1.5px solid var(--acc);outline-offset:8px;border-radius:6px}
.txtbtn--sm{font-size:clamp(16px,1.9vw,21px);gap:9px;letter-spacing:-.018em}
.txtbtn--sm svg{width:18px;stroke-width:2.2}
.txtbtn--sm:hover{gap:13px}

/* ══════════════ SCHRITTZAEHLER DER ANFRAGESTRECKE ══════════════ */
.fhead{display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  margin-bottom:clamp(22px,3vw,32px)}
.fhead .fsteps{margin:0;flex:1 1 auto}
.fhead .fsteps b{max-width:none}
.fcount{flex:none;font-family:var(--disp);font-weight:900;line-height:1;
  font-size:clamp(22px,2.8vw,32px);letter-spacing:-.02em;
  background-image:var(--metal);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:sweep 8s linear infinite}
.fcount i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  color:var(--dim-2);-webkit-text-fill-color:var(--dim-2);margin-left:5px;vertical-align:.5em}

/* ══════════════ FUENF USPs — zwei breite oben, drei darunter ══════════════ */
@media(min-width:720px) and (max-width:1079.98px){
  .usp5 .u8:last-child{grid-column:span 2}
}
@media(min-width:1080px){
  .usp5{grid-template-columns:repeat(6,1fr)}
  .usp5 .u8{grid-column:span 2}
  .usp5 .u8--wide{grid-column:span 3}
  .usp5 .u8--wide .u8-big{font-size:clamp(60px,7.4vw,104px)}
  .usp5 .u8--wide h3{font-size:clamp(18px,2vw,25px)}
}

/* ══════════════ TRENNER ══════════════ */
/* Der Trenner sitzt in einem gerundeten Feld — wie das Bento-Board.
   Dadurch gibt es keine durchlaufende Kante mehr quer ueber die Seite:
   der Schein bleibt im Feld und laeuft an den Raendern weich aus. */
.divider{position:relative;border:0;text-align:center;
  padding-block:clamp(44px,6.4vw,104px)}
.divider-box{position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--edge);border-radius:clamp(20px,2vw,32px);
  background:color-mix(in srgb,var(--surf) 52%,transparent);
  padding:clamp(54px,8.4vw,132px) clamp(20px,4vw,64px);
  box-shadow:0 40px 90px -56px rgba(0,0,0,.95),0 0 70px -42px var(--acc-glow)}
.divider-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(56% 70% at 50% 50%,rgba(var(--a-warm),.26),transparent 74%)}
/* weiche Ecken statt harter: das Feld dunkelt nach aussen ab */
.divider-box::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(118% 128% at 50% 50%,transparent 46%,rgba(var(--void-rgb),.85) 100%)}
.divider-h{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(23px,4.4vw,56px);line-height:1.06;letter-spacing:-.032em;
  font-variation-settings:'wdth' 98;max-width:22ch;margin-inline:auto;text-wrap:balance}
.divider-h > span{display:block}
/* die Glühlinie ist der eigentliche Trenner */
.divider-rule{display:block;height:2px;border-radius:2px;margin:clamp(20px,3vw,38px) auto;
  width:clamp(160px,34vw,520px);
  background:linear-gradient(90deg,transparent,var(--acc) 22%,#FFD9B3 50%,var(--acc) 78%,transparent);
  box-shadow:0 0 26px var(--acc-glow),0 0 60px rgba(var(--a-warm),.28);
  transform:scaleX(.12);transform-origin:50% 50%;
  transition:transform 1.3s cubic-bezier(.22,1,.36,1) .15s,opacity .8s;opacity:.55}
.js [data-rv].in .divider-rule,.divider-h.in .divider-rule{transform:scaleX(1);opacity:1}
@media(max-width:620px){.divider-h{max-width:17ch}}
@media(min-width:900px){
  .divider .wrap{max-width:1340px}
  .divider-h{max-width:none;font-size:min(3.3vw,46px);line-height:1.06}
  .divider-h .dl-1,.divider-h .dl-2{padding:0}
}
@media(min-width:1400px){.divider-h{font-size:48px}}


/* ══════════════ PROZESS ALS SCHIENE ══════════════ */
/* Eigene Fassung fuer die Leistungsseite: eine senkrechte Schiene, die sich
   beim Scrollen fuellt, statt der versetzten Karten mit Draht von der Startseite. */
.proc--rail .flow{--rail:clamp(44px,5.6vw,84px);--fill:0%;
  position:relative;display:grid;gap:clamp(12px,1.7vw,22px)}
.proc--rail .flow::before,.proc--rail .flow::after{content:"";position:absolute;
  left:calc(var(--rail)/2 - 1px);width:2px;border-radius:2px;pointer-events:none}
.proc--rail .flow::before{top:14px;bottom:14px;
  background:linear-gradient(to bottom,transparent,var(--edge) 6%,var(--edge) 94%,transparent)}
.proc--rail .flow::after{top:14px;height:var(--fill);z-index:2;
  background:linear-gradient(to bottom,var(--acc-soft),var(--acc) 38%,#FFD9B3);
  box-shadow:0 0 16px var(--acc-glow);transition:height .2s linear}
.proc--rail .wire{display:none}

.proc--rail .fstep{display:grid;grid-template-columns:var(--rail) 1fr;
  align-items:start;position:relative}
/* Knoten auf der Schiene */
.proc--rail .fstep::before{content:"";position:absolute;z-index:3;
  left:calc(var(--rail)/2 - 6px);top:clamp(20px,2.6vw,32px);
  width:12px;height:12px;border-radius:50%;background:var(--void);
  border:2px solid var(--edge);transition:all .6s cubic-bezier(.22,1,.36,1)}
.proc--rail .fstep.on::before{border-color:var(--acc);background:var(--acc);
  box-shadow:0 0 0 5px rgba(var(--a-warm),.13),0 0 20px var(--acc-glow)}

.proc--rail .fstep>.scard{grid-column:2;position:relative;overflow:hidden;
  border-radius:clamp(12px,1.2vw,18px);
  padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,30px);
  background:color-mix(in srgb,var(--surf) 44%,transparent);
  border:1px solid var(--edge);box-shadow:none;
  opacity:.3;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),border-color .6s}
.proc--rail .fstep.on>.scard{opacity:1;transform:none;border-color:rgba(var(--a-warm),.28);
  box-shadow:0 20px 48px -34px rgba(0,0,0,.9)}
/* Grosse Geisterziffer im Ruecken der Karte */
.proc--rail .scard .n{position:absolute;right:clamp(8px,1.2vw,18px);top:clamp(-4px,.2vw,6px);
  margin:0;z-index:1;font-family:var(--disp);font-weight:800;line-height:1;
  font-size:clamp(44px,6.4vw,96px);letter-spacing:-.045em;
  color:rgba(var(--a-warm),.10);transition:color .6s}
.proc--rail .fstep.on .scard .n{color:rgba(var(--a-warm),.24)}
.proc--rail .scard h3,.proc--rail .scard p{position:relative;z-index:2}
.proc--rail .scard h3{font-size:clamp(18px,2.3vw,27px)}
.proc--rail .scard p{max-width:62ch}
@media(max-width:620px){
  .proc--rail .flow{--rail:30px}
  .proc--rail .scard .n{font-size:clamp(38px,13vw,56px)}
}

/* ══════════════ BILDWELT OHNE AUSSENRAHMEN ══════════════ */
/* Fassung fuer die Agenturseite: keine Klammer, keine senkrechte Wortmarke —
   die Kacheln stehen frei nebeneinander wie die Kennzahlen-Boxen. */
.bento--bare{padding:0;border:0;background:none;
  gap:clamp(10px,1.05vw,15px)}
.bento--bare .bt{border-radius:clamp(14px,1.35vw,20px);
  border:1px solid var(--edge)}
.bento--bare .bt--mark{display:none}
@media(min-width:900px){
  /* fuenf Spalten statt sechs — die Spalte der Wortmarke faellt weg */
  .bento--bare{grid-template-columns:repeat(5,1fr)}
  .bento--bare .bt--set   {grid-column:1/4;grid-row:1/3}
  .bento--bare .bt--crowd {grid-column:4/6;grid-row:1/4}
  .bento--bare .bt--accent{grid-column:1/3;grid-row:3}
  .bento--bare .bt--go    {grid-column:3;  grid-row:3}
  .bento--bare .bt--lens  {grid-column:1;  grid-row:4}
  .bento--bare .bt--edit  {grid-column:2/4;grid-row:4}
  .bento--bare .bt--drone {grid-column:4/6;grid-row:4/6}
  .bento--bare .bt--stage {grid-column:1/4;grid-row:5}
  .bento--bare .bt--team  {grid-column:1;  grid-row:6}
  .bento--bare .bt--info  {grid-column:2/4;grid-row:6}
  .bento--bare .bt--studio{grid-column:4/6;grid-row:6}
}

/* ══════════════ EINGEBETTETE VIDEOS: ZEIGER LAEUFT WEITER ══════════════ */
/* Ein iframe schluckt alle Mausereignisse — sobald der Zeiger darueber
   kommt, bekommt die Seite kein mousemove mehr und der eigene Zeiger
   friert an der Kante ein. Die Player laufen ohnehin stumm im Hintergrund,
   also nehmen wir ihnen die Ereignisse ab; geklickt wird auf den Rahmen. */
.arc figure iframe,.ref-m iframe,.post-m iframe{pointer-events:none}
.arc figure{cursor:pointer}

/* ══════════════ VIDEO-LIGHTBOX ══════════════ */
/* Gleiche Buehne wie die Bild-Lightbox, nur mit Hochformat-Rahmen
   und eigenen Tasten fuer Abspielen und Anhalten. */
.vb-in{margin:0;display:grid;gap:clamp(12px,1.6vw,18px);justify-items:center}
.vb-frame{position:relative;width:min(420px,86vw);aspect-ratio:9/16;max-height:72vh;
  border-radius:var(--r);overflow:hidden;border:1px solid var(--edge);background:#000;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.9);
  transform:scale(.97);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.lb.on .vb-frame{transform:none}
.vb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vb-bar{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px)}
.vb-btn{background:none;border:1px solid var(--edge);border-radius:999px;cursor:pointer;
  color:var(--txt);display:grid;place-items:center;width:46px;height:46px;
  transition:color .3s,border-color .3s,box-shadow .3s,transform .35s}
.vb-btn:hover{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 0 26px -8px var(--acc-glow);transform:translateY(-2px)}
.vb-btn[aria-pressed="true"]{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.vb-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.vb-btn svg.fill{fill:currentColor;stroke:none}
.vb-cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim-2);text-align:center}
@media(max-width:620px){.vb-frame{width:min(340px,82vw);max-height:64vh}
  .vb-btn{width:42px;height:42px}}

/* ══════════════ SCHWEBENDE ELEMENTE WEICHEN MODALEN ══════════════ */
/* Die Kontaktleiste und der Nach-oben-Knopf lagen bisher ueber den
   Lightboxen und haben deren rechten Pfeil abgefangen. Sie treten
   zurueck, solange ein Fenster offen ist. */
.quick,.totop{transition:opacity .3s, visibility .3s}
html:has(.lb.on) .quick,html:has(.lb.on) .totop,
html:has(.reader.on) .quick,html:has(.reader.on) .totop{
  opacity:0;visibility:hidden;pointer-events:none}

/* ══════════════ EIGENER VIDEOPLAYER ══════════════ */
/* Ersetzt die Bedienleiste von Vimeo durch eine, die zur Seite passt:
   oranger Rand, Mono-Ziffern, dieselben runden Tasten wie die Lightbox. */
.vp{position:relative;display:grid;gap:clamp(9px,1.1vw,13px)}
.vp-stage{position:relative;overflow:hidden;background:#000;
  aspect-ratio:21/9;                        /* Kinoformat */
  border-radius:clamp(14px,1.4vw,20px);
  border:1px solid color-mix(in srgb,var(--acc) 58%,transparent);
  box-shadow:0 0 0 4px rgba(var(--a-warm),.07),
             0 50px 110px -54px rgba(0,0,0,.95),
             0 0 60px -26px var(--acc-glow)}
.vp--tall .vp-stage{aspect-ratio:9/16}
/* Das Material ist 16:9, der Rahmen 21:9 und damit breiter. Das Bild wird
   auf volle Breite gezogen und oben wie unten beschnitten — 21/16 der
   Rahmenhoehe, damit nirgends ein schwarzer Balken stehen bleibt. */
.vp-embed{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:100%;height:131.25%}
.vp--tall .vp-embed{width:100%;height:100%}
.vp-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* grosse Taste in der Mitte, solange nichts laeuft */
.vp-big{position:absolute;inset:0;margin:auto;width:clamp(56px,6vw,74px);height:clamp(56px,6vw,74px);
  border-radius:50%;cursor:pointer;z-index:3;display:grid;place-items:center;
  background:color-mix(in srgb,var(--void) 55%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--acc) 62%,transparent);color:var(--txt);
  box-shadow:0 0 34px -10px var(--acc-glow);
  transition:opacity .35s,visibility .35s,transform .4s cubic-bezier(.22,1,.36,1),color .3s}
.vp-big:hover{color:var(--acc);transform:scale(1.07)}
.vp-big svg{width:clamp(20px,2.2vw,26px);height:clamp(20px,2.2vw,26px);fill:currentColor;stroke:none;
  margin-left:3px}
.vp.is-playing .vp-big{opacity:0;visibility:hidden}

/* Bedienleiste */
.vp-bar{display:flex;align-items:center;gap:clamp(8px,1.1vw,14px)}
.vp-btn{flex:none;background:none;border:1px solid var(--edge);border-radius:999px;cursor:pointer;
  color:var(--txt);display:grid;place-items:center;width:36px;height:36px;
  transition:color .3s,border-color .3s,box-shadow .3s}
.vp-btn:hover{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  box-shadow:0 0 22px -8px var(--acc-glow)}
.vp-btn svg{width:14px;height:14px;fill:currentColor;stroke:none}
.vp-btn svg.line{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vp-t{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);
  flex:none;min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
.vp-track{position:relative;flex:1 1 auto;height:20px;display:grid;align-items:center}
.vp-track::before{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:var(--edge)}
.vp-buf,.vp-fill{position:absolute;left:0;height:2px;border-radius:2px;pointer-events:none}
.vp-buf{background:var(--edge-2);width:0}
.vp-fill{width:0;background:linear-gradient(90deg,var(--acc-soft),var(--acc) 55%,#FFD9B3);
  box-shadow:0 0 12px var(--acc-glow)}
.vp-seek{position:relative;z-index:2;width:100%;margin:0;background:none;-webkit-appearance:none;
  appearance:none;height:20px;cursor:pointer}
.vp-seek:focus{outline:none}
.vp-seek:focus-visible{outline:1.5px solid var(--acc);outline-offset:4px;border-radius:4px}
.vp-seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:var(--acc);border:0;box-shadow:0 0 12px var(--acc-glow);
  transition:transform .25s}
.vp-seek::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--acc);border:0;
  box-shadow:0 0 12px var(--acc-glow)}
.vp-seek:hover::-webkit-slider-thumb{transform:scale(1.25)}
.vp-seek::-webkit-slider-runnable-track{background:none}
.vp-seek::-moz-range-track{background:none}
/* Faellt der Player aus, zeigen wir Vimeos eigene Bedienung — dann ohne unsere */
.vp--plain .vp-bar,.vp--plain .vp-big{display:none}

/* ══════════════ LESEANSICHT UND VIDEO-LIGHTBOX GROESSER ══════════════ */
.reader-in{max-width:min(1000px,100%)}
.reader .vid{aspect-ratio:auto;margin:clamp(26px,3.4vw,38px) 0;border-radius:0;overflow:visible;background:none}
.reader .vid.tall{max-width:min(100%,460px)}
.vb-frame{width:min(560px,92vw);max-height:80vh}
.lb-in,.vb-in{max-width:min(1320px,94vw);max-height:90vh}
.vb-host{width:min(560px,92vw)}

/* Der Player wird ausschliesslich ueber unsere Leiste bedient. Nimmt der
   Rahmen keine Mausereignisse an, kann er weder den Tastaturfokus stehlen
   (Escape blieb sonst im Video haengen) noch den eigenen Zeiger einfrieren. */
.vp-embed iframe{pointer-events:none}
.vp--plain .vp-embed iframe{pointer-events:auto}

/* ══════════════ HOCHFORMAT PASST INS FENSTER ══════════════ */
/* 9:16 ist hoeher als der Bildschirm, wenn man die Breite vorgibt.
   Deshalb bestimmt hier die Hoehe das Mass — Leiste und Zeile bleiben sichtbar. */
.vp--tall .vp-stage{width:min(88vw,calc(50vh * 9 / 16),280px);margin-inline:auto}  /* etwa so breit wie ein Handy */
.vb-host{width:auto;display:grid;justify-items:center}
.reader .vid.tall{max-width:min(100%,calc(50vh * 9 / 16),280px);margin-inline:auto}

/* ══════════════ CREDITS UNTER DEM VIDEO ══════════════ */
.vp-credit{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim-2);line-height:1.8;text-align:left;margin:0}
.vp--tall .vp-credit{text-align:center}
.vp-credit b{font-weight:400;color:var(--dim)}

/* ══════════════ WISCHEN ZWISCHEN DEN VIDEOS ══════════════ */
.vb-host{will-change:transform,opacity}
#vb{touch-action:none}          /* Wischen darf die Seite nicht mitziehen */
#vb .vp-bar,#vb .vb-dots{touch-action:auto}
.vb-dots{display:flex;gap:9px;justify-content:center;margin-top:clamp(10px,1.4vw,16px)}
.vb-dot{width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--edge-2);border:0;transition:all .4s cubic-bezier(.22,1,.36,1)}
.vb-dot:hover{background:var(--dim)}
.vb-dot[aria-current="true"]{width:22px;border-radius:99px;background:var(--acc);
  box-shadow:0 0 14px var(--acc-glow)}
/* Hinweis beim ersten Oeffnen, verschwindet nach der ersten Geste */
.vb-hint{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim-2);text-align:center;margin-top:8px;transition:opacity .5s}
.vb-hint.gone{opacity:0}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE FASSUNG DER STARTSEITE
   Die Reihenfolge entsteht ueber order: in einem Flex-Container, nicht
   ueber zweites Markup — dadurch bleibt der Desktop unveraendert und es
   gibt keine doppelten Inhalte fuer Suchmaschinen.
   ════════════════════════════════════════════════════════════════════ */
.nur-mobil{display:none}
.rail{position:relative}
.swipe-nav{display:none}

/* Pfeile fuer die Schienen — nur mobil sichtbar, hier steht nur das Aussehen */
.swipe-btn{-webkit-appearance:none;appearance:none;pointer-events:auto;
  width:42px;height:42px;border-radius:50%;padding:0;cursor:pointer;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--acc) 58%,transparent);
  background:color-mix(in srgb,var(--void) 62%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.92),0 0 24px -10px var(--acc-glow);
  transition:opacity .35s,transform .3s,border-color .35s,background .35s}
.swipe-btn svg{width:19px;height:19px;fill:none;stroke:var(--acc);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px var(--acc-glow))}
.swipe-btn:active{transform:scale(.9)}
.swipe-btn[disabled]{opacity:.18}
.swipe-btn:focus-visible{outline:1.5px solid var(--acc);outline-offset:3px}
/* ein kleines Antippen nach aussen zeigt, dass hier gewischt werden darf */
.swipe-prev svg{animation:nudgeL 3.2s ease-in-out infinite}
.swipe-next svg{animation:nudgeR 3.2s ease-in-out infinite}
@keyframes nudgeL{0%,74%,100%{transform:none}86%{transform:translateX(-3px)}}
@keyframes nudgeR{0%,74%,100%{transform:none}86%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.swipe-prev svg,.swipe-next svg{animation:none}}

@media(max-width:760px){

  /* ── 1. Reihenfolge ────────────────────────────────────────────── */
  .home main{display:flex;flex-direction:column}
  /* width:100% ist noetig, weil margin-inline:auto (Footer) das Strecken
     im Flex-Container aufhebt und der Block sonst auf die Polsterbreite
     zusammenfaellt. */
  .home main>*{flex:0 0 auto;width:100%;min-width:0}
  .home .hero{order:1}
  .home #founder{order:2}
  .home #pillars{order:3}
  .home #social{order:4}
  .home #zahlen{order:5}
  .home #work{order:6}
  .home #process{order:7}
  .home #contact{order:8}
  .home #faq{order:9}
  .home #world{order:10}
  .home #trusted{order:11}
  .home main>footer{order:99}
  /* Ruht mobil, bleibt auf dem Desktop vollstaendig erhalten */
  .home main>.manifest,
  .home main>.marq,
  .home main>.divider,
  .home #anders,
  .home #screens,
  .home #news{display:none}

  /* ── 2. Zwei Fassungen desselben Satzes ────────────────────────── */
  .nur-desktop{display:none!important}
  .nur-mobil{display:block}

  /* ── 3. Hero: der kleine Pfeil vor dem Knopf faellt weg ────────── */
  .home .hero .acts{justify-content:center}
  .home .hero .txtbtn svg{display:none}

  /* ── 4. Gruender: Portrait tiefer und hinter den Text ──────────── */
  .home #founder .founder__ph{width:min(66vw,280px);
    margin-bottom:clamp(-230px,-33vw,-104px);
    transform:translateY(clamp(10px,3.4vw,24px))}
  .home #founder .founder__ph img{
    -webkit-mask-image:linear-gradient(to bottom,#000 44%,transparent 86%);
    mask-image:linear-gradient(to bottom,#000 44%,transparent 86%)}

  /* ── 5. Vier Saeulen: Kacheln ohne Bild, dafuer lesbar ─────────── */
  .home #pillars .usps{gap:10px;counter-reset:saeule}
  .home #pillars .usp{counter-increment:saeule;padding:15px 16px 17px}
  .home #pillars .usp-v{display:none}
  .home #pillars .usp-b{padding:0;gap:7px;text-align:left}
  /* Die Nummer stand im Bild — ohne Bild steht sie jetzt ueber dem Titel */
  .home #pillars .usp-b::before{content:counter(saeule,decimal-leading-zero);
    font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;line-height:1;
    color:rgba(var(--a-warm),.95)}
  .home #pillars .usp h3{min-height:0;font-size:16.5px;line-height:1.2}
  .home #pillars .usp h3 span{display:inline}
  .home #pillars .usp h3 span+span::before{content:" "}
  .home #pillars .usp p{font-size:12.5px;line-height:1.55}
  .home #pillars .usp ul{justify-content:flex-start;gap:4px;margin-top:2px}
  .home #pillars .usp li{font-size:8px;padding:3px 8px}

  /* ── 6. Reels als Mediathek: mittleres Video gross ─────────────── */
  .home #social .arc{--it:min(56vw,220px);--side:calc((100vw - var(--it)) / 2);
    justify-content:flex-start;align-items:center;gap:10px;perspective:none;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--side);scroll-padding-inline:var(--side);
    padding-block:clamp(16px,4.4vw,26px) clamp(18px,5vw,30px);
    scroll-snap-type:x mandatory}
  .home #social .arc figure{width:var(--it);scroll-snap-align:center;
    transform:scale(.8);opacity:.5;
    transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s,
               border-color .45s,box-shadow .45s}
  .home #social .arc figure.is-mid{transform:scale(1);opacity:1;
    border-color:color-mix(in srgb,var(--acc) 55%,transparent);
    box-shadow:0 26px 52px -26px rgba(0,0,0,.92),0 0 34px -8px var(--acc-glow)}
  .home #social .arc figure.is-mid iframe{filter:grayscale(.06) contrast(1.04) brightness(1)}

  /* ── 7. Projekte als Schiene, immer quer ───────────────────────── */
  .home #work .refs--big{--it:min(80vw,340px);--side:calc((100vw - var(--it)) / 2);
    display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;
    scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--side);scroll-padding-inline:var(--side);
    padding-block:4px 12px}
  .home #work .refs--big::-webkit-scrollbar{display:none}
  .home #work .refs--big .ref{flex:0 0 var(--it);width:var(--it);scroll-snap-align:center;
    opacity:.55;transform:scale(.94);
    transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .45s,
               border-color .45s,box-shadow .45s}
  .home #work .refs--big .ref.is-mid{opacity:1;transform:scale(1);
    border-color:color-mix(in srgb,var(--acc) 52%,transparent);
    box-shadow:0 26px 52px -26px rgba(0,0,0,.92),0 0 32px -10px var(--acc-glow)}
  .home #work .refs--big .ref-m{aspect-ratio:16/9!important}
  .home #work .refs--big .ref.portrait .ref-m iframe{inset:auto;left:0;top:50%;
    width:100%;height:316%;transform:translateY(-50%)}
  .home #work .refs--big>.lead{flex:1 1 100%;text-align:center}

  /* ── 8. Pfeile an den Schienen ─────────────────────────────────── */
  .rail .swipe-nav{display:flex;justify-content:space-between;align-items:center;
    position:absolute;left:4px;right:4px;top:50%;translate:0 -50%;
    pointer-events:none;z-index:6}

  /* ── 9. Schnellkontakt: drei Symbole, gross und mittig ─────────── */
  .quick{left:50%;right:auto;translate:-50% 0;grid-auto-flow:column;gap:13px;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .quick a:nth-child(3){display:none}      /* E-Mail steckt im Formular */
  .quick a:nth-child(4){display:grid}      /* Anfrage bleibt sichtbar */
  .quick a{width:54px;height:54px;
    background:color-mix(in srgb,var(--void) 80%,transparent);
    border-color:color-mix(in srgb,var(--acc) 34%,transparent)}
  .quick svg{width:22px;height:22px}
  .totop{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  /* ── 10. Footer: nur Schriftzug, Newsletter, Links ─────────────── */
  footer .nl label{display:none}
  footer .nl{margin-top:clamp(10px,2.6vw,18px)}
  footer .legal{display:none}
}

/* Das zweite Videofenster (Referenzkacheln) verhaelt sich wie das erste */
#rv{touch-action:none}
#rv .vp-bar,#rv .vb-dots{touch-action:auto}

/* ══════════════════════════════════════════════════════════════════════
   AUSGEFUELLTE FELDER — kein heller Kasten mehr
   Safari und Chrome legen ueber automatisch ausgefuellte Felder einen
   eigenen Hintergrund (auf dem iPhone ein weisser Kasten). Der laesst
   sich nicht direkt abschalten; beschneidet man ihn auf die Schrift,
   bleibt vom Kasten nichts uebrig. Die endlose Transition haelt Chrome
   davon ab, seine eigene Farbe nachtraeglich einzublenden.
   ════════════════════════════════════════════════════════════════════ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:var(--txt);
  caret-color:var(--acc);
  border-bottom-color:var(--edge);
  transition:background-color 600000s 0s,color 600000s 0s}
/* Eigene Regel, damit ein Browser ohne :autofill die obere nicht verwirft */
input:autofill,textarea:autofill,select:autofill{
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:var(--txt);
  background-color:transparent;
  filter:none}
input:-webkit-autofill::first-line{
  font-family:var(--body);font-size:14.5px;font-weight:300;color:var(--txt)}
form.bare input:-webkit-autofill::first-line{font-size:16px}

/* ══════════════════════════════════════════════════════════════════════
   STANDBILD STATT SCHWARZER KACHEL
   Der Vimeo-Player braucht auf dem Handy mehrere Sekunden, bis das erste
   Bild steht. Solange zeigen wir das Vorschaubild; der Rahmen blendet
   sich erst ein, wenn er wirklich geladen hat (Klasse .rdy).
   ════════════════════════════════════════════════════════════════════ */
.ref-m,.post-m,.arc figure{background:#000}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  border:0;filter:grayscale(1) contrast(1.1) brightness(.82);transition:filter .5s}
.ref:hover .ph,.post:hover .ph,.arc figure:hover .ph{filter:grayscale(.12) contrast(1.04) brightness(1)}
.ref-m iframe,.post-m iframe,.arc figure iframe{z-index:1;opacity:0;transition:opacity .7s ease}
.ref-m iframe.rdy,.post-m iframe.rdy,.arc figure iframe.rdy{opacity:1}

/* ══════════════════════════════════════════════════════════════════════
   LEAD-STRECKE — als anklickbar erkennbar
   ════════════════════════════════════════════════════════════════════ */
.flowbox{border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
  border-radius:var(--r);padding:clamp(20px,3.2vw,36px);
  background:color-mix(in srgb,var(--surf) 55%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 90px -60px rgba(0,0,0,.95),0 0 70px -46px var(--acc-glow)}
.pane h3::after{content:"Antwort antippen";display:block;margin-top:10px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(var(--a-warm),.9)}
html[lang="en"] .pane h3::after{content:"Tap an answer"}
.pane[data-pane="3"] h3::after{content:none}
.opt{position:relative;padding-right:clamp(38px,4vw,48px);
  border-color:color-mix(in srgb,var(--acc) 30%,transparent);
  background:color-mix(in srgb,var(--acc) 5%,var(--glass))}
.opt::after{content:"";position:absolute;right:16px;top:50%;
  width:9px;height:9px;translate:0 -50%;rotate:45deg;
  border-right:1.7px solid var(--acc);border-top:1.7px solid var(--acc);
  opacity:.7;transition:translate .35s cubic-bezier(.22,1,.36,1),opacity .35s}
.opt:hover::after{translate:4px -50%;opacity:1}
.opt.sel{box-shadow:0 0 28px -12px var(--acc-glow)}

/* ══════════════════════════════════════════════════════════════════════
   MOBIL — Feinschliff
   ════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){

  /* ── Schriftgroessen: etwas mehr Praesenz ──────────────────────── */
  h1{font-size:clamp(36px,10.6vw,62px)}
  h2{font-size:clamp(29px,7.6vw,46px)!important}
  h2.big,.big{font-size:clamp(31px,8.4vw,50px)!important}
  .lead{font-size:15.5px;line-height:1.62}
  .tag{font-size:9.5px;letter-spacing:.3em}
  .pane h3{font-size:22px}
  .nm b{font-size:clamp(34px,10vw,52px)}
  .ref-c b{font-size:16px}

  /* ── Vier Saeulen: doch mit Bild, ohne Schlagworte, mittig ─────── */
  .home #pillars .usp{padding:0}
  .home #pillars .usp-v{display:block;height:clamp(150px,42vw,210px)}
  .home #pillars .usp-b{padding:16px 16px 20px;text-align:center;gap:9px}
  .home #pillars .usp-b::before{content:none}
  .home #pillars .usp h3{font-size:17px}
  .home #pillars .usp h3 span{display:block}
  .home #pillars .usp h3 span+span::before{content:none}
  .home #pillars .usp p{font-size:13px;line-height:1.55}
  .home #pillars .usp ul{display:none}

  /* ── Lead-Strecke mittig ───────────────────────────────────────── */
  .flowbox{text-align:center;padding:clamp(18px,4.6vw,26px) clamp(15px,4vw,22px)}
  .opt{text-align:center;align-items:center;padding:16px 34px 16px 34px}
  .opt::after{right:13px}
  .fhead{justify-content:center}
  .back{width:100%;text-align:center}
  form.bare{text-align:center}
  form.bare label{text-align:center}
  .fine{text-align:center}

  /* ── Pfeile vor Handlungsknoepfen weg ──────────────────────────── */
  .hero .txtbtn svg,footer .nl .txtbtn svg{display:none}

  /* ── Let's talk groesser ───────────────────────────────────────── */
  .sendbtn{font-size:clamp(31px,8.6vw,46px)}
  .sendbtn svg{width:30px}

  /* ── Markenliste: edel nebeneinander, leicht versetzt ──────────── */
  .wall{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
    gap:9px clamp(15px,4.2vw,26px);border:0;padding:0;
    margin-top:clamp(24px,5vw,36px);max-width:none}
  .wall span{flex:0 0 auto;border:0;border-radius:0;padding:0;background:none;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;
    font-family:var(--disp);font-weight:800;text-transform:uppercase;
    font-size:11.5px;letter-spacing:.012em;line-height:1.45;color:var(--dim);opacity:.82;
    -webkit-text-fill-color:currentColor;background-image:none}
  .wall span::after{display:none}
  .wall span img{max-height:17px}
  /* Die Kapsel-Regeln weiter oben sind treffsicherer als eine reine
     Klassenregel — deshalb hier mit derselben Staerke zuruecksetzen. */
  .wall span:nth-child(n){border:0;border-radius:0;padding:0;background:none;
    background-image:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    animation:none;color:var(--dim);-webkit-text-fill-color:currentColor;
    -webkit-background-clip:border-box;background-clip:border-box}
  /* ein paar Namen treten vor, ein paar zurueck — das macht die Reihe lebendig */
  .wall span:nth-child(5n+1){font-size:13.5px;color:var(--txt);opacity:1}
  .wall span:nth-child(4n+3){font-size:10.5px;opacity:.6}
  .wall span:nth-child(3n+2){color:rgba(var(--a-warm),.95);opacity:1}
  .wall span:nth-child(2n){transform:translateY(-2px)}
  .wall span:nth-child(3n){transform:translateY(3px)}
  .wall span:active{opacity:1}

  /* ── Footer: erst die Zeile, darunter mittig der Knopf ─────────── */
  footer .nl-row{flex-direction:column;align-items:stretch;gap:16px;
    border-bottom:0;padding-bottom:0}
  footer .nl-row input{text-align:center;border-bottom:1px solid var(--edge);padding-bottom:10px}
  footer .nl-row:focus-within input{border-bottom-color:var(--acc)}
  footer .nl-row .txtbtn{justify-content:center;font-size:17px}
}

/* ══════════════════════════════════════════════════════════════════════
   ANFRAGE-BOX — Titel und ein Knopf, der wie ein Knopf aussieht
   ════════════════════════════════════════════════════════════════════ */
.flow-tag{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(var(--a-warm),1);margin:0 0 clamp(16px,2.2vw,22px);
  display:flex;align-items:center;justify-content:center;gap:12px}
.flow-tag::before,.flow-tag::after{content:"";height:1px;width:clamp(22px,4vw,46px);flex:none;
  background:linear-gradient(90deg,transparent,var(--acc))}
.flow-tag::after{background:linear-gradient(90deg,var(--acc),transparent)}

/* Der Pfeil fiel weg, dafuer bekommt "Let's talk" einen sichtbaren Rahmen —
   ohne den haben ihn viele nicht als Knopf gelesen. */
.sendbtn svg{display:none}
/* Die Fuellung kommt als Innenschatten, nicht als Hintergrund: der
   Hintergrund traegt hier die Metallschrift und wird auf die Buchstaben
   beschnitten — eine Hintergrundfarbe waere dadurch unsichtbar. */
.sendbtn{justify-self:center;border:1.5px solid var(--acc);border-radius:999px;
  padding:clamp(12px,1.6vw,17px) clamp(28px,4vw,52px);
  font-size:clamp(23px,3.4vw,40px);gap:0;
  box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--acc) 11%,transparent),
             0 18px 44px -24px var(--acc-glow);
  transition:border-color .35s,box-shadow .35s,transform .3s}
.sendbtn:hover{transform:translateY(-2px);gap:0;
  box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--acc) 20%,transparent),
             0 26px 54px -22px var(--acc-glow)}
.sendbtn:active{transform:translateY(0)}
@media(max-width:760px){
  .sendbtn{width:100%;justify-content:center;font-size:clamp(24px,7vw,34px);padding:15px 20px}
}