/* cache-bump 2026-07-11: nyt ?v= så gamle/afkortede browser-cachede kopier erstattes */
/* ==========================================================
   Nummerplade.net — hovedstylesheet
   Brandfarver fra designguide (okt 2020)
   ========================================================== */

:root {
    --blue:        #0060B7;
    --blue-dark:   #004a8f;
    --blue-light:  #80B0DB;
    --red:         #E6332A;
    --ink:         #242E34;
    --green:       #2A8452; /* WCAG AA: hvid tekst på knapper (kontrast 4.65) — var #67C08E */
    --green-dark:  #226B41; /* hover + grøn badge/mark-tekst (mørkere end base) */
    --amber:       #B45309; /* advarsel (betinget syn/omsyn): hvid tekst 4.9 + tekst på lys bund; = tidslinjens 'gul' */
    --bg:          #F2F2F5;
    --white:       #ffffff;
    --muted:       #5f6672; /* WCAG AA på lys kort-baggrund (var #6b7280 = 4.33 → fejl) */
    --border:      #e2e4e9;
    --shadow:      0 10px 40px rgba(36, 46, 52, 0.10);
    --shadow-sm:   0 2px 10px rgba(36, 46, 52, 0.06);
    --radius:      14px;
    --max:         1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    gap: 1rem;
}
.logo img { height: 34px; width: auto; display: block; }

