/* Produktsidans stilmall. Delas av index.html och resultat.html - en enda
uppsattning tokens och komponenter, sa sidorna inte glider isar.
Formen kommer fran inspiration/inspirationforlightversion 2.0.html: varmt papper,
skogsgron accent, Fraunces i rubrikerna, Public Sans i texten, IBM Plex Mono i
allt som ar kod, tal och etiketter. Appen anvander SAMMA tokens och SAMMA rytm -
sida och app ska kannas som en produkt, inte som tva.
MATTEN AR UPPTAGNA UR FILEN, INTE GISSADE. Den renderade filen mattes med
getComputedStyle (2026-09-10):
bradtext 16px/1.6 wrap 880px med 28px sidopadding
avsnitt 52px isar omslaget 56/32 med 32px under
h1 40px/1.1 ingressen 18px, 62ch, 14px under rubriken
metarad 28px gap, 22px over avsnittsrubrik 23px pa en linje i black
bandet 40px efter kort 12px radie, 22-24px innerpadding
rutnat 1px springor skuggan i TVA lager: .06 nara + .18 djup
Balansen i filen ar matt och rytm - det ar darfor den känns lugn.
Typsnitten ar MEDLEVERERADE (fonts/), inte hamtade fran ett CDN. Tidigare lag de
i en lank till Google Fonts har, medan appen hade sina egna filer: tva sanningar
om samma produkt, och resultat.html fick inga typsnitt alls (lanken stod bara i
index.html). */
:root {
color-scheme: light;
--yta:#F6F2E9;
--panel:#FFFDF8;
--panel-2:#EFE9DB;
--linje:#D8D5C8;
--text:#1C241F;
--text-svag:#4A534C;
--liggare:#2F6F4F; --liggare-ljus:#3D825E;
--massing:#A8631A; --stampel:#A13B30;
/* Skuggan i tva lager, som i filen. */
--skugga:rgba(28,36,31,.16);
--skugga-nara:rgba(28,36,31,.06);
--skugga-djup:rgba(28,36,31,.18);
--mono-yta:#EFE7D3;
--bubbla-du-yta:#2C3A30; --bubbla-du-text:#F3EFE4;
--rubrikfont:"Fraunces", Georgia, "Iowan Old Style", "Palatino Linotype",
Palatino, "Times New Roman", serif;
--brodtext:"Public Sans", "Segoe UI", system-ui, sans-serif;
--monofont:"IBM Plex Mono", ui-monospace, monospace;
/* Sidans egna namn, som markupen anvander i inneboende stilar. */
--papper:var(--panel); --papper-2:var(--panel-2);
--ink:var(--text); --ink-svag:var(--text-svag);
--ink-pa-morkt:var(--text-svag);
--black:#22291F; --black-djup:#1A2018; --black-mjuk:#2C3A30;
/* Fargerna som kopplar en uppgift i brevet till sin rad i svaret. Samma tio
som appen anvander, sa grön ruta betyder samma sak pa bada stallen. */
--g-kund:#A13B30; --g-datum:#2F6F4F; --g-ordernr:#A8631A;
--g-rad1:#6C3B76; --g-rad2:#14666D;
/* Den stillsamma pulsen kring "Öppna appen" efter tio sekunder pa sidan
(se .toppmeny nav a.primar). En egen token per tema, som skuggorna
ovan - en glod kan bara stamma i ett tema. */
--inbjudan-glod:rgba(47,111,79,.20);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--yta:#141915; --panel:#1B211C; --panel-2:#212820; --linje:#333C34;
--text:#EEE8DA; --text-svag:#B7BCB1;
--liggare:#6CBF94; --liggare-ljus:#8AD0AB;
--massing:#E2A95D; --stampel:#E08B7D;
--skugga:rgba(0,0,0,.5);
--skugga-nara:rgba(0,0,0,.30);
--skugga-djup:rgba(0,0,0,.50);
--mono-yta:#232A22;
--bubbla-du-yta:#2A332B; --bubbla-du-text:#EEE8DA;
--ink-pa-morkt:var(--text-svag);
--black:#0E1310; --black-djup:#0A0E0B; --black-mjuk:#2A332B;
--g-kund:#E0705A; --g-datum:#6CBF94; --g-ordernr:#E2A95D;
--g-rad1:#B183D6; --g-rad2:#5BB8BF;
--inbjudan-glod:rgba(108,191,148,.26);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--yta:#141915; --panel:#1B211C; --panel-2:#212820; --linje:#333C34;
--text:#EEE8DA; --text-svag:#B7BCB1;
--liggare:#6CBF94; --liggare-ljus:#8AD0AB;
--massing:#E2A95D; --stampel:#E08B7D;
--skugga:rgba(0,0,0,.5);
--skugga-nara:rgba(0,0,0,.30);
--skugga-djup:rgba(0,0,0,.50);
--mono-yta:#232A22;
--bubbla-du-yta:#2A332B; --bubbla-du-text:#EEE8DA;
--ink-pa-morkt:var(--text-svag);
--black:#0E1310; --black-djup:#0A0E0B; --black-mjuk:#2A332B;
--g-kund:#E0705A; --g-datum:#6CBF94; --g-ordernr:#E2A95D;
--g-rad1:#B183D6; --g-rad2:#5BB8BF;
--inbjudan-glod:rgba(108,191,148,.26);
}
/* Typsnitten. Framtagna av tools/hamta_typsnitt.py - samma filer som appen
anvander, sa de tva ytorna inte kan glida isar i typografin. */
@font-face {
font-family:"Fraunces"; font-style:normal;
font-weight:100 900; font-display:swap;
src:url("fonts/fraunces-var-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:"Fraunces"; font-style:normal;
font-weight:100 900; font-display:swap;
src:url("fonts/fraunces-var-latin.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:"Public Sans"; font-style:normal;
font-weight:100 900; font-display:swap;
src:url("fonts/public-sans-var-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:"Public Sans"; font-style:normal;
font-weight:100 900; font-display:swap;
src:url("fonts/public-sans-var-latin.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:"IBM Plex Mono"; font-style:normal;
font-weight:400; font-display:swap;
src:url("fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:"IBM Plex Mono"; font-style:normal;
font-weight:400; font-display:swap;
src:url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:"IBM Plex Mono"; font-style:normal;
font-weight:500; font-display:swap;
src:url("fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:"IBM Plex Mono"; font-style:normal;
font-weight:500; font-display:swap;
src:url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family:"IBM Plex Mono"; font-style:normal;
font-weight:600; font-display:swap;
src:url("fonts/ibm-plex-mono-600-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family:"IBM Plex Mono"; font-style:normal;
font-weight:600; font-display:swap;
src:url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* { box-sizing:border-box; }
body {
margin:0; background:var(--yta); color:var(--text);
font:400 16px/1.6 var(--brodtext);
-webkit-font-smoothing:antialiased;
}
.mono { font-family:var(--monofont); font-variant-numeric:tabular-nums; }
h1, h2, h3 { font-family:var(--rubrikfont); font-weight:600; text-wrap:balance;
letter-spacing:-.014em; margin:0; color:var(--text); }
h1 { font-size:clamp(30px, 3.4vw, 40px); line-height:1.1; }
h2 { font-size:clamp(22px, 2.4vw, 28px); line-height:1.3; }
h3 { font-size:19px; line-height:1.35; }
p { margin:0 0 14px; max-width:68ch; }
p:last-child { margin-bottom:0; }
li { margin-bottom:6px; max-width:64ch; }
a { color:var(--liggare); text-decoration-thickness:1px; }
strong, b { font-weight:600; }
:focus-visible { outline:2px solid var(--liggare); outline-offset:3px; border-radius:3px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
/* Filens kolumn: 880px med 28px sidopadding. Sidans luft i sidled ar halva
balansen - tillsammans med textmattet pa 68ch. */
.wrap { max-width:880px; margin:0 auto; padding:0 28px; }
.smal { max-width:660px; }
/* Avsnitten skiljs at med 52px marginal, precis som i filen - inte med stor
padding upptill och nedtill, som ger luft men tappar rytmen. */
section { padding:0; margin-bottom:52px; }
.band { background:var(--panel-2); padding:52px 0; margin-bottom:52px; }
.ljus { background:var(--yta); }
.etikett { font-size:13px; letter-spacing:.08em; text-transform:uppercase;
color:var(--text-svag); font-weight:600; display:flex; align-items:center;
gap:10px; margin:0 0 6px; }
/* Pricken fran filens ogonbryn - ett litet tecken for "har borjar ett avsnitt". */
.etikett::before { content:""; width:7px; height:7px; border-radius:50%;
background:var(--liggare); flex:none; }
/* Avsnittsrubriken star pa en linje i black, som filens avsnittshuvud. */
.wrap > h2 { border-bottom:1px solid var(--text); padding-bottom:10px;
margin:12px 0 20px; }
/* ---- toppmeny: papper, samma header som appen ---- */
.toppmeny { position:sticky; top:0; z-index:50; background:var(--panel);
border-bottom:1px solid var(--linje); }
.toppmeny .wrap { display:flex; align-items:center; gap:16px; height:58px; }
.toppmeny .namn { color:var(--text); font-family:var(--rubrikfont); font-weight:600;
font-size:16.5px; letter-spacing:-.01em; }
.toppmeny nav { margin-left:auto; display:flex; align-items:center; gap:6px; }
.toppmeny nav a { color:var(--text-svag); text-decoration:none; font-size:14px;
padding:8px 12px; border-radius:8px; }
.toppmeny nav a:hover { background:var(--panel-2); color:var(--text); }
.toppmeny nav a.primar { background:var(--liggare); color:var(--panel); font-weight:600;
animation:inbjudan 1.9s ease-in-out 10s 2; }
.toppmeny nav a.primar:hover { background:var(--liggare-ljus); color:var(--panel); }
/* Framhavandet mot "Oppna appen": tio sekunder in pa sidan, tva stillsamma
pulser och sedan tyst for gott (Petters krav - en knapp som pulserar for
evigt slutar betyda nagot). Bara transform och box-shadow rör sig, sa
ingenting i layouten flyttar sig och knappen gar att klicka pa hela tiden.
`prefers-reduced-motion` stangs av av den generella regeln langre upp i
filen (`* { animation:none !important }`) - ingen egen regel behovs har. */
@keyframes inbjudan {
0%, 100% { transform:scale(1); box-shadow:0 0 0 0 transparent; }
50% { transform:scale(1.035); box-shadow:0 0 0 7px var(--inbjudan-glod); }
}
/* Växlaren för utseende. Samma knapp som i appens topprad, och samma val: nyckeln
"tema" delas mellan ytorna (se tema.js). */
.temaknapp { border:1px solid var(--linje); background:transparent; color:var(--text-svag);
width:34px; height:34px; padding:0; border-radius:8px; font-size:15px;
cursor:pointer; display:flex; align-items:center; justify-content:center; }
.temaknapp:hover { background:var(--panel-2); color:var(--text); }
/* ---- hjälte: omslaget, ordagrant som i filen ---- */
.hjalte { background:var(--yta); padding:56px 0 32px;
border-bottom:1px solid var(--linje); margin-bottom:32px; }
.hjalte h1 { margin:0; }
/* Förstasidans rubrik är en plansch, inte ett dokument: den är med flit större än
filens 40px. Undersidorna och appen behåller filens mått - planschen ropar,
dokumenten talar.
Måttet är inte valt på känsla: vid 64px mäter första meningen ("Ordern kommer
som ett mejl.") 854px och kolumnen är 824px, så rubriken bröts mitt i satsen.
Vid 60px mäter den 801px och ryms - då faller radbrytningen på meningspunkten,
vilket är hela poängen med en plansch. Ändras texten måste måttet mätas om. */
.hjalte-stor h1 { font-size:clamp(36px, 5.2vw, 60px); line-height:1.03;
letter-spacing:-.028em;
/* Rubriken fyller raden i stället för att jämna ut den. Med
text-wrap:balance (som resten av rubrikerna har) bryter
webbläsaren hellre mitt i satsen, eftersom två jämnlånga rader
"väger" mindre än en lång och en kort. Här är meningspunkten
den brytning man vill se.
Vardet ar "wrap", inte "normal": text-wrap ar en shorthand for
text-wrap-mode och text-wrap-style, och "normal" finns inte -
deklarationen kastas tyst och balance star kvar. */
text-wrap:wrap; }
.hjalte-stor .ingress { margin-top:22px; }
.hjalte .ingress { color:var(--text-svag); font-size:18px; margin-top:14px;
max-width:62ch; }
.hjalte .fot { margin:28px 0 0; padding-top:22px; border-top:1px solid var(--linje);
display:flex; flex-wrap:wrap; gap:10px 28px; color:var(--text-svag);
font-size:14px; max-width:none; }
.hjalte .fot b { color:var(--text); font-family:var(--monofont); font-weight:500; }
/* ---- hjälterad: rubrik/ingress till vänster, maskoten till höger. Egen bredare
wrap (inte .wrap:s 880px) så textspalten behåller den uppmätta 824px-bredden
ovan (kommentaren om h1 60px/801px) även med ugglan bredvid - annars bryts
den avsiktliga radbrytningen på meningspunkten. */
/* Forstasidans hjalteyta och omvandlingen ar bredare an lopande text, och delar
SAMMA kanter - rubrik, uggla, siffror och de tva arken linjerar. */
.wrap-bred { max-width:1080px; }
.hjalte-rad { display:grid; grid-template-columns:minmax(0,1fr) 300px; column-gap:28px;
align-items:center; }
.hjalte-rad .hjalte-text { min-width:0; }
/* Med ugglan bredvid ar textspalten ~700px, inte 824px - rubriken tar darfor 50px
(801px vid 60px -> 668px vid 50px), sa brytningen fortfarande faller pa
meningspunkten. Samma matning som kommentaren ovan. */
.hjalte-rad h1 { font-size:clamp(34px, 4.6vw, 50px); }
.hjalte-rad .fot { grid-column:1 / -1; }
.hjalte-figur { position:relative; margin:0; justify-self:end; }
.hjalte-uggla { display:block; width:300px; height:auto; position:relative; z-index:1; }
/* Skugga under fotterna, som i Petters skiss - ugglan star pa nagot. */
.hjalte-figur::after { content:""; position:absolute; left:18%; right:18%; bottom:-6px;
height:18px; border-radius:50%; z-index:0;
background:radial-gradient(closest-side, var(--skugga-djup), transparent); }
@media (max-width:880px) {
.hjalte-rad { grid-template-columns:1fr; }
.hjalte-figur { justify-self:center; grid-row:1; }
.hjalte-uggla { width:170px; }
}
/* ---- omvandlingen: mejl -> order, sidan vid sidan ---- */
.omvandling { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
@media (max-width:880px) { .omvandling { grid-template-columns:1fr; } }
.ark { background:var(--panel); border:1px solid var(--linje); border-radius:12px;
box-shadow:0 1px 2px var(--skugga-nara), 0 8px 24px -12px var(--skugga-djup);
overflow:hidden; }
.arkhuvud { padding:12px 18px; background:var(--panel-2);
border-bottom:1px solid var(--linje); font-size:13px; font-weight:600;
color:var(--text-svag); display:flex; justify-content:space-between; gap:12px; }
.arkinner { padding:20px; }
/* Brevet ar ett dokument, och dokument ar papper i BADA temana - samma regel som i
appen, dar en inskannad sida inte morklaggs. */
pre.brev { margin:0; white-space:pre-wrap; background:#fff; color:#191C24;
padding:20px; border-radius:8px; border:1px solid var(--linje);
font:400 13.5px/1.85 var(--monofont); }
mark { padding:1px 2px; border-radius:2px; color:inherit;
background:color-mix(in srgb, var(--f) 20%, transparent);
box-shadow:inset 0 -2px 0 var(--f); }
.falt { padding:10px 0; border-bottom:1px solid var(--linje); }
.falt:last-child { border-bottom:0; }
.faltnamn { font-size:12px; letter-spacing:.07em; text-transform:uppercase;
color:var(--text-svag); font-weight:600;
display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.chip { width:12px; height:12px; border-radius:3px; flex:none;
border:2px solid var(--f); background:color-mix(in srgb, var(--f) 22%, transparent); }
.faltvarde { font-size:15.5px; }
/* ---- mätvärden: filens rutnat med 1px springor och talen i Fraunces ---- */
.matt { display:grid; grid-template-columns:repeat(auto-fit, minmax(178px, 1fr)); gap:1px;
background:var(--linje); border:1px solid var(--linje); border-radius:10px;
overflow:hidden; margin:34px 0 8px; }
.matt > div { background:var(--panel); padding:20px 18px; }
.matt .tal { font-family:var(--rubrikfont); font-size:28px; font-weight:600;
line-height:1; font-variant-numeric:tabular-nums; }
.matt .txt { font-size:12.5px; color:var(--text-svag); margin-top:8px; }
.matt .noll .tal { color:var(--liggare); }
/* ---- flödet ---- */
.flode { display:grid; grid-template-columns:repeat(auto-fit, minmax(228px,1fr)); gap:28px;
margin-top:34px; }
.steg h3 { font-size:17px; margin-bottom:6px; }
.steg p { color:var(--text-svag); font-size:15px; }
.steg .streck { height:3px; background:var(--f); border-radius:2px; width:44px;
margin-bottom:14px; }
/* ---- skyddsnätet ---- */
.natet { margin:30px 0 0; border-top:1px solid var(--linje); }
.natet > div { display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:14px 30px;
padding:20px 0; border-bottom:1px solid var(--linje); align-items:baseline; }
@media (max-width:640px) { .natet > div { grid-template-columns:1fr; gap:5px; } }
.natet dt { font-weight:600; }
.natet dd { margin:0; color:var(--text-svag); }
/* ---- chatt + diagram ---- */
.samtal { display:flex; flex-direction:column; gap:14px; }
.bubbla { border-radius:12px; padding:16px 18px; max-width:82%; font-size:15.5px; }
.bubbla p { max-width:none; }
.bubbla.du { background:var(--bubbla-du-yta); color:var(--bubbla-du-text);
align-self:flex-end; }
.bubbla.svar { background:var(--panel); border:1px solid var(--linje);
align-self:flex-start; }
.kallrad { font-size:12.5px; color:var(--text-svag); margin-top:9px; }
.stapelrad { display:grid; grid-template-columns:170px 1fr 118px; align-items:center;
gap:12px; padding:3px 0; font-size:13.5px; }
.stapelrad .namn { color:var(--text-svag); overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }
.stapelrad .bar { height:17px; border-radius:4px; background:var(--liggare); }
.stapelrad .v { text-align:right; font-family:var(--monofont); }
/* ---- ärlighet: filens tonade ruta med en grön kant ---- */
.oppet { background:var(--panel); border:1px solid var(--linje);
border-left:4px solid var(--massing);
box-shadow:0 1px 2px var(--skugga-nara), 0 8px 24px -12px var(--skugga-djup);
padding:18px 20px; border-radius:0 8px 8px 0; margin:18px 0; }
.oppet h3 { margin-bottom:6px; }
.oppet p { color:var(--text-svag); }
.oppet p:last-child { margin-bottom:0; }
/* Filens sidfot: en harfin linje, 24px over texten, 64px over linjen - och luft
nedtill sa sidan inte tar slut mitt i ett andetag. */
footer { background:var(--yta); border-top:1px solid var(--linje);
padding:24px 0 88px; margin-top:64px;
font-size:13px; color:var(--text-svag); }
footer b { color:var(--text); }
footer a { color:var(--liggare); }
footer p { max-width:none; }
.radlista { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:12px; }
.radlista span { font-family:var(--monofont); font-size:13px; }
/* Skärmbild när den finns, annars det återskapade gränssnittet under. */
.skarmbild { display:block; width:100%; border-radius:12px;
border:1px solid var(--linje); }
.bildtext { font-size:13.5px; color:var(--text-svag); margin-top:9px; }
/* Skärmbilder. Den ljusa visas i ljust läge, den mörka i mörkt - en bild i fel
temperatur ser trasig ut bredvid en sida som anpassar sig. */
.bild { margin:30px 0 0; }
.bild img { display:block; width:100%; border-radius:12px;
border:1px solid var(--linje);
box-shadow:0 1px 2px var(--skugga-nara), 0 8px 24px -12px var(--skugga-djup); }
.bild .morkt { display:none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .bild .ljust { display:none; }
:root:not([data-theme="light"]) .bild .morkt { display:block; }
}
:root[data-theme="dark"] .bild .ljust { display:none; }
:root[data-theme="dark"] .bild .morkt { display:block; }
.bild figcaption { font-size:13.5px; color:var(--text-svag); margin-top:10px; }
.bildrad { display:grid; gap:22px; grid-template-columns:1fr 1fr; margin-top:30px; }
@media (max-width:820px) { .bildrad { grid-template-columns:1fr; } }