:root {
  --ground: #F5F7FA;
  --ink: #0C1826;
  --muted: #47586B;
  --nav-link: #33484E;
  --petrol: #177C90;
  --petrol-deep: #055161;
  --mint: #2AA3BD;
  --gold: #DCDB1D;
  --gold-light: #EDECA0;
  --gold-ink: #6B6A12;
  --err: #B4423A;
  --line: rgba(12, 24, 38, 0.12);
  --glass: rgba(255, 255, 255, 0.68);
  --glass-border: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 20px 50px -30px rgba(12, 24, 38, 0.35);
  --dark-shadow: 0 30px 70px -35px rgba(11, 36, 64, 0.8);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}
a { color: var(--petrol); text-decoration: none; }
a:hover { color: var(--petrol-deep); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }

/* ---- baggrund ---- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; }
.blob.b1 { top: -180px; left: -140px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(23,124,144,0.30), rgba(23,124,144,0)); filter: blur(60px); }
.blob.b2 { top: 140px; right: -180px; width: 580px; height: 580px; background: radial-gradient(circle, rgba(237,236,160,0.32), rgba(237,236,160,0)); filter: blur(65px); }
.gridlines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(12,24,38,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(12,24,38,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}
.page { position: relative; z-index: 1; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

/* ---- navigation ---- */
.topbar { display: flex; justify-content: center; padding: 22px 14px 0; }
.navpill {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 12px 40px -18px rgba(12,24,38,0.22);
  border-radius: 999px;
  padding: 10px 12px 10px 20px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand b { font-weight: 620; font-size: 15.5px; letter-spacing: -0.2px; }
.navlinks { display: flex; align-items: center; gap: 22px; font-size: 14.5px; font-weight: 500; }
.navlinks a { color: var(--nav-link); }
.navlinks a.active { color: var(--ink); font-weight: 700; }
.btn { display: inline-block; border: 0; cursor: pointer; font: inherit; font-weight: 600; border-radius: 999px; }
.btn-dark { background: var(--ink); color: var(--ground); padding: 12px 24px; font-size: 14.5px; box-shadow: 0 8px 24px -10px rgba(12,24,38,0.55); }
.btn-dark:hover { background: #16304A; color: var(--ground); }
.btn-big { padding: 16px 32px; font-size: 16px; }
.btn-glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.95);
  color: var(--ink); padding: 15px 30px; font-size: 16px;
  box-shadow: 0 10px 30px -16px rgba(12,24,38,0.3);
}
.btn-glass:hover { color: var(--ink); background: rgba(255,255,255,0.9); }
.btn-light { background: var(--ground); color: var(--ink); padding: 15px 30px; font-size: 15px; }
.btn-light:hover { background: #FFFFFF; color: var(--ink); }

/* ---- hero ---- */
.hero { padding-top: clamp(64px, 9vw, 96px); padding-bottom: clamp(36px, 5vw, 56px); }
.hero.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px; padding: 7px 16px;
  font-size: 13px; font-weight: 600; color: var(--petrol);
  box-shadow: 0 6px 20px -12px rgba(12,24,38,0.25);
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
h1 {
  font-weight: 650;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 22px 0 0;
  text-wrap: balance;
}
h1 em, h2 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--petrol);
}
.lead { color: var(--muted); font-size: clamp(16px, 2vw, 18.5px); font-weight: 500; max-width: 62ch; margin: 20px 0 0; }
.hero.center .lead { margin-left: auto; margin-right: auto; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.hero.center .cta-row { justify-content: center; }

h2.section { font-weight: 650; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.02em; margin: 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.section-block { padding-top: clamp(64px, 9vw, 104px); }

/* ---- marquee ---- */
.marquee {
  width: 100%; padding: clamp(34px, 5vw, 54px) 0 clamp(10px, 2vw, 22px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee-half { display: flex; align-items: center; gap: 72px; padding-right: 72px; flex-shrink: 0; }
.marquee img {
  height: 34px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1) opacity(0.6);
  mix-blend-mode: multiply;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- kort ---- */
.glass-card {
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--card-shadow);
  padding: 26px 28px;
}
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--petrol); }
.kicker.gold { color: var(--gold-ink); }

/* ---- events ---- */
.event-row {
  display: flex; align-items: center; gap: 22px;
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 22px; padding: 20px 26px;
  box-shadow: 0 18px 46px -30px rgba(12,24,38,0.4);
}
.date-block {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
  background: linear-gradient(160deg, var(--petrol), var(--petrol-deep));
  color: #EAF3FA; border-radius: 14px; padding: 10px 16px;
}
.date-block b { font-weight: 620; font-size: 24px; line-height: 1; }
.date-block small { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; }
.event-info { flex-grow: 1; min-width: 0; }
.event-info h3 { font-weight: 620; font-size: 19px; letter-spacing: -0.3px; margin: 0; }
.event-info p { font-size: 14px; color: var(--muted); margin: 3px 0 0; }
.pill { display: inline-block; border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill-mint { background: rgba(42,163,189,0.14); color: var(--petrol); }
.pill-gold { background: rgba(220,219,29,0.16); color: var(--gold-ink); }
.event-list { display: flex; flex-direction: column; gap: 18px; }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 999px; padding: 9px 18px;
  font-size: 13px; font-weight: 600; color: var(--nav-link);
}
.chip:hover { color: var(--ink); }
.chip.active { background: var(--ink); color: var(--ground); border-color: var(--ink); font-weight: 700; }

/* ---- medlemmer ---- */
.member-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.member-card {
  display: flex; align-items: center; gap: 15px;
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 18px 20px;
  box-shadow: 0 14px 40px -30px rgba(12,24,38,0.45);
}
.avatar {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px;
  background: linear-gradient(160deg, var(--petrol), var(--petrol-deep));
  color: #EAF3FA;
  display: flex; align-items: center; justify-content: center;
  font-weight: 620; font-size: 18px;
}
.member-card b { font-weight: 700; font-size: 15px; display: block; }
.member-card small { font-size: 12.5px; color: var(--muted); }
.searchbar {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 999px; padding: 6px 8px 6px 22px;
  max-width: 560px;
  box-shadow: 0 12px 36px -22px rgba(12,24,38,0.35);
}
.searchbar input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); outline: none; padding: 10px 0; }
.searchbar button { flex-shrink: 0; }

