/* HJEMSTADS FAELLES LAG
   ══════════════════════════════════════════════════════════════════════
   Alt det, der skal se ens ud paa hver eneste side: skriften, farverne,
   topbjaelken, hovedet, foden, knapperne og den faste pille nede i
   hjoernet. Hver side i sitet laeser den her fil foerst og derefter enten
   forside.css eller style.css.

   Foer laa hoved og fod to steder med hver sit udseende, saa man kunne
   maerke, at man forlod forsiden. Nu er der én komponent. Retter du foden,
   retter du den for alle 101 sider paa én gang.

   Raekkefoelgen betyder noget: den her fil skal indlaeses FOER de to andre.
   ══════════════════════════════════════════════════════════════════════ */

/* --- Skriften -------------------------------------------------------------
   Sitet brugte foer skrifter.css, som melder Bricolage ind med faste
   vaegte: 400, 500, 600, 700, 800. Forsidens overskrifter staar paa 750,
   og den vaegt findes ikke i den liste, saa browseren rundede den ned til
   700. Filen er i forvejen en variabel skrift, saa her meldes den ind som
   det, den er, med hele spektret. Derfor kan 750 nu bruges overalt.        */
@font-face{
  font-family:Bricolage;
  src:url(skrifter/bricolage-grotesque-latin-85f55a58.woff2) format('woff2');
  font-display:swap; font-weight:100 900;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:Bricolage;
  src:url(skrifter/bricolage-grotesque-latin-ext-1d04719f.woff2) format('woff2');
  font-display:swap; font-weight:100 900;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Farver og maal ------------------------------------------------------
   De korte navne herunder er forsidens. style.css har sine egne, laengere
   navne til de samme vaerdier: --papir, --brand-ink, --brand-green,
   --text-muted, --flade-2. De er bit for bit de samme farver, saa de to
   saet kan leve side om side.                                              */
:root{
  --paper:#F1F2EE;
  --ink:#0F2019;
  --green:#2E6A4E;
  --muted:#565D58;
  --panel:#E7E9E3;
  --border:#cbd0c7;

  /* Brandlaget over fotografierne. Stod foer to steder, ét i hver fil, og
     kunne derfor skride fra hinanden. Nu er der ét tal.                    */
  --brand-groen:#51AE3C;
  --brandlag:.06;
}

/* --- Overskrifter og knapper ----------------------------------------------
   Forsidens skala, nu paa hele sitet.

   Bemaerk at reglerne staar som BARE selektorer og ikke som
   body:not([data-klassisk]) h2. Foerste forsoeg gjorde netop det, og saa
   vejede de tungere end komponentreglerne: .product h3 paa forsidens
   produktkort tabte til den, kortene blev for brede, og forsiden fik
   vandret rulning paa telefon. En bar h2 vejer det samme som browserens
   egen og lader enhver klasse vinde over sig. Det er meningen.

   De to undtagelsessider faar den gamle skala tilbage nedenfor.          */
h1,h2,h3,h4{
  font-family:Bricolage,system-ui,sans-serif;
  font-weight:750; letter-spacing:-.035em; line-height:1.08;
}
h1{ font-size:clamp(48px,5.2vw,78px); font-weight:800;
    line-height:1.01; letter-spacing:-.048em }
h2{ font-size:clamp(34px,3.4vw,51px) }
h3{ font-size:25px }
h4{ font-size:19px }

.btn,.button{
  display:inline-flex; align-items:center; justify-content:center;
  gap:20px; padding:16px 23px; border-radius:4px;
  font-size:16px; font-weight:650; line-height:1.3;
}

/* --- De to undtagelser ----------------------------------------------------
   "Find forsikring" og "Fordele" skal se ud, som de gjorde foer forsiden
   blev lavet om. De faar det faelles hoved og den faelles fod som alle
   andre, men beholder den gamle skala og de gamle knapper.

   :where() vejer nul, saa de her regler vejer praecis det samme som de
   bare regler ovenfor og vinder alene ved at staa senere. Havde de staaet
   som body[data-klassisk] h2, ville de have slaaet sidernes egne
   komponentregler ihjel paa samme maade som beskrevet ovenfor.           */
:where(body[data-klassisk]) h1,
:where(body[data-klassisk]) h2,
:where(body[data-klassisk]) h3,
:where(body[data-klassisk]) h4{ font-weight:700; line-height:1.05 }
:where(body[data-klassisk]) h1{
  font-size:clamp(2.5rem,5.2vw,4.5rem); font-weight:800;
  line-height:1.05; letter-spacing:-.035em }
:where(body[data-klassisk]) h2{ font-size:clamp(1.75rem,3.4vw,2.75rem) }
:where(body[data-klassisk]) h3{ font-size:clamp(1.125rem,1.4vw,1.3125rem) }
:where(body[data-klassisk]) .btn{
  gap:10px; min-height:48px; padding:12px 26px;
  font-size:.9375rem; font-weight:600; line-height:normal }

/* --- Brandlaget over fotografierne ---------------------------------------
   Samme lag, to vaerter: forsiden har sine egne billedfelter, resten af
   sitet har .photo. Reglerne staar sammen her, saa styrken kun skal rettes
   ét sted. Se ogsaa kommentaren ved .photo i style.css.                    */
.hero-photo,.product-photo,.tjek-billede,.tjek-mobilramme,
.photo.has-img,.hero-film .hero-film-ramme{ isolation:isolate }
.product-photo,.tjek-mobilramme{ position:relative }
.tjek-mobilramme{ display:block }
.hero-photo::before,.product-photo::before,
.tjek-billede::before,.tjek-mobilramme::before,
.photo.has-img::before,.hero-film .hero-film-ramme::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--brand-groen);mix-blend-mode:color;opacity:var(--brandlag);
}
.photo.has-img::after{ z-index:2 }
@media(prefers-reduced-transparency:reduce){ :root{ --brandlag:0 } }

