:root{
  --gronn:#3fbf6b; --bla:#4b9bff; --rod:#ff4d4d; --svart:#0b1016;
  --disp:'Archivo',system-ui,sans-serif;
  --brod:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
:root[data-tema="mork"]{
  color-scheme:dark;
  --natt:#06101a; --sidebunn:#06101a; --dyp:#0a1724; --flate:rgba(12,26,38,.82);
  --kant:rgba(160,200,225,.16); --kant-sterk:rgba(160,200,225,.34);
  --sno:#eef4f8; --dis:#93a8b8; --glod:#ff6e8a; --pa-tekst:#1a0308; --is:#6ec9d8;
  --felt:rgba(255,255,255,.06); --hev:rgba(255,255,255,.035);
  --skygge:0 18px 50px rgba(0,0,0,.55); --spor:rgba(255,255,255,.16);
  --telling:#c3d3df;
}
:root[data-tema="lys"]{
  color-scheme:light;
  --natt:#f4f6f8; --sidebunn:#fafbfc; --dyp:#ffffff; --flate:rgba(255,255,255,.92);
  --kant:rgba(11,26,38,.14); --kant-sterk:rgba(11,26,38,.3);
  --sno:#0b1a26; --dis:#5b6d7d; --glod:#d1204b; --pa-tekst:#ffffff; --is:#0d6f80;
  --felt:rgba(11,26,38,.05); --hev:rgba(11,26,38,.03);
  --skygge:0 14px 40px rgba(11,26,38,.16); --spor:rgba(11,26,38,.14);
  --telling:#22333f;
}
*{box-sizing:border-box}
/* Plassen til rullefeltet holdes av hele tiden. Uten dette blir vinduet
   femten piksler bredere i det øyeblikket siden låses, og alt som er
   midtstilt hopper sidelengs. Regelen må stå på body: når html har
   overflow:visible, er det body sine verdier som gjelder for vinduet. */
html,body{height:100%;scrollbar-gutter:stable}
@supports not (scrollbar-gutter: stable){ html{overflow-y:scroll} }
body{
  margin:0;background:var(--natt);color:var(--sno);
  font-family:var(--brod);font-size:15px;line-height:1.5;
  overflow:hidden;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:var(--is)}
:focus-visible{outline:2px solid var(--glod);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

#kart{position:fixed;inset:0;background:var(--natt)}
.maplibregl-ctrl-attrib{font-size:10px!important}
.maplibregl-canvas{outline:none}

/* ---------- topplinje ---------- */
.topp{position:fixed;top:0;left:0;right:0;z-index:42;display:grid;   /* over både kart, landingsside og anleggskort */
  grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:16px 20px;pointer-events:none}
.topp > *{pointer-events:auto}
.telling{margin:0;font-family:var(--mono);font-size:11px;color:var(--telling);letter-spacing:.04em;justify-self:start;font-weight:500}
.merke{justify-self:center;padding:4px 8px;border-radius:10px;transition:opacity .16s}
.merke:hover{opacity:.72}
.merke b{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.merke b i{font-style:normal;color:var(--glod)}
.verktoy{display:flex;align-items:center;gap:10px;justify-self:end}
.knapp{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:var(--flate);border:1px solid var(--kant);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:13px;font-weight:500;white-space:nowrap;transition:border-color .18s,transform .18s;
}
.knapp:hover{border-color:var(--kant-sterk)}
.knapp:active{transform:translateY(1px)}
.knapp svg{width:16px;height:16px;flex:none}
.knapp.skjul{display:none}
#tema{padding:9px;width:38px;justify-content:center}

/* ---------- panel ---------- */
.panel{
  position:fixed;z-index:30;left:50%;bottom:78px;
  width:min(1124px,calc(100vw - 56px));max-height:calc(100vh - 110px);
  transform:translateX(-50%);display:flex;flex-direction:column;overflow:hidden;
  background:var(--flate);border:1px solid var(--kant);border-radius:22px;
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:var(--skygge);transform-origin:bottom center;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.3,1),bottom .3s ease;
}
.panel[hidden]{display:none}
.panel.borte{opacity:0;transform:translateX(-50%) translateY(26px) scale(.94);pointer-events:none}
.grep{padding:9px 0 3px;display:flex;justify-content:center;cursor:grab;touch-action:none}
.grep::before{content:"";width:38px;height:4px;border-radius:999px;background:var(--spor)}
.grep:active{cursor:grabbing}
.sok{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--kant);cursor:grab;touch-action:none}
.sok:active{cursor:grabbing}
.sok input,.sok select,.sok button{cursor:auto;touch-action:auto}
.sok select,.sok button{cursor:pointer}
.panel.drar,.detalj.drar{transition:none}
.detalj [data-grep]{touch-action:none;cursor:grab}
.detalj [data-grep]:active{cursor:grabbing}
.detalj .grep{padding:0 0 8px}
.sok svg{width:17px;height:17px;color:var(--dis);flex:none}
.sok input{flex:1;min-width:0;background:none;border:0;color:var(--sno);font:500 17px/1.2 var(--brod);padding:6px 0}
.sok input::placeholder{color:var(--dis)}
.sok input:focus{outline:none}
select{background:var(--felt);border:1px solid var(--kant);color:var(--sno);border-radius:999px;padding:7px 10px;font:500 12px var(--brod)}
select:focus{outline:none;border-color:var(--kant-sterk)}
.lukk-panel{padding:4px;color:var(--dis);line-height:0}
.lukk-panel svg{width:16px;height:16px}
.rader{padding:0;border-top:0;overflow-y:auto;min-height:0}
.rad{display:flex;align-items:center;gap:10px;padding:12px 20px;flex-wrap:wrap;border-bottom:1px solid var(--kant)}
.rad + .rad,#raderMer .rad:first-child{border-top:0}
.panel #raderMer{display:block!important}
.panel #flereFilter{display:none!important}
.stripe{
  display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:thin;scrollbar-color:var(--spor) transparent;
  padding-bottom:4px;margin-bottom:-4px;
}
.stripe::-webkit-scrollbar{height:5px}
.stripe::-webkit-scrollbar-thumb{background:var(--spor);border-radius:3px}
.stripe::-webkit-scrollbar-track{background:transparent}
.stripe .brikke{flex:none}
/* egenskapene legges i to etasjer, så du slipper å dra så langt sidelengs */
.stripe.to-rader{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:max-content;align-content:start;
}
.flere{
  display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 12px;border-radius:999px;
  border:1px solid var(--kant);background:var(--hev);font-size:13px;transition:all .16s;
}
.flere:hover{border-color:var(--kant-sterk)}
.flere svg{width:15px;height:15px;color:var(--dis)}
.flere[aria-expanded="true"]{background:var(--glod);border-color:var(--glod);color:var(--pa-tekst)}
.flere[aria-expanded="true"] svg{color:currentColor}
.flere em{
  font-style:normal;font-family:var(--mono);font-size:10px;min-width:16px;height:16px;line-height:16px;
  text-align:center;border-radius:999px;background:var(--glod);color:var(--pa-tekst);padding:0 4px;
}
.flere[aria-expanded="true"] em{background:var(--pa-tekst);color:var(--glod)}

.stikk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dis);margin-right:4px;flex:none}
.brikke{padding:6px 12px;border-radius:999px;font-size:13px;border:1px solid var(--kant);background:var(--hev);transition:all .16s;white-space:nowrap}
.brikke:hover{border-color:var(--kant-sterk)}
.brikke.på{background:var(--glod);border-color:var(--glod);color:var(--pa-tekst);font-weight:600}
.brikke .tall{font-family:var(--mono);font-size:11px;opacity:.6;margin-left:5px}
.brikke.verdensdel{font-weight:600;border-color:var(--kant-sterk)}
.brikke:disabled{opacity:.35;cursor:default}
.brikke:disabled:hover{border-color:var(--kant)}
.brikke.verdensdel + .brikke:not(.verdensdel){margin-left:9px;position:relative}
.brikke.verdensdel + .brikke:not(.verdensdel)::before{
  content:"";position:absolute;left:-9px;top:5px;bottom:5px;width:1px;background:var(--kant);
}
.skyv{display:flex;flex-direction:column;gap:1px;flex:1 1 190px;min-width:150px}
.skyv-topp{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.skyv label{font-size:12px;color:var(--dis);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skyv output{font-family:var(--mono);font-size:11px;white-space:nowrap;flex:none;color:var(--sno)}
.skyv select{
  width:100%;margin-top:3px;height:36px;border-radius:9px;
  background-color:var(--dyp);border:1px solid var(--kant-sterk);
  padding:0 28px 0 10px;color:var(--sno);font:500 13px/34px var(--brod);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a8b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
}
.skyv select:focus{outline:none;border-color:var(--glod)}
.skyv option{background:var(--dyp);color:var(--sno)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:none;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--spor)}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--spor)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--glod);margin-top:-5.5px;border:2px solid var(--dyp)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--dyp);border-radius:50%;background:var(--glod)}
.treffrad{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;border-bottom:1px solid var(--kant)}
.treffrad p{margin:0;font-size:12px;color:var(--dis)}
.treffrad b{color:var(--sno);font-family:var(--mono)}
.smalenke{font-size:12px;color:var(--glod);text-decoration:underline;text-underline-offset:3px}
.smalenke + .smalenke{margin-left:12px}
.strimmel{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;height:298px;min-height:298px;padding:14px 20px 18px;scrollbar-width:thin;scrollbar-gutter:stable;flex:none}
.strimmel::-webkit-scrollbar{height:6px}
.strimmel::-webkit-scrollbar-thumb{background:var(--spor);border-radius:3px}
.kort{
  scroll-snap-align:start;flex:none;width:186px;height:252px;text-align:left;padding:10px;
  border-radius:13px;border:1px solid var(--kant);overflow:hidden;
  background:var(--dyp);display:flex;flex-direction:column;transition:all .16s;
}
.kort:hover{border-color:var(--glod);transform:translateY(-2px)}
.kort img{width:100%;height:116px;flex:none;object-fit:cover;object-position:center;display:block;background:var(--felt);border-radius:9px}
.kort .under{display:flex;flex:1;min-height:0;flex-direction:column;padding:10px 2px 2px}
.kort h3{margin:0;font:600 13.5px/1.25 var(--brod);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kort .sted{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dis);margin:3px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kort .fakta{display:flex;gap:11px;font-family:var(--mono);font-size:11px;margin:0}
.kort .fakta i{font-style:normal;color:var(--dis)}
.kort .stolpe{margin-top:auto}
.tom{padding:22px 16px 24px;color:var(--dis);font-size:13px;max-width:52ch}
.tom b{color:var(--sno);display:block;margin-bottom:4px;font-weight:600}
.stolpe{display:flex;height:4px;border-radius:2px;overflow:hidden;margin-top:10px;background:var(--spor)}
.stolpe span{display:block;height:100%}

/* ---------- skiven ---------- */
.skive{
  position:fixed;z-index:30;left:50%;bottom:78px;transform:translateX(-50%);
  width:60px;height:60px;border-radius:50%;background:var(--flate);
  border:1px solid var(--kant-sterk);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--skygge);display:grid;place-items:center;
  transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.3,1),bottom .3s ease;
}
.skive::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--kant)}
.skive::after{content:"";position:absolute;inset:-18px;border-radius:50%;border:1px solid var(--kant)}
.skive:hover{transform:translateX(-50%) scale(1.06)}
.skive svg{width:22px;height:22px}
.skive .teller{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--glod);color:var(--pa-tekst);font:600 11px/22px var(--mono);text-align:center;border:2px solid var(--natt)}
.skive.borte{opacity:0;transform:translateX(-50%) scale(.5);pointer-events:none}
.skive[hidden]{display:none}

