/* Mørkt, roligt og læsbart. Teksten er varen, så alt andet træder tilbage. */
:root {
  --bund: #17111c; --flade: #ffffff0a; --kant: #ffffff1c;
  --tekst: #f2ecf3; --daempet: #b6a6bd; --accent: #c87ad6; --accent-m: #e3b6ef;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bund); color: var(--tekst);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.22; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); margin: 0 0 0.4rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 0.6rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
a { color: var(--accent-m); }
.ind { max-width: 44rem; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; }
.manchet { color: var(--daempet); font-size: 1.05rem; margin-top: 0; }
.lille { font-size: 0.86rem; color: var(--daempet); }

/* Et spring-link er det foerste, en skaermlaeser moeder. */
.spring { position: absolute; left: -9999px; }
.spring:focus { left: 1rem; top: 1rem; background: var(--accent); color: #1a0f1e; padding: 0.6rem 1rem; border-radius: 8px; z-index: 9; }

.top { display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  max-width: 44rem; margin: 0 auto; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--kant); }
.maerke { font-family: var(--serif); font-size: 1.05rem; text-decoration: none; color: var(--tekst); }
.sprogvalg { display: flex; gap: 0.4rem; }
.sprogvalg a { font-size: 0.85rem; padding: 0.25rem 0.6rem; border-radius: 999px;
  text-decoration: none; color: var(--daempet); border: 1px solid transparent; }
.sprogvalg a[aria-current] { color: var(--tekst); border-color: var(--kant); background: var(--flade); }

.krumme { font-size: 0.85rem; color: var(--daempet); margin-bottom: 0.8rem; }
.krumme a { color: var(--daempet); }
.krumme span { margin: 0 0.35rem; }

.udkast { background: #ffb4551a; border: 1px solid #ffb45540; color: #ffd8a8;
  padding: 0.7rem 0.9rem; border-radius: 10px; font-size: 0.9rem; }
.videre { color: var(--daempet); }

.emner ul, .relateret ul, .familie ul { list-style: none; padding: 0; margin: 0; }
.emner li { padding: 0.7rem 0; border-bottom: 1px solid var(--kant); }
.emner li a { font-family: var(--serif); font-size: 1.1rem; }
.emner li span { display: block; color: var(--daempet); font-size: 0.9rem; }
.relateret li { padding: 0.3rem 0; }

.varerad { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.9rem; }
.vare { background: var(--flade); border: 1px solid var(--kant); border-radius: 14px; padding: 0.9rem; }
.vare img { width: 100%; height: auto; border-radius: 10px; background: #ffffff10; }
.fakta { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; margin: 0.5rem 0; font-size: 0.86rem; }
.fakta dt { color: var(--daempet); }
.fakta dd { margin: 0; }
.pris { margin: 0.5rem 0; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.pris s { color: var(--daempet); font-size: 0.85rem; }
.lager { font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 999px; }
.lager.ja { background: #4fbf7d26; color: #9fe6bb; }
.lager.nej { background: #ffffff12; color: var(--daempet); }
.knap { display: block; text-align: center; background: linear-gradient(180deg, var(--accent-m), var(--accent));
  color: #1a0f1e; text-decoration: none; font-weight: 600; padding: 0.7rem; border-radius: 10px; min-height: 44px; }
.annonce { margin-top: 0.8rem; }

.bund { max-width: 44rem; margin: 0 auto; padding: 2rem 1.1rem 3rem; border-top: 1px solid var(--kant); }
.familie li { padding: 0.5rem 0; }
.familie li span { display: block; color: var(--daempet); font-size: 0.88rem; }
@media (max-width: 30rem) { .varerad { grid-template-columns: 1fr; } }

/* Artiklen. Laengere linjer end resten, fordi den skal laeses og ikke
   skimmes, og luft mellem afsnittene, saa oejet kan finde tilbage. */
.artikel { margin: 1.6rem 0; }
.artikel h2 { margin-top: 2.2rem; padding-top: 0.2rem; }
.artikel h3 { margin-top: 1.4rem; font-size: 1rem; color: var(--accent-m); }
.artikel p { margin: 0 0 1rem; }
.artikel ul, .artikel ol { padding-left: 1.2rem; }
.artikel li { margin-bottom: 0.4rem; }
.artikel strong { color: #fff; }
.artikel table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; }
.artikel th, .artikel td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--kant); }
.artikel th { color: var(--daempet); font-weight: 400; }
.artikel a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Forsiden. Den var 200 ord og nul billeder, og den er den mest sete side.
   Billedet er en figur og ikke produktfotos: forsiden bliver delt og vist
   frem, og sitet lover diskretion paa hver anden underside. */

/* Tallene. Store nok til at kunne ses, ikke saa store at de raaber. */
.tal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem;
  margin: 1.6rem 0 2rem; padding: 1.1rem 0; border-top: 1px solid var(--kant);
  border-bottom: 1px solid var(--kant); }
.tal div { min-width: 0; }
.tal strong { display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2rem); color: var(--accent-m); line-height: 1.1; }
.tal span { display: block; color: var(--daempet); font-size: 0.82rem; margin-top: 0.25rem; }
@media (max-width: 34rem) { .tal { grid-template-columns: 1fr; gap: 0.9rem; text-align: left; } }

/* Figuren. Tegnet af feedet, ikke indkoebt. Se src/figur.py. */
.figur { margin: 1.6rem 0 2rem; padding: 1.1rem 1rem 0.8rem; background: var(--flade);
  border: 1px solid var(--kant); border-radius: 14px; }
.figur svg { display: block; max-width: 100%; height: auto; }
.figur figcaption { margin-top: 0.6rem; }

/* Et soestersite ejer emnet. Se src/soesterside.py. Dæmpet, ikke en advarsel:
   det er en henvisning og ikke en fejl. */
.soester { background: var(--flade); border: 1px solid var(--kant); border-radius: 12px;
  padding: 0.8rem 1rem; font-size: 0.92rem; color: var(--daempet); }
.soester a { white-space: nowrap; }