/* --- Delte komponenter ----------------------------------------------------
   Herfra og ned er reglerne loeftet ud af forside.css uaendret, saa de to
   design ikke kan skride fra hinanden. Eneste rettelse: den bare
   nav-selektor er strammet til "header nav". Bar ramte den ogsaa
   broedkrummen, sidemenuen og fodens juridiske links paa undersiderne.     */

*{box-sizing:border-box}
body{touch-action:manipulation}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.62 Bricolage,system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}em{font-style:normal}img{max-width:100%}
/* Topbjaelken staar i tre spalter: tom, universerne, telefonen. Med
   space-between laa universerne klemt op ad venstre kant; nu ligger de midt
   i bjaelken, og det er den midterste spalte, der bestemmer, ikke hvor langt
   telefonnummeret er.
   Mellemrummet er en variabel, fordi stregen nedenfor skal staa praecis midt
   i det, og det bliver mindre paa smalle skaerme. */
.topbar{
  --topbar-mellemrum:24px;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  padding:8px 4%; border-bottom:1px solid var(--border);
  font-size:13px; background:var(--panel);
}
.topbar>div{grid-column:2; display:flex; gap:var(--topbar-mellemrum)}


/* Stregen staar KUN mellem Privat og Erhverv. De to er et valg mellem to
   universer; "Om os" er en almindelig side og hoerer ikke med i det valg.
   Derfor haenger stregen paa det foerste link og ikke mellem alle tre. */
