/* vandtesten.dk · de statiske sider (postnumre, vejledninger, om) og forsidens ramme (top og bund). Qleer One-udtrykket, roligt og
   læsevenligt: Crisp White, dyb Qleer-grøn tekst, mint som accent, Qleer Sans Round til overskrifter og Qleer Sans Text til
   brødtekst. Ingen JavaScript. Kontrast (sRGB, WCAG 2.x) på #FBF8F2: ink #1F3A2C 11,9:1, ink-2 #3C5461 7,4:1, mute #4E6159 6,2:1,
   alarm #8E3A20 7,2:1. Alle links og knapper er mindst 44 px høje, hvor de står alene. */

@font-face { font-family: 'Qleer Sans Round'; src: url('/fonts/qleer-sans-round-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Qleer Sans Round'; src: url('/fonts/qleer-sans-round-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Qleer Sans Text'; src: url('/fonts/qleer-sans-text-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Qleer Sans Text'; src: url('/fonts/qleer-sans-text-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Qleer Sans Text'; src: url('/fonts/qleer-sans-text-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --d: 'Qleer Sans Round', 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --t: 'Qleer Sans Text', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ink: #1F3A2C; --ink-2: #3C5461; --mute: #4E6159; --mint: #AAE1C5; --cream: #FBF8F2; --kort: #FFFDF9;
  --hair: rgba(31, 58, 44, .14); --alarm: #8E3A20;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(1rem, 4vw, 2.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.0625rem/1.6 var(--t); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 6px rgba(251, 248, 242, .9); }

/* ------------------------------------------------------------ toppen og bunden */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 1340px; margin: 0 auto; padding: clamp(.75rem, 2vw, 1.4rem) var(--gutter) 0; position: relative; z-index: 2; }
.maerke-ikon { display: inline-flex; width: 30px; height: 30px; margin-right: 9px; }
.maerke-ikon svg { width: 100%; height: 100%; }
.maerke { display: inline-flex; align-items: center; min-height: 44px; font: 500 23px/1 var(--d); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.topnav { display: flex; gap: .25rem; flex-wrap: wrap; }
.topnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; border-radius: 999px; font: 500 .95rem/1 var(--t); color: var(--ink-2); text-decoration: none; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.topnav a:hover { background: rgba(31, 58, 44, .05); color: var(--ink); }
.bund { max-width: 46rem; margin: clamp(3rem, 8vw, 5rem) auto 0; padding: 1.5rem var(--gutter) 2.5rem; border-top: 1px solid var(--hair); text-align: center; color: var(--mute); font-size: .9rem; position: relative; z-index: 2; }
.bund p { margin: 0 0 .5rem; }
.bund nav { display: flex; justify-content: center; gap: .25rem 1rem; flex-wrap: wrap; }
.bund nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }

/* ------------------------------------------------------------ indholdet */
.side { max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 5vw, 3.5rem) var(--gutter) 0; }
.kram ol { display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; font-size: .9rem; color: var(--mute); }
.kram li { display: inline-flex; align-items: center; min-height: 44px; }
.kram li + li::before { content: '›'; margin-right: .5rem; color: var(--mute); }
.kram a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; }
h1 { margin: 0; font: 400 clamp(2rem, 5.2vw, 3.25rem)/1.08 var(--d); letter-spacing: -.018em; text-wrap: balance; }
.svar { margin: 1.2rem 0 0; font: 400 clamp(1.15rem, 1.8vw, 1.32rem)/1.55 var(--t); color: var(--ink); text-wrap: pretty; }
.opdateret { margin: .9rem 0 0; font-size: .875rem; color: var(--mute); }
h2 { margin: clamp(2.4rem, 5vw, 3.2rem) 0 .8rem; font: 500 clamp(1.35rem, 2.4vw, 1.65rem)/1.2 var(--d); letter-spacing: -.01em; text-wrap: balance; }
p { margin: .8rem 0 0; text-wrap: pretty; }
/* En overskrift, der er et link (kommunerne på /postnumre/): hele linjen er målet, mindst 44 px. */
h2 > a { display: inline-flex; align-items: center; min-height: 44px; }
.kilde { margin: .35rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--mute); }
.kilde a { color: var(--ink-2); }
.note { padding: .9rem 1.1rem; border-radius: 16px; background: rgba(170, 225, 197, .28); color: var(--ink); }
.om { font: 400 1.2rem/1.55 var(--t); }
ul.fund { margin: .8rem 0 0; padding-left: 1.2rem; }
ul.fund li { margin: .45rem 0; }

/* Tabellen: rolige hårlinjer, tal i faste cifre; på telefonen ruller den inde i sin boks (aldrig hele siden). */
.tabelboks { margin: 1.2rem 0 0; overflow-x: auto; border-radius: 18px; background: var(--kort); box-shadow: 0 0 0 1px rgba(31, 58, 44, .05), 0 18px 40px -30px rgba(31, 58, 44, .35); }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 36rem; }
.tabel caption { padding: .9rem 1rem .2rem; text-align: left; font-size: .82rem; color: var(--mute); }
.tabel th, .tabel td { padding: .65rem 1rem; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.tabel thead th { font: 600 .74rem/1.2 var(--t); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tabel tbody th { font-weight: 500; white-space: nowrap; }
.tabel tr:last-child > * { border-bottom: 0; }
.tabel .tal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel tr.er-over th, .tabel tr.er-over .tal:first-of-type { color: var(--alarm); }
.st { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.st--over { background: rgba(249, 148, 112, .22); color: var(--alarm); }
.st--naer { background: rgba(245, 169, 199, .25); color: var(--ink); }
.st--under { background: rgba(170, 225, 197, .35); color: var(--ink); }
.st--ingen { background: rgba(31, 58, 44, .06); color: var(--mute); font-weight: 500; }

/* Spørgsmål og svar */
.faq { margin: 1rem 0 0; }
.faq dt { margin: 1.1rem 0 0; font: 500 1.08rem/1.35 var(--d); }
.faq dd { margin: .35rem 0 0; color: var(--ink-2); }
.kildeboks { margin-top: 2rem; padding: 0 0 .2rem; }
.kildeboks h2 { font-size: 1.15rem; }
.kildeboks p { color: var(--ink-2); font-size: .95rem; }

/* Nabopostnumre og lister med links: piller på mindst 44 px */
.naboer ul, .kommuner ul, .pnliste { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.naboer a, .kommuner a, .pnliste a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: rgba(31, 58, 44, .05); color: var(--ink); text-decoration: none; font-size: .95rem; transition: background-color 200ms var(--ease); }
.naboer a:hover, .kommuner a:hover, .pnliste a:hover { background: rgba(170, 225, 197, .45); }
.kommuner a { min-height: 44px; font-size: .88rem; padding: 0 .8rem; }
ul.vejl { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
ul.vejl a { display: block; padding: 1rem 1.2rem; border-radius: 18px; background: var(--kort); text-decoration: none; box-shadow: 0 0 0 1px rgba(31, 58, 44, .05), 0 14px 32px -26px rgba(31, 58, 44, .4); transition: box-shadow 200ms var(--ease); }
ul.vejl a:hover { box-shadow: 0 0 0 1px rgba(31, 58, 44, .12), 0 14px 32px -22px rgba(31, 58, 44, .45); }
ul.vejl strong { display: block; font: 500 1.12rem/1.3 var(--d); }
ul.vejl span { display: block; margin-top: .3rem; color: var(--ink-2); font-size: .95rem; }


/* ================================================================== resultatet (21/10): samlet vurdering, smiley og tallene
   Christian: «først: Samlet vurdering og en farvescore. Tallene nemt sat op … Derefter alt den brødtekst.» og «gør det i smiley
   forstand … ikke vise "ud af hvor mange"». Apple + Qleer One: ét roligt kort med smileyen i scorens farve, antallet over
   kravværdien og hvorfor. Farven bærer aldrig alene: farvens navn, antallet og grunden står i tekst. Kontrast (WCAG 2.x) for
   scorens tekstfarver på deres flade og på kortet: grøn 5,7/6,4 · lysegrøn 6,0/6,6 · gul 6,6/7,3 · orange 6,0/7,1 · rød 5,8/7,2 ·
   mørkerød 7,7/10,2 · ingen 5,8. */
:root {
  --kort-skygge: 0 0 0 1px rgba(31, 58, 44, .06), 0 30px 60px -42px rgba(31, 58, 44, .45);
  --s-groen: #2E9E5B; --s-groen-t: #1C6B3C; --s-groen-f: #E3F4E9;
  --s-lysegroen: #8DC63F; --s-lysegroen-t: #45651A; --s-lysegroen-f: #EDF6DB;
  --s-gul: #F2C230; --s-gul-t: #6B5200; --s-gul-f: #FCF1C9;
  --s-orange: #F28A30; --s-orange-t: #8A4412; --s-orange-f: #FDE6D1;
  --s-roed: #E04A3C; --s-roed-t: #A2281E; --s-roed-f: #FBDEDA;
  --s-moerkeroed: #8C1D18; --s-moerkeroed-t: #7E1712; --s-moerkeroed-f: #F5D6D3;
  --s-ingen: #A9B5AF; --s-ingen-t: #4E6159; --s-ingen-f: #EEF0EE;
}
.score--groen { --s: var(--s-groen); --s-t: var(--s-groen-t); --s-f: var(--s-groen-f); }
.score--lysegroen { --s: var(--s-lysegroen); --s-t: var(--s-lysegroen-t); --s-f: var(--s-lysegroen-f); }
.score--gul { --s: var(--s-gul); --s-t: var(--s-gul-t); --s-f: var(--s-gul-f); }
.score--orange { --s: var(--s-orange); --s-t: var(--s-orange-t); --s-f: var(--s-orange-f); }
.score--roed { --s: var(--s-roed); --s-t: var(--s-roed-t); --s-f: var(--s-roed-f); }
.score--moerkeroed { --s: var(--s-moerkeroed); --s-t: var(--s-moerkeroed-t); --s-f: var(--s-moerkeroed-f); }
.score--ingen { --s: var(--s-ingen); --s-t: var(--s-ingen-t); --s-f: var(--s-ingen-f); }

/* Resultatet er bredere end brødteksten (op til 60rem), så tallene kan stå på én linje på en computer. */
.resultat { margin: 1.6rem calc(50% - min(30rem, 50vw - var(--gutter))) 0; }

.score { position: relative; isolation: isolate; overflow: hidden; padding: clamp(1.4rem, 4vw, 2.4rem); border-radius: 28px; background: var(--kort); box-shadow: var(--kort-skygge); animation: vt-ind 560ms var(--ease) both; }
.score::before { content: ''; position: absolute; z-index: -1; top: -45%; right: -15%; width: min(34rem, 85%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--s-f), rgba(255, 253, 249, 0)); }
.score-oejebryn { display: block; font: 600 .76rem/1.2 var(--t); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.score-titel { margin: .7rem 0 0; font: 500 clamp(1.95rem, 5.4vw, 3rem)/1.06 var(--d); letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.score-sted { display: block; margin-bottom: .2rem; font: 500 clamp(1.05rem, 2vw, 1.3rem)/1.3 var(--d); letter-spacing: -.005em; color: var(--ink-2); }
.score-dom { display: block; }
.score-dom::first-letter { text-transform: uppercase; }
.score-under { margin-top: .55rem; font-size: .9rem; color: var(--mute); }
.score-forklaring { max-width: 40rem; margin-top: .9rem; padding: .75rem 1rem; border-radius: 16px; background: var(--s-f); color: var(--ink); font-weight: 500; font-size: .98rem; line-height: 1.45; }
.score .svar { max-width: 44rem; margin-top: 1.1rem; font-size: clamp(1.04rem, 1.5vw, 1.16rem); line-height: 1.55; }
.score .opdateret { margin-top: .35rem; }

/* Smileyen (Christian 21/10: «gør det i smiley forstand»): Qleers ansigt i scorens farve, stort øverst — også på telefonen — med
   farvens navn under og «Grundvandet i …: 7 stoffer over kravværdien» ved siden af. Grafikken er aria-hidden; teksten bærer. */
.score-top { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 1.8rem); align-items: center; }
.score-smil { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.smil { display: block; flex: none; }
.smil--stor { width: clamp(84px, 22vw, 128px); height: clamp(84px, 22vw, 128px); animation: vt-smil 700ms var(--ease) 120ms both; }
.smil--lille { width: 34px; height: 34px; }
.smil-navn { font: 600 .9rem/1.2 var(--t); color: var(--s-t); text-align: center; }
.score-tekst .score-titel { margin-top: .45rem; }
.score-grund { margin-top: .55rem; font: 500 clamp(1rem, 1.6vw, 1.12rem)/1.4 var(--t); color: var(--s-t); }
.score-under { margin-top: 1rem; }
.ford-smil { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.ford-smil li { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--s-t); }
.ford-smil .smil--lille { width: 30px; height: 30px; }
@media (max-width: 479px) {
  .score-top { column-gap: .9rem; align-items: start; }
  .score-titel { font-size: clamp(1.6rem, 7.4vw, 2rem); }
}

/* ------------------------------------------------------------ tallene: én række pr. stof */
.stoffer, .pnscore-boks { container-type: inline-size; margin-top: clamp(2rem, 5vw, 2.8rem); }
.stoffer-titel { margin: 0; font: 500 clamp(1.4rem, 2.6vw, 1.75rem)/1.2 var(--d); letter-spacing: -.01em; }
.stoffer-under { margin-top: .35rem; font-size: .92rem; color: var(--mute); }
.stoffer-hoved { display: none; }
.stof--indikator .stof-st { background: var(--s-orange-f); color: var(--s-orange-t); }
.stof--indikator .maal-fyld { background: var(--s-orange); }
.stof--indikator .stof-maalt, .stof--indikator .stof-x { color: var(--s-orange-t); }
.stofliste, .pnscore { margin: 1rem 0 0; padding: 0; list-style: none; border-radius: 24px; background: var(--kort); box-shadow: var(--kort-skygge); overflow: hidden; }
.stof + .stof, .pnscore li + li { border-top: 1px solid var(--hair); }
.stof { animation: vt-ind 480ms var(--ease) both; }
.stof:nth-child(2) { animation-delay: 50ms; } .stof:nth-child(3) { animation-delay: 100ms; } .stof:nth-child(4) { animation-delay: 150ms; }
.stof:nth-child(5) { animation-delay: 200ms; } .stof:nth-child(6) { animation-delay: 250ms; } .stof:nth-child(7) { animation-delay: 300ms; }
.stof:nth-child(n + 8) { animation-delay: 340ms; }

.stof summary {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: 'st navn pil' '. tal tal' '. forhold aar';
  column-gap: .7rem; row-gap: .35rem; align-items: center; min-height: 64px; padding: .9rem .9rem .95rem; cursor: pointer; list-style: none;
  transition: background-color 200ms var(--ease);
}
.stof summary::-webkit-details-marker { display: none; }
.stof summary:hover { background: rgba(31, 58, 44, .025); }
.stof summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 18px; }
.stof-st { grid-area: st; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.stof-st svg { width: 17px; height: 17px; }
.stof--over .stof-st { background: #F9E3DE; color: var(--s-roed-t); }
.stof--naer .stof-st { background: #FAF0CF; color: var(--s-gul-t); }
.stof--under .stof-st { background: #E4F1E7; color: var(--s-groen-t); }
.stof--ingen .stof-st { background: rgba(31, 58, 44, .06); color: var(--mute); }
.stof-navn { grid-area: navn; font: 500 1.04rem/1.3 var(--t); color: var(--ink); }
.stof-tal { grid-area: tal; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .65rem; }
.stof-maalt { font: 600 1.2rem/1.2 var(--t); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.stof--over .stof-maalt { color: var(--alarm); }
.stof-graense { font-size: .92rem; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stof-forhold { grid-area: forhold; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.maal { position: relative; flex: 1 1 auto; max-width: 9.5rem; min-width: 3.5rem; height: 6px; border-radius: 3px; background: rgba(31, 58, 44, .1); }
.maal-fyld { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--s-groen); transform-origin: left center; animation: vt-maal 1000ms var(--ease) 250ms both; }
.stof--naer .maal-fyld { background: #D9A21A; }
.stof--over .maal-fyld { background: var(--s-roed); }
.maal-graense { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .6; }
.stof-x { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.stof--over .stof-x { color: var(--alarm); font-weight: 600; }
.stof-aar { grid-area: aar; justify-self: end; font-size: .9rem; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stof-pil { grid-area: pil; display: grid; place-items: center; width: 28px; height: 28px; color: var(--mute); transition: transform 260ms var(--ease); }
.stof-pil svg { width: 20px; height: 20px; }
.stof details[open] .stof-pil { transform: rotate(180deg); }
.stof-mere { padding: .2rem 1rem 1.3rem; color: var(--ink-2); animation: vt-fold 320ms var(--ease) both; }
.stof-mere > :first-child, .stof-tekst > :first-child { margin-top: 0; }
.stof-tekst ul { margin: .55rem 0 0; padding-left: 1.15rem; }
.stof-tekst li { margin: .25rem 0; }
.stof-tekst blockquote { margin: .9rem 0 0; padding: .15rem 0 .15rem 1rem; border-left: 3px solid var(--mint); color: var(--ink); }
.stof-tekst blockquote p { margin: 0; }
.stof-linje { margin-bottom: .9rem; padding: .7rem .9rem; border-radius: 14px; background: rgba(170, 225, 197, .22); }
.stof-linje p { margin: 0; color: var(--ink); }
.stof-linje .kilde, .stof-tekst > .stof-linje:last-child { margin-top: .3rem; }
.stof-tekst > .stof-linje:not(:first-child) { margin: .9rem 0 0; }
.stof-maaling { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--hair); font-size: .9rem; color: var(--mute); }
.stof-maaling a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }

@container (min-width: 720px) {
  .stoffer-hoved, .stof summary { grid-template-columns: 30px minmax(8rem, 1.15fr) minmax(10.5rem, 1.25fr) minmax(12rem, 1.5fr) 4.6rem 28px; column-gap: 1rem; }
  .stof-mere { padding: .2rem 1.1rem 1.4rem calc(1.1rem + 30px + 1rem); }
  .stoffer-hoved { display: grid; margin-top: 1.4rem; padding: 0 1.1rem 0; font: 600 .72rem/1.2 var(--t); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
  .stoffer-hoved span:first-child { grid-column: 2; }
  .stoffer-hoved span:last-child { justify-self: end; }
  .stof summary { grid-template-areas: 'st navn tal forhold aar pil'; min-height: 68px; column-gap: 1rem; padding: .95rem 1.1rem; }
  .stof-aar-ord { display: none; }
}

/* By- og kommunesiderne: postnumrene med deres vurdering (hele linjen er et link, mindst 64 px høj). */
.pnscore-a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'smil navn pil' 'smil titel pil'; column-gap: .85rem; row-gap: .1rem; align-items: center; min-height: 64px; padding: .8rem 1.1rem; color: var(--ink); text-decoration: none; transition: background-color 200ms var(--ease); }
.pnscore-a:hover { background: rgba(31, 58, 44, .025); }
.pnscore-a:focus-visible { outline-offset: -4px; }
.pnscore-a .smil { grid-area: smil; }
.pnscore-navn { grid-area: navn; font-weight: 500; }
.pnscore-titel { grid-area: titel; font-size: .92rem; color: var(--s-t); }
.pnscore-pil { grid-area: pil; display: grid; place-items: center; width: 24px; height: 24px; color: var(--mute); }
.pnscore-pil svg { width: 20px; height: 20px; }

.helbred h3 { margin: 1.6rem 0 .5rem; font: 500 1.15rem/1.3 var(--d); }
.helbred .stof-tekst { padding: 1.1rem 1.2rem 1rem; border-radius: 20px; background: var(--kort); box-shadow: var(--kort-skygge); color: var(--ink-2); }

/* Byskiltet (Christian 21/10: «B · Qleer-udgaven»): ved overskriften på postnummer- og bysiderne. På telefonen står det til højre
   for overskriften, så smileyen og tallet bliver over folden. */
.kop { display: flex; align-items: center; justify-content: space-between; gap: clamp(.75rem, 3vw, 2rem); }
.kop h1 { flex: 1 1 auto; min-width: 0; }
.kop .skilt { flex: none; width: clamp(118px, 24vw, 300px); height: auto; filter: drop-shadow(0 10px 18px rgba(31, 58, 44, .16)); }
.skilt-navn { font-family: var(--t); font-weight: 600; letter-spacing: .01em; }
.skilt-navn--rund { font-family: var(--d); font-weight: 500; }

@keyframes vt-ind { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-maal { from { transform: scaleX(0); } }
@keyframes vt-smil { from { opacity: 0; transform: scale(.82) rotate(-6deg); } }
@keyframes vt-fold { from { opacity: 0; transform: translateY(-6px); } }

/* Bjælkernes længde (hele procent) — klasser, fordi CSP'en ikke tillader style-attributter. */
.w0 { width: 0%; }
.w1 { width: 1%; }
.w2 { width: 2%; }
.w3 { width: 3%; }
.w4 { width: 4%; }
.w5 { width: 5%; }
.w6 { width: 6%; }
.w7 { width: 7%; }
.w8 { width: 8%; }
.w9 { width: 9%; }
.w10 { width: 10%; }
.w11 { width: 11%; }
.w12 { width: 12%; }
.w13 { width: 13%; }
.w14 { width: 14%; }
.w15 { width: 15%; }
.w16 { width: 16%; }
.w17 { width: 17%; }
.w18 { width: 18%; }
.w19 { width: 19%; }
.w20 { width: 20%; }
.w21 { width: 21%; }
.w22 { width: 22%; }
.w23 { width: 23%; }
.w24 { width: 24%; }
.w25 { width: 25%; }
.w26 { width: 26%; }
.w27 { width: 27%; }
.w28 { width: 28%; }
.w29 { width: 29%; }
.w30 { width: 30%; }
.w31 { width: 31%; }
.w32 { width: 32%; }
.w33 { width: 33%; }
.w34 { width: 34%; }
.w35 { width: 35%; }
.w36 { width: 36%; }
.w37 { width: 37%; }
.w38 { width: 38%; }
.w39 { width: 39%; }
.w40 { width: 40%; }
.w41 { width: 41%; }
.w42 { width: 42%; }
.w43 { width: 43%; }
.w44 { width: 44%; }
.w45 { width: 45%; }
.w46 { width: 46%; }
.w47 { width: 47%; }
.w48 { width: 48%; }
.w49 { width: 49%; }
.w50 { width: 50%; }
.w51 { width: 51%; }
.w52 { width: 52%; }
.w53 { width: 53%; }
.w54 { width: 54%; }
.w55 { width: 55%; }
.w56 { width: 56%; }
.w57 { width: 57%; }
.w58 { width: 58%; }
.w59 { width: 59%; }
.w60 { width: 60%; }
.w61 { width: 61%; }
.w62 { width: 62%; }
.w63 { width: 63%; }
.w64 { width: 64%; }
.w65 { width: 65%; }
.w66 { width: 66%; }
.w67 { width: 67%; }
.w68 { width: 68%; }
.w69 { width: 69%; }
.w70 { width: 70%; }
.w71 { width: 71%; }
.w72 { width: 72%; }
.w73 { width: 73%; }
.w74 { width: 74%; }
.w75 { width: 75%; }
.w76 { width: 76%; }
.w77 { width: 77%; }
.w78 { width: 78%; }
.w79 { width: 79%; }
.w80 { width: 80%; }
.w81 { width: 81%; }
.w82 { width: 82%; }
.w83 { width: 83%; }
.w84 { width: 84%; }
.w85 { width: 85%; }
.w86 { width: 86%; }
.w87 { width: 87%; }
.w88 { width: 88%; }
.w89 { width: 89%; }
.w90 { width: 90%; }
.w91 { width: 91%; }
.w92 { width: 92%; }
.w93 { width: 93%; }
.w94 { width: 94%; }
.w95 { width: 95%; }
.w96 { width: 96%; }
.w97 { width: 97%; }
.w98 { width: 98%; }
.w99 { width: 99%; }
.w100 { width: 100%; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }