.kg-srv {
  position: relative; isolation: isolate; container-type: inline-size;
  width: 100%; max-width: 540px; aspect-ratio: 6 / 5; margin-inline: auto;
  line-height: 1.25;
}
.kg-srv .icon { width: 1em; height: 1em; }

.kg-srv__rack {
  position: absolute; left: 2cqw; top: 2cqw; width: 44cqw; height: 79cqw; overflow: hidden;
  display: flex; flex-direction: column; gap: 2.4cqw; padding: 4cqw;
  border-radius: var(--radius-l); background: var(--gradient-diag); box-shadow: var(--shadow-l);
  color: var(--white);
}
.kg-srv__rack .kachelfeld { left: 0; bottom: 0; z-index: -1; --spalten: 9; --zeilen: 7; --blende: linear-gradient(45deg, #000 10%, transparent 75%); }
.kg-srv__rack { isolation: isolate; }
.kg-srv__kopf { display: flex; align-items: center; gap: 2cqw; margin-bottom: 1cqw; font-size: clamp(.75rem, 3.3cqw, 1.125rem); font-weight: 700; }
.kg-srv__kopf-icon { display: grid; place-items: center; width: 8cqw; aspect-ratio: 1; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 3.8cqw; }
.kg-srv__einschub {
  display: flex; align-items: center; gap: 2cqw; height: 10cqw; padding: 0 2.6cqw; flex: none;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 2.4cqw; background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.kg-srv__einschub > .icon { font-size: 3.6cqw; color: var(--hell); }
.kg-srv__schlitze { display: grid; gap: 1.1cqw; flex: 1; }
.kg-srv__schlitze i { display: block; height: .9cqw; border-radius: 99px; background: rgba(255, 255, 255, .38); }
.kg-srv__schlitze i + i { width: 62%; background: rgba(255, 255, 255, .22); }
.kg-srv__led { width: 1.7cqw; aspect-ratio: 1; flex: none; border-radius: 50%; background: #7fd6ff; box-shadow: 0 0 1.4cqw #7fd6ff; }
.kg-srv__led--b { background: var(--white); box-shadow: 0 0 1.2cqw rgba(255, 255, 255, .9); }

.kg-srv__bahn {
  position: absolute; left: 46cqw; width: 13cqw; height: .7cqw; translate: 0 -50%;
  background: repeating-linear-gradient(90deg, rgba(0, 73, 148, .35) 0 1.3cqw, transparent 0 2.3cqw);
}
.kg-srv__bahn--a { top: 20.3cqw; }
.kg-srv__bahn--b { top: 45.1cqw; }
.kg-srv__bahn::after { content: ""; position: absolute; right: -.6cqw; top: 50%; width: 1.9cqw; aspect-ratio: 1; border-radius: 50%; background: var(--accent); translate: 0 -50%; box-shadow: 0 0 0 .8cqw rgba(0, 158, 227, .2); }
.kg-srv__paket {
  position: absolute; left: 0; top: 50%; width: 3.8cqw; height: 1.9cqw; border-radius: 99px;
  background: var(--accent); box-shadow: 0 0 1.6cqw rgba(0, 158, 227, .85); translate: 0 -50%; opacity: 0;
}

.kg-srv__geraet {
  position: absolute; left: 59cqw; right: 2cqw; display: flex; align-items: center; gap: 2.2cqw; translate: 0 -50%;
  padding: 2.2cqw; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-l);
}
.kg-srv__geraet--a { top: 20.3cqw; }
.kg-srv__geraet--b { top: 45.1cqw; }
.kg-srv__geraet-icon {
  position: relative; display: grid; place-items: center; width: 9cqw; aspect-ratio: 1; flex: none; overflow: hidden;
  border-radius: 2.6cqw; background: var(--tile-2); color: var(--primary); font-size: 4cqw;
}
.kg-srv__geraet-icon::before { content: ""; position: absolute; inset: 0; background: var(--gradient); }
.kg-srv__geraet-icon .icon { position: relative; color: var(--white); }
.kg-srv__geraet-text { display: grid; gap: .4cqw; min-width: 0; }
.kg-srv__geraet-text b { color: var(--ink); font-size: clamp(.6875rem, 3cqw, 1rem); font-weight: 700; white-space: nowrap; }
.kg-srv__geraet-text small { display: flex; align-items: center; gap: 1.2cqw; color: var(--muted); font-size: clamp(.5625rem, 2.3cqw, .8rem); white-space: nowrap; }
.kg-srv__geraet-text small::before { content: ""; width: 1.6cqw; aspect-ratio: 1; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .6cqw rgba(0, 158, 227, .2); }

.kg-srv__tacho {
  position: absolute; left: 26cqw; bottom: 2cqw; width: 34cqw;
  padding: 2.6cqw 3cqw 2.2cqw; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-l);
  rotate: -2deg;
}
.kg-srv__tacho-kopf { display: flex; align-items: center; gap: 1.6cqw; color: var(--ink); font-size: clamp(.6875rem, 2.9cqw, 1rem); font-weight: 700; }
.kg-srv__tacho-kopf .icon { color: var(--accent); font-size: 3.6cqw; }
.kg-srv__tacho svg { display: block; width: 100%; height: auto; margin-top: 1.4cqw; overflow: visible; }
.kg-srv__bogen { stroke-dashoffset: 24; }
.kg-srv__nadel { transform-box: view-box; transform-origin: 60px 58px; rotate: 47deg; }

.kg-srv__regler {
  position: absolute; right: 2cqw; top: 0; display: flex; align-items: center; gap: 2cqw;
  padding: 1.8cqw 2.4cqw 1.8cqw 1.8cqw; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow);
  rotate: 2deg;
}
.kg-srv__regler-icon { display: grid; place-items: center; width: 6.8cqw; aspect-ratio: 1; flex: none; border-radius: 2cqw; background: var(--accent-50); color: var(--accent-700); font-size: 3.2cqw; }
.kg-srv__spuren { display: grid; gap: 2cqw; }
.kg-srv__spur { position: relative; width: 14cqw; height: 1.1cqw; border-radius: 99px; background: var(--tile-2); }
.kg-srv__spur::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--gradient); transform-origin: left; }
.kg-srv__spur::after {
  content: ""; position: absolute; left: calc(var(--p) * 100%); top: 50%; width: 2.8cqw; aspect-ratio: 1; translate: -50% -50%;
  border: .6cqw solid var(--accent); border-radius: 50%; background: var(--white); box-shadow: var(--shadow-s);
}

