/* ===== HubMatic – hubmatic.dk (lyst tema) ===== */

:root {
    --bg:          #F6F8F7;
    --bg-alt:      #EEF3F0;
    --surface:     #FFFFFF;
    --border:      #E1E8E4;
    --border-2:    #CFD9D4;
    --text:        #0F1A15;
    --muted:       #5B6A63;
    --green:       #00BF63;
    --green-hover: #00AD5A;
    --green-ink:   #00BF63;   /* samme grøn som logoet – bruges også til grøn tekst */
    --green-soft:  #E4F7EC;
    --shadow-sm:   0 1px 2px rgba(15, 26, 21, 0.05), 0 2px 8px rgba(15, 26, 21, 0.04);
    --shadow-md:   0 2px 6px rgba(15, 26, 21, 0.05), 0 16px 40px -12px rgba(15, 26, 21, 0.14);
    --radius:      16px;
    --font:        'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

/*
    hidden skal betyde skjult.

    Browserens egen regel for [hidden] er «display: none» med den allerlaveste vægt,
    så enhver anden display-regel slår den ud af kraft. Købsboksen har display: flex,
    og uden det her stod den åben og tom, så snart siden blev hentet — og kunne ikke
    lukkes igen, for «hidden» gjorde ingenting.
*/
[hidden] { display: none !important; }

/* Brødtekst i medium-vægt, så den står tydeligere */
p, li, address, .lead, .footer-bottom {
    font-weight: 500;
}

/* Overskrifter: kraftige og stramme – samme udtryk som DocMate */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.5px; }
h1 { letter-spacing: -1.2px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding-inline: 24px;
}
.accent { color: var(--green); }

/* ---------- Knapper ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
    white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 13px 24px; font-size: 16px; }

.btn-primary {
    background: var(--green);
    color: #03140A;
    font-weight: 700;
    box-shadow: 0 6px 20px -6px rgba(0, 191, 99, 0.55);
}
.btn-primary:hover { background: var(--green-hover); }

.btn-outline { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.btn-outline:hover { border-color: var(--green); color: var(--green-ink); }

.btn-disabled {
    background: var(--bg-alt);
    color: var(--muted);
    border-color: var(--border);
    cursor: default;
}
.btn-disabled:hover { transform: none; }

/* ---------- Eyebrow (ren versaltekst, som på DocMate) ---------- */
.eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--green-ink);
}
.eyebrow .dot { display: none; }

/* I toppen bevares den lille pille-etiket */
.hero .eyebrow, .page-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    background: var(--green-soft);
    border: 1px solid rgba(0, 191, 99, 0.25);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 4px;
}
.hero .eyebrow .dot, .page-head .eyebrow .dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* ---------- Logo (tekst) – beholder logoets egen skrifttype ---------- */
.brand, .hub-core { font-family: "Ubuntu", var(--font); }
.brand { display: inline-flex; flex-direction: column; line-height: 1; }
.brand-small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--green);
    margin-bottom: 3px;
}
.brand-big { font-size: 22px; font-weight: 700; letter-spacing: .02em; color: #000; }
.nav .brand-small { font-size: 12px; margin-bottom: 5px; }
.nav .brand-big { font-size: 31px; }

/* Logofilen (bruges i topbjælken, hub-grafikken og footeren) */
.brand-img { height: 52px; width: auto; }
.nav .brand-img { height: 34px; }
.brand-footer .brand-img { height: 46px; }
.hub-core .brand-img { height: auto; width: clamp(118px, 13.5vw, 165px); }

/* ---------- Topbjælke ---------- */
/*
    Bjælken er fast og følger med, når man ruller.

    Den slørede baggrund er pillet ud med vilje. En fast bjælke med backdrop-filter
    tvinger browseren til at regne indholdet bagved om, for hver eneste pixel der
    rulles — og med en video i baggrunden koster det hele vejen ned ad siden.
*/
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--border);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 84px;
}
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--muted); font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .2s; position: relative; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); font-weight: 500; }
.nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -31px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--green);
}
.nav-cta { display: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* Knap med ikon, fx «Min side» */
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }
.btn-icon svg {
    width: 17px; height: 17px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Den side man står på: markeret, ikke slået fra */
.btn.is-current { color: var(--text); background: var(--bg-alt); }

/* ===== Menuen under «Min side» ===== */
.minside-menu { position: relative; }
.minside-drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 210px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}
.minside-drop a,
.minside-drop button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 14.5px;
    color: var(--text);
    cursor: pointer;
}
.minside-drop a:hover,
.minside-drop button:hover { background: var(--bg-alt); }
.minside-hvem {
    margin: 0;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.minside-drop [data-logud] { color: #C0392B; }

/* ---------- Hero ---------- */
.hero, .page-head { position: relative; overflow: hidden; }
.page-head {
    background:
        radial-gradient(ellipse 60% 70% at 85% 10%, rgba(0, 191, 99, 0.14), transparent 70%),
        linear-gradient(#FFFFFF, var(--bg));
}

/* ---------- Hero med video i baggrunden ---------- */
.hero {
    padding-block: 132px 128px;
    color: #FFFFFF;
    /* Vises indtil videoen er hentet – og i stedet for den på mobil */
    background: radial-gradient(ellipse 80% 90% at 78% 25%, #0E5B52, #061310 70%);
}
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}
/* Mørkt slør, så teksten kan læses, uanset hvor lys videoen er lige der */
.hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(4, 16, 13, .86) 0%, rgba(4, 16, 13, .6) 48%, rgba(4, 16, 13, .3) 100%),
        linear-gradient(rgba(4, 16, 13, .2), rgba(4, 16, 13, .5));
}
/* Teksten bliver stående i venstre side, som da kortene stod ved siden af */
.hero-inner { position: relative; z-index: 2; }
.hero-text { max-width: 620px; }
.hero h1 { color: #FFFFFF; }
.hero .accent { color: #35DC8D; }
.hero .lead { color: rgba(255, 255, 255, .78); }
.hero .eyebrow {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}
.hero .btn-outline {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .06);
}
.hero .btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }

/* Videoen spares væk, hvor den enten generer eller koster for meget data */
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
@media (max-width: 720px)               { .hero-video { display: none; } }
.hero h1, .page-head h1 {
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 20px 0 18px;
}
.lead { font-size: 18px; color: var(--muted); max-width: 560px; margin: 0 0 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hub-grafik (ikke i brug længere, men stilarterne beholdes) */
.hub {
    position: relative;
    width: 100%;
    max-width: 430px;
    aspect-ratio: 1;
    margin-inline: auto;
}
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-lines line {
    stroke: rgba(0, 191, 99, 0.6);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 5 6;
    animation: flow 1.6s linear infinite;
}
.hub-ring {
    fill: none;
    stroke: var(--border-2);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 2 6;
}
@keyframes flow { to { stroke-dashoffset: -22; } }

/* HubMatic-logoet i en lysende kasse */
.hub-core {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    padding: clamp(16px, 2vw, 24px) clamp(20px, 2.6vw, 32px);
    background: #fff;
    border: 1.5px solid rgba(0, 191, 99, 0.55);
    border-radius: 18px;
    box-shadow:
        0 0 0 8px rgba(0, 191, 99, 0.10),
        0 0 40px rgba(0, 191, 99, 0.45),
        0 18px 40px -12px rgba(0, 120, 60, 0.45);
    animation: glow 3s ease-in-out infinite;
}
.hub-core .brand-small { font-size: clamp(8px, .8vw, 9.5px); margin-bottom: 3px; }
.hub-core .brand-big { font-size: clamp(18px, 2.1vw, 23px); }
@keyframes glow {
    50% {
        box-shadow:
            0 0 0 12px rgba(0, 191, 99, 0.14),
            0 0 60px rgba(0, 191, 99, 0.6),
            0 18px 40px -12px rgba(0, 120, 60, 0.45);
    }
}
.hub-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}
.node-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.node-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    background: var(--bg-alt);
    border-radius: 999px;
    padding: 1px 8px;
}
.node-tag.live { color: var(--green-ink); background: var(--green-soft); }

