/* ScanTilMail — sitets stilark.
 *
 * BYGGER PÅ BITTECH ITS DESIGNSYSTEM (assets/ds/), som er afledt direkte af
 * designmanualen: Open Sans som brødtekst, Gill Sans (her Cabin) til overskrifter,
 * Pantone 652C blå og 375C grøn, hvid bund og den blå/grønne barre.
 *
 * Reglen er: FARVER, SKRIFT OG MÅL KOMMER FRA TOKENS — aldrig hardkodede værdier
 * her. Skal en brandfarve rettes, rettes den i assets/ds/tokens/colors.css, og så
 * følger hele sitet med. Denne fil indeholder kun de komponenter, sitet bruger.
 */

@import url("ds/styles.css");

/* Ikoner som maske, så de arver tekstfarven. Designsystemet henter dem fra et
   CDN; her ligger de som data-URI, så siden ikke laver opslag hos tredjepart —
   det ville være en dårlig idé på et site, der sælger på at data bliver i EU. */
:root{
  --ikon-check:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ikon-x:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --ikon-plus:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

/* ── Grundlag ─────────────────────────────────────────── */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 20px)}
body{background:var(--surface-page)}
.ramme{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.ramme-smal{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--gutter)}
strong{color:var(--text-body);font-weight:var(--fw-semibold)}
code{font-family:var(--font-mono);font-size:.9em;background:var(--blue-50);color:var(--brand-blue);
     padding:2px 6px;border-radius:var(--radius-xs);border:1px solid var(--blue-100);word-break:break-all}

/* Barren — det blå/grønne bånd, der rammer brandet ind (designmanual 2.2) */
.barre{height:var(--barre-height);width:100%;
       background:linear-gradient(90deg,var(--barre-blue) 0 50%,var(--barre-green) 50% 100%)}
.barre.tynd{height:4px}

/* ── Top ──────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
       backdrop-filter:var(--blur-glass);border-bottom:1px solid var(--border-subtle)}
.top{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter);
     min-height:var(--header-height);display:flex;align-items:center;gap:var(--space-8);
     justify-content:space-between}
.marke{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;padding:12px 0;flex-shrink:0}
.marke:hover{text-decoration:none}
.marke img{height:34px;width:auto}
.marke .navn{display:grid;gap:2px}
.marke .titel{font:var(--fw-display-semibold) var(--fs-lg)/1 var(--font-display);
              color:var(--brand-blue);letter-spacing:var(--ls-display)}
.marke .under{font:var(--fw-regular) var(--fs-2xs)/1 var(--font-body);color:var(--text-muted);
              letter-spacing:var(--ls-caps);text-transform:uppercase}
nav{display:flex;align-items:center;gap:var(--space-6)}
nav a{font:var(--fw-regular) var(--fs-sm)/1 var(--font-body);color:var(--ink-700);
      text-decoration:none;white-space:nowrap}
nav a:hover{color:var(--brand-blue);text-decoration:none}
nav a.aktiv{color:var(--brand-blue);font-weight:var(--fw-semibold);
            border-bottom:2px solid var(--brand-green);padding-bottom:3px}
.menu-knap{display:none;background:none;border:1px solid var(--border-subtle);
           border-radius:var(--radius-pill);padding:9px 16px;font:var(--type-button);
           color:var(--ink-700);cursor:pointer}

/* ── Knapper ──────────────────────────────────────────── */
.knap{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
      padding:11px 22px;border-radius:var(--radius-control);font:var(--type-button);
      letter-spacing:.02em;text-decoration:none;cursor:pointer;
      background:var(--action-primary);color:var(--white)!important;
      border:1px solid var(--action-primary);transition:var(--transition-control)}
.knap:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);
            text-decoration:none}
.knap.groen{background:var(--action-accent);border-color:var(--action-accent)}
.knap.groen:hover{background:var(--action-accent-hover);border-color:var(--action-accent-hover)}
.knap.kant{background:transparent;color:var(--brand-blue)!important;border-color:var(--brand-blue)}
.knap.kant:hover{background:var(--blue-50)}
.knap.hvid{background:transparent;color:var(--white)!important;border-color:rgba(255,255,255,.7)}
.knap.hvid:hover{background:rgba(255,255,255,.14)}
.knap.stor{padding:15px 30px;font:var(--fw-semibold) var(--fs-base)/1 var(--font-body)}
.knap.lille{padding:8px 16px;font:var(--fw-semibold) var(--fs-xs)/1 var(--font-body)}
.tekstlink{font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);color:var(--brand-blue)}