/* ---------- anleggskortene ----------
   To selvstendige kort på PC: informasjon til venstre, turplanlegger til høyre,
   med kartet fritt i midten. På smalere skjermer blir de ett bunnark med faner. */
.detalj{
  position:fixed;inset:0;z-index:40;pointer-events:none;
  transition:opacity .26s,transform .26s cubic-bezier(.2,.8,.3,1);
}
.detalj[hidden]{display:none}
.detalj.borte{opacity:0;transform:translateY(14px);pointer-events:none}
.anleggskort{
  position:fixed;pointer-events:auto;
  left:0;right:0;bottom:0;top:auto;max-height:82vh;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--flate);border:1px solid var(--kant);border-radius:20px 20px 0 0;
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:var(--skygge);padding:18px;
}
.anleggskort.drar{transition:none}
.anleggskort-tur{display:none}
body.fane-tur .anleggskort-info{display:none}
body.fane-tur .anleggskort-tur{display:block}
.anleggskort .lukk{position:absolute;top:12px;right:12px;color:var(--dis);line-height:0;padding:6px}
.anleggskort .lukk svg{width:16px;height:16px}
.anleggskort [data-grep]{touch-action:none;cursor:grab}
.anleggskort [data-grep]:active{cursor:grabbing}
.anleggskort .grep{padding:0 0 8px}
.anleggskort .sted{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--glod);margin:0}
.anleggskort h2{margin:6px 0 0;font:800 24px/1.1 var(--disp);letter-spacing:-.01em;padding-right:24px}
.anleggskort .notat{margin:12px 0 0;font-size:13.5px;color:var(--dis)}
.faner{display:flex;gap:6px;margin:14px 0 2px}
.faner button{
  flex:1;padding:8px 10px;border-radius:9px;font-size:13px;font-weight:500;
  border:1px solid var(--kant);background:var(--hev);color:var(--dis);transition:all .16s;
}
.faner button.på{background:var(--glod);border-color:var(--glod);color:var(--pa-tekst);font-weight:600}
.bilder{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:14px 0 0;border-radius:12px}
.bilder img{
  scroll-snap-align:start;flex:none;width:100%;aspect-ratio:4/3;
  object-fit:cover;border-radius:12px;background:var(--felt);display:block;
}
.bilder::-webkit-scrollbar{height:0}
.beskrivelse p{margin:10px 0 0;font-size:13.5px;color:var(--dis)}
.bildeinfo{position:absolute;z-index:5}
.bildeinfo-knapp{
  width:24px;height:24px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:rgba(4,10,16,.72);border:1px solid rgba(255,255,255,.34);color:#fff;
  font:600 12px/1 var(--mono);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.bildeinfo-tekst{
  position:absolute;left:0;bottom:calc(100% + 7px);width:max-content;max-width:min(360px,calc(100vw - 32px));
  padding:8px 10px;border-radius:8px;background:rgba(4,10,16,.94);border:1px solid rgba(255,255,255,.18);
  color:#eef4f8;font:500 10px/1.45 var(--mono);letter-spacing:.02em;text-transform:none;
  box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .16s,transform .16s,visibility .16s;pointer-events:none;
}
.bildeinfo:hover .bildeinfo-tekst,.bildeinfo:focus-within .bildeinfo-tekst,.bildeinfo.apen .bildeinfo-tekst{
  opacity:1;visibility:visible;transform:none;
}
.galleri .bildeinfo{right:8px;bottom:8px}
.galleri .bildeinfo-tekst{left:auto;right:0}
.bildeinfo[hidden]{display:none!important}
.deler{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--dis)}
.deler b{color:var(--sno);font-weight:600}
.utlenker{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.hjemmeside{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 13px;border-radius:9px;border:1px solid var(--kant-sterk);
  color:var(--sno);text-decoration:none;font-size:13px;font-weight:500;transition:all .16s;
}
.hjemmeside:hover{border-color:var(--glod);color:var(--glod)}
.loypeknapp.på,.satknapp.på{border-color:var(--glod);color:var(--glod);background:var(--felt)}
#satkreditt{left:auto;right:8px}
.byggmerke{
  position:fixed;left:8px;bottom:8px;z-index:60;margin:0;
  padding:3px 8px;border-radius:5px;background:rgba(4,10,16,.7);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  color:var(--dis);pointer-events:none;
}
.loypekontroll{
  position:fixed;z-index:46;top:84px;left:20px;width:min(330px,calc(100vw - 40px));
  padding:14px;background:var(--flate);border:1px solid var(--kant);border-radius:14px;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--skygge);
}
.loypekontroll[hidden]{display:none!important}
.loypekontroll .sted{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--glod)}
.loypekontroll h2{margin:6px 0 0;font:800 24px/1.05 var(--disp);letter-spacing:-.02em;padding-right:4px}
.loypekontroll .notat{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--dis)}
.loypekontroll .fakta-bunn{margin-top:14px}
.loypekontroll .tall-rutenett{margin:0}
.loypekontroll .stolpe{margin-top:12px}
.loypekontroll .forklaring{margin-top:8px}
.loypekontroll .status{min-height:1.4em;margin:10px 0 0;font-size:12px;color:var(--dis)}
.loypekontroll-knapper{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.loypekontroll-knapper .hjemmeside{background:var(--dyp)}
body.terreng .detalj,body.terreng .panel,body.terreng .skive{display:none!important}
body.terreng .snuhint{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:34;
  padding:8px 15px;border-radius:999px;background:var(--flate);border:1px solid var(--kant);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dis);backdrop-filter:blur(12px);pointer-events:none;opacity:0;transition:opacity .3s;
}
body.terreng .snuhint{opacity:1}
@media (max-width:1099px){ .snuhint{bottom:96px} }
.hjemmeside svg{width:13px;height:13px}
.galleri{position:relative;margin:14px 0 0}
.bildepil{
  position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(10,23,36,.6);color:#fff;backdrop-filter:blur(6px);
  opacity:0;transition:opacity .18s,background .18s;
}
.bildepil svg{width:16px;height:16px}
.bildepil.forrige{left:8px}
.bildepil.neste{right:8px}
.galleri:hover .bildepil,.bildepil:focus-visible{opacity:1}
.bildepil:hover{background:rgba(10,23,36,.85)}
.bildeprikker{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px}
.bildeprikker i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)}
.bildeprikker i.på{background:#fff;width:14px;border-radius:3px}
.bilder img{cursor:zoom-in}

.lysbord{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:24px;
  background:rgba(4,9,15,.92);backdrop-filter:blur(8px);transition:opacity .22s;
}
.lysbord[hidden]{display:none}
.lysbord.borte{opacity:0;pointer-events:none}
.lysbord img{max-width:100%;max-height:82vh;border-radius:14px;object-fit:contain}
.lysbord .pil{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;
}
.lysbord .pil:hover{background:rgba(255,255,255,.22)}
.lysbord .pil svg{width:20px;height:20px}
.lysbord .lukk{position:absolute;top:18px;right:18px;color:#fff;padding:8px;line-height:0}
.lysbord .lukk svg{width:20px;height:20px}
.lysbord .teller{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;margin:0;
  color:rgba(255,255,255,.7);font-size:12px;
}

/* ---------- favoritter ---------- */
.stjerneknapp{position:relative;padding:9px;width:38px;justify-content:center;flex:none}
.stjerneknapp svg{width:17px;height:17px}
.stjerneknapp.på{background:var(--glod);border-color:var(--glod);color:var(--pa-tekst)}
.stjerneknapp.på svg{fill:currentColor}
.stjerneknapp .teller{
  display:block;
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;background:var(--glod);color:var(--pa-tekst);
  font:600 10px/18px var(--mono);text-align:center;border:2px solid var(--natt);
}
.stjerneknapp.på .teller{background:var(--dyp);color:var(--glod)}
.stjerneknapp .teller[hidden]{display:none}
.lagre{
  position:absolute;top:10px;right:44px;padding:7px;line-height:0;border-radius:50%;
  color:var(--dis);transition:color .16s,background .16s;
}
.lagre svg{width:19px;height:19px}
.lagre:hover{color:var(--glod);background:var(--felt)}
.lagre.på{color:var(--glod)}
.lagre.på svg{fill:currentColor}

@media (max-width:720px){
  .lysbord{padding:12px;gap:6px}
  .lysbord .pil{width:38px;height:38px}
  .bildepil{opacity:1;background:rgba(10,23,36,.45)}
}
.tall-rutenett{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:16px 0 0;
  background:var(--kant);border:1px solid var(--kant);border-radius:10px;overflow:hidden;
}
.tall-rutenett div{background:var(--dyp);padding:9px 11px}
.tall-rutenett dt{font-size:10px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dis);margin:0}
.tall-rutenett dd{margin:2px 0 0;font-family:var(--mono);font-size:15px;font-weight:500}
.merkelapper{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.merkelapp{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--kant-sterk);color:var(--is)}
.forklaring{display:flex;gap:12px;margin:8px 0 0;font-family:var(--mono);font-size:10px;color:var(--dis);flex-wrap:wrap}
.forklaring i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:4px}

