/* kiwebsites.com — Relaunch 2027 · Basis: Tokens, Layout, Navigation, Hero, Typografie, gemeinsame Bausteine */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{
  --bg:#050507;--bg2:#0a0a0f;--bg3:#12121a;--fg:#f6f4f0;--mut:#a3a1ab;--dim:#85848f;
  --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.17);
  --red:#ff2a3d;--red2:#ff6a5c;--red-d:#c71a2b;--glow:rgba(255,42,61,.28);--ok:#35e08a;
  --glass:rgba(12,12,18,.82);
  --f:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --m:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
  --r:26px;--w:1360px;--pad:clamp(1.25rem,4.4vw,4rem);--ease:cubic-bezier(.16,1,.3,1);--ease2:cubic-bezier(.65,0,.35,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--f);color:var(--fg);background:transparent;line-height:1.6;font-size:clamp(1.02rem,.96rem + .3vw,1.2rem);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;position:relative}
body::before{content:"";position:fixed;inset:0;z-index:-3;background:radial-gradient(50% 40% at 90% 0%,rgba(255,42,61,.16),transparent 70%),var(--bg);-webkit-mask:none}
.hxc{position:absolute;inset:4.6rem 0 0 0;width:100%;height:calc(100% - 4.6rem);z-index:-2;opacity:0;transition:opacity 1.4s ease}
.hxc.on{opacity:1}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:8px}
::selection{background:var(--red);color:#fff}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:200}
.skip:focus{left:8px}
.wrap{width:min(100% - var(--pad)*2,var(--w));margin-inline:auto}
.sec{padding-block:clamp(3rem,7vw,6.25rem);position:relative}
.sec--dim::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent,rgba(5,5,7,.62) 16%,rgba(5,5,7,.62) 84%,transparent);pointer-events:none}