/* ---------- Programside-top ---------- */
.page-head { padding-block: 72px 48px; border-bottom: 1px solid var(--border); }
.page-head .container { position: relative; }
.page-head .lead { margin-bottom: 28px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
    border: 1px solid var(--border-2);
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .2s;
}
.filter:hover { color: var(--text); border-color: var(--text); }
.filter.active { background: var(--text); border-color: var(--text); color: #fff; }

/* ---------- Sektioner ---------- */
.section { padding-block: 96px; }
.section-tight { padding-block: 56px 96px; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-head h2 {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 18px 0 12px;
}
.section-head p { color: var(--muted); margin: 0; font-size: 18px; }
.center-cta { text-align: center; margin-top: 40px; }

/* ---------- Programkasser ---------- */
.pgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.grid-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 0; }

/* Har kontoen kun ét eller to programmer, skal kortene ikke stå som smalle strimler.
   Skrives med to klasser, så de står efter .prog-grid og vinder. */
.prog-grid.prog-grid-few { grid-template-columns: repeat(2, 1fr); max-width: 840px; }
.prog-grid.prog-grid-one { grid-template-columns: 1fr; max-width: 560px; }

.pcard {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    outline: none;
}
.pcard:hover, .pcard:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-2);
}
.pcard:focus-visible { box-shadow: 0 0 0 3px rgba(0, 191, 99, 0.35), var(--shadow-md); }

.pcard-media {
    aspect-ratio: 2 / 1;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
/* «contain», ikke «cover»: et logo må ikke beskæres. DocMate og Sequence er
   2:1 og fylder rammen alligevel, men AirMates sky er 3:2, og med «cover»
   blev «Powered by HubMatic» skåret af i bunden. */
.pcard-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .4s; }
.pcard:hover .pcard-media img { transform: scale(1.03); }

.pcard-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.pcard-body p { color: var(--muted); margin: 12px 0 18px; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcard-top h3 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }

/* Nederste linje på kortet: «Læs mere» til venstre, genvejen til programmets
   egen side yderst til højre. */
.pcard-bund {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pcard-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 15px;
    color: var(--green-ink);
}
.pcard-more svg { width: 18px; height: 18px; transition: transform .2s; }
.pcard:hover .pcard-more svg { transform: translateX(4px); }

/* Genvejen direkte til programmet. Den må gerne kunne ses som sin egen knap, så
   man ikke tror, den bare åbner det samme vindue som resten af kortet. */
.pcard-gaa {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted);
    background: var(--surface);
    transition: color .15s, border-color .15s, background .15s;
}
.pcard-gaa svg { width: 17px; height: 17px; }
.pcard-gaa:hover { color: var(--green-ink); border-color: var(--green); background: var(--green-soft); }

.status {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    color: #8A5A00;
    background: #FFF3D6;
}
.status.live { color: var(--green-ink); background: var(--green-soft); }

/* Platform-ikoner */
.plats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.plat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    padding: 3px 9px 3px 7px;
    border-radius: 8px;
}
.plat svg { width: 15px; height: 15px; flex: none; }
.plat-none { font-size: 13px; color: var(--muted); font-style: italic; }
.plats-lg .plat { font-size: 14px; padding: 5px 12px 5px 9px; }
.plats-lg .plat svg { width: 18px; height: 18px; }

/* ---------- Detalje-vindue ---------- */
.pmodal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(15, 26, 21, 0.45);
    /* Let sløring, og laget siges fra over for resten af siden — se .kob-overlay. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    contain: paint;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    animation: fade .2s ease;
}
.pmodal-overlay[hidden] { display: none; }
.pmodal {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 100%;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(15, 26, 21, 0.4);
    animation: pop .25s ease;
}
.pmodal-close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 2;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.92);
    font-size: 24px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
    transition: background .2s;
}
.pmodal-close:hover { background: var(--bg-alt); }
.pmodal-media { aspect-ratio: 2 / 1; border-bottom: 1px solid var(--border); }
.pmodal-media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.pmodal-body { padding: 26px 30px 30px; }
.pmodal-body h2 { margin: 0; font-size: 28px; letter-spacing: -0.01em; }
.pmodal-body p { color: var(--muted); margin: 0 0 14px; }
.pmodal-body .pmodal-lead { color: var(--text); font-size: 18px; font-weight: 500; margin: 16px 0 8px; }
.pmodal-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop  { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.checks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.checks li { position: relative; padding-left: 28px; color: var(--muted); }
.checks li::before {
    content: "";
    position: absolute;
    left: 0; top: 3px;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300BF63' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Om HubMatic: historie + tidslinje ---------- */
.story {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 72px;
}
.story-text h2 {
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 18px 0 18px;
}
.story-text p { color: var(--muted); font-size: 17px; margin: 0 0 14px; max-width: 560px; }

.timeline {
    list-style: none;
    margin: 0;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 22px;
    position: relative;
}
.timeline li { display: flex; gap: 16px; position: relative; }
.timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px; top: 40px; bottom: -18px;
    width: 2px;
    background: linear-gradient(var(--green), rgba(0, 191, 99, 0.15));
}
.tl-step {
    flex: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    color: var(--green-ink);
    font-weight: 700;
    border: 1.5px solid rgba(0, 191, 99, 0.35);
}
.timeline li:last-child .tl-step { background: var(--green); color: #03140A; border-color: var(--green); }
.timeline h3 { margin: 5px 0 4px; font-size: 17px; }
.timeline p { margin: 0; color: var(--muted); font-size: 15px; }

.values-title {
    text-align: center;
    font-size: 22px;
    margin: 0 0 24px;
}

/* ---------- Værdier ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}
.value-ic {
    width: 50px; height: 50px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--green-soft);
    margin-bottom: 18px;
}
.value-ic svg { width: 22px; height: 22px; fill: var(--green-ink); }
.value h3 { margin: 0 0 8px; font-size: 19px; }
.value p { margin: 0; color: var(--muted); }

/* ---------- Kontakt ---------- */
.cta { padding-block: 24px 96px; }
.cta-inner {
    text-align: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 191, 99, 0.16), transparent 65%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 64px 24px;
    width: calc(100% - 36px);
    max-width: 1112px;
    box-shadow: var(--shadow-sm);
}
.cta h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 12px; }
.cta p { color: var(--muted); margin: 0 auto 28px; max-width: 520px; font-size: 17px; }
.cta .btn { white-space: normal; word-break: break-all; }

