@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/josefin-sans-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/josefin-sans-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/josefin-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/josefin-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/josefin-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/josefin-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/josefin-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Josefin Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/josefin-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/merriweather-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/merriweather-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
  --nat: #0a0908;
  --nat2: #0e0d0b;
  --flade: #121110;
  --kant: #171109;
  --metal: #978f74;
  --metalLys: #d3cbaa;
  --guld: #e3be5b;
  --guldLys: #fcecba;
  --guldMoerk: #a0783a;
  --guldGrad: linear-gradient(180deg, #fcecba, #ffe8a5 25%, #eec873 50%, #cda558 75%, #a0783a);
  --tekst: #cfc7a6;
  --overskrift: #e8d9a8;
  --daempet: #8f8770;
  --svag: #6b6655;
  --font: "Josefin Sans", "Trebuchet MS", sans-serif;
  --radius: 2px;
  --bredde: 1120px;
  --baggrund: radial-gradient(1100px 560px at 50% -180px, rgba(227, 190, 91, 0.10), transparent 70%), radial-gradient(700px 420px at 50% 115%, rgba(143, 135, 112, 0.10), transparent 70%);
  color-scheme: dark;
}

:root[data-tema="lys"] {
  --nat: #ece4cf;
  --nat2: #e4dac1;
  --flade: #f7f1e2;
  --kant: #c9bb96;
  --metal: #a39672;
  --metalLys: #6d6248;
  --guld: #8a6420;
  --guldLys: #3a2a10;
  --guldMoerk: #a0783a;
  --tekst: #3a3324;
  --overskrift: #3a2a10;
  --daempet: #6b624c;
  --svag: #8f8770;
  --baggrund: radial-gradient(1100px 560px at 50% -180px, rgba(255, 255, 255, 0.7), transparent 70%);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-tema="moerk"]) {
    --nat: #ece4cf;
    --nat2: #e4dac1;
    --flade: #f7f1e2;
    --kant: #c9bb96;
    --metal: #a39672;
    --metalLys: #6d6248;
    --guld: #8a6420;
    --guldLys: #3a2a10;
    --guldMoerk: #a0783a;
    --tekst: #3a3324;
    --overskrift: #3a2a10;
    --daempet: #6b624c;
    --svag: #8f8770;
    --baggrund: radial-gradient(1100px 560px at 50% -180px, rgba(255, 255, 255, 0.7), transparent 70%);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nat);
  background-image: var(--baggrund);
  background-attachment: fixed;
  color: var(--tekst);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--guld); text-decoration: none; }
a:hover { color: var(--guldLys); }
img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 700;
  color: var(--overskrift);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.ramme { width: 100%; max-width: var(--bredde); margin: 0 auto; padding: 0 24px; }

header.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--nat) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kant);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--guld) 18%, transparent);
}

header.top .ramme { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }

.maerke { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.22em; color: var(--overskrift); font-size: 18px; white-space: nowrap; }
.maerke img { width: 22px; height: 22px; }

.hoejre { display: flex; align-items: center; gap: 8px; }

nav.menu { display: flex; gap: 2px; align-items: center; order: 1; margin-left: auto; }
.hoejre { order: 2; }
nav.menu a { font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--daempet); padding: 10px 12px 8px; position: relative; }
nav.menu a:hover, nav.menu a.aktiv { color: var(--overskrift); }
nav.menu a.aktiv::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -2px; height: 12px; background: url("img/ui/fane_aktiv.png") center bottom / 100% 12px no-repeat; }
nav.menu a.snart { color: var(--svag); }
nav.menu a.snart::after { content: "soon"; font-size: 10px; letter-spacing: 0.06em; text-transform: none; margin-left: 5px; color: var(--guldMoerk); }

.temaKnap, .menuKnap {
  background: none;
  border: 1px solid var(--kant);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal) 40%, transparent);
  color: var(--overskrift);
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 12px;
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: var(--radius);
  cursor: pointer;
}
.temaKnap svg { width: 16px; height: 16px; vertical-align: middle; }
.menuKnap { display: none; }

.helt { position: relative; padding: 70px 0 60px; text-align: center; }
.helt .ramme { position: relative; }
.titelbillede { width: min(640px, 92%); height: auto; margin: 0 auto 6px; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55)); }

.overtitel { font-weight: 600; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--guld); margin: 0 0 16px; }

.helt .under { max-width: 660px; margin: 18px auto 34px; color: var(--tekst); font-size: 20px; }

.knapper { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 4px 26px 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst);
  border: 16px solid transparent;
  border-image: url("img/ui/knap.png") 16 fill / 16px stretch;
  margin: -6px;
}
.knap:hover { border-image-source: url("img/ui/knap_hover.png"); color: #fcecba; }
.knap.primaer { border-image-source: url("img/ui/knap_fyldt.png"); color: #fcecba !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.knap.primaer:hover { border-image-source: url("img/ui/knap_hover.png"); filter: drop-shadow(0 0 10px rgba(227, 190, 91, 0.35)); }
.knap svg { width: 18px; height: 18px; }

.skille { height: 32px; background: url("img/ui/skillelinje.png") center / min(720px, 90%) 32px no-repeat; margin: 10px auto; }

section.blok { padding: 80px 0; }
section.blok.moerk { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nat2) 38%, transparent) 14%, color-mix(in srgb, var(--nat2) 38%, transparent) 88%, transparent); }

.blokHoved { text-align: center; margin-bottom: 46px; }
.blokHoved p { color: var(--tekst); max-width: 680px; margin: 0 auto; }

.banner {
  display: inline-block;
  min-width: min(560px, 100%);
  padding: 12px 70px 8px;
  margin: 6px 0 18px;
  font-size: clamp(18px, 2.3vw, 25px);
  border: 20px solid transparent;
  border-width: 20px 60px;
  border-image: url("img/ui/overskrift.png") 20 60 fill / 20px 60px stretch;
}
.banner.lille { min-width: 0; font-size: 18px; padding: 10px 40px 6px; }

.gitter { display: grid; gap: 22px; }
.gitter.tre { grid-template-columns: repeat(3, 1fr); }
.gitter.fire { grid-template-columns: repeat(4, 1fr); }

.kort {
  position: relative;
  padding: 26px 26px 24px;
  border: 28px solid transparent;
  border-image: url("img/ui/panel.png?v=2") 28 fill / 28px stretch;
  margin: -10px;
}
.kort > :first-child { margin-top: -10px; }
.kort h3 { margin: 0 0 10px; font-size: 18px; }
.kort p { margin: 0; color: var(--daempet); font-size: 16px; }
.kort .maerkat { font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--guld); display: block; margin-bottom: 8px; }
.kort .ikon { width: 30px; height: 30px; color: var(--guld); margin-bottom: 12px; }

.land {
  padding: 16px 20px 12px 26px;
  border: 16px solid transparent;
  border-image: url("img/ui/knap.png") 16 fill / 16px stretch;
  margin: -8px;
  position: relative;
}
.land strong { display: block; color: var(--overskrift); text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; }
.land span { color: var(--daempet); font-size: 15px; }

.citatBoks { max-width: 820px; margin: 0 auto; text-align: center; }
.dato {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 13px;
  color: var(--overskrift);
  padding: 8px 46px 4px;
  border: 20px solid transparent;
  border-width: 14px 50px;
  border-image: url("img/ui/baand.png") 30 50 fill / 14px 50px stretch;
  margin-bottom: 20px;
}
.citat { font-size: clamp(21px, 2.8vw, 28px); font-weight: 300; color: var(--overskrift); line-height: 1.5; margin: 0; }
.citat cite { display: block; margin-top: 18px; font-style: normal; font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--guld); }

.status {
  display: inline-block;
  margin-top: 14px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--guldMoerk);
  border: 1px dashed var(--metal);
  padding: 5px 10px 3px;
}

footer.bund { border-top: 1px solid var(--kant); box-shadow: 0 -1px 0 color-mix(in srgb, var(--guld) 15%, transparent); padding: 44px 0 40px; color: var(--svag); font-size: 15px; }
footer.bund .ramme { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
footer.bund .navn { font-weight: 700; letter-spacing: 0.2em; color: var(--guld); font-size: 14px; }
footer.bund .links { display: flex; gap: 20px; flex-wrap: wrap; }
footer.bund .links a { color: var(--daempet); }
footer.bund .links a:hover { color: var(--overskrift); }
footer.bund .and { cursor: default; user-select: none; }

.artikel { max-width: 800px; margin: 0 auto; }
.artikel h2 { font-size: clamp(22px, 3vw, 30px); margin: 64px 0 18px; display: flex; align-items: center; gap: 16px; }
.artikel h2 .nr { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 15px; color: var(--guld); background: url("img/ui/diamant.png") center / contain no-repeat; padding-top: 3px; }
.artikel p { margin: 0 0 18px; }
.artikel .indledning { font-size: 21px; color: var(--overskrift); }
.artikel .lille { color: var(--daempet); font-size: 16px; }
.artikel strong { color: var(--overskrift); }

.indhold { padding: 18px 24px; border: 28px solid transparent; border-image: url("img/ui/panel.png?v=2") 28 fill / 28px stretch; margin: 30px -10px 10px; }
.indhold > strong { font-weight: 700; letter-spacing: 0.18em; font-size: 12px; text-transform: uppercase; color: var(--guld); }
.indhold ol { columns: 2; margin: 10px 0 0; padding-left: 22px; color: var(--daempet); }
.indhold li { margin-bottom: 4px; break-inside: avoid; }

.tabelRul { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; margin: 18px 0 28px; font-size: 16px; }
table.tabel th, table.tabel td { text-align: left; padding: 11px 14px 9px; border-bottom: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); vertical-align: top; }
table.tabel th { font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--guld); }
table.tabel td:first-child { color: var(--overskrift); white-space: nowrap; }

.firstborn { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); margin: 26px 0; }

.tidslinje { list-style: none; padding: 0; margin: 20px 0; border-left: 1px solid var(--metal); }
.tidslinje li { position: relative; padding: 0 0 18px 26px; }
.tidslinje li::before { content: ""; position: absolute; left: -9px; top: 4px; width: 18px; height: 18px; background: url("img/ui/perle.png") center / contain no-repeat; }
.tidslinje b { font-weight: 700; color: var(--overskrift); letter-spacing: 0.06em; margin-right: 8px; }

.fejlside { min-height: 70vh; display: flex; align-items: center; text-align: center; }

