/* ===================================================================
   Telefonvagten DN — stilark
   Opdateret 4. november 2026: fuld bredde, kort, chatbobler.
   Farverne er uændrede: marineblå og rav.
   Bygget til telefon først. Alt herunder virker uden JavaScript.
   =================================================================== */

/* Overskriftsskriften. Bitter, SIL Open Font License, ligger på vores
   egen server i mappen /skrift. Der hentes intet fra fremmede servere —
   hverken Google Fonts eller et CDN — så cookiefriheden er uberørt.
   Licensen ligger i /skrift/LICENSE-bitter.txt. */
@font-face{
  font-family:"Bitter";
  src:url("/skrift/bitter-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#12253F;
  --ink-deep:#0B1728;
  --ink-soft:#1B3356;
  --amber:#E29A2E;
  --amber-dark:#B3741A;
  --amber-soft:#FDF3E2;
  --paper:#FFFFFF;
  /* Tre baggrunde i stedet for én, så sektionerne ligger i lag:
     varm papirhvid, køligt panel og det mørke bånd. */
  --paper-warm:#FAF8F5;
  --panel:#EFF1F4;
  --panel-deep:#E2E7EC;
  --line:#D3DAE1;
  --line-dark:#2A4365;
  --text:#16212E;
  --muted:#5A6875;
  --muted-light:#A8B6C6;
  --green:#1C6B45;
  --green-soft:#E6F0EA;
  --wrap:1280px;
  --wrap-bred:1460px;
  --wrap-smal:820px;
  --radius:14px;
  --shadow:0 1px 2px rgba(11,23,40,.05), 0 8px 24px -12px rgba(11,23,40,.18);
  --shadow-loft:0 2px 4px rgba(11,23,40,.05), 0 18px 40px -16px rgba(11,23,40,.3);
  --skrift-overskrift:"Bitter", Georgia, "Times New Roman", serif;
}

*,*::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;
  font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  font-size:17px;
  line-height:1.62;
  color:var(--text);
  background:var(--paper-warm);
  -webkit-font-smoothing:antialiased;
}

/* ---- Spalten ------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 20px;
}
@media (min-width:760px){ .wrap{padding:0 32px} }

/* Tre forskellige sektionsbredder. Ingen to sektioner i træk har
   samme — det er dét, der fjerner fornemmelsen af et dokument, hvor
   hver side har nøjagtig samme margen. Den ekstra bredde går til kort,
   tegninger og afspillere, aldrig til længere tekstlinjer. */
.w-bred{max-width:var(--wrap-bred)}
.w-smal{max-width:var(--wrap-smal)}

/* Brødtekst må ikke blive for bred, selvom sektionen er det.
   Bemærk: 1ch er bredden af et nul, og danske bogstaver er smallere.
   54ch giver cirka 66 tegn pr. linje, som er dér, hvor det læses
   behageligt. Målt efter, ikke gættet. */
.prose{max-width:54ch}
.prose p{margin:0 0 1.05rem}
.prose p:last-child{margin-bottom:0}

/* Form B: sektioner, der kun er tekst, sættes smalt og midt på siden. */
@media (min-width:860px){
  .smalsektion{max-width:62ch}
  .smalsektion .prose{max-width:none}
}

