/*Forhåndslaster hover-bilder*/
body::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1; /*skjuler bildene*/
    content:
    url(../bilder/logginn.svg); /*Laster bilder*/ 
 }

@media only screen and (max-width: 320px) {
    body{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%);
        padding-top: 4%;
        margin: auto;
    }

    section{
        height:100%;
        width:100%;
        margin: 0 auto;
    }
    
    input, button{
        display: block;
        height:60px;
        width:80%;
        margin: auto;    
    }

    /* «Husk meg» på innloggingssiden. Regelen «input, button» over gir alle felt
       høyde 60px og full bredde, som ville gjort avkrysningsboksen til en klump -
       derfor settes den tilbake til sin egen størrelse her. */
    #huskmeglabel, .avkrysning{
        display: block;
        width: 80%;
        margin: 12px auto;
        font-family: 'Dosis';
        font-size: large;
        font-weight: bolder;
        color: #758ad6;
        cursor: pointer;
    }

    #huskmeg, #vilkar{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 8px 0 0;
        vertical-align: middle;
        accent-color: #758ad6;
        cursor: pointer;
    }

    
    #feilmelding{
        color: 	red;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
     }

    /* Grønn bekreftelse (registrert, passord endret, e-post bekreftet) - samme form som feilmeldingen. */
    #melding{
        color: green;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
     }

     #ok{
        width:15%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }

    /* Lenker under skjemaet: «Opprett konto», «Glemt passord?», «Tilbake». */
    .lenker{
        text-align: center;
        font-family: 'Dosis';
        font-size: large;
        font-weight: bolder;
        margin: 14px auto 0 auto;
     }

     .lenker a, .avkrysning a{
        color: #758ad6;
        text-decoration: underline;
     }

     .lenker a:hover, .avkrysning a:hover{
        color: #A3E1B0;          /* palettens grønn, samme som knappenes hover */
        text-decoration: none;
     }

    /* Brødtekst på vilkår- og personvernsidene. */
    .brodtekst{
        width: 80%;
        margin: 12px auto;
        font-family: 'Dosis';
        font-size: large;
        color: #333;
        line-height: 1.4;
     }
     
     #feil{
        width:15%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }
     
     #tilbakemeldingsboks{
        display: block;
        width: 50%;
        margin:auto;
        text-align: center;
     }
    
    #logginnknapp{
        display: block;
        margin:auto;
        width:80%;
        height:60px;
        font-size: large;
        font-weight: bolder;
        color:#758ad6;
        background-color: #E1D4A3;
        border:0;
        cursor: pointer;
        border-radius: 10px;
        background-image: url('../bilder/logginn_svart.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
     }
    
     #logginnknapp:hover{
        background-color:	#A3E1B0;
        background-image: url('../bilder/logginn.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
     }
    
     #passordfelt, #epostfelt, .tekstfelt{
        /*Gjør at bokssørrelse ikke endres av padding*/
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(225,212,163,1) 100%);
        border:0;
        font-size: large;
        font-weight: bolder;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
      
     }
    
     #bilde{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%; 
        margin-bottom:0px;
     }
    
     #overskrift{
        font-size:15px;  
        font-family: 'Architects Daughter';
        text-align: center; 
        font-weight: 600;
        letter-spacing: 3px;
     }

}

