/* ==========================================================================
   Hjemstad - delt stylesheet
   Mørk petrol, cremefarvet tekst, grøn som accent. Rolig, ikke råbende.
   ========================================================================== */

:root{
  /* ---------- Brandfarver ------------------------------------------------
     Grønnen er aflæst af logofilen og trukket ind i CMYK (C*ab 76).
     Bunden er "Hør": papirets renhed, en tredjedel af kalkens varme
     (C*3.7 mod 12.0) og et neutralt blæk. Petrol indgår ikke.        */
  --brand-green: #2E6A4E;   /* Mos. Accent på lys bund: 5.68:1 */
  --brand-ink:   #0F2019;   /* Blæk. Neutral-mørk med grønt anstrøg */
  --brand-cream: #DCE0DC;   /* Ordmærkets lyse, kun på mørke flader */

  /* ---------- Den grønnes tre udgaver ------------------------------------
     Den lyse grøn kan ikke være tekst på lyst: 2.51:1 mod hvidt.
     Regel: lys grøn på mørkt, dyb grøn på lyst. Ingen undtagelser.   */
  --green-deep:  #2E6A4E;   /* 5.68:1 på papir. Tekst, ikoner, mærker */

  /* Prikkens egen grøn. Den er lysere og mere mættet end tekstgrønnen,
     fordi den skal læses som et livstegn og ikke som et punktum. Den
     ligger på 2.58:1 mod bunden og klarer altså ikke 3:1 — det er
     tilladt, fordi den er en del af ordmærket, og logoer er undtaget fra
     kontrastkravet. Den må derfor ALDRIG bruges til tekst eller til
     ikoner, hvor formen bærer betydning. */
  --green-prik:  #51AE3C;

  /* Den lyseste grøn i samme kulør, der stadig kan læses som brødtekst:
     4.53:1 på creme og 4.53 på kalk. #3C8A2A blev overvejet, men lander
     på 3.97 mod creme — under de 4.5, almindelig tekst kræver. Forskellen
     er ikke til at se på et farvekort; den er til at mærke for den, der
     læser med nedsat syn. */
  --green-tekst: #2A6046;
  --accent-ink:  var(--green-deep);
  /* Linjer og kanter, der viser en TILSTAND (valgt kort, fokus, aktiv
     kontrol). Den dybe grøn måler kun 1.68:1 mod den mørke bund og
     forsvinder derfor i mørk visning — dér skiftes den ud med den lyse
     grøn, som allerede bruges til prikkerne. WCAG 1.4.11 kræver 3:1. */
  --accent-linje: var(--brand-green);

  /* ---------- Tilstandsfarver ------------------------------------------- */
  --fejl:        #96271A;   /* 6.10:1 */
  --advarsel:    #6E4A00;   /* 6.00:1 */
  --succes:      var(--green-deep);

  /* ---------- Tema -------------------------------------------------------
     --page er sidens bund. --tint er den farve, gennemsigtige lag
     blandes med. Footeren vender dem om, se nederst.                 */
  /* Papiret som fast værdi. --page følger temaet og bliver blæk i mørk
     visning; --papir gør ikke. Den bruges de steder, hvor der SKAL være en
     lys flade uanset tema — primærknappen vender om og er lys på mørkt. */
  --papir:       #F1F2EE;
  --page:        var(--papir);
  --tint:        var(--brand-ink);

  /* ---------- Fladestige -------------------------------------------------
     Faste trin, ikke afledte procenter. Procenter gav flader, der lå
     ΔE 0.9-3.6 fra hinanden — forskelle man ikke kan se.             */
  --flade-1:     #F1F2EE;   /* sidens bund */
  --flade-2:     #E7E9E3;   /* kort        ΔE 5.4 */
  --flade-3:     #DBDED6;   /* hævet       ΔE 5.2 */

  --card-bg:     var(--flade-2);
  --card-bg-2:   var(--flade-3);
  --card-border: color-mix(in oklab, var(--tint) 15%, transparent);
  --card-border-strong: color-mix(in oklab, var(--tint) 28%, transparent);
  /* Kanten på felter og outline-knapper er det eneste, der viser, at de er
     komponenter. WCAG 1.4.11 kræver 3:1. Målt: 3.26:1. */
  --kontrol-kant: color-mix(in oklab, var(--tint) 52%, transparent);
  --nav-bg:      color-mix(in oklab, var(--page) 86%, transparent);
  --footer-bg:   var(--brand-ink);
  --hairline:    color-mix(in oklab, var(--tint) 14%, transparent);

  --text:        var(--tint);
  --text-muted:  #565D58;   /* 6.02:1 */
  /* Var #6B726D og målte 4.39:1 — lige under de 4.5, almindelig tekst
     kræver. Den bruges til småt: kildehenvisninger, feltoverskrifter,
     juralinjen. Netop dét, der i forvejen er svært at læse. 4.66:1 nu. */
  --text-faint:  #676E69;
  --on-green:    #1A1A18;
  /* Primærknappen er blæk. Den lysegrønne pille sagde «venlig app»;
     en mørk, stram knap siger «præcis» — og er samtidig langt mere
     kontrastsikker end lys grøn med mørk tekst. */
  --primaer:     var(--brand-ink);
  --paa-primaer: var(--page);

  /* Stram radius. 24 px rundede alt til «app»; 6 px læses som præcision. */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  --s1: 8px;  --s2: 16px; --s3: 24px;
  --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;

  /* Fast 1280 så længe skærmen var en bærbar. På en stor kontorskærm gav
     det 360 px tom margen i hver side, og sitet så ud som en smal spalte.
     Nu følger den skærmen op til et loft. Brødteksten løber ikke med:
     .lead, .section-head og .prose har hver deres bredde målt i tegn, så
     linjelængden er den samme, uanset hvor bred containeren bliver. */
  --maxw: min(1560px, 92vw);

  /* Én skrift på hele sitet. Source Serif 4 er ude — Bricolage bærer nu
     både overskrifter og brødtekst. De to navne bliver stående, fordi de
     bruges hver for sig i hele arket, og fordi rollerne stadig er to:
     --font-head sættes i fed og stramt, --font-body i 400 og luftigt. */
  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;

  /* Beregneren kan skifte til mørk visning og sætter selv color-scheme.
     Uden det her tegner browseren native kontroller — den ene <select>,
     datovælgere, rullepanelet — i systemets mørke udgave oven på vores
     lyse side. */
  color-scheme: light;

  --t-fast: 150ms ease;
  --t-med: 220ms cubic-bezier(.2,.7,.3,1);
  --t-slow: 300ms cubic-bezier(.2,.7,.3,1);
}

/* --- Reset / base ------------------------------------------------------- */

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  /* Begge skal sættes: overflow propagerer fra body til viewport */
  overflow-x: clip;
  max-width: 100%;
}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-body);
  /* Serif sat en tand større og med mere luft end den grotesk, der stod
     her før. En serif på 16/1.6 ser trykt og trang ud på skærm. */
  font-size:17px;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100vh;
}

img,svg{ max-width:100%; }
svg{ display:block; }

h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.05;
  margin:0 0 var(--s3);
  text-wrap:balance;
}
h1{ font-size: clamp(2.5rem, 5.2vw, 4.5rem); font-weight:800; }
h2{ font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
h3{ font-size: clamp(1.125rem, 1.4vw, 1.3125rem); margin-bottom: var(--s2); }
h4{ font-size:1rem; margin-bottom: var(--s1); }

p{ margin:0 0 var(--s2); color: var(--text-muted); }
p:last-child{ margin-bottom:0; }
h1 + p, h2 + p, h3 + p{ margin-top:0; }

a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
strong{ color: var(--text); font-weight:600; }

.green{ color: var(--accent-ink); }

/* --- Tilgængelighed ----------------------------------------------------- */

:focus-visible{
  outline:3px solid var(--accent-ink);
  outline-offset:3px;
  border-radius:4px;
}

.skip-link{
  position:absolute; left:var(--s2); top:-100px; z-index:200;
  background: var(--primaer); color: var(--paa-primaer);
  padding:12px 20px; border-radius: var(--r-md);
  font-weight:700; text-decoration:none;
  transition: top var(--t-fast);
}
.skip-link:focus,
.skip-link:focus-visible{ top: var(--s2); }

/* Berøring. touch-action: manipulation fjerner browserens ventetid på et
   muligt dobbelttryk-zoom — 300 ms på hvert eneste tryk uden den. Tap-
   highlight sættes bevidst frem for at arve Safaris blå firkant, der ikke
   følger vores hjørneradius. */
a, button, summary, label, [role="option"], input[type="checkbox"], input[type="radio"]{
  touch-action: manipulation;
  -webkit-tap-highlight-color: color-mix(in oklab, var(--brand-green) 18%, transparent);
}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* --- Filmkorn ----------------------------------------------------------- */

.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Layout ------------------------------------------------------------- */

.container{
  width:100%; max-width: var(--maxw);
  margin-inline:auto;
  padding-inline: var(--s3);
}

section{ padding-block: var(--s7); }
@media (max-width:768px){ section{ padding-block: var(--s6); } }

.section-head{ max-width:52ch; margin-bottom: var(--s5); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ margin-bottom: var(--s2); }

.eyebrow{
  /* inline-flex, så den stadig centrerer sig i de centrerede sektioner */
  display:inline-flex; align-items:center; gap:10px;
  font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--accent-ink);
  margin:0 0 var(--s2);
}

.lead{ font-size:1.0625rem; max-width:58ch; }
@media (min-width:900px){ .lead{ font-size:1.125rem; } }

/* --- Knapper ------------------------------------------------------------ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 26px;
  border-radius: var(--r-md);
  font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1.5px solid transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.btn:active{ transform: translateY(1px); }

.btn-primary{ background: var(--primaer); color: var(--paa-primaer); }
.btn-primary:hover{ background: color-mix(in oklab, var(--primaer) 86%, var(--tint)); }

.btn-outline{
  background:transparent; color: var(--text);
  border-color: var(--kontrol-kant);
}
.btn-outline:hover{
  border-color: var(--tint);
  background: color-mix(in oklab, var(--tint) 7%, transparent);
}

.btn-lg{ padding:16px 32px; font-size:1rem; min-height:56px; }

.btn-group{ display:flex; flex-wrap:wrap; gap: var(--s2); }
@media (max-width:520px){ .btn-group .btn{ flex:1 1 100%; } }

/* --- Kort --------------------------------------------------------------- */

.card{
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: var(--s4);
  backdrop-filter: blur(8px);
  transition: border-color var(--t-med), background-color var(--t-med);
}
.card:hover{ border-color: var(--card-border-strong); background: var(--card-bg-2); }

/* Tilt: kun på hero-kortene og det fremhævede produkt. Maks 4 grader. */
.tilt{ transform-style:preserve-3d; will-change:transform; transition: transform var(--t-slow); }

/* --- Ikonfliser --------------------------------------------------------- */

.icon-tile{
  width:44px; height:44px; flex:0 0 44px;
  display:grid; place-items:center;
  border-radius: var(--r-sm);
  color: var(--accent-ink);
  background: var(--flade-3);
  border:1px solid var(--card-border);
  margin-bottom: var(--s3);
}
.icon-tile svg{ width:22px; height:22px; }

/* Fyldt variant: kun til det fremhævede kort og hero */
.icon-tile.solid{
  background: var(--primaer);
  border-color: var(--primaer);
  color: var(--paa-primaer);
}

/* --- Header ------------------------------------------------------------- */

.site-header{
  position:sticky; top:0; z-index:100;
  background: var(--nav-bg);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom:1px solid var(--hairline);
}
/* Headeren følger skærmen, ikke containeren. Logoet skal stå yderst til
   venstre og knapperne yderst til højre — ellers svæver de midt i fladen
   på en stor skærm, mens baggrunden går helt ud. */
.site-header .container{ max-width:none; padding-inline: var(--s4); }
@media (max-width:760px){
  .site-header .container{ padding-inline: var(--s3); }
}
.nav-inner{
  display:flex; align-items:center; gap: var(--s3);
  min-height:72px;
}
/* Logoet er den leverede fil, ikke sat tekst. */
.logo{
  --logo-h: 26px;
  text-decoration:none; margin-right:auto;
  display:inline-flex; align-items:center; min-height:44px;
}
/* Logoet er nu en SVG, ikke et <img>. Højden styrer, bredden følger med —
   ellers fylder den flex-pladsen ud og skubber navigationen sammen. */
.logo .logo-svg{ height: var(--logo-h); width:auto; }
.logo .logo-mark{ height: var(--logo-h); }

/* Prikken i logofilen er ikke et punktum. Den betyder, at vi er online og
   kan hjælpe. Derfor ligger der et levende lag oven på den.
   Målt i filen: centrum 98,12% inde, 66,39% ned, diameter 2,90% af bredden.
   Alt er i procent, så det passer i enhver størrelse: både 26px i toppen
   og det store ordmærke i bunden. */
/* ==========================================================================
   Ordmærket
   ==========================================================================
   Logoet er nu ægte vektor og ligger inline i siden. Det giver to ting,
   et <img> aldrig kunne: bogstaverne arver tekstfarven, så én fil dækker
   både creme og blæk, og prikken er en form, jeg kan få fat i.

   Før lå der en ring og et lysere lag OVEN PÅ en PNG, fordi prikken var
   brændt ind i billedet og ikke kunne dæmpes. Nu blinker selve prikken. */

.logo-mark{ position:relative; display:block; }
.logo-svg{
  display:block; width:100%; height:auto;
  overflow:visible;
  color: var(--brand-ink);            /* bogstaverne */
}
.logo-svg .prik{ fill: var(--green-prik); }

/* På mørk flade vendes begge dele. De to grønne kan ikke byttes om:
   den lyse på creme giver 2.17:1 og den mørke på blæk 2.46:1 — begge
   under kravet på 3. Sådan her giver de 6.51 og 7.38. */
.logo-svg.paa-moerk{ color: var(--brand-cream); }
.logo-svg.paa-moerk .prik{ fill: var(--green-prik); }

/* Signalet: altid online. Prikken lyser op og sender en ring ud.
   Ringen er en anden cirkel, tegnet med CSS oven på den rigtige, fordi
   en SVG-form ikke kan skalere om sit eget centrum uden at flytte sig. */