:root[data-tema="lys"] .kort, :root[data-tema="lys"] .indhold, :root[data-tema="lys"] .land, :root[data-tema="lys"] .banner, :root[data-tema="lys"] .dato { filter: none; }
:root[data-tema="lys"] .kort p, :root[data-tema="lys"] .land span { color: #a79f86; }
:root[data-tema="lys"] .kort h3, :root[data-tema="lys"] .land strong, :root[data-tema="lys"] .banner, :root[data-tema="lys"] .dato { color: #e8d9a8; }
:root[data-tema="lys"] .kort .maerkat { color: #e3be5b; }
:root[data-tema="lys"] .knap { color: #cfc7a6; }

@media (prefers-color-scheme: light) {
  :root:not([data-tema="moerk"]) .kort p, :root:not([data-tema="moerk"]) .land span { color: #a79f86; }
  :root:not([data-tema="moerk"]) .kort h3, :root:not([data-tema="moerk"]) .land strong, :root:not([data-tema="moerk"]) .banner, :root:not([data-tema="moerk"]) .dato { color: #e8d9a8; }
  :root:not([data-tema="moerk"]) .kort .maerkat { color: #e3be5b; }
  :root:not([data-tema="moerk"]) .knap { color: #cfc7a6; }
}

@media (max-width: 960px) {
  .gitter.fire { grid-template-columns: repeat(2, 1fr); }
  .gitter.tre { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .menuKnap { display: inline-block; }
  nav.menu { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--nat2); border-bottom: 1px solid var(--kant); padding: 8px 16px 16px; }
  nav.menu.aaben { display: flex; }
  nav.menu a { padding: 12px 8px; border-bottom: 1px solid var(--kant); }
  nav.menu a.aktiv::after { display: none; }
  .ramme { padding: 0 16px; }
  .helt { padding: 44px 0 44px; }
  .helt .under { font-size: 18px; }
  section.blok { padding: 56px 0; }
  .gitter.fire, .firstborn { grid-template-columns: 1fr; }
  .indhold ol { columns: 1; }
  .banner { padding: 10px 24px 6px; border-width: 16px 40px; border-image-width: 16px 40px; }
  .knap { width: 100%; }
}

.kontoLink {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--overskrift);
  height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 2px 14px 0;
  border: 1px solid var(--kant);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--guld) 45%, transparent);
  border-radius: var(--radius);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kontoLink:hover { color: #fcecba; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--guld) 80%, transparent); }
.profilHoved { display: flex; gap: 20px; align-items: center; }
.profilBillede { width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--metal); background: var(--nat2); flex: none; }
button.knap { background: none; cursor: pointer; font-family: var(--font); }
.artikel .kort { margin: 20px -10px; }
.artikel h2 { scroll-margin-top: 90px; }
@media (max-width: 760px) { .kontoLink { max-width: 110px; padding: 2px 10px 0; } }

#kontoInde > .kort, #faneProfil > .kort, #faneProfil .kort, #faneIndstil > .kort { margin: 0 0 22px; }
.faner { display: flex; gap: 6px; margin-top: 22px; border-bottom: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); }
.fane { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--daempet); font: 600 13px/1 var(--font); letter-spacing: 0.22em; text-transform: uppercase; padding: 12px 16px 10px; cursor: pointer; margin-bottom: -1px; }
.fane:hover { color: var(--overskrift); }
.fane.aktiv { color: var(--guld); border-bottom-color: var(--guld); }
.vaelger { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.vaelger button { text-align: left; background: var(--flade); border: 1px solid color-mix(in srgb, var(--metal) 40%, transparent); color: var(--tekst); font-family: var(--font); padding: 14px 18px 12px; cursor: pointer; border-radius: var(--radius); }
.vaelger button b { display: block; color: var(--overskrift); font-size: 17px; letter-spacing: 0.04em; }
.vaelger button span { font-size: 14px; color: var(--daempet); }
.vaelger button.aktiv { border-color: var(--guld); box-shadow: 0 0 0 1px var(--guld), 0 0 18px color-mix(in srgb, var(--guld) 25%, transparent); }
.karakterHoved h3 { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 4px; }
.niveauRaekke { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.niveauRaekke div, .stat { background: color-mix(in srgb, var(--nat) 60%, transparent); border: 1px solid color-mix(in srgb, var(--metal) 25%, transparent); padding: 12px 14px 10px; border-radius: var(--radius); }
.niveauRaekke b { display: block; font-size: 26px; color: var(--guld); font-weight: 700; }
.niveauRaekke span, .stat span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--daempet); }
.gitter.to { grid-template-columns: 1fr 1fr; margin-bottom: 22px; }
.gitter.to > .kort { margin: 0; }
.tilhoer::before, .privatKort::before, .fareKort::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 3px; background: var(--fraktionFarve, transparent); }
.tilhoer h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tilhoer .tag { font-size: 12px; letter-spacing: 0.14em; color: var(--guld); border: 1px solid color-mix(in srgb, var(--guld) 50%, transparent); padding: 3px 7px 1px; }
.tilhoer .motto { font-style: italic; margin-bottom: 12px !important; }
.raekker { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 12px 0 0; }
.raekker dt { color: var(--daempet); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.raekker dd { margin: 0; color: var(--overskrift); }
.maerkat.styre { display: inline-block; margin-top: 14px; color: var(--guld); }
.kortTop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kortTop h3 { margin: 0 !important; }
.taeller { color: var(--guld); font-weight: 600; letter-spacing: 0.08em; }
.skift { display: inline-flex; border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); border-radius: var(--radius); }
.skift button { background: none; border: 0; color: var(--daempet); font: 600 12px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; padding: 9px 12px 7px; cursor: pointer; }
.skift button.aktiv { background: color-mix(in srgb, var(--guld) 18%, transparent); color: var(--guld); }
.statGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat b { display: block; font-size: 20px; color: var(--overskrift); font-weight: 600; }
.privatKort { --fraktionFarve: color-mix(in srgb, var(--guld) 55%, transparent); }
.laas { font-size: 16px; }
.praestGruppe { border-top: 1px solid color-mix(in srgb, var(--metal) 25%, transparent); padding: 10px 0; }
.praestGruppe summary { cursor: pointer; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; color: var(--overskrift); padding: 4px 0; }
.praestGitter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.praest { font-size: 14px; padding: 6px 10px 4px; border: 1px solid color-mix(in srgb, var(--metal) 25%, transparent); color: var(--svag); border-radius: var(--radius); }
.praest.har { color: var(--overskrift); border-color: color-mix(in srgb, var(--guld) 60%, transparent); background: color-mix(in srgb, var(--guld) 10%, transparent); }
.petListe { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pet { background: color-mix(in srgb, var(--nat) 60%, transparent); border: 1px solid color-mix(in srgb, var(--metal) 25%, transparent); padding: 12px 14px; border-radius: var(--radius); }
.pet b { display: block; color: var(--overskrift); }
.pet span { font-size: 14px; color: var(--daempet); }
.baand { height: 5px; background: color-mix(in srgb, var(--metal) 25%, transparent); margin-top: 10px; border-radius: 3px; overflow: hidden; }
.baand i { display: block; height: 100%; background: var(--guldGrad); }
.kontakter { display: grid; gap: 8px; margin-top: 14px; }
.kontakt { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--metal) 22%, transparent); border-radius: var(--radius); cursor: default; }
label.kontakt { cursor: pointer; }
.kontakt b { display: block; color: var(--overskrift); font-weight: 600; }
.kontakt span { font-size: 14px; color: var(--daempet); }
.kontakt.svag { opacity: 0.6; }
.vippe { appearance: none; flex: none; width: 44px; height: 24px; border-radius: 12px; background: color-mix(in srgb, var(--metal) 35%, transparent); position: relative; cursor: pointer; transition: background 0.2s; }
.vippe::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--metalLys); transition: transform 0.2s; }
.vippe:checked { background: var(--guldMoerk); }
.vippe:checked::after { transform: translateX(20px); background: #fcecba; }
.vippe:focus-visible { outline: 2px solid var(--guld); outline-offset: 2px; }
.gemStatus { align-self: center; color: var(--daempet); font-size: 15px; }
.fareKort { --fraktionFarve: #9b3b2e; }
.knap.fare { color: #f0b3a8 !important; filter: hue-rotate(-30deg) saturate(1.4); }
@media (max-width: 760px) {
  .gitter.to, .vaelger { grid-template-columns: 1fr; }
  .niveauRaekke, .statGitter { grid-template-columns: repeat(2, 1fr); }
  .stat b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .vippe, .vippe::after { transition: none; } }
[hidden] { display: none !important; }

.lilleLink { display: inline-block; margin-top: 6px; font-size: 14px; letter-spacing: 0.08em; }
.gitter.to.en { grid-template-columns: 1fr; }
.soegKort label h3 { margin-bottom: 6px; }
.soegRaekke { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.soegRaekke input { flex: 1 1 220px; min-width: 0; background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 17px var(--font); padding: 12px 14px 9px; border-radius: var(--radius); }
.soegRaekke input:focus { outline: none; border-color: var(--guld); box-shadow: 0 0 0 1px var(--guld); }
#soegSvar > .kort, #ikkeFundet, #spillerVisning > .kort { margin: 0 0 22px; }
.spillerRaekke { justify-content: flex-start; text-decoration: none; color: inherit; cursor: pointer; }
.spillerRaekke:hover { border-color: color-mix(in srgb, var(--guld) 60%, transparent); background: color-mix(in srgb, var(--guld) 6%, transparent); }
.miniBillede { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--metal); background: var(--nat2); flex: none; }

:root[data-tema="lys"] .kort, :root[data-tema="lys"] .vaelger { --overskrift: #e8d9a8; --tekst: #cfc7a6; --daempet: #8f8770; --svag: #6b6655; --guld: #e3be5b; --guldLys: #fcecba; --guldMoerk: #a0783a; --metal: #978f74; --metalLys: #d3cbaa; --nat: #0a0908; --nat2: #0e0d0b; --flade: #121110; color-scheme: dark; }
@media (prefers-color-scheme: light) { :root:not([data-tema="moerk"]) .kort, :root:not([data-tema="moerk"]) .vaelger { --overskrift: #e8d9a8; --tekst: #cfc7a6; --daempet: #8f8770; --svag: #6b6655; --guld: #e3be5b; --guldLys: #fcecba; --guldMoerk: #a0783a; --metal: #978f74; --metalLys: #d3cbaa; --nat: #0a0908; --nat2: #0e0d0b; --flade: #121110; color-scheme: dark; } }
#spillerVisning .kort, .soegKort { margin: 0 0 22px; }
#spillerVisning .gitter.to > .kort { margin: 0; }
.filtre { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.filtre input, .filtre select { min-width: 0; background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 15px var(--font); padding: 10px 12px 8px; border-radius: var(--radius); }
.filtre input:focus, .filtre select:focus { outline: none; border-color: var(--guld); }
.medlemTabel { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.medlemTabel th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--daempet); padding: 10px 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--metal) 40%, transparent); }
.medlemTabel td { padding: 10px; border-bottom: 1px solid color-mix(in srgb, var(--metal) 16%, transparent); color: var(--tekst); vertical-align: top; }
.medlemTabel tr:hover td { background: color-mix(in srgb, var(--guld) 5%, transparent); }
.medlemTabel td.tal { font-variant-numeric: tabular-nums; white-space: nowrap; }
.medlemTabel td.online { color: #8fd18a; font-weight: 600; }
.medlemTabel td.borte { color: #d48f7e; }
.medlemTabel td.tom { text-align: center; color: var(--daempet); padding: 24px; }
.medlemNavn { display: block; color: var(--overskrift); font-weight: 600; text-decoration: none; }
.medlemNavn:hover { color: var(--guld); }
.medlemBruger { display: block; font-size: 13px; color: var(--daempet); }
.styreMaerke { display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--guld); border: 1px solid color-mix(in srgb, var(--guld) 45%, transparent); padding: 2px 5px 0; vertical-align: 2px; }
#faneFraktion .kort, #fVaelger { margin: 0 0 22px; }
@media (max-width: 760px) { .filtre { grid-template-columns: 1fr 1fr; } .filtre input { grid-column: 1 / -1; } }
#kontoInde, #faneFraktion, #faneFraktion .kort { min-width: 0; max-width: 100%; }
#faneFraktion .tabelRul { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) { .faner { gap: 0; } .fane { padding: 12px 10px 10px; letter-spacing: 0.14em; font-size: 12px; } }
.topKort { margin: 0 0 22px !important; }
.tavleValg { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tavle { background: none; border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); color: var(--daempet); font: 600 12px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; padding: 10px 12px 8px; cursor: pointer; border-radius: var(--radius); }
.tavle:hover { color: var(--overskrift); border-color: color-mix(in srgb, var(--guld) 50%, transparent); }
.tavle.aktiv { color: var(--guld); border-color: var(--guld); background: color-mix(in srgb, var(--guld) 12%, transparent); }
.topFiltre { grid-template-columns: auto 1fr; align-items: center; margin: 0; }
.topFiltre .skift[hidden] + select { grid-column: 1 / -1; }
.artikel .kort + .kort { margin-top: 0; }
.topListe { list-style: none; margin: 0; padding: 0; }
.topRaekke { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid color-mix(in srgb, var(--metal) 16%, transparent); }
.topPlads { font-size: 18px; font-weight: 700; color: var(--daempet); text-align: center; font-variant-numeric: tabular-nums; }
.top1 .topPlads { color: #f3cf6a; font-size: 24px; }
.top2 .topPlads { color: #cfd3d8; font-size: 22px; }
.top3 .topPlads { color: #d39a62; font-size: 21px; }
.top1 { background: linear-gradient(90deg, color-mix(in srgb, #f3cf6a 12%, transparent), transparent 70%); }
.topNavn { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.topNavn b { display: flex; align-items: center; gap: 8px; color: var(--overskrift); font-weight: 600; }
.topNavn b .tag { font-size: 10px; letter-spacing: 0.12em; color: var(--guld); border: 1px solid color-mix(in srgb, var(--guld) 50%, transparent); padding: 2px 5px 0; }
.topNavn span { font-size: 13px; color: var(--daempet); }
.topNavn div { min-width: 0; }
a.topNavn:hover b { color: var(--guld); }
.topSkjold { width: 30px; height: 36px; flex: none; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.topVaerdi { font-size: 18px; font-weight: 700; color: var(--guld); font-variant-numeric: tabular-nums; white-space: nowrap; }
.topTom { padding: 26px; text-align: center; color: var(--daempet); }
@media (max-width: 760px) { .topRaekke { grid-template-columns: 30px 1fr auto; gap: 8px; } .topVaerdi { font-size: 15px; } }
@media (min-width: 761px) and (max-width: 1360px) {
  nav.menu a { letter-spacing: 0.1em; padding: 10px 8px 8px; font-size: 12px; }
  nav.menu a.snart::after { display: none; }
  .maerke { margin-right: 16px; }
}
.nedfald { position: relative; display: flex; }
.nedfald .under { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; flex-direction: column; padding: 8px 0; background: var(--nat2); border: 1px solid var(--kant); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px color-mix(in srgb, var(--metal) 25%, transparent); z-index: 30; }
.nedfald:hover .under, .nedfald:focus-within .under { display: flex; }
nav.menu .nedfald > a::before { content: ""; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-right: 7px; vertical-align: 2px; opacity: 0.7; float: right; margin: 5px 0 0 7px; }
nav.menu .under a { padding: 10px 16px 8px; white-space: nowrap; }
nav.menu .under a::after { display: none !important; }
nav.menu .under a:hover { background: color-mix(in srgb, var(--guld) 8%, transparent); }
@media (max-width: 760px) {
  .nedfald { flex-direction: column; }
  .nedfald .under { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 14px; background: none; }
  nav.menu .nedfald > a::before { display: none; }
}
.halValg { background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 16px var(--font); padding: 10px 12px 8px; border-radius: var(--radius); }
.halGitter { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.halGitter .kort { margin: 0 !important; }
#hMester, #hTom { margin: 0 0 22px !important; }
.mesterKort { --fraktionFarve: #f3cf6a; }
.mesterKort::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 3px; background: var(--fraktionFarve); }
.mesterNavn { display: block; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--overskrift); text-decoration: none; }
.mesterNavn:hover { color: var(--guld); }
.topRaekke.lille { grid-template-columns: 30px 1fr auto; padding: 8px 4px; }
.topRaekke.lille .topVaerdi { font-size: 15px; }
@media (max-width: 760px) { .halGitter { grid-template-columns: 1fr; } }
.frGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.frKort { display: flex; gap: 14px; align-items: center; padding: 14px; border: 1px solid color-mix(in srgb, var(--metal) 25%, transparent); border-left: 3px solid var(--fraktionFarve, var(--metal)); border-radius: var(--radius); text-decoration: none; color: inherit; background: color-mix(in srgb, var(--nat) 55%, transparent); }
.frKort:hover { border-color: color-mix(in srgb, var(--guld) 55%, transparent); border-left-color: var(--fraktionFarve, var(--guld)); }
.frKort b { display: flex; align-items: center; gap: 8px; color: var(--overskrift); font-weight: 600; }
.frKort span { display: block; font-size: 13px; color: var(--daempet); }
.frKort .frMottoLille { font-style: italic; margin: 2px 0; }
.frKort b .tag, .frNavn .tag { font-size: 10px; letter-spacing: 0.12em; color: var(--guld); border: 1px solid color-mix(in srgb, var(--guld) 50%, transparent); padding: 2px 5px 0; display: inline-block; }
.frSkjold { width: 56px; height: 56px; flex: none; object-fit: contain; }
.frSkjoldTom { clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); display: block; }
.frSkjold.frSkjoldTom { width: 44px; height: 54px; }
.frHoved { display: flex; gap: 24px; align-items: center; }
.frSkjoldStor { width: 140px; height: 140px; flex: none; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
span.frSkjoldStor { width: 110px; height: 136px; }
.frNavn { font-size: clamp(24px, 3.4vw, 32px) !important; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.frBesk { white-space: pre-line; color: var(--tekst) !important; }
.tilhoerLink { color: inherit; text-decoration: none; }
.tilhoerLink[href]:hover { color: var(--guld); }
.lilleKnap { margin-top: 14px; padding: 8px 18px 6px !important; font-size: 12px !important; }
#fMedlemmer .kort { margin: 0 0 22px; }
@media (max-width: 760px) { .frHoved { flex-direction: column; align-items: flex-start; } }
.dagensOrd::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 3px; background: var(--guldGrad); }
.dagensRaekke { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dagensRaekke b .svOrdLink { font-size: clamp(28px, 4vw, 38px); }
.dagensRaekke > span { color: var(--daempet); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
#svDagBetyd { font-size: 19px; color: var(--overskrift) !important; margin-top: 4px !important; }
.svTyper { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.svResultater { display: grid; gap: 6px; margin-top: 8px; }
.svRaekke { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 14px; align-items: baseline; text-align: left; background: color-mix(in srgb, var(--nat) 55%, transparent); border: 1px solid color-mix(in srgb, var(--metal) 20%, transparent); color: var(--tekst); font: 400 16px var(--font); padding: 10px 14px 8px; border-radius: var(--radius); cursor: pointer; width: 100%; }
.svRaekke:hover, .svRaekke:focus-visible { border-color: color-mix(in srgb, var(--guld) 55%, transparent); outline: none; }
.svRaekke b { color: var(--guld); font-weight: 600; letter-spacing: 0.03em; }
.svType { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--svag); white-space: nowrap; }
.svStort { font-size: clamp(30px, 4.4vw, 42px) !important; color: var(--guld) !important; letter-spacing: 0.04em; margin: 2px 0 4px !important; }
.svFormer { margin-top: 18px; }
.svFormer dd { color: var(--guld); font-weight: 600; letter-spacing: 0.03em; }
.svHjaelp { margin-top: 14px !important; }
.svLekGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 22px; }
.svLekKort { text-align: left; display: flex; flex-direction: column; gap: 4px; background: var(--flade); border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); color: var(--tekst); font-family: var(--font); padding: 16px 18px 14px; cursor: pointer; border-radius: var(--radius); }
.svLekKort:hover { border-color: var(--guld); box-shadow: 0 0 16px color-mix(in srgb, var(--guld) 18%, transparent); }
.svLekKort b { color: var(--overskrift); font-size: 18px; letter-spacing: 0.04em; }
.svLekNr { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--guld); }
.svLekKilde { font-size: 13px; color: var(--daempet); }
.svSide p { color: var(--tekst) !important; margin: 0 0 12px !important; }
.svRegel { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--guld); background: color-mix(in srgb, var(--guld) 7%, transparent); padding: 12px 16px 10px; margin: 4px 0 14px; font-family: var(--font); color: inherit; }
.svRegelKnap { cursor: pointer; }
.svRegelKnap:hover { background: color-mix(in srgb, var(--guld) 13%, transparent); }
.svRegelNr { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--guld); font-weight: 600; margin-bottom: 4px; }
.svRegel p { margin: 0 !important; color: var(--overskrift) !important; font-size: 17px; }
.svUnder { font-size: 12px; letter-spacing: 0.24em; color: var(--guld); margin: 18px 0 10px; font-weight: 600; }
.svUnder:first-child { margin-top: 0; }
.svEksempel { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding-left: 14px; }
.svSv { color: var(--guld); font-weight: 600; }
.svPil { color: var(--svag); }
.svEd { font-style: italic; color: var(--guld) !important; font-size: 18px; margin: 0 0 4px !important; padding-left: 14px; }
.svOrdliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; margin: 0 0 14px; }
.svOrdRaekke { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--metal) 14%, transparent); }
.svOrdRaekke span { color: var(--tekst); font-size: 15px; }
.svOrdLink { background: none; border: 0; padding: 0; font: 600 16px var(--font); color: var(--guld); cursor: pointer; letter-spacing: 0.03em; }
.svOrdLink:hover { text-decoration: underline; text-underline-offset: 3px; }
#svOrdbog .kort, #svRegler .kort, #svLaeser .kort { margin: 0 0 22px; }
@media (max-width: 760px) { .svRaekke { grid-template-columns: 1fr auto; } .svRaekke .svEn { grid-column: 1 / -1; grid-row: 2; } }
.svRaekke { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 170px; }
.svRaekke > * { min-width: 0; overflow-wrap: anywhere; }
.svRaekke .svType { text-align: right; white-space: normal; }
@media (max-width: 760px) { .svRaekke { grid-template-columns: minmax(0, 1fr) auto; } .svRaekke .svType { max-width: 140px; } }
.kortRamme { max-width: 1400px; margin: 0 auto 26px; padding: 0 16px; }
.kortTopbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kortKnapper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kortKnapper .lilleKnap { margin-top: 0; min-width: 44px; }
.kortValg { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--daempet); cursor: pointer; margin-right: 6px; }
.kortValg input { accent-color: var(--guld); width: 16px; height: 16px; }
.kortVindue { position: relative; width: 100%; aspect-ratio: 3 / 2; max-height: 80vh; overflow: hidden; background: #0c1520; border: 1px solid var(--kant); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal) 40%, transparent), 0 14px 40px rgba(0, 0, 0, 0.45); border-radius: var(--radius); cursor: grab; touch-action: none; user-select: none; outline: none; }
.kortVindue:active { cursor: grabbing; }
.kortVindue:focus-visible { box-shadow: 0 0 0 2px var(--guld); }
.kortVindue.indlaeser .kortLag { opacity: 0.4; }
.kortLag { position: absolute; left: 0; top: 0; aspect-ratio: 3 / 2; transform-origin: 0 0; transition: opacity 0.2s; }
.kortLag img, .kortLag canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.kortLag img { image-rendering: auto; }
.kortNavne { position: absolute; inset: 0; pointer-events: none; }
.kortNavne.skjul .kRegion { display: none; }
.kNavn { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--font); line-height: 1; }
.kRegion { display: none; font-size: calc(11px / var(--z, 1)); font-weight: 600; color: var(--navn); text-shadow: 0 0 calc(2px / var(--z, 1)) var(--navnKant), 0 0 calc(3px / var(--z, 1)) var(--navnKant); }
.kortNavne.taet .kRegion { display: block; }
.kRige { font-size: calc(17px / var(--z, 1)); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--rige); text-shadow: 0 0 calc(3px / var(--z, 1)) var(--rigeKant), 0 0 calc(6px / var(--z, 1)) var(--rigeKant); opacity: 0.95; }
.kortNavne.taet .kRige { opacity: 0.35; }
.kHav { font-size: calc(14px / var(--z, 1)); font-style: italic; letter-spacing: 0.12em; color: var(--hav); text-shadow: 0 0 calc(3px / var(--z, 1)) var(--havKant); opacity: 0.85; }
.kSoe { font-size: calc(10px / var(--z, 1)); display: none; }
.kortNavne.taet .kSoe { display: block; }
.kortTip { position: absolute; z-index: 5; pointer-events: none; background: color-mix(in srgb, var(--nat2) 94%, transparent); border: 1px solid var(--kant); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 0 1px color-mix(in srgb, var(--metal) 30%, transparent); padding: 10px 12px 8px; border-radius: var(--radius); max-width: 260px; }
.kortTip b { display: block; color: var(--overskrift); letter-spacing: 0.06em; }
.kortTip span { display: block; font-size: 13px; color: var(--daempet); }
.kortTip .kTipEjer { color: var(--guld); font-weight: 600; margin-top: 2px; }
.kortHjaelp { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: 12px; color: rgba(240, 230, 204, 0.6); pointer-events: none; text-shadow: 0 1px 2px #000; }
.kortUnder { max-width: 1100px; }
.kNabo { cursor: pointer; font-family: var(--font); background: none; }
.kNabo:hover { color: var(--guld); border-color: var(--guld); }
#kRNaboer { margin-top: 14px; }
.kPrik { width: 16px; height: 16px; border-radius: 3px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
@media (max-width: 760px) { .kortVindue { aspect-ratio: 4 / 5; max-height: 70vh; } .kortHjaelp { display: none; } }
.kortKnapper .knap { width: auto; flex: none; display: inline-flex; padding: 8px 14px 6px !important; }
@media (max-width: 760px) { .kortTopbar { gap: 10px; } .kortKnapper { width: 100%; justify-content: flex-start; flex-wrap: nowrap; } .kortValg { margin-right: auto; } .kortKnapper .knap { padding: 8px 10px 6px !important; } }
#traener { display: flex; flex-direction: column; gap: 18px; --god: #8db874; --daarlig: #d0765e; }
.tfaner { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tfaner button { font: 600 13px var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--daempet); background: var(--flade); border: 1px solid color-mix(in srgb, var(--metal) 40%, transparent); padding: 10px 16px 8px; cursor: pointer; border-radius: var(--radius); }
.tfaner button[aria-selected="true"] { color: var(--guld); border-color: var(--guld); background: color-mix(in srgb, var(--guld) 10%, var(--flade)); }
#traener .badge { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; background: var(--guld); color: #1a1408; font-weight: 700; font-size: 12px; letter-spacing: 0; line-height: 20px; border-radius: 10px; }
#traener .panel { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 26px 24px; border: 28px solid transparent; border-image: url("img/ui/panel.png?v=2") 28 fill / 28px stretch; margin: 0 -10px; --overskrift: #e8d9a8; --tekst: #cfc7a6; --daempet: #8f8770; --guld: #e3be5b; --metal: #978f74; --nat: #0a0908; --flade: #121110; color: var(--tekst); }
#traener .panel > .hjoerne { display: none; }
#traener h2 { font-size: 22px; margin: -10px 0 0; color: var(--overskrift); letter-spacing: 0.06em; }
#traener h3 { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--guld); margin: 0; }
#traener p { margin: 0; }
#traener .daempet { color: var(--daempet); }
#traener .so { font-style: italic; font-weight: 600; color: var(--guld); }
#traener .raekke { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#traener .mellem { justify-content: space-between; }
#traener .knap { font-size: 13px; padding: 10px 20px 8px; }
#traener .knap.lav { opacity: 0.85; }
#traener .knap:disabled { opacity: 0.45; cursor: default; }
#traener .trinlinje { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#traener .trinlinje span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--daempet); padding: 4px 10px 2px; border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); }
#traener .trinlinje span.nu { color: var(--guld); border-color: var(--guld); }
#traener .trinlinje span.ok { color: var(--god); border-color: #4a6340; }
#traener .regel { border-left: 3px solid var(--guld); background: color-mix(in srgb, var(--guld) 7%, transparent); padding: 10px 14px 8px; display: flex; flex-direction: column; gap: 6px; }
#traener .regel b { color: var(--guld); letter-spacing: 0.16em; font-size: 12px; }
#traener .eks { padding-left: 14px; }
#traener .ordtabel { width: 100%; border-collapse: collapse; }
#traener .ordtabel td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--metal) 18%, transparent); vertical-align: top; }
#traener .ordtabel td:first-child { width: 40%; }
#traener .tryk { font-size: 11px; color: var(--daempet); letter-spacing: 0.08em; margin-left: 8px; font-style: normal; }
#traener .spm { font-size: 20px; color: var(--overskrift); }
#traener .valg { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
#traener .valg button { text-align: left; font: 400 17px var(--font); color: var(--tekst); background: color-mix(in srgb, var(--nat) 60%, transparent); border: 1px solid color-mix(in srgb, var(--metal) 30%, transparent); padding: 12px 14px 10px; cursor: pointer; border-radius: var(--radius); }
#traener .valg button:hover:not(:disabled) { border-color: var(--guld); }
#traener .valg button.rigtig { border-color: var(--god); background: #1e2618; }
#traener .valg button.forkert { border-color: var(--daarlig); background: #2a1915; }
#traener .svar { padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--metal) 30%, transparent); background: color-mix(in srgb, var(--nat) 70%, transparent); display: flex; flex-direction: column; gap: 6px; }
#traener .svar.god { border-color: #4a6340; }
#traener .svar.daarlig { border-color: #6e3b2f; }
#traener .svar strong { letter-spacing: 0.06em; }
#traener .svar.god strong { color: var(--god); }
#traener .svar.daarlig strong { color: var(--daarlig); }
#traener input[type="text"], #traener input[type="search"] { flex: 1 1 240px; min-width: 0; font: italic 600 19px var(--font); color: var(--guld); background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); padding: 12px 14px 9px; border-radius: var(--radius); }
#traener input[type="search"] { font-style: normal; font-weight: 400; font-size: 17px; color: var(--overskrift); }
#traener input:focus { outline: none; border-color: var(--guld); }
#traener .diff span { padding: 0 2px; }
#traener .diff .mangler { color: var(--god); text-decoration: underline; }
#traener .diff .ekstra { color: var(--daarlig); text-decoration: line-through; }
#traener .kort { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); background: color-mix(in srgb, var(--nat) 60%, transparent); padding: 24px; cursor: pointer; margin: 0; border-image: none; }
#traener .kort .stor { font-size: 34px; }
#traener .kasser { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#traener .kasser div { text-align: center; border: 1px solid color-mix(in srgb, var(--metal) 30%, transparent); padding: 8px 4px; font-size: 12px; color: var(--daempet); letter-spacing: 0.08em; text-transform: uppercase; }
#traener .kasser b { display: block; font-size: 20px; color: var(--overskrift); letter-spacing: 0; }
#traener .liste { display: flex; flex-direction: column; }
#traener .liste .post { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--metal) 18%, transparent); }
#traener .liste .post small { color: var(--daempet); font-size: 11px; margin-left: 6px; letter-spacing: 0.1em; text-transform: uppercase; }
#traener .lille { font-size: 14px; }
#traener .mini { font: 400 13px var(--font); padding: 6px 10px 4px; background: none; color: var(--daempet); border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); cursor: pointer; border-radius: var(--radius); }
#traener .mini.har { color: var(--god); border-color: #4a6340; cursor: default; }
#traener details { border-bottom: 1px solid color-mix(in srgb, var(--metal) 18%, transparent); padding: 10px 0; }
#traener summary { cursor: pointer; letter-spacing: 0.08em; color: var(--overskrift); font-weight: 600; }
#traener .vers { font-style: italic; color: var(--guld); padding-left: 14px; }
#traener .tal { font-variant-numeric: tabular-nums; }
.tstatus { font-size: 13px; color: var(--daempet); text-align: center; }
@media (max-width: 520px) { #traener .liste .post { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } #traener .liste .post .mini { grid-column: 1 / -1; justify-self: start; } #traener .kort .stor { font-size: 28px; } }

.merker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.merker:empty { display: none; }
.merke { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px 2px; border-radius: var(--radius); border: 1px solid; }
.merkeDiscord { color: #b7bdf8; border-color: #5865f2; background: rgba(88, 101, 242, 0.14); }
.merkeBooster { color: #f8b6f0; border-color: #f47fff; background: rgba(244, 127, 255, 0.12); }
.kontakt .knap.lilleKnap { margin-top: 0; flex: none; }
.merkePatreon { color: #ffc2b0; border-color: #ff5f45; background: rgba(255, 95, 69, 0.12); }
.stabIkon { display: inline-block; width: 14px; height: 16px; margin-left: 7px; vertical-align: -2px; background: var(--stabFarve, var(--guld)); clip-path: polygon(50% 0, 100% 18%, 100% 55%, 50% 100%, 0 55%, 0 18%); box-shadow: 0 0 6px var(--stabFarve); flex: none; }
.merkeStab { color: var(--stabFarve); border-color: var(--stabFarve); background: color-mix(in srgb, var(--stabFarve) 14%, transparent); }
.stabMaerke { margin-left: 8px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--guld); border: 1px solid color-mix(in srgb, var(--guld) 50%, transparent); padding: 2px 5px 0; }
.stabSide .kort, #stInde > section .kort { margin: 0 0 22px; }
.stabSide .gitter.to > .kort { margin: 0; }
.stKnap { width: 100%; text-align: left; background: none; font-family: var(--font); color: inherit; cursor: pointer; }
.stServer { margin-bottom: 14px; }
.stFelt { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--daempet); }
.stFelt select, .stFelt textarea { background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 16px var(--font); padding: 10px 12px 8px; border-radius: var(--radius); text-transform: none; letter-spacing: 0; resize: vertical; }
.stFelt select:focus, .stFelt textarea:focus { outline: none; border-color: var(--guld); }
.stBan { border-left: 3px solid #c0392b; background: rgba(192, 57, 43, 0.12); padding: 10px 14px 8px; margin: 8px 0 14px; }
.stBan b { display: block; color: #f0b3a8; }
.stBan span { font-size: 14px; color: var(--daempet); }
.stSvar { display: block; color: var(--tekst) !important; font-style: italic; }
.stStatus { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 7px 1px; border: 1px solid; border-radius: var(--radius); flex: none; }
.st_ok { color: #8fd18a; border-color: #4a6340; }
.st_fejl { color: #f0b3a8; border-color: #6e3b2f; }
.st_venter, .st_taget { color: var(--guld); border-color: color-mix(in srgb, var(--guld) 50%, transparent); }
nav.menu a.stabLink { color: var(--guld); }
.stLogValg { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stLogValg select, #stLogFilter, .stLuk input { background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 15px var(--font); padding: 8px 10px 6px; border-radius: var(--radius); }
.stLogValg select:focus, #stLogFilter:focus, .stLuk input:focus { outline: none; border-color: var(--guld); }
#stLogFilter { width: 100%; margin: 4px 0 12px; }
.stRapport > div { flex: 1; min-width: 0; }
.stRapport .svOrdLink { font-weight: 700; }
.stLuk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.stLuk input { flex: 1; min-width: 180px; }
.stLukket { opacity: 0.5; }
.stabSide .kortTop { flex-wrap: wrap; }
.stabSide .kortTop .faner { flex-wrap: wrap; max-width: 100%; overflow: visible; }
.stabSide .kortTop .fane { white-space: nowrap; }
@media (min-width: 1081px) {
  header.top .ramme { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); max-width: none; padding: 0 32px; }
  header.top .maerke { grid-column: 1; justify-self: start; margin-right: 0; }
  header.top nav.menu { grid-column: 2; grid-row: 1; margin: 0; justify-content: center; }
  header.top .hoejre { grid-column: 3; grid-row: 1; justify-self: end; }
}
@media (min-width: 1081px) and (max-width: 1360px) { header.top .ramme { padding: 0 20px; } }
@media (min-width: 761px) and (max-width: 1080px) {
  .menuKnap { display: inline-block; }
  header.top .ramme { max-width: none; }
  nav.menu { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--nat2); border-bottom: 1px solid var(--kant); padding: 8px 24px 16px; }
  nav.menu.aaben { display: flex; }
  nav.menu a { padding: 12px 8px; border-bottom: 1px solid var(--kant); font-size: 13px; letter-spacing: 0.16em; }
  nav.menu a.aktiv::after { display: none; }
  nav.menu a.snart::after { display: inline; }
  .nedfald { flex-direction: column; }
  .nedfald .under { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 14px; background: none; }
  nav.menu .nedfald > a::before { display: none; }
}
.vSkjult { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip-path: inset(50%); }
.vValg { position: relative; display: inline-block; min-width: 160px; vertical-align: middle; }
.vValg[hidden] { display: none; }
.filtre .vValg, .stFelt .vValg, .topFiltre .vValg { width: 100%; min-width: 0; }
.vKnap { display: flex; align-items: center; width: 100%; height: 40px; padding: 0 4px; margin: 0; background: none; color: var(--overskrift); font: 400 15px/1 var(--font); letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer; border-style: solid; border-width: 10px 24px 10px 12px; border-image: url("img/ui/rulleliste.png") 20 48 20 24 fill / 10px 24px 10px 12px stretch; }
.vKnap:hover, .vKnap:focus-visible { outline: none; filter: brightness(1.18) drop-shadow(0 0 6px color-mix(in srgb, var(--guld) 35%, transparent)); }
.vValg.deaktiv .vKnap { opacity: 0.5; cursor: default; }
.vTekst { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.vListe { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 320px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; border-style: solid; border-width: 12px; border-image: url("img/ui/rulle_aaben.png") 24 fill / 12px stretch; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); color-scheme: dark; }
.vValg.op .vListe { top: auto; bottom: calc(100% + 4px); }
.vListe li { padding: 9px 14px 7px; color: #cfc7a6; font: 400 15px/1.2 var(--font); white-space: nowrap; cursor: pointer; text-transform: none; letter-spacing: 0; }
.vListe li.mark { color: #fcecba; background: url("img/ui/glow_raekke.png") center / 100% 100% no-repeat; }
.vListe li[aria-selected="true"] { color: #e3be5b; }
.vListe li[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.nedfald .under { border: 0 !important; border-style: solid !important; border-width: 12px !important; border-image: url("img/ui/rulle_aaben.png") 24 fill / 12px stretch !important; background: none !important; padding: 2px 0 !important; color-scheme: dark; }
nav.menu .under a { color: #a8a089; }
nav.menu .under a:hover { color: #fcecba; background: url("img/ui/glow_raekke.png") center / 100% 100% no-repeat; }
@media (max-width: 1080px) { .nedfald .under { border-width: 0 !important; border-image: none !important; } nav.menu .under a { color: var(--daempet); } }
html { scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 14px; height: 14px; background: var(--nat); }
::-webkit-scrollbar-track { background: url("img/ui/rul_spor.png") center / 14px 100% no-repeat; }
::-webkit-scrollbar-thumb { border-style: solid; border-width: 10px 0; border-image: url("img/ui/rul_knop.png") 20 0 20 0 fill / 10px 0 stretch; min-height: 48px; }
::-webkit-scrollbar-thumb:hover { filter: brightness(1.25); }
::-webkit-scrollbar-corner { background: var(--nat); }
.vListe::-webkit-scrollbar { width: 10px; background: transparent; }
@supports (-moz-appearance: none) { html, .vListe { scrollbar-color: #9a9276 #0e0d0b; scrollbar-width: thin; } }
.vSkjold { display: block; flex: none; }
.tilhoerSkjold { float: right; margin: -6px -6px 6px 12px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
canvas.frSkjoldStor { width: 200px !important; height: 200px !important; margin: -30px -20px; }
canvas.frSkjold { width: 64px !important; height: 64px !important; margin: -4px; }
.vejGitter .snartKort .status { margin: 0 0 12px; }
.vejGitter .status.naeste { color: var(--guld); border-style: solid; border-color: color-mix(in srgb, var(--guld) 60%, transparent); }
.stServerTop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stServerTop h4 { margin: 0; }
.stHurtig { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.stHurtigKnap { background: none; border: 1px solid color-mix(in srgb, var(--metal) 50%, transparent); color: var(--daempet); font: 600 11px/1 var(--font); letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 9px 5px; cursor: pointer; border-radius: var(--radius); }
.stHurtigKnap:hover, .stHurtigKnap:focus-visible { color: var(--overskrift); border-color: var(--guld); outline: none; background: color-mix(in srgb, var(--guld) 8%, transparent); }
.stHurtigKnap.fare { color: #e0a093; border-color: #6e3b2f; }
.stHurtigKnap.fare:hover { color: #f0b3a8; border-color: #c0392b; background: rgba(192, 57, 43, 0.12); }
.stHurtigKnap:disabled { opacity: 0.5; cursor: default; }
.stOnlineRaekke { display: flex; flex-direction: column; gap: 6px; border: 1px solid color-mix(in srgb, var(--metal) 25%, transparent); padding: 0 0 10px; }
.stOnlineRaekke > .kontakt { border: 0 !important; }
.stOnlineRaekke > .stHurtig { padding: 0 14px; }
.stServerForm { margin: 10px 0 12px; }
.stRapport .stHurtig { margin-top: 8px; }
.loSide { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.loNav { position: sticky; top: 90px; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.loNav .maerkat { margin-bottom: 10px; }
.loNavLink { display: block; padding: 9px 10px 7px; color: var(--daempet); font-size: 15px; border-left: 2px solid transparent; text-transform: capitalize; }
.loNavLink.under { padding-left: 22px; font-size: 14px; }
.loNavLink:hover { color: var(--overskrift); background: color-mix(in srgb, var(--guld) 6%, transparent); }
.loNavLink.aktiv { color: var(--guld); border-left-color: var(--guld); }
.loTekst { margin: 0 !important; }
.loTekst p { max-width: 70ch; line-height: 1.75; }
.loTekst .loH { margin: 34px 0 12px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--metal) 30%, transparent); font-size: 26px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--overskrift); }
.loTekst .loH2 { margin: 24px 0 8px; color: var(--guld); }
.loCitat { font-style: italic; font-size: 20px; color: var(--guldLys); text-align: center; max-width: none !important; margin: 18px auto 22px; }
.loBillede { margin: 18px 0; text-align: center; }
.loBillede img { max-width: 100%; max-height: 520px; border: 1px solid var(--kant); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.loListe { padding-left: 22px; line-height: 1.7; }
.loKildeLink { margin-top: 30px; }
.loKilde { margin: 18px 0 40px; text-align: center; }
@media (max-width: 860px) { .loSide { grid-template-columns: 1fr; } .loNav { position: static; } }
.loTekst p { margin: 0 0 14px; }
.loSide.forside { grid-template-columns: 1fr; }
.loSkille { height: 16px; margin: 30px 0 6px; background: url("img/ui/skillelinje.png") center / min(100%, 640px) 16px no-repeat; opacity: 0.85; }
.loKilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.loKildeKort { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); background: color-mix(in srgb, var(--nat2) 70%, transparent); transition: border-color 0.2s, background 0.2s; }
.loKildeKort:hover { border-color: var(--guld); background: color-mix(in srgb, var(--guld) 6%, var(--nat2)); }
.loKildeKort b { color: var(--overskrift); font-size: 19px; letter-spacing: 0.06em; }
.loKildeKort span:last-child { color: var(--daempet); font-size: 15px; }
.loTilbage { color: var(--guld) !important; margin-bottom: 6px; }
.loTilfoej { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .loKildeKort { transition: none; } }
.juraSide h2 { scroll-margin-top: 90px; }
.juraIndhold { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0 30px; }
.juraIndhold a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--daempet); border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); padding: 6px 10px 4px; }
.juraIndhold a:hover { color: var(--guld); border-color: var(--guld); }
.juraTabel { display: grid; gap: 0; margin: 14px 0 18px; border: 1px solid color-mix(in srgb, var(--metal) 30%, transparent); }
.juraTabel > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 12px 16px 10px; border-top: 1px solid color-mix(in srgb, var(--metal) 20%, transparent); }
.juraTabel > div:first-child { border-top: 0; }
.juraTabel b { color: var(--overskrift); }
.juraTabel span { color: var(--tekst); }
.juraTabel.smal > div { grid-template-columns: 160px minmax(0, 1fr); }
.juraSide ul { padding-left: 22px; line-height: 1.75; }
.juraSide li { margin: 4px 0; }
@media (max-width: 640px) { .juraTabel > div, .juraTabel.smal > div { grid-template-columns: 1fr; gap: 4px; } }
.loBilledKnap { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 22px 18px 18px; background: color-mix(in srgb, var(--nat2) 80%, transparent); border: 1px dashed color-mix(in srgb, var(--metal) 50%, transparent); color: var(--daempet); font-family: var(--font); cursor: pointer; text-align: center; }
.loBilledKnap b { color: var(--overskrift); letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; }
.loBilledKnap span { font-size: 14px; }
.loBilledKnap:hover { border-color: var(--guld); color: var(--tekst); }
.loBillSlaa { background: none; border: 0; color: var(--daempet); text-decoration: underline; cursor: pointer; font-family: var(--font); margin-top: 8px; }
.topSkjoldBillede { width: 64px !important; height: 64px !important; margin: -12px -10px; flex: none; }
@media (max-width: 640px) {
  .kobRaekke { flex-direction: column; align-items: stretch !important; gap: 12px; }
  .kobRaekke > div span { display: block; }
  .kobRaekke .knap { width: 100%; margin: 0 !important; text-align: center; }
}
img.topSkjoldBild { width: 44px !important; height: 44px !important; margin: 0 -2px; object-fit: contain; }
img.tilhoerSkjoldBillede { width: 72px; height: 72px; object-fit: contain; margin: 0 0 6px 12px; }
.statusBjaelke { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin: 34px auto 0; border-style: solid; border-width: 14px; border-image: url("img/ui/panel.png?v=2") 28 fill / 14px stretch; }
.statusCelle { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 8px; position: relative; }
.statusCelle + .statusCelle::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: color-mix(in srgb, var(--metal) 40%, transparent); }
.statusCelle b { font-size: 26px; font-weight: 700; color: var(--guld); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.statusCelle span { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--daempet); }
.statusCelle:first-child b { display: inline-flex; align-items: center; gap: 10px; }
.statusPrik { position: absolute; top: 12px; left: 14px; width: 8px; height: 8px; border-radius: 50%; background: #6b6655; }
.statusPrik.op { background: #7fd67a; box-shadow: 0 0 8px #7fd67a; animation: statusPuls 2.4s ease-in-out infinite; }
@keyframes statusPuls { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .statusPrik.op { animation: none; } }
@media (max-width: 640px) { .statusBjaelke { grid-template-columns: repeat(2, minmax(0, 1fr)); } .statusCelle:nth-child(3)::before { display: none; } .statusCelle b { font-size: 22px; } }
.nyGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.nyKort { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px; border-style: solid; border-width: 14px; border-image: url("img/ui/panel.png?v=2") 28 fill / 14px stretch; color: var(--tekst); transition: filter 0.2s; }
.nyKort:hover { filter: brightness(1.12) drop-shadow(0 0 10px color-mix(in srgb, var(--guld) 20%, transparent)); }
.nyKort b { font-size: 20px; color: var(--overskrift); letter-spacing: 0.04em; line-height: 1.3; }
.nyUddrag { color: var(--daempet); font-size: 15px; line-height: 1.6; }
.nyTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.nyMaerke { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 8px 2px; border: 1px solid color-mix(in srgb, var(--guld) 50%, transparent); color: var(--guld); }
.ny_update { color: #9fd0f0; border-color: #3e6a86; }
.ny_event { color: #f0b3a8; border-color: #8a4637; }
.ny_season { color: #c7a6f0; border-color: #5e3f86; }
.ny_dev { color: #a9d9a3; border-color: #46703f; }
.nyDato { font-size: 13px; color: var(--daempet); letter-spacing: 0.06em; }
.nyArtikel { margin: 0 !important; }
.nyTekst p { line-height: 1.75; margin: 0 0 14px; max-width: 72ch; }
.nyTekst .nyUnder { margin: 24px 0 10px; color: var(--guld); }
.nyListe { padding-left: 22px; line-height: 1.75; margin: 0 0 14px; }
.nyTekst a { text-decoration: underline; text-underline-offset: 3px; }
.nyArtikel .nyTekst { margin-top: 18px; }
.nyAf { margin-top: 18px; }
.nyNav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; justify-content: space-between; }
.nyForhTitel { font-size: 24px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; }
.stNyRaekke { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.stFelt input[type="text"] { background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 16px var(--font); padding: 10px 12px 8px; border-radius: var(--radius); text-transform: none; letter-spacing: 0; }
.stFelt input[type="text"]:focus { outline: none; border-color: var(--guld); }
.stTjek { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 15px; color: var(--tekst); cursor: pointer; }
.stTjek input { width: 18px; height: 18px; accent-color: var(--guld); }
.stNyHjaelp { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { .nyKort { transition: none; } }
.saesonUr { margin: 18px auto 0; max-width: 640px; color: var(--daempet); font-size: 16px; }
.saesonUr b { color: var(--guld); font-variant-numeric: tabular-nums; }
.buGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.buPlakat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 18px; text-align: center; background: linear-gradient(180deg, #2a2217, #1b160f); border: 1px solid #4a3c27; box-shadow: inset 0 0 0 4px #15110b, inset 0 0 0 5px #5b4a30, 0 12px 30px rgba(0, 0, 0, 0.45); color: #d9cba6; transition: transform 0.2s, box-shadow 0.2s; }
.buPlakat:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 4px #15110b, inset 0 0 0 5px #8a7243, 0 16px 34px rgba(0, 0, 0, 0.5); }
.buFoerst { box-shadow: inset 0 0 0 4px #15110b, inset 0 0 0 5px #c9a640, 0 0 24px rgba(227, 190, 91, 0.25), 0 12px 30px rgba(0, 0, 0, 0.45); }
.buWanted { font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 26px; letter-spacing: 0.18em; text-transform: uppercase; color: #c9a640; text-shadow: 0 2px 0 #0d0a06; }
.buBillede { position: relative; width: 120px; height: 120px; border: 3px solid #5b4a30; background: #120e09; filter: sepia(0.35) contrast(1.05); }
.buBillede img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buIngen { display: grid; place-items: center; height: 100%; font-size: 48px; color: #5b4a30; }
.buOnline { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 7px 1px; background: #1f3a1d; color: #a9e3a3; border: 1px solid #46703f; filter: none; }
.buNavn { margin-top: 8px; font-family: Merriweather, Georgia, serif; font-size: 18px; color: #f0e4c2; line-height: 1.3; }
.buUnder { font-size: 13px; color: #a89a78; }
.buFraktion { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #c9b88c; }
.buSkjold { width: 28px !important; height: 28px !important; margin: -6px -4px; }
.buPris { display: flex; flex-direction: column; align-items: center; margin-top: 6px; padding-top: 8px; border-top: 1px dashed #5b4a30; width: 100%; }
.buPris span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #a89a78; }
.buPris b { font-size: 30px; color: #e3be5b; font-variant-numeric: tabular-nums; line-height: 1.1; }
.buVagt { font-size: 12px; color: #e0a093; }
.buNote { text-align: center; margin: 26px auto 50px; max-width: 640px; }
.buTom { text-align: center; }
@media (prefers-reduced-motion: reduce) { .buPlakat { transition: none; } .buPlakat:hover { transform: none; } }
.vejGitter .status.faerdig { color: #a9d9a3; border-style: solid; border-color: #46703f; }
.vejFaerdig { opacity: 0.75; }
.stVejRaekke { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--metal) 20%, transparent); }
.stVejRaekke input, .stVejRaekke textarea { width: 100%; background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 15px var(--font); padding: 8px 10px 6px; border-radius: var(--radius); resize: vertical; }
.stVejRaekke .felter { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 640px) { .stVejRaekke { grid-template-columns: 1fr; } }
.stVejRaekke .vValg { width: 100%; min-width: 0; }
.frFiltre { margin: 0 0 14px; }
.frMaerker { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.frRekrutMaerke, .frAdgang { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 6px 1px; border: 1px solid; }
.frRekrutMaerke { color: #a9e3a3; border-color: #46703f; background: rgba(70, 112, 63, 0.15); }
.frAdgang { color: var(--daempet); border-color: color-mix(in srgb, var(--metal) 40%, transparent); }
.frRekrutStatus { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--daempet); }
.frRekrutStatus.soeger { color: #a9e3a3; }
.frRekrut .praestGitter { margin: 10px 0; }
.frRekrutForm { margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--metal) 25%, transparent); }
.frRTags .praest { cursor: pointer; font-family: var(--font); background: none; }
.kHist { grid-column: 1 / -1; }
.kHKnapper { display: flex; gap: 10px; align-items: center; margin: 12px 0 6px; }
.kHKnapper .knap { margin: 0 !important; flex: none; }
#kHGlider { flex: 1; accent-color: var(--guld); height: 6px; cursor: pointer; }
#kHGlider:disabled { opacity: 0.4; cursor: default; }
.kHListe { max-height: 360px; overflow-y: auto; margin-top: 10px; }
.kHRaekke { width: 100%; text-align: left; background: none; color: inherit; font-family: var(--font); cursor: pointer; }
.kHRaekke:hover { border-color: var(--guld); }
.vejTop { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.vejTop .status { margin: 0 !important; }
.vejOmr { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--daempet); }
.stVejRaekke { grid-template-columns: 160px minmax(0, 1fr) auto; }
footer.bund .ramme { flex-wrap: wrap; }
.dagOrd { flex: 1 0 100%; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--kant); color: var(--daempet); }
.dagOrdEt { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--guldMoerk); }
.dagOrd b { font-size: 20px; color: var(--guld); letter-spacing: 0.04em; }
.dagOrdMere { margin-left: auto; font-size: 13px; color: var(--daempet); }
.dagOrd:hover b { color: var(--guldLys); }
.dagOrd:hover .dagOrdMere { color: var(--guld); }
.wGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 50px; }
.wKort { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px 16px 14px; background: color-mix(in srgb, var(--nat2) 85%, transparent); border: 1px solid color-mix(in srgb, var(--metal) 30%, transparent); border-left: 3px solid var(--sjFarve, var(--metal)); color: var(--tekst); font-family: var(--font); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
div.wKort { cursor: default; }
button.wKort:hover { background: color-mix(in srgb, var(--guld) 6%, var(--nat2)); border-color: color-mix(in srgb, var(--guld) 50%, transparent); border-left-color: var(--sjFarve, var(--guld)); }
.wKort b { font-size: 17px; color: var(--overskrift); line-height: 1.3; }
.wSj { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sjFarve, var(--daempet)); }
.wUnder { font-size: 13px; color: var(--daempet); }
.wTekst { font-size: 14px; color: var(--tekst); line-height: 1.5; }
.sj1 { --sjFarve: #a8a28c; } .sj2 { --sjFarve: #6fbf6a; } .sj3 { --sjFarve: #4f9fd6; } .sj4 { --sjFarve: #a66be0; } .sj5 { --sjFarve: #e3a43b; } .sj6 { --sjFarve: #e05b5b; }
.wDetalje { position: relative; border-left: 3px solid var(--sjFarve, var(--guld)); }
.wDetalje .maerkat { color: var(--sjFarve, var(--guld)); }
.wTitel { font-size: 28px; letter-spacing: 0.06em; text-transform: uppercase; margin: 6px 0 10px; }
.wBesk { font-size: 17px; line-height: 1.7; max-width: 70ch; }
.wLuk { position: absolute; top: 16px; right: 16px; margin: 0 !important; }
.wStat { display: grid; grid-template-columns: 70px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; color: var(--daempet); }
.wStat b { font-size: 13px; color: var(--overskrift); text-align: right; }
.wBar { height: 6px; background: color-mix(in srgb, var(--metal) 25%, transparent); border-radius: 3px; overflow: hidden; }
.wFyld { display: block; height: 100%; background: linear-gradient(90deg, var(--guldMoerk), var(--guld)); }
.wModstand { margin-top: 8px; }
.wModstand .praestGitter { gap: 6px; }
.wModstand.daarlig .praest { color: #f0b3a8; border-color: #6e3b2f; background: rgba(192, 57, 43, 0.1); }
.wModstand.god .praest { color: #a9d9a3; border-color: #46703f; background: rgba(70, 112, 63, 0.12); }
.wFjende .praest { font-size: 12px; padding: 4px 8px 2px; }
.wBoss { border-left-color: #e05b5b; }
.wNoder .wNode { margin-bottom: 6px; }
.wSide .svTyper { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .wKort { transition: none; } }
.wDetalje { scroll-margin-top: 90px; }
.kobTjek { display: block; margin-top: 4px; font-size: 0.85em; opacity: 0.7; }
.venter { opacity: 0; transform: translateY(14px); }
.glider { transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) !important; }
.knap { transition: filter 0.18s, transform 0.12s, color 0.18s; }
.knap:active:not(:disabled) { transform: translateY(1px); }
.fane { transition: color 0.18s, border-color 0.18s; }
.merke { display: inline-flex; align-items: center; gap: 6px; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 6px rgba(0, 0, 0, 0.35); transition: transform 0.15s, box-shadow 0.15s; }
.merke::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; box-shadow: 0 0 6px currentColor; }
.merke:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 10px rgba(0, 0, 0, 0.45); }
.merkeBooster { color: #fff; border-color: #f47fff; background: linear-gradient(100deg, #6d2a86, #b648cf, #5b3bc9, #b648cf, #6d2a86); background-size: 300% 100%; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); animation: boosterGlimt 6s linear infinite; }
.merkeBooster::before { background: #ffd6fb; box-shadow: 0 0 8px #f47fff; }
@keyframes boosterGlimt { to { background-position: 300% 0; } }
.merkePatreon { background-image: linear-gradient(180deg, rgba(255, 140, 110, 0.16), rgba(255, 95, 69, 0.05)); }
.merkeDiscord { background-image: linear-gradient(180deg, rgba(120, 132, 255, 0.18), rgba(88, 101, 242, 0.05)); }
.merkeDiscord.medRolle { color: color-mix(in srgb, var(--rolle) 70%, #fff); border-color: var(--rolle); background-image: linear-gradient(180deg, color-mix(in srgb, var(--rolle) 22%, transparent), color-mix(in srgb, var(--rolle) 6%, transparent)); }
#sideListe .kontakt { cursor: default; }
#sideListe .vValg, #sideListe select { flex: none; min-width: 190px; }
@media (max-width: 700px) { #sideListe .kontakt { flex-direction: column; align-items: stretch; } #sideListe .vValg, #sideListe select { min-width: 0; width: 100%; } }
:root[data-bevaeg="lav"] *, :root[data-bevaeg="lav"] *::before, :root[data-bevaeg="lav"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
:root[data-bevaeg="lav"] { scroll-behavior: auto; }
:root[data-bevaeg="lav"] .merkeBooster { animation: none !important; background-position: 50% 0; }
html { background: var(--nat); }
@keyframes sideInd { from { opacity: 0; } }
.merke::before { position: relative; top: -1px; }
.kobKnapper { display: flex; gap: 10px; flex: none; justify-content: flex-end; }
.kobKnapper .knap { margin: 0 !important; min-width: 116px; text-align: center; justify-content: center; }
.kobRaekke > div:first-child { flex: 1; min-width: 0; }
@media (max-width: 700px) { .kobKnapper { flex-direction: column; } .kobKnapper .knap { width: 100%; } }
:root.fadeInd body > :not(header.top) { animation: sideInd 0.24s ease-out; }
:root.fadeUd body > :not(header.top) { opacity: 0; transition: opacity 0.14s ease-in; }
.tpLinks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tpLinks .felt { width: 100%; box-sizing: border-box; background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 15px var(--font); padding: 10px 12px 8px; border-radius: var(--radius); }
.tpLinks .felt:focus { outline: none; border-color: var(--guld); }
@media (max-width: 700px) { .tpLinks { grid-template-columns: 1fr; } }
#faneTilpas .kontakt select, #faneTilpas .vValg { flex: none; min-width: 240px; }
@media (max-width: 700px) { #faneTilpas .kontakt { flex-direction: column; align-items: stretch; } #faneTilpas .kontakt select, #faneTilpas .vValg { min-width: 0; width: 100%; } }
.webTitel { display: block; margin: 2px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--guld); }
.profilLinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.profilLink { --lf: var(--metal); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--overskrift); border: 1px solid color-mix(in srgb, var(--lf) 70%, transparent); background: color-mix(in srgb, var(--lf) 14%, transparent); border-radius: var(--radius); text-decoration: none; transition: background 0.15s, transform 0.15s; }
.profilLink::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lf); position: relative; top: -1px; }
.profilLink:hover { background: color-mix(in srgb, var(--lf) 26%, transparent); transform: translateY(-1px); }
.link-discord { --lf: #5865f2; } .link-roblox { --lf: #e2e2e2; } .link-patreon { --lf: #ff5f45; } .link-youtube { --lf: #ff3b30; } .link-twitch { --lf: #9146ff; } .link-x { --lf: #b0b0b0; } .link-tiktok { --lf: #25f4ee; } .link-bluesky { --lf: #1185fe; }
.tpChips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tpChip { font: 600 13px var(--font); letter-spacing: 0.04em; color: var(--overskrift); background: color-mix(in srgb, var(--guld) 12%, transparent); border: 1px solid color-mix(in srgb, var(--guld) 55%, transparent); border-radius: var(--radius); padding: 7px 12px 5px; cursor: pointer; transition: opacity 0.15s, background 0.15s; }
.tpChip:hover { background: color-mix(in srgb, var(--guld) 22%, transparent); }
.tpChip.skjult { opacity: 0.45; background: transparent; border-style: dashed; text-decoration: line-through; }
.harFarve .webTitel { color: var(--profilFarve); }
.harFarve::before { content: ""; position: absolute; left: -4px; right: -4px; top: -4px; height: 3px; background: var(--profilFarve); box-shadow: 0 0 12px color-mix(in srgb, var(--profilFarve) 60%, transparent); z-index: 1; }
.harFarve { position: relative; }
.harFarve .profilBillede { border-color: var(--profilFarve) !important; }
.profilOm { margin: 16px 0 0; max-width: 560px; }
.profilOmTitel { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--guld); margin-bottom: 4px; }
.harFarve .profilOmTitel { color: var(--profilFarve); }
.profilOm p { margin: 0; color: var(--tekst); font-style: italic; }
.vitrineGitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.vitrineTing { display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border: 1px solid color-mix(in srgb, var(--guld) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--guld) 10%, transparent), transparent); border-radius: var(--radius); }
.vitrineTing b { color: var(--overskrift); font-size: 17px; }
.vitrineTing span:last-child { color: var(--daempet); font-size: 13px; }
.vitrineIkon { font-size: 20px; color: var(--guld); line-height: 1; }
.vitrinePet { border-color: color-mix(in srgb, #7fc8e0 55%, transparent); background: linear-gradient(180deg, rgba(127, 200, 224, 0.1), transparent); }
.vitrinePet .vitrineIkon { color: #7fc8e0; }
.tpFarver { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tpFarve { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--font); color: var(--overskrift); background: transparent; border: 1px solid color-mix(in srgb, var(--metal) 40%, transparent); border-radius: var(--radius); padding: 7px 12px 5px; cursor: pointer; }
.tpFarve.valgt { border-color: var(--guld); background: color-mix(in srgb, var(--guld) 14%, transparent); }
.tpFarvePrik { width: 14px; height: 14px; border-radius: 50%; position: relative; top: -1px; border: 1px solid rgba(255, 255, 255, 0.25); }
.tpFarvePrik.std { background: var(--metal); }
.tpFarvePrik.fraktion { background: conic-gradient(#c0453b, #e3be5b, #3fa56b, #3b7fd1, #8a3bd1, #c0453b); }
.tpOm { width: 100%; box-sizing: border-box; margin-top: 12px; resize: vertical; background: var(--nat); border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); color: var(--overskrift); font: 400 16px var(--font); padding: 10px 12px 8px; border-radius: var(--radius); }
.tpOm:focus { outline: none; border-color: var(--guld); }
#faneTilpas .kontakt .vValg { min-width: 240px; }
.frDiscord { display: inline-flex; margin-top: 10px; }
.harFarve #sMaerkat { display: inline-block; margin-top: 4px; }
.wPraest { cursor: default; }
.wTitelBeloen { font-size: 12px; letter-spacing: 0.08em; color: var(--guld); }
.wSjBar { height: 4px; background: color-mix(in srgb, var(--metal) 25%, transparent); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.wSjBar span { display: block; height: 100%; background: var(--sjFarve, var(--guld)); }
.wPct { font-size: 12px; color: var(--sjFarve, var(--daempet)); }
.wSkjult b { font-style: italic; opacity: 0.8; }
.evListe { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 14px; }
.evKort { --ev: var(--guld); display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border: 1px solid color-mix(in srgb, var(--ev) 45%, transparent); border-left: 3px solid var(--ev); background: linear-gradient(180deg, color-mix(in srgb, var(--ev) 10%, transparent), transparent); border-radius: var(--radius); }
.evKort b { color: var(--overskrift); font-size: 17px; }
.evArt { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ev); }
.evUnder { font-size: 13px; color: var(--daempet); }
.evTekst { margin: 4px 0 0; font-size: 14px; }
.evUr { font-size: 14px; font-weight: 600; color: var(--ev); font-variant-numeric: tabular-nums; margin-top: 4px; }
.evBoss { --ev: #e05b5b; } .evBrud { --ev: #a66be0; } .evRaid { --ev: #d9883b; } .evTurnering { --ev: #4f9fd6; } .evKrig { --ev: #c0453b; } .evFest { --ev: #6fbf6a; } .evUdv { --ev: #7fc8e0; }
.evIgang { box-shadow: 0 0 0 1px var(--ev), 0 0 18px color-mix(in srgb, var(--ev) 35%, transparent); }
#stBegListe .stVejRaekke { grid-template-columns: 220px minmax(0, 1fr) auto; }
#stBegListe input[type="datetime-local"], #stBegListe input[type="number"] { color-scheme: dark; }
:root[data-tema="lys"] #stBegListe input[type="datetime-local"] { color-scheme: light; }
@media (max-width: 640px) { #stBegListe .stVejRaekke { grid-template-columns: 1fr; } }
.soegKnap { margin-right: 8px; }
.soegBag { position: fixed; inset: 0; z-index: 200; background: rgba(5, 4, 6, 0.6); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; opacity: 0; transition: opacity 0.15s; }
.soegBag.vis { opacity: 1; }
.soegBoks { width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; border-style: solid; border-width: 22px; border-image: url("img/ui/panel.png?v=2") 28 fill / 22px stretch; padding: 6px; transform: translateY(-8px); transition: transform 0.18s; }
.soegBag.vis .soegBoks { transform: none; }
.soegInput { width: 100%; box-sizing: border-box; background: var(--nat); border: 1px solid color-mix(in srgb, var(--guld) 50%, transparent); color: var(--overskrift); font: 400 18px var(--font); padding: 12px 14px 10px; border-radius: var(--radius); }
.soegInput:focus { outline: none; border-color: var(--guld); }
.soegHjaelp { margin: 10px 4px 2px; font-size: 13px; color: var(--daempet); }
.soegSvar { overflow-y: auto; margin-top: 6px; }
.soegGruppe { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--guld); margin: 12px 4px 4px; }
.soegRes { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 6px; border-radius: var(--radius); color: var(--overskrift); text-decoration: none; border: 1px solid transparent; }
.soegRes span { font-size: 13px; color: var(--daempet); }
.soegRes:hover, .soegRes.valgt { background: color-mix(in srgb, var(--guld) 12%, transparent); border-color: color-mix(in srgb, var(--guld) 40%, transparent); }
body.soegAaben { overflow: hidden; }
.stGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.stoKort { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid color-mix(in srgb, var(--metal) 35%, transparent); background: color-mix(in srgb, var(--nat2) 80%, transparent); border-radius: var(--radius); color: var(--overskrift); text-decoration: none; transition: transform 0.15s, border-color 0.15s; }
.stoKort:hover { transform: translateY(-2px); border-color: var(--guld); }
.stoPatron { border-color: color-mix(in srgb, #ff5f45 45%, transparent); }
.stoBooster { border-color: color-mix(in srgb, #f47fff 45%, transparent); }
.stoBillede { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--metal); flex: none; background: var(--nat); }
.stoKort b { display: block; font-size: 17px; margin-bottom: 6px; }
.stoKort .merker { margin-bottom: 6px; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/opendyslexic-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "OpenDyslexic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/opendyslexic-latin-700-normal.woff2") format("woff2"); }
:root[data-skrift="klar"] { --font: "Atkinson Hyperlegible", "Trebuchet MS", sans-serif; }
:root[data-skrift="dysleksi"] { --font: "OpenDyslexic", "Comic Sans MS", sans-serif; }
:root[data-skrift="dysleksi"] body { line-height: 1.75; }
:root[data-skrift] .buWanted, :root[data-skrift] .buNavn { font-family: var(--font); }
:root[data-tekst="stor"] body > :not(header.top):not(.soegBag) { zoom: 1.12; }
:root[data-tekst="stoerre"] body > :not(header.top):not(.soegBag) { zoom: 1.25; }
:root[data-tekst] body:has(#kVindue) > * { zoom: 1; }
:root[data-skrift="dysleksi"] body *, :root[data-skrift="dysleksi"] body *::before, :root[data-skrift="dysleksi"] body *::after { letter-spacing: 0.01em !important; }
:root[data-skrift="dysleksi"] nav.menu a { font-size: 12px; padding-left: 9px; padding-right: 9px; }
:root[data-skrift="dysleksi"] .maerke { font-size: 16px; }
@media (min-width: 761px) and (max-width: 1440px) {
  :root[data-skrift="dysleksi"] .menuKnap, :root[data-tekst="stoerre"] .menuKnap { display: inline-block; }
  :root[data-skrift="dysleksi"] nav.menu, :root[data-tekst="stoerre"] nav.menu { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--nat2); border-bottom: 1px solid var(--kant); padding: 8px 24px 16px; }
  :root[data-skrift="dysleksi"] nav.menu.aaben, :root[data-tekst="stoerre"] nav.menu.aaben { display: flex; }
}
.trInd { font-size: 18px; margin-top: 16px; }
.trUd { margin-top: 14px; min-height: 64px; padding: 16px 18px 14px; border: 1px solid color-mix(in srgb, var(--guld) 40%, transparent); background: color-mix(in srgb, var(--guld) 6%, transparent); border-radius: var(--radius); }
.trLinje, .trEng { font-size: 22px; line-height: 1.9; color: var(--overskrift); font-style: italic; }
.trOrd { position: relative; cursor: help; border-bottom: 1px solid color-mix(in srgb, var(--guld) 35%, transparent); color: var(--guld); }
.trOrd:hover, .trOrd:focus, .trOrd.vist { outline: none; border-bottom-color: var(--guld); }
.trOrd[data-eng]:hover::after, .trOrd[data-eng]:focus::after, .trOrd.vist::after { content: attr(data-eng); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; font: 600 13px var(--font); font-style: normal; letter-spacing: 0.04em; color: var(--overskrift); background: var(--nat2); border: 1px solid var(--guld); padding: 3px 8px 1px; border-radius: var(--radius); pointer-events: none; z-index: 3; }
.trUkendt { border-bottom-style: dotted; opacity: 0.85; }
@font-face { font-family: "Sorveth Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/sorveth-script.woff2?v=2") format("woff2"); }
.svSkrift { font-family: "Sorveth Script", var(--font); color: var(--guld); font-weight: 400; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.6; }
:root[data-svskrift="fra"] .svSkrift { display: none !important; }
.trSkrift { display: block; font-size: 46px; margin: 0 0 6px; }
.dagOrd .svSkrift { font-size: 32px; line-height: 1; margin: 0 6px; position: relative; top: 6px; }
@font-face { font-family: "Voxium"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/voxium.woff2?v=3") format("woff2"); }
@font-face { font-family: "Voxium"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/voxium-bold.woff2?v=1") format("woff2"); }
:root { --fontTitel: "Voxium", "Josefin Sans", sans-serif; }
h1, h2, h3, .banner, .maerke, .mesterNavn, footer.bund .navn, .overtitel, nav.menu a, .knap, .fane, .maerkat, .tavle, .dagOrdEt, .lilleLink, .evArt, .wSj, .soegGruppe, .profilOmTitel, .webTitel { font-family: var(--fontTitel); font-weight: 700; font-synthesis: none; font-kerning: normal; }
.helt h1:not(.banner), .mesterNavn { font-weight: 400; }
.kort h3 { font-size: 21px; }
:root[data-skrift] { --fontTitel: var(--font); }
:root[data-skrift] h1, :root[data-skrift] h2, :root[data-skrift] h3, :root[data-skrift] .banner, :root[data-skrift] .maerke, :root[data-skrift] .mesterNavn, :root[data-skrift] footer.bund .navn { font-weight: 700; }
:root[data-skrift] .overtitel, :root[data-skrift] nav.menu a, :root[data-skrift] .knap, :root[data-skrift] .fane, :root[data-skrift] .maerkat { font-weight: 600; }
.skLaer { font-family: "Sorveth Script", var(--font); letter-spacing: 0 !important; text-transform: none !important; font-weight: 400 !important; color: var(--guld); line-height: 1.5; }
.skKort { margin-bottom: 20px; }
.skDemo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 18px 0 4px; }
.skStor { font-size: 52px; }
.skKaempe { font-size: 72px; }
.skGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.skBogstav { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 10px 12px; background: color-mix(in srgb, var(--nat2) 80%, transparent); border: 1px solid color-mix(in srgb, var(--metal) 30%, transparent); border-radius: var(--radius); color: var(--overskrift); font-family: var(--font); cursor: pointer; text-align: center; transition: border-color 0.15s, background 0.15s; }
.skBogstav:hover, .skBogstav.aaben { border-color: var(--guld); background: color-mix(in srgb, var(--guld) 8%, var(--nat2)); }
.skVokal { cursor: default; }
.skGlyf { font-size: 54px; line-height: 1.15; min-height: 70px; display: flex; align-items: center; }
.skBogstav b { font-size: 18px; }
.skLyd { font-size: 12px; color: var(--daempet); }
.skEks { font-size: 13px; color: var(--tekst); }
.skEks .skLaer { font-size: 26px; margin-right: 4px; }
.skSpil { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.skOpgave, .skUd { display: flex; justify-content: center; align-items: center; min-height: 130px; border: 1px solid color-mix(in srgb, var(--guld) 35%, transparent); background: color-mix(in srgb, var(--guld) 5%, transparent); border-radius: var(--radius); }
.skValg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.skValgKnap { display: flex !important; flex-direction: column; align-items: center; gap: 2px; margin: 0 !important; text-transform: none !important; letter-spacing: 0.04em !important; }
.skValgKnap span { font-family: var(--font); font-size: 13px; opacity: 0.8; }
.skValgKnap.ret { filter: drop-shadow(0 0 10px rgba(111, 191, 106, 0.6)); color: #a8e0a0 !important; }
.skValgKnap.forkert { filter: drop-shadow(0 0 10px rgba(224, 91, 91, 0.6)); color: #f0a8a0 !important; }
.skSvar { min-height: 1.4em; margin: 0; font-weight: 600; }
.skSvar.godt { color: #8fd08a; } .skSvar.skidt { color: #e89a8f; }
.skNiv { flex-direction: row !important; align-items: center; gap: 10px; }
.skUd { margin-top: 12px; }
.skDele { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.skDel { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--metal) 30%, transparent); border-radius: var(--radius); font-size: 12px; color: var(--daempet); }
.skDel .skLaer { font-size: 34px; line-height: 1.3; }
.skDel b { color: var(--overskrift); font-size: 14px; }
.skMellem { width: 14px; }
@media (max-width: 560px) { .skValg { grid-template-columns: 1fr; } .skKaempe { font-size: 56px; } }
.merkeOk { color: #9fe0b5; border-color: #3fa56b; background: rgba(63, 165, 107, 0.14); }
.merkeAdvar { color: #f0a8a0; border-color: #c0453b; background: rgba(192, 69, 59, 0.14); }
nav.menu.aaben { max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) { .faner { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .faner::-webkit-scrollbar { display: none; } .faner .fane { flex: 0 0 auto; } }
@media (max-width: 520px) { .faner { flex-wrap: wrap; overflow: visible; } .faner .fane { flex: 1 1 40%; text-align: center; } }
@media (max-width: 520px) { .kontoLink { max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.vejGitter .status.igang { color: #9fc8f0; border-style: solid; border-color: #3b7fd1; display: inline-flex; align-items: center; gap: 7px; }
.vejGitter .status.igang::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6fb0f0; box-shadow: 0 0 0 0 rgba(111, 176, 240, 0.6); animation: vejPuls 2s ease-out infinite; }
@keyframes vejPuls { 0% { box-shadow: 0 0 0 0 rgba(111, 176, 240, 0.6); } 70% { box-shadow: 0 0 0 7px rgba(111, 176, 240, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 176, 240, 0); } }
:root[data-bevaeg="lav"] .vejGitter .status.igang::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .vejGitter .status.igang::before { animation: none; } }
.vejIgang { border-color: color-mix(in srgb, #3b7fd1 55%, var(--kant)); }
.dcStatus { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dcLinje { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dcPrik { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dcJa { background: #3fa56b; box-shadow: 0 0 6px rgba(63, 165, 107, 0.7); }
.dcVent { background: #e3be5b; }
.dcNej { background: #8a8a8a; }
.dcRoller { display: flex; flex-wrap: wrap; gap: 5px; }
.dcRolle { --rolle: #8a8a8a; font-size: 12px; padding: 2px 8px 2px 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rolle) 55%, transparent); background: color-mix(in srgb, var(--rolle) 10%, transparent); color: var(--tekst); position: relative; }
.dcRolle::before { content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--rolle); }
.statusBjaelke.medDc { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 920px; }
a.statusCelle { text-decoration: none; transition: background 0.2s; }
a.statusCelle:hover { background: color-mix(in srgb, #5865f2 10%, transparent); }
a.statusCelle:hover b { color: #b7bdf8; }
@media (max-width: 640px) { .statusBjaelke.medDc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .statusBjaelke.medDc .stDiscord { grid-column: 1 / -1; } .statusBjaelke.medDc .stDiscord::before { left: 18%; right: 18%; top: 0; bottom: auto; width: auto; height: 1px; } }
.svOrdSkrift { display: block; font-size: 46px; line-height: 1.1; margin: 0 0 6px; }
.svRaekkeSkrift { display: block; font-size: 22px; line-height: 1.2; margin-top: 2px; opacity: 0.85; }
.svEksSkrift { flex-basis: 100%; font-size: 26px; line-height: 1.2; opacity: 0.8; }
.svOrdRaekke .svListeSkrift { color: var(--guld); font-size: 22px; line-height: 1; opacity: 0.8; }
.svDagSkrift { display: block; font-size: 34px; line-height: 1.2; margin-top: 4px; }
.loSvSkrift { display: block; text-align: center; font-size: clamp(26px, 4vw, 40px); line-height: 1.2; margin: -6px auto 10px; opacity: 0.85; }
.frREjer { color: #f0c78a; border-left: 2px solid #c9952e; padding-left: 10px; margin: 4px 0 10px; }
.ny_web { color: #9fe0d4; border-color: #2f7a6e; }
.logFaner { margin: 0 0 18px; justify-content: center; }
.logListe { display: flex; flex-direction: column; gap: 18px; }
.logKort .logTitel { margin: 10px 0 6px; }
.logKort .logTitel a { color: inherit; text-decoration: none; }
.logKort .logTitel a:hover { color: var(--guld); }
.logTekst ul.nyListe { margin: 0 0 12px; }
.logAf { margin: 8px 0 0; color: var(--svag); }
.dcStatus .dcLinje { display: flex; }
.dcStatus .dcPrik { display: inline-block; }
.dcStatus .dcRoller { display: flex; }
.dcStatus .dcRolle { display: inline-block; flex: 0 0 auto; width: auto; }
@media (max-width: 420px) { header.top .ramme { gap: 8px; } .hoejre { gap: 5px; } .soegKnap { margin-right: 0; } .maerke { font-size: 15px; letter-spacing: 0.14em; gap: 8px; } .temaKnap, .menuKnap { padding: 0 8px; letter-spacing: 0.08em; } .kontoLink { letter-spacing: 0.08em; padding-left: 8px; padding-right: 8px; } }
body { background: transparent; }
:root { --dag: 0; }
html { background: var(--nat); background-image: var(--baggrund); background-attachment: fixed; }
.vxHimmel { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
:root[data-himmel="fra"] .vxHimmel { display: none; }
.vxRuner { position: absolute; left: 50%; top: 50%; width: min(120vh, 1150px, 150vw); aspect-ratio: 1; transform: translate(-50%, -50%); }
.vxRune { position: absolute; inset: 0; opacity: 0; transition: opacity 5s ease; }
.vxRune.synlig { opacity: 0.42; }
.vxLag { position: absolute; inset: 0; background-color: var(--farve); -webkit-mask: var(--billede) center / contain no-repeat; mask: var(--billede) center / contain no-repeat; will-change: transform; animation: vxSnurr 260s linear infinite; }
.vxLag_midt { inset: 9%; animation-duration: 190s; animation-direction: reverse; opacity: 0.9; }
.vxLag_indre { inset: 26%; animation-duration: 140s; opacity: 0.95; }
.vxLag.modsat { animation-direction: reverse; }
@keyframes vxSnurr { to { transform: rotate(360deg); } }

:root[data-tema="lys"] .vxRune.synlig { opacity: 0.45; }
@media (prefers-color-scheme: light) { :root:not([data-tema="moerk"]) .vxRune.synlig { opacity: 0.45; } }
:root[data-bevaeg="lav"] .vxLag { animation: none; }
:root[data-bevaeg="lav"] .vxRune { transition: none; }
.vxGry, .vxSkum { position: absolute; inset: 0; }
.vxGry { background: radial-gradient(90vw 60vh at 15% -10%, rgba(255, 178, 110, 0.22), transparent 70%), linear-gradient(180deg, rgba(255, 150, 100, 0.10), rgba(255, 200, 140, 0.03) 60%, transparent); opacity: calc(1 - var(--dag)); }
.vxSkum { background: radial-gradient(90vw 70vh at 85% 115%, rgba(120, 80, 220, 0.30), transparent 70%), linear-gradient(180deg, rgba(40, 20, 80, 0.30), rgba(70, 18, 50, 0.45) 65%, rgba(10, 6, 26, 0.65)); opacity: var(--dag); }
.vxHjoerne { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(10px); }
.vxHjoerne.v { left: -30vmax; top: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, #ffc46a calc((1 - var(--dag)) * 100%), #6a4cd8) 0, transparent 100%); opacity: 0.22; }
.vxHjoerne.h { right: -30vmax; bottom: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, #ffb070 calc((1 - var(--dag)) * 100%), #8a6cff) 0, transparent 100%); opacity: 0.2; }
.vxDok { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; z-index: -1; pointer-events: none; }
:root[data-himmel="fra"] .vxDok { display: none; }
.vxSol { position: absolute; top: 70px; left: max(-90px, calc(50% - 900px)); width: 420px; height: 420px; }
.vxSol::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 180, 0.95) 0 9%, rgba(255, 205, 110, 0.85) 13%, rgba(255, 170, 80, 0.32) 22%, rgba(255, 150, 70, 0.12) 38%, transparent 68%); }
.vxSol::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 210, 130, 0.22) 0 2deg, transparent 2deg 15deg); -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 30%, transparent 70%); mask: radial-gradient(circle, transparent 0 22%, #000 30%, transparent 70%); animation: vxSnurr 300s linear infinite; }
.vxMaane { position: absolute; right: max(-60px, calc(50% - 880px)); width: 380px; height: 380px; }
.vxMaane::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(190, 200, 255, 0.28) 0 14%, rgba(150, 140, 255, 0.12) 30%, transparent 68%); }
.vxMaane::after { content: ""; position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fbf8ee 0 30%, #ddd7c6 62%, #b7b0a0 100%); -webkit-mask: radial-gradient(circle at 72% 40%, transparent 0 40%, #000 41%); mask: radial-gradient(circle at 72% 40%, transparent 0 40%, #000 41%); filter: drop-shadow(0 0 14px rgba(220, 225, 255, 0.55)); }
:root[data-bevaeg="lav"] .vxSol::after { animation: none; }
header.top { background: color-mix(in srgb, var(--nat) 80%, transparent); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
footer.bund { background: color-mix(in srgb, var(--nat) 80%, transparent); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
section.blok:not(.moerk) { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nat) 26%, transparent) 14%, color-mix(in srgb, var(--nat) 26%, transparent) 86%, transparent); }
.helt p, .blok > .ramme > p, .blok .overtitel, .blok .lille, .citat, .citat * { text-shadow: 0 0 3px rgba(0, 0, 0, 0.65), 0 1px 16px rgba(0, 0, 0, 0.9); }
:root[data-tema="lys"] .helt p, :root[data-tema="lys"] .blok > .ramme > p, :root[data-tema="lys"] .blok .overtitel, :root[data-tema="lys"] .blok .lille { text-shadow: 0 0 3px rgba(255, 250, 235, 0.8), 0 1px 14px rgba(255, 248, 230, 0.95); }
@media (prefers-color-scheme: light) { :root:not([data-tema="moerk"]) .helt p, :root:not([data-tema="moerk"]) .blok > .ramme > p, :root:not([data-tema="moerk"]) .blok .overtitel, :root:not([data-tema="moerk"]) .blok .lille { text-shadow: 0 0 3px rgba(255, 250, 235, 0.8), 0 1px 14px rgba(255, 248, 230, 0.95); } }
@media (max-width: 760px) { .stVejRaekke, #stBegListe .stVejRaekke { grid-template-columns: minmax(0, 1fr); } .stVejRaekke > .felter:first-child { flex-direction: row; flex-wrap: wrap; } .stVejRaekke > .felter:first-child > * { flex: 1 1 140px; min-width: 0; } .stVejRaekke .stHurtig { display: flex; flex-wrap: wrap; gap: 6px; } }