/* København-kortet · Cityradar (hed Nyhedskompas til 13.11.2026). To temaer: dag (lys) og nat. */
:root{
  --papir:#f3eee3;--flade:rgba(252,249,242,.84);--flade2:#fffdf8;--blæk:#121110;--dæmp:#6b665b;--linje:rgba(18,17,16,.1);--svag:rgba(18,17,16,.055);
  --guld:#a8873f;--live:#dc4a2b;--fri:#1c8566;
  --skygge:0 1px 0 rgba(18,17,16,.03),0 18px 50px -18px rgba(18,17,16,.32);--kant:rgba(255,255,255,.75);
  --serif:'Bodoni Moda','Bodoni 72',Didot,Georgia,serif;--sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);--ark:210px}
[data-tema="nat"]{
  --papir:#0d0f13;--flade:rgba(19,21,26,.78);--flade2:#1a1d24;--blæk:#f1ede3;--dæmp:#9c978b;--linje:rgba(241,237,227,.12);--svag:rgba(241,237,227,.07);
  --guld:#d2b574;--live:#ff6b4a;--fri:#3fbf98;
  --skygge:0 18px 50px -14px rgba(0,0,0,.7);--kant:rgba(241,237,227,.09)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--papir);color:var(--blæk);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:left}
a{color:inherit}
:focus-visible{outline:2px solid var(--guld);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
#kort{position:fixed;inset:0}
.flade{background:var(--flade);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--kant);box-shadow:var(--skygge);border-radius:22px;transition:background .5s,border-color .5s}
.sc{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--guld)}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--dæmp)}

/* Indgang */
.velkomst{position:fixed;inset:0;z-index:20;background:var(--papir);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--blæk);transition:opacity .9s var(--ease),visibility .9s}
.velkomst.væk{opacity:0;visibility:hidden}
.velkomst svg{color:var(--guld);margin-bottom:6px}
.velkomst .nålen{transform-origin:24px 24px;animation:søg 2.4s var(--ease) infinite}
@keyframes søg{0%{transform:rotate(-38deg)}50%{transform:rotate(24deg)}100%{transform:rotate(-38deg)}}
.velkomst strong{font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-.01em}
.velkomst i{color:var(--live);font-weight:500}

/* Venstre: titel, knapper, filter */
.venstre{position:fixed;left:24px;top:24px;z-index:3;display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:min(470px,calc(100vw - 470px));pointer-events:none}
.venstre>*{pointer-events:auto}
.top{display:flex;gap:22px;align-items:flex-start;padding:16px 16px 14px 20px}
h1{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.04;letter-spacing:-.012em;margin:5px 0 7px;white-space:nowrap}
h1 i{font-weight:500;color:var(--live)}
.knapper{display:flex;gap:6px}
.knapper button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--svag);font-weight:700;font-size:11.5px;letter-spacing:.04em;transition:background .2s,transform .2s var(--ease),color .2s}
.knapper button:hover{transform:translateY(-1px);background:var(--linje)}
.knapper button[aria-pressed="true"],.knapper button.til{background:var(--blæk);color:var(--papir)}
.filter{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 6px;border-radius:999px;background:var(--flade);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--kant);box-shadow:0 8px 22px -12px rgba(18,17,16,.4);font-weight:600;font-size:12.5px;white-space:nowrap;transition:transform .2s var(--ease),opacity .25s}
.chip:hover{transform:translateY(-1px)}
.chip i{width:24px;height:24px;border-radius:50%;background:var(--f);color:#fff;display:grid;place-items:center;transition:background .25s,color .25s,box-shadow .25s}
.chip b{font-family:var(--mono);font-weight:500;font-size:10.5px;color:var(--dæmp)}
.chip[aria-pressed="false"]{opacity:.6}
.chip[aria-pressed="false"] i{background:transparent;color:var(--f);box-shadow:inset 0 0 0 1.5px var(--f)}

/* Panel */
.panel{position:fixed;right:24px;top:24px;bottom:24px;width:392px;z-index:3;overflow:hidden;display:flex;flex-direction:column}
#oversigt,#detalje{overflow-y:auto;padding:20px;flex:1;scrollbar-width:thin;scrollbar-color:var(--linje) transparent}
.panelhoved{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.panelhoved strong{font-family:var(--serif);font-size:19px;font-weight:600;white-space:nowrap}
.vindue{display:flex;background:var(--svag);border-radius:999px;padding:3px}
.vindue button{padding:6px 10px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--dæmp);white-space:nowrap;transition:background .2s,color .2s}
.vindue button[aria-pressed="true"]{background:var(--blæk);color:var(--papir)}
#liste section+section{margin-top:22px}
#liste h4,#detalje h3{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dæmp);margin-bottom:10px}
#liste h4::after{content:"";flex:1;height:1px;background:var(--linje)}
.kortk{display:flex;gap:14px;width:100%;padding:13px 14px;border-radius:16px;background:var(--flade2);border:1px solid var(--linje);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;animation:ind .5s var(--ease) both}
.kortk+.kortk{margin-top:8px}
.kortk:hover{transform:translateY(-2px);box-shadow:0 16px 32px -18px rgba(18,17,16,.45);border-color:color-mix(in srgb,var(--f) 45%,transparent)}
@keyframes ind{from{opacity:0;transform:translateY(8px)}}
.dato{flex:0 0 46px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid var(--linje);padding-right:12px;color:var(--f)}
.dato b{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1}
.dato small{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.dato.nu b{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.12em;display:flex;align-items:center;gap:5px;color:var(--live)}
.dato.nu b::before,.status.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);animation:puls 1.5s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 65%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.ind{min-width:0;flex:1}
.kat{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--f)}
.eks{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.08em;color:var(--dæmp);border:1px dashed var(--dæmp);border-radius:5px;padding:0 5px;opacity:.8}
.kortk h3{font-family:var(--serif);font-size:18.5px;font-weight:600;line-height:1.15;margin:5px 0 4px}
.naar{font-size:12.5px;color:var(--dæmp)}
.status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;margin-top:8px;padding:3px 9px;border-radius:999px;background:var(--svag)}
.status.live{background:color-mix(in srgb,var(--live) 13%,transparent);color:var(--live)}
.kortk img{flex:0 0 52px;width:52px;height:65px;object-fit:cover;border-radius:8px;border:1px solid var(--linje)}
.sevrk{display:flex;align-items:center;gap:10px;width:100%;padding:8px 6px;border-bottom:1px solid var(--linje);font-weight:500;font-size:14px;border-radius:6px}
.sevrk i{width:8px;height:8px;transform:rotate(45deg);border:1.5px solid var(--f)}
.sevrk:hover{background:var(--svag)}
.tom{padding:26px 10px;text-align:center;color:var(--dæmp);font-size:14px}
.fod{margin-top:22px;font-size:10.5px;color:var(--dæmp);line-height:1.55}

/* Detalje */
.dhoved{display:flex;align-items:center;justify-content:space-between;margin:-4px 0 14px}
.tilbage,.del{font-size:12px;font-weight:600;color:var(--dæmp);padding:6px 10px;border-radius:999px;background:var(--svag);display:inline-flex;align-items:center;gap:6px}
.tilbage:hover,.del:hover{color:var(--blæk)}
#detalje h2{font-family:var(--serif);font-size:29px;line-height:1.06;font-weight:600;letter-spacing:-.01em;margin:8px 0 10px}
#detalje .naar{font-size:14px;color:var(--blæk);font-weight:500}
#detalje .kortt{margin:14px 0 2px;font-size:15px;line-height:1.5}
#detalje h3{margin:22px 0 8px}
#detalje ul{list-style:none}
.hero{width:100%;border-radius:14px;border:1px solid var(--linje);margin:12px 0 2px;aspect-ratio:4/5;object-fit:cover;max-height:300px;object-position:top}
.adgang li{position:relative;padding:8px 0 8px 18px;border-bottom:1px solid var(--linje);font-size:14px}
.adgang li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--f)}
.handl{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.handl button,.handl a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:600;font-size:13px;background:var(--blæk);color:var(--papir);text-decoration:none;transition:transform .2s var(--ease)}
.handl button:hover,.handl a:hover{transform:translateY(-1px)}
.handl .sek{background:var(--svag);color:var(--blæk)}
/* Følg løbet */
.forløb{margin-top:18px;padding:14px;border-radius:16px;background:var(--flade2);border:1px solid var(--linje)}
.forløb h3{margin:0 0 4px!important}
.forløb output{display:block;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.forløb p{font-size:13px;color:var(--dæmp);margin-top:2px;min-height:19px}
.forløb input{width:100%;margin-top:10px;accent-color:var(--f)}
.forkl{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--dæmp)}
.forkl span{display:inline-flex;align-items:center;gap:6px}
.forkl i{width:16px;height:4px;border-radius:4px;background:var(--c)}
.spotliste button{display:flex;gap:12px;align-items:flex-start;width:100%;padding:8px 4px;border-radius:10px}
.spotliste button:hover{background:var(--svag)}
.spotliste small{display:block;color:var(--dæmp);font-size:12.5px}
.spotliste em{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;margin-top:3px}
.spotliste em.fri{background:color-mix(in srgb,var(--fri) 15%,transparent);color:var(--fri)}
.spotliste em.lukket{background:color-mix(in srgb,var(--live) 14%,transparent);color:var(--live)}
.kilde{margin-top:22px;padding-top:12px;border-top:1px solid var(--linje);font-family:var(--mono);font-size:10px;color:var(--dæmp);text-transform:uppercase;letter-spacing:.05em;line-height:1.6}

/* På kortet: piller og spots */
.pille{display:flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--flade2);color:var(--blæk);font:600 12px/1 var(--sans);white-space:nowrap;border:1px solid var(--linje);box-shadow:0 8px 20px -8px rgba(18,17,16,.5);transition:opacity .3s,transform .25s var(--ease),padding .25s;animation:pop .5s var(--ease) both}
.pille:hover{transform:scale(1.05)}
.pille i{position:relative;width:24px;height:24px;border-radius:50%;background:var(--f);color:#fff;display:grid;place-items:center;flex:0 0 24px}
.pille.live i::after{content:"";position:absolute;inset:0;border-radius:50%;animation:ring 1.8s var(--ease) infinite;box-shadow:0 0 0 0 var(--f)}
@keyframes ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--f) 70%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
.pille.dæmpet{opacity:.3}
.pille.aktiv{border-color:var(--f)}
.lavt .pille{padding:4px}
.lavt .pille span{display:none}
.spot{min-width:28px;height:28px;padding:0 5px;border-radius:999px;background:var(--flade2);border:2px solid var(--f);color:var(--f);display:grid;place-items:center;font:800 10.5px/1 var(--sans);box-shadow:0 5px 12px -4px rgba(18,17,16,.55);cursor:pointer;flex:0 0 auto;animation:pop .5s var(--ease) both;animation-delay:var(--d,0s)}
.spot.start,.spot.scene{background:var(--f);color:#fff;min-width:34px;height:34px;font-size:13px}
.spot.km,.spot.nr{border-width:1.5px;font-family:var(--mono);font-weight:500}
.spot.spærret{background:var(--live);border-color:var(--live);color:#fff}
@keyframes pop{from{opacity:0;scale:.2}}
.løber{padding:4px 9px;border-radius:999px;font:700 10.5px/1 var(--sans);letter-spacing:.04em;color:#fff;background:var(--f);box-shadow:0 0 0 4px color-mix(in srgb,var(--f) 28%,transparent),0 6px 14px -4px rgba(0,0,0,.5);white-space:nowrap}
.løber.bag{background:var(--fri);--f:var(--fri)}
.mig{width:18px;height:18px;border-radius:50%;background:#2f7df6;border:3px solid #fff;box-shadow:0 0 0 8px rgba(47,125,246,.22),0 2px 8px rgba(0,0,0,.4)}
.maplibregl-popup-content{font-family:var(--sans);background:var(--flade2);color:var(--blæk);border-radius:12px;padding:10px 13px;box-shadow:0 14px 34px -10px rgba(0,0,0,.5);font-size:13px;max-width:230px}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--flade2)}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--flade2)}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--flade2)}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--flade2)}
.maplibregl-popup-content b{display:block;font-size:13.5px}
.maplibregl-popup-content span{color:var(--dæmp)}

/* Tidslinje */
.tid{position:fixed;left:24px;bottom:24px;z-index:3;width:min(660px,calc(100vw - 470px));padding:10px 14px 10px 10px;display:flex;gap:12px;align-items:center}
#spil,#nu{flex:0 0 auto;height:40px;border-radius:999px;background:var(--blæk);color:var(--papir);display:grid;place-items:center;transition:transform .2s var(--ease)}
#spil{width:40px}
#nu{padding:0 14px;font-weight:700;font-size:12px;background:var(--live);color:#fff}
#spil:hover,#nu:hover{transform:scale(1.06)}
.strip{position:relative;flex:1;height:58px;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none}
#dage,#spor{position:absolute;inset:0;pointer-events:none}
#dage .we{position:absolute;top:0;bottom:16px;background:var(--svag);border-radius:4px}
#dage .d{position:absolute;bottom:0;transform:translateX(-50%);font-family:var(--mono);font-size:9px;color:var(--dæmp);white-space:nowrap}
#dage .d::before{content:"";position:absolute;left:50%;bottom:15px;width:1px;height:5px;background:var(--linje)}
#dage .d.man{color:var(--blæk);font-weight:600}
#dage .d.man::before{height:42px;background:var(--linje)}
#spor i{position:absolute;height:5px;border-radius:5px;background:var(--f);min-width:5px}
#naal{position:absolute;top:-2px;bottom:12px;width:2px;margin-left:-1px;background:var(--live);border-radius:2px;pointer-events:none;transition:left .08s linear}
#naal::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--live);border:2.5px solid var(--flade2);box-shadow:0 2px 8px rgba(0,0,0,.35)}
#naaltekst{position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:var(--blæk);color:var(--papir);font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;white-space:nowrap;opacity:0;transition:opacity .2s}
#naal.flyttet #naaltekst{opacity:1}
#skyder{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}

.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,20px);z-index:30;background:var(--blæk);color:var(--papir);padding:10px 18px;border-radius:999px;font-weight:600;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);box-shadow:var(--skygge);max-width:90vw;text-align:center}
.toast.vis{opacity:1;transform:translate(-50%,0)}

