{"id":236,"date":"2026-01-10T10:03:06","date_gmt":"2026-01-10T08:03:06","guid":{"rendered":"https:\/\/meteopatras.eu\/new\/?page_id=236"},"modified":"2026-02-14T18:25:53","modified_gmt":"2026-02-14T16:25:53","slug":"erdbeben","status":"publish","type":"page","link":"https:\/\/meteopatras.eu\/new\/de\/%cf%83%ce%b5%ce%b9%cf%83%ce%bc%ce%bf%ce%af\/","title":{"rendered":"Erdbeben"},"content":{"rendered":"\r\n  <style id='mpwx-lqt-css-4f7bba0de3'>\r\n    .mpwx-lqt{ position:relative; width:100%; max-width:100%; margin:24px 0; }\r\n    .mpwx-lqt .wrap{ width:100%; max-width: 1360px; margin:0 auto; }\r\n    .mpwx-lqt.mpwx-fullbleed{ width:100vw; max-width:100vw; left:50%; margin-left:-50vw; margin-right:-50vw; }\r\n    .mpwx-lqt.mpwx-fullbleed .wrap{ max-width:min(1360px, calc(100vw - 24px)); padding:0 12px; }\r\n\r\n    .mpwx-lqt .tabs{\r\n      display:flex; gap:10px; flex-wrap:wrap;\r\n      align-items:center; justify-content:flex-start;\r\n      margin:0 0 10px 0;\r\n    }\r\n    .mpwx-lqt .tab{\r\n      appearance:none; border:1px solid rgba(15,23,42,.18);\r\n      background:#fff; color:#0f172a;\r\n      padding:10px 14px; border-radius:12px;\r\n      font-weight:700; letter-spacing:.2px;\r\n      cursor:pointer;\r\n      box-shadow: 0 6px 16px rgba(0,0,0,.08);\r\n      transition: transform .08s ease, box-shadow .15s ease, background .15s ease;\r\n      user-select:none;\r\n    }\r\n    .mpwx-lqt .tab:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }\r\n    .mpwx-lqt .tab.is-active{\r\n      border-color: rgba(37,99,235,.45);\r\n      background: rgba(37,99,235,.08);\r\n    }\r\n    .mpwx-lqt .frame{\r\n      width:100%;\r\n      border:0;\r\n      display:block;\r\n      min-height: 560px;\r\n      border-radius: 14px;\r\n      box-shadow: 0 10px 30px rgba(0,0,0,.12);\r\n      background:#fff;\r\n    }\r\n    .mpwx-lqt .wrap > *{ margin:0 !important; }\r\n  <\/style>\r\n  <section class='mpwx-lqt ' data-uid='4f7bba0de3' data-default-view='gr' aria-label='\u03a3\u03b5\u03b9\u03c3\u03bc\u03b9\u03ba\u03ae \u0394\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1 \u03c3\u03c4\u03b7\u03bd \u0395\u03bb\u03bb\u03ac\u03b4\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03bf\u03bd \u039a\u03cc\u03c3\u03bc\u03bf'>\r\n    <div class='wrap'>\r\n      <div class='tabs' role='tablist' aria-label='\u0395\u03bd\u03b1\u03bb\u03bb\u03b1\u03b3\u03ae \u03c7\u03ac\u03c1\u03c4\u03b7 \u03c3\u03b5\u03b9\u03c3\u03bc\u03ce\u03bd'>\r\n        <button type='button' class='tab is-active' data-view='gr' role='tab' aria-selected='true'>\u0395\u03bb\u03bb\u03ac\u03b4\u03b1<\/button>\r\n        <button type='button' class='tab' data-view='reg' role='tab' aria-selected='false'>\u03a0\u03b5\u03c1\u03b9\u03bf\u03c7\u03ae<\/button>\r\n        <button type='button' class='tab' data-view='world' role='tab' aria-selected='false'>\u039a\u03cc\u03c3\u03bc\u03bf\u03c2<\/button>\r\n      <\/div>\r\n\r\n      <iframe\r\n        class='frame'\r\n        src='https:\/\/meteopatras.eu\/lastquake.html'\r\n        title='\u03a3\u03b5\u03b9\u03c3\u03bc\u03b9\u03ba\u03ae \u0394\u03c1\u03b1\u03c3\u03c4\u03b7\u03c1\u03b9\u03cc\u03c4\u03b7\u03c4\u03b1 \u03c3\u03c4\u03b7\u03bd \u0395\u03bb\u03bb\u03ac\u03b4\u03b1 \u03ba\u03b1\u03b9 \u03c4\u03bf\u03bd \u039a\u03cc\u03c3\u03bc\u03bf'\r\n        loading='lazy'\r\n        referrerpolicy='strict-origin-when-cross-origin'\r\n        scrolling='no'\r\n      ><\/iframe>\r\n    <\/div>\r\n  <\/section>\r\n  <script id='mpwx-lqt-js-4f7bba0de3'>\r\n  (function(){\r\n    var root = document.querySelector('.mpwx-lqt[data-uid=\"4f7bba0de3\"]');\r\n    if(!root) return;\r\n    var iframe = root.querySelector('iframe');\r\n    var tabs = Array.prototype.slice.call(root.querySelectorAll('[data-view]'));\r\n    if(!iframe || !tabs.length) return;\r\n\r\n    \/\/ Config\r\n    var VIEW = { gr:'gr', reg:'reg', world:'world' };\r\n    var ratioGr = 740\/1200;\r\n    var ratioReg = 680\/1200;\r\n\r\n    var minH = 560;\r\n    var worldVH = 84;     \/\/ percent of viewport height\r\n    var worldMax = 920;   \/\/ px\r\n\r\n    var injected = false;\r\n    var inner = { ok:false, doc:null, win:null, styleEl:null, eqgrI:null, vneI:null, srcEqgr:null, srcVne:null };\r\n\r\n    function clamp(n, lo, hi){ return Math.max(lo, Math.min(hi, n)); }\r\n\r\n    function setActive(view){\r\n      tabs.forEach(function(b){\r\n        b.classList.toggle('is-active', b.getAttribute('data-view') === view);\r\n        b.setAttribute('aria-selected', b.getAttribute('data-view') === view ? 'true':'false');\r\n      });\r\n    }\r\n\r\n    function desiredHeight(view){\r\n      var w = iframe.getBoundingClientRect().width || iframe.clientWidth || 900;\r\n      if(view === VIEW.gr){\r\n        return Math.max(minH, Math.round(w * ratioGr) + 6);\r\n      }\r\n      if(view === VIEW.reg){\r\n        return Math.max(minH, Math.round(w * ratioReg) + 6);\r\n      }\r\n      \/\/ world: slightly taller (to fit tabs comfortably as you asked)\r\n      var vh = Math.round(window.innerHeight * (worldVH\/100));\r\n      return clamp(vh, minH, worldMax);\r\n    }\r\n\r\n    function applyInnerVisibility(view){\r\n      if(!inner.ok) return;\r\n\r\n      \/\/ Store original src once\r\n      if(!inner.srcEqgr && inner.eqgrI) inner.srcEqgr = inner.eqgrI.getAttribute('src') || '';\r\n      if(!inner.srcVne  && inner.vneI)  inner.srcVne  = inner.vneI.getAttribute('src')  || '';\r\n\r\n      \/\/ Reduce load by blanking hidden iframes\r\n      if(view === VIEW.gr){\r\n        if(inner.eqgrI && inner.srcEqgr) inner.eqgrI.setAttribute('src', inner.srcEqgr);\r\n        if(inner.vneI) inner.vneI.setAttribute('src', 'about:blank');\r\n      } else if(view === VIEW.reg){\r\n        if(inner.vneI && inner.srcVne) inner.vneI.setAttribute('src', inner.srcVne);\r\n        if(inner.eqgrI) inner.eqgrI.setAttribute('src', 'about:blank');\r\n      } else {\r\n        if(inner.eqgrI) inner.eqgrI.setAttribute('src', 'about:blank');\r\n        if(inner.vneI) inner.vneI.setAttribute('src', 'about:blank');\r\n      }\r\n\r\n      \/\/ Set view flag for CSS\r\n      try{\r\n        inner.doc.body.setAttribute('data-mpwx-view', view);\r\n      }catch(e){}\r\n    }\r\n\r\n    function ensureInjected(){\r\n      try{\r\n        inner.doc = iframe.contentDocument || iframe.contentWindow.document;\r\n        inner.win = iframe.contentWindow;\r\n        if(!inner.doc || !inner.doc.body) return false;\r\n\r\n        \/\/ Basic DOM refs (these exist in your lastquake.html)\r\n        inner.eqgrI = inner.doc.querySelector('.iframe-container.eqgr iframe');\r\n        inner.vneI  = inner.doc.querySelector('.iframe-container.vne iframe');\r\n\r\n        \/\/ Create \/ reuse style element inside iframe\r\n        inner.styleEl = inner.doc.getElementById('mpwx-lqt-injected-style');\r\n        if(!inner.styleEl){\r\n          inner.styleEl = inner.doc.createElement('style');\r\n          inner.styleEl.id = 'mpwx-lqt-injected-style';\r\n          inner.doc.head.appendChild(inner.styleEl);\r\n        }\r\n\r\n        \/\/ CSS: hide internal header\/titles\/footer and toggle panels by data attribute\r\n        inner.styleEl.textContent =\r\n          'html,body{margin:0 !important;padding:0 !important;overflow:hidden !important;background:transparent !important;}' +\r\n          'header,h1,footer{display:none !important;}' +\r\n          'h2{display:none !important;}' +\r\n          '.iframe-container,.map-card{margin:0 auto !important;max-width:100% !important;box-shadow:none !important;border-radius:14px !important;}' +\r\n          '.iframe-container{display:none !important;}' +\r\n          '.map-card{display:none !important;padding:0 !important;}' +\r\n          'body[data-mpwx-view=\"gr\"] .iframe-container.eqgr{display:block !important;}' +\r\n          'body[data-mpwx-view=\"reg\"] .iframe-container.vne{display:block !important;}' +\r\n          'body[data-mpwx-view=\"world\"] .map-card{display:block !important;}';\r\n\r\n        injected = true;\r\n        inner.ok = true;\r\n        return true;\r\n      }catch(e){\r\n        inner.ok = false;\r\n        return false;\r\n      }\r\n    }\r\n\r\n    function resizeAndInvalidate(view){\r\n      var h = desiredHeight(view);\r\n      iframe.style.height = h + 'px';\r\n\r\n      if(!inner.ok) return;\r\n\r\n      \/\/ For world view, make Leaflet map fill the iframe height (avoid vh recursion)\r\n      if(view === VIEW.world){\r\n        try{\r\n          var mapDiv = inner.doc.getElementById('eq-map');\r\n          if(mapDiv){\r\n            mapDiv.style.height = Math.max(320, h - 6) + 'px';\r\n          }\r\n          \/\/ Invalidate Leaflet map size if available\r\n          if(inner.win && inner.win.map && typeof inner.win.map.invalidateSize === 'function'){\r\n            setTimeout(function(){ try{ inner.win.map.invalidateSize(); }catch(e){} }, 220);\r\n          }\r\n        }catch(e){}\r\n      }\r\n    }\r\n\r\n    function setView(view){\r\n      setActive(view);\r\n\r\n      \/\/ Ensure iframe is loaded & injected\r\n      var ok = ensureInjected();\r\n      if(ok){\r\n        applyInnerVisibility(view);\r\n        resizeAndInvalidate(view);\r\n      }else{\r\n        \/\/ Retry a bit (in case optimizers delay execution)\r\n        var tries = 0;\r\n        (function tick(){\r\n          tries++;\r\n          if(ensureInjected()){\r\n            applyInnerVisibility(view);\r\n            resizeAndInvalidate(view);\r\n            return;\r\n          }\r\n          if(tries < 40) setTimeout(tick, 250);\r\n        })();\r\n        \/\/ Fallback height immediately\r\n        iframe.style.height = desiredHeight(view) + 'px';\r\n      }\r\n    }\r\n\r\n    \/\/ Tab handlers\r\n    tabs.forEach(function(btn){\r\n      btn.addEventListener('click', function(){\r\n        setView(btn.getAttribute('data-view'));\r\n      });\r\n    });\r\n\r\n    \/\/ On iframe load -> default to Greece\r\n    iframe.addEventListener('load', function(){\r\n      \/\/ Ensure default active tab view and injection\r\n      setView(root.getAttribute('data-default-view') || VIEW.gr);\r\n    });\r\n\r\n    \/\/ Recompute height on resize\r\n    window.addEventListener('resize', function(){\r\n      var active = root.querySelector('.tab.is-active');\r\n      var view = active ? active.getAttribute('data-view') : VIEW.gr;\r\n      resizeAndInvalidate(view);\r\n    });\r\n\r\n    \/\/ Initial UI state (before iframe load)\r\n    setActive(root.getAttribute('data-default-view') || VIEW.gr);\r\n    iframe.style.height = desiredHeight(root.getAttribute('data-default-view') || VIEW.gr) + 'px';\r\n  })();\r\n  <\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-236","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/meteopatras.eu\/new\/de\/wp-json\/wp\/v2\/pages\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meteopatras.eu\/new\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/meteopatras.eu\/new\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/meteopatras.eu\/new\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meteopatras.eu\/new\/de\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":10,"href":"https:\/\/meteopatras.eu\/new\/de\/wp-json\/wp\/v2\/pages\/236\/revisions"}],"predecessor-version":[{"id":618,"href":"https:\/\/meteopatras.eu\/new\/de\/wp-json\/wp\/v2\/pages\/236\/revisions\/618"}],"wp:attachment":[{"href":"https:\/\/meteopatras.eu\/new\/de\/wp-json\/wp\/v2\/media?parent=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}