.kg-rat {
  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-rat .icon { width: 1em; height: 1em; }

.kg-rat__monitor {
  position: absolute; left: 1cqw; right: 1cqw; top: 6cqw; padding: 1.6cqw;
  border-radius: 3.4cqw; background: var(--secondary);
  box-shadow: 0 4px 12px rgba(0, 38, 80, .1), 0 30px 60px -24px rgba(0, 20, 50, .5);
}
.kg-rat__screen {
  position: relative; isolation: isolate; overflow: hidden; height: 58cqw;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3cqw; align-items: start;
  padding: 3.4cqw; border-radius: 2cqw; background: var(--gradient-diag);
}
.kg-rat__screen .kachelfeld { right: 0; bottom: 0; z-index: -1; --spalten: 14; --zeilen: 8; --blende: linear-gradient(315deg, #000 10%, transparent 70%); }
.kg-rat__hals {
  position: absolute; left: 50%; top: 66.6cqw; width: 13cqw; height: 8cqw; translate: -50% 0; z-index: -1;
  background: linear-gradient(180deg, #b7c7e2, var(--tile-2)); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.kg-rat__fuss { position: absolute; left: 50%; top: 74.4cqw; width: 32cqw; height: 2.4cqw; translate: -50% 0; border-radius: 99px; background: #c9d6ec; box-shadow: var(--shadow-s); }

.kg-rat__fenster { overflow: hidden; border-radius: 2cqw; background: var(--white); box-shadow: 0 10px 28px -12px rgba(0, 20, 50, .55); }
.kg-rat__leiste { display: flex; gap: 1cqw; padding: 1.5cqw 2cqw; background: var(--tile-hell); }
.kg-rat__leiste i { width: 1.3cqw; aspect-ratio: 1; border-radius: 50%; background: #c9d6ec; }
.kg-rat__leiste i:first-child { background: var(--accent); }
.kg-rat__titel { display: flex; align-items: center; gap: 1.8cqw; padding: 2cqw 2.4cqw 1.6cqw; color: var(--ink); font-size: clamp(.625rem, 2.9cqw, 1rem); font-weight: 700; white-space: nowrap; }
.kg-rat__titel small { display: block; color: var(--accent-700); font-size: clamp(.5rem, 2cqw, .7rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.kg-rat__titel-icon { display: grid; place-items: center; width: 6.8cqw; aspect-ratio: 1; flex: none; border-radius: 2cqw; background: var(--gradient); color: var(--white); font-size: 3.2cqw; }

.kg-rat__apps { display: grid; gap: 1.3cqw; padding: 0 2.4cqw 2.4cqw; }
.kg-rat__app {
  position: relative; display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw;
  border-radius: 1.6cqw; background: var(--tile-hell);
}
.kg-rat__app-icon { display: grid; place-items: center; width: 5.6cqw; aspect-ratio: 1; flex: none; border-radius: 1.4cqw; background: var(--white); color: var(--primary); font-size: 2.7cqw; }
.kg-rat__app-name { min-width: 0; color: var(--text); font-size: clamp(.5625rem, 2.35cqw, .8125rem); font-weight: 600; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.kg-rat__app--klick { background: var(--white); box-shadow: inset 0 0 0 .45cqw var(--accent), 0 6px 16px -8px rgba(0, 73, 148, .5); }
.kg-rat__app--klick .kg-rat__app-icon { background: var(--accent-50); color: var(--accent-700); }

.kg-rat__kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; padding: .4cqw 2.4cqw 2.4cqw; }
.kg-rat__kachel {
  position: relative; display: grid; place-items: center; aspect-ratio: 1.45; overflow: hidden;
  border-radius: 1.8cqw; background: var(--tile-hell); color: var(--primary); font-size: 4.4cqw;
}
.kg-rat__kachel:nth-child(even) { color: var(--accent-700); }
.kg-rat__kachel--klick { color: var(--white); box-shadow: 0 6px 16px -8px rgba(0, 73, 148, .6); }
.kg-rat__kachel--klick::before { content: ""; position: absolute; inset: 0; background: var(--gradient); }
.kg-rat__kachel .icon { position: relative; }

.kg-rat__app--klick::after, .kg-rat__kachel--klick::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9cqw; aspect-ratio: 1; translate: -50% -50%;
  border: .5cqw solid var(--accent); border-radius: 50%; opacity: 0; pointer-events: none;
}
.kg-rat__kachel--klick::after { border-color: var(--white); }

.kg-rat__chip {
  position: absolute; left: 5cqw; top: 0; display: flex; align-items: center; gap: 1.6cqw;
  padding: 1.4cqw 2.8cqw 1.4cqw 1.4cqw; border-radius: 99px; background: var(--white); box-shadow: var(--shadow-l);
  color: var(--primary); font-size: clamp(.625rem, 2.6cqw, .9rem); font-weight: 600; white-space: nowrap; rotate: -3deg;
}
.kg-rat__chip-icon { display: grid; place-items: center; width: 6.2cqw; aspect-ratio: 1; border-radius: 50%; background: var(--accent-50); color: var(--accent-700); font-size: 2.9cqw; }

.kg-rat__zeiger {
  position: absolute; left: var(--ziel-x); top: var(--ziel-y); z-index: 2; color: var(--secondary); font-size: 5cqw; line-height: 0;
  --ziel-x: 64cqw; --ziel-y: 48cqw; --erst: -30cqw -17cqw; --start: 16cqw 12cqw;
  filter: drop-shadow(0 0 .35cqw #fff) drop-shadow(0 0 .35cqw #fff) drop-shadow(0 4px 6px rgba(0, 20, 50, .35));
}

@media (prefers-reduced-motion: no-preference) {
  .kg-rat__monitor { animation: kg-rat-auf .7s var(--ease) both; }
  .kg-rat__hals, .kg-rat__fuss { animation: kg-rat-da .6s ease .2s both; }
  .kg-rat__fenster--1 { animation: kg-rat-links .6s var(--ease) .45s both; }
  .kg-rat__fenster--2 { animation: kg-rat-rechts .6s var(--ease) .6s both; }
  .kg-rat__app, .kg-rat__kachel { animation: kg-rat-hoch .45s var(--ease) calc(.9s + var(--i) * .1s) both; }
  .kg-rat__chip { animation: kg-rat-pop .5s var(--ease) .8s both, kg-rat-puls .6s ease 3s, kg-rat-schweben 2.6s ease-in-out 5.4s 2 alternate; }
  .kg-rat__zeiger { animation: kg-rat-zeiger 3.6s ease-in-out 1.5s both; }
  .kg-rat__app--klick { animation: kg-rat-hoch .45s var(--ease) .9s both, kg-rat-markiert .3s ease 2.95s both; }
  .kg-rat__app--klick .kg-rat__app-icon { animation: kg-rat-icon .3s ease 2.95s both; }
  .kg-rat__app--klick::after { animation: kg-rat-welle .7s ease-out 2.95s; }
  .kg-rat__kachel--klick { animation: kg-rat-hoch .45s var(--ease) 1.1s both, kg-rat-kachel .3s ease 4.55s both; }
  .kg-rat__kachel--klick::before { animation: kg-rat-da .3s ease 4.55s both; }
  .kg-rat__kachel--klick::after { animation: kg-rat-welle .7s ease-out 4.55s; }
}
@keyframes kg-rat-auf { from { opacity: 0; scale: .94; } }
@keyframes kg-rat-da { from { opacity: 0; } }
@keyframes kg-rat-links { from { opacity: 0; translate: -4cqw 0; } }
@keyframes kg-rat-rechts { from { opacity: 0; translate: 4cqw 0; } }
@keyframes kg-rat-hoch { from { opacity: 0; translate: 0 1.6cqw; } }
@keyframes kg-rat-pop { from { opacity: 0; scale: .7; } }
@keyframes kg-rat-schweben { to { translate: 0 -1.2cqw; } }
@keyframes kg-rat-puls { 40% { scale: 1.1; } }
@keyframes kg-rat-zeiger {
  0% { opacity: 0; translate: var(--start); }
  8% { opacity: 1; translate: var(--start); }
  36% { translate: var(--erst); scale: 1; }
  40% { translate: var(--erst); scale: .8; }
  45% { translate: var(--erst); scale: 1; }
  52% { translate: var(--erst); }
  80% { translate: 0 0; scale: 1; }
  84% { scale: .8; }
  89%, 100% { translate: 0 0; scale: 1; }
}
@keyframes kg-rat-markiert { from { background-color: var(--tile-hell); box-shadow: inset 0 0 0 0 var(--accent), 0 0 0 transparent; } }
@keyframes kg-rat-icon { from { background-color: var(--white); color: var(--primary); } }
@keyframes kg-rat-kachel { from { color: var(--primary); box-shadow: 0 0 0 transparent; } }
@keyframes kg-rat-welle { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.6; } }