.logo-svg .prik{
  animation: prik-lys 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
/* Prikken trækker vejret. Den falder til 82 % og ikke til 45 %: en
   online-indikator skal antyde, at der er nogen — ikke blinke som en
   advarsel. Falder den for langt, ser den ud, som om forbindelsen er ved
   at gå tabt. */
@keyframes prik-lys{
  0%, 100% { opacity:1; }
  50%      { opacity:.82; }
}

.logo-mark::after{
  content:""; position:absolute;
  /* Prikkens midte i tegningen: (228.52, 129.20) inden for kassen
     (3.92, 102.36, 228.20, 40.29). Altså 98.42 % henne og 66.61 % nede.
     Tallene kommer fra logofilens egne koordinater, ikke fra øjemål —
     de skal regnes om, hver gang logoet skiftes. */
  left:98.42%; top:66.61%;
  width:5.7%; aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  border:1.5px solid var(--green-prik);
  animation: pulse 2.8s ease-out infinite;
  pointer-events:none;
}

/* Samme signal, frit stillet. Kan sættes hvor som helst der skal stå
   "det her er levende", fx <span class="live-dot"></span> */
.live-dot{
  --dot: 9px;
  position:relative; display:inline-block;
  width: var(--dot); height: var(--dot); flex:0 0 var(--dot);
  border-radius:50%;
  background: var(--green-prik);
  vertical-align:baseline;
}
.live-dot{ animation: prik-lys 2.8s ease-in-out infinite; }
.live-dot::after{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  border:1.5px solid var(--green-prik);
  animation: pulse 2.8s ease-out infinite;
}
/* Der lå før et lysere grønt lag ovenpå, som blinkede hårdt fra 0 til 1
   på under et tiendedels sekund. Det var nødvendigt, dengang prikken var
   brændt ind i en PNG og ikke kunne dæmpes. Nu er den en form, der selv
   kan trække vejret, og det hårde blink er væk. */

/* Prikken i filen er kun ca. 4px bred ved denne logohøjde, så ringen skal
   ud i god afstand, før pulsen overhovedet kan ses. */
/* Ringen, der breder sig ud fra prikken. Den starter svagt — 0.42 og
   ikke 0.9 — og er væk før halvvejs, så der er en pause mellem hver bølge.
   Uden pausen bliver det en konstant flimren i øjenkrogen på hver eneste
   side, og det er trættende at læse ved siden af. */
@keyframes pulse{
  0%   { scale:1;   opacity:.42; }
  60%  { scale:3.4; opacity:0; }
  100% { scale:3.4; opacity:0; }
}

.nav-drawer{ display:contents; }

.nav-links{ display:flex; align-items:center; gap: var(--s3); }
/* Menuen står i husets groteske i stedet for at arve brødtekstens serif.
   Kun font-family er sat — størrelse, vægt, farve og polstring er urørt. */
.nav-links a{
  font-family: var(--font-head);
  text-decoration:none; font-size:.9375rem; font-weight:500;
  color: var(--text-muted);
  padding:10px 2px;
  display:inline-flex; align-items:center; min-height:44px;
  border-bottom:2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav-links a:hover{ color: var(--text); }
.nav-links a[aria-current="page"]{ color: var(--text); border-bottom-color: var(--accent-ink); }

.nav-actions{ display:flex; align-items:center; gap: var(--s2); }
.nav-actions .btn{ min-height:44px; padding:10px 20px; font-size:.875rem; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; color:inherit;
  border:1px solid var(--card-border); border-radius: var(--r-sm);
  cursor:pointer;
}
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .nav-drawer{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background: var(--brand-ink);
    border-bottom:1px solid var(--hairline);
    padding: var(--s3);
    flex-direction:column; align-items:stretch; gap: var(--s2);
    /* Skuffen er en mørk flade og skal vende farverne med — præcis som
       foden og .cta-block gør det. Uden det beholder menupunkterne den
       grå, der er valgt til lyst papir: 2,50:1 mod blæk, og knappen blev
       blæk på blæk. At sætte --text alene rækker ikke; color er allerede
       regnet ud på body og arves ned, så den skal sættes her. */
    --tint:        var(--brand-cream);
    --text:        var(--brand-cream);
    --text-muted:  color-mix(in oklab, var(--brand-cream) 82%, var(--brand-ink));
    --text-faint:  color-mix(in oklab, var(--brand-cream) 68%, var(--brand-ink));
    --accent-ink:  var(--brand-cream);
    --primaer:     var(--papir);
    --paa-primaer: var(--brand-ink);
    --hairline:    color-mix(in oklab, var(--brand-cream) 16%, transparent);
    --kontrol-kant: color-mix(in oklab, var(--brand-cream) 45%, transparent);
    color: var(--text);
  }
  .nav-drawer.open{ display:flex; }
  .nav-links{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-links a{ padding:14px 0; border-bottom:1px solid var(--hairline); }
  .nav-links a[aria-current="page"]{
    border-bottom-color: var(--hairline); color: var(--text); font-weight:700;
  }
  .nav-actions{ flex-direction:column; align-items:stretch; margin-top: var(--s2); }
  .nav-actions .btn{ width:100%; padding:14px 20px; }
}

/* --- Hero --------------------------------------------------------------- */

.hero{ position:relative; padding-block: var(--s6) var(--s7); }
.hero-grid{
  display:grid; gap: var(--s6);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:center;
}
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap: var(--s5); }
}

.glow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.glow span{ position:absolute; display:block; border-radius:50%; filter: blur(60px); }
.glow .g1{
  width:min(38vw,420px); aspect-ratio:1; left:-8%; top:2%;
  background: color-mix(in oklab, var(--brand-green) 42%, transparent);
  opacity:.30;
}
.glow .g2{
  width:min(34vw,380px); aspect-ratio:1; right:-6%; bottom:-12%;
  background: color-mix(in oklab, var(--tint) 40%, transparent);
  opacity:.16;
}

.hero h1{ margin-bottom: var(--s3); }

/* Opsætning og svar. Den lille linje stiller spørgsmålet, den store svarer,
   og prikken er sætningens punktum. */
.hero-title{ display:grid; gap:.3em; }
.hero-title .setup{
  font-size:.40em; line-height:1.2; letter-spacing:-.02em;
  color: var(--text-muted);
  max-width:20ch;
}
.hero-title .payoff{ display:block; }
.hero-title .live-dot{
  --dot:.15em;
  margin-left:.05em;
}
.hero .lead{ margin-bottom: var(--s4); }

.ticks{
  display:flex; flex-wrap:wrap; gap: var(--s2) var(--s3);
  margin-top: var(--s4); font-size:.875rem; color: var(--text-muted);
}
.ticks li{ display:flex; align-items:center; gap:8px; }
.ticks svg{ width:16px; height:16px; color: var(--accent-ink); flex:0 0 16px; }

/* Hero-billede med kortene lagt hen over kanten */
.hero-visual{ position:relative; }
/* Billedteksten skal ikke gemme sig bag kortene */
.hero-visual .photo{ align-items:flex-start; }
.hero-cards{
  /* Mellemrummet skal være større end svævets udslag, ellers kolliderer kortene */
  display:grid; gap: var(--s3);
  position:absolute; left:-8%; bottom:-28px; width:74%;
}
/* De to kort er ikke pynt. De er sidens første spørgsmål: privat eller erhverv. */
.hero-card{
  background: color-mix(in oklab, var(--page) 88%, transparent);
  border:1px solid var(--card-border-strong);
  border-radius: var(--r-md);
  padding: var(--s2) var(--s3);
  min-height:64px;
  backdrop-filter: blur(14px);
  display:flex; align-items:center; gap: var(--s2);
  text-decoration:none;
  animation: float 7s ease-in-out infinite;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.hero-card:nth-child(2){ animation-delay:-3.5s; margin-left: 9%; }
.hero-card:hover{
  border-color: var(--accent-ink);
  background: color-mix(in oklab, var(--page) 94%, transparent);
}
.hero-card .icon-tile{ margin-bottom:0; width:38px; height:38px; flex-basis:38px; }
.hero-card .icon-tile svg{ width:19px; height:19px; }
.hero-card > div{ flex:1; min-width:0; }
.hero-card h3{ margin:0 0 1px; font-size:1rem; }
.hero-card p{ margin:0; font-size:.8125rem; color: var(--text-faint); }
.hero-card-go{
  flex:0 0 auto; color: var(--accent-ink); font-size:1.05rem;
  transition: translate var(--t-fast);
}
.hero-card:hover .hero-card-go{ translate:4px 0; }

/* Uden foto bærer kortene selv heroens højre side. Så skal de stå i
   det normale flow — absolut placering ville hænge på en tom kasse. */
.hero-cards.solo{
  position:static; width:100%;
  align-content:center; min-height:100%;
}
.hero-cards.solo .hero-card:nth-child(2){ margin-left:6%; }
.hero-cards.solo .hero-card:nth-child(3){ margin-left:12%; }
.hero-cards.solo .hero-card:nth-child(3){ animation-delay:-1.8s; }

@keyframes float{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -6px; }
}

@media (max-width:1024px){
  .hero-cards{ position:static; width:100%; margin-top: var(--s3); }
  .hero-card:nth-child(2),.hero-card:nth-child(3){ margin-left:0; }
}

/* --- Billedfelter ------------------------------------------------------- */

.photo{
  position:relative;
  border-radius: var(--r-lg);
  border:1px solid var(--card-border);
  background:
    repeating-linear-gradient(-45deg, transparent 0 13px,
      color-mix(in oklab, var(--tint) 5%, transparent) 13px 14px),
    color-mix(in oklab, var(--tint) 4%, transparent);
  overflow:hidden;
  display:flex; align-items:flex-end;
  padding: var(--s3);
}
.photo-portrait{ aspect-ratio:4/5; }
.photo-wide{ aspect-ratio:3/2; }
.photo-square{ aspect-ratio:1; }
.photo-169{ aspect-ratio:16/9; }
/* Billedpar i en artikelsektion: to fotos side om side, ét under hinanden
   på smal skærm. */
.foto-par{ display:grid; grid-template-columns:1fr 1fr; gap: var(--s3);
  margin: var(--s3) 0 var(--s4); }
@media (max-width:640px){ .foto-par{ grid-template-columns:1fr; } }
.photo p{
  margin:0;
  font-size:.75rem; line-height:1.5; letter-spacing:.02em;
  color: var(--accent-ink);
  background: color-mix(in oklab, var(--page) 88%, transparent);
  border:1px dashed color-mix(in oklab, var(--brand-green) 40%, transparent);
  border-radius: var(--r-sm);
  padding:10px 12px; max-width:34ch;
  backdrop-filter: blur(6px);
}
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo.has-img{ background:none; }
/* Bunden af hero-billedet mørknes, så de tre kort, der ligger hen over
   kanten, har noget at hvile på. */
.photo.has-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    color-mix(in oklab, var(--page) 88%, transparent) 0%,
    transparent 52%);
}

/* --- Stort udsagn ------------------------------------------------------- */

.statement{ text-align:center; }
.statement .huge{
  font-family: var(--font-head);
  font-weight:800; letter-spacing:-.045em; line-height:.95;
  font-size: clamp(4.5rem, 15vw, 11rem);
  color: var(--accent-ink);
  margin: var(--s3) 0;
}
.statement p{ max-width:42ch; margin-inline:auto; font-size:1.0625rem; }

/* --- Gitre -------------------------------------------------------------- */

.grid-2{ display:grid; gap: var(--s3); grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ display:grid; gap: var(--s3); grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* Teksten er lang, kortet ved siden af er kort. Med align-items:center blev
   kortet stillet på midten af sin egen søjle, og så stod der en halv skærm
   tom luft både over og under det — mest tydeligt på produktsiderne, hvor
   brødteksten er flere skærme lang. De to søjler starter i stedet i toppen,
   og kortet følger med ned, mens man læser: det er der, man skal bruge det.
   1.35fr til teksten, fordi en tabel eller et billede i brødteksten har brug
   for bredden mere end kortet har. */
/* Begge spalter er minmax(0,…) og ikke bare fr. En grid-spalte har som
   udgangspunkt min-width:auto, og så kan et bredt barn — her tabellen, der
   har min-width for ikke at blive klemt — skubbe hele spalten bredere end
   skærmen. Med 0 som minimum bliver tabellen inde i .table-wrap og ruller
   der, i stedet for at trække resten af teksten med ud over kanten. */
.split{
  display:grid; gap: var(--s6);
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  align-items:start;
}
.split > .card{ position:sticky; top: var(--s7); }
@media (max-width:900px){
  .split{ grid-template-columns:minmax(0,1fr); gap: var(--s5); }
  .split > .card{ position:static; }
}

/* --- Anmeldelser -------------------------------------------------------- */

.stars{ display:flex; gap:3px; color: var(--accent-ink); margin-bottom: var(--s3); }
.stars svg{ width:17px; height:17px; }
.quote{
  font-family: var(--font-head); font-weight:700;
  font-size:1.1875rem; letter-spacing:-.02em; line-height:1.3;
  color: var(--text); margin-bottom: var(--s2);
}
.placeholder-note{
  font-style:italic; font-size:.8125rem;
  color: var(--accent-ink);
  border-top:1px solid var(--hairline);
  padding-top: var(--s2); margin-top: var(--s3);
}
.placeholder{
  display:inline-block;
  font-size:.85em; font-weight:600;
  color: var(--accent-ink);
  border:1px dashed color-mix(in oklab, var(--brand-green) 50%, transparent);
  border-radius:6px; padding:1px 7px;
}

/* --- Bento -------------------------------------------------------------- */

.bento{
  display:grid; gap: var(--s3);
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows: minmax(200px, auto);
}
.bento .feature{ grid-column:span 2; grid-row:span 2; }
@media (max-width:1024px){ .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px){
  .bento{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .bento .feature{ grid-column:span 1; grid-row:span 1; }
}

.product{ display:flex; flex-direction:column; position:relative; }
.product h3{ margin-bottom: var(--s2); }
.product p{ font-size:.9375rem; }
.product .more{
  margin-top:auto; padding-top: var(--s3);
  font-size:.875rem; font-weight:600; color: var(--accent-ink);
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  min-height:44px;
}
.product .more span{ transition: translate var(--t-fast); }
.product:hover .more span{ translate:4px 0; }
.product .more:hover{ text-decoration:underline; }

.badge{
  position:absolute; top: var(--s4); right: var(--s4);
  background: var(--primaer); color: var(--paa-primaer);
  font-size:.6875rem; font-weight:700; letter-spacing:.1em;
  padding:6px 12px; border-radius: var(--r-pill);
}
.feature{ justify-content:flex-start; }
.feature h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); }
.feature > p{ font-size:1rem; max-width:44ch; }
.feature-photo{
  flex:1; min-height:140px;
  margin-top: var(--s3);
  border-radius: var(--r-md);
  overflow:hidden;
}
.feature-photo.has-img::after{ display:none; }
.feature .more{ margin-top: var(--s2); padding-top:0; }

/* --- Talkort ------------------------------------------------------------ */

.stat{ padding: var(--s5); }
.stat .num{
  font-family: var(--font-head); font-weight:800;
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing:-.045em; line-height:1;
  color: var(--accent-ink);
  margin-bottom: var(--s3);
}
.stat p{ max-width:36ch; }
.source{
  font-size:.8125rem; color: var(--text-faint);
  margin-top: var(--s4);
  border-top:1px solid var(--hairline); padding-top: var(--s2);
  max-width:74ch;
}

/* --- Tjekliste ---------------------------------------------------------- */

.checklist{ display:grid; gap: var(--s2); margin-bottom: var(--s4); }
.checklist li{ display:flex; gap: var(--s2); align-items:flex-start; color: var(--text-muted); }
.checklist svg{ width:20px; height:20px; flex:0 0 20px; color: var(--accent-ink); margin-top:2px; }

/* --- Tabel -------------------------------------------------------------- */

.table-wrap{
  overflow-x:auto;
  border:1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: var(--card-bg);
}
table{ width:100%; border-collapse:collapse; min-width:660px; }

/* De 660 ovenfor er sat efter en bred sammenligningstabel i fuld container.
   En tabel inde i .prose har kun ca. 606 px at stå på, fordi .split deler
   rækken i to — og så ville selv en tabel med to korte kolonner ligge og
   rulle vandret på en almindelig bærbar. 32rem er nok til to kolonner og
   lader stadig .table-wrap rulle på telefonen, hvor der ikke er plads. */
.prose table{ min-width:32rem; }
th,td{
  padding: var(--s3);
  text-align:left; vertical-align:top;
  border-bottom:1px solid var(--hairline);
  font-size:.9375rem; font-weight:400;
  color: var(--text-muted);
}
thead th{
  font-family: var(--font-head); font-weight:700; font-size:.9375rem;
  letter-spacing:-.01em; color: var(--text);
  border-bottom:1px solid var(--card-border-strong);
}
tbody th{ font-weight:600; color: var(--text); width:26%; }
tbody tr:last-child th, tbody tr:last-child td{ border-bottom:0; }
.col-us{
  color: var(--accent-ink); font-weight:600;
  background: var(--flade-3);
}
thead th.col-us{ color: var(--accent-ink); }

/* --- Trin --------------------------------------------------------------- */

.step .num-sm{
  font-family: var(--font-head); font-weight:800; font-size:2rem;
  letter-spacing:-.04em; color: var(--accent-ink); margin-bottom: var(--s2);
}

/* --- CTA-blok ----------------------------------------------------------- */

/* Blækpanelet — sidens ene tunge øjeblik.
   Var en beige kasse med et svagt skær, altså den samme flade som alt
   muligt andet på siden. Nu er den mørk, og fordi den er det ene sted
   pr. side, hvor fladen vender, virker den uden at skulle fylde mere.
   Tokens vendes om indeni, så knap, tekst og hårstreger følger med af
   sig selv — præcis som footeren gør det. */
