/* ============================================================
   CONTENT AGENCY — DESIGN SYSTEM
   Signature: Hexagon (aus dem Logo-"O") · Futurism Display ·
   Mars-Horizont-Farbwelt aus der bestehenden Art Direction
   ============================================================ */

@font-face{font-family:'Gilroy';src:url(../fonts/gilroy-100.woff2) format('woff2');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url(../fonts/gilroy-200.woff2) format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url(../fonts/gilroy-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url(../fonts/gilroy-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url(../fonts/gilroy-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url(../fonts/gilroy-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Gilroy';src:url(../fonts/gilroy-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Futurism';src:url(../fonts/Futurism.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* — Farben: destilliert aus dem bestehenden Hero-Visual — */
  --void:#06070A;
  --deep:#0A0C11;
  --surface:#10131A;
  --surface-2:#161A23;
  --paper:#EDEDEA;
  --paper-2:#DFDFDA;

  --line:rgba(238,240,244,.10);
  --line-2:rgba(238,240,244,.18);
  --line-dark:rgba(10,12,17,.14);

  --white:#F6F6F4;
  --text:#E4E5E4;
  --muted:#9BA2AA;
  --dim:#7E858E;

  --rust:#C0431C;          /* Mars-Rost — Signalfarbe */
  --rust-hi:#E8552A;
  --glow:#E9DCC8;          /* Horizontlicht */
  --steel:#2A3A45;

  /* — Typografie — */
  /* Futurism ist reine Display-Schrift — nur in grossen Groessen.
     Gilroy traegt Navigation, Labels, Headlines und Fliesstext. */
  --f-display:'Futurism','Gilroy',ui-sans-serif,sans-serif;
  --f-sans:'Gilroy',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-label:'Gilroy',ui-sans-serif,system-ui,sans-serif;

  --t-xxl:clamp(2.95rem,10.6vw,11.8rem);
  --t-xl:clamp(2.8rem,7.6vw,8.2rem);
  --t-h1:clamp(2.35rem,5.6vw,6.2rem);
  --t-h2:clamp(1.9rem,4.1vw,4.7rem);
  --t-h3:clamp(1.35rem,2.4vw,2.85rem);
  --t-h4:clamp(1.1rem,1.5vw,1.6rem);
  --t-lead:clamp(1.05rem,1.32vw,1.45rem);
  --t-body:clamp(.95rem,1.02vw,1.12rem);
  --t-small:clamp(.85rem,.9vw,.95rem);
  --t-cap:clamp(.7rem,.76vw,.82rem);

  /* — Raum — */
  --pad:clamp(1.25rem,4vw,5rem);
  --gut:clamp(1rem,1.6vw,2rem);
  --sec:clamp(5rem,9.5vw,11.5rem);
  --sec-s:clamp(3.5rem,7vw,8rem);
  --max:1780px;
  --read:74ch;

  /* — Motion — */
  --e:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --d1:.36s; --d2:.62s; --d3:.95s;

  --r:2px;              /* radius: fast eckig, technisch */
  --hdr:clamp(64px,5.4vw,92px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;max-width:100%;
  scrollbar-width:thin;scrollbar-color:rgba(200,72,32,.75) rgba(255,255,255,.05)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid transparent;background-clip:padding-box;
  background-color:#8E2F10;background-image:linear-gradient(180deg,#F0894B,#C0431C 55%,#8E2F10)}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(180deg,#FFB07A,#E8552A 55%,#A63513)}
::-webkit-scrollbar-corner{background:transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background-color:var(--void);color:var(--text);
  transition:background-color 1s ease;
  font-family:var(--f-sans);font-size:var(--t-body);font-weight:400;
  line-height:1.62;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;   /* Fallback */
  overflow-x:clip;     /* erzeugt keinen Scroll-Container -> position:sticky bleibt funktionsfaehig */
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--rust);color:#fff}
:focus-visible{outline:2px solid var(--rust-hi);outline-offset:3px;border-radius:1px}

/* ————— Skip link ————— */
.skip{position:fixed;top:.5rem;left:.5rem;z-index:999;background:var(--white);color:var(--void);
  padding:.7rem 1.1rem;transform:translateY(-160%);transition:transform .2s}
.skip:focus{transform:none}

/* ————— Layout ————— */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
@media (max-width:1024px){.grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:680px){.grid{grid-template-columns:repeat(4,1fr)}}
section{position:relative}
.sec{padding-block:var(--sec)}
.sec-s{padding-block:var(--sec-s)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ————— Typo-Utilities ————— */
.eyebrow{
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:.85rem;
  margin:0 0 clamp(1.4rem,2.4vw,2.6rem)
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--rust);flex:none}
.eyebrow.plain::before{display:none}
.d-xxl,.d-xl{font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  letter-spacing:.06em;line-height:.92;margin:0;color:var(--white)}
.d-xxl{font-size:var(--t-xxl);letter-spacing:.045em}
.d-xl{font-size:var(--t-xl)}
h1,h2,h3,h4{font-family:var(--f-sans);font-weight:200;letter-spacing:-.024em;line-height:1.04;margin:0;color:var(--white)}
h3,h4{font-weight:300}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.08}
h4{font-size:var(--t-h4);letter-spacing:-.015em;line-height:1.2}
p{margin:0 0 1.1em}
.lead{font-size:var(--t-lead);line-height:1.52;color:var(--text);font-weight:300;letter-spacing:-.012em}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.measure{max-width:var(--read)}
.mono-num{font-family:var(--f-label);font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.rust{color:var(--rust-hi)}

/* Zeilenweises Text-Reveal */
/* Die Zeilenmaske darf die Oberlaengen nicht beschneiden (sichtbar am S von
   SOFTWARE): oben und unten Luft ins Maskenfenster, per negativem Margin wieder
   aus dem Layout genommen. */
.reveal-lines .ln{display:block;overflow:hidden;
  padding-top:.22em;margin-top:-.22em;padding-bottom:.16em;margin-bottom:-.16em}
.reveal-lines .ln>span{display:block;transform:translateY(105%);
  transition:transform var(--d3) var(--e) var(--dly,0s)}
.reveal-lines.in .ln>span{transform:none}
.fade{opacity:0;transform:translateY(26px);will-change:opacity,transform;
  transition:opacity var(--d2) var(--e) var(--dly,0s),transform var(--d2) var(--e) var(--dly,0s)}
.fade.in{opacity:1;transform:none}
.mask-img{clip-path:inset(0 0 100% 0);transform:scale(1.05);transform-origin:50% 60%;
  transition:clip-path 1.15s var(--e) var(--dly,0s),transform 1.6s var(--e) var(--dly,0s)}
.mask-img.in{clip-path:inset(0 0 0 0);transform:none}

/* ————— Hexagon: das Signature-Element ————— */
.hex{
  --hx:url(#caHex);
  clip-path:var(--hx)
}
  .ca-defs{position:absolute;width:0;height:0;overflow:hidden}
.hex-badge{
  width:3rem;height:2.73rem;display:grid;place-items:center;flex:none;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.1em;color:var(--muted);
  position:relative
}
.hex-badge::before{
  content:'';position:absolute;inset:0;
  background:var(--line-2);
  clip-path:url(#caHex);
}
.hex-badge::after{
  content:'';position:absolute;inset:1px;background:var(--void);
  clip-path:url(#caHex);
}
.hex-badge>*{position:relative;z-index:1}
.hex-watermark{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.75;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 45%,#000 20%,transparent 76%);
  mask-image:radial-gradient(120% 80% at 50% 45%,#000 20%,transparent 76%)
}
.hex-watermark svg{position:absolute;top:46%;left:auto;right:-8%;transform:translateY(-50%);
  width:min(62vw,860px);height:auto;stroke:var(--line-2);fill:none}
@media (max-width:900px){.hex-watermark svg{right:-12%;width:96vw;opacity:.55}}
/* Tonlose Endlosschleife im Innenbereich des Hexagons.
   Die Flaeche liegt deckungsgleich ueber der Kontur, das Video sitzt auf 62 %
   davon und wird mit dem Logo-Hexagon beschnitten. */
.hexvid{position:absolute;top:46%;right:-8%;transform:translateY(-50%);
  width:min(62vw,860px);aspect-ratio:100/90.96;
  display:grid;place-items:center;pointer-events:none;
  /* zur Textseite hin ausblenden, damit die Ueberschrift lesbar bleibt */
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 44%);
  mask-image:linear-gradient(90deg,transparent 4%,#000 44%)}
@media (max-width:900px){.hexvid{right:-12%;width:96vw}}
.hexvid video{width:60%;height:60%;object-fit:cover;display:block;
  clip-path:url(#caHex);
  /* nach oben ausblenden, damit nichts hinter der Kopfleiste steht */
  -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 30%);
  mask-image:linear-gradient(180deg,transparent 2%,#000 30%);
  filter:grayscale(.6) contrast(1.12) brightness(.84);
  opacity:0;transform:scale(1.03);
  transition:opacity 1.4s var(--e),transform 1.8s var(--e)}
.hexvid.is-on video{opacity:.36;transform:none}
@media (max-width:900px){.hexvid.is-on video{opacity:.22}}
/* auf hellen Sektionen wuerde das Video zu hart stehen */
body[data-tone="paper"] .hexvid video{opacity:.2;filter:grayscale(.7) contrast(1.1) brightness(1.1)}
@media (prefers-reduced-motion:reduce){
  .hexvid video{transition:none;transform:none}}

/* ————— Buttons & Links ————— */
.btn{
  --bg:var(--white);--fg:var(--void);
  position:relative;display:inline-flex;align-items:center;gap:.8rem;
  padding:1.05rem 1.9rem;border-radius:var(--r);
  background:var(--bg);color:var(--fg);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;will-change:transform;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(var(--sc,1));
  transition:transform .55s cubic-bezier(.18,.9,.24,1),color .35s var(--e),box-shadow .5s var(--e)
}
.btn.is-mag{transition:transform .12s linear,color .35s var(--e),box-shadow .5s var(--e)}
.btn:hover{--sc:1.035}
.btn:active{--sc:.975;transition:transform .12s var(--e)}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--rust);
  transform:translateY(101%);transition:transform .55s cubic-bezier(.62,0,.28,1)}
.btn:hover::after{transform:none}
/* Licht-Sweep beim Hover */
.btn::before{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:38%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-160%) skewX(-16deg);opacity:0}
.btn:hover::before{animation:btnSheen .95s cubic-bezier(.3,0,.2,1) .06s}
@keyframes btnSheen{0%{opacity:0;transform:translateX(-160%) skewX(-16deg)}
  22%{opacity:1}100%{opacity:0;transform:translateX(420%) skewX(-16deg)}}
.btn .ar{transition:transform .45s var(--e)}
.btn:hover .ar{transform:translate(4px,-4px)}
[data-magnet]{transform:translate3d(var(--tx,0px),var(--ty,0px),0)}
.portalbtn{transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(var(--sc,1))}
.portalbtn:hover{--sc:1.04}
.portalbtn:active{--sc:.98}
.btn--ghost{--bg:transparent;--fg:var(--white);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(232,85,42,.5),0 18px 44px -22px rgba(232,85,42,.8)}
.btn:not(.btn--ghost):hover{box-shadow:0 18px 44px -22px rgba(232,85,42,.85)}
.btn--rust{--bg:var(--rust);--fg:#fff}
.btn--rust::after{background:var(--white)}
.btn--rust:hover{color:var(--void)}
.btn--lg{padding:1.25rem 2.4rem;font-size:calc(var(--t-cap) + 1px)}
body[data-tone="paper"] section:not([data-solid="1"]) .btn--ghost{--fg:var(--void);box-shadow:inset 0 0 0 1px var(--line-dark)}

.tlink{
  display:inline-flex;align-items:center;gap:.6rem;position:relative;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);padding-bottom:.35rem
}
.tlink::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .5s var(--e)}
.tlink:hover::after{transform-origin:left;animation:swipe .6s var(--e)}
@keyframes swipe{0%{transform:scaleX(1);transform-origin:right}
  49%{transform:scaleX(0);transform-origin:right}
  50%{transform:scaleX(0);transform-origin:left}
  100%{transform:scaleX(1);transform-origin:left}}
.tlink .ar{transition:transform .45s var(--e)}
.tlink:hover .ar{transform:translateX(5px)}

/* ————— Header ————— */
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;transition:transform .55s var(--e)}
.hdr::before{
  content:'';position:absolute;inset:0 0 -80px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,10,.94) 0%,rgba(6,7,10,.86) 44%,rgba(6,7,10,.62) 66%,rgba(6,7,10,.2) 85%,rgba(6,7,10,0) 100%);
  transition:opacity .5s var(--e)}
.hdr::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(8,9,13,.9);backdrop-filter:blur(22px) saturate(1.3);
  -webkit-backdrop-filter:blur(22px) saturate(1.3);border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .5s var(--e)}
.hdr.stuck::before{opacity:0}
.hdr.stuck::after,.hdr.mega-on::after{opacity:1}
.hdr.mega-on::before{opacity:0}
.hdr.hide{transform:translateY(-102%)}
body.mega-open .hdr.hide{transform:none}

/* ── Utility-Leiste ── */
.hdr__util{height:42px;overflow:hidden;transition:height .5s var(--e),opacity .4s var(--e)}
.hdr.stuck .hdr__util{height:0;opacity:0}
.hdr__util-in{
  width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--pad);height:42px;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  border-bottom:1px solid var(--line);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.16em;
  text-transform:uppercase}
.util-loc{display:flex;align-items:center;gap:.9rem;color:var(--muted);min-width:0}
.util-dot{width:6px;height:5.5px;background:var(--rust-hi);flex:none;clip-path:url(#caHex);
  animation:hexpulse 2.8s var(--e) infinite}
@keyframes hexpulse{0%,100%{opacity:.5;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(30deg)}}
.util-rot{display:none;height:1.4em;overflow:hidden}
.util-rot__in{display:block}
.util-rot b{display:block;height:1.4em;line-height:1.4em;font-weight:500;color:var(--white)}
.util-static{display:flex;gap:1.3rem}
.util-static span{white-space:nowrap;position:relative;transition:color .35s var(--e)}
.util-static span:hover{color:var(--white)}
@media (max-width:1320px){.util-static{display:none}.util-rot{display:block}}
.util-contact{display:flex;align-items:center;gap:1.1rem;color:var(--muted);white-space:nowrap}
.util-sep{width:1px;height:12px;background:var(--line-2)}
.util-a{display:inline-flex;align-items:center;gap:.55rem;position:relative;
  transition:color .35s var(--e)}
.util-a:hover{color:var(--white)}
.util-a__ico{width:15px;height:15px;flex:none;opacity:.6;transition:opacity .35s var(--e),transform .5s var(--e)}
.util-a__ico svg{width:100%;height:100%}
.util-a:hover .util-a__ico{opacity:1;transform:translateY(-1px) rotate(-6deg)}
.util-a__txt{display:block;height:1.35em;overflow:hidden;line-height:1.35em}
.util-a__txt span{display:block;transition:transform .5s var(--e)}
.util-a:hover .util-a__txt span{transform:translateY(-100%)}
/* Schalter fuer die Zeigerlinie — nur in der Utility-Leiste, also erst ab
   1080 px sichtbar. Auf Touch laeuft der Effekt ohnehin nicht. */
.tsw{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font:inherit;color:var(--dim);transition:color .35s var(--e)}
.tsw:hover{color:var(--muted)}
.tsw__ico{width:15px;height:15px;flex:none;color:var(--rust-hi);
  transition:color .35s var(--e),opacity .35s var(--e)}
.tsw__ico svg{width:100%;height:100%;display:block;overflow:visible}
.tsw__line{stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset .7s var(--e)}
.tsw__ptr{transition:transform .6s var(--e);transform-box:fill-box;transform-origin:center}
.tsw[aria-checked="false"] .tsw__ico{color:var(--dim);opacity:.6}
.tsw[aria-checked="false"] .tsw__line{stroke-dashoffset:100}
.tsw[aria-checked="false"] .tsw__ptr{transform:translateX(-5px)}
.tsw__t{white-space:nowrap;font-family:var(--f-label);font-weight:500;
  font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase}
.tsw__box{position:relative;width:26px;height:14px;flex:none;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-2);background:rgba(255,255,255,.03);
  transition:box-shadow .4s var(--e),background .4s var(--e)}
.tsw__box i{position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;
  background:var(--dim);
  transition:transform .45s cubic-bezier(.34,1.36,.5,1),background .4s var(--e)}
.tsw[aria-checked="true"] .tsw__box{background:rgba(232,85,42,.18);
  box-shadow:inset 0 0 0 1px rgba(232,85,42,.6)}
.tsw[aria-checked="true"] .tsw__box i{transform:translateX(12px);background:var(--rust-hi)}
.tsw:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.tsw__box i,.tsw__line,.tsw__ptr{transition:none}}

@media (max-width:1080px){.hdr__util{display:none}}

/* ── Hauptleiste ── */
.hdr__bar{height:var(--hdr);display:flex;align-items:center;transition:height .5s var(--e)}
.hdr.stuck .hdr__bar{height:calc(var(--hdr) * .82)}
.hdr:not(.stuck):not(.mega-on) .nav__link,.hdr:not(.stuck):not(.mega-on) .lang,
.hdr:not(.stuck):not(.mega-on) .util-loc,.hdr:not(.stuck):not(.mega-on) .util-contact,
.hdr:not(.stuck):not(.mega-on) .brand{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hdr__in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem}
.brand{display:flex;align-items:center;z-index:2}
.brand svg{width:clamp(126px,9.6vw,160px);height:auto;transition:width .5s var(--e),opacity .4s}
.hdr.stuck .brand svg{width:clamp(112px,8vw,134px)}
.brand:hover svg{opacity:.78}
.brand .wm-word{fill:var(--white)}
.brand .wm-sub{fill:var(--dim)}

/* ── Navigation ── */
.nav{position:relative;display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.5rem)}
.nav__link{
  position:relative;display:inline-flex;align-items:center;gap:.42rem;
  padding:.62rem .7rem;border-radius:999px;
  font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) + 1px);
  letter-spacing:.15em;text-transform:uppercase;color:rgba(246,246,244,.82);
  transition:color .3s var(--e),background .4s var(--e)}
.nav__link:hover{color:#fff}
.nav__link[aria-current="page"]{color:#fff}
.nav__txt{display:block;height:1.45em;overflow:hidden;line-height:1.45em}
.nav__txt span{display:block;transition:transform .5s var(--e)}
.nav__txt span:last-child{color:var(--rust-hi)}
.nav__link:hover .nav__txt span{transform:translateY(-100%)}
.nav__arrow{width:13px;height:13px;display:block;transition:transform .45s var(--e),color .3s}
.nav__arrow svg{width:100%;height:100%;display:block}
body.mega-open #svcTrigger,body.agd-open #agdTrigger{color:#fff}
body.mega-open #svcTrigger .nav__arrow,
body.agd-open #agdTrigger .nav__arrow{transform:rotate(180deg);color:var(--rust-hi)}
/* Eine einzige Kachel gleitet zwischen den Menuepunkten, statt dass jeder
   Punkt seine eigene Flaeche einblendet. Darunter liegt der Rost-Strich in
   Textbreite. Beide werden aus dem Element gemessen — siehe navIndicator(). */
.nav__pill{position:absolute;top:0;left:0;width:0;height:0;border-radius:999px;
  opacity:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,rgba(246,246,244,.105),rgba(246,246,244,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(246,246,244,.07);
  transition:transform .58s cubic-bezier(.34,1.3,.5,1),width .5s var(--e),
             height .4s var(--e),opacity .35s var(--e)}
.nav__pill.on{opacity:1}
/* Rost-Schimmer am unteren Rand der Kachel */
.nav__pill-g{position:absolute;left:0;right:0;bottom:0;height:60%;
  background:radial-gradient(80% 100% at 50% 130%,rgba(232,85,42,.34),transparent 70%);
  opacity:0;transition:opacity .5s var(--e)}
.nav__pill.on .nav__pill-g{opacity:1}
/* Kurzes Stauchen beim Sprung von Punkt zu Punkt */
.nav__pill.is-jump{animation:navSquash .58s cubic-bezier(.34,1.3,.5,1)}
@keyframes navSquash{0%{filter:brightness(1)}32%{filter:brightness(1.7)}100%{filter:brightness(1)}}

.nav__ind{position:absolute;top:0;left:0;height:1.5px;width:0;background:var(--rust-hi);
  opacity:0;border-radius:2px;transform-origin:left center;
  box-shadow:0 0 8px rgba(232,85,42,.5);
  transition:transform .55s cubic-bezier(.34,1.24,.5,1),width .5s var(--e),opacity .35s var(--e)}
.nav__ind.on{opacity:1}

/* ── Kundenportal-Button ── */
.hdr__side{display:flex;align-items:center;gap:clamp(.7rem,1.3vw,1.2rem)}
.portalbtn{
  position:relative;display:inline-flex;align-items:center;gap:.62rem;
  padding:.72rem 1.1rem .72rem .82rem;border-radius:999px;overflow:hidden;isolation:isolate;
  color:var(--white);font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px var(--line-2);
  transition:box-shadow .45s var(--e),color .35s var(--e),transform .5s var(--e)}
.portalbtn::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,var(--rust) 0%,var(--rust-hi) 100%);
  transform:translateY(101%) scale(1.2);transition:transform .55s var(--e);border-radius:inherit}
.portalbtn::after{content:'';position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(232,85,42,.55) 40deg,transparent 90deg);
  opacity:0;animation:sweep 3.4s linear infinite;transition:opacity .4s}
