/*
 * Tagordbogen.
 *
 * Farverne er dagslys på zink, altså en overskyet dansk himmel over en
 * zinktagflade. Kølig, lys og rolig, fordi et opslagsværk skal virke troværdigt
 * og ikke sælgende. Grøn patina er accenten, den farve kobbertage får med tiden.
 *
 * Der er præcis ÉN varm farve på sitet, teglrød, og den betyder én ting:
 * det her er verificeret. Prikken ved et opslagsord med færdig artikel, og
 * understregningen under de ord i tilbudslinjen, ordbogen kan forklare.
 * Bruges teglrød til andet, holder reglen op med at betyde noget.
 *
 * Skrift: Playfair Display til opslagsord og overskrifter, altså ordbogens
 * egen stemme. Inter til alt brugsteksten. Og monospace til tilbudslinjen,
 * fordi den skal ligne noget der kom ud af en printer.
 */

@font-face {
  font-family: 'Playfair';
  src: url('/fonts/playfair.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --dagslys: #f7fafc;
  --flade: #ffffff;
  --zink: #f0f4f8;
  --streg: #e8eef4;
  --streg-staerk: #d6e0e9;
  --skifer: #1b2933;
  /* Den dæmpede tekstfarve bærer mere end etiketter: definitionerne i
     ordkortene, lead-afsnittene, kildelisterne og hele bunden står i den.
     Den var #647585, altså 4,53:1 mod sidens baggrund, som er lige akkurat
     over AA-minimum og for lyst til løbende tekst. Nu 6,25:1, stadig tydeligt
     underordnet brødteksten, der ligger på 14:1. */
  --skifer-svag: #4f5f70;
  --patina: #10736a;
  --patina-lys: #e8f4f1;
  --tegl: #b0512f;
  /* Skyggerne skal antyde, ikke tegne. En kant der kan ses tydeligt, gør
     siden hård, og briefen er let. */
  --skygge: 0 1px 2px rgba(27, 41, 51, 0.025), 0 8px 24px rgba(27, 41, 51, 0.035);
  --skygge-hoej: 0 2px 6px rgba(27, 41, 51, 0.04), 0 16px 40px rgba(27, 41, 51, 0.07);
  --bredde: 68rem;
  --radius: 18px;

  --display: 'Playfair', Georgia, serif;
  --brug: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maskine: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

/* Ordbogen er lys, og kun lys. Den fulgte før systemets mørke tilstand, og
   så blev den sort for halvdelen af gæsterne, hvilket er det stik modsatte
   af det den skal være. Farveskemaet er derfor låst med vilje. */
:root { color-scheme: light; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dagslys);
  color: var(--skifer);
  font: 16px/1.65 var(--brug);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid var(--patina);
  outline-offset: 2px;
  border-radius: 3px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.baand { max-width: var(--bredde); margin-inline: auto; padding-inline: 1.5rem; }
main { max-width: var(--bredde); margin-inline: auto; padding: 2.5rem 1.5rem 5rem; }

/* ---------- Top og bund ---------- */

.top {
  border-bottom: 1px solid var(--streg);
  background: color-mix(in srgb, var(--dagslys) 82%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.top .baand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
}
.maerke {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--skifer);
  text-decoration: none;
}
/* Søgefeltet i toppen. Det fandtes før kun på forsiden, så stod man på et
   opslag, skulle man hele vejen tilbage for at slå det næste ord op. */
.topsoeg { flex: 1 1 14rem; max-width: 26rem; position: relative; margin-inline: auto; }
.topsoeg input {
  width: 100%;
  padding: 0.5rem 0.9rem;
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--skifer);
  background: var(--zink);
  border: 1px solid transparent;
  border-radius: 2rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.topsoeg input::placeholder { color: var(--skifer-svag); }
.topsoeg input:focus {
  outline: none;
  background: var(--flade);
  border-color: var(--patina);
  box-shadow: 0 0 0 3px var(--patina-lys);
}
.topsoeg .traef {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 0.5rem);
  z-index: 20;
}

.topnav { display: flex; align-items: baseline; gap: 1.1rem; font-size: 0.86rem; white-space: nowrap; }
.topnav a { color: var(--skifer); text-decoration: none; font-weight: 600; }
.topnav a:hover { color: var(--patina); }
.topnav .tal { color: var(--skifer-svag); font-variant-numeric: tabular-nums; }

/* Bunden er sin egen flade. Siden er lys grå, så en hvid bund lukker den af
   uden at der skal en kraftig streg eller en mørk klods til. */
.bund {
  border-top: 1px solid var(--streg);
  background: var(--flade);
  padding-block: 3rem 3.5rem;
  color: var(--skifer-svag);
  font-size: 0.88rem;
}
.bund p { margin: 0 0 0.5rem; }
.bund strong { color: var(--skifer); }

/* Menuen ligger på én linje. Den er kort nok til det, og tre punkter under
   hinanden i en spalte gav en tom, kluntet bund. */
.bund-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.bund-menu a { color: var(--skifer); text-decoration: none; }
.bund-menu a:hover { color: var(--patina); }

/* Forbeholdet skal kunne læses, ikke skjules. Det er derfor kun et trin
   mindre end resten og ikke lysere end den øvrige bundtekst. */
.bund-fin {
  max-width: 48rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--streg);
  font-size: 0.82rem;
  line-height: 1.65;
}

