/* SPOR 2030 · små sider: beregneren, privatliv, vilkår, databehandleraftale, licenser og Din tryghed. Bygger på spor-site.css og artikler.css.
   Sidernes indhold er uændret; kun typografi og opstilling er ny. Samme sprog som forsiden og artiklerne (Martin 4. nov. 2026). */

.pg-side{--col:680px;--side:210px;--gap:clamp(56px,6vw,96px)}
.pg-side .phero{padding-top:calc(96px + clamp(32px,4vw,56px));padding-bottom:clamp(48px,5vw,72px)}
.pg-side .phero>.wrap{display:grid;gap:clamp(20px,2.4vw,32px)}
.pg-side .phero h1{font:400 clamp(40px,10.4vw,124px)/.96 var(--disp);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:break-word}
/* «Databehandleraftale.» er ét langt ord, som skal kunne stå på én linje på telefon */
.pg-side main:has(.legal) .phero h1{font-size:clamp(34px,8.8vw,120px)}
.pg-side .calc-hero h1{font-size:clamp(40px,7vw,100px);line-height:.98}
.pg-side .g{color:var(--ink-2)}
.pg-side .phero .lead{font-size:clamp(19px,1.52vw,22px);max-width:60ch;color:var(--ink-2)}
.pg-side .sec{padding-block:clamp(64px,7vw,104px)}
.pg-side .sec.band{display:block;gap:0;background:none}
.pg-side .phero+.sec{padding-top:clamp(16px,2vw,32px)}
/* !important: to af overskrifterne på beregneren har en rem-størrelse i HTML'en, der ville blive 22 px */
.pg-side .sec-h{font:400 clamp(40px,5.2vw,76px)/1 var(--disp)!important;letter-spacing:-.02em;text-wrap:balance}
.pg-side .band p,.pg-side .band li{font-size:inherit}
.pg-side code{font-size:.92em;padding:1px 6px;border-radius:6px;background:var(--stone)}
.pg-side .sec p a,.pg-side .sec li a{text-decoration-thickness:1px;text-underline-offset:.18em}

/* Sidens sidste skridt står på det mørke kort: selve rækken er kortet */
.pg-side :is(section[aria-labelledby="h-mere"],section[aria-labelledby="h-hjaelp"])>.wrap{margin-inline:var(--m);padding:clamp(30px,4.4vw,64px);max-width:none;border-radius:22px;background:var(--flade-sort);color:var(--on-ink);box-shadow:var(--skygge-sort)}
.pg-side section[aria-labelledby="h-hjaelp"]>.wrap{justify-items:start}
.pg-side :is(section[aria-labelledby="h-mere"],section[aria-labelledby="h-hjaelp"]) :is(.fine,.g,.lead,p){color:var(--on-ink-2)}
.pg-side section[aria-labelledby="h-mere"] .fine{margin-top:22px}

/* Privatliv: indholdet som spring-links, og hvert afsnit med overskriften til venstre */
.toc{margin-top:4px;display:grid;gap:2px}
.toc-h{font:400 15px/1.4 var(--text);color:var(--note)}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 26px}
.toc a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(40px,6vw,104px);align-items:start}
.two>div{display:grid;gap:18px;font-size:var(--laes);line-height:1.55;max-width:var(--col)}
.two .lead{max-width:none;font-size:clamp(20px,1.52vw,22px)}
.me-text{font-size:var(--laes);line-height:1.55}
.byg-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.byg-list>li{position:relative;padding-left:0}
.byg-list b{font-weight:600}
.byg-list ul{margin:12px 0;padding-left:1.2em;display:grid;gap:10px}
.byg-list ul li::marker{color:var(--note)}
.pg-side .two .fine{font-size:15px}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}

/* Læsespalten på aftaler og licenser: samme plads som artiklens spalte */
.legal{display:grid;gap:1.05em;max-width:var(--col);font-size:var(--laes);line-height:1.55}
.legal>h2{font:400 clamp(30px,3vw,44px)/1.06 var(--disp);letter-spacing:-.012em;text-wrap:balance;margin-top:clamp(36px,4vw,56px)}
.legal>h2:first-child{margin-top:0}
.legal>p{font-size:inherit;line-height:inherit}
.wrap.legal{max-width:calc(var(--col) + 2 * var(--m))}
@media (min-width:1180px){
  .wrap>.legal{margin-left:calc(var(--side) + var(--gap))}
  .wrap.legal{padding-left:calc(var(--m) + var(--side) + var(--gap));max-width:calc(860px + var(--side) + var(--gap) + 2 * var(--m))}
  .wrap.legal>:is(h2,p){max-width:var(--col)}
}
/* Licensernes tabel er stablet i rækker, og licensteksten står som et ark */
.legal .art-table{width:100%;overflow:visible;margin:12px 0;font-size:16px}
.legal .art-table table,.legal .art-table tbody,.legal .art-table tr,.legal .art-table th,.legal .art-table td{display:block;width:auto}
.legal .art-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.legal .art-table tr{padding:18px 0;border-bottom:1px solid var(--hair)}
.legal .art-table tr:last-child{border-bottom:0}
.legal .art-table th,.legal .art-table td{border:0;padding:4px 0;overflow-wrap:anywhere;color:var(--ink)}
.legal .art-table tbody th{font:400 24px/1.15 var(--disp);min-width:0}
.legal .art-table td small{font-size:14px;color:var(--note)}
.lic{margin:0;padding:clamp(18px,2.4vw,28px);border-radius:14px;background:var(--stone);font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}