/* Senket kort på mobil: bare håndtaket og navnet stikker opp, og du drar
   eller trykker det opp igjen når du er ferdig med å se på løypene. */
@media (max-width:1099px){
  body.kort-senket .anleggskort{
    transform:translateY(calc(100% - 76px));
    transition:transform .34s cubic-bezier(.22,.8,.28,1);
  }
  body.kort-senket .anleggskort .grep::after{
    content:attr(data-hint);
    position:absolute;left:0;right:0;top:26px;text-align:center;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--dis);pointer-events:none;
  }
  body.kort-senket .anleggskort .lukk,
  body.kort-senket .anleggskort .lagre{opacity:0;pointer-events:none}
}

@media (min-width:1100px){
  .detalj.borte{transform:translateY(-10px)}
  /* Kortene sentreres loddrett med flex, ikke med transform. Da står de like
     høyt, midt på siden, og transform er ledig til sveipingen. */
  .detalj{display:flex;align-items:center;justify-content:space-between;padding:0 20px}
  .detalj{padding:84px 20px 72px}
  .anleggskort{
    position:relative;top:auto;bottom:auto;left:auto;right:auto;
    width:340px;flex:none;height:100%;max-height:none;
    border-radius:18px;display:flex;flex-direction:column;overflow:hidden;
  }
  .anleggskort > *{flex:none}
  /* bare brødteksten ruller. Bilder, tall og merkelapper står stille. */
  .anleggskort-info .tekstfelt{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:2px}
  .anleggskort-tur .tur{flex:1 1 auto;min-height:0;overflow-y:auto}
  /* finskriften står stille helt nederst i kolonnen */
  .anleggskort-tur .finskrift{margin-top:auto;padding-top:12px;border-top:1px solid var(--kant)}
  /* bildene tar mindre plass i høyden når kortet skal romme alt */
  .anleggskort .bilder img{aspect-ratio:16/10}
  body.fane-tur .anleggskort-info{display:block}
  .faner{display:none}
  .anleggskort-tur .sted,.anleggskort-tur h2,.anleggskort-tur .lukk{display:none}
  .anleggskort-tur .tur{margin-top:0;padding-top:0;border-top:0}
}

