/*  Consonify — husstil
 *  ===================
 *
 *  Sat op som et blad, ikke som et dashboard: én spalte, hårfine linjer i
 *  stedet for kasser og skygger, og en linjelængde på 63 tegn, fordi det er
 *  dét, der afgør, om nogen læser mere end to afsnit.
 *
 *  Der er ingen farve, der bærer betydning. Accenten bruges til det, man kan
 *  trykke på, og til tal, der skal findes igen — aldrig til at sige «god» eller
 *  «dårlig» om et menneske. Det er den samme regel som i selve analysen.
 */

:root{
  --blaek:#1B1917; --papir:#F4F1EB; --flade:#FFFFFF;
  --linje:#DBD4C8; --tone:#E8E2D6; --accent:#A8412B; --daemp:#6E6760;
  --maal:63ch;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --blaek:#F0ECE5; --papir:#161513; --flade:#1F1D1B;
    --linje:#37332F; --tone:#282521; --accent:#DD7358; --daemp:#A29B93;
  }
}
:root[data-theme="dark"]{
  --blaek:#F0ECE5; --papir:#161513; --flade:#1F1D1B;
  --linje:#37332F; --tone:#282521; --accent:#DD7358; --daemp:#A29B93;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--papir); color:var(--blaek);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.baand{border-top:1px solid var(--linje)}
.baand:first-of-type{border-top:0}
.inde{max-width:var(--maal); margin:0 auto; padding:56px 22px}
.bred{max-width:calc(var(--maal) + 12ch)}

h1,h2,h3{font-family:var(--serif); font-weight:400; text-wrap:balance; margin:0}
h1{font-size:clamp(2.1rem, 5.4vw, 3.1rem); line-height:1.12; letter-spacing:-0.012em}
/* Forsiden: søgeordet står i h1 (lille, som mærke), og den store linje er en p med h1's udseende */
.h1-stil{font-family:var(--serif); font-weight:400; text-wrap:balance; margin:0;
  font-size:clamp(2.1rem, 5.4vw, 3.1rem); line-height:1.12; letter-spacing:-0.012em}
h1.maerke{font-family:inherit; line-height:1.4; letter-spacing:.15em}
h2{font-size:clamp(1.45rem, 3.2vw, 1.8rem); line-height:1.22; margin-bottom:.5em}
h3{font-size:1.13rem; line-height:1.3; margin-bottom:.2em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--accent); text-underline-offset:3px}

.maerke{
  font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--daemp); margin:0 0 1.4em; font-weight:700;
}
.manchet{font-size:1.16rem; line-height:1.5; color:var(--daemp); max-width:52ch}
.lille{font-size:.93rem; color:var(--daemp)}

/* Toppen */
.top{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap; padding:20px 22px;
  max-width:calc(var(--maal) + 12ch); margin:0 auto;
}
.navn{font-family:var(--serif); font-size:1.28rem; letter-spacing:-.01em;
  color:var(--blaek); text-decoration:none}
.status{
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--daemp); border:1px solid var(--linje); border-radius:2px;
  padding:4px 9px;
}

/* Menuen. Seks punkter er få nok til at bryde om på en telefon frem for at
   skulle rulles vandret — vandret rul skjuler de sidste punkter for alle, der
   ikke ved, at de er der. */
.menu{
  max-width:calc(var(--maal) + 12ch); margin:0 auto; padding:11px 22px;
  display:flex; flex-wrap:wrap; gap:2px 20px;
}
.menu a{
  color:var(--daemp); text-decoration:none; font-size:.93rem;
  padding:3px 0; border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--blaek)}
.menu a[aria-current="page"]{color:var(--blaek); border-bottom-color:var(--accent)}

/* Figuren */
figure{margin:40px 0 0; padding:0}
figure svg{color:var(--blaek); width:100%}
figcaption{margin-top:14px; font-size:.93rem; color:var(--daemp); max-width:56ch}

/* Trin — nummereringen er en rækkefølge, ikke pynt */
ol.trin{list-style:none; margin:0; padding:0; counter-reset:t}
ol.trin li{
  counter-increment:t; display:grid; grid-template-columns:2.1em 1fr;
  gap:0 14px; padding:15px 0; border-top:1px solid var(--linje);
}
ol.trin li::before{
  content:counter(t); font-family:var(--serif); font-size:1.32rem;
  color:var(--accent); line-height:1.1;
}

/* Reglerne */
ul.regler{list-style:none; margin:0; padding:0}
ul.regler li{
  padding:13px 0 13px 26px; border-top:1px solid var(--linje);
  position:relative;
}
ul.regler li::before{
  content:"—"; position:absolute; left:0; top:13px; color:var(--accent);
}