@media only screen and (min-width: 321px) and (max-width: 600px) {
    body{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%);
        padding-top: 4%;
        margin: auto;
    }

    section{
        height:relative;
        width:100%;
        margin: auto;
    }
    
    input, button{
        display: block;
        height:60px;
        width:80%;
        margin: auto;    
    }

    /* «Husk meg» på innloggingssiden. Regelen «input, button» over gir alle felt
       høyde 60px og full bredde, som ville gjort avkrysningsboksen til en klump -
       derfor settes den tilbake til sin egen størrelse her. */
    #huskmeglabel, .avkrysning{
        display: block;
        width: 80%;
        margin: 12px auto;
        font-family: 'Dosis';
        font-size: large;
        font-weight: bolder;
        color: #758ad6;
        cursor: pointer;
    }

    #huskmeg, #vilkar{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 8px 0 0;
        vertical-align: middle;
        accent-color: #758ad6;
        cursor: pointer;
    }

    
    
    #feilmelding{
        color: 	red;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
    }

    /* Grønn bekreftelse (registrert, passord endret, e-post bekreftet) - samme form som feilmeldingen. */
    #melding{
        color: green;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
     }

     #ok{
        width:15%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }

    /* Lenker under skjemaet: «Opprett konto», «Glemt passord?», «Tilbake». */
    .lenker{
        text-align: center;
        font-family: 'Dosis';
        font-size: large;
        font-weight: bolder;
        margin: 14px auto 0 auto;
     }

     .lenker a, .avkrysning a{
        color: #758ad6;
        text-decoration: underline;
     }

     .lenker a:hover, .avkrysning a:hover{
        color: #A3E1B0;          /* palettens grønn, samme som knappenes hover */
        text-decoration: none;
     }

    /* Brødtekst på vilkår- og personvernsidene. */
    .brodtekst{
        width: 80%;
        margin: 12px auto;
        font-family: 'Dosis';
        font-size: large;
        color: #333;
        line-height: 1.4;
     }
  
    #feil{
        width:15%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }
  
    #tilbakemeldingsboks{
        display: block;
        width: 50%;
        margin:auto;
        text-align: center;
    }
    
    #logginnknapp{
        display: block;
        margin:auto;
        width:80%;
        height:60px;
        font-size: large;
        font-weight: bolder;
        color:#758ad6;
        background-color: #E1D4A3;
        border:0;
        cursor: pointer;
        border-radius: 10px;
        background-image: url('../bilder/logginn_svart.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
     }
    
     #logginnknapp:hover{
        background-color:	#A3E1B0;
        background-image: url('../bilder/logginn.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
     }
    
     #passordfelt, #epostfelt, .tekstfelt{
        /*Gjør at bokssørrelse ikke endres av padding*/
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(225,212,163,1) 100%);
        border:0;
        font-size: large;
        font-weight: bolder;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
      
     }
    
     #bilde{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 25%; 
        height:10%;
     }
    
     #overskrift{
        font-family: 'Architects Daughter';
        text-align: center;
        font-size: 90%;
        letter-spacing: 7px;
        font-weight: 600;    
     }


}

@media only screen and (min-width: 601px) and (max-width: 1024px){
    body{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%);
        padding-top: 4%;
        margin: auto;
    }
    
    section{
        height:relative;
        width:100%;
        margin: auto;
    }
    
    input, button{
        display: block;
        height:60px;
        width:65%;
        margin: auto;    
    }

    /* «Husk meg» på innloggingssiden. Regelen «input, button» over gir alle felt
       høyde 60px og full bredde, som ville gjort avkrysningsboksen til en klump -
       derfor settes den tilbake til sin egen størrelse her. */
    #huskmeglabel, .avkrysning{
        display: block;
        width: 65%;
        margin: 12px auto;
        font-family: 'Dosis';
        font-size: large;
        font-weight: bolder;
        color: #758ad6;
        cursor: pointer;
    }

    #huskmeg, #vilkar{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 8px 0 0;
        vertical-align: middle;
        accent-color: #758ad6;
        cursor: pointer;
    }

    
    
    #feilmelding{
        color: 	red;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
     }

    /* Grønn bekreftelse (registrert, passord endret, e-post bekreftet) - samme form som feilmeldingen. */
    #melding{
        color: green;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
     }

     #ok{
        width:15%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }

    /* Lenker under skjemaet: «Opprett konto», «Glemt passord?», «Tilbake». */
    .lenker{
        text-align: center;
        font-family: 'Dosis';
        font-size: large;
        font-weight: bolder;
        margin: 14px auto 0 auto;
     }

     .lenker a, .avkrysning a{
        color: #758ad6;
        text-decoration: underline;
     }

     .lenker a:hover, .avkrysning a:hover{
        color: #A3E1B0;          /* palettens grønn, samme som knappenes hover */
        text-decoration: none;
     }

    /* Brødtekst på vilkår- og personvernsidene. */
    .brodtekst{
        width: 80%;
        margin: 12px auto;
        font-family: 'Dosis';
        font-size: large;
        color: #333;
        line-height: 1.4;
     }
    
  
    #feil{
        width:10%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }
  
    #tilbakemeldingsboks{
        display: block;
        width: 50%;
        margin:auto;
        text-align: center;
    }
    
    #logginnknapp{
        display: block;
        margin:auto;
        width:65%;
        height:60px;
        font-size: large;
        font-weight: bolder;
        color:#758ad6;
        background-color: #E1D4A3;
        border:0;
        cursor: pointer;
        border-radius: 10px;
        background-image: url('../bilder/logginn_svart.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
     }
    
     #logginnknapp:hover{
        background-color:	#A3E1B0;
        background-image: url('../bilder/logginn.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
     }
    
     #passordfelt, #epostfelt, .tekstfelt{
        /*Gjør at bokssørrelse ikke endres av padding*/
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(225,212,163,1) 100%);
        border:0;
        font-size: large;
        font-weight: bolder;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
      
     }
    
     #bilde{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 20%; 
     }
    
     #overskrift{
        font-family: 'Architects Daughter';
        text-align: center;
        font-size: 200%;
        letter-spacing: 15px;
        font-weight: 700;    
     }
    

}

