/* Hjemmesiden barneklokka.no. Samme palett og fonter som appen: grønn #A3E1B0, rosa #E1A3B0,
   blå #A3B0E1, sand #E1D4A3, mørk blå #758AD6, tekst #5b6380 / svart. Dosis til alt, Architects
   Daughter bare på navnet (fonten mangler å). */

:root {
    --gronn: #A3E1B0; --rosa: #E1A3B0; --blaa: #A3B0E1; --sand: #E1D4A3; --morkblaa: #758AD6;
    --tekst: #1b1f2a; --dempet: #5b6380; --lysblaa: #ccd4ee;
    --skygge: 0 4px 8px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; color: var(--tekst); font-family: 'Dosis', sans-serif; font-size: 18px; line-height: 1.5;
    background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%) fixed;
}
a { color: var(--dempet); }
a:hover { color: black; }

/* Markert tekst i palettens grønn med svart tekst, som i appen (style.css) - 2026-09-13.
   To separate regler: kjenner en nettleser ikke den ene, forkastes ellers begge. */
::selection { background: var(--gronn); color: black; }
::-moz-selection { background: var(--gronn); color: black; }
h1, h2, h3, h4 { font-family: 'Dosis', sans-serif; font-weight: 700; line-height: 1.15; margin: 0 0 .4em 0; }
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.6vw, 38px); text-align: center; margin-bottom: .8em; }
h3 { font-size: 21px; }
p { margin: 0 0 1em 0; }
.ingress { font-size: 20px; color: var(--dempet); }
.sentrert { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.liten { font-size: 15px; color: var(--dempet); }
.overtittel { text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 14px; color: var(--dempet); margin-bottom: .6em; }

/* Knapper: sand som i appen, mørk blå tekst, grønn ved hover. */
.knapp {
    display: inline-block; padding: 10px 20px; border-radius: 10px; background: var(--sand); color: var(--morkblaa);
    font-weight: 700; text-transform: uppercase; letter-spacing: .5px; text-decoration: none; box-shadow: var(--skygge);
    white-space: nowrap;
}
.knapp:hover { background: var(--gronn); color: var(--morkblaa); }
.knapp.lys { background: var(--lysblaa); }
/* Samme hover som de andre knappene (2026-09-13): .knapp.lys er like spesifikk som .knapp:hover og
   står etter den, så uten denne ble «Logg inn» og «Se hvordan det ser ut» lyseblå også ved hover. */
.knapp.lys:hover { background: var(--gronn); }
.knapp.stor { padding: 14px 28px; font-size: 19px; }

/* Topp */
.topp {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    max-width: 1100px; margin: 0 auto; padding: 16px 24px;
}
.merke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: black; }
.merke img { height: 44px; }
.merke span { font-family: 'Architects Daughter', cursive; font-size: 26px; letter-spacing: 2px; }
.topp nav { display: flex; align-items: center; gap: 22px; }
.topp nav a { text-decoration: none; font-weight: 600; }
.topp nav a.aktiv { color: black; border-bottom: 2px solid var(--morkblaa); }
.topp nav a.knapp { padding: 8px 16px; }
.menyknapp { display: none; width: 44px; height: 40px; border: 0; border-radius: 10px; background: var(--sand); cursor: pointer; padding: 8px 10px; box-shadow: var(--skygge); }   /* skygge som de andre knappene (ønske 2026-09-13) */
.menyknapp span { display: block; height: 3px; margin: 4px 0; background: var(--morkblaa); border-radius: 2px; }

main { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.blokk { padding: 56px 0; }
.blokk.smal { max-width: 760px; margin: 0 auto; }

/* Helt (toppen av forsiden) */
.helt { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; padding: 40px 0 56px 0; }
/* Minikortet (2026-09-13, i stedet for bildet forside.svg): Idas kort slik klokka ville vist det akkurat nå,
   med svaret på overskriften i boblen. Samme kort som «Prøv selv» (.demo), bare mindre (.mini). Uten
   JavaScript (ingen .klar) vises kortet uten klokkeslett og svar. text-align: left fordi toppen er midtstilt
   på nettbrett og mobil, og tidene under stripen skal stå ut mot kantene. */
.helt-kort { width: 100%; max-width: 380px; justify-self: center; text-align: left; }
.helt-na { display: none; margin: 0 0 8px 0; text-align: center; font-weight: 700; font-size: 15px; color: var(--dempet); }
.helt-klokke { font-variant-numeric: tabular-nums; }
.helt-kort .helt-svar { display: none; }
.helt-kort.klar .helt-na { display: block; }
.helt-kort.klar .helt-svar { display: flex; }
.demo.mini { padding: 14px; }
.demo.mini, .demo.mini .demo-meter > span { transition: none; }
.demo.mini .demokort { cursor: default; padding-top: 10px; }
.demo.mini .demo-ikon { width: 36px; }
.demo.mini .demo-portrett { width: 68px; }
.demo.mini .demo-meter { height: 30px; padding: 7px; }
.demo.mini .demo-tider { font-size: 15px; }
.demo.mini .demo-boble { margin-top: 14px; padding: 8px 14px; font-size: 16px; }
.knapper { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 14px 0; }

/* Galleri «Slik ser det ut» (2026-09-13), etter slideren på den gamle hjemmesiden: ett skjermbilde om
   gangen, stort nok til å lese, med piler, prikker, piltaster og sveip. Blå ramme med rette hjørner
   som de andre boksene. Fast 4:3 så siden ikke hopper; kontrollpanelet (høyere enn bredt) får blå
   kant på sidene i stedet for å beskjæres. Uten JavaScript (ingen .klar) vises alle tre under hverandre. */
.galleri { margin: 0 auto; }   /* full bredde, som rutenettet i «Det klokka kan» (ønske 2026-09-13; var 860 px) */
.galleri-scene { position: relative; container-type: inline-size; touch-action: pan-y; }   /* vannrett sveip til skriptet, loddrett til siden */
.lysbilde { margin: 0 0 24px 0; background: var(--blaa); padding: 12px; box-shadow: var(--skygge); }
.lysbilde picture { display: block; }
.lysbilde img { display: block; width: 100%; height: auto; }
.lysbilde figcaption { padding: 12px 6px 2px 6px; font-size: 17px; text-align: center; }
.galleri.klar .lysbilde { margin: 0; }
.galleri.klar .lysbilde img { aspect-ratio: 4 / 3; object-fit: contain; }
.galleri.klar .lysbilde:not(.aktiv) { display: none; }
.galleri.klar .lysbilde.aktiv { animation: galleri-inn .6s ease; }
@keyframes galleri-inn { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .galleri.klar .lysbilde.aktiv { animation: none; } }

/* Pilene står midt på bildet (12 px ramme + halve 4:3-bildet), ikke midt på bilde + tekst. */
.galleri-pil {
    display: none; position: absolute; top: 40%; top: calc(12px + (100cqw - 24px) * .375); transform: translateY(-50%);
    width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--sand); color: var(--morkblaa);
    font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: var(--skygge);
    touch-action: manipulation;   /* ingen dobbelttrykk-zoom på iOS */
}
.galleri.klar .galleri-pil { display: flex; align-items: center; justify-content: center; }
.galleri-pil.forrige { left: -23px; }
.galleri-pil.neste { right: -23px; }
.galleri-pil:focus-visible, .prikk:focus-visible { outline: 3px solid var(--lysblaa); outline-offset: 2px; }

/* Prikkene som i den gamle slideren: grønne, den aktive i sand. Selve knappen er 32 px (lett å treffe
   med en finger), prikken som vises er 16 px. */