/* Tal-linjer */
dl.tal{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0}
dl.tal dt, dl.tal dd{
  padding:11px 0; border-top:1px solid var(--linje); margin:0;
}
dl.tal dt{
  font-variant-numeric:tabular-nums; font-weight:700; padding-right:22px;
  white-space:nowrap;
}
/* På smal skærm klemmer to kolonner beskrivelsen ihjel — stak dem i stedet */
@media (max-width:560px){
  dl.tal{grid-template-columns:1fr}
  dl.tal dt{padding-bottom:0; border-bottom:0}
  dl.tal dd{padding-top:2px; border-top:0}
}

.fremhaev{background:var(--tone); border-radius:2px; padding:20px 22px; margin:26px 0}
.fremhaev p:first-child{margin-top:0}

/* Ser / ser ikke.
   To spalter, hvor den ene er tom for noget, den anden har. Det er sidens
   vigtigste påstand på de fleste af siderne, og den skal kunne aflæses uden
   at læse. */
.spalter{
  display:grid; grid-template-columns:1fr 1fr; gap:0 28px;
  border-top:1px solid var(--linje); margin:26px 0 0;
}
.spalter > div{padding:18px 0 4px}
.spalter > div + div{border-left:1px solid var(--linje); padding-left:28px}
.spalter h3{margin-bottom:.6em}
.spalter ul{list-style:none; margin:0; padding:0; font-size:.97rem}
.spalter li{padding:6px 0 6px 20px; position:relative}
.spalter li::before{
  content:"·"; position:absolute; left:4px; top:6px; color:var(--accent);
  font-weight:700;
}
@media (max-width:620px){
  .spalter{grid-template-columns:1fr}
  .spalter > div + div{border-left:0; padding-left:0; border-top:1px solid var(--linje)}
}

/* Citat fra en kilde. Kilden står altid — et citat uden afsender er en påstand. */
blockquote.citat{
  margin:24px 0; padding:0 0 0 20px; border-left:2px solid var(--accent);
  font-family:var(--serif); font-size:1.08rem; line-height:1.45;
}
blockquote.citat cite{
  display:block; margin-top:.7em; font-family:var(--sans); font-style:normal;
  font-size:.88rem; color:var(--daemp);
}

/* Noget der endnu ikke er på plads. Skal se anderledes ud end resten, uden at
   se ud som en advarsel — det er en oplysning, ikke en fare. */
.udestaar{
  border:1px solid var(--linje); border-radius:2px; padding:18px 20px;
  margin:26px 0; background:var(--flade);
}
.udestaar > p:first-child{margin-top:0}
.udestaar .maerke{margin-bottom:.8em}

.knap{
  display:inline-block; background:var(--accent); color:var(--papir);
  font-family:var(--sans); font-weight:700; text-decoration:none;
  padding:13px 22px; border-radius:2px; margin-top:6px;
}
.knap.rolig{background:none; color:var(--accent); border:1px solid var(--linje)}
.knap:focus-visible, a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* Videre herfra — de to-tre næste sider, den her læser sandsynligvis skal se */
.videre{display:grid; gap:0; margin-top:8px}
.videre a{
  display:block; padding:14px 0; border-top:1px solid var(--linje);
  text-decoration:none; color:var(--blaek);
}
.videre a:last-child{border-bottom:1px solid var(--linje)}
.videre a strong{color:var(--accent); font-weight:400; font-family:var(--serif);
  font-size:1.1rem; display:block}
.videre a span{color:var(--daemp); font-size:.93rem}

footer{color:var(--daemp); font-size:.9rem}
footer a{color:var(--daemp)}
@media (prefers-reduced-motion: no-preference){
  a, .knap{transition:opacity .15s}
}
.knap:hover{opacity:.88}

