/* ============================================================================
   DLN MobilOrdre — salgswebsite
   Designsystem. Tokens og skalaer stammer fra designpakken
   "design_handoff_mobilordre_website" (DLN MobilOrdre v2.dc.html).

   To bindende designbeslutninger:
     1. INGEN runde hjoerner. border-radius er 0 overalt.
     2. INGEN gradienter og ingen skygger — bortset fra login-menuens ene.
   Undtagelser (og kun dem):
     • Et skaermbillede fra telefonen (.phoneshot img) har runde hjoerner og en
       bloed skygge, saa det ligner en telefon. Brugerbeslutning 2026-09-17.
     • Headerens to handlinger og soegefeltet har 8px hjoerner.
       Brugerbeslutning 2026-09-22.
   NB: sidernes egne knapper (.btn) er stadig firkantede. Skal de ogsaa rundes,
   er det ét sted: .btn. Spoerg foerst — det aendrer hele sitets udtryk.
   Adskillelse sker med 1px kanter. Hold det.
   ========================================================================= */

/* --- Skrift: self-hostet variabel Archivo (400-900) ---------------------- */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
    --navy: #1D3783;
    --navy-deep: #142559;
    --navy-edge: #465B99;
    --navy-light: #384F92;
    --navy-track: #2F478D;

    --orange: #F5A800;
    --orange-hover: #FFBB1F;
    --orange-deep: #C98A00;
    --orange-ink: #4A3A10;
    --orange-tint: #FFFBF2;

    --cream: #EFEDE6;
    --cream-light: #FBFAF7;
    --cream-tile: #F7F4EC;
    --cream-press: #E7E3DA;
    --white: #FFFFFF;

    --border: #DBD6CC;
    --border-light: #E6E2D9;
    --border-input: #C9C3B7;

    --text: #1A1A17;
    --text-dark: #3A3A35;
    --text-muted: #5C5C56;
    --text-muted-2: #5C5850;
    --on-navy: #B7C2DC;
    --on-navy-2: #9EAAC9;

    --green: #1F6B41;
    --green-tint: #F1F7F3;
    --kicker-brown: #7A5A2E;
    --dash: #6F6A61;
    --error: #B3261E;
    --error-tint: #FCEFEE;

    --wrap: 1240px;
    --wrap-narrow: 1080px;
    --wrap-legal: 820px;
    --gutter: 40px;

    /* Headeren staar i to lag. Topbaren ruller vaek; hovedlinjen bliver haengende,
       saa det er dens hoejde, et ankerspring skal holde sig fri af. */
    --topbar-height: 36px;
    --header-height: 78px;
}

/* --- Nulstilling og basis ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--cream);
}

html { scroll-behavior: smooth; }

/* Headeren er sticky. Uden dette lander et ankerspring (fx ?master=erp#master-switch
   eller spring-til-indhold) med maalet gemt bag headeren. Regnes paa den
   SKRUMPEDE header, for saadan staar den, naar man er rullet ned. */
html { scroll-padding-top: calc(var(--topbar-height) + 58px + 16px); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
    font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--text);
    background: var(--cream);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--orange-deep); }

h1, h2, h3, h4 { text-wrap: pretty; }
p { text-wrap: pretty; }

button { font: inherit; color: inherit; }

/* Tastaturfokus skal altid kunne ses — ogsaa paa navy bund. */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    background: var(--orange);
    color: var(--navy);
    font-weight: 800;
    padding: 14px 20px;
}
.skip-link:focus {
    left: 12px;
    top: 12px;
    color: var(--navy);
}

/* --- Layoutbredder ------------------------------------------------------ */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-legal { max-width: var(--wrap-legal); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* --- Sektionsflader ----------------------------------------------------- */
.sec { padding-top: 88px; padding-bottom: 88px; }
.sec--tight { padding-top: 72px; padding-bottom: 72px; }
.sec--hero { padding-top: 80px; padding-bottom: 88px; }
.sec--pagehero { padding-top: 72px; padding-bottom: 72px; }
.sec--cta { padding-top: 56px; padding-bottom: 56px; }
.sec--flush-bottom { padding-bottom: 0; }

.bg-navy { background: var(--navy); color: var(--white); }
.bg-navy-deep { background: var(--navy-deep); color: var(--white); }
.bg-cream { background: var(--cream); }
.bg-white { background: var(--white); }
.bg-orange { background: var(--orange); }

.edge-top { border-top: 1px solid var(--border); }
.edge-bottom { border-bottom: 1px solid var(--border); }

/* --- Typografi ---------------------------------------------------------- */
.kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.kicker--orange { color: var(--orange); }
.kicker--brown { color: var(--kicker-brown); }
.kicker--muted { color: var(--text-muted-2); font-size: 10.5px; letter-spacing: 1.6px; margin-bottom: 12px; }
.kicker--onnavy { color: var(--on-navy-2); }

/* Kicker med orange streg foran — bruges over hero-overskrifter. */
.kicker-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.kicker-rule::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--orange);
    flex-shrink: 0;
}
.kicker-rule .kicker { margin: 0; }

/* Dansk har lange sammensatte ord — "haandvaerkervirksomhed" er bredere end en
   telefonskaerm ved hero-stoerrelse. Orddeling foerst (html lang="da"), og
   break-word som sikkerhedsnet, saa en overskrift aldrig kan skubbe siden
   vandret. Fanget af IngenSide_ScrollerVandret paa /nemhandel-2027. */
.title-hero,
.title-page,
.title-section {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Paa alt stoerre end en telefon er der plads til hele ord. Orddelingen
   ovenfor er en noedloesning til de smaa skaerme — uden dette knaekkes fx
   "dokumentation" midt over i en hero, selv om linjen har plads. */
@media (min-width: 769px) {
    .title-hero,
    .title-page,
    .title-section { hyphens: manual; }
}

.title-hero {
    font-weight: 900;
    font-size: clamp(32px, 6.2vw, 60px);
    line-height: .99;
    letter-spacing: -2.2px;
    margin: 0 0 24px;
}
.title-page {
    font-weight: 900;
    font-size: clamp(30px, 5.4vw, 52px);
    line-height: 1.01;
    letter-spacing: -2px;
    margin: 0 0 18px;
    max-width: 860px;
}
.title-section {
    font-weight: 900;
    font-size: clamp(27px, 4.4vw, 42px);
    line-height: 1.03;
    letter-spacing: -1.5px;
    margin: 0 0 18px;
    color: var(--navy);
}
.title-mid {
    font-weight: 900;
    font-size: clamp(25px, 3.6vw, 34px);
    line-height: 1.06;
    letter-spacing: -1.2px;
    margin: 0 0 16px;
    color: var(--navy);
}
.title-block {
    font-weight: 900;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.08;
    letter-spacing: -1.1px;
    margin: 0 0 10px;
    color: var(--navy);
}
.title-card {
    font-weight: 900;
    font-size: clamp(20px, 2.4vw, 24px);
    line-height: 1.1;
    letter-spacing: -.7px;
    margin: 0 0 8px;
    color: var(--navy);
}
.title-sub {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.4px;
    margin: 0 0 9px;
    color: var(--navy);
}
.title-tile {
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.3px;
    margin: 0 0 8px;
    color: var(--navy);
}

/* Overskrifter paa navy skal vaere hvide, uanset niveau. */
.bg-navy :where(.title-hero, .title-page, .title-section, .title-mid, .title-block, .title-card, .title-sub, .title-tile),
.bg-navy-deep :where(.title-hero, .title-page, .title-section, .title-mid, .title-block, .title-card, .title-sub, .title-tile),
.on-navy :where(.title-hero, .title-page, .title-section, .title-mid, .title-block, .title-card, .title-sub, .title-tile) { color: var(--white); }

.lede {
    font-size: 18.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}
.bg-navy .lede, .bg-navy-deep .lede, .on-navy .lede { color: var(--on-navy); }

.body-text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 16px;
}
.body-text:last-child { margin-bottom: 0; }
.bg-navy .body-text, .on-navy .body-text { color: var(--on-navy); }

.note {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
}
/* Samme note paa navy bund — fx forbeholdet under integrationskortene. */
.note--onnavy { color: var(--on-navy-2); max-width: 820px; }

.measure { max-width: 660px; }
.measure-wide { max-width: 760px; }
.measure-text { max-width: 700px; }
.measure-hero { max-width: 520px; }

.section-intro { margin-bottom: 44px; }

