/* ==========================================================================
   planvarsel.css — designsystem "2a Matrikel"
   ==========================================================================
   Kilde: design/RETNINGER.md (Lasses valg 5/8-2026) + design/runde2_forside.html
   sektion #2a (fundament) + lån af #2b's afstandsringe.

   Idé: sitet er ét kontinuerligt dokument på varmt papir — en
   matrikeludskrift, ikke et dashboard. Ingen mørk chrome, ingen
   rundede hjørner, ingen skygger. Kun rust (#A8402A) betyder noget —
   den bruges UDELUKKENDE hvor der er en frist eller et varsel: et
   overskredet felt, en aktiv høring på kortet, en flagget sag. Aldrig i
   logo, eyebrows eller som pynt (Kates rettelse, 5/8).

   Genbrugelig af dashboard/portal senere — derfor design-tokens først.
   ========================================================================== */

:root{
  /* --- papir & blæk ------------------------------------------------- */
  --pv-paper:       #F3EDE1;  /* sidens bund, overalt — ingen mørk chrome */
  --pv-paper-deep:  #EAE2D0;  /* paneler: kort, dot-matrix, timeline-bund */
  --pv-paper-light: #FBF7EE;  /* kort der "flyder" ovenpå papiret: Ring-kort, cases */
  --pv-ink:         #1F1C16;  /* near-black — tekst, alle strukturelle 1px-linjer */
  --pv-ink-soft:    #3B372D;  /* brødtekst — lidt blødere end ren ink */
  --pv-muted:       #6E6353;  /* mono-labels/meta ved normal tekststørrelse (AA 4.5:1 verificeret) */
  --pv-muted-soft:  #8A7E67;  /* samme tone, kun til store tal/dekorative captions (AA 3:1, large-text) */
  --pv-line:        #1F1C16; /* solide strukturlinjer (sektionsskel, kort-rammer) */
  --pv-grid:        #D8CDB6; /* hårfine underopdelinger (baggrundsgitter, rækkelinjer) */
  --pv-line-soft:   #CFC3A9; /* kortets "ingen status"-omrids */

  /* --- signal: rust KUN til frist/varsel ------------------------------ */
  --pv-rust:      #A8402A;
  --pv-rust-tint: #F6E7E1;  /* baggrund for en advarselsboks — kun når indholdet ER en frist/advarsel */

  /* --- neutral geo — Kates fold af slate #566E7E + sage #9BA98F ------- */
  /* Kun til grafik: kortets "afsluttet"-status, afstandsringe, streger.
     ALDRIG til tekst — kontrastforhold mod papir er for lavt (2.9:1). */
  --pv-geo:      #798C87;
  --pv-geo-tint: #C7D0C9;

  /* --- typografi ------------------------------------------------------ */
  --pv-font-display: 'Archivo', system-ui, sans-serif;   /* 700/800 — overskrifter */
  --pv-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; /* data/labels */
  --pv-font-body:    'IBM Plex Sans', system-ui, sans-serif; /* brødtekst */

  /* --- layout ----------------------------------------------------------- */
  --pv-wrap: 1120px;
  --pv-wrap-narrow: 760px;
  --pv-pad: 64px;
  --pv-pad-mobile: 22px;
}

/* ========================================================================
   Reset + grundtypografi
   ======================================================================== */