.galleri-prikker { display: none; justify-content: center; gap: 2px; margin-top: 12px; }
.galleri.klar .galleri-prikker { display: flex; }
.prikk { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.prikk::before { content: ""; display: block; width: 16px; height: 16px; margin: 8px; border-radius: 50%; background: var(--gronn); box-shadow: var(--skygge); }
.prikk.aktiv::before { background: var(--sand); }

/* Hover bare med mus: på iPad og mobil blir :hover hengende etter et trykk, og pila ville stått grønn. */
@media (hover: hover) {
    .galleri-pil:hover, .galleri-fullskjerm:hover, .fs-lukk:hover { background: var(--gronn); }
    .prikk:hover::before { background: var(--sand); }
}

/* Fullskjermknappen i hjørnet av bildet (2026-09-13), og bildet selv kan trykkes på. */
.galleri-fullskjerm {
    display: none; position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; padding: 0; border: 0;
    border-radius: 10px; background: var(--sand); color: var(--morkblaa); cursor: pointer; box-shadow: var(--skygge);
    touch-action: manipulation; align-items: center; justify-content: center;
}
.galleri.klar .galleri-fullskjerm { display: flex; }
.galleri.klar .lysbilde img { cursor: zoom-in; }
.galleri-fullskjerm:focus-visible, .fs-lukk:focus-visible { outline: 3px solid var(--lysblaa); outline-offset: 2px; }

/* PC med mus: pilene og fullskjermknappen vises bare når musa er over galleriet, eller når
   tastaturfokus står der. Usynlige, men fortsatt klikkbare og i fokusrekkefølgen. */
@media (hover: hover) and (pointer: fine) {
    .galleri.klar .galleri-pil, .galleri.klar .galleri-fullskjerm { opacity: 0; transition: opacity .2s ease; }
    .galleri.klar:hover .galleri-pil, .galleri.klar:hover .galleri-fullskjerm { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
    .galleri.klar:has(:focus-visible) .galleri-pil, .galleri.klar:has(:focus-visible) .galleri-fullskjerm { opacity: 1; }
}
/* Telefon og iPad (berøring): ingen piler i galleriet - man sveiper og bruker prikkene.
   Fullskjermknappen står, så det er lett å se at bildet kan forstørres. */
@media (hover: none), (pointer: coarse) {
    .galleri.klar .galleri-pil { display: none; }
}

/* Fullskjermvisningen. Pilene og lukkeknappen vises alltid her, også på mobil. Knipe-zoom er lov;
   sveip med én finger blar. Siden bak ruller ikke mens den er åpen. */
html.fullskjerm-aapen { overflow: hidden; }
.fullskjerm {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;
    display: flex; flex-direction: column; padding: 58px 12px 14px 12px;
    background: var(--blaa); touch-action: pinch-zoom; overscroll-behavior: contain;   /* blå som rammen i galleriet (2026-09-14, var nesten svart) */
}
.fullskjerm[hidden] { display: none; }
.fs-bilde { flex: 1; min-height: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: center; }
/* Bildet tar bare plassen det trenger (ikke 100 % med object-fit), så et trykk på den blå flaten ved
   siden av treffer bakgrunnen og lukker, i stedet for bildets tomme kant. */
.fs-bilde img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; box-shadow: var(--skygge); }
.fs-bilde figcaption { color: var(--tekst); text-align: center; font-size: 17px; padding: 12px 8px 0 8px; max-width: 900px; }
.fs-teller { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; color: var(--tekst); font-weight: 700; }
/* Den lyseblå fokusringen forsvinner mot den blå flaten - mørk blå her. */
.fullskjerm .galleri-pil:focus-visible, .fullskjerm .fs-lukk:focus-visible { outline-color: var(--morkblaa); }
.fs-lukk {
    position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--sand); color: var(--morkblaa); font-size: 20px; font-weight: 700; cursor: pointer;
    box-shadow: var(--skygge); touch-action: manipulation;
}
.fullskjerm .galleri-pil { display: flex; align-items: center; justify-content: center; top: 50%; }
.fullskjerm .galleri-pil.forrige { left: 12px; }
.fullskjerm .galleri-pil.neste { right: 12px; }

/* «Prøv selv» (2026-09-13): barnekortet fra appen, styrt av et klokkeslett. Verdiene er appens
   (style.css .bokskont1, index.css .meter/.red/#navnForBilde/#prosentTekst for ≥ 1025 px):
   flaten #a3e1b0 om dagen og #e1a3b0 om natta som html.dag/.natt, kortet palettens blå med rette
   hjørner, stripen 40 px med rosa kant og skrå striper som beveger seg. Uten JavaScript (ingen .klar)
   står kortet på 16:40 og glideren er skjult. */
