/* Layout: Beratungshaus-Architektur nach Vorbild Accenture und TOWA. Schwarz und Weiß als Fläche, Headlines aus fetter Grotesk plus feiner Serife, Zahlen groß in Serife, Rot und Signal-Glut nur als Energie. */
:root{
  --ink:#0F0D14; --ink-2:#1D1822; --ink-3:#28222E;
  --paper:#FFFFFF; --mist:#F2F3F5; --line:#E3E5EA;
  --text:#1D1822; --muted:#5A5E6A;
  --on-dark:#FFFFFF; --on-dark-muted:rgba(255,255,255,.64); --on-dark-line:rgba(255,255,255,.16);
  --red:#C20A23; --violet:#6C45D2; --magenta:#AA2091;
  --sig-text:linear-gradient(90deg,#6C45D2 0%,#AA2091 50%,#C20A23 100%); --sig-surface:linear-gradient(160deg,#6C45D2 0%,#AA2091 50%,#C20A23 100%); --sig-divider:linear-gradient(135deg,#6C45D2 0%,#AA2091 50%,#C20A23 100%); --atmo:radial-gradient(circle at 20% 80%,rgba(194,10,35,.40) 0%,rgba(170,32,145,.20) 45%,rgba(15,13,20,0) 70%);
  --signal:var(--sig-text);
  --draft:#E9A800;
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --display:"Archivo",ui-sans-serif,system-ui,sans-serif; --wd:800; --we:400; --wn:400; --ems:normal; --lsd:-.03em;
  --r:12px; --wrap:1280px;
  --s0:clamp(1rem,.97rem + .15vw,1.0625rem);
  --s1:clamp(1.12rem,1.04rem + .4vw,1.35rem);
  --s2:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
  --s3:clamp(2.1rem,1.4rem + 3vw,4.2rem);
  --s4:clamp(2.7rem,1.3rem + 6vw,7rem);
  --s5:clamp(4rem,2rem + 9vw,10.5rem);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);font-size:var(--s0);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:var(--wd);line-height:1;letter-spacing:-.03em;margin:0;text-wrap:balance}