.portalbtn:hover{box-shadow:inset 0 0 0 1px transparent;color:#fff}
.portalbtn:hover::before{transform:none}
.portalbtn:hover::after{opacity:.35}
@keyframes sweep{to{transform:rotate(360deg)}}
.portalbtn__hex{position:relative;width:17px;height:15.5px;flex:none;color:var(--rust-hi);
  transition:color .35s var(--e)}
.portalbtn__hex svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.portalbtn__hex .pb-ring{fill:currentColor;transition:opacity .4s var(--e)}
.portalbtn__hex2{opacity:0;transform-origin:50% 50%;
  transition:opacity .4s var(--e),transform .7s var(--e)}
.portalbtn__hex2 .pb-out{stroke-dasharray:340;stroke-dashoffset:340;
  transition:stroke-dashoffset .9s var(--e)}
.portalbtn:hover .portalbtn__hex{color:#fff}
.portalbtn:hover .pb-ring{opacity:.28}
.portalbtn:hover .portalbtn__hex2{opacity:1;transform:rotate(60deg) scale(1.18)}
.portalbtn:hover .pb-out{stroke-dashoffset:0}
.portalbtn__txt{display:block;height:1.35em;overflow:hidden;line-height:1.35em}
.portalbtn__txt span{display:block;transition:transform .5s var(--e)}
.portalbtn:hover .portalbtn__txt span{transform:translateY(-100%)}
.portalbtn__ar{width:11px;height:11px;flex:none;transition:transform .45s var(--e)}
.portalbtn__ar svg{width:100%;height:100%;display:block}
.portalbtn:hover .portalbtn__ar{transform:translate(3px,-3px)}
.portal-link{position:relative;display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.05rem;border-radius:999px;overflow:hidden;isolation:isolate;
  box-shadow:inset 0 0 0 1px var(--line-2);color:var(--white);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.15em;
  text-transform:uppercase;
  transition:box-shadow .45s var(--e),color .35s var(--e),transform .5s var(--e)}
/* Rust-Fuellung faehrt von unten ein — wie bei den Buttons */
.portal-link::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--rust);
  transform:translateY(101%);transition:transform .55s cubic-bezier(.4,0,.2,1)}
.portal-link:hover::after,.portal-link:focus-visible::after{transform:none}
.portal-link:hover,.portal-link:focus-visible{color:#fff;box-shadow:inset 0 0 0 1px var(--rust);
  transform:translateY(-2px)}
.portal-link .ar{transition:transform .45s var(--e)}
.portal-link:hover .ar{transform:translate(3px,-3px)}
.portal-link--sm{padding:.52rem .9rem;font-size:calc(var(--t-cap) - 1px)}
/* im Footer nicht von den Listen-Hovern verschieben lassen */
.ftr__cols a.portal-link{color:var(--white);padding-left:1.05rem}
.ftr__cols a.portal-link:hover{padding-left:1.05rem;color:#fff}
.ftr__cols a.portal-link::before{display:none}

/* ————— Sprachumschalter —————
   Kein Kasten, kein Knopf: nur die beiden Kennungen und eine haarfeine Linie,
   die federnd unter die aktive Sprache gleitet und dabei kurz ueberdehnt. Der
   Rahmen erscheint erst beim Hover. Weil die englische Fassung noch fehlt,
   wandert die Linie zu EN, die Kennung rollt zu „BALD" und beides federt
   zurueck — ganz ohne zusaetzliche Einblendung. */
.lang{position:relative;display:inline-flex;align-items:center;
  font-family:var(--f-label);font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase}
.lang__box{position:absolute;inset:-.42rem -.62rem;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-2);background:rgba(255,255,255,.02);
  opacity:0;transform:scale(.9);pointer-events:none;
  transition:opacity .4s var(--e),transform .5s cubic-bezier(.34,1.3,.5,1)}
.lang:hover .lang__box,.lang:focus-within .lang__box{opacity:1;transform:none}
.lang:focus-within .lang__box{box-shadow:inset 0 0 0 1px rgba(232,85,42,.5)}

.lang__track{position:relative;display:inline-flex;align-items:center;gap:.34rem;
  padding-bottom:5px}
.lang__b{position:relative;padding:.1rem .16rem;color:var(--dim);opacity:.55;
  font:inherit;letter-spacing:inherit;text-transform:uppercase;
  transition:color .4s var(--e),opacity .4s var(--e)}
.lang__b:hover{color:var(--muted);opacity:1}
.lang__b.is-on{color:#fff;opacity:1}
.lang__div{width:1px;height:9px;background:var(--line-2);transform:skewX(-14deg)}

/* Textrolle: DE frischt sich auf, EN rollt zu „Bald" */
.lang__t{display:block;height:1.15em;overflow:hidden;line-height:1.15em}
.lang__t span{display:block;transition:transform .5s cubic-bezier(.34,1.24,.5,1)}
.lang__b.is-roll .lang__t span,.lang__b.is-wait .lang__t span{transform:translateY(-100%)}

/* federnde Haarlinie */
.lang__ink{position:absolute;left:0;bottom:0;width:0;height:1px;border-radius:1px;
  background:var(--rust-hi);box-shadow:0 0 7px rgba(232,85,42,.85);
  transform:translateX(0);transform-origin:center;
  transition:transform .58s cubic-bezier(.34,1.42,.5,1),width .45s var(--e),
             background .4s var(--e),box-shadow .4s var(--e)}
.lang__ink.is-move{animation:langStretch .58s cubic-bezier(.34,1.42,.5,1)}
@keyframes langStretch{0%{scale:1 1}34%{scale:1.42 2.4}100%{scale:1 1}}
/* waehrend „Bald" laeuft ein Puls durch die Linie */
.lang.is-wait .lang__ink{background:var(--rust);animation:langWait 1.1s var(--e) infinite}
@keyframes langWait{0%,100%{opacity:1}50%{opacity:.35}}

.lang__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .lang__ink{transition:none;animation:none}
  .lang__ink.is-move,.lang.is-wait .lang__ink{animation:none}
  .lang__t span,.lang__box{transition:none}}

.hdr__prog{position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--rust-hi);
  opacity:0;transition:opacity .4s var(--e);box-shadow:0 0 12px rgba(232,85,42,.6)}
.hdr.stuck .hdr__prog{opacity:1}

.burger{display:none;width:44px;height:44px;position:relative;z-index:2}
.burger i{position:absolute;left:11px;width:22px;height:1.5px;background:var(--white);border-radius:2px;
  transition:transform .5s var(--e),opacity .3s var(--e),width .4s var(--e)}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px;width:15px}
.burger i:nth-child(3){top:28px}
.burger:hover i:nth-child(2){width:22px}
body.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0;width:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1180px){
  .nav,.hdr__side .portalbtn,.hdr__side .lang{display:none}
  .burger{display:block}
}

/* ————— Mega-Menü ————— */
.mega{position:absolute;left:0;right:0;top:100%;z-index:5;padding:0 var(--pad) 1rem;
  pointer-events:none;opacity:0;transition:opacity .3s var(--e)}
body.mega-open .mega{pointer-events:auto;opacity:1}
.mega__panel{
  max-width:var(--max);margin-inline:auto;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(19,22,29,.98),rgba(11,13,18,.98));
  box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  transform:translateY(-14px) scale(.985);transform-origin:top center;
  clip-path:inset(0 0 100% 0 round 26px);
  transition:transform .62s var(--e),clip-path .62s var(--e)}
body.mega-open .mega__panel{transform:none;clip-path:inset(0 0 0 0 round 26px)}
.mega__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(.8rem,1.6vw,2rem);
  padding:clamp(1.6rem,2.6vw,2.4rem) clamp(1.4rem,2.4vw,2.4rem)}
@media (max-width:1500px){.mega__grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2rem}}
.mega__col{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--e),transform .6s var(--e)}
body.mega-open .mega__col{opacity:1;transform:none;transition-delay:calc(.1s + var(--ci) * .05s)}
.mega__head{display:flex;align-items:center;gap:.45rem;padding-bottom:.7rem;margin-bottom:.55rem;
  white-space:nowrap;
  border-bottom:1px solid var(--line);
  font-family:var(--f-label);font-weight:600;font-size:var(--t-cap);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);transition:color .35s var(--e),border-color .35s var(--e)}
.mega__head svg{width:10px;height:10px;opacity:0;transform:translateX(-4px);
  transition:.4s var(--e);color:var(--rust-hi)}
.mega__head:hover{color:var(--white);border-bottom-color:var(--rust)}
.mega__head:hover svg{opacity:1;transform:none}
.mega__col ul{list-style:none;margin:0;padding:0}
.megaitem{display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;margin-left:-.6rem;
  border-radius:12px;color:var(--text);font-size:var(--t-small);font-weight:400;
  transition:background .35s var(--e),color .3s var(--e)}
.megaitem:hover{background:rgba(246,246,244,.05);color:#fff}
.megaitem__ico{width:19px;height:19px;flex:none;color:var(--rust-hi);
  transition:transform .5s var(--e),color .3s var(--e)}
.megaitem__ico svg{width:100%;height:100%;display:block;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.megaitem__ico svg *{stroke-dasharray:var(--dash,0);stroke-dashoffset:0}
.megaitem:hover .megaitem__ico{transform:scale(1.14) rotate(-4deg);color:#FF7A4A}
.megaitem__txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.megaitem__ar{width:10px;height:10px;flex:none;opacity:0;transform:translateX(-5px);
  color:var(--rust-hi);transition:.4s var(--e)}
.megaitem:hover .megaitem__ar{opacity:1;transform:none}
.mega__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem;
  padding:clamp(1rem,1.6vw,1.3rem) clamp(1.4rem,2.4vw,2.4rem);
  border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.mega__foot p{margin:0;font-size:var(--t-small);color:var(--dim)}
.mega__all,.mega__cta{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.15em;
  text-transform:uppercase;transition:.35s var(--e)}
.mega__all{color:var(--muted)}
.mega__all:hover{color:var(--white)}
.mega__all svg,.mega__cta svg{width:11px;height:11px;transition:transform .4s var(--e)}
.mega__all:hover svg,.mega__cta:hover svg{transform:translateX(4px)}
.mega__cta{padding:.62rem 1.1rem;border-radius:999px;background:var(--white);color:var(--void)}
.mega__cta:hover{background:var(--rust);color:#fff}
.mega__scrim{position:fixed;inset:0;z-index:70;background:rgba(4,5,8,.55);opacity:0;
  pointer-events:none;transition:opacity .5s var(--e);backdrop-filter:blur(2px)}
body.mega-open .mega__scrim,body.agd-open .mega__scrim{opacity:1;pointer-events:auto}
@media (max-width:1180px){.mega,.mega__scrim{display:none}}

/* ————— Agentur-Dropdown (Hover auf „Agency") —————
   Drei Kacheln in Schwarzweiss. Beim Hover legt sich ein Rost-Duoton ueber das
   Bild (mix-blend-mode:color), ein Licht faehrt einmal durch und das Hexagon
   dreht sich herein. */
.agd{position:absolute;left:0;right:0;top:100%;z-index:6;height:0;
  pointer-events:none;opacity:0;transition:opacity .3s var(--e)}
body.agd-open .agd{pointer-events:auto;opacity:1}
.agd__pos{position:absolute;top:0;left:var(--agd-x,50%);transform:translateX(-50%);
  width:min(720px,92vw);padding-top:.1rem}
.agd__panel{position:relative;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(19,22,29,.98),rgba(11,13,18,.98));
  box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  transform:translateY(-12px) scale(.985);transform-origin:top center;
  clip-path:inset(0 0 100% 0 round 24px);
  transition:transform .62s var(--e),clip-path .62s var(--e)}
body.agd-open .agd__panel{transform:none;clip-path:inset(0 0 0 0 round 24px)}
.agd__beam{position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rust-hi),transparent);
  opacity:0;transform:scaleX(.2)}
body.agd-open .agd__beam{animation:agdBeam 1.1s var(--e) .12s forwards}
@keyframes agdBeam{0%{opacity:0;transform:scaleX(.15)}
  40%{opacity:1}100%{opacity:.35;transform:scaleX(1)}}
.agd__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.1vw,1rem);
  padding:clamp(1rem,1.6vw,1.35rem)}
.agt{display:block;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--text);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--e),transform .6s var(--e),box-shadow .4s var(--e)}
body.agd-open .agt{opacity:1;transform:none;transition-delay:calc(.12s + var(--ai) * .07s)}
.agt:hover{box-shadow:inset 0 0 0 1px rgba(232,85,42,.55),0 14px 34px rgba(0,0,0,.45)}
.agt__im{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#0b0d12}
.agt__im img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08) brightness(.86);
  transform:scale(1.02);
  transition:transform 1.1s var(--e),filter .6s var(--e)}
.agt:hover .agt__im img{transform:scale(1.09);filter:grayscale(1) contrast(1.16) brightness(1)}
/* Rost-Duoton: legt die Farbe auf die Graustufen, laesst die Helligkeit stehen */
.agt__tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(150deg,#FF7A4A,#E8552A 55%,#8C2E12);
  mix-blend-mode:color;opacity:0;transition:opacity .55s var(--e)}
.agt:hover .agt__tint{opacity:1}
.agt__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 105%,rgba(232,85,42,.55),transparent 65%);
  mix-blend-mode:screen;opacity:0;transition:opacity .55s var(--e)}
.agt:hover .agt__glow{opacity:1}
.agt__scan{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  transform:translateX(-60%)}
.agt:hover .agt__scan{animation:agtScan .95s var(--e) forwards}
@keyframes agtScan{0%{opacity:0;transform:translateX(-60%)}
  25%{opacity:.85}100%{opacity:0;transform:translateX(60%)}}
.agt__hex{position:absolute;right:.6rem;top:.6rem;width:22px;height:20px;color:#fff;
  opacity:0;transform:rotate(-30deg) scale(.6);
  transition:opacity .5s var(--e),transform .7s var(--e)}
.agt__hex svg{width:100%;height:100%;display:block;overflow:visible}
.agt:hover .agt__hex{opacity:.95;transform:none}
.agt__b{display:block;padding:.8rem .9rem 1rem}
.agt__t{display:flex;align-items:center;gap:.4rem;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.13em;
  text-transform:uppercase;color:var(--white);transition:color .35s var(--e)}
.agt:hover .agt__t{color:#fff}
.agt__ar{width:10px;height:10px;flex:none;color:var(--rust-hi);
  opacity:0;transform:translateX(-5px);transition:.4s var(--e)}
.agt__ar svg{width:100%;height:100%;display:block}
.agt:hover .agt__ar{opacity:1;transform:none}
.agt__d{display:block;margin-top:.35rem;font-size:var(--t-small);color:var(--dim);
  transition:color .35s var(--e)}
.agt:hover .agt__d{color:var(--muted)}
.agd__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,1.6vw,1.35rem);
  border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.agd__foot p{margin:0;font-size:var(--t-small);color:var(--dim)}
.agd__all{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);transition:color .35s var(--e)}
.agd__all:hover{color:var(--white)}
.agd__all svg{width:11px;height:11px;transition:transform .4s var(--e)}
.agd__all:hover svg{transform:translateX(4px)}
@media (max-width:1180px){.agd{display:none}}
@media (prefers-reduced-motion: reduce){
  .agd__panel,.agt,.agt__im img,.agt__tint,.agt__glow{transition-duration:.01ms}
  .agt__scan,.agd__beam{display:none}}

/* ————— Fullscreen Menu ————— */
.menu{
  position:fixed;inset:0;z-index:70;background:var(--deep);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e);
  overflow-y:auto;overscroll-behavior:contain
}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu__bg{position:absolute;top:50%;right:-14%;transform:translateY(-50%);width:min(70vw,720px);
  color:var(--line-2);pointer-events:none;opacity:0;transition:opacity 1s var(--e) .25s}
body.menu-open .menu__bg{opacity:1}
.menu__bg svg{width:100%;height:auto;fill:none;stroke:currentColor}
.menu__in{position:relative;min-height:100%;display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(2rem,5vw,5rem);
  align-content:center;padding:calc(var(--hdr) + 2.5rem) var(--pad) 3rem;max-width:var(--max);
  margin-inline:auto}
@media (max-width:900px){.menu__in{grid-template-columns:1fr;align-content:start}}
.menu__nav ol{list-style:none;margin:0;padding:0}
.menu__nav li{overflow:hidden;border-bottom:1px solid var(--line)}
.menu__nav li a{
  display:flex;align-items:baseline;gap:clamp(.8rem,2vw,1.6rem);padding:.24em 0;
  font-family:var(--f-display);text-transform:uppercase;font-size:clamp(2rem,8.5vw,4.6rem);
  letter-spacing:.03em;color:var(--white);
  transform:translateY(105%);transition:transform .8s var(--e) var(--dly,0s),color .35s var(--e)
}
body.menu-open .menu__nav li a{transform:none}
.menu__nav li a i{font-style:normal;font-size:var(--t-cap);letter-spacing:.2em;color:var(--rust-hi);flex:none}
.menu__nav li a span{flex:1;transition:transform .5s var(--e)}
.menu__nav li a em{font-style:normal;font-size:var(--t-cap);letter-spacing:.18em;color:var(--dim);
  opacity:0;transform:translateX(10px);transition:.45s var(--e)}
.menu__nav li a:hover{color:var(--rust-hi)}
.menu__nav li a:hover span{transform:translateX(clamp(.5rem,1.4vw,1.4rem))}
.menu__nav li a:hover em{opacity:1;transform:none}
@media (max-width:600px){.menu__nav li a em{display:none}}
.menu__meta{display:grid;gap:clamp(1.4rem,2.6vw,2rem);align-content:center}
@media (max-width:900px){.menu__meta{margin-top:2.4rem;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.menu__meta{grid-template-columns:1fr}}
.menu__block{opacity:0;transform:translateY(16px);transition:.7s var(--e) var(--dly,0s)}
body.menu-open .menu__block{opacity:1;transform:none}
.menu__block h4{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:.75rem}
.menu__block a,.menu__block p{display:block;color:var(--muted);font-size:var(--t-small);margin:0 0 .35rem}
.menu__block a:hover{color:var(--white)}
.menu__block--cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;grid-column:1/-1}
.menu__block--cta .portal-link,.menu__block--cta .lang{display:inline-flex}

/* ————— Filmkorn ————— */
.grain{position:fixed;inset:-120px;z-index:190;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;will-change:transform;mix-blend-mode:overlay}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-24px,14px)}
  50%{transform:translate(18px,-20px)}75%{transform:translate(-14px,-10px)}
  100%{transform:translate(0,0)}}

/* ————— HERO ————— */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero__sky{
  position:absolute;inset:-2% -2% 0;z-index:-4;
  background:
    radial-gradient(46% 34% at 50% 62%,rgba(240,224,205,.95) 0%,rgba(206,160,124,.42) 30%,rgba(40,50,62,0) 66%),
    radial-gradient(130% 78% at 50% 78%,#4A4A52 0%,#2A2C36 26%,#171A22 52%,#0A0C11 76%,#06070A 100%);
}
.hero__stars{position:absolute;inset:0;z-index:-4;opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 18%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 68% 12%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 42% 26%,rgba(255,255,255,.3),transparent),
    radial-gradient(1px 1px at 86% 30%,rgba(255,255,255,.35),transparent),
    radial-gradient(1px 1px at 12% 40%,rgba(255,255,255,.25),transparent)}
.hero__mid,.hero__front{position:absolute;left:50%;bottom:0;max-width:none;pointer-events:none;
  transform:translateX(-50%);width:max(1500px,114vw);will-change:transform}
.hero__mid{z-index:-4}
.hero__front{z-index:-2}
@media (max-width:900px){
  .hero__mid,.hero__front{width:max(980px,215vw);left:44%}
}
@media (max-width:560px){
  .hero__mid,.hero__front{width:max(900px,255vw);left:36%}
}
.hero__veil{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,7,10,.7) 0%,rgba(6,7,10,.3) 38%,rgba(6,7,10,0) 68%),
    linear-gradient(180deg,rgba(6,7,10,.62) 0%,rgba(6,7,10,.06) 26%,rgba(6,7,10,.1) 52%,rgba(6,7,10,.76) 88%,var(--void) 100%)}
.hero__body{position:relative;z-index:2;padding-bottom:clamp(2rem,5vw,4rem)}
.hero__kicker{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.hero__kicker span{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.26em;
  text-transform:uppercase;color:var(--glow);opacity:.75}
.hero__title{margin:0 0 clamp(1.4rem,3vw,2.4rem);
  font-size:clamp(2.4rem,8.1vw,8.4rem);letter-spacing:.05em}
.hero__title .ln>span{
  /* line-height .92 laesst die Oberlaengen aus der Hintergrund-Malflaeche laufen;
     background-clip:text wuerde sie oben abschneiden (sichtbar am S von NEUES).
     Padding vergroessert die Malflaeche, das negative Margin haelt das Layout. */
  padding-top:.2em;margin-top:-.2em;padding-bottom:.08em;margin-bottom:-.08em;
  background:linear-gradient(180deg,#fff 20%,#D8CFC2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(233,220,200,.14)}
.hero__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(1.6rem,4vw,4.4rem);align-items:end}
.hero__colmeta{padding-right:clamp(1.5rem,6.5vw,8.5rem)}
@media (max-width:900px){.hero__cols{grid-template-columns:1fr}.hero__colmeta{padding-right:0}}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.hero__meta{display:flex;flex-wrap:wrap;gap:1.1rem 2.4rem;padding-top:1.4rem;
  border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.hero__meta div{min-width:0}
.hero__meta b{display:block;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:.35rem}
.hero__meta p{margin:0;font-size:var(--t-small);color:var(--text)}
/* Scroll-Cue: vertikales Label + Laufbalken + rotierendes Hexagon */
.scrollcue{position:absolute;right:calc(var(--pad) - .35rem);bottom:clamp(1.4rem,3vw,2.6rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.85rem;color:var(--dim);
  transition:opacity .55s var(--e),transform .55s var(--e)}
.scrollcue__txt{writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.42em;
  text-transform:uppercase;opacity:.72}
.scrollcue__rail{position:relative;display:block;width:1px;height:clamp(54px,7vw,88px);
  background:linear-gradient(rgba(255,255,255,.02),var(--line-2) 30%,rgba(255,255,255,.03));overflow:hidden}
.scrollcue__rail i{position:absolute;left:-1px;top:0;width:3px;height:30px;border-radius:3px;
  background:linear-gradient(rgba(232,85,42,0),var(--rust-hi));
  box-shadow:0 0 10px rgba(232,85,42,.7);animation:cueRun 2.9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes cueRun{0%{transform:translateY(-34px);opacity:0}
  16%{opacity:1}72%{opacity:1}100%{transform:translateY(100px);opacity:0}}
.scrollcue__hex{position:relative;display:grid;place-items:center;width:34px;height:34px;color:var(--rust-hi)}
.scrollcue__hex svg.hx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.55;
  animation:cueSpin 16s linear infinite}
.scrollcue__hex b{position:relative;display:grid;place-items:center;width:11px;height:11px;color:var(--white);
  animation:cueBob 2.9s cubic-bezier(.5,0,.2,1) infinite}
.scrollcue__hex b svg{width:100%;height:100%;display:block}
@keyframes cueSpin{to{transform:rotate(360deg)}}
@keyframes cueBob{0%{transform:translateY(-3px);opacity:.45}
  45%{transform:translateY(3px);opacity:1}100%{transform:translateY(-3px);opacity:.45}}
.hero.past .scrollcue{opacity:0;transform:translateY(16px);pointer-events:none}
@media (max-width:900px){.scrollcue{display:none}}

/* Hero-Intro-Choreografie */
.hero .hex-par{position:absolute;inset:0;z-index:-3;pointer-events:none;will-change:transform}
.hero .hex-intro{position:absolute;left:74%;top:44%;transform:translate(-50%,-50%);z-index:-3;
  width:clamp(200px,30vw,440px);height:auto;opacity:0;pointer-events:none;overflow:visible}
.hero.lit .hex-intro{animation:hexIn 1.5s var(--e) forwards}
@keyframes hexIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  40%{opacity:.7}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Kern: nur die Konturen atmen — kein Skalieren, kein Lichtkern */
.hex-core{transform-box:fill-box;transform-origin:50% 50%;opacity:.17;
  transition:opacity .7s var(--e),transform .9s var(--e)}
.hex-intro__edge{animation:hexEdge 7s var(--e) infinite}
.hex-intro__edge--b{animation-duration:9s;animation-delay:-2.6s}
@keyframes hexEdge{0%,100%{opacity:.55;stroke-width:.5}50%{opacity:1;stroke-width:.75}}

/* Schallwellen: drei Konturen laufen versetzt nach aussen und verklingen.
   Die Strichstaerke bleibt dank non-scaling-stroke haarfein. */
.hex-waves{opacity:.5;transition:opacity .7s var(--e)}
.hex-wave{transform-box:fill-box;transform-origin:50% 50%;opacity:0;
  animation-name:hexWave;animation-duration:6.6s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-iteration-count:infinite;animation-delay:var(--wd,0s)}
.hex-wave path{transition:stroke .6s var(--e)}
@keyframes hexWave{
  0%{transform:scale(1);opacity:0}
  10%{opacity:.55}
  55%{opacity:.16}
  100%{transform:scale(2.5);opacity:0}}

/* einzelne, schnellere Welle beim Betreten */
.hex-ping{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.hex-par.is-ping .hex-ping{animation:hexPing 1.15s cubic-bezier(.16,.8,.3,1)}
@keyframes hexPing{0%{transform:scale(.94);opacity:0}
  14%{opacity:.9}100%{transform:scale(2.9);opacity:0}}

/* gestrichelter Ring, dreht sich und erscheint nur beim Zeigen */
.hex-spin{transform-box:fill-box;transform-origin:50% 50%;opacity:0;
  animation:hexSpin 34s linear infinite;transition:opacity .7s var(--e)}
@keyframes hexSpin{to{transform:rotate(360deg)}}

/* Zustand: der Zeiger steht ueber dem Zeichen */
.hex-par.is-near .hex-core{opacity:.55;transform:scale(1.035)}
.hex-par.is-near .hex-waves{opacity:1}
.hex-par.is-near .hex-wave path{stroke:#F0894B}
.hex-par.is-near .hex-spin{opacity:.8}

@media (prefers-reduced-motion:reduce){
  .hex-intro__edge,.hex-wave,.hex-spin,.hex-par.is-ping .hex-ping{animation:none}
  .hex-core,.hex-waves,.hex-spin{transition:none}}

/* ————— Showreel / Scroll-Transition ————— */
/* ————— TEAM-HERO (Aufbau nach Halo-Lab-Vorbild) ————— */
.thero{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(4rem,9vw,8rem) clamp(2.4rem,5vw,4rem);
  background:linear-gradient(180deg,
    #000216 0%,#000216 46%,#01041B 50%,#020721 55%,#030A26 60%,#050D2D 65%,
    #071133 70%,#081338 75%,#09173E 80%,#0B1A43 85%,#0D1D4A 90%,#0E204F 95%,#102455 100%)}
.thero::before,.thero::after{content:'';position:absolute;left:0;right:0;z-index:-1;pointer-events:none}
.thero::before{top:0;height:clamp(140px,22vh,300px);
  background:linear-gradient(180deg,var(--void) 0%,rgba(3,4,17,.86) 26%,rgba(1,2,21,.5) 58%,rgba(0,2,21,0) 100%)}
.thero::after{bottom:0;height:130px;
  background:linear-gradient(180deg,rgba(16,36,85,0),var(--void))}
.thero__stars{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none}
.thero__aura{display:none}

/* Buehne: Slot fuer den Hand-Render, solange Platzhalter-Orb */
.thero__stage{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(170px,24vw,340px);margin-bottom:clamp(1.6rem,3.6vw,2.8rem)}
.thero__hand{position:relative;width:clamp(260px,40vw,560px);aspect-ratio:800/450;will-change:transform;
  transform:translate3d(var(--hand-x,0px),calc(var(--py,0px) + var(--hand-y,0px)),0);
  filter:drop-shadow(0 24px 70px rgba(0,0,0,.65))}
.thero__hand-img,.thero__hand-cv{position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:opacity .45s var(--e)}
.thero__hand-cv{opacity:0}
.thero__hand.is-live .thero__hand-cv{opacity:1}
.thero__hand.is-live .thero__hand-img{opacity:0}
.thero__orb{position:relative;display:grid;place-items:center;
  width:clamp(150px,19vw,240px);aspect-ratio:1;color:var(--rust-hi);
  transform:translateY(var(--py,0px));transition:transform .2s linear}
.thero__ring{position:absolute;width:100%;height:100%;overflow:visible;opacity:.42}
.thero__ring--a{animation:theroSpin 26s linear infinite}
.thero__ring--b{width:74%;height:74%;opacity:.6;animation:theroSpin 17s linear infinite reverse}
@keyframes theroSpin{to{transform:rotate(360deg)}}
.thero__ball{position:relative;width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFF7EE 0%,#F6DFC4 16%,#E8853A 44%,#A63F14 74%,#3A1408 100%);
  box-shadow:0 0 70px rgba(232,133,58,.5),0 0 160px rgba(192,67,28,.35),
    inset -8px -12px 34px rgba(0,0,0,.55);
  animation:theroFloat 7.5s cubic-bezier(.45,0,.35,1) infinite}
.thero__ball::after{content:'';position:absolute;inset:-38%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,133,58,.3),transparent 62%);
  filter:blur(10px);animation:theroPulse 4.6s ease-in-out infinite}
@keyframes theroFloat{0%,100%{transform:translateY(-7px)}50%{transform:translateY(9px)}}
@keyframes theroPulse{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
.thero__orbit{position:absolute;inset:4%;border-radius:50%;animation:theroSpin 11s linear infinite}
.thero__orbit--2{inset:-6%;animation-duration:19s;animation-direction:reverse}
.thero__orbit i{position:absolute;top:0;left:50%;width:5px;height:5px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--white);
  box-shadow:0 0 12px rgba(255,255,255,.85),0 0 26px rgba(232,133,58,.6)}
.thero__orbit--2 i{width:4px;height:4px;background:var(--rust-hi);box-shadow:0 0 12px rgba(232,85,42,.9)}

/* Headline */
.thero__claim{text-align:center;max-width:min(100%,66rem);margin:0 auto clamp(2.8rem,6vw,5rem);
  font-family:var(--f-sans);font-weight:200;line-height:1.12;letter-spacing:-.028em;
  font-size:clamp(1.45rem,3.45vw,3.3rem);color:var(--white)}
.thero__claim em{font-style:normal;
  background:linear-gradient(100deg,#F7D3A6 0%,#F08A4B 42%,#E8552A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 44px rgba(232,85,42,.35)}

/* Team-Zeile */
.thero__links{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:stretch;
  border-top:1px solid var(--line);padding-top:clamp(1rem,2.2vw,1.8rem)}
.hlink__div{display:block;width:1px;background:var(--line);margin-block:.4rem}
.hlink{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:clamp(.9rem,1.8vw,1.35rem) clamp(.9rem,2vw,1.6rem);border-radius:var(--r);
  transform:translate3d(var(--tx,0px),var(--ty,0px),0);
  transition:transform .55s cubic-bezier(.18,.9,.24,1),background .45s var(--e)}
.hlink.is-mag{transition:transform .12s linear,background .45s var(--e)}
.hlink::after{content:'';position:absolute;inset:0;border-radius:var(--r);z-index:-1;
  background:radial-gradient(120% 120% at var(--mx,50%) var(--my,50%),rgba(232,85,42,.16),transparent 68%);
  opacity:0;transition:opacity .45s var(--e)}
.hlink:hover::after{opacity:1}
.hlink__in{display:flex;align-items:center;gap:clamp(.75rem,1.5vw,1.1rem);min-width:0}
/* ————— Animierte 3D-Icons (reines CSS, keine Bilder) ————— */
.ico3d{position:relative;flex:none;display:grid;place-items:center;
  width:clamp(42px,4.2vw,54px);height:clamp(42px,4.2vw,54px);
  perspective:260px;perspective-origin:50% 45%}
.ico3d__glow{position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,133,58,.34),rgba(120,160,255,.12) 46%,transparent 70%);
  filter:blur(5px);opacity:.85;transition:opacity .5s var(--e),transform .6s var(--e)}
.ico3d__obj{position:relative;width:26px;height:26px;transform-style:preserve-3d;
  animation:ico3dSpin var(--sp,14s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes ico3dSpin{
  0%{transform:rotateX(-18deg) rotateY(0deg)}
  25%{transform:rotateX(-27deg) rotateY(90deg)}
  50%{transform:rotateX(-16deg) rotateY(180deg)}
  75%{transform:rotateX(-8deg)  rotateY(270deg)}
  100%{transform:rotateX(-18deg) rotateY(360deg)}}
.ico3d i{position:absolute;display:block;
  border:1px solid rgba(255,255,255,.42);
  background:
    linear-gradient(150deg,rgba(255,255,255,.5) 0%,rgba(190,215,255,.14) 38%,rgba(232,133,58,.3) 100%);
  box-shadow:inset 0 0 14px rgba(255,255,255,.3), 0 0 12px rgba(232,133,58,.18);
  backface-visibility:visible}
.hlink:hover .ico3d__obj{animation-duration:5s}
.hlink:hover .ico3d__glow{opacity:1;transform:scale(1.14)}

/* Würfel — Design */
.ico3d--cube .f{inset:0}
.ico3d--cube .fz1{transform:translateZ(13px)}
.ico3d--cube .fz2{transform:rotateY(180deg) translateZ(13px);opacity:.86}
.ico3d--cube .fx1{transform:rotateY(90deg) translateZ(13px);opacity:.9}
.ico3d--cube .fx2{transform:rotateY(-90deg) translateZ(13px);opacity:.9}
.ico3d--cube .fy1{transform:rotateX(90deg) translateZ(13px);opacity:.96}
.ico3d--cube .fy2{transform:rotateX(-90deg) translateZ(13px);opacity:.72}

/* Hexagon-Prisma — Development */
.ico3d--prism .s{left:50%;top:50%;width:14px;height:22px;margin:-11px 0 0 -7px}
.ico3d--prism .s1{transform:rotateY(0deg)   translateZ(12.1px)}
.ico3d--prism .s2{transform:rotateY(60deg)  translateZ(12.1px);opacity:.94}
.ico3d--prism .s3{transform:rotateY(120deg) translateZ(12.1px);opacity:.88}
.ico3d--prism .s4{transform:rotateY(180deg) translateZ(12.1px);opacity:.84}
.ico3d--prism .s5{transform:rotateY(240deg) translateZ(12.1px);opacity:.88}
.ico3d--prism .s6{transform:rotateY(300deg) translateZ(12.1px);opacity:.94}
.ico3d--prism .cap{left:50%;top:50%;width:28px;height:24.2px;margin:-12.1px 0 0 -14px;border:0;
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(190,215,255,.2) 42%,rgba(232,133,58,.34));
  box-shadow:none}
.ico3d--prism .cap1{transform:rotateX(90deg) translateZ(11px)}
.ico3d--prism .cap2{transform:rotateX(-90deg) translateZ(11px);opacity:.7}

/* Stern — Marketing */
.ico3d--star .b{left:50%;top:50%;width:32px;height:5px;margin:-2.5px 0 0 -16px;border-radius:2.5px;
  background:linear-gradient(90deg,rgba(232,133,58,.34),rgba(255,255,255,.6) 50%,rgba(190,215,255,.28));
  box-shadow:inset 0 0 10px rgba(255,255,255,.45),0 0 14px rgba(232,133,58,.28)}
.ico3d--star .b1{transform:rotateZ(0deg)}
.ico3d--star .b2{transform:rotateZ(60deg);opacity:.92}
.ico3d--star .b3{transform:rotateZ(120deg);opacity:.86}
.ico3d--star .b4{transform:rotateY(90deg);opacity:.6}
.ico3d--star .b5{display:none}

@media (max-width:900px){.ico3d{width:46px;height:46px}}

.hlink__txt{display:flex;flex-direction:column;gap:.22rem;min-width:0}
.hlink__txt b{font-family:var(--f-sans);font-weight:300;font-size:clamp(.95rem,1.3vw,1.05rem);
  letter-spacing:-.012em;color:var(--white)}
.hlink__txt i{font-style:normal;font-size:var(--t-small);color:var(--muted)}
.hlink__ar{position:relative;display:block;width:16px;height:16px;flex:none;overflow:hidden;color:var(--dim)}
.hlink__ar svg{position:absolute;inset:0;width:100%;height:100%;
  transition:transform .55s var(--e),opacity .35s var(--e)}
.hlink__ar svg:nth-child(2){transform:translate(-130%,130%);opacity:0}
.hlink:hover .hlink__ar{color:var(--white)}
.hlink:hover .hlink__ar svg:first-child{transform:translate(150%,-150%);opacity:0}
.hlink:hover .hlink__ar svg:nth-child(2){transform:none;opacity:1}
@media (max-width:900px){
  .thero__links{grid-template-columns:1fr}
  .hlink{padding-inline:0}
  .hlink__div{width:auto;height:1px;margin-inline:0;margin-block:0}
  .hlink__ar{display:block}
}

.reel{position:relative;padding-block:0}
.reel__sticky{position:relative;height:200svh}
.reel__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.reel__frame{
  position:relative;width:var(--rw,42%);aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);
  background:var(--surface);box-shadow:0 40px 120px rgba(0,0,0,.6)
}
.reel__frame img{width:100%;height:100%;object-fit:cover;opacity:.62;filter:grayscale(.55) contrast(1.06)}
.reel__frame::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,10,.15),rgba(6,7,10,.6))}
.reel__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;gap:1rem}
.reel__play b{font-family:var(--f-display);font-size:clamp(1.1rem,2.6vw,2.4rem);
  letter-spacing:.32em;text-transform:uppercase;color:#fff;font-weight:400}
.reel__cap{position:absolute;left:0;right:0;bottom:clamp(1.2rem,3vw,2.4rem);z-index:3;
  display:flex;justify-content:space-between;gap:1rem;padding-inline:var(--pad);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}

/* ————— Statement ————— */
.stmt h2{font-size:clamp(1.7rem,3.5vw,3.9rem);line-height:1.18;letter-spacing:-.026em;font-weight:200}
.stmt h2 em{font-style:normal;color:var(--rust-hi)}
.stmt__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);
  gap:clamp(2rem,5vw,6rem);align-items:start}
@media (max-width:900px){.stmt__grid{grid-template-columns:1fr}}
.stmt__grid--form{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
@media (max-width:900px){.stmt__grid--form{grid-template-columns:1fr;gap:clamp(2.4rem,6vw,4rem)}}

/* ————— Clients-Marquee ————— */
.clients{border-block:1px solid var(--line);padding-block:clamp(2.4rem,4.5vw,4rem);overflow:hidden}
.clients__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  margin-bottom:clamp(1.8rem,3.4vw,2.8rem)}
.clients__head p{margin:0;max-width:46ch}
.marq{display:flex;gap:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq__track{display:flex;align-items:center;gap:clamp(2.6rem,5vw,5.5rem);flex:none;
  padding-right:clamp(2.6rem,5vw,5.5rem);animation:marq 88s linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-100%)}}
.marq img{height:clamp(22px,2.4vw,34px);width:auto;opacity:.5;filter:grayscale(1);
  transition:opacity .4s var(--e)}
.marq img{transition:opacity .4s var(--e),transform .5s var(--e)}
.marq img:hover{opacity:1;transform:scale(1.12)}
.marq--slow .marq__track{animation-duration:124s;animation-direction:reverse}

/* ————— Selected Work (Editorial-Layout) ————— */
.work__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:clamp(2.4rem,5vw,4.5rem)}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut) var(--gut);
  row-gap:clamp(3rem,7vw,9rem)}
@media (max-width:820px){.pgrid{grid-template-columns:repeat(4,1fr);row-gap:clamp(2.4rem,8vw,4rem)}}
.pcard{position:relative;display:block}
.pcard__media{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r)}
.pcard__media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);filter:grayscale(.55) contrast(1.08) brightness(1.02);
  transition:transform 1.1s var(--e),filter .7s var(--e)}
.pcard:hover .pcard__media img{transform:scale(1.07);filter:grayscale(0) contrast(1.05) brightness(1)}
.pcard__media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,7,10,.55));
  opacity:.9;transition:opacity .6s var(--e)}
.pcard:hover .pcard__media::after{opacity:.5}
.pcard__idx{position:absolute;top:1rem;left:1rem;z-index:2}
.pcard__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.6rem 1.4rem;padding-top:1.05rem;border-top:1px solid var(--line);margin-top:1.05rem}
.pcard__t{font-size:var(--t-h3);font-weight:300;letter-spacing:-.024em;color:var(--white);
  transition:transform .55s var(--e)}
.pcard:hover .pcard__t{transform:translateX(7px)}
.pcard__m{display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-family:var(--f-label);font-weight:500;
  font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pcard__m span+span::before{content:'';display:inline-block;width:3px;height:3px;
  background:var(--dim);border-radius:50%;vertical-align:middle;margin-right:.9rem}
.pcard__client{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.22em;
  text-transform:uppercase;color:var(--rust-hi);margin-bottom:.5rem;display:block}
/* Editorial-Spannung */
.c-75{grid-column:1/9}
.c-50r{grid-column:9/13;align-self:end}
.c-full{grid-column:1/13}
.c-60{grid-column:1/7}
.c-40r{grid-column:8/13;align-self:end}
.c-50l{grid-column:3/11}
.off-1{margin-top:clamp(1.5rem,5vw,5rem)}
.off-2{margin-top:clamp(1.5rem,6vw,6rem)}
@media (max-width:820px){
  .c-75,.c-50r,.c-full,.c-60,.c-40r,.c-50l{grid-column:1/-1;align-self:auto}
  .off-1,.off-2{margin-top:0}
}
.ar-16{aspect-ratio:16/9} .ar-43{aspect-ratio:4/3} .ar-11{aspect-ratio:1/1}
.ar-34{aspect-ratio:3/4} .ar-219{aspect-ratio:2.39/1}
@media (max-width:820px){.ar-34{aspect-ratio:4/5}.ar-219{aspect-ratio:16/9}}

/* ————— Services: große interaktive Liste ————— */
.svc{position:relative}
.svc__list{border-top:1px solid var(--line)}
.svc__row{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1rem,3vw,3rem);
  padding-block:clamp(1.4rem,2.9vw,2.6rem);border-bottom:1px solid var(--line);
  transition:padding-left .55s var(--e),background .55s var(--e)
}
.svc__row:hover{padding-left:clamp(.6rem,1.6vw,1.6rem);background:linear-gradient(90deg,rgba(192,67,28,.08),transparent 55%)}
.svc__num{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;color:var(--dim)}
.svc__t{font-size:clamp(1.5rem,3.5vw,3.4rem);font-weight:250;letter-spacing:-.026em;color:var(--white);
  transition:color .4s var(--e)}
