/* Sangknapp: Byggeskilt */
.kn-rad{position:absolute;z-index:3;top:120px;left:0;right:0;margin:0 auto;display:flex;justify-content:flex-end;pointer-events:none;opacity:0;animation:fadeUp .7s ease .6s forwards}
.kn-rad>*{pointer-events:auto}
@media (prefers-reduced-motion:reduce){.kn-rad{opacity:1}}
.kn-ar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button.kn-b{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.kn-b:focus-visible{outline:2px solid var(--hvit);outline-offset:3px;border-radius:6px}
.mic{display:block;overflow:visible;transform-origin:50% 93%;will-change:transform}
.mic .tails{transform-origin:7.6px 10.6px}
.playing .mic .tails{animation:tail 1.1s ease-in-out infinite alternate}
@keyframes tail{from{transform:rotate(-7deg)}to{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.playing .mic .tails{animation:none}}
.playing .mic .cap{stroke:#E9BC73}

/* ---------- Ticker: ord for ord ---------- */
.tk{position:relative;overflow:hidden;white-space:nowrap;font-family:var(--font-d);font-weight:800;letter-spacing:-.01em;line-height:1.3;height:1.3em}
.tk.sc{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px);mask-image:linear-gradient(90deg,transparent 0,#000 16px)}
.tk-in{position:absolute;left:0;top:0;white-space:nowrap;transition:transform .2s cubic-bezier(.32,.72,0,1),opacity .12s ease-out;will-change:transform}
.tk-in.tk-out{opacity:0}
.tk-w{display:inline-block;opacity:0;color:var(--hvit);--wp:0}
.tk-w.on{opacity:1;animation:tkIn .11s ease-out}
@keyframes tkIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tk-w.a{background-image:linear-gradient(90deg,#E9BC73 calc(var(--wp)*(100% + .5em) - .5em),rgba(245,243,239,.55) calc(var(--wp)*(100% + .5em)));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media (prefers-reduced-motion:reduce){.tk-in{transition:none}.tk-w.on{animation:none}}
.tk-dots{position:absolute;left:0;top:50%;display:none;gap:7px;transform:translateY(-50%)}
.tk.nolin .tk-dots{display:inline-flex}
.tk-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#E9BC73;animation:atm2 2.4s ease-in-out infinite}
.tk-dots i:nth-child(2){animation-delay:.1s}.tk-dots i:nth-child(3){animation-delay:.2s}
@keyframes atm2{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.35);opacity:1}}
@media (prefers-reduced-motion:reduce){.tk-dots i{animation:none}}
/* ===== Variant 5: Byggeskilt ===== */
.v5{--tape:#E2D5A6;position:relative;width:320px;max-width:100%;padding:12px 14px 14px;border-radius:6px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,.035) 1px 2px,transparent 2px 4px),
    linear-gradient(172deg,#3a3734 0%,#2a2724 46%,#201d1b 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 1px rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.5),0 26px 44px -22px rgba(0,0,0,.9);
  overflow:hidden}
.v5::before{content:"";position:absolute;inset:5px;border-radius:3px;border:1px solid rgba(0,0,0,.42);box-shadow:0 1px 0 rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.05);pointer-events:none}
.v5::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07) 0,rgba(255,255,255,0) 38%);pointer-events:none}
.v5>*{position:relative;z-index:1}
.v5 .rv{position:absolute;z-index:2;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9a9288 0,#4a4540 55%,#1c1a18 100%);box-shadow:0 0 0 1px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.12)}
.v5 .rv::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;background:rgba(0,0,0,.55);transform:rotate(-35deg)}
.v5 .rv.a{left:9px;top:9px}.v5 .rv.b{right:9px;top:9px}.v5 .rv.c{left:9px;bottom:9px}.v5 .rv.d{right:9px;bottom:9px}
.v5-btn{flex:none;width:52px;height:52px;border-radius:50%;-webkit-tap-highlight-color:transparent}
.v5-btn:focus-visible{outline:2px solid var(--hvit);outline-offset:3px;border-radius:50%}
.v5-btn .bz{position:relative;display:block;width:52px;height:52px;border-radius:50%;background:linear-gradient(145deg,#6a645d 0%,#2b2825 52%,#4a453f 100%);box-shadow:0 1px 0 rgba(255,255,255,.1),inset 0 1px 1px rgba(255,255,255,.3),0 2px 5px rgba(0,0,0,.65)}
.v5-btn .bz::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#0c0b0a;box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.1)}
.v5-btn .dome{position:absolute;inset:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 36% 26%,#f26a5e 0,#D5372E 40%,#a9291f 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -3px 5px rgba(70,8,5,.45),0 3px 0 #7a1c16,0 5px 6px rgba(0,0,0,.55);transform:translateY(-2px);transition:transform .09s cubic-bezier(.32,.72,0,1),box-shadow .09s cubic-bezier(.32,.72,0,1)}
.v5-btn:hover .dome{filter:brightness(1.07)}
.v5-btn:active .dome,.playing .v5-btn .dome{transform:translateY(1.5px);box-shadow:inset 0 1px 1px rgba(255,255,255,.3),inset 0 -2px 4px rgba(70,8,5,.5),0 0 0 #7a1c16,0 1px 2px rgba(0,0,0,.6)}
.v5-btn svg{width:11px;height:13px;margin-left:2px;filter:drop-shadow(0 1px 0 rgba(70,8,5,.55))}
.v5-btn .pz{display:none;gap:3px}.v5-btn .pz i{display:block;width:3px;height:12px;background:#fff;border-radius:.5px;box-shadow:0 1px 0 rgba(70,8,5,.55)}
.playing .v5-btn .pl{display:none}.playing .v5-btn .pz{display:inline-flex}
.v5-tx{flex:1;min-width:0}
.v5-ti{display:block;font-family:var(--font-d);font-weight:800;font-size:18px;line-height:1.15;letter-spacing:-.015em;color:var(--hvit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v5-me{display:block;margin-top:3px;font-family:var(--font-m);font-size:11px;letter-spacing:.06em;color:var(--sand)}
.v5-mic{flex:none;width:30px;height:44px;margin-right:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.v5-mic .mic{width:30px;height:44px}
.v5-lyr{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .24s cubic-bezier(.32,.72,0,1),visibility 0s .24s}
.playing .v5-lyr,.paused .v5-lyr{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
.v5-lyr>div{overflow:hidden;min-height:0}
.v5-face{margin:14px 0 2px;padding:10px 12px 9px;border-radius:3px;background:#141211;box-shadow:inset 0 2px 5px rgba(0,0,0,.75),0 1px 0 rgba(255,255,255,.07)}
.v5 .tk{font-size:20px}

.v5-tape{position:relative;display:block;height:22px;margin:14px 0 0;border-radius:2px;overflow:hidden;cursor:pointer;background:#131110;box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07)}
.v5-tape:focus-visible{outline:2px solid var(--hvit);outline-offset:3px}
.v5-tape .ghost,.v5-tape .pulled{position:absolute;left:0;top:0;bottom:0;width:100%}
.v5-tape .pulled{overflow:hidden;background:var(--tape);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.18);transform:translateX(-100%);will-change:transform}
.v5-tape .pin{position:absolute;inset:0;transform:translateX(100%);will-change:transform}
.v5-tape .scale{position:absolute;inset:0;--tk:rgba(255,255,255,.2);color:rgba(255,255,255,.3)}
.v5-tape .pin .scale{--tk:#2a251f;color:#2a251f}
.v5-tape .ticks{position:absolute;left:0;right:0;top:0;height:100%;background:
  repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 20px) 0 0/100% 11px no-repeat,
  repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 10px) 0 0/100% 8px no-repeat,
  repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 5px) 0 0/100% 5px no-repeat}
.v5-tape .scale b{position:absolute;bottom:2px;transform:translateX(1px);font:500 8.5px/1 var(--font-m);letter-spacing:.02em}
.v5-tape .mk{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--rod);box-shadow:0 0 0 1px rgba(0,0,0,.25);will-change:transform}
.v5-tape .mk::before{content:"";position:absolute;left:-3px;top:0;width:8px;height:5px;background:var(--rod);clip-path:polygon(0 0,100% 0,50% 100%)}
@media (prefers-reduced-motion:reduce){.v5-btn .dome,.v5-lyr{transition:none}}

/* kompakt layout: etikett i raden, over tittelen */
.v5{padding:10px 14px 11px}
.v5-row{position:relative;display:flex;align-items:center;gap:12px;padding:0 2px 0 4px;min-height:50px}
.v5-lab{position:absolute;left:66px;right:4px;top:3px;display:flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--furu);line-height:1;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.07),0 -1px 0 rgba(0,0,0,.5);pointer-events:none}
.v5-lab .dot{color:var(--rod)}
.v5-lab .dot,.v5-lab .l2,.v5-lab>span:first-child{transition:opacity .15s}
.playing .v5-lab .dot,.playing .v5-lab .l2,.paused .v5-lab .dot,.paused .v5-lab .l2{opacity:0}
.v5-alle{position:absolute;right:20px;top:-10px;height:44px;min-width:110px;display:flex;align-items:flex-start;justify-content:flex-end;padding:13px 8px 0 12px;color:var(--hvit);opacity:0;pointer-events:none;transition:opacity .2s}
.playing .v5-alle,.paused .v5-alle{opacity:1;pointer-events:auto}
.v5-alle:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.v5-alle:focus-visible{outline:2px solid var(--hvit);outline-offset:-3px;border-radius:3px}
.v5-btn,.v5-btn .bz{width:50px;height:50px}.v5-btn .dome{inset:6px}
.v5-tx{padding-top:14px}
.v5-ti{font-size:18px}
.v5-mic,.v5-mic .mic{width:26px;height:38px}.v5-mic{align-self:flex-end}
.v5-face{margin:10px 0 0;padding:9px 12px 8px}
.v5-tape{height:18px;margin-top:9px}


/* ===== Etikettlinje, Alle sangene alltid synlig, stemme- og sjangerbrytere ===== */
.v5{--pt:10px;width:336px;padding:10px 14px 11px}
.v5 .rv{pointer-events:none}
.v5-lab{position:relative;left:auto;right:auto;top:auto;display:block;height:12px;margin:0 0 6px;padding:0 2px 0 6px;font-size:9px;letter-spacing:.09em;line-height:12px;pointer-events:none}
.v5-lab .lt{display:flex;gap:7px;white-space:nowrap;transition:opacity .15s}
.v5 .v5-lab .lt span{opacity:1}
.v5-lab .note{position:absolute;left:6px;top:0;white-space:nowrap;color:var(--hvit);letter-spacing:.06em;opacity:0;transition:opacity .15s}
.hasnote .v5-lab .lt{opacity:0}.hasnote .v5-lab .note{opacity:1}
.v5 .v5-alle{position:absolute;right:-2px;top:calc(var(--pt)*-1);height:44px;min-width:96px;display:flex;align-items:flex-start;justify-content:flex-end;padding:var(--pt) 12px 0 16px;line-height:12px;text-transform:none;letter-spacing:.03em;font-size:10px;color:var(--hvit);opacity:1;pointer-events:auto;text-shadow:inherit;z-index:3}
.v5 .v5-alle:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.v5-tx{padding-top:0}
.v5-tgs{display:flex;align-items:center;gap:8px;margin-top:6px}
.v5-tg{position:relative;display:inline-flex;height:22px;padding:2px;border-radius:3px;background:#161413;box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07);font:500 9.5px/1 var(--font-m)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--sand);white-space:nowrap}
button.v5-tg{cursor:pointer}
.v5-tg>span{display:flex;align-items:center;padding:0 7px;border-radius:2px;transition:background .12s,color .12s}
.v5-tg>span.cur{background:linear-gradient(#e0473f,#b8291f);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)}
.v5-tg>span:not(.cur){color:rgba(243,239,232,.55)}
.v5-tg.off{background:none;box-shadow:none;padding:2px 0;color:var(--sand)}
.v5-tg.off>span{padding:0 4px 0 0}
button.v5-tg::before{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px}
button.v5-tg:hover>span:not(.cur){color:var(--hvit)}
button.v5-tg:focus-visible{outline:2px solid var(--hvit);outline-offset:2px}
.v5-tape{margin-top:11px}

@media (prefers-reduced-motion:reduce){.v5-tg>span,.v5-lab .lt,.v5-lab .note{transition:none}}

.v5>.v5-lab{z-index:3}

/* ===== Mobil: plass reservert for plata, større tekst, treffflater ===== */
.v5>.v5-row{z-index:2}


/* Lave skjermer: kompakt hero slik at knappene fortsatt står over bunnlinja */


/* Smale skjermer: «Hør sangen vår» kolliderte med «Alle sangene» (375 px, 15.10) */


/* ===== Mobil: ingen plate i heroen. Spilleren står etter jobbene, smal og rolig. ===== */
.kn-slot{display:none}
.v5-alle2,.v5-tgs-m{display:none}
@media (max-width:720px){
 .kn-rad{display:none}
 .kn-slot{display:block;padding:0 0 clamp(40px,11vw,56px)}
 .kn-slot .eyebrow{margin:0 0 14px}
 .kn-slot-in,#kn-mount{display:block}
 .v5{--pt:8px;width:100%;max-width:340px;padding:8px 12px 8px;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.35),0 12px 22px -16px rgba(0,0,0,.55)}
 .v5::before{inset:3px;border-radius:4px}
 .v5 .rv{width:5px;height:5px}
 .v5 .rv.a,.v5 .rv.b{top:6px}.v5 .rv.a{left:6px}.v5 .rv.b{right:6px}
 .v5 .rv.c,.v5 .rv.d{display:none}
 .v5-lab{position:absolute;left:62px;top:9px;height:12px;margin:0;padding:0;font-size:11px;letter-spacing:.05em;line-height:12px;z-index:3}
 .v5-lab .lt .dot,.v5-lab .lt .l2{display:none}
 .v5-lab .note{left:0;font-size:11px;line-height:12px}
 .v5-lab .v5-alle{display:none}
 .v5-row{min-height:44px;gap:0;padding:0}
 .v5-btn{width:44px;height:44px;margin-right:6px}
 .v5-btn .bz{width:40px;height:40px;margin:2px}.v5-btn .dome{inset:5px}.v5-btn .bz::before{inset:3px}
 .v5-btn svg{width:9px;height:11px}.v5-btn .pz i{height:10px}
 .v5-tx{display:block;padding:14px 100px 0 0;height:44px}
 .v5-tx .v5-tgs{display:none}
 .v5-ti{display:block;font-size:15px;line-height:20px;letter-spacing:-.01em}
 .v5 .v5-alle2{display:block;position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--font-m);font-size:11px;letter-spacing:.02em;line-height:16px;color:var(--sand);white-space:nowrap;padding:0 2px}
 .v5 .v5-alle2::before{content:"";position:absolute;left:-4px;right:-6px;top:-14px;bottom:-14px}
 .v5 .v5-alle2:hover{color:var(--hvit);text-decoration:underline;text-underline-offset:3px}
 .v5-mic{display:none}
 .playing .v5-mic,.paused .v5-mic{display:block;position:absolute;right:108px;top:50%;margin-top:-15px}
 .v5-mic,.v5-mic .mic{width:20px;height:30px}
 .playing .v5-tx,.paused .v5-tx{padding-right:132px}
 .v5-tgs-m{display:flex;gap:8px;align-items:center;margin:10px 0 0}
 .v5-tgs-m .v5-tg{height:26px;font-size:11px!important}
 .v5-tgs-m .v5-tg>span{padding:0 7px}
 .v5-tgs-m button.v5-tg::before{top:-9px;bottom:-9px}
 .v5-face{margin:7px 0 0;padding:6px 10px 5px}
 .v5 .tk{font-size:15px}
 .v5-tape{height:0;margin-top:0;border:0 solid transparent;opacity:0;transition:height .24s cubic-bezier(.32,.72,0,1),margin .24s cubic-bezier(.32,.72,0,1),border-width .24s cubic-bezier(.32,.72,0,1),opacity .2s}
 .playing .v5-tape,.paused .v5-tape{height:8px;margin-top:8px;opacity:1}
 .v5-tape .ticks{background:repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 10px) 0 100%/100% 6px no-repeat,repeating-linear-gradient(90deg,var(--tk) 0 1px,transparent 1px 5px) 0 100%/100% 3px no-repeat}
 .v5-tape .scale b{display:none}
 .v5-tape .mk::before{width:6px;left:-2px;height:3px}
}
@media (max-width:720px) and (prefers-reduced-motion:reduce){.v5-tape{transition:none}}

/* ===== Neste / forrige sang ===== */
.v5-sk{position:relative;width:28px;height:22px;border-radius:3px;background:#161413;box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.07);color:var(--sand);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.v5-sk svg{width:12px;height:12px}
.v5-sk::before{content:"";position:absolute;left:-8px;right:-8px;top:-9px;bottom:-9px}
.v5-sk:hover{color:var(--hvit)}
.v5-sk:active svg{transform:translateY(1px)}
.v5-sk:focus-visible{outline:2px solid var(--hvit);outline-offset:2px}
.v5-skd{position:absolute;right:38px;top:2px;display:flex;gap:6px;z-index:2}
.v5-skd .v5-sk::before{top:-2px;bottom:-2px}
.v5-tx button.v5-tg::before{top:-2px;bottom:-11px}
.v5{width:350px}
.v5 .v5-alle{height:28px}
.v5-skm,.v5-tgw{display:none}
.v5-ti{padding-right:70px}
@media (max-width:720px){
 .v5-ti{padding-right:0}
 .v5-skd{display:none}
 .v5-skm{display:inline-flex;position:absolute;right:108px;top:50%;margin-top:-11px;z-index:2;width:20px;background:none;box-shadow:none;color:rgba(243,239,232,.72)}
 .v5-skm::before{top:-11px;bottom:-11px;left:-12px;right:-12px}
 .v5-skm svg{width:14px;height:14px}
 .v5{width:100%;max-width:340px}
 .v5 .v5-alle{height:auto}
 .v5-tx{padding-right:122px}
 .playing .v5-tx,.paused .v5-tx{padding-right:122px}
 .v5-tgw{display:flex;align-items:center;justify-content:space-between;margin:10px 0 0}
 .v5-tgw .v5-tgs-m{margin:0}
 .v5-skp::before{top:-11px;bottom:-11px;left:-16px;right:0}
 /* tommestokken: 8 px å se, 44 px å treffe. Kortet klipper under, så kanten går opp over tekstlinja (den har ingen trykk på forsiden) */
 .playing .v5-tape,.paused .v5-tape{height:44px;margin:-20px 0 -8px;border-style:solid;border-color:transparent;border-width:28px 0 8px;background-clip:padding-box;box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
 .playing .v5-mic,.paused .v5-mic{right:52px;top:67px;margin-top:-15px}
}

@media (max-width:380px){.v5-ti{font-size:14px}}