.pv-root, .pv-root *{box-sizing:border-box}
.pv-root{
  margin:0;
  background:var(--pv-paper);
  color:var(--pv-ink-soft);
  font-family:var(--pv-font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.pv-root h1,.pv-root h2,.pv-root h3{
  font-family:var(--pv-font-display);
  color:var(--pv-ink);
  letter-spacing:-0.03em;
  margin:0;
}
.pv-root h1{font-weight:800;font-size:clamp(32px,5.4vw,54px);line-height:1.04}
.pv-root h2{font-weight:700;font-size:clamp(26px,3.6vw,40px);line-height:1.08}
.pv-root h3{font-weight:700;font-size:clamp(18px,2vw,21px);line-height:1.25;letter-spacing:-0.01em}
.pv-root p{margin:0 0 16px;max-width:66ch;color:var(--pv-ink-soft)}
.pv-root p:last-child{margin-bottom:0}
.pv-root a{color:var(--pv-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.pv-root a:hover{color:var(--pv-rust)}
.pv-root a.pv-bare{text-decoration:none}
.pv-root a.pv-bare:hover{text-decoration:none}
.pv-root b, .pv-root strong{font-weight:600;color:var(--pv-ink)}
.pv-root .pv-num{font-family:var(--pv-font-mono);font-variant-numeric:tabular-nums}

.pv-wrap{max-width:var(--pv-wrap);margin:0 auto;padding:0 var(--pv-pad-mobile)}
@media(min-width:760px){.pv-wrap{padding:0 40px}}
@media(min-width:1000px){.pv-wrap{padding:0 40px}}

.pv-wrap-narrow{max-width:var(--pv-wrap-narrow);margin:0 auto;padding:0 22px}

/* ========================================================================
   Eyebrows, mono-labels — ALDRIG rust. Rust er data, ikke pynt.
   ======================================================================== */
.pv-eyebrow{
  display:block;
  font:500 11px/1 var(--pv-font-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pv-muted);
  margin-bottom:16px;
}
.pv-meta{font:400 12px/1.5 var(--pv-font-mono);color:var(--pv-muted);letter-spacing:.02em}

/* ========================================================================
   Logo — matrikel-mærke. Monokrom (ink), ingen rust.
   ======================================================================== */
.pv-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--pv-font-display);
  font-weight:700;font-size:19px;letter-spacing:-0.02em;color:var(--pv-ink)}
.pv-logo svg{display:block;flex:none}

/* ========================================================================
   Header
   ======================================================================== */
.pv-header{border-bottom:1px solid var(--pv-line);background:var(--pv-paper)}
.pv-header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:64px}
.pv-nav{display:none;align-items:center;gap:26px;font:400 14px/1 var(--pv-font-body)}
.pv-nav a{color:var(--pv-ink-soft);text-decoration:none}
.pv-nav a:hover{color:var(--pv-rust)}
.pv-ring{font:500 15px/1 var(--pv-font-mono);color:var(--pv-ink);text-decoration:none;
  white-space:nowrap;border-bottom:1px solid var(--pv-ink);padding-bottom:2px}
.pv-ring:hover{color:var(--pv-rust);border-color:var(--pv-rust)}
.pv-ring .pv-ring-full{display:none}
@media(min-width:560px){.pv-ring .pv-ring-full{display:inline}.pv-ring .pv-ring-short{display:none}}
@media(min-width:860px){.pv-nav{display:flex}}
.pv-header-tag{display:none;font:400 11px/1 var(--pv-font-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--pv-muted)}
@media(min-width:1080px){.pv-header-tag{display:block}}

/* ========================================================================
   Sektioner — hårfin ink-linje som skel, ikke skiftende baggrund
   ======================================================================== */
.pv-section{padding:56px 0}
@media(min-width:760px){.pv-section{padding:80px 0}}
.pv-section + .pv-section{border-top:1px solid var(--pv-line)}
.pv-section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:32px}
@media(min-width:760px){
  .pv-section-head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px}
}
.pv-section-head .pv-eyebrow{margin-bottom:0}
.pv-intro{max-width:62ch}
.pv-intro p{font-size:17px}

/* ========================================================================
   Knapper / kald-til-handling — ingen fyldte farveknapper. Bordered box,
   som en post-attest, ikke en SaaS-CTA.
   ======================================================================== */
/* NB: ".pv-root a"-reglen ovenfor har specificitet (0,1,1) — knap-reglerne
   spejles derfor som ".pv-root a.pv-btn" (0,2,1), så links-i-knapform ikke
   arver understregning og ink-farve (fejlen gav sort tekst på sort knap). */
.pv-btn, .pv-root a.pv-btn{
  display:inline-flex;align-items:center;gap:8px;
  font:500 14px/1 var(--pv-font-body);
  padding:12px 20px;
  border:1px solid var(--pv-ink);
  color:var(--pv-ink);
  text-decoration:none;
  background:transparent;
  cursor:pointer;
}
.pv-btn:hover, .pv-root a.pv-btn:hover{border-color:var(--pv-rust);color:var(--pv-rust)}
.pv-btn-solid, .pv-root a.pv-btn-solid{background:var(--pv-ink);color:var(--pv-paper)}
.pv-btn-solid:hover, .pv-root a.pv-btn-solid:hover{background:var(--pv-rust);border-color:var(--pv-rust);color:var(--pv-paper)}

/* ========================================================================
   Hero
   ======================================================================== */