@media only screen and (min-width: 1025px){
    body{
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(163,176,225,1) 35%, rgba(225,212,163,1) 100%);
        padding-top: 4%;
        margin: auto;
    }
    
    section{
        height:relative;
        width:100%;
        margin: auto;
    }
    
    input, button{
        display: block;
        height:60px;
        width:25%;
        margin: auto;    
    }

    /* «Husk meg» på innloggingssiden. Regelen «input, button» over gir alle felt
       høyde 60px og full bredde, som ville gjort avkrysningsboksen til en klump -
       derfor settes den tilbake til sin egen størrelse her. */
    #huskmeglabel, .avkrysning{
        display: block;
        width: 25%;
        margin: 12px auto;
        font-family: 'Dosis';
        font-size: large;
        font-weight: bolder;
        color: #758ad6;
        cursor: pointer;
    }

    #huskmeg, #vilkar{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 8px 0 0;
        vertical-align: middle;
        accent-color: #758ad6;
        cursor: pointer;
    }

    
    
    #feilmelding{
        color: 	red;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
    }

    /* Grønn bekreftelse (registrert, passord endret, e-post bekreftet) - samme form som feilmeldingen. */
    #melding{
        color: green;
        margin:auto;
        font-family: 'Dosis';
        text-transform: uppercase;
        font-size:large;
        font-weight: 900;
        padding-top:10px;
     }

     #ok{
        width:15%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }

    /* Lenker under skjemaet: «Opprett konto», «Glemt passord?», «Tilbake». */
    .lenker{
        text-align: center;
        font-family: 'Dosis';
        font-size: large;
        font-weight: bolder;
        margin: 14px auto 0 auto;
     }

     .lenker a, .avkrysning a{
        color: #758ad6;
        text-decoration: underline;
     }

     .lenker a:hover, .avkrysning a:hover{
        color: #A3E1B0;          /* palettens grønn, samme som knappenes hover */
        text-decoration: none;
     }

    /* Brødtekst på vilkår- og personvernsidene. */
    .brodtekst{
        width: 80%;
        margin: 12px auto;
        font-family: 'Dosis';
        font-size: large;
        color: #333;
        line-height: 1.4;
     }
      
      #feil{
        width:8%;
        margin-right: 10px;
        vertical-align: text-bottom;
     }
  
    #tilbakemeldingsboks{
        display: block;
        width: 50%;
        margin:auto;
        text-align: center;
    }
    
    #logginnknapp{
        display: block;
        margin:auto;
        width:25%;
        height:60px;
        font-size: large;
        font-weight: bolder;
        color:#758ad6;
        background-color: #E1D4A3;
        border:0;
        cursor: pointer;
        border-radius: 10px;
        background-image: url('../bilder/logginn_svart.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
     }
    
     #logginnknapp:hover{
        background-color:	#A3E1B0;
        background-image: url('../bilder/logginn.svg');
        background-size: 10%;
        background-repeat: no-repeat;
        background-position:  2%;
     }
    
     #passordfelt, #epostfelt, .tekstfelt{
        /*Gjør at bokssørrelse ikke endres av padding*/
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
        background: rgb(163,225,176);
        background: linear-gradient(90deg, rgba(163,225,176,1) 0%, rgba(225,212,163,1) 100%);
        border:0;
        font-size: large;
        font-weight: bolder;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
      
     }
    
     #bilde{
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 10%; 
     }
    
     #overskrift{
        font-family: 'Architects Daughter';
        text-align: center;
        font-size: 200%;
        letter-spacing: 15px;
        font-weight: 700;    
     }
    
}