/* --- Knapper ------------------------------------------------------------ */
.btn {
    display: inline-block;
    border: 0;
    border-radius: 0;
    font-weight: 800;
    font-size: 15.5px;
    line-height: 1.2;
    padding: 16px 26px;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.btn--orange { background: var(--orange); color: var(--navy); }
.btn--orange:hover { background: var(--orange-hover); color: var(--navy); }

.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-deep); color: var(--white); }

.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--cream-press); color: var(--navy); }

.btn--outline-navy {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--navy);
    padding: 14.5px 24px;
}
.btn--outline-navy:hover { background: var(--navy); color: var(--white); }

.btn--outline-light {
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, .38);
    padding: 14.5px 24px;
}
.btn--outline-light:hover { border-color: var(--orange); color: var(--orange); }

.btn--secondary {
    background: var(--white);
    color: var(--navy);
    border: 1px solid var(--border-input);
}
.btn--secondary:hover { border-color: var(--navy); color: var(--navy); }

.btn--block { display: block; width: 100%; }
.btn--sm { font-size: 14.5px; padding: 14px 22px; }
.btn--lg { font-size: 16px; padding: 16px 28px; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Tekstlink med pil — bruges til "videre herfra"-links under sektioner. */
.link-arrow {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--navy);
    white-space: nowrap;
}
.link-arrow:hover { color: var(--orange-deep); }
.link-arrow--muted { font-weight: 700; color: var(--text-muted); }
.link-arrow--muted:hover { color: var(--navy); }
.link-arrow--onnavy { color: var(--white); }
.link-arrow--onnavy:hover { color: var(--orange); }

.link-row {
    display: flex;
    justify-content: flex-end;
    gap: 28px;
    padding-top: 18px;
    flex-wrap: wrap;
}
.link-row--start { justify-content: flex-start; }

/* --- Badges ------------------------------------------------------------- */
.badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 10px;
    margin-bottom: 16px;
}
.badge--orange { background: var(--orange); color: var(--navy); }
.badge--neutral { background: var(--cream); color: var(--text-muted); }

/* --- Haargitter: 1px "linjer" lavet af baggrund gennem gap --------------- */
.grid-hair {
    display: grid;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.grid-hair > * { background: var(--white); }

.grid-hair--navy { background: var(--navy-edge); border-color: var(--navy-edge); }
.grid-hair--navy > * { background: var(--navy-deep); }

.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Todelt indholdslayout (tekst + kort/billede). */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.split--hero { grid-template-columns: 1.1fr .9fr; }
.split--wide-right { grid-template-columns: .95fr 1.05fr; }
.split--56 { gap: 56px; }
/* Tekst til venstre, telefonbillede til hoejre: billedkolonnen er kun saa
   bred som telefonen, og de to midtstilles lodret mod hinanden. */
.split--phone { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; }

/* --- Kort og fliser ----------------------------------------------------- */
.card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 32px 30px;
}
.card--navy {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
    padding: 34px 32px;
}
.card--pad-sm { padding: 26px; }
.card--pad-lg { padding: 34px 32px; }

.tile { padding: 26px 24px; }
.tile--lg { padding: 30px 26px; }
.tile--md { padding: 28px 26px; }

.tile-body {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}
.grid-hair--navy .tile-body { color: var(--on-navy); }

/* Enkelt navy flise i et ellers hvidt gitter (fx trin 04). */
.tile--navy { background: var(--navy) !important; }
.tile--navy .title-sub, .tile--navy .title-tile { color: var(--white); }
.tile--navy .tile-body { color: var(--on-navy); }
.tile--navy .kicker--muted { color: var(--orange); }

.tile-name {
    font-weight: 900;
    font-size: 19px;
    color: var(--white);
    margin-bottom: 12px;
    letter-spacing: -.4px;
}
.tile-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13.5px;
    color: var(--on-navy);
}

/* --- Punktlister -------------------------------------------------------- */
.bullets {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bullets li {
    display: flex;
    gap: 10px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-dark);
}
.bullets li::before {
    content: "·";
    color: var(--orange);
    font-weight: 900;
    flex-shrink: 0;
}
.bullets--arrow li::before { content: "→"; font-size: .95em; }
/* Flueben-liste (brugertyper). En begraensning vises som tankestreg og daempet
   tekst — ikke som et rødt kryds. Det er en afgraensning, ikke en fejl. */
.bullets--check li::before { content: "✓"; color: var(--green); }
.bullets--check li.is-excluded::before { content: "—"; color: var(--dash); }
.bullets--check li.is-excluded { color: var(--text-muted); }
.bullets--tight { gap: 8px; }
.bullets--tight li { font-size: 15px; line-height: 1.5; }
.on-navy .bullets li, .bg-navy .bullets li, .card--navy .bullets li { color: var(--on-navy); }

.col-heading {
    font-weight: 800;
    font-size: 16px;
    color: var(--navy);
    margin: 0 0 10px;
}
.on-navy .col-heading, .card--navy .col-heading { color: var(--white); }

.col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.col-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

/* --- Matrix (integrationstabellen) -------------------------------------- */
/* Rigtig <table> med gitterlayout: semantikken bevares for skaermlaesere og
   soegemaskiner, mens kolonnerne kan styres frit med grid. */
.matrix {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    border: 1px solid var(--border);
    background: var(--white);
    border-collapse: collapse;
    width: 100%;
}
.matrix thead, .matrix tbody, .matrix tr { display: contents; }
.matrix__cell {
    padding: 15px 18px;
    font-size: 15px;
    line-height: 1.45;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    text-align: left;
}
.matrix tbody tr:last-child .matrix__cell { border-bottom: 0; }
.matrix__cell--head {
    background: var(--navy);
    color: var(--white);
    font-weight: 800;
    font-size: 14.5px;
    border-bottom: 0;
}
.matrix__cell--label {
    font-weight: 700;
    color: var(--text-dark);
}
.matrix__cell--rolelabel {
    color: var(--on-navy-2);
    font-size: 12.5px;
    font-weight: 700;
}
/* Uniconta-kolonnen er fremhaevet — den er det dybeste vi kan. */
.matrix__cell--feature { background: var(--cream-light); }
.matrix__cell--head.matrix__cell--feature { background: var(--navy); color: var(--orange); }
.matrix__yes { color: var(--green); font-weight: 700; }
/* Manglende evne vises som tankestreg — aldrig ordet "Nej". */
.matrix__no { color: var(--dash); }

.matrix-note {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 820px;
}

/* Kortvisning af matrixen — traeder i stedet for tabellen paa mobil. */
.matrix-cards { display: none; }
.matrix-card { border: 1px solid var(--border); background: var(--white); margin-bottom: 16px; }
.matrix-card__head {
    background: var(--navy);
    color: var(--white);
    font-weight: 800;
    font-size: 15px;
    padding: 12px 16px;
}
.matrix-card__head--feature { color: var(--orange); }
.matrix-card__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 14.5px;
}
.matrix-card__row:last-child { border-bottom: 0; }
.matrix-card__row > span:first-child { color: var(--text-dark); }

/* --- Master-rolle-omskifter --------------------------------------------- */
.master-switch {
    display: flex;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    max-width: 660px;
}
.master-switch__option {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    padding: 14px 20px;
    background: var(--white);
    color: var(--navy);
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.master-switch__option:hover { background: var(--cream-light); color: var(--navy); }
.master-switch__option[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.master-switch__option[aria-pressed="true"]:hover { background: var(--navy-deep); color: var(--white); }
.master-switch__title {
    display: block;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.2px;
}
.master-switch__sub {
    display: block;
    font-size: 12.5px;
    margin-top: 3px;
    font-weight: 600;
    opacity: .72;
    min-height: 1em;
}
.switch-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 12px;
}

/* --- FAQ-raekker -------------------------------------------------------- */
.qa { border: 1px solid var(--border); background: var(--white); }
.qa__row {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 24px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--border-light);
    align-items: baseline;
}
.qa__row:last-child { border-bottom: 0; }
.qa__q {
    font-weight: 800;
    font-size: 16px;
    color: var(--navy);
    letter-spacing: -.3px;
}
.qa__a { font-size: 15.5px; line-height: 1.55; color: var(--text-muted); }

/* --- Simpel totabels-liste (avancemetoder m.fl.) ------------------------ */
.deftable {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    border: 1px solid var(--border);
    background: var(--white);
    border-collapse: collapse;
    width: 100%;
}
.deftable--3 { grid-template-columns: 1fr 1.4fr .7fr; }
.deftable thead, .deftable tbody, .deftable tr { display: contents; }
.deftable__cell {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
    color: var(--text-muted);
}
.deftable tbody tr:last-child .deftable__cell { border-bottom: 0; }
.deftable__cell--head {
    background: var(--navy);
    color: var(--white);
    font-weight: 800;
    font-size: 14px;
    border-bottom: 0;
}
.deftable__cell--term { font-weight: 700; color: var(--navy); }