.cta-block{
  text-align:left; padding: var(--s6) var(--s5);
  border-radius: var(--r-lg);
  border:0;
  background: var(--brand-ink);
  --tint:        var(--brand-cream);
  --text:        var(--brand-cream);
  --text-muted:  color-mix(in oklab, var(--brand-cream) 76%, var(--brand-ink));
  --accent-ink:  var(--brand-cream);
  --primaer:     var(--papir);
  --paa-primaer: var(--brand-ink);
  --hairline:    color-mix(in oklab, var(--brand-cream) 12%, transparent);
  --kontrol-kant: color-mix(in oklab, var(--brand-cream) 45%, transparent);
  color: var(--brand-cream);
  display:grid; gap: var(--s4) var(--s5);
  grid-template-columns: minmax(0,1fr) auto;
  align-items:center;
}
.cta-block .eyebrow{ color: color-mix(in oklab, var(--brand-cream) 70%, var(--brand-ink)); }
.cta-block p{ color: color-mix(in oklab, var(--brand-cream) 78%, var(--brand-ink)); }
.cta-block .btn-group{ justify-content:flex-start; }
@media (max-width:760px){
  .cta-block{ grid-template-columns:minmax(0,1fr); padding: var(--s5) var(--s4); }
}
/* På produktsiden er CTA'en én blok blandt otte og skal ikke fylde som en
   hel skærm. De 96 px indvendigt oven i sektionens egne blev til næsten 200
   px luft over overskriften. */
.cta-sektion .cta-block{ padding: var(--s6) var(--s4); }
.cta-block h2{ max-width:20ch; margin-inline:0; color: var(--brand-cream); }
.cta-block p{ max-width:50ch; margin-inline:0; margin-bottom:0; }
/* Knapperne står i højre spalte og skal ikke centreres i den. */
.cta-block .btn-group{ justify-content:flex-start; }

/* --- Formularer --------------------------------------------------------- */

.field{ display:flex; flex-direction:column; gap:8px; margin-bottom: var(--s3); }
.field label{ font-size:.875rem; font-weight:600; color: var(--text); }
.field input,.field select,.field textarea{
  font-family: var(--font-body); font-size:1rem;
  color: var(--text);
  background: color-mix(in oklab, var(--tint) 5%, transparent);
  border:1px solid var(--kontrol-kant);
  border-radius: var(--r-md);
  padding:13px 16px; min-height:48px;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.field textarea{ min-height:140px; resize:vertical; }
.field select option{ background: var(--brand-ink); color: var(--brand-cream); }
.field input::placeholder,.field textarea::placeholder{ color: var(--text-faint); }
.field input:hover,.field select:hover,.field textarea:hover{ border-color: color-mix(in oklab, var(--tint) 34%, transparent); }
/* En kantfarve alene er en for svag markering: den skifter fra 3,26:1 til
   5,68:1, men formen ændrer sig ikke. Ringen udenom er det, man faktisk
   ser, når man tabber igennem en formular. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color: var(--accent-ink);
  outline:3px solid color-mix(in oklab, var(--accent-ink) 45%, transparent);
  outline-offset:1px;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color: var(--accent-ink); }
.field-row{ display:grid; gap: var(--s3); grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.form-note{
  font-size:.8125rem; font-style:italic; color: var(--accent-ink);
  border:1px dashed color-mix(in oklab, var(--brand-green) 40%, transparent);
  border-radius: var(--r-md); padding: var(--s2); margin-top: var(--s3);
}
.form-status{
  margin-top: var(--s3); padding: var(--s3);
  border-radius: var(--r-md);
  border:1px solid var(--brand-green);
  background: color-mix(in oklab, var(--brand-green) 10%, transparent);
  font-size:.9375rem; color: var(--text);
}
.form-status[hidden]{ display:none; }

/* Fejltilstand. Farven er aldrig alene om at bære beskeden. */
.form-status.fejl{
  border-color: var(--fejl);
  background: color-mix(in oklab, var(--fejl) 12%, transparent);
}
.felt-fejl{
  margin:0; font-size:.8125rem; font-weight:500;
  color: var(--fejl);
}
.field.har-fejl input,
.field.har-fejl select,
.field.har-fejl textarea{
  border-color: var(--fejl);
  border-width:1.5px;
}

/* --- Kontakt / diverse -------------------------------------------------- */

.contact-list{ display:grid; gap: var(--s3); }
.contact-list li{ display:flex; gap: var(--s3); align-items:flex-start; color: var(--text-muted); }
.contact-list svg{ width:20px; height:20px; flex:0 0 20px; color: var(--accent-ink); margin-top:4px; }
.contact-list a{ text-decoration:none; border-bottom:1px solid var(--hairline); color: var(--text); }
.contact-list a:hover{ border-bottom-color: var(--accent-ink); }


.chip-grid{ display:grid; gap: var(--s2); grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .chip-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .chip-grid{ grid-template-columns:1fr; } }
.chip{
  border:1px solid var(--card-border); border-radius: var(--r-md);
  background: var(--card-bg); padding: var(--s3);
  display:flex; align-items:center; gap: var(--s2);
  min-height:64px; font-weight:500; font-size:.9375rem;
  text-decoration:none;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.chip svg{ width:20px; height:20px; flex:0 0 20px; color: var(--accent-ink); }
.chip:hover{ border-color: color-mix(in oklab, var(--brand-green) 55%, transparent); background: var(--card-bg-2); }

.partner-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--s4); padding: var(--s5);
  border-radius: var(--r-lg); border:1px solid var(--card-border);
  background: var(--card-bg);
}
.partner-banner > div{ max-width:56ch; }

/* --- Login -------------------------------------------------------------- */

.login-wrap{ max-width:520px; margin-inline:auto; text-align:center; }
.login-wrap .icon-tile{ margin-inline:auto; width:56px; height:56px; flex-basis:56px; }
.login-wrap .icon-tile svg{ width:28px; height:28px; }
.mitid-badge{
  display:inline-flex; align-items:center; gap:10px;
  margin-top: var(--s3); padding:8px 16px;
  border:1px solid var(--card-border-strong); border-radius: var(--r-pill);
  font-size:.8125rem; font-weight:600; letter-spacing:.04em;
  color: var(--text);
}
.mitid-badge svg{ width:16px; height:16px; color: var(--accent-ink); }

/* --- FAQ ---------------------------------------------------------------- */

.faq details{ border-bottom:1px solid var(--hairline); }
.faq summary{
  cursor:pointer; list-style:none;
  font-family: var(--font-head); font-weight:700; font-size:1.0625rem;
  letter-spacing:-.02em; color: var(--text);
  padding: var(--s3) 44px var(--s3) 0;
  min-height:44px; display:flex; align-items:center;
  position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:12px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:2px solid var(--brand-green);
  border-bottom:2px solid var(--brand-green);
  rotate:45deg;
  transition: rotate var(--t-fast);
}
.faq details[open] summary::after{ rotate:225deg; margin-top:-2px; }
.faq details p{ padding: 0 44px var(--s3) 0; font-size:.9375rem; }

/* --- Footer ------------------------------------------------------------- */

.site-footer{
  background: var(--footer-bg);
  border-top:1px solid var(--hairline);
  padding-top: var(--s7);
  margin-top: var(--s6);
}
.footer-cols{
  display:grid; gap: var(--s5);
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding-bottom: var(--s6);
}
@media (max-width:900px){ .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .footer-cols{ grid-template-columns:1fr; } }
.footer-cols h4{
  font-family: var(--font-body); font-size:.75rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color: var(--text-faint);
  margin-bottom: var(--s3);
}
.footer-cols li{ margin-bottom:2px; }
/* Streg under alt, der kan klikkes. Farve alene må ikke bære betydningen
   (WCAG 1.4.1) — og i foden lå brødteksten og linkene i næsten samme farve,
   så man ikke kunne se, hvad der var hvad. Stregen er tynd og dæmpet, så
   den viser sig selv uden at larme, og bliver tydelig, når man rører den. */
.footer-cols a{
  color: var(--text-muted);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  display:inline-flex; align-items:center; min-height:38px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.footer-cols a:hover{ color: var(--accent-ink); text-decoration-color: currentColor; }
.footer-cols p{ font-size:.9375rem; }

/* Ordmærket i footeren er logoet i stor størrelse, ikke et baggrundsmønster.
   Det følger derfor samme opbygning som logoet i toppen: cremefarvet skrift
   og en massiv grøn prik på skriftlinjen. */
/* Ordmærket i footeren er præcis samme fil som logoet i toppen, bare stort.
   Bredden holdes under filens egen opløsning, så det ikke bliver udtværet. */
.wordmark{
  margin:0; padding-bottom: var(--s4);
  border-bottom:1px solid var(--hairline);
  user-select:none;
}
/* Fodens ordmærke går fra kant til kant som et vandmærke. Det er ikke
   navigation og ikke tekst — det er aria-hidden — så det må godt være
   stort og svagt. 50 % gør, at det ligger bag indholdet i stedet for at
   konkurrere med det. */
.wordmark{
  opacity:.5;
  /* Bryder ud af containerens sidemargen, så mærket går helt ud til
     skærmkanten. 50vw ud til hver side fra midten, minus halvdelen af
     containerens egen bredde — det virker uanset hvor bred skærmen er. */
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width:none;
}
.wordmark .logo-mark{ width:100%; max-width:none; }
/* Ringen om prikken er sat i procent af logoets bredde, så den følger
   størrelsen. På et mærke, der er 2000 px bredt, blev den 112 px og
   voksede til 381 — en pulserende cirkel på størrelse med et bogstav.
   I foden får den en fast, beskeden størrelse i stedet. */
.wordmark .logo-mark::after{
  width:22px; height:22px; aspect-ratio:auto;
  border-width:2px;
}
.wordmark .logo-svg{ width:100%; height:auto; display:block; }
.wordmark img{
  display:block;
  width:100%; height:auto;
}

.footer-bottom{
  display:flex; flex-wrap:wrap; gap: var(--s3);
  align-items:center; justify-content:space-between;
  padding-block: var(--s3) var(--s5);
  font-size:.8125rem; color: var(--text-faint);
}
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap: var(--s3); }
/* Samme sag som spalterne ovenfor: de fire links står lige ved siden af
   CVR-linjen i samme farve, og uden streg kan man ikke se forskel. */
.footer-bottom a{
  min-height:44px; display:inline-flex; align-items:center;
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.footer-bottom a:hover{ color: var(--accent-ink); text-decoration-color: currentColor; }

/* --- "Se alle forsikringer" ---------------------------------------------
   Resten af produktlisten, foldet sammen. <details> er åben i HTML'en, så
   den, der har JavaScript slået fra, får hele listen som før. main.js
   klapper den sammen på små skærme og lader den stå åben fra 900 px, hvor
   den lange liste ikke er noget problem. */
.alle-prod > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:12px 22px;
  font-family: var(--font-head); font-weight:700; font-size:.9375rem;
  border:1.5px solid var(--kontrol-kant); border-radius: var(--r-md);
  color: var(--text);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.alle-prod > summary::-webkit-details-marker{ display:none; }
.alle-prod > summary::after{
  content:""; width:9px; height:9px; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  rotate:45deg; margin-top:-4px; transition: rotate var(--t-fast);
}
.alle-prod[open] > summary::after{ rotate:225deg; margin-top:3px; }
.alle-prod > summary:hover{
  border-color: var(--brand-green);
  background: color-mix(in oklab, var(--brand-green) 6%, transparent);
}
.alle-prod > summary:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand-green) 45%, transparent);
  outline-offset:2px;
}
.alle-prod-skjul{ display:none; }
.alle-prod[open] .alle-prod-vis{ display:none; }
.alle-prod[open] .alle-prod-skjul{ display:inline; }
.alle-prod-krop{ padding-top: var(--s4); }
/* Fra 900 px står listen åben, og så er knappen unødig støj — der er
   ingenting at folde ud. */
@media (min-width:900px){
  .alle-prod > summary{ display:none; }
  .alle-prod-krop{ padding-top:0; }
}

/* --- Reduceret bevægelse ------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-card{ animation:none; }
  .btn:active{ transform:none; }
  /* Prikken står stille og lyser fuldt. Ringen udenom forsvinder helt —
     den er selve bevægelsen, og uden bevægelse er den bare en tom cirkel.
     Selektorerne pegede før på .live-spanet, som forsvandt, da logoet
     blev til ægte vektor. */
  .logo-svg .prik, .live-dot{ animation:none; opacity:1; }
  .logo-mark::after, .live-dot::after{ animation:none; opacity:0; }
}

/* ==========================================================================
   Juridiske sider: lange tekster, der skal kunne læses
   ========================================================================== */

.prose{ max-width:70ch; }
.prose h2{
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-top: var(--s6); margin-bottom: var(--s2);
  scroll-margin-top:96px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.0625rem; margin-top: var(--s4); margin-bottom: var(--s1); }
.prose p{ margin-bottom: var(--s2); }
.prose ul{ margin:0 0 var(--s3); padding-left: var(--s3); list-style:disc; }
.prose ul li{ color: var(--text-muted); margin-bottom:6px; }
.prose ul li::marker{ color: var(--accent-ink); }
.prose a{ color: var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }
.prose dl{ margin:0; }
.prose dt{ font-weight:600; color: var(--text); margin-top: var(--s2); }
.prose dd{ margin:0; color: var(--text-muted); }

/* ==========================================================================
   Produktsidens sektioner
   Siden er bygget af sektioner i fuld bredde og ikke af én lang tekstspalte.
   Alle får samme lodrette rytme, så overgangene mellem dem er ens hele vejen
   ned. 64 og ikke de 96, sektioner ellers bruger: der er flere sektioner nu,
   og med 96 i begge ender bliver der 192 px luft mellem hver — mere end der
   skal til for at vise, at noget nyt begynder.
   ========================================================================== */
.fordel-sektion,
.intro-sektion,
.daek-sektion,
.prose-sektion,
.faq-sektion,
.cta-sektion,
.relateret-sektion{ padding-block: var(--s5); }

/* Overskriften må ikke brække, så der står ét ord på anden linje. balance
   fordeler ordene på linjerne i stedet for at fylde den første helt op. */
.section-head h2{ text-wrap:balance; }

/* --- Fordelsbånd -------------------------------------------------------- */
.fordel-grid{
  display:grid; gap: var(--s3);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:900px){ .fordel-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .fordel-grid{ grid-template-columns:minmax(0,1fr); } }
.fordel{
  padding: var(--s3) var(--s4) var(--s4);
  border:1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  /* Den grønne streg foroven er det eneste, der adskiller kortene fra sidens
     øvrige felter. Den er 2 px og ikke en hel ramme: seks kort med grøn kant
     hele vejen rundt ville tage mere opmærksomhed end teksten i dem. */
  border-top:2px solid var(--accent-ink);
}
.fordel h3{
  font-size:1.0625rem; letter-spacing:-.01em;
  margin: var(--s2) 0 6px;
}
.fordel p{ font-size:.9375rem; color: var(--text-muted); margin:0; }

/* --- Indledning --------------------------------------------------------- */
.intro-tekst{ max-width:62ch; }
.intro-tekst p{
  font-size:1.125rem; line-height:1.6;
  color: var(--text-muted); margin-bottom: var(--s2);
}
.intro-tekst p:last-child{ margin-bottom:0; }
@media (max-width:640px){ .intro-tekst p{ font-size:1.0625rem; } }

/* --- Ring op-feltet ------------------------------------------------------
   Landekode og nummer står i én ramme, knappen ved siden af. De to skal have
   samme højde — er de et par pixel fra hinanden, ser rækken skæv ud, og det
   er præcis den slags, der får en formular til at virke hjemmelavet. */
.ringop{ margin-top: var(--s3); max-width:480px; }
.ringop-felt{ display:flex; gap: var(--s2); align-items:stretch; }
.ringop-gruppe{
  display:flex; align-items:stretch;
  flex:1 1 220px; min-width:0;
  background: var(--flade-1);
  border:1px solid var(--kontrol-kant);
  border-radius: var(--r-md);
  /* Ingen overflow:hidden her. Den klippede de runde hjørner pænt til, men
     landelisten hænger ud af gruppen — og den blev klippet væk sammen med
     hjørnerne. Knappen runder sine egne to hjørner i stedet. */
}
/* Rammen lyser op om hele gruppen, ikke kun om selve input-feltet — ellers
   ser flaget ud til at høre til noget andet, når man skriver. */