.svc__row:hover .svc__t{color:var(--rust-hi)}
.svc__tags{display:none;font-family:var(--f-sans);font-size:var(--t-small);letter-spacing:0;
  color:var(--muted);max-width:36ch;text-align:right;line-height:1.4}
@media (min-width:1024px){.svc__tags{display:block}}
.svc__peek{
  position:fixed;z-index:5;width:min(30vw,420px);aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
  pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92);
  transition:opacity .45s var(--e),transform .6s var(--e);box-shadow:0 30px 90px rgba(0,0,0,.55)}
.svc__peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.svc__peek img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.06)}
@media (max-width:1023px){.svc__peek{display:none}}

/* ————— Why (Hexagon-Prinzip) ————— */
.why-sec{position:relative;overflow:clip;isolation:isolate}
.why__wm{position:absolute;right:-14%;top:50%;width:min(760px,74vw);height:auto;z-index:-1;
  transform:translateY(-50%);color:#E9DCC8;opacity:.05;pointer-events:none;overflow:visible;
  animation:whyWm 120s linear infinite}
@keyframes whyWm{to{transform:translateY(-50%) rotate(360deg)}}
@media (max-width:900px){.why__wm{right:-40%;width:130vw}}

.why{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line)}
@media (max-width:820px){.why{grid-template-columns:1fr}}
.why__c{position:relative;display:block;isolation:isolate;overflow:hidden;
  background:var(--void);padding:clamp(1.8rem,3.4vw,3.2rem);
  transition:background .6s var(--e)}
/* Kein farbiger Lichtschein mehr — beim Hover hebt sich die Flaeche nur leicht
   an (neutral, kein Farbstich) und links faehrt eine Rost-Kante ein. */
.why__c::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(180deg,rgba(246,246,244,.055),rgba(246,246,244,0) 58%);
  transition:opacity .6s var(--e)}
.why__c:hover::before{opacity:1}
.why__c::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;
  background:linear-gradient(180deg,var(--rust-hi),rgba(232,85,42,.15));
  transform:scaleY(0);transform-origin:top;
  transition:transform .75s cubic-bezier(.16,1,.3,1)}
.why__c:hover::after{transform:scaleY(1)}
.why__c:hover{background:#0A0C11}
/* grosses, mitlaufendes Hexagon im Karteninneren */
.why__bg{position:absolute;right:-8%;top:50%;width:46%;height:auto;z-index:-1;color:#E9DCC8;
  opacity:0;overflow:visible;pointer-events:none;
  transform:translate(0,-50%);
  transition:opacity .7s var(--e)}
.why__c:hover .why__bg{opacity:.07;
  transform:translate(calc((var(--mx,50%) - 50%) * .1),calc(-50% + (var(--my,50%) - 50%) * .1))}
/* Hexagon-Nummer */
.why__i{position:relative;display:grid;place-items:center;width:clamp(48px,4.6vw,62px);aspect-ratio:1;
  margin-bottom:clamp(1.1rem,2.2vw,1.7rem);color:var(--line-2);
  transition:color .5s var(--e),transform .6s var(--e)}
.why__c:hover .why__i{color:var(--rust);transform:translateY(-2px)}
.why__hx{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.why__hx--o path{stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.6s var(--e) calc(var(--dly,0s) + .2s)}
.why__c.in .why__hx--o path{stroke-dashoffset:0}
/* Gestricheltes Hexagon: es dreht sich nicht mehr im Kreis. Beim Zeigen federt
   es einmal aus einer leichten Schraeglage in seine Position, danach wandern
   nur noch die Striche an der Kontur entlang (Marching Ants) — die Form bleibt
   ruhig stehen. pathLength=120 macht das Muster nahtlos umlaufend. */
.why__hx--d{opacity:0;transform:scale(.84) rotate(-14deg);
  transition:opacity .45s var(--e),transform .75s cubic-bezier(.34,1.34,.5,1)}
.why__hx--d path{stroke-dashoffset:0}
.why__c:hover .why__hx--d{opacity:.9;transform:none}
.why__c:hover .why__hx--d path{animation:whyAnts 4.6s linear infinite}
@keyframes whyAnts{to{stroke-dashoffset:-120}}
.why__i b{position:relative;font-family:var(--f-label);font-weight:500;font-size:.62rem;
  letter-spacing:.18em;color:var(--dim);font-variant-numeric:tabular-nums;
  transition:color .45s var(--e)}
.why__c:hover .why__i b{color:var(--white)}
.why__c h3{font-size:clamp(1.25rem,2.1vw,2.05rem);margin-bottom:.7rem;
  transition:transform .6s var(--e),color .45s var(--e)}
.why__c:hover h3{transform:translateX(7px)}
.why__c p{margin:0;color:var(--muted);font-size:var(--t-small);
  transition:transform .6s var(--e) .04s,color .45s var(--e)}
.why__c:hover p{transform:translateX(7px);color:var(--text)}
.why__ln{position:absolute;left:0;bottom:0;height:1px;width:100%;transform:scaleX(0);
  transform-origin:left center;background:linear-gradient(90deg,var(--rust),rgba(232,85,42,0) 82%);
  transition:transform .85s var(--e)}
.why__c:hover .why__ln{transform:scaleX(1)}
.why__go{position:absolute;right:clamp(1.1rem,2.2vw,2rem);top:clamp(1.4rem,2.6vw,2.4rem);
  width:13px;height:13px;color:var(--rust-hi);opacity:0;transform:translate(-8px,8px);
  transition:opacity .5s var(--e),transform .6s var(--e)}
.why__go svg{width:100%;height:100%;display:block}
.why__c:hover .why__go{opacity:1;transform:none}
.why__c .hex-badge{margin-bottom:1.4rem}

/* ————— Zahlen ————— */

/* ————— Kennzahlen ————— */
.kpiband{position:relative}
.kpiband__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:1rem 2rem;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
.kpiband__note{margin:0;max-width:62ch;font-size:var(--t-small)}
.kpi2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 60%)}
@media (max-width:900px){.kpi2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.kpi2{grid-template-columns:1fr}}
.kpi2__c{position:relative;display:block;isolation:isolate;overflow:hidden;
  padding:clamp(1.4rem,2.6vw,2.2rem) clamp(1.2rem,2.2vw,2rem) clamp(1.6rem,3vw,2.4rem);
  box-shadow:inset 1px 0 0 var(--line);
  transition:background .55s var(--e),opacity .5s var(--e)}
.kpi2__c:first-child{box-shadow:none}
@media (max-width:900px){
  .kpi2__c:nth-child(2n+1){box-shadow:none}
  .kpi2__c:nth-child(n+3){box-shadow:inset 0 1px 0 var(--line),inset 1px 0 0 var(--line)}
  .kpi2__c:nth-child(3){box-shadow:inset 0 1px 0 var(--line)}}
@media (max-width:520px){
  .kpi2__c{box-shadow:inset 0 1px 0 var(--line)!important}
  .kpi2__c:first-child{box-shadow:none!important}}
.kpi2__c::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(130% 110% at var(--mx,50%) var(--my,0%),rgba(232,85,42,.16),transparent 62%);
  transition:opacity .55s var(--e)}
.kpi2__c:hover::before{opacity:1}
@media (hover:hover){.kpi2:hover .kpi2__c{opacity:.42}.kpi2 .kpi2__c:hover{opacity:1}}
.kpi2__i{display:block;font-family:var(--f-label);font-weight:500;font-size:.6rem;letter-spacing:.22em;
  color:var(--dim);font-variant-numeric:tabular-nums;transition:color .4s var(--e)}
.kpi2__c:hover .kpi2__i{color:var(--rust)}
/* Mikro-Visualisierung */
.kpi2__viz{display:block;margin:clamp(1rem,2vw,1.6rem) 0 clamp(.6rem,1.2vw,1rem);
  color:var(--rust);height:clamp(30px,4vw,44px)}
.kpiviz{width:auto;height:100%;display:block;overflow:visible}
.kpiviz .kpu{opacity:.16;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.4)}
.kpi2.in .kpiviz .kpu{animation:kpuIn .6s cubic-bezier(.2,.8,.3,1) forwards var(--d,0s)}
@keyframes kpuIn{0%{opacity:.16;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}
  100%{opacity:.85;transform:scale(1)}}
.kpi2__c:hover .kpiviz .kpu{animation:kpuPulse 1.6s var(--e) infinite var(--d,0s)}
@keyframes kpuPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.16)}}
/* Zahl */
.kpi2__n{display:flex;align-items:baseline;gap:.06em;
  font-family:var(--f-display);font-size:clamp(2.6rem,5.2vw,4.8rem);line-height:1;
  color:var(--white);letter-spacing:.02em;font-variant-numeric:tabular-nums;
  transform-origin:left bottom;transition:color .5s var(--e),transform .6s var(--e)}
.kpi2__c:hover .kpi2__n{color:#FFE6D2;transform:scale(1.03)}
.kpi2__n sup{font-size:.42em;color:var(--rust-hi);line-height:1;transform:translateY(-.2em)}
.kpi2__n .rl{display:inline-flex;gap:.03em}
.kpi2__n .dg{display:block;overflow:hidden;height:1.14em}
.kpi2__n .dg i{display:block;font-style:normal;transform:translateY(0);will-change:transform;
  transition:transform 2.5s cubic-bezier(.16,.86,.24,1)}
.kpi2__n .dg i span{display:block;height:1.14em;line-height:1.14}
.kpi2__l{display:block;margin-top:.8rem;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .45s var(--e)}
.kpi2__c:hover .kpi2__l{color:var(--white)}
.kpi2__d{display:block;margin-top:.5rem;font-size:var(--t-small);color:var(--dim);line-height:1.45;
  transition:color .45s var(--e)}
.kpi2__c:hover .kpi2__d{color:var(--muted)}
.kpi2__ar{position:absolute;right:clamp(1.1rem,2vw,1.8rem);top:clamp(1.2rem,2.4vw,2rem);
  width:12px;height:12px;color:var(--rust-hi);opacity:0;transform:translate(-7px,7px);
  transition:opacity .45s var(--e),transform .55s var(--e)}
.kpi2__ar svg{width:100%;height:100%;display:block}
.kpi2__c:hover .kpi2__ar{opacity:1;transform:none}
.kpi2__rail{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.06)}
.kpi2__rail i{position:absolute;left:0;top:0;height:100%;width:100%;transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--rust),rgba(232,85,42,0));
  transition:transform 1.2s var(--e) var(--dly,0s)}
.kpi2.in .kpi2__rail i{transform:scaleX(1)}
.kpi2__c:hover .kpi2__rail i{background:linear-gradient(90deg,#FFB07A,var(--rust) 60%,rgba(232,85,42,0))}

/* ————— Prozess (Sticky) ————— */
.proc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,7rem)}
@media (max-width:900px){.proc{grid-template-columns:1fr}}
.proc__sticky{position:sticky;top:calc(var(--hdr) + 2rem);align-self:start}
@media (max-width:900px){.proc__sticky{position:static}}
.proc__hexwrap{position:relative;aspect-ratio:1;max-width:520px;margin-top:clamp(2rem,4vw,3.4rem);
  color:var(--muted)}
body[data-tone="paper"] section:not([data-solid="1"]) .proc__hexwrap{color:#14161B}
.hexdia{width:100%;height:auto;overflow:visible}
.hexdia__rot{transform-origin:50px 45.48px;animation:hexRot 40s linear infinite}
.hexdia__rot2{transform-origin:50px 45.48px;animation:hexRot 66s linear infinite reverse}
.hexdia__inner{transform-origin:50px 45.48px;animation:hexRot 120s linear infinite}
@keyframes hexRot{to{transform:rotate(360deg)}}
.hexdia__core{opacity:.5;transform-origin:50px 45.48px;animation:hexCorePulse 6.5s var(--e) infinite}
@keyframes hexCorePulse{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.9;transform:scale(1.05)}}
.hexdia__spark{filter:drop-shadow(0 0 3px rgba(232,85,42,.85))}
.hexdia__spark--b,.hexdia__spark--c{filter:none}
/* Skalenring */
.hexdia__ticks .hxtick{opacity:.16;transition:opacity .5s var(--e),stroke .5s var(--e)}
.hexdia__ticks .hxtick--b{opacity:.3}
.hexdia__ticks .hxtick.on{stroke:var(--rust);opacity:.75}
.hexdia__ticks .hxtick--b.on{opacity:1}
/* Kopfpunkt des Fortschritts */
#hexHead{transition:opacity .5s var(--e);filter:drop-shadow(0 0 2.5px rgba(232,85,42,.9))}
#hexHead .hexhead__halo{transform-origin:0 0;animation:hexHead 2.2s var(--e) infinite}
#hexHead .hexhead__ring{transform-origin:0 0;animation:hexHead 2.2s var(--e) .35s infinite}
@keyframes hexHead{0%{transform:scale(.7);opacity:.85}75%,100%{transform:scale(1.9);opacity:0}}
/* Verbindungslinie zur aktiven Phase */
#hexLink{transition:stroke-dashoffset .8s var(--e),opacity .5s var(--e)}
/* Phasenpunkte unter dem Label */
.hexdia__dots .hexdot{opacity:.3;transition:opacity .45s var(--e),color .45s var(--e)}
.hexdia__dots .hexdot__f{opacity:0;transition:opacity .45s var(--e)}
.hexdia__dots .hexdot.on{opacity:1;color:var(--rust)}
.hexdia__dots .hexdot.on .hexdot__f{opacity:1}
/* Impuls beim Phasenwechsel */
.hexnode__ripple{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.hexnode.fire .hexnode__ripple{animation:hexFire 1s cubic-bezier(.2,.7,.3,1)}
@keyframes hexFire{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(2.6)}}
#hexProg{transition:stroke-dashoffset .35s cubic-bezier(.3,0,.2,1)}
#hexGlowPath{transition:stroke-dashoffset .55s cubic-bezier(.3,0,.2,1)}
.hexdia .hexnode{color:rgba(10,12,17,.3);cursor:pointer;outline:none;
  transition:color .45s var(--e)}
.hexdia .hexnode .hexnode__shape{fill:var(--tone-bg);
  transition:transform .5s var(--e),stroke-width .4s var(--e),fill 1s ease}
.hexdia .hexnode text{opacity:.55;transition:opacity .45s var(--e)}
.hexdia .hexnode__pulse{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.hexdia .hexnode:hover,.hexdia .hexnode:focus-visible{color:rgba(10,12,17,.75)}
.hexdia .hexnode:hover text,.hexdia .hexnode:focus-visible text{opacity:1}
.hexdia .hexnode.on{color:var(--rust)}
.hexdia .hexnode.on text{opacity:1}
.hexdia .hexnode.on .hexnode__pulse{opacity:1;animation:hexPulse 2.4s var(--e) infinite}
.hexdia .hexnode:focus-visible .hexnode__shape{stroke-width:9}
@keyframes hexPulse{
  0%{transform:scale(.86);opacity:.75}
  70%{transform:scale(1.5);opacity:0}
  100%{transform:scale(1.5);opacity:0}}
#hexLabel{transition:opacity .4s var(--e)}
#hexLabel.swap{animation:hexSwap .55s var(--e)}
@keyframes hexSwap{0%{opacity:0;letter-spacing:3.4px}100%{opacity:1;letter-spacing:1.6px}}
@media (max-width:900px){.proc__hexwrap{max-width:min(420px,86vw);margin-inline:auto;
  margin-top:clamp(1.8rem,5vw,2.6rem)}}
.proc__step{border-bottom:1px solid var(--line);padding-block:clamp(1.5rem,3vw,2.6rem);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.4vw,2.4rem);align-items:start;
  opacity:.5;transition:opacity .6s var(--e)}