/* Striben under topbjælken, når en erhvervskonto mangler sine oplysninger.
   Den forsvinder af sig selv, når felterne er udfyldt, og skal derfor ikke kunne
   lukkes — der er ikke noget at lukke væk fra. */
.pnotice { background: #FFF8E8; border-bottom: 1px solid #F0E2BF; }
.pnotice-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding-block: 10px; flex-wrap: wrap;
}
.pnotice span { font-size: 14px; color: #7A5B18; }

/* ===== Sidepanelet med oplysninger om virksomheden eller skolen =====

   Felterne hører til oprettelsen, men de gør boksen dobbelt så høj, og så skal man
   rulle for at nå knappen. I stedet skyder de ud til højre for boksen, hvor der er
   plads i forvejen.

   Panelet er altid tegnet — det kan ikke glide ind, hvis det først bliver til, når
   man vælger. Derfor «visibility» og ikke «display». */
#orgWrap, .kob-org {
    position: absolute;
    left: calc(100% + 18px);
    top: 0;
    width: 310px;
    max-height: 100%;
    overflow-y: auto;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 24px 60px -22px rgba(15, 26, 21, .4);

    opacity: 0;
    visibility: hidden;
    transform: translateX(-14px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

#orgWrap.vis, .kob-org.vis {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.acc-org-top, .kob-org-top {
    margin: 0 0 16px;
    font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted);
}

/*
    Ikke plads ved siden af.

    Under den her bredde ville panelet enten ligge uden for skærmen eller oven i
    boksen. Så falder det tilbage til at stå under de øvrige felter — længere at
    rulle, men man kan nå det.
*/
@media (max-width: 1080px) {
    #orgWrap, .kob-org {
        position: static;
        width: auto;
        max-height: none;
        margin: 0 0 16px;
        box-shadow: none;
        transform: none;
        transition: none;
    }
    #orgWrap:not(.vis), .kob-org:not(.vis) { display: none; }
}

/* E-mailen og knappen står på linje: feltet er låst, og knappen er vejen videre. */
.acc-maillinje { display: flex; gap: 10px; align-items: center; }
.acc-maillinje input { flex: 1; min-width: 0; }
.acc-maillinje .btn { flex: none; white-space: nowrap; }

/* Popoppen til skift af e-mail. Smallere end programkortene, og med plads til
   felter — pmodal er ellers bygget til billede og brødtekst. */
.pmodal-smal { max-width: 440px; }
.pmodal-smal .acc-sub { margin: 10px 0 20px; }
.pmodal-smal label {
    display: block; margin: 14px 0 6px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted);
}
.pmodal-smal input {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--border); border-radius: 10px;
    font: inherit; font-size: 15px; background: var(--bg);
}
.pmodal-smal input:focus { outline: none; border-color: var(--green); }
.pmodal-smal .btn-block { margin-top: 22px; }

@media (max-width: 560px) {
    .acc-maillinje { flex-direction: column; align-items: stretch; }
}

/* En adresse, der venter på at blive bekræftet. Det er ikke en fejl og heller ikke
   en kvittering — det er en tilstand, og den skal kunne ses uden at råbe. */
.acc-afventer {
    margin: 0 0 16px;
    padding: 11px 13px;
    background: #FFF8E8;
    border: 1px solid #F0E2BF;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #7A5B18;
}

/* Svaret fra CVR-opslaget. Grøn når firmaet blev fundet, dæmpet rød når det ikke
   blev — men aldrig en spærring, så den skal ikke se ud som en fejl. */
