*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#03090e;color:#eef5fa;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;background:rgba(3,9,14,.94);backdrop-filter:blur(14px);z-index:20;border-bottom:1px solid #173044}.brand{display:flex;align-items:center;gap:14px;font-size:25px;letter-spacing:3px}.brand small{display:block;font-size:8px;letter-spacing:3px;color:#c8d2d8}.mark{display:grid;place-items:center;width:50px;height:50px;background:linear-gradient(135deg,#56ccff,#dce9ef 52%,#2386ff 53%,#2858aa);clip-path:polygon(20% 0,100% 0,65% 35%,88% 35%,28% 100%,0 64%);font-weight:900;color:#07121a}nav{display:flex;gap:25px;align-items:center;font-size:13px}nav button,.filters button{background:none;border:1px solid #274357;color:#dce9f2;padding:10px 14px;cursor:pointer}.hero{min-height:65vh;display:flex;align-items:center;padding:7%;background:linear-gradient(90deg,rgba(2,8,13,.95),rgba(2,8,13,.25)),url('/medien/facium-shop-hero-clean.jpg') center/cover}.hero>div{max-width:780px}.eyebrow,.cat{color:#59baff;letter-spacing:.18em;font-size:12px;text-transform:uppercase}.hero h1{font-size:clamp(42px,7vw,86px);line-height:.98;margin:.2em 0}.hero p{font-size:18px;line-height:1.65;color:#c3d0d9;max-width:650px}.primary,.btn{display:inline-block;background:#087cf0;border:0;color:white;padding:15px 22px;cursor:pointer;font-weight:bold}.filters{display:flex;gap:10px;flex-wrap:wrap;padding:50px 5% 20px}.filters .active{background:#087cf0;border-color:#087cf0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:20px 5% 80px}.product{border:1px solid #183247;background:#07121c;overflow:hidden;transition:.25s}.product:hover{transform:translateY(-5px)}.product img{width:100%;height:270px;object-fit:cover}.product-body{padding:24px}.product h2{font-size:28px;margin:.25em 0}.product p{color:#aebfca;min-height:50px;line-height:1.5}.status{font-size:12px;color:#8fb3c9;margin:18px 0;border-top:1px solid #183247;padding-top:15px}.service{padding:80px 6%;background:#06111a}.service h2{font-size:clamp(32px,5vw,60px);margin:.2em 0 1em}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service-grid>div{border-top:1px solid #2a526b;padding-top:25px}.service-grid b{color:#5cc0ff;font-size:30px}.service-grid p{color:#aebfca}.legalnote{margin:0;padding:30px 6%;background:#0b1720;color:#aebfca;font-size:13px;line-height:1.6}.drawer{position:fixed;right:-520px;top:0;width:min(500px,92vw);height:100vh;background:#07121c;z-index:40;padding:25px;transition:.3s;overflow:auto;border-left:1px solid #24435a}.drawer.open{right:0}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head button{font-size:30px;background:none;border:0;color:white;cursor:pointer}.overlay{position:fixed;inset:0;background:#0009;z-index:30;display:none}.overlay.open{display:block}.cart-item{padding:15px 0;border-bottom:1px solid #193247;display:flex;justify-content:space-between}.cart-item button{background:none;border:0;color:#7ecbff;cursor:pointer}form{display:grid;gap:12px;margin-top:35px}input,textarea{width:100%;padding:14px;background:#0c1b27;border:1px solid #25445a;color:white}textarea{min-height:110px}footer{padding:30px 5%;display:flex;gap:14px;flex-wrap:wrap;color:#8fa6b8;border-top:1px solid #173044}@media(max-width:900px){nav a{display:none}.grid{grid-template-columns:1fr 1fr}.service-grid{grid-template-columns:1fr}.hero{min-height:72vh}}@media(max-width:620px){.grid{grid-template-columns:1fr}.product img{height:240px}.hero{padding:12% 6%}.hero h1{font-size:46px}}
.price{font-size:24px;font-weight:700;margin:18px 0;color:#f4f9fc}.price small{display:block;font-size:10px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#78bce8;margin-top:5px}
.reg{font-size:10px;line-height:1.45;color:#9eb0bc;border-left:2px solid #288ed0;padding-left:10px;margin:12px 0 18px}


.back-home{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid #2b536d;color:#dff2ff!important;font-weight:700;letter-spacing:.04em}
.back-home:hover{background:#087cf0;border-color:#087cf0;color:#fff!important}


/* FACIUM Logo Animation – Header */
header > .brand .mark{
  transform-origin:50% 50%;
  will-change:transform,filter,color;
  animation:faciumLogoMotion 8s cubic-bezier(.4,0,.2,1) infinite,faciumFColor 8s linear infinite;
}
header > .brand .mark:hover{animation-duration:2.6s,2.6s}
@keyframes faciumLogoMotion{
  0%,68%,100%{transform:perspective(500px) rotateY(0deg) rotateZ(0deg);filter:drop-shadow(0 0 0 rgba(65,191,255,0))}
  78%{transform:perspective(500px) rotateY(180deg) rotateZ(4deg);filter:drop-shadow(0 0 8px rgba(65,191,255,.45))}
  88%{transform:perspective(500px) rotateY(360deg) rotateZ(0deg);filter:drop-shadow(0 0 12px rgba(37,215,223,.5))}
}
@keyframes faciumFColor{
  0%,68%,100%{color:#07121a}
  76%{color:#ffffff}
  82%{color:#25d7df}
  88%{color:#ffffff}
}
@media (prefers-reduced-motion:reduce){header > .brand .mark{animation:none}}