/* Form C: bærende sætning til venstre, detaljerne til højre. */
.tospalte{display:grid; gap:1.6rem}
@media (min-width:960px){
  .tospalte{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:3.4rem; align-items:start}
}
.baerer{
  font-family:var(--skrift-overskrift);
  font-size:clamp(1.18rem,2.6vw,1.5rem);
  line-height:1.38;
  font-weight:600;
  letter-spacing:-.01em;
  margin:0;
  max-width:26ch;
  color:var(--ink);
}
.band-dark .baerer{color:#fff}

/* Udtrukket sætning: et sted for øjet at lande. */
.udtraek{
  font-family:var(--skrift-overskrift);
  font-size:clamp(1.3rem,3.4vw,1.85rem);
  line-height:1.3;
  font-weight:700;
  letter-spacing:-.018em;
  color:var(--ink);
  max-width:24ch;
  margin:0 0 2rem;
  padding-left:1.1rem;
  border-left:4px solid var(--amber);
}

/* ---- Sektioner og bånd --------------------------------------------- */
section{padding:3.2rem 0}
@media (min-width:760px){ section{padding:4.6rem 0} }

.band-dark{background:var(--ink); color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark a{color:#fff}
.band-panel{background:var(--panel)}

/* ---- Overskrifter --------------------------------------------------- */
h1,h2,h3{line-height:1.2; letter-spacing:-.015em; margin:0}
h1,h2{font-family:var(--skrift-overskrift)}

h1{
  font-size:clamp(1.95rem,7.2vw,3.3rem);
  font-weight:700;
  margin:0 0 1.1rem;
  max-width:22ch;
}

h2{
  font-size:clamp(1.45rem,4.4vw,2.1rem);
  font-weight:700;
  margin:0 0 1.5rem;
  color:var(--ink);
  position:relative;
}
/* Den orange streg sidder kun på de fem bærende sektioner. Bruges et
   signal hver gang, holder det op med at være et signal. */
h2.hoved{padding-top:.95rem}
h2.hoved::before{
  content:"";
  position:absolute; top:0; left:0;
  width:46px; height:4px;
  background:var(--amber);
  border-radius:2px;
}

h3{font-size:1.1rem; font-weight:700; margin:0 0 .4rem; color:var(--ink)}

p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95em;
  background:var(--ink);
  color:#fff;
  padding:.16em .45em;
  border-radius:5px;
  white-space:nowrap;
}

.afsnitslede{max-width:62ch; color:var(--muted); margin:-.4rem 0 2rem}
.band-dark .afsnitslede{color:var(--muted-light)}

/* ---- Toplinje ------------------------------------------------------- */
.masthead{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem 1.4rem;
  align-items:center;
  justify-content:space-between;
  padding-top:1.3rem;
  padding-bottom:1.3rem;
}

.wordmark{
  display:block;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  text-decoration:none;
  line-height:1.25;
}
.wordmark span{
  display:block;
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--muted-light);
  margin-top:.12rem;
}

.nav{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.3rem}
.nav a{
  color:#D7E1EC;
  text-decoration:none;
  font-size:.93rem;
  /* Store nok trykflader til en finger — kunderne sidder på telefonen. */
  min-height:44px;
  display:flex;
  align-items:center;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--amber)}

.nav a.cta{
  background:var(--amber);
  color:var(--ink-deep);
  font-weight:700;
  padding:.5rem .95rem;
  border-radius:8px;
  border-bottom:none;
  justify-content:center;
}
.nav a.cta:hover{background:#F0A838; border-bottom:none}

.nav a.back{color:#D7E1EC}

/* ---- Hero ----------------------------------------------------------- */
.hero{padding-bottom:3.4rem}
@media (min-width:760px){ .hero{padding-bottom:4.6rem} }

/* På en computer står teksten til venstre og demokassen til højre,
   så toppen ikke bliver én lang smal spalte. */
@media (min-width:1000px){
  .hero{
    display:grid;
    grid-template-columns:1fr minmax(380px,460px);
    gap:1.6rem 3.4rem;
    align-items:start;
    padding-top:1.2rem;
  }
  .hero > .loefte{grid-column:1 / -1; margin-top:.6rem}
}

.lede{
  font-size:clamp(1.03rem,2.5vw,1.22rem);
  line-height:1.58;
  color:#DCE5EF;
  max-width:62ch;
  margin:0 0 1.5rem;
}

/* Tre trust-mærker */
.maerker{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .6rem;
  margin:0 0 2.1rem;
  padding:0;
}
.maerker li{
  font-size:.88rem;
  font-weight:600;
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:.4rem .9rem .4rem .78rem;
  display:flex;
  align-items:center;
  gap:.45rem;
}
.maerker li::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--amber);
  flex:0 0 auto;
}

/* Demokassen — sidens vigtigste element */
.demo{
  background:var(--ink-deep);
  border:1px solid var(--line-dark);
  border-top:4px solid var(--amber);
  border-radius:var(--radius);
  padding:1.5rem 1.3rem 1.6rem;
  max-width:620px;
}
@media (min-width:760px){ .demo{padding:1.9rem 1.8rem 2rem} }

.demo h2{
  font-size:1.18rem;
  margin:0 0 .95rem;
  padding-top:0;
  color:#fff;
}
.demo h2::before{display:none}

.demo p{
  font-size:.95rem;
  color:#C3D0DE;
  margin:1.1rem 0 0;
  max-width:52ch;
}