.ringop-gruppe:focus-within{
  border-color: var(--accent-ink);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent-ink) 22%, transparent);
}
.ringop-land{ position:relative; display:flex; }
/* Knappen skal se ud som en del af rammen, ikke som en knap oven i den. */
.ringop-knap{
  display:flex; align-items:center; gap:8px;
  padding:0 10px 0 12px; height:100%;
  border:0; border-right:1px solid var(--hairline);
  border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);
  background: var(--flade-2);
  font:inherit; cursor:pointer;
  transition: background-color var(--t-fast);
}
.ringop-knap:hover{ background: var(--flade-3); }
.ringop-knap:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:-3px; }
.ringop-kode{ font-size:.9375rem; font-weight:600; color: var(--text); }
.ringop-flag{ font-size:1.125rem; line-height:1; }
.ringop-pil{
  width:0; height:0; margin-left:2px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--text-muted);
  transition: rotate var(--t-fast);
}
.ringop-knap[aria-expanded="true"] .ringop-pil{ rotate:180deg; }

/* Listen hænger under feltet og ruller, hvis den er længere end skærmen
   tåler. z-index over genvejslinjen (40), ellers forsvinder den ind under
   den, så snart siden er rullet lidt ned. */
/* fixed og ikke absolute: heroen har overflow:hidden for at holde på
   billedet, og en liste, der hænger ud under feltet, blev klippet af ved
   heroens underkant. Med fixed ligger den uden for al beskæring, og
   placeringen sættes i main.js, når den åbnes. */
.ringop-liste{
  position:fixed; z-index:60;
  margin:0; padding:6px; list-style:none;
  min-width:290px; max-height:320px; overflow-y:auto;
  /* Uden contain ruller siden bagved videre, når listen når sin ende. */
  overscroll-behavior: contain;
  background: var(--flade-1);
  border:1px solid var(--card-border-strong);
  border-radius: var(--r-md);
  box-shadow:0 12px 28px color-mix(in oklab, var(--tint) 18%, transparent);
}
.ringop-liste[hidden]{ display:none; }
/* min-height 44: punktet var ca. 40 px højt, og et berøringsmål skal kunne
   rammes med en tommelfinger. */
.ringop-punkt{
  display:flex; align-items:center; gap:10px;
  min-height:44px;
  padding:9px 10px;
  border-radius: var(--r-sm);
  cursor:pointer;
  font-size:.9375rem;
}
/* Baggrundsskiftet alene er 1,21:1 mod listens bund — det er en stemning,
   ikke en markering, og WCAG 2.4.11 kræver 3:1. Musen må gerne nøjes med
   fladen; tastaturet skal have en streg, man kan se. */
.ringop-punkt:hover,
.ringop-punkt.markeret{ background: var(--flade-3); }
.ringop-punkt:focus{ outline:none; }
.ringop-punkt:focus-visible,
.ringop-punkt.markeret{
  background: var(--flade-3);
  outline:2px solid var(--accent-ink); outline-offset:-2px;
}
.ringop-navn{ flex:1 1 auto; color: var(--text); }
.ringop-nr{ color: var(--text-faint); font-variant-numeric:tabular-nums; }
/* Det valgte land står med husets grønne og en smule fed, så det kan ses
   uden at være markeret af musen. */
.ringop-punkt[aria-selected="true"] .ringop-navn,
.ringop-punkt[aria-selected="true"] .ringop-nr{
  color: var(--accent-ink); font-weight:600;
}
@media (max-width:520px){
  .ringop-liste{ min-width:min(290px, calc(100vw - 48px)); }
}
.ringop-felt input{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent;
  padding:13px 12px;
  font:inherit; font-size:1rem; color: var(--text);
}
.ringop-felt input::placeholder{ color: var(--text-faint); }
/* outline:none er med vilje og er ikke en manglende markering: hele
   gruppen lyser op via .ringop-gruppe:focus-within ovenfor, med en 3 px
   ring om flag, kode og felt tilsammen. En ring om feltet alene ville
   skære gruppen midt over. Fjernes focus-within, skal den her også væk. */
.ringop-felt input:focus{ outline:none; }
.ringop-felt .btn{ flex:0 0 auto; border-radius: var(--r-md); padding-inline: var(--s4); }
/* Underlinjen står midt under feltet som i forlægget — den hører til hele
   boksen og ikke til nummerfeltet alene. */
.ringop-under{
  margin: var(--s2) 0 0;
  text-align:center;
  font-size:.9375rem; color: var(--text-muted);
}
.ringop-under a{ color: var(--accent-ink); font-weight:600; text-underline-offset:3px; }
@media (max-width:520px){
  .ringop-felt{ flex-wrap:wrap; }
  .ringop-gruppe{ flex:1 1 100%; }
  .ringop-felt .btn{ flex:1 1 100%; }
}

/* --- Genvejslinje -------------------------------------------------------
   Sidder fast under headeren og viser, hvor på siden man er. Højden på
   headeren måles i main.js og lægges i --header-h; den er ikke ens på
   telefon og skærm, og et gættet tal ville lade linjen dække overskriften
   på den ene af dem. */
.sidenav{
  position:sticky; top: var(--header-h, 117px); z-index:40;
  padding-block: var(--s2);
  background: color-mix(in oklab, var(--page) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom:1px solid var(--hairline);
}
.sidenav-spor{
  display:flex; gap:4px;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  /* På en telefon er der ikke plads til fire punkter. De ruller i stedet
     for at brække om på to linjer — linjen skal have samme højde hele
     vejen ned, ellers hopper indholdet, når den bliver klæbende. */
  overflow-x:auto; scrollbar-width:none;
}
.sidenav-spor::-webkit-scrollbar{ display:none; }
.sidenav-spor a{
  flex:0 0 auto;
  padding:15px 0;
  margin-right: var(--s5);
  border-bottom:2px solid transparent;
  font-size:.9375rem; font-weight:600;
  color: var(--text-muted); text-decoration:none;
  white-space:nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.sidenav-spor a:hover{ color: var(--text); }
/* Understregning frem for en hvid pille. Pillen var endnu en afrundet
   flade i en side, der har for mange af dem — stregen siger det samme
   med to pixels. */
.sidenav-spor a.aktiv{
  color: var(--text);
  font-weight:700;
  border-bottom-color: var(--accent-ink);
}
/* Ankeret må ikke lande under headeren og genvejslinjen. */
.daek-sektion, .faq-sektion, .vilkaar-sektion, .cta-sektion{
  scroll-margin-top: var(--anker-top, 190px);
}
@media (max-width:640px){
  .sidenav{ padding-block:10px; }
  .sidenav-spor a{ padding:8px 14px; font-size:.875rem; }
}

/* --- Dækninger ---------------------------------------------------------- */
.daek-layout{
  display:grid; gap: var(--s5) var(--s6);
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  align-items:start;
}
@media (max-width:900px){ .daek-layout{ grid-template-columns:minmax(0,1fr); } }
.daek-intro{ position:sticky; top: var(--anker-top, 190px); }
@media (max-width:900px){ .daek-intro{ position:static; } }
.daek-intro .section-head{ margin-bottom: var(--s3); }
.daek-intro p{ color: var(--text-muted); margin-bottom: var(--s2); max-width:46ch; }
.daek-intro p:last-child{ margin-bottom:0; }

.daek-gruppe + .daek-gruppe{ margin-top: var(--s5); }
.daek-gruppenavn{
  font-size:.8125rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--accent-ink);
  margin:0 0 2px;
}
.daek-gruppetekst{
  font-size:.875rem; color: var(--text-faint);
  margin:0 0 var(--s2);
}

/* Én dækning. Rækken er hele klikfeltet, ikke kun plusset. */
.daek-raekke{ border-top:1px solid var(--hairline); }
.daek-gruppe .daek-raekke:last-child{ border-bottom:1px solid var(--hairline); }
.daek-raekke summary{
  display:flex; align-items:center;
  gap: var(--s2);
  padding: var(--s3) 0;
  min-height:60px;
  cursor:pointer; list-style:none;
}
/* Navnet tager pladsen i midten, så mærket til højre står samme sted i alle
   rækker — uanset hvor langt dækningens navn er. */
.daek-navn{ flex:1 1 auto; }

/* Grønt flueben: dækningen er med i forvejen. Det sidder, hvor tilvalgene
   har deres plus, og fylder det samme — ellers ville de to slags rækker
   have hver sin højre kant.
   Cirklen er den dybe grøn og hakket hvidt. Den lyse brandgrøn kan ikke
   bruges her: hvidt på den ligger under kontrastkravet, og reglen i toppen
   af filen gælder også for et mærke på 34 px.
   Fluebenet skifter ikke udseende, når rækken åbnes. Det er en oplysning om
   dækningen — ikke en knap, der slår noget til og fra. */
.daek-med{
  flex:0 0 34px; width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:50%;
  background: var(--accent-ink);
  color:#fff;
  transition: transform var(--t-fast);
}
.daek-med svg{ width:17px; height:17px; }
.daek-raekke summary:hover .daek-med{ transform: scale(1.08); }
.daek-raekke summary::-webkit-details-marker{ display:none; }
.daek-raekke summary:focus-visible{
  outline:3px solid var(--accent-ink); outline-offset:2px; border-radius: var(--r-sm);
}
.daek-navn{
  font-family: var(--font-head); font-weight:700;
  font-size:1.0625rem; letter-spacing:-.01em;
  color: var(--text);
}
.daek-raekke summary:hover .daek-navn{ color: var(--accent-ink); }
/* Plusset er to streger. Åben bliver de til et kryds ved at dreje 45 grader
   hver sin vej — samme tegn, ikke et nyt ikon, så bevægelsen forklarer at
   det er den samme knap. */
.daek-tegn{
  position:relative; flex:0 0 34px;
  width:34px; height:34px; border-radius:50%;
  background: var(--flade-3);
  transition: background-color var(--t-fast);
}
.daek-raekke summary:hover .daek-tegn{ background: var(--card-border-strong); }
.daek-tegn::before, .daek-tegn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:13px; height:2px; border-radius:1px;
  background: var(--accent-ink);
  translate:-50% -50%;
  transition: rotate var(--t-med);
}
.daek-tegn::after{ rotate:90deg; }
.daek-raekke[open] .daek-tegn::before{ rotate:45deg; }
.daek-raekke[open] .daek-tegn::after{ rotate:135deg; }

.daek-krop{ overflow:hidden; }
.daek-krop p{
  margin:0 0 var(--s3);
  max-width:58ch;
  font-size:.9375rem; line-height:1.6;
  color: var(--text-muted);
}

/* --- Betingelser -------------------------------------------------------- */
.vilkaar-grid{
  display:grid; gap: var(--s2);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:820px){ .vilkaar-grid{ grid-template-columns:minmax(0,1fr); } }
.vilkaar{
  position:relative;
  display:grid; gap:4px;
  padding: var(--s3) var(--s5) var(--s3) var(--s3);
  border:1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  text-decoration:none;
  transition: border-color var(--t-fast), background-color var(--t-fast),
              transform var(--t-fast);
}
.vilkaar:hover{
  border-color: var(--card-border-strong);
  background: var(--card-bg-2);
  transform: translateY(-2px);
}
.vilkaar-navn{
  font-family: var(--font-head); font-weight:700;
  font-size:1rem; color: var(--text);
}
.vilkaar-tekst{ font-size:.875rem; line-height:1.5; color: var(--text-muted); }
.vilkaar-pil{
  position:absolute; right: var(--s3); top: var(--s3);
  color: var(--accent-ink); font-size:1.125rem;
  transition: translate var(--t-fast);
}
.vilkaar:hover .vilkaar-pil{ translate:3px 0; }
.vilkaar-sektion .form-note{ margin: var(--s4) 0 0; max-width:80ch; font-size:.8125rem; }

/* --- FAQ i to spalter ---------------------------------------------------- */
/* Overskriften stod før i en smal, midterstillet spalte og begyndte 289 px
   længere inde end alt andet på siden. Nu står den i venstre spalte på samme
   venstre kant som resten, og listen fylder resten af bredden. Den følger med
   ned, mens man åbner spørgsmål, så man kan se hvad man er i gang med. */
.faq-sektion .container{
  display:grid; gap: var(--s5) var(--s6);
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  align-items:start;
}
.faq-sektion .section-head{
  position:sticky; top: var(--s7);
  margin-bottom:0;
}
@media (max-width:900px){
  .faq-sektion .container{ grid-template-columns:minmax(0,1fr); }
  .faq-sektion .section-head{ position:static; max-width:none; }
}

/* --- Ansvarslinje ------------------------------------------------------- */
/* Står nederst, efter alt andet. Den skal kunne findes, ikke læses først. */
.ansvar-sektion{ padding-block: 0 var(--s6); }
.ansvar-sektion .form-note{
  max-width:80ch; margin:0;
  padding-top: var(--s3);
  border-top:1px solid var(--hairline);
  font-size:.8125rem;
}

/* Fremhævet sidebemærkning i brødteksten.
   Den leverede tekst havde sin egen grønne (#0f3d3e) og sin egen kant. Begge
   dele er skiftet til husets egne værdier — en fremmed grøn på siden ville
   læses som en fejl og ikke som en fremhævelse. Kanten sidder til venstre og
   ikke hele vejen rundt: boksen er en tilføjelse til teksten, ikke et kort
   for sig. Klassenavnet beholder hf- fra den oprindelige leverance. */
.hf-callout{
  background: var(--flade-2);
  border-left:3px solid var(--accent-ink);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s3) var(--s4);
  /* Kun luft over. Under boksen kommer altid en overskrift, og den har sin
     egen margin-top — lagde vi en til her, fik netop det ene sted i teksten
     en større afstand end alle de andre. */
  margin: var(--s4) 0 0;
}
.hf-callout h3{ margin-top:0; color: var(--accent-ink); }
.hf-callout p:last-child{ margin-bottom:0; }

/* Indholdsfortegnelse ved siden af teksten */
.doc{ display:grid; gap: var(--s6); grid-template-columns: 240px minmax(0,1fr); align-items:start; }
.doc-nav{ position:sticky; top:96px; }
.doc-nav h4,.doc-nav .doc-nav-titel{
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--text-faint); margin-bottom: var(--s2);
}
.doc-nav ol{ list-style:none; margin:0; padding:0; counter-reset:d; }
.doc-nav li{ counter-increment:d; }
.doc-nav a{
  display:flex; gap:10px; align-items:baseline;
  padding:7px 0; font-size:.875rem; color: var(--text-muted);
  text-decoration:none; border-bottom:1px solid var(--hairline);
}
.doc-nav a::before{
  content:counter(d,decimal-leading-zero);
  font-size:.6875rem; color: var(--accent-ink); flex:0 0 auto;
}
.doc-nav a:hover{ color: var(--text); }
@media (max-width:900px){
  .doc{ grid-template-columns:1fr; gap: var(--s5); }
  .doc-nav{ position:static; }
}

.doc-meta{
  border:1px solid var(--card-border); border-radius: var(--r-md);
  padding: var(--s3); margin-bottom: var(--s5);
  font-size:.875rem;
}
.doc-meta dt{ font-weight:600; }

/* ==========================================================================
   Cookiesamtykke
   ========================================================================== */

/* Banneret sidder fast i bunden. På en iPhone ligger hjemlinjen dér, og
   uden safe-area kommer knapperne til at ligge under den. */