.pv-hero{padding:48px 0 60px}
.pv-hero-grid{display:grid;gap:36px;align-items:start;padding-bottom:40px}
@media(min-width:900px){.pv-hero-grid{grid-template-columns:1.25fr 320px;gap:56px}}
.pv-hero h1{max-width:20ch;text-wrap:pretty}
.pv-hero-dek{margin:14px 0 0;font:500 19px/1.45 var(--pv-font-body);color:var(--pv-ink);max-width:44ch}
.pv-hero .pv-sub{margin-top:14px;font-size:17px;line-height:1.55;max-width:58ch;color:var(--pv-ink-soft)}
.pv-hero-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pv-hero-stat{margin-top:18px;font:400 13px/1.6 var(--pv-font-mono);color:var(--pv-muted)}
.pv-hero-stat b{color:var(--pv-ink);font-weight:500}
.pv-hero-stat .pv-rust-txt{color:var(--pv-rust);font-weight:500}

.pv-callcard{border:1px solid var(--pv-ink);background:var(--pv-paper-light);padding:22px 24px}
.pv-callcard .pv-eyebrow{margin-bottom:10px}
.pv-callcard .pv-tel{display:block;font-family:var(--pv-font-display);font-weight:800;
  font-size:27px;letter-spacing:-0.03em;color:var(--pv-ink);text-decoration:none}
.pv-callcard .pv-tel:hover{color:var(--pv-rust)}
.pv-callcard p{margin-top:12px;font-size:14.5px}

.pv-hero-art{border:1px solid var(--pv-line);background:var(--pv-paper-deep);overflow:hidden}
.pv-hero-art svg{display:block;width:100%;height:auto}

/* Kortet flyttet ind i hero (5/8, Lasses feedback) — det skal være det
   første besøgende ser, ikke den håndtegnede matrikel. */
.pv-hero-kort{margin-top:8px;scroll-margin-top:24px}
.pv-hero-kort-stats{display:flex;flex-wrap:wrap;gap:32px;margin-top:24px;padding-top:20px;border-top:1px solid var(--pv-line)}
.pv-hero-kort-stats > div{display:flex;flex-direction:column;gap:5px;min-width:112px}
.pv-hero-kort-stats b{font-family:var(--pv-font-mono);font-weight:500;font-size:clamp(26px,4vw,32px);
  line-height:1;letter-spacing:-0.02em;color:var(--pv-ink);font-variant-numeric:tabular-nums}
.pv-hero-kort-stats span{font-size:13px;color:var(--pv-ink-soft)}
.pv-hero-kort-stats .pv-stat-flag b{color:var(--pv-rust)}

/* ========================================================================
   Funnel / trin-tal — store mono-tal, hårfine rækkelinjer. Ingen cirkler.
   ======================================================================== */
.pv-funnel{border-top:1px solid var(--pv-line);max-width:720px}
.pv-frow{display:grid;grid-template-columns:104px 1fr;gap:22px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--pv-grid)}
.pv-frow b{font-family:var(--pv-font-mono);font-weight:500;font-size:30px;line-height:1;
  letter-spacing:-0.02em;color:var(--pv-muted-soft);text-align:right;font-variant-numeric:tabular-nums}
.pv-frow span{font-size:15.5px;color:var(--pv-ink-soft)}
.pv-frow.pv-last b, .pv-frow.pv-last span{color:var(--pv-ink)}
.pv-frow.pv-flag b{color:var(--pv-rust)}
.pv-swatch{display:inline-block;width:10px;height:10px;margin-left:6px;vertical-align:middle}

/* ========================================================================
   Fristen inden fristen — tidslinje-SVG
   ======================================================================== */
.pv-tl{margin-top:26px;border:1px solid var(--pv-line);background:var(--pv-paper-deep)}
.pv-tl svg{display:block;width:100%;height:auto}

/* ========================================================================
   Danmarkskort — bærende sektion
   ======================================================================== */
.pv-kort-legend{display:flex;flex-direction:column;gap:9px}
.pv-kort-legend .pv-li{display:flex;align-items:center;gap:9px;font:400 13px/1 var(--pv-font-mono);color:var(--pv-ink-soft)}
.pv-kort-legend .sw{width:14px;height:14px;display:block;flex:none}
.pv-kort-panel{margin-top:22px;border:1px solid var(--pv-line);background:var(--pv-paper-deep);padding:22px;position:relative}
.pv-kort-holder{position:relative}
.pv-kort-holder svg{display:block;width:100%;height:auto}
.pv-kommune{stroke:var(--pv-paper-deep);stroke-width:1.1;cursor:pointer;transition:filter .1s}
.pv-kommune:hover,.pv-kommune:focus-visible{filter:brightness(0.9);outline:none}
.pv-kommune[data-status="active"]{fill:var(--pv-rust)}
.pv-kommune[data-status="past"]{fill:var(--pv-geo)}
.pv-kommune[data-status="none"]{fill:var(--pv-paper);stroke:var(--pv-line-soft)}
.pv-kort-tip{
  position:absolute;pointer-events:none;z-index:6;max-width:240px;
  background:var(--pv-ink);color:var(--pv-paper);
  font:400 12.5px/1.5 var(--pv-font-body);padding:10px 13px;
  transform:translate(-50%,-100%);margin-top:-10px;opacity:0;transition:opacity .1s;
}
.pv-kort-tip b{display:block;font-family:var(--pv-font-mono);font-weight:500;font-size:12px;
  letter-spacing:.04em;color:var(--pv-paper);margin-bottom:3px}