/* Afsenderen står nederst, under teksten, på én linje når der er plads. */
.bund-afsender {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 1.5rem;
}
.bund-logo { display: block; line-height: 0; }
/* Logoet står med småt. Bredden styrer, og højden følger med af sig selv,
   ellers trykkes mærket fladt på små skærme. */
.bund-logo img { width: 112px; height: auto; opacity: 0.7; transition: opacity 0.15s ease; }
.bund-logo:hover img { opacity: 1; }
.bund-firma {
  margin: 0;
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.7;
}
.bund-firma a { color: inherit; }
.bund-firma a:hover { color: var(--patina); }
/* Skillepunkterne er lysere end teksten, så linjen læses som én oplysning
   ad gangen i stedet for som en kæde af prikker. */
.bund-firma span { color: var(--streg-staerk); padding-inline: 0.15rem; }

/* ---------- Fælles overskriftsformer ---------- */

/* Etiketterne stod før i spærrede versaler. Det gjorde siden teknisk og
   stram, og den skal være let. De er nu almindelig skrift i dæmpet farve. */
.oejenbryn {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  color: var(--skifer-svag);
}
.oejenbryn a { color: inherit; text-decoration-color: var(--streg-staerk); }
.oejenbryn a:hover { color: var(--patina); }
.oejenbryn span { color: var(--streg-staerk); }

.afsnit { margin-top: 5rem; }
.afsnit > h2 {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--skifer);
}
.afsnit-under { margin: 0 0 2rem; color: var(--skifer-svag); font-size: 1rem; max-width: 42rem; }

/* ---------- Forsidens hero ---------- */

.hero { padding-top: 1.5rem; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 6.4vw, 4.05rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  max-width: 17ch;
}
/* Playfair-filen har kun den opretstående skrift, så en kursiv ville blive
   maskinlavet og skæv. Fremhævningen sker med farve i stedet. */
.hero h1 em { font-style: normal; color: var(--patina); }

.lead {
  margin: 0 0 2rem;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--skifer-svag);
  max-width: 34rem;
}

/* ---------- Søgefeltet ---------- */

.soeg { margin: 0 0 2rem; position: relative; }
.soeg input {
  width: 100%;
  padding: 1.15rem 1.25rem;
  font-size: 1.08rem;
  font-family: inherit;
  color: var(--skifer);
  background: var(--flade);
  border: 1px solid var(--streg-staerk);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.soeg input::placeholder { color: var(--skifer-svag); opacity: 0.75; }
.soeg input:focus {
  outline: none;
  border-color: var(--patina);
  box-shadow: var(--skygge-hoej), 0 0 0 3px var(--patina-lys);
}
.soeg .status {
  margin: 0.6rem 0 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--skifer-svag);
}
.soeg-slank input { padding: 0.8rem 1rem; font-size: 1rem; }