/* Beregneren: tallene på et hvidt kort til venstre, svaret på det mørke kort, der følger med ned */
.calc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:start}
.st-card{border-radius:18px;background:var(--flade-hvid);padding:clamp(24px,3.4vw,44px);box-shadow:var(--skygge-hvid)}
.calc-form{display:grid;gap:20px}
.calc-form h2,.calc-out h2{font:400 clamp(34px,3.5vw,50px)/1.02 var(--disp);letter-spacing:-.014em}
.cstep{margin:0;padding:24px 0 4px;border:0;border-top:1px solid var(--hair);display:grid;gap:18px;min-width:0}
.cstep legend{float:left;width:100%;display:flex;align-items:baseline;gap:12px;padding:0;font:400 clamp(25px,2vw,29px)/1.14 var(--disp)}
.cstep legend+*{clear:both}
.idx{font:400 clamp(25px,2vw,29px)/1.14 var(--disp);color:var(--note)}
.cstep-o{font:400 15px/1.3 var(--text);color:var(--note)}
.cstep-w{font-size:16px;line-height:1.5;color:var(--ink-2)}
.cf{display:grid;gap:8px}
.cf label{font-weight:500;font-size:16px}
.cf-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cf-in input{width:9.5em;min-height:52px;padding:0 16px;border:0;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair);font:500 18px/1 var(--text);color:var(--ink)}
.cf-in input:focus{outline:none;box-shadow:inset 0 0 0 1.8px var(--ink)}
.cf-in span{font-size:15px;color:var(--ink-2)}
.cf-h{font-size:14.5px;line-height:1.45;color:var(--note);max-width:56ch}
.calc-btns{display:flex;flex-wrap:wrap;gap:10px;padding-top:12px;border-top:1px solid var(--hair)}
.calc-btns .pill{min-height:46px;padding:0 20px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.2px var(--hair);font-weight:400;font-size:15px}
.calc-btns .pill:hover{box-shadow:inset 0 0 0 1.2px var(--ink)}
.calc-out{position:sticky;top:96px;display:grid;gap:18px;border-radius:22px;background:var(--flade-sort);color:var(--on-ink);box-shadow:var(--skygge-sort)}
.calc-verdict{font:400 clamp(25px,2.2vw,32px)/1.14 var(--disp);text-wrap:pretty}
.calc-list{margin:0;display:grid}
.calc-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--hair-ink)}
.calc-list dt{font-size:15px;line-height:1.35;color:var(--on-ink-2)}
.calc-list dd{margin:0;font:500 18px/1.2 var(--text);text-align:right;white-space:nowrap}
.calc-half:empty{display:none}
.calc-half{font-size:15px;line-height:1.5;color:var(--on-ink-2)}
.calc-out .fine{color:var(--on-ink-2);font-size:14px}
.calc-how{display:grid;gap:18px;max-width:calc(var(--col) + 2 * var(--m))}
.calc-how>p{font-size:var(--laes);line-height:1.55}
.csteps{list-style:none;margin:8px 0;padding:0;display:grid;gap:14px}
.csteps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;align-items:baseline;font-size:var(--laes);line-height:1.55}
.csteps b{font-weight:600}
.pg-side .calc-h3{font:400 clamp(30px,3vw,44px)/1.06 var(--disp);letter-spacing:-.012em;margin-top:clamp(28px,3vw,44px)}
@media (min-width:1180px){.calc-how{padding-left:calc(var(--m) + var(--side) + var(--gap));max-width:calc(var(--col) + var(--side) + var(--gap) + 2 * var(--m))}.pg-side section[aria-labelledby="h-hjaelp"]>.calc-how{padding-left:clamp(30px,4.4vw,64px)}}
@media (max-width:960px){.calc{grid-template-columns:minmax(0,1fr)}.calc-out{position:static}}
@media (max-width:560px){.calc-list>div{flex-direction:column;gap:4px}.calc-list dd{text-align:left}.cf-in input{width:7em}}