/* --- Grossister, samlet efter fag --------------------------------------- */
.supplier-group { margin-bottom: 32px; }
.supplier-group:last-child { margin-bottom: 0; }
.supplier-group__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.supplier-group__trade {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -.2px;
    color: var(--navy);
    margin: 0;
    flex-shrink: 0;
}
/* Linjen fylder pladsen ud til taellingen — samme 1px-sprog som resten. */
.supplier-group__rule { flex: 1; height: 1px; background: var(--border); }
.supplier-group__count {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted-2);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* --- Grossistgitter ----------------------------------------------------- */
.supplier-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    list-style: none;
    margin: 0;
    padding: 0;
}
.supplier {
    background: var(--white);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}
.supplier__check { color: var(--green); font-weight: 900; flex-shrink: 0; }
/* Tom celle der lukker sidste raekke — ingen tekst, ingen flueben. */
.supplier--filler { min-height: 46px; }

/* --- Billedpladsholder (afventer rigtige app-screenshots) ---------------- */
.shot {
    background: var(--navy-light);
    color: var(--on-navy);
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    font-size: 13.5px;
    line-height: 1.5;
    overflow: hidden;
}
/* --- Rigtigt screenshot i ramme ----------------------------------------- */
/* Samme ramme som mockup'erne: navy bjaelke med marken og 1px kant. Ingen
   skygge og ingen runde hjoerner — hover vises med kant, farve og et lille
   zoom INDE i rammen, saa designreglerne holder. Billedet bestemmer selv sin
   hoejde; den faste 400px-hoejde er kun til mockups og pladsholdere. */
.shot.shot--image {
    height: auto;
    padding: 0;
    margin: 0;
    background: transparent;
    display: block;
    overflow: visible;
}
.shotframe {
    display: block;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--white);
    cursor: zoom-in;
    transition: border-color .15s ease;
}
.shotframe__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: var(--navy);
    padding: 10px 14px;
    transition: background-color .15s ease;
}
.shotframe__mark { height: 13px; width: auto; opacity: .85; flex-shrink: 0; }
.shotframe__label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--on-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.shotframe__zoom {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 4px 9px;
    color: var(--on-navy);
    border: 1px solid rgba(255, 255, 255, .28);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.shotframe__view { display: block; overflow: hidden; }
.shotframe__view > img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: left top;
    transition: transform .35s ease;
}

.shotframe:hover,
.shotframe:focus-visible { border-color: var(--navy); color: var(--white); }
.shotframe:hover .shotframe__bar,
.shotframe:focus-visible .shotframe__bar { background: var(--navy-deep); }
.shotframe:hover .shotframe__zoom,
.shotframe:focus-visible .shotframe__zoom {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--navy);
}
.shotframe:hover .shotframe__view > img { transform: scale(1.04); }

/* Touch har ingen hover: knappen staar orange fra start, saa det kan ses, at
   billedet kan forstoerres. */
@media (hover: none) {
    .shotframe__zoom { background: var(--orange); border-color: var(--orange); color: var(--navy); }
}

/* Telefonbillede: stylingen sidder paa SELVE billedet — ikke paa en boks
   udenom. Et element rundt om billedet med samme baggrund og kant bliver
   bredere end billedet og ender som en firkantet kasse i hjoernerne
   (brugerrapport 2026-09-17). Derfor har linket ingen egen flade.

   Runde hjoerner og skygge er den ENESTE undtagelse fra designreglerne
   oeverst i filen. Hoejden er nedskaleret til 440px, saa telefonen matcher
   tekstens hoejde. */
.shot.shot--phone { margin: 0 auto; text-align: center; }
.phoneshot { display: inline-block; max-width: 100%; cursor: zoom-in; }
.phoneshot > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 440px;
    border: 6px solid var(--navy-deep);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(20, 37, 89, .3);
    transition: transform .2s ease;
}
.phoneshot:hover > img { transform: translateY(-4px); }
.phoneshot:focus-visible { outline-offset: 4px; }
.shot--phone .shot__caption { text-align: center; }
.shot__caption {
    max-width: 320px;
    margin: 12px auto 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: left;
}

/* --- Lightbox (bygges af site.js) --------------------------------------- */
html.has-lightbox { overflow: hidden; }
.lightbox {
    padding: 0;
    margin: auto;
    border: 1px solid var(--navy-edge);
    background: var(--navy-deep);
    color: var(--white);
    width: min(1440px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgba(20, 37, 89, .96); }
.lightbox__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 18px;
    border-bottom: 1px solid var(--navy-edge);
    flex-shrink: 0;
}
.lightbox__caption {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--on-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lightbox__close {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    background: var(--orange);
    color: var(--navy);
    font-weight: 800;
    cursor: pointer;
    flex-shrink: 0;
}
.lightbox__close:hover { background: var(--orange-hover); }
.lightbox__view {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--white);
}
.lightbox__img { display: block; width: 100%; height: auto; max-width: none; }

/* Telefonbillede: vis hele skaermen i vinduets hoejde i stedet for i fuld
   bredde, saa man ser opgaven samlet og ikke skal rulle. */
.lightbox--fit-height { width: fit-content; }
/* Bjaelken maa ikke goere vinduet bredere end billedet: width 0 + min-width
   100% fjerner den lange billedtekst fra beregningen af indholdets bredde. */
.lightbox--fit-height .lightbox__bar { width: 0; min-width: 100%; box-sizing: border-box; }
.lightbox--fit-height .lightbox__view { display: flex; justify-content: center; }
.lightbox--fit-height .lightbox__img {
    width: auto;
    height: calc(100vh - 32px - 62px);
    max-width: 100%;
    object-fit: contain;
}

/* Paa en telefon er hele skaermen for smaa til at laese i skaermbredde. Billedet
   faar en fast bredde, og man panorerer INDE i lightboxen — siden selv
   scroller aldrig vandret. */
@media (max-width: 768px) {
    .lightbox { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
    .lightbox__img { width: 1000px; }
    /* Et telefonbillede er allerede smalt nok — det skal bare fylde skaermen. */
    .lightbox--fit-height .lightbox__img { width: 100%; height: auto; }
}

/* Rummer en HTML/CSS-mockup i stedet for et billede: lad mockup'en bestemme
   sin egen hoejde, og giv den luft ud til den navy flade. */
.shot--mock {
    height: auto;
    min-height: 400px;
    padding: 32px 24px;
}
.mock-frame { width: 100%; display: flex; justify-content: center; }

/* --- Statuskort i hero (dashboard-attrap) ------------------------------- */
.stat-card {
    background: var(--navy-deep);
    border: 1px solid var(--navy-edge);
    padding: 28px 26px;
}
.stat-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
}
.stat-card__title { font-weight: 700; font-size: 14.5px; color: var(--white); }
.stat-card__meta { font-size: 12.5px; color: var(--on-navy-2); }
.stat-list { display: flex; flex-direction: column; gap: 16px; }
.stat__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}
.stat__label { font-size: 13px; font-weight: 600; color: var(--on-navy); }
.stat__value { font-size: 13px; font-weight: 700; color: var(--white); }
.stat__track { height: 5px; background: var(--navy-track); }
.stat__fill { height: 5px; background: var(--orange); }
.stat-card__foot {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--navy-edge);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.stat-card__foot-label { font-size: 14px; font-weight: 700; color: var(--white); }
.stat-card__foot-value { font-weight: 900; font-size: 26px; color: var(--orange); letter-spacing: -.8px; }
.stat-card__note { margin-top: 8px; font-size: 12.5px; color: var(--on-navy-2); line-height: 1.5; }

/* --- Tillidsstrimmel ---------------------------------------------------- */
.trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 36px;
    align-items: center;
    padding-top: 26px;
    padding-bottom: 26px;
}
.trust__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted-2);
    margin-bottom: 5px;
}
.trust__value { font-size: 14.5px; font-weight: 600; color: var(--text); }
.trust__phone-cell { text-align: right; }
.trust__phone { font-size: 15.5px; font-weight: 800; color: var(--navy); }