.pv-kort-tip.vis{opacity:1}
.pv-kort-foot{margin-top:16px;display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;
  justify-content:space-between}
.pv-kort-toggle{background:none;border:0;padding:0;font:400 13px/1 var(--pv-font-mono);
  color:var(--pv-ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pv-kort-toggle:hover{color:var(--pv-rust)}
.pv-kort-liste{display:none;margin-top:18px;border-top:1px solid var(--pv-grid)}
.pv-kort-liste.vis{display:block}
.pv-kort-liste table{width:100%;border-collapse:collapse;font-size:14px}
.pv-kort-liste th{text-align:left;font:500 11px/1 var(--pv-font-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--pv-muted);padding:12px 10px 8px;border-bottom:1px solid var(--pv-line)}
.pv-kort-liste td{padding:8px 10px;border-bottom:1px solid var(--pv-grid);color:var(--pv-ink-soft)}
.pv-kort-liste td.pv-num{color:var(--pv-ink)}
.pv-kort-liste tr td:first-child{color:var(--pv-ink)}

/* ========================================================================
   Dot-matrix — 1 felt = 1 sag. Tal fra tal.json, aldrig håndskrevet.
   ======================================================================== */
.pv-dotgrid{display:grid;grid-template-columns:repeat(var(--pv-cols,20),1fr);gap:3px;max-width:420px}
.pv-dotgrid span{aspect-ratio:1;display:block;background:var(--pv-paper);border:1px solid var(--pv-line-soft)}
.pv-dotgrid span[data-mark="flag"]{background:var(--pv-rust);border-color:var(--pv-rust)}
.pv-dotgrid span[data-mark="nabo"]{background:var(--pv-geo);border-color:var(--pv-geo)}
.pv-dotgrid-cap{margin-top:14px;font:400 12px/1.5 var(--pv-font-mono);color:var(--pv-muted)}
.pv-dot-wrap{display:grid;gap:40px;align-items:start}
@media(min-width:820px){.pv-dot-wrap{grid-template-columns:auto 1fr;gap:56px}}

/* ========================================================================
   Afstand — koncentriske ringe, lånt fra 2b, tegnet i papir-paletten
   ======================================================================== */
.pv-afstand-grid{display:grid;gap:34px;align-items:center}
@media(min-width:860px){.pv-afstand-grid{grid-template-columns:1fr 1fr;gap:52px}}
.pv-afstand-art{border:1px solid var(--pv-line);background:var(--pv-paper-deep)}
.pv-afstand-art svg{display:block;width:100%;height:auto}

/* ========================================================================
   Trin (Sådan virker det) — mono-tal i stedet for nummererede cirkler
   ======================================================================== */
.pv-trin{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--pv-line)}
@media(min-width:640px){.pv-trin{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.pv-trin{grid-template-columns:repeat(4,1fr)}}
.pv-trin-item{padding:22px 22px 22px 0;border-bottom:1px solid var(--pv-grid)}
@media(min-width:640px){.pv-trin-item{border-right:1px solid var(--pv-grid);padding-right:24px}
  .pv-trin-item:nth-child(2n){border-right:0}}
@media(min-width:960px){.pv-trin-item{border-right:1px solid var(--pv-grid)}
  .pv-trin-item:nth-child(2n){border-right:1px solid var(--pv-grid)}
  .pv-trin-item:last-child{border-right:0}}
.pv-trin-num{font-family:var(--pv-font-mono);font-size:13px;color:var(--pv-muted);
  letter-spacing:.06em;margin-bottom:12px}
.pv-trin-item h3{margin-bottom:8px}
.pv-trin-item p{font-size:14.5px}

/* ========================================================================
   To spor
   ======================================================================== */
.pv-spor{display:grid;grid-template-columns:1fr;gap:22px;margin-top:8px}
@media(min-width:760px){.pv-spor{grid-template-columns:1fr 1fr}}
.pv-spor-kort{border:1px solid var(--pv-line);background:var(--pv-paper-light);padding:28px;
  display:flex;flex-direction:column}
.pv-spor-kort p{font-size:15px;flex:1}
.pv-spor-kort .pv-btn{align-self:flex-start;margin-top:14px}

/* ========================================================================
   Om — tillid
   ======================================================================== */
.pv-om{display:grid;gap:36px}
@media(min-width:860px){.pv-om{grid-template-columns:1.3fr 1fr;gap:56px}}
.pv-om-facts{border:1px solid var(--pv-line);background:var(--pv-paper-light);padding:26px}
.pv-om-facts dt{font:500 11px/1 var(--pv-font-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--pv-muted);margin-top:16px}
.pv-om-facts dt:first-child{margin-top:0}
.pv-om-facts dd{margin:6px 0 0;font-size:14.5px;color:var(--pv-ink-soft)}
.pv-om-lede{font-size:19px;line-height:1.5;color:var(--pv-ink);font-weight:500;margin-bottom:18px}
.pv-om-stpl{margin-top:20px;font:400 13px/1.6 var(--pv-font-mono);color:var(--pv-muted)}

/* ========================================================================
   Forbehold + habilitet
   ======================================================================== */
.pv-forbehold{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.pv-forbehold{grid-template-columns:repeat(3,1fr)}}
.pv-forbehold h3{font-size:16.5px}
.pv-forbehold p{font-size:14.5px}
.pv-hab{margin-top:44px;border-left:2px solid var(--pv-ink);padding:20px 0 20px 24px;max-width:74ch}
.pv-hab h3{font-size:16px}
.pv-hab p{font-size:14.5px}

/* ========================================================================
   Kontakt / afsluttende CTA
   ======================================================================== */
.pv-cta{background:var(--pv-paper-deep)}
.pv-cta-grid{display:flex;flex-direction:column;gap:32px}
@media(min-width:820px){.pv-cta-grid{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:48px}}
.pv-cta h2{max-width:18ch}
.pv-cta-contact{text-align:left}
@media(min-width:820px){.pv-cta-contact{text-align:right}}
.pv-cta-contact .pv-tel{display:block;font-family:var(--pv-font-display);font-weight:800;
  font-size:clamp(26px,4vw,36px);letter-spacing:-0.03em;color:var(--pv-ink);text-decoration:none}
.pv-cta-contact .pv-tel:hover{color:var(--pv-rust)}
.pv-cta-contact .pv-mail{display:block;margin-top:6px;font:400 15px/1 var(--pv-font-body);color:var(--pv-ink-soft)}
.pv-cta-note{margin-top:22px;font-size:14px;color:var(--pv-ink-soft);max-width:56ch}
@media(min-width:820px){.pv-cta-note{margin-left:auto}}

/* ========================================================================
   Kontaktformular — samme bordered-box sprog som knapperne. Ingen farvede
   felter, ingen rundede hjørner, fokusring i rust (eneste signalfarve).
   ======================================================================== */
.pv-form{margin-top:28px;max-width:640px}
.pv-form-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:20px}
@media(min-width:640px){.pv-form-grid{grid-template-columns:1fr 1fr}}
.pv-form-row{display:flex;flex-direction:column;gap:6px}
.pv-form-row label{font:500 12px/1 var(--pv-font-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--pv-muted)}
.pv-form-optional{text-transform:none;letter-spacing:0;font-weight:400}
.pv-form-row input{
  font:400 15px/1.4 var(--pv-font-body);
  padding:10px 12px;
  border:1px solid var(--pv-line);
  background:var(--pv-paper-light);
  color:var(--pv-ink);
}
.pv-form-row input:focus-visible{outline:2px solid var(--pv-rust);outline-offset:1px}
.pv-form-note{margin-top:14px;max-width:52ch}

/* ========================================================================
   Footer
   ======================================================================== */
.pv-footer{background:var(--pv-paper);border-top:1px solid var(--pv-line);padding:48px 0 34px;font-size:14px}
.pv-footer-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.pv-footer-grid{grid-template-columns:1.2fr 1fr 1fr}}
.pv-footer p{margin-bottom:6px;color:var(--pv-ink-soft);max-width:none}
.pv-footer .pv-logo{margin-bottom:12px;font-size:17px}
.pv-footer-legal{margin-top:32px;padding-top:20px;border-top:1px solid var(--pv-grid);
  font-size:12.5px;color:var(--pv-muted)}
.pv-footer-legal p{max-width:none;margin-bottom:6px;color:var(--pv-muted)}

/* ========================================================================
   Nyttige layout-utils
   ======================================================================== */
.pv-2col{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:820px){.pv-2col{grid-template-columns:1fr 1fr;gap:52px}}
.pv-vis{display:block!important}
.pv-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}