@charset "utf-8";
/* =========================================================================
   Poller — ét stylesheet.

   Idéen: en "poller" er den lave pæl på fortovet — og samtidig en søjle i et
   søjlediagram. Hele siden bygger på den ene form: afrundede lodrette stave.
   Otte gule og to grå staver ER 80/20-delingen; de samme staver er
   fremdriftsviser i profilflowet og bomærke i toppen.

   Farverne er havnekant: blækblå kaj, dyb petroleum, og den gule
   refleksstribe fra pælen. Mobilen først — alt herunder er skrevet til en
   telefon, og først derefter foldet ud på brede skærme.

   Ingen inline styles og ingen inline scripts noget sted i projektet, så en
   stram CSP kan sættes uden 'unsafe-inline'.
   ========================================================================= */

/* --- Skrifter (selv-hostede; ingen Google-CDN, ingen IP til tredjeland) --- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 200 800; font-stretch: 75% 100%;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/static/fonts/karla-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: italic; font-weight: 200 800; font-display: swap;
  src: url('/static/fonts/karla-var-italic.woff2') format('woff2');
}

:root {
  --blaek: #14202b;
  --blaek-2: #1c2c3a;
  --blaek-3: #27394a;
  --daemp: #5d6f7d;
  --daemp-lys: #93a3ae;

  --papir: #fbfaf7;
  --papir-2: #f1efe8;
  --kalk: #ded9cc;

  --signal: #ffd53d;
  --signal-2: #f7c21c;
  --signal-mork: #6b5100;

  --dyb: #0d5148;
  --dyb-2: #12695e;
  --dyb-lys: #dde9e5;

  --rod: #9c2d19;
  --rod-lys: #fbe6e1;

  --skrift-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --skrift-brød: 'Karla', 'Segoe UI', sans-serif;

  --runding: 0.7rem;
  --runding-stor: 1.4rem;
  --kant: 1px solid var(--kalk);
  --skygge: 0 1px 0 var(--kalk), 0 12px 28px -22px rgba(20, 32, 43, .6);
  --spalte: 62rem;
  --gab: clamp(2.75rem, 8vw, 5.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papir);
  color: var(--blaek);
  font-family: var(--skrift-brød);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--skrift-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 8.5vw, 4.4rem); }
h2 { font-size: clamp(1.65rem, 5.4vw, 2.5rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.2; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--dyb-2);
  outline-offset: 2px;
  border-radius: 3px;
}
.hero :focus-visible, .top--mork :focus-visible { outline-color: var(--signal); }

.spring-over {
  position: absolute; left: .75rem; top: -4rem; z-index: 20;
  background: var(--signal); color: var(--blaek);
  padding: .6rem 1rem; border-radius: var(--runding); font-weight: 700;
  transition: top .15s ease;
}
.spring-over:focus { top: .75rem; }

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

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---------------------------------------------------------------- staverne */

.mont__staver, .poller-raekke, .maerke__poller, .fremdrift {
  display: flex; align-items: flex-end; gap: .32rem; padding: 0; margin: 0;
  list-style: none;
}

.mont__stav, .poller-raekke i, .maerke__poller i, .fremdrift__trin {
  display: block;
  border-radius: .4rem .4rem .12rem .12rem;
  background: currentColor;
  transform-origin: bottom;
}

/* Bomærket: fire staver i ujævn højde — pæle på et fortov. */
.maerke {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit;
}
.maerke__poller { height: 1.55rem; gap: .18rem; color: var(--blaek); }
.maerke__poller i { width: .28rem; }
.maerke__poller i:nth-child(1) { height: 62%; }
.maerke__poller i:nth-child(2) { height: 100%; background: var(--signal-2); }
.maerke__poller i:nth-child(3) { height: 78%; }
.maerke__poller i:nth-child(4) { height: 90%; }
.maerke__poller--lys { color: var(--papir); }
.maerke__navn {
  font-family: var(--skrift-display); font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.04em;
}

/* --------------------------------------------------------------------- top */

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  width: min(100% - 2rem, var(--spalte));
  margin: 0 auto; padding: 1.1rem 0 .9rem;
}
.top__nav { display: flex; gap: 1.15rem; font-weight: 600; font-size: .95rem; }
.top__nav a { text-decoration: none; border-bottom: 2px solid var(--kalk); padding-bottom: 2px; }
.top__nav a:hover { border-bottom-color: var(--signal-2); }