/* Trufne ord på forsiden */
ol.traef {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.4rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  box-shadow: var(--skygge-hoej);
  max-height: 26rem;
  overflow-y: auto;
}
ol.traef a {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.2rem 1.25rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
ol.traef a:hover, ol.traef a:focus-visible { background: var(--zink); }
ol.traef .t { font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
ol.traef .d { color: var(--skifer-svag); font-size: 0.9rem; }
ol.traef b, ul.ord .term b {
  color: var(--tegl);
  font-size: 0.6em;
  vertical-align: 0.35em;
  margin-left: 0.35rem;
}

/* ---------- Signaturen: linjer fra rigtige tilbud ---------- */

/* div.tilbud og IKKE bare .tilbud.
   <body> på tilbudssiden har også klassen tilbud, fordi td_top sætter sidens
   navn som body-klasse. Den bare klasseselektor ramte derfor både boksen og
   hele siden, og body arvede overflow: hidden. Resultatet var, at siden slet
   ikke kunne rulles, når man havde fået sit tilbud analyseret. */
div.tilbud {
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  overflow: hidden;
}
.tilbud-hoved {
  margin: 0;
  padding: 0.9rem 1.5rem;
  background: var(--zink);
  border-bottom: 1px solid var(--streg);
  font-size: 0.92rem;
  color: var(--skifer-svag);
}
.tilbud-linje {
  margin: 0;
  padding: 1rem 1.5rem;
  font-family: var(--maskine);
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--skifer-svag);
  border-bottom: 1px solid var(--streg);
}
.tilbud-linje:last-child { border-bottom: 0; }
.tilbud-linje a {
  color: var(--skifer);
  text-decoration: underline;
  text-decoration-color: var(--tegl);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.tilbud-linje a:hover { background: var(--patina-lys); color: var(--patina); }

.tilbud-bund { margin: 0; padding: 0.9rem 1.5rem; background: var(--zink); font-size: 0.92rem; }

/* ---------- Læs dit tilbud ---------- */

.tilbudsform {
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  padding: 1.75rem;
  max-width: 44rem;
}
.tilbudsform .felt { margin-bottom: 1.25rem; }
/* Trinmarkøren står over overskriften, så man kan se, at der er to trin, og
   at det andet er det sidste. Uden den ligner trin 1 en tilmelding. */
.tilbudsform .trin {
  margin: 0 0 0.35rem;
  color: var(--skifer-svag);
  font-size: 0.85rem;
}
.tilbudsform .trin span { color: var(--streg-staerk); }
.tilbudsform .formtitel {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
/* p.formunder og ikke bare .formunder. Reglen for .hjaelp står længere nede i
   filen og nulstiller bundmargenen, når de to klasser sidder på samme afsnit,
   og så klistrede «Navn» op under teksten. */
.tilbudsform p.formunder { margin: 0 0 2.25rem; }
/* Står overskriften uden forklaring under sig, skal luften ned til det første
   felt komme fra overskriften selv. */
.tilbudsform .formtitel-alene { margin-bottom: 1.75rem; }
/* To felter ved siden af hinanden på skærm, under hinanden på telefon. */
.feltpar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 34rem) { .feltpar { grid-template-columns: 1fr; } }
.tilbudsform input[type="text"],
.tilbudsform input[type="email"],
.tilbudsform input[type="tel"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--skifer);
  background: var(--flade);
  border: 1px solid var(--streg-staerk);
  border-radius: 10px;
}
.tilbudsform input[type="text"]:focus,
.tilbudsform input[type="email"]:focus,
.tilbudsform input[type="tel"]:focus {
  outline: none;
  border-color: var(--patina);
  box-shadow: 0 0 0 3px var(--patina-lys);
}
.feltfejl { margin: 0.4rem 0 0; color: var(--tegl); font-size: 0.86rem; }
.tilbudsform label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
  font-size: 0.98rem;
}
.tilbudsform input[type="file"] {
  width: 100%;
  padding: 0.75rem;
  background: var(--zink);
  border: 1px dashed var(--streg-staerk);
  border-radius: 10px;
  font: inherit;
  font-size: 0.92rem;
}
.tilbudsform textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font-family: var(--maskine);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--skifer);
  background: var(--flade);
  border: 1px solid var(--streg-staerk);
  border-radius: 10px;
  resize: vertical;
}
.tilbudsform textarea::placeholder { color: var(--skifer-svag); opacity: 0.6; }
.tilbudsform textarea:focus, .tilbudsform input[type="file"]:focus {
  outline: none;
  border-color: var(--patina);
  border-style: solid;
  box-shadow: 0 0 0 3px var(--patina-lys);
}
.tilbudsform .eller {
  margin: 0 0 1.25rem;
  color: var(--skifer-svag);
  font-size: 0.9rem;
  text-align: center;
}
.tilbudsform .hjaelp { margin: 0.5rem 0 0; color: var(--skifer-svag); font-size: 0.88rem; }
.tilbudsform button {
  padding: 0.8rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--patina);
  border: 0;
  border-radius: 2rem;
  cursor: pointer;
}
.tilbudsform button:hover { background: color-mix(in srgb, var(--patina) 85%, #000); }
.eksempel-link { margin-left: 1rem; font-size: 0.94rem; }

/* ---------- Analysen: tilbuddet til venstre, ordene til højre ---------- */

.analyse {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 60rem) {
  /* På telefon står tilbuddet øverst og ordene under. Man kigger på sit eget
     papir først, og en to-spaltet visning på 390 px bliver til to knappenåle. */
  /* minmax(0, 1fr) og ikke 1fr. Et bart 1fr har minimumsbredde auto, så
     sporet blev lige så bredt som den længste definition, og teksten løb ud
     over skærmkanten i stedet for at blive klippet af med tre prikker. */
  .analyse { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
.analyse-titel {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--skifer-svag);
}
/* Ordene følger med, når man ruller ned gennem et langt tilbud. */
@media (min-width: 60.0625rem) {
  .analyse-ord { position: sticky; top: 5rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
}

.ordliste { margin: 0; padding: 0; list-style: none; counter-reset: ord; }
.ordliste li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  border-bottom: 1px solid var(--streg);
}
.ordliste li:last-child { border-bottom: 0; }
.ordliste a {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0.4rem;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  min-width: 0;
}
.ordliste a:hover { background: var(--patina-lys); }
.ordliste-navn { font-weight: 600; white-space: nowrap; }
.ordliste a:hover .ordliste-navn { color: var(--patina); }
/* Definitionen står på samme linje som ordet og klippes af med tre prikker.
   Hele forklaringen ligger et klik væk, og listen skal kunne skimmes. */
.ordliste-def {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--skifer-svag);
}
.ordliste .gange {
  flex: 0 0 auto;
  font-size: 0.78rem;
  color: var(--skifer-svag);
  font-variant-numeric: tabular-nums;
}
.ordliste .tvetydig .ordliste-navn::after {
  content: "!";
  margin-left: 0.3rem;
  color: var(--tegl);
  font-weight: 700;
}
.pas-paa-liste { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--streg); }

/* Husejerens egen PDF. Højden er sat i vh og ikke i px, fordi et tagtilbud er
   et A4-dokument: er rammen for lav, ser man to linjer ad gangen. */
.pdfvisning {
  height: 70vh;
  min-height: 24rem;
  margin-bottom: 0.6rem;
  background: var(--zink);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  overflow: hidden;
}
.pdfvisning object { width: 100%; height: 100%; border: 0; display: block; }
.pdfvisning p { padding: 1.25rem; }
.analyse-tilbud .analyse-titel:not(:first-child) { margin-top: 1.75rem; }
@media (max-width: 60rem) {
  /* På telefon fylder en A4-side i en ramme hele skærmen og spærrer for
     rulningen. Den bliver lavere, og hele siden kan åbnes i en fane. */
  .pdfvisning { height: 50vh; min-height: 18rem; }
}

/* Boksen med spørgsmålet om hjælp, og kvitteringen bagefter. Den skal skille
   sig ud fra ordkortene uden at ligne en reklame, så den låner formen fra
   formularen og får den grønne kant i stedet for en farvet flade. */
.tilbudsboks {
  max-width: 44rem;
  padding: 1.75rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-left: 3px solid var(--patina);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
}
.tilbudsboks h2 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.tilbudsboks p { margin: 0 0 1rem; }
.tilbudsboks .hjaelp { margin: 1rem 0 0; color: var(--skifer-svag); font-size: 0.88rem; }
.svarknapper { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.svarknapper button {
  padding: 0.8rem 1.5rem;
  font: inherit;
  font-weight: 600;
  border-radius: 2rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.svarknapper .ja { color: #fff; background: var(--patina); }
.svarknapper .ja:hover { background: color-mix(in srgb, var(--patina) 85%, #000); }
/* Nej skal være lige så let at trykke på som ja. Et gråt nej, der er svært at
   få øje på, er en mørk formular, og det er ikke den slags hus vi driver. */
.svarknapper .nej { color: var(--skifer); background: var(--zink); border-color: var(--streg-staerk); }
.svarknapper .nej:hover { background: var(--streg); }
.handling { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--streg); }

.besked {
  max-width: 44rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-left: 3px solid var(--tegl);
  border-radius: 4px var(--radius) var(--radius) 4px;
  box-shadow: var(--skygge);
}

#svar { scroll-margin-top: 5rem; }
.ordkort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
.ordkort-post {
  padding: 1.1rem 1.25rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
}
.ordkort-post h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ordkort-post h3 a { color: inherit; text-decoration: none; }
.ordkort-post h3 a:hover { color: var(--patina); }
.ordkort-post p { margin: 0; color: var(--skifer-svag); font-size: 0.93rem; line-height: 1.5; }
/* Ord ordbogen HAR, men som tilbuddet ofte bruger anderledes. Teglrød er
   sitets ene varme farve og betyder verificeret, og det her ER et verificeret
   fund fra kortlægningen af rigtige tilbud. */
.ordkort-post .pas-paa {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  background: color-mix(in srgb, var(--tegl) 7%, var(--flade));
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--skifer);
}
.ordkort-post .pas-paa strong { color: var(--tegl); }

.ordkort-post .gange {
  font-family: var(--brug);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--skifer-svag);
  background: var(--zink);
  border-radius: 2rem;
  padding: 0.1rem 0.55rem;
}

/* ---------- Områdebokse ---------- */

.bokse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.25rem;
}
.boks {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 1.35rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: var(--radius);
  box-shadow: var(--skygge);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.boks:hover { border-color: var(--streg-staerk); box-shadow: var(--skygge-hoej); }
.boks-navn {
  margin: 0 0 0.35rem;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.boks-navn a { color: inherit; text-decoration: none; }
.boks-navn a:hover { color: var(--patina); }
.boks-om { margin: 0 0 1rem; color: var(--skifer-svag); font-size: 0.95rem; line-height: 1.5; }

/* Ordene i boksen er hele pointen. Man skal kunne se hvad der ligger
   indenfor, ikke bare hvor mange der er. */
.boks-ord {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.boks-ord a {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  background: var(--zink);
  border-radius: 2rem;
  font-size: 0.88rem;
  color: var(--skifer);
  text-decoration: none;
}
.boks-ord a:hover { background: var(--patina-lys); color: var(--patina); }
.boks-ord .skrevet a { box-shadow: inset 0 0 0 1px var(--streg-staerk); font-weight: 600; }
.boks-ord .skrevet a::after {
  content: "";
  display: inline-block;
  width: 0.32em; height: 0.32em;
  margin-left: 0.4em;
  vertical-align: 0.25em;
  border-radius: 50%;
  background: var(--tegl);
}
.boks-tal {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  align-items: baseline;
  font-size: 0.88rem;
  color: var(--skifer-svag);
  font-variant-numeric: tabular-nums;
}
.boks-tal b { color: var(--tegl); font-weight: 400; font-size: 0.85rem; }

/* ---------- Færdige opslag på forsiden ---------- */

.kort-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.15rem 1.75rem;
}
.kort-liste a {
  display: block;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--streg);
  text-decoration: none;
  color: inherit;
}
.kort-liste a:hover { background: var(--zink); }
.kort-navn { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 600; }
.kort-def {
  display: block;
  color: var(--skifer-svag);
  font-size: 0.88rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.videre { margin-top: 3rem; font-size: 0.98rem; }

/* ---------- A til Å-siden ---------- */

.sidehoved { margin-bottom: 1.75rem; }
.sidehoved h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
}
.sidehoved .under { margin: 0; color: var(--skifer-svag); max-width: 42rem; font-size: 0.95rem; }
.prik {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: var(--tegl);
  vertical-align: 0.05em;
}

.kategorier { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.kategorier a {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--streg);
  border-radius: 2rem;
  font-size: 0.85rem;
  color: var(--skifer);
  text-decoration: none;
  background: var(--flade);
}
.kategorier a:hover { border-color: var(--patina); color: var(--patina); }
.kategorier a.valgt { background: var(--patina); border-color: var(--patina); color: #fff; }
.kategorier a.valgt span { color: rgba(255, 255, 255, 0.8); }
.kategorier span { color: var(--skifer-svag); font-variant-numeric: tabular-nums; font-size: 0.8rem; }

.alfabet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.55rem 0;
  margin-bottom: 0.5rem;
  border-block: 1px solid var(--streg);
  position: sticky;
  top: 3.4rem;
  background: var(--dagslys);
  z-index: 2;
}
.alfabet a {
  min-width: 1.8rem;
  padding: 0.15rem 0;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}
.alfabet a:hover { background: var(--patina-lys); }

.gruppe > h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 2.25rem 0 0.4rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--streg-staerk);
  scroll-margin-top: 6rem;
}
ul.ord { list-style: none; margin: 0; padding: 0; }
ul.ord li { border-bottom: 1px solid var(--streg); }
ul.ord a {
  display: grid;
  grid-template-columns: minmax(11rem, 17rem) 1fr;
  gap: 0.25rem 1.5rem;
  padding: 0.65rem 0.5rem;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}
ul.ord a:hover { background: var(--zink); }
ul.ord .term { font-family: var(--display); font-size: 1.08rem; font-weight: 600; }
ul.ord .def { color: var(--skifer-svag); font-size: 0.91rem; }

.intet { padding: 2rem 0; color: var(--skifer-svag); }

/* ---------- Selve opslaget ---------- */

.opslag { max-width: 40rem; }
.smuler { font-size: 0.8rem; color: var(--skifer-svag); margin: 0 0 1rem; }
.smuler a { color: var(--skifer-svag); text-decoration: none; }
.smuler a:hover { color: var(--patina); text-decoration: underline; }
.smuler a + a::before { content: " / "; color: var(--streg-staerk); }

.opslag h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 0.4rem;
  letter-spacing: -0.025em;
}
.synonymer { margin: 0 0 1.5rem; color: var(--skifer-svag); font-size: 0.95rem; }

