/* ============================================================
   Arbeitsrecht – Icon-Badges für
   • "Vertrags-Klauseln, die zählen"  (6 Karten)
   • "Spezialthemen & Risiken"        (6 Karten)
   Stil bewusst konsistent mit kuendigung-visuals.css.
   ============================================================ */

.service-tile {
  position: relative;
  overflow: hidden;
}

.ar-icon {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: linear-gradient(135deg,
              rgba(20, 33, 61, 0.06)   0%,
              rgba(212, 179, 106, 0.16) 100%);
  border: 1px solid rgba(212, 179, 106, 0.25);
  color: #14213D;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.55s ease,
              border-color 0.4s ease,
              color 0.4s ease;
  z-index: 1;
}

.ar-icon::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(212,179,106,0.4), rgba(20,33,61,0.2));
  filter: blur(12px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.ar-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-tile:hover .ar-icon,
.service-tile:focus-within .ar-icon {
  transform: translateY(-2px) rotate(-3deg);
  background: linear-gradient(135deg, #14213D 0%, #1f3258 100%);
  border-color: transparent;
  color: #D4B36A;
}
.service-tile:hover .ar-icon::before,
.service-tile:focus-within .ar-icon::before {
  opacity: 0.7;
}
.service-tile:hover .ar-icon svg,
.service-tile:focus-within .ar-icon svg {
  transform: scale(1.08) rotate(6deg);
}

/* ---- Per-icon idle micro-animations ---- */
.ar-icon[data-variant="hourglass"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ar-hourglass 5s ease-in-out infinite;
}
@keyframes ar-hourglass {
  0%, 45%, 100% { transform: rotate(0deg); }
  50%           { transform: rotate(180deg); }
  95%           { transform: rotate(180deg); }
}

.ar-icon[data-variant="block"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ar-shake 4.5s ease-in-out infinite;
}
@keyframes ar-shake {
  0%, 80%, 100% { transform: translateX(0); }
  84%           { transform: translateX(-2px) rotate(-3deg); }
  88%           { transform: translateX(2px) rotate(3deg);  }
  92%           { transform: translateX(-1px) rotate(-1deg);}
}

.ar-icon[data-variant="bars"] svg .ar-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: ar-bars 3.6s ease-in-out infinite;
}
.ar-icon[data-variant="bars"] svg .ar-bar:nth-child(2) { animation-delay: 0.15s; }
.ar-icon[data-variant="bars"] svg .ar-bar:nth-child(3) { animation-delay: 0.30s; }
@keyframes ar-bars {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.18); }
}

.ar-icon[data-variant="lock"] svg .ar-shackle {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: ar-lock 4.8s ease-in-out infinite;
}
@keyframes ar-lock {
  0%, 70%, 100% { transform: translateY(0)   rotate(0deg);    }
  76%           { transform: translateY(-1px) rotate(-6deg);  }
  84%           { transform: translateY(0)   rotate(0deg);    }
}

.ar-icon[data-variant="wifi"] svg .ar-wifi-arc {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0;
  animation: ar-wifi 2.4s ease-in-out infinite;
}
.ar-icon[data-variant="wifi"] svg .ar-wifi-arc:nth-child(2) { animation-delay: 0.3s; }
.ar-icon[data-variant="wifi"] svg .ar-wifi-arc:nth-child(3) { animation-delay: 0.6s; }
@keyframes ar-wifi {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1;    }
}

.ar-icon[data-variant="door"] svg .ar-door-panel {
  transform-box: fill-box;
  transform-origin: left center;
  animation: ar-door 5s ease-in-out infinite;
}
@keyframes ar-door {
  0%, 70%, 100% { transform: rotateY(0deg);  }
  80%           { transform: rotateY(-32deg); }
  90%           { transform: rotateY(0deg);  }
}

.ar-icon[data-variant="paper"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ar-paper 5.6s ease-in-out infinite;
}
@keyframes ar-paper {
  0%, 60%, 100% { transform: rotate(0deg);   }
  70%           { transform: rotate(-3deg);  }
  80%           { transform: rotate(3deg);   }
}

.ar-icon[data-variant="mask"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ar-mask 5s ease-in-out infinite;
}
@keyframes ar-mask {
  0%, 60%, 100% { transform: scale(1); }
  70%           { transform: scale(1.04) skewX(-3deg); }
  80%           { transform: scale(1)    skewX(3deg);  }
}

.ar-icon[data-variant="transfer"] svg .ar-arrow {
  transform-box: fill-box; transform-origin: center;
  animation: ar-transfer 2.6s ease-in-out infinite;
}
@keyframes ar-transfer {
  0%, 100% { transform: translateX(0);     opacity: 0.55; }
  50%      { transform: translateX(2px);   opacity: 1;    }
}

.ar-icon[data-variant="group"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ar-group 4.8s ease-in-out infinite;
}
@keyframes ar-group {
  0%, 70%, 100% { transform: translateY(0); }
  80%           { transform: translateY(-1.5px); }
}

.ar-icon[data-variant="shield-data"] svg .ar-data-line {
  transform-box: fill-box; transform-origin: center;
  animation: ar-data 3s ease-in-out infinite;
}
.ar-icon[data-variant="shield-data"] svg .ar-data-line:nth-child(2) { animation-delay: 0.4s; }
.ar-icon[data-variant="shield-data"] svg .ar-data-line:nth-child(3) { animation-delay: 0.8s; }
@keyframes ar-data {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1;   }
}

.ar-icon[data-variant="whistle"] svg {
  transform-box: fill-box; transform-origin: center;
  animation: ar-whistle 4s ease-in-out infinite;
}
@keyframes ar-whistle {
  0%, 70%, 100% { transform: rotate(0deg); }
  78%           { transform: rotate(-12deg); }
  86%           { transform: rotate(0deg);   }
  94%           { transform: rotate(-8deg);  }
}

/* Decorative corner glow on hover */
.service-tile::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -20%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(212, 179, 106, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.55s ease;
  pointer-events: none;
  z-index: 0;
}
.service-tile:hover::after,
.service-tile:focus-within::after { opacity: 1; }
.service-tile > * { position: relative; z-index: 1; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .ar-icon svg,
  .ar-icon svg * {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}