/* prissammenlign.dk - hyldeforkant og kassebon: papirhvid, sort blæk, signalrød. Commissioner (tekst), Martian Mono (tal og etiketter). */
@font-face { font-family: "Commissioner"; src: url("/assets/fonts/commissioner.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/assets/fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --bund: #f1efe8;
  --papir: #ffffff;
  --blaek: #141414;
  --daempet: #56524a;
  --roed: #d1371c;
  --roed-lys: #fbe3dc;
  --streg: #dcd8cc;
  --mono: "Martian Mono", ui-monospace, monospace;
  --maal: 46rem;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bund); color: var(--blaek); font: 400 1.0625rem/1.65 "Commissioner", system-ui, sans-serif; }
svg { max-width: 100%; }
a { color: var(--blaek); text-decoration-color: var(--roed); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--roed); }
:focus-visible { outline: 3px solid var(--roed); outline-offset: 3px; }
h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 1.95rem); margin-top: 1.7em; }
h3 { font-size: 1.2rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
.ramme { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.spring { position: absolute; left: -999px; top: 0; background: var(--blaek); color: var(--papir); padding: 0.5rem 1rem; z-index: 10; }
.spring:focus { left: 1rem; }

.top { background: var(--bund); border-bottom: 1px dashed #bdb7a7; }
.top-ind { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding: 1rem 0; }
.ordmaerke { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--blaek); text-decoration: none; font: 600 1.05rem/1 var(--mono); letter-spacing: -0.02em; }
.ordmaerke .dk { color: var(--roed); }
.maerke { width: 1.6rem; height: 1.6rem; color: var(--roed); }
.menu { display: flex; flex-wrap: wrap; gap: 0.25rem 1.3rem; }
.menu a { text-decoration: none; color: var(--daempet); font-weight: 500; }
.menu a:hover { color: var(--blaek); }
.menu a[aria-current="page"] { color: var(--blaek); text-decoration: underline; text-decoration-color: var(--roed); text-decoration-thickness: 2px; text-underline-offset: 6px; }

.overlinje { font: 500 0.78rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--roed); margin-bottom: 0.9rem; }
.indledning { font-size: clamp(1.1rem, 2vw, 1.24rem); color: var(--daempet); max-width: 38rem; }

.helt { padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem); }
.helt-ind { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; }
.forkanter { width: 100%; height: auto; }
.fk-papir { fill: var(--papir); stroke: var(--streg); }
.fk-top { fill: var(--blaek); }
.fk-lille { font: 500 15px var(--mono); fill: var(--daempet); }
.fk-lys { fill: #f1efe8; font-size: 13px; }
.fk-stor { font: 700 52px var(--mono); fill: var(--blaek); letter-spacing: -2px; }
.fk-ring { fill: none; stroke: var(--roed); stroke-width: 3; }
.fk-pil { fill: none; stroke: var(--roed); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.fk-note { font: 600 22px "Commissioner", sans-serif; fill: var(--blaek); }

.knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.knap { display: inline-block; background: var(--blaek); color: var(--papir); text-decoration: none; font-weight: 600; padding: 0.8rem 1.25rem; border-radius: 4px; }
.knap:hover { background: var(--roed); color: var(--papir); }
.knap-lys { background: var(--papir); color: var(--blaek); box-shadow: inset 0 0 0 1.5px var(--blaek); }
.knap-lys:hover { background: var(--blaek); color: var(--papir); }

.sektion { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.sektion > .ramme > h2:first-child { margin-top: 0; }
.regler { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--blaek); }
.regler li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--streg); }
.regler li:nth-child(odd) { border-right: 1px solid var(--streg); }
.regler li:nth-child(even) { padding-left: 1.5rem; }
.regel-nr { font: 700 1.6rem/1 var(--mono); color: var(--roed); }
.regler h3 { margin-bottom: 0.35rem; }
.regler p { margin: 0; color: var(--daempet); }
.sektion-moerk { background: var(--blaek); color: #e9e6dd; }
.sektion-moerk h2 { color: var(--papir); }
.to-spalter { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.to-spalter h2 { margin-top: 0; }

.tekstside { padding: clamp(2rem, 6vw, 4rem) 0 4rem; }
.side-top { max-width: var(--maal); margin-bottom: 2rem; }
.artikel { max-width: var(--maal); }
.punkter { padding-left: 1.2rem; }
.punkter li { margin-bottom: 0.7rem; }
.punkter li::marker { color: var(--roed); }
.tjek { list-style: none; padding: 0; }
.tjek li { position: relative; padding: 0.9rem 0 0.9rem 2.4rem; border-bottom: 1px dashed #c9c4b6; }
.tjek li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 1.2rem; height: 1.2rem; border: 2px solid var(--blaek); border-radius: 3px; }

.tabel-ramme { overflow-x: auto; margin: 0 0 1.25rem; background: var(--papir); border: 1px solid var(--streg); }
table { border-collapse: collapse; width: 100%; min-width: 30rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--streg); white-space: nowrap; }
thead th { font: 500 0.75rem/1.3 var(--mono); text-transform: uppercase; color: var(--daempet); }
td:last-child { font-family: var(--mono); font-size: 0.92rem; }

/* værktøjer: kassebon */
.vaerktoej { background: var(--papir); padding: clamp(1.25rem, 4vw, 2rem); margin: 0 0 2.5rem; max-width: 52rem; border: 1px solid var(--streg); box-shadow: 0 1px 0 var(--streg), 0 14px 30px -18px rgba(20, 20, 20, 0.25); }
.vaerktoej h2 { margin-top: 0; font-size: 1.4rem; }
input, select { font: 500 1rem var(--mono); color: var(--blaek); background: var(--bund); border: 1.5px solid #c4bfb1; border-radius: 4px; padding: 0.55rem 0.6rem; min-height: 2.8rem; width: 100%; min-width: 0; }
input:focus, select:focus { outline: none; border-color: var(--blaek); box-shadow: 0 0 0 3px rgba(209, 55, 28, 0.2); }
.enh-hoved, .enh-raekke { display: grid; grid-template-columns: 5rem 1fr 1fr 5.5rem 1.4fr; gap: 0.6rem; align-items: center; }
.enh-hoved { font: 500 0.72rem/1.3 var(--mono); text-transform: uppercase; color: var(--daempet); padding-bottom: 0.4rem; border-bottom: 1px dashed #c9c4b6; }
.enh-raekke { padding: 0.6rem 0; border-bottom: 1px dashed #e0dccf; }
.enh-navn { font-weight: 600; }
.enh-ud { font: 600 0.95rem var(--mono); }
.enh-raekke.billigst .enh-ud { color: var(--roed); }
.enh-raekke.billigst .enh-navn::after { content: " billigst"; display: block; font: 500 0.7rem var(--mono); color: var(--roed); text-transform: uppercase; }
.resultat { margin: 1.25rem 0 0.5rem; font-weight: 600; font-size: 1.15rem; background: var(--roed-lys); padding: 0.9rem 1.1rem; }
.note { font-size: 0.92rem; color: var(--daempet); margin: 0; }

.abo-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.abo-kol { border: 0; border-top: 2px solid var(--blaek); margin: 0; padding: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.abo-kol legend { font: 600 0.8rem var(--mono); text-transform: uppercase; padding: 0 0.5rem 0 0; }
.abo-kol label, .abo-periode label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.92rem; font-weight: 500; }
.abo-periode { grid-column: 1 / -1; max-width: 16rem; display: flex; flex-direction: column; gap: 0.3rem; }
.abo-ud { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.abo-sum { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem; background: var(--bund); }
.abo-sum.billigst { background: var(--roed-lys); }
.abo-navn { font: 500 0.75rem var(--mono); text-transform: uppercase; color: var(--daempet); }
.abo-tal { font: 700 1.6rem/1.2 var(--mono); letter-spacing: -0.03em; }
.abo-sum.billigst .abo-tal { color: var(--roed); }
.abo-snit { font-size: 0.9rem; color: var(--daempet); }
.abo-konklusion { grid-column: 1 / -1; margin: 0; font-weight: 600; font-size: 1.1rem; }

.bund { border-top: 1px dashed #bdb7a7; padding: 2.5rem 0; }
.bund-ind { display: flex; justify-content: space-between; gap: 1.5rem 3rem; flex-wrap: wrap; }
.bund-navn { font: 600 1rem/1 var(--mono); margin-bottom: 0.5rem; }
.bund-tekst { color: var(--daempet); margin: 0; font-size: 0.95rem; max-width: 30rem; }
.bund nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.bund nav a { color: var(--daempet); }

@media (max-width: 52rem) {
  .helt-ind, .to-spalter { grid-template-columns: 1fr; gap: 2rem; }
  .regler { grid-template-columns: 1fr; }
  .regler li, .regler li:nth-child(odd), .regler li:nth-child(even) { padding: 1.25rem 0; border-right: 0; }
  .enh-hoved { display: none; }
  .enh-raekke { grid-template-columns: 1fr 1fr 5.5rem; }
  .enh-navn { grid-column: 1 / -1; }
  .enh-ud { grid-column: 1 / -1; }
  .enh-raekke.billigst .enh-navn::after { display: inline; margin-left: 0.5rem; }
}
@media (max-width: 34rem) {
  .abo-form, .abo-ud { grid-template-columns: 1fr; }
}