.at-symbol:after{content:"@"}:where(.product-graphics){grid-column:grid}.product-graphics{opacity:1;--pos-h-align:left;--grid-h-align:start;--flex-h-align:flex-start;--font-color:red;--border-color:#00f;--content-background:#ff0;--transform-origin:center center;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;position:relative}.product-graphics>.text{font-weight:700;opacity:0}.product-graphics canvas{position:absolute;inset:0;pointer-events:none}.product-graphics-item{z-index:1;--item-font-size:1.4rem;list-style:none;display:grid;grid-template-columns:auto;grid-template-rows:auto;align-items:start;justify-items:var(--grid-h-align);position:absolute;width:100%;max-width:min(34%,520px);opacity:0}.product-graphics-item__debug{position:absolute;top:0;left:0;font-size:10px;font-family:Consolas,sans-serif;color:#ff0;z-index:123123123;background:rgba(0,0,0,.2)}.product-graphics-item__trigger{grid-row:1;grid-column:1;border-radius:9999px;background:#000;cursor:pointer;transition:border-color .25s ease-in-out,filter .25s ease,opacity .25s ease,transform .25s ease;width:-webkit-max-content;width:-moz-max-content;width:max-content;display:flex;justify-content:center;align-items:center;position:relative;gap:12px;padding:16px 20px 16px 24px;transform-origin:var(--pos-h-align) top}.product-graphics-item__trigger .headline{--font-size:var(--item-font-size);color:var(--font-color);-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;text-align:var(--pos-h-align);min-width:4ch}.product-graphics-item__trigger .icon{--icon-size:var(--icon-size-s)}.product-graphics-item__details{display:block;box-sizing:border-box;height:0;overflow:hidden;opacity:0;pointer-events:none;transform:scale(var(--details-scale-start,1));grid-row:1;grid-column:1;background:var(--content-background);padding-block:0;padding-inline:40px;border-radius:32px;position:relative;z-index:100;transform-origin:var(--transform-origin);width:minmax(-webkit-min-content,calc(var(--scene-width, 1200px)*0.3));width:minmax(-moz-min-content,calc(var(--scene-width, 1200px)*0.3));width:minmax(min-content,calc(var(--scene-width, 1200px)*0.3));max-width:calc(var(--scene-width, 1200px)*0.3);min-width:100%}.product-graphics-item__details__close{position:absolute;right:40px;top:calc(32px + (var(--h-size-s) - var(--icon-size-m))/2);cursor:pointer;transition:transform .15s ease}.product-graphics-item__details .headline{padding-right:40px}.product-graphics-item__details .icon{--icon-size:1.2rem}.product-graphics-item__details .text{color:var(--cs__primary__fg--secondary);-webkit-hyphens:manual;-ms-hyphens:manual;hyphens:manual;text-wrap-style:pretty}.product-graphics-item__details__content{--pos-h-align:left;--grid-h-align:start;--flex-h-align:flex-start}.product-graphics-item.open{z-index:1000}.product-graphics-item.open .product-graphics-item__details{opacity:1;pointer-events:auto;transform:scale(1);padding-block:32px}.product-graphics-item.open .product-graphics-item__trigger{border-radius:32px;opacity:0}.product-graphics-item.is-opening .product-graphics-item__details{will-change:height,transform,opacity,filter,padding-block;-webkit-animation:product-graphics-details-open .425s ease forwards;animation:product-graphics-details-open .425s ease forwards;pointer-events:none;padding-block:16px}.product-graphics-item.is-opening .product-graphics-item__trigger{will-change:transform,opacity,filter,background-color,border-radius;border-radius:32px;background:var(--content-background);transition:background .425s ease,transform .425s ease,filter .425s ease,opacity .425s ease;cursor:default;transform:scale(calc(1/var(--details-scale-start)));filter:blur(5px);opacity:0}.product-graphics-item.is-opening .product-graphics-item__trigger .headline,.product-graphics-item.is-opening .product-graphics-item__trigger .icon{opacity:0;transition:opacity .25s ease}.product-graphics-item.is-closing .product-graphics-item__details{will-change:height,transform,opacity,filter;-webkit-animation:product-graphics-details-close .425s ease forwards;animation:product-graphics-details-close .425s ease forwards;pointer-events:none;padding-block:16px}.product-graphics-item.is-closing .product-graphics-item__trigger{will-change:transform,opacity,filter,border-radius;-webkit-animation:product-graphics-trigger-close .425s ease forwards;animation:product-graphics-trigger-close .425s ease forwards}.product-graphics.line-canvas-absolute .product-graphics-item{position:absolute;--intro-scale:1;--intro-opacity:1;--pivot-opacity:1;--pivot-scale:1;--pivot-blur:calc(3px*(1 - var(--pivot-opacity)));will-change:transform,opacity,filter;transform:translate(-50%,-50%) scale(calc(var(--intro-scale)*var(--pivot-scale)));opacity:calc(var(--intro-opacity)*var(--pivot-opacity));filter:blur(var(--pivot-blur))}.product-graphics.line-canvas-absolute.intro-active .product-graphics-item{transition:border-color .18s ease}.product-graphics.line-canvas-absolute>.text{--intro-title-opacity:1;position:absolute;top:32px;margin:0;color:rgba(241,246,255,.95);text-align:left;padding:0;z-index:3;white-space:nowrap;opacity:var(--intro-title-opacity);transition:opacity .26s ease}.product-graphics.line-canvas-absolute>#basis{left:32px}.product-graphics.line-canvas-absolute>#control-panel{left:50%;transform:translateX(-50%)}.product-graphics.line-canvas-absolute>#bausteine{right:4.15rem}#dedicated-server,#v-server,#webhosting{--font-color:#e08dff;--pos-h-align:left;--grid-h-align:start;--border-color:rgba(224,141,255,0.24);--content-background:#e08dff;--transform-origin:0px 12px}#mstudio{--font-color:#847afd;--pos-h-align:center;--grid-h-align:center;--border-color:rgba(132,122,253,0.48);--content-background:#8f86fc;--transform-origin:center center;place-items:center}#mstudio .product-graphics-item__trigger{transform-origin:center center}#agency-features,#ai-hosting,#container-hosting,#extensions{--font-color:#0c94b1;--pos-h-align:right;--grid-h-align:end;--border-color:rgba(12,148,177,0.24);--content-background:#00a1b5;--transform-origin:100% 12px}@-webkit-keyframes product-graphics-trigger-close{0%{transform:scale(calc(1/var(--details-scale-start)));filter:blur(3px);opacity:0}to{transform:scale(1);filter:blur(0);opacity:1}}@keyframes product-graphics-trigger-close{0%{transform:scale(calc(1/var(--details-scale-start)));filter:blur(3px);opacity:0}to{transform:scale(1);filter:blur(0);opacity:1}}@-webkit-keyframes product-graphics-details-open{0%{height:0;opacity:0;padding-block:16px;filter:blur(3px);transform:scale(var(--details-scale-start,1))}25%{opacity:0}to{height:var(--details-open-height,0);opacity:1;padding-block:32px;filter:blur(0);transform:scale(1)}}@keyframes product-graphics-details-open{0%{height:0;opacity:0;padding-block:16px;filter:blur(3px);transform:scale(var(--details-scale-start,1))}25%{opacity:0}to{height:var(--details-open-height,0);opacity:1;padding-block:32px;filter:blur(0);transform:scale(1)}}@-webkit-keyframes product-graphics-details-close{0%{height:var(--details-open-height,0);opacity:1;filter:blur(0);transform:scale(1);padding-block:32px}80%{opacity:0}to{padding-block:16px;height:0;opacity:0;filter:blur(5px);transform:scale(var(--details-scale-start,1))}}@keyframes product-graphics-details-close{0%{height:var(--details-open-height,0);opacity:1;filter:blur(0);transform:scale(1);padding-block:32px}80%{opacity:0}to{padding-block:16px;height:0;opacity:0;filter:blur(5px);transform:scale(var(--details-scale-start,1))}}.section:has(.product-graphics) .section__color-field:before{background:radial-gradient(900px 500px at 20% 20%,rgba(120,80,255,.25),transparent),radial-gradient(900px 500px at 80% 30%,rgba(0,220,255,.18),transparent),#0b0f18}@media(min-width:48.0625rem){.product-graphics-item--size-l{--item-font-size:var(--h-size-s)}.product-graphics-item--size-l .product-graphics-item__trigger{gap:16px;padding:20px 24px 20px 32px}}@media(hover:hover){.product-graphics-item__trigger:not([disabled]):not(:disabled):hover,a:not([disabled]):not(:disabled):hover .product-graphics-item__trigger{transform:scale(1.05)}.product-graphics-item__details__close:not([disabled]):not(:disabled):hover,a:not([disabled]):not(:disabled):hover .product-graphics-item__details__close{transform:scale(1.2)}}@media(max-width:1000px){#dedicated-server .product-graphics-item__trigger{width:-webkit-min-content;width:-moz-min-content;width:min-content}}@media(max-width:900px){#agency-features .product-graphics-item__trigger,#container-hosting .product-graphics-item__trigger{width:-webkit-min-content;width:-moz-min-content;width:min-content}}