.kort {
  font-size: 1.14rem;
  line-height: 1.6;
  padding: 1.1rem 1.3rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-left: 3px solid var(--patina);
  border-radius: 4px var(--radius) var(--radius) 4px;
  box-shadow: var(--skygge);
  margin: 0 0 2.25rem;
}
.kort p { margin: 0 0 0.7rem; }
.kort p:last-child { margin-bottom: 0; }

.brødtekst h2 {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2.4rem 0 0.6rem;
}
.brødtekst p { margin: 0 0 1rem; }
.brødtekst ul { padding-left: 1.15rem; margin: 0 0 1.35rem; }
.brødtekst li { margin-bottom: 0.6rem; }
/* Kildelisten er lang og skal ikke skrige */
.brødtekst h2:last-of-type ~ ul { font-size: 0.85rem; color: var(--skifer-svag); }
.brødtekst h2:last-of-type ~ ul a { word-break: break-word; }

.mangler {
  padding: 1rem 1.15rem;
  border: 1px dashed var(--streg-staerk);
  border-radius: var(--radius);
  color: var(--skifer-svag);
  font-size: 0.95rem;
}
.kilde { font-size: 0.85rem; color: var(--skifer-svag); word-break: break-word; }

.nabo { margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid var(--streg); }
.nabo h2 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--skifer);
  margin: 0 0 0.9rem;
}
.nabo-videre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--streg);
  font-size: 0.92rem;
}
.gruppe-tal {
  font-family: var(--brug);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--skifer-svag);
  vertical-align: 0.25em;
  margin-left: 0.35rem;
}
.nabo ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0; }
.nabo a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: 2rem;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--skifer);
}
.nabo a:hover { border-color: var(--patina); color: var(--patina); }