.acc-cvr-svar { font-size: 13px; margin: -8px 0 14px; min-height: 18px; }
.acc-cvr-ja   { color: var(--green-ink); }
.acc-cvr-nej  { color: #B4533F; }

/* To felter på én linje, fx postnummer og by. */
.acc-to { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }

/* Samme to ting i købsboksen: svaret på opslaget, og to felter på én linje. */
.kob-cvr-svar { font-size: 13px; margin: -6px 0 12px; min-height: 18px; color: var(--muted); }
.kob-cvr-ja   { color: var(--green-ink); }
.kob-cvr-nej  { color: #B4533F; }

/* ---------- Administration ----------
   Samme udtryk som licenslisten, men med sine egne spaltebredder. Rækkerne er
   klikbare, hvor de fører videre — derfor markøren og baggrunden ved hover. */
.adm-liste .adm-row {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    font-size: 13px;
    border-top: 1px solid var(--border);
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) 80px 50px;
}
.adm-liste .adm-row:first-child { border-top: 0; }

.adm-liste .adm-hoved {
    background: var(--bg-alt); color: var(--muted);
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding-block: 6px;
}

.adm-klik { cursor: pointer; }
.adm-klik:hover { background: var(--bg-alt); }

/* Alt i listerne skæres til én linje. En tabel, hvor rækkerne bryder, holder op
   med at være en tabel — så kan øjet ikke længere løbe ned ad en kolonne. */
.adm-liste .adm-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adm-navn { display: flex; flex-direction: column; min-width: 0; }
.adm-navn b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.adm-navn span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.adm-mail, .adm-type { color: var(--muted); }
.adm-tekst { color: var(--muted); }
.adm-hoejre { justify-self: end; overflow: visible; }
.adm-nr { font-size: 12px; color: var(--muted); }

.adm-liste .status { font-size: 11.5px; padding: 2px 8px; }
.adm-liste .lic-key { font-size: 12px; padding: 3px 7px; }
.adm-liste .btn-sm { padding: 4px 10px; font-size: 12.5px; }

/*
    Få spalter, og kun dem der skal bruges.

    En liste med syv spalter i en kasse på otte hundrede pixels bliver til to
    linjer med afklippet tekst. Beskrivelsen er alligevel den samme på hver eneste
    ordre, og antallet står sammen med beløbet — «3 × 249,95 kr» siger begge dele.
*/
/* Skrevet med to klasser med vilje. Grundreglen ovenfor er «.adm-liste .adm-row»
   og tæller dermed to klasser — en modifikator med kun én ville aldrig vinde, og
   spaltebredderne her ville blive ignoreret uden at nogen kunne se hvorfor. */
.adm-liste .adm-row-ordre { grid-template-columns: minmax(0, 1fr) 84px 152px 118px 76px; }
.adm-liste .adm-row-note  { grid-template-columns: minmax(0, 1fr) 84px 124px 100px 72px; }
.adm-liste .adm-row-lic   { grid-template-columns: 24px minmax(0, 1fr) 72px 104px 72px; }

.adm-beloeb { white-space: nowrap; }

/* Betalingsmåden skal kunne ses i et øjekast: hvad der blev betalt med, og om
   pengene er kommet. Det afgør, om ordren overhovedet kan krediteres. */
.adm-betaling { display: flex; align-items: center; gap: 6px; overflow: visible; }

.adm-maade {
    font-size: 11px; font-weight: 600; letter-spacing: .03em;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.adm-maade-kort    { background: var(--bg-alt); color: var(--muted); }
.adm-maade-faktura { background: var(--green-soft); color: var(--green-ink); }

/* Nøglen er skiftet siden købet — det er afløseren, der står i rækken. */
.adm-skiftet {
    font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
    padding: 1px 6px; border-radius: 999px;
    background: var(--bg-alt); color: var(--muted);
}

/* En spærret nøgle er historie, ikke en fejl — den tones ned, ikke rødt. */
.adm-doed { opacity: .55; }
.adm-doed .lic-key { text-decoration: line-through; }

/* Det der bliver spærret, hvis man trykker. Vises mens man vælger antallet. */
.adm-rammes { background: #FFF6F5; box-shadow: inset 3px 0 0 var(--fare, #D64545); }

.adm-tilbage { margin-bottom: 14px; }

.adm-fakta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 10px 18px; margin-bottom: 4px;
}
.adm-fakta > div { display: flex; flex-direction: column; min-width: 0; }
.adm-fakta span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.adm-fakta b { font-size: 13.5px; margin-top: 2px; }

.adm-kreditform { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 18px; }
.adm-kreditform h3 { font-size: 17px; margin: 0 0 4px; }

.adm-felter { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; margin: 14px 0 10px; }
.adm-felter label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.adm-felter input { width: 100%; }

.adm-sum { font-size: 14.5px; font-weight: 600; margin: 0 0 12px; }

/* Hvorfor en ordre ikke kan krediteres. Det er ikke en fejl, så den skal ikke
   skrige — men den skal kunne læses, så ingen leder efter en knap, der med vilje
   ikke er der. */
.adm-spaerret {
    margin: 18px 0 0;
    padding: 12px 14px;
    background: var(--bg-alt);
    border-radius: 10px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 820px) {
    /* Også her to klasser, så reglen vinder over spaltebredderne ovenfor. */
    .adm-liste .adm-row,
    .adm-liste .adm-row-ordre,
    .adm-liste .adm-row-note,
    .adm-liste .adm-row-lic { grid-template-columns: minmax(0, 1fr) auto; }

    .adm-mail, .adm-type, .adm-tekst, .adm-nr,
    .adm-liste .adm-hoved { display: none; }

    .adm-felter { grid-template-columns: 1fr; }
}

/* ---------- Tekstsider: handelsbetingelser og privatliv ----------
   Lange tekster skal have en linjelængde, man kan læse. Bredere end dette, og
   øjet taber linjen, når det springer tilbage. */
.doc { max-width: 760px; margin: 0 auto; }
.doc h1 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 6px; }
.doc .doc-dato { color: var(--muted); font-size: 14.5px; margin: 0; }
.doc .doc-top { padding-bottom: 26px; border-bottom: 1px solid var(--border); margin-bottom: 30px; }
.doc h2 { font-size: 21px; margin: 34px 0 10px; }
.doc p, .doc li, .doc address { color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.doc p { margin: 0 0 14px; }
.doc b { color: var(--text); }
.doc ul { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc a { color: var(--green-ink); text-decoration: underline; }
.doc .doc-slut {
    margin-top: 36px; padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* ---------- Footer ---------- */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: 64px 0; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
}
.brand-footer .brand-big { font-size: 24px; }
.footer-about { color: var(--muted); font-size: 14.5px; margin: 16px 0 0; max-width: 280px; }
.footer-col h4 {
    margin: 4px 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
}
.footer-col p, .footer-col a, .footer-col address {
    display: block;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 14.5px;
    font-style: normal;
    line-height: 1.6;
}
.footer-col a:hover { color: var(--green-ink); }
.footer-col .footer-note { font-size: 13px; margin-top: 4px; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-block: 22px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13.5px;
}

/* ================= MyHUBMATIC =================
   Portalen ligger under hubmatic.dk's almindelige header. En tynd bjælke viser,
   at man er inde i sin konto, og holder fanerne og brugeren. */

/* --- Login --- */
.login-screen {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: 56px 18px 72px;
}
.login-box {
    /* Panelet med virksomhedens oplysninger ligger uden for boksen og måler sig
       efter den — se #orgWrap. */
    position: relative;

    width: 100%; max-width: 430px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    padding: 34px 32px 30px;
}
.login-logo { height: 30px; width: auto; margin-bottom: 22px; }
.login-box h1 { font-size: 27px; margin: 2px 0 6px; }
.login-box label {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); margin: 14px 0 6px;
}
.login-box input, .login-box select {
    width: 100%; padding: 11px 13px; font-family: inherit; font-size: 15px;
    border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--text);
}
.login-box input:focus, .login-box select:focus { outline: none; border-color: var(--green); }
.login-box .btn-block { width: 100%; margin-top: 20px; }
.login-back { color: var(--muted); font-size: 14px; }
.login-back:hover { color: var(--green-ink); }

/* --- Stribe mellem markedsføringssiden og portalen --- */
.pstrip { background: var(--text); color: rgba(255, 255, 255, .72); font-size: 12.5px; font-weight: 500; }
.pstrip-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.pstrip span { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .02em; }
.pstrip svg { width: 14px; height: 14px; flex: none; color: var(--green); }
.pstrip a { color: rgba(255, 255, 255, .72); transition: color .15s; }
.pstrip a:hover { color: #fff; }

/* --- Den tynde portalbjælke --- */
.pbar { background: var(--surface); border-bottom: 1px solid var(--border); }
/*
    Bjælken skal blive på én linje.

    Den brød, da Administration kom til: seks faner og et brugerfelt var mere, end
    der var plads til, og så lagde den sig i to etager med et afklippet logo. Nu
    får fanerne lov at krympe og rulle vandret, mens logo og brugerfelt holder deres
    plads — de kan ikke skæres til uden at blive ulæselige.
*/
.pbar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 56px; flex-wrap: nowrap;
}

/* Mærket til venstre, punkterne i midten, brugeren til højre. Midten får
   pladsen, de to andre holder deres — de kan ikke skæres til uden at blive
   ulæselige. */
.pbar-inner > .pbar-tabs { flex: 1 1 auto; justify-content: center; }

.pbar-left { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 auto; }
.pbar-mark { flex: none; }
.pbar-mark .myhub-word { font-size: 16px; }
.pbar-logo { height: 34px; width: auto; flex: none; }

/* Faner, der ikke er plads til, kan rulles frem — de forsvinder ikke.
   Rullepanelet skjules, for bjælken er kun 56 px høj. */
.pbar-tabs {
    display: flex; gap: 2px; min-width: 0; overflow-x: auto;
    scrollbar-width: none;
}
.pbar-tabs::-webkit-scrollbar { display: none; }

.pbar-user { flex: none; }
.pbar-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 11px; border: 0; border-radius: 9px;
    background: none; font: inherit; font-size: 14px; font-weight: 600;
    color: var(--muted); cursor: pointer; white-space: nowrap;
    flex: none;
}
.pbar-tab svg { width: 16px; height: 16px; flex: none; }
.pbar-tab:hover { background: var(--bg-alt); color: var(--text); }
.pbar-tab.active { background: var(--green-soft); color: var(--green-ink); }
.pbar-user { display: flex; align-items: center; gap: 10px; }
.btn-sm { padding: 7px 13px; font-size: 14px; }