/* --- Faktastrimmel (Om os) ---------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--navy-edge); border: 1px solid var(--navy-edge); }
.facts > div { background: var(--navy-deep); padding: 26px 24px; }
.facts__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--on-navy-2);
    margin-bottom: 8px;
}
.facts__value { font-size: 16px; font-weight: 800; color: var(--white); line-height: 1.4; }

/* --- Prisliste og beregner ---------------------------------------------- */
.pricelist { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.priceline {
    display: flex;
    gap: 16px;
    align-items: baseline;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.priceline:last-child { border-bottom: 0; padding-bottom: 0; }
.priceline__amount {
    font-weight: 900;
    font-size: 22px;
    color: var(--navy);
    letter-spacing: -.7px;
    width: 98px;
    flex-shrink: 0;
}
.priceline__text { font-size: 15.5px; line-height: 1.5; color: var(--text-dark); }
.priceline__text strong { font-weight: 800; color: var(--navy); }

.calc { background: var(--white); border: 1px solid var(--border); padding: 32px; }
.calc__total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.calc__amount { font-weight: 900; font-size: clamp(34px, 5vw, 46px); color: var(--navy); letter-spacing: -1.8px; }
.calc__unit { font-size: 16px; color: var(--text-muted); font-weight: 700; }
.calc__note { font-size: 14px; color: var(--text-muted); margin-bottom: 26px; }
.calc__field { margin-bottom: 20px; }
.calc__field-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}
.calc__field-label { font-size: 13.5px; font-weight: 700; color: var(--text-dark); }
.calc__field-sum { font-size: 13.5px; font-weight: 800; color: var(--navy); white-space: nowrap; }
.calc__range { width: 100%; accent-color: var(--orange); }
.calc__number {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-input);
    background: var(--cream-light);
    font-size: 16px;
    font-family: inherit;
    color: var(--text);
}
.calc__number:focus { outline: none; border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.calc__onboarding {
    background: var(--cream);
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-dark);
    margin-bottom: 22px;
}
.calc__onboarding strong { font-weight: 800; color: var(--navy); }
.calc__onboarding .was { color: var(--text-muted); }
/* Uden JavaScript regnes summen ved at sende formularen; med JS er knappen overfloedig. */
.js .calc__recalc { display: none; }

/* --- Formular ----------------------------------------------------------- */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.field { display: block; }
.field--full { grid-column: 1 / -1; }
.field__label {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted-2);
    margin-bottom: 6px;
}
.field__input,
.field__select,
.field__textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border-input);
    border-radius: 0;
    background: var(--cream-light);
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    outline: none;
}
.field__input:focus,
.field__select:focus,
.field__textarea:focus { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] { border-color: var(--error); }
.field__textarea { min-height: 120px; resize: vertical; }
.field__error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--error);
}
.form-note { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin-top: 14px; }

.form-summary {
    border: 1px solid var(--error);
    background: var(--error-tint);
    color: var(--error);
    padding: 14px 16px;
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 20px;
}
.form-done {
    border: 1px solid var(--green);
    background: var(--green-tint);
    padding: 28px 26px;
}
.form-done__title { font-weight: 900; font-size: 22px; color: var(--navy); margin: 0 0 10px; letter-spacing: -.5px; }

/* Honeypot: skjult for mennesker, synlig for naive bots. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Header ------------------------------------------------------------- */
/* To lag: en slank topbar med telefon, soegning og login, og nedenunder
   hovedlinjen med logo, menu og de to handlinger.

   HELE headeren er sticky (brugerbeslutning 2026-09-22): en mester skal kunne
   ringe med det samme, uden at rulle op i toppen foerst. Prisen er lodret
   plads, saa headeren skrumper, naar man ruller: hovedlinjen fra 78 til 58px
   og logoet fra 52 til 40px. Klassen saettes af site.js; uden JavaScript
   bliver headeren i fuld hoejde og er stadig sticky. */
.site-header {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-topbar {
    background: var(--navy-deep);
    border-bottom: 1px solid var(--navy-edge);
}
.site-topbar__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
}
.site-topbar__item {
    font-size: 13px;
    font-weight: 600;
    color: var(--on-navy-2);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.site-topbar__item:hover,
.login-menu[open] > .site-topbar__item { color: var(--white); }
.site-topbar__item .site-nav__icon { width: 15px; height: 15px; }

/* Soegningen ligger bag "Søg" i topbaren og klapper ned som login-menuen.
   Formularen er en almindelig GET til /soeg, saa den virker uden JavaScript. */
.search-menu { position: relative; flex-shrink: 0; display: flex; align-items: center; }
.search-menu > summary { list-style: none; }
.search-menu__panel {
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 10px;
    z-index: 5;
}
.search-menu__panel .site-search {
    background: var(--navy-deep);
    border: 1px solid var(--navy-edge);
    border-radius: 8px;
    padding: 8px;
}
.search-menu__panel .site-search__input { width: 260px; height: 38px; font-size: 14px; }
.search-menu__panel .site-search__btn { height: 38px; width: 42px; }

/* <summary> har browserens egen knap-look og sin egen markoer. Begge vaek. */
.topbar-toggle { border: 0; background: transparent; padding: 0; cursor: pointer; }
.topbar-toggle::marker,
.topbar-toggle::-webkit-details-marker { content: ""; display: none; }
.login-menu[open] > .topbar-toggle,
.search-menu[open] > .topbar-toggle { color: var(--white); }

.site-search { display: flex; align-items: center; }
.site-search__input {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    background: var(--navy-light);
    border: 1px solid var(--navy-edge);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    padding: 0 10px;
    height: 26px;
    width: 150px;
    min-width: 0;
}
.site-search__input::placeholder { color: var(--on-navy-2); opacity: 1; }
.site-search__input:focus,
.site-search__input:focus + .site-search__btn { outline: 0; border-color: var(--orange); }
/* Browserens eget kryds i <input type="search"> staar forkert paa moerk bund. */
.site-search__input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
.site-search__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    width: 30px;
    padding: 0;
    color: var(--on-navy);
    background: var(--navy-light);
    border: 1px solid var(--navy-edge);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
}
.site-search__btn:hover { color: var(--navy); background: var(--orange); border-color: var(--orange); }
.site-search__btn .site-nav__icon { width: 15px; height: 15px; opacity: 1; }

.site-header__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 28px;
    transition: min-height .14s ease;
}
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo img {
    height: 52px;
    width: auto;
    display: block;
    transition: height .14s ease;
}

/* Rullet ned: headeren skrumper, saa den fylder mindre af skaermen. */
.is-scrolled .site-header__inner { min-height: 58px; }
.is-scrolled .site-header__logo img { height: 40px; }

/* Telefonen i hovedlinjen. Kun fremme, naar topbaren er vaek. */
.site-header__call { display: none; }

/* Menuen ligger mellem logoet og knappen; "auto" i begge sider midterstiller
   den i den plads, der er tilbage. Knappen staar alene yderst til hoejre. */
.site-nav {
    display: flex;
    align-items: center;
    gap: 28px;
    flex: 1;
    min-width: 0;
}
.site-nav__links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-inline: auto;
    min-width: 0;
    flex-wrap: wrap;
}
/* Telefon og login staar i topbaren paa desktop — her ville de vaere dobbelt. */
.site-nav__minor { display: none; }
.site-nav__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--on-navy);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
/* Stregikon foran menupunktet (efter dln.dk). Farven arves, saa ikonet
   lyser op sammen med teksten ved hover og paa den aktive side. */
.site-nav__icon { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.site-nav__link:hover .site-nav__icon,
.site-nav__link[aria-current="page"] .site-nav__icon,
.site-topbar__item:hover .site-nav__icon { opacity: 1; }
.site-nav__link:hover { color: var(--white); }
.site-nav__link[aria-current="page"] { color: var(--white); }

/* "Log ind" og "Søg" er menupunkter, ikke knapper. Den firkantede ramme trak
   opmaerksomhed fra den gule CTA (brugerbeslutning 2026-09-22). Udseendet
   kommer fra .site-topbar__item, og .topbar-toggle fjerner det, en <summary>
   selv slaeber med. Begge staar laengere oppe ved soegemenuen. */

/* De to handlinger yderst til hoejre. Samme hoejde, samme hjoerner og samme
   lodrette linje: de skal laeses som ét par, hvor den gule er den, vi helst
   vil have. 8px hjoerner er en bevidst undtagelse fra designreglen
   (brugerbeslutning 2026-09-22); se filens hoved. */
.site-nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-nav__ghost,
.site-nav__cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    font-size: 13.5px;
    font-weight: 800;
    white-space: nowrap;
    border-radius: 8px;
}
.site-nav__ghost {
    color: var(--white);
    background: transparent;
    border: 1px solid var(--navy-edge);
}
.site-nav__ghost:hover { border-color: var(--orange); color: var(--orange); }
.site-nav__cta {
    background: var(--orange);
    color: var(--navy);
    border: 1px solid var(--orange);
}
.site-nav__cta:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--navy); }