/* ---------- turplanlegger ---------- */
.tur{margin-top:18px;padding-top:16px;border-top:1px solid var(--kant)}
.tur h3{margin:0 0 12px;font:800 13px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase}
.telle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.telle > span:first-child{font-size:13px;color:var(--dis)}
.stegg{display:flex;align-items:center;gap:2px;background:var(--felt);border:1px solid var(--kant);border-radius:999px;padding:2px}
.stegg button{width:28px;height:28px;border-radius:50%;font-size:17px;line-height:1;display:grid;place-items:center;color:var(--sno)}
.stegg button:hover{background:var(--hev)}
.stegg button[disabled]{opacity:.3;cursor:not-allowed}
.stegg output{font-family:var(--mono);font-size:13px;min-width:44px;text-align:center}
.tur-felt{display:flex;gap:8px;margin-bottom:12px}
.tur-felt label{flex:1 1 0;min-width:0;display:block;font-size:10px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dis)}
/* iOS gir dato- og nedtrekksfelt sine egne mål hvis vi ikke slår det av.
   Begge tvinges til samme høyde, bredde og skrift. */
.tur-felt input,.tur-felt select{
  display:block;width:100%;min-width:0;height:40px;margin-top:4px;
  -webkit-appearance:none;appearance:none;
  background-color:var(--dyp);border:1px solid var(--kant-sterk);border-radius:9px;
  padding:0 10px;color:var(--sno);font:500 14px/38px var(--brod);
  box-sizing:border-box;
}
.tur-felt select{
  padding-right:28px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a8b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;
}
.tur-felt input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0;line-height:38px}
.tur-felt input[type=date]::-webkit-datetime-edit,
.tur-felt input[type=date]::-webkit-datetime-edit-fields-wrapper,
.tur-felt input[type=date]::-webkit-datetime-edit-text,
.tur-felt input[type=date]::-webkit-datetime-edit-day-field,
.tur-felt input[type=date]::-webkit-datetime-edit-month-field,
.tur-felt input[type=date]::-webkit-datetime-edit-year-field{
  background:transparent !important;color:var(--sno) !important;-webkit-text-fill-color:var(--sno);
}
.tur-felt input[type=date]::-webkit-inner-spin-button{display:none}
.tur-felt input[type=date]::-webkit-calendar-picker-indicator{opacity:.45;margin:0}
.tur-felt input:focus,.tur-felt select:focus{outline:none;border-color:var(--glod)}
.tur-felt option{background:var(--dyp);color:var(--sno)}
/* datofeltet tegnes av nettleseren selv, så vi tvinger farge og ikon */
.tur-felt input[type=date]{
  background:var(--dyp) !important;background-image:none !important;
  color:var(--sno) !important;-webkit-text-fill-color:var(--sno);
  -webkit-appearance:none;appearance:none;
}
:root[data-tema="mork"] .tur-felt input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.4);opacity:.55;
}
.pris{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--kant);font-size:13px}
.pris b{font-family:var(--mono);font-weight:600;white-space:nowrap}
.pris i{font-style:normal;display:block;font-size:11px;color:var(--dis);font-family:var(--mono)}
.pris.sum{border-bottom:0;padding-top:12px;font-weight:600}
.pris.sum b{font-size:19px;color:var(--glod)}
.bestill{display:flex;gap:8px;margin-top:14px}
.bestill a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 10px;border-radius:11px;text-decoration:none;font-size:13.5px;font-weight:600;background:var(--glod);color:var(--pa-tekst);transition:filter .16s,transform .16s}
.bestill a.andre{background:var(--felt);color:var(--sno);border:1px solid var(--kant-sterk)}
.bestill a:hover{filter:brightness(1.08);transform:translateY(-1px)}
.bestill svg{width:15px;height:15px;flex:none}
.finskrift{margin:12px 0 0;font-size:10.5px;line-height:1.45;color:var(--dis)}
.barnenote{margin:8px 0 0;font-size:10.5px;line-height:1.45;color:var(--dis)}
.pakkelenke{
  display:inline-block;margin:10px 0 0;font-size:12px;font-weight:500;
  color:var(--is);text-decoration:none;
}
.pakkelenke:hover{text-decoration:underline;text-underline-offset:3px}
.finskrift a{color:var(--dis)}