/* ------------------------------------------------------------------- layout */

.spalte { width: min(100% - 2rem, var(--spalte)); margin: 0 auto; }
.spalte--smal { max-width: 38rem; }
.sektion { padding: var(--gab) 0; }
.sektion + .sektion { padding-top: 0; }
.lead { font-size: 1.14rem; color: var(--blaek-3); max-width: 44ch; }
.fodnote { font-size: .9rem; color: var(--daemp); max-width: 52ch; }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  background: var(--blaek);
  color: var(--papir);
  padding: clamp(2rem, 7vw, 4.5rem) 0 5rem;
  overflow: hidden;
}
/* Svagt lysfald fra øverste venstre — dybde uden gradientkliché. */
.hero::before {
  content: ""; position: absolute; inset: -30% 40% 40% -30%;
  background: radial-gradient(closest-side, rgba(255, 213, 61, .13), transparent);
  pointer-events: none;
}
.hero__indre { position: relative; width: min(100% - 2rem, var(--spalte)); margin: 0 auto; }
/* På brede skærme deler hero'en sig: ordene til venstre, formularen som kort
   til højre — ellers står halvdelen af skærmen tom. */
@media (min-width: 60rem) {
  .hero__gitter { display: grid; grid-template-columns: 1.08fr .92fr; gap: 3.5rem; align-items: start; }
  /* Overskriften har mindre plads i to-spaltet layout end i fuld bredde. */
  .hero__gitter h1 { font-size: clamp(2.5rem, 4.4vw, 3.7rem); }
  .hero__kort {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--blaek-3);
    border-radius: var(--runding-stor);
    padding: 1.85rem;
    margin-top: 3.2rem;
  }
}
.hero__kort-titel { font-size: 1.5rem; margin-bottom: .3rem; }
.hero__kort-under { font-size: .95rem; color: var(--daemp-lys); margin-bottom: 0; }
.hero__kort .tilmeld { margin-top: 1.4rem; max-width: none; }
.hero h1 em { font-style: normal; color: var(--signal); display: inline-block; }
.hero .manchet { font-size: 1.16rem; color: #cbd6de; max-width: 40ch; }

.maerkat {
  display: inline-block;
  font-family: var(--skrift-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--signal);
  border: 1px solid rgba(255, 213, 61, .45);
  border-radius: 2rem; padding: .3rem .85rem; margin: 0 0 1.4rem;
}

/* Otte gule og to grå staver = delingen, tegnet i sidens egen grundform. */
.mont { margin: 2.2rem 0 2.4rem; }
.mont__staver { height: clamp(4.5rem, 11vw, 6.5rem); gap: clamp(.28rem, 1.4vw, .6rem); }
.mont__stav { flex: 1 1 0; max-width: 4.6rem; height: 100%; }
.mont__stav--dig { background: var(--signal); }
.mont__stav--os { background: var(--blaek-3); }
.mont__tekst { margin: .9rem 0 0; color: #cbd6de; font-size: 1rem; }
.mont__tekst b { color: var(--papir); }

/* Pælerækken langs hero'ens underkant — et fortov, siden hviler på. */
.poller-raekke--kant {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1.6rem; gap: .5rem; padding: 0 1rem;
  color: var(--papir);
}
.poller-raekke--kant i { flex: 1 1 0; height: 100%; border-radius: .45rem .45rem 0 0; }
.poller-raekke--kant i:nth-child(odd) { height: 68%; }
.poller-raekke--kant i:nth-child(3n) { height: 88%; }

@media (prefers-reduced-motion: no-preference) {
  .mont__stav { animation: rejs .55s cubic-bezier(.2, .9, .3, 1) backwards; }
  .mont__stav:nth-child(1) { animation-delay: .04s } .mont__stav:nth-child(2) { animation-delay: .08s }
  .mont__stav:nth-child(3) { animation-delay: .12s } .mont__stav:nth-child(4) { animation-delay: .16s }
  .mont__stav:nth-child(5) { animation-delay: .20s } .mont__stav:nth-child(6) { animation-delay: .24s }
  .mont__stav:nth-child(7) { animation-delay: .28s } .mont__stav:nth-child(8) { animation-delay: .32s }
  .mont__stav:nth-child(9) { animation-delay: .40s } .mont__stav:nth-child(10) { animation-delay: .44s }
  @keyframes rejs { from { transform: scaleY(.06); opacity: .2 } to { transform: scaleY(1); opacity: 1 } }
}

/* Mærkatet uden for hero'en — samme form, blæk i stedet for gult. */
.maerkat--moerk { color: var(--dyb); border-color: var(--dyb-lys); background: var(--dyb-lys); }

.hero--erhverv { padding-bottom: 4.5rem; }
.hero--erhverv .besked__handling { margin-top: 2rem; }

.stort-tal {
  font-family: var(--skrift-display); font-weight: 800;
  font-size: clamp(2.2rem, 9vw, 3rem); letter-spacing: -0.035em;
}

/* ------------------------------------------------------------------ knapper */

.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .85rem 1.5rem;
  font-family: var(--skrift-display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.01em;
  border: 2px solid var(--blaek); border-radius: var(--runding);
  background: var(--papir); color: var(--blaek);
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.knap:hover { transform: translateY(-2px); box-shadow: 0 6px 0 -1px var(--blaek); }
.knap:active { transform: translateY(0); box-shadow: none; }
.knap--signal { background: var(--signal); border-color: var(--signal-2); }
.knap--signal:hover { box-shadow: 0 6px 0 -1px var(--signal-mork); }
.knap--dyb { background: var(--dyb); border-color: var(--dyb); color: var(--papir); }
.knap--dyb:hover { box-shadow: 0 6px 0 -1px #04302a; }
.knap--rolig { background: transparent; border-color: var(--kalk); font-weight: 600; }
.knap--fare { background: var(--rod); border-color: var(--rod); color: #fff; }
.knap--bred { width: 100%; }

/* ---------------------------------------------------------------- formularer */

.tilmeld { max-width: 30rem; }
.hero .tilmeld { margin-top: 2.4rem; }
.tilmeld__felt { margin-bottom: .9rem; }
label { display: block; font-weight: 700; font-size: .95rem; margin-bottom: .35rem; }

input[type="email"], input[type="text"], input[type="tel"], input[type="number"],
select, textarea {
  width: 100%; min-height: 3.25rem;
  padding: .8rem .95rem;
  font: inherit; font-size: 1.05rem;
  color: var(--blaek); background: var(--papir);
  border: 2px solid var(--kalk); border-radius: var(--runding);
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--blaek) 50%),
                    linear-gradient(135deg, var(--blaek) 50%, transparent 50%);
  background-position: right 1.35rem center, right 1rem center;
  background-size: .38rem .38rem, .38rem .38rem;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--dyb-2); }
::placeholder { color: var(--daemp-lys); }

.hero input[type="email"] { border-color: var(--blaek-3); background: var(--blaek-2); color: var(--papir); }
.hero label { color: var(--papir); }

.tilmeld__samtykke {
  display: flex; gap: .7rem; align-items: flex-start;
  font-weight: 400; font-size: .95rem; line-height: 1.45;
  margin: 1rem 0 1.25rem;
}
.tilmeld__samtykke input { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .1rem; accent-color: var(--dyb); }
.tilmeld__note { font-size: .88rem; color: var(--daemp); margin: .8rem 0 0; }
.hero .tilmeld__note { color: var(--daemp-lys); }

.felt-par { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .felt-par { grid-template-columns: 1fr 1fr; } }

.fejl {
  background: var(--rod-lys); color: var(--rod);
  border-left: 4px solid var(--rod); border-radius: .25rem;
  padding: .75rem .9rem; margin: 0 0 1.1rem; font-weight: 600; font-size: .97rem;
}
.hero .fejl { background: #3a1d16; color: #ffc9bb; }

/* --------------------------------------------------------------- kvittering */

.kvittering {
  margin: 0; max-width: 34rem;
  background: var(--papir-2);
  border: var(--kant); border-radius: var(--runding-stor);
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: var(--skygge);
}
.kvittering dl { margin: 0; }
.kvittering__linje {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .62rem 0; border-bottom: 1px dashed var(--kalk);
}
.kvittering__linje dt { color: var(--blaek-3); }
.kvittering__linje dd { margin: 0; font-weight: 700; white-space: nowrap; }
.kvittering__linje--fradrag dd { color: var(--daemp); }
.kvittering__linje--sum {
  border-bottom: 0; border-top: 3px solid var(--blaek);
  margin-top: .35rem; padding-top: .9rem;
}
.kvittering__linje--sum dt { font-weight: 700; color: var(--blaek); font-size: 1.1rem; }
.kvittering__linje--sum dd {
  font-family: var(--skrift-display); font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 800; letter-spacing: -0.03em;
}
.kvittering__slag {
  margin: 1.15rem 0 0; padding: .85rem 1rem;
  background: var(--signal); border-radius: var(--runding);
  font-size: 1.05rem;
}
.kvittering figcaption {
  margin-top: 1.15rem; font-size: .88rem; line-height: 1.5; color: var(--daemp);
}

/* -------------------------------------------------------- løfter, trin, kort */

.loefter, .trin {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
}
@media (min-width: 46rem) { .loefter, .trin { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.loefter li, .trin li {
  background: var(--papir-2); border: var(--kant); border-radius: var(--runding-stor);
  padding: 1.35rem 1.4rem 1.5rem;
}
.loefter li { border-top: 5px solid var(--dyb); }
.loefte__nr {
  display: block; font-family: var(--skrift-display); font-weight: 800;
  font-size: 1rem; color: var(--dyb); letter-spacing: .06em; margin-bottom: .5rem;
}
.loefter p, .trin p { font-size: .98rem; color: var(--blaek-3); margin: 0; }

.trin { counter-reset: trin; }
.trin li { counter-increment: trin; position: relative; padding-top: 3.2rem; }
.trin li::before {
  content: counter(trin);
  position: absolute; top: 1.2rem; left: 1.4rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blaek); color: var(--signal);
  font-family: var(--skrift-display); font-weight: 800; font-size: 1rem;
}

/* ------------------------------------------------------------------- tabel */

.tabel { width: 100%; border-collapse: collapse; margin: 1.5rem 0 1rem; text-align: left; }
.tabel caption { caption-side: bottom; padding-top: .8rem; font-size: .85rem; color: var(--daemp); text-align: left; }
.tabel th, .tabel td { padding: .8rem .5rem; border-bottom: 1px solid var(--kalk); vertical-align: top; }
.tabel thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--daemp); }
.tabel tbody th { font-weight: 700; }
.tabel__os th, .tabel__os td, td.tabel__os {
  background: var(--signal); border-bottom-color: var(--signal-2); font-weight: 700;
}

/* ------------------------------------------------------------- ærlig blok */

.aerlig {
  background: var(--dyb); color: var(--dyb-lys);
  border-radius: var(--runding-stor);
  padding: clamp(1.5rem, 5vw, 2.5rem);
}
.aerlig h2 { color: var(--papir); }
.aerlig strong { color: var(--signal); }

/* ------------------------------------------------------- profilflow (kort) */

.kort-side { padding: 1.5rem 0 var(--gab); }
.kort {
  background: var(--papir-2); border: var(--kant); border-radius: var(--runding-stor);
  padding: clamp(1.35rem, 5vw, 2.25rem);
  box-shadow: var(--skygge);
}
.kort h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: .35rem; }
.kort__hjaelp { color: var(--daemp); font-size: .97rem; margin: 0 0 1.5rem; }

.fremdrift { gap: .3rem; height: 1.35rem; margin: 0 0 1.5rem; }
.fremdrift__trin {
  flex: 1 1 0; height: 55%; background: var(--kalk);
  transition: height .2s ease, background .2s ease;
}
.fremdrift__trin.er-svaret { height: 100%; background: var(--dyb); }
.fremdrift__trin.er-nu { height: 100%; background: var(--signal-2); }
.fremdrift__tekst {
  font-size: .82rem; color: var(--daemp); margin: -1rem 0 1.6rem;
  display: flex; justify-content: space-between; gap: .75rem;
  white-space: nowrap;
}

.valg { display: grid; gap: .6rem; margin: 0 0 1.25rem; }
.valg__knap {
  display: flex; align-items: center; gap: .8rem;
  width: 100%; min-height: 3.4rem; padding: .8rem 1rem;
  font: inherit; font-size: 1.05rem; font-weight: 600; text-align: left;
  background: var(--papir); color: var(--blaek);
  border: 2px solid var(--kalk); border-radius: var(--runding);
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease, background .12s ease;
}
.valg__knap:hover { border-color: var(--blaek); transform: translateX(3px); }
.valg__knap.er-valgt { border-color: var(--dyb); background: var(--dyb-lys); }
.valg__knap--afvis { color: var(--daemp); font-weight: 500; }

.valg--flere label {
  display: flex; align-items: center; gap: .8rem;
  min-height: 3.4rem; padding: .7rem 1rem; margin: 0;
  font-weight: 600; font-size: 1.05rem;
  background: var(--papir); border: 2px solid var(--kalk); border-radius: var(--runding);
  cursor: pointer;
}
.valg--flere input { flex: none; width: 1.5rem; height: 1.5rem; accent-color: var(--dyb); }
.valg--flere input:checked + span { color: var(--dyb); }
.valg--flere label:has(input:checked) { border-color: var(--dyb); background: var(--dyb-lys); }

.kort__fod {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--kalk);
  font-size: .9rem; color: var(--daemp);
}
.kort__spring {
  background: none; border: 0; padding: .5rem 0; margin: 0;
  font: inherit; font-size: .95rem; color: var(--daemp);
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}

