/* ============================================================
SKIFT TIL ELBIL PAA MOBIL - laget over siden
============================================================
Bygget 7. september 2026 paa Henriks go, efter den klikbare
proeve (overleveringens TILLAEG 20 afsnit 6) og hans
beslutninger i beslutningslog 16.94.
Samme greb som motoren paa mobil: et fuldt lag oven paa siden
paa skaerme op til 820 px, med groen top, tilbagepil, kryds,
trinlinjer og fast bund. Sidens EGEN regnemaskine er urroert.
Laget flytter sidens egne dele ind i skaerme; alle felter
beholder deres id, saa siden regner videre praecis som foer.
Laget maaler selv den synlige hoejde af telefonens skaerm og
skruer hele trinnet ned, hvis indholdet fylder mere end pladen,
saa man aldrig skal rulle. Paa en hoej skaerm sker der intet.
LAPTOP ER UROERT. Alt herunder ligger bag 820 px.
============================================================ */
/* Laget findes kun paa telefonbredde. Staar her UDEN for
medieforespoergslen, saa det heller ikke kan vise sig, hvis
telefonen drejes og bliver bredere end 820 px. */
.sm-lag { display: none; }
@media (max-width: 820px) {
/* Siden bagved laases, mens laget er aabent. »overflow: hidden«
alene er ikke nok paa en telefon - den ruller alligevel med.
Derfor loeftes siden ud og holdes paa plads. */
body.sm-aaben {
position: fixed; left: 0; right: 0; width: 100%;
overflow: hidden; overscroll-behavior: none;
}
.sm-lag {
position: fixed; inset: 0; z-index: 1200;
height: var(--sm-h, 100dvh);
display: none; flex-direction: column;
background: #0B7352; color: #fff;
font-family: var(--font-body, inherit);
}
.sm-lag.er-vist { display: flex; }
/* ---------- Toppen ---------- */
.sm-top {
flex: none; display: flex; align-items: center; gap: 10px;
height: 54px; padding: 0 14px 0 8px;
}
.sm-ikon {
width: 44px; height: 44px; flex: none; border: 0; background: none;
color: #fff; display: flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0; border-radius: 10px;
}
.sm-ikon[hidden] { display: none; }
.sm-logo {
flex: 1; font-family: var(--font-display, inherit);
font-weight: 800; font-size: 17px; letter-spacing: .02em; color: #fff;
}
.sm-logo b { color: #7FCB9B; font-weight: 800; }
/* 10. september 2026: sidens eget logo staar nu i toppen. 21 punkters
hoejde er valgt, fordi tegningen saa har plads ved siden af begge
ikoner ogsaa paa en telefon paa 360 punkter. Samme hoejde bruges paa
alle tre vaerktoejer, saa de tre topbjaelker er ens. */
.sm-top .sm-logo svg { display: block; height: 21px; width: auto; }
.sm-top .sm-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* 10. september 2026: navnet i toppen er en vej hjem. Hoejden laanes
fra bjaelken, saa fingeren har noget at ramme, uden at bjaelken
bliver hoejere end de 54 punkter, den er nu. */
.sm-top a.sm-logo { align-self: stretch; display: flex; align-items: center;
text-decoration: none; color: #fff; -webkit-tap-highlight-color: transparent; }
.sm-top a.sm-logo:hover, .sm-top a.sm-logo:focus, .sm-top a.sm-logo:visited {
color: #fff; text-decoration: none; }
/* ---------- Trinlinjerne ---------- */
.sm-trin {
flex: none; display: flex; gap: 5px; padding: 0 16px;
align-items: center; height: 44px;
}
.sm-trin span {
flex: 1; height: 3px; border-radius: 3px;
background: rgba(255,255,255,.24);
}
.sm-trin span.er-naaet { background: #A8E7C6; }
.sm-trin span.er-her { background: #fff; }
/* 10. september 2026: stregerne er stadig tre punkter hoeje at se paa,
men de kan trykkes i en zone paa 21 punkter ned ad. Foer var der kun
tre punkter at ramme, og det kan ingen finger. Zonen gaar kun nedad,
hvor der ikke er andet at trykke paa. */
.sm-trin button {
flex: 1; height: 3px; border: 0; border-radius: 3px; cursor: pointer;
box-sizing: content-box; padding: 20px 0 21px; margin: -20px 0 -21px;
position: relative; z-index: 2;
background-color: rgba(255,255,255,.24);
background-clip: content-box;
}
.sm-trin button.er-naaet { background-color: #A8E7C6; }
.sm-trin button.er-her { background-color: #fff; }
/* Chippen med besparelsen, fra trin 2 og frem */
.sm-chip {
flex: none; margin: 0 16px 4px; align-self: flex-start;
background: rgba(168,231,198,.16); border: 1px solid rgba(168,231,198,.4);
color: #A8E7C6; font-size: 15px; font-weight: 700;
padding: 5px 12px; border-radius: 999px;
}
.sm-chip[hidden] { display: none; }
/* ---------- Midten ---------- */
/* 10. september 2026: skaermen skrumper aldrig under 92 procent mere.
Naar der trods det er for meget indhold til telefonen, ruller kroppen
i stedet. Lidt at rulle paa er langt bedre end tekst i to tredjedele
stoerrelse, som det var foer. */
.sm-krop { flex: 1; min-height: 0; padding: 0 16px; overflow-y: auto;
overflow-x: hidden; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; }
/* Er der mere under kanten, toner bunden ud, saa oejet kan se det.
Naar man har rullet helt ned, forsvinder tonen af sig selv: den
nederste flade foelger indholdet, den oeverste foelger vinduet. */
.sm-krop {
background:
linear-gradient( #0B7352, #0B7352 ) bottom center / 100% 26px no-repeat local,
linear-gradient( to bottom, rgba(11,115,82,0), rgba(11,115,82,.94) ) bottom center / 100% 26px no-repeat scroll;
}
/* Mens tastaturet er fremme, maa midten rulle, saa man kan se det
felt, man skriver i. Der skrumpes ikke imens. */
.sm-lag.sm-taster .sm-krop { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sm-skaerm { display: none; }
.sm-skaerm.er-her { display: block; }
/* Det er den INDRE plade, der skrumpes, og den tager fat i oeverste
VENSTRE hjoerne. To fejl er rettet her 7. september om aftenen:
tog skrumpningen fat i midten, blev indholdet skubbet mod hoejre
og skaaret af i kanten - og sad skrumpningen paa selve skaermen,
aendrede dens bredde sig, teksten ombroed paa ny, hoejden aendrede
sig, og saa skrumpede den igen. Det sidste var det, der fik ting
til at hoppe ud af proportioner, naar man rorte et felt. */
.sm-inder { transform-origin: top center; }
.sm-h { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 800;
line-height: 1.2; margin: 0 0 5px; color: #fff; }
.sm-lead { font-size: 16px; line-height: 1.45; color: #DFF0E6; margin: 0 0 8px; }
.sm-mrk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
font-weight: 700; color: #A8E7C6; background: rgba(168,231,198,.14);
border-radius: 999px; padding: 4px 10px; margin: 0 0 8px; }
.sm-mrk i { width: 6px; height: 6px; border-radius: 50%; background: #A8E7C6; display: block; }
/* Den gule boks i trin 3 - samme sprog som motorens fejlbeskeder */
.sm-gul {
background: #FFF6D9; border: 1px solid #E8A33A; border-left-width: 4px;
border-radius: 10px; padding: 11px 13px; margin: 0 0 12px;
color: #4A3410; font-size: 15px; line-height: 1.5; font-weight: 600;
}
/* Hvid plade, som sidens egne paneler laegges paa */
/* 10. september 2026: pladernes indvendige luft er strammet en smule,
saa hver skaerm kan staa i fuld tekststoerrelse uden at skrumpe.
Kun luft er aendret - ingen tekst er blevet mindre. */
.sm-plade { background: #fff; border-radius: 14px; padding: 13px 15px; margin: 0 0 7px; }
.sm-plade--dyb { background: #095E43; border: 1px solid rgba(168,231,198,.3); }
.sm-lbl { font-size: 15px; font-weight: 700; color: #DFF0E6; margin: 9px 0 4px; }
.sm-lbl:first-child { margin-top: 0; }
.sm-lille { font-size: 15px; line-height: 1.45; color: #DFF0E6; margin: 5px 0 0; }
.sm-lille a, .sm-link { color: #A8E7C6; text-decoration: underline; background: none;
border: 0; padding: 0; font: inherit; cursor: pointer; }
/* De fire trin listet paa indgangen */
.sm-liste { list-style: none; margin: 9px 0 0; padding: 0; }
.sm-liste li { display: flex; align-items: center; gap: 10px; padding: 6px 0;
font-size: 16px; color: #DFF0E6; border-bottom: 1px solid rgba(255,255,255,.12); }
.sm-liste li:last-child { border-bottom: 0; }
.sm-liste b { width: 21px; height: 21px; flex: none; border-radius: 50%;
background: rgba(168,231,198,.18); color: #A8E7C6;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800; }
/* ---------- Bunden ---------- */
.sm-bund { flex: none; padding: 6px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
.sm-knap {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; min-height: 44px; border: 0; border-radius: 999px; cursor: pointer;
font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px;
background: #fff; color: #0B7352;
}
.sm-knap:active { transform: translateY(-1px); }
.sm-knap--orange { background: #E8622A; color: #fff; }
.sm-knap[hidden] { display: none; }
.sm-under { text-align: center; font-size: 14px; color: #DFF0E6; margin: 7px 0 0; }
/* ------------------------------------------------------------
Sidens egne dele, naar de staar inde i laget.
Der aendres kun det, der skal til, for at de kan laeses paa
moerkegroen bund og paa en telefon. Selve indholdet er urroert.
------------------------------------------------------------ */
.sm-lag .skift-el__biler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
/* Alle tre bilknapper er hvide med groen skrift (Henrik, 7. sept.).
Den skraa, meget lyse graa flade goer, at de ses som knapper. */
.sm-lag .skift-el__bil-knap {
position: relative; overflow: hidden;
background: #fff; border: 1px solid #fff; color: #123A2C;
border-radius: 13px; padding: 10px 5px; display: flex; flex-direction: column;
align-items: center; gap: 5px; cursor: pointer;
}
.sm-lag .skift-el__bil-knap::after {
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 13px;
background: linear-gradient( 118deg, rgba(18,58,44,0) 44%, rgba(18,58,44,.07) 44% );
}
.sm-lag .skift-el__bil-knap > * { position: relative; z-index: 1; }
/* Loefter sig en lille smule ved tryk. Uden glid, saa den ikke
blinker, naar en finger hviler paa den. */
.sm-lag .skift-el__bil-knap:active { transform: translateY(-2px); }
/* Den valgte bil faar sin groenne ring INDE i den hvide flade.
Maalt: en ring udenpaa ville staa groen paa groen, 1,0 i
laesbarhed, altsaa usynlig. Inde paa det hvide maaler den 5,9. */
.sm-lag .skift-el__bil-knap.is-valgt {
background: #fff; color: #123A2C; border-color: #fff;
box-shadow: inset 0 0 0 2px #0B7352;
}
.sm-lag .skift-el__bil-navn, .sm-lag .skift-el__bil-km { color: #0B7352; }
.sm-lag .skift-el__bil-ikon { width: 100%; height: auto; max-height: 31px; object-fit: contain; }
.sm-lag .skift-el__bil-navn { font-size: 15px; font-weight: 800; line-height: 1.15; text-align: center; }
.sm-lag .skift-el__bil-km { font-size: 14px; opacity: .9; }
.sm-lag .skift-el__braendstof { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.sm-lag .skift-el__braendstof-knap {
min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3);
background: rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
}
.sm-lag .skift-el__braendstof-knap.is-valgt { background: #fff; color: #123A2C; border-color: #fff; }
.sm-lag .skift-el__literpris { margin: 0; }
.sm-lag .skift-el__literpris-label { display: block; font-size: 15px; font-weight: 700; color: #DFF0E6; margin: 0 0 5px; }
.sm-lag .skift-el__literpris-felt { display: flex; align-items: center; gap: 8px;
background: #fff; border-radius: 10px; padding: 4px 12px; }
.sm-lag .skift-el__literpris-felt input {
flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; font-weight: 700;
color: #123A2C; padding: 8px 0; }
.sm-lag .skift-el__literpris-enhed { font-size: 14px; color: #3D5C4E; font-weight: 700; }
.sm-lag .skift-el__literpris-nulstil { background: none; border: 0; color: #A8E7C6;
text-decoration: underline; font-size: 15px; padding: 5px 0 0; cursor: pointer; }
.sm-lag .skift-el__kilde { font-size: 15px; line-height: 1.5; color: #DFF0E6; margin: 6px 0 0; }
.sm-lag .skift-el__kilde strong { color: #fff; }
.sm-lag .skift-el__km-raekke { display: flex; align-items: center; gap: 12px; }
.sm-lag .skift-el__km-raekke input[type="range"] { flex: 1; min-width: 0; accent-color: #A8E7C6; }
.sm-lag .skift-el__km-raekke span { font-size: 16px; font-weight: 800; color: #fff; white-space: nowrap; }
/* Facit og tal paa hvid plade */
.sm-lag .skift-el__facit-label { font-size: 15px; color: #3D5C4E; margin: 0 0 5px; font-weight: 700; }
.sm-lag .skift-el__facit-tal { font-family: var(--font-display, inherit); font-size: 27px;
font-weight: 800; color: #123A2C; margin: 0; line-height: 1.1; }
.sm-lag .skift-el__facit-under { font-size: 14px; color: #3D5C4E; margin: 6px 0 0; }
.sm-lag .skift-el__facit-to { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #E4EDE8; }
.sm-lag .skift-el__facit-lille { font-size: 16px; font-weight: 800; color: #123A2C; margin: 0; }
.sm-lag .skift-el__facit-mikro { font-size: 14px; color: #3D5C4E; margin: 2px 0 0; }
.sm-lag .skift-el__sammenligning { display: flex; align-items: center; gap: 8px; color: #123A2C; }
.sm-lag .skift-el__sammenligning > div { flex: 1; min-width: 0; }
.sm-lag .skift-el__sammenligning svg { flex: none; color: #7C9B8B; }
.sm-lag .skift-el__sm-label { font-size: 14px; color: #3D5C4E; margin: 0 0 2px; font-weight: 700; }
.sm-lag .skift-el__sm-tal { font-family: var(--font-display, inherit); font-size: 18px;
font-weight: 800; color: #123A2C; margin: 0; }
.sm-lag .skift-el__sm-tal--groen { color: #1F7A55; }
.sm-lag .skift-el__sm-forklaring { font-size: 14px; color: #3D5C4E; margin: 2px 0 0; }
.sm-lag .skift-el__live-badge { font-size: 14px; font-weight: 800; letter-spacing: .06em;
background: #E4F4EA; color: #1F7A55; border-radius: 4px; padding: 1px 5px; }
.sm-lag .skift-el__spar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #E4EDE8; }
.sm-lag .skift-el__spar-tal { font-family: var(--font-display, inherit); font-size: 22px;
font-weight: 800; color: #1F7A55; margin: 0; line-height: 1.1; }
.sm-lag .skift-el__bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; margin: 6px 0 0; }
.sm-lag .skift-el__total { display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid #E4EDE8; color: #123A2C; }
.sm-lag .skift-el__total p:first-child { font-size: 15px; color: #3D5C4E; margin: 0; font-weight: 700; }
.sm-lag .skift-el__total p:last-child { font-family: var(--font-display, inherit);
font-size: 20px; font-weight: 800; color: #123A2C; margin: 0; }
/* Ladeberegnerens felter, naar de staar i trin 3 og 4 */
.sm-lag .lbr__felt { margin: 0 0 10px; }
.sm-lag .lbr__felt:last-child { margin-bottom: 0; }
.sm-lag .lbr__felt label { display: block; font-size: 15px; font-weight: 700;
color: #DFF0E6; margin: 0 0 5px; }
/* Fortrykt linje: lys nok til at ses som en hjaelp, moerk nok til at
kunne laeses. Maalt 4,7 paa hvid; #8A9E93 maalte 2,8 og var for lys. */
.sm-lag .lbr__felt input::placeholder { color: #5F7A6D; font-weight: 600; opacity: 1; }
.sm-lag .lbr__felt input, .sm-lag .lbr__felt select {
width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 12px;
border: 0; border-radius: 10px; background: #fff; color: #123A2C;
font-size: 16px; font-weight: 700; }
.sm-lag .lbr__ud { background: #fff; border-radius: 14px; padding: 13px 14px; margin: 0; min-height: 0; }
.sm-lag .lbr__tal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; }
.sm-lag .lbr__tal > div { min-width: 0; }
.sm-lag .lbr__num { display: block; font-family: var(--font-display, inherit);
font-size: 17px; font-weight: 800; color: #123A2C; line-height: 1.15; }
.sm-lag .lbr__lbl { display: block; font-size: 14px; color: #3D5C4E; margin: 1px 0 0; }
.sm-lag .lbr__linje { font-size: 16px; color: #123A2C; margin: 8px 0 0; font-weight: 700;
padding: 8px 0 0; border-top: 1px solid #E4EDE8; }
.sm-lag .lbr__kilde { font-size: 14px; color: #3D5C4E; margin: 7px 0 0; line-height: 1.45; }
.sm-lag .lbr h3, .sm-lag .lbr__hj { display: none; }
.sm-lag .lbr { background: none; border: 0; padding: 0; margin: 0; }
/* Anbefalingen og det sidste */
.sm-lag .skift-el__anbefaling-maerke { display: inline-block; background: #0B3D2B;
border: 1px solid #E8622A; color: #fff; font-size: 14px; font-weight: 800;
letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }
.sm-lag .skift-el__anbefaling-titel { font-family: var(--font-display, inherit);
font-size: 17px; font-weight: 800; color: #123A2C; margin: 8px 0 6px; line-height: 1.25; }
.sm-lag .skift-el__anbefaling-loader { font-size: 15px; color: #3D5C4E; margin: 0; }
.sm-lag .skift-el__agent-titel { font-family: var(--font-display, inherit); font-size: 16px;
font-weight: 800; color: #A8E7C6; margin: 0 0 4px; }
.sm-lag .skift-el__agent-tekst { font-size: 14px; line-height: 1.5; color: #DFF0E6; margin: 0 0 12px; }
.sm-lag .skift-el__agent-label { display: block; font-size: 15px; font-weight: 700;
color: #DFF0E6; margin: 0 0 5px; }
.sm-lag .skift-el__agent-raekke { margin: 0 0 9px; }
.sm-lag .skift-el__agent-raekke input, .sm-lag .skift-el__agent-raekke select {
width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 12px; border: 0;
border-radius: 10px; background: #fff; color: #123A2C; font-size: 16px; }
.sm-lag .skift-el__agent-samtykke { display: flex; gap: 8px; align-items: flex-start;
font-size: 14px; line-height: 1.45; color: #DFF0E6; margin: 0 0 12px; }
.sm-lag .skift-el__agent-samtykke input { margin-top: 2px; flex: none; }
.sm-lag .skift-el__agent-cta { display: flex; align-items: center; justify-content: center;
gap: 8px; width: 100%; min-height: 46px; border: 0; border-radius: 999px;
background: #E8622A; color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; }
.sm-lag .skift-el__agent-status { font-size: 15px; margin: 8px 0 0; color: #fff; }
/* Del mine tal staar over »Kopier link«, som en rigtig handling. */
.sm-lag .sm-knap--del { min-height: 44px; font-size: 16px; margin: 0 0 8px; }
.sm-lag .skift-el__link-knap { width: 100%; min-height: 44px; border-radius: 999px;
background: none; border: 1px solid rgba(168,231,198,.5); color: #A8E7C6;
font-weight: 700; font-size: 16px; cursor: pointer; }
.sm-skil { display: flex; align-items: center; gap: 10px; margin: 12px 0;
font-size: 15px; color: #DFF0E6; }
.sm-skil::before, .sm-skil::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.2); }
/* ------------------------------------------------------------
REGLEN FOR FARVERNE PAA SKAERMENE (Henrik, 7. sept., aften)
Hvidt = her taster du selv noget.
Mint = her staar dit svar.
Det goer, at oejet finder facit uden at lede.
Maalt: moerk tekst paa mint 8,9 - de smaa etiketter er sat til
#3D5C4E og maaler 5,3. Ingen tekst paa mint under 4,5.
------------------------------------------------------------ */
.sm-plade--svar { background: #A8E7C6; }
.sm-lag .lbr__ud.sm-plade--svar { background: #A8E7C6; }
.sm-plade--svar .skift-el__facit-to,
.sm-plade--svar .skift-el__spar,
.sm-plade--svar .skift-el__total,
.sm-plade--svar .lbr__linje { border-top-color: rgba(18,58,44,.16); }
.sm-plade--svar .skift-el__live-badge { background: #E8F8EE; color: #16543B; }
.sm-plade--svar .skift-el__sammenligning svg { color: #3D5C4E; }
.sm-plade--svar .skift-el__sm-tal--groen { color: #10553A; }
.sm-plade--svar .skift-el__spar-tal { color: #10553A; }
/* ---------- Skyderen til kilometer ---------- */
.sm-lag .skift-el__km-raekke { gap: 14px; }
.sm-lag .skift-el__km-raekke input[type="range"] {
-webkit-appearance: none; appearance: none;
height: 30px; background: none; margin: 0;
}
.sm-lag .skift-el__km-raekke input[type="range"]::-webkit-slider-runnable-track {
height: 8px; border-radius: 999px; background: rgba(255,255,255,.28);
}
.sm-lag .skift-el__km-raekke input[type="range"]::-moz-range-track {
height: 8px; border-radius: 999px; background: rgba(255,255,255,.28);
}
.sm-lag .skift-el__km-raekke input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
background: #fff; border: 3px solid #0B7352; box-sizing: border-box;
}
.sm-lag .skift-el__km-raekke input[type="range"]::-moz-range-thumb {
width: 28px; height: 28px; border-radius: 50%;
background: #fff; border: 3px solid #0B7352; box-sizing: border-box;
}
/* ---------- Den lille info-knap og pladen bag den ---------- */
.sm-hjaelp { display: flex; align-items: flex-start; gap: 9px; margin: 6px 0 0; }
.sm-hjaelp p { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45;
color: #DFF0E6; margin: 0; }
.sm-i {
flex: none; width: 44px; height: 44px; margin-top: -3px;
border-radius: 50%; border: 1px solid rgba(255,255,255,.45);
background: rgba(255,255,255,.1); color: #fff;
font-family: var(--font-display, inherit); font-weight: 800; font-size: 15px;
line-height: 1; cursor: pointer; padding: 0;
}
.sm-info {
position: absolute; inset: 0; z-index: 5; display: none;
align-items: center; justify-content: center; padding: 18px;
background: rgba(6,49,35,.55); backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
.sm-info.er-vist { display: flex; }
.sm-info__kort {
position: relative; width: 100%; max-height: 100%; overflow-y: auto;
background: rgba(9,94,67,.96); border: 1px solid rgba(168,231,198,.45);
border-radius: 16px; padding: 18px 18px 20px; color: #fff;
}
.sm-info__luk {
position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
border-radius: 50%; border: 0; background: #fff; color: #0B3D2B;
font-size: 16px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0;
}
.sm-info__kort h3 { font-family: var(--font-display, inherit); font-size: 17px;
font-weight: 800; margin: 0 34px 8px 0; color: #fff; }
.sm-info__kort p, .sm-info__kort li { font-size: 14px; line-height: 1.55;
color: #DFF0E6; margin: 0 0 8px; }
.sm-info__kort p:last-child { margin-bottom: 0; }
.sm-info__kort strong { color: #fff; }
/* Beroeringsskaerme: ingen mus-over og ingen glidende overgange paa
noget, en finger kan hvile paa. Laeren fra 6. september.
Skrevet UDEN tvangsregel: filen indlaeses efter sidens egen, saa
den vinder ved samme vaegt. Tvangsreglerne skal blive paa 28. */
@media (hover: none) {
.sm-lag button, .sm-lag a, .sm-lag input, .sm-lag select,
.sm-lag .skift-el__bil-knap, .sm-lag .skift-el__braendstof-knap,
.sm-lag .sm-knap, .sm-lag .sm-ikon { transition: none; }
.sm-lag button:hover, .sm-lag a:hover,
.sm-lag .skift-el__bil-knap:hover, .sm-lag .skift-el__braendstof-knap:hover {
transform: none; box-shadow: none;
}
}
}
/* ------------------------------------------------------------
DEL OG KOPIER SOM TO SMAA TEKSTER, OG FELTET DER FORESLAAR
LADEAGENTEN. Henriks beslutning 8. september 2026.
De to store knapper aad pladsen paa anbefalingsskaermen. De
staar nu som to smaa tekster med ikon - men trykfladen er
stadig 44 punkter hoej, saa fingeren har plads.
Feltet nedenfor er sidens eget Ladeagent-felt fra menuen,
som Henrik har godkendt: moerk bund med lysegroen kant.
Maalt: hvid paa #043524 = 13,6 - lys mint paa #043524 =
11,5 - kanten mod skaermens groenne = 4,2 - de smaa
tekster paa skaermens groenne = 4,9. Alle over kravet.
------------------------------------------------------------ */
.sm-del { display: flex; align-items: center; gap: 2px; margin: 14px 0 0; }
.sm-del__knap {
width: auto; min-height: 44px; padding: 0 10px; border: 0; background: none;
border-radius: 10px; color: #DFF0E6; font-family: var(--font-body, inherit);
font-weight: 700; font-size: 15px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.sm-lag .sm-del .skift-el__link-knap { width: auto; min-height: 44px; border: 0; }
/* (i)-knappen ser ud som alle andre steder, men faar en
usynlig trykflade paa 44 punkter. Maalt: cirklen selv er 30,
og kravet er 32. */
.sm-del .sm-i { position: relative; }
.sm-del .sm-i::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.sm-lag .sm-del + .skift-el__agent-status { margin: 0 0 10px; font-size: 15px; }
.sm-cta {
display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
background: #043524; color: #fff; border: 2px solid #E8622A; border-radius: 14px;
padding: 11px 13px; cursor: pointer; font-family: var(--font-body, inherit);
}
.sm-cta:active { transform: translateY(-1px); }
a.sm-cta { box-sizing: border-box; text-decoration: none; }
/* Knappen til ladeboksfinderen er den SAMME som i menuen
(Henrik, 9. september): fyldt orange pille med lyn og hvid
skrift. Vaerdierne er hentet ordret fra sidens egen regel for
.site-header.is-open .header-cta.btn-primary. Ingen ny farve. */
.sm-find {
display: flex; align-items: center; justify-content: center; gap: 8px;
box-sizing: border-box; width: 100%; margin: 16px 0 0;
background: #E8622A; border: 0; border-radius: 999px; color: #fff;
padding: 15px 16px; text-decoration: none; line-height: 1.2;
font-family: var(--font-body, inherit); font-size: 16px; font-weight: 700;
}
.sm-find:active { transform: translateY(-1px); }
.sm-find__lyn {
width: 15px; height: 15px; flex: none; display: inline-block; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* To felter i traek. Det foerste baerer, det andet staar roligere,
saa de ikke raaber lige hoejt. Kun kantens farve er forskellig;
ingen af de godkendte farver er lavet om. 9. september. */
.sm-cta--rolig { border-color: rgba(168,231,198,.42); }
.sm-plade + .sm-cta { margin: 15px 0 0; }
.sm-find + .sm-cta { margin: 11px 0 0; }
.sm-cta + .sm-cta { margin: 10px 0 0; }
.sm-cta__ik {
flex: none; width: 34px; height: 34px; border-radius: 10px;
background: #A8E7C6; color: #043524;
display: flex; align-items: center; justify-content: center;
}
.sm-cta__b { flex: 1; min-width: 0; }
.sm-cta__h {
display: block; font-family: var(--font-display, inherit);
font-size: 16px; font-weight: 800; color: #fff; line-height: 1.2;
}
.sm-cta__t {
display: block; font-size: 14px; line-height: 1.45; color: #DFF0E6; margin: 3px 0 0;
}
.sm-cta__pil { flex: none; color: #A8E7C6; font-size: 17px; font-weight: 800; }
/* Den dobbelte overskrift. Klassen staar to gange i vaelgeren,
saa den vinder paa vaegt og ikke paa raekkefoelge - laeren fra
nummerpladefeltet 8. september. Ingen tvangsregel. */
.sm-lag .sm-skjult.sm-skjult { display: none; }
/* ------------------------------------------------------------
DET SKAEVE KORT. Henriks beslutning 8. september 2026: samme
greb som paa forsiden - et lille kort, der ligger en anelse
skaevt som et klistermaerke og viser, hvad man faar.
Maalt paa hvidt: den moerke skrift 12,6 - den daempede 4,7 -
den groenne overskrift 5,9 - prisen 5,3. Alle over kravet.
------------------------------------------------------------ */
.sm-kort {
width: 88%; max-width: 302px; margin: 26px auto 0; box-sizing: border-box;
background: #fff; border-radius: 15px; padding: 13px 14px; color: #123A2C;
box-shadow: 0 20px 44px rgba(0,0,0,.34);
transform: rotate(-1.6deg);
}
.sm-kort[hidden] { display: none; }
.sm-kort__top {
display: flex; align-items: center; gap: 9px;
padding: 0 0 9px; border-bottom: 1px solid #E4EDE8;
}
.sm-kort__av {
width: 30px; height: 30px; flex: none; border-radius: 9px;
background: #0B7352; color: #fff; font-weight: 800; font-size: 15px;
display: flex; align-items: center; justify-content: center;
}
.sm-kort__fra { min-width: 0; }
.sm-kort__fra b { display: block; font-size: 15px; font-weight: 800; color: #123A2C; line-height: 1.2; }
.sm-kort__fra span { display: block; font-size: 14px; color: #5F7A6D; }
.sm-kort__emne {
font-family: var(--font-display, inherit); font-size: 16px; font-weight: 800;
color: #0B7352; margin: 10px 0 9px; line-height: 1.25;
}
.sm-kort__raekke {
display: flex; align-items: center; gap: 9px;
border: 1px solid #E4EDE8; border-radius: 10px; padding: 8px 9px;
}
.sm-kort__bil {
width: 34px; height: 34px; flex: none; border-radius: 8px; overflow: hidden;
background: #EAF7F0; display: flex; align-items: center; justify-content: center;
}
.sm-kort__bil img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sm-kort__b { min-width: 0; }
.sm-kort__navn { display: block; font-size: 15px; font-weight: 800; color: #123A2C; line-height: 1.25; }
.sm-kort__pris { display: block; font-size: 15px; font-weight: 800; color: #1F7A55; margin: 3px 0 0; }
/* ------------------------------------------------------------
Dit regnestykke - ladeboksens pris (8. september 2026)
Skyderen LAANER sidens egen skyder (.skift-el__km-raekke),
saa der ikke er to at vedligeholde. Kun afstandene er nye.
Tallet, svaret og kWh-linjen laaner ligeledes sidens egne
facit-stilarter, som allerede er maalt paa hvid plade.
------------------------------------------------------------ */
.sm-boks__tal { margin: 2px 0 0; }
.sm-boks__skyder { margin: 11px 0 2px; }
.sm-boks__to { margin: 12px 0 0; }
.sm-lag .sm-boks__forbehold.sm-boks__forbehold { margin: 15px 0 0; }
.sm-lag .sm-boks__hjaelp.sm-boks__hjaelp { margin: 6px 0 0; }
/* Forklaringen under pladen paa trin 4: fremme, men mindre end
resten, saa den ikke slaas med skyderen om opmaerksomheden.
Farven er lagets egen lyse tone, ikke en ny. */
/* Forklaringen paa trin 4 staar i lagets egen dybe plade, saa den
fylder som et felt og ikke som en fodnote. Farverne er sidens
egne; der er ikke fundet nye. */
.sm-forklar { margin: 16px 0 0; }
.sm-forklar p { margin: 0 0 9px; font-size: 15px; line-height: 1.5; color: #DFF0E6; }
.sm-forklar p:last-child { margin-bottom: 0; }
/* Maerket over overskriften paa resultatskaermen. Mintgroen paa
den moerkegroenne bund, samme farve som chippen ovenfor. */
.sm-kicker { font-size: 14px; font-weight: 800; letter-spacing: .09em;
text-transform: uppercase; color: #A8E7C6; margin: 0 0 3px; }
.sm-kwh { margin: 9px 0 0; }
/* ------------------------------------------------------------
SLUTSKAERMEN (Henrik, 9. september)
De to felter er menuens EGNE felter, brugt som de er. Der er
ikke lavet nye farver eller nye stoerrelser til dem; kun
afstandene omkring dem er sat her, plus lidt stoerre skrift
paa denne ene skaerm, saa Del ikke staar og svaever.
------------------------------------------------------------ */
.sm-plade + .bilo-cta__f { margin: 13px 0 0; }
.bilo-cta__f + .bilo-cta__f { margin: 14px 0 0; }
.sm-slut .skift-el__facit-label { font-size: 14px; }
.sm-slut .skift-el__facit-tal { font-size: 30px; }
.sm-slut .skift-el__facit-lille { font-size: 18px; }
.sm-slut .skift-el__facit-mikro { font-size: 15px; }
.sm-slut .sm-boks__to { margin: 15px 0 0; padding: 13px 0 0; }
.sm-slut .sm-del__knap { font-size: 16px; }
/* Del skal staa i bunden af slutskaermen, men den skal blive INDE
i den plade der skrumpes. Maalt 9. september: laa den udenfor,
faldt den 158 punkter ned under kanten paa en lav telefon.
Loesningen: pladen er mindst saa hoej som skaermen, og Del
skubbes ned i bunden af den. Er indholdet hoejere end skaermen,
vokser pladen som foer, og skrumpningen maaler det samme. */
.sm-skaerm.er-her { height: 100%; }
.sm-slut .sm-inder { min-height: 100%; box-sizing: border-box;
display: flex; flex-direction: column; }
.sm-slut .sm-del { margin: auto 0 0; }
/* ============================================================
LADEAGENTEN I LAGET (8. september 2026)
Ladeagentens side bruger det SAMME stilark som Skift til
elbil, saa de to ikke kan skride fra hinanden. Her staar kun
det, der skal skifte, fordi sidens dele nu ligger paa den
moerkegroenne bund i stedet for paa hvidt.
Klassen staar to gange i vaelgeren, saa reglerne vinder paa
vaegt og ikke paa raekkefoelge - laeren fra nummerpladefeltet
samme dag. Ingen tvangsregler.
Maalt paa #0B7352: den lyse tekst 4,9 - den lyse mint 4,2 (kun
til kanter, aldrig til tekst) - fejllinjen 4,7 - hvid 5,9.
============================================================ */
/* Linjen under prikkerne, som i udkastet: hvor er jeg, og hvor
laenge tager det. Farverne er lagets egne. */
.sm-trinl { flex: none; display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 0 16px 8px; }
.sm-trinl__hvor { font-size: 14px; color: #DFF0E6; }
.sm-trinl__tid { flex: none; font-size: 14px; font-weight: 700; color: #fff;
background: rgba(255,255,255,.14); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
/* De fire svarknapper stod spredt i bredden og lignede ikke et
valg. De staar nu to og to, som i udkastet. */
.sm-lag.la #c1 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.sm-lag.la #c1 .chip { flex: 1 1 44%; min-height: 46px; border-radius: 999px;
font-size: 16px; font-weight: 700; }
/* Den valgte knap var moerkegroen paa moerkegroen og kunne ikke
ses. Den er nu mintfyldt med moerk skrift, som er lagets egne
to farver. Maalt nedenfor. */
.sm-lag.la #c1 .chip.on { background: #A8E7C6; color: #043524; border-color: #A8E7C6; }
/* ============================================================
LADEAGENTENS HJUL OG VALG (9. september 2026)
Hjulet er det samme som paa Find din ladeboks, men i lagets
egne farver, fordi det staar paa moerkegroen bund i stedet for
paa hvidt. Tre raekker a 34 punkter, den valgte paa et baand.
============================================================ */
.sm-hjul { position: relative; height: 102px; border-radius: 14px; overflow: hidden;
background: #095E43; border: 1px solid rgba(168,231,198,.3); margin: 0 0 10px; }
.sm-hjul::before, .sm-hjul::after { content: ""; position: absolute; left: 0; right: 0;
height: 34px; pointer-events: none; z-index: 2; }
.sm-hjul::before { top: 0; background: linear-gradient(#095E43, rgba(9,94,67,.25)); }
.sm-hjul::after { bottom: 0; background: linear-gradient(rgba(9,94,67,.25), #095E43); }
.sm-hjul__baand { position: absolute; left: 5px; right: 5px; top: 34px; height: 34px;
border-radius: 10px; background: rgba(168,231,198,.18); pointer-events: none; z-index: 0; }
.sm-hjul__rul { position: relative; z-index: 1; height: 100%; overflow-y: auto;
scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain; padding: 34px 0; box-sizing: border-box; }
.sm-hjul__rul::-webkit-scrollbar { display: none; }
.sm-hjul__rul button { display: flex; align-items: center; justify-content: center; width: 100%;
height: 34px; scroll-snap-align: center; border: 0; background: none; cursor: pointer;
font-family: inherit; font-weight: 700; font-size: 15px; color: #BCD9C8; padding: 0 8px;
-webkit-tap-highlight-color: transparent; }
.sm-hjul__rul button.er-valgt { color: #fff; font-size: 16px; }
.sm-hjul__link { display: block; font-size: 15px; color: #DFF0E6; text-decoration: none;
margin: 12px 0 0; }
.sm-hjul__link b { color: #A8E7C6; }
/* Valgene paa anden skaerm. */
/* 10. september 2026: luften mellem raekkerne er strammet fra 11 til 8
punkter, og stregen fra 16/14 til 10/10. Det giver knap 30 punkter
tilbage paa den taetteste skaerm, uden at noget bliver fjernet. */
.sm-valg { margin: 0 0 8px; }
.sm-valg__t { font-size: 15px; font-weight: 700; color: #DFF0E6; margin: 0 0 5px; }
.sm-valg__r { display: flex; flex-wrap: wrap; gap: 8px; }
/* Henrik, 10. september 2026: alle knapper er mintgroenne, og et
valg goer knappen moerkegroen. Saa kan man se med det samme,
hvad man har valgt, og alle knapper kan taendes og slukkes.
Maalt: moerk skrift paa mint 9,68 - hvid skrift paa moerkegroen 14,1. */
.sm-pil { flex: 1 1 auto; min-height: 44px; padding: 0 14px; border-radius: 999px;
border: 1px solid #A8E7C6; background: #A8E7C6; color: #043524;
font-family: var(--font-body, inherit); font-weight: 700; font-size: 14px; cursor: pointer;
-webkit-tap-highlight-color: transparent; transition: background .12s ease, color .12s ease; }
.sm-pil.er-valgt { background: #043524; border-color: #043524; color: #fff; }
/* Budgettet. Skyderen laaner sidens egen, som paa Skift til elbil. */
.sm-budget { margin: 0 0 11px; }
.sm-budget__tal { font-family: var(--font-display, inherit); font-size: 19px; font-weight: 800;
color: #fff; margin: 2px 0 0; line-height: 1.1; }
.sm-budget__s { margin: 8px 0 0; }
.sm-budget__note { font-size: 14px; line-height: 1.45; color: #DFF0E6; margin: 10px 0 0; }
.sm-elek { margin: 0 0 7px; }
/* En tynd streg, hvor et emne slutter og et andet begynder. */
.sm-skel { height: 1px; background: rgba(168,231,198,.22); margin: 10px 0 10px; }
.sm-elek__t { font-size: 15px; line-height: 1.5; color: #DFF0E6; margin: 6px 0 0; }
.sm-lag.la .q__hint { color: #DFF0E6; font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.sm-lag.la .q__hint b { color: #fff; }
/* »Brug min lokation« stod i en groen, der ikke kunne ses paa den
groenne bund - maalt 1,1. Den er nu en aaben knap med mintkant. */
.sm-lag.la .loc {
background: none; border: 1px solid rgba(168,231,198,.55); color: #DFF0E6;
min-height: 44px; border-radius: 999px; font-size: 14px;
}
.sm-lag.la .loc:hover { background: none; }
/* Sidens egen skjuleregel taber til lagets egne regler, fordi de
vejer mere. Maalt 9. september: nummerpladen blev staaende, selv
naar brugeren svarede, at bilen foerst kommer senere. Klassen
staar to gange, saa reglen vinder paa vaegt. Ingen tvangsregler. */
.sm-lag.la .hide.hide { display: none; }
/* Feltraekkerne fylder bredden paa telefonen. */
.sm-lag.la .row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.sm-lag.la .plate { flex: 1 1 100%; }
.sm-lag.la .adrboks { flex: 1 1 100%; }
.sm-lag.la .loc { flex: 1 1 100%; justify-content: center; }
/* Fejllinjen stod i en roed, der maalte 1,1 mod den groenne bund. */
.sm-lag.la .opslagfejl { color: #FFE1D6; font-size: 14px; margin: 0 0 12px; }
/* Elaftale-feltet faar samme dybe plade som resten af laget. */
.sm-lag.la .el {
background: #095E43; border: 1px solid rgba(168,231,198,.3);
border-radius: 14px; padding: 13px 14px; margin: 0 0 12px;
}
.sm-lag.la .el__t b { color: #fff; font-size: 15px; }
.sm-lag.la .el__t span { color: #DFF0E6; font-size: 15px; line-height: 1.45; }
/* Den lille linje under mailen. */
.sm-lag.la .fine { color: #DFF0E6; font-size: 14px; margin: 10px 0 0; }
.sm-lag.la .fine a { color: #A8E7C6; }
/* Tilmeldingsknappen fylder bredden, som i Skift til elbil. */
.sm-lag.la .go { width: 100%; min-height: 44px; }
.sm-lag.la .mail { display: flex; flex-direction: column; gap: 10px; }
.sm-lag.la .mail input { width: 100%; box-sizing: border-box; min-height: 46px; font-size: 16px; }
/* Tryghedslinjerne staar paa hvidt, hvor tvivlen er. */
.sm-lag.la .trust { margin: 12px 0 0; }
/* Knappen kan ikke trykkes, foer spoergsmaalet er besvaret. */
.sm-lag .sm-knap:disabled {
background: rgba(255,255,255,.18); color: #BFE0D0; cursor: default;
}
/* ============================================================
EN TEKSTSTOERRELSE - 10. september 2026
Henriks krav: al almindelig tekst i Skift til elbil og i
Ladeagenten skal have samme stoerrelse og samme skrift som
linjen 'Vi regner det i fire trin ...' - altsaa 14,5 punkter i
broedskriften. Overskrifter, knapper, store tal og de smaa
maerkater beholder deres egne stoerrelser; de er ikke
almindelig tekst. Blokken staar sidst, saa den vinder over de
gamle stoerrelser uden en eneste tvangsregel.
============================================================ */
@media (max-width: 820px) {
.sm-lag .sm-lead,
.sm-lag .sm-valg__t,
.sm-lag .sm-pil,
.sm-lag .sm-elek__t,
.sm-lag .sm-hjaelp p,
.sm-lag .sm-forklar p,
.sm-lag .sm-lbl,
.sm-lag .sm-lille,
.sm-lag .sm-skil,
.sm-lag .sm-chip,
.sm-lag .sm-gul,
.sm-lag .sm-hjul__link,
.sm-lag .sm-under,
.sm-lag .sm-budget__note,
.sm-lag .sm-cta__t,
.sm-lag .sm-liste li,
.sm-lag .sm-trinl__hvor,
.sm-lag .lbr__felt label,
.sm-lag .lbr__lbl,
.sm-lag .lbr__kilde,
.sm-lag .lbr__linje,
.sm-lag .skift-el__kilde,
.sm-lag .skift-el__literpris-label,
.sm-lag .skift-el__literpris-enhed,
.sm-lag .skift-el__literpris-nulstil,
.sm-lag .skift-el__facit-label,
.sm-lag .skift-el__facit-under,
.sm-lag .skift-el__facit-mikro,
.sm-lag .skift-el__sm-label,
.sm-lag .skift-el__sm-forklaring,
.sm-lag .skift-el__total p:first-child,
.sm-lag .skift-el__agent-label,
.sm-lag .skift-el__agent-tekst,
.sm-lag .skift-el__agent-samtykke,
.sm-lag .skift-el__bil-navn,
.sm-lag .skift-el__bil-km,
.sm-lag.la .fine,
.sm-lag.la .loc,
.sm-lag.la .opslagfejl,
.sm-lag.la .q__hint,
.sm-lag.la .el__t span,
.sm-lag .sm-info__kort p,
.sm-lag .sm-info__kort li {
font-family: var(--font-body, inherit);
font-size: 16px;
line-height: 1.45;
}
}
/* ENS KNAPSKRIFT - 10. september 2026: sidens egen tilmeldingsknap
inde i laget skrives med samme skrift og stoerrelse som lagets egne
knapper, saa de tre vaerktoejer ser ens ud. */
@media (max-width: 820px) {
.sm-lag.la .go,
.sm-lag .skift-el__agent-cta {
font-family: var(--font-display, inherit);
font-size: 15px;
font-weight: 800;
}
}
/* ============================================================
BRAENDSTOFKNAPPEN - 10. september 2026, Henriks tegning
To rektangler ved siden af hinanden som foer. Navnet fylder tre
fjerdedele, prisen den sidste fjerdedel i mintgroent. Er knappen
valgt, bliver hele fladen moerkegroen med hvid skrift, og en tynd
lys streg holder de to dele adskilt, saa begge knapper er bygget
ens uanset om de er valgt.
Maalt paa 390 punkters bredde: knap 173x44, prisdel 52 mod tallets
38. Laesbarhed 12,6 / 9,68 / 13,64 / 13,64 - kravet er 4,5.
============================================================ */
@media (max-width: 820px) {
.sm-lag .sm-skjul { display: none; }
.sm-lag .skift-el__braendstof-knap {
display: flex; align-items: stretch; padding: 0; overflow: hidden;
min-height: 44px; border: 0; background: #fff; border-radius: 10px;
font-family: var(--font-body, inherit);
}
.sm-lag .skift-el__braendstof-knap .sm-bnavn {
flex: 3; display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 700; color: #123A2C;
}
.sm-lag .skift-el__braendstof-knap .sm-bpris {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 0 6px; white-space: nowrap;
background: #A8E7C6; color: #043524;
font-size: 16px; font-weight: 800;
}
.sm-lag .skift-el__braendstof-knap.is-valgt { background: #043524; border-color: #043524; }
.sm-lag .skift-el__braendstof-knap.is-valgt .sm-bnavn { color: #fff; }
.sm-lag .skift-el__braendstof-knap.is-valgt .sm-bpris {
background: #043524; color: #fff;
box-shadow: inset 1px 0 0 rgba(255,255,255,.35);
}
}
/* ============================================================
HENRIKS RETTELSER 11. SEPTEMBER 2026
============================================================ */
@media (max-width: 820px) {
/* Bilerne paa indgangen: den valgte loefter sig og bliver liggende
loeftet. Foer sprang et tryk direkte videre til naeste trin, og saa
naaede man aldrig at se, hvad man havde valgt. */
.sm-lag .skift-el__bil-knap {
transform: translateY(0);
transition: transform .16s ease, box-shadow .16s ease;
}
.sm-lag .skift-el__bil-knap.is-valgt {
transform: translateY(-5px);
box-shadow: 0 6px 14px rgba(0,0,0,.22), inset 0 0 0 2px #0B7352;
}
.sm-lag .skift-el__bil-knap:active { transform: translateY(-2px); }
.sm-lag .skift-el__bil-knap.is-valgt:active { transform: translateY(-5px); }
/* Braendstofknapperne: begge hvide med en let diagonal skravering, saa
de traeder frem som knapper. Den valgte bliver moerkegroen i hele
fladen - baade navn og pris - med hvid skrift. */
/* Samme skygning som paa bilknapperne paa indgangen: een diagonal
deling med en meget let graa vask paa den ene halvdel. Det er den,
Henrik pegede paa - ikke striber. */
.sm-lag .skift-el__braendstof-knap {
position: relative;
background-color: #fff;
background-image: none;
transition: background-color .14s ease, color .14s ease;
}
.sm-lag .skift-el__braendstof-knap::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
border-radius: 10px;
background: linear-gradient( 118deg, rgba(18,58,44,0) 44%, rgba(18,58,44,.07) 44% );
}
.sm-lag .skift-el__braendstof-knap > * { position: relative; z-index: 1; }
.sm-lag .skift-el__braendstof-knap .sm-bpris {
background: #A8E7C6;
color: #043524;
box-shadow: none;
}
/* Skraveringen hoerer til den hvide knap, hvor den skal sige 'her kan
trykkes'. Er knappen valgt, siger den moerkegroenne flade det selv,
og skraveringen ville kun stoeje. */
.sm-lag .skift-el__braendstof-knap.is-valgt { background-color: #043524; }
.sm-lag .skift-el__braendstof-knap.is-valgt::after {
background: linear-gradient( 118deg, rgba(255,255,255,0) 44%, rgba(255,255,255,.05) 44% );
}
.sm-lag .skift-el__braendstof-knap.is-valgt .sm-bnavn { color: #fff; }
.sm-lag .skift-el__braendstof-knap.is-valgt .sm-bpris {
background: none; color: #fff;
box-shadow: inset 1px 0 0 rgba(255,255,255,.35);
}
/* Linjen under Pr. tankfuld braekkede over paa to linjer, fordi den
laa i en smal soejle. Den faar nu hele bredden under de to tal. */
.sm-lag .skift-el__facit-to { position: relative; }
.sm-lag .skift-el__facit-to .skift-el__facit-mikro {
grid-column: 1 / -1; white-space: nowrap;
}
/* Skyderens felt er strammet lidt i hoejden, saa forklaringen kan staa
paa samme skaerm. */
.sm-lag .sm-budget .skift-el__km-raekke,
.sm-lag .sm-plade .skift-el__km-raekke { min-height: 0; }
}
/* Noten under skyderen: samme skrift, en anelse dus, saa den laeses som
en note og ikke som en overskrift. */
@media (max-width: 820px) {
.sm-lag .sm-note {
font-family: var(--font-body, inherit);
font-size: 16px; line-height: 1.45; color: #BFE0D0;
margin: 0 0 8px;
}
}
/* Begge braendstofknapper staar hvide, til man selv har trykket.
Sidens egen kode saetter Benzin som valgt fra start, saa der er noget
at regne paa - men foer foerste tryk maa oejet ikke se et valg. */
@media (max-width: 820px) {
.sm-lag .skift-el__braendstof.sm-uroert .skift-el__braendstof-knap.is-valgt {
background-color: #fff;
}
.sm-lag .skift-el__braendstof.sm-uroert .skift-el__braendstof-knap.is-valgt::after {
background: linear-gradient( 118deg, rgba(18,58,44,0) 44%, rgba(18,58,44,.07) 44% );
}
.sm-lag .skift-el__braendstof.sm-uroert .skift-el__braendstof-knap.is-valgt .sm-bnavn {
color: #123A2C;
}
.sm-lag .skift-el__braendstof.sm-uroert .skift-el__braendstof-knap.is-valgt .sm-bpris {
background: #A8E7C6; color: #043524; box-shadow: none;
}
}
/* ============================================================
FLUEBEN OG OVERSKRIFT MED (i) - 11. september 2026
============================================================ */
@media (max-width: 820px) {
/* Hele raekken kan trykkes, ikke kun firkanten. 44 punkter hoej, saa
fingeren har noget at ramme. */
.sm-lag .sm-flueben {
display: flex; align-items: center; gap: 12px; width: 100%;
min-height: 44px; padding: 4px 0; margin: 0;
border: 0; background: none; cursor: pointer; text-align: left;
-webkit-tap-highlight-color: transparent;
}
.sm-lag .sm-flueben__f {
flex: none; width: 24px; height: 24px; border-radius: 6px;
border: 2px solid #A8E7C6; background: transparent;
display: flex; align-items: center; justify-content: center;
color: transparent;
}
.sm-lag .sm-flueben__f svg { width: 15px; height: 15px; }
.sm-lag .sm-flueben__t {
flex: 1; min-width: 0;
font-family: var(--font-body, inherit);
font-size: 16px; line-height: 1.35; font-weight: 600; color: #fff;
}
.sm-lag .sm-flueben.er-valgt .sm-flueben__f {
background: #A8E7C6; border-color: #A8E7C6; color: #043524;
}
/* Overskrift med et (i) ved siden af. */
.sm-lag .sm-hrk { display: flex; align-items: center; gap: 10px; margin: 0 0 5px; }
.sm-lag .sm-hrk .sm-h { flex: 1; min-width: 0; margin: 0; }
.sm-lag .sm-hrk .sm-i { flex: none; }
}
/* LUFT OG ORANGE - 11. september 2026, Henriks rettelser.
Linjen over Koeb/Leje faar mere luft, og genvejen til Find din
ladeboks faar sidens egen orange. */
@media (max-width: 820px) {
.sm-lag.la .sm-valg__t { margin: 4px 0 9px; line-height: 1.4; }
/* 11. september 2026: genvejen staar i samme stoerrelse som resten af
teksten. Spoergsmaalet er mintgroent, selve genvejen hvid - den
orange maalte 1,73 mod den moerkegroenne bund og kunne ikke laeses. */
.sm-lag .sm-hjul__link {
font-family: var(--font-body, inherit);
font-size: 16px; line-height: 1.45;
color: #A8E7C6;
display: block; margin: 2px 0 0;
}
.sm-lag .sm-hjul__link b { color: #fff; }
/* Skyderens felt stod mast op ad linjen over. */
.sm-lag.la .sm-hjul__link + .sm-budget { margin-top: 16px; }
/* Trin 2 har plads tilovers i bunden - den bruges paa luft mellem
raekkerne, saa knapperne ikke staar klods op ad hinanden. */
.sm-lag.la .sm-valg { margin: 0 0 14px; }
.sm-lag.la .sm-skel { margin: 16px 0 14px; }
}
/* Naar et lag er aabent, klippes siden bagved ned til skaermens hoejde og
faar samme groenne bund. Uden det kunne man knibe ind paa telefonen og
panorere ned forbi lagets kant, hvor den lyse side laa og lurede. */
@media (max-width: 820px) {
html.sm-laast, html.sm-laast body {
height: 100%; min-height: 0; max-height: 100%;
overflow: hidden; overscroll-behavior: none;
background-color: #0B7352;
}
}
/* ------------------------------------------------------------
12. september 2026: skalaen faar et trin mere. Broedteksten er
16, men de smaa MAERKATER inde i pladerne skal ikke vaere lige
saa store som broedtekst - de blev det, da alt paa 14,5 blev
loeftet til 16, og saa voksede pladerne ud af skaermen.
Maerkater staar paa 14, som er gulvet. Henriks iagttagelse.
------------------------------------------------------------ */
.sm-lag .skift-el__facit-label,
.sm-lag .skift-el__facit-under,
.sm-lag .skift-el__facit-mikro,
.sm-lag .skift-el__sm-label,
.sm-lag .skift-el__sm-forklaring,
.sm-lag .lbr__lbl,
.sm-lag .lbr__kilde,
.sm-lag .skift-el__kilde,
.sm-lag .sm-under,
.sm-lag .sm-mrk,
.sm-lag .skift-el__bil-km,
.sm-lag .skift-el__literpris-label,
.sm-lag .skift-el__literpris-enhed,
.sm-lag .skift-el__agent-label,
.sm-lag .skift-el__total p:first-child,
.sm-lag .sm-lbl,
.sm-lag .sm-lille {
font-size: 14px; line-height: 1.35;
}
/* ============================================================
12. september 2026 - Henriks gennemgang af Skift til elbil.
Alt herunder ligger inde i laget. Laptop er uroert.
============================================================ */
/* Trin 1: de fire punkter stod ordret i teksten ovenfor. Vaek. */
.sm-lag .sm-liste { display: none; }
/* Luft, nu der er plads til det. */
.sm-lag .sm-lead { margin-bottom: 16px; }
.sm-lag .skift-el__biler { margin-top: 10px; }
/* Info-knappen ser mindre ud, men kan stadig rammes: cirklen er
30 punkter, og luften udenom goer trykfladen 44. */
.sm-lag .sm-i {
width: 30px; height: 30px; box-sizing: content-box;
padding: 7px; margin: -7px; font-size: 15px;
}
/* Trin 2: maerkatet hoerer til skyderen. De staar taet sammen og
laengere fra det, der ikke hoerer til. */
.sm-lag .sm-lbl { margin: 14px 0 2px; }
.sm-lag .skift-el__km-raekke { margin-top: 0; }
/* Trin 2 og 3: teksten ved siden af (i) stod ordret i beskeden bag
knappen. To beskrivelser af det samme. Teksten gaar ud. */
.sm-lag .sm-hjaelp p { display: none; }
.sm-lag .sm-hjaelp { min-height: 0; margin: 0; }
/* (i) staar nu i pladens oeverste hoejre hjoerne. */
.sm-lag .sm-plade--medinfo { position: relative; }
.sm-lag .sm-plade--medinfo > .sm-i { position: absolute; top: 10px; right: 10px; z-index: 2; }
.sm-lag .sm-plade--medinfo > .skift-el__facit,
.sm-lag .sm-plade--medinfo > .skift-el__sammenligning { padding-right: 36px; }
/* Trin 3, soejlerne. Tallet laa inde i soejlen og kunne ikke laeses,
naar soejlen var lav. Nu staar det over soejlen, hver soejle er en
trykflade paa 44 punkter, og ringen om det valgte aar er mindre
markant. */
/* Tallene staar over soejlerne og skal have deres egen plads,
ellers laegger de sig op i blokken ovenover. */
.sm-lag .skift-el__bars { padding-top: 20px; }
.sm-lag .skift-el__bar-kolonne { min-height: 44px; justify-content: flex-end; }
.sm-lag .skift-el__bar { position: relative; min-height: 14px; padding-top: 0; overflow: visible; }
.sm-lag .skift-el__bar-tal { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 3px; font-size: 14px; line-height: 1; }
.sm-lag .skift-el__bar-label { font-size: 14px; }
.sm-lag .skift-el__bar-kolonne.is-valgt .skift-el__bar { box-shadow: 0 0 0 2px #3EA66E; }
/* Trin 4: luft mellem overskriftsraekken og pladen med skyderen. */
.sm-lag .sm-hrk { margin-bottom: 10px; }
.sm-lag .sm-plade--dyb { margin-top: 12px; }
/* Trin 5: de to henvisninger hoerer ikke til regnestykket. En linje
skiller dem fra pladen, og der er luft omkring dem. */
.sm-lag .bilo-cta__f--find { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); }
.sm-lag .bilo-cta__f--agent { margin-top: 10px; }
.sm-lag .sm-del { margin-top: 16px; }
/* Trin 1 har 151 punkter til overs, efter de fire punkter gik ud.
Luften fordeles dér, og kun dér - de andre trin har ikke plads.
Henriks oenske: skaermen skal vaere luftig. */
.sm-lag .sm-skaerm:first-child .sm-mrk { margin-bottom: 18px; }
.sm-lag .sm-skaerm:first-child .sm-h { margin-bottom: 14px; }
.sm-lag .sm-skaerm:first-child .sm-lead { margin-bottom: 30px; }
.sm-lag .sm-skaerm:first-child .sm-lbl { margin: 0 0 10px; }
.sm-lag .sm-skaerm:first-child .skift-el__biler { margin-top: 0; }
/* ------------------------------------------------------------
12. september 2026, sidst: soejlerne.
a) FEJL, jeg selv lavede: da tallet flyttede ud af soejlen,
blev det staaende hvidt - og hvidt paa den mintgroenne plade
maaler 1,38, hvor kravet er 4,5. Det var ulaeseligt. Tallet
er nu moerkegroent fra paletten.
b) Henriks oenske: det skal kunne ses, at soejlerne kan trykkes.
Hver soejle staar nu i sit eget felt, saa raekken laeses som
fem pladser, hvor den ene er valgt. Farven er den groenne, vi
har i forvejen, i svag styrke - ingen ny farve.
------------------------------------------------------------ */
.sm-lag .skift-el__bar-tal { color: #0B3D2C; font-weight: 700; }
.sm-lag .skift-el__bar-kolonne {
background: rgba(11,115,82,.10);
border-radius: 8px;
padding: 0 4px 5px;
}
.sm-lag .skift-el__bar-kolonne.is-valgt { background: rgba(11,115,82,.20); }
.sm-lag .skift-el__bars { gap: 7px; }
.sm-lag .skift-el__bar-label { color: #0B3D2C; }
/* 12. sept: rettelse af to kontrastfejl jeg selv lavede i dag, samt tekst under 14 px */
.sm-lag .sm-plade--medinfo > .sm-i {
color: #0B3D2C;
background: rgba(11,61,44,.10);
border-color: rgba(11,61,44,.70);
}
.sm-lag .skift-el__bar-kolonne.is-valgt .skift-el__bar-label { color: #0B3D2C; }
.sm-lag .bilo-cta__s { font-size: 14px; line-height: 1.35; }
/* ================================================================
12. september 2026, runde 2 efter Henriks besked.
================================================================ */
/* TRIN 1: spoergsmaalet er nu en overskrift, og der er luft ned
til de tre bilknapper. */
.sm-lag .sm-skaerm:first-child .sm-lbl {
font-family: var(--font-display, inherit);
font-size: 17px; font-weight: 700; color: #fff;
line-height: 1.3; margin: 0 0 20px;
}
/* (i)-KNAPPEN: den var stadig stor, fordi luften omkring cirklen
blev malet med. Cirklen er nu 30 punkter og males alene;
trykfladen paa 44 ligger usynligt udenom. */
.sm-lag .sm-plade--medinfo > .sm-i,
.sm-lag .sm-hrk .sm-i {
width: 30px; height: 30px; box-sizing: border-box;
padding: 0; margin: 0; font-size: 15px;
position: relative; display: inline-flex;
align-items: center; justify-content: center;
}
.sm-lag .sm-plade--medinfo > .sm-i::after,
.sm-lag .sm-hrk .sm-i::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 44px; height: 44px; transform: translate(-50%,-50%);
}
/* TRIN 3: soejlerne tilbage til det rene udtryk. Felterne bag
hver soejle er taget vaek igen. Aarstallene under soejlerne er
nu smaa knapper, saa det kan ses, at der kan trykkes, og den
valgte er fyldt. Farverne er dem, vi har i forvejen. */
.sm-lag .skift-el__bar-kolonne {
background: none; border-radius: 0; padding: 0; gap: 6px;
}
.sm-lag .skift-el__bar-kolonne.is-valgt { background: none; }
.sm-lag .skift-el__bar { min-height: 22px; border-radius: 5px 5px 0 0; }
.sm-lag .skift-el__bar-kolonne.is-valgt .skift-el__bar {
box-shadow: 0 0 0 3px #3EA66E;
}
.sm-lag .skift-el__bar-label {
display: block; width: 100%; box-sizing: border-box;
padding: 5px 0; border-radius: 999px;
background: #EAF6F0; color: #0B3D2C;
font-size: 14px; line-height: 1; text-align: center;
}
.sm-lag .skift-el__bar-kolonne.is-valgt .skift-el__bar-label {
background: #0B7352; color: #fff; font-weight: 700;
}
/* TRIN 4: luft mellem skyderen og det groenne felt under. */
.sm-lag .sm-forklar { margin-top: 24px; }
.sm-lag .sm-hrk { gap: 12px; align-items: flex-start; }
.sm-lag .sm-hrk .sm-i { margin-top: 2px; }
/* TRIN 5: en tydelig slutstreg. Regnestykket er slut over stregen,
og de to felter under er genveje. */
.sm-lag .sm-skel {
display: flex; align-items: center; gap: 10px; margin: 22px 0 12px;
}
.sm-lag .sm-skel::before,
.sm-lag .sm-skel::after {
content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.30);
}
.sm-lag .sm-skel__ord {
flex: none; font-family: var(--font-display, inherit);
font-size: 14px; font-weight: 700; color: #fff; line-height: 1;
}
.sm-lag .bilo-cta__f--find { margin-top: 0; padding-top: 0; border-top: none; }
/* Slutstregens ord staar i sit eget moerkegroenne felt. Paa den
lyse del af baggrunden kunne hvidt paa groent ikke naa kravet. */
.sm-lag .sm-skel__ord {
background: #0B3D2C; color: #fff;
padding: 5px 13px; border-radius: 999px;
}
/* Trin 3: en enkelt streg for hoej. */
.sm-lag .skift-el__bars { padding-top: 15px; }
/* ------------------------------------------------------------
12. september 2026, Henriks fund: zoomer man ind paa telefonen,
kan man kigge forbi kanten af den aabne telefonudgave og se
stumper af den almindelige side, der stadig ligger nedenunder.
Den bliver ikke slettet, naar udgaven aabnes - den bliver kun
daekket. Nu goeres den usynlig, saa laenge udgaven staar aaben,
og baggrunden bag det hele saettes til den samme groenne, saa
der ikke er noget at se udenfor. Zoom er IKKE slaaet fra:
at spaerre for zoom er selv en tilgaengelighedsfejl.
------------------------------------------------------------ */
html.sm-laast, html.sm-laast body.sm-aaben { background: #0B7352; }
body.sm-aaben > .site-header,
body.sm-aaben > main,
body.sm-aaben > .site-footer,
body.sm-aaben > .bilo-spring { visibility: hidden; }
body.sm-aaben > #sm-lag,
body.sm-aaben > #lam-lag { visibility: visible; }
/* ------------------------------------------------------------
Trin 3, trappen. Den var flad, fordi alle fem soejler blev
klemt ned i 22 punkter: der var kun 17 punkter tilbage til
selve soejlen, og saa var den mindste og den stoerste lige
hoeje. Trappen faar nu rigtig plads, og luften hentes i de
mellemrum, der ligger lige omkring den.
------------------------------------------------------------ */
.sm-lag .skift-el__bars { height: 104px; padding-top: 14px; margin: 4px 0 0; }
.sm-lag .skift-el__bar { min-height: 14px; }
.sm-lag .skift-el__sammenligning { margin-bottom: 8px; }
.sm-lag .skift-el__total { margin-top: 4px; padding-top: 6px; }
.sm-lag .sm-skaerm:nth-child(3) .sm-lead { margin-bottom: 10px; }
.sm-lag .sm-skaerm:nth-child(3) .sm-plade--svar { padding-top: 11px; padding-bottom: 11px; }
/* Trappen var stadig klippet af foroven: aarstals-knappen laa inde
i den samme hoejde, som soejlen regnes ud fra, saa de to
hoejeste soejler stoedte mod loftet og blev lige hoeje. Knappen
er nu flyttet ud under selve trappen, saa hele hoejden er
soejlens egen. */
.sm-lag .skift-el__bars { height: 96px; padding-top: 14px; margin: 4px 0 32px; }
.sm-lag .skift-el__bar-kolonne { position: relative; gap: 0; }
.sm-lag .skift-el__bar-label { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; }
/* Trin 3: de to talsoejler stod lige brede, og saa braekkede
baade 'Med elbil MAALT' og kWh-linjen over to linjer i den
hoejre. Bredden fordeles nu efter, hvad der staar i dem. */
.sm-lag .skift-el__sammenligning > div:first-of-type { flex: 0 0 auto; }
.sm-lag .skift-el__sm-tal { white-space: nowrap; }
.sm-lag .skift-el__sammenligning > div:last-of-type { flex: 1 1 auto; }
/* Mellemrummet mellem de to talsoejler var stort nok til, at
kWh-linjen braekkede over. Det er strammet ind. */
.sm-lag .skift-el__sammenligning { gap: 8px; }
/* kWh-linjen skal staa paa een linje; der er plads i raekken. */
.sm-lag .skift-el__sm-forklaring { white-space: nowrap; }
/* Trin 4: den usynlige trykflade omkring (i) stak 7 punkter ud
over hoejre kant og gjorde skaermen en anelse for bred. Den
vokser nu indad i stedet. Trykfladen er stadig 44. */
.sm-lag .sm-hrk .sm-i::after {
left: auto; right: 0; transform: translateY(-50%);
}
/* ================================================================
12. september 2026, runde 3 efter Henriks besked.
================================================================ */
/* Trin 1: bilknapperne loefter sig ikke laengere. Henriks
beslutning 12. september aendrer beslutningen fra 11.
september: nu foerer et tryk paa en bil videre til trin 2,
ogsaa hvis bilen allerede er valgt. Den hvide knap i bunden
virker uaendret. */
.sm-lag .skift-el__bil-knap,
.sm-lag .skift-el__bil-knap.is-valgt,
.sm-lag .skift-el__bil-knap:active,
.sm-lag .skift-el__bil-knap.is-valgt:active { transform: none; }
/* Trin 2 og 3: (i) stod i venstre hjoerne, fordi min egen regel om
stoerrelsen kom efter og satte den tilbage i tekstens raekke.
Den staar nu i hoejre hjoerne igen, og hele cirklen er fyldt
moerkegroen med hvidt i. */
.sm-lag .sm-plade--medinfo > .sm-i {
position: absolute; top: 10px; right: 10px; z-index: 2;
/* 12. september: Henrik syntes den moerke var for haard. Cirklen
har nu trinets egen groenne. Hvidt i maaler 5,85 paa den. */
background: #0B7352; border-color: #0B7352; color: #fff;
}
/* Trin 3: samlet besparelse er flyttet op over trappen, hvor
tallene staar, og er ikke laengere en linje under diagrammet. */
.sm-lag .skift-el__total { margin: 6px 0 2px; padding-top: 6px; }
/* Trin 5: stregen bliver, ordet er taget vaek. */
.sm-lag .sm-skel { display: block; height: 1px; background: rgba(255,255,255,.30); margin: 14px 0 10px; }
.sm-lag .sm-skel::before, .sm-lag .sm-skel::after { content: none; }
/* 12. september, Henriks oenske: den groenne kant om den valgte
trappe er taget vaek. Den moerkegroenne fyldning er nok. */
.sm-lag .skift-el__bar-kolonne.is-valgt .skift-el__bar,
.sm-lag .skift-el__bar-kolonne:hover .skift-el__bar,
.sm-lag .skift-el__bar-kolonne.is-valgt:hover .skift-el__bar { box-shadow: none; }
/* ================================================================
12. september 2026. Teksten over feltet er flyttet bag (i), og de
106 punkter, der blev ledige, er brugt paa at give feltet luft.
Feltet laeses nu som tre ting med en streg imellem: sammenligningen,
hvad du sparer, og hvad det bliver til over aarene.
================================================================ */
/* 1. Feltet selv faar mere luft indenfor kanten. */
.sm-lag .sm-skaerm:nth-child(3) .sm-plade--svar { padding: 14px; }
/* 2. Sammenligningen faar plads omkring sig. */
.sm-lag .skift-el__sammenligning { margin-bottom: 0; }
/* 3. Hvad du sparer om aaret er svaret paa trinnet og staar nu
alene paa sin egen linje. Maanedstallet foelger under som en
mindre linje, saa de to tal ikke konkurrerer. */
.sm-lag .skift-el__spar {
grid-template-columns: 1fr; gap: 8px;
margin-top: 13px; padding-top: 13px;
}
.sm-lag .skift-el__spar > div:first-child .skift-el__spar-tal { font-size: 27px; line-height: 1.15; }
.sm-lag .skift-el__spar > div:last-child {
display: flex; align-items: baseline; gap: 8px;
}
.sm-lag .skift-el__spar > div:last-child .skift-el__facit-label { margin: 0; }
.sm-lag .skift-el__spar > div:last-child .skift-el__spar-tal { font-size: 17px; line-height: 1.2; }
/* 4. Den samlede besparelse og trappen hoerer sammen: vaelg et aar,
se tallet. De faar deres egen streg, saa de laeses som et. */
.sm-lag .skift-el__total {
margin-top: 13px; padding-top: 13px;
border-top: 1px solid rgba(18,58,44,.16);
}
/* 5. Trappen faar mere hoejde, saa forskellen fra aar 1 til aar 5
traeder tydeligere frem. */
.sm-lag .skift-el__bars { height: 104px; padding-top: 13px; margin: 8px 0 32px; }
/* 12. september, senere samme dag: bilerne loefter sig ikke, og
slagskyggen, der hoerte til loeftet, er taget vaek. Den valgte
bil kendes paa en tydelig groen ring inde paa den hvide flade.
Ringen maaler 5,85 mod det hvide - kravet for en kant er 3. */
.sm-lag .skift-el__bil-knap.is-valgt,
.sm-lag .skift-el__bil-knap.is-valgt:active {
box-shadow: inset 0 0 0 3px #0B7352;
}
/* ================================================================
12. september 2026, tre fund fra Henriks telefon.
================================================================ */
/* TRIN 3: den hurtige skygge bag trapperne. Soejlen havde en
gennemsigtig skygge fra start og en glidning paa skyggen. Naar
der blev trykket, gled den fra den gennemsigtige mod ingen, og
undervejs tegnede telefonen en synlig skygge i et kort oejeblik.
Skyggen er nu vaek fra start, og der glides ikke paa den. */
.sm-lag .skift-el__bar {
box-shadow: none;
transition: height .4s ease;
}
/* TRIN 3: det store tal stod helt ude i kanten af feltet. Feltet
har nu luft i siderne, og tallet er sat et par punkter ned. */
.sm-lag .skift-el__total { padding: 12px 14px; }
.sm-lag .skift-el__total p:last-child { font-size: 18px; }
/* TRIN 5: da jeg lagde slutstregen ind, tog jeg ved et uheld ogsaa
luften vaek over overskriften i det oeverste felt, saa den blev
presset op i kanten. Luften er den samme foroven som forneden. */
.sm-lag .bilo-cta__f--find { padding-top: 13px; }
/* Luften over overskriften kostede 13 punkter paa sidste trin. De
hentes i mellemrummene omkring stregen og de to felter. */
.sm-lag .sm-skel { margin: 9px 0 8px; }
.sm-lag .bilo-cta__f--agent { margin-top: 7px; }
.sm-lag .sm-del { margin-top: 10px; }
/* ------------------------------------------------------------
Skyggen bag trapperne. Det var ikke en skygge fra vores egen
udseendefil - jeg fjernede den rigtige skygge i gaar og fejlen
blev alligevel ved. Maalt paa soejlen: telefonen maler sin EGEN
graa markering, sort med 18 procent, hen over hele knappen i et
oejeblik, naar der trykkes. Den er slaaet fra paa trapperne.
Der mistes ingen tilbagemelding: den valgte trappe bliver
moerkegroen og faar sit aarstal fyldt ud med det samme.
------------------------------------------------------------ */
.sm-lag .skift-el__bar-kolonne {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Trin 3: I dag og prisen under skal staa paa linje med Med elbil.
Raekken var midterstillet, og fordi hoejre side har en linje mere,
skred venstre side nedad. Nu staar de fra samme overkant, og
pilen imellem bliver staaende paa midten. */
.sm-lag .skift-el__sammenligning { align-items: flex-start; }
.sm-lag .skift-el__sammenligning > svg { align-self: center; }
/* De to maerkater var ikke lige hoeje - hoejre side baerer ogsaa
MAALT-maerket - saa tallene under dem stod 2 punkter forskudt.
Nu faar begge maerkater samme hoejde, og tallene flugter. */
.sm-lag .skift-el__sammenligning .skift-el__sm-label {
min-height: 21px; display: flex; align-items: center;
}
.sm-lag .skift-el__sammenligning > div:last-of-type .skift-el__sm-label {
justify-content: flex-end;
}
/* ================================================================
LADEAGENTEN, 12. september 2026.
Samme maalestok som Skift til elbil: ingen tekst under 14, ingen
trykflade under 44, farver der lever op til kravet, og luft nok
til at oejet kan se, hvad der hoerer sammen.
Foerste omgang: fundamentet. Intet af det her aendrer, hvor
tingene staar - kun hvor store de er, og om de kan rammes.
================================================================ */
/* Hjulet paa trin 1: raekkerne var 34 punkter - for smaa at ramme
med en finger. De er nu 44. Hjulets kasse er den samme hoejde,
saa trinnet ikke vokser: man ser den valgte raekke og et stykke
af naboerne, praecis som et hjul skal se ud. */
.sm-lag .sm-hjul__baand { top: 29px; height: 44px; }
.sm-lag .sm-hjul__rul button { min-height: 44px; font-size: 16px; }
.sm-lag .sm-hjul__rul button.er-valgt { font-size: 17px; }
/* Linjen for dem, der allerede har en elbil. Teksten maalte 4,16
mod kravet 4,5 og er nu hvid: 5,85. Trykfladen er 44 og ligger
usynligt omkring linjen, saa trinnet ikke bliver hoejere. */
.sm-lag .sm-hjul__link { position: relative; color: #fff; }
.sm-lag .sm-hjul__link::after {
content: ''; position: absolute; left: 0; right: 0; top: 50%;
height: 44px; transform: translateY(-50%);
}
/* Kontakten paa sidste trin var 48 x 28. Den ser ud som foer, men
trykfladen er nu 48 x 44. */
.sm-lag.la .sw { position: relative; }
.sm-lag.la .sw::after {
content: ''; position: absolute; left: 50%; top: 50%;
width: 48px; height: 44px; transform: translate(-50%,-50%);
}
/* Linket i det med de smaa bogstaver var 20 punkter hoejt. */
.sm-lag.la .fine a { position: relative; }
.sm-lag.la .fine a::after {
content: ''; position: absolute; left: 0; right: 0; top: 50%;
height: 44px; transform: translateY(-50%);
}
/* Henrik, 12. september: valgknapperne fyldte for meget i forhold
til resten af trinnet. Selve knappen er nu 38 punkter hoej i
stedet for 44, og skriften 15. Trykfladen er stadig 44: den
ligger usynligt uden om knappen, ligesom paa (i). */
.sm-lag .sm-pil {
min-height: 38px; font-size: 15px; position: relative;
}
.sm-lag .sm-pil::after {
content: ''; position: absolute; left: 0; right: 0; top: 50%;
height: 44px; transform: translateY(-50%);
}
/* Overskriften over hver raekke skal kunne ses som en overskrift,
ikke som endnu en linje tekst. */
.sm-lag.la .sm-valg__t {
font-family: var(--font-display, inherit);
font-size: 15px; font-weight: 700; color: #fff;
margin: 0 0 8px;
}
.sm-lag.la .sm-valg { margin: 0 0 18px; }
/* Tre svar under hinanden, naar de er for lange til een raekke. */
.sm-lag .sm-valg__r--kolonne { flex-direction: column; }
.sm-lag .sm-valg__r--kolonne .sm-pil { width: 100%; }
/* Ladeagenten trin 1: de fire svar staar som firkantede kort i to
raekker, bygget af samme kort som bilerne paa Skift til elbil,
saa de to vaerktoejer ligner hinanden. Uden ikon er der kun
tekst, saa kortet faar en fast hoejde og teksten staar paa
midten. */
.sm-lag .la-tid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sm-lag .la-tid .skift-el__bil-knap {
min-height: 146px; justify-content: center; padding: 12px 10px; gap: 4px;
}
.sm-lag .la-tid .skift-el__bil-navn { font-size: 15px; line-height: 1.25; }
/* Kortene paa Ladeagenten har ikke noget ikon, saa de to linjer
staar paa midten. Underlinjen er den samme stoerrelse som
forbruget under bilerne paa Skift til elbil. */
.sm-lag .la-tid .skift-el__bil-km { font-size: 14px; line-height: 1.3; text-align: center; }
/* Paa Ladeagentens foerste trin er luften under indledningen
mindre end paa Skift til elbil: her staar fire kort under, ikke
tre, saa der skal vaere plads. */
.sm-lag.la .sm-skaerm:first-child .sm-lead { margin-bottom: 18px; }
/* ------------------------------------------------------------
13. september 2026, Henriks beslutning: doerkortet skal kunne
ses som noget ANDET end de tre svar. Fire ens kort fortaeller
oejet, at der er fire valg af samme slags - og saa river det
ene een ud af forloebet. Kortet har samme stoerrelse og runding
som de andre, men er gennemsigtigt med hvid kant i stedet for
hvid flade, og har en pil i hjoernet.
Maalt: hvid tekst paa den groenne baggrund 5,85 mod kravet 4,5,
og kanten 3,72 mod kravet 3.
------------------------------------------------------------ */
/* 13. september 2026, Henrik: kortet var for kedeligt. Gennemsigtigt
laeser som en fortryd-knap, og det her kort er tvaertimod det, der
sender en koebeklar bruger videre. Det er nu fyldt med paletens
moerke groenne, har den samme skraa skygge som de tre andre og
beholder den hvide kant, saa det stadig kan ses, at det er en
anden slags kort end de tre svar.
Maalt: hvid tekst paa den moerke groenne 12,2 mod kravet 4,5, og
/* 13. september 2026, Henriks loesning: alle fire kort er ens -
hvide med den samme lysegraa skraa skygge som bilerne paa Skift
til elbil, og den samme groenne ring om det valgte. Forskellen
paa foerste kort ligger i ORDENE, ikke i farven: der staar, at
man sendes videre. Det er staerkere end enhver farve eller pil,
for det siger praecis hvad der sker i stedet for at antyde det.
Derfor er baade den saerlige flade, kanten og pilen taget ud.
Kortet er stadig et link og ikke en knap, saa oplaesning siger
'link' - det er det eneste, der bliver ved med at skille dem. */
.sm-lag .la-tid__doer { box-sizing: border-box; text-decoration: none; }
/* 13. september 2026, Henrik: de tre hvide kort var lidt tamme.
Den skraa skygge er nu mintgroen i stedet for naesten usynligt
graat. Kun paa Ladeagenten - bilerne paa Skift til elbil er
uroerte, for dem har du allerede godkendt.
Maalt: den groenne skrift paa den mintfarvede kile 5,02 mod
kravet 4,5. */
/* Den mintgroenne kile er taget ud igen: kortene bruger nu den\n samme lysegraa skygge som bilerne paa Skift til elbil. */
/* 13. september 2026, Henrik: der skal vaere halvanden gang saa
meget luft mellem linjen 'Ladeagenten - trin x af 5' og
overskriften. Den var 8 punkter og er nu 12. */
/* ------------------------------------------------------------
13. september 2026, Henriks indvending, og han har ret.
Maalt foer: 11 punkter OVER overskriften, 15 UNDER den. Altsaa
mere luft under end over - det fortaeller oejet, at overskriften
hoerer sammen med trin-linjen ovenover i stedet for med sin egen
tekst nedenunder. Praecis omvendt af, hvad den goer.
Naerhed er den regel, der bestemmer, hvad der hoerer sammen: det,
der staar taettest, laeses som eet. Derfor er rytmen nu 24 mellem
grupper og 8 indeni en gruppe:
24 over overskriften - skiller etiketten fra indholdet
8 under overskriften - overskrift og broedtekst er eet
24 under broedteksten - skiller teksten fra valgene
------------------------------------------------------------ */
.sm-lag.la .sm-trinl { padding-bottom: 24px; }
.sm-lag.la .sm-skaerm .sm-h { margin-bottom: 8px; }
.sm-lag.la .sm-skaerm .sm-lead { margin-bottom: 24px; }
.sm-lag.la .sm-skaerm:first-child .sm-lead { margin-bottom: 24px; }
/* Paa de trin, hvor overskriften IKKE har en broedtekst under sig,
staar valgene lige under. 8 punkter er for taet, naar det naeste
er et helt kort eller en raekke knapper - overskriften klaeber.
Der er 12: stadig tydeligt mindre end de 24 ovenover, saa
overskriften stadig hoerer til det, der staar under den. */
.sm-lag.la .sm-h + .sm-valg,
.sm-lag.la .sm-h + .skift-el__biler,
.sm-lag.la .sm-h + .sm-plade { margin-top: 12px; }
/* Sidste trin: overskriften sidder i en raekke sammen med (i), og
den raekke havde sin egen luft ovenpaa overskriftens. Maalt 19
mod de 8, de andre trin har. Nu er de ens. */
/* Raekken er hoejere end selve overskriften, fordi (i)-knappen paa
30 punkter staar i den. Den ekstra hoejde talte med som luft, saa
maalt afstand blev 17 mod de 9, de andre trin har. Raekken har
derfor ingen egen luft under sig. */
.sm-lag.la .sm-skaerm .sm-hrk { margin: 0; }
/* ================================================================
13. september 2026, Henriks beslutning: samme maalestok for luft
paa Skift til elbil som paa Ladeagenten.
Naerhed afgoer, hvad oejet laeser som sammenhoerende. Rytmen er
24 mellem grupper og 8 indeni en gruppe.
Bemaerk to slags etiketter, som IKKE maa behandles ens:
- maerkatet (den groenne pille "Elpriser maalt over 29 doegn")
er en selvstaendig etiket og skal have gruppeafstand under sig.
- overlinjen ("Dit resultat") hoerer til overskriften og skal
blive taet paa den. Den maaler 5 og bliver, hvor den er.
================================================================ */
.sm-lag:not(.la) .sm-skaerm .sm-mrk { margin-bottom: 20px; }
.sm-lag:not(.la) .sm-skaerm .sm-h { margin-bottom: 7px; }
.sm-lag:not(.la) .sm-skaerm .sm-lead { margin-bottom: 22px; }
.sm-lag:not(.la) .sm-skaerm:first-child .sm-mrk { margin-bottom: 20px; }
.sm-lag:not(.la) .sm-skaerm:first-child .sm-h { margin-bottom: 7px; }
.sm-lag:not(.la) .sm-skaerm:first-child .sm-lead { margin-bottom: 22px; }
/* Staar der ingen broedtekst under overskriften, er det naeste et
helt felt. 5 punkter er for taet; 12 er stadig tydeligt mindre
end de 24 ovenover. */
.sm-lag:not(.la) .sm-h + .sm-plade,
.sm-lag:not(.la) .sm-h + .sm-valg,
.sm-lag:not(.la) .sm-h + .skift-el__biler,
.sm-lag:not(.la) .sm-hrk + .sm-plade,
.sm-lag:not(.la) .sm-hrk + .sm-valg { margin-top: 12px; }
/* Trin 4: overskriften sidder i raekke med (i). Raekken er hoejere
end teksten, og den ekstra hoejde talte med som luft - maalt 20
mod de 12, der er maalet. Samme rettelse som paa Ladeagenten. */
.sm-lag:not(.la) .sm-skaerm .sm-hrk { margin-bottom: 0; }
/* Sidste trin var praecis fyldt, og de 12 punkters luft under
overskriften skubbede det 11 punkter over. De hentes i
mellemrummene mellem grupperne nederst, hvor der var mest. */
.sm-lag:not(.la) .sm-skel { margin: 6px 0 6px; }
.sm-lag:not(.la) .sm-del { margin-top: 6px; }
.sm-lag:not(.la) .bilo-cta__f--agent { margin-top: 5px; }
.sm-lag:not(.la) .skift-el__agent-status { margin-bottom: 6px; }
/* Sidste trin maalte 19 mellem overskrift og felt, hvor de andre
maaler 12. Grunden: den skaerm er sat op paa en anden maade end
de oevrige, og dér laegges de to mellemrum sammen i stedet for at
falde sammen om det stoerste. 7 + 12 blev til 19. Overskriften
har derfor ingen egen luft under sig dér. */
.sm-lag:not(.la) .sm-slut .sm-h { margin-bottom: 0; }
/* ================================================================
LADEAGENTEN, 13. september 2026: alt paa een side.
================================================================ */
/* Underoverskrift: et trin under den store overskrift, saa der er
et synligt spring fra side til afsnit. */
.sm-lag.la .sm-uh {
font-family: var(--font-display, inherit);
font-size: 17px; font-weight: 800; color: #fff;
line-height: 1.3; margin: 0 0 12px;
}
.sm-lag.la .sm-lead + .sm-uh,
.sm-lag.la .sm-hjul + .sm-uh,
.sm-lag.la .la-tid + .sm-uh,
.sm-lag.la .sm-budget + .sm-uh { margin-top: 24px; }
/* 13. september 2026: afstande paa side 2 efter gestaltreglerne.
Overskriften staar 12 over knapperne, der ikke har broedtekst
under sig. Koeb, leje og skyderen hoerer sammen og staar taet.
Hjulet er en ny gruppe og faar 24. */
.sm-lag.la .sm-h + .skift-el__braendstof { margin-top: 12px; }
/* Mailsiden: spoergsmaalet staar alene med info-tegnet ved siden af,
og den lange tekst om installationstilbud staar mindre. */
.sm-lag.la .sm-hrk .sm-lead { flex: 1 1 0; min-width: 0; margin: 0; }
.sm-lag.la .sm-skaerm .sm-hrk { margin: 0 0 24px; }
/* ============================================================
13. september 2026, sjette gennemgang af afstandene paa alle tre
sider. To regler paa een gang:
Webtilgaengelighed: broedtekst har 1,5 i linjeafstand.
Gestalt: en overskrift staar 28 fra det, der kommer foer den, og
kun 8 fra sit eget indhold. Punkter i samme liste staar 12 fra
hinanden - altsaa mere end overskriftens 8. Saa hoerer
overskriften synligt sammen med det, der staar under den.
============================================================ */
.sm-lag.la .sm-lead,
.sm-lag.la .la-fb__t,
.sm-lag.la .sm-flueben__t,
.sm-lag.la .sm-budget__note { line-height: 1.5; }
.sm-lag.la .sm-uh { margin-bottom: 8px; }
.sm-lag.la .sm-lead + .sm-uh,
.sm-lag.la .sm-hjul + .sm-uh,
.sm-lag.la .la-tid + .sm-uh,
.sm-lag.la .sm-budget + .sm-uh,
.sm-lag.la .la-ejer + .sm-uh { margin-top: 28px; }
.sm-lag.la .sm-skaerm .sm-hrk { margin: 0 0 12px; }
/* Knappen i mailfeltet bliver orange, naar der staar noget i feltet. */
/* 13. september 2026, Henriks valg: teksten i tilmeldingsknappen er
19 punkter i fed. Ved den stoerrelse er kravet til farvespring 3,0,
og hvid paa orange giver 3,38. Farven er uroert. Stoerrelsen gaelder
ogsaa den hvide udgave, saa knappen ikke skifter stoerrelse, naar
man begynder at taste. */
.sm-lag.la .mail button.go { font-size: 19px; font-weight: 800; display: none; }
/* ============================================================
13. september 2026, finpudsning efter Henriks gennemgang.
============================================================ */
/* Maerkatet til venstre er lige bredt i alle fire raekker, saa
boksene staar praecis over hinanden. Maalt: Installation var tre
punkter bredere end de andre og skubbede sin egen raekke til
hoejre. */
.sm-lag.la .la-gruppe > .la-gruppe__t { flex: 0 0 92px; white-space: nowrap; }
/* Telefonens egen graa skygge ved tryk - den samme, vi fjernede paa
diagrammet paa Skift til elbil. */
.sm-lag.la .la-fb { -webkit-tap-highlight-color: rgba(0,0,0,0); }
/* Luft mellem overskriften og koeb og leje. */
.sm-lag.la .sm-h + .sm-budget { margin-top: 16px; }
/* Koeb og leje vaelges med den groenne kant, praecis som bilknapperne
paa Skift til elbil, ikke med moerkegroent fyld. */
/* 13. september 2026, Henriks valg: koeb og leje er hvide med samme
skraa lysegraa flade som bilknapperne paa Skift til elbil. Den
groenne kant ved valg ligger lige saa langt inde som paa
bilknapperne: et punkts hvid kant og saa tre punkters groen streg. */
/* ============================================================
13. september 2026, maalt: beskeden efter tilmelding faar farve af
sidens eget script - moerkegroen ved ja, moerkeroed ved fejl. Begge
er lavet til hvid baggrund. Paa den moerkegroenne plade her gav de
1,47 og 1,44 i farvespring, hvor kravet er 4,5. Teksten var ikke
til at laese.
Loesningen er ikke at overtrumfe scriptets farve, men at give
beskeden sin egen hvide flade. Saa bliver begge farver laesbare,
5,28 og 5,42, og man kan stadig se forskel paa ja og fejl.
============================================================ */
.sm-lag.la #agentStatus:not([hidden]) {
display: block; background: #fff; border-radius: 10px;
padding: 10px 12px; margin: 10px 0 0;
font-size: 15px; line-height: 1.45; font-weight: 700;
}
/* Maalt: krydset i toppen stod 114 punkter fra hoejre kant, klistret
op ad logoet, fordi intet skubbede det ud. Nu staar det yderst, lige
saa langt fra sin kant som logoet er fra sin. Gaelder begge
vaerktoejer. */
.sm-lag .sm-top { padding-right: 8px; }
.sm-lag .sm-top > .sm-ikon:last-child { margin-left: auto; }
/* 13. september 2026, maalt: krydset var 44 punkter, mens info-tegnet
det lukker er 30. Nu er de ens - samme cirkel, samme kant, samme
skrift - med en usynlig trykflade paa 44 udenom. */
.sm-lag.la .sm-info__luk {
top: 12px; right: 12px; width: 30px; height: 30px;
border-radius: 50%; border: 1px solid rgba(255,255,255,.45);
background: rgba(255,255,255,.1); color: #fff;
font-family: var(--font-display, inherit);
font-weight: 800; font-size: 15px; line-height: 1;
display: flex; align-items: center; justify-content: center;
padding: 0;
}
.sm-lag.la .sm-info__luk::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 44px; height: 44px; transform: translate(-50%,-50%);
}
.sm-lag.la .la-ejer .skift-el__braendstof-knap {
background-color: #fff;
}
.sm-lag.la .la-ejer .skift-el__braendstof-knap .sm-bnavn { color: #123A2C; }
.sm-lag.la .la-ejer .skift-el__braendstof-knap::after,
.sm-lag.la .la-ejer .skift-el__braendstof-knap.is-valgt::after {
background: linear-gradient(118deg, rgba(18,58,44,0) 44%, rgba(18,58,44,.07) 44%);
}
.sm-lag.la .la-ejer .skift-el__braendstof-knap.is-valgt {
background-color: #fff;
/* Maalt paa bilknapperne: 1 punkts hvid kant, saa 3 punkters groen
streg. Her er der ingen kant paa knappen, saa de to punkter
tegnes som to lag indeni, med praecis samme maal. */
box-shadow: #fff 0 0 0 1px inset, #0B7352 0 0 0 4px inset;
}
.sm-lag.la .la-ejer .skift-el__braendstof-knap.is-valgt .sm-bnavn { color: #123A2C; }
/* Fluebenteksterne bruger sidens almindelige skrift og er ikke fede.
Firkanten staar paa linje med foerste tekstlinje i stedet for at
staa midt i teksten. */
.sm-lag.la .sm-flueben__t { font-family: inherit; font-weight: 400; }
.sm-lag.la .sm-flueben { align-items: flex-start; }
.sm-lag.la .mail button.go.er-klar {
display: block; width: 100%;
background: #E8622A; border-color: #E8622A; color: #fff;
box-shadow: none;
}
/* Koeb, leje og max pris i een raekke. */
.sm-lag.la .la-tre { display: flex; gap: 8px; flex-wrap: nowrap; }
.sm-lag.la .la-tre .sm-pil { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 14px; }
/* Prisfeltet aabner under raekken og skubber resten ned. */
.sm-lag.la .la-maks__felt { position: relative; margin-top: 10px; }
/* Krydset ser ud som de andre lukkekryds, 30 punkter, men har en
usynlig trykflade paa 44 udenom. */
.sm-lag.la .la-maks__luk {
position: absolute; top: 8px; right: 8px;
width: 30px; height: 30px;
}
.sm-lag.la .la-maks__luk::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 44px; height: 44px; transform: translate(-50%,-50%);
}
.sm-lag.la .la-maks__felt .sm-valg__t { padding-right: 34px; }
/* De fire kriterier: en raekke paa 44, der aabner ved tryk. */
.sm-lag.la .la-fold { margin: 0 0 8px; }
.sm-lag.la .la-fold__hoved {
width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.30);
border-radius: 12px; padding: 0 14px; cursor: pointer; color: #fff;
}
.sm-lag.la .la-fold__t { flex: 1; text-align: left; font-size: 15px; font-weight: 700; }
.sm-lag.la .la-fold__n {
flex: none; min-width: 22px; height: 22px; border-radius: 999px;
background: #A8E7C6; color: #0B3D2C; font-size: 14px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.sm-lag.la .la-fold__n:empty { display: none; }
.sm-lag.la .la-fold__pil {
flex: none; width: 12px; height: 12px; border-right: 2px solid #fff;
border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-2px,-2px);
}
.sm-lag.la .la-fold.er-aaben .la-fold__pil { transform: rotate(-135deg) translate(-3px,-3px); }
.sm-lag.la .la-fold__krop { padding: 12px 0 4px; }
/* Fluebensfelter: to i bredden, saa de fylder mindst muligt. */
.sm-lag.la .la-fb__gitter { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; }
.sm-lag.la .la-fb__gitter > .la-fb { flex: 1 1 0; min-width: 0; }
.sm-lag.la .la-fb {
display: flex; align-items: center; gap: 9px; min-height: 44px;
background: none; border: 0; padding: 0; cursor: pointer;
color: #fff; text-align: left;
}
.sm-lag.la .la-fb__f {
flex: none; width: 24px; height: 24px; border-radius: 6px;
border: 2px solid rgba(255,255,255,.65); background: rgba(255,255,255,.08);
display: flex; align-items: center; justify-content: center; color: transparent;
}
.sm-lag.la .la-fb__f svg { width: 15px; height: 15px; }
.sm-lag.la .la-fb.er-valgt .la-fb__f { background: #A8E7C6; border-color: #A8E7C6; color: #0B3D2C; }
.sm-lag.la .la-fb__t { font-size: 15px; line-height: 1.25; }
/* Hjulet: med tre tider paa 44 punkter hver kan alle tre staa
fremme i 132. Foer var kassen 102, og den nederste blev klippet
over paa midten af teksten - det ligner en fejl, ikke et hjul.
Baandet markerer den midterste, som ogsaa er valgt fra start. */
/* 13. september 2026: hjulet var for hoejt. Det foelger nu samme
maal som hjulet paa Skift til elbil. */
/* Luft mellem raekken med koeb, leje og max pris og det foerste
kriterium. De stod klistret sammen. */
.sm-lag.la .la-tre { margin-bottom: 16px; }
.sm-lag.la .la-maks__felt + .la-fold { margin-top: 16px; }
/* 13. september 2026: indledningsteksten paa foerste side staar et
trin stoerre end broedtekst, saa den laeses som sidens anslag. */
/* 13. september 2026: introteksten var for stor. Den skal vaere
praecis som paa Skift til elbil, altsaa almindelig sm-lead.
Derfor staar der ikke mere her end en tom markering. */
/* Koeb og leje bygges som braendstofknapperne. De har ingen pris,
saa navnet staar paa midten og fylder hele knappen. */
.sm-lag.la .la-ejer .skift-el__braendstof-knap {
min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.sm-lag.la .la-ejer .sm-bnavn { font-size: 15px; font-weight: 700; padding: 0 10px; }
/* 13. september 2026, Henriks rettelse: mere luft mellem koeb og
leje og feltet med skyderen. 20 er stort nok til at de laeses som
to ting, og stadig mindre end de 28, der skiller dem fra hjulet
nedenunder. */
.sm-lag.la .sm-budget + .la-ejer { margin-top: 20px; }
/* 13. september 2026: hjulet og de to knapper koeb og leje staar side
om side, saa hele foerste side kan vaere paa een skaerm. Knapperne
er kvadratiske og deler hjulets hoejde mellem sig. */
.sm-lag.la .la-tid { display: flex; gap: 10px; align-items: stretch; margin: 0 0 10px; }
.sm-lag.la .la-tid .sm-hjul { flex: 1 1 auto; margin: 0; }
.sm-lag.la .la-tid .la-ejer { flex: 0 0 47px; display: flex; flex-direction: column; gap: 8px; }
.sm-lag.la .la-tid .la-ejer .skift-el__braendstof-knap { flex: 1 1 0; min-height: 0; }
/* Grupperne paa side 2 staar aabne. Maerkatet er en overskrift. */
/* 13. september 2026, Henriks opsaetning: hver gruppe staar paa sin
egen linje med maerkatet til venstre og felterne ved siden af. Det
sparede 209 punkter i hoejden. */
.sm-lag.la .la-gruppe { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.sm-lag.la .la-gruppe__t {
font-family: var(--font-display, inherit);
font-size: 15px; font-weight: 700; color: #fff; margin: 0;
flex: 0 0 84px;
}
/* ============================================================
SKRIFTEN I KNAPPERNE - 20. september 2026. Henriks ja samme dag.
HVAD: valgene og fluebenene paa Ladeagenten skriver nu med sidens
egen skrift i stedet for browserens standardskrift.
HVORFOR: maalt 20. september. Ti steder stod med en anden skrift
end resten af siden: de otte valg paa trin 1 og de to flueben paa
trin 3. Grunden er, at en knap ikke arver skriften af sig selv.
Stoerrelse, farve og alt andet er uaendret.
============================================================ */
@media (max-width: 820px) {
.sm-lag .la-fb,
.sm-lag .la-fb__t,
.sm-lag .sm-flueben,
.sm-lag .sm-flueben__t {
font-family: inherit;
}
}
/* 29. september 2026 (N347): når værktøjet fylder telefonens skærm (Skift til elbil og
Ladeagenten), er resten af siden skjult, også sidens hovedoverskrift. Så kunne en skærmlæser
ikke finde den. Overskriften gøres nu læsbar for skærmlæsere igen, men står stadig usynlig
for øjet. Intet ændrer sig på skærmen. */
body.sm-aaben > main h1 {
visibility: visible;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* 11/10 2026 (Henrik valgte udkast G): knappen, der går videre til næste trin, er lysegrøn
med mørk tekst og en orange cirkel med pilen ude til højre. Målt: tekst 10,38, mod bunden 4,05.
Gælder Skift til elbil og Ladeagenten. De orange knapper er urørte. */
.sm-lag .sm-knap.sm-knap--pil{position:relative;padding:0 52px;background:#9BE7BC;color:#0E2C22;box-shadow:0 0 0 4px rgba(155,231,188,.25)}
.sm-lag .sm-knap.sm-knap--pil::after{content:"\2192";position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:#E8622A;color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
.sm-lag .sm-knap.sm-knap--pil:disabled{background:rgba(255,255,255,.18);color:#BFE0D0;box-shadow:none}
.sm-lag .sm-knap.sm-knap--pil:disabled::after{opacity:.35}
/* ============================================================
15. OKTOBER 2026 - LADEAGENTEN ENS PAA TELEFON OG COMPUTER
Alle dele staar nu i sidens skabelon. Paa telefonen flytter
laget dem ind i fire skaerme; paa computeren staar de paa een
side. Reglerne herunder er kun til de nye dele.
============================================================ */
.sm-lag.la .q { margin: 0 0 24px; }
.sm-lag.la .q__n { display: none; }
.sm-lag.la .q__h { margin: 0 0 8px; }
.sm-lag.la .q__t { font-family: var(--font-display, inherit); font-size: 17px; font-weight: 800; color: #fff; line-height: 1.3; }
.sm-lag.la .ind { margin-left: 0; }
.sm-lag.la .la-uden-h > .q__h { display: none; }
.sm-lag.la .sm-h + .q { margin-top: 12px; }
.sm-lag.la .found { margin: 4px 0 0; }
@media (min-width: 821px) {
.la .card .chips .chip { min-height: 44px; }
.la .card .la-gruppe { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; }
.la .card .la-gruppe__t { flex: 0 0 104px; margin: 0; font-family: var(--sora); font-weight: 700; font-size: var(--text-sm); color: var(--dark); }
.la .card .la-fb__gitter { display: flex; flex-wrap: wrap; gap: 8px; }
.la .card .la-fb { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px 0 12px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; font-family: var(--inter); font-weight: 600; font-size: var(--text-base); color: var(--text); }
.la .card .la-fb:hover { border-color: #BFE3D0; }
.la .card .la-fb.er-valgt { border-color: #0B7352; }
.la .card .la-fb__f,
.la .card .sm-flueben__f { flex: none; box-sizing: border-box; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #9DB3A9; background: #fff; display: flex; align-items: center; justify-content: center; color: transparent; }
.la .card .la-fb__f svg,
.la .card .sm-flueben__f svg { width: 14px; height: 14px; }
.la .card .la-fb.er-valgt .la-fb__f,
.la .card .sm-flueben.er-valgt .sm-flueben__f { background: #0B7352; border-color: #0B7352; color: #fff; }
.la .card .la-budget { max-width: 520px; }
.la .card .la-budget input[type=range] { width: 100%; accent-color: #0B7352; margin: 4px 0; }
.la .card .sm-budget__tal { font-family: var(--sora); font-weight: 700; font-size: var(--text-lg); color: var(--dark); margin: 4px 0 2px; }
.la .card .sm-budget__note { color: var(--tmuted); font-size: var(--text-sm); margin: 0 0 14px; }
.la .card .la-ejer { display: flex; gap: 8px; }
.la .card .la-ejer .skift-el__braendstof-knap { min-height: 44px; min-width: 110px; padding: 0 18px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; font-family: var(--inter); font-weight: 600; font-size: var(--text-base); color: var(--text); box-shadow: none; }
.la .card .la-ejer .skift-el__braendstof-knap.is-valgt { background: var(--dark); border-color: var(--dark); color: #fff; }
.la .card .la-ejer .skift-el__braendstof-knap.is-valgt .sm-bnavn { color: #fff; }
.la .card form.mail { flex-direction: column; align-items: stretch; gap: 10px; }
.la .card form.mail input { width: 100%; box-sizing: border-box; }
.la .card form.mail .sm-skel { display: none; }
.la .card .sm-flueben { display: flex; align-items: flex-start; gap: 10px; width: 100%; background: none; border: 0; padding: 4px 0; margin: 0; text-align: left; cursor: pointer; font-family: var(--inter); font-size: var(--text-sm); line-height: 1.45; color: var(--text); }
.la .card .sm-flueben__f { margin-top: 1px; }
.la .card form.mail .go { align-self: flex-start; margin-top: 6px; }
}
/* 15. oktober 2026, Henriks rettelser i Ladeagenten:
1. Pladefeltet er det samme som paa forsiden (stoerre tal, blinkende
lup, orange lup ved indtastning). Her saettes kun bredden.
2. Brug min lokation er orange paa computeren. */
.sm-lag.la .fh__plate { flex: 1 1 100%; width: 100%; }
@media (min-width: 821px) {
.la .card #pladeRaekke .fh__plate { flex: 0 1 290px; width: 290px; max-width: 100%; }
.la .card #brugLok { background: #E8622A; color: #fff; }
.la .card #brugLok:hover { background: #D14E1C; color: #fff; }
}
/* 15. oktober 2026: Koeb og Leje staar over skyderen. Afstanden under knapperne. */
.sm-lag.la .la-ejer + .sm-budget { margin-top: 16px; }
@media (min-width: 821px) {
.la .card .la-ejer + .la-budget { margin-top: 16px; }
}
/* 15. oktober 2026, Henriks beslutning: Jeg har elbil nu er en knap for sig,
og tiderne vaelges paa hjulet. Hjulet er det samme som foer paa telefonen. */
.la .la-hjul.er-slukket .sm-hjul__baand { opacity: .35; }
.sm-lag.la .la-tidvalg { display: flex; flex-direction: column; gap: 10px; }
.sm-lag.la .la-harbil { width: 100%; min-height: 46px; border-radius: 999px; font-size: 16px; font-weight: 700; }
.sm-lag.la .la-harbil.on { background: #A8E7C6; color: #043524; border-color: #A8E7C6; }
.sm-lag.la .la-hjul { margin: 0; }
.sm-lag.la .la-hjul.er-slukket .sm-hjul__rul button.er-valgt { color: #BCD9C8; font-size: 16px; }
@media (min-width: 821px) {
.la .card .la-tidvalg { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.la .card .la-harbil { min-height: 44px; }
.la .card .la-hjul { width: 290px; max-width: 100%; height: 132px; margin: 0; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); }
.la .card .la-hjul::before { height: 43px; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); }
.la .card .la-hjul::after { height: 43px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.55)); }
.la .card .la-hjul .sm-hjul__baand { top: 43px; height: 44px; background: #EAF7F0; }
.la .card .la-hjul .sm-hjul__rul { padding: 43px 0; }
.la .card .la-hjul .sm-hjul__rul button { height: 44px; font-family: var(--inter); font-size: var(--text-base); font-weight: 600; color: #5F6F6A; }
.la .card .la-hjul .sm-hjul__rul button.er-valgt { color: var(--dark); font-weight: 700; font-size: var(--text-base); }
.la .card .la-hjul.er-slukket .sm-hjul__rul button.er-valgt { color: #5F6F6A; font-weight: 600; }
}
/* 15. oktober 2026, Henriks rettelse paa telefonen: teksten i Jeg har elbil nu
er groen, og hjulet er lyst mintgroent i samme mint som knappen i bunden. */
.sm-lag.la .la-harbil { color: #0B7352; }
.sm-lag.la .la-harbil.on { color: #043524; }
/* 15. oktober 2026, Henriks go paa telefonen:
1. Hjulet er saa hoejt, at alle tre tider staar hele (tre raekker a 44).
2. Valgt Jeg har elbil nu er moerkegroen med hvid tekst, og hjulet
er halvt gennemsigtigt, saa det er tydeligt, hvilket svar der taeller. */
.sm-lag.la .la-harbil.on { background: #043524; border-color: #043524; color: #fff; }
.sm-lag.la .la-hjul.er-slukket { opacity: .5; }
/* 15. oktober 2026, Henriks beslutning: paa laptoppen fire knapper paa een
raekke i stedet for hjulet. Paa telefonen er hjulet uaendret. */
.sm-lag.la .la-tidknapper { display: none; }
.la .la-tidknapper { display: none; }
@media (min-width: 821px) {
.la .card .la-tidvalg { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.la .card .la-hjul { display: none; }
.la .card .la-tidknapper { display: flex; flex-wrap: wrap; gap: 8px; }
.la .card .la-tidknapper .chip { min-height: 44px; }
}
/* 15. oktober 2026, Henriks beslutning: hjulet paa telefonen er igen det moerkegroenne
glashjul som foer (som paa en iPhone), hvor tiderne foroven og forneden toner ud.
Det lyse mint og det hoejere hjul er taget af igen. Groen tekst i Jeg har elbil nu,
moerkegroen valgt knap og det daempede hjul bliver. */