/* VIN² · fælles designsystem (udkast 1, 10.10.2026)
   Layout: et katalog. Hvidt papir, vinsort blæk, husrødt til lot-numre og kilder.
   Hver vin er et lot, hvert felt har sin kilde, og sikkerheden vises som fyldningsgrad. */

@property --lvl { syntax: '<number>'; inherits: true; initial-value: 0; }

/* Rettet Ø og ø til Barlow Condensed. Google Fonts' udgave (v13) har for stor bredde på Ø
   (vægt 600: 597 i stedet for 479), så der står et hul efter Ø i fx LEVERANDØREN. Disse små
   ansigter indeholder kun de to tegn med rettet bredde og bruges før Googles for netop dem. */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMcAA4AAAAABhgAAALJAAFocgAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbIBwqBmAAPBEICoMEgkQBNgIkAwwLCAAEIAWDcAcgG90EQB6D426JEEsMpShRhuh/yut/RPBr/Gbf3VdJotqs/YZUIh66VJq2JpboGhKZiN+R3ftzbwNhY/EcgR1YVKyJjwqupPyvHfj7U/X9TwGc2wIai0IuHPFgAMfSUEQDumjbaCvSxkpYqnOTDfLNYysxqg8QdAMiioig0xgdxEVwZCKIqaEBCDotMCVQtJO5n8dVg5oOma4zn++AKI9LKoDLajw3wD52ALS2At3F7a5d8U+DY9/87EPjCupdQgFAIP8E+5iCUFBhGBIME7IEtKpF8c1PiJeb5aZTAJGGPlCB1jn3AHgCqNG8T7UgJWUmJfV5OHFKeRfKw0+dAyczSrZTKu4zqimzKnsEav/aNXg8reowq+xW2DaomjGrsiUx8Nb1RwNKqVPKm5KDH/L5xbCtAQYLYBmEzwzsgAk8T84qhz1BCsyQL8FXSITp428IYvPDsk6QQFDrnpVQWJDguWCrUODSucYt4ggFhRLXZbGgMN7jdFe8a9ec3DkSIqauRrHZwuSNxW5Uj6aPVVuYfrfQ0aOqeEIo9jhehqUnRRt/8kNRYd3adgGT9jdelyEZKdFWL2+fq0jb6XyJQ/IVr5DcH5XpYcPVifJKvvBayfZeHg8ZDQIIcpupzVvry+nz/CEmij7At7b/s/D9h9Sq+eZjtso7tCkg/G+Qb/sEs6ZgqEoFBJM960rlFKoJzrW7CUktDjyl02LDhFb0eqtVzlwUa5XWYiRyWqu1mH9br70kQwASpR6jTIlSHMyeLTsusESlimD+8jAqkWphsRikckUKcDA/PE4pEoOFmSrF4VBY7mzYKFGGPbx81gqQqtgoR+FQzPevMjvNGoBUrbCrGqtIISyq+p8yvCrxipTgVcrDsGPNkS1XHhLF85fGwzMOTiuUHDJYZcoCzux8/BfwEGUVYJTd18qyxir7KWskRgkbMYJFQkCzHQQAAA==) format('woff2'); unicode-range: U+00D8, U+00F8; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAM8AA4AAAAABigAAALpAAFocgAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbIBwqBmAAPBEICoMIgkQBNgIkAwwLCAAEIAWDfAcgG+kEIK4DbHBfQzCWqDrGykPsWyeGrHm/lgezZLUtnoe/V899/ycbPyZpbdjSYm0NLU/wobXN2litXIw9eP65n/e9H7Qs/mdYQaMWiBLc8Q0lCyRJZvv/93N3e8N8Jm8igtgfIpJULIl4pVJJhGiJ08nPA3TYgAMKPRCbaOfSw+srP3AqW2EhidnUTf17y8fCtmiUQpviv8QCHEsjS2AsjUpkWBZQHlAgnm6TCfkmlIyN7AACU4AQSgiBsRQ+0kFcSg64M0ENIDDmUCBT6vk+lrQ3ApPYB232tQAQyusRB4fNuQFTcgCDPpS+ON3VBVEIb5ZWzTXQ7kkAEJBatrAOQYEGOohAhyIN9JmE+lrVgM11q4IAhNTKCzRAf889AW8ALUj7MTZcLoXL9dtdrdOuoTw/mdc2qYZ1etImI3+LfkNCIx8X1Q2GeWsrHFw+PBct3qJfeM5uuX6ZDRWs08695g7y220rQMDxNesLpEEzJDHFOYYepX6u620G8vNt621gDen1mHiUWkdGXk1VXvAJQS0JflKuJwlT+qAaC91aRB1z/sOkBM6YQaJEiWhRttnR+BOxaEcGW2bww9AK03u3/BzZZ7ZLpK4SaxPV4aDA55D3zgVZKi+LXE9dIQ7/iK7OqIZnP24EN/QHRqGTbWr0vRvXwUUAEMht63L7yVHPb/83DH3BcvAf/P1PMatnqd8YUCD44Dvya0aUJVFBkwEClzWbfKMOVQTmhqYQaT0A77iKImdVVB5X0dDwkTdpoiWRmGjLJHc1j0KG4NSkWY9WNapUa4eZGBjZYTmqVcAIJVrVa9IFy9CqSa0KZdph0Tq0q9akVRtMoVq7ds3ahNDTq1KTT3copVOmSQO9Ws3a6ZUalCnt1E5NGpV/q1GbCuWwbBUa1CA0qVcuS4UqHeqVaGWkY2HgECpHFkKhUOGo1NaCvJBWbWroORzpilnjMBK1KRu35/Gojc7kberpNGlVRS9dnBQIUG9XAQAA) format('woff2'); unicode-range: U+00D8, U+00F8; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMQAA4AAAAABewAAAK+AAFocgAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbIBwqBmAAPBEICoJIghgBNgIkAwwLCAAEIAWDfgcgG78ECL4Mb4yJfhJEliEakSkwGepig9zNUF+NmfT0sSQ0ImqN7Nm7RwgBKkAFBCoy6nWAlIwGF+GwPFmE+/n9vWeQ78QveNb7o0P6rrOSEKJCVShDJtzAAseAEzrL8+ATnTHgdJgln+V8ICtrJqevY+CEK136xxfz90Ch6r/8r8UZuqbeHz14BoB+U1gFWOFjFOALvvAKp/O30YhHI7KZt9zMoteU4mTuNZ0l6AZEFBFBp4nyBW3ZpjZDpBoaAI6brULwsfjrZ8aHIZNGXK5zHPwEKsqt4MPA7v1KTiKGDGhvBUko8Ib27xU6YN0bP7kJ1CuSDARKCb4DpgpBQYVhIYJhoeYCrWpRvPFzwMc18xoEEGkIqEAralwHbgJQA4oyt7ei92943lEnUEbeucX0ewfv9VbrH2MLjD4Nqla+cpvhyyAF0jTmlWfcuuNl97n96A/qM1RS/ak1DqyQBAMoclwgsJb36H0Z2bNHzttT0+QhmV/Prx8eaKRdJxYGraWuiV5pquKODIChR6hbguFR5c7336Xn5oajPSh8fW06gv03KVn8Yo76ogxCqiLVLdxV61M8qMrkqhdusFcwBaFHh13TdpVUm36WdZJ1ZuDxbABBLt/ojnjzIhu/Rcg3vGn7W3j/scFg83lePok2BYTPeXlLoXJ2REqqeIHlzei8srqkx661uyhE6ijgESchpnILRbvHQmWzG6E237/QYnyKhFZzw/4ne61MJxGM04xRfXr0GocQ4RHQIGa9uiBCbUYNwkxB9EZh+nXpMA4RmDCuF2bUGKRCr3HjnMYw4eD06DOu14R2dTpghuD0cxqH0y7ZqlQqRTDDOn9j2JgunYQwgzoR1CHDo2MxMxJyYJX0hVOLcTIXja5Vl1Fj+lgf0U+jNFvRoz2mw6i+DpRj6ozp+6o6mFE9cHSk1EKAZsslAA==) format('woff2'); unicode-range: U+00D8, U+00F8; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAALkAA4AAAAABfAAAAKSAAFocgAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbIBwqBmAAPBEICoJIghgBNgIkAwwLCAAEIAWEAgcgG8MEIB6D426JoYgyxKQwGIh61P94ntqP37n79otbNWC6WMMTEQ/N86fRItMJSUNyae/ILudvA+HFkNo/BSWAjmzJ3nU6temS/P+tnbqpv8TiXxZol+KYoOs8DHAsw4S3Jf5WUUB5QLlNKZi30JgZNAUE/YCIIiLoNc8J53hMUhboqNACBL02SRGScUZ3y5kWsBFC0zWHaBmiHBJXAZwrZ3INPOID6OkEpAUUdPF8RD5ceeN/89n6gboXMyBQOogzYBlCQYNxSDBOwzbQqYrijf8txInbnbZXAJGWIdCATlTcAe4BUAFF2RqUDv6MZ81Y7kN5/NI7FDBn4TZjlTNnnTtvdcBpOt/7hr1nrT3n5yeyszp3eg+3lMfbfU9282k8rA9BPtZBnoZEL0EcyvOzeFEs4hyEupQyuMwvLRw93p5LcJ2LE8c96BdCXEpodbkXnnpY74xIct27mx23shq3C6r2wHm9qiKIbI/T9PrCMpHE3eJNeZM0j974P8Rp9z5NaSgpFeeHobv1rogMz4P1YyYmfuZLFr4mJr4WSwCC3KQ+ZB1ppcZBf7q10Se86fqfh7ff+xehuz0vyi/QpYDwaU/ks27jeRGMm+wItDzpzRpHDEpyrtt1SKou8JQrjX1TtBj0nDZOe+lWGe0wGwfaaTc+YPBSqYNImFoHSr1adRhcHty488WVpU41rgjlKE2wNlxpKFiDapUYXOFYjDoYhcYlVYfBUKMFcOWqVj3eZlVwUQlr5qqBGsNVxYAh2Tg5Etai6m8taNWqcEVrx6CUi4A1qZKhWi1Wk3IUdy68uPETKEuGCPkCrctgpoI5OYVW39DhZtN27lJsFGmVKPUrkGkuaPWfcoFRarlKFSMJAtrsIgA=) format('woff2'); unicode-range: U+00D8, U+00F8; }