/* ------------------------------------------------------------------ paneler */

.panel {
  background: var(--papir-2); border: var(--kant); border-radius: var(--runding-stor);
  padding: clamp(1.35rem, 4vw, 2rem); margin-bottom: 1.25rem;
}
.panel h2 { font-size: 1.35rem; }
.panel--kvittering { border-top: 5px solid var(--dyb); }

.delelink {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  background: var(--blaek); color: var(--papir);
  border-radius: var(--runding); padding: .9rem 1rem;
  font-size: .95rem; word-break: break-all;
}
.delelink code { font-family: var(--skrift-brød); font-weight: 700; color: var(--signal); }

.noegletal { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 34rem) { .noegletal { grid-template-columns: repeat(3, 1fr); } }
.noegletal li {
  background: var(--papir-2); border: var(--kant); border-radius: var(--runding);
  padding: .9rem 1rem;
}
.noegletal b {
  display: block; font-family: var(--skrift-display); font-weight: 800;
  font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1.1;
}
.noegletal span { font-size: .85rem; color: var(--daemp); }

.svarliste { list-style: none; margin: 0; padding: 0; }
.svarliste li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px dashed var(--kalk);
}
.svarliste li:last-child { border-bottom: 0; }
.svarliste__mangler { color: var(--daemp); font-style: italic; }
.svarliste a { font-size: .9rem; }