/* ---------- Szene + Oberflächen-Overlays ---------- */
.scene.on{opacity:1}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Typografie ---------- */
/* Eyebrow: fette Schrift, rote Markerfläche wird beim Einblenden einmal hineingewischt */
.eyebrow{display:inline-block;font:680 1.04rem/1.2 var(--f);letter-spacing:-.005em;color:#fff;padding:.16em .55em .12em;margin-left:-.55em;background:linear-gradient(102deg,transparent 0 2%,rgba(255,42,61,.62) 2% 98%,transparent 98%) 0 80%/0% 52% no-repeat;transition:background-size 1.1s var(--ease) .15s}
.eyebrow.in,.in .eyebrow,html:not(.js) .eyebrow{background-size:100% 52%}
.head--c .eyebrow,.cta .eyebrow{margin-left:0}

h1,h2,h3{font-weight:690;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.h2{font-size:clamp(2.6rem,6.6vw,6.8rem);margin-top:1.4rem;letter-spacing:-.035em;line-height:1}
.h3{font-size:clamp(1.3rem,2.1vw,1.75rem);letter-spacing:-.025em;line-height:1.15}
.lead{color:var(--mut);font-size:clamp(1.1rem,1vw + .85rem,1.45rem);max-width:58ch;margin-top:1.8rem;text-wrap:pretty;line-height:1.55}
.acc{background:linear-gradient(100deg,var(--red) 0%,#ff4a50 38%,#ff7a62 70%,var(--red) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 9s ease-in-out infinite alternate}
.acc .wi{background:linear-gradient(100deg,var(--red) 0%,#ff4a50 38%,#ff7a62 70%,var(--red) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 9s ease-in-out infinite alternate}
@keyframes shim{to{background-position:100% 0}}
.head{margin-bottom:clamp(3.2rem,7vw,6rem)}
.head--c{text-align:center}.head--c .lead{margin-inline:auto}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .14em .14em .06em;margin:-.04em -.14em -.14em -.06em}
.wi{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:0 100%;filter:blur(6px);transition:transform 1.1s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.in .wi,.in.wi{transform:none;filter:none}
html:not(.js) .wi{transform:none;filter:none}

/* ---------- Buttons ---------- */
.btn{--h:3.6rem;display:inline-flex;align-items:center;gap:1rem;height:var(--h);padding:0 .5rem 0 1.9rem;border-radius:99px;background:var(--red);color:#fff;font-weight:620;letter-spacing:-.01em;position:relative;isolation:isolate;overflow:hidden;border:0;box-shadow:0 14px 50px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.35);transition:box-shadow .5s var(--ease),background .4s;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease);z-index:-1}
.btn:hover{box-shadow:0 22px 60px -10px rgba(255,42,61,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn:hover::before{transform:translateX(120%)}
.btn i{display:grid;place-items:center;width:calc(var(--h) - 1rem);height:calc(var(--h) - 1rem);border-radius:50%;background:#fff;color:var(--red);font-style:normal;font-size:1.1rem;transition:transform .6s var(--ease)}
.btn:hover i{transform:rotate(-45deg)}
.btn--ghost{background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2);color:var(--fg);}
.btn--ghost i{background:var(--fg);color:var(--bg)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--fg)}

/* ---------- Navigation: Leiste mit Rollen-Links, Schieber und Licht-Button ---------- */
.btn--ghost{-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.nav{position:fixed;inset:0 0 auto;z-index:70}
.nav__bar{display:flex;align-items:center;gap:2rem;padding:.9rem max(1.6rem,calc((100% - 1180px)/2));border-bottom:1px solid var(--line);background:rgba(7,7,11,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.logo{display:flex;align-items:center;gap:.7rem;font:740 .98rem/1 var(--f);letter-spacing:.16em}
.logo img{display:block;width:32px;height:32px}
.foot .logo{gap:1rem;font-size:1.15rem;margin-bottom:.4rem}.foot .logo img{width:64px;height:64px}
.nav__links{flex:1;display:flex;align-items:center;position:relative}
.nav__mid{position:relative;display:flex;align-items:center;gap:2rem;margin:0 auto}
.nav__mid>a,.dd>a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 0;font-size:.94rem;color:var(--mut);transition:color .25s}
.nav__mid>a:hover,.dd:hover>a,.dd:focus-within>a{color:var(--fg)}
.rl{display:inline-block;overflow:hidden;height:1.35em;line-height:1.35}
.rl>span{display:block;position:relative;transition:transform .5s var(--ease)}
.rl>span::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--fg)}
.nav__mid a:hover .rl>span,.dd:focus-within>a .rl>span{transform:translateY(-100%)}
.dd>a svg{transition:transform .35s var(--ease)}.dd:hover>a svg,.dd:focus-within>a svg{transform:rotate(180deg)}
.nav__pill{position:absolute;left:0;bottom:-9px;width:0;height:2px;border-radius:2px;background:var(--red);box-shadow:0 0 10px var(--red);opacity:0;transition:transform .45s var(--ease),width .45s var(--ease),opacity .25s;pointer-events:none}
.nav__cta{display:inline-flex;align-items:center;gap:.6rem;padding:.64rem 1.25rem;border-radius:10px;font-size:.94rem;font-weight:640;color:var(--fg);background:linear-gradient(#0b0b10,#0b0b10) padding-box,conic-gradient(from var(--ang),transparent 0 62%,var(--red) 82%,#fff 90%,transparent 96%) border-box;border:1.5px solid transparent;animation:navspin 3.6s linear infinite;transition:background .3s}
.nav__cta i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.nav__cta:hover{background:linear-gradient(var(--red),var(--red)) padding-box,var(--red) border-box;animation-play-state:paused}
.nav__cta:hover i{transform:translateX(4px)}
@keyframes navspin{to{--ang:360deg}}
@media (prefers-reduced-motion:reduce){.nav__cta{animation:none}}
.dd{position:relative}
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.dd__menu{position:absolute;top:calc(100% + 12px);left:-.9rem;min-width:260px;padding:.55rem;border-radius:20px;background:rgba(10,10,15,.97);border:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transition:.4s var(--ease);box-shadow:0 40px 80px -20px #000}
.dd:hover .dd__menu,.dd:focus-within .dd__menu{opacity:1;visibility:visible;transform:none}
.dd__menu a{display:block;padding:.8rem 1rem;border-radius:13px;color:var(--mut);font-size:.95rem;transition:.25s}
.dd__menu a:hover{background:rgba(255,255,255,.07);color:var(--fg);padding-left:1.3rem}
.nav__tg{display:none;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.08);position:relative}
.nav__tg i{position:absolute;left:14px;right:14px;height:2px;background:var(--fg);border-radius:2px;transition:.5s var(--ease)}
.nav__tg i:nth-child(1){top:18px}.nav__tg i:nth-child(2){top:26px}
.nav.open .nav__tg i:nth-child(1){top:22px;transform:rotate(45deg)}.nav.open .nav__tg i:nth-child(2){top:22px;transform:rotate(-45deg)}
@media (max-width:960px){
  .nav__tg{display:block;margin-left:auto}
  .nav__bar{padding:.7rem var(--pad);-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(7,7,11,.92)}
  .nav__links{position:fixed;inset:0;z-index:-1;flex-direction:column;align-items:stretch;justify-content:center;padding:6rem var(--pad) 2rem;background:rgba(5,5,7,.98);clip-path:circle(0 at calc(100% - 40px) 40px);transition:clip-path .8s var(--ease);pointer-events:auto}
  .nav.open .nav__links{clip-path:circle(150% at calc(100% - 40px) 40px)}
  .nav__mid{flex-direction:column;align-items:stretch;gap:.2rem;margin:0}
  .nav__mid>a,.dd>a{font-size:clamp(1.7rem,7vw,2.4rem);color:var(--fg);padding:.7rem 1rem;letter-spacing:-.03em;font-weight:620}
  .rl{overflow:visible;height:auto}.rl>span::after{display:none}
  .nav__mid a:hover .rl>span,.dd:focus-within>a .rl>span{transform:none}
  .dd::after{display:none}.dd>a svg{display:none}
  .dd__menu{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0 0 .6rem 1rem}
  .dd__menu a{font-size:1.1rem}
  .nav__cta{margin:1.2rem 0 0;justify-content:center;font-size:1.25rem}
  .nav__pill{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding:clamp(5.6rem,9.5svh,7.4rem) 0 clamp(2rem,5svh,3.2rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,5,7,.88) 0%,rgba(5,5,7,.66) 34%,rgba(5,5,7,.18) 62%,transparent 80%),linear-gradient(0deg,rgba(5,5,7,.9),transparent 26%);pointer-events:none}
.hero__in{display:grid;gap:clamp(1.1rem,2.4svh,2rem);max-width:min(100%,60rem);justify-items:start}
.hero h1{font-size:clamp(2.8rem,min(6.3vw,10.6svh),7.6rem);line-height:.96;letter-spacing:-.04em;font-weight:700;text-shadow:0 2px 40px rgba(5,5,7,.55)}
.hero h1 .acc{display:block;padding-bottom:.1em}
.hero__sub{font-size:clamp(1.12rem,.9vw + .95rem,1.5rem);color:#d6d4db;max-width:50ch;text-wrap:pretty;line-height:1.5;text-shadow:0 1px 24px rgba(5,5,7,.8)}
.hero__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.4rem;padding-top:clamp(1rem,2.2svh,1.6rem);margin-top:0;border-top:1px solid var(--line)}
.trust__g{display:flex;align-items:center;gap:.9rem}
.avs{display:flex}
.avs i{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;font:700 .85rem/1 var(--f);font-style:normal;color:var(--fg);background:#24242c;border:2px solid var(--bg);margin-left:-.65rem}
.avs i:first-child{margin-left:0}
.trust b{display:block;font-size:1.05rem;letter-spacing:-.02em;line-height:1.2}
.trust span{display:block;font-size:.84rem;color:var(--mut);line-height:1.3}
.trust .stars{color:#ffbf3d;font-size:1.7rem;letter-spacing:.06em;line-height:1;margin-bottom:.35rem;text-shadow:0 0 14px rgba(255,191,61,.35)}
.trust__g small{display:block;font-size:.84rem;color:var(--mut);line-height:1.3;margin-top:.1rem}
.stars{color:#ffbf3d;letter-spacing:.1em;font-size:.95rem;line-height:1}
.trust__n{display:flex;align-items:center;gap:.6rem}
.trust__n strong{font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.05em;font-weight:720;line-height:1}
.trust__sep{width:1px;height:2.4rem;background:var(--line2)}
@media (max-width:760px){.trust__sep{display:none}}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero--mini{min-height:min(86svh,820px);padding-top:clamp(7rem,14svh,10rem)}
.hero--mini h1{font-size:clamp(2.7rem,min(6.4vw,11svh),7rem);max-width:15ch}
.hero--mini::before{background:linear-gradient(90deg,rgba(5,5,7,.86) 0%,rgba(5,5,7,.6) 40%,rgba(5,5,7,.1) 72%,transparent),linear-gradient(0deg,rgba(5,5,7,.95),transparent 30%)}

/* ---------- Referenzen-Marquee ---------- */
@keyframes roll{to{transform:translateX(-50%)}}
.js [data-live]:not(.live) .rowm{animation-play-state:paused}

/* ---------- Glas + Karten ---------- */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);}
.card{--mx:50%;--my:0%;--rx:0deg;--ry:0deg;position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(1.6rem,2.8vw,2.6rem);background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),var(--glass);border:1px solid var(--line);transition:border-color .5s,transform .5s var(--ease);display:flex;flex-direction:column;gap:1rem}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,42,61,.2),transparent 62%);opacity:0;transition:opacity .5s;pointer-events:none}
.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:radial-gradient(300px circle at var(--mx) var(--my),rgba(255,106,92,.9),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;pointer-events:none}
.card:hover::before,.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.card .n{font:500 .76rem/1 var(--m);color:var(--red);letter-spacing:.16em}
.card p{color:var(--mut);font-size:1rem;text-wrap:pretty}
.card .more{margin-top:auto;padding-top:.8rem;font-weight:620;font-size:.95rem;color:var(--fg);display:inline-flex;gap:.6rem;align-items:center}
.card .more::after{content:"→";transition:transform .5s var(--ease)}
.card:hover .more::after{transform:translateX(6px)}
.card--feat{background:radial-gradient(90% 120% at 100% 0%,rgba(255,42,61,.22),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012)),var(--glass)}
.card--feat .h3{font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:-.045em}
.grid{display:grid;gap:clamp(.9rem,1.8vw,1.4rem)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- Reveal ---------- */
.js .rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0)*100ms)}
.js .rv.in{opacity:1;transform:none}
.js .card.rv.in{transition:opacity 1.1s var(--ease),transform .5s var(--ease),border-color .5s;transition-delay:calc(var(--d,0)*100ms),0s,0s}

/* ---------- Footer ---------- */
.foot{position:relative;border-top:1px solid var(--line);padding:clamp(4rem,8vw,7rem) 0 1.8rem;overflow:hidden;background:linear-gradient(180deg,rgba(5,5,7,.55),var(--bg) 70%);}
.foot__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}
.foot p{color:var(--mut);font-size:.98rem;max-width:36ch;margin-top:1.2rem}
.foot .foot__h{display:block;font:500 .76rem/1 var(--m);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:1.2rem}
.foot nav{display:grid;gap:.1rem}
.foot nav a{color:var(--mut);padding:.45rem 0;transition:color .3s,transform .5s var(--ease);width:fit-content}
.foot nav a:hover{color:var(--fg);transform:translateX(6px)}
.foot p a{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.foot .wrap{position:relative;z-index:1}
.fnet{position:absolute;inset:auto 0 0 0;width:100%;height:15rem;display:block;pointer-events:none;opacity:0;transition:opacity 2.2s ease;-webkit-mask:linear-gradient(180deg,transparent,#000 60%);mask:linear-gradient(180deg,transparent,#000 60%)}
.fnet.on{opacity:1}
.foot__b{padding-top:clamp(5rem,10vw,7rem);text-shadow:0 0 12px var(--bg),0 0 4px var(--bg);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font:500 .74rem/1.4 var(--m);letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
@media (max-width:760px){.foot__g{grid-template-columns:1fr 1fr}.foot__g>:first-child{grid-column:1/-1}}

/* ---------- Legal ---------- */
.legal-page{padding:clamp(8rem,16vw,12rem) 0 6rem}
.legal-page .container{width:min(100% - var(--pad)*2,860px);margin-inline:auto}
.legal-header{margin-bottom:3.5rem}
.legal-header__title{font-size:clamp(3rem,9vw,7rem);letter-spacing:-.06em;line-height:.95}
.legal-header__subtitle{color:var(--mut);margin-top:1rem;font-size:1.2rem}
.legal-section{padding:2.4rem 0;border-top:1px solid var(--line)}
.legal-section__title{font-size:clamp(1.5rem,2.8vw,2.2rem);margin-bottom:1.1rem;letter-spacing:-.035em}
.legal-section__subtitle{font-size:1.25rem;margin:1.8rem 0 .6rem;letter-spacing:-.02em}
.legal-section__sub-subtitle{font-size:1.05rem;margin:1.3rem 0 .4rem;color:#d6d4db}
.legal-page p,.legal-page li{color:var(--mut);margin-bottom:.85rem;text-wrap:pretty}
.legal-page ul{padding-left:1.2rem;margin-bottom:1rem}
.legal-page a{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.legal-page strong{color:var(--fg)}
.legal-contact{padding:1.4rem 1.7rem;border-radius:20px;background:var(--glass);border:1px solid var(--line);margin-bottom:1rem}
.legal-contact p{margin:.25rem 0}
.legal-back{display:inline-block;margin-top:2rem;color:var(--red2)!important;text-decoration:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}.wi{transform:none;filter:none}
}

/* Mobil: 3D-Szene bekommt einen eigenen Bereich über dem Text */
@media (max-width:760px){
  .hero{align-items:flex-start;padding-top:calc(clamp(15rem,50svh,26rem) + 3.4rem)}
  .hxc{inset:4.6rem 0 auto 0;height:clamp(15rem,50svh,26rem)}
  .hero::before{background:linear-gradient(0deg,rgba(5,5,7,.9),transparent 22%)}
  .hero--mini{min-height:0;padding-top:calc(clamp(13rem,40svh,20rem) + 3.4rem)}
  .hero--mini .hxc{height:clamp(13rem,40svh,20rem)}
  .hero .eyebrow{font-size:.9rem}
}