/* ── Sektioner ────────────────────────────────────────── */
section{padding:var(--pad-section-y) 0}
.graa{background:var(--surface-subtle);border-top:1px solid var(--border-subtle);
      border-bottom:1px solid var(--border-subtle)}
.sek-hoved{display:grid;gap:var(--space-4);max-width:var(--container-narrow);margin-bottom:var(--space-12)}
.sek-hoved.midt{justify-items:center;text-align:center;margin-inline:auto}
.sek-hoved h2{font:var(--type-h2);color:var(--text-heading);text-wrap:balance}
.sek-hoved p{font:var(--type-subhead);color:var(--text-muted);text-wrap:pretty}
.midt{text-align:center}

/* Eyebrow: grøn streg + versaler. Brandets kendetegn over hver sektion. */
.kicker{display:inline-flex;align-items:center;gap:10px;font:var(--type-eyebrow);
        letter-spacing:var(--ls-caps-wide);text-transform:uppercase;color:var(--brand-green)}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;flex-shrink:0}

/* ── Hero ─────────────────────────────────────────────── */
.hero{padding:var(--space-20) 0 var(--space-24)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
.mrk{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--green-100);
     border-radius:var(--radius-pill);padding:6px 14px;
     font:var(--fw-semibold) var(--fs-xs)/1 var(--font-body);color:var(--green-800);
     margin-bottom:var(--space-6)}
.mrk .prik{width:7px;height:7px;border-radius:var(--radius-circle);background:var(--brand-green)}
.hero h1{font:var(--type-hero);color:var(--text-heading);letter-spacing:var(--ls-display);
         margin-bottom:var(--space-5);text-wrap:balance}
.hero .ingress{font:var(--type-subhead);color:var(--text-muted);margin-bottom:var(--space-8);max-width:30em}
.cta{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.hero .under{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-6)}

/* Leveringsloggen — produktets forskel, vist frem for beskrevet */
.skaerm{border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;
        background:var(--surface-card);box-shadow:var(--shadow-md)}
.skaerm-top{display:flex;align-items:center;justify-content:space-between;
            padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle)}
.skaerm-top .titel{font:var(--fw-semibold) var(--fs-xs)/1 var(--font-body);
                   letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--brand-blue)}
.skaerm-top .naar{font:var(--type-body-sm);color:var(--text-muted)}
.log-linje{display:grid;grid-template-columns:56px 1fr auto;gap:var(--space-4);align-items:center;
           padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle)}
.log-linje:last-child{border-bottom:none}
.log-linje.afvist{background:var(--status-danger-bg)}
.log .tid{font:var(--type-body-sm);color:var(--text-muted);font-variant-numeric:tabular-nums}
.log .hvem{min-width:0}
.log .hvem b{display:block;font:var(--fw-semibold) var(--fs-sm)/1.4 var(--font-body);
             color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log .hvem em{display:block;font:var(--type-caption);color:var(--text-muted)}
.log .ok,.log .fejl{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
                    font:var(--fw-semibold) var(--fs-2xs)/1 var(--font-body);
                    letter-spacing:var(--ls-caps);text-transform:uppercase;
                    padding:5px 10px;border-radius:var(--radius-pill)}
.log .ok{background:var(--status-success-bg);color:var(--status-success)}
.log .fejl{background:var(--status-danger-bg);color:var(--status-danger)}
.log .ok::before,.log .fejl::before{content:"";width:12px;height:12px;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.log .ok::before{-webkit-mask-image:var(--ikon-check);mask-image:var(--ikon-check)}
.log .fejl::before{-webkit-mask-image:var(--ikon-x);mask-image:var(--ikon-x)}
.skaerm-fod{padding:var(--space-4) var(--space-5);font:var(--type-body-sm);color:var(--text-muted);
            border-top:1px solid var(--border-subtle);background:var(--surface-subtle)}

/* ── Kort ─────────────────────────────────────────────── */
.kort{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);
      border-radius:var(--radius-card);padding:var(--pad-card);box-shadow:var(--shadow-sm);
      overflow:hidden;display:block;text-decoration:none;color:inherit;
      transition:var(--transition-surface)}
a.kort:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.kort h3{font:var(--type-h3);color:var(--text-heading);margin-bottom:var(--space-2)}
.kort p{font:var(--type-body-sm);color:var(--text-muted)}
.kort .videre{display:inline-block;margin-top:var(--space-4);
              font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);color:var(--brand-blue)}