/* Søgefelt som fuld-bredde bar under logo/menu (undersider) */
/* Søgebar: lys blå baggrund; hvid boks så søgeren står tydeligt frem */
.header-search-bar { border-top: 1px solid var(--border); background: #EAF3FB; }
.header-search-bar .container { height: auto; padding-top: .6rem; padding-bottom: .6rem; }
.header-search { width: 100%; max-width: 640px; margin: 0 auto; }
.header-search .search-box { background: #fff; }

.hdr-hoejre { display: flex; align-items: center; gap: 1.1rem; }
/* Konto-ikon: let person-glyf (ingen ring) — blå når man er logget ind */
.konto-ikon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--ink); flex: 0 0 auto; }
.konto-ikon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.konto-ikon:hover { color: var(--blue); text-decoration: none; }
[x-cloak] { display: none !important; }
/* Min side-faner (Garage/Profil/Slutsedler/API) — under h1 på hver konto-underside */
.konto-faner { display: flex; gap: .3rem; flex-wrap: wrap; margin: -.4rem 0 1.4rem; border-bottom: 1px solid var(--border); }
.konto-faner a { padding: .55rem .9rem; font-weight: 600; font-size: .92rem; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.konto-faner a:hover { color: var(--ink); text-decoration: none; }
.konto-faner a.aktiv { color: var(--blue); border-bottom-color: var(--blue); }
/* Statusbeskeder (fx "API-adgang opdateret") skal have luft under fanerne */
.konto-side .form-ok, .konto-side .form-fejl { margin-top: .5rem; }
/* API-planvælger (Min side → API) */
.api-plan-net { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-width: 760px; }
.api-plan-kort { display: flex; flex-direction: column; gap: 3px; border: 2px solid var(--border); border-radius: 12px; padding: .85rem .95rem; cursor: pointer; background: #fff; position: relative; }
.api-plan-kort input { position: absolute; opacity: 0; }
.api-plan-kort:has(input:checked), .api-plan-kort.valgt { border-color: var(--blue); background: rgba(0,96,183,.04); }
/* Nuværende plan: grå badge der ALTID står der — så den kan skelnes fra det
   valgte kort (blå kant), når man klikker rundt mellem pakkerne */
.api-plan-nu { position: absolute; top: -10px; right: 10px; background: #eef2f6; color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); }
.api-plan-kort b { font-size: 1.02rem; }
.api-plan-type { position: absolute; top: .8rem; right: .9rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--blue); background: rgba(0,96,183,.1); padding: 2px 8px; border-radius: 99px; }
.api-plan-type.live { color: var(--red); background: rgba(230,51,42,.1); }
.api-plan-tal { font-size: .85rem; color: var(--muted); }
.api-plan-pris { font-weight: 700; margin-top: .2rem; }
/* Forbrugs-bar (Din API-adgang) */
.api-forbrug { padding: .7rem 0; }
.api-forbrug-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4rem; }
.api-forbrug-top span { color: var(--muted); }
.api-bar { height: 9px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.api-bar span { display: block; height: 100%; border-radius: 99px; transition: width .3s; }
.api-forbrug small { display: block; margin-top: .35rem; font-size: .8rem; }
/* API-nøgle + kopiér */
.api-key { display: block; font-size: .8rem; word-break: break-all; background: var(--bg); padding: .5rem .6rem; border-radius: 8px; width: 100%; box-sizing: border-box; }
.api-kopi { margin-top: .4rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--blue); background: none; border: 1px solid var(--border); border-radius: 8px; padding: .35rem .7rem; cursor: pointer; }
.api-kopi:hover { border-color: var(--blue); }
/* API-vejledning */
.api-guide h3 { font-size: .92rem; margin: 1.1rem 0 .35rem; }
.api-kode { background: #1c2833; color: #e8f1fb; border-radius: 10px; padding: .85rem 1rem; font-size: .82rem; line-height: 1.5; overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch; }
.api-kode b { color: #FFD34E; font-weight: 700; }
.api-noter { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .86rem; line-height: 1.5; color: var(--ink); }
.api-noter li { margin-bottom: .35rem; }
.api-noter code, .api-guide code { background: var(--bg); padding: 1px 5px; border-radius: 5px; font-size: .85em; }
/* samme farve som burger-menuen — to forskellige farver i toppen ser rodet ud */
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a { color: var(--ink); font-weight: bold; font-size: 0.95rem; }
.site-nav a:hover, .site-nav a.aktiv { color: var(--blue); text-decoration: none; }
/* Hamburger — kun mobil */
.nav-toggle { display: none; background: none; border: 0; padding: 6px; margin: 0; cursor: pointer; color: var(--ink); line-height: 0; }
.nav-toggle svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

/* ---------- Hero ---------- */
.hero {
    background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
    padding: 4.5rem 0 3.5rem;
    text-align: center;
}
.hero h1 {
    font-size: 2.6rem;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin-bottom: 0.9rem;
}
.hero h1 .accent { color: var(--blue); }
.hero .lead {
    font-size: 1.2rem;
    color: var(--muted);
    max-width: 620px;
    margin: 0 auto 2.3rem;
}

/* ---------- Søgefelt ---------- */
.search {
    max-width: 680px;
    margin: 0 auto;
    position: relative; /* forankrer forslags-dropdown */
}

/* Live-søgeforslag (dropdown under søgefeltet) */
/* Forslagslisten SKAL kunne scrolles internt (før: overflow:hidden → touch ramte
   siden bagved og listen gik ind bag tastaturet). max-height holder den inden for
   skærmen; overscroll-behavior:contain stopper scroll-chaining til siden. */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border,#e2e4e9);border-radius:12px;box-shadow:0 14px 40px rgba(36,46,52,.16);max-height:55vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:40;text-align:left}
.s-item,.s-item:hover,.s-item:focus,.s-item:active{text-decoration:none;color:inherit}
.s-item{display:flex;align-items:center;gap:.7rem;padding:.62rem .9rem;font-size:.92rem;border-bottom:1px solid var(--border,#e2e4e9)}
.s-item:last-child{border-bottom:none}
.s-item.sel,.s-item:hover{background:rgba(0,96,183,.07)}
.s-plade{flex:0 0 auto;min-width:86px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.s-tekst{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-aar{flex:0 0 auto;color:#6b7280;font-size:.82rem}
.s-status{flex:0 0 auto;font-size:.7rem;font-weight:bold;color:#6b7280;background:#f2f2f5;border:1px solid #e2e4e9;padding:2px 8px;border-radius:999px;white-space:nowrap}
.search-box{position:relative} /* dropdown forankres til selve feltet */
[x-cloak]{display:none!important}
.search-box {
    display: flex;
    align-items: center;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 6px 6px 6px 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search-box:focus-within {
    border-color: var(--blue);
    box-shadow: 0 12px 44px rgba(0, 96, 183, 0.18);
}
.search-type {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ink);            /* mørk tekst på lys blå (WCAG AA: 6.7) i idle-tilstand */
    background: var(--blue-light);
    padding: 6px 10px;
    border-radius: 8px;
    margin-left: 4px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.search-type.is-plate  { background: var(--blue); color: var(--white); }
.search-type.is-vin    { background: var(--ink);  color: var(--white); }
.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.35rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 10px;
    color: var(--ink);
    background: transparent;
    min-width: 0;
}
.search-input::placeholder { color: #b6bcc4; font-weight: normal; letter-spacing: normal; text-transform: none; }
.search-btn {
    flex: 0 0 auto;
    border: none;
    background: var(--green);
    color: var(--white);
    font-size: 1.05rem;
    font-weight: bold;
    padding: 14px 30px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
.search-btn:hover { background: var(--green-dark); }
.search-btn:active { transform: translateY(1px); }
.search-hint {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: var(--muted);
}

/* Kompakt søgefelt i header (undersider) */
/* Kompakt inline-søger i header-baren — aldrig wrap/fuld-bredde-knap (også mobil) */
.header-search .search-box { box-shadow: none; padding: 3px 3px 3px 6px; flex-wrap: nowrap; }
.header-search .search-input { font-size: 1rem; padding: 7px 8px; min-width: 0; }
.header-search .search-btn { width: auto; margin-top: 0; padding: 8px 18px; font-size: 0.9rem; flex: 0 0 auto; }
.header-search .search-type { display: none; }
/* Desktop: højere søgefelt + større tekst i felt og knap (skal stå EFTER de
   generelle header-search-regler ovenfor for at vinde cascaden) */
@media (min-width: 720px) {
    .header-search { max-width: 720px; }
    .header-search-bar .container { padding-top: .9rem; padding-bottom: .9rem; }
    .header-search .search-input { font-size: 1.15rem; padding: 13px 12px; }
    .header-search .search-btn { font-size: 1.05rem; padding: 13px 30px; }
}

/* ---------- Feature-kort ---------- */
.features { padding: 3.5rem 0 4.5rem; }
.features h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}
.features .sub { text-align: center; color: var(--muted); margin-bottom: 2.5rem; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.feature-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature-icon {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 96, 183, 0.09);
    border-radius: 12px;
    margin-bottom: 1rem;
}
.feature-icon svg { width: 24px; height: 24px; stroke: var(--blue); fill: none; stroke-width: 2; }
.feature-card h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.feature-card p { font-size: 0.92rem; color: var(--muted); line-height: 1.5; }

/* ---------- Trust-stribe ---------- */
.trust {
    background: var(--white);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 1.4rem 0;
}
.trust .container {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.92rem;
}
.trust b { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--ink);
    color: #aeb6bf;
    /* Mindre bund-padding: det store tomme farvede felt under copyright så dumt ud.
       env(safe-area) beskytter mod iOS home-indicator hvis viewport-fit slås til. */
    padding: 2.5rem 0 max(1rem, env(safe-area-inset-bottom));
    text-align: center;
    font-size: 0.9rem;
}
.site-footer a { color: var(--blue-light); }

/* ---------- Responsiv ---------- */
@media (max-width: 860px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: 2rem; }
    .hero { padding: 3rem 0 2.5rem; }
}
@media (max-width: 560px) {
    .search-box { flex-wrap: wrap; }
    .search-btn { width: 100%; margin-top: 6px; }
    .feature-grid { grid-template-columns: 1fr; }
    .search-input { font-size: 1.15rem; }
    /* Mobil-header: logo + menu skal passe; kompakt søgefelt skjules (forsiden har
       den store søger, og undersider er indholdssider). */
    .site-header .container { height: 52px; gap: .5rem; }
    .logo img { height: 25px; }
    /* Hamburger frem, menu som udfoldelig dropdown */
    .nav-toggle { display: inline-flex; align-items: center; margin-left: auto; }
    .hdr-row { position: relative; }
    .site-nav {
        position: absolute; top: 100%; right: 0; left: 0; z-index: 60;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--border);
        box-shadow: 0 10px 22px rgba(36, 46, 52, .12);
        display: none;
    }
    .site-nav.open { display: flex; }
    .site-nav a { padding: .95rem 1.25rem; border-top: 1px solid var(--border); font-size: 1rem; }
}

/* Statiske indholdssider (kontakt, landekoder m.fl.) */
/* Undersider: hvid baggrund (køretøjssiden beholder grå bag sine kort) */
body.lys { background: #fff; }

/* Følger .container's bredde (--max) — ALLE sider har samme bredde som top-baren */
.static-page { margin: 2rem auto 3rem; }
/* Rene formular-sider (login, opret, kontakt m.fl.): smal centreret kolonne på
   desktop i stedet for at strække felterne over hele bredden. */
.static-page.smalside { max-width: 480px; }
/* Min side: garage + konto-kort samles i én centreret kolonne (i stedet for at
   ligge venstre-tungt i en bred, tom container på desktop). */
.static-page.midside { max-width: 640px; }
.static-page.midside .garage { max-width: none; }
/* Min side på DESKTOP: fuld containerbredde. Her lå tidligere en to-kolonne-opsætning
   (.konto-net med .k-side), men den markup findes ikke længere — tilbage stod kun
   den brede container, så garagen fyldte 1080px mens kortene sad fast på deres egne
   560px og lignede en halv side (Brians fund 02-08-2026). Kortene følger nu
   containeren ligesom garagen. */
@media (min-width: 1000px) {
  .static-page.konto-side { max-width: var(--max); }
  .konto-side .k-kort { max-width: none; }
  /* Kortet fylder bredden, men INDTASTNINGSFELTER gør ikke: et navnefelt på
     1080px er hverken pænt eller læsbart. Grænsen sidder derfor på formularen. */
  .konto-side .k-kort .k-kontaktform { max-width: 620px; }
  .konto-side .garage { margin-top: 1.4rem; }
}
.static-page h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.15; margin-bottom: 1rem; }
.static-page h2 { font-size: 1.15rem; margin: 1.9rem 0 .7rem; color: var(--blue-dark); }
.static-page p { line-height: 1.6; margin-bottom: 1rem; }
.landekode-tabel { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.landekode-tabel th, .landekode-tabel td { text-align: left; padding: .5rem .8rem; border-bottom: 1px solid var(--border); font-size: .95rem; }
.landekode-tabel th { font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.landekode-tabel .lk-kode { font-weight: bold; color: var(--blue); width: 90px; }
.kontakt-kort { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; }
.kontakt-kort h2 { margin-top: 0; }
/* Kontaktformular */
.kontakt-form { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }
.kontakt-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: bold; font-size: .95rem; }
.kontakt-form .valgfri { font-weight: normal; color: var(--muted); font-size: .85rem; }
/* font-size ≥16px: ellers auto-zoomer iOS Safari ind når feltet fokuseres */
.kontakt-form input, .kontakt-form textarea { font: inherit; font-size: 16px; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.kontakt-form input:focus, .kontakt-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 96, 183, .12); }
.kontakt-form textarea { resize: vertical; }
.kontakt-form .husk-linje { flex-direction: row; align-items: center; gap: .5rem; font-weight: normal; }
.kontakt-form .husk-linje input { width: auto; }
.btn-primary { align-self: flex-start; background: var(--blue); color: #fff; font: inherit; font-weight: bold; border: 0; border-radius: 10px; padding: .75rem 1.6rem; cursor: pointer; }
.btn-primary:hover { background: var(--blue-dark); }
.form-ok { background: rgba(103, 192, 142, .14); border: 1px solid rgba(103, 192, 142, .4); color: var(--green-dark); border-radius: 10px; padding: 1rem 1.2rem; font-weight: bold; }
.form-fejl { background: rgba(230, 51, 42, .1); border: 1px solid rgba(230, 51, 42, .35); color: var(--red); border-radius: 10px; padding: .9rem 1.2rem; margin-bottom: 1rem; }

/* ── Kontaktsiden ────────────────────────────────────────────────────────────
   Var en 480px-spalte midt i en tom skærm. Nu: formular til venstre, genveje
   og datakilde-forklaring til højre — mobil stabler dem (formularen først). */
.static-page.kontakt-side { max-width: var(--max); }
.kt-hero { margin-bottom: 1.6rem; }
.kt-lead { font-size: 1.05rem; line-height: 1.6; color: var(--muted); max-width: 62ch; margin: 0; }
.kt-net { display: grid; gap: 1.4rem; }
.kt-form-kort { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); }
.kt-form-kort .kontakt-form { max-width: none; }
.kt-row2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.kt-side { display: flex; flex-direction: column; gap: 1rem; }
.kt-boks { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 1.1rem 1.2rem; }
.kt-boks h2 { font-size: 1rem; margin: 0 0 .7rem; color: var(--blue-dark); }
.kt-link { display: block; padding: .6rem 0; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.kt-link:last-child { border-bottom: 0; padding-bottom: 0; }
.kt-link b { display: block; font-size: .95rem; color: var(--blue); }
.kt-link span { display: block; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.kt-link:hover b { text-decoration: underline; }
.kt-fakta p { font-size: .87rem; line-height: 1.55; color: var(--muted); margin: 0 0 .6rem; }
.kt-fakta p:last-child { margin-bottom: 0; }
.kt-lille { font-size: .8rem !important; font-style: italic; }
/* Felterne ligger inde i <label> og arvede dens fede skrift — både det man
   taster og placeholderen stod bold. */
.kontakt-form input, .kontakt-form textarea { font-weight: 400; }
.kontakt-form ::placeholder { font-weight: 400; color: #98a1ad; opacity: 1; }
/* Kvittering: fylder bredden og fejrer lidt, i stedet for en tynd grøn stribe */
.kt-kvit { text-align: center; background: #fff; border: 1px solid rgba(103, 192, 142, .45); border-radius: 16px; padding: 2.6rem 1.5rem; box-shadow: var(--shadow-sm); max-width: 620px; margin: 0 auto; }
.kt-kvit svg { color: var(--green-dark); }
.kt-kvit h2 { margin: .6rem 0 .5rem; color: var(--ink); }
.kt-kvit p { color: var(--muted); line-height: 1.6; max-width: 44ch; margin: 0 auto 1.3rem; }
.kt-kvit .btn-primary { align-self: center; display: inline-block; text-decoration: none; }
@media (min-width: 900px) {
  .kt-net { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 2.2rem; }
  .kt-row2 { grid-template-columns: 1fr 1fr; }
  .kt-hero h1 { margin-bottom: .5rem; }
}
/* Statistik: hub-kort + tabeller med bjælker */
.stat-kort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; margin-bottom: .6rem; }
.stat-kort { display: flex; flex-direction: column; gap: .3rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; color: var(--ink); }
.stat-kort:hover { border-color: var(--blue); text-decoration: none; }
.stat-kort b { font-size: .98rem; }
.stat-kort span { font-size: .84rem; color: var(--muted); line-height: 1.4; }
/* "Kommer snart"-kort: markeres med stiplet kant + badge (ikke opacity, som
   ellers sænker tekstkontrasten under WCAG AA). */
.stat-kort.kommer { border-style: dashed; }
.stat-kort .stat-badge { align-self: flex-start; margin-top: .2rem; font-size: .68rem; font-weight: bold; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.stat-tilbage { margin-bottom: .6rem; font-size: .9rem; }
.stat-tabelwrap { overflow-x: auto; }
.stat-tabel { width: 100%; border-collapse: collapse; }
.stat-tabel th, .stat-tabel td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--border); font-size: .93rem; white-space: nowrap; }
.stat-tabel td:first-child + td, .stat-tabel td.f-tekst { white-space: normal; }
.stat-tabel th { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.stat-tabel .nr { color: var(--muted); font-size: .8rem; width: 34px; }
.stat-tabel td.f-tal, .stat-tabel td.f-pct, .stat-tabel td.f-dec1 { position: relative; font-variant-numeric: tabular-nums; }
.stat-bar { display: block; height: 4px; background: rgba(0, 96, 183, .35); border-radius: 2px; margin-top: 3px; min-width: 2px; }
/* Mobil: pak statistik-tabeller tættere, så også brede tabeller (fx drivmiddel
   måned-for-måned med 6 kolonner) passer i skærmbredden uden vandret scroll.
   Skal stå EFTER base-reglerne ovenfor for at vinde i kaskaden. */
@media (max-width: 560px) {
    .stat-tabel th, .stat-tabel td { padding: .4rem .25rem; font-size: .78rem; }
    /* hyphens: lange ét-ords-overskrifter ("Nummerplade", "registrering") kan
       ellers ikke brydes og tvinger hele tabellen bredere end skærmen */
    .stat-tabel th { white-space: normal; letter-spacing: 0; hyphens: auto; -webkit-hyphens: auto; }
    .stat-tabel td.f-maaned { white-space: normal; line-height: 1.15; }
    .stat-tabel td.f-tekst { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
    .stat-tabel .nr { width: 20px; }
}
.stat-meta { font-size: .82rem; margin-top: 1rem; }
.stat-kommer { background: rgba(0, 96, 183, .06); border: 1px solid rgba(0, 96, 183, .15); border-radius: 10px; padding: 1rem 1.2rem; color: var(--muted); }
.stat-rel { margin: .4rem 0 0 1.1rem; }
.stat-rel li { margin-bottom: .35rem; }

/* Min side: hvide kort m. blå overskrifter, bil-rækker m. plade + status-chips */
.konto-grid { display: grid; gap: 1.1rem; align-items: start; }
@media (min-width: 860px) { .konto-grid { grid-template-columns: 1.7fr 1fr; } }
.k-kort { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.35rem; box-shadow: var(--shadow-sm); }
/* Mobil: ingen kasse-i-kasse — ydre kort uden ramme, indholdet i fuld bredde */
@media (max-width: 859px) {
    .k-kort { border: none; box-shadow: none; border-radius: 0; padding: 0; background: none; }
}
/* Luft mellem stablede kort (så fx "DIN KONTO" ikke støder op mod teksten ovenover) */
.k-kort + .k-kort { margin-top: 1.25rem; }
@media (max-width: 859px) {
    .k-kort + .k-kort { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
}
.k-kort h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; color: var(--blue); display: flex; align-items: center; gap: .5rem; margin: 0 0 1.1rem; }
.k-kort h2 svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; stroke-width: 2; flex: 0 0 auto; }
.k-hej { color: var(--muted); font-weight: normal; }
.k-profil { display: flex; align-items: center; gap: .8rem; padding-bottom: .8rem; margin-bottom: .3rem; border-bottom: 1px solid var(--border); }
.k-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.k-profil-navn { font-weight: bold; }
.k-tom { color: var(--muted); line-height: 1.6; }
.k-note { color: var(--muted); font-size: .8rem; margin-top: .9rem; }
.k-linje { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .93rem; }
.k-linje span { color: var(--muted); }
.k-linje b { overflow-wrap: anywhere; text-align: right; }
/* Påmindelses-switch (iOS-agtig) */
.k-switch-linje { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: .2rem 0; }
.k-switch-tekst { display: flex; flex-direction: column; gap: .15rem; }
.k-switch-tekst b { font-size: .95rem; }
.k-switch-tekst small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.k-switch { position: relative; flex: 0 0 auto; width: 46px; height: 28px; }
.k-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.k-switch-slider { position: absolute; inset: 0; background: #cfd6dc; border-radius: 999px; transition: background .18s; }
.k-switch-slider::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(36, 46, 52, .3); transition: transform .18s; }
.k-switch input:checked + .k-switch-slider { background: var(--blue); }
.k-switch input:checked + .k-switch-slider::before { transform: translateX(18px); }
.k-switch input:focus-visible + .k-switch-slider { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Profil-redigering: ✎-knap på linjerne + små udfoldelige formularer */
.k-ret { border: none; background: none; color: var(--muted); cursor: pointer; font-size: .85rem; padding: 2px 6px; border-radius: 6px; margin-left: .3rem; }
.k-ret:hover { color: var(--blue); background: var(--bg); }
.k-miniform { display: flex; flex-direction: column; gap: .6rem; padding: .8rem 0 1rem; border-bottom: 1px solid var(--border); }
.k-miniform label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--muted); font-weight: 600; }
.k-miniform input { border: 1.5px solid var(--border); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: .95rem; }
.k-miniform input:focus { outline: none; border-color: var(--blue); }
.k-miniform .btn-primary { align-self: flex-start; }
.k-miniform-note { font-size: .82rem; color: var(--muted); line-height: 1.45; margin: 0; }
.k-afventer { font-size: .84rem; color: var(--muted); background: rgba(0, 96, 183, .06); border-radius: 9px; padding: .55rem .8rem; margin: .5rem 0; line-height: 1.45; }

/* Kontaktoplysninger (profil) */
.k-rediger { margin-top: 1rem; background: rgba(0, 96, 183, .08); color: var(--blue); border: 0; border-radius: 10px; padding: .6rem 1.2rem; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s; }
.k-rediger:hover { background: rgba(0, 96, 183, .14); }
.k-kontaktform { display: flex; flex-direction: column; gap: .95rem; padding-top: .3rem; }
.kf-felt { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; color: var(--muted); font-weight: 600; }
.kf-felt input { border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: .98rem; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.kf-felt input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 96, 183, .12); }
.kf-felt input::placeholder { color: #aab; font-weight: 400; }
.kf-valg { font-weight: 400; color: #9aa1ad; font-size: .78rem; }
.kf-postby { display: flex; gap: .8rem; }
.kf-postnr { flex: 0 0 115px; }
.kf-by { flex: 1; }
.kf-knapper { display: flex; align-items: center; gap: 1.2rem; margin-top: .2rem; }
.btn-tekst { background: none; border: 0; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; padding: .4rem; }
.btn-tekst:hover { color: var(--ink); }
.kf-row2 { display: flex; gap: .8rem; }
.kf-row2 .kf-felt { flex: 1; }
/* Kontotype-segment */
.kf-seg { display: inline-flex; background: #eef1f5; border-radius: 11px; padding: 3px; gap: 3px; }
.kf-seg button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--muted); padding: .5rem 1.3rem; border-radius: 9px; cursor: pointer; transition: all .15s; }
.kf-seg button.on { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* Kode-boks (verifikation) */
.kode-boks { background: rgba(0, 96, 183, .05); border: 1.5px solid rgba(0, 96, 183, .18); border-radius: 14px; padding: 1rem 1.1rem; margin-top: 1rem; }
.kode-txt { font-size: .9rem; color: var(--ink); line-height: 1.45; margin: 0 0 .7rem; }
.kode-input { display: flex; gap: .6rem; }
.kode-input input { flex: 1; border: 1.5px solid var(--border); border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 1.3rem; font-weight: 700; letter-spacing: .3em; text-align: center; background: #fff; }
.kode-input input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 96, 183, .12); }
.kode-input .btn-primary { align-self: stretch; white-space: nowrap; }
.k-fejl { background: rgba(230, 51, 42, .09); color: #c0271d; border-radius: 9px; padding: .6rem .85rem; font-size: .88rem; font-weight: 600; margin: 0 0 .8rem; }
.kode-boks .k-fejl { margin: .7rem 0 0; }
.k-note { font-size: .85rem; color: var(--muted); background: rgba(0, 96, 183, .06); border-radius: 9px; padding: .55rem .8rem; margin: .8rem 0 0; }
.k-uverif { display: inline-block; margin-left: .5rem; font-size: .7rem; font-weight: 700; color: #b4541b; background: #fdecdf; border-radius: 20px; padding: .1rem .5rem; vertical-align: middle; }
/* De to-kolonne-rækker (navn, postnr+by) skal kunne skrumpe på smalle skærme — ellers
   holder inputs' intrinsiske min-bredde dem for brede, så de gik ud over kanten på mobil. */
.kf-row2 .kf-felt, .kf-postby .kf-felt { min-width: 0; }
.kf-felt input { width: 100%; box-sizing: border-box; }

.k-logud { margin-top: 1.1rem; }
.k-logud button { background: none; border: 1px solid var(--border); border-radius: 9px; padding: .5rem 1.2rem; font: inherit; font-size: .88rem; font-weight: bold; color: var(--muted); cursor: pointer; }
.k-logud button:hover { color: var(--red); border-color: var(--red); }
.bil-liste { display: flex; flex-direction: column; gap: .65rem; }
.bil-raekke { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; border: 1px solid var(--border); border-radius: 12px; padding: .75rem .9rem; }
.bil-raekke:hover { border-color: rgba(0, 96, 183, .45); }
.bil-plade { display: inline-block; font-weight: bold; letter-spacing: .5px; font-size: .92rem; color: var(--ink); background: #fff; border: 1.5px solid #222; border-radius: 5px; padding: 2px 9px; line-height: 1.4; }
.bil-plade:hover { text-decoration: none; border-color: var(--blue); color: var(--blue); }
.bil-navn { color: var(--muted); font-size: .9rem; flex: 1; min-width: 130px; }
.bil-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-status { font-size: .74rem; font-weight: bold; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chip-status.ok { color: var(--green-dark); background: rgba(103, 192, 142, .16); }
.chip-status.warn { color: var(--red); background: rgba(230, 51, 42, .12); }
.chip-status.info { color: var(--blue); background: rgba(0, 96, 183, .1); }
.chip-status.mut { color: var(--muted); background: var(--bg); }
.bil-fjern-form { margin: 0; margin-left: auto; }
.bil-fjern { border: none; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px 6px; line-height: 1; }
.bil-fjern:hover { color: var(--red); }

/* Min bil-liste: knap på køretøjssiden + status i tabellen */
.garage-linje { margin-top: .8rem; }
.garage-btn { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px; font: inherit; font-size: .88rem; font-weight: bold; color: var(--blue); cursor: pointer; text-decoration: none; }
.garage-btn:hover { border-color: var(--blue); text-decoration: none; }
.garage-btn.er-paa { background: rgba(0, 96, 183, .08); border-color: rgba(0, 96, 183, .35); }
.k-ok { color: var(--green-dark); font-weight: bold; }
.k-warn { color: var(--red); font-weight: bold; }
.k-fjern { border: none; background: none; color: var(--red); font: inherit; font-size: .85rem; font-weight: bold; cursor: pointer; padding: 0; }

/* ---------- Min garage: lister + trækbare bil-kort (stilrent, ingen rammer) ---------- */
.garage { max-width: 640px; margin: 1.4rem 0 2.2rem; }
.garage-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.garage-top h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; color: var(--blue); display: flex; align-items: center; gap: .5rem; margin: 0; }
.garage-top h2 svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; stroke-width: 2; }

.garage-body { display: flex; flex-direction: column; gap: 1.7rem; }
.g-biler { display: flex; flex-direction: column; gap: .5rem; min-height: 20px; }

/* Bil-kort: ét let niveau (ikke kasse-i-kasse) — hvidt, blød kant, blød skygge */
/* Hele kortet er trækbart OG klikbart (→ bilen). Kun ikonerne (.g-bil-akt) undtaget. */
.g-bil { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "foto ho akt" "foto model akt" "detalje detalje detalje"; gap: .1rem .65rem; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; padding: .7rem .85rem; box-shadow: 0 1px 3px rgba(36, 46, 52, .05); cursor: grab; touch-action: manipulation; transition: border-color .12s, box-shadow .12s;
  /* iOS: langtryk skal STARTE en træk, ikke markere tekst / vise kopi-menu */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.g-bil:hover { border-color: rgba(0, 96, 183, .4); box-shadow: 0 2px 10px rgba(36, 46, 52, .09); }
.g-bil:active { cursor: grabbing; }
/* Enkelt sammenklappet: 1) plade + (valgfri) note   2) mærke+model.
   Detaljer (forsikring/syn/notifikation) ligger i fold-ud (.g-bil-detalje). */
/* Foto/ikon til venstre: nyeste godkendte billede — ellers køretøjs-silhuet.
   Billedet går HELT til kortets kant (negative margener æder paddingen) og
   kortets egen overflow:hidden-runding klipper hjørnerne. */
/* Bundmargen æder OGSÅ grid-rækkeafstanden (.1rem) — ellers 1,6px luft under fotoet */
.g-bil-foto { grid-area: foto; width: 64px; align-self: stretch; margin: -.7rem 0 calc(-.7rem - .1rem) -.85rem; overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: center; flex: none; }
/* (fotoets bundmargen er ens i begge tilstande — skillelinjen ligger på samme
   offset som kortbunden via .g-bil-detalje's margin-top .7rem) */
/* Ens højde på alle kort — teksten kan aldrig trykke kortet lavere end fotoet */
.g-bil { min-height: 66px; }
/* Handlinger nederst i fold-ud: ret note + fjern (væk fra det sammenklappede kort) */
.g-bil-handlinger { display: flex; gap: .6rem; margin-top: .7rem; }
.g-bil-handlinger button { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-size: .85rem; padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; }
.g-bil-handlinger button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-bil-handlinger .g-bil-fjern { color: var(--red); }
.g-bil-handlinger button:hover { border-color: currentColor; }
.g-bil-billede-knap { flex: 1; display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .85rem; padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--ink); cursor: pointer; }
.g-bil-billede-knap:hover { border-color: var(--blue); }
.g-bil-billede-knap svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-bil-billede-status { font-size: .82rem; margin-top: .5rem; color: var(--muted); }
.g-bil-billede-status.ok { color: var(--green-dark); }
.g-bil-billede-status.venter { color: #B45309; }
.g-bil-billede-status.fejl { color: var(--red); }
.g-bil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-bil-foto svg { width: 26px; height: 26px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-bil-ho { grid-area: ho; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; min-width: 0; }
.g-bil-plade { font-weight: bold; font-size: .95rem; letter-spacing: .3px; } /* pladen — ren, uden ramme */
.g-bil-model { grid-area: model; font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; min-width: 0; } /* mærke+model — egen linje */
/* note = neutralt chip; samme pille-form som status-chips */
.chip-note { font-size: .74rem; font-weight: bold; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: rgba(36, 46, 52, .08); color: var(--ink); }
.g-bil-note:empty { display: none; }
.g-bil-akt { grid-area: akt; display: flex; align-items: center; gap: .05rem; align-self: start; }
.g-bil-fold { border: none; background: none; color: var(--muted); cursor: pointer; border-radius: 7px; padding: 5px 6px; line-height: 0; }
.g-bil-fold svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.g-bil-fold:hover { color: var(--blue); background: var(--bg); }
.g-bil-aaben .g-bil-fold svg { transform: rotate(180deg); }

/* Fold-ud: detaljer + syn-notifikation pr. bil */
/* margin-top .7rem = PRÆCIS kortets bund-padding → fotoets højde er ens i
   sammenklappet og åben tilstand (ellers "hoppede" billedet 2px ved fold-ud) */
.g-bil-detalje { grid-area: detalje; margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--border); cursor: default; -webkit-user-select: text; user-select: text; }
.g-bil-d-linje { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .86rem; padding: .28rem 0; }
.g-bil-d-linje > span { color: var(--muted); }
.g-bil-d-linje b.ok { color: var(--green-dark); }
.g-bil-d-linje b.warn { color: var(--red); }
.g-bil-d-linje b.mut { color: var(--muted); font-weight: normal; }
.g-bil-d-notif { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; padding-top: .55rem; border-top: 1px solid var(--border); font-size: .86rem; font-weight: 600; cursor: pointer; }
.g-bil-d-notif .k-switch { width: 42px; height: 26px; }
.g-bil-d-notif .k-switch-slider::before { width: 20px; height: 20px; }
.g-bil-d-notif .k-switch input:checked + .k-switch-slider::before { transform: translateX(16px); }
.g-bil-aabn { display: inline-block; margin-top: .7rem; font-size: .86rem; font-weight: bold; color: var(--blue); }
/* (✎/✕ bor nu som tekstknapper i fold-ud — se .g-bil-handlinger) */

/* drag-tilstande (SortableJS) */
.g-bil-ghost { opacity: .3; }
.g-bil-chosen { box-shadow: 0 10px 26px rgba(0, 96, 183, .2); border-color: rgba(0, 96, 183, .4); }
.g-bil-drag { cursor: grabbing; }

/* Navn (kaldenavn): fast input-linje øverst i fold-ud */
.g-bil-navn-linje { align-items: center; }
.g-bil-navn { flex: 1; min-width: 0; max-width: 220px; font: inherit; font-size: .86rem; padding: .38rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); }
.g-bil-navn:focus { border-color: var(--blue); outline: none; }
.garage-tom { max-width: 560px; }

/* Nummerplade-scanner: kameraknap (kun mobil) + fuldskærms-overlay */
.scan-knap { display: none; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; border: none; border-radius: 10px; background: var(--blue); color: #fff; cursor: pointer; margin-left: 4px; align-self: stretch; }
.scan-knap svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 719px) {
    .scan-knap { display: inline-flex; }
    /* Forsidens hero-søger wrapper på mobil (Søg-knap i fuld bredde) → kameraet
       lægges INDE i skrivefeltets linje, højre side, så det ser ordentligt ud */
    .search .search-box { position: relative; }
    .search .scan-knap { position: absolute; top: 9px; right: 9px; width: 42px; height: 42px; margin: 0; }
    .search .search-input { padding-right: 58px; }
}
.scan-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: #000; touch-action: none; }
.scan-overlay video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Feltets højde: 24vw var den gennemtestede der læste bedst — et højere felt gav
   pladen mindre andel af udsnittet (mere rod med) og forringede læsningen. */
.scan-vindue { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); width: min(92vw, 640px); height: min(24vw, 168px); border: 3px solid #fff; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .55); }
.scan-hint { position: absolute; left: 0; right: 0; top: calc(36% + min(12vw, 84px) + 18px); text-align: center; color: #fff; font-weight: bold; font-size: 1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.scan-status { position: absolute; left: 0; right: 0; bottom: max(2.2rem, env(safe-area-inset-bottom)); text-align: center; color: rgba(255, 255, 255, .9); font-size: .95rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); padding: 0 1.5rem; }
.scan-luk { position: absolute; top: max(.9rem, env(safe-area-inset-top)); right: .9rem; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.3rem; cursor: pointer; }
.scan-zoom { position: absolute; top: max(1rem, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: none; background: rgba(0, 0, 0, .55); color: #fff; font-weight: bold; font-size: .85rem; padding: 5px 13px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.scan-overlay video { transition: transform .04s linear; }
/* Læser-tilstand: billedet er skudt afsted — frys + spinner i rammen, dæmp resten */
.scan-overlay.laeser video { filter: brightness(.55) saturate(.7); }
.scan-overlay.laeser .scan-vindue { border-color: rgba(255,255,255,.55); }
.scan-laeser { display: none; position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; color: #fff; }
.scan-overlay.laeser .scan-laeser { display: block; }
.scan-laeser .ring { width: 44px; height: 44px; margin: 0 auto 10px; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: scanspin .7s linear infinite; }
.scan-laeser b { font-size: 1rem; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
@keyframes scanspin { to { transform: rotate(360deg); } }
body.scan-aaben { overflow: hidden; }

/* Social login (Google m.fl.) — øverst på login/opret, over e-mail-formularen */
.sso-blok { max-width: 560px; margin-top: .4rem; }
.sso-eller { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .82rem; max-width: 560px; margin: 1.1rem 0; }
.sso-eller::before, .sso-eller::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sso-knap { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); font-weight: bold; font-size: .95rem; }
.sso-knap svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sso-knap:hover { border-color: var(--blue); text-decoration: none; }
.sso-knap.sso-apple { background: #000; color: #fff; border-color: #000; }
.sso-knap.sso-apple:hover { border-color: #333; }

/* Landekode-søgefelt */
.lk-soeg { width: 100%; max-width: 360px; font: inherit; padding: .65rem .9rem; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1rem; }
.lk-soeg:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 96, 183, .12); }

/* iOS-zoom-værn: Safari zoomer automatisk ind på inputs med font-size < 16px.
   På mobil tvinges ALLE indtastningsfelter derfor til 16px — dækker også
   fremtidige felter, så fejlen aldrig kan genopstå. (!important med vilje:
   værnet skal vinde over enhver komponent-styling.) */
@media (max-width: 760px) {
    input, select, textarea { font-size: 16px !important; }
}

/* v-bump 2026-07-13 15:28 */

/* Footer med link-kolonner (SEO-sider + sitet) */
.site-footer .footer-kolonner{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding:2.2rem 0 1.4rem;text-align:left}
.site-footer .footer-kol h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:#aeb6bf;margin:0 0 .7rem}
.site-footer .footer-kol a{display:block;color:rgba(255,255,255,.85);font-size:.9rem;padding:.22rem 0;text-decoration:none}
.site-footer .footer-kol a:hover{color:#fff;text-decoration:underline}
.site-footer .footer-bund{border-top:1px solid rgba(255,255,255,.12);padding-top:1.2rem;margin-top:.4rem}
@media(max-width:700px){.site-footer .footer-kolonner{grid-template-columns:1fr 1fr;gap:1.4rem}}
/* Footer: SoMe + nyhedsbrev */
.site-footer .footer-social{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.2rem 0;border-top:1px solid rgba(255,255,255,.12)}
.site-footer .footer-nyhedsbrev label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.6px;color:#aeb6bf;margin-bottom:.5rem}
.site-footer .fn-felt{display:flex;gap:.5rem;max-width:340px}
.site-footer .fn-felt input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:9px;padding:.6rem .8rem;font-size:.9rem}
.site-footer .fn-felt input::placeholder{color:rgba(255,255,255,.5)}
.site-footer .fn-felt button{flex:0 0 auto;border:none;background:var(--green);color:#fff;font-weight:bold;border-radius:9px;padding:.6rem 1.1rem;cursor:pointer;font-size:.9rem}
.site-footer .footer-ikoner{display:flex;gap:.7rem}
.site-footer .footer-ikoner a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);color:#fff}
.site-footer .footer-ikoner a:hover{background:rgba(255,255,255,.2)}
.site-footer .footer-ikoner svg{width:20px;height:20px;fill:currentColor}
.site-footer .footer-ikoner .ig svg{fill:none;stroke:currentColor;stroke-width:2}
.site-footer .footer-ikoner .ig svg circle:last-child{fill:currentColor;stroke:none}
.nyhedsbrev-form{display:flex;gap:.6rem;max-width:420px;margin:1rem 0}
.nyhedsbrev-form input{flex:1;border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem;font-size:1rem}
.nyhedsbrev-form button{border:none;background:var(--green);color:#fff;font-weight:bold;border-radius:10px;padding:.7rem 1.4rem;cursor:pointer}
@media(max-width:560px){.site-footer .footer-social{flex-direction:column;align-items:flex-start} .site-footer .fn-felt{max-width:none;width:100%}}
/* SEO-indholdssider */
.seoside{max-width:760px}
/* DESKTOP: brødtekst i venstre spalte (læsbar linjelængde bevaret) + FAQ og
   "Læs også" i en sidebar, så siden bruger bredden i stedet for at efterlade
   halvdelen af skærmen tom (Brians fund 02-08-2026). Mobil: ét spor som før. */
.seo-net{display:grid;gap:1.6rem}
.seo-krop{min-width:0}
.seo-side{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.seoside .seo-mere{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.4rem}
.seoside .seo-mere h2,.seoside .seo-faq h2{font-size:1rem;color:var(--blue-dark);margin:0 0 .7rem}
.seoside .seo-mere a{display:block;padding:.5rem 0;border-bottom:1px solid var(--border);color:var(--blue);text-decoration:none;font-size:.92rem;line-height:1.4}
.seoside .seo-mere a:last-child{border-bottom:0;padding-bottom:0}
.seoside .seo-mere a:hover{text-decoration:underline}
@media (min-width:980px){
  .seoside{max-width:var(--max)}
  .seo-net{grid-template-columns:minmax(0,1fr) 320px;gap:0 3rem;align-items:start}
  .seoside h1{max-width:22ch}
}
.seoside h2{margin-top:2rem}
.seoside .seo-faq{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.4rem;margin-top:0}
.seoside .seo-faq h3{font-size:1rem;color:var(--blue-dark);margin:.9rem 0 .3rem}
.seoside .seo-faq h3:first-child{margin-top:0}
.seoside .seo-faq p{margin-bottom:.4rem}
.seoside .seo-cta{margin-top:2rem}
.seoside .seo-cta .btn-primary{text-decoration:none;display:inline-block}
/* Lækre, scannbare content-komponenter til SEO-siderne */
.seoside .seo-lead{font-size:1.14rem;line-height:1.6;color:var(--ink)}
.seoside ul.seo-tjek{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.55rem}
.seoside ul.seo-tjek li{position:relative;padding-left:2.1rem;line-height:1.5}
.seoside ul.seo-tjek li::before{content:"✓";position:absolute;left:0;top:.05rem;width:1.4rem;height:1.4rem;border-radius:50%;background:#2A8452;color:#fff;font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.seoside .seo-boks{background:rgba(0,96,183,.055);border:1px solid rgba(0,96,183,.18);border-radius:14px;padding:1.05rem 1.3rem;margin:1.7rem 0}
.seoside .seo-boks>*:last-child{margin-bottom:0}.seoside .seo-boks>*:first-child{margin-top:0}
.seoside .seo-obs{background:#fdf4e7;border:1px solid #f0d9b5;border-radius:14px;padding:1.05rem 1.3rem 1.05rem 3rem;margin:1.7rem 0;position:relative}
.seoside .seo-obs::before{content:"⚠";position:absolute;left:1.1rem;top:1rem;font-size:1.1rem}
.seoside .seo-obs>*:last-child{margin-bottom:0}.seoside .seo-obs b{color:#a8611a}
.seoside .seo-cta-kort{background:linear-gradient(135deg,#0a66c2,#004a8f);color:#fff;border-radius:16px;padding:1.5rem 1.6rem;margin:2rem 0;box-shadow:0 10px 26px rgba(0,74,143,.24)}
.seoside .seo-cta-kort h2,.seoside .seo-cta-kort h3{color:#fff;margin:0 0 .4rem;font-size:1.22rem}
.seoside .seo-cta-kort p{margin:0 0 1.1rem;opacity:.93;line-height:1.5}
.seoside .seo-cta-kort .btn{display:inline-block;background:#fff;color:var(--blue-dark);font-weight:700;padding:.72rem 1.5rem;border-radius:11px;text-decoration:none}
.seoside .seo-cta-kort .btn:hover{background:#f0f4f8}
.seoside .seo-typer{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.7rem;margin:1.5rem 0}
.seoside .seo-typer a{display:block;background:#fff;border:1px solid var(--border);border-radius:13px;padding:.95rem 1.05rem;text-decoration:none;color:var(--ink);font-weight:700;transition:border-color .15s,box-shadow .15s}
.seoside .seo-typer a:hover{border-color:var(--blue);box-shadow:0 5px 14px rgba(0,96,183,.11)}
.seoside .seo-typer a span{display:block;font-size:.8rem;color:var(--muted);font-weight:400;margin-top:.2rem}

/* Forside: SEO-tekstsektion under features */
.forside-tekst{background:#fff;border-top:1px solid var(--border);padding:3rem 0 3.4rem}
/* Tre spalter på desktop. Brødtekst må ALDRIG strækkes over hele skærmen (en
   linje på 120 tegn er tung at læse) — derfor spalter frem for fuld bredde. */
.forside-tekst .ft-net{max-width:760px}
@media (min-width:980px){
  .forside-tekst .ft-net{max-width:var(--max);display:grid;grid-template-columns:repeat(3,1fr);gap:0 2.6rem;align-items:start}
  .forside-tekst .ft-net h2{margin-top:0}
}
.forside-tekst h2{font-size:1.25rem;margin:1.8rem 0 .6rem}
.forside-tekst h2:first-child{margin-top:0}
.forside-tekst p{color:var(--ink);line-height:1.65;margin-bottom:.9rem}

/* 404-side: DK-plade der siger 404 */
.side404{max-width:560px;text-align:center;padding-top:1.5rem}
.plade404{display:inline-flex;align-items:stretch;border-radius:10px;overflow:hidden;border:3px solid var(--ink);box-shadow:var(--shadow);margin-bottom:1.6rem}
.plade404 .eu{background:#003399;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 11px;font-size:.62rem;font-weight:bold}
.plade404 .eu .stjerner{font-size:.7rem;line-height:1;margin-bottom:3px;color:#FFCC00}
.plade404 .txt{background:#fff;color:var(--ink);font-weight:bold;font-size:2.2rem;letter-spacing:4px;padding:10px 26px;display:flex;align-items:center}
.side404 h1{margin-bottom:.7rem}
.side404-links{margin-top:1.6rem;color:var(--muted)}

/* cache-bump 1784106567 */

/* Support-tråd (svar.php) */
.support-traad{display:flex;flex-direction:column;gap:10px;margin:1.4rem 0}
.st-boble{border-radius:13px;padding:.75rem 1rem;max-width:88%}
.st-boble.kunde{background:var(--bg,#f2f5f8);border:1px solid var(--border,#e3e8ee)}
.st-boble.support{background:rgba(0,96,183,.08);align-self:flex-end}
.st-hvem{font-size:.76rem;color:var(--muted,#6b7681);margin-bottom:.3rem}
.st-hvem .st-tid{margin-left:.5rem}
.st-tekst{line-height:1.5}
.support-svar textarea{width:100%;border:1px solid var(--border,#e3e8ee);border-radius:10px;padding:.7rem;font:inherit;margin-top:.4rem}
.support-svar{margin-top:1rem}

/* ── iPhone-app-siden (/app) ─────────────────────────────────────────────────
   App Store-badget er Apples eget mærke og må ikke ændres — kun skaleres. */
.app-hero{background:linear-gradient(180deg,rgba(0,96,183,.06),rgba(0,96,183,0));border-bottom:1px solid var(--border);padding:2.8rem 0 3rem}
.app-hero-net{display:grid;gap:2rem;align-items:center}
.app-hero-tekst{max-width:640px}
/* Telefonrammer om skærmbillederne — ren CSS, ingen mockup-billeder at vedligeholde */
.app-skaerme{display:flex;justify-content:center;align-items:center}
.app-tlf{box-sizing:border-box;background:#1b1f24;border-radius:34px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.28);flex:none}
.app-tlf img{display:block;width:100%;height:auto;border-radius:27px}
.app-tlf-m{width:206px;z-index:2}
.app-tlf-v,.app-tlf-h{width:172px;opacity:.92}
.app-tlf-v{transform:rotate(-5deg) translateX(14px);margin-right:-26px}
.app-tlf-h{transform:rotate(5deg) translateX(-14px);margin-left:-26px}
@media (max-width:560px){
  .app-tlf-v,.app-tlf-h{display:none}
  .app-tlf-m{width:232px}
  .app-skaerme{margin-top:1.8rem}
}
@media (min-width:900px){
  .app-hero-net{grid-template-columns:minmax(0,1fr) auto;gap:3rem}
  .app-tlf-m{width:238px}
  .app-tlf-v,.app-tlf-h{width:198px}
}
.app-ikon{border-radius:20px;box-shadow:0 6px 18px rgba(0,0,0,.14);display:block;margin-bottom:1.1rem}
.app-hero h1{font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.15;margin-bottom:.7rem}
.app-lead{font-size:1.08rem;line-height:1.6;color:var(--muted);margin-bottom:1.4rem}
.app-badge{display:inline-block;line-height:0}
.app-badge img{height:56px;width:auto}
.app-krav{font-size:.83rem;color:var(--muted);margin-top:.9rem}
.app-side{margin:2.4rem auto 3.4rem;max-width:var(--max)}
.app-net{display:grid;gap:1rem;grid-template-columns:1fr}
.app-kort{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm)}
.app-kort h2{font-size:1.02rem;margin:.7rem 0 .35rem;color:var(--ink)}
.app-kort p{font-size:.9rem;line-height:1.55;color:var(--muted);margin:0}
.app-ik{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(0,96,183,.09)}
.app-ik svg{width:20px;height:20px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-bund{margin-top:2.2rem;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:1.8rem 1.6rem;text-align:center}
.app-bund h2{margin:0 0 .5rem;font-size:1.15rem}
.app-bund p{color:var(--muted);line-height:1.6;max-width:52ch;margin:0 auto 1.2rem}
@media (min-width:700px){.app-net{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.app-net{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.kt-udfyldt{font-size:.82rem;color:var(--muted);margin:0 0 1rem}

/* ── Synshaller (/synshaller) ────────────────────────────────────────────────
   Simpel liste grupperet i landsdele, med klientside-filter (alle haller er i
   DOM'en → SEO uændret og søgningen er øjeblikkelig). */
.static-page.synshaller-side{max-width:var(--max)}
.sh-top{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;margin:1.2rem 0 1.8rem}
.sh-soeg{flex:1;min-width:240px;max-width:420px;font:inherit;font-size:16px;padding:.7rem .9rem;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink)}
.sh-soeg:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,96,183,.12)}
.sh-tung-valg{display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--muted);cursor:pointer}
.sh-gruppe{margin-bottom:2.2rem}
.sh-gruppe h2{font-size:1.05rem;color:var(--blue-dark);margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem}
.sh-antal{font-size:.78rem;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:.1rem .55rem}
.sh-net{display:grid;grid-template-columns:1fr;gap:.7rem}
.sh-kort{display:flex;flex-direction:column;gap:.15rem;background:#fff;border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem}
/* ⚠️ display:flex på en klasse slår browserens [hidden]{display:none} (den er kun
   en type-svag UA-regel). Uden dette blev filtrerede kort ved med at stå der,
   selvom JS'en havde sat hidden — søgningen så helt død ud (Brians fund). */
.sh-kort[hidden],.sh-gruppe[hidden]{display:none !important}
.sh-kort b{font-size:.95rem;color:var(--ink);line-height:1.35}
.sh-kort span{font-size:.85rem;color:var(--muted)}
.sh-tung{align-self:flex-start;margin-top:.35rem;font-size:.72rem !important;font-weight:600;color:var(--blue) !important;background:rgba(0,96,183,.08);border-radius:999px;padding:.15rem .55rem}
.sh-tom{color:var(--muted);font-style:italic}
@media (min-width:640px){.sh-net{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.sh-net{grid-template-columns:repeat(3,1fr)}}
.sh-kortboks{margin:1.4rem 0 .4rem;border:1px solid var(--border);border-radius:14px;overflow:hidden}
#sh-kort{height:380px;width:100%;background:var(--bg)}
@media (max-width:640px){#sh-kort{height:300px}}
.leaflet-popup-content{font:inherit;font-size:.88rem;line-height:1.45}
.leaflet-container{font:inherit}
/* Kort-finish: bløde hjørner, diskret skygge og lyse kontroller — moderne look
   frem for Leaflets kantede standard. */
.sh-kortboks{box-shadow:0 2px 10px rgba(36,46,52,.07)}
#sh-kort .leaflet-control-zoom{border:none;box-shadow:0 2px 8px rgba(0,0,0,.16);border-radius:10px;overflow:hidden}
#sh-kort .leaflet-control-zoom a{width:32px;height:32px;line-height:32px;color:var(--ink);border:none;font-weight:600}
#sh-kort .leaflet-control-zoom a:hover{background:var(--bg)}
#sh-kort .leaflet-popup-content-wrapper{border-radius:12px;box-shadow:0 6px 22px rgba(0,0,0,.18)}
#sh-kort .leaflet-popup-content b{color:var(--ink)}
#sh-kort .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.75);border-radius:6px 0 0 0}
#sh-kort path.leaflet-interactive{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}

/* Hero-kort i FULD bredde øverst på /synshaller — kortet ER oversigten, og
   listen nedenunder folder sig først ud når man søger. */
/* ⚠️ Leaflets egne lag ligger på z-index 400-1000 og lagde sig derfor OVER
   den sticky header og søgefeltet ved scroll (Brians fund). Hele hero-boksen
   får sin egen stablings-kontekst med lavt z-index, så alt i kortet bliver
   under headeren — uanset hvad Leaflet finder på indeni. */
.sh-hero{position:relative;z-index:0;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);border-bottom:1px solid var(--border);overflow:hidden}
/* ⛔ HER STOD FØR en regel der satte z-index:auto på ALLE .leaflet-pane —
   den holdt ganske vist kortet under headeren, men ødelagde samtidig Leaflets
   interne lagdeling, så nåle og popups havnede bag kortflisene og ikke kunne
   klikkes (Brians fund). isolation:isolate ovenfor gør arbejdet alene: den
   laver en stablings-kontekst, så Leaflets 400-1000 aldrig når op over
   headeren — uden at røre rækkefølgen indeni. */
.sh-hero #sh-kort{height:min(58vh,520px);width:100%;background:var(--bg)}
@media (max-width:640px){.sh-hero #sh-kort{height:52vh}}
/* Dråbeformet nål — tydelig markør frem for en lille prik */
/* Nålen tegnes INDE i ikon-boksen (som Leaflet gør klikbar), centreret vandret
   og med spidsen i bunden — så det man ser og det man kan ramme er det samme. */
.sh-naal,.shd-naal{cursor:pointer}
.sh-naal span,.shd-naal span{display:block;width:26px;height:26px;margin:4px auto 0;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);border:2.5px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.32);
  pointer-events:none}
.sh-naal.bil span{background:#0060B7}
.sh-naal.tung span{background:#B45309}
.shd-naal span{width:30px;height:30px;margin:5px auto 0;background:#0060B7}
.sh-pop-link{display:inline-block;margin-top:.35rem;font-weight:600;color:var(--blue)}
a.sh-kort{text-decoration:none;transition:border-color .12s,box-shadow .12s}
a.sh-kort:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(0,96,183,.12)}

/* ── Én synshal (/synshal/…) ─────────────────────────────────────────────── */
.static-page.synshal-side{max-width:var(--max)}
.sh-krumme{font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
.sh-krumme a{color:var(--blue);text-decoration:none}
.sh-krumme span{margin:0 .35rem}
.sh-under{color:var(--muted);margin:-.4rem 0 1.4rem}
/* minmax(0,1fr) + min-width:0: en gitter-kolonne skrumper som udgangspunkt ALDRIG
   under sit indholds mindstebredde, så et bredt kort eller et langt bilnavn
   pustede siden op til 440px i et 375px vindue (Brians fund). */
.shd-net{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
.shd-hoved,.shd-side{min-width:0}
.shd-kortboks{position:relative;z-index:0;isolation:isolate;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1.8rem;box-shadow:0 2px 10px rgba(36,46,52,.07)}
#shd-kort{height:320px;width:100%;background:var(--bg)}
.synshal-side h2{font-size:1.05rem;color:var(--blue-dark);margin:0 0 .8rem}
.shd-syn{display:flex;flex-direction:column;gap:.55rem}
.shd-rk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.9rem;align-items:center;background:#fff;border:1px solid var(--border);border-radius:12px;padding:.75rem .95rem}
.shd-bil{min-width:0}
.shd-bil b{overflow-wrap:break-word}
@media (max-width:640px){
  /* Én kolonne på telefon: dato øverst, så bilen, så resultatet på egen linje.
     Med tre kolonner blev "Ikke godkendt og omsyn er ikke muligt" så bred, at
     bilnavnet blev knækket bogstav for bogstav (Brians fund). */
  .shd-rk{grid-template-columns:minmax(0,1fr);row-gap:.4rem}
  .shd-res{justify-self:start}
}
.shd-dato{font-size:.85rem;font-weight:600;color:var(--muted);white-space:nowrap}
.shd-bil b{display:block;font-size:.95rem;color:var(--ink)}
.shd-bil span{font-size:.8rem;color:var(--muted)}
.shd-res{font-size:.78rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;white-space:nowrap}
.shd-res.ok{color:var(--green-dark,#2A8452);background:rgba(42,132,82,.1)}
.shd-res.cond{color:#B45309;background:rgba(180,83,9,.1)}
.shd-res.warn{color:var(--red);background:rgba(230,51,42,.1)}
.shd-side{display:flex;flex-direction:column;gap:1rem}
.shd-boks{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem}
.shd-boks p{font-size:.88rem;line-height:1.55;color:var(--muted);margin:0 0 1rem}
.shd-linje{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--border);font-size:.9rem}
.shd-linje:last-of-type{border-bottom:0}
.shd-linje span{color:var(--muted)}
.shd-rute{display:inline-block;margin-top:.9rem;font-weight:600;color:var(--blue);text-decoration:none}
.shd-rute:hover{text-decoration:underline}
.shd-cta{text-decoration:none;display:inline-block}
@media (min-width:900px){.shd-net{grid-template-columns:minmax(0,1fr) 320px;gap:2.4rem;align-items:start}}