.p-user { display: flex; align-items: center; gap: 12px; }
.p-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--green); color: #03140A; font-weight: 800; font-size: 14px;
}
.p-user-text { display: flex; flex-direction: column; line-height: 1.3; }
.p-user-text b { font-size: 14.5px; }
.p-user-text span { font-size: 12.5px; color: var(--muted); }

.p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.p-head h1 { font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 4px; }
/* Er der mere end én knap i sidehovedet, skal de holdes samlede i højre side —
   ellers skubber «space-between» dem fra hinanden hver til sit hjørne. */
.p-head-knapper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-section { font-size: 19px; margin: 36px 0 16px; }

/* --- Andre programmer: vist småt, så kontoen handler om det, man selv bruger --- */
.andre { margin-top: 32px; border-top: 1px solid var(--border); padding-top: 18px; }
.andre summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--muted); }
.andre summary:hover { color: var(--text); }
.andre-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.andet {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 12px 14px;
}
.andet > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.andet b { font-size: 15px; }
.andet span { font-size: 13px; color: var(--muted); }
.andet-logo { flex: none; border-radius: 8px; padding: 2px 5px; }
.andet-logo img { height: 24px; width: auto; }

.tom-boks h2 { font-size: 20px; margin-bottom: 8px; }

/* --- Nøgletal --- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 20px;
    display: flex; flex-direction: column; gap: 2px;
}
.tile-label { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tile b { font-size: 30px; line-height: 1.1; }
.tile b.tile-sm { font-size: 18px; margin-top: 4px; }
.tile-note { font-size: 13px; color: var(--muted); }
.tile-warn b { color: #B8860B; }

/* ---------- MyHUBMATIC: ordmærke og kort ---------- */
/* Ordmærket står som tekst, indtil logofilen er klar */
.acc-brand { margin-bottom: 10px; }
.myhub-word { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.myhub-word span { color: var(--green); }
.acc-logo { height: 42px; width: auto; }

.acc-section-title { font-size: 20px; margin: 0 0 16px; }
.prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 44px; align-items: start; }
.prog-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px 22px 24px;
}
.prog-soon { opacity: .85; }
.prog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.prog-logo { display: block; border-radius: 8px; padding: 2px 6px; }
.prog-logo img { height: 40px; width: auto; }
.prog-line { font-weight: 500; margin: 0 0 12px; }
.prog-card .acc-actions { margin-top: 18px; }
.prog-card .acc-inline { margin-top: 14px; }
.prog-card .btn { font-size: 14.5px; padding: 9px 15px; }

/* ---------- Konto og kort ---------- */
.acc-loading { color: var(--muted); padding: 40px 0; text-align: center; }
.acc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.acc-head h1 { font-size: clamp(28px, 3.6vw, 38px); margin: 10px 0 4px; }
.acc-sub { color: var(--muted); margin: 0; }

.acc-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.acc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 26px 26px 28px;
    margin-bottom: 24px;
}
.acc-narrow { max-width: 440px; margin-inline: auto; }
.acc-narrow h1 { font-size: 28px; margin-bottom: 6px; }
.acc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.acc-card-head h2 { font-size: 20px; margin: 0; }
.acc-muted { color: var(--muted); font-size: 15px; }
.acc-note { color: var(--muted); font-size: 13px; margin: 10px 0 0; }
.acc-error { color: #C0392B; font-size: 14px; min-height: 20px; margin: 8px 0 0; font-weight: 500; }
.acc-hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

.acc-card label {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); margin: 14px 0 6px;
}
.acc-card input, .acc-card select {
    width: 100%; padding: 11px 13px; font-family: inherit; font-size: 15px;
    border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--text);
}
.acc-card input:focus, .acc-card select:focus { outline: none; border-color: var(--green); }
.acc-card .btn-block { width: 100%; margin-top: 18px; }
.acc-switch { text-align: center; color: var(--muted); font-size: 14.5px; margin: 18px 0 0; }
.acc-switch a { color: var(--green-ink); font-weight: 600; cursor: pointer; }
.acc-switch a:hover { text-decoration: underline; }

.acc-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.acc-inline > div { flex: 1; min-width: 180px; }
.acc-inline label { margin-top: 0; }
.acc-inline .btn { margin-bottom: 1px; }

/* ---------- Licenser som liste ----------
   Én linje per licens, så 30 licenser kan ses uden at rulle i det uendelige. */
.lic-soeg {
    width: 100%; margin: 4px 0 14px; padding: 10px 14px; font: inherit; font-size: 14.5px;
    border: 1px solid var(--border); border-radius: 10px; background: #fff;
}
.lic-soeg:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }

.lic-liste { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lic-row {
    display: grid;
    /* Faste bredder – hver række er sit eget grid, så kolonnerne skal måles ens */
    grid-template-columns: 26px minmax(0, 1fr) 232px 30px 74px 92px 96px 110px;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid var(--border);
}
.lic-row:first-child { border-top: 0; }
.lic-row:not(.lic-hoved):hover { background: var(--bg-alt); }

.lic-hoved {
    background: var(--bg-alt); color: var(--muted);
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding-block: 8px;
}

.lic-navn { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.lic-navn b { font-size: 14.5px; }
.lic-type { font-size: 13px; color: var(--green-ink); font-weight: 600; }
.lic-ejer { font-size: 12.5px; color: var(--muted); }

.lic-key {
    width: 100%;        /* ens bredde på alle nøgler, så kolonnen står lige */
    font-size: 13px; letter-spacing: .03em; color: var(--text);
    background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px;
    padding: 5px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lic-key-tom { background: none; border: 0; color: var(--muted); }

.lic-copy {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted);
}
.lic-copy svg { width: 15px; height: 15px; }
.lic-copy:hover { color: var(--green-ink); border-color: var(--green); }
.lic-copy.kopieret { color: var(--green-ink); border-color: var(--green); background: var(--green-soft); }

/* Kvitteringer bruger den samme liste, men med sine egne spalter */
.ordre-row { grid-template-columns: 112px minmax(0, 1fr) 118px 130px 190px; }
.ordre-row .btn { white-space: nowrap; }

/* Faktura og eventuelle kreditnotaer står side om side — ét bilag pr. knap. */
.ordre-bilag { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.ordre-dato { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.ordre-beloeb { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 820px) {
    .ordre-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "navn beloeb" "dato status" "knap knap";
    }
    .ordre-row .lic-navn { grid-area: navn; }
    .ordre-dato { grid-area: dato; }
    .ordre-beloeb { grid-area: beloeb; text-align: right; }
    .ordre-row .status { grid-area: status; }
    .ordre-row > span:last-child { grid-area: knap; }
}

.lic-pladser { font-size: 13px; color: var(--muted); white-space: nowrap; }
.lic-row .status { justify-self: start; }
.lic-op { justify-self: end; display: flex; gap: 6px; }

/* Hvor længe der følger opdateringer med. Det er ikke en udløbsdato, og den skal
   derfor ikke se ud som en advarsel — kun når den er ved at løbe ud. */
.lic-opdat { font-size: 13px; color: var(--muted); white-space: nowrap; }
.lic-opdat-snart { color: var(--text); font-weight: 600; }
.lic-opdat-slut  { color: var(--text); }

/* Reglen om, at nøglen hører til maskinen. Står én gang under listen i stedet for
   som en knap, der siger nej, på hver eneste linje. */
.lic-regel {
    margin: 12px 2px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

/* Afkrydsning, så flere nøgler kan skiftes på én gang */
.lic-vaelg { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lic-vaelg input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--green); }

/* Navnet på nøglen. Ser ud som tekst, men kan trykkes på. */
.lic-label {
    background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
    color: var(--muted); cursor: pointer; text-align: left;
}
.lic-label:hover { color: var(--green-ink); text-decoration: underline; }
.lic-label-tom { font-style: italic; opacity: .75; }

/*
    Bjælken med det, der er valgt.

    Den står over listen og hænger fast under topbjælken, mens man ruller. Stod den
    under listen, skulle man med tredive licenser rulle hele vejen ned for at finde
    knappen til det, man lige havde krydset af.
*/
.lic-bulk {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 10px 14px;
    background: var(--green-soft); border-radius: 11px;

    position: sticky;
    top: 92px;              /* lige under topbjælken, der er 84px høj */
    z-index: 20;            /* under topbjælken (50), over listen */
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.lic-bulk-tal { font-size: 14px; font-weight: 600; color: var(--green-ink); }

/* Et afsnit per program, så man kan se hvad nøglerne hører til */
.lic-gruppe { margin-bottom: 26px; }
.lic-gruppe:last-of-type { margin-bottom: 0; }
.lic-gruppe-top { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.lic-gruppe-top > div { display: flex; flex-direction: column; }
/* Købsknappen skubbes ud til højre i programmets eget afsnit */
.lic-gruppe-top .btn { margin-left: auto; }
.lic-gruppe-top b { font-size: 16px; }
.lic-gruppe-top span { color: var(--muted); font-size: 13.5px; }
.lic-intet { margin: 14px 0 0; }

/* Smal skærm: rækken bliver to linjer i stedet for fem smalle spalter */
@media (max-width: 820px) {
    .lic-hoved { display: none; }
    .lic-row {
        grid-template-columns: 26px 1fr auto;
        grid-template-areas: "vaelg navn status" "key key copy" "opdat opdat opdat" "op op op";
        gap: 8px 10px;
        padding: 12px 14px;
    }
    .lic-vaelg { grid-area: vaelg; align-self: start; margin-top: 3px; }
    .lic-pladser { display: none; }
    .lic-op { grid-area: op; justify-self: stretch; }
    .lic-op .btn { width: 100%; }
    .lic-navn    { grid-area: navn; }
    /* Hele nøglen skal kunne ses – den må hellere bryde end blive klippet af */
    .lic-key     { grid-area: key; white-space: normal; word-break: break-all; }
    .lic-copy    { grid-area: copy; }
    .lic-pladser { grid-area: pladser; }
    .lic-row .status { grid-area: status; }

    /* Uden kolonneoverskrifter siger en dato alene ingenting, så den får sin tekst med. */
    .lic-opdat { grid-area: opdat; }
    .lic-opdat::before { content: "Opdateringer: "; }
}

.acc-users { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.acc-users summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--green-ink); }
.acc-users ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.acc-users li { display: flex; flex-direction: column; font-size: 14px; }
.acc-users li span { color: var(--muted); font-size: 13px; }

.acc-rows { display: grid; gap: 10px; }
.acc-rows > div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.acc-rows span { color: var(--muted); }
.acc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* Overblik: programmerne som linjer, og varslet om licenser der løber ud */
.p-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 34px; }
/* Margenen flyttes op på rækken – ellers står knappen højere end overskriften */
.p-section-head .p-section { margin: 0; }

.prog-rows { display: grid; gap: 10px; margin-top: 14px; }
.prog-linje {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 12px 16px;
}
.prog-linje > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prog-linje b { font-size: 15.5px; }
.prog-linje span { color: var(--muted); font-size: 13.5px; }
.prog-linje-knap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.varsel { margin-bottom: 26px; border-color: #F0DCA8; }
.varsel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.varsel-liste li {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    border-top: 1px solid var(--border); padding-top: 10px;
}
.varsel-liste li:first-child { border-top: 0; padding-top: 0; }
.varsel-liste li > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.varsel-liste code { font-size: 12.5px; color: var(--muted); }

@media (max-width: 620px) {
    .prog-linje { flex-wrap: wrap; }
    .prog-linje-knap { width: 100%; }
    .prog-linje-knap .btn { flex: 1; }
}

/* ===== Købs- og login-boksen =====
   Den åbner oven på siden med baggrunden sløret, i stedet for at skifte side.
   Indholdet skrives af koeb.js; her står kun, hvordan den ser ud. */
.kob-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px 24px;
    overflow-y: auto;
    background: rgba(15, 26, 21, .5);

    /*
        Sløringen koster: browseren skal regne baggrunden om, hver gang noget bag den
        ændrer sig. Den holdes derfor let, og laget siges fra over for resten af siden,
        så der ikke tegnes mere end nødvendigt, mens man ruller i boksen.
    */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    contain: paint;
    will-change: transform;
}
body.kob-aaben { overflow: hidden; }

/* Ingen sløring for dem, der har bedt om mindre bevægelse — den er også den tungeste del. */
@media (prefers-reduced-motion: reduce) {
    .kob-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15, 26, 21, .62); }
}

.kob-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px 30px 26px;
    box-shadow: 0 30px 80px -24px rgba(15, 26, 21, .45);
}
.kob-card h2 { margin: 0 0 16px; font-size: 24px; line-height: 1.2; }
.kob-titel { display: block; margin-top: 6px; }

