/* Icon-Row: Reihe animierter Stroke-Icons mit Label */
.icon-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
}

.icon-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 18px 10px 16px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease-out);
}

a.icon-row__item:hover {
  background: var(--teal-tint);
  transform: translateY(-3px);
}

.icon-row__item .wif-icon {
  width: 52px;
  height: 52px;
  color: var(--teal);
}

.icon-row__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-mid);
}

a.icon-row__item:hover .icon-row__label { color: var(--teal-deep); }

.icon-row--c6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 900px) {
  .icon-row, .icon-row--c6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .icon-row { grid-template-columns: repeat(2, 1fr); }
  .icon-row__item { padding: 12px 6px 10px; }
  .icon-row__item .wif-icon { width: 44px; height: 44px; }
}