.cookie{
  position:fixed; z-index:150;
  inset:auto var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)) var(--s3);
  overscroll-behavior: contain;
  max-width:640px; margin-inline:auto;
  background: var(--page);
  border:1px solid var(--card-border-strong);
  border-radius: var(--r-lg);
  padding: var(--s4);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.55);
  /* Med kategorierne fremme blev banneret 797 px højt. På en telefon med
     667 px skærm betød det, at overskriften lå OVER kanten og ikke kunne
     ses. Nu er højden bundet til skærmen, og det er kun kategorilisten,
     der ruller — overskrift og knapper bliver stående, så man altid kan
     se, hvad man svarer på, og hvordan man svarer. */
  display:flex; flex-direction:column;
  max-height: min(86dvh, 760px);
}
.cookie > h2, .cookie > p, .cookie > .btn-group, .cookie-fortryd{ flex:none; }
.cookie[hidden]{ display:none; }
.cookie h2{ font-size:1.125rem; margin-bottom: var(--s1); }
.cookie p{ font-size:.9375rem; margin-bottom: var(--s3); }
.cookie .btn-group{ gap:10px; }
.cookie .btn{ min-height:44px; padding:10px 20px; font-size:.875rem; }
.cookie-valg{
  display:grid; gap: var(--s2);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  margin-top: var(--s3); padding: var(--s3) 0;
  /* min-height:0 er det, der får en flex-boks til rent faktisk at kunne
     krympe og rulle i stedet for at presse resten ud over kanten. */
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
.cookie-valg[hidden]{ display:none; }
.cookie-valg label{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  font-size:.875rem; cursor:pointer;
}
.cookie-valg input{ width:20px; height:20px; margin-top:2px; accent-color: var(--brand-green); }
.cookie-valg span{ color: var(--text-muted); }
.cookie-valg strong{ display:block; }
/* Tre ligeværdige valg. Ingen af dem er en fyldt knap, der trækker i
   øjet — samtykke skal gives frit, og et design, hvor "ja" larmer og
   "nej" hvisker, er ikke et frit valg. Samme ramme, samme vægt, samme
   størrelse. */
.cookie-knapper{ margin-top: var(--s3); gap:10px; }
.btn-valg{
  background:transparent; color: var(--text);
  border:1.5px solid var(--kontrol-kant);
  font-weight:600;
}
.btn-valg:hover{
  border-color: var(--accent-ink); color: var(--accent-ink);
  background: color-mix(in oklab, var(--brand-green) 7%, transparent);
}
.cookie-fortryd{
  margin: var(--s3) 0 0; font-size:.8125rem; color: var(--text-faint);
}
.cookie-fortryd a{ color: inherit; }
.cookie-valg{ margin-top: var(--s3); }
@media (max-width:560px){
  .cookie{ inset:auto 0 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  /* På en telefon står de tre under hinanden, så ingen af dem bliver
     smallere end de andre og dermed sværere at ramme. */
  .cookie .btn{ flex:1 1 100%; }
  .cookie-knapper{ flex-direction:column; }
}

/* ==========================================================================
   Flisegitter — store, aflæselige ikoner
   Ikonet er 56px i et kvadratisk felt, ikke 22px ved siden af en tekst.
   Tegnet i 32-koordinatsystem med tynd streg, så der er plads til detaljer.
   ========================================================================== */

.flise-grid{
  display:grid; gap: var(--s2);
  grid-template-columns:repeat(6, minmax(0,1fr));
}
@media (max-width:1100px){ .flise-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:760px){  .flise-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:460px){  .flise-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

.flise{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--s2);
  aspect-ratio:1;
  padding: var(--s3) 10px;
  text-align:center;
  text-decoration:none;
  border:1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  transition: border-color var(--t-fast), background-color var(--t-fast),
              transform var(--t-fast);
}
.flise:hover{
  border-color: var(--card-border-strong);
  background: var(--card-bg-2);
  transform: translateY(-2px);
}
.flise svg{
  width:86px; height:86px;
  color: var(--accent-ink);
  stroke-width:1.4;
  flex:0 0 auto;
}
.flise span{
  font-size:.875rem; font-weight:600; line-height:1.25;
  color: var(--text);
  text-wrap:balance;
}
@media (max-width:760px){
  .flise svg{ width:67px; height:67px; }
  .flise span{ font-size:.8125rem; }
}

/* --- Produktrækker -------------------------------------------------------
   Afløser de kvadratiske fliser i produktoversigterne. Ikonet er det samme
   som før — kun mindre og flyttet til venstre, så navnet kan få en linje med
   om, hvad forsikringen faktisk gør. Højden falder til omtrent det halve.
   Fliserne findes stadig; de bruges nu kun til de navigationsgitre, hvor
   navnet står alene (hjælpeemner, skadetyper, forebyggelse). */
/* Kategorierne på produktoversigten løb sammen: overskriften "Bil og
   Transport" stod 0 px under sidste række i gruppen ovenfor, så de seks
   grupper lignede én lang liste med tilfældige mellemrubrikker. Luft over
   overskriften adskiller dem — og den skal ikke stå over den FØRSTE, som
   allerede har luft fra afsnittet ovenover. */
.prk-liste + h2{ margin-top: var(--s6); }

.prk-liste{ border-top:1px solid var(--hairline); }
.prk{
  display:flex; align-items:center; gap: var(--s3);
  padding:14px 4px;
  border-bottom:1px solid var(--hairline);
  text-decoration:none; color: var(--text);
  transition: background-color var(--t-fast), padding-left var(--t-fast);
}
.prk:hover{ background: color-mix(in oklab, var(--tint) 4%, transparent); padding-left:10px; }
.prk-ikon{
  flex:0 0 38px; width:38px; height:38px;
  display:grid; place-items:center;
  border:1px solid var(--card-border);
  border-radius: var(--r-md);
  background: var(--flade-1);
  color: var(--accent-ink);
}
.prk-ikon svg{ width:21px; height:21px; stroke-width:1.5; }
.prk-tekst{ flex:1 1 auto; min-width:0; }
.prk-navn{
  display:block;
  font-family: var(--font-head); font-weight:700;
  font-size:1.0625rem; letter-spacing:-.015em;
  color: var(--text);
}
.prk-om{ display:block; font-size:.9375rem; color: var(--text-muted); }
.prk-pil{ flex:0 0 auto; color: var(--text-faint); font-family: var(--font-head); }
.prk:hover .prk-navn{ color: var(--accent-ink); }
.prk:hover .prk-pil{ color: var(--accent-ink); }
@media (max-width:560px){
  .prk-ikon{ flex-basis:32px; width:32px; height:32px; }
  .prk-ikon svg{ width:18px; height:18px; }
  .prk-navn{ font-size:1rem; }
}

/* ---------- Ikonfarve -----------------------------------------------------
   Ét ikonudtryk, én farve. Der var før en farve pr. kategori, og det gav
   brune, blå, lilla og røde toner side om side på samme skærm. Farven bar
   ingen information — navnet står under ikonet alligevel — så den kostede
   kun ro. Nu er ikonet husets dybgrønne overalt, og størrelsen gør arbejdet.

   Grøn er stadig delt op: signalprikken og primære knapper bruger den lyse
   brandgrøn, ikonerne den mørke. De to skal ikke kunne forveksles.        */
.flise svg,
.icon-tile:not(.solid) svg,
.produkt-ikon{ color: var(--accent-ink); }

/* Produktkortenes fliser bliver også større */
.icon-tile{ width:64px; height:64px; flex-basis:64px; }
.icon-tile svg{ width:43px; height:43px; }
.hero-card .icon-tile{ width:44px; height:44px; flex-basis:44px; }
.hero-card .icon-tile svg{ width:26px; height:26px; }
.login-wrap .icon-tile{ width:68px; height:68px; flex-basis:68px; }
.login-wrap .icon-tile svg{ width:41px; height:41px; }

/* ==========================================================================
   Footeren er sidens eneste mørke flade og vender derfor tokens om
   ========================================================================== */
.site-footer{
  --tint:        var(--brand-cream);
  /* På blæk er accenten lys, ikke grøn: den dybe grøn måler 2.65:1 mod
     blæk. Knappen vender simpelthen om — samme knap, modsat vej. */
  --accent-ink:  var(--brand-cream);
  --primaer:     var(--papir);
  --paa-primaer: var(--brand-ink);
  --text:        var(--brand-cream);
  --text-muted:  color-mix(in oklab, var(--brand-cream) 74%, var(--brand-ink));
  --text-faint:  color-mix(in oklab, var(--brand-cream) 68%, var(--brand-ink));
  --hairline:    color-mix(in oklab, var(--brand-cream) 10%, transparent);
  --kontrol-kant: color-mix(in oklab, var(--brand-cream) 45%, transparent);
  background: var(--brand-ink);
  border-top:0;
  /* Uden den her arver overskrifterne blækfarven fra body — og et h3 i
     blæk på en blækfarvet fod er usynligt. At vende --text om er ikke
     nok: color er allerede regnet ud længere oppe og arves ned. */
  color: var(--text);
}

/* Filmkorn og glød hørte til den mørke tilstand */
.grain, .glow{ display:none; }

/* Formularfelter får hvid bund på papiret */
.field input, .field select, .field textarea{ background:#FFFFFF; }
.field select option{ background:#FFFFFF; color: var(--brand-ink); }

/* ==========================================================================
   Universer: Privat og Erhverv
   To adskilte sider, der deler design og kode. Fanen øverst er ikke et
   filter — den skifter hele sitet. Derfor ligger den over logoet, ikke
   nede i navigationen: den er et valg om, hvem du er, ikke hvor du vil hen.
   ========================================================================== */

.univers-bar{
  background: var(--flade-3);
  border-bottom:1px solid var(--hairline);
}
/* Fanerne står i midten. Tre spalter og ikke space-between: med to
   elementer ville fanerne blive skubbet ud af midten af telefonnummerets
   bredde. Den tomme første spalte holder dem præcis midt på skærmen,
   uanset hvor langt nummeret er. */
.univers-inner{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap: var(--s3); min-height:44px;
}
.univers-faner{ grid-column:2; }
.univers-tlf{ grid-column:3; justify-self:end; }

/* På smalle skærme er der ikke plads til begge dele på én linje. Så ryger
   nummeret ud — det står i forvejen i foden og på hver kontaktside. */
@media (max-width:560px){
  .univers-inner{ grid-template-columns:1fr; justify-items:center; }
  .univers-faner{ grid-column:1; }
  .univers-tlf{ display:none; }
}
.univers-faner{ display:flex; gap:2px; }
.univers-faner a{
  font-family: var(--font-head);
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 var(--s3);
  /* Mindre og lettere end hovedmenuen under: topbjælken er sekundær og
     må ikke dominere. Hovedmenuen er .9375rem/500 — den her ligger under. */
  font-size:.8125rem; font-weight:500;
  color: var(--text-muted); text-decoration:none;
  border-bottom:3px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.univers-faner a:hover{ color: var(--text); background: var(--flade-2); }
.univers-faner a[aria-current="true"]{
  color: var(--text);
  background: var(--page);
  border-bottom-color: var(--accent-ink);
}
.univers-tlf{
  font-size:.8125rem; font-weight:600; color: var(--text-muted);
  text-decoration:none; min-height:44px; display:inline-flex; align-items:center;
}
.univers-tlf:hover{ color: var(--accent-ink); }
@media (max-width:560px){
  .univers-tlf{ display:none; }
  .univers-faner{ width:100%; }
  .univers-faner a{ flex:1; justify-content:center; }
}

/* --- Brødkrumme --------------------------------------------------------- */

.brodkrumme{
  border-bottom:1px solid var(--hairline);
  background: var(--page);
}
.brodkrumme ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
  font-size:.8125rem;
}
.brodkrumme li{ display:flex; align-items:center; }
.brodkrumme li + li::before{
  content:""; width:5px; height:5px; margin:0 10px;
  border-top:1.5px solid var(--text-faint);
  border-right:1.5px solid var(--text-faint);
  rotate:45deg;
}
.brodkrumme a{
  color: var(--text-muted); text-decoration:none;
  min-height:40px; display:inline-flex; align-items:center;
}
.brodkrumme a:hover{ color: var(--accent-ink); text-decoration:underline; }
.brodkrumme [aria-current="page"]{ color: var(--text); font-weight:600; }

/* --- Produktsidens store ikon ------------------------------------------- */

.produkt-ikon{
  display:grid; place-items:center;
  width:min(240px, 60vw); aspect-ratio:1;
  border-radius: var(--r-lg);
  background: var(--flade-2);
  border:1px solid var(--card-border);
  color: var(--accent-ink);
}
.produkt-ikon svg{ width:72%; height:72%; stroke-width:1.2; }
@media (max-width:1024px){ .produkt-ikon{ width:180px; } }

/* Oversigtssidens kategorioverskrifter */
.container > h2[id]{ margin-top: var(--s6); margin-bottom: var(--s3); scroll-margin-top:120px; }
.container > h2[id]:first-child{ margin-top:0; }


/* ==========================================================================
   Artikelsider — tilbud, hjælp, skadeforløb, guides
   ========================================================================== */

/* En læsespalte. Brødtekst i fuld sidebredde bliver ulæselig: øjet mister
   linjen på vej tilbage. 68 tegn er der, hvor det holder op med at gøre ondt. */
.container.smal{ max-width: 74ch; }
.container.smal .lead{ max-width:none; }

/* FAQ'en på de nye sider genbruger .faq, men posterne står som kort, fordi
   de her sider ofte kun består af FAQ. Uden kant flyder de sammen. */
.faq-post{ border-bottom:1px solid var(--hairline); }
.faq-post > summary{
  cursor:pointer; list-style:none; padding: var(--s3) 44px var(--s3) 0;
  position:relative; font-weight:600; line-height:1.4;
}
.faq-post > summary::-webkit-details-marker{ display:none; }
.faq-post > summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink);
  rotate:45deg; transition: rotate var(--t-fast), margin-top var(--t-fast);
}
.faq-post[open] > summary::after{ rotate:225deg; margin-top:-2px; }
.faq-post > summary:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.faq-svar{ padding: 0 44px var(--s3) 0; }
.faq-svar p{ margin:0; font-size:.9375rem; color: var(--text-muted); }

/* Kortene med links videre i skadeforløbet */
.grid-3 .card h3{ margin-top:0; }
.grid-3 .card h3 a{ text-decoration:none; }
.grid-3 .card h3 a:hover{ text-decoration:underline; }

/* Nummererede trin. Klassen har været brugt siden de første produktsider,
   men aldrig haft CSS — tallet klistrede til teksten. */
.steps{ list-style:none; margin:0 0 var(--s3); padding:0; counter-reset:trin; }
.steps li{
  display:flex; gap:12px; align-items:flex-start;
  padding: 10px 0; font-size:.9375rem; line-height:1.5;
}
.steps li + li{ border-top:1px solid var(--hairline); }
.steps li > b{
  flex:0 0 24px; width:24px; height:24px; border-radius:50%;
  background: var(--accent-ink); color: var(--page);
  display:grid; place-items:center;
  font-size:.75rem; font-weight:700; margin-top:1px;
}


/* ==========================================================================
   Video og billedbånd
   ========================================================================== */

/* Selvhostet video. Ingen tredjepart, ingen cookies, ingen sporing af den,
   der ser med — det er dét, der gør cookiebanneret sandt. */
.video{ margin: var(--s5) 0; }

/* Filmene er leveret som et 16:9-klip lagt midt på en stående hvid flade.
   Rammen skæres væk her i stedet for at eksportere filerne om: billedet
   fylder 80,1 % af bredden og 32,1 % af højden, og dets midte sidder 47,6 %
   nede — ikke 50 %. Tallene er målt på et billede ud af hver film.

   100 / 0.801 = 124,8 % bredde, og så flyttes filmens egen midte op på
   rammens. Resten af den hvide flade ligger uden for og bliver klippet. */
.video-ramme{
  position:relative; overflow:hidden;
  aspect-ratio:16/9;
  border-radius: var(--r-lg);
  border:1px solid var(--card-border);
  background: var(--flade-3);
}
.video-ramme video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* Kun film, der er leveret som et 16:9-klip midt på en stående hvid flade.
   Billedet fylder da 80,1 % af bredden og 32,1 % af højden, og dets midte
   sidder 47,6 % nede — ikke 50 %. Målt på et billede ud af filmen. */
.video-ramme.beskaeret video{
  inset:auto; top:50%; left:50%;
  width:124.8%; height:auto;
  object-fit:fill;
  transform: translate(-50%, -47.6%);
}
/* Afspilningsknappen. Den ligger inde i rammen, fordi browserens egne
   knapper sidder i bunden af videoelementet — og elementet er højere end
   rammen, så de ville blive klippet væk sammen med den hvide kant. */
.video-knap{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer;
  background: color-mix(in oklab, var(--brand-ink) 22%, transparent);
  color:#fff; font:600 .9375rem/1 inherit;
  transition: background-color var(--t-fast);
}
.video-knap:hover{ background: color-mix(in oklab, var(--brand-ink) 34%, transparent); }
.video-knap:focus-visible{ outline:3px solid var(--brand-green); outline-offset:-3px; }
.video-ikon{
  width:56px; height:56px; border-radius:50%;
  background:#fff; flex:0 0 56px;
  display:grid; place-items:center;
}
/* Trekant og pausestreger tegnet med kanter — ingen ekstra filer */
.video-ikon::before{
  content:""; width:0; height:0; margin-left:4px;
  border-left:16px solid var(--brand-ink);
  border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.video-ramme.spiller .video-knap{ background:transparent; }
.video-ramme.spiller .video-knap:hover,
.video-ramme.spiller .video-knap:focus-visible{
  background: color-mix(in oklab, var(--brand-ink) 30%, transparent);
}
/* Når filmen kører, skal knappen ikke ligge og skygge for billedet */
.video-ramme.spiller .video-ikon,
.video-ramme.spiller .video-ord{ opacity:0; transition: opacity var(--t-fast); }
.video-ramme.spiller .video-knap:hover .video-ikon,
.video-ramme.spiller .video-knap:hover .video-ord,
.video-ramme.spiller .video-knap:focus-visible .video-ikon,
.video-ramme.spiller .video-knap:focus-visible .video-ord{ opacity:1; }
.video-ramme.spiller .video-ikon::before{
  border:0; width:14px; height:18px; margin-left:0;
  background: linear-gradient(to right,
    var(--brand-ink) 0 5px, transparent 5px 9px, var(--brand-ink) 9px 14px);
}
.video figcaption{
  margin-top: 10px; font-size:.875rem; color: var(--text-muted);
}
/* Afspilleren er browserens egen. Den er tastaturbetjent og kendt af
   skærmlæsere — en hjemmelavet knapperække ville skulle bygge alt det op igen. */
.video video:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:3px; }

/* Et billede, der ligger som bånd over et afsnit. Det skal give afsnittet
   et ansigt, ikke overtage siden — derfor lavere end et almindeligt 3:2. */
.photo.baand{ margin-bottom: var(--s4); aspect-ratio:3/1.5; }
@media (min-width:760px){  .photo.baand{ aspect-ratio:3/1.2; } }
@media (min-width:1100px){ .photo.baand{ aspect-ratio:3/0.95; } }


/* ==========================================================================
   Login
   ==========================================================================
   Siden står for sig selv uden menu og fod. Den, der er nået hertil, skal
   logge ind — alt andet ville trække vedkommende væk fra det ene, siden er
   til for. Derfor er der præcis én vej ud: knappen, eller "Til forsiden". */

.login-side{
  min-height:100dvh;
  display:grid; place-items:center;
  padding: var(--s5) var(--s3);
  position:relative;
}
.login-tilbage{
  position:absolute; top: var(--s4); left: var(--s4);
  display:inline-flex; align-items:center; gap:6px;
  font-size:.875rem; font-weight:600; text-decoration:none;
  color: var(--text-muted);
  padding: 8px 14px 8px 10px;
  border:1px solid var(--kontrol-kant); border-radius: var(--r-pill);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.login-tilbage svg{ width:16px; height:16px; }
.login-tilbage:hover{ color: var(--text); border-color: var(--accent-ink); }

.login-midte{ width:100%; max-width:400px; text-align:center; }

/* Ordmærket med den blinkende prik er sidens eneste billede. Det er også
   det eneste, der skal vise, hvis side man er havnet på — det er hele
   pointen med at have et mærke. */
.login-maerke{ margin:0 0 var(--s5); }
.login-maerke .logo-mark{ display:inline-block; width:190px; }
.login-maerke img{ width:100%; height:auto; display:block; }

.login-midte h1{ font-size:1.75rem; margin:0 0 10px; letter-spacing:-.02em; }
.login-midte .lead{ font-size:1rem; margin:0 0 var(--s4); }

.login-knap{
  width:100%; justify-content:center; gap:10px;
  margin-bottom: var(--s3);
}

.login-smaat{
  font-size:.8125rem; line-height:1.55; color: var(--text-faint);
  margin:0 0 10px;
}
.login-smaat a{ color: var(--text-muted); }

.login-hjaelp{
  margin: var(--s4) 0 0; padding-top: var(--s3);
  border-top:1px solid var(--hairline);
  font-size:.875rem; color: var(--text-muted);
}

@media (max-width:520px){
  .login-tilbage{ top: var(--s3); left: var(--s3); }
  .login-midte{ padding-top: var(--s5); }
}


/* ==========================================================================
   Heroen med stemningsfilm
   ==========================================================================
   Filmen fylder venstre halvdel helt ud til skærmkanten, teksten står til
   højre. Teksten ligger IKKE oven på filmen: den er lys — median 0,60 og
   op til 0,90 dér, hvor tekst ville stå — og cremefarvet tekst kræver 0,16
   eller mørkere for at nå 4,5:1. Det ville kræve et sort slør på 51 %, og
   så er der ingen film tilbage at se på. */

/* Hele heroen står på kalkfladen — den samme, fliserne og kortene har.
   Film og tekst kommer derved til at ligge på ét felt i stedet for at være
   to ting, der tilfældigvis står ved siden af hinanden. */
.hero.hero-film{
  padding:0; overflow:hidden;
  background: var(--card-bg);
  border-bottom:1px solid var(--hairline);
}
.hero-bred{
  display:grid; grid-template-columns:1fr 1fr;
  align-items:stretch; gap:0;
  max-width:none; margin:0; padding:0;
  /* Heroen har en fast højde, og filmen udfylder sin halvdel. Bandt man i
     stedet filmen til et billedformat, blev der dødt mellemrum ved siden
     af den, så snart skærmen fik en anden form. */
  min-height: min(80vh, 780px);
}
/* Produktsiderne bruger samme hero, men skal ikke være lige så høje. Forsiden
   må gerne fylde skærmen — man er lige landet og skal have et indtryk. På en
   produktside er man kommet efter et svar, og 780 px hero skubber hele teksten
   under kanten. 560 er nok til at billedet virker, og resten er indhold. */
.hero-film.hero-kompakt .hero-bred{ min-height: min(62vh, 560px); }
.hero-film .hero-film-ramme,
.hero-film .photo.hero-medie{
  position:relative;
  height:100%;
  background: var(--flade-3);   /* ses kun, mens filmen loader */
  overflow:hidden;
  /* Samme runding som sitets øvrige felter, så filmen hører til resten og
     ikke ser ud som et fremmedlegeme, der er klistret på. */
  border-radius: var(--r-lg);
  margin: var(--s4) var(--s4) var(--s4) 0;
}
@media (min-width:1400px){
  .hero-film .hero-film-ramme,
  .hero-film .photo.hero-medie{ margin-left: var(--s3); }
}
.hero-film-ramme video,
.hero-film .photo.hero-medie img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* iOS lægger sin egen afspilningsknap oven på filmen, når den nægter at
   starte den selv — det sker fx i strømsparetilstand. Filmen er ren
   dekoration og har ingen knapper, så en stor grå trekant midt i heroen
   er en fejl at se på. Uden den står plakaten som et almindeligt billede,
   hvilket er præcis, hvad den skal. */
.hero-film-ramme video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none;
}
.hero-film-ramme video::-webkit-media-controls{ display:none !important; }
/* Billedfeltet har normalt et fast billedformat. I heroen skal det i
   stedet fylde spalten ud, ligesom filmen gør. */
.hero-film .photo.hero-medie{ aspect-ratio:auto; }
/* Filmen står til venstre, teksten til højre. Rækkefølgen vendes i CSS og
   ikke i HTML: teksten skal læses først af en skærmlæser, og filmen er
   alligevel markeret som dekoration. */
.hero-film .hero-visual{ order:-1; }

/* Med medie-hoejre bytter de plads: tekst til venstre, billede til højre.
   Rækkefølgen i HTML er den samme — teksten står først og læses først. */
.hero-film.medie-hoejre .hero-visual{ order:0; }
.hero-film.medie-hoejre .hero-bred > div:first-child{
  padding-left: var(--s4); padding-right: var(--s4);
  margin-left:auto;
}
.hero-film .hero-bred > div:first-child{
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--s5) var(--s4);
  max-width:620px;
}
/* På en bred skærm får filmen lidt mere end halvdelen, og teksten lov at
   blive bredere. Ellers står der et stort tomt felt til højre for
   overskriften, og det er dét, der får siden til at se uafsluttet ud. */
@media (min-width:1500px){
  .hero-film .hero-bred{ grid-template-columns: 1.15fr 1fr; }
  .hero-film .hero-bred > div:first-child{
    padding-left: var(--s5); max-width:720px;
  }
  /* Spalterne skal vende med, ellers bliver billedet den smalle af de to */
  .hero-film.medie-hoejre .hero-bred{ grid-template-columns: 1fr 1.15fr; }
  .hero-film.medie-hoejre .hero-bred > div:first-child{
    padding-left: var(--s5); padding-right: var(--s5);
  }
}
@media (min-width:1900px){
  .hero-film .hero-bred > div:first-child{ max-width:820px; }
}

/* Under 900 px stables de: film øverst, tekst under. Filmen bliver bredere
   og lavere, så den ikke fylder hele skærmen, før man når overskriften. */
@media (max-width:900px){
  .hero-bred{ grid-template-columns:1fr; min-height:0; }
  .hero-film .hero-film-ramme,
  .hero-film .photo.hero-medie,
  .hero-film.medie-hoejre .hero-film-ramme,
  .hero-film.medie-hoejre .photo.hero-medie{
    height:auto; aspect-ratio:16/10; max-height:52vh;
    margin: var(--s3) var(--s3) 0;
  }
  /* Stablet står billedet altid øverst, uanset hvilken side det har på
     en bred skærm. Et billede først er en bedre indgang på en telefon. */
  .hero-film.medie-hoejre .hero-visual{ order:-1; }
  .hero-film .hero-bred > div:first-child{ padding: var(--s4) var(--s3) var(--s5); }
}

/* Den, der har bedt om mindre bevægelse, får filmen sat på pause i stedet
   for at se den køre i ring. Det sker i main.js — filmen bliver stående på
   sit første billede, så feltet ikke bare er tomt. */

/* Tekst, der kun er til oplæsning */
.kun-oplaest{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}


/* Medie til højre. Reglerne står til sidst, fordi marginerne ellers bliver
   overskrevet af den spejlvendte variant længere oppe i filen — kaskaden
   afgøres af rækkefølge, når specificiteten er den samme. */
.hero-film.medie-hoejre .hero-film-ramme,
.hero-film.medie-hoejre .photo.hero-medie{
  margin: var(--s4) 0 var(--s4) var(--s4);
}
@media (min-width:1400px){
  .hero-film.medie-hoejre .hero-film-ramme,
  .hero-film.medie-hoejre .photo.hero-medie{
    margin-right: var(--s3); margin-left: var(--s4);
  }
}
@media (max-width:900px){
  .hero-film.medie-hoejre .hero-film-ramme,
  .hero-film.medie-hoejre .photo.hero-medie{
    margin: var(--s3) var(--s3) 0;
  }
}

/* Billedfelter har et cremefarvet slør nederst, så en billedtekst kan stå
   oven på fotoet. I heroen er der ingen billedtekst, og sløret lagde sig
   hen over hele billedet og gjorde det mælket. */
.hero-film .photo.hero-medie::after{ content:none; }


/* ==========================================================================
   Beregneren
   ==========================================================================
   Fanerne er rigtige tabs efter WAI-ARIA: kun én af dem kan nås med
   tabulator, og pil til side skifter mellem dem. Sådan forventes mønsteret
   at opføre sig, og det er billigere at gøre rigtigt end at bygge om.  */

.beregner{
  background: var(--flade-1);
  border:1px solid var(--card-border);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-top: var(--s4);
  max-width:560px;
  box-shadow: 0 1px 2px rgb(26 26 24 / .04), 0 12px 28px -18px rgb(26 26 24 / .28);
}
.ber-titel{ font-size:1.375rem; margin:0 0 4px; letter-spacing:-.01em; }
.ber-manchet{ font-size:.9375rem; color: var(--text-muted); margin:0 0 var(--s3); }

/* Flex frem for et fast kolonnetal: fanerne fylder altid bredden jævnt,
   uanset om der er to, tre eller fire. Før stod tallet fast på 4, så en
   fjernet fane efterlod en tom kolonne. */
.ber-faner{
  display:flex; gap:8px; margin-bottom: var(--s3);
}
.ber-fane{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding: 12px 6px;
  background: var(--flade-2);
  border:1px solid var(--kontrol-kant);
  border-radius: var(--r-md);
  color: var(--text); font:600 .8125rem/1.2 inherit;
  cursor:pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast);
}
.ber-fane svg{ width:34px; height:34px; color: var(--accent-ink); stroke-width:1.4; }
.ber-fane:hover{ background: var(--flade-3); transform: translateY(-1px); }
.ber-fane:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:2px; }
/* Den valgte fane markeres med både flade OG kant. Farve alene ville
   forsvinde for den, der ikke skelner den fra de øvrige. */