/* ---------------------------------------------------------------------------
   Tillegg 2026-09-11: knapper på registrering, glemt passord, abonnement m.m. gjenbruker
   #logginnknapp for form og farge, men skal ha sitt eget ikon - ikke innloggingspila.
   Klassene under overstyrer bare bildet. Gjelder alle bredder, derfor utenfor media queries. */
#logginnknapp.ikon-leggtil        { background-image: url('../bilder/leggtil_svart.svg'); }
#logginnknapp.ikon-leggtil:hover  { background-image: url('../bilder/leggtil_farger.svg'); }
#logginnknapp.ikon-passord        { background-image: url('../bilder/passord_svart.svg'); }
#logginnknapp.ikon-passord:hover  { background-image: url('../bilder/passord_farger.svg'); }
#logginnknapp.ikon-lagre          { background-image: url('../bilder/save_svart.svg'); }
#logginnknapp.ikon-lagre:hover    { background-image: url('../bilder/save_farger.svg'); }
#logginnknapp.ikon-loggut         { background-image: url('../bilder/loggut_svart.svg'); }
#logginnknapp.ikon-loggut:hover   { background-image: url('../bilder/loggut.svg'); }
/* Bare «Si opp abonnementet» på abonnementssiden bruker denne klassen, og den har sitt eget ikon
   (ønske 2026-09-16: delete-ikonet, etter en runde med si_opp-ikonet). */
#logginnknapp.ikon-slett          { background-image: url('../bilder/cancel_svart.svg'); }
#logginnknapp.ikon-slett:hover    { background-image: url('../bilder/cancel_farger.svg'); background-color: #e1a3b0; color: #F44081; }   /* samme tekstfarge som i kontrollpanelet (2026-09-16) */
#logginnknapp.ikon-kort           { background-image: url('../bilder/kort_svart.svg'); }
#logginnknapp.ikon-kort:hover     { background-image: url('../bilder/kort_farger.svg'); }
/* Bare «Bytt kort / se kvitteringer» på abonnementssiden bruker denne klassen, og den har kortikonet
   (2026-09-16, var tannhjulet). */
#logginnknapp.ikon-innstilling         { background-image: url('../bilder/kort_svart.svg'); }
#logginnknapp.ikon-innstilling:hover   { background-image: url('../bilder/kort_farger.svg'); }
#logginnknapp.ikon-ok, #logginnknapp.ikon-ok:hover               { background-image: url('../bilder/ok.svg'); }   /* check.svg fantes ikke (rettet 2026-09-12) */

/* Kort brødtekst på sider med skjema (abonnement, takkeside): sentrert i samme kolonne som
   knappene, i stedet for venstrestilt over hele bredden. */
