/* Prøvemodulet — layout efter Færdselsstyrelsens digitale teoriprøve */
/* Højre-mod-venstre-sprog: hvert element vælger selv retning ud fra det
første bogstav (unicode-bidi: plaintext), så arabiske prøvenavne,
beskrivelser, spørgsmål og svar står højrestillet med punktummet i den
rigtige ende, også på en dansk side. Er elevens sprog selv arabisk,
sætter layoutet dir="rtl" på , og så gælder reglen IKKE: dér skal
alt følge sidens retning, ellers står "B (سيارة خاصة)" venstrestillet,
fordi det første bogstav er latinsk. 12. sep 2026.
Felterne (navn, e-mail, kode, rabat) er holdt UDE med vilje: elevens
egne oplysninger skal stå med vores bogstaver, ellers kan de ikke slås
op i administrationen (Martin). Reglen styrer kun tegningen, ikke hvad
man kan taste — det ville kræve en egentlig validering. */
html:not([dir="rtl"]) *:not(input, textarea, select) { unicode-bidi: plaintext; }
:root {
/* Retningen som tal: 1 fra venstre mod højre, -1 når .
Bruges i translateX på kontakternes knop og knappens lille ryk, så de
bevæger sig den rigtige vej på arabisk. Alle placeringer, afstande og
kanter er logiske (inset-inline, margin-inline, border-inline,
text-align: start/end), så fladen spejlvendes af sig selv. 12. sep 2026. */
--fs-dir: 1;
--fs-bg: #eef1f4;
--fs-white: #ffffff;
--fs-navy: #1a4272;
--fs-navy-dark: #133255;
--fs-text: #1d2d3e;
--fs-text-soft: #51606f;
--fs-border: #d5dce3;
--fs-selected-bg: #d9e2eb;
--fs-field-bg: #dee5eb;
--fs-green: #3f8a4a;
--fs-green-dark: #35743e;
/* Afslut-knappen har sin egen tone — Færdselsstyrelsens armygrønne */
--fs-action: #4d7c45;
--fs-action-dark: #3f6839;
--fs-red: #c22c2c;
/* Samme højde som Færdselsstyrelsens egen prøve — deres bjælke er målt
til 60px, og vores stod på 64px. */
/* Browseren maler selv det, vi ikke har givet en farve: rullebjælker,
felter uden baggrund, datovælgere. Uden color-scheme antager den lys
flade og laver hvide kasser midt i en mørk side. */
color-scheme: light;
/* Kunden vælger bjælkens højde under Design (Smal 60, Mellem 84, Høj
108). Valget kommer ind som --fs-bar-valgt; den højde, der faktisk
BRUGES, regnes her — så den kan skæres ned på en telefon uden at
kunden skal vælge noget andet. */
--fs-bar-h: var(--fs-bar-valgt, 60px);
--fs-logo-h: var(--fs-logo-valgt, 38px);
/* Bunden behøver ikke arve toppens højde. Toppen bærer logoet og kan
være valgt høj af kunden (Bjælke: Høj = 108px); bunden bærer kun
knapper, og dér æder 108px næsten en tiendedel af skærmen uden at
sige noget. min() sikrer, at bunden aldrig bliver HØJERE end toppen
hos dem, der har valgt en smal bjælke. */
--fs-bund-h: min(var(--fs-bar-h), 76px);
/* Margenen om indholdet og det bredde-loft, det stopper ved. Topbaren
bruger de samme to, når den er sat til at følge indholdet. */
--fs-gutter: clamp(20px, 4.5vw, 72px);
--fs-maxw: 2200px;
/* Kanten om indholdet, luftvalget iberegnet. Topbaren bruger den samme,
så logoet står lige over indholdets venstrekant. */
--fs-kant: calc(var(--fs-gutter) * var(--fs-space));
/* Afstanden fra kanten til indholdets yderste kant. Topbaren og de faste
knapper i hjørnet bruger den, så alt står på samme lodrette linje. */
--fs-hjoerne: max(var(--fs-kant), calc((100% - var(--fs-maxw)) / 2 + var(--fs-kant)));
/* Overskrives af kundens egne valg under Design. Prøven selv rører de
ikke — den skal ligne den rigtige teoriprøve hos alle. */
--fs-surface: var(--fs-white);
--fs-accent-text: #ffffff;
--fs-topbar: var(--fs-white);
--fs-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--fs-radius: 12px;
--fs-radius-btn: 10px;
--fs-radius-bar: 999px;
--fs-cols: 2;
--fs-space: 1;
}
/* På en telefon er skærmen høj og smal, og bjælken tager af det, der
betyder noget. Har kunden valgt Mellem eller Høj, skæres den ned her —
Smal (60px) er allerede under loftet og rører sig ikke. */
@media (max-width: 760px) {
:root {
--fs-bar-h: min(var(--fs-bar-valgt, 60px), 72px);
--fs-logo-h: min(var(--fs-logo-valgt, 38px), 46px);
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* [hidden] skal altid vinde over komponenternes display-regler — ellers
dukker modaler og knapper op, selv om de er skjult i markup'en */
[hidden] { display: none !important; }
.fs-body {
font-family: var(--fs-font);
background: var(--fs-bg);
color: var(--fs-text);
font-size: 16px;
line-height: 1.5;
min-height: 100vh;
}
/* ---------- Top- og bundbjælke ---------- */
/* ══════ Topbjælkens accent ══════
Der er fire topbjælker: elevens, prøvens, skolens og login-rammens. Da
kun elevens blev gjort neutral i mørk tilstand, stod prøvens titel og
skolens navigation tilbage i blåt, og siderne så ud som to systemer.
Alt, der farves i en topbjælke, går derfor gennem ÉN variabel. I lys
tilstand ER den accenten som før. I mørk bliver den tekstfarven — og så
følger alle fire med af sig selv, også dem vi tilføjer senere.
Kundernes logoer er i alle farver (ét af dem er gult), og en bjælke,
der selv farver, bliver spraglet. Det eneste, der må lyse deroppe, er
fremhævningen. */
.fs-topbar {
--fs-bar-accent: var(--fs-navy);
--fs-bar-accent-tekst: var(--fs-accent-text);
/* Hviletilstanden hører med i systemet. Stod den som en enkelt regel
for sig, forsvandt den ved næste oprydning — det gjorde den. */
--fs-bar-tekst: var(--fs-navy);
position: fixed;
inset: 0 0 auto 0;
height: var(--fs-bar-h);
background: var(--fs-topbar);
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
/* Følger indholdet: samme margen, og på brede skærme rykker den ind, så
logoet står lige over indholdets venstrekant */
/* 100% og ikke 100vw — vw tæller rullepanelet med, og så ville
topbaren stå et par pixels forkert, så snart siden kan rulle */
padding-inline: var(--fs-hjoerne);
}
/* Fuld bredde: kun margenen holder den fra kanten */
.fs-bar-bred { --fs-hjoerne: var(--fs-kant); }
/* Prøven har sit eget, smallere loft */
.fs-proeve { --fs-maxw: 1800px; }
/* Vælger kunden fuld bredde, er der intet loft at rette sig efter */
.fs-bred { --fs-maxw: 100vw; }
.fs-logo { display: flex; align-items: center; gap: 12px; }
.fs-logo-mark {
width: 40px;
height: 40px;
border: 1.5px solid var(--fs-navy);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--fs-navy);
font-size: 18px;
}
.fs-logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.fs-logo-text strong { font-size: 15px; color: var(--fs-bar-accent); }
.fs-logo-text span { font-size: 13px; color: var(--fs-text-soft); }
/* Kun selve mærket er et link — teksten ved siden af kan bære sine egne */
.fs-logo-mig { display: flex; align-items: center; text-decoration: none; }
.fs-logo-sub a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
transition: color 150ms;
}
.fs-logo-sub a:hover { color: var(--fs-bar-accent); }
.fs-timer {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
color: var(--fs-text);
display: flex;
align-items: center;
gap: 10px;
font-variant-numeric: tabular-nums;
}
/* Ringen tømmes med tiden og bliver rød til sidst */
.fs-timer-ring { width: 26px; height: 26px; display: block; flex-shrink: 0; }
.fs-timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fs-timer-ring circle { fill: none; stroke-width: 3; }
.fs-timer-track { stroke: var(--fs-border); }
.fs-timer-bar {
stroke: var(--fs-navy);
stroke-linecap: round;
stroke-dasharray: 97.4;
transition: stroke-dashoffset 1s linear, stroke 400ms;
}
.fs-timer.is-low .fs-timer-bar { stroke: var(--fs-red); }
.fs-timer.is-low { color: var(--fs-red); font-weight: 600; }
.fs-topbar-right { display: flex; align-items: center; gap: 20px; }
.fs-link {
background: none;
border: none;
font: inherit;
font-size: 15px;
color: var(--fs-navy);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 2px;
/* Knap og link ser ens ud — ellers står "Log ud" og "Se prøverne"
ved siden af hinanden med hver sin streg */
text-decoration: underline;
text-underline-offset: 3px;
}
.fs-link:hover { text-decoration: none; }
/* I topbaren er punkterne navigation, ikke tekstlinks — stregen er
forbeholdt links inde i indholdet (fx "bestil mere tid") */
.fs-topbar .fs-link { text-decoration: none; }
.fs-topbar .fs-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fs-badge {
background: var(--fs-navy);
color: #fff;
font-size: 12px;
font-weight: 600;
min-width: 20px;
height: 20px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fs-bottombar {
position: fixed;
inset: auto 0 0 0;
height: var(--fs-bund-h);
background: var(--fs-topbar);
display: flex;
align-items: center;
z-index: 100;
}
.fs-bottom-left { position: absolute; inset-inline-start: 0; }
.fs-bottom-center {
margin: 0 auto;
font-size: 15px;
color: var(--fs-text);
}
.fs-bottom-right { position: absolute; inset-inline-end: 0; display: flex; }
.fs-btn {
border: none;
font: inherit;
font-size: 16px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 0 28px;
height: var(--fs-bar-h);
border-radius: var(--fs-radius-btn);
/* Uden en variant har knappen ingen baggrund, og med color-scheme: dark
maler browseren den som sin egen systemknap — en grå kasse på et mørkt
kort. Alle varianter står længere nede og overskriver de to linjer. */
background: var(--fs-navy);
color: var(--fs-accent-text);
}
/* Knapperne i bunden følger bundens højde, ikke toppens */
.fs-bottombar .fs-btn { height: var(--fs-bund-h); }
.fs-btn-primary { background: var(--fs-navy); color: var(--fs-accent-text); }
.fs-btn-primary:hover { background: var(--fs-navy-dark); }
/* Slukket knap i bundbjælken: Forrige på spørgsmål 1. Den skal kunne ses,
så pladsen er taget — men tydeligt være ude af drift. */
.fs-bottombar .fs-btn[disabled] { opacity: .28; cursor: default; pointer-events: none; }
/* Den stille handling: kant i stedet for fyld */
/* Et link i bundbjælken skal se ud som en knap, ikke som et link — uden
det her bar "Tilbage til prøverne" en understregning */
a.fs-btn { text-decoration: none; }
.fs-btn-stille { background: transparent; border: 1px solid var(--fs-border); color: var(--fs-text); }
.fs-btn-stille:hover { border-color: var(--fs-text-soft); background: var(--fs-field-bg); }
.fs-btn-green { background: var(--fs-action); color: #fff; }
/* Prøveafviklingen skal ligne den rigtige teoriprøve hos alle kunder.
Der rører vi kun farverne og skriften — ikke former og hjørner. */
.fs-proeve .fs-btn, .fs-proeve .fs-btn-round { border-radius: 2px; }
.fs-btn-green:hover { background: var(--fs-action-dark); }
/* ---------- Flader ---------- */
/* Bredden følger skærmen: luft i siderne på en stor skærm, næsten ingen på
en bærbar omkring 1300 px, hvor pladsen skal bruges til indholdet. */
.fs-surface {
--pad: var(--fs-kant);
padding: calc(var(--fs-bar-h) + clamp(28px, 3.4vw, 64px)) var(--pad)
calc(var(--fs-bund-h) + clamp(28px, 3.4vw, 64px));
max-width: var(--fs-maxw);
margin: 0 auto;
}
/* ---------- Startskærm ---------- */
.fs-ready { max-width: 1100px; margin: 0 auto; }
/* Prøvens egen intro-side: holder venstrekant med logoet som resten af
fronten og fylder ikke skærmen ud i begge sider */
.fs-ready-side { max-width: 960px; margin: 0; }
.fs-ready h1 {
font-size: clamp(30px, 2.8vw, 46px);
font-weight: 700;
letter-spacing: -0.02em;
margin: 16px 0 14px;
}
.fs-ready-text { margin-bottom: clamp(28px, 3vw, 48px); max-width: 62ch; font-size: clamp(16px, 1.05vw, 18px); }
.fs-facts { display: flex; gap: clamp(20px, 2vw, 36px); margin-bottom: clamp(24px, 2.4vw, 40px); flex-wrap: wrap; }
.fs-fact { flex: 1 1 240px; }
.fs-fact-wide { flex-basis: 100%; }
.fs-fact-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.fs-fact-value {
background: var(--fs-field-bg);
border-radius: 6px;
padding: 14px 18px;
}
.fs-intro ul, .fs-intro ol { padding-inline-start: 22px; }
.fs-intro li { margin: 4px 0; }
/* Oplysningen om øvesprog: sproget kan ikke bruges til den rigtige
teoriprøve. En rolig kasse i feltfarven med et info-ikon — ikke en
advarsel, for der er intet at rette. Samme bredde som introteksten
over den, så den læses i samme åndedrag; og introteksten slipper
sin luft, når kassen følger efter, så de to hænger sammen. */
.fs-sprognote {
display: flex; align-items: flex-start; gap: 14px;
max-width: 62ch;
background: var(--fs-field-bg);
border-radius: 10px;
padding: 16px 20px;
margin: 0 0 clamp(28px, 3vw, 48px);
font-size: 15.5px; line-height: 1.5;
}
.fs-ready-text:has(+ .fs-sprognote) { margin-bottom: 18px; }
.fs-sprognote > i { flex: 0 0 auto; font-size: 22px; line-height: 1.2; color: var(--fs-navy); }
.fs-sprognote strong { display: block; margin-bottom: 4px; }
/* ---------- Spørgsmålsskærm ---------- */
.fs-question {
display: grid;
/* Billedet er prøvens omdrejningspunkt og fik mere bredde (1,15 → 1,32,
siden trukket 5 % tilbage til 1,25) — svarene har resten, men aldrig
under 360px. Skærmen låner samtidig lidt af højrekanten, så svarene
ikke står med en lang tom margen ud mod skærmens kant. */
grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
gap: clamp(28px, 3.2vw, 64px);
align-items: start;
margin-inline-end: calc(var(--pad) * -0.4);
}
@media (max-width: 1040px) { .fs-question { grid-template-columns: 1fr; gap: 28px; margin-inline-end: 0; } }
.fs-question-figure { margin: 0; }
.fs-question-figure { position: relative; }
.fs-question-figure img {
width: 100%;
display: block;
cursor: zoom-in;
}
.fs-question-figure video {
width: 100%;
display: block;
background: #000;
}
/* Knap til at se videoen igen, når den er standset på spørgsmålets situation */
.fs-video-replay {
position: absolute;
bottom: 14px;
inset-inline-start: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: none;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--fs-navy);
font: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.fs-video-replay:hover { background: #fff; }
/* Værktøjerne må aldrig knække midt i deres egen tekst — bliver pladsen
trang, rykker et helt værktøj ned på næste linje i stedet */
.fs-q-toolbar { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 10px; }
.fs-q-toolbar .fs-link { white-space: nowrap; }
/* Læs højt · Auto-oplæsning · Gem til senere skal stå på ÉN linje på en
telefon. Målt i browseren: ved 15px og 18px mellemrum fylder de tre
390,7px, og ved 390px skærmbredde er der 358px indeni — derfor faldt
"Gem til senere" ned for sig selv. Med tallene herunder er behovet
343,8px, altså 14px luft, og der er plads til, at iOS sætter skriften
en anelse bredere end Chrome gør. */
@media (max-width: 600px) {
.fs-q-toolbar { gap: 8px 10px; }
.fs-q-toolbar .fs-link { font-size: 13.5px; }
.fs-q-toolbar .fs-link i { font-size: 13px; }
.fs-q-toolbar .fs-minikontakt { width: 26px; height: 15px; }
.fs-q-toolbar .fs-minikontakt::after { width: 11px; height: 11px; }
.fs-autoread.is-on .fs-q-toolbar .fs-minikontakt::after,
.fs-q-toolbar .fs-autoread.is-on .fs-minikontakt::after { inset-inline-start: 13px; }
}
.fs-q-title { font-size: 24px; font-weight: 700; line-height: 1.3; margin-bottom: 14px; white-space: pre-line; }
.fs-choose { font-size: 15px; margin-bottom: 14px; }
.fs-option {
display: flex;
align-items: center;
gap: 14px;
background: var(--fs-white);
border: 1px solid var(--fs-border);
border-radius: 8px;
padding: 16px 18px;
margin-bottom: 14px;
cursor: pointer;
font-size: 16px;
}
.fs-option:hover { border-color: var(--fs-navy); }
.fs-option.is-selected {
background: var(--fs-selected-bg);
border: 1.5px solid var(--fs-navy);
}
.fs-check {
width: 20px;
height: 20px;
border: 1.5px solid var(--fs-text-soft);
border-radius: 4px;
background: var(--fs-white);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.fs-option.is-selected .fs-check {
background: var(--fs-navy);
border-color: var(--fs-navy);
}
/* Ét rigtigt svar: markeringen er en cirkel med prik i stedet for en fyldt
firkant. Reglerne SKAL stå efter .fs-check ovenfor — de har samme vægt,
så den, der står sidst, vinder. Lå de før (som de gjorde), blev cirklen
en firkant, og prikken forsvandt i navy på navy. */
.fs-check-single { border-radius: 50%; }
.fs-option.is-selected .fs-check-single { background: var(--fs-white); border-color: var(--fs-navy); }
.fs-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--fs-navy);
display: block;
}
.fs-option-text { flex: 1; }
/* Lavtopløste bærbare (bred, men lav skærm): stram den lodrette rytme,
mindre titel og smallere billede, så alle svarmuligheder kan stå frit
af bundbjælken uden at eleven skal rulle. Blokken SKAL stå efter
grundreglerne for titel og svarbokse — ellers taber den på kaskaden. */
@media (min-width: 1041px) and (max-height: 830px) {
.fs-surface {
padding-top: calc(var(--fs-bar-h) + 20px);
padding-bottom: calc(var(--fs-bund-h) + 20px);
}
.fs-question { grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr); }
.fs-q-title { font-size: 20px; margin-bottom: 8px; }
.fs-q-toolbar { margin-bottom: 6px; }
.fs-option { padding: 12px 16px; margin-bottom: 10px; font-size: 15px; }
}
/* Dæmpet spøgelsesknap — lyden er et tilbud, ikke en del af indholdet */
.fs-audio-btn {
background: none;
border: none;
color: var(--fs-text-soft);
cursor: pointer;
font-size: 17px;
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
line-height: 1;
transition: color 160ms, background 160ms;
}
.fs-audio-btn:hover { color: var(--fs-navy); background: rgba(128,128,128,0.12); }
/* Markeret: fyldt bogmærke i accentfarven på en rolig pille, så man kan se
det på afstand — ikonet skifter til bi-bookmark-fill i proeve.js */
.fs-bookmark {
border-radius: 999px;
padding: 6px 14px;
border: 1px solid transparent;
transition: background 160ms, border-color 160ms, color 160ms;
}
.fs-bookmark:hover { text-decoration: none; background: rgba(0, 0, 0, 0.04); }
.fs-bookmark.is-on {
background: var(--fs-navy);
border-color: var(--fs-navy);
color: var(--fs-accent-text, #fff);
}
.fs-bookmark.is-on:hover { background: var(--fs-navy); filter: brightness(1.12); }
/* ---------- Spørgsmålsoversigt ---------- */
.fs-overview-backdrop {
position: fixed;
inset: 0;
background: var(--fs-bg);
/* Over sprogvælgeren og tema-knappen (300) — ellers stod de og rodede
sammen med luk-knappen i hjørnet */
z-index: 400;
overflow-y: auto;
padding: clamp(32px, 4vw, 72px) clamp(16px, 3.2vw, 64px) calc(var(--fs-bund-h) + 48px);
}
.fs-overview {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
gap: clamp(32px, 4vw, 80px);
}
@media (max-width: 900px) { .fs-overview { grid-template-columns: 1fr; } }
/* Oversigten dækker hele skærmen — luk-knappen står alene i hjørnet og
flugter med indholdets kant */
.fs-overview-close { position: absolute; top: 24px; inset-inline-end: clamp(16px, 3.2vw, 64px); }
.fs-overview h1 { font-size: clamp(28px, 2.6vw, 42px); font-weight: 700; letter-spacing: -0.02em; margin: 10px 0 18px; }
.fs-overview-text { white-space: pre-line; margin-bottom: 20px; }
.fs-legend { list-style: none; font-size: 15px; }
.fs-legend li { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.fs-legend-swatch {
width: 18px;
height: 18px;
border-radius: 4px;
border: 1px solid var(--fs-border);
background: var(--fs-white);
}
.fs-legend-swatch.is-answered { background: var(--fs-selected-bg); border-color: var(--fs-navy); }
.fs-legend .bi-bookmark-fill { color: var(--fs-navy); }
.fs-grid-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.fs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.fs-grid-item {
position: relative;
background: var(--fs-white);
border: 1px solid var(--fs-border);
border-radius: 8px;
aspect-ratio: 1.15;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 600;
color: var(--fs-text);
cursor: pointer;
font-family: inherit;
}
.fs-grid-item:hover { border-color: var(--fs-navy); }
.fs-grid-item.is-answered { background: var(--fs-selected-bg); border-color: var(--fs-navy); }
.fs-grid-item .bi-bookmark-fill {
position: absolute;
top: -7px;
inset-inline-start: 12px;
color: var(--fs-navy);
font-size: 15px;
}
/* ---------- Modal ---------- */
.fs-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(29,45,62,0.45);
z-index: 300;
display: flex;
/* flex-start + margin:auto på kortet, IKKE align-items:center.
Et centreret flexbarn, der er højere end sin beholder, bliver skåret af
i BEGGE ender — og toppen kan ikke rulles frem, uanset hvad man gør. Med
flex-start og margin:auto står korte dialoger stadig midt på skærmen,
mens en høj kan rulles fra top til bund. Det var dét, der gjorde
profilvinduet ubrugeligt på en telefon, når skolelisten var åben. */
align-items: flex-start;
justify-content: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 24px;
}
.fs-modal {
background: var(--fs-white);
border-radius: 8px;
padding: 32px 36px 24px;
max-width: 480px;
width: 100%;
margin: auto;
text-align: center;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.fs-modal h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.fs-modal p { white-space: pre-line; }
.fs-modal-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
}
.fs-modal-actions .fs-btn { height: 48px; border-radius: 4px; }
/* Mens Afslut venter på et svar, der stadig er undervejs, slukkes vinduets
knapper — men uden en stil hertil så de fuldstændig levende ud, og eleven
stod med en OK-knap, der ikke gjorde noget i op til ni sekunder. Det var
præcis den døde knap, ventetiden skulle undgå. Nu kan man SE, at der
arbejdes: dæmpet og med ventecursoren. Begge knapper er med — OK er en
.fs-btn, Fortryd en .fs-link. */
[data-confirm-modal][aria-busy="true"] .fs-btn[disabled],
[data-confirm-modal][aria-busy="true"] .fs-link[disabled] {
opacity: .45;
cursor: progress;
pointer-events: none;
}
/* ---------- Lightbox ---------- */
.fs-lightbox {
position: fixed;
inset: 0;
background: rgba(15,23,33,0.85);
z-index: 400;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
cursor: zoom-out;
}
.fs-lightbox img { max-width: 100%; max-height: 100%; }
/* Små billeder — tavler og skilte — skaleres op, ellers er der ingen
forstørrelse at komme efter. Højden holder aspektet af sig selv. */
.fs-lightbox img.er-lille { width: min(360px, 78vw); height: auto; max-height: 86vh; }
/* ---------- Elev-front (midlertidigt neutralt design) ---------- */
.fs-front-login { max-width: 440px; }
.fs-code-input {
display: block;
width: 100%;
font: inherit;
/* Uden en baggrund maler browseren selv feltet — og dens standard er
hvid. I mørk tilstand stod skolefeltet derfor som en hvid kasse
mellem lutter mørke felter. */
background: var(--fs-surface);
color: inherit;
font-size: 18px;
padding: 14px 16px;
border: 1px solid var(--fs-border);
border-radius: 6px;
margin: 6px 0 18px;
}
.fs-code-input:focus { outline: none; border-color: var(--fs-navy); box-shadow: 0 0 0 3px rgba(26,66,114,0.15); }
/* Kodefelt med ét felt pr. ciffer — samme mønster som i admin, men i
prøvens egen stil */
.otp { display: flex; gap: 10px; margin: 6px 0 20px; }
.otp-box {
width: 100%;
max-width: 58px;
aspect-ratio: 3 / 4;
padding: 0;
text-align: center;
font: inherit;
font-size: 26px;
font-variant-numeric: tabular-nums;
border: 1px solid var(--fs-border);
border-radius: 6px;
background: #fff;
color: inherit;
transition: border-color 150ms, box-shadow 150ms;
}
.otp-box:focus { outline: none; border-color: var(--fs-navy); box-shadow: 0 0 0 3px rgba(26,66,114,0.15); }
.otp.is-full .otp-box { border-color: var(--fs-navy); }
.otp-plain { display: block; width: 100%; font: inherit; font-size: 22px; letter-spacing: 8px; text-align: center; padding: 14px 16px; border: 1px solid var(--fs-border); border-radius: 6px; }
.fs-btn-round { height: 52px; border-radius: var(--fs-radius-btn); }
.fs-front-error {
background: rgba(194,44,44,0.08);
color: var(--fs-red);
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 18px;
font-weight: 500;
}
.fs-front-info {
background: rgba(77,124,69,0.10);
color: var(--fs-green);
border-radius: 6px;
padding: 12px 16px;
margin-bottom: 18px;
font-weight: 500;
}
.fs-front-home { max-width: 900px; margin: 0 auto; }
.fs-front-heading { font-size: 30px; font-weight: 700; margin: 28px 0 6px; }
.fs-front-heading:first-child { margin-top: 0; }
.fs-table-wrap { background: var(--fs-white); border-radius: 8px; padding: 8px 20px; overflow-x: auto; margin-bottom: 28px; }
.fs-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fs-table th {
text-align: start;
font-size: 12.5px;
font-weight: 600;
color: var(--fs-text-soft);
padding: 12px 10px 8px;
border-bottom: 1px solid var(--fs-border);
white-space: nowrap;
}
.fs-table td { padding: 10px; border-bottom: 1px solid var(--fs-border); font-variant-numeric: tabular-nums; }
.fs-table tbody tr:last-child td { border-bottom: none; }
.fs-table .num { text-align: end; }
.fs-code-cell { font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.fs-pass { color: var(--fs-green); font-weight: 600; }
.fs-fail { color: var(--fs-red); font-weight: 600; }
.fs-code-display {
font-size: 26px;
font-weight: 700;
letter-spacing: 3px;
font-variant-numeric: tabular-nums;
padding: 4px 0;
}
/* De to veje videre fra en skoles kvittering. Koderne står ikke på siden —
et bundt på 500 ville være en side, ingen kan bruge til noget — så de to
knapper ER indholdet: listen med koderne, og ordren de kan hentes fra. */
.fs-kvit-veje {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 18px;
}
.fs-kvit-veje .fs-btn { flex: 0 0 auto; }
@media (max-width: 520px) {
.fs-kvit-veje { flex-direction: column; align-items: stretch; }
}
/* ---------- Resultatside ---------- */
/* Centreret som Færdselsstyrelsens resultatside: overskrift og opsummering
i midten, gennemgangen i én rolig søjle under dem */
/* Samme loft som prøven — så holder kortene venstre kant med logoet og
højre kant med menuen i topbaren */
.fs-result { padding-bottom: 150px; }
.fs-result-heading {
font-size: clamp(30px, 3vw, 46px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
text-align: center;
margin-bottom: clamp(20px, 2.2vw, 36px);
}
/* VARSELSSTRIBEN — husets faste mønster for en gul advarsel med trekant:
ikon + tekst + evt. mørkeblå handlingsknap i højre side. Genbrug klassen
.fs-varsel-stribe, når noget skal advares om; skriv aldrig en ny variant. */
.fs-varsel-stribe { display: flex; align-items: center; gap: 12px;
max-width: 640px; margin: 0 auto 40px; padding: 14px 18px;
background: color-mix(in srgb, var(--fs-warn) 12%, var(--fs-white));
border: 1px solid color-mix(in srgb, var(--fs-warn) 35%, transparent);
border-radius: var(--fs-radius); font-size: 15px; }
.fs-varsel-stribe > i { color: var(--fs-warn); font-size: 20px; }
.fs-varsel-stribe span { flex: 1; }
/* Knappen bar accentfarven og stod som en blå klods i en gul kasse — to
ting, der ikke har med hinanden at gøre. Den låner nu trekantens egen
farve, men trukket dybt ned i en okker, så den hverken bliver gul eller
forsvinder i kassens tone. Hvid skrift ovenpå. Samme opskrift i begge
tilstande: --fs-warn er selv lysere i mørk, så knappen følger med uden
at skulle sættes to gange. */
.fs-varsel-stribe .fs-btn { height: 44px; padding: 0 18px; font-size: 14.5px;
background: color-mix(in srgb, var(--fs-warn) 64%, #000);
color: #fff; border-radius: 10px; white-space: nowrap; }
.fs-varsel-stribe .fs-btn:hover { background: color-mix(in srgb, var(--fs-warn) 52%, #000); }
@media (max-width: 640px) {
.fs-varsel-stribe { flex-wrap: wrap; }
.fs-varsel-stribe form { width: 100%; }
.fs-varsel-stribe .fs-btn { width: 100%; justify-content: center; }
}
.fs-result-card {
background: var(--fs-white);
border-radius: var(--fs-radius);
padding: clamp(22px, 2vw, 34px) clamp(26px, 2.4vw, 44px);
max-width: 640px;
margin: 0 auto clamp(32px, 3.6vw, 64px);
}
.fs-result-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.fs-result-card hr { border: none; border-top: 1px solid var(--fs-border); margin: 16px 0; }
.fs-result-score { color: var(--fs-text-soft); }
/* Vinduet ved en ufærdig prøve: skal den tælle med? Samme kort som prøvens
eget afslutningsvindue; trekanten er husets tegn for en advarsel. */
.fs-fortryd-modal .fs-fortryd-ikon { font-size: 34px; color: var(--fs-warn); display: block; margin-bottom: 10px; }
.fs-fortryd-modal .fs-modal-actions { gap: 12px; flex-wrap: wrap; justify-content: center; }
.fs-fortryd-modal .fs-modal-actions .fs-btn { padding: 0 20px; }
.fs-fortryd-status { display: flex; align-items: center; justify-content: center; gap: 8px;
color: var(--fs-text-soft); font-size: 14.5px; max-width: 640px; margin: -20px auto 40px; }
/* ---------- De forkerte spørgsmål igen (core/fejlrunde.php) ----------
Kortet under resultatet: tallet for nu, runderne i én dæmpet linje og
knappen. Nederst på siden står kun knappen igen, uden kort. */
.fs-igen-kort { text-align: center; }
.fs-igen-nu { display: flex; align-items: center; justify-content: center; gap: 10px;
font-weight: 600; margin: 0 0 6px; }
.fs-igen-nu i { color: var(--fs-navy); font-size: 20px; }
.fs-igen-runder { color: var(--fs-text-soft); font-size: 14px; margin: 0 0 18px; }
.fs-igen-runder span { white-space: nowrap; }
.fs-igen-intro { color: var(--fs-text-soft); margin: 0 0 18px; }
.fs-igen-alt { display: flex; align-items: center; justify-content: center; gap: 10px;
color: var(--fs-green); font-weight: 600; margin: 0; }
.fs-igen-alt i { font-size: 20px; }
/* Grund-.fs-btn er prøvebjælkens 84px — kortets knap skal have sin egen højde */
.fs-igen-knap { height: 52px; padding: 0 26px; font-size: 16px; }
.fs-igen-kort form { margin: 0; }
.fs-igen-bund { text-align: center; margin: 0 0 48px; }
.fs-igen-bund form { margin: 0; }
/* Dommen fra prøven bliver stående, dæmpet, og rundens står efter en pil.
Gruppen holder dem sammen i metalinjen, der ellers fordeler sine børn. */
.fs-review-domme { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fs-review-verdict.er-foer { opacity: .5; }
.fs-review-pil { color: var(--fs-text-soft); font-size: 14px; }
/* Prøvens eget kryds, der ikke blev sat igen: et stille mærke uden kortets farve */
.fs-pick-badge.er-foer { background: transparent; border: 1px dashed var(--fs-border); color: var(--fs-text-soft); }
.fs-svar.is-correct .fs-pick-badge.er-foer,
.fs-svar.is-wrong-pick .fs-pick-badge.er-foer { background: transparent; color: var(--fs-text-soft); }
/* Rettet i en runde: grønt tal med en ring, så det VAR forkert kan ses */
.fs-result-nav-item.er-rettet { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fs-green) 45%, transparent); }
.fs-verdict { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.fs-verdict-pass { color: var(--fs-green); }
.fs-verdict-fail { color: var(--fs-red); }
.fs-review-item {
background: var(--fs-white);
border-radius: var(--fs-radius);
padding: clamp(24px, 2.2vw, 40px) clamp(24px, 2.4vw, 44px);
margin-bottom: clamp(20px, 2vw, 32px);
scroll-margin-top: calc(var(--fs-bar-h) + 16px);
}
/* Nummeret er en stille overlinje, ikke et farvet kvadrat — og dommen står
som blød pille i samme linje. Spørgsmålet får sin egen fulde linje under. */
.fs-review-head { margin-bottom: clamp(18px, 1.8vw, 28px); }
.fs-review-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
}
.fs-review-nr {
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fs-text-soft);
}
.fs-review-head h2 { font-size: clamp(18px, 1.3vw, 22px); font-weight: 700; white-space: pre-line; letter-spacing: -0.01em; max-width: 62ch; }
.fs-review-verdict {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
border-radius: 999px;
padding: 4px 13px;
}
.fs-review-verdict.is-right { color: var(--fs-green); background: color-mix(in srgb, var(--fs-green) 11%, transparent); }
.fs-review-verdict.is-wrong { color: var(--fs-red); background: color-mix(in srgb, var(--fs-red) 10%, transparent); }
.fs-review-verdict.is-blank { color: var(--fs-text-soft); background: var(--fs-field-bg); }
/* Billedet er halvdelen af historien — det får halvdelen af pladsen og
bliver stående, mens man læser svarene */
.fs-review-body {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr);
gap: clamp(24px, 2.6vw, 48px);
align-items: start;
}
@media (max-width: 900px) { .fs-review-body { grid-template-columns: 1fr; } }
.fs-review-body .fs-question-figure { margin: 0; }
.fs-review-body img,
.fs-review-body video { width: 100%; display: block; border-radius: 10px; cursor: zoom-in; }
/* Svaret og dets forklaring er ét kort. Rigtigt og forkert taler gennem
tonen i kortet — ikke gennem striber hen over siden. */
.fs-svar {
border: 1px solid var(--fs-border);
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.fs-svar.is-correct {
border-color: color-mix(in srgb, var(--fs-green) 42%, transparent);
background: color-mix(in srgb, var(--fs-green) 5%, transparent);
}
.fs-svar.is-wrong-pick {
border-color: color-mix(in srgb, var(--fs-red) 40%, transparent);
background: color-mix(in srgb, var(--fs-red) 5%, transparent);
}
.fs-review-option {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px 13px 16px;
font-size: 15px;
}
.fs-review-mark { font-size: 18px; line-height: 1; flex-shrink: 0; }
.fs-svar.is-correct .fs-review-mark { color: var(--fs-green); }
.fs-svar.is-wrong-pick .fs-review-mark { color: var(--fs-red); }
.fs-review-mark .bi-circle { color: var(--fs-border); }
.fs-review-option-text { flex: 1; font-weight: 500; }
.fs-pick-badge {
font-size: 12px;
font-weight: 600;
background: var(--fs-field-bg);
color: var(--fs-text);
border-radius: 999px;
padding: 2px 10px;
white-space: nowrap;
}
/* Mærket følger kortets tone, så det ikke ligner et fremmedelement */
.fs-svar.is-correct .fs-pick-badge { color: var(--fs-green); background: color-mix(in srgb, var(--fs-green) 11%, transparent); }
.fs-svar.is-wrong-pick .fs-pick-badge { color: var(--fs-red); background: color-mix(in srgb, var(--fs-red) 10%, transparent); }
/* Forklaringen står under sit svar, inde i samme kort, indrykket til
svarteksten — dæmpet, for den er uddybning, ikke facit */
.fs-svar .fs-explanation {
display: flex;
gap: 10px;
align-items: flex-start;
border-top: 1px solid color-mix(in srgb, var(--fs-border) 60%, transparent);
padding: 11px 14px 12px 46px;
font-size: 14px;
line-height: 1.5;
color: var(--fs-text-soft);
}
.fs-svar .fs-explanation p,
.fs-svar .fs-explanation .fs-forklaring-indhold { flex: 1; }
/* Én samlet forklaring til hele spørgsmålet (forklaringstilstand "question") */
.fs-forklaring-samlet {
display: flex;
gap: 10px;
align-items: flex-start;
background: var(--fs-field-bg);
border-radius: 10px;
padding: 14px 16px;
margin-top: 14px;
font-size: 14.5px;
line-height: 1.5;
}
.fs-forklaring-samlet i { color: var(--fs-navy); margin-top: 2px; }
.fs-forklaring-samlet p,
.fs-forklaring-samlet .fs-forklaring-indhold { flex: 1; min-width: 0; }
/* Den samlede forklaring spænder over begge spalter og lægger sig under
billede og svar. Så har kundens eget gitter hele sidens bredde at lægge
sine færdselstavler i — dét, det er tegnet til. */
.fs-review-body > .fs-forklaring-bred { grid-column: 1 / -1; margin-top: 4px; }
/* Værn mod indhold, kunden selv har sat ind.
Et foto fra et telefonkamera fylder ellers hele sidens bredde og skubber
forklaringen ned under skærmkanten, og en spalte, der ikke må krympe,
flyder ud over kortets kant. */
.fs-forklaring-bred .cb-indhold img { max-height: 340px; width: auto; max-width: 100%; object-fit: contain; }
.fs-forklaring-bred .cb-indhold .column { min-width: 0; }
.fs-forklaring-bred .cb-indhold .row { flex-wrap: wrap; }
/* Er der ikke plads til spalterne ved siden af hinanden, bryder de om i
stedet for at mase sig sammen. ContentBuilders eget knæk sker på
VINDUETS bredde og hjælper ikke, når rammen er smallere end vinduet.
Under 761px overtager mobilreglen længere nede — dér skal spalterne stå
i fuld bredde, ikke bryde om på 220px. */
@media (min-width: 761px) and (max-width: 900px) {
.fs-forklaring-bred .cb-indhold .column { flex: 1 1 220px; }
}
/* ══════════ Kundens gitter på en telefon ══════════
ContentBuilder skriver bredden INLINE på spalten — typisk
style="width: 60%; flex: 0 0 auto;" for en tekst med et billede ved
siden af. Under 761px slår editorens eget ark rækkens display: flex fra,
så spalterne stables — men de 60% bliver stående, og teksten står i halv
bredde på skærmen med en tom højreside ved siden af.
Vi kommer aldrig til at have to spalter side om side på en telefon, så
dér er en procentbredde altid en fejl. Reglen gælder alt, kunden lægger
ind, og skal derfor blive ved med at være uafhængig af, hvad han vælger
i editoren.
!important er ikke til pynt: en inline stil kan ikke slås af noget andet.
Og reglen bor her i vores eget ark og ikke i cb-indhold.css, som er
editorens egen fil og bliver overskrevet, næste gang den opdateres. */
@media (max-width: 760px) {
.cb-indhold .column {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/* Undtagelsen: en række, editoren har sat til "to pr. række på mobil"
(xs-items-2) — det er tavlestriben under forklaringerne. Editorens egen
regel giver spalten 50 % PLUS 15px padding, og med rækkens gap på 24px
er der så ikke plads til to, og de falder alligevel ned under hinanden
i fuld bredde. Her får de præcis halvdelen minus gabet. Specificiteten
skal slå editorens :not()-selektor, ellers taber !important til dens. */
.fs-forklaring-indhold.cb-indhold .row.xs-items-2 > .column {
width: auto !important;
flex: 0 0 calc(50% - 12px) !important;
padding-right: 0 !important;
min-width: 0 !important;
}
/* Et langt tavlenavn ("hastighedsbegrænsning") er bredere end den halve
spalte og ville ellers presse sin spalte op i fuld bredde */
.fs-forklaring-indhold.cb-indhold .row.xs-items-2 > .column p { overflow-wrap: anywhere; hyphens: auto; }
}
/* Talrækken svæver som en afrundet bakke midt i bunden — ikke en stribe fra
kant til kant. Rigtigt og forkert taler i pillernes bløde toner; det tal,
man står ved, er fyldt helt ud. */
.fs-result-nav {
position: fixed;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
max-width: calc(100% - 24px);
display: flex;
align-items: center;
gap: 5px;
padding: 8px;
background: var(--fs-white);
border: 1px solid var(--fs-border);
border-radius: 999px;
box-shadow: 0 10px 34px rgba(0,0,0,0.14);
z-index: 100;
}
.fs-result-nav-item {
flex: 0 0 auto;
width: clamp(32px, 2.3vw, 38px);
height: clamp(32px, 2.3vw, 38px);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: clamp(12.5px, 0.85vw, 14px);
font-weight: 600;
text-decoration: none;
transition: background 160ms, color 160ms;
}
.fs-result-nav-item.is-right {
color: var(--fs-green);
background: color-mix(in srgb, var(--fs-green) 11%, transparent);
}
.fs-result-nav-item.is-wrong {
color: var(--fs-red);
background: color-mix(in srgb, var(--fs-red) 10%, transparent);
}
.fs-result-nav-item.is-right:hover { background: color-mix(in srgb, var(--fs-green) 20%, transparent); }
.fs-result-nav-item.is-wrong:hover { background: color-mix(in srgb, var(--fs-red) 19%, transparent); }
.fs-result-nav-item.is-right.is-current { color: #fff; background: var(--fs-green); }
.fs-result-nav-item.is-wrong.is-current { color: #fff; background: var(--fs-red); }
.fs-result-nav-top {
flex: 0 0 auto;
width: clamp(32px, 2.3vw, 38px);
height: clamp(32px, 2.3vw, 38px);
border-radius: 50%;
margin-inline-start: 3px;
/* Let som de andre cirkler — pilen skal vise vej, ikke veje tungt */
background: color-mix(in srgb, var(--fs-navy) 8%, transparent);
color: var(--fs-navy);
border: none;
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 160ms;
}
.fs-result-nav-top:hover { background: color-mix(in srgb, var(--fs-navy) 16%, transparent); }
/* Swipe-pilen hører kun til den smalle skærm, hvor striben ruller */
.fs-result-nav-mere { display: none; }
/* ── Resultat-skabelonerne ──
'klassisk' er grundformen ovenfor og røres ikke. De øvrige lægger sig
ovenpå: ringen som førstehåndsindtryk, og harmonika/fejl-først som
foldbare gennemgange med samme indhold. Blokken står EFTER grundreglerne
— ellers taber den på kaskaden. */
/* Ring om resultatet: procenten som stor bue ved siden af nøgletallene */
.fs-ring-kort { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); }
.fs-ring { width: clamp(120px, 14vw, 170px); flex: 0 0 auto; }
.fs-ring-spor { fill: none; stroke: color-mix(in srgb, var(--fs-text) 10%, transparent); stroke-width: 10; }
.fs-ring-bue { fill: none; stroke-width: 10; stroke-linecap: round; }
.fs-ring-bue.er-ok { stroke: var(--fs-green); }
.fs-ring-bue.er-dumpet { stroke: var(--fs-red); }
.fs-ring-pct { font-size: 26px; font-weight: 700; fill: var(--fs-text); }
.fs-ring-tal { flex: 1; min-width: 0; }
.fs-ring-tal .fs-result-card-head { margin-bottom: 14px; }
.fs-ring-liste div { display: flex; justify-content: space-between; gap: 16px;
padding: 8px 0; border-bottom: 1px solid var(--fs-border); font-size: 15px; }
.fs-ring-liste div:last-child { border-bottom: 0; }
.fs-ring-liste span { color: var(--fs-text-soft); }
@media (max-width: 640px) { .fs-ring-kort { flex-direction: column; } .fs-ring-tal { width: 100%; } }
/* Foldbare gennemgange: hovedet er hele håndtaget, pilen viser tilstanden */
.fs-result-tpl-harmonika .fs-review-item,
.fs-result-tpl-fejl-foerst .fs-review-item { margin-bottom: 12px; padding: 18px clamp(20px, 2vw, 32px); }
.fs-result-tpl-harmonika [data-fold-hoved],
.fs-result-tpl-fejl-foerst [data-fold-hoved] { cursor: pointer; margin-bottom: 0; }
.fs-result-tpl-harmonika .fs-review-item:not(.er-foldet) [data-fold-hoved],
.fs-result-tpl-fejl-foerst .fs-review-item:not(.er-foldet) [data-fold-hoved] { margin-bottom: clamp(16px, 1.6vw, 24px); }
.fs-review-item.er-foldet .fs-review-body { display: none; }
.fs-review-item.er-foldet .fs-review-head h2 { font-size: 16.5px; margin: 0; }
.fs-result-tpl-harmonika .fs-review-meta,
.fs-result-tpl-fejl-foerst .fs-review-meta { justify-content: flex-start; }
.fs-result-tpl-harmonika .fs-review-domme,
.fs-result-tpl-fejl-foerst .fs-review-domme { margin-inline-start: auto; }
.fs-fold-pil { color: var(--fs-text-soft); transition: transform .18s ease; }
.fs-review-item:not(.er-foldet) .fs-fold-pil { transform: rotate(180deg); }
/* Sektionerne i 'fejlene først' */
.fs-review-sektion { font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase; color: var(--fs-red); margin: 28px 4px 12px; }
.fs-review-sektion.er-ok { color: var(--fs-green-dark); }
.fs-review-sektion:first-child { margin-top: 0; }
/* ════════ Prøveoversigten: fem skabeloner over samme markup ════════
Markup'en er den samme; klassen på gitteret bestemmer udseendet.
Mantraet er rene linjer og luft: alt der skalerer, skalerer med skærmen,
så en stor skærm giver større billeder — ikke en smal søjle i midten. */
.fs-groups {
--gutter: var(--fs-kant);
--gap: calc(clamp(10px, 1.2vw, 20px) * var(--fs-space));
max-width: var(--fs-maxw);
margin: 0 auto;
padding: 0 var(--gutter) calc(clamp(80px, 10vw, 160px) * var(--fs-space));
}
.fs-group-head {
padding: calc(clamp(56px, 7vw, 120px) * var(--fs-space)) 0 calc(clamp(24px, 2.6vw, 44px) * var(--fs-space));
max-width: 62ch;
}
/* Den store luft er afstand MELLEM sektioner — sidens første overskrift
skal ikke stå en tredjedel nede ad skærmen */
.fs-groups > .fs-group-head:first-child {
/* De 60px er lagt til med vilje og kun her: den første overskrift på
prøveoversigten stod for tæt på bjælken. Resten af siden er urørt. */
padding-top: calc(clamp(28px, 3.4vw, 64px) * var(--fs-space) + 60px);
}
/* Kundens egen linje øverst på oversigten — samme størrelse som gruppens
beskrivelse, blot med lidt vægt */
.fs-oversigt-overlinje {
padding-top: calc(clamp(28px, 3.4vw, 64px) * var(--fs-space));
font-size: clamp(16px, 1.15vw, 19px);
font-weight: 600;
}
.fs-oversigt-overlinje + .fs-group-head {
padding-top: calc(clamp(12px, 1.2vw, 20px) * var(--fs-space));
}
/* Kategoripillerne øverst på oversigten træder ind i den samme rækkefølge.
Uden de tre regler mistede .fs-group-head sin :first-child, faldt tilbage
på afstanden MELLEM sektioner og efterlod 83px tom luft under pillerne.
Værdierne er de samme som overlinjens, så de tre elementer kan stå i
vilkårlig kombination og altid have samme rytme. */
.fs-groups > .fs-kat-piller:first-child {
padding-top: calc(clamp(28px, 3.4vw, 64px) * var(--fs-space) + 60px);
}
.fs-oversigt-overlinje + .fs-kat-piller {
padding-top: calc(clamp(12px, 1.2vw, 20px) * var(--fs-space));
}
.fs-kat-piller + .fs-group-head {
padding-top: calc(clamp(12px, 1.2vw, 20px) * var(--fs-space));
}
.fs-group-head h2 {
font-size: clamp(30px, 3.2vw, 52px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.08;
}
.fs-group-head p {
font-size: clamp(16px, 1.15vw, 19px);
color: var(--fs-text-soft);
margin-top: clamp(10px, 1vw, 16px);
line-height: 1.55;
}
/* Luften mellem kortene er kundens valg (Design → Prøveoversigten →
Afstand mellem kort): --fs-kort-gap ganger den normale afstand, fra 0
til 3. Standarden 1 er det, der altid har været. */
.fs-tests { display: grid; gap: calc(var(--gap) * var(--fs-kort-gap, 1)); grid-template-columns: repeat(var(--fs-cols, 2), 1fr); }
@media (max-width: 820px) { .fs-tests { grid-template-columns: 1fr; } }
.fs-test {
position: relative;
border-radius: var(--fs-radius);
overflow: hidden;
text-decoration: none;
color: inherit;
display: block;
transition: transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.fs-test-img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--fs-field-bg);
}
.fs-test-lines { min-width: 0; }
.fs-test-title {
display: block;
font-size: clamp(19px, 1.35vw, 26px);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.2;
}
.fs-test-sub {
display: block;
font-size: clamp(13.5px, 0.85vw, 15px);
color: var(--fs-text-soft);
margin-top: calc(6px * var(--fs-space));
}
/* Den korte beskrivelse under prøvens navn — samme stemme som tal-linjen,
men en anelse større, for det er den, man læser */
.fs-test-desc {
display: block;
font-size: clamp(14px, 0.9vw, 15.5px);
font-weight: 500;
color: var(--fs-text-soft);
margin-top: calc(5px * var(--fs-space));
line-height: 1.45;
}
.fs-cta {
display: inline-flex; align-items: center; gap: 9px;
/* Knappens luft følger IKKE "Luft"-indstillingen: den er til afstande i
indholdet, og gange 1,7 (Meget luftig) blev knappen 66 px høj og lå
som en klods oven på billedet (set 12. sep). En knap er 40-44 px. */
padding: clamp(10px, 0.7vw, 12px) clamp(18px, 1.3vw, 26px);
border-radius: var(--fs-radius-btn);
background: var(--fs-navy); color: var(--fs-accent-text);
font-size: clamp(14px, 0.85vw, 15.5px); font-weight: 500;
text-decoration: none; white-space: nowrap;
transition: transform 200ms, filter 200ms;
}
/* Ligger knappen oven på et billede, er den altid hvid — en accentfarve
forsvinder i motivet, og så kan man ikke se, hvad man skal trykke på */
.fs-cta-light { background: rgba(255,255,255,0.96); color: #16202c; }
/* ── Hvad kortet gør, når man peger på det (Design → Prøveoversigten) ──
Løft er det gamle: kortet op, knappen til højre. Zoom og lys rører kun
billedet, så intet i kortet flytter sig; ingen gør ingenting. Klassen
fs-hover-* sidder på gitteret, og skabelonernes egne løft-regler
nedenfor er bundet til fs-hover-loeft. */
.fs-hover-loeft .fs-test:hover .fs-cta { filter: brightness(1.06); transform: translateX(calc(2px * var(--fs-dir))); }
.fs-hover-zoom .fs-test-img, .fs-hover-lys .fs-test-img { transition: transform 400ms cubic-bezier(0.2, 0.8, 0.3, 1), filter 300ms; }
.fs-hover-zoom .fs-test:hover .fs-test-img { transform: scale(1.04); }
.fs-hover-lys .fs-test:hover .fs-test-img { filter: brightness(1.2); }
/* Gitteret runder billedet selv og har ikke overflow hidden på kortet —
zoomet skal derfor klippes af billedets eget hjørne */
.fs-hover-zoom.fs-tpl-gitter .fs-test-img { overflow: hidden; }
/* ── 1. Brede billeder: helt ud til kanten, kun teksten holder margen ── */
.fs-tpl-billede-bred {
/* Bryder ud af sidens indrykning, så billederne rører kanterne */
margin-inline: calc(-1 * var(--gutter));
gap: calc(clamp(6px, 0.6vw, 12px) * var(--fs-kort-gap, 1));
}
.fs-tpl-billede-bred .fs-test { border-radius: 0; }
.fs-tpl-billede-bred .fs-test-img { aspect-ratio: 16 / 8.5; height: 100%; }
/* Mørk gradient, så teksten kan læses oven på et lyst instrumentbræt */
.fs-tpl-billede-bred .fs-test-body {
position: absolute; inset: auto 0 0 0;
display: flex; align-items: flex-end; justify-content: space-between;
gap: clamp(16px, 2vw, 40px);
padding: clamp(70px, 9vw, 150px) calc(clamp(24px, 3vw, 56px) * var(--fs-space)) calc(clamp(24px, 2.4vw, 44px) * var(--fs-space));
color: #fff; z-index: 2;
}
.fs-tpl-billede-bred .fs-test-sub { color: rgba(255,255,255,0.82); }
/* ── Overlayet under teksten på billedskabelonerne ──
Før lå gradienten i tekstfeltets egen baggrund og nåede kun så højt som
teksten, og styrken var fast 0,8. Nu er den et lag over billedet, der
går op til 62 % af kortets højde — og på telefonen, hvor teksten fylder
det meste af kortet, helt op — med kundens styrke (--fs-overlay, Design
→ Prøveoversigten → Overlay). Tekst og knap ligger over laget. */
.fs-tpl-billede-bred .fs-test::after,
.fs-tpl-fremhaevet .fs-test::after,
.fs-tpl-mosaik .fs-test::after,
.fs-tpl-magasin .fs-test::after {
content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; top: 38%; z-index: 1; pointer-events: none;
background: linear-gradient(to top,
rgba(0, 0, 0, var(--fs-overlay, 0.8)),
rgba(0, 0, 0, calc(var(--fs-overlay, 0.8) * 0.55)) 45%,
transparent);
}
@media (max-width: 620px) {
.fs-tpl-billede-bred .fs-test::after, .fs-tpl-fremhaevet .fs-test::after,
.fs-tpl-mosaik .fs-test::after, .fs-tpl-magasin .fs-test::after { top: 0; }
}
/* Ulige antal: den sidste fylder hele bredden */
.fs-tpl-billede-bred .fs-test:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fs-tpl-billede-bred .fs-test:last-child:nth-child(odd) .fs-test-img { aspect-ratio: 21 / 7; }
/* ── 2. Kort: billede over, tekst under ── */
.fs-tpl-kort .fs-test { background: var(--fs-surface); display: flex; flex-direction: column; }
.fs-hover-loeft.fs-tpl-kort .fs-test:hover { transform: translateY(-3px); }
.fs-tpl-kort .fs-test-body {
padding: calc(clamp(18px, 1.5vw, 28px) * var(--fs-space))
calc(clamp(20px, 1.6vw, 30px) * var(--fs-space))
calc(clamp(20px, 1.7vw, 30px) * var(--fs-space));
/* Titlen til venstre og knappen til højre står over for hinanden */
display: flex; align-items: flex-start; justify-content: space-between;
gap: calc(clamp(16px, 1.6vw, 32px) * var(--fs-space)); flex: 1;
}
.fs-tpl-kort .fs-cta { flex-shrink: 0; }
/* Kortet måler sig selv.
*
* Knappen står ved siden af teksten, og det holder kun, så længe kortet er
* bredt. Ved tre spalter og 1440px er kortet 421px — og så får teksten kun
* 215px, mens "Bestil adgang" tager 138. En titel som "Automekanikeren —
* mulige spørgsmål til køreprøven" brydes i tre linjer på 198px og ser
* klippet ud.
*
* En media query kan ikke løse det: det afhænger ikke af vinduet, men af
* KORTETS bredde, og den følger både vinduet, antallet af spalter og
* indholdets bredde. Derfor spørger vi kortet selv. Så virker det uanset om
* kunden sætter to, tre eller fire ved siden af hinanden.
*/
.fs-tpl-kort .fs-test { container-type: inline-size; container-name: proevekort; }
/* Under 520px har teksten ikke plads til en knap ved siden af sig. Så får
titel og beskrivelse hele bredden, og knappen lægger sig ned i linje med
tal-linjen — højrestillet, hvor øjet allerede leder efter den. */
@container proevekort (max-width: 520px) {
.fs-tpl-kort .fs-test-body {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
column-gap: calc(clamp(12px, 1.2vw, 20px) * var(--fs-space));
row-gap: calc(clamp(10px, 1vw, 16px) * var(--fs-space));
}
/* display:contents løfter titel, beskrivelse og tal-linje op i kortets
eget gitter, så tal-linjen og knappen kan dele en række. Uden det
kunne de to aldrig stå side om side — de er ikke søskende i markuppen. */
.fs-tpl-kort .fs-test-lines { display: contents; }
.fs-tpl-kort .fs-test-title,
.fs-tpl-kort .fs-test-desc { grid-column: 1 / -1; }
.fs-tpl-kort .fs-test-sub { grid-column: 1; margin-top: 0; align-self: end; }
.fs-tpl-kort .fs-cta { grid-column: 2; justify-self: end; }
}
/* Er kortet så smalt, at heller ikke tal-linjen og knappen kan stå ved siden
af hinanden, falder knappen ned under og fylder bredden. */
@container proevekort (max-width: 330px) {
.fs-tpl-kort .fs-test-body { grid-template-columns: 1fr; }
.fs-tpl-kort .fs-test-sub,
.fs-tpl-kort .fs-cta { grid-column: 1; justify-self: start; }
}
@media (max-width: 620px) {
.fs-tpl-kort .fs-test-body { flex-direction: column; }
}
/* ── 3. Liste: billede til venstre, knappen ude i højre kant ── */
.fs-tpl-liste { grid-template-columns: 1fr; gap: clamp(10px, 1vw, 16px); }
.fs-tpl-liste .fs-test {
background: var(--fs-surface);
display: grid; grid-template-columns: clamp(180px, 20vw, 320px) 1fr;
}
.fs-tpl-liste .fs-test-img { height: 100%; aspect-ratio: auto; min-height: clamp(120px, 11vw, 190px); }
.fs-tpl-liste .fs-test-body {
display: flex; align-items: center; justify-content: space-between;
gap: calc(clamp(20px, 2.5vw, 48px) * var(--fs-space));
padding: calc(clamp(20px, 2vw, 36px) * var(--fs-space)) calc(clamp(24px, 2.4vw, 44px) * var(--fs-space));
}
@media (max-width: 760px) {
.fs-tpl-liste .fs-test { grid-template-columns: 1fr; }
.fs-tpl-liste .fs-test-img { aspect-ratio: 16 / 9; min-height: 0; }
.fs-tpl-liste .fs-test-body { flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* ── 4. Gitter: billedet taler, titlen står stille under ── */
.fs-tpl-gitter { gap: calc(clamp(34px, 3.6vw, 68px) * var(--fs-space)) var(--gap); }
.fs-tpl-gitter .fs-test { background: none; text-align: center; overflow: visible; }
.fs-tpl-gitter .fs-test-img { border-radius: var(--fs-radius); }
.fs-tpl-gitter .fs-test:hover .fs-test-img { transform: none; }
.fs-hover-loeft.fs-tpl-gitter .fs-test:hover { transform: translateY(-3px); }
.fs-tpl-gitter .fs-test-body { padding: calc(clamp(14px, 1.2vw, 22px) * var(--fs-space)) 4px calc(clamp(8px, 0.8vw, 14px) * var(--fs-space)); }
.fs-tpl-gitter .fs-test-title { font-size: clamp(16px, 1.05vw, 20px); }
.fs-tpl-gitter .fs-cta { margin-top: calc(clamp(12px, 1.1vw, 18px) * var(--fs-space)); }
/* ── 5. Fremhævet første: teksten ligger oven på billederne ──
Er der under tre prøver i gruppen, fremhæver vi ingen: én bred og én
lille nedenunder ser ikke ud af noget. Så står de bare ved siden af. */
.fs-tpl-fremhaevet .fs-test { position: relative; }
.fs-hover-loeft.fs-tpl-fremhaevet .fs-test:hover { transform: translateY(-3px); }
.fs-tpl-fremhaevet .fs-test-img { aspect-ratio: 16 / 10; height: 100%; }
.fs-tpl-fremhaevet .fs-test-body {
position: absolute; inset: auto 0 0 0;
display: flex; align-items: flex-end; justify-content: space-between;
gap: calc(clamp(16px, 1.6vw, 32px) * var(--fs-space));
padding: clamp(60px, 7vw, 120px)
calc(clamp(20px, 2vw, 36px) * var(--fs-space))
calc(clamp(20px, 1.8vw, 32px) * var(--fs-space));
color: #fff; z-index: 2;
}
.fs-tpl-fremhaevet .fs-test-sub { color: rgba(255,255,255,0.82); }
.fs-tpl-fremhaevet .fs-cta { flex-shrink: 0; }
/* Den fremhævede er den samme — bare bredere og med større skrift */
.fs-tpl-fremhaevet:not(.fs-faa) .fs-test:first-child { grid-column: 1 / -1; }
.fs-tpl-fremhaevet:not(.fs-faa) .fs-test:first-child .fs-test-img { aspect-ratio: 21 / 8; }
.fs-tpl-fremhaevet:not(.fs-faa) .fs-test:first-child .fs-test-body {
padding: clamp(70px, 8vw, 130px)
calc(clamp(24px, 3vw, 52px) * var(--fs-space))
calc(clamp(24px, 2.4vw, 40px) * var(--fs-space));
}
.fs-tpl-fremhaevet:not(.fs-faa) .fs-test:first-child .fs-test-title { font-size: clamp(24px, 2.2vw, 40px); }
@media (max-width: 620px) {
.fs-tpl-fremhaevet .fs-test-body { flex-direction: column; align-items: flex-start; }
}
/* ── 6. Fremhævet på kort: samme opbygning, men teksten står under ── */
.fs-tpl-fremhaevet-kort .fs-test { background: var(--fs-surface); display: flex; flex-direction: column; }
.fs-hover-loeft.fs-tpl-fremhaevet-kort .fs-test:hover { transform: translateY(-3px); }
.fs-tpl-fremhaevet-kort .fs-test-body {
padding: calc(clamp(18px, 1.5vw, 28px) * var(--fs-space))
calc(clamp(20px, 1.6vw, 30px) * var(--fs-space))
calc(clamp(20px, 1.7vw, 30px) * var(--fs-space));
display: flex; align-items: flex-start; justify-content: space-between;
gap: calc(clamp(16px, 1.6vw, 32px) * var(--fs-space)); flex: 1;
}
.fs-tpl-fremhaevet-kort .fs-cta { flex-shrink: 0; }
/* Den første fylder bredden og får et roligere billedformat */
.fs-tpl-fremhaevet-kort:not(.fs-faa) .fs-test:first-child { grid-column: 1 / -1; }
.fs-tpl-fremhaevet-kort:not(.fs-faa) .fs-test:first-child .fs-test-img { aspect-ratio: 21 / 8; }
.fs-tpl-fremhaevet-kort:not(.fs-faa) .fs-test:first-child .fs-test-title { font-size: clamp(22px, 1.9vw, 34px); }
@media (max-width: 620px) {
.fs-tpl-fremhaevet-kort .fs-test-body { flex-direction: column; }
}
/* Gratis-mærket går igen i alle skabeloner */
.fs-free {
display: inline-block; margin-inline-start: 10px; padding: 3px 11px; border-radius: var(--fs-radius-btn);
background: color-mix(in srgb, var(--fs-green) 15%, transparent); color: var(--fs-green);
font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; vertical-align: middle;
}
/* ── 7. Mosaik: helt ud til kanten, i skiftende rækker ──
Gitteret har seks felter; et kort spænder 6 (hel), 3 (halv) eller 2
(tredjedel). Rækkerne lægges i tests.php efter antallet. */
.fs-tpl-mosaik {
margin-inline: calc(-1 * var(--gutter));
gap: calc(clamp(6px, 0.6vw, 12px) * var(--fs-kort-gap, 1));
grid-template-columns: repeat(6, 1fr);
}
.fs-tpl-mosaik .fs-test { border-radius: 0; }
.fs-tpl-mosaik .fs-plads-hel { grid-column: span 6; }
.fs-tpl-mosaik .fs-plads-halv { grid-column: span 3; }
.fs-tpl-mosaik .fs-plads-tredjedel { grid-column: span 2; }
.fs-tpl-mosaik .fs-test-img { aspect-ratio: 16 / 8.5; height: 100%; }
.fs-tpl-mosaik .fs-plads-hel .fs-test-img { aspect-ratio: 21 / 7; }
.fs-tpl-mosaik .fs-plads-tredjedel .fs-test-img { aspect-ratio: 4 / 3.2; }
.fs-tpl-mosaik .fs-test-body {
position: absolute; inset: auto 0 0 0;
display: flex; align-items: flex-end; justify-content: space-between;
gap: clamp(12px, 1.6vw, 32px);
padding: clamp(60px, 7vw, 120px) calc(clamp(18px, 2.2vw, 44px) * var(--fs-space)) calc(clamp(18px, 2vw, 36px) * var(--fs-space));
color: #fff; z-index: 2;
}
.fs-tpl-mosaik .fs-plads-hel .fs-test-body {
padding: clamp(70px, 9vw, 150px) calc(clamp(24px, 3vw, 56px) * var(--fs-space)) calc(clamp(24px, 2.4vw, 44px) * var(--fs-space)); }
.fs-tpl-mosaik .fs-plads-hel .fs-test-title { font-size: clamp(24px, 2.2vw, 40px); }
/* Tre på en række: teksten og knappen under hinanden, ellers er der ikke plads */
.fs-tpl-mosaik .fs-plads-tredjedel .fs-test-body { flex-direction: column; align-items: flex-start; gap: 12px; }
.fs-tpl-mosaik .fs-test-sub { color: rgba(255,255,255,0.82); }
.fs-tpl-mosaik .fs-cta { flex-shrink: 0; }
/* ── 8. Magasin: ét stort billede og to små stablet ved siden af ──
Tre spalter og to rækker pr. opslag; det store kort spænder to spalter og
to rækker, skiftevis til venstre og (fs-plads-hoejre) til højre. */
/* Seks spalter, ikke tre: det store kort spænder fire og de små to — og
så kan "to tilovers" deles i to HALVE på tre spalter hver. På tre
spalter fyldte hvert af de to sidste kort hele rækken, men fik det halve
korts billede på 1.800 px (set 12. sep). */
.fs-tpl-magasin { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
.fs-tpl-magasin .fs-test { position: relative; }
.fs-hover-loeft.fs-tpl-magasin .fs-test:hover { transform: translateY(-3px); }
.fs-tpl-magasin .fs-plads-stor { grid-column: span 4; grid-row: span 2; }
.fs-tpl-magasin .fs-plads-stor.fs-plads-hoejre { grid-column: 3 / span 4; }
.fs-tpl-magasin .fs-plads-lille.fs-plads-venstre { grid-column: 1 / span 2; }
.fs-tpl-magasin .fs-plads-lille { grid-column: span 2; }
.fs-tpl-magasin .fs-plads-halv { grid-column: span 3; }
.fs-tpl-magasin .fs-plads-hel { grid-column: 1 / -1; }
.fs-tpl-magasin .fs-test-img { aspect-ratio: 16 / 10; height: 100%; }
.fs-tpl-magasin .fs-plads-stor .fs-test-img { aspect-ratio: auto; position: absolute; inset: 0; width: 100%; object-fit: cover; }
/* Kortet i fuld bredde er lige så højt som det store kort i et opslag: to
små rækker på 16:10 i en tredjedels bredde plus luften imellem giver
2,39:1 (målt: 496 px mod 496) — før var det 21:7 og stod lavere (12. sep). */
.fs-tpl-magasin .fs-plads-hel .fs-test-img { aspect-ratio: 2.39; }
/* To ved siden af hinanden: lidt højere end 16:7, ellers ser de maste ud
ved siden af opslagets små kort (12. sep) */
.fs-tpl-magasin .fs-plads-halv .fs-test-img { aspect-ratio: 16 / 8.2; }
.fs-tpl-magasin .fs-test-body {
position: absolute; inset: auto 0 0 0;
display: flex; align-items: flex-end; justify-content: space-between;
gap: clamp(12px, 1.4vw, 28px);
padding: clamp(50px, 6vw, 100px) calc(clamp(16px, 1.8vw, 32px) * var(--fs-space)) calc(clamp(16px, 1.6vw, 28px) * var(--fs-space));
color: #fff; z-index: 2;
}
.fs-tpl-magasin .fs-plads-stor .fs-test-body,
.fs-tpl-magasin .fs-plads-hel .fs-test-body {
/* Samme luft i bunden som de små kort: så står "Start prøve" i det store
kort og "Bestil adgang" i det lille ved siden af på præcis samme linje
(Martin, 12. sep). Kun siderne er bredere. */
padding: clamp(70px, 8vw, 130px) calc(clamp(24px, 3vw, 52px) * var(--fs-space)) calc(clamp(16px, 1.6vw, 28px) * var(--fs-space)); }
.fs-tpl-magasin .fs-plads-stor .fs-test-title,
.fs-tpl-magasin .fs-plads-hel .fs-test-title { font-size: clamp(24px, 2.2vw, 40px); }
/* De små: teksten og knappen under hinanden */
.fs-tpl-magasin .fs-plads-lille .fs-test-body { flex-direction: column; align-items: flex-start; gap: 10px; }
.fs-tpl-magasin .fs-plads-lille .fs-test-desc { display: none; }
.fs-tpl-magasin .fs-test-sub { color: rgba(255,255,255,0.82); }
.fs-tpl-magasin .fs-cta { flex-shrink: 0; }
/* Mellem tablet og desktop er der ikke plads til planen: kortene står to og
to, alle lige store, med teksten over knappen. Set på 988 px 12. sep, hvor
de små kort klemte "25 spørgsmål · 25 min." ned i fem linjer. */
@media (max-width: 1023px) {
.fs-tpl-mosaik, .fs-tpl-magasin { grid-template-columns: repeat(2, 1fr); }
/* Det store kort til højre har tre klasser i sin regel (grid-column: 3 /
span 4) og slog "auto" med to — og så lavede det fire usynlige spalter,
som klemte alt andet til nul. Derfor står den også her. */
.fs-tpl-mosaik .fs-test, .fs-tpl-magasin .fs-test,
.fs-tpl-magasin .fs-plads-stor.fs-plads-hoejre,
.fs-tpl-magasin .fs-plads-lille.fs-plads-venstre { grid-column: auto; grid-row: auto; }
.fs-tpl-mosaik .fs-test-img, .fs-tpl-magasin .fs-test-img { aspect-ratio: 16 / 9.5; position: static; }
.fs-tpl-mosaik .fs-test-body, .fs-tpl-magasin .fs-test-body {
flex-direction: column; align-items: flex-start; gap: 12px;
padding: clamp(50px, 6vw, 90px) clamp(16px, 2vw, 28px) clamp(16px, 2vw, 24px); }
.fs-tpl-mosaik .fs-test-title, .fs-tpl-magasin .fs-test-title { font-size: clamp(18px, 2vw, 24px); }
.fs-tpl-magasin .fs-plads-lille .fs-test-desc { display: block; }
}
/* På en telefon står alt i én spalte — planen fra serveren gælder ikke.
Og ALLE kort i ALLE skabeloner får billedets egne proportioner: spørgs-
målsbillederne er 2400×1440 = 5:3, så intet beskæres, og alle kort er
lige høje. !important med vilje: skabelonernes egne mål (21:7 på den
brede, 21:8 på den fremhævede, første-barn-regler) er stærkere end en
almindelig regel her, og de skal alle vige på telefonen. */
@media (max-width: 820px) {
.fs-tests .fs-test .fs-test-img { aspect-ratio: 5 / 3 !important; height: auto !important; position: static !important; }
.fs-tpl-mosaik, .fs-tpl-magasin { grid-template-columns: 1fr; }
.fs-tpl-mosaik .fs-test, .fs-tpl-magasin .fs-test,
.fs-tpl-magasin .fs-plads-stor.fs-plads-hoejre,
.fs-tpl-magasin .fs-plads-lille.fs-plads-venstre { grid-column: auto; grid-row: auto; }
.fs-tpl-mosaik .fs-test-img, .fs-tpl-magasin .fs-test-img { aspect-ratio: 16 / 9; position: static; }
.fs-tpl-mosaik .fs-test-body, .fs-tpl-magasin .fs-test-body {
flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
@media (max-width: 620px) {
.fs-tpl-mosaik .fs-test-body, .fs-tpl-magasin .fs-test-body { flex-direction: column; align-items: flex-start; }
}
/* ── 9. Karusellerne (Swiper) ──
Fem skabeloner over samme markup: tests.php pakker kortene i Swipers
markup, når gruppen har prøver nok, og js/karusel.js starter karusellen
på desktop med skabelonens egne valg. Karusel, Rampelys, Coverflow og
Scene har teksten oven på billedet (som Fremhævet); Hylde har teksten
under på et lyst kort (som Kort). Pilene står som runde, hvide knapper
midt på kortenes højde, prikkerne under; den aktive prik er en lille
pille i accentfarven. Scene har miniaturer i stedet for prikker.
Afstanden mellem kortene er kassens column-gap — js/karusel.js læser den
og giver den til Swiper, så "Afstand mellem kort" også gælder her. */
.fs-karusel { position: relative; column-gap: calc(var(--gap) * var(--fs-kort-gap, 1)); }
/* Luft over og under, så løftet og skyggen ikke klippes af overflow */
.fs-karusel .swiper { overflow: hidden; padding: 8px 0; margin: -8px 0; }
.fs-karusel .fs-tests.swiper-wrapper { display: flex; gap: 0; grid-template-columns: none; }
.fs-karusel .swiper-slide { height: auto; }
/* Prikkerne står under kortene, så luften ned til næste gruppe er mindre end mellem gitre */
.fs-karusel + .fs-group-head { padding-top: calc(clamp(36px, 4.4vw, 76px) * var(--fs-space)); }
/* Teksten oven på billedet: Karusel, Rampelys, Coverflow og Scene */
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test { position: relative; height: 100%; }
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow) .fs-test-img { aspect-ratio: 16 / 10; height: 100%; }
.fs-tpl-scene .fs-test-img { aspect-ratio: 2.39 / 1; height: 100%; }
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test-body {
position: absolute; inset: auto 0 0 0;
display: flex; align-items: flex-end; justify-content: space-between;
gap: clamp(12px, 1.4vw, 28px);
padding: clamp(50px, 6vw, 100px) calc(clamp(16px, 1.8vw, 32px) * var(--fs-space)) calc(clamp(16px, 1.6vw, 28px) * var(--fs-space));
color: #fff; z-index: 2;
}
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test-sub { color: rgba(255,255,255,0.82); }
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test-desc { color: rgba(255,255,255,0.88); }
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene, .fs-tpl-hylde) .fs-cta { flex-shrink: 0; }
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test::after {
content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; top: 38%; z-index: 1; pointer-events: none;
background: linear-gradient(to top, rgba(0, 0, 0, var(--fs-overlay, 0.8)), rgba(0, 0, 0, calc(var(--fs-overlay, 0.8) * 0.55)) 45%, transparent);
}
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-free { background: rgba(255,255,255,0.24); color: #fff; }
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test.er-laast .fs-test-title { color: #fff; }
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test.er-laast .fs-test-sub,
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test.er-laast .fs-test-desc { color: rgba(255, 255, 255, .82); }
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test.er-laast .fs-test-lines { opacity: 1; }
/* Scene: filmlærred i hele bredden — større titel, og teksten holder sig til venstre */
.fs-tpl-scene .fs-test-body { padding-bottom: calc(clamp(22px, 2.4vw, 44px) * var(--fs-space)); padding-inline-start: calc(clamp(22px, 2.6vw, 48px) * var(--fs-space)); padding-inline-end: calc(clamp(22px, 2.6vw, 48px) * var(--fs-space)); }
.fs-tpl-scene .fs-test-lines { max-width: 62%; }
.fs-tpl-scene .fs-test-title { font-size: clamp(24px, 2.4vw, 44px); }
.fs-tpl-scene .fs-test-desc { font-size: clamp(15px, 1.05vw, 18px); }
.fs-karusel-scene .fs-karusel-pil.er-forrige { inset-inline-start: clamp(14px, 1.6vw, 28px); }
.fs-karusel-scene .fs-karusel-pil.er-naeste { inset-inline-end: clamp(14px, 1.6vw, 28px); }
.fs-scene-miniaturer { overflow: hidden; margin-top: 14px; }
.fs-scene-miniaturer .swiper-slide {
width: clamp(88px, 9vw, 150px); aspect-ratio: 16 / 10; height: auto; cursor: pointer;
border-radius: calc(var(--fs-radius) * 0.5); overflow: hidden; background: var(--fs-surface);
opacity: 0.5; transition: opacity 200ms; outline: 2px solid transparent; outline-offset: -2px; }
.fs-scene-miniaturer .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fs-scene-miniaturer .swiper-slide:hover { opacity: 0.8; }
.fs-scene-miniaturer .swiper-slide-thumb-active { opacity: 1; outline-color: var(--fs-navy); }
/* Rampelys: det aktive kort i fuldt lys, naboerne dæmpet og lidt mindre.
Kun mens Swiper kører (swiper-initialized) — ellers står alle kort lyse. */
.fs-karusel-rampelys .swiper-slide .fs-test { transition: transform 600ms cubic-bezier(.4, 0, .2, 1), opacity 600ms; }
.fs-karusel-rampelys .swiper-initialized .swiper-slide:not(.swiper-slide-active) .fs-test { opacity: 0.42; transform: scale(0.94); }
.fs-karusel-rampelys .swiper-initialized .swiper-slide:not(.swiper-slide-active) .fs-test-body { opacity: 0; transition: opacity 300ms; }
.fs-karusel-rampelys .fs-karusel-pil.er-forrige { inset-inline-start: clamp(14px, 1.6vw, 28px); }
.fs-karusel-rampelys .fs-karusel-pil.er-naeste { inset-inline-end: clamp(14px, 1.6vw, 28px); }
/* Coverflow: kortets bredde står her (slidesPerView: auto), og kun det
forreste kort viser sin tekst — de drejede ville stå skævt at læse på */
.fs-karusel-coverflow .swiper-slide { width: 56%; }
.fs-karusel-coverflow .swiper-slide .fs-test-body { transition: opacity 320ms; }
.fs-karusel-coverflow .swiper-initialized .swiper-slide:not(.swiper-slide-active) .fs-test-body { opacity: 0; }
.fs-karusel-coverflow .swiper-initialized .swiper-slide:not(.swiper-slide-active) .fs-test::after { background: rgba(0, 0, 0, 0.28); top: 0; }
.fs-karusel-coverflow .fs-karusel-pil.er-forrige { inset-inline-start: clamp(14px, 1.6vw, 28px); }
.fs-karusel-coverflow .fs-karusel-pil.er-naeste { inset-inline-end: clamp(14px, 1.6vw, 28px); }
/* Hylde: billedet over, teksten under på et lyst kort — som Kort, men
knappen står under teksten, for kortene er smallere */
.fs-tpl-hylde .fs-test { background: var(--fs-surface); display: flex; flex-direction: column; height: 100%; }
.fs-hover-loeft.fs-tpl-hylde .fs-test:hover { transform: translateY(-3px); }
.fs-tpl-hylde .fs-test-img { aspect-ratio: 16 / 10; }
.fs-tpl-hylde .fs-test-body {
display: flex; flex-direction: column; align-items: flex-start; flex: 1;
gap: calc(clamp(14px, 1.3vw, 22px) * var(--fs-space));
padding: calc(clamp(16px, 1.4vw, 24px) * var(--fs-space))
calc(clamp(18px, 1.5vw, 26px) * var(--fs-space))
calc(clamp(18px, 1.6vw, 26px) * var(--fs-space));
}
.fs-tpl-hylde .fs-cta { margin-top: auto; }
/* Premiere: den store slider — midten i fokus, naboerne kigger frem i
kanterne uden at dæmpes, teksten i en lys boks nede i billedet, og
pilene er bare hvide vinkler oven på billedet. Kun det aktive kort
viser sin boks. */
.fs-tpl-premiere .fs-test { position: relative; height: 100%; }
.fs-tpl-premiere .fs-test-img { aspect-ratio: 16 / 9; height: 100%; }
/* Boksen er lille, så billedet kan ses (Martin, 12. sep): ingen knap på
desktop — kortet er selv linket — men en rund pil i boksens nederste
hjørne som på quiz- og lektionskortene, og en hængelås i det øverste
hjørne, når prøven er låst. Begge er pseudo-elementer med Bootstrap-ikoner,
så markup'en er den samme som i de andre skabeloner. */
.fs-tpl-premiere .fs-test-body {
position: absolute; inset-inline-start: 4%; bottom: 8%; z-index: 2; max-width: 76%;
display: flex; flex-direction: column; align-items: flex-start;
gap: 0;
/* Polstringen i siderne ganges IKKE med --fs-space: med "Meget luftig"
blev højre side 143 px, og beskrivelsen knækkede i to linjer */
padding: calc(clamp(14px, 1.3vw, 22px) * var(--fs-space)) clamp(60px, 4.2vw, 76px)
calc(clamp(14px, 1.3vw, 22px) * var(--fs-space)) clamp(18px, 1.7vw, 30px);
background: var(--fs-surface); color: var(--fs-text);
border-radius: calc(var(--fs-radius) * 0.5);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
transition: opacity 320ms;
}
.fs-tpl-premiere .fs-test-title { font-size: clamp(20px, 1.7vw, 30px); }
.fs-tpl-premiere .fs-test-desc { font-size: clamp(14px, 0.95vw, 16px); }
.fs-tpl-premiere .fs-test-sub { margin-top: calc(4px * var(--fs-space)); }
/* Pilen: nederst i boksens hjørne, midt for tal-linjen */
.fs-tpl-premiere .fs-test-body::after {
content: "\f138"; font-family: bootstrap-icons; font-size: 15px; line-height: 1;
position: absolute; inset-inline-end: 16px; bottom: 16px; width: 36px; height: 36px;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--fs-navy) 10%, transparent); color: var(--fs-navy);
transition: background 160ms, color 160ms;
}
.fs-tpl-premiere .fs-test:hover .fs-test-body::after { background: var(--fs-navy); color: var(--fs-accent-text); }
/* Låsen: øverst i hjørnet, dæmpet — og pilen bliver stående, for kortet fører til bestilling */
.fs-tpl-premiere .fs-test.er-laast .fs-test-body::before {
content: "\f47a"; font-family: bootstrap-icons; font-size: 13px; line-height: 1;
position: absolute; inset-inline-end: 16px; top: 14px; color: var(--fs-text-soft);
}
@media (min-width: 821px) {
.fs-tpl-premiere .fs-cta { display: none; }
}
[dir="rtl"] .fs-tpl-premiere .fs-test-body::after { transform: scaleX(-1); }
.fs-karusel-premiere .swiper-initialized .swiper-slide:not(.swiper-slide-active) .fs-test-body { opacity: 0; }
/* Strammere rytme, så den store slider og prikkerne står over folden på en
almindelig skærm (Martin, 12. sep): 70 px mindre luft over det første på
siden (de 60 px, alle andre skabeloner lægger til, er væk, og 10 til),
10 px mindre under hver gruppes beskrivelse. Kun Premiere. */
.fs-groups-premiere > .fs-oversigt-overlinje:first-child,
.fs-groups-premiere > .fs-group-head:first-child,
.fs-groups-premiere > .fs-kat-piller:first-child { padding-top: calc(clamp(28px, 3.4vw, 64px) * var(--fs-space) - 10px); }
.fs-groups-premiere .fs-group-head { padding-bottom: calc(clamp(24px, 2.6vw, 44px) * var(--fs-space) - 10px); }
/* Magasin: 30 px mindre luft over den første overskrift (kundens egen
overlinje har allerede den stramme afstand og rører vi ikke), og de små kort en
anelse lavere (16/10 → 16/8.8, ca. 45 px hver i 1920 px), så det store
kort, der spænder over dem, bliver ca. 90 px lavere og bunden af det kan
ses på en almindelig skærm (Martin, 12. sep, i to omgange). Kun Magasin. */
.fs-groups-magasin > .fs-group-head:first-child,
.fs-groups-magasin > .fs-kat-piller:first-child { padding-top: calc(clamp(28px, 3.4vw, 64px) * var(--fs-space) + 30px); }
@media (min-width: 1024px) { .fs-tpl-magasin .fs-plads-lille .fs-test-img { aspect-ratio: 16 / 8.8; } }
/* Pilene er de samme hvide, runde som i de andre karuseller — bare hvide
vinkler oven på billedet var svære at se (Martin, 12. sep) */
.fs-karusel-premiere .fs-karusel-pil.er-forrige { inset-inline-start: 2.5%; }
.fs-karusel-premiere .fs-karusel-pil.er-naeste { inset-inline-end: 2.5%; }
/* Premieres små rækker: billedet med hjørner, titel og tal-linje under på
selve siden — ingen kortflade, ingen beskrivelse og ingen knap på
desktop; kortet er selv linket. På telefonen (listen) står alt. */
.fs-tpl-premiere-raekke .fs-test { display: flex; flex-direction: column; height: 100%; overflow: visible; border-radius: 0; }
.fs-hover-loeft.fs-tpl-premiere-raekke .fs-test:hover { transform: translateY(-3px); }
.fs-tpl-premiere-raekke .fs-test-img { aspect-ratio: 16 / 9; border-radius: var(--fs-radius); }
.fs-tpl-premiere-raekke .fs-test-body { padding: calc(clamp(10px, 0.9vw, 14px) * var(--fs-space)) 0 0; }
.fs-tpl-premiere-raekke .fs-test-title { font-size: clamp(16px, 1.15vw, 20px); }
.fs-tpl-premiere-raekke .fs-test-sub { font-size: clamp(13px, 0.8vw, 14.5px); margin-top: calc(4px * var(--fs-space)); }
.fs-tpl-premiere-raekke .fs-test-desc, .fs-tpl-premiere-raekke .fs-cta { display: none; }
.fs-karusel-premiere-raekke .fs-karusel-pil { width: 40px; height: 40px; top: 30%; }
.fs-karusel-premiere-raekke .fs-karusel-pil.er-forrige { inset-inline-start: 8px; }
.fs-karusel-premiere-raekke .fs-karusel-pil.er-naeste { inset-inline-end: 8px; }
.fs-karusel-premiere-raekke .fs-karusel-prikker { margin-top: 14px; }
.fs-karusel-premiere-raekke .swiper { padding: 8px 0 4px; }
/* Pilene */
.fs-karusel-pil {
position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
background: rgba(255, 255, 255, 0.96); color: #16202c;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 200ms, opacity 200ms, box-shadow 200ms;
}
.fs-karusel-pil.er-forrige { inset-inline-start: -22px; }
.fs-karusel-pil.er-naeste { inset-inline-end: -22px; }
.fs-karusel-pil:hover { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24); transform: translateY(-50%) scale(1.06); }
.fs-karusel-pil.swiper-button-disabled { opacity: 0; pointer-events: none; }
.fs-karusel-pil.swiper-button-lock { display: none; }
/* Scene og Hylde: pilen skal stå midt på billedet, ikke midt på kort + miniaturer/tekst */
.fs-karusel-scene .fs-karusel-pil, .fs-karusel-hylde .fs-karusel-pil { top: auto; bottom: auto; }
.fs-karusel-scene .fs-karusel-pil { top: calc((100% - 14px - clamp(88px, 9vw, 150px) * 0.625) / 2); }
.fs-karusel-hylde .fs-karusel-pil { top: 26%; }
/* Prikkerne */
.fs-karusel-prikker { display: flex; justify-content: center; gap: 8px; margin-top: 18px; min-height: 8px; }
.fs-karusel-prikker .swiper-pagination-bullet {
width: 8px; height: 8px; margin: 0; border-radius: 999px; opacity: 1;
background: color-mix(in srgb, var(--fs-text) 22%, transparent); transition: width 260ms, background 200ms; }
.fs-karusel-prikker .swiper-pagination-bullet-active { width: 24px; background: var(--fs-navy); }
.fs-karusel-prikker.swiper-pagination-lock { display: none; }
/* Uden karusel (for få prøver) og på telefonen: det almindelige gitter */
@media (max-width: 820px) {
.fs-karusel .fs-tests.swiper-wrapper { display: grid; gap: calc(var(--gap) * var(--fs-kort-gap, 1)); grid-template-columns: 1fr; transform: none !important; }
.fs-karusel .swiper-slide { width: auto !important; margin: 0 !important; transform: none !important; opacity: 1 !important; }
.fs-karusel .swiper { padding: 0; margin: 0; }
/* Miniaturerne bærer også .swiper, og Swipers ark (læst efter dette) siger display: block — derfor to klasser */
.fs-karusel-pil, .fs-karusel-prikker, .fs-karusel .fs-scene-miniaturer { display: none; }
.fs-tpl-scene .fs-test-lines { max-width: none; }
.fs-tpl-scene .fs-test-title { font-size: clamp(19px, 1.35vw, 26px); }
/* Premiere på telefonen: boksen under billedet som et kort, rækkerne med knap */
.fs-tpl-premiere .fs-test { background: var(--fs-surface); display: flex; flex-direction: column; }
.fs-tpl-premiere .fs-test-body { position: static; max-width: none; border-radius: 0; box-shadow: none; opacity: 1 !important; padding: 18px 20px 20px; gap: 12px; }
.fs-tpl-premiere .fs-test-body::after, .fs-tpl-premiere .fs-test.er-laast .fs-test-body::before { display: none; }
.fs-tpl-premiere .fs-test-title { font-size: clamp(19px, 1.35vw, 26px); }
.fs-tpl-premiere-raekke .fs-test { background: var(--fs-surface); overflow: hidden; border-radius: var(--fs-radius); }
.fs-tpl-premiere-raekke .fs-test-img { border-radius: 0; }
.fs-tpl-premiere-raekke .fs-test-body { padding: 16px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fs-tpl-premiere-raekke .fs-test-desc, .fs-tpl-premiere-raekke .fs-cta { display: block; }
}
@media (max-width: 620px) {
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test-body { flex-direction: column; align-items: flex-start; }
}
.fs-tpl-billede-bred .fs-free,
.fs-tpl-fremhaevet .fs-free,
.fs-tpl-mosaik .fs-free,
.fs-tpl-magasin .fs-free { background: rgba(255,255,255,0.24); color: #fff; }
/* Topbaren følger med ned, hvis kunden har valgt det */
.fs-sticky .fs-topbar { position: fixed; }
body:not(.fs-sticky) .fs-topbar { position: absolute; }
@media (prefers-reduced-motion: reduce) {
.fs-test, .fs-cta { transition: none; }
}
/* Topbaren: logo eller bogstav, navn og en linje under */
.fs-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; min-width: 0; }
.fs-logo-img { height: var(--fs-logo-h); width: auto; max-width: 260px; display: block; }
/* Er der uploadet et logo til mørk bund, bytter de to plads */
.fs-logo-img-moerk { display: none; }
.fs-dark .fs-logo-img-moerk { display: block; }
.fs-dark .fs-logo:has(.fs-logo-img-moerk) .fs-logo-img:not(.fs-logo-img-moerk) { display: none; }
.fs-logo-text { display: flex; flex-direction: column; min-width: 0; }
.fs-logo-text strong { font-size: 15px; line-height: 1.25; }
.fs-logo-sub { font-size: 13px; color: var(--fs-text-soft); line-height: 1.25; }
.fs-logo-sub a { color: var(--fs-bar-accent); }
/* Navnet og dagelinjen stod klods op ad hinanden, og pillen gjorde det
tydeligt. Linjen flyttes SAMLET ned: rykkede man kun pillen, kom den ud
af trit med "5 dage tilbage", og de to hører til på samme linje. */
.fs-topbar-elev .fs-logo-sub { margin-top: 3px; }
/* Fladen, oversigten ligger på. Plads til topbaren, uanset om den er fast. */
.fs-surface-page { padding-top: var(--fs-bar-h); min-height: 100vh; }
/* ════════ Døren ind: login, tofaktor, aktivering og glemt kode ════════
Fire skabeloner over samme markup. Billederne kommer fra kundens egne
prøver og skifter langsomt — de er der for stemningen, ikke for at
læses, så teksten står aldrig oven på et uroligt motiv uden dække. */
.fs-login {
min-height: 100vh;
padding-top: var(--fs-bar-h);
display: grid;
align-items: center;
}
.fs-login-kort { padding: clamp(28px, 5vw, 72px) var(--fs-kant); }
.fs-login .fs-front-login {
/* Fast bredde, så kortet ikke ånder, når indholdet skifter — fx mellem
login-fanerne, hvor teksterne har forskellig længde.
max-width SKAL med: .fs-front-login har 440px længere oppe, og den
vinder over width uanset rækkefølge. */
width: min(552px, 100%);
max-width: min(552px, 100%);
/* .fs-ready centrerer sig selv med margin auto — her er det containeren,
der bestemmer, hvor kortet står */
margin-inline: 0;
}
/* Introteksterne ligger i samme celle — den skjulte fylder stadig, så
hverken højden eller bredden hopper, når man skifter fane */
.fs-login .fs-ready-text { display: grid; }
.fs-login .fs-ready-text > span { grid-area: 1 / 1; }
.fs-login .fs-ready-text > span.er-vaek { visibility: hidden; }
/* Billedbunken. Kun ét er fremme ad gangen; de andre venter gennemsigtige. */
.fs-login-billeder { position: relative; overflow: hidden; }
.fs-login-billeder img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.4s ease-in-out;
}
.fs-login-billeder img.er-fremme { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.fs-login-billeder img { transition: none; }
}
/* ── 1. Midt på siden ── */
.fs-login-midt { justify-items: center; }
.fs-login-midt .fs-login-kort { width: 100%; display: flex; justify-content: center; }
/* ── 5 og 6. Ren — som skoleportalens login: intet billede, kortet højt
på siden i stedet for lodret centreret ── */
.fs-login-ren,
.fs-login-ren-venstre { align-items: start; }
.fs-login-ren { justify-items: center; }
.fs-login-ren .fs-login-kort { width: 100%; display: flex; justify-content: center; }
.fs-login-ren-venstre .fs-login-kort { padding-inline: var(--fs-hjoerne); }
/* ── 2 og 3. Billede ved siden af ── */
.fs-login-side,
.fs-login-side-omvendt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.fs-login-side .fs-login-billeder,
.fs-login-side-omvendt .fs-login-billeder { height: 100%; min-height: 100vh; }
.fs-login-side .fs-login-billeder { order: 2; }
.fs-login-side-omvendt .fs-login-billeder { order: 0; }
.fs-login-side .fs-login-kort,
.fs-login-side-omvendt .fs-login-kort { order: 1; display: flex; justify-content: center; }
@media (max-width: 860px) {
.fs-login-side,
.fs-login-side-omvendt { grid-template-columns: 1fr; }
.fs-login-side .fs-login-billeder,
.fs-login-side-omvendt .fs-login-billeder { display: none; }
}
/* ── 4. Billede bagved ── */
.fs-login-baggrund,
.fs-login-baggrund-midt { position: relative; }
/* Kortet holder samme venstrekant som logoet i baren ovenover */
.fs-login-baggrund { justify-items: start; }
.fs-login-baggrund .fs-login-kort {
width: 100%;
padding-inline: var(--fs-hjoerne);
}
/* Den midtfor centrerer kortet i stedet */
.fs-login-baggrund-midt { justify-items: center; }
.fs-login-baggrund-midt .fs-login-kort { display: flex; justify-content: center; }
.fs-login-baggrund .fs-login-billeder,
.fs-login-baggrund-midt .fs-login-billeder { position: fixed; inset: 0; z-index: 0; }
/* Et dæmpende lag, så teksten kan læses oven på et hvilket som helst motiv */
.fs-login-baggrund .fs-login-billeder::after,
.fs-login-baggrund-midt .fs-login-billeder::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
z-index: 1;
}
/* Står kortet i midten, skal dæmpningen også være jævn */
.fs-login-baggrund-midt .fs-login-billeder::after {
background: rgba(0, 0, 0, 0.42);
}
.fs-login-baggrund .fs-login-kort,
.fs-login-baggrund-midt .fs-login-kort { position: relative; z-index: 1; }
.fs-login-baggrund .fs-front-login,
.fs-login-baggrund-midt .fs-front-login {
background: var(--fs-surface);
border-radius: var(--fs-radius);
padding: clamp(28px, 3.5vw, 52px);
box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}
/* ── Topbaren oven på et fuldskærmsbillede ──
Fladen er mørk af overlayet, så alt i baren skal være lyst — også når
siden ellers kører i lys tilstand. */
.fs-paa-billede .fs-topbar { background: transparent; }
.fs-paa-billede .fs-logo-text strong,
.fs-paa-billede .fs-logo-text span,
.fs-paa-billede .fs-sprog,
.fs-paa-billede .fs-tema { color: rgba(255, 255, 255, 0.92); }
.fs-paa-billede .fs-sprog:hover,
.fs-paa-billede .fs-tema:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.fs-paa-billede .fs-sprog select option { color: var(--fs-text); }
/* Uden logo står forbogstavet i en ring — den skal også være lys */
.fs-paa-billede .fs-logo-mark { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
/* Har kunden et logo til mørk bund, er det dét, der hører hjemme her —
uanset om eleven kører i lys eller mørk tilstand */
.fs-paa-billede .fs-logo-img-moerk { display: block; }
.fs-paa-billede .fs-logo:has(.fs-logo-img-moerk) .fs-logo-img:not(.fs-logo-img-moerk) { display: none; }
/* ── … og HELE navigationen ──
Reglerne ovenfor blev skrevet, da bjælken kun havde logo, sprog og tema.
Siden kom navigationspunkterne, Mere-menuen, bestil-knappen,
kategorivælgeren og dage-knappen til — og de blev stående i accentfarven
på et mørkt foto, altså usynlige. Alt i bjælken skal være lyst her. */
.fs-paa-billede .fs-topbar-elev .fs-topbar-right .fs-link,
.fs-paa-billede .fs-topbar-elev .fs-topbar-right .fs-link.fs-nav,
.fs-paa-billede .fs-topbar-elev .fs-mere-knap,
.fs-paa-billede .fs-topbar-elev .fs-menu-dage,
.fs-paa-billede .fs-topbar-elev .fs-logo-sub,
.fs-paa-billede .fs-topbar-elev .fs-gaest-login { color: rgba(255, 255, 255, 0.92); }
.fs-paa-billede .fs-topbar-elev .fs-topbar-right .fs-link:hover,
.fs-paa-billede .fs-topbar-elev .fs-mere-knap:hover { color: #fff; }
/* Stregen under det aktive punkt tegnes med accentfarven */
.fs-paa-billede .fs-topbar-elev .fs-topbar-right a.fs-link.fs-nav.er-aktiv::after {
background: rgba(255, 255, 255, 0.92); }
/* Burgerens tre streger */
.fs-paa-billede .fs-topbar-elev .fs-burger-ikon span { background: rgba(255, 255, 255, 0.92); }
/* Bestil-knappen: fremhævningen er en LYS pille med mørk skrift, og den
står fint på et foto. Kant-varianten tegner derimod med accenten og
forsvinder — den låner fremhævningens farver her. */
.fs-paa-billede .fs-cta-kant .fs-topbar-right > a.fs-cta-knap {
border-color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92); }
.fs-paa-billede .fs-cta-kant .fs-topbar-right > a.fs-cta-knap:hover {
background: var(--fs-frem); border-color: var(--fs-frem); color: var(--fs-frem-tekst); }
/* Pillen om det aktive punkt bruger accenten som bund — den skal være lys */
.fs-paa-billede .fs-nav-aktiv-pille .fs-topbar-right a.fs-nav.er-aktiv {
background: rgba(255, 255, 255, 0.22); color: #fff; }
/* Værktøjsbakken i elevens bjælke — samme greb som skoleportalens */
.fs-paa-billede .fs-topbar-elev .fs-menu-vaerktoej { background: rgba(255, 255, 255, 0.16); }
.fs-paa-billede .fs-topbar-elev .fs-menu-vaerktoej .fs-drop-knap,
.fs-paa-billede .fs-topbar-elev .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
color: rgba(255, 255, 255, 0.92); }
.fs-paa-billede .fs-topbar-elev .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap:hover {
background: rgba(255, 255, 255, 0.18); }
/* Menuerne folder ud som almindelige kort — de står på hvid bund og skal
IKKE arve den lyse skrift */
.fs-paa-billede .fs-drop-menu,
.fs-paa-billede .fs-drop-menu a,
.fs-paa-billede .fs-drop-menu button { color: var(--fs-text); }
/* Hjælpelinket under loginformularen */
.fs-login-hjaelp { margin-top: 22px; font-size: 14.5px; }
.fs-login-hjaelp a { color: var(--fs-text-soft); text-decoration: none; border-bottom: 1px solid currentColor; }
.fs-login-hjaelp a:hover { color: var(--fs-navy); }
/* De to veje videre står side om side. De ombryder under hinanden, når
der ikke er plads — det er stadig pænere end at tvinge dem sammen. */
.fs-login-veje {
margin-top: 22px;
display: flex;
flex-wrap: wrap;
gap: 8px 26px;
font-size: 14.5px;
}
.fs-login-vej { color: var(--fs-text-soft); text-decoration: none; border-bottom: 1px solid currentColor; }
.fs-login-vej:hover { color: var(--fs-navy); }
/* Privatlivspolitikken skal kunne findes, ikke inviteres til. Luft over,
mindre og svagere end de to andre — den konkurrerer ikke med dem. */
.fs-login-privatliv { margin-top: 30px; font-size: 13px; }
.fs-login-privatliv a {
color: var(--fs-text-soft);
opacity: .62;
text-decoration: none;
/* Stregen bliver: den er dét, der siger, at man kan trykke. Farven og
størrelsen gør resten af arbejdet med at dæmpe den. */
border-bottom: 1px solid currentColor;
}
.fs-login-privatliv a:hover { opacity: 1; }
/* ════════ Butikken ════════
Købet er tre skridt: hvad skal du til prøve i, hvor længe, og hvem er du.
Kategorien står øverst, fordi vi har set folk købe til bil og tro, det
var motorcykel. */
/* Fladen har fuld bredde som de andre sider, så overskriften holder
venstrekant med logoet i toppen. Bredden ligger på indholdet — siden
skal ikke stå klemt inde på midten i sin egen bredde. */
.fs-koeb { max-width: var(--fs-maxw); }
.fs-koeb > * { max-width: var(--fs-shop-bredde, 960px); }
/* ── Skabelonerne: samme markup, tre udtryk ── */
/* Én kolonne — alt under hinanden, roligst at gå igennem. Siden er selv
smal, så felterne må fylde den ud. */
.fs-shop-enkel .fs-shop-spalter { display: block; }
.fs-shop-enkel .fs-shop-hoejre { max-width: none; }
/* To spalter — produkterne til venstre, oplysningerne til højre.
Højre spalte følger med ned, så opsummeringen altid er i syne. */
.fs-shop-side { --fs-shop-bredde: 1300px; }
.fs-shop-side .fs-shop-spalter {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
gap: clamp(28px, 3.4vw, 64px);
align-items: start;
}
.fs-shop-side .fs-shop-hoejre { position: sticky; top: calc(var(--fs-bar-h) + 24px); }
/* Spalterne begynder i samme højde */
.fs-shop-side .fs-shop-hoejre > .fs-trin:first-child { margin-top: 0; }
/* Prisen er det, øjet leder efter, når fire pakker skal sammenlignes. I den
brede venstrespalte har den plads til at være det største på kortet — det
har den ikke i de andre skabeloner, hvor kortene står side om side.
Derfor kun her. */
.fs-shop-side .fs-produkt-pris { font-size: 23px; }
@media (max-width: 900px) {
.fs-shop-side .fs-shop-spalter { grid-template-columns: 1fr; }
.fs-shop-side .fs-shop-hoejre { position: static; }
}
/* Kort ved siden af hinanden — prisen stort, dagene som overskrift.
Kortene står tæt — fire brede felter på en linje ligner en anden side
end resten. */
/* 200px bredere end før: ved 190px pr. kort og 10px mellemrum er der nu
plads til fire — nærmest fem — kort på række i stedet for tre. */
.fs-shop-kort { --fs-shop-bredde: 1100px; }
.fs-shop-kort .fs-produkter {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 12px;
}
.fs-shop-kort .fs-produkt {
grid-template-columns: 1fr;
/* Faste rækker: dage, navn, pris — og pillerne i den sidste, der tager
det, der er tilbage. Så står navn og pris i SAMME højde fra kort til
kort, uanset om ét kort bærer ni piller og det næste fire. Før samlede
space-between den frie plads i mellemrummene, og "120 dage", "30 dage"
og priserne stod i hver sin højde (Martin, 12. sep). */
grid-template-rows: auto auto auto 1fr;
align-content: start;
align-items: start;
justify-items: center;
text-align: center;
gap: 0;
padding: clamp(24px, 2.4vw, 34px) 18px clamp(20px, 2vw, 26px);
box-shadow: 0 1px 2px rgba(15, 30, 50, 0.04);
transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.fs-shop-kort .fs-produkt:hover { box-shadow: 0 8px 24px rgba(15, 30, 50, 0.08); }
.fs-shop-kort .fs-produkt.er-valgt {
box-shadow: 0 8px 28px color-mix(in srgb, var(--fs-navy) 14%, transparent);
background: color-mix(in srgb, var(--fs-navy) 3%, var(--fs-surface));
}
.fs-shop-kort .fs-produkt-dage {
background: none;
padding: 0;
line-height: 1;
}
.fs-shop-kort .fs-produkt-dage strong { font-size: clamp(40px, 3.6vw, 54px); font-weight: 700; letter-spacing: -0.03em; color: var(--fs-navy); }
/* Enheden lille, med afstand mellem bogstaverne — som en etiket under tallet */
.fs-shop-kort .fs-produkt-dage span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; }
.fs-shop-kort .fs-produkt-tekst { margin-top: 12px; }
.fs-shop-kort .fs-produkt-tekst strong { font-size: 14.5px; font-weight: 500; color: var(--fs-text-soft); }
.fs-shop-kort .fs-produkt-tekst span { font-size: 13px; }
/* Prisen på sin egen linje under en tynd streg — samme streg, samme sted i
alle kortene, så beløbene står på linje */
.fs-shop-kort .fs-produkt-pris {
font-size: clamp(22px, 1.8vw, 26px); font-weight: 700; letter-spacing: -0.01em;
width: 100%; margin-top: 14px; padding-top: 14px;
border-top: 1px solid var(--fs-border);
}
.fs-shop-kort .fs-produkt.er-valgt .fs-produkt-pris { border-top-color: color-mix(in srgb, var(--fs-navy) 25%, var(--fs-border)); }
.fs-shop-kort .fs-produkt-maerke { position: absolute; top: 12px; inset-inline-end: 12px; }
.fs-shop-heading {
font-size: clamp(30px, 3vw, 46px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
}
.fs-shop-intro {
color: var(--fs-text-soft);
font-size: clamp(16px, 1.05vw, 18px);
margin: 12px 0 clamp(28px, 3vw, 44px);
max-width: 54ch;
}
.fs-shop-note { margin-top: 14px; font-size: 13.5px; color: var(--fs-text-soft); }
/* Privatlivspolitikken står i samme linje som betingelserne, ikke som
sit eget afsnit nedenunder — den er en henvisning, ikke et vilkår.
Adskilleren kommer kun, når der faktisk står noget foran. */
/* ── Politikkerne i modalvindue ────────────────────────────────────
Teksten er lang, så vinduet får en fast ramme og ruller indeni:
hovedet og knapperne bliver stående, mens man læser. */
.fs-politik-modal-kort {
/* .fs-modal har max-width: 480px og text-align: center — det passer på
prøvens bekræftelsesvinduer, ikke på en politik med punktopstilling.
Begge dele skal skrives om her, ellers vinder de. */
width: min(1160px, 100%);
max-width: min(1160px, 100%);
text-align: start;
max-height: min(92vh, 1080px);
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
}
.fs-politik-modal-hoved {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px clamp(20px, 3vw, 32px);
border-bottom: 1px solid var(--fs-border);
}
.fs-politik-modal-hoved h3 { font-size: 19px; font-weight: 600; margin: 0; }
.fs-modal-luk {
background: none; border: 0; padding: 6px; cursor: pointer; line-height: 1;
color: var(--fs-text-soft); border-radius: 8px;
}
.fs-modal-luk:hover { color: var(--fs-text); background: var(--fs-field-bg); }
.fs-politik-modal-krop {
flex: 1; min-height: 0; overflow-y: auto;
padding: clamp(20px, 3vw, 32px);
line-height: 1.65;
}
/* Politikken er bygget i to søjler til en hel side — i et vindue er der
ikke bredde til dem, så de lægges under hinanden */
.fs-politik-modal-krop .row { display: block; }
.fs-politik-modal-krop .column { width: auto; }
/* Kilden centrerer nogle blokke — i et vindue med punktopstilling ser
det forkert ud, og lange linjer bliver svære at følge */
.fs-politik-modal-krop,
.fs-politik-modal-krop * { text-align: start; }
.fs-politik-modal-krop ul, .fs-politik-modal-krop ol { padding-inline-start: 1.3em; }
.fs-politik-modal-krop.cb-indhold,
.fs-politik-modal-krop .cb-indhold,
.fs-politik-modal-krop .cb-indhold * { font-family: inherit; }
.fs-politik-modal-henter { color: var(--fs-text-soft); }
/* Der er ingen farveregel på links inde i kundens eget indhold, så de
faldt til browserens standardblå. Både her og på politiksiden. */
.fs-politik-tekst a,
.fs-politik-modal-krop a { color: var(--fs-navy); text-decoration: underline; }
.fs-politik-tekst a:hover,
.fs-politik-modal-krop a:hover { text-decoration: none; }
/* Fronten mærker mørk tilstand med .fs-dark, ikke html.dark — og
--fs-navy regnes ud af kundens accentfarve, så den kan blive mørk.
Her skal linket kunne læses på mørk bund uanset hvad. */
.fs-dark .fs-politik-tekst a,
.fs-dark .fs-politik-modal-krop a { color: #8ab4ff; }
.fs-politik-modal-bund {
padding: 16px clamp(20px, 3vw, 32px);
border-top: 1px solid var(--fs-border);
}
.fs-politik-modal-side { font-size: 14px; }
@media (max-width: 560px) {
.fs-politik-modal-kort { max-height: 92vh; }
}
/* Samme mål og vægt som .fs-field > span, så etiketten over produkterne
står i præcis samme højde som etiketten over det første felt i spalten
ved siden af. Ændres den ene, skal den anden med. */
.fs-produkter-etiket { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
/* Noterne står nu OVER købsknappen, så der skal luft imellem —
ellers klæber knappen op ad betingelserne */
.fs-shop-note + .fs-btn { margin-top: 20px; }
/* Skridtene nummereres, så man kan se, hvor langt man er */
.fs-trin { display: flex; align-items: baseline; gap: 10px; margin: clamp(32px, 3.4vw, 52px) 0 18px; }
/* Kun det allerførste skridt står klos op ad introen. Bruger man
:first-of-type alene, mister hver spalte sit eget mellemrum.
Venstre spalte har en umærket wrapper om produkterne, højre har ikke —
så uden linje to og tre her rammer reglen kun højre spalte, og de to
overskrifter kommer i utakt med hinandens højde. Panelerne er
gensidigt udelukkende (ét er altid skjult), så begge må nulstilles. */
.fs-shop > .fs-trin:first-child,
.fs-shop:not(.har-forvalg) .fs-shop-venstre > .fs-trin:first-child,
.fs-shop:not(.har-forvalg) .fs-shop-venstre > :first-child > .fs-trin:first-child,
.fs-shop:not(.har-forvalg) .fs-shop-venstre > [data-ptype-pane] > .fs-trin:first-child { margin-top: 0; }
/* … men står der et valg ovenover — produkttype eller kørekortskategori —
er skridtet i venstre spalte ikke det første på siden længere, og så skal
det have sit mellemrum tilbage. Uden .har-forvalg klistrede "Hvor længe
skal du have adgang?" op ad kategoriknapperne, mens "Om dig" længere nede
havde fuld luft. */
/* Tallet er en tone, ikke en knap — det skal tælle, ikke råbe */
.fs-trin-nr {
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--fs-text-soft);
opacity: 0.75;
}
.fs-trin h2 {
font-size: clamp(19px, 1.45vw, 24px);
font-weight: 600;
letter-spacing: -0.015em;
}
/* Kørekortskategorien */
.fs-katvalg { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-kat {
padding: 11px 20px;
border: 1.5px solid var(--fs-border);
border-radius: var(--fs-radius-btn);
background: var(--fs-surface);
color: inherit;
font: inherit;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: border-color 160ms, background 160ms, color 160ms;
}
.fs-kat:hover { border-color: var(--fs-navy); }
.fs-kat.er-valgt {
background: var(--fs-navy);
border-color: var(--fs-navy);
color: var(--fs-accent-text);
}
/* Produkterne */
.fs-produkter { display: grid; gap: 10px; }
.fs-produkt {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: clamp(14px, 1.6vw, 24px);
padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 24px);
border: 1.5px solid var(--fs-border);
border-radius: var(--fs-radius);
background: var(--fs-surface);
cursor: pointer;
transition: border-color 160ms, transform 160ms;
}
.fs-produkt:hover { border-color: var(--fs-navy); }
.fs-produkt.er-valgt { border-color: var(--fs-navy); border-width: 2px; }
.fs-produkt input { position: absolute; opacity: 0; pointer-events: none; }
.fs-produkt-dage {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 58px; padding: 8px 4px;
border-radius: var(--fs-radius-btn);
background: var(--fs-field-bg);
line-height: 1.1;
}
.fs-produkt-dage strong { font-size: 22px; font-weight: 600; }
.fs-produkt-dage span { font-size: 12px; color: var(--fs-text-soft); }
.fs-produkt-tekst { min-width: 0; }
.fs-produkt-tekst strong { display: block; font-size: 16.5px; font-weight: 600; }
.fs-produkt-tekst span { display: block; font-size: 13.5px; color: var(--fs-text-soft); margin-top: 2px; }
.fs-produkt-pris { font-size: 19px; font-weight: 600; white-space: nowrap; }
/* Stykprisen under prisen: "88 kr. pr. kode". Egen linje INDE i priscellen,
samme sted som moms-noten, så alle tre skabeloner bærer den, uden at
griddet skal røres. nowrap er ikke pynt: prisspalten er en auto-spalte og
måles på max-content, og en linje, der må brække, gør kortene ulige høje
i kort-skabelonen, hvor de står side om side. */
.fs-stykpris {
display: block;
margin-top: 2px;
font-size: 12.5px;
font-weight: 400;
color: var(--fs-text-soft);
white-space: nowrap;
}
/* Kortene er smalle (minmax 190px) og centrerede — et hak mindre der */
.fs-shop-kort .fs-stykpris { font-size: 12px; }
.fs-produkt-maerke {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
border: 1.5px solid var(--fs-border);
color: transparent;
font-size: 13px;
transition: background 160ms, border-color 160ms, color 160ms;
}
.fs-produkt.er-valgt .fs-produkt-maerke {
background: var(--fs-navy); border-color: var(--fs-navy); color: var(--fs-accent-text);
}
@media (max-width: 560px) {
.fs-produkt { grid-template-columns: auto 1fr auto; }
.fs-produkt-maerke { display: none; }
}
/* ── Opgraderingen ────────────────────────────────────────────────────
Samme kort som pakkerne, men det køber noget andet: ingen dage, ingen ny
kode, kun flere prøver på den adgang, eleven har. Derfor et ikon i
stedet for dagetallet, og en tonet flade, så øjet kan se, at den ikke er
en fjerde pakke. Den står over pakkerne med luft under. */
.fs-opgradering {
background: var(--fs-bg);
border-style: dashed;
margin-bottom: clamp(14px, 1.6vw, 22px);
}
.fs-opgradering.er-valgt { border-style: solid; background: var(--fs-surface); }
/* Cellerne placeres ÉN for én. .fs-produkt's grid er bygget til fire celler,
hvor den første er dagetallet, og pris og flueben er låst til
grid-row: 1 / -1 for pillernes skyld. Uden et dagefelt gik den
automatiske placering i stykker: prisen røg først i rækken, fluebenet
midt ind, og teksten sidst. Kortet har ingen anden række, så alt står på
række 1 i den rækkefølge, det skal læses. */
.fs-opgradering > * { grid-row: 1; }
.fs-opgradering .fs-opgradering-ikon { grid-column: 1; }
.fs-opgradering .fs-produkt-tekst { grid-column: 2; }
.fs-opgradering .fs-produkt-pris { grid-column: 3; }
.fs-opgradering .fs-produkt-maerke { grid-column: 4; }
.fs-opgradering-ikon {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--fs-field-bg); color: var(--fs-navy); font-size: 18px;
}
@media (max-width: 560px) {
/* Fluebenet er væk på smalle skærme (se .fs-produkt-maerke ovenfor), så
prisen rykker ind i den sidste spalte */
.fs-opgradering .fs-produkt-pris { grid-column: 3 / -1; }
}
/* I KORT-skabelonen står pakkerne som kort side om side, og opgraderingen
blev hængende i listeskabelonens brede, stiplede bjælke. Den lignede en
note og ikke en vare, man kan købe. Her får den kortets eget udtryk:
samme ramme, samme radius, samme centrerede typografi og de samme piller.
Ikonet og den tonede flade er det eneste, der skiller den fra pakkerne.
Reglerne står EFTER blokken ovenfor, fordi de har samme vægt som den —
rækkefølgen er det, der afgør, og ikke specificiteten. */
.fs-shop-kort .fs-opgradering {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 10px;
padding: clamp(22px, 2.2vw, 32px) 18px;
border-style: solid;
background: var(--fs-surface);
}
.fs-shop-kort .fs-opgradering > * { grid-row: auto; grid-column: 1; }
.fs-shop-kort .fs-opgradering .fs-produkt-maerke { position: absolute; top: 12px; inset-inline-end: 12px; }
/* Overskriften bærer kortet, som dagetallet bærer pakkerne: uden den var
der intet, øjet kunne lande på, og de tre linjer flød sammen. */
.fs-shop-kort .fs-opgradering .fs-produkt-tekst strong { font-size: 18px; line-height: 1.25; }
.fs-shop-kort .fs-opgradering .fs-produkt-tekst span { font-size: 13px; }
.fs-shop-kort .fs-opgradering .fs-produkt-pris { font-size: 20px; }
/* Samme kolonnemål som pakkernes gitter, men auto-FILL: de tomme spor
bliver stående, så det ene kort fylder én kolonne. Med auto-fit ville
det strække sig over hele bredden. */
.fs-shop-kort .fs-opgradering-net {
display: grid;
/* Sporene er BREDERE end pakkernes minimum (190px), fordi der kun står
ét kort her: med 190 blev sporet en femtedel af bredden, og kortets
tekst faldt ned i en tynd søjle. 320px giver samme sporbredde som tre
pakker side om side, så kortet står lige så bredt som en pakke.
min(100%, …) holder det helt ud på en telefon. */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
gap: 12px;
margin-bottom: clamp(14px, 1.6vw, 22px);
}
/* ── Hvad pakken giver adgang til ──────────────────────────────────────
"17 teoriprøver", "10 emneprøver". Ingen overskrift — tallet og ordet
siger det selv.
Blokken er en egen celle i .fs-produkt-griddet (auto 1fr auto auto), så
hver skabelon kan placere den, hvor den hører hjemme. Uden eksplicit
placering ville den lande i en femte spalte og skubbe pris og mærke ud. */
.fs-produkt-giver {
grid-column: 2;
grid-row: 2;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 7px;
min-width: 0;
}
/* Pillerne åbner en ANDEN række i produktrækken. Uden de to regler her får
den række del i .fs-produkt's gap (14-24px), og dagetal, pris og flueben
bliver stående midt i første række — så står pillen alene langt nede til
venstre, og rækken bliver dobbelt så høj. Derfor: ingen luft mellem
rækkerne, og de tre andre celler spænder over begge, så de stadig står
lodret midt i kortet. Er der ingen piller, findes anden række ikke, og
reglerne gør ingenting. */
.fs-produkt { row-gap: 0; }
.fs-produkt-dage,
.fs-produkt-pris,
.fs-produkt-maerke { grid-row: 1 / -1; }
.fs-produkt-giver span {
display: inline-block;
padding: 3px 10px;
max-width: 100%;
border: 1px solid var(--fs-border);
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.45;
color: var(--fs-text-soft);
transition: border-color 160ms, color 160ms;
}
.fs-produkt.er-valgt .fs-produkt-giver span {
border-color: var(--fs-navy);
color: var(--fs-navy);
}
/* ── kort-skabelonen ──
Fire piller i forskellige bredder brød 3+1 midt i kortet og rodede det til.
Her lægges de NED under prisen som en rolig liste uden rammer: ét punkt pr.
linje, tallet fremhævet, resten dæmpet. En hårfin streg skiller dem fra
prisen, så kortet læses som pris først og indhold bagefter.
order flytter cellen forbi prisen. Det virker, fordi blokken er et
selvstændigt grid-barn — lå den stadig inde i .fs-produkt-tekst, kunne den
ikke flyttes. */
/* I kort-skabelonen er der kun én spalte, og alt står under hinanden.
Rækkespændet fra grundreglen ville låse cellerne fast oven i hinanden. */
.fs-shop-kort .fs-produkt-dage,
.fs-shop-kort .fs-produkt-pris,
.fs-shop-kort .fs-produkt-tekst { grid-row: auto; }
.fs-shop-kort .fs-produkt-maerke { grid-row: auto; }
.fs-shop-kort .fs-produkt-giver {
grid-column: 1;
grid-row: auto;
order: 1; /* forbi prisen — kortet læses pris først, indhold efter */
justify-content: center;
align-content: start;
gap: 6px;
width: 100%;
margin-top: 16px;
}
/* Pillerne står ved siden af hinanden og bryder selv. Det, der rodede før,
var ikke at de stod side om side — det var at de sad MIDT i kortet mellem
navnet og prisen. Under prisen falder de i et roligt 2x2, og kortene
holder samme højde, fordi rækken strækker dem ens. */
.fs-shop-kort .fs-produkt-giver span {
font-size: 12px;
padding: 4px 11px;
white-space: nowrap;
border-color: transparent;
background: var(--fs-field-bg);
color: var(--fs-text);
font-weight: 500;
}
.fs-shop-kort .fs-produkt.er-valgt .fs-produkt-giver span { border-color: transparent; color: var(--fs-text); }
/* Spillene i accentfarvens tone — samme farveskala, men tydeligt noget ud
over prøverne. Pillerne står i kildens rækkefølge: prøverne først, så
spillene, så de to slags samler sig hver for sig. */
.fs-shop-kort .fs-produkt-giver span.er-spil,
.fs-shop-kort .fs-produkt.er-valgt .fs-produkt-giver span.er-spil {
background: color-mix(in srgb, var(--fs-navy) 10%, var(--fs-surface));
color: var(--fs-navy);
font-weight: 600;
}
.fs-shop-kort .fs-produkt-giver span.er-spil::before {
content: "\f2d4"; font-family: bootstrap-icons; font-weight: 400; font-size: 11px;
margin-inline-end: 5px; vertical-align: -1px;
}
/* ── mobil ──
Under 560px falder mærket væk og griddet bliver tre spalter. Cellen skal
følge med, ellers står den i den forkerte spalte. */
@media (max-width: 560px) {
.fs-produkt-giver { gap: 5px; }
.fs-produkt-giver span { padding: 3px 9px; font-size: 12px; }
.fs-shop-kort .fs-produkt-giver span { padding: 0; }
}
/* (Her stod en krøllet parentes for meget. Den åd den næste regel, så
.fs-shop-hoejre { max-width: 520px } og siden Prisplaners bredde aldrig
nåede browseren — fundet 12. sep 2026.) */
/* Køberens oplysninger. Felter, opsummering og knap deler bredde, så
højre side står som én blok og ikke som tre løsrevne stykker. */
/* ── Prisplaner (12. sep 2026) ──
Pakkerne som høje prisplaner, som man kender dem fra abonnementssider:
dagene som overlinje, navnet, prisen stort, og indholdet som en liste
med flueben under en tynd streg. Den valgte plan er fyldt med
accentfarven. Oplysningerne, rabatten, kurven og knappen står samlet i
et panel under planerne med felterne til venstre og kurv, noter og knap
til højre (.fs-shop-opsummering, en indpakning kun denne skabelon ser).
Planerne står i hele bredden, så fire pakker står på én række også hos
en kunde med smal indholdsbredde — i to spalter blev de 2×2 (Martin,
12. sep). Samme markup som de andre tre; cellerne lægges under hinanden
i én spalte (grid-row: auto ophæver grundreglens rækkespænd), og listen
flyttes forbi prisen med order. */
/* Bredere end de andre skabeloner (Martin, 12. sep: "flottere, mere bredde/luft") */
.fs-shop-prisplan { --fs-shop-bredde: 1720px; }
.fs-shop-prisplan .fs-shop-spalter { display: block; }
.fs-shop-prisplan .fs-shop-hoejre {
max-width: none; margin-top: clamp(40px, 4.4vw, 72px);
background: var(--fs-surface); border: 1.5px solid var(--fs-border);
border-radius: calc(var(--fs-radius) * 1.2);
padding: clamp(26px, 3vw, 48px);
display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
column-gap: clamp(36px, 5vw, 96px); align-items: start;
}
.fs-shop-prisplan .fs-shop-hoejre > .fs-trin:first-child { margin-top: 0; }
.fs-shop-prisplan .fs-shop-hoejre > * { grid-column: 1; }
/* Kurv, noter og knap i spalten til højre, fra samme højde som overskriften */
.fs-shop-prisplan .fs-shop-opsummering { grid-column: 2; grid-row: 1 / span 8; align-self: start; }
.fs-shop-prisplan .fs-shop-opsummering .fs-kurv { margin-top: 0; }
.fs-shop-prisplan .fs-shop-hoejre .fs-btn-primary { width: 100%; justify-content: center; }
.fs-shop-prisplan .fs-produkter { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.fs-shop-prisplan .fs-produkt {
grid-template-columns: 1fr; align-content: start; gap: 6px; row-gap: 6px;
padding: clamp(26px, 2.6vw, 40px) clamp(22px, 2.2vw, 34px) clamp(24px, 2.4vw, 36px);
border-radius: calc(var(--fs-radius) * 1.2);
transition: border-color 160ms, background 200ms, color 200ms, transform 160ms, box-shadow 200ms;
}
.fs-shop-prisplan .fs-produkt:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); }
.fs-shop-prisplan .fs-produkt-dage, .fs-shop-prisplan .fs-produkt-pris,
.fs-shop-prisplan .fs-produkt-tekst, .fs-shop-prisplan .fs-produkt-maerke { grid-row: auto; grid-column: 1; }
/* Dagene som overlinje: "120 DAGE" i accentfarven */
.fs-shop-prisplan .fs-produkt-dage {
flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 4px;
background: none; padding: 0; min-width: 0;
}
.fs-shop-prisplan .fs-produkt-dage strong, .fs-shop-prisplan .fs-produkt-dage span {
font-size: 12.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fs-navy);
}
.fs-shop-prisplan .fs-produkt-tekst strong { font-size: clamp(19px, 1.5vw, 24px); letter-spacing: -0.01em; }
.fs-shop-prisplan .fs-produkt-pris {
font-size: clamp(32px, 2.9vw, 48px); letter-spacing: -0.02em; line-height: 1.1; margin-top: 16px; white-space: normal;
}
.fs-shop-prisplan .fs-produkt-pris .fs-moms-note, .fs-shop-prisplan .fs-stykpris { font-size: 12.5px; font-weight: 500; letter-spacing: 0; white-space: normal; }
/* Indholdet som en liste med flueben under en streg */
.fs-shop-prisplan .fs-produkt-giver {
grid-column: 1; grid-row: auto; order: 1; width: 100%;
flex-direction: column; gap: 10px; margin-top: 22px; padding-top: 20px;
border-top: 1px solid var(--fs-border);
}
.fs-shop-prisplan .fs-produkt-giver span {
display: flex; align-items: baseline; gap: 10px;
padding: 0; border: 0; border-radius: 0; max-width: none;
font-size: 15px; font-weight: 500; color: var(--fs-text); line-height: 1.4;
}
.fs-shop-prisplan .fs-produkt-giver span::before {
content: "\f633"; font-family: bootstrap-icons; font-weight: 400; font-size: 13px;
color: var(--fs-navy); flex-shrink: 0; line-height: 1;
}
.fs-shop-prisplan .fs-produkt-maerke { position: absolute; top: 16px; inset-inline-end: 16px; }
/* Den valgte plan i accentfarven */
.fs-shop-prisplan .fs-produkt.er-valgt { background: var(--fs-navy); border-color: var(--fs-navy); color: var(--fs-accent-text); }
.fs-shop-prisplan .fs-produkt.er-valgt .fs-produkt-dage strong,
.fs-shop-prisplan .fs-produkt.er-valgt .fs-produkt-dage span,
.fs-shop-prisplan .fs-produkt.er-valgt .fs-produkt-giver span,
.fs-shop-prisplan .fs-produkt.er-valgt .fs-produkt-giver span::before { color: var(--fs-accent-text); }
.fs-shop-prisplan .fs-produkt.er-valgt .fs-produkt-tekst span,
.fs-shop-prisplan .fs-produkt.er-valgt .fs-moms-note,
.fs-shop-prisplan .fs-produkt.er-valgt .fs-stykpris { color: color-mix(in srgb, var(--fs-accent-text) 78%, transparent); }
.fs-shop-prisplan .fs-produkt.er-valgt .fs-produkt-giver { border-top-color: color-mix(in srgb, var(--fs-accent-text) 25%, transparent); }
.fs-shop-prisplan .fs-produkt.er-valgt .fs-produkt-maerke { background: var(--fs-accent-text); border-color: var(--fs-accent-text); color: var(--fs-navy); }
/* Opgraderingen beholder sin brede række over planerne */
.fs-shop-prisplan .fs-opgradering { grid-template-columns: auto 1fr auto auto; align-content: center; }
.fs-shop-prisplan .fs-opgradering > * { grid-row: 1; }
.fs-shop-prisplan .fs-opgradering .fs-produkt-tekst { grid-column: 2; }
.fs-shop-prisplan .fs-opgradering .fs-produkt-pris { grid-column: 3; font-size: 20px; margin-top: 0; }
.fs-shop-prisplan .fs-opgradering .fs-produkt-maerke { grid-column: 4; position: static; }
.fs-shop-prisplan .fs-opgradering .fs-produkt-giver {
grid-column: 2; grid-row: 2; order: 0; flex-direction: row; flex-wrap: wrap;
border-top: 0; padding-top: 0; margin-top: 7px;
}
@media (max-width: 900px) {
.fs-shop-prisplan .fs-shop-hoejre { grid-template-columns: 1fr; }
.fs-shop-prisplan .fs-shop-opsummering { grid-column: 1; grid-row: auto; }
.fs-shop-prisplan .fs-shop-opsummering .fs-kurv { margin-top: clamp(28px, 3vw, 40px); }
}
@media (max-width: 560px) {
.fs-shop-prisplan .fs-produkt { grid-template-columns: 1fr; }
.fs-shop-prisplan .fs-produkt-maerke { display: flex; }
.fs-shop-prisplan .fs-opgradering .fs-produkt-pris { grid-column: 3 / -1; }
}
.fs-shop-hoejre { max-width: 520px; }
.fs-koeber { display: grid; gap: 18px; }
/* De sidste dage. Ingen farvet kant — bare en flade, der ikke er baggrunden.
Bredden følger prøvekortene, så den ikke ligger og flyder for sig selv. */
.fs-varsel {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
max-width: var(--fs-maxw);
margin: clamp(28px, 3vw, 44px) auto 0;
padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
border-radius: var(--fs-radius);
background: var(--fs-field-bg);
font-size: 16px;
}
/* Yderkanten er den samme som gruppernes — derfor to bokse, ikke én */
.fs-varsel-plads { padding: 0 var(--fs-kant); }
.fs-varsel .fs-btn { text-decoration: none; }
/* Er man logget ind, står oplysningerne der bare — der er intet at taste */
.fs-mine {
padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
border-radius: var(--fs-radius);
background: var(--fs-field-bg);
}
.fs-mine p { margin: 0 0 3px; font-size: 15px; color: var(--fs-text-soft); }
.fs-mine p strong { font-size: 16.5px; color: var(--fs-text); }
.fs-mine .fs-link-inline {
display: inline-block;
margin-top: 10px;
font-size: 14px;
color: var(--fs-navy);
}
/* Opsummeringen — hvad betaler jeg for */
.fs-kurv {
display: flex; align-items: center; justify-content: space-between;
gap: 20px;
margin: clamp(28px, 3vw, 40px) 0 20px;
padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px);
border-radius: var(--fs-radius);
background: var(--fs-field-bg);
}
/* Rabatfeltet: kode og knap på samme linje */
.fs-rabat { margin-top: clamp(24px, 2.6vw, 34px); }
.fs-rabat-felt { display: flex; gap: 10px; }
.fs-rabat-felt input { flex: 1; min-width: 0; }
.fs-btn-quiet {
background: var(--fs-field-bg);
color: var(--fs-text);
height: 52px;
padding: 0 20px;
border-radius: var(--fs-radius-btn);
white-space: nowrap;
}
.fs-btn-quiet:hover { background: var(--fs-field-bg); filter: brightness(0.96); }
.fs-field-ok { display: block; margin-top: 6px; font-size: 13px; color: var(--fs-action); }
.fs-kurv-navn { display: block; font-size: 16px; font-weight: 600; }
.fs-kurv-rabat { display: block; font-size: 13.5px; color: var(--fs-action); margin-top: 2px; }
.fs-kurv-detalje { display: block; font-size: 13.5px; color: var(--fs-text-soft); margin-top: 2px; }
.fs-kurv-pris { font-size: 24px; font-weight: 600; white-space: nowrap; }
/* Kurvens stykpris står under beløbet og højrestillet, så de to tal flugter.
Moms-noten ved siden af er med vilje inline (se .fs-kurv-pris .fs-moms-note);
stykprisen er et TAL og skal have sin egen linje, ellers står der tre
beløb i træk på samme linje. */
.fs-kurv-stykpris { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400;
color: var(--fs-text-soft); text-align: end; white-space: nowrap; }
/* ════════ Politiksider: persondata og handelsbetingelser ════════ */
.fs-politik { max-width: var(--fs-maxw); }
.fs-politik h1 { max-width: 72ch; }
/* Politikteksten er bygget i ContentBuilder med sine egne rækker og
søjler. En læsebredde på 72ch klemmer to søjler ned i den ene side —
her skal indholdet have den bredde, det er bygget til. Den enkelte
søjle bliver stadig smal nok til at læse i. */
.fs-politik-tekst { max-width: min(1100px, 100%); }
.fs-politik h1 {
font-size: clamp(30px, 3vw, 46px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
margin-bottom: clamp(20px, 2.2vw, 36px);
}
.fs-politik-tekst { line-height: 1.65; white-space: normal; }
/* cb-indhold.css sætter system-ui på .cb-indhold. Her er indholdet
kundens egen politik på kundens egen side — den skal køre sidens
skrifttype som alt andet. cb-indhold.css er genereret og må ikke
rettes i hånden, så det sker herfra. */
.fs-politik-tekst.cb-indhold,
.fs-politik-tekst.cb-indhold * { font-family: inherit; }
/* ════════ Skoleportalen ════════ */
/* Portalen bruger skærmens bredde og holder venstrekant med logoet — den
smalle, centrerede søjle fik navne og links til at knække i to linjer */
.fs-skole .fs-front-home { max-width: none; margin: 0; }
/* Elevlisten på mobil: kort i stedet for tabel — tabellen kræver vandret
rulning, og så finder ingen "Se fremdrift" */
.fs-kun-mobil { display: none; }
.fs-elevkort {
display: block;
position: relative;
background: var(--fs-white);
border-radius: 12px;
padding: 14px 40px 14px 16px;
margin-bottom: 10px;
text-decoration: none;
color: inherit;
}
.fs-elevkort-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
margin-bottom: 4px;
}
.fs-elevkort-top strong { font-size: 16px; }
.fs-elevkort-linje { display: block; font-size: 13.5px; color: var(--fs-text-soft); line-height: 1.6; }
.fs-elevkort-pil {
position: absolute;
inset-inline-end: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--fs-text-soft);
}
@media (max-width: 760px) {
.fs-skole .fs-kun-desktop { display: none; }
.fs-kun-mobil { display: block; }
}
/* Menuen står fast; den side, man er på, er markeret — punkterne bytter
aldrig plads */
/* Aktivt punkt: kun farven skiller — sort ved siden af navy ser ud som en
fejl.
Og VÆGTEN skal blive: fed skrift er bredere end almindelig, så hvert
sideskift skubbede punkterne sidelæns, og "Mere" kunne skifte indhold
undervejs. Markeringen er stregen (eller pillen); vil kunden have fed,
vælger hun "Kun fed" under Design, og så er det dét, der markerer. */
.fs-topbar-right .fs-link.er-aktiv { color: var(--fs-bar-accent); }
.fs-topbar-skole .fs-topbar-right .fs-link { position: relative; font-weight: 400; }
/* Stregen ER markeringen — hover må aldrig lægge en understregning oveni */
.fs-topbar-skole .fs-topbar-right .fs-link:hover { text-decoration: none; color: var(--fs-nav-hover, var(--fs-bar-accent)); }
.fs-topbar-skole .fs-topbar-right a.fs-link.er-aktiv::after {
content: '';
position: absolute;
inset-inline-start: 10px;
inset-inline-end: 10px;
bottom: -6px;
height: 2.5px;
border-radius: 2px;
background: var(--fs-bar-accent);
}
.fs-indstilling-kort {
background: var(--fs-white);
border-radius: var(--fs-radius);
padding: clamp(22px, 2.2vw, 36px) clamp(24px, 2.4vw, 40px);
max-width: 560px;
}
.fs-indstilling-kort h2 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.fs-logo-preview {
background: var(--fs-field-bg);
border-radius: 10px;
padding: 18px;
display: inline-block;
margin-bottom: 16px;
}
/* Fast højde, ikke kun max: SVG'er uden width/height-attributter falder
ellers sammen til nul */
.fs-logo-preview img { display: block; height: 38px; width: auto; max-width: 170px; object-fit: contain; }
/* Elevens udvikling: én søjle pr. prøve, ældste først */
.fs-trend {
display: flex;
align-items: flex-end;
gap: 10px;
background: var(--fs-white);
border-radius: 8px;
padding: 18px 22px 12px;
margin-bottom: 28px;
height: 150px;
}
.fs-trend-soejle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
height: 100%;
width: 42px;
}
.fs-trend-bar { width: 100%; max-width: 34px; border-radius: 5px 5px 2px 2px; }
.fs-trend-bar.is-good { background: var(--fs-green); }
.fs-trend-bar.is-bad { background: var(--fs-red); }
.fs-trend-navn { font-size: 11.5px; color: var(--fs-text-soft); white-space: nowrap; }
.fs-kode-stor { font-size: clamp(26px, 2.4vw, 38px); letter-spacing: 0.04em; }
.fs-kode-knapper { display: flex; gap: 10px; flex-wrap: wrap; }
.fs-kode-knapper .fs-btn { height: 48px; font-size: 15px; padding: 0 22px; border-radius: 10px; }
/* ── Prøveklar-mærket: samme tre ord alle steder ── */
.fs-klar {
display: inline-block;
font-size: 12.5px;
font-weight: 600;
border-radius: 999px;
padding: 3px 12px;
white-space: nowrap;
}
.fs-klar.er-klar { color: var(--fs-green); background: color-mix(in srgb, var(--fs-green) 12%, transparent); }
.fs-klar.er-paa-vej { color: var(--fs-warn); background: color-mix(in srgb, var(--fs-warn) 12%, transparent); }
.fs-klar.er-ikke { color: var(--fs-text-soft); background: rgba(128, 128, 128, 0.12); }
/* ── Kræver opmærksomhed + emnefokus ── */
.fs-opmaerksomhed {
background: var(--fs-white);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 16px;
}
.fs-opmaerksomhed h2 { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
/* ── Filterbjælken over elevlisten ── */
.fs-elevfilter { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.fs-elevfilter select {
font: inherit;
font-size: 14px;
padding: 8px 12px;
border: 1.5px solid var(--fs-border);
border-radius: 10px;
background: var(--fs-white);
color: inherit;
}
/* ── Egen filvælger: systemets knap er ikke pæn ── */
.fs-filvalg { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.fs-filvalg input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
}
.fs-filvalg-knap {
display: inline-flex;
align-items: center;
gap: 8px;
height: 46px;
padding: 0 20px;
border: 1.5px solid var(--fs-border);
border-radius: 10px;
background: var(--fs-white);
font-size: 15px;
font-weight: 500;
transition: border-color 160ms;
}
.fs-filvalg:hover .fs-filvalg-knap { border-color: var(--fs-navy); }
.fs-filvalg-navn { font-size: 13.5px; color: var(--fs-text-soft); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-logo-slot { margin-top: 22px; }
.fs-logo-slot h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.fs-logo-preview.er-moerk { background: #1d232b; }
/* Striben over en forhåndsvisning. Samme ærinde som støttestriben i
administrationen: man skal ikke kunne glemme, hvilken tilstand man er i.
Okker og ikke rød — der er intet galt, det er bare ikke live endnu. */
.fs-kig-stribe {
position: sticky;
top: 0;
z-index: 60;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 18px;
padding: 9px 18px;
background: #f4c95d;
color: #3a2c05;
font-size: 14px;
line-height: 20px;
}
.fs-kig-stribe strong { font-weight: 600; }
.fs-kig-stribe a { color: #3a2c05; text-decoration: underline; font-weight: 600; }
.fs-kig-stribe a:hover { text-decoration: none; }
/* ── Det hvide ark, klar til print ──
Hed engang fakturaen og var lavet til den. Fakturaen er siden blevet en
rigtig PDF (core/invoice.php :: invoice_pdf()), men arket bruges stadig af
kodelisten og elevlisten, der begge kan udskrives — så det bliver stående
under sit gamle navn frem for at blive døbt om to steder. */
.fs-faktura { max-width: 760px; }
.fs-faktura-hoved { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.fs-faktura-hoved .fs-btn { height: 46px; font-size: 15px; padding: 0 20px; border-radius: 10px; }
.fs-faktura-ark {
background: #fff;
color: #16202c;
border-radius: 12px;
padding: clamp(28px, 4vw, 52px);
}
.fs-faktura-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
.fs-faktura-top h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.fs-faktura-meta div { display: flex; gap: 14px; justify-content: space-between; font-size: 14px; }
.fs-faktura-meta span { color: #6e6e73; }
/* Mellemstationen: selve PDF'en i en ramme, så det man kigger på ER bilaget */
.fs-faktura-hoved { flex-wrap: wrap; gap: 12px; }
.fs-faktura-knapper { display: flex; gap: 10px; flex-wrap: wrap; }
.fs-faktura-knapper .fs-btn { height: 44px; font-size: 15px; padding: 0 18px; }
.fs-faktura-ramme {
display: block;
width: 100%;
height: min(78vh, 1000px);
border: 1px solid var(--fs-border);
border-radius: 12px;
background: #fff;
}
.fs-faktura-lille { display: none; margin-top: 16px; }
/* Linjen over kreditnotaen: hvad bilaget er, og at fakturaen står ved magt.
Den skal læses FØR filen åbnes, ikke findes nede i PDF'en. */
.fs-faktura-note { margin: 0 0 14px; padding: 12px 16px; border-radius: var(--fs-radius);
background: var(--fs-field-bg); color: var(--fs-text-soft); font-size: 14.5px; }
/* Telefoner tegner ikke en PDF i en ramme — de viser en tom kasse.
Så bytter vi rammen ud med en knap, der åbner filen i fremviseren. */
@media (max-width: 700px) {
.fs-faktura-ramme { display: none; }
.fs-faktura-lille { display: block; }
}
.fs-faktura-linjer { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fs-faktura-linjer th { text-align: start; font-size: 13px; color: #6e6e73; padding: 0 0 8px; border-bottom: 1px solid #e3e3e6; }
.fs-faktura-linjer td { padding: 10px 0; border-bottom: 1px solid #eef0f2; }
.fs-faktura-linjer .num { text-align: end; }
.fs-faktura-linjer tfoot td { border-bottom: none; padding: 6px 0; color: #6e6e73; }
@media print {
.fs-topbar, .fs-burger, .fs-sprog, .fs-tema, .kun-skaerm { display: none !important; }
.fs-surface { padding: 0; }
.fs-faktura-ark { border-radius: 0; padding: 0; }
body { background: #fff; }
}
/* ════════ Skolens oprettelse ════════ */
.fs-skole-opret { max-width: 560px; }
.fs-skole-opret-form { display: grid; gap: 16px; margin-top: 8px; }
.fs-skole-opret-form .fs-btn { justify-self: start; }
/* Skal kunne vinde over .fs-field > span, som gør etiketter til blokke */
.fs-cvr-raekke, .fs-field > .fs-cvr-raekke { display: flex; gap: 10px; margin-bottom: 0; }
.fs-cvr-raekke input { flex: 1; min-width: 0; }
.fs-cvr-raekke .fs-btn { height: 48px; font-size: 15px; padding: 0 18px; border-radius: 10px; white-space: nowrap; }
/* minmax(0, 1fr) og ikke 1fr: et 1fr-spor maa ikke blive smallere end sit
indhold, saa spalten med telefonfeltet (vaelger + nummer) tog 294px og
klemte e-mailen ned paa 138px. Nul som mindstemaal gør spalterne lige
brede, som "1fr 1fr" hele tiden har set ud til at love. */
.fs-skole-opret-to { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 560px) { .fs-skole-opret-to { grid-template-columns: 1fr; } }
/* ════════ Elevens profil ════════ */
/* Som butikken: fladen i fuld bredde, så overskriften flugter med logoet,
og bredden ligger på indholdet. Samme typografi som butikkens top. */
.fs-profil { max-width: var(--fs-maxw); }
.fs-profil > * { max-width: 760px; }
.fs-profil h1 {
font-size: clamp(30px, 3vw, 46px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
}
.fs-profil-intro {
color: var(--fs-text-soft);
font-size: clamp(16px, 1.05vw, 18px);
margin: 12px 0 clamp(28px, 3vw, 44px);
max-width: 54ch;
}
.fs-profil-under {
font-size: clamp(19px, 1.45vw, 24px);
font-weight: 600;
letter-spacing: -0.015em;
margin: clamp(32px, 3.4vw, 52px) 0 16px;
}
/* Oplysningerne til venstre, adgangen til højre — begge med overskrift i
samme højde, så intet står og flyder alene i bunden */
.fs-profil-spalter {
display: grid;
grid-template-columns: minmax(0, 460px) minmax(220px, 300px);
gap: clamp(32px, 5vw, 96px);
align-items: start;
}
@media (max-width: 760px) { .fs-profil-spalter { grid-template-columns: 1fr; } }
.fs-profil-spalter .fs-profil-under { margin-top: 0; }
.fs-profil-form { display: grid; gap: 20px; margin-bottom: 8px; }
/* Gem-knappen er en almindelig formularknap — ikke bundbjælkens store CTA */
.fs-profil-form .fs-btn {
justify-self: start;
height: 48px;
font-size: 15px;
padding: 0 22px;
border-radius: 10px;
}
.fs-field { display: block; }
.fs-field > span { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.fs-field input {
width: 100%;
padding: 13px 15px;
font: inherit;
font-size: 16px;
color: inherit;
background: var(--fs-surface);
border: 1px solid var(--fs-border);
border-radius: var(--fs-radius-btn);
}
.fs-field input:focus {
outline: none;
border-color: var(--fs-navy);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-navy) 18%, transparent);
}
/* Rullemenuer i samme felt-ramme som inputfelterne. Uden reglen stod
Hold- og Afdelingsvalget i "Ret oplysninger" som browserens rå select
midt mellem de tegnede felter. Pilen tegnes selv, så den er ens overalt. */
.fs-field select {
width: 100%;
padding: 13px 40px 13px 15px;
font: inherit;
font-size: 16px;
color: inherit;
background: var(--fs-surface)
url("data:image/svg+xml;utf8,")
no-repeat right 15px center;
border: 1px solid var(--fs-border);
border-radius: var(--fs-radius-btn);
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.fs-field select:focus {
outline: none;
border-color: var(--fs-navy);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-navy) 18%, transparent);
}
.fs-field-hint { display: block; margin-top: 6px; font-size: 13px; color: var(--fs-text-soft); }
.fs-field-fejl { display: block; margin-top: 6px; font-size: 13px; color: var(--fs-red); }
.fs-field input.er-fejl { border-color: var(--fs-red); }
.fs-front-ok {
display: flex; align-items: center; gap: 9px;
padding: 13px 17px; margin-bottom: 24px;
border-radius: var(--fs-radius-btn);
background: color-mix(in srgb, var(--fs-green) 12%, transparent);
color: var(--fs-green);
font-weight: 500;
}
/* Navnet i topbaren fører til profilen — blyanten viser, at der er noget
at rette, uden at gøre linjen urolig */
.fs-logo-profil {
display: inline-flex; align-items: center; gap: 6px;
text-decoration: none; color: inherit;
}
/* Blyanten er diskret synlig hele tiden — man skal kunne se, at navnet
kan klikkes, uden at skulle finde det med musen først */
.fs-logo-profil i { font-size: 11px; opacity: 0.55; transition: opacity 160ms; }
.fs-logo-profil:hover i, .fs-logo-profil:focus-visible i { opacity: 0.95; }
.fs-logo-profil:hover strong { text-decoration: underline; }
/* ════════ Mørk tilstand ════════
Kunden slår den til under Design. Farverne regnes ud af deres egen
accentfarve i design.php og lægges på .fs-dark — her retter vi kun det,
der står fast i stylesheetet og ikke kan komme derfra. */
.fs-sprog {
position: fixed;
top: calc((var(--fs-bar-h) - 34px) / 2);
inset-inline-end: calc(var(--fs-hjoerne) + 44px);
z-index: 300;
display: flex;
align-items: center;
gap: 5px;
height: 34px;
padding: 0 4px 0 9px;
border-radius: var(--fs-radius-bar);
color: var(--fs-text-soft);
transition: color 200ms, background 200ms;
}
/* Uden tema-knap ved siden af rykker den ud i hjørnet */
.fs-sprog-alene { inset-inline-end: var(--fs-hjoerne); }
.fs-sprog:hover { color: var(--fs-text); background: rgba(128,128,128,0.12); }
.fs-sprog i { font-size: 14px; }
.fs-sprog select {
border: none;
background: none;
font: inherit;
font-size: 14px;
color: inherit;
cursor: pointer;
padding: 4px 2px;
max-width: 130px;
}
.fs-sprog select:focus-visible { outline: 2px solid var(--fs-navy); border-radius: 6px; }
.fs-tema {
position: fixed;
top: calc((var(--fs-bar-h) - 40px) / 2);
inset-inline-end: var(--fs-hjoerne);
z-index: 300;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--fs-text-soft);
cursor: pointer;
transition: color 400ms, background 200ms;
}
.fs-tema:hover { color: var(--fs-text); background: rgba(128,128,128,0.14); }
/* Solen tegnes op, når månen tegnes ud — samme overgang som i admin */
.fs-tema .sun-icon {
stroke-dasharray: 1px 1px;
opacity: 1;
transition: stroke-dasharray 0.5s ease-in, opacity 0.3s ease-in;
}
.fs-tema .moon-icon {
stroke-dasharray: 0px 1px;
opacity: 0;
transition: stroke-dasharray 0.5s ease-in, opacity 0.3s ease-in;
}
.fs-dark .fs-tema .sun-icon { stroke-dasharray: 0px 1px; opacity: 0; }
.fs-dark .fs-tema .moon-icon { stroke-dasharray: 1px 1px; opacity: 1; }
#fs-tema-overlay {
position: fixed;
inset: 0;
z-index: 99999;
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease-in-out;
}
#fs-tema-overlay.is-visible { opacity: 1; }
/* Log ud og de andre links viger for knapperne i hjørnet */
.fs-dark-muligt .fs-topbar-right { margin-inline-end: 46px; }
.fs-flersproget .fs-topbar-right { margin-inline-end: 150px; }
.fs-dark-muligt.fs-flersproget .fs-topbar-right { margin-inline-end: 196px; }
/* Det, der står fast i lyst, skal vendes i mørkt */
.fs-dark .fs-btn-green { color: #101418; }
.fs-dark .fs-video-replay { background: rgba(255,255,255,0.9); color: #101418; }
.fs-dark .fs-video-replay:hover { background: #fff; }
.fs-dark .otp-box { background: var(--fs-field-bg); }
.fs-dark .fs-badge { color: var(--fs-accent-text); }
.fs-dark .fs-free { background: color-mix(in srgb, var(--fs-green) 20%, transparent); }
/* Billeder må gerne dæmpes en anelse, så de ikke lyser i et mørkt rum */
.fs-dark .fs-test-img,
.fs-dark .fs-question-figure img,
.fs-dark .fs-review-body img { filter: brightness(0.9); }
/* ════════ Mobil ════════
Toppen på en telefon er kun bomærke, navn og burger — alt andet bor i
menuen. Skoleportalens menu har flere punkter end elevernes, så dér
folder den sammen allerede ved 1200 px; elevernes ved 760 px. */
.fs-burger {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: var(--fs-bar-accent);
cursor: pointer;
flex-shrink: 0;
padding: 0;
}
/* Ingen ring om knappen ved klik — kun ved tastaturnavigation */
.fs-burger:focus { outline: none; }
.fs-burger:focus-visible { outline: 2px solid var(--fs-navy); outline-offset: 2px; border-radius: 8px; }
/* Tre streger, der bliver til et kryds, når menuen er åben */
.fs-burger-ikon { position: relative; width: 22px; height: 16px; display: block; }
.fs-burger-ikon span {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: top 240ms cubic-bezier(0.2, 0.8, 0.3, 1),
transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1),
opacity 160ms;
}
.fs-burger-ikon span:nth-child(1) { top: 0; }
.fs-burger-ikon span:nth-child(2) { top: 7px; }
.fs-burger-ikon span:nth-child(3) { top: 14px; }
.fs-burger.er-aaben .fs-burger-ikon span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.fs-burger.er-aaben .fs-burger-ikon span:nth-child(2) { opacity: 0; }
.fs-burger.er-aaben .fs-burger-ikon span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
/* Dage-rækken findes kun i mobilmenuen; sprog/tema-kassen er usynlig på
desktop — børnene står fast i hjørnet som altid */
.fs-menu-dage { display: none; }
.fs-menu-vaerktoej { display: contents; }
/* ── Menupladen. Samme opskrift ved begge breakpoints: venstre kant
flugter med logoet, ikonerne står i deres egen kolonne, og sprog/tema
bor i en sektion for sig under en tynd streg. ── */
@media (max-width: 1200px) {
.fs-topbar-skole .fs-burger { display: inline-flex; }
.fs-topbar-skole .fs-topbar-right {
position: fixed;
top: var(--fs-bar-h);
inset-inline-start: 0;
inset-inline-end: 0;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
background: var(--fs-topbar);
padding: 10px var(--fs-hjoerne) 18px;
box-shadow: 0 20px 36px rgba(0, 0, 0, 0.18);
border-top: 1px solid rgba(128, 128, 128, 0.14);
z-index: 240;
max-height: calc(100vh - var(--fs-bar-h));
overflow-y: auto;
}
.fs-topbar-skole .fs-topbar-right.er-aaben { display: flex; }
.fs-dark-muligt .fs-topbar-skole .fs-topbar-right,
.fs-flersproget .fs-topbar-skole .fs-topbar-right { margin-inline-end: 0; }
.fs-topbar-skole .fs-topbar-right .fs-link {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 0;
font-size: 16.5px;
justify-content: flex-start;
text-decoration: none;
}
.fs-topbar-skole .fs-topbar-right .fs-link:hover { text-decoration: none; }
.fs-topbar-skole .fs-topbar-right .fs-link i {
width: 24px;
min-width: 24px;
font-size: 18px;
display: inline-flex;
justify-content: center;
}
.fs-topbar-skole .fs-topbar-right form:not(.fs-sprog) { display: contents; }
.fs-topbar-skole .fs-menu-vaerktoej {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid rgba(128, 128, 128, 0.16);
}
.fs-topbar-skole .fs-menu-vaerktoej .fs-sprog,
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema { position: static; }
/* Sprogvælgeren står samlet til venstre — ikon og navn side om side */
.fs-topbar-skole .fs-menu-vaerktoej .fs-sprog { flex: 0 1 auto; width: auto; justify-content: flex-start; gap: 8px; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-sprog select { width: auto; max-width: 180px; }
}
@media (max-width: 760px) {
.fs-topbar { gap: 10px; }
.fs-logo { gap: 10px; }
/* Bomærket må gerne kunne ses — der er luft nok i bjælken */
.fs-logo-img { height: 44px; max-width: 160px; }
.fs-logo-text strong { font-size: 15px; }
.fs-logo-sub { display: none; }
.fs-logo { flex: 1 1 auto; min-width: 0; }
.fs-logo-text { min-width: 0; }
.fs-logo-text strong,
.fs-logo-text .fs-logo-profil { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-burger { display: inline-flex; }
.fs-topbar-right {
position: fixed;
top: var(--fs-bar-h);
inset-inline-start: 0;
inset-inline-end: 0;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0;
margin: 0;
background: var(--fs-topbar);
padding: 10px var(--fs-hjoerne) 18px;
box-shadow: 0 20px 36px rgba(0, 0, 0, 0.18);
border-top: 1px solid rgba(128, 128, 128, 0.14);
z-index: 240;
max-height: calc(100vh - var(--fs-bar-h));
overflow-y: auto;
}
.fs-topbar-right.er-aaben { display: flex; }
.fs-dark-muligt .fs-topbar-right,
.fs-flersproget .fs-topbar-right,
.fs-dark-muligt.fs-flersproget .fs-topbar-right { margin-inline-end: 0; }
.fs-topbar-right .fs-link {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 0;
font-size: 16.5px;
justify-content: flex-start;
text-decoration: none;
}
.fs-topbar-right .fs-link:hover { text-decoration: none; }
.fs-topbar-right .fs-link i {
width: 24px;
min-width: 24px;
font-size: 18px;
display: inline-flex;
justify-content: center;
}
.fs-topbar-right form:not(.fs-sprog) { display: contents; }
.fs-menu-dage {
display: block;
color: var(--fs-text-soft);
padding: 12px 0 14px;
font-size: 15px;
border-bottom: 1px solid rgba(128, 128, 128, 0.14);
margin-bottom: 4px;
}
.fs-menu-vaerktoej {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding-top: 12px;
border-top: 1px solid rgba(128, 128, 128, 0.16);
}
.fs-menu-vaerktoej .fs-sprog,
.fs-menu-vaerktoej .fs-tema { position: static; }
/* Sprogvælgeren står samlet til venstre — ikon og navn side om side */
.fs-menu-vaerktoej .fs-sprog { flex: 0 1 auto; width: auto; justify-content: flex-start; gap: 8px; }
.fs-menu-vaerktoej .fs-sprog select { width: auto; max-width: 180px; }
/* Elevens udvikling og resultatbjælken må rulle vandret frem for at mase */
.fs-trend { overflow-x: auto; }
.fs-trend-soejle { width: 32px; flex-shrink: 0; }
/* Tallene ruller vandret, når der ikke er plads til dem alle. Rullebjælken
skjules — pilen til højre er markeringen i stedet. */
.fs-result-nav { overflow-x: auto; scrollbar-width: none; scroll-padding: 0 40px; }
.fs-result-nav::-webkit-scrollbar { display: none; }
.fs-result-nav-mere {
display: inline-flex; align-items: center; justify-content: flex-end;
position: sticky; inset-inline-end: -8px; flex: 0 0 auto;
/* Ingen plads i rækken — pilen ligger oven på det sidste, der ses */
width: 46px; margin-inline-start: -46px; height: 34px;
padding-inline-end: 4px; pointer-events: none;
color: var(--fs-text-soft); font-size: 15px;
background: linear-gradient(to right, transparent, var(--fs-white) 62%);
transition: opacity 160ms;
}
.fs-result-nav-mere.er-slut { opacity: 0; }
/* Kortene og formularerne skal ikke slås om luften på en lille skærm */
.fs-surface { --pad: 16px; }
.fs-groups { --gutter: 16px; }
.fs-facts { gap: 14px; }
/* Prøvekortene er ENS på mobil: de brede bannere (første kort i
"fremhævet", sidste i "billede-bred") får samme højde som de andre —
en 21/8-banner bliver ellers en lav stribe med afklippet titel */
.fs-tpl-fremhaevet:not(.fs-faa) .fs-test:first-child .fs-test-img { aspect-ratio: 16 / 10; }
.fs-tpl-fremhaevet:not(.fs-faa) .fs-test:first-child .fs-test-body {
padding: clamp(60px, 7vw, 120px)
calc(clamp(20px, 2vw, 36px) * var(--fs-space))
calc(clamp(20px, 1.8vw, 32px) * var(--fs-space));
}
.fs-tpl-fremhaevet:not(.fs-faa) .fs-test:first-child .fs-test-title { font-size: clamp(19px, 1.35vw, 26px); }
.fs-tpl-billede-bred .fs-test:last-child:nth-child(odd) .fs-test-img { aspect-ratio: 16 / 8.5; }
/* Knappen på kortene i telefonstørrelse — ikke desktopens */
.fs-cta { padding: 10px 18px; font-size: 14.5px; gap: 7px; }
}
/* Hent-linkene ved elevlisten: CSV | PDF */
.fs-hent { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--fs-text-soft); }
/* I ordrelisten: luft mellem koderne og fakturaen, så de to handlinger
ikke flyder sammen */
td .fs-hent { margin-inline-end: 26px; }
.fs-hent-streg { color: var(--fs-border); }
/* Gem-knapperne i Skolens oplysninger — formularknapper, ikke bundbjælke-CTA'er */
.fs-skole-opret-form > .fs-btn:not(.fs-btn-round) {
height: 48px;
font-size: 15px;
padding: 0 24px;
border-radius: 10px;
justify-self: start;
}
/* Enhver anden formularknap i et indstillingskort skal have samme højde.
Grund-.fs-btn arver --fs-bar-h, altså kundens VALGTE bjælkehøjde — og
har kunden valgt "Høj", er det 108px. "Log mig ud alle andre steder"
stod derfor som en kæmpe plade midt mellem knapper på 48, fordi dens
formular ikke bar .fs-skole-opret-form. Reglen her fanger de knapper,
nogen tilføjer senere, så fælden ikke skal huskes hver gang. */
.fs3-indstilkort form > .fs-btn:not(.fs-btn-round) {
height: 48px;
font-size: 15px;
padding: 0 24px;
border-radius: 10px;
}
/* Kodefelter med øje: vis det, man taster */
.fs-kodefelt { position: relative; display: block; }
.fs-kodefelt input { width: 100%; padding-inline-end: 44px; }
.fs-kode-oeje {
position: absolute;
inset-inline-end: 4px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: none;
background: transparent;
color: var(--fs-text-soft);
font-size: 17px;
cursor: pointer;
border-radius: 50%;
}
.fs-kode-oeje:hover { color: var(--fs-text); }
/* ── Toast: gem-kvitteringen kommer op nede i midten, hvor øjnene er ── */
.fs-toast {
position: fixed;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
left: 50%;
z-index: 400;
display: flex;
align-items: center;
gap: 10px;
max-width: min(560px, calc(100vw - 32px));
padding: 13px 18px;
border-radius: 14px;
font-size: 14px;
font-weight: 500;
color: #fff;
box-shadow: 0 10px 34px rgba(0,0,0,0.18);
/* Centreringen ligger i grundtilstanden, så toasten ikke hopper,
når ud-animationen tager over */
transform: translate(-50%, 0);
animation: fs-toast-op 320ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.fs-toast i { flex-shrink: 0; font-size: 16px; }
/* Lukkekrydset på fejl-toasts — de bliver stående, til man selv lukker */
.fs-toast-luk { flex-shrink: 0; border: 0; background: none; color: inherit;
cursor: pointer; padding: 2px 0 2px 8px; opacity: 0.8; }
.fs-toast-luk:hover { opacity: 1; }
.fs-toast-luk i { font-size: 13px; }
.fs-toast.er-ok { background: var(--fs-green); }
.fs-toast.er-fejl { background: var(--fs-red); }
.fs-toast.er-vaek { opacity: 0; transform: translate(-50%, 16px); transition: opacity 220ms, transform 220ms; }
.fs-dark .fs-toast { box-shadow: 0 10px 34px rgba(0,0,0,0.55); }
@keyframes fs-toast-op {
from { opacity: 0; transform: translate(-50%, 22px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* Frigiv-knappen står som et link ved siden af ret-linket i kodelisten */
.fs-frigiv { display: inline-block; margin-inline-start: 14px; }
.fs-frigiv .fs-link { padding: 0; }
/* Ordrelistens handlinger: hent, kontakt, faktura og kreditnota på én
række med den SAMME luft imellem. Hver af dem bar før sin egen margen,
og så flød kontakten sammen med fakturalinket. */
.fs-ordre-handling { display: flex; align-items: center; gap: 9px 24px; flex-wrap: wrap; }
.fs-ordre-handling .fs-hent { margin-inline-end: 0; }
.fs-ordre-handling form { margin: 0; }
/* Leveringen som en kontakt, med husets eget switch-udtryk i en mindre
udgave. Sporet og knoppen er .fs-switch-spor'ens — kun målene er
skruet ned, så den passer i en tabelrække. */
.fs-lev-switch {
display: inline-flex; align-items: center; gap: 9px;
border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px;
color: var(--fs-text-soft); cursor: pointer;
}
.fs-lev-switch .fs-switch-spor { width: 38px; height: 22px; flex: 0 0 38px; }
.fs-lev-switch .fs-switch-spor::after { width: 16px; height: 16px; }
.fs-lev-switch.er-til .fs-switch-spor { background: var(--fs-navy); }
.fs-lev-switch.er-til .fs-switch-spor::after { transform: translateX(calc(16px * var(--fs-dir))); }
.fs-lev-switch.er-til { color: var(--fs-text); font-weight: 600; }
.fs-lev-switch:hover .fs-switch-spor { filter: brightness(0.94); }
.fs-lev-switch:focus-visible { outline: none; }
.fs-lev-switch:focus-visible .fs-switch-spor {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-navy) 32%, transparent); }
/* Genhent fra CVR: et stille link under feltet, ikke en knap */
.fs-cvr-genhent { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 0; font-size: 13px; }
/* Pilen snurrer, mens opslaget kører */
.fs-cvr-genhent.er-henter i { animation: fs-snurr 700ms linear infinite; }
@keyframes fs-snurr { to { transform: rotate(360deg); } }
/* Skolens logo i portalens topbar: kundens logo-højde (--fs-logo-h) er
sat efter kundens eget logo — skolens skal holde sig i ro her */
.fs-topbar-skole .fs-logo-img { height: 40px; max-width: 220px; }
/* Ret-linket står i elevens hovedlinje uden at fylde */
.fs-elev-ret-knap { padding: 0; margin-inline-start: 10px; font-size: 14px; }
.fs-elev-ret-knap i { font-size: 12px; }
/* Prøvens bundbjælke på mobil: knapperne står absolut og åd tælleren —
her deles pladsen i stedet, så alle tre dele kan ses.
Siderne får SAMME bredde, uanset hvad der står i dem. Ellers rykker
"Spørgsmål 2 ud af 25" sidelæns i det øjeblik Forrige-knappen dukker op
på spørgsmål to — og det er lige præcis dét, man lægger mærke til. */
@media (max-width: 600px) {
.fs-bottombar { justify-content: space-between; gap: 4px; }
.fs-bottom-left, .fs-bottom-right {
position: static;
flex: 1 1 0;
min-width: 0;
display: flex;
}
.fs-bottom-left { justify-content: flex-start; }
.fs-bottom-right { justify-content: flex-end; }
.fs-bottom-center {
margin: 0;
flex: 0 1 auto;
min-width: 0;
text-align: center;
font-size: 13.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fs-bottombar .fs-btn { padding: 0 16px; font-size: 15px; }
/* ... men introskærmen har ingen tæller mellem knapperne. Dér er pladsen
ledig, og så skal Start ikke krympes med. */
.fs-bottombar-intro .fs-btn-primary { font-size: 17px; font-weight: 600; padding: 0 24px; }
.fs-bottombar-intro .fs-btn-primary i { font-size: 19px; }
}
/* ── Prøvens topbar ── */
.fs-proeve-hoejre { display: flex; align-items: center; gap: 20px; }
@media (max-width: 760px) {
/* Logoet viger for prøvens navn — det er navnet, man har brug for,
og lange emneprøve-navne må bryde over to linjer */
.fs-topbar-proeve .fs-logo-mig,
.fs-topbar-proeve .fs-logo-mark,
.fs-topbar-proeve .fs-logo-img { display: none; }
.fs-topbar-proeve .fs-logo-text strong {
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.25;
}
/* Oversigten bliver stående som ikon — resten ligger bag burgeren */
.fs-topbar-proeve .fs-oversigt-tekst { display: none; }
.fs-topbar-proeve .fs-oversigt-knap { padding: 8px; }
.fs-topbar-proeve .fs-oversigt-knap i { font-size: 21px; }
.fs-proeve-hoejre { gap: 2px; }
}
/* Beskrivelsen på de mørke billed-skabeloner følger tal-linjens lyse farve.
Mosaik og Magasin manglede her (12. sep): på et ulåst kort stod
beskrivelsen i den dæmpede tekstfarve oven på det mørke overlay. */
.fs-tpl-billede-bred .fs-test-desc, .fs-tpl-fremhaevet .fs-test-desc,
.fs-tpl-mosaik .fs-test-desc, .fs-tpl-magasin .fs-test-desc { color: rgba(255,255,255,0.88); }
/* Indhold fra den store editor: et lille gitter, så rækker og kolonner
fra editoren også står pænt på elevens side */
.fs-forklaring-indhold .row, .fs-politik-tekst .row { display: flex; gap: 24px; flex-wrap: wrap; }
.fs-forklaring-indhold .column, .fs-politik-tekst .column { flex: 1 1 0; min-width: 220px; }
.fs-forklaring-indhold p, .fs-politik-tekst p { margin: 0 0 0.7em; }
.fs-forklaring-indhold :last-child, .fs-politik-tekst :last-child { margin-bottom: 0; }
.fs-forklaring-indhold ul, .fs-forklaring-indhold ol,
.fs-politik-tekst ul, .fs-politik-tekst ol { margin: 0 0 0.7em; padding-inline-start: 1.3em; }
.fs-forklaring-indhold img, .fs-politik-tekst img { max-width: 100%; height: auto; }
/* ---------- Pause i prøven ---------- */
.fs-timer-pause {
border: 0; background: none; cursor: pointer; padding: 2px 4px;
color: var(--fs-text-soft); font-size: 20px; line-height: 1; border-radius: 6px;
}
.fs-timer-pause:hover { color: var(--fs-navy); background: var(--fs-field-bg); }
.fs-pause-modal { text-align: center; }
.fs-pause-ikon { font-size: 44px; color: var(--fs-navy); display: block; margin-bottom: 8px; }
.fs-pause-modal .fs-modal-actions { justify-content: center; }
/* ---------- Startskærmens særlige funktioner ---------- */
.fs-funktion-boks {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
background: var(--fs-field-bg); border-radius: 10px; padding: 18px 22px;
cursor: pointer; margin-top: 28px;
}
.fs-funktion-tekst strong { display: block; }
.fs-funktion-note { display: block; margin-top: 4px; color: var(--fs-text-soft); font-size: 14px; font-weight: 400; }
.fs-funktion-boks input { display: none; }
.fs-kontakt {
flex: 0 0 48px; width: 48px; height: 28px; border-radius: 14px;
background: #b3bfca; position: relative; transition: background .15s ease;
}
.fs-kontakt::after {
content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px;
border-radius: 50%; background: #fff; transition: left .15s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.fs-funktion-boks input:checked + .fs-kontakt { background: var(--fs-green); }
.fs-funktion-boks input:checked + .fs-kontakt::after { inset-inline-start: 23px; }
.fs-question-medie { min-width: 0; }
/* Auto-oplæsningens tænd/sluk i værktøjslinjen: en miniature-kontakt
viser tilstanden — teksten står som de andre værktøjer */
.fs-minikontakt {
display: inline-block; width: 30px; height: 17px; border-radius: 9px;
background: #b3bfca; position: relative; vertical-align: -3px;
transition: background .15s ease;
}
.fs-minikontakt::after {
content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 13px; height: 13px;
border-radius: 50%; background: #fff; transition: left .15s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.fs-autoread.is-on .fs-minikontakt { background: var(--fs-green); }
.fs-autoread.is-on .fs-minikontakt::after { inset-inline-start: 15px; }
/* Topbaren på prøven: lang beskrivelse + elevnavn må aldrig nå uret —
teksten klippes med ellipse i stedet for at flyde ind under det */
.fs-topbar-proeve .fs-logo { min-width: 0; overflow: hidden; margin-inline-end: 18px; }
.fs-topbar-proeve .fs-logo-text { min-width: 0; overflow: hidden; }
.fs-topbar-proeve .fs-logo-text strong,
.fs-topbar-proeve .fs-logo-sub {
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ... men ikke på en telefon. Der er ikke plads til beskrivelsen ved siden
af uret, og den gled ind under det. Reglen SKAL stå her efter den
ovenfor — den generelle .fs-logo-sub-skjulning ved 760px taber til
.fs-topbar-proeve-reglen og virker derfor ikke i prøven. */
@media (max-width: 600px) {
.fs-topbar-proeve .fs-logo-sub { display: none; }
}
.fs-topbar-proeve .fs-timer,
.fs-topbar-proeve .fs-proeve-hoejre { flex-shrink: 0; }
/* Punkter, der KUN hører hjemme i burger-menuen. På desktop står den samme
handling allerede i bjælken, og en dublet dér skubbede rækken bredere,
så prøvens navn og uret i midten lagde sig oven i hinanden. */
.fs-kun-menu { display: none; }
/* Resultatsidens tilbage-link findes to steder: fremme i bjælken på mobil,
og i menuen. På desktop er der plads i menuen alene. */
.fs-resultat-tilbage { display: none; }
/* Uret står absolut i midten — hverken tekstblokken til venstre eller
handlingerne til højre må derfor række ind over midtlinjen minus urets
egen plads. Venstre side klippede allerede med ellipse; højre side gjorde
ikke, og med "Spørgsmålsoversigt" skrevet helt ud voksede den ind over
uret, så tallene lå oven i teksten. */
.fs-topbar-proeve .fs-logo { max-width: calc(50% - 110px); }
.fs-topbar-proeve .fs-proeve-hoejre { max-width: calc(50% - 110px); }
.fs-topbar-proeve .fs-oversigt-tekst {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Luft mellem vejledningen og tekstfeltet i fejlrapport-vinduet */
.fs-report-modal [data-report-form] p { margin: 6px 0 14px; }
.fs-niveau-linje { color: var(--fs-text-soft); margin: -14px 0 24px; }
.fs-niveau-linje .bi { margin-inline-end: 6px; }
.fs-klar .bi { font-size: 13px; }
.fs-snit-over { color: var(--fs-green); }
.fs-snit-under { color: var(--fs-red); }
/* Klik-sortering i kolonneoverskrifterne + klassisk sideskift i browseren */
.fs-th-sorter {
border: 0; background: none; cursor: pointer; font: inherit;
font-weight: inherit; color: inherit; padding: 0; white-space: nowrap;
}
.fs-th-sorter:hover { text-decoration: underline; }
.fs-th-sorter.er-aktiv { color: var(--fs-navy); font-weight: 700; }
.fs-pager { display: flex; gap: 6px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.fs-pager-knap {
border: 1px solid var(--fs-border); background: var(--fs-white); cursor: pointer;
font: inherit; border-radius: 8px; padding: 6px 12px; color: var(--fs-text);
}
.fs-pager-knap:hover { border-color: var(--fs-navy); }
.fs-pager-knap.er-aktiv { background: var(--fs-navy); border-color: var(--fs-navy); color: var(--fs-accent-text); }
/* ==================== Skoleportalens designlag (redesign) ==================== */
/* Afsnit med luft og ens overskrifter — siden trækker vejret mellem sektionerne */
.fs-afsnit { margin: 44px 0; }
.fs-afsnit-titel { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.fs-afsnit-hint { color: var(--fs-text-soft); margin: 0 0 18px; max-width: 70ch; }
/* Søgefeltet med lup — og filterchippen, når en gruppe er valgt */
.fs-soegefelt { position: relative; flex: 1 1 260px; max-width: 380px; }
.fs-soegefelt .bi { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--fs-text-soft); }
.fs-soegefelt input {
width: 100%; padding: 10px 14px 10px 38px; border: 1px solid var(--fs-border);
border-radius: 10px; font: inherit; background: var(--fs-white); color: var(--fs-text);
}
.fs-soegefelt input:focus { outline: 2px solid var(--fs-navy); outline-offset: -1px; }
/* Benchmark: to store tal, side om side */
.fs-nb { background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 14px; padding: 26px 30px; }
.fs-nb .fs-afsnit-titel { margin-bottom: 16px; }
.fs-nb-tal { display: flex; align-items: center; gap: 34px; margin-bottom: 14px; }
.fs-nb-blok strong { display: block; font-size: 44px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--fs-navy); }
.fs-nb-blok-snit strong { color: var(--fs-text-soft); }
.fs-nb-blok span { font-size: 14px; color: var(--fs-text-soft); }
.fs-nb-skille { width: 1px; align-self: stretch; background: var(--fs-border); }
/* Elevsidens hoved: navn til venstre, handling til højre */
.fs-elev-hoved { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.fs-elev-hoved .fs-front-heading { margin-bottom: 4px; }
.fs-elev-meta { color: var(--fs-text-soft); margin: 0; }
.fs-btn-sekundaer { background: var(--fs-white); color: var(--fs-navy); border: 1px solid var(--fs-border) !important;
border-radius: 10px; height: auto; padding: 10px 18px; }
.fs-btn-sekundaer:hover { border-color: var(--fs-navy) !important; }
/* Banneret: problem og handling side om side */
.fs-banner {
display: flex; align-items: center; gap: 16px; border-radius: 14px;
padding: 16px 20px; margin: 0 0 26px;
}
.fs-banner .bi { font-size: 24px; }
.fs-banner-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fs-banner-tekst span { font-size: 14px; opacity: .85; }
/* Varslerne følger temaets farver, så de også sidder rigtigt i mørk tilstand */
.fs-banner-gul {
background: color-mix(in srgb, var(--fs-warn) 9%, var(--fs-white));
border: 1px solid color-mix(in srgb, var(--fs-warn) 32%, transparent);
color: color-mix(in srgb, var(--fs-warn) 78%, var(--fs-text));
}
/* Sætningen og knapperne stod i én ubrudt række: knapperne har nowrap, og
teksten manglede min-width: 0, så banneret stak 109 px ud over kortet på
en telefon. På smal skærm får knapperne deres egen linje. */
@media (max-width: 760px) {
.fs-banner { flex-wrap: wrap; }
.fs-banner form { width: 100%; }
.fs-banner .fs-btn { width: 100%; justify-content: center; }
}
.fs-banner-roed {
background: color-mix(in srgb, var(--fs-red) 8%, var(--fs-white));
border: 1px solid color-mix(in srgb, var(--fs-red) 28%, transparent);
color: color-mix(in srgb, var(--fs-red) 78%, var(--fs-text));
}
.fs-banner .fs-btn { height: auto; padding: 10px 18px; border-radius: 10px; white-space: nowrap; }
/* Portalens modal: sløret baggrund og et roligt kort */
.fs-portal-modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
background: rgba(20, 32, 48, .35); }
.fs-portal-modal-kort { max-width: 520px; width: calc(100vw - 40px); }
/* Grund-.fs-btn arver prøvespillerens topbar-højde (84px) — i portalens
modalvinduer skal knapper altid have portalstørrelse. Reglen dækker alle
modaler, så nye vinduer ikke skal huske deres egen override. */
.fs-portal-modal .fs-btn { height: 44px; font-size: 14px; padding: 0 20px; border-radius: 10px; }
.fs-portal-modal-hoved { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.fs-portal-modal-hoved h3 { margin: 0; }
.fs-modal-luk { border: 0; background: none; cursor: pointer; color: var(--fs-text-soft); font-size: 16px; padding: 6px; }
.fs-modal-luk:hover { color: var(--fs-text); }
/* Skolens oplysninger: kortene skal ikke klistre sammen */
.fs-indstilling-kort { margin-bottom: 28px; }
/* ==================== Skoleportal 2.0: roligt og centreret ==================== */
/* Én centreret indholdsspalte — intet klumper i venstre side */
/* Portalspalten følger topbarens kanter i fuld bredde — samme ramme som
indstillingssiden, så oversigt og lister ikke stopper før højre kant */
.fs-skole .fs-front-home.fs-portal { max-width: none; margin: 0; }
/* Oplysningskortene: venstre kant som alt andet og fuld spaltebredde —
felterne bliver stående i læsevenlig bredde, og resten er bevidst luft */
.fs-portal .fs-indstilling-kort { margin: 0 0 28px; max-width: none; }
.fs-portal .fs-indstilling-kort .fs-skole-opret-form,
.fs-portal .fs-indstilling-kort .fs-afsnit-hint { max-width: 620px; }
.fs-daempet { color: var(--fs-text-soft); }
/* Statuslinjen: situationen i én sætning */
.fs-status-linje { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.25;
max-width: 26ch; margin: 6px 0 14px; }
/* Skillestregen mellem "jer" og "alle skoler" i sammenligningen */
.fs-nb-skille { width: 1px; height: 16px; background: var(--fs-border); }
/* Fanerne — genbruges på koder og indstillinger */
.fs-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--fs-border);
margin-bottom: 22px; flex-wrap: wrap; }
.fs-tab { border: 0; background: none; cursor: pointer; font: inherit; color: var(--fs-text-soft);
padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.fs-tab:hover { color: var(--fs-text); }
.fs-tab.er-aktiv { color: var(--fs-navy); font-weight: 600; border-bottom-color: var(--fs-navy); }
.fs-tab-antal { color: var(--fs-text-soft); font-weight: 400; font-size: 13px; }
.fs-nb-plads { font-weight: 600; margin: 10px 0 4px; }
/* Emnerne: tre svage og tre stærke som to rolige kort */
.fs-emne-spalter { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px; margin-bottom: 14px; }
.fs-emne-kort { background: var(--fs-white); border: 1px solid var(--fs-border);
border-radius: 14px; padding: 18px 22px; }
.fs-emne-kort h3 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase;
letter-spacing: .04em; color: var(--fs-text-soft); }
.fs-emne-staerk h3 { color: var(--fs-green); }
.fs-emne-linje { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
border-top: 1px solid var(--fs-border); }
.fs-emne-linje:first-of-type { border-top: 0; }
.fs-emne-linje strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-emne-fold { margin-bottom: 14px; }
/* Under emnekasserne: hvad procenten betyder — og hele skemaet bag ét klik */
.fs-emne-note { margin-top: 2px; }
.fs-emne-vis { margin-top: 6px; }
.fs-emne-tabel { background: var(--fs-white); border: 1px solid var(--fs-border);
border-radius: 14px; padding: 8px 22px; margin-top: 12px; overflow-x: auto; }
.fs-emne-tabel table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.fs-emne-tabel th { text-align: start; font-size: 12.5px; font-weight: 600;
color: var(--fs-text-soft); padding: 12px 10px 8px; border-bottom: 1px solid var(--fs-border); }
.fs-emne-tabel td { padding: 9px 10px; border-top: 1px solid var(--fs-border); }
.fs-emne-tabel tbody tr:first-child td { border-top: 0; }
.fs-emne-tabel td strong { font-variant-numeric: tabular-nums; }
.fs-emne-tabel .fs-tal-kol { text-align: end; white-space: nowrap;
font-variant-numeric: tabular-nums; }
/* Feltets snit er reference, ikke facit — det står dæmpet */
.fs-emne-tabel .fs-emne-snit { color: var(--fs-text-soft); }
/* På mobil strammes skemaet, så alle fire kolonner kan være der */
@media (max-width: 760px) {
.fs-emne-tabel { padding: 4px 12px; }
.fs-emne-tabel table { font-size: 13px; }
.fs-emne-tabel th { font-size: 11px; padding: 10px 6px 6px; }
.fs-emne-tabel td { padding: 8px 6px; }
}
/* Sammenligning og måneden i tal side om side — hver sin halvdel af luften */
.fs-sml-spalter { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: clamp(24px, 3vw, 56px); align-items: start; }
/* Månedsgraf og vælger i ét: søjlerne viser aktiviteten, et klik vælger
måneden. Diskret — ingen dropdown, ingen ramme. */
.fs-fakta-graf { display: flex; align-items: flex-end; gap: 5px; height: 52px;
margin: 6px 0 4px; }
.fs-fakta-soejle {
flex: 0 0 26px;
height: var(--h, 30%);
border: 0;
border-radius: 5px 5px 0 0;
background: color-mix(in srgb, var(--fs-navy) 16%, transparent);
cursor: pointer;
padding: 0;
transition: background 140ms;
}
.fs-fakta-soejle:hover { background: color-mix(in srgb, var(--fs-navy) 34%, transparent); }
.fs-fakta-soejle.er-aktiv { background: var(--fs-navy); }
.fs-fakta-maaned { margin: 0 0 4px; font-size: 14px; color: var(--fs-text-soft); }
.fs-fakta-tal { display: flex; gap: 34px; flex-wrap: wrap; margin: 14px 0 10px; }
.fs-fakta-blok strong { display: block; font-size: clamp(30px, 2.4vw, 40px);
font-weight: 600; line-height: 1.1; letter-spacing: -0.02em;
font-variant-numeric: tabular-nums; }
.fs-fakta-blok span { font-size: 14px; color: var(--fs-text-soft); }
/* Klasseprøvernes konklusion på oversigten — én sætning og vejen videre */
.fs-kl-opsummering { font-size: 17px; max-width: 60ch; margin: 0 0 10px; }
.fs-kl-link { color: var(--fs-navy); font-weight: 600; text-decoration: none; font-size: 15px; }
.fs-kl-link:hover { text-decoration: underline; }
/* Pageren arver flex fra .fs-pager, som står senere end skjule-reglen —
mobiludgaven skal eksplicit væk på desktop og frem som flex på mobil */
.fs-pager.fs-kun-mobil { display: none; }
@media (max-width: 760px) {
.fs-pager.fs-kun-mobil { display: flex; }
}
/* Scorekortene: fire store, rolige tal — det positive først */
.fs-score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px; margin: 18px 0 10px; max-width: 1080px; }
.fs-score-kort { background: var(--fs-white); border: 1px solid var(--fs-border);
border-radius: 16px; padding: 26px 26px 22px; display: grid; gap: 2px; align-content: start; }
.fs-score-kort strong { font-size: clamp(34px, 3vw, 44px); line-height: 1.1;
font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fs-score-kort span { color: var(--fs-text-soft); font-size: 14px; }
.fs-score-delta { font-style: normal; font-size: 13px; color: var(--fs-text-soft); margin-top: 8px; }
.fs-score-delta.er-op { color: var(--fs-green); }
.fs-score-delta.er-ned { color: var(--fs-red); }
.fs-emne-solo { max-width: 520px; margin-bottom: 12px; }
.fs-se-indsigt { display: inline-block; }
/* Observationslisterne: redaktionelle sætninger, ikke alarmer */
.fs-obs-liste { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.fs-obs-liste > li { border-top: 1px solid var(--fs-border); }
.fs-obs-liste > li:first-child { border-top: 0; }
.fs-obs { display: flex; align-items: baseline; gap: 10px; padding: 11px 0;
font-size: 16px; color: var(--fs-text); }
.fs-obs-god { color: var(--fs-green); }
button.fs-obs-knap { border: 0; background: none; cursor: pointer; font: inherit;
text-align: start; width: 100%; }
button.fs-obs-knap:hover { color: var(--fs-navy); }
.fs-obs-pil { color: var(--fs-text-soft); font-size: 13px; transition: transform .15s ease; }
.fs-obs-pil.er-aaben { transform: rotate(90deg); }
.fs-obs-elever { padding: 0 0 14px 24px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fs-obs-elever a { color: var(--fs-navy); }
/* Udviklingsgrafen: stille søjler, konklusionen er budskabet */
.fs-udv-graf { display: flex; align-items: flex-end; gap: 6px; height: 120px;
max-width: 560px; margin-bottom: 12px; }
.fs-udv-soejle { flex: 1; background: var(--fs-navy); opacity: .25; border-radius: 4px 4px 0 0; }
.fs-udv-soejle:last-child, .fs-udv-soejle:nth-last-child(2) { opacity: .85; }
.fs-udv-konklusion { font-size: 17px; font-weight: 600; max-width: 60ch; }
/* Emnernes overskrifter i den nye tone */
.fs-emne-kort h3.fs-emne-god { color: var(--fs-green); }
/* Elevsidens hero: prøveklarheden stort og roligt */
.fs-elev-hero { margin: 6px 0 10px; display: grid; gap: 2px; }
.fs-elev-hero-etiket { color: var(--fs-text-soft); font-size: 14px; }
.fs-elev-hero strong { font-size: clamp(40px, 4vw, 56px); line-height: 1.05;
font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fs-elev-hero strong.er-klar { color: var(--fs-green); }
.fs-elev-hero strong.er-paa-vej { color: var(--fs-warn); }
.fs-elev-hero strong.er-ikke { color: var(--fs-red); }
.fs-elev-hero-dom { font-weight: 600; }
/* Sætningerne — det redaktionelle lag */
.fs-elev-saetning { font-size: 17px; max-width: 60ch; margin: 0; }
/* Aktivitetens tre stille linjer */
.fs-akt-liste { max-width: 460px; }
.fs-akt-liste > div { display: flex; justify-content: space-between; gap: 16px;
padding: 10px 0; border-top: 1px solid var(--fs-border); }
.fs-akt-liste > div:first-child { border-top: 0; }
.fs-akt-liste span { color: var(--fs-text-soft); }
.fs-akt-liste strong { font-variant-numeric: tabular-nums; }
/* Elevlistens småting */
.fs-elev-mail { display: block; color: var(--fs-text-soft); font-size: 13px; }
.fs-udv-op { color: var(--fs-green); white-space: nowrap; }
.fs-udv-ned { color: var(--fs-red); white-space: nowrap; }
.fs-historik-fold { margin-bottom: 12px; }
/* Logo-fanen: de to udgaver som sidestillede fliser med fast preview-flade */
.fs-logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
gap: 16px; margin-top: 16px; }
.fs-logo-slot { border: 1px solid var(--fs-border); border-radius: 14px; padding: 18px;
display: grid; gap: 14px; align-content: start; }
.fs-logo-slot h3 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; color: var(--fs-text-soft); }
.fs-logo-slot .fs-logo-preview { display: flex; align-items: center; justify-content: center;
width: 100%; height: 110px; margin: 0; padding: 12px; box-sizing: border-box; }
.fs-logo-slot .fs-logo-preview img { max-height: 70px; max-width: 85%; }
.fs-logo-preview.er-tom { border: 1px dashed var(--fs-border); background: none;
color: var(--fs-text-soft); }
.fs-logo-handling { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fs-logo-fjern { margin: 0; }
/* Grafens søjler bærer deres eget tal — småt og dæmpet, så det ikke støjer */
.fs-udv-soejle { position: relative; }
.fs-udv-soejle em {
position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
font-style: normal; font-size: 11.5px; color: var(--fs-text-soft);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fs-udv-graf { margin-top: 24px; }
/* Periodevælgerens chips: stille som filtre — låste visninger står nedtonet
med lås og fortæller, hvad skolen optjener med tiden */
.fs-fakta-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.fs-fakta-chip {
font: inherit;
font-size: 13px;
font-weight: 600;
color: var(--fs-text-soft);
background: transparent;
border: 1px solid var(--fs-border);
border-radius: 999px;
padding: 5px 13px;
cursor: pointer;
}
.fs-fakta-chip:hover { border-color: var(--fs-text-soft); }
.fs-fakta-chip.er-aktiv { background: var(--fs-navy); border-color: var(--fs-navy); color: var(--fs-accent-text, #fff); }
.fs-fakta-chip.er-laast { opacity: .45; cursor: default; }
.fs-fakta-chip.er-laast:hover { border-color: var(--fs-border); }
.fs-fakta-chip .bi { font-size: 11px; }
/* Egen periode: to månedsfelter i portalens feltsprog */
.fs-fakta-egen { display: flex; gap: 14px; align-items: center; margin: 6px 0 10px;
font-size: 14px; color: var(--fs-text-soft); flex-wrap: wrap; }
.fs-fakta-egen input { font: inherit; font-size: 14px; color: var(--fs-text);
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 8px;
padding: 6px 10px; }
/* ════════ Skoleportalens oversigt 3.0 — mockup-layoutet ════════ */
.fs3-flade { display: flex; flex-direction: column; gap: 22px; }
.fs3-hero h1 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
.fs3-hero p { color: var(--fs-text-soft); margin: 0; }
.fs3-kort {
background: var(--fs-white);
border: 1px solid var(--fs-border);
border-radius: 16px;
padding: 22px 26px;
}
.fs3-kort h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; }
.fs3-hint { color: var(--fs-text-soft); font-size: 13.5px; margin: -6px 0 12px; }
.fs3-daempet { color: var(--fs-text-soft); }
/* Fire nøgletal */
.fs3-kort4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.fs3-kort4 .fs3-kort-titel { font-size: 13.5px; font-weight: 600; color: var(--fs-text-soft); display: block; margin-bottom: 8px; }
.fs3-kort4 strong { font-size: clamp(30px, 2.6vw, 42px); font-weight: 700; letter-spacing: -0.02em;
line-height: 1.1; display: block; font-variant-numeric: tabular-nums; }
.fs3-delta { font-size: 13px; font-weight: 600; margin-top: 6px; display: inline-block; }
.fs3-delta.er-op { color: var(--fs-green); }
.fs3-delta.er-ned { color: var(--fs-red); }
/* Rækker og gitre */
.fs3-todelt { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.fs3-tredelt { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
/* Lister med rækkestreger (godt / opmærksomhed) */
.fs3-raekke { display: flex; align-items: center; gap: 10px; padding: 11px 2px;
border-top: 1px solid var(--fs-border); font-size: 14.5px; width: 100%; text-align: start; }
.fs3-liste .fs3-raekke:first-of-type { border-top: 0; }
button.fs3-klik { background: none; border-inline-start: 0; border-inline-end: 0; border-bottom: 0; font: inherit;
cursor: pointer; color: inherit; justify-content: space-between; }
button.fs3-klik:hover { color: var(--fs-navy); }
button.fs3-klik i { color: var(--fs-text-soft); font-size: 13px; }
.fs3-se-alle { display: inline-block; margin-top: 12px; color: var(--fs-navy); font-weight: 600;
font-size: 14px; text-decoration: none; }
.fs3-se-alle:hover { text-decoration: underline; }
/* Kurven */
.fs3-kurve { width: 100%; height: 110px; margin: 4px 0 8px; }
.fs3-kurve polyline { stroke: var(--fs-navy); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fs3-stor-delta { font-size: 30px; font-weight: 700; margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.fs3-stor-delta.er-op { color: var(--fs-green); }
.fs3-stor-delta.er-ned { color: var(--fs-red); }
.fs3-konklusion { background: var(--fs-field-bg); border-radius: 10px; padding: 10px 14px;
font-size: 13.5px; margin: 0; }
/* Perioden i tal: uge-søjlerne fordelt over hele bredden, etiketten under */
.fs3-ugesoejler { display: flex; justify-content: space-between; gap: 12px; margin: auto 0 12px; padding-top: 20px; }
.fs3-ugesoejle { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fs3-soejlebane { height: 105px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.fs3-soejlebane em { display: block; width: min(100%, 32px); height: var(--h, 30%); min-height: 12px;
border-radius: 7px; background: color-mix(in srgb, var(--fs-navy) 14%, transparent); }
.fs3-ugesoejle:last-child .fs3-soejlebane em { background: var(--fs-navy); }
.fs3-ugesoejle small { font-size: 13px; color: var(--fs-text-soft); white-space: nowrap; }
/* Emnebarer: navy for styrker, varslingsfarven for det forbedringsværdige */
.fs3-emne { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 14px; }
.fs3-emne > span:first-child { flex: 0 0 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs3-emne strong { font-variant-numeric: tabular-nums; margin-inline-start: auto; }
.fs3-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--fs-field-bg); overflow: hidden; }
.fs3-bar em { display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: var(--fs-navy); }
.fs3-emne.er-svag .fs3-bar em { background: var(--fs-warn); }
.fs3-emne-svag { margin-top: 18px !important; }
/* Fokustabellen */
.fs3-faner { margin-bottom: 4px; }
.fs3-antal { font-size: 11.5px; background: var(--fs-field-bg); border-radius: 999px; padding: 1px 8px;
font-variant-numeric: tabular-nums; }
.fs-tab.er-aktiv .fs3-antal { background: color-mix(in srgb, var(--fs-navy) 12%, transparent); color: var(--fs-navy); }
.fs3-tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.fs3-tabel th { text-align: start; font-size: 12px; font-weight: 600; color: var(--fs-text-soft);
padding: 10px 8px 6px; border-bottom: 1px solid var(--fs-border); }
.fs3-tabel td { padding: 9px 8px; border-bottom: 1px solid var(--fs-border); }
.fs3-tabel tbody tr:last-child td { border-bottom: 0; }
.fs3-tabel a { color: inherit; font-weight: 600; text-decoration: none; }
.fs3-tabel a:hover { color: var(--fs-navy); }
.fs3-prik { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fs-border); }
.fs3-prik.er-groen { background: var(--fs-green); }
.fs3-prik.er-gul { background: var(--fs-warn); }
.fs3-prik.er-roed { background: var(--fs-red); }
/* Aktivitetsdonut — fire nuancer af accentfarven */
.fs3-donutrk { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.fs3-donut { width: 150px; height: 150px; flex-shrink: 0; }
.fs3-donut circle { stroke: var(--fs-navy); }
circle.fs3-donut-meget { stroke: var(--fs-navy); }
circle.fs3-donut-aktiv { stroke: color-mix(in srgb, var(--fs-navy) 52%, transparent); }
circle.fs3-donut-lav { stroke: color-mix(in srgb, var(--fs-navy) 24%, transparent); }
circle.fs3-donut-inaktiv { stroke: color-mix(in srgb, var(--fs-navy) 10%, transparent); }
.fs3-donut-tal { font-size: 9px; font-weight: 700; text-anchor: middle; fill: var(--fs-text); }
.fs3-donut-tekst { font-size: 2.6px; text-anchor: middle; fill: var(--fs-text-soft); }
.fs3-donut-liste { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.fs3-donut-liste li { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.fs3-donut-liste em { font-style: normal; color: var(--fs-text-soft); margin-inline-start: auto; padding-inline-start: 16px; }
span.fs3-donut-meget { background: var(--fs-navy); }
span.fs3-donut-aktiv { background: color-mix(in srgb, var(--fs-navy) 52%, transparent); }
span.fs3-donut-lav { background: color-mix(in srgb, var(--fs-navy) 24%, transparent); }
span.fs3-donut-inaktiv { background: color-mix(in srgb, var(--fs-navy) 10%, transparent); }
/* Kommende opfølgning: ét sammenhængende bånd med skillestreger */
.fs3-opf { display: flex; align-items: center; }
.fs3-opf-hoved { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; padding-inline-end: 26px; }
.fs3-opf-ikon { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: var(--fs-field-bg); color: var(--fs-navy); font-size: 19px;
display: inline-flex; align-items: center; justify-content: center; }
.fs3-opf-hoved strong { display: block; font-size: 15px; }
.fs3-opf-hoved span { font-size: 13px; }
.fs3-opf .fs3-se-alle { margin-top: 0; }
/* Bundkortene */
.fs3-bundkort { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fs3-bund { display: flex; gap: 14px; background: var(--fs-white); border: 1px solid var(--fs-border);
border-radius: 16px; padding: 18px 22px; font-size: 13.5px; }
.fs3-bund i { font-size: 22px; color: var(--fs-navy); margin-top: 2px; }
.fs3-bund strong { display: block; margin-bottom: 3px; font-size: 14px; }
.fs3-bund span { color: var(--fs-text-soft); display: block; }
.fs3-bund a, .fs3-bund button { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
color: var(--fs-navy); font-weight: 600; font-size: 13px; text-decoration: none; background: none;
border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.fs3-bund a i, .fs3-bund button i { font-size: 13px; color: var(--fs-navy); margin-top: 0; }
.fs3-bund a:hover, .fs3-bund button:hover { text-decoration: underline; }
.fs3-bund-status { font-weight: 600; margin-top: 6px; }
.fs3-bund-status.er-til { color: var(--fs-green); }
.fs3-opdateret { text-align: center; color: var(--fs-text-soft); font-size: 12.5px; margin: 4px 0 0; }
/* I burger-menuen på mobil: stregen er kort og venstrestillet ved det
aktive punkt — aldrig en linje under hele bredden */
@media (max-width: 760px) {
.fs-topbar-skole .fs-topbar-right a.fs-link.er-aktiv::after {
inset-inline-start: 0;
inset-inline-end: auto;
width: 22px;
bottom: 2px;
}
}
/* ── Oversigt 3.0, anden runde: magen til mockup'en ── */
/* Kortene i en række er ens høje; Se alle ligger altid i bunden */
.fs3-todelt, .fs3-tredelt { align-items: stretch; }
.fs3-todelt > .fs3-kort, .fs3-tredelt > .fs3-kort { display: flex; flex-direction: column; }
.fs3-liste-krop { flex: 1; }
.fs3-todelt .fs3-se-alle, .fs3-tredelt .fs3-se-alle { margin-top: auto; padding-top: 14px; }
/* Hero med global periodevælger */
.fs3-hero-delt { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.fs3-periode { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fs-text-soft); }
.fs3-periode select, .fs3-lille-vaelger {
font: inherit; font-size: 13.5px; color: var(--fs-text);
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 10px;
padding: 8px 12px; cursor: pointer;
}
/* Rækker med ikon + tekst + chevron */
a.fs3-klik { text-decoration: none; color: inherit; }
.fs3-rk-ikon { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.fs3-rk-ikon.er-god { background: color-mix(in srgb, var(--fs-green) 13%, transparent); color: var(--fs-green); }
.fs3-rk-ikon.er-opm { background: color-mix(in srgb, var(--fs-warn) 15%, transparent); color: var(--fs-warn); }
.fs3-rk-tekst { flex: 1; }
.fs3-pil { color: var(--fs-text-soft); font-size: 13px; }
/* Kurven med akser */
.fs3-graframme { display: flex; gap: 8px; margin: 2px 0 10px; }
.fs3-akse-y { display: flex; flex-direction: column; justify-content: space-between;
font-size: 10.5px; color: var(--fs-text-soft); padding: 0 0 18px; text-align: end; }
.fs3-graffelt { flex: 1; min-width: 0; }
.fs3-kurve { height: 120px; }
.fs3-grid { stroke: var(--fs-border); stroke-width: 0.3; }
.fs3-kurve circle { fill: var(--fs-navy); }
.fs3-akse-x { display: flex; justify-content: space-between; font-size: 10.5px;
color: var(--fs-text-soft); margin-top: 4px; }
.fs3-deltark { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.fs3-delta-ord { font-size: 12.5px; line-height: 1.35; }
.fs3-delta-ord em { font-style: normal; color: var(--fs-text-soft); }
/* Emnekortets underoverskrifter */
.fs3-under { font-size: 12.5px; font-weight: 600; text-transform: none; color: var(--fs-text-soft);
margin: 0 0 6px; }
.fs3-under-mellem { margin-top: 16px; }
/* Kort-hoved med lille vælger til højre */
.fs3-kort-hoved { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.fs3-kort-hoved h2 { margin: 0; }
/* Donut-legend i to linjer */
.fs3-donut-navn { display: flex; flex-direction: column; line-height: 1.3; }
.fs3-donut-navn em { font-style: normal; color: var(--fs-text-soft); font-size: 12.5px; margin: 0; padding: 0; }
.fs3-donut-liste li { align-items: flex-start; }
.fs3-donut-liste .fs3-prik { margin-top: 4px; }
/* Opfølgning: navnekolonner adskilt af tynde streger, dagene i rødt under */
.fs3-opf-navn { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit;
font-size: 13.5px; font-weight: 600; line-height: 1.35; flex: 1; min-width: 0;
border-inline-start: 1px solid var(--fs-border); padding: 4px 12px 4px 22px; }
.fs3-opf-navn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs3-opf-navn:hover { color: var(--fs-navy); }
.fs3-opf-navn em { font-style: normal; font-weight: 600; color: var(--fs-red); font-size: 12.5px; }
/* Bundkortets switch */
.fs3-bund { align-items: flex-start; }
.fs3-bund > div { flex: 1; }
.fs3-switch { flex-shrink: 0; cursor: pointer; margin-top: 4px; }
.fs3-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fs3-switch-bane { display: block; width: 40px; height: 24px; border-radius: 999px;
background: var(--fs-border); position: relative; transition: background 160ms; }
.fs3-switch-bane::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px;
border-radius: 50%; background: #fff; transition: left 160ms; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.fs3-switch input:checked + .fs3-switch-bane { background: var(--fs-green); }
.fs3-switch input:checked + .fs3-switch-bane::after { inset-inline-start: 19px; }
/* Breadcrumb og emnesiden */
.fs3-sti { font-size: 13px; color: var(--fs-text-soft); display: flex; align-items: center; gap: 8px; }
.fs3-sti a { color: inherit; text-decoration: none; }
.fs3-sti a:hover { color: var(--fs-navy); }
.fs3-sti i { font-size: 10px; }
.fs3-sti span { color: var(--fs-text); }
.fs3-emnehero { display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr) minmax(200px, 300px);
gap: 30px; align-items: center; }
@media (max-width: 900px) { .fs3-emnehero { grid-template-columns: 1fr; } }
.fs3-emnehero-tal strong { font-size: 42px; font-weight: 700; display: block; line-height: 1.1;
font-variant-numeric: tabular-nums; }
.fs3-emnehero-kurve .fs3-kurve { height: 90px; width: 100%; }
.fs3-emnehero-kf { border-inline-start: 1px solid var(--fs-border); padding-inline-start: 26px; font-size: 13.5px; }
.fs3-emnehero-kf strong { display: block; margin-bottom: 5px; }
.fs3-emnehero-kf p { margin: 0; color: var(--fs-text-soft); }
@media (max-width: 900px) { .fs3-emnehero-kf { border-inline-start: 0; padding-inline-start: 0; } }
/* Til TAL. nowrap er rigtigt for "142 ms" og "1.284", men forbyder ord at
brække — og bruges klassen på en celle med knaptekster, skubber den
tabellen ud over kortet. Handlinger har derfor deres egen klasse. */
.fs3-tal-kol { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs3-handling-kol { text-align: end; }
/* Kolonneoverskrifter er ord, ikke tal — også når kolonnen under rummer tal */
.fs3-tabel th.fs3-tal-kol { white-space: normal; }
/* class="num" ramte ingen regel inde i .fs3-tabel: .fs-table .num og
.fs-faktura-linjer .num gælder andre tabeller. Tre af portalens tabeller
markerede altså en talkolonne, uden at den blev højrestillet.
BEVIDST uden nowrap: cellen skifter mellem et tal og en tankestreg. */
.fs3-tabel .num { text-align: end; font-variant-numeric: tabular-nums; }
.fs3-emnetabel th em { display: block; font-style: normal; font-weight: 400; font-size: 10.5px; }
.fs3-bar-tabel { display: inline-block; width: 90px; vertical-align: middle; margin-inline-end: 10px; }
.fs3-udvtal { font-weight: 600; }
.fs3-udvtal.er-op { color: var(--fs-green); }
.fs3-udvtal.er-ned { color: var(--fs-red); }
.fs3-tabelfod { display: flex; justify-content: space-between; align-items: center; gap: 16px;
flex-wrap: wrap; margin-top: 14px; font-size: 13px; }
.fs3-csv { height: 44px; font-size: 14px; padding: 0 18px; border-radius: 10px; }
/* ── Oversigt 3.0, tredje runde: finpudsning mod mockup'en ── */
/* Scrollbaren må aldrig skubbe topbaren fra side til side. Sporet tvinges
frem i stedet for at reservere usynlig plads (scrollbar-gutter) — en
malet scrollbar ser rigtig ud, hvor den tomme stribe lignede en fejl
ved siden af knapper og bjælker, der ikke må nå derud. */
html { overflow-y: scroll; }
/* Perioden i tal: prøvetallet stort og alene, resten mindre under */
.fs3-p-stor { margin: 4px 0 10px; }
.fs3-p-stor strong { display: block; font-size: clamp(34px, 3vw, 46px); font-weight: 700;
line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fs3-p-stor span { font-size: 13.5px; color: var(--fs-text-soft); }
.fs3-p-mindre .fs-fakta-blok strong { font-size: 26px; }
/* Egen periode ved den globale vælger */
.fs3-periode-omraade { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.fs3-egen { margin: 0; }
/* Donutten i mockup'ens størrelse */
.fs3-donut { width: 185px; height: 185px; }
.fs3-donut-tal { font-size: 10px; }
.fs3-donutrk { gap: 34px; flex: 1; align-content: center; }
/* Opfølgningen: Se alle udløbende som sidste kolonne, brudt over to linjer */
.fs3-opf-sealle { flex: 0 0 auto; max-width: 128px; line-height: 1.35;
border-inline-start: 1px solid var(--fs-border); padding: 4px 0 4px 22px;
padding-top: 4px !important; margin-top: 0 !important; }
/* Hellere færre hele navne end afklippede */
@media (max-width: 1500px) { .fs3-opf > .fs3-opf-navn:nth-child(7) { display: none; } }
@media (max-width: 1300px) { .fs3-opf > .fs3-opf-navn:nth-child(6) { display: none; } }
@media (max-width: 1120px) { .fs3-opf > .fs3-opf-navn:nth-child(5) { display: none; } }
@media (max-width: 980px) {
.fs3-opf { flex-wrap: wrap; gap: 12px 26px; }
.fs3-opf > .fs3-opf-navn { display: flex; }
.fs3-opf-navn, .fs3-opf-sealle { border-inline-start: 0; padding-inline-start: 0; flex: 0 0 auto; max-width: none; }
}
/* ── Oversigt 3.0, fjerde runde: Martins gennemsyn ── */
/* Fokus-fanerne en anelse mindre — de sad for mast */
.fs3-faner .fs-tab { font-size: 13px; padding: 9px 10px; }
.fs3-faner .fs3-antal { font-size: 11px; padding: 1px 7px; }
/* Aktivitetskortet med mockup'ens luft */
.fs3-donutrk { gap: 46px; padding: 12px 0 6px; }
.fs3-donut-liste li { padding: 9px 0; }
.fs3-donut-navn em { margin-top: 2px; }
/* Påmindelses-switchen står midt for kortet */
.fs3-bund .fs3-switch { align-self: center; margin-top: 0; }
/* Brugerlisten og opret-kortet skal ikke klistre sammen */
.fs3-indstilflade .fs-indstilling-kort.fs3-brugeropret { margin-top: 18px; }
/* Redigeringen folder ud som en rolig flade under brugerens række */
.fs3-brugerredigering { background: var(--fs-field-bg); border-radius: 12px;
padding: 16px 18px; margin: 2px 0 10px; }
/* ── Webshop-dropdown og kørekortskategorier ── */
/* Webshoppens undermenu i topbaren: Produkter | Koder, Ordrer */
.fs-drop { position: relative; }
.fs-drop::after { content: ''; position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 100%; height: 12px; }
.fs-drop-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 12px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); padding: 6px; min-width: 160px;
display: none; flex-direction: column; z-index: 60; }
.fs-drop:hover .fs-drop-menu, .fs-drop:focus-within .fs-drop-menu { display: flex; }
.fs-drop-menu a { padding: 9px 12px; border-radius: 8px; text-decoration: none;
color: inherit; font-size: 14px; white-space: nowrap; }
.fs-drop-menu a:hover { background: var(--fs-field-bg); }
.fs-drop-streg { height: 1px; background: var(--fs-border); margin: 5px 4px; }
@media (max-width: 760px) {
/* I burger-menuen foldes dropdownen ud som almindelige punkter */
.fs-drop { display: contents; }
.fs-drop::after { content: none; }
.fs-drop-menu { position: static; transform: none; display: flex; box-shadow: none;
border: 0; padding: 0; background: none; }
.fs-drop-streg { display: none; }
}
/* Den globale kategorivælger og kodelistens lokale */
.fs-kat-vaelger { font: inherit; font-size: 13.5px; color: var(--fs-text);
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 10px;
padding: 8px 12px; cursor: pointer; }
/* Vælger-dropdowns (sprog og kategori): samme udtryk som webshop-menuen */
.fs-drop-knap { background: none; border: 0; font: inherit; font-size: 14px; color: inherit;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; }
.fs-drop-knap .bi-chevron-down { font-size: 10px; }
.fs-drop-menu button { font: inherit; background: none; border: 0; color: var(--fs-text);
cursor: pointer; text-align: start; padding: 9px 12px; border-radius: 8px; font-size: 14px;
white-space: nowrap; }
.fs-drop-menu button:hover { background: var(--fs-field-bg); }
.fs-drop-menu .er-valgt { font-weight: 700; color: var(--fs-navy); }
/* I hjørnet og i topbaren skal menuen flugte højrekanten — ikke centreres */
.fs-sprog .fs-drop-menu, .fs-kat-drop .fs-drop-menu { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
/* Sprogets flag. 3:2 som forlægget, så intet mases.
Ingen kant om flaget — Martins valg 6. sep. Prisen er, at flag med hvid
yderkant (Polen, Indonesien, Japan) flyder sammen med en lys bjælke. */
/* Et ikon fra køreskolesættet: en SVG brugt som maske, så den tager
tekstens farve — præcis som lektionskortene i undervisningen. */
.fs-ikon-maske { display: inline-block; width: 1.1em; height: 1.1em;
background: currentColor; vertical-align: -0.15em; flex: none;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center; }
.fs-sprog-flag { width: 20px; height: 13.33px; border-radius: 2px; display: block;
flex: none; object-fit: cover; }
/* Det runde sæt: en cirkel på 16px, så den flugter med tekstens x-højde */
.fs-sprog-flag.er-rund { width: 16px; height: 16px; border-radius: 50%; }
/* Flaget i TEKSTENS farve: ikke et billede, men currentColor set gennem en
luminansmaske (www/assets/flag-mono, bin/flag-import.php --mono). Lyst i
masken slipper farven igennem, mørkt gør ikke — og masken er bygget, så
flagets mørke felter er lyse. Så følger flaget teksten ved siden af, i
bjælken såvel som i menuen og i mørkt tema, uden én fil pr. farve. */
.fs-sprog-flag.er-mono { display: block; background-color: currentColor; border-radius: 0;
-webkit-mask: var(--flag) center / contain no-repeat; mask: var(--flag) center / contain no-repeat;
-webkit-mask-source-type: luminance; mask-mode: luminance; }
/* I menuen står flaget foran navnet, så rækkerne flugter */
.fs-drop-menu button { display: flex; align-items: center; gap: 9px; width: 100%; }
/* "Kun flag": uden navnet er knappen kun et flag og en pil — ~32x21px, og
det er under det, en tommelfinger kan ramme. Trykfeltet vokser, uden at
flaget gør: polstring, ikke skala. */
.fs-sprog-kunflag .fs-drop-knap { padding: 10px 8px; }
/* Kategorivælgeren er et valg, ingen må være i tvivl om: altid indrammet
som en tydelig pille — og med luft til naboerne */
.fs-kat-drop { margin-inline-start: 8px; }
.fs-kat-drop > .fs-drop-knap { border: 1px solid var(--fs-border); background: var(--fs-white);
border-radius: 999px; padding: 8px 15px; font-weight: 400; color: var(--fs-text-soft); }
.fs-kat-drop > .fs-drop-knap:hover { border-color: var(--fs-navy); }
@media (max-width: 760px) { .fs-kat-drop { margin-inline-start: 0; } }
/* fs-drop sætter position: relative — sprogvælgeren skal blive i hjørnet */
.fs-sprog.fs-drop { position: fixed; }
@media (max-width: 760px) { .fs-sprog.fs-drop { position: static; } }
@media (max-width: 760px) {
/* I burger-menuen står valgene fladt — udløser-knappen er overflødig */
.fs-drop > .fs-drop-knap { display: none; }
}
/* Skolepriser uden moms: et stille mærke ved beløbet */
.fs-moms-note { display: block; font-size: 11.5px; font-weight: 400; color: var(--fs-text-dim, #6b7a8c); }
.fs-kurv-pris .fs-moms-note { display: inline; margin-inline-start: 4px; }
/* Login-kortets to faner: en switch som fremgangens periodevælger — grå
bakke, og det valgte spor ligger som en hævet, hvid pille */
.fs-login-valg { display: flex; gap: 4px; margin: 0 0 18px; padding: 4px;
border-radius: 999px; background: color-mix(in srgb, var(--fs-text) 7%, transparent); }
.fs-login-valg button { flex: 1; border: 0; border-radius: 999px; background: none;
color: var(--fs-text-soft); font: inherit; font-size: 14.5px; font-weight: 600;
padding: 10px 12px; cursor: pointer; transition: color .12s; }
.fs-login-valg button:hover:not(.er-aktiv) { color: var(--fs-text); }
/* Lys tilstand: hævet hvid pille. Mørk: en lysere grå tone — blåt og hvidt
skar begge i øjnene derinde. */
.fs-login-valg button.er-aktiv { background: var(--fs-surface); color: var(--fs-text);
box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.fs-dark .fs-login-valg button.er-aktiv { background: color-mix(in srgb, #fff 20%, transparent); box-shadow: none; }
/* Glidende omskifter (Design → Login → "Glider hen på plads"): pillen er et
eget lag, der glider fra den ene halvdel til den anden; knapperne står
gennemsigtige ovenpå. Uden .er-glid findes laget ikke, og knappen er hvid
som altid. Retningen ganges med --fs-dir, så den glider rigtigt på arabisk. */
.fs-login-valg { position: relative; }
.fs-login-glider { display: none; }
.fs-login-valg.er-glid .fs-login-glider {
display: block; position: absolute; top: 4px; bottom: 4px; inset-inline-start: 4px;
width: calc(50% - 6px); border-radius: 999px;
background: var(--fs-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
transition: transform 340ms cubic-bezier(.4, 0, .2, 1);
}
.fs-login-valg.er-glid.er-mobil .fs-login-glider { transform: translateX(calc((100% + 4px) * var(--fs-dir))); }
.fs-login-valg.er-glid button { position: relative; z-index: 1; transition: color 220ms; }
.fs-login-valg.er-glid button.er-aktiv { background: none; box-shadow: none; }
.fs-dark .fs-login-valg.er-glid .fs-login-glider { background: color-mix(in srgb, #fff 20%, transparent); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .fs-login-valg.er-glid .fs-login-glider { transition: none; } }
/* Kørekortskategorierne som piller — kundeønske, 5. sep 2026.
Kategorien fandtes kun i topbarens dropdown, oppe i hjørnet, og var let at
overse.
Samme udseende to steder med vilje: på loginkortet og øverst på
prøveoversigten. Vægten er valgt med omhu — .fs-login-valg lige under
pillerne på loginkortet er selve valget mellem kode og mobil, og dét skal
blive ved med at være det tydeligste dér. Derfor ingen fyldt bane, mindre
skrift og kun en kant på de fravalgte. */
.fs-kat-piller { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-kat-piller-login { margin: 0 0 18px; }
/* På oversigten kommer luften nedad fra søskendereglen længere nede
(.fs-kat-piller + .fs-group-head), præcis som ved kundens egen overlinje.
En margen her ville lægge sig oveni. */
.fs-kat-piller-oversigt { margin: 0; }
.fs-kat-pille {
font-size: 12.5px; font-weight: 600; line-height: 1;
padding: 7px 12px; border-radius: 999px;
border: 1px solid var(--fs-border);
color: var(--fs-text-soft); text-decoration: none; white-space: nowrap;
transition: border-color .12s, color .12s;
}
.fs-kat-pille:hover { border-color: var(--fs-navy); color: var(--fs-text); }
.fs-kat-pille.er-valgt {
border-color: transparent;
background: color-mix(in srgb, var(--fs-navy) 12%, transparent);
color: var(--fs-navy);
}
/* Mørk tilstand: den blå tone forsvinder i bunden, så den valgte markeres
med en lysning i stedet — samme greb som fanekontrollens aktive pille. */
.fs-dark .fs-kat-pille.er-valgt {
background: color-mix(in srgb, #fff 16%, transparent); color: var(--fs-text);
}
/* Kategori-badge i lister */
.fs3-kat-badge { display: inline-block; font-size: 12px; font-weight: 600;
border: 1px solid var(--fs-border); border-radius: 999px; padding: 3px 10px;
white-space: nowrap; color: var(--fs-text-soft); }
/* Badgen ved elevens navn i heroen: løftet op på stregen, så den står
midt for navnet i stedet for at hænge på grundlinjen */
.fs-hero-kat { vertical-align: 4px; margin-inline-start: 6px; }
/* Bekræftelsen efter en fornyelse: lille centreret kort med flueben —
beskeden skal kunne læses i ro, ikke glide forbi som en toast */
.fs-fornyet-kort { max-width: 400px; text-align: center; align-items: center; }
.fs-fornyet-kort h3 { margin: 10px 0 4px; }
.fs-fornyet-kort p { margin: 0 0 16px; color: var(--fs-text-soft); }
.fs-fornyet-ikon { font-size: 40px; color: var(--fs-green); line-height: 1; }
/* Tætte søjler (12 måneder): mindre luft og kun hver tredje etiket */
.fs3-ugesoejler.er-taet { gap: 5px; }
.fs3-ugesoejler.er-taet .fs3-soejlebane em { border-radius: 5px; min-height: 8px; }
.fs3-ugesoejler.er-taet small { font-size: 11.5px; }
/* ── Skoleportalens lister (elever, koder, ordrer) i mockup-stil ── */
.fs3-listehero { display: flex; justify-content: space-between; align-items: flex-start;
gap: 24px; flex-wrap: wrap; }
.fs3-listehero h1 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700;
letter-spacing: -0.02em; margin: 0 0 4px; }
.fs3-listehero p { color: var(--fs-text-soft); margin: 0; }
.fs3-listehero-hoejre { display: flex; align-items: center; gap: 20px; }
.fs3-listetal { text-align: end; line-height: 1.25; }
.fs3-listetal strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fs3-tal-ord { font-size: 14.5px; font-weight: 600; }
.fs3-tal-under { display: block; color: var(--fs-green); font-size: 13px; font-weight: 600; }
/* Eksportér-dropdown */
.fs3-eksport { position: relative; }
.fs3-eksport summary { list-style: none; display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; background: var(--fs-white); border: 1px solid var(--fs-border);
border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: 14px; }
.fs3-eksport summary::-webkit-details-marker { display: none; }
.fs3-eksport summary i:last-child { font-size: 11px; color: var(--fs-text-soft); }
.fs3-eksport[open] summary { border-color: var(--fs-navy); }
.fs3-eksport-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); background: var(--fs-white);
border: 1px solid var(--fs-border); border-radius: 12px; padding: 6px; min-width: 140px;
z-index: 30; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); display: flex; flex-direction: column; }
.fs3-eksport-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 12px;
border-radius: 8px; text-decoration: none; color: inherit; font-size: 14px; }
.fs3-eksport-menu a:hover { background: var(--fs-field-bg); }
/* Søgefelt og filter-chips på én række */
.fs3-listefilter { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fs3-soeg { display: inline-flex; align-items: center; gap: 10px; background: var(--fs-white);
border: 1px solid var(--fs-border); border-radius: 12px; padding: 0 14px;
flex: 0 1 320px; min-width: 220px; }
.fs3-soeg i { color: var(--fs-text-soft); }
.fs3-soeg input { border: 0; background: none; font: inherit; font-size: 14px; color: inherit;
padding: 11px 0; outline: none; flex: 1; min-width: 0; }
.fs3-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fs3-chip { border: 1px solid var(--fs-border); background: var(--fs-white); color: inherit;
font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 999px; padding: 9px 16px;
cursor: pointer; }
.fs3-chip:hover { border-color: var(--fs-navy); }
.fs3-chip.er-aktiv { background: var(--fs-navy); border-color: var(--fs-navy); color: var(--fs-accent-text); }
.fs3-chip-antal { font-weight: 400; opacity: 0.75; margin-inline-start: 4px; font-variant-numeric: tabular-nums; }
/* ── Hold: vælgeren i filterlinjen, bjælken over listen, kolonnen og vinduet ── */
/* Vælgeren skubbes til højre kant af filterlinjen; knappen ved siden af */
.fs3-holdvalg { margin-inline-start: auto; }
.fs3-holdfelt { display: inline-flex; align-items: center; gap: 8px; background: var(--fs-white);
border: 1px solid var(--fs-border); border-radius: 12px; padding: 0 12px; }
.fs3-holdfelt i { color: var(--fs-text-soft); }
.fs3-holdfelt select { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600;
color: inherit; padding: 10px 0; outline: none; cursor: pointer; max-width: 240px; }
.fs3-holdknap { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--fs-border);
background: var(--fs-white); color: inherit; font: inherit; font-size: 13.5px; font-weight: 600;
border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.fs3-holdknap:hover { border-color: var(--fs-navy); }
.fs3-holdvalg[hidden] + .fs3-holdknap { margin-inline-start: auto; }
/* Bjælken: blåt er markeringen, ikke en handling — handlingerne er knapperne */
.fs3-holdbjaelke { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
background: var(--fs-selected-bg); border: 1px solid color-mix(in srgb, var(--fs-navy) 25%, transparent);
border-radius: 12px; padding: 10px 16px; margin-top: 14px; font-size: 14px; }
.fs3-holdbjaelke strong { font-variant-numeric: tabular-nums; }
.fs3-holdbjaelke-knap { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--fs-border);
background: var(--fs-white); color: inherit; font: inherit; font-size: 13.5px; font-weight: 600;
border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.fs3-holdbjaelke-knap:hover { border-color: var(--fs-navy); }
.fs3-holdbjaelke-knap.er-daempet { border-color: transparent; background: none; color: var(--fs-text-soft); }
.fs3-holdbjaelke-knap.er-daempet:hover { color: var(--fs-text); }
/* Menuen genbruger eksport-menuens ramme, men punkterne er knapper */
.fs3-holdmenu .fs3-eksport-menu { inset-inline-end: auto; inset-inline-start: 0; min-width: 200px; max-height: 320px; overflow-y: auto; }
.fs3-holdmenu .fs3-eksport-menu button { display: flex; align-items: center; gap: 9px; padding: 9px 12px;
border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-size: 14px;
text-align: start; cursor: pointer; width: 100%; }
.fs3-holdmenu .fs3-eksport-menu button:hover { background: var(--fs-field-bg); }
.fs3-holdmenu .fs3-eksport-menu button.er-nyt { border-top: 1px solid var(--fs-border); border-radius: 0 0 8px 8px;
margin-top: 4px; padding-top: 11px; color: var(--fs-navy); font-weight: 600; }
/* Afkrydsningskolonnen er smal; holdkolonnen findes først, når der er hold */
.fs3-listetabel .fs3-vaelg { width: 28px; padding-inline-end: 0; }
.fs3-listetabel .fs3-vaelg input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--fs-navy); }
.fs3-holdkolonne.er-uden-hold { display: none; }
/* Holdet på mobilkortet: et lille mærke først på linjen */
.fs3-holdtag { display: inline-block; border: 1px solid var(--fs-border); border-radius: 999px;
padding: 1px 8px; font-size: 11.5px; font-weight: 600; margin-inline-end: 4px; }
/* Vinduet */
.fs3-holdvindue { text-align: start; max-width: 560px; }
.fs3-holdforklaring { color: var(--fs-text-soft); font-size: 14px; margin: 0 0 16px; white-space: normal; }
.fs3-holdopret { display: flex; gap: 10px; }
.fs3-holdopret input { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 0 14px;
border: 1px solid var(--fs-border); border-radius: 10px; background: var(--fs-white); color: inherit; }
.fs3-holdopret input:focus { outline: none; border-color: var(--fs-navy); }
.fs3-holdopret-note { margin: 8px 0 0; font-size: 13.5px; color: var(--fs-navy); font-weight: 600; white-space: normal; }
.fs3-holdliste { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
.fs3-holdliste li { display: flex; align-items: center; gap: 12px; padding: 10px 0;
border-top: 1px solid var(--fs-border); font-size: 14.5px; }
.fs3-holdliste li:first-child { border-top: 0; }
.fs3-holdnavn { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs3-holdantal { color: var(--fs-text-soft); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs3-holdknapper { display: flex; gap: 12px; white-space: nowrap; }
.fs3-holdknapper .fs-link, .fs3-holdomdoeb .fs-link { font-size: 13.5px; color: var(--fs-navy); cursor: pointer; padding: 0; }
.fs3-holdknapper .fs-link.er-slet { color: var(--fs-red); }
.fs3-holdliste.er-arkiv .fs3-holdnavn { color: var(--fs-text-soft); font-weight: 500; }
.fs3-holdomdoeb { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.fs3-holdomdoeb input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 7px 10px;
border: 1px solid var(--fs-navy); border-radius: 8px; background: var(--fs-white); color: inherit; outline: none; }
.fs-portal-modal .fs3-holdomdoeb .fs-btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
.fs3-holdafsluttede { margin-top: 16px; }
.fs3-holdafsluttede summary { cursor: pointer; color: var(--fs-text-soft); font-size: 13.5px; font-weight: 600; }
.fs3-holdafsluttede .fs3-holdliste { margin-top: 8px; }
@media (max-width: 640px) {
.fs3-holdvalg, .fs3-holdvalg[hidden] + .fs3-holdknap { margin-inline-start: 0; }
.fs3-holdliste li { flex-wrap: wrap; }
}
/* Tabellen bor i et kort med foden indeni */
.fs3-tabelkort { padding: 10px 26px 16px; overflow-x: auto; }
/* Kun rulning, ingen polstring — til tabeller, der allerede ligger i et
kort med sin egen. Uden den skubbede en for bred tabel HELE siden
vandret på en telefon; nøgletabellen stak 333 px ud ved 375 px. */
.fs3-tabelrul { overflow-x: auto; }
.fs3-listetabel td { padding: 12px 8px; }
.fs3-listetabel .fs-elev-mail { display: block; color: var(--fs-text-soft); font-size: 12.5px; }
.fs3-listefod { display: flex; justify-content: space-between; align-items: center; gap: 16px;
flex-wrap: wrap; padding-top: 14px; font-size: 13.5px; }
.fs3-pager { display: flex; gap: 6px; margin: 0; }
.fs3-pager .fs-pager-knap { min-width: 36px; height: 36px; border-radius: 9px;
border: 1px solid var(--fs-border); background: var(--fs-white); color: inherit;
font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
font-variant-numeric: tabular-nums; }
.fs3-pager .fs-pager-knap i { font-size: 12px; }
.fs3-pager .fs-pager-knap.er-aktiv { background: var(--fs-navy); border-color: var(--fs-navy); color: var(--fs-accent-text); }
.fs3-pager .fs-pager-knap:hover:not(.er-aktiv) { border-color: var(--fs-navy); }
.fs3-pager span { align-self: center; color: var(--fs-text-soft); }
/* ── Indstillinger med undermenu i venstre side ── */
/* Mockup'ens ramme: menuspalten står på sidens egen baggrund med en lodret
skillelinje, rører venstre kant og er fastgjort, så hjælpeboksen altid
ligger i skærmens nederste hjørne — uanset sidens indholdshøjde */
.fs-surface.fs3-indstilside { padding: var(--fs-bar-h) 0 0; max-width: none; }
.fs3-indstilflade { display: grid; grid-template-columns: 300px minmax(0, 1fr);
min-height: calc(100vh - var(--fs-bar-h)); }
.fs3-indstil-inder { padding: 36px var(--fs-kant) 72px; }
/* Slår portallens 1080px-loft — kortene skal holde højre kant */
.fs-skole .fs-front-home.fs-portal.fs3-indstil-inder { max-width: none; }
@media (max-width: 860px) {
.fs3-indstilflade { grid-template-columns: 1fr; min-height: 0; }
.fs3-sidemenu { position: static !important; height: auto !important;
border-inline-end: 0 !important; border-bottom: 1px solid var(--fs-border); }
}
.fs3-sidemenu { display: flex; flex-direction: column; gap: 4px;
border-inline-end: 1px solid var(--fs-border);
position: sticky; top: var(--fs-bar-h); align-self: start;
height: calc(100vh - var(--fs-bar-h)); overflow-y: auto;
padding: 36px 26px 26px; }
.fs3-indstil-indhold { min-width: 0; }
.fs3-sidemenu h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 20px; }
.fs3-sidemenu nav { display: flex; flex-direction: column; gap: 4px; }
/* text-decoration: menupunktet kan være et (Afdelinger, tilbage-linket)
og skal ligne knap-søskendene på en streg — bogstaveligt talt. */
.fs3-menupunkt { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
border-radius: 10px; border: 0; background: none; font: inherit; font-size: 15px;
color: inherit; cursor: pointer; text-align: start; text-decoration: none; }
.fs3-menupunkt i { font-size: 16px; color: var(--fs-text-soft); }
.fs3-menupunkt:hover { background: color-mix(in srgb, var(--fs-navy) 5%, transparent); }
.fs3-menupunkt.er-aktiv { background: var(--fs-selected-bg); font-weight: 600; }
.fs3-menupunkt.er-aktiv i { color: var(--fs-navy); }
.fs3-hjaelp { margin-top: auto; background: var(--fs-white); border: 1px solid var(--fs-border);
border-radius: 14px; padding: 16px 18px; font-size: 13px; color: var(--fs-text-soft);
display: flex; flex-direction: column; gap: 3px; }
.fs3-hjaelp > i { font-size: 17px; color: var(--fs-text); margin-bottom: 5px; }
.fs3-hjaelp strong { color: var(--fs-text); font-size: 14px; }
.fs3-hjaelp a { color: var(--fs-navy); text-decoration: none; font-weight: 600; margin-top: 2px; }
.fs3-hjaelp a:hover { text-decoration: underline; }
@media (max-width: 860px) { .fs3-hjaelp { margin-top: 18px; } }
/* Accept-siden: én beslutning på ét kort. Kortet er smalt og midtstillet —
det er en kontrakt, ikke et dashboard — og punkterne får luft og en
hængende indrykning, så seks konsekvenser kan LÆSES, ikke skimmes. */
.fs3-accept-side { display: flex; justify-content: center; padding: 48px var(--fs-kant) 72px; }
.fs3-accept-kort { max-width: 640px; width: 100%; padding: 36px 40px; }
.fs3-accept-kort h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; }
.fs3-accept-intro { margin: 0 0 18px; }
.fs3-accept-liste { margin: 0 0 24px; padding-inline-start: 22px; display: flex;
flex-direction: column; gap: 10px; }
.fs3-accept-liste li { padding-inline-start: 4px; }
.fs3-accept-liste li::marker { color: var(--fs-text-soft); }
.fs3-accept-gensend { margin-top: 14px; }
.fs3-accept-kort .otp { margin: 10px 0 18px; }
/* Afdelinger under Indstillinger: siden har tre kort oven på hinanden, og
indstilfladens nulstilling af kortmargin (se .fs-indstilling-kort ovenfor)
klumpede dem sammen. Luften ligger mellem kortene, ikke i dem. */
.fs3-afd-inder .fs3-indstilkort + .fs3-indstilkort { margin-top: 24px; }
/* Redigér og Kobl af på samme linje. Tabellen ligger i .fs3-tabelrul, så
nowrap her skubber ikke kortet — den ruller i sig selv på en telefon. */
.fs3-afd-inder .fs3-handling-kol { white-space: nowrap; }
.fs3-afd-inder .fs3-handling-kol .fs-link + .fs-link,
.fs3-afd-inder .fs3-handling-kol .fs-link + .fs-frigiv { margin-inline-start: 14px; }
.fs3-afd-soeg { width: min(480px, 100%); }
.fs3-afd-soeg input { flex: 1; }
/* Træfferen: navnet på sin egen linje, adressen og CVR-nummeret dæmpet
nedenunder — det er adressen, der skiller to næsten ens navne ad. */
.fs3-afd-traeffer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs3-afd-handling { display: inline-flex; align-items: center; gap: 10px; }
.fs3-afd-mailfelt { font: inherit; font-size: 13.5px; padding: 6px 10px;
border: 1px solid var(--fs-border); border-radius: 8px; min-width: 220px; }
.fs3-sektionshero { margin-bottom: 20px; }
.fs3-sektionshero h1 { font-size: 28px; font-weight: 700;
letter-spacing: -0.02em; margin: 0 0 4px; }
.fs3-sektionshero p { color: var(--fs-text-soft); margin: 0; max-width: 720px; }
.fs3-indstilkort { border: 1px solid var(--fs-border); border-radius: 16px; }
.fs3-indstilflade .fs-skole-opret-form { max-width: none; }
.fs3-indstilflade .fs-indstilling-kort { max-width: none; margin: 0; }
/* Slår portallens 620px-loft på formularer — felterne bruger kortets bredde */
.fs-portal .fs3-indstilkort .fs-skole-opret-form,
.fs-portal .fs3-indstilkort .fs-afsnit-hint { max-width: none; }
/* Felterne i kortene: samme rolige udtryk som resten af portalen */
.fs3-indstilkort select { font: inherit; font-size: 14px; color: var(--fs-text);
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 10px;
padding: 12px 14px; cursor: pointer; min-width: 220px; }
/* Kanalvalg som afkrydsningspiller — begge kan vælges */
.fs3-kanaler { display: flex; gap: 10px; flex-wrap: wrap; }
.fs3-kanal { position: relative; }
.fs3-kanal input { position: absolute; opacity: 0; pointer-events: none; }
.fs3-kanal span { display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--fs-border); border-radius: 10px; padding: 11px 18px;
font-size: 14px; font-weight: 600; cursor: pointer; background: var(--fs-white); }
.fs3-kanal span i { display: none; font-size: 13px; }
.fs3-kanal input:checked + span { border-color: var(--fs-navy); color: var(--fs-navy);
background: color-mix(in srgb, var(--fs-navy) 8%, transparent); }
.fs3-kanal input:checked + span i { display: inline; }
.fs3-kanal span:hover { border-color: var(--fs-navy); }
/* ── Integrationen i skoleportalen ──────────────────────────────────── */
/* Nøglen, adressen og prøvekaldet: monospace, så tegnene kan skelnes, og
break-all, så en lang nøgle ikke skubber kortet ud i siden. user-select
markerer hele feltet med ét klik, hvis kopiér-knappen skulle svigte. */
.fs3-noegle { display: block; padding: 10px 12px; flex: 1 1 auto; min-width: 0;
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 8px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
word-break: break-all; user-select: all; }
.fs3-kopilinje { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; }
.fs3-kopilinje-smal { margin-top: 0; align-items: center; }
.fs3-kopilinje-smal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px; user-select: all; }
.fs3-kopi { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
font: inherit; font-size: 13px; font-weight: 600; color: var(--fs-navy);
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 8px;
padding: 10px 14px; cursor: pointer; transition: border-color 140ms, color 140ms; }
.fs3-kopi:hover { border-color: var(--fs-navy); }
.fs3-kopi.er-kopieret { border-color: var(--fs-green); color: var(--fs-green); }
.fs3-kopi-lille { padding: 5px 8px; }
.fs3-felt-etiket { font-size: 13px; font-weight: 600; color: var(--fs-text-soft);
margin-top: 18px; }
/* Den nyoprettede nøgle: striben skal kunne rumme en linje på 90 tegn */
.fs3-nynoegle .fs3-kopilinje { width: 100%; }
/* Adgangsvalget: tre kort, ét klik. Radioen er skjult — kortet er knappen. */
.fs3-valgkort { display: grid; gap: 10px; margin-top: 8px; }
.fs3-valgkort-et { position: relative; cursor: pointer; }
.fs3-valgkort-et input { position: absolute; opacity: 0; pointer-events: none; }
.fs3-valgkort-krop { display: block; border: 1px solid var(--fs-border); border-radius: 12px;
padding: 14px 16px; background: var(--fs-white); transition: border-color 140ms, background 140ms; }
.fs3-valgkort-krop strong { display: block; font-size: 14px; }
.fs3-valgkort-krop span { display: block; font-size: 13px; color: var(--fs-text-soft); margin-top: 3px; }
.fs3-valgkort-et:hover .fs3-valgkort-krop { border-color: var(--fs-navy); }
.fs3-valgkort-et input:checked + .fs3-valgkort-krop { border-color: var(--fs-navy);
background: color-mix(in srgb, var(--fs-navy) 6%, transparent); }
.fs3-valgkort-et input:focus-visible + .fs3-valgkort-krop { outline: 2px solid var(--fs-navy); outline-offset: 2px; }
/* De enkelte rettigheder: én linje, én kontakt */
.fs3-rettigheder { display: grid; gap: 2px; margin: 14px 0 18px; }
.fs3-rettighed { display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding: 10px 2px; border-bottom: 1px solid var(--fs-border); font-size: 14px; }
.fs3-rettighed:last-child { border-bottom: 0; }
.fs3-rettighed .fs3-switch { margin-top: 0; }
/* Tastaturet skal kunne se, hvor det står. Kontakternes input er skjult,
så ringen må tegnes på banen. */
.fs3-switch input:focus-visible + .fs3-switch-bane { outline: 2px solid var(--fs-navy); outline-offset: 3px; }
.fs3-uaendrelig { display: block; margin: -6px 0 16px; }
/* Striben er husets ene advarsel og må ikke få en ny variant — men på
indstillingssiden står den mellem kort i fuld bredde, og en centreret
640px-kasse midt i dem ser ud som en fejl. Kun målene rettes. */
.fs3-indstilflade .fs-varsel-stribe { max-width: none; margin: 0 0 18px; align-items: flex-start; }
/* Rettighederne på en eksisterende nøgle — små, rolige mærker under navnet */
.fs3-oprettet { display: block; font-size: 12px; margin-top: 2px; }
/* Puljen står øverst på Integration — et tal, man skal lede efter, er et
tal, ingen ser. */
.fs3-pulje { margin: 14px 0 0; font-size: 14px; }
.fs3-pulje strong { font-size: 15px; }
.fs3-pulje-tom { color: var(--fs-warn); }
/* App-tilstand: den eneste linje, der er tilbage af toppen, når eleven
sidder i skolens egen app. */
.fs-appbar { padding: 10px 20px; border-bottom: 1px solid var(--fs-border);
background: var(--fs-white); }
.fs-appbar .fs-link { font-size: 14px; }
/* Undervalget fil/kobling på bestillingssiden */
.fs-eget-levering { display: grid; gap: 10px; margin: 10px 0 0 34px; }
/* Dokumentationssiden. Trinene nummereres, så rækkefølgen er den første
ting, øjet fanger — det er dét, en leverandør leder efter. */
.fs3-dok h3 { font-size: 15px; margin: 20px 0 8px; }
.fs3-dok code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.fs3-dok .fs3-noegle { white-space: pre; overflow-x: auto; word-break: normal; }
.fs3-trin { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; }
.fs3-trin-nr { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
background: var(--fs-navy); color: #fff; font-size: 13px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.fs3-trin > div { min-width: 0; flex: 1; }
.fs3-trin strong { display: block; font-size: 14px; }
.fs3-forloeb { margin: 0 0 6px; padding-inline-start: 20px; font-size: 14px; }
.fs3-forloeb li { margin: 5px 0; }
.fs3-dok-note { display: block; margin-top: 4px; font-size: 13px; }
.fs3-dok-etiket { display: block; margin-top: 10px; font-size: 12px; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; color: var(--fs-text-soft); }
.fs3-dok-felter { margin: 4px 0 0; padding-inline-start: 18px; font-size: 13px; }
.fs3-dok-felter li { margin: 3px 0; }
.fs3-dok-svar { margin: 4px 0 0; padding: 10px 12px; background: var(--fs-bg);
border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px; line-height: 1.5; overflow-x: auto; white-space: pre; }
.fs3-dok .fs3-listetabel td { vertical-align: top; }
/* Låst lektion: kortet bliver stående som kundens salgstale, men dæmpet og
med en lås i hjørnet, så det er tydeligt, at der skal en kode til. */
.fs-uv-kort.er-laast { opacity: .62; }
.fs-uv-kort.er-laast:hover { opacity: .78; }
.fs-uv-kort-laas { position: absolute; top: 12px; inset-inline-end: 14px; font-size: 13px;
color: var(--fs-text-soft); }
.fs3-maerker { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.fs3-maerke { font-size: 11px; font-weight: 600; color: var(--fs-text-soft);
background: var(--fs-bg); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.fs3-noegletabel td { vertical-align: top; }
/* Den tomme tilstand: en grund til at trykke, ikke bare en tom sætning */
.fs3-tomtkort { text-align: center; padding: 26px 20px; }
.fs3-tomtkort i { font-size: 26px; color: var(--fs-text-soft); }
.fs3-tomtkort strong { display: block; margin-top: 10px; font-size: 15px; }
.fs3-tomtkort p { margin: 6px auto 0; max-width: 46ch; font-size: 14px; color: var(--fs-text-soft); }
/* Kaldloggen ligger foldet sammen — den er leverandørens værktøj, ikke
skolens daglige læsning */
.fs3-kaldlog summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.fs3-kaldlog[open] summary { margin-bottom: 12px; }
.fs3-prik { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--fs-green); }
.fs3-prik.er-fejl { background: var(--fs-red); }
.fs3-remindfelter { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.fs3-remindfelter .fs-field { margin: 0; }
.fs3-remindmere { display: grid; gap: 18px; }
.fs3-tekstfelt { font: inherit; font-size: 14px; color: var(--fs-text); width: 100%;
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 10px;
padding: 12px 14px; resize: vertical; min-height: 84px; box-sizing: border-box;
max-width: 860px; }
/* Logo-fliserne: 50/50 over kortets bredde som de andre feltpar */
.fs3-indstilkort .fs-logo-grid { display: grid; margin-top: 0; gap: 18px;
grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .fs3-indstilkort .fs-logo-grid { grid-template-columns: 1fr; } }
.fs3-indstilkort .fs-logo-slot { border: 1px solid var(--fs-border); border-radius: 14px;
padding: 16px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.fs3-indstilkort .fs-logo-slot h3 { margin: 0; font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em; color: var(--fs-text-soft); }
.fs3-indstilkort .fs-logo-preview { display: flex; align-items: center; justify-content: center;
width: 100%; height: 80px; margin: 0; padding: 10px; box-sizing: border-box; border-radius: 10px; }
.fs3-indstilkort .fs-logo-preview img { max-height: 42px; max-width: 75%; height: auto; width: auto; }
.fs3-indstilkort .fs-logo-handling { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fs3-indstilkort .fs-logo-handling .fs-btn { height: 44px; padding: 0 18px; font-size: 14px;
border-radius: 10px; }
.fs3-indstilkort .fs-logo-fjern { margin: -2px 0 0; }
.fs3-korthoved { display: flex; justify-content: space-between; align-items: center;
gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.fs3-korthoved h2 { margin: 0; }
.fs3-korthoved .fs-btn { height: 44px; font-size: 14px; padding: 0 18px; border-radius: 10px; }
/* Låste prøvekort — klasseundervisning uden købt adgang, og prøver uden for
elevens pakke, hvor kunden sælger en opgradering.
Det er BILLEDET, der siger "låst", ikke skriften.
Standarden er sort-hvid og bærer ingen klasse: en kunde, der aldrig rører
valget, ser præcis det, hun så i går. De tre andre kommer fra Design →
Prøveoversigten (design_laast_billede). */
.fs-test.er-laast .fs-test-img { filter: grayscale(1); opacity: 0.55;
transition: filter .25s ease, opacity .25s ease; }
/* Farve, når man peger. Kun hvor der FINDES en pegeenhed: på en telefon
findes hover ikke, og uden medieforespørgslen ville reglen enten aldrig
gælde eller sætte sig fast efter det første tryk — begge dele værre end
det gråt, den skulle afløse. */
@media (hover: hover) and (pointer: fine) {
.fs-laast-hover .fs-test.er-laast:hover .fs-test-img { filter: none; opacity: 1; }
}
/* Dæmpet: farverne er der, bare skruet ned. Mellemvejen, hvor kortet er
levende og stadig tydeligt låst. */
.fs-laast-daempet .fs-test.er-laast .fs-test-img { filter: saturate(.42); opacity: .76; }
/* Fuld farve. Så er det hængelåsen og knappen, der bærer beskeden alene —
derfor står de to også urørt af det her valg. */
.fs-laast-farve .fs-test.er-laast .fs-test-img { filter: none; opacity: 1; }
/* Hvid skrift KUN på de skabeloner, hvor teksten står oven på billedet.
Reglen stod uden skabelon foran og gjaldt derfor alle: på 'kort',
'liste' og 'kompakt' — hvor teksten står under billedet på en lys flade —
blev titlen hvid på hvidt og forsvandt helt. Det så man ikke, så længe
kun klassesiden låste kort, for de kunder kører 'fremhaevet'. */
.fs-tpl-fremhaevet .fs-test.er-laast .fs-test-title,
.fs-tpl-billede-bred .fs-test.er-laast .fs-test-title,
.fs-tpl-mosaik .fs-test.er-laast .fs-test-title,
.fs-tpl-magasin .fs-test.er-laast .fs-test-title,
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test.er-laast .fs-test-title { color: #fff; }
.fs-tpl-fremhaevet .fs-test.er-laast .fs-test-sub,
.fs-tpl-fremhaevet .fs-test.er-laast .fs-test-desc,
.fs-tpl-billede-bred .fs-test.er-laast .fs-test-sub,
.fs-tpl-billede-bred .fs-test.er-laast .fs-test-desc,
.fs-tpl-mosaik .fs-test.er-laast .fs-test-sub, .fs-tpl-mosaik .fs-test.er-laast .fs-test-desc,
.fs-tpl-magasin .fs-test.er-laast .fs-test-sub, .fs-tpl-magasin .fs-test.er-laast .fs-test-desc,
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test.er-laast .fs-test-sub,
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test.er-laast .fs-test-desc { color: rgba(255, 255, 255, .82); }
/* Står teksten under billedet, dæmpes den i stedet — samme signal, uden at
skulle gætte på baggrundens farve. */
.fs-test.er-laast .fs-test-lines { opacity: .72; }
.fs-tpl-fremhaevet .fs-test.er-laast .fs-test-lines,
.fs-tpl-billede-bred .fs-test.er-laast .fs-test-lines,
.fs-tpl-mosaik .fs-test.er-laast .fs-test-lines,
.fs-tpl-magasin .fs-test.er-laast .fs-test-lines,
:is(.fs-tpl-karusel, .fs-tpl-rampelys, .fs-tpl-coverflow, .fs-tpl-scene) .fs-test.er-laast .fs-test-lines { opacity: 1; }
/* "Ikke med i din pakke." under gruppens overskrift — én gang for hele
gruppen, ikke på hvert kort. */
.fs-gruppe-laast { display: flex; align-items: center; gap: 7px;
margin: 8px 0 0; font-size: 14px; color: var(--fs-text-soft); }
.fs-gruppe-laast .bi { font-size: 12px; }
.fs-kl-status { color: var(--fs-text-soft); font-size: 13.5px; margin: 26px 0 0; }
/* Status og bannere øverst på klassesiden skal ikke arve gitterets store
bundpolstring — prøvernes overskrift skal stå lige under. Men de skal
have luft NED FRA topbaren; klistret op i den så det ud, som om de hang
fast i menuen. */
.fs-groups.fs-kl-top { padding-bottom: 0; padding-top: 26px; }
.fs-klasse-status { margin: -4px 0 12px; }
/* ══════════ Elevens værktøjer: byg-selv-prøve, fremgang og badges ══════════ */
/* Seneste resultat — oppe i billedets højre hjørne med luft til kanterne.
Solid flade, så den kan læses oven på et hvilket som helst foto. Klik
åbner kurven. */
.fs-test-status {
position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border: 0; border-radius: 999px;
font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
/* Tonet, men solid flade — læselig oven på fotos, og blandet mod temaets
egen flade, så den også sidder rigtigt i mørk tilstand */
.fs-test-status.er-ok { background: color-mix(in srgb, var(--fs-green) 16%, var(--fs-surface)); color: var(--fs-green-dark); }
.fs-test-status.er-dumpet { background: color-mix(in srgb, var(--fs-red) 14%, var(--fs-surface)); color: var(--fs-red); }
.fs-dark .fs-test-status.er-ok { color: #6fd98c; }
.fs-dark .fs-test-status.er-dumpet { color: #ff8f85; }
.fs-test-status:hover { transform: scale(1.04); }
/* Kurvevinduet og kurverne (deles med fremgangssiden) */
.fs-kurve-dialog {
border: 0; border-radius: 16px; padding: 24px 26px; margin: auto;
width: min(560px, 92vw); background: var(--fs-surface); color: var(--fs-text);
box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}
.fs-kurve-dialog::backdrop { background: rgba(0, 0, 0, .45);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fs-kurve-dialog h2 { margin: 0 0 2px; font-size: 17px; letter-spacing: -0.01em; }
.fs-kurve-under { margin: 0 0 14px; font-size: 13.5px; color: var(--fs-text-soft); }
.fs-kurve-fod { display: flex; justify-content: flex-end; margin-top: 14px; }
.fs-kurve-svg { width: 100%; height: auto; display: block; }
.fs-kurve-linje { fill: none; stroke: var(--fs-navy); stroke-width: 2; opacity: .55; }
.fs-kurve-graense { stroke: var(--fs-text-soft); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .6; }
.fs-kurve-ok { fill: var(--fs-green); }
.fs-kurve-dumpet { fill: var(--fs-red); }
.fs-kurve-tal { font-size: 11px; font-weight: 600; fill: var(--fs-text); }
.fs-kurve-tekst { font-size: 10.5px; fill: var(--fs-text-soft); }
/* Bygsiden */
.fs-byg .fs3-kort { margin-bottom: 16px; }
.fs-byg-hint { font-size: 13.5px; color: var(--fs-text-soft); margin: 0 0 14px; }
.fs-byg-emner { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-byg-emne input { position: absolute; opacity: 0; }
.fs-byg-emne span {
display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
border: 1px solid var(--fs-border); border-radius: 999px; font-size: 14px;
cursor: pointer; user-select: none; transition: all .12s;
}
.fs-byg-emne small { color: var(--fs-text-soft); font-size: 12px; }
.fs-byg-emne input:checked + span { background: var(--fs-navy); border-color: var(--fs-navy); color: var(--fs-accent-text); }
.fs-byg-emne input:checked + span small { color: rgba(255, 255, 255, .75); }
.fs-byg-alle {
margin-top: 12px; background: none; border: 0; padding: 0; font: inherit;
font-size: 13.5px; font-weight: 600; color: var(--fs-navy); cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.fs-byg-antal { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.fs-byg-tal input { position: absolute; opacity: 0; }
.fs-byg-tal span {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 14px 10px; border: 1px solid var(--fs-border); border-radius: 12px;
cursor: pointer; user-select: none; text-align: center; transition: all .12s;
}
.fs-byg-tal strong { font-size: 22px; letter-spacing: -0.02em; }
.fs-byg-tal small { font-size: 12px; color: var(--fs-text-soft); }
.fs-byg-tal input:checked + span { border-color: var(--fs-navy); box-shadow: 0 0 0 2px var(--fs-navy) inset; }
.fs-byg-tal.er-slukket span { opacity: .35; cursor: not-allowed; }
.fs-byg [data-byg-status] { margin-top: 12px; color: var(--fs-red); }
/* ── Byg-skabelonerne ── 'kort' er grundformen ovenfor.
Nummererede trin: kortkanterne forsvinder, og afsnittene tælles op med
en cirkel i margenen — samme sprog som webshoppens trin. */
.fs-byg-tpl-trin form { counter-reset: bygtrin; }
.fs-byg-tpl-trin .fs3-kort { background: none; border-radius: 0; box-shadow: none;
padding: 0 0 0 52px; position: relative; margin-bottom: 34px; }
.fs-byg-tpl-trin .fs3-kort > h2 { padding-top: 4px; }
.fs-byg-tpl-trin .fs3-kort::before {
counter-increment: bygtrin; content: counter(bygtrin);
position: absolute; inset-inline-start: 0; top: 0; width: 36px; height: 36px;
border-radius: 50%; background: var(--fs-navy); color: var(--fs-accent-text);
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 700;
}
.fs-byg-tpl-trin .fs-cta { margin-inline-start: 52px; }
/* Ét samlet kort: afsnittene bor i samme kort med en skillelinje, emnerne
står som liste-rækker med antallet ude til højre, og start bor i kortet */
.fs-byg-etkort .fs-byg-afsnit { padding-bottom: 22px; margin-bottom: 22px;
border-bottom: 1px solid var(--fs-border); }
.fs-byg-tpl-samlet .fs-byg-emner { display: block; columns: 2; column-gap: 28px; }
@media (max-width: 700px) { .fs-byg-tpl-samlet .fs-byg-emner { columns: 1; } }
.fs-byg-tpl-samlet .fs-byg-emne { display: block; break-inside: avoid; }
.fs-byg-tpl-samlet .fs-byg-emne span { display: flex; width: 100%; border: 0;
border-radius: 8px; padding: 9px 10px; justify-content: space-between; }
.fs-byg-tpl-samlet .fs-byg-emne span::before { content: ''; width: 17px; height: 17px;
border: 1.5px solid var(--fs-border); border-radius: 5px; flex: 0 0 auto;
margin-inline-end: 10px; align-self: center; background: var(--fs-white); }
.fs-byg-tpl-samlet .fs-byg-emne span { position: relative; }
.fs-byg-tpl-samlet .fs-byg-emne span > small { margin-inline-start: auto; }
.fs-byg-tpl-samlet .fs-byg-emne input:checked + span { background: var(--fs-selected-bg);
color: var(--fs-text); }
.fs-byg-tpl-samlet .fs-byg-emne input:checked + span::before { background: var(--fs-navy);
border-color: var(--fs-navy); }
.fs-byg-tpl-samlet .fs-byg-emne input:checked + span small { color: var(--fs-text-soft); }
/* Fremgangssiden */
.fs-fremgang .fs3-hero { margin-bottom: 20px; }
.fs-fremgang .fs3-kort4 { margin-bottom: 16px; }
.fs-fremgang .fs3-kort { margin-bottom: 16px; }
.fs-fremgang .fs3-tal, .fs-elevdetalje .fs3-tal { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.fs-frem-under { display: block; margin-top: 4px; font-size: 12.5px; color: var(--fs-text-soft); }
/* De tre kort følges ad i højden — gridet strækker dem til det højeste */
.fs-frem-delt { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: stretch; }
.fs-frem-delt .fs3-kort { margin-bottom: 0; display: flex; flex-direction: column; }
/* Prøvelisten fylder kortets midte — vis alle-knappen står altid i bunden
til højre, uanset hvor højt nabokortene gør kortet */
.fs-frem-liste { flex: 1; }
.fs-frem-visalle { margin-top: 12px; align-self: flex-end; }
.fs-frem-visalle .fs-btn { height: 40px; font-size: 14px; padding: 0 16px; border-radius: 10px; }
/* ── Fremgangs-skabelonerne ── 'kort' er grundformen ovenfor. De to andre
ændrer kun udtrykket via klassen på siden — markup og tal er ens. */
/* Nøgletal i bånd: de fire kort smelter sammen til ét med skillelinjer */
.fs-fremgang-tpl-baand .fs3-kort4 { display: flex; gap: 0; background: var(--fs-surface);
border-radius: var(--fs-radius); padding: 6px 0; }
.fs-fremgang-tpl-baand .fs3-kort4 > .fs3-kort { flex: 1; background: none; border-radius: 0;
box-shadow: none; margin-bottom: 0; border-inline-start: 1px solid var(--fs-border); }
.fs-fremgang-tpl-baand .fs3-kort4 > .fs3-kort:first-child { border-inline-start: 0; }
@media (max-width: 760px) {
.fs-fremgang-tpl-baand .fs3-kort4 { flex-wrap: wrap; }
.fs-fremgang-tpl-baand .fs3-kort4 > .fs3-kort { flex: 1 1 40%; border-inline-start: 0; }
}
/* Farvet forside: hilsen og nøgletal står på primærfarven, kortene med
tallene trækkes op over kanten, så fladerne fletter */
.fs-fremgang-tpl-farvet .fs3-hero { background: var(--fs-navy); border-radius: var(--fs-radius);
padding: 30px 32px 56px; margin-bottom: 0; }
.fs-fremgang-tpl-farvet .fs3-hero h1 { color: var(--fs-accent-text); }
.fs-fremgang-tpl-farvet .fs3-hero p { color: color-mix(in srgb, var(--fs-accent-text) 78%, transparent); }
.fs-fremgang-tpl-farvet .fs3-kort4 { margin: -36px 20px 16px; }
.fs-frem-tid { color: var(--fs-text-soft); font-size: 13px; white-space: nowrap; }
/* Vinduet med hele historikken: bredere kort, listen ruller selv, og
rækkerne får en femte spalte med vejen tilbage til prøven */
.fs-frem-alle-kort { max-width: 840px; text-align: start; padding: 40px 34px 38px; }
.fs-frem-alle-liste { max-height: min(62vh, 580px); overflow-y: auto; padding-inline-end: 16px; }
.fs-frem-raekke.er-bred { grid-template-columns: 82px 1fr auto auto auto; }
.fs-frem-igen { font-size: 13px; white-space: nowrap; color: var(--fs-navy); text-decoration: none; }
.fs-frem-igen:hover { text-decoration: underline; }
/* Talkolonnen skal kunne rumme "10 af 38 forkerte" på højst to linjer —
bjælken afgiver pladsen */
/* Tallet til højre må aldrig knække linje — bæltet i midten giver sig i
stedet, når pladsen er trang */
.fs-frem-emne { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(56px, 1.4fr) auto; gap: 12px; align-items: center; padding: 7px 0; }
.fs-frem-emne-navn { font-size: 14px; }
.fs-frem-baelte { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--fs-text) 8%, transparent); overflow: hidden; }
.fs-frem-baelte span { display: block; height: 100%; border-radius: 4px; background: var(--fs-navy); opacity: .55; }
.fs-frem-baelte span.er-hoej { background: var(--fs-red); opacity: .75; }
.fs-frem-emne-tal { font-size: 12.5px; line-height: 1.35; text-align: end; color: var(--fs-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fs-frem-raekke { display: grid; grid-template-columns: 82px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--fs-border); font-size: 14px; }
.fs-frem-raekke:last-child { border-bottom: 0; }
.fs-frem-dato { color: var(--fs-text-soft); font-variant-numeric: tabular-nums; }
.fs-frem-navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-frem-resultat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.fs-frem-resultat.er-ok { color: var(--fs-green-dark); }
.fs-frem-resultat.er-dumpet { color: var(--fs-red); }
/* Fremgang: luft over titlen og en kurve med krop */
.fs-fremgang .fs3-hero { margin-top: clamp(28px, 4.5vh, 56px); }
.fs-kurve-grid { stroke: color-mix(in srgb, var(--fs-text) 10%, transparent); stroke-width: 1; }
.fs-kurve-fyld-top { stop-color: var(--fs-navy); stop-opacity: .16; }
.fs-kurve-fyld-bund { stop-color: var(--fs-navy); stop-opacity: 0; }
.fs-frem-baelte span.er-staerk { background: var(--fs-green); opacity: .8; }
/* Fremgang: kurvetop med periodevælger, sobre kort-ikoner */
.fs-frem-kurvetop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fs-frem-perioder { display: flex; gap: 4px; background: color-mix(in srgb, var(--fs-text) 6%, transparent); border-radius: 999px; padding: 3px; }
.fs-frem-perioder a { padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--fs-text-soft); }
.fs-frem-perioder a.er-valgt { background: var(--fs-surface); color: var(--fs-text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.fs-fremgang .fs3-kort h2 i { color: var(--fs-text-soft); margin-inline-end: 4px; font-size: 15px; }
/* Elevens topnavigation: faste punkter med streg under det aktive — samme
udtryk som skoleportalens */
.fs-topbar-right .fs-link.fs-nav { position: relative; font-weight: 400; }
/* Hover-farven er kundens valg (Design → Topbaren); uden valg er den
tekstfarven, og så sker der ingenting — som før valget fandtes */
.fs-topbar-right .fs-link.fs-nav:hover { text-decoration: none; color: var(--fs-nav-hover, var(--fs-bar-tekst)); }
.fs-nav-mere:hover > .fs-mere-knap { color: var(--fs-nav-hover, var(--fs-bar-tekst)); }
.fs-topbar-right .fs-link.fs-nav.er-aktiv { color: var(--fs-bar-accent); }
.fs-topbar-right a.fs-link.fs-nav.er-aktiv::after {
content: '';
position: absolute;
inset-inline-start: 10px;
inset-inline-end: 10px;
bottom: -6px;
height: 2.5px;
border-radius: 2px;
background: var(--fs-bar-accent);
}
/* Mørk tilstand: den valgte pille i switches skal kunne ses — fladen er
mørk, så pillen løftes med en lys tone i stedet for skygge */
.fs-dark .fs-login-valg { background: color-mix(in srgb, #fff 8%, transparent); }
.fs-dark .fs-frem-perioder { background: color-mix(in srgb, #fff 8%, transparent); }
.fs-dark .fs-frem-perioder a.er-valgt { background: color-mix(in srgb, #fff 16%, transparent); color: var(--fs-text); box-shadow: none; }
/* ══════════ Elevens detaljeside på skoleportalen (fs3-udtryk) ══════════ */
.fs-ed-tilbage { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 10px;
font-size: 13.5px; font-weight: 600; color: var(--fs-text-soft); text-decoration: none; }
.fs-ed-tilbage:hover { color: var(--fs-navy); }
.fs-elevdetalje .fs-elev-hoved { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.fs-elevdetalje .fs3-hero { margin: 0; }
.fs-ed-tal { margin-bottom: 16px; }
.fs-elevdetalje .fs3-kort { margin-bottom: 16px; }
.fs-elevdetalje .fs3-tal.er-klar { color: var(--fs-green-dark); }
.fs-elevdetalje .fs3-tal.er-paa-vej { color: var(--fs-warn, #b97a00); }
.fs-elevdetalje .fs3-tal.er-ikke { color: var(--fs-red); }
.fs-ed-af { font-size: 15px; font-weight: 600; color: var(--fs-text-soft); }
.fs-ed-maaler { display: block; height: 7px; margin-top: 10px; border-radius: 4px;
background: color-mix(in srgb, var(--fs-text) 8%, transparent); overflow: hidden; }
.fs-ed-maaler span { display: block; height: 100%; border-radius: 4px; }
.fs-ed-maaler span.er-klar { background: var(--fs-green); }
.fs-ed-maaler span.er-paa-vej { background: var(--fs-warn, #d99a2b); }
.fs-ed-maaler span.er-ikke { background: var(--fs-red); }
.fs-ed-stabil { display: inline-block; margin: 6px 0 2px; padding: 5px 14px; border-radius: 999px;
font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--fs-text) 7%, transparent); }
.fs-ed-stabil.er-ok { background: color-mix(in srgb, var(--fs-green) 15%, transparent); color: var(--fs-green-dark); }
.fs-ed-stabil.er-svinger { background: color-mix(in srgb, var(--fs-warn, #d99a2b) 16%, transparent); color: var(--fs-warn, #9a6a00); }
.fs-ed-resultater { display: grid; grid-template-columns: 2fr minmax(220px, 1fr); gap: 28px; align-items: end; }
.fs-trend-pct { font-size: 11.5px; font-weight: 600; color: var(--fs-text-soft); }
.fs-ed-statliste div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
border-bottom: 1px solid var(--fs-border); font-size: 14px; }
.fs-ed-statliste div:last-child { border-bottom: 0; }
.fs-ed-statliste span { color: var(--fs-text-soft); }
/* De to kort følges ad i højden — gridet strækker dem til den højeste */
.fs-ed-delt { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: stretch; }
.fs-ed-delt .fs3-kort { margin-bottom: 0; }
.fs-ed-emner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fs-ed-emner h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; }
.fs-ed-orange { color: var(--fs-warn, #b97a00); }
.fs-ed-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px;
border-radius: 10px; font-size: 13.5px; line-height: 1.5;
background: color-mix(in srgb, var(--fs-green) 10%, transparent); color: var(--fs-green-dark); }
.fs-ed-akt { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 24px; align-items: start; }
.fs-ed-delta { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; }
.fs-ed-delta.er-op { color: var(--fs-green-dark); }
.fs-ed-delta.er-ned { color: var(--fs-red); }
.fs-ed-samlet { display: block; margin-top: 16px; }
.fs-ed-samlet-tal { font-size: 20px; font-weight: 700; }
/* Kurvens måleinstrument-lag: akse-tal i venstre kant og beståelsesgrænsen
som stiplet linje — punkterne farves efter, om ugen lå over eller under */
.fs-kurve-akse { font-size: 10px; fill: var(--fs-text-soft); }
.fs-kurve-akse.er-graense { font-size: 9.5px; opacity: .85; }
.fs-kurve-graense { stroke: color-mix(in srgb, var(--fs-text) 32%, transparent); stroke-width: 1; stroke-dasharray: 5 4; }
.fs-ed-akt-foer { font-size: 12.5px; color: var(--fs-text-soft); }
.fs-ed-fejltrend { margin: 2px 0 0; font-size: 13px; color: var(--fs-text-soft); }
.fs-ed-frem { margin: 6px 0 0; font-size: 13.5px; color: var(--fs-text-soft); }
.fs-ed-frem strong { font-size: 18px; margin-inline-end: 6px; }
.fs-ed-frem.er-op strong { color: var(--fs-green-dark); }
.fs-ed-frem.er-ned strong { color: var(--fs-red); }
@media (max-width: 860px) {
.fs-ed-resultater, .fs-ed-akt, .fs-ed-emner { grid-template-columns: 1fr; }
}
/* Elevdetaljens resultatsøjler: tætte og brede — de skal bære kortet */
.fs-ed-trend { height: 190px; padding: 20px 0 8px; margin-bottom: 0; gap: 12px; background: none; }
.fs-ed-trend .fs-trend-soejle { flex: 1 1 0; width: auto; max-width: 64px; min-width: 34px; gap: 5px; }
/* Er der flere prøver, end kortet er bredt til, ruller båndet vandret i
stedet for at mase søjlerne ulæseligt sammen — hver søjle beholder sin
mindstebredde, og JS stiller båndet ved de nyeste prøver */
.fs-ed-trend { overflow-x: auto; overflow-y: hidden; }
.fs-ed-trend .fs-trend-bar { max-width: 46px; border-radius: 7px 7px 3px 3px; }
/* Tæt pakning ved mange søjler: alt skal stadig kunne læses, så procenten
og datoen bliver stående på hver søjle — bare i mindre skrift */
.fs-ed-trend.er-taet { gap: 6px; }
.fs-ed-trend.er-taet .fs-trend-pct { font-size: 10.5px; }
.fs-ed-trend.er-taet .fs-trend-navn { font-size: 10px; }
/* Aktivitet og udvikling: to rolige talblokke med skillelinje mod kurven */
.fs-ed-akt-tal { display: flex; flex-direction: column; gap: 20px; padding-inline-end: 24px;
border-inline-end: 1px solid var(--fs-border); }
.fs-ed-akt-blok .fs3-kort-titel { margin-bottom: 4px; }
@media (max-width: 860px) {
.fs-ed-akt-tal { border-inline-end: 0; padding-inline-end: 0; flex-direction: row; gap: 32px; }
}
/* Hele prøvehistorikken: en rigtig knap med luft */
/* Samme luft over knappen som mellem kortene — den hører til siden,
ikke til kortet ovenover */
.fs-historik-fold { margin: 16px 0 8px; }
/* ════════ Teoriundervisning hos eleven ════════
Lektions- og gruppekortene følger husets kort-sprog, og ikonerne er
CSS-masker i designets farver — aldrig spraglede gradienter. */
/* Aldrig mere end tre på en række, når kunden ikke selv har valgt et tal
(max() gør, at kolonnen aldrig bliver smallere end en tredjedel), og alle
kort i nettet er lige høje (grid-auto-rows: 1fr) — før voksede det kort,
der havde den længste titel, og rækken så skæv ud (Martin, 12. sep).
Kortet er 16:9, og align-self: stretch er nødvendig: for et element med
aspect-ratio opfører 'normal' sig som 'start', så kortene blev IKKE
strukket til rækkens højde uden den. */
.fs-uv-net { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 32px) / 3)), 1fr)); gap: 16px; grid-auto-rows: 1fr; }
.fs-uv-kort {
position: relative; display: flex; flex-direction: column; gap: 6px;
background: var(--fs-surface); border-radius: var(--fs-radius);
padding: 26px; aspect-ratio: 16 / 9; align-self: stretch; justify-content: flex-end;
text-decoration: none; color: var(--fs-text);
transition: transform .15s ease, box-shadow .15s ease;
}
.fs-uv-kort:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.fs-uv-kort-ikon {
display: block; width: 48px; height: 48px; background: var(--fs-navy);
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
margin-bottom: 12px;
}
/* Lektionsnummeret: en lille overlinje over navnet, i designets farve som
ikonet. Den negative margen spiser kortets 6px gab, så nummeret hører
til titlen og ikke svæver midt imellem ikonet og navnet. */
.fs-uv-kort-nr {
font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
line-height: 1.2; color: var(--fs-navy); margin-bottom: -2px;
}
.fs-uv-kort-navn { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.fs-uv-kort-linje { font-size: 13.5px; color: var(--fs-text-soft); }
.fs-uv-kort-pil {
position: absolute; inset-inline-end: 18px; bottom: 18px; width: 34px; height: 34px;
border-radius: 50%; background: color-mix(in srgb, var(--fs-navy) 10%, transparent);
color: var(--fs-navy); display: flex; align-items: center; justify-content: center;
}
.fs-uv-kort:hover .fs-uv-kort-pil { background: var(--fs-navy); color: var(--fs-accent-text); }
/* Liste-skabelonen: én pr. række, ikonet til venstre */
.fs-uv-tpl-liste .fs-uv-net { grid-template-columns: 1fr; gap: 10px; }
.fs-uv-tpl-liste .fs-uv-kort { flex-direction: row; align-items: center; gap: 18px; aspect-ratio: auto; padding: 18px 60px 18px 22px; }
.fs-uv-tpl-liste .fs-uv-kort-ikon { width: 30px; height: 30px; margin-bottom: 0; flex: 0 0 auto; }
/* På rækken kan nummeret ikke stå OVER navnet — så får det sin egen smalle
kolonne mellem ikonet og titlen, og numrene flugter ned over listen. */
.fs-uv-tpl-liste .fs-uv-kort-nr {
/* Bred nok til, at også et sammensat nummer ("0 + 10.1") holder sig
inden for kolonnen — så starter alle titlerne samme sted */
flex: 0 0 auto; min-width: 58px; margin: 0; font-size: 14px;
letter-spacing: 0.02em; white-space: nowrap;
}
.fs-uv-tpl-liste .fs-uv-kort-navn { font-size: 17px; letter-spacing: 0; flex: 1; min-width: 0; }
.fs-uv-tpl-liste .fs-uv-kort-linje { white-space: nowrap; }
/* På telefonen er rækken smal nok i forvejen: nummeret beholder sin plads,
men ikke sin kolonnebredde. Titlerne flugter ikke længere — til gengæld
bliver de stående på skærmen. */
@media (max-width: 560px) {
.fs-uv-tpl-liste .fs-uv-kort { gap: 12px; }
.fs-uv-tpl-liste .fs-uv-kort-nr { min-width: 0; }
}
.fs-uv-tpl-liste .fs-uv-kort-pil { top: 50%; transform: translateY(-50%); bottom: auto; }
/* Sidens egne valg: fast kolonnetal (listen viser altid én pr. række) og
bredde, der kan overstyre det generelle valg begge veje */
.fs-uv-kol-fast:not(.fs-uv-tpl-liste) .fs-uv-net { grid-template-columns: repeat(var(--fs-uv-kol, 3), minmax(0, 1fr)); }
.fs-uv-bred { --fs-maxw: 100%; }
.fs-uv-smal { --fs-maxw: 2200px; }
/* Flise-skabelonen: kompakt og centreret */
.fs-uv-tpl-fliser .fs-uv-net { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.fs-uv-tpl-fliser .fs-uv-kort { align-items: center; text-align: center; justify-content: center; aspect-ratio: 16 / 9; padding: 24px 18px; gap: 8px; }
.fs-uv-tpl-fliser .fs-uv-kort-ikon { margin: 0 0 4px; }
.fs-uv-tpl-fliser .fs-uv-kort-nr { font-size: 12px; margin-bottom: -3px; }
.fs-uv-tpl-fliser .fs-uv-kort-navn { font-size: 19px; }
.fs-uv-tpl-fliser .fs-uv-kort-pil { display: none; }
/* Lektionssiden: videoerne. 'stak' er grundformen. */
.fs-uv-videoer { display: grid; gap: 24px; max-width: 980px; }
.fs-uv-video { background: var(--fs-surface); border-radius: var(--fs-radius); padding: 22px 22px 18px; }
.fs-uv-video-hoved h3 { margin: 0 0 4px; font-size: 19px; }
.fs-uv-video-hoved p { margin: 0 0 14px; font-size: 14.5px; color: var(--fs-text-soft); }
.fs-uv-ramme { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.fs-uv-ramme iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Side om side: to deler bredden på store skærme */
.fs-uvl-tpl-side .fs-uv-videoer { max-width: none; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
/* Stor først: den første i fuld bredde, resten halv */
.fs-uvl-tpl-stor .fs-uv-videoer { max-width: none; grid-template-columns: 1fr 1fr; }
.fs-uvl-tpl-stor .fs-uv-video:first-child { grid-column: 1 / -1; }
@media (max-width: 900px) {
.fs-uvl-tpl-side .fs-uv-videoer,
.fs-uvl-tpl-stor .fs-uv-videoer { grid-template-columns: 1fr; }
}
/* Videostatistikken på skolens elevdetalje */
.fs-uvstat-lektion { font-size: 12px; color: var(--fs-text-soft); }
.fs-uvstat-igang { color: var(--fs-warn); font-weight: 600; }
.fs-uvstat-ikke { color: var(--fs-text-soft); }
/* ════════ Topbarens pladslogik ════════
Navnet er en lille menu (Profil/Log ud), navigationen folder overskydende
punkter ind under "Mere", og under 860px tager burgeren over med sektioner.
Blokken står sidst i filen, så den vinder over grundreglerne. */
/* Navnemenuen: navnet + pil åbner Profil og Log ud på hover */
.fs-navn-drop { position: relative; display: inline-flex; }
.fs-navn-knap { border: 0; background: none; padding: 0; font: inherit; color: inherit;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fs-navn-knap i { font-size: 11px; color: var(--fs-text-soft); }
/* Meget lange navne må ikke skubbe navigationen ud af bjælken */
.fs-navn-knap strong { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Menuteksten flugter med navnets første bogstav: menu-luft 6 + punkt-luft 12 + kant 1 */
.fs-navn-drop .fs-drop-menu { inset-inline-start: -19px; inset-inline-end: auto; transform: none; }
.fs-drop-menu form { display: contents; }
.fs-drop-menu button { padding: 9px 12px; border-radius: 8px; border: 0; background: none;
font: inherit; font-size: 14px; color: inherit; cursor: pointer; text-align: start;
display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fs-drop-menu button:hover { background: var(--fs-field-bg); }
.fs-drop-menu a { display: flex; align-items: center; gap: 8px; }
/* Broen mellem udløser og menu skal ligge øverst i bunken — ellers stjæler
dage-linjen under navnet hover-punktet på vejen ned, og menuen smækker i */
.fs-drop::after { z-index: 59; }
/* Mere-punktet: samme udtryk som nav-punkterne, med pil */
.fs-mere-knap { border: 0; background: none; font: inherit; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; }
.fs-mere-knap i { font-size: 11px; }
.fs-nav-mere .fs-drop-menu { inset-inline-start: auto; inset-inline-end: 0; transform: none; }
.fs-nav-mere .fs-drop-menu .fs-nav { display: flex; padding: 9px 12px; border-radius: 8px;
font-size: 14px; white-space: nowrap; }
/* Stregen hører til i bjælken, ikke i en lodret liste — dér ser den ud
som en fejl. 'a' skal med: reglen, der TEGNER stregen, hedder
'a.fs-link.fs-nav.er-aktiv::after' og har et element mere end den her,
så den vandt, selv om den står før. Inde i menuen er fed skrift
markeringen; punkterne står under hinanden, så bredden er ligegyldig. */
.fs-nav-mere .fs-drop-menu a.fs-nav.er-aktiv::after,
.fs-nav-aktiv-pille .fs-nav-mere .fs-drop-menu a.fs-nav.er-aktiv::after { content: none; }
.fs-nav-mere .fs-drop-menu .fs-nav.er-aktiv { font-weight: 600; }
/* Samme grund: "Mere" må ikke blive bredere, fordi det aktive punkt
ligger gemt inde i den */
.fs-nav-mere.er-aktiv > .fs-mere-knap { color: var(--fs-bar-accent); }
/* Etiketterne findes kun i burger-menuen */
.fs-menu-etiket { display: none; }
/* Lange kategorinavne klippes i pillen — i menuen står de fuldt ud */
.fs-kat-navn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
@media (min-width: 861px) {
/* Profil og Log ud bor i navnemenuen på desktop — burger-rækkerne gemmes */
.fs-topbar-elev .fs-logud-mobil, .fs-topbar-elev .fs-profil-mobil { display: none; }
/* Intet i bjælken må knække linje — pladsmangel skal ende i Mere,
ikke i flerlinjede punkter, og logoet skrumper ikke */
.fs-topbar-elev .fs-topbar-right .fs-link.fs-nav { white-space: nowrap; }
.fs-topbar-elev .fs-logo-sub { white-space: nowrap; }
.fs-topbar-elev .fs-logo { flex-shrink: 0; }
/* Luft mellem navnet og navigationen. Uden den kunne de to blokke stå
og klemme hinanden uden at bjælken teknisk løb over — og så trådte
Mere aldrig til. Med en fast afstand bliver det til et rigtigt
overløb, og pladspasseren folder punkter ind, som den skal. */
.fs-topbar-elev .fs-topbar-right { margin-inline-start: 44px; }
}
/* ── Burger-tilstand (til og med 860px — tidligere end de andre bjælker,
for med undervisningsvideoer i menuen er der ikke plads før) ── */
@media (max-width: 860px) {
.fs-topbar-elev { gap: 10px; }
.fs-topbar-elev .fs-logo { gap: 10px; flex: 1 1 auto; min-width: 0; }
.fs-topbar-elev .fs-logo-img { height: 44px; max-width: 160px; }
.fs-topbar-elev .fs-logo-text { min-width: 0; }
.fs-topbar-elev .fs-logo-text strong { font-size: 15px; display: block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
/* Dagene bliver stående under navnet — også her. De må ombryde: der er
ikke bredde til "364 dage tilbage" og linket på samme linje ved siden
af logoet, og klippet tekst ville skjule netop det, der skal ses.
Linjen står i burgeren samtidig; det er med vilje, for den, der har
menuen åben, skal kunne købe uden at lukke den igen. */
.fs-topbar-elev .fs-logo-sub { display: block; font-size: 11px; line-height: 1.4; }
.fs-topbar-elev.fs-dage-knap .fs-logo-sub a {
font-size: 10px; padding: 3px 8px; margin: 1px 0 0 3px; }
.fs-topbar-elev .fs-burger,
.fs-topbar-proeve .fs-burger { display: inline-flex; }
/* … og først her, hvor burgeren findes, giver de mening */
.fs-kun-menu { display: inline-flex; }
/* Vejen tilbage fra resultatet står fremme ved siden af burgeren — lå den
kun i menuen, fandt folk den ikke, og siden føltes som en blindgyde.
Teksten klippes væk, når der ikke er plads; pilen alene er tydelig nok,
og det fulde punkt står stadig inde i menuen. */
.fs-resultat-tilbage { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fs-resultat-tilbage i { font-size: 18px; }
.fs-topbar-elev .fs-topbar-right,
.fs-topbar-proeve .fs-topbar-right {
position: fixed; top: var(--fs-bar-h); inset-inline-start: 0; inset-inline-end: 0;
display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
background: var(--fs-topbar); padding: 10px var(--fs-hjoerne) 18px;
box-shadow: 0 20px 36px rgba(0, 0, 0, 0.18);
border-top: 1px solid rgba(128, 128, 128, 0.14);
z-index: 240; max-height: calc(100vh - var(--fs-bar-h)); overflow-y: auto;
}
.fs-topbar-elev .fs-topbar-right.er-aaben,
.fs-topbar-proeve .fs-topbar-right.er-aaben { display: flex; }
/* Værktøjsbakken sidder nederst i panelet, så dens menuer åbner OPAD —
og et panel med overflow-y: auto klipper alt uden for sin kant, også
opad. Sproget kunne derfor vælges, men aldrig vælges tilbage: Dansk lå
øverst og var skåret væk. Mens en menu er åben, klipper panelet ikke;
menuen har z-index over topbaren og må gerne lægge sig hen over den. */
.fs-topbar-elev .fs-topbar-right:has(.fs-drop.er-aaben),
.fs-topbar-proeve .fs-topbar-right:has(.fs-drop.er-aaben) { overflow: visible; }
.fs-topbar-elev .fs-topbar-right .fs-link,
.fs-topbar-proeve .fs-topbar-right .fs-link { display: flex; align-items: center; gap: 14px;
width: 100%; padding: 14px 0; font-size: 16.5px; justify-content: flex-start;
text-decoration: none; }
.fs-topbar-elev .fs-topbar-right .fs-link:hover,
.fs-topbar-proeve .fs-topbar-right .fs-link:hover { text-decoration: none; }
.fs-topbar-elev .fs-topbar-right .fs-link i,
.fs-topbar-proeve .fs-topbar-right .fs-link i { width: 24px; min-width: 24px; font-size: 18px;
display: inline-flex; justify-content: center; }
.fs-topbar-elev .fs-topbar-right form:not(.fs-sprog),
.fs-topbar-proeve .fs-topbar-right form:not(.fs-sprog) { display: contents; }
.fs-topbar-elev .fs-menu-dage { display: block; color: var(--fs-text-soft);
padding: 12px 0 14px; font-size: 15px;
border-bottom: 1px solid rgba(128, 128, 128, 0.14); margin-bottom: 4px; }
/* Navnemenuen findes ikke i burger-tilstand — profilen har sin egen række,
og navnet er bare et navn (et tryk åbner stadig profilvinduet) */
.fs-topbar-elev .fs-navn-drop { display: inline-flex; }
.fs-topbar-elev .fs-navn-drop .fs-drop-menu { display: none !important; }
.fs-topbar-elev .fs-navn-knap i { display: none; }
.fs-topbar-elev .fs-nav-mere { display: none !important; }
/* Aktivt punkt: fed er nok — ingen understregning og ingen pynt */
.fs-topbar-elev .fs-topbar-right .fs-link.fs-nav.er-aktiv::after,
.fs-topbar-proeve .fs-topbar-right .fs-link.fs-nav.er-aktiv::after { content: none; }
.fs-topbar-elev .fs-topbar-right .fs-link.fs-nav.er-aktiv,
.fs-topbar-proeve .fs-topbar-right .fs-link.fs-nav.er-aktiv { font-weight: 700; }
/* Din profil og Log ud: egen lille sektion under en skillelinje */
.fs-topbar-elev .fs-profil-mobil { border-top: 1px solid rgba(128, 128, 128, 0.16);
margin-top: 8px; padding-top: 16px; }
.fs-topbar-elev .fs-logud-mobil .fs-link { padding-top: 6px; }
/* Dage-linjens link skal have husets blå — ikke browserens lilla */
.fs-topbar-elev .fs-menu-dage a { color: var(--fs-bar-accent); }
/* Kategori, sprog og tema: samme værktøjsbakke som på desktop, bare i
fuld bredde nederst i menuen. Valgene åbner som dropdowns på tryk —
kunder med mange kategorier og ti sprog kan ikke være der som chips. */
.fs-topbar-elev .fs-menu-vaerktoej,
.fs-topbar-proeve .fs-menu-vaerktoej { display: flex; align-items: center; gap: 9px;
margin-top: 16px; padding: 6px 12px 6px 8px; border-radius: 999px;
/* indholdet bestemmer bredden — fuld bredde så tom og sjov ud */
width: max-content; max-width: 100%; align-self: flex-start;
background: color-mix(in srgb, var(--fs-text) 6%, transparent); }
.fs-topbar-elev .fs-menu-vaerktoej .fs-drop,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-drop { display: inline-flex; position: relative; }
.fs-topbar-elev .fs-menu-vaerktoej .fs-drop > .fs-drop-knap,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-drop > .fs-drop-knap { display: inline-flex; }
.fs-topbar-elev .fs-menu-vaerktoej .fs-kat-drop,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-kat-drop { margin: 0; }
.fs-topbar-elev .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
background: none; border: 0; border-radius: 999px; padding: 8px 15px;
font-weight: 400; box-shadow: none; color: var(--fs-text-soft); }
.fs-topbar-elev .fs-menu-vaerktoej .fs-sprog,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-sprog { position: relative; inset: auto;
width: auto; flex: 0 1 auto; justify-content: flex-start; }
.fs-topbar-elev .fs-menu-vaerktoej .fs-tema,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema { position: static; }
/* Baggrunden tørres af, så knappen ikke dobler op mod BAKKEN. Er bakken
slået fra, er der ikke noget at støde sammen med — og så skal
stilarten se ud, som den er tegnet. Kontakten mistede sin skinne på
oversigten, login og køb, mens den beholdt den inde i prøven. */
.fs-topbar-elev:not(.fs-flade-fri) .fs-menu-vaerktoej .fs-tema,
.fs-topbar-proeve:not(.fs-flade-fri) .fs-menu-vaerktoej .fs-tema {
box-shadow: none; background: none; }
/* Menuerne åbner OPAD — panelet er en rulleflade, og nedad klippes de */
.fs-topbar-elev .fs-menu-vaerktoej .fs-drop-menu,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-drop-menu { position: absolute; top: auto;
bottom: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: auto; transform: none;
max-height: 45vh; overflow-y: auto;
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 12px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); padding: 6px; min-width: 160px;
/* grundreglen for burgeren sætter display: flex — her styrer trykket */
display: none; flex-direction: column; }
}
/* ── Prøvens bjælke: burger allerede fra 1200 px ──
Uret, navnet med undertitel, Spørgsmålsoversigt, Afslut og bakken med
sprog og sol lagde sig oven i hinanden under 1200 (set 11.-12. sep;
først sat til 980, hævet dagen efter). Reglerne herunder er de samme som
elevens burger-tilstand ovenfor, kun for prøvens bjælke og med et
tidligere brudpunkt; elevens egen bjælke bliver ved 860. Undertitlen
under prøvens navn er væk i hele burger-tilstanden — den var det, der
først løb ind i uret. Blokken er bygget af 860-blokken med et script,
så retter man noget deroppe, skal det rettes her også. */
@media (max-width: 1200px) {
.fs-topbar-proeve .fs-logo-sub { display: none; }
.fs-topbar-proeve .fs-logo { max-width: none; margin-inline-end: 8px; }
.fs-topbar-proeve .fs-burger { display: inline-flex; }
.fs-topbar-proeve .fs-kun-menu { display: inline-flex; }
.fs-topbar-proeve .fs-resultat-tilbage { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.fs-topbar-proeve .fs-resultat-tilbage i { font-size: 18px; }
.fs-topbar-proeve .fs-topbar-right {
position: fixed; top: var(--fs-bar-h); inset-inline-start: 0; inset-inline-end: 0;
display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
background: var(--fs-topbar); padding: 10px var(--fs-hjoerne) 18px;
box-shadow: 0 20px 36px rgba(0, 0, 0, 0.18);
border-top: 1px solid rgba(128, 128, 128, 0.14);
z-index: 240; max-height: calc(100vh - var(--fs-bar-h)); overflow-y: auto;
}
.fs-topbar-proeve .fs-topbar-right.er-aaben { display: flex; }
.fs-topbar-proeve .fs-topbar-right:has(.fs-drop.er-aaben) { overflow: visible; }
.fs-topbar-proeve .fs-topbar-right .fs-link { display: flex; align-items: center; gap: 14px;
width: 100%; padding: 14px 0; font-size: 16.5px; justify-content: flex-start;
text-decoration: none; }
.fs-topbar-proeve .fs-topbar-right .fs-link:hover { text-decoration: none; }
.fs-topbar-proeve .fs-topbar-right .fs-link i { width: 24px; min-width: 24px; font-size: 18px;
display: inline-flex; justify-content: center; }
.fs-topbar-proeve .fs-topbar-right form:not(.fs-sprog) { display: contents; }
.fs-topbar-proeve .fs-topbar-right .fs-link.fs-nav.er-aktiv::after { content: none; }
.fs-topbar-proeve .fs-topbar-right .fs-link.fs-nav.er-aktiv { font-weight: 700; }
.fs-topbar-proeve .fs-menu-vaerktoej { display: flex; align-items: center; gap: 9px;
margin-top: 16px; padding: 6px 12px 6px 8px; border-radius: 999px;
/* indholdet bestemmer bredden — fuld bredde så tom og sjov ud */
width: max-content; max-width: 100%; align-self: flex-start;
background: color-mix(in srgb, var(--fs-text) 6%, transparent); }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-drop { display: inline-flex; position: relative; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-drop > .fs-drop-knap { display: inline-flex; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-kat-drop { margin: 0; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
background: none; border: 0; border-radius: 999px; padding: 8px 15px;
font-weight: 400; box-shadow: none; color: var(--fs-text-soft); }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-sprog { position: relative; inset: auto;
width: auto; flex: 0 1 auto; justify-content: flex-start; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema { position: static; }
.fs-topbar-proeve:not(.fs-flade-fri) .fs-menu-vaerktoej .fs-tema {
box-shadow: none; background: none; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-drop-menu { position: absolute; top: auto;
bottom: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: auto; transform: none;
max-height: 45vh; overflow-y: auto;
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 12px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); padding: 6px; min-width: 160px;
/* grundreglen for burgeren sætter display: flex — her styrer trykket */
display: none; flex-direction: column; }
}
/* På en telefon er der ikke plads til både prøvens navn og hele teksten på
tilbage-linket. Pilen alene siger det; det fulde punkt står i menuen.
Reglen ligger EFTER 860px-blokken — den må ikke deles ind i den. */
@media (max-width: 600px) {
.fs-resultat-tilbage span { display: none; }
.fs-resultat-tilbage { padding: 8px; }
.fs-resultat-tilbage i { font-size: 21px; }
}
/* Værktøjsbakken på desktop: kategori, sprog og tema samlet på én lys
bakke — samme sprog som periodevælgerens piller. Kun elevernes topbar:
skolens bjælke har sine egne regler. */
@media (min-width: 861px) {
.fs-topbar-elev .fs-topbar-right .fs-menu-vaerktoej {
display: flex; align-items: center; gap: 7px;
background: color-mix(in srgb, var(--fs-text) 6%, transparent);
border-radius: var(--fs-radius-bar); padding: 4px;
}
.fs-topbar-elev .fs-menu-vaerktoej .fs-sprog,
.fs-topbar-elev .fs-menu-vaerktoej .fs-tema { position: static; }
/* Baggrunden tørres af, så knappen ikke dobler op mod BAKKEN. Er bakken
slået fra, er der ikke noget at støde sammen med — og så skal
stilarten se ud, som den er tegnet. Kontakten mistede sin skinne på
oversigten, login og køb, mens den beholdt den inde i prøven. */
.fs-topbar-elev:not(.fs-flade-fri) .fs-menu-vaerktoej .fs-tema { box-shadow: none; background: none; }
/* Kategori, sprog og sol står ens i bakken — se begrundelsen nedenfor */
.fs-topbar-elev .fs-menu-vaerktoej .fs-kat-drop .fs-drop-knap {
/* Neutral som sprogvælgeren: bakken er rammen om dem begge, og et
hævet felt inde i den gav hverken mening i lyst eller mørkt tema —
hvidt på hvidt i lyst, skarpt oplyst i mørkt. Den fede skrift
bliver, så valget stadig kan ses. Og bjælkens eneste hævede felt
skal være købsknappen, ikke en vælger. */
background: none; border: 0; border-radius: var(--fs-radius-bar);
/* mindre luft foran teksten — 15px til venstre så tung ud */
padding: 8px 13px 8px 12px;
/* Samme vægt og samme dæmpede tone som sprogvælgeren — --fs-text
lyser skarpt hvidt i mørkt tema og skreg ved siden af "Dansk" */
box-shadow: none; font-weight: 400; color: var(--fs-text-soft); }
.fs-topbar-elev .fs-menu-vaerktoej .fs-kat-drop .fs-drop-knap:hover {
background: color-mix(in srgb, var(--fs-text) 10%, transparent); }
.fs-topbar-elev .fs-menu-vaerktoej .fs-sprog .fs-drop-knap { background: none; border: 0; }
/* Menuerne hænger under deres egen knap — hjørnets fixed-regel gælder
ikke i bakken, og teksterne flugter med knappens tekst */
/* relative og ikke static: menuen skal forankres i knappen — men
hjørne-reglens top/right-offsets skal nulstilles, ellers skubbes den */
.fs-topbar-elev .fs-menu-vaerktoej .fs-sprog.fs-drop { position: relative; inset: auto; }
.fs-topbar-elev .fs-menu-vaerktoej .fs-kat-drop .fs-drop-menu { inset-inline-start: -7px; inset-inline-end: auto; }
.fs-topbar-elev .fs-menu-vaerktoej .fs-sprog .fs-drop-menu { inset-inline-start: 12px; inset-inline-end: auto; }
}
/* Prøvens bakke på desktop — først fra 1201 px, hvor burgeren er væk.
Bygget af 861-blokken ovenfor: samme regler, kun prøvens bjælke. */
@media (min-width: 1201px) {
.fs-topbar-proeve .fs-topbar-right .fs-menu-vaerktoej {
display: flex; align-items: center; gap: 7px;
background: color-mix(in srgb, var(--fs-text) 6%, transparent);
border-radius: var(--fs-radius-bar); padding: 4px;
}
.fs-topbar-proeve .fs-menu-vaerktoej .fs-sprog,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema { position: static; }
.fs-topbar-proeve:not(.fs-flade-fri) .fs-menu-vaerktoej .fs-tema { box-shadow: none; background: none; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-kat-drop .fs-drop-knap {
/* Neutral som sprogvælgeren: bakken er rammen om dem begge, og et
hævet felt inde i den gav hverken mening i lyst eller mørkt tema —
hvidt på hvidt i lyst, skarpt oplyst i mørkt. Den fede skrift
bliver, så valget stadig kan ses. Og bjælkens eneste hævede felt
skal være købsknappen, ikke en vælger. */
background: none; border: 0; border-radius: var(--fs-radius-bar);
/* mindre luft foran teksten — 15px til venstre så tung ud */
padding: 8px 13px 8px 12px;
/* Samme vægt og samme dæmpede tone som sprogvælgeren — --fs-text
lyser skarpt hvidt i mørkt tema og skreg ved siden af "Dansk" */
box-shadow: none; font-weight: 400; color: var(--fs-text-soft); }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-kat-drop .fs-drop-knap:hover {
background: color-mix(in srgb, var(--fs-text) 10%, transparent); }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-sprog .fs-drop-knap { background: none; border: 0; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-sprog.fs-drop { position: relative; inset: auto; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-kat-drop .fs-drop-menu { inset-inline-start: -7px; inset-inline-end: auto; }
.fs-topbar-proeve .fs-menu-vaerktoej .fs-sprog .fs-drop-menu { inset-inline-start: 12px; inset-inline-end: auto; }
}
/* Sløret baggrund bag profilvinduet — og gemt-kvitteringen ved knappen */
.fs-modal-backdrop.fs-sloer { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fs-profil-gemt { display: inline-flex; align-items: center; gap: 6px;
color: var(--fs-green-dark); font-weight: 600; font-size: 14.5px; }
/* ── Uv-oversigten på smallere skærme: mindre titler, og det faste
kolonnevalg viger for automatisk, så kortene forbliver læselige ── */
@media (max-width: 1500px) {
.fs-uv-kort-navn { font-size: 21px; }
}
@media (max-width: 1280px) {
.fs-uv-kort-navn { font-size: 19px; }
.fs-uv-kol-fast:not(.fs-uv-tpl-liste) .fs-uv-net { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
/* Lektionssiden: luften over hører til sektioner MELLEM hinanden — sidens
titel skal ikke stå en tredjedel nede ad skærmen */
.fs-uv-lektion .fs-ed-tilbage { margin-top: 18px; }
.fs-uv-lektion .fs-ed-tilbage + .fs-group-head { padding-top: clamp(22px, 2.4vw, 40px); }
/* Nummeret over lektionens titel — samme overlinje som på kortet, blot i
sidens større skala */
.fs-uv-lek-nr {
font-size: clamp(14px, 1vw, 17px); font-weight: 700; letter-spacing: 0.06em;
color: var(--fs-navy); margin-bottom: clamp(6px, 0.6vw, 10px);
}
/* ── Profilvinduet: alt venstrestillet, og adgangen står med i vinduet ── */
.fs-profil-modal .fs-portal-modal-kort { text-align: start; }
.fs-profil-modal .fs-byg-hint { text-align: start; }
.fs-profil-modal .fs-field span { text-align: start; }
.fs-profil-modal p.fs-profil-adgang { display: flex; align-items: flex-start; gap: 9px;
background: var(--fs-field-bg); border-radius: 10px; padding: 11px 14px;
font-size: 14px; line-height: 1.5; margin: 0 0 16px;
/* .fs-modal p sætter pre-line — kildens linjeskift er ikke indhold her */
white-space: normal; }
.fs-profil-adgang i { color: var(--fs-text-soft); }
/* Bliver der smalt, ombryder dage-delen som helhed og flugter med
teksten — ikke med uret */
.fs-profil-adgang-tekst { display: flex; flex-wrap: wrap; column-gap: 10px; }
.fs-profil-adgang-tekst > span:first-child { white-space: normal; }
.fs-profil-adgang-tekst strong,
.fs-profil-adgang-kl { white-space: nowrap; }
.fs-profil-adgang a { color: var(--fs-navy); white-space: nowrap; }
.fs-profil-knapper { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
/* Dropdowns på tryk (burgerens bakke har ingen hover) — scriptet sætter
er-aaben, og udenfor-klik lukker igen.
Prøven og resultatsiden SKAL være med. De sætter display: none på
bakkens menuer og lader trykket styre — men uden en åbne-regel skete der
ingenting, og så kunne sproget slet ikke skiftes derinde på en telefon.
Elevfronten, skoleportalen og den frie værktøjsbakke havde hver sin
regel; prøven manglede. */
.fs-topbar-elev .fs-drop.er-aaben > .fs-drop-menu,
.fs-topbar-proeve .fs-drop.er-aaben > .fs-drop-menu { display: flex; }
/* ════════ Profilvinduets skabeloner ════════ */
/* Profilkort: alt midtstillet */
.fs-profil-tpl-kort .fs-portal-modal-kort { max-width: 440px; }
.fs-profil-tpl-kort .fs-portal-modal-hoved { margin-bottom: 6px; }
.fs-profil-tpl-kort .fs-portal-modal-hoved h3 { flex: 1; text-align: center; padding-inline-start: 28px; }
.fs-profil-tpl-kort .fs-byg-hint { text-align: center; }
.fs-profil-tpl-kort .fs-profil-modal .fs-field span { text-align: start; }
.fs-profil-tpl-kort .fs-profil-adgang { justify-content: center; }
.fs-profil-tpl-kort .fs-profil-knapper { justify-content: center; }
/* To spalter: bredt vindue, tekst og adgang til venstre, felterne til højre */
.fs-profil-tpl-bred .fs-portal-modal-kort:has(.fs-profil-adgang) { max-width: 800px;
display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 34px;
align-content: start; }
.fs-profil-tpl-bred .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-portal-modal-hoved { grid-column: 1 / -1; }
.fs-profil-tpl-bred .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-byg-hint { grid-column: 1; grid-row: 2; }
.fs-profil-tpl-bred .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-profil-adgang { grid-column: 1; grid-row: 3;
align-self: start; }
.fs-profil-tpl-bred .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-profil-adgang-tekst { flex-direction: column; }
.fs-profil-tpl-bred .fs-portal-modal-kort:has(.fs-profil-adgang) [data-profil-form] { grid-column: 2; grid-row: 2 / span 2; }
/* Adgangspanel: adgangen som tonet søjle i venstre side */
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) { max-width: 760px;
display: grid; grid-template-columns: 274px minmax(0, 1fr); column-gap: 30px;
align-content: start; }
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-portal-modal-hoved { grid-column: 1 / -1; }
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-byg-hint { grid-column: 2; grid-row: 2; margin-top: 2px; }
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-profil-adgang { grid-column: 1; grid-row: 2 / span 2;
align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin: 0;
padding: 18px 16px; border-radius: 12px;
background: color-mix(in srgb, var(--fs-navy) 9%, var(--fs-surface)); }
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-profil-adgang i { font-size: 22px; color: var(--fs-navy); }
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-profil-adgang-tekst { flex-direction: column; gap: 2px; }
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) [data-profil-form] { grid-column: 2; grid-row: 3; }
/* På smalle skærme falder begge todelte skabeloner tilbage til stakken */
@media (max-width: 700px) {
.fs-profil-tpl-bred .fs-portal-modal-kort:has(.fs-profil-adgang),
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) { display: block; max-width: 520px; }
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-profil-adgang { display: flex;
flex-direction: row; margin: 0 0 16px; padding: 11px 14px; }
.fs-profil-tpl-panel .fs-portal-modal-kort:has(.fs-profil-adgang) .fs-profil-adgang i { font-size: 16px; }
}
/* ════════ Topbarens sammensætning ════════ */
/* Alt, der er en pille i bjælken, er lige højt: det aktive punkt som
pille eller tonet flade, punkterne som knapper, købsknappen i begge
udgaver og bakken med sprog og sol. Bakken er 42 px (34 px knapper og
4 px luft), og resten måles op til det samme; før var den tonede label
38,5, den fyldte knap 38 og kanten 41,5 — set side om side 11. sep. */
.fs-topbar-elev { --fs-pille-h: 42px; }
@media (min-width: 861px) {
.fs-nav-aktiv-pille .fs-topbar-right a.fs-nav,
.fs-nav-aktiv-tone .fs-topbar-right a.fs-nav,
.fs-nav-stil-knap .fs-topbar-right > a.fs-nav,
.fs-cta-fyldt .fs-topbar-right > a.fs-cta-knap,
.fs-cta-kant .fs-topbar-right > a.fs-cta-knap {
box-sizing: border-box; min-height: var(--fs-pille-h, 42px);
display: inline-flex; align-items: center;
}
.fs-topbar-elev .fs-menu-vaerktoej { box-sizing: border-box; min-height: var(--fs-pille-h, 42px); }
}
/* ── Sammenhæng i bjælken ──
Navigationen står i bjælkens tekstfarve (blå hos en kunde), men
sprogvælgeren og temaknappen stod i husets grå og sort: "Dansk" og
ikonet grå, solen sort. Set 11. sep. Nu arver begge bjælkens tekstfarve,
så det hele hænger sammen; kun pilen ved sproget er grå — den er et
hjælpetegn, ikke et punkt. Kun elevens bjælke: prøvens rører vi ikke. */
.fs-topbar-elev .fs-sprog, .fs-topbar-elev .fs-sprog .fs-drop-knap,
.fs-topbar-elev .fs-menu-vaerktoej .fs-sprog .fs-drop-knap { color: var(--fs-bar-tekst); }
.fs-topbar-elev .fs-sprog .fs-drop-knap .bi-chevron-down { color: var(--fs-text-soft); }
.fs-topbar-elev .fs-tema, .fs-topbar-elev .fs-menu-vaerktoej .fs-tema { color: var(--fs-bar-tekst); }
.fs-topbar-elev .fs-tema:hover { color: var(--fs-nav-hover, var(--fs-bar-tekst)); }
/* Topbarens hjørner er kundens valg (Design → Topbaren → Hjørner) og bæres
af --fs-radius-bar: piller, købsknap, sprogvælger og bakken med sprog og
sol følger den. Prøvens egen bjælke gør IKKE: den skal ligne
Færdselsstyrelsens hos alle kunder, så den pindes til helt rund her, og
kundens valg når aldrig derind. */
.fs-topbar-proeve { --fs-radius-bar: 999px; }
/* Aktivt punkt som fyldt pille */
.fs-nav-aktiv-pille .fs-topbar-right a.fs-nav { padding: 8px 15px; border-radius: var(--fs-radius-bar); }
.fs-nav-aktiv-pille .fs-topbar-right a.fs-nav.er-aktiv::after { content: none; }
.fs-nav-aktiv-pille .fs-topbar-right a.fs-nav.er-aktiv { background: var(--fs-bar-accent);
/* Pillen er markering nok — fed oveni ville kun gøre punktet bredere,
og så flytter bjælken sig, hver gang man skifter side */
color: var(--fs-accent-text); }
.fs-nav-aktiv-pille .fs-nav-mere .fs-drop-menu .fs-nav { border-radius: 8px; padding: 9px 12px; }
.fs-nav-aktiv-pille .fs-nav-mere .fs-drop-menu .fs-nav.er-aktiv { background: var(--fs-field-bg);
color: inherit; }
/* Menupunkterne som knapper — uafhængigt af, hvordan det aktive markeres.
Samme lyse tone som værktøjsbakken, så rækken læses som én gruppe.
Kun i bredden: i "Mere"-menuen og i burgeren er punkterne en liste, og
dér ville en knap på hver linje bare larme. */
@media (min-width: 861px) {
.fs-nav-stil-knap .fs-topbar-right > a.fs-nav {
padding: 8px 15px; border-radius: var(--fs-radius-bar);
background: color-mix(in srgb, var(--fs-text) 6%, transparent);
transition: background 140ms, color 140ms;
}
.fs-nav-stil-knap .fs-topbar-right > a.fs-nav:hover {
background: color-mix(in srgb, var(--fs-text) 12%, transparent);
text-decoration: none;
}
/* Er det aktive punkt allerede en fyldt pille, skal knappen ikke ligge
under og lyse igennem */
.fs-nav-stil-knap.fs-nav-aktiv-pille .fs-topbar-right > a.fs-nav.er-aktiv {
background: var(--fs-bar-accent);
}
/* ── Bestil adgang: den eneste knap i bjælken, der fører til kassen ── */
/* Fyldt i fremhævningen — samme farve som "Bestil mere tid", fordi det
er to sider af samme sag: den ene fører til kassen, den anden tilbage
til den. Fladen alene bærer den ikke på en lys bjælke (sand mod hvid
er 1,2:1) — men skriften indeni står 8,5:1, og det er den, der bærer
knappen. Ingen ramme: den gjorde pillen tung uden at gøre den
tydeligere. */
/* Farverne er kundens egne for desktop (Farver → Købsknap på desktop),
som telefonen har sine. Standarden er fremhævningens, så ingen live
side skiftede, da felterne kom (11. sep). */
.fs-cta-fyldt .fs-topbar-right > a.fs-cta-knap {
/* Samme mål som kant-udgaven: samme luft, samme linjehøjde og en
usynlig ramme på 1,5 px, så de to knapper er lige høje — og lige så
høje som den tonede label og bakken. Før var den fyldte 38 px mod
kantens 41 (line-height 1.15 og ingen ramme), set 11. sep. */
padding: 7px 15px; border-radius: var(--fs-radius-bar);
background: var(--fs-cta-desk, var(--fs-frem)); color: var(--fs-cta-desk-tekst, var(--fs-frem-tekst));
font-weight: 600;
/* Ingen synlig kant: topbarens links understreger på hover, og en
streg læses som en kant i bunden af knappen */
border: 1.5px solid transparent; box-shadow: none;
}
.fs-cta-fyldt .fs-topbar-right > a.fs-cta-knap:hover,
.fs-cta-fyldt .fs-topbar-right > a.fs-cta-knap:focus-visible {
background: color-mix(in srgb, var(--fs-cta-desk-tekst, var(--fs-frem-tekst)) 12%, var(--fs-cta-desk, var(--fs-frem)));
text-decoration: none;
}
/* Knappen står sidst i navigationen, lige op ad kategorivælgeren. Uden
luft ser de to piller ud som ét rodet felt. */
.fs-topbar-elev .fs-topbar-right > a.fs-cta-knap { margin: 0 6px 0 4px; }
/* Stregen under det aktive punkt hører ikke hjemme oven på en fyldt knap */
.fs-cta-fyldt .fs-topbar-right > a.fs-cta-knap.er-aktiv::after { content: none; }
.fs-cta-fyldt .fs-topbar-right > a.fs-cta-knap.er-aktiv {
background: color-mix(in srgb, var(--fs-cta-desk-tekst, var(--fs-frem-tekst)) 12%, var(--fs-cta-desk, var(--fs-frem)));
}
/* Kant. Roligere — sig selv uden at råbe. */
.fs-cta-kant .fs-topbar-right > a.fs-cta-knap {
padding: 7px 15px; border-radius: var(--fs-radius-bar); background: none;
/* Accenten, ikke fremhævningens skriftfarve: den er mørk med vilje,
fordi den skal kunne læses PÅ den lyse pille. Uden fyld bag sig stod
den mørkt på mørkt i mørkt tema og kunne slet ikke læses. Med
accenten følger knappen de øvrige punkter i begge tilstande. */
/* Kant-udgavens egne farver: fladen indeni (bjælkens farve = ingen
fyld) og rammen, som også er skriften — Farver → Købsknap på desktop */
background: var(--fs-cta-desk-indeni, transparent);
border: 1.5px solid var(--fs-cta-desk-kant, var(--fs-bar-accent)); color: var(--fs-cta-desk-kant, var(--fs-bar-accent)); font-weight: 600;
}
.fs-cta-kant .fs-topbar-right > a.fs-cta-knap:hover {
background: var(--fs-cta-desk-kant, var(--fs-frem)); border-color: var(--fs-cta-desk-kant, var(--fs-frem));
color: var(--fs-cta-desk-kant-tekst, var(--fs-frem-tekst)); text-decoration: none;
}
.fs-cta-kant .fs-topbar-right > a.fs-cta-knap.er-aktiv::after { content: none; }
}
/* På mobil står punkterne under hinanden i burgeren. Bestil adgang må gerne
skille sig ud dér også, men som farvet tekst — en knap i fuld bredde ville
tage over i en liste, hvor alt andet er tekst. */
@media (max-width: 860px) {
/* Rammens farve fra telefonens kant-udgave — IKKE den fyldte udgaves
skriftfarve: den er hvid hos en kunde, og så stod "Bestil adgang" hvidt
på den hvide menu (11. sep). Rammefarven er valgt til at kunne læses på
bjælken, og menuen har bjælkens farve. */
.fs-cta-fyldt .fs-topbar-right > a.fs-cta-knap,
.fs-cta-kant .fs-topbar-right > a.fs-cta-knap { color: var(--fs-cta-mob-kant, var(--fs-bar-accent)); font-weight: 600; }
}
/* Aktivt punkt kun med fed */
.fs-nav-aktiv-fed .fs-topbar-right a.fs-nav.er-aktiv::after { content: none; }
.fs-nav-aktiv-fed .fs-topbar-right a.fs-nav.er-aktiv { font-weight: 700; }
/* Prik under: stregen bliver til en prik midt under punktet */
.fs-nav-aktiv-prik .fs-topbar-right a.fs-nav.er-aktiv::after {
left: 50%; right: auto; bottom: -8px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; }
/* Tonet flade: accenten som svag bund — roligere end den fyldte pille */
.fs-nav-aktiv-tone .fs-topbar-right a.fs-nav { padding: 8px 15px; border-radius: var(--fs-radius-bar); }
.fs-nav-aktiv-tone .fs-topbar-right a.fs-nav.er-aktiv::after { content: none; }
.fs-nav-aktiv-tone .fs-topbar-right a.fs-nav.er-aktiv { background: color-mix(in srgb, var(--fs-bar-accent) 12%, transparent); }
.fs-paa-billede .fs-nav-aktiv-tone .fs-topbar-right a.fs-nav.er-aktiv { background: rgba(255, 255, 255, 0.18); color: #fff; }
/* Fane: stregen ligger på bjælkens underkant, som en fane i en mappe.
Punktet står midt i bjælken; afstanden ned til kanten er halvdelen af
det, bjælken er højere end punktet — og 100 % er punktets egen højde. */
.fs-nav-aktiv-fane .fs-topbar-right a.fs-nav.er-aktiv::after {
inset-inline-start: 8px; inset-inline-end: 8px; bottom: calc((100% - var(--fs-bar-h)) / 2); height: 3px; border-radius: 3px 3px 0 0; }
/* Ingenting: det aktive punkt ser ud som de andre — heller ikke på
telefonen, hvor menuen ellers gør det fede, og heller ikke Mere-knappen */
.fs-nav-aktiv-ingen .fs-topbar-right a.fs-nav.er-aktiv::after { content: none; }
.fs-nav-aktiv-ingen .fs-topbar-right .fs-link.fs-nav.er-aktiv,
.fs-nav-aktiv-ingen.fs-topbar-elev .fs-topbar-right .fs-link.fs-nav.er-aktiv,
.fs-nav-aktiv-ingen .fs-nav-mere.er-aktiv > .fs-mere-knap { color: var(--fs-bar-tekst); font-weight: 400; }
.fs-nav-aktiv-ingen .fs-topbar-right .fs-link.fs-nav.er-aktiv:hover { color: var(--fs-nav-hover, var(--fs-bar-tekst)); }
.fs-paa-billede .fs-nav-aktiv-ingen .fs-topbar-right .fs-link.fs-nav.er-aktiv { color: rgba(255, 255, 255, 0.92); }
/* ── Glas på bjælken ──
Samme effekt som administrationens header og footer (app.css .nav-glass):
30 % af bjælkens egen farve over siden, og siden bag den sløres og
mættes. Farven er kundens, så lys og mørk får hver sin, uden to regler.
Den åbne MOBILMENU følger IKKE med: gennemsigtig lå den oven på siden,
og punkterne kunne ikke læses (set hos en kunde 11. sep). Den
beholder sin massive bund. */
.fs-topbar.fs-bar-glas {
/* 42 % og ikke administrationens 30 %: en anelse tættere, så teksten i
bjælken holder kontrasten over et billede — bedt om 11. sep. */
background: color-mix(in srgb, var(--fs-topbar) 42%, transparent);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
/* Værktøjerne frit — ingen bakke bag kategori, sprog og tema */
@media (min-width: 861px) {
.fs-topbar-elev.fs-flade-fri .fs-topbar-right .fs-menu-vaerktoej { background: none; padding: 4px 0; gap: 10px; }
.fs-topbar-elev.fs-flade-fri .fs-menu-vaerktoej .fs-kat-drop .fs-drop-knap {
border: 1px solid var(--fs-border); box-shadow: none; }
.fs-topbar-elev.fs-flade-fri .fs-menu-vaerktoej .fs-kat-drop .fs-drop-knap:hover { border-color: var(--fs-navy); }
}
@media (max-width: 860px) {
.fs-topbar-elev.fs-flade-fri .fs-menu-vaerktoej { background: none; padding: 6px 0; }
.fs-topbar-elev.fs-flade-fri .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
border: 1px solid var(--fs-border); box-shadow: none; }
}
/* Bjælken under måling. Navigationen holdes usynlig, indtil sprog og tema
er flyttet ind i bakken og punkterne er talt — ellers ser man dem alle
stå der og folde om et øjeblik senere.
visibility, ikke display: pladsen skal være der hele tiden, så resten af
bjælken ikke rykker, når navigationen kommer frem. Og kun panelet —
logoet og burgeren skal stå med det samme. */
.fs-topbar.fs-maaler .fs-topbar-right,
.fs-topbar.fs-maaler .fs-sprog,
.fs-topbar.fs-maaler .fs-tema { visibility: hidden; }
/* ════════ Enhederne, man er logget ind på ════════ */
.fs-enheder { margin: 4px 0 2px; }
.fs-enheder h4 { font-size: 14.5px; margin-bottom: 8px; }
.fs-enhed-liste { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.fs-enhed-liste li { display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--fs-border); font-size: 14px; }
.fs-enhed-liste li:last-child { border-bottom: 0; }
.fs-enhed-navn { font-weight: 600; }
.fs-enhed-tid { color: var(--fs-text-soft); font-size: 13px; white-space: nowrap; }
/* Den, man sidder ved, skal kunne findes uden at læse listen igennem */
.fs-enhed-liste li.er-mig .fs-enhed-tid { color: var(--fs-green-dark); font-weight: 600; }
.fs-enhed-hint { margin: 8px 0 10px; }
.fs-enhed-luk { font-size: 14px; }
.fs-enhed-luk[disabled] { opacity: .45; cursor: default; text-decoration: none; }
.fs-enhed-svar { font-size: 13.5px; color: var(--fs-text-soft); margin-top: 6px; }
/* Hvornår adgangen så gælder til. Alle fire siger det — så kan man se hvad
hver mulighed er værd — men kun den valgte står med accentfarven og fed,
så svaret på "hvad får JEG" er til at få øje på. Klassevælgeren skal slå
.fs-produkt-tekst span, som er et trin mere specifik. */
.fs-produkt-tekst .fs-produkt-til { display: block; color: var(--fs-text-soft); }
.fs-produkt.er-valgt .fs-produkt-tekst .fs-produkt-til {
color: var(--fs-navy); font-weight: 600; }
.fs-elev-status { margin-bottom: 14px; }
.fs-profil-adgang-kl { color: var(--fs-text-soft); }
/* ════════ Gæstens to døre på mobil ════════
Uden for burgeren, ved siden af den. Bag menuen var de usynlige, og
telefonen er dér, hvor de fleste elever kommer ind. */
.fs-gaest-mobil { display: none; }
@media (max-width: 860px) {
.fs-topbar-elev .fs-gaest-mobil { display: flex; align-items: center; gap: 10px;
margin-inline-start: auto; flex-shrink: 0; }
/* Grundformen. De fire stilarter nedenfor bygger oven på den — se
DESIGN_CTA_MOBIL i core/design.php. Før var der kun denne ene, og den
var hårdkodet: to kunder med hvert sit udtryk på desktop lignede
hinanden fuldstændig på telefonen, dér hvor de fleste elever kommer
ind. */
.fs-topbar-elev .fs-gaest-koeb {
display: inline-flex; align-items: center; gap: 6px;
background: var(--fs-cta-mob, var(--fs-frem));
color: var(--fs-cta-mob-tekst, var(--fs-frem-tekst));
border-radius: var(--fs-radius-bar); padding: 7px 13px; font-size: 13px; font-weight: 600;
line-height: 1.1; text-decoration: none; white-space: nowrap;
border: 0; box-shadow: none; }
/* Kant og Kun tekst står UDEN fyld, så farven skal kunne læses på selve
bjælken. Hverken fylden eller tekstfarven duer altid: en lys fyld
forsvinder på en hvid bjælke, og en hvid tekstfarve (som hører til en
mørk fyld) gør det samme. --fs-cta-mob-streg er den af de to, der har
kontrast nok — regnet ud i design_cta_mobil_streg(). */
/* Kant-udgaven har sine egne to farver (Farver → Købsknap på telefon):
indeni (bjælkens farve = ingen fyld) og rammen, der også er skriften.
Kun tekst bruger rammens farve. */
.fs-topbar-elev .fs-gaest-koeb-kant {
background: var(--fs-cta-mob-indeni, transparent); border: 1.5px solid currentColor; padding: 5.5px 12px;
color: var(--fs-cta-mob-kant, var(--fs-bar-accent)); }
.fs-topbar-elev .fs-gaest-koeb-tekst {
background: none; border: 0; padding: 0;
color: var(--fs-cta-mob-kant, var(--fs-bar-accent)); }
/* Kun ikon: rund og lige så stor som burgeren, så de to flugter */
.fs-topbar-elev .fs-gaest-koeb-ikon {
width: 36px; height: 36px; padding: 0; gap: 0;
justify-content: center; font-size: 17px; }
.fs-topbar-elev .fs-gaest-koeb .fs-ikon-maske { width: 1.15em; height: 1.15em; }
.fs-topbar-elev .fs-gaest-login { color: var(--fs-bar-accent); font-size: 13px;
font-weight: 600; text-decoration: none; white-space: nowrap; }
/* Logoet må vige — de to døre er vigtigere end et bredt bomærke. Både
et loft OG 100%: uden procenten bliver bomærket ved med at fylde sine
110px, selv når flexboksen har skrumpet pladsen omkring det, og så
lægger købsknappen sig oven i logoet. */
.fs-topbar-elev .fs-gaest-mobil ~ .fs-burger { margin-inline-start: 0; }
.fs-topbar-elev:has(.fs-gaest-mobil) .fs-logo-img { max-width: min(110px, 100%); }
}
/* Målt på en telefon med kundens egen luft omkring indholdet: under 380px
bliver logoet presset under 80px, hvis begge døre skal stå. Så viger Log
ind — den står stadig i menuen et halvt sekund væk, og købsknappen, som
er den, der betyder noget for en, der ikke har en konto, bliver. */
@media (max-width: 379px) {
.fs-topbar-elev .fs-gaest-login { display: none; }
}
/* Bestil mere tid som knap — i topbaren, burgeren og profilvinduet */
.fs-dage-knap .fs-logo-sub a, .fs-dage-knap .fs-menu-dage a {
/* Samme farve som "Bestil adgang" — de to hører sammen, og eleven
lærer kun ét udtryk at kende for "det her koster noget". Mere luft
over og under, ellers ser knappen flad ud ved siden af linjen. */
display: inline-block; background: var(--fs-frem); color: var(--fs-frem-tekst);
border-radius: var(--fs-radius-bar); padding: 5px 13px; font-size: 12px; font-weight: 600;
line-height: 1.1; text-decoration: none; margin-inline-start: 4px;
border: 0; box-shadow: none; }
.fs-dage-knap .fs-logo-sub a:hover, .fs-dage-knap .fs-menu-dage a:hover {
background: color-mix(in srgb, var(--fs-frem-tekst) 12%, var(--fs-frem));
/* Ingen understregning — den ville se ud som en kant i bunden */
text-decoration: none; box-shadow: none; }
/* ════════ Temavælgerens tre stilarter ════════
Samme knap, samme plads — kun udtrykket skifter. */
/* Kontakt: en lille skinne med en knop, der glider — solen følger med */
.fs-tema-kontakt { width: 50px; border-radius: 999px;
background: color-mix(in srgb, var(--fs-text) 12%, transparent); height: 28px; }
.fs-tema-kontakt:hover { background: color-mix(in srgb, var(--fs-text) 18%, transparent); }
.fs-tema-kontakt::before { content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
width: 22px; height: 22px; border-radius: 50%; background: var(--fs-white);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
transition: transform 300ms cubic-bezier(0.3, 1.2, 0.4, 1); }
.fs-dark .fs-tema-kontakt::before { transform: translateX(22px); }
.fs-tema-kontakt svg { position: absolute; z-index: 1; width: 14px; height: 14px;
top: 7px; inset-inline-start: 7px; transition: transform 300ms cubic-bezier(0.3, 1.2, 0.4, 1); }
.fs-dark .fs-tema-kontakt svg { transform: translateX(22px); }
/* Solen er varm, månen holder husets farve */
.fs-tema-kontakt { color: #c9891f; }
.fs-dark .fs-tema-kontakt { color: var(--fs-navy); }
/* Kontakten skal være sin egen ramme for knop og sol. Reglen står IKKE her,
men sammen med måne og himmel nederst i arket: de tre har præcis samme
behov, og placeringen skal vindes på rækkefølgen. Se "Temavælgeren: de
tegnede kontakter". */
/* Snurrende ikon: solen drejer om og bliver til månen */
.fs-tema-flip svg { transition: transform 550ms cubic-bezier(0.3, 0.8, 0.2, 1.1); }
.fs-dark .fs-tema-flip svg { transform: rotate(220deg); }
.fs-tema-flip:hover svg { transform: rotate(30deg); }
.fs-dark .fs-tema-flip:hover svg { transform: rotate(190deg); }
/* ── Gennemgangens svar i de foldede skabeloner: eget udtryk, så de ikke
ligner den klassiske (som er urørt). Står sidst — kaskaden. ── */
/* Harmonikaen: svarene som en flad liste med hårstreger — ingen kasser */
.fs-result-tpl-harmonika .fs-svar { border: 0; border-radius: 0; margin: 0;
background: none; overflow: visible; }
.fs-result-tpl-harmonika .fs-svar + .fs-svar { border-top: 1px solid var(--fs-border); }
.fs-result-tpl-harmonika .fs-review-option { padding: 12px 2px; }
.fs-result-tpl-harmonika .fs-svar.is-correct .fs-review-option-text { color: var(--fs-green); font-weight: 700; }
.fs-result-tpl-harmonika .fs-svar.is-wrong-pick .fs-review-option-text { color: var(--fs-red); }
.fs-result-tpl-harmonika .fs-svar .fs-explanation { background: none; border-top: 0;
padding: 0 2px 12px 32px; }
/* Fejlene først: facit i fokus — de relevante svar som tonede piller uden
kant, resten stille og dæmpet; det forkerte valg streges over */
.fs-result-tpl-fejl-foerst .fs-svar { border: 0; border-radius: 12px; margin-bottom: 6px;
background: none; }
.fs-result-tpl-fejl-foerst .fs-svar:not(.is-correct):not(.is-wrong-pick) .fs-review-option { opacity: 0.55; padding-top: 9px; padding-bottom: 9px; }
.fs-result-tpl-fejl-foerst .fs-svar.is-correct { background: color-mix(in srgb, var(--fs-green) 10%, transparent); }
.fs-result-tpl-fejl-foerst .fs-svar.is-wrong-pick { background: color-mix(in srgb, var(--fs-red) 9%, transparent); }
.fs-result-tpl-fejl-foerst .fs-svar.is-wrong-pick .fs-review-option-text { text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* ── Navnemenuen må ikke spærre for "bestil mere tid" ──
Broen og en menu oven på dage-linjen stjal klikket. Derfor: ingen bro,
menuen åbner UNDER dage-linjen, og åbent-tilstanden styres af scriptet
med en kort lukke-forsinkelse i stedet for ren :hover-geometri. */
.fs-navn-drop::after { content: none; }
.fs-navn-drop:hover > .fs-drop-menu { display: none; }
.fs-navn-drop:focus-within > .fs-drop-menu,
.fs-navn-drop.er-aaben > .fs-drop-menu { display: flex; }
.fs-navn-drop .fs-drop-menu { top: calc(100% + 34px); }
/* ════════ Skoleportalens topbar: samme udtryk som elevernes ════════
Burger-grænsen er 1200 her (menuen er bredere). Blokken står sidst,
så den vinder over skolens grundregler længere oppe. */
/* Aktiv-markering efter designvalget — gælder alle bredder */
.fs-topbar-skole.fs-nav-aktiv-pille .fs-topbar-right a.fs-link.er-aktiv::after,
.fs-topbar-skole.fs-nav-aktiv-fed .fs-topbar-right a.fs-link.er-aktiv::after { content: none; }
.fs-topbar-skole.fs-nav-aktiv-fed .fs-topbar-right a.fs-link.er-aktiv { font-weight: 700; }
/* De fem nye valg — samme tegning som på elevens bjælke */
.fs-topbar-skole.fs-nav-aktiv-prik .fs-topbar-right a.fs-link.er-aktiv::after {
left: 50%; right: auto; bottom: -8px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; }
.fs-topbar-skole.fs-nav-aktiv-tone .fs-topbar-right a.fs-link.er-aktiv::after,
.fs-topbar-skole.fs-nav-aktiv-ingen .fs-topbar-right a.fs-link.er-aktiv::after { content: none; }
.fs-topbar-skole.fs-nav-aktiv-tone .fs-topbar-right a.fs-link.er-aktiv {
padding: 8px 15px; border-radius: var(--fs-radius-bar); background: color-mix(in srgb, var(--fs-bar-accent) 12%, transparent); }
.fs-topbar-skole.fs-nav-aktiv-fane .fs-topbar-right a.fs-link.er-aktiv::after {
inset-inline-start: 8px; inset-inline-end: 8px; bottom: calc((100% - var(--fs-bar-h)) / 2); height: 3px; border-radius: 3px 3px 0 0; }
.fs-topbar-skole.fs-nav-aktiv-ingen .fs-topbar-right a.fs-link.er-aktiv { color: var(--fs-bar-tekst); font-weight: 400; }
@media (min-width: 1201px) {
.fs-topbar-skole.fs-nav-aktiv-pille .fs-topbar-right > .fs-link,
.fs-topbar-skole.fs-nav-aktiv-pille .fs-topbar-right > .fs-drop > .fs-link { padding: 8px 15px; border-radius: 999px; }
.fs-topbar-skole.fs-nav-aktiv-pille .fs-topbar-right > .fs-link.er-aktiv,
.fs-topbar-skole.fs-nav-aktiv-pille .fs-topbar-right > .fs-drop > .fs-link.er-aktiv {
background: var(--fs-bar-accent); color: var(--fs-bar-accent-tekst); font-weight: 600; }
/* Værktøjsbakken: kategori, sprog og tema på én lys bakke — eller frit */
.fs-topbar-skole .fs-topbar-right .fs-menu-vaerktoej { display: flex; align-items: center; gap: 7px; }
.fs-topbar-skole.fs-flade-bakke .fs-topbar-right .fs-menu-vaerktoej {
background: color-mix(in srgb, var(--fs-text) 6%, transparent);
border-radius: 999px; padding: 4px; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-sprog,
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema { position: static; }
.fs-topbar-skole:not(.fs-flade-fri) .fs-menu-vaerktoej .fs-tema { box-shadow: none; background: none; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-kat-drop { margin-inline-start: 0; }
.fs-topbar-skole.fs-flade-bakke .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
background: var(--fs-white); border: 0; border-radius: 999px;
padding: 8px 13px 8px 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10); }
.fs-topbar-skole .fs-menu-vaerktoej .fs-sprog .fs-drop-knap { background: none; border: 0; }
/* Menuerne hænger under deres egen knap — fixed-reglens offsets nulstilles */
.fs-topbar-skole .fs-menu-vaerktoej .fs-sprog.fs-drop { position: relative; inset: auto; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-kat-drop .fs-drop-menu { inset-inline-start: -7px; inset-inline-end: auto; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-sprog .fs-drop-menu { inset-inline-start: 12px; inset-inline-end: auto; }
}
/* ── Burger-tilstand (≤1200): elev-stilen — fed aktiv, Log ud under
skillelinje, og værktøjsbakken som dæmpet bakke med tryk-dropdowns ── */
@media (max-width: 1200px) {
.fs-topbar-skole .fs-topbar-right a.fs-link.er-aktiv { font-weight: 700; }
.fs-topbar-skole .fs-topbar-right a.fs-link.er-aktiv::after { content: none; }
.fs-topbar-skole .fs-topbar-right form[action*="logud"] .fs-link {
border-top: 1px solid rgba(128, 128, 128, 0.16); margin-top: 8px; padding-top: 16px; }
.fs-topbar-skole .fs-menu-vaerktoej { display: flex; align-items: center; gap: 9px;
justify-content: flex-start; margin-top: 16px; padding: 6px 12px 6px 8px;
border-radius: 999px; border-top: 0;
width: max-content; max-width: 100%; align-self: flex-start;
background: color-mix(in srgb, var(--fs-text) 5%, transparent); }
.fs-topbar-skole.fs-flade-fri .fs-menu-vaerktoej { background: none; padding: 6px 0; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-drop { display: inline-flex; position: relative; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-drop > .fs-drop-knap { display: inline-flex; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-kat-drop { margin: 0; padding: 0; border-top: 0;
display: inline-flex; width: auto; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
background: var(--fs-white); border: 0; border-radius: 999px; padding: 8px 15px;
font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10); }
.fs-topbar-skole.fs-flade-fri .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
border: 1px solid var(--fs-border); box-shadow: none; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-sprog { position: relative; inset: auto;
width: auto; flex: 0 1 auto; justify-content: flex-start; }
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema { position: static; }
/* Menuerne åbner OPAD på tryk — panelet er en rulleflade, og nedad klippes de */
.fs-topbar-skole .fs-menu-vaerktoej .fs-drop-menu { position: absolute; top: auto;
bottom: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: auto; transform: none;
max-height: 45vh; overflow-y: auto;
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 12px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); padding: 6px; min-width: 160px;
display: none; flex-direction: column; }
}
/* Tryk-åbning: scriptet sætter er-aaben, udenfor-klik lukker */
.fs-topbar-skole .fs-drop.er-aaben > .fs-drop-menu { display: flex; }
/* Webshop-menuen flugter med ordet Webshop — ikke centreret under drop'en.
Ikon (og luft) foran teksten: 34px på desktop, 38px i burgerens rækker;
minus menuens egen kant+luft (19px) giver forskydningen. */
.fs-topbar-skole .fs-topbar-right > .fs-drop > .fs-drop-menu { inset-inline-start: 0; inset-inline-end: auto; transform: none; }
@media (max-width: 1200px) {
.fs-topbar-skole .fs-topbar-right > .fs-drop > .fs-drop-menu { inset-inline-start: 19px; }
}
/* ── "Til eget administrationssystem"-kontakten i skolens webshop ── */
.fs-eget-system { display: flex; align-items: flex-start; gap: 14px; margin: 18px 0 4px;
padding: 15px 18px; border: 1px solid var(--fs-border); border-radius: 12px;
cursor: pointer; background: var(--fs-surface); }
.fs-eget-system input { position: absolute; opacity: 0; pointer-events: none; }
.fs-eget-kontakt { flex-shrink: 0; width: 44px; height: 25px; border-radius: 999px;
background: color-mix(in srgb, var(--fs-text) 18%, transparent); position: relative;
transition: background 160ms; margin-top: 2px; }
.fs-eget-kontakt::before { content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
width: 19px; height: 19px; border-radius: 50%; background: var(--fs-white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 160ms; }
.fs-eget-system input:checked ~ .fs-eget-kontakt { background: var(--fs-navy); }
.fs-eget-system input:checked ~ .fs-eget-kontakt::before { transform: translateX(calc(19px * var(--fs-dir))); }
.fs-eget-system input:focus-visible ~ .fs-eget-kontakt { outline: 2px solid var(--fs-navy); outline-offset: 2px; }
.fs-eget-tekst { display: flex; flex-direction: column; gap: 3px; }
.fs-eget-tekst strong { font-size: 15px; }
.fs-eget-tekst span { font-size: 13.5px; color: var(--fs-text-soft); line-height: 1.5; }
/* Reserveret-mærket på ordrelisterne */
.fs-eget-badge { display: inline-block; font-size: 11.5px; font-weight: 600;
border-radius: 999px; padding: 2px 9px; margin-inline-start: 6px; white-space: nowrap;
background: color-mix(in srgb, var(--fs-navy) 10%, transparent); color: var(--fs-navy); }
/* Testordre: samme form som eget-system-mærket, men i advarselsfarve —
koderne virker, men der er ikke betalt noget */
.fs-test-badge { display: inline-block; font-size: 11.5px; font-weight: 600;
border-radius: 999px; padding: 2px 9px; margin-inline-start: 6px; white-space: nowrap;
background: rgba(232, 152, 0, .14); color: #a06a00; }
/* ════════ Elevens skolevælger ════════ */
.fs-skolevalg { margin: 18px 0 6px; text-align: start; }
.fs-skolevalg-hint { font-size: 13px; color: var(--fs-text-soft, #51606f); margin: 6px 0 0; }
.fs-skolevalg-valgt {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
border: 1px solid var(--fs-border, #d8dbe0); border-radius: 12px; padding: 12px 14px;
}
.fs-skolevalg-valgt strong { display: block; }
.fs-skolevalg-valgt span { font-size: 13px; color: var(--fs-text-soft, #51606f); }
.fs-skolevalg-fjern {
border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px;
color: var(--fs-navy); text-decoration: underline; text-underline-offset: 3px; padding: 4px;
}
/* Resultatlisten er en RUDE med sin egen rullning — ikke en liste, der vokser
nedad.
Med hele landets køreskoler i basen giver "tra" 160 træffere. Stod de i
flowet, blev kortet 1.600px højt: gem-knappen forsvandt ned under skærmen,
og på en telefon kunne man slet ikke nå bunden. Ruden er højst fem rækker
høj, uanset hvor mange der er — resten ruller man til, præcis som i en
almindelig rulleliste. */
.fs-skolevalg-liste {
list-style: none; margin: 8px 0 0; padding: 5px; display: grid; gap: 4px;
max-height: min(320px, 42vh);
overflow-y: auto;
/* Kun lodret. Uden den bliver overflow-x beregnet til auto af sig selv, og
så fik ruden en vandret rullebjælke, mens Vælg-pillen stod uden for
kanten. Rækkerne skal RUMME sig selv, ikke rulles til. */
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
border: 1px solid var(--fs-border, #d8dbe0); border-radius: 12px;
background: var(--fs-bg-card, #fff);
}
/* Rullningen skal kunne ses, også når den ikke er i gang */
.fs-skolevalg-liste::-webkit-scrollbar { width: 10px; }
.fs-skolevalg-liste::-webkit-scrollbar-thumb {
background: var(--fs-border, #d8dbe0); border-radius: 999px;
border: 3px solid var(--fs-bg-card, #fff);
}
/* Rækken ER en knap, men det kunne man ikke se — folk troede, skolen var
valgt, bare fordi den stod på listen. "Vælg" står nu i hver række. */
.fs-skolevalg-liste button {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; text-align: start; border: 1px solid var(--fs-border, #d8dbe0);
background: none; cursor: pointer; font: inherit; border-radius: 10px; padding: 9px 12px;
}
/* Tastaturet skal kunne det samme som musen */
.fs-skolevalg-liste button:focus-visible,
.fs-skolevalg-liste li.er-fremhaevet button {
border-color: var(--fs-navy, #1a4272);
background: var(--fs-bg-blaa-svag, rgba(26,66,114,0.06));
outline: none;
}
.fs-skolevalg-liste li.er-fremhaevet .fs-skolevalg-vaelg { background: var(--fs-navy, #1a4272); color: #fff; }
.fs-skolevalg-liste button:hover { border-color: var(--fs-navy); }
.fs-skolevalg-liste strong { display: block; font-size: 15px; }
.fs-skolevalg-liste span { font-size: 12.5px; color: var(--fs-text-soft, #51606f); }
/* Et forslag fra CVR-registret er ikke en skole, vi kender endnu */
.fs-skolevalg-liste .er-cvr button { border-style: dashed; }
.fs-skolevalg-info { display: block; text-align: start; min-width: 0; }
/* Gitterfelter og flexbørn er som standard mindst så brede som deres indhold.
Uden de her tre linjer skubbede et langt skolenavn hele rækken ud over
rudens kant på en telefon. */
.fs-skolevalg-liste li { min-width: 0; }
.fs-skolevalg-liste button { min-width: 0; }
.fs-skolevalg-liste strong { overflow-wrap: anywhere; }
.fs-skolevalg-maerkat {
display: block; font-size: 11.5px; font-style: normal; letter-spacing: .02em;
text-transform: uppercase; color: var(--fs-text-soft, #51606f); margin-top: 2px;
}
.fs-skolevalg-liste .fs-skolevalg-vaelg {
flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--fs-navy, #1a4272);
border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}
.fs-skolevalg-liste button:hover .fs-skolevalg-vaelg { background: var(--fs-navy, #1a4272); color: #fff; }
/* Søgefeltet og vejen ud står på samme linje.
min-width:0 hele vejen op: et gitterfelt er som standard mindst så bredt
som sit indhold, og uden det skubbede feltet + Fortryd sig ud over kortets
kant på en telefon — knappen stod halvt uden for dialogen. */
.fs-skolevalg { min-width: 0; }
.fs-skolevalg-soegerad { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fs-skolevalg-soegerad .fs-code-input { flex: 1 1 auto; min-width: 0; width: auto; }
.fs-skolevalg-soegerad [data-fortryd] { flex: 0 0 auto; white-space: nowrap; }
/* I vælgetilstand er resten af formularen foldet væk, og så er der plads til
flere skoler ad gangen — det er hele pointen med at folde den væk. */
.fs-skolevalg.er-vaelger .fs-skolevalg-liste { max-height: min(420px, 40vh); }
.fs-skolevalg.er-vaelger [data-skjul-i-vaelger] { display: none; }
/* Overskriften over vælgeren har sagt sit, når man er i gang med at vælge */
.fs-skolevalg.er-vaelger > .fs-fact-label { display: none; }
/* På en telefon koster hver linje i rækken en skole mindre i ruden. Navnene
er lange ("BYENS KØRESKOLE & TRAFIKCENTER ApS"), så pillen skrumper og teksten får
pladsen — fire skoler synlige i stedet for to en halv. */
@media (max-width: 480px) {
.fs-skolevalg-liste { max-height: min(340px, 46vh); }
.fs-skolevalg-liste button { padding: 8px 10px; gap: 8px; }
.fs-skolevalg-liste strong { font-size: 14.5px; line-height: 1.25; }
/* Stedet klippes med ... i stedet for at ombryde. Ellers koster ét langt
bynavn en hel linje, og ruden viser to skoler i stedet for fire. */
.fs-skolevalg-info > span:not(.fs-skolevalg-maerkat) {
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-size: 12px;
}
.fs-skolevalg-liste .fs-skolevalg-vaelg { font-size: 12px; padding: 2px 9px; }
/* CVR-nummeret ryger. Det er den oplysning, en elev er mindst tilbøjelig
til at genkende, og den koster en linje i hver eneste række. */
.fs-skolevalg-cvr { display: none; }
}
/* Kontakten "jeg vil ikke dele". Står øverst, fordi den slår resten fra. */
.fs-switch { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; cursor: pointer; font-size: 14px; }
.fs-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fs-switch-spor {
width: 44px; height: 26px; flex: 0 0 44px; border-radius: 999px;
background: var(--fs-border, #d5dce3); position: relative; transition: background-color .2s ease;
}
.fs-switch-spor::after {
content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
transition: transform .2s ease;
}
.fs-switch input:checked + .fs-switch-spor { background: var(--fs-navy, #1a4272); }
.fs-switch input:checked + .fs-switch-spor::after { transform: translateX(calc(18px * var(--fs-dir))); }
.fs-switch input:focus-visible + .fs-switch-spor { box-shadow: 0 0 0 3px rgba(26,66,114,.3); }
.fs-switch-tekst { line-height: 1.35; }
.fs-skolevalg-krav { color: var(--fs-orange, #b45309); font-size: 13.5px; margin: 8px 0 0; }
/* Vejen fra historikken ind til besvarelsen.
Linket lægges oven på hele rækken i stedet for som en ekstra kolonne —
så holder gitteret, og hele rækken kan klikkes. */
.fs-frem-raekke { position: relative; }
.fs-frem-se { position: absolute; inset: 0; z-index: 1; border-radius: 10px; }
.fs-frem-raekke:hover { background: color-mix(in srgb, currentColor 4%, transparent); }
.fs-frem-raekke:has(.fs-frem-se:focus-visible) { outline: 2px solid var(--fs-navy); outline-offset: 2px; }
/* "Tag igen" skal stadig kunne rammes gennem det gennemsigtige link */
.fs-frem-igen { position: relative; z-index: 2; }
/* Linket i "Alle prøver": accentfarven og ingen understregning — før stod
det med browserens lilla besøgt-farve. Resultatet som pille, ikke som
farvet ord, så det kan ses på et blik ned gennem listen. */
.fs-skole-se-svar { white-space: nowrap; color: var(--fs-navy); font-weight: 600; text-decoration: none; }
.fs-skole-se-svar:hover { text-decoration: underline; }
.fs-frem-alle-liste .fs-pass,
.fs-frem-alle-liste .fs-fail { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13.5px;
white-space: nowrap; }
.fs-frem-alle-liste .fs-pass { background: color-mix(in srgb, var(--fs-green) 14%, transparent); }
.fs-frem-alle-liste .fs-fail { background: color-mix(in srgb, var(--fs-red) 12%, transparent); }
/* Prøvens titel på mobil.
Loftet på 50% − 110px findes for at holde plads fri til uret i midten.
På mobil ligger uret ikke der, og resten er bag burgeren — så loftet
klemmer bare titlen ned til nogle få bogstaver. */
@media (max-width: 860px) {
.fs-topbar-proeve .fs-logo { max-width: none; margin-inline-end: 8px; }
}
/* Skolevælgerens svarlinje: "Søger …", "Slår CVR-nummeret op …" eller
beskeden om, at der ikke var noget */
.fs-skolevalg-status { font-size: 13.5px; color: var(--fs-tekst-svag, #6b7280); margin: 8px 0 0; }
/* På en telefon er hver linje dyr: hjælpeteksten under feltet forsvinder,
mens der er noget at vælge imellem — den har sagt sit. */
.fs-skolevalg.er-soegende .fs-skolevalg-hint { display: none; }
/* Tomme lister i skoleportalen.
Ingen stor hvid kasse — der er jo ikke noget at ramme ind. Bare en rolig
linje på fladen: et lille dæmpet ikon, én sætning og en knap, der ser ud
som alle andre knapper. Venstrestillet, så den følger sidens rytme i
stedet for at svæve i midten. */
.fs-tom-kort {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 4px 0 8px;
}
.fs-tom-kort i {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
display: grid; place-items: center; font-size: 17px;
background: color-mix(in srgb, var(--fs-text) 6%, transparent);
color: var(--fs-text-soft);
}
.fs-tom-kort p {
margin: 0; color: var(--fs-text-soft); max-width: 52ch;
flex: 1 1 260px; font-size: 14.5px; line-height: 1.5;
}
/* Knapper er knapper — ingen understregning arvet fra . Og den skal
ikke være sidens tungeste element, når der ikke er noget indhold: en
rolig, lav knap frem for en stor blok. */
.fs-tom-kort .fs-btn {
text-decoration: none; flex: 0 0 auto;
height: 40px; min-height: 40px; padding: 0 18px;
font-size: 14.5px; border-radius: 10px;
}
.fs-tom-kort .fs-btn i { font-size: 13px; }
/* Kørekortskategorien på klassesiden — samme piller som periodevælgeren */
.fs-kl-kat { padding-bottom: 0; }
.fs-kl-kat-valg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-kl-kat-etiket { font-size: 13.5px; color: var(--fs-text-soft); margin-inline-end: 2px; }
.fs-kl-kat-knap {
border: 1px solid var(--fs-border); border-radius: 999px; padding: 7px 15px;
font-size: 14px; font-weight: 500; color: var(--fs-text); text-decoration: none;
background: var(--fs-white); transition: border-color .12s, background .12s;
}
.fs-kl-kat-knap:hover { border-color: var(--fs-navy); }
.fs-kl-kat-knap.er-valgt { background: var(--fs-navy); border-color: var(--fs-navy); color: var(--fs-accent-text); }
/* Videokortet klistrede op i aktivitetskortet ovenover — kun dét kort
mangler luft, så resten af siden røres ikke */
.fs-uv-kort { margin-top: 18px; }
/* Videolisten foldes sammen — knappen står for sig under tabellen */
.fs-uv-fold { margin-top: 16px; }
/* ════════ Værktøjsbakken alene i toppen ════════
Sider uden menu — login, glemt kode, tofaktor, aktivering, skolens
oprettelse og klar-siden før prøven — har intet panel at lægge sprog og
tema i. Her står de på deres egen bakke i højre side af bjælken, med
samme udtryk som bakken i elevernes og skolens topbar.
Blokken står sidst i filen, fordi den skal vinde over to sæt regler
længere oppe: hjørnets faste placering af sprog og tema, og burger-
tilstandens udfoldning af dropdowns til flade lister. */
.fs-vaerktoejsbakke { display: flex; align-items: center; flex-shrink: 0; }
/* Uden sprogvalg og uden mørk tilstand er der intet at vise */
.fs-vaerktoejsbakke:empty { display: none; }
.fs-vaerktoejsbakke .fs-menu-vaerktoej { display: flex; align-items: center; gap: 7px;
background: color-mix(in srgb, var(--fs-text) 6%, transparent);
border-radius: 999px; padding: 4px; }
/* Valgene frit — ingen bakke bagved */
.fs-vaerktoejsbakke.fs-flade-fri .fs-menu-vaerktoej { background: none; padding: 4px 0; gap: 10px; }
/* Sprog og tema slipper hjørnets faste plads og står i bakkens flow */
.fs-vaerktoejsbakke .fs-sprog,
.fs-vaerktoejsbakke .fs-sprog.fs-drop { position: relative; inset: auto; width: auto;
flex: 0 1 auto; justify-content: flex-start; }
.fs-vaerktoejsbakke .fs-sprog .fs-drop-knap { background: none; border: 0; }
/* Kategorien ser ud som sproget: bakken er rammen om dem begge, og et
hvidt felt inde i den gav hverken mening i lyst eller mørkt tema — i
mørkt lyste skriften skarpt hvidt, i lyst var det hvidt på hvidt.
Den er stadig den eneste med fed skrift, så valget kan ses. */
.fs-vaerktoejsbakke .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
background: none; border: 0; box-shadow: none;
font-weight: 400; color: var(--fs-text-soft); }
.fs-vaerktoejsbakke .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap:hover {
background: color-mix(in srgb, var(--fs-text) 10%, transparent); }
/* Frit opstillet er der ingen bakke til at samle dem — der beholder den
sin kant, ellers svæver valget uden form */
.fs-vaerktoejsbakke.fs-flade-fri .fs-menu-vaerktoej .fs-kat-drop > .fs-drop-knap {
border: 1px solid var(--fs-border); }
.fs-vaerktoejsbakke .fs-tema { position: static; }
.fs-vaerktoejsbakke:not(.fs-flade-fri) .fs-tema { box-shadow: none; background: none; }
/* Skinnen skal blive stående i bakken. Positionen sættes ikke her, men
sammen med måne og himmel nederst i arket — se dér hvorfor. */
.fs-vaerktoejsbakke .fs-tema.fs-tema-kontakt {
background: color-mix(in srgb, var(--fs-text) 12%, transparent); }
/* Sprogmenuen hænger under sin egen knap og åbner på tryk — også på mobil,
hvor der ingen burger er til at folde den ud */
.fs-vaerktoejsbakke .fs-drop { position: relative; display: inline-flex; }
.fs-vaerktoejsbakke .fs-drop > .fs-drop-knap { display: inline-flex; }
.fs-vaerktoejsbakke .fs-drop-menu { position: absolute; top: calc(100% + 10px);
inset-inline-start: auto; inset-inline-end: 0; transform: none;
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 12px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10); padding: 6px; min-width: 160px;
max-height: 60vh; overflow-y: auto; display: none; flex-direction: column; }
.fs-vaerktoejsbakke .fs-drop.er-aaben > .fs-drop-menu { display: flex; }
/* Ligger bjælken oven på et fuldskærmsbillede, er fladen mørk af overlayet
— så skal bakken være lys, ikke en mørk plet i en mørk top */
.fs-paa-billede .fs-vaerktoejsbakke .fs-menu-vaerktoej { background: rgba(255, 255, 255, 0.16); }
.fs-paa-billede .fs-vaerktoejsbakke.fs-flade-fri .fs-menu-vaerktoej { background: none; }
.fs-paa-billede .fs-vaerktoejsbakke .fs-tema.fs-tema-kontakt { background: rgba(255, 255, 255, 0.26); }
/* Undervisningsoversigten set af en gæst: kortene er der, videoerne er ikke.
Linjen forklarer hvorfor, så siden ikke ligner en, der er i stykker. */
.fs-uv-gaest {
/* Luften over striben tages FRA afstanden ned til overskriften, ikke
lagt oven i den: bunden er 22px minus det, toppen har fået, så summen
er præcis den samme og titlen står, hvor den stod. Regnestykket bor på
striben selv og ikke på titlen, fordi det første element under striben
skifter mellem sidens tre grene. */
max-width: 720px;
margin: calc(30px * var(--fs-space)) auto calc(22px - 30px * var(--fs-space));
text-align: center;
background: var(--fs-field-bg, #dee5eb); border-radius: 12px;
padding: 13px 18px; font-size: 14.5px; line-height: 1.55; color: var(--fs-text, #1d2d3e);
}
.fs-uv-gaest a { color: var(--fs-navy); font-weight: 600; margin-inline-start: 6px; }
/* ══════ Knappen til køreskolerne ══════
Sidder fast i nederste højre hjørne af prøveoversigten. Den er til
køreskoler, der kigger med — ikke til eleven — så den skal kunne ses
uden at trænge sig på: hvilende er den rolig og let, og først ved hover
træder den frem. På telefonen bliver den til en cirkel med ikonet
alene; dér er der ikke plads til at være høflig og synlig på én gang. */
.fs-skoler-knap {
position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 40;
display: inline-flex; align-items: center; gap: 9px;
background: var(--fs-surface, #fff); color: var(--fs-navy, #1a4272);
border: 1px solid var(--fs-border, #d5dce3); border-radius: 999px;
padding: 11px 18px; font-size: 14px; font-weight: 600; text-decoration: none;
box-shadow: 0 6px 20px rgba(16, 32, 52, .12);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.fs-skoler-knap i { font-size: 16px; line-height: 1; }
.fs-skoler-knap:hover,
.fs-skoler-knap:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(16, 32, 52, .18);
border-color: var(--fs-navy, #1a4272);
}
.fs-skoler-knap:focus-visible { outline: 2px solid var(--fs-navy); outline-offset: 3px; }
@media (max-width: 640px) {
/* Kun ikonet — teksten ville lægge sig hen over prøvekortene */
.fs-skoler-knap { inset-inline-end: 14px; bottom: 14px; padding: 0; width: 46px; height: 46px;
justify-content: center; gap: 0; }
/* Kun TEKSTEN gemmes væk. Ikonet er også et span, når det kommer fra
køreskolesættet — uden undtagelsen blev knappen helt tom på mobil. */
.fs-skoler-knap span:not(.fs-ikon-maske) { position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fs-skoler-knap .fs-ikon-maske { width: 19px; height: 19px; }
.fs-skoler-knap i { font-size: 19px; }
}
/* ══════ Roterende badge ══════
Rund knap med en tekst, der løber rundt langs kanten, og fast indhold i
midten. Første brug er knappen til køreskolerne på prøveoversigten, men
den er tegnet som et alment element (.fs-roter), så den kan bære andre
budskaber senere. To farvelægninger af samme tegning: 'moerk' fylder med
badgefarven og skriver med tekstfarven; 'lys' står på kortfladen med
badgefarven som skrift og ring. Begge følger mørk tilstand af sig selv,
fordi de kun bruger designets variabler (--fs-badge*, sat i core/design).
Ringen er en SVG-; midten er almindelig HTML og roterer ikke.
Forlægget er Roadifys "Elev Koder"-badge (temp/roterende-badge).
Størrelsen sidder i --badge-str, så placeringen kan skifte den på mobil
uden at kende resten. */
.fs-roter {
--badge-str: 136px;
position: relative;
display: flex; align-items: center; justify-content: center;
width: var(--badge-str); height: var(--badge-str);
border-radius: 50%;
text-decoration: none; cursor: pointer;
font-family: var(--fs-font);
transition: transform 240ms cubic-bezier(0.2, 0.8, 0.4, 1), box-shadow 240ms ease;
/* Indgangen: skalerer op og drejer på plads. 'backwards' og ikke 'both':
med 'both' ville slutbilledet blive ved med at gælde og slå hover-
transformen nedenfor — animationen skal slippe, når den er færdig. */
animation: fs-roter-ind 600ms cubic-bezier(0.2, 0.8, 0.4, 1) 200ms backwards;
}
.fs-roter-moerk {
background: linear-gradient(135deg, var(--fs-badge, #1a4272) 0%, var(--fs-badge-dark, #133255) 100%);
color: var(--fs-badge-tekst, #ffffff);
box-shadow:
0 12px 32px color-mix(in srgb, var(--fs-badge, #1a4272) 32%, transparent),
0 2px 6px rgba(0, 0, 0, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.fs-roter-lys {
background: var(--fs-surface, #ffffff);
color: var(--fs-badge, #1a4272);
box-shadow:
0 12px 32px rgba(16, 32, 52, 0.16),
0 2px 6px rgba(0, 0, 0, 0.08),
inset 0 0 0 2px var(--fs-badge, #1a4272);
}
.fs-roter:hover, .fs-roter:focus-visible { transform: scale(1.05); }
.fs-roter:active { transform: scale(1.02); }
.fs-roter-moerk:hover, .fs-roter-moerk:focus-visible {
box-shadow:
0 16px 40px color-mix(in srgb, var(--fs-badge, #1a4272) 42%, transparent),
0 4px 10px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.fs-roter-lys:hover, .fs-roter-lys:focus-visible {
box-shadow:
0 16px 40px rgba(16, 32, 52, 0.22),
0 4px 10px rgba(0, 0, 0, 0.10),
inset 0 0 0 2px var(--fs-badge, #1a4272);
}
.fs-roter:focus-visible { outline: 2px solid var(--fs-badge, #1a4272); outline-offset: 4px; }
/* På mørk bund skal skyggen bære mere, ellers svæver badgen ikke */
.fs-dark .fs-roter-moerk {
box-shadow:
0 12px 32px color-mix(in srgb, var(--fs-badge, #1a4272) 45%, transparent),
0 2px 6px rgba(0, 0, 0, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.fs-dark .fs-roter-lys { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30), inset 0 0 0 2px var(--fs-badge, #1a4272); }
.fs-roter-ring {
position: absolute; inset: 0; width: 100%; height: 100%;
overflow: visible;
animation: fs-roter-snur 18s linear infinite;
}
/* 14 enheder i et 200-viewBox: ved 136px er det 9,5px på skærmen */
.fs-roter-ring text {
fill: currentColor;
font-family: inherit; font-size: 14px; font-weight: 600;
letter-spacing: 1.2px; text-transform: uppercase;
}
.fs-roter-midte {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center;
line-height: 1; text-align: center; pointer-events: none;
max-width: 68%;
}
.fs-roter-over { font-size: 12.5px; font-weight: 400; letter-spacing: 0.4px; margin-bottom: 3px; opacity: 0.92; }
.fs-roter-hoved { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; white-space: nowrap; }
.fs-roter-hoved-s { font-size: 18px; letter-spacing: -0.2px; }
.fs-roter-hoved-xs { font-size: 14.5px; letter-spacing: 0; }
.fs-roter-ikon { margin-top: 7px; font-size: 20px; line-height: 1; opacity: 0.92; }
@keyframes fs-roter-snur { to { transform: rotate(360deg); } }
@keyframes fs-roter-ind {
from { opacity: 0; transform: scale(0.6) rotate(-30deg); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.fs-roter, .fs-roter-ring { animation: none; }
}
/* Placeringen som knap til køreskolerne: samme hjørne som pillen */
.fs-skoler-badge { position: fixed; inset-inline-end: 28px; bottom: 28px; z-index: 40; }
@media (max-width: 640px) {
.fs-skoler-badge { --badge-str: 104px; inset-inline-end: 14px; bottom: 14px; }
/* Ringen skalerer med viewBox'en — større enheder, så den kan læses */
.fs-skoler-badge .fs-roter-ring text { font-size: 15px; letter-spacing: 1px; }
.fs-skoler-badge .fs-roter-over { font-size: 10px; }
.fs-skoler-badge .fs-roter-hoved { font-size: 17px; }
.fs-skoler-badge .fs-roter-hoved-s { font-size: 14px; }
.fs-skoler-badge .fs-roter-hoved-xs { font-size: 11.5px; }
.fs-skoler-badge .fs-roter-ikon { font-size: 15px; margin-top: 5px; }
}
/* ══════ Temavælgeren: de tegnede kontakter ══════
Sol og flip tegner med SVG-ikonet alene og kan stå hvor som helst.
Kontakt, måne og himmel er derimod SIN EGEN RAMME: knop, skinne og sol
er absolut placeret INDE i knappen. Bliver knappen static, mister de tre
deres ramme og hopper ud i sidens øverste venstre hjørne — det skete på
skoleportalen 8. september, hvor kontaktens sol hang i hjørnet, mens den
tomme skinne stod tilbage i bjælken.
Derfor står positionen for alle tre HER, nederst i arket, med hver eneste
flade skrevet ud. Reglerne, der gør knappen static, står længere oppe med
samme specificitet ((0,3,0)), så kampen afgøres af rækkefølgen, og den
vindes kun nedefra. Kontakten stod tidligere ved sin egen tegning i
midten af arket og tabte derfor til skolebjælken, der kom bagefter.
Kommer der en ny flade med en værktøjsbakke, skal den skrives ind her. */
.fs-tema-skinne, .fs-tema-knop { display: none; }
.fs-tema-maane svg, .fs-tema-himmel svg, .fs-tema-skyer svg, .fs-tema-snor svg { display: none; }
.fs-tema.fs-tema-maane, .fs-tema.fs-tema-himmel { border-radius: 999px; overflow: visible; }
.fs-topbar-elev .fs-menu-vaerktoej .fs-tema.fs-tema-kontakt,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema.fs-tema-kontakt,
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema.fs-tema-kontakt,
.fs-menu-vaerktoej .fs-tema.fs-tema-kontakt,
.fs-vaerktoejsbakke .fs-tema.fs-tema-kontakt,
.fs-topbar-elev .fs-menu-vaerktoej .fs-tema.fs-tema-maane,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema.fs-tema-maane,
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema.fs-tema-maane,
.fs-menu-vaerktoej .fs-tema.fs-tema-maane,
.fs-vaerktoejsbakke .fs-tema.fs-tema-maane,
.fs-topbar-elev .fs-menu-vaerktoej .fs-tema.fs-tema-himmel,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema.fs-tema-himmel,
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema.fs-tema-himmel,
.fs-menu-vaerktoej .fs-tema.fs-tema-himmel,
.fs-vaerktoejsbakke .fs-tema.fs-tema-himmel,
.fs-topbar-elev .fs-menu-vaerktoej .fs-tema.fs-tema-pille,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema.fs-tema-pille,
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema.fs-tema-pille,
.fs-menu-vaerktoej .fs-tema.fs-tema-pille,
.fs-vaerktoejsbakke .fs-tema.fs-tema-pille,
.fs-topbar-elev .fs-menu-vaerktoej .fs-tema.fs-tema-skyer,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema.fs-tema-skyer,
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema.fs-tema-skyer,
.fs-menu-vaerktoej .fs-tema.fs-tema-skyer,
.fs-vaerktoejsbakke .fs-tema.fs-tema-skyer,
.fs-topbar-elev .fs-menu-vaerktoej .fs-tema.fs-tema-snor,
.fs-topbar-proeve .fs-menu-vaerktoej .fs-tema.fs-tema-snor,
.fs-topbar-skole .fs-menu-vaerktoej .fs-tema.fs-tema-snor,
.fs-menu-vaerktoej .fs-tema.fs-tema-snor,
.fs-vaerktoejsbakke .fs-tema.fs-tema-snor { position: relative; inset: auto; }
/* ── Måne med stjerner ──
Forlæg: "Moon and Sun: Dark Mode / Light Mode Toggle" af RefractedColor,
https://codepen.io/RefractedColor/pen/mdWZRPQ (CodePen, MIT-licens).
Tegningen er overtaget 1:1 — kun målestokken er vores: forlæggets em er
her --e, så alle forhold og alle skygger er de samme. Sporet er dag med
sol og stråler (lys tilstand) og nat med måne og stjerner (mørk);
stjernerne er månens egne skygger, og knoppen tegnes om, mens den glider.
Farverne er forlæggets egne og følger med vilje ikke kundens palet. */
.fs-tema.fs-tema-maane {
--e: 2px;
width: calc(30 * var(--e)); height: calc(16 * var(--e));
top: calc((var(--fs-bar-h) - 16 * var(--e)) / 2);
}
.fs-tema-maane .fs-tema-skinne {
display: block; position: absolute; inset: 0; border-radius: 999px;
background: #FFBF71;
transition: background 500ms ease-in-out;
}
.fs-dark .fs-tema-maane .fs-tema-skinne { background: #423966; }
.fs-tema-maane .fs-tema-knop {
display: block; position: absolute; border-radius: 50%;
transition: all 400ms ease-in-out;
/* Dag: solen — strålerne er skygger uden udbredelse */
top: calc(4.5 * var(--e)); inset-inline-start: calc(18 * var(--e));
width: calc(7 * var(--e)); height: calc(7 * var(--e));
transform: rotate(0deg);
background: #fff;
box-shadow:
calc(3 * var(--e)) calc(3 * var(--e)) 0 calc(5 * var(--e)) #fff inset,
0 calc(-5 * var(--e)) 0 calc(-2.7 * var(--e)) #fff,
calc(3.5 * var(--e)) calc(-3.5 * var(--e)) 0 calc(-3 * var(--e)) #fff,
calc(5 * var(--e)) 0 0 calc(-2.7 * var(--e)) #fff,
calc(3.5 * var(--e)) calc(3.5 * var(--e)) 0 calc(-3 * var(--e)) #fff,
0 calc(5 * var(--e)) 0 calc(-2.7 * var(--e)) #fff,
calc(-3.5 * var(--e)) calc(3.5 * var(--e)) 0 calc(-3 * var(--e)) #fff,
calc(-5 * var(--e)) 0 0 calc(-2.7 * var(--e)) #fff,
calc(-3.5 * var(--e)) calc(-3.5 * var(--e)) 0 calc(-3 * var(--e)) #fff;
}
.fs-dark .fs-tema-maane .fs-tema-knop {
/* Nat: månen har sporets farve, og den indvendige skygge er seglet */
top: calc(3 * var(--e)); inset-inline-start: calc(3 * var(--e));
width: calc(10 * var(--e)); height: calc(10 * var(--e));
transform: rotate(-75deg);
background: #423966;
box-shadow:
calc(3 * var(--e)) calc(2.5 * var(--e)) 0 0 #D9FBFF inset,
rgba(255, 255, 255, 0.1) 0 calc(-7 * var(--e)) 0 calc(-4.5 * var(--e)),
rgba(255, 255, 255, 0.1) calc(3 * var(--e)) calc(7 * var(--e)) 0 calc(-4.5 * var(--e)),
rgba(255, 255, 255, 0.1) calc(2 * var(--e)) calc(13 * var(--e)) 0 calc(-4 * var(--e)),
rgba(255, 255, 255, 0.1) calc(6 * var(--e)) calc(2 * var(--e)) 0 calc(-4.1 * var(--e)),
rgba(255, 255, 255, 0.1) calc(8 * var(--e)) calc(8 * var(--e)) 0 calc(-4.5 * var(--e)),
rgba(255, 255, 255, 0.1) calc(6 * var(--e)) calc(13 * var(--e)) 0 calc(-4.5 * var(--e)),
rgba(255, 255, 255, 0.1) calc(-4 * var(--e)) calc(7 * var(--e)) 0 calc(-4.5 * var(--e)),
rgba(255, 255, 255, 0.1) calc(-1 * var(--e)) calc(10 * var(--e)) 0 calc(-4.5 * var(--e));
}
/* ── Dag og nat ──
Forlæg: "Dark Mode Switch - Toggle Night / Day (without svg's)" af
Florian Holly, https://codepen.io/FlorianHolly/pen/JjmRqqB (CodePen,
MIT-licens), efter Jhey Tompkins' https://codepen.io/jh3y/pen/LYgjpYZ.
Overtaget 1:1 i forlæggets mål gange --h (90×40 → 63×28): himlen er en
radial gradient i striber, der skubbes fra dag til nat; skyerne og
stjernerne er skygger, og knoppen går fra gul sol til grå måne med
kratere. Stjernen er et tegn, der skaleres med transform og ikke med
font-size, fordi en browsers mindste skriftstørrelse ellers kan gøre den
for stor. Farverne er forlæggets egne. */
.fs-tema.fs-tema-himmel {
--h: 0.7px; --hs: 0.7;
width: calc(90 * var(--h)); height: calc(40 * var(--h));
top: calc((var(--fs-bar-h) - 40 * var(--h)) / 2);
}
.fs-tema-himmel .fs-tema-skinne {
display: block; position: absolute; inset: 0;
border-radius: calc(40 * var(--h)); overflow: hidden;
background: radial-gradient(circle at center right, #347ab2, #347ab2 10%, #4886b7 10%, #4886b7 20%, #5c93bf 20%, #5c93bf 30%, #699ec6 30%, #699ec6 40%, #494e5c 40%, #494e5c 50%, #404350 50%, #404350 60%, #2d333c 60%, #2d333c 70%, #242830 70%, #242830 80%, #111 80%, #111 90%);
background-size: 250% 100%; background-position: 100% 0%;
box-shadow:
inset calc(-4 * var(--h)) calc(-4 * var(--h)) calc(6 * var(--h)) rgba(255, 255, 255, 0.3),
inset calc(4 * var(--h)) calc(4 * var(--h)) calc(6 * var(--h)) rgba(70, 70, 70, 0.12);
transition: 0.2s ease all;
}
.fs-dark .fs-tema-himmel .fs-tema-skinne { background-position: 20% 0%; }
.fs-tema-himmel .fs-tema-skinne::before {
content: '★';
position: absolute; inset-inline-start: calc(12 * var(--h)); top: calc(8 * var(--h));
font-size: 8px; line-height: normal; color: #fff; opacity: 0;
transform: scale(var(--hs)); transform-origin: 0 0;
text-shadow: 10px 10px 0 rgba(255, 255, 255, 0.8), 20px 5px 0 #fff;
transition: 0.2s ease all;
}
.fs-dark .fs-tema-himmel .fs-tema-skinne::before { opacity: 0.9; }
.fs-tema-himmel .fs-tema-skinne::after {
content: '';
position: absolute; top: 0; inset-inline-start: calc(5 * var(--h));
width: calc(25 * var(--h)); height: calc(25 * var(--h)); border-radius: 50%;
box-shadow:
calc(30 * var(--h)) calc(30 * var(--h)) 0 #fff,
calc(50 * var(--h)) calc(20 * var(--h)) 0 #fff,
calc(65 * var(--h)) calc(25 * var(--h)) 0 #fff,
calc(29 * var(--h)) calc(28 * var(--h)) 0 #d7d7d7,
calc(49 * var(--h)) calc(18 * var(--h)) 0 #d7d7d7,
calc(65 * var(--h)) calc(23 * var(--h)) 0 #d7d7d7;
transition: 0.2s ease all;
}
.fs-dark .fs-tema-himmel .fs-tema-skinne::after { transform: translateY(250%); opacity: 0.5; }
.fs-tema-himmel .fs-tema-knop {
display: block; position: absolute;
top: calc(5 * var(--h)); inset-inline-start: calc(5 * var(--h));
width: calc(30 * var(--h)); height: calc(30 * var(--h)); border-radius: 50%;
background: #f1c530;
box-shadow: inset calc(3 * var(--h)) calc(5 * var(--h)) calc(3 * var(--h)) #f8a100;
transition: 0.2s ease all;
}
.fs-dark .fs-tema-himmel .fs-tema-knop {
inset-inline-start: calc(100% - 5 * var(--h)); transform: translateX(-100%);
background: #c3c9d2;
box-shadow: inset calc(3 * var(--h)) calc(5 * var(--h)) calc(3 * var(--h)) #edf1f9;
}
/* Kraterne findes kun på månen — i forlægget sættes de først ved skiftet */
.fs-tema-himmel .fs-tema-knop::before, .fs-tema-himmel .fs-tema-knop::after {
content: ''; position: absolute; border-radius: 50%; background: #949ead;
opacity: 0; transition: 0.2s ease all;
}
.fs-tema-himmel .fs-tema-knop::before {
inset-inline-start: calc(15 * var(--h)); top: calc(5 * var(--h));
width: calc(9 * var(--h)); height: calc(9 * var(--h));
box-shadow: inset calc(2 * var(--h)) calc(1 * var(--h)) calc(1 * var(--h)) #848e9b;
}
.fs-tema-himmel .fs-tema-knop::after {
inset-inline-start: calc(4 * var(--h)); top: calc(13 * var(--h));
width: calc(12 * var(--h)); height: calc(12 * var(--h));
box-shadow: inset calc(2 * var(--h)) calc(2 * var(--h)) calc(2 * var(--h)) #848e9b;
}
.fs-dark .fs-tema-himmel .fs-tema-knop::before, .fs-dark .fs-tema-himmel .fs-tema-knop::after { opacity: 1; }
/* ── Pille med ikon ──
Forlæg: "CSS Theme Switcher" af Shiva Narrthine (shvnrrthn),
https://codepen.io/shvnrrthn/pen/ExPVPrd (CodePen, MIT-licens).
Overtaget 1:1 i forlæggets egne mål (62×32, knop 24): grå pille, hvid
knop, der glider med forlæggets fjedrende kurve. Forlæggets ikoner er
Feather-ikonerne sol og måne, de samme som vores SVG bærer — solen står
sort på den hvide knop (forlægget viser den som billede og arver ingen
farve), månen hvid på den mørke. Knop og måne er forlæggets (#fff, #222,
hvid måne). Sporet og solen er IKKE forlæggets: #f2f2f2 var usynligt på
en lys bjælke, så knoppen svævede alene, og en sort sol passede ikke
til bjælkens blå tekst (set på Design-siden 11. sep). Sporet er nu en
tone af bjælkens tekstfarve — samme tone som den tonede label — og
solen har tekstfarven. Så hænger knappen sammen med navigationen. */
.fs-tema.fs-tema-pille {
width: 62px; height: 32px; border-radius: 50px; overflow: hidden;
top: calc((var(--fs-bar-h) - 32px) / 2);
background: color-mix(in srgb, var(--fs-bar-tekst, var(--fs-text)) 12%, transparent); transition: background-color ease 0.3s;
}
.fs-tema-pille:hover { background: color-mix(in srgb, var(--fs-bar-tekst, var(--fs-text)) 18%, transparent); }
.fs-dark .fs-tema-pille, .fs-dark .fs-tema-pille:hover { background: #383838; }
.fs-tema-pille .fs-tema-knop {
display: block; position: absolute; z-index: 2;
width: 24px; height: 24px; border-radius: 50%;
top: 4px; inset-inline-start: 32px; background: #fff;
transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.fs-dark .fs-tema-pille .fs-tema-knop { inset-inline-start: 4px; background: #222; }
.fs-tema-pille svg {
position: absolute; z-index: 3; width: 16px; height: 16px; top: 8px; inset-inline-start: 36px;
color: var(--fs-bar-tekst, var(--fs-text)); transition: left cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.fs-dark .fs-tema-pille svg { inset-inline-start: 8px; color: #fff; }
/* Forlægget bytter ikonet ud på stedet — ingen optegning */
.fs-tema-pille .sun-icon, .fs-tema-pille .moon-icon { transition: none; }
/* ── Sol bag skyer ──
Forlæg: "Designer vs Developer Meme — Light/Dark Theme Switcher" af
Nikita (lgmus), https://codepen.io/lgmus/pen/gOBoZyd (CodePen,
MIT-licens). Overtaget 1:1: forlæggets em er her --e (250×100 → 70×28),
så alle forhold, skygger og kurver er de samme. Himlen er dag (#397ab0)
og nat (#1c202c); skyerne er to lag af skygger, der ånder; solen har tre
ringe og glider over, mens månen (forlæggets ::before) drejer frem med
sine kratere. Stjernerne er tegnet ✦ og skaleres med transform, ikke med
font-size — en browsers mindste skriftstørrelse må ikke gøre dem store.
Delene hedder som forlæggets: stjerner, flerestjerner, solmaane. */
.fs-tema.fs-tema-skyer {
--e: 0.28px;
--skyer-dag: #397ab0; --skyer-nat: #1c202c; --skyer-sol: #f2c426; --skyer-maane: #c5c8cf;
--skyer-forrest: #fff; --skyer-bagest: #a5c5dc; --skyer-stjerne: #fff;
--skyer-tid: 1s; --skyer-kurve: cubic-bezier(0.65, 0, 0.34, 1.17); --skyer-skykurve: cubic-bezier(0.65, 0, 0.35, 1);
width: calc(25 * 10 * var(--e)); height: calc(10 * 10 * var(--e)); border-radius: calc(5 * 10 * var(--e));
top: calc((var(--fs-bar-h) - 10 * 10 * var(--e)) / 2);
overflow: hidden; isolation: isolate; background: none;
box-shadow: 0 calc(-3 * var(--e)) calc(2 * var(--e)) calc(1 * var(--e)) rgba(0, 0, 0, 0.2),
0 calc(3 * var(--e)) calc(2 * var(--e)) calc(1 * var(--e)) #fffeff;
}
.fs-tema-skyer:hover { background: none; }
/* Forlæggets checkbox: et lag med indvendige skygger over det hele */
.fs-tema-skyer .fs-tema-knop {
display: block; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
box-shadow: inset 0 calc(5 * var(--e)) calc(5 * var(--e)) 0 rgba(0, 0, 0, 0.5),
inset 0 calc(-5 * var(--e)) calc(10 * var(--e)) 0 rgba(0, 0, 0, 0.3);
}
/* Himlen */
.fs-tema-skyer .fs-tema-skinne {
display: block; position: absolute; inset: 0; padding: calc(10 * var(--e)); box-sizing: border-box;
background-color: var(--skyer-dag); transition: background var(--skyer-tid) var(--skyer-kurve); isolation: isolate;
}
.fs-dark .fs-tema-skyer .fs-tema-skinne { background-color: var(--skyer-nat); }
.fs-tema-skyer .fs-tema-skinne::before, .fs-tema-skyer .fs-tema-skinne::after {
content: ''; position: absolute; z-index: 2; border-radius: 50%;
width: calc(90 * var(--e)); height: calc(90 * var(--e)); inset-inline-start: calc(307 * var(--e)); top: calc(14 * var(--e));
transition: var(--skyer-tid) var(--skyer-kurve);
box-shadow: calc(-100 * var(--e)) 0 0 0 var(--skyer-forrest), calc(-127 * var(--e)) calc(25 * var(--e)) 0 calc(-10 * var(--e)) var(--skyer-forrest),
calc(-165 * var(--e)) calc(58 * var(--e)) 0 0 var(--skyer-forrest), calc(-200 * var(--e)) calc(57 * var(--e)) 0 calc(-10 * var(--e)) var(--skyer-forrest),
calc(-235 * var(--e)) calc(50 * var(--e)) 0 calc(-12 * var(--e)) var(--skyer-forrest), calc(-280 * var(--e)) calc(55 * var(--e)) 0 calc(-10 * var(--e)) var(--skyer-forrest),
calc(-310 * var(--e)) calc(75 * var(--e)) 0 0 var(--skyer-forrest), calc(90 * var(--e)) calc(10 * var(--e)) 0 0 var(--skyer-forrest);
animation: fs-skyer-skyer 10s infinite var(--skyer-skykurve);
}
.fs-tema-skyer .fs-tema-skinne::before {
z-index: -1;
box-shadow: calc(-105 * var(--e)) calc(-22 * var(--e)) 0 0 var(--skyer-bagest), calc(-150 * var(--e)) 0 0 calc(-20 * var(--e)) var(--skyer-bagest),
calc(-175 * var(--e)) calc(18 * var(--e)) 0 calc(-10 * var(--e)) var(--skyer-bagest), calc(-205 * var(--e)) calc(46 * var(--e)) 0 0 var(--skyer-bagest),
calc(-245 * var(--e)) calc(42 * var(--e)) 0 0 var(--skyer-bagest), calc(-285 * var(--e)) calc(58 * var(--e)) 0 0 var(--skyer-bagest),
calc(-315 * var(--e)) calc(65 * var(--e)) 0 0 var(--skyer-bagest);
animation-delay: -5s; animation-duration: 8s;
}
.fs-dark .fs-tema-skyer .fs-tema-skinne::before { transform: translateY(calc(130 * var(--e))); opacity: 0; }
.fs-dark .fs-tema-skyer .fs-tema-skinne::after { transform: translateY(calc(100 * var(--e))); opacity: 0; }
/* Stjernerne: fire pseudoelementer, hver med sit tegn, sin størrelse og sit skær.
Placeringen er forlæggets em gange tegnets egen skriftstørrelse — regnet ud i --e. */
.fs-tema-skyer .fs-tema-stjerner, .fs-tema-skyer .fs-tema-flerestjerner {
position: absolute; inset: 0; opacity: 0; z-index: 1; transition: var(--skyer-tid) var(--skyer-kurve);
}
.fs-dark .fs-tema-skyer .fs-tema-stjerner, .fs-dark .fs-tema-skyer .fs-tema-flerestjerner { opacity: 1; }
.fs-tema-skyer .fs-tema-stjerner::before, .fs-tema-skyer .fs-tema-stjerner::after,
.fs-tema-skyer .fs-tema-flerestjerner::before, .fs-tema-skyer .fs-tema-flerestjerner::after {
content: '✦'; position: absolute; font-size: 10px; line-height: 1; color: var(--skyer-stjerne); opacity: 0;
transform-origin: 0 0; transition: var(--skyer-tid) var(--skyer-kurve);
animation: fs-skyer-stjerner var(--stjerne-tid, 7s) var(--stjerne-vent, 0s) infinite;
}
/* 1.35em-stjernen: 13.5px i forlægget → skala 1.35 · --e/1px */
.fs-tema-skyer .fs-tema-stjerner::before {
inset-inline-start: calc(3.8 * 13.5 * var(--e)); top: calc(0.8 * 13.5 * var(--e)); text-shadow: 6.1em 1.1em;
transform: translateY(calc(-15 * 13.5 * var(--e))) scale(calc(1.35 * 0.28 * 10 / 10));
}
.fs-tema-skyer .fs-tema-stjerner::after {
inset-inline-start: calc(11 * 10 * var(--e)); top: calc(6.8 * 10 * var(--e)); --stjerne-tid: 9.1s; --stjerne-vent: -2.8s;
transform: translateY(calc(-15 * 10 * var(--e))) scale(calc(1 * 0.28));
}
.fs-tema-skyer .fs-tema-flerestjerner::before {
inset-inline-start: calc(4.9 * 6 * var(--e)); top: calc(5.2 * 6 * var(--e)); text-shadow: 4.5em 1.9em, 13.1em -0.8em, 16.8em 4.4em, 4.5em 8.7em;
--stjerne-tid: 5.6s; --stjerne-vent: -7s;
transform: translateY(calc(-15 * 6 * var(--e))) scale(calc(0.6 * 0.28));
}
.fs-tema-skyer .fs-tema-flerestjerner::after {
inset-inline-start: calc(8 * 4 * var(--e)); top: calc(19.6 * 4 * var(--e)); text-shadow: 1.5em -2.1em, 16.7em -7.1em;
--stjerne-tid: 11.2s; --stjerne-vent: -1.4s;
transform: translateY(calc(-15 * 4 * var(--e))) scale(calc(0.4 * 0.28));
}
.fs-dark .fs-tema-skyer .fs-tema-stjerner::before { transform: translateY(0) scale(calc(1.35 * 0.28)); }
.fs-dark .fs-tema-skyer .fs-tema-stjerner::after { transform: translateY(0) scale(calc(1 * 0.28)); }
.fs-dark .fs-tema-skyer .fs-tema-flerestjerner::before { transform: translateY(0) scale(calc(0.6 * 0.28)); }
.fs-dark .fs-tema-skyer .fs-tema-flerestjerner::after { transform: translateY(0) scale(calc(0.4 * 0.28)); }
/* Solen — og månen som dens ::before, der drejer frem */
.fs-tema-skyer .fs-tema-solmaane, .fs-tema-skyer .fs-tema-solmaane::before {
content: ''; overflow: hidden; display: block; position: absolute; border-radius: 50%;
width: calc(80 * var(--e)); height: calc(80 * var(--e));
transition: transform var(--skyer-tid) var(--skyer-kurve); background-color: var(--skyer-sol);
box-shadow: calc(4 * var(--e)) calc(4 * var(--e)) calc(5 * var(--e)) calc(1 * var(--e)) rgba(0, 0, 0, 0.3),
inset calc(-2 * var(--e)) calc(-2 * var(--e)) calc(5 * var(--e)) 0 rgba(0, 0, 0, 0.4),
inset calc(2 * var(--e)) calc(2 * var(--e)) calc(5 * var(--e)) 0 #fffeff,
0 0 0 calc(100 * var(--e)) rgba(255, 255, 255, 0.07), 0 0 0 calc(65 * var(--e)) rgba(255, 255, 255, 0.07), 0 0 0 calc(30 * var(--e)) rgba(255, 255, 255, 0.07);
}
.fs-tema-skyer .fs-tema-solmaane { top: calc(10 * var(--e)); inset-inline-start: calc(10 * var(--e)); z-index: 1; }
.fs-tema-skyer .fs-tema-solmaane::before {
top: 0; inset-inline-start: 0;
box-shadow: calc(4 * var(--e)) calc(4 * var(--e)) calc(5 * var(--e)) calc(1 * var(--e)) rgba(0, 0, 0, 0.3),
inset calc(-2 * var(--e)) calc(-2 * var(--e)) calc(5 * var(--e)) 0 rgba(0, 0, 0, 0.4),
inset calc(2 * var(--e)) calc(2 * var(--e)) calc(5 * var(--e)) 0 #fffeff;
background: radial-gradient(circle, #969db0 calc(11 * var(--e)), #798090 calc(13 * var(--e)), rgba(129, 136, 153, 0) calc(14 * var(--e))),
radial-gradient(circle, #969db0 calc(5 * var(--e)), #798090 calc(7 * var(--e)), rgba(129, 136, 153, 0) calc(8 * var(--e))),
radial-gradient(circle, #969db0 calc(5 * var(--e)), #798090 calc(7 * var(--e)), rgba(129, 136, 153, 0) calc(8 * var(--e)));
background-position: calc(-12 * var(--e)) calc(7 * var(--e)), 0 calc(-20 * var(--e)), calc(20 * var(--e)) calc(14 * var(--e));
background-color: var(--skyer-maane);
transform: translateX(105%) rotate(50deg);
animation: fs-skyer-maane 25s infinite linear;
}
.fs-dark .fs-tema-skyer .fs-tema-solmaane { transform: translateX(calc(150 * var(--e))); }
.fs-dark .fs-tema-skyer .fs-tema-solmaane::before { transform: translateX(0) rotate(0); }
@keyframes fs-skyer-stjerner { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes fs-skyer-skyer { 0% { scale: 1; } 50% { scale: 1.05; } 100% { scale: 1; } }
@keyframes fs-skyer-maane { to { background-position: calc(68 * var(--e)) calc(7 * var(--e)), calc(80 * var(--e)) calc(-20 * var(--e)), calc(100 * var(--e)) calc(14 * var(--e)); } }
/* ── Krymp og voks ──
Forlæg: "Light-Dark Mode Theme Switcher Toggle" af wcDogg,
https://codepen.io/wcDogg/pen/GRzLQXw (CodePen, MIT-licens), med
Feather-ikonerne sol og måne (MIT). Timingen er forlæggets: solen
krymper til ingenting på 600 ms, mens månen vokser frem på 300 ms — og
omvendt. Forlæggets tynde ring om ikonet er taget af efter ønske
(11. sep 2026); knappen står som husets andre ikonknapper. Skalaen
ligger på selve stregerne (forlægget bruger font-size). */
.fs-tema.fs-tema-voks { --voks-hurtig: 600ms; --voks-langsom: 300ms; --voks-kurve: ease-in-out;
touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fs-tema-voks .sun-icon, .fs-tema-voks .moon-icon {
stroke-dasharray: none; transform-box: fill-box; transform-origin: center;
transition-property: transform, opacity; transition-timing-function: var(--voks-kurve);
}
.fs-tema-voks .sun-icon { transform: scale(1); opacity: 1; transition-duration: var(--voks-langsom); }
.fs-tema-voks .moon-icon { transform: scale(0); opacity: 0; transition-duration: var(--voks-hurtig); }
.fs-dark .fs-tema-voks .sun-icon { transform: scale(0); opacity: 0; transition-duration: var(--voks-hurtig); }
.fs-dark .fs-tema-voks .moon-icon { transform: scale(1); opacity: 1; transition-duration: var(--voks-langsom); }
/* ── Snoretræk ──
Forlæg: "CSS-Only Switch for Dark/Light Mode" af Juxtopposed,
https://codepen.io/Juxtopposed/pen/NWzqWQP (CodePen, MIT-licens).
Overtaget 1:1 gange --p: en snor (2 px bred, 200 høj) med en knop (50)
for enden; ved et træk giver snoren efter — den bliver 300 lang og
knoppen følger med ned, og begge fjedrer tilbage på 0,8 s. Forlægget
har to ens sæt keyframes, ét pr. retning, så bevægelsen kører hver gang
der skiftes; det er beholdt. Farverne er forlæggets: hvid snor på sort
(nat), sort snor på hvid (dag). Forlæggets tekst "Click on me to pull
the switch!" er ikke med. Snoren hænger fra bjælkens overkant. */
.fs-tema.fs-tema-snor {
--p: 0.18px;
width: 40px; height: calc(220 * var(--p)); top: 0; border-radius: 0; background: none; overflow: visible;
align-items: flex-start;
}
.fs-tema-snor:hover { background: none; }
/* Snor og knop i bjælkens tekstfarve — forlæggets sort/hvid passede ikke
til en blå navigation (11. sep). Bevægelsen er urørt. */
.fs-tema-snor .fs-tema-skinne {
display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: max(1px, calc(2 * var(--p))); height: calc(200 * var(--p)); background-color: currentColor;
animation: fs-snor-traek2 0.8s ease;
}
.fs-tema-snor .fs-tema-knop {
display: block; position: absolute; left: 50%; top: calc(170 * var(--p)); transform: translateX(-50%);
width: calc(50 * var(--p)); height: calc(50 * var(--p)); border-radius: 100%; background-color: currentColor;
animation: fs-snor-skift2 0.8s ease;
}
.fs-dark .fs-tema-snor .fs-tema-skinne { animation-name: fs-snor-traek; }
.fs-dark .fs-tema-snor .fs-tema-knop { animation-name: fs-snor-skift; }
@keyframes fs-snor-traek { 0%, 100% { height: calc(200 * var(--p)); } 50% { height: calc(300 * var(--p)); } }
@keyframes fs-snor-traek2 { 0%, 100% { height: calc(200 * var(--p)); } 50% { height: calc(300 * var(--p)); } }
@keyframes fs-snor-skift { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, calc(100 * var(--p))); } }
@keyframes fs-snor-skift2 { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, calc(100 * var(--p))); } }
/* I bakken og på prøvesiden hænger snoren fra sin egen overkant */
.fs-tema-proeve .fs-tema-snor, .fs-menu-vaerktoej .fs-tema-snor { align-self: flex-start; }
/* ── Hover-effekterne på LÅSTE kort ──
Zoom og lys stod kun på det første kort: det er det eneste, en gæst ikke
får låst. De låste korts regler ovenfor sætter både filter og transition
på billedet med højere vægt, så lyset blev slået fra, og zoomet sprang
uden overgang. Her får hver låsestil sin hover, lagt oven i sin egen
tone, og overgangen bærer også transform. Sidst i arket, så kaskaden
er entydig. */
.fs-hover-zoom .fs-test.er-laast .fs-test-img,
.fs-hover-lys .fs-test.er-laast .fs-test-img {
transition: transform 400ms cubic-bezier(0.2, 0.8, 0.3, 1), filter 300ms ease-in, opacity 300ms ease-in; }
.fs-hover-zoom .fs-test.er-laast:hover .fs-test-img { transform: scale(1.04); }
.fs-hover-lys .fs-test.er-laast:hover .fs-test-img { filter: grayscale(1) brightness(1.28); }
.fs-hover-lys.fs-laast-daempet .fs-test.er-laast:hover .fs-test-img { filter: saturate(.42) brightness(1.24); }
.fs-hover-lys.fs-laast-farve .fs-test.er-laast:hover .fs-test-img { filter: brightness(1.2); }
@media (hover: hover) and (pointer: fine) {
.fs-hover-lys.fs-laast-hover .fs-test.er-laast:hover .fs-test-img { filter: brightness(1.2); opacity: 1; }
}
/* Gratis-mærkatet på et lektionskort. Det bor i øverste HØJRE hjørne —
inde i titlen endte det midt i sætningen, når navnet brød over to
linjer. Pilen sidder i det modsatte hjørne, så de to mødes aldrig. */
.fs-uv-kort-fri {
position: absolute; top: 16px; inset-inline-end: 16px;
padding: 4px 12px; border-radius: var(--fs-radius-btn);
background: color-mix(in srgb, var(--fs-green) 15%, transparent);
color: var(--fs-green); font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
/* ══════ Luft i kundens eget indhold ══════
Content Builders egne afstandsregler hænger på .is-container, og den
wrapper findes ikke, når indholdet vises hos os — så overskrifter og
afsnit faldt tilbage på browserens standard og stod klemt op ad
hinanden. Reglerne her giver dem afstanden tilbage, både i vinduet og
på den fulde side. */
.fs-politik-modal-krop h2,
.fs-politik-tekst h2 { margin: 0 0 14px; line-height: 1.25; }
.fs-politik-modal-krop h3,
.fs-politik-tekst h3 { margin: 34px 0 12px; line-height: 1.3; }
/* Første overskrift i en søjle skal ikke skubbes ned — den står allerede
i toppen af sin egen kolonne */
.fs-politik-modal-krop .column > h3:first-child,
.fs-politik-tekst .column > h3:first-child { margin-top: 0; }
.fs-politik-modal-krop p,
.fs-politik-tekst p { margin: 0 0 18px; }
.fs-politik-modal-krop .row + .row,
.fs-politik-tekst .row + .row { margin-top: 12px; }
/* Billedets id under billedet i venstre side. Diskret med vilje: eleven
skal ikke lægge mærke til det, men den, der fejlsøger et billede, skal
kunne læse nummeret uden at åbne udviklerværktøjer. */
.fs-question-id {
font-size: 11px; line-height: 1; letter-spacing: .04em;
color: var(--fs-text-soft); opacity: .55;
margin: 6px 0 0; text-align: start; font-variant-numeric: tabular-nums;
user-select: text;
}
/* ══════ Cookiebots eget svævende mærkat ══════
Det sad fast i nederste venstre hjørne på HVER side — også midt i en
prøve, hvor det lagde sig oven på Forrige-knappen og ikke kunne flyttes.
Vejen til samtykket står i stedet ved siden af privatlivspolitikken (se
views/front/partials/politik-links.php), hvor folk leder efter den slags.
Slå den også fra i Cookiebot-dashboardet — så bliver den slet ikke
tegnet. Reglen her er sikkerhedsnettet, hvis indstillingen skifter.
Selve samtykkevinduet er urørt: det er kun det lille runde mærkat. */
#CookiebotWidget { display: none !important; }
/* ══════ Privatlivspolitik og cookieindstillinger ══════
Parret står på hver eneste flade, eleven kommer forbi, men to steder:
nederst i venstre hjørne på desktop, og i flowet efter det sidste, der
står på siden, på mobil — dér er hjørnet optaget af Forrige og Start.
Diskret er hele pointen: det skal kunne findes, ikke ses. */
.fs-politik-links { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.4; }
.fs-politik-link { color: var(--fs-text-soft); text-decoration: underline;
text-underline-offset: 3px; opacity: .72; }
.fs-politik-link:hover { opacity: 1; color: var(--fs-navy); }
.fs-politik-skil { color: var(--fs-text-soft); opacity: .4; }
/* Cookiedelen bærer skillestregen, så der aldrig står en streg alene, når
kunden ikke bruger Cookiebot. hidden slår ikke igennem af sig selv —
en display-regel i vores eget ark vinder over browserens. */
.fs-politik-cookie { display: inline-flex; align-items: center; gap: 8px; }
.fs-politik-cookie[hidden] { display: none; }
/* Bundbjælken: uden for den blå knap, kun på desktop */
.fs-bottom-left { display: flex; align-items: center; gap: 16px; }
.fs-politik-bund { white-space: nowrap; }
@media (max-width: 760px) {
.fs-politik-bund { display: none !important; }
}
/* I flowet: efter sidste svarmulighed i prøven, under oplæsningen på
introskærmen. Kun på mobil — på desktop står parret nede i hjørnet. */
.fs-politik-flow { display: none; }
@media (max-width: 760px) {
.fs-politik-flow { display: flex; flex-wrap: wrap; margin-top: 20px; }
.fs-politik-intro { margin-top: 26px; }
}
/* Prøveoversigten og resultatsiden: ude i det grå under indholdet, i
venstre side, på både mobil og desktop. Resultatsiden ligger i en
.fs-surface, der selv har kanten — dér skal der ikke lægges mere til. */
.fs-politik-side { display: flex; flex-wrap: wrap; margin-top: 30px; }
/* Oversigten er derimod i fuld bredde, og kanten bor på indholdet indeni.
--fs-hjoerne er lavet til netop det: den flugter med indholdet, også
når skærmen er bredere end --fs-maxw og indholdet står midtstillet. */
.fs-surface-page > .fs-politik-side {
margin-top: 0;
padding: 0 var(--fs-hjoerne) clamp(40px, 5vw, 72px);
}
/* ════════════ Mørk tilstand: en neutral topbjælke ════════════
Kundernes logoer har alle mulige farver — ét af dem er gult — og med
blå navigation, blåt navn og en blå pille oveni bliver bjælken spraglet.
I mørk tilstand holdes den derfor i hvidt og gråt. Det eneste, der må
lyse deroppe, er "bestil mere tid": den er lys på mørk bund, og dét er
netop pointen med en fremhævning.
Det blå er IKKE væk fra siden — kurven på Din fremgang, knapperne og
profilvinduet beholder accenten. Det er kun bjælken, der skal være
rolig, fordi den deler plads med et logo, vi ikke bestemmer over. */
.fs-dark { color-scheme: dark; }
.fs-dark .fs-topbar {
/* Neutral bjælke: teksten farver, ikke accenten */
--fs-bar-accent: var(--fs-text);
--fs-bar-accent-tekst: var(--fs-bg);
--fs-bar-tekst: var(--fs-text-soft);
}
/* .fs-link er blå i bunden. I en topbjælke skal den følge bjælken — i lys
er det den samme blå som før, i mørk bliver den dæmpet grå. */
.fs-topbar .fs-link { color: var(--fs-bar-tekst); }
/* Flader, der bar accenten, kan ikke bare blive hvide — en næsten hvid
pille bag et menupunkt råber mere end den blå gjorde. De får en lysning
i stedet, og teksten bliver stående lys. */
.fs-dark .fs-nav-aktiv-pille .fs-topbar-right a.fs-nav.er-aktiv,
.fs-dark .fs-nav-stil-knap.fs-nav-aktiv-pille .fs-topbar-right > a.fs-nav.er-aktiv,
.fs-dark .fs-topbar-skole.fs-nav-aktiv-pille .fs-topbar-right > .fs-drop > .fs-drop-knap.er-aktiv {
background: rgba(255, 255, 255, 0.10); color: var(--fs-text);
}
.fs-dark .fs-cta-kant .fs-topbar-right > a.fs-cta-knap {
border-color: rgba(255, 255, 255, 0.28); color: var(--fs-text);
}
/* Bakkens valg: baggrunden var --fs-field-bg, og den ligger så tæt på
bakkens egen flade i mørk tilstand (0.13 mod 0.125 i lyshed), at man
ikke kunne se, hvor musen var. En lysning virker på enhver mørk bund. */
.fs-dark .fs-drop-menu a:hover,
.fs-dark .fs-drop-menu button:hover { background: rgba(255, 255, 255, 0.09); }
/* Kortenes ramme i mørk tilstand: knap synlig. Med en tydelig streg om
hvert kort bliver siden et gitter af kasser — og helt uden ramme flyder
kortene sammen med fladen. En hårfin lysning gør begge dele, og den
samme streg lægges nu også om undervisningskortene, som slet ingen
havde. */
.fs-dark .fs3-kort { border-color: rgba(255, 255, 255, 0.06); }
.fs-dark .fs-uv-kort { border: 1px solid rgba(255, 255, 255, 0.06); }
/* ════════ Mørk tilstand, anden runde ════════
Fundet ved en gennemgang af hele arket. Mønsteret er det samme hver
gang: en farve, der er regnet til en LYS flade, står tilbage, når
fladen bliver mørk. Enten en hardkodet lys hex, eller to variabler der
ligger så tæt, at forskellen forsvinder. */
/* "Bestil adgang" i burgermenuen. Uden for burgeren er den en lys pille
med mørk skrift; i burgeren fjernes pillen, men skriften blev stående
mørk på en næsten sort bjælke. Den regel, der tidligere reddede den,
var netop den, jeg fjernede, da topbjælkerne blev lagt om. */
@media (max-width: 860px) {
.fs-dark .fs-cta-fyldt .fs-topbar-right > a.fs-cta-knap { color: var(--fs-text); }
}
/* Tallet, man står på, i gennemgangens bundnavigation. Signalfarverne
løftes til lyshed 62% i mørk, så hvid skrift falder til 2,1:1 på grøn. */
.fs-dark .fs-result-nav-item.is-right.is-current,
.fs-dark .fs-result-nav-item.is-wrong.is-current { color: #101418; }
/* Kontakternes slukkede bane var den lyse tilstands grå — og dermed
fladens lyseste element i mørk, hvor SLUKKET råbte højere end tændt. */
.fs-dark .fs-kontakt,
.fs-dark .fs-minikontakt { background: color-mix(in srgb, var(--fs-text) 22%, transparent); }
/* Bakkens valg i skolens eksportmenu — samme to farver med 0,005 i
lysforskel som elevens bakke havde. */
.fs-dark .fs3-eksport-menu a:hover { background: rgba(255, 255, 255, 0.09); }
/* --fs-field-bg regnes af baggrunden og lander oven i --fs-white: to
flader med 2 af 255 i forskel. Alt, der skal løfte sig fra et kort,
får en lysning i stedet. */
.fs-dark .fs3-konklusion,
.fs-dark .fs3-brugerredigering,
.fs-dark .fs3-bar { background: rgba(255, 255, 255, 0.09); }
/* Fokusringen om kontakten var hardkodet i den lyse blå og forsvandt på
mørk bund. Tastaturbrugere har ingen anden markering. */
.fs-switch input:focus-visible + .fs-switch-spor {
outline: 2px solid var(--fs-navy); outline-offset: 2px; box-shadow: none;
}
/* Kort bygget i indholdseditoren er kridhvide — cb-indhold.css er
genereret og må ikke redigeres, så de slås her. Ingen !important: kort,
kunden selv har givet en farve, beholder deres. */
.fs-dark .cb-indhold .is-card,
.fs-dark .cb-indhold .is-container .is-card,
.fs-dark .cb-indhold .bg-white { background-color: var(--fs-surface); color: var(--fs-text); }
/* ══════════ API-dokumentationen ══════════
Siden står for sig selv: ingen portalmenu, ingen elevtopbar. Adressen kan
sendes videre i en mail — til et IT-firma eller til en AI, der skal skrive
koden — og så skal modtageren ikke først finde ud af, hvad resten er.
Sidemenuen er hele forskellen på en mur og et opslagsværk. */
/* ── API-dokumentationen ──────────────────────────────────────────────────
*
* Den første udgave gav samme visuelle vægt til alt: 13 udfoldede kort,
* overskrifter i næsten samme størrelse som underoverskrifterne, og ingen
* luft mellem afsnittene. Man fik hovedpine af at åbne den.
*
* Her er hierarkiet gjort tydeligt — h1 stort, h2 med en streg over og
* dobbelt luft, h3 småt og roligt — og opslagsværket er foldet sammen.
*/
.dk-body { background: var(--fs-bg); }
.dk { --dk-bred: 1560px; --dk-rail: 244px; --dk-luft: 72px;
/* Kodeflader skal have samme tone, uanset om de står på siden eller inde
i et hvidt kort. Ellers forsvinder eksemplerne inde i adresserne. */
--dk-kode-bg: #f5f7f9;
--dk-chip: #e8edf2;
--dk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
background: var(--fs-bg); min-height: 100vh; }
.dk [id] { scroll-margin-top: 96px; }
/* Toppen */
.dk-top { position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 14px 32px; background: var(--fs-white);
border-bottom: 1px solid var(--fs-border); }
.dk-top-navn strong { display: block; font-size: 15px; line-height: 1.2;
color: var(--fs-navy); }
.dk-top-navn span { font-size: 12px; color: var(--fs-text-soft); }
.dk-top-hoejre { display: flex; align-items: center; gap: 20px; }
.dk-top-link { font-size: 13px; color: var(--fs-text-soft); text-decoration: none;
white-space: nowrap; }
.dk-top-link::before { content: '←'; margin-inline-end: 6px; }
.dk-top-link:hover { color: var(--fs-navy); }
.dk-sprog { display: inline-flex; gap: 2px; padding: 3px;
border: 1px solid var(--fs-border); border-radius: 9px; background: var(--fs-bg); }
.dk-sprog a { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 6px;
color: var(--fs-text-soft); text-decoration: none; }
.dk-sprog a.er-valgt { background: var(--fs-navy); color: #fff; }
.dk-sprog a:not(.er-valgt):hover { color: var(--fs-navy); }
/* Krop og menu */
/* Sidemenuen er en FAST rail i skærmens venstre kant, ikke en spalte inde
i en centreret kasse. Før stod den 160 px inde fra kanten, og indholdet
fik 768 px af en 1440 px skærm — kodeeksemplerne endte med en rullebjælke
i et felt på 279 px, mens der stod en håndsbred tom luft på hver side. */
.dk-krop { max-width: var(--dk-bred); margin: 0 auto;
padding: 0 40px 120px calc(var(--dk-rail) + 40px); }
.dk-menu { position: fixed; top: 72px; inset-inline-start: 0; bottom: 0; width: var(--dk-rail);
display: flex; flex-direction: column; gap: 1px; padding: 28px 16px 40px;
overflow-y: auto; background: var(--fs-white);
border-inline-end: 1px solid var(--fs-border); z-index: 10; }
.dk-menu a { display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 6px 12px; border-radius: 7px; font-size: 13.5px;
color: var(--fs-text-soft); text-decoration: none; }
/* Railen er hvid, så hover skal være den GRÅ flade — ellers hvid på hvid */
.dk-menu a:hover { background: var(--fs-bg); color: var(--fs-navy); }
.dk-menu-under { padding-inline-start: 22px !important; }
.dk-menu-under em { font-style: normal; font-size: 11px; color: var(--fs-text-soft);
background: var(--fs-bg); border-radius: 20px; padding: 1px 7px; }
.dk-menu-gruppe { margin: 20px 0 4px; padding: 0 12px; font-size: 11px;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--fs-text-soft); }
.dk-indhold { padding: 40px 0 0; min-width: 0; }
.dk-indhold h1 { font-size: 34px; line-height: 1.2; font-weight: 700;
color: var(--fs-navy); margin: 0 0 var(--dk-luft); letter-spacing: -.01em; }
.dk-indhold section { margin-bottom: var(--dk-luft); }
.dk-indhold section + section { padding-top: var(--dk-luft);
border-top: 1px solid var(--fs-border); }
.dk-indhold h2 { font-size: 24px; font-weight: 700; color: var(--fs-navy);
margin: 0 0 12px; letter-spacing: -.01em; }
/* Luft OVER en h3, ellers klistrer den til afsnittet før og læser som en
fortsættelse i stedet for en ny ting. Kortene og trinnene har deres egen
ramme og skal ikke have den. */
.dk-indhold h3 { font-size: 15px; font-weight: 600; color: var(--fs-text);
margin: 34px 0 10px; }
.dk-trin h3, .dk-to h3 { margin-top: 0; }
.dk-indhold h4 { font-size: 11px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--fs-text-soft); margin: 0 0 10px; }
.dk-lead { font-size: 15px; line-height: 1.65; color: var(--fs-text-soft);
margin: 0 0 24px; max-width: 68ch; }
.dk-note { font-size: 13.5px; line-height: 1.6; color: var(--fs-text-soft);
margin: 16px 0 0; max-width: 72ch; }
.dk-indhold code { font-family: var(--dk-mono);
font-size: .9em; background: var(--dk-chip); border-radius: 5px;
padding: 1px 6px; color: var(--fs-navy); }
/* Båndet, der siger, hvem siden er til */
.dk-baand { display: flex; gap: 14px; align-items: flex-start;
padding: 16px 20px; margin: 32px 0 40px; border-radius: 12px;
background: var(--fs-white); border: 1px solid var(--fs-border); }
.dk-baand i { font-size: 17px; color: var(--fs-navy); margin-top: 1px; }
.dk-baand strong { display: block; font-size: 14px; color: var(--fs-navy); }
.dk-baand span { display: block; font-size: 13.5px; line-height: 1.55;
color: var(--fs-text-soft); margin-top: 3px; }
/* Kodeblokke */
.dk-kode { position: relative; }
.dk-kode pre { margin: 0; padding: 16px 52px 16px 18px; border-radius: 10px;
background: var(--dk-kode-bg); border: 1px solid var(--fs-border);
font-family: var(--dk-mono); font-size: 12.5px;
line-height: 1.7; overflow-x: auto; color: var(--fs-text); }
.dk-kode-slank pre { padding: 10px 46px 10px 14px; font-size: 12px; }
.dk-kopi { position: absolute; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px;
display: grid; place-items: center; border: 1px solid var(--fs-border);
border-radius: 7px; background: var(--fs-white); color: var(--fs-text-soft);
z-index: 1;
cursor: pointer; font-size: 13px; }
.dk-kopi:hover { color: var(--fs-navy); border-color: var(--fs-navy); }
/* Fire ting, den kan */
.dk-fire { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 14px; }
.dk-fire > div { padding: 18px 20px; border-radius: 12px;
background: var(--fs-white); border: 1px solid var(--fs-border); }
.dk-fire strong { display: block; font-size: 14px; color: var(--fs-navy);
margin-bottom: 5px; }
.dk-fire span { font-size: 13px; line-height: 1.6; color: var(--fs-text-soft); }
/* Kom i gang */
.dk-trin { display: grid; grid-template-columns: 30px minmax(0, 1fr);
gap: 16px; margin-bottom: 24px; }
.dk-trin-nr { width: 30px; height: 30px; display: grid; place-items: center;
border-radius: 50%; background: var(--fs-navy); color: #fff;
font-size: 13px; font-weight: 600; }
.dk-trin h3 { margin-bottom: 8px; }
/* De to forløb */
.dk-to { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px; }
.dk-to > div { padding: 22px 24px; border-radius: 12px;
background: var(--fs-white); border: 1px solid var(--fs-border); }
.dk-to ol { margin: 0; padding-inline-start: 20px; }
.dk-to li { font-size: 13.5px; line-height: 1.75; color: var(--fs-text-soft);
margin-bottom: 6px; }
/* Giv det til jeres AI */
.dk-ai-linje { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px;
gap: 14px; align-items: center; padding: 16px 18px; border-radius: 12px;
background: var(--fs-white); border: 1px solid var(--fs-border);
margin-bottom: 12px; }
.dk-ai-linje > i { font-size: 17px; color: var(--fs-navy); }
.dk-ai-linje strong { display: block; font-size: 13.5px; color: var(--fs-navy);
margin-bottom: 7px; }
.dk-ai-aabn { display: grid; place-items: center; width: 30px; height: 30px;
border-radius: 7px; color: var(--fs-text-soft); text-decoration: none; }
.dk-ai-aabn:hover { color: var(--fs-navy); background: var(--fs-bg); }
/* Opslagsværket */
.dk-ref-top { display: flex; align-items: baseline; justify-content: space-between;
gap: 20px; margin-bottom: 12px; }
.dk-ref-top h2 { margin: 0; }
.dk-foldud { border: 1px solid var(--fs-border); border-radius: 8px;
background: var(--fs-white); color: var(--fs-text-soft); cursor: pointer;
font-size: 12.5px; padding: 6px 14px; white-space: nowrap; }
.dk-foldud:hover { color: var(--fs-navy); border-color: var(--fs-navy); }
.dk-gruppe { margin: 36px 0 12px !important; font-size: 11px !important;
font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase;
color: var(--fs-text-soft) !important; }
.dk-rute { border: 1px solid var(--fs-border); border-radius: 11px;
background: var(--fs-white); margin-bottom: 8px; overflow: hidden; }
.dk-rute[open] { border-color: var(--fs-navy); }
.dk-rute summary { display: flex; align-items: center; gap: 14px;
padding: 14px 18px; cursor: pointer; list-style: none; }
.dk-rute summary::-webkit-details-marker { display: none; }
.dk-rute summary:hover { background: var(--fs-bg); }
.dk-rute summary > i { margin-inline-start: auto; font-size: 12px;
color: var(--fs-text-soft); transition: transform .15s; }
.dk-rute[open] summary > i { transform: rotate(180deg); }
.dk-metode { flex: none; width: 52px; text-align: center; padding: 3px 0;
border-radius: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
color: #fff; background: var(--fs-navy); }
/* POST skal kunne skelnes fra GET på et blik, og den skelnen må ikke hvile
på en fast farve. Den var hårdkodet grøn, og hos en kunde med en grøn
husfarve blev de to mærkater næsten ens. Nu er POST husfarven gjort
mørkere: forskellen følger paletten og findes hos enhver kunde. */
.dk-metode-post { background: color-mix(in srgb, var(--fs-navy) 62%, #000); }
.dk-sti { flex: none; background: none !important; padding: 0 !important;
font-size: 13.5px !important; font-weight: 600; color: var(--fs-navy) !important; }
.dk-rute-kort { font-size: 13px; color: var(--fs-text-soft);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dk-rute[open] .dk-rute-kort { display: none; }
.dk-rute-krop { padding: 4px 18px 22px; border-top: 1px solid var(--fs-border); }
.dk-rute-tekst { font-size: 14px; line-height: 1.6; color: var(--fs-text);
margin: 18px 0 0; max-width: 72ch; }
.dk-kraever { font-size: 12.5px; color: var(--fs-text-soft); margin: 14px 0 22px; }
/* Målt: den længste JSON-linje er 66 tegn ≈ 570 px ved 12,5 px mono.
50/50 gav kodespalten 279 px — derfor rullebjælken. Felttabellen
klarer sig med mindre, så den giver plads. */
.dk-rute-to { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: 36px; align-items: start; }
.dk-rute-to.er-en { grid-template-columns: minmax(0, 1fr); }
.dk-felt-tabel { width: 100%; border-collapse: collapse; }
.dk-felt-tabel td { padding: 8px 0; vertical-align: top; font-size: 13px;
line-height: 1.55; color: var(--fs-text-soft);
border-bottom: 1px solid var(--fs-border); }
.dk-felt-tabel tr:last-child td { border-bottom: none; }
.dk-felt-tabel td:first-child { width: 38%; padding-inline-end: 16px; }
.dk-type { display: block; font-size: 11px; color: var(--fs-text-soft);
margin-top: 3px; }
.dk-status { background: var(--dk-chip); border-radius: 5px;
padding: 1px 6px; font-size: 11px; color: var(--fs-navy); letter-spacing: 0; }
/* Tabeller */
.dk-tabel { width: 100%; border-collapse: collapse; background: var(--fs-white);
border: 1px solid var(--fs-border); border-radius: 11px; overflow: hidden; }
.dk-tabel th { text-align: start; font-size: 11px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--fs-text-soft);
padding: 12px 18px; border-bottom: 1px solid var(--fs-border); }
.dk-tabel td { padding: 11px 18px; font-size: 13px; line-height: 1.55;
color: var(--fs-text-soft); border-bottom: 1px solid var(--fs-border);
vertical-align: top; }
.dk-tabel tr:last-child td { border-bottom: none; }
.dk-tabel-fejl td:first-child { width: 20%; white-space: nowrap; }
.dk-tabel-fejl td:nth-child(2) { width: 40%; }
/* Mellemstore skærme: railen bliver, men indholdet må ikke presses. */
@media (max-width: 1240px) {
.dk { --dk-rail: 208px; }
.dk-rute-to { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 980px) {
/* Railen ud af det faste flow igen — ellers ligger den oven i teksten */
.dk-krop { padding: 0 20px 80px; }
.dk-menu { position: static; width: auto; inset: auto; flex-direction: row;
flex-wrap: wrap; gap: 6px; padding: 20px 0 0; overflow: visible;
background: none; border-inline-end: none; }
.dk-menu-gruppe { display: none; }
.dk-menu a { border: 1px solid var(--fs-border); background: var(--fs-white); }
.dk-menu-under { padding-inline-start: 12px !important; }
.dk-indhold h1 { font-size: 27px; }
.dk-rute-kort { display: none; }
}
/* ── Integration: underfaner og en rolig stribe ───────────────────────────
*
* Fem kort i fuld bredde, klasket sammen uden en millimeter imellem, alle
* med en h2 der lignede sidens h1. Man kunne ikke se, hvor ét emne holdt op.
*
* .fs3-indstilflade nulstiller kortenes margin (linje ~3546), og med ét kort
* pr. fane sås det aldrig. Luften skal tilbage — og emnerne deles.
*/
.fs3-indstilflade [data-fane-sektion] .fs-indstilling-kort { margin-bottom: 20px; }
.fs3-indstilflade [data-fane-sektion] .fs-indstilling-kort:last-child { margin-bottom: 0; }
.fs3-indstilflade [data-fane-sektion] .fs-indstilling-kort h2 { font-size: 17px; }
/* Adresse, dokumentation og pulje: det skolen skal videresende, og det
eneste tal de skal holde øje med. Én stribe, ikke et kort med tre afsnit. */
/* Adressen er overskriften — det er dét, skolen sender videre. Alt andet
er baggrund og står i én rolig linje under, der bryder af sig selv.
Den gamle udgave havde tre lige store spalter til tre uens ting, og hver
eneste brydepunktsfejl kom derfra: en URL, et link og et tal har ikke
samme naturlige bredde, og et grid, der påstår det, bliver klemt. */
.fs3-api-hero { padding: 24px 28px 22px; margin-bottom: 26px;
background: var(--fs-white); border: 1px solid var(--fs-border); border-radius: 16px; }
.fs3-api-hero .fs3-felt-etiket { display: block; margin: 0 0 10px;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--fs-text-soft); }
/* Adressen og dens knap: én række, hvor feltet tager al pladsen */
.fs3-api-adresse { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.fs3-api-adresse code { flex: 1 1 320px; min-width: 0; padding: 11px 14px;
border: 1px solid var(--fs-border); border-radius: 10px; background: var(--fs-bg);
font-family: var(--dk-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
font-size: 14px; color: var(--fs-navy); line-height: 1.4;
overflow-wrap: anywhere; }
.fs3-api-kopi { display: inline-flex; align-items: center; gap: 7px; flex: none;
padding: 0 16px; border: 1px solid var(--fs-border); border-radius: 10px;
background: var(--fs-white); color: var(--fs-navy); cursor: pointer;
font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.fs3-api-kopi:hover { border-color: var(--fs-navy); background: var(--fs-bg); }
/* Baggrundslinjen. flex-wrap gør media queries overflødige: bliver der for
lidt plads, falder delene ned under hinanden af sig selv. */
.fs3-api-meta { display: flex; flex-wrap: wrap; align-items: baseline;
gap: 8px 26px; margin-top: 18px; padding-top: 16px;
border-top: 1px solid var(--fs-border); font-size: 13px; }
.fs3-api-dok { display: inline-flex; align-items: baseline; gap: 8px;
font-weight: 600; color: var(--fs-navy); text-decoration: none; }
.fs3-api-dok:hover { text-decoration: underline; }
.fs3-api-dok > i { flex: none; }
.fs3-api-dok > span .bi-box-arrow-up-right { font-size: 11px; opacity: .65; margin-inline-start: 6px; }
.fs3-api-koder { color: var(--fs-text-soft); }
.fs3-api-koder.er-lav { color: var(--fs-navy); font-weight: 600; }
.fs3-api-bestil { margin-inline-start: 10px; color: var(--fs-navy); font-weight: 600;
text-decoration: none; white-space: nowrap; }
.fs3-api-bestil::after { content: '\00a0\2192'; opacity: .6; }
.fs3-api-bestil:hover { text-decoration: underline; }
/* Underfanerne: Nøgler · Beskeder · Kaldlog, med handlingen yderst */
.fs3-underfaner { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 20px;
border-bottom: 1px solid var(--fs-border); }
.fs3-underfaner [data-api-fane] { display: inline-flex; align-items: center; gap: 7px;
height: auto; padding: 10px 16px; margin-bottom: -1px; border: none;
border-bottom: 2px solid transparent; background: none; cursor: pointer;
font: inherit; font-size: 14px; font-weight: 500; color: var(--fs-text-soft); }
.fs3-underfaner [data-api-fane]:hover { color: var(--fs-navy); }
.fs3-underfaner [data-api-fane].er-aktiv { color: var(--fs-navy); font-weight: 600;
border-bottom-color: var(--fs-navy); }
.fs3-underfaner em { font-style: normal; font-size: 11px; font-weight: 600;
background: var(--fs-bg); border-radius: 20px; padding: 1px 8px; }
/* Grund-.fs-btn er 84 px høj (prøvens topbjælke). Uden den her override
bliver handlingsknappen en klods midt i fanebåndet. */
.fs3-underfane-knap { display: inline-flex; align-items: center; gap: 8px;
margin: 0 0 8px auto; height: 38px !important; min-height: 0 !important;
font-size: 13.5px !important; padding: 0 16px !important; border-radius: 9px !important; }
.fs3-underfane-knap.er-aaben .bi-plus-lg { transform: rotate(45deg); }
.fs3-underfane-knap .bi-plus-lg { transition: transform .15s; }
/* Oplysningsstriben. Uden CSS lå teksten som løs sort brødtekst oven på
kortet under. Ingen farvet venstrekant — en rolig flade og et ikon rækker. */
.fs3-oplys { display: flex; gap: 14px; align-items: flex-start;
padding: 15px 18px; margin-bottom: 18px; border-radius: 12px;
background: var(--fs-bg); border: 1px solid var(--fs-border); }
.fs3-oplys > i { flex: none; font-size: 16px; color: var(--fs-text-soft); margin-top: 1px; }
.fs3-oplys strong { display: block; font-size: 13.5px; color: var(--fs-navy); }
.fs3-oplys span { display: block; font-size: 13px; line-height: 1.55;
color: var(--fs-text-soft); margin-top: 3px; max-width: 74ch; }
/* Opret-formularen folder sig ud i kortet, hvor knappen står */
.fs3-opretfelt { margin-top: 22px; padding-top: 22px;
border-top: 1px solid var(--fs-border); }
@media (max-width: 860px) {
.fs3-underfaner { overflow-x: auto; }
.fs3-underfane-knap { margin-inline-start: 0; }
}
/* Plusset drejer til et kryds, når formularen står åben */
.fs3-underfane-knap.er-aaben .bi-plus-lg { transform: rotate(45deg); }
.fs3-underfane-knap .bi-plus-lg { transition: transform .15s; }
/* ══════ Prøvefelterne på Design-siden (/tema-proeve) ══════
Én knap midt i et lille felt på kundens baggrundsfarve. Knappen er sin
egen ramme her og ikke fast i hjørnet, og feltet skifter farve med
.fs-dark på som elevens side. Står SIDST i arket med vilje:
position-reglen skal slå stilarternes egne top/right (samme
specificitet, så rækkefølgen afgør). */
.fs-tema-proeve { margin: 0; padding: 0; min-height: 100vh;
display: flex; align-items: center; justify-content: center;
transition: background 300ms ease; }
.fs-tema-proeve .fs-tema { position: relative; inset: auto; }
/* ---------- Quiz og spil (plugin) ----------
Kortene ER undervisningsvideoernes lektionskort (fs-uv-kort) med spillets
ikon — samme gitter, samme højde, samme farve på ikonet. Her står kun det,
der er spillenes eget: gruppen på prøveoversigten, låsen og fuldskærmen. */
/* Gruppen er sit EGET .fs-groups-element, og derfor lagde tre afstande sig
oven i hinanden: den forriges bundpolstring (op til 160px), de 40px her
og gruppens egen overskriftsluft. Der stod tre gange så meget luft over
"Quiz og spil" som mellem to prøvegrupper på den samme side, og springet
var det første, kunden så.
Rytmen skal være den samme, uanset at markuppen er delt i to: den
forrige sektion lægger sin bundluft fra sig, når gruppen følger efter,
og så er det kun .fs-group-heads egen topluft der er tilbage — præcis
som mellem to grupper inde i det samme element. */
.fs-groups:has(+ .fs-quiz-gruppe) { padding-bottom: 0; }
.fs-quiz-gruppe { margin-top: 0; }
/* .fs-uv trækker sin egen, mindre overskriftsluft med. Her skal den være
prøvegruppernes, ellers står springet stadig skævt — bare mindre. */
.fs-quiz-gruppe > .fs-group-head {
padding-top: calc(clamp(56px, 7vw, 120px) * var(--fs-space));
}
.fs-uv-kort.er-laast { opacity: .72; }
.fs-uv-kort.er-laast .fs-uv-kort-ikon { background: var(--fs-text-soft); }
/* Kortlinjen må fylde to linjer og skubber ikke kortets højde: teksten er
kundens egen og kan være længere end videoernes "3 videoer · 12 min". */
.fs-quiz-side .fs-uv-kort-linje, .fs-quiz-gruppe .fs-uv-kort-linje {
line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; padding-inline-end: 44px;
}
/* De to quizzer tegner sig selv i fladen — de får bare et hvidt kort */
.fs-quiz-flade {
background: var(--fs-surface); border-radius: var(--fs-radius); padding: 28px;
color: var(--color-text, var(--fs-text));
}
.fs-quiz-flade .hidden { display: none; }
@media (max-width: 560px) { .fs-quiz-flade { padding: 16px; } }
/* Scenespillene fylder hele ruden: tema-knap og sprogvælger væk, så de
ikke ligger oven på spillets egne knapper. Luk-krydset er et link. */
body.fs-quiz-fuld-side #fs-tema, body.fs-quiz-fuld-side .fs-sprog, body.fs-quiz-fuld-side .fs-kig-stribe { display: none !important; }
.fs-quiz-fuld .hidden, .fs-quiz-fuld-side .hidden { display: none; }
a.vp-close, a.pk-close, a.oh-close { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.vp-gate-link, .pk-gate-link, .oh-gate-link { color: inherit; text-decoration: underline; font-size: 15px; }
/* ══════════ Telefonfelt med landekode ══════════
Vælgeren og nummeret er ÉT felt for øjet: landekoden sidder i venstre kant
med en tynd streg imellem, så det læses som "+45 | 12 34 56 78" og ikke
som to felter, der tilfældigvis står ved siden af hinanden.
Grunden til at vælgeren findes: nummeret gemmes kanonisk (+4512345678), og
stod dét i feltet, ville den første elev, der synes det ser mærkeligt ud,
slette landekoden og gemme — og så er den kanoniske form væk igen. */
/* ══════════ Telefonfelt med landekode ══════════
Vælgeren står VED SIDEN AF nummerfeltet, ikke omkring det: feltet
beholder sin egen klasse og dermed sin ramme, sit fokus og sin
fejlmarkering de tre steder, partialen bruges. Rækken strækker
vælgeren til feltets højde, så de to bokse flugter uanset hvilken
polstring feltet har. */
/* Rammen er en , fordi den står inde i en