.ber-fane[aria-selected="true"]{
  background: var(--page);
  border-color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}

.ber-panel{ display:grid; gap: var(--s2); }
/* display:grid slår hidden-attributten, som kun sætter display:none med
   lav specificitet. Uden den her linje står alle fire paneler synlige. */
.ber-panel[hidden]{ display:none; }
.ber-panel:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:4px; }
.ber-panel .btn{ width:100%; justify-content:center; }
.ber-hjaelp{ margin:0; font-size:.875rem; }
.ber-hjaelp a{ color: var(--text-muted); }
.ber-hjaelp a:hover{ color: var(--accent-ink); }

@media (max-width:520px){
  .beregner{ padding: var(--s3); }
  /* Fanerne bliver i én række (flex fordeler dem); labels er korte nok. */
  .ber-fane{ padding: 12px 4px; }
}

/* Fremhævede produkter */
.pop-grid{
  display:grid; gap: var(--s2);
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (max-width:760px){ .pop-grid{ grid-template-columns:1fr; } }
.pop-kort{
  display:flex; align-items:flex-start; gap: var(--s3);
  padding: var(--s3);
  border:1px solid var(--card-border);
  border-radius: var(--r-md);
  background: var(--card-bg);
  text-decoration:none;
  transition: border-color var(--t-fast), background-color var(--t-fast),
              transform var(--t-fast);
}
.pop-kort:hover{
  border-color: var(--accent-ink);
  background: var(--card-bg-2);
  transform: translateY(-2px);
}
.pop-kort .icon-tile{ margin:0; width:52px; height:52px; flex-basis:52px; }
.pop-kort .icon-tile svg{ width:34px; height:34px; }
.pop-kort strong{ display:block; margin-bottom:3px; color: var(--text); }
.pop-kort span{ font-size:.9375rem; line-height:1.5; color: var(--text-muted); }


/* ==========================================================================
   Produktkort — erhverv
   ==========================================================================
   Titel øverst, ikon i midten, en linje om dækningen under. Fliserne på
   privatsiden viser kun navn og ikon, og det er nok, når man leder efter
   noget, man kender navnet på. Erhvervsprodukterne hedder ting som
   "sygedriftstab" og "påhæng, flåde" — der siger navnet ikke nok alene. */

/* ---------- Handlingskort på forsiden ------------------------------------
   Tre genveje lige under heroen (anmeld skade, ring, forsikringstjek).
   Inspireret af action-cards, men i husets eget kort-udtryk. */
.handling-sektion{ padding-top: var(--s5); }
.handling-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap: var(--s3);
}
@media (max-width:760px){ .handling-grid{ grid-template-columns:1fr; } }
.handling-kort{
  display:flex; gap: var(--s3); align-items:center;
  padding: var(--s3);
  border:1px solid var(--card-border); border-radius: var(--r-lg);
  background: var(--flade-1); color: var(--text); text-decoration:none;
  transition: border-color var(--t-fast), transform var(--t-fast),
              background-color var(--t-fast), box-shadow var(--t-fast);
}
.handling-kort:hover{
  border-color: var(--card-border-strong);
  background: var(--card-bg-2);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgb(26 26 24 / .04), 0 14px 30px -20px rgb(26 26 24 / .30);
}
.hk-ikon{
  flex:0 0 46px; width:46px; height:46px; border-radius: var(--r-md);
  display:grid; place-items:center;
  background: var(--flade-2); color: var(--accent-ink);
}
.hk-ikon svg{ width:24px; height:24px; }
.hk-tekst strong{ display:block; margin-bottom:2px; }
.hk-tekst > span{ color: var(--text-muted); font-size:.9375rem; line-height:1.45; }