.kort.blaa{background:var(--surface-brand);border-color:var(--surface-brand);color:var(--white)}
.kort.blaa h3{color:var(--white)}
.kort.blaa p{color:rgba(255,255,255,.82)}
.kort.tonet{background:var(--surface-tint-blue);border-color:var(--blue-100)}
/* Barren øverst på et kort løfter det ud af rækken uden at gøre det larmende */
.kort.med-barre::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--barre-height);
  background:linear-gradient(90deg,var(--barre-blue) 0 50%,var(--barre-green) 50% 100%)}
.kort.med-barre{padding-top:calc(var(--pad-card) + var(--barre-height))}
.kort-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--gap-grid)}

.maerkat{display:inline-flex;align-items:center;font:var(--fw-semibold) var(--fs-2xs)/1 var(--font-body);
         letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--green-800);
         background:var(--surface-tint-green);padding:5px 11px;border-radius:var(--radius-pill);
         margin-bottom:var(--space-3)}

/* ── Flow: Printer → ScanTilMail → Modtager ───────────── */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);align-items:stretch}
.flow-note{text-align:center;font:var(--type-body);color:var(--text-muted);margin-top:var(--space-8)}

/* ── Trin ─────────────────────────────────────────────── */
.trin-stor{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.trin-stor .nr{display:block;font:var(--fw-display-regular) var(--fs-3xl)/1 var(--font-display);
               color:var(--brand-green);margin-bottom:var(--space-4)}
.trin-stor h3{font:var(--type-h3);color:var(--text-heading);margin-bottom:var(--space-2)}
.trin-stor p{font:var(--type-body-sm);color:var(--text-muted)}

/* ── Egenskaber ───────────────────────────────────────── */
.egen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-10) var(--space-12)}
.egen > div{border-top:2px solid var(--brand-green);padding-top:var(--space-5)}
.egen h3{font:var(--fw-display-semibold) var(--fs-lg)/var(--lh-snug) var(--font-display);
         color:var(--text-heading);margin-bottom:var(--space-2)}
.egen p{font:var(--type-body-sm);color:var(--text-muted)}

/* ── Før/efter ────────────────────────────────────────── */
.foer-efter{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);align-items:start}
.fe-side h3{font:var(--type-h3);color:var(--text-heading);margin-bottom:var(--space-5)}
.fe-side.i-dag h3{color:var(--text-muted)}
.fe-side ul{list-style:none;display:grid;gap:var(--space-4)}
.fe-side li{display:grid;grid-template-columns:20px 1fr;gap:var(--space-3);
            font:var(--type-body-sm);color:var(--text-body)}
.fe-side li::before{content:"";width:16px;height:16px;margin-top:3px;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.fe-side.i-dag li::before{color:var(--status-danger);
  -webkit-mask-image:var(--ikon-x);mask-image:var(--ikon-x)}
.fe-side.med li::before{color:var(--status-success);
  -webkit-mask-image:var(--ikon-check);mask-image:var(--ikon-check)}

/* ── Mærkepiller ──────────────────────────────────────── */
.maerker{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:860px;margin:0 auto}
.maerker a{padding:9px 20px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);
  font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);color:var(--ink-700);
  text-decoration:none;transition:var(--transition-control)}
.maerker a:hover{background:var(--blue-50);border-color:var(--brand-blue);
                 color:var(--brand-blue);text-decoration:none}