.provselv { margin-top: 56px; }
.provselv h3 { text-align: center; font-size: clamp(24px, 3vw, 30px); }
.demo { padding: 24px; box-shadow: var(--skygge); background: #a3e1b0; transition: background-color .4s ease; }
.demo.natt { background: #e1a3b0; }
.demokort { background: var(--blaa); padding: 15px 0 3px 0; box-shadow: var(--skygge); }
.demo-topp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; }
.demo-ikon { display: block; width: clamp(34px, 5vw, 56px); height: auto; margin: 0 6px; }
.demo-ikon.hoyre { justify-self: end; }
/* Portrettet i stedet for navnet, som i appen (#portrett: rundt, med skygge). */
.demo-portrett { display: block; width: clamp(64px, 10vw, 104px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: var(--skygge); margin: 0 8px; }
.demo-meter { position: relative; height: 40px; padding: 10px; background: #e1a3b0; box-shadow: var(--skygge); margin-top: 6px; }
.demo-meter > span {
    display: block; height: 100%; position: relative; overflow: hidden;
    background-color: #A3E1B0; background-image: linear-gradient(to top, #A3E1B0, #B0E1A3);
    box-shadow: inset 0 2px 9px rgba(255,255,255,.3), inset 0 -2px 6px rgba(0,0,0,.4);
    transition: width .25s ease;
}
.demo.natt .demo-meter > span { background-color: #f0a3a3; background-image: linear-gradient(#f0a3a3, #f42323); }
.demo-meter > span::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 20px 8px 8px 20px;
    background-image: linear-gradient(-45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent);
    background-size: 50px 50px; animation: demo-striper 2s linear infinite;
}
@keyframes demo-striper { from { background-position: 0 0; } to { background-position: 50px 50px; } }
@media (prefers-reduced-motion: reduce) {
    .demo-meter > span::after { animation: none; }
    .demo-meter > span, .demo { transition: none; }
}
.demo-tider { display: grid; grid-template-columns: 1fr auto 1fr; padding: 5px 5px 0 5px; font-size: 20px; font-weight: 700; color: black; opacity: .75; }
.demo-tider .til { text-align: right; }

.demo-styring { margin-top: 20px; text-align: center; }
.demo-styring label { display: block; font-weight: 700; font-size: 20px; margin-bottom: 6px; }
.demo-styring output { font-variant-numeric: tabular-nums; }
/* Glideren i palettens farger (2026-09-13): sand som knappene, grønn ved hover, drag og tastaturfokus.
   Egen stil i stedet for nettleserens - den ga et nesten svart spor i Chrome. Fargen styres av --fyll,
   som pseudoelementene arver; --pst (hvor langt sporet er fylt) settes av skriptet. */
.demo-styring input[type="range"] {
    display: none; width: 100%; height: 32px; margin: 0; cursor: pointer; background: transparent;
    -webkit-appearance: none; appearance: none; --fyll: var(--sand); touch-action: manipulation;
}
.demo-styring input[type="range"]:hover, .demo-styring input[type="range"]:active,
.demo-styring input[type="range"]:focus-visible { --fyll: var(--gronn); }
.demo-styring input[type="range"]:focus { outline: none; }
.demo-styring input[type="range"]:focus-visible { outline: 3px solid var(--lysblaa); outline-offset: 4px; }
.demo-styring input[type="range"]::-webkit-slider-runnable-track {
    height: 10px; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0,0,0,.25);
    background: linear-gradient(to right, var(--fyll) 0, var(--fyll) var(--pst, 70%), rgba(255,255,255,.6) var(--pst, 70%), rgba(255,255,255,.6) 100%);
}
.demo-styring input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -9px; border-radius: 50%;
    background: var(--fyll); border: 3px solid #fff; box-shadow: var(--skygge);
}
.demo-styring input[type="range"]::-moz-range-track { height: 10px; border-radius: 5px; background: rgba(255,255,255,.6); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
.demo-styring input[type="range"]::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--fyll); }
.demo-styring input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--fyll); border: 3px solid #fff; box-shadow: var(--skygge); }
.demo-skala { display: none; justify-content: space-between; font-size: 14px; color: var(--dempet); padding: 0 4px; }
.provselv.klar .demo-styring input[type="range"] { display: block; }
.provselv.klar .demo-skala { display: flex; }
/* Det klokka sier, som snakkeboble med tupp opp mot kortet (2026-09-13). Lysblå (--lysblaa, var hvit):
   en lysere utgave av kortets blå, så boblen ser ut til å høre til kortet, og den skiller seg fra både
   den grønne og den rosa flaten. Den gule høyttalerknappen og den mørke teksten står tydelig på den. */
