/* Social-Media-Kacheln: einheitlich große Kacheln, zwei pro Zeile (auch mobil). Markenfarbe nur als dezenter Akzent (--pc). */
.ms-links { min-width: 0; margin-top: 6px; animation: ms-rise .6s .3s cubic-bezier(.2,.7,.2,1) both; }
.ms-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.ms-tile {
  --pc: var(--ds-accent, #7ee8c4);
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 10px; min-height: 124px; padding: 14px;
  border-radius: 18px; text-decoration: none; color: inherit; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pc) 16%, transparent), rgb(var(--ds-surface-1-rgb, 22 19 31) / .88) 62%);
  border: 1px solid color-mix(in srgb, var(--pc) 30%, var(--ds-border, rgba(255,255,255,.08)));
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ms-tile:hover, .ms-tile:focus-visible { transform: translateY(-3px); border-color: var(--pc); box-shadow: 0 12px 30px color-mix(in srgb, var(--pc) 24%, transparent); }
.ms-tile[data-kind="twitch"] { --pc: #9146ff; }
.ms-tile[data-kind="youtube"] { --pc: #ff4b4b; }
.ms-tile[data-kind="tiktok"] { --pc: #25f4ee; }
.ms-tile[data-kind="instagram"] { --pc: #ff6aa8; }
.ms-tile[data-kind="discord"] { --pc: #7b8cff; }
.ms-tile-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 24px; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.ms-tile-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-tile-icon svg .fill { fill: currentColor; stroke: none; }
.ms-tile-copy { display: grid; align-content: start; gap: 2px; min-width: 0; }
.ms-tile-copy strong { font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.ms-tile-copy small { font-size: 12px; line-height: 1.35; color: var(--ds-text-secondary, rgba(229,224,250,.7)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-tile-arrow { position: absolute; top: 12px; right: 12px; font-size: 16px; color: var(--ds-text-muted, rgba(200,194,224,.55)); transition: transform .2s ease, color .2s ease; }
.ms-tile:hover .ms-tile-arrow, .ms-tile:focus-visible .ms-tile-arrow { transform: translate(2px, -2px); color: var(--pc); }

@media (min-width: 640px) {
  .ms-tiles { gap: 14px; }
  .ms-tile { min-height: 140px; padding: 18px; }
}
@media (max-width: 340px) { .ms-tiles { grid-template-columns: 1fr; } }