/* ── Pris ─────────────────────────────────────────────── */
.pris-boks{max-width:940px;margin:0 auto;position:relative;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.pris-boks::before{content:"";position:absolute;inset:0 0 auto 0;height:var(--barre-height);
  background:linear-gradient(90deg,var(--barre-blue) 0 50%,var(--barre-green) 50% 100%)}
.pris-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--barre-height);align-items:stretch}
.pris-venstre{padding:var(--space-10)}
.pris-hoejre{padding:var(--space-10);background:var(--surface-subtle);
             border-left:1px solid var(--border-subtle)}
.pris-tal{font:var(--fw-display-regular) var(--fs-5xl)/1 var(--font-display);
          color:var(--brand-blue);letter-spacing:var(--ls-display)}
.pris-tal span{font:var(--type-subhead);color:var(--text-muted)}
.pris-vilkaar{font:var(--type-body-sm);color:var(--text-muted);margin:var(--space-4) 0 var(--space-6)}
.pris-liste{display:grid;gap:var(--space-4)}
.pris-liste div{display:grid;grid-template-columns:20px 1fr;gap:var(--space-3);
                font:var(--type-body);color:var(--text-body)}
.pris-liste div::before{content:"";width:16px;height:16px;margin-top:5px;color:var(--status-success);
  background:currentColor;-webkit-mask-image:var(--ikon-check);mask-image:var(--ikon-check);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.regner{background:var(--surface-tint-blue);border:1px solid var(--blue-100);
        border-radius:var(--radius-card);padding:var(--space-5) var(--space-6);
        display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;justify-content:space-between}
.regner label{font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body);color:var(--text-body)}
.regner input{width:92px;padding:var(--pad-control-y) var(--space-3);border:1px solid var(--border-default);
  border-radius:var(--radius-input);font:var(--type-body);text-align:center;color:var(--text-body)}
.regner .resultat{font:var(--type-body-sm);color:var(--text-muted)}
.regner .resultat b{font:var(--fw-display-regular) var(--fs-xl)/1 var(--font-display);
                    color:var(--brand-blue)}
.pris-note{font:var(--type-body-sm);color:var(--text-muted);margin-top:var(--space-5)}

/* ── CTA-bånd ─────────────────────────────────────────── */
.baand{background:var(--surface-brand-deep);color:rgba(255,255,255,.82);
       padding:var(--space-20) var(--space-10);text-align:center;display:grid;
       gap:var(--space-5);justify-items:center}
.baand h2{font:var(--type-h2);color:var(--white);text-wrap:balance}
.baand p{font:var(--type-subhead);color:rgba(255,255,255,.82);max-width:44em}
.baand .under{font:var(--type-body-sm);color:rgba(255,255,255,.6)}

/* ── Artikel ──────────────────────────────────────────── */
.brodkrumme{font:var(--type-body-sm);color:var(--text-muted);padding:var(--space-5) 0;
            border-bottom:1px solid var(--border-subtle)}
.brodkrumme a{color:var(--text-muted)}
.brodkrumme a:hover{color:var(--brand-blue)}
.brodkrumme span{margin:0 7px;color:var(--ink-300)}
.artikel-hoved{padding:var(--space-12) 0 var(--space-8);display:grid;gap:var(--space-4)}
.artikel-hoved h1{font:var(--type-h1);color:var(--text-heading);text-wrap:balance}
.artikel-hoved .manchet{font:var(--type-subhead);color:var(--text-muted)}
.artikel-hoved .meta{font:var(--type-body-sm);color:var(--text-muted)}
.artikel{padding-bottom:var(--space-20)}
.artikel h2{font:var(--type-h2);color:var(--text-heading);margin:var(--space-12) 0 var(--space-4)}
.artikel h3{font:var(--type-h3);color:var(--text-heading);margin:var(--space-8) 0 var(--space-3)}
.artikel p{margin-bottom:var(--space-4)}
.artikel ul,.artikel ol{margin:0 0 var(--space-5) var(--space-6)}
.artikel li{margin-bottom:var(--space-2)}
.artikel > *:first-child{margin-top:0}

.indhold{background:var(--surface-subtle);border:1px solid var(--border-subtle);
         border-radius:var(--radius-card);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-8)}