/* ---------- meny ---------- */
.bak{position:fixed;inset:0;z-index:50;background:rgba(4,10,16,.55);backdrop-filter:blur(4px);
  transition:opacity .24s}
.bak[hidden]{display:none}
.bak.borte{opacity:0;pointer-events:none}
.meny{
  position:fixed;z-index:51;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(480px,calc(100vw - 32px));max-height:min(78vh,700px);overflow-y:auto;
  background:var(--dyp);border:1px solid var(--kant);border-radius:20px;
  box-shadow:var(--skygge);padding:24px 24px 20px;
  transition:opacity .24s,transform .24s cubic-bezier(.2,.8,.3,1);
}
.meny[hidden]{display:none}
.meny.borte{opacity:0;transform:translate(-50%,-46%) scale(.97);pointer-events:none}
.meny .lukk{position:absolute;top:14px;right:14px;color:var(--dis);line-height:0;padding:6px}
.meny .lukk svg{width:17px;height:17px}
.meny h2{margin:0 0 2px;font:800 22px/1.1 var(--disp);letter-spacing:-.01em}
.meny .ingress{margin:0 0 20px;font-size:13.5px;color:var(--dis)}
.meny section{padding:15px 0;border-top:1px solid var(--kant)}
.meny h3{margin:0 0 6px;font:800 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--glod)}
.meny p{margin:0;font-size:13.5px;color:var(--dis)}
.meny p + p{margin-top:8px}
.meny a{color:var(--sno);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--kant-sterk)}
.meny a:hover{text-decoration-color:var(--glod)}


/* ---------- landingssiden ----------
   Det første du ser. Et bilde i full bredde med de største anleggene der du
   bor, en filterboks du kan søke i, og ferdige samlinger under. Dra arket ned,
   scroll deg forbi det, eller trykk knappen, så kommer kloden fram. */
.landing{
  position:fixed;inset:0;z-index:35;
  display:flex;flex-direction:column;
  background:var(--sidebunn);
  transition:transform .42s cubic-bezier(.22,.8,.28,1),opacity .3s;
}
.landing.borte{transform:translateY(110%);opacity:0;pointer-events:none}
.landing.drar{transition:none}
.landing-grep{display:none;flex:none;padding:10px 0 4px;cursor:grab;touch-action:none}
.landing-grep:active{cursor:grabbing}
.landing-rull{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* filterboksen og skiven hører til kartet, ikke forsiden */
body.landing-apen .panel{display:none}
body.landing-apen .skive,body.landing-apen .kartkreditt{opacity:0;pointer-events:none}

.glodstikk{
  margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--glod);
}