.demo-boble {
    position: relative; display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
    margin: 20px auto 0 auto; padding: 10px 18px; background: var(--lysblaa); color: var(--tekst); border-radius: 16px;
    box-shadow: var(--skygge); font-weight: 700; font-size: clamp(16px, 2.2vw, 19px); line-height: 1.35;
}
.demo-boble::before {
    content: ""; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    border-style: solid; border-width: 0 11px 11px 11px; border-color: transparent transparent var(--lysblaa) transparent;
}
.demo-boble svg { flex: 0 0 auto; color: var(--morkblaa); }
/* Høyttalerknappen leser opp teksten (2026-09-13). Samme gule knapp som ellers: sand, mørkeblått ikon,
   skygge, grønn ved hover og mens klokka snakker. Ikonet pulserer mens den snakker, ikke ved redusert
   bevegelse. Kortet leser også opp ved trykk, som i appen. */
.demo-les {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    padding: 0; border: 0; border-radius: 10px; background: var(--sand); color: var(--morkblaa);
    box-shadow: var(--skygge); cursor: pointer; touch-action: manipulation;
}
.demo-les:hover, .demo-boble.snakker .demo-les { background: var(--gronn); }
.demo-les:focus { outline: none; }
.demo-les:focus-visible { outline: 3px solid var(--morkblaa); outline-offset: 3px; }
.demo-boble.snakker .demo-les svg { animation: demo-puls 1s ease-in-out infinite; }
@keyframes demo-puls { 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .demo-boble.snakker .demo-les svg { animation: none; } }
.demokort { cursor: pointer; }
.demo-stemme { max-width: 520px; margin: 12px auto 0 auto; text-align: center; font-size: 15px; }
/* Lest opp av skjermlesere, ikke vist: ikonet sier det samme for de som ser. */
.skjermleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Funksjonskort */
/* Ni kort i 3 × 3 (2026-09-13; var 4 × 2 med åtte), tre kolonner også på nettbrett så ingen blir alene
   på siste rad, én på mobil. Ikonene i en rad: sol og måne som på barnekortet, tre høytider. */