:root {
  color-scheme: light;
  /* Farver */
  --paper: #FAF8F7;        /* katalogpapir, hvidt med svag vinvarme */
  --paper-2: #F2EDEB;      /* pladebund, felter */
  --white: #FFFFFF;
  --ink: #170F11;          /* vinsort blæk */
  --ink-2: #5C4E51;        /* sekundær tekst */
  --ink-3: #8A7C7F;        /* kun store tekster og linjer */
  --ink-ph: #716366;       /* pladsholdertekst, 5,4:1 på papir */
  --rule: #E3DADB;         /* hårlinje */
  --rule-strong: #CDBFC1;
  --glass: #DDD1D3;        /* tom flaske i glyffen */
  --red: #A61E2D;          /* VINTOs husrøde */
  --red-bright: #C42839;
  --red-wash: #F6E7E8;
  --cellar: #120B0C;
  --grad: linear-gradient(180deg, #000000 0%, #1b1113 55%, #641722 120%);
  --on-dark: #FDF3F4;
  --on-dark-2: rgba(253, 243, 244, .74);
  --on-dark-3: rgba(253, 243, 244, .5);
  --rule-dark: rgba(253, 243, 244, .16);

  /* Skrift */
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-text: 'Libre Caslon Text', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-title: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  --font-data: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rytme */
  --gutter: clamp(20px, 5vw, 76px);
  --section: clamp(92px, 11.5vw, 184px);
  --maxw: 1240px;

  /* Flaske-silhuet og V-mærke som masker til glyffen */
  --bottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 56'%3E%3Cpath d='M7 0h6v13.5c0 3.4 7 5.6 7 12.8V54a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V26.3c0-7.2 7-9.4 7-12.8z'/%3E%3C/svg%3E");
  --vmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248.5 601.24'%3E%3Cpath d='M166.49,244.52c1.78-9.79,9.39-17.28,19.42-17.28h43.52c2.7,0,5.27.55,7.61,1.54,8.59,3.64,13.07,13.19,10.95,22.28l-76.64,330.62c-2.87,11.84-9.01,19.56-19.81,19.56h-58.81c-10.79,0-17.28-8.72-19.55-19.56C58.68,512.53,12.19,310.19.25,243.86c-5.73-78.41,87.15-91.72,87.24-160.02,0,0,0-64.28,0-64.28,0-10.8,8.76-19.56,19.56-19.56h41.76c10.8,0,19.55,8.75,19.55,19.55v64.29h0s3.31,42.23-36.38,88.15c-20.38,24.57-53.19,35.72-47.21,70.74,8.36,48.89,38.44,180.9,38.39,189.69l43.3-187.89Z'/%3E%3C/svg%3E");
}

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-3) var(--paper-2); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--red); color: var(--on-dark); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 1px; }
input, textarea, select, button { font: inherit; color: inherit; caret-color: var(--red); }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 12px; }
.skip:hover, .skip:focus { color: var(--paper); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typografi ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 6.9vw, 6rem);
  line-height: .95;
  letter-spacing: -.004em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.5vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: 0;
}
.h3 { font-family: var(--font-text); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.title { font-family: var(--font-title); font-weight: 400; line-height: 1.04; letter-spacing: -.005em; }
.lead { font-size: clamp(1.12rem, 1.45vw, 1.3rem); line-height: 1.5; color: var(--ink); max-width: 58ch; }
.body { max-width: 66ch; }
.body + .body { margin-top: .9em; }
.muted { color: var(--ink-2); }
.label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.2;
}
.data { font-family: var(--font-data); font-size: .84em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.note { font-style: italic; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.rod { color: var(--red); }

/* Kildemærke (hævet tal) og fodnoter */
sup.src {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .62em;
  line-height: 0;
  vertical-align: super;
  margin-left: .12em;
  color: var(--red);
  letter-spacing: 0;
}
sup.src a { text-decoration: none; color: inherit; }
sup.src a:hover { text-decoration: underline; }
.kilder { list-style: none; display: grid; gap: .35rem 2rem; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
.kilder li { display: grid; grid-template-columns: 1.4em 1fr; }
.kilder b { font-family: var(--font-display); font-weight: 700; color: var(--red); font-size: .95rem; }
.kilder li:target { background: var(--red-wash); }

/* ---------- Sikkerhedsglyffen: flasken fyldes efter, hvor sikre vi er ---------- */
.glyph {
  --fill: var(--red);
  display: inline-block;
  flex: none;
  width: .62em;
  height: 1.72em;
  vertical-align: -.48em;
  -webkit-mask: var(--bottle) center / contain no-repeat;
  mask: var(--bottle) center / contain no-repeat;
  background: linear-gradient(to top, var(--fill) 0 calc(var(--lvl) * 100%), var(--glass) calc(var(--lvl) * 100%) 100%);
}
.glyph[data-k="producent"] { --lvl: 1; }
.glyph[data-k="krydstjek"] { --lvl: .8; }
.glyph[data-k="kilde"]     { --lvl: .6; }
.glyph[data-k="estimat"]   {
  --lvl: .4;
  background:
    linear-gradient(to top, transparent 0 calc(var(--lvl) * 100%), var(--glass) calc(var(--lvl) * 100%) 100%),
    repeating-linear-gradient(135deg, var(--red) 0 1.6px, var(--glass) 1.6px 3.4px);
}
.glyph[data-k="mangler"]   { --lvl: 0; }
.glyph[data-k="modstrid"]  { --lvl: .6; --fill: var(--ink); }
.glyph[data-k="vinto"] {
  --lvl: 1;
  width: .72em;
  -webkit-mask-image: var(--vmark);
  mask-image: var(--vmark);
}
.on-dark .glyph { --glass: rgba(253, 243, 244, .26); }
.on-dark .glyph[data-k="estimat"] {
  background:
    linear-gradient(to top, transparent 0 calc(var(--lvl) * 100%), var(--glass) calc(var(--lvl) * 100%) 100%),
    repeating-linear-gradient(135deg, var(--red-bright) 0 1.6px, rgba(253, 243, 244, .2) 1.6px 3.4px);
}

/* Sikkerhed i tekst: glyf + navn */
.lvl { display: inline-flex; align-items: center; gap: .42em; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); line-height: 1; }
.lvl .glyph { font-size: 1rem; }
.lvl.mangler { color: var(--ink-2); }
.lvl.modstrid { color: var(--red); }
.lvl.hint { text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: .88rem; }

/* ---------- VIN²-mærket ---------- */
.mark { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.mark svg { height: 100%; width: auto; display: block; overflow: visible; }
.on-dark .mark, .mark.neg { color: var(--on-dark); }

/* ---------- Knapper ---------- */
.btn {
  --b: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 22px;
  border: 1px solid var(--b); border-radius: 2px;
  background: var(--b); color: var(--on-dark);
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.btn:hover { --b: var(--red-bright); color: var(--on-dark); }
.btn:active { transform: translateY(1px); }
.btn .pil { width: 1.1em; height: 1.1em; flex: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.on-dark .btn.ghost { color: var(--on-dark); border-color: var(--on-dark-2); }
.on-dark .btn.ghost:hover { background: var(--on-dark); color: var(--ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* ---------- Leverandørens linje, som den kom ---------- */
.raw {
  font-family: var(--font-data); font-size: .92rem; letter-spacing: .01em;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: .5em .8em; position: relative; display: inline-block;
  white-space: nowrap;
}
.raw.struck::after {
  content: ""; position: absolute; left: .6em; right: .6em; top: 50%; height: 2px; background: var(--red);
  transform-origin: left center;
}

/* ---------- Felter i en post ---------- */
.field { display: grid; gap: 2px; }
.field .val { font-family: var(--font-display); font-weight: 700; font-size: 1.42rem; line-height: 1.05; letter-spacing: .005em; }
.field .val.tekst { font-family: var(--font-text); font-weight: 400; font-style: italic; font-size: 1rem; line-height: 1.38; letter-spacing: 0; }
.field .val.tom { color: var(--ink-2); font-weight: 600; }
.field .val.flag { color: var(--red); text-decoration: underline wavy var(--red); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.field .hint { font-size: .82rem; font-style: italic; color: var(--ink-2); line-height: 1.35; }

/* Lot-ID */
.lot { font-family: var(--font-display); font-weight: 800; color: var(--red); letter-spacing: .01em; line-height: .86; font-variant-numeric: tabular-nums; }

/* ---------- Stempel ---------- */
.stamp {
  display: inline-grid; justify-items: center; gap: 2px;
  padding: .5em .9em .45em;
  border: 1.5px solid var(--red);
  color: var(--red); background: var(--paper);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; line-height: 1.05;
}
.stamp .s1 { font-size: .72rem; }
.stamp .s2 { font-size: 1.3rem; letter-spacing: .06em; }
.stamp .s3 { font-size: .72rem; font-family: var(--font-data); font-weight: 500; letter-spacing: .04em; }

/* ---------- Formularfelter (prøveformularen) ---------- */
.felt { display: grid; gap: 6px; }
.felt label { font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.felt input, .felt textarea, .felt select {
  width: 100%; min-height: 46px;
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-3); border-radius: 0;
  padding: 8px 2px; font-size: 1.05rem; color: var(--ink);
  transition: border-color .18s ease, background-color .18s ease;
}
.felt textarea { min-height: 150px; resize: vertical; font-family: var(--font-data); font-size: .9rem; line-height: 1.6;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.6em - 1px), var(--rule) calc(1.6em - 1px) 1.6em);
  background-attachment: local; padding-top: 6px; }
.felt input::placeholder, .felt textarea::placeholder { color: var(--ink-ph); opacity: 1; }
.felt input:focus, .felt textarea:focus, .felt select:focus { outline: none; border-bottom: 2px solid var(--red); background: var(--red-wash); }
.felt input[aria-invalid="true"] { border-bottom-color: var(--red); }
.felt .fejl { color: var(--red); font-size: .85rem; font-style: italic; min-height: 1.2em; }
.on-dark .felt label { color: var(--on-dark-2); }
.on-dark .felt input, .on-dark .felt textarea, .on-dark .felt select { color: var(--on-dark); border-bottom-color: var(--on-dark-3); }
.on-dark .felt textarea { background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.6em - 1px), var(--rule-dark) calc(1.6em - 1px) 1.6em); }
.on-dark .felt input::placeholder, .on-dark .felt textarea::placeholder { color: rgba(253, 243, 244, .6); }
.on-dark .felt input:focus, .on-dark .felt textarea:focus, .on-dark .felt select:focus { background: rgba(253, 243, 244, .06); border-bottom-color: var(--red-bright); }
.on-dark .felt select option { color: var(--ink); background: var(--paper); }
.on-dark .felt .fejl { color: var(--on-dark); }
.on-dark .felt input[aria-invalid="true"], .on-dark .felt textarea[aria-invalid="true"] { border-bottom: 2px solid var(--red-bright); }

/* ---------- Mørke flader (omslag) ---------- */
.on-dark { background: var(--cellar); background-image: var(--grad); color: var(--on-dark); }
.on-dark .muted, .on-dark .note { color: var(--on-dark-2); }
.on-dark .label { color: var(--on-dark-2); }
.on-dark ::selection { background: var(--on-dark); color: var(--ink); }
.on-dark a:hover { color: var(--on-dark); }
.on-dark :focus-visible { outline-color: var(--on-dark); }

/* ---------- Bevægelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Tabeller, der stables på smalle skærme (data-label sættes af scriptet) ---------- */
@media (max-width: 640px) {
  table.stak { min-width: 0 !important; width: 100%; }
  table.stak thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stak tr { display: block; border-bottom: 1px solid var(--rule); padding: 10px 0; }
  table.stak th, table.stak td { display: block; border: 0 !important; padding: 3px 0 !important; text-align: left !important; white-space: normal !important; }
  table.stak td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-display); font-weight: 600; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1px; }
}
/* Rullebokse med skygge i kanten, hvor der er mere indhold */
.rul-lys { background: linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) right, radial-gradient(farthest-side at 0 50%, rgba(23, 15, 17, .2), transparent), radial-gradient(farthest-side at 100% 50%, rgba(23, 15, 17, .2), transparent) right; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; background-color: var(--white); }
.rul-moerk { background: linear-gradient(to right, #0e0909 30%, rgba(14, 9, 9, 0)), linear-gradient(to left, #0e0909 30%, rgba(14, 9, 9, 0)) right, radial-gradient(farthest-side at 0 50%, rgba(253, 243, 244, .22), transparent), radial-gradient(farthest-side at 100% 50%, rgba(253, 243, 244, .22), transparent) right; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; background-color: #0e0909; }