@font-face{font-family:Montserrat;font-weight:300;src:url(fonts/montserrat-latin-300-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Montserrat;font-weight:400;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Montserrat;font-weight:600;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Montserrat;font-weight:700;src:url(fonts/montserrat-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Montserrat;font-weight:800;src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito Sans";font-weight:300;src:url(fonts/nunito-sans-latin-300-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito Sans";font-weight:400;src:url(fonts/nunito-sans-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito Sans";font-weight:600;src:url(fonts/nunito-sans-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito Sans";font-weight:700;src:url(fonts/nunito-sans-latin-700-normal.woff2) format("woff2");font-display:swap}
:root{
  --navy:#1c1c2e;--navy2:#24243a;--black:#05050a;--fg:#fff;--muted:#c3c3d4;--ink:#1c1c2e;
  --purple:#b388f0;--grad:linear-gradient(90deg,#7b2fd6,#e0407a 70%,#f0503c);
  --head:Montserrat,system-ui,sans-serif;--body:"Nunito Sans",system-ui,sans-serif;--maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--fg);font-family:var(--body);font-size:20px;line-height:1.55}
img,video{max-width:100%;display:block}
a{color:var(--purple)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
/* Header */
header.site{position:absolute;top:0;left:0;right:0;z-index:60;background:linear-gradient(rgba(5,5,10,.65),transparent)}
header.site .wrap{max-width:none;display:flex;align-items:center;justify-content:space-between;height:90px;padding:0 52px}
header.site .logo img{height:36px;width:auto}
.burger{background:none;border:0;cursor:pointer;width:44px;height:44px;padding:8px}
.burger span{display:block;height:3px;background:#fff;margin:6px 0;border-radius:2px}
.menu{position:fixed;inset:0;z-index:100;background:rgba(10,10,20,.97);display:none;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.menu.open{display:flex}
.menu a{color:#fff;text-decoration:none;font-family:var(--head);font-weight:700;font-size:1.8rem}
.menu a[aria-current]{color:var(--purple)}
.menu .x{position:absolute;top:26px;right:48px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer}
/* Typo */
h1,h2,h3{font-family:var(--head);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.2vw,4rem);font-weight:700}
h1 .l{font-weight:300}
h1 .l b{font-weight:800;background:linear-gradient(var(--grad)) 0 100%/100% 4px no-repeat;padding-bottom:6px}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
h2.bar::after,h1.bar::after{content:"";display:block;width:90px;height:4px;background:var(--grad);margin-top:18px}
.eyebrow{font-family:var(--head);color:var(--purple);text-transform:uppercase;font-weight:600;font-size:.78rem;letter-spacing:.08em;margin-bottom:.7rem}
.lead{font-size:1.15rem;color:var(--muted)}
.muted{color:var(--muted);font-size:.92rem}
.btn{display:inline-block;padding:15px 30px;border-radius:8px;background:var(--grad);color:#fff;text-decoration:none;font-family:var(--body);font-weight:600;margin:8px 12px 8px 0;border:0}
.btn.ghost{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.6)}
.btn.ghost:hover{background:#fff;color:var(--ink)}
/* Sections */
section{padding:84px 0}
section.light{background:#fff;color:var(--ink)}
section.light .lead,section.light .muted{color:#555}
section.dark{background:var(--black)}
section.center{text-align:center}
section.center h2.bar::after{margin-left:auto;margin-right:auto}
.hero{position:relative;height:100vh;min-height:560px;padding:0;display:flex;align-items:flex-end;overflow:hidden}
.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(5,5,10,.75))}
.hero .wrap{position:relative;z-index:2;padding-bottom:9vh;max-width:none;padding-left:68px;width:100%}
.hero .lead{color:#fff}
.grid{display:grid;gap:28px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{background:#fff;color:var(--ink);border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.card .body{padding:22px}
.card video,.card>img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card .plogo{height:22px;width:auto;margin-bottom:12px;filter:invert(1)}
.card a{color:#6b2fc9;font-weight:600;text-decoration:none}
.ph{aspect-ratio:16/10;background:var(--navy2)}
.logosbar{background:#000;padding:38px 0}
.logos{display:flex;flex-wrap:wrap;gap:24px 56px;align-items:center;justify-content:center}
.logos img{height:34px;width:auto;opacity:.95}
.quote{padding:6px 0 6px 26px;border-left:3px solid #7b2fd6;margin:0 0 22px}
.quote small{display:block;color:#777;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.quote cite{display:block;font-style:normal;font-weight:700;margin-bottom:6px}
.rate{display:flex;gap:56px;margin-top:20px}.rate b{font-family:var(--head);font-size:1.5rem;display:block}
.stars{color:#e3a008;letter-spacing:2px;font-size:1rem}
.rounded{border-radius:22px}
.tabs{display:flex;gap:8px;margin:24px 0 14px;flex-wrap:wrap}
.tabs button{font:600 .85rem var(--body);padding:8px 16px;border:0;border-radius:6px;background:#e9e9ef;color:#333;cursor:pointer}
.tabs button[aria-selected=true]{background:#1c1c2e;color:#fff}
.tabp{display:none}.tabp.on{display:block}
.fullvid{width:100%;max-height:78vh;object-fit:cover;aspect-ratio:16/9;background:#000}
.bgsec{background-size:cover;background-position:center;position:relative}
.bgsec::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,25,.75),rgba(10,10,25,.1))}
.bgsec .wrap{position:relative;padding-top:120px;padding-bottom:120px}
.bgsec .inner{max-width:520px}
.cardlight{background:#fff;color:var(--ink);border-radius:10px;overflow:hidden}
.cardlight .body{padding:20px 22px}
.cardlight img{aspect-ratio:16/10;object-fit:cover;width:100%}
.cardlight p{margin:.3em 0}
ul.clean{list-style:none;padding:0}ul.clean li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15)}
/* Kontakt */
.contact{padding:0;min-height:calc(100vh - 0px);display:flex;align-items:center}
.contact .split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;width:100%}
.contact video{width:100%;aspect-ratio:16/10;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.contact .txt{padding:110px 56px 80px 56px;max-width:720px}
.person{display:flex;align-items:center;gap:22px;margin:26px 0}
.person img{width:110px;height:110px;border-radius:50%;object-fit:cover}
.person b{font-family:var(--head)}
.person span{display:block;color:var(--purple);font-size:.9rem}
.contact .txt a{color:#fff;text-decoration:none}
@media(max-width:560px){.contact .split{grid-template-columns:1fr}.contact .txt{padding:40px 28px 70px}.contact video{-webkit-mask-image:none;mask-image:none}header.site .wrap{padding:0 22px}.hero .wrap{padding-left:28px}}
/* Footer */
footer.site{background:#000;padding:56px 0;color:#d4d4e0;font-size:.95rem}
footer.site .wrap{max-width:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 36px}
footer.site nav a{color:#d4d4e0;text-decoration:none;padding:0 18px;border-left:1px solid #666}
footer.site nav a:first-child{border:0}
@media(max-width:700px){footer.site .wrap{grid-template-columns:1fr;gap:16px;text-align:center}}
/* Rechtstexte */
body.legalpage{background:#fff;color:#111}
body.legalpage header.site{position:relative;background:#1c1c2e}
.legal{max-width:960px;margin:0 auto;padding:48px 28px 90px;font-size:1rem;line-height:1.6}
.legal h1{text-align:center;color:#000}
.legal h2{font-size:1.4rem}.legal h3{font-size:1.05rem;margin-top:1.4em;font-family:var(--body)}
.legal a{color:#6b2fc9}
dialog{background:#000;border:0;border-radius:10px;padding:0;max-width:min(980px,94vw);width:100%}
dialog::backdrop{background:rgba(0,0,0,.85)}
dialog video{width:100%}
dialog .close{position:absolute;right:10px;top:10px;z-index:2;background:#000a;color:#fff;border:0;border-radius:50%;width:38px;height:38px;font-size:18px;cursor:pointer}
/* ---- Korrekturen v4: Größen skalieren wie im Original, feste Spalten, Striche ---- */
body{font-size:clamp(14px,calc(9px + .8vw),20px);line-height:1.6}
h1{font-size:clamp(22px,4.9vw,64px);line-height:1.15}
h2{font-size:clamp(18px,calc(10px + 1.8vw),40px);line-height:1.2}
h3{font-size:clamp(14px,calc(9px + .6vw),20px)}
.lead{font-size:clamp(14px,calc(9px + 1vw),24px)}
.eyebrow{font-size:clamp(9px,calc(6px + .45vw),13px)}
.btn{font-size:clamp(12px,calc(8px + .5vw),17px);padding:.9em 1.8em}
.muted{font-size:clamp(11px,calc(8px + .4vw),15px)}
h1 .l b{background:var(--grad) 0 100%/100% .09em no-repeat;padding-bottom:.12em}
h2::after,h1.bar::after{content:"";display:block;width:clamp(40px,7vw,90px);height:clamp(2px,.3vw,4px);background:var(--grad);margin-top:.5em}
.center h2::after{margin-left:auto;margin-right:auto}
.legal h2::after,.legal h1::after{display:none}
section{padding:clamp(32px,6vw,84px) 0}
.wrap{padding:0 clamp(16px,3vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.grid{gap:clamp(10px,2vw,28px)}
.card .body{padding:clamp(10px,1.8vw,22px)}
.cardlight .body{padding:clamp(8px,1.6vw,22px)}
/* Referenzkarten wie im Original: dunkel, Link als Button */
#referenzen .card{background:transparent;color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.12)}
#referenzen .card .plogo{filter:none}
#referenzen .card a{display:inline-block;border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:6px;padding:.5em 1em;font-size:clamp(10px,calc(7px + .4vw),15px)}
#referenzen .card p{color:var(--muted)}
header.site .wrap{height:clamp(56px,7vw,90px);padding:0 clamp(16px,3.5vw,52px)}
header.site .logo img{height:clamp(22px,2.6vw,36px)}
.hero .wrap{padding-left:clamp(20px,4.8vw,68px);padding-bottom:7vh}
.contact .split{grid-template-columns:1fr 1fr}
.contact .txt{padding:clamp(70px,8vw,110px) clamp(16px,4vw,56px) clamp(30px,5vw,80px)}
.person img{width:clamp(56px,8vw,110px);height:clamp(56px,8vw,110px)}
.legal{font-size:clamp(14px,calc(9px + .5vw),17px)}
.bgsec .wrap{padding-top:clamp(50px,9vw,120px);padding-bottom:clamp(50px,9vw,120px)}
.logos img{height:clamp(16px,2.6vw,34px)}.logos{gap:14px clamp(18px,4vw,56px)}
.logosbar{padding:clamp(18px,3vw,38px) 0}
.quote{padding-left:clamp(10px,2vw,26px)}
@media(max-width:560px){.contact .split{grid-template-columns:1fr}.contact .txt{padding:30px 20px 60px}footer.site .wrap{grid-template-columns:1fr}}
/* ---- v5: Größen langsamer skalieren, Spalten nur ab Tablet, Kontakt-Feinschliff ---- */
body{font-size:clamp(14px,calc(12.2px + .3vw),19px)}
h1{font-size:clamp(22px,calc(17.6px + 1.22vw),46px)}
h2{font-size:clamp(18px,calc(14.5px + .97vw),36px)}
h3{font-size:clamp(14px,calc(12px + .4vw),20px)}
.lead{font-size:clamp(14px,calc(12.4px + .35vw),20px)}
.person b{font-size:clamp(14px,calc(11px + .6vw),22px)}
.person span{font-size:clamp(11px,calc(9px + .4vw),16px)}
.contact .txt p{font-size:clamp(14px,calc(11px + .6vw),22px)}
@media(max-width:768px){
  .g2,.g3{grid-template-columns:1fr}
  .contact .split{grid-template-columns:1fr}
  .contact video{-webkit-mask-image:none;mask-image:none}
  footer.site .wrap{grid-template-columns:1fr;gap:14px;text-align:center}
  .hero .wrap{padding-left:20px}
}
/* ---- v6 ---- */
header.site .logo img{height:clamp(18px,2vw,28px);width:auto}
#referenzen .flush{gap:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
#referenzen .flush .card{border-radius:0;border:0;box-shadow:none;background:transparent}
#referenzen .flush .card>video{aspect-ratio:16/10}
.greysec{background:#ececf1;color:var(--ink)}
.greysec .muted{color:#666}
.carousel{display:flex;align-items:center;gap:clamp(6px,1.5vw,20px);margin-top:28px}
.carousel .slides{flex:1}
.slide{display:none}.slide.on{display:block}
.car-btn{flex:none;width:clamp(30px,3.4vw,46px);height:clamp(30px,3.4vw,46px);border-radius:50%;border:1px solid #b5b5c4;background:#fff;color:#1c1c2e;font-size:clamp(18px,2vw,26px);cursor:pointer;line-height:1}
.car-btn:hover{background:#1c1c2e;color:#fff}
.vside{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0;background:#000}
.greysec .quote{border-left:0;padding-left:0}
/* ---- v7 ---- */
.softedge{width:100%;aspect-ratio:16/10;object-fit:cover;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
figure{position:relative}
.refcap{position:absolute;left:clamp(8px,1.4vw,20px);bottom:clamp(8px,1.4vw,20px);background:rgba(12,12,28,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:clamp(6px,1vw,14px) clamp(10px,1.6vw,22px) clamp(8px,1.2vw,16px);border-radius:0;font-family:var(--head);font-weight:700;font-size:clamp(11px,calc(8px + .55vw),18px);color:#fff}
.refcap::after{content:"";display:block;width:clamp(26px,3.6vw,52px);height:clamp(2px,.25vw,3px);background:var(--grad);margin-top:.4em}
.sq{aspect-ratio:1/1;overflow:hidden}
.sq img{width:100%;height:100%;object-fit:cover}
.hero h1.bar{font-size:clamp(20px,calc(14px + 1vw),36px)}
.hero .eyebrow{font-size:clamp(8px,calc(5.5px + .35vw),11px)}
.contact video{-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(90deg,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(90deg,#000 80%,transparent);mask-composite:intersect}
@media(max-width:768px){
  .sq{aspect-ratio:2/1}
  .softedge,.contact video{-webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
}
/* ---- v8: Kontakt-Werte aus dem Original, kleineres Burger-Menü ---- */
.person b{font-size:clamp(10px,calc(5.5px + .7vw),18px);line-height:2.3}
.person span{font-size:clamp(9px,calc(5.7px + .49vw),14px);color:#b892ff;line-height:2.6}
.contact .txt p{font-size:clamp(14px,calc(11.5px + .45vw),19px);line-height:1.6}
.contact .txt a{color:#fff}
.burger{width:32px;height:32px;padding:5px}
.burger span{height:2px;margin:5px 0;border-radius:0}
.menu{gap:clamp(10px,1.8vw,18px)}
.menu a{font-weight:300;font-size:clamp(18px,calc(14px + 1vw),28px);letter-spacing:.02em}
.menu .x{font-weight:300;font-size:1.5rem;top:18px;right:clamp(16px,3.5vw,52px)}
/* ---- v11 ---- */
header.site{position:fixed;background:rgba(20,20,40,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.legalpage header.site{background:#1c1c2e}
.legal{padding-top:clamp(90px,10vw,130px)}
.contact .txt a.li{color:#b892ff}
h1{font-weight:800}
h2::after,h1.bar::after{height:clamp(1.5px,.16vw,2.5px)}
/* Hero Start: Mitte rechts; EXPOSCREEN: Mitte */
.hero.heroR,.hero.heroC{align-items:center}
.hero.heroR .wrap,.hero.heroC .wrap{padding-bottom:0}
.heroR .hbox{margin-left:auto;max-width:min(600px,55%);padding-right:clamp(0px,3vw,48px)}
@media(max-width:768px){.heroR .hbox{max-width:100%;margin-left:0}}
/* Referenzen: mehr Innenabstand, mittlere Spalte abgesetzt */
#referenzen .flush .card .body{padding:clamp(14px,2.6vw,36px)}
#referenzen .flush .card:nth-child(2){background:rgba(255,255,255,.06)}
/* Logos */
.logosbar{background:transparent}
.logos img{height:clamp(22px,3.6vw,46px)}
.logosbar{padding:clamp(20px,3.5vw,48px) 0}
/* Karussell nur Text */
.carousel .slides .quote{margin:0}
/* bündige Medienspalten */
.flushsec{padding:0}
.flushgrid{gap:0;align-items:stretch}
.flushgrid>.tx{padding:clamp(24px,5vw,80px);align-self:center}
.flushgrid>video,.flushgrid>img{width:100%;height:100%;min-height:240px;object-fit:cover;aspect-ratio:auto;border-radius:0}
.softedge-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.softedge-l{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 84%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
@media(max-width:768px){.flushgrid>video,.flushgrid>img{min-height:0;aspect-ratio:16/10;height:auto}}
/* Einsatzmodelle breiter */
.wrap.wide{max-width:none;padding:0 clamp(12px,3vw,48px)}
.wrap.wide .grid{gap:clamp(8px,1.2vw,18px)}
.center h2::after{margin-left:auto;margin-right:auto}
/* ---- v12 ---- */
header.site{background:linear-gradient(rgba(5,5,10,.55),transparent);-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .25s}
header.site.scrolled{background:rgba(20,20,40,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.legalpage header.site{background:#1c1c2e}
.heroR .hbox{margin-left:0;max-width:min(720px,62%);padding-right:0}
@media(max-width:768px){.heroR .hbox{max-width:100%}}
h2.bar::after,h1.bar::after,h2::after{height:clamp(1.5px,.16vw,2.5px)}
.btn{transition:filter .2s,transform .2s,box-shadow .2s}
.btn:hover{filter:brightness(1.18) saturate(1.1);transform:translateY(-1px);box-shadow:0 6px 18px rgba(224,64,122,.35)}
.btn.ghost:hover{filter:none;box-shadow:none}
.logosbar{background:#2d2d48}
.car-btn{background:transparent;border:0;color:#1c1c2e;font-size:clamp(26px,3vw,40px);width:clamp(30px,3.4vw,46px)}
.car-btn:hover{background:transparent;color:#7b2fd6}
.greysec .rate,.greysec h3{margin-left:calc(clamp(30px,3.4vw,46px) + clamp(6px,1.5vw,20px))}
.cardlight h3::after{content:"";display:block;width:clamp(26px,3.6vw,52px);height:clamp(1.5px,.16vw,2.5px);background:var(--grad);margin-top:.45em}
.cardlight .muted{font-style:italic}
.tint{background:#262642}
.hero .eyebrow{font-size:clamp(9px,calc(6px + .45vw),13px)}
/* ---- v13 ---- */
#referenzen .card a{transition:background .2s,color .2s,border-color .2s}
#referenzen .card a:hover{background:var(--grad);border-color:transparent;color:#fff;filter:brightness(1.1)}