og bygge en ny? Fordi
.bar-top huser #logudBtn, #kodeBtn, #kalTopBtn, #barHandling
OG profil.js' runde profilbillede — profil.js indsætter det
lige før #logudBtn. Skjules baren, forsvinder «Log ud».
Derfor bliver baren stående og får nyt tøj på.
============================================================ */
body.ds-ramme header{
position:sticky;top:0;z-index:15;
background:color-mix(in srgb,var(--ds-bg) 82%,transparent);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--ds-linje);box-shadow:none;
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
body.ds-ramme header{background:var(--ds-bg)}
}
body.ds-ramme .bar{max-width:none;margin:0;padding:10px 26px}
body.ds-ramme .bar-top{gap:12px;flex-wrap:wrap}
/* Søgefeltet skal kunne vokse, men aldrig skrumpe til to linjer tekst */
body.ds-ramme .ds-soeg{flex:1 1 260px;min-width:230px}
/* #barHandling er genvejene «💬 Beskeder · 📬 Feedback · 🎧 Live-chat ·
🎫 Int. support» med tællere. Skinnen viser nu de SAMME fire med de
SAMME tal, og to sæt af samme genveje på én skærm er netop det rod,
version 2 skal af med. Elementet bliver stående og bliver fyldt som
hidtil — det er kun skjult, så intet JavaScript kan gå i stykker. */
body.ds-ramme #barHandling{display:none}
/* notifikations-beskeden og «nævnt» fik deres margen af main's gamle
sidepolstring, som er væk — de får den nu direkte */
body.ds-ramme #admPush,body.ds-ramme #lcaNaevnt{margin:14px 0 0}
/* ---------- #admBar — univers-retur.js' faste admin-linje ----------
Den mørke stribe under topbjælken kommer fra univers-retur.js og har
altid været der. Men fire af dens punkter — 🗂 Admin-central, 🗨 Intern,
🗒️ Noter og 🔎 søg — står nu ALLE i skinnen til venstre og i søgefeltet
foroven. To sæt af samme genveje på én skærm er præcis det rod, version
2 skal af med, og den mørke bjælke skar desuden siden midt over.
🔴 Punkterne SKJULES, de fjernes ikke. univers-retur.js er en fælles fil
på 111 KB, som begge universer bruger; vi rører ikke dens kode. Alt det,
der IKKE findes andre steder, bliver stående: universskifteren, 🧰
programmer, 📌 seddel, 👋 status, chat-vagten og 🔑 kodeord. */
/* Rækken selv forsvinder — knapperne er flyttet op i topbjælken af
dsAdmBarFlyt(). Skulle flytningen af en eller anden grund ikke lykkes,
står rækken tilbage i en form, der stadig ser rigtig ud. */
body.ds-ramme #admBar{
background:var(--ds-kort);border-bottom:1px solid var(--ds-linje);box-shadow:none;
}
body.ds-ramme #admBar .ab-i{
max-width:none;margin:0;padding:7px 26px;gap:8px;
justify-content:flex-start;flex-wrap:wrap;
}
body.ds-ramme #admBar .ab-i>*{flex:0 0 auto}
/* værktøjerne i topbjælken */
.ds-verk{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
body.ds-ramme .ds-verk a,
body.ds-ramme .ds-verk .ab-klar{
display:inline-flex;align-items:center;gap:5px;
color:var(--ds-ink);background:var(--ds-kort);
border:1px solid var(--ds-linje);border-radius:999px;
font-size:.76rem;font-weight:700;padding:6px 11px;white-space:nowrap;
text-decoration:none;cursor:pointer;font-family:var(--font);
}
body.ds-ramme .ds-verk a:hover,
body.ds-ramme .ds-verk .ab-klar:hover{border-color:var(--blaa);background:var(--ds-flade)}
body.ds-ramme .ds-verk .ab-klar.gr{border-color:rgba(147,213,0,.55);background:rgba(147,213,0,.12);color:#4c7a00}
@media(max-width:900px){
body.ds-ramme .ds-verk{order:4;overflow-x:auto;max-width:100%;flex-wrap:nowrap;scrollbar-width:none}
body.ds-ramme .ds-verk::-webkit-scrollbar{display:none}
}
body.ds-ramme #admBar .ab-m,
body.ds-ramme #abCentral,
body.ds-ramme #abIntern,
body.ds-ramme #abNoter,
body.ds-ramme #abSoeg{display:none!important}
body.ds-ramme #admBar a,
body.ds-ramme #admBar .ab-klar{
color:var(--ds-ink);background:var(--ds-flade);
border:1px solid var(--ds-linje);border-radius:10px;
font-size:.78rem;font-weight:700;padding:5px 11px;
}
body.ds-ramme #admBar a:hover,
body.ds-ramme #admBar .ab-klar:hover{border-color:var(--blaa)}
/* Den gule seddelstribe (fastgjorte noter) får samme sidemargen og
samme kantrunding som alt andet. 🔴 Den flyttes IKKE med CSS: den er
ikke et direkte barn af main, og et forsøg med flex/order ville ændre
layoutet for alle atten afsnit på siden for at flytte ét element. */
body.ds-ramme #bnotStribe,body.ds-ramme #notStribe{
margin:14px 26px 0;border-radius:var(--ds-r);
}
/* pop-ud-knapperne lå nederst til venstre — dér hvor skinnen nu er */
/* 🔴 !important er nødvendigt her, og det er ikke dovenskab: core.js
sætter #poFab med style.cssText («position:fixed;bottom:18px;left:18px»),
og en inline-stil slår enhver regel i et stilark. Uden dette lå de to
pop-ud-knapper oven på skinnens nederste punkter — Rettigheder og
Guider kunne simpelthen ikke rammes. core.js ejes af os, men den er
fælles for begge universer, så rettelsen hører hjemme i designlaget. */
/* 🔴 06.08.2026: knapperne er FLYTTET ind i skinnen (dsPopUdISkinnen).
Den gamle regel skubbede dem bare uden for skinnen — og dermed ind over
indholdet, hvor de spiste klik på hvert kort, der rullede under dem.
Reglen bliver stående for det tilfælde, at flytningen ikke er sket
endnu (fx hvis adm.js er ældre end denne fil et øjeblik under en
udrulning). Er de flyttet, bærer de klassen .ds-poud, og så gælder
afsnittet nedenfor i stedet. */
body.ds-ramme #poFab:not(.ds-poud){left:262px!important}
body.ds-ramme #poFab.ds-poud{
position:static!important;left:auto!important;bottom:auto!important;
display:flex;flex-direction:column;gap:4px;margin:6px 0 0;
padding-top:7px;border-top:1px solid rgba(255,255,255,.1);
}
body.ds-ramme #poFab.ds-poud button{
display:flex;align-items:center;gap:9px;width:100%;text-align:left;
background:none!important;color:rgba(220,234,243,.72)!important;
box-shadow:none!important;border-radius:9px!important;
padding:7px 10px!important;font-size:.78rem!important;font-weight:600!important;
}
body.ds-ramme #poFab.ds-poud button:hover{
background:rgba(255,255,255,.09)!important;color:#fff!important;
}
/* 🔴 På telefonen er der ikke to vinduer at stille ved siden af hinanden,
og skinnen findes slet ikke. Så er knappen kun i vejen. */
@media(max-width:900px){ body.ds-ramme #poFab{display:none!important} }
/* 🔴 Sidepolstringen SKAL blive. main havde «padding:0 22px», og den
holdt hvert eneste af de 22 områder inde på skærmen. Fjernede vi den
for at give forsiden fuld bredde, stak område-bjælken og tabellerne
ud i højre side på en telefon — i alle områder undtagen Overblik.
Nu ligger polstringen på main, og forsidens egne blokke har ingen
vandret margen af sig selv. */
body.ds-ramme main{max-width:none;margin:0;padding:0 26px 40px}
body.ds-ramme .sek{margin-top:0}
body.ds-ramme footer{background:none;color:var(--ds-ink2);margin-top:0}
body.ds-ramme footer .f-i,body.ds-ramme footer .bund{display:none}
/* skinnen bærer logoet, så hjemlinket er dobbeltkonfekt — indtil
skinnen falder væk på en telefon, hvor det er den eneste vej hjem */
/* 🔴 :not(.ds-alene) — reglen gjaldt FØR begge universer. Men kun
adm-universet har en skinne til at bære logoet; borgeren har ingen, og
dér forsvandt mærket helt på en pc. Fundet 05-08 ved at måle, hvorfor
topbjælken startede med søgefeltet. */
@media(min-width:901px){ body.ds-ramme:not(.ds-alene) .hjemlink{display:none} }
/* 🔴 Mobil-rettelser til brolægningen SKAL stå her — altså EFTER de
almindelige regler ovenfor. Stod de i afsnit 10, ville de blive slået
af reglerne her: samme vægt, og den sidste vinder. Kontrollen fangede
det; det var samme fælde som skinnen på telefonen. */
@media(max-width:900px){
body.ds-ramme .bar{padding:9px 14px}
body.ds-ramme main{padding:0 14px 86px}
body.ds-ramme{background:var(--ds-bg)}
body.ds-ramme #poFab{left:14px!important;bottom:74px!important}
body.ds-ramme #admBar .ab-i{padding:7px 14px}
body.ds-ramme #bnotStribe,body.ds-ramme #notStribe{margin-left:14px;margin-right:14px}
/* 🔴 Søgefeltet skal have sin EGEN linje. Reglen står her og ikke i
afsnit 10, fordi «body.ds-ramme .ds-soeg» ovenfor ellers vinder:
højere vægt slår en media-forespørgsel, uanset rækkefølge. */
body.ds-ramme .ds-soeg{flex:1 0 100%;max-width:none;min-width:0;order:2}
body.ds-ramme #aFab{bottom:82px}
}
/* ============================================================
12 · MØRKT TEMA
------------------------------------------------------------
Sættes som data-tema="moerk" på . Valget huskes i
nøglen hf_tema (målt ledig — de eksisterende hf_*-nøgler er
hf_2fa_enhed, hf_adm_hop, hf_adm_retur, hf_logo_www_header,
hf_pop_sess og hf_pwa_luk).
⚠️ Kun ds-laget er mørkt herunder. De GAMLE skærmbilleder
følger først med, når stil.css' egne variabler også sættes om
— det er trin 3, og det kræver at de 548 farver, der IKKE er
husets otte mærkefarver, får en mørk makker først. Indtil da
ville en global omskiftning give sort tekst på sort flade.
============================================================ */
html[data-tema="moerk"]{
--ds-bg:#0c1722; --ds-flade:#101f2c; --ds-kort:#15283a;
--ds-ink:#eaf2f8; --ds-ink2:#94a9ba;
--ds-linje:rgba(255,255,255,.09); --ds-linje2:rgba(255,255,255,.17);
--ds-skinne:#0a1420; --ds-skinne-ink:rgba(255,255,255,.55);
--ds-s1:0 1px 2px rgba(0,0,0,.30), 0 8px 22px rgba(0,0,0,.28);
--ds-s2:0 2px 4px rgba(0,0,0,.35), 0 20px 44px rgba(0,0,0,.45);
}
html[data-tema="moerk"] .ds-pille.ds-god{color:#b5e75a;background:rgba(147,213,0,.14)}
html[data-tema="moerk"] .ds-tk .ds-mrk.ds-god{color:#b5e75a}
html[data-tema="moerk"] .ds-velkomst{box-shadow:0 24px 60px rgba(0,0,0,.5)}
/* de nye dele fra afsnit 7 og 8 skal have en mørk makker, ellers står de
som lyse huller på en mørk flade, når flaget engang vendes */
html[data-tema="moerk"] .ds-kort .ds-med{
background:linear-gradient(140deg,rgba(60,180,229,.22),rgba(147,213,0,.16));
box-shadow:inset 0 0 0 1px rgba(60,180,229,.26);
}
html[data-tema="moerk"] .ds-panel .ds-mrk{color:#b5e75a}
/* ============================================================
14 · BPA-UNIVERSET (borgeren) — samme byggeklodser, ingen skinne
------------------------------------------------------------
Borgeren har 13 kasser, ikke 23 områder, og hun har sin egen
vandrette menu i forvejen. En skinne til venstre ville være en
mur foran en dør, der allerede er åben. Derfor: én spalte.
🔴 Fliserne beholder klassen .flise og attributten data-flise.
borger.js' forsideAnvend() finder dem på præcis dem — den
omdøber, skjuler og OMROKERER dem efter admins opsætning. Vi
giver dem nyt tøj; vi rører ikke navnene.
============================================================ */
body.ds-ramme.ds-alene{grid-template-columns:1fr;background:var(--ds-bg)}
/* forsidebilledet erstattes af velkomstbåndet — videoen flyttes med
JavaScript ned i sit eget felt, så den ikke går tabt */
body.ds-ramme.ds-alene .hero{display:none}
/* de to gamle striber foldes ind i båndet: nyheder ét sted, frister ét sted */
body.ds-ramme.ds-alene #nytBanner,body.ds-ramme.ds-alene #hjulBanner{display:none!important}
/* søgefeltet flytter op i topbjælken (samme felt, samme binding) */
/* 🔴 flex-grundlaget skal være 320 og ikke 260: med 260 blev feltet aldrig
bredere end sit grundlag, når der var plads nok i rækken, og det stod som
en lille stump ude i venstre side ved siden af en meter tom bjælke.
Og vokse-faktoren skal være HØJERE end fyldets: .ds-fyld er flex:1, så
med samme faktor deler de den frie plads ligeligt — og feltet blev ved
at være det halve af, hvad der var plads til. */
/* 🔴🔴 FEMTE GANG: en inline-stil slår ethvert stilark.
#soegBar bærer margin:26px auto 68px DIREKTE i index.html — den margin
stammer fra dengang feltet stod midt på forsiden under forsidebilledet.
Uden !important stod der 94 px luft omkring feltet oppe i topbjælken,
og på en telefon skubbede det akutnummeret ned på sin egen fjerde linje
med 77 px tomt over sig. Målt, ikke gættet. */
body.ds-ramme.ds-alene #soegBar{
max-width:520px;margin:0!important;padding:0!important;
flex:3 1 460px;min-width:240px;gap:8px;
}
body.ds-ramme.ds-alene #soegFelt{
border:1px solid var(--ds-linje)!important;border-radius:13px!important;
padding:9px 13px!important;font-size:.86rem!important;box-shadow:none!important;
background:var(--ds-kort)!important;
}
body.ds-ramme.ds-alene #soegFelt::placeholder{color:var(--ds-ink2);opacity:1}
body.ds-ramme.ds-alene #soegFelt:focus{border-color:var(--blaa)!important;outline:none}
/* knappen bliver en rolig firkant i stedet for en blå cirkel — den skal
ligne resten af topbjælken, ikke stjæle den */
body.ds-ramme.ds-alene #soegKnap{
width:38px!important;height:38px!important;font-size:.95rem!important;
box-shadow:none!important;border-radius:12px!important;
background:var(--ds-flade)!important;color:var(--ds-ink2)!important;
border:1px solid var(--ds-linje)!important;
}
body.ds-ramme.ds-alene #soegKnap:hover{border-color:var(--blaa)!important;color:var(--ds-ink)!important}
/* akutnummeret som pille i toppen — det vigtigste på hele siden må ikke
ligge i et forsidebillede, der ruller væk */
.ds-akut{
display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 14px;
font-size:.8rem;font-weight:800;background:var(--roed);color:#fff;text-decoration:none;
box-shadow:0 6px 18px rgba(231,0,76,.28);white-space:nowrap;
}
.ds-akut:hover{transform:translateY(-1px)}
/* ---------- flisegitteret ---------- */
body.ds-ramme.ds-alene .fliser{
display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));
gap:13px;margin-top:0;
}
body.ds-ramme.ds-alene .flise{
background:var(--ds-kort);border:1px solid var(--ds-linje);border-radius:var(--ds-r);
padding:17px 17px 15px;box-shadow:var(--ds-s1);gap:9px;
transition:transform var(--ds-puls),box-shadow var(--ds-puls),border-color var(--ds-puls);
}
body.ds-ramme.ds-alene .flise:hover{transform:translateY(-4px);box-shadow:var(--ds-s2);border-color:var(--ds-linje2)}
body.ds-ramme.ds-alene .flise .blob{
width:42px;height:42px;border-radius:13px;font-size:1.22rem;
background:var(--ds-flade)!important;border:1px solid var(--ds-linje);
color:inherit;box-shadow:none!important;transition:transform var(--ds-puls);
}
body.ds-ramme.ds-alene .flise:hover .blob{transform:scale(1.06) rotate(-3deg)}
body.ds-ramme.ds-alene .flise h3{font-size:.98rem;letter-spacing:-.01em}
body.ds-ramme.ds-alene .flise p{color:var(--ds-ink2);font-size:.82rem;line-height:1.45}
body.ds-ramme.ds-alene .flise .pil{font-size:.83rem}
body.ds-ramme.ds-alene .flise .ny{
top:16px;right:14px;transform:none;background:var(--roed);color:#fff;
border-radius:999px;padding:2px 9px;font-size:.7rem;font-weight:800;max-width:60%;
}
/* ---------- HF Vagtplan: størst, fordi den har mest at sige ---------- */
body.ds-ramme.ds-alene .flise.vp{
grid-column:1/-1;order:-1;flex-direction:row;align-items:center;gap:20px;
padding:24px 26px;border:1px solid rgba(60,180,229,.30);
background:linear-gradient(120deg,#14293c 0%,#1c3d55 55%,#245a72 100%);
box-shadow:0 20px 50px rgba(20,41,60,.30);
}
body.ds-ramme.ds-alene .flise.vp::before,
body.ds-ramme.ds-alene .flise.vp::after{opacity:.85}
body.ds-ramme.ds-alene .flise.vp .blob{
width:64px;height:64px;flex:none;border-radius:20px;font-size:1.9rem;
background:linear-gradient(135deg,var(--groen),var(--blaa))!important;border:0;
box-shadow:0 12px 30px rgba(147,213,0,.30)!important;
}
body.ds-ramme.ds-alene .flise.vp .vp-tekst{flex:1;min-width:0}
body.ds-ramme.ds-alene .flise.vp h3{font-size:1.35rem;color:#fff}
body.ds-ramme.ds-alene .flise.vp p{color:#c6dbea;font-size:.92rem;max-width:60ch}
body.ds-ramme.ds-alene .flise.vp .vp-bund{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none;
}
body.ds-ramme.ds-alene .flise.vp .pil{
background:#fff;color:var(--moerk);border-radius:12px;padding:10px 17px;
font-size:.88rem;font-weight:800;box-shadow:0 8px 22px rgba(0,0,0,.25);
transition:transform var(--ds-puls),box-shadow var(--ds-puls);
}
body.ds-ramme.ds-alene .flise.vp:hover .pil{
color:var(--moerk);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.32);
}
/* ---- 🔌 tænd/sluk for AI'en ---- */
#aiKontakt{margin:0 0 20px}
#aiKontakt *{box-sizing:border-box}
.sn-aikort{background:var(--ds-kort);border:1px solid rgba(147,213,0,.45);
border-radius:var(--ds-r);box-shadow:var(--ds-s1);padding:17px 20px}
.sn-aikort.sn-slukket{border-color:rgba(231,0,76,.45);background:rgba(231,0,76,.04)}
.sn-ai-t{display:grid;gap:4px}
.sn-ai-t b{font-size:1.02rem}
.sn-ai-t span{color:var(--ds-ink2);font-size:.9rem;font-weight:650}
.sn-ai-hvem{margin:10px 0 0;color:var(--ds-ink2);font-size:.83rem;font-weight:700}
/* ---- 💡 ønsker ---- */
.sn-m.sn-t-nyt{background:rgba(18,41,60,.07);color:#4a5f70}
.sn-m.sn-t-overvejer{background:rgba(60,180,229,.16);color:#0d5b7a}
.sn-m.sn-t-planlagt{background:rgba(122,90,248,.14);color:#4a2ec0}
.sn-m.sn-t-igang{background:rgba(245,166,35,.20);color:#8a5a00}
.sn-m.sn-t-kom{background:rgba(147,213,0,.22);color:#3f5c00}
.sn-m.sn-t-afvist,.sn-m.sn-t-dublet{background:rgba(18,41,60,.07);color:#5b6d7d}
.sn-m.sn-t-findes{background:rgba(60,180,229,.12);color:#12546e}
.sn-m.sn-vej{background:rgba(122,90,248,.14);color:#4a2ec0}
.sn-m.sn-fra{background:rgba(245,166,35,.18);color:#8a5a00}
.sn-m.sn-trods{background:rgba(245,166,35,.22);color:#8a5a00}
.sn-koereplan{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 8px}
.sn-kol{background:rgba(255,255,255,.5);border:1px solid var(--ds-linje);
border-radius:var(--ds-r);padding:12px}
.sn-kol h4{margin:0 0 10px;font-size:.78rem;font-weight:850;letter-spacing:.08em;
text-transform:uppercase;color:var(--ds-ink2);display:flex;gap:8px;align-items:center}
.sn-kol h4 i{font-style:normal;background:rgba(18,41,60,.07);border-radius:999px;
padding:1px 8px;font-size:.72rem}
.sn-mini{display:block;width:100%;text-align:left;font:inherit;color:inherit;
background:var(--ds-kort);border:1px solid var(--ds-linje);border-radius:12px;
padding:11px 13px;margin:0 0 8px;cursor:pointer;box-shadow:var(--ds-s1)}
.sn-mini:hover{border-color:rgba(60,180,229,.5)}
.sn-mini b{display:block;font-size:.9rem;line-height:1.35;margin:0 0 5px}
.sn-mini-u{display:flex;gap:8px;align-items:center;color:var(--ds-ink2);
font-size:.76rem;font-weight:750;flex-wrap:wrap}
.sn-onskeliste{display:grid;gap:10px}
.sn-onske{background:var(--ds-kort);border:1px solid var(--ds-linje);border-radius:var(--ds-r);
box-shadow:var(--ds-s1);padding:15px 18px;cursor:pointer;
transition:box-shadow .22s cubic-bezier(.2,.7,.3,1),border-color .22s cubic-bezier(.2,.7,.3,1)}
.sn-onske:hover{box-shadow:var(--ds-s2);border-color:rgba(60,180,229,.5)}
.sn-onske.sn-lukket{opacity:.72}
.sn-onske h3{margin:6px 0 5px;font-size:1.04rem}
.sn-onske p{margin:0 0 10px;color:var(--ds-ink2);font-size:.92rem}
.sn-onskefod{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
color:var(--ds-ink2);font-size:.8rem;font-weight:750}
.sn-op{display:inline-flex;align-items:center;gap:7px;font:inherit;background:var(--ds-flade);
border:1px solid var(--ds-linje2);border-radius:999px;padding:5px 13px;
font-size:.82rem;font-weight:850;cursor:pointer;color:var(--ds-ink)}
.sn-op:hover{border-color:var(--blaa,#3cb4e5)}
.sn-op.sn-paa{background:rgba(60,180,229,.16);border-color:rgba(60,180,229,.5);color:#0d5b7a}
.sn-sti{display:flex;align-items:flex-start;margin:18px 0 0;flex-wrap:wrap}
.sn-sti div{flex:1;min-width:96px;position:relative;padding:0 4px;text-align:center}
.sn-sti div::before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;
background:var(--ds-linje2)}
.sn-sti div:first-child::before{left:50%}
.sn-sti div:last-child::before{right:50%}
.sn-sti i{position:relative;display:block;width:20px;height:20px;margin:0 auto 7px;
border-radius:50%;background:var(--ds-kort);border:2.5px solid var(--ds-linje2)}
.sn-sti span{font-size:.76rem;font-weight:800;color:var(--ds-ink2);line-height:1.25;display:block}
.sn-sti div.sn-gjort i{background:var(--groen,#93d500);border-color:var(--groen,#93d500)}
.sn-sti div.sn-gjort::before{background:var(--groen,#93d500)}
/* 🔴 «sn-her», ikke «sn-nu»: .sn-besk-agtige navne er husets. Fjerde gang
huset roerer et stylesheet — tredje gang kostede et statustrin en hel kasse. */
.sn-sti div.sn-her i{background:var(--blaa,#3cb4e5);border-color:var(--blaa,#3cb4e5);
box-shadow:0 0 0 5px rgba(60,180,229,.18)}
.sn-sti div.sn-her span{color:var(--ds-ink)}
.sn-band-luk{background:rgba(18,41,60,.05);color:var(--ds-ink2)}
.sn-band-trods{background:rgba(245,166,35,.14);color:#8a5a00}
.sn-svar{margin:18px 0 0;padding:16px 19px;border-radius:var(--ds-r);
background:linear-gradient(105deg,rgba(147,213,0,.12),rgba(147,213,0,.04));
border:1px solid rgba(147,213,0,.35)}
.sn-svar b{display:block;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
color:#4a6b00;margin:0 0 5px}
.sn-svar p{margin:0}
.sn-komliste{display:grid;gap:10px;margin:12px 0 0}
.sn-kom{background:var(--ds-kort);border:1px solid var(--ds-linje);border-radius:12px;padding:12px 15px}
.sn-kom-ejer{background:rgba(147,213,0,.07);border-color:rgba(147,213,0,.3)}
.sn-kom-hv{display:flex;gap:9px;align-items:center;color:var(--ds-ink2);
font-size:.78rem;font-weight:800;margin:0 0 5px;flex-wrap:wrap}
.sn-kom p{margin:0;font-size:.93rem}
.sn-komind{flex:1;min-width:200px;border:1px solid var(--ds-linje2);border-radius:12px;
padding:10px 14px;font:inherit;font-size:.92rem;outline:0;background:var(--ds-kort);color:inherit}
.sn-venter{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:13px 17px;
border-radius:var(--ds-r);background:rgba(231,0,76,.08);border:1px solid rgba(231,0,76,.3);
font-weight:800;color:#a8003a;flex-wrap:wrap}
/* ══════════════ 📥 TIL GODKENDELSE ══════════════
🔴 Tre slags kort, tre farver i venstre kant — kladde, forslag, besked.
Man skal kunne se HVAD der venter, før man læser. Farven er kun kanten:
tre fyldte flader ved siden af hinanden bliver et rodet bord. */
/* 📷 skærmbilleder på en opdatering.
🔴 Rammen er lys og tydelig, men billedet fylder aldrig mere end kortet:
et skærmbillede skal hjælpe med at genkende noget, ikke overtage siden. */
/* «Hvad sker der, når jeg trykker Gem» — den linje, der skifter, mens man
klikker. 🔴 Den er stor og tydelig med vilje: den skal ikke kunne læses
forkert, som reglen i småt blev det. */
.sn-folge{margin:6px 0 14px;padding:12px 15px;border-radius:13px;font-size:.9rem;
font-weight:700;line-height:1.5;border:1px solid var(--ds-linje2);background:var(--ds-flade)}
.sn-folge b{font-weight:850}
.sn-fo-ok{background:rgba(147,213,0,.10);border-color:rgba(147,213,0,.42)}
.sn-fo-varm{background:rgba(231,0,76,.08);border-color:rgba(231,0,76,.32)}
.sn-fo-graa{background:var(--ds-flade);color:var(--ds-ink2)}
/* 👁 «vis mig, hvad der ville blive sendt» — ordret, som teksten er.
🔴 Bevidst en rå tekstblok: den skal se ud som det, den ER, ikke som en
pæn opsummering. En garanti, man ikke kan se, er kun en påstand. */
.sn-konvolut{margin:12px 0 0;padding:13px 15px;border-radius:12px;white-space:pre-wrap;
background:var(--ds-flade);border:1px solid var(--ds-linje2);font-size:.82rem;
line-height:1.55;max-height:340px;overflow:auto;font-family:ui-monospace,Menlo,Consolas,monospace}
.sn-billeder{display:grid;gap:9px;margin:10px 0 2px}
.sn-billed{margin:0;display:grid;gap:6px}
.sn-billed img{display:block;width:100%;max-height:420px;object-fit:contain;
object-position:left top;border-radius:12px;border:1px solid var(--ds-linje2);
background:var(--ds-flade)}
.sn-billed figcaption{font-size:.83rem;font-weight:700;color:var(--ds-ink2)}
/* ══════ 🔴 11.08.2026 — ET TRINBILLEDE SKAL ILLUSTRERE TRINNET,
IKKE OVERTAGE DET.
Soeren, da de foerste kom paa: «billederne er alt for store, det ser ikke
elegant ud». Han har ret. `.sn-billed` er lavet til et skaermbillede paa
et kort i tidslinjen, hvor det ER indholdet — fuld bredde, 420 px hoejt.
Paa et trin er billedet en fodnote til én saetning, og et halvsides
billede mellem punkt 3 og 4 braekker listen midt over.
To stoerrelser, to formaal:
· toppen — «hvad er det for en skaerm?» stort, men ikke halvanden
skaerm hoejt.
· trinnet — «hvor er det, jeg trykker?» smalt nok til at oejet bliver
i listen, og med luft nok til at det ikke klaeber. */
.sn-billed.sn-topbil{margin:0 0 16px}
.sn-billed.sn-topbil img{max-height:330px}
.sn-trin .sn-billed.sn-trinbil{max-width:430px;margin:9px 0 6px}
.sn-trin .sn-billed.sn-trinbil img{max-height:210px;border-radius:10px}
@media(max-width:640px){
.sn-trin .sn-billed.sn-trinbil{max-width:100%}
.sn-billed.sn-topbil img{max-height:240px}
}
.sn-bplads{padding:22px 16px;border-radius:12px;border:1px dashed var(--ds-linje2);
background:var(--ds-flade);color:var(--ds-ink2);font-size:.85rem;font-weight:700;text-align:center}
.sn-vliste{display:grid;gap:11px}
.sn-vkort{padding:15px 18px 15px 20px;border-radius:var(--ds-r);background:var(--ds-kort);
border:1px solid var(--ds-linje2);border-left:4px solid var(--ds-linje2);display:grid;gap:7px}
.sn-v-kladde{border-left-color:#f0a500}
.sn-v-forslag{border-left-color:var(--blaa,#3cb4e5)}
.sn-v-besked{border-left-color:#e7004c}
.sn-vhoved{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sn-vf{font-weight:800;font-size:.87rem;color:var(--ds-ink2)}
.sn-vdato{font-size:.8rem;font-weight:700;color:var(--ds-ink2);flex:none}
.sn-vt{font-size:1.02rem;line-height:1.35}
.sn-vp{margin:0;font-size:.92rem;font-weight:650;color:var(--ds-ink2)}
/* 🔴 «hvad sker der, hvis jeg ikke gør noget» — den vigtigste linje på
kortet, og derfor den eneste med sin egen flade. */
.sn-vsker{margin:3px 0 0;padding:9px 12px;border-radius:11px;font-size:.86rem;font-weight:700;
background:var(--ds-flade);color:var(--ds-ink2)}
.sn-vlev{background:rgba(30,55,76,.08);color:var(--moerk,#1e374c)}
@media (max-width:520px){
.sn-vkort{padding:13px 14px 13px 16px}
.sn-vkort .sn-gem button{width:100%}
}
.sn-styr{margin:18px 0 0;padding:15px 18px;border-radius:var(--ds-r);
background:var(--ds-flade);border:1px solid var(--ds-linje2);display:grid;gap:9px}
.sn-styr b{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ds-ink2)}
.sn-styr select,.sn-styr textarea{font:inherit;font-size:.93rem;border:1px solid var(--ds-linje2);
border-radius:12px;padding:10px 13px;outline:0;background:var(--ds-kort);color:inherit;width:100%}
.sn-styr textarea{min-height:80px;resize:vertical}
.sn-styr .sn-knap{justify-self:start}
.sn-port{border-color:rgba(245,166,35,.55)}
.sn-fund{background:var(--ds-flade);border:1px solid var(--ds-linje);border-radius:14px;
padding:15px 18px;margin:12px 0 0}
.sn-fund em{display:block;font-style:normal;font-size:.74rem;font-weight:850;
letter-spacing:.05em;text-transform:uppercase;color:var(--ds-ink2);margin:0 0 5px}
.sn-fund b{display:block;font-size:1rem;margin:0 0 5px}
.sn-fund p{margin:0;color:var(--ds-ink2);font-size:.92rem}
.sn-pind.sn-paavej::before{border-color:var(--lilla,#7a5af8);border-style:dashed}
.sn-kort.sn-paavej{border-style:dashed;border-color:rgba(122,90,248,.45);
background:linear-gradient(105deg,rgba(122,90,248,.055),rgba(122,90,248,0))}
.sn-nustreg{position:relative;margin:22px 0 20px;border-top:2px dashed var(--ds-linje2)}
.sn-nustreg span{position:absolute;top:-10px;left:0;background:var(--ds-bg);padding:0 11px 0 0;
font-size:.72rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--ds-ink2)}
@media(max-width:820px){ .sn-koereplan{grid-template-columns:1fr} }
/* ---- forslag fra en levering ---- */
.sn-forslag{margin:16px 0 0;padding:17px 20px;border-radius:var(--ds-r);
background:linear-gradient(105deg,rgba(122,90,248,.09),rgba(60,180,229,.05));
border:1px solid rgba(122,90,248,.4)}
.sn-fo-o{display:block;font-size:.84rem;color:#4a2ec0;margin:0 0 8px}
.sn-forslag p{margin:0 0 9px}
.sn-forslag ul,.sn-forslag ol{margin:0 0 4px;padding-left:20px;color:var(--ds-ink2)}
.sn-forslag li{margin:0 0 4px}
.sn-m.sn-lev{background:rgba(122,90,248,.14);color:#4a2ec0}
/* 🔔 «den her er valgt til dig» — 10.08.2026.
Den skal kunne ADSKILLES fra «ulæst» på et halvt sekund: ulæst er blåt og
handler om mig selv, det her er varmt og handler om, at nogen har peget.
Farven er husets egen «vigtigt»-gule, ikke en ny. */
.sn-m.sn-tilmig{background:rgba(245,166,35,.22);color:#7d5200}
/* ---- skrivefladen ---- */
.sn-felt{margin:0 0 16px}
.sn-felt label{display:block;font-weight:850;font-size:.88rem;margin:0 0 3px}
.sn-felt small{display:block;color:var(--ds-ink2);font-size:.82rem;font-weight:650;margin:0 0 7px}
.sn-felt input[type=text],.sn-felt textarea,.sn-felt select{width:100%;font:inherit;font-size:.95rem;
border:1px solid var(--ds-linje2);border-radius:12px;padding:11px 14px;outline:0;
background:var(--ds-kort);color:inherit}
.sn-felt textarea{resize:vertical;min-height:86px}
.sn-felt input:focus,.sn-felt textarea:focus,.sn-felt select:focus{border-color:var(--blaa,#3cb4e5)}
.sn-bokse{display:flex;gap:8px;flex-wrap:wrap}
.sn-bokse label{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem;
background:var(--ds-kort);border:1px solid var(--ds-linje2);border-radius:999px;padding:6px 13px;
cursor:pointer;margin:0}
/* 👤 person-vælgeren. Et RULLEFELT med fast højde, ikke en liste, der
skubber Gem-knappen 80 navne ned ad siden. Søgefeltet står lige over. */
.sn-folksog{width:100%;font:inherit;font-size:.92rem;border:1px solid var(--ds-linje2);
border-radius:12px;padding:9px 13px;outline:0;background:var(--ds-kort);color:inherit;margin:0 0 8px}
.sn-folksog:focus{border-color:var(--blaa,#3cb4e5)}
.sn-folk{max-height:230px;overflow:auto;border:1px solid var(--ds-linje2);border-radius:13px;
background:var(--ds-kort);padding:5px}
.sn-folk label{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
font-size:.88rem;font-weight:700;cursor:pointer;margin:0}
.sn-folk label:hover{background:rgba(18,41,60,.05)}
.sn-folk label b{font-weight:800}
.sn-folk label span{color:var(--ds-ink2);font-weight:650;font-size:.8rem;margin-left:auto;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.sn-folk input{flex:none}
.sn-tjek{display:block;font-weight:800;font-size:.9rem;margin:0 0 16px;cursor:pointer}
.sn-tjek small{display:block;color:var(--ds-ink2);font-size:.82rem;font-weight:650;margin:4px 0 0}
.sn-gem{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:18px 0 0}
.sn-knap{font:inherit;font-weight:800;font-size:.9rem;border:0;border-radius:12px;padding:10px 20px;
background:var(--moerk,#1e374c);color:#fff;cursor:pointer}
.sn-knap[disabled]{opacity:.55;cursor:default}
.sn-knap.sn-let{background:var(--ds-kort);color:var(--ds-ink);border:1px solid var(--ds-linje2)}
.sn-knap.sn-lille{padding:6px 13px;font-size:.8rem;margin:12px 0 0}
.sn-slet{margin:16px 0 0;font:inherit;font-weight:750;font-size:.85rem;background:none;border:0;
color:var(--roed,#e7004c);cursor:pointer;text-decoration:underline}
.sn-fejl{color:var(--roed,#e7004c);font-weight:750;font-size:.86rem}
@media(max-width:700px){
body.ds-ramme.ds-alene .flise.vp{flex-direction:column;align-items:flex-start;gap:14px;padding:20px}
body.ds-ramme.ds-alene .flise.vp .vp-bund{width:100%}
body.ds-ramme.ds-alene .flise.vp .pil{width:100%;text-align:center}
}
/* 🔴 «reveal» slås fra. Husets egen indflyvning sætter opacity:0 og venter
på, at et element kommer i syne. Med den nye rækkefølge lå nyhedsafsnittet
uden for skærmen, når den blev sat op — og blev derfor stående usynligt
med fuld højde. Designlaget har sin egen indflyvning (ds-anim), som ikke
kan efterlade noget usynligt. */
body.ds-ramme.ds-alene .reveal{opacity:1;transform:none}
/* ---------- velkomstvideoen får sit eget felt ----------
Den sad i forsidebilledet og var stylet til hvid tekst på mørk flade.
Flyttet ud står den nu på en lys side — så noten og teksterne skal
have en farve, man kan læse. Bredden bindes; en 1-minuts video må
ikke fylde en halv skærm. */
body.ds-ramme.ds-alene #dsbVideo:not(:empty){
background:var(--ds-kort);border:1px solid var(--ds-linje);border-radius:var(--ds-r);
box-shadow:var(--ds-s1);padding:16px 17px;margin-top:13px;
display:flex;gap:16px;align-items:center;flex-wrap:wrap;max-width:560px;
}
body.ds-ramme.ds-alene #dsbVideo::before{
content:"🎬 Velkommen til universet";font-size:.78rem;font-weight:800;
letter-spacing:.13em;text-transform:uppercase;color:var(--ds-ink2);flex:1 1 100%;
}
body.ds-ramme.ds-alene #dsbVideo:empty::before{content:none}
body.ds-ramme.ds-alene .hero-vid{flex:0 0 320px;max-width:100%}
body.ds-ramme.ds-alene .vid-wrap video{border:1px solid var(--ds-linje);border-radius:14px}
body.ds-ramme.ds-alene .vid-note{color:var(--ds-ink2);text-align:left;justify-content:flex-start}
/* 🔴 #vidTekstKnap er hvid tekst på gennemsigtig hvid — den var usynlig,
så snart videoen flyttede fra det mørke forsidebillede til en lys side.
Der stod kun 💬 tilbage. Id-selektor kræver id-selektor for at vinde. */
body.ds-ramme.ds-alene #vidTekstKnap{
color:var(--ds-ink);border-color:var(--ds-linje);background:var(--ds-flade);
}
body.ds-ramme.ds-alene #vidTekstKnap:hover{background:var(--ds-bg)}
/* ---------- 📣 Seneste nyt ---------- */
.ds-nyh{display:grid;gap:10px}
.ds-nyhed{
background:var(--ds-kort);border:1px solid var(--ds-linje);border-radius:var(--ds-r);
padding:15px 17px;box-shadow:var(--ds-s1);position:relative;overflow:hidden;
transition:transform var(--ds-puls),box-shadow var(--ds-puls);
}
.ds-nyhed:hover{transform:translateY(-2px);box-shadow:var(--ds-s2)}
.ds-nyhed .ds-nhoved{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.ds-nyhed .ds-uprik{width:8px;height:8px;border-radius:50%;background:var(--blaa);flex:none}
.ds-nyhed .ds-nkat{
display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:800;
letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 10px;
background:var(--ds-flade);border:1px solid var(--ds-linje);color:var(--ds-ink2);
}
.ds-nyhed .ds-naar{font-size:.76rem;font-weight:700;color:var(--ds-ink2)}
.ds-nyhed h5{font-size:.98rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.ds-nyhed p{color:var(--ds-ink2);font-size:.85rem;line-height:1.5;margin-top:5px}
.ds-nyhed .ds-laes{display:inline-block;margin-top:9px;font-weight:800;font-size:.85rem;color:var(--blaa)}
/* 🔴 Driftsinfo er den ENESTE kategori med farve. Den er den eneste, der
har en frist. Får alle fem farve, siger farve ingenting. */
.ds-nyhed.ds-drift{border-color:rgba(231,0,76,.30);background:linear-gradient(100deg,rgba(231,0,76,.05),transparent 60%)}
.ds-nyhed.ds-drift::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--roed)}
.ds-nyhed.ds-drift .ds-nkat{background:rgba(231,0,76,.10);border-color:rgba(231,0,76,.30);color:var(--roed)}
.ds-nyhed.ds-laest{background:none;border-style:dashed;box-shadow:none}
.ds-nyhed.ds-laest h5{color:var(--ds-ink2);font-weight:700}
.ds-nyhed.ds-frem h5{font-size:1.14rem}
/* overskriftsrækken med tællepille og «se alle» */
.ds-h4 .ds-antal{
font-size:.7rem;font-weight:800;letter-spacing:0;text-transform:none;
background:var(--blaa);color:#fff;border-radius:999px;padding:2px 9px;
}
.ds-h4 .ds-alle{
margin-left:auto;font-size:.78rem;font-weight:800;letter-spacing:0;
text-transform:none;color:var(--blaa);text-decoration:none;white-space:nowrap;
}
.ds-h4:has(.ds-alle)::after{display:none}
/* ---------- rækker: det der venter dig ---------- */
.ds-raekke{
display:flex;align-items:center;gap:13px;background:var(--ds-kort);
border:1px solid var(--ds-linje);border-radius:15px;padding:13px 16px;
box-shadow:var(--ds-s1);
}
.ds-raekke .ds-ik{font-size:1.25rem;flex:none}
.ds-raekke b{display:block;font-size:.92rem}
.ds-raekke small{display:block;color:var(--ds-ink2);font-size:.8rem;margin-top:2px}
.ds-raekke .ds-kn2{
margin-left:auto;flex:none;background:var(--ds-flade);border:1px solid var(--ds-linje);
border-radius:11px;padding:8px 14px;font-weight:700;font-size:.83rem;
color:var(--ds-ink);text-decoration:none;white-space:nowrap;font-family:var(--font);cursor:pointer;
}
.ds-raekke .ds-kn2:hover{border-color:var(--blaa)}
@media(max-width:560px){
.ds-raekke{flex-wrap:wrap}
.ds-raekke .ds-kn2{margin-left:0;width:100%;text-align:center}
}
/* ---------- BPA-universet på telefonen ---------- */
@media(max-width:900px){
/* søgefeltet skal have sin egen linje — «flex:1» alene giver et
grundlag på 0, og så skrumper feltet til ingenting */
body.ds-ramme.ds-alene #soegBar{flex:1 0 100%;max-width:none;min-width:0;order:2}
/* 🔴 Rækkefølgen på en telefon: logo+menu, søgefelt, og så de tre små
ting SAMMEN på én linje. Uden order på klokken og navnet havnede de
før søgefeltet (order 0 kommer før order 2), og akutnummeret stod
alene på en fjerde linje med 80 px tomt over sig. */
body.ds-ramme.ds-alene .ds-akut,
body.ds-ramme.ds-alene .ds-klokke,
body.ds-ramme.ds-alene .ds-mig{order:3}
body.ds-ramme.ds-alene .bar-top{row-gap:9px}
body.ds-ramme.ds-alene #dsbFyld{display:none} /* fyldet tvang en tom linje frem */
/* chat-knappen sad oven på bundnavets sidste punkt */
body.ds-ramme.ds-alene main{padding-bottom:86px}
body.ds-ramme.ds-alene .fliser{grid-template-columns:1fr 1fr;gap:10px}
body.ds-ramme.ds-alene .flise{padding:14px 13px 12px}
body.ds-ramme.ds-alene .flise p{display:block;font-size:.76rem}
body.ds-ramme.ds-alene .flise h3{font-size:.9rem}
body.ds-ramme.ds-alene .flise .blob{width:34px;height:34px;font-size:1rem}
body.ds-ramme.ds-alene #dsbVideo:not(:empty){max-width:none}
body.ds-ramme.ds-alene .hero-vid{flex:1 1 100%}
}
/* to spalter helt ned til de smalleste telefoner — 13 kasser i ÉN spalte
er en meget lang rulletur. Husets egen mobil-regel gjorde det samme. */
@media(max-width:359px){
body.ds-ramme.ds-alene .fliser{grid-template-columns:1fr}
}
/* ============================================================
15 · BORGERENS EGNE BYGGEKLODSER (forside v2, 2. runde)
------------------------------------------------------------
Mockup'ens borger-side er ikke en ommaling af den gamle — den
bruger adm-universets byggeklodser i en ny raekkefoelge. De
seksten klasser, mockup'en brugte og som ikke fandtes her,
staar herunder. Alle bygger paa de SAMME --ds-tokens som resten
af filen, saa lyst og moerkt foelger med af sig selv.
🔴 Blok og modifikator maa aldrig dele navn (fjerde gang den
regel skrives ned). Modifikatorerne herunder — ds-idag,
ds-mangler, ds-fri, ds-xl — staar ALDRIG alene som blok.
============================================================ */
/* ---------- ⭐ HF Vagtplan: det kort, borgeren skal bruge ----------
Den skal falde i oejnene uden at raabe. Derfor: LYS som resten af
siden — velkomstbaandet er allerede moerkt, og to moerke blokke oven
paa hinanden bliver tungt. Farven ligger i kanten, ikke i fladen.
Den er stoerst, fordi den HAR mest at sige. */
.ds-vp{
position:relative;border-radius:22px;padding:2px;overflow:hidden;
background:linear-gradient(115deg,var(--blaa),#5ecfe0 32%,var(--groen) 72%,#b9e356);
box-shadow:0 3px 8px rgba(30,55,76,.10),0 20px 46px rgba(60,180,229,.28);
transition:transform var(--ds-puls),box-shadow var(--ds-puls);
}
.ds-vp:hover{transform:translateY(-4px);box-shadow:0 6px 14px rgba(30,55,76,.12),0 28px 60px rgba(60,180,229,.38)}
.ds-vp-i{
position:relative;border-radius:20px;padding:20px 22px;overflow:hidden;
background:
radial-gradient(520px 220px at 88% -30%,rgba(147,213,0,.16),transparent 62%),
radial-gradient(460px 240px at -6% 130%,rgba(60,180,229,.18),transparent 60%),
var(--ds-kort);
display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
/* et blidt lysstroeg hvert sjette sekund — nok til at oejet finder kortet,
lidt nok til at man ikke bliver traet af det */
.ds-vp-i::after{
content:"";position:absolute;top:0;bottom:0;width:38%;left:-45%;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
animation:ds-vpglimt 6.5s ease-in-out infinite;
}
@keyframes ds-vpglimt{0%,72%{left:-45%}88%,100%{left:115%}}
/* 🔴 Emojien 📅 tegnes af STYRESYSTEMET: på Windows er den en gullig lap
papir med tallet 17, på iPhone noget helt andet. Vi kan hverken styre
farve, form eller hvilket tal der står — og «17» er en tilfældig dag.
Derfor et rigtigt mærke tegnet som SVG (se dsbVpIkon i borger.js):
samme streg på alle skærme, skarpt i alle størrelser. */
.ds-vp-med{
width:64px;height:64px;flex:none;border-radius:20px;display:grid;place-items:center;
background:linear-gradient(140deg,#1b3d55,#2a5573 55%,#1f5f7a);color:#7fd8ff;
box-shadow:0 10px 24px rgba(30,55,76,.32), inset 0 1px 0 rgba(255,255,255,.14);
position:relative;
}
.ds-vp-med svg{display:block}
/* prikken siger, om der er noget at se til — grøn når ugen er dækket, rød
når en dag mangler en hjælper. Den findes KUN, når vi ved det. */
.ds-vp-med.ds-god::before,.ds-vp-med.ds-adv::before{
content:"";position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;
border-radius:50%;box-shadow:0 0 0 3px var(--ds-kort);
}
.ds-vp-med.ds-god::before{background:var(--groen)}
.ds-vp-med.ds-adv::before{background:var(--roed)}
.ds-vp-med::after{
content:"";position:absolute;inset:-4px;border-radius:24px;
border:2px solid rgba(60,180,229,.32);animation:ds-vpring 3.4s ease-in-out infinite;
}
@keyframes ds-vpring{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.07);opacity:.25}}
.ds-vp-tekst{flex:1 1 300px;min-width:230px;position:relative}
.ds-vp-tekst h3{font-size:1.32rem;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.ds-vp-naest{font-size:.94rem;font-weight:600;color:var(--ds-ink2);margin-top:3px}
.ds-vp-naest b{color:var(--ds-ink);font-weight:800}
.ds-vp-kn{
display:inline-flex;align-items:center;gap:8px;margin-top:13px;border:0;border-radius:13px;
padding:12px 20px;font-size:.94rem;font-weight:800;color:#fff;cursor:pointer;
font-family:var(--font);background:linear-gradient(120deg,var(--moerk),#2a5573);
box-shadow:0 10px 24px rgba(30,55,76,.30);transition:transform var(--ds-puls),box-shadow var(--ds-puls);
}
.ds-vp-kn:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(30,55,76,.38)}
.ds-vp-kn:focus-visible{outline:2px solid var(--blaa);outline-offset:3px}
.ds-vp-mobil{
display:inline-flex;align-items:center;gap:6px;margin-left:11px;
font-size:.79rem;font-weight:700;color:var(--ds-ink2);
}
/* ---------- 📅 Ugens daekning ----------
🔴 TRE tilstande, ikke to. En dag UDEN vagt er ikke et problem: mange
borgere har slet ikke vagt alle ugens dage. Det, der skal falde i
oejnene, er en vagt der MANGLER EN HJAELPER — ikke en fridag.
✓ groen = vagt, daekket · ! roed = mangler hjaelper · – graa = ingen vagt */
.ds-uge{
position:relative;flex:none;background:var(--ds-flade);border:1px solid var(--ds-linje);
border-radius:16px;padding:13px 15px;min-width:262px;
}
.ds-uge-h{
font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--ds-ink2);margin-bottom:9px;
}
.ds-dage{display:flex;gap:6px}
.ds-dag{flex:1;text-align:center;min-width:0}
.ds-dag span{display:block;font-size:.68rem;font-weight:800;color:var(--ds-ink2);margin-bottom:4px}
.ds-dag i{
display:block;height:26px;border-radius:8px;font-style:normal;font-size:.68rem;
font-weight:800;line-height:26px;color:#3d5a00;background:rgba(147,213,0,.34);
}
.ds-dag.ds-idag i{box-shadow:inset 0 0 0 2px var(--moerk)}
.ds-dag.ds-mangler i{background:rgba(231,0,76,.16);color:var(--roed)}
.ds-dag.ds-fri i{background:var(--ds-bg);color:var(--ds-ink2);opacity:.65;box-shadow:inset 0 0 0 1px var(--ds-linje)}
.ds-dag.ds-fri.ds-idag i{box-shadow:inset 0 0 0 2px var(--moerk)}
.ds-sum{font-size:.75rem;font-weight:700;color:var(--ds-ink2);margin-top:9px}
.ds-sum b{color:var(--roed)}
.ds-tegn{
display:flex;gap:11px;flex-wrap:wrap;margin-top:7px;
font-size:.68rem;font-weight:700;color:var(--ds-ink2);
}
.ds-tegn span{display:inline-flex;align-items:center;gap:4px}
.ds-tegn i{
font-style:normal;width:15px;height:15px;border-radius:5px;display:grid;
place-items:center;font-size:.6rem;font-weight:800;
}
.ds-tegn .ds-tg-ok{background:rgba(147,213,0,.34);color:#3d5a00}
.ds-tegn .ds-tg-mangler{background:rgba(231,0,76,.16);color:var(--roed)}
.ds-tegn .ds-tg-ingen{background:var(--ds-bg);color:var(--ds-ink2);box-shadow:inset 0 0 0 1px var(--ds-linje)}
/* venter vi stadig paa svaret, staar der en rolig plads — ikke et tomt hul
og ikke et tal, vi ikke har */
.ds-uge.ds-venter .ds-dag i{background:var(--ds-bg);color:transparent;box-shadow:inset 0 0 0 1px var(--ds-linje)}
/* ---------- 📋 «Det der venter dig» ----------
Det, hun faktisk kom efter — uden at skulle ind i tre fliser foerst. */
.ds-raek{display:grid;gap:10px}
.ds-naeste{
display:flex;gap:13px;align-items:center;flex-wrap:wrap;background:var(--ds-kort);
border:1px solid var(--ds-linje);border-radius:17px;padding:14px 17px;box-shadow:var(--ds-s1);
transition:transform var(--ds-puls),box-shadow var(--ds-puls),border-color var(--ds-puls);
}
.ds-naeste:hover{transform:translateY(-3px);box-shadow:var(--ds-s2);border-color:var(--ds-linje2)}
.ds-nik{
width:40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:1.2rem;flex:none;
background:linear-gradient(140deg,rgba(60,180,229,.16),rgba(147,213,0,.13));
box-shadow:inset 0 0 0 1px rgba(60,180,229,.18);
}
.ds-naeste b{font-size:.95rem;display:block}
.ds-naeste small{color:var(--ds-ink2);font-size:.82rem}
.ds-nkn{
margin-left:auto;border:1px solid var(--ds-linje);background:var(--ds-flade);border-radius:11px;
padding:8px 15px;font-weight:700;font-size:.83rem;color:var(--ds-ink);cursor:pointer;
font-family:var(--font);text-decoration:none;white-space:nowrap;flex:none;
transition:border-color var(--ds-puls),background var(--ds-puls);
}
.ds-nkn:hover{border-color:var(--blaa);background:var(--ds-kort)}
/* ---------- 🔠 store og smaa kort ----------
De, der bliver brugt hver uge, er store. Resten er mindre. Foer var alle
tretten lige store — og saa er ingen af dem vigtige. */
.ds-stor{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
.ds-kort.ds-xl{padding:21px 21px 19px}
.ds-kort.ds-xl .ds-med{width:52px;height:52px;font-size:1.5rem;border-radius:16px}
.ds-kort.ds-xl b{font-size:1.06rem}
.ds-kort.ds-xl small{font-size:.85rem;margin-top:5px}
.ds-pil{display:block;margin-top:10px;font-weight:800;font-size:.85rem;color:var(--blaa)}
/* ---------- 🔔 klokken og navnet i topbjaelken ---------- */
.ds-klokke{
position:relative;width:38px;height:38px;border-radius:12px;border:1px solid var(--ds-linje);
background:var(--ds-kort);display:grid;place-items:center;font-size:1rem;box-shadow:var(--ds-s1);
cursor:pointer;font-family:var(--font);flex:none;text-decoration:none;color:inherit;
transition:border-color var(--ds-puls);
}
.ds-klokke:hover{border-color:var(--ds-linje2)}
.ds-klokke .ds-n{
position:absolute;top:-5px;right:-5px;background:var(--roed);color:#fff;font-size:.65rem;
font-weight:800;border-radius:999px;padding:1px 5px;box-shadow:0 0 0 2px var(--ds-bg);
}
.ds-mig{
display:flex;align-items:center;gap:9px;padding:4px 10px 4px 4px;border-radius:999px;
border:1px solid var(--ds-linje);background:var(--ds-kort);box-shadow:var(--ds-s1);
cursor:pointer;font-family:var(--font);color:inherit;text-decoration:none;flex:none;
}
.ds-mig .ds-av{
width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,var(--moerk),#2a5573);
color:#fff;display:grid;place-items:center;font-size:.76rem;font-weight:800;flex:none;
}
.ds-mig b{font-size:.82rem;white-space:nowrap}
.ds-mig .ds-pilned{color:var(--ds-ink2);font-size:.72rem}
/* ---------- mørk makker til afsnit 15 ---------- */
html[data-tema="moerk"] .ds-vp{box-shadow:0 3px 8px rgba(0,0,0,.35),0 20px 46px rgba(0,0,0,.45)}
html[data-tema="moerk"] .ds-vp-i::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent)}
html[data-tema="moerk"] .ds-vp-med{background:linear-gradient(140deg,#17334a,#245068 55%,#1b5069)}
html[data-tema="moerk"] .ds-dag i{color:#c9f06d}
html[data-tema="moerk"] .ds-dag.ds-mangler i{color:#ff7ba5;background:rgba(231,0,76,.24)}
html[data-tema="moerk"] .ds-sum b{color:#ff7ba5}
html[data-tema="moerk"] .ds-tegn .ds-tg-ok{color:#c9f06d}
html[data-tema="moerk"] .ds-tegn .ds-tg-mangler{color:#ff7ba5;background:rgba(231,0,76,.24)}
html[data-tema="moerk"] .ds-dag.ds-idag i,
html[data-tema="moerk"] .ds-dag.ds-fri.ds-idag i{box-shadow:inset 0 0 0 2px #7fd8ff}
html[data-tema="moerk"] .ds-nik{
background:linear-gradient(140deg,rgba(60,180,229,.22),rgba(147,213,0,.16));
box-shadow:inset 0 0 0 1px rgba(60,180,229,.26);
}
html[data-tema="moerk"] .ds-pil{color:#7fd8ff}
/* ---------- afsnit 15 paa telefonen ---------- */
@media(max-width:640px){
.ds-vp-i{padding:17px 16px;gap:15px}
.ds-vp-med{width:52px;height:52px;font-size:1.5rem;border-radius:16px}
.ds-vp-tekst h3{font-size:1.15rem}
.ds-vp-kn{width:100%;justify-content:center;padding:13px 16px}
.ds-vp-mobil{margin:9px 0 0;display:flex;justify-content:center;width:100%}
.ds-uge{min-width:0;flex:1 1 100%}
.ds-dage{gap:4px}
.ds-naeste{padding:13px 14px;gap:11px}
.ds-nkn{margin-left:0;width:100%;text-align:center}
.ds-stor{grid-template-columns:1fr;gap:10px}
.ds-mig b{display:none}
.ds-mig{padding:3px}
}
/* ---------- afsnit 15b · fliserne i ét gitter med to overskrifter ----------
🔴 Overskrifterne ligger INDE i gitteret og fylder hele bredden. De kunne
ikke ligge udenfor: forsideAnvend() omrokerer fliserne inde i
#forsideFliser efter admins opsætning, og to beholdere ville betyde, at
to funktioner sloges om de samme kasser. Se dsbFliserByg(). */
body.ds-ramme.ds-alene .fliser .ds-fuld{grid-column:1/-1;margin:22px 0 2px}
body.ds-ramme.ds-alene .fliser .ds-fuld:first-child{margin-top:0}
/* de to øverste er store — de bliver brugt hver uge. Kun hvor der ER plads
til to spalter; på en telefon er alle kasser lige brede i forvejen. */
@media(min-width:781px){
body.ds-ramme.ds-alene .fliser .flise.ds-xl{grid-column:span 2;padding:21px 22px 19px}
body.ds-ramme.ds-alene .fliser .flise.ds-xl h3{font-size:1.12rem}
body.ds-ramme.ds-alene .fliser .flise.ds-xl p{font-size:.88rem}
body.ds-ramme.ds-alene .fliser .flise.ds-xl .blob{width:52px;height:52px;font-size:1.5rem;border-radius:16px}
}
/* ---------- afsnit 15c · navigationsrækken bliver roligere ----------
🔴 Mockup'en har den slet ikke — kasserne ER vejen rundt dér. Den bliver
STÅENDE alligevel: 550 borgere kender den, og et menupunkt, der forsvinder
natten over, er en fejl for dem, uanset hvor pænt der bliver uden. Den
træder i stedet et skridt tilbage, så velkomstbåndet er det første, øjet
møder. Skal den helt væk, er det denne ene blok, der skal ændres. */
body.ds-ramme.ds-alene header nav{
gap:2px;padding:0 26px 7px;max-width:none;margin:0;flex-wrap:wrap;
}
body.ds-ramme.ds-alene header nav a{
font-size:.8rem;font-weight:700;color:var(--ds-ink2);padding:5px 10px;
border-radius:9px;transition:background var(--ds-puls),color var(--ds-puls);
}
body.ds-ramme.ds-alene header nav a:hover{background:var(--ds-flade);color:var(--ds-ink)}
body.ds-ramme.ds-alene header nav a.aktiv{background:var(--ds-flade);color:var(--ds-ink)}
@media(max-width:640px){
body.ds-ramme.ds-alene header nav{padding:0 14px 6px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
body.ds-ramme.ds-alene header nav::-webkit-scrollbar{display:none}
body.ds-ramme.ds-alene header nav a{white-space:nowrap}
}
/* ---------- afsnit 15d · bredden på en stor skærm ----------
Borgerens side er en LÆSESIDE, ikke et arbejdsbord med en skinne ved
siden af. Målt på Sørens egen skærm: 2600 px bred, og teksten blev en
tynd stribe hen over en meter. Adm-universet kan bære fuld bredde, fordi
skinnen tager 246 px og fordi kolonnerne er indholdet. Her er der ingen
skinne. Ændrer intet på telefon eller bærbar. */
body.ds-ramme.ds-alene main,
body.ds-ramme.ds-alene header .bar{max-width:1340px;margin-left:auto;margin-right:auto}
body.ds-ramme.ds-alene .ds-fod{max-width:1340px;margin-left:auto;margin-right:auto}
/* ---------- afsnit 15e · luft mellem afsnittene ----------
🔴 De to nye afsnit er tomme 'er, indtil borger.js fylder dem. Et
tomt element må ikke sætte luft af — så ville der stå et hul, hvor
vagtplanen ikke findes. Derfor :not(:empty). */
body.ds-ramme.ds-alene #dsbVagtplan:not(:empty),
body.ds-ramme.ds-alene #dsbVenter:not(:empty){display:block;margin-top:6px}
body.ds-ramme.ds-alene #dsbVelkomst:not(:empty){margin-bottom:4px}
/* overskrifterne i borgerens univers får samme luft over sig som i adm */
body.ds-ramme.ds-alene #dsbVagtplan .ds-h4,
body.ds-ramme.ds-alene #dsbVenter .ds-h4,
body.ds-ramme.ds-alene #nyhedsTeaser .ds-h4{margin:24px 0 11px}
/* 👤 husets tomme profilcirkel: vi har vores egen navnechip nu, og to
ansigter ved siden af hinanden er ét for meget */
body.ds-ramme.ds-alene #profilBtn{display:none}
/* 🔴 Uden ugepanelet ville vagtplan-kortet strække sig over hele bredden
med en tom højreside — nøjagtig den fejl, videoen lavede i 1. runde.
Så længe der ikke er tal at vise, holder kortet sig i en bredde, der
ser bevidst ud. Kommer panelet, falder grænsen væk af sig selv. */
/* 🔴 Kortet havde en max-bredde, så det ikke stod med en tom højreside,
mens ugepanelet mangler. Søren 05-08: det skal flugte med resten.
I stedet er det INDRE lagt om: teksten fylder, og knapperne står til
højre — så bredden bliver brugt i stedet for at være tom. */
/* husets burger bar margin-left:320px som inline-stil — den tvang sig selv
ud på en linje for sig på en telefon */
body.ds-ramme.ds-alene #ubBurger{margin-left:auto!important}
/* ============================================================
16 · MØRKT TEMA — husets egne farver
------------------------------------------------------------
🔴 Regel 4 siger, at stil.css' variabler ALDRIG sættes om i LYS
tilstand. I mørk tilstand er det netop meningen, at de skal —
det var hele planen for trin 3. Herunder er de fire, der bærer
næsten hele huset. Målt på de seks filer:
--graa 612 steder · 611 af dem er `color` → sikker
--flade 33 steder · 31 af dem er `background` → sikker
--hvid 4 steder · 4 af dem er `background` → sikker
--moerk 206 steder · 134 color, 60 background → 🔴 IKKE sikker
`--moerk` er tvetydig: den er BÅDE husets mørke tekst OG husets
mørke flader. Vender man den, bliver teksten læsbar og fladerne
hvide med hvid tekst på. På BORGERENS forside er den kun brugt som
flade fire steder, og alle fire er vores egne ds-elementer — dem
får vi en mørk makker til lige nedenfor. Derfor kan den vendes her.
⚠️ I ADM-universet er de 60 flader spredt ud over 22 områder, og
dét er grunden til, at DS_TEMA_KLAR stadig står på false. Se
MOERKT-TEMA-STATUS.md for hvor langt vi når, og hvad der mangler.
============================================================ */
html[data-tema="moerk"]{
--moerk:#e8f1f8; /* var husets mørkeblå tekst → nu lys tekst */
--moerk2:#c6dbea;
--flade:#101f2c; /* var den lyse baggrundsflade → nu mørk flade */
--hvid:#15283a; /* var kortets hvide flade → nu mørk kortflade */
--graa:#94a9ba; /* underordnet tekst, lysnet så den kan læses */
--skygge:0 1px 2px rgba(0,0,0,.30), 0 8px 22px rgba(0,0,0,.28);
--skygge2:0 2px 4px rgba(0,0,0,.35), 0 20px 44px rgba(0,0,0,.45);
}
/* 🔴 De fire steder, hvor VI selv bruger var(--moerk) som en MØRK FLADE.
Uden dem ville knappen og medaljonen blive lyse med hvid tekst på. */
html[data-tema="moerk"] .ds-vp-kn{background:linear-gradient(120deg,#1c3a52,#2a5573)}
html[data-tema="moerk"] .ds-mig .ds-av{background:linear-gradient(140deg,#1c3a52,#2a5573)}
html[data-tema="moerk"] .ds-panel .ds-av{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* husets egne mørke flader, der stadig SKAL være mørke */
html[data-tema="moerk"] body.ds-ramme .knap,
html[data-tema="moerk"] body.ds-ramme .gate-knap{background:#1c3a52;color:#fff}
/* felter og kanter, der var lyse linjer på hvid flade */
html[data-tema="moerk"] body.ds-ramme input,
html[data-tema="moerk"] body.ds-ramme textarea,
html[data-tema="moerk"] body.ds-ramme select{
background:var(--ds-kort);color:var(--ds-ink);border-color:var(--ds-linje2);
}
html[data-tema="moerk"] body.ds-ramme input::placeholder,
html[data-tema="moerk"] body.ds-ramme textarea::placeholder{color:var(--ds-ink2)}
/* den røde er for mørk til at læse som tekst på en mørk flade */
html[data-tema="moerk"] body.ds-ramme .ds-nkat.ds-drift{color:#ff8fb0;background:rgba(231,0,76,.20)}
html[data-tema="moerk"] .ds-antal{background:#1f8fc4}
/* 🔴 Den hvide hovedknap i velkomstbåndet: fladen SKAL blive hvid — båndet
er mørkt i begge temaer. Men teksten stod på var(--moerk), og den er nu
lys. Hvid på hvid. Målt af kontrastprøven, ikke set med øjet. */
html[data-tema="moerk"] .ds-vk-hand .ds-primaer{color:#12293c}
html[data-tema="moerk"] .ds-vp-mobil{color:var(--ds-ink2)}
/* 🔴 core.js sætter #poFab's knapper med style.cssText — inline slår alt.
De stod på background:var(--moerk);color:#fff, og da --moerk blev lys i
mørk tilstand, blev de hvide med hvid tekst. Sjette gang inline-fælden
melder sig; her er !important den eneste vej, for filen er ikke vores. */
html[data-tema="moerk"] #poFab button{background:#1c3a52!important;color:#fff!important}
html[data-tema="moerk"] #aFab{color:#0d2a12}
/* ============================================================
17 · MØRKT TEMA — husets 104 hårdkodede farver
------------------------------------------------------------
Farverne står som var(--kf-…, #original) i adm.js, borger.js,
core.js, stil.css og de to index-filer. Er variablen ikke sat
— altså i LYS tilstand — bruger browseren reservefarven, og så
er resultatet nøjagtig som før. Det er hele sikkerheden: lys
tilstand KAN ikke ændre sig, uanset hvad der står herunder.
Bevist med billed-for-billed sammenligning af 21 områder.
kf = flade · kt = tekst · kb = kant. Samme farve kan optræde i
flere grupper: #fff er både 168 flader og 121 stykker tekst, og
de to skal hver sin vej. Dét var grunden til, at «vend farverne»
ikke kunne lade sig gøre som ét greb.
============================================================ */
html[data-tema="moerk"]{
/* --- FLADER — snappet til husets tre mørke flader; tonede beholder kuløren (43) --- */
--kf-ffffff:#15283a; /* #ffffff · 168 steder */
--kf-eef3f7:#1c2d3b; /* #eef3f7 · 24 steder */
--kf-f4f8fb:#192e3e; /* #f4f8fb · 13 steder */
--kf-f3f7fa:#192e3d; /* #f3f7fa · 6 steder */
--kf-1f8fc4:#264c5e; /* #1f8fc4 · 6 steder */
--kf-fdf3e2:#3e3019; /* #fdf3e2 · 5 steder */
--kf-fdecef:#3e1920; /* #fdecef · 4 steder */
--kf-fff3cd:#3e3519; /* #fff3cd · 3 steder */
--kf-fff8e1:#3e3519; /* #fff8e1 · 3 steder */
--kf-77c9ec:#214250; /* #77c9ec · 3 steder */
--kf-eef4f8:#192f3d; /* #eef4f8 · 3 steder */
--kf-fbeceb:#3e1b19; /* #fbeceb · 3 steder */
--kf-e8f2ef:#15283a; /* #e8f2ef · 3 steder */
--kf-eef7ec:#203d1a; /* #eef7ec · 3 steder */
--kf-e6f4fb:#19313e; /* #e6f4fb · 2 steder */
--kf-f3eefb:#27193e; /* #f3eefb · 2 steder */
--kf-eaf6dc:#2d3e19; /* #eaf6dc · 1 sted */
--kf-cfdae3:#101f2c; /* #cfdae3 · 1 sted */
--kf-fffdf5:#3e3619; /* #fffdf5 · 1 sted */
--kf-fffef9:#3e3719; /* #fffef9 · 1 sted */
--kf-e0a800:#5e5026; /* #e0a800 · 1 sted */
--kf-e6eef4:#1a2e3c; /* #e6eef4 · 1 sted */
--kf-eef7fb:#19323e; /* #eef7fb · 1 sted */
--kf-2a91c4:#264c5e; /* #2a91c4 · 1 sted */
--kf-eef2f6:#1e2b39; /* #eef2f6 · 1 sted */
--kf-f4f7fa:#1b2b3c; /* #f4f7fa · 1 sted */
--kf-eef6fb:#19303e; /* #eef6fb · 1 sted */
--kf-fafcfe:#192b3e; /* #fafcfe · 1 sted */
--kf-f2f5f7:#15283a; /* #f2f5f7 · 1 sted */
--kf-e6f4ea:#1a3c24; /* #e6f4ea · 1 sted */
--kf-eaf3fb:#192c3e; /* #eaf3fb · 1 sted */
--kf-fff3e0:#3e2f19; /* #fff3e0 · 1 sted */
--kf-fbfdff:#192b3e; /* #fbfdff · 1 sted */
--kf-ffd166:#504121; /* #ffd166 · 1 sted */
--kf-eef1f5:#15283a; /* #eef1f5 · 1 sted */
--kf-1e9fd6:#264d5e; /* #1e9fd6 · 1 sted */
--kf-5ec4ec:#214250; /* #5ec4ec · 1 sted */
--kf-2da5d8:#264e5e; /* #2da5d8 · 1 sted */
--kf-f0f9f0:#193e19; /* #f0f9f0 · 1 sted */
--kf-eef6fc:#192e3e; /* #eef6fc · 1 sted */
--kf-9db4c4:#0c1722; /* #9db4c4 · 1 sted */
--kf-eaffb0:#343e19; /* #eaffb0 · 1 sted */
--kf-eaf4fb:#192f3e; /* #eaf4fb · 1 sted */
/* --- TEKST — mørk bliver lys, hvid bliver hvid (35) --- */
--kt-0d2a12:#a9e4b4; /* #0d2a12 · 29 steder */
--kt-2a3a48:#b8c8d6; /* #2a3a48 · 17 steder */
--kt-41630a:#cee6a8; /* #41630a · 15 steder */
--kt-333333:#e8f1f8; /* #333333 · 11 steder */
--kt-8a6400:#e6d5a8; /* #8a6400 · 10 steder */
--kt-8a5a12:#e6cda8; /* #8a5a12 · 9 steder */
--kt-1f7ea8:#a8d3e6; /* #1f7ea8 · 7 steder */
--kt-a86b00:#e6cfa8; /* #a86b00 · 7 steder */
--kt-1c6b5a:#a8e6d8; /* #1c6b5a · 6 steder */
--kt-8a6d00:#e6d9a8; /* #8a6d00 · 3 steder */
--kt-112233:#abc7e3; /* #112233 · 3 steder */
--kt-8c2f2f:#e3abab; /* #8c2f2f · 3 steder */
--kt-3b6d11:#c4e6a8; /* #3b6d11 · 3 steder */
--kt-33520a:#cbe6a8; /* #33520a · 2 steder */
--kt-a3003a:#e6a8be; /* #a3003a · 2 steder */
--kt-8a5a00:#e6d0a8; /* #8a5a00 · 2 steder */
--kt-2a5a78:#accde2; /* #2a5a78 · 2 steder */
--kt-1e374c:#afc9df; /* #1e374c · 2 steder */
--kt-22303c:#b7c8d6; /* #22303c · 2 steder */
--kt-1a2e05:#c8e6a8; /* #1a2e05 · 2 steder */
--kt-12556f:#a8d5e6; /* #12556f · 2 steder */
--kt-4b2c86:#beabe3; /* #4b2c86 · 2 steder */
--kt-7b8b98:#94a9ba; /* #7b8b98 · 1 sted */
--kt-555566:#e8f1f8; /* #555566 · 1 sted */
--kt-a06a00:#e6d1a8; /* #a06a00 · 1 sted */
--kt-3a2e00:#e6d9a8; /* #3a2e00 · 1 sted */
--kt-1a7a1a:#a8e6a8; /* #1a7a1a · 1 sted */
--kt-2c3d00:#d5e6a8; /* #2c3d00 · 1 sted */
--kt-3d7a00:#c7e6a8; /* #3d7a00 · 1 sted */
--kt-2a5573:#adcce1; /* #2a5573 · 1 sted */
--kt-9aa7b2:#94a9ba; /* #9aa7b2 · 1 sted */
--kt-b3261e:#e6aba8; /* #b3261e · 1 sted */
--kt-1f7a45:#a8e6c2; /* #1f7a45 · 1 sted */
--kt-12283a:#a9cae4; /* #12283a · 1 sted */
--kt-5f8a00:#d3e6a8; /* #5f8a00 · 1 sted */
/* --- KANTER — en lys streg på hvid bliver en lys streg på mørk (13) --- */
--kb-dbe6ee:rgba(255,255,255,.14); /* #dbe6ee · 30 steder */
--kb-e6eef4:rgba(255,255,255,.14); /* #e6eef4 · 4 steder */
--kb-f5b400:rgba(255,255,255,.22); /* #f5b400 · 2 steder */
--kb-f2df9e:rgba(255,255,255,.14); /* #f2df9e · 2 steder */
--kb-e6d59a:rgba(255,255,255,.14); /* #e6d59a · 2 steder */
--kb-f0f5f9:rgba(255,255,255,.14); /* #f0f5f9 · 2 steder */
--kb-ffffff:rgba(255,255,255,.14); /* #ffffff · 2 steder */
--kb-eef3f7:rgba(255,255,255,.14); /* #eef3f7 · 1 sted */
--kb-f2c9d4:rgba(255,255,255,.14); /* #f2c9d4 · 1 sted */
--kb-9db4c4:rgba(255,255,255,.22); /* #9db4c4 · 1 sted */
--kb-cfe0ec:rgba(255,255,255,.14); /* #cfe0ec · 1 sted */
--kb-e4b4b4:rgba(255,255,255,.14); /* #e4b4b4 · 1 sted */
--kb-f0dcbb:rgba(255,255,255,.14); /* #f0dcbb · 1 sted */
}
/* 🔴 --moerk er husets ENE variabel til to modsatte ting: mørk TEKST (134
steder) og mørk FLADE (60 steder). Vender man den i mørk tilstand, bliver
teksten læsbar og fladerne hvide med hvid tekst på — præcis dét, den
forrige session målte som «chips hvidt på hvidt».
De 60 flader er derfor skrevet om til var(--ds-flademoerk,var(--moerk)).
Er variablen ikke sat — lys tilstand — falder den tilbage på --moerk, og
så er der ingen forskel overhovedet. */
html[data-tema="moerk"]{ --ds-flademoerk:#1c3a52; }
/* ---------- afsnit 15f · vagtplan-kortet i fuld bredde ----------
Kortet flugter nu med resten af siden. For at bredden bliver BRUGT og
ikke bare står tom, mens ugepanelet mangler, er det indre lagt om:
medaljon og tekst til venstre, knapperne som en egen blok til højre.
Kommer ugepanelet, sætter det sig i midten, og knapperne rykker med. */
.ds-vp-i{align-items:center}
.ds-vp-hand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none;margin-left:auto}
.ds-vp-kn{margin-top:0}
.ds-vp-mobil{margin-left:0}
/* en rolig linje mellem tekst og knapper, så kortet ikke er ét langt bånd */
@media(min-width:781px){
.ds-vp-hand{padding-left:20px;border-left:1px solid var(--ds-linje)}
}
@media(max-width:780px){
/* 🔴 Denne blok skal blive stående SIDST. Mobil-reglen for .ds-vp-tekst
lå før grundreglen i afsnit 15f og blev slået af den — samme vægt,
og så vinder den sidste. Kontrol 8 i tjek.mjs fangede det. */
.ds-vp-tekst{min-width:0;flex:1 1 100%}
.ds-vp-hand{margin-left:0;flex:1 1 100%}
.ds-vp-kn{width:100%;justify-content:center}
}
/* ---------- afsnit 15g · brugermenuen ----------
«Skift kodeord» og «Log ud» hører til under personen, ikke ude i
bjælken ved siden af søgefeltet. Knapperne er FLYTTET ind — ikke
bygget om — så deres hændelser er urørte. */
.ds-migpak{position:relative;flex:none}
.ds-mig{cursor:pointer;font-family:var(--font);color:inherit}
.ds-mig:hover{border-color:var(--ds-linje2)}
.ds-mig[aria-expanded="true"]{border-color:var(--blaa);background:var(--ds-flade)}
.ds-migmenu{
position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:232px;
background:var(--ds-kort);border:1px solid var(--ds-linje);border-radius:16px;
box-shadow:var(--ds-s2);padding:7px;display:flex;flex-direction:column;gap:2px;
}
.ds-migmenu[hidden]{display:none}
.ds-migh{
display:flex;align-items:center;gap:10px;padding:9px 10px 11px;
border-bottom:1px solid var(--ds-linje);margin-bottom:5px;
}
.ds-migh .ds-av{
width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
background:linear-gradient(140deg,var(--ds-flademoerk,var(--moerk)),#2a5573);
color:#fff;font-size:.8rem;font-weight:800;
}
.ds-migh b{display:block;font-size:.88rem;line-height:1.25}
.ds-migh small{display:block;color:var(--ds-ink2);font-size:.75rem;font-weight:600}
/* husets to knapper får menuens udseende — de beholder deres id og klik */
.ds-migmenu > button{
display:flex!important;align-items:center;gap:9px;width:100%;text-align:left;
border:0!important;background:none!important;border-radius:10px!important;
padding:10px 11px!important;font-family:var(--font)!important;font-size:.87rem!important;
font-weight:700!important;color:var(--ds-ink)!important;cursor:pointer;
box-shadow:none!important;margin:0!important;
}
.ds-migmenu > button:hover{background:var(--ds-flade)!important}
.ds-migmenu > button#logudBtn{color:var(--roed)!important}
/* «Log ud» er den eneste knap i menuen, man ikke kan fortryde. Den får en
streg over sig, så den ikke ligger klods op ad «Skift dit kodeord». */
.ds-migmenu > button#logudBtn{
border-top:1px solid var(--ds-linje)!important;
margin-top:5px!important;padding-top:12px!important;
}
.ds-migmenu > button[hidden]{display:none!important}
/* ---------- afsnit 15g-2 · navnechippen i ADM-universet ----------
Samme chip som borgerens, men med to forskelle:
1) Ansigtet er profil.js' RIGTIGE profilbillede (#profilBtn), ikke to
bogstaver. Billedet var der i forvejen ude i bjælken; det er flyttet
ind i chippen, så det stadig åbner «Min profil» på et klik.
Findes billedet ikke (ingen profil-fil, intet foto), tegner adm.js
initialerne i stedet, og reglerne nedenfor rører ingenting.
2) Menuen rummer ni punkter i stedet for to, og fire af dem er
knapper, der skriver i deres egen tekst. Derfor .ds-migrk: knappen
er ikonet, ordet står ved siden af, og RÆKKEN er klikmålet.
Chippen er én pille om begge dele, så [foto][Søren ▾] læses som ét —
ikke som to knapper, der tilfældigvis står ved siden af hinanden. */
.ds-migpak.ds-admmig{
display:flex;align-items:center;gap:7px;flex:none;
border:1px solid var(--ds-linje);background:var(--ds-kort);
border-radius:999px;padding:3px 4px 3px 3px;box-shadow:var(--ds-s1);
transition:border-color var(--ds-puls),background var(--ds-puls);
}
.ds-migpak.ds-admmig:hover{border-color:var(--ds-linje2)}
.ds-migpak.ds-admmig.ds-aaben{border-color:var(--blaa);background:var(--ds-flade)}
/* profil.js sætter sin egen #profilBtn-regel i et