.brodtekst.sentrert { text-align: center; max-width: 520px; margin: 10px auto; }
.brodtekst.sentrert .status { font-weight: bold; }
.brodtekst.sentrert .status.feil { color: #db3a3c; }

/* Avkrysningsboksene («Husk meg», vilkår) i samme uttrykk som tekstfeltene over: gradient,
   avrundede hjørner, skygge, og nærmere feltet. Nettleserens egen boks tegnes ikke. */
#huskmeglabel, .avkrysning {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px auto 10px auto;
    line-height: 1.3;
}
/* Vilkårsavkrysningen ble flerlinjet 2026-09-20, da angrerettloven § 19 krevde at anmodningen om
   oppstart og erkjennelsen av tapt angrerett kom inn i selve avkrysningen. «Husk meg» er én linje,
   der er align-items: center riktig og usynlig. Over fem linjer sentrerte den boksen mot hele
   tekstkolonnen, så den svevde alene ute i margen på linje tre, utenfor teksten den hører til.
   Målt før: boksen 47,9 px under første tekstlinje. Etter: 0 px, altså på linje med setningens
   begynnelse, og boksens midtlinje 1,5 px over tekstlinjens midt - samme optiske innretting som
   «Husk meg» har med sine 1,2 px. flex-start gjør hele jobben; et margin-top-påslag ble prøvd og
   fjernet igjen, fordi #huskmeg/#vilkar-regelen under setter margin i kortform og nullstiller det. */
.avkrysning {
    align-items: flex-start;
}
#huskmeg, #vilkar {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin: 0 0 2px 2px;   /* 2 px inn fra feltkanten over, 2 px opp mot tekstens midtlinje */
    border: 0;
    border-radius: 6px;
    background: #A3E1B0;   /* palettens grønn, uten gradient (ønske 2026-09-11) */
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    position: relative;
    cursor: pointer;
    vertical-align: middle;
}
#huskmeg:checked::after, #vilkar:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #758ad6;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
#huskmeg:focus-visible, #vilkar:focus-visible {
    outline: 2px solid #000;   /* som den generelle regelen lenger nede (2026-09-18) */
    outline-offset: 0;         /* uten luft: 2 px glipe rundt en 20 px boks leste som en feil (2026-09-18) */
}

/* Samme typografi som feltene og knappene i kontrollpanelet: Dosis, versaler, vekt 900.
   Innloggingssidene laster ikke style.css, og feltene falt derfor tilbake på systemfonten. */
#passordfelt, #epostfelt, .tekstfelt, #logginnknapp {
    font-family: 'Dosis', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size: large;
}
#passordfelt::placeholder, #epostfelt::placeholder, .tekstfelt::placeholder {
    text-transform: uppercase;
    font-family: 'Dosis', sans-serif;
    font-weight: 900;
}
#huskmeglabel, .avkrysning, .lenker, .lenker a {
    font-family: 'Dosis', sans-serif;
    font-weight: 900;
    font-size: large;
}

/* Markert tekst i palettens grønn (ønske 2026-09-11). Gjelder hele siden. */
::selection { background: #A3E1B0; color: black; }
::-moz-selection { background: #A3E1B0; color: black; }

/* Ikonet i knappene: samme størrelse som i kontrollpanelet (5 % av en 424 px bred knapp ≈ 21 px). */
#logginnknapp, #logginnknapp:hover {
    background-size: 26px;
    background-position: 10px center;
}

/* Prikken mellom lenker på samme linje, med luft på begge sider. */
.lenker .skille { display: inline-block; margin: 0 18px; color: #758ad6; }

/* Teksten ved «Husk meg» er ikke klikkbar - bare selve boksen (ønske 2026-09-11). */
#huskmeglabel { cursor: default; }
#huskmeglabel span { cursor: default; user-select: none; }

/* ---------------------------------------------------------------------------
   Boks bak skjemaet (valgt 2026-09-11, variant A): palettens blå, som infoboksene på forsiden.
   Gjelder alle sider som bruker dette arket. Bredder inne i boksen settes her i px/prosent av
   boksen, siden reglene i media queries over regner prosent av hele siden. */
section#login {
    background: #a3b0e1;
    border-radius: 0;   /* rette hjørner som boksene på klokka (ønske 2026-09-13) */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
    width: 440px;
    max-width: 92%;
    margin: 30px auto;
    padding: 10px 0 26px 0;
    box-sizing: border-box;
}
/* Vilkår og personvern har lang tekst og trenger en bredere boks. */
section#login:has(.juridisk) { width: 860px; padding: 10px 0 30px 0; }

section#login #passordfelt, section#login #epostfelt, section#login .tekstfelt,
section#login #logginnknapp, section#login #huskmeglabel, section#login .avkrysning,
section#login #tilbakemeldingsboks {
    width: 80%;
}
section#login #bilde { width: 28%; }
section#login #overskrift {
    /* Skalerer med skjermbredden, så «Personvernerklæring» får plass i boksen på mobil. */
    font-size: clamp(17px, 5.2vw, 27px);
    letter-spacing: clamp(1px, 1.2vw, 8px);
    margin: 14px 8px 8px 8px;
    overflow-wrap: anywhere;
}
section#login .brodtekst.sentrert { max-width: 80%; }

