:root{
      --navy:#0B1B2B;
      --navy2:#102B45;
      --text:#0E1726;
      --muted:#5B6676;
      --bg:#F6F8FB;
      --card:#FFFFFF;

      /* Accents */
      --red:#D72638;      /* Brand */
      --blue:#1E5AA8;     /* Politi */
      --orange:#F08A24;   /* Ambulance */
      --green:#1AAE78;    /* Success/CTA secondary */

      --radius:16px;
      --shadow: 0 14px 35px rgba(11,27,43,.12);
      --shadow2: 0 10px 22px rgba(11,27,43,.10);
      --border: 1px solid rgba(11,27,43,.10);

      --max: 1120px;
      --ring: rgba(215,38,56,.22);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 520px at 15% 5%, rgba(215,38,56,.12), transparent 60%),
        radial-gradient(1000px 520px at 85% 8%, rgba(30,90,168,.12), transparent 60%),
        radial-gradient(1200px 600px at 55% 95%, rgba(240,138,36,.12), transparent 60%),
        linear-gradient(180deg, #fff 0%, var(--bg) 55%, #fff 100%);
    }
    a{color:inherit}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 18px;}
    .sep{height:1px; background: rgba(11,27,43,.08); margin:18px 0;}

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:50;
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(11,27,43,.08);
    }
    .topbar__inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      padding:12px 0;
    }

    /* "SportOffDuty" logo (text + badge) */
    .logo{
      display:flex; align-items:center; gap:12px;
      text-decoration:none;
      user-select:none;
    }
    .logo__mark{
      width:42px; height:42px; border-radius:14px;
      background: linear-gradient(135deg, var(--navy), var(--navy2));
      box-shadow: 0 12px 20px rgba(11,27,43,.18);
      position:relative;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.12);
    }
    .logo__mark:before{
      content:"";
      position:absolute; inset:-18px;
      background:
        radial-gradient(circle at 30% 35%, rgba(240,138,36,.95) 0 18%, transparent 20%),
        radial-gradient(circle at 70% 60%, rgba(30,90,168,.95) 0 16%, transparent 18%),
        radial-gradient(circle at 55% 35%, rgba(215,38,56,.95) 0 14%, transparent 16%);
      opacity:.70;
      filter: blur(1px);
    }
    .logo__text{
      line-height:1.05;
    }
    .logo__text .brand{
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 800;
      letter-spacing:.2px;
      font-size: 18px;
    }
    .logo__text .tag{
      margin-top:2px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing:.3px;
      text-transform: uppercase;
    }

    .nav{
      display:flex; gap:14px; align-items:center;
      font-weight:700;
      font-size:14px;
      color: var(--muted);
    }
    .nav a{
      text-decoration:none;
      padding:8px 10px;
      border-radius:12px;
    }
    .nav a:hover{
      background: rgba(11,27,43,.06);
      color: var(--text);
    }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 16px;
      border-radius:999px;
      font-weight:900;
      text-decoration:none;
      border:1px solid transparent;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
      white-space:nowrap;
    }
    .btn:focus{outline:none; box-shadow: 0 0 0 5px var(--ring);}
    .btn--primary{
      color:#fff;
      background: linear-gradient(135deg, var(--red), #B51B2B);
      box-shadow: 0 14px 26px rgba(215,38,56,.22);
    }
    .btn--primary:hover{ transform: translateY(-1px); box-shadow: 0 18px 34px rgba(215,38,56,.30); }
    .btn--ghost{
      color: var(--text);
      background: rgba(11,27,43,.06);
      border-color: rgba(11,27,43,.12);
    }
    .btn--ghost:hover{ transform: translateY(-1px); background: rgba(11,27,43,.09); }

    /* Hero */
    header.hero{ padding: 34px 0 12px; }
    .hero__grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 18px;
      align-items:stretch;
    }
    .hero__card{
      border-radius: calc(var(--radius) + 6px);
      background:
        radial-gradient(1100px 520px at 10% 10%, rgba(215,38,56,.18), transparent 55%),
        radial-gradient(900px 520px at 90% 20%, rgba(30,90,168,.18), transparent 55%),
        radial-gradient(900px 520px at 60% 95%, rgba(240,138,36,.18), transparent 55%),
        linear-gradient(135deg, #081624, #0E263E);
      color:#fff;
      box-shadow: var(--shadow);
      border:1px solid rgba(255,255,255,.10);
      overflow:hidden;
      position:relative;
      padding: 28px;
    }
    .hero__card:after{
      content:"";
      position:absolute; inset:-1px;
      background: linear-gradient(135deg, rgba(255,255,255,.12), transparent 40%, rgba(255,255,255,.06));
      pointer-events:none;
    }
    .badges{
      display:flex; gap:8px; flex-wrap:wrap;
      margin-bottom: 12px;
    }
    .badge{
      display:inline-flex; align-items:center;
      font-size:12px;
      font-weight:900;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      letter-spacing:.3px;
      text-transform:uppercase;
    }
    .badge--ambu{ box-shadow: inset 0 0 0 999px rgba(240,138,36,.22); }
    .badge--brand{ box-shadow: inset 0 0 0 999px rgba(215,38,56,.22); }
    .badge--politi{ box-shadow: inset 0 0 0 999px rgba(30,90,168,.22); }
    .badge--bered{ box-shadow: inset 0 0 0 999px rgba(255,255,255,.08); }

    h1{
      margin:0 0 10px;
      font-family: Montserrat, Inter, sans-serif;
      font-weight: 800;
      letter-spacing:.2px;
      line-height:1.05;
      font-size: clamp(30px, 4vw, 46px);
    }
    .lead{
      margin:0 0 16px;
      color: rgba(255,255,255,.86);
      font-size: 16px;
      line-height:1.55;
      max-width: 65ch;
    }

    .hero__actions{
      display:flex; flex-wrap:wrap; gap:12px;
      margin-top: 12px;
    }

    /* Info side card */
    .side{
      border-radius: calc(var(--radius) + 6px);
      background: var(--card);
      box-shadow: var(--shadow2);
      border: var(--border);
      padding: 18px;
    }
    .side h3{
      margin:0 0 10px;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 18px;
      letter-spacing:.2px;
    }
    .side p{
      margin:0;
      color: var(--muted);
      font-weight:600;
      line-height:1.55;
    }
    .facts{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 14px;
    }
    .fact{
      border: var(--border);
      border-radius: 14px;
      padding: 12px;
      background: linear-gradient(180deg, #fff, #F9FBFF);
    }
    .fact .label{
      color: var(--muted);
      font-size: 12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.3px;
    }
    .fact .value{
      font-weight: 900;
      margin-top: 6px;
      color: var(--text);
    }
    .mini-note{
      margin-top: 12px;
      padding: 12px 12px;
      border-radius: 14px;
      border: var(--border);
      background: rgba(11,27,43,.04);
      font-weight:700;
      color: var(--text);
    }
    .mini-note small{display:block; color: var(--muted); font-weight:700; margin-top:4px; line-height:1.5}

    /* Sections */
    section{ padding: 18px 0; }
    .section__title{
      display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
      margin: 6px 0 12px;
    }
    .section__title h2{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 22px;
      letter-spacing:.2px;
    }
    .section__title p{ margin:0; color: var(--muted); font-weight:700; }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .card{
      background: var(--card);
      border: var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding: 16px;
    }
    .card h4{ margin:0 0 8px; font-size:16px; font-weight:900; }
    .card p{ margin:0; color: var(--muted); line-height:1.55; font-weight:600; }

    /* Leaderboard (high placed) */
    .leaderboard{
      border-radius: calc(var(--radius) + 6px);
      background: #fff;
      border: var(--border);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .leaderboard__head{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px;
      padding: 16px;
      background:
        linear-gradient(135deg, rgba(215,38,56,.12), rgba(30,90,168,.12), rgba(240,138,36,.10));
      border-bottom: var(--border);
    }
    .leaderboard__head h2{
      margin:0;
      font-family: Montserrat, Inter, sans-serif;
      font-size: 20px;
      letter-spacing:.2px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      border-radius:999px;
      padding:8px 12px;
      border:1px solid rgba(11,27,43,.12);
      background: rgba(255,255,255,.70);
      font-weight:900;
      color: var(--text);
      white-space:nowrap;
    }
    .pill .dot{
      width:10px; height:10px; border-radius:999px;
      background: var(--orange);
      box-shadow: 0 0 0 5px rgba(240,138,36,.16);
    }
    .leaderboard__body{
      padding: 16px;
    }
    .lb-placeholder{
      border-radius: 16px;
      border:1px dashed rgba(11,27,43,.22);
      background: linear-gradient(180deg, rgba(11,27,43,.03), rgba(11,27,43,.02));
      padding: 16px;
    }
    .lb-placeholder b{display:block; margin-bottom:6px;}
    .lb-placeholder p{margin:0; color: var(--muted); font-weight:650; line-height:1.6}
    .lb-grid{
      margin-top: 14px;
      display:grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }
    .lb-stat{
      border: var(--border);
      border-radius: 14px;
      padding: 12px;
      background:#fff;
    }
    .lb-stat .k{ color: var(--muted); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.3px;}
    .lb-stat .v{ margin-top:6px; font-weight: 900; }

    /* Lists */
    ul.clean{
      margin:10px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .li{
      display:flex; gap:10px; align-items:flex-start;
      padding: 12px 14px;
      border-radius: 14px;
      border: var(--border);
      background: #fff;
    }
    .li .bullet{
      width:10px; height:10px; border-radius:999px;
      margin-top:6px;
      background: var(--red);
      box-shadow: 0 0 0 5px rgba(215,38,56,.12);
      flex: 0 0 auto;
    }
    .li b{ display:block; margin-bottom:4px; }
    .li span{ color: var(--muted); font-weight:650; line-height:1.55; }

    /* CTA band */
    .cta{
      border-radius: calc(var(--radius) + 6px);
      background: linear-gradient(135deg, rgba(215,38,56,.10), rgba(30,90,168,.10), rgba(240,138,36,.10));
      border: var(--border);
      box-shadow: var(--shadow2);
      padding: 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      flex-wrap:wrap;
    }
    .cta h3{ margin:0; font-family: Montserrat, Inter, sans-serif; }
    .cta p{ margin:6px 0 0; color: var(--muted); font-weight:650; line-height:1.55; }

    footer{
      padding: 28px 0 40px;
      color: var(--muted);
      font-weight:650;
    }

    /* Responsive */
    @media (max-width: 980px){
      .hero__grid{ grid-template-columns: 1fr; }
      .grid3{ grid-template-columns: 1fr; }
      .grid2{ grid-template-columns: 1fr; }
      .lb-grid{ grid-template-columns: 1fr; }
      .nav{ display:none; }
    }
    @media (max-width: 520px){
      .facts{ grid-template-columns: 1fr; }
      .leaderboard__head{ flex-direction:column; align-items:flex-start; }
    }
    
    /* =========================
   TEST LEADERBOARD (Top 20)
   ========================= */
.lb-test{ margin-top: 6px; }

.lb-top{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.lb-top__card{
  border: var(--border);
  border-radius: 16px;
  background:#fff;
  padding: 12px;
}
.lb-top__k{
  color: var(--muted);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.lb-top__v{
  margin-top:6px;
  font-weight: 900;
  font-size: 18px;
}
.lb-top__s{
  margin-top:4px;
  color: var(--muted);
  font-weight:700;
  font-size: 13px;
}

.lb-table{
  display:grid;
  gap:8px;
}
.lb-row{
  display:grid;
  grid-template-columns: 42px 1.4fr 1fr 2fr 90px 70px;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 16px;
  border: var(--border);
  background:#fff;
}
.lb-head{
  background: rgba(11,27,43,.04);
  border-color: rgba(11,27,43,.12);
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing:.3px;
}
.lb-cell{ font-weight:700; }
.lb-right{ text-align:right; }

.lb-bar{
  height: 12px;
  border-radius: 999px;
  background: rgba(11,27,43,.08);
  overflow:hidden;
  border: 1px solid rgba(11,27,43,.08);
}
.lb-bar > span{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), var(--red), var(--blue));
}

.lb-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(11,27,43,.10);
  background: rgba(11,27,43,.04);
  white-space:nowrap;
}
.lb-badge--ambu{ box-shadow: inset 0 0 0 999px rgba(240,138,36,.14); }
.lb-badge--brand{ box-shadow: inset 0 0 0 999px rgba(215,38,56,.14); }
.lb-badge--politi{ box-shadow: inset 0 0 0 999px rgba(30,90,168,.14); }
.lb-badge--bered{ box-shadow: inset 0 0 0 999px rgba(11,27,43,.06); }

.lb-chip{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  margin-left: 8px;
  border: 1px solid rgba(11,27,43,.12);
  background: rgba(11,27,43,.04);
  color: var(--text);
}
.lb-chip--hot{
  background: rgba(215,38,56,.10);
  border-color: rgba(215,38,56,.18);
}

.lb-footnote{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
}

/* Responsive tweaks */
@media (max-width: 980px){
  .lb-top{ grid-template-columns: 1fr; }
  .lb-row{
    grid-template-columns: 40px 1.3fr 1fr;
    grid-template-areas:
      "pos name etat"
      "pos bar  km"
      "pos bar  pct";
    align-items:start;
  }
  .lb-row .lb-cell:nth-child(1){ grid-area: pos; }
  .lb-row .lb-cell:nth-child(2){ grid-area: name; }
  .lb-row .lb-cell:nth-child(3){ grid-area: etat; }
  .lb-row .lb-cell:nth-child(4){ grid-area: bar; }
  .lb-row .lb-cell:nth-child(5){ grid-area: km; text-align:right; }
  .lb-row .lb-cell:nth-child(6){ grid-area: pct; text-align:right; }
  .lb-head{ display:none; }
}
    
/* =========================
   SPONSORS (Full width bar)
   ========================= */
.sod-sponsors{
  padding: 14px 0 10px;
}
.sod-sponsors__inner{
  border-radius: calc(var(--radius) + 6px);
  background:
    linear-gradient(135deg, rgba(215,38,56,.07), rgba(30,90,168,.07), rgba(240,138,36,.06));
  border: var(--border);
  box-shadow: var(--shadow2);
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}

.sod-sponsors__text{
  min-width: 220px;
}
.sod-sponsors__kicker{
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
}
.sod-sponsors__title{
  margin-top: 4px;
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}

.sod-sponsors__logos{
  display:grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  align-items:center;
  flex: 1 1 520px;
}

.sod-sponsor{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(11,27,43,.10);
  box-shadow: 0 10px 22px rgba(11,27,43,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none;
  min-height: 64px;
}
.sod-sponsor:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(11,27,43,.10);
  background: rgba(255,255,255,.92);
}
.sod-sponsor img{
  max-width: 100%;
  max-height: 44px;
  height: auto;
  width: auto;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}

/* Responsive */
@media (max-width: 980px){
  .sod-sponsors__logos{
    grid-template-columns: 1fr;
  }
  .sod-sponsor{
    justify-content:center;
  }
}

/* =========================
   PAST YEARS (card table)
   ========================= */
.past-years{
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.past-years__row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: var(--border);
  background: #fff;
}
.past-years__head{
  background: rgba(11,27,43,.04);
  border-color: rgba(11,27,43,.12);
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 12px;
}
.past-years__cell{
  font-weight: 750;
}
.past-years__right{
  text-align: right;
}
.past-years__note{
  margin-top: 10px;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
  line-height: 1.5;
}

.tilmelding-section {
  padding: 60px 20px;
  background: #f7f7f7;
}

.tilmelding-box {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.tilmelding-header {
  text-align: center;
  margin-bottom: 40px;
}

.tilmelding-header h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.tilmelding-header p {
  color: #666;
}

.tilmelding-content {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

/* FORM */
.tilmelding-form iframe {
  width: 100%;
  min-height: 600px;
  border-radius: 10px;
  border: 1px solid #eee;
}

/* STATS */
.tilmelding-stats h4 {
  margin-bottom: 10px;
}

.past-years {
  margin-top: 20px;
}

.past-years .row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.past-years .head {
  font-weight: bold;
  border-bottom: 2px solid #ddd;
}

.note {
  margin-top: 20px;
  font-size: 14px;
  color: #777;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .tilmelding-content {
    grid-template-columns: 1fr;
  }

  .tilmelding-box {
    padding: 25px;
  }
}

.tilmelding-form iframe {
  width: 100%;
  height: 750px; /* justér efter behov */
  border: none;
  overflow: hidden;
}

.tilmelding-section {
  padding: 80px 20px;
  background: #f7f7f7;
}

.tilmelding-box {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 5px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  text-align: center;
}

/* HEADER */
.tilmelding-header h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.tilmelding-header p {
  color: #666;
  margin-bottom: 30px;
}

/* FORM */
.tilmelding-form iframe {
  width: 100%;
  height: 750px; /* justér hvis nødvendigt */
  border: none;
  border-radius: 10px;
}

/* NOTE */
.tilmelding-note {
  margin-top: 20px;
  font-size: 14px;
  color: #777;
}

/* MOBILE */
@media (max-width: 768px) {
  .tilmelding-box {
    padding: 25px 20px;
  }

  .tilmelding-header h2 {
    font-size: 26px;
  }

  .tilmelding-form iframe {
    height: 750px;
  }
}