/* Telefonnummeret som knap */
.tel{
  display:block;
  text-align:center;
  background:var(--amber);
  color:var(--ink-deep) !important;
  font-size:clamp(1.75rem,8vw,2.6rem);
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  padding:.72rem 1rem;
  border-radius:10px;
  box-shadow:0 3px 0 var(--amber-dark);
  transition:transform .12s ease, background .12s ease;
}
.tel:hover{background:#F0A838; text-decoration:none}
.tel:active{transform:translateY(2px); box-shadow:0 1px 0 var(--amber-dark)}
@media (prefers-reduced-motion: reduce){ .tel{transition:none} .tel:active{transform:none} }

/* ---- Lydklippene med faner ------------------------------------------
   Fanerne er bygget med radioknapper, så de virker helt uden
   JavaScript. Et lille script standser blot det andet klip ved skift. */
.lyd{
  margin-top:1.1rem;
  background:var(--ink-deep);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:1.3rem 1.2rem 1.4rem;
  max-width:620px;
}
@media (min-width:760px){ .lyd{padding:1.5rem 1.6rem 1.6rem} }

.lyd-overskrift{
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  margin:0 0 .4rem;
}
.lyd-intro{
  font-size:.93rem;
  color:var(--amber);
  font-weight:600;
  margin:0 0 1.1rem;
}

.faner{display:flex; flex-wrap:wrap; gap:.5rem}
.faner > input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

.faner > label{
  order:1;
  cursor:pointer;
  font-size:.9rem;
  font-weight:700;
  color:#C3D0DE;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:.46rem 1rem;
  min-height:40px;
  display:flex;
  align-items:center;
}
.faner > label:hover{color:#fff}

#fag-el:checked ~ label[for="fag-el"],
#fag-kloak:checked ~ label[for="fag-kloak"]{
  background:var(--amber);
  border-color:var(--amber);
  color:var(--ink-deep);
}
.faner > input:focus-visible ~ label[for="fag-el"],
.faner > input:focus-visible ~ label[for="fag-kloak"]{
  outline:3px solid var(--amber);
  outline-offset:3px;
}

.fane{order:2; width:100%; display:none; margin-top:1rem}
#fag-el:checked ~ .fane-el{display:block}
#fag-kloak:checked ~ .fane-kloak{display:block}

.fane audio{width:100%; display:block; min-height:44px}
.lyd-note{font-size:.88rem; color:#C3D0DE; margin:.75rem 0 0}
.lyd-eksempel{font-size:.82rem; color:var(--muted-light); margin:1.1rem 0 0}

.loefte{
  margin:1.9rem 0 0;
  font-size:1rem;
  color:#C9D6E4;
  border-left:3px solid var(--amber);
  padding-left:1rem;
  max-width:58ch;
}

/* ---- Sådan fungerer det: to spalter -------------------------------- */
.todelt{display:grid; gap:2.6rem}
@media (min-width:1000px){
  .todelt{grid-template-columns:1fr 1fr; gap:3rem; align-items:start}
}

/* Nummererede cirkler */
ol.steps,ol.minitrin{list-style:none; counter-reset:t; margin:0; padding:0}

ol.steps li,ol.minitrin li{
  counter-increment:t;
  position:relative;
  padding-left:3.1rem;
  margin-bottom:1.5rem;
}
ol.steps li:last-child,ol.minitrin li:last-child{margin-bottom:0}

ol.steps li::before,ol.minitrin li::before{
  content:counter(t);
  position:absolute; left:0; top:-.1rem;
  width:2.2rem; height:2.2rem;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-weight:700;
  font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
ol.steps li p{margin:0; color:var(--muted); font-size:.97rem}
ol.minitrin li{margin-bottom:1.1rem; color:var(--text)}

.band-dark ol.steps li p{color:#C3D0DE}

/* ---- Chatbobler ----------------------------------------------------- */
.samtale{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.3rem 1.1rem;
}
@media (min-width:760px){ .samtale{padding:1.6rem 1.5rem} }

.samtale-top,.samtale-bund{
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  color:var(--muted);
  margin:0 0 1.1rem;
}
.samtale-bund{
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  font-size:.9rem;
  margin:1.2rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--ink);
}

.boble{
  position:relative;
  max-width:88%;
  margin:0 0 .7rem;
  padding:.72rem .95rem;
  border-radius:16px;
  font-size:.95rem;
  line-height:1.5;
}
.boble .hvem{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:700;
  opacity:.65;
  margin-bottom:.18rem;
}

.boble.ai{
  background:#fff;
  border:1px solid var(--line);
  border-bottom-left-radius:5px;
  margin-right:auto;
}
.boble.kunde{
  background:var(--ink);
  color:#fff;
  border-bottom-right-radius:5px;
  margin-left:auto;
}
.boble:last-of-type{margin-bottom:0}

/* ---- Tre udfald som kort -------------------------------------------- */
.outcomes{display:grid; gap:1.1rem}
@media (min-width:860px){ .outcomes{grid-template-columns:repeat(3,1fr); gap:1.4rem} }

.outcome{
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--ink);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem;
  box-shadow:var(--shadow-loft);
}
.outcome.ok{border-top-color:var(--green)}
.outcome.mail{border-top-color:var(--amber)}
.outcome h3{margin-bottom:.5rem}
.outcome p{font-size:.95rem; color:var(--muted); margin-bottom:.7rem}
.outcome p:last-child{margin-bottom:0}

.udfald-note{
  margin:1.5rem 0 0;
  font-size:.92rem;
  color:var(--muted);
  max-width:58ch;
}

.closing{
  margin-top:1.5rem;
  max-width:56ch;
  padding:1.3rem 1.4rem;
  background:#fff;
  box-shadow:var(--shadow);
  border-left:4px solid var(--amber);
  border-radius:0 8px 8px 0;
  font-size:1.02rem;
  font-weight:600;
  color:var(--ink);
}

/* ---- To spalter: gør / gør ikke ------------------------------------- */
.cols{display:grid; gap:2.3rem}
@media (min-width:760px){ .cols{grid-template-columns:1fr 1fr; gap:3rem} }
.cols h3{font-size:1.18rem; margin-bottom:1rem}

ul.ikke{list-style:none; margin:0; padding:0}
ul.ikke li{
  position:relative;
  padding-left:1.7rem;
  margin-bottom:.65rem;
  color:var(--muted);
}
ul.ikke li::before{
  content:"";
  position:absolute; left:.15rem; top:.72em;
  width:11px; height:2px;
  background:var(--muted);
}

/* ---- Tegningen: hvor opkaldet går hen -------------------------------
   Bygget i HTML, ikke som ét bredt billede, så de tre led stiller sig
   under hinanden på en telefon i stedet for at blive ulæseligt små.
   Pilene er to små inline-SVG'er, der drejer en kvart omgang på mobil. */
.vej{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.5rem;
  margin:0 0 2.4rem;
  max-width:820px;
}
@media (min-width:720px){
  .vej{flex-direction:row; align-items:center; gap:.9rem}
}

.led{
  flex:1 1 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.15rem 1.2rem;
  box-shadow:var(--shadow-loft);
  text-align:center;
}
.led-nr{
  display:block;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  color:var(--muted);
  margin-bottom:.22rem;
}
.led strong{display:block; font-size:1.05rem; color:var(--ink)}

/* Det midterste led er pointen: nummeret bliver, hvor det er. */
.led.fremhaev{
  background:var(--ink);
  border-color:var(--ink);
}
.led.fremhaev .led-nr{color:var(--amber)}
.led.fremhaev strong{color:#fff}

.pil{
  width:30px; height:16px;
  flex:0 0 auto;
  align-self:center;
  color:var(--amber);
  transform:rotate(90deg);
}
@media (min-width:720px){ .pil{transform:none} }

/* ---- Viderestillingsguiden ------------------------------------------ */
.guide{display:grid; gap:1.1rem}
@media (min-width:860px){ .guide{grid-template-columns:repeat(3,1fr); gap:1.3rem} }

.guidekort{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem;
  box-shadow:var(--shadow-loft);
}
.guidekort h3{margin-bottom:.15rem}
.guidekort p{font-size:.94rem; margin-bottom:.7rem}
.guidekort p:last-child{margin-bottom:0}
.gkort-under{
  font-size:.8rem !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  color:var(--amber-dark);
  margin-bottom:.9rem !important;
}
.gkort-note{color:var(--muted); font-size:.88rem !important; padding-top:.3rem}

.guide-fod{
  margin-top:1.6rem;
  font-size:.92rem;
  color:var(--muted);
  max-width:58ch;
}

/* ---- Pris ----------------------------------------------------------- */

.price{
  background:var(--ink-deep);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem;
}
.price .amount{
  font-family:var(--skrift-overskrift);
  font-size:clamp(2.3rem,9vw,3.2rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.025em;
  color:#fff;
}
.price .unit{margin-top:.6rem; color:#C3D0DE; font-size:.97rem}

/* Rav-mærket: selve tilbuddet. Alt i det er sandt ord for ord. */
.tilbud{
  background:var(--amber);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem;
  color:var(--ink-deep);
  margin-bottom:1.6rem;
  max-width:720px;
  box-shadow:0 14px 34px rgba(226,154,46,.2);
}
.tilbud-stor{
  font-family:var(--skrift-overskrift);
  font-size:clamp(1.6rem,5.8vw,2.1rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:0 0 .4rem;
}
.tilbud-linje{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 .85rem;
  color:#3A2A08;
}
.tilbud-note{font-size:.88rem; margin:0; color:#5C4512; max-width:58ch}

.inkl-overskrift{color:#fff; font-size:1.2rem; margin-bottom:1.1rem}

ul.incl{list-style:none; margin:0 0 2.4rem; padding:0; display:grid; gap:.7rem}
@media (min-width:860px){ ul.incl{grid-template-columns:1fr 1fr; gap:.8rem 2.2rem} }
ul.incl li{
  position:relative;
  padding-left:1.8rem;
  color:#DCE5EF;
  font-size:.96rem;
}
ul.incl li::before{
  content:"";
  position:absolute; left:.1rem; top:.42em;
  width:.42rem; height:.78rem;
  border-right:2.5px solid #7E92A8;
  border-bottom:2.5px solid #7E92A8;
  transform:rotate(42deg);
}

.terms{
  border-top:1px solid var(--line-dark);
  padding-top:1.7rem;
}
.terms dl{margin:0; display:grid; gap:.75rem}
@media (min-width:760px){
  .terms dl{grid-template-columns:minmax(140px,180px) 1fr; gap:.85rem 1.6rem}
}
.terms dt{font-weight:700; color:#fff; font-size:.96rem}
.terms dd{margin:0 0 .45rem; color:#C3D0DE; font-size:.96rem; max-width:56ch}
@media (min-width:760px){ .terms dd{margin-bottom:0} }

/* ---- Det med småt --------------------------------------------------- */
.smaat{display:grid; gap:1.1rem}
@media (min-width:760px){ .smaat{grid-template-columns:1fr 1fr; gap:1.4rem 1.8rem} }

.smaatkort{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem 1.5rem;
  box-shadow:var(--shadow);
}
.smaatkort h3{margin-bottom:.5rem; font-size:1.06rem}
.smaatkort p{font-size:.96rem; color:var(--muted); margin:0}
.smaatkort a{color:var(--ink)}

/* ---- Slutopfordring ------------------------------------------------- */
.slutcta{text-align:center}
.slutcta h2{display:inline-block; text-align:left}
.slutcta > .wrap > p{max-width:50ch; margin-left:auto; margin-right:auto; color:#DCE5EF}
.slutcta .tel{max-width:460px; margin:1.6rem auto 0}
.slutcta-under{margin-top:1.3rem !important; font-size:.95rem; color:var(--muted-light) !important}
.slutcta-under a{color:#fff}

/* ---- Hvem står bag -------------------------------------------------- */
.fakta{
  font-size:.9rem;
  color:var(--muted);
  letter-spacing:.01em;
  margin:-.7rem 0 1.5rem;
}

/* ---- Kontakt -------------------------------------------------------- */
.rule{border:0; border-top:1px solid var(--line); margin:0}

.contact{padding-top:3rem}
.contact dl{margin:0 0 2.6rem; display:grid; gap:.5rem}
@media (min-width:760px){
  .contact dl{grid-template-columns:minmax(130px,170px) 1fr; gap:.6rem 1.5rem}
}
.contact dt{font-weight:700; color:var(--ink); font-size:.95rem}
.contact dd{margin:0 0 .4rem; color:var(--text); font-size:.95rem}
@media (min-width:760px){ .contact dd{margin-bottom:0} }

.formkort{
  background:var(--panel);
  border-radius:var(--radius);
  padding:1.5rem 1.3rem;
  max-width:620px;
}
@media (min-width:760px){ .formkort{padding:1.9rem 1.8rem} }
.formkort h3{font-size:1.25rem; margin-bottom:.4rem}
.formlede{font-size:.96rem; color:var(--muted); margin-bottom:1.4rem}

.form{display:grid; gap:.3rem}
.form label{font-size:.9rem; font-weight:700; color:var(--ink); margin-top:.8rem}
.form label:first-of-type{margin-top:0}
.valgfri{font-weight:400; color:var(--muted); text-transform:none}

.form input,.form textarea{
  font:inherit;
  font-size:1rem;
  width:100%;
  padding:.68rem .8rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--text);
}
.form input:focus,.form textarea:focus{
  outline:3px solid rgba(226,154,46,.35);
  outline-offset:0;
  border-color:var(--amber-dark);
}
.form textarea{resize:vertical; min-height:4.6rem}

.form button{
  font:inherit;
  font-size:1.03rem;
  font-weight:700;
  margin-top:1.4rem;
  padding:.85rem 1.3rem;
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:9px;
  cursor:pointer;
}
.form button:hover{background:var(--ink-soft)}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.formnote{margin-top:1.2rem; font-size:.85rem; color:var(--muted); max-width:58ch}

/* ---- Andre brancher ------------------------------------------------- */
.andre{padding:2.3rem 0}
.andre p{max-width:58ch; margin:0; color:var(--ink); font-size:1rem}

/* ---- Bundlinje ------------------------------------------------------ */
footer{
  background:var(--ink-deep);
  color:#9FB0C2;
  font-size:.88rem;
  line-height:1.75;
  padding:2.1rem 0;
}
footer a{color:#CFDAE6}

/* ===================================================================
   Undersider: /telefonsamtaler og /privatliv samt kvitteringen
   =================================================================== */
.subhead{padding-bottom:.4rem}

.legal{max-width:68ch; margin:0 auto; padding:2.8rem 20px 3.4rem}
.legal h1{font-size:clamp(1.6rem,5vw,2.3rem); max-width:none; margin-bottom:1.3rem}
.legal h2{font-size:1.22rem; margin:2.4rem 0 .8rem; padding-top:0}
.legal h2::before{display:none}
.legal h3{font-size:1.02rem; margin:1.6rem 0 .4rem}
.legal p,.legal li{font-size:1rem}
.legal ul,.legal ol{padding-left:1.35rem}
.legal li{margin-bottom:.45rem}
.legal .opdateret{font-size:.9rem; color:var(--muted); margin-bottom:2rem}

/* Kvitteringssiden efter formularen */
.svar{padding:3.4rem 0 4rem}
.svar .boks{
  max-width:620px;
  background:var(--green-soft);
  border-left:5px solid var(--green);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.7rem 1.6rem;
}
.svar .boks.fejl{
  background:#FBEAEA;
  border-left-color:#A3272C;
}
.svar h1{font-size:clamp(1.45rem,4.6vw,2rem); margin-bottom:1rem; max-width:none; color:var(--green)}
.svar .boks.fejl h1{color:#A3272C}
.svar p{font-size:1rem; color:var(--text)}
.svar .videre{margin-top:1.3rem; margin-bottom:0}

/* ===================================================================
   Blid indtoning, når man ruller. Ren CSS.
   Understøttes ikke af alle browsere — og gør den ikke det,
   står indholdet bare synligt fra starten. Slået fra, hvis
   brugeren har bedt om mindre bevægelse i sit styresystem.
   =================================================================== */
@keyframes toning{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:none}
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation:toning linear both;
      animation-timeline:view();
      /* Indtoningen skal være helt færdig, kort efter sektionen
         kommer til syne. Høje sektioner på en telefon må aldrig
         kunne nå at stå halvt gennemsigtige, mens man læser dem. */
      animation-range:entry 2% entry 40%;
    }
  }
}

/* ---- Tastaturfokus -------------------------------------------------- */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:3px;
}
.band-dark a:focus-visible{outline-color:var(--amber)}


/* ===================================================================
   Sektionen "Det her ligger hos dig" — mailen og kalenderen
   Tegnet i HTML, ikke skærmbilleder: den skalerer på mobil, teksten
   kan markeres og søges, og der hentes ingen billedfil.
   =================================================================== */
.udbytte{background:var(--ink); color:#fff}
.udbytte h2{color:#fff}
.udbytte .afsnitslede{color:var(--muted-light)}

.udbytte-net{display:grid; gap:1.4rem; align-items:start}
@media (min-width:900px){
  .udbytte-net{grid-template-columns:1.25fr 1fr; gap:1.7rem}
}

.ukort{
  background:#fff;
  color:var(--text);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.14);
}
.ukort-top{
  display:flex; align-items:center; gap:.55rem;
  padding:.85rem 1.4rem;
  border-bottom:1px solid var(--line);
  font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.prik{width:7px; height:7px; border-radius:50%; background:var(--amber); flex:0 0 auto}
.ukort-krop{padding:1.4rem 1.4rem 1.5rem}

.emne{
  font-size:1.15rem; font-weight:700; line-height:1.3;
  letter-spacing:-.01em; margin:0 0 1.1rem; color:var(--ink);
}
.raekker{
  display:grid; grid-template-columns:auto 1fr;
  gap:.55rem 1.1rem;
  font-size:.9rem; line-height:1.5;
}
.raekker .k{color:var(--muted); white-space:nowrap}
.raekker .v{font-weight:600}
.tal{font-variant-numeric:tabular-nums}
.passer{
  display:inline-block; margin-top:.2rem;
  font-size:.74rem; font-weight:700;
  color:var(--green); background:var(--green-soft);
  border-radius:999px; padding:.2rem .65rem;
}
.resume{
  margin-top:1.1rem; padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:.87rem; line-height:1.6; color:#2C3A4B;
}
.resume b{color:var(--ink)}

.ukort.kalender{display:flex; flex-direction:column}
.kal-hoved{padding:1rem 1.4rem 0}
.kal-dag{
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.kal-dato{
  font-family:var(--skrift-overskrift);
  font-size:1.7rem; font-weight:700;
  letter-spacing:-.02em; margin:.1rem 0 .9rem; color:var(--ink);
}

/* Kalendergitteret er et rigtigt CSS-grid. Aftalen ligger i rækkerne
   for 15 og 16 — den kan ikke komme til at stå ud for det forkerte
   klokkeslæt, uanset hvad rækkehøjden bliver. */
.kal-net{
  display:grid;
  grid-template-columns:3rem 1fr;
  grid-auto-rows:2.1rem;
  padding:0 1.4rem 1.4rem;
  column-gap:.6rem;
}
.kal-tid{
  grid-column:1;
  font-size:.7rem; color:#9AA8B8;
  font-variant-numeric:tabular-nums;
  transform:translateY(-.4em);
}
.kal-linje{grid-column:2; border-top:1px solid var(--line)}
.kal-aftale{
  grid-column:2;
  grid-row:4 / span 2;
  align-self:stretch;
  background:var(--amber);
  color:#2A1A03;
  border-radius:10px;
  padding:.55rem .75rem;
  margin-top:1px;
  box-shadow:0 6px 16px rgba(226,154,46,.3);
}
.kal-aftale b{display:block; font-size:.82rem; line-height:1.3; font-weight:700}
.kal-aftale small{display:block; font-size:.72rem; opacity:.84; margin-top:.15rem}

.udbytte-fod{
  max-width:58ch; margin:2rem 0 0;
  color:var(--muted-light); font-size:.85rem; line-height:1.6;
}

/* ===================================================================
   De tre pakker
   =================================================================== */
.pakker{display:grid; gap:1.1rem; margin-bottom:1.8rem}
@media (min-width:880px){
  .pakker{grid-template-columns:repeat(3,1fr); gap:1.3rem; align-items:stretch}
}

.pakke{
  background:var(--ink-deep);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem 1.6rem;
  display:flex; flex-direction:column;
}

/* Standard er den fremhævede. Rav er sidens signal om "det her". */
.pakke.valgt{
  background:#fff;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(226,154,46,.28), 0 18px 40px rgba(0,0,0,.3);
}
.pakke-maerkat{
  display:inline-block; align-self:flex-start;
  background:var(--amber); color:var(--ink-deep);
  font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:.25rem .75rem;
  margin:0 0 .8rem;
}
.pakke-navn{
  font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-light); margin:0 0 .35rem;
}
.pakke.valgt .pakke-navn{color:var(--amber-dark)}

.pakke-pris{
  font-family:var(--skrift-overskrift);
  font-size:clamp(1.9rem,5.6vw,2.5rem);
  font-weight:700; line-height:1.05;
  letter-spacing:-.025em;
  color:#fff; margin:0;
}
.pakke.valgt .pakke-pris{color:var(--ink)}

.pakke-enhed{font-size:.86rem; color:#A8B6C6; margin:.35rem 0 1.1rem}
.pakke.valgt .pakke-enhed{color:var(--muted)}

ul.pakke-maal{
  list-style:none; margin:0; padding:1.1rem 0 0;
  border-top:1px solid var(--line-dark);
  display:grid; gap:.5rem;
}
.pakke.valgt ul.pakke-maal{border-top-color:var(--line)}
ul.pakke-maal li{font-size:.92rem; color:#DCE5EF; padding-left:1.4rem; position:relative}
.pakke.valgt ul.pakke-maal li{color:var(--text)}
.pakke.valgt ul.pakke-maal li::before{border-color:var(--muted)}
ul.pakke-maal li::before{
  content:""; position:absolute; left:0; top:.4em;
  width:.36rem; height:.68rem;
  border-right:2.5px solid #7E92A8;
  border-bottom:2.5px solid #7E92A8;
  transform:rotate(42deg);
}
ul.pakke-maal strong{color:#fff}
.pakke.valgt ul.pakke-maal strong{color:var(--ink)}

.booking-med{
  margin:0 0 2.4rem;
  max-width:62ch;
  font-size:.96rem;
  color:#DCE5EF;
  border-left:3px solid var(--amber);
  padding-left:1rem;
}
.booking-med strong{color:#fff}

/* Linjen under fanerne i lydafspilleren */
.lyd-fag{
  font-size:.86rem;
  color:#C3D0DE;
  margin:1rem 0 0;
  padding-top:.9rem;
  border-top:1px solid var(--line-dark);
}
.lyd-fag a{color:#fff}

.brancher-slut{margin-top:1.3rem}

/* Den korte linje om, hvem der driver firmaet */
.omos{
  max-width:58ch;
  margin:0 0 2.2rem;
  color:var(--muted);
  font-size:.97rem;
}


/* ===================================================================
   Tre kort i stedet for 200 ord: telefonsvarer, callcenter, os
   =================================================================== */
.baerer-fuld{max-width:48ch; margin-bottom:2.2rem}

.sammenlign{display:grid; gap:1.1rem}
@media (min-width:820px){ .sammenlign{grid-template-columns:repeat(3,1fr); gap:1.3rem} }

.skort{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:1.5rem 1.4rem;
}
.skort h3{color:#A8B6C6; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.6rem}
.skort p{font-size:.97rem; color:#C3D0DE; margin:0}

/* Vores egen er den, der skiller sig ud */
.skort.valgt{background:#fff; border-color:#fff; box-shadow:0 18px 40px rgba(0,0,0,.3)}
.skort.valgt h3{color:var(--amber-dark)}
.skort.valgt p{color:var(--text)}

.under-tegning{
  max-width:58ch;
  font-size:1.02rem;
  color:var(--muted);
  margin:0;
}

/* ===================================================================
   Sammenklappelige spørgsmål. <details> er indbygget i HTML:
   ingen JavaScript, virker med tastatur, og teksten indekseres.
   =================================================================== */
.smaat{display:grid; gap:.6rem}
@media (min-width:760px){ .smaat{grid-template-columns:1fr; gap:.6rem} }

details.sp{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
details.sp summary{
  list-style:none;
  cursor:pointer;
  padding:1.05rem 3rem 1.05rem 1.3rem;
  font-weight:700;
  font-size:1.02rem;
  color:var(--ink);
  position:relative;
  min-height:44px;
  display:flex;
  align-items:center;
}
details.sp summary::-webkit-details-marker{display:none}
details.sp summary::after{
  content:"";
  position:absolute; right:1.3rem; top:50%;
  width:.6rem; height:.6rem;
  border-right:2.5px solid var(--muted);
  border-bottom:2.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .18s ease;
}
details.sp[open] summary::after{transform:translateY(-20%) rotate(225deg)}
details.sp summary:hover{background:var(--panel)}
details.sp .svar{padding:0 1.3rem 1.25rem}
details.sp .svar p{font-size:.97rem; color:var(--muted); margin:0; max-width:62ch}
details.sp .svar a{color:var(--ink)}

@media (prefers-reduced-motion: no-preference){
  details.sp[open] .svar{animation:fold .22s ease both}
}
@keyframes fold{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ===================================================================
   Brancher: et gitter med ikoner. Klik udfylder feltet i formularen.
   =================================================================== */
.ikon-ark{display:none}

.fag-net{display:grid; gap:2rem}
@media (min-width:760px){ .fag-net{grid-template-columns:repeat(3,1fr); gap:2.4rem} }

.fag-gruppe h3{
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.9rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.fag-gruppe ul{list-style:none; margin:0; padding:0; display:grid; gap:.3rem}

.fag-gruppe a{
  display:flex; align-items:center; gap:.7rem;
  min-height:44px;
  padding:.45rem .7rem;
  border-radius:9px;
  text-decoration:none;
  color:var(--ink);
  font-size:.96rem;
  font-weight:600;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.fag-gruppe a:hover{border-color:var(--ink); background:var(--ink); color:#fff}

.fag-ikon{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--amber-dark);
}
.fag-gruppe a:hover .fag-ikon{color:var(--amber)}

.fag-slut{margin:2.2rem 0 0; max-width:62ch; font-size:.97rem}

/* ===================================================================
   Afspilleren. Bygges af scriptet; indtil da står browserens egen.
   =================================================================== */
.afspiller{
  display:flex; align-items:center; gap:.9rem;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line-dark);
  border-radius:999px;
  padding:.5rem .95rem .5rem .5rem;
}
.aknap{
  flex:0 0 auto;
  width:44px; height:44px;
  border:0; border-radius:50%;
  background:var(--amber);
  color:var(--ink-deep);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.aknap:hover{background:#F0A838}
.aknap svg{width:22px; height:22px; fill:currentColor}
.aknap .ikon-pause{display:none}
.afspiller.spiller .ikon-play{display:none}
.afspiller.spiller .ikon-pause{display:block}

.bjaelke{
  flex:1 1 auto;
  height:6px;
  background:rgba(255,255,255,.16);
  border-radius:3px;
  cursor:pointer;
  overflow:hidden;
}
.fyld{height:100%; width:0; background:var(--amber); border-radius:3px}
.atid{
  flex:0 0 auto;
  font-size:.84rem;
  color:#C3D0DE;
  font-variant-numeric:tabular-nums;
  min-width:2.6rem; text-align:right;
}

/* ===================================================================
   Trinnene toner ind ét ad gangen. Rækkefølgen ER pointen — derfor
   bærer bevægelsen information. Står helt stille, hvis browseren
   ikke kan det, eller hvis man har bedt om mindre bevægelse.
   =================================================================== */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    ol.steps > li, .samtale .boble, .vej .led, .vej .pil{
      animation:toning linear both;
      animation-timeline:view();
      animation-range:entry 4% entry 38%;
    }
  }
}

/* ---- Udskrift ------------------------------------------------------- */
@media print{
  .band-dark,footer{background:#fff !important; color:#000 !important}
  .band-dark h2,.band-dark h3,.wordmark,.tel{color:#000 !important}
  .tel{background:none !important; box-shadow:none !important; font-size:1.6rem}
  .nav,.reveal{display:revert}
  .reveal{animation:none}
}