/* Tekst og lenker på den blå boksen: svart, som overskriften og som lenkene i kontrollpanelet.
   #758ad6 på #a3b0e1 ga for lav kontrast (anbefalt og valgt 2026-09-11). Hover er fortsatt grønn. */
#huskmeglabel, #huskmeglabel span, .avkrysning, .lenker, .lenker a, .avkrysning a { color: black; }

/* Samme grå som plassholderteksten i feltene (satt eksplisitt, så den er lik i alle nettlesere). */
#passordfelt::placeholder, #epostfelt::placeholder, .tekstfelt::placeholder { color: #666; opacity: 1; }
#huskmeglabel, #huskmeglabel span, .avkrysning, .lenker, .lenker a, .avkrysning a { color: #666; }

/* Svart med et snev av boksens blå (#a3b0e1, ca. 55 %): #5b6380. Brukes på tekst, lenker og
   plassholdere, så alt i boksen har samme tone. */
#passordfelt::placeholder, #epostfelt::placeholder, .tekstfelt::placeholder { color: #5b6380; opacity: .8; }
#huskmeglabel, #huskmeglabel span, .avkrysning, .lenker, .lenker a, .avkrysning a { color: #5b6380; }

/* Hover på lenkene i boksen: svart (valgt 2026-09-11, etter å ha prøvd grønn og sand). */
.lenker a:hover, .avkrysning a:hover { color: black; text-decoration: none; }

/* Haket av: teksten blir svart, som lenkene ved hover. */
#huskmeglabel #huskmeg:checked + span { color: black; }

/* Det brukeren skriver inn vises med små bokstaver; bare plassholderen (E-POST, PASSORD) og
   knappene er i versaler. */
#passordfelt, #epostfelt, .tekstfelt { text-transform: none; }

/* Feilmelding fra skjemasjekken i JavaScript, i samme stil som meldingene fra serveren.
   Nettleserens egne bobler og alert() passer ikke designet, derfor novalidate + denne. */
.js-feil { display: block; width: 80%; margin: 0 auto; text-align: center; }
.js-feil img { width: 15%; margin-right: 10px; vertical-align: text-bottom; }
.js-feil p { color: red; margin: auto; font-family: 'Dosis'; text-transform: uppercase; font-size: large; font-weight: 900; padding-top: 10px; }
/* display:block over trumfet hidden-attributtet - skjult skal være skjult. */
.js-feil[hidden] { display: none; }

/* Feilteksten er svart (valgt 2026-09-18). Fargen bærer ikke beskjeden - ikonet cancel_farger.svg
   og den rosa bunnen gjør det - så teksten skal bare være lesbar. På rosa (#e1a3b0) gir svart 10,1:1,
   mens #db3a3c ga 2,15:1 og #F44081 1,71:1, begge under WCAGs 4,5:1. Samme valg som i påminnelsen om
   ubekreftet e-post 2026-09-16. Gjelder både skjemasjekken og meldingene fra serveren. */
.js-feil p, #feilmelding { color: #000; }

