/* ============================================================
   Processen · /proces/
   Én lang linje, der tegner sig selv mens man scroller. Knuderne
   lyser op, når linjen når dem. Overfladen er rolig; dybden
   folder man selv ud.
   ============================================================ */

/* ---------- Hero ---------- */
.pr-hero{padding:132px 0 20px;position:relative;overflow:hidden}
.pr-hero .hero-solo{max-width:780px}
.pr-hero h1{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(2.6rem,7vw,4.6rem);line-height:.98;letter-spacing:-.03em;
  font-weight:600;margin:.22em 0 .34em}
.pr-hero .sub{font-size:clamp(1.02rem,1.9vw,1.2rem);line-height:1.62;color:var(--mut);max-width:62ch}
.pr-hero .sub b{color:var(--ink);font-weight:500}
.pr-hero-note{margin:20px 0 0;font-size:.9rem;color:var(--mut);padding-left:15px;
  border-left:2px solid var(--acc);max-width:54ch;line-height:1.6}

/* ---------- Selve linjen ---------- */
.pr-line{position:relative;list-style:none;margin:0;padding:0 0 0 48px}
.pr-line::before,.pr-line::after{content:"";position:absolute;left:15px;top:16px;
  width:2px;border-radius:2px}
.pr-line::before{bottom:46px;background:var(--line)}
.pr-line::after{height:calc(100% - 62px);background:var(--acc);
  box-shadow:0 0 16px rgba(198,255,61,.42)}
/* Med JavaScript vokser den med scrollen. Uden JS staar den tegnet. */
.pr-line.js::after{height:var(--fyld,0px)}
@media(prefers-reduced-motion:reduce){.pr-line.js::after{height:calc(100% - 62px)}}

.pr-node{position:relative;padding:0 0 42px}
.pr-node.sidst{padding-bottom:0}

.pr-dot{position:absolute;left:-40px;top:9px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line);
  transition:border-color .35s ease,background .35s ease,box-shadow .35s ease}
.pr-node.lys .pr-dot{border-color:var(--acc);background:var(--acc);
  box-shadow:0 0 0 5px rgba(198,255,61,.11),0 0 18px rgba(198,255,61,.5)}
@media(prefers-reduced-motion:reduce){.pr-dot{transition:none}}

/* ---------- Hvert trin ---------- */
.pr-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pr-nr{font-size:.78rem;font-weight:600;letter-spacing:.14em;color:var(--acc);
  font-variant-numeric:tabular-nums}
.pr-top h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.1;letter-spacing:-.025em;
  font-weight:600;margin:0}
.pr-tid{margin-left:auto;font-size:.78rem;color:var(--mut);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:4px 11px}

.pr-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.pr-tag{font-size:.72rem;color:var(--mut);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px}
.pr-tag.valgfri{color:var(--acc);border-color:rgba(198,255,61,.3)}

.pr-lead{margin:13px 0 0;font-size:1.02rem;line-height:1.62;color:var(--mut);max-width:62ch}
.pr-dig{margin:11px 0 0;font-size:.9rem;line-height:1.58;color:var(--mut);max-width:62ch}
.pr-dig b{color:var(--ink);font-weight:500}

/* ---------- Dybden ---------- */
.pr-mere{margin-top:16px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel)}
.pr-mere summary{cursor:pointer;padding:13px 17px;font-size:.86rem;color:var(--ink);
  list-style:none;display:flex;align-items:center;gap:9px}
.pr-mere summary::-webkit-details-marker{display:none}
.pr-mere summary::before{content:"+";color:var(--acc);font-size:1.05rem;line-height:1;
  width:12px;flex:0 0 auto}
.pr-mere[open] summary::before{content:"–"}
.pr-mere summary:hover{color:var(--acc)}
.pr-mere summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:12px}
.pr-in{padding:2px 17px 19px}
.pr-in>p{margin:0 0 14px;font-size:.92rem;line-height:1.68;color:var(--mut);max-width:70ch}
.pr-brug{border-left:2px solid var(--acc);padding-left:14px}
.pr-brug b{color:var(--ink);font-weight:500}

.pr-sys-h{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mut);font-weight:600;margin:20px 0 11px}
.pr-sys-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Er der et ulige antal, fylder det sidste kort bredden ud i stedet for
   at efterlade et hul. */
.pr-sys-grid>:last-child:nth-child(odd){grid-column:1/-1}
@media(max-width:860px){
  .pr-sys-grid{grid-template-columns:minmax(0,1fr)}
  .pr-sys-grid>:last-child:nth-child(odd){grid-column:auto}
}
.pr-sys{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:17px 18px}
.pr-sys h4{font-size:.95rem;font-weight:600;color:var(--ink);margin:0 0 7px;letter-spacing:-.01em}
.pr-sys-hvad{font-size:.86rem;line-height:1.55;color:var(--mut);margin:0 0 14px;
  padding-bottom:13px;border-bottom:1px solid var(--line2)}
/* Etiket til venstre, svar til hoejre — kort svar som »Gratis« skal ikke
   bruge tre linjer. */
.pr-sys dl{margin:0;display:grid;grid-template-columns:82px minmax(0,1fr);gap:9px 14px}
.pr-sys dt{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:#6B6B73;font-weight:600;margin:0;padding-top:2px}
.pr-sys dd{margin:0;font-size:.84rem;line-height:1.55;color:var(--mut)}
@media(max-width:420px){.pr-sys dl{grid-template-columns:minmax(0,1fr);gap:3px 0}
  .pr-sys dt{padding-top:7px}}

/* ---------- Slutsektion ---------- */
.pr-end{padding-bottom:104px}
.pr-end-in{max-width:58ch;margin:0 auto;text-align:center}
.pr-end-in h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.06;letter-spacing:-.025em;
  font-weight:600;margin:0 0 18px}
.pr-end-in p{color:var(--mut);line-height:1.64;font-size:1.02rem;margin:0 0 28px}
.pr-end-note{font-size:.88rem;margin:20px 0 0 !important}
.pr-end-note a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(198,255,61,.3)}
.pr-end-note a:hover{border-bottom-color:var(--acc)}

/* ---------- Smal skærm ---------- */
@media(max-width:640px){
  .pr-line{padding-left:34px}
  .pr-line::before,.pr-line::after{left:8px}
  .pr-dot{left:-33px;width:12px;height:12px;top:8px}
  .pr-node{padding-bottom:34px}
  .pr-tid{margin-left:0}
  .pr-in{padding:2px 14px 17px}
  .pr-mere summary{padding:12px 14px}
  .pr-sys-grid{grid-template-columns:minmax(0,1fr)}
}

/* ——— Mobil-rytme, samme trappe som i style.css ——— */
@media(max-width:560px){
  .pr-card{padding:20px 18px}
  .pr-top h3{font-size:18px}
  .pr-lead{font-size:15px;line-height:1.58}
  .pr-dig,.pr-brug{font-size:14px;line-height:1.56}
  .pr-mere summary{font-size:13.5px;padding:11px 14px}
  .pr-in p{font-size:14.5px;line-height:1.65}
  .pr-sys{padding:17px 16px}
  .pr-sys h4{font-size:15.5px}
  .pr-sys-hvad,.pr-sys dd,.pr-sys dt{font-size:13.5px}
  .pr-tags{gap:6px}
  .pr-tag,.pr-tid,.pr-nr{font-size:11.5px}
  .pr-node{padding-bottom:28px}
}