@media print{
  .menu, .status{display:none}
  body{background:#fff; color:#000; font-size:11pt}
}

/* ---------------------------------------------------------------- bestilling */
.bestil .felt{display:block; margin:0 0 1.1em}
.bestil .felt span{display:block; font-size:.95rem; color:var(--daemp); margin-bottom:.35em}
.bestil input[type=text],.bestil input[type=email],.bestil input[type=number],
.bestil input[type=date],.bestil select{
  width:100%; box-sizing:border-box; font:inherit; font-size:1rem; padding:.62em .7em;
  border:1px solid var(--linje); border-radius:6px; background:var(--papir); color:var(--blaek)}
.bestil input:focus-visible,.bestil select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.bestil fieldset{border:1px solid var(--linje); border-radius:10px; padding:1em 1.1em .2em; margin:1.4em 0 0}
.bestil legend{font-size:.95rem; color:var(--daemp); padding:0 .4em}
.bestil .valg{display:flex; gap:.75em; align-items:flex-start; margin:0 0 1em; line-height:1.45}
.bestil .valg input{margin-top:.3em; width:1.15em; height:1.15em; accent-color:var(--accent); flex:none}
.bestil .lille{font-size:.9rem; color:var(--daemp)}
.bestil .trin{padding-left:1.2em; line-height:1.55}
.bestil .fejl{color:var(--accent); font-weight:700}
.boks.gron{border-left:3px solid #2F6B4F; background:var(--tone); padding:1em 1.2em; margin-top:1.4em}

/* ---------------------------------------------------------------- salgssiden */
.menu a.menu-bestil{background:var(--accent); color:var(--papir); padding:4px 12px;
  border-radius:2px; font-weight:700}
.menu a.menu-bestil[aria-current]{text-decoration:none}
.knap.stor{font-size:1.08rem; padding:15px 26px}
.salg-cta{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; margin-top:1.8em}
.salg-cta .knap{margin-top:0}
.prislinje{color:var(--daemp); font-size:.95rem; margin-top:.9em}
.prislinje strong{color:var(--blaek)}
figure.reol{margin:2.4em 0 0}
figure.reol img{width:100%; height:auto; display:block}
figure.reol figcaption{font-size:.88rem; color:var(--daemp); margin-top:.6em}
.boeger{display:grid; grid-template-columns:1fr 1fr; gap:34px 38px; margin-top:2em}
.bogkort{display:grid; grid-template-columns:132px 1fr; gap:18px; align-items:start}
.bogkort img{width:100%; height:auto; display:block}
.bogkort h3{margin:.15em 0 .45em}
.bogkort .maerke{margin:0}
.bogkort ul{margin:0; padding-left:1.1em; font-size:.95rem; line-height:1.45}
.bogkort li{margin:.25em 0}
.bogkort .lille{margin:.6em 0 0; font-size:.88rem; color:var(--daemp)}
.bogkort.bred-bog{grid-template-columns:170px 1fr}
@media (max-width:760px){ .boeger{grid-template-columns:1fr} }
@media (max-width:420px){ .bogkort, .bogkort.bred-bog{grid-template-columns:96px 1fr; gap:14px} }
.prisboks{border:1px solid var(--linje); border-top:3px solid var(--accent); background:var(--flade);
  padding:22px 24px; margin:1.2em 0 1.6em}
.prisboks .belob{font-family:var(--serif); font-size:2.4rem; line-height:1.1; margin:0 0 .5em}
.prisboks .belob span{font-family:var(--sans); font-size:1rem; color:var(--daemp)}
dl.faq dt{font-weight:700}
.bestil .total{font-family:var(--serif); font-size:1.35rem; margin:.2em 0 .6em}
.top-bestil{background:var(--accent); color:var(--papir); text-decoration:none; font-weight:700;
  font-size:.9rem; padding:8px 14px; border-radius:2px; white-space:nowrap}
.top-bestil:hover{opacity:.88}
@media print{ .top-bestil{display:none} }
.bestil .rabat{color:var(--groen,#2F6B4F); font-weight:700; font-size:.95rem; margin:-.3em 0 .8em}

/* priskort på prissiden */
.priskort{display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:18px; align-items:stretch}
.pk{background:var(--flade); border:1px solid var(--linje); padding:22px 22px 20px;
  display:flex; flex-direction:column}
.pk.hoved{border-top:3px solid var(--accent)}
.pk .maerke{margin:0 0 .6em}
.pk-belob{font-family:var(--serif); font-size:2.3rem; line-height:1; margin:0}
.pk-enhed{color:var(--daemp); font-size:.9rem; margin:.4em 0 1em}
.pk ul{margin:0 0 1em; padding-left:1.1em; font-size:.95rem; line-height:1.45}
.pk li{margin:.3em 0}
.pk .knap{margin-top:auto; align-self:flex-start}
@media (max-width:760px){ .priskort{grid-template-columns:1fr} }
.pk-belob{font-size:2.05rem; white-space:nowrap}
/* Logoet i sidehovedet: større, så navnet bærer siden ved siden af Bestil-knappen */
.top{align-items:center}
.navn svg{height:46px !important; width:auto}
@media (max-width:560px){ .navn svg{height:36px !important} }
.vilkaar h2{font-size:1.25rem; margin:1.6em 0 .4em}
.vilkaar ul{padding-left:1.2em}
.vilkaar h3{font-size:1.02rem; margin:1.3em 0 .3em}
.jura-tabel{width:100%; border-collapse:collapse; font-size:.92rem; margin:.4em 0 1em}
.jura-tabel th,.jura-tabel td{text-align:left; vertical-align:top; padding:.45em .6em; border-bottom:1px solid var(--linje, #DBD4C8)}
.jura-tabel th{font-weight:600}
@media (max-width:560px){.jura-tabel,.jura-tabel tr,.jura-tabel td,.jura-tabel th{display:block; width:auto}.jura-tabel tr:first-child{display:none}.jura-tabel td{border:0; padding:.15em 0}.jura-tabel tr{border-bottom:1px solid var(--linje, #DBD4C8); padding:.4em 0}}

/* Spring til indhold — synligt kun ved tastaturfokus */
.spring{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#fff; padding:10px 16px;
  border-radius:0 0 8px 0; text-decoration:none; font-weight:600;
}
.spring:focus{left:0}