.indhold b{display:block;font:var(--type-eyebrow);letter-spacing:var(--ls-caps);
           text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-3)}
.indhold ol{margin:0 0 0 var(--space-5)}
.indhold li{margin-bottom:var(--space-2);font:var(--type-body-sm)}

.faktaboks{background:var(--surface-tint-blue);border:1px solid var(--blue-100);
           border-left:3px solid var(--brand-blue);border-radius:0 var(--radius-md) var(--radius-md) 0;
           padding:var(--space-5) var(--space-6);margin:var(--space-6) 0}
.faktaboks h3{font:var(--type-h3);font-size:var(--fs-md);margin:0 0 var(--space-2)}
.faktaboks p:last-child,.faktaboks ul:last-child{margin-bottom:0}
.advarsel{background:var(--status-warning-bg);border:1px solid #f0e2c2;
          border-left:3px solid var(--status-warning);border-radius:0 var(--radius-md) var(--radius-md) 0;
          padding:var(--space-5) var(--space-6);margin:var(--space-6) 0}
.advarsel h3{font:var(--type-h3);font-size:var(--fs-md);margin:0 0 var(--space-2)}

/* Opsætningskort — de felter, der skrives af */
.felter{border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;
        margin:var(--space-6) 0;background:var(--surface-card)}
.felter .rk{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--border-subtle)}
.felter .rk:last-child{border-bottom:none}
.felter .na{padding:var(--space-3) var(--space-5);background:var(--surface-subtle);
            font:var(--fw-semibold) var(--fs-sm)/var(--lh-body) var(--font-body);
            color:var(--text-body);border-right:1px solid var(--border-subtle)}
.felter .va{padding:var(--space-3) var(--space-5);font-family:var(--font-mono);
            font-size:var(--fs-sm);color:var(--text-body);word-break:break-all}
.felter .va small{display:block;font-family:var(--font-body);font-size:var(--fs-xs);
                  color:var(--text-muted);margin-top:3px}

.opskrift{list-style:none;margin:var(--space-6) 0!important;counter-reset:o;padding-left:0!important}
.opskrift li{counter-increment:o;position:relative;padding:0 0 var(--space-6) 52px;margin:0!important}
.opskrift li:last-child{padding-bottom:0}
.opskrift li::before{content:counter(o);position:absolute;left:0;top:0;width:32px;height:32px;
  background:var(--surface-tint-blue);color:var(--brand-blue);border-radius:var(--radius-circle);
  display:flex;align-items:center;justify-content:center;
  font:var(--fw-semibold) var(--fs-sm)/1 var(--font-body)}
.opskrift li b{display:block;font:var(--fw-semibold) var(--fs-base)/var(--lh-snug) var(--font-body);
               color:var(--text-body);margin-bottom:var(--space-1)}
.opskrift li p{margin-bottom:0;font:var(--type-body-sm);color:var(--text-muted)}

/* ── FAQ ──────────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--border-subtle);padding:var(--space-5) 0}
.faq summary{font:var(--fw-semibold) var(--fs-md)/var(--lh-snug) var(--font-body);
             color:var(--text-body);cursor:pointer;list-style:none;
             display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:16px;height:16px;flex-shrink:0;background:currentColor;
  color:var(--brand-green);-webkit-mask-image:var(--ikon-plus);mask-image:var(--ikon-plus);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;
  transition:transform var(--dur-fast) var(--ease-standard)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:var(--space-3);color:var(--text-muted)}
.faq details ul{margin:var(--space-3) 0 0 var(--space-6);color:var(--text-muted)}

/* ── Tabel ────────────────────────────────────────────── */
.tabel{width:100%;border-collapse:collapse;font:var(--type-body-sm);margin:var(--space-6) 0;
       background:var(--surface-card);border:1px solid var(--border-subtle);
       border-radius:var(--radius-card);overflow:hidden}
.tabel th{text-align:left;font:var(--fw-semibold) var(--fs-xs)/1.2 var(--font-body);
          letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);
          padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);
          background:var(--surface-subtle)}
.tabel td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle);
          vertical-align:top;color:var(--text-body)}
.tabel tr:last-child td{border-bottom:none}
.tabel-rul{overflow-x:auto}