/* ---------- bildet øverst ----------
   De ti største anleggene i din del av verden, ett om gangen. */
.helt{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(940px,100vh);padding:104px 0 26px;overflow:hidden;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 12px),
    radial-gradient(120% 95% at 72% 6%,#143552 0%,var(--natt) 68%);
}
.helt-bilde{
  position:absolute;inset:0;background-position:center;background-size:cover;
}
.helt-slor{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,16,26,.62) 0%,rgba(6,16,26,.14) 38%,rgba(6,16,26,.95) 100%);
}
:root[data-tema="lys"] .helt-slor{
  background:linear-gradient(180deg,rgba(244,246,248,.55) 0%,rgba(244,246,248,.26) 34%,var(--sidebunn) 100%);
}
.helt-kreditt{position:absolute;left:28px;bottom:12px}
.helt-kreditt .bildeinfo-tekst{left:0;right:auto}
.helt-inni{
  position:relative;max-width:1180px;width:100%;margin:0 auto;padding:0 28px;
  display:flex;flex-direction:column;gap:24px;
}
.helt-topp{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.helt-ord{max-width:640px}
.helt-ord h1{
  margin:12px 0 0;font:800 clamp(36px,6.2vw,80px)/.98 var(--disp);
  letter-spacing:-.035em;text-wrap:balance;
}
.helt-ingress{margin:18px 0 0;font-size:16.5px;line-height:1.55;color:var(--dis);max-width:46ch;text-wrap:pretty}
.helt-info{
  flex:none;width:340px;min-width:340px;max-width:340px;height:278px;
  padding:14px 0 14px 22px;border-left:1px solid var(--kant-sterk);
  display:flex;flex-direction:column;justify-content:flex-start;
}
.helt-info h2{margin:8px 0 0;font:800 26px/1.05 var(--disp);letter-spacing:-.02em;min-height:54px}
.helt-info .sted{margin:4px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dis);min-height:16px}
.helt-info .notat{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--dis);max-width:34ch;text-wrap:pretty;min-height:42px;max-height:42px;overflow:hidden}
.helt-tall{display:flex;gap:22px;margin:16px 0 0;font-family:var(--mono);font-size:14px;min-height:42px}
.helt-tall i{font-style:normal;color:var(--dis);font-size:10px;display:block;letter-spacing:.1em;text-transform:uppercase}
.helt-info .gaa{
  margin-top:auto;align-self:flex-start;padding:10px 18px;border-radius:11px;
  background:var(--glod);color:var(--pa-tekst);font-size:13px;font-weight:600;
  transition:filter .16s;
}
.helt-info .gaa:hover{filter:brightness(1.08)}
.helt-prikker{display:flex;gap:6px;margin:18px 0 0}
.helt-prikker button{width:7px;height:7px;border-radius:999px;background:var(--spor);padding:0;transition:all .25s}
.helt-prikker button.på{width:22px;background:var(--glod)}

/* ---------- finn-boksen ---------- */
.finn{
  background:var(--flate);border:1px solid var(--kant);border-radius:22px;
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:var(--skygge);overflow:hidden;
}
.finn-sok{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid var(--kant)}
.finn-sok > svg{width:19px;height:19px;color:var(--dis);flex:none}
.finn-sok input{
  flex:1;min-width:0;background:none;border:0;color:var(--sno);
  font:500 17px/1.2 var(--brod);padding:6px 0;
}
.finn-sok input::placeholder{color:var(--dis)}
.finn-sok input:focus{outline:none}
.finn-null{
  flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--kant);
  background:var(--hev);color:var(--dis);font:500 12px var(--brod);transition:all .16s;
}
.finn-null:hover{color:var(--sno);border-color:var(--kant-sterk)}
.finn-rad{display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--kant)}
.finn-rad > .stikk{width:74px;flex:none;margin:0}
.finn-valg{align-items:flex-end;flex-wrap:wrap;gap:16px}
.finn-valg .skyv{flex:1 1 190px;min-width:160px}
.finn-bunn{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;flex-wrap:wrap}
.finn-bunn p{margin:0;font-size:13px;color:var(--dis);max-width:62ch}
.finn-bunn p b{color:var(--sno);font-family:var(--mono);font-size:15px}
.finn-tomt{
  margin:0;padding:16px 20px;border-top:1px solid var(--kant);
  font-size:13.5px;color:var(--dis);
}
.finn-tomt button{color:var(--glod);text-decoration:underline;text-underline-offset:3px;font:inherit}

/* knappen til kloden: sidens viktigste */
.tilkart{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;border-radius:12px;
  background:var(--glod);color:var(--pa-tekst);
  font-size:14.5px;font-weight:600;letter-spacing:.01em;
  transition:filter .16s,transform .16s;
}
.tilkart:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tilkart svg{width:18px;height:18px;flex:none}