/* ---- mørke paneler ---- */
.dark-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, #052A33, var(--petrol));
  border-radius: 28px;
  padding: 44px 48px;
  color: var(--ground);
  box-shadow: var(--dark-shadow);
}
.dark-panel .glow { position: absolute; top: -80px; right: 80px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(42,163,189,0.4), rgba(42,163,189,0)); filter: blur(35px); }
.dark-panel > * { position: relative; }
.dark-panel h2 { font-weight: 650; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.03em; margin: 0; color: var(--ground); }
.dark-panel h2 em { color: var(--gold-light); }
.dark-panel p { color: #B3CCE0; font-size: 16px; max-width: 58ch; }
.dark-flex { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* ---- footer ---- */
footer.site { margin-top: 84px; padding: 0 0 34px; position: relative; z-index: 1; }
.ghost {
  font-weight: 650;
  font-size: clamp(40px, 8.5vw, 104px);
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: rgba(12,24,38,0.06);
  white-space: nowrap; overflow: hidden;
  user-select: none;
}
.foot-row {
  display: flex; flex-wrap: wrap; gap: 12px 36px; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 22px; margin-top: -14px;
  font-size: 13.5px; color: var(--muted);
}
.foot-row b { color: var(--ink); font-weight: 700; }
.newsletter-mini { display: flex; gap: 8px; flex-wrap: wrap; }
.newsletter-mini input {
  font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 18px; min-width: 220px;
  background: rgba(255,255,255,0.8); color: var(--ink);
}

/* ---- formular ---- */
.form-card {
  background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  box-shadow: var(--card-shadow);
  padding: 28px 30px 30px;
}
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; margin-top: 30px; }
.form-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid rgba(12,24,38,0.08); margin-bottom: 24px; }
.ring-progress { position: relative; width: 54px; height: 54px; flex: none; }
.ring-progress svg { width: 54px; height: 54px; transform: rotate(-90deg); }
.ring-progress .track { fill: none; stroke: rgba(23,124,144,0.14); stroke-width: 5; }
.ring-progress .fill { fill: none; stroke: var(--mint); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .45s ease; }
.ring-progress .tipdot { fill: var(--gold); }
.ring-progress .num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 620; font-size: 17px; font-variant-numeric: tabular-nums; }
.form-head h2 { font-size: 21px; font-weight: 620; letter-spacing: -0.4px; margin: 0; }
.form-head .stepname { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
fieldset.step { border: 0; margin: 0; padding: 0; }
fieldset.step[hidden] { display: none; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field.wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 700; }
.field .hint { font-size: 12.5px; color: var(--muted); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"],
input[type="url"], input[type="password"], input[type="date"], input[type="datetime-local"], select, textarea {
  font: inherit; color: var(--ink);
  background: rgba(245,247,250,0.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px; width: 100%;
}
textarea { resize: vertical; min-height: 104px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--err); }
.field .error { display: none; font-size: 12.5px; color: var(--err); font-weight: 600; }
.field.invalid .error { display: block; }
.cvr-row { display: flex; gap: 8px; }
.cvr-row input { flex: 1; }
.btn-ghost {
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--petrol);
  background: rgba(23,124,144,0.1);
  border: 0; border-radius: 12px;
  padding: 11px 16px; cursor: pointer; white-space: nowrap;
}
.btn-ghost:hover { background: rgba(23,124,144,0.16); }
.counter { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.choice {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(12,24,38,0.08);
  border-radius: 16px; padding: 13px 15px; cursor: pointer;
}
.choice input { margin-top: 3px; accent-color: var(--petrol); width: 16px; height: 16px; flex: none; }
.choice .t { font-weight: 700; font-size: 14.5px; }
.choice .d { font-size: 13px; color: var(--muted); }
.summary { display: flex; flex-direction: column; border: 1px solid rgba(12,24,38,0.08); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.55); }
.summary .row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 11px 15px; font-size: 14px; }
.summary .row + .row { border-top: 1px solid rgba(12,24,38,0.07); }
.summary .k { color: var(--muted); }
.summary .v { font-weight: 600; overflow-wrap: anywhere; }
.nav-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(12,24,38,0.08); }
.btn-back { background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--muted); }
.btn-back:hover { color: var(--ink); }