/* Din tryghed (bygges af src/platform/tryghed-page.ts): billede i toppen, fire løfter, dataflowet, to kort */
.tr-hero{padding-top:calc(96px + clamp(32px,4vw,56px));padding-bottom:clamp(48px,5vw,72px)}
.tr-hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,4vw,64px);align-items:center}
.tr-hero-text{display:grid;gap:clamp(20px,2.2vw,28px)}
.tr-hero h1{font:400 clamp(46px,5.6vw,92px)/.96 var(--disp);letter-spacing:-.02em;text-wrap:balance}
.tr-hero .lead{font-size:clamp(19px,1.52vw,22px);color:var(--ink-2);max-width:52ch}
.spor-word{font-weight:500}
.tr-hero-img,.tr-side-img{margin:0;border-radius:18px;overflow:hidden;background:var(--stone);box-shadow:var(--lift)}
.tr-hero-img img,.tr-side-img img{width:100%;height:100%;object-fit:cover}
.tr-side-img{margin-top:28px}
.pg-side .sec>.wrap>.kick+.sec-h,.pg-side .two .kick+.sec-h{margin-top:10px}
.tr-flow{list-style:none;margin:0;padding:0 0 0 30px;position:relative;display:grid;gap:14px}
.tr-flow::before{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:1.2px;background:var(--hair)}
.tr-node{position:relative;display:grid;gap:2px;padding:6px 0}
.tr-node::before{content:"";position:absolute;left:-30px;top:12px;width:13px;height:13px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.4px var(--ink-2)}
.tr-core{padding:18px 22px;border-radius:18px;background:var(--flade-sort);color:var(--on-ink);box-shadow:var(--skygge-sort)}
.tr-core::before{top:24px;background:var(--ink);box-shadow:none}
.tr-node b{font:400 clamp(24px,1.9vw,28px)/1.14 var(--disp)}
.tr-node span{font-size:15.5px;color:var(--ink-2)}
.tr-core span{color:var(--on-ink-2)}
.tr-node em{font-style:normal;font-size:14.5px;color:var(--note)}
.tr-branches ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tr-flow+.fine{margin-top:20px}
.tr-points{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4vw,64px)}
.two .tr-points{grid-template-columns:minmax(0,1fr)}
.tr-points li{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--hair)}
.tr-points b{font:400 clamp(23px,1.8vw,26px)/1.14 var(--disp)}
.tr-points span{font-size:16px;line-height:1.5;color:var(--ink-2)}
.tr-points+.fine{margin-top:18px}
.tr-cols{display:grid;align-items:start;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);margin-top:clamp(28px,3vw,44px)}
.tr-col{display:grid;gap:14px;align-content:start;padding:clamp(24px,3vw,40px);border-radius:18px;background:var(--flade-hvid);box-shadow:var(--skygge-hvid);font-size:16.5px;line-height:1.5}
.tr-col h3{font:400 clamp(28px,2.6vw,38px)/1.05 var(--disp);letter-spacing:-.01em}
.tr-col ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.tr-col-yes li::marker{color:var(--note)}
.tr-col-no{border-radius:22px;background:var(--flade-sort);color:var(--on-ink);box-shadow:var(--skygge-sort)}
.tr-col-no li::marker{color:var(--on-ink-2)}
@media (max-width:900px){.tr-hero-in{grid-template-columns:minmax(0,1fr)}.tr-points,.tr-cols{grid-template-columns:minmax(0,1fr)}}

/* Din tryghed (Martin 27. okt. 2026): løfterne som rolig liste uden bokse, og levering og sikkerhed samlet i ét afsnit */
.tr-facts{list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,88px);border-top:1.6px solid var(--ink)}
.tr-facts li{display:grid;gap:8px;align-content:start;padding:24px 0 26px;border-bottom:1px solid var(--hair)}
.tr-facts h3{font:400 clamp(28px,2.6vw,38px)/1.05 var(--disp);letter-spacing:-.01em}
.tr-facts p{font-size:var(--laes);line-height:1.5;color:var(--ink-2);max-width:56ch}
.tr-setup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,48px) clamp(32px,5vw,88px);margin-top:clamp(28px,3vw,44px)}
.tr-setup h3{font:400 clamp(28px,2.6vw,38px)/1.05 var(--disp);letter-spacing:-.01em}
.tr-setup .tr-points{grid-template-columns:minmax(0,1fr);margin-top:14px}
.tr-setup .fine{margin-top:16px}
.tr-more{margin-top:6px;font-size:15px;color:var(--ink-2)}
.tr-more summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.tr-more p{margin-top:6px;line-height:1.5}
@media (max-width:900px){.tr-facts,.tr-setup{grid-template-columns:minmax(0,1fr)}}