/* Login-menu — den ENESTE skygge i designet.
   Bygget paa <details>, saa den kan aabnes helt uden JavaScript. */
/* Flexboks, ikke block: ellers saetter <details> sit eget linjeboks-rum om
   punktet (16px skrift arvet fra siden), og "Log ind" kom til at staa halvanden
   pixel hoejere end de oevrige menupunkter. */
.login-menu { position: relative; flex-shrink: 0; display: flex; align-items: center; }
/* Ingen "display" her: punktet er inline-flex, og en display-regel paa
   summary ville slaa flexboksen ud, saa haengelaasen satte sig paa tekstens
   grundlinje i stedet for at staa centreret ved siden af den. */
.login-menu > summary { list-style: none; }
.login-menu__panel {
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 8px;
    z-index: 60;
}
.login-menu__inner {
    background: var(--white);
    border: 1px solid var(--border);
    min-width: 216px;
    box-shadow: 0 10px 28px rgba(20, 37, 89, .22);
}
.login-menu__item {
    display: block;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-light);
}
.login-menu__item:last-child { border-bottom: 0; }
.login-menu__item:hover { background: var(--cream-light); }
.login-menu__name { display: block; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.login-menu__host { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* Burgerknappen findes kun naar JavaScript er i spil — uden JS staar
   navigationen fremme og ombrydes i stedet. */
.nav-toggle { display: none; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: var(--on-navy-2); }
.site-footer__inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 56px var(--gutter) 36px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
.site-footer__logo { height: 96px; width: auto; display: block; margin-bottom: 18px; }
.site-footer__about { font-size: 14px; line-height: 1.6; color: var(--on-navy-2); margin: 0 0 18px; max-width: 340px; }
.site-footer__legal { font-size: 13px; line-height: 1.7; color: var(--on-navy-2); margin: 0 0 12px; }
.site-footer__phone { font-size: 16px; font-weight: 800; color: var(--white); }
.site-footer__phone:hover { color: var(--orange); }
.site-footer__heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 16px;
}
.site-footer__links { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.site-footer__links a { font-size: 14px; color: var(--on-navy-2); }
.site-footer__links a:hover { color: var(--white); }
.site-footer__pending { font-size: 13px; line-height: 1.6; color: var(--on-navy-2); opacity: .75; }

/* --- Butiksbadges ------------------------------------------------------- */
.store-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.store-badge { display: inline-block; }
/* Ingen hover-effekt paa selve badget — Apples og Googles retningslinjer
   forbyder at aendre deres udseende. Vi daemper i stedet hele linket. */
.store-badge:hover { opacity: .85; }
.store-badge img { display: block; width: auto; }

/* Apples badge fylder hele sin ramme. Googles er 646x250, men kun 646x192 er
   synligt — 23,2% af hoejden er transparent luft, og kun lodret (ingen luft i
   siderne). For at de to sorte knapper staar lige hoeje skal Googles img derfor
   vaere 40 / 0,768 = 52px, naar Apples er 40px. Maalt, ikke gaettet. */
.store-badge__apple { height: 40px; }
.store-badge__google { height: 52px; }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .09); }
.site-footer__bottom-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 18px var(--gutter);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 16px;
}
.site-footer__bottom a { color: var(--on-navy-2); }
.site-footer__bottom a:hover { color: var(--white); }
.site-footer__bottom-links { display: flex; gap: 24px; flex-wrap: wrap; }

/* --- Bredt CTA-baand ---------------------------------------------------- */
.cta-band {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}
.cta-band__text { max-width: 640px; }
.cta-band__lede { font-size: 16.5px; line-height: 1.55; margin: 0; }
.bg-orange .cta-band__lede { color: var(--orange-ink); }
.bg-orange .title-block { color: var(--navy); }

.strip-navy {
    background: var(--navy);
    padding: 26px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.strip-navy__text {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.35;
    color: var(--white);
    max-width: 640px;
}

/* --- Tillidsbaand: ingen binding (prissiden) ---------------------------- */
/* Paastanden til venstre, mekanikken til hoejre. Ligger paa navy, saa den
   skiller sig ud fra de tre prisplaner lige ovenover uden at bruge en farve,
   sitet ellers ikke har. */
.usp {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 40px;
    align-items: start;
    background: var(--navy);
    padding: 34px 32px;
    margin-top: 40px;
}
.usp__claim {
    font-weight: 800;
    font-size: 19px;
    line-height: 1.4;
    color: var(--white);
    margin: 0;
}

/* --- Skiftevis billede/tekst (Funktioner) ------------------------------- */
.feature-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid var(--border);
}
.feature-block:last-of-type { border-bottom: 0; }
/* Telefonbillede i en funktionsblok: billedkolonnen er kun saa bred som
   telefonen, saa teksten faar resten og overskrifter ikke knaekkes. */
.feature-block--phone { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.feature-block--phone.feature-block--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.feature-block--reverse .feature-block__media { order: 2; }

/* --- Brancher ----------------------------------------------------------- */
/* Otte kort i et gitter: 4 → 2 → 1 kolonner. Otte gaar op i baade fire og to,
   saa ingen raekke ender med et graat hul. */
.trade-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}
.trade-cards > li { background: var(--white); display: flex; min-width: 0; }

.trade-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 26px;
    color: var(--navy);
    text-decoration: none;
    transition: background-color .12s ease;
}
.trade-card:hover { background: var(--cream-tile); color: var(--navy); text-decoration: none; }
.trade-card__icon { display: block; width: 34px; height: 34px; color: var(--orange-deep); margin-bottom: 18px; }
.trade-card__name {
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.4px;
    margin: 0 0 8px;
    color: var(--navy);
}
.trade-card__teaser { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 18px; flex: 1; }
.trade-card__more { font-size: 14px; font-weight: 800; color: var(--navy); }
.trade-card:hover .trade-card__more { color: var(--orange-deep); }


/* Fagsektion: ikon + overskrift, tre fordele, nederst tjekliste og grossister. */
.trade__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 880px;
    margin-bottom: 40px;
}
.trade__icon {
    display: block;
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    padding: 14px;
    background: var(--navy);
    color: var(--orange);
}
.trade__head .lede { max-width: 700px; }

/* Tre fordele: bliver staaende i tre kolonner ned til mobil. To kolonner ville
   efterlade et hul i haargitteret. Dobbelt klasse slaar den generelle .cols-3. */
.grid-hair.trade__benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.trade__foot {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1px;
    margin-top: 24px;
    background: var(--border);
    border: 1px solid var(--border);
}
.trade__panel { background: var(--white); padding: 28px 26px; min-width: 0; }
.trade__panel .note { margin: 14px 0 0; }
.trade__panel .link-arrow { display: inline-block; margin-top: 16px; }

.trade__photo {
    flex-shrink: 0;
    align-self: flex-start;
    margin-left: auto;
    margin-top: 2px;
    padding: 3px 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: var(--cream);
    color: var(--text-muted);
}

/* Fagside: loesningerne i 2 kolonner (4 stk.) eller 3 kolonner (3 stk.) —
   begge gaar op. Dobbelt klasse slaar den generelle .cols-regel. */
.grid-hair.trade-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-hair.trade-solutions--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Fem loesninger: to kolonner, og den sidste fylder raekken ud. Ellers stod der
   en graa tom celle ved siden af nr. 5. */
.grid-hair.trade-solutions--5 > *:last-child { grid-column: 1 / -1; }
.trade-erp .tile-body { margin: 0; }
.nowrap { white-space: nowrap; }
.qa__q { margin: 0; }
.qa__a { margin: 0; }

/* --- Broedkrumme (over hero-overskriften paa navy) ---------------------- */
.breadcrumb { margin-bottom: 28px; }
.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--on-navy-2);
}
.breadcrumb li { display: flex; align-items: center; min-width: 0; }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: var(--on-navy-2); }
.breadcrumb a { color: var(--on-navy); text-decoration: none; }
.breadcrumb a:hover { color: var(--orange); }
.breadcrumb [aria-current="page"] { color: var(--white); }

@media (max-width: 1024px) {
    /* Fire kolonner bliver til to — otte kort giver saa to fyldte raekker. */
    .trade-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trade-card { padding: 24px 20px; }
    .trade__foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .trade-cards { grid-template-columns: minmax(0, 1fr); }
    .grid-hair.trade__benefits,
    .grid-hair.trade-solutions,
    .grid-hair.trade-solutions--3 { grid-template-columns: minmax(0, 1fr); }
    /* Broedkrummens links som rigtige trykflader paa en telefon. */
    .breadcrumb { margin-bottom: 16px; }
    .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
    .trade__head { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 28px; }
    .trade__icon { width: 52px; height: 52px; padding: 11px; }
    .trade-card, .trade__panel { padding: 22px 20px; }
}