/* ---------- Produktvælger med steppere (kontaktformular) ----------------
   Vælg hvilke forsikringer henvendelsen drejer sig om, og hvor mange af
   hver (fx to biler). Egen tolkning i husets udtryk — grøn, ikke blå. */
.vaelg-produkter{ border:0; padding:0; margin:0 0 var(--s3); min-inline-size:0; }
.vaelg-produkter legend{ font-size:.875rem; font-weight:600; color:var(--text); padding:0; }
.vp-hint{ margin:4px 0 var(--s3); font-size:.875rem; color:var(--text-muted); }
.vp-kolonner{ display:grid; grid-template-columns:1fr; gap:var(--s3); }
@media (min-width:820px){ .vp-kolonner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.vp-gruppe{ min-width:0; border:1px solid var(--card-border); border-radius:var(--r-lg);
  background:var(--flade-1); padding:var(--s3); }
/* På en telefon gik 160 af 390 px til indpakning: 24 i container, 32 i
   kortet og 24 her — tre gange polstring uden på hinanden. Produktnavnet
   fik 80 px tilbage og måtte brydes midt i et ord. Den inderste polstring
   er den, der kan undværes; kortet omkring giver luft nok i forvejen. */
@media (max-width:560px){ .vp-gruppe{ padding: var(--s2) 12px; } }
.vp-gruppe h3{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); margin:0 0 6px; font-weight:700; }
.vp-rk{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.vp-rk + .vp-rk{ border-top:1px solid var(--hairline); }
.vp-ikon{ flex:0 0 30px; width:30px; height:30px; color:var(--accent-ink);
  display:grid; place-items:center; }
.vp-ikon svg{ width:26px; height:26px; }
/* "Sælgeransvarsforsikring" er ét ord på 23 tegn og kunne ikke brydes.
   Navnet har kun 80 px at stå på (tælleren reserverer 96 px, også når den
   kun viser et "+"), så ordet løb ind i knappen og blev klippet. Med
   orddeling brydes det i stedet — siden er lang="da", så browseren deler
   efter danske regler. */
.vp-navn{ flex:1 1 auto; min-width:0; font-size:.9375rem; line-height:1.3;
  color:var(--text); overflow-wrap:break-word; hyphens:auto; }
.vp-rk:not([data-antal="0"]) .vp-navn{ font-weight:600; }
/* Fast bredde uanset om der vises "+" eller "− N +", så rækken ikke
   ændrer bredde og skubber sig ud over kortet, når man trykker +. */
.stepper{ display:flex; align-items:center; justify-content:flex-end;
  gap:8px; flex:0 0 auto; min-width:96px; }
.stepper button{ width:32px; height:32px; border-radius:50%;
  border:1px solid var(--kontrol-kant); background:var(--flade-2);
  color:var(--accent-ink); font-size:1.15rem; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:background-color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.stepper button:hover{ background:var(--flade-3); border-color:var(--accent-ink); }
.stepper button:active{ transform:scale(.94); }
.stepper button:focus-visible{ outline:3px solid var(--accent-ink); outline-offset:2px; }
.stepper .st-mere{ background:color-mix(in oklab, var(--accent-ink) 12%, var(--flade-2));
  border-color:color-mix(in oklab, var(--accent-ink) 40%, transparent); }
.stepper .st-antal{ min-width:1.1ch; text-align:center; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--text); }
.vp-rk[data-antal="0"] .st-mindre,
.vp-rk[data-antal="0"] .st-antal{ display:none; }

/* Kvittering under ring op-feltet. */
.ringop-kvit{
  margin: var(--s2) 0 0;
  font-family: var(--font-head); font-size:.9375rem; font-weight:600;
  color: var(--accent-ink);
}
.ringop-kvit.er-fejl{ color: var(--fejl); font-weight:400; }

/* Feltet står midt i en artikel på «bliv ringet op». Uden luft under
   klistrer «Få et samlet tilbud» op ad den næste overskrift. */
.container.smal > .ringop{ margin-bottom: var(--s6); }

/* --- Sloganet ------------------------------------------------------------
   Står over ordmærket i foden. Sat i brødskriften og ikke i display:
   ordmærket lige under fylder allerede med Bricolage, og to fede linjer
   oven på hinanden kæmper om den samme opmærksomhed. En serif i normal
   vægt læses som en sætning, nogen har skrevet — ikke som en overskrift. */
.slogan{
  /* Positiv margen, ikke negativ. Første forsøg trak linjen ned i
     ordmærket, og bogstavernes overlængder skar gennem teksten. */
  margin:0 0 var(--s3);
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height:1.3;
  color: color-mix(in oklab, var(--brand-cream) 80%, var(--brand-ink));
  max-width:24ch;
}
@media (max-width:640px){ .slogan{ margin-bottom: var(--s2); } }

/* Kvittering under beregneren. Samme udtryk som ring op-feltets. */
.ber-kvit{
  margin: var(--s3) 0 0;
  font-family: var(--font-head); font-size:.9375rem; font-weight:600;
  color: var(--accent-ink);
}
.ber-kvit.er-fejl{ color: var(--fejl); font-weight:400; }


/* ==========================================================================
   BEREGNEREN
   Egen side uden menu og fod. Ét spørgsmål ad gangen, og intet andet på
   skærmen at forholde sig til.
   ========================================================================== */
.bt{
  max-width:640px; margin-inline:auto;
  padding: var(--s5) var(--s3) var(--s6);
  min-height:100svh; display:flex; flex-direction:column;
}
.bt-top{ display:grid; justify-items:center; gap: var(--s2);
  margin-bottom: var(--s5); }
.bt-mrk{ display:inline-flex; --logo-h:24px; }
.bt-mrk .logo-svg{ height: var(--logo-h); width:auto; }

/* Prikkerne. Én pr. trin — antallet kommer fra listen i indhold_privat.py,
   så indikatoren kan ikke komme til at vise 50 %, når man er på spørgsmål
   3 ud af 10. Der er ingen procent; der er prikker, og de tælles. */
.bt-prikker{ display:flex; gap:7px; align-items:center; }
.bt-prik{
  width:22px; height:4px; border-radius:2px;
  background: var(--flade-3);
  transition: background-color var(--t-med), width var(--t-med);
}
.bt-prik.gjort{ background: color-mix(in oklab, var(--brand-green) 55%, transparent); }
.bt-prik.paa{ background: var(--brand-green); width:32px; }
@media (max-width:420px){ .bt-prik{ width:14px; } .bt-prik.paa{ width:22px; } }
.bt-tael-tekst{
  font-family: var(--font-head); font-size:.8125rem; font-weight:600;
  color: var(--text-muted); margin:0;
}
.bt-tael-tekst b{ color: var(--text); }
.bt-loefte{
  font-size:.8125rem; color: var(--text-muted); margin:0; text-align:center;
  max-width:34ch;
}

.bt-form{ flex:1; display:flex; flex-direction:column; }
.bt-trin[hidden]{ display:none; }
/* Viser, hvilket produkt et opfølgende spørgsmål hører til — nyttigt nu,
   hvor produktvalget ikke nødvendigvis er det foregående trin. */
.bt-kontekst{
  display:flex; justify-content:center; align-items:center; gap:6px;
  font-family: var(--font-head); font-weight:600; font-size:.75rem;
  letter-spacing:.02em; color: var(--accent-ink);
  background: color-mix(in oklab, var(--brand-green) 10%, transparent);
  border-radius: var(--r-pill); padding:5px 12px 5px 8px;
  margin:0 auto 14px; width:fit-content;
}
.bt-kontekst svg{ width:14px; height:14px; flex:none; }
.bt-sp{
  font-family: var(--font-head); font-weight:800;
  font-size: clamp(1.5rem, 4.6vw, 2rem); line-height:1.14;
  letter-spacing:-.03em; margin:0 0 var(--s2); text-align:center;
  text-wrap:balance;
}
.bt-hjaelp{
  font-size:.9375rem; color: var(--text-muted); text-align:center;
  margin:0 auto var(--s4); max-width:40ch;
}

/* --- valg og flervalg --- */
.bt-valgrid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;
}
/* To spalter helt ned til 360 px. Ved én spalte blev seks fliser 450 px
   høje tilsammen, og så lå Fortsæt-knappen under skærmkanten — den
   primære handling var usynlig på trin 1. */
@media (max-width:359px){ .bt-valgrid{ grid-template-columns:minmax(0,1fr); } }
.bt-valg{
  position:relative; display:flex; align-items:center; gap:10px;
  min-height:60px; padding:12px 13px;
  border:1.5px solid var(--card-border); border-radius: var(--r-lg);
  background: var(--flade-1); cursor:pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.bt-valg:hover{ border-color: color-mix(in oklab, var(--brand-green) 55%, transparent); }
.bt-valg input{
  position:absolute; opacity:0; width:1px; height:1px;
}
.bt-valg-i{ width:26px; height:26px; color: var(--accent-ink); flex:none; }
.bt-valg-i svg{ width:100%; height:100%; display:block; }
.bt-valg-t{ font-family: var(--font-head); font-weight:600; font-size:.9375rem; }
.bt-valg:has(input:checked){
  border-color: var(--accent-linje);
  background: color-mix(in oklab, var(--brand-green) 8%, var(--flade-1));
}
.bt-valg:has(input:focus-visible){
  outline:3px solid color-mix(in oklab, var(--brand-green) 45%, transparent);
  outline-offset:2px;
}

/* --- "Øvrige …": resten af en lang liste, foldet sammen fra start --- */
.bt-oevrige{
  margin-top:10px; border:1.5px solid var(--card-border); border-radius: var(--r-lg);
  background: var(--flade-1); overflow:hidden;
}
.bt-oevrige summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:13px 14px; min-height:44px;
  font-family: var(--font-head); font-weight:600; font-size:.9375rem; color: var(--text);
}
.bt-oevrige summary::-webkit-details-marker{ display:none; }
.bt-oevrige summary::after{
  content:""; width:10px; height:10px; flex:none;
  border-right:2px solid var(--brand-green); border-bottom:2px solid var(--brand-green);
  rotate:45deg; transition: rotate var(--t-fast);
}
.bt-oevrige[open] summary::after{ rotate:225deg; margin-top:-3px; }
.bt-valgrid-kompakt{
  grid-template-columns:minmax(0,1fr) !important; gap:6px !important;
  padding: 2px 10px 12px; max-height:320px; overflow-y:auto;
}
.bt-valgrid-kompakt .bt-valg{ min-height:44px; padding:9px 12px; }
.bt-valgrid-kompakt .bt-valg-i{ display:none; }
.bt-valgrid-kompakt .bt-valg-t{ font-size:.875rem; font-weight:500; }

/* --- flere korte felter samlet på ét trin (fx Indbo, Hund) — almindelige
   select/tekst/tekstområde-felter, ikke kort, ikke en harmonika --- */
.bt-mfelter{ display:grid; gap:14px; }
.bt-mfelt-titel{
  font-family: var(--font-head); font-weight:700; font-size:.6875rem;
  letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint);
  margin: var(--s3) 0 -2px;
}
.bt-mfelt-titel:first-child{ margin-top:0; }
.bt-mfelt label{
  display:block; font-family: var(--font-head); font-weight:600;
  font-size:.8125rem; margin-bottom:6px; color: var(--text-muted);
}
.bt-mfelt select, .bt-mfelt input, .bt-mfelt textarea{
  width:100%; font:inherit; font-size:.9375rem; color: var(--text);
  background:#fff; border:1.5px solid var(--kontrol-kant); border-radius: var(--r-md);
  padding:12px 14px; appearance:none; -webkit-appearance:none;
}
.bt-mfelt select{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232E6A4E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:40px; cursor:pointer;
}
.bt-mfelt textarea{ min-height:64px; resize:vertical; }
.bt-mfelt select:focus, .bt-mfelt input:focus, .bt-mfelt textarea:focus{
  outline:none; border-color: var(--brand-green);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-green) 25%, transparent);
}
.bt-mfelt[hidden]{ display:none; }
/* Manglende svar markeres på selve feltet, ikke kun i beskeden nederst —
   på et trin med ni felter er "besvar alle spørgsmål" ikke en anvisning. */
.bt-mfelt-fejl label{ color: var(--fejl); }
.bt-mfelt-fejl select, .bt-mfelt-fejl input, .bt-mfelt-fejl textarea{
  border-color: var(--fejl);
  background-color: color-mix(in oklab, var(--fejl) 4%, #fff);
}

/* --- tællere --- */
.bt-taellere{ display:grid; gap:2px; }
.bt-tael{
  display:flex; align-items:center; gap:12px; padding: var(--s2) 0;
  border-bottom:1px solid var(--hairline);
}
.bt-tael:last-child{ border-bottom:0; }
.bt-tael-t{ flex:1; display:grid; }
.bt-tael-t b{ font-family: var(--font-head); font-weight:600; font-size:.9375rem; }
.bt-tael-t i{ font-style:normal; font-size:.8125rem; color: var(--text-faint); }
.bt-knap{
  width:44px; height:44px; flex:none; border-radius:50%;
  border:1.5px solid var(--kontrol-kant); background:transparent;
  font-size:1.1rem; line-height:1; cursor:pointer; color: var(--text);
}
.bt-knap:hover:not(:disabled){ border-color: var(--brand-green); color: var(--accent-ink); }
.bt-knap:disabled{ opacity:.35; cursor:default; }
.bt-tael output{
  min-width:2ch; text-align:center; font-family: var(--font-head);
  font-weight:700; font-size:1.0625rem; font-variant-numeric:tabular-nums;
}

/* --- tekstfelt --- */
.bt-felt{ margin-bottom: var(--s3); }
.bt-felt label{
  display:block; font-family: var(--font-head); font-weight:600;
  font-size:.875rem; margin-bottom:6px;
}
.bt-felt label i{ font-style:normal; font-weight:400; color: var(--text-faint); }
.bt-felt input{
  width:100%; min-height:56px; padding:15px 16px;
  border:1.5px solid var(--kontrol-kant); border-radius: var(--r-md);
  background: var(--flade-1); color: var(--text);
  font:inherit; font-size:1rem;
}
.bt-felt input:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand-green) 45%, transparent);
  outline-offset:1px; border-color: var(--brand-green);
}

/* Kontaktmetoden på kontakttrinnet: et spørgsmål blandt tekstfelter, så det
   skal se ud som de andre felter — men det må IKKE ligge i .bt-felt, som
   både validering og opsummering behandler som "et tekstfelt, der skal
   udfyldes". */
.bt-kontaktmetode{ margin-bottom: var(--s3); }
.bt-kontaktmetode-sp{
  font-family: var(--font-head); font-weight:600; font-size:.875rem;
  margin:0 0 6px; color: var(--text);
}

/* --- fejl: venlig, ikke teknisk --- */
/* Advarsel — ikke en rød fejl, men en diskret gul/orange boks med et
   advarselsikon. Viser kun det, der mangler (se visFejl/manglerPaaKontakt
   i main.js). */
.bt-fejl{
  margin: var(--s3) 0 0; font-size:.9375rem; color: var(--advarsel);
  display:flex; gap:10px; align-items:flex-start; text-align:left;
  padding:11px 13px; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--advarsel) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--advarsel) 32%, transparent);
}
.bt-fejl-ikon{ width:18px; height:18px; flex:0 0 18px; margin-top:1px; }
.bt-fejl-tekst{ font-weight:600; }
.bt-mangler-liste{
  margin:4px 0 0; padding-left:1.1em; font-weight:500;
  display:flex; flex-direction:column; gap:2px;
}
.bt-mangler-liste li{ list-style:disc; }
.bt-fejl[hidden]{ display:none; }

/* --- styring --- */
.bt-styr{ margin-top: auto; padding-top: var(--s5); display:grid; gap:10px; }
.bt-styr .btn{ width:100%; }
.bt-tilbage[hidden], .bt-send[hidden], .bt-frem[hidden]{ display:none; }
.bt-status{ margin-top: var(--s3); text-align:center; font-size:.9375rem; }
.bt-status[hidden]{ display:none; }

