/* UDKAST – sidespecifik CSS for /funktioner og /en/features. Lægges oven på udkast.css. */

/* ── genvejskort, trukket op over heroen ── */
.funk-quick { position: relative; z-index: 2; background: var(--off); padding: 0 48px 30px; }
.ux .funk-oversigt { max-width: 1200px; margin: -58px auto 0; gap: 12px; }
.ux .funk-kort { border-radius: 20px; padding: 22px 12px 18px; gap: 12px; font-family: 'Space Grotesk', sans-serif; font-size: 14px; letter-spacing: -.2px;
  box-shadow: 0 24px 44px -30px rgba(10,37,64,.55); }
.ux .funk-kort:hover { border-color: var(--teal); box-shadow: var(--ux-shadow); }
.ux .fk-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--navy); color: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; }
.ux .fk-badge { top: -9px; right: 12px; background: var(--amber); }

/* ── sticky chip-nav: fylder ikke i layoutet, svæver over næste sektion ── */
.ux .funk-nav { height: 0; margin: 0; }
.ux .funk-nav-inner { margin-top: 20px; max-width: 760px; box-shadow: 0 20px 40px -22px rgba(10,37,64,.55); }
.ux .funk-nav a { font-family: 'Space Grotesk', sans-serif; }
.ux .funk-nav a.active { background: var(--navy); color: var(--teal); }

/* ankre lander under topbar + nav + chip-nav */
.ux .funk-sec { scroll-margin-top: 210px; }
.ux .funk-ai.funk-sec { scroll-margin-top: 110px; }

/* ── musikassistent-showcase (navy) ── */
.funk-ai .ux-pill { margin-bottom: 18px; }
.funk-ai-copy .ux-ticks { margin-bottom: 4px; }
.funk-video { position: relative; max-width: 1000px; margin: 100px auto 0; border-radius: 22px; overflow: hidden; background: #0d2c4a;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 50px 100px -40px rgba(0,0,0,.8), 0 0 0 6px rgba(0,201,167,.06); }
.funk-video-bar { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.funk-video-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.funk-video-bar span { margin-left: 10px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.6); }
.funk-video video { width: 100%; display: block; }
.funk-video-cap { text-align: center; margin-top: 18px; font-size: 14px; }

/* feature-sektionen ligger lige efter navy-sektionen: giv den top-luft igen */
.ux .funk-feats.ux-sec:not(.ux-sec--navy) { padding-top: 110px; }
.ux .ux-sec--white + .ux-final { padding-top: 100px; }

/* favoritter-skærm (genbruger radio-skærmens opbygning) */
.ux .funk-fav { background: linear-gradient(165deg, #d9534f, #b8325a 55%, #2d2440); }
.funk-hearts em { color: #E5484D; font-size: 13px; }

/* rigtig app-menu (»Gå til radio«) som svævende kort */
.funk-menu { position: absolute; z-index: 4; left: -6px; bottom: 54px; width: 230px; border-radius: 16px; background: #fff;
  box-shadow: 0 24px 44px -20px rgba(0,0,0,.6); animation: uxBob 6s ease-in-out -3s infinite; }

@media (max-width: 1050px) {
  .funk-quick { padding: 0 24px 20px; }
  .ux .funk-feats.ux-sec:not(.ux-sec--navy) { padding-top: 72px; }
  .ux .ux-sec--white + .ux-final { padding-top: 72px; }
  .funk-video { margin-top: 60px; border-radius: 16px; }
  .ux .funk-ai.funk-sec { scroll-margin-top: 140px; }
}
@media (max-width: 860px) {
  .ux .funk-kort:first-child { grid-column: 1 / -1; flex-direction: row; justify-content: center; }
  .ux .funk-nav-inner { margin-left: 12px; margin-right: 12px; }
}
@media (max-width: 560px) {
  .ux .funk-oversigt { margin-top: -40px; gap: 10px; }
  .ux .funk-kort { padding: 18px 10px 14px; font-size: 13px; }
  .funk-menu { width: 180px; left: 0; bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) { .funk-menu { animation: none; } }