/* ---------- treffene: én rad du drar sidelengs ---------- */
.landing-treff{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  height:270px;min-height:270px;padding:2px 0 10px;scrollbar-gutter:stable;
}
.landing-treff::-webkit-scrollbar{height:6px}
.landing-treff::-webkit-scrollbar-thumb{background:var(--spor);border-radius:3px}
.landingkort{
  scroll-snap-align:start;flex:none;width:186px;height:252px;text-align:left;padding:10px;
  border:1px solid var(--kant);border-radius:13px;overflow:hidden;
  background:var(--dyp);display:flex;flex-direction:column;transition:border-color .16s,transform .16s;
}
.landingkort:hover{border-color:var(--glod);transform:translateY(-2px)}
.landingkort img{width:100%;height:116px;flex:none;object-fit:cover;object-position:center;display:block;background:var(--felt);border-radius:9px}
.landingkort .under{display:flex;flex:1;min-height:0;flex-direction:column;padding:10px 2px 2px}
.landingkort h3{margin:0;font:600 13.5px/1.25 var(--brod);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.landingkort .sted{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dis);margin:3px 0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.landingkort .fakta{display:flex;gap:11px;font-family:var(--mono);font-size:11px;margin:0}
.landingkort .fakta i{font-style:normal;color:var(--dis)}
.landingkort .stolpe{margin-top:auto}

/* ---------- samlingene ---------- */
.samling-topp{max-width:1180px;margin:0 auto;padding:64px 28px 0}
.samling-topp h2{margin:10px 0 0;font:800 clamp(26px,3.4vw,38px)/1.05 var(--disp);letter-spacing:-.025em}
.samling-topp .ingress{margin:10px 0 0;font-size:15px;color:var(--dis);max-width:56ch;text-wrap:pretty}
.hjemvalg{display:flex;align-items:center;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.hjemvalg .stripe{flex-wrap:wrap;overflow:visible}
.samling{max-width:1180px;margin:0 auto;padding:26px 28px 0}
.samling-hode{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding-bottom:12px;border-bottom:1px solid var(--kant);
}
.samling-hode h3{margin:0;font:700 21px/1.2 var(--disp);letter-spacing:-.015em}
.samling-hode p{margin:4px 0 0;font-size:13px;color:var(--dis)}
.samling-bruk{
  flex:none;padding:9px 15px;border-radius:999px;border:1px solid var(--kant);
  background:var(--hev);font:500 12.5px var(--brod);transition:all .16s;
}
.samling-bruk:hover{border-color:var(--glod);color:var(--glod)}
.samling-rad{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 0 8px}
.samling-rad::-webkit-scrollbar{height:6px}
.samling-rad::-webkit-scrollbar-thumb{background:var(--spor);border-radius:3px}
.samlingkort{
  scroll-snap-align:start;flex:none;width:236px;height:352px;text-align:left;padding:12px;
  border:1px solid var(--kant);border-radius:15px;overflow:hidden;
  background:var(--dyp);display:flex;flex-direction:column;transition:border-color .16s,transform .16s;
}
.samlingkort:hover{border-color:var(--glod);transform:translateY(-3px)}
.samlingkort img{width:100%;height:177px;flex:none;object-fit:cover;object-position:center;display:block;background:var(--felt);border-radius:10px}
.samlingkort .under{display:flex;flex:1;min-height:0;flex-direction:column;padding:12px 2px 2px}
.samlingkort .napp{margin:0 0 6px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dis)}
.samlingkort h4{margin:0;font:600 15px/1.2 var(--brod);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.samlingkort .sted{margin:4px 0 9px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dis);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.samlingkort .notat{margin:0;font-size:12.5px;line-height:1.45;color:var(--dis);text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.samlingkort .fakta{margin:auto 0 0;display:flex;gap:14px;font-family:var(--mono);font-size:11.5px}
.samlingkort .fakta i{font-style:normal;color:var(--dis)}

/* ---------- tallene ---------- */
.stat-bolk{max-width:1180px;margin:56px auto 0;padding:0 28px}
.stat{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:var(--kant);border:1px solid var(--kant);border-radius:18px;overflow:hidden;
}
.stat > div{background:var(--dyp);padding:22px 20px}
.stat b{display:block;font:400 28px/1.1 var(--mono);color:var(--sno)}
.stat span{display:block;margin-top:4px;font-size:12.5px;color:var(--dis)}

.landing-bunn{
  max-width:1180px;margin:0 auto;padding:56px 28px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.apneglobus{
  display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;
  background:var(--glod);border:1px solid var(--glod);color:var(--pa-tekst);
  font:600 14px var(--brod);transition:filter .16s,transform .16s;
}
.apneglobus:hover{filter:brightness(1.08);transform:translateY(-1px);color:var(--pa-tekst)}
.apneglobus svg{width:18px;height:18px}

@media (max-width:900px){
  .helt{min-height:auto;padding:92px 0 22px}
  .helt-topp{flex-direction:column;align-items:stretch;gap:22px}
  .helt-info{border-left:0;border-top:1px solid var(--kant-sterk);padding:16px 0 0;max-width:none;min-width:0;width:100%;height:260px}
  .finn-rad{align-items:flex-start;flex-direction:column;gap:8px}
  .finn-rad.finn-valg{flex-direction:row;align-items:flex-end}
  .finn-rad > .stikk{width:auto}
}
@media (max-width:720px){
  /* på mobil er den et ark du kan dra i, med kartet så vidt synlig over */
  .landing{
    top:52px;border-radius:20px 20px 0 0;border-top:1px solid var(--kant);
    box-shadow:0 -18px 50px rgba(0,0,0,.35);
  }
  .landing-grep{display:flex}
  .helt{padding:18px 0 20px}
  .helt-inni,.samling,.samling-topp,.stat-bolk,.landing-bunn{padding-left:16px;padding-right:16px}
  .helt-kreditt{left:16px}
  .samling-topp{padding-top:46px}
  .finn-sok,.finn-rad,.finn-bunn{padding-left:15px;padding-right:15px}
  .finn-bunn .tilkart{width:100%}
  .landingkort,.kort{width:170px;height:242px}
  .landingkort img,.kort img{height:106px}
  .samlingkort{width:210px;height:330px}
  .samlingkort img{height:158px}
}


.innhold{position:relative;z-index:16;background:var(--sidebunn);border-top:1px solid var(--kant);
  content-visibility:auto;contain-intrinsic-size:1px 2400px}
.innhold-inni{max-width:840px;margin:0 auto;padding:78px 22px 30px}
.innhold h1{font:800 clamp(28px,5vw,44px)/1.05 var(--disp);letter-spacing:-.025em;margin:0 0 16px}
.innhold h2{font:800 clamp(19px,3vw,25px)/1.15 var(--disp);letter-spacing:-.01em;margin:46px 0 10px}
.innhold h3{font:600 15px/1.3 var(--brod);margin:20px 0 6px}
.innhold p{margin:0 0 13px;color:var(--dis);max-width:68ch}
.innhold .ingress{font-size:17px;color:var(--sno);max-width:60ch}
.innhold a{color:var(--glod)}
.land-bolk{margin:0 0 18px}
.land-bolk h3{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.land-bolk h3 span{font-family:var(--mono);font-size:11px;color:var(--dis)}
.anleggsnavn{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.anleggsnavn a{
  display:inline-block;font-size:13px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--kant);background:var(--hev);color:var(--sno);
  text-decoration:none;transition:all .15s;
}
.anleggsnavn a:hover{border-color:var(--glod);color:var(--glod)}
.bunn{border-top:1px solid var(--kant)}
.bunn-inni{max-width:840px;margin:0 auto;padding:26px 22px 40px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;font-size:12px;color:var(--dis)}
.bunn-inni p{margin:0;max-width:52ch}


/* ---------- egen nedtrekksboks ----------
   Nettleserne tegner sine egne datofelt og nedtrekkslister ulikt, og lar seg
   ikke overtale. Denne er bygget fra bunnen, så den ser lik ut overalt og
   alltid åpner nedover. */
.velger{position:relative;margin-top:4px}
.velger-knapp{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;height:40px;padding:0 10px;border-radius:9px;
  background:var(--dyp);border:1px solid var(--kant-sterk);
  color:var(--sno);font:500 14px var(--brod);text-align:left;
}
.velger-knapp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.velger-knapp svg{width:14px;height:14px;flex:none;color:var(--dis);transition:transform .18s}
.velger-knapp[aria-expanded="true"]{border-color:var(--glod)}
.velger-knapp[aria-expanded="true"] svg{transform:rotate(180deg)}
.velger-liste{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:6;
  margin:0;padding:4px;list-style:none;max-height:230px;overflow-y:auto;
  background:var(--dyp);border:1px solid var(--kant-sterk);border-radius:10px;
  box-shadow:var(--skygge);
}
.velger-liste[hidden]{display:none}
.velger-liste li{
  padding:8px 10px;border-radius:7px;font-size:13.5px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.velger-liste li:hover{background:var(--felt)}
.velger-liste li.på{background:var(--glod);color:var(--pa-tekst);font-weight:600}

/* ---------- sammenleggbare bolker nede på siden ---------- */
.innhold details{border-top:1px solid var(--kant)}
.innhold details:last-of-type{border-bottom:1px solid var(--kant)}
.innhold summary{
  cursor:pointer;list-style:none;padding:16px 0;display:flex;
  align-items:center;justify-content:space-between;gap:14px;
  font:800 clamp(16px,2.4vw,19px)/1.25 var(--disp);letter-spacing:-.01em;
}
.innhold summary::-webkit-details-marker{display:none}
.innhold summary::after{
  content:"";flex:none;width:9px;height:9px;margin-right:4px;
  border-right:2px solid var(--dis);border-bottom:2px solid var(--dis);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s;
}
.innhold details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.innhold summary:hover{color:var(--glod)}
.innhold details > *:not(summary){margin-bottom:14px}
.innhold details > *:last-child{margin-bottom:20px}


@media (max-width:720px){
  .meny{top:auto;bottom:0;left:0;transform:none;width:100vw;max-width:none;max-height:86vh;
    border-radius:20px 20px 0 0;padding:20px 18px 24px}
  .meny.borte{transform:translateY(24px)}
}

/* ---------- melding og laster ---------- */
.kartkreditt{
  position:fixed;right:10px;bottom:8px;z-index:14;margin:0;
  font-size:9px;letter-spacing:.02em;color:var(--dis);opacity:.55;pointer-events:auto;
}
.kartkreditt a{color:inherit;text-decoration:none}
.kartkreditt a:hover{text-decoration:underline}
.laster{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--natt);transition:opacity .5s}
.laster.borte{opacity:0;pointer-events:none}
.laster b{
  font-family:var(--disp);font-weight:800;font-size:clamp(22px,6vw,30px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--sno);
  animation:puste 1.9s ease-in-out infinite;
}
.laster b i{font-style:normal;color:var(--glod)}
@keyframes puste{0%,100%{opacity:.45}50%{opacity:1}}
.laster p{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dis);text-align:center;padding:0 24px}

@media (max-width:720px){
  .topp{padding:12px;gap:6px}
  .telling .lang{display:none}
  .merke b{font-size:16px;letter-spacing:.1em}
  .knapp > span:not(.teller){display:none}   /* teksten skjules, tallet blir stående */
  .knapp{padding:9px}
  .panel{bottom:66px;width:calc(100vw - 32px);max-height:calc(100vh - 82px);border-radius:18px}
  .rader{max-height:38vh;overflow-y:auto}
  .panel .sok,.panel .rad,.panel .treffrad{padding-left:15px;padding-right:15px}
  .panel .strimmel{padding-left:15px;padding-right:15px}
  .detalj.borte{transform:translateY(20px)}
  .anleggskort{padding:16px}
  .skive{bottom:66px}
  .loypekontroll{top:64px;left:12px;width:calc(100vw - 24px);padding:12px}
    .innhold-inni{padding:26px 18px 26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* Server-rendered resort information shown while the interactive map starts. */
.laster-innhold{display:flex;flex-direction:column;align-items:center;gap:18px;width:min(640px,calc(100vw - 40px));padding:24px;text-align:center}
.laster-innhold > b{display:block}
.forhandsvisning{max-width:620px}
.forhandsvisning h1{margin:0;font:800 clamp(24px,5vw,42px)/1.05 var(--disp);letter-spacing:-.02em;color:var(--sno)}
.forhandsvisning .sted{margin:7px 0 0;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glod)}
.forhandsvisning .fakta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:16px 0 0;font:500 12px/1.4 var(--mono);color:var(--dis)}
.forhandsvisning .fakta strong{color:var(--sno);font-weight:600}
.forhandsvisning .korttekst{max-width:56ch;margin:14px auto 0;color:var(--dis);font-size:14px}