/* Playa Tropical — design "C2 · Siden 1969 med sydens varme" (designlærred 18-10-2026) */
@font-face { font-family: "Libre Caslon Text"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/libre-caslon-text-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }

:root {
  --sand: #F6EBDA;      /* baggrund */
  --kalk: #FFFDF8;      /* hvidkalk, kort og flisebund */
  --blaek: #2B1D14;     /* tekst */
  --brun: #6B5646;      /* sekundær tekst */
  --terra: #9A3F25;     /* accent, links, knapper */
  --terra-mork: #6E2A17;
  --kobolt: #1E4F8F;    /* fliser */
  --okker: #D9A441;     /* fliser, sol */
  --streg: #D8C6AE;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--blaek); font-family: var(--sans); font-size: 18px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--terra); }
a:hover { color: var(--terra-mork); }
:focus-visible { outline: 3px solid var(--kobolt); outline-offset: 2px; }

.fliser { display: block; width: 100%; height: 28px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* sidehoved */
.masthead { border-bottom: 3px double var(--blaek); }
.masthead .top { padding: 28px 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--terra); font-weight: 600; }
.logo { text-decoration: none; color: var(--blaek); font-family: var(--serif); font-size: clamp(40px, 7vw, 66px); font-weight: 700; line-height: 1; }
.logo:hover { color: var(--blaek); }
.hovedmenu { border-top: 1px solid var(--blaek); }
.hovedmenu ul { list-style: none; margin: 0 auto; max-width: 1200px; padding: 4px 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 28px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.hovedmenu a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--blaek); }
.hovedmenu a[aria-current="page"] { color: var(--terra); text-decoration: underline; text-underline-offset: 6px; }
.hovedmenu a.medlem { color: var(--terra); }

/* forside */
.hero { margin: 40px auto 0; }
.hero img { display: block; width: 100%; height: clamp(260px, 42vw, 520px); object-fit: cover; object-position: 50% 30%; }
figcaption, .billedtekst { font-size: 14px; color: var(--brun); font-style: italic; font-family: var(--serif); margin-top: 10px; }
.intro { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 48px; padding-bottom: 56px; }
.polaroid { flex: 1 1 380px; min-width: 0; margin: 0; background: var(--kalk); padding: 14px 14px 12px; box-shadow: 0 2px 10px rgba(43, 29, 20, .14); transform: rotate(-1.2deg); }
.polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: sepia(.55) saturate(1.1); }
.intro .tekst { flex: 1 1 380px; display: flex; flex-direction: column; gap: 20px; }
.overline { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--terra); font-weight: 600; }
.lead { font-family: var(--serif); font-size: 20px; line-height: 1.7; margin: 0; }
.knap { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; padding: 0 22px; background: var(--terra); color: #fff; text-decoration: none; font-weight: 600; }
.knap:hover { background: var(--terra-mork); color: #fff; }

.tidslinje { background: var(--kalk); border-top: 1px solid var(--blaek); border-bottom: 1px solid var(--blaek); }
.tidslinje ul { list-style: none; margin: 0 auto; max-width: 1200px; padding: 36px 24px; display: flex; flex-wrap: wrap; }
.tidslinje li { flex: 1 1 160px; border-left: 1px solid var(--streg); }
.tidslinje li:last-child { border-right: 1px solid var(--streg); }
.tidslinje a { display: flex; flex-direction: column; padding: 12px 16px; text-decoration: none; color: var(--blaek); }
.tidslinje .aar { font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--terra); }
.tidslinje .sub { font-size: 15px; color: var(--brun); }

.spalter { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
.spalter article { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.spalter article + article { border-left: 1px solid var(--streg); padding-left: 40px; }
.spalter h2 { margin: 0; font-family: var(--serif); font-size: 28px; }
.spalter p { margin: 0; }

.solbaand { position: relative; height: clamp(280px, 36vw, 460px); overflow: hidden; }
.solbaand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.solbaand p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; background: rgba(30, 14, 6, .55); color: #FFF4E6; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 3vw, 34px); line-height: 1.3; padding: 28px max(24px, calc((100% - 1152px) / 2)); }

.fotorad { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 56px; padding-bottom: 64px; }
.fotorad img { flex: 1 1 240px; min-width: 0; height: 300px; object-fit: cover; }
.fotorad img:first-child { flex-grow: 2; }

/* undersider */
.brodkrumme { font-size: 15px; padding-top: 28px; color: var(--brun); }
.brodkrumme a { color: var(--brun); }
.side { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 16px; padding-bottom: 72px; }
.side > nav { flex: 1 1 220px; max-width: 280px; background: var(--kalk); border: 1px solid var(--streg); padding: 18px 20px; font-size: 16px; }
.side > nav h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 20px; }
.side > nav ul { list-style: none; margin: 0; padding: 0; }
.side > nav a { display: flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--blaek); border-bottom: 1px solid #EFE3D1; }
.side > nav a[aria-current="page"] { color: var(--terra); font-weight: 600; }
.indhold { flex: 999 1 560px; min-width: 0; max-width: 780px; }
.indhold h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 48px); line-height: 1.12; margin: 0 0 24px; }
.indhold h2, .indhold h3 { font-family: var(--serif); line-height: 1.25; margin: 36px 0 12px; }
.indhold h2 { font-size: 28px; } .indhold h3 { font-size: 22px; } .indhold h4 { font-size: 18px; margin: 24px 0 8px; }
.indhold img { display: block; margin: 20px 0; }
.indhold table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; background: var(--kalk); font-size: 16px; }
.indhold td, .indhold th { border: 1px solid var(--streg); padding: 6px 10px; text-align: left; vertical-align: top; }
.indhold a { overflow-wrap: anywhere; }
.galleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 24px 0; }
.galleri img { margin: 0; width: 100%; aspect-ratio: 1; object-fit: cover; }

.oversigt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.oversigt a { display: block; height: 100%; background: var(--kalk); border: 1px solid var(--streg); padding: 18px 20px; text-decoration: none; color: var(--blaek); font-family: var(--serif); font-size: 20px; }
.oversigt a:hover { border-color: var(--terra); color: var(--terra); }

.bemaerk { background: var(--kalk); border: 1px solid var(--streg); border-left-width: 0; padding: 18px 20px; font-size: 16px; color: var(--brun); }

