@property --abstand{syntax: "<number>"; inherits: true; initial-value: 10.5;}.stapel{--abstand: 10.5;--drehung: -43;--groesse: 1;position:relative;width:21rem;height:15.25rem;transform-style:preserve-3d;transform:scale(var(--groesse)) rotateX(57deg) rotate(calc(var(--drehung) * 1deg))}.js .stapel[data-stapel]:not(.ist-bereit){--abstand: 1;--groesse: 1.4}.schicht{position:absolute;inset:0;padding:1.1rem;border:1.5px solid rgb(255 255 255 / .85);border-radius:6px;background:#1c36e6f0;color:#ffffffe6;transform-style:preserve-3d;transform:translateZ(calc((var(--n) - 1.5) * var(--abstand) * 1rem));transition:translate .7s var(--aus),background-color .5s var(--aus),color .5s var(--aus),border-color .5s var(--aus),box-shadow .5s var(--aus)}.schild{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(calc(var(--drehung) * -1deg)) rotateX(-57deg);opacity:0;transition:opacity .4s}.schild b{position:absolute;right:2.6rem;top:-.55em;font:600 .8125rem/1.1 var(--f-daten);white-space:nowrap;color:var(--blatt);transition:color .4s}.schild b:after{content:"";position:absolute;left:calc(100% + .5rem);top:50%;width:1.6rem;border-top:1px solid currentColor}.schild--oben b{right:auto;left:.8rem;top:-1.4em}.schild--oben b:after,.schild--rechts b:after{display:none}.schild--rechts{left:100%;top:50%;transform:rotateX(90deg) rotate(calc(var(--drehung) * -1deg)) rotateX(-57deg)}.schild--rechts b{right:auto;left:.7rem}.stapel.ist-zerlegt .schild,html:not(.js) .schild{opacity:1}.stapel[data-aktiv=gestaltung] .schicht--gestaltung .schild b,.stapel[data-aktiv=code] .schicht--code .schild b,.stapel[data-aktiv=server] .schicht--server .schild b,.stapel[data-aktiv=domain] .schicht--domain .schild b,.stapel[data-aktiv=besucher] .zuleitung .schild b,.stapel[data-aktiv=wartung] .klammer .schild b{color:var(--signal)}.stapel[data-aktiv=code] .schicht--code,.stapel[data-aktiv=server] .schicht--server,.stapel[data-aktiv=domain] .schicht--domain{translate:-34% 0}.stapel[data-aktiv=gestaltung] .schicht--gestaltung,.stapel[data-aktiv=code] .schicht--code,.stapel[data-aktiv=server] .schicht--server,.stapel[data-aktiv=domain] .schicht--domain,.stapel[data-aktiv=besucher] .schicht--gestaltung,.stapel[data-aktiv=wartung] .schicht{background:var(--blatt);border-color:var(--blatt);color:var(--tinte);box-shadow:0 0 0 1px #0e1a2f0f,2.2rem 2.2rem 3rem -.5rem #0810508c}.mini{display:flex;flex-direction:column;gap:1rem;height:100%}.mini__leiste{display:flex;align-items:center;gap:.6rem}.mini__leiste i{width:1.1rem;height:1.1rem;margin-right:auto;border-radius:3px;background:currentColor}.mini__leiste b{width:1.6rem;height:3px;background:currentColor;opacity:.55}.mini__leiste em{width:3rem;height:1rem;border-radius:2px;background:currentColor}.mini__inhalt{display:grid;grid-template-columns:1.15fr 1fr;gap:1rem;flex:1}.mini__text{display:flex;flex-direction:column;gap:.45rem;padding-top:.6rem}.mini__text u{height:.95rem;border-radius:2px;background:currentColor}.mini__text u:nth-child(2){width:72%;margin-bottom:.35rem}.mini__text s{height:3px;background:currentColor;opacity:.45}.mini__text s:nth-of-type(3){width:60%}.mini__text em{width:4.6rem;height:1.35rem;margin-top:.5rem;border-radius:2px;background:currentColor}.mini__bild{border:1.5px solid currentColor;border-radius:3px;background:linear-gradient(to top right,transparent calc(50% - 1px),currentColor 0,currentColor calc(50% + 1px),transparent 0),linear-gradient(to bottom right,transparent calc(50% - 1px),currentColor 0,currentColor calc(50% + 1px),transparent 0);opacity:.7}.mini__text u,.mini__text em,.mini__leiste em,.mini__bild{transition:background-color .5s var(--aus),border-color .5s var(--aus)}.stapel:is([data-aktiv=gestaltung],[data-aktiv=besucher],[data-aktiv=wartung]) .mini__text u{background:var(--kobalt)}.stapel:is([data-aktiv=gestaltung],[data-aktiv=besucher],[data-aktiv=wartung]) .mini__text em,.stapel:is([data-aktiv=gestaltung],[data-aktiv=besucher],[data-aktiv=wartung]) .mini__leiste em{background:var(--signal)}.stapel:is([data-aktiv=gestaltung],[data-aktiv=besucher],[data-aktiv=wartung]) .mini__bild{border-color:transparent;background:var(--kobalt);opacity:1}.quelltext{margin:0;font:500 .75rem/1.75 var(--f-daten);white-space:pre;overflow:hidden}.rack{display:grid;gap:.7rem;align-content:center;height:100%}.rack div{display:flex;align-items:center;gap:.45rem;height:2.6rem;padding:0 .8rem;border:1.5px solid currentColor;border-radius:3px}.rack i{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}.rack b{flex:1;height:.9rem;margin-left:.6rem;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 7px);opacity:.5}.rack span{font:500 .75rem/1 var(--f-daten)}.stapel:is([data-aktiv=server],[data-aktiv=wartung]) .rack i:first-child{background:var(--ok)}.stapel:is([data-aktiv=server],[data-aktiv=wartung]) .rack i:nth-child(2){background:var(--kobalt)}.zone{width:100%;font:500 .625rem/1 var(--f-daten);letter-spacing:-.02em}.zone td{padding:.72rem .35rem .72rem 0;border-bottom:1px solid currentColor;white-space:nowrap}.zone tr:last-child td{border-bottom:0}.zone td:nth-child(2){font-weight:700}.stapel:is([data-aktiv=domain],[data-aktiv=wartung]) .zone td{border-bottom-color:var(--linie)}.stapel:is([data-aktiv=domain],[data-aktiv=wartung]) .zone td:nth-child(2){color:var(--kobalt)}.zuleitung{position:absolute;left:38%;bottom:100%;width:0;height:9rem;border-left:2px dashed rgb(255 255 255 / .7);transform:translateZ(calc(1.5 * var(--abstand) * 1rem + 2px));transform-style:preserve-3d;opacity:0;transition:opacity .4s,border-color .4s}.zuleitung:after{content:"";position:absolute;left:-7px;bottom:-2px;width:12px;height:12px;border-right:2px solid rgb(255 255 255 / .7);border-bottom:2px solid rgb(255 255 255 / .7);transform:rotate(45deg);transition:border-color .4s}.stapel[data-aktiv=besucher] .zuleitung,.stapel[data-aktiv=besucher] .zuleitung:after{border-color:var(--signal)}.klammer{position:absolute;left:calc(100% + 1.4rem);bottom:0;width:1.1rem;height:calc(3 * var(--abstand) * 1rem);border:2px solid rgb(255 255 255 / .7);border-left:0;transform-origin:50% 100%;transform:translateZ(calc(-1.5 * var(--abstand) * 1rem)) rotateX(-90deg);transform-style:preserve-3d;opacity:0;transition:opacity .4s,border-color .4s}.stapel[data-aktiv=wartung] .klammer{border-color:var(--signal)}.stapel.ist-zerlegt .zuleitung,.stapel.ist-zerlegt .klammer,html:not(.js) .zuleitung,html:not(.js) .klammer{opacity:1}.schichtbild{display:grid;place-items:center;height:25rem;pointer-events:none}.schichtbild>div{transform:scale(.72)}.stapel--stehend{--abstand: 7;animation:stapel-zerlegen 1.6s var(--aus) .15s both}@keyframes stapel-zerlegen{0%{--abstand: 1}}.stapel--stehend .schild{display:none}.stapel--stehend[data-aktiv=gestaltung] .schicht--gestaltung .schild,.stapel--stehend[data-aktiv=code] .schicht--code .schild,.stapel--stehend[data-aktiv=server] .schicht--server .schild,.stapel--stehend[data-aktiv=domain] .schicht--domain .schild,.stapel--stehend[data-aktiv=besucher] .zuleitung .schild,.stapel--stehend[data-aktiv=wartung] .klammer .schild{display:block}.stapel--stehend .schild b{font-size:1.125rem}@media(max-width:61.99rem){.schichtbild{display:none}}