.price-panel {
  position: sticky; top: 20px;
  background: linear-gradient(140deg, #052A33, var(--petrol));
  border-radius: 26px; padding: 24px 24px 22px;
  color: var(--ground);
  box-shadow: var(--dark-shadow);
  overflow: hidden;
}
.price-panel .glow { position: absolute; top: -70px; right: -50px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(42,163,189,0.45), rgba(42,163,189,0)); filter: blur(30px); }
.price-panel > * { position: relative; }
.price-panel h3 { font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #9CC3DF; margin: 0 0 12px; }
.price-big { font-weight: 650; font-size: 38px; line-height: 1; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.price-big .unit { font-size: 15px; font-weight: 600; color: #B3CCE0; letter-spacing: 0; }
.price-sub { font-size: 13px; color: #B3CCE0; margin-top: 6px; }
.price-detail { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.price-detail li { display: flex; gap: 9px; align-items: baseline; color: #D6E2ED; }
.price-detail .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-light); flex: none; transform: translateY(-2px); }
.tier-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12.5px; }
.tier-table th, .tier-table td { text-align: left; padding: 6px 4px; border-top: 1px solid rgba(245,247,250,0.14); font-variant-numeric: tabular-nums; color: #D6E2ED; }
.tier-table th { color: #9CC3DF; font-weight: 600; border-top: 0; padding-top: 0; }
.tier-table tr.active td { color: #FFFFFF; font-weight: 700; }
.tier-table td:last-child, .tier-table th:last-child { text-align: right; }

.done { padding: 24px 8px; }
.done .bigmark { width: 62px; height: 62px; border-radius: 50%; border: 4px solid var(--mint); display: grid; place-items: center; color: var(--petrol); font-size: 26px; font-weight: 620; margin-bottom: 20px; position: relative; }
.done .bigmark::after { content: ""; position: absolute; top: -7px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); }
.done h2 { font-size: 28px; font-weight: 650; letter-spacing: -0.8px; margin: 0; }
.done > p { color: var(--muted); max-width: 52ch; }
.next-steps { margin: 22px 0 0; padding: 0; list-style: none; }
.next-steps li { display: flex; gap: 14px; align-items: flex-start; }
.next-steps .rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.next-steps .n { width: 28px; height: 28px; border-radius: 50%; background: var(--petrol); color: #EAF3FA; display: grid; place-items: center; font-size: 13px; font-weight: 620; }
.next-steps li:last-child .n { background: var(--gold); color: var(--ink); }
.next-steps .connector { width: 2px; height: 34px; background-image: linear-gradient(var(--petrol) 22%, transparent 22%); background-size: 2px 9px; opacity: 0.5; }
.next-steps .t { font-weight: 700; font-size: 15px; }
.next-steps .d { font-size: 13.5px; color: var(--muted); padding-bottom: 12px; }

/* ---- diverse ---- */
.stat-card { border-top: none; }
.stat-card .big { font-weight: 650; font-size: 40px; letter-spacing: -1.5px; color: var(--petrol); font-variant-numeric: tabular-nums; }
.stat-card small { font-size: 13.5px; color: var(--muted); }
.notice { background: rgba(42,163,189,0.12); border: 1px solid rgba(42,163,189,0.3); color: var(--petrol-deep); border-radius: 14px; padding: 13px 18px; font-size: 14px; font-weight: 600; }
.notice.warn { background: rgba(220,219,29,0.12); border-color: rgba(220,219,29,0.35); color: var(--gold-ink); }

/* ---- responsivt ---- */
@media (max-width: 960px) {
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .navlinks { display: none; }
  .burger { display: flex !important; }
  .form-layout { grid-template-columns: 1fr; }
  .price-panel { position: relative; top: 0; order: -1; }
  .tier-table { display: none; }
}
@media (max-width: 640px) {
  .grid2, .grid4 { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: 1fr; }
  .event-row { flex-wrap: wrap; }
  .fgrid { grid-template-columns: 1fr; }
  .summary .row { grid-template-columns: 1fr; gap: 2px; }
  .dark-panel { padding: 32px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring-progress .fill { transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- Ringsted-kort animation ---- */
@keyframes drawline { to { stroke-dashoffset: 0; } }
@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes mappulse { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes fadein { to { opacity: 1; } }
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 40px;
  align-items: center;
}
.anim-map { width: 100%; height: auto; display: block; overflow: visible; }
@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split .mapcol { max-width: 380px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-map * { animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* ---- netværksbaggrund ---- */
.network { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes netpulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.55; } }
.netpulse { animation: netpulse 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .netpulse { animation: none; } }

/* ---- tonal rytme ---- */
.band {
  background: linear-gradient(180deg, rgba(42,163,189,0.065), rgba(42,163,189,0.025));
  border-top: 1px solid rgba(23,124,144,0.06);
  border-bottom: 1px solid rgba(23,124,144,0.06);
  padding-bottom: 56px;
  margin-top: 56px;
}
.band .section-block { padding-top: clamp(56px, 7vw, 80px); }
.band + .section-block, .band + div .section-block { padding-top: clamp(56px, 7vw, 80px); }

/* ---- scroll-trigget kort ---- */
.anim-map:not(.play) * { animation-play-state: paused !important; }
@media (max-width: 960px) {
  .band .section-block[style*="grid-template-columns"] { display: flex !important; flex-direction: column; }
}

/* ---- medlemskortet ---- */
.memdot { fill: #177C90; opacity: 0.75; cursor: pointer; transition: r .15s ease, opacity .2s ease, fill .15s ease; }
.memdot:hover, .memdot:focus-visible { r: 7; opacity: 1; fill: #055161; outline: none; }
.memdot.sel { fill: #DCDB1D; r: 7; opacity: 1; }
.memdot.dim { opacity: 0.12; pointer-events: none; }
@media (max-width: 900px) {
  #kortwrap { display: flex !important; flex-direction: column; }
  #infopanel { position: static !important; }
}

/* ---- mobilmenu ---- */
.burger {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 0; border-radius: 999px;
  background: rgba(23,124,144,0.08); color: var(--ink); cursor: pointer;
}
.mobilemenu {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 14px; right: 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 22px;
  box-shadow: 0 24px 60px -24px rgba(12,24,38,0.4);
  padding: 10px;
  z-index: 50;
  flex-direction: column;
}
.mobilemenu.open { display: flex; }
.mobilemenu a {
  padding: 13px 18px; border-radius: 14px;
  font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.mobilemenu a:active, .mobilemenu a:hover { background: rgba(23,124,144,0.07); }
.mobilemenu a.mm-gold { color: var(--gold-ink); }
.mobilemenu a.mm-cta { background: var(--ink); color: var(--ground); text-align: center; margin-top: 6px; }
.topbar { position: relative; }
@media (max-width: 900px) {
  .mitref-grid { display: flex !important; flex-direction: column; }
}

/* ---- cookieboks ---- */
.cookiebox {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: min(350px, calc(100vw - 36px));
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(12, 24, 38, .10);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(5,81,97, .20);
  padding: 18px 20px;
  animation: fadein .5s ease both;
}
.cookiebox[hidden] { display: none; }
.cookiebox b { font-size: 14.5px; }
.cookiebox p { font-size: 13px; color: var(--muted); margin: 6px 0 12px; line-height: 1.5; }
.cb-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cb-row .btn { padding: 9px 18px; font-size: 13.5px; }
.cb-row .btn-ghost { padding: 9px 14px; font-size: 13px; }
.cb-row a { font-size: 12.5px; font-weight: 700; margin-left: auto; }
.pill-warn { background: rgba(180, 66, 58, 0.12); color: var(--err); }

/* ---- vault ---- */
.vchips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vchip { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(12, 24, 38, 0.06); color: var(--ink); }
.vchip:hover { background: rgba(12, 24, 38, 0.11); color: var(--ink); }
.vchip.on { background: var(--ink); color: var(--ground); }
.vfile { display: flex; align-items: center; gap: 14px; padding: 14px 20px; flex-wrap: wrap; }
.vnote { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.vnote:hover { transform: translateY(-2px); }
.vnote-ex { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dropzone { border: 2px dashed rgba(23,124,144, 0.35); border-radius: 14px; padding: 18px; text-align: center; font-size: 13.5px; color: var(--muted); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.dropzone.over { border-color: var(--petrol); background: rgba(42,163,189, 0.08); }

/* ---- forside: mere luft ---- */
.hero.center { padding-top: clamp(84px, 11vw, 132px); padding-bottom: clamp(52px, 7vw, 84px); }
.hero.center .lead { margin-top: 26px; }
.hero.center .cta-row { margin-top: 40px; }
.hero.center ~ .marquee { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(20px, 3vw, 36px); }
.hero.center ~ .section-block { padding-top: clamp(84px, 11vw, 140px); }
.hero.center ~ .band .section-block { padding-top: clamp(68px, 9vw, 104px); }
.hero.center ~ .section-block .section-head { margin-bottom: 38px; }

/* ---- microsoft-login ---- */
.msbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 330px; max-width: 100%; margin: 12px auto 0;
  padding: 10px 16px; border: 1px solid #dadce0; border-radius: 999px;
  background: #fff; font-size: 14px; font-weight: 600; color: #3c4043;
}
.msbtn:hover { background: #f7f9fb; border-color: #c6cdd4; color: #3c4043; }

/* ---- header v2: fixed glass-bjælke ---- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: block; padding: 0;
  background: rgba(245, 247, 250, 0.72);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(12, 24, 38, 0.08);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.topbar.scrolled {
  background: rgba(245, 247, 250, 0.86);
  box-shadow: 0 12px 32px -18px rgba(12, 24, 38, 0.28);
}
.navpill {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: nowrap;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; /* den gamle pille-sløring gav en lysere boks midt i menubjælken */
  padding: 12px 22px;
}
.brand svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand:hover svg { transform: rotate(24deg) scale(1.07); }
.brand:hover { color: var(--ink); }
.navlinks { gap: 4px; }
.navlinks a {
  padding: 9px 14px; border-radius: 999px;
  transition: color 0.16s ease, background 0.16s ease;
}
.navlinks a:hover { color: var(--ink); background: rgba(23,124,144, 0.08); }
.navlinks a.active { color: var(--ink); background: rgba(23,124,144, 0.10); }
.navlinks a[href="/mit-ref"]:hover { color: var(--gold-ink); background: rgba(220,219,29, 0.14); }
.navlinks a[href="/mit-ref"].active { color: var(--gold-ink); background: rgba(220,219,29, 0.16); }
.navpill .btn-dark { transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; }
.navpill .btn-dark:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(12, 24, 38, 0.45); }
.page { padding-top: 76px; }
.mobilemenu { top: 100%; border-radius: 0 0 22px 22px; border-top: 0; }
@media (max-width: 1180px) {
  .navlinks { gap: 0; }
  .navlinks a { padding: 8px 10px; font-size: 13.5px; }
  .navpill { gap: 12px; }
  .brand b { font-size: 14.5px; }
}
@media (max-width: 1000px) {
  .navlinks { display: none; }
  .burger { display: flex !important; }
}
@media (max-width: 640px) {
  .navpill { padding: 10px 16px; }
  .page { padding-top: 66px; }
}
@media (max-width: 640px) {
  .navpill > .btn-dark { display: none; }
}

/* ---- footer v2 ---- */
footer.site { margin-top: clamp(64px, 9vw, 110px); border-top: 1px solid rgba(12, 24, 38, 0.08); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
footer.site .ghost { display: none; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; padding: 54px 0 40px; }
.foot-brand p { font-size: 13.5px; color: var(--muted); margin: 12px 0 16px; max-width: 30ch; }
.foot-col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.foot-col b { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.foot-col a { color: var(--ink); opacity: 0.75; transition: opacity 0.15s ease, color 0.15s ease; }
.foot-col a:hover { opacity: 1; color: var(--petrol); }
.foot-col span { color: var(--muted); line-height: 1.55; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid rgba(12, 24, 38, 0.07); padding: 18px 0 26px; font-size: 12.5px; color: var(--muted); }
.foot-bottom a { color: var(--muted); font-weight: 600; }
.foot-bottom a:hover { color: var(--petrol); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 32px; } }

/* ---- lightbox (tilmelding) ---- */
.lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.22s ease; }
.lightbox.open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lb-back { position: absolute; inset: 0; background: rgba(12, 24, 38, 0.32); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.lb-card {
  position: relative; width: min(480px, 100%); max-height: min(86vh, 720px); overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(5,81,97, 0.5);
  padding: 28px 30px;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.lightbox.open .lb-card { transform: none; }
.lb-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(12, 24, 38, 0.06); color: var(--muted); font-size: 14px; cursor: pointer; transition: background 0.15s; }
.lb-x:hover { background: rgba(12, 24, 38, 0.12); color: var(--ink); }
@media (max-width: 540px) { .lb-card { padding: 24px 20px; } .lightbox { padding: 12px; align-items: flex-end; } }

/* ---- lightbox: smooth glas-overgang ---- */
.lightbox { opacity: 1; transition: none; }
.lightbox .lb-back {
  opacity: 0;
  background: rgba(12, 24, 38, 0);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  backdrop-filter: blur(0px) saturate(1);
  transition: opacity 0.45s ease, background-color 0.45s ease,
    -webkit-backdrop-filter 0.45s ease, backdrop-filter 0.45s ease;
  will-change: opacity, backdrop-filter;
}
.lightbox.open .lb-back {
  opacity: 1;
  background: rgba(12, 24, 38, 0.32);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}
.lightbox .lb-card {
  opacity: 0;
  transform: translateY(30px) scale(0.955);
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.lightbox.open .lb-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lightbox .lb-back, .lightbox .lb-card { transition: none; }
}

/* ---- logo-hover: connect the dots ---- */
.brand:hover svg { transform: scale(1.06); }
.lg-d { transform-box: fill-box; transform-origin: center; }
.brand:hover .lg-l { stroke-dasharray: 100; animation: logodraw 0.4s ease-out both; }
.brand:hover .lg-l1 { animation-delay: 0s; }
.brand:hover .lg-l2 { animation-delay: 0.06s; }
.brand:hover .lg-l3 { animation-delay: 0.12s; }
.brand:hover .lg-l4 { animation-delay: 0.18s; }
.brand:hover .lg-l5 { animation-delay: 0.24s; }
.brand:hover .lg-l6 { animation-delay: 0.3s; }
.brand:hover .lg-d { animation: logopop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.brand:hover .lg-d1 { animation-delay: 0.3s; }
.brand:hover .lg-d2 { animation-delay: 0.38s; }
.brand:hover .lg-d3 { animation-delay: 0.46s; }
.brand:hover .lg-dlime { animation-delay: 0.56s; animation-duration: 0.45s; }
@keyframes logodraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes logopop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .brand:hover .lg-l, .brand:hover .lg-d { animation: none; } }

/* ---- fix: hård kant i topbarens glas (backdrop-root-artefakt fra blob-filter) ---- */
.blob { filter: none !important; }
.blob.b1 { background: radial-gradient(circle, rgba(23,124,144, 0.22) 0%, rgba(23,124,144, 0.08) 45%, rgba(23,124,144, 0) 70%); }
.blob.b2 { background: radial-gradient(circle, rgba(237,236,160, 0.24) 0%, rgba(237,236,160, 0.09) 45%, rgba(237,236,160, 0) 70%); }
.blob.b1 { background: radial-gradient(closest-side, rgba(23,124,144, 0.26) 0%, rgba(23,124,144, 0.09) 55%, rgba(23,124,144, 0) 100%); }
.blob.b2 { background: radial-gradient(closest-side, rgba(237,236,160, 0.28) 0%, rgba(237,236,160, 0.09) 55%, rgba(237,236,160, 0) 100%); }

/* ---- topbar-glas v2: gennemsigtig i toppen (Chromium-seam-bug), blur først ved scroll ---- */
.topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(245, 247, 250, 0.55); border-bottom-color: rgba(12, 24, 38, 0.05); }
.topbar.scrolled {
  background: rgba(245, 247, 250, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-color: rgba(12, 24, 38, 0.08);
}

/* ---- hjælp-side ---- */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chiprow a { background: #FFFFFF; border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; font-weight: 600; border-radius: 999px; padding: 7px 15px; }
.chiprow a:hover { border-color: var(--gold); color: var(--ink); }
.hjaelp-kort { background: #FFFFFF; border: 1px solid var(--line); border-radius: 20px; padding: 26px 28px; margin-top: 18px; scroll-margin-top: 90px; }
.hjaelp-kort .kicker { font-size: 11px; font-weight: 650; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 6px; }
.hjaelp-kort h2 { font-size: 22px; margin: 0 0 10px; }
.hjaelp-kort p, .hjaelp-kort li { font-size: 15px; line-height: 1.62; }
.hjaelp-kort > :last-child { margin-bottom: 0; }
.hjaelp-sti { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; background: rgba(12,24,38,0.06); border-radius: 7px; padding: 2px 7px; white-space: nowrap; }

/* ---- vejviser: målgruppe-indgange på forsiden ---- */
.vejviser { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: transform var(--t-state, .18s ease), box-shadow var(--t-state, .18s ease), border-color .18s ease; }
.vejviser b { font-size: 16px; font-weight: 620; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.vejviser b::after { content: "→"; color: var(--petrol); font-weight: 500; transition: transform .18s ease; }
.vejviser span { font-size: 14px; color: var(--muted); line-height: 1.55; }
.vejviser:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); color: inherit; }
.vejviser:hover b::after { transform: translateX(3px); }