.kg-srv__siegel {
  position: absolute; right: 3cqw; bottom: 7cqw; display: flex; align-items: center; gap: 1.6cqw;
  padding: 1.6cqw 3cqw 1.6cqw 1.6cqw; border-radius: 99px; background: var(--white); box-shadow: var(--shadow);
  color: var(--primary); font-size: clamp(.625rem, 2.6cqw, .9rem); font-weight: 600; white-space: nowrap;
}
.kg-srv__siegel-icon { display: grid; place-items: center; width: 6.4cqw; aspect-ratio: 1; border-radius: 50%; background: var(--accent-50); color: var(--accent-700); font-size: 3cqw; }

@media (prefers-reduced-motion: no-preference) {
  .kg-srv__rack { animation: kg-srv-auf .7s var(--ease) both; }
  .kg-srv__einschub { animation: kg-srv-rein .55s var(--ease) calc(.3s + var(--i) * .15s) both; }
  .kg-srv__led { animation: kg-srv-blinken .45s steps(2, jump-none) calc(.9s + var(--i) * .2s) 6 alternate; }
  .kg-srv__led--b { animation-delay: calc(1.05s + var(--i) * .2s); animation-iteration-count: 4; }
  .kg-srv__bahn { animation: kg-srv-da .4s ease .8s both; }
  .kg-srv__geraet { animation: kg-srv-pop .5s var(--ease) .8s both; }
  .kg-srv__geraet--b { animation-delay: 1s; }
  .kg-srv__paket { animation: kg-srv-paket 1.1s ease-in-out 1.4s 3; }
  .kg-srv__bahn--b .kg-srv__paket { animation-delay: 1.95s; }
  .kg-srv__geraet-icon::before { animation: kg-srv-da .3s ease 2.4s both; }
  .kg-srv__geraet-icon .icon { animation: kg-srv-icon .3s ease 2.4s both; }
  .kg-srv__geraet--b .kg-srv__geraet-icon::before, .kg-srv__geraet--b .kg-srv__geraet-icon .icon { animation-delay: 2.95s; }
  .kg-srv__geraet-text small { animation: kg-srv-da .3s ease 2.4s both; }
  .kg-srv__geraet--b .kg-srv__geraet-text small { animation-delay: 2.95s; }
  .kg-srv__tacho { animation: kg-srv-pop .5s var(--ease) 1.2s both; }
  .kg-srv__nadel { animation: kg-srv-nadel 1.9s var(--ease) 1.6s both; }
  .kg-srv__bogen { animation: kg-srv-bogen 1.9s var(--ease) 1.6s both; }
  .kg-srv__siegel { animation: kg-srv-pop .5s var(--ease) 3.4s both, kg-srv-schweben 2.6s ease-in-out 3.9s 2 alternate; }
  .kg-srv__regler { animation: kg-srv-pop .5s var(--ease) 2s both; }
  .kg-srv__spur::before { animation: kg-srv-fuellen 1s var(--ease) calc(2.4s + var(--i) * .25s) both; }
  .kg-srv__spur::after { animation: kg-srv-knopf 1s var(--ease) calc(2.4s + var(--i) * .25s) both; }
}
@keyframes kg-srv-auf { from { opacity: 0; scale: .94; } }
@keyframes kg-srv-fuellen { from { scale: .2 1; } }
@keyframes kg-srv-knopf { from { translate: calc(-50% - var(--p) * 11.2cqw) -50%; } }
@keyframes kg-srv-rein { from { opacity: 0; translate: -4cqw 0; } }
@keyframes kg-srv-pop { from { opacity: 0; scale: .7; } }
@keyframes kg-srv-da { from { opacity: 0; } }
@keyframes kg-srv-blinken { from { opacity: 1; } to { opacity: .2; } }
@keyframes kg-srv-paket { 0% { opacity: 0; translate: -1cqw -50%; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 9.5cqw -50%; } }
@keyframes kg-srv-icon { from { color: var(--primary); } }
@keyframes kg-srv-nadel { 0% { rotate: -88deg; } 55% { rotate: 70deg; } 75% { rotate: 42deg; } 100% { rotate: 47deg; } }
@keyframes kg-srv-bogen { 0% { stroke-dashoffset: 99; } 55% { stroke-dashoffset: 11; } 75% { stroke-dashoffset: 27; } 100% { stroke-dashoffset: 24; } }
@keyframes kg-srv-schweben { to { translate: 0 -1.4cqw; } }