.kob-close {
    position: absolute; top: 14px; right: 14px;
    width: 34px; height: 34px; font-size: 20px; line-height: 1;
    color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.kob-close:hover { background: var(--bg-alt); color: var(--text); }

.kob-lead { margin: 0 0 20px; color: var(--muted); font-size: 15px; }
.kob-skift { text-align: center; margin: 16px 0 0; }
.linkish {
    background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
    color: var(--green-ink); cursor: pointer;
}
.linkish:hover { text-decoration: underline; }

/* Trinnene øverst i købet */
.kob-trin { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; }
.kob-trin span, .kob-trin button {
    display: inline-flex; align-items: center; gap: 7px;
    font: inherit; font-size: 13px; color: var(--muted);
    background: none; border: 0; padding: 0; cursor: default;
}
.kob-trin button { cursor: pointer; }
.kob-trin b {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-alt); color: var(--muted); font-size: 12px;
}
.kob-trin .nu { color: var(--text); font-weight: 600; }
.kob-trin .nu b { background: var(--green); color: #fff; }
.kob-trin .klar b { background: var(--green-soft); color: var(--green-ink); }
.kob-trin i { flex: 1; height: 1px; background: var(--border); }

/* Valg af licens */
.kob-valg {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 16px;
    width: 100%; text-align: left; padding: 16px 18px; margin: 0 0 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
    cursor: pointer; font: inherit;
}
.kob-valg:hover { border-color: var(--green); background: var(--bg-alt); }
.kob-valg-navn { grid-column: 1; grid-row: 1; font-weight: 700; }
.kob-valg-hvad { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 14px; }
.kob-valg-pris { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; white-space: nowrap; }
.kob-valg-pris small { font-weight: 500; color: var(--muted); }

/* Felter */
.kob-form .field, .kob-felt { display: block; margin: 0 0 14px; }
.kob-form .field > span, .kob-felt label {
    display: block; margin: 0 0 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.kob-form input, .kob-felt input {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
    border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text);
}
.kob-form input:focus, .kob-felt input:focus {
    outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
.kob-to { display: flex; gap: 12px; }
.kob-to .kob-felt { flex: 1; min-width: 0; }
/* Oprettelsens felter hedder .field og skal dele pladsen på samme måde. */
.kob-to > .field { flex: 1; min-width: 0; }
.kob-typer { display: flex; flex-wrap: wrap; gap: 14px; }
.kob-typer label { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; cursor: pointer; }

/* Øjet ved adgangskoden */
.kob-pw { position: relative; display: block; }
.kob-pw input { padding-right: 46px; }
.kob-oeje {
    position: absolute; top: 0; right: 0; height: 100%; width: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
}
.kob-oeje svg { width: 20px; height: 20px; }
.kob-oeje:hover { color: var(--green-ink); }

/* Antal og summer */
.kob-antal { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.kob-tal { display: flex; align-items: center; gap: 6px; }
.kob-tal button {
    width: 38px; height: 38px; font-size: 18px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
.kob-tal button:hover { border-color: var(--green); color: var(--green-ink); }
.kob-tal input {
    width: 74px; text-align: center; padding: 9px; font: inherit;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.kob-linje { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.kob-linje:last-of-type { border-bottom: 0; }
.kob-linje span:first-child { color: var(--muted); }
.kob-sum { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 0; border-top: 1px solid var(--border); }
.kob-sum strong { font-size: 22px; }
.kob-moms { margin: 4px 0 18px; color: var(--muted); font-size: 13.5px; }
.kob-midt { text-align: center; margin: 10px 0 0; }

.kob-konto {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
    margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
    background: var(--bg-alt); color: var(--muted); font-size: 13.5px;
}
.kob-fejl { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #FBECEA; color: #B3261E; font-size: 14px; }

/* .btn-block er defineret for login-boksen og kontokortene; boksen her skal have
   den samme fulde bredde på sine knapper. */
.kob-card .btn-block { width: 100%; margin-top: 18px; }

/* Kontosidens to spalter. Hver spalte stabler sine egne kort, så den ene side
   ikke står tom, fordi den anden har ét langt kort. */
.acc-spalte { display: grid; gap: 20px; align-content: start; }
.acc-spalte .acc-card { margin: 0; }
/* Formularen er ét felt i spalten, men indeholder to kort. Uden det her stabler de
   sig tættere end kortene i den anden spalte, og så står de to sider skævt. */
.acc-spalte > form { display: grid; gap: 20px; align-content: start; }

/* Firmaets logo på kontosiden */
.logo-boks { display: flex; align-items: center; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.logo-vis {
    display: grid; place-items: center; flex: none;
    width: 86px; height: 86px; border-radius: 50%; overflow: hidden;
    background: var(--bg-alt); border: 1px solid var(--border);
}
.logo-vis img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-tom { font-weight: 700; font-size: 24px; color: var(--muted); }
.logo-knapper { display: flex; gap: 8px; flex-wrap: wrap; }
/* Knappen er en label om et skjult filfelt. Den skal se ud som en knap — ikke som
   de små versaler, kortets øvrige labels har. */
.logo-knapper label.btn {
    cursor: pointer;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
}

/* To felter ved siden af hinanden, fx postnummer og by */
.acc-par { display: flex; gap: 12px; }
.acc-par > div { flex: 1; min-width: 0; }
.acc-note-top { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Sletning af kontoen – skal se anderledes ud end alt andet på siden */
/* Står nu i højre spalte, hvor afstanden kommer fra spaltens gap */
.acc-fare { border-color: #F3C9C2; }
.acc-fare .acc-card-head h2 { color: #B3261E; }
.btn-fare { background: #B3261E; color: #fff; border: 1px solid #B3261E; }
.btn-fare:hover { background: #8F1D17; border-color: #8F1D17; }

/* Øjet i adgangskodefelter */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-eye {
    position: absolute; top: 0; right: 0; height: 100%; width: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
}
.pw-eye svg { width: 20px; height: 20px; }
.pw-eye:hover { color: var(--green-ink); }

/* Samme plads som en fejl, men det er en almindelig besked – ikke noget galt */
.acc-error.acc-besked { color: var(--text); }
/* Knapperne på «tjek din mail»-skærmen står under hinanden */
.acc-actions-block { display: grid; gap: 10px; margin-top: 22px; }

/* ---------- Responsiv ---------- */
@media (max-width: 1000px) {
    .pgrid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .acc-grid { grid-template-columns: 1fr; }
    .prog-grid { grid-template-columns: 1fr; }
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .andre-liste { grid-template-columns: 1fr; }
    .prog-grid.prog-grid-few, .prog-grid.prog-grid-one { grid-template-columns: 1fr; }
    .pbar-logo { height: 28px; }
    .pstrip a { display: none; }
    .pbar-inner { padding-block: 10px; flex-wrap: wrap; }
    .pbar-left { width: 100%; gap: 14px; }
    .pbar-user { width: 100%; justify-content: flex-start; }
    .p-user-text { display: none; }
}
@media (max-width: 960px) {
    .hero { padding-block: 86px 80px; }
    .hub { max-width: 370px; }
    .values { grid-template-columns: 1fr; }
    .story { grid-template-columns: 1fr; gap: 36px; margin-bottom: 56px; }
}
@media (max-width: 720px) {
    .container { padding-inline: 18px; }
    .nav-inner { min-height: 72px; }
    .nav .brand-img { height: 30px; }
    .nav .brand-big { font-size: 25px; }
    .nav-links { display: none; }
    .nav-actions { gap: 4px; }
    .nav-actions .btn { padding: 9px 12px; font-size: 14px; }
    .nav-cta { display: inline-flex; padding: 9px 15px; font-size: 15px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .pgrid { grid-template-columns: 1fr; }
    .section { padding-block: 64px; }
    .section-tight { padding-block: 36px 64px; }
    .cta { padding-block: 8px 64px; }
    .page-head { padding-block: 48px 36px; }
    .hub-node { font-size: 13px; padding: 7px 9px; gap: 6px; }
    .node-tag { display: none; }
    .pmodal-body { padding: 22px 20px 24px; }
    .pmodal-overlay { align-items: flex-end; padding: 12px 8px 0; }
    .pmodal { border-radius: 22px 22px 0 0; max-height: 92vh; }
}
@media (prefers-reduced-motion: reduce) {
    .hub-lines line, .hub-core, .pmodal, .pmodal-overlay { animation: none; }
    html { scroll-behavior: auto; }
}

/* Erklæringen ved studielicensen. Den skal kunne læses, ikke bare krydses af. */
.kob-erklaering {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
}
.kob-erklaering input { margin-top: 3px; flex: none; width: 16px; height: 16px; cursor: pointer; }
/* ===== Vælg programmer =====
   Spørges én gang, første gang man er inde i portalen. Kortene er brede, fordi
   valget skal kunne træffes uden at læse småt — det er det første, en ny kunde
   møder. */
.login-box-bred { max-width: 520px; }

.prodvalg-liste { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 4px; }

/* Vælgerne står både i .login-box (ved første login) og i .acc-card (på
   kontosiden). Begge steder har egne regler, der gør hver label til en blok
   med små versaler og hvert input fuldbredde, og begge er skrevet med én
   klasse plus et element. Derfor hedder vælgeren her .prodvalg-liste
   .prodvalg: to klasser vinder over dem begge, og reglen behøver kun stå ét
   sted. Uden den falder kortet fra hinanden i tre linjer med råbende
   overskrifter — det gjorde det. */
.prodvalg-liste .prodvalg {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; margin: 0;
    border: 1.5px solid var(--border); border-radius: 12px;
    font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.prodvalg-liste .prodvalg:hover { border-color: var(--green); }
.prodvalg-liste .prodvalg.valgt { border-color: var(--green); background: var(--green-soft); }
.prodvalg-liste .prodvalg input {
    flex: none; width: 19px; height: 19px; margin: 0; padding: 0;
    border-radius: 4px; cursor: pointer;
}

.prodvalg-logo {
    width: 48px; height: 48px; flex: none;
    border: 1px solid var(--border); border-radius: 10px;
    display: grid; place-items: center; overflow: hidden;
}
.prodvalg-logo img { max-width: 40px; max-height: 40px; }

.prodvalg-tekst { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.prodvalg-tekst b { font-size: 15px; font-weight: 700; }
.prodvalg-tekst span { font-size: 13px; color: var(--muted); }

/* ===== AirMate: pladser =====
   Bemærk de to klasser i vælgeren. Grundreglen .adm-liste .adm-row sætter sine
   egne kolonner, og en modifier med kun én klasse ville tabe til den. */
.adm-liste .seat-row { grid-template-columns: 28px minmax(0, 1fr) 104px 104px 84px; }

/* Navn og mail står over hinanden, så listen kan læses uden at gætte. Rækkens
   grundregel skærer alt til én linje — derfor denne undtagelse. */
.adm-liste .seat-row > .seat-main {
    display: flex; flex-direction: column; line-height: 1.3;
    white-space: normal; overflow: visible;
}
.seat-main b { font-size: 13.5px; }
.seat-main .acc-muted { font-size: 12px; }

.seat-rolle { color: var(--muted); font-size: 12.5px; }
.seat-pris  { font-variant-numeric: tabular-nums; }
.seat-knap  { justify-self: end; }
.seat-venter { opacity: .72; }
.seat-fod { margin: 12px 0 0; font-size: 13px; }

.p-avatar-sm { width: 26px; height: 26px; font-size: 11px; }

/* To felter side om side i et kort — samme deling som .kob-to. */
.felt-to { display: flex; gap: 12px; }
.felt-to > .field { flex: 1; min-width: 0; }

/* Kvittering i grønt, samme plads som .acc-error. */
.acc-ok { color: var(--green-ink); font-size: 14px; margin: 8px 0 0; font-weight: 500; }

@media (max-width: 620px) {
    /* På en telefon er der ikke plads til rolle og pris ved siden af navnet.
       Prisen er den vigtigste af de to — rollen kan læses af knappen. */
    .adm-liste .seat-row { grid-template-columns: 28px minmax(0, 1fr) 88px; }
    .seat-rolle { display: none; }
    .seat-knap { grid-column: 2 / -1; justify-self: start; margin-top: 4px; }
    .felt-to { flex-direction: column; gap: 0; }
}

/* Et kort i fuld bredde under de to spalter på kontosiden. Kvitteringerne og
   programvalget hører til kontoen som helhed, ikke til den ene spalte — og en
   fakturaliste har brug for bredden. */
.acc-bred { margin-top: 24px; }
.acc-bred .acc-card { margin: 0; }

/* ===== Programfanerne, der hænger ud fra bjælken =====
   Firkantede foroven, hvor de møder bjælkens streg, og runde forneden.

   De sidder lige under stregen og dækker den ikke. Blev de trukket op oven på
   den, ville stregen være brudt netop dér, hvor fanerne står — og en streg, der
   stopper midtvejs, ligner en fejl. */
.pprog { position: relative; z-index: 1; }
/* Fanerne starter i venstre kant, så den første står lige under mærket og de
   to rækker flugter. Mellemrummet er småt med vilje — de hører sammen som én
   gruppe, ikke som løse knapper. */
.pprog-inner { display: flex; gap: 3px; align-items: flex-start; justify-content: flex-start; }

.pprog-tab {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 15px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 11px 11px;
    font: inherit; font-size: 14px; font-weight: 600;
    color: var(--muted); cursor: pointer; white-space: nowrap;
    transition: color .15s, background .15s;
}
.pprog-tab:hover { color: var(--text); background: var(--bg-alt); }
.pprog-tab.active { color: var(--green-ink); background: var(--green-soft); border-color: var(--green); }

/* Programmets eget logo. Pladen bag det er programmets egen baggrundsfarve,
   så et logo på hvid baggrund ikke forsvinder i bjælken. */
/* Pladen er bredere end høj, fordi logoerne er navnetræk og ikke firkantede
   ikoner. Presset ned i en kvadrat bliver de til en ulæselig klat. */
.pprog-logo {
    width: 32px; height: 22px; flex: none;
    border-radius: 5px; overflow: hidden;
    display: grid; place-items: center;
}
.pprog-logo img { max-width: 28px; max-height: 18px; }

@media (max-width: 720px) {
    /* På en telefon er der ikke plads til navnene ved siden af hinanden. De
       bliver stående — fanerne ruller i stedet vandret. */
    .pprog-inner { overflow-x: auto; scrollbar-width: none; }
    .pprog-inner::-webkit-scrollbar { display: none; }
}

/* ===== Prisen, stillet op =====
   To linjer: ét beløb nu og ét der løber. Det er den eneste side, kunden ser,
   før han binder sig, så beløbene står for sig og ikke inde i en brødtekst. */
.pris-liste { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border);
              border-radius: var(--radius); overflow: hidden; margin: 18px 0 12px; }
.pris-linje { display: flex; align-items: center; justify-content: space-between; gap: 16px;
              padding: 14px 16px; background: var(--surface); }
.pris-linje > div { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.pris-linje b { font-size: 15px; }
.pris-linje span { font-size: 13px; color: var(--muted); }
.pris-tal { font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Kortet, der siger noget, man skal nå at gøre noget ved — prøveperioden, der
   løber ud. Grøn kant, så det skiller sig ud uden at ligne en fejl. */
.acc-card-fremhaev { border-color: var(--green); }