/* sidefod */
.sidefod { background: #8A3A22; color: #FFF4E6; }
.sidefod .wrap { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-end; align-items: center; font-size: 15px; }
.sidefod .wrap > span { font-family: var(--serif); font-size: 18px; }
.sidefod a { color: #fff; font-weight: 600; }

@media (max-width: 700px) {
  .spalter article + article { border-left: 0; padding-left: 0; border-top: 1px solid var(--streg); padding-top: 24px; }
  .polaroid { transform: none; }
  .side > nav { max-width: none; }
}

/* sektionssider: fotobånd + kort (18-10-2026, "skal gøres lækre ... sydlig spansk feriestemning") */
.sektionsbaand { position: relative; min-height: clamp(280px, 34vw, 420px); display: flex; align-items: flex-end; overflow: hidden; color: #FFF4E6; }
.sektionsbaand > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.sektionsbaand.sepia > img { filter: sepia(.55) saturate(1.1); }
.sektionsbaand::after { content: ""; position: absolute; inset: 0; background: rgba(30, 14, 6, .5); }
.sektionsbaand .wrap { position: relative; z-index: 1; width: 100%; padding-top: 24px; padding-bottom: 36px; }
.sektionsbaand .brodkrumme, .sektionsbaand .brodkrumme a { color: #F6D9A8; padding-top: 0; }
.sektionsbaand h1 { margin: 6px 0 8px; font-family: var(--serif); font-size: clamp(40px, 6vw, 64px); line-height: 1.05; color: #fff; }
.sektionsbaand .lead { color: #FFF4E6; max-width: 700px; }

.kortgitter { list-style: none; margin: 0; padding: 48px 0 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.kort { height: 100%; display: flex; flex-direction: column; background: var(--kalk); text-decoration: none; color: var(--blaek); box-shadow: 0 2px 10px rgba(43, 29, 20, .12); transition: transform .2s ease, box-shadow .2s ease; }
.kort:hover { color: var(--blaek); transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 10px 24px rgba(43, 29, 20, .2); }
.kort-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 6px solid var(--okker); }
.kort-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) sepia(.12); transition: transform .4s ease; }
.kort:hover .kort-foto img { transform: scale(1.05); }
.kort-flise { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: #FFF4E6; border-bottom: 6px solid var(--okker);
  background-image: radial-gradient(circle at 0 0, rgba(255,255,255,.14) 0 22px, transparent 23px), radial-gradient(circle at 100% 100%, rgba(255,255,255,.14) 0 22px, transparent 23px);
  background-size: 56px 56px; }
.kort-terra .kort-flise { background-color: var(--terra); }
.kort-kobolt .kort-flise { background-color: var(--kobolt); }
.kort-oliven .kort-flise { background-color: #4F5B2A; }
.kort-aar { font-family: var(--serif); font-size: 52px; font-weight: 700; line-height: 1; }
.kort-tekst { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.kort-titel { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--terra); }
.kort-uddrag { font-size: 16px; color: var(--brun); line-height: 1.5; }
.kort-mere { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 600; color: var(--terra); }
@media (prefers-reduced-motion: reduce) { .kort, .kort-foto img { transition: none; } .kort:hover { transform: none; } }

/* 18-10-2026: runde hjørner + samlet varm palet (Lars: "meget skarpe hjørner og farve mismatch") */
:root { --r: 16px; --r-lille: 10px; --braendt: #B4552A; --okker-mork: #A9781F; }
.hero img, .fotorad img, .solbaand { border-radius: var(--r); }
.solbaand { margin: 0 24px; max-width: 1152px; }
@media (min-width: 1200px) { .solbaand { margin: 0 auto; } }
.polaroid { border-radius: var(--r-lille); }
.polaroid img { border-radius: 6px; }
.knap { border-radius: 999px; }
.tidslinje { border: 0; background: transparent; }
.tidslinje ul { background: var(--kalk); border-radius: var(--r); box-shadow: 0 2px 10px rgba(43, 29, 20, .1); margin: 0 24px; padding: 20px; }
@media (min-width: 1200px) { .tidslinje ul { margin: 0 auto; } }
.tidslinje li, .tidslinje li:last-child { border: 0; }
.tidslinje a { border-radius: var(--r-lille); }
.tidslinje a:hover { background: var(--sand); }
.side > nav, .bemaerk, .oversigt a { border-radius: var(--r); }
.bemaerk { border-left-width: 1px; }
.indhold img { border-radius: var(--r-lille); }
.indhold table { border-radius: var(--r-lille); }
.galleri img { border-radius: var(--r-lille); }

.sektionsbaand { margin: 24px 24px 0; border-radius: var(--r); }
@media (min-width: 1248px) { .sektionsbaand { max-width: 1200px; margin: 24px auto 0; } }

.kort { border-radius: var(--r); overflow: hidden; }
.kort-foto, .kort-flise { border-bottom: 0; }
.kort-tekst { border-top: 4px solid var(--okker); }
.kort-terra .kort-flise { background-color: var(--terra); }
.kort-kobolt .kort-flise { background-color: var(--braendt); }
.kort-oliven .kort-flise { background-color: var(--okker-mork); }

.sidefod { background: var(--terra-mork); }

/* 18-10-2026: mere sol, energi, glæde, mad & vin (Lars) */
:root { --sand: #FFF3DC; --kalk: #FFFCF4; --terra: #A63A1C; --terra-mork: #7A2A12; --sol: #F2A22C; --tomat: #D9482B; --dyb: #4A2410; }
body { background: var(--sand); }
.kicker svg { width: 28px; height: 28px; }
.kicker svg circle { fill: var(--sol); stroke: #E08A12; }
.kicker svg path { stroke: #E08A12; }
.fliser { height: 22px; }

.solsektion { background: var(--sol); color: var(--dyb); margin-top: 24px; }
.solsektion .wrap { padding-top: 24px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.solsektion .overline { color: var(--dyb); }
.solsektion h2 { margin: 0; font-family: var(--serif); font-size: clamp(34px, 5vw, 52px); line-height: 1.08; }
.solsektion .lead { max-width: 720px; }
.bolge { display: block; width: 100%; height: 48px; fill: var(--sand); background: var(--sol); }
.bolge.ned { transform: scaleY(-1); }
.madkort { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.madkort a { display: flex; flex-direction: column; height: 100%; background: var(--kalk); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--dyb); box-shadow: 0 6px 18px rgba(74, 36, 16, .18); transition: transform .2s ease; }
.madkort a:hover { color: var(--dyb); transform: translateY(-4px) rotate(.5deg); }
.madkort img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.madkort span { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 20px; font-size: 16px; border-top: 4px solid var(--tomat); }
.madkort strong { font-family: var(--serif); font-size: 24px; color: var(--terra); }

.sektionsbaand::after { background: rgba(110, 36, 8, .42); }
.kort-tekst { border-top-color: var(--sol); }
.kort-terra .kort-flise { background-color: var(--terra); }
.kort-kobolt .kort-flise { background-color: var(--tomat); }
.kort-oliven .kort-flise { background-color: var(--sol); color: var(--dyb); }
.knap { background: var(--tomat); }
.knap:hover { background: var(--terra); }
@media (prefers-reduced-motion: reduce) { .madkort a { transition: none; } .madkort a:hover { transform: none; } }

/* blog (18-10-2026) */
.blogsektion { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.blogsektion h2 { margin: 0; font-family: var(--serif); font-size: clamp(32px, 4.5vw, 44px); line-height: 1.1; }
.blogsektion .kortgitter { padding: 20px 0 8px; }
.blogsektion .knap { margin-bottom: 8px; }
.kort-dato { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--brun); }

/* =====================================================================
   18-10-2026: typografisk gennemgang + "mere farve og liv"
   Typeskala: 14 · 16 · 18 (brød) · 22 (manchet) · 30 (h2) · 44–60 (h1)
   Farver: sol/safran = hoved og pynt · hav/turkis = fakta og "godt at vide" · tomat = ornamenter
   ===================================================================== */
:root { --hav: #0F6E78; --hav-lys: #DDF0EE; --sol-lys: #FBD98F; --maal: 68ch; }
h1, h2, h3, .kort-titel, .solsektion h2, .blogsektion h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { text-decoration-color: var(--sol); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--tomat); }

/* artikelhoved */
.artikelhoved { background: var(--sol-lys); position: relative; overflow: hidden; }
.artikelhoved::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: var(--sol); opacity: .55; }
.artikelhoved .wrap { position: relative; z-index: 1; padding-top: 28px; padding-bottom: 44px; display: flex; flex-direction: column; gap: 10px; }
.artikelhoved .brodkrumme { padding: 0; color: var(--dyb); }
.artikelhoved .brodkrumme a { color: var(--dyb); }
.artikelhoved .overline { color: var(--terra); }
.artikelhoved h1 { margin: 0; max-width: 20ch; font-family: var(--serif); font-size: clamp(38px, 6vw, 60px); line-height: 1.05; color: var(--terra-mork); }
.manchet { margin: 8px 0 0; max-width: 60ch; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.55; color: var(--dyb); }
.meta { margin: 6px 0 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--dyb); opacity: .8; }

.artikelbillede { margin-top: -24px; position: relative; z-index: 2; }
.artikelbillede img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--r); box-shadow: 0 10px 30px rgba(74, 36, 16, .2); }
.artikelbillede figcaption { margin-top: 10px; }

/* brødtekst + sidekolonne */
.artikel { display: grid; grid-template-columns: minmax(0, var(--maal)) minmax(240px, 320px); gap: 64px; justify-content: space-between; padding-top: 48px; padding-bottom: 64px; }
.brodtekst { min-width: 0; font-size: 18px; line-height: 1.7; }
.brodtekst > p:first-child::first-letter { float: left; font-family: var(--serif); font-weight: 700; font-size: 3.6em; line-height: .82; margin: 6px 10px 0 0; color: var(--tomat); }
.brodtekst h2 { position: relative; margin: 48px 0 14px; padding-top: 22px; font-family: var(--serif); font-size: clamp(26px, 3vw, 32px); line-height: 1.2; color: var(--terra-mork); }
.brodtekst h2::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--tomat) 0 33%, var(--sol) 33% 66%, var(--hav) 66%); }
.brodtekst h3 { margin: 32px 0 10px; font-family: var(--serif); font-size: 22px; color: var(--terra); }
.brodtekst h4 { margin: 24px 0 8px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--hav); }
.brodtekst p { margin: 0 0 18px; }
.brodtekst ul, .brodtekst ol { padding-left: 1.3em; margin: 0 0 22px; }
.brodtekst li { margin-bottom: 8px; }
.brodtekst li::marker { color: var(--tomat); }
.brodtekst strong { color: var(--dyb); }
.brodtekst figure { margin: 28px 0; }
.brodtekst figure img { margin: 0; width: 100%; border-radius: var(--r-lille); }
.brodtekst img { border-radius: var(--r-lille); }
.brodtekst table { border-radius: var(--r-lille); }

.bemaerk { position: relative; margin: 28px 0; padding: 18px 20px 18px 58px; border: 0; border-radius: var(--r); background: var(--hav-lys); color: var(--blaek); font-size: 16px; }
.bemaerk::before { content: "!"; position: absolute; left: 18px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--hav); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 15px; }

.kilder { margin-top: 48px; padding-top: 20px; border-top: 2px dotted var(--streg); font-size: 14px; color: var(--brun); }
.kilder .kilder-titel { margin: 0 0 8px; padding: 0; font-family: var(--sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brun); }
.kilder .kilder-titel::before { display: none; }
.kilder ul { padding-left: 1.1em; }
.kilder a { color: var(--brun); }

.artikelside { display: flex; flex-direction: column; gap: 24px; align-self: start; position: sticky; top: 24px; }
.boks-titel { margin: 0 0 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.toc { background: var(--kalk); border-radius: var(--r); padding: 18px 20px; box-shadow: 0 2px 10px rgba(74, 36, 16, .08); }
.toc .boks-titel { color: var(--terra); }
.toc ol { margin: 0; padding-left: 1.2em; font-size: 15px; }
.toc li { margin: 6px 0; }
.toc li::marker { color: var(--tomat); font-weight: 600; }
.toc a { color: var(--blaek); text-decoration: none; }
.toc a:hover { color: var(--terra); }

.fakta { background: var(--hav); color: #F2FBFA; border-radius: var(--r); padding: 20px 22px 22px; position: relative; overflow: hidden; }
.fakta::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 110px; height: 110px; border-radius: 50%; border: 14px solid rgba(255, 255, 255, .12); }
.fakta .boks-titel, .fakta .fakta-titel { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--sol-lys); }
.fakta dl { margin: 0; display: grid; gap: 12px; }
.fakta dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.fakta dd { margin: 2px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.3; color: #fff; }

.sektionsnav { background: var(--kalk); border-radius: var(--r); padding: 18px 20px; font-size: 15px; }
.sektionsnav .boks-titel { color: var(--hav); }
.sektionsnav ul { list-style: none; margin: 0; padding: 0; }
.sektionsnav a { display: flex; align-items: center; min-height: 38px; color: var(--blaek); text-decoration: none; border-bottom: 1px solid #F1E4CC; }
.sektionsnav a[aria-current="page"] { color: var(--tomat); font-weight: 600; }

.laesvidere { background: var(--hav-lys); }
.laesvidere .wrap { padding-top: 48px; }
.laesvidere h2 { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.5vw, 36px); color: var(--hav); }
.laesvidere .kortgitter { padding-top: 24px; padding-bottom: 56px; }

/* liv på forsiden og sektionerne */
.overline { color: var(--tomat); }
.spalter h2 { color: var(--terra-mork); }
.tidslinje .aar { color: var(--tomat); }
.tidslinje li:nth-child(3n+2) .aar { color: var(--hav); }
.tidslinje li:nth-child(3n) .aar { color: #C47E10; }

@media (max-width: 960px) {
  .artikel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .artikelside { position: static; }
}
@media (max-width: 600px) {
  .artikelhoved::after { width: 160px; height: 160px; right: -60px; top: -60px; }
  .artikelbillede { margin-top: 0; padding-top: 16px; }
}

/* 18-10-2026: strammere linjeafstand + faktatjek-mærke + tabeller i brødtekst */
.brodtekst { line-height: 1.6; }
.brodtekst p { margin: 0 0 14px; }
.brodtekst h2 { margin: 40px 0 12px; }
.brodtekst h3 { margin: 26px 0 8px; }
.brodtekst li { margin-bottom: 4px; }
.brodtekst ul, .brodtekst ol { margin-bottom: 18px; }
.faktatjek { align-self: flex-start; margin: 8px 0 0; padding: 6px 14px 6px 34px; position: relative; border-radius: 999px; background: var(--kalk); color: var(--dyb); font-size: 14px; line-height: 1.4; max-width: 70ch; }
.faktatjek::before { content: "✓"; position: absolute; left: 12px; top: 5px; color: var(--hav); font-weight: 700; }
.brodtekst table { display: table; width: 100%; margin: 8px 0 22px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: 0 1px 6px rgba(74, 36, 16, .08); }
.brodtekst th { background: var(--hav); color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; border: 0; padding: 10px 14px; }
.brodtekst td { border: 0; border-top: 1px solid #EFE3CF; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.brodtekst tbody tr:nth-child(even) td { background: #FFF7E8; }
@media (max-width: 600px) { .brodtekst table { display: block; overflow-x: auto; } }

/* lejlighedsfinder (18-10-2026): blokkene tegnet som facade set fra gaden */
.lejlighedsfinder { margin: 24px 0 32px; }
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; background: var(--sol-lys); border-radius: var(--r); padding: 16px 18px; }
.finder label { font-weight: 600; }
.finder input { width: 120px; min-height: 44px; padding: 0 12px; font: inherit; font-size: 20px; border: 2px solid var(--terra); border-radius: 10px; background: var(--kalk); color: var(--blaek); }
.finder button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--tomat); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.finder button:hover { background: var(--terra); }
.finder-svar { flex-basis: 100%; margin: 4px 0 0; font-size: 16px; }
.facade { display: flex; gap: 18px; overflow-x: auto; padding: 18px 4px 10px; align-items: flex-end; }
.blok { margin: 0; flex: 1 0 210px; display: flex; flex-direction: column; gap: 8px; }
.blok figcaption { text-align: center; font-family: var(--serif); font-size: 18px; color: var(--terra-mork); font-style: normal; margin: 0; }
.facade-blok { background: #F4C4A1; border-radius: 6px 6px 0 0; padding: 10px 8px 0; box-shadow: inset 0 -6px 0 #D99A72, 0 4px 14px rgba(74, 36, 16, .15); display: flex; flex-direction: column; gap: 4px; }
.etage { display: grid; grid-template-columns: 26px repeat(4, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.etage-nr { font-size: 11px; font-weight: 600; color: #8A4B2A; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.altan { position: relative; height: 34px; border-radius: 3px; background: #FFF6EC; cursor: pointer; display: grid; place-items: center;
  box-shadow: inset 0 -9px 0 0 #fff, inset 0 -10px 0 0 #C9C2B8; transition: background .15s, transform .15s; }
.altan::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 7px; background: repeating-linear-gradient(90deg, #9C948A 0 1px, transparent 1px 5px); }
.altan span { font-size: 13px; font-weight: 600; color: var(--dyb); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.altan:hover { background: var(--sol-lys); }
.altan.valgt { background: var(--tomat); transform: scale(1.12); z-index: 1; box-shadow: 0 0 0 3px var(--sol), 0 6px 14px rgba(0, 0, 0, .25); }
.altan.valgt span { color: #fff; }
.opgang { height: 34px; display: grid; place-items: end center; }
.opgang span { width: 100%; height: 30px; border-radius: 14px 14px 0 0; background: #6E4A33; color: #FBE7D3; font-size: 10px; font-weight: 600; display: grid; place-items: center; text-align: center; line-height: 1.1; padding: 0 2px; }

/* fotoalbum (18-10-2026) */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.album figure { margin: 0; }
.album img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lille); display: block; }
.album figcaption { margin-top: 6px; font-size: 14px; }

/* lysboks + Ken Burns (18-10-2026) */
.kan-forstoerres { cursor: zoom-in; transition: filter .2s; }
.kan-forstoerres:hover { filter: brightness(1.06) saturate(1.08); }
html.lys-aaben { overflow: hidden; }
.lysboks { position: fixed; inset: 0; z-index: 100; background: rgba(28, 14, 6, .94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.lysboks[hidden] { display: none; }
.lys-ramme { width: min(1400px, 100%); height: min(80vh, 900px); overflow: hidden; border-radius: var(--r); display: grid; place-items: center; }
.lys-ramme img { width: 100%; height: 100%; object-fit: contain; transform-origin: center; }
.lys-tekst { margin: 0; max-width: 70ch; color: #FFF4E6; font-family: var(--serif); font-style: italic; font-size: 18px; text-align: center; min-height: 1.4em; }
.lysboks button { font: inherit; cursor: pointer; border: 0; color: #fff; background: rgba(255, 255, 255, .12); }
.lysboks button:hover { background: var(--tomat); }
.lys-luk { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1; }
.lys-forrige, .lys-naeste { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; font-size: 34px; line-height: 1; }
.lys-forrige { left: max(14px, env(safe-area-inset-left, 0px)); }
.lys-naeste { right: max(14px, env(safe-area-inset-right, 0px)); }
.lys-bund { display: flex; gap: 16px; align-items: center; color: #F6D9A8; font-size: 14px; letter-spacing: .08em; }
.lys-show { min-height: 40px; padding: 0 18px; border-radius: 999px; }

/* Ken Burns: fire varianter af langsom zoom og glid */
@keyframes kb-1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-2.5%, -1.5%); } }
@keyframes kb-2 { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1) translate(0, 0); } }
@keyframes kb-3 { from { transform: scale(1.02) translate(2%, -1%); } to { transform: scale(1.16) translate(-2%, 1.5%); } }
@keyframes kb-4 { from { transform: scale(1.12) translate(-2%, 2%); } to { transform: scale(1.02) translate(1.5%, -1%); } }
.lys-ramme img.kb-1 { animation: kb-1 9s ease-out forwards; }
.lys-ramme img.kb-2 { animation: kb-2 9s ease-out forwards; }
.lys-ramme img.kb-3 { animation: kb-3 9s ease-out forwards; }
.lys-ramme img.kb-4 { animation: kb-4 9s ease-out forwards; }
/* stille Ken Burns i fotobåndene og på forsidebilledet */
@keyframes kb-baand { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.sektionsbaand > img, .solbaand img, .hero img { animation: kb-baand 26s ease-in-out infinite alternate; }
.hero { overflow: hidden; border-radius: var(--r); }
@media (prefers-reduced-motion: reduce) {
  .sektionsbaand > img, .solbaand img, .hero img, .lys-ramme img { animation: none !important; }
}
@media (max-width: 600px) { .lys-forrige, .lys-naeste { top: auto; bottom: max(14px, env(safe-area-inset-bottom, 0px)); transform: none; } .lys-ramme { height: 70vh; } }

/* små album-billeder i centreret gitter (18-10-2026) */
.album-lille { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-width: 900px; margin: 24px auto; justify-content: center; }
.album-lille figure { margin: 0; }
.album-lille img { aspect-ratio: 1; border-radius: 8px; box-shadow: 0 2px 8px rgba(74, 36, 16, .15); transition: transform .2s; }
.album-lille img:hover { transform: scale(1.04) rotate(-.6deg); }
.album-commons { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.album-commons figcaption { font-family: var(--sans); font-style: normal; font-size: 13px; line-height: 1.45; color: var(--brun); }
.album-commons figcaption strong { display: block; font-family: var(--serif); font-size: 16px; color: var(--terra-mork); }

/* 18-10-2026: altid 3 kolonner i albummerne på store skærme (Lars) */
.album:not(.album-lille), .album-commons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .album:not(.album-lille), .album-commons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .album:not(.album-lille), .album-commons { grid-template-columns: minmax(0, 1fr); } }

/* kort + steder (18-10-2026) */
.kort-ramme { border-radius: var(--r); overflow: hidden; box-shadow: 0 4px 16px rgba(74, 36, 16, .15); margin: 12px 0 6px; }
.kort { height: 420px; width: 100%; }
.pt-ikon { color: var(--tomat); font-size: 30px; line-height: 30px; text-align: center; text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.sapori-etiket { font-weight: 700; color: var(--dyb); }
.steder { list-style: none; margin: 12px 0 24px; padding: 0; display: grid; gap: 12px; }
.sted { background: var(--kalk); border-radius: var(--r); padding: 14px 18px; box-shadow: 0 1px 6px rgba(74, 36, 16, .08); }
.sted.fremhaevet { background: var(--sol-lys); box-shadow: 0 0 0 3px var(--sol), 0 6px 16px rgba(74, 36, 16, .15); }
.sted-hoved { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.brodtekst .sted h3 { margin: 0; font-size: 20px; color: var(--terra-mork); }
.sted-meta { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--brun); font-variant-numeric: tabular-nums; }
.brodtekst .sted p { margin: 6px 0 0; font-size: 16px; }
.brodtekst .sted .sted-links { font-size: 14px; }
@media (max-width: 600px) { .kort { height: 320px; } }
.madkort .sapori-kort a { box-shadow: 0 0 0 4px var(--tomat), 0 6px 18px rgba(74, 36, 16, .25); }

/* før/efter-skyder (18-10-2026) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.foer-efter { position: relative; margin: 16px 0 28px; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 6px 20px rgba(74, 36, 16, .2); }
.foer-efter > img, .foer-efter .foer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.foer-efter .foer { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.foer-efter .foer::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--sol); box-shadow: 0 0 6px rgba(0,0,0,.4); }
.foer-efter input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.foer-efter input[type=range]:focus-visible + * , .foer-efter:focus-within { outline: 3px solid var(--kobolt); outline-offset: 2px; }
.foer-efter .etiket { position: absolute; top: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(30, 14, 6, .7); color: #FFF4E6; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.foer-efter .venstre { left: 12px; } .foer-efter .hoejre { right: 12px; }

/* overskriftsbilleder er statiske – ingen lysboks, ingen zoom (18-10-2026) */
.hero img, .sektionsbaand > img, .artikelbillede img { animation: none !important; transform: none !important; cursor: default; }

/* kort i fuld skærm (18-10-2026) */
.kort-ramme { position: relative; }
.kort { cursor: zoom-in; }
.kort-aabn { position: absolute; z-index: 500; right: 12px; bottom: 12px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tomat); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.kort-aabn:hover { background: var(--terra); }
.kort-luk { display: none; }
.kort-ramme.kort-fuld { position: fixed; inset: 0; z-index: 2000; margin: 0; border-radius: 0; background: var(--kalk);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.kort-ramme.kort-fuld .kort { height: 100%; cursor: grab; }
.kort-ramme.kort-fuld .kort-aabn { display: none; }
.kort-ramme.kort-fuld .kort-luk { display: grid; place-items: center; position: absolute; z-index: 2100; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--tomat); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.3); }

/* Sapori-bedømmelse (18-10-2026) */
.bedoemmelse { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 8px 0 28px; padding: 20px 24px; border-radius: var(--r);
  background: var(--sol-lys); box-shadow: 0 0 0 3px var(--sol), 0 8px 22px rgba(74, 36, 16, .18); }
.bedoemmelse-tal { font-family: var(--serif); font-weight: 700; font-size: 72px; line-height: .9; color: var(--terra-mork); font-variant-numeric: tabular-nums; }
.bedoemmelse-tal span { font-size: 26px; color: var(--brun); margin-left: 2px; }
.bedoemmelse-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bedoemmelse .stjerner { font-size: 28px; letter-spacing: 3px; color: #E8900F; line-height: 1; }
.bedoemmelse strong { font-size: 20px; color: var(--dyb); }
.bedoemmelse-tekst span { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--terra-mork); }
.bedoemmelse small { font-size: 12px; color: var(--brun); letter-spacing: .06em; text-transform: uppercase; }
.sapori-stjerner { display: block; font-style: normal; font-weight: 600; color: #C77A0A; }
/* nyt forsidebillede (indgangen, højformat): vis buen og blokken */
.hero img { object-position: 50% 58%; }
.kapitler { padding: 12px 0 24px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.brodtekst .kapitler .kort-titel { font-size: 20px; }
/* Commons-billeder med kreditering (18-10-2026) */
figure.commons { margin: 24px 0; }
.album figure.commons { margin: 0; }
figure.commons figcaption { font-size: 14px; }
figure.commons .kredit { display: block; margin-top: 2px; font-family: var(--sans); font-style: normal; font-size: 11px; color: var(--brun); opacity: .85; }
figure.commons .kredit a { color: inherit; }
/* udsnit på enkelte topbilleder: vis skiltet og stranden nederst (18-10-2026) */
.artikelbillede img[src*="skiltet-og-penon-del-santo"] { object-position: 50% 100%; }

/* =====================================================================
   Historiesiderne (18-10-2026): bogtypografi, datorubrikker, gamle dokumenter
   ===================================================================== */
@font-face { font-family: "Special Elite"; font-weight: 400; font-display: swap; src: url(/fonts/special-elite-latin-400-normal.woff2) format("woff2"); }
.historie-tekst { font-family: var(--serif); font-size: 19px; line-height: 1.75; }
.historie-tekst p { margin: 0 0 16px; }
.historie-tekst strong { font-weight: 700; color: var(--terra-mork); }
.historie-tekst p.dato { margin: 34px 0 6px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); display: flex; align-items: center; gap: 10px; }
.historie-tekst p.dato::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sol); box-shadow: 0 0 0 3px var(--sol-lys); flex: none; }
.historie-tekst span.dato { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terra); margin-right: 4px; }
hr.ornament { border: 0; width: 84px; height: 10px; margin: 36px auto; background: radial-gradient(circle, var(--tomat) 3px, transparent 3.5px) 0 50% / 28px 10px repeat-x; opacity: .8; }
.dokument { position: relative; margin: 28px 0 32px; padding: 30px 34px 26px; background: #FBF4E2; color: #3A2E22; font-family: "Special Elite", "Courier New", monospace; font-size: 16px; line-height: 1.65;
  border-radius: 4px; box-shadow: 0 1px 0 #E9DCC2, 0 8px 22px rgba(74, 36, 16, .16); transform: rotate(-.35deg);
  background-image: linear-gradient(transparent 0 calc(100% - 1px), rgba(160, 120, 70, .08) 0); background-size: 100% 26.4px; }
.dokument::before { content: "Dokument"; position: absolute; top: -11px; left: 22px; padding: 2px 10px; background: var(--terra); color: #fff; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; border-radius: 3px; }
.dokument p { margin: 0 0 10px; }
.dokument p:first-child { font-size: 19px; letter-spacing: .08em; text-align: center; margin-bottom: 16px; }
.dokument strong { color: inherit; font-weight: 400; }
.historie-tekst > .dokument + p::first-letter, .historie-tekst .dokument p::first-letter { all: unset; }
@media (prefers-reduced-motion: reduce) { .dokument { transform: none; } }

/* fremhævede afsnit i historien (18-10-2026) */
.historie-tekst p.fremhaevning { position: relative; margin: 30px 0; padding: 22px 24px 20px; border-radius: var(--r); }
.historie-tekst p.fremhaevning .etiket { display: block; margin-bottom: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.historie-tekst p.milepael { background: var(--hav); color: #F2FBFA; font-size: 21px; line-height: 1.5; box-shadow: 0 8px 22px rgba(15, 110, 120, .25); }
.historie-tekst p.milepael .etiket { color: var(--sol-lys); }
.historie-tekst p.milepael strong, .historie-tekst p.milepael .dato { color: #fff; }
.historie-tekst p.kuriosum { background: var(--sol-lys); color: var(--dyb); transform: rotate(-.4deg); box-shadow: 0 6px 16px rgba(74, 36, 16, .12); }
.historie-tekst p.kuriosum .etiket { color: var(--terra); }
.historie-tekst p.citat { padding: 10px 0 10px 64px; background: none; font-size: clamp(22px, 2.6vw, 27px); line-height: 1.45; font-style: italic; color: var(--terra-mork); }
.historie-tekst p.citat::before { content: "\201C"; position: absolute; left: 0; top: -14px; font-family: var(--serif); font-size: 96px; line-height: 1; color: var(--sol); font-style: normal; }
.historie-tekst p.citat strong { font-weight: 400; }
/* medlemsgraf */
.graf { display: grid; gap: 8px; }
.graf-raekke { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.graf-dato { opacity: .9; }
.graf-bar { position: relative; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.graf-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--sol); border-radius: 6px; }
.graf-bar b { position: relative; padding-left: 8px; font-family: var(--serif); font-size: 15px; color: var(--dyb); line-height: 22px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .historie-tekst p.kuriosum { transform: none; } }

/* Ken Burns: halveret zoom og glid (Lars 18-10-2026) – erstatter de tidligere keyframes */
@keyframes kb-1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.07) translate(-1.25%, -.75%); } }
@keyframes kb-2 { from { transform: scale(1.07) translate(1%, .5%); } to { transform: scale(1) translate(0, 0); } }
@keyframes kb-3 { from { transform: scale(1.01) translate(1%, -.5%); } to { transform: scale(1.08) translate(-1%, .75%); } }
@keyframes kb-4 { from { transform: scale(1.06) translate(-1%, 1%); } to { transform: scale(1.01) translate(.75%, -.5%); } }
@keyframes kb-baand { from { transform: scale(1.01); } to { transform: scale(1.06) translate(-.75%, -.5%); } }

/* Ken Burns i lysboksen: zoom fra nederste del af billedet, kun vandret glid – så bunden (strand, skilt) aldrig skæres af (18-10-2026) */
.lys-ramme img { transform-origin: 50% 88%; }
@keyframes kb-1 { from { transform: scale(1) translateX(0); } to { transform: scale(1.07) translateX(-1.25%); } }
@keyframes kb-2 { from { transform: scale(1.07) translateX(1%); } to { transform: scale(1) translateX(0); } }
@keyframes kb-3 { from { transform: scale(1.01) translateX(1%); } to { transform: scale(1.08) translateX(-1%); } }
@keyframes kb-4 { from { transform: scale(1.06) translateX(-1%); } to { transform: scale(1.01) translateX(.75%); } }

/* "Lige nu"-nyhed (18-10-2026) */
.nyhedsbaand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: var(--tomat); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; text-align: center; }
.nyhedsbaand:hover { background: var(--terra); color: #fff; }
.nyhed-maerke { padding: 2px 10px; border-radius: 999px; background: var(--sol); color: var(--dyb); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.lige-nu { padding-top: 32px; }
.lige-nu-kort { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; padding: 26px 30px; border-radius: var(--r); background: var(--sol-lys); text-decoration: none; color: var(--dyb);
  box-shadow: 0 0 0 3px var(--sol), 0 10px 26px rgba(74, 36, 16, .18); }
.lige-nu-kort:hover { color: var(--dyb); }
.lige-nu-kort img { flex: 0 0 150px; width: 150px; height: 180px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(74, 36, 16, .25)); }
.lige-nu-tekst { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lige-nu-tekst strong { font-family: var(--serif); font-size: clamp(30px, 4vw, 42px); line-height: 1.1; color: var(--terra-mork); }
.lige-nu-tekst .knap { align-self: flex-start; }

/* Den danske klub – fremhævet (18-10-2026) */
.hovedmenu a.klub-menu { color: #fff; background: var(--terra); padding: 0 14px; border-radius: 999px; min-height: 36px; margin: 4px 0; }
.hovedmenu a.klub-menu:hover, .hovedmenu a.klub-menu[aria-current="page"] { background: var(--tomat); color: #fff; text-decoration: none; }
.klubsektion { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 44px; margin-top: 36px; padding-top: 34px; padding-bottom: 34px;
  background: linear-gradient(90deg, transparent 0 0); position: relative; }
.klubsektion::before { content: ""; position: absolute; inset: 0 max(16px, calc((100% - 1200px) / 2 + 0px)); border-radius: var(--r); background: #FFFFFF;
  box-shadow: 0 0 0 3px #C8102E, 0 12px 30px rgba(74, 36, 16, .18); z-index: -1; }
.klubsektion { isolation: isolate; padding-left: 40px; padding-right: 40px; }
.klub-fotos { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.klub-fotos img { width: 100%; height: 340px; object-fit: cover; border-radius: var(--r-lille); }
.klub-fotos img:last-child { height: 340px; }
.klub-tekst { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.klub-tekst .overline { color: #C8102E; }
.klub-tekst h2 { margin: 0; font-family: var(--serif); font-size: clamp(36px, 5vw, 52px); line-height: 1.05; color: var(--terra-mork); }
.klub-tekst h2::after { content: ""; display: inline-block; width: 34px; height: 24px; margin-left: 14px; vertical-align: middle; border-radius: 3px;
  background: linear-gradient(#C8102E 0 0) 0 0 / 100% 100%, #C8102E; box-shadow: inset 11px 0 0 -0px #C8102E;
  background-image: linear-gradient(90deg, transparent 0 10px, #fff 10px 14px, transparent 14px), linear-gradient(transparent 0 10px, #fff 10px 14px, transparent 14px); }
.klub-punkter { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; }
.klub-punkter li { padding-left: 26px; position: relative; }
.klub-punkter li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 10px; border-radius: 2px; background: #C8102E;
  background-image: linear-gradient(90deg, transparent 0 4px, #fff 4px 6px, transparent 6px), linear-gradient(transparent 0 4px, #fff 4px 6px, transparent 6px); }
.klub-tekst .knap { background: #C8102E; }
.klub-tekst .knap:hover { background: var(--terra-mork); }
@media (max-width: 700px) { .klubsektion { padding-left: 24px; padding-right: 24px; } .klub-fotos img, .klub-fotos img:last-child { height: 220px; } }

/* Blog-undermenu + videoer (18-10-2026) */
.hovedmenu li.har-under { position: relative; }
.undermenu-drop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 50; list-style: none; margin: 0; padding: 6px; min-width: 150px;
  background: var(--kalk); border-radius: 12px; box-shadow: 0 10px 24px rgba(74, 36, 16, .2); text-transform: none; letter-spacing: 0; }
.har-under:hover .undermenu-drop, .har-under:focus-within .undermenu-drop { display: block; }
.undermenu-drop a { display: flex; min-height: 40px; padding: 0 14px; border-radius: 8px; font-weight: 600; }
.undermenu-drop a:hover { background: var(--sol-lys); }
.undernav { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 22px; }
.undernav a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; background: var(--kalk); color: var(--blaek); text-decoration: none; font-weight: 600; box-shadow: 0 1px 6px rgba(74, 36, 16, .1); }
.undernav a[aria-current="page"] { background: var(--terra); color: #fff; }
.videoer { padding-bottom: 64px; }
.videogruppe { margin: 40px 0 16px; font-family: var(--serif); font-size: clamp(26px, 3vw, 32px); color: var(--terra-mork); }
.videogitter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.video-kort { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--kalk); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 2px 10px rgba(74, 36, 16, .12); transition: transform .2s, box-shadow .2s; }
.video-kort:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(74, 36, 16, .2); }
.video-kort:focus-visible { outline: 3px solid var(--kobolt); outline-offset: 2px; }
.video-billede { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.video-billede img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(217, 72, 43, .92); box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .2s; }
.video-play::after { content: ""; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
.video-kort:hover .video-play { transform: scale(1.1); }
.video-tekst { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.video-tekst strong { font-family: var(--serif); font-size: 18px; line-height: 1.3; color: var(--terra-mork); }
.video-tekst span { font-size: 13px; color: var(--brun); }
.videoboks { position: fixed; inset: 0; z-index: 3000; background: rgba(20, 10, 4, .94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.videoboks[hidden] { display: none; }
.video-ramme { width: min(1280px, 100%, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.video-ramme iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-titel { margin: 0; color: #FFF4E6; font-family: var(--serif); font-style: italic; font-size: 18px; text-align: center; }
.video-luk { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--tomat); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.video-yt { min-height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; }
.video-yt:hover { background: var(--tomat); color: #fff; }

/* =====================================================================
   Dropdown-menu (18-10-2026) – samme opførsel som maskinrummet.eu
   ===================================================================== */
.hovedmenu .har-under, .undermenu-drop { display: none; }
.hovedmenu ul { overflow: visible; }
.hovedmenu .navgroup { position: relative; display: inline-flex; align-items: center; }
.hovedmenu .navtoggle { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 26px; min-height: 44px; color: var(--blaek); font-size: 12px; opacity: .7; transition: transform .18s ease, opacity .15s; }
.hovedmenu .navtoggle:hover, .navgroup.open > .navtoggle { opacity: 1; color: var(--terra); }
.navgroup.open > .navtoggle { transform: rotate(180deg); }
.hovedmenu .navtoggle:focus-visible { outline: 3px solid var(--kobolt); outline-offset: 2px; border-radius: 4px; }
.hovedmenu .navmenu {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 60; min-width: 250px; max-width: min(92vw, 560px);
  list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px;
  background: var(--kalk); border: 1.5px solid var(--sol); border-radius: 14px; box-shadow: 0 16px 36px -10px rgba(74, 36, 16, .35);
  text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500;
  opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.98); transform-origin: top center;
  transition: opacity .15s ease .13s, transform .18s cubic-bezier(.2,.75,.3,1) .13s, visibility 0s linear .32s;
}
.hovedmenu .navmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* usynlig bro */
.hovedmenu .navmenu-bred { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 520px; }
.hovedmenu .navgroup:hover > .navmenu, .hovedmenu .navgroup:focus-within > .navmenu, .hovedmenu .navgroup.open > .navmenu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
  transition: opacity .13s ease, transform .16s cubic-bezier(.2,.75,.3,1), visibility 0s;
}
.hovedmenu .navmenu a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--blaek); white-space: normal; line-height: 1.25; }
.hovedmenu .navmenu a:hover { background: var(--sol-lys); color: var(--terra-mork); text-decoration: none; }
.hovedmenu .navmenu li:first-child a { font-weight: 700; color: var(--terra); }
.hovedmenu .navmenu-bred li:first-child { grid-column: 1 / -1; border-bottom: 1px solid #F1E4CC; margin-bottom: 4px; }
@media (max-width: 760px) {
  .hovedmenu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hovedmenu .navgroup { display: grid; grid-template-columns: 1fr auto; }
  .hovedmenu .navtoggle { width: 44px; }
  .hovedmenu .navmenu, .hovedmenu .navmenu-bred { position: static; grid-column: 1 / -1; display: none; min-width: 0; max-width: none; transform: none; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; border-left: 3px solid var(--sol); border-radius: 0; margin: 0 0 8px 8px; padding: 2px 0 2px 8px; transition: none; grid-template-columns: 1fr; }
  .hovedmenu .navmenu::before { display: none; }
  .hovedmenu .navgroup:hover > .navmenu, .hovedmenu .navgroup:focus-within > .navmenu { display: none; }
  .hovedmenu .navgroup.open > .navmenu { display: flex; }
  .hovedmenu a.klub-menu, .hovedmenu a.medlem { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .hovedmenu .navmenu, .hovedmenu .navtoggle { transition: none; } }
/* rettelse 18-10-2026: menuen må ikke hænge fast efter et museklik – fokus åbner kun ved tastatur (:focus-visible) */
.hovedmenu .navgroup:focus-within > .navmenu { opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(.98); }
.hovedmenu .navgroup:hover > .navmenu,
.hovedmenu .navgroup:has(:focus-visible) > .navmenu,
.hovedmenu .navgroup.open > .navmenu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .13s ease, transform .16s cubic-bezier(.2,.75,.3,1), visibility 0s; }
@media (max-width: 760px) {
  .hovedmenu .navgroup:has(:focus-visible) > .navmenu { display: none; }
  .hovedmenu .navgroup.open > .navmenu { display: flex; transform: none; }
}
/* kroner ved siden af euro (18-10-2026) */
.dkk { white-space: nowrap; font-size: .88em; color: var(--brun); }
.fakta .dkk, .milepael .dkk { color: inherit; opacity: .8; }
.kurs { margin-top: 18px; font-size: 13px; color: var(--brun); font-style: italic; }
/* medlemsområdet: login + interesse-tilmelding (18-10-2026) */
.medlemsgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 28px; align-items: start; }
.formkort { display: flex; flex-direction: column; gap: 14px; min-width: 0; background: var(--kalk); border: 1px solid var(--streg); border-radius: var(--r, 14px); padding: 24px; }
.formkort h2 { margin: 0; }
.formtekst { margin: 0; color: var(--brun); font-size: 16px; }
.formkort label { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; }
.formkort input[type=email], .formkort input[type=password], .formkort input[type=text], .formkort input[type=tel] { font: inherit; font-weight: 400; min-height: 44px; padding: 0 12px; border: 1px solid var(--streg); border-radius: 8px; background: #fff; color: var(--blaek); }
.formkort .afkryds { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--brun); }
.formkort .afkryds input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.formkort .knap { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.formkort .knap:disabled { opacity: .6; cursor: wait; }
.formkort .bemaerk.lille { margin: 0; }
.valgfri { font-weight: 400; color: var(--brun); }
.skjult { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formsvar { margin: 0; font-size: 15px; min-height: 1.5em; }
.formsvar.ok { color: #2E6B3A; font-weight: 600; }
.formsvar.fejl { color: var(--terra); font-weight: 600; }
/* brødkrummer under nyhedsbåndet + fuld footermenu (18-10-2026) */
.krummer { max-width: 1200px; margin: 0 auto; padding: 12px max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px)); }
.krummer ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 14px; color: var(--brun); }
.krummer li { display: inline-flex; align-items: center; min-width: 0; }
.krummer li + li::before { content: "›"; margin: 0 8px; color: var(--tomat); font-weight: 700; }
.krummer a { color: var(--brun); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.krummer a:hover { color: var(--terra); text-decoration: underline; text-underline-offset: 3px; }
.krummer [aria-current="page"] { color: var(--blaek); font-weight: 600; overflow-wrap: anywhere; }
.sidefod .wrap { display: block; padding-top: 44px; padding-bottom: 28px; }
.fodmenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 28px 32px; }
.fod-kol { min-width: 0; }
.fodmenu h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 19px; line-height: 1.3; }
.fodmenu h2 + h2, .fodmenu ul + h2 { margin-top: 22px; }
.fodmenu h2 a { color: #fff; text-decoration: none; }
.fodmenu h2 a:hover { color: var(--sol); }
.fodmenu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fodmenu ul a { color: #FFE9CF; font-weight: 400; font-size: 15px; text-decoration: none; display: inline-block; padding: 3px 0; line-height: 1.35; }
.fodmenu ul a:hover { color: #fff; text-decoration: underline; }
.fod-bund { margin: 36px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 233, 207, .25); font-size: 14px; color: #FFE9CF; }
.fod-bund a { color: #fff; }
/* footer trimmet: 6 spor, Almuñécar i to spalter, kompakte links (18-10-2026) */
.fodmenu { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 28px; }
.fod-bred { grid-column: span 2; }
.fodmenu .to-spalter { display: block; columns: 2; column-gap: 28px; }
.fodmenu .to-spalter li { break-inside: avoid; }
.fodmenu h2 { font-size: 17px; margin-bottom: 6px; }
.fodmenu ul + h2, .fodmenu h2 + h2 { margin-top: 16px; }
.fodmenu ul { gap: 0; }
.fodmenu ul a { font-size: 14px; padding: 2px 0; }
.fod-aar { font-size: 14px; color: #FFE9CF; line-height: 1.6; padding: 2px 0; }
.fod-aar a { padding: 0 !important; }
.fod-bund { margin-top: 28px; }
@media (max-width: 1000px) {
  .fodmenu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fod-bred { grid-column: span 2; }
}
@media (max-width: 640px) {
  .fodmenu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fod-bred { grid-column: 1 / -1; }
}
/* små arkivfotos: ikke strække dem ud (18-10-2026) */
.brodtekst figure.lille-foto { float: right; width: min(340px, 45%); margin: 6px 0 18px 28px; }
.brodtekst figure.lille-foto img { width: 100%; height: auto; }
.brodtekst figure.lille-foto figcaption { font-size: 14px; }
.brodtekst h2 { clear: both; }
@media (max-width: 640px) { .brodtekst figure.lille-foto { float: none; width: 100%; max-width: 380px; margin: 18px 0; } }