/* Meldinger som en egen boks inne i kortet: ikon til venstre, tekst ved siden av, sand bakgrunn
   som knappene. Gjelder både skjemasjekken (.js-feil) og meldingene fra serveren. */
.js-feil, section#login #tilbakemeldingsboks {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 80%;
    margin: 0 auto 12px auto;
    padding: 10px 14px;
    box-sizing: border-box;
    background: #e1a3b0;   /* palettens rosa, som hover på Logg ut */
    border-radius: 10px;   /* runde hjørner som feltene og knappen (ønske 2026-09-18); var 0 */
    /* Kantlinje i stedet for slagskygge (ønske 2026-09-18). Boksen skilles fra kortet av kanten,
       ikke av dybde. Svart (valgt 2026-09-18, etter å ha prøvd #F44081 fra cancel_farger.svg): samme
       svart som ringen rundt begge ikonene, og den eneste kanten som skiller like godt på rosa og
       grønn bunn - #F44081 ga 1,67:1 mot kortet, ikonets grønn #00ce8e bare 1,04:1.

       Ringen tegnes med box-shadow og ikke med border (2026-09-18): på skjermer med brøkskalering
       (125 %, 150 %) rundes hver av borderens fire kanter av for seg til hele skjermpiksler, så én
       side kan bli 1 piksel og en annen 2 - kanten ser ujevn ut. En box-shadow-ring tegnes som én
       form i nøyaktig bredde, uten avrunding per kant. Målt i Chromium: borderens blekkmengde står
       stille på 1,79 fra 1,0x til 1,75x og hopper så til 2,53, mens ringen vokser jevnt
       (1,79-1,97-2,16-2,34-2,53), altså uten snapping. Ringen ligger utenfor boksen og endrer ikke
       layout. */
    box-shadow: 0 0 0 1px #000;
    text-align: left;
}
.js-feil[hidden] { display: none; }
.js-feil img, section#login #tilbakemeldingsboks img { width: 30px; height: 30px; margin: 0; flex: 0 0 auto; vertical-align: middle; }
.js-feil p, section#login #tilbakemeldingsboks p { margin: 0; padding: 0; text-transform: none; font-size: medium; line-height: 1.3; }
section#login #tilbakemeldingsboks + br { display: none; }

/* Bekreftelser i palettens grønne, ikke rosa: rosa/rødt bare ved feil (ønske 2026-09-13).
   Klassen ok settes der meldingen er en bekreftelse - skrivSesjonsmelding(), verifiser.php og
   betaling_ferdig.php. Mørk tekst: grønn tekst (#melding i media queries) på grønn bunn leses ikke. */
section#login #tilbakemeldingsboks.ok { background: #A3E1B0; }
section#login #tilbakemeldingsboks.ok p { color: #333; }

/* Fokusramme rundt felt og knapper (lagt om 2026-09-18, var `3px solid #ccd4ee` med offset 2px).
   To ting var galt med den gamle:
   1. Den lå utenpå - 3 px ramme pluss 2 px luft - så det aktive feltet vokste 5 px til hver side og
      ble bredere enn de andre. Det ga rare proporsjoner i skjemaene.
   2. #ccd4ee ga 1,44:1 mot det blå kortet og 1,02:1 mot feltets egen gradient. WCAG 2.2 ber om 3:1
      for fokusmarkering. Den virket bare fordi den var tykk og lys, ikke fordi den skilte seg ut.
   Nå: svart ring tegnet INNENFOR feltet (negativ offset), så ytre mål ikke endres i det hele tatt.
   Svart gir 9,85:1 mot kortet og 13,95/14,15:1 mot gradientens to ender, og er samme svart som ringen
   rundt meldingsboksene og inne i ikonene. 2 px i stedet for 3 fordi ringen nå ligger rett på
   fargeflaten. Palettens blå (2,2:1) og hvit (1,5:1) ble prøvd på innloggingssiden og forkastet.
   Lenker, avkrysningsbokser og radioknapper beholder ramme utenpå: en innvendig ring ville skåret
   gjennom lenketeksten og spist opp de 20 px store avkrysningsboksene. */