/* --- Juridiske sider ---------------------------------------------------- */
.legal { background: var(--white); }
.legal__body { padding-top: 64px; padding-bottom: 80px; }
.legal h2 {
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -.6px;
    line-height: 1.15;
    color: var(--navy);
    margin: 44px 0 14px;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
    font-weight: 800;
    font-size: 17px;
    color: var(--navy);
    margin: 26px 0 10px;
}
.legal p {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 14px;
}
.legal ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.legal li { display: flex; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--text-dark); }
.legal li::before { content: "·"; color: var(--orange); font-weight: 900; flex-shrink: 0; }
.legal__updated { font-size: 14px; color: var(--on-navy-2); margin: 0; }
.legal .deftable { margin: 0 0 20px; }

/* --- Soegeresultater (/soeg) --------------------------------------------- */
.search-page__form { display: flex; gap: 10px; margin-top: 28px; max-width: 620px; }
.search-page__input {
    font: inherit;
    font-size: 16px;
    color: var(--white);
    background: var(--navy-light);
    border: 1px solid var(--navy-edge);
    border-radius: 8px;
    padding: 0 16px;
    height: 52px;
    flex: 1;
    min-width: 0;
}
.search-page__input::placeholder { color: var(--on-navy-2); opacity: 1; }
.search-page__input:focus { outline: 0; border-color: var(--orange); }
.search-page__input::-webkit-search-cancel-button { filter: invert(1); opacity: .6; }
/* Knappen hoerer til feltet, saa den foelger feltets hjoerner — ellers staar en
   firkantet knap klods op ad et afrundet felt. Gaelder KUN her. */
.search-page__form .btn { border-radius: 8px; }

.search-results { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.search-result { border-bottom: 1px solid var(--border); }
.search-result__link { display: block; padding: 20px 4px; color: inherit; }
.search-result__link:hover { background: var(--cream-press); color: inherit; }
.search-result__title {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.3px;
    margin: 4px 0 6px;
}
.search-result__body { display: block; color: var(--text-muted); max-width: 70ch; }
.search-result__path { display: block; font-size: 13px; color: var(--dash); margin-top: 8px; }

/* ============================================================================
   Responsivt
   Haandvaerkere laeser sitet paa telefonen i bilen. Alt herunder skal virke
   ned til 360px uden vandret scroll.
   ========================================================================= */

/* Burger-graensen. Historik: 1000px → 1180px, da menupunkterne fik ikoner og
   "Forside" kom til → 1200px, da hovedlinjen fik to knapper (2026-09-22).
   Maalt behov: logo 85 + 28 + menu 709 + 28 + knapper 254 + 2x40 gutter =
   1184px. Graensen ligger paa 1200, saa der er 17px luft ved 1201.
   Samme tal staar i site.js' hover-regel og i E2E-testen
   Navigationen_StaarPaaEnLinje_LigeOverBurgerGraensen. Aendrer du menuen eller
   knapperne, saa maal forfra. */
@media (max-width: 1200px) {
    /* Topbaren ryger vaek: den ville stjaele en stribe af det, brugeren ser
       foerst paa en telefon. Telefon og login staar i stedet i burgermenuen
       (.site-nav__minor), saa de stadig kan naas — ogsaa uden JavaScript,
       hvor menuen bliver staaende fremme. */
    .site-topbar { display: none; }
    :root { --topbar-height: 0px; }

    /* Nummeret rykker med ind i hovedlinjen, saa det stadig er ét tryk vaek,
       naar topbaren er vaek. Headeren er sticky, saa knappen foelger med ned. */
    .site-header__call {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-left: auto;
        color: var(--white);
        border: 1px solid rgba(255, 255, 255, .32);
    }
    .site-header__call:hover { border-color: var(--orange); color: var(--orange); }
    .site-header__call .site-nav__icon { width: 20px; height: 20px; opacity: 1; }

    .site-nav__minor {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .js .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        /* Telefonknappen foran har margin-left:auto og skubber dem begge ud. */
        margin-left: 10px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .32);
        color: var(--white);
        font-size: 14px;
        font-weight: 700;
        padding: 9px 14px;
        min-height: 44px;
        cursor: pointer;
    }
    .js .nav-toggle:hover { border-color: var(--orange); color: var(--orange); }
    .js .nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
    .js .nav-toggle__bars::before,
    .js .nav-toggle__bars::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: currentColor;
    }
    .js .nav-toggle__bars::before { top: -6px; }
    .js .nav-toggle__bars::after { top: 6px; }

    .site-header__inner { position: relative; flex-wrap: wrap; }

    .js .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy);
        border-top: 1px solid var(--navy-edge);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px var(--gutter) 20px;
        margin-left: 0;
    }
    .js .site-nav.is-open { display: flex; }
    .site-nav__links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-inline: 0;
    }
    .js .site-nav__link {
        padding: 14px 0;
        border-bottom: 1px solid var(--navy-edge);
        font-size: 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* Knapperne fylder bredden i drawer'en og staar under hinanden — den
       diskrete oeverst, den gule nederst, taettest paa tommelfingeren. */
    .site-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 14px;
    }
    .site-nav__ghost,
    .site-nav__cta {
        justify-content: center;
        height: 48px;
        font-size: 15px;
    }

    /* Soegefeltet er det foerste i drawer'en og fylder hele bredden. Her staar
       det aabent: i en udklappet menu er der plads, og en knap der aabner
       endnu en ting ville vaere et klik for meget. */
    .site-search--drawer { margin: 4px 0 14px; }
    .site-search--drawer .site-search__input { flex: 1; width: auto; height: 44px; font-size: 16px; }
    .site-search--drawer .site-search__btn { height: 44px; width: 52px; }
    .site-search--drawer .site-search__btn .site-nav__icon { width: 18px; height: 18px; }

    /* Uden JS: navigationen bliver staaende og ombrydes paa flere linjer. */
    html:not(.js) .site-header__inner { padding-top: 12px; padding-bottom: 12px; }
    html:not(.js) .site-nav { flex-wrap: wrap; }
    html:not(.js) .site-nav__links { flex-direction: row; flex-wrap: wrap; gap: 18px; }
}