h1 em,h2 em,h3 em{font-family:var(--serif);font-weight:var(--we);font-style:var(--ems);letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sig{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.dark{background:var(--ink);color:var(--on-dark)}
.dark :focus-visible{outline-color:#fff}

.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;font:600 1rem/1 var(--sans);text-decoration:none;padding:1.05rem 1.25rem;border:0;border-radius:var(--r);cursor:pointer;min-height:54px;transition:background .2s,color .2s,box-shadow .2s}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(5px)}
.btn-main{background:var(--red);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.btn-main::before{content:"";position:absolute;inset:0;background:var(--signal);opacity:0;transition:opacity .2s;z-index:-1}
.btn-main:hover::before{opacity:1}
.btn-line{background:rgba(255,255,255,.04);color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn-line:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--red)}
.tl{font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}


/* Typografie-Varianten (Schalter) */
:root[data-typo="b"]{--display:"Geist",ui-sans-serif,sans-serif;--serif:"Newsreader",Georgia,serif;--sans:"Geist",ui-sans-serif,system-ui,sans-serif;--wd:800;--we:300;--wn:300;--ems:italic}
:root[data-typo="c"]{--display:"Bricolage Grotesque",ui-sans-serif,sans-serif;--serif:"Instrument Serif",Georgia,serif;--sans:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--wd:800;--we:400;--wn:400;--ems:italic}
:root[data-typo="c"] h1,:root[data-typo="c"] h2{letter-spacing:-.035em}

/* Header */
.top{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:50;color:var(--on-dark);padding:10px max(10px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px));pointer-events:none}
.top .wrap{pointer-events:auto;display:flex;align-items:center;gap:36px;height:62px;max-width:calc(var(--wrap) + 24px);border-radius:var(--r);border:1px solid transparent;transition:background .32s,border-color .32s,box-shadow .32s,backdrop-filter .32s}
.top.glass .wrap{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04)) ,rgba(14,13,18,.6);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-color:rgba(255,255,255,.16);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 18px 40px -18px rgba(0,0,0,.55)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 1.12rem/1 var(--sans);letter-spacing:.14em;font-variation-settings:"wdth" 120}
.brand .logo{height:30px;width:auto;overflow:visible;color:#fff}
.brand rect.st0{fill:var(--red);transform-box:fill-box;transform-origin:center;animation:px-in .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes px-in{0%{transform:translateY(-14px) scale(.2);opacity:0}100%{transform:none;opacity:1}}
.brand.wave rect.st0{animation:px-wave .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--o) * 45ms)}
@keyframes px-wave{0%{transform:none}40%{transform:translateY(-5px) scale(.72);fill:#AA2091}100%{transform:none}}
.brand rect.st0.hop{animation:px-hop 1.1s cubic-bezier(.3,1.4,.5,1) both}
@keyframes px-hop{0%{transform:none}35%{transform:translate(var(--hx),var(--hy)) scale(.8);fill:#6C45D2}70%{transform:translate(var(--hx),var(--hy))}100%{transform:none}}
.nav{display:flex;gap:28px}
.nav a{text-decoration:none;font-weight:500;color:rgba(255,255,255,.8);font-size:.95rem;transition:color .2s}
.nav a:hover{color:#fff}
.top .btn{margin-left:auto;padding:.7rem 1rem;min-height:42px;font-size:.93rem;gap:14px}
@media (max-width:980px){.nav{display:none}}
.top .short{display:none}.top .btn{white-space:nowrap}
@media (max-width:480px){.top .long{display:none}.top .short{display:inline}.top .wrap{gap:12px}}

/* Hero */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;left:-20%;bottom:-55%;width:90%;height:110%;background:radial-gradient(ellipse at 30% 60%,rgba(108,69,210,.55),rgba(170,32,145,.28) 38%,rgba(194,10,35,.1) 58%,transparent 72%);z-index:-1;pointer-events:none;filter:blur(10px)}
#stage{position:absolute;inset:0;width:100%;height:100%;z-index:-2;cursor:crosshair}
.hero>.wrap{padding-block:clamp(120px,12vw,170px) clamp(56px,6vw,90px);position:relative;pointer-events:none}
.hero>.wrap a,.hero>.wrap button{pointer-events:auto}
.hero h1{font-size:min(calc(var(--s4) * .8),6.4vw);line-height:.95;letter-spacing:-.04em;max-width:17ch}
.hero h1 em{display:block;letter-spacing:-.015em;line-height:.98}
.hero .lead{margin-top:28px;font-size:var(--s1);color:var(--on-dark-muted);max-width:52ch;line-height:1.5}
.hero .lead b{color:#fff;font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.hint{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:18px;top:auto;font-size:.8rem;color:var(--on-dark-muted);display:flex;align-items:center;gap:8px;pointer-events:none}
.hint i{width:8px;height:8px;background:var(--red);display:block;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.2}}
@media (max-width:820px){.hint{display:none}.hero-cta .btn{flex:1 1 100%}}

.creds{margin-top:clamp(64px,9vw,120px);padding-block:22px 28px;border-top:1px solid var(--on-dark-line);display:flex;flex-wrap:wrap;gap:10px 34px;font-size:.9rem;color:var(--on-dark-muted)}
.creds b{color:#fff;font-weight:600}
.creds span{display:flex;align-items:center;gap:10px}
.creds i{width:7px;height:7px;background:var(--red);display:block}
.switch{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:58;background:rgba(15,13,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;border:1px solid var(--on-dark-line);border-radius:var(--r);padding:10px 12px;display:grid;gap:8px;font:500 .8rem/1.2 var(--sans);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.switch .handle{all:unset;cursor:pointer;font-weight:700;display:none}
.switch .sw-close{all:unset;cursor:pointer;justify-self:end;font-size:12px;color:var(--on-dark-muted);padding:2px 0 4px}.switch .sw-close:hover,.switch .sw-close:focus-visible{color:#fff}.switch.collapsed .sw-close{display:none}
.switch.collapsed .row,.switch.collapsed .name{display:none}
.switch.collapsed .handle{display:block}
.switch .row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.switch .lab{width:64px;color:var(--on-dark-muted)}
.switch button{all:unset;cursor:pointer;padding:6px 9px;border-radius:var(--r);background:rgba(255,255,255,.08);font-weight:600;font-size:.8rem}
.switch button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.switch button:focus-visible{outline:2px solid var(--magenta)}
.switch .name{color:var(--on-dark-muted);font-size:.75rem;padding-left:70px}
@media (max-width:767px){.switch{right:auto;left:max(12px,env(safe-area-inset-left,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:8px 10px}.switch .lab{width:auto}.switch .name{display:none}}

.logoglass{list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:clamp(18px,2.2vw,26px) clamp(18px,3vw,40px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,3vw,44px);align-items:center;pointer-events:auto;
 background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.8));backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
 border:1px solid rgba(255,255,255,.55);border-radius:var(--r);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 30px 60px -30px rgba(0,0,0,.6)}
.logoglass li{display:flex;justify-content:center;align-items:center;min-width:0}
.logoglass img{max-height:70px;width:auto;max-width:100%;object-fit:contain;transition:transform .2s}
.logoglass li:hover img{transform:scale(1.05)}
@media (max-width:900px){.logoglass{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}.logoglass img{max-height:52px}}
@media (max-width:820px){.logos ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}.logos img{max-height:54px}}
.award .wrap{position:relative}
.aw-badge{width:clamp(150px,18vw,240px);height:auto;display:block;margin-bottom:28px;background:#fff;padding:14px 16px;border-radius:var(--r)}


/* v12: Topbar, Phones, Stack, Certs, Werte */
.topbar{position:relative;z-index:3;background:#fff;border-bottom:1px solid var(--line)}
.toplogos{list-style:none;margin:0;padding:clamp(16px,2vw,24px) 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(16px,3vw,44px);align-items:center}
.toplogos li{display:flex;justify-content:center;align-items:center;min-width:0}
.toplogos img{max-height:58px;width:auto;max-width:100%;object-fit:contain;transition:transform .2s}
.toplogos li:hover img{transform:scale(1.05)}
@media (max-width:600px){.trustbox ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.toplogos{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px}.toplogos img{max-height:40px}}
.hero>.wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero-main{min-width:0;position:relative;z-index:3}
.devices{position:relative;height:clamp(360px,32vw,480px);pointer-events:none;z-index:1}
.desk{position:absolute;right:0;top:2%;width:min(100%,540px);animation:float 9s ease-in-out infinite;animation-delay:-4s}
.desk-screen{background:#0c0c10;border-radius:14px;padding:10px;box-shadow:0 0 0 1.5px rgba(255,255,255,.16) inset,0 40px 90px -30px rgba(0,0,0,.85),0 0 70px -20px rgba(108,69,210,.45)}
.desk-stand{width:16%;height:38px;margin:0 auto;background:linear-gradient(180deg,#2a2833,#15141a)}
.desk-foot{width:38%;height:8px;margin:0 auto;border-radius:4px 4px 2px 2px;background:#2a2833}
.b2b{background:#fff;border-radius:6px;overflow:hidden;font:500 clamp(.5rem,.42rem + .25vw,.66rem)/1.3 var(--sans);color:#1b1a20}
.b2b-top{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f4f3f7;border-bottom:1px solid #e4e2ea}
.b2b-logo{width:12px;height:12px;background:var(--signal)}
.b2b-acc{margin-left:auto;color:#6b6876}
.b2b-head{display:flex;justify-content:space-between;align-items:center;padding:10px 10px 6px}
.b2b-head b{font-size:1.25em}
.erp{display:flex;align-items:center;gap:5px;color:#0e7a4c;font-weight:600}
.erp i{width:6px;height:6px;border-radius:50%;background:#16a36a;box-shadow:0 0 0 3px rgba(22,163,106,.18);animation:blink 1.6s infinite}
.b2b-search{margin:0 10px 8px;display:flex;justify-content:space-between;border:1px solid #e4e2ea;border-radius:5px;padding:6px 8px;color:#8a8794}
.b2b-csv{color:var(--red);font-weight:600}
.b2b table{width:calc(100% - 20px);margin:0 10px;border-collapse:collapse}
.b2b th{text-align:left;font-weight:600;color:#6b6876;padding:5px 4px;border-bottom:1px solid #e4e2ea}
.b2b td{padding:6px 4px;border-bottom:1px solid #f0eef4;vertical-align:top}
.b2b td small{display:block;color:#16a36a;font-size:.85em}
.b2b td small.low{color:#c2410c}
.b2b td:nth-child(3){white-space:nowrap;font-weight:600}
.b2b .qty{display:inline-block;min-width:34px;text-align:center;border:1px solid #e4e2ea;border-radius:4px;padding:2px 4px}
.b2b-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px}
.b2b-foot span{color:#6b6876}
.b2b-foot b{background:var(--red);color:#fff;padding:7px 10px;border-radius:5px;white-space:nowrap}
.devices .phone.p2{right:auto;left:0;top:44%;transform:rotateZ(-4deg);width:clamp(120px,10.5vw,160px);z-index:2;border-radius:28px;padding:7px}
.devices .phone.p2 img{border-radius:22px}
.devices .phone.p2 .shopbar{left:12px;right:12px;bottom:14px;padding:8px 9px}
.devices .phone.p2 .shopbar i{white-space:nowrap;font-size:.6rem;padding:7px 6px}
@media (max-width:1000px){.hero>.wrap{grid-template-columns:1fr}.devices{display:none}}
@media (max-width:1000px){.hero h1{font-size:clamp(2.7rem,12vw,4.6rem)}}
.trustbox .hintsw{display:none;font-size:.8rem;color:var(--on-dark-muted);margin:-6px 0 12px}
@media (max-width:600px){.trustbox .hintsw{display:block}}
@media (max-width:1000px){.b2b{font-size:.62rem}}
.phones{position:relative;height:clamp(380px,34vw,520px);perspective:1400px;pointer-events:none}
.phone{position:absolute;width:clamp(170px,15vw,230px);aspect-ratio:9/19;border-radius:34px;background:#0c0c10;padding:9px;box-shadow:0 0 0 1.5px rgba(255,255,255,.18) inset,0 40px 80px -30px rgba(0,0,0,.8),0 0 60px -20px rgba(170,32,145,.5);animation:float 7s ease-in-out infinite}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:26px;display:block}
.phone::before{content:"";position:absolute;top:16px;left:50%;width:30%;height:18px;transform:translateX(-50%);background:#0c0c10;border-radius:12px;z-index:2}
.phone .shopbar{position:absolute;left:18px;right:18px;bottom:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.phone .shopbar b{font:600 .72rem/1.2 var(--sans);color:var(--ink)}
.phone .shopbar i{font:600 .68rem/1 var(--sans);font-style:normal;color:#fff;background:var(--red);padding:8px 10px;border-radius:8px;text-align:center}
.phone.p1{right:38%;top:8%;transform:rotateY(18deg) rotateZ(-9deg);animation-delay:-3s;opacity:.92}
.phone.p2{right:4%;top:0;transform:rotateY(-14deg) rotateZ(6deg)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@media (max-width:1000px){.phones{display:none}}
.stack{display:grid;gap:22px}
.scard{position:sticky;top:calc(96px + var(--i) * 22px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:clamp(380px,56vh,540px);border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;background:var(--ink);box-shadow:0 -20px 50px -30px rgba(15,13,20,.6)}
.scard-img{position:relative;overflow:hidden;background:#222}
.scard-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.scard-img canvas{position:absolute;inset:0;width:100%;height:100%}
.scard:hover .scard-img img{transform:scale(1.05)}
.scard-body{padding:clamp(24px,3.5vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;isolation:isolate}
.scard-body::after{content:"";position:absolute;right:-20%;bottom:-40%;width:80%;height:80%;background:radial-gradient(ellipse,rgba(194,10,35,.35),transparent 65%);z-index:-1}
.scard .client{font-size:.9rem;font-weight:600;color:rgba(255,255,255,.75)}
.scard h3{font-size:var(--s2);letter-spacing:-.025em;margin-top:10px}
.scard .kpi{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.scard .kpi b{font:var(--wn) clamp(3rem,1.6rem + 4vw,5.6rem)/.85 var(--serif);letter-spacing:-.03em;white-space:nowrap}
.scard .kpi span{font-size:.95rem;color:rgba(255,255,255,.75);max-width:24ch}
.scard .tl{align-self:flex-start;color:#fff}
@media (max-width:820px){.scard{grid-template-columns:1fr;top:calc(84px + var(--i) * 14px)}.scard-img{min-height:220px}}
.aw2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.certs{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:clamp(420px,52vw,600px);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.certcol ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;animation:upscroll 38s linear infinite}
.certcol.rev ul{animation-duration:46s;animation-direction:reverse}
.certs:hover ul{animation-play-state:paused}
.certcol li{background:#fff;border-radius:var(--r);height:120px;display:grid;place-items:center;padding:14px}
.certcol img{max-height:88px;max-width:100%;width:auto;object-fit:contain}
@keyframes upscroll{to{transform:translateY(calc(-50% - 7px))}}
@media (max-width:900px){.aw2{grid-template-columns:1fr}.certs{height:380px}}
.aboutrow{margin-inline:calc(50% - 50vw);border-radius:0!important;padding-inline:max(20px,calc(50vw - 620px))!important;padding-block:clamp(64px,8vw,120px)!important;margin-bottom:calc(-1 * clamp(84px,11vw,150px));display:grid;grid-template-columns:minmax(240px,380px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(64px,8vw,110px);padding:clamp(28px,4vw,56px);border-top:0;background:var(--ink);color:#fff;border-radius:16px;position:relative;overflow:hidden;isolation:isolate}
.aboutrow::after{content:"";position:absolute;left:-15%;bottom:-50%;width:70%;height:100%;background:radial-gradient(ellipse,rgba(108,69,210,.4),rgba(194,10,35,.18) 45%,transparent 70%);z-index:-1}
.aboutrow .reel-frame{max-width:360px;border-radius:var(--r);box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12)}
.aboutrow .reel small{color:rgba(255,255,255,.6)}
.about-txt h3{font-size:var(--s3);letter-spacing:-.03em}
.vlist{list-style:none;margin:28px 0 34px;padding:0;counter-reset:v}
.vlist li{counter-increment:v;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);cursor:default;outline:none}
.vlist li::before{content:counter(v,decimal-leading-zero);font:500 .85rem var(--sans);color:rgba(255,255,255,.45)}
.vlist b{font:var(--wn) clamp(1.7rem,1.1rem + 1.8vw,2.8rem)/1.05 var(--serif);letter-spacing:-.015em;transition:color .2s}
.vlist span{grid-column:2;color:rgba(255,255,255,.72);max-height:0;opacity:0;overflow:hidden;transition:max-height .32s ease,opacity .32s,margin .32s}
.vlist li:hover b,.vlist li:focus b{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent}
.vlist li:hover span,.vlist li:focus span{max-height:3em;opacity:1;margin-top:6px}
@media (hover:none){.vlist span{max-height:none;opacity:1;margin-top:6px}}
@media (max-width:900px){.aboutrow{grid-template-columns:1fr}.aboutrow .reel{order:2}}
.exp a h3,.exp a::before{transition:transform .32s cubic-bezier(.2,.7,.2,1),color .2s}
.exp a:hover h3,.exp a:focus-visible h3{transform:translateX(10px)}


.clogo{position:absolute;left:18px;top:18px;z-index:2;background:#fff;border-radius:var(--r);padding:12px 18px;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;height:70px;width:clamp(150px,16vw,210px)}
.scard-img .clogo img{position:static;inset:auto;max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block;transform:none!important}
.v-mel,.trustbox{display:none}
:root[data-hero="mel"] .v-std{display:none}
:root[data-hero="mel"] .v-mel{display:inline}
:root[data-hero="mel"] .hero-cta .btn-line{display:none}
:root[data-hero="mel"] .hero>.wrap{min-height:calc(100vh - 0px);padding-block:clamp(130px,14vw,190px) clamp(64px,8vw,110px)}

:root[data-hero="mel"] .trustbox{display:block;margin-top:36px;max-width:560px}
.trust-lab{display:block;font-size:.85rem;color:var(--on-dark-muted);margin-bottom:10px}
.trustbox ul{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.trustbox li{background:#fff;height:84px;display:grid;place-items:center;padding:10px}
.trustbox img{max-height:40px;max-width:100%;width:auto;object-fit:contain}
.trustbox .tl{color:#fff;font-size:.95rem}

/* Akzent-Variante: Verlauf */
@property --gp{syntax:'<percentage>';inherits:false;initial-value:0%}
/* Buttons nach Styleguide Melanie: Inhalts-CTA Rot, Hover zeigt das volle Signal. Header-CTA traegt das Signal dauerhaft, Hover Rot. */
:root[data-accent^="g"] .btn-main{background:var(--red);background-image:none;transition:background .32s,box-shadow .32s,transform .2s}
:root[data-accent^="g"] .btn-main::before{display:none}
:root[data-accent^="g"] .btn-main:hover{background:var(--sig-text);box-shadow:0 12px 30px -10px rgba(170,32,145,.55);transform:translateY(-1px)}
:root[data-accent^="g"] .top .btn-main{background:var(--sig-text);animation:none}
:root[data-accent^="g"] .top .btn-main:hover{background:var(--red)}
@keyframes gshift{0%,100%{background-position:70% 0}50%{background-position:10% 0}}
:root[data-accent^="g"] .tl{border-bottom:0;padding-bottom:3px;background-image:linear-gradient(currentColor,currentColor),var(--signal);background-size:100% 1.5px,0% 2px;background-position:0 100%,0 100%;background-repeat:no-repeat;transition:background-size .32s cubic-bezier(.3,.7,.2,1)}
:root[data-accent^="g"] .tl:hover,:root[data-accent^="g"] a:hover .tl,:root[data-accent^="g"] .tl:focus-visible{background-size:0% 1.5px,100% 2px}
:root[data-accent^="g"] .nav a{background-image:var(--signal);background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:4px;transition:background-size .32s cubic-bezier(.3,.7,.2,1),color .2s}
:root[data-accent^="g"] .nav a:hover{background-size:100% 2px}
:root[data-accent="gt"] h2 em,:root[data-accent="gt"] h1 em{background:var(--signal);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
:root[data-accent="gm"] h2 em,:root[data-accent="gm"] h1 em{background:linear-gradient(90deg,rgba(108,69,210,.32) 0%,rgba(170,32,145,.28) 50%,rgba(194,10,35,.3) 100%);background-size:100% .38em;background-position:0 86%;background-repeat:no-repeat;padding:0;margin:0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:root[data-accent="gm"] .hero h1 em{background:none}
:root[data-accent="gm"] .hero h1 .mk{background:linear-gradient(90deg,rgba(108,69,210,.6) 0%,rgba(170,32,145,.55) 50%,rgba(194,10,35,.6) 100%);background-size:100% .3em;background-position:0 88%;background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:root[data-accent="gm"] .dark h2 em,:root[data-accent="gm"] .hero h1 em.x{background:linear-gradient(90deg,rgba(108,69,210,.55) 0%,rgba(170,32,145,.5) 50%,rgba(194,10,35,.55) 100%);background-size:100% .38em;background-position:0 86%;background-repeat:no-repeat}

/* Ausgangslagen-Varianten */
.chat,.hacc{display:none}
:root[data-navi="b"] .navi,:root[data-navi="c"] .navi{display:none}
:root[data-navi="b"] .chat{display:block}
:root[data-navi="c"] .hacc{display:flex}
.chat-win{max-width:860px;margin:0 auto;background:#fff;border-radius:var(--r);box-shadow:0 30px 70px -40px rgba(15,13,20,.45);overflow:hidden;border:1px solid var(--line)}
.chat-top{display:flex;gap:12px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.chat-av{width:40px;height:40px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center;font-weight:800}
.chat-top small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem}
.chat-top small i{width:7px;height:7px;border-radius:50%;background:#16a36a}
.chat-log{padding:22px 20px;display:flex;flex-direction:column;gap:12px;min-height:340px;max-height:520px;overflow-y:auto;background:linear-gradient(180deg,#fafafb,#fff)}
.msg{max-width:78%;padding:12px 16px;border-radius:var(--r);line-height:1.5;animation:pop .35s cubic-bezier(.2,.8,.2,1) both}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.msg.ms{align-self:flex-start;background:var(--mist);border-bottom-left-radius:4px}
.msg.ms b{display:block;margin-bottom:4px}
.msg ol{margin:6px 0 0;padding-left:18px;display:grid;gap:6px}
.msg .btn{margin-top:10px;min-height:44px;padding:.75rem 1rem}
.typing{align-self:flex-start;background:var(--mist);border-radius:var(--r);padding:14px 16px;display:flex;gap:5px}
.typing i{width:7px;height:7px;border-radius:50%;background:#9a96a5;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.chat-pick{padding:14px 20px 18px;border-top:1px solid var(--line)}
.chat-pick>span{display:block;font-size:.85rem;color:var(--muted);margin-bottom:10px}
#chatOpts{display:flex;flex-wrap:wrap;gap:8px}
#chatOpts button{all:unset;cursor:pointer;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line);font-weight:500;font-size:.92rem;transition:background .2s,color .2s,border-color .2s}
#chatOpts button:hover{border-color:var(--ink)}
#chatOpts button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
#chatOpts button:focus-visible{outline:3px solid var(--violet)}
.hacc{gap:12px;height:clamp(460px,52vw,560px)}
.hp{all:unset;box-sizing:border-box;cursor:pointer;position:relative;flex:1 1 0;min-width:0;border-radius:var(--r);overflow:hidden;background:var(--ink);color:#fff;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:flex-grow .32s cubic-bezier(.3,.7,.2,1);isolation:isolate}
.hp::after{content:"";position:absolute;inset:auto -30% -50% -30%;height:90%;background:radial-gradient(ellipse at 50% 100%,rgba(194,10,35,.45),rgba(108,69,210,.18) 45%,transparent 70%);z-index:-1;opacity:.5;transition:opacity .32s}
.hp[aria-selected="true"]{flex-grow:4.2;cursor:default}
.hp[aria-selected="true"]::after{opacity:1}
.hp:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.hp .num{font:var(--wn) clamp(2.4rem,1.6rem + 2vw,3.6rem)/1 var(--serif);color:rgba(255,255,255,.4)}
.hp .q{font:700 1.05rem/1.3 var(--sans);writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;max-height:100%;overflow:hidden}
.hp[aria-selected="true"] .q{writing-mode:horizontal-tb;transform:none;white-space:normal;font:var(--wn) clamp(1.6rem,1.1rem + 1.4vw,2.4rem)/1.15 var(--serif);max-width:24ch}
.hp .det{display:none}
.hp[aria-selected="true"] .det{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;animation:pop .5s .15s both}
.hp .det div{border-top:1px solid rgba(255,255,255,.2);padding-top:12px}
.hp .det b{display:block;margin-bottom:4px}
.hp .det span{color:rgba(255,255,255,.7);font-size:.92rem}
.hp .foot{display:none;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hp[aria-selected="true"] .foot{display:flex}
.hp .foot small{color:rgba(255,255,255,.65)}
@media (max-width:860px){.hacc{flex-direction:column;height:auto}.hp{flex:none}.hp .q{writing-mode:horizontal-tb;transform:none;white-space:normal}.hp[aria-selected="true"] .det{grid-template-columns:1fr}.hp .num{font-size:1.6rem}}

:root[data-hero="mel"] .logos{display:none}
:root[data-hero="mel"] .trustbox{pointer-events:auto}
@media (max-width:600px){:root .trustbox ul{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:1px;touch-action:pan-x pan-y}:root .trustbox ul::-webkit-scrollbar{display:none}:root .trustbox li{flex:0 0 46%;scroll-snap-align:start}}
.trustbox .hintsw{display:none;font-size:.8rem;color:var(--on-dark-muted);margin:-6px 0 12px}
@media (max-width:600px){.trustbox .hintsw{display:block}}
/* V3: Höhe/Stil Melanie, Projekt-Button, Zertifikatsleiste angedockt */
.v-v3{display:none}
:root[data-hero="v3"] .v-std{display:none}
:root[data-hero="v3"] .v-v3{display:inline}
@media (min-width:821px){:root[data-hero="v3"] .hero>.wrap{min-height:100vh;}}
:root[data-hero="v3"] .hero>.wrap{padding-block:clamp(130px,14vw,190px) clamp(64px,8vw,110px)}
.mq{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mq::-webkit-scrollbar{display:none}
@media (max-width:820px){:root[data-hero="v3"] .toplogos.mq{display:flex;grid-template-columns:none;gap:40px;padding-inline:0}:root[data-hero="v3"] .toplogos.mq li{flex:0 0 auto}:root[data-hero="v3"] .toplogos.mq img{max-height:44px}}
/* Intro + Zahlen */
.world{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.world-lead{margin-top:24px;font-size:var(--s1);line-height:1.5;color:var(--muted);max-width:44ch}
.world .nums{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,5vw,64px);gap:32px 24px}
.globe-wrap{margin:0;position:relative;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:end}
.globe-wrap canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.globe-wrap canvas:active{cursor:grabbing}
.glabels{position:absolute;inset:0;pointer-events:none}
.glabel{position:absolute;transform:translate(-50%,-130%) scale(.9);opacity:0;transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1);white-space:nowrap;font:600 .8rem/1 var(--sans);color:#fff;background:rgba(15,13,20,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 11px 8px 10px;border-radius:var(--r);display:flex;align-items:center;gap:7px;box-shadow:0 10px 24px -10px rgba(15,13,20,.6)}
.glabel i{width:7px;height:7px;background:var(--signal);display:block}
.glabel::after{content:"";position:absolute;left:50%;bottom:-5px;width:1px;height:5px;background:rgba(15,13,20,.6)}
.glabel.on{opacity:1;transform:translate(-50%,-140%) scale(1)}
.nolabels .glabels{display:none}
.globe-wrap figcaption{position:absolute;left:0;bottom:4%;display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:14px 18px;border-radius:var(--r);border:1px solid var(--line)}
.globe-wrap figcaption b{font:var(--wn) clamp(2.6rem,1.6rem + 3vw,4.4rem)/.9 var(--serif);letter-spacing:-.03em;color:var(--red)}
.globe-wrap figcaption span{font-size:.9rem;color:var(--muted);max-width:20ch}
@media (max-width:900px){.world{grid-template-columns:1fr}.globe-wrap{justify-self:center;max-width:520px}}
.intro{padding-block:clamp(72px,9vw,120px) clamp(48px,6vw,80px)}
.intro h2{font-size:var(--s3);max-width:18ch}
.intro-txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 64px;margin-top:clamp(28px,4vw,48px)}
.intro-txt p{font-size:var(--s1);line-height:1.5;color:var(--muted)}
.intro-txt p b{color:var(--text);font-weight:700}
.nums{list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.nums li{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.nums b{font:var(--wn) clamp(3rem,1.4rem + 5vw,6.6rem)/.85 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.nums b small{font-size:.38em;letter-spacing:0;margin-left:.1em}
.nums li>span{color:var(--muted);font-size:.95rem;line-height:1.4;max-width:26ch}
@media (max-width:900px){.intro-txt{grid-template-columns:1fr}.nums{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}}

/* Statement */
.statement{position:relative;overflow:hidden;isolation:isolate}
.statement::after{content:"";position:absolute;right:-20%;top:-40%;width:80%;height:120%;background:radial-gradient(ellipse at 60% 40%,rgba(194,10,35,.35),rgba(170,32,145,.14) 40%,transparent 70%);z-index:-1;pointer-events:none}
.statement .wrap{padding-block:clamp(90px,12vw,170px)}
.statement p.pre{font-size:var(--s1);color:var(--on-dark-muted);max-width:40ch}
.statement .big{font:var(--wn) clamp(5rem,2rem + 15vw,17rem)/.8 var(--serif);letter-spacing:-.04em;display:block;margin:.2em 0 .15em;white-space:nowrap}
.statement h2{font-size:var(--s3);max-width:20ch}
.statement .post{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;margin-top:40px}
.statement .post p{color:var(--on-dark-muted);font-size:var(--s1);line-height:1.5}
@media (max-width:900px){.statement .post{grid-template-columns:1fr}}

/* Section head */
.sec{padding-block:clamp(84px,11vw,150px)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:clamp(40px,6vw,72px)}
.head h2{font-size:var(--s3);max-width:20ch}
.head p{color:var(--muted);font-size:var(--s1);line-height:1.45;max-width:46ch;margin-top:18px}
.dark .head p{color:var(--on-dark-muted)}

/* Expertise */
.exp{list-style:none;margin:0;padding:0;counter-reset:e}
.exp li{border-bottom:1px solid var(--on-dark-line);counter-increment:e}
.exp a{display:grid;grid-template-columns:clamp(56px,8vw,120px) minmax(0,1fr) minmax(0,1fr) 40px;gap:8px 32px;align-items:baseline;padding:clamp(24px,3vw,38px) 0;text-decoration:none;transition:padding .2s}
.exp a::before{content:counter(e,decimal-leading-zero);font:var(--wn) clamp(1.8rem,1.2rem + 1.6vw,2.8rem)/1 var(--serif);color:var(--on-dark-muted);transition:color .2s}
.exp h3{font-size:var(--s2);letter-spacing:-.025em}
.exp p{color:var(--on-dark-muted);max-width:50ch}
.exp .go{font-size:1.4rem;justify-self:end;align-self:center;color:var(--on-dark-muted);transition:transform .2s,color .2s}

.exp a:hover::before,.exp a:focus-visible::before{color:var(--red)}
.exp a:hover .go{transform:translateX(-6px);color:#fff}
@media (max-width:820px){.exp a{grid-template-columns:44px minmax(0,1fr) 28px;align-items:center}.exp a::before{grid-row:1;align-self:baseline}.exp h3{grid-column:2;grid-row:1}.exp .go{grid-column:3;grid-row:1}.exp p{grid-column:2/-1;grid-row:2}}
.partners{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.partners span{padding:10px 14px;border:1px solid var(--on-dark-line);border-radius:var(--r);font-size:.9rem;font-weight:500;color:rgba(255,255,255,.85)}

/* Navigator */
.navi{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:start}
.navi-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.navi-btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 4px;border-bottom:1px solid var(--line);font:600 var(--s1)/1.3 var(--sans);letter-spacing:-.01em;color:var(--muted);transition:color .2s,padding .2s}
.navi-btn:hover{color:var(--text)}
.navi-btn .q{flex:1;min-width:0}
.navi-btn .ar{opacity:0;color:var(--red);transition:opacity .2s}
.navi-btn[aria-selected="true"]{color:var(--text);padding-left:14px;box-shadow:inset 3px 0 0 var(--red)}
.navi-btn[aria-selected="true"] .ar{opacity:1}
.navi-btn:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.navi-panel{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(26px,4vw,48px);position:sticky;top:90px;overflow:hidden;isolation:isolate}
.navi-panel::after{content:"";position:absolute;right:-30%;bottom:-50%;width:90%;height:90%;background:radial-gradient(ellipse,rgba(194,10,35,.35),transparent 65%);z-index:-1}
.navi-panel h3{font-size:var(--s2);letter-spacing:-.025em}
.navi-panel .lead{color:var(--on-dark-muted);margin-top:14px;max-width:52ch}
.steps{list-style:none;margin:28px 0 0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 14px;padding:16px 0;border-top:1px solid var(--on-dark-line);counter-increment:s}
.steps li::before{content:counter(s);grid-row:span 2;font:var(--wn) 2rem/1 var(--serif);color:#fff}
.steps b{font-weight:600}
.steps span{color:var(--on-dark-muted);font-size:.95rem}
.navi-ref{margin-top:18px;font-size:.92rem;color:var(--on-dark-muted)}
.navi-cta{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:26px}
@media (max-width:900px){.navi{grid-template-columns:minmax(0,1fr)}.navi-panel{position:relative;top:auto}}
.navi-panel h3,.navi-btn .q{overflow-wrap:break-word;hyphens:auto}

/* Cases */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.case{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.3;text-decoration:none;color:#fff;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,36px);background:var(--ink)}
.case canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.case::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,13,20,.82) 0%,rgba(15,13,20,.25) 45%,rgba(15,13,20,.85) 100%);z-index:-1}
.case:hover canvas{transform:scale(1.05)}
.case .client{font-size:.9rem;font-weight:600}
.case h3{font-size:var(--s2);letter-spacing:-.025em;margin-top:10px;max-width:16ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tags span{font-size:.8rem;padding:6px 11px;border:1px solid rgba(255,255,255,.45);border-radius:var(--r)}
.case .kpi{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.case .kpi b{font:var(--wn) clamp(3rem,1.6rem + 4vw,5.6rem)/.85 var(--serif);letter-spacing:-.03em;white-space:nowrap}
.case .kpi span{font-size:.92rem;color:rgba(255,255,255,.78);max-width:20ch;text-align:right}
.quote{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:32px;align-items:end;border-top:1px solid var(--line);padding-top:clamp(32px,4vw,48px)}
.quote blockquote{margin:0;font:var(--wn) var(--s3)/1.05 var(--serif);letter-spacing:-.015em}
.quote cite{font-style:normal;color:var(--muted)}
.clients{margin-top:28px;color:var(--muted);max-width:80ch}
.clients b{color:var(--text);font-weight:600}
@media (max-width:820px){.cases{grid-template-columns:1fr}.case{aspect-ratio:auto;min-height:420px}.quote{grid-template-columns:1fr}}

/* Award */
.award{position:relative;overflow:hidden;isolation:isolate}
.award::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 120%,rgba(194,10,35,.55),rgba(108,69,210,.25) 40%,transparent 70%);z-index:-1}
.award .wrap{padding-block:clamp(84px,11vw,150px)}
.award h2{font-size:var(--s4);letter-spacing:-.04em;line-height:.95;max-width:12ch}
.award .lead{margin-top:26px;font-size:var(--s1);color:var(--on-dark-muted);max-width:48ch}
.awardgrid{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.awardgrid li{border-top:1px solid var(--on-dark-line);padding-top:18px;display:flex;flex-direction:column;gap:6px}
.awardgrid .yr{font:var(--wn) 3.2rem/1 var(--serif)}
.awardgrid b{font-weight:600}
.awardgrid span{font-size:.92rem;color:var(--on-dark-muted)}
.award .more{margin-top:36px}
@media (max-width:900px){.awardgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}

/* Team */
.team{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,3.5vw,48px);align-items:stretch}
.people{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,22vw,290px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0;padding-bottom:6px;scrollbar-width:none}
.people::-webkit-scrollbar{display:none}
.people .person{scroll-snap-align:start}
.slider-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;flex-wrap:wrap}
.slider-nav{display:flex;gap:8px}
.slider-nav button{all:unset;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);font-size:1.2rem;transition:background .2s,color .2s}
.slider-nav button:hover{background:var(--ink);color:#fff}
.slider-nav button:focus-visible{outline:3px solid var(--violet)}
.person{display:flex;flex-direction:column;gap:10px;min-width:0}
.portrait{aspect-ratio:4/5;border-radius:var(--r);position:relative;overflow:hidden;background:var(--ink-2)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transition:filter .32s,transform .32s cubic-bezier(.2,.7,.2,1)}
.person:hover .portrait img{filter:none;transform:scale(1.03)}
.portrait::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .32s}
.person:hover .portrait::after{transform:scaleX(1)}
.teamphoto{margin:0 0 clamp(36px,5vw,64px);position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:21/9;background:var(--ink)}
.teamphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;display:block}
.teamphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(15,13,20,.75));pointer-events:none}
.teamphoto figcaption{position:absolute;left:clamp(18px,3vw,36px);bottom:clamp(16px,3vw,32px);z-index:1;color:#fff;display:flex;flex-direction:column}
.teamphoto figcaption b{font:var(--wn) clamp(2rem,1.2rem + 3vw,4rem)/1 var(--serif);letter-spacing:-.02em}
.teamphoto figcaption span{color:rgba(255,255,255,.8)}
@media (max-width:640px){.teamphoto{aspect-ratio:4/3}}
.portrait .ini{position:absolute;left:14px;bottom:8px;font:var(--wn) clamp(2.8rem,5vw,4.2rem)/1 var(--serif);color:#fff}
.person b{font-weight:700;line-height:1.25}
.person span{color:var(--muted);font-size:.9rem;line-height:1.35}
.aw-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(32px,5vw,80px);align-items:center}
.award .reel small{color:var(--on-dark-muted)}
@media (max-width:900px){.aw-grid{grid-template-columns:1fr}}
.story{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;border-radius:var(--r);min-height:100%;display:flex}
.story-chart{position:absolute;left:0;right:0;bottom:0;width:100%;height:48%;z-index:-1}
@media (max-width:980px){.story{min-height:640px}}
.story-chart .grid line{stroke:rgba(255,255,255,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.story-chart .ln{fill:none;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset .32s cubic-bezier(.3,.6,.2,1)}
.story-chart .l2{stroke:rgba(170,32,145,.75);transition-delay:.3s}
.story-chart .l3{stroke:rgba(108,69,210,.75);transition-delay:.6s}
.story.on .ln{stroke-dashoffset:0}
.story-chart .area{opacity:0;transition:opacity .32s .8s}
.story.on .area{opacity:1}
.story-in{padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:22px;width:100%}
.story h3{font-size:var(--s2);letter-spacing:-.025em}
.tline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tline li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.14)}
.tline b{font:var(--wn) 1.5rem/1.1 var(--serif);color:#fff}
.tline span{color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.45}
.tline li:last-child b{color:#ff4d63}
.story-legend{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.8rem;color:rgba(255,255,255,.7)}
.story-legend li{display:flex;align-items:center;gap:7px}
.story-legend i{width:14px;height:3px;display:block}
.story-legend .k1{background:var(--signal)}.story-legend .k2{background:#AA2091}.story-legend .k3{background:#6C45D2}
.reel{display:flex;flex-direction:column;gap:14px}
.reel-frame{width:100%;max-width:330px;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;position:relative;background:#000}
.reel-frame canvas{width:100%;height:100%;display:block}
.reel-btn{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center}
.reel-bar{position:absolute;left:12px;right:12px;top:10px;display:flex;gap:4px}
.reel-bar i{flex:1;height:2px;background:rgba(255,255,255,.25);overflow:hidden;position:relative}
.reel-bar i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(var(--p,0));transform-origin:left}
.reel small{color:var(--muted);font-size:.9rem;line-height:1.4;max-width:34ch}
@media (max-width:980px){.team{grid-template-columns:1fr}.reel-frame{max-width:300px}}
@media (max-width:520px){.people{grid-auto-columns:72%}}
.values{list-style:none;padding:0;margin:clamp(56px,7vw,96px) 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.values li{border-top:1px solid var(--line);padding-top:16px}
.values b{display:block;font:var(--wn) 1.6rem/1.1 var(--serif);margin-bottom:8px}
.values span{color:var(--muted);font-size:.93rem;line-height:1.45;display:block}
@media (max-width:980px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px)}
.faq h2{font-size:var(--s3)}
.faq-side p{color:var(--muted);margin-top:18px;max-width:34ch}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:24px 0;font:600 var(--s1)/1.3 var(--sans);letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary .pm{width:20px;height:20px;flex:none;position:relative}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:2px;right:2px;top:9px;height:2px;background:var(--text);transition:transform .2s}
summary .pm::after{transform:rotate(90deg)}
details[open] summary .pm::after{transform:rotate(0)}
details .a{padding:0 44px 26px 0;color:var(--muted);max-width:66ch}
@media (max-width:900px){.faq{grid-template-columns:1fr}details .a{padding-right:0}}

/* Kontakt */
.contact{position:relative;overflow:hidden;isolation:isolate}
.contact::after{content:"";position:absolute;left:-20%;bottom:-60%;width:90%;height:120%;background:radial-gradient(ellipse at 30% 60%,rgba(108,69,210,.45),rgba(170,32,145,.22) 38%,rgba(194,10,35,.1) 58%,transparent 72%);z-index:-1;pointer-events:none}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);align-items:start}
.contact h2{font-size:var(--s4);letter-spacing:-.04em;line-height:.95}
.contact h2 em{display:block}
.contact .lead{margin-top:28px;font-size:var(--s1);color:var(--on-dark-muted);max-width:40ch;line-height:1.45}
.direct{margin-top:40px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 18px;border-top:1px solid var(--on-dark-line);padding-top:24px;max-width:460px}
.direct .sq{grid-row:span 4;width:72px;height:72px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--red);background:var(--signal);display:grid;place-items:center;font:400 1.8rem var(--serif);color:#fff}
.direct b{font-weight:700}
.direct span{color:var(--on-dark-muted);font-size:.95rem}
.direct .num{font:var(--wn) 1.7rem/1.2 var(--serif);color:#fff;user-select:all}
form{background:rgba(255,255,255,.04);border:1px solid var(--on-dark-line);border-radius:var(--r);padding:clamp(22px,3vw,36px);display:grid;gap:20px;backdrop-filter:blur(6px)}
fieldset{border:0;margin:0;padding:0}
legend,label{font-weight:600;font-size:.95rem;margin-bottom:10px;display:block}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.picks input{position:absolute;opacity:0;pointer-events:none}
.picks label{margin:0;font-weight:500;padding:10px 14px;border:1px solid var(--on-dark-line);border-radius:var(--r);cursor:pointer;transition:background .2s,border-color .2s}
.picks input:checked+label{background:#fff;color:var(--ink);border-color:#fff}
.picks input:focus-visible+label{outline:3px solid #fff;outline-offset:2px}
.field input,.field textarea{width:100%;min-height:52px;border-radius:var(--r);border:1px solid var(--on-dark-line);background:rgba(15,13,20,.6);color:#fff;font:inherit;padding:13px 14px}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--magenta);outline-offset:0}
form .btn{width:100%}
.form-note{font-size:.88rem;color:var(--on-dark-muted)}
.form-ok{background:rgba(255,255,255,.08);padding:14px 16px;font-size:.95rem;border-radius:var(--r)}
@media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}

footer{background:var(--ink);color:var(--on-dark-muted);border-top:1px solid var(--on-dark-line);font-size:.93rem}
footer .wrap{padding-block:48px 120px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
footer b{color:#fff;display:block;margin-bottom:8px;font-weight:600}
footer a{text-decoration:none;display:block;line-height:1.9}
footer a:hover{color:#fff}
@media (max-width:760px){footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mbar{display:none}
@media (max-width:767px){
  .mbar{display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(15,13,20,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--on-dark-line)}
  .mbar .btn{min-height:50px;padding:.9rem 1rem;gap:16px}
  .mbar .btn-line{color:#fff}
}

/* Entwurfs-Markierungen */
body.marks .dm{background:rgba(233,168,0,.2);box-shadow:inset 0 -3px 0 var(--draft);position:relative;cursor:help}
body.marks .dm::after{content:"D";position:absolute;top:0;right:-.9em;font:800 10px/1 var(--sans);background:var(--draft);color:#000;padding:2px 3px;letter-spacing:0;-webkit-text-fill-color:#000}
body.marks .dm.soft{background:none;box-shadow:none}
body.marks .ph::before{content:"Foto folgt";position:absolute;right:8px;top:8px;font:700 10px/1 var(--sans);background:var(--draft);color:#000;padding:4px 6px;z-index:2;border-radius:3px}
.draft{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:58}
.draft-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;background:var(--draft);color:#000;font:700 .85rem var(--sans);padding:10px 14px;border-radius:var(--r);box-shadow:0 8px 24px -8px rgba(0,0,0,.45)}
.draft-btn:focus-visible{outline:3px solid #000;outline-offset:2px}
.draft-panel{position:absolute;left:0;bottom:50px;width:min(380px,calc(100vw - 28px));max-height:min(70vh,560px);overflow:auto;background:#fff;color:var(--text);border-radius:var(--r);box-shadow:0 24px 60px -20px rgba(0,0,0,.5);padding:18px 18px 14px;font-size:.9rem;line-height:1.45}
.draft-panel h4{margin:0 0 4px;font:700 1rem var(--sans)}
.draft-panel p{color:var(--muted);margin-bottom:12px}
.draft-panel ol{margin:0;padding-left:20px;display:grid;gap:8px}
.draft-panel .tog{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-weight:600}
@media (max-width:767px){.draft{left:auto;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px))}.draft-panel{left:auto;right:0}.draft-btn .lbl{display:none}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Verläufe laut Styleguide: sichtbar von Blau (#6C45D2) nach Rot (#C20A23) */
:root{--glow:radial-gradient(ellipse 42% 62% at 16% 72%,rgba(108,69,210,.62),transparent 70%),radial-gradient(ellipse 30% 50% at 50% 86%,rgba(170,32,145,.26),transparent 70%),radial-gradient(ellipse 42% 62% at 86% 72%,rgba(194,10,35,.56),transparent 70%)}
.hero::after,.contact::after,.aboutrow::after,.statement::after,.award::after,.navi-panel::after,.scard-body::after,.hp::after{left:-8%!important;right:-8%!important;top:auto!important;bottom:-42%!important;width:auto!important;height:100%!important;background:var(--glow)!important;filter:blur(14px)}
:root[data-accent="gm"] h2 em,:root[data-accent="gm"] h1 em{background-image:linear-gradient(90deg,rgba(108,69,210,.5),rgba(170,32,145,.34) 50%,rgba(194,10,35,.46))}
:root[data-accent="gm"] .hero h1 .mk,:root[data-accent="gm"] .dark h2 em,:root[data-accent="gm"] .hero h1 em.x{background-image:linear-gradient(90deg,rgba(108,69,210,.85),rgba(170,32,145,.6) 50%,rgba(194,10,35,.85))}
.phone,.desk-screen{box-shadow:0 0 0 1.5px rgba(255,255,255,.16) inset,0 40px 90px -30px rgba(0,0,0,.85),-30px 10px 70px -24px rgba(108,69,210,.5),30px 10px 70px -24px rgba(194,10,35,.4)!important}

/* ==========================================================================
   MSTAGE-HP Theme für migrierte Inhaltsseiten
   Übersetzt die TYPO3/Bootstrap-Klassen der bestehenden mstage.at in die
   neue Designsprache der Startseite (Archivo + Instrument Serif, Ink/Weiß,
   Rot und Signal-Verlauf als Energie). Keine Versalien-Eyebrows.
   ========================================================================== */
:root{--fusion-red:var(--red);--font-display:var(--display);--font-body:var(--sans);--grey-100:#F3F3F5;--grey-200:#E1E0E6;--grey-400:#9A97A3;--paper-soft:#F7F7F8;--heavy-cream:#F3F3F5;--light-cream:#F7F7F8;--dark-grey:#2A2830}

/* ---------- Basis ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border-radius:var(--r);font-weight:600}
.skip:focus{left:12px}
.sel{user-select:all}
.visually-hidden,.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
img{max-width:100%;height:auto}
.img-fluid{max-width:100%;height:auto;display:block}
.page-body{font-size:var(--s0)}
.page-body p{margin:0 0 1em}
.page-body p:last-child{margin-bottom:0}
.page-body ul,.page-body ol{padding-left:1.2em;margin:0 0 1em}
.page-body a:not(.btn):not(.card):not(.pcard):not(.gallery-item){color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--red)}
.page-body a:not(.btn):not(.card):not(.pcard):not(.gallery-item):hover{text-decoration-color:currentColor}
.page-body h1,.page-body h2,.page-body h3,.page-body h4,.page-body h5,.page-body h6{font-family:var(--display);font-weight:var(--wd);letter-spacing:-.025em;line-height:1.05;margin:0 0 .55em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.page-body h4,.page-body h5,.page-body h6{letter-spacing:-.01em;line-height:1.2;font-weight:700}
.page-body .h1,.page-body h1{font-size:var(--s4)}
.page-body .h2,.page-body h2{font-size:var(--s3)}
.page-body .h3,.page-body h3{font-size:var(--s2)}
.page-body .h4,.page-body h4{font-size:var(--s1)}
.page-body .h5,.page-body h5{font-size:1.15rem}
.page-body .h6,.page-body h6{font-size:1rem}
.page-body .display{font-family:var(--display);font-weight:var(--wd);letter-spacing:-.03em;line-height:1.02}
.page-body strong,.page-body b{font-weight:700}
.page-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.lead{font-size:var(--s1);line-height:1.5}
.page-body .lead{color:var(--muted);max-width:62ch}
.sub-headline,.eyebrow,.tagline,.card-category .card-body small{display:block;font:600 1rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--red);margin-bottom:12px}
.bg-dark .sub-headline,.surface-dark .sub-headline,.phero .sub-headline,.bg-dark .eyebrow{color:#fff;opacity:.72}
.text-muted{color:var(--muted)!important}
.text-center{text-align:center}.text-end{text-align:right}
@media (min-width:768px){.text-md-end{text-align:right}}
.text-white{color:#fff}.text-primary{color:var(--red)}
.fw-bold{font-weight:700}.text-sm{font-size:.9rem}.text-xs{font-size:.8rem}
.d-block{display:block}.d-flex{display:flex}.flex-column{flex-direction:column}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-self-center{align-self:center}
.gap-2{gap:1rem}.ms-auto{margin-left:auto}
.mt-0{margin-top:0!important}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-_5{margin-bottom:.25rem}.pb-2{padding-bottom:1rem}
@media (min-width:576px){.flex-sm-row{flex-direction:row}.align-items-sm-center{align-items:center}}
@media (min-width:768px){.align-self-md-center{align-self:center}.mt-md-2{margin-top:1rem}}
.h-100{height:100%}
.rounded-circle{border-radius:50%}

/* ---------- Raster (Bootstrap-kompatibel, schlank) ---------- */
.container,.container-fluid,.container-lg,.container-md-limited,.container-md-extended{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.container-md-limited{max-width:900px}
.row{display:flex;flex-wrap:wrap;margin-inline:-14px;row-gap:28px}
.row>*{padding-inline:14px;flex:0 0 100%;max-width:100%;min-width:0}
.row-gap-1{row-gap:14px}.row-gap-2{row-gap:28px}.g-0{margin-inline:0}.g-0>*{padding-inline:0}
.col{flex:1 0 0%}.col-auto{flex:0 0 auto;width:auto;max-width:none}
.col-12{flex:0 0 100%}.col-6{flex:0 0 50%;max-width:50%}
@media (min-width:576px){.col-sm-6{flex:0 0 50%;max-width:50%}}
@media (min-width:768px){
  .col-md{flex:1 0 0%;max-width:none}.col-md-auto{flex:0 0 auto;width:auto;max-width:none}
  .col-md-4{flex:0 0 33.333%;max-width:33.333%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-8{flex:0 0 66.666%;max-width:66.666%}
  .order-md-first{order:-1}.order-md-0{order:0}
  .columns-md-2{columns:2;column-gap:48px}
  .columns-md-2>*{break-inside:avoid}
}
@media (min-width:992px){
  .col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.333%;max-width:33.333%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-8{flex:0 0 66.666%;max-width:66.666%}.col-lg-12{flex:0 0 100%;max-width:100%}
  .order-lg-last{order:99}
}
@media (min-width:1200px){.col-xl-4{flex:0 0 33.333%;max-width:33.333%}}
@media (min-width:1400px){.col-xxl-2{flex:0 0 16.666%;max-width:16.666%}}
.order-first{order:-1}
.grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}

/* ---------- Sektionen ---------- */
.section{position:relative}
.section-padded{padding-block:clamp(64px,8vw,120px)}
.section-compress{padding-block:clamp(36px,4vw,56px)}
.section-padded+.section-padded.bg-heavycream,.bg-heavycream+.bg-heavycream,.bg-white+.bg-white,.bg-dark+.bg-dark{padding-top:0}
.section-separated{padding-block:clamp(48px,6vw,84px)}
.bg-heavycream,.surface-cream{background:var(--mist)}
.bg-white,.bg-light,.surface-soft{background:#fff}
.bg-dark,.surface-dark,.table-dark{background:var(--ink);color:#fff}
.bg-dark .lead,.surface-dark .lead{color:var(--on-dark-muted)}
.bg-dark .text-muted{color:var(--on-dark-muted)!important}
.bg-primary,.surface-accent{background:var(--red);color:#fff;position:relative;isolation:isolate;overflow:hidden}
.bg-primary::after{content:"";position:absolute;inset:0;background:var(--signal);opacity:.55;z-index:-1}
.bg-primary .sub-headline,.bg-primary .lead{color:#fff}
.page-body section.bg-dark,.page-body div.section.bg-dark{overflow:hidden;isolation:isolate}
.page-body .section.bg-dark::before{content:"";position:absolute;right:-20%;top:-40%;width:70%;height:120%;background:radial-gradient(ellipse,rgba(108,69,210,.22),rgba(170,32,145,.12) 40%,transparent 68%);z-index:-1;pointer-events:none}

/* Abschnittsmarke: "Leistungen", "Werte" ... als Pixel-Label */
.outline-headline .bg-dark{background:var(--ink)}
.outline-headline .heading-row{display:flex;align-items:center;gap:18px;padding-block:clamp(56px,7vw,100px) 0;color:inherit}
.outline-headline .bg-dark{color:#fff}
.outline-headline .outline-right{justify-content:flex-start}
.outline-headline__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);letter-spacing:-.01em;line-height:1}
.heading-squares-decorated{display:flex;gap:5px;align-items:center}
.heading-square{width:10px;height:10px;background:var(--red);display:block}
.heading-square:nth-child(2){background:var(--magenta)}.heading-square:nth-child(3){background:var(--violet)}
.outline-headline+.section{padding-top:clamp(28px,3vw,44px)}

/* ---------- Seitenkopf (ehemals Sujet) ---------- */
.phero{background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.phero::after{content:"";position:absolute;left:-15%;bottom:-60%;width:85%;height:120%;background:radial-gradient(ellipse at 30% 60%,rgba(108,69,210,.5),rgba(170,32,145,.25) 38%,rgba(194,10,35,.08) 58%,transparent 72%);z-index:-1;pointer-events:none;filter:blur(10px)}
.phero .px{position:absolute;right:max(20px,4vw);top:120px;display:grid;grid-template-columns:repeat(4,14px);gap:5px;opacity:.9;z-index:-1}
.phero .px i{width:14px;height:14px;background:var(--red);display:block}
.phero .px i:nth-child(3n){background:var(--magenta)}.phero .px i:nth-child(4n){background:transparent}.phero .px i:nth-child(5n){background:var(--violet)}
.phero .crumbs{padding-top:110px}
.phero .hero-content{position:relative}
.phero .sujet{background:transparent!important;padding:clamp(36px,5vw,64px) 0 clamp(64px,8vw,110px);position:static;color:#fff}
.phero .sujet .container,.phero .sujet .container-fluid{max-width:var(--wrap);padding-inline:max(20px,env(safe-area-inset-left,0px))}
.phero .sujet-row{row-gap:22px}
.phero h1,.phero .h1{font-family:var(--display);font-weight:var(--wd);line-height:.98;letter-spacing:-.04em;max-width:20ch;margin:0;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.phero .lead{color:var(--on-dark-muted);max-width:60ch;margin-top:6px}
.phero .lead p{margin:0 0 .6em}
.phero .link-list{margin-top:26px}
.phero .sujet-media{display:block}
.phero .sujet-media:not(.media-cover){max-width:var(--wrap);margin:0 auto 22px;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.phero .lead br{display:none}
.phero .sujet-media:not(.media-cover) svg{width:64px;height:64px;color:#fff}
.phero .sujet-media:not(.media-cover) img{max-height:120px;width:auto}
.phero .sujet-media.media-cover{position:absolute;inset:0;z-index:-2;opacity:.38}
.phero .sujet-media.media-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 15%,rgba(15,13,20,.4) 70%,rgba(15,13,20,.2))}
.phero .sujet-media.media-cover video,.phero .sujet-media.media-cover img{width:100%;height:100%;object-fit:cover;display:block}
.phero .sujet-overlay-container{display:none}
.phero .text-center,.phero .sujet-center-center .col-12{text-align:left}
.phero.slim .crumbs{padding-top:110px}
.phero.slim .post-head{padding:clamp(28px,4vw,48px) 0 clamp(48px,6vw,80px)}

/* Brotkrumen */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px;font-size:.88rem;color:var(--on-dark-muted)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:"";width:5px;height:5px;background:var(--red);display:block}
.crumbs a{text-decoration:none;color:var(--on-dark-muted)}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}

/* ---------- Buttons & Linklisten ---------- */
.link-list{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.link-list-inline{margin-top:0}
.btn-outline-container{display:contents}
.page-body .btn{gap:28px;text-decoration:none}
.page-body .btn span:not(.arr){font-weight:600}
.page-body .btn-line{box-shadow:inset 0 0 0 1px currentColor;background:transparent}
.page-body .bg-heavycream .btn-line:hover,.page-body .bg-white .btn-line:hover{background:var(--ink);color:#fff}
.h-btn-wrapper{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* ---------- Karten ---------- */
.card{display:flex;flex-direction:column;background:#fff;color:var(--text);border-radius:var(--r);border:1px solid var(--line);text-decoration:none;overflow:hidden;position:relative;transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s,border-color .32s}
.bg-dark .card{background:var(--ink-2);color:#fff;border-color:var(--on-dark-line)}
.bg-heavycream .card.bg-light,.bg-heavycream .card{background:#fff}
a.card:hover,.card-hover:hover{transform:translateY(var(--ms-lift));box-shadow:0 26px 50px -30px rgba(15,13,20,.45);border-color:transparent}
a.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.3,.7,.2,1)}
a.card:hover::after{transform:scaleX(1)}
.card-body{padding:22px 24px 26px;flex:1}
.card-padded{padding:clamp(24px,3vw,40px)}
.card-padded .card-body{padding:0}
.card.text-center{text-align:left}
.card-img-top{display:block}
.card-padded .card-img-top{margin-bottom:22px}
.card-img-top svg{width:56px;height:56px;color:var(--red)}
.bg-dark .card-img-top svg{color:#fff}
.card-img-top img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-padded .card-img-top img{width:auto;max-height:72px;aspect-ratio:auto;object-fit:contain}
.card-title{margin-bottom:.4em}
.card-footer{padding:0 24px 22px}
.card-center{text-align:center}
.card-category .card-body{font-size:.92rem;color:var(--muted)}
.card-category .card-title{color:var(--text)}
.card-bottom{margin-top:auto}
.card-overlay-content{padding:22px}

/* Referenz-Mosaik */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.mosaic-tile-lg{grid-column:span 2;grid-row:span 2}
.mosaic-tile-sm{grid-column:span 1}
.mosaic .card-img-top{flex:1;overflow:hidden}
.mosaic .card-img-top img{height:100%;aspect-ratio:auto;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.mosaic .card:hover .card-img-top img{transform:scale(1.04)}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.mosaic-tile-lg{grid-column:span 2;grid-row:auto}}
@media (max-width:520px){.mosaic{grid-template-columns:1fr}.mosaic-tile-lg{grid-column:auto}}

/* ---------- Listen ---------- */
.list-styled{list-style:none;padding:0!important}
.list-styled li{position:relative;padding-left:24px;margin-bottom:.55em}
.list-styled li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--red)}
.list-unstyled{list-style:none;padding:0!important}
.list-separated li{border-bottom:1px solid var(--line);padding:.6em 0}
.list-group{list-style:none;padding:0;border-top:1px solid var(--line)}
.list-group-item{display:block;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none}

/* ---------- Icons ---------- */
.icon svg,.icon img{width:40px;height:40px}
.icon-md svg,.icon-md img{width:48px;height:48px}
.icon-lg svg,.icon-lg img{width:64px;height:64px}
.icon{color:var(--red);display:inline-block}
.bg-dark .icon{color:#fff}
svg:not([width]){max-width:100%}
.page-body svg{max-width:100%;height:auto}

/* ---------- Zitat ---------- */
.theme-quote{margin:0 auto;max-width:980px;text-align:center}
.theme-quote>svg{display:none}
.blockquote-text,.page-body blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,1.1rem + 1.9vw,2.8rem);line-height:1.18;letter-spacing:-.01em;margin:0;text-wrap:balance}
.blockquote-footer{margin-top:24px;font-size:.95rem;color:var(--muted);line-height:1.5}
.bg-dark .blockquote-footer{color:var(--on-dark-muted)}
.blockquote-footer::before{content:"";display:block;width:24px;height:3px;background:var(--signal);margin:0 auto 14px}

/* ---------- Akkordeon ---------- */
.page-body details.acc,.ag-why details.acc{border-top:1px solid var(--line)}
.page-body details.acc:last-of-type,.ag-why details.acc:last-of-type{border-bottom:1px solid var(--line)}
.bg-dark details.acc{border-color:var(--on-dark-line)!important}
details.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font:700 var(--s1)/1.3 var(--sans);letter-spacing:-.01em}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"";flex:0 0 18px;height:18px;background:linear-gradient(currentColor,currentColor) center/18px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 18px no-repeat;transition:transform .2s}
details.acc[open] summary::after{transform:rotate(45deg);color:var(--red)}
details.acc summary:hover{color:var(--red)}
.bg-dark details.acc summary:hover{color:#fff;opacity:.8}
.acc-b{padding:0 44px 26px 0;color:var(--muted);max-width:76ch}
.bg-dark .acc-b{color:var(--on-dark-muted)}
.acc-b p{margin:0 0 .8em}

/* ---------- Galerie, Bilder, Tabellen ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.gallery-item{display:block;overflow:hidden;border-radius:var(--r)}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.gallery-item:hover img{transform:scale(1.04)}
.media-grayscale img{filter:grayscale(1);transition:filter .2s}
.media-grayscale img:hover{filter:none}
.figure{margin:0}
.figure-caption{font-size:.85rem;color:var(--muted);margin-top:10px;overflow-wrap:anywhere}
.page-body .col-md>img,.page-body .col-md-6>img,.page-body .col-lg-6>img,.page-body .col-md>a>img{border-radius:var(--r)}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.95rem}
.table th,.table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-weight:700}
.table-striped tbody tr:nth-child(odd){background:rgba(15,13,20,.03)}
.bg-dark .table th,.bg-dark .table td{border-color:var(--on-dark-line)}

/* ---------- Horizontal-Band (ehemals Swiper) ---------- */
.hscroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.hscroll-in{display:flex;gap:20px}
.hscroll-item{flex:0 0 min(82%,340px);scroll-snap-align:start}
@media (min-width:992px){.hscroll-item{flex-basis:calc((100% - 40px)/3)}}
.swiper-scrollbar{display:none}

/* ---------- Logo-Bänder (B2B etc.) ---------- */
.logos_headline h5{font:600 1rem/1.3 var(--sans);color:var(--muted);margin-bottom:22px;text-align:center}
.logos.container{overflow:hidden;display:flex;gap:56px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo_items{display:flex;gap:56px;align-items:center;flex:0 0 auto;animation:lgmq 30s linear infinite}
.logo_items img{height:42px;width:auto;opacity:.75;filter:grayscale(1)}
@keyframes lgmq{to{transform:translateX(calc(-100% - 56px))}}

/* ---------- Statistik / Features / Integrationen / Benefit (Landingpages) ---------- */
.statistics-container,.features-grid,.integrations-row,.benefits-grid,.reasons-row,.content-grid{display:grid;gap:20px}
.statistics-container{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.statistic-card,.feature-card,.integration-card,.benefit-card,.reason-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.bg-dark .statistic-card,.bg-dark .feature-card,.bg-dark .integration-card,.bg-dark .benefit-card{background:var(--ink-2);border-color:var(--on-dark-line)}
.statistic-number{font-family:var(--serif);font-size:var(--s3);line-height:1;margin:10px 0 6px}
.statistic-icon{width:48px;height:48px}
.features-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.feature-header{display:flex;gap:14px;align-items:baseline}
.feature-icon-wrapper{font-family:var(--serif);font-size:1.6rem;color:var(--red);flex:0 0 auto}
.feature-title{font-size:1.1rem!important;margin:0 0 .4em!important}
.feature-description,.benefit-description,.reason-description{color:var(--muted);margin:0}
.features-content{max-height:none!important;overflow:visible!important}
.features-expand{display:none}
.integrations-row{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:20px}
.integration-card{text-align:center;padding:20px}
.integration-logo{height:44px;width:auto;margin:0 auto 10px;object-fit:contain}
.integration-name{font-size:.95rem!important;margin:0!important}
.integrations-grid:not(.active){display:block}
.benefits-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:20px}
.benefit-title,.reason-title{font-size:1.25rem!important}
.reasons-row{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.reason-image img{border-radius:var(--r);margin-bottom:14px}
.main-heading-teaser,.closing-heading,.main-heading-testimonial,.features-title{font-size:var(--s2)!important}
.carousel-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory}
.carousel-slide{flex:0 0 min(100%,720px);scroll-snap-align:start;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.carousel-navigation,.carousel-arrow{display:none}
.testimonial-image img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.customer-quote{font-family:var(--serif);font-size:1.4rem;line-height:1.3;margin:0 0 12px}
.customer-name{font-weight:700}
.hero-section .content-container{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media (max-width:820px){.hero-section .content-container{grid-template-columns:1fr}.carousel-slide{grid-template-columns:1fr}}
.tag{display:inline-block;font-size:.82rem;font-weight:600;padding:5px 10px;border-radius:var(--r);background:rgba(15,13,20,.06)}
.tag--accent{background:var(--red);color:#fff}
.typing-container{font-family:var(--serif)}
.bars{display:none}

/* ---------- Blogartikel ---------- */
.post .blog-section .container{max-width:880px}
.post .blog-section h1{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
.post .section .container{max-width:880px}
.post .section .row>.col-md,.post .section .row>.col-md-6{flex-basis:100%;max-width:100%}
.post .section-padded{padding-block:clamp(22px,3vw,36px)}
.post .bg-heavycream{background:#fff}
.post .page-body>.section:first-child{padding-top:0}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;color:var(--on-dark-muted);margin-top:18px}
.post-head h1{font-family:var(--display);font-weight:var(--wd);font-size:clamp(2rem,1.1rem + 3.4vw,4rem);line-height:1.02;letter-spacing:-.035em;max-width:24ch;margin:0;text-wrap:balance}
.post-cover{max-width:880px;margin:clamp(-60px,-4vw,-36px) auto 0;padding-inline:20px;position:relative;z-index:1}
.post-cover img{border-radius:var(--r);width:100%;box-shadow:0 30px 60px -30px rgba(15,13,20,.5)}

/* Blog-Übersicht & Karten */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
@media (max-width:980px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .32s,box-shadow .32s}
.pcard:hover{transform:translateY(var(--ms-lift));box-shadow:0 26px 50px -30px rgba(15,13,20,.45)}
.pcard-img{aspect-ratio:16/9;background:var(--mist);overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.pcard-b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard-b small{color:var(--muted);font-size:.85rem}
.pcard-b h3{font-size:1.25rem!important;line-height:1.2!important;letter-spacing:-.015em!important;margin:0!important}
.pcard-b p{color:var(--muted);font-size:.95rem;margin:0}
.pcard-b .tl{margin-top:auto;align-self:flex-start}
.pagin{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px}
.pagin a{min-width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);text-decoration:none!important;font-weight:600}
.pagin a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagin a:hover{border-color:var(--ink)}

/* ---------- CTA-Band & Formular ---------- */
.cta-band{background:var(--ink);color:#fff;padding-block:clamp(80px,10vw,140px);position:relative;overflow:hidden;isolation:isolate}
.cta-band::after{content:"";position:absolute;right:-20%;bottom:-70%;width:90%;height:140%;background:radial-gradient(ellipse,rgba(194,10,35,.45),rgba(170,32,145,.2) 40%,transparent 68%);z-index:-1}
.cta-band h2{font-size:var(--s3);max-width:16ch}
.cta-band p{color:var(--on-dark-muted);font-size:var(--s1);max-width:50ch;margin-top:20px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:34px;font-weight:600}
.cform{display:grid;gap:18px;max-width:760px}
.cform fieldset{border:0;padding:0;margin:0}
.cform legend{font-weight:700;margin-bottom:12px}
.cform .picks{display:flex;flex-wrap:wrap;gap:8px}
.cform .picks input{position:absolute;opacity:0;pointer-events:none}
.cform .picks label{padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;font-weight:500;background:#fff}
.cform .picks input:checked+label{background:var(--ink);color:#fff;border-color:var(--ink)}
.cform .picks input:focus-visible+label{outline:3px solid var(--violet);outline-offset:2px}
.cform .field{display:grid;gap:6px}
.cform label{font-weight:600;font-size:.95rem}
.cform input:not([type=checkbox]),.cform textarea{font:inherit;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.cform textarea{min-height:120px;resize:vertical}
.cform .btn{justify-self:start}
.form-ok{font-weight:600;color:var(--red)}

/* ---------- Startseite: SEO-Block ---------- */
.agentur{background:var(--mist)}
.ag-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ag-card{background:#fff;padding:clamp(22px,2.4vw,32px);text-decoration:none;display:flex;flex-direction:column;gap:14px;transition:background .2s}
.ag-card h3{font-size:1.35rem;letter-spacing:-.02em;line-height:1.15}
.ag-card p{color:var(--muted);font-size:.95rem;flex:1}
.ag-card .tl{align-self:flex-start}
.ag-card:hover{background:var(--ink);color:#fff}
.ag-card:hover p{color:var(--on-dark-muted)}
@media (max-width:980px){.ag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ag-grid{grid-template-columns:1fr}}
.ag-why{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px clamp(24px,5vw,72px);align-items:start}
.ag-why>h3{font-size:var(--s2)}
.ag-why>p{color:var(--muted);grid-column:1;max-width:44ch}
.ag-why>details{grid-column:2}
.ag-why>details:first-of-type{grid-row:1/span 1}
@media (max-width:900px){.ag-why{grid-template-columns:1fr}.ag-why>details{grid-column:1}.ag-why>details:first-of-type{grid-row:auto}}
.ag-why .acc-b ul{padding-left:1.2em}
.wissen .head h2 em{display:inline}

/* ---------- Header: Megamenü, Burger ---------- */
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center}
.nav li{position:relative}
.nav .has-mm{all:unset;cursor:pointer;text-decoration:none;font-weight:500;color:rgba(255,255,255,.8);font-size:.95rem;display:inline-flex;align-items:center;gap:6px}
.nav .has-mm::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav li.mm:hover .has-mm,.nav li.mm:focus-within .has-mm,.nav li.open .has-mm{color:#fff}
.nav li.mm:hover .has-mm::after,.nav li.open .has-mm::after{transform:translateY(1px) rotate(-135deg)}
.nav .has-mm:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
.megamenu{position:absolute;top:100%;left:-24px;padding-top:22px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:5}
.nav li.mm:hover .megamenu,.nav li.mm:focus-within .megamenu,.nav li.open .megamenu{opacity:1;visibility:visible;transform:none}
.mm-in{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:22px 34px;padding:26px 28px;border-radius:var(--r);background:rgba(14,13,18,.94);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);min-width:520px}
.nav li:first-child .mm-in{grid-template-columns:repeat(3,minmax(200px,1fr));min-width:720px}
.mm-col{display:flex;flex-direction:column;gap:6px}
.nav .mm-main{color:#fff;font-weight:700;font-size:.98rem;padding-bottom:4px}
.nav .sub{font-size:.9rem;color:rgba(255,255,255,.62);background:none!important;padding:0!important}
.nav .sub:hover{color:#fff}
.burger{all:unset;display:none;cursor:pointer;width:44px;height:44px;place-items:center;position:relative;flex:0 0 44px}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:#fff;transition:transform .2s,top .2s}
.burger i:first-child{top:17px}.burger i:last-child{top:25px}
.burger[aria-expanded="true"] i:first-child{top:21px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:980px){.burger{display:grid}.top .btn{margin-left:auto}}
.mnav{pointer-events:auto;margin:8px auto 0;max-width:calc(var(--wrap) + 24px);max-height:calc(100dvh - 90px);overflow:auto;border-radius:var(--r);background:rgba(14,13,18,.97);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.14);padding:10px 20px 20px}
.mnav[hidden]{display:none}
.mnav a,.mnav summary{display:block;text-decoration:none;color:#fff;padding:12px 0}
.mnav .m1{font:700 1.15rem/1.2 var(--sans);border-bottom:1px solid rgba(255,255,255,.1)}
.mnav details{border:0!important}
.mnav summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between}
.mnav summary::after{content:"+";font-weight:400;color:var(--on-dark-muted)}
.mnav details[open] summary::after{content:"–"}
.mnav .m2{padding:9px 0 9px 12px;color:rgba(255,255,255,.88);font-weight:600}
.mnav .m3{padding:7px 0 7px 26px;color:rgba(255,255,255,.6);font-size:.93rem}
.mnav details[open]{padding-bottom:8px}
:root[data-accent^="g"] .nav .sub,:root[data-accent^="g"] .nav .mm-main{background-image:none}

/* ---------- Footer ---------- */
footer.sitefoot{background:var(--ink);color:var(--on-dark-muted);border-top:1px solid var(--on-dark-line);font-size:.93rem}
footer.sitefoot .wrap.fgrid{padding-block:64px 40px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px}
footer.sitefoot .fbrand .brand{margin-bottom:20px}
footer.sitefoot .fbrand p{margin:0 0 14px;line-height:1.55}
footer.sitefoot .fbrand a{display:inline;text-decoration:underline}
footer.sitefoot b.mt{margin-top:20px}
footer.sitefoot .wrap.fbottom{padding-block:22px 110px;border-top:1px solid var(--on-dark-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.85rem;grid-template-columns:none}
@media (max-width:980px){footer.sitefoot .wrap.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}footer.sitefoot .fbrand{grid-column:1/-1}}
@media (min-width:768px){footer.sitefoot .wrap.fbottom{padding-bottom:28px}}

/* ---------- Entwurfs-Hinweis (nur Preview) ---------- */
.draftnote{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:58;background:var(--draft);color:#000;font:700 .82rem var(--sans);padding:9px 14px;border-radius:var(--r);text-decoration:none;box-shadow:0 8px 24px -8px rgba(0,0,0,.45)}
@media (max-width:767px){.draftnote{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){.logo_items{animation:none}}

/* Spalten-Headlines nicht zerreißen */
.row .h2,.row h2{font-size:clamp(1.8rem,1.2rem + 2vw,3.1rem);overflow-wrap:normal;hyphens:manual}
.page-body h1,.page-body h2,.phero h1{hyphens:manual}

.outline-headline .bg-heavycream{background:var(--mist)}.outline-headline .bg-white,.outline-headline .bg-light{background:#fff}.outline-headline .bg-primary{background:var(--red);color:#fff}
.outline-headline .heading-row{padding-bottom:0}
.bg-dark .card-category .card-title{color:#fff}
.bg-dark .card-category .card-body{color:var(--on-dark-muted)}
.card-padded .link-list{justify-content:flex-start}
@media (max-width:575px){.row>.col-sm-6.col-lg-3,.row>.col-sm-6.col-md-4{flex:0 0 50%;max-width:50%;padding-inline:7px}.row:has(>.col-sm-6.col-lg-3){margin-inline:-7px}.row>.col-sm-6.col-lg-3 .card-body{padding:14px;font-size:.88rem}}

.mm-in{display:block;columns:2;column-gap:34px}
.nav li:first-child .mm-in{columns:3}
.mm-col{break-inside:avoid;padding-bottom:20px}
:root .nav ul>li>a,:root .nav ul>li>.has-mm{padding-bottom:4px!important;line-height:1.2}
.phero .hero-content{position:static}
.ag-refs{margin-top:22px;color:var(--muted);font-size:.95rem}
.ag-refs a{color:var(--text);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
@media (max-width:700px){.phero .px{display:none}.draftnote{font-size:.72rem;padding:7px 11px}}

/* Verläufe Blau nach Rot */
.phero::after,.cta-band::after{left:-8%;right:-8%;top:auto;bottom:-45%;width:auto;height:100%;background:var(--glow);filter:blur(14px)}
.page-body .section.bg-dark::before{left:-10%;right:-10%;top:auto;bottom:-50%;width:auto;height:90%;background:var(--glow);opacity:.55}
.bg-primary::after{background:linear-gradient(90deg,#6C45D2 0%,#AA2091 50%,#C20A23 100%);opacity:.9}

/* Kundenprojekte: Referenzkacheln im Seitenkopf voll sichtbar */
.page-ecommerce-projekte-referenzen .phero .sujet-media.media-cover{opacity:1;left:auto;right:0;width:min(56%,860px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.page-ecommerce-projekte-referenzen .phero .sujet-media.media-cover::after{background:linear-gradient(180deg,rgba(15,13,20,.25),transparent 30%,transparent 70%,rgba(15,13,20,.6))}
.page-ecommerce-projekte-referenzen .phero .sujet-media.media-cover img{object-position:center}
.page-ecommerce-projekte-referenzen .phero .lead{max-width:46ch}
.page-ecommerce-projekte-referenzen .phero h1{max-width:12ch}
@media (max-width:900px){
  .page-ecommerce-projekte-referenzen .phero .sujet-media.media-cover{position:relative;inset:auto;width:100%;aspect-ratio:1/1;max-height:440px;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);order:2}
  .page-ecommerce-projekte-referenzen .phero .sujet{display:flex;flex-direction:column}
  .page-ecommerce-projekte-referenzen .phero .sujet-caption{order:1}
}

/* Logo-Icons */
.brand .logo g.lg{transition:transform .75s cubic-bezier(.6,0,.2,1),opacity .45s;transform-box:fill-box;transform-origin:center}
.brand .logo rect.st0{transition:fill .6s}
:root[data-logo="icons"] .brand rect.st0.hop,:root[data-logo="icons"] .brand.wave rect.st0{animation:none}
/* Lange URLs und Wörter umbrechen statt überlaufen */
.page-body p,.page-body li,.page-body td,.page-body a,.page-body strong,.page-body span{overflow-wrap:break-word;word-break:normal}
.page-body pre,.page-body code{white-space:pre-wrap;overflow-wrap:anywhere}
#inhalt{overflow-x:clip}

/* ==================== Kontaktseite ==================== */
.kontakt-main{padding-block:clamp(56px,7vw,110px)!important}
.kgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
@media (max-width:980px){.kgrid{grid-template-columns:1fr}.kform-wrap{order:-1}}
.kinfo h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.2rem)!important;margin-bottom:.4em}
.kinfo .lead{color:var(--muted);font-size:1.05rem;max-width:52ch}
.ksteps{list-style:none;counter-reset:ks;margin:32px 0 0;padding:0!important;display:grid;gap:18px}
.ksteps li{counter-increment:ks;display:grid;grid-template-columns:40px 1fr;gap:2px 14px;align-items:start}
.ksteps li::before{content:counter(ks);grid-row:span 2;width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;font:600 1.05rem var(--sans);color:#fff;background:linear-gradient(160deg,#6C45D2 0%,#AA2091 50%,#C20A23 100%)}
.ksteps b{font-weight:700}
.ksteps span{color:var(--muted);font-size:.95rem;line-height:1.45}
.kperson{display:flex;gap:16px;align-items:center;margin-top:32px;padding:18px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.kperson img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.kperson div{display:flex;flex-direction:column;gap:2px;min-width:0}
.kperson span{color:var(--muted);font-size:.9rem}
.kperson a{font-weight:600;font-size:.95rem;text-decoration:none!important;overflow-wrap:anywhere}
.kperson a:hover{color:var(--red)}
.kdirect{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.kdirect a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none!important;font-weight:600;overflow-wrap:anywhere}
.kdirect small{color:var(--muted);font-weight:500;font-size:.8rem}
.kdirect a:hover{border-color:var(--ink)}
.klocs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.klocs div{padding:14px 16px;border-radius:var(--r);border:1px dashed var(--line);display:flex;flex-direction:column;gap:4px;font-size:.92rem}
.klocs span{color:var(--muted)}
.kbadges{list-style:none;padding:0!important;margin:28px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kbadges li{background:#fff;border-radius:var(--r);border:1px solid var(--line);display:grid;place-items:center;padding:10px;aspect-ratio:3/2}
.kbadges img{max-height:44px;width:auto;object-fit:contain}
@media (max-width:600px){.kbadges{grid-template-columns:repeat(3,minmax(0,1fr))}.kdirect,.klocs{grid-template-columns:1fr}}

.kform{position:relative;background:#fff;border-radius:var(--r);border:1px solid var(--line);box-shadow:0 40px 80px -48px rgba(15,13,20,.45);padding:clamp(22px,3vw,40px);display:grid;gap:22px;scroll-margin-top:100px}
@media (min-width:981px){.kform{position:sticky;top:96px}}
.kf-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kf-top b{font-size:1.1rem;margin-right:auto}
.kf-steps{display:flex;gap:4px}
.kf-steps i{width:28px;height:4px;border-radius:var(--r);background:var(--line);transition:background .2s}
.kf-steps i.on{background:linear-gradient(90deg,#6C45D2 0%,#AA2091 50%,#C20A23 100%)}
.kf-count{font-size:.85rem;color:var(--muted)}
.kf-step{border:0;margin:0;padding:0;display:grid;gap:18px;min-width:0}
.kform.js .kf-step:not(.cur){display:none}
.kf-step legend{font:var(--wd) clamp(1.4rem,1.1rem + 1vw,1.9rem)/1.1 var(--display);letter-spacing:-.025em;margin-bottom:18px;padding:0}
.intents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.intents{grid-template-columns:1fr}}
.intent{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 18px 16px 48px;border-radius:var(--r);border:1px solid var(--line);cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.intent input{position:absolute;opacity:0;pointer-events:none}
.intent::before{content:"";position:absolute;left:16px;top:18px;width:18px;height:18px;border-radius:50%;border:1.5px solid #B9B7C0;transition:all .2s}
.intent .i-t{font-weight:700;line-height:1.25}
.intent .i-s{font-size:.86rem;color:var(--muted);line-height:1.35}
.intent:hover{border-color:#B9B7C0}
.intent:has(input:checked){border-color:transparent;box-shadow:0 0 0 2px #AA2091 inset;background:linear-gradient(135deg,rgba(108,69,210,.06),rgba(194,10,35,.05))}
.intent:has(input:checked)::before{border:5px solid #AA2091}
.intent:has(input:focus-visible){outline:3px solid var(--violet);outline-offset:2px}
.kf-group{display:grid;gap:10px}
.kf-l{font-weight:700;font-size:.95rem}
.kf-l small,.kform label small{font-weight:500;color:var(--muted)}
.chipopts{display:flex;flex-wrap:wrap;gap:8px}
.chipopt{position:relative;cursor:pointer}
.chipopt input{position:absolute;opacity:0;pointer-events:none}
.chipopt span{display:inline-block;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line);font-weight:500;font-size:.93rem;transition:all .2s;background:#fff}
.chipopt:hover span{border-color:#B9B7C0}
.chipopt input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chipopt input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}
.kform .field{display:grid;gap:6px;min-width:0}
.kform .field label{font-weight:600;font-size:.93rem}
.kform input:not([type=radio]):not([type=checkbox]),.kform textarea{font:inherit;font-size:1rem;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:#FAFAFB;transition:border-color .2s,box-shadow .2s,background .2s}
.kform input:focus,.kform textarea:focus{outline:none;background:#fff;border-color:#6C45D2;box-shadow:0 0 0 4px rgba(108,69,210,.14)}
.kform textarea{resize:vertical;min-height:110px}
.kf-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.kf-2{grid-template-columns:1fr}}
.kf-check{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.45;cursor:pointer}
.kf-check input{width:20px;height:20px;margin:1px 0 0;accent-color:#AA2091;flex:0 0 auto}
.kf-e,.kf-err{display:none;color:#B00020;font-size:.85rem;font-weight:600}
.kform .bad .kf-e,.kform .kf-e-ds.show,.kf-err:not([hidden]){display:block}
.kform .bad input{border-color:#B00020;background:#FFF7F8}
.kf-nav{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.kf-nav .btn{min-height:54px}
.kf-nav .kf-next,.kf-nav .kf-send{margin-left:auto}
.kf-nav .btn-line{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);background:#fff}
.kf-nav .btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.arr-l{display:inline-block}
.btn:hover .arr-l{transform:translateX(-5px)}
.kf-note{margin:0!important;font-size:.85rem;color:var(--muted)}
.kf-ok{display:grid;gap:12px;justify-items:start}
.kf-ok[hidden]{display:none}
.kf-ok-ic{width:56px;height:56px;border-radius:var(--r);background:linear-gradient(135deg,#6C45D2 0%,#AA2091 50%,#C20A23 100%);position:relative}
.kf-ok-ic::after{content:"";position:absolute;left:21px;top:13px;width:12px;height:22px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.kf-ok h3{font-size:1.6rem!important;margin:6px 0 0!important}
.kf-ok ol{margin:6px 0 0;padding-left:1.2em;display:grid;gap:6px;color:var(--muted)}
.kform.done>:not(.kf-ok){display:none!important}
[hidden]{display:none!important}
.kform .field{align-content:start}
/* Kundenstimmen (Karussell der Landingpages) */
.carousel-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.carousel-slide{flex:0 0 min(100%,640px);scroll-snap-align:start;display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:28px;color:#fff}
.bg-white .carousel-slide,.bg-heavycream .carousel-slide{background:#fff;border-color:var(--line);color:var(--text)}
.carousel-slide>img.testimonial-image{width:96px!important;height:96px!important;border-radius:50%;object-fit:cover}
.customer-quote{font-family:var(--serif);font-size:clamp(1.25rem,1rem + .8vw,1.6rem);line-height:1.3;margin:0 0 16px}
.customer-name{font-style:var(--ems,normal);font-weight:700;display:block}
.customer-title{margin:2px 0 0!important;opacity:.65;font-size:.9rem}
@media (max-width:600px){.carousel-slide{grid-template-columns:1fr}}
.customer-quote{font-size:clamp(1.1rem,.95rem + .5vw,1.35rem)!important}

/* Unterzeile statt Eyebrow (Stil der Startseite) */
.sub-headline.sub-after{display:block;color:var(--muted);font:500 var(--s1)/1.4 var(--sans);letter-spacing:-.005em;margin:-.15em 0 1.1em;max-width:52ch}
.sub-headline.sub-after::before{display:none!important}
.bg-dark .sub-headline.sub-after,.phero .sub-headline.sub-after,.surface-dark .sub-headline.sub-after{color:var(--on-dark-muted);opacity:1}
.phero .sub-headline.sub-after{margin:14px 0 0}
.text-center .sub-headline.sub-after{margin-inline:auto}
/* Marker auf Unterseiten */

/* =====================================================================
   DESIGN-TOKENS UND KOMPONENTEN (eine Quelle für alle Seiten)
   Stiländerungen hier vornehmen, nicht pro Seite. Varianten (Modern Plus)
   ändern nur Tokens, keine Einzelselektoren.
   ===================================================================== */
:root{
  --fs-h1:clamp(2.4rem,1.2rem + 4.2vw,5.2rem);
  --fs-h1-long:clamp(2.1rem,1.2rem + 2.8vw,3.8rem);
  --fs-h2:var(--s3);
  --fs-h2-col:clamp(1.8rem,1.2rem + 2vw,3.1rem);
  --fs-h3:var(--s2);
  --fs-sub:var(--s1);
  --mk-light:linear-gradient(90deg,rgba(108,69,210,.5),rgba(170,32,145,.34) 50%,rgba(194,10,35,.46));
  --mk-dark:linear-gradient(90deg,rgba(108,69,210,.85),rgba(170,32,145,.6) 50%,rgba(194,10,35,.85));
  --mk:var(--mk-light);
}
.bg-dark,.dark,.phero,.hero,.cta-band,.tone-dark,.c-rel-cases,.surface-dark,.bg-primary{--mk:var(--mk-dark)}
.tone-light,.bg-white,.bg-heavycream,.bg-light{--mk:var(--mk-light)}

/* Überschriften: eine Definition */
.phero h1,.page-body h1,.post-head h1{font-size:var(--fs-h1)}
.phero h1.long,.post-head h1{font-size:var(--fs-h1-long)}
.page-body h2,.page-body .h2,.c-rel-head h2,.cta-band h2{font-size:var(--fs-h2)}
.row .h2,.row h2{font-size:var(--fs-h2-col)}
.page-body h3,.page-body .h3{font-size:var(--fs-h3)}

/* Marker: eine Definition für h1 .mk und em in Überschriften */
:root[data-accent="gm"] :is(h1,h2,h3) .mk,:root[data-accent="gm"] :is(.page-body,.c-rel,.cta-band,.kinfo) :is(h2,.h2) em{background-image:var(--mk);background-size:100% .34em;background-position:0 88%;background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:is(.page-body,.c-rel,.cta-band) :is(h2,.h2) em{font-family:var(--serif);font-weight:400;font-style:var(--ems,normal);letter-spacing:-.01em}

/* Textlink mit Pfeil */
.c-more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:inherit;text-decoration:none!important;border:0;background:none;padding:0}
.c-more .arr{transition:transform .2s}
a:hover>.c-more .arr,.c-more:hover .arr{transform:translateX(5px)}

/* Querverweise */
.c-rel{padding-block:clamp(64px,8vw,110px)}
.c-rel-cases{background:var(--ink);color:#fff}
.c-rel-posts{background:#F5F5F7}
.c-rel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:34px}
.c-rel-head h2{margin:0;line-height:1;font-family:var(--display);font-weight:var(--wd);letter-spacing:-.035em}
.c-rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.c-rel-grid{grid-template-columns:1fr}}
.c-rcard{position:relative;display:flex;flex-direction:column;gap:10px;min-height:220px;padding:26px;border-radius:var(--r);text-decoration:none!important;color:inherit;overflow:hidden;isolation:isolate;transition:transform .32s cubic-bezier(.2,.7,.2,1),box-shadow .32s}
.c-rcard.case{background:linear-gradient(180deg,#19171f,#121016);border:1px solid rgba(255,255,255,.1)}
.c-rcard.post{background:#fff;border:1px solid var(--line)}
.c-rcard:hover{transform:translateY(var(--ms-lift));box-shadow:0 30px 60px -34px rgba(15,13,20,.6)}
.c-rcard small{font-size:.85rem;opacity:.7}
.c-rcard h3{font-size:1.35rem;line-height:1.2;letter-spacing:-.02em;margin:0;color:inherit;font-family:var(--display);font-weight:var(--wd)}
.c-rcard .c-more{margin-top:auto}
.c-pix{position:absolute;right:18px;top:18px;display:grid;grid-template-columns:repeat(3,9px);gap:3px;z-index:-1}
.c-pix::before{content:"";grid-column:1/-1;height:9px;background:linear-gradient(90deg,#6C45D2 0%,#AA2091 50%,#C20A23 100%)}
.c-pix::after{content:"";width:9px;height:9px;background:#C20A23;grid-column:3}
.c-pix.p1::after{grid-column:1;background:#6C45D2}.c-pix.p2::after{grid-column:2;background:#AA2091}

/* Auszeichnungs- und Logo-Band: Startseiten-Element, auf Unterseiten laufend */
.c-badges .toplogos[data-marquee]{display:flex;grid-template-columns:none;gap:clamp(36px,4vw,64px);overflow-x:auto;scrollbar-width:none;padding-inline:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.c-badges .toplogos[data-marquee]::-webkit-scrollbar{display:none}
.c-badges .toplogos[data-marquee] li{flex:0 0 auto}
.c-badges .toplogos[data-marquee] img{max-height:52px}
.c-logos .toplogos[data-marquee] img{max-height:34px;max-width:150px;filter:grayscale(1) contrast(1.1);opacity:.65;transition:filter .3s,opacity .3s}
.c-logos .toplogos[data-marquee] li:hover img{filter:none;opacity:1}
/* Rechtstexte: gleiche Komponenten, kleinere Token */
.page-impressum,.page-datenschutz{--fs-h2:clamp(1.35rem,1.1rem + .8vw,1.75rem);--fs-h3:1.15rem}
.page-impressum .page-body>section,.page-datenschutz .page-body>section{padding-block:clamp(48px,6vw,80px)}
.page-impressum .page-body .container,.page-datenschutz .page-body .container{max-width:880px}

/* Logo-Variante Icons: Pixel teilen sich nur während der Umwandlung */
.logo .lgs{fill:var(--red);transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.5,0,.2,1),opacity .4s,fill .5s,stroke-width .25s;stroke:var(--red);stroke-width:5px;visibility:hidden}
.logo.split .lgs{visibility:visible}
.logo.split.sp-on .lgs{stroke-width:0}
.logo.split rect.st0{visibility:hidden}

/* ==========================================================================
   ABGLEICH MIT MELANIES SPEZIFIKATION (MSTAGE Styleguide AKTUELL + Komponenten)
   Bewusste Abweichungen: Radius 12px, Schrift C, keine Versal-Kicker/Mono-Nav, Glut Blau→Rot, laufendes Award-Band.
   ========================================================================== */
:root{
  --ms-error:#8E0018;--ms-success:#0E7A46;--ms-warning:#8A4B00;--ms-info:#7438A9;
  --ms-focus:#6C45D2;--ms-focus-on-dark:#FFFFFF;
  --ms-dur-fast:120ms;--ms-dur:200ms;--ms-dur-slow:320ms;--ms-ease:cubic-bezier(.2,.6,.2,1);--ms-lift:-2px;
  --on-dark-muted:rgba(255,255,255,.72);
  /* Typo-Skala laut Styleguide (375 / 768 / 1280+) */
  --s1:clamp(1.125rem,1rem + .6vw,1.375rem);          /* Subline 18 / 20 / 22 */
  --s3:clamp(1.625rem,1.2rem + 1.8vw,2.375rem);       /* H2 26 / 32 / 38 */
  --s4:clamp(2.25rem,1.35rem + 3.75vw,4rem);          /* H1 36 / 48 / 64 */
  --fs-h2-col:var(--s3);
}
body{line-height:1.65}
h1{line-height:1.04}
h2{line-height:1.15}
/* Fokus: 2px, Offset 2px; auf Dunkel weiß mit Ink-Halo */
:focus-visible{outline:2px solid var(--ms-focus)!important;outline-offset:2px!important}
.top :focus-visible,.hero :focus-visible,.phero :focus-visible,.dark :focus-visible,.tone-dark :focus-visible,footer :focus-visible,.cta-band :focus-visible,.contact :focus-visible{outline-color:var(--ms-focus-on-dark)!important;box-shadow:0 0 0 4px rgba(15,13,20,.85)}
/* Buttons: gleicher Lift, Motion-Tokens, sechs Zustände */
.btn{transition:background-color var(--ms-dur) var(--ms-ease),transform var(--ms-dur) var(--ms-ease)!important}
.btn:hover{transform:translateY(var(--ms-lift))}
:root[data-accent^="g"] .btn-main:hover{box-shadow:none}
.btn-main:active{background:var(--ms-error)!important;background-image:none!important;transform:none}
.btn[disabled],.btn[aria-disabled="true"]{background:#D5D7DD!important;background-image:none!important;color:#8B8F99!important;box-shadow:none!important;transform:none!important;cursor:not-allowed}
.btn.is-loading{background:var(--ms-error)!important;background-image:none!important;color:rgba(255,255,255,.7)!important}
/* Header-CTA: Signal als Fläche (160°), Hover Rot */
:root[data-accent^="g"] .top .btn-main{background:var(--sig-surface)}
:root[data-accent^="g"] .top .btn-main:hover{background:var(--red)}
/* Sekundär-Button auf Hell: Rand und Text Rot, Hover Fläche Rot */
.tone-light .btn-line,.kform .btn-line,.page-body .btn-line,.light .btn-line{color:var(--red);box-shadow:inset 0 0 0 1px var(--red);background:transparent}
.tone-light .btn-line:hover,.kform .btn-line:hover,.page-body .btn-line:hover,.light .btn-line:hover{background:var(--red);color:#fff}
/* Text-Link: immer Signal-Linie darunter, im Hover rücken Text und Pfeil auseinander */
.c-more{background:var(--sig-text) left bottom/100% 2px no-repeat;padding-bottom:4px;transition:color var(--ms-dur) var(--ms-ease)}
.c-more .arr{transition:transform var(--ms-dur) var(--ms-ease)}
/* Headline-Hervorhebung: ein Wort, volles Signal-Band 0.22em, 0.09em über Unterkante */
:root[data-accent] h1 em,:root[data-accent] h2 em,:root[data-accent] .hero h1 .mk,:root[data-accent] .dark h2 em,.c-rel-head h2 em,.phero h1 .mk,.phero h1 em{background:none!important;background-image:none!important}
/* Hervorhebung in Überschriften: Marker (breites Band hinter dem Wortfuß), bewusst anders als die Signal-Linie der Text-Links */
.sw{background:var(--mk-light) 0 86%/100% .38em no-repeat!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .sw,.phero .sw,.dark .sw,.tone-dark .sw,.cta-band .sw,.c-rel-cases .sw,.bg-dark .sw,.sw.sw-d{background-image:var(--mk-dark)!important}
/* Bilder: einheitliches Licht, Fotos ohne Farbfilter (Logos, Badges, Icons ausgenommen) */
.scard-img img,.c-pix img,.post-cover img,.pl-frame img,.gallery-item img,.mosaic .card-img-top img,.c-rcard img,.team img,.pcard img,.case img,.story img,.about img,.page-body figure img,.ce-image img{filter:saturate(.85) contrast(1.03)}
/* Keine Muster-Hintergründe */
.pl-tile::before,.pl-frame::before{display:none!important}
/* Kundenlogos: farbig auf weißer Kachel, max. 30px */
.c-logos .toplogos[data-marquee] img{filter:none;opacity:1;max-height:30px;max-width:110px}
/* Breadcrumbs: Chevron-Trenner #9DA2AE, Home-Icon, Signal-Unterstrich im Hover */
.crumbs li+li::before{width:7px;height:7px;background:none;border-right:1.5px solid #9DA2AE;border-top:1.5px solid #9DA2AE;transform:rotate(45deg);margin-right:3px}
.crumbs li:first-child a{font-size:0;display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='miter'%3E%3Cpath d='M3 11 12 3l9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='miter'%3E%3Cpath d='M3 11 12 3l9 8v10h-6v-6H9v6H3z'/%3E%3C/svg%3E") center/contain no-repeat}
.crumbs a:not(:first-child):hover,.crumbs li:not(:first-child) a:hover{background:var(--sig-text) left bottom/100% 3px no-repeat;padding-bottom:3px}
/* FAQ: Plus in Rot, dreht 45° */
summary .pm::before,summary .pm::after{background:var(--red)!important;transition:transform var(--ms-dur) var(--ms-ease)!important}
details[open] summary .pm::after{transform:rotate(0)}
details.acc summary::after{color:var(--red);transition:transform var(--ms-dur) var(--ms-ease)!important}
/* Formulare: Rand #9DA2AE, Fokus 2px, Fehler mit Farbe + Klartext + 3px-Leiste, Pflichtfeld-Sternchen */
.kform input:not([type=radio]):not([type=checkbox]),.kform textarea{border-color:#9DA2AE;min-height:44px}
.kform input:focus,.kform textarea:focus{border-color:var(--ms-focus);box-shadow:0 0 0 1px var(--ms-focus)}
.kform .bad input,.kform .bad textarea{border-color:var(--ms-error);border-left:3px solid var(--ms-error);background:#fff}
.kf-e,.kf-err{color:var(--ms-error)}
.kform .field:has(input[required])>label::after{content:"*";color:inherit;margin-left:2px}
/* Back to Top */
.to-top{position:fixed;right:24px;bottom:24px;z-index:56;width:48px;height:48px;display:grid;place-items:center;background:#fff;color:var(--ink);border:1px solid #E3E5EA;border-radius:var(--r);opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity var(--ms-dur) var(--ms-ease),transform var(--ms-dur) var(--ms-ease),background-color var(--ms-dur) var(--ms-ease);cursor:pointer}
.to-top.on{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:#1D1822;color:#fff}
.to-top svg{width:20px;height:20px}
body:has(.pl-fab) .to-top{bottom:96px}
/* Responsive: Buttons unter 768px volle Breite, Verlaufsflächen nie höher als 60vh */
@media (max-width:767px){.hero-cta .btn,.phero .btn,.cta-band .btn,.kform .btn,.pl-cta .btn{width:100%;justify-content:space-between}}
.pl-tile{max-height:60vh}
@media (prefers-reduced-motion:reduce){.btn:hover,.to-top{transform:none!important}*{scroll-behavior:auto!important}}
body:has(#switch) .to-top{bottom:84px}
:root[data-accent^="g"] .tl,:root[data-accent^="g"] .tl:hover,:root[data-accent^="g"] a:hover .tl,:root[data-accent^="g"] .tl:focus-visible{background-image:var(--sig-text);background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:4px}
/* Startseiten-Hero K-02a: H1 clamp(2.25–3.75rem)/1.06 */
.hero h1{font-size:clamp(2.25rem,1.35rem + 3.4vw,3.75rem)!important;line-height:1.06}