Klistra in allt detta i en HTML-widget i Elementor

				
					<!-- ===== SÖMNTEST – ELEMENTOR HTML-WIDGET ===== -->
<!-- Klistra in allt detta i en HTML-widget i Elementor -->

<div id="somntest-app">
  <style>
    #somntest-app *, #somntest-app *::before, #somntest-app *::after { box-sizing: border-box; }

    #somntest-app {
      --st-bg: #f8f7f4;
      --st-card: #ffffff;
      --st-border: #e8e5df;
      --st-accent: #4a5af0;
      --st-accent-light: #eef0fd;
      --st-text: #1a1a2e;
      --st-muted: #6b7280;
      --st-font-head: 'Sora', sans-serif;
      --st-font-body: 'DM Sans', sans-serif;

      color: var(--st-text);
      font-family: var(--st-font-body);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    #somntest-app .st-inner { width: 100%; max-width: 520px; }
    #somntest-app .st-screen[hidden] { display: none !important; }

    #somntest-app .st-card {
      background: var(--st-card);
      border: 1px solid var(--st-border);
      border-radius: 20px;
      padding: 40px 44px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    }

    /* PROGRESS */
    #somntest-app .st-progress-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
    #somntest-app .st-progress-track { flex: 1; height: 4px; background: var(--st-border); border-radius: 99px; overflow: hidden; }
    #somntest-app .st-progress-fill { height: 100%; width: 0; background: var(--st-accent); border-radius: 99px; transition: width 0.4s ease; }
    #somntest-app .st-progress-label { font-family: var(--st-font-head); font-size: 11px; font-weight: 700; color: var(--st-muted); white-space: nowrap; letter-spacing: 0.05em; }

    /* TAG */
    #somntest-app .st-step-tag {
      display: inline-block;
      font-family: var(--st-font-head);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--st-accent);
      background: var(--st-accent-light);
      border-radius: 6px;
      padding: 4px 10px;
      margin-bottom: 14px;
    }

    #somntest-app h1, #somntest-app h2 { font-family: var(--st-font-head); font-weight: 800; margin: 0; color: var(--st-text); }
    #somntest-app h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.02em; }
    #somntest-app h2 { font-size: clamp(17px, 3.5vw, 22px); line-height: 1.35; margin-bottom: 8px; }

    #somntest-app .st-subtitle { color: var(--st-muted); font-size: 15px; line-height: 1.7; margin: 0 0 32px; }
    #somntest-app .st-moon { font-size: 48px; display: block; margin-bottom: 18px; }

    #somntest-app .st-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--st-accent);
      color: #fff;
      font-family: var(--st-font-head);
      font-size: 15px;
      font-weight: 700;
      border: none;
      border-radius: 12px;
      padding: 15px 32px;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
    }
    #somntest-app .st-btn-primary:hover { background: #3a49d8; transform: translateY(-2px); }

    /* CHOICES */
    #somntest-app .st-choices { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }

    #somntest-app .st-choice {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fff;
      color: var(--st-text);
      border: 1.5px solid var(--st-border);
      border-radius: 12px;
      padding: 14px 18px;
      cursor: pointer;
      text-align: left;
      transition: border-color 0.18s, background 0.18s;
      font-size: 15px;
      line-height: 1.4;
      font-family: var(--st-font-body);
    }
    #somntest-app .st-choice:hover { border-color: var(--st-accent); background: var(--st-accent-light); }
    #somntest-app .st-choice.selected { border-color: var(--st-accent); background: var(--st-accent-light); }

    #somntest-app .st-check {
      width: 20px; height: 20px;
      border-radius: 50%;
      border: 2px solid #d1d5db;
      flex-shrink: 0;
      position: relative;
      transition: background 0.18s, border-color 0.18s;
    }
    #somntest-app .st-choice.multi .st-check { border-radius: 6px; }
    #somntest-app .st-choice.selected .st-check { background: var(--st-accent); border-color: var(--st-accent); }
    #somntest-app .st-choice.selected .st-check::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: #fff;
    }
    #somntest-app .st-choice.multi.selected .st-check::after {
      content: '';
      background: none;
      inset: 0;
      border-radius: 0;
    }
    #somntest-app .st-choice.multi.selected .st-check::before {
      content: '';
      position: absolute;
      left: 50%; top: 45%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 5px; height: 8px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }

    /* NAV */
    #somntest-app .st-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

    #somntest-app .st-btn-next, #somntest-app .st-btn-back, #somntest-app .st-btn-restart {
      display: inline-flex; align-items: center; gap: 6px;
      border-radius: 10px; cursor: pointer;
      font-family: var(--st-font-head); font-size: 14px; font-weight: 700;
      padding: 12px 20px;
      transition: background 0.18s, color 0.18s, transform 0.15s;
    }
    #somntest-app .st-btn-next { background: var(--st-accent); color: #fff; border: none; }
    #somntest-app .st-btn-next:not(:disabled):hover { background: #3a49d8; transform: translateY(-1px); }
    #somntest-app .st-btn-next:disabled { opacity: 0.35; cursor: not-allowed; }
    #somntest-app .st-btn-back { background: transparent; color: var(--st-muted); border: 1.5px solid var(--st-border); }
    #somntest-app .st-btn-back:hover { border-color: var(--st-accent); color: var(--st-accent); }
    #somntest-app .st-btn-back[hidden] { display: none; }
    #somntest-app .st-btn-restart { background: transparent; color: var(--st-muted); border: 1.5px solid var(--st-border); margin-top: 8px; }
    #somntest-app .st-btn-restart:hover { border-color: var(--st-accent); color: var(--st-accent); }

    /* RESULT */
    #somntest-app .st-result-score { font-family: var(--st-font-head); font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--st-accent); }
    #somntest-app .st-result-score-label { color: var(--st-muted); font-size: 11px; margin-bottom: 24px; font-family: var(--st-font-head); letter-spacing: 0.07em; text-transform: uppercase; }
    #somntest-app .st-result-heading { font-family: var(--st-font-head); font-size: clamp(20px, 4vw, 26px); font-weight: 800; margin: 0 0 10px; }
    #somntest-app .st-result-text { color: var(--st-muted); font-size: 15px; line-height: 1.75; margin: 0 0 24px; }

    #somntest-app .st-result-bar-wrap { margin-bottom: 24px; }
    #somntest-app .st-result-bar-label { display: flex; justify-content: space-between; font-family: var(--st-font-head); font-size: 11px; color: var(--st-muted); margin-bottom: 6px; letter-spacing: 0.04em; text-transform: uppercase; }
    #somntest-app .st-result-bar-pct { font-size: 16px; font-weight: 800; color: var(--st-text); text-transform: none; }
    #somntest-app .st-result-bar-track { height: 8px; background: var(--st-border); border-radius: 99px; overflow: hidden; }
    #somntest-app .st-result-bar-fill { height: 100%; width: 0; border-radius: 99px; transition: width 1.2s cubic-bezier(0.22,1,0.36,1); }

    #somntest-app .st-notice { border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.65; background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
    #somntest-app .st-notice.orange { background: #fffbeb; border-color: #fde68a; color: #d97706; }
    #somntest-app .st-notice.red { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

    #somntest-app .st-divider { height: 1px; background: var(--st-border); margin: 24px 0; }

    #somntest-app .st-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    @media (max-width: 520px) {
      #somntest-app { align-items: flex-start; padding: 16px; }
      #somntest-app .st-card { padding: 28px 20px; border-radius: 16px; }
      #somntest-app .st-nav { flex-direction: column-reverse; }
      #somntest-app .st-btn-next, #somntest-app .st-btn-back, #somntest-app .st-btn-primary, #somntest-app .st-btn-restart { width: 100%; justify-content: center; }
    }
  </style>

  <div class="st-inner">

    <!-- INTRO -->
    <section class="st-screen" id="st-screen-intro">
      <div class="st-card">
        <span class="st-moon" aria-hidden="true">🌙</span>
        <h1 tabindex="-1">Hur sover du?</h1>
        <p class="st-subtitle">Ett kort test med 3 frÄgor om dina sömnvanor. Tar under en minut.<br>ErsÀtter inte en medicinsk bedömning.</p>
        <button class="st-btn-primary" id="st-start-btn" type="button">
          Starta testet
          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </button>
      </div>
    </section>

    <!-- QUESTIONS -->
    <section class="st-screen" id="st-screen-questions" hidden>
      <div class="st-card">
        <div class="st-progress-wrap">
          <div class="st-progress-track" id="st-progress-bar" role="progressbar" aria-valuemin="1" aria-valuemax="3" aria-valuenow="1">
            <div class="st-progress-fill" id="st-progress-fill"></div>
          </div>
          <span class="st-progress-label" id="st-progress-label" aria-hidden="true">1 / 3</span>
        </div>
        <div class="st-step-tag" id="st-step-tag"></div>
        <h2 id="st-q-title" tabindex="-1"></h2>
        <p id="st-q-sub" style="color:var(--st-muted);font-size:13px;margin:0 0 16px;" hidden></p>
        <div id="st-q-body"></div>
        <div class="st-nav">
          <button class="st-btn-back" id="st-btn-back" type="button" hidden>← Tillbaka</button>
          <button class="st-btn-next" id="st-btn-next" type="button" disabled>
            <span id="st-btn-next-label">NÀsta frÄga</span>
            <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </section>

    <!-- RESULT -->
    <section class="st-screen" id="st-screen-result" hidden>
      <div class="st-card">
        <span class="st-result-score" id="st-result-score"></span>
        <div class="st-result-score-label" id="st-result-score-label"></div>
        <h2 class="st-result-heading" id="st-result-heading" tabindex="-1"></h2>
        <p class="st-result-text" id="st-result-text"></p>
        <div class="st-result-bar-wrap">
          <div class="st-result-bar-label">
            <span>Indikation pÄ sömnbesvÀr</span>
            <span class="st-result-bar-pct" id="st-pct-label"></span>
          </div>
          <div class="st-result-bar-track" id="st-result-bar-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <div class="st-result-bar-fill" id="st-result-bar"></div>
          </div>
        </div>
        <div class="st-notice" id="st-result-notice"></div>
        <div class="st-divider"></div>
        <button class="st-btn-restart" id="st-restart-btn" type="button">↩ Gör testet igen</button>
      </div>
    </section>

    <p class="st-sr-only" id="st-status" role="status" aria-live="polite"></p>
  </div>