/* Tablet */
@media (max-width: 1024px) {
    :root { --gutter: 28px; }

    .sec { padding-top: 64px; padding-bottom: 64px; }
    .sec--tight, .sec--pagehero { padding-top: 56px; padding-bottom: 56px; }
    .sec--hero { padding-top: 56px; padding-bottom: 64px; }
    .sec--flush-bottom { padding-bottom: 0; }

    .split, .split--hero, .split--wide-right, .split--phone { grid-template-columns: 1fr; gap: 40px; }
    .feature-block,
    .feature-block--phone,
    .feature-block--phone.feature-block--reverse { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px 0; }
    .feature-block--reverse .feature-block__media { order: 0; }
    .cols-4 { grid-template-columns: repeat(2, 1fr); }
    .cols-3 { grid-template-columns: repeat(2, 1fr); }
    .col-3 { grid-template-columns: 1fr; gap: 22px; }
    .facts { grid-template-columns: repeat(2, 1fr); }
    /* 4 → 2 → 1: springer 3 over, saa fyldcellerne (afrundet til 4) gaar op. */
    .supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .trust { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .trust__phone-cell { text-align: left; }
}

/* Mobil — én kolonne hele vejen ned. */
@media (max-width: 768px) {
    /* Logoet maa gerne fylde paa desktop, men paa en telefon skal headeren
       vaere lav, saa indholdet naar op over foldet. */
    :root { --gutter: 20px; --header-height: 66px; }
    .site-header__logo img { height: 44px; }

    .sec { padding-top: 48px; padding-bottom: 48px; }
    .sec--tight, .sec--pagehero, .sec--hero { padding-top: 40px; padding-bottom: 44px; }
    .sec--cta { padding-top: 40px; padding-bottom: 40px; }
    .sec--flush-bottom { padding-bottom: 0; }

    .title-hero, .title-page { letter-spacing: -1.2px; }
    .title-section, .title-mid { letter-spacing: -.9px; }

    .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
    .col-2 { grid-template-columns: 1fr; gap: 22px; }
    .facts { grid-template-columns: 1fr; }
    .supplier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-intro { margin-bottom: 32px; }

    /* Billedet over teksten i skiftevis-blokke, saa raekkefoelgen giver mening. */
    .feature-block__media { order: -1; }
    .shot { height: 240px; }

    /* Matrixen bliver til kort — fire kolonner kan ikke komprimeres meningsfuldt. */
    .matrix { display: none; }
    .matrix-cards { display: block; }

    .qa__row { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
    /* To/tre kolonner bliver til stablede par: overskriften gentages som en
       lille label over hver celle via data-label. */
    .deftable, .deftable--3 { grid-template-columns: minmax(0, 1fr); }
    .deftable thead { display: none; }
    .deftable tbody tr { display: block; min-width: 0; border-bottom: 1px solid var(--border-light); }
    .deftable tbody tr:last-child { border-bottom: 0; }
    /* Cellerne SKAL vaere block: som table-cell inde i en block-tr danner de en
       anonym tabel, hvis egen mindstebredde sprænger skærmen (3-kolonne-tabellen
       i privatlivspolitikken gjorde netop det ved 375px). */
    .deftable__cell { display: block; border-bottom: 0; padding: 4px 20px; }
    .deftable tbody tr .deftable__cell:first-child { padding-top: 14px; }
    .deftable tbody tr .deftable__cell:last-child { padding-bottom: 14px; }
    .deftable__cell[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--text-muted-2);
        margin-bottom: 2px;
    }

    .usp { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 20px; }
    .master-switch { flex-direction: column; max-width: none; }
    .form-grid { grid-template-columns: 1fr; }
    .card { padding: 24px 20px; }
    .card--navy, .card--pad-lg { padding: 26px 22px; }
    .calc { padding: 24px 20px; }
    .strip-navy { padding: 22px 20px; }
    .site-footer__inner { grid-template-columns: 1fr; gap: 28px; }
    .site-footer__logo { height: 72px; }
    .link-row { justify-content: flex-start; }
    .btn { width: 100%; }
    .btn-row { flex-direction: column; }
    .legal__body { padding-top: 40px; padding-bottom: 48px; }
}

/* Lille mobil */
@media (max-width: 480px) {
    :root { --gutter: 16px; }

    .sec { padding-top: 40px; padding-bottom: 40px; }
    .title-hero, .title-page { letter-spacing: -.8px; }
    .supplier-grid { grid-template-columns: 1fr; }
    /* Ved én kolonne ville fyldcellerne staa som tomme raekker. */
    .supplier--filler { display: none; }
    .tile, .tile--lg, .tile--md { padding: 20px 18px; }
    .site-header__logo img { height: 38px; }
    .stat-card { padding: 22px 18px; }
    .priceline { flex-direction: column; gap: 4px; }
    .priceline__amount { width: auto; }
}

/* --- Oprettelseskort (Kom i gang) --------------------------------------- */
/* Sidens ene primaere handling. Orange kant gør den svaer at overse uden at
   bryde reglen om ingen skygger. */
.signup-card { border: 2px solid var(--orange); position: relative; }
.signup-card__badge {
    display: inline-block;
    background: var(--orange);
    color: var(--navy);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 10px;
    margin-bottom: 16px;
}

/* ============================================================================
   Holdet (Om os)
   Portrætterne er rigtige fotos af holdet — hentet fra dln.dk. Ingen runde
   avatarer: hjørnerne er skarpe her som alle andre steder.
   ========================================================================= */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.person { background: var(--white); display: flex; flex-direction: column; }
.person__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Portrætterne er skudt med hovedet i øverste tredjedel. */
    object-position: 50% 22%;
    background: var(--cream);
}
.person__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.person__name { font-weight: 900; font-size: 19px; letter-spacing: -.4px; color: var(--navy); margin: 0 0 4px; }
.person__role {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--kicker-brown);
    margin: 0 0 12px;
}
.person__bio { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 16px; }
.person__tasks { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-light); }
.person__tasks li { font-size: 13.5px; line-height: 1.45; color: var(--text-dark); }

/* Kontaktflisen fylder den tomme plads i sidste raekke. */
.person--contact { background: var(--navy); justify-content: center; }
.person--contact .person__body { padding: 28px 24px; }
.person--contact .person__name { color: var(--white); }
.person--contact .person__bio { color: var(--on-navy); }
.person__contact { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--navy-edge); }
.person__phone { font-size: 22px; font-weight: 900; letter-spacing: -.6px; color: var(--white); }
.person__phone:hover { color: var(--orange); }
.person__mail { font-size: 14px; color: var(--on-navy); }
.person__mail:hover { color: var(--orange); }

/* Fotostrimmel fra kontoret — fire billeder i ét bånd. */
.photo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--navy-edge); }
.photo-strip img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Citatet fra "Vores drøm". */
.pull-quote {
    border-left: 3px solid var(--orange);
    padding: 4px 0 4px 22px;
    margin: 0;
}
.pull-quote p {
    font-weight: 900;
    font-size: clamp(20px, 2.6vw, 26px);
    line-height: 1.25;
    letter-spacing: -.6px;
    color: var(--navy);
    margin: 0;
}
.on-navy .pull-quote p, .bg-navy .pull-quote p { color: var(--white); }
.pull-quote cite { display: block; margin-top: 10px; font-size: 13px; font-style: normal; color: var(--text-muted); }
.bg-navy .pull-quote cite { color: var(--on-navy-2); }

@media (max-width: 1024px) {
    .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .team { grid-template-columns: minmax(0, 1fr); }
    .person__photo { aspect-ratio: 3 / 2; object-position: 50% 20%; }
}

/* ============================================================================
   Kundefortælling (case)
   To spalter — "en almindelig uge før" og "den samme uge med MobilOrdre" —
   efterfulgt af tre udbytte-fliser. Adskillelsen er 1px kanter som alt andet.
   ========================================================================= */
.case {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-bottom: 1px;
}
.case__col { background: var(--white); padding: 32px 30px; }
/* "Efter"-spalten staar paa navy, saa oejet lander paa loesningen. */
.case__col--after { background: var(--navy); color: var(--white); }
.case__col--after .title-card { color: var(--white); }
.case__col--after .body-text { color: var(--on-navy); }

.case__scene {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 18px;
}
.case__col--after .case__scene { color: var(--on-navy); }

/* Punkter i "foer"-spalten er daempede — det er den tilstand vi forlader. */
.bullets--muted li { color: var(--text-muted); }
.bullets--muted li::before { content: "·"; color: var(--dash); }

.case__result { margin-top: 28px; }
.case__result-value {
    font-weight: 900;
    font-size: 17px;
    letter-spacing: -.4px;
    color: var(--navy);
    margin: 0 0 6px;
}

/* Bemaerk: denne media query SKAL staa her, lige efter .case-reglerne.
   Sektionens breakpoint-blok laengere oppe i filen ville tabe kampen mod
   .case-reglen herover, som har samme specificitet men kommer senere. */
@media (max-width: 768px) {
    .case { grid-template-columns: 1fr; }
    .case__col { padding: 24px 20px; }
}

/* ============================================================================
   Skærm-mockups
   HTML/CSS-illustrationer af app- og portalfladerne. De staar i billed-slots,
   indtil marketing leverer rigtige screenshots — saet Src paa <ImageSlot>, og
   mockup'en traeder til side af sig selv.

   De foelger sitets egne regler: skarpe hjoerner, ingen skygger, adskillelse
   med 1px kanter. En mockup skal ligne fladen, ikke efterligne et fotografi.
   ========================================================================= */
.mock {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--border);
    width: 100%;
    text-align: left;
    overflow: hidden;
}
.mock--phone { max-width: 320px; }
.mock--wide { max-width: 620px; }

/* --- App-bar ------------------------------------------------------------ */
.mock__bar {
    min-width: 0;
    background: var(--navy);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}
.mock__bar--web { padding: 11px 16px; }
.mock__back { font-size: 20px; line-height: 1; opacity: .8; flex-shrink: 0; }
.mock__title {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Den hvide mark hoerer netop hjemme her: paa en navy flade. */
.mock__mark { height: 13px; width: auto; margin-left: auto; opacity: .85; flex-shrink: 0; }

/* Segmenteret vaelger (Dag/Uge/Måned) i web-mockup'en. */
.mock-seg { display: flex; margin-left: auto; border: 1px solid rgba(255, 255, 255, .28); flex-shrink: 0; }
.mock-seg__item {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    color: var(--on-navy);
    border-right: 1px solid rgba(255, 255, 255, .28);
}
.mock-seg__item:last-child { border-right: 0; }
.mock-seg__item.is-active { background: var(--orange); color: var(--navy); }

.mock__body { padding: 14px; }

.mock-kicker {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text-muted-2);
}
.mock-kicker--orange { color: var(--orange-deep); }
.mock-kicker--green { color: var(--green); }

.mock-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}
.mock-foot--web { margin: 12px 14px 14px; padding-top: 10px; }