.proc__step.act,.proc__step:hover{opacity:1}
.proc__step h3{font-size:clamp(1.2rem,2.1vw,1.95rem);margin-bottom:.5rem}
.proc__step p{margin:0;color:var(--muted);font-size:var(--t-small)}
.proc__step ul{margin:.8rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.proc__step li{font-family:var(--f-sans);font-size:var(--t-cap);letter-spacing:.02em;
  color:var(--muted);border:1px solid var(--line);padding:.32rem .66rem;border-radius:var(--r)}
.proc__step .svc__num{color:var(--dim)}
body[data-tone="paper"] section:not([data-solid="1"]) .proc__step{border-bottom-color:var(--line-dark)}
body[data-tone="paper"] section:not([data-solid="1"]) .proc__step li{color:#5A6068;border-color:var(--line-dark)}
body[data-tone="paper"] section:not([data-solid="1"]) .proc__step .svc__num{color:#8A9098}
.proc__step.act .svc__num{color:var(--rust)}

/* ————— Paper-Sektionen (Rhythmuswechsel) ————— */
body[data-tone="paper"] section:not([data-solid="1"]){color:#14161B}
body[data-tone="paper"] section:not([data-solid="1"]) h1,body[data-tone="paper"] section:not([data-solid="1"]) h2,body[data-tone="paper"] section:not([data-solid="1"]) h3,body[data-tone="paper"] section:not([data-solid="1"]) h4,body[data-tone="paper"] section:not([data-solid="1"]) .d-xl,body[data-tone="paper"] section:not([data-solid="1"]) .d-xxl{color:#0A0C11}
body[data-tone="paper"] section:not([data-solid="1"]) .muted{color:#5A6068}
body[data-tone="paper"] section:not([data-solid="1"]) .dim{color:#787F87}
body[data-tone="paper"] section:not([data-solid="1"]) .eyebrow{color:#787F87}
body[data-tone="paper"] section:not([data-solid="1"]) .rule,body[data-tone="paper"] section:not([data-solid="1"]) .kpi__c{border-color:var(--line-dark)}
body[data-tone="paper"] section:not([data-solid="1"]) .svc__tags{color:#5A6068}
body[data-tone="paper"] section:not([data-solid="1"]) .svc__t{color:#0A0C11}
body[data-tone="paper"] section:not([data-solid="1"]) .svc__num{color:#787F87}
body[data-tone="paper"] section:not([data-solid="1"]) .svc__list{border-top-color:var(--line-dark)}
body[data-tone="paper"] section:not([data-solid="1"]) .svc__row{border-bottom-color:var(--line-dark)}
body[data-tone="paper"] section:not([data-solid="1"]) .svc__row:hover .svc__t{color:var(--rust)}
.hex-badge::after{background:var(--tone-bg)}
body[data-tone="paper"] section:not([data-solid="1"]) .hex-badge::before{background:rgba(10,12,17,.22)}
body[data-tone="paper"] section:not([data-solid="1"]) .hex-badge{color:#5A6068}
.svc-case{grid-column:span 4}
@media (max-width:820px){.svc-case{grid-column:1/-1}}
body[data-tone="paper"] section:not([data-solid="1"]) .btn{--bg:var(--void);--fg:var(--white)}
body[data-tone="paper"] section:not([data-solid="1"]) .tlink{color:#0A0C11}
body[data-tone="rust"] section:not([data-solid="1"]){color:#fff}
body[data-tone="rust"] section:not([data-solid="1"]) h2,body[data-tone="rust"] section:not([data-solid="1"]) .d-xl{color:#fff}
body[data-tone="rust"] section:not([data-solid="1"]) .eyebrow{color:rgba(255,255,255,.7)}
body[data-tone="rust"] section:not([data-solid="1"]) .eyebrow::before{background:#fff}
body[data-tone="rust"] section:not([data-solid="1"]) .btn{--bg:#fff;--fg:var(--rust)}
body[data-tone="rust"] section:not([data-solid="1"]) .btn::after{background:var(--void)}
body[data-tone="rust"] section:not([data-solid="1"]) .btn:hover{color:#fff}


/* ————— Kundenstimmen (Karten mit Videohintergrund) ————— */
.vsec{position:relative}
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:860px){.vgrid{grid-template-columns:1fr;gap:14px}}
.vcw{position:relative;display:block}
.vcw::before{content:'';position:absolute;width:100%;height:100%;top:60px;left:60px;
  background:#C9C9C9;opacity:0;transition:opacity .8s ease-in-out;pointer-events:none;filter:blur(111px)}
.vcw:hover::before{opacity:.12}
.vcard{position:relative;width:100%;height:clamp(400px,42vw,560px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:#070707;isolation:isolate;
  --gx:50%;--gy:50%}
/* Medienebene: schwarzweiss und halbtransparent, beim Hover farbig und voll */
.vcard__media{position:absolute;inset:0;overflow:hidden;z-index:0;mix-blend-mode:lighten;opacity:.5;
  transition:opacity .45s ease-in-out}
.vcard:hover .vcard__media,.vcard.on .vcard__media{opacity:1}
.vcard__media video,.vcard__media img{position:absolute;top:-3%;left:0;width:100%;height:82%;
  object-fit:cover;object-position:top;display:block}
.vcard__sat{position:absolute;inset:0;background:#000;mix-blend-mode:saturation;pointer-events:none;
  opacity:1;transition:opacity .8s ease-in-out}
.vcard:hover .vcard__sat,.vcard.on .vcard__sat{opacity:0}
.vcard__grad{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,7,0) 18%,rgba(7,7,7,.4) 38%,rgba(7,7,7,.85) 54%,#070707 70%)}
/* Leuchtkanten, die dem Cursor folgen */
.vgl{position:absolute;z-index:3;opacity:0;pointer-events:none;transition:opacity .4s ease-in-out}
.vcard:hover .vgl,.vcard.on .vgl{opacity:1}
.vgl--t{top:0;left:0;right:0;height:1px}
.vgl--b{bottom:0;left:0;right:0;height:1px}
.vgl--l{top:0;bottom:0;left:0;width:1px}
.vgl--r{top:0;bottom:0;right:0;width:1px}
.vgl--t,.vgl--b{background:
  radial-gradient(280px circle at var(--gx) 50%,rgba(255,255,255,.96),transparent 70%),
  linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12))}
.vgl--l,.vgl--r{background:
  radial-gradient(280px circle at 50% var(--gy),rgba(255,255,255,.96),transparent 70%),
  linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12))}
/* Inhalt */
.vcard__body{position:relative;z-index:4;display:flex;flex-direction:column;justify-content:flex-end}
.vcard__q{margin:0;padding:clamp(1.4rem,2.4vw,2rem) clamp(1.4rem,2.6vw,2.5rem) 0;
  font-size:var(--t-small);line-height:1.55;color:var(--muted);letter-spacing:-.005em}
.vcard:hover .vcard__q{color:var(--text)}
.vcard__bot{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.vcard__p{display:flex;gap:.75rem;align-items:center;
  padding:clamp(1.4rem,2.4vw,2rem) 0 clamp(1.4rem,2.4vw,2rem) clamp(1.4rem,2.6vw,2.5rem)}
.vcard__av{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:0 0 auto;
  clip-path:url(#caHex);background:linear-gradient(150deg,#2A2E36,#14161B);
  font-family:var(--f-label);font-weight:500;font-size:.72rem;letter-spacing:.08em;color:var(--white);
  transition:background .6s var(--e),color .5s var(--e)}
.vcard:hover .vcard__av,.vcard.on .vcard__av{background:linear-gradient(150deg,#E8552A,#8E2F10)}
.vcard__i{display:flex;flex-direction:column;min-width:0}
.vcard__n{font-size:var(--t-small);font-weight:500;color:var(--white);line-height:1.35}
.vcard__r{font-size:var(--t-small);color:var(--dim);line-height:1.35}
.vcard__logo{position:relative;display:grid;place-items:center;align-self:stretch;
  margin:0 clamp(.8rem,1.6vw,1.5rem);padding:0 1rem}
.vcard__logo img{position:relative;z-index:1;width:auto;max-height:30px;max-width:130px;
  filter:grayscale(1) brightness(2.4);opacity:.7;transition:opacity .5s var(--e),filter .5s var(--e)}
.vcard:hover .vcard__logo img,.vcard.on .vcard__logo img{opacity:1}
.vcard__logo::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;z-index:0;
  background:linear-gradient(180deg,rgba(217,217,217,0),rgba(217,217,217,1));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  opacity:0;filter:blur(13px);pointer-events:none}
.vcard:hover .vcard__logo::before,.vcard.on .vcard__logo::before{animation:vTube .5s ease-in-out forwards}
@keyframes vTube{to{opacity:.11;height:48%}}
.vcard__logo::after{content:'';position:absolute;bottom:0;left:0;right:0;pointer-events:none;
  border-bottom:2px solid transparent;transition:border-color .4s ease-in-out}
.vcard:hover .vcard__logo::after,.vcard.on .vcard__logo::after{border-bottom-color:#fff}
/* Hinweis auf das Videostatement */
.vcard__play{position:absolute;right:clamp(1rem,2vw,1.6rem);top:clamp(1rem,2vw,1.6rem);z-index:5;
  display:flex;align-items:center;gap:.5rem;padding:.34rem .7rem .34rem .5rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(7,7,7,.5);backdrop-filter:blur(8px);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.18em;
  text-transform:uppercase;color:var(--white);opacity:0;transform:translateY(-6px);
  transition:opacity .45s var(--e),transform .55s var(--e)}
.vcard:hover .vcard__play,.vcard.on .vcard__play{opacity:1;transform:none}
.vcard__play i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--rust);color:#fff;font-style:normal;font-size:.5rem;padding-left:2px}
@media (max-width:640px){
  .vcard{height:auto;min-height:400px}
  .vcard__media video,.vcard__media img{height:68%}
  .vcard__grad{background:linear-gradient(180deg,rgba(7,7,7,0) 10%,rgba(7,7,7,.4) 28%,rgba(7,7,7,.85) 46%,#070707 62%)}
  .vcard__bot{flex-direction:column;align-items:flex-start;gap:0}
  .vcard__p{padding-bottom:1rem}
  .vcard__av{width:40px;height:40px;font-size:.62rem}
  .vcard__logo{align-self:stretch;margin:0;padding:0 0 1.4rem clamp(1.4rem,2.6vw,2.5rem);
    justify-items:start;place-items:center start}
  .vcard__logo img{max-height:26px}
  .vgl{display:none}
  .vcw::before,.vcard__logo::before,.vcard__logo::after{display:none}
}
/* Fussnote der Sektion */
.vfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:clamp(1.6rem,3vw,2.4rem)}
body[data-tone="rust"] section:not([data-solid="1"]) .vcard__q{color:rgba(255,255,255,.66)}
body[data-tone="rust"] section:not([data-solid="1"]) .vfoot .req{border-color:rgba(255,255,255,.5);color:#fff}

/* ————— Testimonials ————— */
.quote{max-width:26ch}
.quote blockquote{margin:0;font-size:clamp(1.6rem,3.6vw,3.4rem);line-height:1.18;
  letter-spacing:-.028em;font-weight:200;color:var(--white);max-width:20ch}
.quote figcaption{margin-top:clamp(1.4rem,2.6vw,2.2rem);font-family:var(--f-label);font-weight:500;
  font-size:var(--t-cap);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ————— Portal-Sektion ————— */
.portal{position:relative;overflow:hidden}
.portal__panel{position:relative;border:1px solid var(--line-2);border-radius:var(--r);
  padding:clamp(1.8rem,5vw,5rem);background:
    radial-gradient(90% 120% at 88% 8%,rgba(192,67,28,.16),transparent 58%),var(--surface)}
.portal__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:900px){.portal__grid{grid-template-columns:1fr}}

/* ————— Portal: animiertes Produktmodell ————— */
.portal__right{position:relative}
.pmock{position:relative;border:1px solid var(--line-2);border-radius:calc(var(--r) + 2px);
  background:linear-gradient(180deg,#0D1016,#0A0C11);overflow:hidden;isolation:isolate;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pmock__glow{position:absolute;inset:-30% -10% auto;height:70%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 100% at 70% 0%,rgba(232,85,42,.20),transparent 70%);
  animation:pmGlow 9s var(--e) infinite alternate}
@keyframes pmGlow{from{opacity:.5;transform:translateY(-6%)}to{opacity:1;transform:translateY(6%)}}
.pmock__bar{position:relative;z-index:2;display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.pmock__mark{width:15px;height:14px;color:var(--rust-hi);flex:none}
.pmock__mark svg{width:100%;height:100%;display:block;overflow:visible}
.pmock__bar b{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.18em;
  text-transform:uppercase;color:var(--white)}
.pmock__live{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;
  font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - 1px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.pmock__live i{width:6px;height:6px;border-radius:50%;background:var(--rust);
  box-shadow:0 0 0 0 rgba(232,85,42,.55);animation:pmPing 2.4s var(--e) infinite}
@keyframes pmPing{0%{box-shadow:0 0 0 0 rgba(232,85,42,.5)}70%{box-shadow:0 0 0 7px rgba(232,85,42,0)}
  100%{box-shadow:0 0 0 0 rgba(232,85,42,0)}}
.pmock__dots{display:flex;gap:4px}
.pmock__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.14)}
.pmock__body{position:relative;z-index:2;height:clamp(220px,26vw,268px)}
.pmock__view{position:absolute;inset:0;padding:clamp(1rem,2vw,1.5rem);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--e),transform .6s var(--e)}
.pmock__view.is-on{opacity:1;transform:none;pointer-events:auto}

/* Plan */
.pmock__cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:.5rem;padding-bottom:.7rem;border-bottom:1px solid var(--line);
  font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - 1px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.pmock__gantt{position:relative;padding-top:.5rem}
.pmock__today{position:absolute;left:38%;top:0;bottom:0;width:1px;background:rgba(232,85,42,.5)}
.pmock__today::after{content:'';position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;
  background:var(--rust)}
.pgrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,3fr);gap:.5rem;align-items:center;
  padding:.42rem 0}
.pgrow span{font-size:var(--t-small);color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pgrow b{position:relative;display:block;height:9px;border-radius:99px;
  margin-left:var(--x);width:var(--w);transform-origin:left;transform:scaleX(0);opacity:0;
  background:linear-gradient(90deg,rgba(232,85,42,.85),rgba(232,85,42,.35))}
.pmock__view.is-on .pgrow b{animation:pgBar .8s cubic-bezier(.2,.8,.25,1) forwards var(--d,0s)}
@keyframes pgBar{to{transform:scaleX(1);opacity:1}}

/* Tracking */
.ptrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:.9rem;
  align-items:center;padding:.62rem 0;border-bottom:1px solid var(--line)}
.ptrow span{font-size:var(--t-small);color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.ptbar{position:relative;display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.07);
  overflow:hidden}
.ptbar b{position:absolute;inset:0;width:var(--p);transform-origin:left;transform:scaleX(0);
  border-radius:99px;background:linear-gradient(90deg,#F0894B,#C0431C)}
.pmock__view.is-on .ptbar b{animation:ptFill 1.1s cubic-bezier(.2,.8,.25,1) forwards var(--d,0s)}
@keyframes ptFill{to{transform:scaleX(1)}}
.ptrow em{font-style:normal;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.1em;color:var(--rust-hi);font-variant-numeric:tabular-nums;min-width:3.2rem;text-align:right}
.pmock__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem}
.pmock__ts{font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - 1px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* Follow */
.pcom{display:flex;gap:.7rem;align-items:flex-start;padding:.5rem 0}
.pcom__av{display:grid;place-items:center;width:30px;height:30px;flex:none;clip-path:url(#caHex);
  background:linear-gradient(150deg,#2A2E36,#14161B);color:var(--white);
  font-family:var(--f-label);font-weight:500;font-size:.55rem;letter-spacing:.06em}
.pcom__av--you{background:linear-gradient(150deg,#E8552A,#8E2F10)}
.pcom__b b{display:block;font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - 1px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:.25rem}
.pcom__t{margin:0;font-size:var(--t-small);color:var(--text);
  background:rgba(255,255,255,.045);border-radius:0 var(--r) var(--r) var(--r);padding:.5rem .75rem;
  opacity:0;transform:translateY(6px)}
.pmock__view.is-on .pcom__t{animation:pcIn .5s var(--e) .15s forwards}
@keyframes pcIn{to{opacity:1;transform:none}}
.pcom__typ{display:inline-flex;gap:5px;margin:0;padding:.62rem .8rem;border-radius:0 var(--r) var(--r) var(--r);
  background:rgba(232,85,42,.14)}
.pcom__typ i{width:5px;height:5px;border-radius:50%;background:var(--rust-hi);opacity:.35}
.pmock__view.is-on .pcom__typ i{animation:pcTyp 1.2s var(--e) infinite}
.pmock__view.is-on .pcom__typ i:nth-child(2){animation-delay:.15s}
.pmock__view.is-on .pcom__typ i:nth-child(3){animation-delay:.3s}
@keyframes pcTyp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.papprove{display:flex;align-items:center;gap:.8rem;margin-top:.7rem;padding-top:.8rem;
  border-top:1px solid var(--line)}
.papprove__l{font-size:var(--t-small);color:var(--muted);margin-right:auto}
.pchip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .62rem;border-radius:999px;
  font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - 1px);letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--line-2);color:var(--dim);white-space:nowrap}
.pchip svg{width:12px;height:12px}
.pchip--live{border-color:rgba(232,85,42,.4);color:var(--rust-hi)}
.pchip--ok{position:absolute;border-color:var(--rust);color:#fff;background:rgba(192,67,28,.9);
  opacity:0;transform:scale(.9)}
.papprove{position:relative}
.pchip--ok{right:0}
.pmock__view.is-on .pchip--wait{animation:pchOut .5s var(--e) 1.9s forwards}
.pmock__view.is-on .pchip--ok{animation:pchIn .55s cubic-bezier(.2,.8,.3,1) 2.1s forwards}
@keyframes pchOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes pchIn{to{opacity:1;transform:none}}

/* Reiter links neben dem Modell */
.pfeat{list-style:none;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pfeat__i{position:relative;background:var(--surface);padding:.95rem 1.1rem;display:grid;
  grid-template-columns:auto auto minmax(0,1fr);gap:.5rem 1rem;align-items:center;cursor:pointer;
  outline:none;transition:background .45s var(--e),padding-left .45s var(--e)}
.pfeat__i:hover,.pfeat__i:focus-visible{background:var(--surface-2);padding-left:1.5rem}
.pfeat__i.is-on{background:var(--surface-2)}
.pfeat__n{font-family:var(--f-label);font-weight:500;font-size:.6rem;letter-spacing:.2em;color:var(--dim);
  transition:color .4s var(--e)}
.pfeat__i.is-on .pfeat__n{color:var(--rust)}
.pfeat__i b{font-family:var(--f-label);font-weight:400;font-size:var(--t-cap);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);min-width:5.6rem;transition:color .4s var(--e)}
.pfeat__i.is-on b{color:var(--rust-hi)}
.pfeat__d{font-size:var(--t-small);color:var(--muted)}
.pfeat__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--rust),rgba(232,85,42,.2))}
.pfeat__i.is-on .pfeat__bar{animation:pfBar var(--dur,6.5s) linear forwards}
.pmock-hold .pfeat__i.is-on .pfeat__bar{animation-play-state:paused}
@keyframes pfBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:560px){
  .pfeat__i{grid-template-columns:auto minmax(0,1fr)}
  .pfeat__i .pfeat__d{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .pmock__glow,.pmock__live i,.pcom__typ i,.pfeat__i.is-on .pfeat__bar{animation:none!important}
  .pmock__view.is-on .pgrow b,.pmock__view.is-on .ptbar b,.pmock__view.is-on .pcom__t,
  .pmock__view.is-on .pchip--ok{animation:none!important;opacity:1;transform:none}
  .pmock__view.is-on .pchip--wait{opacity:0}
}

/* ————— Insights ————— */
/* Lesezeit als Hexagon-Reihe */
.rdots{display:inline-flex;align-items:center;gap:.5rem}
.rdots__d{display:inline-flex;gap:2px}
.rdots__d i{width:6px;height:5.5px;background:var(--line-3,rgba(255,255,255,.18));
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  transition:background .4s var(--e),transform .5s var(--e);
  transition-delay:calc(var(--k) * 25ms)}
.rdots__d i.on{background:var(--rust)}
.icard:hover .rdots__d i.on,.ilead:hover .rdots__d i.on{background:var(--rust-hi);transform:translateY(-2px)}
.rdots__t{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}

/* ————— Insights: Aufmacher und Kartenraster —————
   Jede Karte fuehrt ihr Motiv. Beim Einlaufen faehrt eine Blende ueber das
   Bild, beim Hover zieht das Motiv langsam auf, ein Lichtstreifen laeuft
   einmal durch und das Marken-Hexagon dreht sich herein. */
.ihead{display:flex;align-items:center;gap:1.4rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.ihead .eyebrow{margin:0;flex:none}
.ihead__line{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.idim{margin:2rem 0 0;font-size:var(--t-small);color:var(--dim)}

/* Aufmacher */
.ilead{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(1.6rem,3.5vw,3.4rem);align-items:center;
  padding:clamp(1.1rem,2vw,1.6rem);border-radius:calc(var(--r) + 10px);
  box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden;
  transition:box-shadow .5s var(--e),transform .6s var(--e)}
@media (max-width:900px){.ilead{grid-template-columns:1fr}}
.ilead:hover{box-shadow:inset 0 0 0 1px rgba(232,85,42,.42);transform:translateY(-3px)}
.ilead__im{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r);background:#08090d}
.ilead__im img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.45) contrast(1.12) brightness(1.04);
  transform:scale(1.1) translateY(var(--py,0px));
  transition:filter .7s var(--e)}
.ilead:hover .ilead__im img{filter:grayscale(0) contrast(1.14) brightness(1.14)}
/* feines Raster ueber dem Motiv, driftet langsam */
.ilead__grid{position:absolute;inset:-20%;pointer-events:none;opacity:.3;
  background-image:linear-gradient(90deg,rgba(233,220,200,.16) 1px,transparent 1px),
                   linear-gradient(180deg,rgba(233,220,200,.16) 1px,transparent 1px);
  background-size:52px 52px;animation:ileadGrid 26s linear infinite}
@keyframes ileadGrid{to{transform:translate(52px,52px)}}
.ilead__scan{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%);
  transform:translateX(-60%)}
.ilead:hover .ilead__scan{animation:iScan 1.1s var(--e) forwards}
@keyframes iScan{0%{opacity:0;transform:translateX(-60%)}22%{opacity:.9}100%{opacity:0;transform:translateX(60%)}}
.ilead__hx{position:absolute;right:-6%;bottom:-14%;width:42%;color:var(--rust);
  opacity:.2;pointer-events:none;transform:rotate(-8deg);
  transition:transform .9s var(--e),opacity .6s var(--e)}
.ilead__hx svg{width:100%;height:auto;display:block;overflow:visible}
.ilead:hover .ilead__hx{transform:rotate(22deg) scale(1.05);opacity:.4}
.ilead__b{display:block;min-width:0;padding-right:clamp(0rem,1.5vw,1.4rem)}
.ilead__b h2{font-size:clamp(1.5rem,2.9vw,2.5rem);margin:.9rem 0 .8rem;
  transition:transform .5s var(--e)}
.ilead:hover .ilead__b h2{transform:translateX(6px)}
.ilead__b p{margin:0;color:var(--muted);font-size:var(--t-small);line-height:1.6;max-width:52ch}
.ilead__new{padding:.16rem .5rem;border-radius:999px;background:rgba(232,85,42,.16);
  box-shadow:inset 0 0 0 1px rgba(232,85,42,.5);color:var(--rust-hi)}
.ilead__take{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.42rem}
.ilead__take li{position:relative;padding-left:1.3rem;font-size:var(--t-small);color:var(--text)}
.ilead__take li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:7px;
  background:var(--rust);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.ilead__go{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.18em;
  text-transform:uppercase;color:var(--white);
  padding-bottom:3px;border-bottom:1px solid var(--line-2);
  transition:color .4s var(--e),border-color .4s var(--e)}
.ilead__go i{width:11px;height:11px;color:var(--rust-hi);transition:transform .45s var(--e)}
.ilead__go i svg{width:100%;height:100%;display:block}
.ilead:hover .ilead__go{color:var(--rust-hi);border-bottom-color:var(--rust)}
.ilead:hover .ilead__go i{transform:translateX(4px)}

/* Kartenraster */
/* Sechs Spalten als Grundraster: die ersten beiden sichtbaren Karten laufen
   ueber drei, die uebrigen ueber zwei Spalten — daraus entsteht der
   redaktionelle Rhythmus. Die Spannweiten vergibt insightSpans() neu,
   sobald gefiltert wird. */
.icards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gut);
  row-gap:clamp(2.2rem,4vw,3.4rem)}
.icards .icard{grid-column:span var(--span,2)}
.icards .icard[style*="--span: 3"] .icard__im{aspect-ratio:16/9}
@media (max-width:1100px){.icards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .icards .icard{grid-column:span 1}
  .icards .icard .icard__im{aspect-ratio:16/10}}
@media (max-width:620px){.icards{grid-template-columns:1fr}}
.icard{display:flex;flex-direction:column;gap:0;
  transition:transform .55s var(--e)}
.icard:hover{transform:translateY(-5px)}
.icard__im{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r);background:#08090d;
  box-shadow:inset 0 0 0 1px var(--line-2);
  /* Blende faehrt beim Einlaufen ueber das Motiv */
  clip-path:inset(0 0 100% 0 round var(--r));
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) var(--dly,0s),box-shadow .45s var(--e)}
.icard.in .icard__im{clip-path:inset(0 0 0 0 round var(--r))}
.icard:hover .icard__im{box-shadow:inset 0 0 0 1px rgba(232,85,42,.45)}
.icard__im img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.45) contrast(1.14) brightness(1.06);
  transform:scale(1.12) translateY(var(--py,0px));
  transition:filter .6s var(--e)}
.icard:hover .icard__im img{filter:grayscale(0) contrast(1.16) brightness(1.16)}
/* Licht folgt dem Zeiger ueber dem Motiv */
.icard__light{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(232,85,42,.3),transparent 70%);
  transition:opacity .5s var(--e)}
.icard:hover .icard__light{opacity:1}
.icard__veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(6,7,10,.6));
  transition:opacity .5s var(--e)}
.icard:hover .icard__veil{opacity:.6}
.icard__scan{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.4) 50%,transparent 58%);
  transform:translateX(-60%)}
.icard:hover .icard__scan{animation:iScan .95s var(--e) forwards}
/* Das Hexagon zeichnet sich beim Hover selbst */
.icard__hx{position:absolute;right:.75rem;top:.75rem;width:26px;height:24px;color:#fff;
  opacity:0;transform:rotate(-20deg);
  transition:opacity .4s var(--e),transform .7s var(--e)}
.icard__hx svg{width:100%;height:100%;display:block;overflow:visible}
.icard__hx path{stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .9s var(--e)}
.icard:hover .icard__hx{opacity:.95;transform:none}
.icard:hover .icard__hx path{stroke-dashoffset:0}
.icard__n{position:absolute;left:.85rem;bottom:.7rem;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;
  color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;
  transition:color .4s var(--e)}
.icard:hover .icard__n{color:var(--rust-hi)}
.icard__b{display:block;padding-top:1rem;margin-top:1rem;
  border-top:1px solid var(--line-2);transition:border-color .45s var(--e)}
.icard:hover .icard__b{border-top-color:var(--rust)}
.icard__top{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin-bottom:.7rem}
.icard__cat{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.22em;
  text-transform:uppercase;color:var(--rust-hi)}
.icard__read{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
/* Titelunterstrich zeichnet sich von links */
.icard h3{font-size:clamp(1.15rem,1.6vw,1.55rem);
  background-image:linear-gradient(var(--rust-hi),var(--rust-hi));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .7s var(--e)}
.icard:hover h3{background-size:100% 1px}
.icards .icard[style*="--span: 3"] h3{font-size:clamp(1.3rem,2vw,1.95rem)}
.icard p{margin:.6rem 0 0;color:var(--muted);font-size:var(--t-small);line-height:1.55}
.icard__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.icard time{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.18em;color:var(--dim)}
.icard__ar{width:11px;height:11px;color:var(--rust-hi);opacity:0;transform:translateX(-6px);
  transition:.45s var(--e)}
.icard__ar svg{width:100%;height:100%;display:block}
.icard:hover .icard__ar{opacity:1;transform:none}

/* Zaehler in den Filterchips */
.chip__n{font-style:normal;margin-left:.45rem;font-size:.85em;opacity:.55;
  font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .chip__n{opacity:.6}

@media (prefers-reduced-motion:reduce){
  .icard__im{clip-path:none!important;transition:none}
  .icard__im img,.ilead__im img{transform:scale(1.04)!important}
  .ilead__grid,.icard:hover .icard__scan,.ilead:hover .ilead__scan{animation:none}
  .chips__ind,.icard h3{transition:none}}

/* ————— Final CTA ————— */
.finale{position:relative;overflow:hidden;text-align:center;padding-block:clamp(6rem,14vw,16rem)}
.finale .d-xxl{position:relative;z-index:2}
.finale__bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 55% at 50% 65%,rgba(192,67,28,.28),transparent 68%)}

/* ————— Kontaktformular ————— */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
@media (max-width:760px){.form{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.6rem;position:relative}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  padding:.9rem 0;color:var(--white);font:inherit;font-size:var(--t-lead);font-weight:300;
  border-radius:0;transition:border-color .4s var(--e)}
.field select{color:var(--white)}
.field select option{background:var(--surface);color:var(--white)}
.field textarea{resize:vertical;min-height:8rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--rust-hi)}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field .err{font-size:var(--t-cap);color:var(--rust-hi);min-height:1.1em;
  font-family:var(--f-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.55rem 1rem;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:.3s var(--e)}
.chip[aria-pressed="true"]{background:var(--white);color:var(--void);box-shadow:none}
/* Leisten mit data-rail: die Markierung gleitet, die Chips selbst bleiben klar */
.chips[data-rail]{position:relative}
.chips[data-rail] .chip{position:relative;z-index:1;background:none!important;
  box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);
  transition:color .35s var(--e),box-shadow .35s var(--e)}
.chips[data-rail] .chip:hover{color:var(--white);box-shadow:inset 0 0 0 1px rgba(232,85,42,.4)}
.chips[data-rail] .chip[aria-pressed="true"]{color:var(--void);box-shadow:none}
.chips__ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:var(--r);
  background:var(--white);opacity:0;pointer-events:none;
  box-shadow:0 6px 20px rgba(232,85,42,.22);
  transition:transform .58s cubic-bezier(.34,1.3,.5,1),width .45s var(--e),
             height .35s var(--e),opacity .3s var(--e)}
.chips__ind.on{opacity:1}
body[data-tone="rust"] .chips[data-rail] .chip{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);color:rgba(255,255,255,.8)}
body[data-tone="rust"] .chips[data-rail] .chip[aria-pressed="true"]{color:var(--rust)}
.chips--pick .chip.is-on{background:rgba(232,85,42,.16);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(232,85,42,.65)}
.chips--pick .chip:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(232,85,42,.4)}

/* ————— Umschalter Projektanfrage / Rueckruf —————
   Zwei Karten mit gleitendem Hintergrund. Beim Wechsel taucht das alte
   Formular unscharf nach unten ab, das neue steigt scharf herein, und die
   Hoehe des Rahmens morpht mit — daher die gemessene Hoehe per JS. */
.fswitch{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.4rem;
  padding:.4rem;margin-bottom:clamp(1.6rem,3vw,2.4rem);
  border-radius:calc(var(--r) + 8px);box-shadow:inset 0 0 0 1px var(--line-2)}
@media (max-width:520px){.fswitch{grid-template-columns:1fr}}
.fswitch__ind{position:absolute;left:.4rem;top:.4rem;bottom:.4rem;width:0;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(232,85,42,.2),rgba(232,85,42,.08));
  box-shadow:inset 0 0 0 1px rgba(232,85,42,.55);
  transform:translateX(0);
  transition:transform .62s cubic-bezier(.34,1.3,.5,1),width .45s var(--e)}
.fswitch__glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90% 120% at 50% 120%,rgba(232,85,42,.35),transparent 70%);opacity:.9}
.fswitch.is-swap .fswitch__ind{animation:fswPop .62s cubic-bezier(.34,1.3,.5,1)}
@keyframes fswPop{0%{filter:brightness(1)}34%{filter:brightness(1.6)}100%{filter:brightness(1)}}
.fswitch__b{position:relative;z-index:1;display:flex;align-items:center;gap:.8rem;
  padding:.85rem 1rem;border-radius:var(--r);cursor:pointer;text-align:left;
  color:var(--muted);transition:color .4s var(--e)}