/* ── Formular ─────────────────────────────────────────── */
.form{border:1px solid var(--border-subtle);border-radius:var(--radius-card);
      padding:var(--space-8);background:var(--surface-card);box-shadow:var(--shadow-sm)}
.felt{margin-bottom:var(--space-4)}
.felt label{display:block;font:var(--fw-semibold) var(--fs-xs)/1.4 var(--font-body);
            color:var(--text-body);margin-bottom:var(--space-2)}
.felt input,.felt textarea,.felt select{width:100%;padding:var(--pad-control-y) var(--space-3);
  border:1px solid var(--border-default);border-radius:var(--radius-input);
  font:var(--type-body);background:var(--white);color:var(--text-body)}
.felt input:focus,.felt textarea:focus,.felt select:focus{outline:none;
  border-color:var(--brand-green);box-shadow:var(--shadow-focus)}
.form .knap{width:100%;padding:14px}
.svar{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);
      font:var(--type-body-sm);margin-bottom:var(--space-5);display:none}
.svar.ok{background:var(--status-success-bg);color:var(--green-800);border:1px solid var(--green-200);display:block}
.svar.fejl{background:var(--status-danger-bg);color:var(--status-danger);border:1px solid #f2c9c9;display:block}
.tavshed{font:var(--type-body-sm);font-size:var(--fs-xs);color:var(--text-muted);margin-top:var(--space-4)}
.to-spalter{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start}

/* ── Bund ─────────────────────────────────────────────── */
footer{background:var(--surface-inverse);color:rgba(255,255,255,.7);padding:var(--space-16) 0 var(--space-8)}
.fod-gitter{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-10);
            margin-bottom:var(--space-12)}
.fod-gitter h4{font:var(--type-eyebrow);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;
               color:var(--brand-green);margin-bottom:var(--space-4)}
.fod-gitter ul{list-style:none;display:grid;gap:var(--space-3)}
.fod-gitter a{font:var(--type-body-sm);color:rgba(255,255,255,.7);text-decoration:none}
.fod-gitter a:hover{color:var(--white);text-decoration:none}
.fod-gitter img{height:38px;width:auto;margin-bottom:var(--space-4)}
.fod-gitter .om{font:var(--type-body-sm);color:rgba(255,255,255,.55);max-width:24em}
.fod-bund{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-6);
          display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
          font:var(--type-body-sm);color:rgba(255,255,255,.55)}
.fod-bund a{color:rgba(255,255,255,.7)}

/* ── Responsivt ───────────────────────────────────────── */
@media(max-width:1100px){
  .pris-grid{grid-template-columns:1fr}
  .pris-hoejre{border-left:none;border-top:1px solid var(--border-subtle)}
}
@media(max-width:900px){
  .hero-grid,.to-spalter,.foer-efter{grid-template-columns:1fr}
  .flow,.trin-stor{grid-template-columns:1fr}
  .fod-gitter{grid-template-columns:1fr 1fr}
  section{padding:var(--space-16) 0}
  .hero{padding:var(--space-12) 0 var(--space-16)}
  .baand{padding:var(--space-16) var(--space-6)}
  .felter .rk{grid-template-columns:1fr}
  .felter .na{border-right:none;border-bottom:1px solid var(--border-subtle)}
  nav{position:fixed;top:var(--header-height);left:0;right:0;background:var(--white);
      border-bottom:1px solid var(--border-subtle);flex-direction:column;align-items:stretch;
      gap:0;padding:var(--space-2) var(--gutter) var(--space-5);display:none;
      box-shadow:var(--shadow-md);max-height:calc(100vh - var(--header-height));overflow-y:auto}
  nav.aaben{display:flex}
  nav a{padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle);font-size:var(--fs-base)}
  nav a.aktiv{border-bottom-color:var(--border-subtle);padding-bottom:var(--space-3)}
  nav .knap{margin-top:var(--space-4);border-bottom:none}
  .menu-knap{display:block}
}
@media(max-width:600px){
  .fod-gitter{grid-template-columns:1fr}
  :root{--fs-5xl:40px;--fs-4xl:34px;--fs-2xl:26px}
}