/* -------------------------------------------------------------- prosa/jura */

.prosa { max-width: 40rem; padding: 1.5rem 0 var(--gab); }
.prosa h1 { margin-bottom: .3rem; }
.prosa h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.prosa h3 { margin-top: 1.6rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .5rem; }
.prosa__dato { color: var(--daemp); font-size: .92rem; margin-bottom: 2rem; }
.prosa table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.prosa th, .prosa td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--kalk); vertical-align: top; }

/* --------------------------------------------------------------- besked-side */

.besked { padding: clamp(2rem, 8vw, 5rem) 0 var(--gab); max-width: 34rem; }
.besked h1 { margin-bottom: .5rem; }
.besked .lead { font-size: 1.15rem; }
.besked__handling { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* -------------------------------------------------------------------- admin */

.admin-tabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-tabel th, .admin-tabel td {
  text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--kalk);
  white-space: nowrap;
}
.admin-tabel td.brud { white-space: normal; min-width: 16rem; }
.admin-tabel thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--daemp); }
.rul { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mini {
  font: inherit; font-size: .8rem; padding: .3rem .6rem; cursor: pointer;
  background: transparent; border: 1px solid var(--kalk); border-radius: .35rem; color: var(--rod);
}
.mini:hover { border-color: var(--rod); }
.maerke-ok { color: var(--dyb); font-weight: 700; }
.maerke-vent { color: var(--daemp); }

/* ------------------------------------------------------------------- bunden */

.bund { background: var(--blaek); color: #b9c5ce; margin-top: var(--gab); padding: 2.5rem 0 3rem; }
.bund__indre { width: min(100% - 2rem, var(--spalte)); margin: 0 auto; display: grid; gap: 1.75rem; }
@media (min-width: 46rem) { .bund__indre { grid-template-columns: 1fr auto; align-items: start; } }
.bund__ord { display: flex; gap: .9rem; align-items: flex-start; max-width: 34rem; }
.bund__ord p { font-size: .93rem; margin: 0; }
.bund__nav { display: flex; flex-direction: column; gap: .55rem; font-size: .93rem; }
.bund__nav a { text-decoration: none; }
.bund__nav a:hover { text-decoration: underline; }
.bund__logud button {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: .93rem; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em;
}

/* ---------------------------------------------------------------- beregner */

.sektion--pris { padding-top: 2rem; }

.beregner {
  margin-top: 2rem;
  background: var(--papir-2);
  border: var(--kant); border-radius: var(--runding-stor);
  padding: clamp(1.35rem, 4vw, 2rem);
}
.beregner__felter { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 40rem) { .beregner__felter { grid-template-columns: repeat(3, 1fr); } }

.beregner__gruppe { margin-bottom: 1.5rem; }
.beregner__gruppe legend {
  font-family: var(--skrift-display); font-weight: 700; font-size: 1.05rem;
  padding: 0; margin-bottom: .7rem;
}
.beregner__valg {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .85rem 1rem; margin: 0 0 .55rem;
  font-weight: 400;
  background: var(--papir); border: 2px solid var(--kalk);
  border-radius: var(--runding); cursor: pointer;
}
.beregner__valg:has(input:checked) { border-color: var(--dyb); background: var(--dyb-lys); }
.beregner__valg input { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .2rem; accent-color: var(--dyb); }
.beregner__valg b { display: block; font-size: 1.02rem; }
.beregner__valg em { font-style: normal; font-size: .92rem; color: var(--daemp); line-height: 1.45; }

/* ------------------------------------------------------------------ tilbud */

.tilbud { border: 2px solid var(--blaek); border-radius: var(--runding-stor); overflow: hidden; }
.tilbud__hoved {
  background: var(--blaek); color: var(--papir);
  padding: clamp(1.35rem, 4vw, 2rem);
}
.tilbud__etiket {
  font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--signal); margin: 0 0 .5rem;
}
.tilbud__total { margin: 0; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.tilbud__total b {
  font-family: var(--skrift-display); font-weight: 800;
  font-size: clamp(2.4rem, 10vw, 3.6rem); letter-spacing: -0.035em; line-height: 1;
}
.tilbud__total span { font-size: .95rem; color: var(--daemp-lys); }
.tilbud__enhed { margin: .7rem 0 0; font-size: .95rem; color: #cbd6de; }
.tilbud__krop { padding: clamp(1.35rem, 4vw, 2rem); background: var(--papir); }
.tilbud__krop h2 { font-size: 1.35rem; }
.kvittering--bred { max-width: none; background: var(--papir-2); }

.deling-tavle { margin-top: 2rem; }
.deling-tavle h3 { margin-bottom: .8rem; }
.deling-tavle ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 40rem) { .deling-tavle ul { grid-template-columns: 4fr 1fr; } }
.deling-tavle li {
  border-radius: var(--runding); padding: .9rem 1.1rem;
  background: var(--signal);
}
.deling-tavle li + li { background: var(--kalk); }
.deling-tavle b {
  display: block; font-family: var(--skrift-display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.03em; line-height: 1.15;
}
.deling-tavle span { font-size: .88rem; }

.uden-punkt { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .8rem; }
.uden-punkt li {
  padding-left: 1.6rem; position: relative; max-width: 54ch;
}
.uden-punkt li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .7rem; height: .18rem; background: var(--dyb); border-radius: 2px;
}
.knap--paa-moerk { color: var(--papir); border-color: var(--blaek-3); }
.knap--paa-moerk:hover { box-shadow: 0 6px 0 -1px var(--blaek-3); }

/* Tre tal øverst i hero'en. Timelønnen er det vigtigste salgsargument, så den
   står først og skal kunne læses uden at scrolle. Adskilt af stave — samme
   motiv som resten af sitet. */
.noegletal-hero {
  list-style: none; margin: 1.75rem 0 1.9rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem;
}
.noegletal-hero li {
  position: relative; padding-left: 1.05rem; min-width: 8.5rem;
}
.noegletal-hero li::before {
  content: ""; position: absolute; left: 0; top: .15rem; bottom: .3rem;
  width: .3rem; border-radius: .18rem .18rem .06rem .06rem;
  background: var(--blaek-3);
}
.noegletal-hero li:first-child::before { background: var(--signal); }
.noegletal-hero b {
  display: block;
  font-family: var(--skrift-display); font-weight: 800;
  font-size: clamp(1.7rem, 6.5vw, 2.1rem); letter-spacing: -0.035em; line-height: 1.05;
}
.noegletal-hero li:first-child b { color: var(--signal); }
.noegletal-hero span {
  display: block; font-size: .88rem; color: #b6c3cd; line-height: 1.35; margin-top: .15rem;
}
.hero__skat {
  max-width: 44ch; font-size: .95rem; color: #b6c3cd;
  border-left: 3px solid var(--blaek-3); padding-left: .9rem; margin: 0 0 1.5rem;
}
.hero__skat b { color: var(--papir); }

/* ------------------------------------------------- beregnerens nye elementer */

.beregner__raekke { display: grid; gap: .55rem; }
@media (min-width: 46rem) {
  .beregner__raekke { grid-template-columns: repeat(2, 1fr); }
}
.beregner__hjaelp {
  font-size: .93rem; color: var(--daemp); margin: -.2rem 0 .8rem; max-width: 60ch;
}
.beregner__gruppe + .beregner__gruppe { border-top: 1px dashed var(--kalk); padding-top: 1.5rem; }

/* Svaret på "hvor mange skal vi bruge" — sidens vigtigste tal. */
.svar-boks {
  display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
  background: var(--signal); border-radius: var(--runding-stor);
  padding: 1.2rem 1.4rem; margin: 0 0 1.5rem;
}
.svar-boks__tal {
  font-family: var(--skrift-display); font-weight: 800;
  font-size: clamp(2.6rem, 11vw, 3.6rem); letter-spacing: -0.04em;
  line-height: 1; margin: 0;
}
.svar-boks__tekst { margin: 0; flex: 1 1 14rem; font-size: .98rem; }

.advarsel {
  background: #fff6e0; border-left: 4px solid var(--signal-2);
  border-radius: .25rem; padding: .8rem 1rem; margin: 0 0 1.5rem;
  font-size: .97rem;
}

/* Det, tallet ikke kan. Skal være synligt, ikke gemt som et fodnotesuk. */
.forbehold {
  margin: 1.25rem 0 0; padding: 1.1rem 1.3rem;
  background: var(--papir-2); border: var(--kant); border-left: 4px solid var(--dyb);
  border-radius: var(--runding);
  font-size: .95rem; line-height: 1.55; color: var(--blaek-3);
}

#resultat[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }

/* Fejl står UNDER feltet, ikke samlet i toppen (DESIGNSPEC § 2). */
.feltfejl {
  margin: .35rem 0 0; min-height: 0; font-size: .9rem; font-weight: 600;
  color: var(--rod);
}
.feltfejl:empty { display: none; }
[aria-invalid="true"] { border-color: var(--rod); }
[aria-invalid="true"]:focus { border-color: var(--rod); }

button[disabled] { opacity: .6; cursor: progress; }

/* Brede tabeller ruller i deres egen kasse. SIDEN må aldrig rulle vandret
   (DESIGNSPEC § 5) — en side, der kan skubbes sidelæns på en telefon, føles
   ødelagt, uanset hvor pæn tabellen er. */
.rul--tabel { margin: 1.5rem 0 1rem; }
.rul--tabel .tabel { margin: 0; min-width: 26rem; }
.rul--tabel .tabel caption { padding-bottom: .8rem; caption-side: top; }
.rul--tabel .prosa table, .prosa .rul--tabel table { min-width: 22rem; }