/* ---------- Bevægelse ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero > * {
    animation: rejs 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }
  .hero > :nth-child(2) { animation-delay: 0.05s; }
  .hero > :nth-child(3) { animation-delay: 0.1s; }
  .hero > :nth-child(4) { animation-delay: 0.15s; }
  .hero > :nth-child(5) { animation-delay: 0.2s; }
}
@keyframes rejs {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: none; }
}

/* ---------- Små skærme ---------- */

@media (max-width: 44rem) {
  main { padding: 1.75rem 1.1rem 4rem; }
  .baand { padding-inline: 1.1rem; }
  .top .baand { flex-direction: column; align-items: stretch; gap: 0.55rem; padding-block: 0.7rem; }
  /* flex: 1 1 14rem gælder hovedaksen, og den er lodret her. Basis blev
     derfor til 14rem HØJDE, så der stod et tomt hul på godt 200 px mellem
     søgefeltet og menuen. Feltet skal fylde bredden og kun sin egen højde. */
  .topsoeg { flex: 0 0 auto; width: 100%; max-width: none; margin-inline: 0; }
  .topnav { flex-wrap: wrap; gap: 0.4rem 0.9rem; }
  .alfabet { top: 4.6rem; }
  ul.ord a, ol.traef a { grid-template-columns: 1fr; }
  .tilbud-linje { font-size: 0.8rem; }
  .kort-liste { gap: 0 1rem; }
}