.mock-btn {
    display: block;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    padding: 11px;
}
.mock-btn--primary { background: var(--navy); color: var(--white); }
.mock-btn--stop { background: var(--orange); color: var(--navy); padding: 8px 18px; font-size: 12.5px; }

/* --- 1. Timeregistrering ------------------------------------------------ */
.mock-timer {
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--orange);
    background: var(--orange-tint);
    padding: 12px 13px;
    margin-bottom: 14px;
}
.mock-timer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dash); display: block; }
.mock-dot--live { background: var(--orange); }
.mock-timer__case { font-size: 12.5px; font-weight: 700; color: var(--navy); margin-bottom: 9px; }
.mock-timer__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mock-timer__clock {
    font-size: 27px;
    font-weight: 900;
    letter-spacing: -1.2px;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.mock-timer__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    font-size: 11px;
    color: var(--text-muted);
}

.mock-week__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.mock-week__total { font-size: 12px; font-weight: 800; color: var(--navy); }
.mock-week__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); }
.mock-day { background: var(--white); padding: 8px 4px; text-align: center; }
.mock-day__name { display: block; font-size: 10px; font-weight: 700; color: var(--text-muted-2); margin-bottom: 3px; }
.mock-day__hours { display: block; font-size: 13px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.mock-day.is-empty .mock-day__hours { color: var(--dash); font-weight: 400; }
.mock-day.is-today { background: var(--navy); }
.mock-day.is-today .mock-day__name { color: var(--orange); }
.mock-day.is-today .mock-day__hours { color: var(--white); }

.mock-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 12.5px;
}
.mock-row--last { border-bottom: 0; }
.mock-row__label { color: var(--text-muted); }
.mock-row__value { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }

/* --- 2. Materialer og scanning ------------------------------------------ */
.mock-scan { background: var(--navy-deep); padding: 18px 14px 12px; }
.mock-scan__frame {
    position: relative;
    height: 116px;
    border: 1px solid rgba(255, 255, 255, .14);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mock-scan__corner { position: absolute; width: 16px; height: 16px; border: 2px solid var(--orange); }
.mock-scan__corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.mock-scan__corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.mock-scan__corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.mock-scan__corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Stregkoden er rigtige elementer med varierende bredde — ikke et billede. */
.mock-barcode { display: flex; align-items: flex-end; gap: 2px; height: 54px; }
.mock-barcode span { display: block; height: 100%; background: var(--white); }

.mock-scan__line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 50%;
    height: 2px;
    background: var(--orange);
}
.mock-scan__hint { margin-top: 9px; text-align: center; font-size: 11px; color: var(--on-navy-2); }

.mock-hit { border: 1px solid var(--border-light); padding: 12px 13px; margin-bottom: 12px; }
.mock-hit__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.mock-hit__ean { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mock-hit__name { font-size: 14px; font-weight: 800; color: var(--navy); letter-spacing: -.2px; }
.mock-hit__meta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.mock-hit__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}
.mock-hit__price { font-size: 14px; font-weight: 900; color: var(--navy); letter-spacing: -.3px; }
.mock-stepper { display: flex; border: 1px solid var(--border-input); }
.mock-stepper__btn { padding: 4px 10px; font-size: 13px; font-weight: 800; color: var(--navy); background: var(--cream-light); }
.mock-stepper__value {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
    border-left: 1px solid var(--border-input);
    border-right: 1px solid var(--border-input);
}

/* --- 3. Planlægning ----------------------------------------------------- */
.mock-plan { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-width: 0; }
.mock-bench { background: var(--cream); border-right: 1px solid var(--border); padding: 12px; }
.mock-bench__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.mock-bench__count {
    background: var(--navy);
    color: var(--white);
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
}
.mock-task { background: var(--white); border: 1px solid var(--border); padding: 8px 9px; margin-bottom: 7px; }
.mock-task__title { display: block; font-size: 11.5px; font-weight: 800; color: var(--navy); }
.mock-task__meta { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
/* Opgaven der traekkes: loeftet ud af baenken og markeret orange. */
.mock-task--dragging {
    border: 1.5px solid var(--orange);
    background: var(--orange-tint);
    transform: translate(10px, -3px) rotate(-1.5deg);
}

.mock-cal { display: flex; flex-direction: column; }
.mock-cal__grid {
    display: grid;
    grid-template-columns: 34px repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.mock-cal__corner, .mock-cal__daylabel, .mock-cal__emp, .mock-cal__cell { background: var(--white); }
.mock-cal__daylabel {
    padding: 7px 4px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-muted-2);
}
.mock-cal__emp {
    padding: 10px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mock-cal__cell { padding: 5px 4px; min-height: 40px; display: flex; align-items: center; }
.mock-block {
    display: block;
    width: 100%;
    background: var(--navy);
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    padding: 6px 5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Interne sager skiller sig ud — de er ikke fakturerbare. */
.mock-block--internal { background: var(--cream-press); color: var(--text-dark); }
.mock-drop {
    display: block;
    width: 100%;
    border: 1.5px dashed var(--orange);
    background: var(--orange-tint);
    color: var(--orange-deep);
    font-size: 9.5px;
    font-weight: 800;
    padding: 6px 4px;
    text-align: center;
}

/* --- 5. Godkend dag og faktureringsgrad --------------------------------- */
.mock-approve { padding: 4px 0 0; }
.mock-approve__row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, .9fr);
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
    font-size: 12.5px;
}
.mock-approve__row:last-of-type { border-bottom: 0; }
.mock-approve__row--head {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-muted-2);
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}
.mock-approve__name {
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mock-approve__hours { color: var(--text-dark); font-variant-numeric: tabular-nums; }
/* Faktureringsgraden er tallet, hele blokken handler om. */
.mock-approve__rate { font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; }
.mock-approve__rate--ok { color: var(--green); }
.mock-approve__rate--warn { color: var(--orange-deep); }
.mock-approve__rate--low { color: var(--error); }
.mock-approve__state { text-align: right; }
.mock-approve__done { font-size: 11.5px; font-weight: 700; color: var(--green); white-space: nowrap; }
.mock-approve__btn {
    display: inline-block;
    background: var(--navy);
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 11px;
    white-space: nowrap;
}

/* --- 4. Kvalitetssikring og foto ---------------------------------------- */
.mock-progress { margin-bottom: 13px; }
.mock-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.mock-progress__count { font-size: 12px; font-weight: 800; color: var(--navy); }
.mock-progress__track { height: 5px; background: var(--border-light); }
.mock-progress__fill { height: 5px; background: var(--orange); }

.mock-checks { display: flex; flex-direction: column; }
.mock-check { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.mock-check:last-child { border-bottom: 0; }
.mock-check__mark {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    border: 1px solid var(--border-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 900;
    margin-top: 1px;
}
.mock-check--done .mock-check__mark { background: var(--green); border-color: var(--green); color: var(--white); }
.mock-check--active .mock-check__mark { border-color: var(--orange); color: var(--orange); }
.mock-check__body { flex: 1; min-width: 0; }
.mock-check__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mock-check__label { font-size: 12.5px; line-height: 1.35; color: var(--text-dark); }
.mock-check--done .mock-check__label { color: var(--text-muted); }
.mock-check--active .mock-check__label { font-weight: 800; color: var(--navy); }
.mock-tag {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: var(--orange);
    color: var(--navy);
    padding: 2px 6px;
    flex-shrink: 0;
}

/* Fotoerne haenger paa selve punktet — det er hele pointen. */
.mock-photos { display: flex; gap: 5px; margin-top: 8px; }
.mock-photo { width: 40px; height: 40px; display: block; flex-shrink: 0; }
.mock-photo--a { background: var(--navy-light); }
.mock-photo--b { background: var(--navy-edge); }
.mock-photo--add {
    border: 1px dashed var(--border-input);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

/* --- Mockups: responsivt ------------------------------------------------ */
@media (max-width: 768px) {
    .shot--mock { min-height: 0; padding: 20px 14px; }

    /* Kalenderen bliver ulaeselig ved siden af baenken paa en telefon. */
    .mock-plan { grid-template-columns: 1fr; }
    .mock-bench { border-right: 0; border-bottom: 1px solid var(--border); }
    .mock-task--dragging { transform: none; }
    .mock-cal__grid { grid-template-columns: 30px repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .mock-timer__clock { font-size: 23px; }
    .mock-cal__daylabel, .mock-block { font-size: 9px; }
}

/* --- Print -------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .btn, .nav-toggle { display: none !important; }
    body { background: #fff; }
    .legal p, .legal li { color: #000; }
}