.topbar>div>a:first-child{position:relative}
.topbar>div>a:first-child::after{
  content:""; position:absolute; top:50%; translate:0 -50%;
  right:calc(var(--topbar-mellemrum) / -2);
  width:1px; height:15px;
  background:color-mix(in oklab, var(--ink) 55%, transparent);
}
.topbar .selected{font-weight:700;color:var(--green)}header{height:90px;padding:0 4%;display:flex;align-items:center;gap:25px;background:var(--paper);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border)}header .brand{margin-right:auto;display:flex}.brand img{width:165px;height:auto}header nav{display:flex;gap:25px;font-size:14px}header nav a:hover,.text-link:hover{color:var(--green)}.nav-phone{font-size:14px;border:1px solid #828d83;border-radius:4px;padding:10px 16px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:4px;padding:16px 23px;font-weight:650;font-size:16px;line-height:1.3;transition:background .2s,transform .2s}.button:hover{background:var(--green);border-color:var(--green);transform:translateY(-2px)}.button span{font-size:22px;line-height:1}.button.small{font-size:14px;padding:13px 18px;gap:14px}.button.outline{background:transparent;color:var(--ink);border-color:#828d83}.button.outline:hover{background:var(--panel)}.menu{display:none}.eyebrow{font-size:12px;letter-spacing:.1em;font-weight:600;color:var(--green);line-height:1.5}.text-link{font-size:14px;border-bottom:1px solid #94a295;padding-bottom:5px;display:inline-flex;gap:25px;align-items:center}footer{background:var(--ink);color:#DCE0DC;padding:60px 5% 24px}.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;padding-bottom:50px}.footer-top p{color:#b6c3b9;font-size:14px;margin-top:22px}.footer-top>div>span{display:block;font-size:12px;letter-spacing:.1em;margin-bottom:20px}.footer-top>div>a:not(.footer-logo){display:block;font-size:14px;margin:9px 0}.footer-bottom{display:flex;justify-content:space-between;gap:30px;font-size:12px;color:#b6c3b9;border-top:1px solid #526956;padding-top:24px}.footer-bottom>div{display:flex;gap:25px}.skip{position:fixed;top:-100px;z-index:100;background:white;padding:15px}.skip:focus{top:0}
@media(max-width:1100px){header nav{gap:15px}.nav-phone{display:none}header{gap:20px}}
@media(max-width:760px){
  .brand{display:inline-flex;align-items:center;min-height:38px}  .topbar{font-size:12px;padding:7px 5%;--topbar-mellemrum:17px}header{height:76px;padding:0 5%;gap:12px}.brand img{width:128px}header .button.small{font-size:12px;padding:11px 12px;gap:10px}.menu{display:block;background:none;border:0;font-size:23px;padding:5px}header nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);padding:25px 6%;border-bottom:1px solid var(--border);flex-direction:column;font-size:16px}header nav.open{display:flex}.footer-top{grid-template-columns:1fr 1fr;gap:35px}.footer-top>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:16px}.footer-logo img{width:180px}}@media(max-width:380px){.topbar{--topbar-mellemrum:12px}header{gap:8px}.brand img{width:110px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Full first viewport, including the original two-level navigation. */
.topbar{height:38px;align-items:center}
@media(max-width:760px){.topbar{height:34px}}

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

/* Spalterne: en rytme hele vejen. Afstanden mellem overskrift og foerste link
   er den samme i alle fire spalter, og den samme mellem links indbyrdes. */
.footer-top{grid-template-columns:1.8fr 1fr 1fr 1fr;column-gap:40px;row-gap:44px;padding-bottom:46px}
.footer-top>div{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.footer-top>div:first-child{gap:16px}
.footer-top>div>span{margin:0 0 7px;font-size:11.5px;letter-spacing:.12em;color:#8FA394;font-weight:650}
.footer-top>div>a:not(.footer-logo){display:block;margin:0;font-size:14px;line-height:1.35}
.footer-top p{margin:0;color:#b6c3b9;font-size:14px;line-height:1.62}
.footer-top .kontakt{display:grid;gap:7px;justify-items:start;line-height:1.35}
.footer-top .kontakt a,.footer-top .kontakt span{display:block}
/* Understregningerne daempes: tolv links i traek med fuld streg stoejer. */
.footer-top a{text-decoration:underline;text-decoration-color:rgba(220,224,220,.3);
  text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.footer-top a:hover{color:#fff;text-decoration-color:currentColor}

/* Sloganet bor i fodens brandspalte, lige under navnet.
   NB: .footer-top p saetter 14px med hoejere vaegt end den her regel, saa
   sloganet staar i praksis i samme stoerrelse som blurben under det.
   Det er bevidst ladt staa: Ash har set og godkendt den udgave. Skal det
   loeftes, skal selektoren op paa .footer-top .slogan. */
.slogan{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.35;
  color:#DCE0DC;max-width:22ch;letter-spacing:-.01em}
/* Ordmaerket gaar naesten ud til kanten, men ikke helt: den groenne prik skal
   have luft, ellers ser den afskaaert ud.

   Opaciteten er skruet fra .5 ned til .22. Paa .5 stod ordmaerket som et
   element, der konkurrerede med resten af foden; nu er det en baggrundstone,
   man laeser som en flade foerst og et navn bagefter. Under .15 forsvinder
   det helt, saa det er ikke et spoergsmaal om bare at skrue ned.

   Det er dekoration og har aria-hidden, saa der er ingen kontrastkrav at
   tage hensyn til. */
.wordmark{margin:0 calc(-5.5556% + 10px);padding-bottom:28px;
  border-bottom:1px solid #35503f;opacity:.22}
.wordmark img{display:block;width:100%;height:auto}

.footer-bottom{border-top:0;padding-top:26px;align-items:center;gap:20px 40px;flex-wrap:wrap}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:14px 26px}
.footer-bottom a{text-decoration:underline;text-decoration-color:rgba(220,224,220,.3);
  text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.footer-bottom a:hover{color:#fff;text-decoration-color:currentColor}

@media(max-width:1000px){.footer-top{grid-template-columns:1.6fr 1fr 1fr;column-gap:32px}}
@media(max-width:760px){
  .footer-top{grid-template-columns:1fr 1fr;column-gap:28px;row-gap:36px}
  .footer-top>div:first-child{grid-column:1/-1}
  .wordmark{margin:0 calc(-5.5556% + 6px)}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  }

/* --- Den faste handlingsbjaelke ----------------------------
   To knapper side om side, nederst til hoejre, som foelger med hele
   vejen ned ad siden. Holdt lav og smal - en pille, ikke en kasse -
   saa den laegger sig oven paa siden uden at tage plads fra den.
   4% er sidens egen sidepolstring: pillens hoejre kant flugter
   dermed med indholdet ovenover. */
.fast-cta{position:fixed;right:4%;bottom:26px;z-index:60;display:flex;align-items:stretch;
  background:var(--ink);border:1px solid var(--ink);border-radius:999px;overflow:hidden;
  box-shadow:0 8px 24px rgba(15,32,25,.22),0 1px 3px rgba(15,32,25,.10);
  transition:background .35s,border-color .35s,box-shadow .35s}
.fast-cta a{display:flex;align-items:center;gap:9px;padding:11px 19px;
  font-size:13.5px;font-weight:650;line-height:1;color:var(--paper);white-space:nowrap;
  border-right:1px solid rgba(220,224,220,.18);
  transition:background .2s,color .35s,border-color .35s}
.fast-cta a:last-child{border-right:0}
/* Hover kun med rigtig markoer — paa touch haenger :hover fast
   efter et tryk og faar knappen til at se valgt ud. */
@media(hover:hover){.fast-cta a:hover{background:#1b3024}}
.fast-cta svg{width:17px;height:17px;color:#9CC7A8;flex-shrink:0;transition:color .35s}
/* Over de moerke sektioner ("Kom i gang" og foden) ville en moerk
   pille forsvinde. Der vender den om og bliver papir paa ink. */
.fast-cta.paa-moerk{background:var(--paper);border-color:#c7cfc6;
  box-shadow:0 8px 24px rgba(0,0,0,.32)}
.fast-cta.paa-moerk a{color:var(--ink);border-right-color:#dde2db}
@media(hover:hover){.fast-cta.paa-moerk a:hover{background:var(--panel);color:var(--green)}}
.fast-cta.paa-moerk svg{color:var(--green)}
.fast-cta b{font-weight:650}
/* Den groenne prik markerer den primaere handling uden at goere
   den ene knap stoerre end den anden. */
.fast-cta a:first-child b::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:#51AE3C;margin-right:7px;vertical-align:1px}

/* Foden faar plads under sig, saa pillen aldrig laegger sig oven paa
   CVR-linjen. Pillen bliver staaende - den viger ikke. */
footer{padding-bottom:104px}

@media(max-width:760px){
  /* Ogsaa paa telefon en pille, ikke en fuldbredde-bjaelke: den daekker
     mindre af siden og ligner ikke en app-menulinje. Samme hjoerne. */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}
  /* env() holder pillen fri af hjemindikatoren paa nyere iPhones. */
.fast-cta{right:5%;bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
  .fast-cta a{padding:11px 16px;font-size:13.5px;gap:8px}
  .fast-cta svg{width:16px;height:16px}
  footer{padding-bottom:26px}}
@media(max-width:380px){.fast-cta{right:4%}.fast-cta a{padding:11px 13px;font-size:13px;gap:7px}}

/* --- Cookiesamtykke -------------------------------------------------------
   Banneret bygges af main.js og er faelles for hele sitet, men dets stil
   staar i style.css, som forsiden ikke laeser. Derfor samme banner igen
   her, skrevet paa forsidens egne variabler. Knapperne vejer det samme og
   ser ens ud, praecis som i style.css: samtykke skal vaere lige saa let at
   sige nej til som ja, og et design, der skubber mod et ja, er ikke et
   frit valg.                                                               */
.cookie{
  position:fixed; inset:auto 20px 20px auto; z-index:60;
  width:min(420px, calc(100vw - 40px));
  background:var(--paper); color:var(--ink);
  border:1px solid var(--border); border-radius:14px;
  padding:22px; box-shadow:0 18px 50px rgba(15,32,25,.18);
  font-size:15px; line-height:1.55;
}
.cookie[hidden]{ display:none }
.cookie h2{ font-size:19px; margin:0 0 8px }
.cookie p{ margin:0 0 16px }
.cookie a{ color:var(--green); text-decoration:underline }
.cookie-valg{ display:grid; gap:12px; margin-bottom:18px }
.cookie-valg label{ display:flex; gap:10px; align-items:flex-start; font-size:14px }
.cookie-valg input{ width:20px; height:20px; margin-top:2px; accent-color:var(--green) }
.cookie-valg span{ color:var(--muted) }
.cookie-valg strong{ display:block; color:var(--ink) }
.cookie-knapper{ display:flex; flex-wrap:wrap; gap:10px }
.cookie .btn{
  flex:1 1 auto; min-height:44px; padding:10px 18px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--ink); border-radius:6px;
  font:inherit; font-size:14px; cursor:pointer;
}
.cookie .btn:hover{ background:var(--panel) }
.cookie .btn:focus-visible{ outline:3px solid var(--green); outline-offset:2px }
.cookie-fortryd{ margin:16px 0 0; font-size:13px; color:var(--muted) }
@media (max-width:640px){
  .cookie{ inset:auto 0 0 0; width:100%; border-radius:14px 14px 0 0 }
  .cookie-knapper{ flex-direction:column }}

/* --- Den reducerede fod --------------------------------------------------
   Kun login-siden bruger den. En fuld fod med fire spalter produktlinks
   ville staa og larme midt i et MitID-forloeb, men en side helt uden fod er
   en side uden juridiske links, kontakt og CVR.                            */
.minifod{
  background:var(--panel); color:var(--muted);
  border-top:1px solid var(--border);
  padding:26px 5%; font-size:13px; line-height:1.6;
}
.minifod-inder{ max-width:900px; margin-inline:auto; display:grid; gap:12px }
.minifod nav{ display:flex; flex-wrap:wrap; gap:10px 22px }
.minifod a{ text-decoration:underline; text-underline-offset:3px }
.minifod a:hover{ color:var(--green) }
.minifod-kontakt{ margin:0; display:flex; flex-wrap:wrap; gap:10px 22px }
.minifod .ansvarslinje{ margin:0; font-size:12px; line-height:1.55; max-width:80ch }

/* Kontaktsidens adresseblok. Adressen stod foer kun i foden; da
   kontaktblokken dér blev fjernet, flyttede den hertil. */
.kontakt-adresse{font-style:normal;line-height:1.75;margin-top:6px}
.kontakt-adresse strong{display:block;margin-bottom:2px}
.kontakt-adresse a{text-decoration:underline;text-underline-offset:3px}
.kontakt-adresse a:hover{color:var(--green)}

/* NB: bundlinjens links havde min-height:44px fra en rest i style.css, som
   kun ramte undersiderne og ikke forsiden. Den er ikke foert tilbage:
   foden skal se ud som paa forsiden, og forsiden havde den ikke. Paa
   telefon giver mobilreglen dem 34 px. Skal de op paa 44 overalt, er
   det en bevidst aendring af forsiden ogsaa. */

/* Beroeringsflade paa de smaa links i topbjaelken og foden.
   Reglen laa i forside.css, fordi selektorlisten ogsaa naevnte .call a,
   som kun findes i forsidens formular. Den blev derfor aldrig delt, og
   de 34 px fandtes kun paa forsiden: paa de 99 andre sider var fodens
   links 19 px hoeje. Foden skal se ens ud alle steder, saa her staar de
   delte selektorer, og .call a er blevet tilbage i forside.css. */
@media(max-width:760px){
  .topbar a,.footer-top a,.footer-bottom a{
    display:inline-flex;align-items:center;min-height:34px}
}

/* --- Cookieknappen ---------------------------------------------------------
   En fast knap nederst til venstre, der aabner samtykkepanelet igen. Samme
   greb som paa gavmild.dk, men uden Cookiebot: den bruger krogen
   data-cookieindstillinger, som allerede findes i main.js. Ingen tredjepart,
   ingen ny cookie. Sitet henter stadig kun fra sig selv.

   Den er skjult, indtil man har truffet et valg. Mens banneret staar
   aabent, er en knap, der aabner banneret, bare stoej.

   Samme moerke som handlingspillen i det andet hjoerne, saa de to laeses
   som ét par. Og den vender om over foden af samme grund som pillen:
   moerk paa moerk forsvinder.                                               */
.cookieknap{
  position:fixed; left:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  z-index:60; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--ink); padding:0; cursor:pointer;
  background:var(--ink); color:var(--paper);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(15,32,25,.22);
  transition:transform .18s ease, background .35s, color .35s, border-color .35s;
}
.cookieknap[hidden]{ display:none }
.cookieknap svg{ width:21px; height:21px; display:block }
.cookieknap:hover{ transform:translateY(-2px) }
.cookieknap:focus-visible{ outline:3px solid var(--brand-groen); outline-offset:3px }
.cookieknap.paa-moerk{ background:var(--paper); color:var(--ink); border-color:#c7cfc6 }
@media(max-width:760px){
  .cookieknap{ left:14px; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
               width:40px; height:40px }
  .cookieknap svg{ width:18px; height:18px }
}
@media(prefers-reduced-motion:reduce){ .cookieknap{ transition:none } }

/* Linjen i panelet, der fortaeller hvad man valgte, og hvornaar. */
.cookie-status{ margin:14px 0 0; font-size:13px; color:var(--muted); line-height:1.5 }
.cookie-status strong{ color:var(--ink) }