/* =====================================================================
   Kachel: Bordfunk  →  /spotify
   Farben und Schrift 1:1 aus spotify/style.css (Petrol, Sand, Amber).
   ===================================================================== */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }

.kachel--bordfunk {
  --k-bg:
    radial-gradient(120% 80% at 100% 0%, #227a8c66, transparent 60%),
    linear-gradient(165deg, #16303b 0%, #0e2028 70%);
  --k-ink: #f0e6d6;
  --k-dim: #9db0b5;
  --k-akzent: #f0a73c;
  --k-rand: #23434f;
  --k-radius: 14px;
  --k-titel-font: "Bricolage Grotesque", Inter, sans-serif;
  --k-titel-lauf: -.03em;
  font-weight: 400;
}
.kachel--bordfunk .kachel__titel { font-weight: 700; }

.kachel--bordfunk .kachel__bild svg {
  width: clamp(64px, 12vw, 96px);
  height: auto;
  fill: #f0e6d6;
}
.kachel--bordfunk .kachel__bild .akzent { fill: #f0a73c; }

/* Warteschlange "rückt nach", wenn man drüberfährt */
.kachel--bordfunk .kachel__bild rect { transition: transform .25s ease; }
.kachel--bordfunk:hover .kachel__bild rect:nth-child(1) { transform: translateY(-3px); }
.kachel--bordfunk:hover .kachel__bild rect:nth-child(3) { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) {
  .kachel--bordfunk .kachel__bild rect { transition: none; }
}