.fswitch__b:hover{color:var(--text)}
.fswitch__b.is-on{color:#fff}
.fswitch__ico{width:26px;height:26px;flex:none;color:var(--dim);
  transition:color .4s var(--e),transform .6s var(--e)}
.fswitch__ico svg{width:100%;height:100%;display:block}
.fswitch__b.is-on .fswitch__ico{color:var(--rust-hi);transform:translateY(-1px) scale(1.06)}
.fswitch__t{display:block;min-width:0}
.fswitch__t b{display:block;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.16em;text-transform:uppercase}
.fswitch__t i{display:block;margin-top:.2rem;font-style:normal;font-size:var(--t-small);
  color:var(--dim);transition:color .4s var(--e)}
.fswitch__b.is-on .fswitch__t i{color:var(--muted)}

.fpanes{position:relative;overflow:clip}
.fpane{transition:opacity .45s var(--e),transform .6s cubic-bezier(.32,1,.34,1),
  filter .45s var(--e),visibility 0s}
/* Nicht aktive Kachel: unsichtbar, nicht anklickbar und aus der Tabreihenfolge */
.fpane:not(.is-on){position:absolute;inset:0 0 auto 0;opacity:0;pointer-events:none;
  visibility:hidden;transform:translateY(22px) scale(.99);filter:blur(7px);
  transition-delay:0s,0s,0s,.5s}
.fpane.is-on{position:relative;opacity:1;transform:none;filter:none;visibility:visible}
.fpane[hidden]{display:none}
/* Felder steigen versetzt herein */
.fpane.is-swap .field{animation:fpFld .55s var(--e) backwards}
.fpane.is-swap .field:nth-child(1){animation-delay:.04s}
.fpane.is-swap .field:nth-child(2){animation-delay:.08s}
.fpane.is-swap .field:nth-child(3){animation-delay:.12s}
.fpane.is-swap .field:nth-child(4){animation-delay:.16s}
.fpane.is-swap .field:nth-child(n+5){animation-delay:.2s}
@keyframes fpFld{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* mitlaufender Satz im Rueckrufformular */
.fsum{display:flex;align-items:center;gap:.6rem;margin:0;
  padding:.8rem .95rem;border-radius:var(--r);
  background:rgba(232,85,42,.07);box-shadow:inset 0 0 0 1px rgba(232,85,42,.28);
  font-size:var(--t-small);color:var(--text)}
.fsum__hx{width:17px;height:17px;flex:none;color:var(--rust-hi);animation:fsumHx 5s var(--e) infinite}
.fsum__hx svg{width:100%;height:100%;display:block}
@keyframes fsumHx{0%,100%{opacity:.6;transform:rotate(0)}50%{opacity:1;transform:rotate(30deg)}}
#cbSumTxt b{color:#fff;font-weight:400}

@media (prefers-reduced-motion:reduce){
  .fswitch__ind,.fpane{transition:none}
  .fswitch.is-swap .fswitch__ind,.fpane.is-swap .field,.fsum__hx{animation:none}}

/* Der Rahmen steckt in .sent selbst — hier nur die Spur über die volle Breite */
.form__done{grid-column:1/-1;font-size:var(--t-small)}

/* ————— Footer ————— */
.ftr{position:relative;overflow:hidden;border-top:1px solid var(--line);
  padding-top:clamp(3.5rem,7vw,7rem);background:
    radial-gradient(120% 85% at 50% 120%,rgba(192,67,28,.10),transparent 62%),var(--void)}
.ftr__mesh{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(180deg,var(--line) 1px,transparent 1px);
  background-size:calc(100% / 8) 90px;
  -webkit-mask-image:radial-gradient(90% 100% at 50% 100%,#000,transparent 72%);
  mask-image:radial-gradient(90% 100% at 50% 100%,#000,transparent 72%)}
.ftr__hex{position:absolute;top:8%;right:-12%;width:min(52vw,700px);color:var(--line-2);
  pointer-events:none;animation:slowspin 90s linear infinite}
.ftr__hex svg{width:100%;height:auto;fill:none;stroke:currentColor}
@keyframes slowspin{to{transform:rotate(360deg)}}
.ftr__inner{position:relative;z-index:1}

.ftr__top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:clamp(2.4rem,5vw,5rem);padding-bottom:clamp(2.6rem,5vw,4.6rem);
  border-bottom:1px solid var(--line)}
@media (max-width:980px){.ftr__top{grid-template-columns:1fr}}
.ftr__claim{font-size:clamp(1.25rem,2.1vw,2rem);line-height:1.3;letter-spacing:-.024em;
  font-weight:200;color:var(--white);margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.ftr__claim em{font-style:normal;color:var(--rust-hi)}

.ftr__news label{display:block;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:.9rem}
.ftr__news-row{display:flex;align-items:center;gap:.8rem;max-width:26rem;
  border-bottom:1px solid var(--line-2);transition:border-color .4s var(--e)}
.ftr__news-row:focus-within{border-bottom-color:var(--rust-hi)}
.ftr__news-row input{flex:1;min-width:0;background:none;border:0;padding:.75rem 0;
  color:var(--white);font:inherit;font-size:var(--t-body)}
.ftr__news-row input:focus{outline:none}
.ftr__news-row input::placeholder{color:var(--dim)}
.ftr__news-row button{width:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--white);
  transition:background .35s var(--e),color .35s var(--e),box-shadow .35s var(--e)}
.ftr__news-row button:hover{background:var(--rust);box-shadow:none;color:#fff}
.ftr__news-msg{display:block;min-height:1.2em;margin-top:.7rem;font-family:var(--f-label);font-weight:500;
  font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--rust-hi)}

.ftr__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.6rem)}
@media (max-width:760px){.ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.ftr__cols{grid-template-columns:1fr}}
.ftr h4{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:1.1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.ftr a{position:relative;color:var(--muted);font-size:var(--t-small);
  transition:color .3s var(--e),padding-left .35s var(--e)}
.ftr__cols a:hover{color:var(--white);padding-left:.5rem}
.ftr__cols a::before{content:'';position:absolute;left:0;top:.62em;width:0;height:1px;
  background:var(--rust-hi);transition:width .35s var(--e)}
.ftr__cols a:hover::before{width:.3rem}
a.ftr__addr{display:block;color:var(--dim)!important;font-size:var(--t-small);line-height:1.55}
.ftr__cols a.ftr__addr:hover{color:var(--muted)!important}
.ftr__route{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;
  font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - 1px);letter-spacing:.16em;
  text-transform:uppercase;color:var(--rust-hi);
  opacity:0;transform:translateY(-4px);transition:opacity .4s var(--e),transform .45s var(--e)}
.ftr__cols a.ftr__addr:hover .ftr__route,.ftr__cols a.ftr__addr:focus-visible .ftr__route{
  opacity:1;transform:none}
.ftr__route i{width:11px;height:11px}
.ftr__route i svg{width:100%;height:100%;display:block}

/* Verfuegbarkeit und grosse Kontaktzeile */
.ftr__status{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .8rem;
  margin-top:clamp(1.6rem,3vw,2.4rem);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.ftr__status i{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.ftr__pulse{position:relative;width:7px;height:7px;border-radius:50%;background:#4ADE80;flex:none}
.ftr__pulse::after{content:'';position:absolute;inset:0;border-radius:50%;background:#4ADE80;
  animation:ftrPulse 2.6s var(--e) infinite}
@keyframes ftrPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3.2);opacity:0}
  100%{transform:scale(3.2);opacity:0}}
/* Spezifitaet: .ftr a setzt sonst die kleine Schriftgroesse */
.ftr a.ftr__big{display:inline-flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem);
  margin-top:clamp(1.4rem,2.6vw,2rem);color:var(--white)!important;text-decoration:none;
  font-family:var(--f-sans);font-weight:200;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.1;padding:0!important}
.ftr__big-t{position:relative;display:block;overflow:hidden}
.ftr__big-t span{display:block;transition:transform .55s var(--e),color .4s var(--e)}
.ftr__big-t span+span{position:absolute;left:0;top:0;transform:translateY(105%);color:var(--rust-hi)}
.ftr__big:hover .ftr__big-t span{transform:translateY(-105%)}
.ftr__big:hover .ftr__big-t span+span{transform:translateY(0)}
.ftr__big-hex{position:relative;display:grid;place-items:center;width:clamp(38px,4vw,52px);aspect-ratio:1;
  color:var(--line-2);flex:none;transition:color .45s var(--e),transform .6s var(--e)}
.ftr__big-hex>svg:first-child{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transition:transform .8s var(--e)}
.ftr__big-ar{position:relative;width:36%;height:36%;color:var(--white);
  transition:transform .55s var(--e)}
.ftr__big:hover .ftr__big-hex{color:var(--rust)}
.ftr__big:hover .ftr__big-hex>svg:first-child{transform:rotate(60deg)}
.ftr__big:hover .ftr__big-ar{transform:translate(3px,-3px);color:var(--rust-hi)}

/* Standort-Uhren */
.ftr__clocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);margin-top:clamp(2rem,4vw,3.4rem)}
@media (max-width:760px){.ftr__clocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ftr__clock{background:var(--void);padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem}
.ftr__clock b{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.ftr__clock time{font-family:var(--f-label);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.6rem);
  letter-spacing:.1em;color:var(--white);font-variant-numeric:tabular-nums}
.ftr__clock small{font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - .5px);
  letter-spacing:.18em;color:var(--dim)}
/* Sonnenbogen: Auf- und Untergang als Kurve, Punkt zeigt den Sonnenstand */
.ftr__sun{display:block;margin-top:.85rem}
.ftr__sun svg{width:100%;height:auto;display:block;overflow:visible}
.ftr__sun .sun-hor{stroke:rgba(255,255,255,.14);stroke-width:.5}
.ftr__sun .sun-night{stroke:rgba(255,255,255,.16);stroke-width:.7;fill:none;stroke-dasharray:1.6 2.2}
.ftr__sun .sun-day{stroke:url(#sg0);stroke-width:1;fill:none;stroke-linecap:round}
.ftr__sun .sun-fill{opacity:.5}
.ftr__sun .sun-dot{transition:transform 1s var(--e)}
.ftr__sun .sun-dot circle{transition:fill .8s var(--e),r .8s var(--e)}
.ftr__sun .sun-glow{opacity:0;transition:opacity .8s var(--e)}
.ftr__clock.is-day .sun-glow{opacity:1;animation:sunPulse 4.5s var(--e) infinite}
@keyframes sunPulse{0%,100%{opacity:.55}50%{opacity:1}}
.ftr__suntimes{display:flex;gap:1rem;margin-top:.5rem;
  font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - 1px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.ftr__suntimes b{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.ftr__suntimes span{display:inline-flex;align-items:center;gap:.35rem}
.ftr__suntimes i{width:9px;height:9px;color:var(--rust-hi)}
.ftr__suntimes i svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){.ftr__clock.is-day .sun-glow{animation:none}}

.ftr__mark{position:relative;z-index:1;margin-top:clamp(2rem,5vw,5rem);opacity:.92;
  /* Luft nach oben, damit das rotierende Hexagon nicht an der viewBox haengt */
  padding-top:3.4%;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.25) 100%);
  mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.25) 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
/* Das SVG beschneidet sonst alles, was beim Drehen ueber die viewBox laeuft */
.ftr__mark svg{width:100%;height:auto;overflow:visible}
.ftr__mark .wm-word{fill:var(--white)}
/* Das Hexagon im Schriftzug dreht sich langsam um seine eigene Mitte */
.ftr__mark .wm-hex{transform-box:fill-box;transform-origin:50% 50%;
  animation:wmHex 26s linear infinite}
@keyframes wmHex{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ftr__mark .wm-hex,.ftr__pulse::after{animation:none}}
.ftr__mark .wm-sub{fill:var(--dim)}

.ftr__base{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center;
  padding-block:1.5rem clamp(1.5rem,3vw,2.2rem);margin-top:clamp(1.4rem,2.6vw,2rem);
  border-top:1px solid var(--line);font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.ftr__base nav{display:flex;flex-wrap:wrap;gap:1rem 1.6rem}
.ftr__base a{font-size:var(--t-cap);letter-spacing:.18em}
.ftr__top-btn{display:inline-flex;align-items:center;gap:.6rem;color:var(--muted);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.18em;text-transform:uppercase;
  transition:color .3s var(--e)}
.ftr__top-btn:hover{color:var(--white)}
.ftr__top-btn svg{transition:transform .4s var(--e)}
.ftr__top-btn:hover svg{transform:translateY(-3px)}

/* ————— Page-Transition ————— */
.pt{position:fixed;inset:0;z-index:150;pointer-events:none;display:grid;place-items:center;
  background:var(--deep);transform:scaleY(0);transform-origin:bottom}
.pt::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--rust)}
.pt__mark{width:64px;color:var(--rust-hi);opacity:0}
.pt__mark svg{width:100%;height:auto}
body.pt-out .pt{animation:ptOut .38s var(--e-io) forwards}
body.pt-out .pt__mark{animation:ptMark .38s var(--e) forwards}
body.pt-in .pt{animation:ptIn .5s var(--e) forwards}
body.pt-in .pt__mark{animation:ptMarkOut .3s var(--e) forwards}
@keyframes ptOut{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
@keyframes ptIn{from{transform:scaleY(1);transform-origin:top}to{transform:scaleY(0);transform-origin:top}}
@keyframes ptMark{0%{opacity:0;transform:scale(.6) rotate(-30deg)}100%{opacity:1;transform:none}}
@keyframes ptMarkOut{to{opacity:0;transform:scale(1.3)}}

/* ————— Views ————— */
.view{display:none;position:relative}
.view.on{display:block}

/* Der Seitenhintergrund traegt die Farbe der Sektion, in die man gerade
   hineinscrollt — genau wie bei klmnko.de (dort body.color-black / .color-white
   plus `body{transition:background-color 1s ease}`). */
body{--tone-bg:var(--void)}
body[data-tone="dark"]{background-color:var(--void);--tone-bg:var(--void)}
body[data-tone="paper"]{background-color:var(--paper);--tone-bg:var(--paper)}
body[data-tone="rust"]{background-color:var(--rust);--tone-bg:var(--rust)}
@media (prefers-reduced-motion:reduce){body{transition:none}}

/* ————— Sektions-Uebergaenge —————
   Kein Verlaufsband und keine Kante mehr: die Sektion, in die gerade
   hineingescrollt wird, ist durchsichtig und zeigt den Seitenhintergrund; alle
   anderen behalten ihre eigene Flaeche. Dadurch faerbt sich beim Scrollen die
   ganze Flaeche weich um, statt an einer Naht umzuschlagen. */
/* Alle Sektionen ohne eigenen Bildaufbau sind durchsichtig — sie zeigen den
   Seitenhintergrund und faerben sich damit gemeinsam um. */
.tonesec:not([data-solid="1"]){background-color:transparent}
/* Nur waehrend des Wechsels laufen Text-, Linien- und Flaechenfarben mit */
body.tone-anim section:not([data-solid="1"]),
body.tone-anim section:not([data-solid="1"]) *:not(svg):not(path):not(circle):not(rect):not(line){
  transition:color 1s ease,border-color 1s ease,background-color 1s ease,fill 1s ease!important}
.seam-out{padding-bottom:clamp(5rem,11vh,8.5rem)}
.seam-in{padding-top:clamp(5rem,11vh,8.5rem)}
@media (max-width:820px){
  .seam-out{padding-bottom:clamp(4rem,9vh,6rem)}
  .seam-in{padding-top:clamp(4rem,9vh,6rem)}
}
main{padding-top:0}
.page-hero{padding-top:calc(var(--hdr) + clamp(3.5rem,9vw,9rem));padding-bottom:clamp(2.5rem,6vw,6rem);
  position:relative;overflow:hidden}
.page-hero__meta{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;padding-top:1.6rem;
  border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3.4rem)}