input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px;
}
a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}
/* Avkrysningsbokser og radioknapper: ring uten luft. Med 2 px offset ble glipa rundt en 20 px boks
   like bred som selve ringen, og det så ut som en feil heller enn som fokus (2026-09-18). */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid #000;
    outline-offset: 0;
}
/* ... men bare ved tastatur. Regelen «input:focus» over bruker :focus, ikke :focus-visible, og traff
   derfor også avkrysningsboksen når den ble haket av med musa: den innvendige 2 px ringen dekket
   kanten på den 19 px store boksen og ble stående som en svart ramme (meldt 2026-09-18).
   :not(:focus-visible) tar den bort etter museklikk og lar tastaturfokus beholde ringen. */
input[type="checkbox"]:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible) {
    outline: none;
}
/* Prøvd og forkastet 2026-09-18: «#huskmeg:checked:focus-visible { outline: none }» tok bort ringen også
   når boksen ble haket av med mellomrom. Angret, fordi tastaturbrukeren da mister fokusmarkeringen i
   avhaket tilstand (WCAG 2.4.7). Tastaturfokus skal ha den svarte ringen uansett tilstand. */

/* Som i kontrollpanelet: tekst rundt feltene ligger over fokusrammen. */
#huskmeglabel, .avkrysning, .lenker, .brodtekst, .js-feil, #tilbakemeldingsboks {
    position: relative;
    z-index: 2;
}

/* Strek mellom skjemaet og knappen, i palettens sand som knappen under (valgt 2026-09-12,
   først på barnesperren, så her). */
section#login .skillelinje {
    width: 64%;   /* 80 % av knappen og feltene (som er 80 % bredde), som i kontrollpanelet: streken blir lettere (2026-09-15) */
    height: 2px;
    margin: 26px auto 22px auto;   /* målt 2026-09-15: 26 px luft over «Husk meg» og 22 px under; ikke 36, marginene over slås sammen */
    border: 0;
    background: #E1D4A3;
}

/* Robotsjekken (Cloudflare Turnstile, 2026-09-13) på registrering og glemt passord: sentrert over
   knappen. Widgeten er 300 px bred; på de smaleste skjermene får den stikke litt ut av feltbredden
   heller enn å bli klemt. Ingen minimumshøyde: med interaction-only er den som regel usynlig, og
   da skal feltet ikke gi luft. Klassen synlig settes av skriptet i turnstileFelt() når feltet får
   høyde, altså når Cloudflare viser widgeten. */
section#login .turnstile-felt {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}
section#login .turnstile-felt.synlig { margin: 16px auto 16px auto; }

/* ---------------------------------------------------------------------------
   Autofyll fra nettleseren (2026-09-18). Edge og Chrome maler autofylte felt med sin egen
   regel, som ikke kan slås av:

       background-color: rgb(232,240,254) !important;
       background-image: none !important;

   Nettleserens !important vinner over all CSS vi kan skrive, så feltet blir hvitt. Bare
   transition slår den, og den virker ikke på background-image - gradienten er derfor ikke
   mulig å redde. box-shadow rører nettleseren ikke, så en inset-skygge over hele feltet maler
   bakgrunnen på nytt. Fargen blir ensfarget grønn (gradientens venstre ende), fordi en skygge
   ikke kan være en gradient. De vanlige slagskyggene må gjentas her, ellers erstatter regelen
   dem - box-shadow er én egenskap.

   :-webkit-autofill og :autofill står som to regler med vilje: kjenner ikke nettleseren det ene
   navnet, kastes hele selektorlista - samme felle som ::file-selector-button. */
#passordfelt:-webkit-autofill, #epostfelt:-webkit-autofill, .tekstfelt:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #A3E1B0, 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
#passordfelt:autofill, #epostfelt:autofill, .tekstfelt:autofill {
    box-shadow: inset 0 0 0 1000px #A3E1B0, 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}