/* Funktioner med tre perspektiv och bakgrund av produktfångster. Tillägg ovanpå v4:s site.css. 2026-10-25.
   Sök och navigering omgjorda 2026-10-26: sökpanel under fältet, ett perspektivval i en sticky banner med återvägar.
   Samma kväll: vanliga sökningar i en förslagsyta vid fokus, perspektivvalet centrerat, förklaringen i en utfällning. */

/* Bakgrund: produktfångster som växlar långsamt med övertoning och driver lika långsamt som på startsidan.
   Driften går i en lugn slinga fram och tillbaka, så att den fortsätter även när en områdesbild står stilla.
   Mörkblå ton över så att text, sökning och navigation bär. v4:s .bakgrund-regler i site.css gäller i grunden. */
.bakgrund img{transition:opacity 2.4s ease;transform:scale(1.08);filter:blur(2px) saturate(.85)}
/* Vandring i stället för ren zoom: bilden glider åt olika håll med en antydan till zoom, i en slinga fram och
   tillbaka. Fyra riktningar som fördelas på bilderna i tur och ordning, så att två bilder i rad rör sig olika. */
.bakgrund img.aktiv{animation:drift-a 16s ease-in-out infinite alternate}
.bakgrund img:nth-child(4n+2).aktiv{animation-name:drift-b}
.bakgrund img:nth-child(4n+3).aktiv{animation-name:drift-c}
.bakgrund img:nth-child(4n+4).aktiv{animation-name:drift-d}
@keyframes drift-a{from{transform:scale(1.07) translate(-1.6%,1%)}to{transform:scale(1.1) translate(1.6%,-1%)}}
@keyframes drift-b{from{transform:scale(1.1) translate(1.4%,1.2%)}to{transform:scale(1.07) translate(-1.4%,-1.2%)}}
@keyframes drift-c{from{transform:scale(1.07) translate(0.4%,-1.6%)}to{transform:scale(1.1) translate(-1%,1.6%)}}
@keyframes drift-d{from{transform:scale(1.1) translate(-1.2%,-1.4%)}to{transform:scale(1.07) translate(1.6%,0.8%)}}
.bakgrund::after{background:linear-gradient(180deg,#1b2537e3 0%,#1b2537d9 30%,#1b2537e6 70%,#1b2537f2 100%)}
.med-bakgrund .hero-text,.med-bakgrund .p-huvud,.med-bakgrund .omr-huvud,.med-bakgrund .ingress-omr,.med-bakgrund .etikett,.med-bakgrund .granser,.med-bakgrund .avslut{text-shadow:0 1px 2px #1b2537,0 0 18px #1b2537cc}
.med-bakgrund .skissrad{background:#141c2bf2}
.med-bakgrund .fot{position:relative}
.med-bakgrund .sok input{box-shadow:0 20px 60px -20px #000000b0}
.med-bakgrund .gkort,.med-bakgrund .flode,.med-bakgrund .fm{background:#1b253799;backdrop-filter:blur(6px)}
.med-bakgrund .gkort:hover{background:#2b3c5a99}
.med-bakgrund .fm[open]{background:#2b3c5a99}
@media(prefers-reduced-motion:reduce){.bakgrund img,.bakgrund img.aktiv{transition:none;animation:none;transform:none}}
:root{--stang-h:84px}
html{scroll-padding-top:var(--stang-h)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skissrad a{color:var(--gold);text-decoration:underline dotted;text-underline-offset:3px}

/* Sökområdet: fält, förslagsytan och panelen med träffar. Båda ytorna ligger över sidan under fältet. */
.sokyta{position:relative;width:min(760px,100%);margin:40px auto 0}
.sok{position:relative;width:min(680px,100%);margin:0 auto}
.sok input{width:100%;font:500 19px var(--sans);padding:18px 56px 18px 24px;border-radius:999px;border:0;background:#fff;color:var(--navy);box-shadow:0 20px 60px -20px #00000080}
.sok input::placeholder{color:#7a8597}
.sok .rensa{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:#eef1f6;color:var(--navy);font-size:22px;cursor:pointer}
/* Förslagsytan: vanliga sökningar, visas när fältet har fokus och är tomt */
.sokforslag{position:absolute;left:50%;transform:translateX(-50%);width:min(680px,100%);top:calc(100% + 10px);z-index:6;text-align:left;text-shadow:none;border-radius:18px;background:#1b2537f7;border:1px solid #ffffff22;box-shadow:0 24px 60px -20px #000000d0;backdrop-filter:blur(14px);padding:12px 16px 14px}
.sokforslag[hidden]{display:none}
.sokforslag-rubrik{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.sokforslag-chips{display:flex;flex-wrap:wrap;gap:6px}
.sokforslag .chip{padding:6px 11px}
.chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.chip{font:inherit;font-size:14px;padding:6px 13px;border-radius:999px;border:0;background:#ffffff12;color:var(--soft);cursor:pointer}
.chip:hover{background:#ffffff22;color:#fff}
.chip[aria-pressed=true]{background:var(--gold);color:var(--navy);font-weight:600}

/* Panelen med träffar: lugn, täckande yta med tydlig hierarki: område, funktion, stödtext */
.resultat{position:absolute;left:0;right:0;top:calc(100% + 14px);z-index:6;display:flex;flex-direction:column;text-align:left;text-shadow:none;border-radius:20px;background:#1b2537f7;border:1px solid #ffffff22;box-shadow:0 30px 80px -20px #000000d0;backdrop-filter:blur(14px);overflow:hidden}
.resultat[hidden]{display:none}
.resultat:focus{outline:0}
.res-huvud{padding:18px 22px 10px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.res-huvud h2{font-size:18px;margin:0;color:#fff;letter-spacing:-.01em}
.res-huvud h2:focus{outline:0}
.res-pers{margin:0;font-size:13px;color:var(--dim)}
.res-pers b{color:var(--soft);font-weight:600}
.res-lista{overflow:auto;overscroll-behavior:contain;padding:0 12px 10px;min-height:0;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.resultat.rullbar:not(.vid-slutet) .res-lista{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 36px),transparent)}
.res-grupp h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:12px 10px 4px;display:flex;align-items:baseline;gap:8px}
.res-grupp h3 span{color:var(--dim);font-weight:600;letter-spacing:0}
.res-grupp ul{list-style:none;padding:0;margin:0}
.res-grupp li a{display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:10px;color:#fff;transition:background .12s}
.res-grupp li a:hover{background:#ffffff14}
.res-grupp li a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;background:#ffffff14}
.res-grupp .namn{font-size:16px;line-height:1.35}
.res-grupp .stod{font-size:13px;line-height:1.4;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-grupp li a:hover .stod,.res-grupp li a:focus-visible .stod{color:var(--soft)}
.res-fot{margin:0;padding:10px 22px;border-top:1px solid #ffffff14;font-size:12px;color:var(--dim);display:flex;justify-content:space-between;gap:16px}
.res-fot .mer{display:none;color:var(--gold);font-weight:600}
.resultat.rullbar:not(.vid-slutet) .res-fot .mer{display:inline}
.resultat .inget{margin:6px 10px 0;color:var(--soft);font-size:15px;line-height:1.55}
.resultat .inget.mikro{font-size:14px;color:var(--dim);margin-top:14px;margin-bottom:8px}
.resultat .inget a,.resultat .utanfor a{color:var(--gold)}
.inget-chips{margin:12px 10px 0;display:flex;flex-wrap:wrap;gap:8px}
.resultat .utanfor{margin:14px 10px 6px;padding:12px 14px;border-radius:12px;background:#ffffff0d;color:var(--soft);font-size:14px;line-height:1.5}
.resultat .utanfor b{color:#fff}

/* Bannern: ett perspektivval och återvägar. Fastnar vid sidans överkant. Perspektivets förklaring visas i en
   utfällning under den aktuella knappen, så att de andra valen syns hela tiden. */
.stang-vakt{height:1px;margin-top:-1px}
.stang{position:sticky;top:0;z-index:4;background:#1b2537f0;backdrop-filter:blur(10px);border-bottom:1px solid #ffffff14;margin-top:56px}
.stang-rad{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;min-height:64px;padding:8px 0}
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:#ffffff0f;justify-self:center;grid-column:2}
.kontext.vanster{grid-column:1;grid-row:1}
.kontext.hoger{grid-column:3;grid-row:1}
.seg-knapp{font:inherit;font-size:14px;padding:8px 18px;border-radius:999px;border:0;background:transparent;color:var(--soft);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.seg-knapp:hover{color:#fff;background:#ffffff14}
.seg-knapp[aria-pressed=true]{background:var(--gold);color:var(--navy);font-weight:600}
.seg-knapp .kort{display:none}
.kontext{display:flex;align-items:center;gap:12px;font-size:13.5px;min-width:0}
.kontext .kort{display:none}
.kontext[hidden]{display:none}
.kontext.hoger{justify-content:flex-end}
.knapp-tillbaka,.knapp-traffar{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:#ffffff12;color:#fff;font-weight:600;white-space:nowrap;transition:background .12s}
.knapp-tillbaka:hover,.knapp-traffar:hover{background:#ffffff22}
.knapp-tillbaka .pil{color:var(--gold)}
.knapp-traffar{box-shadow:inset 0 0 0 1px #d7a13b66}
.knapp-traffar span{color:var(--gold)}
.har{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.har .etik{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700}
.har b{color:#fff;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.utfall{position:absolute;z-index:5;width:min(340px,calc(100vw - 32px));padding:12px 16px 13px;border-radius:14px;background:#24324bfa;border:1px solid #ffffff26;box-shadow:0 18px 48px -16px #000000d0;text-align:left;pointer-events:none}
.utfall[hidden]{display:none}
.utfall::before{content:"";position:absolute;top:-6px;left:var(--pil,50%);width:10px;height:10px;margin-left:-5px;background:#24324b;border-left:1px solid #ffffff26;border-top:1px solid #ffffff26;transform:rotate(45deg)}
.hjalp{margin:0;font-size:14px;color:#fff;line-height:1.5}
.under{margin:6px 0 0;font-size:13px;color:var(--soft);line-height:1.5}

/* Översikt per perspektiv */
/* Perspektivets rubrikblock: börjar i linje med flödesrutorna under och är lika brett som de två tillsammans,
   så att rubriken ryms på en rad och ingressen blir kort. Lika mycket luft ovanför som under (26 okt). */
.p-huvud{max-width:none}
.p-huvud .ingress,.p-huvud .rubrik{max-width:none}
.p-huvud .rubrik{text-wrap:balance}
.oversikt{padding:48px 0 80px}
.vem{font-size:15px;color:var(--dim);margin:16px 0 0}
.vem b{color:var(--soft);font-weight:600}
.floden{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
.flode{background:#ffffff0a;border-radius:18px;padding:26px 28px}
.flode h3{font-size:18px;margin:0 0 14px;color:#fff}
.flode ol{margin:0;padding:0;list-style:none;counter-reset:steg}
.flode li{position:relative;padding:7px 0 7px 36px;counter-increment:steg;color:var(--soft);font-size:15px;line-height:1.5}
.flode li::before{content:counter(steg,decimal-leading-zero);position:absolute;left:0;top:8px;font-size:13px;font-weight:700;color:var(--gold);letter-spacing:.05em}
.flode li+li::after{content:"";position:absolute;left:9px;top:-10px;height:16px;border-left:2px dashed #d7a13b55}
.flode li a{color:inherit;text-decoration:underline dotted #ffffff44;text-underline-offset:4px}
.flode li a:hover{color:#fff}
.omr-etikett{margin-top:64px}
.gkort-lista{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gkort{display:flex;flex-direction:column;gap:6px;height:100%;padding:22px 24px 20px;border-radius:18px;background:#ffffff0d;transition:background .15s;position:relative}
.gkort:hover{background:#ffffff1a}
.gkort b{font-size:18px;color:#fff;line-height:1.25;padding-right:28px}
.gkort .rub{font-size:15px;color:var(--gold);font-weight:600;line-height:1.4}
.gkort .ex{font-size:13px;color:var(--dim);line-height:1.5;margin-top:4px}
.gkort .pil{position:absolute;right:20px;top:20px;color:var(--gold);font-size:18px}
.granser{margin-top:64px;max-width:760px}
.granser h3{font-size:18px;margin:0;color:#fff}
.granser .lista li{padding:8px 0 8px 28px;font-size:15px}
.granser .lista li b{color:#fff;font-weight:600}

/* Område som vy i sidan */
.grupp{padding:56px 0 80px}
.grupp .omrade{grid-template-columns:4fr 8fr}
.omr-huvud{position:sticky;top:calc(var(--stang-h) + 8px)}
.grupp h2{font-size:clamp(28px,2.8vw,38px)}
.nasta{margin:12px 0 0;font-size:14px;color:var(--dim);line-height:1.7}
.nasta a{color:var(--soft);text-decoration:underline dotted #ffffff55;text-underline-offset:4px}
.nasta a:hover{color:#fff}
.tillbaka{font-size:14px;font-weight:600;color:var(--soft)}
.tillbaka:hover{color:#fff}
.ingress-omr{font-size:18px;line-height:1.65;color:var(--soft);margin:0 0 28px}
.del{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:28px 0 10px}
.del:first-of-type{margin-top:0}
.lista-fm{display:flex;flex-direction:column;gap:6px}
.fm{border-radius:14px;background:#ffffff0a;transition:background .15s;scroll-margin-top:8px}
.fm[open]{background:#ffffff14}
.fm summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:13px 18px;font-size:16px;color:#fff;border-radius:14px}
.fm summary::-webkit-details-marker{display:none}
.fm summary::after{content:"+";margin-left:auto;color:var(--gold);font-size:20px;font-weight:300;width:20px;text-align:center;flex:none}
.fm[open] summary::after{content:"–"}
.fm .inner{padding:0 18px 18px 18px}
.fm .vad{margin:0;color:var(--text);font-size:16px;line-height:1.6}
.fm .nytta{margin:10px 0 0;color:var(--gold);font-size:16px;font-weight:600}
.fm .hor{margin:14px 0 0;font-size:14px;color:var(--dim)}
.fm .hor a{color:var(--soft);text-decoration:underline dotted #ffffff55;text-underline-offset:4px}
.fm .hor a:hover{color:#fff}
.fm .meta{margin:14px 0 0;font-size:13px;color:var(--dim);display:flex;gap:18px;flex-wrap:wrap}
.fm .meta .lank{color:var(--soft);text-decoration:underline dotted #ffffff55;text-underline-offset:4px}
.fm .meta .lank.kopierad::after{content:" (" attr(data-kopierad) ")";color:var(--gold)}
.fm .plats{opacity:.8}
.fm.mal{box-shadow:0 0 0 2px var(--gold)}
.grannar{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-top:56px;padding-top:28px;border-top:1px solid #ffffff14}
.granne{display:flex;flex-direction:column;gap:2px;color:#fff;font-weight:600;font-size:16px}
.granne small{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.granne.hoger{text-align:right;align-items:flex-end}
.granne:hover{color:var(--goldhover)}
.tillbaka.mitten{padding:9px 18px;border-radius:999px;background:#ffffff12;color:#fff}
.tillbaka.mitten:hover{background:#ffffff22}

/* Produktutsnitt i fördjupningen (bara i skissen): skarpt, läsbart, i en diskret inramning, går att förstora */
.utsnitt{margin:16px 0 0;padding:10px;border-radius:12px;background:#0f1522;border:1px solid #ffffff1a;text-shadow:none}
.utsnitt-bild{display:block;position:relative;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:8px;overflow:hidden;font:inherit}
.utsnitt-bild img{width:100%;height:auto;display:block;border-radius:8px}
.utsnitt-bild .lupp{position:absolute;right:8px;bottom:8px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:#1b2537e6;color:#fff}
.utsnitt-bild:hover .lupp{background:var(--gold);color:var(--navy)}
.utsnitt figcaption{margin:10px 4px 2px;font-size:13px;line-height:1.5;color:var(--soft)}
.utsnitt figcaption b{color:#fff}
.utsnitt .demo{color:var(--dim)}
dialog.forstoring{border:0;padding:0;margin:auto;background:#0f1522;color:var(--text);border-radius:16px;max-width:min(96vw,1400px);box-shadow:0 40px 100px -20px #000}
dialog.forstoring::backdrop{background:#050912a6;backdrop-filter:blur(4px)}
dialog.forstoring img{display:block;max-width:min(96vw,1400px);max-height:80vh;width:auto;height:auto;border-radius:16px 16px 0 0}
dialog.forstoring .bildtext{margin:0;padding:12px 60px 16px 18px;font-size:14px;line-height:1.5;color:var(--soft)}
.stang-bild{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:#1b2537e6;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.stang-bild:hover{background:var(--gold);color:var(--navy)}

@media(max-width:1080px){
  .stang-rad{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;min-height:0;padding:10px 0}
  .seg{order:0}
  .kontext.vanster{order:1;flex:1 1 auto}
  .kontext.hoger{order:2;flex:0 0 auto}
  .stang.i-omrade .seg{flex:1 0 100%;justify-content:center}
  .floden,.gkort-lista{grid-template-columns:1fr 1fr}
  .grupp .omrade{grid-template-columns:1fr;gap:24px}
  .omr-huvud{position:static}
}
@media(max-width:700px){
  .sokyta{margin-top:32px}
  .sok input{font-size:16px;padding:16px 50px 16px 18px}
  .resultat{top:calc(100% + 10px);border-radius:16px}
  .res-huvud{padding:14px 16px 8px}
  .res-huvud h2{font-size:16px}
  .res-lista{padding:0 6px 8px}
  .res-grupp .namn{font-size:15px}
  .res-grupp li a{padding:9px 10px}
  .res-fot{padding:8px 16px}
  .res-fot .tangenter{display:none}
  .stang{margin-top:40px}
  .stang-rad{gap:8px 10px}
  .seg{width:100%;justify-content:stretch}
  .seg-knapp{flex:1;padding:9px 6px;font-size:14px}
  .seg-knapp .lang{display:none}
  .seg-knapp .kort{display:inline}
  .stang.i-omrade .stang-rad{gap:8px}
  .kontext{font-size:13px;gap:10px}
  .kontext.vanster{flex:1 1 0;min-width:0}
  .kontext.hoger{flex:0 0 auto}
  .kontext .lang{display:none}
  .kontext .kort{display:inline}
  .knapp-tillbaka,.knapp-traffar{padding:7px 11px;gap:6px}
  .har .etik{display:none}
  .har b{-webkit-line-clamp:1;font-size:13px}
  .hjalp{font-size:13.5px}
  .oversikt{padding:40px 0 56px}
  .floden{margin-top:40px}
  .floden,.gkort-lista{grid-template-columns:1fr}
  .flode{padding:20px}
  .omr-etikett{margin-top:48px}
  .gkort{padding:18px 20px 16px}
  .grupp{padding:32px 0 56px}
  .grannar{grid-template-columns:1fr;gap:16px;text-align:left}
  .granne.hoger{align-items:flex-start;text-align:left}
  .tillbaka.mitten{justify-self:start}
  .fm summary{padding:12px 14px;font-size:15px;align-items:flex-start}
  .fm .inner{padding:0 14px 16px 14px}
  .utsnitt{padding:6px}
  dialog.forstoring .bildtext{padding:10px 56px 14px 14px;font-size:13px}
}