</div>

<script>
(function () {
  'use strict';

  function initSomntest() {
    var root = document.getElementById('somntest-app');
    if (!root || root.dataset.stInit) return;
    root.dataset.stInit = '1';

    var questions = [
      {
        id: 'q1',
        tag: 'Sömnproblem',
        type: 'multi',
        title: 'Vilken typ av sömnproblem har du?',
        sub: 'Du kan vÀlja flera alternativ.',
        options: ['SvĂ„rt att somna', 'Vaknar för tidigt', 'Vaknar pĂ„ natten (avbruten sömn)', 'Är trött och irriterad under dagen'],
        maxScore: 10,
        score: function (values) { return values.reduce(function (sum, i) { return sum + [1, 2, 3, 4][i]; }, 0); }
      },
      {
        id: 'q2',
        tag: 'Frekvens',
        type: 'single',
        title: 'Hur ofta har du sömnproblem?',
        options: ['Ibland (2–3 gĂ„nger i mĂ„naden)', 'Ofta (1 gĂ„ng i veckan)', 'Regelbundet (3 eller fler gĂ„nger i veckan)'],
        maxScore: 3,
        score: function (v) { return v + 1; }
      },
      {
        id: 'q3',
        tag: 'Duration',
        type: 'single',
        title: 'Hur lÀnge har du haft sömnproblem?',
        options: ['Mindre Àn 3 mÄnader', 'Mer Àn 3 mÄnader'],
        maxScore: 2,
        score: function (v) { return v + 1; }
      }
    ];

    var maxScore = questions.reduce(function (s, q) { return s + q.maxScore; }, 0);
    var state = { current: 0, answers: Array(questions.length).fill(null) };

    function $(id) { return root.querySelector('#' + id); }

    var refs = {
      intro:             $('st-screen-intro'),
      questions:         $('st-screen-questions'),
      result:            $('st-screen-result'),
      startBtn:          $('st-start-btn'),
      restartBtn:        $('st-restart-btn'),
      progressBar:       $('st-progress-bar'),
      progressFill:      $('st-progress-fill'),
      progressLabel:     $('st-progress-label'),
      stepTag:           $('st-step-tag'),
      qTitle:            $('st-q-title'),
      qSub:              $('st-q-sub'),
      qBody:             $('st-q-body'),
      btnBack:           $('st-btn-back'),
      btnNext:           $('st-btn-next'),
      btnNextLabel:      $('st-btn-next-label'),
      resultScore:       $('st-result-score'),
      resultScoreLabel:  $('st-result-score-label'),
      resultHeading:     $('st-result-heading'),
      resultText:        $('st-result-text'),
      resultNotice:      $('st-result-notice'),
      resultBar:         $('st-result-bar'),
      resultBarProgress: $('st-result-bar-progress'),
      pctLabel:          $('st-pct-label'),
      status:            $('st-status')
    };

    refs.startBtn.addEventListener('click', startTest);
    refs.restartBtn.addEventListener('click', restart);
    refs.btnBack.addEventListener('click', prevQuestion);
    refs.btnNext.addEventListener('click', nextQuestion);

    function startTest() {
      showScreen('questions', { focus: false });
      renderQuestion(0, { focus: true });
    }

    function showScreen(name, opts) {
      opts = opts || {};
      var focus = opts.focus !== false;
      [refs.intro, refs.questions, refs.result].forEach(function (s) { s.hidden = true; });
      var screen = refs[name];
      screen.hidden = false;
      if (focus) {
        var target = screen.querySelector('[tabindex="-1"]');
        if (target) target.focus({ preventScroll: true });
      }
    }

    function renderQuestion(index, opts) {
      opts = opts || {};
      state.current = index;
      var q = questions[index];
      var total = questions.length;
      var num = index + 1;

      refs.progressFill.style.width = Math.round((num / total) * 100) + '%';
      refs.progressLabel.textContent = num + ' / ' + total;
      refs.progressBar.setAttribute('aria-valuenow', String(num));
      refs.stepTag.textContent = q.tag;
      refs.qTitle.textContent = q.title;

      if (q.sub) { refs.qSub.textContent = q.sub; refs.qSub.hidden = false; }
      else { refs.qSub.textContent = ''; refs.qSub.hidden = true; }

      refs.btnBack.hidden = index === 0;
      refs.btnNextLabel.textContent = index === questions.length - 1 ? 'Visa resultat' : 'NÀsta frÄga';
      refs.qBody.innerHTML = '';

      if (q.type === 'multi') renderMulti(q);
      else renderSingle(q);

      updateNextButton();
      if (opts.focus) refs.qTitle.focus({ preventScroll: true });
    }

    function renderSingle(q) {
      var wrap = el('div', { className: 'st-choices' });
      wrap.setAttribute('role', 'radiogroup');
      q.options.forEach(function (opt, i) {
        var btn = createChoiceButton(opt, {
          selected: state.answers[state.current] === i,
          multi: false,
          onClick: function () {
            state.answers[state.current] = i;
            updateSelection(wrap, function (j) { return j === i; });
            updateNextButton();
            setTimeout(function () { nextQuestion(); }, 280);
          }
        });
        wrap.appendChild(btn);
      });
      refs.qBody.appendChild(wrap);
    }

    function renderMulti(q) {
      var wrap = el('div', { className: 'st-choices' });
      var cur = function () { return state.answers[state.current] || []; };
      q.options.forEach(function (opt, i) {
        var btn = createChoiceButton(opt, {
          selected: cur().indexOf(i) !== -1,
          multi: true,
          onClick: function () {
            var prev = cur();
            var next = prev.indexOf(i) !== -1
              ? prev.filter(function (x) { return x !== i; })
              : prev.concat([i]).sort(function (a, b) { return a - b; });
            state.answers[state.current] = next;
            updateSelection(wrap, function (j) { return next.indexOf(j) !== -1; });
            updateNextButton();
          }
        });
        wrap.appendChild(btn);
      });
      refs.qBody.appendChild(wrap);
    }

    function createChoiceButton(label, opts) {
      var btn = el('button', {
        className: 'st-choice' + (opts.multi ? ' multi' : '') + (opts.selected ? ' selected' : ''),
        type: 'button'
      });
      btn.setAttribute('role', opts.multi ? 'checkbox' : 'radio');
      btn.setAttribute('aria-checked', String(opts.selected));
      var check = el('span', { className: 'st-check' });
      btn.appendChild(check);
      btn.appendChild(el('span', { text: label }));
      btn.addEventListener('click', opts.onClick);
      return btn;
    }

    function updateSelection(container, isSelected) {
      var nodes = container.querySelectorAll('.st-choice');
      Array.prototype.forEach.call(nodes, function (btn, i) {
        var sel = isSelected(i);
        btn.classList.toggle('selected', sel);
        if (btn.hasAttribute('aria-checked')) btn.setAttribute('aria-checked', String(sel));
      });
    }

    function updateNextButton() {
      var q = questions[state.current];
      var a = state.answers[state.current];
      refs.btnNext.disabled = !(q.type === 'multi'
        ? Array.isArray(a) && a.length > 0
        : a !== null && a !== undefined);
    }

    function prevQuestion() {
      if (state.current > 0) renderQuestion(state.current - 1, { focus: true });
    }

    function nextQuestion() {
      updateNextButton();
      if (refs.btnNext.disabled) return;
      if (state.current < questions.length - 1) renderQuestion(state.current + 1, { focus: true });
      else showResults();
    }

    function showResults() {
      var score = questions.reduce(function (sum, q, i) {
        var a = state.answers[i];
        return sum + (a !== null && a !== undefined ? q.score(a) : 0);
      }, 0);
      var pct = Math.round((score / maxScore) * 100);
      var result = getResult(pct);

      refs.resultScore.textContent = score;
      refs.resultScoreLabel.textContent = 'poÀng av ' + maxScore + ' möjliga';
      refs.pctLabel.textContent = pct + '%';
      refs.resultHeading.textContent = result.heading;
      refs.resultText.textContent = result.text;
      refs.resultNotice.textContent = result.notice;
      refs.resultNotice.className = ['st-notice', result.noticeClass].filter(Boolean).join(' ');
      refs.resultBar.style.width = '0%';
      refs.resultBar.style.background = result.barColor;
      refs.resultBarProgress.setAttribute('aria-valuenow', String(pct));

      showScreen('result');
      setTimeout(function () { refs.resultBar.style.width = pct + '%'; }, 120);
    }

    function getResult(pct) {
      if (pct <= 35) return {
        heading: 'LÄg indikation pÄ insomni',
        text: 'Dina svar tyder inte pĂ„ tydliga tecken pĂ„ insomni. Sömnproblem kan Ă€ndĂ„ vara jobbiga – om besvĂ€ren hĂ„ller i sig kan det vara klokt att prata med vĂ„rden.',
        notice: '💡 Tips: Regelbundna sömnrutiner och mindre skĂ€rmtid före lĂ€ggdags hjĂ€lper mĂ„nga att sova bĂ€ttre.',
        noticeClass: '',
        barColor: '#16a34a'
      };
      if (pct <= 65) return {
        heading: 'MÄttlig pÄverkan av sömnproblem',
        text: 'Dina svar tyder pÄ att sömnproblemen pÄverkar din vardag. Det kan vara vÀrt att söka stöd om besvÀren fortsÀtter.',
        notice: '⚕ ÖvervĂ€g att kontakta vĂ„rdcentralen. KBT-i (kognitiv beteendeterapi för insomni) Ă€r en etablerad behandlingsmetod.',
        noticeClass: 'orange',
        barColor: '#d97706'
      };
      return {
        heading: 'Tydliga tecken pÄ sömnbesvÀr',
        text: 'Dina svar stÀmmer med flera vanliga tecken pÄ insomni. Testet Àr inte en diagnos, men det kan vara en god idé att prata med din lÀkare.',
        notice: '⚕ RĂ„dgör med lĂ€kare eller vĂ„rdcentral. Insomni Ă€r ett behandlingsbart tillstĂ„nd – du behöver inte leva med det.',
        noticeClass: 'red',
        barColor: '#dc2626'
      };
    }

    function restart() {
      state.current = 0;
      state.answers = Array(questions.length).fill(null);
      refs.resultBar.style.width = '0%';
      showScreen('intro');
    }

    function el(tag, props) {
      props = props || {};
      var node = document.createElement(tag);
      Object.keys(props).forEach(function (k) {
        if (k === 'text') node.textContent = props[k];
        else if (k === 'className') node.className = props[k];
        else node[k] = props[k];
      });
      return node;
    }
  }

  // Ladda Google Fonts (om de inte redan finns)
  if (!document.getElementById('st-google-fonts')) {
    var link = document.createElement('link');
    link.id = 'st-google-fonts';
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap';
    document.head.appendChild(link);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSomntest);
  } else {
    initSomntest();
  }
})();
</script>
<!-- ===== SLUT SÖMNTEST ===== -->