.kort { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kort .ett { background: var(--blaa); border-radius: 0; padding: 22px 20px; box-shadow: var(--skygge); }
.kort .ikoner { display: flex; align-items: flex-end; gap: 10px; min-height: 56px; margin-bottom: 12px; }
.kort .ikoner img { height: 56px; width: auto; }
.kort p { font-size: 16px; margin: 0; }
/* Strek og farge (2026-09-14, prøve etter ønske om roligere kort): ikonene er svart strek til kortet er i
   fokus - musa over på PC, og på berøringsskjerm kortet (raden på nettbrett) nærmest midten av skjermen, satt
   av skriptet med klassen i-farger. Ikoner vi har i begge utgaver (span.ikon: …_svart under, …_farger over)
   toner fargene inn. …_strek.svg og …_strek_farge.svg er generert fra de flate ikonene (omriss rundt hver
   form). Strekutgaven er fylt med kortets blå, så linjer bak andre former skjules, og forutsetter derfor
   bakgrunnen --blaa. Et ikon uten strekutgave (img rett i .ikoner) vises i gråtoner.

   Lagene krysstoner (2026-09-19): strekutgaven tones ut samtidig som fargeutgaven tones inn. Før lå
   strekutgaven synlig under hele tiden, og det gikk bare så lenge fargeutgaven var laget fra nøyaktig
   samme tegning og dermed dekket den helt. Ikoner fra ulike sett, som sol og måne, har ikke samme
   geometri, og da stakk laget under fram som doble streker. */
.kort .ikoner > img { filter: grayscale(1); transition: filter .35s ease; }
.kort .ikon { position: relative; display: block; flex: 0 0 auto; }
.kort .ikon img { display: block; }
.kort .ikon .strek { transition: opacity .35s ease; }
.kort .ikon .farge { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .35s ease; }
.kort .ett.i-farger .ikoner > img { filter: none; }
.kort .ett.i-farger .ikon .strek { opacity: 0; }
.kort .ett.i-farger .ikon .farge { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .kort .ett:hover .ikoner > img { filter: none; }
    .kort .ett:hover .ikon .strek { opacity: 0; }
    .kort .ett:hover .ikon .farge { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .kort .ikoner > img, .kort .ikon .strek, .kort .ikon .farge { transition: none; }
}

/* Steg */
.steg { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: steg; }
.steg li { background: rgba(255,255,255,.35); border-radius: 14px; padding: 22px 20px 16px 20px; position: relative; }
.steg li span { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%;
                background: var(--sand); color: var(--morkblaa); font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.steg p { font-size: 16px; margin: 0; }

/* Pris */
.pris { max-width: 520px; margin: 0 auto; background: var(--blaa); border-radius: 0; padding: 32px 32px 28px 32px; text-align: center; box-shadow: var(--skygge); }
.belop { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 14px; }
.belop .tall { font-size: 72px; font-weight: 700; line-height: 1; }
.belop .enhet { font-size: 20px; color: var(--dempet); }
.pris ul { list-style: none; padding: 0; margin: 0 0 22px 0; text-align: left; display: inline-block; }
.pris li { padding: 4px 0 4px 30px; position: relative; }
.pris li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 8px; height: 14px; border: solid var(--morkblaa); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* Spørsmål */
#sporsmal { max-width: 760px; margin: 0 auto; }
details { background: rgba(255,255,255,.35); border-radius: 12px; margin-bottom: 10px; padding: 0 18px; }
summary { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; position: relative; padding-right: 30px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 24px; color: var(--morkblaa); }
details[open] summary::after { content: "–"; }
details p { padding-bottom: 14px; margin: 0; }

.avslutning { text-align: center; }
.avslutning h2 { margin-bottom: 20px; }

/* Hjelp */
.innhold { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 30px 0; }
.innhold a { font-weight: 600; text-decoration: none; }
.blokk.smal h1 { text-align: left; }
.blokk.smal h2 { text-align: left; margin-top: 36px; }
.blokk.smal li { margin-bottom: 8px; }

/* Bunn */
.bunn { max-width: 1100px; margin: 20px auto 0 auto; padding: 32px 24px 40px 24px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px;
        border-top: 1px solid rgba(0,0,0,.1); font-size: 16px; }
.bunn .logo { height: 40px; margin-bottom: 8px; }
.bunn h4 { margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; color: var(--dempet); }
.bunn a { display: block; text-decoration: none; margin-bottom: 6px; }
/* Lenke inne i en setning (firmanavnet, 2026-09-14): står i teksten, ikke på egen linje som de
   andre i bunnen. Understrekingen er tatt bort igjen (2026-09-19): den var den eneste streken i
   bunnen og hadde i tillegg en egen underline-offset ingen andre lenker på siden har. Nå arver
   den text-decoration: none fra .bunn a, så alle lenkene i bunnen ser like ut. */
.bunn p a { display: inline; margin: 0; }

/* Nettbrett */
@media (max-width: 1000px) {
    .kort { gap: 14px; }
    .kort .ett { padding: 18px 16px; }
    .kort .ikoner img { height: 48px; }
}
/* Nettbrett og mobil: én kolonne, tekst og knapper midtstilt i full bredde, minikortet under (2026-09-13;
   før ble bildet i toppen skjult her). Opptil 1024 px, og berøringsskjermer uansett bredde, så iPad
   liggende (1180 px) også er med. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .helt { grid-template-columns: 1fr; text-align: center; }
    .knapper { justify-content: center; }
}
/* Mobil */
@media (max-width: 640px) {
    body { font-size: 17px; }
    .helt-kort { display: none; }   /* minikortet i toppen vises ikke på mobil (ønske 2026-09-14), bare på nettbrett og PC */
    .topp { padding: 12px 16px; }
    .menyknapp { display: block; }
    .topp nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 8px; }
    .topp nav.aapen { display: flex; }
    .topp nav a { padding: 10px 6px; border-bottom: 1px solid rgba(0,0,0,.08); }
    .topp nav a.aktiv { border-bottom: 1px solid rgba(0,0,0,.08); }
    .topp nav a.knapp { text-align: center; margin-top: 6px; border: 0; }
    main { padding: 0 16px; }
    .blokk { padding: 40px 0; }
    .kort, .steg { grid-template-columns: 1fr; }
    /* Pilene inne på bildet: utenfor rammen ville de gitt horisontal scroll ved 400 px. */
    .galleri-pil { width: 40px; height: 40px; font-size: 19px; }
    .galleri-pil.forrige { left: 6px; }
    .galleri-pil.neste { right: 6px; }
    .knapp.stor { width: 100%; text-align: center; white-space: normal; }
    .pris { padding: 24px 18px; }
    .belop .tall { font-size: 60px; }
    .bunn { grid-template-columns: 1fr; gap: 20px; }
}