/* Mobil */
@media (max-width:860px){
  .venstre{left:10px;right:10px;top:max(10px,env(safe-area-inset-top));max-width:none;gap:8px;align-items:stretch}
  .top{padding:10px 10px 9px 14px;border-radius:18px;justify-content:space-between;gap:10px}
  h1{font-size:23px;margin:2px 0 3px}
  .sc{font-size:8.5px}
  .knapper button{width:34px;height:34px}
  .filter{flex-wrap:nowrap;overflow-x:auto;margin:0 -10px;padding:2px 10px 8px;scrollbar-width:none}
  .filter::-webkit-scrollbar{display:none}
  .panel{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:24px 24px 0 0;max-height:47vh;padding-bottom:env(safe-area-inset-bottom)}
  #oversigt{padding:12px 0 8px;overflow:visible}
  .panelhoved{padding:0 14px;margin-bottom:10px}
  .panelhoved strong{font-size:15px}
  #liste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 14px 6px;gap:10px;scrollbar-width:none}
  #liste::-webkit-scrollbar{display:none}
  #liste section{display:contents}
  #liste h4,.sevsek{display:none!important}
  .kortk{flex:0 0 80%;max-width:310px;scroll-snap-align:center;margin-top:0!important}
  .kortk h3{font-size:17px}
  .tom{flex:1}
  .fod{font-size:9px;padding:0 14px;margin-top:4px}
  .fod br{display:none}
  #detalje{padding:14px 16px 22px}
  #detalje h2{font-size:23px}
  .hero{max-height:190px}
  .tid{left:10px;right:10px;width:auto;bottom:calc(var(--ark) + 10px);padding:7px 10px 7px 7px;border-radius:18px;transition:opacity .25s}
  #spil,#nu{height:36px}#spil{width:36px}
  .strip{height:50px}
  #dage .d:not(.man){font-size:0}
  body.detalje .tid{opacity:0;pointer-events:none}
  .toast{bottom:calc(var(--ark) + 80px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
#ur{white-space:nowrap}
.strip:focus-within{outline:2px solid var(--guld);outline-offset:4px;border-radius:8px}
@media (max-width:860px){#ur{font-size:9.5px}}
.pille.kompakt{padding:4px}.pille.kompakt span{display:none}

/* v3: mindre ramme, mere kort */
.venstre{left:20px;top:20px;max-width:none}
.top{align-items:center;gap:12px;padding:7px 8px 7px 18px;border-radius:999px}
.top>svg{color:var(--guld);flex:0 0 auto}
h1{font-size:23px;margin:0}
#ur{padding-left:12px;border-left:1px solid var(--linje)}
.knapper{margin-left:4px}
.knapper button{width:36px;height:36px}
.panel{right:20px;top:20px;bottom:20px}
.tid{left:20px;bottom:20px}
.panel .filter{gap:6px;margin:-4px 0 18px}
.panel .chip{background:var(--svag);border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:4px 10px 4px 4px;font-size:11.5px}
.panel .chip i{width:20px;height:20px}
.panel .chip i svg{width:12px;height:12px}
.spot svg{display:block}
.greb{display:none}
@media (max-width:860px){
  .venstre{left:10px;right:auto;top:max(10px,env(safe-area-inset-top));align-items:flex-start}
  .top{padding:5px 6px 5px 14px;gap:9px}
  h1{font-size:19px}
  #ur{display:none}
  .knapper button{width:32px;height:32px}
  .panel{right:0;top:auto;bottom:0;transition:max-height .4s var(--ease)}
  .panel[data-ark="lav"]{max-height:76px}
  .panel[data-ark="høj"]{max-height:86vh}
  .greb{display:block;width:100%;height:22px;flex:0 0 22px;position:relative;cursor:grab;touch-action:none}
  .greb::after{content:"";position:absolute;left:50%;top:9px;width:38px;height:4px;margin-left:-19px;border-radius:4px;background:var(--dæmp);opacity:.45}
  #oversigt{padding-top:0}
  #detalje{padding-top:2px}
  .panel .filter{flex-wrap:nowrap;overflow-x:auto;margin:0 0 10px;padding:0 14px;scrollbar-width:none}
  .panel[data-ark="høj"] #oversigt{overflow-y:auto}
  .panel[data-ark="høj"] #liste{flex-direction:column;overflow:visible}
  .panel[data-ark="høj"] .kortk{flex:0 0 auto;max-width:none}
}
@media (max-width:860px){.tid{left:10px;bottom:calc(var(--ark) + 10px)}}
.kilde a{color:var(--blæk);text-underline-offset:2px}
.vindue button{padding:6px 8px}

/* v4: instrumenter – mørkt glas, guld og mono (topbar, lag-skinne, tidslinje) */
.hud{--h-bg:rgba(17,16,14,.86);--h-tekst:#f1ede3;--h-dæmp:#a8a294;--h-linje:rgba(241,237,227,.13);--h-guld:#d2b574;--h-live:#ff6b4a;
  background:var(--h-bg);color:var(--h-tekst);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(210,181,116,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 54px -20px rgba(0,0,0,.65)}
[data-tema="nat"] .hud{--h-bg:rgba(24,26,32,.84)}
.hud .mono{color:var(--h-dæmp)}
.venstre{gap:10px}
/* Topbar */
.bar{display:flex;align-items:center;gap:14px;height:54px;padding:0 9px 0 12px;border-radius:999px}
.emblem{color:var(--h-guld);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:0 0 auto;transition:background .2s}
.emblem:hover{background:rgba(210,181,116,.14)}
.emblem path{transform-origin:12px 12px;transition:transform .25s var(--ease)}
.bar h1{font-size:22px;margin:0;color:var(--h-tekst)}
.bar h1 i{color:#ff8a6b}
.puls{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;background:rgba(255,107,74,.15);color:#ff9a80;font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.puls i{width:7px;height:7px;border-radius:50%;background:var(--h-live);animation:hudpuls 1.6s infinite}
.puls b{font:600 12px/1 var(--mono);letter-spacing:0;color:#fff}
@keyframes hudpuls{0%{box-shadow:0 0 0 0 rgba(255,107,74,.7)}100%{box-shadow:0 0 0 9px transparent}}
.puls.rejse{background:rgba(210,181,116,.15);color:var(--h-guld)}
.puls.rejse i{background:var(--h-guld);animation:none}
.ur,.pos{display:flex;flex-direction:column;justify-content:center;padding-left:14px;border-left:1px solid var(--h-linje);white-space:nowrap;align-self:stretch;margin:10px 0}
.ur span{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1.2}
.ur b{font-size:15px;font-weight:500;color:var(--h-tekst);letter-spacing:.05em;line-height:1.15;font-variant-numeric:tabular-nums;min-width:74px}
.pos{font-size:9px;line-height:1.4;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.bar .knapper{margin-left:0;padding-left:12px;border-left:1px solid var(--h-linje);gap:5px}
.bar .knapper button{background:rgba(241,237,227,.09);color:var(--h-tekst)}
.bar .knapper button:hover{background:rgba(241,237,227,.2)}
.bar .knapper button[aria-pressed="true"],.bar .knapper button.til{background:var(--h-guld);color:#15130e}
@media (max-width:1240px){.pos{display:none}}
/* Lag-skinne */
.skinne{display:flex;flex-direction:column;gap:5px;padding:7px;border-radius:28px;align-self:flex-start}
.sk{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--f);box-shadow:0 0 16px -3px var(--f);transition:transform .2s var(--ease),background .25s,color .25s,box-shadow .25s,opacity .25s}
.sk svg{width:17px;height:17px}
.sk:hover{transform:scale(1.09)}
.sk[aria-pressed="false"]{background:transparent;color:var(--f);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--f) 75%,transparent);opacity:.7}
.sk b{position:absolute;right:-4px;top:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#f1ede3;color:#15130e;font:600 9.5px/17px var(--mono);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.sk b[data-n="0"]{display:none}
.sk>span{position:absolute;left:52px;top:50%;transform:translate(-8px,-50%);opacity:0;pointer-events:none;white-space:nowrap;background:rgba(17,16,14,.94);color:#f1ede3;border:1px solid rgba(210,181,116,.26);padding:7px 12px;border-radius:12px;font:600 12px/1.25 var(--sans);text-align:left;transition:opacity .18s,transform .22s var(--ease);box-shadow:0 12px 28px -10px rgba(0,0,0,.6)}
.sk>span small{display:block;font:500 9.5px/1.3 var(--mono);color:#a8a294;letter-spacing:.04em;margin-top:2px}
.sk:hover>span,.sk:focus-visible>span{opacity:1;transform:translate(0,-50%)}
.sk.alle{background:rgba(241,237,227,.1);color:#f1ede3;font:700 8.5px/1 var(--sans);letter-spacing:.12em;box-shadow:none;opacity:1}
.sk.alle[aria-pressed="true"]{background:var(--h-guld);color:#15130e}
.skdel{height:1px;background:var(--h-linje);margin:2px 9px}
/* Tidslinje */
.tl{position:fixed;left:20px;bottom:20px;z-index:3;width:min(740px,calc(100vw - 470px));padding:10px 16px 9px;border-radius:22px}
.tlhoved{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.tlnu{display:inline-flex;align-items:center;gap:7px;font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#ff9a80;white-space:nowrap}
.tlnu::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--h-live);animation:hudpuls 1.6s infinite}
.tl.rejse .tlnu{color:var(--h-guld)}
.tl.rejse .tlnu::before{background:var(--h-guld);animation:none}
#tllabel{font-size:12px;color:var(--h-tekst);letter-spacing:.05em;padding-left:10px;border-left:1px solid var(--h-linje);font-variant-numeric:tabular-nums}
.tlfri{flex:1}
.tl button{height:30px;min-width:30px;padding:0 10px;border-radius:999px;background:rgba(241,237,227,.09);color:var(--h-tekst);font:600 10.5px/1 var(--mono);display:grid;place-items:center;transition:background .2s,transform .2s var(--ease)}
.tl button:hover{background:rgba(241,237,227,.2)}
.tl #spil{width:34px;height:34px;padding:0;background:var(--h-guld);color:#15130e;flex:0 0 auto}
.tl #nu{height:30px;padding:0 12px;background:var(--h-live);color:#fff;font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.tl .strip{--trin:5px;--baner:6;height:calc(var(--baner) * var(--trin) + 28px);flex:none}
.tl #dage::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:1px;background:rgba(241,237,227,.2)}
.tl #dage .we{top:0;bottom:17px;background:rgba(241,237,227,.05);border-radius:3px}
.tl #dage .d{bottom:0;font:500 8.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--h-dæmp)}
.tl #dage .d::before{bottom:13px;height:4px;background:rgba(241,237,227,.3)}
.tl #dage .d.man{color:var(--h-tekst);font-weight:500}
.tl #dage .d.man::before{height:9px;background:rgba(241,237,227,.75)}
.tl #spor{inset:auto;left:0;right:0;top:0;bottom:24px;pointer-events:none}
.tl #spor i{height:3px;border-radius:3px;background:var(--f);min-width:4px;box-shadow:0 0 7px -1px var(--f);pointer-events:auto;cursor:pointer;transition:filter .15s,transform .15s}
.tl #spor i:hover{filter:brightness(1.4);transform:scaleY(2)}
.tl #naal{top:-5px;bottom:12px;width:1.5px;margin-left:-.75px;background:var(--h-guld);border-radius:0;box-shadow:0 0 10px 1px rgba(210,181,116,.7)}
.tl #naal::after{bottom:-5px;width:9px;height:9px;margin-left:-4.5px;border:0;border-radius:1px;transform:rotate(45deg);background:var(--h-guld);box-shadow:0 0 8px rgba(210,181,116,.8)}
#sportip{position:absolute;bottom:calc(100% + 8px);transform:translateX(-50%);background:#f1ede3;color:#15130e;font:600 11.5px/1 var(--sans);padding:6px 11px;border-radius:999px;white-space:nowrap;pointer-events:none;box-shadow:0 10px 24px -8px rgba(0,0,0,.7);z-index:2}
.tl .strip:focus-within{outline:2px solid var(--h-guld);outline-offset:5px;border-radius:6px}
@media (min-width:861px){.panel .filter{display:none}}
@media (max-width:860px){
  .bar{height:46px;gap:10px;padding:0 6px 0 9px}
  .bar h1{font-size:18.5px}
  .puls,.ur,.pos,.skinne{display:none}
  .bar .knapper{padding-left:9px}
  .tl{left:10px;right:10px;width:auto;bottom:calc(var(--ark) + 10px);padding:8px 12px 7px;border-radius:18px;transition:opacity .25s}
  .tl .strip{--trin:3px}
  .tl #spor i{height:2px}
  .tlhoved{margin-bottom:6px}
  #dagm,#dagp{display:none}
  body.detalje .tl{opacity:0;pointer-events:none}
}
.tl .strip{--trin:7px}
.tl #spor i{height:4px;opacity:.62;box-shadow:none;min-width:5px}
.tl #spor i:hover{opacity:1;filter:none;transform:scaleY(1.6)}
@media (max-width:860px){.tl .strip{--trin:5px}.tl #spor i{height:3px}}

/* v5: panelet og kortene – samme mørke glas som instrumenterne */
.panel.hud{--papir:#0f1115;--flade2:rgba(241,237,227,.055);--blæk:#f1ede3;--dæmp:#a8a294;--linje:rgba(241,237,227,.12);--svag:rgba(241,237,227,.08);--live:#ff6b4a;--fri:#3fbf98;--guld:#d2b574;color:var(--blæk);border-radius:26px;width:404px}
.panel.hud #oversigt,.panel.hud #detalje{scrollbar-color:rgba(241,237,227,.2) transparent}
.phoved{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
#antal{display:flex;gap:22px;align-items:baseline}
#antal span{display:flex;align-items:baseline;gap:8px}
#antal b{font:500 32px/1 var(--mono);letter-spacing:-.03em;color:var(--blæk);font-variant-numeric:tabular-nums}
#antal span:first-child b{color:#ff8a6b}
#antal small{font:700 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dæmp)}
.søg{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;border-radius:999px;background:var(--svag);border:1px solid transparent;color:var(--dæmp);transition:border-color .2s,background .2s;cursor:text}
.søg:focus-within{border-color:rgba(210,181,116,.55);background:rgba(241,237,227,.11);color:var(--guld)}
.søg input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--blæk);font:500 13.5px var(--sans)}
.søg input::placeholder{color:var(--dæmp)}
.søg input::-webkit-search-cancel-button{filter:invert(1);opacity:.6}
.panel .vindue{display:grid;grid-template-columns:repeat(5,1fr);background:var(--svag);padding:3px;border-radius:999px}
.panel .vindue button{padding:7px 0;text-align:center;font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dæmp);border-radius:999px}
.panel .vindue button[aria-pressed="true"]{background:var(--guld);color:#15130e}
.panel.hud #liste h4{color:var(--dæmp)}
/* Kort i listen */
.kk{position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:13px;align-items:center;width:100%;padding:13px 14px 13px 14px;border-radius:16px;background:var(--flade2);border:1px solid var(--linje);overflow:hidden;animation:ind .5s var(--ease) both;transition:transform .25s var(--ease),background .25s,border-color .25s}
.kk+.kk{margin-top:7px}
.kk::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--f);box-shadow:0 0 14px 1px var(--f)}
.kk:hover{transform:translateX(3px);background:rgba(241,237,227,.1);border-color:color-mix(in srgb,var(--f) 65%,transparent)}
#liste.rolig .kk{animation:none}
.kv{display:grid;place-items:center}
.ring{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--f);color:#fff}
.ring svg{width:17px;height:17px}
.ring::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--f);animation:ringud 2.2s var(--ease) infinite}
@keyframes ringud{0%{transform:scale(.88);opacity:.75}100%{transform:scale(1.4);opacity:0}}
.dt{display:flex;flex-direction:column;align-items:center}
.dt b{font:600 27px/1 var(--serif);color:var(--blæk)}
.dt small{font:700 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dæmp);margin-top:5px}
.kk .ind{min-width:0}
.panel.hud .kat{color:color-mix(in srgb,var(--f) 60%,#fff);font-size:9px}
.kk h3{font:600 17.5px/1.16 var(--serif);margin:4px 0 4px;color:var(--blæk)}
.kk .naar{display:block;font:400 11.5px/1.4 var(--sans);color:var(--dæmp)}
.frem{display:block;height:3px;border-radius:3px;background:var(--svag);margin-top:9px;overflow:hidden}
.frem i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--f) 45%,transparent),var(--f));box-shadow:0 0 8px var(--f);transition:width .6s var(--ease)}
.tæl{display:flex;flex-direction:column;align-items:center;min-width:42px;font-family:var(--mono);color:var(--dæmp)}
.tæl small{font-size:8.5px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase}
.tæl b{font-size:20px;font-weight:500;color:var(--blæk);line-height:1.1;font-variant-numeric:tabular-nums}
.tæl.live{flex-direction:row;gap:6px;font:700 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#ff9a80}
.tæl.live i{width:7px;height:7px;border-radius:50%;background:var(--live);animation:hudpuls 1.6s infinite}
.pille.fokus{transform:scale(1.14);border-color:var(--f);box-shadow:0 0 0 5px color-mix(in srgb,var(--f) 30%,transparent),0 8px 20px -8px rgba(18,17,16,.5)}
/* Detalje */
.dtop{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dtop .kat{flex:1}
.dikon{width:44px;height:44px;border-radius:50%;background:var(--f);color:#fff;display:grid;place-items:center;box-shadow:0 0 24px -4px var(--f);flex:0 0 auto}
.dikon svg{width:20px;height:20px}
.panel.hud #detalje h2{font-size:30px;margin:0 0 8px}
.panel.hud #detalje .naar{color:var(--dæmp);font-weight:400;font-size:13.5px}
.ned{margin:16px 0 4px;padding:14px 16px;border-radius:16px;background:var(--flade2);border:1px solid var(--linje)}
.ned small{display:block;font:700 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dæmp);margin-bottom:9px}
.ned.live small{color:#ff9a80}
.ned .tal{display:flex;align-items:baseline;font-family:var(--mono);font-variant-numeric:tabular-nums}
.ned .tal b{font-size:30px;font-weight:500;line-height:1;color:var(--blæk);letter-spacing:-.02em}
.ned .tal i{font-style:normal;font-size:10px;color:var(--dæmp);margin:0 12px 0 4px;text-transform:uppercase;letter-spacing:.1em}
.ned p{font:500 15px/1.3 var(--sans);color:var(--blæk)}
.ned .frem{margin-top:12px;height:4px}
.panel.hud .handl button,.panel.hud .handl a{background:var(--guld);color:#15130e}
.panel.hud .handl .sek{background:var(--svag);color:var(--blæk)}
.panel.hud .forløb output{color:var(--blæk)}
.panel.hud .fod{color:#7d786d}
.panel.hud .sevrk{color:var(--blæk)}
.panel.hud .greb::after{background:#f1ede3}
@media (max-width:860px){
  .panel.hud{width:auto;border-radius:24px 24px 0 0}
  .phoved{padding:0 14px;gap:9px;margin-bottom:10px}
  #antal b{font-size:24px}
  .søg{display:none}
  .panel[data-ark="høj"] .søg{display:flex}
  .kk{flex:0 0 86%;max-width:340px;scroll-snap-align:center;margin-top:0!important}
  .panel[data-ark="høj"] .kk{flex:0 0 auto;max-width:none}
  .panel.hud #detalje h2{font-size:24px}
  .ned .tal b{font-size:25px}
}

/* v6: mærkerne på kortet */
.mrk{display:flex;flex-direction:column;align-items:center;cursor:pointer;animation:pop .55s var(--ease) both}
.kap{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:rgba(17,16,14,.94);color:#f1ede3;border:1px solid rgba(210,181,116,.32);box-shadow:0 12px 26px -10px rgba(0,0,0,.7);font:600 12px/1 var(--sans);white-space:nowrap;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s,padding .2s}
.kap i{width:26px;height:26px;border-radius:50%;background:var(--f);color:#fff;display:grid;place-items:center;flex:0 0 26px;box-shadow:0 0 14px -2px var(--f)}
.kap em{font:500 9.5px/1 var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#a8a294;padding-left:8px;border-left:1px solid rgba(241,237,227,.18)}
.mrk.live .kap em{color:#ff9a80}
.stilk{width:1.5px;height:13px;background:var(--f);opacity:.85}
.grund{position:relative;width:8px;height:8px;border-radius:50%;background:var(--f);box-shadow:0 0 0 2px rgba(255,255,255,.92),0 0 10px var(--f)}
.mrk.live .grund::before,.mrk.live .grund::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--f);animation:radar 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.mrk.live .grund::after{animation-delay:1.3s}
@keyframes radar{0%{transform:scale(.6);opacity:.9}100%{transform:scale(5);opacity:0}}
.mrk:hover .kap,.mrk.fokus .kap{transform:translateY(-3px) scale(1.05);border-color:var(--f);box-shadow:0 0 0 4px color-mix(in srgb,var(--f) 30%,transparent),0 16px 30px -10px rgba(0,0,0,.7)}
.mrk.aktiv .kap{border-color:#d2b574}
.mrk.kompakt .kap,.lavt .mrk .kap{padding:4px;gap:0}
.mrk.kompakt .navn,.mrk.kompakt em,.lavt .mrk .navn,.lavt .mrk em{display:none}
.mrk.kompakt:hover .kap,.lavt .mrk:hover .kap{padding:4px 12px 4px 4px;gap:8px}
.mrk.kompakt:hover .navn,.lavt .mrk:hover .navn{display:inline}
.maplibregl-marker:hover,.maplibregl-marker:focus-within{z-index:6}
/* Punkter på ruter, løbere og bobler */
.spot{background:rgba(17,16,14,.92);border:1.5px solid var(--f);color:color-mix(in srgb,var(--f) 50%,#fff);box-shadow:0 0 0 3px rgba(17,16,14,.22),0 8px 16px -6px rgba(0,0,0,.7);transition:transform .2s var(--ease)}
.spot:hover{transform:scale(1.15)}
.spot.start,.spot.scene{background:var(--f);border-color:var(--f);color:#fff;box-shadow:0 0 20px -2px var(--f),0 0 0 3px rgba(17,16,14,.25)}
.spot.km,.spot.nr{border-color:rgba(241,237,227,.4);color:#f1ede3;font-weight:500}
.spot.spærret{background:#ff6b4a;border-color:#ff6b4a;color:#fff}
.løber{background:rgba(17,16,14,.92);color:#f1ede3;border:1px solid var(--f);box-shadow:0 0 16px -3px var(--f),0 8px 16px -6px rgba(0,0,0,.6);display:flex;align-items:center;gap:6px;font-weight:600}
.løber::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--f);box-shadow:0 0 8px var(--f)}
.løber.bag{--f:#3fbf98;background:rgba(17,16,14,.92)}
.maplibregl-popup-content{background:rgba(17,16,14,.95);color:#f1ede3;border:1px solid rgba(210,181,116,.3);box-shadow:0 16px 36px -12px rgba(0,0,0,.8)}
.maplibregl-popup-content span{color:#a8a294}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:rgba(17,16,14,.95)}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:rgba(17,16,14,.95)}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:rgba(17,16,14,.95)}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:rgba(17,16,14,.95)}
.panel.hud .spotliste .spot{box-shadow:none}
.løber.bag{border-color:#3fbf98;box-shadow:0 0 16px -3px #3fbf98,0 8px 16px -6px rgba(0,0,0,.6)}
.løber.bag::before{background:#3fbf98;box-shadow:0 0 8px #3fbf98}

/* v7: bevægelse og overgange */
#detalje:not([hidden]){animation:glidind .5s var(--ease) both}
#oversigt:not([hidden]){animation:glidtilbage .45s var(--ease) both}
@keyframes glidind{from{opacity:0;transform:translateX(26px)}}
@keyframes glidtilbage{from{opacity:0;transform:translateX(-18px)}}
#detalje>*{animation:op .55s var(--ease) both}
#detalje>*:nth-child(1){animation-delay:.02s}#detalje>*:nth-child(2){animation-delay:.07s}#detalje>*:nth-child(3){animation-delay:.12s}
#detalje>*:nth-child(4){animation-delay:.17s}#detalje>*:nth-child(5){animation-delay:.22s}#detalje>*:nth-child(6){animation-delay:.27s}
#detalje>*:nth-child(7){animation-delay:.32s}#detalje>*:nth-child(8){animation-delay:.37s}#detalje>*:nth-child(n+9){animation-delay:.42s}
@keyframes op{from{opacity:0;transform:translateY(12px)}}
.dikon{animation:ikonind .7s var(--ease) both}
@keyframes ikonind{from{transform:scale(.3) rotate(-30deg);opacity:0}}
#antal b{display:inline-block;animation:tik .45s var(--ease)}
@keyframes tik{from{opacity:0;transform:translateY(-10px)}}
.frem i{transform-origin:left;animation:fyld 1s var(--ease) both}
@keyframes fyld{from{transform:scaleX(0)}}
#liste.rolig .frem i,.ned .frem i{animation:none}
.mrk.ud{animation:mrkud .26s ease-in both}
@keyframes mrkud{to{opacity:0;transform:translateY(8px) scale(.6)}}
.mrk .grund{animation:grundind .6s var(--ease) both}
@keyframes grundind{from{transform:scale(0)}}
.mrk .stilk{transform-origin:bottom;animation:stilkind .45s .1s var(--ease) both}
@keyframes stilkind{from{transform:scaleY(0)}}
.hud button:active,.kk:active,.chip:active{transform:scale(.96)}
.sk:active{transform:scale(.9)}
.bar,.skinne,.tl,.panel.hud{animation:hudind .9s var(--ease) backwards}
.skinne{animation-delay:.12s}.tl{animation-delay:.2s}.panel.hud{animation-delay:.08s}
@keyframes hudind{from{opacity:0;transform:translateY(14px)}}
.velkomst:not(.væk)~.venstre .bar,.velkomst:not(.væk)~.venstre .skinne,.velkomst:not(.væk)~.panel,.velkomst:not(.væk)~.tl{animation-play-state:paused}
.ned .tal b{transition:color .3s}

/* v8: let at forstå – lag med navne, hjælp, solens tider, målestok */
.skinne{padding:10px 8px 6px;border-radius:20px;gap:1px;width:238px}
.skhoved{display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px 8px;font:700 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--h-dæmp)}
.skalle{font:600 10px/1 var(--mono);letter-spacing:.03em;text-transform:none;color:var(--h-guld);padding:6px 9px;border-radius:999px;background:rgba(210,181,116,.13)}
.skalle:hover{background:rgba(210,181,116,.24)}
.lg{display:grid;grid-template-columns:28px 1fr auto 30px;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:12px;color:var(--h-tekst);transition:background .2s,opacity .25s}
.lg:hover{background:rgba(241,237,227,.08)}
.lg i{width:28px;height:28px;border-radius:50%;background:var(--f);color:#fff;display:grid;place-items:center;box-shadow:0 0 12px -3px var(--f);transition:background .25s,color .25s,box-shadow .25s}
.lg .skn{font:600 12.5px/1.2 var(--sans);text-align:left;white-space:nowrap}
.lg b{font:500 11px/1 var(--mono);color:var(--h-dæmp);font-variant-numeric:tabular-nums}
.lg em{position:relative;width:30px;height:16px;border-radius:999px;background:var(--f);transition:background .25s}
.lg em::after{content:"";position:absolute;top:2px;left:16px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .25s var(--ease)}
.lg[aria-pressed="false"]{opacity:.6}
.lg[aria-pressed="false"] i{background:transparent;color:var(--f);box-shadow:inset 0 0 0 1.5px var(--f)}
.lg[aria-pressed="false"] em{background:rgba(241,237,227,.18)}
.lg[aria-pressed="false"] em::after{left:2px}
.skhint{font:500 9.5px/1.3 var(--mono);color:#7d786d;padding:7px 8px 3px;letter-spacing:.02em}
@media (max-width:1180px) and (min-width:861px){
  .skinne{width:auto;padding:7px}
  .lg{grid-template-columns:28px;padding:5px}
  .lg .skn,.lg b,.lg em,.skhoved span,.skhint{display:none}
  .skhoved{padding:0 0 6px;justify-content:center}
  .skalle{font-size:0;padding:5px 6px;white-space:nowrap}
  .skalle::after{content:attr(data-kort);font-size:9px}
}
/* Solens tider i topbaren */
.pos{font-size:9px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase}
.pos span{display:flex;justify-content:space-between;gap:10px}
.pos b{color:var(--h-tekst);font-weight:500;letter-spacing:.04em}
/* Dag/nat-knappen viser, når den følger solen */
#tema{position:relative}
#tema[data-valg="auto"]::after{content:"A";position:absolute;right:-3px;top:-3px;width:15px;height:15px;border-radius:50%;background:var(--h-guld);color:#15130e;font:700 9px/15px var(--sans);text-align:center}
/* Hjælp */
.prk{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rund{width:30px;height:30px;border-radius:50%;background:var(--svag);color:var(--dæmp);font:600 14px/1 var(--serif);display:grid;place-items:center;flex:0 0 auto;transition:background .2s,color .2s}
.rund:hover{background:rgba(210,181,116,.22);color:var(--guld)}
.hjbag{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;background:rgba(10,10,9,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeind .35s ease both}
@keyframes fadeind{from{opacity:0}}
.hjkort{width:min(440px,100%);padding:28px 28px 24px;border-radius:26px;animation:op .5s var(--ease) both}
.hjkort .sc{color:var(--h-guld)}
.hjkort h2{font:600 30px/1.08 var(--serif);margin:8px 0 8px;letter-spacing:-.01em}
.hjlead{font-size:15px;line-height:1.45;color:#d8d3c6}
.hjkort ol{list-style:none;margin:20px 0 4px;display:grid;gap:14px}
.hjkort li{display:flex;gap:14px;align-items:flex-start}
.hjkort li i{flex:0 0 30px;height:30px;border-radius:50%;border:1px solid rgba(210,181,116,.5);color:var(--h-guld);font:500 13px/28px var(--mono);font-style:normal;text-align:center}
.hjkort li b{display:block;font-size:15px;font-weight:600}
.hjkort li span{display:block;font-size:13.5px;line-height:1.4;color:var(--h-dæmp);margin-top:2px}
.hjtast{margin-top:18px;padding-top:14px;border-top:1px solid var(--h-linje);font-size:10px;line-height:1.6;letter-spacing:.03em}
.hjfod{font-size:12.5px;color:var(--h-dæmp);margin-top:10px}
#hjluk{margin-top:18px;width:100%;height:46px;border-radius:999px;background:var(--h-guld);color:#15130e;font:700 14px var(--sans);text-align:center;transition:transform .2s var(--ease)}
#hjluk:hover{transform:translateY(-1px)}
/* Tidslinje: vink og baneprikker */
.tlhint{font:500 10.5px/1 var(--mono);color:var(--h-guld);letter-spacing:.03em;white-space:nowrap;animation:vink 2.4s ease-in-out infinite}
@keyframes vink{50%{opacity:.45;transform:translateX(-3px)}}
.tl.brugt .tlhint{display:none}
.tl #spor u{position:absolute;left:-9px;width:4px;height:4px;border-radius:50%;background:var(--f);pointer-events:auto}
/* Målestok */
.maal{position:fixed;right:448px;bottom:24px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blæk);opacity:.75;pointer-events:none;text-shadow:0 0 4px var(--papir),0 0 4px var(--papir)}
.maal i{display:block;height:6px;border:1.5px solid currentColor;border-top:0;transition:width .2s var(--ease)}
@media (max-width:860px){
  .maal,.hjtast{display:none}
  .hjkort{padding:22px 20px 20px}
  .hjkort h2{font-size:25px}
  .tlhint{font-size:9.5px}
  .tl #spor u{display:none}
}
.skinne{width:268px}
.lg{grid-template-columns:28px minmax(0,1fr) 18px 30px}
.lg b{text-align:right}
@media (max-width:1180px) and (min-width:861px){.skinne{width:auto}.lg{grid-template-columns:28px}}
#tllabel{white-space:nowrap}
@media (max-width:860px){.tl:not(.brugt) #tllabel{display:none}.tlhint{padding-left:10px;border-left:1px solid var(--h-linje)}}

/* v9: styr kortet – drej og zoom */
.styr{position:fixed;right:448px;bottom:54px;z-index:3;display:flex;gap:4px;padding:5px;border-radius:999px;animation:hudind .9s .25s var(--ease) backwards}
.styr button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(241,237,227,.09);color:var(--h-tekst);font:500 18px/1 var(--sans);transition:background .2s,transform .2s var(--ease)}
.styr button:hover{background:rgba(241,237,227,.22)}
.velkomst:not(.væk)~.styr{animation-play-state:paused}
.hjdrej{font-size:13px;line-height:1.45;color:var(--h-dæmp);margin-top:16px;padding-top:14px;border-top:1px solid var(--h-linje)}
.hjtast{margin-top:12px;padding-top:0;border-top:0}
@media (max-width:860px){
  .styr{right:10px;bottom:calc(var(--ark) + 118px);flex-direction:column;padding:4px;transition:opacity .25s}
  .styr #zind,.styr #zud{display:none}
  .styr button{width:36px;height:36px}
  body.detalje .styr{bottom:calc(var(--ark) + 12px)}
}

/* v10: mærker viser kun ikonet; titlen kommer frem ved mus, ved valg og fra listen (brugeren 11.11.2026) */
.mrk .kap{padding:4px;gap:0}
.mrk .navn,.mrk em{display:none}
.mrk:hover .kap,.mrk.fokus .kap,.mrk.aktiv .kap,.mrk.kompakt:hover .kap,.lavt .mrk:hover .kap{padding:4px 12px 4px 4px;gap:8px}
.mrk:hover .navn,.mrk.fokus .navn,.mrk.aktiv .navn,.mrk:hover em,.mrk.fokus em,.mrk.aktiv em{display:inline}

/* v11: flere begivenheder samme sted */
.kap .flere{font:600 10px/1 var(--mono);color:#f1ede3;padding:0 8px 0 6px;letter-spacing:.02em}
.kap .flere:empty{display:none}
.ogsaa button{display:block;width:100%;padding:9px 12px;border-radius:12px;border-left:3px solid var(--f);background:var(--flade2);margin-bottom:6px;transition:background .2s,transform .2s var(--ease)}
.ogsaa button:hover{background:rgba(241,237,227,.1);transform:translateX(3px)}
.ogsaa b{display:block;font:600 14px/1.25 var(--sans)}
.ogsaa small{display:block;font-size:12px;color:var(--dæmp);margin-top:2px}
.skinne{width:268px}


/* ===== V3 (12.11.2026): Nyhedskompas i topbjælken, kalender i panelet, ingen tidslinje ===== */
.tl{display:none!important}
/* Topbjælken */
.bar{height:58px;gap:0;padding:0 11px 0 8px}
.emblem{width:42px;height:42px;border:1px solid rgba(210,181,116,.32)}
.navn{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 22px 0 13px}
.bar h1{font:600 21px/1 var(--serif);letter-spacing:.01em;color:var(--h-tekst)}
.navn p{display:flex;align-items:center;gap:8px;font:500 8.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--h-dæmp);white-space:nowrap}
.navn p i{font-style:normal;display:inline-flex;align-items:center;gap:6px;color:#ff9a80}
.navn p i::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--h-live)}
.navn.rejse p i{color:var(--h-guld)}
.navn.rejse p i::before{background:var(--h-guld)}
.bar .puls,.bar .pos{display:none}
.bar .ur{margin:15px 0;padding:0 20px;gap:3px;border-left:1px solid var(--h-linje)}
.bar .ur b{font-size:14px;min-width:0}
.bar .knapper{padding-left:13px;gap:6px}
.bar .knapper button{width:34px;height:34px;background:none;border:1px solid var(--h-linje);color:var(--h-dæmp);font-size:10.5px}
.bar .knapper button:hover{background:none;border-color:rgba(241,237,227,.42);color:var(--h-tekst)}
.bar .knapper button[aria-pressed="true"],.bar .knapper button.til{background:none;border-color:rgba(210,181,116,.7);color:var(--h-guld)}
@media (max-width:860px){
  .bar{height:50px;padding:0 8px 0 6px}
  .emblem{width:36px;height:36px}
  .navn{gap:5px;padding:0 14px 0 10px}
  .bar h1{font-size:18px}
  .navn p{font-size:7.5px}
  .bar .ur{display:none}
  .bar .knapper{padding-left:10px;border-left:1px solid var(--h-linje)}
  .bar .knapper button{width:32px;height:32px}
  .styr{bottom:calc(var(--ark) + 12px)}
}
/* Dato eller periode */
.datorække{display:flex;gap:6px}
#datoknap{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:36px;padding:0 13px 0 14px;border-radius:999px;background:var(--svag);border:1px solid transparent;color:var(--dæmp);font:500 12.5px/1 var(--sans);transition:border-color .2s,color .2s}
#datoknap span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#datoknap:hover{color:var(--blæk)}
#datoknap.valgt{border-color:rgba(210,181,116,.55);color:var(--guld)}
#datoknap .pil{transition:transform .25s var(--ease)}
#datoknap[aria-expanded="true"] .pil{transform:rotate(180deg)}
#datoryd{flex:0 0 36px;height:36px;border-radius:50%;background:var(--svag);color:var(--dæmp);display:grid;place-items:center;font-size:18px;line-height:1}
#datoryd:hover{color:var(--blæk)}
.kal{padding:12px 12px 10px;border-radius:18px;background:var(--svag)}
.kalhoved{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.kalhoved b{font:600 15.5px/1 var(--serif);color:var(--blæk)}
.kalhoved button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:19px;line-height:1;color:var(--dæmp)}
.kalhoved button:hover{color:var(--blæk);background:var(--svag)}
.kalhoved button:disabled{opacity:.25;cursor:default}
.kaluge,.kaldage{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.kaluge span{text-align:center;font:600 8.5px/1 var(--mono);letter-spacing:.1em;color:var(--dæmp);padding:5px 0 7px}
.kaldage button{position:relative;height:32px;text-align:center;font:500 12px/1 var(--mono);color:var(--blæk);border-radius:999px;font-variant-numeric:tabular-nums}
.kaldage button:hover:not(:disabled):not(.i){background:var(--svag)}
.kaldage button:disabled{color:var(--dæmp);opacity:.38;cursor:default}
.kaldage button.har::after{content:"";position:absolute;left:50%;bottom:4px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--guld)}
.kaldage button.idag{box-shadow:inset 0 0 0 1px rgba(241,237,227,.32)}
.kaldage button.i{background:rgba(210,181,116,.2);border-radius:0;box-shadow:none}
.kaldage button.a{border-radius:999px 0 0 999px}
.kaldage button.b{border-radius:0 999px 999px 0}
.kaldage button.a.b{border-radius:999px}
.kaldage button.a,.kaldage button.b{background:var(--guld);color:#15130e}
.kaldage button.a::after,.kaldage button.b::after{background:#15130e}
.kalhint{margin-top:8px;font-size:11px;line-height:1.35;color:var(--dæmp);text-align:center}
@media (max-width:860px){.panel[data-ark="høj"]~.styr{opacity:0;pointer-events:none}}

/* V3: seværdigheder med foto, link og åbningstider */
.foto{margin:14px 0 4px;border-radius:16px;overflow:hidden;background:var(--svag)}
.foto img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.foto figcaption{padding:6px 10px 7px;font:500 9.5px/1.35 var(--sans);color:var(--dæmp)}
.foto figcaption a{color:inherit;text-decoration:none}
.foto figcaption a:hover{text-decoration:underline}
.tidnote{margin:6px 0 0;font-size:11px;line-height:1.4;color:var(--dæmp)}

/* V3: liste efter dag, »Varer ved«, Døgnet og Tæt på */
details.lang{margin:0 0 20px;border-radius:16px;background:var(--svag)}
details.lang summary{display:flex;align-items:center;gap:9px;padding:13px 14px;cursor:pointer;list-style:none;font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dæmp);border-radius:16px}
details.lang summary::-webkit-details-marker{display:none}
details.lang summary b{font:600 12px/1 var(--mono);letter-spacing:0;color:var(--blæk)}
details.lang summary span{flex:1;text-align:right;font:500 11px/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.lang summary::after{content:"›";font:400 17px/1 var(--sans);transform:rotate(90deg);transition:transform .25s var(--ease)}
details.lang[open] summary::after{transform:rotate(-90deg)}
details.lang[open]{padding:0 7px 7px}
details.lang[open] summary{padding:13px 7px}
#liste section+section,#liste details+section{margin-top:20px}
.flerenote{margin:14px 0 4px;text-align:center;font-size:12px;color:var(--dæmp)}
.sevrk small{margin-left:auto;font:500 10px/1 var(--mono);color:var(--dæmp)}
.doegn{padding:11px 13px 9px;border-radius:16px;background:var(--svag)}
.dghoved{display:flex;justify-content:space-between;align-items:center;height:16px;margin-bottom:9px;font:700 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dæmp)}
#dgnu{font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--guld)}
.dgbars{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:46px;align-items:end;cursor:ew-resize;touch-action:none;border-radius:4px;outline-offset:4px}
.dgbars i{height:var(--h);border-radius:2px;background:var(--blæk);opacity:.32;transition:height .35s var(--ease),opacity .2s,background .2s;pointer-events:none}
.dgbars:hover i{opacity:.46}
.dgbars i.før{opacity:.1}
.dgbars i.valgt{background:var(--guld);opacity:1;box-shadow:0 0 12px rgba(210,181,116,.55)}
.dgakse{display:flex;justify-content:space-between;margin-top:6px;font:500 8.5px/1 var(--mono);letter-spacing:.06em;color:var(--dæmp)}
.rdr{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 13px;border-radius:999px;border:1px solid rgba(210,181,116,.5);color:var(--guld);font:600 12px/1.2 var(--sans)}
.rdr>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdr .rr{display:flex;background:var(--svag);border-radius:999px;padding:2px}
.rdr .rr button{padding:6px 8px;border-radius:999px;font:600 9.5px/1 var(--mono);color:var(--dæmp);white-space:nowrap}
.rdr .rr button[aria-pressed="true"]{background:var(--guld);color:#15130e}
#rdrluk{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--dæmp);font-size:17px;line-height:1}
#rdrluk:hover{color:var(--blæk)}
@media (max-width:860px){
  .doegn{display:none}
  .panel[data-ark="høj"] .doegn{display:block}
  .flerenote{display:none}
}

/* V3: favoritter, kalender, påmindelser */
.prknap{display:flex;gap:6px;align-items:center}
#favvis{width:auto;min-width:30px;padding:0 9px;display:inline-flex;gap:5px;border-radius:999px}
#favvis svg,.favk svg{fill:none}
#favvis b{font:600 11px/1 var(--mono)}
#favvis b:empty{display:none}
#favvis.har{color:var(--guld)}
#favvis[aria-pressed="true"],#klok[aria-pressed="true"]{background:var(--guld);color:#15130e}
#favvis[aria-pressed="true"] svg{fill:currentColor}
.panel.kunfav .vindue,.panel.kunfav .datorække,.panel.kunfav .kal,.panel.kunfav .doegn{display:none!important}
.panel.kunfav #antal small:last-of-type{color:var(--guld)}
.dknap{display:flex;gap:6px}
.favk{font-size:12px;font-weight:600;color:var(--dæmp);padding:6px 10px;border-radius:999px;background:var(--svag);display:inline-flex;align-items:center;gap:6px}
.favk[aria-pressed="true"]{color:var(--guld);background:rgba(210,181,116,.16)}
.favk[aria-pressed="true"] svg{fill:currentColor}
.kk h3 .stj{font-style:normal;font-size:.72em;color:var(--guld);margin-right:6px;vertical-align:.12em}
.mrk.fav{filter:drop-shadow(0 0 1.5px #d2b574) drop-shadow(0 0 5px rgba(210,181,116,.9))}
.dt.kl b{font:500 14px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.handl #ics{display:inline-flex;align-items:center;gap:8px}
/* Mellembredde (861–1180 px): lag som smal ikonrække, og plads til topbjælken */
@media (max-width:1180px) and (min-width:861px){
  .skinne{width:auto}
  .panel.hud{width:372px}
}
@media (max-width:1060px) and (min-width:861px){
  .bar .ur{display:none}
  .panel.hud{width:340px}
  .styr{right:372px}.maal{right:372px}
}
#antal small{white-space:nowrap}
@media (max-width:1180px) and (min-width:861px){#antal b{font-size:26px}#antal{gap:10px}#antal small{letter-spacing:.12em}}


/* V3: topbjælke 2 – navn, by og tid på én linje */
.bar{height:56px;gap:0;padding:0 9px 0 8px;overflow:visible}
.bar .emblem{width:40px;height:40px}
.bar h1.mærke{font:600 20px/1 var(--serif);letter-spacing:.01em;color:var(--h-tekst);padding:0 16px 0 12px;white-space:nowrap}
.by{position:relative;align-self:stretch;display:flex;align-items:center;padding:0 14px 0 0}
#byknap{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px 0 10px;border-radius:999px;border:1px solid rgba(210,181,116,.38);color:var(--h-guld);font:600 12px/1 var(--sans);letter-spacing:.01em;transition:background .2s,border-color .2s}
#byknap:hover,#byknap[aria-expanded="true"]{background:rgba(210,181,116,.13);border-color:rgba(210,181,116,.7)}
#byknap .pil{opacity:.7;transition:transform .25s var(--ease)}
#byknap[aria-expanded="true"] .pil{transform:rotate(180deg)}
.bykort{display:none}
.bymenu{position:absolute;left:0;top:calc(100% + 8px);z-index:8;width:248px;padding:8px;border-radius:18px;display:flex;flex-direction:column;gap:2px;animation:bymind .22s var(--ease)}
@keyframes bymind{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bymtitel{padding:6px 10px 8px;font:700 9px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--h-dæmp)}
.bymenu button{display:flex;flex-direction:column;gap:4px;width:100%;padding:9px 10px;border-radius:11px;color:var(--h-tekst);text-align:left}
.bymenu button b{font:600 14px/1 var(--sans)}
.bymenu button small{font:500 11px/1.3 var(--sans);color:var(--h-dæmp)}
.bymenu button.valgt{background:rgba(210,181,116,.14)}
.bymenu button.valgt b{color:var(--h-guld)}
.bymenu button.valgt b::after{content:"✓";margin-left:8px;font-size:12px}
.bymenu button:disabled{opacity:.45;cursor:default}
.nu{display:inline-flex;align-items:center;gap:8px;align-self:stretch;margin:14px 0;padding:0 16px;border-left:1px solid var(--h-linje);white-space:nowrap}
.nu i{width:6px;height:6px;border-radius:50%;background:var(--h-live);box-shadow:0 0 0 3px rgba(255,107,74,.2)}
.nu b{font:700 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#ff9a80}
.nu .nuur{font-size:13px;letter-spacing:.04em;color:var(--h-tekst);font-variant-numeric:tabular-nums}
.nu.rejse i{background:var(--h-guld);box-shadow:0 0 0 3px rgba(210,181,116,.2)}
.nu.rejse b{color:var(--h-guld)}
.nu.rejse .nuur{display:none}
.bar .knapper{padding-left:12px;border-left:1px solid var(--h-linje);margin:0}
@media (max-width:1060px) and (min-width:861px){.nu .nuur{display:none}.bar h1.mærke{font-size:18px;padding-right:12px}}
@media (max-width:860px){
  .bar{height:50px;padding:0 7px 0 6px}
  .bar .emblem{width:36px;height:36px}
  .bar h1.mærke{font-size:16.5px;padding:0 9px 0 8px}
  .by{padding-right:8px}
  #byknap{height:30px;padding:0 8px;gap:5px;font-size:11px}
  .bylang{display:none}.bykort{display:inline}
  .nu{display:none}
  .bar .knapper{padding-left:8px;gap:4px}
  .bar .knapper button{width:31px;height:31px}
  .bymenu{width:230px}
}
.venstre .bar{position:relative;z-index:4}
@media (max-width:1060px) and (min-width:861px){.nu{display:none}}
@media (max-width:860px){
  .bar{max-width:calc(100vw - 20px)}
  .bar h1.mærke{font-size:15.5px;padding:0 8px 0 7px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  #byknap>svg:first-child{display:none}
  #byknap{padding:0 7px 0 9px}
  .by{padding-right:7px}
  .bar .knapper{padding-left:7px;gap:4px}
  .bar .knapper button{width:30px;height:30px}
}

/* V3: tomme lag */
.lg[hidden]{display:none}
.lg.nul .skn,.lg.nul b{opacity:.45}
.lg.nul i{opacity:.55}
.chip.nul{opacity:.5}

/* V3: optimering efter gennemgang (hastighed, telefon, tilgængelighed) 12.11.2026 */
html,body{overscroll-behavior:none}
#oversigt,#detalje,#liste{overscroll-behavior:contain}
.kk{content-visibility:auto;contain-intrinsic-size:auto 78px}
/* læsbarhed: lysere dæmpet tekst og større småskrift */
.hud{--h-dæmp:#b4aea0}
.panel.hud{--dæmp:#b4aea0}
.panel.hud .fod{color:var(--dæmp)}
.skhint{color:var(--h-dæmp)}
.panel.hud .kat{color:color-mix(in srgb,var(--f) 45%,#fff);font-size:10px;letter-spacing:.14em}
.dgbars i{opacity:.5}
.dgbars:hover i{opacity:.62}
.dgbars i.før{opacity:.16}
.lg.nul .skn,.lg.nul b{opacity:.7}
.lg.nul i{opacity:.7}
.lg[aria-pressed="false"].nul .skn,.lg[aria-pressed="false"].nul b,.lg[aria-pressed="false"].nul i{opacity:1}
#antal small{font-size:10.5px;letter-spacing:.14em}
.dgakse,.kaluge span{font-size:10px}
.dt small{font-size:10px;letter-spacing:.12em}
.dghoved{font-size:10px;letter-spacing:.14em}
#dgnu{font-size:10.5px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#detalje h2:focus{outline:none}
/* hjælpen kan altid lukkes */
.hjkort{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
@media (max-width:860px){
  /* glasset koster for meget på telefon og ses næsten ikke */
  .hud,.panel.hud{-webkit-backdrop-filter:none;backdrop-filter:none;--h-bg:rgb(17,16,14)} /* helt dækkende: ved 97 % kunne kortets mærker anes gennem arket */
  /* Om natten vandt reglen [data-tema="nat"] .hud (84 % dækkende) over linjen ovenfor – uden sløring skinnede hele kortet igennem arket */
  [data-tema="nat"] .hud,[data-tema="nat"] .panel.hud{--h-bg:rgb(21,23,28)}
  .søg input{font-size:16px}
  .hjdrej,.hjtast{display:none}
  .hjkort{padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .panel{max-height:47dvh}
  .panel[data-ark="høj"]{max-height:86dvh}
  .panel[data-ark="lav"]{max-height:calc(76px + env(safe-area-inset-bottom))}
  .greb{height:30px;flex:0 0 30px}
  .greb::after{top:12px;width:44px}
  .greb::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-6px}
  /* trykflader på mindst ca. 44 px */
  #dgnu,#rdrluk,.rdr .rr button,.panel .vindue button,.bar .knapper button,.rund,#datoryd,.kalhoved button{position:relative}
  #dgnu::after,#rdrluk::after,.rdr .rr button::after,.panel .vindue button::after,.bar .knapper button::after,.rund::after,.kalhoved button::after{content:"";position:absolute;left:-6px;right:-6px;top:-9px;bottom:-9px}
  .panel .vindue button{padding:9px 0}
  .kk .ring::after,.mrk.live .grund::after{animation:none} /* én ring pr. mærke er nok */
}
@media (max-height:480px) and (orientation:landscape){.panel{max-height:62dvh}.panel[data-ark="høj"]{max-height:92dvh}}

/* V3: rolig styring */
.emblem.drejet{background:rgba(210,181,116,.2);box-shadow:0 0 0 1px rgba(210,181,116,.8)}
@media (max-width:860px){.styr #hjemknap{display:grid}}

/* V3: begivenheder, hvor vi kun kender datoen */
.tæl.idag{font:700 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--guld);white-space:nowrap}

/* V3: let at komme væk fra ringen */
.rdrpille{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px 0 10px;border-radius:999px;background:#d2b574;color:#15130e;font:700 12px/1 var(--sans);box-shadow:0 8px 20px -6px rgba(0,0,0,.7);cursor:pointer}
.rdrpille b{font-size:16px;line-height:1}
.rdrpille:hover{background:#e2c98c}
#rdrluk{flex:0 0 auto;width:auto;height:28px;padding:0 11px;border-radius:999px;background:var(--guld);color:#15130e;font:700 11px/1 var(--sans);display:inline-flex;align-items:center}
#rdrluk:hover{color:#15130e;background:#e2c98c}
.rdr .rr button{padding:6px 7px}

/* V3: navnet »Nyhedskompas« er taget ud af topbjælken (brugeren 12.11.2026: »Det forvirrer mere end det gavner« → »Ja, tag det ud«).
   Kompasset er mærket, og »København« er overskriften. Overskriften findes stadig for skærmlæsere. Slet denne blok for at få navnet tilbage. */
.bar h1.mærke{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bar .by{padding-left:10px}
@media (max-width:860px){.bar .by{padding-left:7px}}

/* V3: lettere på telefon (brugeren 12.11.2026: »den hakker«). Mærkerne er almindelige elementer, som flyttes for hvert billede,
   mens kortet bevæger sig. Skygger og glød på hvert mærke er dyre at flytte, og ringene skal ikke animere imens. */
@media (max-width:860px),(pointer:coarse){
  .maplibregl-marker{will-change:transform}
  .kap{box-shadow:none}
  .kap i{box-shadow:none}
  .grund{box-shadow:0 0 0 2px rgba(255,255,255,.92)}
  .spot{box-shadow:none}
  .mrk.fav{filter:none}
  .mrk.fav .kap{border-color:#d2b574;box-shadow:0 0 0 2px rgba(210,181,116,.6)}
}
.flytter .mrk.live .grund::before,.flytter .mrk.live .grund::after,.flytter .kk .ring::after{animation-play-state:paused}
/* Telefon, oversigten: mærkerne er mindre, så de ikke ligger i én bunke oven på hinanden */
@media (max-width:860px){
  .lavt .mrk .kap{padding:2px;border-width:1px}
  .lavt .mrk .kap i{width:20px;height:20px;flex:0 0 20px}
  .lavt .mrk .kap i svg{width:11px;height:11px}
  .lavt .mrk .flere{font-size:9.5px;padding:0 6px 0 4px}
  .lavt .mrk .stilk{height:6px}
  .lavt .mrk .grund{width:6px;height:6px}
}
/* Telefon: arket følger fingeren (ingen glidning, mens det trækkes) og falder hurtigere på plads */
@media (max-width:860px){
  .panel{transition:max-height .24s cubic-bezier(.2,.8,.2,1)}
  .panel.trækkes{transition:none;will-change:transform}
  .panel.lander{transition:transform .24s cubic-bezier(.2,.8,.2,1);will-change:transform}
  .prk,.dhoved{touch-action:none}
  .greb{touch-action:none}
}

/* Telefon: de små blinkende prikker brugte en skygge, der blev tegnet om for hvert billede – hele tiden, også når intet bevægede sig.
   Nu toner de bare ind og ud, og det klarer grafikkortet. */
@keyframes blødpuls{50%{opacity:.35}}
@media (max-width:860px),(pointer:coarse){
  .puls i,.tlnu::before,.tæl.live i,.dato.nu b::before,.status.live::before{animation:blødpuls 1.6s ease-in-out infinite;box-shadow:none}
  .pille.live i::after{animation:none}
}

/* V3: arkets tre højder (brugeren 12.11.2026: »elegant … flydende … interessant«).
   Bund = kortet først · midten = bladr i kortene, og kortet følger med · top = liste, søgning og kalender, og kortet dæmpes bagved. */
#slør{position:fixed;inset:0;z-index:2;background:#0a0b0e;opacity:0;pointer-events:none;transition:opacity .34s ease}
#slør.fri{transition:none}
@media (max-width:860px){
  .panel[data-ark="høj"]~#slør{opacity:.38}
  .panel.lander{transition:transform .36s cubic-bezier(.2,1.25,.32,1)} /* lander med et lille fjedrende efterslæb */
  .panel.trækkes,.panel.lander{box-shadow:0 260px 0 0 var(--h-bg)} /* dækker under arket, når det fjedrer op over sin egen højde */
  #oversigt.toner{animation:fadeind .24s ease both}
}

/* Rettelser efter gennemgangen 12.11.2026 (Gennemgang 2026-11-12.md, gruppe B) */
#datotid.gammel{color:#ffb199;font-weight:600}
/* B13: kildelinjen er det, der gør siden troværdig – almindelig skrift, så den kan læses */
#detalje .kilde{font:400 12.5px/1.55 var(--sans);letter-spacing:0;text-transform:none;color:var(--dæmp)}
#detalje .kilde a{color:var(--blæk);text-decoration:underline;text-underline-offset:2px}
@media (max-width:860px){
  /* B1: trykflader på mindst ca. 40 punkter */
  .panel .chip{min-height:40px;padding:6px 12px 6px 6px}
  .dhoved button,.dhoved a{min-height:40px}
  #datoknap{min-height:44px}
  #byknap{min-height:40px}
  .bar .emblem{width:42px;height:42px}
  .styr button{width:42px;height:42px}
  #kaldage button{min-height:40px}
  /* B2: ingen tekst under 11 punkter */
  #antal small,.kk .kat,.kk .dt small,.kk .tæl small,.kk .naar,.vindue button,.dgakse,.dghoved,.kalhint,.fod{font-size:11px}
}

/* Finpudsning 12.11.2026: lange titler klippes, så kortene i listen holder samme højde */
.kk h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
@media (max-width:860px){.kk h3{-webkit-line-clamp:2}}
/* Døgnet er taget ud på computer og telefon (brugeren 12.11.2026) */
.doegn[hidden]{display:none!important}
/* Tætte mærker på computer: mærket trækker sig sammen til sin prik, og folder sig ud, når man peger på den */
.mrk.mini .kap,.mrk.mini .stilk{display:none}
.mrk.mini .grund{width:10px;height:10px;box-shadow:0 0 0 1.5px rgba(21,23,28,.9)}
.mrk.mini:hover .kap{display:flex}.mrk.mini:hover .stilk{display:block}
.maplibregl-marker:hover{z-index:6}
/* Telefon (brugeren 12.11.2026): filteret bag en knap, og begivenhederne under hinanden – ingen swipe til højre */
#filterknap{display:none}
@media (max-width:860px){
  #filterknap{display:flex;flex:0 0 auto;align-items:center;gap:7px;height:36px;padding:0 13px;border-radius:999px;background:var(--svag);border:1px solid transparent;color:var(--dæmp);font:500 12.5px/1 var(--sans);position:relative}
  #filterknap b{font:600 10.5px/1 var(--mono);color:var(--guld)}
  #filterknap[aria-expanded="true"]{border-color:rgba(210,181,116,.55);color:var(--guld)}
  .panel .filter{display:none}
  .panel.filteraaben .filter{display:flex;flex-wrap:wrap;overflow:visible;gap:6px;margin:0 0 10px;padding:0 14px;animation:ind .3s var(--ease) both}
  .panel.kunfav #filterknap{display:none}
  .panel:not([data-ark="lav"]) #oversigt{overflow-y:auto;-webkit-overflow-scrolling:touch}
  #liste{flex-direction:column;overflow:visible;scroll-snap-type:none;gap:7px}
  .kk{flex:0 0 auto;max-width:none;scroll-snap-align:none}
  .kk h3{-webkit-line-clamp:3}
}
/* Sæson i filteret (brugeren 12.11.2026): de faste lag først, sæsonens lag for sig selv til sidst */
.sksaeson{margin:8px 4px 4px 8px;padding-top:9px;border-top:1px solid rgba(241,237,227,.14);font:700 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--guld)}
.sksaeson[hidden]{display:none}
@media (max-width:1180px) and (min-width:861px){.sksaeson{margin:6px 6px 4px}.sksaeson span{display:none}}
.chipsek{flex:0 0 100%;margin:6px 2px 0;font:700 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--guld)}
/* Listen: »Vis mere« i stedet for at stoppe */
.flereknap{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:14px 0 4px;height:42px;border-radius:999px;background:var(--svag);border:1px solid var(--linje);color:var(--blæk);font:600 12.5px/1 var(--sans)}
.flereknap small{font:500 10.5px/1 var(--mono);color:var(--dæmp)}
.flereknap:hover{border-color:rgba(210,181,116,.55)}
/* Præcis adresse under titlen (brugeren 12.11.2026) */
#detalje .adr{display:flex;align-items:flex-start;gap:7px;margin:7px 0 0;font:500 13.5px/1.35 var(--sans);color:var(--blæk)}
#detalje .adr svg{flex:0 0 13px;margin-top:3px;color:var(--guld)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Computer: topbjælken midt på skærmen, lag-panelet øverst til venstre (brugeren 12.11.2026). Den præcise plads sættes af placérBar i kort.js */
@media (min-width:861px){
  .venstre .bar{position:fixed;top:20px;left:calc(50% - 170px)}
}
/* Computer: mindre overskrifter i højre fane, så de som udgangspunkt står på én linje (brugeren 12.11.2026) */
@media (min-width:861px){
  .kk h3{font-size:14.5px;line-height:1.22;-webkit-line-clamp:2;margin:3px 0 3px}
  .panel.hud #detalje h2{font-size:21px;line-height:1.15}
}
/* Fast oversigt i den åbne begivenhed: tid, adresse med »Find vej«, pris (brugeren 12.11.2026) */
#detalje .fakta{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:10px 0 2px;padding:12px 14px;border-radius:14px;background:var(--flade2);border:1px solid var(--linje)}
#detalje .fakta dt{font:700 9.5px/1.7 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dæmp);white-space:nowrap}
#detalje .fakta dd,.panel.hud #detalje .fakta dd.naar{margin:0;font:500 13.5px/1.4 var(--sans);color:var(--blæk)}
#detalje .fakta dd.adr{display:block;margin:0}
#detalje .findvej{display:inline-block;margin-left:6px;font:600 12px/1.4 var(--sans);color:var(--guld);text-decoration:none;border-bottom:1px solid rgba(210,181,116,.45);white-space:nowrap}
#detalje .findvej:hover{border-bottom-color:var(--guld)}
/* Mærket, når musen er over en prik: mindre skrift, så det ikke fylder så meget (brugeren 12.11.2026) */
.mrk .kap .navn{font-size:10.5px;font-weight:600;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.mrk .kap em{font-size:8.5px;padding-left:6px}
.mrk:hover .kap,.mrk.fokus .kap,.mrk.kompakt:hover .kap,.lavt .mrk:hover .kap{padding:3px 10px 3px 3px;gap:6px}
.mrk:hover .kap i,.mrk.fokus .kap i{width:22px;height:22px;flex-basis:22px}
/* Mærkets tekst uden luft før og efter (brugeren 12.11.2026: »meget plads før og efter teksten, dette skal der ikke være«).
   En gammel regel for .navn gav 13 og 22 punkters luft om titlen. */
.mrk .kap .navn{padding:0;gap:0;white-space:nowrap}
.mrk:hover .navn,.mrk.fokus .navn,.mrk.aktiv .navn,.mrk.kompakt:hover .navn,.lavt .mrk:hover .navn{display:block}
.mrk:hover .kap,.mrk.fokus .kap,.mrk.aktiv .kap,.mrk.kompakt:hover .kap,.lavt .mrk:hover .kap{padding:3px 9px 3px 3px;gap:7px}
.mrk.aktiv .kap i{width:22px;height:22px;flex-basis:22px}
.mrk .kap em{padding-left:7px}
.mrk.aktiv .kap .navn{max-width:280px}
/* Computer: højre fane en smule smallere (brugeren 12.11.2026) – 364 i stedet for 404, og tilsvarende i mindre vinduer */
@media (min-width:861px){.panel.hud{width:364px}}
@media (min-width:861px) and (max-width:1180px){.panel.hud{width:340px}}
@media (min-width:861px) and (max-width:1000px){.panel.hud{width:320px}}
/* … og kortene i listen strammet tilsvarende, så titler og tid stadig står på én linje de fleste steder */
@media (min-width:861px){
  .kk{grid-template-columns:36px 1fr auto;gap:10px;padding:11px 11px 11px 13px}
  .kk h3{font-size:14px}
  .kk .naar{font-size:11px}
  #oversigt{padding-left:16px;padding-right:16px}
}
/* Telefon: filteret som en tydelig knap øverst til højre; den åbner lagene med kontakter, så man kan se, hvad der er valgt
   (brugeren 12.11.2026: »Filteret er svært at finde« · »svært at se hvilke filtrer man har valgt«) */
#filterknap{display:none}
@media (max-width:860px){
  #filterknap{display:flex;align-items:center;gap:7px;position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;z-index:6;height:46px;padding:0 14px 0 13px;border-radius:999px;color:var(--h-guld);border:1px solid rgba(210,181,116,.5);font:600 13px/1 var(--sans);pointer-events:auto}
  #filterknap b{font:600 10.5px/1 var(--mono);color:var(--h-tekst);padding:4px 7px;border-radius:999px;background:rgba(241,237,227,.12);white-space:nowrap}
  #filterknap[aria-expanded="true"]{background:var(--h-guld);color:#15130e;border-color:var(--h-guld)}
  #filterknap[aria-expanded="true"] b{background:rgba(21,19,14,.16);color:#15130e}
  .panel .filter,.panel.filteraaben .filter{display:none}
  body.lagaaben .skinne{display:flex;position:fixed;top:calc(max(10px,env(safe-area-inset-top)) + 54px);right:10px;left:auto;z-index:6;width:min(300px,calc(100vw - 20px));max-height:calc(100dvh - 140px);overflow-y:auto;padding:12px 10px 8px;border-radius:20px;pointer-events:auto;animation:ind .25s var(--ease) both}
  body.lagaaben .lg{grid-template-columns:30px minmax(0,1fr) auto 38px;padding:9px 8px;gap:11px}
  body.lagaaben .lg .skn{font-size:14px}
  body.lagaaben .lg em{width:38px;height:22px}
  body.lagaaben .lg em::after{top:3px;left:19px;width:16px;height:16px}
  body.lagaaben .lg[aria-pressed="false"] em::after{left:3px}
  body.lagaaben .skhint{display:none}
  body.detalje #filterknap{display:none}
}
@media (max-width:359px){#filterknap span{display:none}}
/* … knappen må ikke dække topbjælken, og menuen ligger over arket og kortknapperne */
@media (max-width:860px){
  #filterknap{gap:6px;padding:0 9px 0 11px;font-size:12.5px;z-index:31}
  #filterknap b{padding:4px 6px;font-size:10px}
  body.lagaaben .skinne{z-index:30;max-height:calc(100dvh - 84px)}
}
@media (max-width:372px){#filterknap span{display:none}}
@media (max-width:860px){body.lagaaben .venstre{z-index:30}} /* menuen skal ligge over arket og kortknapperne */
/* Telefon: mindre tekst i listen, som på computer (brugeren 12.11.2026: »teksten lidt stor. samme problem som på pc«) */
@media (max-width:860px){
  .kk{grid-template-columns:38px 1fr auto;gap:11px;padding:11px 12px 11px 14px}
  .kk h3{font-size:15px;line-height:1.2;-webkit-line-clamp:2;margin:3px 0 3px}
  .kk .naar{font-size:11.5px}
  .kk .kat{font-size:9.5px}
  .panel.hud #detalje h2{font-size:21px;line-height:1.15}
}
/* Den åbne begivenhed på telefon (brugeren 12.11.2026): knapperne øverst blev skåret to punkter af i toppen (negativ margen),
   og vejen tilbage til kortet var svær at finde – knappen hedder nu »Tilbage til kortet« og har guldkant */
.kuntlf{display:none}
@media (max-width:860px){
  .kunpc{display:none}.kuntlf{display:inline}
  #detalje{padding-top:6px}
  .dhoved{margin-top:0}
  .tilbage{color:var(--guld);border:1px solid rgba(210,181,116,.55);background:rgba(210,181,116,.1);font-size:12.5px;padding:6px 13px}
}
/* Filterknappen i samme design og på samme niveau som topbjælken (brugeren 12.11.2026) */
@media (max-width:860px){
  #filterknap{height:50px;background:var(--h-bg);border:1px solid rgba(210,181,116,.26);color:var(--h-guld);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 54px -20px rgba(0,0,0,.65);padding:0 8px 0 13px;gap:7px}
  #filterknap svg{color:var(--h-guld)}
  #filterknap b{background:none;border:1px solid rgba(210,181,116,.38);color:var(--h-guld);padding:5px 7px;font:600 10.5px/1 var(--sans)}
  #filterknap[aria-expanded="true"]{background:var(--h-bg);color:var(--h-guld);border-color:rgba(210,181,116,.75)}
  #filterknap[aria-expanded="true"] b{background:var(--h-guld);color:#15130e;border-color:var(--h-guld)}
}
/* Telefon: når arket er trukket helt ned, mens en begivenhed er åben, skal knaprækken (»Tilbage til kortet«, »Gem«, »Del«) stå hel –
   før var arket 76 punkter højt, og rækken blev skåret over (brugeren 12.11.2026) */
@media (max-width:860px){
  body.detalje .panel[data-ark="lav"]{max-height:calc(92px + env(safe-area-inset-bottom))}
  body.detalje .panel[data-ark="lav"] #detalje{overflow:hidden}
  #detalje{padding-top:2px}
}
@media (max-width:860px){body.detalje .panel[data-ark="lav"] #detalje>*:not(.dhoved){visibility:hidden}} /* kun knaprækken ses i det lave ark */
/* Telefon: ingen drejeknapper ved kortet – kortet drejes med to fingre (brugeren 12.11.2026: »Det ved alle man kan på telefon«) */
@media (max-width:860px){#drejv,#drejh{display:none}}
/* Telefon: arket fylder mindre fra start – godt en tredjedel af skærmen i stedet for knap halvdelen (brugeren 12.11.2026). Samme tal som ARKDEL i kort.js */
@media (max-width:860px){
  .panel{max-height:36vh}
  @supports (height:1dvh){.panel{max-height:36dvh}}
  .panel[data-ark="høj"]{max-height:86vh}
  @supports (height:1dvh){.panel[data-ark="høj"]{max-height:86dvh}}
  .panel[data-ark="lav"]{max-height:calc(76px + env(safe-area-inset-bottom))}
  body.detalje .panel[data-ark="lav"]{max-height:calc(92px + env(safe-area-inset-bottom))}
}
@media (max-height:480px) and (orientation:landscape) and (max-width:860px){.panel{max-height:62dvh}.panel[data-ark="høj"]{max-height:92dvh}}
/* Telefon: forklaring af farverne på selve kortet, under topbjælken (brugeren 12.11.2026) */
.legende{display:none}
@media (max-width:860px){
  .legende{display:flex;flex-wrap:wrap;gap:5px;max-width:calc(100vw - 20px);pointer-events:none}
  .legende button{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:999px;background:rgba(17,16,14,.82);border:1px solid rgba(241,237,227,.14);color:#f1ede3;font:600 10.5px/1 var(--sans);letter-spacing:.01em;position:relative}
  .legende button::after{content:"";position:absolute;inset:-7px -2px} /* større trykflade */
  .legende i{width:9px;height:9px;border-radius:50%;background:var(--f);box-shadow:0 0 0 1.5px rgba(21,23,28,.9),0 0 8px -1px var(--f)}
  .legende button[aria-pressed="false"]{color:rgba(241,237,227,.5);background:rgba(17,16,14,.6)}
  .legende button[aria-pressed="false"] i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--f)}
  body.detalje .legende,body.lagaaben .legende{display:none}
}
@media (max-width:860px){ /* forklaringen holdes på to linjer */
  .legende{gap:4px}
  .legende button{height:24px;padding:0 8px 0 6px;gap:5px;font-size:10px;letter-spacing:0}
  .legende i{width:8px;height:8px}
}
/* Telefon, ny opstilling (brugeren 12.11.2026 kl. ca. 22.40: »vi fjerner filter så. Bjælke i venstre hjørne bliver en højtstående bjælke i højre side.
   Gør mere plads til kategorier«): topbjælken står lodret i højre side, filterknappen er væk, og kategorierne står øverst med fulde navne. */
@media (max-width:860px){
  #filterknap{display:none!important}
  .venstre .bar{position:fixed;right:10px;left:auto;top:max(10px,env(safe-area-inset-top));flex-direction:column;align-items:center;width:52px;height:auto;padding:6px 0 7px;gap:6px;border-radius:26px}
  .bar .emblem{width:40px;height:40px}
  .bar .by{padding:0;position:static}
  #byknap{width:40px;height:40px;min-height:40px;padding:0;justify-content:center;gap:0;font-size:10.5px;letter-spacing:.02em}
  #byknap svg{display:none}
  .bar .knapper{flex-direction:column;align-items:center;gap:6px;margin:0;padding:7px 0 0;border-left:0;border-top:1px solid var(--h-linje)}
  .bar .knapper button{width:40px;height:40px}
  .bar .nu,.bar .puls,.bar .ur,.bar .pos{display:none}
  .bymenu{position:fixed;left:auto;right:70px;top:max(10px,env(safe-area-inset-top));width:min(240px,calc(100vw - 90px))}
  .legende{max-width:calc(100vw - 82px);gap:5px}
  .legende button{height:28px;padding:0 11px 0 8px;gap:7px;font-size:11.5px}
  .legende i{width:10px;height:10px}
}
/* Telefon: kategorierne samlet på to linjer i ét felt (brugeren 12.11.2026: »Kan du samle dem på to linjer?«) */
@media (max-width:860px){
  .legende{max-width:calc(100vw - 82px);gap:7px 11px;padding:9px 12px;border-radius:16px;background:rgba(17,16,14,.84);border:1px solid rgba(210,181,116,.22);pointer-events:auto}
  .legende button{height:auto;padding:1px 0;gap:5px;background:none;border:0;border-radius:0;font:600 10.5px/1.25 var(--sans);letter-spacing:0}
  .legende button[aria-pressed="false"]{background:none}
  .legende button::after{inset:-6px -5px}
  .legende i{width:8px;height:8px}
}
@media (max-width:860px){ /* strammet, så alle otte kategorier står på to linjer ved 375 punkters bredde */
  .legende{gap:7px 8px;padding:8px 10px}
  .legende button{font-size:10px;gap:4px}
  .legende i{width:7px;height:7px}
}
/* Telefon: den lodrette bjælke lidt mindre, og alle fem knapper på samme midterlinje (brugeren 12.11.2026: »gør den lidt mindre og centrer felterne. De står ikke helt lige«).
   »KBH« stod fem punkter til venstre, fordi dens ramme var bredere end knappen. */
@media (max-width:860px){
  .venstre .bar{width:44px;padding:5px 0 6px;gap:5px;border-radius:22px;align-items:center}
  .bar .emblem,.bar .knapper button,#byknap{width:34px;height:34px;min-height:34px;min-width:0;flex:0 0 34px;margin:0}
  .bar .emblem svg{width:20px;height:20px}
  .bar .by{display:flex;justify-content:center;align-items:center;width:34px;padding:0;margin:0}
  #byknap{font-size:9.5px;letter-spacing:.01em}
  .bar .knapper{width:34px;gap:5px;padding:6px 0 0}
  .bar .knapper button svg{width:15px;height:15px}
  .bymenu{right:62px}
  .legende{max-width:calc(100vw - 74px)}
}
@media (max-width:860px){.venstre .bar .by{align-self:center;position:static;flex:0 0 auto;left:auto}}
/* Kategoriernes rækkefølge i feltet på telefon, så »Løb og sport« kan stå fuldt ud på to linjer (brugeren 12.11.2026: »Byt eventuelt om på noget«):
   Byfester · Koncerter · Løb og sport · Teater / Demonstrationer · Seværdigheder · Trafik · Jul */
@media (max-width:860px){
  .legende [data-kat="kultur"]{order:1}.legende [data-kat="musik"]{order:2}.legende [data-kat="sport"]{order:3}.legende [data-kat="scene"]{order:4}
  .legende [data-kat="demo"]{order:5}.legende [data-kat="sev"]{order:6}.legende [data-kat="trafik"]{order:7}.legende [data-kat="politi"]{order:8}.legende [data-kat="jul"]{order:9}
}
/* Telefon: kategorifeltet og den lodrette bjælke har samme udtryk – samme mørke flade, guldkant, skygge og runding (brugeren 12.11.2026) */
@media (max-width:860px){
  .legende.hud{background:var(--h-bg);border:1px solid rgba(210,181,116,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 54px -20px rgba(0,0,0,.65);border-radius:22px;padding:9px 13px;animation:hudind .9s .12s var(--ease) backwards}
  .legende.hud button{color:var(--h-tekst)}
  .legende.hud button[aria-pressed="false"]{color:var(--h-dæmp);opacity:.75}
}
/* Telefon: »Indstillinger« i højre hjørne. Bjælken med kompas, by, dag/nat, 3D og »find mig« er foldet sammen og kommer frem under knappen (brugeren 12.11.2026) */
#indst{display:none}
@media (max-width:860px){
  #indst{display:grid;place-items:center;position:fixed;right:10px;top:max(10px,env(safe-area-inset-top));z-index:7;width:44px;height:44px;border-radius:50%;color:var(--h-guld);pointer-events:auto;animation:hudind .9s .12s var(--ease) backwards}
  #indst[aria-expanded="true"]{border-color:rgba(210,181,116,.75)}
  #indst svg{transition:transform .35s var(--ease)}
  #indst[aria-expanded="true"] svg{transform:rotate(60deg)}
  .venstre .bar{display:none;top:calc(max(10px,env(safe-area-inset-top)) + 52px);z-index:7}
  body.indstaaben .venstre .bar{display:flex;animation:ind .22s var(--ease) both}
  body.detalje #indst{display:none}
  .bymenu{top:calc(max(10px,env(safe-area-inset-top)) + 52px)}
  .legende{max-width:calc(100vw - 74px)}
}
/* Telefon: »find mig« ved kortet, kompasset kun når kortet er drejet, resten bag »Indstillinger« (brugeren 12.11.2026) */
@media (max-width:860px){
  .styr #mig{color:var(--h-tekst)}
  .styr #mig.til{color:var(--h-guld);background:rgba(210,181,116,.18)}
  .styr #mig svg{width:17px;height:17px}
  .venstre>#nord{display:none;position:fixed;right:10px;top:calc(max(10px,env(safe-area-inset-top)) + 52px);z-index:6;width:44px;height:44px;border-radius:50%;place-items:center;color:var(--h-guld);background:var(--h-bg,rgb(17,16,14));border:1px solid rgba(210,181,116,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 54px -20px rgba(0,0,0,.65);pointer-events:auto}
  .venstre>#nord.drejet{display:grid;animation:ind .25s var(--ease) both}
  body.indstaaben .venstre>#nord,body.detalje .venstre>#nord{display:none}
  .venstre>#nord{--h-bg:rgb(17,16,14)}
  [data-tema="nat"] .venstre>#nord{--h-bg:rgb(21,23,28)}
}
/* Tandhjulet står midt for kategorifeltet: begge er 54 punkter høje og ligger i samme højde (brugeren 12.11.2026: »tandhjulet er ikke centreret«) */
@media (max-width:860px){
  .legende.hud{min-height:54px;align-content:center;box-sizing:border-box}
  #indst{width:54px;height:54px;padding:0;margin:0;line-height:0}
  #indst svg{display:block;margin:auto}
  .venstre .bar,.bymenu,.venstre>#nord{top:calc(max(10px,env(safe-area-inset-top)) + 62px)}
  .venstre .bar{right:15px}
  .venstre>#nord{right:15px}
  .bymenu{right:72px}
  .legende{max-width:calc(100vw - 84px)}
}
/* Telefon: tandhjulet er 44 punkter og står midt for kategorifeltets to linjer; knapperne nederst til højre har samme udtryk som bjælken
   (brugeren 12.11.2026: »Knappen i højre bund skal have samme look«) */
@media (max-width:860px){
  #indst{width:44px;height:44px;top:calc(max(10px,env(safe-area-inset-top)) + 5px);right:10px}
  .venstre .bar,.bymenu,.venstre>#nord{top:calc(max(10px,env(safe-area-inset-top)) + 57px)}
  .venstre .bar,.venstre>#nord{right:10px}
  .bymenu{right:62px}
  .legende{max-width:calc(100vw - 74px)}
  .styr{width:44px;padding:5px 0 5px;gap:5px;align-items:center;border-radius:22px;background:var(--h-bg);border:1px solid rgba(210,181,116,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 54px -20px rgba(0,0,0,.65)}
  .styr button,.styr #mig{width:34px;height:34px;flex:0 0 34px;background:none;border:1px solid rgba(210,181,116,.38);color:var(--h-guld);margin:0}
  .styr button svg,.styr #mig svg{width:16px;height:16px}
  .styr button:hover{background:none}
  .styr #mig.til{background:var(--h-guld);color:#15130e;border-color:var(--h-guld)}
}
/* Tandhjulet har samme form som kategorifeltet: samme højde og samme runding, ikke en cirkel (brugeren 12.11.2026) */
@media (max-width:860px){
  .legende.hud{min-height:56px}
  #indst{width:46px;height:56px;border-radius:22px;top:max(10px,env(safe-area-inset-top));right:10px}
  .venstre .bar,.bymenu,.venstre>#nord{top:calc(max(10px,env(safe-area-inset-top)) + 64px)}
  .venstre .bar,.venstre>#nord,.styr{right:11px}
  .legende{max-width:calc(100vw - 74px)}
}
/* Telefon: tandhjulet ligger i gruppen nederst til højre; valgene folder ud lige over gruppen (brugeren 12.11.2026) */
@media (max-width:860px){
  .styr #indst{display:grid;position:static;width:34px;height:34px;flex:0 0 34px;border-radius:50%;animation:none;box-shadow:none;background:none;border:1px solid rgba(210,181,116,.38);color:var(--h-guld);-webkit-backdrop-filter:none;backdrop-filter:none}
  .styr #indst[aria-expanded="true"]{background:var(--h-guld);color:#15130e;border-color:var(--h-guld)}
  .styr #indst svg{width:16px;height:16px}
  .styr #nord{display:none;width:34px;height:34px;flex:0 0 34px;border:1px solid rgba(210,181,116,.38);color:var(--h-guld);background:none;border-radius:50%;place-items:center}
  .styr #nord.drejet{display:grid}
  .styr #nord svg{width:18px;height:18px}
  body.detalje .styr #indst{display:none}
  .venstre .bar{top:auto;bottom:calc(var(--ark) + 160px)}
  .bymenu{top:auto;bottom:calc(var(--ark) + 12px);right:64px}
  .legende{max-width:calc(100vw - 20px)}
}
/* Telefon: gruppen nederst til højre udvider sig opad, når man trykker på tandhjulet – valgene og gruppen ses som ét felt (brugeren 12.11.2026: »så udvider det sig når man trykker på det«) */
@media (max-width:860px){
  body.indstaaben .venstre .bar{border-radius:22px 22px 0 0;border-bottom:0;padding:5px 0 5px;box-shadow:none;animation:op .22s var(--ease) both}
  body.indstaaben .styr{border-radius:0 0 22px 22px;border-top-color:transparent;padding-top:0}
  .bar .knapper{border-top:0;padding-top:0}
}
/* Telefon: kategorifeltet i samme rækkefølge som på computer, med »Sæson:« foran Jul og en knap, der slår alle lag til eller fra (brugeren 12.11.2026) */
@media (max-width:860px){
  .legende [data-kat]{order:0!important}
  .legende .lgs{font:700 8.5px/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--h-guld);align-self:center;margin-right:-3px}
  .legende .lgalle{margin-left:auto;padding:3px 8px;border:1px solid rgba(210,181,116,.45);border-radius:999px;color:var(--h-guld);font:600 9.5px/1.2 var(--sans);white-space:nowrap}
  .legende .lgalle::after{inset:-7px -4px}
  .legende{gap:7px 8px;padding:9px 12px;max-width:calc(100vw - 20px)}
}
/* Telefon: »Tilbage til kortet«, »Gem« og »Del« bliver stående øverst, mens man ruller ned i en begivenhed (brugeren 12.11.2026: »det øverste helt sort, og det er lidt forvirrende at vende tilbage til kortet«) */
@media (max-width:860px){
  #detalje{padding-top:0}
  .dhoved{position:sticky;top:0;z-index:3;margin:0 -16px 8px;padding:4px 16px 8px;background:var(--h-bg)}
  body.detalje .panel[data-ark="lav"] #detalje{overflow:hidden}
}
/* Telefon: oversigten i bunden er slankere (brugeren 13.11.2026: »Kan vi gøre den lidt smallere/mindre. Den er lidt robust«):
   luft i begge sider, lavere greb og rækker, mindre tal og tyndere kort. Højderne 66/84 og .34 står også i kort.js (højder, ARKDEL). */
@media (max-width:860px){
  .panel{left:8px;right:8px;border-radius:20px 20px 0 0;max-height:34vh}
  @supports (height:1dvh){.panel{max-height:34dvh}}
  .panel[data-ark="høj"]{max-height:86vh}
  @supports (height:1dvh){.panel[data-ark="høj"]{max-height:86dvh}}
  .panel[data-ark="lav"]{max-height:calc(66px + env(safe-area-inset-bottom))}
  body.detalje .panel[data-ark="lav"]{max-height:calc(84px + env(safe-area-inset-bottom))}
  .greb{height:22px;flex:0 0 22px}
  .greb::after{top:9px;width:34px;height:3px}
  .phoved{gap:7px;margin-bottom:8px;padding:0 12px}
  .prk{min-height:26px}
  #antal b{font-size:19px;line-height:1.1}
  #antal small{font-size:9.5px}
  .prknap .rund{width:28px;height:28px}
  .panel .vindue{padding:2px}
  .panel .vindue button{padding:7px 0;font-size:9.5px}
  #datoknap{height:34px;min-height:34px;font-size:12px;padding:0 11px 0 12px}
  #liste{padding:2px 12px 6px;gap:6px}
  .kk{padding:8px 10px 8px 12px;border-radius:14px;contain-intrinsic-size:auto 64px}
  .kk h3{font-size:14px;margin:2px 0}
  .kk .naar{font-size:11px}
}
/* Telefon: i arkets laveste stilling ses kun grebet og tallene – ikke en stribe af rækken nedenunder (brugeren 13.11.2026) */
@media (max-width:860px){
  .panel[data-ark="lav"] .phoved>:not(.prk),.panel[data-ark="lav"] #liste,.panel[data-ark="lav"] .fod{opacity:0;pointer-events:none}
  .phoved>*,#liste{transition:opacity .18s}
}
/* Hjælpen på telefon: afsnittet om kortets knapper og kategorierne var skjult af en ældre regel (fundet ved gennemgangen 13.11.2026) */
@media (max-width:860px){
  .hjdrej{display:block;font-size:12.5px;margin-top:12px;padding-top:12px}
}
/* Liggende telefon: kortet bruges kun på højkant (brugeren 13.11.2026). Gælder kun berøringsskærme med lav højde – ikke computere og tablets. */
.vend{display:none}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .vend{display:flex;position:fixed;inset:0;z-index:100;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:rgb(17,16,14);color:#d2b574}
  .vend b{font:500 22px/1.2 var(--serif,Georgia,serif);color:#f1ede3}
  .vend span{font:400 13.5px/1.4 var(--sans,system-ui,sans-serif);color:#b4aea0}
}
/* Hjælpen, ny udgave (brugeren 13.11.2026: »Gør denne bedre«): fem korte trin med ikoner, genveje som taster i stedet for en tæt tekstlinje */
.hjkort{width:min(420px,100%);padding:26px 26px 22px}
.hjkort h2{font-size:27px;margin:6px 0 6px}
.hjkort .hjlead{font-size:14px;line-height:1.4;color:var(--h-dæmp)}
.hjkort ol{margin:18px 0 0;gap:0}
.hjkort li{gap:13px;align-items:center;padding:10px 0;border-top:1px solid var(--h-linje)}
.hjkort li:first-child{border-top:0;padding-top:0}
.hjkort li i{flex:0 0 34px;height:34px;display:grid;place-items:center;border:0;border-radius:11px;background:rgba(210,181,116,.12);color:var(--h-guld);line-height:1}
.hjkort li b{font-size:14.5px}
.hjkort li span{font-size:12.5px;line-height:1.35;margin-top:1px}
.hjkort li span.kunpc,.hjkort li span.kuntlf{display:none}
.hjkort li span.kunpc{display:block}
.hjtast{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;margin-top:14px;padding:12px 14px;border:1px solid var(--h-linje);border-radius:14px;font:500 12px/1.2 var(--sans);letter-spacing:0;color:var(--h-dæmp)}
.hjtast span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.hjtast kbd{min-width:22px;height:22px;padding:0 6px;display:inline-grid;place-items:center;border-radius:6px;border:1px solid rgba(210,181,116,.4);background:rgba(210,181,116,.08);color:var(--h-guld);font:600 10.5px/1 var(--mono)}
.hjtast kbd+kbd{margin-left:-2px}
.hjtast span kbd:last-of-type{margin-right:4px}
.hjdrej{font-size:12.5px;line-height:1.4;margin-top:12px;padding-top:0;border-top:0}
.hjfod{font-size:12px;margin-top:6px}
#hjluk{margin-top:16px;height:44px}
@media (max-width:860px){
  .hjkort{padding:22px 20px 20px}
  .hjkort h2{font-size:24px}
  .hjtast{display:none}
  .hjkort li span.kunpc{display:none}
  .hjkort li span.kuntlf{display:block}
  .hjdrej{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--h-linje)}
}
/* Computer: knaprækken »Til listen · Gem · Del« bliver stående øverst, når man ruller i en begivenhed (brugeren 13.11.2026: »Knappen er ude af syne«) */
@media (min-width:861px){
  .dhoved{position:sticky;top:-20px;z-index:3;margin:-20px -20px 10px;padding:20px 20px 10px;background:rgb(28,27,24);box-shadow:0 10px 14px -12px rgba(0,0,0,.55)}
  [data-tema="nat"] .dhoved{background:rgb(27,29,35)}
}
/* Telefon: tandhjulet står i arkets hoved til venstre for stjernen, og hele menuen folder ud lige over arket – ingen stående bjælke på kortet (brugeren 13.11.2026) */
@media (max-width:860px){
  .styr{display:none!important}
  .prknap #indst{display:grid;place-items:center;position:static;width:28px;height:28px;flex:0 0 28px;margin:0;padding:0;border:0;border-radius:50%;background:var(--svag);color:var(--dæmp);box-shadow:none;animation:none;-webkit-backdrop-filter:none;backdrop-filter:none;line-height:0}
  .prknap #indst svg{width:15px;height:15px;margin:0}
  .prknap #indst[aria-expanded="true"]{background:var(--h-guld);color:#15130e}
  body.indstaaben .venstre .bar{display:flex;flex-direction:row;align-items:center;position:fixed;left:auto;right:8px;top:auto;bottom:calc(var(--ark) + 8px);width:auto;height:auto;padding:5px;gap:6px;border-radius:999px;border:1px solid rgba(210,181,116,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 54px -20px rgba(0,0,0,.65);animation:op .22s var(--ease) both}
  .venstre .bar .knapper{flex-direction:row;align-items:center;gap:6px;margin:0;padding:0;border:0}
  .venstre .bar .by{padding:0}
  .venstre .bar #byknap,.venstre .bar .knapper button,.venstre .bar #nord{width:38px;height:38px;min-height:38px;flex:0 0 38px;border-radius:50%;border:1px solid rgba(210,181,116,.38);background:none;color:var(--h-guld);display:grid;place-items:center;padding:0;margin:0}
  .venstre .bar #nord{display:none}
  .venstre .bar #nord.drejet{display:grid}
  .venstre .bar #mig.til{background:var(--h-guld);color:#15130e;border-color:var(--h-guld)}
  .venstre .bar .knapper button svg{width:16px;height:16px}
  .bymenu{top:auto;bottom:calc(var(--ark) + 62px);right:8px;left:auto}
}
@media (max-width:860px){
  .venstre .bar .by,.venstre .bar .knapper{width:auto;min-width:0;flex:0 0 auto} /* de havde fast bredde fra den lodrette bjælke, så knapperne løb ud over kanten */
}
@media (max-width:860px){
  .prknap #indst svg{width:16.5px;height:16.5px} /* samme synlige størrelse som stjernen ved siden af (brugeren 13.11.2026: først for stort, så for lille) */
}
@media (max-width:860px){
  /* De tre knapper i arkets hoved har samme trykflade: 32 × 28 som stjernen (brugeren 13.11.2026: »Selve tryk tasten er større på stjernen«) */
  .prknap #indst,.prknap #hj,.prknap #klok{width:32px;height:28px;flex:0 0 32px;border-radius:999px}
  .prknap #favvis{min-width:32px;height:28px}
  .prknap #indst svg{width:15px;height:15px}
}
@media (max-width:860px){
  /* Tandhjulets udvidede trykflade (.rund::after) skal måles fra knappen selv. Uden position:relative blev den målt fra arket og dækkede hele listen,
     så tryk på en begivenhed ramte tandhjulet (brugeren 13.11.2026: »så kommer man ikke ind på den«) */
  .prknap #indst{position:relative;top:auto;right:auto;bottom:auto;left:auto} /* de gamle top/right fra hjørneknappen må ikke flytte den */
  /* Åben begivenhed i højt ark: en tynd stribe af den tekst, man havde rullet forbi, kunne ses lige over »Tilbage til kortet« (brugeren 13.11.2026).
     Knaprækken sidder nu et punkt højere og har en dækkende kant over sig. */
  .dhoved{top:-1px;box-shadow:0 -8px 0 0 var(--h-bg)}
}
/* Telefon: grebet er en pil, der viser, hvilken vej arket kan trækkes – op, når det kan blive højere, ned, når det er helt oppe.
   Første gang vinker arket kort opad (brugeren 13.11.2026: »så man kan se, at menuen kan trækkes halvt op på skærmen og helt op«) */
.grebpil{display:none}
@media (max-width:860px){
  .greb::after{display:none}
  .grebpil{display:block;position:absolute;left:50%;top:5px;margin-left:-18px;color:#f1ede3;opacity:.55;transition:transform .3s var(--ease),opacity .2s}
  .panel[data-ark="høj"] .grebpil{transform:rotate(180deg)}
  .panel.trækkes .grebpil{opacity:.9}
  .panel.vink{animation:arkvink 1.5s var(--ease) 1;box-shadow:0 260px 0 0 var(--h-bg)}
  .panel.vink .grebpil{opacity:1;color:var(--h-guld)}
}
@keyframes arkvink{0%,100%{transform:translateY(0)}22%{transform:translateY(-26px)}44%{transform:translateY(0)}64%{transform:translateY(-14px)}84%{transform:translateY(0)}}
/* Telefon: filteret er én knap i højre hjørne (brugeren 13.11.2026). Feltet med alle kategorier øverst er taget ud – det kunne ikke rumme flere.
   Knappen viser de tændte lag som farvede prikker; listen med kontakter folder ud under den og kan rulles. */
.fprik{display:none}
@media (max-width:860px){
  .legende{display:none!important}
  #filterknap{display:flex!important;align-items:center;position:fixed;top:max(10px,env(safe-area-inset-top));right:10px;left:auto;z-index:31;height:44px;padding:0 13px 0 14px;gap:9px;border-radius:999px;
    background:var(--h-bg);border:1px solid rgba(210,181,116,.42);color:var(--h-tekst);font:600 13.5px/1 var(--sans);letter-spacing:.01em;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -18px rgba(0,0,0,.7);pointer-events:auto;animation:hudind .9s .12s var(--ease) backwards;transition:border-color .2s,background .2s}
  #filterknap svg{width:17px;height:17px;color:var(--h-guld);flex:0 0 auto}
  #filterknap span{display:inline}
  #filterknap .fprik{display:inline-flex;align-items:center;padding-left:9px;margin-left:1px;border-left:1px solid rgba(241,237,227,.16);height:18px}
  #filterknap .fprik i{width:10px;height:10px;border-radius:50%;background:var(--f);box-shadow:0 0 0 2px var(--h-bg);margin-left:-3px}
  #filterknap .fprik i:first-child{margin-left:0}
  #filterknap .fprik em{font:600 10px/1 var(--mono);font-style:normal;color:var(--h-dæmp);margin-left:4px}
  #filterknap b{display:none}
  #filterknap[aria-expanded="true"]{background:var(--h-bg);color:var(--h-guld);border-color:rgba(210,181,116,.85)}
  #filterknap[aria-expanded="true"] b{display:none}
  body.detalje #filterknap{display:none!important}
  body.lagaaben .skinne{top:calc(max(10px,env(safe-area-inset-top)) + 52px);right:10px;width:min(292px,calc(100vw - 20px));max-height:calc(100dvh - var(--ark) - 80px);border-radius:22px;padding:12px 10px 10px;border:1px solid rgba(210,181,116,.26)}
  body.lagaaben .skhoved{padding:2px 6px 8px}
  body.lagaaben .skalle{font-size:10.5px;padding:7px 10px;max-width:none}
  body.lagaaben .skalle::after{content:none}
}
@media (max-width:340px){#filterknap span:not(.fprik){display:none}}
@media (max-width:860px){
  /* Filterlisten: lidt lavere rækker, så alle lag og sæsonen kan ses uden at rulle, og plads til det længste navn ved siden af tallet */
  body.lagaaben .lg{grid-template-columns:28px minmax(0,1fr) auto 38px;padding:6px 8px;gap:10px}
  body.lagaaben .lg .skn{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.lagaaben .lg b{min-width:22px;text-align:right}
  body.lagaaben .sksaeson{margin-top:4px}
}
@media (max-width:860px){
  /* Filterlisten må gå ned over arket (den ligger øverst), så hele listen ses; lidt bredere, så »Trafik og afspærringer« står helt */
  body.lagaaben .skinne{width:min(330px,calc(100vw - 20px));max-height:calc(100dvh - 150px)}
  body.lagaaben .lg{gap:9px}
  body.lagaaben .lg .skn{font-size:13px}
}
/* Telefon: gennemsigtige mål for arket. Mens man trækker i arket – og første gang, når arket vinker – tegnes arkets omrids dér, hvor det lander:
   »Halvt op« og »Helt op« (brugeren 13.11.2026) */
.arkmaal{display:none}
@media (max-width:860px){
  .arkmaal{display:block;position:fixed;left:8px;right:8px;bottom:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s ease;
    border:1.5px dashed rgba(210,181,116,.75);border-bottom:0;border-radius:20px 20px 0 0;background:linear-gradient(to bottom,rgba(17,16,14,.34),rgba(17,16,14,.10) 46px,rgba(17,16,14,0) 110px)}
  .arkmaal span{position:absolute;left:50%;top:9px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:rgba(17,16,14,.86);border:1px solid rgba(210,181,116,.5);
    color:#d2b574;font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
  body.arkmaalvis .arkmaal{opacity:1}
  body.arkmaalvis .arkmaal.nu{opacity:0}
}
/* Safari på iPhone: kortet fylder hele skærmen, også bag uret og bag adresselinjen (brugeren 13.11.2026). Se KANT i kort.js: siden er 200 punkter højere
   end skærmen og holdes rullet 100 punkter ned; kortet fylder hele siden. Arket får en mørk forlængelse nedad, så det går helt til skærmens kant. */
html.kant,html.kant body{height:auto;overflow:visible;overscroll-behavior:none}
html.kant body{height:calc(100lvh + 200px)}
html.kant #kort{position:absolute;inset:auto;left:0;right:0;top:0;height:calc(100lvh + 200px)}
html.kant .panel.hud{box-shadow:0 160px 0 0 var(--h-bg)}
html.kant .panel.trækkes,html.kant .panel.lander,html.kant .panel.vink{box-shadow:0 300px 0 0 var(--h-bg)}
/* Safari farver feltet bag uret efter fastsiddende elementer, der rører skærmens top. Sløret bag det høje ark gjorde feltet sort, når arket blev trukket.
   I kant-udgaven ligger sløret derfor på selve siden ligesom kortet og dæmper hele kortet, også bag uret. Arkets mål begynder under toppen af samme grund. */
html.kant #slør{position:absolute;inset:auto;left:0;right:0;top:0;height:calc(100lvh + 200px)}
/* Hjælpens baggrund ligger også på selve siden i kant-udgaven, så feltet bag uret ikke bliver en lys bjælke, mens hjælpen er åben */
html.kant .hjbag{position:absolute;inset:auto;left:0;right:0;top:0;height:calc(100lvh + 200px)}
/* Hjælpen på telefon har et trin om at trække menuen op (brugeren 13.11.2026: »Der skal også være en vejledning til at tage menuen helt op«) */
.hjkort li.kuntlfli{display:none}
@media (max-width:860px){
  .hjkort li.kuntlfli{display:flex}
  .hjkort li{padding:8px 0}
}
@media (max-width:860px){
  /* Hjælpen med seks trin skal kunne ses helt uden at rulle: lidt tættere rækker */
  .hjkort{padding:18px 20px 16px}
  .hjkort h2{font-size:22px;margin:4px 0 4px}
  .hjkort .hjlead{font-size:13px}
  .hjkort ol{margin-top:12px}
  .hjkort li{padding:6px 0;gap:12px}
  .hjkort li i{flex:0 0 30px;height:30px;border-radius:10px}
  .hjkort li b{font-size:14px}
  .hjkort li span{font-size:12px;line-height:1.3}
  .hjdrej{font-size:12px;margin-top:8px;padding-top:8px}
  .hjfod{margin-top:4px}
  #hjluk{margin-top:12px;height:42px}
}
/* Kant-udgaven: hjælpens midte er sidens midte, som ligger lidt lavere end den synlige flade mellem ur og adresselinje */
html.kant .hjkort{max-height:calc(100dvh - 48px);transform:translateY(-18px)}
@media (max-width:860px){
  /* Bymenuen åbnede uden for skærmen, efter at indstillingerne blev en vandret menu over arket (fundet ved gennemgangen 13.11.2026).
     Den måles nu fra menuen selv og folder ud lige over den, højrestillet. */
  .venstre .bar .bymenu{position:absolute;top:auto;bottom:calc(100% + 8px);right:0;left:auto;width:min(248px,calc(100vw - 16px))}
}
/* Arkets mål, anden udgave (brugeren 13.11.2026: »fungerer ikke helt godt. Ret det og gør det flydende«): målene ligger nu over arket, så begge kan ses
   uanset hvilken vej man trækker; de toner blødt ind og ud; og det mål, arket lander på, hvis man slipper, lyser op, mens det andet står dæmpet. */
@media (max-width:860px){
  .arkmaal{z-index:5;border:0;border-top:2px dashed rgba(210,181,116,.55);border-radius:20px 20px 0 0;
    background:linear-gradient(to bottom,rgba(210,181,116,.13),rgba(210,181,116,0) 64px);
    opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .32s var(--ease),border-color .2s ease}
  .arkmaal span{top:-13px;padding:6px 13px;background:rgba(17,16,14,.92);border:1px solid rgba(210,181,116,.55);color:#d2b574;
    transition:background .2s ease,color .2s ease,transform .26s var(--ease),box-shadow .2s ease}
  body.arkmaalvis .arkmaal{opacity:.5;transform:none}
  body.arkmaalvis .arkmaal.nu{opacity:.5}
  body.arkmaalvis .arkmaal.aktiv{opacity:1;border-top-style:solid;border-top-color:#d2b574}
  .arkmaal.aktiv span{background:#d2b574;color:#15130e;border-color:#d2b574;transform:translateX(-50%) scale(1.08);box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
  .panel.vink{animation:arkvink 1.9s var(--ease) 1}
}
@keyframes arkvink{0%,100%{transform:translateY(0)}30%{transform:translateY(-22px)}60%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.arkmaal,.arkmaal span{transition:none}}
@media (max-width:860px){
  /* Mærkerne står til venstre, så »Halvt op« ikke ligger oven på pilen midt i arkets greb */
  .arkmaal span{left:22px;transform:none;transform-origin:left center}
  .arkmaal.aktiv span{transform:scale(1.08)}
}
@media (max-width:860px){
  /* Filterlisten på telefon er gjort mindre (brugeren 13.11.2026: »Gør det lidt mindre«): smallere, lavere rækker, mindre ikoner og kontakter */
  body.lagaaben .skinne{width:min(252px,calc(100vw - 20px));padding:9px 8px 8px;border-radius:18px}
  body.lagaaben .skhoved{padding:1px 5px 6px}
  body.lagaaben .skhoved span{font-size:9px}
  body.lagaaben .skalle{font-size:9.5px;padding:5px 8px}
  body.lagaaben .lg{grid-template-columns:24px minmax(0,1fr) auto 32px;padding:4px 6px;gap:8px}
  body.lagaaben .lg i{width:24px;height:24px}
  body.lagaaben .lg i svg{width:12px;height:12px}
  body.lagaaben .lg .skn{font-size:12.5px}
  body.lagaaben .lg b{font-size:10px;min-width:20px}
  body.lagaaben .lg em{width:32px;height:19px}
  body.lagaaben .lg em::after{top:2.5px;left:15.5px;width:14px;height:14px}
  body.lagaaben .lg[aria-pressed="false"] em::after{left:2.5px}
  body.lagaaben .sksaeson{margin-top:2px}
  body.lagaaben .sksaeson span{font-size:9px}
}
/* Ringene om det, der er i gang, pulserer også, mens kortet trækkes (brugeren 13.11.2026). Reglen længere oppe satte dem på pause. */
.flytter .mrk.live .grund::before,.flytter .mrk.live .grund::after,.flytter .kk .ring::after{animation-play-state:running}