/* --- Behandlingsskærm (fuldskærms-overgang før tak-siden) --- */
.bt-loader{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background: var(--flade-1);
  animation: bt-loader-ind var(--t-fast) ease-out;
}
.bt-loader[hidden]{ display:none; }
@keyframes bt-loader-ind{ from{ opacity:0; } to{ opacity:1; } }
.bt-loader-indhold{
  display:flex; flex-direction:column; align-items:center; gap: var(--s4);
  padding: var(--s4);
}
.bt-loader-logo .logo-svg{ width:180px; height:auto; display:block; }
.bt-loader-prik{
  width:14px; height:14px; border-radius:50%;
  background: var(--accent-linje);
  box-shadow:0 0 0 0 color-mix(in oklab, var(--accent-linje) 55%, transparent);
  animation: bt-loader-puls 1.2s ease-in-out infinite;
}
@keyframes bt-loader-puls{
  0%   { transform:scale(.85); opacity:.6; box-shadow:0 0 0 0 color-mix(in oklab, var(--accent-linje) 55%, transparent); }
  50%  { transform:scale(1.15); opacity:1; box-shadow:0 0 0 10px color-mix(in oklab, var(--accent-linje) 0%, transparent); }
  100% { transform:scale(.85); opacity:.6; box-shadow:0 0 0 0 color-mix(in oklab, var(--accent-linje) 0%, transparent); }
}
.bt-loader-tekst{
  margin:0; font-family: var(--font-head); font-weight:600;
  font-size:1.0625rem; color: var(--text-muted); text-align:center;
}
@media (prefers-reduced-motion: reduce){
  .bt-loader{ animation:none; }
  .bt-loader-prik{ animation-duration:2.4s; }
}
.bt-jura{ margin: var(--s2) 0 0; text-align:center; font-size:.8125rem; }
.bt-jura a{ color: var(--text-faint); }

/* --- tak-siden: kunden sendes hertil efter afsendt tilbud. Egen ramme,
   som beregneren selv. Logoet er det almindelige ordmærke (.logo-mark) —
   prikkens diskrete puls og ring kommer helt af sig selv, ingen ny
   animation defineret her. Kun størrelse og opstilling er nyt. --- */
.tak-side{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding: var(--s5) var(--s3);
}
.tak-logo-boks{
  display:block; width:min(60vw, 220px); margin:0 0 var(--s4);
  text-decoration:none;
}
.tak-side h1{
  font-family: var(--font-head); font-weight:800;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  letter-spacing:-.02em; margin:0 0 14px; max-width:26ch; text-wrap:balance;
}
.tak-streg{ width:44px; height:2px; background: var(--brand-green); border:none; margin: var(--s4) auto; opacity:.4; }
.tak-tilbage{
  font-family: var(--font-head); font-weight:600; font-size:.875rem;
  color: var(--accent-ink); text-decoration:none; border-bottom:1px solid transparent;
}
.tak-tilbage:hover{ border-bottom-color: var(--brand-green); }

/* Uden JavaScript står alle trin under hinanden som én formular. */
.bt-trin + .bt-trin{ margin-top: var(--s6); }

/* --- adresseopslag (Dataforsyningen) --- */
.bt-adresse-wrap{ position:relative; }
.bt-adresse-liste{
  position:absolute; left:0; right:0; top:calc(100% + 4px);
  background: var(--flade-1); border:1.5px solid var(--kontrol-kant);
  border-radius: var(--r-md); max-height:224px; overflow:auto; z-index:5;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--brand-ink) 16%, transparent);
}
.bt-adresse-liste div{ padding:12px 16px; cursor:pointer; font-size:.9375rem; border-bottom:1px solid var(--hairline); }
.bt-adresse-liste div:last-child{ border-bottom:0; }
.bt-adresse-liste div:hover{ background: var(--flade-2); }
.bt-adresse-liste[hidden]{ display:none; }

/* Søg-og-vælg mod en lokal liste (fx hunderacer) — samme opbygning som
   adressefeltet ovenfor, bare med et forstørrelsesglas i stedet for at
   ligge under et .bt-felt. */
.bt-soeg-wrap{ position:relative; }
.bt-soeg-wrap input{ padding-left:40px; }
.bt-soeg-ikon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color: var(--text-faint); pointer-events:none;
}
.bt-soeg-resultater{
  position:absolute; left:0; right:0; top:calc(100% + 4px);
  background: var(--flade-1); border:1.5px solid var(--kontrol-kant);
  border-radius: var(--r-md); max-height:224px; overflow:auto; z-index:5;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--brand-ink) 16%, transparent);
}
.bt-soeg-wrap input{ padding-right:40px; }
/* Pilen fortæller, at feltet kan foldes ud — uden den ligner et søgefelt
   noget, man selv skal skrive hele svaret i. */
.bt-soeg-pil{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color: var(--brand-green); pointer-events:none;
  transition: rotate .15s ease;
}
.bt-soeg-wrap input[aria-expanded="true"] ~ .bt-soeg-pil{ rotate:180deg; }
.bt-soeg-resultater [role="option"]{
  padding:12px 16px; cursor:pointer; font-size:.9375rem;
  border-bottom:1px solid var(--hairline);
}
.bt-soeg-resultater [role="option"]:last-child{ border-bottom:0; }
/* Mus og tastatur skal se ens ud — .paa sættes af piletasterne.
   Et anstrøg af grønt målte 1.19:1 mod rækkerne omkring: pilede man sig
   ned gennem listen, kunne man ikke se, hvor man var. Nu vendes rækken
   om, som en almindelig <select> gør det — 5.68:1 i lys visning og
   8.02:1 i mørk. */
.bt-soeg-resultater [role="option"]:hover,
.bt-soeg-resultater [role="option"].paa{
  background: var(--accent-ink);
  color: var(--flade-1);
}
/* Gruppeoverskrifter, når listen åbnes uden søgetekst. 173 beskæftigelser
   i én klump er ikke en liste, man kan overskue. Klæber i toppen, så man
   kan se, hvilken branche man ruller i. */
.bt-soeg-gruppe{
  position:sticky; top:0; z-index:1; margin:0;
  padding:8px 16px 6px; background: var(--flade-2);
  font-family: var(--font-head); font-weight:700; font-size:.6875rem;
  /* --text-muted gav kun 4.05:1 på den lysere flade i mørk visning. */
  letter-spacing:.06em; text-transform:uppercase; color: var(--text);
  border-bottom:1px solid var(--hairline);
}
.bt-soeg-tom{
  margin:0; padding:14px 16px; font-size:.9375rem; color: var(--text-muted);
}
.bt-soeg-resultater[hidden]{ display:none; }
/* På mobil skal listen kunne nå at vise noget over tastaturet, men aldrig
   fylde hele skærmen. */
@media (max-width:600px){ .bt-soeg-resultater{ max-height:min(50vh, 260px); } }

/* --- produktkort: samme kortsprog som .bt-valg, men med et
   afhængigheds-lag (låst/åben) og en tæller-variant --- */
.bt-prodgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:359px){ .bt-prodgrid{ grid-template-columns:minmax(0,1fr); } }
.bt-prod{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; padding: var(--s3) var(--s2);
  border:1.5px solid var(--kontrol-kant); border-radius: var(--r-md);
  background: var(--flade-1); transition: border-color var(--t-fast), opacity var(--t-fast);
  cursor:pointer;
}
.bt-prod input{ position:absolute; opacity:0; pointer-events:none; }
.bt-prod-i{ width:26px; height:26px; color: var(--accent-ink); }
.bt-prod-i svg{ width:100%; height:100%; display:block; }
.bt-prod-t{ font-family: var(--font-head); font-weight:600; font-size:.9375rem; }
.bt-prod:has(input:checked){
  border-color: var(--accent-linje);
  background: color-mix(in oklab, var(--brand-green) 12%, var(--flade-1));
  /* En indvendig ring gør kanten ~2px uden at flytte layoutet, og ikonet
     tager accentfarven — så et valgt kort er til at få øje på også på den
     mørke bund, hvor et svagt grønt skær næsten forsvandt. */
  box-shadow: inset 0 0 0 1px var(--accent-linje);
}
.bt-prod:has(input:checked) .bt-prod-i{ color: var(--accent-linje); }
.bt-prod:has(input:focus-visible){ outline:3px solid color-mix(in oklab, var(--brand-green) 45%, transparent); outline-offset:1px; }
.bt-prod-slaaet-fra{ opacity:.4; cursor:not-allowed; }
.bt-prod-tael-rk{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:2px; }
.bt-prod-tael-rk .bt-knap{ width:26px; height:26px; }
.bt-prod-tael-rk output{ min-width:14px; text-align:center; font-weight:600; font-variant-numeric: tabular-nums; }
.bt-prod-tael{ cursor:default; }

/* --- BBR-bekræftelseskort: vises under produktkortene, så snart "Hus"
   er valgt — samme kortsprog som .bt-opsum-kort, se hentBBRHvisMuligt()
   / visBBR*() i main.js --- */
.bt-bbr{ margin-top: var(--s3); display:grid; gap:8px; }
.bt-bbr-status{
  display:flex; align-items:center; gap:9px;
  font-size:.875rem; color: var(--text-muted); padding: 2px 2px;
}
.bt-bbr-spinner{
  width:15px; height:15px; flex:none; border-radius:50%;
  border:2px solid var(--kontrol-kant); border-top-color: var(--brand-green);
  animation: bt-bbr-snurre .7s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .bt-bbr-spinner{ animation:none; } }
@keyframes bt-bbr-snurre{ to{ transform: rotate(360deg); } }
/* Låst BBR-felt: samme feltsprog som .bt-mfelt, men ikke til at røre —
   grå bund og en hængelås i stedet for en pil ned. */
.bt-bbr-felt{ margin-bottom:0; }
.bt-bbr-felt label{
  display:block; font-family: var(--font-head); font-weight:600;
  font-size:.8125rem; margin-bottom:6px; color: var(--text-muted);
}
.bt-bbr-vaerdi{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.9375rem; color: var(--text); background: var(--flade-2);
  border:1.5px solid var(--hairline); border-radius: var(--r-md);
  padding:12px 14px; cursor:not-allowed;
}
.bt-bbr-vaerdi svg{ width:15px; height:15px; flex:none; color: var(--text-faint); }
.bt-bbr-flag{
  margin-top: var(--s2); background: var(--flade-1); border:1.5px solid var(--hairline);
  min-height:auto; padding:13px 14px;
}
.bt-bbr-flag .bt-valg-i{ width:20px; height:20px; }

/* --- bekræft-trinnet --- */
.bt-opsum{ display:grid; gap:10px; }
.bt-opsum-kort{
  background: var(--flade-1); border:1.5px solid var(--hairline);
  border-radius: var(--r-md); padding: 12px 14px;
}
.bt-opsum-rk{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.bt-opsum-k{ font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-faint); margin-bottom:4px; }
.bt-opsum-v{ font-size:.9375rem; }
.bt-opsum-rk button{
  flex:none; background:none; border:none; color: var(--brand-green);
  font-weight:600; font-size:.8125rem; cursor:pointer;
}
.bt-opsum-rk button:hover{ text-decoration:underline; }

/* --- lys/mørk-skifter --- */
.bt-tema{ display:flex; justify-content:center; margin-top: var(--s3); }
.bt-tema button{
  display:flex; align-items:center; gap:7px;
  background:none; border:1.5px solid var(--kontrol-kant); border-radius: var(--r-pill);
  padding:7px 16px 7px 12px; font-size:.8125rem; font-weight:600; color: var(--text-muted);
  cursor:pointer;
}
.bt-tema button:hover{ border-color: var(--brand-green); color: var(--brand-green); }
.bt-tema svg{ width:15px; height:15px; }
.bt-tema svg[hidden]{ display:none; }

/* Mørk visning af beregneren. Samme opskrift som .cta-block: tokens
   vendes om lokalt, så alt nedenunder — kort, felter, knapper, hår­streger
   — følger med af sig selv.

   Den sidder på <html> og ikke på selve beregnerspalten. Lå den på
   spalten, blev kun de midterste 640 px mørke, mens siden på begge sider
   af den blev ved med at være lys — og på mobil lyste det frem igen, så
   snart man trak siden ned forbi kanten. Mørk visning skal være hele
   siden, ikke en mørk kasse på en lys side. */
:root[data-tema="mork"]{
  --page:        var(--brand-ink);
  color-scheme:  dark;
  --tint:        var(--brand-cream);
  --text:        var(--brand-cream);
  --text-muted:  color-mix(in oklab, var(--brand-cream) 76%, var(--brand-ink));
  --text-faint:  color-mix(in oklab, var(--brand-cream) 62%, var(--brand-ink));
  --accent-ink:  var(--brand-cream);
  --primaer:     var(--papir);
  --paa-primaer: var(--brand-ink);
  --hairline:    color-mix(in oklab, var(--brand-cream) 14%, transparent);
  --kontrol-kant: color-mix(in oklab, var(--brand-cream) 40%, transparent);
  --flade-1:     color-mix(in oklab, var(--brand-ink) 85%, white);
  --flade-2:     color-mix(in oklab, var(--brand-ink) 78%, white);
  /* Uden den her ville en flade, der bruger trin 3, falde tilbage på den
     lyse værdi og stå som en lys stribe midt i en mørk side. */
  --flade-3:     color-mix(in oklab, var(--brand-ink) 70%, white);
  --accent-linje: #6FBE97;   /* 4.84:1 mod fladen. Den dybe grøn: 1.68:1 */
  /* Den mørkerøde fejlfarve fra lys visning giver kun 2,1:1 på blæk-bunden
     — læsbar for nogle, ikke for alle. Den lyse variant giver 8,3:1. */
  --fejl:        #FF9B8A;
  /* Den dybe gyldne advarsel forsvinder på mørk bund — lys amber i stedet. */
  --advarsel:    #F5C451;
  color: var(--brand-cream);
}
/* --page dækker body; html males med, så gummibånds-området i bunden af
   en telefon ikke blinker lyst frem, når man trækker siden ud over kanten. */
:root[data-tema="mork"], :root[data-tema="mork"] body{ background: var(--brand-ink); }
.bt[data-tema="mork"] .bt-prik,
:root[data-tema="mork"] .bt-prik{ background: color-mix(in oklab, var(--brand-cream) 30%, transparent); }
.bt[data-tema="mork"] .bt-prik.gjort,
:root[data-tema="mork"] .bt-prik.gjort{ background: color-mix(in oklab, #6FBE97 65%, transparent); }
.bt[data-tema="mork"] .bt-prik.paa,
:root[data-tema="mork"] .bt-prik.paa{ background: #6FBE97; }
/* Ordmærket er blæk og forsvandt derfor helt ind i den mørke bund — der
   stod kun den grønne prik tilbage. Samme vending som i foden. */
:root[data-tema="mork"] .logo-svg{ color: var(--brand-cream); }
/* Felter har hvid bund i lys visning. Hvide huller i en mørk side er
   blændende, og listen nedenunder skal have samme flade som feltet. */
:root[data-tema="mork"] .bt-mfelt select,
:root[data-tema="mork"] .bt-mfelt input,
:root[data-tema="mork"] .bt-mfelt textarea{
  /* Kun bundfarven må skifte i mørk visning. «background»-genvejen ville
     nulstille repeat/position/size fra select-reglen ovenfor, så pilen
     blev tilet hen over hele feltet — derfor background-color her. */
  background-color: var(--flade-1); color: var(--text);
}
:root[data-tema="mork"] .bt-mfelt select{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23DCE0DC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
}
:root[data-tema="mork"] .bt-mfelt-fejl select,
:root[data-tema="mork"] .bt-mfelt-fejl input,
:root[data-tema="mork"] .bt-mfelt-fejl textarea{
  background-color: color-mix(in oklab, var(--fejl) 12%, var(--flade-1));
}
:root[data-tema="mork"] .bt-soeg-pil{ color: var(--brand-cream); }
/* Produktkort: på den mørke bund giver den dybe mos-grøn næsten ingen
   kontrast. Brug den lyse accent-grøn til fyldet, så et valgt kort er
   tydeligt — kanten og ikonet tager samme farve fra fællesreglen. */
:root[data-tema="mork"] .bt-prod:has(input:checked){
  background: color-mix(in oklab, var(--accent-linje) 20%, var(--flade-1));
}