.page-hero__meta div b{display:block;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:.4rem}
.crumb{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);margin-bottom:1.6rem;display:flex;gap:.7rem;flex-wrap:wrap}
.crumb a:hover{color:var(--white)}

/* Case-Study-Bausteine */
.case-block{padding-block:clamp(2.4rem,5vw,5rem)}
.case-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
@media (max-width:760px){.case-two{grid-template-columns:1fr}}
.case-full img{width:100%;aspect-ratio:2.39/1;object-fit:cover;filter:grayscale(.5) contrast(1.05)}
.case-sec{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(1.4rem,4vw,4rem);
  padding-block:clamp(2rem,4vw,4rem);border-top:1px solid var(--line)}
@media (max-width:820px){.case-sec{grid-template-columns:1fr}}
.case-sec h3{font-size:clamp(1.3rem,2.2vw,2.1rem)}
/* FAQ-Zeilen mit Plus/Minus-Zeichen */
.faqrow summary{display:flex;align-items:center;justify-content:space-between;gap:1.4rem}
.faqrow summary::-webkit-details-marker{display:none}
.faqrow__x{position:relative;width:14px;height:14px;flex:none;color:var(--rust-hi)}
.faqrow__x::before,.faqrow__x::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--e),opacity .3s var(--e)}
.faqrow__x::before{width:14px;height:1.5px}
.faqrow__x::after{width:1.5px;height:14px}
.faqrow[open] .faqrow__x::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faqrow[open] summary span{color:var(--rust-hi)}

/* ————— Artikel: Text mit Randspalte ————— */
.artgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:900px){.artgrid{grid-template-columns:1fr}}
.artside{position:sticky;top:calc(var(--hdr-h,88px) + 1.6rem);display:grid;gap:1.2rem}
@media (max-width:900px){.artside{position:static}}
.artbox{padding:clamp(1.1rem,2vw,1.5rem);border-radius:var(--r);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.artbox ul{list-style:none;margin:.8rem 0 0;padding:0}
.artbox li{position:relative;padding:.55rem 0 .55rem 1.5rem;font-size:var(--t-small);
  line-height:1.5;color:var(--muted);border-top:1px solid var(--line)}
.artbox li:first-child{border-top:0;padding-top:0}
.artbox li::before{content:'';position:absolute;left:0;top:.95rem;width:8px;height:7px;
  background:var(--rust);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.artbox li:first-child::before{top:.4rem}
.artbox--cta{background:rgba(232,85,42,.07);box-shadow:inset 0 0 0 1px rgba(232,85,42,.3)}
.artbox--cta p{margin:.8rem 0 1rem;font-size:var(--t-small);color:var(--muted);line-height:1.5}

/* ————— Teamkarten ————— */
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);
  margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:980px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tgrid{grid-template-columns:1fr}}
.tcard{margin:0}
.tcard__im{position:relative;aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
  transition:box-shadow .5s var(--e)}
.tcard__im::after{content:'';position:absolute;left:50%;top:50%;width:42%;aspect-ratio:1/.91;
  transform:translate(-50%,-50%);pointer-events:none;
  background:var(--rust);opacity:.07;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  transition:opacity .6s var(--e),transform .8s var(--e)}
.tcard:hover .tcard__im{box-shadow:inset 0 0 0 1px rgba(232,85,42,.45)}
.tcard:hover .tcard__im::after{opacity:.16;transform:translate(-50%,-50%) rotate(30deg) scale(1.08)}
.tcard__im img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);
  transition:filter .6s var(--e),transform 1s var(--e)}
.tcard:hover .tcard__im img{transform:scale(1.04)}
.tcard figcaption{padding-top:.9rem}
.tcard figcaption b{display:block;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
.tcard figcaption span{display:block;margin-top:.28rem;font-size:var(--t-small);color:var(--rust-hi)}
.tcard figcaption p{margin:.55rem 0 0;font-size:var(--t-small);color:var(--muted);line-height:1.5}

/* ————— Case-Bausteine: Zahlenband, Ablauf, Leistungen, Zitat ————— */
.cfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
@media (max-width:720px){.cfacts{grid-template-columns:1fr}}
.cfact{position:relative;background:var(--tone-bg,var(--void));
  padding:clamp(1.4rem,2.6vw,2.2rem);overflow:hidden}
.cfact::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--rust-hi),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform .8s var(--e)}
.cfact:hover::after{transform:scaleY(1)}
.cfact b{display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(2.4rem,5vw,4rem);line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums}
.cfact span{display:block;margin-top:.6rem;font-size:var(--t-small);color:var(--muted);
  max-width:26ch;line-height:1.45}
.cfacts__note{margin-top:1.2rem;font-size:var(--t-small)}

.csteps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cstep{display:grid;grid-template-columns:minmax(0,.2fr) minmax(0,.8fr);
  gap:clamp(1rem,3vw,3rem);padding:clamp(1.3rem,2.6vw,2.2rem) 0;
  border-bottom:1px solid var(--line);transition:padding-left .5s var(--e)}
.cstep:hover{padding-left:.7rem}
@media (max-width:720px){.cstep{grid-template-columns:1fr;gap:.5rem}}
.cstep__n{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.2em;color:var(--rust-hi);font-variant-numeric:tabular-nums}
.cstep h3{font-size:clamp(1.1rem,1.9vw,1.6rem);margin-bottom:.5rem}
.cstep p{margin:0;color:var(--muted);font-size:var(--t-small);line-height:1.6;max-width:62ch}

.cdel{list-style:none;margin:0;padding:0}
.cdel li{position:relative;padding:.75rem 0 .75rem 1.9rem;
  border-bottom:1px solid var(--line);font-size:var(--t-small);line-height:1.55;
  transition:padding-left .45s var(--e)}
.cdel li:first-child{border-top:1px solid var(--line)}
.cdel li:hover{padding-left:2.3rem}
.cdel li::before{content:'';position:absolute;left:.15rem;top:1.15rem;width:9px;height:8px;
  background:var(--rust);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

.cquote{position:relative;margin:0;padding:clamp(1.8rem,4vw,3.4rem);
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden}
.cquote__hx{position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(300px,38%);color:var(--rust);opacity:.09;pointer-events:none}
.cquote__hx svg{width:100%;height:auto;display:block;overflow:visible}
.cquote blockquote{margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.3rem,2.8vw,2.3rem);line-height:1.35;color:var(--white);max-width:26ch}
.cquote figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;
  margin-top:clamp(1.2rem,2.4vw,1.8rem);font-size:var(--t-small);color:var(--muted)}
.cquote figcaption b{color:var(--white);font-weight:400}

.case-two figure{margin:0}
.case-two figcaption{margin-top:.7rem;font-size:var(--t-cap);letter-spacing:.14em;
  text-transform:uppercase;font-family:var(--f-label);color:var(--dim)}

.next-proj{display:block;position:relative;overflow:hidden;border-radius:var(--r)}
.next-proj img{width:100%;aspect-ratio:2.6/1;object-fit:cover;filter:grayscale(1) brightness(.55);
  transition:transform 1.2s var(--e),filter .7s var(--e)}
.next-proj:hover img{transform:scale(1.05);filter:grayscale(.3) brightness(.7)}
.next-proj__lbl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;gap:.7rem;z-index:2}

/* Artikel */
.article__body{max-width:74ch;margin-inline:auto}
.article__body h2{font-size:clamp(1.4rem,2.4vw,2.2rem);margin-block:2.2em .7em}
.article__body p{font-size:var(--t-lead);line-height:1.75;color:var(--text);font-weight:300}
.article__body ul{padding-left:1.1rem;color:var(--text)}
.article__body li{margin-bottom:.5em}
.svc__row details,details.svc__row{padding-block:clamp(1.2rem,2.4vw,2rem)}
details.svc__row summary::-webkit-details-marker{display:none}
details.svc__row summary::after{content:'+';float:right;color:var(--rust-hi);font-family:var(--f-label);font-weight:500}
details.svc__row[open] summary::after{content:'–'}
.article__body blockquote{margin:2.4rem 0;padding-left:1.6rem;border-left:2px solid var(--rust);
  font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:200;letter-spacing:-.018em;color:var(--white)}

/* Content-Lücken sichtbar machen */
.util-contact .req,.ftr .req,.menu__block .req{font-size:.56rem;padding:.12rem .38rem;
  background:rgba(192,67,28,.10);box-shadow:inset 0 0 0 1px rgba(192,67,28,.34);opacity:.85}
.req{display:inline-flex;align-items:center;gap:.45rem;padding:.18rem .5rem;border-radius:var(--r);
  background:rgba(192,67,28,.14);box-shadow:inset 0 0 0 1px rgba(192,67,28,.5);
  font-family:var(--f-label);font-weight:500;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rust-hi);vertical-align:middle}

/* Cookie-Banner */
.consent{position:fixed;left:var(--pad);right:var(--pad);bottom:1rem;z-index:120;
  max-width:640px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:1.2rem 1.3rem;display:grid;gap:1rem;transform:translateY(140%);
  transition:transform .7s var(--e)}
.consent.on{transform:none}
.consent p{margin:0;font-size:var(--t-small);color:var(--muted)}
.consent__row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.consent .btn{padding:.75rem 1.3rem}

/* ————— Brand-Ticker ————— */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);
  padding-block:clamp(1.1rem,2vw,1.7rem);background:var(--deep)}
.ticker__track{display:flex;align-items:center;gap:clamp(2rem,4vw,4rem);flex:none;width:max-content;
  animation:marq 74s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track>span{display:inline-flex;align-items:center;gap:clamp(2rem,4vw,4rem);
  font-family:var(--f-display);font-size:clamp(1.05rem,2.3vw,2.1rem);letter-spacing:.22em;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:.6px rgba(238,240,244,.34);
  white-space:nowrap;transition:color .5s var(--e)}
.ticker:hover .ticker__track>span{color:rgba(238,240,244,.06)}
.ticker__track>span i{display:inline-block;width:.34em;height:.4em;background:var(--rust);
  -webkit-text-stroke:0;clip-path:url(#caHex);
  vertical-align:middle}
.ticker--in .ticker__track{animation-direction:reverse;animation-duration:98s}

/* ————— Section-Divider mit Linienzeichnung ————— */
.divider{position:relative;height:1px;background:var(--line);overflow:visible}
.divider::after{content:'';position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--rust),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e)}
.divider.in::after{transform:scaleX(1)}

/* ————— Cursor-Glow auf dunklen Panels ————— */
.glow-panel{position:relative;isolation:isolate}
.glow-panel::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(232,85,42,.16),transparent 70%);
  transition:opacity .5s var(--e)}
.glow-panel:hover::before{opacity:1}

/* ————— KPI-Zaehler ————— */
.kpi__c::after{content:'';position:absolute;left:0;top:0;height:1px;width:100%;background:var(--rust);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e) var(--dly,0s)}
.kpi__c.in::after{transform:scaleX(1)}
.kpi__n sup{font-size:.42em;color:var(--rust-hi);line-height:1;transform:translateY(-.2em)}

/* ————— Card-Innenparallax ————— */
.pcard__media img{will-change:transform}
.pcard__shine{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.14) 48%,transparent 58%);
  transform:translateX(-40%);transition:opacity .4s var(--e)}
.pcard:hover .pcard__shine{opacity:1;animation:shine 1.1s var(--e)}
@keyframes shine{from{transform:translateX(-45%)}to{transform:translateX(45%)}}

/* ————— Service-Row Feinschliff ————— */
.svc__row{position:relative;overflow:hidden}
.svc__row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--rust);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--e)}
.svc__row:hover::before{transform:scaleY(1);transform-origin:top}
.svc__go{position:absolute;right:0;top:50%;transform:translate(14px,-50%);opacity:0;
  color:var(--rust-hi);transition:.5s var(--e);pointer-events:none}
.svc__row:hover .svc__go{opacity:1;transform:translate(0,-50%)}
@media (max-width:1023px){.svc__go{display:none}}

/* ————— Portal-Orbit-Grafik ————— */
.orbit{position:relative;aspect-ratio:1;width:min(100%,340px);margin-inline:auto;color:var(--line-2)}
.orbit svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor}
.orbit__r1{animation:slowspin 46s linear infinite}
.orbit__r2{animation:slowspin 34s linear infinite reverse;color:rgba(232,85,42,.42)}
.orbit__core{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted)}
.orbit__node{fill:var(--rust-hi);stroke:none}

/* ————— Hero-Feinschliff ————— */
.hero__scan{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.25;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)}
.hero__horizon{position:absolute;left:50%;bottom:44%;width:min(1100px,88vw);height:1px;z-index:-1;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(233,220,200,.5),transparent);
  animation:horizon 6.5s var(--e) infinite}
@keyframes horizon{0%,100%{opacity:.25}50%{opacity:.7}}
.hero__stars span{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  animation:twinkle var(--tw,5s) ease-in-out infinite var(--td,0s)}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.75;transform:scale(1)}}
.hero__kicker span{position:relative;padding-left:1.15rem}
.hero__kicker span::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;
  background:var(--rust);clip-path:url(#caHex)}

/* Zeichen-Reveal fuer Display-Typo */
.split .ln{white-space:nowrap}
.split .ch{display:inline-block;transform:translateY(.9em) rotate(4deg);opacity:0;
  transition:transform .95s var(--e) var(--d,0s),opacity .7s var(--e) var(--d,0s)}
.split.in .ch{transform:none;opacity:1}

/* Scroll-Indikator rechts */
.railmark{position:fixed;right:calc(var(--pad) / 2);top:50%;transform:translateY(-50%);z-index:60;
  display:none;flex-direction:column;align-items:center;gap:.8rem;pointer-events:none;opacity:0;
  transition:opacity .5s var(--e)}
@media (min-width:1280px){.railmark{display:flex}}
.railmark.on{opacity:1}
.railmark i{width:1px;height:120px;background:var(--line-2);position:relative;overflow:hidden}
.railmark i::after{content:'';position:absolute;left:0;top:0;width:1px;height:var(--p,0%);
  background:var(--rust-hi)}
.railmark b{font-family:var(--f-label);font-weight:500;font-size:calc(var(--t-cap) - 1px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);writing-mode:vertical-rl;
  transition:color .5s var(--e)}
.railmark i{transition:background .5s var(--e)}
.railmark[data-tone="rust"] b{color:#fff}
.railmark[data-tone="rust"] i{background:rgba(255,255,255,.32)}
.railmark[data-tone="rust"] i::after{background:#fff}
.railmark[data-tone="paper"] b{color:#5A6068}
.railmark[data-tone="paper"] i{background:rgba(10,12,17,.16)}
.railmark[data-tone="paper"] i::after{background:var(--rust)}

/* Magnetische Elemente */
[data-magnet]{will-change:transform;transition:transform .5s var(--e)}

/* ————— Standorte: 3D-Globus ————— */
.locs{position:relative;overflow:hidden}
.globe{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:center}
@media (max-width:940px){.globe{grid-template-columns:1fr;gap:clamp(2rem,6vw,3rem)}}

.globe__stage{position:relative;width:100%;max-width:min(600px,82vw);margin-inline:auto;
  aspect-ratio:1;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.globe__stage.is-drag{cursor:grabbing}
.globe__halo{position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(198,90,42,.20) 0%,rgba(198,90,42,.07) 38%,transparent 66%);
  opacity:.85;transition:opacity .6s var(--e)}
.globe__stage:hover .globe__halo{opacity:1}
.globe__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.globe__pins{position:absolute;inset:0;pointer-events:none}
.gpin{position:absolute;top:0;left:0;display:flex;align-items:center;gap:.42rem;
  transform:translate3d(-50%,-50%,0);white-space:nowrap;opacity:0;
  transition:opacity .35s var(--e)}
.gpin__l{font-family:var(--f-label);font-weight:500;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--white);
  padding:.24rem .5rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(6,7,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .35s var(--e),color .35s var(--e),background .35s var(--e)}
.gpin.on .gpin__l{border-color:var(--rust);color:var(--rust-hi);background:rgba(26,10,4,.82)}
.gpin--l .gpin__l{transform:translateX(-100%)}
@media (max-width:560px){.gpin__l{font-size:.55rem;letter-spacing:.14em;padding:.18rem .4rem}
  .globe__hint{letter-spacing:.14em;bottom:-1.2rem}}

.globe__hint{position:absolute;left:50%;bottom:-.4rem;transform:translateX(-50%);
  display:flex;align-items:center;gap:.5rem;margin:0;pointer-events:none;white-space:nowrap;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);opacity:.75;transition:opacity .5s var(--e)}
.globe__stage.is-drag .globe__hint{opacity:0}
.globe__hint-i{width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--rust),transparent);
  animation:gHint 2.8s var(--e) infinite}
@keyframes gHint{0%,100%{transform:translateX(-5px);opacity:.4}50%{transform:translateX(5px);opacity:1}}

/* Standort-Liste */
.loclist{position:relative;display:flex;flex-direction:column;
  border-top:1px solid var(--line)}
.locrow{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  padding:clamp(1rem,2.1vw,1.5rem) 0;border-bottom:1px solid var(--line);
  transition:padding-left .55s var(--e),border-color .45s var(--e)}
.locrow::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--rust),transparent);transition:width .7s var(--e)}
.locrow:hover,.locrow:focus-visible{padding-left:clamp(.6rem,1.4vw,1.1rem);outline:none}
.locrow:hover::before,.locrow:focus-visible::before{width:100%}
.locrow__i{font-family:var(--f-label);font-weight:500;font-size:.6rem;letter-spacing:.2em;
  color:var(--dim);font-variant-numeric:tabular-nums;transition:color .4s var(--e)}
.locrow:hover .locrow__i{color:var(--rust)}
.locrow__main{display:block;min-width:0}
.locrow__main b{display:block;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.6rem);letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.locrow__role{display:block;margin-top:.3rem;font-family:var(--f-label);font-weight:500;
  font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis}
.locrow time{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.14em;
  color:var(--rust-hi);font-variant-numeric:tabular-nums}
.locrow__ar{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:.7rem;
  transition:transform .5s var(--e),border-color .4s var(--e),color .4s var(--e),background .4s var(--e)}
.locrow:hover .locrow__ar{transform:translate3d(3px,-3px,0);border-color:var(--rust);
  color:var(--white);background:rgba(198,90,42,.18)}
@media (max-width:560px){.locrow{grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem}
  .locrow__ar{display:none}}

/* ————— Standort-Karten ————— */
.locgrid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
@media (max-width:1000px){.locgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.locgrid{grid-template-columns:1fr}}
.loc{display:block;position:relative}
.loc__media{display:block;position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:3/4;background:var(--surface)}
.locgrid--rich .loc__media{aspect-ratio:4/3}
.loc__media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.5) contrast(1.12) brightness(.92);transform:scale(1.04);
  transition:transform 1.2s var(--e),filter .7s var(--e)}
.loc:hover .loc__media img{transform:scale(1.1);filter:grayscale(0) contrast(1.1) brightness(1.05)}
.loc__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(6,7,10,.72));
  transition:opacity .6s var(--e)}
.loc:hover .loc__media::after{opacity:.62}
.loc__body{display:block;padding-top:1rem;border-top:1px solid var(--line);margin-top:1rem;
  transition:border-color .4s var(--e)}
