{"id":"cca6b9e8-3d27-4cfa-9196-c5d4323eb297","title":"Lesertall Polaris Media Sør","author":"Øystein","body":"<!DOCTYPE html>\r\n<html lang=\"no\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>MBL Lesertall</title>\r\n<style>\r\n  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,500;0,9..40,700;1,9..40,400&family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap');\r\n\r\n  :root {\r\n    --blue: #0a3d6b;\r\n    --blue-mid: #1a5a8e;\r\n    --blue-light: #e9f0f7;\r\n    --red: #c9252d;\r\n    --green: #1a7a3a;\r\n    --green-bg: #e6f4ea;\r\n    --red-bg: #fce8e8;\r\n    --gray-50: #fafafa;\r\n    --gray-100: #f3f3f3;\r\n    --gray-300: #ccc;\r\n    --gray-500: #777;\r\n    --gray-700: #444;\r\n    --gray-900: #1a1a1a;\r\n    --radius: 8px;\r\n  }\r\n\r\n  * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n  html, body {\r\n    overflow: hidden;\r\n    height: auto;\r\n  }\r\n\r\n  body {\r\n    font-family: 'DM Sans', system-ui, sans-serif;\r\n    color: var(--gray-900);\r\n    background: #fff;\r\n    -webkit-font-smoothing: antialiased;\r\n  }\r\n\r\n  .mbl-widget {\r\n    max-width: 720px;\r\n    margin: 0 auto;\r\n    padding: 20px 16px;\r\n  }\r\n\r\n  .mbl-header {\r\n    margin-bottom: 28px;\r\n    padding-bottom: 16px;\r\n    border-bottom: 3px solid var(--blue);\r\n  }\r\n\r\n  .mbl-header h2 {\r\n    font-family: 'Fraunces', serif;\r\n    font-weight: 800;\r\n    font-size: 1.6rem;\r\n    color: var(--blue);\r\n    line-height: 1.2;\r\n    margin-bottom: 6px;\r\n  }\r\n\r\n  .mbl-header .subtitle {\r\n    font-size: 0.85rem;\r\n    color: var(--gray-500);\r\n    font-style: italic;\r\n  }\r\n\r\n  /* Tab navigation */\r\n  .mbl-tabs {\r\n    display: flex;\r\n    gap: 4px;\r\n    margin-bottom: 20px;\r\n    background: var(--gray-100);\r\n    border-radius: var(--radius);\r\n    padding: 4px;\r\n  }\r\n\r\n  .mbl-tab {\r\n    flex: 1;\r\n    padding: 10px 8px;\r\n    border: none;\r\n    background: transparent;\r\n    font-family: 'DM Sans', sans-serif;\r\n    font-size: 0.82rem;\r\n    font-weight: 500;\r\n    color: var(--gray-500);\r\n    cursor: pointer;\r\n    border-radius: 6px;\r\n    transition: all 0.2s ease;\r\n    text-align: center;\r\n  }\r\n\r\n  .mbl-tab:hover { color: var(--gray-700); }\r\n\r\n  .mbl-tab.active {\r\n    background: #fff;\r\n    color: var(--blue);\r\n    font-weight: 700;\r\n    box-shadow: 0 1px 4px rgba(0,0,0,0.08);\r\n  }\r\n\r\n  /* Table */\r\n  .mbl-section { display: none; }\r\n  .mbl-section.active { display: block; }\r\n\r\n  .mbl-table {\r\n    width: 100%;\r\n    border-collapse: separate;\r\n    border-spacing: 0;\r\n    font-size: 0.88rem;\r\n  }\r\n\r\n  .mbl-table thead th {\r\n    background: var(--blue);\r\n    color: #fff;\r\n    font-weight: 500;\r\n    font-size: 0.75rem;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.04em;\r\n    padding: 10px 10px;\r\n    text-align: center;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .mbl-table thead th:first-child {\r\n    text-align: left;\r\n    border-radius: var(--radius) 0 0 0;\r\n    position: relative;\r\n  }\r\n\r\n  .mbl-table thead th:last-child {\r\n    border-radius: 0 var(--radius) 0 0;\r\n  }\r\n\r\n  .mbl-table tbody td {\r\n    padding: 10px 10px;\r\n    text-align: center;\r\n    border-bottom: 1px solid var(--gray-100);\r\n    transition: background 0.15s;\r\n  }\r\n\r\n  .mbl-table tbody tr:hover td {\r\n    background: var(--blue-light);\r\n  }\r\n\r\n  .mbl-table tbody td:first-child {\r\n    text-align: left;\r\n    font-weight: 700;\r\n    color: var(--gray-900);\r\n    white-space: nowrap;\r\n    position: relative;\r\n  }\r\n\r\n  .mbl-table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--radius); }\r\n  .mbl-table tbody tr:last-child td:last-child { border-radius: 0 0 var(--radius) 0; }\r\n\r\n  .val-num { font-variant-numeric: tabular-nums; }\r\n\r\n  .pct-badge {\r\n    display: inline-block;\r\n    padding: 2px 8px;\r\n    border-radius: 20px;\r\n    font-weight: 700;\r\n    font-size: 0.8rem;\r\n    font-variant-numeric: tabular-nums;\r\n  }\r\n\r\n  .pct-pos {\r\n    background: var(--green-bg);\r\n    color: var(--green);\r\n  }\r\n\r\n  .pct-neg {\r\n    background: var(--red-bg);\r\n    color: var(--red);\r\n  }\r\n\r\n  .pct-zero {\r\n    background: var(--gray-100);\r\n    color: var(--gray-500);\r\n  }\r\n\r\n  .mbl-footer {\r\n    margin-top: 16px;\r\n    padding-top: 12px;\r\n    border-top: 1px solid var(--gray-100);\r\n    font-size: 0.75rem;\r\n    color: var(--gray-500);\r\n    display: flex;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  /* Highlight row */\r\n  .mbl-table tbody tr.highlight td {\r\n    background: var(--blue-light);\r\n  }\r\n  .mbl-table tbody tr.highlight td:first-child {\r\n    color: var(--blue);\r\n  }\r\n\r\n  /* Scroll wrapper for mobile */\r\n  .mbl-scroll {\r\n    overflow-x: auto;\r\n    -webkit-overflow-scrolling: touch;\r\n    border-radius: var(--radius);\r\n  }\r\n\r\n  .mbl-scroll::-webkit-scrollbar { height: 4px; }\r\n  .mbl-scroll::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }\r\n\r\n  /* Sticky first column */\r\n  .mbl-table thead th:first-child,\r\n  .mbl-table tbody td:first-child {\r\n    position: sticky;\r\n    left: 0;\r\n    z-index: 2;\r\n    background: inherit;\r\n  }\r\n\r\n  .mbl-table thead th:first-child {\r\n    background: var(--blue);\r\n    z-index: 3;\r\n  }\r\n\r\n  .mbl-table tbody tr:nth-child(odd) td:first-child { background: #fff; }\r\n  .mbl-table tbody tr:nth-child(even) td:first-child { background: #fff; }\r\n  .mbl-table tbody tr.highlight td:first-child { background: var(--blue-light); }\r\n  .mbl-table tbody tr:hover td:first-child { background: var(--blue-light); }\r\n\r\n  /* Shadow hint on sticky column */\r\n  .mbl-table thead th:first-child::after,\r\n  .mbl-table tbody td:first-child::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    right: -6px;\r\n    width: 6px;\r\n    height: 100%;\r\n    background: linear-gradient(to right, rgba(0,0,0,0.04), transparent);\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    transition: opacity 0.2s;\r\n  }\r\n\r\n  .mbl-scroll.scrolled .mbl-table thead th:first-child::after,\r\n  .mbl-scroll.scrolled .mbl-table tbody td:first-child::after {\r\n    opacity: 1;\r\n  }\r\n\r\n  /* Responsive */\r\n  @media (max-width: 600px) {\r\n    .mbl-widget { padding: 12px 8px; }\r\n    .mbl-header h2 { font-size: 1.2rem; }\r\n    .mbl-header .subtitle { font-size: 0.78rem; }\r\n    .mbl-tab { font-size: 0.72rem; padding: 8px 4px; }\r\n    .mbl-table { font-size: 0.78rem; min-width: 520px; }\r\n    .mbl-table thead th { padding: 8px 8px; font-size: 0.67rem; }\r\n    .mbl-table tbody td { padding: 9px 8px; }\r\n    .mbl-table tbody td:first-child { min-width: 120px; }\r\n    .pct-badge { font-size: 0.7rem; padding: 2px 6px; }\r\n    .mbl-footer { flex-direction: column; gap: 2px; }\r\n  }\r\n</style>\r\n</head>\r\n<body>\r\n\r\n<div class=\"mbl-widget\">\r\n  <div class=\"mbl-header\">\r\n    <h2>Lesertall for Polaris Media Sør</h2>\r\n    <div class=\"subtitle\">MBL / Forbruker & Media – H2 2024, H1 2025 og H2 2025</div>\r\n  </div>\r\n\r\n  <div class=\"mbl-tabs\">\r\n    <button class=\"mbl-tab active\" data-tab=\"totalt\">Totalt</button>\r\n    <button class=\"mbl-tab\" data-tab=\"digitalt\">Digitalt</button>\r\n    <button class=\"mbl-tab\" data-tab=\"papir\">Papir</button>\r\n  </div>\r\n\r\n  <div class=\"mbl-section active\" id=\"totalt\"><div class=\"mbl-scroll\"></div></div>\r\n  <div class=\"mbl-section\" id=\"digitalt\"><div class=\"mbl-scroll\"></div></div>\r\n  <div class=\"mbl-section\" id=\"papir\"><div class=\"mbl-scroll\"></div></div>\r\n\r\n  <div class=\"mbl-footer\">\r\n    <span>Kilde: Forbruker & Media</span>\r\n    <span>Kombinasjon alle produkter</span>\r\n  </div>\r\n</div>\r\n\r\n<script>\r\nconst data = {\r\n  aviser: [\r\n    \"Agderposten\", \"Fædrelandsvennen\", \"Grimstad Adressetidende\",\r\n    \"Lillesands-Posten\", \"Lindesnes\", \"Lister24\", \"Varden\", \"Vennesla Tidende\"\r\n  ],\r\n  h2_2024: {\r\n    totalt:   [37500, 87500, 13100, 6800, 12500, 12000, 36200, 5900],\r\n    digitalt: [25800, 70400, 9600, 3800, 9100, 9700, 26800, 3500],\r\n    papir:    [17700, 28800, 7400, 4800, 5300, 4400, 13700, 3600]\r\n  },\r\n  h1_2025: {\r\n    totalt:   [36600, 84800, 12400, 6600, 12400, 11800, 36300, 6100],\r\n    digitalt: [26100, 68500, 8800, 3900, 9100, 9800, 28100, 3600],\r\n    papir:    [16600, 27000, 6500, 4300, 5200, 4000, 12100, 3600]\r\n  },\r\n  h2_2025: {\r\n    totalt:   [39200, 80500, 13900, 6900, 11800, 11300, 35500, 5600],\r\n    digitalt: [29400, 67500, 10900, 5100, 9100, 9600, 27900, 3400],\r\n    papir:    [15700, 22000, 6400, 4000, 4900, 3800, 11800, 3100]\r\n  }\r\n};\r\n\r\nfunction fmt(n) {\r\n  return n.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\r\n}\r\n\r\nfunction pctBadge(v1, v2) {\r\n  if (v1 === 0) return '<span class=\"pct-badge pct-zero\">–</span>';\r\n  const pct = ((v2 - v1) / v1 * 100);\r\n  const sign = pct > 0 ? '+' : '';\r\n  const cls = pct > 0.05 ? 'pct-pos' : pct < -0.05 ? 'pct-neg' : 'pct-zero';\r\n  return `<span class=\"pct-badge ${cls}\">${sign}${pct.toFixed(1)}%</span>`;\r\n}\r\n\r\nfunction buildTable(cat) {\r\n  const h2_24 = data.h2_2024[cat];\r\n  const h1_25 = data.h1_2025[cat];\r\n  const h2_25 = data.h2_2025[cat];\r\n\r\n  let html = `<table class=\"mbl-table\">\r\n    <thead><tr>\r\n      <th>Avis</th>\r\n      <th>H2 '24</th>\r\n      <th>H1 '25</th>\r\n      <th>H2 '25</th>\r\n      <th>Halvår</th>\r\n      <th>År (H2→H2)</th>\r\n    </tr></thead><tbody>`;\r\n\r\n  data.aviser.forEach((avis, i) => {\r\n    const isAP = avis === 'Agderposten';\r\n    html += `<tr class=\"${isAP ? 'highlight' : ''}\">\r\n      <td>${avis}</td>\r\n      <td class=\"val-num\">${fmt(h2_24[i])}</td>\r\n      <td class=\"val-num\">${fmt(h1_25[i])}</td>\r\n      <td class=\"val-num\">${fmt(h2_25[i])}</td>\r\n      <td>${pctBadge(h1_25[i], h2_25[i])}</td>\r\n      <td>${pctBadge(h2_24[i], h2_25[i])}</td>\r\n    </tr>`;\r\n  });\r\n\r\n  html += '</tbody></table>';\r\n  return html;\r\n}\r\n\r\n// Render tables\r\n['totalt', 'digitalt', 'papir'].forEach(cat => {\r\n  document.querySelector(`#${cat} .mbl-scroll`).innerHTML = buildTable(cat);\r\n});\r\n\r\n// Scroll detection for sticky column shadow\r\ndocument.querySelectorAll('.mbl-scroll').forEach(el => {\r\n  el.addEventListener('scroll', () => {\r\n    el.classList.toggle('scrolled', el.scrollLeft > 2);\r\n  });\r\n});\r\n\r\n// Tab switching\r\ndocument.querySelectorAll('.mbl-tab').forEach(tab => {\r\n  tab.addEventListener('click', () => {\r\n    document.querySelectorAll('.mbl-tab').forEach(t => t.classList.remove('active'));\r\n    document.querySelectorAll('.mbl-section').forEach(s => s.classList.remove('active'));\r\n    tab.classList.add('active');\r\n    document.getElementById(tab.dataset.tab).classList.add('active');\r\n    sendHeight();\r\n  });\r\n});\r\n\r\n// Auto-resize iframe height\r\nfunction sendHeight() {\r\n  const h = document.querySelector('.mbl-widget').scrollHeight + 20;\r\n  window.parent.postMessage({ type: 'mbl-resize', height: h }, '*');\r\n}\r\nsendHeight();\r\nwindow.addEventListener('resize', sendHeight);\r\n</script>\r\n</body>\r\n</html>","date":"2026-02-13T14:06:51.039Z"}