.loc:hover .loc__body{border-top-color:var(--rust)}
.loc__row{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.loc__row b{font-family:var(--f-display);font-size:clamp(1rem,1.5vw,1.35rem);letter-spacing:.16em;
  text-transform:uppercase;color:var(--white);font-weight:400;
  transition:transform .5s var(--e)}
.loc:hover .loc__row b{transform:translateX(5px)}
.loc__row time{font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.14em;
  color:var(--rust-hi);font-variant-numeric:tabular-nums}
.loc__role{display:block;margin-top:.45rem;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.loc__desc{display:block;margin-top:.8rem;font-size:var(--t-small);color:var(--muted);line-height:1.55}

/* ————— Capabilities-Band ————— */
.capband{border-block:1px solid var(--line);padding-block:clamp(.9rem,1.6vw,1.4rem);
  background:var(--deep)}
.capmarq{animation-duration:130s}
.capmarq>span{display:inline-flex;align-items:center;gap:clamp(1.4rem,3vw,3rem);white-space:nowrap;
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);padding-right:clamp(1.4rem,3vw,3rem)}
.capmarq>span i{display:inline-block;width:5px;height:6px;background:var(--rust);
  clip-path:url(#caHex);vertical-align:middle}

/* ————— Video-Figur ————— */
.vfig{margin:0;position:relative}
.vfig video{width:100%;display:block;border-radius:var(--r);background:var(--surface);
  filter:grayscale(1) contrast(1.04)}
.vfig figcaption{display:flex;justify-content:space-between;gap:1rem;padding-top:1rem;
  margin-top:1rem;border-top:1px solid var(--line);
  font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* ————— Case-Zweispalter ————— */
.case-two img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
  background:var(--surface);filter:grayscale(.55) contrast(1.08);
  transition:filter .7s var(--e),transform 1.1s var(--e)}
.case-two img:hover{filter:grayscale(0) contrast(1.06);transform:scale(1.015)}

/* ————— Marketing-Mix-Grafik ————— */
.mixwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.6rem,3.5vw,3.4rem);align-items:center}
@media (max-width:900px){.mixwrap{grid-template-columns:1fr}}
.mixwrap__dia{width:100%;height:auto;filter:grayscale(1) invert(1) contrast(1.12) brightness(.95);
  mix-blend-mode:multiply}

/* ————— Button-Innenleben ————— */
.btn__txt{display:block;height:1.35em;overflow:hidden;line-height:1.35em;position:relative;z-index:1}
.btn__txt span{display:block;transition:transform .52s var(--e)}
.btn:hover .btn__txt span,.tlink:hover .btn__txt span,
.mega__cta:hover .btn__txt span,.mega__all:hover .btn__txt span{transform:translateY(-100%)}
.btn__ico{position:relative;display:grid;place-items:center;width:1.05em;height:1.05em;flex:none;z-index:1}
.btn .btn__ico{width:1.7em;height:1.55em}
.btn__ico-hex{position:absolute;inset:0;opacity:.34;
  transition:transform .8s var(--e),opacity .45s var(--e)}
.btn__ico-hex svg{width:100%;height:100%;display:block;fill:currentColor}
.btn:hover .btn__ico-hex{transform:rotate(60deg) scale(1.12);opacity:1}
.btn__ico-ar{position:relative;display:block;width:.72em;height:.72em;overflow:hidden}
.btn .btn__ico-ar{width:.62em;height:.62em}
.btn__ico-ar svg{position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:transform .52s var(--e),opacity .35s var(--e)}
.btn__ico-ar svg:nth-child(2){transform:translate(-130%,130%);opacity:0}
.btn:hover .btn__ico-ar svg:first-child,.tlink:hover .btn__ico-ar svg:first-child,
.mega__cta:hover .btn__ico-ar svg:first-child,.mega__all:hover .btn__ico-ar svg:first-child{
  transform:translate(150%,-150%);opacity:0}
.btn:hover .btn__ico-ar svg:nth-child(2),.tlink:hover .btn__ico-ar svg:nth-child(2),
.mega__cta:hover .btn__ico-ar svg:nth-child(2),.mega__all:hover .btn__ico-ar svg:nth-child(2){
  transform:none;opacity:1}
.btn{gap:.7rem}
.tlink{gap:.55rem}

/* ————— Absender im Formular —————
   Ein Knopf über die volle Breite verträgt die Sprache der kleinen Knöpfe
   nicht: Der magnetische Zug schöbe ihn aus dem Rahmen, und eine Füllung von
   unten wirkt auf 800 px Breite behäbig. Deshalb bleibt er stehen, die
   Beschriftung sitzt mittig, und die Signalfarbe wächst aus dem Zeiger. */
.btn--bar{width:100%;justify-content:center}
.btn--bar:hover{--sc:1}
.btn--bar:active{--sc:.995}
.btn--bar::after{transform:none;clip-path:circle(0 at var(--mx,50%) var(--my,50%));
  transition:clip-path .6s cubic-bezier(.55,0,.2,1)}
.btn--bar:hover::after{clip-path:circle(140% at var(--mx,50%) var(--my,50%))}
.btn--bar .btn__txt,.btn--bar .btn__ico{
  transition:transform .5s cubic-bezier(.2,.9,.24,1),opacity .34s var(--e)}

/* Fortschritt und Statuszeile — im Ruhezustand unsichtbar */
.btn__bar{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;
  background:currentColor;opacity:0;transform:scaleX(0);transform-origin:0 50%}
.btn.is-sending .btn__bar{opacity:.5;animation:btnFill 1s cubic-bezier(.3,0,.08,1) forwards}
@keyframes btnFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.btn__st{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  gap:.1rem;pointer-events:none;opacity:0;transform:translateY(65%);
  font-family:var(--f-label);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  transition:transform .5s cubic-bezier(.2,.9,.24,1),opacity .3s var(--e)}
.btn__st b{font-weight:500}
.btn__st i{width:.32em;height:.32em;margin-left:.42em;border-radius:50%;background:currentColor;
  opacity:.25;animation:stDot 1s infinite}
.btn__st i:nth-of-type(2){animation-delay:.14s}
.btn__st i:nth-of-type(3){animation-delay:.28s}
@keyframes stDot{0%,100%{opacity:.22;transform:translateY(0)}
  45%{opacity:1;transform:translateY(-.24em)}}
.btn.is-sending,.btn.is-sent{pointer-events:none}
.btn.is-sending .btn__st,.btn.is-sent .btn__st{opacity:1;transform:none}
.btn.is-sending .btn__txt,.btn.is-sent .btn__txt{opacity:0;transform:translateY(-150%)}
.btn.is-sending .btn__ico,.btn.is-sent .btn__ico{opacity:0;transform:scale(.5)}
.btn--bar.is-sending::after,.btn--bar.is-sent::after{clip-path:circle(150% at 50% 50%)}
.btn.is-sent .btn__st i{animation:none;opacity:0}
.btn.is-sent .btn__bar{opacity:.5;transform:scaleX(1)}

/* ————— Bestätigung nach dem Absenden ————— */
.form.is-gone{pointer-events:none}
.form.is-gone .field,.form.is-gone .fsum{
  animation:fieldOut .44s cubic-bezier(.55,0,.78,.1) forwards;
  animation-delay:calc(var(--i,0)*34ms)}
@keyframes fieldOut{to{opacity:0;transform:translateY(-12px) scale(.986);filter:blur(5px)}}
.form.is-off .field,.form.is-off .fsum{display:none}

.sent p,.sent ul{margin:0}
.sent{position:relative;display:grid;gap:.9rem;justify-items:start;overflow:hidden;
  padding:clamp(1.5rem,3vw,2.4rem);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(232,85,42,.12),transparent 62%),var(--surface)}
.sent::before{content:'';position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--rust),rgba(232,85,42,0));
  transform:scaleX(0);transform-origin:0 50%;
  animation:sentRule 1s cubic-bezier(.2,.9,.24,1) .08s forwards}
@keyframes sentRule{to{transform:scaleX(1)}}
.sent>*{opacity:0;transform:translateY(14px);
  animation:sentIn .72s cubic-bezier(.2,.9,.24,1) forwards;
  animation-delay:calc(.2s + var(--i,0)*90ms)}
@keyframes sentIn{to{opacity:1;transform:none}}

.sent__seal{display:block;width:clamp(46px,5vw,60px);margin-bottom:.3rem;color:var(--rust)}
.sent__seal svg{width:100%;height:auto;display:block;overflow:visible}
.sent__hx{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:sealDraw 1.05s cubic-bezier(.3,.9,.3,1) .24s forwards}
.sent__ck{fill:none;stroke:var(--white);stroke-width:5.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:sealDraw .48s cubic-bezier(.4,.9,.3,1) .98s forwards}
@keyframes sealDraw{to{stroke-dashoffset:0}}
/* Ein Ring läuft einmal nach außen — dasselbe Signal wie am Hexagon im Hero */
.sent__ring{fill:none;stroke:currentColor;stroke-width:1.6;opacity:0;
  transform-box:fill-box;transform-origin:50% 50%;
  animation:sealPing 1.6s cubic-bezier(.16,.8,.3,1) 1.08s}
@keyframes sealPing{0%{opacity:.65;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}

.sent__t{font-family:var(--f-sans);font-weight:300;color:var(--white);
  font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.22;max-width:24ch}
.sent__d{color:var(--muted);font-size:var(--t-small);max-width:52ch;line-height:1.6}
.sent__rows{display:grid;gap:.6rem;width:100%;margin:.4rem 0 0;padding:1.1rem 0 0;list-style:none;
  border-top:1px solid var(--line)}
.sent__rows li{display:flex;gap:1.2rem;justify-content:space-between;align-items:baseline}
.sent__rows i{font-style:normal;font-family:var(--f-label);font-weight:500;font-size:var(--t-cap);
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.sent__rows b{font-weight:400;color:var(--white);font-size:var(--t-small);text-align:right;
  overflow-wrap:anywhere}
.sent__note{margin:.5rem 0 0}
@media (max-width:640px){
  .sent__rows li{flex-direction:column;gap:.15rem;align-items:flex-start}
  .sent__rows b{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .btn__st i,.btn.is-sending .btn__bar{animation:none}
  .form.is-gone .field,.form.is-gone .fsum{animation:none;opacity:0}
  .sent::before,.sent>*,.sent__hx,.sent__ck,.sent__ring{animation:none}
  .sent>*{opacity:1;transform:none}
  .sent__hx,.sent__ck{stroke-dashoffset:0}
  .sent__ring{opacity:0}
}

/* ————— Sternschnuppen ————— */
.meteor{position:absolute;width:var(--len,140px);height:1px;pointer-events:none;
  transform-origin:0 50%;transform:rotate(var(--ang,32deg)) translateX(0);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 55%,#fff 100%);
  opacity:0;filter:drop-shadow(0 0 6px rgba(233,220,200,.7));
  animation:meteor var(--dur,1200ms) cubic-bezier(.3,0,.2,1) forwards}
.meteor::after{content:'';position:absolute;right:-1px;top:-1px;width:3px;height:3px;
  border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(233,220,200,.9)}
@keyframes meteor{
  0%{opacity:0;transform:rotate(var(--ang,32deg)) translateX(0) scaleX(.15)}
  12%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:rotate(var(--ang,32deg)) translateX(var(--dist,380px)) scaleX(1)}}

/* Hexagon-Bullets im Hero-Kicker */
.hero__kicker span::before{width:7px;height:6.4px;top:.5em}

/* Hexagon-Badge: Original-Proportion */
.hex-badge::after{inset:1.2px}

/* Reduced Motion */
@media (prefers-reduced-motion:reduce){
  .nav__pill,.nav__ind{transition:opacity .001ms!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal-lines .ln>span{transform:none!important}
  .fade{opacity:1!important;transform:none!important}
  .mask-img{clip-path:none!important}
  .marq__track{animation:none!important}
  .reel__sticky{height:auto}
  .reel__stage{position:static;height:auto;padding-block:var(--sec-s)}
  .reel__frame{--rw:100%!important}
  .proc__step{opacity:1}
  .grain,.hero__scan,.hero__horizon,.hero__stars span{display:none!important}
  .ticker__track,.ftr__hex,.orbit__r1,.orbit__r2{animation:none!important}
  .split .ch{transform:none!important;opacity:1!important}
  .divider::after,.kpi__c::after{transform:scaleX(1)!important}
  .railmark{display:none!important}
  .capmarq,.hexdia__rot,.hexdia__rot2,.hexdia__inner,.hexdia__core,.hexdia__spark,
  #hexHead .hexhead__halo,#hexHead .hexhead__ring,.hexdia .hexnode__pulse,.globe__hint-i,
  .kpi__hex,.kpi__spark::before,.why__wm,.why__hx--d{animation:none!important}
  .kpi__n .dg i{transition:none!important}
  .meteor,.util-dot,.portalbtn::after{animation:none!important}
  .ico3d__obj,.thero__ring,.thero__orbit,.thero__ball,.thero__ball::after,.thero__aura,.thero__hand,
  .scrollcue__rail i,.scrollcue__hex svg.hx,.scrollcue__hex b,.btn::before{animation:none!important}
  .thero__hand{transform:none!important}
  .thero__stars{display:none!important}
  .mega__panel{transition:none!important}
  .vfig video{display:block}
}

/* ————— Kontakt- und Service-Card an der linken Kante (Vorbild: Sumax) —————
   Kompakter Reiter am Rand, die Karte faehrt beim Hover oder Klick heraus. */
.scard{position:fixed;left:0;top:56%;transform:translateY(-50%);z-index:64;
  display:flex;flex-direction:row-reverse;align-items:center;pointer-events:none}
.scard *{pointer-events:auto}
.scard__tab{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.55rem;
  padding:.9rem .36rem;border-radius:0 var(--r) var(--r) 0;
  background:linear-gradient(180deg,#E8552A,#B03D18);color:#fff;cursor:pointer;
  box-shadow:6px 0 22px rgba(0,0,0,.4);
  transition:padding .5s var(--e),background 1s var(--e),box-shadow 1s var(--e),
             color 1s var(--e),height .55s cubic-bezier(.32,1,.34,1)}
.scard__tab:hover,.scard.is-open .scard__tab{padding-inline:.48rem;
  background:linear-gradient(180deg,#F0894B,#C0431C)}
.scard__tabtxt{writing-mode:vertical-rl;
  font-family:var(--f-label);font-weight:500;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;white-space:nowrap}
.scard__hex{width:13px;height:12px;color:#fff;transition:transform .6s var(--e)}
.scard__hex svg{width:100%;height:100%;display:block;overflow:visible}
.scard.is-open .scard__hex{transform:rotate(60deg)}

.scard__panel{width:min(292px,80vw);padding:1.05rem 1.1rem 1.1rem;
  background:linear-gradient(180deg,#0E1218,#0A0C11);
  border:1px solid var(--line-2);border-left:0;border-radius:0 var(--r) var(--r) 0;
  box-shadow:24px 0 56px rgba(0,0,0,.55);
  transform:translateX(calc(-100% - 14px));opacity:0;visibility:hidden;
  transition:transform .62s cubic-bezier(.32,1,.34,1),opacity .4s var(--e),visibility 0s .62s}
.scard.is-open .scard__panel{transform:none;opacity:1;visibility:visible;transition-delay:0s,0s,0s}
.scard__row{display:flex;gap:.72rem;align-items:flex-start}

/* Icons: Kachel in Markenfarbe, Strichgrafik zeichnet sich beim Oeffnen selbst,
   beim Hover fuellt sich die Kachel und ein Licht wandert einmal durch. */
.scard__ico{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:10px;overflow:hidden;color:var(--rust-hi);
  background:rgba(232,85,42,.1);box-shadow:inset 0 0 0 1px rgba(232,85,42,.32);
  transition:background .45s var(--e),box-shadow .45s var(--e),color .35s var(--e),transform .5s var(--e)}
.scard__ico svg{position:relative;z-index:1;width:18px;height:18px;display:block}
.scard__ico svg :not(.dot){stroke-dasharray:110;stroke-dashoffset:110;
  transition:stroke-dashoffset .9s var(--e)}
.scard__ico svg .dot{opacity:0;transition:opacity .3s var(--e) .55s}
.scard.is-open .scard__ico svg :not(.dot){stroke-dashoffset:0}
.scard.is-open .scard__row:nth-of-type(1) .scard__ico svg :not(.dot){transition-delay:.24s}
.scard.is-open .scard__row:nth-of-type(2) .scard__ico svg :not(.dot){transition-delay:.34s}
.scard.is-open .scard__ico svg .dot{opacity:1}
.scard__ico-sw{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-70%)}
.scard__row:hover .scard__ico{background:var(--rust);color:#fff;transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 8px 20px rgba(232,85,42,.3)}
.scard__row:hover .scard__ico-sw{animation:scardSweep .85s var(--e) forwards}
@keyframes scardSweep{0%{opacity:0;transform:translateX(-70%)}
  30%{opacity:1}100%{opacity:0;transform:translateX(70%)}}

.scard__c{min-width:0}
.scard__c b{display:block;font-family:var(--f-label);font-weight:500;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--white)}
.scard__ul{display:block;width:20px;height:1.5px;margin:.32rem 0 .45rem;background:var(--rust);
  transform-origin:left;transform:scaleX(0);transition:transform .6s var(--e) .18s}
.scard.is-open .scard__ul{transform:scaleX(1)}
.scard__tel{display:inline-block;white-space:nowrap;font-family:var(--f-display);
  font-size:.95rem;letter-spacing:0;color:var(--white);transition:color .35s var(--e)}
.scard__tel:hover{color:var(--rust-hi)}
.scard__c p{margin:0 0 .5rem;font-size:12px;color:var(--muted);line-height:1.45}
.scard__c .req{margin:.2rem 0 .5rem;font-size:9px}
.scard__lnk{display:inline-flex;align-items:center;gap:.4rem;font-size:12px;
  color:var(--white);border-bottom:1px solid var(--line-2);padding-bottom:2px;
  transition:color .35s var(--e),border-color .35s var(--e)}
.scard__lnk:hover{color:var(--rust-hi);border-bottom-color:var(--rust)}
.scard__ar{width:10px;height:10px;color:var(--rust-hi);transition:transform .45s var(--e)}
.scard__ar svg{width:100%;height:100%;display:block}
.scard__lnk:hover .scard__ar{transform:translateX(3px)}
.scard__sep{display:block;height:1px;margin:.85rem 0;
  background:linear-gradient(90deg,var(--line-2),transparent)}
.scard__portal{display:flex;align-items:center;gap:.55rem;
  margin-top:.9rem;padding:.6rem .72rem;border-radius:var(--r);
  background:rgba(232,85,42,.12);box-shadow:inset 0 0 0 1px rgba(232,85,42,.35);color:#fff;
  font-family:var(--f-label);font-weight:500;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;transition:background .4s var(--e),transform .5s var(--e)}
.scard__pico{width:15px;height:15px;flex:none;color:var(--rust-hi);
  transition:transform .5s var(--e),color .35s var(--e)}
.scard__pico svg{width:100%;height:100%;display:block}
.scard__pex{width:10px;height:10px;flex:none;margin-left:auto;transition:transform .45s var(--e)}
.scard__portal:hover{background:rgba(232,85,42,.24);transform:translateX(3px)}
.scard__portal:hover .scard__pico{color:#fff;transform:translateY(-1px)}
.scard__portal:hover .scard__pex{transform:translate(2px,-2px)}
/* gestaffeltes Einlaufen der Inhalte */
.scard__panel>*{opacity:0;transform:translateX(-14px);
  transition:opacity .5s var(--e),transform .6s var(--e)}
.scard.is-open .scard__panel>*{opacity:1;transform:none}
.scard.is-open .scard__panel>*:nth-child(1){transition-delay:.1s}
.scard.is-open .scard__panel>*:nth-child(2){transition-delay:.16s}
.scard.is-open .scard__panel>*:nth-child(3){transition-delay:.22s}
.scard.is-open .scard__panel>*:nth-child(4){transition-delay:.28s}
@media (max-width:760px){
  .scard{top:auto;bottom:calc(1rem + env(safe-area-inset-bottom));transform:none}
  .scard__tab{flex-direction:row;padding:.6rem .8rem;border-radius:0 var(--r) var(--r) 0}
  .scard__tabtxt{writing-mode:horizontal-tb;letter-spacing:.18em}
  .scard__panel{position:absolute;left:0;bottom:calc(100% + .6rem);width:min(300px,84vw)}
}
@media (prefers-reduced-motion:reduce){
  .scard__panel,.scard__panel>*,.scard__ul{transition:none}
  .scard__ico svg :not(.dot){stroke-dasharray:none;stroke-dashoffset:0}
  .scard__ico-sw{display:none}
}
/* Farbwechsel mit dem Hintergrund: auf der rostfarbenen Sektion wuerde der
   Reiter verschwinden — dort kehrt er sich um und wird dunkel. Auf hellem
   Papier bleibt er rostfarben, nur die Schatten werden weicher. Die Farben
   blenden in derselben Sekunde wie der Sektionswechsel. */
body[data-tone="rust"] .scard__tab{
  background:linear-gradient(180deg,#12161D,#06080C);
  box-shadow:6px 0 22px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.14)}
body[data-tone="rust"] .scard__tab:hover,
body[data-tone="rust"] .scard.is-open .scard__tab{
  background:linear-gradient(180deg,#1B222C,#0A0D13);
  box-shadow:6px 0 26px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.24)}
body[data-tone="rust"] .scard__hex{color:var(--rust-hi)}
body[data-tone="rust"] .scard__panel{
  border-color:rgba(255,255,255,.18);box-shadow:24px 0 54px rgba(0,0,0,.34)}
body[data-tone="paper"] .scard__tab{box-shadow:6px 0 20px rgba(10,12,17,.16)}
body[data-tone="paper"] .scard__panel{
  border-color:rgba(10,12,17,.12);box-shadow:24px 0 44px rgba(10,12,17,.22)}
.scard__hex{transition:transform .6s var(--e),color 1s var(--e)}
.scard__panel{transition:transform .62s cubic-bezier(.32,1,.34,1),opacity .4s var(--e),
  visibility 0s .62s,border-color 1s var(--e),box-shadow 1s var(--e)}
.scard.is-open .scard__panel{transition-delay:0s,0s,0s,0s,0s}

body.menu-open .scard{opacity:0;pointer-events:none;transition:opacity .3s var(--e)}